@visual-z/xeno 0.1.0

package/src/tui/text.ts

@@ -0,0 +1,52 @@
+/**
+ * The one component this kernel ships. It exists to prove the renderer is
+ * actually painting something; Editor / SelectList / Markdown are a later card.
+ *
+ * Wrapping is by display width, not by string length: a CJK character that
+ * would overflow the last column starts a new line instead of being split,
+ * because a terminal cell cannot hold half of it.
+ */
+
+import { displayWidth } from "./width.ts";
+
+export interface Component {
+  render(width: number): string[];
+}
+
+export class Text implements Component {
+  private readonly content: string;
+
+  constructor(content: string) {
+    this.content = content;
+  }
+
+  render(width: number): string[] {
+    const out: string[] = [];
+    for (const paragraph of this.content.split("\n")) {
+      out.push(...wrapLine(paragraph, width));
+    }
+    return out;
+  }
+}
+
+function wrapLine(s: string, width: number): string[] {
+  if (width <= 0) return [s];
+  const lines: string[] = [];
+  let current = "";
+  let currentW = 0;
+  for (const ch of s) {
+    const w = displayWidth(ch);
+    // Combining marks attach to whatever is already in the line; they never
+    // start a wrap on their own.
+    if (w > 0 && currentW + w > width && current.length > 0) {
+      lines.push(current);
+      current = ch;
+      currentW = w;
+    } else {
+      current += ch;
+      currentW += w;
+    }
+  }
+  lines.push(current);
+  return lines;
+}

package/src/tui/toolview.ts

