@deepseek-harness-tui/dsh-tui 0.7.1 → 0.7.3

package/lib/types/components/SearchBox.js

@@ -1,6 +1,54 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Box from '../ink/components/Box.js';
 import Text from '../ink/components/Text.js';
+import measureElement from '../ink/measure-element.js';
+import { useDeclaredCursor } from '../ink/hooks/use-declared-cursor.js';
+import { useTerminalSize } from '../ink/hooks/use-terminal-size.js';
+import { stringWidth } from '../ink/stringWidth.js';
+/**
+ * Window a single-line query around the caret so the visible slice fits
+ * `avail` display cells (CJK display width, code-point safe — `[...s]`
+ * iterates code points, not UTF-16 units). The caret character itself
+ * always stays inside the window: leading characters are dropped until
+ * before-caret text + caret fit, then after-caret text fills what remains.
+ * `offset` arrives in UTF-16 units (callers move the caret by key count);
+ * a mid-surrogate offset would split an emoji, so it snaps back to the
+ * pair's start first.
+ */
+function windowQuery(query, offset, avail) {
+    const budget = Math.max(avail, 1);
+    let caret = Math.max(0, Math.min(offset, query.length));
+    if (caret > 0 &&
+        caret < query.length &&
+        query.charCodeAt(caret - 1) >= 0xd800 &&
+        query.charCodeAt(caret - 1) <= 0xdbff &&
+        query.charCodeAt(caret) >= 0xdc00 &&
+        query.charCodeAt(caret) <= 0xdfff) {
+        caret--; // mid-surrogate: snap to the emoji's start
+    }
+    const beforeChars = [...query.slice(0, caret)];
+    const at = caret < query.length ? [...query.slice(caret)][0] : ' ';
+    const atWidth = Math.max(1, stringWidth(at));
+    let caretColumn = 0;
+    for (const ch of beforeChars)
+        caretColumn += stringWidth(ch);
+    let start = 0;
+    while (start < beforeChars.length && caretColumn + atWidth > budget) {
+        caretColumn -= stringWidth(beforeChars[start]);
+        start++;
+    }
+    let rest = budget - caretColumn - atWidth;
+    let after = '';
+    for (const ch of [...query.slice(caret + at.length)]) {
+        const w = stringWidth(ch);
+        if (w > rest)
+            break;
+        after += ch;
+        rest -= w;
+    }
+    return { before: beforeChars.slice(start).join(''), at, after, caretColumn };
+}
 /**
  * A single-line search input in the round-bordered box of Claude Code's
  * SearchBox: `⌕ ` prefix, block cursor at `cursorOffset` (inverse cell).
@@ -8,6 +56,10 @@ import Text from '../ink/components/Text.js';
  * placeholder is right-aligned (dimmed) — kept off the caret's cell so the
  * terminal-painted IME preedit (pinyin) can never be overlaid on it during
  * CJK composition.
+ *
+ * The query row is strictly single-line: an overlong query is windowed
+ * around the caret (horizontal scroll) instead of wrapping, so the native
+ * cursor declaration below stays exact for any query length.
  */
 export function SearchBox({ query, placeholder = 'Search…', isFocused, isTerminalFocused, prefix = '⌕', width, cursorOffset, borderless = false, }) {
     const offset = cursorOffset ?? query.length;
@@ -17,10 +69,57 @@ export function SearchBox({ query, placeholder = 'Search…', isFocused, isTermi
     // Focused + empty + terminal focused: inline caret row (block caret at the
     // start, placeholder right-aligned) instead of the inline placeholder.
     const inlineCaret = isFocused && query === '' && isTerminalFocused;
+    // Content width of the box in display cells. Measured from yoga after
+    // layout (resize re-layouts without any prop/state change, so measure on
+    // every commit — the setState is a no-op when the width is unchanged);
+    // the terminal-columns estimate only covers the very first frame.
+    const { columns } = useTerminalSize();
+    const chrome = borderless ? 0 : 4; // 2 border cells + paddingX 2
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const contentWidth = measuredWidth ?? Math.max(8, columns - chrome - 2);
+    const prefixWidth = stringWidth(`${prefix} `);
+    const win = windowQuery(query, offset, contentWidth - prefixWidth);
+    // Park the native terminal cursor at the caret so IME preedit (pinyin)
+    // renders inline at the input instead of the screen's bottom row (same
+    // mechanism as PromptInput). The declaration hangs on the outer Box —
+    // content stays a single Text (splitting it into flex siblings
+    // reorders/drops glyphs on narrow widths), so the position is computed:
+    // border (1) + paddingX (1) per edge when bordered, then the `prefix `
+    // run and the windowed before-caret text, all in display cells.
+    const showCaret = isFocused && isTerminalFocused;
+    // Clamp into the box's content area: on absurdly narrow layouts the
+    // prefix alone can meet or exceed the content width, and the park must
+    // never land outside the box's rect.
+    const edge = borderless ? 0 : 2;
+    const maxColumn = edge + Math.max(0, contentWidth - 1);
+    const caretColumn = Math.min(edge + prefixWidth + win.caretColumn, maxColumn);
+    const declarationRef = useDeclaredCursor({
+        line: borderless ? 0 : 1,
+        column: caretColumn,
+        active: showCaret,
+    });
+    const boxNodeRef = useRef(null);
+    const boxRef = useCallback((node) => {
+        boxNodeRef.current = node;
+        declarationRef(node);
+    }, [declarationRef]);
+    useLayoutEffect(() => {
+        const node = boxNodeRef.current;
+        if (!node)
+            return;
+        // Layout runs before layout effects (reconciler resetAfterCommit), so a
+        // zero raw width means a genuinely zero-width box — but a zero CONTENT
+        // width (chrome eats the whole box) is a real, must-clamp case.
+        const raw = measureElement(node).width;
+        if (raw > 0) {
+            const w = Math.max(0, raw - chrome);
+            setMeasuredWidth(prev => (prev === w ? prev : w));
+        }
+    });
     let content;
     if (isFocused) {
         if (query) {
-            content = isTerminalFocused ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: query.slice(0, offset) }), _jsx(Text, { inverse: true, children: offset < query.length ? query[offset] : ' ' }), offset < query.length && _jsx(Text, { children: query.slice(offset + 1) })] })) : (_jsx(Text, { children: query }));
+            content = isTerminalFocused ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: win.before }), _jsx(Text, { inverse: true, children: win.at }), win.after !== '' && _jsx(Text, { children: win.after })] })) : (_jsx(Text, { children: query }));
         }
         else if (!isTerminalFocused) {
             content = _jsx(Text, { dimColor: true, children: placeholder });
@@ -29,5 +128,5 @@ export function SearchBox({ query, placeholder = 'Search…', isFocused, isTermi
     else {
         content = query ? _jsx(Text, { children: query }) : _jsx(Text, { children: placeholder });
     }
-    return (_jsx(Box, { flexShrink: 0, borderStyle: borderStyle, borderColor: borderColor, borderDimColor: borderDimColor, paddingX: borderless ? 0 : 1, width: width, children: inlineCaret ? (_jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsxs(Text, { children: [prefix, " "] }), _jsx(Text, { inverse: true, children: " " }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, wrap: "truncate", children: placeholder })] })) : (_jsxs(Text, { dimColor: !isFocused, children: [prefix, " ", content] })) }));
+    return (_jsx(Box, { ref: boxRef, flexShrink: 0, borderStyle: borderStyle, borderColor: borderColor, borderDimColor: borderDimColor, paddingX: borderless ? 0 : 1, width: width, children: inlineCaret ? (_jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsxs(Text, { children: [prefix, " "] }), _jsx(Text, { inverse: true, children: " " }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, wrap: "truncate", children: placeholder })] })) : (_jsxs(Text, { dimColor: !isFocused, wrap: "truncate-end", children: [prefix, " ", content] })) }));
 }

