@deepseek-harness-tui/dsh-tui 0.8.6 → 0.8.8

package/lib/types/components/SplitDiffView.js

@@ -4,98 +4,15 @@ import { Box, Text } from '../ui.js';
 import * as JsDiff from 'diff';
 import { extname } from 'node:path';
 import { getCliHighlightPromise } from '../cc/cliHighlight.js';
-import { SYNTAX_CLASS_TO_TOKEN, chalkFromToken } from '../cc/syntaxTheme.js';
+import { highlightLines, syntaxThemeSignature } from '../cc/syntaxRuns.js';
 // Backward-compatible re-export: repro scripts import chalkFromToken from
 // this module's old home.
 export { chalkFromToken } from '../cc/syntaxTheme.js';
+export { parseAnsiRuns, highlightLines } from '../cc/syntaxRuns.js';
 import { getTheme } from '../theme.js';
 import { useTheme } from './design-system/ThemeProvider.js';
 /** Replace tabs so width math and alignment hold (pi convention). */
 const expandTabs = (text) => text.replaceAll('\t', '   ');
-// --- syntax highlighting ----------------------------------------------------
-// The hljs-class → theme-token map and chalkFromToken live in
-// ../cc/syntaxTheme.ts (shared with the markdown code-block renderer).
-/** ANSI 16-color SGR codes → rgb() strings (the dark-ansi palette path). */
-const ANSI16 = {
-    30: 'rgb(0,0,0)', 31: 'rgb(128,0,0)', 32: 'rgb(0,128,0)', 33: 'rgb(128,128,0)',
-    34: 'rgb(0,0,128)', 35: 'rgb(128,0,128)', 36: 'rgb(0,128,128)', 37: 'rgb(192,192,192)',
-    90: 'rgb(128,128,128)', 91: 'rgb(255,0,0)', 92: 'rgb(0,255,0)', 93: 'rgb(255,255,0)',
-    94: 'rgb(0,0,255)', 95: 'rgb(255,0,255)', 96: 'rgb(0,255,255)', 97: 'rgb(255,255,255)',
-};
-/** Parse a cli-highlight ANSI string into colored runs, preserving open
- *  spans across embedded newlines (multi-line strings/comments). Handles
- *  truecolor 38;2, 256-color 38;5 (tmux / FORCE_COLOR=2, issue #250 P1-1),
- *  and single-code 16-color SGR. */
-export function parseAnsiRuns(text) {
-    const runs = [];
-    let color;
-    let rest = text;
-    // eslint-disable-next-line no-control-regex -- parsing SGR is the point
-    const sgr = /\x1b\[([0-9;]+)m/;
-    while (rest.length > 0) {
-        const match = sgr.exec(rest);
-        const chunk = match === null ? rest : rest.slice(0, match.index);
-        if (chunk !== '')
-            runs.push(color === undefined ? { text: chunk } : { text: chunk, color });
-        if (match === null)
-            break;
-        const codes = match[1].split(';').map(Number);
-        if (codes.includes(0) || codes.includes(39))
-            color = undefined;
-        else if (codes[0] === 38 && codes[1] === 2 && codes.length >= 5) {
-            color = `rgb(${codes[2]},${codes[3]},${codes[4]})`;
-        }
-        else if (codes[0] === 38 && codes[1] === 5 && codes.length >= 3) {
-            color = `ansi256(${codes[2]})`;
-        }
-        else if (codes.length === 1 && ANSI16[codes[0]] !== undefined) {
-            color = ANSI16[codes[0]];
-        }
-        rest = rest.slice(match.index + match[0].length);
-    }
-    return runs;
-}
-/** Split flat runs into per-line run arrays at embedded newlines. */
-function splitRunsToLines(runs) {
-    const lines = [[]];
-    for (const run of runs) {
-        const parts = run.text.split('\n');
-        for (let i = 0; i < parts.length; i++) {
-            if (i > 0)
-                lines.push([]);
-            if (parts[i] !== '') {
-                lines[lines.length - 1].push(run.color === undefined ? { text: parts[i] } : { text: parts[i], color: run.color });
-            }
-        }
-    }
-    return lines;
-}
-/** Whole-hunk syntax runs per line, cached per (theme signature + language
- *  + text): one entry survives any amount of card re-rendering, and the
- *  palette change invalidates it (issue #250, P1-2 + P2-8). */
-const syntaxCache = new Map();
-const SYNTAX_CACHE_MAX = 40;
-export function highlightLines(text, language, hl, chTheme, themeSig) {
-    if (hl === null || chTheme === undefined || language === undefined)
-        return undefined;
-    if (text === '' || !hl.supportsLanguage(language))
-        return undefined;
-    const key = `${themeSig}${language}${text}`;
-    const cached = syntaxCache.get(key);
-    if (cached !== undefined)
-        return cached;
-    let lines;
-    try {
-        lines = splitRunsToLines(parseAnsiRuns(hl.highlight(text, { language, theme: chTheme })));
-    }
-    catch {
-        return undefined;
-    }
-    if (syntaxCache.size >= SYNTAX_CACHE_MAX)
-        syntaxCache.clear();
-    syntaxCache.set(key, lines);
-    return lines;
-}
 /**
  * Merge syntax runs with word-diff change flags over the same string: both
  * partition it, so an offset sweep yields runs carrying a syntax color AND
@@ -306,24 +223,8 @@ export function SplitDiffView({ diffs, width, maxRows, verbose, toolBackground =
     const [themeName] = useTheme();
     // Resolved-palette signature: covers dark→light, light→dark, AND the
     // `auto` base flip where the name never changes (issue #250, P1-2).
-    const themeSig = React.useMemo(() => {
-        const theme = getTheme(themeName);
-        return Object.values(SYNTAX_CLASS_TO_TOKEN)
-            .map(key => theme[key] ?? '')
-            .join('|');
-    }, [themeName]);
-    const chTheme = React.useMemo(() => {
-        const theme = getTheme(themeName);
-        const out = {};
-        for (const [tokenClass, tokenKey] of Object.entries(SYNTAX_CLASS_TO_TOKEN)) {
-            const value = theme[tokenKey];
-            if (value !== undefined)
-                out[tokenClass] = chalkFromToken(value);
-        }
-        return out;
-        // themeSig changes exactly when any syntax token's resolved value does.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [themeSig]);
+    const syntaxTheme = React.useMemo(() => getTheme(themeName), [themeName]);
+    const themeSig = React.useMemo(() => syntaxThemeSignature(syntaxTheme), [syntaxTheme]);
     // Alignment is text-only and capped BEFORE styling: the highlighter and
     // word-diff work lands only on the visible slice (issue #250, P2-8).
     const rows = [];
@@ -348,8 +249,8 @@ export function SplitDiffView({ diffs, width, maxRows, verbose, toolBackground =
     const fileSyntax = diffs.map(diff => {
         const language = extname(diff.path).replace(/^\./, '') || undefined;
         return {
-            old: highlightLines(expandTabs(diff.oldText ?? ''), language, hl, chTheme, themeSig),
-            next: highlightLines(expandTabs(diff.newText), language, hl, chTheme, themeSig),
+            old: highlightLines(expandTabs(diff.oldText ?? ''), language, hl, syntaxTheme, themeSig),
+            next: highlightLines(expandTabs(diff.newText), language, hl, syntaxTheme, themeSig),
         };
     });
     return (_jsxs(Box, { flexDirection: "column", width: paneWidth * 2 + 1, children: [visible.map((row, index) => {

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

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

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

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

package/lib/types/components/SubagentCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+    const elapsed = subagent.completedAt ? subagent.completedAt - subagent.startedAt : Date.now() - subagent.startedAt;
+    const total = subagent.tokens?.total ?? ((subagent.tokens?.input ?? 0) + (subagent.tokens?.output ?? 0) || 0);
+    // 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.
+    const liveLine = running ? subagent.output[subagent.output.length - 1] : undefined;
+    const minimal = isMinimalMode();
+    const glyph = running ? (minimal ? '·' : '🟡')
+        : subagent.status === 'failed' || subagent.status === 'cancelled' ? (minimal ? '×' : '🔴')
+            : (minimal ? '✓' : '🟢');
+    const glyphColor = minimal ? undefined
+        : 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}` })] });
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SubagentState } from '../dsh-adapter/subagents.js';
+export interface SubagentDashboardProps {
+    subagents: SubagentState[];
+    onClose: () => void;
+    onSelect?: (agentId: string) => void;
+}
+/**
+ * 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;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,QAAQ,EACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAoG1C"}

package/lib/types/components/SubagentDashboard.js

@@ -0,0 +1,50 @@
+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';
+/**
+ * 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: "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
+                        ? 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;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"}

package/lib/types/components/SubagentDetailScene.js

@@ -0,0 +1,141 @@
+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 { t } from '../i18n.js';
+import { Divider } from './design-system/Divider.js';
+import { isPlainReturnInput } from '../utils/modifiers.js';
+import { toolNameColor } from './messages/AssistantToolUseMessage.js';
+import { getCliHighlightPromise } from '../cc/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' };
+    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: 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';
+    const elapsed = subagent.completedAt ? subagent.completedAt - subagent.startedAt : Date.now() - subagent.startedAt;
+    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(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')}`] }) })] }));
+}

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 '../cc/cliHighlight.js';
+import { highlightLines, syntaxThemeSignature } from '../cc/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/ThinkingToggle.d.ts

@@ -1,17 +1,10 @@
 import React from 'react';
 /**
- * The `/thinking` dialog, mirroring Claude Code's ThinkingToggle.tsx: a
- * permission-colored Pane with a bold title, the Enabled/Disabled select
- * (with CC's option descriptions), and the Enter/Esc hint line.
- *
- * When `confirmationPending` is set (mid-conversation toggle), the select is
- * replaced by CC's yellow warning block and the hint line becomes
- * Enter confirm / Esc cancel; keyboard handling lives in the caller (Chat).
+ * 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, confirmationPending, }: {
+export declare function ThinkingToggle({ currentValue, focusIndex, }: {
     currentValue: boolean;
     focusIndex: number;
-    /** Set while a mid-conversation toggle awaits Enter confirmation. */
-    confirmationPending: boolean | null;
 }): 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;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,UAAU,EACV,mBAAmB,GACpB,EAAE;IACD,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,mBAAmB,EAAE,OAAO,GAAG,IAAI,CAAA;CACpC,GAAG,KAAK,CAAC,SAAS,CA+ClB"}
