@zenera/cli 1.1.9 → 1.1.11

package/dist/tui/app.js

@@ -1,15 +1,16 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, 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';
 import { pathToFileURL } from 'node:url';
-import React, { useCallback, useContext, useRef, useState } from 'react';
-import { isCheckpoint, turns, zeroUsage } from '@zenera/neo';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import * as Engine from "../engine.js";
+import { History } from "../history.js";
 import { format } from "../narrate.js";
 import { display } from "../session.js";
 import { CliError } from "../term.js";
 import { resolveTheme, THEMES } from "./theme.js";
-import { windowOf } from "./wrap.js";
+import { ACTIVITY_ROWS, answerWidth, BOX_CHROME, BRANCH_ROWS, branchRows, budgetOf, CHROME_ROWS, clip, readable, segmentsOf, THINKING_CHROME, THINKING_ROWS, windowOf, } from "./wrap.js";
 const BANNER = { key: 'banner' };
 const isBanner = (item) => item.key === 'banner';
 const MARK = {
@@ -19,6 +20,12 @@ const MARK = {
     note: ' ',
     error: '!',
 };
+/** Proof of life. Ten frames at 100ms is a turn of the wheel per second. */
+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.
@@ -26,7 +33,20 @@ 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: [_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] })] }));
+    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 keeps the row's colour without its dimming. Nested
+                    // rather than one string: Ink dims a whole Text or none of it.
+                    _jsxs(Text, { children: [line.lead ? _jsx(Text, { color: style.color, 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] })] }));
+}
+function Answer({ text }) {
+    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))) }));
 }
 function App({ engine, options, theme }) {
     const { exit } = useApp();
@@ -40,19 +60,136 @@ function App({ engine, options, theme }) {
         session: engine.state?.usage ?? zeroUsage(),
         calls: engine.state ? turns(engine.state) : 0,
     });
-    const [tool, setTool] = useState(undefined);
+    /** Model calls in the turn now running, and what answered the last one. */
+    const [step, setStep] = useState(0);
+    const [model, setModel] = useState(undefined);
+    // 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());
+    const branches = useRef(new Map());
+    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
+    // 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);
     const stopping = useRef(undefined);
     const seq = useRef(0);
+    /** The tallest the repainting region has been this turn, which is the height it keeps. */
+    const grown = useRef(0);
+    // The prompt, and how to get back into it what was asked before.
+    //
+    // `TextInput` is uncontrolled: it takes a starting value and owns it from
+    // there. So recalling a line means handing it a new starting value and a
+    // new `key`, which mounts a fresh input — that is also what puts the cursor
+    // at the end of the recalled text, where it is wanted.
+    const [history] = useState(() => History.open(engine.project.root));
+    const [draft, setDraft] = useState('');
+    const [generation, setGeneration] = useState(0);
+    /** Where in the history the prompt is; `entries.length` is the live line. */
+    const at = useRef(history.entries.length);
+    /** What the input holds right now, which nothing else can see. */
+    const typed = useRef('');
+    /** The half-written line browsing started from, returned to by walking back down. */
+    const pending = useRef('');
+    const remember = useCallback((value) => {
+        typed.current = value;
+    }, []);
+    const reset = useCallback(() => {
+        at.current = history.entries.length;
+        pending.current = '';
+        typed.current = '';
+        setDraft('');
+        setGeneration((g) => g + 1);
+    }, [history]);
+    const recall = useCallback((delta) => {
+        const items = history.entries;
+        const end = items.length;
+        if (end === 0) {
+            return;
+        }
+        if (at.current === end) {
+            if (delta > 0) {
+                return;
+            }
+            pending.current = typed.current;
+        }
+        const next = Math.min(end, Math.max(0, at.current + delta));
+        if (next === at.current) {
+            return;
+        }
+        at.current = next;
+        const value = next === end ? pending.current : (items[next] ?? '');
+        typed.current = value;
+        setDraft(value);
+        setGeneration((g) => g + 1);
+    }, [history]);
+    // A spinner and a clock have to move on their own, so the frame is driven
+    // by a timer rather than by events — but only while there is something to
+    // watch, so an idle prompt repaints exactly never.
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        if (!busy) {
+            return;
+        }
+        const timer = setInterval(() => setFrame((n) => n + 1), FRAME_MS);
+        return () => clearInterval(timer);
+    }, [busy]);
     // Read during render so a resize, which re-renders the root, resizes the
-    // windows below with it. The two streaming blocks share one budget: what
+    // windows below with it. The three repainting blocks share one budget: what
     // is left of the terminal once the chrome has had its rows.
     const rows = stdout?.rows ?? 24;
     const columns = stdout?.columns ?? 80;
