koneck 2.25.2 → 2.25.4

package/dist/ink-chat.js

@@ -8,11 +8,12 @@ import { generateSessionId, saveSession, listSessions, loadSession } from './ses
 import { loadMemory } from './memory.js';
 import { loadKoneckConfig, saveKoneckConfig, setConfigKey, configKeyDescriptions, CONFIG_FILE } from './config-store.js';
 import { PROVIDERS, resolveProvider, getApiKey, addUserProvider, userProvidersPath } from './providers.js';
-import { listCheckpoints, revertCheckpoint, snapshotTree } from './checkpoint.js';
-import { bar, humanTokens, humanDuration, diffStatSince, modelInfoFrom, contextWindowFor, recordStatus, classifyResponse, stateLabel, readModelStatus, } from './usage.js';
+import { listCheckpoints, revertCheckpoint, snapshotTree, filesTouchedBy } from './checkpoint.js';
+import { fileDiff, diffSummary } from './diff-view.js';
+import { bar, humanTokens, humanDuration, diffStatSince, modelInfoFrom, contextWindowFor, recordStatus, classifyResponse, stateLabel, readModelStatus, computeUiWidth, } from './usage.js';
 import { Markdown, Panel } from './markdown-ink.js';
 import { fetchUpdateStatus, updateCommand } from './update-check.js';
-import { readFileSync } from 'fs';
+import { readFileSync, statSync } from 'fs';
 import { fileURLToPath } from 'url';
 import path from 'path';
 /** Read once at load so the running version can always be shown without a lookup per render. */
@@ -33,6 +34,13 @@ const AMBER = '#F6C453';
 const MUTED = '#9AAAB2';
 const INK = '#F4F1EA';
 const DIM = '#5C717A';
+// Diff colours. Deliberately not terminal green/red: those clash with the warm palette and read
+// as errors. These are the existing accents lifted a little, over bands dark enough to sit on a
+// black terminal without glowing.
+const DIFF_ADD = '#7FE3B0';
+const DIFF_ADD_BG = '#10291F';
+const DIFF_DEL = '#F2909B';
+const DIFF_DEL_BG = '#2B1419';
 // The user's message bar: light-on-dark, high contrast against the terminal ground so an
 // input is easy to find when scrolling back. Deliberately not the cyan used for KONECK.
 const USER_BG = '#3A434A';
@@ -257,6 +265,10 @@ const EFFORT_BLURB = {
     high: 'Thorough — covers edge cases, costs more tokens',
     max: 'Most rigorous analysis available; slowest and priciest',
 };
+/** Past this, a file is not read for diffing — the render would be useless anyway. */
+const MAX_DIFF_BYTES = 512 * 1024;
+/** One tool rarely touches more; the cap stops a bulk move from flooding scrollback. */
+const MAX_DIFF_FILES = 4;
 /** The tabs of the usage pane, in the order they are shown. */
 const USAGE_TABS = ['session', 'context', 'models', 'limits'];
 const MIN_REPLY_WIDTH = 24; // below this a table cannot render legibly anyway