package/lib/types/components/Spinner/SpinnerAnimationRow.d.ts

@@ -7,6 +7,9 @@ export type SpinnerAnimationRowProps = {
     hasActiveTools: boolean;
     /** Raw response length (chars) — feeds the animated token counter. */
     responseLengthRef: React.RefObject<number>;
+    /** Most recent request's real upload tokens (input + cache read/write);
+     *  0 until the first usage event lands. */
+    uploadTokensRef: React.RefObject<number>;
     /** Stable within a turn. */
     message: string;
     messageColor: keyof Theme;
@@ -27,5 +30,5 @@ export type SpinnerAnimationRowProps = {
  * animation clock (frame, glimmer, token counter animation, elapsed time,
  * stalled intensity, thinking shimmer).
  */
-export declare function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }: SpinnerAnimationRowProps): React.ReactNode;
+export declare function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, uploadTokensRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }: SpinnerAnimationRowProps): React.ReactNode;
 //# sourceMappingURL=SpinnerAnimationRow.d.ts.map

package/lib/types/components/Spinner/SpinnerAnimationRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerAnimationRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/SpinnerAnimationRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAcnD,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,WAAW,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,cAAc,EAAE,OAAO,CAAA;IACvB,sEAAsE;IACtE,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CAwM5C"}
+{"version":3,"file":"SpinnerAnimationRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/SpinnerAnimationRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAcnD,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,WAAW,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;IACtB,cAAc,EAAE,OAAO,CAAA;IACvB,sEAAsE;IACtE,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C;+CAC2C;IAC3C,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,YAAY,EAAE,MAAM,KAAK,CAAA;IACzB,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,gFAAgF;IAChF,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CA6M5C"}

