@zenera/cli 1.1.19 → 1.1.20

package/dist/tui/app.js

@@ -10,7 +10,7 @@ import { format } from "../narrate.js";
 import { display } from "../session.js";
 import { CliError } from "../term.js";
 import { resolveTheme, THEMES } from "./theme.js";
-import { ACTIVITY_ROWS, answerWidth, BOX_CHROME, BRANCH_ROWS, branchRows, budgetOf, CHROME_ROWS, clip, describeCall, gistOf, segmentsOf, summarise, THINKING_ROWS, TIME_COL, windowOf, } from "./wrap.js";
+import { ACTIVITY_ROWS, answerWidth, blocksOf, BOX_CHROME, boxWidth, BRANCH_ROWS, branchRows, budgetOf, CHROME_ROWS, clip, describeCall, gistOf, gridOf, summarise, THINKING_ROWS, TIME_COL, unmarked, windowOf, } from "./wrap.js";
 const BANNER = { key: 'banner' };
 const isBanner = (item) => item.key === 'banner';
 const MARK = {
@@ -78,6 +78,49 @@ function Call({ line }) {
     const theme = useTheme();
     return (_jsx(Box, { marginTop: line.gap ? 1 : 0, children: _jsxs(Text, { wrap: "truncate-end", color: theme.chrome.color, children: [_jsx(Text, { children: `  ${(line.time ?? '').padStart(TIME_COL)}  ` }), _jsx(Text, { children: line.lead }), _jsx(Text, { children: line.text ? ` ${line.text}` : '' }), _jsx(Text, { children: line.detail ? `  ${line.detail}` : '' })] }) }));
 }
+/**
+ * A run of inline markup, drawn as nested children of an unstyled parent.
+ *
+ * Ink styles a whole `<Text>` or none of it, so the weights have to be
+ * separate elements. They are still one text node to the layout, which is what
+ * lets the parent wrap across a `**bold**` without it becoming its own line.
+ */
+function Spans({ spans }) {
+    const theme = useTheme();
+    return (_jsx(_Fragment, { children: spans.map((s, i) => (_jsx(Text, { bold: s.bold === true, italic: s.italic === true, underline: s.href !== undefined && s.href !== '', ...(s.code ? { color: theme.code.color } : {}), children: s.text }, i))) }));
+}
+/**
+ * One block of an answer.
+ *
+ * A fence is cut rather than wrapped, because its indentation is its meaning.
+ * A table is laid out by `gridOf` and only ever styled a whole row at a time —
+ * a span is measured by its text, so nothing here can move a column.
+ */
+function BlockView({ block, gap, width, }) {
+    const theme = useTheme();
+    const spans = block.spans ?? [];
+    switch (block.kind) {
+        case 'code':
+            return (_jsxs(Box, { flexDirection: "column", marginTop: gap, children: [_jsx(Text, { color: theme.chrome.color, children: `\u250c\u2500${block.title ? ` ${block.title}` : ''}` }), (block.lines ?? []).map((l, j) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.chrome.color, children: '\u2502 ' }), _jsx(Text, { wrap: "truncate-end", children: l || ' ' })] }, j))), _jsx(Text, { color: theme.chrome.color, children: '\u2514\u2500' })] }));
+        case 'table':
+            return (_jsx(Box, { flexDirection: "column", marginTop: gap, children: gridOf(block).map((row, j) => (_jsx(Text, { wrap: "truncate-end", bold: block.align !== undefined && j === 0, ...(block.align !== undefined && j === 1
+                        ? { color: theme.chrome.color }
+                        : {}), children: _jsx(Spans, { spans: row }) }, j))) }));
+        case 'heading':
+            // One weight, not a ladder of them: a terminal has bold and it has
+            // nothing else, so every level of heading is the same bold and the
+            // nesting is carried by the words.
+            return (_jsx(Box, { marginTop: gap, children: _jsx(Text, { bold: true, children: _jsx(Spans, { spans: spans }) }) }));
+        case 'item':
+            return (_jsxs(Box, { flexDirection: "row", marginTop: gap, paddingLeft: (block.level ?? 0) * 2, children: [_jsx(Text, { color: theme.chrome.color, children: `${block.marker ?? '\u2022'} ` }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { children: _jsx(Spans, { spans: spans }) }) })] }));
+        case 'quote':
+            return (_jsxs(Box, { flexDirection: "row", marginTop: gap, children: [_jsx(Text, { color: theme.chrome.color, children: '\u2502 ' }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { italic: true, children: _jsx(Spans, { spans: spans }) }) })] }));
+        case 'rule':
+            return (_jsx(Box, { marginTop: gap, children: _jsx(Text, { color: theme.chrome.color, children: '\u2500'.repeat(Math.max(3, width)) }) }));
+        default:
+            return (_jsx(Box, { marginTop: gap, children: _jsx(Text, { children: _jsx(Spans, { spans: spans }) }) }));
+    }
+}
 /**
  * Prose the agent wrote, at the width a paragraph is worth reading at.
  *
@@ -88,9 +131,13 @@ function Call({ line }) {
 function Answer({ text, boxed }) {
     const theme = useTheme();
     const { stdout } = useStdout();
-    const width = answerWidth(stdout?.columns ?? 80);
-    const segments = segmentsOf(text);
-    const body = segments.map((s, i) => s.code ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.chrome.color, children: `\u250c\u2500${s.title ? ` ${s.title}` : ''}` }), s.lines.map((l, j) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.chrome.color, children: '\u2502 ' }), _jsx(Text, { wrap: "truncate-end", children: l || ' ' })] }, j))), _jsx(Text, { color: theme.chrome.color, children: '\u2514\u2500' })] }, i)) : (_jsx(Text, { children: s.lines.join('\n') }, i)));
+    const width = boxWidth(text, stdout?.columns ?? 80);
+    const blocks = blocksOf(text);
+    const inner = width - (boxed ? 4 : GUTTER);
+    const body = blocks.map((block, i) => (
+    // Items of one list are one thing; a blank row between them is two
+    // lists, and a list that reads as a list is most of why it was written.
+    _jsx(BlockView, { block: block, width: inner, gap: i > 0 && !(block.kind === 'item' && blocks[i - 1]?.kind === 'item') ? 1 : 0 }, i)));
     // Bounded, like every answer in `examples/sdk/`: prose that runs the width of a
     // wide terminal is a worse read than prose that stops.
     return boxed ? (_jsx(Box, { flexDirection: "column", width: width, borderStyle: "round", borderColor: theme.chrome.color, paddingX: 1, marginY: 1, children: body })) : (_jsx(Box, { flexDirection: "column", width: width, paddingLeft: GUTTER, marginTop: 1, children: body }));
@@ -116,6 +163,8 @@ function App({ engine, options, theme }) {
     // activity region below is redrawn by the frame timer regardless.
     const running = useRef(new Map());
     const branches = useRef(new Map());
+    /** The context mode of the fork now open; `branch_started` does not carry it. */
+    const context = useRef('inherit');
     const lane = useLanes(theme);
     // What the turn now running has cost so far, summed per model call rather
     // than read off the state: it is wanted between calls, not after them. The
