@visual-z/xeno 0.1.3 → 0.2.0

package/src/tui/transcript.ts

@@ -1,14 +1,27 @@
-import { Container, PiText, Lines, assistantMarkdown } from "./host.ts";
+import { Container, PiText, Lines, assistantMarkdown, type MarkdownFeatures } from "./host.ts";
+import { Image } from "../vendor/pi-tui/components/image.ts";
 import { renderToolView } from "./toolview.ts";
 import { PLAIN_ATTRS, paint, type Style } from "./style.ts";
 import { applyBackgroundToLine } from "../vendor/pi-tui/utils.ts";
+import type { Component } from "../vendor/pi-tui/tui.ts";
 
 /** Presentation DTO; the application supplies its pure log projection. */
+type Attachment = { sha256: string; name: string; width: number; height: number };
 type Item = { id: string; revision: string } & (
-  | { kind: "user"; text: string; interrupted: boolean }
+  | { kind: "user"; text: string; interrupted: boolean; images?: readonly Attachment[] }
   | { kind: "assistant" | "thinking" | "notice"; text: string }
-  | { kind: "tool"; name: string; input: unknown; result: { text: string; ok: boolean } | null }
+  | { kind: "custom"; text: string; customType: string; data?: unknown; entry: boolean; timestamp: string }
+  | { kind: "tool"; callId: string; name: string; input: unknown; result: { text: string; ok: boolean; data?: unknown; images?: readonly Attachment[] } | null }
 );
