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

package/lib/types/components/ScrollbarGutter.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, NoSelect } from '../ui.js';
+import { RAIL_MIN_TERMINAL_WIDTH, RAIL_WIDTH } from '../ink/timeline-rail.js';
+/** Thumb glyph across the 2-col gutter: solid, clearly positional —
+ *  deliberately distinct from the timeline's ━━ active tick. */
+const THUMB = '██';
+/**
+ * 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 function ScrollbarGutter({ handle, terminalWidth, }) {
+    const [, setTick] = React.useState(0);
+    React.useEffect(() => {
+        if (!handle)
+            return;
+        return handle.subscribe(() => setTick(t => t + 1));
+    }, [handle]);
+    if (!handle)
+        return null;
+    const viewport = handle.getViewportHeight();
+    const content = handle.getScrollHeight();
+    const maxScroll = Math.max(0, content - viewport);
+    if (viewport < 2 || content <= viewport || terminalWidth < RAIL_MIN_TERMINAL_WIDTH)
+        return null;
+    // Thumb: the visible window mapped onto the gutter. Height proportional
+    // to the visible fraction (≥2 rows so it is always grabbable-looking);
+    // top follows scrollTop over the scroll range.
+    const thumbH = Math.max(2, Math.round((viewport * viewport) / content));
+    const trackH = Math.max(1, viewport - thumbH);
+    const thumbTop = Math.round((handle.getScrollTop() / Math.max(1, maxScroll)) * trackH);
+    const thumbBottom = Math.min(viewport, thumbTop + thumbH);
+    // Clicking the track maps the clicked row's position on the track back
+    // to a scrollTop and scrolls that content position to the viewport top.
+    const trackScrollTop = (y) => {
+        if (y <= 0)
+            return 0;
+        if (y >= trackH)
+            return maxScroll;
+        return Math.round((y / trackH) * maxScroll);
+    };
+    const rows = [];
+    for (let y = 0; y < viewport; y++) {
+        const inThumb = y >= thumbTop && y < thumbBottom;
+        rows.push(_jsx(Box, { height: 1, flexShrink: 0, onClick: () => handle.scrollTo(trackScrollTop(y)), children: _jsx(Text, { color: inThumb ? 'inactive' : undefined, children: inThumb ? THUMB : '  ' }) }, y));
+    }
+    return (_jsx(NoSelect, { fromLeftEdge: true, children: _jsx("ink-box", { onWheel: e => {
+                if (e.deltaY !== 0)
+                    handle.scrollBy(e.deltaY);
+            }, style: { flexDirection: 'column', flexShrink: 0, width: RAIL_WIDTH }, children: rows }) }));
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ClickEvent } from '../ink/events/click-event.js';
 export type SelectOption = {
     value: string;
     /** Row content; plain strings render inline, richer rows may carry color swatches. */
@@ -11,12 +12,18 @@ export type SelectOption = {
  * scroll arrows). Keyboard navigation is owned by the parent dialog, which
  * passes focus/selection indices back in.
  */
-export declare function Select({ options, focusIndex, selectedValue, visibleOptionCount, }: {
+export declare function Select({ options, focusIndex, selectedValue, visibleOptionCount, onPick, }: {
     options: readonly SelectOption[];
     /** Index of the keyboard-focused row (shows the ❯ pointer). */
     focusIndex: number;
     /** Value of the chosen row (shows the ✓ checkmark). */
     selectedValue: string | undefined;
     visibleOptionCount?: number;
+    /**
+     * Mouse pick handler (fullscreen). Clicking a row reports the row's
+     * absolute index — the parent typically applies it with the same code
+     * path as the keyboard Enter. Absent → rows are not clickable.
+     */
+    onPick?: (index: number, value: string, event: ClickEvent) => void;
 }): React.ReactNode;
 //# sourceMappingURL=Select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,UAAU,EACV,aAAa,EACb,kBAAsB,GACvB,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,GAAG,KAAK,CAAC,SAAS,CAiClB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAG9D,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,UAAU,EACV,aAAa,EACb,kBAAsB,EACtB,MAAM,GACP,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;CACnE,GAAG,KAAK,CAAC,SAAS,CAsClB"}

package/lib/types/components/Select.js

@@ -7,13 +7,15 @@ import { ListItem } from './design-system/ListItem.js';
  * scroll arrows). Keyboard navigation is owned by the parent dialog, which
  * passes focus/selection indices back in.
  */
-export function Select({ options, focusIndex, selectedValue, visibleOptionCount = 5, }) {
+export function Select({ options, focusIndex, selectedValue, visibleOptionCount = 5, onPick, }) {
     // Window around the focus row, with scroll hints at the edges (CC style).
     const startIndex = Math.max(0, Math.min(focusIndex - Math.floor(visibleOptionCount / 2), options.length - visibleOptionCount));
     const endIndex = Math.min(startIndex + visibleOptionCount, options.length);
     const visible = options.slice(startIndex, endIndex);
     return (_jsx(Box, { flexDirection: "column", children: visible.map((option, index) => {
             const absoluteIndex = startIndex + index;
-            return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, isSelected: option.value === selectedValue, description: option.description, showScrollUp: absoluteIndex === startIndex && startIndex > 0, showScrollDown: absoluteIndex === endIndex - 1 && endIndex < options.length, children: option.label }, option.value));
+            return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, isSelected: option.value === selectedValue, description: option.description, showScrollUp: absoluteIndex === startIndex && startIndex > 0, showScrollDown: absoluteIndex === endIndex - 1 && endIndex < options.length, onClick: onPick
+                    ? (event) => onPick(absoluteIndex, option.value, event)
+                    : undefined, children: option.label }, option.value));
         }) }));
 }

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

