@deepseek-harness-tui/dsh-tui 0.8.7 → 0.9.0

package/lib/types/components/PromptInput.js

@@ -9,12 +9,16 @@ import { EffortInputBorder } from './EffortInputBorder.js';
 import { EffortTierBadge } from './EffortTierBadge.js';
 import { isLightThemeActive } from '../theme.js';
 import { useDeclaredCursor } from '../ink/hooks/use-declared-cursor.js';
+import { noteAuxNumber } from '../ink/geometry-trace.js';
+import instances from '../ink/instances.js';
 import { stringWidth } from '../ink/stringWidth.js';
+import { getGraphemeSegmenter } from '../utils/intl.js';
 import { formatClipboardInsert, readClipboard } from '../utils/clipboard.js';
 import { editInExternalEditor } from '../utils/externalEditor.js';
 import { isHiddenCommandName, parseCommandName } from '../commands.js';
 import { appendHistory } from '../history.js';
 import { mentionAtCaret } from '../utils/mentions.js';
+import { preserveSelection } from '../utils/fileSuggestions.js';
 import { isMod } from '../utils/modifiers.js';
 import { CommandSuggestions } from './CommandSuggestions.js';
 import { FileSuggestions } from './FileSuggestions.js';
@@ -51,6 +55,84 @@ function wordBoundaryRight(text, cursor) {
         index++;
     return index;
 }
