Add command palette with 19 commands and improved keyboard navigation

Implement VSCode-style command palette (Cmd+Shift+P) with comprehensive command organization: - 19 commands organized into 5 categories: Instance, Session, Agent & Model, Input & Focus, System - Category-based grouping with proper visual hierarchy - Keyboard shortcuts displayed for all applicable commands - Search/filter by command name, description, keywords, or category Add keyboard shortcuts: - Cmd+Shift+A: Open agent selector - Cmd+Shift+M: Open model selector (existing) - Instance/Session navigation shortcuts (Cmd+[/], Cmd+Shift+[/]) Fix keyboard navigation: - Model selector now highlights options with arrow keys using data-[highlighted] attribute - Agent selector properly opens via keyboard shortcut - Global keyboard handler skips Combobox/Select components to allow native navigation Improve discoverability: - Prominent centered Command Palette hint in connection status bar - Keyboard shortcut hints next to agent and model selectors Complete task 020-command-palette
2025-10-23 22:32:49 +01:00
parent b06b8104a5
commit 54569b166d
9 changed files with 566 additions and 322 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -191,21 +191,142 @@ const App: Component = () => {

  function setupCommands() {
    commandRegistry.register({
-      id: "init",
-      label: "Initialize AGENTS.md",
-      description: "Create or update AGENTS.md file",
-      keywords: ["/init", "agents", "initialize"],
+      id: "new-instance",
+      label: "New Instance",
+      description: "Open folder picker to create new instance",
+      category: "Instance",
+      keywords: ["folder", "project", "workspace"],
+      shortcut: { key: "N", meta: true },
+      action: handleSelectFolder,
+    })
+
+    commandRegistry.register({
+      id: "close-instance",
+      label: "Close Instance",
+      description: "Stop current instance's server",
+      category: "Instance",
+      keywords: ["stop", "quit", "close"],
+      shortcut: { key: "W", meta: true },
+      action: async () => {
+        const instance = activeInstance()
+        if (!instance) return
+        await handleCloseInstance(instance.id)
+      },
+    })
+
+    commandRegistry.register({
+      id: "instance-next",
+      label: "Next Instance",
+      description: "Cycle to next instance tab",
+      category: "Instance",
+      keywords: ["switch", "navigate"],
+      shortcut: { key: "]", meta: true },
+      action: () => {
+        const ids = Array.from(instances().keys())
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeInstanceId() || "")
+        const next = (current + 1) % ids.length
+        if (ids[next]) setActiveInstanceId(ids[next])
+      },
+    })
+
+    commandRegistry.register({
+      id: "instance-prev",
+      label: "Previous Instance",
+      description: "Cycle to previous instance tab",
+      category: "Instance",
+      keywords: ["switch", "navigate"],
+      shortcut: { key: "[", meta: true },
+      action: () => {
+        const ids = Array.from(instances().keys())
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeInstanceId() || "")
+        const prev = current <= 0 ? ids.length - 1 : current - 1
+        if (ids[prev]) setActiveInstanceId(ids[prev])
+      },
+    })
+
+    commandRegistry.register({
+      id: "new-session",
+      label: "New Session",
+      description: "Create a new parent session",
+      category: "Session",
+      keywords: ["create", "start"],
+      shortcut: { key: "N", meta: true, shift: true },
+      action: async () => {
+        const instance = activeInstance()
+        if (!instance) return
+        await handleNewSession(instance.id)
+      },
+    })
+
+    commandRegistry.register({
+      id: "close-session",
+      label: "Close Session",
+      description: "Close current parent session",
+      category: "Session",
+      keywords: ["close", "stop"],
+      shortcut: { key: "W", meta: true, shift: true },
      action: async () => {
        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
-        if (!instance || !instance.client || !sessionId || sessionId === "logs") return
+        if (!instance || !sessionId || sessionId === "logs") return
+        await handleCloseSession(instance.id, sessionId)
+      },
+    })

