@aragon-agent/cli 0.5.4 → 0.5.8

package/dist/ui/StatusBar.js

@@ -5,6 +5,9 @@ import { formatCost, formatTokens, formatDuration } from '../agent/usage.js';
 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
@@ -24,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, } = 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';
@@ -50,5 +53,7 @@ export function StatusBar(props) {
     // land in one predictable place.
     _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", flexShrink: 0, children: [_jsxs(Box, { flexDirection: "row", flexShrink: 0, children: [_jsxs(Text, { color: running ? theme.toolRunning : theme.toolDone, children: [redrawChar(redrawNonce), statusGlyph, " ", running ? 'running' : 'idle'] }), modeWord && (_jsxs(Text, { color: theme.accent, bold: true, children: ['  ', modeWord] })), teamActive && (_jsxs(Text, { color: theme.toolRunning, bold: true, children: ['  ', cols >= TEAM_LIMITS.statusCompactCols
                                 ? `agents ${teamActive.running}/${teamActive.total}`
-                                : `[${teamActive.running}]`] })), 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)] }))] })] }));
+                                : `[${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: [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/TodoPanel.d.ts

@@ -0,0 +1,48 @@
+/**
+ * TodoPanel — the right rail (todo-plan-execution §6.1).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`; a literal here bypasses the
+ * capability probe and shows mojibake on a legacy console (`glyphs.ts` header).
+ *
+ * MOUNTED ONLY WHEN A LIST EXISTS. `App` passes `null` the rest of the time and
+ * this component is not rendered at all, so a session that never plans has zero
+ * columns and zero layout shift (R-g's "no furniture when idle" / AC-24).
+ *
+ * IT MUST BE MOUNTED IN `AppShell`'s MIDDLE BAND, NEVER INSIDE `bottomRef`
+ * (C-6 / I-4). That box is MEASURED and the wheel router reads the composer band
+ * boundary from it; a column added there would inflate the measurement and start
+ * routing transcript scrolls into prompt history.
+ *
+ * WIDTH IS MEASURED IN COLUMNS, NEVER IN CODE UNITS (P2-3). This rail is 18-36
+ * columns wide and the system prompt's last line is "Respond in the language the
+ * user writes in", so CJK item text in an 18-column rail is the NORMAL case
+ * rather than the edge case. Every text cell is `wrap="truncate"` and Ink's
+ * truncation is display-width aware, so nothing can overflow the box — and NO
+ * ARITHMETIC HERE MAY BUDGET USER TEXT BY `.length`. The `padEnd(3)` /
+ * `padStart(2)` cells below are ASCII markers and indices, which is why they are
+ * safe; a "characters that fit" calculation over `content` would not be. That is
+ * the whole of the lesson `TeamPanel`'s `WIDE_CHAR_ALLOWANCE` records at length,
+ * and the mitigation here is to have no such budget at all.
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+import type { TodoSnapshot } from '../todo/types.js';
+export interface TodoPanelProps {
+    snapshot: TodoSnapshot;
+    /** From `todoRailWidth(cols)`. The rail's whole column budget, separator included. */
+    width: number;
+    /**
+     * From `todoRailRows(viewportBudget, teamActive)` — NOT `viewportBudget`
+     * (I-10 / P1-3). The gate that mounts this component and the number it lays
+     * out against are ONE value computed once in `App`: a panel that mounts on one
+     * number and lays out against another renders nothing and reports nothing.
+     */
+    rows: number;
+    /** Whether the agent is running; gates the spinner (never animate when idle). */
+    running: boolean;
+    reducedMotion: boolean;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+export declare function TodoPanel({ snapshot, width, rows, running, reducedMotion, theme, caps, }: TodoPanelProps): React.ReactElement;

package/dist/ui/TodoPanel.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { pickGlyphs } from './glyphs.js';
+import { buildGauge } from './gauge.js';
+import { railBorderProps } from './layout/Gutter.js';
+import { TODO_RAIL_INDEX_MIN_COLS } from './layout/rail.js';
+import { TODO_LIMITS } from '../todo/limits.js';
+import { selectTodoRows } from '../todo/panel-rows.js';
+/** Header row + the blank row under the gauge. */
+const FIXED_ROWS = 2;
+/** The gauge is the one purely decorative element, so it is the first to go. */
+const GAUGE_MIN_ROWS = 8;
+const GAUGE_MIN_COLS = 20;
+/** Separator column + one space of padding, supplied by `railBorderProps`. */
+const CHROME_COLS = 2;
+/** Marker cell. Three, because the ASCII tier's `[x]` / `[ ]` are three wide. */
+const MARKER_COLS = 3;
+/** Index cell: two digits plus the space that separates it from the text. */
+const INDEX_COLS = 3;
+function marker(item, glyphs) {
+    if (item.status === 'completed')
+        return glyphs.todoDone;
+    if (item.status === 'in_progress')
+        return glyphs.todoActive;
+    return glyphs.todoPending;
+}
+function rowColor(item, theme) {
+    if (item.status === 'completed')
+        return theme.muted;
+    if (item.status === 'in_progress')
+        return theme.primary;
+    return theme.hintFg ?? theme.muted;
+}
+export function TodoPanel({ snapshot, width, rows, running, reducedMotion, theme, caps, }) {
+    const glyphs = pickGlyphs(caps);
+    const showGauge = width >= GAUGE_MIN_COLS && rows >= GAUGE_MIN_ROWS;
+    const showIndex = width >= TODO_RAIL_INDEX_MIN_COLS;
+    const itemRows = Math.max(1, rows - FIXED_ROWS - (showGauge ? 1 : 0));
+    const { visible, hiddenAbove, hiddenBelow } = selectTodoRows(snapshot.items, itemRows);
+    const pct = snapshot.total > 0 ? Math.round((snapshot.doneCount / snapshot.total) * 100) : 0;
+    const gauge = buildGauge(pct, Math.max(4, width - CHROME_COLS - 2), theme, caps);
+    const complete = snapshot.doneCount === snapshot.total;
+    return (
+    // `flexShrink={0}` IS LOAD-BEARING (P1-4). Ink's `Box.defaultProps` is
+    // `{ flexWrap:'nowrap', flexDirection:'row', flexGrow:0, flexShrink:1 }`, so
+    // a `width={n}` box inside a shrinking row is SQUEEZED under pressure — and
+    // every piece of arithmetic in `rail.ts` silently becomes a suggestion at
+    // exactly the narrow widths where the guarantee matters. `ScrollIndicator`
+    // spells the same pair one level down. Cross-axis height needs no prop:
+    // `alignItems` is unset in this tree and yoga's default is `stretch`.
+    _jsxs(Box, { flexDirection: "column", flexShrink: 0, width: width, overflow: "hidden", paddingLeft: 1, ...railBorderProps(glyphs.railVertical, theme.border), children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { wrap: "truncate", color: theme.accent, bold: true, children: "TODO" }), _jsxs(Text, { wrap: "truncate", color: complete ? theme.toolDone : theme.muted, children: [snapshot.doneCount, "/", snapshot.total, complete ? ' done' : ''] })] }), showGauge && (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty })] })), _jsx(Text, { children: " " }), hiddenAbove > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['   ', "+", hiddenAbove, " above"] })), visible.map(({ item, index }) => {
+                const active = item.status === 'in_progress';
+                // The spinner is gated on `running`: a spinner while the agent is idle
+                // is a lie about the state of the world, and this panel outlives the run
+                // that filled it. Reduced motion and a non-Unicode terminal fall back to
+                // the same static marker, exactly as `AssistantEntry` and `TeamPanel` do.
+                const animate = active && running && !reducedMotion && caps.unicode;
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexShrink: 0, width: MARKER_COLS, children: _jsx(Text, { color: rowColor(item, theme), bold: active, children: animate ? _jsx(Spinner, { type: "dots" }) : marker(item, glyphs) }) }), showIndex && (_jsx(Box, { flexShrink: 0, width: INDEX_COLS, children: _jsx(Text, { color: theme.muted, children: String(index + 1).padStart(2) }) })), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: active ? 'wrap' : 'truncate', color: rowColor(item, theme), bold: active, children: active ? clampWrapped(item.activeForm, width) : item.content }) })] }, `${index}-${item.content}`));
+            }), hiddenBelow > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['   ', "+", hiddenBelow, " more"] }))] }));
+}
+/**
+ * Keep the wrapping row inside `TODO_LIMITS.activeWrapRows`.
+ *
+ * A CHARACTER BUDGET IS NOT A COLUMN BUDGET (P2-3), so this is deliberately
+ * generous rather than exact: it exists to stop a maximum-length `activeForm`
+ * from claiming five rows of an 18-column rail, and Ink's display-width-aware
+ * truncation is what actually keeps the row inside the box. Erring long costs
+ * nothing — the surrounding `overflow="hidden"` clips it.
+ */
+function clampWrapped(text, width) {
+    const budget = Math.max(1, width - CHROME_COLS) * TODO_LIMITS.activeWrapRows;
+    return text.length > budget ? text.slice(0, budget) : text;
+}

