koneck 2.25.1 → 2.25.3

package/dist/ink-chat.js

@@ -8,10 +8,12 @@ import { generateSessionId, saveSession, listSessions, loadSession } from './ses
 import { loadMemory } from './memory.js';
 import { loadKoneckConfig, saveKoneckConfig, setConfigKey, configKeyDescriptions, CONFIG_FILE } from './config-store.js';
 import { PROVIDERS, resolveProvider, getApiKey, addUserProvider, userProvidersPath } from './providers.js';
-import { listCheckpoints, revertCheckpoint } from './checkpoint.js';
+import { listCheckpoints, revertCheckpoint, snapshotTree, filesTouchedBy } from './checkpoint.js';
+import { fileDiff, diffSummary } from './diff-view.js';
+import { bar, humanTokens, humanDuration, diffStatSince, modelInfoFrom, contextWindowFor, recordStatus, classifyResponse, stateLabel, readModelStatus, } from './usage.js';
 import { Markdown, Panel } from './markdown-ink.js';
 import { fetchUpdateStatus, updateCommand } from './update-check.js';
-import { readFileSync } from 'fs';
+import { readFileSync, statSync } from 'fs';
 import { fileURLToPath } from 'url';
 import path from 'path';
 /** Read once at load so the running version can always be shown without a lookup per render. */
@@ -32,6 +34,13 @@ const AMBER = '#F6C453';
 const MUTED = '#9AAAB2';
 const INK = '#F4F1EA';
 const DIM = '#5C717A';
+// Diff colours. Deliberately not terminal green/red: those clash with the warm palette and read
+// as errors. These are the existing accents lifted a little, over bands dark enough to sit on a
+// black terminal without glowing.
+const DIFF_ADD = '#7FE3B0';
+const DIFF_ADD_BG = '#10291F';
+const DIFF_DEL = '#F2909B';
+const DIFF_DEL_BG = '#2B1419';
 // The user's message bar: light-on-dark, high contrast against the terminal ground so an
 // input is easy to find when scrolling back. Deliberately not the cyan used for KONECK.
 const USER_BG = '#3A434A';
