@deepseek-harness-tui/dsh-tui 0.11.2 → 0.13.0

package/lib/types/components/SubagentDetailScene.js

@@ -3,11 +3,14 @@ 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 { ExitButton, isPanelPlainReturn } from './SubagentDashboard.js';
 import { isPlainReturnInput } from '../utils/modifiers.js';
 import { toolNameColor } from './messages/AssistantToolUseMessage.js';
+import { Markdown } from './Markdown.js';
 import { getCliHighlightPromise } from '../terminal-utils/cliHighlight.js';
-import { isMinimalMode } from '../minimalMode.js';
+import { isMinimalUiMode } from '../minimalUiMode.js';
+import { usePanelInput } from './sidePanel/usePanelInput.js';
+import { THINKING_SETTLED_MARKER } from '../terminal-utils/figures.js';
 function formatDuration(ms) {
     if (ms < 1000)
         return `${ms}ms`;
@@ -21,16 +24,16 @@ function formatTimestamp(ts) {
     return new Date(ts).toLocaleTimeString();
 }
 function statusGlyph(status) {
-    const minimal = isMinimalMode();
+    const minimalUi = isMinimalUiMode();
     if (status === 'completed')
-        return { glyph: minimal ? '✓' : '🟢', color: minimal ? undefined : 'success', label: 'done' };
+        return { glyph: minimalUi ? '✓' : '🟢', color: minimalUi ? undefined : 'success', label: 'done' };
     if (status === 'failed')
-        return { glyph: minimal ? '×' : '🔴', color: minimal ? undefined : 'error', label: 'failed' };
+        return { glyph: minimalUi ? '×' : '🔴', color: minimalUi ? undefined : 'error', label: 'failed' };
     if (status === 'cancelled')
-        return { glyph: minimal ? '×' : '🔴', color: minimal ? undefined : 'error', label: 'cancelled' };
+        return { glyph: minimalUi ? '×' : '🔴', color: minimalUi ? 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' };
+        return { glyph: minimalUi ? '·' : '⚪', color: minimalUi ? undefined : 'subtle', label: 'history' };
+    return { glyph: minimalUi ? '·' : '🟡', color: minimalUi ? undefined : 'warning', label: 'running' };
 }
 const PAGES = ['summary', 'output', 'tools'];
 /** One label/value row of the summary stats card. */
@@ -67,6 +70,39 @@ function JsonArgsText({ raw }) {
         return _jsx(Text, { wrap: "wrap", children: highlighted });
     return _jsx(Text, { dimColor: true, wrap: "wrap", children: flat });
 }
+function groupOutputEvents(events) {
+    const blocks = [];
+    for (const line of events) {
+        if (line.kind === 'thinking') {
+            const last = blocks[blocks.length - 1];
+            if (last !== undefined && last.kind === 'thinking')
+                last.lines.push(line);
+            else
+                blocks.push({ kind: 'thinking', lines: [line] });
+            continue;
+        }
+        // Consecutive prose lines are ONE markdown document: without the fold a
+        // `**bold**` line, its list items and its paragraph break would render as
+        // raw syntax separated by blank rows. Activity pointers and tool/error
+        // rows stay independent single lines.
+        if (line.kind === 'text' && !isActivityLine(line.text)) {
+            const last = blocks[blocks.length - 1];
+            if (last !== undefined && last.kind === 'prose')
+                last.lines.push(line);
+            else
+                blocks.push({ kind: 'prose', lines: [line] });
+            continue;
+        }
+        blocks.push({ kind: 'line', line });
+    }
+    return blocks;
+}
+/** The child's own status line reaches us as a text delta (\`⏵ reading …\`);
+ *  it is activity, not prose, so it renders as a dim pointer row. */
+const ACTIVITY_GLYPHS = ['⏵', '▶', '▸', '»'];
+function isActivityLine(text) {
+    return ACTIVITY_GLYPHS.includes(text.trimStart().slice(0, 1));
+}
 /**
  * SubagentDetailScene — full-screen paged detail view for one subagent.
  * Header block (identity + stats) stays fixed; the body pages through
@@ -74,7 +110,8 @@ function JsonArgsText({ raw }) {
  * 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, }) {
+export function SubagentDetailScene({ subagent, onBack, onInterrupt, variant = 'default', focused = true, visible = true, }) {
+    const panelMode = variant === 'panel';
     const scrollRef = React.useRef(null);
     const { rows, columns } = useTerminalSize();
     const [page, setPage] = React.useState('summary');
@@ -86,6 +123,27 @@ export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
     const info = statusGlyph(subagent.status);
     const totalTokens = subagent.tokens?.total ?? ((subagent.tokens?.input ?? 0) + (subagent.tokens?.output ?? 0) || 0);
     const pageIndex = PAGES.indexOf(page);
+    /** Folded reasoning runs (the transcript's thinking grammar). Enter flips
+     *  every run at once so one key stays predictable across thought steps. */
+    const [thinkingOpen, setThinkingOpen] = React.useState(false);
+    const blocks = groupOutputEvents(subagent.outputEvents);
+    const hasThinking = blocks.some(block => block.kind === 'thinking');
+    const settled = !isRunning;
+    // The deliverable is the LAST prose block: a `── Conclusion ──` rule goes in
+    // front of it once the run settles, so the answer is never the last line of
+    // a wall of reasoning.
+    const answerBlock = (() => {
+        if (!settled)
+            return -1;
+        for (let i = blocks.length - 1; i >= 0; i--) {
+            const block = blocks[i];
+            if (block.kind === 'prose' && block.lines.some(p => p.text.trim() !== ''))
+                return i;
+            if (block.kind === 'line' && block.line.kind === 'text' && block.line.text.trim() !== '')
+                return i;
+        }
+        return -1;
+    })();
     const turnPage = (delta) => {
         const next = (pageIndex + delta + PAGES.length) % PAGES.length;
         setPage(PAGES[next]);
@@ -94,6 +152,17 @@ export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
     // 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.
+    // Expanding the reasoning grows the box past its viewport, and the renderer
+    // then treats the growth as "was at bottom" (maxScroll was 0 while the folded
+    // body fit) and re-pins the view to the bottom — pushing the fold header out
+    // of sight. Re-anchor AFTER that frame: the first immediate lands behind the
+    // renderer's own scheduling, and the second behind the re-pin frame it caused.
+    React.useEffect(() => {
+        if (page !== 'output')
+            return;
+        const first = setImmediate(() => scrollRef.current?.scrollTo?.(0));
+        return () => clearImmediate(first);
+    }, [thinkingOpen, page]);
     const outputLength = subagent.outputEvents.length;
     React.useEffect(() => {
         if (page !== 'output' || !isRunning)
@@ -101,6 +170,8 @@ export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
         scrollRef.current?.scrollToBottom();
     }, [page, isRunning, outputLength]);
     useInput((input, key, event) => {
+        if (panelMode)
+            return;
         if (key.escape || (key.ctrl && input === 'c')) {
             event.stopImmediatePropagation();
             onBack();
@@ -133,15 +204,91 @@ export function SubagentDetailScene({ subagent, onBack, onInterrupt, }) {
         }
         if (isPlainReturnInput(input, key)) {
             event.stopImmediatePropagation();
-            onBack();
+            // Enter folds the reasoning while the output page is showing (the
+            // transcript's ctrl+o equivalent). Elsewhere it keeps its "leave the
+            // detail" meaning, which Esc and the ✕ button still provide.
+            if (page === 'output' && hasThinking)
+                setThinkingOpen(open => !open);
+            else
+                onBack();
             return;
         }
         event.stopImmediatePropagation();
-    });
+    }, { isActive: !panelMode });
+    // Panel form（v2.1 键盘契约）：这一层自己吃掉整个业务键面。Esc/Ctrl+C 必须
+    // 返回 true —— Detail → Dashboard 是面板内部的一级，绝不能落给宿主（宿主
+    // 的 Esc 回退是「焦点回聊天」）。其余未认的键返回 false，让 [/]、数字、
+    // z、+/- 继续可用。
+    const panelKeyHandler = (input, key) => {
+        if (key.escape === true || (key.ctrl === true && input === 'c')) {
+            onBack();
+            return true;
+        }
+        if (key.leftArrow === true) {
+            turnPage(-1);
+            return true;
+        }
+        if (key.rightArrow === true) {
+            turnPage(1);
+            return true;
+        }
+        if (key.upArrow === true) {
+            scrollRef.current?.scrollBy(-3);
+            return true;
+        }
+        if (key.downArrow === true) {
+            scrollRef.current?.scrollBy(3);
+            return true;
+        }
+        if (input.toLowerCase() === 'x' && isRunning && onInterrupt !== undefined) {
+            onInterrupt(subagent.agentId);
+            return true;
+        }
+        if (isPanelPlainReturn(input, key)) {
+            // Enter 与整屏形态同义：输出页有思考块时先折叠它，别处退回 Dashboard。
+            if (page === 'output' && hasThinking)
+                setThinkingOpen(open => !open);
+            else
+                onBack();
+            return true;
+        }
+        return false;
+    };
+    usePanelInput(panelKeyHandler, { active: panelMode && focused && visible });
     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')}` })] })] }));
+    // 外层留白：整屏形态保持原样；侧栏形态只留左右各 1 格（PanelBar 与宿主
+    // 提示行已经承担其余 chrome）。
+    const outer = panelMode
+        ? { paddingLeft: 1, paddingRight: 1, paddingTop: 0 }
+        : { paddingX: 2, paddingY: 1 };
+    return (_jsxs(Box, { flexDirection: "column", ...outer, 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 }), subagent.mode === 'continuable' && _jsx(Text, { color: "warning", children: t('subagent-mode-continuable') }), subagent.mode === 'one-shot' && _jsx(Text, { dimColor: true, children: t('subagent-mode-one-shot') }), _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.slice(0, 8)}`] }), 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', subagent.outputEvents.length > 0 ? `${t('subagent-output-label')} ${subagent.outputEvents.length}` : t('subagent-output-label')), tab('tools', subagent.toolCalls.length > 0 ? `${t('subagent-tools')} ${subagent.toolCalls.length}` : 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: panelMode ? Math.max(6, rows - 10) : 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') })) : (blocks.map((block, index) => {
+                            if (block.kind === 'thinking') {
+                                const text = block.lines.map(line => line.text).join('\n');
+                                const chars = text.replace(/\s+/g, '').length;
+                                const label = `${THINKING_SETTLED_MARKER} ${t('subagent-thinking-fold', { count: block.lines.length, chars })}`;
+                                const hint = thinkingOpen ? t('subagent-thinking-collapse') : t('subagent-thinking-expand');
+                                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { italic: true, dimColor: true, children: `${label}  ·  ${hint}` }), thinkingOpen ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: block.lines.map((line, i) => (_jsx(Text, { dimColor: true, italic: true, wrap: "wrap", children: line.text }, i))) })) : (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate-end", children: `  ${block.lines[0]?.text.replace(/\s+/g, ' ').trim() ?? ''}` }))] }, `think-${index}`));
+                            }
+                            if (block.kind === 'prose') {
+                                const proseText = block.lines.map(p => p.text).join('\n');
+                                const proseUnsettled = isRunning && block.lines.some(p => p.settled === false);
+                                const isProseAnswer = index === answerBlock;
+                                return (_jsxs(Box, { flexDirection: "column", marginTop: index === 0 ? 0 : 1, children: [isProseAnswer && (_jsx(Text, { dimColor: true, children: `── ${t('subagent-conclusion')} ${'─'.repeat(Math.max(8, Math.min(60, columns - 16)))}` })), _jsx(Markdown, { dimColor: false, cacheTokens: true, children: proseText }), proseUnsettled && _jsx(Text, { dimColor: true, children: '▌' })] }, `prose-${index}`));
+                            }
+                            const line = block.line;
+                            const unsettled = !line.settled && isRunning ? ' ▍' : '';
+                            if (line.kind === 'text' && isActivityLine(line.text)) {
+                                return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: "accent", children: '⏵' }), _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [line.text.replace(/^[\s⏵▶▸»]+/, ''), unsettled] })] }, `act-${index}`));
+                            }
+                            const isAnswer = index === answerBlock;
+                            // Tool / error / system rows get a leading row gap so a wall
+                            // of streamed rows stops reading as one cramped paragraph.
+                            const rowGap = line.kind === 'tool' || line.kind === 'error' || line.kind === 'system';
+                            return (_jsxs(Box, { flexDirection: "column", marginTop: rowGap && index !== 0 ? 1 : 0, children: [isAnswer && (_jsx(Text, { dimColor: true, children: `── ${t('subagent-conclusion')} ${'─'.repeat(Math.max(8, Math.min(60, columns - 16)))}` })), _jsxs(Text, { wrap: "wrap", bold: isAnswer, dimColor: line.kind === 'system', color: line.kind === 'error' ? 'error' : line.kind === 'tool' ? 'accent' : undefined, children: [line.kind === 'tool' ? `● ${line.text}` : line.text, unsettled] })] }, `line-${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')}`
+                            + (page === 'output' && hasThinking ? ` · ${t('subagent-hint-fold')}` : '') }), 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/SurfaceEdges.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * How many columns a surface may "bleed" past its own box on each side
+ * (see the side-panel design doc §4.4). Structural chrome — page-level
+ * dividers, the transcript gutter — runs straight to the surface edge
+ * while content keeps its inset, the standard print-layout convention.
+ *
+ * PageMargin provides the default ({ left: x, right: x } of its inset).
+ * SidePanelLayout re-provides per column: the chat column may bleed left
+ * into the page margin but stops at the divider ({ left: x, right: 0 }),
+ * the panel column vice versa ({ left: 0, right: x }).
+ */
+export interface SurfaceEdges {
+    readonly left: number;
+    readonly right: number;
+}
+export declare const NO_BLEED: SurfaceEdges;
+export declare const SurfaceEdgesContext: React.Context<SurfaceEdges>;
+/** Bleed allowance of the nearest surface (columns, per side). */
+export declare function useSurfaceEdges(): SurfaceEdges;
+//# sourceMappingURL=SurfaceEdges.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceEdges.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceEdges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,QAAQ,EAAE,YAAmD,CAAA;AAE1E,eAAO,MAAM,mBAAmB,6BAA8C,CAAA;AAE9E,kEAAkE;AAClE,wBAAgB,eAAe,IAAI,YAAY,CAE9C"}

package/lib/types/components/SurfaceEdges.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const NO_BLEED = Object.freeze({ left: 0, right: 0 });
+export const SurfaceEdgesContext = React.createContext(NO_BLEED);
+/** Bleed allowance of the nearest surface (columns, per side). */
+export function useSurfaceEdges() {
+    return React.useContext(SurfaceEdgesContext);
+}

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

@@ -14,6 +14,15 @@ export declare function getThemeOptions(themeHost?: TuiThemeHost): SelectOption[
  * 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.
+ *
+ * 宽终端（≥ MIN_SIDE_BY_SIDE_COLUMNS 列）在列表右侧并排一列预览：用**焦点行**
+ * 主题的调色板实渲染代码块 + 代码操作工具卡 + diff（见 ThemePreviewPane）。
+ * 列表只有三个色块，挑主题时看不到语法色、diff 色与工具卡底色——预览让
+ * 「移动光标」就等于「试主题」，不必先 Enter 应用再后悔。键位语义不变
+ * （↑↓ 移焦点、Enter 应用、Esc 取消），预览只是同一焦点索引的另一种投影。
+ *
+ * 窄终端把预览堆叠在列表下方；高度预算不够时预览整块让位——浮层向上生长，
+ * 探出帧顶的行会被裁掉，宁可少画预览，也不能把列表顶出可视区（见 OverlayAbove）。
  */
 export declare function ThemePicker({ focusIndex, currentTheme, themeHost, onPick, }: {
     focusIndex: number;

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;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"}
+{"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;AAMvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAiF5D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,SAAS,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAExE;AAgBD;;;;;;;;;;;;;;;;GAgBG;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,CA+DlB"}

package/lib/types/components/ThemePicker.js

@@ -1,16 +1,41 @@
 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 { Box, Text, useTerminalSize } from '../ui.js';
 import { Pane } from './design-system/Pane.js';
 import { Select } from './Select.js';
 import { HintLine } from './design-system/HintLine.js';
+import { ThemePreviewPane } from './ThemePreviewPane.js';
+import { useOverlayListRows } from './OverlayAbove.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'];
+/** 列表窗口行数（Select visibleOptionCount）——也是堆叠布局里列表占的行数。 */
+const LIST_ROWS = 6;
+/**
+ * 面板自占的行数（不含列表/预览本体）：Pane 的上边距 + 分隔线 2 行、标题 1 行、
+ * 标题下边距 1 行、底部提示 1 行。用来把浮层高度预算换算成"内容可用行数"。
+ */
+const FRAME_ROWS = 5;
+/**
+ * 并排布局的最小终端列数：Pane 左右各 2 列内边距后，列表列 ≥34 列、预览列
+ * ≥34 列、中间 2 列间隔。更窄时预览改为堆叠在列表下方（见 ThemePicker）。
+ */
+const MIN_SIDE_BY_SIDE_COLUMNS = 76;
+/** 预览列宽度区间：最窄 34 列（代码行 + 2 列缩进放得下），最宽 48 列后不再长胖。 */
+const PREVIEW_MIN_COLUMNS = 34;
+const PREVIEW_MAX_COLUMNS = 48;
+/** 预览少于这个行数就整块不画：画半张工具卡比不画更难看，还白占浮层高度。 */
+const PREVIEW_MIN_ROWS = 5;
+/**
+ * 堆叠布局里列表真实占的行数：每项 2 行（label + 描述），窗口最多 LIST_ROWS 项，
+ * 另留 2 行给描述换行与滚动箭头。**不能按 LIST_ROWS 算**——浮层的溢出方向是
+ * 从顶部裁，少算的每一行都会把列表本身顶出可视区（verify-theme-preview 的 F 组）。
+ */
+const LIST_RESERVE_ROWS = 2 * LIST_ROWS + 2;
 function swatches(theme) {
     return (_jsx(_Fragment, { children: SWATCH_KEYS.map(key => (_jsx(Text, { color: theme[key], children: SWATCH }, key))) }));
 }
@@ -22,13 +47,9 @@ function optionFor(name, displayName, theme, description) {
         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 => {
+/** 目录条目 → 选择行。列表渲染与焦点预览读同一份条目，顺序不可能分叉。 */
+function optionsFrom(entries) {
+    return entries.map(item => {
         const base = item.base ?? 'dark';
         const description = item.source === 'auto'
             ? t('theme-auto-base')
@@ -40,6 +61,24 @@ export function getThemeOptions(themeHost) {
         return optionFor(item.name, item.displayName, item.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 optionsFrom(listThemeCatalog(themeHost));
+}
+/**
+ * 并排时的列表列/预览列宽度。预览先按内容宽度的 45% 取（钳在 34–48 列），
+ * 剩下的留给列表——列表永远比预览宽，且宽终端上 `auto` 那条最长的描述行
+ * 仍能整行显示（100 列时列表 51 列，描述 47 列）。再宽预览也不再长胖，
+ * 免得工具卡底色带拉成一条长横幅。
+ */
+function columnsFor(contentColumns) {
+    const preview = Math.min(PREVIEW_MAX_COLUMNS, Math.max(PREVIEW_MIN_COLUMNS, Math.floor(contentColumns * 0.45)));
+    return { list: Math.max(contentColumns - preview - 2, PREVIEW_MIN_COLUMNS), preview };
+}
 /**
  * Color-theme picker in the ActivityPicker style: a permission-colored Pane
  * listing the `auto` pseudo-theme and built-in palettes first, followed by
@@ -47,9 +86,34 @@ export function getThemeOptions(themeHost) {
  * 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.
+ *
+ * 宽终端（≥ MIN_SIDE_BY_SIDE_COLUMNS 列）在列表右侧并排一列预览：用**焦点行**
+ * 主题的调色板实渲染代码块 + 代码操作工具卡 + diff（见 ThemePreviewPane）。
+ * 列表只有三个色块，挑主题时看不到语法色、diff 色与工具卡底色——预览让
+ * 「移动光标」就等于「试主题」，不必先 Enter 应用再后悔。键位语义不变
+ * （↑↓ 移焦点、Enter 应用、Esc 取消），预览只是同一焦点索引的另一种投影。
+ *
+ * 窄终端把预览堆叠在列表下方；高度预算不够时预览整块让位——浮层向上生长，
+ * 探出帧顶的行会被裁掉，宁可少画预览，也不能把列表顶出可视区（见 OverlayAbove）。
  */
 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') }) })] }) }));
+    // 目录只读一次：列表行与预览抬头/调色板同源，焦点索引在两边的含义必然一致。
+    const entries = React.useMemo(() => listThemeCatalog(themeHost), [runtimeThemeSnapshot, themeHost]);
+    const options = React.useMemo(() => optionsFrom(entries), [entries]);
+    const { columns } = useTerminalSize();
+    const contentColumns = Math.max(columns - 4, 1);
+    const sideBySide = columns >= MIN_SIDE_BY_SIDE_COLUMNS;
+    const { list: listColumns, preview: previewColumns } = columnsFor(contentColumns);
+    // 浮层给内容的总行数。并排时预览只占列表旁边的列，面板高度仍是
+    // max(列表, 预览)——预览比列表矮就一分高度都不加，所以直接吃满预算；
+    // 堆叠时预览是**加在列表下面**的净增量，必须先扣掉列表真实占的行数和
+    // 那 1 行间隔，否则多出来的预览会把列表顶出浮层（溢出从顶部裁）。
+    const contentRows = useOverlayListRows(FRAME_ROWS);
+    const previewRows = sideBySide ? contentRows : contentRows - LIST_RESERVE_ROWS - 1;
+    const focused = entries[focusIndex] ?? entries[0];
+    const preview = focused !== undefined && previewRows >= PREVIEW_MIN_ROWS
+        ? (_jsx(ThemePreviewPane, { entry: focused, rows: previewRows, width: sideBySide ? previewColumns : contentColumns }))
+        : undefined;
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: sideBySide ? 'row' : 'column', children: [_jsxs(Box, { flexDirection: "column", width: sideBySide ? listColumns : undefined, 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: LIST_ROWS, onPick: onPick ? index => onPick(index) : undefined }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }), sideBySide && preview !== undefined && (_jsx(Box, { flexDirection: "column", marginLeft: 2, width: previewColumns, children: preview }))] }), !sideBySide && preview !== undefined && (_jsx(Box, { flexDirection: "column", marginTop: 1, children: preview }))] }));
 }

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ThemeCatalogEntry } from '../themeCatalog.js';
+/**
+ * `/theme` 右列的预览面板：用**被预览主题**的调色板（而不是当前生效主题）
+ * 实渲染一段语法高亮代码块、一张代码操作工具卡和三行 diff。
+ *
+ * 为什么要有它：列表行只有 accent/text/success 三个色块，挑主题时看不到
+ * 语法色（syntax*）、diff 色（diffAdded/diffRemoved）和工具卡底色
+ * （toolCard 族/toolDot 族）——而那才是每天盯着的部分。预览跟随焦点行，移动
+ * 光标即可比较，不必先 Enter 应用再后悔。
+ *
+ * 颜色全部走**显式色值**：调色板里的 hex/`ansi:` 值经 ThemedText/ThemedBox
+ * 的 resolveColor 原样透传（那里只解析主题键名），于是预览列抹的是候选主题
+ * 的色，而外层列表仍是当前主题——不需要给 design-system 加调色板覆盖层。
+ * 同理这里一律不写 `dimColor`：ThemedText 的 dimColor 会盖掉传入的 color，
+ * 把候选色换成**当前主题**的 inactive。
+ */
+export declare function ThemePreviewPane({ entry, rows, width, }: {
+    /** 焦点行主题（目录条目自带已解析的完整调色板）。 */
+    entry: ThemeCatalogEntry;
+    /** 预览列可用行数（已按浮层高度预算钳过）；装不下的块从底部裁掉。 */
+    rows: number;
+    /** 预览列宽度（终端列数）：抬头主题名与跟随提示按它截断，不换行。 */
+    width: number;
+}): React.ReactNode;
+//# sourceMappingURL=ThemePreviewPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePreviewPane.d.ts","sourceRoot":"","sources":["../../../src/components/ThemePreviewPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAiB3D;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,KAAK,GACN,EAAE;IACD,8BAA8B;IAC9B,KAAK,EAAE,iBAAiB,CAAA;IACxB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,SAAS,CA0ElB"}

