@aragon-agent/cli 0.6.3 → 0.6.7

package/dist/ui/StatusBar.d.ts

@@ -1,8 +1,15 @@
 /**
  * Status bar (spec §4.8). Width-aware, borderless, EXACTLY one row: a left
  * cluster (run status, model, thinking level) and a right cluster (context
- * gauge, tokens, cost, tokens/sec + elapsed while running, off-bottom `↑N`).
- * Clusters drop out gracefully on narrow terminals.
+ * gauge, occupancy pair, session total, cost, tokens/sec + elapsed while
+ * running, off-bottom `↑N`). Clusters drop out gracefully on narrow terminals.
+ *
+ * THE RIGHT CLUSTER'S WIDTH LADDER (context-usage-gauge-accuracy §3.6):
+ *
+ *   >= 96   [####....] 43%  86.0k/200.0k  total 1.2M^ 48.0k v  $3.21  12 tok/s  1m02s
+ *   72-95   [####....] 43%  86.0k/200.0k  $3.21
+ *   60-71   [####....] 43%  $3.21
+ *   < 60    43%  $3.21
  *
  * Dropping the round border here buys back 3 rows of a 24-row terminal — an
  * eighth of the screen was being spent framing a single line of text.
@@ -11,14 +18,23 @@ import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
 import type { UsageTotal } from '../agent/reducer.js';
+import type { ContextUsageSnapshot } from '../compaction/types.js';
 import { type AgentMode } from '../agent/agent-mode.js';
 interface StatusBarProps {
     model: string;
     provider: string;
     usageTotal: UsageTotal;
-    contextTokens: number;
-    contextWindow: number;
-    contextWindowKnown: boolean;
+    /**
+     * Context occupancy, as one object (context-usage-gauge-accuracy §4.3).
+     *
+     * IT REPLACED FOUR PARALLEL PROPS - `contextTokens`, `contextWindow`,
+     * `contextWindowKnown`, `contextEstimated`. Four props describing one reading
+     * are four chances for a caller to update three of them, which is the props-
+     * layer form of the "many writers" defect this feature removed from the
+     * reducer. `usageTotal` stays separate because it genuinely IS another
+     * quantity: session spend, not occupancy.
+     */
+    context: ContextUsageSnapshot;
     status: 'idle' | 'running';
     elapsedMs: number;
     thinkingLevel: string;
@@ -88,6 +104,25 @@ interface StatusBarProps {
         done: number;
         total: number;
     };
+    /**
+     * Live background services (background-service-supervision §3.8), or absent
+     * when none are running — an ordinary session's bar is then unchanged.
+     *
+     * LEFT CLUSTER, after the todo chip, and it DEGRADES rather than hiding below
+     * `PROC_LIMITS.statusCompactCols`. That is the `todoActive` / `teamActive`
+     * ladder rather than `compactionActive`'s hide-below-threshold one, and the
+     * choice is deliberate: `compact` and `fast` describe something the CLI is
+     * doing to itself, whereas this is a PROCESS ON THE USER'S MACHINE HOLDING A
+     * PORT. A narrow terminal is a reason to shorten it, never a reason to stop
+     * saying it.
+     *
+     * `live` counts `starting | ready | running`. The transcript records events
+     * about a service (D-11); this is where "what is running right now" lives,
+     * alongside `/bg` and `bash_output`.
+     */
+    servicesActive?: {
+        live: number;
+    };
     /**
      * Live retry state (llm-api-retry-backoff §6.6), or absent when nothing is
      * retrying — an ordinary session's bar is then unchanged.
@@ -168,16 +203,6 @@ interface StatusBarProps {
         warn: number;
         high: number;
     };
-    /**
-     * Whether `contextTokens` is a DERIVED figure rather than a measured one.
-     *
-     * It WIDENS THE EXISTING `~`, it does not add a second marker. Today that
-     * prefix means "the window is a guess" (`contextWindowKnown`); with compaction
-     * it also has to mean "the occupancy is a guess", because the bar is written
-     * from an estimate for one turn after every compaction so it can fall
-     * immediately (§6.2 / AC-5).
-     */
-    contextEstimated?: boolean;
 }
 export declare function StatusBar(props: StatusBarProps): React.ReactElement;
 export {};

