@visual-z/xeno 0.8.4 → 0.9.1

package/src/tui/ui/mascot.ts

@@ -1,67 +0,0 @@
-/**
- * The empty-session greeting (docs/tasks/refactor-tui-dock-layout.md). Pure.
- *
- *     ▝▖   ▗▘  xeno 0.2.1
- *     ▐█▙█▟█▌  DeepSeek V4 Pro · high
- *      ▀▘ ▝▀   ~/Projects/workspace/xeno-tui ⎇ main
- *
- * An original 7×3 glyph (xeno: the stranger) drawn with ordinary quadrant
- * blocks, so no Nerd Font is needed. Its entrance plays once: antennae rise,
- * wiggle, one blink, then rest. Every frame keeps the same cells, so the
- * terminal never reflows and a selection is never disturbed. Claude Code's
- * fullscreen welcome plays a 0.4–1.3 s entrance the same way; Codex and
- * OpenCode both dropped animations that kept running.
- */
-import type { Line } from "./status.ts";
-
-export const MASCOT_WIDTH = 7;
-
-const ANTENNAE_UP = "▝▖   ▗▘";
-const ANTENNAE_IN = "▗▘   ▝▖";
-const ANTENNAE_DOWN = " ▖   ▗ ";
-const EYES_OPEN = "▐█▙█▟█▌";
-const EYES_SHUT = "▐█████▌";
-const FEET = " ▀▘ ▝▀ ";
-
-/** The resting pose: what a still terminal and every frame after the entrance show. */
-export const MASCOT: readonly string[] = [ANTENNAE_UP, EYES_OPEN, FEET];
-
-/** 60 ms per frame: about 16 fps, smooth for blocky glyphs without a frame per paint. Assumed. */
-export const MASCOT_FRAME_MS = 60;
-
-/** Asleep, antennae rise, eyes open, wiggle, wiggle, blink, rest. 14 frames = 840 ms, under the 1 s the card allows. */
-const ENTRANCE: readonly (readonly [string, string])[] = [
-  [ANTENNAE_DOWN, EYES_SHUT], [ANTENNAE_DOWN, EYES_SHUT], [ANTENNAE_UP, EYES_SHUT], [ANTENNAE_UP, EYES_OPEN],
-  [ANTENNAE_IN, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_IN, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
-  [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_SHUT], [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
-  [ANTENNAE_UP, EYES_OPEN], [ANTENNAE_UP, EYES_OPEN],
-];
-export const MASCOT_FRAMES = ENTRANCE.length;
-
-/** Frame `n` of the entrance; anything past the end is the resting pose. */
-export function mascotFrame(n: number): readonly string[] {
-  const pose = ENTRANCE[Math.max(0, Math.floor(n))];
-  return pose ? [pose[0], pose[1], FEET] : MASCOT;
-}
-
-export interface Greeting {
-  readonly version: string;
-  /** Model display name and thinking level, or null when no provider can authenticate. */
-  readonly model: string | null;
-  readonly thinking: string;
-  readonly workspace: string;
-  readonly branch: string | null;
-}
-
-/** Three rows: mascot frame, a two-cell gap, then version / model / location. */
-export function greetingLines(greeting: Greeting, frame: readonly string[] = MASCOT): Line[] {
-  const art = (row: number) => ({ text: frame[row] ?? "", role: "accent" as const });
-  const gap = { text: "  ", role: "text" as const };
-  return [
-    [art(0), gap, { text: "xeno", role: "text", bold: true }, { text: ` ${greeting.version}`, role: "muted" }],
-    [art(1), gap, ...(greeting.model
-      ? [{ text: greeting.model, role: "text" as const }, { text: ` · ${greeting.thinking}`, role: "muted" as const }]
-      : [{ text: "No provider connected yet · /provider", role: "warning" as const }])],
-    [art(2), gap, { text: greeting.workspace, role: "muted" }, ...(greeting.branch ? [{ text: ` ⎇ ${greeting.branch}`, role: "muted" as const }] : [])],
-  ];
-}

package/src/tui/ui/messages.ts

@@ -1,518 +0,0 @@
-/**
- * The message stream: a bottom-sticky ScrollBox holding a bounded window of
- * item renderables (docs/tasks/refactor-tui-chrome-cleanup.md).
- *
- * Every mounted renderable costs layout and a tree walk on every frame, the
- * spinner's included (OpenTUI 0.5.14 culls off-screen children from painting
- * only), so a long session must not mount its whole history. The window is
- * the last WINDOW items while following the bottom; reading upward pages
- * PAGE more in at a time, never more than CAP, with the first visible item
- * held in place. Renderables are caches of the projection: keyed by id,
- * reused while `rev` is unchanged, destroyed (native memory included) when
- * they leave the window.
- *
- * Reading position is the reader's: once they scroll up, stickiness drops
- * and new content raises "↓ N new" instead of yanking the view. Returning
- * to the bottom, by wheel or Ctrl+End, re-engages following.
- */
-import {
-  BoxRenderable, MarkdownRenderable, ScrollBoxRenderable, SyntaxStyle, TextBufferRenderable, TextRenderable,
-  type CliRenderer, type Renderable, type RGBA,
-} from "@opentui/core";
-import { Canvas } from "./canvas.ts";
-import type { UiColors } from "./colors.ts";
-import { edgeLine, type Seg } from "./edge.ts";
-import { assertNever } from "../exhaustive.ts";
-import { unseen, type ImageView, type ViewItem } from "./items.ts";
-import { DEFAULT_CELL, IMAGES_PER_ITEM, transcriptImageRows } from "./image-size.ts";
-import { Pictures, type PictureSource } from "./pictures.ts";
-import { ansiText, parts } from "./styled.ts";
-
-export interface MessageFeatures {
-  /** Highlighted code block as ANSI lines, or undefined for the built-in renderer. */
-  codeBlock?(code: string, language: string | undefined, width: number): string[] | undefined;
-}
-
-/** Without a source (tests, print mode) pictures are named, not drawn. */
-const NO_PICTURES: PictureSource = { mode: "chip", protocol: "blocks", cell: DEFAULT_CELL, widthCells: 60, load: async () => ({ kind: "error", reason: "closed" }) };
-
-interface Entry { rev: string; node: Renderable; item: ViewItem }
-
-/** Items kept mounted while following the bottom: about three screens of a typical session. Measured basis in the card. */
-export const WINDOW = 60;
-/** Never more than this mounted, however far the reader pages. */
-export const CAP = 80;
-/** Items mounted per page when the reader reaches either end of the window. */
-export const PAGE = 20;
-/** Rows from the window's edge at which the next page loads. Assumed. */
-const EDGE_ROWS = 2;
-
-let serial = 0;
-
-export class MessageList {
-  readonly scroll: ScrollBoxRenderable;
-  private readonly renderer: CliRenderer;
-  private colors: UiColors;
-  private syntax: SyntaxStyle;
-  private readonly features: MessageFeatures;
-  private readonly glyph: () => string;
-  private entries = new Map<string, Entry>();
-  private order: string[] = [];
-  private items: readonly ViewItem[] = [];
-  /** The mounted window over `items`: [start, end). */
-  private start = 0;
-  private end = 0;
-  private readonly earlier: Canvas;
-  private toolsExpanded = false;
-  private thinkingExpanded = false;
-  private waiting = false;
-  private picturesSource: PictureSource = NO_PICTURES;
-  private readonly toolOverrides = new Map<string, boolean>();
-  private followingBottom = true;
-  private paging = false;
-  private unreadCount = 0;
-  onUnread: ((count: number) => void) | undefined;
-
-  constructor(renderer: CliRenderer, colors: UiColors, features: MessageFeatures = {}, glyph: () => string = () => "●") {
-    this.renderer = renderer;
-    this.colors = colors;
-    this.features = features;
-    this.glyph = glyph;
-    this.syntax = syntaxStyle(colors);
-    this.scroll = new ScrollBoxRenderable(renderer, {
-      id: "messages", flexGrow: 1, flexShrink: 1, stickyScroll: true, stickyStart: "bottom",
-      // Content starts in the input box's prompt column, so a sent line does not jump sideways.
-      contentOptions: { flexDirection: "column", paddingLeft: 3, paddingRight: 3, paddingBottom: 1 },
-      scrollbarOptions: { trackOptions: { foregroundColor: colors.line, backgroundColor: "transparent" } },
-    });
-    this.earlier = new Canvas(renderer, { id: "messages-earlier", height: 1, visible: false, flexShrink: 0, colors,
-      onMouseDown: () => this.pageUp() });
-    this.scroll.content.add(this.earlier);
-    this.scroll.verticalScrollBar.on("change", () => this.trackPosition());
-    this.selectAnywhere();
-    // Hidden by default: the scroll position is already visible as "↓ N new" when it matters, and
-    // OpenTUI draws the thumb as a full-cell block, a heavy bar beside a quiet transcript.
-    this.setScrollbar("hidden");
-  }
-
-  /**
-   * A drag may start anywhere in the transcript, as a terminal's own
-   * selection does: on padding, a glyph or the empty end of a row, not only on
-   * a word. OpenTUI starts a selection only on a selectable node under the
-   * pointer; presses elsewhere bubble here and start it on the content box,
-   * which owns no text, so the selection still collects only text nodes
-   * (feat-tui-copy-selection DoD 1).
-   */
-  private selectAnywhere(): void {
-    const content = this.scroll.content;
-    content.selectable = true;
-    content.onMouseDown = event => {
-      if (event.button !== 0 || event.modifiers.ctrl || this.renderer.getSelection()?.isDragging) return;
-      this.renderer.startSelection(content, event.x, event.y);
-      // Otherwise the renderer clears any selection after an unhandled press.
-      event.preventDefault();
-    };
-  }
-
-  /** `auto` shows the bar only while the transcript overflows; `always` keeps it; `hidden` never draws it. */
-  setScrollbar(mode: "auto" | "always" | "hidden"): void {
-    const bar = this.scroll.verticalScrollBar;
-    if (mode === "auto") bar.resetVisibilityControl(); else bar.visible = mode === "always";
-  }
-
-  get unread(): number { return this.unreadCount; }
-  get atBottom(): boolean { return this.followingBottom; }
-  /** How many items are mounted right now (tests, /debug). */
-  get mounted(): number { return this.order.length; }
-  get window(): { readonly start: number; readonly end: number; readonly total: number } { return { start: this.start, end: this.end, total: this.items.length }; }
-  /** The "↑ N earlier" row at the top of the window, or "" when everything from the start is mounted. */
-  get earlierLabel(): string { return this.earlier.visible ? this.earlier.text : ""; }
-
-  /** A tool is waiting for the user's approval: pending tools show ◌ instead of the spinner. */
-  setWaiting(waiting: boolean): void {
-    if (waiting === this.waiting) return;
-    this.waiting = waiting;
-    for (const entry of this.entries.values()) if (entry.item.kind === "tool" && entry.item.status === "pending") this.replace(entry.item);
-  }
-
-  setColors(colors: UiColors): void {
-    this.colors = colors;
-    this.syntax = syntaxStyle(colors);
-    this.earlier.setColors(colors);
-    this.rebuild();
-  }
-
-  /** Folding changes only tool and thinking blocks; everything else, and the reading position, stays put. */
-  setExpanded(tools: boolean, thinking: boolean): void {
-    if (tools === this.toolsExpanded && thinking === this.thinkingExpanded) return;
-    const toolsChanged = tools !== this.toolsExpanded, thinkingChanged = thinking !== this.thinkingExpanded;
-    this.toolsExpanded = tools;
-    this.thinkingExpanded = thinking;
-    if (toolsChanged) this.toolOverrides.clear();
-    const following = this.followingBottom;
-    for (const entry of this.entries.values()) {
-      if ((toolsChanged && entry.item.kind === "tool") || (thinkingChanged && entry.item.kind === "thinking")) this.replace(entry.item);
-    }
-    if (following) this.stickToBottom();
-  }
-
-  update(items: readonly ViewItem[]): void {
-    // Only a reader who has scrolled away needs to know what arrived (an O(n) diff otherwise wasted).
-    const missed = this.followingBottom ? undefined : unseen(this.items, items);
-    const previous = this.items, firstMounted = this.order[0];
-    this.items = items;
-    if (this.followingBottom) { this.end = items.length; this.start = Math.max(0, this.end - WINDOW); }
-    else {
-      // Keep the reader's window anchored on the same first item; take new tail items only up to the cap.
-      const anchor = firstMounted === undefined ? -1 : items.findIndex(item => item.id === firstMounted);
-      const size = this.end - this.start;
-      const tailWasMounted = this.end >= previous.length;
-      this.start = anchor >= 0 ? anchor : Math.min(this.start, Math.max(0, items.length - 1));
-      this.end = Math.min(items.length, this.start + Math.min(CAP, tailWasMounted ? size + Math.max(0, items.length - previous.length) : size));
-    }
-    this.reconcile();
-    if (missed && (missed.added > 0 || missed.changed)) {
-      // A live reply that only grew still means "there is more below".
-      const next = Math.max(1, this.unreadCount + missed.added);
-      if (next !== this.unreadCount) { this.unreadCount = next; this.onUnread?.(next); }
-    }
-    this.renderer.requestRender();
-  }
-
-  /** Make the mounted nodes match items[start, end), reusing what is unchanged. */
-  private reconcile(): void {
-    const wanted = this.items.slice(this.start, this.end);
-    const keep = new Set(wanted.map(item => item.id));
-    for (const [id, entry] of this.entries) if (!keep.has(id)) { this.scroll.content.remove(entry.node); entry.node.destroyRecursively(); this.entries.delete(id); }
-    const content = this.scroll.content, base = 1; // child 0 is the "N earlier" row
-    let reordered = this.order.length !== wanted.length;
-    wanted.forEach((item, index) => {
-      if (!reordered && this.order[index] !== item.id) reordered = true;
-      const entry = this.entries.get(item.id);
-      if (entry && entry.rev === item.rev) { entry.item = item; return; }
-      if (entry && item.kind === "assistant" && entry.item.kind === "assistant" && entry.node instanceof AssistantBlock) {
-        // Streaming: append into the same block so only its tail re-parses.
-        entry.node.markdown.content = item.text;
-        entry.node.markdown.streaming = item.streaming === true;
-        entry.node.paintSelection();
-        entry.rev = item.rev; entry.item = item;
-        return;
-      }
-      const node = this.build(item);
-      if (entry) { content.remove(entry.node); entry.node.destroyRecursively(); }
-      this.entries.set(item.id, { rev: item.rev, node, item });
-      content.add(node, base + index);
-    });
-    // Reorders are rare (a notice anchored before a reply); re-add in order when they happen.
-    if (reordered) {
-      for (const item of wanted) content.remove(this.entries.get(item.id)!.node);
-      for (const item of wanted) content.add(this.entries.get(item.id)!.node);
-    }
-    this.order = wanted.map(item => item.id);
-    this.paintEarlier();
-  }
-
-  private paintEarlier(): void {
-    this.earlier.visible = this.start > 0;
-    if (this.start > 0) this.earlier.setRows([[{ text: `↑ ${this.start} earlier`, role: "muted" }]]);
-  }
-
-  scrollToBottom(): void {
-    this.followingBottom = true;
-    if (this.unreadCount) { this.unreadCount = 0; this.onUnread?.(0); }
-    if (this.end < this.items.length || this.end - this.start > WINDOW) { this.end = this.items.length; this.start = Math.max(0, this.end - WINDOW); this.reconcile(); }
-    this.stickToBottom();
-  }
-
-  /** Scroll height is known only after layout; anchor now and again after the next frame. */
-  private stickToBottom(): void {
-    this.scroll.scrollTo(this.scroll.scrollHeight);
-    this.renderer.requestRender();
-    setTimeout(() => { if (this.followingBottom) { this.scroll.scrollTo(this.scroll.scrollHeight); this.renderer.requestRender(); } }, 0);
-  }
-
-  /** The very start of the session: the first WINDOW items, top of the view. */
-  scrollToTop(): void {
-    this.followingBottom = false;
-    if (this.start > 0) { this.start = 0; this.end = Math.min(this.items.length, WINDOW); this.reconcile(); this.renderer.root.calculateLayout(); }
-    this.scroll.scrollTo(0);
-    this.trackPosition();
-  }
-  page(direction: number): void { this.scroll.scrollBy(direction * Math.max(1, Math.floor(this.viewHeight() * 0.8))); this.trackPosition(); }
-
-  private viewHeight(): number { return this.scroll.viewport.height; }
-
-  private trackPosition(): void {
-    if (this.paging) return;
-    const max = Math.max(0, this.scroll.scrollHeight - this.viewHeight());
-    const top = this.scroll.scrollTop;
-    // Bottom means the session's last item, not just the window's.
-    const bottom = top >= max - 1 && this.end >= this.items.length;
-    if (!bottom && top <= EDGE_ROWS && this.start > 0) { this.pageUp(); return; }
-    if (!bottom && top >= max - EDGE_ROWS && this.end < this.items.length) { this.pageDown(); return; }
-    if (bottom === this.followingBottom) return;
-    this.followingBottom = bottom;
-    if (bottom && this.unreadCount) { this.unreadCount = 0; this.onUnread?.(0); }
-  }
-
-  /** Mount PAGE earlier items, trimming the far end past CAP, with the first visible item held in place. */
-  private pageUp(): void {
-    if (this.start === 0) return;
-    this.followingBottom = false;
-    this.shifting(() => {
-      this.start = Math.max(0, this.start - PAGE);
-      if (this.end - this.start > CAP) this.end = this.start + CAP;
-      this.reconcile();
-    });
-  }
-
-  /** Mount PAGE later items, trimming the near end past CAP. */
-  private pageDown(): void {
-    if (this.end >= this.items.length) return;
-    this.shifting(() => {
-      this.end = Math.min(this.items.length, this.end + PAGE);
-      if (this.end - this.start > CAP) this.start = this.end - CAP;
-      this.reconcile();
-    });
-  }
-
-  /**
-   * Run a window change without moving what the reader sees: find the first
-   * item at or below the viewport top, lay out again synchronously, and shift
-   * the scroll position by however far that item moved.
-   */
-  private shifting(change: () => void): void {
-    const top = this.scroll.scrollTop;
-    const anchor = this.order.map(id => this.entries.get(id)!.node).find(node => node.getLayoutNode().getComputedTop() + node.getLayoutNode().getComputedHeight() > top);
-    const before = anchor?.getLayoutNode().getComputedTop();
-    this.paging = true;
-    try {
-      change();
-      this.renderer.root.calculateLayout();
-      const after = anchor && !anchor.isDestroyed ? anchor.getLayoutNode().getComputedTop() : undefined;
-      const height = this.scroll.content.getLayoutNode().getComputedHeight();
-      this.scroll.verticalScrollBar.scrollSize = height;
-      if (before !== undefined && after !== undefined) this.scroll.scrollTop = Math.max(0, top + (after - before));
-    } finally { this.paging = false; }
-    this.renderer.requestRender();
-  }
-
-  private rebuild(): void {
-    for (const entry of this.entries.values()) { this.scroll.content.remove(entry.node); entry.node.destroyRecursively(); }
-    this.entries.clear(); this.order = [];
-    const following = this.followingBottom;
-    this.reconcile();
-    if (following) this.stickToBottom();
-  }
-
-  private toolOpen(id: string): boolean { return this.toolOverrides.get(id) ?? this.toolsExpanded; }
-
-  /** How pictures are drawn now. A change (settings, the terminal's reported capabilities) redraws the items that have any. */
-  setPictures(source: PictureSource): void {
-    const before = this.picturesSource;
-    this.picturesSource = source;
-    if (before.mode === source.mode && before.protocol === source.protocol && before.widthCells === source.widthCells
-      && before.cell.width === source.cell.width && before.cell.height === source.cell.height) return;
-    for (const entry of [...this.entries.values()]) if ((entry.item.kind === "user" || entry.item.kind === "tool") && entry.item.images?.length) this.replace(entry.item);
-  }
-
-  private pictures(images: readonly ImageView[], limit: number, marginLeft = 0): Pictures {
-    const maxCols = Math.max(10, (this.scroll.width || this.renderer.width) - 10);
-    return new Pictures(this.renderer, this.colors, images, this.picturesSource, { maxCols, maxRows: transcriptImageRows(this.renderer.height), limit, marginTop: 1, marginLeft });
-  }
-
-  private build(item: ViewItem): Renderable {
-    const c = this.colors, r = this.renderer, id = `${item.kind}-${serial++}`;
-    switch (item.kind) {
-      case "user": {
-        // `›` is the same mark the input box uses, so a sent line reads as what was typed.
-        const row = new BoxRenderable(r, { id, flexDirection: "row", marginTop: 1 });
-        // The mark is chrome: a copied message is its words, not its `›`.
-        const mark = new Canvas(r, { id: `${id}-mark`, width: 2, height: 1, flexShrink: 0, colors: c });
-        mark.setRows([[{ text: "›", role: item.interrupted ? "warning" : "accent", bold: true }]]);
-        row.add(mark);
-        const body = new BoxRenderable(r, { id: `${id}-body`, flexDirection: "column", flexGrow: 1, flexShrink: 1 });
-        body.add(this.text(parts({ text: item.text, fg: c.text }), { wrapMode: "word" }));
-        if (item.images?.length) body.add(this.pictures(item.images, IMAGES_PER_ITEM));
-        if (item.interrupted) body.add(this.text(parts({ text: "interrupted", fg: c.warning })));
-        row.add(body);
-        return row;
-      }
-      case "assistant":
-        return new AssistantBlock(r, id, item, c, this.syntax, this.features.codeBlock);
-      case "thinking": {
-        if (!this.thinkingExpanded) {
-          const label = item.label ?? (item.streaming ? "Thinking…" : "Thought");
-          return this.text(parts({ text: "∴ ", fg: c.muted }, { text: label, fg: c.muted, italic: true }), { marginTop: 1 });
-        }
-        const box = new BoxRenderable(r, { id, border: ["left"], borderColor: c.line, paddingLeft: 1, marginTop: 1, marginLeft: 2 });
-        box.add(this.text(parts({ text: item.text, fg: c.muted, italic: true }), { wrapMode: "word" }));
-        return box;
-      }
-      case "tool": return this.toolCard(id, item);
-      case "notice": {
-        const fg = item.tone === "error" ? c.error : item.tone === "warning" ? c.warning : item.tone === "success" ? c.success : c.muted;
-        return this.text(parts({ text: item.text, fg }), { wrapMode: "word", marginTop: 1 });
-      }
-      case "segment": {
-        // The log made visible: the session start and every context boundary are rules (refactor-tui-dock-layout DoD 7).
-        const box = new BoxRenderable(r, { id, flexDirection: "column", marginTop: 1, flexShrink: 0 });
-        const rule = new Canvas(r, { id: `${id}-rule`, height: 1, colors: c });
-        const paint = () => rule.setRows([edgeLine({ width: Math.max(1, rule.width || 40), left: [{ segs: [{ text: item.label, role: "muted" }], priority: 0, min: 4 }], role: "line", lead: 2, trail: 0 })]);
-        rule.onSizeChange = paint; paint();
-        box.add(rule);
-        if (item.detail) box.add(this.text(parts({ text: item.detail, fg: c.muted }), { wrapMode: "none", truncate: true }));
-        return box;
-      }
-      case "lines":
-        // Notices and extension blocks are not pre-wrapped to the column; long ones wrap instead of being cut.
-        return new LinesBlock(r, id, item.render, { marginTop: 1, fg: c.text, wrapMode: "word", ...this.selection() });
-      default:
-        return assertNever(item, "message item");
-    }
-  }
-
-  /**
-   * `✓ read   src/a.ts  215 lines`. The glyph is the logged outcome (D11):
-   * ✓ ok, ✗ failed, the shared spinner while running, ◌ while waiting for
-   * approval. Shell output and failures keep a two-line preview; everything
-   * else is one row until expanded (Ctrl+O, or a click without a drag).
-   *
-   * The glyph and the preview's rule are chrome (Canvas / a Box border), the
-   * words are text nodes, so a mouse selection copies `bash  echo hi  exit 0`
-   * and never the ✓ or the │ (feat-tui-copy-selection).
-   */
-  private toolCard(id: string, item: Extract<ViewItem, { kind: "tool" }>): Renderable {
-    const c = this.colors, r = this.renderer, open = this.toolOpen(item.id);
-    const card = new BoxRenderable(r, { id, flexDirection: "column", marginTop: 1 });
-    const shell = item.name === "!" || item.name === "!!";
-    const glyph: Seg = item.status === "ok" ? { text: "✓", role: "success" } : item.status === "error" ? { text: "✗", role: "error" }
-      : this.waiting ? { text: "◌", role: "warning" } : { text: "●", role: "accent", spin: true };
-    // A click toggles the card; a drag is a selection and leaves it alone.
-    let down: { x: number; y: number } | undefined;
-    const head = new BoxRenderable(r, { id: `${id}-head`, flexDirection: "row", height: 1,
-      onMouseDown: event => { down = { x: event.x, y: event.y }; },
-      onMouseUp: event => { if (down && down.x === event.x && down.y === event.y) { this.toolOverrides.set(item.id, !this.toolOpen(item.id)); this.replace(item); } down = undefined; } });
-    const mark = new Canvas(r, { id: `${id}-glyph`, width: 2, height: 1, flexShrink: 0, colors: c, glyph: this.glyph });
-    mark.setRows([[glyph]]);
-    head.add(mark);
-    head.add(this.text(parts({ text: shell ? item.name : item.name.padEnd(6), fg: c.text, bold: true }, { text: ` ${item.summary}`, fg: c.text },
-      item.evidence ? { text: `  ${item.evidence}`, fg: c.muted } : undefined), { flexGrow: 1, flexShrink: 1, wrapMode: "none", truncate: true }));
-    card.add(head);
-    const preview = !open && (shell || item.name === "bash" || item.status === "error") ? item.preview ?? [] : [];
-    if (preview.length) {
-      const body = new BoxRenderable(r, { id: `${id}-preview`, flexDirection: "column", border: ["left"], borderColor: c.line, paddingLeft: 1, marginLeft: 2 });
-      for (const line of preview) body.add(this.text(parts({ text: line, fg: c.muted }), { height: 1, wrapMode: "none", truncate: true }));
-      card.add(body);
-    }
-    // A tool that returned pictures shows the first, the rest as "+N more" (Grok shows one per tool block).
-    if (item.images?.length) card.add(this.pictures(item.images, 1, 2));
-    if (open) {
-      const body = new BoxRenderable(r, { id: `${id}-body`, border: ["left"], borderColor: c.line, paddingLeft: 1, marginLeft: 2 });
-      body.add(new LinesBlock(r, `${id}-lines`, item.detail, { fg: c.text, ...this.selection() }));
-      card.add(body);
-    }
-    return card;
-  }
-
-  /** Colours for mouse-selected text: the terminal's own, or its inverse (feat-tui-copy-selection DoD 5). */
-  private selection(): { selectionBg: RGBA; selectionFg: RGBA } { return { selectionBg: this.colors.selectionBg, selectionFg: this.colors.selectionFg }; }
-
-  /** A selectable text node in the transcript. */
-  private text(content: ReturnType<typeof parts>, extra: Record<string, unknown> = {}): TextRenderable {
-    return new TextRenderable(this.renderer, { id: `t-${serial++}`, content, ...this.selection(), ...extra });
-  }
-
-  private replace(item: ViewItem): void {
-    const entry = this.entries.get(item.id);
-    if (!entry) return;
-    const index = this.order.indexOf(item.id);
-    this.scroll.content.remove(entry.node); entry.node.destroyRecursively();
-    entry.node = this.build(item);
-    this.scroll.content.add(entry.node, 1 + index);
-    this.renderer.requestRender();
-  }
-}
-
-/** Stable Markdown identity across streamed chunks: a delta re-parses only the tail. */
-class AssistantBlock extends BoxRenderable {
-  readonly markdown: MarkdownRenderable;
-  private readonly colors: UiColors;
-  constructor(r: CliRenderer, id: string, item: Extract<ViewItem, { kind: "assistant" }>, c: UiColors, syntax: SyntaxStyle, highlight?: MessageFeatures["codeBlock"]) {
-    // Indented under the user's line, as the reply to it; no name tag, no streaming label (the box edge shows activity).
-    super(r, { id, flexDirection: "column", marginTop: 1, marginLeft: 2 });
-    this.colors = c;
-    this.markdown = new MarkdownRenderable(r, { id: `${id}-markdown`, content: item.text, syntaxStyle: syntax, fg: c.text, conceal: true, streaming: item.streaming === true,
-      ...(highlight ? { renderNode: codeRenderer(r, c, highlight) } : {}) });
-    this.add(this.markdown);
-    this.paintSelection();
-  }
-
-  /**
-   * Markdown builds its own text nodes, with OpenTUI's default selection
-   * colours (opaque white, invisible on a light terminal). Give each the
-   * view's; a streamed delta may have added nodes, so this runs after updates.
-   */
-  paintSelection(): void {
-    const { selectionBg, selectionFg } = this.colors;
-    const visit = (node: Renderable) => {
-      if (node instanceof TextBufferRenderable && node.selectionBg !== selectionBg) { node.selectionBg = selectionBg; node.selectionFg = selectionFg; }
-      for (const child of node.getChildren()) visit(child as Renderable);
-    };
-    visit(this.markdown);
-  }
-}
-
-
-/** A width-dependent ANSI block (tool output, diffs, extension renderers). Re-renders when its width changes. */
-export class LinesBlock extends TextRenderable {
-  private readonly paint: (width: number) => string[];
-  private paintedWidth = -1;
-  constructor(r: CliRenderer, id: string, paint: (width: number) => string[], extra: Record<string, unknown> = {}) {
-    super(r, { id, content: "", wrapMode: "none", ...extra });
-    this.paint = paint;
-    this.onSizeChange = () => this.repaint();
-    this.repaint(Math.max(20, r.width - 8));
-  }
-  private repaint(fallback?: number): void {
-    const width = this.width > 0 ? this.width : fallback ?? 80;
-    if (width === this.paintedWidth) return;
-    this.paintedWidth = width;
-    let lines: string[];
-    try { lines = this.paint(width); } catch { lines = ["(this block failed to render)"]; }
-    this.content = ansiText(lines);
-  }
-}
-
-/** Code blocks of every language go through the app's highlighter; everything else is OpenTUI's. */
-function codeRenderer(r: CliRenderer, c: UiColors, highlight: NonNullable<MessageFeatures["codeBlock"]>): MarkdownRendererNode {
-  return (token) => {
-    if (token.type !== "code") return undefined;
-    const code = token as { text: string; lang?: string };
-    const lines = highlight(code.text, code.lang || undefined, Math.max(20, r.width - 10));
-    if (!lines) return undefined;
-    const box = new BoxRenderable(r, { id: `code-${serial++}`, border: ["left"], borderColor: c.line, paddingLeft: 1, marginTop: 1, marginBottom: 1 });
-    box.add(new TextRenderable(r, { id: `code-t-${serial++}`, content: ansiText(lines), fg: c.text, wrapMode: "word" }));
-    return box;
-  };
-}
-type MarkdownRendererNode = NonNullable<ConstructorParameters<typeof MarkdownRenderable>[1]["renderNode"]>;
-
-function syntaxStyle(c: UiColors): SyntaxStyle {
-  return SyntaxStyle.fromStyles({
-    default: { fg: c.text },
-    "markup.heading": { fg: c.accent, bold: true },
-    "markup.strong": { bold: true },
-    "markup.italic": { italic: true },
-    "markup.strikethrough": { dim: true },
-    "markup.raw": { fg: c.warning },
-    "markup.raw.block": { fg: c.text },
-    "markup.quote": { fg: c.muted, italic: true },
-    "markup.list": { fg: c.accent },
-    "markup.link": { fg: c.accent, underline: true },
-    "markup.link.url": { fg: c.muted, underline: true },
-    "markup.link.label": { fg: c.accent },
-    conceal: { fg: c.muted },
-    keyword: { fg: c.reasoning }, string: { fg: c.success }, comment: { fg: c.muted, italic: true }, number: { fg: c.warning }, function: { fg: c.accent },
-  });
-}

package/src/tui/ui/motion.ts

@@ -1,28 +0,0 @@
-/**
- * A small, owned animation clock. Only the subscribing chrome is redrawn;
- * animations never trigger transcript projection (D20 view isolation), and
- * a clock that is not running holds no timer.
- */
-export class Motion {
-  private timer: ReturnType<typeof setInterval> | undefined;
-  private frame = 0;
-  get running(): boolean { return this.timer !== undefined; }
-
-  /**
-   * Paint frame 0 now, then one frame per `intervalMs`. A finite animation
-   * (`lastFrame`) stops itself after painting that frame.
-   */
-  start(paint: (frame: number) => void, lastFrame?: number, intervalMs = 120): void {
-    this.stop();
-    this.frame = 0;
-    paint(this.frame);
-    if (lastFrame !== undefined && lastFrame <= 0) return;
-    this.timer = setInterval(() => {
-      paint(++this.frame);
-      if (lastFrame !== undefined && this.frame >= lastFrame) this.stop();
-    }, intervalMs);
-    this.timer.unref?.();
-  }
-
-  stop(): void { clearInterval(this.timer); this.timer = undefined; }
-}

package/src/tui/ui/paths.ts

@@ -1,10 +0,0 @@
-/** `~`-relative display of a directory; pure. */
-import { isAbsolute, relative, resolve, sep } from "node:path";
-
-export function displayPath(cwd: string, home: string | undefined): string {
-  if (!home) return cwd;
-  const relativeToHome = relative(resolve(home), resolve(cwd));
-  const inside = relativeToHome === "" || (relativeToHome !== ".." && !relativeToHome.startsWith(`..${sep}`) && !isAbsolute(relativeToHome));
-  if (!inside) return cwd;
-  return relativeToHome === "" ? "~" : `~${sep}${relativeToHome}`;
-}