@@ -0,0 +1,386 @@
+/**
+ * Tool-call / tool-result / thinking layout, including collapse.
+ *
+ * Pure: renderToolView(event, expanded, width, style) → string[]. Collapse
+ * is an argument, never log state — the model does not need to know which
+ * block the user folded (feat-message-rendering design).
+ *
+ * LiveTranscript owns the uncommitted tail. Toggle re-renders that tail
+ * through the line-diff renderer. Committed scrollback is the terminal's
+ * and is never rewritten; pi's `\x1b[2J\x1b[H\x1b[3J` is refused because
+ * it wipes history this process did not write.
+ */
+
+import { assertNever } from "./exhaustive.ts";
+import { renderMarkdown } from "./markdown.ts";
+import { renderDiff, emitPrefixed, innerWidth } from "./diff.ts";
+import { Renderer, fitLive } from "./render.ts";
+import {
+  ANSI,
+  PLAIN_ATTRS,
+  type Attrs,
+  type Style,
+} from "./style.ts";
+import { usableColumns, usableRows, type Terminal } from "./terminal.ts";
+import { CR, ERASE_DOWN, cursorUp } from "./ansi.ts";
+
+/**
+ * Lines shown before a collapsed tool body. From pi's write renderer (10).
+ * Assumed, not measured: a taller preview fills the live region before
+ * the user can hit Ctrl+O, and a shorter one hides too much of a typical
+ * command's first useful lines.
+ */
+const COLLAPSED_PREVIEW_LINES = 10;
+
+const DIM: Attrs = { ...PLAIN_ATTRS, dim: true, result: true };
+const CYAN: Attrs = { ...PLAIN_ATTRS, tool: true };
+const RED: Attrs = { ...PLAIN_ATTRS, error: true };
+const THINKING: Attrs = { ...PLAIN_ATTRS, dim: true, thinking: true };
+
+function withThinking(base: Style): Style {
+  return {
+    open(attrs) {
+      return base.open({ ...attrs, thinking: true, dim: true });
+    },
+    close(attrs) {
+      return base.close({ ...attrs, thinking: true, dim: true });
+    },
+  };
+}
+
+export type ToolViewEvent =
+  | { kind: "thinking"; text: string }
+  | { kind: "tool_call"; tool: { name: string; input: unknown } }
+  | {
+      kind: "tool_result";
+      text: string;
+      ok: boolean;
+      tool?: { name: string; input: unknown };
+    };
+
+export function renderToolView(
+  event: ToolViewEvent,
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const w = Math.max(0, Math.floor(width));
+  switch (event.kind) {
+    case "thinking":
+      return renderThinking(event.text, expanded, w, style);
+    case "tool_call":
+      return renderCall(event.tool, expanded, w, style);
+    case "tool_result":
+      return renderResult(event, expanded, w, style);
+    default:
+      return assertNever(event, "renderToolView");
+  }
+}
+
+function renderThinking(text: string, expanded: boolean, width: number, style: Style): string[] {
+  if (width <= 0) return [""];
+  const indent = "  ";
+  if (expanded) {
+    // Wrap to the same inner width emitPrefixed would paint into. A
+    // floor of 1 plus a two-space indent is three columns in a
+    // one-column terminal — the overflow this card exists to close.
+    const inner = innerWidth(indent, width);
+    // CommonMark folds a single newline into a space. The previous subset
+    // parser did that; pi's marked keeps the break. Folding here keeps the
+    // tool-view snapshot and the wrap of a thinking paragraph stable.
+    const folded = text.replace(/\r\n/g, "\n").replace(/(?<!\n)\n(?!\n)/g, " ");
+    const md = renderMarkdown(folded, inner, withThinking(style));
+    if (inner === width) return md;
+    return md.map((line) => `${indent}${line}`);
+  }
+  const source = text.replace(/\r\n/g, "\n").split("\n");
+  const first = source[0] ?? "";
+  const hidden = Math.max(0, source.length - 1);
+  const out = emitPrefixed(indent, first, width, style, THINKING);
+  if (hidden > 0) {
+    out.push(...emitPrefixed(indent, `… ${hidden} more lines`, width, style, DIM));
+  }
+  return out;
+}
+
+function renderCall(
+  tool: { name: string; input: unknown },
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const input = asRecord(tool.input);
+  const name = tool.name;
+  switch (name) {
+    case "edit":
+      return renderEditCall(input, expanded, width, style);
+    case "write":
+      return renderWriteCall(input, expanded, width, style);
+    case "bash":
+      return renderBashCall(input, width, style);
+    case "read":
+      return renderReadCall(input, width, style);
+    default:
+      return emitPrefixed("  → ", headerTail(name, input), width, style, CYAN);
+  }
+}
+
+function renderEditCall(
+  input: Record<string, unknown>,
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const path = str(input["path"]);
+  // old/new are the names logs written before old_string/new_string carry.
+  const edits = Array.isArray(input["edits"]) ? input["edits"] as Record<string, unknown>[] : [input];
+  const oldText = edits.map((edit) => str(edit["old_string"] ?? edit["old"])).join("\n");
+  const newText = edits.map((edit) => str(edit["new_string"] ?? edit["new"])).join("\n");
+  const out = emitPrefixed("  → ", `edit ${path}${edits.length > 1 ? ` (${edits.length} edits)` : ""}`, width, style, CYAN);
+  if (oldText.length === 0 && newText.length === 0) return out;
+  const diff = renderDiff(oldText, newText, width, style);
+  return out.concat(collapse(diff, expanded, COLLAPSED_PREVIEW_LINES, width, style));
+}
+
+function renderWriteCall(
+  input: Record<string, unknown>,
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const path = str(input["path"]);
+  const content = str(input["content"]);
+  const out = emitPrefixed("  → ", `write ${path}`, width, style, CYAN);
+  if (content.length === 0) return out;
+  const body = content.split("\n").flatMap((line) => emitPrefixed("    ", line, width, style, DIM));
+  return out.concat(collapse(body, expanded, COLLAPSED_PREVIEW_LINES, width, style));
+}
+
+function renderBashCall(input: Record<string, unknown>, width: number, style: Style): string[] {
+  const command = str(input["command"]);
+  return emitPrefixed("  → ", `bash ${command}`, width, style, CYAN);
+}
+
+function renderReadCall(input: Record<string, unknown>, width: number, style: Style): string[] {
+  const path = str(input["path"]);
+  const range = formatReadRange(input);
+  return emitPrefixed("  → ", `read ${path}${range}`, width, style, CYAN);
+}
+
+function renderResult(
+  event: { text: string; ok: boolean; tool?: { name: string; input: unknown } },
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const name = event.tool?.name ?? inferToolName(event.text);
+  const ok = event.ok;
+  switch (name) {
+    case "bash":
+      return renderBashResult(event.text, ok, expanded, width, style);
+    case "read":
+      return renderReadResult(event.text, ok, width, style);
+    case "write":
+    case "edit":
+      return renderStatusResult(event.text, ok, width, style);
+    default:
+      return renderGenericResult(event.text, ok, expanded, width, style);
+  }
+}
+
+function renderBashResult(
+  text: string,
+  ok: boolean,
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const parsed = parseBashResult(text);
+  const exitLabel = parsed.label;
+  const mark = ok ? "    ok  " : "    err ";
+  const markAttrs = ok ? DIM : RED;
+  const header = exitLabel.length > 0 ? mark + exitLabel : mark.trimEnd();
+  const out = emitPrefixed("", header, width, style, markAttrs);
+
+  const body = parsed.body;
+  if (body.length === 0) return out;
+  const stream = ok ? "stdout" : "stderr";
+  const bodyAttrs: Attrs = ok ? DIM : RED;
+  const lines = body.split("\n").flatMap((line) =>
+    emitPrefixed(`      ${stream}  `, line, width, style, bodyAttrs),
+  );
+  return out.concat(collapse(lines, expanded, COLLAPSED_PREVIEW_LINES, width, style));
+}
+
+function renderReadResult(text: string, ok: boolean, width: number, style: Style): string[] {
+  if (!ok) return renderStatusResult(text, false, width, style);
+  const n = text.length === 0 ? 0 : text.split("\n").length;
+  return emitPrefixed("    ", `${n} lines`, width, style, DIM);
+}
+
+function renderStatusResult(text: string, ok: boolean, width: number, style: Style): string[] {
+  const mark = ok ? "    ok  " : "    err ";
+  const first = text.split("\n")[0] ?? "";
+  return emitPrefixed(mark, first, width, style, ok ? DIM : RED);
+}
+
+function renderGenericResult(
+  text: string,
+  ok: boolean,
+  expanded: boolean,
+  width: number,
+  style: Style,
+): string[] {
+  const mark = ok ? "    ok  " : "    err ";
+  const lines = text.split("\n");
+  const first = emitPrefixed(mark, lines[0] ?? "", width, style, ok ? DIM : RED);
+  const rest = lines.slice(1).flatMap((line) => emitPrefixed("        ", line, width, style, DIM));
+  return first.concat(collapse(rest, expanded, COLLAPSED_PREVIEW_LINES, width, style));
+}
+
+function collapse(
+  lines: readonly string[],
+  expanded: boolean,
+  preview: number,
+  width: number,
+  style: Style,
+): string[] {
+  if (expanded || lines.length <= preview) return [...lines];
+  const shown = lines.slice(0, preview);
+  const hidden = lines.length - preview;
+  const note = paintRemainder(hidden, width, style);
+  return [...shown, ...note];
+}
+
+function paintRemainder(hidden: number, width: number, style: Style): string[] {
+  return emitPrefixed("    ", `… ${hidden} more lines`, width, style, DIM);
+}
+
+/** The header is `exit N` optionally followed by ` · wall · status`; all of it is the label. */
+function parseBashResult(text: string): { exit: number | null; label: string; body: string } {
+  const m = /^exit (\d+)([^\n]*)\n?/.exec(text);
+  if (!m) return { exit: null, label: "", body: text };
+  return { exit: Number(m[1]), label: `exit ${m[1]}${m[2] ?? ""}`, body: text.slice(m[0].length) };
+}
+
+function inferToolName(text: string): string {
+  if (/^exit \d+/.test(text)) return "bash";
+  if (/^wrote \d+ bytes/.test(text)) return "write";
+  if (/^replaced /.test(text)) return "edit";
+  if (/^\d+\t/.test(text)) return "read";
+  return "";
+}
+
+function formatReadRange(input: Record<string, unknown>): string {
+  const start = input["start"];
+  const end = input["end"];
+  if (typeof start !== "number" && typeof end !== "number") return "";
+  const a = typeof start === "number" ? start : 1;
+  const b = typeof end === "number" ? String(end) : "";
+  return b.length > 0 ? `:${a}-${b}` : `:${a}`;
+}
+
+function headerTail(name: string, input: Record<string, unknown>): string {
+  const path = str(input["path"]);
+  const command = str(input["command"]);
+  if (path.length > 0) return `${name} ${path}`;
+  if (command.length > 0) return `${name} ${command}`;
+  return name;
+}
+
+function asRecord(input: unknown): Record<string, unknown> {
+  if (typeof input === "object" && input !== null) return input as Record<string, unknown>;
+  return {};
+}
+
+function str(v: unknown): string {
+  return typeof v === "string" ? v : "";
+}
+
+/**
+ * Uncommitted tool/thinking lines, plus commit/toggle against a terminal.
+ *
+ * Toggle only asks the line-diff renderer to rewrite the live tail. Overflow
+ * already written as scrollback is not reprinted, and the screen is never
+ * cleared.
+ */
+export class LiveTranscript {
+  toolsExpanded = false;
+  thinkingExpanded = false;
+  private pending: ToolViewEvent[] = [];
+  private flushed = 0;
+  private renderer: Renderer;
+  private liveRows = 0;
+  private readonly terminal: Terminal;
+  private readonly style: Style;
+
+  constructor(terminal: Terminal, style: Style = ANSI) {
+    this.terminal = terminal;
+    this.style = style;
+    this.renderer = new Renderer(terminal);
+  }
+
+  push(event: ToolViewEvent): void {
+    this.pending.push(event);
+    this.paint();
+  }
+
+  commit(): void {
+    const lines = this.pendingLines();
+    const leftover = lines.slice(this.flushed);
+    this.eraseLive();
+    if (leftover.length > 0) this.terminal.write(leftover.join("\n") + "\n");
+    this.pending = [];
+    this.flushed = 0;
+    this.renderer = new Renderer(this.terminal);
+    this.liveRows = 0;
+  }
+
+  toggleTools(): void {
+    this.toolsExpanded = !this.toolsExpanded;
+    this.paint();
+  }
+
+  toggleThinking(): void {
+    this.thinkingExpanded = !this.thinkingExpanded;
+    this.paint();
+  }
+
+  private expandedFor(event: ToolViewEvent): boolean {
+    return event.kind === "thinking" ? this.thinkingExpanded : this.toolsExpanded;
+  }
+
+  private pendingLines(): string[] {
+    const width = usableColumns(this.terminal.columns);
+    return this.pending.flatMap((event) =>
+      renderToolView(event, this.expandedFor(event), width, this.style),
+    );
+  }
+
+  private paint(): void {
+    const rows = usableRows(this.terminal.rows);
+    const lines = this.pendingLines();
+    const fitted = fitLive(lines, rows);
+    if (fitted.overflow.length > this.flushed) {
+      const fresh = fitted.overflow.slice(this.flushed);
+      this.eraseLive();
+      this.terminal.write(fresh.join("\n") + "\n");
+      this.flushed = fitted.overflow.length;
+      this.renderer = new Renderer(this.terminal);
+      this.liveRows = 0;
+    }
+    this.renderer.render({ render: () => fitted.live });
+    this.liveRows = this.renderer.liveRowCount;
+  }
+
+  private eraseLive(): void {
+    if (this.liveRows <= 0 && this.renderer.liveRowCount <= 0) return;
+    const rows = Math.max(this.liveRows, this.renderer.liveRowCount);
+    let out = CR;
+    if (rows > 1) out += cursorUp(rows - 1);
+    out += ERASE_DOWN;
+    this.terminal.write(out);
+    this.renderer = new Renderer(this.terminal);
+    this.liveRows = 0;
+  }
+}

