@toolkit-cli/toolkode 1.3.8 → 1.3.9

package/src/cli/cmd/tui/app.tsx

@@ -1,1255 +0,0 @@
-import { render, TimeToFirstDraw, useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { Clipboard } from "@tui/util/clipboard"
-import { Selection } from "@tui/util/selection"
-import { createCliRenderer, MouseButton, type CliRendererConfig } from "@opentui/core"
-import { RouteProvider, useRoute } from "@tui/context/route"
-import {
-  Switch,
-  Match,
-  createEffect,
-  createMemo,
-  ErrorBoundary,
-  createSignal,
-  onMount,
-  batch,
-  Show,
-  on,
-  onCleanup,
-} from "solid-js"
-import { win32DisableProcessedInput, win32InstallCtrlCGuard } from "./win32"
-import { Flag } from "@/flag/flag"
-import semver from "semver"
-import { DialogProvider, useDialog } from "@tui/ui/dialog"
-import { DialogProvider as DialogProviderList } from "@tui/component/dialog-provider"
-import { ErrorComponent } from "@tui/component/error-component"
-import { PluginRouteMissing } from "@tui/component/plugin-route-missing"
-import { SDKProvider, useSDK } from "@tui/context/sdk"
-import { StartupLoading } from "@tui/component/startup-loading"
-import { SyncProvider, useSync } from "@tui/context/sync"
-import { LocalProvider, useLocal } from "@tui/context/local"
-import { DialogModel, useConnected } from "@tui/component/dialog-model"
-import { DialogMcp } from "@tui/component/dialog-mcp"
-import { DialogStatus } from "@tui/component/dialog-status"
-import { DialogThemeList } from "@tui/component/dialog-theme-list"
-import { DialogHelp } from "./ui/dialog-help"
-import { CommandProvider, useCommandDialog } from "@tui/component/dialog-command"
-import { DialogAgent } from "@tui/component/dialog-agent"
-import { DialogSessionList } from "@tui/component/dialog-session-list"
-import { DialogWorkspaceList } from "@tui/component/dialog-workspace-list"
-import { KeybindProvider, useKeybind } from "@tui/context/keybind"
-import { ThemeProvider, useTheme } from "@tui/context/theme"
-import { Home } from "@tui/routes/home"
-import { Session } from "@tui/routes/session"
-import { PromptHistoryProvider } from "./component/prompt/history"
-import { FrecencyProvider } from "./component/prompt/frecency"
-import { PromptStashProvider } from "./component/prompt/stash"
-import { DialogAlert } from "./ui/dialog-alert"
-import { DialogConfirm } from "./ui/dialog-confirm"
-import { ToastProvider, useToast } from "./ui/toast"
-import { ExitProvider, useExit } from "./context/exit"
-import { Session as SessionApi } from "@/session"
-import { TuiEvent } from "./event"
-import { KVProvider, useKV } from "./context/kv"
-import { Provider } from "@/provider/provider"
-import { ArgsProvider, useArgs, type Args } from "./context/args"
-import open from "open"
-import { writeHeapSnapshot } from "v8"
-import { PromptRefProvider, usePromptRef } from "./context/prompt"
-import { TuiConfigProvider, useTuiConfig } from "./context/tui-config"
-import { TuiConfig } from "@/config/tui"
-import { createTuiApi, TuiPluginRuntime, type RouteMap } from "./plugin"
-import { FormatError, FormatUnknownError } from "@/cli/error"
-
-async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
-  // can't set raw mode if not a TTY
-  if (!process.stdin.isTTY) return "dark"
-
-  return new Promise((resolve) => {
-    let timeout: NodeJS.Timeout
-
-    const cleanup = () => {
-      process.stdin.setRawMode(false)
-      process.stdin.removeListener("data", handler)
-      clearTimeout(timeout)
-    }
-
-    const handler = (data: Buffer) => {
-      const str = data.toString()
-      const match = str.match(/\x1b]11;([^\x07\x1b]+)/)
-      if (match) {
-        cleanup()
-        const color = match[1]
-        // Parse RGB values from color string
-        // Formats: rgb:RR/GG/BB or #RRGGBB or rgb(R,G,B)
-        let r = 0,
-          g = 0,
-          b = 0
-
-        if (color.startsWith("rgb:")) {
-          const parts = color.substring(4).split("/")
-          r = parseInt(parts[0], 16) >> 8 // Convert 16-bit to 8-bit
-          g = parseInt(parts[1], 16) >> 8 // Convert 16-bit to 8-bit
-          b = parseInt(parts[2], 16) >> 8 // Convert 16-bit to 8-bit
-        } else if (color.startsWith("#")) {
-          r = parseInt(color.substring(1, 3), 16)
-          g = parseInt(color.substring(3, 5), 16)
-          b = parseInt(color.substring(5, 7), 16)
-        } else if (color.startsWith("rgb(")) {
-          const parts = color.substring(4, color.length - 1).split(",")
-          r = parseInt(parts[0])
-          g = parseInt(parts[1])
-          b = parseInt(parts[2])
-        }
-
-        // Calculate luminance using relative luminance formula
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-
-        // Determine if dark or light based on luminance threshold
-        resolve(luminance > 0.5 ? "light" : "dark")
-      }
-    }
-
-    process.stdin.setRawMode(true)
-    process.stdin.on("data", handler)
-    process.stdout.write("\x1b]11;?\x07")
-
-    timeout = setTimeout(() => {
-      cleanup()
-      resolve("dark")
-    }, 1000)
-  })
-}
-
-import type { EventSource } from "./context/sdk"
-import { DialogVariant } from "./component/dialog-variant"
-
-function rendererConfig(_config: TuiConfig.Info): CliRendererConfig {
-  return {
-    targetFps: 60,
-    gatherStats: false,
-    exitOnCtrlC: false,
-    useKittyKeyboard: { events: process.platform === "win32" },
-    autoFocus: false,
-    openConsoleOnError: false,
-    consoleOptions: {
-      keyBindings: [{ name: "y", ctrl: true, action: "copy-selection" }],
-      onCopySelection: (text) => {
-        Clipboard.copy(text).catch((error) => {
-          console.error(`Failed to copy console selection to clipboard: ${error}`)
-        })
-      },
-    },
-  }
-}
-
-function errorMessage(error: unknown) {
-  const formatted = FormatError(error)
-  if (formatted !== undefined) return formatted
-  if (
-    typeof error === "object" &&
-    error !== null &&
-    "data" in error &&
-    typeof error.data === "object" &&
-    error.data !== null &&
-    "message" in error.data &&
-    typeof error.data.message === "string"
-  ) {
-    return error.data.message
-  }
-  return FormatUnknownError(error)
-}
-
-export function tui(input: {
-  url: string
-  args: Args
-  config: TuiConfig.Info
-  onSnapshot?: () => Promise<string[]>
-  directory?: string
-  fetch?: typeof fetch
-  headers?: RequestInit["headers"]
-  events?: EventSource
-}) {
-  // promise to prevent immediate exit
-  return new Promise<void>(async (resolve) => {
-    const unguard = win32InstallCtrlCGuard()
-    win32DisableProcessedInput()
-
-    // tk_ toolkode: always dark. User can toggle with /theme.
-    const mode = "dark" as "dark" | "light"
-    // Original: const mode = await getTerminalBackgroundColor()
-
-    // Re-clear after getTerminalBackgroundColor() — setRawMode(false) restores
-    // the original console mode which re-enables ENABLE_PROCESSED_INPUT.
-    win32DisableProcessedInput()
-
-    const onExit = async () => {
-      unguard?.()
-      resolve()
-    }
-
-    const onBeforeExit = async () => {
-      await TuiPluginRuntime.dispose()
-    }
-
-    const renderer = await createCliRenderer(rendererConfig(input.config))
-
-    await render(() => {
-      return (
-        <ErrorBoundary
-          fallback={(error, reset) => (
-            <ErrorComponent error={error} reset={reset} onBeforeExit={onBeforeExit} onExit={onExit} mode={mode} />
-          )}
-        >
-          <ArgsProvider {...input.args}>
-            <ExitProvider onBeforeExit={onBeforeExit} onExit={onExit}>
-              <KVProvider>
-                <ToastProvider>
-                  <RouteProvider>
-                    <TuiConfigProvider config={input.config}>
-                      <SDKProvider
-                        url={input.url}
-                        directory={input.directory}
-                        fetch={input.fetch}
-                        headers={input.headers}
-                        events={input.events}
-                      >
-                        <SyncProvider>
-                          <ThemeProvider mode={mode}>
-                            <LocalProvider>
-                              <KeybindProvider>
-                                <PromptStashProvider>
-                                  <DialogProvider>
-                                    <CommandProvider>
-                                      <FrecencyProvider>
-                                        <PromptHistoryProvider>
-                                          <PromptRefProvider>
-                                            <App onSnapshot={input.onSnapshot} />
-                                          </PromptRefProvider>
-                                        </PromptHistoryProvider>
-                                      </FrecencyProvider>
-                                    </CommandProvider>
-                                  </DialogProvider>
-                                </PromptStashProvider>
-                              </KeybindProvider>
-                            </LocalProvider>
-                          </ThemeProvider>
-                        </SyncProvider>
-                      </SDKProvider>
-                    </TuiConfigProvider>
-                  </RouteProvider>
-                </ToastProvider>
-              </KVProvider>
-            </ExitProvider>
-          </ArgsProvider>
-        </ErrorBoundary>
-      )
-    }, renderer)
-  })
-}
-
-function App(props: { onSnapshot?: () => Promise<string[]> }) {
-  const tuiConfig = useTuiConfig()
-  const route = useRoute()
-  const dimensions = useTerminalDimensions()
-  const renderer = useRenderer()
-  renderer.disableStdoutInterception()
-  const dialog = useDialog()
-  const local = useLocal()
-  const kv = useKV()
-  const command = useCommandDialog()
-  const keybind = useKeybind()
-  const sdk = useSDK()
-  const toast = useToast()
-  const themeState = useTheme()
-  const { theme, mode, setMode, locked, lock, unlock } = themeState
-  const sync = useSync()
-  const exit = useExit()
-  const promptRef = usePromptRef()
-  const routes: RouteMap = new Map()
-  const [routeRev, setRouteRev] = createSignal(0)
-  const routeView = (name: string) => {
-    routeRev()
-    return routes.get(name)?.at(-1)?.render
-  }
-
-  const api = createTuiApi({
-    command,
-    tuiConfig,
-    dialog,
-    keybind,
-    kv,
-    route,
-    routes,
-    bump: () => setRouteRev((x) => x + 1),
-    sdk,
-    sync,
-    theme: themeState,
-    toast,
-    renderer,
-  })
-  onCleanup(() => {
-    api.dispose()
-  })
-  const [ready, setReady] = createSignal(false)
-  TuiPluginRuntime.init(api)
-    .catch((error) => {
-      console.error("Failed to load TUI plugins", error)
-    })
-    .finally(() => {
-      setReady(true)
-    })
-
-  useKeyboard((evt) => {
-    if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
-    if (!renderer.getSelection()) return
-
-    // Windows Terminal-like behavior:
-    // - Ctrl+C copies and dismisses selection
-    // - Esc dismisses selection
-    // - Most other key input dismisses selection and is passed through
-    if (evt.ctrl && evt.name === "c") {
-      if (!Selection.copy(renderer, toast)) {
-        renderer.clearSelection()
-        return
-      }
-
-      evt.preventDefault()
-      evt.stopPropagation()
-      return
-    }
-
-    if (evt.name === "escape") {
-      renderer.clearSelection()
-      evt.preventDefault()
-      evt.stopPropagation()
-      return
-    }
-
-    renderer.clearSelection()
-  })
-
-  // Wire up console copy-to-clipboard via opentui's onCopySelection callback
-  renderer.console.onCopySelection = async (text: string) => {
-    if (!text || text.length === 0) return
-
-    await Clipboard.copy(text)
-      .then(() => toast.show({ message: "Copied to clipboard", variant: "info" }))
-      .catch(toast.error)
-
-    renderer.clearSelection()
-  }
-  const [terminalTitleEnabled, setTerminalTitleEnabled] = createSignal(kv.get("terminal_title_enabled", true))
-
-  // Update terminal window title based on current route and session
-  createEffect(() => {
-    if (!terminalTitleEnabled() || Flag.OPENCODE_DISABLE_TERMINAL_TITLE) return
-
-    if (route.data.type === "home") {
-      renderer.setTerminalTitle("tk_ toolkode")
-      return
-    }
-
-    if (route.data.type === "session") {
-      const session = sync.session.get(route.data.sessionID)
-      if (!session || SessionApi.isDefaultTitle(session.title)) {
-        renderer.setTerminalTitle("tk_ toolkode")
-        return
-      }
-
-      const title = session.title.length > 40 ? session.title.slice(0, 37) + "..." : session.title
-      renderer.setTerminalTitle(`tk_ | ${title}`)
-      return
-    }
-
-    if (route.data.type === "plugin") {
-      renderer.setTerminalTitle(`OC | ${route.data.id}`)
-    }
-  })
-
-  const args = useArgs()
-  onMount(() => {
-    batch(() => {
-      if (args.agent) local.agent.set(args.agent)
-      if (args.model) {
-        const { providerID, modelID } = Provider.parseModel(args.model)
-        if (!providerID || !modelID)
-          return toast.show({
-            variant: "warning",
-            message: `Invalid model format: ${args.model}`,
-            duration: 3000,
-          })
-        local.model.set({ providerID, modelID }, { recent: true })
-      }
-      // Handle --session without --fork immediately (fork is handled in createEffect below)
-      if (args.sessionID && !args.fork) {
-        route.navigate({
-          type: "session",
-          sessionID: args.sessionID,
-        })
-      }
-    })
-  })
-
-  let continued = false
-  createEffect(() => {
-    // When using -c, session list is loaded in blocking phase, so we can navigate at "partial"
-    if (continued || sync.status === "loading" || !args.continue) return
-    const match = sync.data.session
-      .toSorted((a, b) => b.time.updated - a.time.updated)
-      .find((x) => x.parentID === undefined)?.id
-    if (match) {
-      continued = true
-      if (args.fork) {
-        sdk.client.session.fork({ sessionID: match }).then((result) => {
-          if (result.data?.id) {
-            route.navigate({ type: "session", sessionID: result.data.id })
-          } else {
-            toast.show({ message: "Failed to fork session", variant: "error" })
-          }
-        })
-      } else {
-        route.navigate({ type: "session", sessionID: match })
-      }
-    }
-  })
-
-  // Handle --session with --fork: wait for sync to be fully complete before forking
-  // (session list loads in non-blocking phase for --session, so we must wait for "complete"
-  // to avoid a race where reconcile overwrites the newly forked session)
-  let forked = false
-  createEffect(() => {
-    if (forked || sync.status !== "complete" || !args.sessionID || !args.fork) return
-    forked = true
-    sdk.client.session.fork({ sessionID: args.sessionID }).then((result) => {
-      if (result.data?.id) {
-        route.navigate({ type: "session", sessionID: result.data.id })
-      } else {
-        toast.show({ message: "Failed to fork session", variant: "error" })
-      }
-    })
-  })
-
-  createEffect(
-    on(
-      () => sync.status === "complete" && sync.data.provider.length === 0,
-      (isEmpty, wasEmpty) => {
-        // only trigger when we transition into an empty-provider state
-        if (!isEmpty || wasEmpty) return
-        dialog.replace(() => <DialogProviderList />)
-      },
-    ),
-  )
-
-  const connected = useConnected()
-  command.register(() => [
-    {
-      title: "Switch session",
-      value: "session.list",
-      keybind: "session_list",
-      category: "Session",
-      suggested: sync.data.session.length > 0,
-      slash: {
-        name: "resume",
-        aliases: ["sessions", "continue"],
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogSessionList />)
-      },
-    },
-    ...(Flag.OPENCODE_EXPERIMENTAL_WORKSPACES
-      ? [
-          {
-            title: "Manage workspaces",
-            value: "workspace.list",
-            category: "Workspace",
-            suggested: true,
-            slash: {
-              name: "workspaces",
-            },
-            onSelect: () => {
-              dialog.replace(() => <DialogWorkspaceList />)
-            },
-          },
-        ]
-      : []),
-    {
-      title: "New session",
-      suggested: route.data.type === "session",
-      value: "session.new",
-      keybind: "session_new",
-      category: "Session",
-      slash: {
-        name: "new",
-        aliases: ["clear"],
-      },
-      onSelect: () => {
-        const current = promptRef.current
-        // Don't require focus - if there's any text, preserve it
-        const currentPrompt = current?.current?.input ? current.current : undefined
-        const workspaceID =
-          route.data.type === "session" ? sync.session.get(route.data.sessionID)?.workspaceID : undefined
-        route.navigate({
-          type: "home",
-          initialPrompt: currentPrompt,
-          workspaceID,
-        })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Switch model",
-      value: "model.list",
-      keybind: "model_list",
-      suggested: true,
-      category: "Agent",
-      slash: {
-        name: "models",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogModel />)
-      },
-    },
-    {
-      title: "Model cycle",
-      value: "model.cycle_recent",
-      keybind: "model_cycle_recent",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.model.cycle(1)
-      },
-    },
-    {
-      title: "Model cycle reverse",
-      value: "model.cycle_recent_reverse",
-      keybind: "model_cycle_recent_reverse",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.model.cycle(-1)
-      },
-    },
-    {
-      title: "Favorite cycle",
-      value: "model.cycle_favorite",
-      keybind: "model_cycle_favorite",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.model.cycleFavorite(1)
-      },
-    },
-    {
-      title: "Favorite cycle reverse",
-      value: "model.cycle_favorite_reverse",
-      keybind: "model_cycle_favorite_reverse",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.model.cycleFavorite(-1)
-      },
-    },
-    {
-      title: "Switch agent",
-      value: "agent.list",
-      keybind: "agent_list",
-      category: "Agent",
-      slash: {
-        name: "agents",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogAgent />)
-      },
-    },
-    {
-      title: "Toggle MCPs",
-      value: "mcp.list",
-      category: "Agent",
-      slash: {
-        name: "mcps",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogMcp />)
-      },
-    },
-    {
-      title: "Agent cycle",
-      value: "agent.cycle",
-      keybind: "agent_cycle",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.agent.move(1)
-      },
-    },
-    {
-      title: "Switch model variant",
-      value: "variant.cycle",
-      keybind: "variant_cycle",
-      category: "Agent",
-      onSelect: () => {
-        dialog.replace(() => <DialogVariant />)
-      },
-    },
-    {
-      title: "Agent cycle reverse",
-      value: "agent.cycle.reverse",
-      keybind: "agent_cycle_reverse",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        local.agent.move(-1)
-      },
-    },
-    {
-      title: "Connect provider",
-      value: "provider.connect",
-      suggested: !connected(),
-      slash: {
-        name: "connect",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogProviderList />)
-      },
-      category: "Provider",
-    },
-    {
-      title: "View status",
-      keybind: "status_view",
-      value: "toolkode.status",
-      slash: {
-        name: "status",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-      category: "System",
-    },
-    {
-      title: "Switch theme",
-      value: "theme.switch",
-      keybind: "theme_list",
-      slash: {
-        name: "themes",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogThemeList />)
-      },
-      category: "System",
-    },
-    {
-      title: "Toggle Theme Mode",
-      value: "theme.switch_mode",
-      onSelect: (dialog) => {
-        setMode(mode() === "dark" ? "light" : "dark")
-        dialog.clear()
-      },
-      category: "System",
-    },
-    {
-      title: locked() ? "Unlock Theme Mode" : "Lock Theme Mode",
-      value: "theme.mode.lock",
-      onSelect: (dialog) => {
-        if (locked()) unlock()
-        else lock()
-        dialog.clear()
-      },
-      category: "System",
-    },
-    {
-      title: "Help",
-      value: "help.show",
-      slash: {
-        name: "help",
-      },
-      onSelect: () => {
-        dialog.replace(() => <DialogHelp />)
-      },
-      category: "System",
-    },
-    {
-      title: "Open docs",
-      value: "docs.open",
-      onSelect: () => {
-        open("https://toolkode.com/docs").catch(() => {})
-        dialog.clear()
-      },
-      category: "System",
-    },
-    {
-      title: "Exit the app",
-      value: "app.exit",
-      slash: {
-        name: "exit",
-        aliases: ["quit", "q"],
-      },
-      onSelect: () => exit(),
-      category: "System",
-    },
-    {
-      title: "Toggle debug panel",
-      category: "System",
-      value: "app.debug",
-      onSelect: (dialog) => {
-        renderer.toggleDebugOverlay()
-        dialog.clear()
-      },
-    },
-    {
-      title: "Toggle console",
-      category: "System",
-      value: "app.console",
-      onSelect: (dialog) => {
-        renderer.console.toggle()
-        dialog.clear()
-      },
-    },
-    {
-      title: "Write heap snapshot",
-      category: "System",
-      value: "app.heap_snapshot",
-      onSelect: async (dialog) => {
-        const files = await props.onSnapshot?.()
-        toast.show({
-          variant: "info",
-          message: `Heap snapshot written to ${files?.join(", ")}`,
-          duration: 5000,
-        })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Suspend terminal",
-      value: "terminal.suspend",
-      keybind: "terminal_suspend",
-      category: "System",
-      hidden: true,
-      onSelect: () => {
-        process.once("SIGCONT", () => {
-          renderer.resume()
-        })
-
-        renderer.suspend()
-        // pid=0 means send the signal to all processes in the process group
-        process.kill(0, "SIGTSTP")
-      },
-    },
-    {
-      title: terminalTitleEnabled() ? "Disable terminal title" : "Enable terminal title",
-      value: "terminal.title.toggle",
-      keybind: "terminal_title_toggle",
-      category: "System",
-      onSelect: (dialog) => {
-        setTerminalTitleEnabled((prev) => {
-          const next = !prev
-          kv.set("terminal_title_enabled", next)
-          if (!next) renderer.setTerminalTitle("")
-          return next
-        })
-        dialog.clear()
-      },
-    },
-    {
-      title: kv.get("animations_enabled", true) ? "Disable animations" : "Enable animations",
-      value: "app.toggle.animations",
-      category: "System",
-      onSelect: (dialog) => {
-        kv.set("animations_enabled", !kv.get("animations_enabled", true))
-        dialog.clear()
-      },
-    },
-    {
-      title: kv.get("diff_wrap_mode", "word") === "word" ? "Disable diff wrapping" : "Enable diff wrapping",
-      value: "app.toggle.diffwrap",
-      category: "System",
-      onSelect: (dialog) => {
-        const current = kv.get("diff_wrap_mode", "word")
-        kv.set("diff_wrap_mode", current === "word" ? "none" : "word")
-        dialog.clear()
-      },
-    },
-
-    // ── Toolkode parity commands ──────────────────────────────
-    {
-      title: "Compact conversation",
-      value: "session.compact",
-      slash: { name: "compact" },
-      category: "Session",
-      onSelect: async (dialog) => {
-        if (route.data.type !== "session") { toast.show({ variant: "warning", message: "Start a session first", duration: 2000 }); dialog.clear(); return }
-        const m = local.model.current()
-        if (m) sdk.client.session.summarize({ sessionID: route.data.sessionID, modelID: m.modelID, providerID: m.providerID })
-        toast.show({ variant: "info", message: "Compacting...", duration: 2000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Enter plan mode",
-      value: "agent.plan",
-      slash: { name: "plan" },
-      category: "Agent",
-      onSelect: (dialog) => {
-        local.agent.set("plan")
-        toast.show({ variant: "info", message: "Plan mode", duration: 1500 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "View changes",
-      value: "session.diff",
-      slash: { name: "diff" },
-      category: "Session",
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-    },
-    {
-      title: "Copy last response",
-      value: "session.copy",
-      slash: { name: "copy" },
-      category: "Session",
-      onSelect: async (dialog) => {
-        if (route.data.type !== "session") { toast.show({ variant: "warning", message: "Start a session first", duration: 2000 }); dialog.clear(); return }
-        const msgs = sync.data.message[route.data.sessionID] ?? []
-        const last = [...msgs].reverse().find((m: any) => m.role === "assistant")
-        if (!last) { toast.show({ variant: "warning", message: "No response to copy", duration: 2000 }); dialog.clear(); return }
-        const parts = sync.data.part[last.id] ?? []
-        const text = parts.filter((p: any) => p.type === "text").map((p: any) => p.text).join("\n").trim()
-        if (text) { Clipboard.copy(text).then(() => toast.show({ variant: "info", message: "Copied", duration: 1500 })).catch(() => toast.show({ variant: "error", message: "Copy failed" })) }
-        dialog.clear()
-      },
-    },
-    {
-      title: "Rename session",
-      value: "session.rename",
-      slash: { name: "rename" },
-      category: "Session",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Type your message — the session auto-names from your first prompt", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Branch conversation",
-      value: "session.branch",
-      slash: { name: "branch", aliases: ["fork"] },
-      category: "Session",
-      onSelect: async (dialog) => {
-        if (route.data.type !== "session") { toast.show({ variant: "warning", message: "Start a session first", duration: 2000 }); dialog.clear(); return }
-        const res = await sdk.client.session.fork({ sessionID: route.data.sessionID })
-        if (res.data?.id) { route.navigate({ type: "session", sessionID: res.data.id }); toast.show({ variant: "info", message: "Branched", duration: 1500 }) }
-        else toast.show({ variant: "error", message: "Branch failed" })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Switch theme",
-      value: "system.color",
-      slash: { name: "color" },
-      category: "System",
-      onSelect: () => {
-        dialog.replace(() => <DialogThemeList />)
-      },
-    },
-    {
-      title: "Set effort level",
-      value: "agent.effort",
-      slash: { name: "effort" },
-      category: "Agent",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Set via model config or ANTHROPIC_EFFORT env", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Toggle fast mode",
-      value: "agent.fast",
-      slash: { name: "fast" },
-      category: "Agent",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use model switcher to pick a faster model", duration: 2000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Show token usage",
-      value: "system.cost",
-      slash: { name: "cost" },
-      category: "System",
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-    },
-    {
-      title: "Diagnostics",
-      value: "system.doctor",
-      slash: { name: "doctor" },
-      category: "System",
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-    },
-    {
-      title: "Edit CLAUDE.md",
-      value: "system.memory",
-      slash: { name: "memory" },
-      category: "System",
-      onSelect: async (dialog) => {
-        // Try CLAUDE.md first, then auto-memory dir
-        const claudeMd = process.cwd() + "/CLAUDE.md"
-        try {
-          await open(claudeMd)
-        } catch {
-          // No CLAUDE.md — try opening auto-memory directory
-          const { InstructionPrompt } = await import("@/session/instruction")
-          const memDir = InstructionPrompt.getMemoryDir()
-          try {
-            const fs = await import("fs/promises")
-            await fs.mkdir(memDir, { recursive: true })
-            // Create MEMORY.md if it doesn't exist
-            const memFile = memDir + "/MEMORY.md"
-            try { await fs.access(memFile) } catch { await fs.writeFile(memFile, "# Auto Memory\n\n") }
-            await open(memFile)
-          } catch {
-            toast.show({ variant: "info", message: "Create CLAUDE.md or use 'remember X' to start auto-memory", duration: 4000 })
-          }
-        }
-        dialog.clear()
-      },
-    },
-    {
-      title: "Permissions",
-      value: "system.permissions",
-      slash: { name: "permissions", aliases: ["allowed-tools"] },
-      category: "System",
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-    },
-    {
-      title: "Hooks",
-      value: "system.hooks",
-      slash: { name: "hooks" },
-      category: "System",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Configure in toolkode.json → hooks section", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Skills",
-      value: "system.skills",
-      slash: { name: "skills" },
-      category: "System",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Skills appear in / menu — type / to browse", duration: 2000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "List background tasks",
-      value: "session.tasks",
-      slash: { name: "tasks" },
-      category: "Session",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "No background tasks running", duration: 2000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Initialize project",
-      value: "system.init",
-      slash: { name: "init" },
-      category: "System",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /init to create a CLAUDE.md project guide", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Submit feedback",
-      value: "system.feedback",
-      slash: { name: "feedback", aliases: ["bug"] },
-      category: "System",
-      onSelect: () => {
-        open("https://github.com/aaronmrosenthal/toolkode/issues").catch(() => {})
-        dialog.clear()
-      },
-    },
-    {
-      title: "Export conversation",
-      value: "session.export",
-      slash: { name: "export" },
-      category: "Session",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /export [filename] to export conversation", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "View context usage",
-      value: "session.context",
-      slash: { name: "context" },
-      category: "Session",
-      onSelect: () => {
-        dialog.replace(() => <DialogStatus />)
-      },
-    },
-    {
-      title: "Rewind",
-      value: "session.rewind",
-      slash: { name: "rewind", aliases: ["checkpoint"] },
-      category: "Session",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use git to revert: git stash, git checkout -- .", duration: 4000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Reload plugins",
-      value: "system.reload_plugins",
-      slash: { name: "reload-plugins" },
-      category: "System",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Restart toolkode to reload plugins", duration: 2000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Ask — side conversation",
-      value: "session.ask",
-      slash: { name: "ask", aliases: ["btw"] },
-      category: "Session",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /ask <question> — side conversation in sidebar", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Security review",
-      value: "system.security_review",
-      slash: { name: "security-review" },
-      category: "System",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Running security review on pending changes...", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    // ── Spec-Kit workflow ──────────────────────────────────────
-    {
-      title: "Specify — describe what to build",
-      value: "speckit.specify",
-      slash: { name: "specify" },
-      category: "Workflow",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /specify <feature description> to create a spec", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Plan — technical implementation strategy",
-      value: "speckit.plan",
-      slash: { name: "plan" },
-      category: "Workflow",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /plan to create implementation plan from spec", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Tasks — generate actionable task list",
-      value: "speckit.tasks",
-      slash: { name: "tasks" },
-      category: "Workflow",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /tasks to break plan into actionable items", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Implement — execute all tasks",
-      value: "speckit.implement",
-      slash: { name: "implement" },
-      category: "Workflow",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /implement to execute tasks from the plan", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Constitution — project principles",
-      value: "speckit.constitution",
-      slash: { name: "constitution" },
-      category: "Workflow",
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /constitution to define project governance", duration: 3000 })
-        dialog.clear()
-      },
-    },
-    {
-      title: "Skills Marketplace",
-      value: "skills.marketplace",
-      slash: { name: "skills-marketplace", aliases: ["marketplace", "skill-store"] },
-      category: "System",
-      suggested: true,
-      onSelect: (dialog) => {
-        toast.show({ variant: "info", message: "Use /skills-marketplace [query] to browse 90K+ skills from skills.sh", duration: 4000 })
-        dialog.clear()
-      },
-    },
-    // ── Spatial navigation — number keys for instant route switching ──
-    // These are hidden from the / menu but shown in the top bar
-    // 1=chat is default (no action needed), 2-5 open views
-    // Note: these only fire when input is empty (checked via keybind system)
-    // ── Keyboard-only shortcuts ──────────────────────────────
-    {
-      title: "Quick switch model",
-      value: "model.quick_switch",
-      category: "Agent",
-      hidden: true,
-      onSelect: () => {
-        dialog.replace(() => <DialogModel />)
-      },
-    },
-    {
-      title: "Toggle fast mode (shortcut)",
-      value: "fast.toggle",
-      category: "Agent",
-      hidden: true,
-      onSelect: (dialog) => {
-        dialog.clear()
-      },
-    },
-  ])
-
-  sdk.event.on(TuiEvent.CommandExecute.type, (evt) => {
-    command.trigger(evt.properties.command)
-  })
-
-  sdk.event.on(TuiEvent.ToastShow.type, (evt) => {
-    toast.show({
-      title: evt.properties.title,
-      message: evt.properties.message,
-      variant: evt.properties.variant,
-      duration: evt.properties.duration,
-    })
-  })
-
-  sdk.event.on(TuiEvent.SessionSelect.type, (evt) => {
-    route.navigate({
-      type: "session",
-      sessionID: evt.properties.sessionID,
-    })
-  })
-
-  sdk.event.on("session.deleted", (evt) => {
-    if (route.data.type === "session" && route.data.sessionID === evt.properties.info.id) {
-      route.navigate({ type: "home" })
-      toast.show({
-        variant: "info",
-        message: "The current session was deleted",
-      })
-    }
-  })
-
-  sdk.event.on("session.error", (evt) => {
-    const error = evt.properties.error
-    if (error && typeof error === "object" && error.name === "MessageAbortedError") return
-    const message = errorMessage(error)
-
-    toast.show({
-      variant: "error",
-      message,
-      duration: 5000,
-    })
-  })
-
-  sdk.event.on("installation.update-available", async (evt) => {
-    const version = evt.properties.version
-
-    const skipped = kv.get("skipped_version")
-    if (skipped && !semver.gt(version, skipped)) return
-
-    const choice = await DialogConfirm.show(
-      dialog,
-      `Update Available`,
-      `A new release v${version} is available. Would you like to update now?`,
-      "skip",
-    )
-
-    if (choice === false) {
-      kv.set("skipped_version", version)
-      return
-    }
-
-    if (choice !== true) return
-
-    toast.show({
-      variant: "info",
-      message: `Updating to v${version}...`,
-      duration: 30000,
-    })
-
-    const result = await sdk.client.global.upgrade({ target: version })
-
-    if (result.error || !result.data?.success) {
-      toast.show({
-        variant: "error",
-        title: "Update Failed",
-        message: "Update failed",
-        duration: 10000,
-      })
-      return
-    }
-
-    await DialogAlert.show(
-      dialog,
-      "Update Complete",
-      `Successfully updated to Toolkode v${result.data.version}. Please restart the application.`,
-    )
-
-    exit()
-  })
-
-  const plugin = createMemo(() => {
-    if (!ready()) return
-    if (route.data.type !== "plugin") return
-    const render = routeView(route.data.id)
-    if (!render) return <PluginRouteMissing id={route.data.id} onHome={() => route.navigate({ type: "home" })} />
-    return render({ params: route.data.data })
-  })
-
-  return (
-    <box
-      width={dimensions().width}
-      height={dimensions().height}
-      backgroundColor={theme.background}
-      onMouseDown={(evt) => {
-        if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
-        if (evt.button !== MouseButton.RIGHT) return
-
-        if (!Selection.copy(renderer, toast)) return
-        evt.preventDefault()
-        evt.stopPropagation()
-      }}
-      onMouseUp={Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT ? undefined : () => Selection.copy(renderer, toast)}
-    >
-      <Show when={Flag.OPENCODE_SHOW_TTFD}>
-        <TimeToFirstDraw />
-      </Show>
-      <Show when={ready()}>
-        <Switch>
-          <Match when={route.data.type === "home"}>
-            <Home />
-          </Match>
-          <Match when={route.data.type === "session"}>
-            <Session />
-          </Match>
-        </Switch>
-      </Show>
-      {plugin()}
-      <TuiPluginRuntime.Slot name="app" />
-      <StartupLoading ready={ready} />
-    </box>
-  )
-}