modularize app shell into context hooks

2025-11-15 22:29:10 +00:00
parent 04db4fcf94
commit cce5d1aba8
8 changed files with 1214 additions and 1129 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
--- a/src/components/instance/instance-shell.tsx
+++ b/src/components/instance/instance-shell.tsx
@@ -0,0 +1,173 @@
+import { Show, createMemo, createSignal, type Component } from "solid-js"
+import type { Accessor } from "solid-js"
+import type { Instance } from "../../types/instance"
+import type { Command } from "../../lib/commands"
+import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
+import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
+import { buildCustomCommandEntries } from "../../lib/command-utils"
+import { getCommands as getInstanceCommands } from "../../stores/commands"
+import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
+import SessionList from "../session-list"
+import KeyboardHint from "../keyboard-hint"
+import InstanceWelcomeView from "../instance-welcome-view"
+import InfoView from "../info-view"
+import AgentSelector from "../agent-selector"
+import ModelSelector from "../model-selector"
+import CommandPalette from "../command-palette"
+import ContextUsagePanel from "../session/context-usage-panel"
+import SessionView from "../session/session-view"
+
+interface InstanceShellProps {
+  instance: Instance
+  escapeInDebounce: boolean
+  paletteCommands: Accessor<Command[]>
+  onCloseSession: (sessionId: string) => Promise<void> | void
+  onNewSession: () => Promise<void> | void
+  handleSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
+  handleSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
+  onExecuteCommand: (command: Command) => void
+}
+
+const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
+
+const InstanceShell: Component<InstanceShellProps> = (props) => {
+  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
+
+  const activeSessions = createMemo(() => {
+    const parentId = activeParentSessionId().get(props.instance.id)
+    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
+    const sessionFamily = getSessionFamily(props.instance.id, parentId)
+    return new Map(sessionFamily.map((s) => [s.id, s]))
+  })
+
+  const activeSessionIdForInstance = createMemo(() => {
+    return activeSessionMap().get(props.instance.id) || null
+  })
+
+  const activeSessionForInstance = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return null
+    return activeSessions().get(sessionId) ?? null
+  })
+
+  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
+  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
+  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
+
+  const keyboardShortcuts = createMemo(() =>
+    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
+      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
+    ),
+  )
+
+  const handleSessionSelect = (sessionId: string) => {
+    setActiveSession(props.instance.id, sessionId)
+  }
+
+  return (
+    <>
+      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
+        <div class="flex flex-1 min-h-0">
+          <div class="session-sidebar flex flex-col bg-surface-secondary" style={{ width: `${sessionSidebarWidth()}px` }}>
+            <SessionList
+              instanceId={props.instance.id}
+              sessions={activeSessions()}
+              activeSessionId={activeSessionIdForInstance()}
+              onSelect={handleSessionSelect}
+              onClose={(id) => {
+                const result = props.onCloseSession(id)
+                if (result instanceof Promise) {
+                  void result.catch((error) => console.error("Failed to close session:", error))
+                }
+              }}
+              onNew={() => {
+                const result = props.onNewSession()
+                if (result instanceof Promise) {
+                  void result.catch((error) => console.error("Failed to create session:", error))
+                }
+              }}
+              showHeader
+              showFooter={false}
+              headerContent={
+                <div class="session-sidebar-header">
+                  <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
+                  <div class="session-sidebar-shortcuts">
+                    {keyboardShortcuts().length ? (
+                      <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
+                    ) : null}
+                  </div>
+                </div>
+              }
+              onWidthChange={setSessionSidebarWidth}
+            />
+
+            <div class="session-sidebar-separator border-t border-base" />
+            <Show when={activeSessionForInstance()}>
+              {(activeSession) => (
+                <>
+                  <ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
+                  <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
+                    <AgentSelector
+                      instanceId={props.instance.id}
+                      sessionId={activeSession().id}
+                      currentAgent={activeSession().agent}
+                      onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
+                    />
+
+                    <ModelSelector
+                      instanceId={props.instance.id}
+                      sessionId={activeSession().id}
+                      currentModel={activeSession().model}
+                      onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
+                    />
+                  </div>
+                </>
+              )}
+            </Show>
+          </div>
+
+          <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
+            <Show
+              when={activeSessionIdForInstance() === "info"}
+              fallback={
+                <Show
+                  when={activeSessionIdForInstance()}
+                  keyed
+                  fallback={
+                    <div class="flex items-center justify-center h-full">
+                      <div class="text-center text-gray-500 dark:text-gray-400">
+                        <p class="mb-2">No session selected</p>
+                        <p class="text-sm">Select a session to view messages</p>
+                      </div>
+                    </div>
+                  }
+                >
+                  {(sessionId) => (
+                    <SessionView
+                      sessionId={sessionId}
+                      activeSessions={activeSessions()}
+                      instanceId={props.instance.id}
+                      instanceFolder={props.instance.folder}
+                      escapeInDebounce={props.escapeInDebounce}
+                    />
+                  )}
+                </Show>
+              }
+            >
+              <InfoView instanceId={props.instance.id} />
+            </Show>
+          </div>
+        </div>
+      </Show>
+
+      <CommandPalette
+        open={paletteOpen()}
+        onClose={() => hideCommandPalette(props.instance.id)}
+        commands={instancePaletteCommands()}
+        onExecute={props.onExecuteCommand}
+      />
+    </>
+  )
+}
+
+export default InstanceShell
--- a/src/components/session/context-usage-panel.tsx
+++ b/src/components/session/context-usage-panel.tsx
@@ -0,0 +1,63 @@
+import { createMemo, type Component } from "solid-js"
+import { getSessionInfo } from "../../stores/sessions"
+import { formatTokenTotal } from "../../lib/formatters"
+
+interface ContextUsagePanelProps {
+  instanceId: string
+  sessionId: string
+}
+
+const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
+  const info = createMemo(
+    () =>
+      getSessionInfo(props.instanceId, props.sessionId) ?? {
+        tokens: 0,
+        cost: 0,
+        contextWindow: 0,
+        isSubscriptionModel: false,
+        contextUsageTokens: 0,
+        contextUsagePercent: null,
+      },
+  )
+
+  const tokens = createMemo(() => info().tokens)
+  const contextUsageTokens = createMemo(() => info().contextUsageTokens ?? 0)
+  const contextWindow = createMemo(() => info().contextWindow)
+  const contextUsagePercent = createMemo(() => info().contextUsagePercent)
+
+  const costLabel = createMemo(() => {
+    if (info().isSubscriptionModel || info().cost <= 0) return "Included in plan"
+    return `$${info().cost.toFixed(2)} spent`
+  })
+
+  return (
+    <div class="session-context-panel border-r border-base border-b px-3 py-3">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Tokens (last call)</div>
+          <div class="text-lg font-semibold text-primary">{formatTokenTotal(tokens())}</div>
+        </div>
+        <div class="text-xs text-primary/70 text-right leading-tight">{costLabel()}</div>
+      </div>
+      <div class="mt-4">
+        <div class="flex items-center justify-between mb-1">
+          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Context window usage</div>
+          <div class="text-sm font-medium text-primary">{contextUsagePercent() !== null ? `${contextUsagePercent()}%` : "--"}</div>
+        </div>
+        <div class="text-sm text-primary/90">
+          {contextWindow()
+            ? `${formatTokenTotal(contextUsageTokens())} of ${formatTokenTotal(contextWindow())}`
+            : "Window size unavailable"}
+        </div>
+      </div>
+      <div class="mt-3 h-1.5 rounded-full bg-base relative overflow-hidden">
+        <div
+          class="absolute inset-y-0 left-0 rounded-full bg-accent-primary transition-[width]"
+          style={{ width: contextUsagePercent() === null ? "0%" : `${contextUsagePercent()}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ContextUsagePanel
--- a/src/components/session/session-view.tsx
+++ b/src/components/session/session-view.tsx
@@ -0,0 +1,211 @@
+import { Show, createMemo, createEffect, onCleanup, type Component } from "solid-js"
+import type { Session } from "../../types/session"
+import type { Attachment } from "../../types/attachment"
+import type { ClientPart } from "../../types/message"
+import MessageStream from "../message-stream"
+import PromptInput from "../prompt-input"
+import { instances, getActivePermission, sendPermissionResponse } from "../../stores/instances"
+import { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession } from "../../stores/sessions"
+
+interface SessionViewProps {
+  sessionId: string
+  activeSessions: Map<string, Session>
+  instanceId: string
+  instanceFolder: string
+  escapeInDebounce: boolean
+}
+
+export const SessionView: Component<SessionViewProps> = (props) => {
+  const session = () => props.activeSessions.get(props.sessionId)
+  const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
+
+  createEffect(() => {
+    const currentSession = session()
+    if (currentSession) {
+      loadMessages(props.instanceId, currentSession.id).catch(console.error)
+    }
+  })
+
+  async function handleSendMessage(prompt: string, attachments: Attachment[]) {
+    await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
+  }
+
+  function getUserMessageText(messageId: string): string | null {
+    const currentSession = session()
+    if (!currentSession) return null
+
+    const targetMessage = currentSession.messages.find((m) => m.id === messageId)
+    const targetInfo = currentSession.messagesInfo.get(messageId)
+    if (!targetMessage || targetInfo?.role !== "user") {
+      return null
+    }
+
+    const textParts = targetMessage.parts.filter((p): p is ClientPart & { type: "text"; text: string } => p.type === "text")
+    if (textParts.length === 0) {
+      return null
+    }
+
+    return textParts.map((p) => p.text).join("\n")
+  }
+
+  async function handleRevert(messageId: string) {
+    const instance = instances().get(props.instanceId)
+    if (!instance || !instance.client) return
+
+    try {
+      await instance.client.session.revert({
+        path: { id: props.sessionId },
+        body: { messageID: messageId },
+      })
+
+      const restoredText = getUserMessageText(messageId)
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to revert:", error)
+      alert("Failed to revert to message")
+    }
+  }
+
+  async function handleFork(messageId?: string) {
+    if (!messageId) {
+      console.warn("Fork requires a user message id")
+      return
+    }
+
+    const restoredText = getUserMessageText(messageId)
+
+    try {
+      const forkedSession = await forkSession(props.instanceId, props.sessionId, { messageId })
+
+      const parentToActivate = forkedSession.parentId ?? forkedSession.id
+      setActiveParentSession(props.instanceId, parentToActivate)
+      if (forkedSession.parentId) {
+        setActiveSession(props.instanceId, forkedSession.id)
+      }
+
+      await loadMessages(props.instanceId, forkedSession.id).catch(console.error)
+
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fork session:", error)
+      alert("Failed to fork session")
+    }
+  }
+
+  const activePermission = createMemo(() => getActivePermission(props.instanceId))
+
+  async function handlePermissionResponse(response: "once" | "always" | "reject") {
+    const permission = activePermission()
+    if (!permission) return
+
+    try {
+      await sendPermissionResponse(props.instanceId, props.sessionId, permission.id, response)
+    } catch (error) {
+      console.error("Failed to send permission response:", error)
+    }
+  }
+
+  createEffect(() => {
+    const permission = activePermission()
+    if (!permission) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault()
+        handlePermissionResponse("once")
+      } else if (event.key === "a" || event.key === "A") {
+        event.preventDefault()
+        handlePermissionResponse("always")
+      } else if (event.key === "d" || event.key === "D") {
+        event.preventDefault()
+        handlePermissionResponse("reject")
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
+  })
+
+  return (
+    <Show
+      when={session()}
+      fallback={
+        <div class="flex items-center justify-center h-full">
+          <div class="text-center text-gray-500">Session not found</div>
+        </div>
+      }
+    >
+      {(s) => (
+        <div class="session-view">
+          <MessageStream
+            instanceId={props.instanceId}
+            sessionId={s().id}
+            messages={s().messages || []}
+            messagesInfo={s().messagesInfo}
+            revert={s().revert}
+            loading={messagesLoading()}
+            onRevert={handleRevert}
+            onFork={handleFork}
+          />
+
+          <Show when={activePermission()}>
+            {(permission) => (
+              <div class="permission-dialog border-2 border-[var(--status-warning)] bg-surface-secondary p-4 mx-4 mb-4 rounded-lg shadow-lg">
+                <div class="flex items-start gap-3">
+                  <div class="flex-shrink-0">
+                    <div class="w-6 h-6 bg-[var(--status-warning)] rounded-full flex items-center justify-center">
+                      <svg class="w-4 h-4 text-[var(--text-inverted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1">
+                    <div class="mb-2">
+                      <span class="font-semibold text-primary">Permission Required</span>
+                      <span class="ml-2 font-mono text-sm bg-surface-secondary border border-base rounded px-1.5 py-0.5">{permission().type}</span>
+                    </div>
+                    <div class="bg-surface-code p-3 rounded border mb-3">
+                      <code class="text-sm text-primary">{permission().title}</code>
+                    </div>
+                    <div class="flex gap-2 text-sm">
+                      <kbd class="kbd">Enter</kbd>
+                      <span class="text-muted">Accept once</span>
+                      <kbd class="kbd ml-4">a</kbd>
+                      <span class="text-muted">Accept always</span>
+                      <kbd class="kbd ml-4">d</kbd>
+                      <span class="text-muted">Deny</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </Show>
+
+          <PromptInput
+            instanceId={props.instanceId}
+            instanceFolder={props.instanceFolder}
+            sessionId={s().id}
+            onSend={handleSendMessage}
+            escapeInDebounce={props.escapeInDebounce}
+          />
+        </div>
+      )}
+    </Show>
+  )
+}
+
+export default SessionView
--- a/src/lib/command-utils.ts
+++ b/src/lib/command-utils.ts
@@ -0,0 +1,51 @@
+import type { Command } from "./commands"
+import type { Command as SDKCommand } from "@opencode-ai/sdk"
+import { activeSessionId, executeCustomCommand } from "../stores/sessions"
+
+export function commandRequiresArguments(template?: string): boolean {
+  if (!template) return false
+  return /\$(?:\d+|ARGUMENTS)/.test(template)
+}
+
+export function promptForCommandArguments(command: SDKCommand): string | null {
+  if (!commandRequiresArguments(command.template)) {
+    return ""
+  }
+  const input = window.prompt(`Arguments for /${command.name}`, "")
+  if (input === null) {
+    return null
+  }
+  return input
+}
+
+function formatCommandLabel(name: string): string {
+  if (!name) return ""
+  return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
+export function buildCustomCommandEntries(instanceId: string, commands: SDKCommand[]): Command[] {
+  return commands.map((cmd) => ({
+    id: `custom:${instanceId}:${cmd.name}`,
+    label: formatCommandLabel(cmd.name),
+    description: cmd.description ?? "Custom command",
+    category: "Custom Commands",
+    keywords: [cmd.name, ...(cmd.description ? cmd.description.split(/\s+/).filter(Boolean) : [])],
+    action: async () => {
+      const sessionId = activeSessionId().get(instanceId)
+      if (!sessionId || sessionId === "info") {
+        alert("Select a session before running a custom command.")
+        return
+      }
+      const args = promptForCommandArguments(cmd)
+      if (args === null) {
+        return
+      }
+      try {
+        await executeCustomCommand(instanceId, sessionId, cmd.name, args)
+      } catch (error) {
+        console.error("Failed to run custom command:", error)
+        alert("Failed to run custom command. Check the console for details.")
+      }
+    },
+  }))
+}
--- a/src/lib/formatters.ts
+++ b/src/lib/formatters.ts
@@ -0,0 +1,9 @@
+export function formatTokenTotal(value: number): string {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  }
+  if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(0)}K`
+  }
+  return value.toLocaleString()
+}
--- a/src/lib/hooks/use-app-lifecycle.ts
+++ b/src/lib/hooks/use-app-lifecycle.ts
@@ -0,0 +1,178 @@
+import { onMount, onCleanup, type Accessor } from "solid-js"
+import { setupTabKeyboardShortcuts } from "../keyboard"
+import { registerNavigationShortcuts } from "../shortcuts/navigation"
+import { registerInputShortcuts } from "../shortcuts/input"
+import { registerAgentShortcuts } from "../shortcuts/agent"
+import { registerEscapeShortcut, setEscapeStateChangeHandler } from "../shortcuts/escape"
+import { keyboardRegistry } from "../keyboard-registry"
+import { abortSession, getSessions, isSessionBusy } from "../../stores/sessions"
+import { showCommandPalette, hideCommandPalette } from "../../stores/command-palette"
+import { addLog, updateInstance } from "../../stores/instances"
+import type { Instance } from "../../types/instance"
+
+interface UseAppLifecycleOptions {
+  setEscapeInDebounce: (value: boolean) => void
+  handleNewInstanceRequest: () => void
+  handleCloseInstance: (instanceId: string) => Promise<void>
+  handleNewSession: (instanceId: string) => Promise<void>
+  handleCloseSession: (instanceId: string, sessionId: string) => Promise<void>
+  showFolderSelection: Accessor<boolean>
+  setShowFolderSelection: (value: boolean) => void
+  getActiveInstance: () => Instance | null
+  getActiveSessionIdForInstance: () => string | null
+}
+
+export function useAppLifecycle(options: UseAppLifecycleOptions) {
+  onMount(() => {
+    setEscapeStateChangeHandler(options.setEscapeInDebounce)
+
+    setupTabKeyboardShortcuts(
+      options.handleNewInstanceRequest,
+      options.handleCloseInstance,
+      options.handleNewSession,
+      options.handleCloseSession,
+      () => {
+        const instance = options.getActiveInstance()
+        if (instance) {
+          showCommandPalette(instance.id)
+        }
+      },
+    )
+
+    registerNavigationShortcuts()
+    registerInputShortcuts(
+      () => {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) textarea.value = ""
+      },
+      () => {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        textarea?.focus()
+      },
+    )
+
+    registerAgentShortcuts(
+      () => {
+        const modelInput = document.querySelector("[data-model-selector]") as HTMLInputElement
+        if (modelInput) {
+          modelInput.focus()
+          setTimeout(() => {
+            const event = new KeyboardEvent("keydown", {
+              key: "ArrowDown",
+              code: "ArrowDown",
+              keyCode: 40,
+              which: 40,
+              bubbles: true,
+              cancelable: true,
+            })
+            modelInput.dispatchEvent(event)
+          }, 10)
+        }
+      },
+      () => {
+        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(
+      () => {
+        if (options.showFolderSelection()) return true
+
+        const instance = options.getActiveInstance()
+        if (!instance) return false
+
+        const sessionId = options.getActiveSessionIdForInstance()
+        if (!sessionId || sessionId === "info") return false
+
+        const sessions = getSessions(instance.id)
+        const session = sessions.find((s) => s.id === sessionId)
+        if (!session) return false
+
+        return isSessionBusy(instance.id, sessionId)
+      },
+      async () => {
+        if (options.showFolderSelection()) {
+          options.setShowFolderSelection(false)
+          return
+        }
+
+        const instance = options.getActiveInstance()
+        const sessionId = options.getActiveSessionIdForInstance()
+        if (!instance || !sessionId || sessionId === "info") return
+
+        try {
+          await abortSession(instance.id, sessionId)
+          console.log("Session aborted successfully")
+        } catch (error) {
+          console.error("Failed to abort session:", error)
+        }
+      },
+      () => {
+        const active = document.activeElement as HTMLElement
+        active?.blur()
+      },
+      () => hideCommandPalette(),
+    )
+
+    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 isInAgentSelect = target.closest('[role="button"][data-agent-selector]') !== null
+
+      if (isInCombobox || isInListbox || isInAgentSelect) {
+        return
+      }
+
+      const shortcut = keyboardRegistry.findMatch(e)
+      if (shortcut) {
+        e.preventDefault()
+        shortcut.handler()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    window.electronAPI.onNewInstance(() => {
+      options.handleNewInstanceRequest()
+    })
+
+    window.electronAPI.onInstanceStarted(({ id, port, pid, binaryPath }) => {
+      console.log("Instance started:", { id, port, pid, binaryPath })
+      updateInstance(id, { port, pid, status: "ready", binaryPath })
+    })
+
+    window.electronAPI.onInstanceError(({ id, error }) => {
+      console.error("Instance error:", { id, error })
+      updateInstance(id, { status: "error", error })
+    })
+
+    window.electronAPI.onInstanceStopped(({ id }) => {
+      console.log("Instance stopped:", id)
+      updateInstance(id, { status: "stopped" })
+    })
+
+    window.electronAPI.onInstanceLog(({ id, entry }) => {
+      addLog(id, entry)
+    })
+
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+}
--- a/src/lib/hooks/use-commands.ts
+++ b/src/lib/hooks/use-commands.ts
@@ -0,0 +1,416 @@
+import { createSignal, onMount } from "solid-js"
+import type { Accessor } from "solid-js"
+import type { Preferences } from "../../stores/preferences"
+import { createCommandRegistry, type Command } from "../commands"
+import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
+import {
+  activeParentSessionId,
+  activeSessionId as activeSessionMap,
+  getSessionFamily,
+  getSessions,
+  setActiveSession,
+} from "../../stores/sessions"
+import { setSessionCompactionState } from "../../stores/session-compaction"
+import type { Instance } from "../../types/instance"
+
+export interface UseCommandsOptions {
+  preferences: Accessor<Preferences>
+  toggleShowThinkingBlocks: () => void
+  setDiffViewMode: (mode: "split" | "unified") => void
+  handleNewInstanceRequest: () => void
+  handleCloseInstance: (instanceId: string) => Promise<void>
+  handleNewSession: (instanceId: string) => Promise<void>
+  handleCloseSession: (instanceId: string, sessionId: string) => Promise<void>
+  getActiveInstance: () => Instance | null
+  getActiveSessionIdForInstance: () => string | null
+}
+
+export function useCommands(options: UseCommandsOptions) {
+  const commandRegistry = createCommandRegistry()
+  const [commands, setCommands] = createSignal<Command[]>([])
+
+  function refreshCommands() {
+    setCommands(commandRegistry.getAll())
+  }
+
+  function registerCommands() {
+    const activeInstance = options.getActiveInstance
+    const activeSessionIdForInstance = options.getActiveSessionIdForInstance
+
+    commandRegistry.register({
+      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: options.handleNewInstanceRequest,
+    })
+
+    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 options.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 options.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 || !sessionId || sessionId === "info") return
+        await options.handleCloseSession(instance.id, sessionId)
+      },
+    })
+
+    commandRegistry.register({
+      id: "switch-to-info",
+      label: "Instance Info",
+      description: "Open the instance overview for logs and status",
+      category: "Instance",
+      keywords: ["info", "logs", "console", "output"],
+      shortcut: { key: "L", meta: true, shift: true },
+      action: () => {
+        const instance = activeInstance()
+        if (instance) setActiveSession(instance.id, "info")
+      },
+    })
+
+    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(["info"])
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeSessionMap().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(["info"])
+        if (ids.length <= 1) return
+        const current = ids.indexOf(activeSessionMap().get(instanceId) || "")
+        const prev = current <= 0 ? ids.length - 1 : current - 1
+        if (ids[prev]) setActiveSession(instanceId, ids[prev])
+      },
+    })
+
+    commandRegistry.register({
+      id: "compact",
+      label: "Compact Session",
+      description: "Summarize and compact the current session",
+      category: "Session",
+      keywords: ["/compact", "summarize", "compress"],
+      action: async () => {
+        const instance = activeInstance()
+        const sessionId = activeSessionIdForInstance()
+        if (!instance || !instance.client || !sessionId || sessionId === "info") return
+
+        const sessions = getSessions(instance.id)
+        const session = sessions.find((s) => s.id === sessionId)
+        if (!session) return
+
+        try {
+          setSessionCompactionState(instance.id, sessionId, true)
+          await instance.client.session.summarize({
+            path: { id: sessionId },
+            body: {
+              providerID: session.model.providerId,
+              modelID: session.model.modelId,
+            },
+          })
+        } catch (error: unknown) {
+          setSessionCompactionState(instance.id, sessionId, false)
+          console.error("Failed to compact session:", error)
+          const message = error instanceof Error ? error.message : "Failed to compact session"
+          alert(`Compact failed: ${message}`)
+        }
+      },
+    })
+
+    commandRegistry.register({
+      id: "undo",
+      label: "Undo Last Message",
+      description: "Revert the last message",
+      category: "Session",
+      keywords: ["/undo", "revert", "undo"],
+      action: async () => {
+        const instance = activeInstance()
+        const sessionId = activeSessionIdForInstance()
+        if (!instance || !instance.client || !sessionId || sessionId === "info") return
+
+        const sessions = getSessions(instance.id)
+        const session = sessions.find((s) => s.id === sessionId)
+        if (!session) return
+
+        let after = 0
+        const revert = session.revert
+
+        if (revert?.messageID) {
+          for (let i = session.messages.length - 1; i >= 0; i--) {
+            const msg = session.messages[i]
+            const info = session.messagesInfo.get(msg.id)
+            if (info?.id === revert.messageID) {
+              after = info.time?.created || 0
+              break
+            }
+          }
+        }
+
+        let messageID = ""
+        for (let i = session.messages.length - 1; i >= 0; i--) {
+          const msg = session.messages[i]
+          const info = session.messagesInfo.get(msg.id)
+
+          if (msg.type === "user" && info?.time?.created) {
+            if (after > 0 && info.time.created >= after) {
+              continue
+            }
+            messageID = msg.id
+            break
+          }
+        }
+
+        if (!messageID) {
+          alert("Nothing to undo")
+          return
+        }
+
+        try {
+          await instance.client.session.revert({
+            path: { id: sessionId },
+            body: { messageID },
+          })
+
+          const revertedMessage = session.messages.find((m) => m.id === messageID)
+          const revertedInfo = session.messagesInfo.get(messageID)
+
+          if (revertedMessage && revertedInfo?.role === "user") {
+            const textParts = revertedMessage.parts.filter((p) => p.type === "text")
+            if (textParts.length > 0) {
+              const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+              if (textarea) {
+                textarea.value = textParts.map((p: any) => p.text).join("\n")
+                textarea.dispatchEvent(new Event("input", { bubbles: true }))
+                textarea.focus()
+              }
+            }
+          }
+        } catch (error) {
+          console.error("Failed to revert message:", error)
+          alert("Failed to revert message")
+        }
+      },
+    })
+
+    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 modelInput = document.querySelector("[data-model-selector]") as HTMLInputElement
+        if (modelInput) {
+          modelInput.focus()
+          setTimeout(() => {
+            const event = new KeyboardEvent("keydown", {
+              key: "ArrowDown",
+              code: "ArrowDown",
+              keyCode: 40,
+              which: 40,
+              bubbles: true,
+              cancelable: true,
+            })
+            modelInput.dispatchEvent(event)
+          }, 10)
+        }
+      },
+    })
+
+    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: "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: () => `${options.preferences().showThinkingBlocks ? "Hide" : "Show"} Thinking Blocks`,
+      description: "Show/hide AI thinking process",
+      category: "System",
+      keywords: ["/thinking", "toggle", "show", "hide"],
+      action: options.toggleShowThinkingBlocks,
+    })
+
+    commandRegistry.register({
+      id: "diff-view-split",
+      label: () => `${(options.preferences().diffViewMode || "split") === "split" ? "✓ " : ""}Use Split Diff View`,
+      description: "Display tool-call diffs side-by-side",
+      category: "System",
+      keywords: ["diff", "split", "view"],
+      action: () => options.setDiffViewMode("split"),
+    })
+
+    commandRegistry.register({
+      id: "diff-view-unified",
+      label: () => `${(options.preferences().diffViewMode || "split") === "unified" ? "✓ " : ""}Use Unified Diff View`,
+      description: "Display tool-call diffs inline",
+      category: "System",
+      keywords: ["diff", "unified", "view"],
+      action: () => options.setDiffViewMode("unified"),
+    })
+
+    commandRegistry.register({
+      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)")
+      },
+    })
+  }
+
+  function executeCommand(command: Command) {
+    try {
+      const result = command.action?.()
+      if (result instanceof Promise) {
+        void result.catch((error) => {
+          console.error("Command execution failed:", error)
+        })
+      }
+    } catch (error) {
+      console.error("Command execution failed:", error)
+    }
+  }
+
+  onMount(() => {
+    registerCommands()
+    refreshCommands()
+  })
+
+  return {
+    commands,
+    commandRegistry,
+    refreshCommands,
+    executeCommand,
+  }
+}