-    const budget = Math.max(2, rows - CHROME_ROWS);
-    const thinkingRows = thinking ? Math.min(THINKING_ROWS, Math.max(1, budget - 2)) : 0;
-    const liveRows = Math.max(1, budget - thinkingRows);
-    const push = useCallback((kind, text, detail) => {
-        setLines((prev) => [...prev, { key: `${seq.current++}`, kind, text, detail }]);
+    const spin = SPINNER[frame % SPINNER.length];
+    // Every branch box is the same height, so the share has to be settled
+    // before the boxes are built: the rows come out of one allowance and a
+    // 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))
+        : [];
+    // 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) : [];
+    // 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);
+    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;
+    const wanted = activityHeight(fitted.boxes, fitted.trunk) +
+        (fitted.hidden ? 1 : 0) +
+        thinkingRows +
+        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
+    // region up front instead threw the question that started it at the ceiling
+    // 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 }]);
     }, []);
     // Deltas arrive far faster than a terminal can usefully redraw, so text is
     // accumulated in one string and React coalesces the repaints. The finished
@@ -64,48 +201,159 @@ function App({ engine, options, theme }) {
     // is lost when it is cleared at the start of the next model call.
     const onEvent = useCallback((event) => {
         if (!isCheckpoint(event)) {
-            if (event.type === 'text_delta') {
-                setLive((prev) => prev + event.delta);
+            // Only the trunk's answer is drawn. A fork has several running
+            // at once, and appending them all to one string is not a
+            // transcript of anything: it is several answers interleaved
+            // token by token. Each branch's distilled result arrives at the
+            // join, and the whole of it is in the report.
+            //
+            // Reasoning is different: it is a progress indicator, and each
+            // branch has a box to put its own in.
+            const owner = event.branch ? branches.current.get(event.branch.name) : undefined;
+            if (event.type === 'thinking_delta') {
+                if (owner) {
+                    owner.thinking += event.delta;
+                    return;
+                }
+                if (!event.branch) {
+                    flowing.current = Date.now();
+                    setThinking((prev) => prev + event.delta);
+                }
+                return;
             }
-            else if (event.type === 'thinking_delta') {
-                setThinking((prev) => prev + event.delta);
+            if (event.type === 'text_delta' && !event.branch) {
+                setLive((prev) => prev + event.delta);
             }
             return;
         }
+        const from = event.branch?.name;
         switch (event.type) {
             case 'before_llm_call':
-                setThinking('');
+                if (from) {
+                    const b = branches.current.get(from);
+                    if (b) {
+                        b.steps++;
+                        b.thinking = '';
+                    }
+                }
+                else {
+                    setThinking('');
+                    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);
+                }
                 break;
             case 'before_tool_call':
-                setTool(event.call.name);
+                running.current.set(event.call.callId, {
+                    callId: event.call.callId,
+                    name: event.call.name,
+                    args: event.call.args.preview ?? '',
+                    startedAt: Date.now(),
+                    branch: from,
+                });
                 break;
-            case 'after_tool_call':
-                setTool(undefined);
-                push('tool', event.node.name, event.node.isError ? 'failed' : durationOf(event.node.durationMs));
+            case 'after_tool_call': {
+                const { node } = event;
+                const call = running.current.get(node.callId);
+                running.current.delete(node.callId);
+                const b = from ? branches.current.get(from) : undefined;
+                if (b) {
+                    b.tools++;
+                    // A branch's calls belong to its box, not to the
+                    // transcript: several branches finishing into one
+                    // 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,
+                        name: node.name,
+                        args: call?.args ?? '',
+                        ms: node.durationMs,
+                        failed: node.isError,
+                    });
+                    b.done.splice(0, b.done.length - BRANCH_ROWS);
+                    break;
+                }
+                // What it was asked and what it answered, which is the
+                // 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);
                 break;
-            case 'handoff':
+            }
+            case 'handoff': {
+                // A handoff inside a branch renames that branch, not the
+                // session: the trunk is still whoever forked.
+                const b = from ? branches.current.get(from) : undefined;
+                if (b) {
+                    b.agent = event.to;
+                    break;
+                }
                 setAgent(event.to);
                 push('note', `→ ${event.to}`, `handed off from ${event.from}`);
                 break;
+            }
             case 'before_fork':
-                push('note', `⑂ ${event.node.branches.map((b) => b.name).join(', ')}`);
+                // 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.
+                if (from) {
+                    break;
+                }
+                setThinking('');
+                push('note', `⑂ ${event.node.branches.length} branches`, `${event.node.branches.map((b) => b.name).join(', ')} · context ${event.node.contextMode}`);
                 break;
-            case 'branch_finished':
-                push('tool', `⑂ ${event.child.name}`, event.status);
+            case 'branch_started':
+                branches.current.set(event.child.name, {
+                    name: event.child.name,
+                    agent: event.childState.agentName,
+                    startedAt: Date.now(),
+                    steps: 0,
+                    tools: 0,
+                    thinking: '',
+                    done: [],
+                });
                 break;
+            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}`);
+                break;
+            }
             default:
                 break;
         }
-    }, [push]);
+    }, [columns, push]);
     const submit = useCallback((value) => {
         const text = value.trim();
-        if (!text || busy) {
+        if (busy) {
+            return;
+        }
+        // Recorded before it is acted on, so a question that fails — or
+        // one that quits — is still one arrow key away next time.
+        history.add(text);
+        reset();
+        if (!text) {
             return;
         }
         if (text === '/exit' || text === '/quit') {
             exit();
             return;
         }
+        if (text === '/help') {
+            push('note', 'commands', '/help  /clear  /exit · ↑ recalls, esc stops a turn');
+            push('note', 'the footer', 'in = what was sent · out = what came back · a number in brackets is part' +
+                ' of the one before it, not an extra');
+            return;
+        }
         if (text === '/clear') {
             setLines([]);
             stdout?.write('\u001b[2J\u001b[H');
@@ -115,6 +363,12 @@ function App({ engine, options, theme }) {
         setBusy(true);
         setLive('');
         setThinking('');
+        setStep(0);
+        grown.current = 0;
+        spent.current = zeroUsage();
+        startedAt.current = Date.now();
+        running.current.clear();
+        branches.current.clear();
         const controller = new AbortController();
         stopping.current = controller;
         void (async () => {
@@ -146,28 +400,43 @@ function App({ engine, options, theme }) {
                 setBusy(false);
                 setLive('');
                 setThinking('');
-                setTool(undefined);
+                running.current.clear();
+                branches.current.clear();
                 stopping.current = undefined;
             }
         })();
-    }, [busy, engine, exit, onEvent, push, stdout]);
+    }, [busy, engine, exit, history, onEvent, push, reset, stdout]);
     // Escape stops the turn; ctrl-c leaves. They are different things, and a
     // run that is asked to stop still writes its state, so the session survives
     // either one.
-    useInput((_input, keys) => {
+    //
+    // The arrows are ours because `TextInput` explicitly ignores them; a turn
+    // in flight owns the keyboard, so they only walk the history while idle.
+    useInput((input, keys) => {
         if (keys.escape && stopping.current) {
             stopping.current.abort();
         }
-        if (keys.ctrl && _input === 'c') {
+        if (keys.ctrl && input === 'c') {
             stopping.current?.abort();
             exit();
+            return;
+        }
+        if (busy) {
+            return;
+        }
+        if (keys.upArrow) {
+            recall(-1);
+        }
+        else if (keys.downArrow) {
+            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 }, item.key)) : (_jsx(Row, { line: item }, item.key)) }), thinking ? (_jsx(Thinking, { text: thinking, columns: columns, rows: thinkingRows })) : null, live ? _jsx(Live, { text: live, columns: columns, rows: liveRows }) : null, _jsx(Footer, { agent: agent, busy: busy, tool: tool, stats: stats, thinking: Boolean(thinking) }), busy ? null : (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: "\u203A " }), _jsx(TextInput, { placeholder: "Ask something\u2026 (/exit to leave)", onSubmit: submit })] }))] }) }));
+    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)] }))] }) }));
 }
-function Header({ engine, readOnly, }) {
+function Header({ engine, readOnly, started, }) {
     const theme = useTheme();
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: engine.name }), _jsxs(Text, { dimColor: true, children: [" ", engine.session.id] }), readOnly ? _jsx(Text, { color: theme.warn, children: " read-only" }) : null] }), _jsx(Text, { dimColor: true, children: display(engine.workspace) })] }));
+    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}` : ''] })] }));
 }
 // ---------------------------------------------------------------------------
 // The repainting frame