@@ -235,6 +244,7 @@ const COMMANDS = [
     { cmd: '/mode', desc: 'Set mode: auto, plan or code' },
     { cmd: '/effort', desc: 'Set reasoning effort: low, medium, high, max (picker)' },
     { cmd: '/config', desc: 'View or set persistent config' },
+    { cmd: '/usage', desc: 'Usage, context, model status and limits (tabbed pane)' },
     { cmd: '/tokens', desc: 'Token usage breakdown' },
     { cmd: '/cost', desc: 'Session cost' },
     { cmd: '/memory', desc: 'Show project memory' },
@@ -255,6 +265,12 @@ const EFFORT_BLURB = {
     high: 'Thorough — covers edge cases, costs more tokens',
     max: 'Most rigorous analysis available; slowest and priciest',
 };
+/** Past this, a file is not read for diffing — the render would be useless anyway. */
+const MAX_DIFF_BYTES = 512 * 1024;
+/** One tool rarely touches more; the cap stops a bulk move from flooding scrollback. */
+const MAX_DIFF_FILES = 4;
+/** The tabs of the usage pane, in the order they are shown. */
+const USAGE_TABS = ['session', 'context', 'models', 'limits'];
 const MIN_REPLY_WIDTH = 24; // below this a table cannot render legibly anyway
 const PICKER_ROWS = 9; // visible rows; the list scrolls within this window
 /**
@@ -301,6 +317,7 @@ Slash commands:
   /mode [auto|plan|code] Show or set mode
   /effort [low|med|high|max] Set reasoning effort
   /config [key] [value] View or set persistent config
+  /usage                Usage pane: session, context, models, limits
   /tokens               Show token usage breakdown
   /cost                 Show session cost
   /memory               Show .koneck/MEMORY.md
@@ -326,6 +343,8 @@ function App({ config: initialConfig }) {
     // instead of calling setState per token keeps a Raspberry Pi from re-rendering on every chunk.
     const sayRef = useRef(''); // narration not yet committed
     const liveToolRef = useRef(null); // the one tool still running
+    /** Pre-edit contents of the files the running tool said it would touch. */
+    const pendingDiffRef = useRef([]);
     const charsRef = useRef(0); // streamed chars, for the live token estimate
     const realTokRef = useRef(0); // real output tokens this turn, once the provider reports usage
     const tokBaseRef = useRef(0); // session output-token count at the start of this turn
@@ -344,25 +363,73 @@ function App({ config: initialConfig }) {
         if (text !== '')
             setRows(prev => [...prev, { role: 'steps', steps: [{ kind: 'say', text }] }]);
     }
+    /**
+     * Reads a file for diffing, or null if it is absent or too big to be worth showing. Reading is
+     * synchronous on purpose: the tool runs the instant this callback returns, so an await here
+     * would race the very write it is trying to photograph.
+     */
+    function readForDiff(rel) {
+        try {
+            const abs = path.resolve(cfg.cwd, rel);
+            if (statSync(abs).size > MAX_DIFF_BYTES)
+                return null;
+            return readFileSync(abs, 'utf-8');
+        }
+        catch {
+            return null; // absent: a creation, which fileDiff renders as such
+        }
+    }
     function pushTool(name, args) {
         commitSay();
+        // Photograph every file this tool has announced it will touch, before it touches it.
+        pendingDiffRef.current = filesTouchedBy(name, args).slice(0, MAX_DIFF_FILES)
+            .map(rel => ({ rel, before: readForDiff(rel) }));
         liveToolRef.current = { kind: 'tool', name, detail: toolDetail(name, args), startedAt: Date.now() };
     }
     function finishTool(name, ok, ms) {
         if (!ok)
             turnRecoveredRef.current = true;
         const live = liveToolRef.current;
+        const pending = pendingDiffRef.current;
         liveToolRef.current = null;
+        pendingDiffRef.current = [];
         if (!live)
             return;
-        const done = { ...live, endedAt: live.startedAt + ms, ok };
+        // A failed tool leaves the file as it was, so there is nothing to show.
+        const diffs = ok
+            ? pending
+                .map(({ rel, before }) => fileDiff(rel, before, readForDiff(rel)))
+                .filter(d => !d.unchanged)
+            : [];
+        const done = { ...live, endedAt: live.startedAt + ms, ok, ...(diffs.length ? { diffs } : {}) };
         setRows(prev => [...prev, { role: 'steps', steps: [done] }]);
     }
+    /**
+     * Moves the agent panel into scrollback once the turn is over. The live panel is transient by
+     * design — it repaints — so without this the record of what the agents did would scroll away
+     * with the last repaint and leave nothing behind.
+     */
+    function flushAgents() {
+        const list = agentsRef.current;
+        if (list.length === 0)
+            return;
+        agentsRef.current = [];
+        setAgents([]);
+        const done = list.filter(a => a.status === 'done').length;
+        const failed = list.filter(a => a.status === 'failed').length;
+        const tokens = list.reduce((n, a) => n + a.tokens, 0);
+        // The elapsed span is the longest agent, not the sum: they ran at the same time.
+        const span = Math.max(...list.map(a => (a.endedAt ?? Date.now()) - a.startedAt));
+        addRow({ role: 'steps', steps: [{ kind: 'say', text: `${list.length} parallel agents finished — ${done} succeeded` +
+                        (failed ? `, ${failed} failed` : '') +
+                        ` · ${humanTokens(tokens)} tokens · ${fmtElapsed(span)}` }] });
+    }
     // Session Promise is created eagerly at mount so it resolves before the user's first message.
     const sessionOpts = {
         onChunk: (text) => pushSay(text),
         onToolCall: (name, args) => pushTool(name, args),
         onToolResult: (name, ok, ms) => finishTool(name, ok, ms),
+        onAgentProgress: (list) => { agentsRef.current = list; setAgents(list); },
         onTokens: (s) => {
             realTokRef.current = Math.max(0, s.completionTokens - tokBaseRef.current);
         },
@@ -388,6 +455,22 @@ function App({ config: initialConfig }) {
     const busRef = useRef(null);
     const [stats, setStats] = useState({ turns: 0, promptTokens: 0, completionTokens: 0, totalTokens: 0 });
     const [lastAgentText, setLastAgentText] = useState('');
+    // Usage accounting. Wall clock is what a user waited; API time is what the model was actually
+    // thinking, and the gap between the two is where local tool work lives.
+    const sessionStartRef = useRef(Date.now());
+    const apiMsRef = useRef(0);
+    /** Tree hash captured at startup, so "code changes" is a diff rather than a running tally. */
+    const baseTreeRef = useRef(null);
+    const [usagePane, setUsagePane] = useState(null);
+    // undefined while the diff is still being computed, null once git has said there is nothing to
+    // compare against. Collapsing the two would flash "not a git repo" at every open.
+    const [usageDiff, setUsageDiff] = useState(undefined);
+    const [modelCatalog, setModelCatalog] = useState([]);
+    /** Live state of parallel sub-agents. Empty except while spawn_agents is running. */
+    const [agents, setAgents] = useState([]);
+    // Mirrored in a ref because the turn's exit paths run inside a closure that would otherwise
+    // see the state as it was when the turn began.
+    const agentsRef = useRef([]);
     // Masked credential entry. The value is held in component state for the session and passed
     // to the client as a runtime override — KONECK never writes it to disk, and it is never put
     // into a transcript row, so it cannot end up in a saved session file.
@@ -522,6 +605,9 @@ function App({ config: initialConfig }) {
         }, 150);
         return () => clearInterval(id);
     }, [busy]);