package/src/tui/transcript.ts

@@ -0,0 +1,71 @@
+import { Container, PiText, Lines, assistantMarkdown } from "./host.ts";
+import { renderToolView } from "./toolview.ts";
+import { PLAIN_ATTRS, paint, type Style } from "./style.ts";
+import { applyBackgroundToLine } from "../vendor/pi-tui/utils.ts";
+
+/** Presentation DTO; the application supplies its pure log projection. */
+type Item = { id: string; revision: string } & (
+  | { kind: "user"; text: string; interrupted: boolean }
+  | { kind: "assistant" | "thinking" | "notice"; text: string }
+  | { kind: "tool"; name: string; input: unknown; result: { text: string; ok: boolean } | null }
+);
+
+export class Transcript extends Container {
+  private items: readonly Item[] = [];
+  private cache = new Map<string, { revision: string; component: Container }>();
+  private style: Style | null = null;
+  private toolsExpanded = false;
+  private thinkingExpanded = false;
+
+  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();
+    this.items = items;
+    this.style = style;
+    this.toolsExpanded = toolsExpanded;
+    this.thinkingExpanded = thinkingExpanded;
+    const next = new Map<string, { revision: string; component: Container }>();
+    this.clear();
+    for (const item of items) {
+      const old = this.cache.get(item.id);
+      const component = old?.revision === item.revision ? old.component : this.component(item, style);
+      next.set(item.id, { revision: item.revision, component });
+      this.addChild(component);
+    }
+    this.cache = next;
+  }
+
+  private component(item: Item, style: Style): 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));
+        if (item.interrupted) component.addChild(new PiText(dim("  interrupted"), 0, 0));
+        break;
+      case "assistant": component.addChild(assistantMarkdown(item.text, style)); break;
+      case "thinking": {
+        const expanded = this.thinkingExpanded;
+        component.addChild(new Lines((width) => renderToolView({ kind: "thinking", text: item.text }, expanded, width, style)));
+        break;
+      }
+      case "tool": {
+        const tool = { name: item.name, input: item.input };
+        const expanded = this.toolsExpanded;
+        const background = item.result === null ? "toolPendingBg" : item.result.ok ? "toolSuccessBg" : "toolErrorBg";
+        const rows: Lines[] = [new Lines((width) => renderToolView({ kind: "tool_call", tool }, expanded, width, style))];
+        if (item.result) {
+          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))));
+        break;
+      }
+      case "notice": component.addChild(new PiText(dim(item.text), 0, 0)); break;
+    }
+    return component;
+  }
+}