@@ -227,7 +276,8 @@ function App({ engine, options, theme }) {
     // below draw. The answer keeps a blank row above it, so what it is separated
     // from is whatever the last call left on screen.
     const textRows = Math.max(1, budget.live - 1);
-    const liveRows = live ? windowOf(live, answerWidth(columns) - 4, textRows).length + 1 : 0;
+    const liveWidth = live ? boxWidth(live, columns) - 4 : 0;
+    const liveRows = live ? windowOf(unmarked(live, liveWidth), liveWidth, textRows).length + 1 : 0;
     const wanted = activityHeight(fitted.boxes, fitted.trunk) +
         (fitted.hidden ? 1 : 0) +
         (streaming ? budget.thinking : 0) +
@@ -273,6 +323,22 @@ function App({ engine, options, theme }) {
             push('text', text);
         }
     }, [push]);
+    /**
+     * The same, for a branch: its prose moves from *arriving* into its trail.
+     *
+     * The trail is where the box's rows come from, so prose committed here is
+     * still on screen under the call it introduced — which is the whole reason
+     * a branch says anything before calling something.
+     */
+    const keep = useCallback((b) => {
+        const text = b.said.trim();
+        b.said = '';
+        if (!text) {
+            return;
+        }
+        b.trail.push({ kind: 'said', id: `${seq.current++}`, text });
+        b.trail.splice(0, b.trail.length - BRANCH_ROWS);
+    }, []);
     // Deltas arrive far faster than a terminal can usefully redraw, so text is
     // accumulated in one string and React coalesces the repaints. The finished
     // answer replaces it in one piece when the turn lands.