@@ -190,44 +459,242 @@ function Header({ engine, readOnly, }) {
 //
 // Nothing is lost by any of it: the finished answer lands in `Static` whole,
 // and the full reasoning chain is in the trajectory and the run's report.
+//
+// How the rows are divided between the three blocks is `budgetOf` in wrap.ts.
 // ---------------------------------------------------------------------------
-/** How much of the reasoning stream is worth showing. It is a progress bar. */
-const THINKING_ROWS = 6;
-/** The two footer rows, its margin, the prompt, and a row in hand. */
-const CHROME_ROWS = 6;
 /** The gutter every streaming block is indented behind. */
 const GUTTER = 2;
-function Thinking({ text, columns, rows }) {
+/**
+ * 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`
+ * 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,
+ * in that order: what it just did is why it is doing this. `share` is how many
+ * rows it may spend on them, so the region is bounded however wide the fork is.
+ *
+ * A branch between calls is not idle, it is deciding what to call next, so its
+ * 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) {
+    const boxes = [];
+    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 live = [];
+        for (const t of tools.values()) {
+            if (t.branch === b.name && live.length < room) {
+                const detail = `  ${secs(now - t.startedAt)}`;
+                live.push({
+                    key: `t:${t.callId}`,
+                    label: clip(`${t.name} ${readable(t.args)}`, width - detail.length - 2),
+                    detail,
+                });
+            }
+        }
+        // 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 rows = [
+            ...past.map((d) => {
+                const detail = `  ${d.failed ? 'failed' : (durationOf(d.ms) ?? '')}`;
+                return {
+                    key: `d:${d.callId}`,
+                    label: clip(`✓ ${d.name} ${readable(d.args)}`, width - detail.length - 2),
+                    detail,
+                    past: true,
+                };
+            }),
+            // 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: '', past: true }] : []),
+            ...live,
+        ];
+        if (!rows.length) {
+            rows.push({ key: `w:${b.name}`, label: 'thinking…', detail: '', past: false });
+        }
+        boxes.push({
+            name: b.name,
+            color: lane(b.name),
+            title: `${b.name}${b.agent ? ` · ${b.agent}` : ''}`,
+            stats: `${b.steps} ${b.steps === 1 ? 'step' : 'steps'}` +
+                (b.tools ? `  ${b.tools} ${b.tools === 1 ? 'tool' : 'tools'}` : '') +
+                `  ${secs(now - b.startedAt)}`,
+            rows: rows.slice(-share),
+        });
+    }
+    return boxes;
+}
+/** What the trunk itself has in flight: everything no live branch owns. */
+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) {
+    return calls.map((t) => {
+        const detail = `  ${secs(now - t.startedAt)}`;
+        return {
+            key: `t:${t.callId}`,
+            label: clip(`${t.name} ${readable(t.args)}`, width - detail.length),
+            detail,
+        };
+    });
+}
+/** The rows the whole region wants before anything is cut. */
+function activityHeight(boxes, trunk) {
+    return boxes.reduce((n, b) => n + BOX_CHROME + b.rows.length, 0) + trunk.length;
+}
+/**
+ * Boxes first and whole: half a box is an opening rule with nothing to close
+ * it, so a branch that does not fit is counted rather than clipped.
+ */
+function fitActivity(boxes, trunk, allowance) {
+    const kept = [];
+    let used = 0;
+    for (const b of boxes) {
+        const h = BOX_CHROME + b.rows.length;
+        if (used + h > allowance) {
+            break;
+        }
+        kept.push(b);
+        used += h;
+    }
+    const left = boxes.length - kept.length;
+    const hidden = left && used < allowance ? left : 0;
+    return {
+        boxes: kept,
+        trunk: trunk.slice(0, Math.max(0, allowance - used - (hidden ? 1 : 0))),
+        hidden,
+    };
+}
+function Branches({ boxes, spin, columns, }) {
+    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, { 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, { dimColor: true, children: r.label }), _jsx(Text, { dimColor: true, children: r.detail })] }, r.key))), _jsx(Text, { dimColor: true, children: '╰─' })] }, b.name));
+        }) }));
+}
+function Activity({ rows, hidden, }) {
+    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, dimColor: r.color === undefined, 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] }));
+}
+/**
+ * A stable colour per branch, handed out in order of first sight. Held in a ref
+ * so a branch keeps its colour for the whole turn rather than being recoloured
+ * every time the map is rebuilt.
+ */
+function useLanes(theme) {
+    const assigned = useRef(new Map());
+    return useCallback((name) => {
+        if (!name) {
+            return undefined;
+        }
+        const seen = assigned.current.get(name);
+        if (seen !== undefined) {
+            return seen;
+        }
+        const next = theme.lanes[assigned.current.size % theme.lanes.length];
+        assigned.current.set(name, next);
+        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 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, }) {
     const theme = useTheme();
-    const shown = windowOf(text, columns - GUTTER, rows);
-    return (_jsxs(Box, { flexDirection: "row", height: shown.length, overflow: "hidden", children: [_jsx(Box, { flexDirection: "column", width: GUTTER, children: shown.map((_, i) => (_jsx(Text, { color: theme.rule, dimColor: true, children: i === 0 ? '◇ ' : '  ' }, i))) }), _jsx(Box, { flexDirection: "column", children: shown.map((row, i) => (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate-end", children: row }, i))) })] }));
+    // 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));
+    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, { dimColor: true, children: TITLE }), live ? _jsx(Text, { color: theme.warn, children: ` ${spin}` }) : null, _jsx(Text, { dimColor: true, children: ` ${'─'.repeat(dashes)}` })] }), shown.map((row, i) => {
+                // Not italic: dim italic on a dark terminal is the least
+                // legible thing available, and this is meant to be read.
+                const head = HEADING.exec(row);
+                return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: '│ ' }), _jsx(Text, { dimColor: true, bold: head !== null, children: head ? head[1] : row })] }, i));
+            }), _jsx(Text, { dimColor: true, children: '╰─' })] }));
 }
 function Live({ text, columns, rows }) {
-    const shown = windowOf(text, columns - GUTTER, 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))) }));
 }