package/lib/types/components/ThemePreviewPane.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { buildSyntaxTheme } from '../terminal-utils/syntaxTheme.js';
+import { getCliHighlightPromise } from '../terminal-utils/cliHighlight.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { truncateMiddle } from '../utils/truncateMiddle.js';
+/**
+ * 调色板键 → 渲染原语接受的显式色值：Theme 的值是宽松 string（hex 或
+ * `ansi:<name>`），而 Text/Box 的 color 联合类型要 Color。与 ThemePicker 的
+ * swatches 同一个断言（`theme[key] as Color`）——resolveColor 对 `#`/`rgb(`/
+ * `ansi256(`/`ansi:` 前缀原样透传，所以候选主题的色不会被当前主题改写。
+ */
+function ink(color) {
+    return color;
+}
+/**
+ * `/theme` 右列的预览面板：用**被预览主题**的调色板（而不是当前生效主题）
+ * 实渲染一段语法高亮代码块、一张代码操作工具卡和三行 diff。
+ *
+ * 为什么要有它：列表行只有 accent/text/success 三个色块，挑主题时看不到
+ * 语法色（syntax*）、diff 色（diffAdded/diffRemoved）和工具卡底色
+ * （toolCard 族/toolDot 族）——而那才是每天盯着的部分。预览跟随焦点行，移动
+ * 光标即可比较，不必先 Enter 应用再后悔。
+ *
+ * 颜色全部走**显式色值**：调色板里的 hex/`ansi:` 值经 ThemedText/ThemedBox
+ * 的 resolveColor 原样透传（那里只解析主题键名），于是预览列抹的是候选主题
+ * 的色，而外层列表仍是当前主题——不需要给 design-system 加调色板覆盖层。
+ * 同理这里一律不写 `dimColor`：ThemedText 的 dimColor 会盖掉传入的 color，
+ * 把候选色换成**当前主题**的 inactive。
+ */
+export function ThemePreviewPane({ entry, rows, width, }) {
+    const palette = entry.theme;
+    const [highlight, setHighlight] = React.useState(null);
+    React.useEffect(() => {
+        let alive = true;
+        // cli-highlight 是懒加载的（与 markdown.ts 的 fenced code 同一条路径）：
+        // 首帧先上纯文本，加载完成后原位补色——不为预览阻塞浮层打开，也不改
+        // 代码块在转录里的首帧行为。
+        void getCliHighlightPromise().then((loaded) => {
+            if (alive)
+                setHighlight(loaded);
+        });
+        return () => {
+            alive = false;
+        };
+    }, []);
+    const codeLines = React.useMemo(() => {
+        const plain = SAMPLE_CODE.split('\n');
+        if (highlight === null)
+            return plain;
+        try {
+            return highlight
+                .highlight(SAMPLE_CODE, { language: 'typescript', theme: buildSyntaxTheme(palette) })
+                .replace(/\n+$/u, '')
+                .split('\n');
+        }
+        catch {
+            // 高亮抛错（语言表缺失等）只降级为纯文本，绝不把浮层带崩。
+            return plain;
+        }
+    }, [highlight, palette]);
+    const label = t('theme-preview-title');
+    const name = truncateMiddle(entry.displayName, Math.max(width - stringWidth(label) - 4, 4));
+    const body = [
+        _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: ink(palette.accent), bold: true, children: label }), _jsx(Text, { color: ink(palette.subtle), children: ' · ' }), _jsx(Text, { color: ink(palette.text), children: name })] }, "head"),
+        _jsx(Text, { color: ink(palette.subtle), children: truncateMiddle(t('theme-preview-follow'), Math.max(width, 1)) }, "follow"),
+        _jsx(Text, { color: ink(palette.subtle), children: '```ts' }, "fence"),
+        ...codeLines.map((line, index) => (_jsx(Text, { children: `${CODE_INDENT}${line}` }, `code-${index}`))),
+        _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: ink(palette.toolDotWrite), children: '● ' }), _jsx(Text, { color: ink(palette.toolNameMutate), children: 'Write' }), _jsx(Text, { color: ink(palette.subtle), children: '  src/theme.ts' })] }, "card"),
+        ...SAMPLE_DIFF.map((row, index) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: ink(row.tone === 'add' ? palette.diffAddedWord : palette.diffRemovedWord), children: index === 0 ? GUTTER_FIRST : GUTTER_REST }), _jsx(Text, { color: ink(row.tone === 'add' ? palette.diffAddedWord : palette.diffRemovedWord), children: row.text })] }, `diff-${index}`))),
+    ];
+    // 行预算是硬约束：浮层向上生长且探出帧顶的行会被裁掉，超出预算的块宁可
+    // 不画，也不能把上方的主题列表顶出可视区。
+    const shown = body.slice(0, Math.max(rows, 0));
+    if (shown.length === 0)
+        return null;
+    return _jsx(Box, { flexDirection: "column", children: shown });
+}
+/** 预览代码块示例：每行 ≤ 30 列（最窄的预览列 34 列，留 2 列缩进），同时覆盖
+ *  注释/关键字/字符串/类型四类 token，语法色的差异一眼可见。 */
+const SAMPLE_CODE = [
+    '// dsh-tui palette',
+    "const theme = pick('dark')",
+    'type Swatch = { hex: string }',
+].join('\n');
+/** 代码操作工具卡的示例 diff：一行删除 + 两行新增，覆盖 diffRemoved/diffAdded
+ *  的词级变体（真机转录里工具卡正文用的就是这两个键）。 */
+const SAMPLE_DIFF = [
+    { tone: 'del', text: "- accent: '#3b4252'" },
+    { tone: 'add', text: "+ accent: '#7aa2f7'" },
+    { tone: 'add', text: "+ text:   '#e5e9f0'" },
+];
+/** 代码块正文缩进：与 markdown.ts 的 fenced code 同一约定（2 空格）。 */
+const CODE_INDENT = '  ';
+/** 工具卡正文左侧沟槽：首行 ⎿、其余行同宽空格（真机转录的 GUTTER_FIRST/REST）。 */
+const GUTTER_FIRST = ' ⎿ ';
+const GUTTER_REST = '   ';

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { TerminalImageSource } from '../ink/terminal-image.js';
 /**
  * The maid portrait (鲸鱼娘) that can stand in for the header's pixel whale
  * (settings `dsh-tui.whaleGirl`): the author-designed 30×30 true-color
@@ -26,4 +27,9 @@ export declare const WHALE_GIRL_CENTER = 19.5;
 export declare function WhaleGirlArt({ width }: {
     width?: number;
 }): React.ReactNode;
+/** The same heart-pose portrait used by the Star celebration, rendered as cells when image protocols are absent. */
+export declare function WhaleGirlHappyArt({ source, width }: {
+    source?: TerminalImageSource;
+    width?: number;
+}): React.ReactNode;
 //# sourceMappingURL=WhaleGirl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WhaleGirl.d.ts","sourceRoot":"","sources":["../../../src/components/WhaleGirl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;;;;;;;GAQG;AAEH,4DAA4D;AAC5D,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAI5C,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAErC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAW3E"}
