koneck 2.120.0 → 2.121.0

package/dist/ink-chat.js

@@ -16,6 +16,7 @@ import { paceFrom } from './pace.js';
 import { policyFrom, FAILOVER_OFF } from './failover.js';
 import { listCheckpoints, revertCheckpoint, previewCheckpoint, snapshotTree, filesTouchedBy, createWorkspaceCheckpoint, checkpointScope } from './checkpoint.js';
 import { fileDiff, diffSummary } from './diff-view.js';
+import { tokenizeLine, spanLangFor } from './highlight-spans.js';
 import { untrackedPatches } from './git-diff.js';
 import { listWorkspaceEntries, activeReference } from './workspace-files.js';
 import { attachReferences, linesIn } from './mention-resolve.js';
@@ -69,6 +70,27 @@ const DIM = '#5C717A';
 // 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';
+/*
+ * Syntax colours for the diff panel.
+ *
+ * Asked for directly: "I need all the colors as shown in the image when editing a file." These are
+ * the familiar dark-theme assignments — control flow purple, strings warm, comments green, calls
+ * yellow, types teal, plain identifiers pale blue — chosen because a reader coming from an editor
+ * already knows what each one means, so the diff reads as code rather than as coloured text.
+ *
+ * Each is legible on the tinted add and delete bands as well as on the panel's own background,
+ * which is the constraint that rules out anything dark.
+ */
+const SYNTAX = {
+    keyword: '#C586C0',
+    string: '#CE9178',
+    comment: '#6A9955',
+    number: '#B5CEA8',
+    fn: '#DCDCAA',
+    type: '#4EC9B0',
+    plain: '#9CDCFE',
+    punct: '#A6ADB2',
+};
 const DIFF_ADD_BG = '#10291F';
 const DIFF_DEL = '#F2909B';
 const DIFF_DEL_BG = '#2B1419';
