koneck 2.128.55 → 2.128.57

package/dist/ink-chat.js

@@ -46,6 +46,7 @@ import { SessionChanges, readForDiff as readForDiffAt, totalsOf } from './sessio
 import os from 'node:os';
 import { modeLine, nextMode, statusFacts, barCells, PLACEHOLDER, contextSplit, contextSplitLines } from './status-line.js';
 import { KONECK_VERSION } from './version.js';
+import { fileListView, listLength, diffRows, PANEL_CONTEXT, PANEL_DIFF_LINES } from './diff-layout.js';
 import { savePlan, plansDir, PLAN_CHOICES, PROCEED_PROMPT } from './plan-file.js';
 import { logoFor } from './logo.js';
 import { describeActivity } from './activity.js';
@@ -793,7 +794,7 @@ export function expandPastes(draft, pastes) {
  * capped: a 4,000-line rewrite scrolled past is no more readable in a panel than in a transcript,
  * and the count of what was left out is shown instead.
  */
-const PANEL_DIFF_LINES = 400;
+// PANEL_DIFF_LINES lives in diff-layout.ts, so the browser's Changes view caps at the same point.
 /** The tabs of the usage pane, in the order they are shown. */
 const USAGE_TABS = ['settings', 'session', 'context', 'models', 'limits'];
 const MIN_REPLY_WIDTH = 24; // below this a table cannot render legibly anyway
@@ -1263,6 +1264,34 @@ export function inkApprovalDecision(requireApproval, mode, tool, argsJson, rules
     return rules.some(rule => ruleMatches(rule, tool, argsJson)) ? 'allow' : 'ask';
 }
 /** A context report names the evidence for its denominator instead of pretending every model fits. */
+/**
+ * What the turn is waiting on, for the bracket after the elapsed time.
+ *
+ * Reasoning comes first once any has arrived. A reasoning chunk carries no reply text, so it
+ * counted as a frame "before content" and the line said "ollama is holding the line, no output
+ * yet" — with the thinking count tacked on after it — for the whole time the model was visibly
+ * thinking. Reported as: "koneck write 'ollama is holding the line, no output' yet the model is
+ * already thinking". Holding the line is for frames that carry nothing at all: a gateway's
+ * keep-alives. The browser already said "thinking" here.
+ */
+export function waitDetail(w) {
+    const thinking = `thinking, ${fmtTokens(Math.round(w.thinkingChars / 4))} reasoning tokens`;
+    if (w.liveTokens > 0) {
+        // Reply text has come and the model has gone back to reasoning: both are true, both are said.
+        return `${fmtTokens(w.liveTokens)} tokens` + (w.thinkingChars > 0 && w.thinkingRecent ? ` | ${thinking}` : '');
+    }
+    if (w.tool)
+        return 'running ' + w.tool;
+    if (w.thinkingChars > 0)
+        return thinking;
+    // A gateway routing to several backends sends content-free frames while it finds one. Saying
+    // "waiting for the first token" through that reads as a hang, when the request was accepted.
+    if (w.frames > 0)
+        return `${w.provider} is holding the line, no output yet`;
+    if (w.elapsedMs > 8_000)
+        return `no response from ${w.provider} yet`;
+    return 'starting';
+}
 export function contextStatusText(model, sessionPromptTokens, configuredLimit, detected) {
     const known = detected?.limit ?? configuredLimit ?? contextWindowFor(model);
     const source = detected?.source === 'provider' ? 'reported by the connected provider'
@@ -1534,96 +1563,71 @@ function renderCodeLine(text, kind, width, lang) {
 /**
  * The live diff panel — the work as it happens, beside the conversation.
  *
- * Asked for: the same running view the web has, in the terminal. It shows every file the session
- * has changed, newest first, with the counts in the header, so a person watching can see the edit
- * land rather than reading a description of it afterwards. Bounded on both axes: the newest files
- * fill the height available and the rest are counted, since a panel that scrolls past what you
- * wanted is no better than no panel.
+ * Laid out the way Claude Code's is, which was the picture it was asked for with: the changed files
+ * listed at the top with their own counts, tests and generated files folded into one line, and
+ * below a rule the one file being read. Its changed lines sit on a band the whole width of the
+ * panel, and a line too long for it wraps, carrying its + or - onto each piece.
+ *
+ * It used to stack every file's diff in one column, so the fifteenth file was a scroll through
+ * fourteen others, and a long line was cut at the panel's edge. What is listed, in what order,
+ * what is folded and how a line wraps are decided in diff-layout.ts, which the browser's Changes
+ * view uses too.
+ *
+ * Alt+↑/↓ (or Alt+P/N, for Windows Terminal, which keeps Alt+arrows for its own panes) moves
+ * through the list, Alt+PgUp/PgDn and the wheel scroll the file, Alt+T opens the fold.
  */
-export function DiffPanel({ files, width, height, activity, activityRows = 0, scroll = 0 }) {
-    const added = files.reduce((n, d) => n + d.added, 0);
-    const removed = files.reduce((n, d) => n + d.removed, 0);
-    // The persistent panel needs a visible boundary even before an edit arrives. Without one, its
-    // empty state was a single easy-to-miss line and looked as if `/diff` had done nothing.
-    const inner = Math.max(20, width - 4);
-    const bodyHeight = Math.max(1, height - 4 - activityRows);
-    const rows = [];
-    let shownFiles = 0;
-    for (const d of [...files].reverse()) {
-        /*
-         * A rule between files, so the panel reads as sections rather than one column of lines.
-         *
-         * Asked for, against Claude Code's panel as the reference: "it is clean and well structured".
-         * The difference was structural, not chromatic — the colours were already right, but with a
-         * blank line as the only separation two files' diffs ran together and the filename headers had
-         * nothing to sit under. Drawn only between files, never above the first.
-         */
-        if (shownFiles > 0)
-            rows.push({ t: 'rule', key: `r-${d.path}` });
-        const numbers = d.hunks.flatMap(h => h.lines.map(l => l.after ?? l.before ?? 0));
-        const gutter = Math.max(3, String(Math.max(0, ...numbers)).length);
-        const codeWidth = Math.max(12, inner - gutter - 2);
-        const lang = spanLangFor(d.path);
-        const tag = d.created ? 'new' : d.deleted ? 'deleted' : `+${d.added}${d.removed ? ` -${d.removed}` : ''}`;
-        rows.push({ t: 'head', key: `h-${d.path}`, path: d.path, tag, deleted: d.deleted });
-        if (d.binary) {
-            rows.push({ t: 'binary', key: `b-${d.path}` });
-            shownFiles++;
-            continue;
-        }
-        for (const [hi, hunk] of d.hunks.entries()) {
-            if (hi > 0)
-                rows.push({ t: 'gap', key: `g-${d.path}-${hi}`, gutter });
-            for (const [li, l] of hunk.lines.entries()) {
-                rows.push({
-                    t: 'line', key: `l-${d.path}-${hi}-${li}`, gutter, codeWidth, lang,
-                    shown: (l.kind === 'del' ? l.before : l.after) ?? undefined,
-                    sign: l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ',
-                    kind: l.kind, text: l.text,
-                });
-            }
-        }
-        if (d.hiddenLines > 0) {
-            rows.push({ t: 'more', key: `m-${d.path}`, gutter, count: d.hiddenLines });
-        }
-        shownFiles++;
-        rows.push({ t: 'spacer', key: `s-${d.path}` });
+export function DiffPanel({ files, width, height, activity, activityRows = 0, scroll = 0, selected = 0, showGenerated = false }) {
+    // A rule down the left instead of a box round it: two rows more for the diff, and the panel
+    // reads as a pane beside the conversation, as in the panel it was modelled on.
+    const inner = Math.max(20, width - 3);
+    const room = Math.max(4, height - activityRows);
+    const listLen = listLength(files, showGenerated);
+    const listRows = Math.max(1, Math.min(listLen, 8, Math.max(2, Math.floor(room * 0.3))));
+    const view = fileListView(files, { selected, rows: listRows, showGenerated });
+    const d = view.selected >= 0 ? files[view.selected] : undefined;
+    const counts = (added, removed, tag) => (_jsxs(_Fragment, { children: [tag !== '' && added === 0 && removed === 0 && _jsx(Text, { color: DIM, children: tag }), added > 0 && _jsxs(Text, { color: DIFF_ADD, children: ["+", added] }), removed > 0 && _jsxs(Text, { color: DIFF_DEL, children: [added > 0 ? ' ' : '', "-", removed] })] }));
+    const list = view.rows.map(f => (_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsxs(Text, { color: f.selected ? INK : MUTED, bold: f.selected, wrap: "truncate-start", children: [f.selected ? '› ' : '  ', f.path] }), _jsxs(Text, { children: [" ", counts(f.added, f.removed, f.tag)] })] }, `f-${f.path}`)));
+    const hints = [];
+    if (view.above > 0 || view.below > 0) {
+        hints.push(_jsxs(Text, { color: DIM, wrap: "truncate", children: [view.above > 0 ? `  ↑ ${view.above} more above` : '', view.above > 0 && view.below > 0 ? ' ·' : '', view.below > 0 ? `  ↓ ${view.below} more below` : '', " (alt+\u2193 to move)"] }, "more"));
+    }
+    if (view.folded.count > 0) {
+        hints.push(_jsx(Text, { color: DIM, wrap: "truncate", children: `  ${view.folded.count} tests/generated (alt+t to ${view.folded.open ? 'hide' : 'show'})` }, "fold"));
     }
+    /*
+     * Only the rows on screen are built into elements.
+     *
+     * Measured on a Raspberry Pi 5 with two 200-line diffs: building every row's elements on every
+     * frame cost 281ms a repaint, against 1.09ms with the panel shut. A row object is cheap; a React
+     * element per row is not. So the rows are described in full — the scroll needs the count — and
+     * drawn only for the window.
+     */
+    const fixedRows = 2 + list.length + hints.length + (d ? 4 : 0) + (activity ? activityRows : 0);
+    const bodyHeight = Math.max(1, height - fixedRows);
+    const numbers = d ? d.hunks.flatMap(h => h.lines.map(l => l.after ?? l.before ?? 0)) : [];
+    const gutter = Math.max(3, String(Math.max(0, ...numbers)).length);
+    const codeWidth = Math.max(8, inner - gutter - 3);
+    const rows = d ? diffRows(d, codeWidth) : [];
     const maxScroll = Math.max(0, rows.length - bodyHeight);
     const from = Math.max(0, Math.min(scroll, maxScroll));
-    const body = rows.slice(from, from + bodyHeight).map(r => {
-        switch (r.t) {
-            case 'rule':
-                return _jsx(Text, { color: DIM, children: '─'.repeat(inner) }, r.key);
-            case 'head':
-                return (_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: CYAN, wrap: "truncate-start", children: r.path }), _jsxs(Text, { color: r.deleted ? DIFF_DEL : DIFF_ADD, children: [" ", r.tag] })] }, r.key));
-            case 'binary':
-                return _jsx(Text, { color: DIM, children: "  binary \u2014 not shown" }, r.key);
-            case 'gap':
-                return _jsx(Text, { color: DIM, children: `${' '.repeat(r.gutter)} ⋯` }, r.key);
-            case 'more':
-                return _jsx(Text, { color: DIM, children: `${' '.repeat(r.gutter)} ⋯ ${r.count} more` }, r.key);
-            case 'spacer':
-                return _jsx(Text, { children: " " }, r.key);
-            default:
-                /*
-                 * One Text per line, with the pieces nested inside it, rather than a Box of siblings.
-                 *
-                 * A Box is a layout node: the engine measures and places it and every child. A Text with
-                 * Texts inside it is one node holding spans. With forty lines on screen and half a dozen
-                 * pieces each that is the difference between laying out two hundred and fifty nodes a
-                 * frame and laying out forty — and it is the same mistake that stranded the composer's
-                 * cursor on the first row, in a place where it costs time rather than correctness.
-                 */
-                return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: DIM, children: String(r.shown ?? '').padStart(r.gutter) }), _jsx(Text, { color: r.kind === 'add' ? DIFF_ADD : r.kind === 'del' ? DIFF_DEL : DIM, ...(r.kind !== 'ctx'
-                                ? { backgroundColor: r.kind === 'add' ? DIFF_ADD_BG : DIFF_DEL_BG } : {}), children: r.sign }), renderCodeLine(r.text, r.kind, r.codeWidth, r.lang)] }, r.key));
-        }
+    const lang = d ? spanLangFor(d.path) : undefined;
+    const body = rows.slice(from, from + bodyHeight).map((r, i) => {
+        const key = `d-${from + i}`;
+        if (r.t === 'binary')
+            return _jsx(Text, { color: DIM, children: "  binary \u2014 not shown" }, key);
+        if (r.t === 'more')
+            return _jsx(Text, { color: DIM, children: `${' '.repeat(gutter)}   ⋯ ${r.count} more lines not shown` }, key);
+        const bg = r.kind === 'add' ? DIFF_ADD_BG : r.kind === 'del' ? DIFF_DEL_BG : undefined;
+        const fg = r.kind === 'add' ? DIFF_ADD : r.kind === 'del' ? DIFF_DEL : DIM;
+        const tint = bg ? { backgroundColor: bg } : {};
+        // One Text with the pieces nested: a Box of siblings is a layout node per piece, forty lines
+        // times half a dozen pieces a frame.
+        return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: r.kind === 'ctx' ? DIM : fg, ...tint, children: [(r.first && r.number !== null ? String(r.number) : '').padStart(gutter), ' ', r.sign, ' '] }), renderCodeLine(r.text, r.kind, codeWidth, lang)] }, key));
     });