@@ -9,9 +9,12 @@ import type { SkillInfo } from '../dsh-adapter/channel.js';
  * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
  * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
  */
-export declare function SkillsPicker({ skills, focusIndex, }: {
+export declare function SkillsPicker({ skills, focusIndex, onPick, }: {
     skills: readonly SkillInfo[];
     focusIndex: number;
+    /** Mouse pick (fullscreen): clicked row's absolute index (Chat applies
+     *  the same code path as the keyboard Enter). */
+    onPick?: (index: number) => void;
 }): React.ReactNode;
 /** `/skills` while the registry snapshot is still in flight (ModelPickerLoading 同款). */
 export declare function SkillsPickerLoading(): React.ReactNode;

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

@@ -1 +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"}
+{"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,EACV,MAAM,GACP,EAAE;IACD,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAClB;qDACiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CA0ClB;AAED,wFAAwF;AACxF,wBAAgB,mBAAmB,IAAI,KAAK,CAAC,SAAS,CAerD"}

package/lib/types/components/SkillsPicker.js

@@ -34,14 +34,14 @@ function sourceLabel(source) {
  * 长列表按焦点窗口化（ModelPicker 同款）：picker 经 OverlayAbove 浮层挂载后
  * 有 maxHeight 裁剪，全量渲染会让焦点行被裁掉（看不到焦点按 Enter）。
  */
-export function SkillsPicker({ skills, focusIndex, }) {
+export function SkillsPicker({ skills, focusIndex, onPick, }) {
     const { rows: terminalRows } = useTerminalSize();
     // 每项恒占 2 行（正文 + 来源/简述描述行，均 truncate 成单行）。
     // 框架行：浮层预留 8 + Pane 2 + 标题 2 + 页脚 1 + 挂载包裹 marginTop 1 = 14（ModelPicker 同款）。
     const { start, end } = listWindow(skills.map(() => 2), focusIndex, Math.max(terminalRows - 14, 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));
+                        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, onClick: onPick ? () => onPick(absoluteIndex) : undefined, 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 同款). */

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { SubagentState } from '../dsh-adapter/subagents.js';
+import type { ClickEvent } from '../ink/events/click-event.js';
 export interface SubagentCardProps {
     subagent: SubagentState;
     focused?: boolean;
-    onClick?: () => void;
+    onClick?(event: ClickEvent): void;
 }
 export declare function SubagentCard({ subagent, focused, onClick }: SubagentCardProps): React.ReactNode;
 //# sourceMappingURL=SubagentCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubagentCard.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAShE,MAAM,WAAW,iBAAiB;IAAG,QAAQ,EAAE,aAAa,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE;AAEvG,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CA4B/F"}
+{"version":3,"file":"SubagentCard.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAGhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAO9D,MAAM,WAAW,iBAAiB;IAAG,QAAQ,EAAE,aAAa,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;CAAE;AAEpH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAwC/F"}

package/lib/types/components/SubagentCard.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Box, Text } from '../ui.js';
 import { t } from '../i18n.js';
 import { isMinimalMode } from '../minimalMode.js';
@@ -22,5 +23,9 @@ export function SubagentCard({ subagent, focused, onClick }) {
         : running ? 'warning'
             : subagent.status === 'failed' || subagent.status === 'cancelled' ? 'error'
                 : 'success';
-    return _jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginBottom: 1, onClick: onClick, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: glyphColor, children: glyph }), _jsx(Text, { bold: true, color: focused ? 'claude' : undefined, children: `${t('subagent-card-prefix')}${subagent.description}` }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: ' · ' }), _jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsx(Text, { dimColor: true, children: ` · ${formatDuration(elapsed)} · ${total || '—'} tok · ${subagent.toolCalls.length} tools` })] })] }), liveLine && _jsx(Text, { dimColor: true, wrap: "truncate", children: `  │ ${liveLine}` })] });
+    // Mouse affordance: clickable cards tint on hover; the keyboard-focused
+    // card keeps its brand-color header (no double highlight).
+    const [hovered, setHovered] = useState(false);
+    const hoverTint = onClick !== undefined && hovered && !focused;
+    return _jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginBottom: 1, onClick: onClick, onMouseEnter: onClick !== undefined ? () => setHovered(true) : undefined, onMouseLeave: onClick !== undefined ? () => setHovered(false) : undefined, backgroundColor: hoverTint ? 'userMessageBackgroundHover' : undefined, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: glyphColor, children: glyph }), _jsx(Text, { bold: true, color: focused ? 'claude' : undefined, children: `${t('subagent-card-prefix')}${subagent.description}` }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: ' · ' }), _jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsx(Text, { dimColor: true, children: ` · ${formatDuration(elapsed)} · ${total || '—'} tok · ${subagent.toolCalls.length} tools` })] })] }), liveLine && _jsx(Text, { dimColor: true, wrap: "truncate", children: `  │ ${liveLine}` })] });
 }

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

