@ocis/myagent-cli 0.2.0

package/dist/ui/components.js

@@ -0,0 +1,811 @@
+// -------------------------------------------------------------------
+// Transcript + panel components for the CLI TUI.
+//
+// Every custom component follows pi-tui's contract: `render(width)` returns
+// lines that never exceed `width`, and `invalidate()` drops caches.
+// -------------------------------------------------------------------
+import { Editor, Markdown, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { MODES } from "../agent/modes.js";
+import { AUTO_COLOR, GRAY_COLOR, GRAY_DIM_COLOR, SESSION_TITLE_COLOR, TITLE_COLOR, assistantColor, bgRgb, diffAdd, diffDel, paintLine, sectionFg, style, userMessageAccent, userMessageColor } from "./colors.js";
+import { fit, formatCacheHit, formatContextNumbers, formatContextPercent, formatCost, formatTokens, stripAnsi, todoMark } from "./format.js";
+import { diffNumber, diffNumberWidth, parseDiffLines, renderPairRows } from "./diff.js";
+import { sanitizeForTerminal } from "../sanitize.js";
+import { markdownTheme } from "./theme.js";
+import { displayToolName, toolBody, toolSummary } from "./tool-view.js";
+// ---------------------------------------------------------------------------
+// Transcript entries
+// ---------------------------------------------------------------------------
+/**
+ * Messages submitted while a run is active, floating between the transcript
+ * and the prompt editor. A steered message is NOT part of the conversation
+ * until the server takes it — until then it stays here, one dim preview line
+ * per pending message, and is released (into the transcript) on acceptance
+ * or when a re-queued follow-up turn actually starts.
+ */
+export class QueuedMessagesComponent {
+    entries = [];
+    invalidate() { }
+    add(text) {
+        this.entries.push(text);
+    }
+    /** Release the oldest entry with exactly this text (FIFO — steering the
+     *  same text twice releases one float per acceptance). */
+    release(text) {
+        const index = this.entries.indexOf(text);
+        if (index >= 0)
+            this.entries.splice(index, 1);
+    }
+    render(width) {
+        // Inset to align with the prompt box (Box(2, 0)); one compact line per
+        // pending message — the full text renders once it enters the transcript.
+        const inset = 2;
+        const prefix = "⏳ ";
+        const budget = Math.max(4, width - inset - visibleWidth(prefix));
+        return this.entries.map((text) => {
+            const firstLine = text.split("\n")[0] ?? "";
+            const more = text.includes("\n") ? " …" : "";
+            const preview = truncateToWidth(firstLine + more, budget, "…", true);
+            return `${" ".repeat(inset)}${GRAY_DIM_COLOR(style.italic(`${prefix}${preview}`))}`;
+        });
+    }
+}
+/**
+ * A submitted prompt: a leading blank row (margin from the previous message),
+ * a violet block bar down the left edge, and a content-sized tinted bubble
+ * (with one row of vertical padding) when the terminal background is known.
+ */
+export class UserMessageComponent {
+    text;
+    queued;
+    options;
+    constructor(text, queued, options = {}) {
+        this.text = text;
+        this.queued = queued;
+        this.options = options;
+    }
+    invalidate() { }
+    render(width) {
+        const bg = this.options.bg?.();
+        const indent = "  ";
+        const contentWidth = Math.max(1, width - indent.length - 2);
+        const lines = wrapTextWithAnsi(this.text.trim() || "(empty)", contentWidth);
+        const suffix = this.queued ? style.dim(" (queued)") : "";
+        // Every line carries the block, so the marker reads as one bar down the
+        // whole bubble instead of a one-line accent.
+        const rendered = lines.map((line, i) => `${userMessageAccent("▌ ")}${userMessageColor(line)}${i === 0 ? suffix : ""}`);
+        // The bubble hugs its content: marker + widest line + a little right padding.
+        const bandWidth = Math.max(1, Math.min(width - indent.length, rendered.reduce((widest, line) => Math.max(widest, visibleWidth(line)), 0) + 2));
+        const paint = (text) => `${indent}${paintLine(text, bandWidth, bg)}`;
+        return [
+            "",
+            paint(""),
+            ...rendered.map(paint),
+            paint(""),
+        ];
+    }
+}
+export class AssistantMessageComponent {
+    md;
+    /** Raw stream (unsanitized) — the sanitizing pass needs the whole text. */
+    raw = "";
+    text = "";
+    constructor() {
+        this.md = new Markdown("", 0, 0, markdownTheme, { color: assistantColor });
+    }
+    append(delta) {
+        // Model text lands on the user's real terminal and can quote untrusted
+        // material (file bodies, fetched pages) verbatim — strip terminal
+        // sequences, like tool output and headless deltas do. Sanitizing the
+        // ACCUMULATED text, not the delta: a sequence split across two deltas
+        // would slip through a per-delta pass.
+        this.raw += delta;
+        this.text = sanitizeForTerminal(this.raw);
+        this.md.setText(this.text);
+    }
+    get content() {
+        return this.text;
+    }
+    render(width) {
+        // Render at the widest margin any line gets (list/table lines take 4):
+        // pi-tui pads every line to this width, so a narrower inner would push
+        // those lines past `width` and fit() would truncate them ("..." on
+        // blank lines). Prose/code lines just carry a little less right padding.
+        const inner = Math.max(1, width - 4);
+        const lines = [];
+        let table = false;
+        let inCode = false;
+        let inList = false;
+        for (const line of this.md.render(inner)) {
+            const plain = stripAnsi(line);
+            // Fenced code otherwise renders with literal ``` fence lines — the
+            // raw-markdown tell. Drop them; the codeBlockIndent plus the syntax
+            // highlighting (theme.highlightCode) carry the block.
+            if (plain.startsWith("```")) {
+                inCode = !inCode;
+                continue;
+            }
+            // Code blocks indent first (col 4, level with the list blocks), then
+            // the dim bar marks the block: pi-tui's 2-cell codeBlockIndent
+            // (pinned in the theme) is swapped out so the code lands at col 6.
+            // Code lines must not join the list logic below.
+            if (inCode) {
+                lines.push(fit(`    ${style.dim("▎ ")}${line.slice(2)}`, width));
+                continue;
+            }
+            // List blocks — items, nested items, wrapped continuations — indent one
+            // level deeper than prose so they read as a group. A blank line does
+            // not end the list (items are separated by blanks); any other
+            // non-indented line does.
+            if (/^\s*(• |\d+[.)] )/.test(plain))
+                inList = true;
+            else if (plain.trim() && !/^\s/.test(plain))
+                inList = false;
+            // h3-h6 render with their literal "### " prefix — strip it; the
+            // heading style (h1 additionally underlined) carries the level.
+            const headingPrefix = /^#{3,6} /.exec(plain)?.[0];
+            const content = headingPrefix ? line.replace(headingPrefix, "") : line;
+            const startsTable = content.startsWith("┌");
+            const isTable = table || startsTable;
+            if (startsTable)
+                table = true;
+            if (content.startsWith("└"))
+                table = false;
+            // Table lines are re-indented: drop their trailing padding first so
+            // fit() cannot clip the right border.
+            const margin = isTable || inList ? "    " : "  ";
+            lines.push(fit(`${margin}${isTable ? content.trimEnd() : content}`, width));
+        }
+        return lines;
+    }
+    invalidate() {
+        this.md.invalidate();
+    }
+}
+export class ReasoningBlockComponent {
+    raw = "";
+    text = "";
+    expanded = false;
+    append(delta) {
+        // Same rule as assistant text: reasoning is model output rendered to the
+        // real terminal, and it quotes tool output freely.
+        this.raw += delta;
+        this.text = sanitizeForTerminal(this.raw);
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    get hasContent() {
+        return this.text.trim().length > 0;
+    }
+    invalidate() { }
+    render(width) {
+        if (!this.hasContent)
+            return [];
+        if (!this.expanded) {
+            const chars = this.text.trim().length;
+            return [truncateToWidth(style.dim(`  ▸ thinking (${chars} chars · Ctrl+T)`), width)];
+        }
+        const body = wrapTextWithAnsi(style.dim(this.text.trim()), Math.max(1, width - 4));
+        return [
+            truncateToWidth(style.dim("  ▾ thinking"), width),
+            ...body.map((line) => truncateToWidth(`    ${line}`, width)),
+            "",
+        ];
+    }
+}
+export class ToolCallComponent {
+    name;
+    args;
+    status = "running";
+    expanded = false;
+    output = "";
+    bodyCache;
+    constructor(name, args) {
+        this.name = name;
+        this.args = args;
+    }
+    setResult(output, isError) {
+        this.output = output;
+        this.status = isError ? "error" : "done";
+    }
+    toggle() {
+        this.expanded = !this.expanded;
+    }
+    /** The whole row is the button: press is consumed, the release click toggles. */
+    handleMouse(event) {
+        if (event.type !== "press" && event.type !== "click")
+            return undefined;
+        if (event.type === "press")
+            return { render: false };
+        this.toggle();
+        return {};
+    }
+    invalidate() { }
+    /** Tool-specific expanded body, cached per width/result (renders on spinner ticks). */
+    body(width) {
+        const isError = this.status === "error";
+        const cached = this.bodyCache;
+        if (cached && cached.width === width && cached.output === this.output && cached.isError === isError) {
+            return cached.lines;
+        }
+        const lines = toolBody(this.name, this.args, this.output, isError, width);
+        this.bodyCache = { width, output: this.output, isError, lines };
+        return lines;
+    }
+    render(width) {
+        const glyph = this.status === "running" ? style.yellow("●") : this.status === "error" ? style.red("✗") : style.green("✓");
+        const marker = style.dim(this.expanded ? "▾" : "▸");
+        const summary = toolSummary(this.name, this.args);
+        const header = `  ${marker} ${glyph} ${style.bold(TITLE_COLOR(displayToolName(this.name)))}${summary ? ` ${style.dim(summary)}` : ""}`;
+        const lines = [truncateToWidth(header, width)];
+        if (this.expanded) {
+            const bodyWidth = Math.max(8, width - 6);
+            for (const line of this.body(bodyWidth))
+                lines.push(truncateToWidth(`      ${line}`, width));
+        }
+        lines.push("");
+        return lines;
+    }
+}
+export class NoticeComponent {
+    text;
+    level;
+    constructor(text, level) {
+        this.text = text;
+        this.level = level;
+    }
+    invalidate() { }
+    render(width) {
+        const color = this.level === "error" ? style.red : this.level === "warn" ? style.yellow : style.dim;
+        // Notices carry server-driven text and error messages — untrusted.
+        return [truncateToWidth(color(`  ${sanitizeForTerminal(this.text)}`), width), ""];
+    }
+}
+// ---------------------------------------------------------------------------
+// TODO panel
+// ---------------------------------------------------------------------------
+/** Checkbox glyph colored by status (sidebar TODO section). */
+function todoGlyph(status) {
+    const mark = todoMark(status);
+    return status === "completed" ? style.green(mark) : status === "in_progress" ? style.yellow(mark) : style.dim(mark);
+}
+const COLLAPSED_FILES = 10;
+export class SidebarComponent {
+    state;
+    opts;
+    expanded = false;
+    targets = new Map();
+    constructor(state, opts) {
+        this.state = state;
+        this.opts = opts;
+    }
+    invalidate() { }
+    toggleChanges() {
+        this.expanded = !this.expanded;
+    }
+    /** What a click at content line `y` hits (coordinates include scrollTop). */
+    targetAt(y) {
+        return this.targets.get(y);
+    }
+    render(width) {
+        const w = Math.max(8, width);
+        const panel = this.opts.panelBg?.();
+        const fill = (line) => {
+            const padded = truncateToWidth(line, w, "…", true);
+            return panel ? bgRgb(panel, padded) : padded;
+        };
+        const lines = [];
+        const push = (line) => lines.push(fill(line));
+        const blank = () => push("");
+        const track = (target) => {
+            this.targets.set(lines.length - 1, target);
+        };
+        // Section header: a hue-colored accent bar + the soft light gray title.
+        const section = (name, label) => {
+            push(` ${sectionFg(name, panel)("▌")}${style.bold(TITLE_COLOR(label))}`);
+        };
+        // Section content is indented under its header.
+        const value = (line) => push(`  ${line}`);
+        this.targets.clear();
+        // Breathing room: a blank line above/below the title and after every
+        // section (the panel background makes the gaps read as intentional).
+        blank();
+        // The session title is the panel's headline — brighter than the section
+        // headers below it. The "New session" placeholder stays at section-header
+        // level so it doesn't read as a real title.
+        push(this.state.title
+            ? ` ${style.bold(SESSION_TITLE_COLOR(this.state.title))}`
+            : ` ${style.bold(TITLE_COLOR("New session"))}`);
+        blank();
+        const usage = this.state.usage;
+        if (usage) {
+            section("context", "CONTEXT");
+            const percent = formatContextPercent(usage.contextTokens, usage.contextWindow);
+            value(GRAY_COLOR(`${formatContextNumbers(usage.contextTokens, usage.contextWindow)}${percent === "—" ? "" : ` (${percent} used)`}`));
+            const cost = formatCost(usage);
+            const costText = cost ? style.yellow(`~${cost}`) : style.dim("—");
+            value(`${costText} ${GRAY_DIM_COLOR(`(${formatCacheHit(usage)} cached)`)}`);
+            blank();
+        }
+        const todoItems = this.opts.todos.list();
+        if (todoItems.length > 0) {
+            section("todo", `TODO (${this.opts.todos.doneCount}/${todoItems.length})`);
+            for (const item of todoItems) {
+                const content = item.content.replace(/\s+/g, " ");
+                value(`${todoGlyph(item.status)} ${item.status === "completed" ? GRAY_DIM_COLOR(content) : GRAY_COLOR(content)}`);
+            }
+            blank();
+        }
+        if (this.state.git.isRepo) {
+            const files = this.state.git.files;
+            section("changes", `CHANGES (${files.length})`);
+            if (files.length === 0) {
+                value(GRAY_DIM_COLOR("clean"));
+            }
+            else {
+                const shown = this.expanded ? files : files.slice(0, COLLAPSED_FILES);
+                for (const file of shown) {
+                    const counts = file.insertions === 0 && file.deletions === 0 ? "" :
+                        ` ${diffAdd(`+${file.insertions}`)} ${diffDel(`-${file.deletions}`)}`;
+                    const label = GRAY_COLOR(truncateToWidth(`${file.status} ${file.path}`, Math.max(4, w - 14)));
+                    push(`  ${label}${counts}`);
+                    track({ type: "file", file });
+                }
+                if (files.length > shown.length) {
+                    value(`${style.cyan("…")} ${GRAY_COLOR(`${files.length - shown.length} more`)} ${GRAY_DIM_COLOR("(click to expand)")}`);
+                    track({ type: "toggle-changes" });
+                }
+                else if (this.expanded && files.length > COLLAPSED_FILES) {
+                    value(`${style.cyan("−")} ${GRAY_COLOR("collapse")}`);
+                    track({ type: "toggle-changes" });
+                }
+                if (this.state.git.totalInsertions || this.state.git.totalDeletions) {
+                    value(`${diffAdd(`+${this.state.git.totalInsertions}`)} ${diffDel(`-${this.state.git.totalDeletions}`)} ${GRAY_COLOR("total")}`);
+                }
+            }
+            blank();
+        }
+        // Fill the empty space below the content so the panel background covers
+        // the whole column. Only when content is shorter than the viewport.
+        const viewport = this.opts.viewportHeight?.() ?? 0;
+        const filler = panel ? bgRgb(panel, " ".repeat(w)) : " ".repeat(w);
+        while (lines.length < viewport)
+            lines.push(filler);
+        return lines;
+    }
+}
+export class PromptEditor extends Editor {
+    mode;
+    model = null;
+    thinking;
+    /** Fired when a bottom-edge chip (mode / model / thinking) is clicked. */
+    onChipClick;
+    /** Chip column extents from the last bottom-edge render, for hit-testing. */
+    chipRanges = [];
+    /** Bottom-edge row in this component's coordinates (-1 = no bottom edge). */
+    bottomBorderRow = -1;
+    /**
+     * The exact bottom-edge line rendered this frame. render() locates the
+     * edge by identity against it — scanning for a "╰" substring would misfire
+     * on user content that happens to contain the border glyph.
+     */
+    lastBottomBorder = "";
+    constructor(tui, theme, mode, thinking) {
+        super(tui, theme, { paddingX: 2 });
+        this.mode = mode;
+        this.thinking = thinking;
+    }
+    renderTopBorder(width, _hiddenLineCount) {
+        return this.borderColor(`╭${"─".repeat(Math.max(0, width))}╮`);
+    }
+    /**
+     * Alt+Enter inserts a newline exactly like Shift+Enter — the base editor
+     * only knows Shift+Enter/Ctrl+J, but terminals send Alt+Enter as ESC+CR
+     * (legacy) or a Kitty/modifyOtherKeys sequence.
+     */
+    handleInput(data) {
+        if (matchesKey(data, "alt+enter")) {
+            this.insertTextAtCursor("\n");
+            return;
+        }
+        super.handleInput(data);
+    }
+    renderBottomBorder(width, hiddenLineCount) {
+        const label = ` ${MODES[this.mode].label} `;
+        const modelText = this.model ?? "no model";
+        const thinkingText = this.thinking ?? "default";
+        const info = `· ${modelText} · ${thinkingText} `;
+        const suffix = hiddenLineCount > 0 ? `↓ ${hiddenLineCount} more ` : "";
+        const fill = width - visibleWidth(label) - visibleWidth(info) - visibleWidth(suffix) - 1;
+        if (fill < 0) {
+            this.chipRanges = [];
+            this.lastBottomBorder = this.borderColor(`╰${"─".repeat(Math.max(0, width))}╯`);
+            return this.lastBottomBorder;
+        }
+        // Chip extents for mouse hit-testing, in columns of the rendered edge
+        // line (which spans the full component width, ╰ included).
+        const labelStart = 2; // "╰─"
+        const infoStart = labelStart + visibleWidth(label);
+        const modelStart = infoStart + 2; // "· "
+        const thinkingStart = modelStart + visibleWidth(modelText) + 3; // " · "
+        this.chipRanges = [
+            { chip: "mode", start: labelStart, end: infoStart },
+            { chip: "model", start: modelStart, end: modelStart + visibleWidth(modelText) },
+            { chip: "thinking", start: thinkingStart, end: thinkingStart + visibleWidth(thinkingText) },
+        ];
+        // The gray info segment resets the foreground, so re-open the frame color
+        // for the trailing rule.
+        this.lastBottomBorder = this.borderColor(`╰─${style.bold(label)}`) + GRAY_COLOR(info)
+            + this.borderColor(`${"─".repeat(fill)}${suffix}╯`);
+        return this.lastBottomBorder;
+    }
+    /**
+     * Mouse dispatch for the framed editor. The bottom edge carries the
+     * mode/model/thinking chips; every other event is translated into the base
+     * editor's coordinate system — our frame inserts a padding row below the
+     * top edge and above the bottom edge, and the side borders shift text rows
+     * one column right, so without the shift the base's cursor/autocomplete
+     * hit-testing lands one row and one column off.
+     */
+    handleMouse(event) {
+        if (event.type === "click" && event.button === "left" && event.y === this.bottomBorderRow) {
+            const chip = this.chipRanges.find((range) => event.x >= range.start && event.x < range.end);
+            if (chip) {
+                this.onChipClick?.(chip.chip);
+                return { handled: true, focus: true };
+            }
+        }
+        if (this.bottomBorderRow === -1)
+            return super.handleMouse(event);
+        const y = event.y <= this.bottomBorderRow ? event.y - 1 : event.y - 2;
+        const x = event.y >= 2 && event.y <= this.bottomBorderRow ? event.x - 1 : event.x;
+        return super.handleMouse({ ...event, x, y });
+    }
+    render(width) {
+        // The frame owns one column on each side.
+        const inner = Math.max(4, width - 2);
+        const side = (line) => `${this.borderColor("│")}${line}${this.borderColor("│")}`;
+        // Reset before the base render — renderBottomBorder (called inside
+        // super.render) refills it, so a stale value can never match.
+        this.lastBottomBorder = "";
+        const lines = super.render(inner);
+        const bottom = this.lastBottomBorder
+            ? lines.findIndex((line, index) => index > 0 && line === this.lastBottomBorder)
+            : -1;
+        if (bottom === -1) {
+            this.bottomBorderRow = -1;
+            return lines.map((line, i) => (i > 0 ? side(line) : line));
+        }
+        // One blank row of vertical padding just inside the frame, on each side.
+        this.bottomBorderRow = bottom + 2;
+        const padding = side(" ".repeat(inner));
+        return [
+            lines[0],
+            padding,
+            ...lines.slice(1, bottom).map(side),
+            padding,
+            ...lines.slice(bottom), // bottom edge and the autocomplete list
+        ];
+    }
+}
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+/** Left indent of the footer's item row (also the ASK/AUTO badge's column). */
+const FOOTER_INDENT = 4;
+export class FooterComponent {
+    state;
+    onApprovalClick;
+    /** Fired when the ASK/AUTO badge is clicked. */
+    constructor(state, onApprovalClick) {
+        this.state = state;
+        this.onApprovalClick = onApprovalClick;
+    }
+    invalidate() { }
+    handleMouse(event) {
+        if (event.type !== "click" || event.button !== "left" || !this.onApprovalClick)
+            return undefined;
+        // The badge is the leftmost item of the row.
+        const badge = this.state.approval === "auto" ? "AUTO" : "ASK";
+        if (event.x >= FOOTER_INDENT && event.x < FOOTER_INDENT + badge.length) {
+            this.onApprovalClick();
+            return { handled: true };
+        }
+        return undefined;
+    }
+    render(width) {
+        const dim = GRAY_DIM_COLOR;
+        // AUTO runs unattended: amber, so it stands out next to the neutral ASK.
+        const approval = this.state.approval === "auto" ? AUTO_COLOR("AUTO") : GRAY_COLOR("ASK");
+        const status = this.state.pendingQuit
+            ? style.yellow("Ctrl+C again to quit · /quit")
+            : this.state.runState === "running"
+                ? style.yellow(`${SPINNER[this.state.spinnerFrame % SPINNER.length]} working`)
+                : this.state.runState === "stopping"
+                    ? style.yellow("stopping…")
+                    : dim("idle");
+        const tokens = dim(`↑${formatTokens(this.state.usage?.input ?? 0)} ↓${formatTokens(this.state.usage?.output ?? 0)}`);
+        const cost = formatCost(this.state.usage);
+        const path = this.compactPath(this.state.workspace);
+        // Run state, single-run tokens and cost follow the approval badge; the
+        // workspace path is flush right.
+        const left = [approval, status, tokens, cost ? dim(cost) : ""].filter(Boolean).join(dim(" · "));
+        const right = dim(this.state.branch ? `${path}:${this.state.branch}` : path);
+        const rightMargin = 4;
+        const gap = width - FOOTER_INDENT - rightMargin - visibleWidth(left) - visibleWidth(right);
+        if (gap >= 1) {
+            return [truncateToWidth(`${" ".repeat(FOOTER_INDENT)}${left}${" ".repeat(gap)}${right}`, width)];
+        }
+        return [truncateToWidth(`${" ".repeat(FOOTER_INDENT)}${left}${dim(" · ")}${right}`, width)];
+    }
+    compactPath(path) {
+        const home = process.env.HOME;
+        return home && path.startsWith(home) ? `~${path.slice(home.length)}` : path;
+    }
+}
+/**
+ * Draw one popup card: a rounded frame with the title in the top edge and an
+ * optional hint in the bottom edge. Every line is padded to exactly `width`
+ * (and tinted) because pi-tui composites overlays over the base content and
+ * fills only the columns outside each rendered line.
+ */
+function renderCard(width, title, body, options) {
+    const bg = options.bg?.();
+    const inner = Math.max(1, width - 4); // two frame columns + one padding column each side
+    const fill = (text) => paintLine(text, width, bg);
+    const edge = (corners, label, labelStyle) => {
+        const available = Math.max(0, width - 2);
+        if (!label)
+            return fill(options.frame(`${corners[0]}${"─".repeat(available)}${corners[1]}`));
+        const labelWidth = visibleWidth(label);
+        const rules = available - labelWidth - 3; // "─ " + label + " " + trailing rules
+        if (rules < 1) {
+            return fill(options.frame(`${corners[0]}${truncateToWidth(` ${labelStyle(label)} `, available, "…", true)}${corners[1]}`));
+        }
+        return fill(options.frame(`${corners[0]}─ ${labelStyle(label)} ${"─".repeat(rules)}${corners[1]}`));
+    };
+    const lines = [edge(["╭", "╮"], title, style.bold)];
+    const blank = fill(`${options.frame("│")} ${" ".repeat(inner)} ${options.frame("│")}`);
+    lines.push(blank);
+    for (const line of body) {
+        const content = truncateToWidth(line, inner, "…", true);
+        const pad = " ".repeat(Math.max(0, inner - visibleWidth(content)));
+        lines.push(fill(`${options.frame("│")} ${content}${pad} ${options.frame("│")}`));
+    }
+    lines.push(blank);
+    lines.push(edge(["╰", "╯"], options.hint ?? "", style.dim));
+    return lines;
+}
+/**
+ * A pending approval, floating between the transcript and the prompt (NOT a
+ * modal overlay — the editor keeps focus, so typing stays possible while the
+ * user decides). Answered with ctrl+y / ctrl+n from the app's global key
+ * listener; the card itself is render-only.
+ */
+export class ApprovalFloatComponent {
+    request = null;
+    invalidate() { }
+    /** Show (or clear) the approval being decided. */
+    set(request) {
+        this.request = request;
+    }
+    render(width) {
+        const request = this.request;
+        if (!request)
+            return [];
+        // Inset to align with the prompt box (Box(2, 0)), like the steer float.
+        const inset = 2;
+        const budget = Math.max(4, width - inset);
+        // The tool name and summary are derived from model-authored arguments
+        // (a shell command, a path): unsanitized they could rewrite or hide the
+        // very line the user is about to approve.
+        const head = truncateToWidth(sanitizeForTerminal(`⏸ Approve ${request.tool}? ${request.summary}`), budget, "…", true);
+        const hint = "ctrl+y approve · ctrl+n deny";
+        return [
+            `${" ".repeat(inset)}${style.yellow(style.bold(head))}`,
+            `${" ".repeat(inset)}${GRAY_DIM_COLOR(style.dim(hint))}`,
+        ];
+    }
+}
+export class InfoOverlay {
+    title;
+    body;
+    close;
+    options;
+    constructor(title, body, close, options = {}) {
+        this.title = title;
+        this.body = body;
+        this.close = close;
+        this.options = options;
+    }
+    handleInput(data) {
+        if (data === "\u001b" || data === "q" || data === "\r" || data === "\n" || data === " ")
+            this.close();
+    }
+    invalidate() { }
+    render(width) {
+        return renderCard(width, this.title, this.body, {
+            frame: style.cyan,
+            bg: this.options.bg,
+            hint: this.options.hint ?? "Esc / q to close",
+        });
+    }
+}
+/**
+ * Scrollable popup for a single file's unified diff. Overlays are clipped, not
+ * scrolled by the framework, so the window is managed here: the popup renders
+ * exactly `viewportHeight() + 2` lines (top edge, body, bottom edge) and moves the
+ * window with the arrow/page keys.
+ */
+export class DiffOverlay {
+    title;
+    options;
+    scrollTop = 0;
+    mode = "inline";
+    rowCount;
+    /** Content rows shown in the viewer (file headers and hunk headers hidden). */
+    visible;
+    cache;
+    constructor(title, diff, options) {
+        this.title = title;
+        this.options = options;
+        // Diff text is raw workspace file content (git output) — sanitize before
+        // parsing so embedded OSC/CSI sequences cannot reach the terminal.
+        const lines = parseDiffLines(sanitizeForTerminal(diff));
+        const content = lines.filter((line) => line.kind !== "meta" && line.kind !== "hunk");
+        // Metadata-only diffs (binary files, mode changes) keep their notice.
+        this.visible = content.length > 0 ? content : lines;
+        this.rowCount = this.visible.length; // until the first render, inline rows
+    }
+    viewHeight() {
+        return Math.max(1, this.options.viewportHeight());
+    }
+    get maxTop() {
+        return Math.max(0, this.rowCount - this.viewHeight());
+    }
+    scrollBy(delta) {
+        this.scrollTop = Math.max(0, Math.min(this.maxTop, this.scrollTop + delta));
+    }
+    /** Paint one diff line, using the same palette as the transcript. */
+    paint(line) {
+        if (line.kind === "add")
+            return diffAdd(line.text);
+        if (line.kind === "del")
+            return diffDel(line.text);
+        return line.kind === "context" ? line.text : style.dim(line.text);
+    }
+    buildRows(contentWidth) {
+        const nums = diffNumberWidth(this.visible);
+        // " <num> │ " prefix per row; meta/hunk rows keep it blank for alignment.
+        const lead = (oldNumber, newNumber) => `${diffNumber(oldNumber, nums)} ${diffNumber(newNumber, nums)} ${style.dim("│")} `;
+        const textWidth = Math.max(4, contentWidth - nums * 2 - 4);
+        if (this.mode === "inline") {
+            return this.visible.map((line) => `${lead(line.oldLine, line.newLine)}${truncateToWidth(this.paint(line), textWidth, "…")}`);
+        }
+        return renderPairRows(this.visible, contentWidth, (line) => this.paint(line));
+    }
+    rows(contentWidth) {
+        if (this.cache && this.cache.width === contentWidth && this.cache.mode === this.mode) {
+            return this.cache.rows;
+        }
+        const rows = this.buildRows(contentWidth);
+        this.rowCount = rows.length;
+        this.cache = { width: contentWidth, mode: this.mode, rows };
+        return rows;
+    }
+    handleInput(data) {
+        if (matchesKey(data, "escape") || data === "q" || matchesKey(data, "ctrl+c")) {
+            this.options.close();
+        }
+        else if (data === "t") {
+            this.mode = this.mode === "inline" ? "pair" : "inline";
+        }
+        else if (data === "i") {
+            this.mode = "inline";
+        }
+        else if (data === "p") {
+            this.mode = "pair";
+        }
+        else if (matchesKey(data, "up")) {
+            this.scrollBy(-1);
+        }
+        else if (matchesKey(data, "down")) {
+            this.scrollBy(1);
+        }
+        else if (matchesKey(data, "pageUp")) {
+            this.scrollBy(-Math.max(1, this.viewHeight() - 2));
+        }
+        else if (matchesKey(data, "pageDown")) {
+            this.scrollBy(Math.max(1, this.viewHeight() - 2));
+        }
+        else if (matchesKey(data, "home")) {
+            this.scrollTop = 0;
+        }
+        else if (matchesKey(data, "end")) {
+            this.scrollTop = this.maxTop;
+        }
+    }
+    /** The mouse wheel scrolls the diff like the arrow keys do. */
+    handleMouse(event) {
+        if (event.type !== "wheel" || !event.wheelDelta)
+            return undefined;
+        this.scrollBy(event.wheelDelta);
+        return { render: true };
+    }
+    invalidate() { }
+    render(width) {
+        // Full-bleed canvas, with a rounded gray card drawn inside it (the prompt
+        // editor's look) so nothing behind the viewer leaks through.
+        const inner = Math.max(24, width);
+        const margin = 2;
+        const frameWidth = Math.max(20, inner - margin * 2);
+        const contentWidth = Math.max(10, frameWidth - 4);
+        const rows = this.rows(contentWidth);
+        const view = this.viewHeight(); // live: a zoom/resize refits the card
+        const start = Math.min(this.scrollTop, Math.max(0, rows.length - view));
+        this.scrollTop = start; // keep the clamped position across resizes
+        const end = Math.min(rows.length, start + view);
+        const position = rows.length === 0
+            ? "no diff"
+            : `${start + 1}-${Math.max(start + 1, end)} / ${rows.length}${this.options.truncated ? " · truncated" : ""}`;
+        const frame = GRAY_COLOR;
+        const line = (text) => truncateToWidth(`${" ".repeat(margin)}${text}${" ".repeat(margin)}`, inner, "…", true);
+        const body = (text) => line(`${frame("│")} ${truncateToWidth(text, contentWidth, "…", true)} ${frame("│")}`);
+        // A card edge is a rounded rule with its label centered in it.
+        const edgeWidth = Math.max(0, frameWidth - 2);
+        const edge = (corners, label, labelWidth) => {
+            const before = Math.max(1, Math.floor((edgeWidth - labelWidth) / 2));
+            const after = edgeWidth - before - labelWidth;
+            return after >= 0
+                ? frame(`${corners[0]}${"─".repeat(before)}${label}${"─".repeat(after)}${corners[1]}`)
+                : frame(`${corners[0]}${truncateToWidth(label, edgeWidth, "…")}${corners[1]}`);
+        };
+        const title = ` ${this.title}  ${position} · ${this.mode} `;
+        const titleStyled = ` ${style.bold(this.title)}  ${style.dim(`${position} · ${this.mode}`)} `;
+        const topEdge = edge(["╭", "╮"], titleStyled, visibleWidth(title));
+        const hint = " ↑/↓ PgUp/PgDn · t inline/pair · Esc to close ";
+        const lines = [
+            line(topEdge),
+            ...(rows.length === 0
+                ? [body(style.dim("No diff available."))]
+                : rows.slice(start, end).map((row) => body(row))),
+        ];
+        // The card is a fixed-height canvas: pad the body to the viewport.
+        while (lines.length < view + 1)
+            lines.push(body(""));
+        lines.push(line(edge(["╰", "╯"], hint, visibleWidth(hint))));
+        return lines;
+    }
+}
+/**
+ * Select list inside a popup card, usable as a focused overlay: input and
+ * mouse events are forwarded to the inner SelectList (a bare Container would
+ * swallow them), with the card's top edge and padding row skipped in the
+ * mouse coordinates (renderCard: edge, blank, then list rows).
+ */
+export class SelectOverlay {
+    title;
+    list;
+    options;
+    constructor(title, list, options = {}) {
+        this.title = title;
+        this.list = list;
+        this.options = options;
+    }
+    handleInput(data) {
+        this.list.handleInput(data);
+    }
+    handleMouse(event) {
+        return this.list.handleMouse({ ...event, y: event.y - 2 });
+    }
+    invalidate() {
+        this.list.invalidate();
+    }
+    render(width) {
+        if (width < 8)
+            return [truncateToWidth(this.title, Math.max(1, width))];
+        return renderCard(width, this.title, this.list.render(Math.max(1, width - 4)), {
+            frame: GRAY_COLOR,
+            bg: this.options.bg,
+            hint: this.options.hint ?? "↑/↓ · Enter · Esc",
+        });
+    }
+}