@@ -303,7 +369,17 @@ function App({ engine, options, theme }) {
                 }
                 return;
             }
-            if (event.type === 'text_delta' && !event.branch) {
+            if (event.type === 'text_delta') {
+                if (owner) {
+                    // Same rule the trunk follows: prose supersedes the
+                    // reasoning that decided on it.
+                    owner.thinking = '';
+                    owner.said += event.delta;
+                    return;
+                }
+                if (event.branch) {
+                    return;
+                }
                 // Whichever of prose or a call the step arrives at first
                 // retires the gist; the content streaming under a heading
                 // does not, which is why the heading holds still.
@@ -324,6 +400,8 @@ function App({ engine, options, theme }) {
                     if (b) {
                         b.steps++;
                         b.thinking = '';
+                        keep(b);
+                        b.musing = true;
                     }
                 }
                 else {
@@ -339,6 +417,12 @@ function App({ engine, options, theme }) {
                 // Branches included: they are what this turn is spending on.
                 spent.current = addUsage(spent.current, event.node.usage);
                 if (from) {
+                    // Its gist stays up until the call it decided on goes
+                    // out; only the shimmer stops, as on the trunk.
+                    const b = branches.current.get(from);
+                    if (b) {
+                        b.musing = false;
+                    }
                     break;
                 }
                 setModel(event.node.model);
@@ -346,12 +430,17 @@ function App({ engine, options, theme }) {
                 // the shimmer stops, because nothing is arriving any more.
                 setMusing(false);
                 break;
-            case 'before_tool_call':
+            case 'before_tool_call': {
                 // Everything the model said on the way to this call is now
                 // history, and history belongs above the call, not below it.
                 // The gist goes with it: the call is what it decided on, so
                 // the row saying so supersedes the row explaining it.
-                if (!from) {
+                const b = from ? branches.current.get(from) : undefined;
+                if (b) {
+                    keep(b);
+                    b.thinking = '';
+                }
+                else if (!from) {
                     settle();
                     mind.current = '';
                     setThinking('');
@@ -364,6 +453,7 @@ function App({ engine, options, theme }) {
                     branch: from,
                 });
                 break;
+            }
             case 'after_tool_call': {
                 const { node } = event;
                 const call = running.current.get(node.callId);
@@ -376,14 +466,15 @@ function App({ engine, options, theme }) {
                     // scrollback is a fan-out shuffled, and the box is
                     // the only place the shape of the fork survives.
                     // The join summarises it; the report has all of it.
-                    b.done.push({
-                        callId: node.callId,
+                    b.trail.push({
+                        kind: 'call',
+                        id: node.callId,
                         name: node.name,
                         args: call?.args ?? '',
                         ms: node.durationMs,
                         failed: node.isError,
                     });
-                    b.done.splice(0, b.done.length - BRANCH_ROWS);
+                    b.trail.splice(0, b.trail.length - BRANCH_ROWS);
                     break;
                 }
                 // What it was asked and what it answered, which is the
@@ -408,23 +499,31 @@ function App({ engine, options, theme }) {
                 break;
             }
             case 'before_fork':
+                // Naming the branches here said nothing a box below does
+                // not say better, under the work it is doing. The one
+                // thing a box cannot say for itself is what it started
+                // from, so the fork leaves it for the boxes to carry.
+                context.current = event.node.contextMode;
                 // A fork is what the trunk concluded, so whatever it was
                 // saying is finished as far as the screen is concerned.
                 if (from) {
                     break;
                 }
                 settle();
-                push('note', `⑂ ${event.node.branches.length} branches`, `${event.node.branches.map((b) => b.name).join(', ')} · context ${event.node.contextMode}`);
+                push('note', `⑂ ${event.node.branches.length} ${event.node.branches.length === 1 ? 'branch' : 'branches'}`);
                 break;
             case 'branch_started':
                 branches.current.set(event.child.name, {
                     name: event.child.name,
                     agent: event.childState.agentName,
+                    context: context.current,
                     startedAt: Date.now(),
                     steps: 0,
                     tools: 0,
                     thinking: '',
-                    done: [],
+                    said: '',
+                    musing: false,
+                    trail: [],
                 });
                 break;
             case 'branch_finished': {
@@ -437,7 +536,7 @@ function App({ engine, options, theme }) {
             default:
                 break;
         }
-    }, [columns, push, settle]);
+    }, [columns, keep, push, settle]);
     const submit = useCallback((value) => {
         const text = value.trim();
         if (busy) {
@@ -552,7 +651,7 @@ function App({ engine, options, theme }) {
             recall(1);
         }
     });
-    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: [BANNER, ...lines], children: (item) => isBanner(item) ? (_jsx(Header, { engine: engine, readOnly: options.readOnly, started: options.started }, item.key)) : (_jsx(Row, { line: item }, item.key)) }), _jsxs(Box, { flexDirection: "column", justifyContent: "flex-end", height: busy ? grown.current : undefined, overflow: "hidden", children: [_jsx(Branches, { boxes: fitted.boxes, spin: spin, columns: columns }), streaming && budget.thinking ? (_jsx(Reasoning, { text: thinking, columns: columns, frame: frame, live: musing })) : null, _jsx(Activity, { rows: fitted.trunk, hidden: fitted.hidden }), live ? _jsx(Streaming, { text: live, columns: columns, rows: textRows }) : null] }), _jsx(Footer, { agent: agent, busy: busy, spin: spin, frame: frame, running: mine, forked: branches.current.size, step: step, model: model, stats: stats, inflight: inflight, reasoning: musing && streaming }), busy ? null : (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: "\u203A " }), _jsx(TextInput, { defaultValue: draft, placeholder: "Ask something\u2026 (\u2191 for history, /help for commands)", onChange: remember, onSubmit: submit }, generation)] }))] }) }));
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: [BANNER, ...lines], children: (item) => isBanner(item) ? (_jsx(Header, { engine: engine, readOnly: options.readOnly, started: options.started }, item.key)) : (_jsx(Row, { line: item }, item.key)) }), _jsxs(Box, { flexDirection: "column", justifyContent: "flex-end", height: busy ? grown.current : undefined, overflow: "hidden", children: [_jsx(Branches, { boxes: fitted.boxes, spin: spin, frame: frame, columns: columns }), streaming && budget.thinking ? (_jsx(Reasoning, { text: thinking, columns: columns, frame: frame, live: musing })) : null, _jsx(Activity, { rows: fitted.trunk, hidden: fitted.hidden, frame: frame }), live ? _jsx(Streaming, { text: live, columns: columns, rows: textRows }) : null] }), _jsx(Footer, { agent: agent, busy: busy, spin: spin, frame: frame, running: mine, forked: branches.current.size, step: step, model: model, stats: stats, inflight: inflight, reasoning: musing && streaming }), busy ? null : (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: "\u203A " }), _jsx(TextInput, { defaultValue: draft, placeholder: "Ask something\u2026 (\u2191 for history, /help for commands)", onChange: remember, onSubmit: submit }, generation)] }))] }) }));
 }
 function Header({ engine, readOnly, started, }) {
     const theme = useTheme();
@@ -585,6 +684,8 @@ function Header({ engine, readOnly, started, }) {
 // ---------------------------------------------------------------------------
 /** The gutter every streaming block is indented behind. */
 const GUTTER = 2;
+/** The most rows of a branch's own prose a box will show. */
+const SAY_ROWS = 2;
 /**
  * A fan-out, demultiplexed into one box per branch. Interleaving eight
  * branches' calls into a single list is not a picture of parallel work, it is
@@ -603,13 +704,63 @@ function branchBoxesOf(tools, branches, now, width, lane, spin, share) {
     const boxes = [];
     const room = (w) => Math.max(12, w - TIME_COL - 8);
     for (const b of branches.values()) {
-        // What it is reasoning about, kept to one row: a box is a status line
-        // per branch, not a second transcript.
-        const gist = b.thinking.trim() ? gistOf(b.thinking, width - TIME_COL - 6) : '';
-        const budget = Math.max(1, gist ? share - 1 : share);
+        // What it has done and said, in the order it happened. A branch's prose
+        // never reaches the scrollback — several of them landing in one
+        // transcript is a fan-out shuffled — so the box is the only place it is
+        // ever read, and it stays there once the call it introduced goes out.
+        const trail = [];
+        for (const note of b.trail) {
+            if (note.kind === 'said') {
+                windowOf(note.text, width - 2, SAY_ROWS).forEach((line, i) => trail.push({
+                    key: `s:${note.id}:${i}`,
+                    mark: '',
+                    time: '',
+                    lead: '',
+                    text: line,
+                    said: true,
+                }));
+                continue;
+            }
+            const view = describeCall(note.name, note.args);
+            trail.push({
+                key: `d:${note.id}`,
+                mark: note.failed ? '✗' : '✓',
+                time: note.failed ? 'failed' : (durationOf(note.ms) ?? ''),
+                lead: view.verb,
+                text: clip(view.subject, room(width) - view.verb.length),
+            });
+        }
+        // Prose arriving now, and failing that what it is reasoning about —
+        // one supersedes the other exactly as on the trunk. Either way it sits
+        // between what the branch did and what it is doing, because it is what
+        // got it from one to the other.
+        const say = b.said.trim() ? windowOf(b.said, width - 2, SAY_ROWS) : [];
+        const gist = !say.length && b.thinking.trim() ? gistOf(b.thinking, width - TIME_COL - 6) : '';
+        const narration = say.length
+            ? say.map((line, i) => ({
+                key: `s:${b.name}:${i}`,
+                mark: '',
+                time: '',
+                lead: '',
+                text: line,
+                said: true,
+            }))
+            : gist
+                ? [
+                    {
+                        key: `g:${b.name}`,
+                        mark: '',
+                        time: '',
+                        lead: '',
+                        text: gist,
+                        thinking: true,
+                        shimmer: b.musing,
+                    },
+                ]
+                : [];
         const live = [];
         for (const t of tools.values()) {
-            if (t.branch === b.name && live.length < budget) {
+            if (t.branch === b.name && live.length < share) {
                 const view = describeCall(t.name, t.args);
                 live.push({
                     key: `t:${t.callId}`,
@@ -620,53 +771,28 @@ function branchBoxesOf(tools, branches, now, width, lane, spin, share) {
                 });
             }
         }
-        // Oldest of the calls that still fit, so the newest is always the row
-        // nearest the one running.
-        const past = b.done.slice(Math.max(0, b.done.length - (budget - live.length)));
-        const rows = [
-            ...past.map((d) => {
-                const view = describeCall(d.name, d.args);
-                return {
-                    key: `d:${d.callId}`,
-                    mark: d.failed ? '✗' : '✓',
-                    time: d.failed ? 'failed' : (durationOf(d.ms) ?? ''),
-                    lead: view.verb,
-                    text: clip(view.subject, room(width) - view.verb.length),
-                };
-            }),
-            // Between the calls it made and the one it is making: the reasoning
-            // is what got it from one to the other.
-            ...(gist
-                ? [
-                    {
-                        key: `g:${b.name}`,
-                        mark: '✻',
-                        time: '',
-                        lead: '',
-                        text: gist,
-                        thinking: true,
-                    },
-                ]
-                : []),
-            ...live,
-        ];
+        // The tail, so the newest is always the row nearest the closing rule
+        // and what is in flight is never the thing that got cut.
+        const rows = [...trail, ...narration, ...live];
         if (!rows.length) {
             rows.push({
                 key: `w:${b.name}`,
-                mark: '✻',
+                mark: '',
                 time: '',
                 lead: '',
                 text: 'thinking…',
                 thinking: true,
+                shimmer: b.musing,
             });
         }
         boxes.push({
             name: b.name,
             color: lane(b.name),
             title: `${b.name}${b.agent ? ` · ${b.agent}` : ''}`,
+            context: `context ${b.context}`,
             stats: `${b.steps} ${b.steps === 1 ? 'step' : 'steps'}` +
-                (b.tools ? `  ${b.tools} ${b.tools === 1 ? 'tool' : 'tools'}` : '') +
-                `  ${secs(now - b.startedAt)}`,
+                (b.tools ? `  ${b.tools} ${b.tools === 1 ? 'tool' : 'tools'}` : ''),
+            elapsed: secs(now - b.startedAt),
             rows: rows.slice(-share),
         });
     }
@@ -708,23 +834,58 @@ function fitActivity(boxes, trunk, allowance) {
         kept.push(b);
         used += h;
     }
-    const left = boxes.length - kept.length;
-    const hidden = left && used < allowance ? left : 0;
+    let hidden = boxes.length - kept.length;
+    // A branch that is neither drawn nor counted has simply vanished from the
+    // fork. If the boxes filled the region exactly there is no row left to say
+    // so, so the last of them gives one back.
+    while (hidden && used + 1 > allowance && kept.length) {
+        const last = kept.pop();
+        used -= BOX_CHROME + last.rows.length;
+        hidden++;
+    }
     return {
         boxes: kept,
         trunk: trunk.slice(0, Math.max(0, allowance - used - (hidden ? 1 : 0))),
         hidden,
     };
 }
-function Branches({ boxes, spin, columns, }) {
+function Branches({ boxes, spin, frame, columns, }) {
     const theme = useTheme();
+    // What a row has between the two sides. Ink truncates rather than wraps, so
+    // anything wider than this would eat the closing side rather than the box
+    // costing itself a row it was not given.
+    const inner = Math.max(1, columns - 4);
     return (_jsx(Box, { flexDirection: "column", children: boxes.map((b) => {
-            // Ink truncates rather than wraps, so an over-wide rule clips
-            // instead of costing the box a row it was not given.
-            const used = 3 + b.title.length + 2 + 2 + b.stats.length + 1;
-            return (_jsxs(Box, { flexDirection: "column", height: BOX_CHROME + b.rows.length, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: theme.chrome.color, children: '╭─ ' }), _jsx(Text, { color: b.color, children: b.title }), _jsx(Text, { color: b.color, children: ` ${spin}` }), _jsx(Text, { color: theme.chrome.color, children: `  ${b.stats} ` }), _jsx(Text, { color: theme.chrome.color, children: '─'.repeat(Math.max(0, columns - used)) })] }), b.rows.map((r) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: b.color, children: '│ ' }), _jsx(Work, { row: r }, r.key)] }, r.key))), _jsx(Text, { color: theme.chrome.color, children: '╰─' })] }, b.name));
+            const title = clip(b.title, Math.max(1, columns - 10));
+            // The name is the branch's; the context is the fork's doing,
+            // so it is set after the spinner in the chrome's own grey
+            // rather than lifted into the lane with the name.
+            const said = `${title} ${spin}  ${b.context}`;
+            // Who it is heads the box; what it has done and how long it has
+            // been doing it close it. A count belongs with the clock, and a
+            // name reads better without two numbers after it.
+            const foot = clip(`${b.stats} · ${b.elapsed}`, Math.max(1, columns - 8));
+            // One hue for the whole frame. A rule in one colour meeting a
+            // side in another is read as two things that failed to join.
+            const edge = b.color ?? theme.chrome.color;
+            return (_jsxs(Box, { flexDirection: "column", height: BOX_CHROME + b.rows.length, children: [_jsxs(Text, { wrap: "truncate-end", color: edge, children: [_jsx(Text, { children: '╭─ ' }), _jsx(Text, { bold: true, children: title }), _jsx(Text, { children: ` ${spin}` }), _jsx(Text, { color: theme.chrome.color, children: `  ${b.context} ` }), _jsxs(Text, { children: ['─'.repeat(Math.max(0, columns - said.length - 5)), '╮'] })] }), b.rows.map((r) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: edge, children: '│ ' }), _jsx(Work, { row: r, frame: frame }), _jsx(Text, { color: edge, children: `${' '.repeat(Math.max(0, inner - widthOf(r)))} │` })] }, r.key))), _jsxs(Text, { wrap: "truncate-end", color: edge, children: [_jsx(Text, { children: '╰─ ' }), _jsx(Text, { color: theme.chrome.color, children: foot }), _jsxs(Text, { children: [` ${'─'.repeat(Math.max(0, columns - foot.length - 5))}`, '╯'] })] })] }, b.name));
         }) }));
 }
+/**
+ * The columns `Work` draws `row` in. It lives here so the two stay in step:
+ * a box closes on the right, and a side rule can only be put where the content
+ * is known to have stopped.
+ */
+function widthOf(row) {
+    if (row.thinking || row.said) {
+        return row.text.length;
+    }
+    return (2 +
+        Math.max(TIME_COL, row.time.length) +
+        2 +
+        row.lead.length +
+        (row.text ? row.text.length + 1 : 0));
+}
 /**
  * A row of work in the same shape the transcript will keep it in.
  *
@@ -732,19 +893,25 @@ function Branches({ boxes, spin, columns, }) {
  * sits where nothing will be once the call returns and the time, verb and
  * subject never move.
  */
-function Work({ row }) {
+function Work({ row, frame }) {
     const theme = useTheme();
+    // Reasoning and prose are drawn in a branch's box exactly as they are drawn
+    // on the trunk: no mark, at the trunk's own gutter, the sweep saying it is
+    // still arriving. A branch is an agent, not a subsystem.
     if (row.thinking) {
-        return _jsx(Text, { color: theme.thinking.color, children: `${row.mark} ${row.text}` });
+        return row.shimmer ? (_jsx(Shimmer, { text: row.text, frame: frame, color: theme.thinking.color })) : (_jsx(Text, { color: theme.thinking.color, children: row.text }));
+    }
+    if (row.said) {
+        return _jsx(Text, { children: row.text });
     }
     return (_jsxs(Text, { color: theme.chrome.color, children: [_jsx(Text, { color: row.color, children: `${row.mark} ` }), _jsx(Text, { children: `${row.time.padStart(TIME_COL)}  ` }), _jsx(Text, { color: row.color, children: row.lead }), _jsx(Text, { children: row.text ? ` ${row.text}` : '' })] }));
 }
-function Activity({ rows, hidden, }) {
+function Activity({ rows, hidden, frame, }) {
     const theme = useTheme();
     if (!rows.length && !hidden) {
         return null;
     }
-    return (_jsxs(Box, { flexDirection: "column", height: rows.length + (hidden ? 1 : 0), overflow: "hidden", children: [rows.map((r) => (_jsx(Text, { wrap: "truncate-end", children: _jsx(Work, { row: r }) }, r.key))), hidden ? (_jsx(Text, { color: theme.chrome.color, children: `  + ${hidden} more ${hidden === 1 ? 'branch' : 'branches'}` })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", height: rows.length + (hidden ? 1 : 0), overflow: "hidden", children: [rows.map((r) => (_jsx(Text, { wrap: "truncate-end", children: _jsx(Work, { row: r, frame: frame }) }, r.key))), hidden ? (_jsx(Text, { color: theme.chrome.color, children: `  + ${hidden} more ${hidden === 1 ? 'branch' : 'branches'}` })) : null] }));
 }
 /**
  * A stable colour per branch, handed out in order of first sight. Held in a ref
@@ -788,7 +955,12 @@ function Reasoning({ text, columns, frame, live, }) {
 function Streaming({ text, columns, rows }) {
     // The same width the finished answer will take, so landing it reflows
     // nothing: what is on screen is what stays there.
-    const shown = windowOf(text, answerWidth(columns) - 4, rows);
+    //
+    // Markers are resolved but nothing is styled. This region repaints, and
+    // everything that repaints is measured by `.length` — so the stream gets
+    // the words the answer will have and the weights it will not, which is the
+    // half of the change that can be made without lying about the height.
+    const shown = windowOf(unmarked(text, boxWidth(text, columns) - 4), boxWidth(text, columns) - 4, rows);
     return (_jsx(Box, { flexDirection: "column", paddingLeft: GUTTER, marginTop: 1, height: shown.length, overflow: "hidden", children: shown.map((row, i) => (_jsx(Text, { wrap: "truncate-end", children: row }, i))) }));
 }
 /** The label column the two number rows line up behind. */

package/dist/tui/theme.d.ts

@@ -33,6 +33,16 @@ export interface Theme {
      * model's thinking from the work it went on to do.
      */
     readonly thinking: LineStyle;
+    /**
+     * Inline code inside prose — `zen check`, `--theme`, a path.
+     *
+     * The one role added for markdown, and it is added because the alternative
+     * is worse: bold is already what `**strong**` means, and grey would say a
+     * command name matters less than the sentence around it when it is usually
+     * the only part worth copying. A hue says *this is literal* without
+     * ranking it.
+     */
+    readonly code: LineStyle;
     /**
      * The three things a turn spends time on. One word in the footer says which,
      * and it is read at a glance from across a desk — so the word changing is

package/dist/tui/theme.js

@@ -56,6 +56,9 @@ const DARK = {
     // Bright: the gist is one line among many and plain `magenta` on black is
     // the darkest of the six.
     thinking: { color: 'magentaBright' },
+    // Green is the one hue with no other job here: it is not the accent, not
+    // the warning, and not the thinking.
+    code: { color: 'green' },
     phase: { reasoning: 'magenta', waiting: 'yellow', working: 'cyan' },
     lanes: ['cyan', 'green', 'yellow', 'blue', 'red', 'magenta'],
 };
@@ -75,6 +78,7 @@ const LIGHT = {
     warn: 'magenta',
     chrome: LIGHT_CHROME,
     thinking: { color: 'magenta' },
+    code: { color: 'green' },
     // No yellow: `waiting` takes blue and `working` green, which are the two
     // that survive paper.
     phase: { reasoning: 'magenta', waiting: 'blue', working: 'green' },