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

package/lib/types/components/questions/ProviderModelEditor.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ProviderModelEditor as ModelEditor } from '../../adapter/ports/channel-settings.js';
+import { type ClipboardRead } from '../../utils/clipboard.js';
+/** Draft-only capability form nested in /provider's model-selection question. */
+export declare function ProviderModelEditor({ model, editor, onClose, onAbort, readClipboardOverride }: {
+    readonly model: string;
+    readonly editor: ModelEditor;
+    readonly onClose: () => void;
+    readonly onAbort: () => void;
+    readonly readClipboardOverride?: () => Promise<ClipboardRead>;
+}): React.ReactNode;
+//# sourceMappingURL=ProviderModelEditor.d.ts.map

package/lib/types/components/questions/ProviderModelEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderModelEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/ProviderModelEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,mBAAmB,IAAI,WAAW,EAAE,MAAM,yCAAyC,CAAA;AAOjG,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAc5E,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,EAAE;IAC9F,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC,aAAa,CAAC,CAAA;CAC9D,GAAG,KAAK,CAAC,SAAS,CAyQlB"}

package/lib/types/components/questions/ProviderModelEditor.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { formatModelReasoning, parseModelCapacity, parseModelReasoning } from '../../channel/model-capabilities.js';
+import { capCells, cleanRenderText, flattenPasteInline } from '../../channel/sanitize.js';
+import { t } from '../../i18n.js';
+import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { Box, Text, useInput, useTerminalSize } from '../../ui.js';
+import { readClipboard } from '../../utils/clipboard.js';
+import { actionMatches } from '../../utils/keymap.js';
+import { isPlainReturnInput } from '../../utils/modifiers.js';
+import { Divider } from '../design-system/Divider.js';
+import { POINTER } from '../../terminal-utils/figures.js';
+import { listWindow } from '../listWindow.js';
+const FIELDS = ['contextWindow', 'maxTokens', 'reasoningEfforts', 'input', 'save'];
+const INPUT_MODES = ['inherit', 'text', 'image'];
+const FIELD_MAX_POINTS = 1024;
+/** Draft-only capability form nested in /provider's model-selection question. */
+export function ProviderModelEditor({ model, editor, onClose, onAbort, readClipboardOverride }) {
+    const initial = React.useMemo(() => editor.read(model), [editor, model]);
+    const initialText = {
+        contextWindow: String(initial.values.contextWindow ?? ''),
+        maxTokens: String(initial.values.maxTokens ?? ''),
+        reasoningEfforts: flattenPasteInline(formatModelReasoning(initial.values.reasoningEfforts)),
+    };
+    const initialMode = initial.values.input === undefined ? 'inherit'
+        : initial.values.input.includes('image') ? 'image' : 'text';
+    const [values, setValues] = React.useState(initialText);
+    const valuesRef = React.useRef(initialText);
+    const [cursors, setCursors] = React.useState({
+        contextWindow: [...initialText.contextWindow].length,
+        maxTokens: [...initialText.maxTokens].length,
+        reasoningEfforts: [...initialText.reasoningEfforts].length,
+    });
+    const cursorsRef = React.useRef(cursors);
+    const [focus, setFocus] = React.useState(0);
+    const focusRef = React.useRef(0);
+    const [inputMode, setInputMode] = React.useState(initialMode);
+    const inputModeRef = React.useRef(initialMode);
+    const [error, setError] = React.useState(null);
+    const closed = React.useRef(false);
+    const mounted = React.useRef(true);
+    const pasteBusy = React.useRef(false);
+    React.useEffect(() => () => { mounted.current = false; }, []);
+    const { columns, rows } = useTerminalSize();
+    const width = Math.max(1, columns - 6);
+    const compact = columns < 64;
+    const field = FIELDS[focus];
+    const textFocused = field !== 'input' && field !== 'save'
+        && (field !== 'reasoningEfforts' || editor.reasoningEditable);
+    const caretRef = useDeclaredCursor({ line: 0, column: 0, active: textFocused });
+    const { start, end } = listWindow([1, 1, 1, 1, 1], focus, Math.max(2, rows - 16));
+    const placeFocus = (next) => {
+        focusRef.current = next;
+        setFocus(next);
+        setError(null);
+    };
+    const moveFocus = (delta) => {
+        let next = (focusRef.current + delta + FIELDS.length) % FIELDS.length;
+        if (FIELDS[next] === 'reasoningEfforts' && !editor.reasoningEditable) {
+            next = (next + delta + FIELDS.length) % FIELDS.length;
+        }
+        placeFocus(next);
+    };
+    const edit = (name, value, cursor) => {
+        if ([...value].length > FIELD_MAX_POINTS) {
+            setError(t('provider-model-field-too-long', { n: FIELD_MAX_POINTS }));
+            return;
+        }
+        valuesRef.current = { ...valuesRef.current, [name]: value };
+        cursorsRef.current = { ...cursorsRef.current, [name]: cursor };
+        setValues(valuesRef.current);
+        setCursors(cursorsRef.current);
+        setError(null);
+    };
+    const insert = (name, raw) => {
+        const text = flattenPasteInline(raw);
+        const points = [...valuesRef.current[name]];
+        const at = cursorsRef.current[name];
+        points.splice(at, 0, ...text);
+        edit(name, points.join(''), at + [...text].length);
+    };
+    const cycleInput = (delta) => {
+        const next = INPUT_MODES[(INPUT_MODES.indexOf(inputModeRef.current) + delta + INPUT_MODES.length) % INPUT_MODES.length];
+        inputModeRef.current = next;
+        setInputMode(next);
+        setError(null);
+    };
+    const save = () => {
+        if (closed.current)
+            return;
+        try {
+            editor.save(model, {
+                contextWindow: parseModelCapacity(valuesRef.current.contextWindow),
+                maxTokens: parseModelCapacity(valuesRef.current.maxTokens),
+                reasoningEfforts: valuesRef.current.reasoningEfforts === initialText.reasoningEfforts
+                    ? initial.values.reasoningEfforts : parseModelReasoning(valuesRef.current.reasoningEfforts),
+                input: inputModeRef.current === initialMode ? initial.values.input
+                    : inputModeRef.current === 'inherit' ? undefined
+                        : inputModeRef.current === 'image' ? ['text', 'image'] : ['text'],
+            });
+            closed.current = true;
+            onClose();
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+    };
+    useInput((input, key, event) => {
+        // Own the whole key, including the frame that closes the editor: Enter
+        // must not also submit the surrounding model-selection question.
+        event.stopImmediatePropagation();
+        if (closed.current)
+            return;
+        if (key.escape || (key.ctrl && input === 'c')) {
+            closed.current = true;
+            if (key.ctrl)
+                onAbort();
+            else
+                onClose();
+            return;
+        }
+        const current = FIELDS[focusRef.current];
+        const isText = current !== 'input' && current !== 'save'
+            && (current !== 'reasoningEfforts' || editor.reasoningEditable);
+        // Pasted newlines/tabs are data, never save or field navigation.
+        if (key.isPasted) {
+            if (isText)
+                insert(current, input);
+            return;
+        }
+        if (actionMatches('paste', input, key)) {
+            if (!isText || pasteBusy.current)
+                return;
+            const name = current;
+            pasteBusy.current = true;
+            void (readClipboardOverride ?? readClipboard)().then(content => {
+                if (!mounted.current || closed.current || FIELDS[focusRef.current] !== name)
+                    return;
+                if (content?.kind === 'text')
+                    insert(name, content.text);
+                else
+                    setError(t('provider-model-paste-text-only'));
+            }).catch(() => {
+                if (mounted.current && !closed.current)
+                    setError(t('provider-model-paste-text-only'));
+            }).finally(() => { pasteBusy.current = false; });
+            return;
+        }
+        if (isPlainReturnInput(input, key) || (key.ctrl && input === 's')) {
+            save();
+            return;
+        }
+        if (key.upArrow || (key.tab && key.shift)) {
+            moveFocus(-1);
+            return;
+        }
+        if (key.downArrow || key.tab) {
+            moveFocus(1);
+            return;
+        }
+        if (current === 'input') {
+            if (key.leftArrow)
+                cycleInput(-1);
+            else if (key.rightArrow || input === ' ')
+                cycleInput(1);
+            return;
+        }
+        if (!isText)
+            return;
+        const name = current;
+        const points = [...valuesRef.current[name]];
+        const at = cursorsRef.current[name];
+        if (key.home) {
+            edit(name, points.join(''), 0);
+            return;
+        }
+        if (key.end) {
+            edit(name, points.join(''), points.length);
+            return;
+        }
+        if (key.ctrl && input === 'u') {
+            edit(name, '', 0);
+            return;
+        }
+        if (key.leftArrow) {
+            edit(name, points.join(''), Math.max(0, at - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            edit(name, points.join(''), Math.min(points.length, at + 1));
+            return;
+        }
+        if (key.backspace && at > 0) {
+            points.splice(at - 1, 1);
+            edit(name, points.join(''), at - 1);
+        }
+        else if (key.delete) {
+            points.splice(at, 1);
+            edit(name, points.join(''), at);
+        }
+        else if (input && !key.ctrl && !key.meta && !key.super && !key.backspace)
+            insert(name, input);
+    }, { prepend: true });
+    const labels = {
+        contextWindow: t('provider-model-context-window'),
+        maxTokens: t('provider-model-max-tokens'),
+        reasoningEfforts: t('provider-model-reasoning-efforts'),
+        input: t('provider-model-multimodal'),
+        save: t('provider-model-save'),
+    };
+    const compactLabels = {
+        contextWindow: 'ctx',
+        maxTokens: 'output',
+        reasoningEfforts: 'effort',
+        input: t('provider-model-multimodal-short'),
+        save: t('provider-model-save-short'),
+    };
+    const inheritedInputLabel = initial.defaults.input === undefined ? t('provider-model-inherit')
+        : initial.defaults.input.includes('image') ? t('provider-model-default-image') : t('provider-model-default-text');
+    const inputLabel = inputMode === 'inherit' ? inheritedInputLabel
+        : inputMode === 'image' ? t('provider-model-input-image') : t('provider-model-input-text');
+    const renderValue = (name, focused, availableWidth) => {
+        const points = [...values[name]];
+        const at = cursors[name];
+        // Keep the caret in the horizontal viewport without slicing UTF-16 or
+        // assuming one code point equals one terminal cell.
+        let first = 0;
+        while (first < at && stringWidth(points.slice(first, at).join('')) >= availableWidth)
+            first += 1;
+        const prefix = points.slice(first, at).join('');
+        const caret = points[at] ?? ' ';
+        const suffix = capCells(points.slice(at + 1).join(''), Math.max(0, availableWidth - stringWidth(prefix) - stringWidth(caret)));
+        const fallback = name === 'reasoningEfforts' ? t('provider-model-inherit')
+            : initial.defaults[name] === undefined ? t('provider-model-inherit')
+                : t('provider-model-default-capacity', { n: initial.defaults[name] });
+        if (!focused)
+            return _jsx(Text, { dimColor: points.length === 0, wrap: "truncate", children: points.length === 0 ? fallback : values[name] });
+        return _jsxs(Text, { children: [prefix, _jsx(Text, { ref: caretRef, inverse: true, children: caret }), suffix, points.length === 0 ? _jsx(Text, { dimColor: true, children: capCells(fallback, Math.max(0, availableWidth - 1)) }) : null] });
+    };
+    return _jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 2, width: "100%", children: [_jsx(Divider, { color: "permission", title: t('provider-model-editor-title') }), _jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { bold: true, wrap: "truncate", children: cleanRenderText(model, Math.max(1, columns - 4)) }) }), FIELDS.slice(start, end).map((name, index) => {
+                const absolute = start + index;
+                const focused = absolute === focus;
+                const isText = name !== 'input' && name !== 'save';
+                const valueWidth = Math.max(1, width - (compact ? 10 : 27));
+                return _jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", width: "100%", onClick: () => {
+                        if (name === 'reasoningEfforts' && !editor.reasoningEditable)
+                            return;
+                        if (name === 'save')
+                            save();
+                        else {
+                            placeFocus(absolute);
+                            if (name === 'input')
+                                cycleInput(1);
+                        }
+                    }, children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: focused ? 'accent' : undefined, dimColor: name === 'reasoningEfforts' && !editor.reasoningEditable, children: focused ? POINTER : absolute === start && start > 0 ? '↑' : absolute === end - 1 && end < FIELDS.length ? '↓' : ' ' }) }), _jsx(Box, { width: compact ? 9 : 26, flexShrink: 0, children: _jsx(Text, { bold: focused, color: focused ? 'accent' : undefined, dimColor: name === 'reasoningEfforts' && !editor.reasoningEditable, wrap: "truncate", children: compact ? compactLabels[name] : labels[name] }) }), _jsx(Box, { width: valueWidth, flexShrink: 0, overflow: "hidden", children: name === 'input'
+                                ? _jsx(Text, { wrap: "truncate", children: compact ? inputMode === 'inherit' ? initial.defaults.input?.includes('image') ? 'image default' : 'text default' : inputMode : inputLabel })
+                                : name === 'save'
+                                    ? _jsx(Text, { color: "success", wrap: "truncate", children: compact ? 'Enter' : t('provider-model-enter-to-save') })
+                                    : name === 'reasoningEfforts' && !editor.reasoningEditable
+                                        ? _jsx(Text, { dimColor: true, wrap: "truncate", children: t('provider-model-reasoning-unavailable-short') })
+                                        : renderValue(name, focused && textFocused, valueWidth) })] }, name);
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: field === 'reasoningEfforts'
+                        ? editor.reasoningEditable ? t('provider-model-reasoning-hint') : t('provider-model-reasoning-unavailable')
+                        : field === 'input' ? t('provider-model-input-hint') : t('provider-model-capacity-hint') }) }), error !== null ? _jsx(Text, { color: "error", wrap: "truncate", children: error }) : null, _jsx(Text, { dimColor: true, wrap: "truncate", children: t('hint-provider-model-editor') })] });
+}

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

