jonsoc 1.1.43

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

@@ -0,0 +1,39 @@
+import { cmd } from "../cmd"
+import { tui } from "./app"
+
+export const AttachCommand = cmd({
+  command: "attach <url>",
+  describe: "attach to a running jonsoc server",
+  builder: (yargs) =>
+    yargs
+      .positional("url", {
+        type: "string",
+        describe: "http://localhost:4096",
+        demandOption: true,
+      })
+      .option("dir", {
+        type: "string",
+        description: "directory to run in",
+      })
+      .option("session", {
+        alias: ["s"],
+        type: "string",
+        describe: "session id to continue",
+      }),
+  handler: async (args) => {
+    let directory = args.dir
+    if (args.dir) {
+      try {
+        process.chdir(args.dir)
+        directory = process.cwd()
+      } catch {
+        // If the directory doesn't exist locally (remote attach), pass it through.
+      }
+    }
+    await tui({
+      url: args.url,
+      args: { sessionID: args.session },
+      directory,
+    })
+  },
+})

package/src/cli/cmd/tui/component/border.tsx

@@ -0,0 +1,21 @@
+export const EmptyBorder = {
+  topLeft: "",
+  bottomLeft: "",
+  vertical: "",
+  topRight: "",
+  bottomRight: "",
+  horizontal: " ",
+  bottomT: "",
+  topT: "",
+  cross: "",
+  leftT: "",
+  rightT: "",
+}
+
+export const SplitBorder = {
+  border: ["left" as const, "right" as const],
+  customBorderChars: {
+    ...EmptyBorder,
+    vertical: "┃",
+  },
+}

package/src/cli/cmd/tui/component/dialog-agent.tsx

@@ -0,0 +1,31 @@
+import { createMemo } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { DialogSelect } from "@tui/ui/dialog-select"
+import { useDialog } from "@tui/ui/dialog"
+
+export function DialogAgent() {
+  const local = useLocal()
+  const dialog = useDialog()
+
+  const options = createMemo(() =>
+    local.agent.list().map((item) => {
+      return {
+        value: item.name,
+        title: item.name,
+        description: item.native ? "native" : item.description,
+      }
+    }),
+  )
+
+  return (
+    <DialogSelect
+      title="Select agent"
+      current={local.agent.current().name}
+      options={options()}
+      onSelect={(option) => {
+        local.agent.set(option.value)
+        dialog.clear()
+      }}
+    />
+  )
+}

package/src/cli/cmd/tui/component/dialog-command.tsx