package/lib/types/components/Spinner/SpinnerAnimationRow.js

@@ -26,7 +26,7 @@ const THINKING_GLOW_PERIOD_S = 2;
  * animation clock (frame, glimmer, token counter animation, elapsed time,
  * stalled intensity, thinking shimmer).
  */
-export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }) {
+export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, responseLengthRef, uploadTokensRef, message, messageColor, shimmerColor, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, spinnerSuffix, verbose, columns, thinkingStatus, }) {
     const [viewportRef, time] = useAnimationFrame(reducedMotion ? null : 50);
     // === Elapsed time (wall-clock, derived from refs each frame) ===
     const now = Date.now();
@@ -81,8 +81,13 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
     const timerText = formatDuration(elapsedTimeMs);
     const timerWidth = stringWidth(timerText);
     const tokenCount = formatNumber(leaderTokens);
-    const tokensText = `${figures.arrowDown} ${tokenCount} tokens`;
-    const tokensWidth = stringWidth(tokensText);
+    const uploadTokens = uploadTokensRef.current;
+    // Real upload tokens (last request's input + cache) ride beside the
+    // animated download estimate; both labeled once to keep the row short.
+    const tokensLabel = uploadTokens > 0
+        ? `↑ ${formatNumber(uploadTokens)} · ↓ ${tokenCount} tokens`
+        : `↓ ${tokenCount} tokens`;
+    const tokensWidth = stringWidth(tokensLabel);
     // === Thinking text (may shrink to fit) ===
     let thinkingText = thinkingStatus === 'thinking'
         ? 'thinking'
@@ -108,7 +113,7 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
     const showTimer = wantsTimerAndTokens && availableSpace > usedAfterThinking + timerWidth;
     const usedAfterTimer = usedAfterThinking + (showTimer ? timerWidth + sep : 0);
     const showTokens = wantsTimerAndTokens &&
-        leaderTokens > 0 &&
+        (leaderTokens > 0 || uploadTokens > 0) &&
         availableSpace > usedAfterTimer + tokensWidth;
     const thinkingOnly = showThinking &&
         thinkingStatus === 'thinking' &&
@@ -137,7 +142,7 @@ export function SpinnerAnimationRow({ mode, reducedMotion, hasActiveTools, respo
             : []),
         ...(showTokens
             ? [
-                _jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerModeGlyph, { mode: mode }), _jsxs(Text, { dimColor: true, children: [tokenCount, " tokens"] })] }, "tokens"),
+                _jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerModeGlyph, { mode: mode }), _jsx(Text, { dimColor: true, children: tokensLabel })] }, "tokens"),
             ]
             : []),
         ...(showThinking && thinkingText

package/lib/types/components/WorkingSpinner.d.ts

@@ -8,10 +8,12 @@ import type { SpinnerMode } from './Spinner/spinnerMode.js';
  *
  * Random verb is picked once per turn (per mount of the spinner).
  */
-export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }: {
+export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }: {
     mode: SpinnerMode;
     hasActiveTools: boolean;
     responseLengthRef: React.RefObject<number>;
+    /** Most recent request's real upload tokens; 0 until the first usage event. */
+    uploadTokensRef: React.RefObject<number>;
     loadingStartTimeRef: React.RefObject<number>;
     totalPausedMsRef: React.RefObject<number>;
     pauseStartTimeRef: React.RefObject<number | null>;

package/lib/types/components/WorkingSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAK3D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,GAAG,KAAK,CAAC,SAAS,CA2BlB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}
+{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAK3D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;CAC3C,GAAG,KAAK,CAAC,SAAS,CA4BlB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}

package/lib/types/components/WorkingSpinner.js

@@ -13,12 +13,12 @@ import { sample } from 'lodash-es';
  *
  * Random verb is picked once per turn (per mount of the spinner).
  */
