@deepseek-harness-tui/dsh-tui 0.9.2 → 0.9.3

package/lib/types/screens/SessionTree.js

@@ -8,6 +8,7 @@ import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js';
 import { isMod, isPlainReturn, modLabel } from '../utils/modifiers.js';
 import { spreadRow, tailWidth, truncateWidth, wrapWidth } from '../sessions/format.js';
 import { stringWidth } from '../ink/stringWidth.js';
+import { TICK, MULTIPLICATION_X } from '../cc/figures.js';
 import { t } from '../i18n.js';
 import { droppedTurnInfo, filterTree, flattenTree, nearestVisibleIndex, TREE_FILTERS, } from '../dsh-adapter/sessionTree.js';
 /** Local HH:MM (or MM/DD HH:MM when older than this year). */
@@ -95,10 +96,19 @@ function clampPrefix(prefix, budget) {
         return '…';
     return `…${tailWidth(prefix, budget - 1)}`;
 }
-/** Rows the layout cannot do without: header, search box, hints. */
-const MANDATORY_LINES = 3;
-/** Both dividers, in the order they earn their row (header rule first). */
-const RULE_PRIORITY = [0, 1];
+/**
+ * Rows the layout cannot do without: the header, the bordered search card
+ * (three rows), the notice slot, and the hints. Everything else — the rule,
+ * the tree itself — yields before these do.
+ */
+const MANDATORY_LINES = 6;
+/**
+ * The one horizontal rule, above the hints. The search card's own border
+ * separates it from the header and the tree (the two rules that used to
+ * flank it are gone); the rule that remains lifts the hints off the content —
+ * decoration, and the first thing a short terminal drops.
+ */
+const RULE_PRIORITY = [2];
 /** Width from which the preview pane sits beside the list instead of below. */
 const SPLIT_MIN_COLUMNS = 100;
 /** Lines the bottom preview block may take on narrow terminals. */
@@ -347,6 +357,16 @@ export function SessionTree({ channel, currentSessionId, onClose, onRestoreText,
         focusIndexRef.current = at;
         setSelectedId(list[at]?.node.id ?? null);
     };
+    /**
+     * Mouse wheel over the tree walks the cursor (cursor-centered window, so
+     * rolling IS scrolling; the hover-driven preview rides along). The menu /
+     * confirm seats keep the keyboard as sole owner.
+     */
+    const handleWheel = (event) => {
+        if (seat !== 'tree')
+            return;
+        step(event.deltaY >= 0 ? 1 : -1, 1, false);
+    };
     useInput((input, key) => {
         // While an action is in flight the seat swallows every key — closing now
         // would drop the user back into a half-swapped session.
@@ -437,7 +457,9 @@ export function SessionTree({ channel, currentSessionId, onClose, onRestoreText,
     const previewBlock = seat === 'tree' && previewEntry !== null && columns < SPLIT_MIN_COLUMNS && hoverId !== null
         ? PREVIEW_BLOCK_LINES
         : 0;
-    const extraLines = (notice === undefined ? 0 : 1) + menuLines + confirmLines + previewBlock;
+    // The notice slot is mandatory (permanent): a rewind/fork report must never
+    // shift the tree by arriving.
+    const extraLines = menuLines + confirmLines + previewBlock;
     const ruleBudget = Math.max(0, Math.min(RULE_PRIORITY.length, rows - MANDATORY_LINES - extraLines));
     const rules = new Set(RULE_PRIORITY.slice(0, ruleBudget));
     const listHeight = Math.max(0, rows - MANDATORY_LINES - extraLines - rules.size);
@@ -465,17 +487,19 @@ export function SessionTree({ channel, currentSessionId, onClose, onRestoreText,
             : fitHint([t('tree-hint', { mod: modLabel }), t('tree-hint-short')], inputBudget);
     // ── Loading / busy seats ────────────────────────────────────────────────
     if (loading || busy) {
-        return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "remember", bold: true, children: truncateWidth(` ${t('tree-title')}`, inputBudget) }) }), rules.has(0) && (_jsx(Box, { flexShrink: 0, children: _jsx(Divider, { width: columns }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, children: ` ${truncateWidth(busy ? t('tree-rewinding') : t('tree-loading'), inputBudget)}` }) })] }));
+        return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "remember", bold: true, children: truncateWidth(` ${t('tree-title')}`, inputBudget) }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, children: ` ${truncateWidth(busy ? t('tree-rewinding') : t('tree-loading'), inputBudget)}` }) })] }));
     }
     // ── Render ──────────────────────────────────────────────────────────────