@@ -0,0 +1,162 @@
+import { useDialog } from "@tui/ui/dialog"
+import { DialogSelect, type DialogSelectOption, type DialogSelectRef } from "@tui/ui/dialog-select"
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+  type Accessor,
+  type ParentProps,
+} from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useKeybind } from "@tui/context/keybind"
+import type { KeybindsConfig } from "@jonsoc/sdk/v2"
+
+type Context = ReturnType<typeof init>
+const ctx = createContext<Context>()
+
+export type Slash = {
+  name: string
+  aliases?: string[]
+}
+
+export type CommandOption = DialogSelectOption<string> & {
+  keybind?: keyof KeybindsConfig
+  suggested?: boolean
+  slash?: Slash
+  hidden?: boolean
+  enabled?: boolean
+}
+
+function init() {
+  const [registrations, setRegistrations] = createSignal<Accessor<CommandOption[]>[]>([])
+  const [suspendCount, setSuspendCount] = createSignal(0)
+  const dialog = useDialog()
+  const keybind = useKeybind()
+
+  const entries = createMemo(() => {
+    const all = registrations().flatMap((x) => x())
+    return all.map((x) => ({
+      ...x,
+      footer: x.keybind ? keybind.print(x.keybind) : undefined,
+    }))
+  })
+
+  const isEnabled = (option: CommandOption) => option.enabled !== false
+  const isVisible = (option: CommandOption) => isEnabled(option) && !option.hidden
+
+  const visibleOptions = createMemo(() => entries().filter((option) => isVisible(option)))
+  const suggestedOptions = createMemo(() =>
+    visibleOptions()
+      .filter((option) => option.suggested)
+      .map((option) => ({
+        ...option,
+        value: `suggested:${option.value}`,
+        category: "Suggested",
+      })),
+  )
+  const suspended = () => suspendCount() > 0
+
+  useKeyboard((evt) => {
+    if (suspended()) return
+    if (dialog.stack.length > 0) return
+    for (const option of entries()) {
+      if (!isEnabled(option)) continue
+      if (option.keybind && keybind.match(option.keybind, evt)) {
+        evt.preventDefault()
+        option.onSelect?.(dialog)
+        return
+      }
+    }
+  })
+
+  const isOpen = () => dialog.stack.length > 0
+
+  const result = {
+    trigger(name: string) {
+      for (const option of entries()) {
+        if (option.value === name) {
+          if (!isEnabled(option)) return
+          option.onSelect?.(dialog)
+          return
+        }
+      }
+    },
+    slashes() {
+      return visibleOptions().flatMap((option) => {
+        const slash = option.slash
+        if (!slash) return []
+        return [
+          {
+            display: "/" + slash.name,
+            description: option.description ?? option.title,
+            aliases: slash.aliases?.map((alias) => "/" + alias),
+            onSelect: () => result.trigger(option.value),
+          },
+        ]
+      })
+    },
+    keybinds(enabled: boolean) {
+      setSuspendCount((count) => count + (enabled ? -1 : 1))
+    },
+    suspended,
+    isOpen,
+    show() {
+      dialog.replace(() => <DialogCommand options={visibleOptions()} suggestedOptions={suggestedOptions()} />)
+    },
+    register(cb: () => CommandOption[], _source?: string) {
+      // Warn if commands are registered outside the registry system
+      if (!_source || !_source.includes("use-command-registry")) {
+        const stack = new Error().stack
+        const caller = stack?.split("\n")[3] || "unknown"
+        console.warn(
+          `[CommandDialog] Direct command registration detected from: ${caller}\n` +
+            `Consider using useCommandRegistry() for better command organization.`,
+        )
+      }
+      const results = createMemo(cb)
+      setRegistrations((arr) => [results, ...arr])
+      onCleanup(() => {
+        setRegistrations((arr) => arr.filter((x) => x !== results))
+      })
+    },
+  }
+  return result
+}
+
+export function useCommandDialog() {
+  const value = useContext(ctx)
+  if (!value) {
+    throw new Error("useCommandDialog must be used within a CommandProvider")
+  }
+  return value
+}
+
+export function CommandProvider(props: ParentProps) {
+  const value = init()
+  const dialog = useDialog()
+  const keybind = useKeybind()
+
+  useKeyboard((evt) => {
+    if (value.suspended()) return
+    if (dialog.stack.length > 0) return
+    if (evt.defaultPrevented) return
+    if (keybind.match("command_list", evt)) {
+      evt.preventDefault()
+      value.show()
+      return
+    }
+  })
+
+  return <ctx.Provider value={value}>{props.children}</ctx.Provider>
+}
+
+function DialogCommand(props: { options: CommandOption[]; suggestedOptions: CommandOption[] }) {
+  let ref: DialogSelectRef<string>
+  const list = () => {
+    if (ref?.filter) return props.options
+    return [...props.suggestedOptions, ...props.options]
+  }
+  return <DialogSelect ref={(r) => (ref = r)} title="Commands" options={list()} />
+}

package/src/cli/cmd/tui/component/dialog-error-log.tsx