@@ -18,6 +18,32 @@ export declare const ICE: Rgb;
 export declare const PALE: Rgb;
 /** Soft ice flash blue (`#C6D8F8`); stays visibly blue, never pure white. */
 export declare const FLASH: Rgb;
+/**
+ * Claude 陶土橙阶（claude 品牌开屏用，branding.ts / theme.ts 双主题共用）：
+ * 深底从正色 `#D77757` 起步、经亮橙、奔奶油橙收——三档对比拉满（用户反馈
+ * "渐变要明显、要亮"，起点不再用暗端）；浅底（claude-paper）反向：深化橙
+ * 起步、正色收（浅底上"亮"是加深）。
+ */
+export declare const EMBER: Rgb;
+export declare const EMBER_BRIGHT: Rgb;
+export declare const EMBER_PALE: Rgb;
+export declare const EMBER_LIGHT: Rgb;
+export declare const EMBER_FLASH: Rgb;
+export declare const EMBER_PAPER: Rgb;
+export declare const EMBER_PAPER_FLASH: Rgb;
+/**
+ * Codex 薰衣草紫阶（codex 品牌开屏用，branding.ts / theme.ts 双主题共用）：
+ * 与 claude 同构——深底从亮紫起步、经淡紫、奔近白的薰衣草收（三档对比拉
+ * 满）；浅底（codex-paper）反向：深化紫起步、正色收（浅底上"亮"是加深）。
+ */
+export declare const LAVENDER: Rgb;
+export declare const LAVENDER_BRIGHT: Rgb;
+export declare const LAVENDER_SOFT: Rgb;
+export declare const LAVENDER_PALE: Rgb;
+export declare const LAVENDER_LIGHT: Rgb;
+export declare const LAVENDER_FLASH: Rgb;
+export declare const LAVENDER_PAPER: Rgb;
+export declare const LAVENDER_PAPER_FLASH: Rgb;
 /**
  * Paint `word` with a 10-column highlight window sweeping across it. The
  * window advances one column per `stepMs` and the brightness pulse follows

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

@@ -1 +1 @@
-{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;iDAEiD;AACjD,eAAO,MAAM,KAAK,EAAE,GAA+B,CAAA;AACnD,0CAA0C;AAC1C,eAAO,MAAM,GAAG,EAAE,GAAgC,CAAA;AAClD,2CAA2C;AAC3C,eAAO,MAAM,IAAI,EAAE,GAAgC,CAAA;AACnD,6EAA6E;AAC7E,eAAO,MAAM,KAAK,EAAE,GAAgC,CAAA;AAEpD;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,SAAK,GAAG,MAAM,CAehG"}
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/components/shimmer.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;iDAEiD;AACjD,eAAO,MAAM,KAAK,EAAE,GAA+B,CAAA;AACnD,0CAA0C;AAC1C,eAAO,MAAM,GAAG,EAAE,GAAgC,CAAA;AAClD,2CAA2C;AAC3C,eAAO,MAAM,IAAI,EAAE,GAAgC,CAAA;AACnD,6EAA6E;AAC7E,eAAO,MAAM,KAAK,EAAE,GAAgC,CAAA;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,GAA+B,CAAA;AACnD,eAAO,MAAM,YAAY,EAAE,GAAgC,CAAA;AAC3D,eAAO,MAAM,UAAU,EAAE,GAAgC,CAAA;AACzD,eAAO,MAAM,WAAW,EAAE,GAAgC,CAAA;AAC1D,eAAO,MAAM,WAAW,EAAE,GAAgC,CAAA;AAC1D,eAAO,MAAM,WAAW,EAAE,GAA+B,CAAA;AACzD,eAAO,MAAM,iBAAiB,EAAE,GAA8B,CAAA;AAE9D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,GAAgC,CAAA;AACvD,eAAO,MAAM,eAAe,EAAE,GAAgC,CAAA;AAC9D,eAAO,MAAM,aAAa,EAAE,GAAgC,CAAA;AAC5D,eAAO,MAAM,aAAa,EAAE,GAAgC,CAAA;AAC5D,eAAO,MAAM,cAAc,EAAE,GAAgC,CAAA;AAC7D,eAAO,MAAM,cAAc,EAAE,GAAgC,CAAA;AAC7D,eAAO,MAAM,cAAc,EAAE,GAA+B,CAAA;AAC5D,eAAO,MAAM,oBAAoB,EAAE,GAAgC,CAAA;AAEnE;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,SAAK,GAAG,MAAM,CAehG"}

package/lib/types/components/shimmer.js

@@ -12,6 +12,32 @@ export const ICE = { r: 147, g: 190, b: 255 };
 export const PALE = { r: 215, g: 228, b: 255 };
 /** Soft ice flash blue (`#C6D8F8`); stays visibly blue, never pure white. */
 export const FLASH = { r: 198, g: 216, b: 248 };
