fix: use portal for command suggestions in creation mode

The CommandSuggestions popup was being clipped by overflow:hidden on
parent containers in creation mode. In workspace mode, ChatInput is
positioned outside the overflow-hidden scroll container.

Solution: Pass anchorRef to CommandSuggestions when in creation mode.
When anchorRef is provided, the component uses createPortal to render
to document.body with fixed positioning relative to the anchor element.
This escapes the overflow:hidden containers and ensures suggestions are
visible in both variants.

Author: ammar-agent

src/browser/components/ChatInput/index.tsx

@@ -781,13 +781,15 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           />
 
           {/* Command suggestions - available in both variants */}
+          {/* In creation mode, use portal (anchorRef) to escape overflow:hidden containers */}
           <CommandSuggestions
             suggestions={commandSuggestions}
             onSelectSuggestion={handleCommandSelect}
             onDismiss={() => setShowCommandSuggestions(false)}
             isVisible={showCommandSuggestions}
             ariaLabel="Slash command suggestions"
             listId={commandListId}
+            anchorRef={variant === "creation" ? inputRef : undefined}
           />
 
           <div className="flex items-end" data-component="ChatInputControls">

src/browser/components/CommandSuggestions.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "@/common/lib/utils";
 import type { SlashSuggestion } from "@/browser/utils/slashCommands/types";
 
@@ -13,6 +14,8 @@ interface CommandSuggestionsProps {
   isVisible: boolean;
   ariaLabel?: string;
   listId?: string;
+  /** Reference to the input element for portal positioning */
+  anchorRef?: React.RefObject<HTMLElement | null>;
 }
 
 // Main component
@@ -23,14 +26,51 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
   isVisible,
   ariaLabel = "Command suggestions",
   listId,
+  anchorRef,
 }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [position, setPosition] = useState<{ top: number; left: number; width: number } | null>(
+    null
+  );
+  const menuRef = useRef<HTMLDivElement>(null);
 
   // Reset selection whenever suggestions change
   useEffect(() => {
     setSelectedIndex(0);
   }, [suggestions]);
 
+  // Calculate position when using portal mode
+  useLayoutEffect(() => {
+    if (!anchorRef?.current || !isVisible) {
+      setPosition(null);
+      return;
+    }
+
+    const updatePosition = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+
+      const rect = anchor.getBoundingClientRect();
+      const menuHeight = menuRef.current?.offsetHeight ?? 200;
+
+      setPosition({
+        top: rect.top - menuHeight - 8, // 8px gap above anchor
+        left: rect.left,
+        width: rect.width,
+      });
+    };
+
+    updatePosition();
+
+    // Update on resize/scroll
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [anchorRef, isVisible, suggestions]);
+
   // Handle keyboard navigation
   useEffect(() => {
     if (!isVisible || suggestions.length === 0) return;
@@ -84,16 +124,31 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
   const activeSuggestion = suggestions[selectedIndex] ?? suggestions[0];
   const resolvedListId = listId ?? `command-suggestions-list`;
 
-  return (
+  const content = (
     <div
+      ref={menuRef}
       id={resolvedListId}
       role="listbox"
       aria-label={ariaLabel}
       aria-activedescendant={
         activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
       }
       data-command-suggestions
-      className="bg-separator border-border-light absolute right-0 bottom-full left-0 z-[100] mb-2 flex max-h-[200px] flex-col overflow-y-auto rounded border shadow-[0_-4px_12px_rgba(0,0,0,0.4)]"
+      className={cn(
+        "bg-separator border-border-light z-[100] flex max-h-[200px] flex-col overflow-y-auto rounded border shadow-[0_-4px_12px_rgba(0,0,0,0.4)]",
+        // Use absolute positioning relative to parent when not in portal mode
+        !anchorRef && "absolute right-0 bottom-full left-0 mb-2"
+      )}
+      style={
+        anchorRef && position
+          ? {
+              position: "fixed",
+              top: position.top,
+              left: position.left,
+              width: position.width,
+            }
+          : undefined
+      }
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -119,4 +174,11 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
       </div>
     </div>
   );
+
+  // Use portal when anchorRef is provided (to escape overflow:hidden containers)
+  if (anchorRef) {
+    return createPortal(content, document.body);
+  }
+
+  return content;
 };