@neurocode-ai/tui 1.18.8

package/src/component/dialog-workspace-file-changes.tsx

@@ -0,0 +1,144 @@
+import { TextAttributes } from "@opentui/core"
+import { useKeyboard } from "@opentui/solid"
+import type { VcsFileStatus } from "@neurocode-ai/sdk/v2"
+import { createMemo, For } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Locale } from "../util/locale"
+import { useTheme } from "../context/theme"
+import { useTuiConfig } from "../config"
+import { useDialog, type DialogContext } from "../ui/dialog"
+import { getScrollAcceleration } from "../util/scroll"
+
+const options = ["no", "yes"] as const
+
+export type WorkspaceFileChangesChoice = (typeof options)[number]
+
+function statusLabel(status: VcsFileStatus["status"]) {
+  if (status === "added") return "A"
+  if (status === "deleted") return "D"
+  return "M"
+}
+
+function changeCountWidth(file: VcsFileStatus) {
+  // The "plus 2" is for spaces
+  return `${file.additions ? `+${file.additions}` : ""}${file.deletions ? ` -${file.deletions}` : ""}`.length + 2
+}
+
+export function DialogWorkspaceFileChanges(props: {
+  files: VcsFileStatus[]
+  onSelect: (choice: WorkspaceFileChangesChoice) => void
+  title?: string
+  message?: string
+}) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const tuiConfig = useTuiConfig()
+  const scrollAcceleration = createMemo(() => getScrollAcceleration(tuiConfig))
+  const [store, setStore] = createStore({ active: "yes" as WorkspaceFileChangesChoice })
+  const height = createMemo(() => Math.min(props.files.length, 8))
+  const fileNameWidth = createMemo(() => 48 - Math.max(Math.max(7, ...props.files.map(changeCountWidth)) - 7, 0))
+
+  function confirm() {
+    props.onSelect(store.active)
+    dialog.clear()
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "return") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      confirm()
+      return
+    }
+    if (evt.name === "left") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      const index = options.indexOf(store.active)
+      setStore("active", options[Math.max(index - 1, 0)])
+      return
+    }
+    if (evt.name === "right") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      const index = options.indexOf(store.active)
+      setStore("active", options[Math.min(index + 1, options.length - 1)])
+    }
+  })
+
+  return (
+    <box gap={1}>
+      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          {props.title ?? "File Changes Found"}
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <box paddingLeft={2} paddingRight={2}>
+        <text fg={theme.textMuted} wrapMode="word">
+          {props.message ?? "Do you want to move these changes with the session?"}
+        </text>
+      </box>
+      <scrollbox
+        height={height()}
+        backgroundColor={theme.backgroundElement}
+        scrollbarOptions={{ visible: false }}
+        scrollAcceleration={scrollAcceleration()}
+      >
+        <For each={props.files}>
+          {(item) => (
+            <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
+              <box flexDirection="row" minWidth={0} flexShrink={1}>
+                <box width={2} flexShrink={0}>
+                  <text fg={theme.textMuted}>{statusLabel(item.status)}</text>
+                </box>
+                <text fg={theme.textMuted} wrapMode="none">
+                  {Locale.truncateLeft(item.file, fileNameWidth())}
+                </text>
+              </box>
+              <box flexDirection="row" gap={1} minWidth={7} flexShrink={0} justifyContent="flex-end">
+                <text>
+                  {" "}
+                  {item.additions ? <span style={{ fg: theme.diffAdded }}>+{item.additions}</span> : null}
+                  {item.deletions ? <span style={{ fg: theme.diffRemoved }}> -{item.deletions}</span> : null}
+                </text>
+              </box>
+            </box>
+          )}
+        </For>
+      </scrollbox>
+      <box flexDirection="row" justifyContent="flex-end" paddingLeft={2} paddingRight={2} paddingBottom={1}>
+        <For each={options}>
+          {(item) => (
+            <box
+              paddingLeft={2}
+              paddingRight={2}
+              backgroundColor={item === store.active ? theme.primary : undefined}
+              onMouseUp={() => {
+                setStore("active", item)
+                props.onSelect(item)
+                dialog.clear()
+              }}
+            >
+              <text fg={item === store.active ? theme.selectedListItemText : theme.textMuted}>{item}</text>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}
+
+DialogWorkspaceFileChanges.show = (
+  dialog: DialogContext,
+  files: VcsFileStatus[],
+  options?: { title?: string; message?: string },
+) => {
+  return new Promise<WorkspaceFileChangesChoice | undefined>((resolve) => {
+    dialog.replace(
+      () => <DialogWorkspaceFileChanges files={files} onSelect={resolve} {...options} />,
+      () => resolve(undefined),
+    )
+  })
+}

package/src/component/dialog-workspace-list.tsx

@@ -0,0 +1,112 @@
+import type { Workspace } from "@neurocode-ai/sdk/v2"
+import { useDialog } from "../ui/dialog"
+import { DialogSelect, type DialogSelectOption } from "../ui/dialog-select"
+import { useProject } from "../context/project"
+import { useRoute } from "../context/route"
+import { useSync } from "../context/sync"
+import { useTheme } from "../context/theme"
+import { createMemo, createSignal, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { errorMessage } from "../util/error"
+import { useSDK } from "../context/sdk"
+import { useToast } from "../ui/toast"
+
+type WorkspaceOption = { workspace: Workspace }
+
+export function DialogWorkspaceList() {
+  const dialog = useDialog()
+  const route = useRoute()
+  const sync = useSync()
+  const sdk = useSDK()
+  const toast = useToast()
+  const project = useProject()
+  const { theme } = useTheme()
+  const [deleting, setDeleting] = createSignal<string>()
+  const [removing, setRemoving] = createSignal<string>()
+  const [expanded, setExpanded] = createStore<Record<string, boolean>>({})
+
+  const current = createMemo(() => {
+    if (route.data.type === "session") return sync.session.get(route.data.sessionID)?.workspaceID
+    return project.workspace.current()
+  })
+
+  const options = createMemo<DialogSelectOption<WorkspaceOption>[]>(() =>
+    project.workspace
+      .list()
+      .toSorted((a, b) => a.name.localeCompare(b.name))
+      .map((workspace) => {
+        const status = project.workspace.status(workspace.id)
+        return {
+          title:
+            removing() === workspace.id
+              ? "Deleting..."
+              : deleting() === workspace.id
+                ? `Delete ${workspace.name}? Press delete again`
+                : workspace.name,
+          value: { workspace },
+          footer: workspace.type,
+          details: expanded[workspace.id] && workspace.directory ? [workspace.directory] : undefined,
+          gutter: () => <text fg={status === "connected" ? theme.success : theme.error}>●</text>,
+        }
+      }),
+  )
+
+  function showDetails(workspace: Workspace) {
+    setExpanded(workspace.id, (open) => !open)
+  }
+
+  async function remove(workspace: Workspace) {
+    if (removing()) return
+    if (deleting() !== workspace.id) {
+      setDeleting(workspace.id)
+      return
+    }
+
+    setDeleting(undefined)
+    setRemoving(workspace.id)
+    const result = await sdk.client.experimental.workspace.remove({ id: workspace.id }).catch((err) => ({
+      error: err,
+    }))
+    if (result?.error) {
+      setRemoving(undefined)
+      toast.show({
+        variant: "error",
+        title: "Failed to delete workspace",
+        message: errorMessage(result.error),
+      })
+      return
+    }
+
+    if (current() === workspace.id) {
+      project.workspace.set(undefined)
+      route.navigate({ type: "home" })
+    }
+    await project.workspace.sync()
+    await sync.bootstrap({ fatal: false }).catch(() => undefined)
+    setRemoving(undefined)
+  }
+
+  onMount(() => {
+    dialog.setSize("large")
+    void sdk.client.experimental.workspace.syncList().catch(() => undefined)
+    void project.workspace.sync()
+  })
+
+  return (
+    <DialogSelect
+      title="Workspaces"
+      options={options()}
+      onMove={(option) => {
+        setDeleting(undefined)
+      }}
+      onSelect={(option) => showDetails(option.value.workspace)}
+      actions={[
+        {
+          command: "session.delete",
+          title: "delete",
+          onTrigger: (option) => void remove(option.value.workspace),
+        },
+      ]}
+    />
+  )
+}

package/src/component/dialog-workspace-unavailable.tsx

@@ -0,0 +1,69 @@
+import { TextAttributes } from "@opentui/core"
+import { createStore } from "solid-js/store"
+import { For } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useDialog } from "../ui/dialog"
+import { useBindings } from "../keymap"
+
+export function DialogWorkspaceUnavailable(props: { onRestore?: () => boolean | void | Promise<boolean | void> }) {
+  const dialog = useDialog()
+  const { theme } = useTheme()
+  const [store, setStore] = createStore({
+    active: "restore" as "cancel" | "restore",
+  })
+
+  const options = ["cancel", "restore"] as const
+
+  async function confirm() {
+    if (store.active === "cancel") {
+      dialog.clear()
+      return
+    }
+    const result = await props.onRestore?.()
+    if (result === false) return
+  }
+
+  useBindings(() => ({
+    bindings: [
+      { key: "return", desc: "Confirm workspace option", group: "Dialog", cmd: () => void confirm() },
+      { key: "left", desc: "Cancel workspace restore", group: "Dialog", cmd: () => setStore("active", "cancel") },
+      { key: "right", desc: "Restore workspace", group: "Dialog", cmd: () => setStore("active", "restore") },
+    ],
+  }))
+
+  return (
+    <box paddingLeft={2} paddingRight={2} gap={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <text attributes={TextAttributes.BOLD} fg={theme.text}>
+          Workspace Unavailable
+        </text>
+        <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
+          esc
+        </text>
+      </box>
+      <text fg={theme.textMuted} wrapMode="word">
+        This session is attached to a workspace that is no longer available.
+      </text>
+      <text fg={theme.textMuted} wrapMode="word">
+        Would you like to restore this session into a new workspace?
+      </text>
+      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1} gap={1}>
+        <For each={options}>
+          {(item) => (
+            <box
+              paddingLeft={2}
+              paddingRight={2}
+              backgroundColor={item === store.active ? theme.primary : undefined}
+              onMouseUp={() => {
+                setStore("active", item)
+                void confirm()
+              }}
+            >
+              <text fg={item === store.active ? theme.selectedListItemText : theme.textMuted}>{item}</text>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/component/error-component.tsx

@@ -0,0 +1,240 @@
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core"
+import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
+import { createSignal, For, Show } from "solid-js"
+import { getScrollAcceleration } from "../util/scroll"
+import { useClipboard } from "../context/clipboard"
+import { InstallationVersion } from "@neurocode-ai/core/installation/version"
+import { useExit } from "../context/exit"
+import { describeOS, describeTerminal } from "../util/system"
+
+export function ErrorComponent(props: { error: Error; reset: () => void; mode?: "dark" | "light" }) {
+  const term = useTerminalDimensions()
+  const exit = useExit()
+  const clipboard = useClipboard()
+  const [copied, setCopied] = createSignal(false)
+
+  // Safe fallback palette per mode (mirrors theme/assets/opencode.json) since the
+  // theme context may be the thing that crashed.
+  const isLight = props.mode === "light"
+  const colors = isLight
+    ? {
+        bg: "#ffffff",
+        element: "#f5f5f5",
+        borderSubtle: "#d4d4d4",
+        text: "#1a1a1a",
+        muted: "#8a8a8a",
+        primary: "#3b7dd8",
+        onPrimary: "#ffffff",
+        error: "#d1383d",
+        success: "#3d9a57",
+      }
+    : {
+        bg: "#0a0a0a",
+        element: "#1e1e1e",
+        borderSubtle: "#3c3c3c",
+        text: "#eeeeee",
+        muted: "#808080",
+        primary: "#fab283",
+        onPrimary: "#0a0a0a",
+        error: "#e06c75",
+        success: "#7fd88f",
+      }
+
+  const message = props.error.message || "An unknown error occurred."
+  const stack = props.error.stack || "No stack trace available."
+  const issueURL = buildIssueURL(message, stack)
+
+  const copyReport = () => {
+    void clipboard.write?.(issueURL.toString()).then(() => setCopied(true))
+  }
+
+  const actions = [
+    { key: "c", label: () => (copied() ? "✓ Copied" : "Copy report"), copy: true, onUse: copyReport },
+    { key: "r", label: () => "Restart", onUse: props.reset },
+    { key: "q", label: () => "Quit", onUse: () => exit() },
+  ]
+  const [selected, setSelected] = createSignal(0)
+  const move = (delta: number) => setSelected((prev) => (prev + delta + actions.length) % actions.length)
+  let scroll: ScrollBoxRenderable | undefined
+
+  useKeyboard((evt) => {
+    if (evt.ctrl && evt.name === "c") return exit()
+    if (evt.name === "return") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      return actions[selected()].onUse()
+    }
+    if (evt.name === "left") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      return move(-1)
+    }
+    if (evt.name === "right") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      return move(1)
+    }
+    if (evt.name === "tab") {
+      evt.preventDefault()
+      evt.stopPropagation()
+      return move(evt.shift ? -1 : 1)
+    }
+    // Vertical keys scroll the stack trace; buttons navigate horizontally.
+    if (evt.name === "up") return scroll?.scrollBy(-1)
+    if (evt.name === "down") return scroll?.scrollBy(1)
+    if (evt.name === "pageup" && scroll) return scroll.scrollBy(-scroll.height)
+    if (evt.name === "pagedown" && scroll) return scroll.scrollBy(scroll.height)
+    if (evt.name === "home" && scroll) return scroll.scrollTo(0)
+    if (evt.name === "end" && scroll) return scroll.scrollTo(scroll.scrollHeight)
+    if (evt.name === "q") return exit()
+    if (evt.name === "c") return copyReport()
+    if (evt.name === "r") return props.reset()
+  })
+
+  // Responsive thresholds.
+  const contentWidth = () => Math.min(84, Math.max(24, term().width - 4))
+  const showSubtext = () => term().height >= 18
+  const showFooter = () => term().height >= 20
+
+  return (
+    <box
+      width={term().width}
+      height={term().height}
+      backgroundColor={colors.bg}
+      flexDirection="column"
+      alignItems="center"
+    >
+      <box width={contentWidth()} flexGrow={1} flexDirection="column" paddingTop={1} paddingBottom={1} gap={1}>
+        {/* Headline */}
+        <box flexDirection="column" alignItems="center" flexShrink={0}>
+          <text attributes={TextAttributes.BOLD} fg={colors.text}>
+            opencode crashed
+          </text>
+          <Show when={showSubtext()}>
+            <text fg={colors.muted}>An unexpected error stopped the session.</text>
+          </Show>
+        </box>
+
+        {/* Error message panel */}
+        <box
+          flexShrink={0}
+          border
+          borderStyle="rounded"
+          borderColor={colors.error}
+          title=" Error "
+          titleColor={colors.error}
+          paddingLeft={2}
+          paddingRight={2}
+        >
+          <text fg={colors.text}>{message}</text>
+        </box>
+
+        {/* Actions */}
+        <box flexDirection="row" flexWrap="wrap" justifyContent="center" gap={2} rowGap={1} flexShrink={0}>
+          <For each={actions}>
+            {(action, index) => {
+              const isSelected = () => selected() === index()
+              const isCopied = () => action.copy && copied()
+              return (
+                <box flexDirection="column" alignItems="center" flexShrink={0}>
+                  <box
+                    onMouseDown={() => setSelected(index())}
+                    onMouseUp={() => action.onUse()}
+                    backgroundColor={isCopied() ? colors.success : isSelected() ? colors.primary : colors.element}
+                    minWidth={15}
+                    alignItems="center"
+                    paddingLeft={2}
+                    paddingRight={2}
+                  >
+                    <text
+                      attributes={TextAttributes.BOLD}
+                      fg={isCopied() || isSelected() ? colors.onPrimary : colors.text}
+                    >
+                      {action.label()}
+                    </text>
+                  </box>
+                  <text fg={isSelected() ? colors.primary : colors.muted}>{action.key}</text>
+                </box>
+              )
+            }}
+          </For>
+        </box>
+
+        {/* Stack trace */}
+        <box
+          flexGrow={1}
+          flexBasis={0}
+          minHeight={3}
+          border
+          borderStyle="rounded"
+          borderColor={colors.borderSubtle}
+          title=" Stack trace "
+          titleColor={colors.muted}
+          bottomTitle=" ↑↓ scroll "
+          bottomTitleAlignment="right"
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          <scrollbox
+            ref={(element: ScrollBoxRenderable) => (scroll = element)}
+            flexGrow={1}
+            scrollAcceleration={getScrollAcceleration()}
+          >
+            <text fg={colors.muted}>{stack}</text>
+          </scrollbox>
+        </box>
+
+        {/* Footer */}
+        <Show when={showFooter()}>
+          <box flexDirection="column" alignItems="center" flexShrink={0}>
+            <text fg={colors.muted}>
+              {copied()
+                ? "Report copied — paste it into a new GitHub issue."
+                : "Copy the report and open a GitHub issue to help us fix this."}
+            </text>
+            <text fg={colors.muted}>opencode {InstallationVersion}</text>
+          </box>
+        </Show>
+      </box>
+    </box>
+  )
+}
+
+function buildIssueURL(message: string, stack: string) {
+  // Field keys match the ids in .github/ISSUE_TEMPLATE/bug-report.yml so the issue
+  // form opens pre-filled. Populating os/terminal/reproduce keeps the report past
+  // the contributing-guidelines compliance check, which pushes for system info.
+  const url = new URL("https://github.com/anomalyco/opencode/issues/new?template=bug-report.yml")
+  url.searchParams.set("title", `TUI crash: ${message}`)
+  url.searchParams.set("opencode-version", InstallationVersion)
+  url.searchParams.set("os", describeOS())
+  url.searchParams.set("terminal", describeTerminal())
+  url.searchParams.set(
+    "reproduce",
+    "Reported automatically from the opencode crash screen. If you can, describe what you were doing when it crashed.",
+  )
+
+  // Budget the stack against the fully URL-encoded length (not the raw length) so
+  // the final link stays under GitHub's practical limit; flag truncation so a
+  // clipped trace is obvious. searchParams.set handles encoding without throwing,
+  // so measuring url.toString() is both correct and safe on any input.
+  const MAX_URL_LENGTH = 6000
+  const marker = "\n... (truncated)"
+  const head = `The opencode TUI crashed with an unexpected error.\n\n**Error:** ${message}\n\n**Stack trace:**\n`
+  const setBody = (body: string) => url.searchParams.set("description", head + "```\n" + body + "\n```")
+
+  setBody(stack)
+  if (url.toString().length <= MAX_URL_LENGTH) return url
+
+  // Largest raw stack prefix whose encoded URL (with the marker) still fits.
+  let lo = 0
+  let hi = stack.length
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2)
+    setBody(stack.slice(0, mid) + marker)
+    if (url.toString().length <= MAX_URL_LENGTH) lo = mid
+    else hi = mid - 1
+  }
+  setBody(stack.slice(0, lo) + marker)
+  return url
+}

package/src/component/logo.tsx

@@ -0,0 +1,61 @@
+import { RGBA, TextAttributes } from "@opentui/core"
+import { For, type JSX } from "solid-js"
+import { tint, useTheme } from "../context/theme"
+import { logo } from "../logo"
+
+export function Logo() {
+  const { theme } = useTheme()
+
+  const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
+    const shadow = tint(theme.background, fg, 0.25)
+    const attrs = bold ? TextAttributes.BOLD : undefined
+    return Array.from(line).map((char) => {
+      if (char === "_") {
+        return (
+          <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
+            {" "}
+          </text>
+        )
+      }
+      if (char === "^") {
+        return (
+          <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
+            ▀
+          </text>
+        )
+      }
+      if (char === "~") {
+        return (
+          <text fg={shadow} attributes={attrs} selectable={false}>
+            ▀
+          </text>
+        )
+      }
+      if (char === ",") {
+        return (
+          <text fg={shadow} attributes={attrs} selectable={false}>
+            ▄
+          </text>
+        )
+      }
+      return (
+        <text fg={fg} attributes={attrs} selectable={false}>
+          {char}
+        </text>
+      )
+    })
+  }
+
+  return (
+    <box>
+      <For each={logo.left}>
+        {(line, index) => (
+          <box flexDirection="row" gap={1}>
+            <box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>
+            <box flexDirection="row">{renderLine(logo.right[index()], theme.text, true)}</box>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}

package/src/component/plugin-route-missing.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from "../context/theme"
+
+export function PluginRouteMissing(props: { id: string; onHome: () => void }) {
+  const { theme } = useTheme()
+
+  return (
+    <box width="100%" height="100%" alignItems="center" justifyContent="center" flexDirection="column" gap={1}>
+      <text fg={theme.warning}>Unknown plugin route: {props.id}</text>
+      <box onMouseUp={props.onHome} backgroundColor={theme.backgroundElement} paddingLeft={1} paddingRight={1}>
+        <text fg={theme.text}>go home</text>
+      </box>
+    </box>
+  )
+}