@askdkc/dsh-cli 0.11.3

package/lib/types/components/SubagentCard.js

@@ -0,0 +1,39 @@
+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';
+function formatDuration(ms) {
+    const seconds = Math.floor(ms / 1000);
+    return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m${seconds % 60}s`;
+}
+export function SubagentCard({ subagent, focused, onClick }) {
+    const running = subagent.status === 'running' || subagent.status === 'starting';
+    // Only a live run ticks; discovered history (`unknown`) has no end time to
+    // count from, so it must not accumulate a fake growing duration.
+    const elapsed = running
+        ? Date.now() - subagent.startedAt
+        : subagent.completedAt !== undefined ? subagent.completedAt - subagent.startedAt : undefined;
+    const total = subagent.tokens?.total ?? ((subagent.tokens?.input ?? 0) + (subagent.tokens?.output ?? 0) || 0);
+    // Mouse affordance: clickable cards tint on hover; the keyboard-focused
+    // card keeps its brand-color header (no double highlight).
+    const [hovered, setHovered] = useState(false);
+    // Live preview: the newest streamed line rides under the header while the
+    // subagent runs, then folds away — the dashboard stays one line per settled
+    // subagent. Deliberately NOT revived on hover: an extra line would grow
+    // the card mid-gesture and reshuffle the whole dashboard list (user
+    // feedback: hover must never change layout). The hover tint stays.
+    const liveLine = running ? subagent.output[subagent.output.length - 1] : undefined;
+    const minimal = isMinimalMode();
+    const glyph = running ? (minimal ? '·' : '🟡')
+        : subagent.status === 'unknown' ? (minimal ? '·' : '⚪')
+            : subagent.status === 'failed' || subagent.status === 'cancelled' ? (minimal ? '×' : '🔴')
+                : (minimal ? '✓' : '🟢');
+    const glyphColor = minimal ? undefined
+        : running ? 'warning'
+            : subagent.status === 'unknown' ? 'subtle'
+                : subagent.status === 'failed' || subagent.status === 'cancelled' ? 'error'
+                    : 'success';
+    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 ? 'accent' : undefined, children: `${t('subagent-card-prefix')}${subagent.description}` }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: ' · ' }), _jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsxs(Text, { dimColor: true, children: [elapsed !== undefined ? ` · ${formatDuration(elapsed)} · ` : ' · ', total || '—', " tok \u00B7 ", subagent.toolCalls.length, " tools"] })] })] }), liveLine && _jsx(Text, { dimColor: true, wrap: "truncate", children: `  │ ${liveLine}` })] });
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SubagentState } from '../dsh-adapter/subagents.js';
+export interface SubagentDashboardProps {
+    subagents: SubagentState[];
+    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.
+ */
+export declare function SubagentDashboard({ subagents, onClose, onSelect }: SubagentDashboardProps): React.ReactNode;
+//# sourceMappingURL=SubagentDashboard.d.ts.map

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

@@ -0,0 +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,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,CA0G1C"}

package/lib/types/components/SubagentDashboard.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput, ScrollBox, useTerminalSize } from '../ui.js';
+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.
+ */
+export function SubagentDashboard({ subagents, onClose, onSelect }) {
+    const [focusIndex, setFocusIndex] = React.useState(0);
+    const scrollRef = React.useRef(null);
+    const { rows, columns } = useTerminalSize();
+    useInput((input, key, event) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            event.stopImmediatePropagation();
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            event.stopImmediatePropagation();
+            setFocusIndex(i => Math.max(0, i - 1));
+            scrollRef.current?.scrollBy(-3);
+            return;
+        }
+        if (key.downArrow) {
+            event.stopImmediatePropagation();
+            setFocusIndex(i => Math.min(subagents.length - 1, i + 1));
+            scrollRef.current?.scrollBy(3);
+            return;
+        }
+        if (isPlainReturnInput(input, key) && onSelect) {
+            event.stopImmediatePropagation();
+            const selected = subagents[focusIndex];
+            if (selected)
+                onSelect(selected.agentId);
+            return;
+        }
+        // Consume all input while dashboard is open
+        event.stopImmediatePropagation();
+    });
+    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: "accent", title: t('subagent-dashboard-title') }), _jsxs(Box, { flexDirection: "row", gap: 3, marginTop: 1, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "accent", 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: "" }), _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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SubagentState } from '../dsh-adapter/subagents.js';
+export interface SubagentDetailSceneProps {
+    subagent: SubagentState;
+    onBack: () => void;
+    onInterrupt?: (agentId: string) => void;
+}
+/**
+ * SubagentDetailScene — full-screen paged detail view for one subagent.
+ * Header block (identity + stats) stays fixed; the body pages through
+ * 摘要 / 输出 / 工具 with ←/→. Follow-up delivery was removed: the official
+ * seam only accepts continuable children, and one-shot spawn children are
+ * disposed at settlement, so the affordance would be a dead control.
+ */
+export declare function SubagentDetailScene({ subagent, onBack, onInterrupt, }: SubagentDetailSceneProps): React.ReactNode;
+//# sourceMappingURL=SubagentDetailScene.d.ts.map

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

@@ -0,0 +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;AAwGhE,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,CAiN5C"}

package/lib/types/components/SubagentDetailScene.js

@@ -0,0 +1,147 @@
+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 '../terminal-utils/cliHighlight.js';
+import { isMinimalMode } from '../minimalMode.js';
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    const min = Math.floor(ms / 60000);
+    const sec = Math.floor((ms % 60000) / 1000);
+    return `${min}m${sec}s`;
+}
+function formatTimestamp(ts) {
+    return new Date(ts).toLocaleTimeString();
+}
+function statusGlyph(status) {
+    const minimal = isMinimalMode();
+    if (status === 'completed')
+        return { glyph: minimal ? '✓' : '🟢', color: minimal ? undefined : 'success', label: 'done' };
+    if (status === 'failed')
+        return { glyph: minimal ? '×' : '🔴', color: minimal ? undefined : 'error', label: 'failed' };
+    if (status === 'cancelled')
+        return { glyph: minimal ? '×' : '🔴', color: minimal ? undefined : 'error', label: 'cancelled' };
+    if (status === 'unknown')
+        return { glyph: minimal ? '·' : '⚪', color: minimal ? undefined : 'subtle', label: 'history' };
+    return { glyph: minimal ? '·' : '🟡', color: minimal ? undefined : 'warning', label: 'running' };
+}
+const PAGES = ['summary', 'output', 'tools'];
+/** One label/value row of the summary stats card. */
+function StatRow({ label, children }) {
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 14, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: label }) }), _jsx(Box, { flexDirection: "row", flexGrow: 1, children: children })] }));
+}
+/** Two-column key/value stats grid (Kimi Code settled summary style). */
+function StatGrid({ subagent, totalTokens, elapsed, statusLabel, statusColor }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(StatRow, { label: t('subagent-status-label'), children: _jsx(Text, { color: statusColor, children: statusLabel }) }), _jsx(StatRow, { label: t('subagent-model'), children: _jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }) }), _jsx(StatRow, { label: t('subagent-duration'), children: _jsx(Text, { children: elapsed !== undefined ? formatDuration(elapsed) : '—' }) }), _jsx(StatRow, { label: "tokens", children: _jsxs(Text, { children: [totalTokens || '—', subagent.tokens?.input !== undefined ? ` (in ${subagent.tokens.input} · out ${subagent.tokens.output ?? 0})` : ''] }) }), _jsx(StatRow, { label: t('subagent-tools'), children: _jsx(Text, { children: subagent.toolCalls.length }) }), _jsx(StatRow, { label: t('subagent-started'), children: _jsx(Text, { children: formatTimestamp(subagent.startedAt) }) }), subagent.completedAt !== undefined && (_jsx(StatRow, { label: t('subagent-completed'), children: _jsx(Text, { children: formatTimestamp(subagent.completedAt) }) }))] }));
+}
+/** Tool args line: JSON-looking args get cli-highlight syntax colors (loaded
+ * lazily through the shared promise); anything else stays a dim flat line. */
+function JsonArgsText({ raw }) {
+    const flat = raw.replace(/\s+/g, ' ').trim();
+    const json = flat.startsWith('{') || flat.startsWith('[');
+    const [highlighted, setHighlighted] = React.useState(null);
+    React.useEffect(() => {
+        if (!json)
+            return;
+        let alive = true;
+        void getCliHighlightPromise().then(cli => {
+            if (!alive || cli === null)
+                return;
+            try {
+                setHighlighted(cli.highlight(flat, { language: 'json' }));
+            }
+            catch {
+                // Not parseable JSON after all — keep the dim fallback.
+            }
+        });
+        return () => { alive = false; };
+    }, [flat, json]);
+    if (json && highlighted !== null)
+        return _jsx(Text, { wrap: "wrap", children: highlighted });
+    return _jsx(Text, { dimColor: true, wrap: "wrap", children: flat });
+}
+/**
+ * SubagentDetailScene — full-screen paged detail view for one subagent.
+ * Header block (identity + stats) stays fixed; the body pages through
+ * 摘要 / 输出 / 工具 with ←/→. Follow-up delivery was removed: the official
+ * seam only accepts continuable children, and one-shot spawn children are
+ * disposed at settlement, so the affordance would be a dead control.
+ */
+export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
+    const scrollRef = React.useRef(null);
+    const { rows, columns } = useTerminalSize();
+    const [page, setPage] = React.useState('summary');
+    const isRunning = subagent.status === 'running' || subagent.status === 'starting';
+    // Only a live run ticks; discovered history (`unknown`) shows no duration.
+    const elapsed = isRunning
+        ? Date.now() - subagent.startedAt
+        : subagent.completedAt !== undefined ? subagent.completedAt - subagent.startedAt : undefined;
+    const info = statusGlyph(subagent.status);
+    const totalTokens = subagent.tokens?.total ?? ((subagent.tokens?.input ?? 0) + (subagent.tokens?.output ?? 0) || 0);
+    const pageIndex = PAGES.indexOf(page);
+    const turnPage = (delta) => {
+        const next = (pageIndex + delta + PAGES.length) % PAGES.length;
+        setPage(PAGES[next]);
+        scrollRef.current?.scrollTo?.(0);
+    };
+    // tail -f: while the subagent runs and the output page is showing, follow
+    // the newest streamed line. Page switches or settlement stop the follow so
+    // manual ↑ scrolling wins.
+    const outputLength = subagent.outputEvents.length;
+    React.useEffect(() => {
+        if (page !== 'output' || !isRunning)
+            return;
+        scrollRef.current?.scrollToBottom();
+    }, [page, isRunning, outputLength]);
+    useInput((input, key, event) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            event.stopImmediatePropagation();
+            onBack();
+            return;
+        }
+        if (key.leftArrow) {
+            event.stopImmediatePropagation();
+            turnPage(-1);
+            return;
+        }
+        if (key.rightArrow) {
+            event.stopImmediatePropagation();
+            turnPage(1);
+            return;
+        }
+        if (key.upArrow) {
+            event.stopImmediatePropagation();
+            scrollRef.current?.scrollBy(-3);
+            return;
+        }
+        if (key.downArrow) {
+            event.stopImmediatePropagation();
+            scrollRef.current?.scrollBy(3);
+            return;
+        }
+        if (input.toLowerCase() === 'x' && isRunning && onInterrupt) {
+            event.stopImmediatePropagation();
+            onInterrupt(subagent.agentId);
+            return;
+        }
+        if (isPlainReturnInput(input, key)) {
+            event.stopImmediatePropagation();
+            onBack();
+            return;
+        }
+        event.stopImmediatePropagation();
+    });
+    const tab = (name, label) => {
+        const active = page === name;
+        return (_jsxs(React.Fragment, { children: [_jsx(Box, { onClick: () => setPage(name), backgroundColor: !active ? 'userMessageBackgroundHover' : undefined, children: _jsx(Text, { color: active ? 'accent' : 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 }), _jsx(Box, { flexGrow: 1 }), _jsx(ExitButton, { onClick: onBack })] }), _jsxs(Text, { children: [_jsx(Text, { children: subagent.model ?? subagent.provider ?? 'default' }), _jsxs(Text, { dimColor: true, children: [elapsed !== undefined ? ` · ${formatDuration(elapsed)} · ` : ' · ', totalTokens || '—', " tok \u00B7 ", 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: "" }), _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,65 @@
+import React from 'react';
+import type { Color } from '../ink/styles.js';
+import type { Theme } from '../theme.js';
+/**
+ * `/` 命令菜单与 `@` 文件菜单共用的圆角卡片外壳（与输入框 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?: keyof Theme | Color;
+    /** 底部 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;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAGxC;;;;;;;;;;;;;;;;;;;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,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAA;IAC5B,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/SyntaxText.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Color } from '../ink/styles.js';
+type Props = {
+    readonly text: string;
+    readonly language?: string;
+    /** Complete payload used for lexing; text is the visible line. */
+    readonly sourceText?: string;
+    readonly lineIndex?: number;
+    readonly color?: Color;
+    readonly dimColor?: boolean;
+};
+/** Async nested Text renderer. Lexes the complete payload before splitting. */
+export declare function SyntaxText({ text, language, sourceText, lineIndex, color, dimColor }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=SyntaxText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxText.d.ts","sourceRoot":"","sources":["../../../src/components/SyntaxText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAM7C,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,kEAAkE;IAClE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAiB,EAAE,SAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAgCxH"}

package/lib/types/components/SyntaxText.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from '../ui.js';
+import { getCliHighlightPromise } from '../terminal-utils/cliHighlight.js';
+import { highlightLines, syntaxThemeSignature } from '../terminal-utils/syntaxRuns.js';
+import { getTheme } from '../theme.js';
+import { useTheme } from './design-system/ThemeProvider.js';
+/** Async nested Text renderer. Lexes the complete payload before splitting. */
+export function SyntaxText({ text, language, sourceText = text, lineIndex = 0, color, dimColor }) {
+    const [highlighter, setHighlighter] = React.useState(null);
+    const [themeName] = useTheme();
+    React.useEffect(() => {
+        let mounted = true;
+        void getCliHighlightPromise().then(value => { if (mounted)
+            setHighlighter(value); });
+        return () => { mounted = false; };
+    }, []);
+    const theme = React.useMemo(() => getTheme(themeName), [themeName]);
+    const themeSig = React.useMemo(() => syntaxThemeSignature(theme), [theme]);
+    const syntax = React.useMemo(() => highlightLines(sourceText, language, highlighter, theme, themeSig), [sourceText, language, highlighter, theme, themeSig]);
+    const runs = syntax?.[lineIndex];
+    if (runs === undefined || color !== undefined || dimColor) {
+        return _jsx(Text, { color: color, dimColor: dimColor, children: text === '' ? ' ' : text });
+    }
+    let remaining = text.length;
+    const visibleRuns = runs.flatMap(run => {
+        if (remaining <= 0)
+            return [];
+        const visible = run.text.slice(0, remaining);
+        remaining -= visible.length;
+        return visible === '' ? [] : [{ ...run, text: visible }];
+    });
+    return (_jsx(Text, { children: visibleRuns.length === 0 ? text : visibleRuns.map((run, index) => (_jsx(Text, { color: run.color, children: run.text }, index))) }));
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type SelectOption } from './Select.js';
+import type { TuiThemeHost } from '../dsh-adapter/themes.js';
+/**
+ * Build the full selectable list from the shared catalog: `auto`, built-ins,
+ * static JSON themes, and optional plugin themes. Shared by ThemePicker (render)
+ * and the /theme command (focus index), so both always see the same ordering.
+ */
+export declare function getThemeOptions(themeHost?: TuiThemeHost): SelectOption[];
+/**
+ * Color-theme picker in the ActivityPicker style: a permission-colored Pane
+ * listing the `auto` pseudo-theme and built-in palettes first, followed by
+ * static JSON and plugin themes — each row shows the display name, base and
+ * three key color swatches; `❯` marks focus, `✓` the 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, themeHost, onPick, }: {
+    focusIndex: number;
+    currentTheme: string | undefined;
+    /** Optional runtime theme host; static themes work without it. */
+    themeHost?: TuiThemeHost;
+    /** 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

@@ -0,0 +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;AAIvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqC5D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,SAAS,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAYxE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,SAAS,EACT,MAAM,GACP,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,kEAAkE;IAClE,SAAS,CAAC,EAAE,YAAY,CAAA;IACxB;qDACiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CA2BlB"}

package/lib/types/components/ThemePicker.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { Select } from './Select.js';
+import { HintLine } from './design-system/HintLine.js';
+import { listThemeCatalog } from '../themeCatalog.js';
+import { useRuntimeThemeSnapshot } from '../hooks/useRuntimeThemeSnapshot.js';
+/** One double-block swatch character per preview key, in a row. */
+const SWATCH = '██';
+/** Theme keys previewed in the picker, chosen for visual contrast. */
+const SWATCH_KEYS = ['accent', 'text', 'success'];
+function swatches(theme) {
+    return (_jsx(_Fragment, { children: SWATCH_KEYS.map(key => (_jsx(Text, { color: theme[key], children: SWATCH }, key))) }));
+}
+/** A picker row: display name + color swatches. */
+function optionFor(name, displayName, theme, description) {
+    return {
+        value: name,
+        label: (_jsxs(_Fragment, { children: [displayName, '  ', swatches(theme)] })),
+        description,
+    };
+}
+/**
+ * Build the full selectable list from the shared catalog: `auto`, built-ins,
+ * static JSON themes, and optional plugin themes. Shared by ThemePicker (render)
+ * and the /theme command (focus index), so both always see the same ordering.
+ */
+export function getThemeOptions(themeHost) {
+    return listThemeCatalog(themeHost).map(item => {
+        const base = item.base ?? 'dark';
+        const description = item.source === 'auto'
+            ? t('theme-auto-base')
+            : item.source === 'builtin'
+                ? t('theme-builtin-base', { name: item.name })
+                : item.source === 'runtime'
+                    ? t('theme-plugin-base', { base, name: item.name })
+                    : t('theme-user-base', { base, name: item.name });
+        return optionFor(item.name, item.displayName, item.theme, description);
+    });
+}
+/**
+ * Color-theme picker in the ActivityPicker style: a permission-colored Pane
+ * listing the `auto` pseudo-theme and built-in palettes first, followed by
+ * static JSON and plugin themes — each row shows the display name, base and
+ * three key color swatches; `❯` marks focus, `✓` the active theme. Enter
+ * applies through the ThemeProvider setter (persists to ~/.dsh-tui/theme.json
+ * and hot swaps), Esc cancels.
+ */
+export function ThemePicker({ focusIndex, currentTheme, themeHost, onPick, }) {
+    const runtimeThemeSnapshot = useRuntimeThemeSnapshot(themeHost);
+    const options = React.useMemo(() => getThemeOptions(themeHost), [runtimeThemeSnapshot, themeHost]);
+    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

@@ -0,0 +1,13 @@
+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, 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

@@ -0,0 +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,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"}