jonsoc 1.1.43

package/src/cli/cmd/tui/event.ts

@@ -0,0 +1,48 @@
+import { BusEvent } from "@/bus/bus-event"
+import { Bus } from "@/bus"
+import z from "zod"
+
+export const TuiEvent = {
+  PromptAppend: BusEvent.define("tui.prompt.append", z.object({ text: z.string() })),
+  CommandExecute: BusEvent.define(
+    "tui.command.execute",
+    z.object({
+      command: z.union([
+        z.enum([
+          "session.list",
+          "session.new",
+          "session.share",
+          "session.interrupt",
+          "session.compact",
+          "session.page.up",
+          "session.page.down",
+          "session.line.up",
+          "session.line.down",
+          "session.half.page.up",
+          "session.half.page.down",
+          "session.first",
+          "session.last",
+          "prompt.clear",
+          "prompt.submit",
+          "agent.cycle",
+        ]),
+        z.string(),
+      ]),
+    }),
+  ),
+  ToastShow: BusEvent.define(
+    "tui.toast.show",
+    z.object({
+      title: z.string().optional(),
+      message: z.string(),
+      variant: z.enum(["info", "success", "warning", "error"]),
+      duration: z.number().default(5000).optional().describe("Duration in milliseconds"),
+    }),
+  ),
+  SessionSelect: BusEvent.define(
+    "tui.session.select",
+    z.object({
+      sessionID: z.string().regex(/^ses/).describe("Session ID to navigate to"),
+    }),
+  ),
+}

package/src/cli/cmd/tui/hooks/use-command-registry.tsx

