@neurocode-ai/tui 1.18.8

package/src/feature-plugins/sidebar/files.tsx

@@ -0,0 +1,70 @@
+import type { TuiPlugin, TuiPluginApi } from "@neurocode-ai/plugin/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { createMemo, For, Show, createSignal } from "solid-js"
+import { Locale } from "../../util/locale"
+
+const id = "internal:sidebar-files"
+
+function changeCountWidth(item: { additions: number; deletions: number }) {
+  return [item.additions ? `+${item.additions}` : "", item.deletions ? `-${item.deletions}` : ""]
+    .filter(Boolean)
+    .join(" ").length
+}
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+  const list = createMemo(() => props.api.state.session.diff(props.session_id))
+
+  return (
+    <Show when={list().length > 0}>
+      <box>
+        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+          <Show when={list().length > 2}>
+            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().text}>
+            <b>Modified Files</b>
+          </text>
+        </box>
+        <Show when={list().length <= 2 || open()}>
+          <For each={list()}>
+            {(item) => (
+              <box flexDirection="row" gap={1} justifyContent="space-between">
+                <text fg={theme().textMuted} wrapMode="none">
+                  {Locale.truncateLeft(item.file, Math.max(2, 36 - changeCountWidth(item)))}
+                </text>
+                <box flexDirection="row" gap={1} flexShrink={0}>
+                  <Show when={item.additions}>
+                    <text fg={theme().diffAdded}>+{item.additions}</text>
+                  </Show>
+                  <Show when={item.deletions}>
+                    <text fg={theme().diffRemoved}>-{item.deletions}</text>
+                  </Show>
+                </box>
+              </box>
+            )}
+          </For>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 500,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/feature-plugins/sidebar/footer.tsx