-export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }) {
+export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, }) {
     const { columns } = useTerminalSize();
     // Pick a random verb once per spinner mount (per turn).
     const [randomVerb] = useState(() => sample(SPINNER_VERBS) ?? 'Working');
     const message = `${randomVerb}…`;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, message: message, messageColor: "claude", shimmerColor: "claudeShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: null, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
+    return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, uploadTokensRef: uploadTokensRef, message: message, messageColor: "claude", shimmerColor: "claudeShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: null, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
 }
 /**
  * Tracks thinking status: 'thinking' while the model is streaming reasoning,

package/lib/types/components/design-system/ThemedText.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Color, Styles } from '../../ink/styles.js';
+import type { DOMElement } from '../../ink/dom.js';
 import { type Theme } from '../../theme.js';
 /**
  * Colors uncolored ThemedText in the subtree. Precedence: explicit `color` >
@@ -13,9 +14,9 @@ export type Props = {
      */
     readonly color?: keyof Theme | Color;
     /**
-     * Same as `color`, but for background. Must be a theme key.
+     * Same as `color`, but for background.
      */
-    readonly backgroundColor?: keyof Theme;
+    readonly backgroundColor?: keyof Theme | Color;
     /**
      * Dim the color using the theme's inactive color.
      * This is compatible with bold (unlike ANSI dim).
@@ -45,6 +46,11 @@ export type Props = {
      * This property tells Ink to wrap or truncate text if its width is larger than container.
      */
     readonly wrap?: Styles['textWrap'];
+    /**
+     * Ref to the underlying ink-text DOMElement (e.g. useDeclaredCursor
+     * parking the native cursor on an inline caret cell).
+     */
+    readonly ref?: React.Ref<DOMElement>;
     readonly children?: React.ReactNode;
 };
 /**
@@ -52,5 +58,5 @@ export type Props = {
  * (in the Claude Code visual language). This is what lets every ported CC
  * component use `color="subtle"`-style theme keys unchanged.
  */
-export default function ThemedText({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, children, }: Props): React.ReactNode;
+export default function ThemedText({ color, backgroundColor, dimColor, bold, italic, underline, strikethrough, inverse, wrap, ref, children, }: Props): React.ReactNode;
 //# sourceMappingURL=ThemedText.d.ts.map

package/lib/types/components/design-system/ThemedText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGrD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wCAEtB,CAAA;AAqBZ,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAEpC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,CAAA;IAEtC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;IAElC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,IAAY,EACZ,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,OAAe,EACf,IAAa,EACb,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA8BzB"}
+{"version":3,"file":"ThemedText.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ThemedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGrD;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,wCAEtB,CAAA;AAqBZ,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAEpC;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAE9C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IAEzB;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAE5B;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAA;IAElC;;;OAGG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;IAEpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACpC,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,IAAY,EACZ,MAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,OAAe,EACf,IAAa,EACb,GAAG,EACH,QAAQ,GACT,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA6BzB"}

package/lib/types/components/design-system/ThemedText.js