+{"version":3,"file":"WhaleGirl.d.ts","sourceRoot":"","sources":["../../../src/components/WhaleGirl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnE;;;;;;;;GAQG;AAEH,4DAA4D;AAC5D,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAI5C,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAA;AAErC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAW3E;AAED,oHAAoH;AACpH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,KAAU,EAAE,EAAE;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAAC,SAAS,CAoBlB"}

package/lib/types/components/WhaleGirl.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Box, Text } from '../ui.js';
 import { renderCellRows } from './Whale.js';
 import { WHALE_GIRL_COLS, WHALE_GIRL_SPRITE, WHALE_GIRL_SPRITE_ROWS } from './whaleGirlSprite.js';
@@ -30,3 +31,20 @@ export function WhaleGirlArt({ width }) {
     const pad = width === undefined ? 0 : Math.max(0, Math.floor((width - WHALE_GIRL_COLS) / 2));
     return (_jsx(Box, { flexDirection: "column", flexShrink: 0, width: width, children: WHALE_GIRL_ROWS.map((row, index) => (_jsxs(Text, { wrap: "truncate-end", children: [pad > 0 ? ' '.repeat(pad) : '', row] }, index))) }));
 }
+/** The same heart-pose portrait used by the Star celebration, rendered as cells when image protocols are absent. */
+export function WhaleGirlHappyArt({ source, width = 40 }) {
+    const rows = React.useMemo(() => {
+        if (source === undefined)
+            return WHALE_GIRL_ROWS;
+        return renderCellRows(WHALE_GIRL_COLS, 32, (x, y) => {
+            const sx = Math.min(source.width - 1, Math.floor((x + 0.5) * source.width / WHALE_GIRL_COLS));
+            const sy = Math.min(source.height - 1, Math.floor((y + 0.5) * source.height / 32));
+            const at = (sy * source.width + sx) * 4;
+            if ((source.data[at + 3] ?? 0) < 80)
+                return undefined;
+            return [source.data[at] ?? 0, source.data[at + 1] ?? 0, source.data[at + 2] ?? 0];
+        });
+    }, [source]);
+    const pad = Math.max(0, Math.floor((width - WHALE_GIRL_COLS) / 2));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, width: width, children: [source === undefined && _jsx(Text, { color: "#f477a7", wrap: "truncate-end", children: '            ♥       ♥' }), rows.map((row, index) => (_jsxs(Text, { wrap: "truncate-end", children: [' '.repeat(pad), row] }, index)))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAQhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AASD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,EACL,KAAa,GACd,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAoFhC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAQhE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AASD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,EACL,KAAa,GACd,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAyFhC"}