@aragon-agent/cli 0.6.4 → 0.6.8

package/dist/ui/AutocompletePopup.d.ts

@@ -6,6 +6,7 @@
 import React from 'react';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
+import { type AutocompleteLayout } from './layout/autocomplete.js';
 export interface Suggestion {
     label: string;
     hint?: string;
@@ -16,6 +17,7 @@ interface AutocompletePopupProps {
     theme: Theme;
     caps: TermCapabilities;
     maxRows?: number;
+    layout?: AutocompleteLayout;
 }
-export declare function AutocompletePopup({ items, selected, theme, caps, maxRows, }: AutocompletePopupProps): React.ReactElement | null;
+export declare function AutocompletePopup({ items, selected, theme, caps, maxRows, layout, }: AutocompletePopupProps): React.ReactElement | null;
 export {};

package/dist/ui/AutocompletePopup.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { pickGlyphs } from './glyphs.js';
-const DEFAULT_MAX_ROWS = 6;
-export function AutocompletePopup({ items, selected, theme, caps, maxRows = DEFAULT_MAX_ROWS, }) {
-    if (items.length === 0)
+import { buildAutocompleteLayout } from './layout/autocomplete.js';
+export function AutocompletePopup({ items, selected, theme, caps, maxRows, layout, }) {
+    const projection = layout ?? buildAutocompleteLayout({ itemCount: items.length, selected, maxRows });
+    if (projection.rowCount === 0)
         return null;
     const glyphs = pickGlyphs(caps);
-    // Keep the highlighted row within a window of `maxRows`.
-    const start = Math.max(0, Math.min(selected - maxRows + 1, items.length - maxRows));
-    const windowStart = Math.max(0, start);
-    const visible = items.slice(windowStart, windowStart + maxRows);
-    const moreBelow = items.length - (windowStart + visible.length);
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: glyphs.boxStyle, borderColor: theme.border, paddingX: 1, children: [visible.map((item, i) => {
+    const { start: windowStart, count, moreBelow, showMore } = projection;
+    const visible = items.slice(windowStart, windowStart + count);
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: theme.border, paddingX: 1, children: [visible.map((item, i) => {
                 const idx = windowStart + i;
                 const active = idx === selected;
-                return (_jsxs(Text, { inverse: active, children: [_jsx(Text, { color: active ? undefined : theme.primary, children: item.label }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint] }) : null] }, item.label));
-            }), moreBelow > 0 && _jsxs(Text, { color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
+                return (_jsxs(Text, { inverse: active, wrap: "truncate", children: [_jsx(Text, { color: active ? undefined : theme.primary, children: item.label.replace(/\s+/g, ' ') }), item.hint ? _jsxs(Text, { color: theme.muted, children: ["  ", item.hint.replace(/\s+/g, ' ')] }) : null] }, idx));
+            }), showMore && _jsxs(Text, { wrap: "truncate", color: theme.muted, children: ["  +", moreBelow, " more"] })] }));
 }

package/dist/ui/BottomStatusRow.d.ts

@@ -11,7 +11,7 @@
  * box is its only `flexShrink={1}` child — so an extra chrome row does not make
  * the frame taller, Yoga takes the row out of the TRANSCRIPT. Meanwhile
  * `viewportRows()` keeps returning the old number to `ScrollViewport`,
- * `selectWindow`'s spacers, `overlayMaxRows`, `popupMaxRows` and `todoRailRows`.
+ * `selectWindow`'s spacers, `overlayMaxRows`, `popupMaxRows` and `buildTodoRailLayout`.
  * The transcript would draw one row shorter than every consumer believes, ONLY
  * WHILE A RUN IS IN FLIGHT, so the layout would shift on submit and shift back on
  * `agent_end`.

package/dist/ui/Composer.d.ts

@@ -9,20 +9,26 @@
  * "the input is no longer empty", and routing that through App would re-render
  * the transcript on the first keystroke of every message.
  *
