@aragon-agent/cli 0.5.6 → 0.5.8

package/dist/ui/App.js

@@ -11,7 +11,7 @@ import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { initialViewState, reduceEvent, viewReducer, } from '../agent/reducer.js';
 import { mergeDeltas } from '../agent/coalesce.js';
 import { computeCost } from '../agent/usage.js';
-import { parseMaxTokensInput, DEFAULT_TRANSCRIPT_WINDOW, } from '../config/schema.js';
+import { parseMaxTokensInput, DEFAULT_TRANSCRIPT_RETAIN, DEFAULT_TRANSCRIPT_WINDOW, } from '../config/schema.js';
 import { updatePersistedConfig } from '../config/store.js';
 import { appendPrompt, loadPromptHistory } from '../config/prompt-history.js';
 import { bumpSubmitCount, setMouseNoticeSeen } from '../config/ui-state.js';
@@ -38,6 +38,9 @@ import { todoRailRows, todoRailWidth } from './layout/rail.js';
 import { TODO_LIMITS } from '../todo/limits.js';
 import { advanceBudget, decideFollowThrough, emptyBudget, } from '../todo/follow-through.js';
 import { useTerminalSize } from './layout/useTerminalSize.js';
+import { useHeightStore } from './use-height-store.js';
+import { useRenderGovernor } from './use-render-governor.js';
+import { setPerfResetHook, setPerfSnapshotProvider } from '../commands/perf.js';
 import { frameHeight, MIN_FULLSCREEN_ROWS } from './layout/frame.js';
 import { HINT_MIN_ROWS, viewportRows as computeViewportRows } from './layout/budget.js';
 import { UNMEASURED_GEOMETRY } from './layout/regions.js';
@@ -90,13 +93,23 @@ export function resolveSettingsMaxTokens(raw, previous) {
         toast: ['warn', 'Max tokens must be a number or "auto".'],
     };
 }