@@ -5,6 +5,10 @@ export interface SubagentDashboardProps {
     onClose: () => void;
     onSelect?: (agentId: string) => void;
 }
+/** 可点击 ✕ 退出按钮：整屏/浮层场景的鼠标退出通道（Esc 等价）。 */
+export declare function ExitButton({ onClick }: {
+    onClick: () => void;
+}): React.ReactNode;
 /**
  * SubagentDashboard — overlay panel showing all active/recent subagents.
  * Keyboard: up/down to navigate, Enter to view detail, Esc to close.

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

@@ -1 +1 @@
-{"version":3,"file":"SubagentDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAMhE,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,aAAa,EAAE,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAoG1C"}
+{"version":3,"file":"SubagentDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAMhE,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,aAAa,EAAE,CAAA;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAED,yCAAyC;AACzC,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAWhF;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CA2G1C"}

package/lib/types/components/SubagentDashboard.js

@@ -5,6 +5,11 @@ import { SubagentCard } from './SubagentCard.js';
 import { t } from '../i18n.js';
 import { Divider } from './design-system/Divider.js';
 import { isPlainReturnInput } from '../utils/modifiers.js';
+/** 可点击 ✕ 退出按钮：整屏/浮层场景的鼠标退出通道（Esc 等价）。 */
+export function ExitButton({ onClick }) {
+    const [hovered, setHovered] = React.useState(false);
+    return (_jsx(Box, { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: _jsx(Text, { color: hovered ? 'text' : 'subtle', children: ' ✕' }) }));
+}
 /**
  * SubagentDashboard — overlay panel showing all active/recent subagents.
  * Keyboard: up/down to navigate, Enter to view detail, Esc to close.
@@ -44,7 +49,10 @@ export function SubagentDashboard({ subagents, onClose, onSelect }) {
     const running = subagents.filter(s => s.status === 'running').length;
     const completed = subagents.filter(s => s.status === 'completed').length;
     const failed = subagents.filter(s => s.status === 'failed').length;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Divider, { color: "claude", title: t('subagent-dashboard-title'), padding: 4 }), _jsxs(Box, { flexDirection: "row", gap: 3, marginTop: 1, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "claude", children: running }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-running')] })] }), _jsxs(Text, { children: [_jsx(Text, { color: "success", children: completed }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-completed')] })] }), failed > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: "error", children: failed }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-failed')] })] }))] }), _jsx(Box, { flexDirection: "column", maxHeight: Math.max(10, rows - 10), marginTop: 1, children: _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: subagents.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: Math.max(2, Math.floor((rows - 16) / 3)), children: [_jsx(Text, { dimColor: true, children: '○' }), _jsx(Text, { dimColor: true, children: t('subagent-none') }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('subagent-empty-hint') }) })] })) : (subagents.map((subagent, index) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(SubagentCard, { subagent: subagent, focused: index === focusIndex }), index < subagents.length - 1 && (_jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(20, Math.min(72, columns - 6))) }))] }, subagent.agentId)))) }) }), _jsx(Divider, { color: "subtle", title: "", padding: 4 }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: onSelect
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Divider, { color: "claude", title: t('subagent-dashboard-title'), padding: 4 }), _jsxs(Box, { flexDirection: "row", gap: 3, marginTop: 1, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "claude", children: running }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-running')] })] }), _jsxs(Text, { children: [_jsx(Text, { color: "success", children: completed }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-completed')] })] }), failed > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: "error", children: failed }), _jsxs(Text, { dimColor: true, children: [" ", t('subagent-count-failed')] })] })), _jsx(Box, { flexGrow: 1 }), _jsx(ExitButton, { onClick: onClose })] }), _jsx(Box, { flexDirection: "column", maxHeight: Math.max(10, rows - 10), marginTop: 1, children: _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: subagents.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: Math.max(2, Math.floor((rows - 16) / 3)), children: [_jsx(Text, { dimColor: true, children: '○' }), _jsx(Text, { dimColor: true, children: t('subagent-none') }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('subagent-empty-hint') }) })] })) : (subagents.map((subagent, index) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(SubagentCard, { subagent: subagent, focused: index === focusIndex, onClick: onSelect !== undefined
+                                    // Click = view detail, same as Enter on the focused card.
+                                    ? () => onSelect(subagent.agentId)
+                                    : undefined }), index < subagents.length - 1 && (_jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(20, Math.min(72, columns - 6))) }))] }, subagent.agentId)))) }) }), _jsx(Divider, { color: "subtle", title: "", padding: 4 }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: onSelect
                         ? t('subagent-dashboard-hint-detail')
                         : t('subagent-dashboard-hint-basic') }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SubagentDetailScene.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentDetailScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAsGhE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,aAAa,CAAA;IACvB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CA+L5C"}
+{"version":3,"file":"SubagentDetailScene.d.ts","sourceRoot":"","sources":["../../../src/components/SubagentDetailScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAuGhE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,aAAa,CAAA;IACvB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,EAAE,wBAAwB,GAAG,KAAK,CAAC,SAAS,CA8M5C"}

package/lib/types/components/SubagentDetailScene.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text, useInput, ScrollBox, useTerminalSize } from '../ui.js';
 import { t } from '../i18n.js';
 import { Divider } from './design-system/Divider.js';
+import { ExitButton } from './SubagentDashboard.js';
 import { isPlainReturnInput } from '../utils/modifiers.js';
 import { toolNameColor } from './messages/AssistantToolUseMessage.js';
 import { getCliHighlightPromise } from '../cc/cliHighlight.js';
@@ -134,8 +135,8 @@ export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
     });
     const tab = (name, label) => {
         const active = page === name;
-        return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: active ? 'claude' : undefined, bold: active, inverse: active, children: ` ${label} ` }), _jsx(Text, { dimColor: true, children: name === PAGES[PAGES.length - 1] ? '' : '│' })] }, name));
+        return (_jsxs(React.Fragment, { children: [_jsx(Box, { onClick: () => setPage(name), backgroundColor: !active ? 'userMessageBackgroundHover' : undefined, children: _jsx(Text, { color: active ? 'claude' : undefined, bold: active, inverse: active, children: ` ${label} ` }) }), _jsx(Text, { dimColor: true, children: name === PAGES[PAGES.length - 1] ? '' : '│' })] }, name));
     };
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: info.color, bold: true, children: info.glyph }), _jsx(Text, { bold: true, children: `${t('subagent-card-prefix')}${subagent.description}` }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: info.color, children: info.label })] }), _jsxs(Text, { children: [_jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsx(Text, { dimColor: true, children: ` · ${formatDuration(elapsed)} · ${totalTokens || '—'} tok · ${subagent.toolCalls.length} tools` })] }), _jsxs(Text, { dimColor: true, children: [`${t('subagent-started')} ${formatTimestamp(subagent.startedAt)}`
-                        + (subagent.completedAt ? ` · ${t('subagent-completed')} ${formatTimestamp(subagent.completedAt)}` : ''), ` · id ${subagent.agentId}`] }), subagent.error && (_jsx(Box, { marginTop: 0, children: _jsx(Text, { color: "error", wrap: "wrap", children: `${t('subagent-error-label')}: ${subagent.error}` }) })), _jsxs(Box, { flexDirection: "row", gap: 0, marginTop: 1, children: [tab('summary', t('subagent-tab-summary')), tab('output', t('subagent-output-label')), tab('tools', t('subagent-tools')), _jsx(Text, { dimColor: true, children: `  ${pageIndex + 1}/${PAGES.length}` })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(20, Math.min(72, columns - 6))) }), _jsx(Box, { flexDirection: "column", paddingX: 1, maxHeight: Math.max(10, rows - 14), children: _jsxs(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: [page === 'summary' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(StatGrid, { subagent: subagent, totalTokens: totalTokens, elapsed: elapsed, statusLabel: info.label, statusColor: info.color }), subagent.summary && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: '─ summary ' }), _jsx(Text, { wrap: "wrap", children: subagent.summary })] })), !subagent.summary && (_jsx(Text, { dimColor: true, children: isRunning ? t('subagent-no-output') : t('subagent-no-summary') }))] })), page === 'output' && (subagent.outputEvents.length === 0 && subagent.output.length === 0 ? (_jsx(Text, { dimColor: true, children: t('subagent-no-output') })) : (subagent.outputEvents.map((line, index) => (_jsxs(Text, { wrap: "wrap", dimColor: line.kind === 'thinking' || line.kind === 'system', color: line.kind === 'error' ? 'error' : undefined, children: [line.kind === 'thinking' ? '  ⌁ ' : '  ', line.text, !line.settled && isRunning ? ' ▍' : ''] }, index))))), page === 'tools' && (subagent.toolCalls.length === 0 ? (_jsx(Text, { dimColor: true, children: t('subagent-no-tools') })) : (subagent.toolCalls.map((tool, index) => (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: tool.status === 'failed' ? 'error' : tool.status === 'running' ? 'warning' : 'success', children: tool.status === 'running' ? '·' : tool.status === 'failed' ? '×' : '✓' }), _jsx(Text, { color: toolNameColor(tool.name), children: tool.name }), tool.endedAt && _jsx(Text, { dimColor: true, children: formatDuration(tool.endedAt - tool.startedAt) })] }), tool.argsPreview && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(JsonArgsText, { raw: tool.argsPreview }) })), tool.resultPreview && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: `⎿ ${tool.resultPreview}` }) })), tool.error && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(Text, { color: "error", wrap: "wrap", children: tool.error }) }))] }, tool.id ?? index)))))] }) }), _jsx(Divider, { color: "subtle", title: "", padding: 4 }), _jsx(Box, { marginTop: 0, children: _jsxs(Text, { dimColor: true, children: [`←/→ ${t('subagent-hint-page')} · ↑/↓ ${t('subagent-hint-scroll')}`, isRunning && onInterrupt ? ' · X interrupt' : '', ` · Esc ${t('subagent-hint-back')}`] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: info.color, bold: true, children: info.glyph }), _jsx(Text, { bold: true, children: `${t('subagent-card-prefix')}${subagent.description}` }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: info.color, children: info.label }), _jsx(Box, { flexGrow: 1 }), _jsx(ExitButton, { onClick: onBack })] }), _jsxs(Text, { children: [_jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsx(Text, { dimColor: true, children: ` · ${formatDuration(elapsed)} · ${totalTokens || '—'} tok · ${subagent.toolCalls.length} tools` })] }), _jsxs(Text, { dimColor: true, children: [`${t('subagent-started')} ${formatTimestamp(subagent.startedAt)}`
+                        + (subagent.completedAt ? ` · ${t('subagent-completed')} ${formatTimestamp(subagent.completedAt)}` : ''), ` · id ${subagent.agentId}`] }), subagent.error && (_jsx(Box, { marginTop: 0, children: _jsx(Text, { color: "error", wrap: "wrap", children: `${t('subagent-error-label')}: ${subagent.error}` }) })), _jsxs(Box, { flexDirection: "row", gap: 0, marginTop: 1, children: [tab('summary', t('subagent-tab-summary')), tab('output', t('subagent-output-label')), tab('tools', t('subagent-tools')), _jsx(Text, { dimColor: true, children: `  ${pageIndex + 1}/${PAGES.length}` })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(Math.max(20, Math.min(72, columns - 6))) }), _jsx(Box, { flexDirection: "column", paddingX: 1, maxHeight: Math.max(10, rows - 14), children: _jsxs(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: [page === 'summary' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(StatGrid, { subagent: subagent, totalTokens: totalTokens, elapsed: elapsed, statusLabel: info.label, statusColor: info.color }), subagent.summary && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: '─ summary ' }), _jsx(Text, { wrap: "wrap", children: subagent.summary })] })), !subagent.summary && (_jsx(Text, { dimColor: true, children: isRunning ? t('subagent-no-output') : t('subagent-no-summary') }))] })), page === 'output' && (subagent.outputEvents.length === 0 && subagent.output.length === 0 ? (_jsx(Text, { dimColor: true, children: t('subagent-no-output') })) : (subagent.outputEvents.map((line, index) => (_jsxs(Text, { wrap: "wrap", dimColor: line.kind === 'thinking' || line.kind === 'system', color: line.kind === 'error' ? 'error' : undefined, children: [line.kind === 'thinking' ? '  ⌁ ' : '  ', line.text, !line.settled && isRunning ? ' ▍' : ''] }, index))))), page === 'tools' && (subagent.toolCalls.length === 0 ? (_jsx(Text, { dimColor: true, children: t('subagent-no-tools') })) : (subagent.toolCalls.map((tool, index) => (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: tool.status === 'failed' ? 'error' : tool.status === 'running' ? 'warning' : 'success', children: tool.status === 'running' ? '·' : tool.status === 'failed' ? '×' : '✓' }), _jsx(Text, { color: toolNameColor(tool.name), children: tool.name }), tool.endedAt && _jsx(Text, { dimColor: true, children: formatDuration(tool.endedAt - tool.startedAt) })] }), tool.argsPreview && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(JsonArgsText, { raw: tool.argsPreview }) })), tool.resultPreview && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: `⎿ ${tool.resultPreview}` }) })), tool.error && (_jsx(Box, { flexDirection: "row", paddingLeft: 2, children: _jsx(Text, { color: "error", wrap: "wrap", children: tool.error }) }))] }, tool.id ?? index)))))] }) }), _jsx(Divider, { color: "subtle", title: "", padding: 4 }), _jsxs(Box, { marginTop: 0, flexDirection: "row", children: [_jsx(Text, { dimColor: true, children: `←/→ ${t('subagent-hint-page')} · ↑/↓ ${t('subagent-hint-scroll')}` }), isRunning && onInterrupt && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: ' · ' }), _jsx(Box, { onClick: () => onInterrupt(subagent.agentId), children: _jsx(Text, { dimColor: true, bold: true, color: "warning", children: "X interrupt" }) })] })), _jsx(Text, { dimColor: true, children: ` · Esc ${t('subagent-hint-back')}` })] })] }));
 }

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

@@ -0,0 +1,63 @@
+import React from 'react';
+/**
+ * `/` 命令菜单与 `@` 文件菜单共用的圆角卡片外壳（与输入框 EffortInputBorder
+ * 同款 ╭╮╰╯ 视觉语言）：
+ *
+ *   ╭─ 标题 ─────────────────────╮
+ *   │ ❯ 行内容 …                 │
+ *   │   行内容 …                 │
+ *   │ ↑2 · ↓3                    │  ← 仅当列表被裁剪
+ *   ╰────────────────────────────╯
+ *
+ * 底边 ╰╯ 直接坐在输入框顶边 ╭╮ 的上一行（PromptInput 的浮层包装去掉了
+ * 底部留白），卡片与输入框连成一体，读作"挂在输入框上的下拉"。边框色
+ * 跟随输入框 idle 色（plan 模式下整套面板一起变 sage 绿）。
+ *
+ * 每一行的左右 │ 由本组件包在行外——侧边框若是内容列旁的单行 Text，只
+ * 会画在自己那一行（行高的首行），多行列表的中段行会裸奔无边框。
+ * 卡片左右各占 2 列（│ + 1 空格），行内容的可用宽度由
+ * {@link cardContentWidth} 统一计算，CJK 截断契约（verify-cjk-truncate）
+ * 按该宽度钉住。
+ */
+export declare function SuggestionCard({ title, columns, accent, footer, rows, onRowPick, onWheelStep, }: {
+    /** 嵌在顶边框里的标题（已本地化、含计数）。 */
+    title: string;
+    columns: number;
+    /** 边框色（主题 token）；缺省 promptBorder。 */
+    accent?: 'promptBorder' | 'planMode';
+    /** 底部 dim 提示行（滚动指示）；null/undefined 时不渲染。 */
+    footer?: string | null;
+    /** 已渲染的行内容（每行一个节点），本组件为各行补上左右边框。 */
+    rows: readonly React.ReactNode[];
+    /**
+     * 鼠标点击行（fullscreen）：上报行索引——命令/文件补全用它接受该项
+     * （与 Tab/Enter 同路径）。未提供时行为不变。
+     */
+    onRowPick?: (index: number) => void;
+    /**
+     * 滚轮在菜单上滚动（fullscreen）：每次滚动上报 ±1 步——补全菜单用它
+     * 移动选中行（窗口随之滚动）。位置路由保证只有菜单下的滚轮到达这里。
+     */
+    onWheelStep?: (step: 1 | -1) => void;
+}): React.ReactNode;
+/**
+ * 卡片内一行内容的可用显示宽度：总宽减去两侧 │ + 各 1 空格的内边距。
+ * CommandSuggestions / FileSuggestions 的截断数学共用这一口径。
+ */
+export declare function cardContentWidth(columns: number): number;
+/**
+ * 把补全名按「命中的查询前缀」拆成三段（用于前缀高亮）。三级尝试，
+ * 均大小写不敏感，与 completeCommands / 文件候选的过滤语义对齐：
+ *   1. 整名前缀（文件查询是路径前缀，`src/re` 命中 `src/render`）；
+ *   2. 最后一个空格 token 的前缀（嵌套命令 `model deepseek/…` 的
+ *      `deepseek/` 查询——补全名带 `model ` 路径前缀）；
+ *   3. 最后一个 `/` 段的前缀（`/model deepseek-v` 命中段
+ *      `deepseek-v4-flash` 的开头）。
+ * 查询为空、或都不命中（别名命中、过期候选）返回 null——渲染方整体 dim。
+ */
+export declare function splitQueryMatch(name: string, query: string): {
+    before: string;
+    match: string;
+    after: string;
+} | null;
+//# sourceMappingURL=SuggestionCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionCard.d.ts","sourceRoot":"","sources":["../../../src/components/SuggestionCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,WAAW,GACZ,EAAE;IACD,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAA;IACpC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,oCAAoC;IACpC,IAAI,EAAE,SAAS,KAAK,CAAC,SAAS,EAAE,CAAA;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAA;CACrC,GAAG,KAAK,CAAC,SAAS,CAwDlB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAmBzD"}

