koneck 2.128.33 → 2.128.35

package/dist/ink-chat.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useState, useEffect, useRef } from 'react';
 import { Box, Static, Text, render, useApp, useInput, useStdin } from 'ink';
 import { execa } from 'execa';
+import chalk from 'chalk';
 import { resolveAgentConcurrency, toolsUnsupportedNotice } from './engine-facts.js';
 import { withSynchronizedFrames, probeSynchronizedOutput } from './frame-sync.js';
 import { pacedInterval, startingInterval, floorFor, shouldDrawFrame } from './frame-pace.js';
@@ -48,6 +49,7 @@ import { startBus, listSessions as listBusSessions, resolveTarget, deliver, } fr
 import { MODES as MODE_SPECS, modeSpec, decide, loadRules, saveRules, addRule, commandPrefixSuggestion, describeRule, ruleMatches, toolRisk, isReadOnlyCommand, } from './permissions.js';
 import { AskQueue } from './ask-queue.js';
 import { planSummary } from './plan.js';
+import { savePlan, plansDir, PLAN_CHOICES, PROCEED_PROMPT } from './plan-file.js';
 import { logoFor } from './logo.js';
 import { describeActivity } from './activity.js';
 import { redactSecrets, containsSecret } from './redact.js';
@@ -502,6 +504,41 @@ export const WORD_HOLD_MS = 60_000;
  * appears frozen for seven seconds is worse than either.
  */
 export const HEARTBEAT_MS = 1_000;
+/**
+ * One row of the fork tree: the task on the left, what it has cost on the right.
+ *
+ * Right-aligning the cost is the whole point of doing this by hand. Laid out as flex siblings the
+ * numbers sat wherever the task text left them, so a column of forks had its timings in a ragged
+ * diagonal and could not be read down. Composed into one string they line up at the right edge —
+ * and it is one node per row rather than five, which is what a live list of eight agents can
+ * afford to repaint.
+ *
+ * The task gives way first: it is the part a reader can still recognise from its opening words,
+ * while a truncated token count is worth nothing at all.
+ */
+/** The width of what precedes the task on a fork row: a status glyph, a space, and "fork  ". */
+export const FORK_LEAD = 8;
+export function forkRow(task, meta, width, indent = FORK_LEAD) {
+    /*
+     * Nothing here may add up to more than the width it was given.
+     *
+     * The first version floored the task at eight columns and the gap at one, which on a narrow
+     * terminal produced a row a character longer than the space it had. An overflowing row is not a
+     * cosmetic problem in this interface — it is how the live region grows past the window, and a
+     * live region past the window is what makes Ink wipe the whole terminal on every render.
+     *
+     * So the budget is spent in order of what is worth keeping: the cost first, because a truncated
+     * token count says nothing, then whatever is left goes to the task, which stays recognisable
+     * from its opening words. Where there is not even room for the cost, it is cut too — a row that
+     * fits and says less beats a row that says more and breaks the screen.
+     */
+    const avail = Math.max(0, width - indent);
+    const shownMeta = meta.length <= avail ? meta : meta.slice(0, avail);
+    const room = Math.max(0, avail - shownMeta.length - 1);
+    const shownTask = room > 0 ? fitCells(task, room, true) : '';
+    const gap = ' '.repeat(Math.max(0, avail - displayWidth(shownTask) - shownMeta.length));
+    return { task: shownTask, gap, meta: shownMeta };
+}
 /**
  * The cursor, drawn as a painted cell rather than as a character.
  *
@@ -635,6 +672,7 @@ const COMMANDS = [
     { cmd: '/thinking', desc: 'Show or hide the model\'s reasoning as it arrives' },
     { cmd: '/activity', desc: 'What the model has done this session, and what it is on now' },
     { cmd: '/trajectory', desc: 'Where the time went: per-request timings, tool durations, waits' },
+    { cmd: '/compact', desc: 'Summarise the conversation so far to free up context' },
     { cmd: '/update', desc: 'Check for a new version and update' },
     { cmd: '/name', desc: 'Name this session, so /resume can find it by name' },
     { cmd: '/fork', desc: 'Copy this session and continue on the copy' },
@@ -1225,6 +1263,7 @@ Type / on an empty line to browse every command; keep typing to filter.
 
 Slash commands:
   /help                 Show this help
+  /compact              Summarise the conversation so far to free up context
   /update               Updates and a key guide, in a side panel
   /models [filter]      Browse models from the connected provider and switch
   /connect [provider]   Connect a provider (picker when no name given)
@@ -1422,16 +1461,42 @@ export function initialAltScreen(cfg, compositesRedraws, stdout = process.stdout
  * 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.
  */
