@zenera/cli 1.1.17 → 1.1.19

package/dist/tui/app.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { TextInput } from '@inkjs/ui';
 import { addUsage, isCheckpoint, turns, zeroUsage, } from '@zenera/neo';
 import { Box, Static, Text, useApp, useInput, useStdout } from 'ink';
@@ -10,13 +10,14 @@ 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, readable, segmentsOf, THINKING_CHROME, THINKING_ROWS, windowOf, } from "./wrap.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";
 const BANNER = { key: 'banner' };
 const isBanner = (item) => item.key === 'banner';
 const MARK = {
     you: '›',
+    text: ' ',
     agent: ' ',
-    tool: '·',
+    tool: ' ',
     note: ' ',
     error: '!',
 };
@@ -24,29 +25,75 @@ const MARK = {
 const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 /** Redraw cadence for the activity region, independent of events. */
 const FRAME_MS = 100;
-/** How long after the last delta reasoning is still called live. */
-const SETTLE_MS = 800;
 // The theme is decided once, before the first frame, and never changes while
 // the app is up — a terminal does not repaint its own scheme underneath us.
 // A context rather than props only because every part of the view wants it.
 const ThemeContext = React.createContext(THEMES.dark);
 const useTheme = () => useContext(ThemeContext);
 function Row({ line }) {
-    const style = useTheme().line[line.kind];
-    return (_jsxs(Box, { flexDirection: "row", marginTop: line.kind === 'you' ? 1 : 0, children: [_jsxs(Text, { color: style.color, dimColor: style.dim, children: [MARK[line.kind], ' '] }), _jsxs(Box, { flexDirection: "column", children: [line.kind === 'agent' ? (_jsx(Answer, { text: line.text })) : (
-                    // The lead is what the eye scans for down the left edge, so
-                    // it carries the weight the row's text does not. Nested
-                    // rather than one string: Ink dims a whole Text or none of it.
-                    _jsxs(Text, { children: [line.lead ? _jsx(Text, { color: style.color, bold: true, children: `${line.lead} ` }) : null, _jsx(Text, { color: style.color, dimColor: style.dim, bold: line.kind === 'you', children: line.text })] })), line.detail ? _jsx(Text, { dimColor: true, children: line.detail }) : null] })] }));
+    const theme = useTheme();
+    const style = theme.line[line.kind];
+    if (line.kind === 'you') {
+        return _jsx(Input, { text: line.text });
+    }
+    if (line.kind === 'tool') {
+        return _jsx(Call, { line: line });
+    }
+    if (line.kind === 'text' || line.kind === 'agent') {
+        return _jsx(Answer, { text: line.text, boxed: line.kind === 'agent' });
+    }
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: style.color, children: [MARK[line.kind], " "] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: style.color, children: line.text }), line.detail ? _jsx(Text, { color: theme.chrome.color, children: line.detail }) : null] })] }));
 }