- * As of v0.4.0 this is the ONLY place keybinding hints are shown — the status
- * bar's duplicate cluster is gone (§4.6). Two hints for the same keys, one of
- * them 31 columns wide, were both redundant and the reason the status bar had a
- * `cols >= 110` breakpoint.
+ * The fixed status row retains emergency and history-navigation hints while
+ * this footer scrolls outside the viewport. Editor state stays mounted.
  */
 import React from 'react';
+import { type DOMElement } from 'ink';
 import type { Theme } from './theme.js';
 import type { TermCapabilities } from './capabilities.js';
 import { pickGlyphs } from './glyphs.js';
 import { type CommandOption } from './PromptInput.js';
 import { type AgentMode } from '../agent/agent-mode.js';
 export interface ComposerProps {
+    cols?: number;
+    cursorVisible?: boolean;
+    onInteraction?: () => void;
+    measureRef?: React.RefObject<DOMElement>;
     /** False while an overlay owns the keyboard (the input is visually blurred). */
     isActive: boolean;
+    reducedMotion?: boolean;
+    onEscape?: () => void;
+    onEscapeDismiss?: () => void;
     running: boolean;
     history: string[];
     commands: CommandOption[];
@@ -49,6 +55,8 @@ export interface ComposerProps {
      */
     modeToggleKey?: string;
     popupMaxRows?: number;
+    popupMaxHeight?: number;
+    onPopupRowsChange?: (rows: number) => void;
     /**
      * Rows of newer output below the viewport, forwarded to the input row's chip
      * (tui-selection-and-scroll-follow §4.2 / G7).
@@ -117,5 +125,5 @@ declare function hintText(opts: {
  * than fishing the string out of a rendered frame.
  */
 export declare const hintTextForTest: typeof hintText;
-export declare function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services, modeToggleKey, popupMaxRows, scrolledLines, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }: ComposerProps): React.ReactElement;
+export declare function Composer({ cols, cursorVisible, onInteraction, measureRef, isActive, reducedMotion, onEscape, onEscapeDismiss, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services, modeToggleKey, popupMaxRows, popupMaxHeight, onPopupRowsChange, scrolledLines, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }: ComposerProps): React.ReactElement;
 export {};

package/dist/ui/Composer.js

@@ -10,10 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * "the input is no longer empty", and routing that through App would re-render
  * the transcript on the first keystroke of every message.
  *
- * As of v0.4.0 this is the ONLY place keybinding hints are shown — the status
- * bar's duplicate cluster is gone (§4.6). Two hints for the same keys, one of
- * them 31 columns wide, were both redundant and the reason the status bar had a
- * `cols >= 110` breakpoint.
+ * The fixed status row retains emergency and history-navigation hints while
+ * this footer scrolls outside the viewport. Editor state stays mounted.
  */
 import { useCallback, useState } from 'react';
 import { Box, Text } from 'ink';
@@ -46,15 +44,13 @@ function hintText(opts) {
         if (services > 0) {
             return [
                 `${glyphs.enterKey} steer`,
-                // Rung two is named because the whole point of the ladder is that the
-                // first press can fail; a user who does not know there is a second press
-                // is left exactly where the reported screenshot left them.
-                `esc abort${glyphs.times}2 force`,
+                // Confirmation is named even when service controls also need space.
+                `esc${glyphs.times}2 interrupt`,
                 `ctrl+c stop ${services}`,
                 `ctrl+c${glyphs.times}2 exit`,
             ].join(dot);
         }
-        return [`${glyphs.enterKey} steer`, 'esc abort', `ctrl+c${glyphs.times}2 exit`].join(dot);
+        return [`${glyphs.enterKey} steer`, `esc${glyphs.times}2 interrupt`, `ctrl+c${glyphs.times}2 exit`].join(dot);
     }
     // The hint names the DESTINATION, not the current state — the correct label
     // for a toggle affordance, and the reason the mode word here is the OPPOSITE