package/lib/types/components/SuggestionCard.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from '../ui.js';
+import { stringWidth } from '../ink/stringWidth.js';
+/**
+ * `/` 命令菜单与 `@` 文件菜单共用的圆角卡片外壳（与输入框 EffortInputBorder
+ * 同款 ╭╮╰╯ 视觉语言）：
+ *
+ *   ╭─ 标题 ─────────────────────╮
+ *   │ ❯ 行内容 …                 │
+ *   │   行内容 …                 │
+ *   │ ↑2 · ↓3                    │  ← 仅当列表被裁剪
+ *   ╰────────────────────────────╯
+ *
+ * 底边 ╰╯ 直接坐在输入框顶边 ╭╮ 的上一行（PromptInput 的浮层包装去掉了
+ * 底部留白），卡片与输入框连成一体，读作"挂在输入框上的下拉"。边框色
+ * 跟随输入框 idle 色（plan 模式下整套面板一起变 sage 绿）。
+ *
+ * 每一行的左右 │ 由本组件包在行外——侧边框若是内容列旁的单行 Text，只
+ * 会画在自己那一行（行高的首行），多行列表的中段行会裸奔无边框。
+ * 卡片左右各占 2 列（│ + 1 空格），行内容的可用宽度由
+ * {@link cardContentWidth} 统一计算，CJK 截断契约（verify-cjk-truncate）
+ * 按该宽度钉住。
+ */
+export function SuggestionCard({ title, columns, accent, footer, rows, onRowPick, onWheelStep, }) {
+    const inner = Math.max(0, columns - 2);
+    const lead = `─ ${title} `;
+    // 标题放不下（极窄终端）时退化为素边框，不做半截标题。
+    const titleFits = stringWidth(lead) + 1 <= inner;
+    const top = titleFits
+        ? `╭${lead}${'─'.repeat(inner - stringWidth(lead))}╮`
+        : `╭${'─'.repeat(inner)}╮`;
+    const borderColor = accent ?? 'promptBorder';
+    const [hoveredRow, setHoveredRow] = React.useState(-1);
+    const handleWheel = React.useCallback((e) => {
+        if (e.deltaY !== 0)
+            onWheelStep?.(e.deltaY > 0 ? 1 : -1);
+    }, [onWheelStep]);
+    return (_jsxs("ink-box", { style: { flexDirection: 'column', width: '100%', flexShrink: 0 }, onWheel: onWheelStep !== undefined ? handleWheel : undefined, children: [_jsx(Text, { color: borderColor, wrap: "truncate-end", children: top }), rows.map((row, index) => (_jsxs(Box, { flexDirection: "row", width: "100%", onClick: onRowPick ? () => onRowPick(index) : undefined, onMouseEnter: onRowPick ? () => setHoveredRow(index) : undefined, onMouseLeave: onRowPick ? () => setHoveredRow(current => (current === index ? -1 : current)) : undefined, children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minWidth: 0, backgroundColor: onRowPick !== undefined && hoveredRow === index ? 'userMessageBackgroundHover' : undefined, children: row }), _jsx(Text, { color: borderColor, children: "\u2502" })] }, index))), footer ? (_jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsx(Text, { color: borderColor, children: "\u2502" }), _jsx(Box, { flexGrow: 1, minWidth: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [" ", footer] }) }), _jsx(Text, { color: borderColor, children: "\u2502" })] })) : null, _jsx(Text, { color: borderColor, wrap: "truncate-end", children: `╰${'─'.repeat(inner)}╯` })] }));
+}
+/**
+ * 卡片内一行内容的可用显示宽度：总宽减去两侧 │ + 各 1 空格的内边距。
+ * CommandSuggestions / FileSuggestions 的截断数学共用这一口径。
+ */
+export function cardContentWidth(columns) {
+    return Math.max(0, columns - 4);
+}
+/**
+ * 把补全名按「命中的查询前缀」拆成三段（用于前缀高亮）。三级尝试，
+ * 均大小写不敏感，与 completeCommands / 文件候选的过滤语义对齐：
+ *   1. 整名前缀（文件查询是路径前缀，`src/re` 命中 `src/render`）；
+ *   2. 最后一个空格 token 的前缀（嵌套命令 `model deepseek/…` 的
+ *      `deepseek/` 查询——补全名带 `model ` 路径前缀）；
+ *   3. 最后一个 `/` 段的前缀（`/model deepseek-v` 命中段
+ *      `deepseek-v4-flash` 的开头）。
+ * 查询为空、或都不命中（别名命中、过期候选）返回 null——渲染方整体 dim。
+ */
+export function splitQueryMatch(name, query) {
+    if (query === '')
+        return null;
+    const lower = query.toLowerCase();
+    const startsWith = (start) => {
+        const segment = name.slice(start);
+        if (!segment.toLowerCase().startsWith(lower))
+            return null;
+        const matched = segment.slice(0, Math.min(query.length, segment.length));
+        return {
+            before: name.slice(0, start),
+            match: matched,
+            after: segment.slice(matched.length),
+        };
+    };
+    const lastSpace = name.lastIndexOf(' ');
+    return (startsWith(0)
+        ?? (lastSpace >= 0 ? startsWith(lastSpace + 1) : null)
+        ?? startsWith(name.lastIndexOf('/') + 1));
+}

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

