@askdkc/dsh-cli 0.11.3

package/lib/types/screens/Settings.js

@@ -0,0 +1,592 @@
+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 '../terminal-utils/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;
+}
+/**
+ * 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)));
+    }
+    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).
+ *
+ * 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).
+ *
+ * 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 the full-screen
+    // session views follow inside the alternate screen's fixed-height box.
+    const { columns, rows } = useTerminalSize();
+    // channel caches the host — a fresh object per call would re-fire the
+    // host-keyed effects below on every render (an endless render loop).
+    const host = channel.settingsHost();
+    const [namespaces, setNamespaces] = React.useState(() => host?.listNamespaces() ?? []);
+    const [sections, setSections] = React.useState(() => channel.settingsSections());
+    const [mode, setMode] = React.useState('list');
+    const [editing, setEditing] = React.useState(null);
+    const [activeGroup, setActiveGroup] = React.useState(null);
+    const [focusIndex, setFocusIndex] = React.useState(0);
+    const [notice, setNotice] = React.useState(undefined);
+    /** Configured status of every secret field's credential ref. */
+    const [secrets, setSecrets] = React.useState(new Map());
+    /** First line of the windowed entry list (focus-follow scrolling). */
+    const [windowStart, setWindowStart] = React.useState(0);
+    /** Repaint after a form mutation — staged drafts live in the (React-free)
+     *  SettingsForm, so editing one changes no React state by itself. */
+    const [, bump] = React.useReducer((count) => count + 1, 0);
+    /** Async save completions must not touch state after the screen closes. */
+    const mountedRef = React.useRef(true);
+    React.useEffect(() => () => {
+        mountedRef.current = false;
+    }, []);
+    React.useEffect(() => channel.subscribeSettingsSections(() => {
+        setSections(channel.settingsSections());
+    }), [channel]);
+    // One form per section namespace. A fresh namespace view replaces the form
+    // only while it holds no edits — replacing a dirty form would discard the
+    // drafts the user is still typing.
+    const formsRef = React.useRef(new Map());
+    const forms = new Map();
+    if (host !== undefined) {
+        for (const section of sections) {
+            const view = namespaces.find(entry => entry.ns === section.ns);
+            const kept = formsRef.current.get(section.ns);
+            const reuse = kept !== undefined && (kept.namespace === view || kept.shell().dirty);
+            const form = reuse ? kept : new SettingsForm(host, view, section.fields);
+            forms.set(section.ns, form);
+        }
+    }
+    formsRef.current = forms;
+    const refresh = () => {
+        setNamespaces(host?.listNamespaces() ?? []);
+    };
+    // Secret fields report only configured/unconfigured; resolve each ref once
+    // per section-list change (and after every save, which may have set one).
+    const [secretProbe, setSecretProbe] = React.useState(0);
+    React.useEffect(() => {
+        if (host === undefined)
+            return;
+        let stale = false;
+        const pending = sections.flatMap(section => section.fields
+            .filter((field) => field.secret !== undefined)
+            .map(async (field) => [`${section.ns}:${field.path.join('.')}`, await host.credentialConfigured(field.secret.ref)]));
+        void Promise.all(pending).then(entries => {
+            if (!stale && mountedRef.current)
+                setSecrets(new Map(entries));
+        });
+        return () => {
+            stale = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [host, sections, secretProbe]);
+    const activeSection = activeGroup === null ? undefined : sections.find(section => section.ns === activeGroup.ns);
+    const activeGroupSpec = activeSection?.groups?.find(group => group.id === activeGroup?.id);
+    React.useEffect(() => {
+        if (activeGroup !== null && activeGroupSpec === undefined) {
+            setActiveGroup(null);
+            setFocusIndex(0);
+            setWindowStart(0);
+        }
+    }, [activeGroup, activeGroupSpec]);
+    /** Focusable rows in display order for the current page. */
+    const focusable = activeSection !== undefined && activeGroupSpec !== undefined
+        ? activeSection.fields
+            .filter(field => field.group === activeGroupSpec.id)
+            .map(field => ({ kind: 'field', ns: activeSection.ns, field }))
+        : sections.flatMap(section => [
+            ...section.fields
+                .filter(field => field.group === undefined)
+                .map(field => ({ kind: 'field', ns: section.ns, field })),
+            ...(section.groups ?? []).map(group => ({ kind: 'group', ns: section.ns, group })),
+        ]);
+    const effFocus = Math.min(focusIndex, Math.max(0, focusable.length - 1));
+    const focused = focusable.length === 0 ? undefined : focusable[effFocus];
+    /**
+     * 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;
+            if (ok) {
+                setNotice({ text: t('settings-saved', { ns }), tone: 'success' });
+                refresh();
+                setSecretProbe(count => count + 1);
+            }
+            else {
+                // A guarded rejection (e.g. a reserved credential ref) carries its
+                // own explanation; only unexplained failures fall back to the
+                // generic message.
+                const failureMessage = form.shell().failureMessage;
+                setNotice({ text: failureMessage ?? 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);
+            }
+        });
+    };
+    /**
+     * Cycle a boolean/select field (or any options-bearing field) and save
+     * the change immediately. ←/→ and Enter/click all route here; arrow
+     * direction selects the step, Enter/click keep the historical forward
+     * step (wrap-around). A value outside the options (a custom text spec
+     * such as the page-margin `3x1`) sits before the first option for →
+     * and after the last for ←, so either arrow re-enters the preset cycle
+     * from the natural end.
+     */
+    const cycleField = (ns, field, direction = 1) => {
+        const form = forms.get(ns);
+        if (form === undefined || !form.available)
+            return;
+        const current = form.field(field).text;
+        if (field.kind === 'boolean') {
+            form.edit(field, current === 'true' ? 'false' : 'true');
+        }
+        else {
+            const options = field.options ?? [];
+            if (options.length === 0)
+                return;
+            const index = options.findIndex(option => option.value === current);
+            const size = options.length;
+            const next = options[(((index + direction) % size) + size) % size];
+            form.edit(field, next?.value ?? options[0]?.value ?? '');
+        }
+        bump();
+        saveSoon(ns);
+    };
+    /**
+     * Activate one focusable entry — the keyboard Enter path, shared with the
+     * mouse click. Groups open their subpage; boolean/select fields cycle their
+     * value; text/secret fields enter the edit mode.
+     */
+    const activateEntry = (entry) => {
+        if (entry.kind === 'group') {
+            setActiveGroup({ ns: entry.ns, id: entry.group.id });
+            setFocusIndex(0);
+            setWindowStart(0);
+            return;
+        }
+        const form = forms.get(entry.ns);
+        if (form === undefined || !form.available)
+            return;
+        if (entry.field.kind === 'boolean' || entry.field.kind === 'select') {
+            cycleField(entry.ns, entry.field);
+        }
+        else {
+            setEditing({ ns: entry.ns, field: entry.field, draft: form.field(entry.field).text });
+            setMode('edit');
+        }
+    };
+    /** Mouse wheel moves the focus (the window is focus-follow, so moving the
+     *  focus IS scrolling); the edit mode keeps the keyboard as sole owner. */
+    const handleWheel = (event) => {
+        if (mode === 'edit')
+            return;
+        const direction = event.deltaY >= 0 ? 1 : -1;
+        setFocusIndex(previous => Math.min(Math.max(0, focusable.length - 1), Math.max(0, previous + direction)));
+    };
+    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);
+                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');
+                setEditing(null);
+            }
+            else if (key.backspace || key.delete) {
+                setEditing(state => state === null ? null : { ...state, draft: state.draft.slice(0, -1) });
+            }
+            else if (!isMod(key) && !key.meta && !key.super && input && !key.return) {
+                // Only real characters reach the draft (see the supervisor's filter).
+                const typed = input.replace(/\p{Cc}/gu, '');
+                if (typed.length > 0) {
+                    setEditing(state => state === null ? null : { ...state, draft: state.draft + typed });
+                }
+            }
+            return;
+        }
+        if (key.upArrow) {
+            setFocusIndex(Math.max(0, effFocus - 1));
+        }
+        else if (key.downArrow) {
+            setFocusIndex(Math.min(Math.max(0, focusable.length - 1), effFocus + 1));
+        }
+        else if (key.leftArrow || key.rightArrow) {
+            // ←/→ cycle an options-bearing field (select rows and hybrid
+            // text-with-options rows such as the page margin presets). Rows
+            // without options ignore the arrows; boolean rows keep Enter as
+            // their only toggle.
+            if (focused !== undefined && focused.kind === 'field') {
+                const field = focused.field;
+                if ((field.options?.length ?? 0) > 0) {
+                    cycleField(focused.ns, field, key.rightArrow === true ? 1 : -1);
+                }
+            }
+        }
+        else if (isPlainReturn(key) && focused !== undefined) {
+            activateEntry(focused);
+        }
+        else if (key.escape) {
+            if (activeGroupSpec !== undefined) {
+                // Group navigation only unwinds the page; edits save as they land.
+                setActiveGroup(null);
+                setFocusIndex(0);
+                setWindowStart(0);
+                return;
+            }
+            // 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) => {
+        const ns = section.ns;
+        const form = forms.get(ns);
+        const state = form?.field(field) ?? { text: '', overridden: false, invalid: false };
+        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);
+        // 鼠标：编辑态整屏不响应（草稿由键盘独占，防误触抢焦点）；列表态
+        // 悬停即移动焦点（lazygit 语义——焦点就是选中），点击 = 焦点 + 该行
+        // 的 Enter 动作（boolean/select 循环值，文本/secret 进编辑态）。
+        const rowEvents = mode === 'edit'
+            ? undefined
+            : {
+                onClick: () => {
+                    setFocusIndex(focus);
+                    activateEntry({ kind: 'field', ns: section.ns, field });
+                },
+                onMouseEnter: () => {
+                    setFocusIndex(focus);
+                },
+            };
+        let value;
+        if (field.secret !== undefined) {
+            const configured = secrets.get(`${ns}:${field.path.join('.')}`) === true;
+            if (isEditing) {
+                value = '•'.repeat(editing?.draft.length ?? 0) + '▌';
+            }
+            else if (state.text !== '') {
+                value = `${'•'.repeat(state.text.length)} ${t('settings-secret-staged')}`;
+            }
+            else {
+                value = configured ? t('settings-secret-set') : t('settings-secret-unset');
+            }
+        }
+        else if (isEditing) {
+            value = `${editing?.draft ?? ''}▌`;
+        }
+        else if (state.text === '') {
+            value = t('settings-field-empty');
+        }
+        else {
+            value = state.text;
+        }
+        // Options-bearing values render as chips: use the option's localized
+        // label ('zh' → '常规') instead of the stored raw value; a value that
+        // matches no option (a custom text spec such as `3x1`) falls back to
+        // the raw text. Only when not editing and the value is non-empty.
+        const selectLabel = ((field.kind === 'select' || (field.options?.length ?? 0) > 0) && !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.
+    // 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 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: 1,
+            focus: 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(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) => {
+            if (sectionIndex > 0)
+                entries.push({ key: `gap:${section.ns}`, lines: 1, node: _jsx(Text, { children: " " }) });
+            entries.push({
+                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)
+                    addField(section, field);
+            }
+            for (const group of section.groups ?? []) {
+                const isFocused = focused?.kind === 'group' && focused.ns === section.ns && focused.group === group;
+                const index = focusCursor;
+                focusCursor += 1;
+                const groupRowEvents = mode === 'edit'
+                    ? undefined
+                    : {
+                        onClick: () => {
+                            setFocusIndex(index);
+                            activateEntry({ kind: 'group', ns: section.ns, group });
+                        },
+                        onMouseEnter: () => {
+                            setFocusIndex(index);
+                        },
+                    };
+                entries.push({
+                    key: `group:${section.ns}:${group.id}`,
+                    lines: 1,
+                    focus: index,
+                    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 }) });
+        });
+        // 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,
+                node: _jsx(Text, { dimColor: true, children: t('settings-empty') }),
+            });
+        }
+    }
+    // Focus-follow window: keep the focused entry fully inside the viewport.
+    // The card chrome rows (top border + title, bottom border, section gaps)
+    // carry no focus, so the follow rules alone can push them out of the window
+    // at the ends of the scroll range — the clamp below keeps the window inside
+    // the list's physical bounds, and pins it there while the focus sits at
+    // either end of the focus order.
+    let totalLines = 0;
+    let focusedOffset = 0;
+    let focusedLines = 1;
+    let firstFocusOffset;
+    let lastFocusOffset;
+    for (const entry of entries) {
+        if (entry.focus !== undefined) {
+            if (firstFocusOffset === undefined)
+                firstFocusOffset = totalLines;
+            lastFocusOffset = totalLines;
+        }
+        if (entry.focus === effFocus) {
+            focusedOffset = totalLines;
+            focusedLines = entry.lines;
+        }
+        totalLines += entry.lines;
+    }
+    // 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);
+    const maxStart = Math.max(0, totalLines - viewport);
+    React.useEffect(() => {
+        setWindowStart(start => {
+            let next = Math.min(Math.max(0, start), maxStart);
+            if (focusedOffset < next)
+                next = focusedOffset;
+            if (focusedOffset + focusedLines > next + viewport)
+                next = focusedOffset + focusedLines - viewport;
+            // Focus at either end of the focus order pins the window to the list's
+            // edge (the card title / bottom border stay visible once the scroll
+            // bottoms out) — but only while the focused row stays inside the pinned
+            // window: a viewport too small for the edge must keep hiding chrome
+            // rather than ever hiding the focus.
+            if (firstFocusOffset !== undefined && focusedOffset <= firstFocusOffset && focusedOffset + focusedLines <= viewport)
+                return 0;
+            if (lastFocusOffset !== undefined && focusedOffset >= lastFocusOffset && focusedOffset >= maxStart)
+                return maxStart;
+            return next;
+        });
+    }, [focusedOffset, focusedLines, viewport, maxStart, firstFocusOffset, lastFocusOffset]);
+    let entryOffset = 0;
+    const visible = entries.filter(entry => {
+        const start = entryOffset;
+        entryOffset += entry.lines;
+        return start >= windowStart && start + entry.lines <= windowStart + viewport;
+    });
+    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, { bleed: true }), _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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type ActivityLineValue } from '../components/ActivityLine.js';
+import type { ChannelUi as Channel } from '../adapter/channel/ui-policy.js';
+import type { WaveBand } from '../dsh-adapter/types.js';
+export declare function StatusLine({ channel, selectionActive, helpOpen, wake, activity: projectedActivity, }: {
+    channel: Channel;
+    selectionActive?: boolean;
+    helpOpen?: boolean;
+    /** Activity value published by the working-activity plugin for this session.
+     *  Preferred over the channel's own copy when the composition provides it. */
+    activity?: ActivityLineValue;
+    /**
+     * The session projected onto the status line's few columns, plus the
+     * animation tick and the self-retiring key hint.
+     *
+     * A strip that shows the session's shape keeps earning its space in a way a
+     * static label cannot, and it carries the failure signal in position rather
+     * than as a count in the corner. Absent in headless embeds, where nothing
+     * folds the event log.
+     */
+    wake?: {
+        band: WaveBand;
+        hint?: string;
+        tick: number;
+    };
+}): React.JSX.Element;
+type UsageSnapshot = {
+    input: number;
+    cacheRead: number;
+    cacheWrite: number;
+};
+/** Return the prompt-cache hit rate, or nothing when usage is unavailable. */
+export declare function formatCacheHitRate(usage: UsageSnapshot | undefined): string | undefined;
+/**
+ * The prompt footer's live IDE-selection badge (T-FIX-02), mirroring Claude
+ * Code's `⧉ N lines selected`: English only (like every other footer field),
+ * singular/plural aware, line count from the snapshot's 0-based inclusive
+ * range. `undefined` (no IDE yet / cleared by an isEmpty notification)
+ * renders no field at all — a manually launched session never shows a
+ * placeholder. Exported for scripts/verify-ide-channel.tsx.
+ */
+export declare function formatSelectionBadge(selection: {
+    startLine: number;
+    endLine: number;
+    isEmpty?: boolean;
+} | undefined): string | undefined;
+export {};
+//# sourceMappingURL=StatusLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusLine.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAoC,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAOxG,OAAO,KAAK,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAA;AAkB3E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAqHvD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,eAAuB,EACvB,QAAgB,EAChB,IAAI,EACJ,QAAQ,EAAE,iBAAiB,GAC5B,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;kFAC8E;IAC9E,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,QAAQ,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CACvD,qBA8ZA;AAED,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AA4KD,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKvF;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EACL;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GACzD,SAAS,GACZ,MAAM,GAAG,SAAS,CAIpB"}