@@ -90,7 +86,7 @@ function hintText(opts) {
  * than fishing the string out of a rendered frame.
  */
 export const hintTextForTest = hintText;
-export function Composer({ isActive, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services = 0, modeToggleKey = MODE_TOGGLE_KEYS.primary, popupMaxRows, scrolledLines = 0, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }) {
+export function Composer({ cols, cursorVisible, onInteraction, measureRef, isActive, reducedMotion, onEscape, onEscapeDismiss, running, history, commands, cwd, showHint, submitCount, hintsEnabled, agentMode, services = 0, modeToggleKey = MODE_TOGGLE_KEYS.primary, popupMaxRows, popupMaxHeight, onPopupRowsChange, scrolledLines = 0, onDraftRows, onNotice, theme, caps, onSubmit, onHelp, }) {
     const [hasDraft, setHasDraft] = useState(false);
     const onDraftChange = useCallback((next) => {
         setHasDraft(next.hasDraft);
@@ -110,7 +106,7 @@ export function Composer({ isActive, running, history, commands, cwd, showHint,
                     : theme.idleBorder ?? theme.border;
     const glyphs = pickGlyphs(caps);
     const visible = showHint && hintsEnabled;
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(PromptInput, { isActive: isActive, running: running, history: history, commands: commands, cwd: cwd, theme: theme, caps: caps, popupMaxRows: popupMaxRows, onSubmit: onSubmit, onHelp: onHelp, agentMode: agentMode, bordered: { color: borderColor }, onDraftChange: onDraftChange, onNotice: onNotice, scrolledLines: scrolledLines }), visible && (
+    return (_jsxs(Box, { ref: measureRef, flexDirection: "column", flexShrink: 0, children: [_jsx(PromptInput, { cols: cols, cursorVisible: cursorVisible, onInteraction: onInteraction, isActive: isActive, reducedMotion: reducedMotion, onEscape: onEscape, onEscapeDismiss: onEscapeDismiss, running: running, history: history, commands: commands, cwd: cwd, theme: theme, caps: caps, popupMaxRows: popupMaxRows, popupMaxHeight: popupMaxHeight, onPopupRowsChange: onPopupRowsChange, onSubmit: onSubmit, onHelp: onHelp, agentMode: agentMode, bordered: { color: borderColor }, onDraftChange: onDraftChange, onNotice: onNotice, scrolledLines: scrolledLines }), visible && (
             // The chip rides the EXISTING hint row rather than adding one, so it
             // costs zero rows on a 24-row terminal.
             _jsxs(Box, { flexDirection: "row", flexShrink: 0, children: [_jsx(Text, { children: '  ' }), _jsx(ModeChip, { mode: agentMode, theme: theme, caps: caps }), _jsx(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: hintText({

package/dist/ui/PromptCaret.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface PromptCaretProps {
+    text: string;
+    active: boolean;
+    reducedMotion: boolean;
+    colorLevel: 0 | 1 | 2 | 3;
+    color?: string;
+    resetKey: object;
+}
+/** The only blinking state belongs to this leaf, never to the editor. */
+export declare function PromptCaret({ text, active, reducedMotion, colorLevel, color, resetKey, }: PromptCaretProps): React.ReactElement;

package/dist/ui/PromptCaret.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from 'react';
+import { Text } from 'ink';
+import { displayWidth } from './composer-rows.js';
+function monochromeMarker(text) {
+    // Ink's output grid advances for combining marks, even though they have no
+    // terminal width. Retain them in both phases so its cell count stays stable.
+    const replace = (marker) => Array.from(text, (point) => {
+        const width = displayWidth(point);
+        return width > 0 ? marker.repeat(width) : point;
+    }).join('');
+    const underline = replace('_');
+    return underline === text ? replace('^') : underline;
+}
+/** The only blinking state belongs to this leaf, never to the editor. */
+export function PromptCaret({ text, active, reducedMotion, colorLevel, color, resetKey, }) {
+    const [visible, setVisible] = useState(true);
+    useLayoutEffect(() => {
+        setVisible(true);
+        if (!active || reducedMotion)
+            return;
+        const timer = setInterval(() => setVisible((previous) => !previous), 500);
+        return () => clearInterval(timer);
+    }, [resetKey, active, reducedMotion]);
+    const bright = active && (reducedMotion || visible);
+    let content = text;
+    if (bright && colorLevel === 0) {
+        content = monochromeMarker(text);
+    }
+    return _jsx(Text, { color: color, inverse: bright && colorLevel > 0, children: content });
+}

package/dist/ui/PromptInput.d.ts

@@ -31,6 +31,9 @@ export interface CommandOption {
     description: string;
 }
 interface PromptInputProps {
+    cols?: number;
+    cursorVisible?: boolean;
+    onInteraction?: () => void;
     isActive: boolean;
     running: boolean;
     history: string[];
@@ -41,15 +44,18 @@ interface PromptInputProps {
     /**
      * Row budget for the completion popup (§5.2 / R-14).
      *
-     * The popup renders INSIDE this component, inside the shell's `flexShrink={0}`
-     * bottom chrome, and can add up to 9 rows. On a short terminal that pushes the
-     * status bar past the frame height, where the root box's `overflow: hidden`
-     * clips it away — the one piece of chrome R2 promises is always visible.
-     * `App` derives this from `budget.ts` so the popup shrinks instead.
+     * The popup shares the scrolling footer with the editor. Its height budget
+     * reserves visible message rows without changing the viewport or TODO rail.
      */
     popupMaxRows?: number;
+    /** Total menu rows, including borders and the overflow hint. */
+    popupMaxHeight?: number;
+    onPopupRowsChange?: (rows: number) => void;
     onSubmit: (text: string) => void;
     onHelp?: () => void;
+    onEscape?: () => void;
+    onEscapeDismiss?: () => void;
+    reducedMotion?: boolean;
     /**
      * Mirror of the session mode. Read for the placeholder only — the toggle
      * itself belongs to `App`, and this component's job is to get out of its way
@@ -173,5 +179,5 @@ export declare function fileTokenAt(buffer: string, cursor: number): {
     end: number;
     query: string;
 } | null;
-export declare function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines, }: PromptInputProps): React.ReactElement;
+export declare function PromptInput({ cols: colsProp, cursorVisible, onInteraction, isActive, running, history, commands, cwd, theme, caps, popupMaxRows, popupMaxHeight, onPopupRowsChange, agentMode, onSubmit, onHelp, onEscape, onEscapeDismiss, reducedMotion, bordered, onDraftChange, onNotice, scrolledLines, }: PromptInputProps): React.ReactElement;
 export {};

package/dist/ui/PromptInput.js

@@ -19,12 +19,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * stays a plain `useState` because it is written from the debounced glob effect
  * rather than from a key.
  */
-import { useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { glob as tinyGlob } from 'tinyglobby';
 import { pickGlyphs } from './glyphs.js';
+import { PromptCaret } from './PromptCaret.js';
 import { recognize } from '../input/keymap.js';
 import { AutocompletePopup } from './AutocompletePopup.js';
+import { buildAutocompleteLayout } from './layout/autocomplete.js';
 import { editorReducer, INITIAL_EDITOR_STATE, } from './editor-reducer.js';
 import { hasPasteFrame, splitPasteFrames } from './paste-frames.js';
 import { allocatePasteId, expandPastes, expandRangeOverTokens } from './paste-tokens.js';
@@ -42,8 +44,8 @@ const CHIP_FULL_MIN_COLS = 64;
  * reads `999+`.
  */
 const CHIP_MAX_N = 999;
-/** `↓ 999+ new lines · PgDn` — the widest form the full branch can produce. */
-const CHIP_FULL_CELLS = 24;
+/** `↓ 999+ lines below · PgDn` — the widest form the full branch can produce. */
+const CHIP_FULL_CELLS = 27;
 /** `↓999+` — the widest form the terse branch can produce. */
 const CHIP_TERSE_CELLS = 6;
 /**
@@ -63,7 +65,7 @@ export function scrollChip(scrolledLines, cols, glyphs) {
     }
     const noun = n === 1 ? 'line' : 'lines';
     return {
-        text: `${glyphs.arrowDown} ${shown} new ${noun} ${glyphs.midDot} PgDn`,
+        text: `${glyphs.arrowDown} ${shown} ${noun} below ${glyphs.midDot} PgDn`,
         cells: CHIP_FULL_CELLS,
     };
 }
@@ -246,7 +248,7 @@ function isControlSeq(input) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, agentMode, onSubmit, onHelp, bordered, onDraftChange, onNotice, scrolledLines = 0, }) {
+export function PromptInput({ cols: colsProp, cursorVisible = true, onInteraction, isActive, running, history, commands, cwd, theme, caps, popupMaxRows, popupMaxHeight, onPopupRowsChange, agentMode, onSubmit, onHelp, onEscape, onEscapeDismiss, reducedMotion = false, bordered, onDraftChange, onNotice, scrolledLines = 0, }) {
     const { stdout } = useStdout();
     const [editor, dispatch] = useReducer(editorReducer, INITIAL_EDITOR_STATE);
     const { buffer, cursor, historyIndex, dismissed, sel } = editor;
@@ -263,6 +265,19 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             ? fileMatches.map((p) => ({ label: p }))
             : [];
     const clampedSel = popupItems.length > 0 ? Math.min(sel, popupItems.length - 1) : 0;
+    const popupLayout = buildAutocompleteLayout({
+        itemCount: isActive ? popupItems.length : 0,
+        selected: clampedSel,
+        maxRows: popupMaxRows,
+        maxHeight: popupMaxHeight,
+    });
+    const popupVisible = isActive && popupLayout.rowCount > 0;
+    // Report on every mount, including zero. Cleanup belongs to a separate
+    // effect so changing height does not publish an intermediate zero budget.
+    useLayoutEffect(() => {
+        onPopupRowsChange?.(popupLayout.rowCount);
+    }, [onPopupRowsChange, popupLayout.rowCount]);
+    useLayoutEffect(() => () => onPopupRowsChange?.(0), [onPopupRowsChange]);
     // --- Debounced `@file` scan. ---------------------------------------------
     useEffect(() => {
         if (fileQuery === null || fileQuery.length < 1) {
@@ -300,7 +315,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
     // Deriving it twice — once for the frame and once for the budget — is exactly
     // the trap `BottomStatusRow.tsx:5-27` documents.
     const glyphs = pickGlyphs(caps);
-    const cols = stdout?.columns ?? 80;
+    const cols = colsProp ?? stdout?.columns ?? 80;
     const terminalRows = stdout?.rows ?? 24;
     // Full-screen only: inline mode has no self-drawn viewport, so `scrolledLines`
     // is always 0 there and the branch is unreachable rather than merely unused.
@@ -316,7 +331,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         cursor,
         cols: wrapCols,
         maxRows: draftMaxRows(terminalRows),
-        active: isActive,
+        active: isActive && cursorVisible,
     });
     // TWO PASSES, AND THE SECOND ONE IS LOAD-BEARING (I-8). The overflow indicator
     // rides the last rendered row INSIDE the box the draft wraps in, so its cells
@@ -334,6 +349,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
     const usableCols = overflows ? Math.max(8, baseCols - OVERFLOW_CELLS - 1) : baseCols;
     const layout = overflows ? measure(usableCols) : wide;
     const draftRowCount = Math.max(1, layout.rows.length);
+    const caretResetKey = useMemo(() => ({}), [buffer, cursor, isActive, usableCols]);
     // --- Draft presence and height, reported only on a transition. -----------
     // Notifying on every keystroke would re-render the whole App tree per key. The
     // row count changes on a line break or a wrap boundary, not per character
@@ -354,6 +370,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
     // by line. Two dispatches from one key would put the legacy root back to two
     // commits and undo the whole of F3 for that branch.
     const insert = (text) => {
+        onInteraction?.();
         dispatch({ type: 'insert', text });
     };
     /**
@@ -365,6 +382,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
      * needs. `clear` releases every payload in the same dispatch.
      */
     const submit = (text) => {
+        onInteraction?.();
         onSubmit(expandPastes(text, editor.pastes));
         dispatch({ type: 'clear' });
     };
@@ -390,6 +408,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         dispatch({ type: 'recall', buffer: value, cursor: value.length, historyIndex: idx });
     };
     const completeSelection = () => {
+        onInteraction?.();
         const chosen = popupItems[clampedSel];
         if (!chosen)
             return;
@@ -403,6 +422,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         }
     };
     const verticalOrHistory = (dir) => {
+        onInteraction?.();
         const moved = moveVertical(buffer, cursor, dir);
         if (moved) {
             dispatch({ type: 'moveCursor', cursor: moved.cursor });
@@ -427,13 +447,17 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         // appears with a popup open and is therefore easy to ship (AC-P3 / R-P2).
         if (key.tab && key.shift)
             return;
+        if (key.pageUp || key.pageDown || (key.shift && (key.upArrow || key.downArrow)))
+            return;
         // Popup navigation owns Up/Down/Tab/→/Enter/Esc while it is open.
-        if (popupItems.length > 0) {
+        if (popupVisible) {
             if (key.upArrow) {
+                onInteraction?.();
                 dispatch({ type: 'select', sel: Math.max(0, clampedSel - 1) });
                 return;
             }
             if (key.downArrow) {
+                onInteraction?.();
                 dispatch({ type: 'select', sel: Math.min(popupItems.length - 1, clampedSel + 1) });
                 return;
             }
@@ -449,15 +473,19 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             }
             if (key.escape) {
                 dispatch({ type: 'dismiss' });
+                onEscapeDismiss?.();
                 return;
             }
             // Any other key falls through so typing keeps filtering the popup.
         }
-        if (key.escape)
-            return; // App owns abort / close-overlay.
+        if (key.escape) {
+            onEscape?.();
+            return;
+        }
         // Line-editing intents (Home/End/word/kill) recognized from raw keys.
         const intent = recognize(input, key);
         if (intent) {
+            onInteraction?.();
             const next = applyEdit(buffer, cursor, intent);
             dispatch({ type: 'replace', buffer: next.buffer, cursor: next.cursor });
             return;
@@ -475,6 +503,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             return;
         }
         if (key.backspace || key.delete) {
+            onInteraction?.();
             // The `cursor > 0` guard lives in the reducer now, so this branch is one
             // unconditional dispatch and a no-op at the left edge returns the same
             // state object — which React bails out on, exactly as the old
@@ -483,11 +512,15 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             return;
         }
         if (key.leftArrow) {
-            dispatch({ type: 'moveCursor', cursor: Math.max(0, cursor - 1) });
+            onInteraction?.();
+            const step = cursor >= 2 && (buffer.codePointAt(cursor - 2) ?? 0) > 0xffff ? 2 : 1;
+            dispatch({ type: 'moveCursor', cursor: Math.max(0, cursor - step) });
             return;
         }
         if (key.rightArrow) {
-            dispatch({ type: 'moveCursor', cursor: Math.min(buffer.length, cursor + 1) });
+            onInteraction?.();
+            const step = (buffer.codePointAt(cursor) ?? 0) > 0xffff ? 2 : 1;
+            dispatch({ type: 'moveCursor', cursor: Math.min(buffer.length, cursor + step) });
             return;
         }
         // `!key.shift` is load-bearing: Shift+↑/↓ is the viewport's line-scroll
@@ -525,6 +558,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
                 onNotice?.('warn', refusal);
                 return;
             }
+            onInteraction?.();
             dispatch({ type: 'input', segments });
             return;
         }
@@ -535,7 +569,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
     const marker = running ? glyphs.steer : glyphs.caret;
     const markerColor = running ? theme.toolRunning : theme.primary;
     const placeholder = running
-        ? `Type to steer the run, Esc to abort${glyphs.ellipsis}`
+        ? `Type to steer the run, Esc twice to interrupt${glyphs.ellipsis}`
         : agentMode === 'plan'
             ? `Describe what you want to build; I'll research and plan it first${glyphs.ellipsis}`
             : `Send a message (/ for commands, @ for files)${glyphs.ellipsis}`;
@@ -548,9 +582,9 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
         // The caret is drawn as one inverse cell, split at the column
         // `layoutComposer` reported — the same width table it wrapped with (I-9).
         const split = splitRowAtColumn(row, layout.cursorCol);
-        return (_jsxs(_Fragment, { children: [renderSegments(split.before, `b${i}.`), _jsx(Text, { inverse: true, children: split.at ? split.at.text : ' ' }), renderSegments(split.after, `a${i}.`)] }));
+        return (_jsxs(_Fragment, { children: [renderSegments(split.before, `b${i}.`), _jsx(PromptCaret, { text: split.at ? split.at.text : ' ', active: isActive && cursorVisible, reducedMotion: reducedMotion, colorLevel: caps.colorLevel, resetKey: caretResetKey, color: split.at?.kind === 'token' ? tokenColor : undefined }), renderSegments(split.after, `a${i}.`)] }));
     });
-    const inputRow = (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: markerColor, bold: true, children: [marker, ' '] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: buffer.length === 0 ? (_jsx(Text, { color: theme.muted, children: placeholder })) : (rowNodes.map((node, i) => overflow && i === rowNodes.length - 1 ? (
+    const inputRow = (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: markerColor, bold: true, children: [marker, ' '] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: buffer.length === 0 ? (_jsxs(Text, { wrap: "truncate", color: theme.muted, children: [_jsx(PromptCaret, { text: String.fromCodePoint(placeholder.codePointAt(0)), active: isActive && cursorVisible, reducedMotion: reducedMotion, colorLevel: caps.colorLevel, color: theme.muted, resetKey: caretResetKey }), placeholder.slice(String.fromCodePoint(placeholder.codePointAt(0)).length)] })) : (rowNodes.map((node, i) => overflow && i === rowNodes.length - 1 ? (
                 // The overflow indicator rides the LAST rendered row rather than
                 // taking one of its own: an extra row would put the composer's
                 // real height one above the `draftRows` it just reported (I-8).
@@ -565,5 +599,5 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
             // the user is typing — `↓ 9` becomes `↓ 10` becomes `↓ 100` — and every
             // change would otherwise re-wrap a draft that fills the line.
             _jsx(Box, { flexShrink: 0, alignSelf: "flex-start", marginLeft: 1, width: chip.cells, justifyContent: "flex-end", children: _jsx(Text, { wrap: "truncate", color: theme.hintFg ?? theme.muted, children: chip.text }) }))] }));
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [popupItems.length > 0 && (_jsx(AutocompletePopup, { items: popupItems, selected: clampedSel, theme: theme, caps: caps, maxRows: popupMaxRows })), bordered ? (_jsx(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: bordered.color, paddingX: 1, children: inputRow })) : (inputRow)] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [popupVisible && (_jsx(AutocompletePopup, { items: popupItems, selected: clampedSel, theme: theme, caps: caps, maxRows: popupMaxRows, layout: popupLayout })), bordered ? (_jsx(Box, { flexDirection: "column", flexShrink: 0, borderStyle: glyphs.boxStyle, borderColor: bordered.color, paddingX: 1, children: inputRow })) : (inputRow)] }));
 }

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,24 @@ 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 {
+    interruptHint?: string;
     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;
@@ -187,16 +204,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 {};