@@ -19,8 +19,11 @@ export declare function getThemeOptions(): SelectOption[];
  * active theme. Enter applies through the ThemeProvider setter (persists to
  * ~/.dsh-tui/theme.json and hot swaps), Esc cancels.
  */
-export declare function ThemePicker({ focusIndex, currentTheme, }: {
+export declare function ThemePicker({ focusIndex, currentTheme, onPick, }: {
     focusIndex: number;
     currentTheme: string | undefined;
+    /** Mouse pick (fullscreen): clicked row's absolute index (Chat applies
+     *  the same code path as the keyboard Enter). */
+    onPick?: (index: number) => void;
 }): React.ReactNode;
 //# sourceMappingURL=ThemePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../src/components/ThemePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAuCvD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,YAAY,EAAE,CAsBhD;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,GACb,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAsBlB"}
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../src/components/ThemePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,aAAa,CAAA;AAuCvD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,YAAY,EAAE,CAsBhD;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,MAAM,GACP,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC;qDACiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAuBlB"}

package/lib/types/components/ThemePicker.js

@@ -51,7 +51,7 @@ export function getThemeOptions() {
  * active theme. Enter applies through the ThemeProvider setter (persists to
  * ~/.dsh-tui/theme.json and hot swaps), Esc cancels.
  */
-export function ThemePicker({ focusIndex, currentTheme, }) {
+export function ThemePicker({ focusIndex, currentTheme, onPick, }) {
     const options = React.useMemo(() => getThemeOptions(), []);
-    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('picker-title-theme') }) }), _jsx(Select, { options: options, focusIndex: focusIndex, selectedValue: currentTheme, visibleOptionCount: 6 }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-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('picker-title-theme') }) }), _jsx(Select, { options: options, focusIndex: focusIndex, selectedValue: currentTheme, visibleOptionCount: 6, onPick: onPick ? index => onPick(index) : undefined }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }) }));
 }

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