+/**
+ * Claude 陶土橙阶（claude 品牌开屏用，branding.ts / theme.ts 双主题共用）：
+ * 深底从正色 `#D77757` 起步、经亮橙、奔奶油橙收——三档对比拉满（用户反馈
+ * "渐变要明显、要亮"，起点不再用暗端）；浅底（claude-paper）反向：深化橙
+ * 起步、正色收（浅底上"亮"是加深）。
+ */
+export const EMBER = { r: 215, g: 119, b: 87 }; // #D77757 陶土橙（深底起点/正色）
+export const EMBER_BRIGHT = { r: 239, g: 169, b: 126 }; // #EFA97E 亮橙（深底中档/浅底终点）
+export const EMBER_PALE = { r: 251, g: 214, b: 176 }; // #FBD6B0 奶油橙（深底终点，够亮）
+export const EMBER_LIGHT = { r: 230, g: 138, b: 105 }; // #E68A69 亮橙（浅底终点档）
+export const EMBER_FLASH = { r: 245, g: 201, b: 180 }; // #F5C9B4 暖阳高光（深底）
+export const EMBER_PAPER = { r: 201, g: 100, b: 66 }; // #C96442 深化橙（浅底起点）
+export const EMBER_PAPER_FLASH = { r: 184, g: 87, b: 56 }; // #B85738 浅底高光
+/**
+ * Codex 薰衣草紫阶（codex 品牌开屏用，branding.ts / theme.ts 双主题共用）：
+ * 与 claude 同构——深底从亮紫起步、经淡紫、奔近白的薰衣草收（三档对比拉
+ * 满）；浅底（codex-paper）反向：深化紫起步、正色收（浅底上"亮"是加深）。
+ */
+export const LAVENDER = { r: 166, g: 155, b: 232 }; // #A69BE8 薰衣草紫（正色/浅底终点）
+export const LAVENDER_BRIGHT = { r: 197, g: 191, b: 238 }; // #C5BFEE 亮紫（深底起点）
+export const LAVENDER_SOFT = { r: 217, g: 213, b: 243 }; // #D9D5F3 淡紫（深底中档）
+export const LAVENDER_PALE = { r: 226, g: 222, b: 248 }; // #E2DEF8 近白薰衣草（深底终点，够亮）
+export const LAVENDER_LIGHT = { r: 138, g: 126, b: 217 }; // #8A7ED9 深亮紫（浅底中档）
+export const LAVENDER_FLASH = { r: 207, g: 199, b: 245 }; // #CFC7F5 高光（深底）
+export const LAVENDER_PAPER = { r: 107, g: 92, b: 200 }; // #6B5CC8 深化紫（浅底起点）
+export const LAVENDER_PAPER_FLASH = { r: 122, g: 106, b: 214 }; // #7A6AD6 浅底高光
 /**
  * Paint `word` with a 10-column highlight window sweeping across it. The
  * window advances one column per `stepMs` and the brightness pulse follows

package/lib/types/components/sidePanel/InfoPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/InfoPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAwB5C,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAsJ1F"}
+{"version":3,"file":"InfoPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/InfoPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAwB5C,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CA2J1F"}

package/lib/types/components/sidePanel/InfoPanel.js

@@ -20,7 +20,7 @@ import { formatTokens } from '../../terminal-utils/format.js';
 import { formatContextUsage } from '../../tuiDisplayPrefs.js';
 import { modeDisplayName } from '../../sessionModes.js';
 import { estimateSessionCostSnapshotCny, isDeepSeekOfficialProvider, isPeakHour } from '../../deepseekPricing.js';
-import { formatCacheHitRate } from '../../screens/StatusLine.js';
+import { formatCacheHitRate, formatCostReport } from '../../screens/StatusLine.js';
 import { contextPressureStep, speedColor } from '../../screens/StatusMetrics.js';
 import { formatProject } from '../../sessions/format.js';
 import { homeDir } from '../../utils/paths.js';
@@ -81,8 +81,11 @@ export function InfoPanel({ width, height, focused, visible }) {
         : undefined;
     const contextStep = contextPct !== undefined ? contextPressureStep(contextPct) : undefined;
     const cacheText = formatCacheHitRate(usage) ?? none;
-    // 花费：与状态栏同门控——官方 DeepSeek 路由 + 有计价金额或未计价 token。
-    const estimate = isDeepSeekOfficialProvider(channel.provider)
+    // 花费：与状态栏同一规则——后端自报的会话花费（Claude `total_cost_usd`）
+    // 优先；否则官方 DeepSeek 路由 + 有计价金额或未计价 token。
+    // oxlint-disable-next-line typescript/no-unnecessary-condition -- partial embedder channels omit the report
+    const costReport = channel.costReport;
+    const estimate = costReport === undefined && isDeepSeekOfficialProvider(channel.provider)
         ? estimateSessionCostSnapshotCny({
             provider: channel.provider,
             main: channel.mainCost ?? {},
@@ -91,11 +94,13 @@ export function InfoPanel({ width, height, focused, visible }) {
             fallbackModel: channel.model,
         })
         : undefined;
-    const costText = estimate !== undefined && (estimate.total > 0 || estimate.unpricedTokens > 0)
-        ? estimate.total > 0
-            ? '¥' + estimate.total.toFixed(2) + ' ' + t(isPeakHour() ? 'cost-now-peak' : 'cost-now-idle')
-            : t('cost-unpriced', { tokens: formatTokens(estimate.unpricedTokens) })
-        : none;
+    const costText = costReport !== undefined
+        ? formatCostReport(costReport)
+        : estimate !== undefined && (estimate.total > 0 || estimate.unpricedTokens > 0)
+            ? estimate.total > 0
+                ? '¥' + estimate.total.toFixed(2) + ' ' + t(isPeakHour() ? 'cost-now-peak' : 'cost-now-idle')
+                : t('cost-unpriced', { tokens: formatTokens(estimate.unpricedTokens) })
+            : none;
     const tpsText = channel.tps !== undefined
         ? speedColor(channel.tps, String(Math.round(channel.tps))) + ' tps'
         : none;

package/lib/types/components/sidePanel/PanelBar.d.ts

@@ -1,26 +1,8 @@
-/**
- * PanelBar: the 1-row tab strip on top of the side panel (design doc §6.1).
- *
- * Visual language:
- * - the ACTIVE panel is a capsule: ‹ Title ›, accent + bold — one glance
- *   tells you where you are;
- * - inactive panels collapse to their single-cell icon (or first letter),
- *   dim, with a status dot only when the panel has something to say
- *   (● unread/active, ! warning, × error — theme colors, never emoji);
- * - overflow is windowed, never a trail of dots: what does not fit
- *   becomes a dim +N on the right edge.
- *
- * The bar's width demand is content-independent (capsule titles truncate
- * to a fixed budget, icons are fixed cells) — a panel MUST never make the
- * column want to resize (design doc §16.6).
- */
 import React from 'react';
 export type PanelBadgeLevel = 'info' | 'warning' | 'error';
 export interface PanelBarTab {
     readonly id: string;
     readonly title: string;
-    /** Single-cell glyph; falls back to the title's first letter. */
-    readonly icon?: string;
     readonly badge?: {
         readonly level: PanelBadgeLevel;
         readonly unread: number;
@@ -30,15 +12,9 @@ export interface PanelBarProps {
     readonly tabs: readonly PanelBarTab[];
     readonly activeId: string | undefined;
     readonly width: number;
-    /** Focus is in the right column: the bar brightens to match the divider. */
     readonly focused: boolean;
-    /** The ACTIVE panel has a fullscreen form (capabilities.fullscreen): the
-     *  bar reserves the two trailing cells and draws the clickable ⤢. */
     readonly canExpand?: boolean;
-    /** Click/Enter on ⤢: switch the active panel to its fullscreen surface. */
     readonly onExpand?: () => void;
-    /** Click on a tab (icon or capsule): make that panel active. The host
-     *  funnels this into the same openPanel() path the keyboard uses. */
     readonly onSelect?: (id: string) => void;
 }
 export declare function PanelBar({ tabs, activeId, width, focused, canExpand, onExpand, onSelect }: PanelBarProps): React.ReactNode;

package/lib/types/components/sidePanel/PanelBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelBar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;AAE1D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,iEAAiE;IACjE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACrF;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB;yEACqE;IACrE,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B;yEACqE;IACrE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AA8BD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAqH1H"}
+{"version":3,"file":"PanelBar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;AAE1D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACrF;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAuED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAkG1H"}

package/lib/types/components/sidePanel/PanelBar.js

@@ -1,32 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-/**
- * PanelBar: the 1-row tab strip on top of the side panel (design doc §6.1).
- *
- * Visual language:
- * - the ACTIVE panel is a capsule: ‹ Title ›, accent + bold — one glance
- *   tells you where you are;
- * - inactive panels collapse to their single-cell icon (or first letter),
- *   dim, with a status dot only when the panel has something to say
- *   (● unread/active, ! warning, × error — theme colors, never emoji);
- * - overflow is windowed, never a trail of dots: what does not fit
- *   becomes a dim +N on the right edge.
- *
- * The bar's width demand is content-independent (capsule titles truncate
- * to a fixed budget, icons are fixed cells) — a panel MUST never make the
- * column want to resize (design doc §16.6).
- */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text } from '../../ui.js';
 import { stringWidth } from '../../ink/stringWidth.js';
-/** Capsule title budget keeps one long plugin title from eating the bar. */
-const ACTIVE_TITLE_MAX = 12;
-function badgeGlyph(level) {
-    if (level === 'warning')
-        return '!';
-    if (level === 'error')
-        return '×';
-    return '●';
-}
+import { useTooltip } from '../Tooltip.js';
 function badgeColor(level) {
     if (level === 'warning')
         return 'warning';
@@ -40,65 +16,67 @@ function truncateCells(text, maxCells) {
     let out = '';
     let cells = 0;
     for (const char of text) {
-        const w = stringWidth(char);
-        if (cells + w > Math.max(1, maxCells - 1))
+        const width = stringWidth(char);
+        if (cells + width > Math.max(1, maxCells - 1))
             break;
         out += char;
-        cells += w;
+        cells += width;
     }
     return out + '…';
 }
+function ActiveTitle({ title, left, width, focused }) {
+    const clipped = stringWidth(title) > width;
+    const tooltip = useTooltip(title);
+    return (_jsx(Box, { position: "absolute", left: left, top: 0, width: width, height: 1, justifyContent: "center", overflow: "hidden", ...(clipped ? tooltip : {}), children: _jsx(Text, { bold: true, color: focused ? 'accent' : 'inactive', wrap: "truncate-end", children: truncateCells(title, width) }) }));
+}
+function PanelDot({ tab, left, width, focused, hovered, onHover, onSelect }) {
+    const tooltip = useTooltip(tab.title);
+    const unread = tab.badge?.unread ?? 0;
+    const label = (tab.badge == null ? '○' : '●') + (unread > 0 ? String(unread) : '');
+    return (_jsx(Box, { position: "absolute", left: left, top: 0, width: width, height: 1, flexShrink: 0, justifyContent: "center", ...tooltip, onMouseEnter: event => { tooltip.onMouseEnter(event); onHover(tab.id); }, onMouseLeave: () => { tooltip.onMouseLeave(); onHover(null); }, onClick: onSelect === undefined ? undefined : event => {
+            event.stopImmediatePropagation();
+            onSelect(tab.id);
+        }, children: _jsx(Text, { bold: hovered, dimColor: !hovered && tab.badge == null && !focused, color: tab.badge != null ? badgeColor(tab.badge.level) : hovered || focused ? 'accent' : undefined, children: label }) }));
+}
 export function PanelBar({ tabs, activeId, width, focused, canExpand, onExpand, onSelect }) {
     const [expandHovered, setExpandHovered] = React.useState(false);
-    // Mouse feedback is per-tab: the bar is the only place where a click
-    // switches WHAT the whole right column shows, so it must read as clickable
-    // (hover brightens the glyph; the click path mirrors the ←/→ host keys).
     const [hoveredTab, setHoveredTab] = React.useState(null);
-    // The ⤢ affordance lives in the bar's own row (design: the panel column's
-    // chrome is fixed-height — a panel must never make the column want to
-    // resize). Reserve its two cells (one gap + one glyph) up front so tab
-    // windowing and the +N marker stay honest at every width.
-    const barWidth = Math.max(0, width - (canExpand === true ? 2 : 0));
-    // Windowing: the active tab is always rendered; inactive tabs fit in
-    // order around it and whatever remains folds into +N on the right.
-    const active = tabs.find(tab => tab.id === activeId) ?? tabs[0];
-    const segments = [];
-    let hidden = 0;
-    let used = 0;
-    const moreCells = (n) => stringWidth('+' + String(n)) + 1;
-    for (const tab of tabs) {
-        const isActive = active !== undefined && tab.id === active.id;
-        // Budget per segment includes the 1-col gap rendered between them
-        // (marginRight), otherwise the +N badge gets clipped at full bars.
-        const cells = (isActive ? Math.min(stringWidth(tab.title), ACTIVE_TITLE_MAX) + 4 : 2) + (segments.length > 0 ? 1 : 0);
-        // Reserve room for the eventual +N badge while tabs remain after this one.
-        const remaining = tabs.length - segments.length - hidden - 1;
-        const reserve = remaining > 0 ? moreCells(remaining) : 0;
-        if (!isActive && used + cells + reserve > barWidth) {
-            hidden += 1;
-            continue;
+    const activeIndex = Math.max(0, tabs.findIndex(tab => tab.id === activeId));
+    const active = tabs[activeIndex];
+    const hasArrows = tabs.length > 1;
+    const contentWidth = Math.max(0, width - 2);
+    const arrowWidth = hasArrows ? 1 : 0;
+    const expandWidth = canExpand === true ? 2 : 0;
+    const middleStart = arrowWidth;
+    const middleWidth = Math.max(0, contentWidth - arrowWidth * 2 - expandWidth);
+    const dots = [];
+    for (let distance = 1; dots.length < tabs.length - 1; distance += 1) {
+        dots.push({ tab: tabs[(activeIndex + distance) % tabs.length], side: 'right' });
+        if (dots.length < tabs.length - 1) {
+            dots.push({ tab: tabs[(activeIndex - distance + tabs.length) % tabs.length], side: 'left' });
         }
-        used += cells;
-        const hovered = hoveredTab === tab.id;
-        segments.push({
-            key: tab.id,
-            node: isActive ? (_jsxs(Text, { bold: true, underline: hovered, color: hovered || focused ? 'accent' : 'inactive', wrap: "truncate-end", children: ['‹ ', truncateCells(tab.title, ACTIVE_TITLE_MAX), ' ›'] })) : (_jsxs(Text, { bold: hovered, dimColor: !hovered && tab.badge == null, color: tab.badge != null ? badgeColor(tab.badge.level) : hovered ? 'accent' : undefined, children: [(tab.icon ?? tab.title.slice(0, 1)).slice(0, 1), tab.badge != null ? badgeGlyph(tab.badge.level) : ''] })),
-            // Every tab is clickable: on an inactive one it switches the column,
-            // on the active one it just takes the focus (same three-state as the
-            // Ctrl+B smart toggle, minus the closing step).
-            clickable: onSelect !== undefined,
-            onHover: (next) => setHoveredTab(previous => (next ? tab.id : previous === tab.id ? null : previous)),
-        });
     }
-    return (_jsxs(Box, { height: 1, flexShrink: 0, paddingX: 1, overflow: "hidden", children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: segments.map((segment, index) => (_jsx(Box, { flexShrink: 0, marginRight: index < segments.length - 1 ? 1 : 0, onMouseEnter: () => { segment.onHover(true); }, onMouseLeave: () => { segment.onHover(false); }, onClick: segment.clickable
-                        ? (event) => {
-                            // Mouse contract: without this the page-level "click the
-                            // column to focus it" fallback also fires on the same event.
-                            event.stopImmediatePropagation();
-                            onSelect?.(segment.key);
-                        }
-                        : undefined, children: segment.node }, segment.key))) }), hidden > 0 && (_jsxs(Text, { dimColor: true, children: ['+', hidden] })), canExpand === true && (_jsx(Box, { flexShrink: 0, marginLeft: 1, onMouseEnter: () => { setExpandHovered(true); }, onMouseLeave: () => { setExpandHovered(false); }, onClick: (event) => {
-                    event.stopImmediatePropagation();
-                    onExpand?.();
-                }, children: _jsx(Text, { bold: expandHovered, color: expandHovered ? 'accent' : 'inactive', children: '⤢' }) }))] }));
+    const dotWidth = Math.max(2, ...dots.map(dot => stringWidth((dot.tab.badge == null ? '○' : '●') + (dot.tab.badge !== undefined && dot.tab.badge !== null && dot.tab.badge.unread > 0 ? String(dot.tab.badge.unread) : ''))));
+    const titleWidth = active === undefined
+        ? 0
+        : Math.max(6, Math.min(stringWidth(active.title), Math.max(6, middleWidth - dots.length * dotWidth)));
+    const pitch = dots.length === 0 ? 0 : Math.max(2, Math.floor((middleWidth - titleWidth) / dots.length));
+    const titleLeft = middleStart + Math.floor((middleWidth - titleWidth) / 2);
+    let rightIndex = 0;
+    let leftIndex = 0;
+    const dotPositions = dots.map(dot => {
+        const index = dot.side === 'right' ? rightIndex++ : leftIndex++;
+        return {
+            ...dot,
+            left: dot.side === 'right'
+                ? titleLeft + titleWidth + index * pitch
+                : titleLeft - (index + 1) * pitch,
+        };
+    });
+    const changePanel = (delta) => {
+        if (active === undefined || tabs.length <= 1)
+            return;
+        onSelect?.(tabs[(activeIndex + delta + tabs.length) % tabs.length].id);
+    };
+    return (_jsx(Box, { height: 1, flexShrink: 0, paddingX: 1, overflow: "hidden", children: _jsxs(Box, { width: contentWidth, height: 1, position: "relative", overflow: "hidden", flexShrink: 0, children: [active !== undefined && _jsx(ActiveTitle, { title: active.title, left: titleLeft, width: titleWidth, focused: focused }), dotPositions.map(dot => (_jsx(PanelDot, { tab: dot.tab, left: dot.left, width: pitch, focused: focused, hovered: hoveredTab === dot.tab.id, onHover: setHoveredTab, onSelect: onSelect }, dot.tab.id))), hasArrows && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: 0, top: 0, width: 1, height: 1, justifyContent: "center", onClick: event => { event.stopImmediatePropagation(); changePanel(-1); }, children: _jsx(Text, { color: focused ? 'accent' : 'inactive', children: "\u25C0" }) }), _jsx(Box, { position: "absolute", left: contentWidth - expandWidth - 1, top: 0, width: 1, height: 1, justifyContent: "center", onClick: event => { event.stopImmediatePropagation(); changePanel(1); }, children: _jsx(Text, { color: focused ? 'accent' : 'inactive', children: "\u25B6" }) })] })), canExpand === true && (_jsx(Box, { position: "absolute", left: contentWidth - 1, top: 0, width: 1, height: 1, onMouseEnter: () => { setExpandHovered(true); }, onMouseLeave: () => { setExpandHovered(false); }, onClick: event => { event.stopImmediatePropagation(); onExpand?.(); }, children: _jsx(Text, { bold: expandHovered, color: expandHovered || focused ? 'accent' : 'inactive', children: "\u2922" }) }))] }) }));
 }

package/lib/types/components/sidePanel/PanelStore.d.ts

@@ -43,7 +43,9 @@ export declare class PanelStore {
     register(definition: PanelDefinition, owner: PanelOwner): () => void;
     list(): readonly PanelEntry[];
     get(id: string): PanelEntry | undefined;
-    /** 只允许 owner 或宿主调用（调用侧自律，与 tuiStatus 相同）。 */
+    /** 只允许 owner 或宿主调用（调用侧自律，与 tuiStatus 相同）。
+     *  level/unread 都没变时不通知：适配器在每次 channel 变化（流式时每个
+     *  delta）都会调这里，每次通知都会让订阅 list() 的宿主重渲染。 */
     setBadge(id: string, badge: Omit<PanelBadge, 'latestAt'> | null): void;
     clearBadge(id: string): void;
     reportError(id: string, error: unknown): void;