@deepseek-harness-tui/dsh-tui 0.12.0 → 0.14.0

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/SyntaxText.d.ts.map

@@ -1 +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"}
+{"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,CAmCxH"}

package/lib/types/components/SyntaxText.js

@@ -15,7 +15,10 @@ export function SyntaxText({ text, language, sourceText = text, lineIndex = 0, c
             setHighlighter(value); });
         return () => { mounted = false; };
     }, []);
-    const theme = React.useMemo(() => getTheme(themeName), [themeName]);
+    // 当次渲染解析色板，**不按名字 memo**：`auto` 明暗翻转、运行时同名重注册
+    // 都不改名字，只改色板身份；按名字缓存会一直留着旧色板（getTheme 本身只是
+    // 一次 switch / resolver 查表，与其它取色组件一致）。
+    const theme = getTheme(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];

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/TurnInterruptedRow.d.ts

@@ -2,5 +2,7 @@ import React from 'react';
 /**
  * The dim "interrupted" row shown when the user stops a turn.
  */
-export declare function TurnInterruptedRow(): React.ReactNode;
+export declare function TurnInterruptedRow({ backendLabel }?: {
+    backendLabel?: string;
+}): React.ReactNode;
 //# sourceMappingURL=TurnInterruptedRow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TurnInterruptedRow.d.ts","sourceRoot":"","sources":["../../../src/components/TurnInterruptedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,KAAK,CAAC,SAAS,CAOpD"}
+{"version":3,"file":"TurnInterruptedRow.d.ts","sourceRoot":"","sources":["../../../src/components/TurnInterruptedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,KAAK,CAAC,SAAS,CASpG"}

package/lib/types/components/TurnInterruptedRow.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Text } from '../ui.js';
-import { t } from '../i18n.js';
+import { getLang, subscribeLang, t } from '../i18n.js';
 /**
  * The dim "interrupted" row shown when the user stops a turn.
  */
-export function TurnInterruptedRow() {
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: t('interrupted-by-user') }), _jsx(Text, { dimColor: true, children: t('interrupted-ask-next') })] }));
+export function TurnInterruptedRow({ backendLabel } = {}) {
+    React.useSyncExternalStore(subscribeLang, getLang);
+    const askNext = backendLabel ? t('interrupted-ask-backend', { name: backendLabel }) : t('interrupted-ask-next');
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: t('interrupted-by-user') }), _jsx(Text, { dimColor: true, children: askNext })] }));
 }

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { TurnUsageSummary } from '../adapter/ports/channel-view.js';
+/**
+ * The turn ledger as display segments: tokens in/out, the cache split (only
+ * when the backend reported cache tokens — an unreported cache is absent,
+ * not zero), duration, the model when asked for and noted, retries, and a
+ * marker on an interrupted or failed turn whose ledger is partial. Shared by
+ * the transcript row and the /tokens and /status reports so the three read
+ * the same.
+ */
+export declare function turnUsageParts(usage: TurnUsageSummary, options?: {
+    readonly model?: boolean;
+}): string[];
+/**
+ * The quiet right-aligned line that closes a turn. It hugs the right margin
+ * one notch dimmer than the thinking timer, and names the model only when it
+ * changed since the previous turn (`noteModel`, decided at projection time).
+ * Formatting happens at render time so a language switch relabels history;
+ * the payload itself is immutable, which is what the per-row memo compares.
+ */
+export declare function TurnUsageRow({ usage }: {
+    usage: TurnUsageSummary;
+}): React.ReactNode;
+//# sourceMappingURL=TurnUsageRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TurnUsageRow.d.ts","sourceRoot":"","sources":["../../../src/components/TurnUsageRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAA;AAExE;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,GAAE;IAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,EAAE,CAiB5G;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,gBAAgB,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAIpF"}