@@ -3,8 +3,11 @@ import React from 'react';
  * The `/thinking` display dialog: a permission-colored Pane with a bold
  * title, the Shown/Hidden select, and the Enter/Esc hint line.
  */
-export declare function ThinkingToggle({ currentValue, focusIndex, }: {
+export declare function ThinkingToggle({ currentValue, focusIndex, onPick, }: {
     currentValue: boolean;
     focusIndex: number;
+    /** Mouse pick (fullscreen): reports the clicked row's index — Chat
+     *  applies it with the same code path as the keyboard Enter. */
+    onPick?: (index: number) => void;
 }): React.ReactNode;
 //# sourceMappingURL=ThinkingToggle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThinkingToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ThinkingToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,UAAU,GACX,EAAE;IACD,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAsClB"}
+{"version":3,"file":"ThinkingToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ThinkingToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,UAAU,EACV,MAAM,GACP,EAAE;IACD,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB;oEACgE;IAChE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAuClB"}

package/lib/types/components/ThinkingToggle.js

@@ -8,7 +8,7 @@ import { HintLine } from './design-system/HintLine.js';
  * The `/thinking` display dialog: a permission-colored Pane with a bold
  * title, the Shown/Hidden select, and the Enter/Esc hint line.
  */
-export function ThinkingToggle({ currentValue, focusIndex, }) {
+export function ThinkingToggle({ currentValue, focusIndex, onPick, }) {
     const options = [
         {
             value: 'true',
@@ -21,5 +21,5 @@ export function ThinkingToggle({ currentValue, focusIndex, }) {
             description: t('thinking-disabled-desc'),
         },
     ];
-    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: "remember", bold: true, children: t('thinking-title') }), _jsx(Text, { dimColor: true, children: t('thinking-subtitle') })] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(Select, { options: options, focusIndex: focusIndex, selectedValue: currentValue ? 'true' : 'false', visibleOptionCount: 2 }) })] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }));
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: "remember", bold: true, children: t('thinking-title') }), _jsx(Text, { dimColor: true, children: t('thinking-subtitle') })] }), _jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(Select, { options: options, focusIndex: focusIndex, selectedValue: currentValue ? 'true' : 'false', visibleOptionCount: 2, onPick: onPick === undefined ? undefined : (index) => onPick(index) }) })] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }));
 }

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type ScrollBoxHandle } from '../ui.js';
+import { type TimelineTurn } from '../ink/timeline-rail.js';
+/**
+ * Timeline rail: the fullscreen transcript's turn navigator — a 2-column
+ * gutter REPLACING the classic scrollbar (Grok Build's timeline sidebar,
+ * ported to the dsh Ink tree).
+ *
+ *  - one tick per user turn; tick position encodes conversation order,
+ *    not scroll proportion (a long answer must not skew the timeline);
+ *  - the tick of the turn owning the viewport top row (the turn being
+ *    read — same anchor the sticky prompt header pins) renders as `━━`;
+ *    hovering a tick widens it to `──` and pops a preview card left of
+ *    the rail; idle ticks are a short dim ` ─`;
+ *  - ▲ / ▾ step between turns by STRICT geometry (nearest prompt above /
+ *    below the viewport top — never `active ± 1`, which can name a turn
+ *    no scroll reaches), so a dim chevron is always a guaranteed no-op;
+ *  - clicking a tick (or chevron) jumps by content coordinate — the
+ *    prompt's measured top — no element seek, no force-mount race;
+ *  - more turns than rows: the window slides around the active tick, and
+ *    pins to the tail while at the bottom (never excluding active);
+ *  - hidden below 60 terminal columns, under 2 turns, under 3 viewport
+ *    rows, or when the content fits (inline mode keeps the terminal's
+ *    native scrollback).
+ *
+ * The whole 2-column width is the hit target; the rail is fenced with
+ * NoSelect so click-drag text selection never picks up its glyphs, and
+ * the wheel scrolls the transcript (the rail has no scroll of its own).
+ */
+export declare function TimelineRail({ handle, turns, activeId, upId, downId, terminalWidth, hoverEnabled, onRevealTurn, }: {
+    handle: ScrollBoxHandle | null;
+    /** Turns in conversation order (MessageList's measured snapshot). */
+    turns: ReadonlyArray<TimelineTurn>;
+    /** Turn owning the viewport top row (rail highlight target). */
+    activeId: number | null;
+    /** ▲ target: nearest turn strictly above the viewport top. */
+    upId: number | null;
+    /** ▼ target: nearest turn below the viewport top that a scroll can
+     *  still bring to the top row. */
+    downId: number | null;
+    terminalWidth: number;
+    /** False while a modal overlay owns the screen — suppress the hover
+     *  card (the rail itself stays, but stops narrating). */
+    hoverEnabled: boolean;
+    /**
+     * Reveal-and-seek for FOLDED turns (older than the recent-rows window):
+     * Chat expands the fold (showAll) and seeks through the force-mount
+     * path — the row's top is unknown until it mounts, so the coordinate
+     * jump below does not apply to it.
+     */
+    onRevealTurn: (rowId: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=TimelineRail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRail.d.ts","sourceRoot":"","sources":["../../../src/components/TimelineRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AAEpE,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,yBAAyB,CAAA;AAwBhC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,aAAa,EACb,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,eAAe,GAAG,IAAI,CAAA;IAC9B,qEAAqE;IACrE,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IAClC,gEAAgE;IAChE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,8DAA8D;IAC9D,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB;sCACkC;IAClC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB;6DACyD;IACzD,YAAY,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC,GAAG,KAAK,CAAC,SAAS,CA0MlB"}