@aragon-agent/cli 0.6.4 → 0.6.8

package/dist/ui/StatusBar.js

@@ -1,7 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import stringWidth from 'string-width';
 import { Box, Text, useStdout } from 'ink';
 import { pickGlyphs } from './glyphs.js';
-import { formatCost, formatTokens, formatDuration } from '../agent/usage.js';
+import { formatCost, formatTokens, formatDuration, promptTokensOf } from '../agent/usage.js';
 import { buildGauge } from './gauge.js';
 import { MODE_LABEL } from '../agent/agent-mode.js';
 import { formatRetryChip } from '../agent/retry-view.js';
@@ -12,6 +13,26 @@ import { TODO_LIMITS } from '../todo/limits.js';
 import { PROC_LIMITS } from '../proc/limits.js';
 /** Below this the `eco` chip costs the context gauge more than it is worth. */
 const ECO_MIN_COLS = 72;
+/**
+ * Where `86k/200k` starts being shown (context-usage-gauge-accuracy §3.6 / W5).
+ *
+ * IT TAKES THE COLUMNS THE SESSION TOTAL USED TO HAVE, and the ordering is the
+ * point rather than a layout accident (D-6). "How full am I, out of how much" is
+ * the question a user asks the gauge; "what has this session cost in tokens" is
+ * a different one, and putting the second in front of the first spends the
+ * scarce columns on the number the user is more likely to MISREAD - the total
+ * looks like an occupancy until you notice it exceeds the window.
+ */
+const ABSOLUTE_PAIR_MIN_COLS = 72;
+/**
+ * Where the session total returns, now prefixed.
+ *
+ * `total ` IS AN ASCII WORD, NOT A SIGMA. `ui/**` is inside the glyph scanner's
+ * scope, so a new symbol would need an entry in `glyphs.ts` with an ASCII
+ * fallback for a legacy `cmd.exe` - a real cost for a three-character prefix
+ * that reads worse.
+ */
+const SESSION_TOTAL_MIN_COLS = 96;
 /**
  * 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
@@ -31,23 +52,42 @@ 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, servicesActive, retryActive, ecoRung = 0, fastActive, compactionActive, gaugeMarks, contextEstimated = false, } = props;
+    const { model, provider, usageTotal, context, status, elapsedMs, thinkingLevel, tokPerSec, theme, caps, scrolledLines = 0, redrawNonce = 0, agentMode = 'build', pendingAgentMode = null, teamActive, todoActive, servicesActive, retryActive, ecoRung = 0, fastActive, compactionActive, gaugeMarks, } = props;
     const { stdout } = useStdout();
     const cols = stdout?.columns ?? 80;
     const running = status === 'running';
     const glyphs = pickGlyphs(caps);
-    const pct = contextWindow > 0 ? Math.min(100, Math.round((contextTokens / contextWindow) * 100)) : 0;
+    // THE PERCENTAGE IS NOT RECOMPUTED HERE ANY MORE. It arrives already divided
+    // and clamped by the same code the compaction trigger reads, which is the
+    // whole of AC-2: a user watching 78 % and a `/compact status` reporting 91 %
+    // would rightly conclude one of them is lying.
+    const pct = context.pct;
     // `gaugeMarks` is spread rather than passed as `undefined`, so a session with
     // compaction off takes `buildGauge`'s own default and the bar is byte-identical
     // to the pre-feature build.
     const gauge = gaugeMarks
         ? buildGauge(pct, cols < 72 ? 8 : 12, theme, caps, gaugeMarks)
         : buildGauge(pct, cols < 72 ? 8 : 12, theme, caps);
-    // ONE `~` FOR TWO KINDS OF APPROXIMATION (§6.2). A second marker would be a
-    // second thing to explain for a distinction the user does not act on
-    // differently: either way the number is a guess.
-    const pctLabel = `${contextWindowKnown && !contextEstimated ? '' : '~'}${gauge.pct}%`;
-    const tokens = `${formatTokens(usageTotal.inputTokens)}${glyphs.arrowUp} ${formatTokens(usageTotal.outputTokens)}${glyphs.arrowDown}`;
+    // `~` BELONGS TO THE NUMERATOR, `?` TO THE DENOMINATOR (P2-7). One glyph used
+    // to carry three meanings - the window is a guess, the occupancy is a guess,
+    // the occupancy contains an appended-message estimate - and a user could not
+    // tell from it which half to distrust. The `~` keeps every case it had: an
+    // unknown window still produces it, so a session that never touches the new
+    // absolute pair sees the identical string it saw before.
+    const occupancyApproximate = context.source === 'estimate' || context.deltaTokens > 0;
+    const pctLabel = `${context.windowKnown && !occupancyApproximate ? '' : '~'}${gauge.pct}%`;
+    // `?` ON THE WINDOW, AND ONLY ON THE NEW READOUT. `windowKnown` is false
+    // exactly when `buildRuntimeModel` invented the 128k placeholder, and saying
+    // `128k?` is the difference between a denominator the user can act on and one
+    // they will assume came from their model card.
+    const windowLabel = `${formatTokens(context.window)}${context.windowKnown ? '' : '?'}`;
+    const absolutePair = `${formatTokens(context.occupied)}/${windowLabel}`;
+    // THE PROMPT-SIDE TOTAL, NOT `inputTokens` (P1-3 / AC-11). Anthropic reports
+    // `input_tokens` EXCLUDING cached tokens, so the old expression under-reported
+    // for anyone behind a caching gateway - on the same row as a `$` that has
+    // always priced the cache. Any session with cache hits sees this number grow,
+    // and that is the fix rather than a regression.
+    const tokens = `total ${formatTokens(promptTokensOf(usageTotal))}${glyphs.arrowUp} ${formatTokens(usageTotal.outputTokens)}${glyphs.arrowDown}`;
     const statusGlyph = running ? theme.symbols.toolRunning : theme.symbols.toolPending;
     // Nothing at all in build mode with nothing pending: the default posture is
     // not news, and a permanent word here would be furniture.
@@ -56,6 +96,11 @@ export function StatusBar(props) {
         : pendingAgentMode
             ? `${MODE_LABEL[agentMode]} ${glyphs.arrowRight} ${MODE_LABEL[pendingAgentMode]}`
             : MODE_LABEL[agentMode];
+    const actionHints = [running ? (props.interruptHint ?? 'Esc abort') : '',
+        servicesActive ? `Ctrl+C stop ${servicesActive.live}` : '',
+        scrolledLines > 0 ? 'PgDn down' : ''].filter(Boolean).join(' | ');
+    const hintCols = actionHints ? Math.min(Math.max(0, cols - 1), stringWidth(actionHints) + 2) : 0;
+    const detailCols = Math.max(0, cols - 1 - hintCols);
     return (
     // `flexShrink={0}` on the left cluster is not cosmetic. When the two clusters
     // over-subscribe the row, yoga shrinks the flexible children and Ink's text
@@ -63,11 +108,11 @@ export function StatusBar(props) {
     // and "? hel" rather than truncating cleanly at one end. Pinning the left
     // cluster keeps the run status and model intact and makes the degradation
     // 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}]`] })), retryActive && (_jsxs(Text, { color: theme.noticeWarn, bold: true, children: ['  ', formatRetryChip(retryActive, cols)] })), todoActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= TODO_LIMITS.statusCompactCols
-                                ? `todo ${todoActive.done}/${todoActive.total}`
-                                : `[${todoActive.done}/${todoActive.total}]`] })), servicesActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= PROC_LIMITS.statusCompactCols
-                                ? `svc ${servicesActive.live}`
-                                : `[${servicesActive.live}]`] })), 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: [compactionActive && cols >= COMPACTION_LIMITS.statusCompactCols && (_jsxs(Text, { color: compactionActive.inFlight ? theme.accent : theme.muted, children: [compactionActive.inFlight ? 'compacting' : 'compact', '  '] })), fastActive && cols >= FAST_LIMITS.statusCompactCols && (_jsxs(Text, { color: theme.muted, children: ["fast", fastActive.inFlight ? '*' : '', '  '] })), 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)] }))] })] }));
+    _jsxs(Box, { width: cols, flexDirection: "row", justifyContent: "space-between", flexShrink: 0, height: 1, overflow: "hidden", children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { children: redrawChar(redrawNonce) }) }), hintCols > 0 && (_jsx(Box, { width: hintCols, flexShrink: 0, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", color: theme.noticeWarn, children: [actionHints, '  '] }) })), _jsxs(Box, { display: detailCols > 0 ? 'flex' : 'none', width: detailCols, flexShrink: 0, flexDirection: "row", justifyContent: "space-between", overflow: "hidden", children: [_jsxs(Box, { flexDirection: "row", flexShrink: 0, overflow: "hidden", children: [_jsxs(Text, { color: running ? theme.toolRunning : theme.toolDone, children: [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}]`] })), retryActive && (_jsxs(Text, { color: theme.noticeWarn, bold: true, children: ['  ', formatRetryChip(retryActive, cols)] })), todoActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= TODO_LIMITS.statusCompactCols
+                                        ? `todo ${todoActive.done}/${todoActive.total}`
+                                        : `[${todoActive.done}/${todoActive.total}]`] })), servicesActive && (_jsxs(Text, { color: theme.accent, children: ['  ', cols >= PROC_LIMITS.statusCompactCols
+                                        ? `svc ${servicesActive.live}`
+                                        : `[${servicesActive.live}]`] })), cols >= 60 && (cols >= 110 || (!running && !servicesActive && scrolledLines === 0)) && (_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: [compactionActive && cols >= COMPACTION_LIMITS.statusCompactCols && (_jsxs(Text, { color: compactionActive.inFlight ? theme.accent : theme.muted, children: [compactionActive.inFlight ? 'compacting' : 'compact', '  '] })), fastActive && cols >= FAST_LIMITS.statusCompactCols && (_jsxs(Text, { color: theme.muted, children: ["fast", fastActive.inFlight ? '*' : '', '  '] })), 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 >= ABSOLUTE_PAIR_MIN_COLS && (_jsxs(Text, { color: theme.muted, children: ["  ", absolutePair] })), cols >= SESSION_TOTAL_MIN_COLS && _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/TeamPanel.d.ts

@@ -19,6 +19,7 @@
 import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
+import { type TeamPanelLayout } from './layout/team-panel.js';
 import type { SubagentRun, TeamSnapshot } from '../team/types.js';
 export interface TeamPanelProps {
     snapshot: TeamSnapshot;
@@ -35,6 +36,7 @@ export interface TeamPanelProps {
     caps: TermCapabilities;
     /** Injectable clock so the panel test does not depend on wall time. */
     now?: number;