+{"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"}

package/lib/types/components/ThinkingToggle.js

@@ -5,15 +5,10 @@ import { Pane } from './design-system/Pane.js';
 import { Select } from './Select.js';
 import { HintLine } from './design-system/HintLine.js';
 /**
- * The `/thinking` dialog, mirroring Claude Code's ThinkingToggle.tsx: a
- * permission-colored Pane with a bold title, the Enabled/Disabled select
- * (with CC's option descriptions), and the Enter/Esc hint line.
- *
- * When `confirmationPending` is set (mid-conversation toggle), the select is
- * replaced by CC's yellow warning block and the hint line becomes
- * Enter confirm / Esc cancel; keyboard handling lives in the caller (Chat).
+ * 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, confirmationPending, }) {
+export function ThinkingToggle({ currentValue, focusIndex, }) {
     const options = [
         {
             value: 'true',
@@ -26,5 +21,5 @@ export function ThinkingToggle({ currentValue, focusIndex, confirmationPending,
             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') })] }), confirmationPending !== null ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, gap: 1, children: [_jsx(Text, { color: "warning", children: t('thinking-mid-warning') }), _jsx(Text, { color: "warning", children: t('thinking-proceed') })] })) : (_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: confirmationPending !== null ? t('hint-confirm-cancel') : 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 }) })] }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7C,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,GACd,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAkEjC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7C,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,GACd,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAwEjC"}

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

@@ -54,7 +54,7 @@ export function ListItem({ isFocused, isSelected = false, children, description,
     // 非 Fragment 的 element（如调用方自己的 <Text>）保留原样——其子树高度
     // 由调用方负责。
     const flatChildren = flattenDeep(children);
-    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, wrap: "truncate", children: flatChildren })) : (flatChildren), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: flattenLine(description) }) }))] }));
+    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, height: 1, flexShrink: 0, overflow: "hidden", width: "100%", children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, wrap: "truncate-end", children: flatChildren })) : (flatChildren), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: flattenLine(description) }) }))] }));
 }
 /** 单行化：内嵌换行折叠为空格（行尾/行首换行随之消除）。 */
 function flattenLine(s) {

package/lib/types/components/messages/AssistantThinkingMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantThinkingMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantThinkingMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,OAAO,EAAE,OAAO,CAAA;IAChB;;4CAEwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;8EAE0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAwGzB"}
+{"version":3,"file":"AssistantThinkingMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/messages/AssistantThinkingMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,4DAA4D;IAC5D,SAAS,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,OAAO,EAAE,OAAO,CAAA;IAChB;;4CAEwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;8EAE0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,UAAkB,EAClB,OAAO,GACR,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAwHzB"}

package/lib/types/components/messages/AssistantThinkingMessage.js

@@ -1,10 +1,14 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import chalk from 'chalk';
 import { Box, Text } from '../../ui.js';
 import { t } from '../../i18n.js';
 import { StreamingMarkdown } from '../StreamingMarkdown.js';
 import { formatDuration } from '../../cc/format.js';
 import { THINKING_SPINNER_FRAMES, THINKING_SPINNER_INTERVAL_MS, THINKING_SETTLED_MARKER, } from '../../cc/figures.js';
+import { BRAND, ICE } from '../shimmer.js';
+import { interpolateColor } from '../Spinner/spinnerUtils.js';
+import { isMinimalMode } from '../../minimalMode.js';
 /** Preview body rows — a FIXED row count (kimicode-style constant-height
  *  ticker). Ink's truncate slices the whole string across newlines as one
  *  logical line, so a single joined Text collapses to 1-2 rows whenever
@@ -33,12 +37,19 @@ export function AssistantThinkingMessage({ thinking, addMargin, verbose, streami
         const interval = setInterval(() => setFrame(f => f + 1), THINKING_SPINNER_INTERVAL_MS);
         return () => clearInterval(interval);
     }, [streaming]);
-    const marker = streaming
-        ? THINKING_SPINNER_FRAMES[frame % THINKING_SPINNER_FRAMES.length]
-        : THINKING_SETTLED_MARKER;
     const duration = durationMs !== undefined && durationMs >= 1000
         ? ` · ${formatDuration(durationMs)}`
         : '';
+    // Kimi Code style blue pulse: the streaming glyph breathes along the
+    // header's brand→ice ladder, one sine period per ~7 frames (≈0.56s) —
+    // lively without strobing. Minimal mode drops the color (plain glyph);
+    // settled always keeps the plain dim anchor.
+    const label = `${t('thinking-label')}${duration}${streaming ? '…' : ` ${t('hint-expand-ctrl-o')}`}`;
+    const minimal = isMinimalMode();
+    const pulse = (Math.sin(frame * 0.9) + 1) / 2;
+    const pulseColor = interpolateColor(BRAND, ICE, pulse);
+    const frameText = THINKING_SPINNER_FRAMES[frame % THINKING_SPINNER_FRAMES.length];
+    const header = streaming ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: minimal ? frameText : chalk.rgb(pulseColor.r, pulseColor.g, pulseColor.b).bold(frameText) }), _jsx(Text, { dimColor: true, italic: true, children: ` ${label}` })] })) : (_jsx(Text, { dimColor: true, italic: true, children: `${minimal ? '*' : THINKING_SETTLED_MARKER} ${label}` }));
     if (preview) {
         // Live ticker: the model's last few reasoning lines, dimmed, one Text
         // per row so each truncates to the width independently, padded to a
@@ -53,10 +64,10 @@ export function AssistantThinkingMessage({ thinking, addMargin, verbose, streami
         // Pad with single spaces — an empty-string Text renders with zero
         // height in ink, so '' padding would not hold the row open.
         const rows = Array.from({ length: PREVIEW_ROWS }, (_, i) => visible[i] ?? ' ');
-        return (_jsxs(Box, { flexDirection: "column", marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [_jsxs(Text, { dimColor: true, italic: true, children: [marker, " ", t('thinking-label'), duration, "\u2026"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 2, height: PREVIEW_ROWS, flexShrink: 0, overflow: "hidden", children: rows.map((line, i) => (_jsx(Text, { dimColor: true, italic: true, wrap: i === rows.length - 1 ? 'truncate-start' : 'truncate', children: i === 0 && clipped ? `…${line}` : line }, i))) })] }));
+        return (_jsxs(Box, { flexDirection: "column", marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [header, _jsx(Box, { flexDirection: "column", paddingLeft: 2, height: PREVIEW_ROWS, flexShrink: 0, overflow: "hidden", children: rows.map((line, i) => (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(Text, { dimColor: true, italic: true, children: '│ ' }), _jsx(Box, { flexDirection: "row", flexGrow: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: i === rows.length - 1 ? 'truncate-start' : 'truncate', children: i === 0 && clipped ? `…${line}` : line }) })] }, i))) })] }));
     }
     if (!verbose) {
-        return (_jsx(Box, { marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: _jsxs(Text, { dimColor: true, italic: true, children: [marker, " ", t('thinking-label'), duration, " ", t('hint-expand-ctrl-o')] }) }));
+        return (_jsx(Box, { marginTop: addMargin ? 1 : 0, backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: header }));
     }
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [_jsxs(Text, { dimColor: true, italic: true, children: [marker, " ", t('thinking-label'), duration, "\u2026"] }), _jsx(Box, { paddingLeft: 2, children: _jsx(StreamingMarkdown, { dimColor: true, children: thinking }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: isSelected ? 'messageActionsBackground' : undefined, onClick: onClick, children: [header, _jsx(Box, { paddingLeft: 2, children: _jsx(StreamingMarkdown, { dimColor: true, children: thinking }) })] }));
 }