@@ -331,6 +343,8 @@ function App({ config: initialConfig }) {
     // instead of calling setState per token keeps a Raspberry Pi from re-rendering on every chunk.
     const sayRef = useRef(''); // narration not yet committed
     const liveToolRef = useRef(null); // the one tool still running
+    /** Pre-edit contents of the files the running tool said it would touch. */
+    const pendingDiffRef = useRef([]);
     const charsRef = useRef(0); // streamed chars, for the live token estimate
     const realTokRef = useRef(0); // real output tokens this turn, once the provider reports usage
     const tokBaseRef = useRef(0); // session output-token count at the start of this turn
@@ -349,25 +363,73 @@ function App({ config: initialConfig }) {
         if (text !== '')
             setRows(prev => [...prev, { role: 'steps', steps: [{ kind: 'say', text }] }]);
     }
+    /**
+     * Reads a file for diffing, or null if it is absent or too big to be worth showing. Reading is
+     * synchronous on purpose: the tool runs the instant this callback returns, so an await here
+     * would race the very write it is trying to photograph.
+     */
+    function readForDiff(rel) {
+        try {
+            const abs = path.resolve(cfg.cwd, rel);
+            if (statSync(abs).size > MAX_DIFF_BYTES)
+                return null;
+            return readFileSync(abs, 'utf-8');
+        }
+        catch {
+            return null; // absent: a creation, which fileDiff renders as such
+        }
+    }
     function pushTool(name, args) {
         commitSay();
+        // Photograph every file this tool has announced it will touch, before it touches it.
+        pendingDiffRef.current = filesTouchedBy(name, args).slice(0, MAX_DIFF_FILES)
+            .map(rel => ({ rel, before: readForDiff(rel) }));
         liveToolRef.current = { kind: 'tool', name, detail: toolDetail(name, args), startedAt: Date.now() };
     }
     function finishTool(name, ok, ms) {
         if (!ok)
             turnRecoveredRef.current = true;
         const live = liveToolRef.current;
+        const pending = pendingDiffRef.current;
         liveToolRef.current = null;
+        pendingDiffRef.current = [];
         if (!live)
             return;
-        const done = { ...live, endedAt: live.startedAt + ms, ok };
+        // A failed tool leaves the file as it was, so there is nothing to show.
+        const diffs = ok
+            ? pending
+                .map(({ rel, before }) => fileDiff(rel, before, readForDiff(rel)))
+                .filter(d => !d.unchanged)
+            : [];
+        const done = { ...live, endedAt: live.startedAt + ms, ok, ...(diffs.length ? { diffs } : {}) };
         setRows(prev => [...prev, { role: 'steps', steps: [done] }]);
     }
+    /**
+     * Moves the agent panel into scrollback once the turn is over. The live panel is transient by
+     * design — it repaints — so without this the record of what the agents did would scroll away
+     * with the last repaint and leave nothing behind.
+     */
+    function flushAgents() {
+        const list = agentsRef.current;
+        if (list.length === 0)
+            return;
+        agentsRef.current = [];
+        setAgents([]);
+        const done = list.filter(a => a.status === 'done').length;
+        const failed = list.filter(a => a.status === 'failed').length;
+        const tokens = list.reduce((n, a) => n + a.tokens, 0);
+        // The elapsed span is the longest agent, not the sum: they ran at the same time.
+        const span = Math.max(...list.map(a => (a.endedAt ?? Date.now()) - a.startedAt));
+        addRow({ role: 'steps', steps: [{ kind: 'say', text: `${list.length} parallel agents finished — ${done} succeeded` +
+                        (failed ? `, ${failed} failed` : '') +
+                        ` · ${humanTokens(tokens)} tokens · ${fmtElapsed(span)}` }] });
+    }
     // Session Promise is created eagerly at mount so it resolves before the user's first message.
     const sessionOpts = {
         onChunk: (text) => pushSay(text),
         onToolCall: (name, args) => pushTool(name, args),
         onToolResult: (name, ok, ms) => finishTool(name, ok, ms),
+        onAgentProgress: (list) => { agentsRef.current = list; setAgents(list); },
         onTokens: (s) => {
             realTokRef.current = Math.max(0, s.completionTokens - tokBaseRef.current);
         },
@@ -404,6 +466,29 @@ function App({ config: initialConfig }) {
     // compare against. Collapsing the two would flash "not a git repo" at every open.
     const [usageDiff, setUsageDiff] = useState(undefined);
     const [modelCatalog, setModelCatalog] = useState([]);
+    // Terminal width, tracked as state rather than read at render. Ink re-renders its own layout on
+    // a resize but has no idea a component consulted process.stdout.columns, so without this the UI
+    // kept the width it booted with until restarted.
+    // `|| 80` not `?? 80`: a pty with no negotiated size reports 0 columns, and 0 would collapse
+    // the layout to a single character.
+    const [termCols, setTermCols] = useState(() => process.stdout.columns || 80);
+    /** Optional user cap on the UI width. Undefined means fill the terminal. */
+    const [configMaxWidth, setConfigMaxWidth] = useState(undefined);
+    useEffect(() => {
+        void loadKoneckConfig().then(c => {
+            setConfigMaxWidth(typeof c.maxWidth === 'number' && c.maxWidth >= 40 ? c.maxWidth : undefined);
+        });
+    }, []);
+    useEffect(() => {
+        const onResize = () => setTermCols(process.stdout.columns || 80);
+        process.stdout.on('resize', onResize);
+        return () => { process.stdout.off('resize', onResize); };
+    }, []);
+    /** Live state of parallel sub-agents. Empty except while spawn_agents is running. */
+    const [agents, setAgents] = useState([]);
+    // Mirrored in a ref because the turn's exit paths run inside a closure that would otherwise
+    // see the state as it was when the turn began.
+    const agentsRef = useRef([]);
     // Masked credential entry. The value is held in component state for the session and passed
     // to the client as a runtime override — KONECK never writes it to disk, and it is never put
     // into a transcript row, so it cannot end up in a saved session file.
@@ -1015,6 +1100,7 @@ function App({ config: initialConfig }) {
                 const val = parts.slice(1).join(' ');
                 if (key === 'reset') {
                     await saveKoneckConfig({});
+                    setConfigMaxWidth(undefined);
                     addSystem('Config reset to defaults.');
                     return;
                 }
@@ -1031,6 +1117,10 @@ function App({ config: initialConfig }) {
                     }
                     if (key === 'effort' && ['low', 'medium', 'high', 'max'].includes(val))
                         setEffort(val);
+                    if (key === 'maxWidth') {
+                        const n = Number(val);
+                        setConfigMaxWidth(Number.isFinite(n) && n >= 40 ? n : undefined);
+                    }
                     return;
                 }
                 if (key) {
@@ -1044,6 +1134,7 @@ function App({ config: initialConfig }) {
                 const live = {
                     provider: cfg.provider, model: cfg.model, effort, requireApproval: cfg.requireApproval,
                     maxTurns: cfg.maxTurns, budget: cfg.budget, baseURL: cfg.baseURL,
+                    maxWidth: configMaxWidth ?? `(not set - filling ${termCols} columns)`,
                 };
                 const lines2 = Object.entries(descs).map(([k, desc]) => {
                     const v = live[k] ?? stored[k];
@@ -1576,6 +1667,7 @@ function App({ config: initialConfig }) {
                     if (controller.signal.aborted) {
                         sayRef.current = '';
                         liveToolRef.current = null;
+                        flushAgents();
                         addRow({ role: 'system', text: `Cancelled after ${fmtElapsed(Date.now() - started)}. Anything already done is above; ` +
                                 'your composer is untouched.' });
                         setAgentState('ready');
@@ -1588,6 +1680,7 @@ function App({ config: initialConfig }) {
                     const content = last && typeof last.content === 'string'
                         ? last.content : 'Task finished with no written response.';
                     setLastAgentText(content);
+                    flushAgents();
                     const elapsed = Date.now() - started;
                     apiMsRef.current += elapsed;
                     // A turn that completed is the only proof a model actually works that costs nothing
@@ -1627,6 +1720,7 @@ function App({ config: initialConfig }) {
                     const trailing = sayRef.current.trim();
                     sayRef.current = '';
                     liveToolRef.current = null;
+                    flushAgents();
                     setRows(prev => [
                         ...prev,
                         ...(trailing ? [{ role: 'steps', steps: [{ kind: 'say', text: trailing }] }] : []),
@@ -1654,11 +1748,10 @@ function App({ config: initialConfig }) {
         return parts.length > 2 ? '.../' + parts.slice(-2).join('/') : full;
     })();
     const modelShort = cfg.model.split('/').at(-1) ?? cfg.model;
-    // `|| 80` not `?? 80`: a pty with no negotiated size reports columns as 0, and 0 would
-    // collapse the whole layout to a one-character column. The floor of 40 keeps a very
-    // narrow split pane readable instead of wrapping every word.
-    const termCols = process.stdout.columns || 80;
-    const uiWidth = Math.max(40, Math.min(termCols, 120));
+    // The UI fills the terminal. It used to stop at 120 columns, which left most of a wide
+    // window empty. A cap is still available through `maxWidth` in config for anyone who
+    // prefers a narrow measure on a very wide screen, but nothing is capped by default.
+    const uiWidth = computeUiWidth(termCols, configMaxWidth);
     const barWidth = uiWidth - 4; // uiWidth minus the container's paddingX={2} on both sides
     // Space a rendered reply actually has: the bar, minus the response box border (2), its
     // paddingX={1} (2), and the "ꓘK " prefix plus its gap (3). Getting this even one column
@@ -1678,6 +1771,29 @@ function App({ config: initialConfig }) {
     // Live output token count: real usage when the provider reports it, else a char estimate
     const liveTokens = Math.max(realTokRef.current, Math.round(charsRef.current / 4));
     /** Renders one activity step. Shared by the live view and committed scrollback so they match. */
+    /**
+     * A file change, drawn the way a diff is read: a gutter of line numbers, a sign, and the line
+     * itself on a tinted band. Every rendered line is padded to the same width so the tint forms a
+     * solid block rather than a ragged edge, which is what makes an added run legible at a glance.
+     */
+    const renderDiff = (d, key) => {
+        const numbers = d.hunks.flatMap(h => h.lines.map(l => l.after ?? l.before ?? 0));
+        const gutter = Math.max(2, String(Math.max(0, ...numbers)).length);
+        const width = Math.max(24, barWidth - gutter - 8);
+        const header = d.created ? 'new file' : d.deleted ? 'deleted' : diffSummary(d);
+        return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: CYAN, children: d.path }), _jsx(Text, { color: d.created ? DIFF_ADD : d.deleted ? DIFF_DEL : MUTED, children: header })] }), d.binary
+                    ? _jsx(Text, { color: DIM, children: '  binary file - not shown' })
+                    : d.hunks.map((hunk, hi) => (_jsxs(Box, { flexDirection: "column", children: [hi > 0 && _jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ..."] }), hunk.lines.map((l, li) => {
+                                const shown = l.kind === 'del' ? l.before : l.after;
+                                const sign = l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ';
+                                const fg = l.kind === 'add' ? DIFF_ADD : l.kind === 'del' ? DIFF_DEL : MUTED;
+                                const bg = l.kind === 'add' ? DIFF_ADD_BG : l.kind === 'del' ? DIFF_DEL_BG : undefined;
+                                // Tabs would make the tinted block a ragged width, so they are expanded.
+                                const body = `${sign} ${l.text}`.replace(/\t/g, '  ');
+                                const cell = body.length > width ? body.slice(0, width - 3) + '...' : body.padEnd(width);
+                                return (_jsxs(Box, { children: [_jsxs(Text, { color: DIM, children: [String(shown ?? '').padStart(gutter), " "] }), _jsx(Text, { color: fg, ...(bg ? { backgroundColor: bg } : {}), children: cell })] }, li));
+                            })] }, hi))), d.hiddenLines > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ... ", d.hiddenLines, " more changed lines"] }))] }, key));
+    };
     const renderStep = (step, key) => {
         if (step.kind === 'say') {
             return (_jsxs(Box, { marginTop: 1, gap: 1, children: [_jsx(Text, { color: CYAN, children: "\u25CF" }), _jsx(Text, { color: INK, children: step.text.trim() })] }, key));
@@ -1686,7 +1802,7 @@ function App({ config: initialConfig }) {
         const ms = (step.endedAt ?? Date.now()) - step.startedAt;
         const glyph = running ? SPINNER[spinFrame] : step.ok === false ? '✖' : '✓';
         const color = running ? AMBER : step.ok === false ? CRIMSON : GREEN;
-        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] }))] }, key));
+        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (step.diffs ?? []).length === 0 && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] })), (step.diffs ?? []).map((d, i) => renderDiff(d, i))] }, key));
     };
     return (_jsxs(Box, { flexDirection: "column", width: uiWidth, paddingX: 2, children: [showAnalytics && (_jsxs(Box, { borderStyle: "round", borderColor: AMBER, paddingX: 1, marginBottom: 1, flexDirection: "column", width: barWidth, children: [_jsx(Text, { color: AMBER, bold: true, children: "\u25C6 Session Analytics" }), _jsxs(Text, { color: MUTED, children: ["Turns      : ", _jsx(Text, { color: INK, children: stats.turns })] }), _jsxs(Text, { color: MUTED, children: ["Prompt tok : ", _jsx(Text, { color: INK, children: stats.promptTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Output tok : ", _jsx(Text, { color: INK, children: stats.completionTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Total tok  : ", _jsx(Text, { color: INK, children: stats.totalTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Model      : ", _jsx(Text, { color: INK, children: modelShort }), "  Provider: ", _jsx(Text, { color: INK, children: cfg.provider })] }), _jsx(Text, { color: DIM, children: "Tab to close" })] })), _jsx(Static, { items: rows, children: (row, index) => row.role === 'header' ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "KONECK  /  SOFTWARE DELIVERY SYSTEM" }), _jsx(Text, { color: MUTED, children: "Deliberate engineering, with control at every change." })] }), _jsx(Panel, { width: barWidth, color: CYAN, title: "KONECK", children: [`MODEL: \`${modelShort}\`   PROVIDER: \`${cfg.provider}\`   WORKSPACE: \`${workspace}\``] })] }, index)) : row.role === 'user' ? (
                 // Painted as a filled bar so the user's own words are the most findable thing
@@ -1696,7 +1812,24 @@ function App({ config: initialConfig }) {
                 // content, so the right edge stepped in and out; and a box inside a box left
                 // markdown tables needlessly narrow. A marker plus the content reads better and
                 // cannot misalign, which is how Claude Code presents its own answers.
-                _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "\uA7B0K" }), _jsx(Box, { flexDirection: "column", children: _jsx(Markdown, { text: row.text ?? '', width: barWidth - 3 }) })] }), row.tokens != null && (_jsxs(Text, { color: MUTED, children: [_jsx(Text, { color: GREEN, children: "* " }), row.done ?? 'Done', " in ", fmtElapsed(row.elapsed ?? 0), '  |  ', row.tokens, " tokens", '  |  ', cfg.provider, " ", modelShort] }))] }, index)) }), _jsx(Box, { flexDirection: "column", children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && renderStep({ kind: 'say', text: tailLines(sayRef.current, 2, replyWidth) }, 0), liveToolRef.current && renderStep(liveToolRef.current, 1), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [SPINNER[spinFrame], " "] }), _jsx(Shimmer, { text: workWord(elapsedMs, spinWord, turnRecoveredRef.current)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", liveTokens > 0
+                _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "\uA7B0K" }), _jsx(Box, { flexDirection: "column", children: _jsx(Markdown, { text: row.text ?? '', width: barWidth - 3 }) })] }), row.tokens != null && (_jsxs(Text, { color: MUTED, children: [_jsx(Text, { color: GREEN, children: "* " }), row.done ?? 'Done', " in ", fmtElapsed(row.elapsed ?? 0), '  |  ', row.tokens, " tokens", '  |  ', cfg.provider, " ", modelShort] }))] }, index)) }), _jsx(Box, { flexDirection: "column", children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && renderStep({ kind: 'say', text: tailLines(sayRef.current, 2, replyWidth) }, 0), liveToolRef.current && renderStep(liveToolRef.current, 1), agents.length > 0 && (() => {
+                            const done = agents.filter(a => a.status !== 'running').length;
+                            const failed = agents.filter(a => a.status === 'failed').length;
+                            const tokens = agents.reduce((n, a) => n + a.tokens, 0);
+                            const started = Math.min(...agents.map(a => a.startedAt));
+                            // The task text is clipped to whatever is left after the fixed columns, so a long
+                            // task never wraps and breaks the alignment of the rows under it.
+                            const taskWidth = Math.max(16, barWidth - 34);
+                            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, children: "\u25C6" }), _jsxs(Text, { color: INK, bold: true, children: [agents.length, " agents"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsxs(Text, { color: done === agents.length ? GREEN : AMBER, children: [done, "/", agents.length, " complete"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsxs(Text, { color: MUTED, children: [humanTokens(tokens), " tok"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(Date.now() - started) }), failed > 0 && _jsxs(Text, { color: CRIMSON, children: ["\u00B7 ", failed, " failed"] })] }), agents.map(a => {
+                                        const glyph = a.status === 'running' ? SPINNER[spinFrame]
+                                            : a.status === 'failed' ? '✖' : '✓';
+                                        const color = a.status === 'running' ? AMBER
+                                            : a.status === 'failed' ? CRIMSON : GREEN;
+                                        const took = (a.endedAt ?? Date.now()) - a.startedAt;
+                                        const task = a.task.length > taskWidth ? a.task.slice(0, taskWidth - 3) + '...' : a.task;
+                                        return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: DIM, children: String(a.index + 1).padStart(2) }), _jsx(Text, { color: a.status === 'running' ? INK : MUTED, children: task.padEnd(taskWidth) }), _jsx(Text, { color: DIM, children: humanTokens(a.tokens).padStart(6) }), _jsx(Text, { color: DIM, children: fmtElapsed(took).padStart(6) })] }, a.index));
+                                    })] }));
+                        })(), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [SPINNER[spinFrame], " "] }), _jsx(Shimmer, { text: workWord(elapsedMs, spinWord, turnRecoveredRef.current)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", liveTokens > 0
                                                 ? `${fmtTokens(liveTokens)} tokens`
                                                 : elapsedMs > 20_000 ? 'waiting for the first token' : 'starting', ")"] })] }) }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), usagePane && (() => {
                 const width = Math.min(barWidth, 66);