feat: keyboard navigation for mention and slash command dropdowns

Arrow up/down cycles through items with highlight. Enter selects
the highlighted item. Escape dismisses the dropdown. Index resets
when the query changes.

web/src/components/CommandDropdown.tsx

@@ -2,10 +2,11 @@ import { SLASH_COMMANDS } from "../lib/slashCommands";
 
 interface CommandDropdownProps {
   query: string;
+  selectedIndex: number;
   onSelect: (command: string) => void;
 }
 
-export function CommandDropdown({ query, onSelect }: CommandDropdownProps) {
+export function CommandDropdown({ query, selectedIndex, onSelect }: CommandDropdownProps) {
   const q = query.toLowerCase();
   const filtered = SLASH_COMMANDS.filter((c) => c.name.startsWith(q)).slice(0, 8);
 
@@ -16,7 +17,7 @@ export function CommandDropdown({ query, onSelect }: CommandDropdownProps) {
       <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
         COMMANDS
       </div>
-      {filtered.map((cmd) => (
+      {filtered.map((cmd, i) => (
         <button
           key={cmd.name}
           type="button"
@@ -24,10 +25,18 @@ export function CommandDropdown({ query, onSelect }: CommandDropdownProps) {
             e.preventDefault();
             onSelect(cmd.name);
           }}
-          className="w-full text-left px-2 py-1 text-sm font-mono hover:bg-gb-bg-t text-gb-fg flex items-center gap-2"
+          className={`w-full text-left px-2 py-1 text-sm font-mono flex items-center gap-2 transition-colors ${
+            i === selectedIndex
+              ? "bg-gb-orange text-gb-bg"
+              : "hover:bg-gb-bg-t text-gb-fg"
+          }`}
         >
-          <span className="text-gb-orange">/{cmd.name}</span>
-          <span className="text-gb-fg-f text-xs truncate">{cmd.description}</span>
+          <span className={i === selectedIndex ? "text-gb-bg" : "text-gb-orange"}>
+            /{cmd.name}
+          </span>
+          <span className={`text-xs truncate ${i === selectedIndex ? "text-gb-bg" : "text-gb-fg-f"}`}>
+            {cmd.description}
+          </span>
         </button>
       ))}
     </div>