@aragon-agent/cli 0.6.7 → 0.6.8

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,11 +44,8 @@ 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. */
@@ -53,6 +53,9 @@ interface PromptInputProps {
     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
@@ -176,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, popupMaxHeight, onPopupRowsChange, 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,10 +19,11 @@ 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, useLayoutEffect, 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';
@@ -43,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;
 /**
@@ -64,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,
     };
 }
@@ -247,7 +248,7 @@ function isControlSeq(input) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function PromptInput({ isActive, running, history, commands, cwd, theme, caps, popupMaxRows, popupMaxHeight, onPopupRowsChange, 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;
@@ -314,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.
@@ -330,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
@@ -348,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
@@ -368,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 });
     };
     /**
@@ -379,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' });
     };
@@ -404,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;
@@ -417,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 });
@@ -441,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 (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;
             }
@@ -463,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;
@@ -489,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
@@ -497,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
@@ -539,6 +558,7 @@ export function PromptInput({ isActive, running, history, commands, cwd, theme,
                 onNotice?.('warn', refusal);
                 return;
             }
+            onInteraction?.();
             dispatch({ type: 'input', segments });
             return;
         }
@@ -549,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}`;
@@ -562,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, { wrap: "truncate", 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).

package/dist/ui/StatusBar.d.ts

@@ -21,6 +21,7 @@ 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;

package/dist/ui/StatusBar.js

@@ -1,4 +1,5 @@
-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, promptTokensOf } from '../agent/usage.js';
@@ -95,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
@@ -102,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 >= 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)] }))] })] }));
+    _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/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/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/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;
+};

package/dist/ui/frame-observer.js

@@ -0,0 +1,81 @@
+import stripAnsi from 'strip-ansi';
+import stringWidth from 'string-width';
+import { parseInkFrame } from './frame-parser.js';
+import { pickGlyphs } from './glyphs.js';
+function summarizeFrame(chunk, rows, cols) {
+    const lines = typeof chunk === 'string' ? parseInkFrame(chunk) : null;
+    if (!lines || rows < 12 || cols < 40 || lines.length !== rows - 1)
+        return null;
+    const unicode = pickGlyphs({ unicode: true, colorLevel: 0 });
+    const cells = new Set(['|', '#', unicode.scrollTrack, unicode.scrollThumb]);
+    const plain = lines.map((line) => stripAnsi(line));
+    const track = plain.slice(1, rows - 3);
+    if (plain.some((line) => stringWidth(line) > cols) ||
+        !track.every((line) => stringWidth(line) === cols && cells.has(line.slice(-1))))
+        return null;
+    return { columns: cols, rows, trackTop: 2, trackRows: rows - 4 };
+}
+/** Observe before differ transformation, but acknowledge only after downstream write returns. */
+export function createFrameObserver(options) {
+    const { stdout, terminal, scrollbar } = options;
+    let summary = null;
+    let disposed = false;
+    let resizeTimer = null;
+    const invalidate = () => { summary = null; scrollbar.invalidate(); };
+    const onResize = () => {
+        invalidate();
+        if (resizeTimer)
+            clearTimeout(resizeTimer);
+        // Ink suppresses identical frames when a resize burst returns to its starting size.
+        // Wait past the 50 ms React size debounce, then request a normal redraw if needed.
+        resizeTimer = setTimeout(() => {
+            resizeTimer = null;
+            if (!disposed && !scrollbar.frameReady)
+                scrollbar.requestRedraw?.();
+        }, 60);
+        resizeTimer.unref?.();
+    };
+    const match = () => {
+        const g = scrollbar.geometry;
+        scrollbar.frameReady = !!summary && !!g && summary.columns === terminal.columns &&
+            summary.rows === terminal.rows && g.trackCol === summary.columns &&
+            g.trackTop === summary.trackTop && g.trackRows === summary.trackRows;
+    };
+    const observe = (chunk) => {
+        summary = summarizeFrame(chunk, terminal.rows, terminal.columns);
+        if (!summary) {
+            invalidate();
+            return;
+        }
+        match();
+    };
+    scrollbar.onGeometry = match;
+    terminal.on('resize', onResize);
+    const bound = new Map();
+    const proxy = new Proxy(stdout, {
+        get(target, prop) {
+            if (prop === 'write')
+                return (...args) => {
+                    const result = Reflect.apply(target.write, target, args);
+                    if (!disposed)
+                        observe(args[0]);
+                    return result;
+                };
+            const value = Reflect.get(target, prop, target);
+            if (typeof value !== 'function')
+                return value;
+            if (!bound.has(prop))
+                bound.set(prop, value.bind(target));
+            return bound.get(prop);
+        },
+    });
+    return { stdout: proxy, invalidate, dispose: () => {
+            disposed = true;
+            if (resizeTimer)
+                clearTimeout(resizeTimer);
+            resizeTimer = null;
+            terminal.off('resize', onResize);
+            scrollbar.onGeometry = undefined;
+            invalidate();
+        } };
+}

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

@@ -0,0 +1,7 @@
+/** Recognize Ink's erase-lines prefix without accepting arbitrary control writes. */
+export declare function matchInkErasePrefix(chunk: string): {
+    prefix: string;
+    erased: number;
+} | null;
+/** Parse complete frames, including Ink's prefixless initial frame. */
+export declare function parseInkFrame(chunk: string): string[] | null;

package/dist/ui/frame-parser.js

@@ -0,0 +1,18 @@
+/** Recognize Ink's erase-lines prefix without accepting arbitrary control writes. */
+export function matchInkErasePrefix(chunk) {
+    const match = /^(?:\x1b\[2K(?:\x1b\[1A)?)+\x1b\[G/.exec(chunk);
+    return match ? { prefix: match[0], erased: match[0].split('\x1b[2K').length - 1 } : null;
+}
+/** Parse complete frames, including Ink's prefixless initial frame. */
+export function parseInkFrame(chunk) {
+    const prefix = matchInkErasePrefix(chunk);
+    const body = chunk.slice(prefix?.prefix.length ?? 0);
+    if (!body.endsWith('\n'))
+        return null;
+    // SGR and OSC-8 may decorate text; cursor movement is never frame content.
+    const controls = body.replace(/\x1b\[[0-9;:]*m/g, '')
+        .replace(/\x1b\]8;[^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+    if (/[\x00-\x08\x0b-\x1f\x7f]/.test(controls))
+        return null;
+    return body.slice(0, -1).split('\n');
+}