package/lib/types/components/TurnUsageRow.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '../ui.js';
+import { t } from '../i18n.js';
+import { formatDuration, formatTokens } from '../terminal-utils/format.js';
+/**
+ * The turn ledger as display segments: tokens in/out, the cache split (only
+ * when the backend reported cache tokens — an unreported cache is absent,
+ * not zero), duration, the model when asked for and noted, retries, and a
+ * marker on an interrupted or failed turn whose ledger is partial. Shared by
+ * the transcript row and the /tokens and /status reports so the three read
+ * the same.
+ */
+export function turnUsageParts(usage, options = {}) {
+    const parts = [
+        `↑${formatTokens(usage.input)}`,
+        `↓${formatTokens(usage.output)}`,
+    ];
+    if (usage.cacheKnown && usage.cacheRead + usage.cacheWrite > 0) {
+        const cacheParts = [];
+        if (usage.cacheRead > 0)
+            cacheParts.push(t('usage-cache-read', { n: formatTokens(usage.cacheRead) }));
+        if (usage.cacheWrite > 0)
+            cacheParts.push(t('usage-cache-write', { n: formatTokens(usage.cacheWrite) }));
+        parts.push(t('usage-cache-segment', { parts: cacheParts.join('/') }));
+    }
+    parts.push(formatDuration(usage.durationMs));
+    if (options.model === true && usage.noteModel === true && usage.model !== undefined)
+        parts.push(usage.model);
+    if (usage.retries > 0)
+        parts.push(t('usage-retry-segment', { n: usage.retries }));
+    if (usage.outcome === 'interrupted')
+        parts.push(t('usage-turn-outcome-interrupted'));
+    else if (usage.outcome === 'error')
+        parts.push(t('usage-turn-outcome-error'));
+    return parts;
+}
+/**
+ * The quiet right-aligned line that closes a turn. It hugs the right margin
+ * one notch dimmer than the thinking timer, and names the model only when it
+ * changed since the previous turn (`noteModel`, decided at projection time).
+ * Formatting happens at render time so a language switch relabels history;
+ * the payload itself is immutable, which is what the per-row memo compares.
+ */
+export function TurnUsageRow({ usage }) {
+    return (_jsx(Text, { color: "subtle", wrap: "truncate", children: turnUsageParts(usage, { model: true }).join(' · ') }));
+}

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

@@ -5,7 +5,8 @@ import type { SpinnerMode } from './Spinner/spinnerMode.js';
  * input while a turn is in flight. The channel feeds the mode, token count,
  * and thinking status while this component owns the compact presentation.
  *