-function Answer({ text }) {
+/**
+ * The question, framed and labelled.
+ *
+ * It is the one thing on screen the person wrote, and scrolled past it is what
+ * everything below it is an answer to — so it gets a rule rather than a caret,
+ * in the accent, with the text itself left in the terminal's own foreground.
+ * The label is in the top rule because a frame with a name needs no legend.
+ */
+function Input({ text }) {
+    const theme = useTheme();
+    const { stdout } = useStdout();
+    const width = Math.max(INPUT_LABEL.length + 8, answerWidth(stdout?.columns ?? 80));
+    return (_jsxs(Box, { flexDirection: "column", width: width, marginY: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: theme.accent, children: '\u256d\u2500 ' }), _jsx(Text, { color: theme.accent, bold: true, children: INPUT_LABEL }), _jsx(Text, { color: theme.accent, children: ` ${'\u2500'.repeat(width - INPUT_LABEL.length - 5)}\u256e` })] }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, borderTop: false, paddingX: 1, children: _jsx(Text, { children: plain(text) }) })] }));
+}
+const INPUT_LABEL = '[input]';
+/** C0 controls, which a paste carries and which move the cursor where it was not sent. */
+const CONTROL = /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g;
+/** A pasted prompt, reduced to what a terminal can be trusted to draw in place. */
+function plain(text) {
+    return text.replace(/\r\n?/g, '\n').replace(/\t/g, '    ').replace(CONTROL, '').trim();
+}
+/**
+ * One finished call: how long it took, what it did, and what came back.
+ *
+ * Time first, because it is the one column that lines up down the page and the
+ * one number worth scanning for. Nothing in the row is lifted out of the grey —
+ * a call is read when it is looked for, not while the prose around it is.
+ * The blank row is spent on the *first* call after something else, so a batch
+ * of them reads as one block rather than a ladder.
+ */
+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}` : '' })] }) }));
+}
+/**
+ * Prose the agent wrote, at the width a paragraph is worth reading at.
+ *
+ * Only the last one is boxed. A turn says several things on its way to an
+ * answer and boxing each of them turns the transcript into a stack of frames;
+ * the box means *this is the answer*, and it only means that if it is rare.
+ */
+function Answer({ text, boxed }) {
+    const theme = useTheme();
     const { stdout } = useStdout();
     const width = answerWidth(stdout?.columns ?? 80);
     const segments = segmentsOf(text);
-    // Bounded, like every answer in `examples/`: prose that runs the width of a
-    // wide terminal is a worse read than prose that stops, and the box is also
-    // what separates the answer from the machinery that produced it.
-    return (_jsx(Box, { flexDirection: "column", width: width, borderStyle: "round", borderDimColor: true, paddingX: 1, marginY: 1, children: segments.map((s, i) => s.code ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: `\u250c\u2500${s.title ? ` ${s.title}` : ''}` }), s.lines.map((l, j) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: '\u2502 ' }), _jsx(Text, { wrap: "truncate-end", children: l || ' ' })] }, j))), _jsx(Text, { dimColor: true, children: '\u2514\u2500' })] }, i)) : (_jsx(Text, { children: s.lines.join('\n') }, i))) }));
+    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)));
+    // 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 }));
 }
 function App({ engine, options, theme }) {
     const { exit } = useApp();
@@ -63,6 +110,8 @@ function App({ engine, options, theme }) {
     /** Model calls in the turn now running, and what answered the last one. */
     const [step, setStep] = useState(0);
     const [model, setModel] = useState(undefined);
+    /** Whether a trunk model call is open, which is what the shimmer means. */
+    const [musing, setMusing] = useState(false);
     // In flight, and therefore not in the transcript yet. Refs, because the
     // activity region below is redrawn by the frame timer regardless.
     const running = useRef(new Map());
@@ -73,8 +122,17 @@ function App({ engine, options, theme }) {
     // exact figure replaces it when the turn lands.
     const spent = useRef(zeroUsage());
     const startedAt = useRef(0);
-    /** When reasoning text last arrived, which is the only proof it is still coming. */
-    const flowing = useRef(0);
+    // The two streams, mirrored in refs.
+    //
+    // State is what draws them; the ref is what any other event can read. Both
+    // are settled by something that happens *later* — prose is committed to the
+    // scrollback when the turn moves on to a call, reasoning when the model
+    // call it belongs to lands — and an event handler reading state would be
+    // reading whatever the last render closed over.
+    const said = useRef('');
+    const mind = useRef('');
+    /** The last prose committed, so the answer is not printed twice. */
+    const told = useRef('');
     const stopping = useRef(undefined);
     const seq = useRef(0);
     /** The tallest the repainting region has been this turn, which is the height it keeps. */
@@ -148,39 +206,31 @@ function App({ engine, options, theme }) {
     // fan-out is read across, not down.
     const allowance = Math.min(ACTIVITY_ROWS, Math.max(0, rows - CHROME_ROWS - 2));
     const boxes = busy
-        ? branchBoxesOf(running.current, branches.current, Date.now(), columns - GUTTER, lane, branchRows(branches.current.size, allowance))
+        ? branchBoxesOf(running.current, branches.current, Date.now(), columns - GUTTER, lane, spin, branchRows(branches.current.size, allowance))
         : [];
     // What the trunk itself has in flight. A branch's call is the branch's
     // business — it has a box saying so — and the trunk, having forked, is
     // waiting at the join.
     const mine = busy ? trunkCallsOf(running.current, branches.current) : [];
-    const trunkRows = busy ? trunkRowsOf(mine, Date.now(), columns - GUTTER - 2) : [];
+    const trunkRows = busy ? trunkRowsOf(mine, Date.now(), columns - GUTTER - 2, spin) : [];
     // Priced as far as it has got. Read during render, so the frame timer is
     // what advances the clock.
     const inflight = busy
         ? { usage: spent.current, durationMs: Date.now() - startedAt.current }
         : undefined;
-    // Reasoning survives the call that produced it, because it is why the tool
-    // now running is running. That makes settled text indistinguishable from
-    // live text unless the difference is drawn, and a paragraph that has quietly
-    // stopped moving reads as a hang.
-    const streaming = busy && Date.now() - flowing.current < SETTLE_MS;
-    // A settled block collapses to its opening line. It still says why the work
-    // now running is running, but it stops holding six rows of a paragraph that
-    // finished a minute ago — during a fan-out the trunk makes no call of its
-    // own, so nothing clears it and it reads as hung.
-    const budget = budgetOf(rows, activityHeight(boxes, trunkRows), thinking ? (streaming ? THINKING_ROWS : 1) : 0);
+    // Up from the first reasoning token until the step arrives at prose or a
+    // call, which is when what it was deciding stops being the news.
+    const streaming = busy && thinking !== '';
+    const budget = budgetOf(rows, activityHeight(boxes, trunkRows), streaming ? THINKING_ROWS : 0);
     const fitted = fitActivity(boxes, trunkRows, budget.activity);
     // How tall the region actually needs to be, mirroring what the three blocks
-    // below draw.
-    const thinkingRows = thinking && budget.thinking
-        ? (streaming ? windowOf(thinking, columns - GUTTER, budget.thinking).length : 1) +
-            THINKING_CHROME
-        : 0;
-    const liveRows = live ? windowOf(live, answerWidth(columns) - 4, budget.live).length : 0;
+    // 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 wanted = activityHeight(fitted.boxes, fitted.trunk) +
         (fitted.hidden ? 1 : 0) +
-        thinkingRows +
+        (streaming ? budget.thinking : 0) +
         liveRows;
     // A turn opens against the prompt and grows up from it, one row at a time,
     // the way anything else printed to a terminal does. Reserving the whole
@@ -188,17 +238,49 @@ function App({ engine, options, theme }) {
     // before a word of the answer existed. It only ever grows, so the footer
     // still never rides back up: what a block gives back is left as slack.
     grown.current = busy ? Math.min(budget.total, Math.max(grown.current, wanted)) : 0;
-    const push = useCallback((kind, text, detail, lead) => {
-        setLines((prev) => [...prev, { key: `${seq.current++}`, kind, lead, text, detail }]);
+    const push = useCallback((kind, text, detail, lead, time) => {
+        setLines((prev) => [
+            ...prev,
+            {
+                key: `${seq.current++}`,
+                kind,
+                lead,
+                text,
+                detail,
+                time,
+                // Only the call that opens a run of them is worth a blank
+                // row: the gap says *the prose stopped here*, and repeating
+                // it between siblings says nothing.
+                gap: kind === 'tool' && prev[prev.length - 1]?.kind !== 'tool',
+            },
+        ]);
     }, []);
+    /**
+     * Commit whatever the model has said so far to the scrollback.
+     *
+     * Called when the turn moves on to something else — a call, a fork, a
+     * handoff — because that is the moment the prose stops being *what is
+     * arriving* and becomes *what was said before this*. Prose that is never
+     * followed by a call is the answer, so it is still on screen when the turn
+     * lands, and the boxed answer replaces it in place.
+     */
+    const settle = useCallback(() => {
+        const text = said.current.trim();
+        said.current = '';
+        setLive('');
+        if (text) {
+            told.current = text;
+            push('text', text);
+        }
+    }, [push]);
     // 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.
     //
-    // Reasoning is accumulated the same way but never enters `lines`: it is a
-    // progress indicator, not part of the conversation. The full chain is in
-    // the trajectory (`LlmCallNode.thinking`) and the run's report, so nothing
-    // is lost when it is cleared at the start of the next model call.
+    // Reasoning is accumulated the same way and dropped when its model call
+    // lands: the whole chain is in the trajectory (`LlmCallNode.thinking`) and
+    // the run's report, and a summary of how an answer was reached is worth
+    // watching happen and not worth a row once it has.
     const onEvent = useCallback((event) => {
         if (!isCheckpoint(event)) {
             // Only the trunk's answer is drawn. A fork has several running
@@ -216,13 +298,21 @@ function App({ engine, options, theme }) {
                     return;
                 }
                 if (!event.branch) {
-                    flowing.current = Date.now();
-                    setThinking((prev) => prev + event.delta);
+                    mind.current += event.delta;
+                    setThinking(mind.current);
                 }
                 return;
             }
             if (event.type === 'text_delta' && !event.branch) {
-                setLive((prev) => prev + event.delta);
+                // 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.
+                if (mind.current) {
+                    mind.current = '';
+                    setThinking('');
+                }
+                said.current += event.delta;
+                setLive(said.current);
             }
             return;
         }
@@ -237,18 +327,35 @@ function App({ engine, options, theme }) {
                     }
                 }
                 else {
+                    // A step that answered without calling anything leaves
+                    // its gist up; this is where it goes.
+                    mind.current = '';
                     setThinking('');
+                    setMusing(true);
                     setStep((n) => n + 1);
                 }
                 break;
             case 'after_llm_call':
                 // Branches included: they are what this turn is spending on.
                 spent.current = addUsage(spent.current, event.node.usage);
-                if (!from) {
-                    setModel(event.node.model);
+                if (from) {
+                    break;
                 }
+                setModel(event.node.model);
+                // The gist stays until the call it decided on goes out. Only
+                // the shimmer stops, because nothing is arriving any more.
+                setMusing(false);
                 break;
             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) {
+                    settle();
+                    mind.current = '';
+                    setThinking('');
+                }
                 running.current.set(event.call.callId, {
                     callId: event.call.callId,
                     name: event.call.name,
@@ -283,7 +390,8 @@ function App({ engine, options, theme }) {
                 // difference between knowing a tool ran and knowing what
                 // the agent did. Both are previews already; a whole file
                 // read belongs in the report, not in the scrollback.
-                push('tool', clip(readable(call?.args ?? ''), columns - node.name.length - 5), detailOf(node, from, columns - 4), node.name);
+                const view = describeCall(node.name, call?.args ?? '');
+                push('tool', clip(view.subject, Math.max(20, columns - view.verb.length - TIME_COL - 10)), detailOf(node, columns - 4), view.verb, durationOf(node.durationMs) ?? '');
                 break;
             }
             case 'handoff': {
@@ -294,19 +402,18 @@ function App({ engine, options, theme }) {
                     b.agent = event.to;
                     break;
                 }
+                settle();
                 setAgent(event.to);
                 push('note', `→ ${event.to}`, `handed off from ${event.from}`);
                 break;
             }
             case 'before_fork':
-                // Whatever the trunk was reasoning about, forking is the
-                // conclusion it reached. It makes no call of its own until
-                // the join, so nothing else would clear it and it would sit
-                // there for the length of the fork looking hung.
+                // A fork is what the trunk concluded, so whatever it was
+                // saying is finished as far as the screen is concerned.
                 if (from) {
                     break;
                 }
-                setThinking('');
+                settle();
                 push('note', `⑂ ${event.node.branches.length} branches`, `${event.node.branches.map((b) => b.name).join(', ')} · context ${event.node.contextMode}`);
                 break;
             case 'branch_started':
@@ -323,15 +430,14 @@ function App({ engine, options, theme }) {
             case 'branch_finished': {
                 const b = branches.current.get(event.child.name);
                 branches.current.delete(event.child.name);
-                const spent = b ? ` · ${durationOf(Date.now() - b.startedAt) ?? ''}` : '';
-                const did = b ? ` · ${b.steps} steps · ${b.tools} tools` : '';
-                push('tool', `⑂ ${event.child.name}`, `${event.status}${spent}${did}`);
+                const did = b ? `${b.steps} steps · ${b.tools} tools` : '';
+                push('tool', event.child.name, [event.status, did].filter(Boolean).join(' · '), '⑂ branch', b ? (durationOf(Date.now() - b.startedAt) ?? '') : '');
                 break;
             }
             default:
                 break;
         }
-    }, [columns, push]);
+    }, [columns, push, settle]);
     const submit = useCallback((value) => {
         const text = value.trim();
         if (busy) {
@@ -363,7 +469,11 @@ function App({ engine, options, theme }) {
         setBusy(true);
         setLive('');
         setThinking('');
+        said.current = '';
+        mind.current = '';
+        told.current = '';
         setStep(0);
+        setMusing(false);
         grown.current = 0;
         spent.current = zeroUsage();
         startedAt.current = Date.now();
@@ -374,7 +484,15 @@ function App({ engine, options, theme }) {
         void (async () => {
             try {
                 const outcome = await Engine.run(engine, text, onEvent, controller.signal);
-                push('agent', outcome.text);
+                // The answer is what the turn ended on, and it is normally
+                // still on screen unboxed — nothing followed it, so nothing
+                // committed it. Boxing it here replaces it in place. It is
+                // only skipped when the last thing the model said was
+                // already filed as prose, which is what an aborted turn
+                // looks like: the text is above the call it was cut off at.
+                if (outcome.text.trim() && outcome.text.trim() !== told.current) {
+                    push('agent', outcome.text);
+                }
                 // The previous total is the only thing that can say what
                 // this turn cost, and reading it out of the updater is what
                 // makes that true regardless of when the turn lands.
@@ -400,6 +518,9 @@ function App({ engine, options, theme }) {
                 setBusy(false);
                 setLive('');
                 setThinking('');
+                setMusing(false);
+                said.current = '';
+                mind.current = '';
                 running.current.clear();
                 branches.current.clear();
                 stopping.current = undefined;
@@ -431,12 +552,12 @@ 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 }), _jsx(Activity, { rows: fitted.trunk, hidden: fitted.hidden }), thinking && budget.thinking ? (_jsx(Thinking, { text: thinking, columns: columns, rows: budget.thinking, spin: spin, live: streaming })) : null, live ? _jsx(Live, { text: live, columns: columns, rows: budget.live }) : null] }), _jsx(Footer, { agent: agent, busy: busy, spin: spin, running: mine, forked: branches.current.size, step: step, model: model, stats: stats, inflight: inflight, reasoning: streaming, columns: columns }), 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, 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)] }))] }) }));
 }
 function Header({ engine, readOnly, started, }) {
     const theme = useTheme();
     const model = engine.project.config.model;
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: engine.name }), started ? (_jsx(Text, { color: theme.accent, children: started.created ? ' new session' : ' continuing' })) : null, _jsxs(Text, { dimColor: true, children: [" ", engine.session.id] }), readOnly ? _jsx(Text, { color: theme.warn, children: " read-only" }) : null] }), _jsxs(Text, { dimColor: true, children: [started ? `${started.freshWorkspace ? 'new directory' : 'workspace'} ` : '', display(engine.workspace), model ? ` · ${model}` : ''] })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: engine.name }), started ? (_jsx(Text, { color: theme.accent, children: started.created ? ' new session' : ' continuing' })) : null, _jsxs(Text, { color: theme.chrome.color, children: [" ", engine.session.id] }), readOnly ? _jsx(Text, { color: theme.warn, children: " read-only" }) : null] }), _jsxs(Text, { color: theme.chrome.color, children: [started ? `${started.freshWorkspace ? 'new directory' : 'workspace'} ` : '', display(engine.workspace), model ? ` · ${model}` : ''] })] }));
 }
 // ---------------------------------------------------------------------------
 // The repainting frame
@@ -467,7 +588,7 @@ const GUTTER = 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
- * eight pictures shuffled together; a box per branch is what `examples/board.ts`
+ * eight pictures shuffled together; a box per branch is what `examples/sdk/board.ts`
  * gets right and what makes the shape of the fork legible at a glance.
  *
  * A box shows the last few calls the branch made and whatever it has in flight,
@@ -478,46 +599,66 @@ const GUTTER = 2;
  * box keeps a row saying so rather than collapsing and making the whole board
  * jump every time a tool returns.
  */
-function branchBoxesOf(tools, branches, now, width, lane, share) {
+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 - 6) : '';
-        const room = Math.max(1, gist ? share - 1 : share);
+        const gist = b.thinking.trim() ? gistOf(b.thinking, width - TIME_COL - 6) : '';
+        const budget = Math.max(1, gist ? share - 1 : share);
         const live = [];
         for (const t of tools.values()) {
-            if (t.branch === b.name && live.length < room) {
-                const detail = `  ${secs(now - t.startedAt)}`;
+            if (t.branch === b.name && live.length < budget) {
+                const view = describeCall(t.name, t.args);
                 live.push({
                     key: `t:${t.callId}`,
-                    label: clip(`${t.name} ${readable(t.args)}`, width - detail.length - 2),
-                    detail,
+                    mark: spin,
+                    time: secs(now - t.startedAt),
+                    lead: view.verb,
+                    text: clip(view.subject, room(width) - view.verb.length),
                 });
             }
         }
         // 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 - (room - live.length)));
+        const past = b.done.slice(Math.max(0, b.done.length - (budget - live.length)));
         const rows = [
             ...past.map((d) => {
-                const detail = `  ${d.failed ? 'failed' : (durationOf(d.ms) ?? '')}`;
+                const view = describeCall(d.name, d.args);
                 return {
                     key: `d:${d.callId}`,
-                    label: clip(`✓ ${d.name} ${readable(d.args)}`, width - detail.length - 2),
-                    detail,
-                    past: true,
+                    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}`, label: `… ${gist}`, detail: '', thinking: true }]
+                ? [
+                    {
+                        key: `g:${b.name}`,
+                        mark: '✻',
+                        time: '',
+                        lead: '',
+                        text: gist,
+                        thinking: true,
+                    },
+                ]
                 : []),
             ...live,
         ];
         if (!rows.length) {
-            rows.push({ key: `w:${b.name}`, label: 'thinking…', detail: '', thinking: true });
+            rows.push({
+                key: `w:${b.name}`,
+                mark: '✻',
+                time: '',
+                lead: '',
+                text: 'thinking…',
+                thinking: true,
+            });
         }
         boxes.push({
             name: b.name,
@@ -536,13 +677,15 @@ function trunkCallsOf(tools, branches) {
     return [...tools.values()].filter((t) => t.branch === undefined || !branches.has(t.branch));
 }
 /** What the trunk itself has in flight. It is one thread, so it gets no box. */
-function trunkRowsOf(calls, now, width) {
+function trunkRowsOf(calls, now, width, spin) {
     return calls.map((t) => {
-        const detail = `  ${secs(now - t.startedAt)}`;
+        const view = describeCall(t.name, t.args);
         return {
             key: `t:${t.callId}`,
-            label: clip(`${t.name} ${readable(t.args)}`, width - detail.length),
-            detail,
+            mark: spin,
+            time: secs(now - t.startedAt),
+            lead: view.verb,
+            text: clip(view.subject, Math.max(12, width - TIME_COL - view.verb.length - 6)),
         };
     });
 }
@@ -579,14 +722,29 @@ function Branches({ boxes, spin, columns, }) {
             // 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, { dimColor: true, children: '╭─ ' }), _jsx(Text, { color: b.color, children: b.title }), _jsx(Text, { color: b.color, children: ` ${spin}` }), _jsx(Text, { dimColor: true, children: `  ${b.stats} ` }), _jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(0, columns - used)) })] }), b.rows.map((r) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: b.color, children: '│ ' }), _jsx(Text, { color: r.thinking ? theme.thinking.color : undefined, dimColor: r.thinking ? theme.thinking.dim : undefined, children: r.label }), _jsx(Text, { dimColor: true, children: r.detail })] }, r.key))), _jsx(Text, { dimColor: true, children: '╰─' })] }, b.name));
+            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));
         }) }));
 }