+/**
+ * One diff line, coloured, as a single string.
+ *
+ * It used to return one element per token, so a forty-row panel of ten-token lines handed Ink
+ * several hundred nodes to render and lay out on every frame. Measured on a Raspberry Pi 5 with
+ * two 200-line diffs: an open panel cost 281ms a repaint when the whole diff was built, 41ms once
+ * only the visible rows were, and 32ms once each line was one node instead of a box of them —
+ * against 1ms with the panel closed.
+ *
+ * A string is the end of that road: the colours are written into it with the same escapes Ink
+ * would have emitted, and the line becomes a single Text. It is also then cacheable, which is
+ * what makes a still panel free rather than merely cheap — the text of a finished edit does not
+ * change, so it is coloured once and read back on every frame after.
+ */
+const CODE_LINE_CACHE = new Map();
+const CODE_LINE_CACHE_MAX = 4000;
 function renderCodeLine(text, kind, width, lang) {
+    const key = `${kind}|${width}|${lang}|${text}`;
+    const hit = CODE_LINE_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
     const bg = kind === 'add' ? DIFF_ADD_BG : kind === 'del' ? DIFF_DEL_BG : undefined;
+    const paint = bg ? chalk.bgHex(bg) : chalk;
     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"));
+    const out = spans.map(sp => paint.hex(SYNTAX[sp.kind])(sp.text)).join('')
+        + (pad ? paint(pad) : '');
+    if (CODE_LINE_CACHE.size >= CODE_LINE_CACHE_MAX) {
+        const oldest = CODE_LINE_CACHE.keys().next().value;
+        if (oldest !== undefined)
+            CODE_LINE_CACHE.delete(oldest);
+    }
+    CODE_LINE_CACHE.set(key, out);
     return out;
 }
 /**
@@ -1450,10 +1515,7 @@ export function DiffPanel({ files, width, height, activity, activityRows = 0, sc
     // empty state was a single easy-to-miss line and looked as if `/diff` had done nothing.
     const inner = Math.max(20, width - 4);
     const bodyHeight = Math.max(1, height - 4 - activityRows);
-    // 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;
+    const rows = [];
     let shownFiles = 0;
     for (const d of [...files].reverse()) {
         /*
@@ -1464,57 +1526,72 @@ export function DiffPanel({ files, width, height, activity, activityRows = 0, sc
          * blank line as the only separation two files' diffs ran together and the filename headers had
          * nothing to sit under. Drawn only between files, never above the first.
          */
-        if (shownFiles > 0) {
-            body.push(_jsx(Text, { color: DIM, children: '─'.repeat(inner) }, `r-${d.path}`));
-            used += 1;
-        }
+        if (shownFiles > 0)
+            rows.push({ t: 'rule', key: `r-${d.path}` });
         const numbers = d.hunks.flatMap(h => h.lines.map(l => l.after ?? l.before ?? 0));
         const gutter = Math.max(3, String(Math.max(0, ...numbers)).length);
         const codeWidth = Math.max(12, inner - gutter - 2);
         const lang = spanLangFor(d.path);
         const tag = d.created ? 'new' : d.deleted ? 'deleted' : `+${d.added}${d.removed ? ` -${d.removed}` : ''}`;