-    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsxs(Box, { flexShrink: 0, children: [_jsx(Text, { color: "remember", bold: true, children: header.left }), _jsx(Text, { dimColor: true, children: `${' '.repeat(header.gap)}${header.right}` })] }), rules.has(0) && (_jsx(Box, { flexShrink: 0, children: _jsx(Divider, { width: columns }) })), _jsx(Box, { flexShrink: 0, children: _jsx(SearchBox, { query: tailWidth(query, inputBudget), isFocused: seat === 'tree', isTerminalFocused: isTerminalFocused, placeholder: truncateWidth(t('tree-search'), inputBudget), borderless: true }) }), _jsxs(Box, { flexGrow: 1, flexShrink: 1, children: [_jsxs(Box, { flexDirection: "column", width: listWidth, height: listHeight, flexShrink: 0, children: [visible.length === 0 && (_jsx(Text, { dimColor: true, italic: true, children: ` ${truncateWidth(t('tree-empty'), Math.max(0, listWidth - 2))}` })), windowed.map((flatNode, index) => (_jsx(TreeRow, { flatNode: flatNode, meta: data?.sessions.get(flatNode.node.sessionId), liveSessionId: currentSessionId, width: listWidth, focused: windowStart + index === focusIndex, onActivePath: data?.activePath.has(flatNode.node.id) === true, onHover: setHoverId, onClick: () => {
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsxs(Box, { flexShrink: 0, children: [_jsx(Text, { color: "remember", bold: true, children: header.left }), _jsx(Text, { dimColor: true, children: `${' '.repeat(header.gap)}${header.right}` })] }), _jsx(Box, { flexShrink: 0, children: _jsx(SearchBox, { query: tailWidth(query, inputBudget), isFocused: seat === 'tree', isTerminalFocused: isTerminalFocused, placeholder: truncateWidth(t('tree-search'), inputBudget) }) }), _jsxs("ink-box", { style: { flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden' }, onWheel: handleWheel, children: [_jsxs(Box, { flexDirection: "column", width: listWidth, height: listHeight, flexShrink: 0, children: [visible.length === 0 && (_jsx(Text, { dimColor: true, italic: true, children: ` ${truncateWidth(t('tree-empty'), Math.max(0, listWidth - 2))}` })), windowed.map((flatNode, index) => (_jsx(TreeRow, { flatNode: flatNode, meta: data?.sessions.get(flatNode.node.sessionId), liveSessionId: currentSessionId, width: listWidth, focused: windowStart + index === focusIndex, onActivePath: data?.activePath.has(flatNode.node.id) === true, onHover: setHoverId, onClick: () => {
                                     // Click = focus + open the action menu (the mouse path to
                                     // every action this screen offers); the menu's own rows
                                     // execute.
                                     setSelectedId(flatNode.node.id);
                                     setMenuNodeId(flatNode.node.id);
                                     setMenuIndex(0);
-                                } }, flatNode.node.id)))] }), splitPreview && previewEntry !== null && (_jsx(PreviewPane, { entry: previewEntry, meta: data?.sessions.get(previewEntry.sessionId), width: previewWidth, height: listHeight, liveSessionId: currentSessionId, now: Date.now() }))] }), previewBlock > 0 && previewEntry !== null && (_jsx(PreviewPane, { entry: previewEntry, meta: data?.sessions.get(previewEntry.sessionId), width: columns, height: previewBlock, liveSessionId: currentSessionId, now: Date.now(), compact: true })), notice !== undefined && (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: notice.tone === 'error' ? 'error' : 'success', children: ` ${truncateWidth(notice.text, inputBudget)}` }) })), seat === 'menu' && menuEntry !== null && (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "remember", children: ` ${truncateWidth(`❰ ${menuEntry.text}`, inputBudget)}` }) }), options.map((option, index) => (_jsx(MenuOptionRow, { option: option, highlighted: index === menuIndex, width: inputBudget, onClick: () => {
+                                } }, flatNode.node.id)))] }), splitPreview && previewEntry !== null && (_jsx(PreviewPane, { entry: previewEntry, meta: data?.sessions.get(previewEntry.sessionId), width: previewWidth, height: listHeight, liveSessionId: currentSessionId, now: Date.now() }))] }), previewBlock > 0 && previewEntry !== null && (_jsx(PreviewPane, { entry: previewEntry, meta: data?.sessions.get(previewEntry.sessionId), width: columns, height: previewBlock, liveSessionId: currentSessionId, now: Date.now(), compact: true })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: notice?.tone === 'error' ? 'error' : 'success', children: notice === undefined
+                        ? ' '
+                        : ` ${notice.tone === 'error' ? MULTIPLICATION_X : TICK} ${truncateWidth(notice.text, inputBudget - 2)}` }) }), seat === 'menu' && menuEntry !== null && (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "remember", children: ` ${truncateWidth(`❰ ${menuEntry.text}`, inputBudget)}` }) }), options.map((option, index) => (_jsx(MenuOptionRow, { option: option, highlighted: index === menuIndex, width: inputBudget, onClick: () => {
                             setMenuIndex(index);
                             runMenuOption(option);
                         }, onHover: () => setMenuIndex(index) }, option.id)))] })), seat === 'confirm' && confirmState !== null && (_jsxs(Box, { flexShrink: 0, flexDirection: "column", 
@@ -484,7 +508,7 @@ export function SessionTree({ channel, currentSessionId, onClose, onRestoreText,
                             ? t('tree-confirm-adopt', { text: confirmState.entry.text })
                             : confirmState.droppedEntries !== undefined && confirmState.droppedEntries > 0
                                 ? t('tree-confirm-drop', { text: confirmState.entry.text, n: confirmState.droppedEntries })
-                                : t('tree-confirm-rewind', { text: confirmState.entry.text }), inputBudget)}` }), confirmState.dropsBranch === true && (_jsx(Text, { color: "error", children: ` ${truncateWidth(t('tree-confirm-drops-branch'), inputBudget)}` }))] })), rules.has(1) && (_jsx(Box, { flexShrink: 0, children: _jsx(Divider, { width: columns }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: hint }) }) })] }));
+                                : t('tree-confirm-rewind', { text: confirmState.entry.text }), inputBudget)}` }), confirmState.dropsBranch === true && (_jsx(Text, { color: "error", children: ` ${truncateWidth(t('tree-confirm-drops-branch'), inputBudget)}` }))] })), rules.has(2) && (_jsx(Box, { flexShrink: 0, children: _jsx(Divider, { width: columns }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: hint }) }) })] }));
 }
 /** Index wrap helper for the menu cursor. */
 function wrapIndex(current, by, count) {

package/lib/types/screens/Settings.d.ts

@@ -6,12 +6,14 @@ import type { Channel } from '../dsh-adapter/channel.js';
  * The TUI owns only presentation here: plugin-declared sections from the
  * `tuiSettingsSections` seam render as editable forms; every write goes back
  * through the dsh settings service (revision-fenced `mutate` path ops) or the
- * credentials seam (secret fields, blank-until-typed). Namespaces no plugin
- * declared a section for stay read-only with a YAML hint — the same fallback
- * the web front door gives namespaces without a card.
+ * credentials seam (secret fields, blank-until-typed).
  *
- * Edits are staged, never settled live: typing changes a draft, and only the
- * explicit save writes the durable document (see settingsEditor.ts for why).
+ * Edits auto-save: toggling a boolean/select writes on the spot, confirming a
+ * text draft writes on Enter, and Esc just leaves — there is no save key and
+ * nothing to discard. The SettingsForm still stages drafts under the hood (its
+ * snapshot save keeps rapid successive edits serialized; see
+ * settingsEditor.ts), so the brief in-flight window and a failed save keep
+ * their `*` / badge feedback.
  */
 export declare function Settings({ channel, onClose, }: {
     channel: Channel;

package/lib/types/screens/Settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../../src/screens/Settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AA+CxD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CAkdlB"}
+{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../../src/screens/Settings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAuPxD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CAkgBlB"}

package/lib/types/screens/Settings.js

@@ -1,26 +1,84 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text, useInput, useTerminalSize } from '../ui.js';
 import { Divider } from '../components/design-system/Divider.js';
 import { HintLine } from '../components/design-system/HintLine.js';
 import { isMod, isPlainReturn } from '../utils/modifiers.js';
 import { truncateWidth } from '../sessions/format.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { POINTER, TICK, MULTIPLICATION_X } from '../cc/figures.js';
 import { getLang, t } from '../i18n.js';
 import { SettingsForm } from '../dsh-adapter/settingsEditor.js';
 /** Pick the provider-owned translation for the active language. */
 function pick(text, descriptions) {
     return descriptions?.[getLang()] ?? text;
 }
-/** Compact one-line preview of a read-only namespace's resolved value. */
-function valuePreview(value, budget) {
-    let raw;
-    try {
-        raw = JSON.stringify(value) ?? 'undefined';
-    }
-    catch {
-        raw = String(value);
+/**
+ * Pad a glyph to a fixed display width.
+ *
+ * CJK terminal fonts commonly render symbols like `❯`/`✓` (U+276F/U+2713)
+ * a full cell wide where Latin fonts render them narrow — a marker column
+ * built on raw characters then shifts every row's content by one cell when
+ * the focused glyph swaps in. Padding with `stringWidth` (display columns,
+ * not string length) pins the column to `cols` cells on either font, so
+ * rows never move when focus changes.
+ */
+function padTo(glyph, cols) {
+    const width = stringWidth(glyph);
+    return width >= cols ? glyph : glyph + ' '.repeat(cols - width);
+}
+/**
+ * One editable field row. Always exactly one line tall — the value column
+ * stays flush right (badges attach to its left), and the field's hint lives
+ * in the bottom help bar instead of a second row, so moving the focus never
+ * reflows the list. 行高亮背景由外层 CardRow 负责，本组件只管文字与 chip。
+ */
+function FieldRow({ label, kind, value, selectLabel, focused, editing, invalid, staged, onClick, onMouseEnter, }) {
+    const booleanChip = kind === 'boolean' && (value === 'true' || value === 'false');
+    return (_jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx(Text, { color: focused ? 'suggestion' : undefined, children: focused ? padTo(POINTER, 2) : '  ' }), _jsx(Text, { bold: focused, children: label }), _jsx(Box, { flexGrow: 1 }), invalid && _jsxs(Text, { color: "error", children: [t('settings-field-invalid'), " "] }), staged && !editing && _jsx(Text, { color: "suggestion", children: "* " }), booleanChip ? (_jsx(Text, { color: value === 'true' ? 'success' : 'inactive', children: value === 'true' ? `[${padTo(TICK, 2)}]` : '[  ]' })) : selectLabel !== undefined ? (_jsxs(Text, { children: [_jsx(Text, { color: focused ? 'suggestion' : 'subtle', children: '‹ ' }), _jsx(Text, { color: focused ? 'suggestion' : undefined, children: selectLabel }), _jsx(Text, { color: focused ? 'suggestion' : 'subtle', children: ' ›' })] })) : (_jsx(Text, { color: editing || focused ? 'suggestion' : undefined, dimColor: !focused && !editing && value === '', children: value }))] }));
+}
+/** A group navigation row — opens the group's subpage on Enter/click. */
+function GroupRow({ title, focused, onClick, onMouseEnter, }) {
+    return (_jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", onClick: onClick, onMouseEnter: onMouseEnter, children: [_jsx(Text, { color: focused ? 'suggestion' : undefined, children: focused ? padTo(POINTER, 2) : '  ' }), _jsx(Text, { bold: focused, children: title }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: focused ? 'suggestion' : 'subtle', children: '›' })] }));
+}
+/** 区块卡片的边框色（沿用输入框的 panel 边框 token）。 */
+const CARD_BORDER = 'promptBorder';
+/**
+ * 区块卡片的顶边：`╭─ 标题 (副标题) ────── [徽章] ╮`。
+ *
+ * 标题用区块主题色加粗、徽章保留各自的语义色（未保存/重启/失败），其余
+ * 边框线用卡片边框色。宽度按 stringWidth 精确计算（CJK 标题占 2 格），
+ * 极窄终端依次退化：先丢副标题、再丢徽章、最后截断标题。
+ */
+function CardTop({ title, subtitle, badges, columns, color = CARD_BORDER, }) {
+    const subtitleText = subtitle === undefined ? '' : ` (${subtitle})`;
+    let showSubtitle = subtitleText !== '';
+    let showBadges = badges.length > 0;
+    let titleText = title;
+    const badgesWidth = badges.reduce((sum, badge) => sum + stringWidth(`[${badge.text}]`), 0) + Math.max(0, badges.length - 1);
+    // 布局：'╭─ ' + 标题 + 副标题 + ' ' + 虚线 + [' ' + 徽章 + ' '] + '╮'
+    const used = (titleWidth, withSubtitle, withBadges) => 5 + titleWidth + (withSubtitle ? stringWidth(subtitleText) : 0) + (withBadges ? 2 + badgesWidth : 0);
+    if (used(stringWidth(titleText), showSubtitle, showBadges) + 1 > columns && showSubtitle)
+        showSubtitle = false;
+    if (used(stringWidth(titleText), showSubtitle, showBadges) + 1 > columns && showBadges)
+        showBadges = false;
+    if (used(stringWidth(titleText), showSubtitle, showBadges) + 1 > columns) {
+        titleText = truncateWidth(titleText, Math.max(4, columns - 6 - (showSubtitle ? stringWidth(subtitleText) : 0) - (showBadges ? 2 + badgesWidth : 0)));
     }
-    return truncateWidth(raw, Math.max(8, budget));
+    const dashes = Math.max(0, columns - used(stringWidth(titleText), showSubtitle, showBadges));
+    return (_jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Text, { color: color, children: '╭─ ' }), _jsx(Text, { bold: true, color: "permission", children: titleText }), showSubtitle && _jsx(Text, { dimColor: true, children: subtitleText }), _jsx(Text, { color: color, children: ` ${'─'.repeat(dashes)}` }), showBadges && (_jsxs(_Fragment, { children: [_jsx(Text, { color: color, children: ' ' }), badges.map((badge, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { color: color, children: ' ' }), _jsx(Text, { color: badge.color, children: `[${badge.text}]` })] }, index))), _jsx(Text, { color: color, children: ' ' })] })), _jsx(Text, { color: color, children: '╮' })] }));
+}
+/** 区块卡片的底边：`╰──────╯`。 */
+function CardBottom({ columns, color = CARD_BORDER }) {
+    return (_jsx(Text, { color: color, wrap: "truncate-end", children: `╰${'─'.repeat(Math.max(0, columns - 2))}╯` }));
+}
+/**
+ * 卡片内一行：`│` 左右边框 + 内容区。聚焦行的高亮背景涂在内容区上
+ * （padding 也在背景内），边框线本身不吃高亮——高亮条正好嵌在两道
+ * 竖线之间。行内容恒 1 行，与窗口化滚动逐行兼容（SuggestionCard 同族）。
+ */
+function CardRow({ children, highlight, color = CARD_BORDER, }) {
+    return (_jsxs(Box, { flexDirection: "row", height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Text, { color: color, children: "\u2502" }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minWidth: 0, paddingX: 1, backgroundColor: highlight === true ? 'selectionBg' : undefined, children: children }), _jsx(Text, { color: color, children: "\u2502" })] }));
 }
 /**
  * The settings screen — `/settings` as a screen of its own (issue #165).
@@ -28,12 +86,14 @@ function valuePreview(value, budget) {
  * The TUI owns only presentation here: plugin-declared sections from the
  * `tuiSettingsSections` seam render as editable forms; every write goes back
  * through the dsh settings service (revision-fenced `mutate` path ops) or the
- * credentials seam (secret fields, blank-until-typed). Namespaces no plugin
- * declared a section for stay read-only with a YAML hint — the same fallback
- * the web front door gives namespaces without a card.
+ * credentials seam (secret fields, blank-until-typed).
  *
- * Edits are staged, never settled live: typing changes a draft, and only the
- * explicit save writes the durable document (see settingsEditor.ts for why).
+ * Edits auto-save: toggling a boolean/select writes on the spot, confirming a
+ * text draft writes on Enter, and Esc just leaves — there is no save key and
+ * nothing to discard. The SettingsForm still stages drafts under the hood (its
+ * snapshot save keeps rapid successive edits serialized; see
+ * settingsEditor.ts), so the brief in-flight window and a failed save keep
+ * their `*` / badge feedback.
  */
 export function Settings({ channel, onClose, }) {
     // Explicit terminal size (not flexGrow) — the same rule SessionBrowser's
@@ -123,11 +183,22 @@ export function Settings({ channel, onClose, }) {
         ]);
     const effFocus = Math.min(focusIndex, Math.max(0, focusable.length - 1));
     const focused = focusable.length === 0 ? undefined : focusable[effFocus];