@@ -396,6 +418,7 @@ const COMMANDS = [
     { cmd: '/model', desc: 'Show or set the model by name' },
     { cmd: '/provider', desc: 'Show or switch provider' },
     { cmd: '/status', desc: 'Provider, model, mode, tokens, cost, workspace' },
+    { cmd: '/diff', desc: 'Show or hide the live diff panel beside the conversation' },
     { cmd: '/permissions', desc: 'Show or set approval posture: on or off' },
     { cmd: '/worktree', desc: 'Show or set isolated-worktree default for future CLI tasks' },
     { cmd: '/goal', desc: 'Set, inspect, or clear the session’s persistent outcome' },
@@ -515,6 +538,15 @@ export function expandPastes(draft, pastes) {
 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;
+/*
+ * How many changed lines the side panel draws per file.
+ *
+ * Higher than the inline diff's cap, because the panel is a column of its own with the height of
+ * the terminal to fill — the inline one has to leave room for the conversation around it. Still
+ * 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;
 /** 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
@@ -1083,6 +1115,92 @@ export function defaultAltScreen(stdout = process.stdout, env = process.env) {
         return false;
     return true;
 }
+/**
+ * One diff line, syntax-coloured, on its tinted band.
+ *
+ * The inline diff paints the whole line one colour — green for added, red for removed — which
+ * says what happened to the line and nothing about what the line is. In the panel the code is
+ * coloured as code: the tint carries add-or-remove, the spans carry meaning. The band is padded
+ * to the full width first so the tint is a solid block, and the padding is emitted as its own
+ * span so it takes the background without taking a foreground colour.
+ */
+function renderCodeLine(text, kind, width, lang) {
+    const bg = kind === 'add' ? DIFF_ADD_BG : kind === 'del' ? DIFF_DEL_BG : undefined;
+    const body = text.replace(/\t/g, '  ');
+    const cell = fitCells(body, width, true);
+    const spans = tokenizeLine(cell.replace(/\s+$/, ''), lang);
+    const drawn = spans.map(sp => sp.text).join('');
+    const pad = cell.length > drawn.length ? cell.slice(drawn.length) : '';
+    const out = spans.map((sp, i) => (_jsx(Text, { color: SYNTAX[sp.kind], ...(bg ? { backgroundColor: bg } : {}), children: sp.text }, i)));
+    if (pad)
+        out.push(_jsx(Text, { ...(bg ? { backgroundColor: bg } : {}), children: pad }, "pad"));
+    return out;
+}
+/**
+ * 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.
+ */
+export function DiffPanel({ files, width, height }) {
+    const added = files.reduce((n, d) => n + d.added, 0);
+    const removed = files.reduce((n, d) => n + d.removed, 0);
+    const inner = Math.max(20, width - 2);
+    // Rows are laid out against the height available, newest file first, so the thing just
+    // written is the thing on screen.
+    const body = [];
+    let used = 0;
+    let shownFiles = 0;
+    for (const d of [...files].reverse()) {
+        if (used + 2 > height)
+            break;
+        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}` : ''}`;
+        body.push(_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: CYAN, wrap: "truncate-start", children: d.path }), _jsxs(Text, { color: d.deleted ? DIFF_DEL : DIFF_ADD, children: [" ", tag] })] }, `h-${d.path}`));
+        used += 1;
+        if (d.binary) {
+            body.push(_jsx(Text, { color: DIM, children: "  binary \u2014 not shown" }, `b-${d.path}`));
+            used += 1;
+            shownFiles++;
+            continue;
+        }
+        for (const [hi, hunk] of d.hunks.entries()) {
+            if (used >= height)
+                break;
+            if (hi > 0 && used < height) {
+                body.push(_jsx(Text, { color: DIM, children: `${' '.repeat(gutter)} ⋯` }, `g-${d.path}-${hi}`));
+                used += 1;
+            }
+            for (const [li, l] of hunk.lines.entries()) {
+                if (used >= height)
+                    break;
+                const shown = l.kind === 'del' ? l.before : l.after;
+                const sign = l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ';
+                body.push(_jsxs(Box, { children: [_jsx(Text, { color: DIM, children: String(shown ?? '').padStart(gutter) }), _jsx(Text, { color: l.kind === 'add' ? DIFF_ADD : l.kind === 'del' ? DIFF_DEL : DIM, ...(l.kind !== 'ctx'
+                                ? { backgroundColor: l.kind === 'add' ? DIFF_ADD_BG : DIFF_DEL_BG } : {}), children: sign }), renderCodeLine(l.text, l.kind, codeWidth, lang)] }, `l-${d.path}-${hi}-${li}`));
+                used += 1;
+            }
+        }
+        if (d.hiddenLines > 0 && used < height) {
+            body.push(_jsx(Text, { color: DIM, children: `${' '.repeat(gutter)} ⋯ ${d.hiddenLines} more` }, `m-${d.path}`));
+            used += 1;
+        }
+        shownFiles++;
+        used += 1;
+        if (used < height)
+            body.push(_jsx(Text, { children: " " }, `s-${d.path}`));
+    }
+    const summary = files.length === 0
+        ? 'no changes yet'
+        : `${files.length} file${files.length === 1 ? '' : 's'} changed`;
+    return (_jsxs(Box, { flexDirection: "column", width: width, 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: 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" })] }), _jsx(Box, { flexDirection: "column", flexShrink: 1, overflowY: "hidden", children: body }), shownFiles < files.length && (_jsx(Text, { color: DIM, children: `… ${files.length - shownFiles} more file(s) changed` }))] }));
+}
 /**
  * Exported for one reason: so a test can mount it.
  *
@@ -1187,6 +1305,18 @@ export function App({ config: initialConfig, clearFrame }) {
     const [queued, setQueued] = useState([]);
     /** Pre-edit contents of the files the running tool said it would touch. */
     const pendingDiffRef = useRef([]);
+    /*
+     * The whole session's changes, for the live diff panel.
+     *
+     * `pendingDiffRef` holds one tool's before-contents and is cleared when that tool finishes, so it
+     * answers "what did this call change" and cannot answer "what has this session changed" — which
+     * is what a panel showing "1 file changed +46" has to know. This keeps the contents each file had
+     * when the session first touched it, and never overwrites an entry: edit the same file five times
+     * and the diff still runs from the state it was in before the first edit, which is the change the
+     * person actually wants to review.
+     */
+    const diffBaseRef = useRef(new Map());
+    const [liveDiffs, setLiveDiffs] = useState([]);
     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
@@ -1265,6 +1395,11 @@ export function App({ config: initialConfig, clearFrame }) {
         turnToolsRef.current += 1;
         pendingDiffRef.current = filesTouchedBy(name, args).slice(0, MAX_DIFF_FILES)
             .map(rel => ({ rel, before: readForDiff(rel) }));
+        // The session baseline: first touch only, so repeated edits still diff from the original.
+        for (const { rel, before } of pendingDiffRef.current) {
+            if (!diffBaseRef.current.has(rel))
+                diffBaseRef.current.set(rel, before);
+        }
         liveToolRef.current = { kind: 'tool', name, detail: toolDetail(name, args), startedAt: Date.now() };
     }
     function finishTool(name, ok, ms, detail) {
@@ -1288,6 +1423,34 @@ export function App({ config: initialConfig, clearFrame }) {
             ...(!ok && detail ? { error: detail } : {}),
         };
         setRows(prev => [...prev, { role: 'steps', steps: [done] }]);
+        /*
+         * Refresh the panel against every file the session has touched, not just this call's.
+         *
+         * Read from disk each time rather than accumulated, because a later tool — a shell command, a
+         * formatter, the model reverting itself — can change a file this one had finished with. Disk is
+         * the truth about what the change currently is.
+         */
+        if (diffBaseRef.current.size) {
+            const all = [];
+            for (const [rel, before] of diffBaseRef.current) {
+                const d = fileDiff(rel, before, readForDiff(rel), { maxLines: PANEL_DIFF_LINES });
+                if (!d.unchanged)
+                    all.push(d);
+            }
+            setLiveDiffs(all);
+            /*
+             * Open itself on the session's first change, once, unless the person has already decided.
+             *
+             * The panel is only useful when there is something in it, so it does not sit there empty at
+             * startup; and it must not reopen after being closed, which is why the decision is remembered
+             * rather than re-taken on every edit.
+             */
+            if (all.length && !diffPanelTouchedRef.current) {
+                diffPanelTouchedRef.current = true;
+                if (cfg.diffPanel !== false)
+                    setShowDiffPanel(true);
+            }
+        }
     }
     /**
      * Moves the agent panel into scrollback once the turn is over. The live panel is transient by
@@ -1459,6 +1622,15 @@ export function App({ config: initialConfig, clearFrame }) {
      */
     const activeSession = useState(() => ({ p: null }))[0];
     const [rows, setRows] = useState([{ role: 'header' }]);
+    /*
+     * Whether the live diff panel is open.
+     *
+     * Off until there is something to show, then it opens itself on the first change of a session and
+     * stays as the person leaves it — because a panel that reappears every time you close it is worse
+     * than one you have to ask for. `/diff` toggles it; `diffPanel: false` in config keeps it shut.
+     */
+    const [showDiffPanel, setShowDiffPanel] = useState(false);
+    const diffPanelTouchedRef = useRef(false);
     const [draft, setDraft] = useState('');
     // Recall is deliberately session-local. It is for quick retries and refinements, not another
     // persistence channel for prompts (which may contain sensitive project context).
@@ -3474,6 +3646,32 @@ export function App({ config: initialConfig, clearFrame }) {
                     'Pick a model with a known rate via /models to see cost, or read it from your provider dashboard.');
                 return;
             }
+            /*
+             * The live diff panel, on or off.
+             *
+             * Takes on/off as well as toggling, so it can be put in a shell alias or a hook, and says why
+             * nothing appeared when it cannot open — an inline session has no frame to put a column in,
+             * and a session that has changed nothing has nothing to draw.
+             */
+            case '/diff': {
+                const want = arg.trim() === 'off' ? false : arg.trim() === 'on' ? true : !showDiffPanel;
+                setShowDiffPanel(want);
+                diffPanelTouchedRef.current = true;
+                const saved = { ...(await loadKoneckConfig()), diffPanel: want };
+                await saveKoneckConfig(saved);
+                setStored(saved);
+                addSystem(want && !altScreen
+                    ? 'The diff panel needs the alternate screen, which this session is not using. '
+                        + '/altscreen on, then /diff.'
+                    : want && liveDiffs.length === 0
+                        ? 'Diff panel on — it will appear beside the conversation with the first edit. '
+                            + 'Saved as your default.'
+                        : want
+                            ? 'Diff panel open beside the conversation, following every edit as it lands. '
+                                + '/diff to hide it.'
+                            : 'Diff panel hidden. /diff to bring it back.');
+                return;
+            }
             case '/altscreen':
             case '/fullscreen': {
                 const next = arg.trim() === 'off' ? false : arg.trim() === 'on' ? true : !altScreen;
@@ -5091,7 +5289,22 @@ export function App({ config: initialConfig, clearFrame }) {
     // One character of a different width than Ink assumed is enough to cause it, and East Asian
     // ambiguous glyphs (·, ↑↓, ⌕, –, all of which the UI uses) are rendered two cells wide by some
     // terminals and one by others. A spare column costs nothing and removes the whole class.
-    const barWidth = uiWidth - 5;
+    /*
+     * The panel takes its width off the conversation's, rather than being laid over it.
+     *
+     * Everything in the interface is sized from barWidth, so taking the panel's share out here means
+     * the transcript, the composer and the tables inside a reply all reflow to the narrower column on
+     * their own. Laying the panel on top instead would have left every one of them drawing under it.
+     *
+     * Only on the alternate screen: in inline mode the transcript is committed to the terminal's own
+     * scrollback full-width, and there is no frame to put a second column in.
+     */
+    const diffPanelOpen = showDiffPanel && altScreen && liveDiffs.length > 0;
+    const diffPanelWidth = diffPanelOpen
+        ? Math.max(34, Math.min(Math.floor(uiWidth * 0.46), 96))
+        : 0;
+    const contentWidth = uiWidth - diffPanelWidth;
+    const barWidth = contentWidth - 5;
     // 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
     // too wide makes Ink reflow table rows and shatter their borders.
@@ -5197,367 +5410,367 @@ export function App({ config: initialConfig, clearFrame }) {
     const visibleRows = altScreen
         ? rows.slice(Math.max(0, rows.length - scrollBack - VIEWPORT_ROWS), rows.length - scrollBack)
         : rows;
-    return (_jsxs(Box, { flexDirection: "column", width: uiWidth, paddingX: 2, ...(altScreen ? { height: frameRows } : {}), children: [altScreen && (
-            // Grows no further than its content, but shrinks when there is not enough screen.
-            //
-            // flexGrow={1} filled the screen whatever was in it, so a session with only the banner in
-            // it put the banner at the foot of a screen of black — reported as "it just sits at the
-            // bottom". Growing only to fit means a short transcript starts at the top with the prompt
-            // directly beneath it, and once the transcript outgrows the screen this box is the only
-            // child that can give ground: it shrinks, and with the overflow hidden and the content
-            // bottom-aligned inside it, the top is clipped and the newest rows stay visible.
-            //
-            // Both halves matter. Clipping the bottom would hide what just happened; anchoring
-            // always to the bottom is what put the banner there.
-            _jsx(Box, { flexGrow: 0, flexShrink: 1, flexDirection: "column", justifyContent: "flex-end", overflowY: "hidden", children: visibleRows.map((row, i) => (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: renderRow(row, i) }, i))) })), altScreen && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — PageDown, or just type, to follow again` })), 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: altScreen ? [] : rows, children: (row, index) => renderRow(row, index) }), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: replyStartedRef.current ? '  ' : G.brand }), _jsx(Box, { flexDirection: "column", children: tailLines(sayRef.current, liveReplyLines(termRows), replyWidth - 3)
-                                        .split('\n').map((line, i) => _jsx(Text, { color: INK, children: line }, i)) })] })), liveToolRef.current && renderStep(liveToolRef.current, 1), queued.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: AMBER, children: "\u25AA" }), _jsxs(Text, { color: MUTED, children: [queued.length, " queued, will run when this finishes \u00B7 /aside to ask without waiting"] })] }), queued.map((q, i) => (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: fitCells(q.split('\n')[0] ?? '', Math.max(20, barWidth - 6), true) }) }, i)))] })), 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' ? G.fail : G.ok;
-                                        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: fitCells(task, 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, 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.
-                                                : 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 && 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);
-                const tabs = USAGE_TABS.map(t => t === usagePane ? `**${t[0].toUpperCase() + t.slice(1)}**` : t[0].toUpperCase() + t.slice(1)).join('   ');
-                /** A labelled bar with its percentage, the shape used for every proportion here. */
-                const meter = (fraction, label) => [`${bar(fraction, BAR_W)} ${Math.round(fraction * 100)}%`, `${label}`, ''];
-                const lines = [tabs, '---'];
-                if (usagePane === 'settings') {
-                    lines.push('**Settings**  — written to disk and applied now', '');
-                    // What is actually in force, not just what this file happens to hold. provider and
-                    // baseURL commonly come from ~/.koneckrc, and showing those as "(not set)" made a
-                    // configured session look unconfigured.
-                    const endpoint = endpointFor(cfg.provider);
-                    const labelW = Math.max(...CONFIG_SCHEMA.map(f => f.label.length));
-                    for (const [i, f] of CONFIG_SCHEMA.entries()) {
-                        const selected = i === settingRow;
-                        const beingTyped = editing?.key === String(f.key);
-                        // An endpoint always has a source worth naming, so it never reads as unset or as
-                        // merely inherited: the question it answers is which file won.
-                        const isEndpoint = f.key === 'baseURL';
-                        const isModel = f.key === 'model';
-                        const here = !isEndpoint && !isModel && stored[f.key] !== undefined;
-                        const value = here ? stored[f.key] : liveSetting(String(f.key));
-                        const raw = f.key === 'maxTurns' && (value === 0 || value === undefined)
-                            ? 'no limit'
-                            : displayValue(value);
-                        const shown = beingTyped
-                            ? `${editing.value}_`
-                            : isEndpoint ? `${raw}  (${shortSource(endpoint.source)})`
-                                : isModel ? `${raw}  (${shortSource(modelFor(cfg.provider).source)})`
-                                    : raw + (here || value === undefined ? '' : ' (inherited)');
-                        // The marker is what makes the selection legible without colour, which a panel line
-                        // drawn as one string cannot carry per-segment.
-                        const mark = selected ? '>' : ' ';
-                        const hint = !selected ? ''
-                            : f.type.kind === 'boolean' ? '   enter toggles'
-                                : f.type.kind === 'choice' ? `   enter cycles: ${f.type.choices.join(' / ')}`
-                                    : f.type.kind === 'number' ? `   type a number, enter to save${f.clearable ? ', x clears' : ''}`
-                                        : `   enter to edit${f.clearable ? ', x clears' : ''}`;
-                        lines.push(`${mark} ${f.label.padEnd(labelW)}  ${selected ? '**' + shown + '**' : shown}${hint}`);
-                    }
-                    lines.push('');
-                    lines.push(editing
-                        ? 'Typing. **enter** saves, **ctrl+u** empties the field, **esc** abandons.'
-                        : 'Up/down choose · enter change · x clear · left/right tabs');
-                    lines.push(`Saved to ${CONFIG_FILE}`);
-                }
-                if (usagePane === 'session') {
-                    const wall = Date.now() - sessionStartRef.current;
-                    const cost = estimateCost(cfg.model, stats.promptTokens, stats.completionTokens);
-                    lines.push('**Session**', '');
-                    lines.push(`Total cost         ${cost.known ? formatCost(cost.total) : 'no published price for this model'}`);
-                    lines.push(`Duration (API)     ${humanDuration(apiMsRef.current)}`);
-                    lines.push(`Duration (wall)    ${humanDuration(wall)}`);
-                    lines.push(`Turns              ${stats.turns}`);
-                    lines.push(`Code changes       ${usageDiff === undefined ? 'reading the working tree…'
-                        : usageDiff === null ? 'not a git repo — nothing to compare against'
-                            : `${usageDiff.added} added, ${usageDiff.removed} removed, ${usageDiff.files} file${usageDiff.files === 1 ? '' : 's'}`}`);
-                    lines.push(`Tokens             ${humanTokens(stats.promptTokens)} in · ${humanTokens(stats.completionTokens)} out`);
-                    lines.push('');
-                    if (apiMsRef.current > 0 && wall > apiMsRef.current) {
-                        const share = apiMsRef.current / wall;
-                        lines.push(...meter(share, 'of the session was the model thinking.'));
-                        lines.push('The rest was tools running and your own typing.');
-                    }
-                }
-                if (usagePane === 'context') {
-                    const window = modelCatalog.find(m => m.id === cfg.model)?.contextLength ?? contextWindowFor(cfg.model);
-                    lines.push('**Context window**', '');
-                    if (window) {
-                        // This is cumulative across the session, not a made-up claim about the next request.
-                        // It is still useful as a pressure signal: every long turn re-sends most of the
-                        // history, but only the provider can count the exact request after compaction.
-                        const used = stats.promptTokens;
-                        lines.push(...meter(Math.min(1, used / window), `${humanTokens(used)} session prompt total · ${humanTokens(window)} window · ${cfg.model}`));
-                        if (used / window > 0.7) {
-                            lines.push('Close to the window. `/clear` starts fresh,');
-                            lines.push('`/rewind` drops just the last exchange.');
-                        }
-                        else {
-                            lines.push('Every turn re-sends the whole history, so a long');
-                            lines.push('session costs more even when little is said.');
-                            lines.push('`/clear` when you move to an unrelated task.');
-                        }
-                    }
-                    else {
-                        lines.push(`This provider publishes no window for **${cfg.model}**,`);
-                        lines.push('so there is nothing honest to draw a bar against.');
-                    }
-                    lines.push('');
-                    lines.push(`Session total: ${humanTokens(stats.promptTokens)} prompt · ${humanTokens(stats.completionTokens)} completion.`);
-                }
-                if (usagePane === 'models') {
-                    const statuses = readModelStatus();
-                    lines.push(`**Models** — ${cfg.provider}`, '');
-                    if (modelCatalog.length === 0) {
-                        // The reason, when there is one: a provider that does not publish a list is a normal
-                        // configuration, not a fault, and saying so is the difference between "fix your setup"
-                        // and "type the name yourself".
-                        lines.push(catalogNote.current ?? 'Could not read the model list from this provider.');
-                    }
-                    else {
-                        // Counted rather than assumed in either direction: what the provider said was free,
-                        // and separately how many it said nothing about at all. "Free 3" out of 447 used to
-                        // imply the other 444 were paid, which nobody had established.
-                        const free = modelCatalog.filter(m => m.cost === 'free');
-                        const priced = modelCatalog.filter(m => m.cost === 'paid');
-                        const unknown = modelCatalog.filter(m => m.cost === undefined);
-                        // Status is keyed by provider, not by catalogue membership, so an alias that has
-                        // actually been used still counts as tried.
-                        const prefix = `${cfg.provider}:`;
-                        const tried = Object.values(statuses).filter(s => s.model.startsWith(prefix));
-                        const bad = tried.filter(s => s.state !== 'ok');
-                        lines.push(`Listed             ${modelCatalog.length}`);
-                        if (free.length)
-                            lines.push(`Free               ${free.length}`);
-                        if (priced.length)
-                            lines.push(`Priced             ${priced.length}`);
-                        if (unknown.length) {
-                            lines.push(`No price reported  ${unknown.length}`);
-                        }
-                        lines.push(`Tried here         ${tried.length} — ${tried.length - bad.length} worked, ${bad.length} failed`);
-                        lines.push('');
-                        // The model in use is not always a catalogue entry: `auto` and similar aliases are
-                        // routing instructions the gateway resolves per request, and never appear in a
-                        // listing. Showing only listed models would leave the commonest setting invisible.
-                        const current = modelCatalog.find(m => m.id === cfg.model);
-                        const st = statuses[`${cfg.provider}:${cfg.model}`];
-                        lines.push(`**In use**  ${cfg.model}`);
-                        if (current) {
-                            // Local is about the runtime, not the address: a router on localhost needs no key and
-                            // runs nothing, forwarding to a cloud that bills per token.
-                            const hosted = servesOwnWeights(cfg.provider);
-                            const money = hosted ? 'local'
-                                : current.promptRate !== undefined && current.promptRate > 0
-                                    ? `$${rateText(current.promptRate)} per million in`
-                                    : current.cost === 'free' ? 'free'
-                                        : current.cost === 'paid' ? 'paid'
-                                            : 'no price reported';
-                            lines.push(`  ${money}` +
-                                (current.contextLength ? ` · ${humanTokens(current.contextLength)} context` : '') +
-                                (current.maxOutput ? ` · ${humanTokens(current.maxOutput)} max out` : '') +
-                                (current.toolCalling === false ? ' · no tool calling' : '') +
-                                (current.vision ? ' · takes images' : ''));
-                        }
-                        else {
-                            lines.push('  a routing alias — the gateway picks the model per request');
-                        }
-                        lines.push(`  status: ${st ? stateLabel(st.state) : 'not tried yet'}`);
-                        if (bad.length) {
-                            lines.push('');
-                            lines.push('**Failing**');
-                            for (const s of bad.slice(0, 6)) {
-                                lines.push(`  ${s.model.slice(prefix.length)} — ${stateLabel(s.state)}`);
-                            }
-                        }
-                        lines.push('');
-                        lines.push('Status accrues from use: a model is marked when it');
-                        lines.push('answers or refuses. `/models` shows the same tags.');
-                    }
-                }
-                if (usagePane === 'limits') {
-                    lines.push('**Limits and quota**', '');
-                    lines.push(`How much of your plan is left on **${cfg.provider}**`);
-                    lines.push('cannot be shown.');
-                    lines.push('');
-                    lines.push('That is the provider, not a missing feature. Its');
-                    lines.push('replies carry no rate-limit or balance headers, and');
-                    lines.push('its account API refuses the key a session holds.');
-                    lines.push('A number here would be invented, so there is none.');
-                    lines.push('');
-                    lines.push('**What is measured instead**');
-                    lines.push('  · tokens actually spent — Session tab');
-                    lines.push('  · context actually filled — Context tab');
-                    lines.push('  · which models actually answered — Models tab');
-                    lines.push('');
-                    lines.push('A provider that returns `x-ratelimit-*` headers will');
-                    lines.push('show a real bar here with no further work.');
-                }
-                lines.push('---');
-                lines.push('**{left}/{right}** switch tabs · **esc** to close');
-                return (_jsx(Box, { marginTop: 1, justifyContent: "flex-end", children: _jsx(Panel, { width: width, color: CYAN, title: "KONECK \u00B7 usage", children: lines }) }));
-            })(), updatePane && (() => {
-                const u = updatePane;
-                const lines = [];
-                lines.push(`Running   **${u.current}**`);
-                if (u.latest === null && !u.error)
-                    lines.push('Latest    checking the registry…');
-                else if (u.error) {
-                    lines.push(`Latest    could not check — ${u.error}`);
-                    lines.push('');
-                    lines.push(`Update by hand with:  \`${updateCommand()}\``);
-                }
-                else if (u.behind) {
-                    lines.push(`Latest    **${u.latest}**  — an update is available`);
-                    lines.push('');
-                    lines.push(updating === 'idle' ? 'Press **u** to update now, **esc** to close.'
-                        : updating === 'running' ? 'Updating… this runs npm and can take a minute.'
-                            : updating === 'done' ? `Updated to ${u.latest}. **Restart koneck** for it to take effect.`
-                                : 'The update failed. What the command printed:');
-                    if (updating === 'failed') {
-                        lines.push('');
-                        if (updateLog)
-                            lines.push('```\n' + updateLog + '\n```');
-                        lines.push('Most often this is a permissions problem on the global npm prefix. Try:');
-                        lines.push(`\`${updateCommand()}\`  in your own shell, or`);
-                        lines.push('`npm config get prefix`  and make sure you own that directory.');
-                    }
-                }
-                else {
-                    lines.push(`Latest    ${u.latest} — you are up to date.`);
-                    lines.push('');
-                    lines.push('Press **esc** to close.');
-                }
-                lines.push('');
-                lines.push('---');
-                lines.push('**Keys**  tab analytics · shift+tab mode · ctrl+c exit   ·   /update for this panel');
-                lines.push('**Editing**  arrows move · ctrl+a/e ends · ctrl+w word · ctrl+u/k cut');
-                lines.push('**Sessions**  /sessions · /send <repo> <task> · /ask <repo> <q> · /resume');
-                lines.push('**Changelog**  github.com/Gubevu/konech/commits/main');
-                return (_jsx(Box, { marginTop: 1, justifyContent: "flex-end", children: _jsx(Panel, { width: Math.min(barWidth, 62), color: AMBER, title: "KONECK \u00B7 updates & guide", children: lines }) }));
-            })(), picker && (() => {
-                const list = visiblePickerItems;
-                // In the alternate screen, the picker shares a fixed frame with a bordered composer and
-                // footer. They consume six rows and the picker itself has six non-choice rows (margin,
-                // border, title/search and pager), so reserve thirteen in total. Letting 16 choices into
-                // a 24-row frame made Ink reflow the live region and visibly blink on every keypress.
-                const pickerRows = pickerRowLimit(picker.kind, list.length, ...(altScreen ? [termRows, 13] : []));
-                // Keep the highlighted row inside the visible window as the selection moves.
-                const start = Math.max(0, Math.min(pickIndex - Math.floor(pickerRows / 2), list.length - pickerRows));
-                const shown = list.slice(Math.max(0, start), Math.max(0, start) + pickerRows);
-                const title = picker.kind === 'command' ? 'Commands'
-                    : picker.kind === 'model' ? `Models - ${cfg.provider}`
-                        : picker.kind === 'effort' ? 'Reasoning effort'
-                            : picker.kind === 'resume' ? 'Resume a saved session'
-                                : picker.kind === 'file' ? 'Reference a file or directory'
-                                    : 'Connect provider';
-                // The palette is sized to the rows it is showing rather than to the terminal. On a wide
-                // screen a list of short model names in a full-width box is mostly empty box.
-                // The header is a title on the left and a count on the right, on one line. Estimating the
-                // right-hand side at a constant made "Reference a file or directory" wrap onto two rows.
-                const countText = pickerCountText(pickIndex, list.length, picker.items.length);
-                const headWidth = displayWidth(title) + displayWidth(countText) + 3;
-                // Measure the filtered list, not just its current scroll window. A palette whose right
-                // edge breathes as the highlight crosses a long description feels broken even when the
-                // selection itself is correct.
-                const rowWidth = Math.max(headWidth, ...list.map(it => 38 + (it.current ? 10 : 0) + displayWidth(it.desc) + displayWidth(it.group ?? '') + 3));
-                const boxWidth = pickerBoxWidth(barWidth, rowWidth + 4);
-                const width = boxWidth - 4;
-                // Room for the longest label the list actually holds, rather than a constant. A session
-                // title is what identifies the row, and 36 cells cut most of them in half.
-                const labelWidth = pickerLabelWidth(list.map(it => it.label), list.map(it => it.desc), width);
-                let lastGroup;
-                return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: CYAN, paddingX: 1, marginTop: 1, width: boxWidth, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: CYAN, bold: true, children: title }), _jsx(Text, { color: DIM, children: countText })] }), _jsxs(Box, { children: [_jsxs(Text, { color: DIM, children: [G.search, " "] }), pickQuery === ''
-                                    ? _jsx(Text, { color: DIM, children: "type to search" })
-                                    : _jsx(Text, { color: INK, children: pickQuery }), _jsx(Text, { color: CYAN, children: pickQuery === '' ? '' : '▌' })] }), list.length === 0 && _jsxs(Text, { color: MUTED, children: ["Nothing matches \"", pickQuery, "\""] }), shown.map((item, i) => {
-                            const absolute = Math.max(0, start) + i;
-                            const selected = absolute === pickIndex;
-                            const header = item.group && item.group !== lastGroup ? item.group : null;
-                            lastGroup = item.group;
-                            const label = pickerLabel(item.label, labelWidth);
-                            return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { backgroundColor: selected ? CYAN : undefined, color: selected ? '#10222A' : INK, bold: selected, children: fitCells(`${selected ? G.caret + ' ' : '  '}${label}` +
-                                        `${item.current ? '(current) ' : ''}${header ? `${header} · ` : ''}${item.desc}`, width) }) }, item.value + absolute));
-                        }), list.length > pickerRows && (_jsxs(Text, { color: DIM, children: ["\u2191\u2193 navigate \u00B7 pgup/pgdn jump \u00B7 enter select \u00B7 showing ", Math.max(0, start) + 1, "\u2013", Math.max(0, start) + shown.length, " of ", list.length] }))] }));
-            })(), addProv && (() => {
-                const shadowed = BUILT_IN_PROVIDERS[addProv.name];
-                const ask = addProv.step === 'name' ? { label: 'name', hint: 'short and lowercase, e.g. openrouter' }
-                    : addProv.step === 'url' ? { label: 'endpoint', hint: 'OpenAI-compatible, e.g. https://openrouter.ai/api/v1' }
-                        : addProv.step === 'model' ? { label: 'default model', hint: 'optional — enter to skip' }
-                            : { label: 'repoint ' + addProv.name + '? (y/n)',
-                                hint: `it ships with KONECK, pointing at ${shadowed?.baseURL}` };
-                return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: CYAN, paddingX: 1, marginTop: 1, width: barWidth, children: [_jsx(Text, { color: CYAN, bold: true, children: "Declare a provider" }), _jsxs(Text, { color: MUTED, children: [ask.hint, "  \u00B7  esc to cancel"] }), addProv.name !== '' && (_jsxs(Text, { color: DIM, children: [addProv.name, addProv.url ? '  ' + addProv.url : ''] })), addProv.error && _jsx(Text, { color: CRIMSON, children: addProv.error }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: MUTED, children: [ask.label, ": "] }), _jsx(Text, { color: INK, children: addProv.value }), _jsx(Text, { color: CYAN, children: "\u2588" })] })] }));
-            })(), keyPrompt && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: AMBER, paddingX: 1, marginTop: 1, width: barWidth, children: [_jsxs(Text, { color: AMBER, bold: true, children: ["API key for ", keyPrompt.provider] }), _jsx(Text, { color: MUTED, children: "Paste it and press enter, or ctrl+v to read the clipboard. Held in memory for this session only; esc to cancel." }), keyPrompt.note && _jsx(Text, { color: CYAN, children: keyPrompt.note }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: MUTED, children: [keyPrompt.env, ": "] }), _jsx(Text, { color: INK, children: '*'.repeat(Math.min(keyPrompt.value.length, 48)) }), _jsx(Text, { color: CYAN, children: "\u2588" }), keyPrompt.value.length > 0 && (_jsxs(Text, { color: DIM, children: ["  ", keyPrompt.value.length, " characters"] }))] })] })), ask && (() => {
-                let detail = '';
-                let isCommand = false;
-                try {
-                    const parsed = JSON.parse(ask.args);
-                    if (parsed['command'] !== undefined) {
-                        detail = String(parsed['command']);
-                        isCommand = true;
-                    }
-                    else
-                        detail = String(parsed['path'] ?? parsed['source'] ?? '');
-                }
-                catch { /* show the tool alone */ }
-                const options = askOptions(ask.tool, ask.prefix);
-                /*
-                 * The whole command, wrapped onto its own lines.
-                 *
-                 * It was `detail.slice(0, 200)` on the same line as the tool name, so a real command — a cd
-                 * into a directory, an artisan call with a quoted PHP expression — arrived cut off mid-flight
-                 * with nothing saying it had been cut. A command you cannot read is one you cannot honestly
-                 * approve, and that is the whole point of asking. So it wraps instead of truncating, sits
-                 * indented under a line that says what is about to happen, and if it is genuinely enormous
-                 * the remainder is counted out loud rather than dropped in silence.
-                 */
-                const room = Math.max(24, Math.min(barWidth, 100) - 8);
-                const SHOW_AT_MOST = 1200;
-                const shown = detail.slice(0, SHOW_AT_MOST);
-                const cut = detail.length - shown.length;
-                const detailLines = shown
-                    ? wrapPreserving(shown, room).map(l => '  ' + l)
-                    : [];
-                const lines = [
-                    detail
-                        ? `**${ask.tool}** wants to ${isCommand ? 'run' : 'touch'}:`
-                        : `**${ask.tool}** wants to run.`,
-                    ...(detailLines.length ? ['', ...detailLines] : []),
-                    ...(cut > 0 ? [`  *… and ${cut} more characters*`] : []),
-                    '',
-                    ...options.map((o, i) => `${i === ask.choice ? `**${G.caret} ${o.key}**` : `  ${o.key}`}  ${o.label}`),
-                    '',
-                    ask.waiting > 0
-                        ? `*type the number, or arrows and enter · ${ask.waiting} more waiting*`
-                        : '*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 }) }));
-            })(), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: busy ? DIM : CYAN, paddingX: 1, width: barWidth, flexShrink: 0, children: [_jsxs(Text, { color: CYAN, bold: true, children: [G.caret, " "] }), _jsx(Text, { color: INK, children: draft.slice(0, caret) }), busy
+    return (_jsxs(Box, { flexDirection: "column", width: uiWidth, paddingX: 2, ...(altScreen ? { height: frameRows } : {}), children: [_jsxs(Box, { flexDirection: "row", flexGrow: 0, flexShrink: 1, overflowY: "hidden", children: [_jsxs(Box, { flexDirection: "column", width: contentWidth, flexGrow: 0, flexShrink: 1, overflowY: "hidden", children: [altScreen && (
+                            // Grows no further than its content, but shrinks when there is not enough screen.
+                            //
+                            // flexGrow={1} filled the screen whatever was in it, so a session with only the banner in
+                            // it put the banner at the foot of a screen of black — reported as "it just sits at the
+                            // bottom". Growing only to fit means a short transcript starts at the top with the prompt
+                            // directly beneath it, and once the transcript outgrows the screen this box is the only
+                            // child that can give ground: it shrinks, and with the overflow hidden and the content
+                            // bottom-aligned inside it, the top is clipped and the newest rows stay visible.
+                            //
+                            // Both halves matter. Clipping the bottom would hide what just happened; anchoring
+                            // always to the bottom is what put the banner there.
+                            _jsx(Box, { flexGrow: 0, flexShrink: 1, flexDirection: "column", justifyContent: "flex-end", overflowY: "hidden", children: visibleRows.map((row, i) => (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: renderRow(row, i) }, i))) })), altScreen && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — PageDown, or just type, to follow again` })), 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: altScreen ? [] : rows, children: (row, index) => renderRow(row, index) }), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: replyStartedRef.current ? '  ' : G.brand }), _jsx(Box, { flexDirection: "column", children: tailLines(sayRef.current, liveReplyLines(termRows), replyWidth - 3)
+                                                        .split('\n').map((line, i) => _jsx(Text, { color: INK, children: line }, i)) })] })), liveToolRef.current && renderStep(liveToolRef.current, 1), queued.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: AMBER, children: "\u25AA" }), _jsxs(Text, { color: MUTED, children: [queued.length, " queued, will run when this finishes \u00B7 /aside to ask without waiting"] })] }), queued.map((q, i) => (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: fitCells(q.split('\n')[0] ?? '', Math.max(20, barWidth - 6), true) }) }, i)))] })), 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' ? G.fail : G.ok;
+                                                        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: fitCells(task, 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, 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.
+                                                                : 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 && 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);
+                                const tabs = USAGE_TABS.map(t => t === usagePane ? `**${t[0].toUpperCase() + t.slice(1)}**` : t[0].toUpperCase() + t.slice(1)).join('   ');
+                                /** A labelled bar with its percentage, the shape used for every proportion here. */
+                                const meter = (fraction, label) => [`${bar(fraction, BAR_W)} ${Math.round(fraction * 100)}%`, `${label}`, ''];
+                                const lines = [tabs, '---'];
+                                if (usagePane === 'settings') {
+                                    lines.push('**Settings**  — written to disk and applied now', '');
+                                    // What is actually in force, not just what this file happens to hold. provider and
+                                    // baseURL commonly come from ~/.koneckrc, and showing those as "(not set)" made a
+                                    // configured session look unconfigured.
+                                    const endpoint = endpointFor(cfg.provider);
+                                    const labelW = Math.max(...CONFIG_SCHEMA.map(f => f.label.length));
+                                    for (const [i, f] of CONFIG_SCHEMA.entries()) {
+                                        const selected = i === settingRow;
+                                        const beingTyped = editing?.key === String(f.key);
+                                        // An endpoint always has a source worth naming, so it never reads as unset or as
+                                        // merely inherited: the question it answers is which file won.
+                                        const isEndpoint = f.key === 'baseURL';
+                                        const isModel = f.key === 'model';
+                                        const here = !isEndpoint && !isModel && stored[f.key] !== undefined;
+                                        const value = here ? stored[f.key] : liveSetting(String(f.key));
+                                        const raw = f.key === 'maxTurns' && (value === 0 || value === undefined)
+                                            ? 'no limit'
+                                            : displayValue(value);
+                                        const shown = beingTyped
+                                            ? `${editing.value}_`
+                                            : isEndpoint ? `${raw}  (${shortSource(endpoint.source)})`
+                                                : isModel ? `${raw}  (${shortSource(modelFor(cfg.provider).source)})`
+                                                    : raw + (here || value === undefined ? '' : ' (inherited)');
+                                        // The marker is what makes the selection legible without colour, which a panel line
+                                        // drawn as one string cannot carry per-segment.
+                                        const mark = selected ? '>' : ' ';
+                                        const hint = !selected ? ''
+                                            : f.type.kind === 'boolean' ? '   enter toggles'
+                                                : f.type.kind === 'choice' ? `   enter cycles: ${f.type.choices.join(' / ')}`
+                                                    : f.type.kind === 'number' ? `   type a number, enter to save${f.clearable ? ', x clears' : ''}`
+                                                        : `   enter to edit${f.clearable ? ', x clears' : ''}`;
+                                        lines.push(`${mark} ${f.label.padEnd(labelW)}  ${selected ? '**' + shown + '**' : shown}${hint}`);
+                                    }
+                                    lines.push('');
+                                    lines.push(editing
+                                        ? 'Typing. **enter** saves, **ctrl+u** empties the field, **esc** abandons.'
+                                        : 'Up/down choose · enter change · x clear · left/right tabs');
+                                    lines.push(`Saved to ${CONFIG_FILE}`);
+                                }
+                                if (usagePane === 'session') {
+                                    const wall = Date.now() - sessionStartRef.current;
+                                    const cost = estimateCost(cfg.model, stats.promptTokens, stats.completionTokens);
+                                    lines.push('**Session**', '');
+                                    lines.push(`Total cost         ${cost.known ? formatCost(cost.total) : 'no published price for this model'}`);
+                                    lines.push(`Duration (API)     ${humanDuration(apiMsRef.current)}`);
+                                    lines.push(`Duration (wall)    ${humanDuration(wall)}`);
+                                    lines.push(`Turns              ${stats.turns}`);
+                                    lines.push(`Code changes       ${usageDiff === undefined ? 'reading the working tree…'
+                                        : usageDiff === null ? 'not a git repo — nothing to compare against'
+                                            : `${usageDiff.added} added, ${usageDiff.removed} removed, ${usageDiff.files} file${usageDiff.files === 1 ? '' : 's'}`}`);
+                                    lines.push(`Tokens             ${humanTokens(stats.promptTokens)} in · ${humanTokens(stats.completionTokens)} out`);
+                                    lines.push('');
+                                    if (apiMsRef.current > 0 && wall > apiMsRef.current) {
+                                        const share = apiMsRef.current / wall;
+                                        lines.push(...meter(share, 'of the session was the model thinking.'));
+                                        lines.push('The rest was tools running and your own typing.');
+                                    }
+                                }
+                                if (usagePane === 'context') {
+                                    const window = modelCatalog.find(m => m.id === cfg.model)?.contextLength ?? contextWindowFor(cfg.model);
+                                    lines.push('**Context window**', '');
+                                    if (window) {
+                                        // This is cumulative across the session, not a made-up claim about the next request.
+                                        // It is still useful as a pressure signal: every long turn re-sends most of the
+                                        // history, but only the provider can count the exact request after compaction.
+                                        const used = stats.promptTokens;
+                                        lines.push(...meter(Math.min(1, used / window), `${humanTokens(used)} session prompt total · ${humanTokens(window)} window · ${cfg.model}`));
+                                        if (used / window > 0.7) {
+                                            lines.push('Close to the window. `/clear` starts fresh,');
+                                            lines.push('`/rewind` drops just the last exchange.');
+                                        }
+                                        else {
+                                            lines.push('Every turn re-sends the whole history, so a long');
+                                            lines.push('session costs more even when little is said.');
+                                            lines.push('`/clear` when you move to an unrelated task.');
+                                        }
+                                    }
+                                    else {
+                                        lines.push(`This provider publishes no window for **${cfg.model}**,`);
+                                        lines.push('so there is nothing honest to draw a bar against.');
+                                    }
+                                    lines.push('');
+                                    lines.push(`Session total: ${humanTokens(stats.promptTokens)} prompt · ${humanTokens(stats.completionTokens)} completion.`);
+                                }
+                                if (usagePane === 'models') {
+                                    const statuses = readModelStatus();
+                                    lines.push(`**Models** — ${cfg.provider}`, '');
+                                    if (modelCatalog.length === 0) {
+                                        // The reason, when there is one: a provider that does not publish a list is a normal
+                                        // configuration, not a fault, and saying so is the difference between "fix your setup"
+                                        // and "type the name yourself".
+                                        lines.push(catalogNote.current ?? 'Could not read the model list from this provider.');
+                                    }
+                                    else {
+                                        // Counted rather than assumed in either direction: what the provider said was free,
+                                        // and separately how many it said nothing about at all. "Free 3" out of 447 used to
+                                        // imply the other 444 were paid, which nobody had established.
+                                        const free = modelCatalog.filter(m => m.cost === 'free');
+                                        const priced = modelCatalog.filter(m => m.cost === 'paid');
+                                        const unknown = modelCatalog.filter(m => m.cost === undefined);
+                                        // Status is keyed by provider, not by catalogue membership, so an alias that has
+                                        // actually been used still counts as tried.
+                                        const prefix = `${cfg.provider}:`;
+                                        const tried = Object.values(statuses).filter(s => s.model.startsWith(prefix));
+                                        const bad = tried.filter(s => s.state !== 'ok');
+                                        lines.push(`Listed             ${modelCatalog.length}`);
+                                        if (free.length)
+                                            lines.push(`Free               ${free.length}`);
+                                        if (priced.length)
+                                            lines.push(`Priced             ${priced.length}`);
+                                        if (unknown.length) {
+                                            lines.push(`No price reported  ${unknown.length}`);
+                                        }
+                                        lines.push(`Tried here         ${tried.length} — ${tried.length - bad.length} worked, ${bad.length} failed`);
+                                        lines.push('');
+                                        // The model in use is not always a catalogue entry: `auto` and similar aliases are
+                                        // routing instructions the gateway resolves per request, and never appear in a
+                                        // listing. Showing only listed models would leave the commonest setting invisible.
+                                        const current = modelCatalog.find(m => m.id === cfg.model);
+                                        const st = statuses[`${cfg.provider}:${cfg.model}`];
+                                        lines.push(`**In use**  ${cfg.model}`);
+                                        if (current) {
+                                            // Local is about the runtime, not the address: a router on localhost needs no key and
+                                            // runs nothing, forwarding to a cloud that bills per token.
+                                            const hosted = servesOwnWeights(cfg.provider);
+                                            const money = hosted ? 'local'
+                                                : current.promptRate !== undefined && current.promptRate > 0
+                                                    ? `$${rateText(current.promptRate)} per million in`
+                                                    : current.cost === 'free' ? 'free'
+                                                        : current.cost === 'paid' ? 'paid'
+                                                            : 'no price reported';
+                                            lines.push(`  ${money}` +
+                                                (current.contextLength ? ` · ${humanTokens(current.contextLength)} context` : '') +
+                                                (current.maxOutput ? ` · ${humanTokens(current.maxOutput)} max out` : '') +
+                                                (current.toolCalling === false ? ' · no tool calling' : '') +
+                                                (current.vision ? ' · takes images' : ''));
+                                        }
+                                        else {
+                                            lines.push('  a routing alias — the gateway picks the model per request');
+                                        }
+                                        lines.push(`  status: ${st ? stateLabel(st.state) : 'not tried yet'}`);
+                                        if (bad.length) {
+                                            lines.push('');
+                                            lines.push('**Failing**');
+                                            for (const s of bad.slice(0, 6)) {
+                                                lines.push(`  ${s.model.slice(prefix.length)} — ${stateLabel(s.state)}`);
+                                            }
+                                        }
+                                        lines.push('');
+                                        lines.push('Status accrues from use: a model is marked when it');
+                                        lines.push('answers or refuses. `/models` shows the same tags.');
+                                    }
+                                }
+                                if (usagePane === 'limits') {
+                                    lines.push('**Limits and quota**', '');
+                                    lines.push(`How much of your plan is left on **${cfg.provider}**`);
+                                    lines.push('cannot be shown.');
+                                    lines.push('');
+                                    lines.push('That is the provider, not a missing feature. Its');
+                                    lines.push('replies carry no rate-limit or balance headers, and');
+                                    lines.push('its account API refuses the key a session holds.');
+                                    lines.push('A number here would be invented, so there is none.');
+                                    lines.push('');
+                                    lines.push('**What is measured instead**');
+                                    lines.push('  · tokens actually spent — Session tab');
+                                    lines.push('  · context actually filled — Context tab');
+                                    lines.push('  · which models actually answered — Models tab');
+                                    lines.push('');
+                                    lines.push('A provider that returns `x-ratelimit-*` headers will');
+                                    lines.push('show a real bar here with no further work.');
+                                }
+                                lines.push('---');
+                                lines.push('**{left}/{right}** switch tabs · **esc** to close');
+                                return (_jsx(Box, { marginTop: 1, justifyContent: "flex-end", children: _jsx(Panel, { width: width, color: CYAN, title: "KONECK \u00B7 usage", children: lines }) }));
+                            })(), updatePane && (() => {
+                                const u = updatePane;
+                                const lines = [];
+                                lines.push(`Running   **${u.current}**`);
+                                if (u.latest === null && !u.error)
+                                    lines.push('Latest    checking the registry…');
+                                else if (u.error) {
+                                    lines.push(`Latest    could not check — ${u.error}`);
+                                    lines.push('');
+                                    lines.push(`Update by hand with:  \`${updateCommand()}\``);
+                                }
+                                else if (u.behind) {
+                                    lines.push(`Latest    **${u.latest}**  — an update is available`);
+                                    lines.push('');
+                                    lines.push(updating === 'idle' ? 'Press **u** to update now, **esc** to close.'
+                                        : updating === 'running' ? 'Updating… this runs npm and can take a minute.'
+                                            : updating === 'done' ? `Updated to ${u.latest}. **Restart koneck** for it to take effect.`
+                                                : 'The update failed. What the command printed:');
+                                    if (updating === 'failed') {
+                                        lines.push('');
+                                        if (updateLog)
+                                            lines.push('```\n' + updateLog + '\n```');
+                                        lines.push('Most often this is a permissions problem on the global npm prefix. Try:');
+                                        lines.push(`\`${updateCommand()}\`  in your own shell, or`);
+                                        lines.push('`npm config get prefix`  and make sure you own that directory.');
+                                    }
+                                }
+                                else {
+                                    lines.push(`Latest    ${u.latest} — you are up to date.`);
+                                    lines.push('');
+                                    lines.push('Press **esc** to close.');
+                                }
+                                lines.push('');
+                                lines.push('---');
+                                lines.push('**Keys**  tab analytics · shift+tab mode · ctrl+c exit   ·   /update for this panel');
+                                lines.push('**Editing**  arrows move · ctrl+a/e ends · ctrl+w word · ctrl+u/k cut');
+                                lines.push('**Sessions**  /sessions · /send <repo> <task> · /ask <repo> <q> · /resume');
+                                lines.push('**Changelog**  github.com/Gubevu/konech/commits/main');
+                                return (_jsx(Box, { marginTop: 1, justifyContent: "flex-end", children: _jsx(Panel, { width: Math.min(barWidth, 62), color: AMBER, title: "KONECK \u00B7 updates & guide", children: lines }) }));
+                            })(), picker && (() => {
+                                const list = visiblePickerItems;
+                                // In the alternate screen, the picker shares a fixed frame with a bordered composer and
+                                // footer. They consume six rows and the picker itself has six non-choice rows (margin,
+                                // border, title/search and pager), so reserve thirteen in total. Letting 16 choices into
+                                // a 24-row frame made Ink reflow the live region and visibly blink on every keypress.
+                                const pickerRows = pickerRowLimit(picker.kind, list.length, ...(altScreen ? [termRows, 13] : []));
+                                // Keep the highlighted row inside the visible window as the selection moves.
+                                const start = Math.max(0, Math.min(pickIndex - Math.floor(pickerRows / 2), list.length - pickerRows));
+                                const shown = list.slice(Math.max(0, start), Math.max(0, start) + pickerRows);
+                                const title = picker.kind === 'command' ? 'Commands'
+                                    : picker.kind === 'model' ? `Models - ${cfg.provider}`
+                                        : picker.kind === 'effort' ? 'Reasoning effort'
+                                            : picker.kind === 'resume' ? 'Resume a saved session'
+                                                : picker.kind === 'file' ? 'Reference a file or directory'
+                                                    : 'Connect provider';
+                                // The palette is sized to the rows it is showing rather than to the terminal. On a wide
+                                // screen a list of short model names in a full-width box is mostly empty box.
+                                // The header is a title on the left and a count on the right, on one line. Estimating the
+                                // right-hand side at a constant made "Reference a file or directory" wrap onto two rows.
+                                const countText = pickerCountText(pickIndex, list.length, picker.items.length);
+                                const headWidth = displayWidth(title) + displayWidth(countText) + 3;
+                                // Measure the filtered list, not just its current scroll window. A palette whose right
+                                // edge breathes as the highlight crosses a long description feels broken even when the
+                                // selection itself is correct.
+                                const rowWidth = Math.max(headWidth, ...list.map(it => 38 + (it.current ? 10 : 0) + displayWidth(it.desc) + displayWidth(it.group ?? '') + 3));
+                                const boxWidth = pickerBoxWidth(barWidth, rowWidth + 4);
+                                const width = boxWidth - 4;
+                                // Room for the longest label the list actually holds, rather than a constant. A session
+                                // title is what identifies the row, and 36 cells cut most of them in half.
+                                const labelWidth = pickerLabelWidth(list.map(it => it.label), list.map(it => it.desc), width);
+                                let lastGroup;
+                                return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: CYAN, paddingX: 1, marginTop: 1, width: boxWidth, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: CYAN, bold: true, children: title }), _jsx(Text, { color: DIM, children: countText })] }), _jsxs(Box, { children: [_jsxs(Text, { color: DIM, children: [G.search, " "] }), pickQuery === ''
+                                                    ? _jsx(Text, { color: DIM, children: "type to search" })
+                                                    : _jsx(Text, { color: INK, children: pickQuery }), _jsx(Text, { color: CYAN, children: pickQuery === '' ? '' : '▌' })] }), list.length === 0 && _jsxs(Text, { color: MUTED, children: ["Nothing matches \"", pickQuery, "\""] }), shown.map((item, i) => {
+                                            const absolute = Math.max(0, start) + i;
+                                            const selected = absolute === pickIndex;
+                                            const header = item.group && item.group !== lastGroup ? item.group : null;
+                                            lastGroup = item.group;
+                                            const label = pickerLabel(item.label, labelWidth);
+                                            return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { backgroundColor: selected ? CYAN : undefined, color: selected ? '#10222A' : INK, bold: selected, children: fitCells(`${selected ? G.caret + ' ' : '  '}${label}` +
+                                                        `${item.current ? '(current) ' : ''}${header ? `${header} · ` : ''}${item.desc}`, width) }) }, item.value + absolute));
+                                        }), list.length > pickerRows && (_jsxs(Text, { color: DIM, children: ["\u2191\u2193 navigate \u00B7 pgup/pgdn jump \u00B7 enter select \u00B7 showing ", Math.max(0, start) + 1, "\u2013", Math.max(0, start) + shown.length, " of ", list.length] }))] }));
+                            })(), addProv && (() => {
+                                const shadowed = BUILT_IN_PROVIDERS[addProv.name];
+                                const ask = addProv.step === 'name' ? { label: 'name', hint: 'short and lowercase, e.g. openrouter' }
+                                    : addProv.step === 'url' ? { label: 'endpoint', hint: 'OpenAI-compatible, e.g. https://openrouter.ai/api/v1' }
+                                        : addProv.step === 'model' ? { label: 'default model', hint: 'optional — enter to skip' }
+                                            : { label: 'repoint ' + addProv.name + '? (y/n)',
+                                                hint: `it ships with KONECK, pointing at ${shadowed?.baseURL}` };
+                                return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: CYAN, paddingX: 1, marginTop: 1, width: barWidth, children: [_jsx(Text, { color: CYAN, bold: true, children: "Declare a provider" }), _jsxs(Text, { color: MUTED, children: [ask.hint, "  \u00B7  esc to cancel"] }), addProv.name !== '' && (_jsxs(Text, { color: DIM, children: [addProv.name, addProv.url ? '  ' + addProv.url : ''] })), addProv.error && _jsx(Text, { color: CRIMSON, children: addProv.error }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: MUTED, children: [ask.label, ": "] }), _jsx(Text, { color: INK, children: addProv.value }), _jsx(Text, { color: CYAN, children: "\u2588" })] })] }));
+                            })(), keyPrompt && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: AMBER, paddingX: 1, marginTop: 1, width: barWidth, children: [_jsxs(Text, { color: AMBER, bold: true, children: ["API key for ", keyPrompt.provider] }), _jsx(Text, { color: MUTED, children: "Paste it and press enter, or ctrl+v to read the clipboard. Held in memory for this session only; esc to cancel." }), keyPrompt.note && _jsx(Text, { color: CYAN, children: keyPrompt.note }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: MUTED, children: [keyPrompt.env, ": "] }), _jsx(Text, { color: INK, children: '*'.repeat(Math.min(keyPrompt.value.length, 48)) }), _jsx(Text, { color: CYAN, children: "\u2588" }), keyPrompt.value.length > 0 && (_jsxs(Text, { color: DIM, children: ["  ", keyPrompt.value.length, " characters"] }))] })] })), ask && (() => {
+                                let detail = '';
+                                let isCommand = false;
+                                try {
+                                    const parsed = JSON.parse(ask.args);
+                                    if (parsed['command'] !== undefined) {
+                                        detail = String(parsed['command']);
+                                        isCommand = true;
+                                    }
+                                    else
+                                        detail = String(parsed['path'] ?? parsed['source'] ?? '');
+                                }
+                                catch { /* show the tool alone */ }
+                                const options = askOptions(ask.tool, ask.prefix);
+                                /*
+                                 * The whole command, wrapped onto its own lines.
+                                 *
+                                 * It was `detail.slice(0, 200)` on the same line as the tool name, so a real command — a cd
+                                 * into a directory, an artisan call with a quoted PHP expression — arrived cut off mid-flight
+                                 * with nothing saying it had been cut. A command you cannot read is one you cannot honestly
+                                 * approve, and that is the whole point of asking. So it wraps instead of truncating, sits
+                                 * indented under a line that says what is about to happen, and if it is genuinely enormous
+                                 * the remainder is counted out loud rather than dropped in silence.
+                                 */
+                                const room = Math.max(24, Math.min(barWidth, 100) - 8);
+                                const SHOW_AT_MOST = 1200;
+                                const shown = detail.slice(0, SHOW_AT_MOST);
+                                const cut = detail.length - shown.length;
+                                const detailLines = shown
+                                    ? wrapPreserving(shown, room).map(l => '  ' + l)
+                                    : [];
+                                const lines = [
+                                    detail
+                                        ? `**${ask.tool}** wants to ${isCommand ? 'run' : 'touch'}:`
+                                        : `**${ask.tool}** wants to run.`,
+                                    ...(detailLines.length ? ['', ...detailLines] : []),
+                                    ...(cut > 0 ? [`  *… and ${cut} more characters*`] : []),
+                                    '',
+                                    ...options.map((o, i) => `${i === ask.choice ? `**${G.caret} ${o.key}**` : `  ${o.key}`}  ${o.label}`),
+                                    '',
+                                    ask.waiting > 0
+                                        ? `*type the number, or arrows and enter · ${ask.waiting} more waiting*`
+                                        : '*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 }) }));
+                            })()] }), diffPanelOpen && (_jsx(DiffPanel, { files: liveDiffs, width: diffPanelWidth, height: Math.max(4, frameRows - 6) }))] }), _jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: busy ? DIM : CYAN, paddingX: 1, width: barWidth, flexShrink: 0, children: [_jsxs(Text, { color: CYAN, bold: true, children: [G.caret, " "] }), _jsx(Text, { color: INK, children: draft.slice(0, caret) }), busy
                         ? _jsx(Text, { color: INK, children: draft.slice(caret) })
                         : caret < draft.length
                             ? _jsxs(_Fragment, { children: [_jsx(Text, { backgroundColor: CYAN, color: "#10222A", children: draft[caret] }), _jsx(Text, { color: INK, children: draft.slice(caret + 1) })] })