+    // The tree as it stood before the session touched anything. Recorded once, so "code changes"
+    // stays a comparison against the starting point however long the session runs.
+    useEffect(() => { void snapshotTree(cfg.cwd).then(t => { baseTreeRef.current = t; }); }, [cfg.cwd]);
     const addRow = (row) => setRows(prev => [...prev, row]);
     const addSystem = (text) => addRow({ role: 'system', text });
     async function getSession() {
@@ -618,6 +704,31 @@ function App({ config: initialConfig }) {
             addSystem(`Could not resume ${id}: ${e instanceof Error ? e.message : String(e)}`);
         }
     }
+    /**
+     * Opens the usage pane and refreshes the two figures that go stale: the working-tree diff and
+     * the model catalogue. Both are cheap enough to redo on open and wrong enough to matter if
+     * cached, so neither is held across openings.
+     */
+    async function openUsagePane(tab) {
+        setUsagePane(tab);
+        void diffStatSince(cfg.cwd, baseTreeRef.current).then(setUsageDiff);
+        if (modelCatalog.length === 0)
+            void loadModelCatalog();
+    }
+    /** The provider's own model listing, kept so the models tab and picker agree on the facts. */
+    async function loadModelCatalog() {
+        try {
+            const page = await buildClient(cfg).models.list();
+            const infos = page.data
+                .map(m => modelInfoFrom(m, cfg.provider))
+                .filter(m => m.id);
+            setModelCatalog(infos);
+            return infos;
+        }
+        catch {
+            return []; // the pane says so rather than showing zeroes
+        }
+    }
     /** Opens the update panel, checking the registry each time it is opened deliberately. */
     async function openUpdatePane() {
         setUpdatePane({ current: VERSION, latest: null, behind: false, manager: 'npm' });
@@ -643,18 +754,33 @@ function App({ config: initialConfig }) {
         }
     }
     /** Live model list from the connected provider's OpenAI-compatible /models endpoint. */