- * Random verb is picked once per turn (per mount of the spinner).
+ * A random verb is picked per phase (per mode change), so the copy tracks
+ * what the turn is actually doing.
  */
 export declare function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, suffix, }: {
     mode: SpinnerMode;

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

@@ -1 +1 @@
-{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAM3D;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,MAAM,GACP,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;IAC1C;8DAC0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,KAAK,CAAC,SAAS,CA4BlB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}
+{"version":3,"file":"WorkingSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/WorkingSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAmB3D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,MAAM,GACP,EAAE;IACD,IAAI,EAAE,WAAW,CAAA;IACjB,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACxC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5C,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACzC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IACjD,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAAA;IAC1C;8DAC0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,KAAK,CAAC,SAAS,CAgClB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,OAAO,GAClB,UAAU,GAAG,MAAM,GAAG,IAAI,CA6C5B"}

package/lib/types/components/WorkingSpinner.js

@@ -3,20 +3,37 @@ import { useEffect, useRef, useState } from 'react';
 import { useTerminalSize } from '../ink/hooks/use-terminal-size.js';
 import { Box } from '../ui.js';
 import { SpinnerAnimationRow } from './Spinner/SpinnerAnimationRow.js';
-import { SPINNER_VERBS } from '../terminal-utils/spinnerVerbs.js';
 import { tOr } from '../i18n.js';
 import { sample } from 'lodash-es';
+/**
+ * Which verbs fit which spinner phase: the working line's copy follows the
+ * turn's stage (waiting → thinking → tools → responding) instead of one
+ * random word for the whole turn — a phase change re-picks from its pool.
+ * Words are the existing SPINNER_VERBS (i18n coverage), just bucketed.
+ */
+const VERBS_BY_MODE = {
+    requesting: ['Connecting', 'Preparing', 'Considering'],
+    thinking: ['Thinking', 'Reasoning', 'Considering', 'Planning'],
+    responding: ['Working', 'Responding', 'Building', 'Summarizing', 'Resolving', 'Testing'],
+    'tool-use': ['Analyzing', 'Reading', 'Searching', 'Reviewing', 'Checking', 'Exploring'],
+    'tool-input': ['Working', 'Responding'],
+};
 /**
  * The working spinner block shown between the transcript and the prompt
  * input while a turn is in flight. The channel feeds the mode, token count,
  * and thinking status while this component owns the compact presentation.
  *
- * Random verb is picked once per turn (per mount of the spinner).
+ * A random verb is picked per phase (per mode change), so the copy tracks
+ * what the turn is actually doing.
  */
 export function WorkingSpinner({ mode, hasActiveTools, responseLengthRef, uploadTokensRef, loadingStartTimeRef, totalPausedMsRef, pauseStartTimeRef, thinkingStatus, suffix, }) {
     const { columns } = useTerminalSize();
-    // Pick a random verb once per spinner mount (per turn).
-    const [randomVerb] = useState(() => sample(SPINNER_VERBS) ?? 'Working');
+    // Pick a random verb from the current phase's pool; a phase change
+    // re-picks (the copy mirrors the turn's stage).
+    const [randomVerb, setRandomVerb] = useState(() => sample(VERBS_BY_MODE[mode]) ?? 'Working');
+    useEffect(() => {
+        setRandomVerb(sample(VERBS_BY_MODE[mode]) ?? 'Working');
+    }, [mode]);
     const message = `${tOr(`spinner-verb-${randomVerb.toLowerCase()}`, randomVerb)}…`;
     return (_jsx(Box, { flexDirection: "column", width: "100%", alignItems: "flex-start", children: _jsx(SpinnerAnimationRow, { mode: mode, reducedMotion: false, hasActiveTools: hasActiveTools, responseLengthRef: responseLengthRef, uploadTokensRef: uploadTokensRef, message: message, messageColor: "accent", shimmerColor: "accentShimmer", loadingStartTimeRef: loadingStartTimeRef, totalPausedMsRef: totalPausedMsRef, pauseStartTimeRef: pauseStartTimeRef, spinnerSuffix: suffix === undefined ? null : suffix, verbose: true, columns: columns, thinkingStatus: thinkingStatus }) }));
 }

package/lib/types/components/approvals/ApprovalPanel.d.ts

@@ -1,24 +1,47 @@
 /**
- * The approval panel — permission prompt for the DSH
- * approval seam (`ctx.approval`). One ask per panel: a permission-colored
- * divider header naming the tool, the gated command recovered from the
- * paired tool call, the asker's reason,
- * "Allow this operation?", and a numbered Yes/No list.
+ * The approval panel — the permission prompt every backend renders
+ * through. One ask per panel: a
+ * permission-colored divider header naming the tool, the gated command, the
+ * asker's reason, "Allow this operation?", and a numbered option list.
  *
- * The protocol's outcome set is closed (allowed-once / rejected /
- * cancelled / unavailable) with no allow-always or feedback channel, so
- * the panel deliberately offers exactly two rows; Esc and Ctrl+C reject
- * (fail closed; Esc cancels the request).
+ * The options come from the request (`approval.options`); a request without
+ * them — every DSH ask — offers exactly the DSH protocol's two rows (allow
+ * once / reject), whose outcome set is closed with no allow-always or
+ * feedback channel. A backend prompt may add an allow-always row (its label
+ * says what would be remembered), hide it (`suppressAlwaysAllow`, a forcing
+ * ask rule), put the rejection first with no one-key approve
+ * (`defaultToNo`), and accept a typed reason with a rejection (`feedback`).
+ * Esc and Ctrl+C reject (fail closed; Esc cancels the request).
+ *
+ * On a prompt that takes a reason, the reason is typed into the rejection
+ * row once it has focus (↓ / Tab): there digits are text, so a reason that
+ * starts with "2" can never pick allow-always, and allow-always is never a
+ * digit shortcut — it takes focus plus Enter. The reason shows as at most
+ * two lines (its tail, where the typing happens); the full text is sent.
+ * A DSH prompt (two rows, no reason) keeps its digit shortcuts unchanged.
+ * Every decision carries the panel key, so a keystroke this panel handles
+ * after its prompt was withdrawn cannot answer the next one.
  */
 import React from 'react';
-import type { ApprovalSnapshot } from '../../dsh-adapter/approvals.js';
+import { type PermissionPanelDecision, type PermissionPanelOutcome, type PermissionPanelSnapshot } from '../../channel/permissions.js';
 export type ApprovalPanelProps = {
-    /** The approval to render (from the ApprovalStore snapshot). */
-    readonly approval: ApprovalSnapshot;
+    /** The approval to render (a permission store snapshot). */
+    readonly approval: PermissionPanelSnapshot;
     /** True when the asking agent is NOT the attached session — a background
      *  (agent view) session's ask, answered from the same single panel. */
     readonly background?: boolean;
-    readonly onDecide: (outcome: 'allowed-once' | 'rejected') => void;
+    /**
+     * The user's choice: the outcome (`allowed-once` / `rejected` for the DSH
+     * two-row prompt, plus `allowed-always`) and the picked option with any
+     * typed rejection reason.
+     */
+    readonly onDecide: (outcome: PermissionPanelOutcome, decision: PermissionPanelDecision) => void;
 };
+/**
+ * The rejection row with its reason, as at most two hard-wrapped rows: when
+ * the reason does not fit, its tail (the typing position) is shown after an
+ * ellipsis.
+ */
+export declare function feedbackRowLines(prefix: string, label: string, reason: string, columns: number): string[];
 export declare function ApprovalPanel({ approval, background, onDecide }: ApprovalPanelProps): React.ReactNode;
 //# sourceMappingURL=ApprovalPanel.d.ts.map

package/lib/types/components/approvals/ApprovalPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEtE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,CAAA;IACnC;2EACuE;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,UAAU,KAAK,IAAI,CAAA;CAClE,CAAA;AAID,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAkB,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CAuF7G"}
+{"version":3,"file":"ApprovalPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/approvals/ApprovalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,EAGL,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC7B,MAAM,8BAA8B,CAAA;AAGrC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,EAAE,uBAAuB,CAAA;IAC1C;2EACuE;IACvE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,uBAAuB,KAAK,IAAI,CAAA;CAChG,CAAA;AA4CD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAMzG;AAQD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAkB,EAAE,QAAQ,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,SAAS,CA8K7G"}