@@ -28,7 +28,7 @@ function resolveColor(color, theme) {
  * (in the Claude Code visual language). This is what lets every ported CC
  * component use `color="subtle"`-style theme keys unchanged.
  */
-export default function ThemedText({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', children, }) {
+export default function ThemedText({ color, backgroundColor, dimColor = false, bold = false, italic = false, underline = false, strikethrough = false, inverse = false, wrap = 'wrap', ref, children, }) {
     const [themeName] = useTheme();
     const theme = getTheme(themeName);
     const hoverColor = React.useContext(TextHoverColorContext);
@@ -38,8 +38,6 @@ export default function ThemedText({ color, backgroundColor, dimColor = false, b
         : dimColor
             ? theme.inactive
             : resolveColor(color, theme);
-    const resolvedBackgroundColor = backgroundColor
-        ? theme[backgroundColor]
-        : undefined;
-    return (_jsx(Text, { color: resolvedColor, backgroundColor: resolvedBackgroundColor, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, inverse: inverse, wrap: wrap, children: children }));
+    const resolvedBackgroundColor = resolveColor(backgroundColor, theme);
+    return (_jsx(Text, { ref: ref, color: resolvedColor, backgroundColor: resolvedBackgroundColor, bold: bold, italic: italic, underline: underline, strikethrough: strikethrough, inverse: inverse, wrap: wrap, children: children }));
 }

package/lib/types/components/questions/AskUserQuestionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AskUserQuestionPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/AskUserQuestionPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAQvE,MAAM,MAAM,yBAAyB,GAAG;IACtC,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;QACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;YAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QAC3F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;QAC9B;;oEAE4D;QAC5D,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;QAClC;0EACkE;QAClE,QAAQ,CAAC,MAAM,CAAC,EAAE;YAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;YAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;SAAE,CAAA;KAC7E,CAAA;IACD,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzD,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,SAAS,CAqT7C"}
+{"version":3,"file":"AskUserQuestionPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/AskUserQuestionPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AASvE,MAAM,MAAM,yBAAyB,GAAG;IACtC,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;QACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;YAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QAC3F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;QAC9B;;oEAE4D;QAC5D,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;QAClC;0EACkE;QAClE,QAAQ,CAAC,MAAM,CAAC,EAAE;YAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;YAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;SAAE,CAAA;KAC7E,CAAA;IACD,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzD,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,GAAG,KAAK,CAAC,SAAS,CAwW7C"}

package/lib/types/components/questions/AskUserQuestionPanel.js

@@ -14,11 +14,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import React from 'react';
 import { t } from '../../i18n.js';
-import { Box, Text, useInput } from '../../ui.js';
+import { Box, Text, useInput, useTerminalSize } from '../../ui.js';
+import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
 import { Divider } from '../design-system/Divider.js';
 import { POINTER } from '../../cc/figures.js';
 import { PlanReviewPanel } from './PlanReviewPanel.js';
 import { isPlainReturnInput } from '../../utils/modifiers.js';
+import { listWindow } from '../listWindow.js';
 const CHECKED = '◉';
 const UNCHECKED = '○';
 const PENCIL = '✎';
@@ -32,6 +34,7 @@ export function AskUserQuestionPanel({ question, position, total, answered, onAn
     const options = question.options ?? [];
     const multiSelect = question.multiSelect === true;
     const hideCustomInput = question.hideCustomInput === true && options.length > 0;
+    const { rows: terminalRows } = useTerminalSize();
     /** Rows: the real options plus the inline input row at the tail. */
     const rowCount = options.length + (hideCustomInput ? 0 : 1);
     const [focusIndex, setFocusIndex] = React.useState(0);
@@ -43,6 +46,35 @@ export function AskUserQuestionPanel({ question, position, total, answered, onAn
     const [attached, setAttached] = React.useState(null);
     const [error, setError] = React.useState(null);
     const inputFocused = !hideCustomInput && focusIndex === options.length;
+    // Chat chrome + panel scaffolding consume twelve rows before the option
+    // list: status line, outer/divider/question/list/hint spacing and content.
+    // Optional header/detail/input/error rows are charged explicitly. Long
+    // lists then use fixed one/two-line rows so listWindow's budget is exact;
+    // short questionnaires retain their existing wrapped presentation.
+    const detailRows = question.detail === undefined ? 0 : question.detail.split('\n').length + 1;
+    const reservedRows = 12
+        + (question.header === undefined ? 0 : 1)
+        + detailRows
+        + (hideCustomInput ? 0 : 1)
+        + (error === null ? 0 : 2);
+    const optionBudget = Math.max(terminalRows - reservedRows, 2);
+    const optionHeights = options.map(option => option.description === undefined ? 1 : 2);
+    const windowedOptions = optionHeights.reduce((sum, height) => sum + height, 0) > optionBudget;
+    const optionFocus = Math.min(focusIndex, Math.max(options.length - 1, 0));
+    const optionWindow = windowedOptions
+        ? listWindow(optionHeights, optionFocus, optionBudget)
+        : { start: 0, end: options.length };
+    // Park the native terminal cursor on the custom-answer caret: terminal
+    // emulators render IME preedit (pinyin) at the physical cursor, so without
+    // this declaration CJK composition appears at the screen's bottom row
+    // instead of inline at the input (same mechanism as PromptInput's value
+    // box). Active whenever the input row is visible — typing on an option row
+    // also lands in this input, so the IME anchor must follow even when the
+    // row itself is not focused. The ref rides on the caret Text itself (all
+    // three visual variants): its nodeCache rect IS the caret cell, so (0, 0)
+    // stays exact under CJK widths and line wrapping without any
+    // layout-affecting wrapper Box.
+    const caretRef = useDeclaredCursor({ line: 0, column: 0, active: !hideCustomInput });
     const moveFocus = (delta) => {
         if (rowCount <= 1)
             return;
@@ -209,13 +241,25 @@ export function AskUserQuestionPanel({ question, position, total, answered, onAn
     const remaining = total - answered;
     const headerTitle = ` ${t('question-header-progress', { position, total, remaining: remaining > 1 ? t('question-remaining-more', { n: remaining }) : '' })} `;
     const cursorChar = customCursor < customText.length ? customText[customCursor] : ' ';
-    const renderInputRow = () => (_jsxs(Box, { flexDirection: "row", marginTop: inputFocused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : undefined, bold: inputFocused, children: inputFocused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : 'suggestion', children: PENCIL }) }), _jsxs(Box, { flexDirection: "row", marginLeft: 1, children: [_jsx(Text, { bold: inputFocused, color: inputFocused ? 'claude' : 'suggestion', children: t('question-custom-tab') }), attached !== null && (_jsx(Text, { color: "suggestion", children: t('question-attached-label', { label: attached }) })), _jsx(Text, { dimColor: true, children: "\uFF1A" }), customText === '' && !inputFocused ? (_jsx(Text, { dimColor: true, children: t('question-direct-input') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: customText.slice(0, customCursor) }), inputFocused
-                                ? _jsx(Text, { inverse: true, children: cursorChar })
-                                : _jsx(Text, { color: "suggestion", children: "\u258F" }), _jsx(Text, { wrap: "wrap", children: customText.slice(inputFocused ? customCursor + 1 : customCursor) })] }))] })] }));
-    const renderOptions = () => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.map((option, index) => {
-                const focused = index === focusIndex;
-                const selected = multiSelect ? checked.has(index) : focused;
-                return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: focused, children: focused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: selected, children: selected ? (multiSelect ? CHECKED : '●') : UNCHECKED }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Text, { bold: focused || selected, color: focused ? 'claude' : undefined, wrap: "wrap", children: option.label }), option.description !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: option.description }))] })] }, option.label));
+    const renderInputRow = () => (_jsxs(Box, { flexDirection: "row", marginTop: inputFocused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : undefined, bold: inputFocused, children: inputFocused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : 'suggestion', children: PENCIL }) }), _jsxs(Box, { flexDirection: "row", marginLeft: 1, children: [_jsx(Text, { bold: inputFocused, color: inputFocused ? 'claude' : 'suggestion', children: t('question-custom-tab') }), attached !== null && (_jsx(Text, { color: "suggestion", children: t('question-attached-label', { label: attached }) })), _jsx(Text, { dimColor: true, children: "\uFF1A" }), customText === '' && !inputFocused ? (_jsx(Text, { ref: caretRef, dimColor: true, children: t('question-direct-input') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: customText.slice(0, customCursor) }), inputFocused
+                                ? _jsx(Text, { ref: caretRef, inverse: true, children: cursorChar })
+                                : _jsx(Text, { ref: caretRef, color: "suggestion", children: "\u258F" }), _jsx(Text, { wrap: "wrap", children: customText.slice(inputFocused ? customCursor + 1 : customCursor) })] }))] })] }));
+    const renderOptions = () => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.slice(optionWindow.start, optionWindow.end).map((option, index) => {
+                const absoluteIndex = optionWindow.start + index;
+                const focused = absoluteIndex === focusIndex;
+                const selected = multiSelect ? checked.has(absoluteIndex) : focused;
+                const pointer = focused
+                    ? POINTER
+                    : absoluteIndex === optionWindow.start && optionWindow.start > 0
+                        ? '↑'
+                        : absoluteIndex === optionWindow.end - 1 && optionWindow.end < options.length
+                            ? '↓'
+                            : ' ';
+                const label = windowedOptions ? option.label.replace(/\s+/gu, ' ').trim() : option.label;
+                const description = windowedOptions
+                    ? option.description?.replace(/\s+/gu, ' ').trim()
+                    : option.description;
+                return (_jsxs(Box, { flexDirection: "row", marginTop: !windowedOptions && focused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: focused, children: pointer }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: selected, children: selected ? (multiSelect ? CHECKED : '●') : UNCHECKED }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Text, { bold: focused || selected, color: focused ? 'claude' : undefined, wrap: windowedOptions ? 'truncate' : 'wrap', children: label }), description !== undefined && (_jsx(Text, { dimColor: true, wrap: windowedOptions ? 'truncate' : 'wrap', children: description }))] })] }, `${absoluteIndex}:${option.label}`));
             }), hideCustomInput ? null : renderInputRow()] }));
     const hintParts = inputFocused
         ? [

package/lib/types/components/questions/PlanReviewPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlanReviewPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/PlanReviewPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,MAAM,MAAM,oBAAoB,GAAG;IACjC,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;QACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;YAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QAC3F,QAAQ,CAAC,MAAM,CAAC,EAAE;YAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;YAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;SAAE,CAAA;KAC7E,CAAA;IACD,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzD,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAgOxC"}
+{"version":3,"file":"PlanReviewPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/PlanReviewPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAKvE,MAAM,MAAM,oBAAoB,GAAG;IACjC,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE;QACjB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;QACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;QACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;YAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;YAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;QAC3F,QAAQ,CAAC,MAAM,CAAC,EAAE;YAAE,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;YAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;SAAE,CAAA;KAC7E,CAAA;IACD,QAAQ,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzD,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAC9B,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAyOxC"}

package/lib/types/components/questions/PlanReviewPanel.js

@@ -18,6 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { t } from '../../i18n.js';
 import { Box, Text, useInput } from '../../ui.js';
+import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
 import { Divider } from '../design-system/Divider.js';
 import { Markdown } from '../Markdown.js';
 import { POINTER } from '../../cc/figures.js';
@@ -34,6 +35,14 @@ export function PlanReviewPanel({ question, onAnswer, onCancel, }) {
     const [cursor, setCursor] = React.useState(0);
     const [error, setError] = React.useState(null);
     const inputFocused = focusIndex === options.length;
+    // Park the native terminal cursor on the feedback caret so IME preedit
+    // (pinyin) renders inline at the input instead of the screen's bottom row
+    // (same mechanism as AskUserQuestionPanel / PromptInput). Always active —
+    // typing on an option row also lands in the feedback buffer. The ref rides
+    // on the caret Text itself (all visual variants): its nodeCache rect IS
+    // the caret cell, so (0, 0) stays exact under wrapping without a
+    // layout-affecting wrapper Box.
+    const caretRef = useDeclaredCursor({ line: 0, column: 0, active: true });
     const moveFocus = (delta) => {
         setFocusIndex(index => (index + delta + rowCount) % rowCount);
         setError(null);
@@ -163,7 +172,7 @@ export function PlanReviewPanel({ question, onAnswer, onCancel, }) {
                         const focused = index === focusIndex;
                         const isApprove = option.label === approveLabel;
                         return (_jsxs(Box, { flexDirection: "row", marginTop: focused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'claude' : undefined, bold: focused, children: focused ? POINTER : ' ' }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { bold: focused, color: focused || isApprove ? 'claude' : undefined, wrap: "wrap", children: [index + 1, ". ", option.label] }), option.description !== undefined && (_jsx(Text, { dimColor: true, wrap: "wrap", children: option.description }))] })] }, option.label));