+    layout?: TeamPanelLayout;
 }
 export declare function activityBudget(cols: number): number;
 /**
@@ -55,4 +57,4 @@ export declare function activityBudget(cols: number): number;
  * columns and break at 80.
  */
 export declare function activityLine(run: SubagentRun, cols: number): string;
-export declare function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, }: TeamPanelProps): React.ReactElement;
+export declare function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, layout, }: TeamPanelProps): React.ReactElement | null;

package/dist/ui/TeamPanel.js

@@ -5,7 +5,7 @@ import { pickGlyphs } from './glyphs.js';
 import { formatDuration } from '../agent/usage.js';
 import { describeToolActivity, sanitizeActivity } from '../team/activity.js';
 import { TEAM_LIMITS } from '../team/limits.js';
-import { selectPanelRows } from '../team/panel-rows.js';
+import { buildTeamPanelLayout } from './layout/team-panel.js';
 function isRunning(run) {
     return run.phase === 'starting' || run.phase === 'thinking' || run.phase === 'tool' ||
         run.phase === 'waiting';
@@ -101,24 +101,28 @@ export function activityLine(run, cols) {
             return 'aborted';
     }
 }
-export function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, }) {
+export function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, now, layout, }) {
+    const projection = layout ?? buildTeamPanelLayout({
+        snapshot, terminalRows: rows, availableRows: Infinity,
+    });
+    if (projection.rowCount === 0)
+        return null;
     const glyphs = pickGlyphs(caps);
     const at = now ?? Date.now();
     const running = snapshot.runs.filter(isRunning).length;
     const done = snapshot.runs.filter(isSettled).length;
     const elapsed = formatDuration(Math.max(0, at - snapshot.startedAt));
     const header = (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { wrap: "truncate", color: theme.accent, bold: true, children: [glyphs.teamAgent, " team", '  ', _jsxs(Text, { color: theme.muted, children: [running, " running ", glyphs.midDot, " ", done, " done ", glyphs.midDot, " ", elapsed] })] }), snapshot.messageCount > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: [glyphs.teamMail, " ", snapshot.messageCount] }))] }));