@@ -0,0 +1,155 @@
+import { useDialog } from "@tui/ui/dialog"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { useTheme } from "@tui/context/theme"
+import { useErrorLog } from "@tui/context/error-log"
+import { Clipboard } from "@tui/util/clipboard"
+import { useToast } from "@tui/ui/toast"
+import { TextAttributes } from "@opentui/core"
+import { For, Show, createSignal } from "solid-js"
+import { Locale } from "@/util/locale"
+import { useExit, EXIT_CODE_RESTART } from "../context/exit"
+
+export function DialogErrorLog() {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const errorLog = useErrorLog()
+  const toast = useToast()
+  const dimensions = useTerminalDimensions()
+  const exit = useExit()
+  const [copiedId, setCopiedId] = createSignal<string | null>(null)
+
+  useKeyboard((evt) => {
+    if (evt.name === "escape" || evt.name === "q") {
+      dialog.clear()
+    }
+    if (evt.name === "c" && evt.ctrl) {
+      copyAllErrors()
+    }
+  })
+
+  const copyError = async (error: {
+    id: string
+    message: string
+    stack?: string
+    source?: string
+    timestamp: number
+  }) => {
+    const text = formatError(error)
+    await Clipboard.copy(text)
+    setCopiedId(error.id)
+    toast.show({ message: "Error copied to clipboard", variant: "info", duration: 2000 })
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  const copyAllErrors = async () => {
+    if (errorLog.errors.length === 0) return
+    const text = errorLog.errors.map(formatError).join("\n\n---\n\n")
+    await Clipboard.copy(text)
+    toast.show({ message: "All errors copied to clipboard", variant: "info", duration: 2000 })
+  }
+
+  const clearErrors = () => {
+    errorLog.clear()
+    toast.show({ message: "Error log cleared", variant: "info", duration: 2000 })
+  }
+
+  return (
+    <box flexDirection="column" height={dimensions().height - 4}>
+      <box flexDirection="row" justifyContent="flex-end" alignItems="center" paddingBottom={1} gap={2}>
+        <box backgroundColor={theme.error} paddingLeft={2} paddingRight={2} paddingTop={1} onMouseUp={() => exit(undefined, EXIT_CODE_RESTART)}>
+          <text fg={theme.selectedListItemText}>Restart</text>
+        </box>
+        <Show when={errorLog.count > 0}>
+          <box
+            backgroundColor={theme.primary}
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            onMouseUp={copyAllErrors}
+          >
+            <text fg={theme.selectedListItemText}>Copy All (ctrl+c)</text>
+          </box>
+          <box backgroundColor={theme.error} paddingLeft={2} paddingRight={2} paddingTop={1} onMouseUp={clearErrors}>
+            <text fg={theme.selectedListItemText}>Clear</text>
+          </box>
+        </Show>
+        <box
+          backgroundColor={theme.backgroundPanel}
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+          onMouseUp={() => dialog.clear()}
+        >
+          <text fg={theme.text}>Close (esc)</text>
+        </box>
+      </box>
+
+      <box paddingBottom={1}>
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Error Log ({errorLog.count})
+        </text>
+      </box>
+
+      <Show
+        when={errorLog.count > 0}
+        fallback={
+          <box flexGrow={1} justifyContent="center" alignItems="center">
+            <text fg={theme.textMuted}>No errors logged</text>
+          </box>
+        }
+      >
+        <box flexDirection="column" flexGrow={1} gap={1} overflow="scroll">
+          <For each={errorLog.errors}>
+            {(error) => (
+              <box
+                flexDirection="column"
+                backgroundColor={theme.backgroundPanel}
+                border={["left"]}
+                borderColor={theme.error}
+                padding={1}
+                gap={1}
+              >
+                <box flexDirection="row" justifyContent="space-between" alignItems="center">
+                  <box flexDirection="row" gap={1}>
+                    <Show when={error.source}>
+                      <text fg={theme.textMuted}>[{error.source}]</text>
+                    </Show>
+                    <text fg={theme.textMuted}>{Locale.time(error.timestamp)}</text>
+                  </box>
+                  <box
+                    backgroundColor={copiedId() === error.id ? theme.success : theme.primary}
+                    paddingLeft={2}
+                    paddingRight={2}
+                    onMouseUp={() => copyError(error)}
+                  >
+                    <text fg={theme.selectedListItemText}>{copiedId() === error.id ? "Copied!" : "Copy"}</text>
+                  </box>
+                </box>
+                <text fg={theme.error} wrapMode="word">
+                  {error.message}
+                </text>
+                <Show when={error.stack}>
+                  <box border={["top"]} borderColor={theme.background} paddingTop={1}>
+                    <text fg={theme.textMuted} wrapMode="word">
+                      {error.stack}
+                    </text>
+                  </box>
+                </Show>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
+    </box>
+  )
+}
+
+function formatError(error: { message: string; stack?: string; source?: string; timestamp: number }): string {
+  const lines = [`[${new Date(error.timestamp).toISOString()}]${error.source ? ` [${error.source}]` : ""}`]
+  lines.push(error.message)
+  if (error.stack) {
+    lines.push("")
+    lines.push(error.stack)
+  }
+  return lines.join("\n")
+}

package/src/cli/cmd/tui/component/dialog-mcp.tsx

@@ -0,0 +1,86 @@
+import { createMemo, createSignal } from "solid-js"
+import { useLocal } from "@tui/context/local"
+import { useSync } from "@tui/context/sync"
+import { map, pipe, entries, sortBy } from "remeda"
+import { DialogSelect, type DialogSelectRef, type DialogSelectOption } from "@tui/ui/dialog-select"
+import { useTheme } from "../context/theme"
+import { Keybind } from "@/util/keybind"
+import { TextAttributes } from "@opentui/core"
+import { useSDK } from "@tui/context/sdk"
+
+function Status(props: { enabled: boolean; loading: boolean }) {
+  const { theme } = useTheme()
+  if (props.loading) {
+    return <span style={{ fg: theme.textMuted }}>⋯ Loading</span>
+  }
+  if (props.enabled) {
+    return <span style={{ fg: theme.success, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
+  }
+  return <span style={{ fg: theme.textMuted }}>○ Disabled</span>
+}
+
+export function DialogMcp() {
+  const local = useLocal()
+  const sync = useSync()
+  const sdk = useSDK()
+  const [, setRef] = createSignal<DialogSelectRef<unknown>>()
+  const [loading, setLoading] = createSignal<string | null>(null)
+
+  const options = createMemo(() => {
+    // Track sync data and loading state to trigger re-render when they change
+    const mcpData = sync.data.mcp
+    const loadingMcp = loading()
+
+    return pipe(
+      mcpData ?? {},
+      entries(),
+      sortBy(([name]) => name),
+      map(([name, status]) => ({
+        value: name,
+        title: name,
+        description: status.status === "failed" ? "failed" : status.status,
+        footer: <Status enabled={local.mcp.isEnabled(name)} loading={loadingMcp === name} />,
+        category: undefined,
+      })),
+    )
+  })
+
+  const keybinds = createMemo(() => [
+    {
+      keybind: Keybind.parse("space")[0],
+      title: "toggle",
+      onTrigger: async (option: DialogSelectOption<string>) => {
+        // Prevent toggling while an operation is already in progress
+        if (loading() !== null) return
+
+        setLoading(option.value)
+        try {
+          await local.mcp.toggle(option.value)
+          // Refresh MCP status from server
+          const status = await sdk.client.mcp.status()
+          if (status.data) {
+            sync.set("mcp", status.data)
+          } else {
+            console.error("Failed to refresh MCP status: no data returned")
+          }
+        } catch (error) {
+          console.error("Failed to toggle MCP:", error)
+        } finally {
+          setLoading(null)
+        }
+      },
+    },
+  ])
+
+  return (
+    <DialogSelect
+      ref={setRef}
+      title="MCPs"
+      options={options()}
+      keybind={keybinds()}
+      onSelect={(option) => {
+        // Don't close on select, only on escape
+      }}
+    />
+  )
+}