@visual-z/xeno 0.1.0

package/src/tui/tree.ts

@@ -0,0 +1,405 @@
+/**
+ * Session-tree layout and selection. Pure: renderTree(nodes, selection,
+ * width, style) → string[]. Collapse/filter/cursor never reach the log —
+ * the thing that happened is rewind, and that already has an event.
+ *
+ * Connectors (`├─` / `└─` / `│`) are kept before prompt text when the
+ * terminal is too narrow. A line that wraps would make the line-diff
+ * renderer count one row where the screen used two (PLAYBOOK width rule;
+ * same trap as toolview's `"  → "` prefix).
+ */
+
+import { assertNever } from "./exhaustive.ts";
+import type { Key } from "./keys.ts";
+import type { Component } from "./text.ts";
+import { displayWidth } from "./width.ts";
+import { PLAIN_ATTRS, paint, type Style } from "./style.ts";
+import { Input } from "../vendor/pi-tui/components/input.ts";
+import { encodeKey, inputKey, keyMatches } from "./input.ts";
+import { truncateToWidth } from "../vendor/pi-tui/utils.ts";
+
+/** Same mark /back uses for a branch the session rewound away from. */
+export const LEFT_BRANCH_MARK = "↩";
+
+/**
+ * Why the live region is not a blank box. Named in the card: an empty
+ * frame looks like a render bug, and there is a real reason (no completed
+ * exchange to jump to).
+ */
+export const EMPTY_TREE_MESSAGE = "nothing to go back to -- no exchange has completed yet";
+
+/** Filter toggle lives here so the key is not a hidden chord. */
+export const TREE_HINT = "tab user/all · enter jump · esc cancel";
+
+const BRANCH_MID = "├─ ";
+const BRANCH_END = "└─ ";
+const PIPE = "│  ";
+const BLANK = "   ";
+const SELECTED = "→ ";
+const UNSELECTED = "  ";
+const CURRENT_MARK = "● ";
+const ON_PATH_MARK = "  ";
+const LEFT_MARK = `${LEFT_BRANCH_MARK} `;
+
+export type TreeKind = "user" | "other";
+export type TreeFilter = "user" | "all";
+
+export interface TreeNode {
+  readonly id: string;
+  readonly prompt: string;
+  readonly onPath: boolean;
+  readonly current: boolean;
+  readonly kind: TreeKind;
+  readonly children: readonly TreeNode[];
+  /** Non-user rows navigate to their enclosing complete exchange. */
+  readonly target?: string;
+}
+
+export interface TreeSelection {
+  readonly index: number;
+  readonly filter: TreeFilter;
+}
+
+export interface TreeState {
+  readonly nodes: readonly TreeNode[];
+  readonly selected: number;
+  readonly filter: TreeFilter;
+  readonly confirmed: TreeNode | null;
+  readonly cancelled: boolean;
+}
+
+export interface CreateTreeOptions {
+  readonly filter?: TreeFilter;
+  readonly style?: Style;
+}
+
+/**
+ * A restore point as the log already knows it. parent pointers are a
+ * separate map so this file never imports store.
+ */
+export interface TreePoint {
+  readonly node: number;
+  readonly atEvent: string;
+  readonly prompt: string;
+  readonly onPath: boolean;
+}
+
+export type NodeParent = { readonly node: number; readonly at_event?: string } | null;
+
+export function createTree(
+  nodes: readonly TreeNode[],
+  opts: CreateTreeOptions = {},
+): TreeState {
+  return {
+    nodes,
+    selected: 0,
+    filter: opts.filter ?? "all",
+    confirmed: null,
+    cancelled: false,
+  };
+}
+
+export function applyTreeKey(state: TreeState, key: Key): TreeState {
+  switch (key.type) {
+    case "up":
+      return move(state, -1);
+    case "down":
+      return move(state, 1);
+    case "enter":
+      return confirm(state);
+    case "escape":
+      return { ...state, cancelled: true, confirmed: null };
+    case "tab":
+      return toggleFilter(state);
+    case "char":
+    case "backspace":
+    case "delete":
+    case "left":
+    case "right":
+    case "home":
+    case "end":
+    case "pageup":
+    case "pagedown":
+    case "ctrl":
+    case "alt":
+      return state;
+    default:
+      return assertNever(key, "applyTreeKey");
+  }
+}
+
+function visibleNodes(nodes: readonly TreeNode[], filter: TreeFilter): TreeNode[] {
+  if (filter === "all") return [...nodes];
+  const out: TreeNode[] = [];
+  for (const n of nodes) {
+    const children = visibleNodes(n.children, filter);
+    if (n.kind === "user") out.push({ ...n, children });
+    else out.push(...children);
+  }
+  return out;
+}
+
+function flatten(nodes: readonly TreeNode[]): TreeNode[] {
+  const out: TreeNode[] = [];
+  for (const n of nodes) {
+    out.push(n);
+    out.push(...flatten(n.children));
+  }
+  return out;
+}
+
+function move(state: TreeState, dir: -1 | 1): TreeState {
+  const n = flatten(visibleNodes(state.nodes, state.filter)).length;
+  if (n === 0) return state;
+  const selected = (state.selected + dir + n) % n;
+  return { ...state, selected, confirmed: null, cancelled: false };
+}
+
+function confirm(state: TreeState): TreeState {
+  const item = flatten(visibleNodes(state.nodes, state.filter))[state.selected];
+  if (item === undefined) return state;
+  return { ...state, confirmed: item, cancelled: false };
+}
+
+function toggleFilter(state: TreeState): TreeState {
+  const filter: TreeFilter = state.filter === "all" ? "user" : "all";
+  const n = flatten(visibleNodes(state.nodes, filter)).length;
+  const selected = n === 0 ? 0 : Math.min(state.selected, n - 1);
+  return { ...state, filter, selected, confirmed: null, cancelled: false };
+}
+
+/**
+ * Truncate on display columns. Slicing with s.length would cut a CJK
+ * prompt in half and the next cell would paint garbage.
+ */
+function truncate(s: string, width: number): string {
+  if (width <= 0) return "";
+  if (displayWidth(s) <= width) return s;
+  let out = "";
+  let w = 0;
+  for (const ch of s) {
+    const cw = displayWidth(ch);
+    if (w + cw > width) break;
+    out += ch;
+    w += cw;
+  }
+  return out;
+}
+
+export function renderTree(
+  nodes: readonly TreeNode[],
+  selection: TreeSelection,
+  width: number,
+  style?: Style,
+): string[] {
+  const w = Math.max(0, Math.floor(width));
+  const filtered = visibleNodes(nodes, selection.filter);
+  if (filtered.length === 0) {
+    return [truncate(EMPTY_TREE_MESSAGE, w)];
+  }
+
+  const flat = flatten(filtered);
+  const selected = flat[selection.index] ?? flat[0];
+  const selectedId = selected?.id;
+  const lines: string[] = [];
+  walk(filtered, "", true, selectedId, w, style, lines);
+  const hint = truncate(TREE_HINT, w);
+  if (hint.length > 0) {
+    lines.push(style !== undefined ? paint(hint, { ...PLAIN_ATTRS, dim: true }, style) : hint);
+  }
+  return lines;
+}
+
+function walk(
+  nodes: readonly TreeNode[],
+  prefix: string,
+  isRoot: boolean,
+  selectedId: string | undefined,
+  width: number,
+  style: Style | undefined,
+  lines: string[],
+): void {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node === undefined) continue;
+    const last = i === nodes.length - 1;
+    const branch = isRoot ? "" : last ? BRANCH_END : BRANCH_MID;
+    const sel = node.id === selectedId ? SELECTED : UNSELECTED;
+    const mark = node.current ? CURRENT_MARK : node.onPath ? ON_PATH_MARK : LEFT_MARK;
+    // Left-to-right: connectors stay, prompt is what width drops first.
+    const raw = sel + prefix + branch + mark + node.prompt;
+    const clipped = truncate(raw, width);
+    const chosen = node.id === selectedId;
+    lines.push(
+      chosen && style !== undefined
+        ? paint(clipped, { ...PLAIN_ATTRS, selected: true }, style)
+        : clipped,
+    );
+    const childPrefix = isRoot ? "" : prefix + (last ? BLANK : PIPE);
+    walk(node.children, childPrefix, false, selectedId, width, style, lines);
+  }
+}
+
+/**
+ * Restore points plus parent pointers → the tree the view paints.
+ *
+ * Same-node exchanges stay a chain. A child node whose parent.at_event
+ * matches a point hangs off that point as a sibling of the continuation,
+ * which is how a rewind becomes a visible fork instead of a missing row.
+ */
+export function treeFromPoints(
+  points: readonly TreePoint[],
+  parents: ReadonlyMap<number, NodeParent>,
+  currentNode: number,
+): TreeNode[] {
+  const byNode = new Map<number, TreePoint[]>();
+  for (const p of points) {
+    const list = byNode.get(p.node) ?? [];
+    list.push(p);
+    byNode.set(p.node, list);
+  }
+
+  const childrenOf = new Map<number, number[]>();
+  const nodeIds = new Set<number>([...parents.keys(), ...byNode.keys()]);
+  for (const id of nodeIds) {
+    const parent = parents.get(id);
+    if (parent === undefined || parent === null) continue;
+    const list = childrenOf.get(parent.node) ?? [];
+    if (!list.includes(id)) list.push(id);
+    childrenOf.set(parent.node, list);
+  }
+
+  const lastHere = [...points].reverse().find((p) => p.onPath && p.node === currentNode);
+  const lastOnPath = lastHere ?? [...points].reverse().find((p) => p.onPath);
+
+  function toNode(p: TreePoint, children: readonly TreeNode[]): TreeNode {
+    return {
+      id: `${p.node}:${p.atEvent}`,
+      prompt: p.prompt,
+      onPath: p.onPath,
+      current: lastOnPath !== undefined && lastOnPath.node === p.node && lastOnPath.atEvent === p.atEvent,
+      kind: "user",
+      children,
+    };
+  }
+
+  const attached = new Set<number>();
+
+  function forksAt(nodeId: number, atEvent: string): TreeNode[] {
+    const out: TreeNode[] = [];
+    for (const childId of childrenOf.get(nodeId) ?? []) {
+      const parent = parents.get(childId);
+      if (parent === undefined || parent === null) continue;
+      if (parent.at_event === atEvent) {
+        attached.add(childId);
+        out.push(...chain(childId));
+      }
+    }
+    return out;
+  }
+
+  function danglingForks(nodeId: number): TreeNode[] {
+    const out: TreeNode[] = [];
+    for (const childId of childrenOf.get(nodeId) ?? []) {
+      if (attached.has(childId)) continue;
+      const parent = parents.get(childId);
+      if (parent === undefined || parent === null) continue;
+      attached.add(childId);
+      out.push(...chain(childId));
+    }
+    return out;
+  }
+
+  function chain(nodeId: number): TreeNode[] {
+    const pts = byNode.get(nodeId) ?? [];
+    if (pts.length === 0) return danglingForks(nodeId);
+
+    function fromIndex(i: number): TreeNode[] {
+      const p = pts[i];
+      if (p === undefined) return danglingForks(nodeId);
+      const forks = forksAt(nodeId, p.atEvent);
+      // Continuation (next point in this node) first, then forks at this event.
+      const children = i + 1 < pts.length
+        ? [...fromIndex(i + 1), ...forks]
+        : [...forks, ...danglingForks(nodeId)];
+      return [toNode(p, children)];
+    }
+
+    return fromIndex(0);
+  }
+
+  const roots: number[] = [];
+  for (const id of nodeIds) {
+    const parent = parents.get(id);
+    if (parent === undefined || parent === null) roots.push(id);
+  }
+  roots.sort((a, b) => a - b);
+
+  const forest: TreeNode[] = [];
+  for (const r of roots) forest.push(...chain(r));
+  return forest;
+}
+
+export class TreeList implements Component {
+  private current: TreeState;
+  private style: Style | undefined;
+  private readonly search = new Input({ prompt: "Search tree: " });
+  onInput: ((data: string) => void) | undefined;
+
+  constructor(nodes: readonly TreeNode[], opts: CreateTreeOptions = {}) {
+    this.current = createTree(nodes, opts);
+    this.style = opts.style;
+  }
+
+  get state(): TreeState {
+    return { ...this.current, nodes: this.filtered() };
+  }
+
+  applyKey(key: Key): TreeState {
+    return this.acceptInput(encodeKey(key));
+  }
+
+  get focused(): boolean { return this.search.focused; }
+  set focused(value: boolean) { this.search.focused = value; }
+  setStyle(style: Style): void { this.style = style; }
+  invalidate(): void { this.search.invalidate(); }
+  handleInput(data: string): void { if (this.onInput) this.onInput(data); else this.acceptInput(data); }
+  private filtered(): readonly TreeNode[] {
+    const query = this.search.getValue().toLowerCase();
+    const nodes = visibleNodes(this.current.nodes, this.current.filter);
+    if (!query) return nodes;
+    return flatten(nodes).filter((node) => node.prompt.toLowerCase().includes(query)).map((node) => ({ ...node, children: [] }));
+  }
+  acceptInput(data: string): TreeState {
+    this.current = { ...this.current, confirmed: null, cancelled: false };
+    const key = inputKey(data);
+    if (keyMatches(data, "ctrl+c")) this.current = { ...this.current, cancelled: true };
+    else if (key && ["up", "down", "enter", "escape", "tab"].includes(key.type)) {
+      const next = applyTreeKey({ ...this.current, nodes: this.filtered() }, key);
+      this.current = { ...next, nodes: this.current.nodes };
+    } else if (keyMatches(data, "pageUp") || keyMatches(data, "pageDown")) {
+      this.current = { ...this.current, selected: Math.max(0, Math.min(flatten(this.filtered()).length - 1,
+        this.current.selected + (keyMatches(data, "pageUp") ? -10 : 10))) };
+    } else {
+      this.search.handleInput(data);
+      this.current = { ...this.current, selected: 0 };
+    }
+    return this.state;
+  }
+
+  render(width: number): string[] {
+    if (width <= 0) return [""];
+    const body = renderTree(
+      this.filtered(),
+      { index: this.current.selected, filter: this.current.filter },
+      width,
+      this.style,
+    );
+    // This is a viewport, not a total result cap. Arrows/search can reach every row.
+    const start = Math.max(0, this.current.selected - 5);
+    const rows = body.slice(start, start + 10);
+    return ["Session tree · Enter navigates context at the exchange boundary", ...this.search.render(width),
+      ...rows, `Tab ${this.current.filter === "all" ? "all messages" : "user messages"} · ↑↓ navigate · Esc cancel`]
+      .map((line) => truncateToWidth(line, width, ""));
+  }
+}