-                    }), _jsxs(Box, { flexDirection: "row", marginTop: inputFocused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : undefined, bold: inputFocused, children: inputFocused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : 'suggestion', children: PENCIL }) }), _jsx(Box, { flexDirection: "row", marginLeft: 1, children: feedback === '' && !inputFocused ? (_jsx(Text, { dimColor: true, children: t('plan-review-feedback-placeholder') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: feedback.slice(0, cursor) }), inputFocused
-                                            ? _jsx(Text, { inverse: true, children: cursorChar })
-                                            : _jsx(Text, { color: "suggestion", children: "\u258F" }), _jsx(Text, { wrap: "wrap", children: feedback.slice(inputFocused ? cursor + 1 : cursor) })] })) })] })] }), error !== null && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "error", children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('plan-review-hint') }) })] }));
+                    }), _jsxs(Box, { flexDirection: "row", marginTop: inputFocused ? 1 : 0, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : undefined, bold: inputFocused, children: inputFocused ? POINTER : ' ' }) }), _jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: inputFocused ? 'claude' : 'suggestion', children: PENCIL }) }), _jsx(Box, { flexDirection: "row", marginLeft: 1, children: feedback === '' && !inputFocused ? (_jsx(Text, { ref: caretRef, dimColor: true, children: t('plan-review-feedback-placeholder') })) : (_jsxs(_Fragment, { children: [_jsx(Text, { wrap: "wrap", children: feedback.slice(0, cursor) }), inputFocused
+                                            ? _jsx(Text, { ref: caretRef, inverse: true, children: cursorChar })
+                                            : _jsx(Text, { ref: caretRef, color: "suggestion", children: "\u258F" }), _jsx(Text, { wrap: "wrap", children: feedback.slice(inputFocused ? cursor + 1 : cursor) })] })) })] })] }), error !== null && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "error", children: error }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('plan-review-hint') }) })] }));
 }