-        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;
+        rows.push({ t: 'head', key: `h-${d.path}`, path: d.path, tag, deleted: d.deleted });
         if (d.binary) {
-            body.push(_jsx(Text, { color: DIM, children: "  binary \u2014 not shown" }, `b-${d.path}`));
-            used += 1;
+            rows.push({ t: 'binary', key: `b-${d.path}` });
             shownFiles++;
             continue;
         }
         for (const [hi, hunk] of d.hunks.entries()) {
-            if (hi > 0) {
-                body.push(_jsx(Text, { color: DIM, children: `${' '.repeat(gutter)} ⋯` }, `g-${d.path}-${hi}`));
-                used += 1;
-            }
+            if (hi > 0)
+                rows.push({ t: 'gap', key: `g-${d.path}-${hi}`, gutter });
             for (const [li, l] of hunk.lines.entries()) {
-                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;
+                rows.push({
+                    t: 'line', key: `l-${d.path}-${hi}-${li}`, gutter, codeWidth, lang,
+                    shown: (l.kind === 'del' ? l.before : l.after) ?? undefined,
+                    sign: l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ',
+                    kind: l.kind, text: l.text,
+                });
             }
         }
         if (d.hiddenLines > 0) {
-            body.push(_jsx(Text, { color: DIM, children: `${' '.repeat(gutter)} ⋯ ${d.hiddenLines} more` }, `m-${d.path}`));
-            used += 1;
+            rows.push({ t: 'more', key: `m-${d.path}`, gutter, count: d.hiddenLines });
         }
         shownFiles++;
-        used += 1;
-        body.push(_jsx(Text, { children: " " }, `s-${d.path}`));
+        rows.push({ t: 'spacer', key: `s-${d.path}` });
     }
-    /*
-     * Built in full, then windowed — rather than stopping at the height, which is what it used to
-     * do. A panel that only ever builds what fits cannot be scrolled, because the rows below the
-     * fold were never made.
-     */
-    const maxScroll = Math.max(0, body.length - bodyHeight);
+    const maxScroll = Math.max(0, rows.length - bodyHeight);
     const from = Math.max(0, Math.min(scroll, maxScroll));
