orynacode-ai 1.16.2

package/src/cli/cmd/tui/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
+}

package/src/cli/cmd/tui/feature-plugins/system/diff-viewer-file-tree.tsx

@@ -0,0 +1,162 @@
+/** @jsxImportSource @opentui/solid */
+import type { ColorInput, RGBA, ScrollBoxRenderable } from "@opentui/core"
+import { Locale } from "@/util/locale"
+import { tint } from "@tui/context/theme"
+import { createEffect, createMemo, For, Match, Switch } from "solid-js"
+import { buildFileTree, flattenFileTree, type FileTreeItem, type FileTreeRow } from "./diff-viewer-file-tree-utils"
+import { Panel } from "./diff-viewer-ui"
+
+const FILE_TREE_STATUS_WIDTH = 2
+
+export type DiffViewerFileTreeTheme = {
+  readonly background: RGBA
+  readonly backgroundPanel: ColorInput
+  readonly backgroundElement: ColorInput
+  readonly primary: ColorInput
+  readonly secondary: ColorInput
+  readonly selectedListItemText: ColorInput
+  readonly text: RGBA
+  readonly textMuted: RGBA
+  readonly error: ColorInput
+}
+
+export type DiffViewerFileTreeProps = {
+  readonly width: number
+  readonly files: readonly FileTreeItem[]
+  readonly loading: boolean
+  readonly error: unknown
+  readonly theme: DiffViewerFileTreeTheme
+  readonly focused?: boolean
+  readonly highlightedNode?: number
+  readonly selectedFileIndex?: number
+  readonly reviewedFileNames?: ReadonlySet<string>
+  readonly expandedNodes?: ReadonlySet<number>
+  readonly onRowClick?: (row: FileTreeRow) => void
+}
+
+export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
+  const tree = createMemo(() => buildFileTree(props.files))
+  const rows = createMemo(() => flattenFileTree(tree(), props.expandedNodes))
+  let scroll: ScrollBoxRenderable | undefined
+
+  createEffect(() => {
+    const node = props.highlightedNode
+    if (node === undefined) return
+    const selectedIndex = rows().findIndex((row) => row.id === node)
+    if (selectedIndex === -1) return
+    const scrollSelectedIntoView = () => scrollFileTreeRowIntoView(scroll, selectedIndex)
+    scrollSelectedIntoView()
+    requestAnimationFrame(scrollSelectedIntoView)
+  })
+
+  const fadedColor = () => tint(props.theme.text, props.theme.background, 0.75)
+
+  return (
+    <Panel border="both" width={props.width}>
+      <scrollbox
+        ref={(element: ScrollBoxRenderable) => (scroll = element)}
+        verticalScrollbarOptions={{ visible: false }}
+        horizontalScrollbarOptions={{ visible: false }}
+      >
+        <Switch>
+          <Match when={props.loading || props.error}>
+            <text />
+          </Match>
+          <Match when={props.files.length === 0}>
+            <text fg={props.theme.text}>No files</text>
+          </Match>
+          <Match when={props.files.length > 0}>
+            <For each={rows()}>
+              {(row, index) => {
+                const highlighted = () => props.focused && props.highlightedNode === row.id
+                const selected = () => row.fileIndex !== undefined && props.selectedFileIndex === row.fileIndex
+                const reviewed = () => {
+                  const file = row.fileIndex === undefined ? undefined : props.files[row.fileIndex]?.file
+                  return file !== undefined && (props.reviewedFileNames?.has(file) ?? false)
+                }
+                const prefix = () => fileTreeRowPrefix(rows(), index(), row, props.expandedNodes)
+                const status = () => fileTreeRowStatus(row, props.files, reviewed())
+                const name = () =>
+                  Locale.truncate(row.name, Math.max(1, props.width - FILE_TREE_STATUS_WIDTH - prefix().length))
+                return (
+                  <box
+                    flexDirection="row"
+                    width="100%"
+                    backgroundColor={highlighted() ? props.theme.primary : undefined}
+                    onMouseUp={() => props.onRowClick?.(row)}
+                  >
+                    <text fg={highlighted() ? props.theme.background : fadedColor()} wrapMode="none" flexShrink={0}>
+                      {prefix()}
+                    </text>
+                    <box flexGrow={1} minWidth={0}>
+                      <text
+                        fg={
+                          highlighted()
+                            ? props.theme.background
+                            : selected()
+                              ? props.theme.primary
+                              : reviewed() || row.kind === "directory"
+                                ? props.theme.textMuted
+                                : props.theme.text
+                        }
+                        wrapMode="none"
+                      >
+                        {name()}
+                      </text>
+                    </box>
+                    <text
+                      fg={highlighted() ? props.theme.background : props.theme.textMuted}
+                      wrapMode="none"
+                      flexShrink={0}
+                    >
+                      {status()}
+                    </text>
+                  </box>
+                )
+              }}
+            </For>
+          </Match>
+        </Switch>
+      </scrollbox>
+    </Panel>
+  )
+}
+
+function scrollFileTreeRowIntoView(scroll: ScrollBoxRenderable | undefined, index: number) {
+  if (!scroll) return
+  if (index < scroll.scrollTop) {
+    scroll.scrollTo(index)
+    return
+  }
+  if (index >= scroll.scrollTop + scroll.viewport.height) {
+    scroll.scrollTo(index - scroll.viewport.height + 1)
+  }
+}
+
+function fileTreeRowPrefix(
+  rows: readonly FileTreeRow[],
+  index: number,
+  row: FileTreeRow,
+  expandedNodes: ReadonlySet<number> | undefined,
+) {
+  const indentation = Array.from({ length: row.depth }, (_, depth) => {
+    if (depth === 0 && !hasLaterSibling(rows, 0, 0)) return " "
+    return hasLaterSibling(rows, index, depth) ? "│  " : "   "
+  }).join("")
+  const topRoot = index === 0 && row.depth === 0
+  const branch = topRoot ? " " : hasLaterSibling(rows, index, row.depth) ? "├─ " : "└─ "
+  const marker = row.kind === "directory" ? (expandedNodes && !expandedNodes.has(row.id) ? "▸ " : "▾ ") : ""
+
+  return `${indentation}${branch}${marker}`
+}
+
+function hasLaterSibling(rows: readonly FileTreeRow[], index: number, depth: number) {
+  return rows.slice(index + 1).find((row) => row.depth <= depth)?.depth === depth
+}
+
+function fileTreeRowStatus(row: FileTreeRow, files: readonly FileTreeItem[], reviewed: boolean) {
+  if (row.fileIndex === undefined) return ""
+  const status = files[row.fileIndex]?.status
+  const marker = status === "modified" ? "M" : status === "added" ? "A" : status === "deleted" ? "D" : "?"
+  return `${reviewed ? "✓" : " "}${marker}`.padStart(FILE_TREE_STATUS_WIDTH)
+}