package/dist/ui/TodoStrip.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TodoStrip — the inline-mode plan surface (todo-plan-followthrough §3.7 / W2).
+ *
+ * ASCII ONLY: every glyph comes from `pickGlyphs`; a literal here bypasses the
+ * capability probe and shows mojibake on a legacy console. This file is inside
+ * the glyph scanner's scope because it is under `ui/`, NOT because of the
+ * `todo/` clause (C-4) — moving it would not move the guard rail with it.
+ *
+ * WHY A STRIP AND NOT THE RAIL. `decideRenderMode` picks inline for every pipe,
+ * every `CI=1`, every `TERM=dumb` and every terminal under 12 rows, and inline
+ * has no fixed frame to hang a column off (round 1's non-goal 4). Before this,
+ * such a session had the tool and a `todo 3/7` counter in the status bar, and no
+ * way at all to see WHICH step was running (OQ-1).
+ *
+ * WHY NOT IN THE STATUS BAR. The bar's left cluster is `flexShrink={0}` and its
+ * own comment records what happens when the row over-subscribes: Ink drops a
+ * character from EACH cluster and it renders `idl` / `? hel`. A variable-length
+ * step title cannot go there (C-7), which is what forces this into its own row.
+ *
+ * EXACTLY ONE RENDERED ROW, ALWAYS (AC-29). A strip that wrapped would push the
+ * composer down by an unpredictable number of rows on every keystroke, which is
+ * the worst possible behaviour for the mode with no frame to absorb it — hence
+ * `wrap="truncate"` inside a `flexGrow`/`flexShrink` box and no exceptions.
+ */
+import React from 'react';
+import type { Theme } from './theme.js';
+import type { TermCapabilities } from './capabilities.js';
+import type { TodoSnapshot } from '../todo/types.js';
+export interface TodoStripProps {
+    snapshot: TodoSnapshot;
+    /** Full terminal width; the strip spans the row in inline mode. */
+    cols: number;
+    theme: Theme;
+    caps: TermCapabilities;
+}
+export declare function TodoStrip({ snapshot, cols, theme, caps }: TodoStripProps): React.ReactElement;

package/dist/ui/TodoStrip.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { pickGlyphs } from './glyphs.js';
+import { TODO_LIMITS } from '../todo/limits.js';
+import { todoAnchorIndex } from '../todo/panel-rows.js';
+export function TodoStrip({ snapshot, cols, theme, caps }) {
+    const glyphs = pickGlyphs(caps);
+    // THE SAME FUNCTION THE RAIL USES (R-9 / AC-30). Two surfaces that each decide
+    // for themselves which step is "current" is two surfaces that disagree, and
+    // this one is on screen in exactly the mode where the rail is not, so the
+    // disagreement would never be seen side by side and never be reported.
+    const anchor = todoAnchorIndex(snapshot.items);
+    const item = snapshot.items[anchor];
+    const active = item?.status === 'in_progress';
+    // `activeForm` while in progress, `content` otherwise — `TodoPanel`'s rule.
+    const label = item ? (active ? item.activeForm : item.content) : '';
+    // The same degradation the status bar already applies, so the two counters can
+    // never disagree about how much room they need.
+    const counter = cols >= TODO_LIMITS.statusCompactCols
+        ? `todo ${snapshot.doneCount}/${snapshot.total}`
+        : `[${snapshot.doneCount}/${snapshot.total}]`;
+    const showDone = snapshot.doneCount > 0 && cols >= TODO_LIMITS.stripDoneCols;
+    return (
+    // `width` IS LOAD-BEARING, exactly as it is on `TodoPanel` and for a related
+    // reason. Inline mode has no fixed frame, so nothing upstream constrains
+    // this row: without an explicit width the flexible middle cell is sized by
+    // whatever the parent offers, and a long item overflows the terminal and
+    // WRAPS — the one thing this component exists not to do. Pinning it here
+    // makes the truncation deterministic and self-contained rather than a
+    // property of the tree above.
+    _jsxs(Box, { flexDirection: "row", width: cols, overflow: "hidden", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { wrap: "truncate", color: theme.accent, children: counter }) }), _jsx(Box, { flexShrink: 0, children: _jsxs(Text, { wrap: "truncate", color: theme.muted, children: [' ', glyphs.arrowRight, ' '] }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", color: active ? theme.primary : theme.muted, bold: active, children: label }) }), showDone && (_jsx(Box, { flexShrink: 0, children: _jsxs(Text, { wrap: "truncate", color: theme.muted, children: [' ', "+", snapshot.doneCount, " done"] }) }))] }));
+}

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,19 +16,40 @@ 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 } from './glyphs.js';
+import { pickGlyphs, toolGlyph } from './glyphs.js';
 import { separationRows } from './density.js';
 import { EntryFrame } from './entries/EntryFrame.js';
 import { UserEntry } from './entries/UserEntry.js';
 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
@@ -55,6 +76,13 @@ export function computeSettledCount(entries, expandedToolIds) {
         // session — the failure `session/persist.ts` normalizes away on load (P1-5).
         if (e.kind === 'team' && e.active)
             break;
+        // A live todo card is not settled either: it is rewritten on every
+        // `todoUpdate` for the whole turn, and `<Static>` cannot un-print what it has
+        // already drawn (C-5 / I-6). `session/persist.ts` forces `live: false` on
+        // load, which is the other half — a card that never settles is re-rendered
+        // on every frame for the rest of the session.
+        if (e.kind === 'todo' && e.live)
+            break;
         count = i + 1;
     }
     return count;
@@ -73,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 }));
@@ -85,18 +113,45 @@ 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':
+            return frame(toolGlyph(glyphs, 'todo_write'), todoCardColor(entry.doneCount, entry.total, entry.live, theme), _jsx(TodoCard, { items: entry.items, doneCount: entry.doneCount, total: entry.total, live: entry.live, interrupted: entry.interrupted, theme: theme, caps: caps }));
         case 'notice':
             return frame(noticeSymbol(entry.level, theme), noticeColor(entry.level, theme), _jsx(Text, { color: noticeColor(entry.level, theme), children: entry.text }));
         default:
             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>`.
  *
@@ -111,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)
@@ -134,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))) })] }));
 }

package/dist/ui/entries/AssistantEntry.d.ts

@@ -5,6 +5,13 @@
  *
  * The role glyph and spacing belong to `EntryFrame` (§4.3) — including the
  * streaming spinner, which IS the role marker while text is arriving.
+ *
+ * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3):
+ * every prop here is a scalar except `theme` and `caps`, both of which are
+ * `useMemo`d in `App.tsx` and therefore referentially stable across frames
+ * (I-L2-1, asserted by `render-memo.test.tsx`). If either ever becomes a fresh
+ * object per render this boundary silently becomes a no-op — which is exactly
+ * why that assertion exists rather than a comment.
  */
 import React from 'react';
 import type { Theme } from '../theme.js';
@@ -16,8 +23,18 @@ interface AssistantEntryProps {
     thinkingVisible: boolean;
     streaming: boolean;
     aborted?: boolean;
+    /**
+     * Inline mode only (L5): keep at most this many rows of a LIVE entry, so the
+     * non-`<Static>` region cannot reach `stdout.rows`. `undefined` means no
+     * clamp on the ANSWER BODY, which is what the full-screen branch passes — so
+     * the rendered answer there is byte-identical to a pre-feature build. (The
+     * thinking block has its own streaming clamp below and is not covered by that
+     * statement.)
+     */
+    liveClampRows?: number;
     theme: Theme;
     caps: TermCapabilities;
 }
-export declare function AssistantEntry(props: AssistantEntryProps): React.ReactElement | null;
+declare function AssistantEntryImpl(props: AssistantEntryProps): React.ReactElement | null;
+export declare const AssistantEntry: React.MemoExoticComponent<typeof AssistantEntryImpl>;
 export {};

package/dist/ui/entries/AssistantEntry.js

@@ -1,13 +1,43 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Render a streaming assistant entry: an optional collapsible thinking block
+ * above the markdown-rendered answer text. Empty entries render nothing (a turn
+ * that only produced tool calls has no assistant text).
+ *
+ * The role glyph and spacing belong to `EntryFrame` (§4.3) — including the
+ * streaming spinner, which IS the role marker while text is arriving.
+ *
+ * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3):
+ * every prop here is a scalar except `theme` and `caps`, both of which are
+ * `useMemo`d in `App.tsx` and therefore referentially stable across frames
+ * (I-L2-1, asserted by `render-memo.test.tsx`). If either ever becomes a fresh
+ * object per render this boundary silently becomes a no-op — which is exactly
+ * why that assertion exists rather than a comment.
+ */
+import React from 'react';
 import { Box, Text } from 'ink';
 import { pickGlyphs } from '../glyphs.js';
 import { Markdown } from '../Markdown.js';
-export function AssistantEntry(props) {
-    const { text, thinking, thinkingOpen, thinkingVisible, streaming, aborted, theme, caps } = props;
+import { splitLinesCached } from '../render-cache.js';
+import { clampLiveText } from '../live-clamp.js';
+function AssistantEntryImpl(props) {
+    const { text, thinking, thinkingOpen, thinkingVisible, streaming, aborted, liveClampRows, theme, caps, } = props;
     const glyphs = pickGlyphs(caps);
     const hasThinking = !!thinking && thinking.trim().length > 0;
     const hasText = text.trim().length > 0;
     if (!hasThinking && !hasText && !streaming)
         return null;
-    return (_jsxs(Box, { flexDirection: "column", children: [hasThinking && thinkingVisible && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate", color: theme.thinking, children: [glyphs.thinking, " thinking", thinkingOpen ? glyphs.ellipsis : ''] }), _jsx(Box, { flexDirection: "column", marginLeft: 2, children: thinking.split('\n').map((line, i) => (_jsx(Text, { color: theme.thinking, dimColor: true, children: line }, i))) })] })), (hasText || streaming) && (_jsxs(Box, { flexDirection: "column", children: [hasText ? (_jsx(Markdown, { text: text, theme: theme, caps: caps })) : (_jsx(Text, { color: theme.muted, children: glyphs.ellipsis })), aborted && _jsx(Text, { color: theme.noticeWarn, children: "[aborted]" })] }))] }));
+    // The thinking block is clamped to its TAIL while streaming even in
+    // full-screen mode: it is scratch reasoning the user reads the newest end of,
+    // and an unbounded one is the single easiest way to push a live entry past the
+    // whole viewport.
+    const thinkingRows = liveClampRows ?? (streaming ? STREAMING_THINKING_ROWS : undefined);
+    const clampedThinking = hasThinking && thinkingRows !== undefined
+        ? clampLiveText(thinking, thinkingRows)
+        : { text: thinking ?? '', hiddenRows: 0 };
+    const body = liveClampRows === undefined ? { text, hiddenRows: 0 } : clampLiveText(text, liveClampRows);
+    return (_jsxs(Box, { flexDirection: "column", children: [hasThinking && thinkingVisible && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { wrap: "truncate", color: theme.thinking, children: [glyphs.thinking, " thinking", thinkingOpen ? glyphs.ellipsis : ''] }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [clampedThinking.hiddenRows > 0 && (_jsxs(Text, { color: theme.muted, children: [glyphs.ellipsis, " ", clampedThinking.hiddenRows, " earlier", ' ', clampedThinking.hiddenRows === 1 ? 'line' : 'lines'] })), splitLinesCached(clampedThinking.text).map((line, i) => (_jsx(Text, { color: theme.thinking, dimColor: true, children: line }, i)))] })] })), (hasText || streaming) && (_jsxs(Box, { flexDirection: "column", children: [body.hiddenRows > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: [glyphs.ellipsis, " ", body.hiddenRows, " earlier", ' ', body.hiddenRows === 1 ? 'line' : 'lines', " ", glyphs.midDot, " shown in full when this entry finishes"] })), hasText ? (_jsx(Markdown, { text: body.text, theme: theme, caps: caps })) : (_jsx(Text, { color: theme.muted, children: glyphs.ellipsis })), aborted && _jsx(Text, { color: theme.noticeWarn, children: "[aborted]" })] }))] }));
 }
+/** Rows of live thinking kept on screen while an answer streams. */
+const STREAMING_THINKING_ROWS = 24;
+export const AssistantEntry = React.memo(AssistantEntryImpl);

package/dist/ui/entries/TeamCard.d.ts

@@ -28,4 +28,12 @@ export interface TeamCardProps {
 }
 /** The card's aggregate colour: any failure dominates. */
 export declare function teamCardColor(runs: SubagentRun[], active: boolean, aborted: boolean, theme: Theme): string | undefined;
-export declare function TeamCard(props: TeamCardProps): React.ReactElement;
+declare function TeamCardImpl(props: TeamCardProps): React.ReactElement;
+/**
+ * `React.memo` with the DEFAULT comparator (tui-render-performance L2 / R3).
+ * `mapEntry` already preserves object identity for untouched entries, so the
+ * array props below are stable references on a settled card, and `theme` /
+ * `caps` are `useMemo`d in `App.tsx` (I-L2-1).
+ */
+export declare const TeamCard: React.MemoExoticComponent<typeof TeamCardImpl>;
+export {};