-    const shownRows = body.slice(from, from + bodyHeight);
+    const body = rows.slice(from, from + bodyHeight).map(r => {
+        switch (r.t) {
+            case 'rule':
+                return _jsx(Text, { color: DIM, children: '─'.repeat(inner) }, r.key);
+            case 'head':
+                return (_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsx(Text, { color: CYAN, wrap: "truncate-start", children: r.path }), _jsxs(Text, { color: r.deleted ? DIFF_DEL : DIFF_ADD, children: [" ", r.tag] })] }, r.key));
+            case 'binary':
+                return _jsx(Text, { color: DIM, children: "  binary \u2014 not shown" }, r.key);
+            case 'gap':
+                return _jsx(Text, { color: DIM, children: `${' '.repeat(r.gutter)} ⋯` }, r.key);
+            case 'more':
+                return _jsx(Text, { color: DIM, children: `${' '.repeat(r.gutter)} ⋯ ${r.count} more` }, r.key);
+            case 'spacer':
+                return _jsx(Text, { children: " " }, r.key);
+            default:
+                /*
+                 * One Text per line, with the pieces nested inside it, rather than a Box of siblings.
+                 *
+                 * A Box is a layout node: the engine measures and places it and every child. A Text with
+                 * Texts inside it is one node holding spans. With forty lines on screen and half a dozen
+                 * pieces each that is the difference between laying out two hundred and fifty nodes a
+                 * frame and laying out forty — and it is the same mistake that stranded the composer's
+                 * cursor on the first row, in a place where it costs time rather than correctness.
+                 */
+                return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: DIM, children: String(r.shown ?? '').padStart(r.gutter) }), _jsx(Text, { color: r.kind === 'add' ? DIFF_ADD : r.kind === 'del' ? DIFF_DEL : DIM, ...(r.kind !== 'ctx'
+                                ? { backgroundColor: r.kind === 'add' ? DIFF_ADD_BG : DIFF_DEL_BG } : {}), children: r.sign }), renderCodeLine(r.text, r.kind, r.codeWidth, r.lang)] }, r.key));
+        }
+    });
     const summary = files.length === 0
         ? 'no changes yet'
         : `${files.length} file${files.length === 1 ? '' : 's'} changed`
             + (maxScroll > 0 ? `  ${from > 0 ? `↑${from}` : ''}${from < maxScroll ? ` ↓${maxScroll - from}` : ''}`.trimEnd() : '');
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "round", borderColor: CYAN, paddingX: 1, flexShrink: 0, overflowY: "hidden", children: [_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsxs(Box, { children: [_jsx(Text, { color: INK, bold: true, children: summary }), added > 0 && _jsxs(Text, { color: DIFF_ADD, children: [" +", added] }), removed > 0 && _jsxs(Text, { color: DIFF_DEL, children: [" -", removed] })] }), _jsx(Text, { color: DIM, children: "/diff" })] }), activity && _jsxs(_Fragment, { children: [_jsx(Text, { color: DIM, children: '─'.repeat(inner) }), _jsx(Box, { flexDirection: "column", height: Math.max(1, activityRows - 1), overflowY: "hidden", children: activity })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflowY: "hidden", children: shownRows }), shownFiles < files.length && (_jsx(Text, { color: DIM, children: `… ${files.length - shownFiles} more file(s) changed` }))] }));
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "round", borderColor: CYAN, paddingX: 1, flexShrink: 0, overflowY: "hidden", children: [_jsxs(Box, { justifyContent: "space-between", width: inner, children: [_jsxs(Box, { children: [_jsx(Text, { color: INK, bold: true, children: summary }), added > 0 && _jsxs(Text, { color: DIFF_ADD, children: [" +", added] }), removed > 0 && _jsxs(Text, { color: DIFF_DEL, children: [" -", removed] })] }), _jsx(Text, { color: DIM, children: "/diff" })] }), activity && _jsxs(_Fragment, { children: [_jsx(Text, { color: DIM, children: '─'.repeat(inner) }), _jsx(Box, { flexDirection: "column", height: Math.max(1, activityRows - 1), overflowY: "hidden", children: activity })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflowY: "hidden", children: body }), shownFiles < files.length && (_jsx(Text, { color: DIM, children: `… ${files.length - shownFiles} more file(s) changed` }))] }));
 }
 /**
  * Exported for one reason: so a test can mount it.
@@ -1923,6 +2000,22 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
             // run is the record of what the agent thought it was doing.
             addRow({ role: 'plan', plan: next });
         },
+        /*
+         * Compaction is announced, because it is not a detail.
+         *
+         * It already ran on its own when the window filled — `onCompress` has been in the config all
+         * along and this interface never wired it, so the conversation was summarised and replaced
+         * underneath somebody mid-task with nothing on screen to say so. The next answer would then
+         * be missing something said an hour earlier and look like the model forgetting.
+         */
+        onCompress: (before, after, limit) => {
+            addSystem(`Context compacted — ${before} messages summarised into ${after}, to stay inside `
+                + `${limit.toLocaleString()} tokens. Earlier detail is now a summary; `
+                + '`/compact` forces this, and a new session starts clean.');
+        },
+        onCompactNoop: (reason) => {
+            addSystem(`Nothing was compacted — ${reason}.`);
+        },
         onChunk: (text) => pushSay(text),
         onToolCall: (name, args) => pushTool(name, args),
         /*
@@ -2517,6 +2610,14 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
         })();
     }, [effort]);
     const [showAnalytics, setShowAnalytics] = useState(false);
+    /**
+     * A finished plan, waiting to be answered.
+     *
+     * Plan mode used to end with the plan in the transcript and nothing else — you changed mode
+     * yourself and asked again, from memory, for the thing you had just read. This is the handover
+     * that was missing: the plan, where it was saved, and the obvious question.
+     */
+    const [planAsk, setPlanAsk] = useState(null);
     const [updatePane, setUpdatePane] = useState(null);
     /**
      * The version installed in the background, if one was; see auto-update.ts.
@@ -2561,6 +2662,26 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
     // kept the width it booted with until restarted.
     // `|| 80` not `?? 80`: a pty with no negotiated size reports 0 columns, and 0 would collapse
     // the layout to a single character.
+    /**
+     * Bumped to make <Static> write the whole transcript out again.
+     *
+     * Ink renders a Static item once and never touches it after, which is exactly what makes the
+     * transcript cheap — and also what leaves it wrapped to whatever the terminal was when it was
+     * written. Open KONECK in a small window, maximise it, and every finished row keeps the narrow
+     * shape it was born with while the composer and status bar spread to the new width. Reported
+     * exactly that way.
+     *
+     * A new key is a new Static as far as Ink is concerned, so it renders all of its items afresh.
+     * Paired with a clear, that re-flows the conversation to the width the window has now.
+     */
+    const [staticEpoch, setStaticEpoch] = useState(0);
+    /**
+     * The redraw, in a ref.
+     *
+     * The resize listener is attached once and outlives every render, so it cannot close over a
+     * function defined further down the component without holding the first one forever.
+     */
+    const redrawScreenRef = useRef(null);
     const [termCols, setTermCols] = useState(() => process.stdout.columns || 80);
     const [termRows, setTermRows] = useState(() => process.stdout.rows || 24);
     /** Optional user cap on the UI width. Undefined means fill the terminal. */