package/dist/ui/StatusBar.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 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';
@@ -9,8 +9,29 @@ import { FAST_LIMITS } from '../fast/limits.js';
 import { COMPACTION_LIMITS } from '../compaction/limits.js';
 import { TEAM_LIMITS } from '../team/limits.js';
 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
@@ -30,23 +51,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, 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.
@@ -66,5 +106,7 @@ export function StatusBar(props) {
                                 ? `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}]`] })), 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)] }))] })] }));
+                                : `[${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 >= 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

@@ -40,6 +40,7 @@ import { TodoCard, todoCardColor } from './entries/TodoCard.js';
 import { RetryCard, retryCardColor } from './entries/RetryCard.js';
 import { FastCard, fastCardColor } from './entries/FastCard.js';
 import { CompactionCard, compactionCardColor } from './entries/CompactionCard.js';
+import { ServiceCard, serviceCardColor, serviceGlyph } from './entries/ServiceCard.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';
@@ -107,6 +108,31 @@ export function computeSettledCount(entries, expandedToolIds) {
         // which is the other half.
         if (e.kind === 'compaction' && e.live)
             break;
+        /**
+         * A SERVICE BLOCKS ONLY WHILE IT IS `starting` (D-11 / P0-4).
+         *
+         * Every clause above is bounded by an OPERATION — a dispatch, a turn, one
+         * LLM call, one countdown — which is why each of them can safely pin this
+         * prefix scan: the wait is short and it ends. A service is bounded by the
+         * USER'S INTENT. A dev server left up for an hour is the normal case, not
+         * the pathological one, so treating it like the other five would pin the
+         * boundary at the card and re-render the whole transcript from there on
+         * EVERY FRAME, FOREVER, on exactly the long sessions where it is least
+         * likely to be noticed.
+         *
+         * `starting` is different, and it is different for the reason that makes
+         * every other clause here legitimate: it is bounded by `readyTimeoutMs`,
+         * after which the supervisor calls the service `running` whatever happened.
+         *
+         * The cost of the rest is that a printed card stops mirroring live state —
+         * which is what a transcript IS. A terminal transition appends a NEW one-row
+         * entry rather than rewriting a card `<Static>` has already drawn, and live
+         * state lives in the status chip, `/bg` and `bash_output`. Weakening this to
+         * "any non-terminal service blocks" is the change D-11 exists to prevent;
+         * see condition 5 of the design's review verdict before making it.
+         */
+        if (e.kind === 'service' && e.status === 'starting')
+            break;
         count = i + 1;
     }
     return count;
@@ -148,7 +174,7 @@ function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion,
     const frame = (glyph, color, children) => (_jsx(EntryFrame, { glyph: glyph, color: color, continuation: glyphs.railVertical, separation: separation, spacerColor: theme.border, children: children }));
     switch (entry.kind) {
         case 'user':
-            return frame(glyphs.user, theme.user, _jsx(UserEntry, { text: entry.text, theme: theme }));
+            return frame(glyphs.user, theme.user, _jsx(UserEntry, { text: entry.text, theme: theme, caps: caps }));
         case 'assistant': {
             // While text streams, the spinner IS the role marker. Braille dots are
             // both an animation and a Unicode-only glyph, so reduced motion and an
@@ -208,6 +234,8 @@ function EntryViewImpl({ entry, prev, expanded, thinkingVisible, reducedMotion,
                 elapsedMs: entry.live && nowSec !== undefined && entry.startedAt !== undefined
                     ? Math.max(0, nowSec * 1000 - entry.startedAt)
                     : undefined, live: entry.live, expanded: expanded, reducedMotion: reducedMotion, theme: theme, caps: caps }));
+        case 'service':
+            return frame(serviceGlyph(entry, glyphs), serviceCardColor(entry, theme), _jsx(ServiceCard, { serviceId: entry.serviceId, command: entry.command, status: entry.status, url: entry.url, port: entry.port, exitCode: entry.exitCode, startedAt: entry.startedAt, readyAt: entry.readyAt, endedAt: entry.endedAt, rows: entry.rows, terminal: entry.terminal, killIncomplete: entry.killIncomplete, expanded: expanded, reducedMotion: reducedMotion, 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:

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-limits.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Composer and transcript row ceilings (tui-paste-handling section 5.5 / 5.6).
+ *
+ * Structural, not policy (D-10): the only user-facing key this feature adds is
+ * the boolean `paste`. Everything here is a bound that keeps the frame's row
+ * arithmetic true, and every one of them is switchable by returning a larger
+ * number rather than by a config flag.
+ */
+/** At or below BOTH of these a paste is inserted verbatim rather than collapsed. */
+export declare const PASTE_INLINE_MAX_LINES = 6;
+export declare const PASTE_INLINE_MAX_CHARS = 400;
+/**
+ * Rows one submitted user message may RENDER in the transcript, before the
+ * `... +N more lines` tail (G7).
+ *
+ * `ui/layout/virtual-window.ts` imports this rather than duplicating the number,
+ * unlike `DIFF_COLLAPSED_LINES` / `TOOL_LIVE_TAIL_ROWS` beside it: I-13 makes the
+ * render cap and the height estimate THE SAME NUMBER, and there is no
+ * import-cycle reason here for them to be two.
+ */
+export declare const USER_ENTRY_MAX_ROWS = 40;
+/**
+ * Ceiling on the composer's DRAFT rows at a given terminal height.
+ *
+ * Non-decreasing in `terminalRows`. Returning `Infinity` reduces the whole
+ * height-bound layer to the rung below it (section 12, S4), which is what makes
+ * that stage revertible on its own.
+ */
+export declare function draftMaxRows(terminalRows: number): number;
+/** The terminal height at which `draftMaxRows` steps from 3 to 6. Pinned by test. */
+export declare const DRAFT_MAX_ROWS_HINT_TIER = 20;

package/dist/ui/composer-limits.js

@@ -0,0 +1,50 @@
+/**
+ * Composer and transcript row ceilings (tui-paste-handling section 5.5 / 5.6).
+ *
+ * Structural, not policy (D-10): the only user-facing key this feature adds is
+ * the boolean `paste`. Everything here is a bound that keeps the frame's row
+ * arithmetic true, and every one of them is switchable by returning a larger
+ * number rather than by a config flag.
+ */
+/** At or below BOTH of these a paste is inserted verbatim rather than collapsed. */
+export const PASTE_INLINE_MAX_LINES = 6;
+export const PASTE_INLINE_MAX_CHARS = 400;
+/**
+ * Rows one submitted user message may RENDER in the transcript, before the
+ * `... +N more lines` tail (G7).
+ *
+ * `ui/layout/virtual-window.ts` imports this rather than duplicating the number,
+ * unlike `DIFF_COLLAPSED_LINES` / `TOOL_LIVE_TAIL_ROWS` beside it: I-13 makes the
+ * render cap and the height estimate THE SAME NUMBER, and there is no
+ * import-cycle reason here for them to be two.
+ */
+export const USER_ENTRY_MAX_ROWS = 40;
+/**
+ * The terminal height at which the composer's hint row starts to fit.
+ *
+ * DELIBERATELY A SECOND COPY of `ui/layout/budget.ts::HINT_MIN_ROWS` rather than
+ * an import: `budget.ts` calls `draftMaxRows` to clamp its composer term, so an
+ * import in this direction would close an ESM cycle whose only protection is
+ * that neither side reads the other at module scope -- true today, and a
+ * confusing TDZ crash the first time someone hoists a use. `budget.test.ts`
+ * asserts the two numbers are equal, so they cannot drift in silence.
+ */
+const DRAFT_TIER_MIN_ROWS = 20;
+/**
+ * Ceiling on the composer's DRAFT rows at a given terminal height.
+ *
+ * Non-decreasing in `terminalRows`. Returning `Infinity` reduces the whole
+ * height-bound layer to the rung below it (section 12, S4), which is what makes
+ * that stage revertible on its own.
+ */
+export function draftMaxRows(terminalRows) {
+    if (!Number.isFinite(terminalRows))
+        return 3;
+    if (terminalRows >= 30)
+        return 10;
+    if (terminalRows >= DRAFT_TIER_MIN_ROWS)
+        return 6;
+    return 3;
+}
+/** The terminal height at which `draftMaxRows` steps from 3 to 6. Pinned by test. */
+export const DRAFT_MAX_ROWS_HINT_TIER = DRAFT_TIER_MIN_ROWS;