package/lib/types/components/sessions/SessionListRow.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { SessionSummary } from '../../dsh-adapter/sessions/index.js';
+/**
+ * One session in the browser's list: a title line and a metadata line.
+ *
+ * Two lines rather than one because the two carry different jobs. The title
+ * answers "is this the conversation I mean"; the metadata answers "which of
+ * the three that look alike is it" — when it was, on what branch, how big,
+ * under which model. Folding both onto one line makes the title compete with
+ * facts nobody reads first, and on a narrow terminal the title is what loses.
+ *
+ * Widths are resolved here rather than delegated to flexbox: the row must
+ * stay exactly two lines at every terminal width, and a row that wraps
+ * destroys the alignment that lets the eye scan a list at all.
+ */
+export declare function SessionListRow({ session, width, depth, focused, now, }: {
+    session: SessionSummary;
+    /** Columns available to the row, indentation included. */
+    width: number;
+    /** 0 for a conversation, 1 for a sub-agent run under its parent. */
+    depth: number;
+    focused: boolean;
+    /** Epoch ms used for every relative time in this render pass. */
+    now: number;
+}): React.ReactNode;
+//# sourceMappingURL=SessionListRow.d.ts.map

package/lib/types/components/sessions/SessionListRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionListRow.d.ts","sourceRoot":"","sources":["../../../../src/components/sessions/SessionListRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAEzE;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE;IACD,OAAO,EAAE,cAAc,CAAA;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,iEAAiE;IACjE,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,KAAK,CAAC,SAAS,CAoClB"}