-    const summary = files.length === 0
-        ? 'no changes yet'
-        : `${files.length} file${files.length === 1 ? '' : 's'} changed`
-            + (maxScroll > 0 ? `  ${from > 0 ? `↑${from}` : ''}${from < maxScroll ? ` ↓${maxScroll - from}` : ''}`.trimEnd() : '');
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "round", borderColor: CYAN, paddingX: 1, flexShrink: 0, overflowY: "hidden", children: [_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsxs(Box, { children: [_jsx(Text, { color: INK, bold: true, children: summary }), added > 0 && _jsxs(Text, { color: DIFF_ADD, children: [" +", added] }), removed > 0 && _jsxs(Text, { color: DIFF_DEL, children: [" -", removed] })] }), _jsx(Text, { color: DIM, children: "/diff" })] }), activity && _jsxs(_Fragment, { children: [_jsx(Text, { color: DIM, children: '─'.repeat(inner) }), _jsx(Box, { flexDirection: "column", height: Math.max(1, activityRows - 1), overflowY: "hidden", children: activity })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflowY: "hidden", children: body }), shownFiles < files.length && (_jsx(Text, { color: DIM, children: `… ${files.length - shownFiles} more file(s) changed` }))] }));
+    const scrolled = maxScroll > 0
+        ? `${from > 0 ? `↑${from}` : ''}${from < maxScroll ? ` ↓${maxScroll - from}` : ''}`.trim()
+        : '';
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "single", borderColor: DIM, borderTop: false, borderRight: false, borderBottom: false, paddingLeft: 1, flexShrink: 0, overflowY: "hidden", children: [_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsxs(Box, { children: [_jsx(Text, { color: INK, bold: true, children: files.length === 0 ? 'no changes yet' : `${files.length} file${files.length === 1 ? '' : 's'} changed` }), view.added > 0 && _jsxs(Text, { color: DIFF_ADD, children: [" +", view.added] }), view.removed > 0 && _jsxs(Text, { color: DIFF_DEL, children: [" -", view.removed] })] }), _jsx(Text, { color: DIM, children: "/diff off" })] }), activity && _jsxs(_Fragment, { children: [_jsx(Text, { color: DIM, children: '─'.repeat(inner) }), _jsx(Box, { flexDirection: "column", height: Math.max(1, activityRows - 1), overflowY: "hidden", children: activity })] }), _jsx(Text, { children: " " }), list, hints, d && _jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: DIM, children: '─'.repeat(inner) }), _jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: INK, bold: true, wrap: "truncate-start", children: d.path }), _jsxs(Text, { color: DIM, children: [d.created && d.removed === 0 ? ' new' : d.deleted ? ' deleted' : '', scrolled ? ` ${scrolled}` : ''] })] }), _jsx(Text, { color: DIM, children: '─'.repeat(inner) })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflowY: "hidden", children: body })] }));
 }
 /**
  * Exported for one reason: so a test can mount it.
@@ -1950,7 +1954,7 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
          * the truth about what the change currently is.
          */
         if (changesRef.current.size) {
-            const all = changesRef.current.diffs(PANEL_DIFF_LINES);
+            const all = changesRef.current.diffs(PANEL_DIFF_LINES, PANEL_CONTEXT);
             setLiveDiffs(all);
             /*
              * Open itself on the session's first change, once, unless the person has already decided.
@@ -2372,6 +2376,9 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
      * studying a diff should not cost your place in the conversation.
      */
     const [panelScroll, setPanelScroll] = useState(0);
+    /** Which file of the panel's list is being read, and whether tests and generated files are listed. */
+    const [panelFile, setPanelFile] = useState(0);
+    const [panelGenerated, setPanelGenerated] = useState(false);
     /**
      * The layout the wheel listener needs, in refs.
      *
@@ -5859,6 +5866,24 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
              * needs `/mouse on`. This is the keyboard equivalent, and it is deliberately a modifier
              * nothing else in the composer uses, so it cannot be reached by accident mid-sentence.
              */
+            /*
+             * Alt+↑/↓ moves through the panel's list of files, as in the panel it was modelled on; the
+             * file itself scrolls with Alt+PgUp/PgDn and the wheel. Alt+P/N do the same for Windows
+             * Terminal, which keeps Alt+arrows for moving between its own panes. Alt+T opens the fold
+             * of tests and generated files.
+             */
+            const prevFile = key.meta && (key.upArrow || input === 'p');
+            const nextFile = key.meta && (key.downArrow || input === 'n');
+            if (diffPanelOpenRef.current && (prevFile || nextFile)) {
+                const last = Math.max(0, listLength(liveDiffs, panelGenerated) - 1);
+                setPanelFile(v => Math.max(0, Math.min(last, v + (prevFile ? -1 : 1))));
+                setPanelScroll(0);
+                return;
+            }
+            if (diffPanelOpenRef.current && key.meta && input === 't') {
+                setPanelGenerated(v => !v);
+                return;
+            }
             if (key.meta && (key.upArrow || key.downArrow)) {
                 setPanelScroll(v => Math.max(0, Math.min(2_000, v + (key.upArrow ? -3 : 3))));
                 return;
@@ -6856,34 +6881,25 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
         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);
-        const all = [];
-        for (const [hi, hunk] of d.hunks.entries()) {
-            if (hi > 0)
-                all.push({ key: `g${hi}`, gap: true });
-            for (const [li, l] of hunk.lines.entries()) {
-                all.push({ key: `${hi}-${li}`, gap: false, kind: l.kind,
-                    shown: (l.kind === 'del' ? l.before : l.after) ?? undefined,
-                    sign: l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ',
-                    text: l.text });
-            }
-        }
+        const lang = spanLangFor(d.path);
+        /*
+         * Rows from diff-layout.ts, the same the panel draws: a long line wraps with its sign on each
+         * piece rather than being cut at the edge, and the band behind a changed line covers its
+         * number too. The ceiling counts rows as drawn, so a wrapped line costs what it takes.
+         */
+        const all = diffRows({ ...d, hiddenLines: 0 }, width);
         // A budget of zero is meaningful: show the file and what happened to it, and none of the
         // body. On a short terminal those lines are the difference between a calm screen and one
         // that wipes itself on every keystroke.
         const shownLines = all.slice(0, Math.max(0, maxLines));
         const clipped = all.length - shownLines.length;
-        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' })
-                    : shownLines.map(l => l.gap
-                        // A gap between hunks stands for the untouched lines that were skipped.
-                        ? _jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ..."] }, l.key)
-                        : (() => {
-                            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 = `${l.sign} ${l.text}`.replace(/\t/g, '  ');
-                            return (_jsxs(Box, { children: [_jsxs(Text, { color: DIM, children: [String(l.shown ?? '').padStart(gutter), " "] }), _jsx(Text, { color: fg, ...(bg ? { backgroundColor: bg } : {}), children: fitCells(body, width, true) })] }, l.key));
-                        })()), clipped > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ", shownLines.length === 0 ? '' : '... ', clipped, " ", shownLines.length === 0 ? 'changed lines' : 'more lines', ", shown in full when this finishes"] })), d.hiddenLines > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ... ", d.hiddenLines, " more changed lines"] }))] }, key));
+        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 })] }), shownLines.map((r, i) => {
+                    if (r.t !== 'line')
+                        return _jsx(Text, { color: DIM, children: '  binary file - not shown' }, i);
+                    const fg = r.kind === 'add' ? DIFF_ADD : r.kind === 'del' ? DIFF_DEL : DIM;
+                    const bg = r.kind === 'add' ? DIFF_ADD_BG : r.kind === 'del' ? DIFF_DEL_BG : undefined;
+                    return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: fg, ...(bg ? { backgroundColor: bg } : {}), children: [(r.first && r.number !== null ? String(r.number) : '').padStart(gutter), ' ', r.sign, ' '] }), renderCodeLine(r.text, r.kind, width, lang)] }, i));
+                }), clipped > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ", shownLines.length === 0 ? '' : '... ', clipped, " ", shownLines.length === 0 ? 'changed lines' : 'more lines', ", shown in full when this finishes"] })), d.hiddenLines > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ... ", d.hiddenLines, " more changed lines"] }))] }, key));
     };
     const renderStep = (step, key) => {
         if (step.kind === 'say') {
@@ -7076,17 +7092,12 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                                         })(), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [animate ? SPINNER[spinFrame] : '●', " "] }), _jsx(Shimmer, { text: workWord({
                                                             elapsedMs, tools: turnToolsRef.current,
                                                             tokens: liveTokens, recovered: turnRecoveredRef.current,
-                                                        }, spinWord)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", liveTokens > 0
-                                                                ? `${fmtTokens(liveTokens)} tokens`
-                                                                // A gateway routing to several backends sends content-free frames while it
-                                                                // finds one. Saying "waiting for the first token" through that reads as a
-                                                                // hang, when in fact the request was accepted and is being worked on.
-                                                                : liveToolRef.current ? 'running ' + liveToolRef.current.name
-                                                                    : providerFramesRef.current > 0 ? `${cfg.provider} is holding the line, no output yet`
-                                                                        : elapsedMs > 8_000 ? `no response from ${cfg.provider} yet`
-                                                                            : 'starting', thinkingRef.current.chars > 0 && Date.now() - thinkingRef.current.at < 2_000
-                                                                ? ` | thinking, ${fmtTokens(Math.round(thinkingRef.current.chars / 4))} reasoning tokens`
-                                                                : '', ")"] })] }) }), showThinking && !ask && thinkingTextRef.current.trim() !== '' && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: thinkingTail(thinkingTextRef.current, THINKING_LINES, barWidth - 6).map((line, i) => (_jsx(Text, { color: DIM, italic: true, children: line }, i))) })), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), usagePane && (() => {
+                                                        }, spinWord)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", waitDetail({
+                                                                liveTokens, tool: liveToolRef.current?.name ?? null, provider: cfg.provider,
+                                                                frames: providerFramesRef.current, elapsedMs,
+                                                                thinkingChars: thinkingRef.current.chars,
+                                                                thinkingRecent: Date.now() - thinkingRef.current.at < 2_000,
+                                                            }), ")"] })] }) }), showThinking && !ask && thinkingTextRef.current.trim() !== '' && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: thinkingTail(thinkingTextRef.current, THINKING_LINES, barWidth - 6).map((line, i) => (_jsx(Text, { color: DIM, italic: true, children: line }, i))) })), _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, usagePane === 'settings' ? 96 : 66);
                                 const inner = width - 4;
                                 const BAR_W = Math.max(12, inner - 14);