+interface ExtensionRenderers {
+  message(type: string, text: string, data: unknown, expanded: boolean, fallback: Component, metadata: { id: string; entry: boolean; timestamp: string }): Component;
+  tool(name: string, input: unknown, result: { text: string; ok: boolean; data?: unknown } | null, expanded: boolean, call: Component, output: Component, id: string): Component;
+  hiddenThinkingLabel: string | undefined;
+}
+function dispose(component: Component): void {
+  if (component instanceof Container) component.children.forEach(dispose);
+  else if ("dispose" in component && typeof component.dispose === "function") component.dispose();
+}
 
 export class Transcript extends Container {
   private items: readonly Item[] = [];
@@ -16,11 +29,29 @@ export class Transcript extends Container {
   private style: Style | null = null;
   private toolsExpanded = false;
   private thinkingExpanded = false;
+  private padding = 1;
+  private features: MarkdownFeatures | undefined;
+  private images: ReadonlyMap<string, string> = new Map();
+  private showImages = true;
+  private imageWidth = 60;
+  private extensions: ExtensionRenderers | undefined;
+  setExtensions(renderers: ExtensionRenderers): void { this.extensions = renderers; }
+  private clearCache(): void { for (const entry of this.cache.values()) dispose(entry.component); this.cache.clear(); }
+  configure(features: MarkdownFeatures, images: ReadonlyMap<string, string>, showImages: boolean, width: number): void {
+    this.features = features; this.images = images; this.showImages = showImages; this.imageWidth = width;
+    this.clearCache(); this.items = [];
+  }
+  setPadding(padding: number): void { if (this.padding !== padding) { this.padding = padding; this.invalidate(); } }
+  override render(width: number): string[] {
+    const padding = Math.min(this.padding, Math.max(0, Math.floor((width - 1) / 2)));
+    return super.render(Math.max(1, width - padding * 2)).map(line => line.startsWith("\x1b]133;A\x07")
+      ? "\x1b]133;A\x07" + " ".repeat(padding) + line.slice(8) : " ".repeat(padding) + line);
+  }
 
   update(items: readonly Item[], style: Style, toolsExpanded: boolean, thinkingExpanded: boolean): void {
     const changed = style !== this.style || toolsExpanded !== this.toolsExpanded || thinkingExpanded !== this.thinkingExpanded;
     if (!changed && this.items === items) return;
-    if (changed) this.cache.clear();
+    if (changed) this.clearCache();
     this.items = items;
     this.style = style;
     this.toolsExpanded = toolsExpanded;
@@ -33,6 +64,7 @@ export class Transcript extends Container {
       next.set(item.id, { revision: item.revision, component });
       this.addChild(component);
     }
+    for (const [id, entry] of this.cache) if (next.get(id)?.component !== entry.component) dispose(entry.component);
     this.cache = next;
   }
 
@@ -40,15 +72,20 @@ export class Transcript extends Container {
     const component = new Container();
     const dim = (text: string) => paint(text, { ...PLAIN_ATTRS, dim: true }, style);
     switch (item.kind) {
-      case "user":
-        component.addChild(new PiText(paint(`❯ ${item.text}`, { ...PLAIN_ATTRS, prompt: true }, style), 1, 1,
-          (text) => style.token?.("userMessageBg", text) ?? text));
+      case "user": {
+        component.addChild(new Lines(width => {
+          const transformed = this.features?.transform(item.text, width, false, style, "user") ?? item.text;
+          const text = new PiText(paint(`❯ ${transformed}`, { ...PLAIN_ATTRS, prompt: true }, style), 0, 1, text => style.token?.("userMessageBg", text) ?? text);
+          return text.render(width).map((line, index) => index === 0 ? "\x1b]133;A\x07" + line : line);
+        }));
+        this.addImages(component, item.images, dim);
         if (item.interrupted) component.addChild(new PiText(dim("  interrupted"), 0, 0));
         break;
-      case "assistant": component.addChild(assistantMarkdown(item.text, style)); break;
+      }
+      case "assistant": component.addChild(assistantMarkdown(item.text, style, this.features)); break;
       case "thinking": {
         const expanded = this.thinkingExpanded;
-        component.addChild(new Lines((width) => renderToolView({ kind: "thinking", text: item.text }, expanded, width, style)));
+        component.addChild(!expanded && this.extensions?.hiddenThinkingLabel !== undefined ? new PiText(this.extensions.hiddenThinkingLabel, 0, 0) : new Lines((width) => renderToolView({ kind: "thinking", text: this.features?.transform(item.text, width, false, style, "assistant-thinking") ?? item.text }, expanded, width, style)));
         break;
       }
       case "tool": {
@@ -60,12 +97,27 @@ export class Transcript extends Container {
           const result = item.result;
           rows.push(new Lines((width) => renderToolView({ kind: "tool_result", tool, text: result.text, ok: result.ok }, expanded, width, style)));
         } else rows.push(new Lines(() => [dim("    pending")]));
-        component.addChild(new Lines((width) => rows.flatMap((row) => row.render(width)).map((line) =>
-          applyBackgroundToLine(line, width, (text) => style.token?.(background, text) ?? text))));
+        const rendered = this.extensions?.tool(item.name, item.input, item.result, expanded, rows[0]!, rows[1]!, item.callId) ?? new Lines(width => rows.flatMap(row => row.render(width)));
+        const toolComponent = { render: (width: number) => rendered.render(width).map(line => applyBackgroundToLine(line, width, text => style.token?.(background, text) ?? text)),
+          invalidate: () => rendered.invalidate(), dispose: () => dispose(rendered) };
+        component.addChild(toolComponent);
+        this.addImages(component, item.result?.images, dim);
         break;
       }
       case "notice": component.addChild(new PiText(dim(item.text), 0, 0)); break;
+      case "custom": {
+        const fallback = new PiText(dim(`[${item.customType}] ${item.text}`), 0, 0);
+        component.addChild(this.extensions?.message(item.customType, item.text, item.data, this.toolsExpanded, fallback, item) ?? fallback); break;
+      }
     }
     return component;
   }
+  private addImages(component: Container, images: readonly Attachment[] | undefined, dim: (text: string) => string): void {
+    for (const image of images ?? []) {
+      const data = this.images.get(image.sha256);
+      if (this.showImages && data) component.addChild(new Image(data, "image/png", { fallbackColor: dim },
+        { filename: image.name, maxWidthCells: this.imageWidth }, { widthPx: image.width, heightPx: image.height }));
+      else component.addChild(new PiText(dim(`[Image: ${image.name}, ${image.width}x${image.height}]`), 0, 0));
+    }
+  }
 }

package/src/tui/tree.ts

@@ -15,8 +15,9 @@ 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 { encodeKey } from "./input.ts";
 import { truncateToWidth } from "../vendor/pi-tui/utils.ts";
+import { getKeybindings } from "../vendor/pi-tui/keybindings.ts";
 
 /** Same mark /back uses for a branch the session rewound away from. */
 export const LEFT_BRANCH_MARK = "↩";
@@ -42,7 +43,7 @@ const ON_PATH_MARK = "  ";
 const LEFT_MARK = `${LEFT_BRANCH_MARK} `;
 
 export type TreeKind = "user" | "other";
-export type TreeFilter = "user" | "all";
+export type TreeFilter = "user" | "default" | "no-tools" | "user-only" | "labeled-only" | "all";
 
 export interface TreeNode {
   readonly id: string;
@@ -51,7 +52,12 @@ export interface TreeNode {
   readonly current: boolean;
   readonly kind: TreeKind;
   readonly children: readonly TreeNode[];
-  /** Non-user rows navigate to their enclosing complete exchange. */
+  readonly category?: "tool" | "message" | "metadata";
+  readonly label?: string;
+  readonly labelAt?: string;
+  readonly at?: string;
+  readonly content?: string;
+  /** Exact event position; user messages navigate before themselves. */
   readonly target?: string;
 }
 
@@ -71,6 +77,7 @@ export interface TreeState {
 export interface CreateTreeOptions {
   readonly filter?: TreeFilter;
   readonly style?: Style;
+  readonly bindings?: Readonly<Record<string, readonly string[]>>;
 }
 
 /**
@@ -82,6 +89,13 @@ export interface TreePoint {
   readonly atEvent: string;
   readonly prompt: string;
   readonly onPath: boolean;
+  readonly kind?: TreeKind;
+  readonly category?: "tool" | "message" | "metadata";
+  readonly label?: string;
+  readonly labelAt?: string;
+  readonly at?: string;
+  readonly content?: string;
+  readonly target?: string;
 }
 
 export type NodeParent = { readonly node: number; readonly at_event?: string } | null;
@@ -131,19 +145,25 @@ export function applyTreeKey(state: TreeState, key: Key): TreeState {
 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);
+  const stack = [...nodes].reverse().map(node => ({ node, into: out }));
+  while (stack.length) {
+    const { node: n, into } = stack.pop()!;
+    const include = filter === "user" || filter === "user-only" ? n.kind === "user" :
+      filter === "labeled-only" ? Boolean(n.label) : filter === "no-tools" ? n.category !== "tool" && n.category !== "metadata" : n.category !== "metadata";
+    const children: TreeNode[] = [];
+    if (include) into.push({ ...n, children });
+    for (let i = n.children.length - 1; i >= 0; i--) stack.push({ node: n.children[i]!, into: include ? children : into });
   }
   return out;
 }
 
 function flatten(nodes: readonly TreeNode[]): TreeNode[] {
   const out: TreeNode[] = [];
-  for (const n of nodes) {
+  const stack = [...nodes].reverse();
+  while (stack.length) {
+    const n = stack.pop()!;
     out.push(n);
-    out.push(...flatten(n.children));
+    for (let i = n.children.length - 1; i >= 0; i--) stack.push(n.children[i]!);
   }
   return out;
 }
@@ -162,7 +182,7 @@ function confirm(state: TreeState): TreeState {
 }
 
 function toggleFilter(state: TreeState): TreeState {
-  const filter: TreeFilter = state.filter === "all" ? "user" : "all";
+  const filter: TreeFilter = state.filter === "all" || state.filter === "default" ? "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 };
@@ -219,15 +239,14 @@ function walk(
   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 stack = nodes.map((node, i) => ({ node, prefix, root: isRoot, last: i === nodes.length - 1 })).reverse();
+  while (stack.length) {
+    const { node, prefix: indent, root, last } = stack.pop()!;
+    const branch = root ? "" : 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 raw = sel + indent + branch + mark + (node.label ? `[${node.label}] ` : "") + node.prompt;
     const clipped = truncate(raw, width);
     const chosen = node.id === selectedId;
     lines.push(
@@ -235,8 +254,11 @@ function walk(
         ? paint(clipped, { ...PLAIN_ATTRS, selected: true }, style)
         : clipped,
     );
-    const childPrefix = isRoot ? "" : prefix + (last ? BLANK : PIPE);
-    walk(node.children, childPrefix, false, selectedId, width, style, lines);
+    const nextPrefix = root ? "" : indent + (last ? BLANK : PIPE);
+    // Bound indentation to the display, independently of history depth.
+    const budget = Math.max(3, Math.min(30, width - 20));
+    const childPrefix = nextPrefix.length > budget ? "… " + nextPrefix.slice(-(budget - 2)) : nextPrefix;
+    for (let i = node.children.length - 1; i >= 0; i--) stack.push({ node: node.children[i]!, prefix: childPrefix, root: false, last: i === node.children.length - 1 });
   }
 }
 
@@ -259,129 +281,168 @@ export function treeFromPoints(
     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 {
+      ...p,
       id: `${p.node}:${p.atEvent}`,
       prompt: p.prompt,
       onPath: p.onPath,
       current: lastOnPath !== undefined && lastOnPath.node === p.node && lastOnPath.atEvent === p.atEvent,
-      kind: "user",
+      kind: p.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));
-      }
+  // Wire event chains and branch edges separately. Recursing once per event
+  // overflows the JS stack on otherwise valid long sessions.
+  type MutableNode = TreeNode & { children: TreeNode[] };
+  const chains = new Map<number, MutableNode[]>();
+  const events = new Map<string, MutableNode>();
+  for (const [id, pts] of byNode) {
+    const nodes = pts.map(p => toNode(p, []) as MutableNode);
+    for (let i = 0; i < nodes.length; i++) {
+      events.set(nodes[i]!.id, nodes[i]!);
+      if (nodes[i + 1]) nodes[i]!.children.push(nodes[i + 1]!);
     }
-    return out;
+    chains.set(id, nodes);
   }
-
-  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)];
+  const forest: TreeNode[] = [];
+  for (const [id, nodes] of [...chains].sort(([a], [b]) => a - b)) {
+    const first = nodes[0];
+    if (!first) continue;
+    let parent = parents.get(id);
+    const visited = new Set<number>([id]);
+    while (parent && !chains.get(parent.node)?.length && !visited.has(parent.node)) {
+      visited.add(parent.node); parent = parents.get(parent.node);
     }
-
-    return fromIndex(0);
+    const anchor = parent && !visited.has(parent.node) ? events.get(`${parent.node}:${parent.at_event}`) ?? chains.get(parent.node)?.at(-1) : undefined;
+    if (anchor) anchor.children.push(first); else forest.push(first);
   }
-
-  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 bindings: Readonly<Record<string, readonly string[]>> | undefined;
   private readonly search = new Input({ prompt: "Search tree: " });
+  private readonly folded = new Set<string>();
+  private labelEditor: { node: TreeNode; input: Input } | undefined;
+  labelChange: { target: string; text: string } | undefined;
+  copyText: string | undefined;
+  showTimestamps = false;
   onInput: ((data: string) => void) | undefined;
 
   constructor(nodes: readonly TreeNode[], opts: CreateTreeOptions = {}) {
     this.current = createTree(nodes, opts);
     this.style = opts.style;
+    this.bindings = opts.bindings;
   }
 
   get state(): TreeState {
     return { ...this.current, nodes: this.filtered() };
   }
+  get selectedNode(): TreeNode | undefined { return flatten(this.filtered())[this.current.selected]; }
+  setNodes(nodes: readonly TreeNode[]): void {
+    const id = this.selectedNode?.id;
+    this.current = { ...this.current, nodes, selected: 0 };
+    this.current = { ...this.current, selected: Math.max(0, flatten(this.filtered()).findIndex(node => node.id === id)) };
+  }
 
   applyKey(key: Key): TreeState {
     return this.acceptInput(encodeKey(key));
   }
 
-  get focused(): boolean { return this.search.focused; }
-  set focused(value: boolean) { this.search.focused = value; }
+  get focused(): boolean { return (this.labelEditor?.input ?? this.search).focused; }
+  set focused(value: boolean) { (this.labelEditor?.input ?? 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 tokens = this.search.getValue().toLowerCase().trim().split(/\s+/).filter(Boolean);
     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: [] }));
+    if (tokens.length) return flatten(nodes).filter(node => tokens.every(token => `${node.content ?? node.prompt} ${node.label ?? ""}`.toLowerCase().includes(token))).map(node => ({ ...node, children: [] }));
+    const out: TreeNode[] = [];
+    const stack = [...nodes].reverse().map(node => ({ node, into: out }));
+    while (stack.length) {
+      const { node, into } = stack.pop()!;
+      const children: TreeNode[] = [];
+      into.push({ ...node, prompt: `${this.showTimestamps && node.labelAt ? `${node.labelAt} ` : ""}${this.folded.has(node.id) ? "▸ " : ""}${node.prompt}`, children });
+      if (!this.folded.has(node.id)) for (let i = node.children.length - 1; i >= 0; i--) stack.push({ node: node.children[i]!, into: children });
+    }
+    return out;
   }
-  acceptInput(data: string): TreeState {
+  acceptInput(data: string, action?: 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.labelChange = undefined; this.copyText = undefined;
+    const kb = getKeybindings();
+    if (this.labelEditor) {
+      if (kb.matches(data, "tui.select.cancel")) this.labelEditor = undefined;
+      else if (kb.matches(data, "tui.select.confirm")) {
+        this.labelChange = { target: this.labelEditor.node.target ?? this.labelEditor.node.id, text: this.labelEditor.input.getValue() };
+        this.labelEditor = undefined;
+      } else this.labelEditor.input.handleInput(data);
+      return this.state;
+    }
+    const filters: TreeFilter[] = ["default", "no-tools", "user-only", "labeled-only", "all"];
+    const filterByAction: Record<string, TreeFilter> = { "app.tree.filter.default": "default", "app.tree.filter.noTools": "no-tools",
+      "app.tree.filter.userOnly": "user-only", "app.tree.filter.labeledOnly": "labeled-only", "app.tree.filter.all": "all" };
+    const filter = action ? filterByAction[action] : undefined;
+    if (filter) { this.folded.clear(); this.current = { ...this.current, filter: this.current.filter === filter ? "default" : filter, selected: 0 }; return this.state; }
+    if (action === "app.tree.filter.cycleForward" || action === "app.tree.filter.cycleBackward") {
+      const index = Math.max(0, filters.indexOf(this.current.filter));
+      this.folded.clear();
+      this.current = { ...this.current, filter: filters[(index + (action.endsWith("Forward") ? 1 : 4)) % 5]!, selected: 0 }; return this.state;
+    }
+    if (action === "app.tree.toggleLabelTimestamp") { this.showTimestamps = !this.showTimestamps; return this.state; }
+    const selected = this.selectedNode;
+    if (action === "app.tree.editLabel") {
+      if (selected) { const input = new Input({ prompt: "Label: " }); input.setValue(selected.label ?? ""); input.focused = this.focused; this.labelEditor = { node: selected, input }; }
+      return this.state;
+    }
+    if (action === "app.message.copy") { this.copyText = selected?.content ?? selected?.prompt; return this.state; }
+    if (selected && (action === "app.tree.foldOrUp" || action === "app.tree.unfoldOrDown")) {
+      const flat = flatten(this.filtered());
+      const parentOf = new Map<string, TreeNode>();
+      for (const node of flat) for (const child of node.children) parentOf.set(child.id, node);
+      const parent = parentOf.get(selected.id);
+      if (action === "app.tree.foldOrUp") {
+        if (selected.children.length && (!parent || parent.children.length > 1) && !this.folded.has(selected.id)) this.folded.add(selected.id);
+        else {
+          let target = selected;
+          while (parentOf.has(target.id)) {
+            const ancestor = parentOf.get(target.id)!;
+            if (ancestor.children.length > 1 && target.id !== selected.id) break;
+            target = ancestor;
+          }
+          this.current = { ...this.current, selected: flat.findIndex(node => node.id === target.id) };
+        }
+      } else if (this.folded.delete(selected.id)) { /* Expand in place before moving to a child. */ }
+      else {
+        let target = selected;
+        while (target.children.length) { const branch = target.children.length > 1; target = target.children[0]!; if (branch) break; }
+        this.current = { ...this.current, selected: flat.findIndex(node => node.id === target.id) };
+      }
+      return this.state;
+    }
+    if (kb.matches(data, "tui.select.cancel")) {
+      if (this.search.getValue()) { this.search.setValue(""); this.folded.clear(); this.current = { ...this.current, selected: 0 }; }
+      else this.current = { ...this.current, cancelled: true };
+    }
+    else if (kb.matches(data, "tui.select.confirm")) this.current = { ...this.current, confirmed: selected ?? null };
+    else if (kb.matches(data, "tui.select.up") || kb.matches(data, "tui.select.down")) {
+      const size = flatten(this.filtered()).length;
+      this.current = { ...this.current, selected: size ? (this.current.selected + (kb.matches(data, "tui.select.up") ? -1 : 1) + size) % size : 0 };
+    } else if (kb.matches(data, "tui.input.tab")) this.current = toggleFilter(this.current);
+    else if (kb.matches(data, "tui.select.pageUp") || kb.matches(data, "tui.select.pageDown") || kb.matches(data, "tui.editor.cursorLeft") || kb.matches(data, "tui.editor.cursorRight")) {
       this.current = { ...this.current, selected: Math.max(0, Math.min(flatten(this.filtered()).length - 1,
-        this.current.selected + (keyMatches(data, "pageUp") ? -10 : 10))) };
+        this.current.selected + (kb.matches(data, "tui.select.pageUp") || kb.matches(data, "tui.editor.cursorLeft") ? -10 : 10))) };
     } else {
-      this.search.handleInput(data);
+      const before = this.search.getValue(); this.search.handleInput(data);
+      if (before !== this.search.getValue()) this.folded.clear();
       this.current = { ...this.current, selected: 0 };
     }
     return this.state;