-function Footer({ agent, busy, tool, stats, thinking, }) {
-    const what = tool ? `running ${tool}` : thinking ? 'reasoning' : 'thinking';
+/** 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, }) {
     const theme = useTheme();
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [busy ? _jsxs(Text, { color: theme.warn, children: [what, "\u2026 "] }) : null, _jsx(Text, { color: theme.accent, dimColor: true, children: agent }), stats.turn ? (_jsxs(Text, { dimColor: true, children: ['  turn ', tokens(stats.turn), stats.durationMs === undefined
+    // Who before what. The agent is the subject of the sentence, and in a
+    // handoff it is the thing that changed.
+    const aside = [
+        ...(step ? [`step ${step}`] : []),
+        ...(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
+                ? // 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}…`;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, dimColor: true, children: agent }), busy ? (_jsxs(Text, { 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
                                 ? ''
-                                : ` · ${durationOf(stats.durationMs) ?? ''}`] })) : null, busy ? _jsx(Text, { dimColor: true, children: '  esc to stop' }) : null] }), _jsxs(Text, { dimColor: true, children: ['session ', tokens(stats.session), stats.calls ? ` · ${stats.calls} ${stats.calls === 1 ? 'call' : 'calls'}` : ''] })] }));
+                                : ` · ${durationOf(stats.durationMs) ?? ''}`] })) : null, _jsxs(Text, { dimColor: true, children: ['session'.padEnd(LABEL), tokens(stats.session), stats.calls
+                                ? ` · ${stats.calls} ${stats.calls === 1 ? 'call' : 'calls'}`
+                                : ''] })] }))] }));
 }
 /**
- * Cache and reasoning are subsets of the numbers beside them, not additions to
- * them, and they are only worth the width when a provider actually reports one
- * — most do not, and a row of zeroes teaches nobody anything.
+ * Cache and reasoning are SUBSETS of the number beside them, so they are drawn
+ * inside it. On one dotted line they read as four things to add up, which is
+ * the single reading that is wrong. Both are skipped when the provider reports
+ * nothing — most do not, and a row of zeroes teaches nobody anything.
  */
 function tokens(usage) {
-    const parts = [`${format(usage.inputTokens)} in`];
-    if (usage.cachedInputTokens) {
-        parts.push(`${format(usage.cachedInputTokens)} cached`);
-    }
-    parts.push(`${format(usage.outputTokens)} out`);
-    if (usage.reasoningTokens) {
-        parts.push(`${format(usage.reasoningTokens)} thinking`);
-    }
-    return parts.join(' · ');
+    const cached = usage.cachedInputTokens ? ` (${format(usage.cachedInputTokens)} cached)` : '';
+    const think = usage.reasoningTokens ? ` (${format(usage.reasoningTokens)} thinking)` : '';
+    return `${format(usage.inputTokens)} in${cached} · ${format(usage.outputTokens)} out${think}`;
 }
 /** What the last turn added. Usage only ever grows, so a subtraction is safe. */
 function since(before, after) {
@@ -241,6 +708,23 @@ function since(before, after) {
 function durationOf(ms) {
     return ms === undefined ? undefined : ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
 }
+/** A clock that is being watched. Always seconds, so the digits do not jump. */
+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)] : []),
+    ];
+    // 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.
+    return clip(parts.join(' · '), Math.max(40, width));
+}
 // ---------------------------------------------------------------------------
 export async function start(engine, options) {
     // Asked before Ink takes the terminal: the query talks to stdin directly,