-    const focusedForm = focused === undefined ? undefined : forms.get(focused.ns);
-    const commitSave = (ns) => {
-        const form = forms.get(ns);
-        if (form === undefined || form.saving || !form.shell().dirty)
+    /**
+     * Save a section's staged edits right now (auto-save: every confirmed edit
+     * writes immediately — no manual save key, Esc just leaves). A save already
+     * in flight chains: the pending marker re-runs the save once it settles, and
+     * the editor's snapshot semantics keep drafts staged mid-flight alive, so
+     * rapid toggles serialize instead of racing the revision fence.
+     */
+    const pendingSaveRef = React.useRef(new Set());
+    const saveSoon = (ns) => {
+        const form = formsRef.current.get(ns);
+        if (form === undefined || !form.available || form.shell().invalid || !form.shell().dirty)
             return;
+        if (form.saving) {
+            pendingSaveRef.current.add(ns);
+            return;
+        }
         void form.save().then(ok => {
             if (!mountedRef.current)
                 return;
@@ -139,12 +210,17 @@ export function Settings({ channel, onClose, }) {
             else {
                 setNotice({ text: t('settings-save-failed', { ns }), tone: 'error' });
             }
+            if (pendingSaveRef.current.delete(ns)) {
+                const next = formsRef.current.get(ns);
+                if (next !== undefined && next.shell().dirty)
+                    saveSoon(ns);
+            }
         });
     };
-    /** Stage the next choice for a boolean/select field (Enter cycles). */
+    /** Cycle a boolean/select field and save the change immediately. */
     const cycleField = (ns, field) => {
         const form = forms.get(ns);
-        if (form === undefined || !form.available || form.saving)
+        if (form === undefined || !form.available)
             return;
         const current = form.field(field).text;
         if (field.kind === 'boolean') {
@@ -157,8 +233,8 @@ export function Settings({ channel, onClose, }) {
             const index = options.findIndex(option => option.value === current);
             form.edit(field, options[(index + 1) % options.length]?.value ?? options[0]?.value ?? '');
         }
-        setNotice(undefined);
         bump();
+        saveSoon(ns);
     };
     /**
      * Activate one focusable entry — the keyboard Enter path, shared with the
@@ -172,10 +248,8 @@ export function Settings({ channel, onClose, }) {
             setWindowStart(0);
             return;
         }
-        // A save in flight owns the section's drafts; starting an edit mid-write
-        // is exactly the lost-draft race the staged model exists to prevent.
         const form = forms.get(entry.ns);
-        if (form === undefined || !form.available || form.saving)
+        if (form === undefined || !form.available)
             return;
         if (entry.field.kind === 'boolean' || entry.field.kind === 'select') {
             cycleField(entry.ns, entry.field);
@@ -196,11 +270,21 @@ export function Settings({ channel, onClose, }) {
     useInput((input, key) => {
         if (mode === 'edit' && editing !== null) {
             if (isPlainReturn(key)) {
+                // Confirm the draft: an invalid value keeps the editor open with the
+                // error badge and a toast; a valid one saves immediately (auto-save).
                 const form = forms.get(editing.ns);
-                form?.edit(editing.field, editing.draft);
-                bump();
-                setMode('list');
-                setEditing(null);
+                if (form !== undefined) {
+                    form.edit(editing.field, editing.draft);
+                    if (form.field(editing.field).invalid) {
+                        setNotice({ text: t('settings-field-invalid'), tone: 'error' });
+                        bump();
+                        return;
+                    }
+                    bump();
+                    setMode('list');
+                    setEditing(null);
+                    saveSoon(editing.ns);
+                }
             }
             else if (key.escape) {
                 setMode('list');
@@ -227,40 +311,17 @@ export function Settings({ channel, onClose, }) {
         else if (isPlainReturn(key) && focused !== undefined) {
             activateEntry(focused);
         }
-        else if (input === 's' && focused !== undefined) {
-            commitSave(focused.ns);
-        }
-        else if (input === 'd' && focused !== undefined) {
-            if (focusedForm?.saving)
-                return;
-            focusedForm?.discard();
-            setNotice(undefined);
-            bump();
-        }
         else if (key.escape) {
             if (activeGroupSpec !== undefined) {
-                // Group navigation never settles drafts; the root page owns discard/exit.
+                // Group navigation only unwinds the page; edits save as they land.
                 setActiveGroup(null);
                 setFocusIndex(0);
                 setWindowStart(0);
                 return;
             }
-            // At the root, Esc backs out one layer at a time: staged drafts first —
-            // ANY dirty section, not just the focused one — then the screen itself.
-            // A save in flight cannot be undone from here; let it settle instead of
-            // discarding around it.
-            const dirty = [...forms.values()].filter(form => form.shell().dirty);
-            if (dirty.length > 0) {
-                if (dirty.some(form => form.saving))
-                    return;
-                for (const form of dirty)
-                    form.discard();
-                setNotice({ text: t('settings-discarded'), tone: 'success' });
-                bump();
-            }
-            else {
-                onClose();
-            }
+            // Auto-save means there is nothing left to discard: Esc leaves. A save
+            // still in flight was already dispatched — it settles on its own.
+            onClose();
         }
     });
     const renderField = (section, field, focus) => {
@@ -270,7 +331,6 @@ export function Settings({ channel, onClose, }) {
         const isFocused = focused?.kind === 'field' && focused.ns === ns && focused.field === field;
         const isEditing = isFocused && mode === 'edit' && editing !== null;
         const label = pick(field.label, field.descriptions);
-        const hint = field.hint !== undefined ? pick(field.hint, field.hintDescriptions) : undefined;
         // 鼠标：编辑态整屏不响应（草稿由键盘独占，防误触抢焦点）；列表态
         // 悬停即移动焦点（lazygit 语义——焦点就是选中），点击 = 焦点 + 该行
         // 的 Enter 动作（boolean/select 循环值，文本/secret 进编辑态）。
@@ -307,40 +367,75 @@ export function Settings({ channel, onClose, }) {
         else {
             value = state.text;
         }
-        return (_jsxs(Box, { ...rowEvents, children: [_jsx(Text, { color: isFocused ? 'suggestion' : undefined, children: isFocused ? '❯ ' : '  ' }), _jsx(Text, { bold: isFocused, children: label }), _jsx(Box, { flexGrow: 1 }), state.invalid && _jsxs(Text, { color: "error", children: [t('settings-field-invalid'), " "] }), state.overridden && _jsxs(Text, { dimColor: true, children: ["[", t('settings-badge-override'), "] "] }), form?.isStaged(field) === true && !isEditing && _jsx(Text, { color: "suggestion", children: "* " }), _jsx(Text, { color: isEditing || isFocused ? 'suggestion' : undefined, dimColor: !isFocused && !isEditing && state.text === '', children: value }), hint !== undefined && isFocused && (_jsxs(Text, { dimColor: true, children: ['\n    ', hint] }))] }));
+        // select 的值渲染成按钮 chip：用选项的本地化文案（'zh' → '中文'）而不是
+        // 存储的原始值；没命中选项时退回原始值。仅在非编辑态、值非空时提供。
+        const selectLabel = field.kind === 'select' && !isEditing && state.text !== ''
+            ? (() => {
+                const option = field.options?.find(entry => entry.value === state.text);
+                return option === undefined ? state.text : pick(option.label, option.descriptions);
+            })()
+            : undefined;
+        return (_jsx(FieldRow, { label: label, kind: field.kind, value: value, selectLabel: selectLabel, focused: isFocused, editing: isEditing, invalid: state.invalid, staged: form?.isStaged(field) === true, onClick: rowEvents?.onClick, onMouseEnter: rowEvents?.onMouseEnter }));
     };
     // ── Layout: a flat entry list with accounted line heights, windowed so the
-    // focused row is always on screen no matter how long the current page gets. ─
+    // focused row is always on screen no matter how long the current page gets.
+    // Each section renders as a bordered card (╭─ title ─╮ / │ rows │ / ╰──╯);
+    // borders are their own entries so windowing can cut a long card anywhere. ─
     const entries = [];
     let focusCursor = 0;
+    /** Badges for a section's form, rendered on the card's top border. */
+    const sectionBadges = (section) => {
+        const form = forms.get(section.ns);
+        const view = form?.namespace;
+        const shell = form?.shell();
+        const badges = [];
+        if (view === undefined)
+            badges.push({ text: t('settings-section-unavailable'), color: 'warning' });
+        if (view?.applies === 'restart')
+            badges.push({ text: t('settings-badge-restart'), color: 'warning' });
+        if (shell?.dirty === true)
+            badges.push({ text: t('settings-badge-dirty'), color: 'suggestion' });
+        if (shell?.saving === true)
+            badges.push({ text: t('settings-badge-saving'), color: 'inactive' });
+        if (shell?.failed === true)
+            badges.push({ text: t('settings-badge-failed'), color: 'error' });
+        return badges;
+    };
     const addField = (section, field) => {
-        const isFocused = focused?.kind === 'field' && focused.ns === section.ns && focused.field === field;
         const index = focusCursor;
         focusCursor += 1;
+        const isFocused = focused?.kind === 'field' && focused.ns === section.ns && focused.field === field;
+        // Field rows are always exactly one line: the hint lives in the bottom
+        // help bar, so focusing a field never reflows the list below it.
         entries.push({
             key: `field:${section.ns}:${field.path.join('.')}`,
-            lines: field.hint !== undefined && isFocused ? 2 : 1,
+            lines: 1,
             focus: index,
-            node: renderField(section, field, index),
+            node: _jsx(CardRow, { highlight: isFocused, children: renderField(section, field, index) }),
         });
     };
     if (activeSection !== undefined && activeGroupSpec !== undefined) {
         const groupFields = activeSection.fields.filter(field => field.group === activeGroupSpec.id);
+        entries.push({
+            key: 'card:group:top',
+            lines: 1,
+            node: (_jsx(CardTop, { title: pick(activeGroupSpec.title, activeGroupSpec.descriptions), subtitle: pick(activeSection.title, activeSection.descriptions), badges: sectionBadges(activeSection), columns: columns })),
+        });
         for (const field of groupFields)
             addField(activeSection, field);
         if (groupFields.length === 0) {
-            entries.push({ key: 'group:empty', lines: 1, node: _jsx(Text, { dimColor: true, children: t('settings-group-empty') }) });
+            entries.push({ key: 'group:empty', lines: 1, node: _jsx(CardRow, { children: _jsx(Text, { dimColor: true, children: t('settings-group-empty') }) }) });
         }
+        entries.push({ key: 'card:group:bottom', lines: 1, node: _jsx(CardBottom, { columns: columns }) });
     }
     else {
         sections.forEach((section, sectionIndex) => {
-            const form = forms.get(section.ns);
-            const view = form?.namespace;
-            const shell = form?.shell();
+            if (sectionIndex > 0)
+                entries.push({ key: `gap:${section.ns}`, lines: 1, node: _jsx(Text, { children: " " }) });
             entries.push({
-                key: `section:${section.ns}`,
-                lines: sectionIndex === 0 ? 1 : 2,
-                node: (_jsxs(Box, { flexDirection: "column", children: [sectionIndex > 0 && _jsx(Text, { children: " " }), _jsxs(Box, { children: [_jsx(Text, { bold: true, color: "permission", children: pick(section.title, section.descriptions) }), _jsxs(Text, { dimColor: true, children: [" (", section.ns, ")"] }), view?.applies === 'restart' && _jsxs(Text, { color: "warning", children: [" [", t('settings-badge-restart'), "]"] }), view === undefined && _jsxs(Text, { color: "warning", children: [" [", t('settings-section-unavailable'), "]"] }), shell?.dirty === true && _jsxs(Text, { color: "suggestion", children: [" [", t('settings-badge-dirty'), "]"] }), shell?.saving === true && _jsxs(Text, { dimColor: true, children: [" [", t('settings-badge-saving'), "]"] }), shell?.failed === true && _jsxs(Text, { color: "error", children: [" [", t('settings-badge-failed'), "]"] })] })] })),
+                key: `card:${section.ns}:top`,
+                lines: 1,
+                node: (_jsx(CardTop, { title: pick(section.title, section.descriptions), subtitle: section.ns, badges: sectionBadges(section), columns: columns })),
             });
             for (const field of section.fields) {
                 if (field.group === undefined)
@@ -365,32 +460,14 @@ export function Settings({ channel, onClose, }) {
                     key: `group:${section.ns}:${group.id}`,
                     lines: 1,
                     focus: index,
-                    node: (_jsxs(Box, { ...groupRowEvents, children: [_jsx(Text, { color: isFocused ? 'suggestion' : undefined, children: isFocused ? '❯ ' : '  ' }), _jsx(Text, { bold: isFocused, children: pick(group.title, group.descriptions) }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: isFocused ? 'suggestion' : undefined, children: "\u203A" })] })),
+                    node: (_jsx(CardRow, { highlight: isFocused, children: _jsx(GroupRow, { title: pick(group.title, group.descriptions), focused: isFocused, onClick: groupRowEvents?.onClick, onMouseEnter: groupRowEvents?.onMouseEnter }) })),
                 });
             }
+            entries.push({ key: `card:${section.ns}:bottom`, lines: 1, node: _jsx(CardBottom, { columns: columns }) });
         });
-        const registeredNs = new Set(sections.map(section => section.ns));
-        const readonlyNamespaces = namespaces.filter(entry => !registeredNs.has(entry.ns));
-        if (readonlyNamespaces.length > 0) {
-            entries.push({
-                key: 'readonly:heading',
-                lines: 2,
-                node: (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsx(Text, { bold: true, dimColor: true, children: t('settings-readonly-heading') })] })),
-            });
-            for (const entry of readonlyNamespaces) {
-                entries.push({
-                    key: `readonly:${entry.ns}`,
-                    lines: 1,
-                    node: (_jsxs(Box, { children: [_jsxs(Text, { children: ['  ', entry.ns] }), entry.applies === 'restart' && _jsxs(Text, { color: "warning", children: [" [", t('settings-badge-restart'), "]"] }), _jsxs(Text, { dimColor: true, children: ['  ', valuePreview(entry.value, 60)] })] })),
-                });
-            }
-            entries.push({
-                key: 'readonly:hint',
-                lines: 1,
-                node: _jsxs(Text, { dimColor: true, children: ['  ', t('settings-readonly-hint', { path: '~/.dsh/settings.yaml' })] }),
-            });
-        }
-        if (sections.length === 0 && readonlyNamespaces.length === 0) {
+        // Namespaces without a plugin-declared section are deliberately NOT
+        // listed (they used to get a read-only YAML hint; user feedback: noise).
+        if (sections.length === 0) {
             entries.push({
                 key: 'empty',
                 lines: 1,
@@ -409,8 +486,10 @@ export function Settings({ channel, onClose, }) {
         }
         totalLines += entry.lines;
     }
-    // Chrome: title row, top rule, bottom rule, hint row, plus the notice.
-    const viewport = Math.max(1, rows - 4 - (notice === undefined ? 0 : 1));
+    // Chrome: title row, footer rule, notice slot, help row. The notice slot is
+    // permanent (blank while quiet) so a save/discard toast never shifts the
+    // list above it.
+    const viewport = Math.max(1, rows - 4);
     React.useEffect(() => {
         setWindowStart(start => {
             if (focusedOffset < start)
@@ -426,9 +505,37 @@ export function Settings({ channel, onClose, }) {
         entryOffset += entry.lines;
         return start >= windowStart && start + entry.lines <= windowStart + viewport;
     });
-    const title = activeSection !== undefined && activeGroupSpec !== undefined
-        ? `${t('settings-title')} › ${pick(activeSection.title, activeSection.descriptions)} › ${pick(activeGroupSpec.title, activeGroupSpec.descriptions)}`
-        : t('settings-title');
-    const navigationHint = activeGroupSpec === undefined ? t('settings-hint-list') : t('settings-hint-group');
-    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: title }), _jsx(Box, { flexGrow: 1 }), host === undefined && _jsx(Text, { color: "warning", children: t('settings-unavailable') })] }), _jsx(Divider, {}), _jsx("ink-box", { style: { flexDirection: 'column', flexGrow: 1, flexShrink: 1, overflow: 'hidden' }, onWheel: handleWheel, children: visible.map(entry => (_jsx(React.Fragment, { children: entry.node }, entry.key))) }), _jsx(Box, { flexGrow: 1 }), notice !== undefined && (_jsx(Text, { color: notice.tone === 'error' ? 'error' : 'success', children: notice.text })), _jsx(Divider, {}), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: mode === 'edit' ? t('settings-hint-edit') : navigationHint }) })] }));
+    const inGroup = activeSection !== undefined && activeGroupSpec !== undefined;
+    const navigationHint = inGroup ? t('settings-hint-group') : t('settings-hint-list');
+    // The bottom help bar: the focused field's hint on the left (truncated
+    // first), the navigation keys pinned to the right — a truncated hint still
+    // reads, a truncated shortcut hint hides the keys nobody can guess.
+    const focusedHint = focused?.kind === 'field' && focused.field.hint !== undefined
+        ? pick(focused.field.hint, focused.field.hintDescriptions)
+        : undefined;
+    // A field whose user layer carries a value (settings.yaml) is "customized"
+    // — worth knowing, too noisy to badge every row with. It rides the help
+    // bar instead: focus the field and the suffix appears next to its hint.
+    const focusedCustomized = focused?.kind === 'field'
+        ? forms.get(focused.ns)?.field(focused.field).overridden === true
+        : false;
+    const keysLine = mode === 'edit' ? t('settings-hint-edit') : navigationHint;
+    const keysWidth = stringWidth(keysLine.replace(/\*\*/gu, ''));
+    const hintBudget = Math.max(0, columns - keysWidth - 2);
+    // The customized suffix is the whole point of this line — reserve its
+    // width first and truncate the hint instead, so it never becomes '已自…'.
+    const customText = focusedCustomized ? t('settings-field-customized') : undefined;
+    const customWidth = customText !== undefined ? stringWidth(customText) + 3 : 0; // ' · '
+    let hintText = '';
+    if (focusedHint !== undefined && hintBudget >= 12) {
+        hintText = truncateWidth(focusedHint, Math.max(0, hintBudget - customWidth));
+        if (customText !== undefined)
+            hintText += ` · ${customText}`;
+    }
+    else if (customText !== undefined && hintBudget >= 12) {
+        hintText = truncateWidth(customText, hintBudget);
+    }
+    // Header stats: where the focus sits in the current page's focusable list.
+    // (Auto-save means there is no unsaved-draft count to surface here.)
+    return (_jsxs(Box, { flexDirection: "column", width: columns, height: rows, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: t('settings-title') }), inGroup && (_jsxs(_Fragment, { children: [_jsxs(Text, { dimColor: true, children: [' › ', pick(activeSection.title, activeSection.descriptions)] }), _jsx(Text, { dimColor: true, children: ' › ' }), _jsx(Text, { bold: true, children: pick(activeGroupSpec.title, activeGroupSpec.descriptions) })] })), _jsx(Box, { flexGrow: 1 }), host === undefined && _jsx(Text, { color: "warning", children: `${t('settings-unavailable')} ` }), focusable.length > 0 && _jsx(Text, { dimColor: true, children: `${effFocus + 1}/${focusable.length}` })] }), _jsx("ink-box", { style: { flexDirection: 'column', flexGrow: 1, flexShrink: 1, overflow: 'hidden' }, onWheel: handleWheel, children: visible.map(entry => (_jsx(React.Fragment, { children: entry.node }, entry.key))) }), _jsx(Box, { flexGrow: 1 }), _jsx(Divider, {}), _jsx(Text, { color: notice?.tone === 'error' ? 'error' : 'success', children: notice === undefined ? ' ' : `${notice.tone === 'error' ? MULTIPLICATION_X : TICK} ${notice.text}` }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, italic: true, children: hintText }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: keysLine }) })] })] }));
 }

package/lib/types/screens/StatusLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusLine.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAYxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AA6EvD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAuB,EACvB,QAAgB,EAChB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CACvD,qBA8VA;AAED,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAyHD,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKvF"}
+{"version":3,"file":"StatusLine.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAcxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AA8EvD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAuB,EACvB,QAAgB,EAChB,IAAI,GACL,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CACvD,qBAuXA;AAED,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAsID,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKvF"}