@@ -7510,7 +7521,7 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                                         : '*type the number, or arrows and enter · esc refuses*',
                                 ];
                                 return (_jsx(Box, { marginTop: 1, children: _jsx(Panel, { width: panelWidth(lines, barWidth, 46), color: AMBER, title: `Permission — ${modeSpec(mode).label} mode`, children: lines }) }));
-                            })()] }), sidePanelOpen && (_jsx(Box, { flexDirection: "column", width: diffPanelWidth, flexShrink: 0, children: diffPanelOpen && _jsx(DiffPanel, { files: liveDiffs, width: diffPanelWidth, scroll: panelScroll, height: Math.max(6, frameRows - 6), activityRows: activityPanelOpen ? 4 : 0, activity: activityPanelOpen ? _jsxs(_Fragment, { children: [_jsxs(Text, { color: CYAN, bold: true, children: ["Activity \u00B7 ", fmtElapsed(busyStart.current ? Date.now() - busyStart.current : 0)] }), _jsx(Text, { color: AMBER, wrap: "truncate", children: ask ? 'Waiting for your approval' : liveToolRef.current
+                            })()] }), sidePanelOpen && (_jsx(Box, { flexDirection: "column", width: diffPanelWidth, flexShrink: 0, children: diffPanelOpen && _jsx(DiffPanel, { files: liveDiffs, width: diffPanelWidth, scroll: panelScroll, selected: panelFile, showGenerated: panelGenerated, height: Math.max(6, frameRows - 6), activityRows: activityPanelOpen ? 4 : 0, activity: activityPanelOpen ? _jsxs(_Fragment, { children: [_jsxs(Text, { color: CYAN, bold: true, children: ["Activity \u00B7 ", fmtElapsed(busyStart.current ? Date.now() - busyStart.current : 0)] }), _jsx(Text, { color: AMBER, wrap: "truncate", children: ask ? 'Waiting for your approval' : liveToolRef.current
                                             ? 'Running ' + liveToolRef.current.name : thinkingRef.current.chars > 0
                                             ? 'Waiting for model · reasoning received' : 'Waiting for model' }), _jsx(Text, { color: MUTED, wrap: "truncate", children: liveToolRef.current?.detail || plan?.steps.find(s => s.state !== 'done')?.text || 'esc to interrupt' })] }) : undefined }) }))] }), picker && (() => {
                 const list = visiblePickerItems;