fix(ui): keep command picker highlight in sync

packages/ui/src/components/unified-picker.tsx

@@ -103,6 +103,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
   let scrollContainerRef: HTMLDivElement | undefined
   let lastWorkspaceId: string | null = null
   let lastQuery = ""
+  let lastCommandQuery = ""
   let inflightWorkspaceId: string | null = null
   let inflightSnapshotPromise: Promise<FileItem[]> | null = null
   let activeRequestId = 0
@@ -243,6 +244,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     setLoadingState("idle")
     lastWorkspaceId = null
     lastQuery = ""
+    lastCommandQuery = ""
     activeRequestId = 0
   }
 
@@ -273,8 +275,6 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     }
   })
 
-
-
   createEffect(() => {
     if (!props.open) return
     if (mode() !== "mention") return
@@ -303,6 +303,37 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
     })
   })
 
+  createEffect(() => {
+    if (!props.open) return
+    if (mode() !== "command") return
+
+    const query = props.searchQuery
+    const count = filteredCommands().length
+
+    if (query !== lastCommandQuery) {
+      lastCommandQuery = query
+      setSelectedIndex(0)
+      resetScrollPosition()
+      return
+    }
+
+    if (count <= 0) {
+      if (selectedIndex() !== 0) {
+        setSelectedIndex(0)
+      }
+      return
+    }
+
+    const current = selectedIndex()
+    if (current < 0) {
+      setSelectedIndex(0)
+      return
+    }
+    if (current >= count) {
+      setSelectedIndex(count - 1)
+    }
+  })
+
   const allItems = (): PickerItem[] => {
     const items: PickerItem[] = []
     if (mode() === "command") {
@@ -335,20 +366,24 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
     if (e.key === "ArrowDown") {
       e.preventDefault()
+      e.stopPropagation()
       setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1))
       scrollToSelected()
     } else if (e.key === "ArrowUp") {
       e.preventDefault()
+      e.stopPropagation()
       setSelectedIndex((prev) => Math.max(prev - 1, 0))
       scrollToSelected()
     } else if (e.key === "Enter" || e.key === "Tab") {
       e.preventDefault()
+      e.stopPropagation()
       const selected = items[selectedIndex()]
       if (selected) {
         handleSelect(selected)
       }
     } else if (e.key === "Escape") {
       e.preventDefault()
+      e.stopPropagation()
       props.onClose()
     }
   }
@@ -402,12 +437,12 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
           <Show when={mode() === "command" && commandCount() > 0}>
             <div class="dropdown-section-header">{t("unifiedPicker.sections.commands")}</div>
             <For each={filteredCommands()}>
-              {(command) => {
+              {(command, index) => {
-                const itemIndex = allItems().findIndex((item) => item.type === "command" && item.command.name === command.name)
+                const isSelected = () => index() === selectedIndex()
                 return (
                   <div
-                    class={`dropdown-item ${itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""}`}
+                    class={`dropdown-item ${isSelected() ? "dropdown-item-highlight" : ""}`}
-                    data-picker-selected={itemIndex === selectedIndex()}
+                    data-picker-selected={isSelected()}
                     onClick={() => handleSelect({ type: "command", command })}
                   >
                     <div class="flex items-start gap-2">