Commit f719aea0479a3de107d50e7e6559e88df239109b | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-02-17 18:41:28-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-02-17 19:47:09-08:00
log	f719aea0479a3de107d50e7e6559e88df239109b
tree	c4bf84cd59dfa90fe2a223e6296f60b5066d05ec
parent	f6136bd4c2a23a37c41610ac352058bc17a198a8

Use Command highlighting state for composer menu navigation

- Switch composer menu arrow-key navigation to `Command`'s internal highlight handling
- Track highlighted item by id instead of manual index/keyboard state
- Remove custom hover/highlight plumbing and hidden-scroll sync logic

1 files changed, 44 insertions(+), 77 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx

apps/web/src/components/ChatView.tsx+44-77

 @@ -96,7 +96,7 @@ import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "./ui/menu"
 import { CursorIcon, Icon } from "./Icons";
 import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
 import { Badge } from "./ui/badge";
-import { Command, CommandItem, CommandList } from "./ui/command";
+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
 function formatMessageMeta(createdAt: string, duration: string | null): string {
   if (!duration) return formatTimestamp(createdAt);
 @@ -220,27 +220,13 @@ const VscodeEntryIcon = memo(function VscodeEntryIcon(props: {
 const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
   item: ComposerCommandItem;
-  index: number;
-  isHighlighted: boolean;
-  keyboardHighlight: boolean;
   resolvedTheme: "light" | "dark";
-  onHighlight: (index: number) => void;
   onSelect: (item: ComposerCommandItem) => void;
 }) {
   return (
     <CommandItem
       value={props.item.id}
-      data-composer-menu-index={props.index}
+      className="cursor-pointer gap-2"
-      className={cn(
-        "cursor-pointer gap-2",
-        props.keyboardHighlight &&
-          !props.isHighlighted &&
-          "data-highlighted:bg-transparent data-highlighted:text-inherit",
-        props.isHighlighted && "bg-accent text-accent-foreground",
-      )}
-      onMouseEnter={() => {
-        props.onHighlight(props.index);
-      }}
       onMouseDown={(event) => {
         event.preventDefault();
       }}
 @@ -271,31 +257,30 @@ const ComposerCommandMenuItem = memo(function ComposerCommandMenuItem(props: {
 const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
   items: ComposerCommandItem[];
-  selectedIndex: number;
-  keyboardHighlight: boolean;
   resolvedTheme: "light" | "dark";
   isLoading: boolean;
   triggerKind: ComposerTriggerKind | null;
-  onHighlight: (index: number) => void;
+  onHighlightedItemChange: (itemId: string | null) => void;
   onSelect: (item: ComposerCommandItem) => void;
-  menuRef: RefObject<HTMLDivElement | null>;
+  commandInputRef: RefObject<HTMLInputElement | null>;
 }) {
   return (
-    <Command>
+    <Command
-      <div
+      mode="none"
-        ref={props.menuRef}
+      onItemHighlighted={(highlightedValue) => {
-        className="overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs"
+        props.onHighlightedItemChange(typeof highlightedValue === "string" ? highlightedValue : null);
-      >
+      }}
+    >
+      <div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+        <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">
+          <CommandInput autoFocus={false} ref={props.commandInputRef} />
+        </div>
         <CommandList className="max-h-64">
-          {props.items.map((item, index) => (
+          {props.items.map((item) => (
             <ComposerCommandMenuItem
               key={item.id}
               item={item}
-              index={index}
-              isHighlighted={index === props.selectedIndex}
-              keyboardHighlight={props.keyboardHighlight}
               resolvedTheme={props.resolvedTheme}
-              onHighlight={props.onHighlight}
               onSelect={props.onSelect}
             />
           ))}
 @@ -337,14 +322,12 @@ export default function ChatView() {
   const [nowTick, setNowTick] = useState(() => Date.now());
   const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
   const [composerCursor, setComposerCursor] = useState(0);
-  const [composerMenuIndex, setComposerMenuIndex] = useState(0);
+  const [composerHighlightedItemId, setComposerHighlightedItemId] = useState<string | null>(null);
-  const [composerKeyboardHighlight, setComposerKeyboardHighlight] = useState(false);
   const messagesScrollRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const shouldAutoScrollRef = useRef(true);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const composerMenuRef = useRef<HTMLDivElement>(null);
+  const composerCommandInputRef = useRef<HTMLInputElement>(null);
-  const previousComposerMenuIndexRef = useRef(0);
   const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
   const dragDepthRef = useRef(0);
   const terminalOpenByThreadRef = useRef<Record<string, boolean>>({});
 @@ -519,9 +502,13 @@ export default function ChatView() {
     }));
   }, [composerTrigger, workspaceEntries]);
   const composerMenuOpen = Boolean(composerTrigger);
-  const activeComposerMenuItem =
+  const activeComposerMenuItem = useMemo(
-    composerMenuItems[Math.min(composerMenuIndex, Math.max(0, composerMenuItems.length - 1))] ??
+    () =>
-    null;
+      composerMenuItems.find((item) => item.id === composerHighlightedItemId) ??
+      composerMenuItems[0] ??
+      null,
+    [composerHighlightedItemId, composerMenuItems],
+  );
   const keybindings = keybindingsQuery.data ?? EMPTY_KEYBINDINGS;
   // Default true while loading to avoid toolbar flicker.
   const isGitRepo = branchesQuery.data?.isRepo ?? true;
 @@ -688,36 +675,14 @@ export default function ChatView() {
   }, [activeThread?.id]);
   useEffect(() => {
-    setComposerMenuIndex(0);
+    if (!composerMenuOpen) {
-  }, [composerTrigger?.kind, composerTrigger?.query, composerMenuItems.length]);
+      setComposerHighlightedItemId(null);
-  useEffect(() => {
-    if (!composerMenuOpen) return;
-    setComposerKeyboardHighlight(false);
-    setComposerMenuIndex(0);
-  }, [composerMenuOpen]);
-  useEffect(() => {
-    if (!composerMenuOpen || composerMenuItems.length === 0) {
       return;
     }
-    const clampedIndex = Math.min(composerMenuIndex, composerMenuItems.length - 1);
+    setComposerHighlightedItemId((existing) =>
-    const previousIndex = previousComposerMenuIndexRef.current;
+      existing && composerMenuItems.some((item) => item.id === existing) ? existing : null,
-    const direction = clampedIndex - previousIndex;
-    previousComposerMenuIndexRef.current = clampedIndex;
-    const aheadIndex =
-      direction > 0
-        ? Math.min(clampedIndex + 1, composerMenuItems.length - 1)
-        : direction < 0
-          ? Math.max(clampedIndex - 1, 0)
-          : clampedIndex;
-    const node = composerMenuRef.current?.querySelector<HTMLElement>(
-      `[data-composer-menu-index="${aheadIndex}"]`,
     );
-    node?.scrollIntoView({ block: "nearest" });
+  }, [composerMenuItems, composerMenuOpen]);
-  }, [composerMenuIndex, composerMenuItems.length, composerMenuOpen]);
   useEffect(() => {
     if (!activeThread?.id || activeThread.terminalOpen) return;
 @@ -739,7 +704,7 @@ export default function ChatView() {
       return [];
     });
     setComposerCursor(0);
-    setComposerMenuIndex(0);
+    setComposerHighlightedItemId(null);
     dragDepthRef.current = 0;
     setIsDragOverComposer(false);
     setExpandedImage(null);
 @@ -1128,7 +1093,7 @@ export default function ChatView() {
     setPrompt("");
     setComposerImages([]);
     setComposerCursor(0);
-    setComposerMenuIndex(0);
+    setComposerHighlightedItemId(null);
     const sessionInfo = await ensureSession(sessionCwd);
     if (!sessionInfo) return;
 @@ -1271,9 +1236,15 @@ export default function ChatView() {
     },
     [applyPromptReplacement, composerTrigger, onModelSelect],
   );
-  const onHighlightComposerMenuItem = useCallback((index: number) => {
+  const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
-    setComposerKeyboardHighlight(false);
+    setComposerHighlightedItemId(itemId);
-    setComposerMenuIndex(index);
+  }, []);
+  const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {
+    const commandInput = composerCommandInputRef.current;
+    if (!commandInput) return;
+    commandInput.dispatchEvent(
+      new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+    );
   }, []);
   const isComposerMenuLoading =
     composerTriggerKind === "path" &&
 @@ -1291,14 +1262,12 @@ export default function ChatView() {
     if (composerMenuOpen && composerMenuItems.length > 0) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setComposerKeyboardHighlight(true);
+        nudgeComposerMenuHighlight("ArrowDown");
-        setComposerMenuIndex((existing) => Math.min(existing + 1, composerMenuItems.length - 1));
         return;
       }
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        setComposerKeyboardHighlight(true);
+        nudgeComposerMenuHighlight("ArrowUp");
-        setComposerMenuIndex((existing) => Math.max(existing - 1, 0));
         return;
       }
       if (e.key === "Tab" || e.key === "Enter") {
 @@ -1411,14 +1380,12 @@ export default function ChatView() {
                 <div className="absolute inset-x-0 bottom-full z-20 mb-2 px-1">
                   <ComposerCommandMenu
                     items={composerMenuItems}
-                    selectedIndex={composerMenuIndex}
-                    keyboardHighlight={composerKeyboardHighlight}
                     resolvedTheme={resolvedTheme}
                     isLoading={isComposerMenuLoading}
                     triggerKind={composerTriggerKind}
-                    onHighlight={onHighlightComposerMenuItem}
+                    onHighlightedItemChange={onComposerMenuItemHighlighted}
                     onSelect={onSelectComposerItem}
-                    menuRef={composerMenuRef}
+                    commandInputRef={composerCommandInputRef}
                   />
                 </div>
               )}