@@ -389,6 +450,8 @@ export class TreeList implements Component {
 
   render(width: number): string[] {
     if (width <= 0) return [""];
+    if (this.labelEditor) return ["Edit label · empty removes it", ...this.labelEditor.input.render(width),
+      `${getKeybindings().getKeys("tui.select.confirm").join("/")} save · ${getKeybindings().getKeys("tui.select.cancel").join("/")} cancel`].map(line => truncateToWidth(line, width, ""));
     const body = renderTree(
       this.filtered(),
       { index: this.current.selected, filter: this.current.filter },
@@ -398,8 +461,11 @@ export class TreeList implements Component {
     // 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`]
+    const hints = this.bindings ? [["app.tree.filter.cycleForward", "filters"], ["app.tree.foldOrUp", "branch"], ["app.tree.editLabel", "label"],
+      ["app.tree.toggleLabelTimestamp", "label time"], ["app.message.copy", "copy"], ["tui.select.cancel", "cancel"]]
+      .flatMap(([action, label]) => this.bindings![action!]?.length ? [`${this.bindings![action!]!.join("/")} ${label}`] : []).join(" · ") : TREE_HINT;
+    return ["Session tree · Select an event to navigate", ...this.search.render(width),
+      ...rows, `${this.current.filter} · ${hints}`]
       .map((line) => truncateToWidth(line, width, ""));
   }
 }

package/src/vendor/pi-rich/LICENSE.upstream

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mario Zechner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/vendor/pi-rich/UPSTREAM.json

@@ -0,0 +1,17 @@
+{
+  "repository": "https://github.com/earendil-works/pi",
+  "commit": "02eed88fd8912e54a804ddebd409e2e4c08ac5ef",
+  "path": "packages/coding-agent/src/utils",
+  "files": {
+    "syntax-highlight.ts": "626f94ab2eae32d77dd473bc24fa2d170fbf07d1",
+    "html.ts": "a13ad46f4888ad62587de59b0670b641a1e2f0a8",
+    "mime.ts": "9016b790f09f1073a707a9a94574c4fd3ae1c0f2",
+    "photon.ts": "6c320705eb975969abe145277566e3297a483272",
+    "exif-orientation.ts": "d1c47df1b7f1a63837ebbb9adb9cedee308a35e8",
+    "image-resize-core.ts": "e60820c7baedaf89d8b387b208c811c468d74ae4",
+    "image-resize.ts": "516a1e57a6be3d6840cb5b0fced3be6b3bc30286",
+    "image-resize-worker.ts": "ee881b3d9794ae60c28d8f6ee4d575d810638c17",
+    "image-convert.ts": "f781d53d1b195b1a8ced2822263f840a06350007",
+    "clipboard-command.ts": "700fc8e609478f76dc614331b5281d0f219f3641"
+  }
+}

package/src/vendor/pi-rich/clipboard-command.ts

@@ -0,0 +1,44 @@
+import { spawn } from "node:child_process";
+
+/** Undefined means the command failed; an empty buffer is a successful result. */
+export function runClipboardCommand(
+	command: string,
+	args: readonly string[],
+	options?: { input?: string; timeoutMs?: number; maxBufferBytes?: number },
+): Promise<Buffer | undefined> {
+	return new Promise((resolve) => {
+		// Clipboard writers can daemonize. Do not give them output pipes to retain.
+		const child = spawn(command, args, {
+			stdio: ["pipe", options?.input === undefined ? "pipe" : "ignore", "ignore"],
+			windowsHide: true,
+		});
+		const chunks: Buffer[] = [];
+		let length = 0;
+		let settled = false;
+		const finish = (result: Buffer | undefined): void => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timer);
+			resolve(result);
+		};
+		const abort = (): void => {
+			child.kill("SIGKILL");
+			child.stdout?.destroy();
+			child.stdin?.destroy();
+			finish(undefined);
+		};
+		const timer = setTimeout(abort, options?.timeoutMs ?? 3000);
+		child.on("error", () => finish(undefined));
+		child.on("close", (code) => {
+			if (!settled) finish(code === 0 ? Buffer.concat(chunks, length) : undefined);
+		});
+		child.stdout?.on("data", (chunk: Buffer) => {
+			if (settled) return;
+			length += chunk.length;
+			if (length > (options?.maxBufferBytes ?? 50 * 1024 * 1024)) abort();
+			else chunks.push(chunk);
+		});
+		child.stdin?.on("error", () => {}); // A writer may exit before consuming all input.
+		child.stdin?.end(options?.input);
+	});
+}