@deepseek-harness-tui/dsh-tui 0.7.2 → 0.8.0

package/lib/types/components/PromptInput.js

@@ -103,6 +103,8 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         controllerRef.current = {
             hasText: () => value.length > 0,
             clear: () => {
+                valueRef.current = '';
+                cursorRef.current = 0;
                 setValue('');
                 setCursor(0);
             },
@@ -120,6 +122,8 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     React.useEffect(() => {
         if (fillText && fillText !== lastFill.current) {
             lastFill.current = fillText;
+            valueRef.current = fillText;
+            cursorRef.current = fillText.length;
             setValue(fillText);
             setCursor(fillText.length);
             onFillConsumed?.();
@@ -132,16 +136,6 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     const clipboardBusyRef = React.useRef(false);
     /** True while the external editor owns the terminal (Ctrl+X round-trip). */
     const editorBusyRef = React.useRef(false);
-    /**
-     * Latest committed input state. The Ctrl+V clipboard read resolves
-     * asynchronously; inserting against the render that STARTED the read
-     * would drop whatever the user typed while waiting. The continuation
-     * inserts against this mirror instead.
-     */
-    const liveInputRef = React.useRef({ value: '', cursor: 0 });
-    React.useEffect(() => {
-        liveInputRef.current = { value, cursor };
-    });
     /** Enter dedupe window: cmd pipelines can deliver one Enter as `\r`+`\n`. */
     const lastEnterAtRef = React.useRef(0);
     React.useEffect(() => {
@@ -193,6 +187,12 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         !helpOpen &&
         !selectionActive &&
         fileEscRef.current !== mention?.start;
+    const setInput = (next, cursorOffset = next.length) => {
+        valueRef.current = next;
+        cursorRef.current = Math.max(0, Math.min(cursorOffset, next.length));
+        setValue(next);
+        setCursor(cursorRef.current);
+    };
     /**
      * Accept the selected file suggestion: replace ONLY the mention token at
      * the caret (prefix/suffix text survives), quoting whitespace paths. A
@@ -216,8 +216,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         if (history.current.length > HISTORY_LIMIT)
             history.current.shift();
         historyIndex.current = -1;
-        setValue('');
-        setCursor(0);
+        setInput('', 0);
         setSelectedCommand(0);
         appendHistory(trimmed);
         channel.submit(trimmed);
@@ -243,8 +242,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         if (history.current.length > HISTORY_LIMIT)
             history.current.shift();
         historyIndex.current = -1;
-        setValue('');
-        setCursor(0);
+        setInput('', 0);
         setSelectedCommand(0);
         appendHistory(trimmed);
         channel.steer(trimmed);
@@ -262,8 +260,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         if (history.current.length > HISTORY_LIMIT)
             history.current.shift();
         historyIndex.current = -1;
-        setValue('');
-        setCursor(0);
+        setInput('', 0);
         setSelectedCommand(0);
         appendHistory(trimmed);
         channel.submit(trimmed);
@@ -282,8 +279,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             channel.notify(t('input-cannot-retract'), { color: 'warning', timeoutMs: 2500 });
             return;
         }
-        setValue(item.text);
-        setCursor(item.text.length);
+        setInput(item.text);
         setSelectedCommand(0);
         setFileSelected(0);
         channel.notify(t('input-retracted'), { timeoutMs: 2000 });
@@ -308,8 +304,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         if (history.current.length > HISTORY_LIMIT)
             history.current.shift();
         historyIndex.current = -1;
-        setValue('');
-        setCursor(0);
+        setInput('', 0);
         setSelectedCommand(0);
         setFileSelected(0);
         appendHistory(trimmed);
@@ -336,19 +331,12 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             if (history.current.length > HISTORY_LIMIT)
                 history.current.shift();
             historyIndex.current = -1;
-            setValue('');
-            setCursor(0);
+            setInput('', 0);
             setSelectedCommand(0);
             appendHistory(text.trim());
         }
         return handled;
     };
-    const setInput = (next, cursorOffset = next.length) => {
-        valueRef.current = next;
-        cursorRef.current = Math.max(0, Math.min(cursorOffset, next.length));
-        setValue(next);
-        setCursor(cursorRef.current);
-    };
     /** Clipboard reads are asynchronous; insert against the latest render so
      * typing while PowerShell owns the clipboard never gets overwritten. */
     const insertClipboardAtCaret = (text) => {
@@ -359,13 +347,13 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         setFileSelected(0);
     };
     /** Line index of the cursor; -1 when the cursor is at the very end. */
-    const cursorLine = () => {
-        const before = value.slice(0, cursor);
+    const cursorLine = (text, cursorOffset) => {
+        const before = text.slice(0, cursorOffset);
         return before.split('\n').length - 1;
     };
     /** Column of the cursor within its line. */
-    const cursorColumn = () => {
-        const before = value.slice(0, cursor);
+    const cursorColumn = (text, cursorOffset) => {
+        const before = text.slice(0, cursorOffset);
         const line = before.split('\n').pop() ?? '';
         return line.length;
     };
@@ -377,13 +365,17 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         // setValue can never overwrite fresh typing (and vice versa).
         if (editorBusyRef.current)
             return;
+        // App deliberately dispatches every parsed key from one stdin read in a
+        // single React update. Read the synchronous mirrors so each event sees
+        // the text/caret produced by the preceding event in that batch.
+        const value = valueRef.current;
+        const cursor = cursorRef.current;
         /** Insert text at the caret (typing, paste) and dismiss overlays. */
         const insertAtCaret = (text) => {
             if (helpOpen)
                 onToggleHelp();
             const next = value.slice(0, cursor) + text + value.slice(cursor);
-            setValue(next);
-            setCursor(cursor + text.length);
+            setInput(next, cursor + text.length);
             setSelectedCommand(0);
             setFileSelected(0);
         };
@@ -441,10 +433,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                 // Insert against the LIVE input state: the read above resolved
                 // asynchronously and the user may have typed while waiting.
                 const text = formatClipboardInsert(content);
-                const live = liveInputRef.current;
-                const caret = Math.min(live.cursor, live.value.length);
-                setValue(live.value.slice(0, caret) + text + live.value.slice(caret));
-                setCursor(caret + text.length);
+                insertClipboardAtCaret(text);
             })
                 .catch(() => {
                 channel.notify(t('input-clipboard-read-failed'), { color: 'warning' });
@@ -469,8 +458,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                 try {
                     const outcome = await editInExternalEditor(value);
                     if (outcome.kind === 'edited') {
-                        setValue(outcome.text);
-                        setCursor(outcome.text.length);
+                        setInput(outcome.text);
                         setSelectedCommand(0);
                         setFileSelected(0);
                     }
@@ -575,8 +563,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             // ink/terminal.ts); Option+Enter (ESC CR) is the fallback on terminals
             // that can't report shift — e.g. macOS Terminal.app (issue #110).
             const next = value.slice(0, cursor) + '\n' + value.slice(cursor);
-            setValue(next);
-            setCursor(cursor + 1);
+            setInput(next, cursor + 1);
             setSelectedCommand(0);
             return;
         }
@@ -620,13 +607,13 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                 setFileSelected(index => index <= 0 ? fileMatches.length - 1 : index - 1);
                 return;
             }
-            const line = cursorLine();
+            const line = cursorLine(value, cursor);
             if (line > 0) {
                 // Move to the previous line, clamping to its length.
                 const upToLineStart = value.lastIndexOf('\n', cursor - 1);
                 const prevLineStart = upToLineStart === -1 ? 0 : value.lastIndexOf('\n', upToLineStart - 1) + 1;
                 const prevLine = value.slice(prevLineStart, upToLineStart);
-                setCursor(prevLineStart + Math.min(cursorColumn(), prevLine.length));
+                setInput(value, prevLineStart + Math.min(cursorColumn(value, cursor), prevLine.length));
                 return;
             }
             if (overlayOpen) {
@@ -639,8 +626,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                 ? history.current.length - 1
                 : Math.max(0, historyIndex.current - 1);
             const entry = history.current[historyIndex.current] ?? '';
-            setValue(entry);
-            setCursor(entry.length);
+            setInput(entry);
             return;
         }
         if (key.downArrow) {
@@ -648,13 +634,13 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                 setFileSelected(index => index >= fileMatches.length - 1 ? 0 : index + 1);
                 return;
             }
-            const line = cursorLine();
+            const line = cursorLine(value, cursor);
             const lines = value.split('\n');
             if (line < lines.length - 1) {
                 const nextLineStart = value.indexOf('\n', cursor) + 1;
                 const nextLineEnd = value.indexOf('\n', nextLineStart);
                 const nextLine = value.slice(nextLineStart, nextLineEnd === -1 ? value.length : nextLineEnd);
-                setCursor(nextLineStart + Math.min(cursorColumn(), nextLine.length));
+                setInput(value, nextLineStart + Math.min(cursorColumn(value, cursor), nextLine.length));
                 return;
             }
             if (overlayOpen) {
@@ -667,76 +653,73 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             const entry = historyIndex.current >= history.current.length
                 ? ''
                 : (history.current[historyIndex.current] ?? '');
-            setValue(entry);
-            setCursor(entry.length);
+            setInput(entry);
             return;
         }
         if (isMod(key) && key.leftArrow) {
             // Jump to the previous word boundary (readline alt+b). Must precede the
             // bare-arrow arms: Ctrl+Left arrives as leftArrow + ctrl.
-            setCursor(previous => wordBoundaryLeft(value, previous));
+            setInput(value, wordBoundaryLeft(value, cursor));
             return;
         }
         if (isMod(key) && key.rightArrow) {
             // Jump to the next word boundary (readline alt+f).
-            setCursor(previous => wordBoundaryRight(value, previous));
+            setInput(value, wordBoundaryRight(value, cursor));
             return;
         }
         if (key.leftArrow) {
-            setCursor(previous => Math.max(0, previous - 1));
+            setInput(value, Math.max(0, cursor - 1));
             return;
         }
         if (key.rightArrow) {
-            setCursor(previous => Math.min(value.length, previous + 1));
+            setInput(value, Math.min(value.length, cursor + 1));
             return;
         }
         if (key.backspace) {
             if (cursor === 0)
                 return;
-            setValue(value.slice(0, cursor - 1) + value.slice(cursor));
-            setCursor(cursor - 1);
+            setInput(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
             return;
         }
         if (key.delete) {
             if (cursor >= value.length)
                 return;
-            setValue(value.slice(0, cursor) + value.slice(cursor + 1));
+            setInput(value.slice(0, cursor) + value.slice(cursor + 1), cursor);
             return;
         }
         if (key.home) {
             // Start of the current line.
             const lineStart = value.lastIndexOf('\n', cursor - 1) + 1;
-            setCursor(lineStart);
+            setInput(value, lineStart);
             return;
         }
         if (key.end) {
             // End of the current line.
             const nextLine = value.indexOf('\n', cursor);
-            setCursor(nextLine === -1 ? value.length : nextLine);
+            setInput(value, nextLine === -1 ? value.length : nextLine);
             return;
         }
         if (isMod(key) && input === 'a') {
             const lineStart = value.lastIndexOf('\n', cursor - 1) + 1;
-            setCursor(lineStart);
+            setInput(value, lineStart);
             return;
         }
         if (isMod(key) && input === 'e') {
             const nextLine = value.indexOf('\n', cursor);
-            setCursor(nextLine === -1 ? value.length : nextLine);
+            setInput(value, nextLine === -1 ? value.length : nextLine);
             return;
         }
         if (isMod(key) && input === 'u') {
             // Delete to start of line.
             const lineStart = value.lastIndexOf('\n', cursor - 1) + 1;
-            setValue(value.slice(0, lineStart) + value.slice(cursor));
-            setCursor(lineStart);
+            setInput(value.slice(0, lineStart) + value.slice(cursor), lineStart);
             return;
         }
         if (isMod(key) && input === 'k') {
             // Delete to end of line.
             const nextLine = value.indexOf('\n', cursor);
             const end = nextLine === -1 ? value.length : nextLine;
-            setValue(value.slice(0, cursor) + value.slice(end));
+            setInput(value.slice(0, cursor) + value.slice(end), cursor);
             return;
         }
         if (isMod(key) && input === 'w') {
@@ -749,8 +732,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             let start = end;
             while (start > 0 && !/\s/.test(before[start - 1]))
                 start--;
-            setValue(value.slice(0, start) + value.slice(cursor));
-            setCursor(start);
+            setInput(value.slice(0, start) + value.slice(cursor), start);
             return;
         }
         if (key.escape) {
@@ -761,8 +743,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             // A single Esc closes the open command menu first (CC/pi behavior);
             // the double-tap-clear semantics only apply to ordinary input.
             if (overlayOpen) {
-                setValue('');
-                setCursor(0);
+                setInput('', 0);
                 setSelectedCommand(0);
                 setFileSelected(0);
                 return;
@@ -786,8 +767,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             // A single Esc clears the current input (if any); the double-tap
             // path below handles rewind/clear on an already-empty input.
             if (value.length > 0) {
-                setValue('');
-                setCursor(0);
+                setInput('', 0);
                 setSelectedCommand(0);
                 setFileSelected(0);
                 return;
@@ -803,8 +783,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
                     onRewindRequest?.();
                 }
                 else {
-                    setValue('');
-                    setCursor(0);
+                    setInput('', 0);
                 }
                 return;
             }
@@ -826,8 +805,7 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             if (helpOpen)
                 onToggleHelp();
             const next = value.slice(0, cursor) + input + value.slice(cursor);
-            setValue(next);
-            setCursor(cursor + input.length);
+            setInput(next, cursor + input.length);
             setSelectedCommand(0);
             setFileSelected(0);
         }

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

@@ -6,6 +6,10 @@ import React from 'react';
  * 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 declare function SearchBox({ query, placeholder, isFocused, isTerminalFocused, prefix, width, cursorOffset, borderless, }: {
     query: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,MAAY,EACZ,KAAK,EACL,YAAY,EACZ,UAAkB,GACnB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,KAAK,CAAC,SAAS,CAqDlB"}
+{"version":3,"file":"SearchBox.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAyD7E;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,MAAY,EACZ,KAAK,EACL,YAAY,EACZ,UAAkB,GACnB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,GAAG,KAAK,CAAC,SAAS,CA0GlB"}

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/SkillsPicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SkillInfo } from '../dsh-adapter/channel.js';
+/**
+ * `/skills` picker (issue #204) in the ModelPicker style: a
+ * permission-colored Pane listing the live agent's skill catalog —
+ * user-invocable skills lead with `/name`（它们在 / 菜单里也是这个形态），
+ * 描述行是「来源 · 简述」。Enter 由 Chat 填回 `/name `，Esc 关闭。
+ *
+ * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
+ * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
+ */
+export declare function SkillsPicker({ skills, focusIndex, }: {
+    skills: readonly SkillInfo[];
+    focusIndex: number;
+}): React.ReactNode;
+/** `/skills` while the registry snapshot is still in flight (ModelPickerLoading 同款). */
+export declare function SkillsPickerLoading(): React.ReactNode;
+//# sourceMappingURL=SkillsPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkillsPicker.d.ts","sourceRoot":"","sources":["../../../src/components/SkillsPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA2B1D;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,GACX,EAAE;IACD,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAyClB;AAED,wFAAwF;AACxF,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,SAAS,CAerD"}

package/lib/types/components/SkillsPicker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text, useTerminalSize } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+import { LoadingState } from './design-system/LoadingState.js';
+import { listWindow } from './listWindow.js';
+/** 来源桶 → 本地化标签（未知桶原样显示，SkillSource 对自定义桶开放）。 */
+function sourceLabel(source) {
+    switch (source) {
+        case 'bundled':
+            return t('skills-source-bundled');
+        case 'user-dsh':
+        case 'user-agents':
+            return t('skills-source-user');
+        case 'project-dsh':
+        case 'project-agents':
+            return t('skills-source-project');
+        case 'runtime':
+            return t('skills-source-runtime');
+        case 'custom':
+            return t('skills-source-custom');
+        default:
+            return source;
+    }
+}
+/**
+ * `/skills` picker (issue #204) in the ModelPicker style: a
+ * permission-colored Pane listing the live agent's skill catalog —
+ * user-invocable skills lead with `/name`（它们在 / 菜单里也是这个形态），
+ * 描述行是「来源 · 简述」。Enter 由 Chat 填回 `/name `，Esc 关闭。
+ *
+ * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
+ * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
+ */
+export function SkillsPicker({ skills, focusIndex, }) {
+    const { rows: terminalRows } = useTerminalSize();
+    // 每项恒占 2 行（正文 + 来源/简述描述行，均 truncate 成单行）。
+    // 框架行：浮层预留 8 + Pane 2 + 标题 2 + 页脚 1 = 13（ModelPicker 同款）。
+    const { start, end } = listWindow(skills.map(() => 2), focusIndex, Math.max(terminalRows - 13, 2));
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('picker-title-skills') }) }), skills.length === 0 ? (_jsx(Text, { dimColor: true, children: t('skills-empty') })) : (skills.slice(start, end).map((skill, index) => {
+                        const absoluteIndex = start + index;
+                        return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, description: `${sourceLabel(skill.source)}${skill.description === '' ? '' : ` · ${skill.description}`}`, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < skills.length, children: skill.userInvocable ? `/${skill.name}` : skill.name }, skill.name));
+                    }))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-fill-exit') }) })] }));
+}
+/** `/skills` while the registry snapshot is still in flight (ModelPickerLoading 同款). */
+export function SkillsPickerLoading() {
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: "permission", children: t('picker-title-skills') }), _jsx(LoadingState, { message: t('skills-loading'), bold: true, subtitle: t('skills-loading-subtitle') })] }) }));
+}

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"}