-    // Below 20 rows the roster is more expensive than the transcript it displaces,
-    // so the panel degrades to the one line that still answers "is something
-    // running, and for how long" (§6.4).
-    if (rows < TEAM_LIMITS.panelCollapseRows) {
+    // Short terminals or a long draft leave only the shared header projection,
+    // which still answers whether anything is running and for how long.
+    if (projection.collapsed) {
         return _jsx(Box, { flexDirection: "column", flexShrink: 0, children: header });
     }
     // RANKED, not sliced by array index (F-2). The slot pool hands out indices in
     // order, so `slice(0, 5)` showed the five children that finished FIRST and hid
     // everything still working behind `+N more` - at exactly the fan-out widths
     // the requirement permits.
-    const { visible, hiddenTotal, hiddenRunning } = selectPanelRows(snapshot.runs, TEAM_LIMITS.panelMaxRows);
+    const { visible, hiddenTotal, hiddenRunning } = projection;
     return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [header, visible.map((run) => {
                 const color = statusColor(run, theme);
                 // One spinner per RUNNING row, and the row cap is 5 precisely because
@@ -126,8 +130,8 @@ export function TeamPanel({ snapshot, rows, cols, reducedMotion, theme, caps, no
                 // `reducedMotion` and a non-Unicode terminal fall back to the same
                 // static marker, exactly as `AssistantEntry` and `ToolCard` already do.
                 const animate = isRunning(run) && !reducedMotion && caps.unicode;
-                return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: color, children: [' ', animate ? _jsx(Spinner, { type: "dots" }) : marker(run, glyphs), ' '] }), _jsx(Text, { color: theme.primary, children: `${run.label}${run.tier === 'fast' ? '~' : ''}`.padEnd(8).slice(0, 8) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", color: theme.muted, children: run.description }) }), _jsx(Box, { flexShrink: 1, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", color: color, children: ['  ', activityLine(run, cols)] }) }), _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['  ', run.startedAt ? formatDuration(Math.max(0, (run.endedAt ?? at) - run.startedAt)) : ''] })] }, run.label));
-            }), hiddenTotal > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['  ', "+", hiddenTotal, " more", hiddenRunning > 0 ? ` (${hiddenRunning} running)` : ''] })), snapshot.lastMessage && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: [' ', glyphs.teamMail, " ", snapshot.lastMessage.from, " ", glyphs.arrowRight, " ", snapshot.lastMessage.to, ": ", snapshot.lastMessage.subject] }))] }));
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: color, children: [' ', animate ? _jsx(Spinner, { type: "dots" }) : marker(run, glyphs), ' '] }), _jsx(Text, { color: theme.primary, children: `${run.label}${run.tier === 'fast' ? '~' : ''}`.padEnd(8).slice(0, 8) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", color: theme.muted, children: run.description.replace(/\s+/g, ' ') }) }), _jsx(Box, { flexShrink: 1, overflow: "hidden", children: _jsxs(Text, { wrap: "truncate", color: color, children: ['  ', activityLine(run, cols)] }) }), _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['  ', run.startedAt ? formatDuration(Math.max(0, (run.endedAt ?? at) - run.startedAt)) : ''] })] }, run.label));
+            }), hiddenTotal > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['  ', "+", hiddenTotal, " more", hiddenRunning > 0 ? ` (${hiddenRunning} running)` : ''] })), snapshot.lastMessage && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: [' ', glyphs.teamMail, " ", snapshot.lastMessage.from, " ", glyphs.arrowRight, " ", snapshot.lastMessage.to, ": ", snapshot.lastMessage.subject.replace(/\s+/g, ' ')] }))] }));
 }
 function marker(run, glyphs) {
     if (run.phase === 'done')

package/dist/ui/TodoPanel.d.ts

@@ -14,13 +14,13 @@
  * stop being a rail and start eating viewport height, growing and shrinking the
  * transcript every time the list changed length.
  *
- * WIDTH IS MEASURED IN COLUMNS, NEVER IN CODE UNITS (P2-3). This rail is 18-36
+ * WIDTH IS MEASURED IN COLUMNS, NEVER IN CODE UNITS (P2-3). This rail is 14-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
+ * ARITHMETIC HERE MAY BUDGET USER TEXT BY `.length`. The count string and
+ * `padStart(2)` cells below are ASCII counts 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.
@@ -34,7 +34,7 @@ export interface TodoPanelProps {
     /** From `todoRailWidth(cols)`. The rail's whole column budget, separator included. */
     width: number;
     /**
-     * From `todoRailRows(viewportBudget, teamActive)` — NOT `viewportBudget`
+     * From `buildTodoRailLayout` after actual team/menu rows are subtracted.
      * (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.
@@ -46,4 +46,4 @@ export interface TodoPanelProps {
     theme: Theme;
     caps: TermCapabilities;
 }
-export declare function TodoPanel({ snapshot, width, rows, running, reducedMotion, theme, caps, }: TodoPanelProps): React.ReactElement;
+export declare function TodoPanel({ snapshot, width, rows, running, reducedMotion, theme, caps, }: TodoPanelProps): React.ReactElement | null;

package/dist/ui/TodoPanel.js

@@ -1,4 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 IN THE BOTTOM CHROME
+ * (C-6 / I-4). This is a COLUMN BESIDE the viewport, and the middle band is the
+ * only row-wrapped region there is; moved down into the bottom chrome it would
+ * stop being a rail and start eating viewport height, growing and shrinking the
+ * transcript every time the list changed length.
+ *
+ * WIDTH IS MEASURED IN COLUMNS, NEVER IN CODE UNITS (P2-3). This rail is 14-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 count string and
+ * `padStart(2)` cells below are ASCII counts 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 { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { pickGlyphs } from './glyphs.js';
@@ -6,7 +34,7 @@ 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';
+import { selectCompactTodoRows, 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. */
@@ -19,8 +47,11 @@ 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;
+    // Ink's tokenizer otherwise treats the bare emoji-capable check as one cell,
+    // while string-width counts two, adding an extra visible space to each row.
+    if (item.status === 'completed') {
+        return glyphs.todoDone.length === 1 ? `${glyphs.todoDone}\uFE0F` : glyphs.todoDone;
+    }
     if (item.status === 'in_progress')
         return glyphs.todoActive;
     return glyphs.todoPending;
@@ -34,41 +65,42 @@ function rowColor(item, theme) {
 }
 export function TodoPanel({ snapshot, width, rows, running, reducedMotion, theme, caps, }) {
     const glyphs = pickGlyphs(caps);
+    // Ink reapplies all four Yoga borders when the borderStyle object changes,
+    // but unchanged borderTop/Bottom=false props are not reapplied on that update.
+    const border = useMemo(() => railBorderProps(glyphs.railVertical), [glyphs.railVertical]);
+    if (snapshot.items.length === 0 || rows < TODO_LIMITS.panelMinRows)
+        return null;
+    const compact = rows < TODO_LIMITS.panelFullRows;
     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 showIndex = !compact && width >= TODO_RAIL_INDEX_MIN_COLS;
+    const compactFooter = compact && snapshot.items.length > rows - 1;
+    const itemRows = compact ? rows - 1 - Number(compactFooter)
+        : rows - FIXED_ROWS - Number(showGauge);
+    const { visible, hiddenAbove, hiddenBelow } = compact
+        ? selectCompactTodoRows(snapshot.items, itemRows)
+        : 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;
+    const countText = `${snapshot.doneCount}/${snapshot.total}`;
+    const showDone = complete
+        && width - CHROME_COLS >= 'TODO '.length + countText.length + ' done'.length;
+    const count = `${countText}${showDone ? ' done' : ''}`;
     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 }) => {
+    // spells the same pair one level down. Height uses the same row budget as
+    // selection, so content cannot silently enlarge the middle band.
+    _jsxs(Box, { flexDirection: "column", flexShrink: 0, width: width, height: rows, overflow: "hidden", paddingLeft: 1, ...border, borderColor: theme.border, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { wrap: "truncate", color: theme.accent, bold: true, children: "TODO" }) }), _jsx(Box, { width: count.length, flexShrink: 0, children: _jsx(Text, { wrap: "truncate", color: complete ? theme.toolDone : theme.muted, children: count }) })] }), showGauge && (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: gauge.fillColor, children: gauge.filled }), _jsx(Text, { color: gauge.trackColor, children: gauge.empty })] })), !compact && _jsx(Text, { children: " " }), !compact && 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;
+                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: "truncate", color: rowColor(item, theme), bold: active, children: active ? item.activeForm : item.content }) })] }, `${index}-${item.content}`));
+            }), compactFooter && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ["-", hiddenAbove, " +", hiddenBelow] })), !compact && hiddenBelow > 0 && (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: ['   ', "+", hiddenBelow, " more"] }))] }, glyphs.railVertical));
 }