@@ -2618,8 +2739,21 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
     }
     useEffect(() => {
         const onResize = () => {
-            setTermCols(process.stdout.columns || 80);
+            const cols = process.stdout.columns || 80;
             setTermRows(process.stdout.rows || 24);
+            setTermCols(prev => {
+                /*
+                 * A width change re-flows the conversation; a height change does not need to.
+                 *
+                 * Rows already committed keep the wrapping they were written with, so widening the window
+                 * leaves the whole transcript in a narrow column beside a full-width composer. Redrawing
+                 * costs one clear and one re-emission, and a resize is not something that happens during
+                 * a keystroke.
+                 */
+                if (prev !== cols)
+                    redrawScreenRef.current?.();
+                return cols;
+            });
         };
         process.stdout.on('resize', onResize);
         return () => { process.stdout.off('resize', onResize); };
@@ -3074,6 +3208,7 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
      * it at all. It wipes the screen and its scrollback; the conversation is untouched, since it
      * lives in the session rather than in the terminal's memory of it.
      */
+    redrawScreenRef.current = redrawScreen;
     function redrawScreen() {
         if (!process.stdout.isTTY)
             return;
@@ -3085,6 +3220,9 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
         // is still in the buffer, and leaving it there means it comes back on the next scroll — and
         // home the cursor, which is where Ink will now draw.
         process.stdout.write('\u001b[2J\u001b[3J\u001b[H');
+        // The transcript has just been erased along with everything else, so it has to be written
+        // again — and writing it again is also what re-flows it to the current width.
+        setStaticEpoch(n => n + 1);
         // Ink writes a frame only when its content differs from the last one, and the content has not
         // changed — the screen it was drawn on has. Bumping this forces the write.
         setRepaint(n => n + 1);
@@ -4578,6 +4716,26 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                             + '`/altscreen on` moves them into a pinned panel instead.');
                 return;
             }
+            case '/compact': {
+                /*
+                 * Compacting on purpose, rather than waiting for the window to force it.
+                 *
+                 * The automatic kind exists to stop a request being rejected. This is the other reason:
+                 * a session about to change subject carries the whole of the last one into every turn to
+                 * come, and that is paid for on each request. Deferred to the next send because the
+                 * summary is itself a model call.
+                 */
+                const active = await getSession().catch(() => null);
+                if (!active) {
+                    addSystem('Nothing to compact yet — no turn has run in this session.');
+                    return;
+                }
+                active.compactNow();
+                addSystem('The conversation will be compacted before the next message, if there is '
+                    + 'anything to summarise — it will say either way. What was said stays as a '
+                    + 'summary; nothing is lost from the transcript above.');
+                return;
+            }
             case '/changes': {
                 try {
                     const [status, unstaged, staged] = await Promise.all([
@@ -5510,6 +5668,48 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                 answer(typed);
             return;
         }
+        /*
+         * A plan waiting for an answer owns the keyboard.
+         *
+         * Placed before the composer for the same reason the permission question is: an answer to a
+         * question on screen should not also be typed into a draft behind it. Escape puts it away
+         * without choosing, which leaves the plan in the transcript and the mode alone.
+         */
+        if (planAsk) {
+            if (key.escape) {
+                setPlanAsk(null);
+                addSystem('Left in plan mode. The plan is above'
+                    + (planAsk.file ? ` and saved to \`${planAsk.file}\`` : '')
+                    + ' — say what to change, or shift+tab to a mode that can act on it.');
+                return;
+            }
+            if (key.upArrow) {
+                setPlanAsk(p => (p ? { ...p, choice: Math.max(0, p.choice - 1) } : p));
+                return;
+            }
+            if (key.downArrow) {
+                setPlanAsk(p => (p ? { ...p, choice: Math.min(PLAN_CHOICES.length - 1, p.choice + 1) } : p));
+                return;
+            }
+            const typed = PLAN_CHOICES.findIndex(c => c.key === input);
+            const index = typed >= 0 ? typed : key.return ? planAsk.choice : -1;
+            if (index < 0)
+                return;
+            const chosen = PLAN_CHOICES[index];
+            setPlanAsk(null);
+            if (chosen.mode === null) {
+                addSystem('Tell it what to change, and it will plan again.');
+                return;
+            }
+            setMode(chosen.mode);
+            modeRef.current = chosen.mode;
+            addSystem(`Carrying out the plan in **${modeSpec(chosen.mode).label}** mode.`
+                + (planAsk.file ? `\nSaved to \`${planAsk.file}\`` : ''));
+            // The mode has to be in force before the turn starts, which is why it is set on the ref as
+            // well as in state — the turn reads the ref, and state has not settled by the time it does.
+            setTimeout(() => submitDraft(PROCEED_PROMPT), 0);
+            return;
+        }
         if (addProv) {
             if (key.escape) {
                 setAddProv(null);
@@ -6144,7 +6344,16 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                     const active = await getSession();
                     const persistentGoal = goalRef.current;
                     const prefix = (persistentGoal ? `[Persistent session goal: ${persistentGoal}]\n` : '') +
-                        modeSpec(mode).prefix +
+                        /*
+                         * The ref, not the state.
+                         *
+                         * This closure is made when the turn is submitted, and a mode chosen a moment earlier
+                         * is not in it — React has not re-rendered yet. Approving a plan set the mode to auto
+                         * and then sent the request with plan mode's prefix still attached: "you cannot write
+                         * files or run commands in this mode", to a model that had just been told to carry
+                         * the plan out. The permission checks already read the ref for exactly this reason.
+                         */
+                        modeSpec(modeRef.current).prefix +
                         (effort !== 'medium' ? `[Effort: ${effort}]\n` : '');
                     const controller = new AbortController();
                     abortRef.current = controller;
@@ -6227,6 +6436,22 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                         addSystem(incompleteRef.current);
                         incompleteRef.current = null;
                     }
+                    /*
+                     * A plan-mode turn ends with a question, not with silence.
+                     *
+                     * Only in plan mode, and only when something was actually written: the mode denies
+                     * writes and commands, so whatever came back is a proposal by construction. Saved
+                     * first, so the offer can name the file it is offering.
+                     */
+                    if (modeRef.current === 'plan' && content.trim() !== '') {
+                        // Under the session's state home, not always the real one: a run pointed at a
+                        // different directory should not write into the home directory behind it.
+                        const saved = await savePlan(content, {
+                            goal: goalRef.current, at: Date.now(),
+                            ...(cfg.stateHome ? { dir: plansDir(cfg.stateHome) } : {}),
+                        });
+                        setPlanAsk({ text: content, file: 'path' in saved ? saved.path : null, choice: 0 });
+                    }
                     setAgentState('completed');
                     setTimeout(() => setAgentState('ready'), 700);
                 }
@@ -6568,23 +6793,34 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                             //
                             // 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: renderRowCached(row, i) }, i))) })), altScreen && !ask && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — Ctrl+End follows live · Ctrl+Up/Down moves by section` })), 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: !ask && busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [!ask && 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)
+                            _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: renderRowCached(row, i) }, i))) })), altScreen && !ask && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — Ctrl+End follows live · Ctrl+Up/Down moves by section` })), 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) }, staticEpoch), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: !ask && busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [!ask && 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)))] })), !activityPanelOpen && 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 => {
+                                            /*
+                                             * A tree, because that is what it is.
+                                             *
+                                             * This was a flat list with its columns laid out as flex siblings, so the timings
+                                             * and token counts landed wherever each task's text happened to end — a ragged
+                                             * diagonal down the right-hand side that could not be read as a column. Naming the
+                                             * session as the root and the sub-agents as forks of it also says the thing the
+                                             * list left implicit: these are branches of the work you asked for, not separate
+                                             * conversations.
+                                             */
+                                            const width = Math.max(30, barWidth - 2);
+                                            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.length === 1 ? 'fork' : 'forks'] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsxs(Text, { color: done === agents.length ? GREEN : AMBER, children: [done, "/", agents.length, " done"] }), _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"] })] }), _jsxs(Text, { children: [_jsxs(Text, { color: CYAN, children: [G.ok === '✓' ? '●' : '*', " "] }), _jsx(Text, { color: INK, children: "main" })] }), 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));
+                                                        const meta = `${fmtElapsed(took)} · ${G.ok === '✓' ? '↓' : 'v'} ${humanTokens(a.tokens)} tokens`;
+                                                        const row = forkRow(a.task, meta, width, FORK_LEAD);
+                                                        // One Text, not a Box of them: five layout nodes per agent times eight agents
+                                                        // is a repaint cost for a list that changes every second anyway.
+                                                        return (_jsxs(Text, { children: [_jsxs(Text, { color: color, children: [glyph, " "] }), _jsx(Text, { color: DIM, children: "fork  " }), _jsx(Text, { color: a.status === 'running' ? INK : MUTED, children: row.task }), _jsx(Text, { children: row.gap }), _jsx(Text, { color: DIM, children: row.meta })] }, a.index));
                                                     })] }));
                                         })(), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [animate ? SPINNER[spinFrame] : '●', " "] }), _jsx(Shimmer, { text: workWord({
                                                             elapsedMs, tools: turnToolsRef.current,
@@ -6918,7 +7154,24 @@ export function App({ config: initialConfig, clearFrame, synchronizedFrames = fa
                                             : { 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(Cursor, {})] })] }));
-                            })(), 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(Cursor, {}), keyPrompt.value.length > 0 && (_jsxs(Text, { color: DIM, children: ["  ", keyPrompt.value.length, " characters"] }))] })] })), ask && (() => {
+                            })(), 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(Cursor, {}), keyPrompt.value.length > 0 && (_jsxs(Text, { color: DIM, children: ["  ", keyPrompt.value.length, " characters"] }))] })] })), planAsk && (() => {
+                                /*
+                                 * The question, straight after the plan rather than instead of it.
+                                 *
+                                 * The plan itself is already in the transcript above — repeating it here would push the
+                                 * choices off a short screen, which is the one thing this panel must not do. So it says
+                                 * where the plan was saved and asks.
+                                 */
+                                const lines = [
+                                    'A plan is ready. Carry it out?',
+                                    '',
+                                    ...PLAN_CHOICES.map((c, i) => i === planAsk.choice ? `**${G.caret} ${c.key}. ${c.label}**` : `  ${c.key}. ${c.label}`),
+                                    '',
+                                    'Up/down and enter, or press the number. Esc leaves it in plan mode.',
+                                    ...(planAsk.file ? [`Saved to \`${planAsk.file}\``] : ['This plan could not be written to disk.']),
+                                ];
+                                return (_jsx(Box, { marginTop: 1, children: _jsx(Panel, { width: Math.min(barWidth, 84), color: CYAN, title: "Plan ready", children: lines }) }));
+                            })(), ask && (() => {
                                 let detail = '';
                                 let isCommand = false;
                                 try {