feat(tui): unified command palette and fix stuck dialog (#59, #86)

Command palette (ctrl+p) now searches across commands, agents, sessions,
and skills with frecency ranking. Fix crash when opening palette during
model processing — FrecencyProvider was nested inside DialogProvider, so
dialog content couldn't access the context. Also fix ErrorComponent
double-fault from invalid URL constructor.

Constraint:   SolidJS context only flows to descendants, not siblings
Rejected:     defensive try/catch in useFrecency | masks real provider bugs
Confidence:   high
Scope-risk:   moderate

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bobbyjohnstx

packages/tinycode/src/cli/cmd/tui/app.tsx

@@ -259,17 +259,17 @@ async function mountTui(input: TuiInput & { keymap: ReturnType<typeof createDefa
                               <ThemeProvider mode={mode}>
                                 <LocalProvider>
                                   <PromptStashProvider>
-                                    <DialogProvider>
-                                      <FrecencyProvider>
+                                    <FrecencyProvider>
+                                      <DialogProvider>
                                         <PromptHistoryProvider>
                                           <PromptRefProvider>
                                             <EditorContextProvider>
                                               <App onSnapshot={input.onSnapshot} />
                                             </EditorContextProvider>
                                           </PromptRefProvider>
                                         </PromptHistoryProvider>
-                                      </FrecencyProvider>
-                                    </DialogProvider>
+                                      </DialogProvider>
+                                    </FrecencyProvider>
                                   </PromptStashProvider>
                                 </LocalProvider>
                               </ThemeProvider>

packages/tinycode/src/cli/cmd/tui/component/command-palette.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "solid-js"
+import { createMemo, createResource } from "solid-js"
 import { DialogSelect, type DialogSelectRef } from "@tui/ui/dialog-select"
 import { type DialogContext } from "@tui/ui/dialog"
 import {
@@ -10,6 +10,11 @@ import {
 } from "../keymap"
 import { useTuiConfig } from "../context/tui-config"
 import { useFrecency } from "./prompt/frecency"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { useRoute } from "@tui/context/route"
+import { useSDK } from "@tui/context/sdk"
+import { Locale } from "@/util/locale"
 
 type PaletteCommandEntry = ReturnType<OpenTuiKeymap["getCommandEntries"]>[number]
 
@@ -28,6 +33,11 @@ export function CommandPaletteDialog() {
   const config = useTuiConfig()
   const keymap = useTinycodeKeymap()
   const frecency = useFrecency()
+  const local = useLocal()
+  const sync = useSync()
+  const route = useRoute()
+  const sdk = useSDK()
+
   const entries = useKeymapSelector((keymap: OpenTuiKeymap) => {
     const query = {
       namespace: "palette",
@@ -47,11 +57,12 @@ export function CommandPaletteDialog() {
       bindings: registeredBindings.get(entry.command.name) ?? entry.bindings,
     }))
   })
-  const options = createMemo(() =>
+
+  const commandOptions = createMemo(() =>
     entries().map((entry) => ({
       title: typeof entry.command.title === "string" ? entry.command.title : entry.command.name,
       description: typeof entry.command.desc === "string" ? entry.command.desc : undefined,
-      category: typeof entry.command.category === "string" ? entry.command.category : undefined,
+      category: typeof entry.command.category === "string" ? entry.command.category : "Commands",
       footer: formatKeyBindings(entry.bindings, config),
       value: entry.command.name,
       suggested: isSuggestedPaletteCommand(entry),
@@ -64,19 +75,88 @@ export function CommandPaletteDialog() {
     })),
   )
 
+  const currentAgent = createMemo(() => local.agent.current()?.name)
+  const agentOptions = createMemo(() =>
+    local.agent
+      .list()
+      .filter((a) => !a.hidden && a.name !== currentAgent())
+      .map((agent) => ({
+        title: agent.name,
+        description: agent.description ? Locale.truncate(agent.description, 60) : undefined,
+        category: "Agents",
+        footer: agent.name === currentAgent() ? "current" : "",
+        value: `agent:${agent.name}`,
+        suggested: false,
+        frecencyScore: frecency.getFrecency("agents", agent.name),
+        onSelect: (dialog: DialogContext) => {
+          dialog.clear()
+          frecency.updateFrecency("agents", agent.name)
+          local.agent.set(agent.name)
+        },
+      })),
+  )
+
+  const currentSessionID = createMemo(() => (route.data.type === "session" ? route.data.sessionID : undefined))
+  const sessionOptions = createMemo(() =>
+    sync.data.session
+      .filter((s) => !s.parentID && s.id !== currentSessionID())
+      .toSorted((a, b) => b.time.updated - a.time.updated)
+      .slice(0, 8)
+      .map((session) => ({
+        title: session.title,
+        description: Locale.time(session.time.updated),
+        category: "Sessions",
+        footer: "",
+        value: `session:${session.id}`,
+        suggested: false,
+        frecencyScore: frecency.getFrecency("sessions", session.id),
+        onSelect: (dialog: DialogContext) => {
+          dialog.clear()
+          frecency.updateFrecency("sessions", session.id)
+          route.navigate({ type: "session", sessionID: session.id })
+        },
+      })),
+  )
+
+  const [skills] = createResource(async () => {
+    const result = await sdk.client.app.skills()
+    return result.data ?? []
+  })
+  const skillOptions = createMemo(() =>
+    (skills() ?? []).map((skill) => ({
+      title: `/${skill.name}`,
+      description: skill.description?.replace(/\s+/g, " ").trim(),
+      category: "Skills",
+      footer: "",
+      value: `skill:${skill.name}`,
+      suggested: false,
+      frecencyScore: frecency.getFrecency("skills", skill.name),
+      onSelect: (dialog: DialogContext) => {
+        dialog.clear()
+        frecency.updateFrecency("skills", skill.name)
+        keymap.dispatchCommand("prompt.skills")
+      },
+    })),
+  )
+
   let ref: DialogSelectRef<string>
   const list = () => {
-    if (ref?.filter) return options()
-    const suggested = options()
+    if (ref?.filter) {
+      return [...commandOptions(), ...agentOptions(), ...sessionOptions(), ...skillOptions()]
+    }
+    const suggested = commandOptions()
       .filter((option) => option.suggested)
       .map((option) => ({
         ...option,
         value: `suggested:${option.value}`,
         category: "Suggested",
       }))
-    const rest = [...options()].sort((a, b) => b.frecencyScore - a.frecencyScore)
-    return [...suggested, ...rest]
+    const commands = [...commandOptions()].sort((a, b) => b.frecencyScore - a.frecencyScore)
+    const agents = [...agentOptions()].sort((a, b) => b.frecencyScore - a.frecencyScore)
+    const sessions = [...sessionOptions()]
+    const skillsList = [...skillOptions()].sort((a, b) => b.frecencyScore - a.frecencyScore)
+    return [...suggested, ...commands, ...agents, ...sessions, ...skillsList]
   }
 
-  return <DialogSelect ref={(value) => (ref = value)} title="Commands" options={list()} />
+  return <DialogSelect ref={(value) => (ref = value)} title="Command Palette" options={list()} flat />
 }

packages/tinycode/src/cli/cmd/tui/component/error-component.tsx

@@ -20,7 +20,7 @@ export function ErrorComponent(props: {
   })
   const [copied, setCopied] = createSignal(false)
 
-  const issueURL = new URL("")
+  const issueURL = new URL("https://github.com/bobbyjohnstx/tinycode/issues/new")
 
   // Choose safe fallback colors per mode since theme context may not be available
   const isLight = props.mode === "light"

packages/tinycode/src/cli/cmd/tui/ui/dialog.tsx

@@ -1,5 +1,15 @@
 import { useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { batch, createContext, createEffect, onCleanup, Show, useContext, type JSX, type ParentProps } from "solid-js"
+import {
+  batch,
+  createContext,
+  createEffect,
+  ErrorBoundary,
+  onCleanup,
+  Show,
+  useContext,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
 import { useTheme } from "@tui/context/theme"
 import { MouseButton, Renderable, RGBA } from "@opentui/core"
 import { createStore } from "solid-js/store"
@@ -202,7 +212,17 @@ export function DialogProvider(props: ParentProps) {
       >
         <Show when={value.stack.length}>
           <Dialog onClose={() => value.clear()} size={value.size}>
-            {value.stack.at(-1)!.element}
+            <ErrorBoundary
+              fallback={() => {
+                queueMicrotask(() => {
+                  value.clear()
+                  toast.show({ message: "Dialog failed to render", variant: "error" })
+                })
+                return <></>
+              }}
+            >
+              {value.stack.at(-1)!.element}
+            </ErrorBoundary>
           </Dialog>
         </Show>
       </box>