@@ -0,0 +1,184 @@
+import { useCommandDialog, type CommandOption } from "../component/dialog-command"
+import { useLayout } from "../context/layout"
+import { useKV } from "../context/kv"
+import { useRoute } from "../context/route"
+import { useSync } from "../context/sync"
+import { useTheme } from "../context/theme"
+import { useToast } from "../ui/toast"
+import { useLocal } from "../context/local"
+import { useSDK } from "../context/sdk"
+import { useInspector } from "../context/inspector"
+import type { Route } from "../context/route"
+
+// Define all command groups
+export type CommandGroup =
+  | "layout" // Panel toggles, /ui
+  | "navigation" // Home, session switching
+  | "session" // Share, rename, timeline, etc.
+  | "display" // Timestamps, thinking, conceal, etc.
+  | "system" // Tips, help, etc.
+
+// Command definitions by group
+const COMMAND_DEFINITIONS: Record<CommandGroup, (ctx: CommandContext) => CommandOption[]> = {
+  layout: (ctx) => [
+    {
+      title: ctx.layout.getPanelByType("explorer")?.visible ? "Hide navigator" : "Show navigator",
+      value: "session.navigator.toggle",
+      keybind: "navigator_toggle",
+      category: "Session",
+      onSelect: (dialog) => {
+        ctx.layout.togglePanel("explorer")
+        dialog.clear()
+      },
+    },
+    {
+      title: ctx.layout.getPanelByType("viewer")?.visible ? "Hide file viewer" : "Show file viewer",
+      value: "session.viewer.toggle",
+      category: "Session",
+      onSelect: (dialog) => {
+        ctx.layout.togglePanel("viewer")
+        dialog.clear()
+      },
+    },
+    {
+      title: ctx.navigatorTab() === "git" ? "Keep file explorer on" : "Keep git controls on",
+      value: "session.navigator.git.toggle",
+      category: "Session",
+      onSelect: (dialog) => {
+        ctx.toggleNavigatorTab()
+        dialog.clear()
+      },
+    },
+    {
+      title: "Configure UI Layout",
+      value: "session.ui_settings",
+      category: "Session",
+      slash: {
+        name: "ui",
+        aliases: ["layout", "configure"],
+      },
+      onSelect: (dialog) => {
+        dialog.clear()
+        ctx.navigate({
+          type: "ui-settings",
+          returnTo: ctx.returnTo,
+        })
+      },
+    },
+  ],
+
+  navigation: (ctx) => [
+    // Navigation commands go here
+  ],
+
+  session: (ctx) => [
+    // Session-specific commands go here (share, rename, etc.)
+  ],
+
+  display: (ctx) => [
+    // Display toggle commands go here
+  ],
+
+  system: (ctx) => [
+    {
+      title: ctx.inspector?.enabled() ? "Disable element inspector" : "Enable element inspector",
+      value: "app.inspector.toggle",
+      keybind: "inspector_toggle",
+      category: "System",
+      onSelect: (dialog) => {
+        ctx.inspector?.setEnabled((prev) => !prev)
+        dialog.clear()
+      },
+    },
+  ],
+}
+
+interface CommandContext {
+  layout: ReturnType<typeof useLayout>
+  kv: ReturnType<typeof useKV>
+  navigate: ReturnType<typeof useRoute>["navigate"]
+  returnTo: Route
+  navigatorTab: () => "explorer" | "git"
+  toggleNavigatorTab: () => void
+  inspector?: ReturnType<typeof useInspector>
+  sync?: ReturnType<typeof useSync>
+  theme?: ReturnType<typeof useTheme>
+  toast?: ReturnType<typeof useToast>
+  local?: ReturnType<typeof useLocal>
+  sdk?: ReturnType<typeof useSDK>
+}
+
+// Validate that commands are only registered from allowed locations
+const VALID_REGISTRATION_LOCATIONS = [
+  "routes/home.tsx",
+  "routes/session/index.tsx",
+  "hooks/use-command-registry.tsx", // Only this hook should register commands
+]
+
+export function useCommandRegistry(options: {
+  groups: CommandGroup[]
+  returnTo: Route
+  additionalCommands?: CommandOption[]
+}) {
+  const command = useCommandDialog()
+  const layout = useLayout()
+  const kv = useKV()
+  const { navigate } = useRoute()
+  const [navigatorTab, setNavigatorTab] = kv.signal<"explorer" | "git">("navigator_tab", "explorer")
+
+  const toggleNavigatorTab = () => {
+    setNavigatorTab((prev) => (prev === "git" ? "explorer" : "git"))
+  }
+
+  const inspector = useInspector()
+
+  const ctx: CommandContext = {
+    layout,
+    kv,
+    navigate,
+    returnTo: options.returnTo,
+    navigatorTab: () => navigatorTab(),
+    toggleNavigatorTab,
+    inspector,
+  }
+
+  // Build command list from groups
+  const commands = options.groups.flatMap((group) => {
+    const definitions = COMMAND_DEFINITIONS[group]
+    if (!definitions) {
+      console.error(`[CommandRegistry] Unknown command group: ${group}`)
+      return []
+    }
+    return definitions(ctx)
+  })
+
+  // Add any additional commands
+  if (options.additionalCommands) {
+    commands.push(...options.additionalCommands)
+  }
+
+  // Register all commands at once
+  command.register(() => commands)
+
+  return {
+    // Expose context helpers for additional commands
+    layout,
+    kv,
+    navigate,
+    navigatorTab: () => navigatorTab(),
+    toggleNavigatorTab,
+    toggleNavigator: () => layout.togglePanel("explorer"),
+    toggleSidebar: () => layout.togglePanel("viewer"),
+  }
+}
+
+// Utility to prevent direct command registration outside the registry
+export function validateCommandRegistration(location: string): boolean {
+  const isValid = VALID_REGISTRATION_LOCATIONS.some((valid) => location.includes(valid))
+  if (!isValid) {
+    console.warn(
+      `[CommandRegistry] Commands should not be registered from ${location}. ` + `Use useCommandRegistry() instead.`,
+    )
+  }
+  return isValid
+}

package/src/cli/cmd/tui/routes/home.tsx

