@sagmans/dsh-tui 0.4.0 → 0.5.0

package/lib/ui/view.js

@@ -1,15 +1,26 @@
-import { visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
-import { cardDetailRows, shellFoldHint, shellRetentionHint } from "../cards.js";
+import { visibleWidth, wrapTextWithAnsi, } from '@earendil-works/pi-tui';
+import { cardDetailRows, clip, oneLine, shellFoldHint, shellRetentionHint } from "../cards.js";
 import { defaultKeymap, hintKeys } from "../input/actions.js";
 import { CUSTOM_ROW_NUMBER } from "../gates.js";
-import { displayText } from "../text.js";
+import { DEFAULT_TOOL_DISPLAY } from "../tool-display.js";
 import { CARD_ROW_TOKEN } from "../theme-tokens.js";
-import { canFrame, frameText } from "./frame.js";
+import { codeBlockLines } from "./diff.js";
+import { canFrame, frameLines, FRAME_COLUMNS, textWidth } from "./frame.js";
+import { ANSWER_FACE } from "./markdown.js";
+import { pickerCardLines } from "./picker-card.js";
 import { RowCache } from "./rows.js";
 const DETAIL_INDENT = '    ';
 const OPTION_INDENT = '   ';
 /** A nested call is a signpost under its card, so it sits one step shallower than that card's detail. */
 const SUBCALL_INDENT = '  ';
+/**
+ * Blank columns a one-line tool row keeps at the right edge.
+ *
+ * The cut mark would otherwise sit under the terminal's own last column, where
+ * a border or the cursor lives; the padding is part of the look, not a
+ * preference, so it is not a settings key.
+ */
+const COLLAPSED_EDGE_PADDING = 5;
 /** The mark a cursor falls back to when the reader has not set one, so no literal lives in a template. */
 const CURSOR_MARK = '❯';
 const APPROVAL_MARK = '⚠';
@@ -42,21 +53,74 @@ const STAT_TOKEN = {
     removed: 'tool.stat.removed',
     size: 'tool.stat.size',
 };
+/**
+ * A markdown theme that keeps every element in one token.
+ *
+ * A thought is deliberately recessive, and the answer's theme would let a
+ * heading or a link inside it outshine the answer it produced. The structure
+ * still shows because markdown draws it around the text — bullets, fences,
+ * indents, table rules — rather than in the text's own colour. A fenced diff is
+ * the one block that does not recede: red and green are what the fence means
+ * rather than how loudly it is drawn, and a thought showing a change is the
+ * place the reader most needs to see which side of it moved.
+ */
+function recessiveMarkdownTheme(style, theme) {
+    return {
+        heading: style,
+        link: style,
+        linkUrl: style,
+        code: style,
+        codeBlock: style,
+        codeBlockBorder: style,
+        quote: style,
+        quoteBorder: style,
+        hr: style,
+        listBullet: style,
+        bold: style,
+        italic: style,
+        strikethrough: style,
+        underline: style,
+        highlightCode: (code, lang) => codeBlockLines(code, lang, {
+            style: (token, text) => theme.style(token, text),
+            visible: token => theme.visible(token),
+            plain: style,
+        }),
+    };
+}
 /**
  * The state a reader gets before opening anything, and the view's own fallback.
  *
- * Cards and thoughts start folded because either can be long enough to push the
- * answer off the screen. A program's calls are the opposite case: one clipped
- * line each, under a header that already names them, so folding them costs a
- * reader the very thing the card stands for.
+ * Thoughts start folded because they can be long enough to push the answer off
+ * the screen. Cards and a program's calls start from the reader's own `tools:`
+ * settings, which ship folded for cards — one clipped line each — and inline for
+ * a program's calls, whose one line per dispatch is what the card stands for.
  */
 export const DEFAULT_VIEW_STATE = { expandCards: false, expandReasoning: false, expandSubCalls: true };
+/** Keys are prefixed because cards, thoughts, and dispatches all share one map. */
+const toolClickKey = (id) => (id === '' ? undefined : `tool:${id}`);
+const reasoningClickKey = (id) => (id === '' ? undefined : `reason:${id}`);
+const subCallClickKey = (parentId, id) => `sub:${parentId}/${id}`;
+/** The column a one-line tool row must not pass, so a cut never reaches the edge. */
+const collapsedEdge = (width) => Math.max(1, width - COLLAPSED_EDGE_PADDING);
 export class TranscriptView {
     model;
     theme;
     markdown;
     options;
     rows;
+    /**
+     * Fold choices the reader made by clicking, per message.
+     *
+     * Absent means the key or the tool's own policy decides, so a settings edit
+     * stays in charge of messages nobody clicked. Keyed by the call or thought id
+     * rather than by the entry, because a result replaces the entry a click was
+     * made on and a thought outlives the live row that streamed it.
+     */
+    clicked = new Map();
+    /** The rows each clickable message drew last render, for mapping a click back to it. */
+    spans = [];
+    /** The same spans relative to their entry, so a cached entry still answers clicks. */
+    entrySpans = new WeakMap();
     constructor(model, theme, markdown, options = {}) {
         this.model = model;
         this.theme = theme;
@@ -67,6 +131,56 @@ export class TranscriptView {
     get viewState() {
         return this.options.state?.() ?? DEFAULT_VIEW_STATE;
     }
+    /** The display the reader configured for a tool, or the shipped one. */
+    toolDisplay(tool) {
+        return this.options.toolDisplay?.(tool) ?? DEFAULT_TOOL_DISPLAY;
+    }
+    /**
+     * Whether one tool message draws open.
+     *
+     * A click outranks the key, which outranks the tool's start state: Ctrl+O
+     * stays "show me everything", while one clicked message keeps the state the
+     * reader gave it.
+     */
+    expansionOf(entry) {
+        const key = toolClickKey(entry.id);
+        const clicked = key === undefined ? undefined : this.clicked.get(key);
+        return clicked ?? (this.viewState.expandCards || !this.toolDisplay(entry.card.tool).collapsed);
+    }
+    /** Whether one thought draws its body; a click decides for that thought alone. */
+    reasoningOpen(entry) {
+        const key = reasoningClickKey(entry.id);
+        const clicked = key === undefined ? undefined : this.clicked.get(key);
+        return clicked ?? this.viewState.expandReasoning;
+    }
+    /** Whether one dispatched call draws its argument in full; a click decides for that call. */
+    subCallOpen(parentId, id) {
+        return this.clicked.get(subCallClickKey(parentId, id)) ?? false;
+    }
+    /**
+     * Answer a click on a message by folding or unfolding that one row.
+     *
+     * The tightest span under the point wins, so a click on a dispatched call
+     * opens that call rather than the card around it. Only a left click is
+     * consumed: a press, a drag, and a wheel belong to the surface's own
+     * selection and scrolling, and a row that swallowed them would cost the
+     * reader the ability to copy the command it just drew.
+     */
+    handleMouse(event) {
+        if (event.type !== 'click' || event.button !== 'left')
+            return undefined;
+        let span;
+        for (const candidate of this.spans) {
+            if (event.y < candidate.start || event.y >= candidate.end)
+                continue;
+            if (span === undefined || candidate.end - candidate.start < span.end - span.start)
+                span = candidate;
+        }
+        if (span === undefined)
+            return undefined;
+        this.clicked.set(span.key, !span.expanded);
+        return { handled: true, render: true };
+    }
     /** The cache's own account of the work it avoided; a test reads this. */
     rowStats() {
         return this.rows.stats();
@@ -76,13 +190,20 @@ export class TranscriptView {
         // anyway; an explicit invalidate means the caller wants them rebuilt.
         this.rows.clear();
     }
-    /** Wrap one text block under a prefix, keeping the prefix's column budget. */
-    pushWrapped(lines, text, width, prefix, style) {
+    /**
+     * Wrap one text block under a prefix, keeping the prefix's column budget.
+     *
+     * The block is drawn before it is wrapped: a sequence a terminal would have
+     * acted on has to be gone before pi-tui measures the row, and a tab has to
+     * land on the stop the writer saw rather than one a wrapper would guess at.
+     * The prefix seeds that stop, because it is already on the row.
+     */
+    pushWrapped(lines, text, width, prefix, token) {
         const lead = visibleWidth(prefix);
         const indent = ' '.repeat(lead);
-        const wrapped = wrapTextWithAnsi(displayText(text), Math.max(1, width - lead));
+        const wrapped = wrapTextWithAnsi(this.theme.rich(text, { token, column: lead }), Math.max(1, width - lead));
         wrapped.forEach((line, index) => {
-            lines.push(style(this.theme.cut(`${index === 0 ? prefix : indent}${line}`, width, '')));
+            lines.push(this.theme.cut(`${index === 0 ? prefix : indent}${line}`, width, ''));
         });
     }
     /**
@@ -102,19 +223,67 @@ export class TranscriptView {
             lines.push(this.theme.cut(`${index === 0 ? prefix : indent}${line}`, width, ''));
         });
     }
-    /** Render assistant text as markdown: the model writes structure, the reader reads it. */
-    pushMarkdown(lines, text, width, live) {
-        const rendered = this.markdown.render(displayText(text), Math.max(1, width), live);
-        rendered.forEach(line => {
-            // The renderer pads to its width for background styling we do not use.
-            const trimmed = line.replace(/[ \t]+$/u, '');
+    /**
+     * The rows one markdown message draws, with the padding pi-tui adds for background styling removed.
+     *
+     * The source is drawn first so the markdown renderer never measures a sequence
+     * it cannot see; its own spans are applied around the result afterwards.
+     */
+    markdownLines(text, width, live, face, column = 0) {
+        return this.markdown
+            .render(this.theme.rich(text, { column }), Math.max(1, width), live, face)
+            .map(line => line.replace(/[ \t]+$/u, ''));
+    }
+    /**
+     * Render one message's text as markdown.
+     *
+     * A thought passes its own face and an indent, so the row stays visibly a
+     * detail of the step that produced it rather than a second answer.
+     */
+    pushMarkdown(lines, text, width, live, face = ANSWER_FACE, indent = '') {
+        const lead = visibleWidth(indent);
+        for (const line of this.markdownLines(text, Math.max(1, width - lead), live, face, lead)) {
             // A blank markdown line stays blank: it shows nothing, so it holds nothing.
-            if (trimmed === '') {
+            if (line === '') {
                 lines.push('');
-                return;
+                continue;
             }
-            lines.push(this.theme.cut(trimmed, width, '…'));
-        });
+            lines.push(this.theme.cut(`${indent}${line}`, width, '…'));
+        }
+    }
+    /**
+     * One message closed into a frame, with its markdown laid out to what is left inside.
+     *
+     * A prompt and a reply are the two objects of an exchange, so both are drawn as
+     * bars rather than as one more stretch of rows; the face, the border's element,
+     * and whether the text is still arriving are the only differences. Markdown lays
+     * itself out to the frame's text width, so the frame may only place the rows:
+     * wrapping them again would break what it drew.
+     */
+    pushFramed(lines, text, width, live, face, borderToken) {
+        const framed = canFrame(width, this.theme.visible(borderToken));
+        const inside = framed ? width - FRAME_COLUMNS : width;
+        const body = this.markdownLines(text, textWidth(inside), live, face);
+        lines.push(...frameLines(body, width, {
+            text: line => line,
+            border: rule => this.theme.style(borderToken, rule),
+            framed,
+        }));
+    }
+    /**
+     * The face a thought is drawn in.
+     *
+     * Its shade stays the thought body's and it asks for no drawing: a diagram in
+     * the middle of a thought would carry the answer's weight, and the answer's
+     * colours would make the thinking compete with it.
+     */
+    reasoningFace() {
+        const body = (text) => this.theme.style('transcript.reasoning.body', text);
+        return { name: 'reasoning', base: { color: body }, theme: recessiveMarkdownTheme(body, this.theme), transform: false };
+    }
+    /** The face a submitted prompt is drawn in: its structure is markdown's, its shade stays the prompt's. */
+    userFace() {
+        return { name: 'user', base: { color: text => this.theme.style('transcript.user', text) } };
     }
     /** The live map, or the shipped one for a caller that did not lend one. */
     keymap() {
@@ -123,62 +292,73 @@ export class TranscriptView {
     reasoningFoldHint() {
         return hintKeys(this.keymap(), 'surface.reasoning') || REASONING_FOLD_FALLBACK;
     }
-    pushReasoning(lines, entry, width) {
+    pushReasoning(lines, entry, width, spans) {
         if (!this.theme.visible('transcript.reasoning.summary'))
             return;
+        const start = lines.length;
+        const open = this.reasoningOpen(entry);
         const glyph = this.theme.glyph('transcript.reasoning.summary');
         const lead = glyph === '' ? '' : `${glyph} `;
         // A folded row carries the key that opens it, because a count with no way to
         // reach the text reads the same as the text never having arrived. The key
         // rides the row rather than a line of its own, so naming the hidden body
         // costs no vertical space.
-        const suffix = !this.viewState.expandReasoning && entry.body !== '' && this.theme.visible('transcript.reasoning.hint')
+        const suffix = !open && entry.body !== '' && this.theme.visible('transcript.reasoning.hint')
             ? ` (${this.reasoningFoldHint()})`
             : '';
         // The key is kept whole: the summary is the part that gives up room.
         const room = Math.max(1, width - visibleWidth(suffix));
-        const summary = this.theme.style('transcript.reasoning.summary', this.theme.cut(`${lead}${displayText(entry.summary)}`, room, ''));
-        lines.push(suffix === '' ? summary : `${summary}${this.theme.style('transcript.reasoning.hint', suffix)}`);
-        if (!this.viewState.expandReasoning)
-            return;
-        if (!this.theme.visible('transcript.reasoning.body'))
-            return;
-        for (const line of entry.body.split('\n')) {
-            this.pushWrapped(lines, line, width, DETAIL_INDENT, text => this.theme.style('transcript.reasoning.body', text));
+        const summary = this.theme.cut(this.theme.rich(`${lead}${entry.summary}`, { token: 'transcript.reasoning.summary', column: visibleWidth(lead) }), room, '');
+        const lined = suffix === '' ? summary : `${summary}${this.theme.style('transcript.reasoning.hint', suffix)}`;
+        // The key is kept whole only while the row has room for it: a row wider than
+        // the surface loses its tail to the terminal, and the terminal's clamp is not
+        // one this component can count on.
+        lines.push(this.theme.cut(lined, width, '…'));
+        if (open && this.theme.visible('transcript.reasoning.body')) {
+            this.pushMarkdown(lines, entry.body, width, entry.live, this.reasoningFace(), DETAIL_INDENT);
         }
+        const key = reasoningClickKey(entry.id);
+        if (key !== undefined)
+            spans.push({ key, start, end: lines.length, expanded: open });
     }
-    pushCard(lines, card, width) {
-        const expanded = this.viewState.expandCards;
-        // A card whose kind declares its call IS a command keeps its output tail
-        // while folded: that output is the answer the reader asked for, so it
-        // outranks the one-line rule every other card follows. Its command is drawn
-        // outside the fold entirely, because what ran is never a detail.
+    pushCard(lines, entry, width, spans) {
+        const card = entry.card;
+        const spec = this.toolDisplay(card.tool);
+        const expanded = this.expansionOf(entry);
+        const start = lines.length;
+        // What a folded card shows of its rows is the reader's choice, so a shell
+        // run no longer spends twenty rows on screen just because its output is the
+        // answer: the answer is one click away, and the row it costs is one.
         const preview = expanded
             ? { expanded: true }
-            : { expanded: false, preview: card.kind === 'terminal' ? 'shellTail' : 'title' };
+            : spec.output === 'tail'
+                ? { expanded: false, preview: 'tail', rows: spec.tail }
+                : { expanded: false, preview: 'title' };
         const { lines: detail, hidden } = cardDetailRows(card, preview);
         const titleToken = card.failed ? 'tool.failed.title' : 'tool.title';
         const glyphToken = card.failed ? 'tool.failed.glyph' : 'tool.glyph';
-        const { lead, body } = this.renderHead(card, titleToken, glyphToken);
-        // A header that folds keeps the argument and its stats; a terminal command
-        // can be longer than the screen, so it wraps under its own indent.
-        if (body !== '')
-            this.pushStyledWrapped(lines, body, width, lead);
+        if (expanded) {
+            const { lead, body } = this.renderHead(card, titleToken, glyphToken);
+            // A header that folds keeps the argument and its stats; a terminal command
+            // can be longer than the screen, so it wraps under its own indent.
+            if (body !== '')
+                this.pushStyledWrapped(lines, body, width, lead);
+        }
+        else {
+            const head = this.renderCollapsedHead(card, hidden, titleToken, glyphToken, width);
+            if (head !== '')
+                lines.push(this.theme.cut(head, collapsedEdge(width), '…'));
+        }
+        // The calls a program dispatched sit under the header whether the card is
+        // open or folded: one line per call is what the card stands for, and hiding
+        // them behind the card's own fold made a program's work invisible.
         if (this.viewState.expandSubCalls)
-            this.pushSubCalls(lines, card, width);
-        if (card.kind === 'terminal' && card.argument !== undefined && card.argument !== '' && this.theme.visible('tool.args')) {
-            this.pushStyledWrapped(lines, this.theme.style('tool.args', displayText(card.argument)), width, DETAIL_INDENT);
+            this.pushSubCalls(lines, entry, width, spans);
+        if (expanded && card.kind === 'terminal' && card.argument !== undefined && card.argument !== '' && this.theme.visible('tool.args')) {
+            this.pushStyledWrapped(lines, this.theme.rich(card.argument, { token: 'tool.args', column: visibleWidth(DETAIL_INDENT) }), width, DETAIL_INDENT);
         }
         for (const row of detail) {
-            // The row says what it is, so the renderer never guesses from the text:
-            // a diff line beginning with "+" is an addition because the presenter
-            // said so, not because of its first character.
-            const drawn = row.parts
-                .map(part => {
-                const token = CARD_ROW_TOKEN[card.kind]?.[part.class] ?? FALLBACK_ROW_TOKEN;
-                return this.theme.visible(token) ? this.theme.style(token, displayText(part.text)) : '';
-            })
-                .join('');
+            const drawn = this.detailRow(row, card.kind);
             // A row whose every part is hidden draws nothing, and nothing must not
             // cost a line: the indent would read as an empty row the card does not have.
             if (drawn === '')
@@ -186,114 +366,210 @@ export class TranscriptView {
             lines.push(this.theme.cut(`${DETAIL_INDENT}${drawn}`, width, ''));
         }
         // The pill is not output, so it draws after the preview window rather than
-        // inside it: a run bounded to its tail still reports how it ended.
-        if (card.kind === 'terminal' && card.status !== undefined && this.theme.visible('tool.terminal.status')) {
-            lines.push(this.theme.cut(`${DETAIL_INDENT}${this.theme.style('tool.terminal.status', displayText(card.status))}`, width, ''));
+        // inside it: a run bounded to its tail still reports how it ended. Folded,
+        // it rides the header instead, where it costs no row of its own.
+        if (expanded && card.kind === 'terminal' && card.status !== undefined && this.theme.visible('tool.terminal.status')) {
+            lines.push(this.theme.cut(`${DETAIL_INDENT}${this.theme.rich(card.status, { token: 'tool.terminal.status', column: visibleWidth(DETAIL_INDENT) })}`, width, ''));
         }
-        if (hidden <= 0 || !this.theme.visible('tool.hint'))
-            return;
         // A shell card's rows are kept from the end, so a hidden count always names
         // the rows *before* what is on screen and the hint has to say so; every
-        // other card keeps its head, where a neutral count is enough. A folded shell
-        // card is bounded by its preview window, an opened one by retention, so the
-        // opened hint promises no more than memory kept.
-        const hint = card.kind === 'terminal'
-            ? preview.expanded
-                ? shellRetentionHint(hidden)
-                : shellFoldHint(hidden, hintKeys(this.keymap(), 'surface.toolDetail') || CARD_OPEN_FALLBACK)
-            : preview.expanded ? `${hidden} ${CARD_HINT_RETAINED}` : undefined;
-        if (hint === undefined)
-            return;
-        lines.push(this.theme.style('tool.hint', this.theme.cut(`${DETAIL_INDENT}${hint}`, width, '')));
+        // other card keeps its head, where a neutral count is enough. A folded card
+        // that shows a tail is bounded by that window, an opened one by retention,
+        // so the opened hint promises no more than memory kept.
+        if (hidden > 0 && this.theme.visible('tool.hint')) {
+            const hint = preview.expanded
+                ? card.kind === 'terminal' ? shellRetentionHint(hidden) : `${hidden} ${CARD_HINT_RETAINED}`
+                : preview.preview === 'tail'
+                    ? shellFoldHint(hidden, hintKeys(this.keymap(), 'surface.toolDetail') || CARD_OPEN_FALLBACK)
+                    : undefined;
+            if (hint !== undefined) {
+                lines.push(this.theme.style('tool.hint', this.theme.cut(`${DETAIL_INDENT}${hint}`, width, '')));
+            }
+        }
+        const key = toolClickKey(entry.id);
+        if (key !== undefined)
+            spans.push({ key, start, end: lines.length, expanded });
     }
     /**
      * The calls one card dispatched, one entry each.
      *
      * A nested call is a signpost rather than a card of its own, so it keeps one
-     * entry per call; a long argument still wraps under that entry rather than
-     * being cut, because the argument is the part a reader scans for and a
-     * silently shortened path reads as the one that ran.
+     * entry per call, clipped to that entry until the reader clicks it: the
+     * argument is the part a reader scans for, and one that always wrapped pushed
+     * the rest of the program off the screen.
      */
-    pushSubCalls(lines, card, width) {
+    pushSubCalls(lines, entry, width, spans) {
+        const card = entry.card;
         const subCalls = card.subCalls ?? [];
         for (const call of subCalls) {
+            const start = lines.length;
+            const open = this.subCallOpen(entry.id, call.id);
             const titleToken = call.failed ? 'tool.failed.title' : 'tool.subcall.title';
-            const title = this.theme.visible(titleToken) ? this.theme.style(titleToken, displayText(call.title)) : '';
+            const column = visibleWidth(SUBCALL_INDENT);
+            const title = this.theme.visible(titleToken) ? this.theme.rich(call.title, { token: titleToken, column }) : '';
             const argument = call.argument === undefined || !this.theme.visible('tool.subcall.args')
                 ? ''
-                : ` ${this.theme.style('tool.subcall.args', displayText(call.argument))}`;
+                : ` ${this.theme.rich(call.argument, { token: 'tool.subcall.args', column })}`;
             const drawn = `${title}${argument}`;
             // A row whose every part is hidden draws nothing, and nothing must not
             // cost a line the card does not have.
             if (drawn === '')
                 continue;
-            this.pushStyledWrapped(lines, drawn, width, SUBCALL_INDENT);
+            if (open) {
+                this.pushStyledWrapped(lines, drawn, width, SUBCALL_INDENT);
+                this.pushSubCallOutput(lines, call, width);
+            }
+            else {
+                lines.push(this.theme.cut(`${SUBCALL_INDENT}${drawn}`, collapsedEdge(width), '…'));
+            }
+            spans.push({ key: subCallClickKey(entry.id, call.id), start, end: lines.length, expanded: open });
         }
         const hidden = (card.subCallsTotal ?? subCalls.length) - subCalls.length;
         if (hidden > 0 && this.theme.visible('tool.hint')) {
             lines.push(this.theme.style('tool.hint', this.theme.cut(`${SUBCALL_INDENT}… ${hidden} more calls`, width, '')));
         }
     }
+    /**
+     * What a dispatched call declared and what it produced, under its argument.
+     *
+     * The parent card keeps only the program's return value, so both are otherwise
+     * gone; a reader who opens the row is asking for them, which is why the call's
+     * own rows come first and its outcome under them. Each section keeps the
+     * retention its card used, so a long run still says what it dropped.
+     */
+    pushSubCallOutput(lines, call, width) {
+        for (const section of [call.presented, call.output]) {
+            if (section === undefined)
+                continue;
+            for (const row of section.rows) {
+                const drawn = this.detailRow(row, section.kind);
+                if (drawn === '')
+                    continue;
+                lines.push(this.theme.cut(`${DETAIL_INDENT}${drawn}`, width, ''));
+            }
+            const hidden = section.totalLines - section.rows.length;
+            if (hidden > 0 && this.theme.visible('tool.hint')) {
+                // A shell's rows are kept from the end, so its hidden count names the
+                // earlier lines; every other kind keeps its head, where the count is of
+                // what follows and a neutral wording is what the card uses too.
+                const hint = section.kind === 'terminal' ? shellRetentionHint(hidden) : `${hidden} ${CARD_HINT_RETAINED}`;
+                lines.push(this.theme.style('tool.hint', this.theme.cut(`${DETAIL_INDENT}${hint}`, width, '')));
+            }
+        }
+    }
+    /**
+     * A folded card's one row: label, clipped argument, measured facts, outcome.
+     *
+     * The outcome rides this row rather than a row of its own, because one line
+     * per call is what folding promises. A shell card's hidden rows are counted
+     * here too: its output is the answer the reader asked for, and a fold that
+     * left no trace of it would read as a call that produced nothing.
+     *
+     * The argument is the part that gives up room: it is clipped to whatever the
+     * label, the facts, and the outcome leave before the edge, so a wide terminal
+     * shows more of the call while a narrow one still shows how it ended.
+     */
+    renderCollapsedHead(card, hidden, titleToken, glyphToken, width) {
+        const edge = collapsedEdge(width);
+        const lead = this.cardLead(titleToken, glyphToken);
+        const title = this.cardTitle(card, titleToken);
+        const separator = this.statSeparator();
+        // The facts carry their own lead; the outcome and the count join whatever
+        // precedes them, so the folded line reads as one sentence about the run.
+        let tail = this.renderStats(card.stats);
+        const status = card.kind === 'terminal' && card.status !== undefined && this.theme.visible('tool.terminal.status')
+            ? this.theme.rich(card.status, { token: 'tool.terminal.status' })
+            : '';
+        if (status !== '')
+            tail += `${separator}${status}`;
+        if (card.kind === 'terminal' && hidden > 0) {
+            const count = this.renderStats([{ kind: 'size', text: `${hidden} line${hidden === 1 ? '' : 's'}` }], '');
+            if (count !== '')
+                tail += `${separator}${count}`;
+        }
+        const fixed = visibleWidth(lead) + visibleWidth(title) + visibleWidth(tail);
+        const room = Math.max(0, edge - fixed - (title === '' ? 0 : 1));
+        const argument = room > 0 ? this.cardArgument(card, room) : '';
+        const head = [title, argument].filter(part => part !== '').join(' ');
+        // A row with no visible label or argument opens with the tail, and a line
+        // that begins with a separator reads as a row that lost its first word.
+        if (head === '' && tail.startsWith(separator))
+            tail = tail.slice(separator.length);
+        return `${lead}${head}${tail}`;
+    }
+    /**
+     * One detail row, drawn with its own kind's colours or nothing at all.
+     *
+     * The row says what it is, so the renderer never guesses from the text: a diff
+     * line beginning with "+" is an addition because the presenter said so, not
+     * because of its first character.
+     */
+    detailRow(row, kind) {
+        return row.parts
+            .map(part => {
+            const token = CARD_ROW_TOKEN[kind]?.[part.class] ?? FALLBACK_ROW_TOKEN;
+            return this.theme.visible(token) ? this.theme.rich(part.text, { token, column: visibleWidth(DETAIL_INDENT) }) : '';
+        })
+            .join('');
+    }
+    /** The mark that introduces a card, empty when the theme hides its label. */
+    cardLead(titleToken, glyphToken) {
+        const glyph = this.theme.visible(titleToken) ? this.theme.glyph(glyphToken) : '';
+        return glyph === '' ? '' : `${glyph} `;
+    }
+    /** A card's label, styled, or nothing when the theme hides it. */
+    cardTitle(card, titleToken) {
+        return this.theme.visible(titleToken) ? this.theme.rich(card.title, { token: titleToken }) : '';
+    }
+    /** A card's argument, styled and flattened, clipped to `limit` when one is given. */
+    cardArgument(card, limit) {
+        if (card.argument === undefined || card.argument === '' || !this.theme.visible('tool.args'))
+            return '';
+        const shown = limit === undefined ? card.argument : clip(oneLine(card.argument), limit);
+        return this.theme.rich(shown, { token: 'tool.args' });
+    }
     /**
      * A card's header: its label, its argument, and its measured facts.
      *
      * The glyph is returned apart from the body so a wrapped continuation can
-     * align under the label rather than under the mark. A terminal's argument is
-     * left out because it needs a row of its own — it is the one argument that can
-     * be a whole command rather than a word.
+     * align under the label rather than under the mark. An opened terminal's
+     * argument is left out because it needs a row of its own — it is the one
+     * argument that can be a whole command rather than a word.
      */
     renderHead(card, titleToken, glyphToken) {
-        const glyph = this.theme.visible(titleToken) ? this.theme.glyph(glyphToken) : '';
-        const lead = glyph === '' ? '' : `${glyph} `;
-        let body = this.theme.visible(titleToken) ? this.theme.style(titleToken, displayText(card.title)) : '';
-        if (card.kind !== 'terminal' && card.argument !== undefined && card.argument !== '' && this.theme.visible('tool.args')) {
-            body += `${body === '' ? '' : ' '}${this.theme.style('tool.args', displayText(card.argument))}`;
-        }
-        return { lead, body: body + this.renderStats(card.stats) };
+        const lead = this.cardLead(titleToken, glyphToken);
+        const title = this.cardTitle(card, titleToken);
+        const argument = card.kind === 'terminal' ? '' : this.cardArgument(card);
+        const head = [title, argument].filter(part => part !== '').join(' ');
+        return { lead, body: head + this.renderStats(card.stats) };
+    }
+    /** The separator a header uses between its label, its facts, and its outcome. */
+    statSeparator() {
+        return this.theme.style('tool.stat.separator', STAT_SEPARATOR);
     }
-    /** The measured facts, each in its own colour, or nothing when none is visible. */
-    renderStats(stats) {
+    /**
+     * The measured facts, each in its own colour, or nothing when none is visible.
+     *
+     * The lead is a parameter because a header that already carries a title and an
+     * argument separates its facts with the same mark as its outcome, while facts
+     * on a row of their own stand apart with blank columns.
+     */
+    renderStats(stats, lead = STAT_LEAD) {
         if (stats === undefined || stats.length === 0)
             return '';
         const drawn = stats
             .filter(stat => this.theme.visible(STAT_TOKEN[stat.kind]))
-            .map(stat => this.theme.style(STAT_TOKEN[stat.kind], `${STAT_SYMBOL[stat.kind]}${displayText(stat.text)}`));
+            .map(stat => this.theme.rich(`${STAT_SYMBOL[stat.kind]}${stat.text}`, { token: STAT_TOKEN[stat.kind] }));
         if (drawn.length === 0)
             return '';
-        return `${STAT_LEAD}${drawn.join(this.theme.style('tool.stat.separator', STAT_SEPARATOR))}`;
+        return `${lead}${drawn.join(this.statSeparator())}`;
     }
     pushPicker(lines, picker, width) {
         lines.push('');
-        if (this.theme.visible('picker.title')) {
-            const glyph = this.theme.glyph('picker.glyph');
-            const lead = glyph === '' ? '' : `${glyph} `;
-            lines.push(this.theme.style('picker.title', this.theme.cut(`${lead}${displayText(picker.title)}`, width, '')));
-        }
-        if (picker.note !== undefined && this.theme.visible('picker.note')) {
-            this.pushWrapped(lines, picker.note, width, DETAIL_INDENT, text => this.theme.style('picker.note', text));
-        }
-        if (picker.filter !== '' && this.theme.visible('picker.filter')) {
-            lines.push(this.theme.style('picker.filter', this.theme.cut(`${DETAIL_INDENT}filter: ${displayText(picker.filter)}`, width, '')));
-        }
-        if (picker.above > 0 && this.theme.visible('picker.scrollNewer')) {
-            lines.push(this.theme.style('picker.scrollNewer', this.theme.cut(`${OPTION_INDENT}… ${picker.above} newer`, width, '')));
-        }
-        for (const row of picker.rows) {
-            const token = row.current ? 'picker.rowCurrent' : 'picker.row';
-            if (!this.theme.visible(token))
-                continue;
-            const cursor = row.current ? this.theme.glyph('picker.cursor') || CURSOR_MARK : NO_CURSOR;
-            const text = row.description === undefined
-                ? `${cursor} ${row.label}`
-                : `${cursor} ${row.label} — ${row.description}`;
-            lines.push(this.theme.style(token, this.theme.cut(`${OPTION_INDENT}${displayText(text)}`, width, '')));
-        }
-        if (picker.below > 0 && this.theme.visible('picker.scrollOlder')) {
-            lines.push(this.theme.style('picker.scrollOlder', this.theme.cut(`${OPTION_INDENT}… ${picker.below} older`, width, '')));
-        }
-        if (this.theme.visible('picker.hint')) {
-            lines.push(this.theme.style('picker.hint', this.theme.cut(`${OPTION_INDENT}${displayText(picker.hint)}`, width, '')));
-        }
+        // The rows come from the renderer a popup also draws through, so a card
+        // reads the same whether it sits at the end of the transcript or in a box
+        // over it, and a field added to a card reaches both at once.
+        lines.push(...pickerCardLines(picker, width, this.theme));
     }
     pushGate(lines, gate, width) {
         lines.push('');
@@ -302,11 +578,11 @@ export class TranscriptView {
             const glyph = this.theme.glyph(glyphToken) || (gate.kind === 'approval' ? APPROVAL_MARK : QUESTION_MARK);
             // The question is the thing being decided, so it wraps rather than being
             // cut: a reader cannot answer a sentence they were not shown.
-            this.pushWrapped(lines, gate.title, width, `${glyph} `, text => this.theme.style('gate.title', text));
+            this.pushWrapped(lines, gate.title, width, `${glyph} `, 'gate.title');
         }
         if (this.theme.visible('gate.detail')) {
             for (const detail of gate.detail) {
-                this.pushWrapped(lines, detail, width, DETAIL_INDENT, text => this.theme.style('gate.detail', text));
+                this.pushWrapped(lines, detail, width, DETAIL_INDENT, 'gate.detail');
             }
         }
         gate.options.forEach((option, position) => {
@@ -336,13 +612,19 @@ export class TranscriptView {
         // its frame, its padding, and its cursor for the width it is given.
         if (gate.answerInput !== undefined) {
             const room = Math.max(1, width - visibleWidth(OPTION_INDENT));
-            for (const row of gate.answerInput.render(room))
-                lines.push(`${OPTION_INDENT}${row}`);
+            // A surface narrower than the indent cannot place the answer: that row is cut
+            // here so what is handed out already fits, rather than being trimmed at the
+            // terminal past the point where the view could count it. A row that fits is
+            // left exactly as the editor drew it, cursor styling included.
+            for (const row of gate.answerInput.render(room)) {
+                const placed = `${OPTION_INDENT}${row}`;
+                lines.push(visibleWidth(placed) <= width ? placed : this.theme.cut(placed, width, ''));
+            }
         }
         // The keys are how the gate is answered at all, so they wrap rather than
         // lose their tail at a narrow edge.
         if (this.theme.visible('gate.hint')) {
-            this.pushWrapped(lines, gate.hint, width, OPTION_INDENT, text => this.theme.style('gate.hint', text));
+            this.pushWrapped(lines, gate.hint, width, OPTION_INDENT, 'gate.hint');
         }
     }
     /**
@@ -360,42 +642,41 @@ export class TranscriptView {
         const box = row.selected ? CHECKBOX_ON : CHECKBOX_OFF;
         const lead = `${OPTION_INDENT}${cursor} ${box} ${row.number}. `;
         const text = row.description === undefined ? row.label : `${row.label} — ${row.description}`;
-        // The text reaches pushWrapped unescaped: it escapes once, and escaping a
-        // second time would show the reader the escape instead of the character.
-        this.pushWrapped(lines, text, width, lead, body => this.theme.style(token, body));
+        // The text reaches pushWrapped undrawn: it is read once there, and reading
+        // it twice would show the reader the escape instead of the character.
+        this.pushWrapped(lines, text, width, lead, token);
     }
     /** The rows one transcript entry becomes; `live` marks the entry the turn is still writing. */
-    renderEntry(entry, lines, width, live) {
+    renderEntry(entry, lines, width, live, spans) {
         switch (entry.kind) {
             case 'tool':
-                this.pushCard(lines, entry.card, width);
+                this.pushCard(lines, entry, width, spans);
                 return;
             case 'reasoning':
-                this.pushReasoning(lines, entry, width);
+                this.pushReasoning(lines, entry, width, spans);
                 return;
             case 'assistant':
-                this.pushMarkdown(lines, entry.text, width, live);
+                // The reply is boxed the way the prompt that asked for it is, so one
+                // exchange reads as two objects rather than as a box and then a stream.
+                this.pushFramed(lines, entry.text, width, live, ANSWER_FACE, 'transcript.assistant.border');
                 return;
-            case 'user':
+            case 'user': {
                 if (!this.theme.visible('transcript.user'))
                     return;
                 // A prompt is boxed wherever it is read, so the row it left in the queue
                 // and the row it becomes here are recognisably the same object.
-                lines.push(...frameText(entry.text, width, {
-                    text: text => this.theme.style('transcript.user', text),
-                    border: rule => this.theme.editor.borderColor(rule),
-                    framed: canFrame(width, this.theme.visible('editor.border')),
-                }));
+                this.pushFramed(lines, entry.text, width, false, this.userFace(), 'editor.border');
                 return;
+            }
             case 'notice':
                 if (!this.theme.visible('transcript.notice'))
                     return;
-                this.pushWrapped(lines, entry.text, width, this.elementLead('transcript.notice'), text => this.theme.style('transcript.notice', text));
+                this.pushWrapped(lines, entry.text, width, this.elementLead('transcript.notice'), 'transcript.notice');
                 return;
             case 'marker':
                 if (!this.theme.visible('transcript.marker'))
                     return;
-                this.pushWrapped(lines, entry.text, width, this.elementLead('transcript.marker'), text => this.theme.style('transcript.marker', text));
+                this.pushWrapped(lines, entry.text, width, this.elementLead('transcript.marker'), 'transcript.marker');
                 return;
         }
     }
@@ -411,27 +692,53 @@ export class TranscriptView {
         // The revision is part of the key: rows drawn under an older theme table
         // must miss, or a settings change would restyle only the rows that happened
         // to be redrawn for another reason.
-        const tag = `${width}|${state.expandCards ? 'c' : '-'}${state.expandReasoning ? 'r' : '-'}${state.expandSubCalls ? 'p' : '-'}|${this.theme.revision}`;
+        const baseTag = `${width}|${state.expandCards ? 'c' : '-'}${state.expandReasoning ? 'r' : '-'}${state.expandSubCalls ? 'p' : '-'}|${this.theme.revision}`;
         const lines = [];
+        const spans = [];
         const settled = this.model.settledCount();
         const entries = this.model.entries();
         for (const [index, entry] of entries.entries()) {
+            const start = lines.length;
+            // Every fold this entry can answer to is part of the tag, so clicking one
+            // message — or one call inside it — rebuilds that message alone while the
+            // rows around it stay cached.
+            const open = entry.kind === 'tool' ? this.expansionOf(entry) : entry.kind === 'reasoning' ? this.reasoningOpen(entry) : undefined;
+            const marks = entry.kind === 'tool'
+                ? `${open === true ? '+' : '-'}${(entry.card.subCalls ?? []).map(call => (this.subCallOpen(entry.id, call.id) ? '1' : '0')).join('')}`
+                : open === true ? '+' : '-';
+            const tag = `${baseTag}|${marks}`;
+            const local = [];
             // The in-flight rows change on every frame, so caching them would only
             // fill the cache with objects nobody will ask for again.
             if (index >= settled) {
-                this.renderEntry(entry, lines, width, true);
-                continue;
+                this.renderEntry(entry, lines, width, true, local);
+                // An in-flight entry draws straight into the transcript, so the spans it
+                // recorded already name transcript rows; offsetting them again would move
+                // every hit target as many rows down as the entry's own start.
+                spans.push(...local);
             }
-            const cached = this.rows.lookup(entry, tag);
-            if (cached !== undefined) {
-                lines.push(...cached);
-                continue;
+            else {
+                const cached = this.rows.lookup(entry, tag);
+                const saved = this.entrySpans.get(entry);
+                if (cached !== undefined && saved !== undefined) {
+                    lines.push(...cached);
+                    local.push(...saved);
+                }
+                else {
+                    const rendered = [];
+                    this.renderEntry(entry, rendered, width, false, local);
+                    this.rows.store(entry, tag, rendered);
+                    this.entrySpans.set(entry, local);
+                    lines.push(...rendered);
+                }
+                // A cached span is kept relative to its entry so the entry can hand it
+                // back; a click needs it in transcript rows.
+                for (const span of local) {
+                    spans.push({ key: span.key, start: span.start + start, end: span.end + start, expanded: span.expanded });
+                }
             }
-            const rendered = [];
-            this.renderEntry(entry, rendered, width, false);
-            this.rows.store(entry, tag, rendered);
-            lines.push(...rendered);
         }
+        this.spans = spans;
         const picker = this.options.picker?.();
         if (picker !== undefined)
             this.pushPicker(lines, picker, width);