-        try {
-          await instance.client.session.init({ path: { id: sessionId } })
-          console.log("Initialized AGENTS.md")
-        } catch (error) {
-          console.error("Failed to initialize AGENTS.md:", error)
-        }
+    commandRegistry.register({
+      id: "switch-to-logs",
+      label: "Switch to Logs",
+      description: "Jump to logs view for current instance",
+      category: "Session",
+      keywords: ["logs", "console", "output"],
+      shortcut: { key: "L", meta: true, shift: true },
+      action: () => {
+        const instance = activeInstance()
+        if (instance) setActiveSession(instance.id, "logs")
+      },
+    })
+
+    commandRegistry.register({
+      id: "session-next",
+      label: "Next Session",
+      description: "Cycle to next session tab",
+      category: "Session",
+      keywords: ["switch", "navigate"],
+      shortcut: { key: "]", meta: true, shift: true },
+      action: () => {
+        const instanceId = activeInstanceId()
+        if (!instanceId) return
+        const parentId = activeParentSessionId().get(instanceId)
+        if (!parentId) return
+        const familySessions = getSessionFamily(instanceId, parentId)
+        const ids = familySessions.map((s) => s.id).concat(["logs"])
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeSessionId().get(instanceId) || "")
+        const next = (current + 1) % ids.length
+        if (ids[next]) setActiveSession(instanceId, ids[next])
+      },
+    })
+
+    commandRegistry.register({
+      id: "session-prev",
+      label: "Previous Session",
+      description: "Cycle to previous session tab",
+      category: "Session",
+      keywords: ["switch", "navigate"],
+      shortcut: { key: "[", meta: true, shift: true },
+      action: () => {
+        const instanceId = activeInstanceId()
+        if (!instanceId) return
+        const parentId = activeParentSessionId().get(instanceId)
+        if (!parentId) return
+        const familySessions = getSessionFamily(instanceId, parentId)
+        const ids = familySessions.map((s) => s.id).concat(["logs"])
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeSessionId().get(instanceId) || "")
+        const prev = current <= 0 ? ids.length - 1 : current - 1
+        if (ids[prev]) setActiveSession(instanceId, ids[prev])
      },
    })

