🤖 fix: scroll slash command suggestions to follow keyboard selection (#1014)

When navigating slash commands with arrow keys, the dropdown now scrolls
to keep the selected item visible. Previously, the selection would move
outside the visible area without the view following.

_Generated with `mux`_

Author: ethanndickson

src/browser/components/CommandSuggestions.tsx

@@ -33,12 +33,18 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
     null
   );
   const menuRef = useRef<HTMLDivElement>(null);
+  const selectedRef = useRef<HTMLDivElement>(null);
 
   // Reset selection whenever suggestions change
   useEffect(() => {
     setSelectedIndex(0);
   }, [suggestions]);
 
+  // Scroll selected item into view
+  useEffect(() => {
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
   // Calculate position when using portal mode
   useLayoutEffect(() => {
     if (!anchorRef?.current || !isVisible) {
@@ -153,6 +159,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
       {suggestions.map((suggestion, index) => (
         <div
           key={suggestion.id}
+          ref={index === selectedIndex ? selectedRef : undefined}
           onMouseEnter={() => setSelectedIndex(index)}
           onClick={() => onSelectSuggestion(suggestion)}
           id={`${resolvedListId}-option-${suggestion.id}`}

src/browser/stories/App.chat.stories.tsx

@@ -249,7 +249,8 @@ npm test 2>&1 | head -20`,
       const toolHeader = canvas.getByText(/set -e/);
       await userEvent.click(toolHeader);
     });
-    // Remove unintended focus state for deterministic visual snapshot
+    // Wait for any auto-focus timers (ChatInput has 100ms delay), then blur
+    await new Promise((resolve) => setTimeout(resolve, 150));
     (document.activeElement as HTMLElement)?.blur();
   },
 };
@@ -299,7 +300,8 @@ export const WithBashToolWaiting: AppStory = {
       const toolHeader = canvas.getByText(/npm test/);
       await userEvent.click(toolHeader);
     });
-    // Remove unintended focus state for deterministic visual snapshot
+    // Wait for any auto-focus timers (ChatInput has 100ms delay), then blur
+    await new Promise((resolve) => setTimeout(resolve, 150));
     (document.activeElement as HTMLElement)?.blur();
   },
 };
@@ -448,7 +450,8 @@ export const GenericTool: AppStory = {
       const toolHeader = canvas.getByText("fetch_data");
       await userEvent.click(toolHeader);
     });
-    // Remove unintended focus state for deterministic visual snapshot
+    // Wait for any auto-focus timers (ChatInput has 100ms delay), then blur
+    await new Promise((resolve) => setTimeout(resolve, 150));
     (document.activeElement as HTMLElement)?.blur();
   },
 };