+/**
+ * A row of work in the same shape the transcript will keep it in.
+ *
+ * `mark` occupies the two columns a committed row leaves blank, so the spinner
+ * sits where nothing will be once the call returns and the time, verb and
+ * subject never move.
+ */
+function Work({ row }) {
+    const theme = useTheme();
+    if (row.thinking) {
+        return _jsx(Text, { color: theme.thinking.color, children: `${row.mark} ${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, }) {
+    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) => (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: '  ' }), _jsx(Text, { color: r.color, children: r.label }), _jsx(Text, { dimColor: true, children: r.detail })] }, r.key))), hidden ? (_jsx(Text, { dimColor: true, 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 }) }, 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
@@ -608,54 +766,63 @@ function useLanes(theme) {
         return next;
     }, [theme]);
 }
-/** A reasoning summary's own headings, which arrive as markdown. */
-const HEADING = /^\s*(?:#{1,6}\s*)?\*\*(.+?)\*\*[:.]?\s*$/;
-const TITLE = 'reasoning';
 /**
- * Reasoning is dim prose sitting between dim tool rows and a dim footer, with
- * nothing to say where it starts or stops — so it reads as part of whatever is
- * above it, and it never leaves the bottom of the screen. A rule at each end
- * gives it an edge. Round, to tell live chrome from the square fences an answer
- * puts around code.
+ * Where the model has got to, in one line.
+ *
+ * A reasoning summary is a heading, not a document. Six rows of it pushed the
+ * answer down the screen and asked to be read at the same time as the text
+ * arriving below it, and once the deltas stopped there was nothing to say the
+ * paragraph had finished — a block that had quietly settled read as a hang.
+ *
+ * So the stream is drawn as its gist, and the shimmer is the proof it is
+ * moving. The line outlives the call that wrote it — it is why the calls below
+ * it are being made, and a gist that vanished with its own model call was on
+ * screen for a fraction of the work it explains — but the shimmer stops, so a
+ * settled thought is never mistaken for an arriving one.
  */
-/** Where a settled block got to: its last heading, or failing that its opening. */
-function gistOf(text, width) {
-    const lines = text.split('\n');
-    for (let i = lines.length - 1; i >= 0; i--) {
-        const head = HEADING.exec(lines[i] ?? '');
-        if (head?.[1]) {
-            return clip(head[1], width);
-        }
-    }
-    return clip(text, width);
-}
-function Thinking({ text, columns, rows, spin, live, }) {
+function Reasoning({ text, columns, frame, live, }) {
     const theme = useTheme();
-    // Settled, the block is down to one row, and the tail of a paragraph is a
-    // fragment ("ports.") rather than a summary. The last heading the model
-    // wrote is the shortest true account of where it got to.
-    const shown = live ? windowOf(text, columns - GUTTER, rows) : [gistOf(text, columns - GUTTER)];
-    // Ink truncates rather than wraps, so an over-wide rule clips instead of
-    // costing the block a row it was not given.
-    const dashes = Math.max(0, columns - TITLE.length - (live ? 6 : 4));
-    const { color, dim } = theme.thinking;
-    return (_jsxs(Box, { flexDirection: "column", height: shown.length + THINKING_CHROME, overflow: "hidden", children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: '╭─ ' }), _jsx(Text, { color: color, children: TITLE }), live ? _jsx(Text, { color: color, children: ` ${spin}` }) : null, _jsx(Text, { dimColor: true, children: ` ${'─'.repeat(dashes)}` })] }), shown.map((row, i) => {
-                // Not italic, and not dim: dim italic on a dark terminal is the
-                // least legible thing available, and this is meant to be read.
-                // Its own hue is what separates it from the tool rows instead.
-                const head = HEADING.exec(row);
-                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: color, children: '│ ' }), _jsx(Text, { color: color, dimColor: dim, bold: head !== null, children: head ? head[1] : row })] }, i));
-            }), _jsx(Text, { dimColor: true, children: '╰─' })] }));
+    const gist = gistOf(text, columns - GUTTER - 2);
+    return (_jsx(Box, { height: 1, paddingLeft: GUTTER, overflow: "hidden", children: _jsx(Text, { wrap: "truncate-end", children: live ? (_jsx(Shimmer, { text: gist, frame: frame, color: theme.thinking.color })) : (_jsx(Text, { color: theme.thinking.color, children: gist })) }) }));
 }
-function Live({ text, columns, rows }) {
+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);
-    return (_jsx(Box, { flexDirection: "column", paddingLeft: GUTTER, height: shown.length, overflow: "hidden", children: shown.map((row, i) => (_jsx(Text, { wrap: "truncate-end", children: row }, i))) }));
+    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. */
 const LABEL = 10;
-function Footer({ agent, busy, spin, running, forked, step, model, stats, inflight, reasoning, columns, }) {
+/** Frames the crest spends past the end, so a sweep reads as a pass, not a loop. */
+const SWEEP_GAP = 6;
+/**
+ * A crest of weight travelling through a word, left to right.
+ *
+ * The spinner is proof the process is alive, but it is chrome and the eye
+ * reads the word beside it — a word that never moves is what a hung run looks
+ * like. The wave is weight rather than hue because the theme has no ramp to
+ * spend: a short bold crest travels through the word, and the word keeps
+ * whatever colour its role gave it. The trough is the word's own weight, not
+ * `dim` — a hue with `dim` over it is what Apple Terminal renders as nothing.
+ */
+function Shimmer({ text, frame, color, }) {
+    const chars = [...text];
+    // A new word is a new thing to say, so the sweep starts over on it rather
+    // than picking the crest up wherever the last word had got to.
+    const begun = useRef(frame);
+    const said = useRef(text);
+    if (said.current !== text) {
+        said.current = text;
+        begun.current = frame;
+    }
+    const head = (frame - begun.current) % (chars.length + SWEEP_GAP);
+    return (_jsx(Text, { children: chars.map((ch, i) => {
+            // The crest sits on the head and the tail drags behind it.
+            const behind = head - i;
+            return (_jsx(Text, { color: color, bold: behind >= 0 && behind <= 2, children: ch }, i));
+        }) }));
+}
+function Footer({ agent, busy, spin, frame, running, forked, step, model, stats, inflight, reasoning, }) {
     const theme = useTheme();
     // Who before what. The agent is the subject of the sentence, and in a
     // handoff it is the thing that changed.
@@ -664,32 +831,25 @@ function Footer({ agent, busy, spin, running, forked, step, model, stats, inflig
         ...(model ? [model] : []),
         'esc to stop',
     ].join(' · ');
-    // The argument is what identifies a generic tool — `run_command` is every
-    // shell command there is — but the activity row above carries it in full,
-    // so the footer takes it only when there is width to say something useful.
-    const first = running[0];
-    const room = columns - agent.length - aside.length - 12;
-    const what = running.length > 1
-        ? `running ${running.length} tools`
-        : first
-            ? room >= 24
-                ? clip(`${first.name} ${readable(first.args)}`, room)
-                : `running ${first.name}`
-            : forked
+    // One word for what the turn is spending its time on, and the three are
+    // different kinds of waiting: the model is composing, the model is
+    // reasoning about what to compose, or the model is not running at all and
+    // something else is. What the call actually is belongs to the row above,
+    // which has the width to say it.
+    const phase = running.length || forked ? 'waiting' : reasoning ? 'reasoning' : 'working';
+    const what = phase !== 'waiting'
+        ? phase
+        : running.length > 1
+            ? `waiting on ${running.length} tools`
+            : forked && !running.length
                 ? // Having forked, the trunk has nothing of its own to do. The
                     // boxes above say what the branches are doing.
                     `waiting on ${forked} ${forked === 1 ? 'branch' : 'branches'}`
-                : reasoning
-                    ? 'reasoning'
-                    : 'thinking';
-    // A clip has already ended it with one.
-    const status = what.endsWith('…') ? what : `${what}…`;
-    // Nothing of its own in flight means the word above is about reasoning, so
-    // it takes the same hue the reasoning block does.
-    const musing = !running.length && !forked;
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: agent }), busy ? (_jsxs(Text, { color: musing ? theme.thinking.color : theme.warn, children: ['  ', spin, " ", status] })) : null, busy ? _jsx(Text, { dimColor: true, children: `  ${aside}` }) : null] }), inflight ? (_jsxs(Text, { dimColor: true, children: ['this turn'.padEnd(LABEL), tokens(inflight.usage), ` · ${secs(inflight.durationMs)}`] })) : (_jsxs(_Fragment, { children: [stats.turn ? (_jsxs(Text, { dimColor: true, children: ['last turn'.padEnd(LABEL), tokens(stats.turn), stats.durationMs === undefined
+                : 'waiting';
+    const hue = theme.phase[phase];
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: agent }), busy ? (_jsxs(Text, { color: hue, children: ['  ', spin, " ", _jsx(Shimmer, { text: `${what}…`, frame: frame, color: hue })] })) : null, busy ? _jsx(Text, { color: theme.chrome.color, children: `  ${aside}` }) : null] }), inflight ? (_jsxs(Text, { color: theme.chrome.color, children: ['this turn'.padEnd(LABEL), tokens(inflight.usage), ` · ${secs(inflight.durationMs)}`] })) : (_jsxs(_Fragment, { children: [stats.turn ? (_jsxs(Text, { color: theme.chrome.color, children: ['last turn'.padEnd(LABEL), tokens(stats.turn), stats.durationMs === undefined
                                 ? ''
-                                : ` · ${durationOf(stats.durationMs) ?? ''}`] })) : null, _jsxs(Text, { dimColor: true, children: ['session'.padEnd(LABEL), tokens(stats.session), stats.calls
+                                : ` · ${durationOf(stats.durationMs) ?? ''}`] })) : null, _jsxs(Text, { color: theme.chrome.color, children: ['session'.padEnd(LABEL), tokens(stats.session), stats.calls
                                 ? ` · ${stats.calls} ${stats.calls === 1 ? 'call' : 'calls'}`
                                 : ''] })] }))] }));
 }
@@ -720,14 +880,17 @@ function durationOf(ms) {
 function secs(ms) {
     return `${(ms / 1000).toFixed(1)}s`;
 }
-/** What a finished tool call has to say for itself, under its own name. */
-function detailOf(node, branch, width) {
-    const parts = [
-        ...(branch ? [`⑂ ${branch}`] : []),
-        ...(node.isError ? ['failed'] : []),
-        ...(durationOf(node.durationMs) ? [durationOf(node.durationMs)] : []),
-        ...(node.result.preview ? [readable(node.result.preview)] : []),
-    ];
+/**
+ * What a finished tool call has to say for itself.
+ *
+ * The duration has its own column on the row now, and the branch has its own
+ * box, so what is left is the outcome: `summarise` reads the fields that matter
+ * for the tools the runtime ships and falls back to the raw preview for the
+ * ones it does not know.
+ */
+function detailOf(node, width) {
+    const said = summarise(node.name, node.result.preview ?? '');
+    const parts = [...(node.isError ? ['failed'] : []), ...(said ? [said] : [])];
     // One row. Two left a six-character orphan under most results, and a
     // preview is already a preview: the whole of it is a click away in the
     // report, and a wall of it here buries the next answer.