@@ -0,0 +1,198 @@
+import { Prompt, type PromptRef } from "@tui/component/prompt"
+import { type MouseEvent } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { batch, createEffect, createMemo, createSignal, Match, onMount, Show, Switch } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+import { useKeybind } from "@tui/context/keybind"
+import { Logo } from "../component/logo"
+import { Tips } from "../component/tips"
+import { Locale } from "@/util/locale"
+import { useSync } from "../context/sync"
+import { Toast, useToast } from "../ui/toast"
+import { useArgs } from "../context/args"
+import { useDirectory } from "../context/directory"
+import { useRouteData } from "@tui/context/route"
+import { usePromptRef } from "../context/prompt"
+import { Installation } from "@/installation"
+import { useKV } from "../context/kv"
+import { useCommandDialog } from "../component/dialog-command"
+import { ExplorerPanel } from "./session/panel-explorer"
+import { FileViewerPanel } from "./session/panel-viewer"
+import { DynamicLayout } from "@tui/component/dynamic-layout"
+import { useLayout } from "@tui/context/layout"
+import { useCommandRegistry } from "../hooks/use-command-registry"
+
+// TODO: what is the best way to do this?
+let once = false
+
+export function Home() {
+  const sync = useSync()
+  const kv = useKV()
+  const { theme } = useTheme()
+  const route = useRouteData("home")
+  const promptRef = usePromptRef()
+  const command = useCommandDialog()
+  const toast = useToast()
+  const layout = useLayout()
+  const [selectedFilePath, setSelectedFilePath] = createSignal<string | null>(null)
+  const mcp = createMemo(() => Object.keys(sync.data.mcp).length > 0)
+  const mcpError = createMemo(() => {
+    return Object.values(sync.data.mcp).some((x) => x.status === "failed")
+  })
+
+  const connectedMcpCount = createMemo(() => {
+    return Object.values(sync.data.mcp).filter((x) => x.status === "connected").length
+  })
+
+  const isFirstTimeUser = createMemo(() => sync.data.session.length === 0)
+  const tipsHidden = createMemo(() => kv.get("tips_hidden", false))
+  const showTips = createMemo(() => {
+    // Don't show tips for first-time users
+    if (isFirstTimeUser()) return false
+    return !tipsHidden()
+  })
+
+  const dimensions = useTerminalDimensions()
+
+  const closeNavigator = () => {
+    // Just focus the prompt, layout controls visibility now
+    promptRef.current?.focus()
+  }
+
+  // Register commands through centralized registry
+  useCommandRegistry({
+    groups: ["layout", "system"], // Include layout and system commands
+    returnTo: { type: "home" },
+    additionalCommands: [
+      {
+        title: tipsHidden() ? "Show tips" : "Hide tips",
+        value: "tips.toggle",
+        keybind: "tips_toggle",
+        category: "System",
+        onSelect: (dialog) => {
+          kv.set("tips_hidden", !tipsHidden())
+          dialog.clear()
+        },
+      },
+    ],
+  })
+
+  const Hint = (
+    <Show when={connectedMcpCount() > 0}>
+      <box flexShrink={0} flexDirection="row" gap={1}>
+        <text fg={theme.text}>
+          <Switch>
+            <Match when={mcpError()}>
+              <span style={{ fg: theme.error }}>•</span> mcp errors{" "}
+              <span style={{ fg: theme.textMuted }}>ctrl+x s</span>
+            </Match>
+            <Match when={true}>
+              <span style={{ fg: theme.success }}>•</span>{" "}
+              {Locale.pluralize(connectedMcpCount(), "{} mcp server", "{} mcp servers")}
+            </Match>
+          </Switch>
+        </text>
+      </box>
+    </Show>
+  )
+
+  let prompt: PromptRef
+  const args = useArgs()
+  onMount(() => {
+    if (once) return
+    if (route.initialPrompt) {
+      prompt.set(route.initialPrompt)
+      once = true
+    } else if (args.prompt) {
+      prompt.set({ input: args.prompt, parts: [] })
+      once = true
+      prompt.submit()
+    }
+  })
+  const directory = useDirectory()
+
+  const keybind = useKeybind()
+
+  // Reactive panel widths that update when layout store changes
+  const explorerWidth = createMemo(() => {
+    const panel = layout.getPanelByType("explorer")
+    if (!panel?.visible) return 0
+    return Math.floor(dimensions().width * ((panel.width || 20) / 100))
+  })
+
+  const viewerWidth = createMemo(() => {
+    const panel = layout.getPanelByType("viewer")
+    if (!panel?.visible) return 0
+    return Math.floor(dimensions().width * ((panel.width || 30) / 100))
+  })
+
+  return (
+    <DynamicLayout
+      explorer={
+        <ExplorerPanel
+          width={explorerWidth()}
+          onSelect={(path, type) => {
+            if (type === "file") {
+              setSelectedFilePath(path)
+            }
+          }}
+        />
+      }
+      chat={
+        <box height="100%" flexDirection="column" onMouseUp={() => promptRef.current?.focus()}>
+          <box flexGrow={1} justifyContent="center" alignItems="center" paddingLeft={2} paddingRight={2} gap={1}>
+            <box height={3} />
+            <Logo />
+            <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1}>
+              <Prompt
+                ref={(r) => {
+                  prompt = r
+                  promptRef.set(r)
+                }}
+                hint={Hint}
+              />
+            </box>
+            <box height={3} width="100%" maxWidth={75} alignItems="center" paddingTop={2}>
+              <Show when={showTips()}>
+                <Tips />
+              </Show>
+            </box>
+            <Toast />
+          </box>
+          <box
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={2}
+            paddingRight={2}
+            flexDirection="row"
+            flexShrink={0}
+            gap={2}
+          >
+            <text fg={theme.textMuted}>{directory()}</text>
+            <box gap={1} flexDirection="row" flexShrink={0}>
+              <Show when={mcp()}>
+                <text fg={theme.text}>
+                  <Switch>
+                    <Match when={mcpError()}>
+                      <span style={{ fg: theme.error }}>⊙ </span>
+                    </Match>
+                    <Match when={true}>
+                      <span style={{ fg: connectedMcpCount() > 0 ? theme.success : theme.textMuted }}>⊙ </span>
+                    </Match>
+                  </Switch>
+                  {connectedMcpCount()} MCP
+                </text>
+                <text fg={theme.textMuted}>/status</text>
+              </Show>
+            </box>
+            <box flexGrow={1} />
+            <box flexShrink={0}>
+              <text fg={theme.textMuted}>{Installation.VERSION}</text>
+            </box>
+          </box>
+        </box>
+      }
+      viewer={<FileViewerPanel width={viewerWidth()} filePath={selectedFilePath()} />}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-fork-from-timeline.tsx

@@ -0,0 +1,64 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@jonsoc/sdk/v2"
+import { Locale } from "@/util/locale"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { useDialog } from "../../ui/dialog"
+import type { PromptInfo } from "@tui/component/prompt/history"
+
+export function DialogForkFromTimeline(props: { sessionID: string; onMove: (messageID: string) => void }) {
+  const sync = useSync()
+  const dialog = useDialog()
+  const sdk = useSDK()
+  const route = useRoute()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: async (dialog) => {
+          const forked = await sdk.client.session.fork({
+            sessionID: props.sessionID,
+            messageID: message.id,
+          })
+          const parts = sync.data.part[message.id] ?? []
+          const initialPrompt = parts.reduce(
+            (agg, part) => {
+              if (part.type === "text") {
+                if (!part.synthetic) agg.input += part.text
+              }
+              if (part.type === "file") agg.parts.push(part)
+              return agg
+            },
+            { input: "", parts: [] as PromptInfo["parts"] },
+          )
+          route.navigate({
+            sessionID: forked.data!.id,
+            type: "session",
+            initialPrompt,
+          })
+          dialog.clear()
+        },
+      })
+    }
+    result.reverse()
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Fork from message" options={options()} />
+}