@@ -0,0 +1,98 @@
+import type { TuiPlugin, TuiPluginApi } from "@neurocode-ai/plugin/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { createMemo, Show } from "solid-js"
+import { abbreviateHome } from "../../runtime"
+import { useTuiPaths } from "../../context/runtime"
+
+const id = "internal:sidebar-footer"
+
+function View(props: { api: TuiPluginApi; sessionID: string }) {
+  const paths = useTuiPaths()
+  const theme = () => props.api.theme.current
+  const has = createMemo(() =>
+    props.api.state.provider.some(
+      (item) => item.id !== "opencode" && item.id !== "neuro" || Object.values(item.models).some((model) => model.cost?.input !== 0),
+    ),
+  )
+  const done = createMemo(() => props.api.kv.get("dismissed_getting_started", false))
+  const show = createMemo(() => !has() && !done())
+  const path = createMemo(() => {
+    const session = props.api.state.session.get(props.sessionID)
+    const dir = session?.directory || props.api.state.path.directory || paths.cwd
+    const out = abbreviateHome(dir, paths.home)
+    const branch = session?.directory === props.api.state.path.directory ? props.api.state.vcs?.branch : undefined
+    const text = branch ? out + ":" + branch : out
+    const list = text.split("/")
+    return {
+      parent: list.slice(0, -1).join("/"),
+      name: list.at(-1) ?? "",
+    }
+  })
+
+  return (
+    <box gap={1}>
+      <Show when={show()}>
+        <box
+          backgroundColor={theme().backgroundElement}
+          paddingTop={1}
+          paddingBottom={1}
+          paddingLeft={2}
+          paddingRight={2}
+          flexDirection="row"
+          gap={1}
+        >
+          <text flexShrink={0} fg={theme().text}>
+            ⬖
+          </text>
+          <box flexGrow={1} gap={1}>
+            <box flexDirection="row" justifyContent="space-between">
+              <text fg={theme().text}>
+                <b>Getting started</b>
+              </text>
+              <text fg={theme().textMuted} onMouseDown={() => props.api.kv.set("dismissed_getting_started", true)}>
+                ✕
+              </text>
+            </box>
+            <text fg={theme().textMuted}>NeuroCode includes free models so you can start immediately.</text>
+            <text fg={theme().textMuted}>
+              Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
+            </text>
+            <box flexDirection="row" gap={1} justifyContent="space-between">
+              <text fg={theme().text}>Connect provider</text>
+              <text fg={theme().textMuted}>/connect</text>
+            </box>
+          </box>
+        </box>
+      </Show>
+      <text>
+        <span style={{ fg: theme().textMuted }}>{path().parent}/</span>
+        <span style={{ fg: theme().text }}>{path().name}</span>
+      </text>
+      <text fg={theme().textMuted}>
+        <span style={{ fg: theme().success }}>•</span> <b>Neuro</b>
+        <span style={{ fg: theme().text }}>
+          <b>Code</b>
+        </span>{" "}
+        <span>{props.api.app.version}</span>
+      </text>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 100,
+    slots: {
+      sidebar_footer(_ctx, props) {
+        return <View api={api} sessionID={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/feature-plugins/sidebar/lsp.tsx

@@ -0,0 +1,65 @@
+import type { TuiPlugin, TuiPluginApi } from "@neurocode-ai/plugin/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { createMemo, For, Show, createSignal } from "solid-js"
+
+const id = "internal:sidebar-lsp"
+
+function View(props: { api: TuiPluginApi }) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+  const list = createMemo(() => props.api.state.lsp())
+  const off = createMemo(() => !props.api.state.config.lsp)
+
+  return (
+    <box>
+      <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+        <Show when={list().length > 2}>
+          <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+        </Show>
+        <text fg={theme().text}>
+          <b>LSP</b>
+        </text>
+      </box>
+      <Show when={list().length <= 2 || open()}>
+        <Show when={list().length === 0}>
+          <text fg={theme().textMuted}>{off() ? "LSPs are disabled" : "LSPs will activate as files are read"}</text>
+        </Show>
+        <For each={list()}>
+          {(item) => (
+            <box flexDirection="row" gap={1}>
+              <text
+                flexShrink={0}
+                style={{
+                  fg: item.status === "connected" ? theme().success : theme().error,
+                }}
+              >
+                •
+              </text>
+              <text fg={theme().textMuted}>
+                {item.id} {item.root}
+              </text>
+            </box>
+          )}
+        </For>
+      </Show>
+    </box>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 300,
+    slots: {
+      sidebar_content() {
+        return <View api={api} />
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/feature-plugins/sidebar/mcp.tsx

@@ -0,0 +1,97 @@
+import type { TuiPlugin, TuiPluginApi } from "@neurocode-ai/plugin/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { createMemo, For, Match, Show, Switch, createSignal } from "solid-js"
+
+const id = "internal:sidebar-mcp"
+
+function View(props: { api: TuiPluginApi }) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+  const list = createMemo(() => props.api.state.mcp())
+  const on = createMemo(() => list().filter((item) => item.status === "connected").length)
+  const bad = createMemo(
+    () =>
+      list().filter(
+        (item) =>
+          item.status === "failed" || item.status === "needs_auth" || item.status === "needs_client_registration",
+      ).length,
+  )
+
+  const dot = (status: string) => {
+    if (status === "connected") return theme().success
+    if (status === "failed") return theme().error
+    if (status === "disabled") return theme().textMuted
+    if (status === "needs_auth") return theme().warning
+    if (status === "needs_client_registration") return theme().error
+    return theme().textMuted
+  }
+
+  return (
+    <Show when={list().length > 0}>
+      <box>
+        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+          <Show when={list().length > 2}>
+            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().text}>
+            <b>MCP</b>
+            <Show when={!open()}>
+              <span style={{ fg: theme().textMuted }}>
+                {" "}
+                ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
+              </span>
+            </Show>
+          </text>
+        </box>
+        <Show when={list().length <= 2 || open()}>
+          <For each={list()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: dot(item.status),
+                  }}
+                >
+                  •
+                </text>
+                <text fg={theme().text} wrapMode="word">
+                  {item.name}{" "}
+                  <span style={{ fg: theme().textMuted }}>
+                    <Switch fallback={item.status}>
+                      <Match when={item.status === "connected"}>Connected</Match>
+                      <Match when={item.status === "failed"}>
+                        <i>{item.error}</i>
+                      </Match>
+                      <Match when={item.status === "disabled"}>Disabled</Match>
+                      <Match when={item.status === "needs_auth"}>Needs auth</Match>
+                      <Match when={item.status === "needs_client_registration"}>Needs client ID</Match>
+                    </Switch>
+                  </span>
+                </text>
+              </box>
+            )}
+          </For>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 200,
+    slots: {
+      sidebar_content() {
+        return <View api={api} />
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/feature-plugins/sidebar/todo.tsx

@@ -0,0 +1,49 @@
+import type { TuiPlugin, TuiPluginApi } from "@neurocode-ai/plugin/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { createMemo, For, Show, createSignal } from "solid-js"
+import { TodoItem } from "../../component/todo-item"
+
+const id = "internal:sidebar-todo"
+
+function View(props: { api: TuiPluginApi; session_id: string }) {
+  const [open, setOpen] = createSignal(true)
+  const theme = () => props.api.theme.current
+  const list = createMemo(() => props.api.state.session.todo(props.session_id))
+  const show = createMemo(() => list().length > 0 && list().some((item) => item.status !== "completed"))
+
+  return (
+    <Show when={show()}>
+      <box>
+        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
+          <Show when={list().length > 2}>
+            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().text}>
+            <b>Todo</b>
+          </text>
+        </box>
+        <Show when={list().length <= 2 || open()}>
+          <For each={list()}>{(item) => <TodoItem status={item.status} content={item.content} />}</For>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.slots.register({
+    order: 400,
+    slots: {
+      sidebar_content(_ctx, props) {
+        return <View api={api} session_id={props.session_id} />
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id,
+  tui,
+}
+
+export default plugin

package/src/feature-plugins/system/diff-viewer-file-tree-utils.ts

@@ -0,0 +1,232 @@
+// Paths branch softly through the screen,
+// A quiet tree of changed designs;
+// Each leaf remembers what has been,
+// And waits where careful light aligns.
+
+export type FileTreeItem = {
+  readonly file: string
+  readonly status?: "added" | "deleted" | "modified"
+}
+
+export type FileTreeNode = {
+  readonly id: number
+  readonly name: string
+  readonly parent: number | undefined
+  readonly children: number[]
+  readonly depth: number
+  readonly kind: "directory" | "file"
+  readonly fileIndex?: number
+}
+
+export type FileTree = {
+  readonly roots: number[]
+  readonly nodes: FileTreeNode[]
+}
+
+export type FileTreeRow = {
+  readonly id: number
+  readonly depth: number
+  readonly kind: "directory" | "file"
+  readonly name: string
+  readonly fileIndex?: number
+}
+
+export function buildFileTree(files: readonly FileTreeItem[]): FileTree {
+  const roots: number[] = []
+  const nodes: FileTreeNode[] = []
+  const directoryByPath = new Map<string, number>()
+
+  files.forEach((file, fileIndex) => {
+    const segments = file.file.split("/").filter(Boolean)
+    if (segments.length === 0) return
+
+    const parent = segments.slice(0, -1).reduce(
+      (state, segment) => {
+        const directoryPath = state.path ? `${state.path}/${segment}` : segment
+        const existing = directoryByPath.get(directoryPath)
+        if (existing !== undefined) return { id: existing, path: directoryPath, depth: state.depth + 1 }
+
+        const id = addFileTreeNode(nodes, roots, {
+          name: segment,
+          parent: state.id,
+          depth: state.depth,
+          kind: "directory",
+        })
+        directoryByPath.set(directoryPath, id)
+        return { id, path: directoryPath, depth: state.depth + 1 }
+      },
+      { id: undefined as number | undefined, path: "", depth: 0 },
+    )
+
+    addFileTreeNode(nodes, roots, {
+      name: segments[segments.length - 1]!,
+      parent: parent.id,
+      depth: parent.depth,
+      kind: "file",
+      fileIndex,
+    })
+  })
+
+  const tree = { roots, nodes }
+  tree.roots.sort((left, right) => compareFileTreeNodes(tree, left, right))
+  tree.nodes.forEach((node) => node.children.sort((left, right) => compareFileTreeNodes(tree, left, right)))
+  return tree
+}
+
+export function flattenFileTree(tree: FileTree, expanded?: ReadonlySet<number>): FileTreeRow[] {
+  const rows: FileTreeRow[] = []
+  const visit = (id: number, depth: number) => {
+    const node = tree.nodes[id]!
+    if (node.kind === "file") {
+      rows.push({
+        id: node.id,
+        depth,
+        kind: node.kind,
+        name: node.name,
+        fileIndex: node.fileIndex,
+      })
+      return
+    }
+
+    const chain = collapsedFileTreeDirectoryChain(tree, node.id)
+    const last = chain[chain.length - 1]!
+    rows.push({
+      id: node.id,
+      depth,
+      kind: node.kind,
+      name: chain.map((item) => item.name).join("/"),
+      fileIndex: node.fileIndex,
+    })
+    if (!expanded || expanded.has(node.id)) last.children.forEach((child) => visit(child, depth + 1))
+  }
+  tree.roots.forEach((root) => visit(root, 0))
+  return rows
+}
+
+function collapsedFileTreeDirectoryChain(tree: FileTree, id: number): FileTreeNode[] {
+  const node = tree.nodes[id]!
+  const child = node.children.length === 1 ? tree.nodes[node.children[0]!] : undefined
+  if (child?.kind !== "directory") return [node]
+  return [node, ...collapsedFileTreeDirectoryChain(tree, child.id)]
+}
+
+export function compareFileTreeNodes(tree: FileTree, left: number, right: number) {
+  const leftNode = tree.nodes[left]!
+  const rightNode = tree.nodes[right]!
+  if (leftNode.kind !== rightNode.kind) return leftNode.kind === "directory" ? -1 : 1
+  if (leftNode.name < rightNode.name) return -1
+  if (leftNode.name > rightNode.name) return 1
+  return left - right
+}
+
+export function moveFileTreeSelection(rows: readonly FileTreeRow[], selected: number | undefined, offset: number) {
+  if (rows.length === 0) return undefined
+  const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  if (index === -1) return rows[0]!.id
+  return rows[Math.max(0, Math.min(rows.length - 1, index + offset))]!.id
+}
+
+export function moveFileTreeSelectionToFirstChild(rows: readonly FileTreeRow[], selected: number | undefined) {
+  const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  const row = index === -1 ? undefined : rows[index]
+  if (row?.kind !== "directory") return selected
+  const child = rows[index + 1]
+  return child && child.depth > row.depth ? child.id : selected
+}
+
+export function moveFileTreeSelectionToParent(rows: readonly FileTreeRow[], selected: number | undefined) {
+  const index = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  const row = index === -1 ? undefined : rows[index]
+  if (!row || row.depth === 0) return selected
+  return rows.findLast((item, itemIndex) => itemIndex < index && item.depth < row.depth)?.id ?? selected
+}
+
+export function moveFileTreeSelectionToFile(
+  rows: readonly FileTreeRow[],
+  selected: number | undefined,
+  offset: number,
+) {
+  const fileRows = rows.filter((row) => row.fileIndex !== undefined)
+  if (fileRows.length === 0) return undefined
+  const selectedIndex = selected === undefined ? -1 : rows.findIndex((row) => row.id === selected)
+  if (selectedIndex === -1) return offset < 0 ? fileRows[fileRows.length - 1]!.id : fileRows[0]!.id
+  const next =
+    offset < 0
+      ? fileRows.findLast((row) => rows.findIndex((item) => item.id === row.id) < selectedIndex)
+      : fileRows.find((row) => rows.findIndex((item) => item.id === row.id) > selectedIndex)
+  return next?.id ?? (offset < 0 ? fileRows[0]!.id : fileRows[fileRows.length - 1]!.id)
+}
+
+export function fileTreeFileSelection(tree: FileTree, fileIndex: number) {
+  const node = tree.nodes.find((item) => item.kind === "file" && item.fileIndex === fileIndex)
+  if (!node) return undefined
+  return {
+    highlightedNode: node.id,
+    expandedNodes: fileTreeParentDirectories(tree, node.id),
+  }
+}
+
+export function singlePatchFileIndex(
+  selected: number | undefined,
+  active: number | undefined,
+  current: number | undefined,
+  first: number | undefined,
+) {
+  return selected ?? active ?? current ?? first
+}
+
+export function orderedPatchFileIndexes(rows: readonly FileTreeRow[]) {
+  return rows.flatMap((row) => (row.fileIndex === undefined ? [] : [row.fileIndex]))
+}
+
+export function showDiffViewerFileTree(showFileTree: boolean, fileCount: number) {
+  return showFileTree && fileCount > 0
+}
+
+export function movePatchFileIndex(fileIndexes: readonly number[], current: number | undefined, offset: number) {
+  if (fileIndexes.length === 0) return undefined
+  const index = current === undefined ? -1 : fileIndexes.indexOf(current)
+  if (index === -1) return fileIndexes[0]
+  return fileIndexes[Math.max(0, Math.min(fileIndexes.length - 1, index + offset))]
+}
+
+export function allExpandedFileTreeDirectories(tree: FileTree) {
+  return new Set(tree.nodes.filter((node) => node.kind === "directory").map((node) => node.id))
+}
+
+export function toggleFileTreeDirectory(tree: FileTree, expanded: ReadonlySet<number>, selected: number | undefined) {
+  if (selected === undefined || tree.nodes[selected]?.kind !== "directory") return expanded
+  const next = new Set(expanded)
+  if (next.has(selected)) next.delete(selected)
+  else next.add(selected)
+  return next
+}
+
+export function setFileTreeDirectoryExpanded(
+  tree: FileTree,
+  expanded: ReadonlySet<number>,
+  selected: number | undefined,
+  value: boolean,
+) {
+  if (selected === undefined || tree.nodes[selected]?.kind !== "directory") return expanded
+  const next = new Set(expanded)
+  if (value) next.add(selected)
+  else next.delete(selected)
+  return next
+}
+
+function addFileTreeNode(nodes: FileTreeNode[], roots: number[], input: Omit<FileTreeNode, "id" | "children">) {
+  const id = nodes.length
+  nodes.push({ ...input, id, children: [] })
+  if (input.parent === undefined) roots.push(id)
+  else nodes[input.parent]!.children.push(id)
+  return id
+}
+
+function fileTreeParentDirectories(tree: FileTree, id: number) {
+  const result = new Set<number>()
+  for (let parent = tree.nodes[id]?.parent; parent !== undefined; parent = tree.nodes[parent]?.parent) {
+    result.add(parent)
+  }
+  return result
+}