+// --- grapheme-cluster geometry ---------------------------------------------
+// The caret, editing keys, and wrapping MUST agree on one text unit. Mixing
+// UTF-16 code units (arrows/backspace), code points (wrap), and display
+// cells (stringWidth) lets the caret land inside a surrogate pair or a ZWJ
+// emoji — the inverted caret then shows half a glyph, Backspace deletes
+// half a character, and `line.slice()` splits clusters. All offsets below
+// are UTF-16 indices snapped to grapheme boundaries via the shared
+// Intl.Segmenter (utils/intl.ts).
+/** Ascending grapheme boundary offsets of `text` (starts at 0, ends at
+ *  `text.length`). Empty text yields `[0]`. */
+function graphemeBoundaries(text) {
+    const bounds = [0];
+    for (const { index, segment } of getGraphemeSegmenter().segment(text)) {
+        const end = index + segment.length;
+        if (end > bounds[bounds.length - 1])
+            bounds.push(end);
+    }
+    return bounds;
+}
+/** Largest grapheme boundary `<= offset` (clamped into the text). Snaps a
+ *  cursor that landed mid-cluster back onto a boundary. */
+function boundaryAtOrBefore(bounds, offset) {
+    let lo = 0;
+    let hi = bounds.length - 1;
+    let ans = bounds[0];
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (bounds[mid] <= offset) {
+            ans = bounds[mid];
+            lo = mid + 1;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return ans;
+}
+/** Largest grapheme boundary strictly before `offset` (0 when none). */
+function previousGraphemeBoundary(bounds, offset) {
+    let lo = 0;
+    let hi = bounds.length - 1;
+    let ans = 0;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (bounds[mid] < offset) {
+            ans = bounds[mid];
+            lo = mid + 1;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return ans;
+}
+/** Smallest grapheme boundary strictly after `offset` (text.length when
+ *  none). Returns `offset` unchanged when it already is the last boundary. */
+function nextGraphemeBoundary(bounds, offset) {
+    let lo = 0;
+    let hi = bounds.length - 1;
+    let ans = bounds[hi] ?? 0;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (bounds[mid] > offset) {
+            ans = bounds[mid];
+            hi = mid - 1;
+        }
+        else {
+            lo = mid + 1;
+        }
+    }
+    return ans;
+}
+/** Snap an arbitrary UTF-16 offset onto a grapheme boundary of `text`,
+ *  clamping into range. The safety net under every cursor write. */
+function normalizeCursorOffset(text, offset) {
+    const clamped = Math.max(0, Math.min(offset, text.length));
+    return boundaryAtOrBefore(graphemeBoundaries(text), clamped);
+}
 /**
  * The empty input deliberately shows NO placeholder text: terminal emulators
  * paint the IME preedit (pinyin) at the physical cursor, which the app parks
@@ -65,9 +147,10 @@ const MAX_VISIBLE_LINES = 5;
 /**
  * Claude Code style prompt input: rounded border box (top+bottom borders
  * only), `❯ ` prompt char (dimmed while a turn is working), the text with a
- * block cursor at the cursor position, and below it the slash-command
- * suggestion overlay (name column + description, selected row in the
- * `suggestion` color — mirroring Claude Code's PromptInputFooterSuggestions).
+ * block cursor at the cursor position, and above it the slash-command /
+ * file-completion suggestion card (SuggestionCard: rounded panel with the
+ * selected row behind a `❯` pointer in the theme's `suggestion` color,
+ * mirroring Claude Code's PromptInputFooterSuggestions layout).
  *
  * Empty input: a solid block caret on a blank cell and nothing else — no
  * placeholder text, so the terminal-painted IME preedit (pinyin) at the
@@ -128,10 +211,7 @@ 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);
+            setInput(fillText);
             onFillConsumed?.();
         }
     }, [fillText, onFillConsumed]);
@@ -152,10 +232,20 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     }, []);
     const { columns, rows: terminalRows } = useTerminalSize();
     const helpScrollRef = React.useRef(null);
-    // OverlayAbove reserves six terminal rows for the composer/status chrome;
-    // the help block also keeps one row below it. Its own final row is a
-    // persistent navigation hint, leaving the remainder to ScrollBox.
-    const helpViewportHeight = Math.max(3, Math.max(terminalRows - 6, 4) - 1);
+    // Help viewport budget: the overlay anchors at the composer's top edge
+    // (OverlayAbove bottom:'100%') and grows UP, so its budget is the space
+    // ABOVE that anchor — smallest on an empty session, where the whale
+    // splash (~15 rows) sits between the screen top and the composer
+    // (terminalRows minus chrome only applies once the transcript fills the
+    // viewport). Take the conservative intersection: 15 rows of viewport (16
+    // with the hint + margin) fits the empty-session anchor on the default
+    // layout at any terminal size, and the renderer's bottom-anchored
+    // clipping for absolute overlays (no negative-y clamp) then never has
+    // to eat the overlay's FIRST rows — the shortcut-column headers. The
+    // command registry scrolls inside the viewport, so a taller terminal
+    // loses nothing functional. (PR #446; restored after the picker
+    // snapshot's cherry-pick resurrected the old formula.)
+    const helpViewportHeight = Math.max(3, Math.min(terminalRows - 7, 15));
     const suggestions = value.startsWith('/') ? channel.commandCompletions(value) : [];
     const overlayOpen = suggestions.length > 0 &&
         !helpOpen &&
@@ -165,29 +255,31 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     // CARET, so `@` works mid-message (`看看 @src/a.ts 这个`), not only when it
     // is the input's first character. The cwd listing loads when the trigger
     // appears.
-    const [fileList, setFileList] = React.useState([]);
+    const [fileMatches, setFileMatches] = React.useState([]);
     const [fileSelected, setFileSelected] = React.useState(0);
     const mention = mentionAtCaret(value, cursor);
     const atTrigger = mention !== undefined;
+    const fileRequestId = React.useRef(0);
+    const selectedFile = fileMatches[fileSelected];
     React.useEffect(() => {
-        if (atTrigger) {
-            void channel.listFiles().then(setFileList);
-        }
-    }, [atTrigger, channel]);
-    const atRest = (mention?.query ?? '').toLowerCase();
-    // Match the relative path prefix OR the basename (CC's IDE suggestions do
-    // both): `@src/ink` and `@ink` both find `src/ink/Box.js`.
-    const fileMatches = atTrigger
-        ? fileList.filter(file => {
-            const lower = file.toLowerCase();
-            if (lower.startsWith(atRest))
-                return true;
-            if (atRest.includes('/'))
-                return false;
-            const base = lower.split('/').pop() ?? '';
-            return base.startsWith(atRest);
-        })
-        : [];
+        const requestId = ++fileRequestId.current;
+        if (!mention) {
+            setFileMatches([]);
+            setFileSelected(0);
+            return;
+        }
+        const previous = selectedFile;
+        // Deps key on `mention.query` (and trigger on/off) only: cursor movement
+        // within the same token must NOT refetch, and `selectedFile`/`fileSelected`
+        // are read as their render-time values only to seed selection preservation.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        void channel.listFileCandidates(mention.query, { topK: 50 }).then(next => {
+            if (requestId !== fileRequestId.current)
+                return;
+            setFileMatches(next);
+            setFileSelected(preserveSelection(previous, next, fileSelected));
+        });
+    }, [channel, mention?.query, atTrigger]);
     // Esc dismisses the overlay for the token being edited (it reopens once the
     // text changes); it must NOT clear a mid-message input.
     const fileEscRef = React.useRef(-1);
@@ -200,7 +292,11 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         fileEscRef.current !== mention?.start;
     const setInput = (next, cursorOffset = next.length) => {
         valueRef.current = next;
-        cursorRef.current = Math.max(0, Math.min(cursorOffset, next.length));
+        // Normalize onto a grapheme boundary (also clamps into range): every
+        // caller passes a caret they believe is on a character edge — paste
+        // merges, history fills, and IME composition can still hand back an
+        // offset inside a surrogate pair or combining cluster.
+        cursorRef.current = normalizeCursorOffset(next, cursorOffset);
         setValue(next);
         setCursor(cursorRef.current);
     };
@@ -210,11 +306,12 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
      * directory inserts `@dir/` without a trailing space so completion
      * continues into it; a file completes the token with a space.
      */
-    const acceptFile = (file) => {
+    const acceptFile = (candidate) => {
         if (!mention)
             return;
+        const file = candidate.path;
         const body = /\s/.test(file) ? `@"${file}"` : `@${file}`;
-        const insert = file.endsWith('/') ? body : `${body} `;
+        const insert = candidate.kind === 'directory' ? body : `${body} `;
         const next = value.slice(0, mention.start) + insert + value.slice(mention.end);
         setInput(next, mention.start + insert.length);
         setFileSelected(0);
@@ -384,6 +481,9 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         // the text/caret produced by the preceding event in that batch.
         const value = valueRef.current;
         const cursor = cursorRef.current;
+        // Grapheme boundaries of the current text: every caret move / delete
+        // below snaps onto one of these offsets (never mid-cluster).
+        const bounds = graphemeBoundaries(value);
         /** Insert text at the caret (typing, paste) and dismiss overlays. */
         const insertAtCaret = (text) => {
             if (helpOpen)
@@ -747,23 +847,27 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
             return;
         }
         if (key.leftArrow) {
-            setInput(value, Math.max(0, cursor - 1));
+            // Grapheme-step: skip the whole cluster (surrogate pair, ZWJ emoji,
+            // combining mark) so the caret never sits inside one.
+            setInput(value, previousGraphemeBoundary(bounds, cursor));
             return;
         }
         if (key.rightArrow) {
-            setInput(value, Math.min(value.length, cursor + 1));
+            setInput(value, nextGraphemeBoundary(bounds, cursor));
             return;
         }
         if (key.backspace) {
             if (cursor === 0)
                 return;
-            setInput(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+            const start = previousGraphemeBoundary(bounds, cursor);
+            setInput(value.slice(0, start) + value.slice(cursor), start);
             return;
         }
         if (key.delete) {
-            if (cursor >= value.length)
+            const end = nextGraphemeBoundary(bounds, cursor);
+            if (end === cursor)
                 return;
-            setInput(value.slice(0, cursor) + value.slice(cursor + 1), cursor);
+            setInput(value.slice(0, cursor) + value.slice(end), cursor);
             return;
         }
         if (key.home) {
@@ -890,7 +994,10 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     // === Render: hard-wrap every logical line at the input width, then show
     // the window of visual lines with the caret row always visible (CC's
     // maxVisibleLines behavior with automatic wrapping).
-    const inputWidth = Math.max(10, columns - 3);
+    // Narrow terminals: the usable width follows the real terminal down to a
+    // single column — a fixed floor of 10 would wrap far too early and park
+    // the declared cursor past the value box's actual width.
+    const inputWidth = Math.max(1, columns - 3);
     const visualLines = wrapToWidth(value, inputWidth);
     const caretVisualLine = wrapToWidth(value.slice(0, cursor), inputWidth).length - 1;
     const windowStart = Math.max(0, Math.min(caretVisualLine - MAX_VISIBLE_LINES + 1, visualLines.length - MAX_VISIBLE_LINES));
@@ -918,13 +1025,38 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
         if (absoluteLine !== caretVisualLine) {
             return (_jsx(Text, { wrap: "truncate-end", children: line }, absoluteLine));
         }
-        // Caret row: invert the char at the caret column (solid block).
+        // Caret row: invert the grapheme cluster at the caret column (solid
+        // block). `col` is a cluster boundary by construction (the cursor is
+        // normalized onto boundaries and wrapping only breaks between
+        // graphemes), so [col, next boundary) covers the WHOLE cluster — a
+        // surrogate pair or ZWJ emoji inverts as one glyph, never two broken
+        // halves.
         const col = caretCharCol();
+        const clusterEnd = nextGraphemeBoundary(graphemeBoundaries(line), col);
         const before = line.slice(0, col);
-        const at = line[col] ?? ' ';
-        const after = line.slice(col + 1);
+        const at = clusterEnd > col ? line.slice(col, clusterEnd) : ' ';
+        const after = line.slice(clusterEnd);
         return (_jsxs(Text, { wrap: "truncate-end", children: [before, _jsx(Text, { inverse: true, children: at }), after] }, absoluteLine));
     });
+    // Composer height shrink: clearing multi-line text (Enter/Esc/Ctrl+C/
+    // Backspace) collapses the input area within one commit, shifting the
+    // status line up and the whole chrome with it. The renderer's
+    // full-damage pass (didLayoutShift) repaints the shifted siblings, but
+    // inline mode's virtual↔scrollback correspondence needs the stronger
+    // in-place viewport repaint — same treatment as Ctrl+O and the
+    // loaded-context toggle (see Chat.tsx). One-shot, only on SHRINK:
+    // growth scrolls the terminal naturally and needs no recovery.
+    const contentRows = value.length === 0 ? 1 : visibleLines.length;
+    noteAuxNumber('promptContentRows', contentRows);
+    const prevContentRowsRef = React.useRef(contentRows);
+    React.useLayoutEffect(() => {
+        if (contentRows < prevContentRowsRef.current) {
+            const ink = instances.get(process.stdout) ?? instances.values().next().value;
+            ink?.invalidatePrevFrame();
+            ink?.reanchorViewport();
+        }
+        prevContentRowsRef.current = contentRows;
+    }, [contentRows]);
     const lastNotification = channel.notifications[channel.notifications.length - 1];
     // Park the native terminal cursor at the input caret (via the renderer's
     // cursor-declaration mechanism). Terminal emulators render IME preedit
@@ -935,27 +1067,73 @@ export function PromptInput({ channel, helpOpen, onToggleHelp, onRunCommand, sel
     // relative to the value box the ref attaches to.
     const valueBoxRef = useDeclaredCursor({
         line: caretVisualLine - windowStart,
-        column: caretVisualCol(),
+        // Clamp the declared column to the wrap width: a grapheme wider than
+        // the last remaining column (emoji at width 1) can push the visual
+        // column past inputWidth, and the park must stay inside the value box.
+        column: Math.min(caretVisualCol(), inputWidth),
         active: !selectionActive,
     });
+    /**
+     * Click-to-position the caret: map a click inside the value box (local
+     * row/column relative to the box) to a UTF-16 cursor offset via the same
+     * grapheme walk the renderer wraps with — exact under CJK widths, wrapped
+     * rows and multi-codepoint clusters. Clicks land on the boundary nearest
+     * the clicked cell (mid-grapheme snaps to its start).
+     */
+    const handleValueClick = React.useCallback((e) => {
+        const clickedVisual = windowStart + e.localRow;
+        const clamped = Math.max(0, Math.min(clickedVisual, visualLines.length - 1));
+        setCursor(clickToCursorOffset(value, inputWidth, clamped, e.localCol));
+    }, [windowStart, visualLines.length, value, inputWidth]);
     // 浮层整体挂载条件：与内部面板可见条件精确同值。关闭时必须把整个
     // absolute 浮层移除——渲染器的 absolute-removed 检测只看被移除节点自身
     // 的 style.position，常驻浮层 + 移除普通子节点不会触发 blit 解毒，被
     // 覆盖的转录行会留空（见 Chat.tsx dialogOverlayOpen 注释）。
     const floatersOpen = helpOpen || channel.pending.length > 0 || fileOverlayOpen || overlayOpen;
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [floatersOpen && (_jsxs(OverlayAbove, { maxHeight: Math.max(terminalRows - 6, 4), children: [helpOpen && (_jsx(Box, { marginBottom: 1, children: _jsx(HelpMenu, { commands: channel.commandList, viewportHeight: helpViewportHeight, viewportWidth: columns, scrollRef: helpScrollRef }) })), !helpOpen && channel.pending.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, paddingBottom: 1, children: [channel.pending.some(item => item.placement === 'steer') && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["\u26A1 ", t('input-pending-steer-label')] }), channel.pending
+    // 补全卡片边框与输入框 idle 边框同色（plan 模式下整套面板一起变 sage 绿）。
+    const promptAccent = channel.mode.plan === true ? 'planMode' : 'promptBorder';
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [floatersOpen && (_jsxs(OverlayAbove, { maxHeight: Math.max(terminalRows - 6, 1), children: [helpOpen && (_jsx(Box, { marginBottom: 1, children: _jsx(HelpMenu, { commands: channel.commandList, viewportHeight: helpViewportHeight, viewportWidth: columns, scrollRef: helpScrollRef, onCommandPick: (name) => {
+                                // 点击命令行 = 填入 /name 并关闭帮助（Tab 补全的鼠标等价）
+                                setInput(`/${name} `);
+                                onToggleHelp();
+                            } }) })), !helpOpen && channel.pending.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, paddingBottom: 1, children: [channel.pending.some(item => item.placement === 'steer') && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["\u26A1 ", t('input-pending-steer-label')] }), channel.pending
                                         .filter(item => item.placement === 'steer')
                                         .map(item => (_jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', "\u21B3 ", item.text] }, item.id)))] })), channel.pending.some(item => item.placement === 'followup') && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["\u23F3 ", t('input-pending-queue-label')] }), channel.pending
                                         .filter(item => item.placement === 'followup')
-                                        .map(item => (_jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', "\u21B3 ", item.text] }, item.id)))] })), _jsxs(Text, { dimColor: true, children: ["Alt+\u2191 ", t('input-pending-actions-hint')] })] })), fileOverlayOpen && (_jsx(Box, { paddingLeft: 2, paddingBottom: 1, children: _jsx(FileSuggestions, { files: fileMatches, selectedIndex: fileSelected, columns: columns }) })), overlayOpen && (_jsx(Box, { paddingLeft: 2, paddingBottom: 1, children: _jsx(CommandSuggestions, { commands: suggestions, selectedIndex: selectedCommand, columns: columns }) }))] })), lastNotification && (_jsx(Box, { position: "absolute", marginTop: -1, height: 1, width: "100%", paddingLeft: 2, paddingRight: 1, flexDirection: "column", justifyContent: "flex-end", overflow: "hidden", children: _jsx(Box, { justifyContent: "flex-end", children: _jsx(Text, { color: lastNotification.color, dimColor: !lastNotification.color, wrap: "truncate", children: lastNotification.text }) }) })), _jsx(EffortInputBorder, { effort: channel.reasoningEffort, levels: channel.effortLevels, columns: columns, onLight: isLightThemeActive(themeName), idleColor: channel.mode.plan === true ? 'planMode' : 'promptBorder', children: _jsxs(Box, { flexDirection: "row", alignItems: "flex-start", width: "100%", children: [_jsx(EffortChargeGlyph, { effort: channel.reasoningEffort, levels: channel.effortLevels, working: channel.working }), _jsx(Box, { ref: valueBoxRef, flexGrow: 1, flexShrink: 1, children: value.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(EffortTierBadge, { effort: channel.reasoningEffort, levels: channel.effortLevels, onLight: isLightThemeActive(themeName), columns: columns, leadingColumns: 3 })] })) : (_jsx(Box, { flexDirection: "column", children: rendered })) })] }) })] }));
+                                        .map(item => (_jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', "\u21B3 ", item.text] }, item.id)))] })), _jsxs(Text, { dimColor: true, children: ["Alt+\u2191 ", t('input-pending-actions-hint')] })] })), fileOverlayOpen && (_jsx(FileSuggestions, { files: fileMatches, selectedIndex: fileSelected, columns: columns, query: mention?.query ?? '', accent: promptAccent, 
+                        // 点击行 = 接受该项（与 Enter 同路径）
+                        onPick: (index) => {
+                            const file = fileMatches[index];
+                            if (file)
+                                acceptFile(file);
+                        }, 
+                        // 滚轮 = 移动选中行（与 ↑/↓ 同路径，窗口跟随）
+                        onWheelStep: (step) => {
+                            setFileSelected(i => Math.max(0, Math.min(fileMatches.length - 1, i + step)));
+                        } })), overlayOpen && (_jsx(CommandSuggestions, { commands: suggestions, selectedIndex: selectedCommand, columns: columns, query: value, accent: promptAccent, 
+                        // 点击行 = 运行该命令（与 Enter 同路径）
+                        onPick: (index) => {
+                            const command = suggestions[index];
+                            if (command)
+                                tryRunCommand(command.commandLine);
+                        }, 
+                        // 滚轮 = 移动选中行（与 ↑/↓ 同路径，窗口跟随）
+                        onWheelStep: (step) => {
+                            setSelectedCommand(i => Math.max(0, Math.min(suggestions.length - 1, i + step)));
+                        } }))] })), lastNotification && (_jsx(Box, { position: "absolute", marginTop: -1, height: 1, width: "100%", paddingLeft: 2, paddingRight: 1, flexDirection: "column", justifyContent: "flex-end", overflow: "hidden", children: _jsx(Box, { justifyContent: "flex-end", children: _jsx(Text, { color: lastNotification.color, dimColor: !lastNotification.color, wrap: "truncate", children: lastNotification.text }) }) })), _jsx(EffortInputBorder, { effort: channel.reasoningEffort, levels: channel.effortLevels, columns: columns, onLight: isLightThemeActive(themeName), idleColor: promptAccent, children: _jsxs(Box, { flexDirection: "row", alignItems: "flex-start", width: "100%", children: [_jsx(EffortChargeGlyph, { effort: channel.reasoningEffort, levels: channel.effortLevels, working: channel.working }), _jsx(Box, { ref: valueBoxRef, flexGrow: 1, flexShrink: 1, onClick: handleValueClick, children: value.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsx(EffortTierBadge, { effort: channel.reasoningEffort, levels: channel.effortLevels, onLight: isLightThemeActive(themeName), columns: columns, leadingColumns: 3 })] })) : (_jsx(Box, { flexDirection: "column", children: rendered })) })] }) })] }));
 }
 /**
  * Hard-wrap text into visual rows of at most `width` columns (CJK-aware via
  * stringWidth). Used by the input renderer so long lines wrap instead of
- * truncating, with exact caret-row mapping.
+ * truncating, with exact caret-row mapping. Wrapping only ever breaks
+ * BETWEEN grapheme clusters: iterating code points would split ZWJ emoji
+ * and combining sequences across rows, leaving a broken half at each edge
+ * and desyncing the caret's row arithmetic (which walks cluster
+ * boundaries).
  */
 function wrapToWidth(text, width) {
     const rows = [];
+    const segmenter = getGraphemeSegmenter();
     for (const line of text.split('\n')) {
         if (line === '') {
             rows.push('');
@@ -963,15 +1141,15 @@ function wrapToWidth(text, width) {
         }
         let current = '';
         let currentWidth = 0;
-        for (const ch of line) {
-            const w = stringWidth(ch);
+        for (const { segment } of segmenter.segment(line)) {
+            const w = stringWidth(segment);
             if (currentWidth + w > width && current !== '') {
                 rows.push(current);
-                current = ch;
+                current = segment;
                 currentWidth = w;
             }
             else {
-                current += ch;
+                current += segment;
                 currentWidth += w;
             }
         }
@@ -979,3 +1157,48 @@ function wrapToWidth(text, width) {
     }
     return rows;
 }
+/**
+ * Inverse of {@link wrapToWidth}: map a click position (visual row index +
+ * visual column) back to a UTF-16 offset in the original text. Walks the
+ * same grapheme boundaries with the same break rule, so every visual row's
+ * start offset is known exactly. Within the clicked row, the caret snaps to
+ * the boundary nearest the click: a grapheme whose midpoint lies past the
+ * click column takes the caret before it, otherwise after.
+ */
+function clickToCursorOffset(text, width, visualLine, visualCol) {
+    const segmenter = getGraphemeSegmenter();
+    let row = 0;
+    let offset = 0;
+    for (const line of text.split('\n')) {
+        if (line === '') {
+            if (row === visualLine)
+                return offset;
+            row++;
+            offset++; // the '\n'
+            continue;
+        }
+        let currentWidth = 0;
+        for (const { segment } of segmenter.segment(line)) {
+            const w = stringWidth(segment);
+            if (currentWidth + w > width && currentWidth > 0) {
+                if (row === visualLine)
+                    return offset; // end of the clicked wrapped row
+                row++;
+                currentWidth = 0;
+            }
+            if (row === visualLine) {
+                if (currentWidth + w / 2 > visualCol)
+                    return offset;
+                if (currentWidth + w > visualCol)
+                    return offset + segment.length;
+            }
+            currentWidth += w;
+            offset += segment.length;
+        }
+        if (row === visualLine)
+            return offset;
+        row++;
+        offset++; // the '\n'
+    }
+    return offset;
+}

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

@@ -12,7 +12,7 @@ import type { TuiRewindMode } from '../dsh-adapter/extension-events.js';
  * a choice list whose option zero is always the built-in conversation-only
  * rewind, followed by the plugin's modes (e.g. "also restore files").
  */
-export declare function RewindPicker({ rows, focusIndex, confirmRow, modes, modeIndex, busy, }: {
+export declare function RewindPicker({ rows, focusIndex, confirmRow, modes, modeIndex, busy, onPickRow, onConfirm, onPickMode, }: {
     rows: readonly ChatRow[];
     focusIndex: number;
     confirmRow: ChatRow | null;
@@ -22,5 +22,16 @@ export declare function RewindPicker({ rows, focusIndex, confirmRow, modes, mode
     modeIndex?: number;
     /** True while the plugin decision is in flight. */
     busy?: boolean;
+    /**
+     * Mouse pick on a list row (fullscreen): sets focus only — rewind is a
+     * high-risk invisible-confirm operation, so stepping into the confirm
+     * state stays an explicit keyboard Enter.
+     */
+    onPickRow?: (index: number) => void;
+    /** Mouse click on the plain confirm row: executes the rewind directly —
+     *  the confirm pane itself is the explicit confirmation layer. */
+    onConfirm?: () => void;
+    /** Mouse pick on a modes-list option: executes that mode directly. */
+    onPickMode?: (index: number) => void;
 }): React.ReactNode;
 //# sourceMappingURL=RewindPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RewindPicker.d.ts","sourceRoot":"","sources":["../../../src/components/RewindPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAMvE;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAY,EACZ,SAAa,EACb,IAAY,GACb,EAAE;IACD,IAAI,EAAE,SAAS,OAAO,EAAE,CAAA;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,IAAI,CAAA;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI,CAAA;IACvC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CA4GlB"}
+{"version":3,"file":"RewindPicker.d.ts","sourceRoot":"","sources":["../../../src/components/RewindPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAMvE;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAY,EACZ,SAAa,EACb,IAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,GACX,EAAE;IACD,IAAI,EAAE,SAAS,OAAO,EAAE,CAAA;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,IAAI,CAAA;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI,CAAA;IACvC,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;sEACkE;IAClE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,sEAAsE;IACtE,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC,GAAG,KAAK,CAAC,SAAS,CAkHlB"}

package/lib/types/components/RewindPicker.js

@@ -16,7 +16,7 @@ import { listWindow } from './listWindow.js';
  * a choice list whose option zero is always the built-in conversation-only
  * rewind, followed by the plugin's modes (e.g. "also restore files").
  */
-export function RewindPicker({ rows, focusIndex, confirmRow, modes = null, modeIndex = 0, busy = false, }) {
+export function RewindPicker({ rows, focusIndex, confirmRow, modes = null, modeIndex = 0, busy = false, onPickRow, onConfirm, onPickMode, }) {
     if (confirmRow !== null) {
         if (modes !== null) {
             // Plugin modes: a described choice list (one extra row per
@@ -34,10 +34,10 @@ export function RewindPicker({ rows, focusIndex, confirmRow, modes = null, modeI
             ];
             return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "remember", bold: true, children: t('rewind-confirm-title') }), _jsx(Text, { dimColor: true, children: preview(confirmRow.text) })] }), options.slice(start, end).map((option, index) => {
                                 const absoluteIndex = start + index;
-                                return (_jsx(ListItem, { isFocused: absoluteIndex === modeIndex, description: option.description, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < options.length, children: option.label }, option.key));
+                                return (_jsx(ListItem, { isFocused: absoluteIndex === modeIndex, description: option.description, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < options.length, onClick: onPickMode === undefined ? undefined : () => onPickMode(absoluteIndex), children: option.label }, option.key));
                             })] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-select-exit') }) })] }));
         }
-        return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('rewind-confirm-title') }) }), _jsx(ListItem, { isFocused: false, description: t('rewind-confirm-desc'), children: preview(confirmRow.text) }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-rewind-back') }) })] }) }));
+        return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('rewind-confirm-title') }) }), _jsx(ListItem, { isFocused: false, description: t('rewind-confirm-desc'), onClick: onConfirm, children: preview(confirmRow.text) }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-rewind-back') }) })] }) }));
     }
     const { rows: terminalRows } = useTerminalSize();
     // 焦点窗口化按行预算：首项带 'last message' 描述占 2 行、其余 1 行
@@ -46,7 +46,9 @@ export function RewindPicker({ rows, focusIndex, confirmRow, modes = null, modeI
     const { start, end } = listWindow(rows.map((_, i) => (i === 0 ? 2 : 1)), focusIndex, Math.max(terminalRows - 14, 2));
     return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "remember", bold: true, children: t('rewind-title') }), _jsx(Text, { dimColor: true, children: t('rewind-subtitle') })] }), rows.length === 0 ? (_jsx(ListItem, { isFocused: false, children: t('rewind-empty') })) : (rows.slice(start, end).map((row, index) => {
                         const absoluteIndex = start + index;
-                        return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, description: absoluteIndex === 0 ? t('rewind-last-message') : undefined, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < rows.length, children: preview(row.text) }, row.id));
+                        return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, description: absoluteIndex === 0 ? t('rewind-last-message') : undefined, showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < rows.length, onClick: onPickRow !== undefined && !busy
+                                ? () => onPickRow(absoluteIndex)
+                                : undefined, children: preview(row.text) }, row.id));
                     })), busy && _jsx(Text, { dimColor: true, children: t('rewind-waiting-plugins') })] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-select-exit') }) })] }));
 }
 /** One-line preview of a message (newlines flattened, capped). */

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type ScrollBoxHandle } from '../ui.js';
+/**
+ * Proportional scrollbar for the fullscreen transcript's gutter — the
+ * `scrollbar` option of the `dsh-tui.scrollGutter` setting (the timeline
+ * rail's sibling; same 2-column slot, same chrome rules):
+ *
+ *  - the thumb (██) shows the visible window's position AND size over the
+ *    whole content (viewport²/content tall, positioned by scrollTop);
+ *  - clicking the track scrolls the clicked position to the viewport top
+ *    (classic scrollbar semantics — the thumb centers under the click
+ *    through the follow-up renders);
+ *  - the gutter is permanent while scrollable (Qwen's rule: an
+ *    auto-hiding gutter that changes content width rewraps everything);
+ *    hidden below 60 terminal columns or when the content fits (inline
+ *    mode keeps the terminal's native scrollback);
+ *  - NoSelect fences the glyphs out of click-drag text selection; the
+ *    wheel over the gutter scrolls the transcript.
+ *
+ * Thumb dragging is intentionally NOT implemented (Grok's MVP rule): a
+ * proportional thumb encodes position, and the tick rail remains the
+ * semantic navigator. Click-to-position covers the same need.
+ */
+export declare function ScrollbarGutter({ handle, terminalWidth, }: {
+    handle: ScrollBoxHandle | null;
+    terminalWidth: number;
+}): React.ReactNode;
+//# sourceMappingURL=ScrollbarGutter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarGutter.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollbarGutter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AAOpE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,GACd,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,MAAM,CAAA;CACtB,GAAG,KAAK,CAAC,SAAS,CA2DlB"}