@@ -213,6 +334,7 @@ const App: Component = () => {
      id: "compact",
      label: "Compact Session",
      description: "Summarize and compact the current session",
+      category: "Session",
      keywords: ["/compact", "summarize", "compress"],
      action: async () => {
        const instance = activeInstance()
@@ -232,6 +354,7 @@ const App: Component = () => {
      id: "undo",
      label: "Undo Last Message",
      description: "Revert the last message",
+      category: "Session",
      keywords: ["/undo", "revert", "undo"],
      action: async () => {
        const instance = activeInstance()
@@ -247,10 +370,107 @@ const App: Component = () => {
      },
    })

+    commandRegistry.register({
+      id: "next-agent",
+      label: "Next Agent",
+      description: "Cycle to next agent",
+      category: "Agent & Model",
+      keywords: ["agent", "switch", "cycle"],
+      shortcut: { key: "Tab" },
+      action: handleCycleAgent,
+    })
+
+    commandRegistry.register({
+      id: "prev-agent",
+      label: "Previous Agent",
+      description: "Cycle to previous agent",
+      category: "Agent & Model",
+      keywords: ["agent", "switch", "cycle"],
+      shortcut: { key: "Tab", shift: true },
+      action: handleCycleAgentReverse,
+    })
+
+    commandRegistry.register({
+      id: "open-model-selector",
+      label: "Open Model Selector",
+      description: "Choose a different model",
+      category: "Agent & Model",
+      keywords: ["model", "llm", "ai"],
+      shortcut: { key: "M", meta: true, shift: true },
+      action: () => {
+        const modelControl = document.querySelector("[data-model-selector]") as HTMLElement
+        modelControl?.click()
+        setTimeout(() => {
+          const modelInput = document.querySelector("[data-model-selector] input") as HTMLInputElement
+          modelInput?.focus()
+        }, 100)
+      },
+    })
+
+    commandRegistry.register({
+      id: "open-agent-selector",
+      label: "Open Agent Selector",
+      description: "Choose a different agent",
+      category: "Agent & Model",
+      keywords: ["agent", "mode"],
+      shortcut: { key: "A", meta: true, shift: true },
+      action: () => {
+        const agentTrigger = document.querySelector("[data-agent-selector]") as HTMLElement
+        if (agentTrigger) {
+          agentTrigger.focus()
+          setTimeout(() => {
+            const event = new KeyboardEvent("keydown", {
+              key: "Enter",
+              code: "Enter",
+              keyCode: 13,
+              which: 13,
+              bubbles: true,
+              cancelable: true,
+            })
+            agentTrigger.dispatchEvent(event)
+          }, 50)
+        }
+      },
+    })
+
+    commandRegistry.register({
+      id: "init",
+      label: "Initialize AGENTS.md",
+      description: "Create or update AGENTS.md file",
+      category: "Agent & Model",
+      keywords: ["/init", "agents", "initialize"],
+      action: async () => {
+        const instance = activeInstance()
+        const sessionId = activeSessionIdForInstance()
+        if (!instance || !instance.client || !sessionId || sessionId === "logs") return
+
+        try {
+          await instance.client.session.init({ path: { id: sessionId } })
+          console.log("Initialized AGENTS.md")
+        } catch (error) {
+          console.error("Failed to initialize AGENTS.md:", error)
+        }
+      },
+    })
+
+    commandRegistry.register({
+      id: "clear-input",
+      label: "Clear Input",
+      description: "Clear the prompt textarea",
+      category: "Input & Focus",
+      keywords: ["clear", "reset"],
+      shortcut: { key: "K", meta: true },
+      action: () => {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) textarea.value = ""
+      },
+    })
+
    commandRegistry.register({
      id: "thinking",
      label: "Toggle Thinking Blocks",
      description: "Show/hide AI thinking process",
+      category: "System",
      keywords: ["/thinking", "toggle", "show", "hide"],
      action: () => {
        console.log("Toggle thinking blocks (not implemented)")
@@ -261,55 +481,12 @@ const App: Component = () => {
      id: "help",
      label: "Show Help",
      description: "Display keyboard shortcuts and help",
+      category: "System",
      keywords: ["/help", "shortcuts", "help"],
      action: () => {
        console.log("Show help modal (not implemented)")
      },
    })
-
-    commandRegistry.register({
-      id: "new-session",
-      label: "New Session",
-      description: "Create a new session",
-      shortcut: { key: "N", meta: true, shift: true },
-      action: async () => {
-        const instance = activeInstance()
-        if (!instance) return
-        await handleNewSession(instance.id)
-      },
-    })
-
-    commandRegistry.register({
-      id: "open-model-selector",
-      label: "Open Model Selector",
-      description: "Choose a different model",
-      shortcut: { key: "M", meta: true, shift: true },
-      action: () => {
-        const modelInput = document.querySelector("[data-model-selector] input") as HTMLInputElement
-        modelInput?.focus()
-      },
-    })
-
-    commandRegistry.register({
-      id: "focus-prompt",
-      label: "Focus Prompt Input",
-      description: "Jump to the message input",
-      shortcut: { key: "P", meta: true },
-      action: () => {
-        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
-        textarea?.focus()
-      },
-    })
-
-    commandRegistry.register({
-      id: "open-agent-selector",
-      label: "Open Agent Selector",
-      description: "Choose a different agent",
-      action: () => {
-        const agentButton = document.querySelector("[data-agent-selector]") as HTMLElement
-        agentButton?.click()
-      },
-    })
  }

  function handleExecuteCommand(commandId: string) {
@@ -388,10 +565,31 @@ const App: Component = () => {
        textarea?.focus()
      },
    )
-    registerAgentShortcuts(handleCycleAgent, handleCycleAgentReverse, () => {
-      const modelInput = document.querySelector("[data-model-selector] input") as HTMLInputElement
-      modelInput?.focus()
-    })
+    registerAgentShortcuts(
+      handleCycleAgent,
+      handleCycleAgentReverse,
+      () => {
+        const modelInput = document.querySelector("[data-model-selector] input") as HTMLInputElement
+        modelInput?.focus()
+      },
+      () => {
+        const agentTrigger = document.querySelector("[data-agent-selector]") as HTMLElement
+        if (agentTrigger) {
+          agentTrigger.focus()
+          setTimeout(() => {
+            const event = new KeyboardEvent("keydown", {
+              key: "Enter",
+              code: "Enter",
+              keyCode: 13,
+              which: 13,
+              bubbles: true,
+              cancelable: true,
+            })
+            agentTrigger.dispatchEvent(event)
+          }, 50)
+        }
+      },
+    )
    registerEscapeShortcut(
      () => {
        const instance = activeInstance()
@@ -414,6 +612,16 @@ const App: Component = () => {
    )

    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement
+
+      const isInCombobox = target.closest('[role="combobox"]') !== null
+      const isInListbox = target.closest('[role="listbox"]') !== null
+      const isInSelect = target.closest('[role="button"][data-agent-selector]') !== null
+
+      if (isInCombobox || isInListbox || isInSelect) {
+        return
+      }
+
      const shortcut = keyboardRegistry.findMatch(e)
      if (shortcut) {
        e.preventDefault()
--- a/src/components/agent-selector.tsx
+++ b/src/components/agent-selector.tsx
@@ -102,11 +102,16 @@ export default function AgentSelector(props: AgentSelectorProps) {
          </Select.Content>
        </Select.Portal>
      </Select>
-      <Show when={availableAgents().length > 1}>
+      <div class="flex items-center gap-1">
+        <Show when={availableAgents().length > 1}>
+          <span class="text-xs text-gray-400">
+            <Kbd>Tab</Kbd>
+          </span>
+        </Show>
        <span class="text-xs text-gray-400">
-          <Kbd>Tab</Kbd>
+          <Kbd shortcut="cmd+shift+a" />
        </span>
-      </Show>
+      </div>
    </div>
  )
 }
--- a/src/components/command-palette.tsx
+++ b/src/components/command-palette.tsx
@@ -36,10 +36,39 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
      const labelMatch = cmd.label.toLowerCase().includes(q)
      const descMatch = cmd.description.toLowerCase().includes(q)
      const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(q))
-      return labelMatch || descMatch || keywordMatch
+      const categoryMatch = cmd.category?.toLowerCase().includes(q)
+      return labelMatch || descMatch || keywordMatch || categoryMatch
    })
  }