package/dist/ui/Transcript.js

@@ -336,6 +336,7 @@ export function TranscriptList({ entries, expandedToolIds, thinkingVisible, redu
         entries: visible,
         heightOf,
         viewportRows: geometry.viewportRows,
+        trailingContentRows: geometry.trailingContentRows,
         offset: geometry.offset,
         overscan: VIRTUAL_LIMITS.overscan,
     });

package/dist/ui/UpdateLine.d.ts

@@ -9,7 +9,7 @@
  * still truthy. Taking that branch would emit a box of ZERO rows - the frame
  * keeps its fixed height, Yoga hands the row to the transcript, and
  * `viewportRows()` goes on reporting the old number to `ScrollViewport`,
- * `selectWindow`, `overlayMaxRows`, `popupMaxRows` and `todoRailRows`. The
+ * `selectWindow`, `overlayMaxRows`, `popupMaxRows` and `buildTodoRailLayout`. The
  * transcript would gain a row while the updater is idle and lose it the moment
  * it has news. Presence is the CALLER's decision, through
  * `shouldRenderUpdateLine`, exactly as `App.tsx` already decides the activity

package/dist/ui/capabilities.js

@@ -15,10 +15,6 @@ function detectColorLevel(env) {
         return 0;
     if (env.TERM === 'dumb')
         return 0;
-    // A truecolor-capable terminal advertises itself.
-    const colorterm = env.COLORTERM?.toLowerCase();
-    if (colorterm === 'truecolor' || colorterm === '24bit')
-        return 3;
     // FORCE_COLOR is an explicit override of the auto-detected depth.
     const force = env.FORCE_COLOR;
     if (force !== undefined) {
@@ -30,6 +26,10 @@ function detectColorLevel(env) {
             return 3;
         return 1; // '1' | 'true' | '' → at least basic color
     }
+    // A truecolor-capable terminal advertises itself.
+    const colorterm = env.COLORTERM?.toLowerCase();
+    if (colorterm === 'truecolor' || colorterm === '24bit')
+        return 3;
     // Fall back to chalk's own platform detection.
     const level = chalk.level;
     return level >= 0 && level <= 3 ? level : 0;
@@ -42,7 +42,7 @@ function detectUnicode(env) {
     if (env.WT_SESSION)
         return true; // Windows Terminal
     const program = env.TERM_PROGRAM;
-    if (program === 'vscode' || program === 'iTerm.app' || program === 'Apple_Terminal')
+    if (program === 'aragonmesh' || program === 'vscode' || program === 'iTerm.app' || program === 'Apple_Terminal')
         return true;
     // Legacy cmd.exe (no TERM, no WT_SESSION) and unknown terminals fall back to ASCII.
     return false;

package/dist/ui/composer-rows.js

@@ -52,6 +52,32 @@ export function displayWidth(text) {
         w += charWidth(ch);
     return w;
 }
+/** Normalize only the visual projection; the editor keeps its UTF-16 index. */
+function visualCursor(buffer, cursor) {
+    let index = Math.max(0, Math.min(buffer.length, cursor));
+    const code = buffer.charCodeAt(index);
+    const previous = buffer.charCodeAt(index - 1);
+    if (code >= 0xdc00 && code <= 0xdfff && previous >= 0xd800 && previous <= 0xdbff)
+        index -= 1;
+    if (index === buffer.length || buffer[index] === '\n')
+        return index;
+    const ch = String.fromCodePoint(buffer.codePointAt(index));
+    if (ch === '\t' || charWidth(ch) > 0)
+        return index;
+    const start = buffer.lastIndexOf('\n', index - 1) + 1;
+    let nearest = -1;
+    let i = start;
+    while (i < buffer.length && buffer[i] !== '\n') {
+        const point = String.fromCodePoint(buffer.codePointAt(i));
+        if (point === '\t' || charWidth(point) > 0) {
+            if (i > index)
+                return nearest >= 0 ? nearest : i;
+            nearest = i;
+        }
+        i += point.length;
+    }
+    return nearest >= 0 ? nearest : i;
+}
 /**
  * Wrap `buffer` into rows, locate the caret, and select a window of at most
  * `maxRows` rows that contains it.
@@ -62,7 +88,8 @@ export function displayWidth(text) {
  * to live in the reducer and would then need its own invalidation rules.
  */
 export function layoutComposer(input) {
-    const { buffer, cursor, active } = input;
+    const { buffer, active } = input;
+    const cursor = visualCursor(buffer, input.cursor);
     const cols = Math.max(1, Math.floor(input.cols));
     const maxRows = input.maxRows >= 1 ? Math.floor(input.maxRows) : 1;
     const spans = tokenSpans(buffer);
@@ -111,6 +138,7 @@ export function layoutComposer(input) {
         const ch = String.fromCodePoint(buffer.codePointAt(i));
         if (ch === '\n') {
             if (atCursor) {
+                ensureRoom(1);
                 cursorRowAbs = rows.length;
                 cursorCol = col;
             }
@@ -182,20 +210,33 @@ export function splitRowAtColumn(row, column) {
         else
             list.push({ text, kind });
     };
+    const cells = [];
+    let leading = '';
     for (const segment of row.segments) {
-        if (at !== null) {
-            push(after, segment.text, segment.kind);
-            continue;
-        }
         for (const ch of segment.text) {
-            if (at === null && x === column) {
-                at = { text: ch, kind: segment.kind };
+            if (charWidth(ch) === 0) {
+                const last = cells[cells.length - 1];
+                if (last)
+                    cells[cells.length - 1] = { ...last, text: last.text + ch };
+                else
+                    leading += ch;
             }
             else {
-                push(at === null ? before : after, ch, segment.kind);
+                cells.push({ text: leading + ch, kind: segment.kind });
+                leading = '';
             }
-            x += charWidth(ch);
         }
     }
+    // A zero-width-only row keeps its text before the explicitly budgeted space.
+    if (leading)
+        push(before, leading, row.segments[0]?.kind ?? 'text');
+    for (const cell of cells) {
+        const width = displayWidth(cell.text);
+        if (at === null && column >= x && column < x + width)
+            at = cell;
+        else
+            push(at === null ? before : after, cell.text, cell.kind);
+        x += width;
+    }
     return { before, at, after };
 }

package/dist/ui/exit-snapshot.d.ts

@@ -14,6 +14,15 @@
 import type { Entry, UsageTotal } from '../agent/reducer.js';
 export interface ExitSnapshot {
     entries: Entry[];
+    /**
+     * The session total, FORWARDED not copied.
+     *
+     * It gained `cacheReadTokens` / `cacheWriteTokens`
+     * (context-usage-gauge-accuracy §3.6) and this file needed no change for it,
+     * which is the point of referencing the reducer's type rather than restating
+     * its fields: `renderTranscriptText` reads the total through `promptTokensOf`,
+     * so the exit summary and the status bar cannot drift apart.
+     */
     usageTotal: UsageTotal;
     provider: string;
     model: string;

package/dist/ui/frame-differ.js

@@ -38,6 +38,7 @@
  *    mode of it firing spuriously is one extra full repaint.
  */
 import { MIN_FULLSCREEN_ROWS } from './layout/frame.js';
+import { matchInkErasePrefix } from './frame-parser.js';
 // ---------------------------------------------------------------------------
 // Constants — exact, so no call site ever re-derives an escape sequence.
 // ---------------------------------------------------------------------------
@@ -55,18 +56,6 @@ const ERASE_DOWN = `${CSI}J`;
 /** DEC private mode 2026 — begin/end synchronized update (F2, §3.3). */
 const SYNC_BEGIN = `${CSI}?2026h`;
 const SYNC_END = `${CSI}?2026l`;
-/**
- * `eraseLines(n)` for any n ≥ 1, anchored at the start of the chunk.
- *
- * FALLBACK ONLY (P2-3). Whenever `prev !== null` the differ already knows the
- * exact prefix it expects — `eraseLinesPrefix(prev.length + 1)` is a
- * deterministic string — so the hot path is `chunk.startsWith(expected)`:
- * linear, unambiguous, and it collapses step 7's `erased !== prev.length + 1`
- * test into the same comparison. This regex is reached only on the first
- * diffable chunk after a session start or an `invalidate()`, where no
- * expectation exists yet.
- */
-const ERASE_PREFIX_RE = /^(?:\x1b\[2K(?:\x1b\[1A)?)+\x1b\[G/;
 function cursorTo(row) {
     return `${CSI}${row};1H`;
 }
@@ -88,9 +77,6 @@ export function eraseLinesPrefix(count) {
     }
     return out + CURSOR_LEFT;
 }
-function countErases(prefix) {
-    return prefix.split(ERASE_LINE).length - 1;
-}
 export function createFrameDiffer(options) {
     /**
      * Last frame AS PAINTED — what is actually on the screen.
@@ -200,10 +186,7 @@ export function createFrameDiffer(options) {
             if (chunk.startsWith(expected))
                 return { prefix: expected, erased: prev.length + 1 };
         }
-        const m = ERASE_PREFIX_RE.exec(chunk);
-        if (m === null)
-            return null;
-        return { prefix: m[0], erased: countErases(m[0]) };
+        return matchInkErasePrefix(chunk);
     };
     /**
      * Full repaint — the first diffable frame of a session, every invalidation

package/dist/ui/frame-observer.d.ts

@@ -0,0 +1,17 @@
+import type { ScrollbarBridge } from './scrollbar-controller.js';
+export interface FrameSummary {
+    columns: number;
+    rows: number;
+    trackTop: number;
+    trackRows: number;
+}
+/** Observe before differ transformation, but acknowledge only after downstream write returns. */
+export declare function createFrameObserver(options: {
+    stdout: NodeJS.WriteStream;
+    terminal: NodeJS.WriteStream;
+    scrollbar: ScrollbarBridge;
+}): {
+    stdout: NodeJS.WriteStream;
+    dispose(): void;
+    invalidate(): void;
+};