package/lib/types/components/sessions/SessionListRow.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { t } from '../../i18n.js';
+import { formatBytes, formatWhen, kindMark, titleColor, truncateWidth, } from '../../sessions/format.js';
+/**
+ * One session in the browser's list: a title line and a metadata line.
+ *
+ * Two lines rather than one because the two carry different jobs. The title
+ * answers "is this the conversation I mean"; the metadata answers "which of
+ * the three that look alike is it" — when it was, on what branch, how big,
+ * under which model. Folding both onto one line makes the title compete with
+ * facts nobody reads first, and on a narrow terminal the title is what loses.
+ *
+ * Widths are resolved here rather than delegated to flexbox: the row must
+ * stay exactly two lines at every terminal width, and a row that wraps
+ * destroys the alignment that lets the eye scan a list at all.
+ */
+export function SessionListRow({ session, width, depth, focused, now, }) {
+    const indent = depth * 2;
+    // Two cells for the focus marker, plus the indent for a nested run.
+    const body = Math.max(8, width - 2 - indent);
+    const mark = kindMark(session.kind);
+    const facts = [formatWhen(session.updatedAt, now)];
+    if (session.branch !== undefined)
+        facts.push(session.branch);
+    const size = formatBytes(session.bytes);
+    if (size !== undefined)
+        facts.push(size);
+    if (session.model !== undefined)
+        facts.push(session.model);
+    if (session.childCount > 0 && depth === 0) {
+        facts.push(t('session-children', { n: session.childCount }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: focused ? 'suggestion' : 'subtle', children: `${' '.repeat(indent)}${focused ? '❯ ' : '  '}` }), mark !== undefined && _jsx(Text, { color: mark.color, children: `${mark.glyph} ` }), _jsx(Text, { color: titleColor(session.title.source, focused), bold: focused, children: truncateWidth(session.label ?? session.title.text, body - (mark === undefined ? 0 : 2)) })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: `${' '.repeat(indent + 2)}${truncateWidth(facts.join(' · '), body)}` }) })] }));
+}

package/lib/types/components/sessions/SessionPreview.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { PreviewEntry, SessionSummary } from '../../dsh-adapter/sessions/index.js';
+/**
+ * The preview pane: what this session actually says.
+ *
+ * It shows the END of the conversation, not the beginning, for two reasons.
+ * The title already carries the beginning — it is usually the first prompt —
+ * so repeating it would spend the pane on something the list already said. And
+ * the question a person asks at this moment is "is this the one I was in the
+ * middle of", which only the last exchange answers.
+ *
+ * It is also the reason the pane costs nothing: the tail of a log is exactly
+ * what a bounded read already has in hand, so opening the preview on a 4 MB
+ * session is the same amount of work as on a 40 KB one.
+ */
+export declare function SessionPreview({ session, entries, loading, width, height, home, now, }: {
+    session: SessionSummary;
+    entries: readonly PreviewEntry[];
+    loading: boolean;
+    width: number;
+    height: number;
+    home: string;
+    now: number;
+}): React.ReactNode;
+//# sourceMappingURL=SessionPreview.d.ts.map

package/lib/types/components/sessions/SessionPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/sessions/SessionPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAQvF;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,GAAG,GACJ,EAAE;IACD,OAAO,EAAE,cAAc,CAAA;IACvB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,KAAK,CAAC,SAAS,CA8DlB"}