package/src/cli/cmd/tui/feature-plugins/system/diff-viewer-ui.tsx

@@ -0,0 +1,103 @@
+import type { BorderSides, ColorInput } from "@opentui/core"
+import type { JSX } from "@opentui/solid"
+import { useTheme } from "@tui/context/theme"
+import { createContext, Show, splitProps, useContext } from "solid-js"
+
+export type Axis = "x" | "y"
+export type SeparatorEdge = "edge" | "edge-in" | "edge-out"
+export type PanelBorder = "start" | "end" | "both" | "none"
+
+const PanelGroupContext = createContext<{ axis: Axis }>()
+
+function crossAxis(axis: Axis) {
+  return axis === "x" ? "y" : "x"
+}
+
+function usePanelGroup() {
+  return useContext(PanelGroupContext)
+}
+
+export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis }) {
+  const [local, boxProps] = splitProps(props, ["axis", "children"])
+  return (
+    <PanelGroupContext.Provider value={{ axis: local.axis }}>
+      <box minWidth={0} minHeight={0} padding={0} flexDirection={local.axis === "x" ? "row" : "column"} {...boxProps}>
+        {local.children}
+      </box>
+    </PanelGroupContext.Provider>
+  )
+}
+
+export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) {
+  const group = usePanelGroup()
+  const { theme } = useTheme()
+  const [local, boxProps] = splitProps(props, ["border"])
+  const border = local.border ?? "start"
+  const borderProps =
+    border === "none"
+      ? {}
+      : {
+          border: panelBorderSides(group?.axis ?? "y", border),
+          borderColor: theme.border,
+        }
+
+  return (
+    <box
+      minWidth={0}
+      minHeight={0}
+      flexDirection={crossAxis(group?.axis || "y") === "x" ? "row" : "column"}
+      {...borderProps}
+      {...boxProps}
+    />
+  )
+}
+
+function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): BorderSides[] {
+  if (axis === "x") return border === "both" ? ["top", "bottom"] : [border === "start" ? "top" : "bottom"]
+  return border === "both" ? ["left", "right"] : [border === "start" ? "left" : "right"]
+}
+
+export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
+  const group = usePanelGroup()
+  const { theme } = useTheme()
+  const color = () => props.color ?? theme.border
+  const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
+  if (axis() === "y") {
+    return (
+      <Show
+        when={props.start || props.end}
+        fallback={<box width={1} flexShrink={0} border={["left"]} borderColor={color()} />}
+      >
+        <box width={1} flexShrink={0} flexDirection="column">
+          <Show when={props.start}>{(edge) => <text fg={color()}>{verticalEdge(edge(), "start")}</text>}</Show>
+          <box flexGrow={1} border={["left"]} borderColor={color()} />
+          <Show when={props.end}>{(edge) => <text fg={color()}>{verticalEdge(edge(), "end")}</text>}</Show>
+        </box>
+      </Show>
+    )
+  }
+  return (
+    <Show
+      when={props.start || props.end}
+      fallback={<box height={1} flexShrink={0} border={["top"]} borderColor={color()} />}
+    >
+      <box height={1} flexShrink={0} flexDirection="row">
+        <Show when={props.start}>{(edge) => <text fg={color()}>{horizontalEdge(edge(), "start")}</text>}</Show>
+        <box flexGrow={1} border={["top"]} borderColor={color()} />
+        <Show when={props.end}>{(edge) => <text fg={color()}>{horizontalEdge(edge(), "end")}</text>}</Show>
+      </box>
+    </Show>
+  )
+}
+
+function horizontalEdge(edge: SeparatorEdge, side: "start" | "end") {
+  if (edge === "edge") return side === "start" ? "├" : "┤"
+  if (edge === "edge-in") return "┴"
+  return "┬"
+}
+
+function verticalEdge(edge: SeparatorEdge, side: "start" | "end") {
+  if (edge === "edge") return side === "start" ? "┬" : "┴"
+  if (edge === "edge-in") return "┤"
+  return "├"
+}