-/** Merge pending delta actions ~33 ms and flush the coalescer buffer. */
-const COALESCE_MS = 33;
 export function App({ controller, version, mode, initialOverlay, initialPrompt, confirmBridge, humanInputBridge, mouseSource, geometryOverride, }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const fullscreen = mode === 'fullscreen';
     const { rows, cols } = useTerminalSize();
+    // --- Render governor (tui-render-performance L4). ------------------------
+    //
+    // FIRST, BEFORE ANY OTHER WORK IN THIS BODY. The hook stamps
+    // `performance.now()` during render and reads it again in a layout effect, so
+    // the span it measures is only the whole commit if nothing precedes it here.
+    const cfg = controller.getConfig();
+    const governor = useRenderGovernor({
+        enabled: cfg.renderGovernor,
+        maxIntervalMs: cfg.maxRenderIntervalMs,
+    });
+    /** The transcript height cache, owned here and read by `TranscriptList` (L3). */
+    const heights = useHeightStore();
     const [state, dispatch] = useReducer(viewReducer, undefined, initialViewState);
     const [elapsedMs, setElapsedMs] = useState(0);
     const [confirmState, setConfirmState] = useState(null);
@@ -124,7 +137,6 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // the completion list are memoized against it, so a skill installed mid-session
     // gets its `/<name>` command and its autocomplete entry immediately.
     const [skillsNonce, setSkillsNonce] = useState(0);
-    const cfg = controller.getConfig();
     const caps = useMemo(() => {
         const detected = detectCapabilities(process.env, stdout);
         return {
@@ -149,6 +161,20 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     const pendingHuman = useRef(new Set());
     /** Written by `AppShell`'s layout effect, read at wheel-event time (§4.5). */
     const geometryRef = useRef(UNMEASURED_GEOMETRY);
+    /**
+     * What `/perf` reports. Assigned during render, exactly like `stateRef` above,
+     * because a slash command runs outside the render pass and a value captured in
+     * an effect closure would be one commit stale on every readout.
+     */
+    const perfRef = useRef(null);
+    /**
+     * How many entries `TranscriptList` actually mounted this frame.
+     *
+     * A ref written during the child's render, not state: this is the number
+     * `render-budget.test.tsx` gates on (AC-1 / AC-9), and turning it into state
+     * would make reading the render budget cost a render.
+     */
+    const mountedCount = useRef(0);
     // --- Follow-through (todo-plan-followthrough §3.4). ---------------------
     //
     // THREE REFS AND NO VIEW STATE, DELIBERATELY (§5.2). Every field added to
@@ -249,6 +275,8 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // --- Streaming coalescer + controller subscription. --------------------
     const pending = useRef([]);
     const flushTimer = useRef(null);
+    /** Alias so the subscription effect below reads one stable ref, not a hook. */
+    const governorInterval = governor.intervalMs;
     const flushPending = useCallback(() => {
         if (flushTimer.current) {
             clearTimeout(flushTimer.current);
@@ -276,7 +304,10 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
                 if (action.type === 'textDelta' || action.type === 'thinkingDelta') {
                     pending.current.push(action);
                     if (!flushTimer.current) {
-                        flushTimer.current = setTimeout(() => flushPending(), COALESCE_MS);
+                        // READ FROM THE REF AT ARM TIME (L4). This effect's dependency list
+                        // never changes by construction, so a captured number would be
+                        // pinned to the mount render and the ladder would move nothing.
+                        flushTimer.current = setTimeout(() => flushPending(), governorInterval.current);
                     }
                 }
                 else {
@@ -510,7 +541,12 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
         // `state.json`, not `config.json`: whether a one-shot notice has been shown
         // is bookkeeping, and the comment on the old persisted key said so.
         onSeen: () => setMouseNoticeSeen(true),
-    });
+    }, 
+    // Present only when `loadConfig` had to raise the user's own
+    // `transcriptRetain` to `transcriptWindow` (tui-render-performance §5.1).
+    cfg.transcriptRetainRequested !== undefined
+        ? { requested: cfg.transcriptRetainRequested, resolved: cfg.transcriptRetain }
+        : undefined);
     // --- Exit snapshot: the only way state reaches cli.tsx (§4.4). ----------
     useEffect(() => {
         publishExitSnapshot({
@@ -519,8 +555,30 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
             provider: cfg.provider,
             model: cfg.model,
             startedAt: startedAt.current,
+            // Carried so the exit replay can say what the retain ring removed. A
+            // transcript that silently omits entries is worse than one that names the
+            // count (K-6).
+            droppedEntries: state.droppedEntries,
+        });
+    }, [state.entries, state.usageTotal, state.droppedEntries, cfg.provider, cfg.model]);
+    // --- `/perf` snapshot channel (tui-render-performance §5.4). ------------
+    //
+    // The deps are the two `useCallback`d members, NOT the handle objects: both
+    // hooks return a fresh literal per render, so depending on them would re-run
+    // this effect on every frame.
+    const governorReset = governor.reset;
+    const heightsClear = heights.clear;
+    useEffect(() => {
+        setPerfSnapshotProvider(() => perfRef.current);
+        setPerfResetHook(() => {
+            governorReset();
+            heightsClear();
         });
-    }, [state.entries, state.usageTotal, cfg.provider, cfg.model]);
+        return () => {
+            setPerfSnapshotProvider(null);
+            setPerfResetHook(null);
+        };
+    }, [governorReset, heightsClear]);
     // --- Confirm bridge (confirmTools mode + skill approvals). -------------
     useEffect(() => {
         if (!confirmBridge)
@@ -1071,13 +1129,32 @@ export function App({ controller, version, mode, initialOverlay, initialPrompt,
     // the header the moment the first message lands.
     const opener = empty ? (_jsx(SessionOpener, { variant: fullscreen ? pickOpenerVariant(viewportBudget, contentCols, caps) : 'none', version: version, cwd: controller.getCwd(), hasKey: hasKey, viewportRows: fullscreen ? viewportBudget : Number.POSITIVE_INFINITY, theme: theme, caps: caps })) : null;
     const density = cfg.density;
-    const viewport = fullscreen ? (overlayNode ? (_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: overlayNode })) : (_jsxs(ScrollViewport, { intent: scrollIntent, pinToBottomNonce: pinToBottomNonce, onScrolledLinesChange: setScrolledLines, showScrollIndicator: true, cols: contentCols, theme: theme, caps: caps, children: [opener, _jsx(TranscriptList, { entries: state.entries, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps, windowSize: cfg.transcriptWindow ?? DEFAULT_TRANSCRIPT_WINDOW })] }))) : (_jsxs(_Fragment, { children: [opener, _jsx(Transcript, { entries: state.entries, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }), overlayNode] }));
+    const transcriptWindow = cfg.transcriptWindow ?? DEFAULT_TRANSCRIPT_WINDOW;
+    // Assigned during render so `/perf` reads the CURRENT frame (see `perfRef`).
+    // `mountedEntries` is the same number `render-budget.test.tsx` asserts (AC-9).
+    perfRef.current = {
+        rung: governor.rung,
+        intervalMs: governor.intervalMs.current,
+        lastCommitMs: governor.lastCommitMs(),
+        governorEnabled: cfg.renderGovernor,
+        totalEntries: state.entries.length,
+        retain: cfg.transcriptRetain ?? DEFAULT_TRANSCRIPT_RETAIN,
+        droppedEntries: state.droppedEntries,
+        mountedEntries: mountedCount.current,
+        heightsMeasured: heights.stats().measured,
+        heightsEstimated: heights.stats().estimated,
+        cols: contentCols,
+        mode: fullscreen ? 'fullscreen' : 'inline',
+        viewportRows: fullscreen ? viewportBudget : rows,
+        offset: scrolledLines,
+    };
+    const viewport = fullscreen ? (overlayNode ? (_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: overlayNode })) : (_jsxs(ScrollViewport, { intent: scrollIntent, pinToBottomNonce: pinToBottomNonce, onScrolledLinesChange: setScrolledLines, showScrollIndicator: true, cols: contentCols, theme: theme, caps: caps, children: [opener, _jsx(TranscriptList, { entries: state.entries, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps, windowSize: transcriptWindow, cols: contentCols, heights: heights, mountedSink: mountedCount })] }))) : (_jsxs(_Fragment, { children: [opener, _jsx(Transcript, { entries: state.entries, expandedToolIds: state.expandedToolIds, thinkingVisible: state.thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }), overlayNode] }));
     // The completion popup lives inside the bottom chrome and can add up to 9
     // rows; unbounded, it pushes the status bar past the frame height where
     // `overflow: hidden` clips it away (R-14 / M-14). Cap it against the viewport.
     const popupMaxRows = fullscreen ? Math.max(1, viewportBudget - 4) : undefined;
     const composer = fullscreen ? (_jsx(Composer, { isActive: overlay === null, running: state.status === 'running', history: promptHistory, commands: commandOptions, cwd: controller.getCwd(), showHint: rows >= HINT_MIN_ROWS, submitCount: cfg.submitCount, hintsEnabled: cfg.hints, agentMode: state.agentMode, popupMaxRows: popupMaxRows, historyIntent: historyIntent, theme: theme, caps: caps, onSubmit: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) })) : (_jsx(Box, { marginTop: 1, children: _jsx(PromptInput, { isActive: overlay === null, running: state.status === 'running', history: promptHistory, commands: commandOptions, cwd: controller.getCwd(), agentMode: state.agentMode, theme: theme, caps: caps, onSubmit: (text) => void handleSubmit(text), onHelp: () => dispatch({ type: 'setOverlay', overlay: 'help' }) }) }));
-    return (_jsx(AppShell, { mode: mode, rows: rows, cols: cols, geometryRef: geometryRef, header: header, viewport: viewport, team: state.team ? (_jsx(TeamPanel, { snapshot: state.team, rows: rows, cols: cols, reducedMotion: reducedMotion, theme: theme, caps: caps })) : null, rail: showRail && state.todos ? (_jsx(TodoPanel, { snapshot: state.todos, width: railWidth, rows: railRows, running: state.status === 'running', reducedMotion: reducedMotion, theme: theme, caps: caps })) : null, strip: showStrip && state.todos ? (_jsx(TodoStrip, { snapshot: state.todos, cols: cols, theme: theme, caps: caps })) : null, toast: _jsx(ToastStack, { toasts: state.toasts, theme: theme, mode: mode }), composer: composer, status: _jsx(StatusBar, { model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, contextTokens: state.contextTokens, contextWindow: modelInfo.contextWindow, contextWindowKnown: modelKnown, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ...(state.team
+    return (_jsx(AppShell, { mode: mode, rows: rows, cols: cols, geometryRef: geometryRef, header: header, viewport: viewport, team: state.team ? (_jsx(TeamPanel, { snapshot: state.team, rows: rows, cols: cols, reducedMotion: reducedMotion, theme: theme, caps: caps })) : null, rail: showRail && state.todos ? (_jsx(TodoPanel, { snapshot: state.todos, width: railWidth, rows: railRows, running: state.status === 'running', reducedMotion: reducedMotion, theme: theme, caps: caps })) : null, strip: showStrip && state.todos ? (_jsx(TodoStrip, { snapshot: state.todos, cols: cols, theme: theme, caps: caps })) : null, toast: _jsx(ToastStack, { toasts: state.toasts, theme: theme, mode: mode }), composer: composer, status: _jsx(StatusBar, { model: cfg.model, provider: cfg.provider, usageTotal: state.usageTotal, contextTokens: state.contextTokens, contextWindow: modelInfo.contextWindow, contextWindowKnown: modelKnown, status: state.status, elapsedMs: elapsedMs, thinkingLevel: cfg.thinkingLevel, tokPerSec: tokPerSec, theme: theme, caps: caps, scrolledLines: scrolledLines, redrawNonce: redrawNonce, agentMode: state.agentMode, pendingAgentMode: state.pendingAgentMode, ecoRung: governor.rung, ...(state.team
                 ? {
                     teamActive: {
                         running: state.team.runs.filter((r) => r.phase !== 'queued' && r.phase !== 'done' &&

package/dist/ui/Markdown.d.ts

@@ -7,7 +7,13 @@
  * *italic* / `code` / ~~strike~~. Anything else renders as plain text. Still
  * intentionally small — not a CommonMark implementation.
  *
- * The grammar lives in `markdown-blocks.ts`; this file only renders.
+ * The grammar lives in `markdown-blocks.ts`; this file only renders. That was
+ * true of the file header long before it was true of the file
+ * (tui-render-performance R2): the block grammar used to run here, in the render
+ * body, on every frame. Both expensive halves are now memoised on the input
+ * string — `parseMarkdownCached` for the AST, `highlightCached` for the ANSI —
+ * while theme and glyphs stay render-time, so `/theme` still takes effect
+ * immediately (K-5).
  */
 import React from 'react';
 import type { Theme } from './theme.js';

package/dist/ui/Markdown.js

@@ -1,54 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { highlight } from 'cli-highlight';
 import { pickGlyphs } from './glyphs.js';
 import { railBorderProps } from './layout/Gutter.js';
-import { formatTable, isRule, isTableDivider, parseHeading, parseInline, parseTableRow, tableAlignments, } from './markdown-blocks.js';
-const FENCE = /^```(\w*)\s*$/;
+import { highlightCached, parseMarkdownCached } from './render-cache.js';
+import { formatTable, isRule, parseHeading, parseInline, } from './markdown-blocks.js';
 /** Width of the `---` rule. Fixed so it cannot force a wrap on narrow frames. */
 const RULE_WIDTH = 24;
 export function Markdown({ text, theme, caps }) {
     const glyphs = pickGlyphs(caps);
-    const lines = text.split('\n');
-    const blocks = [];
-    let i = 0;
-    let key = 0;
-    while (i < lines.length) {
-        const line = lines[i] ?? '';
-        const fence = FENCE.exec(line.trim());
-        if (fence) {
-            const lang = fence[1] || '';
-            const codeLines = [];
-            i += 1;
-            while (i < lines.length && !FENCE.test((lines[i] ?? '').trim())) {
-                codeLines.push(lines[i] ?? '');
-                i += 1;
-            }
-            i += 1; // skip closing fence
-            blocks.push(_jsx(CodeBlock, { code: codeLines.join('\n'), lang: lang, theme: theme, glyphs: glyphs }, `b${key++}`));
-            continue;
-        }
-        // A pipe row followed by a divider row starts a table; consume the run.
-        const headerCells = parseTableRow(line);
-        if (headerCells && i + 1 < lines.length && isTableDivider(lines[i + 1] ?? '')) {
-            const align = tableAlignments(lines[i + 1] ?? '');
-            const rows = [headerCells];
-            i += 2;
-            while (i < lines.length) {
-                const cells = parseTableRow(lines[i] ?? '');
-                if (!cells)
-                    break;
-                rows.push(cells);
-                i += 1;
-            }
-            const formatted = formatTable(rows, align);
-            blocks.push(_jsx(Box, { flexDirection: "column", children: formatted.map((row, r) => (_jsx(Text, { wrap: "truncate", bold: r === 0, color: r === 0 ? theme.accent : undefined, children: row }, r))) }, `b${key++}`));
-            continue;
+    const blocks = parseMarkdownCached(text);
+    return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => renderBlock(block, i, theme, glyphs)) }));
+}
+function renderBlock(block, key, theme, glyphs) {
+    switch (block.kind) {
+        case 'code':
+            return (_jsx(CodeBlock, { code: block.code, lang: block.lang, theme: theme, glyphs: glyphs }, `b${key}`));
+        case 'table': {
+            const formatted = formatTable(block.rows, block.align);
+            return (_jsx(Box, { flexDirection: "column", children: formatted.map((row, r) => (_jsx(Text, { wrap: "truncate", bold: r === 0, color: r === 0 ? theme.accent : undefined, children: row }, r))) }, `b${key}`));
         }
-        blocks.push(_jsx(InlineLine, { line: line, theme: theme, glyphs: glyphs }, `b${key++}`));
-        i += 1;
+        default:
+            return _jsx(InlineLine, { line: block.text, theme: theme, glyphs: glyphs }, `b${key}`);
     }
-    return _jsx(Box, { flexDirection: "column", children: blocks });
 }
 /**
  * Fenced code. The round border is gone (§4.3): nested inside a tool card it
@@ -57,13 +30,7 @@ export function Markdown({ text, theme, caps }) {
  * code" boundary for 1 column and 0 rows.
  */
 function CodeBlock({ code, lang, theme, glyphs, }) {
-    let rendered = code;
-    try {
-        rendered = highlight(code, { language: lang || undefined, ignoreIllegals: true });
-    }
-    catch {
-        rendered = code;
-    }
+    const rendered = highlightCached(code, lang);
     return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: [lang.length > 0 && (_jsx(Text, { color: theme.chip.fg, backgroundColor: theme.chip.bg, children: ` ${lang} ` })), _jsx(Text, { children: rendered })] }));
 }
 /** Six heading levels used to render identically; now they carry three weights. */

package/dist/ui/StatusBar.d.ts

@@ -88,6 +88,19 @@ interface StatusBarProps {
         done: number;
         total: number;
     };
+    /**
+     * Render-governor rung (tui-render-performance L4). `> 0` renders a muted
+     * `eco` chip.
+     *
+     * I-L4-2 — THE GOVERNOR IS USER-VISIBLE, and this is where. A user who cannot
+     * see why the stream got chunkier will conclude the model got slower, and
+     * degrading silently is the one thing a claim of robustness cannot afford.
+     * It sits in the RIGHT cluster next to the other derived numbers and is
+     * suppressed on a narrow terminal, which is the `teamActive` treatment rather
+     * than the `agentMode` one: the mode must never be unreportable, whereas an
+     * eco chip on a 50-column terminal costs the context gauge more than it says.
+     */
+    ecoRung?: number;
 }
 export declare function StatusBar(props: StatusBarProps): React.ReactElement;
 export {};

package/dist/ui/StatusBar.js

@@ -6,6 +6,8 @@ import { buildGauge } from './gauge.js';
 import { MODE_LABEL } from '../agent/agent-mode.js';
 import { TEAM_LIMITS } from '../team/limits.js';
 import { TODO_LIMITS } from '../todo/limits.js';
+/** Below this the `eco` chip costs the context gauge more than it is worth. */
+const ECO_MIN_COLS = 72;
 /**
  * I-5 — DO NOT "CLEAN THIS UP". Ink short-circuits identical output at TWO
  * gates (`ink.js:132` and `log-update.js:13`), so a fixed frame whose React
@@ -25,7 +27,7 @@ function redrawChar(nonce) {
     return nonce % 2 === 0 ? ' ' : NBSP;
 }
 export function StatusBar(props) {
-    const { model, provider, usageTotal, contextTokens, contextWindow, contextWindowKnown, status, elapsedMs, thinkingLevel, tokPerSec, theme, caps, scrolledLines = 0, redrawNonce = 0, agentMode = 'build', pendingAgentMode = null, teamActive, todoActive, } = props;
+    const { model, provider, usageTotal, contextTokens, contextWindow, contextWindowKnown, status, elapsedMs, thinkingLevel, tokPerSec, theme, caps, scrolledLines = 0, redrawNonce = 0, agentMode = 'build', pendingAgentMode = null, teamActive, todoActive, ecoRung = 0, } = props;
     const { stdout } = useStdout();
     const cols = stdout?.columns ?? 80;
     const running = status === 'running';
@@ -53,5 +55,5 @@ export function StatusBar(props) {
                                 ? `agents ${teamActive.running}/${teamActive.total}`
                                 : `[${teamActive.running}]`] })), todoActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= TODO_LIMITS.statusCompactCols
                                 ? `todo ${todoActive.done}/${todoActive.total}`
-                                : `[${todoActive.done}/${todoActive.total}]`] })), cols >= 60 && (_jsxs(Text, { color: theme.muted, children: ['  ', provider, ":", model] })), thinkingLevel !== 'off' && cols >= 72 && (_jsxs(Text, { color: theme.accent, children: ["  think:", thinkingLevel] }))] }), _jsxs(Box, { flexDirection: "row", children: [scrolledLines > 0 && (_jsxs(Text, { color: theme.noticeWarn, children: [glyphs.arrowUp, scrolledLines, '  '] })), cols >= 60 && (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "[" }), _jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty }), _jsx(Text, { color: theme.muted, children: "] " })] })), _jsx(Text, { color: theme.muted, children: pctLabel }), cols >= 72 && _jsxs(Text, { color: theme.muted, children: ["  ", tokens] }), _jsxs(Text, { color: theme.muted, children: ["  ", formatCost(usageTotal.costUsd)] }), running && (_jsxs(Text, { color: theme.muted, children: [tokPerSec > 0 && cols >= 72 ? `  ${tokPerSec} tok/s` : '', "  ", formatDuration(elapsedMs)] }))] })] }));
+                                : `[${todoActive.done}/${todoActive.total}]`] })), cols >= 60 && (_jsxs(Text, { color: theme.muted, children: ['  ', provider, ":", model] })), thinkingLevel !== 'off' && cols >= 72 && (_jsxs(Text, { color: theme.accent, children: ["  think:", thinkingLevel] }))] }), _jsxs(Box, { flexDirection: "row", children: [ecoRung > 0 && cols >= ECO_MIN_COLS && (_jsxs(Text, { color: theme.muted, children: ["eco", '  '] })), scrolledLines > 0 && (_jsxs(Text, { color: theme.noticeWarn, children: [glyphs.arrowUp, scrolledLines, '  '] })), cols >= 60 && (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: "[" }), _jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty }), _jsx(Text, { color: theme.muted, children: "] " })] })), _jsx(Text, { color: theme.muted, children: pctLabel }), cols >= 72 && _jsxs(Text, { color: theme.muted, children: ["  ", tokens] }), _jsxs(Text, { color: theme.muted, children: ["  ", formatCost(usageTotal.costUsd)] }), running && (_jsxs(Text, { color: theme.muted, children: [tokPerSec > 0 && cols >= 72 ? `  ${tokPerSec} tok/s` : '', "  ", formatDuration(elapsedMs)] }))] })] }));
 }

package/dist/ui/Transcript.d.ts

@@ -15,12 +15,22 @@
  * parallel product. What inline still guarantees is its GEOMETRY contract — no
  * fixed frame, `<Static>` keeps the settled history, no private ANSI — not its
  * pixel-for-pixel appearance.
+ *
+ * Two things changed with tui-render-performance:
+ *   - `EntryView` is `React.memo`'d with an explicit comparator (L2 / R3), which
+ *     is only worth anything because `mapEntry` already preserves object
+ *     identity for untouched entries;
+ *   - `TranscriptList` (the FULL-SCREEN body) mounts only the entries inside the
+ *     viewport and replaces the rest with two spacer boxes (L3 / R1), and the
+ *     inline `Transcript` clamps its live region so `ink.js:121` is unreachable
+ *     (L5 / R6).
  */
 import React from 'react';
 import { type Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
 import { type DensityMode } from './density.js';
 import type { Entry } from '../agent/reducer.js';
+import type { HeightStore } from './use-height-store.js';
 /**
  * Largest prefix length P such that `entries[0..P)` are all terminal, none is
  * within the last `LIVE_TAIL` entries, and none is currently expanded. Pure and
@@ -37,6 +47,35 @@ interface TranscriptProps {
     theme: Theme;
     caps: TermCapabilities;
 }
+export interface EntryViewProps {
+    entry: Entry;
+    /** Previous entry in the list; `undefined` for the first item. */
+    prev: Entry | undefined;
+    expanded: boolean;
+    thinkingVisible: boolean;
+    reducedMotion: boolean;
+    density: DensityMode;
+    theme: Theme;
+    caps: TermCapabilities;
+    /** Inline mode only (L5); `undefined` in full-screen, which means no clamp. */
+    liveClampRows?: number;
+}
+declare function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion, density, theme, caps, liveClampRows, }: EntryViewProps): React.ReactElement | null;
+/**
+ * THE memo boundary that makes a long transcript cheap (L2 / R3).
+ *
+ * The comparator is written out rather than defaulted because `prev` is the one
+ * prop whose identity matters for a reason the type does not show: it feeds
+ * `separationRows`, so an entry whose PREDECESSOR changed kind must re-render
+ * even though the entry itself did not.
+ *
+ * I-L2-1 — `theme` and `caps` are `useMemo`d in `App.tsx` and are therefore
+ * referentially stable across frames. If a future change makes either a fresh
+ * object per render, EVERY boundary below becomes a no-op AND NOTHING FAILS;
+ * `render-memo.test.tsx` asserts that stability directly so the trap is a red
+ * test rather than a silent regression.
+ */
+export declare const EntryView: React.MemoExoticComponent<typeof EntryViewImpl>;
 /**
  * Full-screen transcript body — the same entry renderers with NO `<Static>`.
  *
@@ -51,12 +90,25 @@ interface TranscriptProps {
  * mark feeds nothing else — `/save` serializes `entries` in full — so leaving it
  * un-advanced has no side effect.
  *
- * Rendering budget (I-3): yoga lays out every child even when `overflow: hidden`
- * clips it, so cost grows linearly with the entry count. Only the last
- * `windowSize` entries are rendered; the reducer and `/save` keep everything.
+ * VIRTUALISED (L3 / R1). `windowSize` is now the SCROLL HORIZON — how far back
+ * the user can scroll — and no longer the rendering budget, because entries
+ * outside the viewport are not mounted at all. What bounds the frame is
+ * `selectWindow`, and the two spacers are what keep the scroll maths honest
+ * while they are absent.
  */
-export declare function TranscriptList({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, windowSize, }: TranscriptProps & {
+export declare function TranscriptList({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, windowSize, cols, heights, mountedSink, }: TranscriptProps & {
     windowSize: number;
+    /** The viewport's own width — narrower than the terminal when the rail is up. */
+    cols: number;
+    heights: HeightStore;
+    /**
+     * Written during render with the number of entries actually mounted, for
+     * `/perf` (AC-9). A ref rather than a callback: a `setState` here would make
+     * observing the render budget cost a render.
+     */
+    mountedSink?: {
+        current: number;
+    };
 }): React.ReactElement;
 export declare function Transcript({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, }: TranscriptProps): React.ReactElement;
 export {};

package/dist/ui/Transcript.js

@@ -16,8 +16,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * parallel product. What inline still guarantees is its GEOMETRY contract — no
  * fixed frame, `<Static>` keeps the settled history, no private ANSI — not its
  * pixel-for-pixel appearance.
+ *
+ * Two things changed with tui-render-performance:
+ *   - `EntryView` is `React.memo`'d with an explicit comparator (L2 / R3), which
+ *     is only worth anything because `mapEntry` already preserves object
+ *     identity for untouched entries;
+ *   - `TranscriptList` (the FULL-SCREEN body) mounts only the entries inside the
+ *     viewport and replaces the rest with two spacer boxes (L3 / R1), and the
+ *     inline `Transcript` clamps its live region so `ink.js:121` is unreachable
+ *     (L5 / R6).
  */
-import { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Box, Static, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { pickGlyphs, toolGlyph } from './glyphs.js';
@@ -28,8 +37,19 @@ import { AssistantEntry } from './entries/AssistantEntry.js';
 import { ToolCard, statusColor, toolEntryGlyph } from './entries/ToolCard.js';
 import { TeamCard, teamCardColor } from './entries/TeamCard.js';
 import { TodoCard, todoCardColor } from './entries/TodoCard.js';
+import { MeasuredEntry } from './layout/MeasuredEntry.js';
+import { useViewportGeometry } from './layout/viewport-geometry.js';
+import { estimateEntryRows, heightKey, selectWindow, VIRTUAL_LIMITS, } from './layout/virtual-window.js';
+import { useTerminalSize } from './layout/useTerminalSize.js';
 /** Keep the last K entries in the live region so a mutating tail stays hot. */
 const LIVE_TAIL = 1;
+/**
+ * Rows the inline live region leaves for the composer, the prompt echo and the
+ * one-row margin Ink needs before `outputHeight >= stdout.rows` (I-L5-1).
+ */
+const INLINE_LIVE_MARGIN = 4;
+/** Floor on the clamp, so a very short terminal still shows something useful. */
+const INLINE_LIVE_MIN_ROWS = 4;
 /**
  * Largest prefix length P such that `entries[0..P)` are all terminal, none is
  * within the last `LIVE_TAIL` entries, and none is currently expanded. Pure and
@@ -81,7 +101,7 @@ function noticeSymbol(level, theme) {
         return theme.symbols.warn;
     return theme.symbols.info;
 }
-function EntryView({ entry, prev, expanded, thinkingVisible, reducedMotion, density, theme, caps, }) {
+function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion, density, theme, caps, liveClampRows, }) {
     const glyphs = pickGlyphs(caps);
     const separation = separationRows(prev, entry, density);
     const frame = (glyph, color, children) => (_jsx(EntryFrame, { glyph: glyph, color: color, continuation: glyphs.railVertical, separation: separation, spacerColor: theme.border, children: children }));
@@ -93,10 +113,10 @@ function EntryView({ entry, prev, expanded, thinkingVisible, reducedMotion, dens
             // both an animation and a Unicode-only glyph, so reduced motion and an
             // ASCII terminal fall back to the same static marker (P2-11 / A-10).
             const animate = entry.streaming && !reducedMotion && caps.unicode;
-            return frame(animate ? _jsx(Spinner, { type: "dots" }) : glyphs.assistant, theme.primary, _jsx(AssistantEntry, { text: entry.text, thinking: entry.thinking, thinkingOpen: entry.thinkingOpen, thinkingVisible: thinkingVisible, streaming: entry.streaming, aborted: entry.aborted, theme: theme, caps: caps }));
+            return frame(animate ? _jsx(Spinner, { type: "dots" }) : glyphs.assistant, theme.primary, _jsx(AssistantEntry, { text: entry.text, thinking: entry.thinking, thinkingOpen: entry.thinkingOpen, thinkingVisible: thinkingVisible, streaming: entry.streaming, aborted: entry.aborted, liveClampRows: liveClampRows, theme: theme, caps: caps }));
         }
         case 'tool':
-            return frame(toolEntryGlyph(entry.name, caps), statusColor(entry.status, theme), _jsx(ToolCard, { name: entry.name, label: entry.label, argsRaw: entry.argsRaw, args: entry.args, status: entry.status, preview: entry.preview, durationMs: entry.durationMs, isError: entry.isError, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
+            return frame(toolEntryGlyph(entry.name, caps), statusColor(entry.status, theme), _jsx(ToolCard, { name: entry.name, label: entry.label, argsRaw: entry.argsRaw, args: entry.args, status: entry.status, preview: entry.preview, durationMs: entry.durationMs, isError: entry.isError, expanded: expanded, reducedMotion: reducedMotion, liveClampRows: liveClampRows, theme: theme, caps: caps }));
         case 'team':
             return frame(glyphs.teamAgent, teamCardColor(entry.runs, entry.active, entry.aborted, theme), _jsx(TeamCard, { requested: entry.requested, runs: entry.runs, aborted: entry.aborted, durationMs: entry.durationMs, active: entry.active, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
         case 'todo':
@@ -107,6 +127,31 @@ function EntryView({ entry, prev, expanded, thinkingVisible, reducedMotion, dens
             return null;
     }
 }
+/**
+ * THE memo boundary that makes a long transcript cheap (L2 / R3).
+ *
+ * The comparator is written out rather than defaulted because `prev` is the one
+ * prop whose identity matters for a reason the type does not show: it feeds
+ * `separationRows`, so an entry whose PREDECESSOR changed kind must re-render
+ * even though the entry itself did not.
+ *
+ * I-L2-1 — `theme` and `caps` are `useMemo`d in `App.tsx` and are therefore
+ * referentially stable across frames. If a future change makes either a fresh
+ * object per render, EVERY boundary below becomes a no-op AND NOTHING FAILS;
+ * `render-memo.test.tsx` asserts that stability directly so the trap is a red
+ * test rather than a silent regression.
+ */
+export const EntryView = React.memo(EntryViewImpl, (a, b) => {
+    return (a.entry === b.entry &&
+        a.prev === b.prev &&
+        a.expanded === b.expanded &&
+        a.thinkingVisible === b.thinkingVisible &&
+        a.reducedMotion === b.reducedMotion &&
+        a.density === b.density &&
+        a.theme === b.theme &&
+        a.caps === b.caps &&
+        a.liveClampRows === b.liveClampRows);
+});
 /**
  * Full-screen transcript body — the same entry renderers with NO `<Static>`.
  *
@@ -121,20 +166,59 @@ function EntryView({ entry, prev, expanded, thinkingVisible, reducedMotion, dens
  * mark feeds nothing else — `/save` serializes `entries` in full — so leaving it
  * un-advanced has no side effect.
  *
- * Rendering budget (I-3): yoga lays out every child even when `overflow: hidden`
- * clips it, so cost grows linearly with the entry count. Only the last
- * `windowSize` entries are rendered; the reducer and `/save` keep everything.
+ * VIRTUALISED (L3 / R1). `windowSize` is now the SCROLL HORIZON — how far back
+ * the user can scroll — and no longer the rendering budget, because entries
+ * outside the viewport are not mounted at all. What bounds the frame is
+ * `selectWindow`, and the two spacers are what keep the scroll maths honest
+ * while they are absent.
  */
-export function TranscriptList({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, windowSize, }) {
+export function TranscriptList({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, windowSize, cols, heights, mountedSink, }) {
     const size = Math.max(1, Math.floor(windowSize));
     const visible = entries.length > size ? entries.slice(-size) : entries;
     const collapsed = entries.length - visible.length;
     const glyphs = pickGlyphs(caps);
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [collapsed > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: [glyphs.ellipsis, " ", collapsed, " earlier ", collapsed === 1 ? 'entry' : 'entries', " collapsed (/save exports the full session)"] })), visible.map((entry, i) => (_jsx(EntryView, { entry: entry, prev: i > 0 ? visible[i - 1] : undefined, expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }, entry.id)))] }));
+    const geometry = useViewportGeometry();
+    // Ctrl+T changes every assistant entry's height without changing any entry,
+    // so it has to reach the cache key or the spacers freeze at the wrong size.
+    const flags = thinkingVisible ? 't' : '';
+    // ONE key builder, shared by the lookup below and by `MeasuredEntry`'s report.
+    // Two spellings of the same key is a SILENT failure and not a compile error:
+    // the measurement lands under a key `resolve` never asks for, every entry
+    // falls back to its estimate for the rest of the session, and the spacers
+    // quietly encode heights nothing will ever correct.
+    const keyOf = (entry) => heightKey(entry, cols, !!expandedToolIds[entry.id], density, flags);
+    const { resolve, report } = heights;
+    const heightOf = useCallback((index) => {
+        const entry = visible[index];
+        return resolve(keyOf(entry), () => estimateEntryRows(entry, cols, density, !!expandedToolIds[entry.id]));
+    }, 
+    // Memoised only incidentally: `visible` IS `entries` while the session is
+    // shorter than the horizon and a fresh slice once it is past it, so this
+    // rebuilds on some frames and not others. Either is correct — `selectWindow`
+    // consumes it synchronously below and it is never handed to a child — and
+    // `keyOf` is omitted from the list because every input it closes over is
+    // already in it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [visible, expandedToolIds, cols, density, flags, resolve]);
+    const selection = selectWindow({
+        entries: visible,
+        heightOf,
+        viewportRows: geometry.viewportRows,
+        offset: geometry.offset,
+        overscan: VIRTUAL_LIMITS.overscan,
+    });
+    const slice = visible.slice(selection.startIndex, selection.endIndex);
+    if (mountedSink)
+        mountedSink.current = slice.length;
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [collapsed > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: [glyphs.ellipsis, " ", collapsed, " earlier ", collapsed === 1 ? 'entry' : 'entries', " collapsed (/save exports the full session)"] })), selection.leadingRows > 0 && (_jsx(Box, { flexShrink: 0, height: selection.leadingRows })), slice.map((entry, i) => {
+                const index = selection.startIndex + i;
+                return (_jsx(MeasuredEntry, { heightKey: keyOf(entry), onMeasure: report, children: _jsx(EntryView, { entry: entry, prev: index > 0 ? visible[index - 1] : undefined, expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }) }, entry.id));
+            }), selection.trailingRows > 0 && (_jsx(Box, { flexShrink: 0, height: selection.trailingRows }))] }));
 }
 export function Transcript({ entries, expandedToolIds, thinkingVisible, reducedMotion, density, theme, caps, }) {
     const highWater = useRef(0);
     const prevLen = useRef(0);
+    const { rows } = useTerminalSize();
     const raw = computeSettledCount(entries, expandedToolIds);
     // The transcript shrank (clear / reset / restore) — drop the high-water mark.
     if (entries.length < prevLen.current)
@@ -144,5 +228,23 @@ export function Transcript({ entries, expandedToolIds, thinkingVisible, reducedM
     highWater.current = settled;
     const settledEntries = entries.slice(0, settled);
     const liveEntries = entries.slice(settled);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: settledEntries, children: (entry, index) => (_jsx(EntryView, { entry: entry, prev: index > 0 ? settledEntries[index - 1] : undefined, expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }, entry.id)) }), _jsx(Box, { flexDirection: "column", children: liveEntries.map((entry, i) => (_jsx(EntryView, { entry: entry, prev: i > 0 ? liveEntries[i - 1] : entries[settled - 1], expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }, entry.id))) })] }));
+    // I-L5-1 — the live region must stay strictly below `stdout.rows`, or Ink
+    // takes the `ink.js:118-123` branch and writes `clearTerminal +
+    // fullStaticOutput + output` on EVERY subsequent frame for the rest of the
+    // session.
+    //
+    // `LIVE_TAIL` is 1, so the common case is the design's `rows - 4` less the one
+    // row the clamp marker costs. THE DIVISION IS NOT DECORATION: the settled
+    // boundary is held back by an expanded card, a running tool, a live dispatch
+    // or a live todo list, and in every one of those cases the region holds
+    // SEVERAL entries at once — a flat per-entry ceiling of `rows - 4` would then
+    // overrun by a multiple of itself. `- 1` pays for each entry's marker row.
+    //
+    // The residual: an entry contributes at least its header row whatever the
+    // clamp says, so the bound holds while the live region holds fewer than about
+    // `rows / 2` entries. Bounding it unconditionally would mean refusing to draw
+    // a live entry at all, which is worse than a tall frame.
+    const liveBudget = Math.max(INLINE_LIVE_MIN_ROWS, rows - INLINE_LIVE_MARGIN);
+    const liveClampRows = Math.max(1, Math.floor(liveBudget / Math.max(1, liveEntries.length)) - 1);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: settledEntries, children: (entry, index) => (_jsx(EntryView, { entry: entry, prev: index > 0 ? settledEntries[index - 1] : undefined, expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps }, entry.id)) }), _jsx(Box, { flexDirection: "column", children: liveEntries.map((entry, i) => (_jsx(EntryView, { entry: entry, prev: i > 0 ? liveEntries[i - 1] : entries[settled - 1], expanded: !!expandedToolIds[entry.id], thinkingVisible: thinkingVisible, reducedMotion: reducedMotion, density: density, theme: theme, caps: caps, liveClampRows: liveClampRows }, entry.id))) })] }));
 }