@alisio/alisio-code 0.1.0-alpha.8 → 0.1.0

package/dist/tui/components.js

@@ -1,13 +1,357 @@
-import { Container, getCapabilities, Image, Key, Markdown, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+import { homedir } from "node:os";
+import { Container, getCapabilities, getImageDimensions, Image, Key, Markdown, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, } from "@earendil-works/pi-tui";
+import { terminalCapabilities } from "../banner.js";
+import { artifactLines } from "./artifacts.js";
 import { attachmentCaption, MAX_ATTACHMENTS_PER_MESSAGE, } from "./attachments.js";
+import { btwCurrent, btwHints, btwPosition, btwUsageLine, btwWindow, reduceBtw, } from "./btw.js";
+import { branchDisplay } from "./git-branch.js";
+import { initialPlanReviewState, reducePlanReview, } from "./plan-review.js";
 import { initialQuestionState, reduceQuestions, } from "./questions.js";
-import { contextLevel, contextPercent, editSummary, fitSegments, formatContext, formatDuration, formatTokens, } from "./state.js";
-import { imageTheme, levelColor, markdownTheme, style } from "./theme.js";
+import { scrollWindow } from "./scroll.js";
+import { contextLevel, contextPercent, editSummary, entryKeyOf, fitIdentityParts, fitSegments, foldCandidateOf, formatContext, formatDuration, formatTokens, groupIdentity, groupToolEntries, humanizeToolName, isUiBlock, previewLinesFor, previewRows, quietFor, REASONING_EXPAND_MAX_LINES, reasoningDurationMs, runPhase, STALLED_MS, } from "./state.js";
+import { highlightCode, imageTheme, levelColor, markdownDefaultTextStyle, markdownTheme, markdownTransform, sanitizeCode, style, } from "./theme.js";
 export const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 /** Shared animation clock advanced by the app while work is running. */
 export const clock = { frame: 0, now: Date.now() };
 const fit = (lines, width) => lines.map((l) => truncateToWidth(l, width));
 const wrap = (text, width) => text.split("\n").flatMap((line) => (line ? wrapTextWithAnsi(line, Math.max(1, width)) : [""]));
+/** ANSI-aware right padding to a visible width. */
+const padTo = (text, width) => `${text}${" ".repeat(Math.max(0, width - visibleWidth(text)))}`;
+const wrapCell = (text, width) => text.split("\n").flatMap((line) => (line ? wrapTextWithAnsi(line, Math.max(1, width)) : [""]));
+/**
+ * Rendered body of a tool call's rich parts (inline image + native ui block), reusing the exact
+ * singleton rendering so grouped detail rows and plain rows agree. Returns [] when there is none.
+ */
+function richBodyLines(view, width, markdownCache) {
+    const lines = [];
+    if (view.image) {
+        const inline = getCapabilities().images !== null && process.env.NO_COLOR === undefined;
+        if (inline) {
+            const image = new Image(view.image.data, view.image.mimeType, imageTheme, {
+                maxWidthCells: Math.max(10, Math.min(60, width - 4)),
+            });
+            lines.push(...image.render(Math.max(1, width - 2)));
+        }
+        else {
+            const dims = getImageDimensions(view.image.data, view.image.mimeType);
+            lines.push(style.dim(`[image: ${view.image.mimeType}${dims ? ` ${dims.widthPx}x${dims.heightPx}` : ""}]`));
+        }
+    }
+    if (view.ui) {
+        const inner = Math.max(1, width - 2);
+        if (view.ui.kind === "markdown") {
+            // Cache the Markdown instance so streaming/resizes never re-parse every frame.
+            if (markdownCache?.text !== view.ui.text)
+                markdownCache = {
+                    text: view.ui.text,
+                    renderer: new Markdown(view.ui.text, 0, 0, markdownTheme, markdownDefaultTextStyle, {
+                        transform: markdownTransform,
+                    }),
+                };
+            lines.push(...markdownCache.renderer.render(inner));
+        }
+        else {
+            lines.push(...renderUiBlock(view.ui, width, unicodeAt(width)));
+        }
+    }
+    return { lines, markdownCache: markdownCache ?? undefined };
+}
+/** Terminal Unicode support, mirroring the copy hint detection in AssistantBlock. */
+const unicodeAt = (width) => terminalCapabilities({ env: process.env, columns: width, tty: true }).unicode;
+/** Capped preview rows of one member call inside an expanded group (`… N more lines` footer). */
+function memberPreviewLines(member, indent) {
+    const rows = previewRows(member.preview ?? "");
+    if (!rows.length)
+        return [];
+    const cap = previewLinesFor(member.status);
+    const shown = rows.slice(0, cap);
+    const paint = member.status === "error" ? style.red : style.gray;
+    const lines = shown.map((line, n) => `${indent}  ${style.gray(n === 0 ? "⎿" : " ")} ${paint(line.replace(/\t/g, "  "))}`);
+    if (rows.length > shown.length)
+        lines.push(style.gray(`${indent}    … ${rows.length - shown.length} more lines`));
+    return lines;
+}
+/** `Command exited with code 0.` (green) / `Command exited with code N.` (red) when known. */
+export const exitCodeLine = (code, indent = "  ") => code === undefined
+    ? undefined
+    : `${indent}${code === 0 ? style.green("Command exited with code 0.") : style.red(`Command exited with code ${code}.`)}`;
+/**
+ * Aligned-column table rendering: cells wrap to their column width, the header is bold, a dim
+ * separator row sits under it, and the whole block respects the given inner width. Long values
+ * wrap instead of being cut; the final `truncateToWidth` pass only bites on very narrow
+ * terminals.
+ */
+function renderTableBlock(block, width) {
+    const caption = block.caption ? [style.dim(block.caption)] : [];
+    if (!block.columns.length)
+        return [...caption, style.gray("(empty table)")];
+    const inner = Math.max(1, width - 2);
+    const n = block.columns.length;
+    const natural = block.columns.map((header, i) => Math.max(1, visibleWidth(header), ...block.rows.map((row) => visibleWidth(row[i] ?? ""))));
+    const separatorCost = (n - 1) * 3;
+    const totalNatural = natural.reduce((a, b) => a + b, 0);
+    let widths;
+    if (totalNatural + separatorCost <= inner) {
+        widths = natural;
+    }
+    else {
+        const budget = Math.max(n, inner - separatorCost);
+        const scale = Math.min(1, budget / totalNatural);
+        widths = natural.map((w) => Math.max(1, Math.floor(w * scale)));
+        let left = budget - widths.reduce((a, b) => a + b, 0);
+        // Hand the leftover to the widest columns that still want space (round-robin, deterministic).
+        for (let round = 0; round < n && left > 0; round++) {
+            const widest = natural.findIndex((w, i) => (widths[i] ?? 0) < w);
+            if (widest < 0)
+                break;
+            widths[widest] = (widths[widest] ?? 0) + 1;
+            left--;
+        }
+    }
+    const cols = block.columns.map((header, i) => ({
+        header: wrapCell(header, widths[i] ?? 1),
+        body: block.rows.map((row) => wrapCell(row[i] ?? "", widths[i] ?? 1)),
+    }));
+    const headerHeight = Math.max(...cols.map((c) => c.header.length));
+    const lines = [];
+    for (let li = 0; li < headerHeight; li++)
+        lines.push(cols.map((c, i) => style.bold(padTo(c.header[li] ?? "", widths[i] ?? 1))).join(" | "));
+    lines.push(style.gray(cols.map((c, i) => "─".repeat(widths[i] ?? 1)).join(" │ ")));
+    for (const [ri] of block.rows.entries()) {
+        const wrapped = cols.map((c, i) => c.body[ri] ?? [""]);
+        const height = Math.max(...wrapped.map((w) => w.length));
+        for (let li = 0; li < height; li++)
+            lines.push(cols.map((c, i) => padTo(wrapped[i]?.[li] ?? "", widths[i] ?? 1)).join(" | "));
+    }
+    return [...caption, ...lines];
+}
+/** Two-column key-value rendering: bright-cyan keys padded left, values wrapped on the right. */
+function renderKeyValueBlock(block, width) {
+    const caption = block.caption ? [style.dim(block.caption)] : [];
+    if (!block.entries.length)
+        return [...caption, style.gray("(empty)")];
+    const inner = Math.max(1, width - 2);
+    const keyWidth = Math.min(24, Math.max(...block.entries.map(([k]) => visibleWidth(k)), 1));
+    const valueWidth = Math.max(1, inner - keyWidth - 2);
+    const lines = [];
+    for (const [key, value] of block.entries) {
+        wrapCell(value, valueWidth).forEach((line, i) => {
+            const keyPart = i === 0 ? style.brightCyan(padTo(key, keyWidth)) : " ".repeat(keyWidth);
+            lines.push(`${keyPart}  ${line}`);
+        });
+    }
+    return [...caption, ...lines];
+}
+/**
+ * Tree rendering with branch glyphs: `├─`/`└─`/`│` when the terminal supports Unicode, ASCII
+ * `|-`/`` `- ``/`|` otherwise.
+ */
+export function renderTreeLines(nodes, unicode) {
+    const branch = unicode ? "├─ " : "|- ";
+    const last = unicode ? "└─ " : "`- ";
+    const vertical = unicode ? "│  " : "|  ";
+    const gap = "   ";
+    const lines = [];
+    const walk = (items, prefix) => {
+        items.forEach((node, index) => {
+            const isLast = index === items.length - 1;
+            const meta = node.meta ? ` ${style.dim(`(${node.meta})`)}` : "";
+            lines.push(`${prefix}${isLast ? last : branch}${node.label}${meta}`);
+            if (node.children?.length)
+                walk(node.children, `${prefix}${isLast ? gap : vertical}`);
+        });
+    };
+    walk(nodes, "");
+    return lines;
+}
+/** Mini code block: dim fenced header, highlighted body (the same highlighter as markdown), dim close. */
+function renderCodeBlock(block, _width) {
+    const caption = block.caption ? [style.dim(block.caption)] : [];
+    return [
+        ...caption,
+        style.dim(block.lang ? `\`\`\`${block.lang}` : "```"),
+        ...highlightCode(block.code, block.lang),
+        style.dim("```"),
+    ];
+}
+/** Longest JSON/unknown-block text shown inline before a `… truncated` marker. */
+const MAX_BLOCK_LINES = 200;
+const MAX_BLOCK_CHARS = 20_000;
+/** Caps free-form text by lines and characters, appending a dim marker when anything is cut. */
+function capText(text) {
+    let out = text.length > MAX_BLOCK_CHARS ? text.slice(0, MAX_BLOCK_CHARS) : text;
+    const lines = out.split("\n");
+    if (lines.length > MAX_BLOCK_LINES)
+        out = lines.slice(0, MAX_BLOCK_LINES).join("\n");
+    return { text: out, truncated: out.length < text.length };
+}
+/** `JSON.stringify` that never throws and never returns `undefined`. */
+function jsonText(value) {
+    try {
+        return JSON.stringify(value, null, 2) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function renderCappedCode(code, lang, caption) {
+    const capped = capText(code);
+    return [
+        ...renderCodeBlock({
+            kind: "code",
+            code: capped.text,
+            ...(lang ? { lang } : {}),
+            ...(caption ? { caption } : {}),
+        }, 0),
+        ...(capped.truncated ? [style.gray("… truncated")] : []),
+    ];
+}
+function renderDiffBlock(block) {
+    const caption = [block.caption, block.path].filter(Boolean).join(" · ") || undefined;
+    if (block.patch !== undefined)
+        return renderCappedCode(block.patch, "diff", caption);
+    if (block.before === undefined && block.after === undefined)
+        return [...(caption ? [style.dim(caption)] : []), style.gray("(empty diff)")];
+    return [
+        ...(caption ? [style.dim(caption)] : []),
+        ...renderCappedCode(block.before ?? "", block.lang, "before"),
+        ...renderCappedCode(block.after ?? "", block.lang, "after"),
+    ];
+}
+function renderTerminalBlock(block) {
+    const head = block.command
+        ? [style.dim(`$ ${block.command}${block.cwd ? `  (${block.cwd})` : ""}`)]
+        : [];
+    const status = [
+        block.exitCode !== undefined ? `exit ${block.exitCode}` : "",
+        block.durationMs !== undefined ? formatDuration(block.durationMs) : "",
+    ]
+        .filter(Boolean)
+        .join(" · ");
+    const paint = block.exitCode !== undefined && block.exitCode !== 0 ? style.red : style.gray;
+    return [
+        ...head,
+        ...renderCappedCode(sanitizeCode(block.output), undefined),
+        ...(block.truncated ? [style.gray("… output truncated")] : []),
+        ...(status ? [paint(status)] : []),
+    ];
+}
+function renderTestResultsBlock(block, width, unicode) {
+    const cases = block.suites.flatMap((suite) => suite.cases.map((c) => ({ suite, c })));
+    const counts = new Map();
+    for (const { c } of cases)
+        counts.set(c.status, (counts.get(c.status) ?? 0) + 1);
+    const summary = [
+        block.framework,
+        ["passed", "failed", "skipped", "todo"]
+            .filter((status) => counts.get(status))
+            .map((status) => `${counts.get(status)} ${status}`)
+            .join(", ") || "no tests",
+        block.durationMs !== undefined ? formatDuration(block.durationMs) : undefined,
+    ]
+        .filter(Boolean)
+        .join(" · ");
+    const table = renderTableBlock({
+        kind: "table",
+        columns: ["suite", "case", "status", "time"],
+        rows: cases.map(({ suite, c }) => [
+            suite.name,
+            c.name,
+            c.status,
+            c.durationMs !== undefined ? formatDuration(c.durationMs) : "",
+        ]),
+        caption: summary,
+    }, width);
+    const errors = cases
+        .filter(({ c }) => c.status === "failed" && c.error)
+        .map(({ suite, c }) => style.red(`${unicode ? "✗" : "x"} ${suite.name} ${unicode ? "›" : ">"} ${c.name}${suite.file ? ` (${suite.file}${c.line !== undefined ? `:${c.line}` : ""})` : ""}: ${c.error}`));
+    return [...table, ...errors];
+}
+const PROGRESS_GLYPHS = {
+    unicode: { completed: "✓", running: "●", pending: "○", failed: "✗", cancelled: "⊘" },
+    ascii: { completed: "[x]", running: "[>]", pending: "[ ]", failed: "[!]", cancelled: "[-]" },
+};
+function renderProgressBlock(block, unicode) {
+    const glyphs = PROGRESS_GLYPHS[unicode ? "unicode" : "ascii"];
+    const paint = {
+        completed: style.green,
+        running: style.brightCyan,
+        pending: style.gray,
+        failed: style.red,
+        cancelled: style.gray,
+    };
+    return [
+        ...(block.title ? [style.bold(block.title)] : []),
+        ...(block.steps.length ? [] : [style.gray("(no steps)")]),
+        ...block.steps.map((step) => `${paint[step.status](glyphs[step.status])} ${step.label}${step.detail ? ` ${style.dim(step.detail)}` : ""}`),
+    ];
+}
+/** Text fallback for a kind this build does not know (or a malformed block): never throws. */
+function renderUnknownBlock(block) {
+    const kind = block && typeof block === "object" && typeof block.kind === "string"
+        ? block.kind
+        : "unknown";
+    return [style.gray(`[ui block: ${kind}]`), ...renderCappedCode(jsonText(block), "json")];
+}
+/** Local path of a published artifact (set by the TUI from the artifact store). */
+let artifactPath;
+export function setArtifactPathResolver(resolve) {
+    artifactPath = resolve;
+}
+/** The two-line announcement of an `artifact` block (kind, name, size and local path). */
+export function renderArtifactBlock(block, width, unicode, path) {
+    return artifactLines(block.artifact, {
+        width,
+        unicode,
+        home: homedir(),
+        ...((path ?? artifactPath?.(block.artifact.id))
+            ? { path: path ?? artifactPath?.(block.artifact.id) }
+            : {}),
+    });
+}
+/**
+ * Renders a `{type:"ui"}` block to styled lines for the given inner width. Blocks come from
+ * persisted transcripts too, so anything that does not validate (a kind added by a newer Alisio,
+ * or a malformed plugin block) falls back to labeled JSON instead of throwing.
+ */
+export function renderUiBlock(block, width, unicode) {
+    if (!isUiBlock(block))
+        return renderUnknownBlock(block);
+    switch (block.kind) {
+        case "table":
+            return renderTableBlock(block, width);
+        case "key-value":
+            return renderKeyValueBlock(block, width);
+        case "tree":
+            return renderTreeLines(block.nodes, unicode);
+        case "code":
+            return renderCodeBlock(block, width);
+        case "markdown": {
+            const md = new Markdown(block.text, 0, 0, markdownTheme, markdownDefaultTextStyle, {
+                transform: markdownTransform,
+            });
+            return md.render(Math.max(1, width - 2));
+        }
+        case "diff":
+            return renderDiffBlock(block);
+        case "terminal":
+            return renderTerminalBlock(block);
+        case "mermaid":
+            return renderCappedCode(block.source, "mermaid", block.title);
+        case "math":
+            return block.latex.split("\n");
+        case "json":
+            return renderCappedCode(jsonText(block.value), "json", block.caption);
+        case "test-results":
+            return renderTestResultsBlock(block, width, unicode);
+        case "progress":
+            return renderProgressBlock(block, unicode);
+        case "artifact":
+            return renderArtifactBlock(block, width, unicode);
+        default:
+            return renderUnknownBlock(block);
+    }
+}
 const permission = (label, state, priority) => ({
     text: `${label}:${state}`,
     priority,
@@ -28,20 +372,31 @@ export class Header {
     render(width) {
         const i = this.info(), v = this.view();
         const line1 = line([
-            { text: "◆ alisio", priority: 8, paint: (t) => style.bold(style.brightCyan(t)) },
+            { text: "◆ Alisio Code", priority: 8, paint: (t) => style.bold(style.brightCyan(t)) },
             { text: `v${i.version}`, priority: 1, paint: style.gray },
             {
-                text: v.model || "not connected",
+                text: i.modelName || v.model || "not connected",
                 priority: 10,
-                paint: v.model ? style.bold : style.yellow,
+                paint: v.model ? (t) => style.bold(style.cyan(t)) : style.yellow,
             },
-            ...(i.provider ? [{ text: i.provider, priority: 6, paint: style.cyan }] : []),
-            { text: i.host, priority: 5, paint: style.gray },
+            // `model · provider · effort` with each piece in a distinct color.
+            ...(i.provider ? [{ text: i.provider, priority: 6, paint: style.magenta }] : []),
+            ...(i.effort ? [{ text: i.effort, priority: 5, paint: style.yellow }] : []),
+            { text: i.host, priority: 4, paint: style.gray },
             { text: i.apiMode, priority: 2, paint: style.gray },
         ], width);
         const perms = i.readOnly
             ? [{ text: "read-only", priority: 10, paint: style.red }]
             : [
+                ...(i.mode
+                    ? [
+                        {
+                            text: `mode:${i.mode}`,
+                            priority: 10,
+                            paint: i.mode === "full" || i.mode === "custom" ? style.red : style.green,
+                        },
+                    ]
+                    : []),
                 permission("write", i.write, 10),
                 permission("process", i.process, 10),
                 {
@@ -53,6 +408,19 @@ export class Header {
         const line2 = line([
             { text: i.cwd, priority: 6, paint: style.cyan },
             { text: `session ${i.session}`, priority: 4, paint: style.gray },
+            // Priority 3 (below session's 4): the branch is ambient context, so on narrow terminals it
+            // drops first — before the session ID and permissions. At equal priority fitSegments drops
+            // the FIRST lowest-priority segment, which would mis-drop the session when branch sits
+            // after it, so the branch keeps a strictly lower priority instead.
+            ...(i.branch
+                ? [
+                    {
+                        text: branchDisplay(i.branch, terminalCapabilities({ env: process.env, columns: width, tty: true }).unicode),
+                        priority: 3,
+                        paint: style.cyan,
+                    },
+                ]
+                : []),
             ...perms,
         ], width);
         return fit([line1, line2, style.gray("─".repeat(Math.max(0, width)))], width);
@@ -63,11 +431,13 @@ export class Footer {
     budget;
     hint;
     statuses;
-    constructor(view, budget, hint, statuses = () => []) {
+    identity;
+    constructor(view, budget, hint, statuses = () => [], identity) {
         this.view = view;
         this.budget = budget;
         this.hint = hint;
         this.statuses = statuses;
+        this.identity = identity;
     }
     invalidate() { }
     render(width) {
@@ -78,10 +448,14 @@ export class Footer {
         const bar = pct === undefined
             ? style.gray("░".repeat(cells))
             : levelColor(level)("█".repeat(filled)) + style.gray("░".repeat(cells - filled));
+        const quiet = v.streaming ? quietFor(v, clock.now) : 0;
+        const quietNote = quiet
+            ? ` · no response for ${formatDuration(quiet)}${quiet >= STALLED_MS ? " (stuck?)" : ""}`
+            : "";
         const state = v.compacting
             ? `${SPINNER[clock.frame % SPINNER.length]} compacting`
             : v.streaming
-                ? `${SPINNER[clock.frame % SPINNER.length]} streaming ${formatDuration(clock.now - (v.runStartedAt ?? clock.now))}`
+                ? `${SPINNER[clock.frame % SPINNER.length]} ${runPhase(v).label} ${formatDuration(clock.now - (v.runStartedAt ?? clock.now))}${quietNote}`
                 : "● idle";
         const s = v.stats;
         const segments = [
@@ -90,7 +464,15 @@ export class Footer {
                 priority: 10,
                 paint: pct === undefined ? style.gray : levelColor(level),
             },
-            { text: state, priority: 9, paint: v.streaming || v.compacting ? style.cyan : style.green },
+            {
+                text: state,
+                priority: 9,
+                paint: quiet >= STALLED_MS
+                    ? style.yellow
+                    : v.streaming || v.compacting
+                        ? style.cyan
+                        : style.green,
+            },
             {
                 text: `↑${formatTokens(s.input)} ↓${formatTokens(s.output)}${s.cached ? ` ⚡${formatTokens(s.cached)}` : ""}`,
                 priority: 6,
@@ -109,7 +491,23 @@ export class Footer {
             (v.streaming || v.compacting
                 ? "Esc interrupt · Ctrl+C clear/exit"
                 : "Enter send · Shift+Enter newline · /help commands · Ctrl+D exit");
-        return fit([line1, style.dim(hint)], width);
+        // Status row below the editor: `agent: <name> · <model> · <provider> · <effort>`, each piece
+        // in a distinct color (model bold/cyan, provider magenta, effort yellow); the effort part is
+        // omitted when the active model advertises no supported levels. Truncation drops the lowest
+        // priority parts first (effort, then provider) before truncating what remains.
+        const identity = this.identity?.();
+        const identityLine = identity
+            ? fitIdentityParts(identity, width)
+                .map((part) => ({
+                agent: (t) => style.bold(style.magenta(t)),
+                mode: (t) => (/full|custom/.test(t) ? style.red(t) : style.green(t)),
+                model: (t) => style.bold(style.cyan(t)),
+                provider: style.magenta,
+                effort: style.yellow,
+            })[part.role](part.text))
+                .join(style.gray(" · "))
+            : undefined;
+        return fit(identityLine ? [identityLine, line1, style.dim(hint)] : [line1, style.dim(hint)], width);
     }
 }
 export class UserBlock {
@@ -130,49 +528,107 @@ export class UserBlock {
         ];
     }
 }
+/**
+ * Subtle, non-interactive copy affordance under a completed response: it only tells the user the
+ * raw response can be copied (`/copy`, or `c` on an empty input); it never triggers itself.
+ * Falls back to ASCII when the terminal cannot render Unicode (dumb terminal / C locale).
+ */
+const copyHint = (width) => {
+    const unicode = terminalCapabilities({ env: process.env, columns: width, tty: true }).unicode;
+    return `  ${style.dim(unicode ? "⎘ copy · /copy" : "[copy] · /copy")}`;
+};
 export class AssistantBlock {
-    markdown = new Markdown("", 0, 0, markdownTheme);
+    markdown = new Markdown("", 0, 0, markdownTheme, markdownDefaultTextStyle, {
+        transform: markdownTransform,
+    });
+    /** Bumped by TranscriptSync when this row's content changes; render caches on it. */
+    version = 0;
+    fold;
     item;
+    cache;
     constructor(item) {
         this.item = item;
         this.markdown.setText(item.text);
     }
-    update(item) {
+    update(item, fold) {
         if (item.text !== this.item.text)
             this.markdown.setText(item.text);
         this.item = item;
+        this.fold = fold;
     }
     invalidate() {
         this.markdown.invalidate();
+        this.cache = undefined;
     }
     render(width) {
-        const lines = [""];
         const reasoning = this.item.reasoning.trim();
+        // The live thinking view animates with streaming deltas and must never be cached.
+        const live = !!reasoning && !this.item.text && !this.item.done;
+        if (!live &&
+            this.cache?.width === width &&
+            this.cache.version === this.version &&
+            this.cache.fold?.expanded === this.fold?.expanded)
+            return this.cache.lines;
+        const lines = [""];
         if (reasoning) {
-            if (this.item.done || this.item.text) {
-                const words = reasoning.split(/\s+/).length;
-                lines.push(style.dim(style.italic(`✻ reasoning (${words} words)`)));
-            }
-            else {
+            if (live) {
                 lines.push(style.dim(style.italic("✻ thinking…")));
                 lines.push(...wrap(reasoning, width - 2)
                     .slice(-4)
                     .map((l) => style.dim(`  ${l}`)));
             }
+            else {
+                // Finished: a collapsible `+ Thought · 2.9s` header; expanded shows the bounded text.
+                const expanded = this.fold?.expanded ?? false;
+                const duration = reasoningDurationMs(this.item);
+                lines.push(`${style.dim(expanded ? "−" : "+")} ${style.dim(style.italic("Thought"))}${duration !== undefined ? ` ${style.dim(`· ${formatDuration(duration)}`)}` : ""}`);
+                if (expanded) {
+                    const wrapped = wrap(reasoning, Math.max(1, width - 4));
+                    lines.push(...wrapped.slice(0, REASONING_EXPAND_MAX_LINES).map((l) => `  ${style.dim(l)}`));
+                    if (wrapped.length > REASONING_EXPAND_MAX_LINES)
+                        lines.push(style.gray(`  … reasoning truncated (${wrapped.length - REASONING_EXPAND_MAX_LINES} more lines)`));
+                }
+            }
         }
-        if (this.item.text)
+        if (this.item.text) {
             lines.push(...this.markdown.render(width));
-        return fit(lines, width);
+            // The affordance appears only once the answer is complete (never while streaming).
+            if (this.item.done)
+                lines.push(copyHint(width));
+        }
+        const out = fit(lines, width);
+        if (!live)
+            this.cache = { width, version: this.version, fold: this.fold, lines: out };
+        return out;
     }
 }
 export class ToolBlock {
     item;
+    /** Bumped by TranscriptSync when this row's content changes; render caches on it. */
+    version = 0;
+    fold;
+    markdown;
+    cache;
     constructor(item) {
         this.item = item;
     }
-    invalidate() { }
+    update(item, fold) {
+        this.item = item;
+        this.fold = fold;
+    }
+    invalidate() {
+        this.cache = undefined;
+    }
     render(width) {
         const i = this.item;
+        // Running/approval rows animate and must never be cached; terminal rows only change when
+        // TranscriptSync bumps `version`, so clock frames between events reuse the cached lines.
+        const live = i.status === "running" || i.status === "approval";
+        if (!live &&
+            this.cache?.width === width &&
+            this.cache.version === this.version &&
+            this.cache.fold?.expanded === this.fold?.expanded)
+            return this.cache.lines;
         const icon = i.status === "running"
             ? style.cyan(SPINNER[clock.frame % SPINNER.length] ?? "…")
             : i.status === "approval"
@@ -180,12 +636,13 @@ export class ToolBlock {
                 : i.status === "ok"
                     ? style.green("✓")
                     : style.red("✗");
+        const marker = this.fold ? `${style.dim(this.fold.expanded ? "−" : "+")} ` : "";
         const right = i.status === "approval"
             ? style.yellow("awaiting approval")
             : i.durationMs !== undefined
                 ? style.gray(formatDuration(i.durationMs))
                 : "";
-        const head = `${icon} ${style.bold(i.name)} ${style.gray(i.summary)}`;
+        const head = `${marker}${icon} ${style.bold(humanizeToolName(i.name))} ${style.gray(i.summary)}`;
         const gap = width - visibleWidth(head) - visibleWidth(right) - 1;
         const lines = [
             gap > 0 ? `${head}${" ".repeat(gap + 1)}${right}` : truncateToWidth(head, width),
@@ -199,17 +656,93 @@ export class ToolBlock {
             if (diff.lines.length > max)
                 lines.push(style.gray(`    … ${diff.lines.length - max} more lines`));
         }
-        if (i.preview && (i.status === "error" || !diff)) {
-            const preview = i.preview.split("\n").filter((l) => l.trim());
-            const shown = preview.slice(0, i.status === "error" ? 6 : 3);
+        // Native rich rendering: an inline image (when the terminal supports images and color is
+        // on) and/or a structured ui block replace the plain preview, exactly as the emitted text
+        // projection reads. Every rich line is indented two spaces like the preview lines.
+        const rich = richBodyLines(i, width, this.markdown);
+        const richLines = rich.lines;
+        if (rich.markdownCache)
+            this.markdown = rich.markdownCache;
+        if (richLines.length) {
+            lines.push(...richLines.map((line) => `  ${line}`));
+        }
+        else if (i.preview && (i.status === "error" || !diff)) {
+            const rows = previewRows(i.preview);
+            const cap = previewLinesFor(i.status);
+            const expanded = this.fold?.expanded ?? false;
+            const shown = expanded ? rows : rows.slice(0, cap);
             const paint = i.status === "error" ? style.red : style.gray;
             shown.forEach((l, n) => {
                 lines.push(`  ${style.gray(n === 0 ? "⎿" : " ")} ${paint(l.replace(/\t/g, "  "))}`);
             });
-            if (preview.length > shown.length)
-                lines.push(style.gray(`    … ${preview.length - shown.length} more lines`));
+            if (!expanded && rows.length > shown.length)
+                lines.push(style.gray(`    … ${rows.length - shown.length} more lines`));
         }
-        return fit(lines, width);
+        const exitLine = exitCodeLine(i.exitCode);
+        if (exitLine)
+            lines.push(exitLine);
+        const out = fit(lines, width);
+        if (!live)
+            this.cache = { width, version: this.version, fold: this.fold, lines: out };
+        return out;
+    }
+}
+/**
+ * One collapsible row for a GROUPED batch of finished tool calls (e.g. `✓ Read File — 3 reads`).
+ * Collapsed it shows the aggregate header; expanded, each call with its status, duration,
+ * summary and capped preview/rich body. All members are terminal, so lines are cached per
+ * version/width/fold just like the other terminal rows.
+ */
+export class ToolGroupBlock {
+    group;
+    /** Bumped by TranscriptSync when this row's content changes; render caches on it. */
+    version = 0;
+    fold;
+    cache;
+    constructor(group) {
+        this.group = group;
+    }
+    update(group, fold) {
+        this.group = group;
+        this.fold = fold;
+    }
+    invalidate() {
+        this.cache = undefined;
+    }
+    render(width) {
+        if (this.cache?.width === width &&
+            this.cache.version === this.version &&
+            this.cache.fold?.expanded === this.fold?.expanded)
+            return this.cache.lines;
+        const g = this.group;
+        const expanded = this.fold?.expanded ?? false;
+        const icon = g.status === "error" ? style.red("✗") : style.green("✓");
+        const head = `${style.dim(expanded ? "−" : "+")} ${icon} ${style.bold(g.label)} — ${g.members.length} ${g.word}${g.totalMs > 0 ? ` ${style.gray(`· ${formatDuration(g.totalMs)}`)}` : ""}`;
+        const lines = [head];
+        if (expanded) {
+            for (const member of g.members) {
+                const micon = member.status === "error" ? style.red("✗") : style.green("✓");
+                const name = member.humanName === member.name
+                    ? style.bold(member.humanName)
+                    : `${style.bold(member.humanName)} ${style.dim(`(${member.name})`)}`;
+                lines.push(`  ${micon} ${name}${member.durationMs !== undefined
+                    ? ` ${style.gray(`· ${formatDuration(member.durationMs)}`)}`
+                    : ""}${member.summary ? ` ${style.gray(member.summary)}` : ""}`);
+                const rich = richBodyLines(member, width);
+                if (rich.lines.length) {
+                    lines.push(...rich.lines.map((line) => `    ${line}`));
+                }
+                else {
+                    lines.push(...memberPreviewLines(member, "  "));
+                }
+                const exitLine = exitCodeLine(member.exitCode, "    ");
+                if (exitLine)
+                    lines.push(exitLine);
+            }
+        }
+        const out = fit(lines, width);
+        this.cache = { width, version: this.version, fold: this.fold, lines: out };
+        return out;
     }
 }
 export class LineBlock {
@@ -229,7 +762,9 @@ export class LineBlock {
 export class InfoBlock {
     markdown;
     constructor(text) {
-        this.markdown = new Markdown(text, 1, 0, markdownTheme);
+        this.markdown = new Markdown(text, 1, 0, markdownTheme, markdownDefaultTextStyle, {
+            transform: markdownTransform,
+        });
     }
     invalidate() {
         this.markdown.invalidate();
@@ -239,18 +774,184 @@ export class InfoBlock {
         return fit(["", ...inner.map((l) => `${style.gray("│")} ${l}`)], width);
     }
 }
-export function componentFor(item) {
-    switch (item.kind) {
+/**
+ * Minimum usable inner width (cells) the transcript keeps no matter how narrow the terminal is or
+ * how large the configured inset grows. The effective inset is clamped so this floor is honored,
+ * which also keeps the inner width positive.
+ */
+export const MIN_CONTENT_WIDTH = 20;
+/**
+ * Inset actually applied on each side: the configured value capped so the inner column stays at
+ * least `MIN_CONTENT_WIDTH` wide. On terminals narrower than that floor the inset degrades to 0
+ * rather than overflowing (the inner width then simply equals the terminal width).
+ */
+export function effectiveContentInset(width, inset) {
+    const requested = Math.max(0, Math.floor(inset));
+    const max = Math.max(0, Math.floor((Math.floor(width) - MIN_CONTENT_WIDTH) / 2));
+    return Math.min(requested, max);
+}
+/** Inner width handed to transcript children after the effective inset is applied. Always >= 1. */
+export function contentInnerWidth(width, inset) {
+    return Math.max(1, Math.floor(width) - effectiveContentInset(width, inset) * 2);
+}
+/**
+ * Applies the transcript's horizontal inset in ONE place: it hands children a reduced width and
+ * prefixes every produced line with the inset, so all transcript chrome (text, copy hint, tool
+ * sub-lines, reasoning lines, group headers) shares the same visual column. The reduced width is a
+ * deterministic function of the terminal width, so per-row caches keyed by width stay effective.
+ */
+export class ContentInset {
+    inner;
+    inset;
+    constructor(inner, inset) {
+        this.inner = inner;
+        this.inset = inset;
+    }
+    invalidate() {
+        this.inner.invalidate();
+    }
+    render(width) {
+        const inset = effectiveContentInset(width, this.inset());
+        const lines = this.inner.render(contentInnerWidth(width, inset));
+        if (!inset)
+            return lines;
+        const pad = " ".repeat(inset);
+        return lines.map((line) => `${pad}${line}`);
+    }
+}
+export function componentFor(entry) {
+    if (entry.kind === "group")
+        return new ToolGroupBlock(entry.group);
+    switch (entry.kind) {
         case "user":
-            return new UserBlock(item.text);
+            return new UserBlock(entry.text);
         case "assistant":
-            return new AssistantBlock(item);
+            return new AssistantBlock(entry);
         case "tool":
-            return new ToolBlock(item);
+            return new ToolBlock(entry);
         case "info":
-            return new InfoBlock(item.text);
+            return new InfoBlock(entry.text);
         default:
-            return new LineBlock(item.text, item.kind);
+            return new LineBlock(entry.text, entry.kind);
+    }
+}
+/** Applies a fresh entry (and its fold state) to a component; kinds never collide under a key. */
+function updateComponent(component, entry, fold) {
+    if (entry.kind === "assistant" && component instanceof AssistantBlock)
+        return component.update(entry, fold);
+    if (entry.kind === "tool" && component instanceof ToolBlock)
+        return component.update(entry, fold);
+    if (entry.kind === "group" && component instanceof ToolGroupBlock)
+        return component.update(entry.group, fold);
+}
+/** Whether a reused component can adopt the (new) entry kind (foldable rows also carry `version`). */
+function isCompatible(component, entry) {
+    return ((entry.kind === "assistant" && component instanceof AssistantBlock) ||
+        (entry.kind === "tool" && component instanceof ToolBlock) ||
+        (entry.kind === "group" && component instanceof ToolGroupBlock) ||
+        ((entry.kind === "user" ||
+            entry.kind === "notice" ||
+            entry.kind === "info" ||
+            entry.kind === "error") &&
+            !(component instanceof AssistantBlock) &&
+            !(component instanceof ToolBlock) &&
+            !(component instanceof ToolGroupBlock)));
+}
+/**
+ * Keeps a container of transcript components in step with view-model items. Rows are keyed
+ * (stable per fold candidate: tool ids, group ids, append-only item indices) and reused across
+ * syncs; batch groups replace their members' singleton components with one row once all of them
+ * finish. Content versions bump only when a row's entry actually changed, so clock frames
+ * between events reuse each component's cached lines instead of re-rendering. `setFoldResolver`
+ * supplies the effective expanded state; the same resolution feeds `entryAt`, so keybindings
+ * and mouse clicks agree with the renderer.
+ */
+export class TranscriptSync {
+    container = new Container();
+    rows = new Map();
+    order = [];
+    foldOf = (candidate) => candidate.defaultExpanded;
+    setFoldResolver(resolver) {
+        this.foldOf = resolver;
+    }
+    sync(items) {
+        const entries = groupToolEntries(items);
+        const kept = new Set();
+        for (const { entry, at } of entries) {
+            const key = entryKeyOf(entry, at);
+            kept.add(key);
+            const candidate = foldCandidateOf(entry, at);
+            const fold = candidate
+                ? { expanded: this.foldOf(candidate), kind: candidate.kind }
+                : undefined;
+            const row = this.rows.get(key);
+            if (row && isCompatible(row.component, entry)) {
+                const same = row.entry === entry ||
+                    (entry.kind === "group" &&
+                        row.entry.kind === "group" &&
+                        groupIdentity(entry.group) === groupIdentity(row.entry.group));
+                if (!same) {
+                    row.version++;
+                    row.entry = entry;
+                    row.at = at;
+                }
+                updateComponent(row.component, entry, fold);
+                if (row.component instanceof AssistantBlock ||
+                    row.component instanceof ToolBlock ||
+                    row.component instanceof ToolGroupBlock)
+                    row.component.version = row.version;
+            }
+            else {
+                // Key collision across kinds (defensive; keys are per-kind in practice): drop any stale
+                // component so the container never renders a duplicated row, then add the fresh one.
+                if (row)
+                    this.container.removeChild(row.component);
+                const component = componentFor(entry);
+                updateComponent(component, entry, fold);
+                this.rows.set(key, { entry, at, component, version: 0 });
+                this.container.addChild(component);
+            }
+        }
+        for (const [key, row] of this.rows)
+            if (!kept.has(key)) {
+                this.container.removeChild(row.component);
+                this.rows.delete(key);
+            }
+        this.order = entries.map(({ entry, at }) => entryKeyOf(entry, at));
+        // Preserve external children (startup banner) at the front, then managed rows in item order.
+        const managed = new Set(this.order.map((k) => this.rows.get(k)?.component).filter((c) => !!c));
+        this.container.children = [
+            ...this.container.children.filter((c) => !managed.has(c)),
+            ...this.order.map((k) => this.rows.get(k).component),
+        ];
+    }
+    /**
+     * Fold candidate at a transcript content row, when the click landed on the row's header
+     * (assistant entries start with a blank spacer line, so their first two rows count). Used by
+     * click-to-toggle; keyboard toggling uses `foldCandidates` instead and needs no heights.
+     */
+    entryAt(contentY, width) {
+        let acc = 0;
+        for (const key of this.order) {
+            const row = this.rows.get(key);
+            if (!row)
+                continue;
+            const height = row.component.render(width).length;
+            if (contentY >= acc && contentY < acc + height) {
+                const candidate = foldCandidateOf(row.entry, row.at);
+                if (!candidate)
+                    return undefined;
+                const headerRows = row.entry.kind === "assistant" ? 2 : 1;
+                return contentY < acc + headerRows ? candidate : undefined;
+            }
+            acc += height;
+        }
+        return undefined;
+    }
+    reset() {
+        this.rows.clear();
+        this.order = [];
+        this.container.clear();
     }
 }
 /** Startup screen rendered by core for the current width (cached until the width changes). */
@@ -269,34 +970,6 @@ export class BannerBlock {
         return fit(this.cache.lines, width);
     }
 }
-/** Keeps a container of transcript components in step with view-model items. */
-export class TranscriptSync {
-    container = new Container();
-    rendered = [];
-    sync(items) {
-        if (items.length < this.rendered.length)
-            this.reset();
-        items.forEach((item, index) => {
-            const entry = this.rendered[index];
-            if (!entry) {
-                const component = componentFor(item);
-                this.container.addChild(component);
-                this.rendered.push({ item, component });
-            }
-            else if (entry.item !== item) {
-                if (entry.component instanceof AssistantBlock && item.kind === "assistant")
-                    entry.component.update(item);
-                else if (entry.component instanceof ToolBlock && item.kind === "tool")
-                    entry.component.item = item;
-                entry.item = item;
-            }
-        });
-    }
-    reset() {
-        this.container.clear();
-        this.rendered = [];
-    }
-}
 /** Renders one of several components (main conversation or a read-only child view). */
 export class Switch {
     pick;
@@ -485,3 +1158,226 @@ export class QuestionPanel {
         return fit(lines, width);
     }
 }
+/**
+ * The plan review panel (`exit_plan`): the three decisions under the plan the transcript already
+ * shows. "Add context" turns the panel into a one-line text field (Enter sends, Esc goes back);
+ * Esc while choosing is "Skip for now". The logic lives in `plan-review.ts`.
+ */
+export class PlanReviewPanel {
+    header;
+    onSubmit;
+    placeholder;
+    state;
+    constructor(options, header, onSubmit, placeholder = "Add context for the plan") {
+        this.header = header;
+        this.onSubmit = onSubmit;
+        this.placeholder = placeholder;
+        this.state = initialPlanReviewState(options);
+    }
+    invalidate() { }
+    dispatch(action) {
+        const { state, effect } = reducePlanReview(this.state, action);
+        this.state = state;
+        if (effect)
+            this.onSubmit(effect);
+    }
+    handleInput(data) {
+        const text = this.state.mode === "text";
+        if (matchesKey(data, Key.escape))
+            return this.dispatch({ type: "escape" });
+        if (matchesKey(data, Key.enter))
+            return this.dispatch({ type: "confirm" });
+        if (!text) {
+            if (matchesKey(data, Key.up))
+                return this.dispatch({ type: "up" });
+            if (matchesKey(data, Key.down))
+                return this.dispatch({ type: "down" });
+            return;
+        }
+        if (matchesKey(data, Key.left))
+            return this.dispatch({ type: "left" });
+        if (matchesKey(data, Key.right))
+            return this.dispatch({ type: "right" });
+        if (matchesKey(data, Key.home))
+            return this.dispatch({ type: "home" });
+        if (matchesKey(data, Key.end))
+            return this.dispatch({ type: "end" });
+        if (matchesKey(data, Key.backspace))
+            return this.dispatch({ type: "backspace" });
+        if (matchesKey(data, Key.delete))
+            return this.dispatch({ type: "delete" });
+        this.dispatch({ type: "insert", text: data });
+    }
+    render(width) {
+        const s = this.state;
+        const lines = [];
+        const { title, revision, artifactId, question } = this.header;
+        lines.push(truncateToWidth(`${style.bold(style.yellow("Plan review"))} ${style.dim(`${title}${revision > 1 ? ` · revision ${revision}` : ""}`)}`, width));
+        lines.push(...wrap(question, Math.max(1, width - 2)).map((l) => `  ${l}`));
+        s.options.forEach((option, i) => {
+            const focused = i === s.cursor;
+            const cursor = focused ? style.cyan("❯ ") : "  ";
+            const label = focused ? style.bold(style.cyan(option.label)) : option.label;
+            const tag = option.recommended ? ` ${style.green("(recommended)")}` : "";
+            lines.push(truncateToWidth(`${cursor}${label}${tag}`, width));
+        });
+        if (s.mode === "text") {
+            const value = Array.from(s.text.value);
+            const before = value.slice(0, s.text.cursor).join("");
+            const current = value[s.text.cursor] ?? " ";
+            const after = value.slice(s.text.cursor + 1).join("");
+            lines.push(truncateToWidth(value.length
+                ? `  ${style.brightCyan("›")} ${before}${style.brightCyan(`▏${current}`)}${after}`
+                : `  ${style.brightCyan("›")} ${style.dim(this.placeholder)} ${style.brightCyan("▏")}`, width));
+        }
+        if (artifactId)
+            lines.push(style.dim(`  Saved as plan.md (artifact ${artifactId}) · /artifacts`));
+        lines.push(style.dim(`  ${s.mode === "text" ? "Enter send · Esc back to the choices" : "↑↓ select · Enter confirm · Esc skip for now"}`));
+        return fit(lines, width);
+    }
+}
+/**
+ * The `/btw` side-question panel (picker slot, never the transcript): a pending question with a
+ * spinner, then the answer rendered as Markdown like assistant text, scrollable, with ←/→ through
+ * the session's earlier side answers. `onClose` runs on Esc (the app cancels a pending question).
+ */
+/**
+ * A scrollable Markdown panel in the picker slot (`/changelog`): Up/Down and PgUp/PgDn scroll,
+ * Home/End jump, Esc or q closes. Pure rendering: the text and the height come from the caller.
+ */
+export class MarkdownPanel {
+    title;
+    markdown;
+    onClose;
+    height;
+    scroll = 0;
+    cache;
+    constructor(title, markdown, onClose, height) {
+        this.title = title;
+        this.markdown = markdown;
+        this.onClose = onClose;
+        this.height = height;
+    }
+    invalidate() {
+        this.cache = undefined;
+    }
+    handleInput(data) {
+        if (matchesKey(data, Key.escape) || data === "q")
+            return this.onClose();
+        const page = Math.max(1, this.height());
+        if (matchesKey(data, Key.up))
+            this.scroll -= 1;
+        else if (matchesKey(data, Key.down))
+            this.scroll += 1;
+        else if (matchesKey(data, Key.pageUp))
+            this.scroll -= page;
+        else if (matchesKey(data, Key.pageDown))
+            this.scroll += page;
+        else if (matchesKey(data, Key.home))
+            this.scroll = 0;
+        else if (matchesKey(data, Key.end))
+            this.scroll = Number.MAX_SAFE_INTEGER;
+    }
+    render(width) {
+        const inner = Math.max(1, width - 2);
+        if (this.cache?.width !== inner)
+            this.cache = {
+                width: inner,
+                lines: new Markdown(this.markdown, 0, 0, markdownTheme, markdownDefaultTextStyle, {
+                    transform: markdownTransform,
+                }).render(inner),
+            };
+        const view = scrollWindow(this.cache.lines, this.scroll, Math.max(3, this.height()));
+        this.scroll = view.scroll;
+        const bar = style.gray("│");
+        return fit([
+            "",
+            style.bold(style.yellow(this.title)),
+            ...(view.above ? [`${bar} ${style.dim("↑ more")}`] : []),
+            ...view.lines.map((line) => `${bar} ${line}`),
+            ...(view.below ? [`${bar} ${style.dim("↓ more")}`] : []),
+            style.dim(`  ${view.above || view.below ? "↑/↓ PgUp/PgDn scroll · " : ""}Esc close`),
+        ], width);
+    }
+}
+export class BtwPanel {
+    state;
+    onClose;
+    height;
+    markdown;
+    constructor(state, onClose, height) {
+        this.state = state;
+        this.onClose = onClose;
+        this.height = height;
+    }
+    get pending() {
+        return !!this.state.pending;
+    }
+    dispatch(action) {
+        this.state = reduceBtw(this.state, action);
+    }
+    invalidate() {
+        this.markdown = undefined;
+    }
+    handleInput(data) {
+        if (matchesKey(data, Key.escape))
+            return this.onClose();
+        if (matchesKey(data, Key.left))
+            return this.dispatch({ type: "prev" });
+        if (matchesKey(data, Key.right))
+            return this.dispatch({ type: "next" });
+        if (matchesKey(data, Key.up))
+            return this.dispatch({ type: "scroll", lines: -1 });
+        if (matchesKey(data, Key.down))
+            return this.dispatch({ type: "scroll", lines: 1 });
+        if (matchesKey(data, Key.pageUp))
+            return this.dispatch({ type: "scroll", lines: -this.height() });
+        if (matchesKey(data, Key.pageDown))
+            return this.dispatch({ type: "scroll", lines: this.height() });
+    }
+    answerLines(id, text, width) {
+        if (this.markdown?.id === id && this.markdown.width === width)
+            return this.markdown.lines;
+        const lines = new Markdown(text, 0, 0, markdownTheme, markdownDefaultTextStyle, {
+            transform: markdownTransform,
+        }).render(Math.max(1, width));
+        this.markdown = { id, width, lines };
+        return lines;
+    }
+    render(width) {
+        const s = this.state;
+        const inner = Math.max(1, width - 2);
+        const bar = style.gray("│");
+        const current = btwCurrent(s);
+        const position = btwPosition(s);
+        const lines = [
+            "",
+            `${style.bold(style.yellow("btw"))}${position ? ` ${style.dim(position)}` : ""}${style.dim(" · side question, not added to the conversation")}`,
+        ];
+        const question = s.pending?.question ?? s.error?.question ?? current?.question ?? "";
+        lines.push(...wrap(question, inner).map((l) => `${bar} ${style.bold(l)}`));
+        let overflow = false;
+        if (s.pending) {
+            const spinner = SPINNER[clock.frame % SPINNER.length] ?? "…";
+            lines.push(`${bar} ${style.cyan(spinner)} Thinking… ${style.dim(formatDuration(clock.now - s.pending.startedAt))}`);
+        }
+        else if (s.error) {
+            lines.push(...wrap(s.error.message, inner).map((l) => `${bar} ${style.red(l)}`));
+        }
+        else if (current) {
+            const body = this.answerLines(current.id, current.answer, inner);
+            const view = btwWindow(body, s.scroll, Math.max(3, this.height()));
+            if (view.scroll !== s.scroll)
+                this.state = { ...s, scroll: view.scroll };
+            overflow = view.above || view.below;
+            if (view.above)
+                lines.push(`${bar} ${style.dim("↑ more")}`);
+            lines.push(...view.lines.map((l) => `${bar} ${l}`));
+            if (view.below)
+                lines.push(`${bar} ${style.dim("↓ more")}`);
+            lines.push(`${bar} ${style.dim(btwUsageLine(current))}`);
+        }
+        lines.push(style.dim(`  ${btwHints(this.state, overflow)}`));
+        return fit(lines, width);
+    }
+}