+  const groupedCommands = () => {
+    const filtered = filteredCommands()
+    const groups = new Map<string, Command[]>()
+
+    for (const cmd of filtered) {
+      const category = cmd.category || "Other"
+      if (!groups.has(category)) {
+        groups.set(category, [])
+      }
+      groups.get(category)!.push(cmd)
+    }
+
+    const categoryOrder = ["Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"]
+    const sorted = new Map<string, Command[]>()
+    for (const cat of categoryOrder) {
+      if (groups.has(cat)) {
+        sorted.set(cat, groups.get(cat)!)
+      }
+    }
+    for (const [cat, cmds] of groups) {
+      if (!sorted.has(cat)) {
+        sorted.set(cat, cmds)
+      }
+    }
+
+    return sorted
+  }
+
  createEffect(() => {
    if (props.open) {
      setQuery("")
@@ -123,27 +152,49 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                when={filteredCommands().length > 0}
                fallback={<div class="p-8 text-center text-gray-500">No commands found for "{query()}"</div>}
              >
-                <For each={filteredCommands()}>
-                  {(command, index) => (
-                    <button
-                      type="button"
-                      onClick={() => handleCommandClick(command.id)}
-                      class={`w-full px-4 py-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer border-none text-left ${
-                        index() === selectedIndex() ? "bg-blue-50 dark:bg-blue-900/20" : ""
-                      }`}
-                      onMouseEnter={() => setSelectedIndex(index())}
-                    >
-                      <div class="flex-1 min-w-0">
-                        <div class="font-medium text-gray-900 dark:text-gray-100">{command.label}</div>
-                        <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">{command.description}</div>
-                      </div>
-                      <Show when={command.shortcut}>
-                        <div class="mt-1">
-                          <Kbd shortcut={buildShortcutString(command.shortcut)} />
+                <For each={Array.from(groupedCommands().entries())}>
+                  {([category, commands]) => {
+                    let globalIndex = 0
+                    for (const [cat, cmds] of groupedCommands().entries()) {
+                      if (cat === category) break
+                      globalIndex += cmds.length
+                    }
+
+                    return (
+                      <div class="py-2">
+                        <div class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                          {category}
                        </div>
-                      </Show>
-                    </button>
-                  )}
+                        <For each={commands}>
+                          {(command, localIndex) => {
+                            const commandIndex = globalIndex + localIndex()
+                            return (
+                              <button
+                                type="button"
+                                onClick={() => handleCommandClick(command.id)}
+                                class={`w-full px-4 py-3 flex items-start gap-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer border-none text-left ${
+                                  commandIndex === selectedIndex() ? "bg-blue-50 dark:bg-blue-900/20" : ""
+                                }`}
+                                onMouseEnter={() => setSelectedIndex(commandIndex)}
+                              >
+                                <div class="flex-1 min-w-0">
+                                  <div class="font-medium text-gray-900 dark:text-gray-100">{command.label}</div>
+                                  <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">
+                                    {command.description}
+                                  </div>
+                                </div>
+                                <Show when={command.shortcut}>
+                                  <div class="mt-1">
+                                    <Kbd shortcut={buildShortcutString(command.shortcut)} />
+                                  </div>
+                                </Show>
+                              </button>
+                            )
+                          }}
+                        </For>
+                      </div>
+                    )
+                  }}
                </For>
              </Show>
            </div>
--- a/src/components/message-stream.tsx
+++ b/src/components/message-stream.tsx
@@ -3,6 +3,7 @@ import type { Message } from "../types/message"
 import MessageItem from "./message-item"
 import ToolCall from "./tool-call"
 import { sseManager } from "../lib/sse-manager"
+import Kbd from "./kbd"

 interface MessageStreamProps {
  instanceId: string
@@ -86,24 +87,31 @@ export default function MessageStream(props: MessageStreamProps) {
  return (
    <div class="message-stream-container">
      <div class="connection-status">
-        <Show when={connectionStatus() === "connected"}>
-          <span class="status-indicator connected">
-            <span class="status-dot" />
-            Connected
-          </span>
-        </Show>
-        <Show when={connectionStatus() === "connecting"}>
-          <span class="status-indicator connecting">
-            <span class="status-dot" />
-            Connecting...
-          </span>
-        </Show>
-        <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
-          <span class="status-indicator disconnected">
-            <span class="status-dot" />
-            Disconnected
-          </span>
-        </Show>
+        <div class="flex-1" />
+        <div class="flex items-center gap-2 text-sm font-medium text-gray-700">
+          <span>Command Palette</span>
+          <Kbd shortcut="cmd+shift+p" />
+        </div>
+        <div class="flex-1 flex items-center justify-end gap-3">
+          <Show when={connectionStatus() === "connected"}>
+            <span class="status-indicator connected">
+              <span class="status-dot" />
+              Connected
+            </span>
+          </Show>
+          <Show when={connectionStatus() === "connecting"}>
+            <span class="status-indicator connecting">
+              <span class="status-dot" />
+              Connecting...
+            </span>
+          </Show>
+          <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
+            <span class="status-indicator disconnected">
+              <span class="status-dot" />
+              Disconnected
+            </span>
+          </Show>
+        </div>
      </div>
      <div ref={containerRef} class="message-stream" onScroll={handleScroll}>
        <Show when={!props.loading && displayItems().length === 0}>
--- a/src/components/model-selector.tsx
+++ b/src/components/model-selector.tsx
@@ -18,7 +18,6 @@ interface FlatModel extends Model {

 export default function ModelSelector(props: ModelSelectorProps) {
  const instanceProviders = () => providers().get(props.instanceId) || []
-  let listboxRef!: HTMLUListElement
  let inputRef!: HTMLInputElement

  createEffect(() => {
@@ -69,7 +68,7 @@ export default function ModelSelector(props: ModelSelectorProps) {
        itemComponent={(itemProps) => (
          <Combobox.Item
            item={itemProps.item}
-            class="px-3 py-2 cursor-pointer hover:bg-gray-100 rounded outline-none focus:bg-gray-100 flex items-start gap-2"
+            class="px-3 py-2 cursor-pointer hover:bg-gray-100 data-[highlighted]:bg-blue-100 rounded outline-none flex items-start gap-2"
          >
            <div class="flex flex-col flex-1 min-w-0">
              <Combobox.ItemLabel class="font-medium text-sm text-gray-900">
@@ -106,7 +105,7 @@ export default function ModelSelector(props: ModelSelectorProps) {

        <Combobox.Portal>
          <Combobox.Content class="bg-white border border-gray-300 rounded-md shadow-lg max-h-80 overflow-hidden p-1 z-50 min-w-[300px]">
-            <Combobox.Listbox ref={listboxRef} scrollRef={() => listboxRef} class="max-h-80 overflow-auto" />
+            <Combobox.Listbox class="max-h-80 overflow-auto" />
          </Combobox.Content>
        </Combobox.Portal>
      </Combobox>
--- a/src/index.css
+++ b/src/index.css
@@ -60,10 +60,12 @@ body {

 .connection-status {
  display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
  padding: 8px 16px;
  background-color: var(--secondary-bg);
  border-bottom: 1px solid var(--border-color);
+  gap: 16px;
 }

 .status-indicator {
--- a/src/lib/shortcuts/agent.ts
+++ b/src/lib/shortcuts/agent.ts
@@ -4,6 +4,7 @@ export function registerAgentShortcuts(
  cycleAgent: () => void,
  cycleAgentReverse: () => void,
  focusModelSelector: () => void,
+  openAgentSelector: () => void,
 ) {
  const isMac = () => navigator.platform.toLowerCase().includes("mac")

@@ -41,4 +42,13 @@ export function registerAgentShortcuts(
    description: "focus model",
    context: "global",
  })
+
+  keyboardRegistry.register({
+    id: "open-agent-selector",
+    key: "A",
+    modifiers: { ctrl: !isMac(), meta: isMac(), shift: true },
+    handler: openAgentSelector,
+    description: "open agent",
+    context: "global",
+  })
 }