package/src/cli/cmd/tui/routes/session/dialog-message.tsx

@@ -0,0 +1,109 @@
+import { createMemo } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useSDK } from "@tui/context/sdk"
+import { useRoute } from "@tui/context/route"
+import { Clipboard } from "@tui/util/clipboard"
+import type { PromptInfo } from "@tui/component/prompt/history"
+
+export function DialogMessage(props: {
+  messageID: string
+  sessionID: string
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const sdk = useSDK()
+  const message = createMemo(() => sync.data.message[props.sessionID]?.find((x) => x.id === props.messageID))
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Message Actions"
+      options={[
+        {
+          title: "Revert",
+          value: "session.revert",
+          description: "undo messages and file changes",
+          onSelect: (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            sdk.client.session.revert({
+              sessionID: props.sessionID,
+              messageID: msg.id,
+            })
+
+            if (props.setPrompt) {
+              const parts = sync.data.part[msg.id]
+              const promptInfo = parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(part)
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+              props.setPrompt(promptInfo)
+            }
+
+            dialog.clear()
+          },
+        },
+        {
+          title: "Copy",
+          value: "message.copy",
+          description: "message text to clipboard",
+          onSelect: async (dialog) => {
+            const msg = message()
+            if (!msg) return
+
+            const parts = sync.data.part[msg.id]
+            const text = parts.reduce((agg, part) => {
+              if (part.type === "text" && !part.synthetic) {
+                agg += part.text
+              }
+              return agg
+            }, "")
+
+            await Clipboard.copy(text)
+            dialog.clear()
+          },
+        },
+        {
+          title: "Fork",
+          value: "session.fork",
+          description: "create a new session",
+          onSelect: async (dialog) => {
+            const result = await sdk.client.session.fork({
+              sessionID: props.sessionID,
+              messageID: props.messageID,
+            })
+            const initialPrompt = (() => {
+              const msg = message()
+              if (!msg) return undefined
+              const parts = sync.data.part[msg.id]
+              return parts.reduce(
+                (agg, part) => {
+                  if (part.type === "text") {
+                    if (!part.synthetic) agg.input += part.text
+                  }
+                  if (part.type === "file") agg.parts.push(part)
+                  return agg
+                },
+                { input: "", parts: [] as PromptInfo["parts"] },
+              )
+            })()
+            route.navigate({
+              sessionID: result.data!.id,
+              type: "session",
+              initialPrompt,
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-subagent.tsx

@@ -0,0 +1,26 @@
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useRoute } from "@tui/context/route"
+
+export function DialogSubagent(props: { sessionID: string }) {
+  const route = useRoute()
+
+  return (
+    <DialogSelect
+      title="Subagent Actions"
+      options={[
+        {
+          title: "Open",
+          value: "subagent.view",
+          description: "the subagent's session",
+          onSelect: (dialog) => {
+            route.navigate({
+              type: "session",
+              sessionID: props.sessionID,
+            })
+            dialog.clear()
+          },
+        },
+      ]}
+    />
+  )
+}

package/src/cli/cmd/tui/routes/session/dialog-timeline.tsx

@@ -0,0 +1,47 @@
+import { createMemo, onMount } from "solid-js"
+import { useSync } from "@tui/context/sync"
+import { DialogSelect, type DialogSelectOption } from "@tui/ui/dialog-select"
+import type { TextPart } from "@jonsoc/sdk/v2"
+import { Locale } from "@/util/locale"
+import { DialogMessage } from "./dialog-message"
+import { useDialog } from "../../ui/dialog"
+import type { PromptInfo } from "../../component/prompt/history"
+
+export function DialogTimeline(props: {
+  sessionID: string
+  onMove: (messageID: string) => void
+  setPrompt?: (prompt: PromptInfo) => void
+}) {
+  const sync = useSync()
+  const dialog = useDialog()
+
+  onMount(() => {
+    dialog.setSize("large")
+  })
+
+  const options = createMemo((): DialogSelectOption<string>[] => {
+    const messages = sync.data.message[props.sessionID] ?? []
+    const result = [] as DialogSelectOption<string>[]
+    for (const message of messages) {
+      if (message.role !== "user") continue
+      const part = (sync.data.part[message.id] ?? []).find(
+        (x) => x.type === "text" && !x.synthetic && !x.ignored,
+      ) as TextPart
+      if (!part) continue
+      result.push({
+        title: part.text.replace(/\n/g, " "),
+        value: message.id,
+        footer: Locale.time(message.time.created),
+        onSelect: (dialog) => {
+          dialog.replace(() => (
+            <DialogMessage messageID={message.id} sessionID={props.sessionID} setPrompt={props.setPrompt} />
+          ))
+        },
+      })
+    }
+    result.reverse()
+    return result
+  })
+
+  return <DialogSelect onMove={(option) => props.onMove(option.value)} title="Timeline" options={options()} />
+}