+    /**
+     * The model list, annotated with what is actually known about each entry: whether the provider
+     * prices it at zero, how much context it takes, and whether it answered the last time it was
+     * asked. Choosing a model blind is how a session ends up on one that is out of credit.
+     */
     async function fetchModels() {
-        const client = buildClient(cfg);
-        const page = await client.models.list();
-        const ids = page.data.map(m => m.id).filter(Boolean).sort((a, b) => a.localeCompare(b));
-        return ids.map(id => ({
-            value: id,
-            label: id,
-            // Grouping by vendor prefix turns a flat 115-entry list into something scannable.
-            group: id.includes('/') ? id.split('/')[0] : cfg.provider,
-            desc: '',
-            current: id === cfg.model,
-        }));
+        const infos = await loadModelCatalog();
+        const statuses = readModelStatus();
+        return [...infos]
+            .sort((a, b) => a.id.localeCompare(b.id))
+            .map(m => {
+            const st = statuses[`${cfg.provider}:${m.id}`];
+            const parts = [
+                m.free ? 'free' : 'paid',
+                ...(m.contextLength ? [`${humanTokens(m.contextLength)} ctx`] : []),
+                ...(m.toolCalling === false ? ['no tools'] : []),
+                ...(st && st.state !== 'ok' ? [stateLabel(st.state)] : st ? ['ready'] : []),
+            ];
+            return {
+                value: m.id,
+                label: m.id,
+                // Grouping by vendor prefix turns a flat 447-entry list into something scannable.
+                group: m.vendor,
+                desc: parts.join(' · '),
+                current: m.id === cfg.model,
+            };
+        });
     }
     function providerItems() {
         return Object.values(PROVIDERS).map(p => ({
@@ -834,6 +960,11 @@ function App({ config: initialConfig }) {
                 addSystem(`Effort → ${arg}`);
                 return;
             }
+            case '/usage': {
+                const wanted = USAGE_TABS.find(t => t.startsWith(arg.trim().toLowerCase()));
+                await openUsagePane(wanted ?? 'session');
+                return;
+            }
             case '/tokens': {
                 addSystem(`Prompt     : ${stats.promptTokens.toLocaleString()}\n` +
                     `Completion : ${stats.completionTokens.toLocaleString()}\n` +
@@ -1208,7 +1339,7 @@ function App({ config: initialConfig }) {
     useInput((input, key) => {
         // Esc abandons the turn in flight and hands the keyboard straight back. The composer is
         // deliberately left alone: cancelling should not cost whatever was typed while waiting.
-        if (key.escape && busy && !picker && !keyPrompt && !updatePane) {
+        if (key.escape && busy && !picker && !keyPrompt && !updatePane && !usagePane) {
             abortRef.current?.abort();
             return;
         }
@@ -1312,6 +1443,20 @@ function App({ config: initialConfig }) {
             }
             return;
         }
+        // Inside the usage pane: the arrows walk the tabs and escape closes it. This sits ahead of
+        // the composer's own arrow handling, which would otherwise move the caret behind the pane.
+        if (usagePane) {
+            if (key.escape) {
+                setUsagePane(null);
+                return;
+            }
+            if (key.leftArrow || key.rightArrow) {
+                const at = USAGE_TABS.indexOf(usagePane);
+                const next = (at + (key.rightArrow ? 1 : USAGE_TABS.length - 1)) % USAGE_TABS.length;
+                void openUsagePane(USAGE_TABS[next]);
+                return;
+            }
+        }
         // Shift+U → the update and guide panel.
         if (key.shift && (input === 'U' || input === 'u')) {
             if (updatePane) {
@@ -1498,6 +1643,7 @@ function App({ config: initialConfig }) {
                     if (controller.signal.aborted) {
                         sayRef.current = '';
                         liveToolRef.current = null;
+                        flushAgents();
                         addRow({ role: 'system', text: `Cancelled after ${fmtElapsed(Date.now() - started)}. Anything already done is above; ` +
                                 'your composer is untouched.' });
                         setAgentState('ready');
@@ -1510,7 +1656,12 @@ function App({ config: initialConfig }) {
                     const content = last && typeof last.content === 'string'
                         ? last.content : 'Task finished with no written response.';
                     setLastAgentText(content);
+                    flushAgents();
                     const elapsed = Date.now() - started;
+                    apiMsRef.current += elapsed;
+                    // A turn that completed is the only proof a model actually works that costs nothing
+                    // extra to collect, so the catalogue learns from ordinary use rather than from probes.
+                    recordStatus(`${cfg.provider}:${cfg.model}`, 'ok');
                     setStats({
                         turns: active.stats.turns,
                         promptTokens: active.stats.promptTokens,
@@ -1534,10 +1685,18 @@ function App({ config: initialConfig }) {
                     const detail = error instanceof Error ? error.message : String(error);
                     const cancelled = abortRef.current?.signal.aborted === true
                         || /abort/i.test(detail) || /interrupt/i.test(detail);
+                    // A real failure says something about the model — out of credit, rate limited, not
+                    // actually served. Recording it means the models list can warn before the next attempt.
+                    if (!cancelled) {
+                        const state = classifyResponse(undefined, detail);
+                        if (state !== 'ok')
+                            recordStatus(`${cfg.provider}:${cfg.model}`, state, detail.slice(0, 120));
+                    }
                     // Keep any narration that arrived before the failure — it is often the best clue.
                     const trailing = sayRef.current.trim();
                     sayRef.current = '';
                     liveToolRef.current = null;
+                    flushAgents();
                     setRows(prev => [
                         ...prev,
                         ...(trailing ? [{ role: 'steps', steps: [{ kind: 'say', text: trailing }] }] : []),
@@ -1589,6 +1748,29 @@ function App({ config: initialConfig }) {
     // Live output token count: real usage when the provider reports it, else a char estimate
     const liveTokens = Math.max(realTokRef.current, Math.round(charsRef.current / 4));
     /** Renders one activity step. Shared by the live view and committed scrollback so they match. */
+    /**
+     * A file change, drawn the way a diff is read: a gutter of line numbers, a sign, and the line
+     * itself on a tinted band. Every rendered line is padded to the same width so the tint forms a
+     * solid block rather than a ragged edge, which is what makes an added run legible at a glance.
+     */
+    const renderDiff = (d, key) => {
+        const numbers = d.hunks.flatMap(h => h.lines.map(l => l.after ?? l.before ?? 0));
+        const gutter = Math.max(2, String(Math.max(0, ...numbers)).length);
+        const width = Math.max(24, barWidth - gutter - 8);
+        const header = d.created ? 'new file' : d.deleted ? 'deleted' : diffSummary(d);
+        return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: CYAN, children: d.path }), _jsx(Text, { color: d.created ? DIFF_ADD : d.deleted ? DIFF_DEL : MUTED, children: header })] }), d.binary
+                    ? _jsx(Text, { color: DIM, children: '  binary file - not shown' })
+                    : d.hunks.map((hunk, hi) => (_jsxs(Box, { flexDirection: "column", children: [hi > 0 && _jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ..."] }), hunk.lines.map((l, li) => {
+                                const shown = l.kind === 'del' ? l.before : l.after;
+                                const sign = l.kind === 'add' ? '+' : l.kind === 'del' ? '-' : ' ';
+                                const fg = l.kind === 'add' ? DIFF_ADD : l.kind === 'del' ? DIFF_DEL : MUTED;
+                                const bg = l.kind === 'add' ? DIFF_ADD_BG : l.kind === 'del' ? DIFF_DEL_BG : undefined;
+                                // Tabs would make the tinted block a ragged width, so they are expanded.
+                                const body = `${sign} ${l.text}`.replace(/\t/g, '  ');
+                                const cell = body.length > width ? body.slice(0, width - 3) + '...' : body.padEnd(width);
+                                return (_jsxs(Box, { children: [_jsxs(Text, { color: DIM, children: [String(shown ?? '').padStart(gutter), " "] }), _jsx(Text, { color: fg, ...(bg ? { backgroundColor: bg } : {}), children: cell })] }, li));
+                            })] }, hi))), d.hiddenLines > 0 && (_jsxs(Text, { color: DIM, children: [' '.repeat(gutter), "  ... ", d.hiddenLines, " more changed lines"] }))] }, key));
+    };
     const renderStep = (step, key) => {
         if (step.kind === 'say') {
             return (_jsxs(Box, { marginTop: 1, gap: 1, children: [_jsx(Text, { color: CYAN, children: "\u25CF" }), _jsx(Text, { color: INK, children: step.text.trim() })] }, key));
@@ -1597,7 +1779,7 @@ function App({ config: initialConfig }) {
         const ms = (step.endedAt ?? Date.now()) - step.startedAt;
         const glyph = running ? SPINNER[spinFrame] : step.ok === false ? '✖' : '✓';
         const color = running ? AMBER : step.ok === false ? CRIMSON : GREEN;
-        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] }))] }, key));
+        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (step.diffs ?? []).length === 0 && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] })), (step.diffs ?? []).map((d, i) => renderDiff(d, i))] }, key));
     };
     return (_jsxs(Box, { flexDirection: "column", width: uiWidth, paddingX: 2, children: [showAnalytics && (_jsxs(Box, { borderStyle: "round", borderColor: AMBER, paddingX: 1, marginBottom: 1, flexDirection: "column", width: barWidth, children: [_jsx(Text, { color: AMBER, bold: true, children: "\u25C6 Session Analytics" }), _jsxs(Text, { color: MUTED, children: ["Turns      : ", _jsx(Text, { color: INK, children: stats.turns })] }), _jsxs(Text, { color: MUTED, children: ["Prompt tok : ", _jsx(Text, { color: INK, children: stats.promptTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Output tok : ", _jsx(Text, { color: INK, children: stats.completionTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Total tok  : ", _jsx(Text, { color: INK, children: stats.totalTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Model      : ", _jsx(Text, { color: INK, children: modelShort }), "  Provider: ", _jsx(Text, { color: INK, children: cfg.provider })] }), _jsx(Text, { color: DIM, children: "Tab to close" })] })), _jsx(Static, { items: rows, children: (row, index) => row.role === 'header' ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "KONECK  /  SOFTWARE DELIVERY SYSTEM" }), _jsx(Text, { color: MUTED, children: "Deliberate engineering, with control at every change." })] }), _jsx(Panel, { width: barWidth, color: CYAN, title: "KONECK", children: [`MODEL: \`${modelShort}\`   PROVIDER: \`${cfg.provider}\`   WORKSPACE: \`${workspace}\``] })] }, index)) : row.role === 'user' ? (
                 // Painted as a filled bar so the user's own words are the most findable thing
@@ -1607,9 +1789,144 @@ function App({ config: initialConfig }) {
                 // content, so the right edge stepped in and out; and a box inside a box left
                 // markdown tables needlessly narrow. A marker plus the content reads better and
                 // cannot misalign, which is how Claude Code presents its own answers.
-                _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "\uA7B0K" }), _jsx(Box, { flexDirection: "column", children: _jsx(Markdown, { text: row.text ?? '', width: barWidth - 3 }) })] }), row.tokens != null && (_jsxs(Text, { color: MUTED, children: [_jsx(Text, { color: GREEN, children: "* " }), row.done ?? 'Done', " in ", fmtElapsed(row.elapsed ?? 0), '  |  ', row.tokens, " tokens", '  |  ', cfg.provider, " ", modelShort] }))] }, index)) }), _jsx(Box, { flexDirection: "column", children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && renderStep({ kind: 'say', text: tailLines(sayRef.current, 2, replyWidth) }, 0), liveToolRef.current && renderStep(liveToolRef.current, 1), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [SPINNER[spinFrame], " "] }), _jsx(Shimmer, { text: workWord(elapsedMs, spinWord, turnRecoveredRef.current)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", liveTokens > 0
+                _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: "\uA7B0K" }), _jsx(Box, { flexDirection: "column", children: _jsx(Markdown, { text: row.text ?? '', width: barWidth - 3 }) })] }), row.tokens != null && (_jsxs(Text, { color: MUTED, children: [_jsx(Text, { color: GREEN, children: "* " }), row.done ?? 'Done', " in ", fmtElapsed(row.elapsed ?? 0), '  |  ', row.tokens, " tokens", '  |  ', cfg.provider, " ", modelShort] }))] }, index)) }), _jsx(Box, { flexDirection: "column", children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && renderStep({ kind: 'say', text: tailLines(sayRef.current, 2, replyWidth) }, 0), liveToolRef.current && renderStep(liveToolRef.current, 1), agents.length > 0 && (() => {
+                            const done = agents.filter(a => a.status !== 'running').length;
+                            const failed = agents.filter(a => a.status === 'failed').length;
+                            const tokens = agents.reduce((n, a) => n + a.tokens, 0);
+                            const started = Math.min(...agents.map(a => a.startedAt));
+                            // The task text is clipped to whatever is left after the fixed columns, so a long
+                            // task never wraps and breaks the alignment of the rows under it.
+                            const taskWidth = Math.max(16, barWidth - 34);
+                            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, children: "\u25C6" }), _jsxs(Text, { color: INK, bold: true, children: [agents.length, " agents"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsxs(Text, { color: done === agents.length ? GREEN : AMBER, children: [done, "/", agents.length, " complete"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsxs(Text, { color: MUTED, children: [humanTokens(tokens), " tok"] }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(Date.now() - started) }), failed > 0 && _jsxs(Text, { color: CRIMSON, children: ["\u00B7 ", failed, " failed"] })] }), agents.map(a => {
+                                        const glyph = a.status === 'running' ? SPINNER[spinFrame]
+                                            : a.status === 'failed' ? '✖' : '✓';
+                                        const color = a.status === 'running' ? AMBER
+                                            : a.status === 'failed' ? CRIMSON : GREEN;
+                                        const took = (a.endedAt ?? Date.now()) - a.startedAt;
+                                        const task = a.task.length > taskWidth ? a.task.slice(0, taskWidth - 3) + '...' : a.task;
+                                        return (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: DIM, children: String(a.index + 1).padStart(2) }), _jsx(Text, { color: a.status === 'running' ? INK : MUTED, children: task.padEnd(taskWidth) }), _jsx(Text, { color: DIM, children: humanTokens(a.tokens).padStart(6) }), _jsx(Text, { color: DIM, children: fmtElapsed(took).padStart(6) })] }, a.index));
+                                    })] }));
+                        })(), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsxs(Text, { color: GREEN, children: [SPINNER[spinFrame], " "] }), _jsx(Shimmer, { text: workWord(elapsedMs, spinWord, turnRecoveredRef.current)[0], frame: shimmerFrame, base: MUTED }), _jsx(Text, { color: MUTED, children: "\u2026 " }), _jsxs(Text, { color: DIM, children: ["(", fmtElapsed(elapsedMs), " | ", liveTokens > 0
                                                 ? `${fmtTokens(liveTokens)} tokens`
-                                                : elapsedMs > 20_000 ? 'waiting for the first token' : 'starting', ")"] })] }) }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), updatePane && (() => {
+                                                : elapsedMs > 20_000 ? 'waiting for the first token' : 'starting', ")"] })] }) }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), usagePane && (() => {
+                const width = Math.min(barWidth, 66);
+                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 === '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) {
+                        // Prompt tokens on the last turn approximate what is resident: history plus system
+                        // prompt plus tool results, which is exactly what fills a window.
+                        const used = stats.promptTokens;
+                        lines.push(...meter(used / window, `${humanTokens(used)} of ${humanTokens(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(`Last turn sent ${humanTokens(stats.promptTokens)} and received ${humanTokens(stats.completionTokens)}.`);
+                }
+                if (usagePane === 'models') {
+                    const statuses = readModelStatus();
+                    lines.push(`**Models** — ${cfg.provider}`, '');
+                    if (modelCatalog.length === 0) {
+                        lines.push('Could not read the model list from this provider.');
+                    }
+                    else {
+                        const free = modelCatalog.filter(m => m.free);
+                        // 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}`);
+                        lines.push(`Free               ${free.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) {
+                            lines.push(`  ${current.free ? 'free' : 'paid'}` +
+                                (current.contextLength ? ` · ${humanTokens(current.contextLength)} context` : '') +
+                                (current.maxOutput ? ` · ${humanTokens(current.maxOutput)} max out` : '') +
+                                (current.toolCalling === false ? ' · no tool calling' : ''));
+                        }
+                        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('**←/→** 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}**`);