@deepseek-harness-tui/dsh-tui 0.8.8 → 0.9.1

package/lib/types/screens/Settings.js

@@ -160,6 +160,39 @@ export function Settings({ channel, onClose, }) {
         setNotice(undefined);
         bump();
     };
+    /**
+     * 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;
+        }
+        // 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)
+            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)) {
@@ -192,23 +225,7 @@ export function Settings({ channel, onClose, }) {
             setFocusIndex(Math.min(Math.max(0, focusable.length - 1), effFocus + 1));
         }
         else if (isPlainReturn(key) && focused !== undefined) {
-            if (focused.kind === 'group') {
-                setActiveGroup({ ns: focused.ns, id: focused.group.id });
-                setFocusIndex(0);
-                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.
-            if (focusedForm === undefined || !focusedForm.available || focusedForm.saving)
-                return;
-            if (focused.field.kind === 'boolean' || focused.field.kind === 'select') {
-                cycleField(focused.ns, focused.field);
-            }
-            else {
-                setEditing({ ns: focused.ns, field: focused.field, draft: focusedForm.field(focused.field).text });
-                setMode('edit');
-            }
+            activateEntry(focused);
         }
         else if (input === 's' && focused !== undefined) {
             commitSave(focused.ns);
@@ -246,7 +263,7 @@ export function Settings({ channel, onClose, }) {
             }
         }
     });
-    const renderField = (section, field) => {
+    const renderField = (section, field, focus) => {
         const ns = section.ns;
         const form = forms.get(ns);
         const state = form?.field(field) ?? { text: '', overridden: false, invalid: false };
@@ -254,6 +271,20 @@ export function Settings({ channel, onClose, }) {
         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 进编辑态）。
+        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;
@@ -276,7 +307,7 @@ export function Settings({ channel, onClose, }) {
         else {
             value = state.text;
         }
-        return (_jsxs(Box, { 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] }))] }));
+        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] }))] }));
     };
     // ── 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. ─
@@ -290,7 +321,7 @@ export function Settings({ channel, onClose, }) {
             key: `field:${section.ns}:${field.path.join('.')}`,
             lines: field.hint !== undefined && isFocused ? 2 : 1,
             focus: index,
-            node: renderField(section, field),
+            node: renderField(section, field, index),
         });
     };
     if (activeSection !== undefined && activeGroupSpec !== undefined) {
@@ -319,11 +350,22 @@ export function Settings({ channel, onClose, }) {
                 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: (_jsxs(Box, { 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: (_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" })] })),
                 });
             }
         });
@@ -388,5 +430,5 @@ export function Settings({ channel, onClose, }) {
         ? `${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, {}), 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 }) })] }));
+    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 }) })] }));
 }

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

@@ -1,14 +1,6 @@
 import React from 'react';
 import type { Channel } from '../dsh-adapter/channel.js';
 import type { WaveBand } from '../dsh-adapter/types.js';
-/**
- * The footer under the prompt input, in Claude Code's PromptInputFooter
- * layout: the segmented context progress bar on its own first line, the
- * status line below (left group: model · tokens · think level · cache · tps
- * gauge/sparkline; right group: git · cwd · title, right-aligned), and the
- * mode/hint line last. The right side of the footer shows the latest
- * transient notification (errors in red, warnings in amber — CC style).
- */
 export declare function StatusLine({ channel, selectionActive, helpOpen, wake, }: {
     channel: Channel;
     selectionActive?: boolean;

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;AAOzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAGxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAQvD;;;;;;;GAOG;AACH,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,qBA0PA;AAED,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,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;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"}

package/lib/types/screens/StatusLine.js

@@ -1,24 +1,36 @@
-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, useTerminalSize, useTheme } from '../ui.js';
 import { formatTokens } from '../cc/format.js';
 import { t } from '../i18n.js';
 import { formatContextUsage, DEFAULT_STATUS_BAR, normalizeStatusBar } from '../tuiDisplayPrefs.js';
-import { Byline } from '../components/design-system/Byline.js';
 import { ActivityLine, contextPressurePct } from '../components/ActivityLine.js';
+import { GoalStatusChip } from '../components/GoalTodoPanel.js';
 import { modeDisplayName } from '../sessionModes.js';
 import { MiniWake } from '../components/trajectory/MiniWake.js';
-import { renderContextBar, renderTpsGauge, renderTpsSparkline, speedColor, } from './StatusMetrics.js';
+import { ContextBarView } from '../components/ContextBarView.js';
+import { USED_SEGMENTS, renderMiniContextBar, renderTpsGauge, renderTpsSparkline, speedColor, tpsStats, } from './StatusMetrics.js';
 /**
- * The footer under the prompt input, in Claude Code's PromptInputFooter
- * layout: the segmented context progress bar on its own first line, the
- * status line below (left group: model · tokens · think level · cache · tps
- * gauge/sparkline; right group: git · cwd · title, right-aligned), and the
- * mode/hint line last. The right side of the footer shows the latest
- * transient notification (errors in red, warnings in amber — CC style).
+ * Render field parts as sibling shrinkable Boxes joined by the Byline
+ * separator (` · `). The Box-per-field layout is what makes individual
+ * fields hoverable — a Byline inside one Text cannot carry per-field mouse
+ * rects — at the cost of truncating each field on its own under pressure
+ * instead of truncating the joined string's tail.
  */
+function FieldLine({ parts, hoverProps, }) {
+    const visible = parts.filter(part => part.node !== null && part.node !== undefined && part.node !== false);
+    return (_jsx(_Fragment, { children: visible.map((part, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx(Text, { dimColor: true, children: " \u00B7 " }) : null, _jsx(Box, { flexShrink: 1, ...(part.id === undefined ? {} : hoverProps(part.id)), children: _jsx(Text, { wrap: "truncate", children: part.node }) })] }, part.key))) }));
+}
 export function StatusLine({ channel, selectionActive = false, helpOpen = false, wake, }) {
     const { columns } = useTerminalSize();
     const [themeName] = useTheme();
+    const [hover, setHover] = React.useState(null);
+    const hoverProps = React.useCallback((id) => ({
+        onMouseEnter: () => setHover(id),
+        // Guarded leave: a late leave from a field the pointer already left must
+        // not clobber the field it entered.
+        onMouseLeave: () => setHover(current => (current === id ? null : current)),
+    }), []);
     const statusBar = channel.minimal
         // Minimal mode overrides every field switch: model + cwd only, so the
         // footer can never grow decorations regardless of saved preferences.
@@ -30,65 +42,145 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
         : usage.input + usage.cacheRead + usage.cacheWrite;
     const contextParts = [];
     if (statusBar.thinking && channel.reasoningEffort !== undefined) {
-        contextParts.push(_jsx(Text, { color: "inactiveShimmer", children: channel.reasoningEffort }, "effort"));
+        contextParts.push({
+            key: 'effort',
+            node: _jsx(Text, { color: "inactiveShimmer", children: channel.reasoningEffort }),
+        });
     }
     if (statusBar.mode && channel.modeIndex > 0) {
-        contextParts.push(_jsx(Text, { color: channel.mode.plan === true ? 'planMode' : 'warning', children: modeDisplayName(channel.mode) }, "mode"));
+        contextParts.push({
+            key: 'mode',
+            node: (_jsx(Text, { color: channel.mode.plan === true ? 'planMode' : 'warning', children: modeDisplayName(channel.mode) })),
+        });
     }
     const formattedContext = statusBar.contextUsage
         ? formatContextUsage(contextUsed, channel.contextWindow, statusBar.compact)
         : undefined;
-    const contextUsagePart = formattedContext === undefined
+    // The ctx field's two faces: the idle readout, and the hover state — an
+    // in-place pressure bar (the user-liked "text becomes a bar" morph).
+    //
+    // WIDTH-STABLE BY CONSTRUCTION: the idle variable part is
+    // `P + " (" + C + ")"` (either order; P = percent text, C = counts) —
+    // len(P)+len(C)+3 cells. The hover variant is `▕+bar+▏ + " " + P` —
+    // 3+barLen+len(P) cells. Sizing barLen = len(C) makes them equal, so the
+    // morph swaps glyphs in place and NO sibling field, separator, or the
+    // right-aligned group moves a single cell (the first attempt used a fixed
+    // 10-cell gauge and made the whole row jump).
+    const ctxParts = (() => {
+        if (formattedContext === undefined)
+            return undefined;
+        const open = formattedContext.indexOf(' (');
+        if (open < 0)
+            return undefined;
+        const first = formattedContext.slice(0, open);
+        const second = formattedContext.slice(open + 2, -1);
+        if (first.endsWith('%'))
+            return { percent: first, counts: second };
+        if (second.endsWith('%'))
+            return { percent: second, counts: first };
+        return undefined;
+    })();
+    const ctxHoverBarWidth = ctxParts?.counts.length ?? 0;
+    const ctxNode = formattedContext === undefined
         ? undefined
-        : (_jsxs(Text, { color: "inactiveShimmer", children: [_jsx(Text, { dimColor: true, children: "ctx " }), formattedContext] }, "context"));
+        : hover === 'ctx' &&
+            ctxParts !== undefined &&
+            ctxHoverBarWidth > 0 &&
+            contextUsed !== undefined &&
+            channel.contextWindow !== undefined
+            ? (_jsxs(Text, { color: "inactiveShimmer", children: [_jsx(Text, { dimColor: true, children: "ctx " }), renderMiniContextBar(contextUsed, channel.contextWindow, ctxHoverBarWidth), ' ', ctxParts.percent] }))
+            : (_jsxs(Text, { color: "inactiveShimmer", children: [_jsx(Text, { dimColor: true, children: "ctx " }), formattedContext] }));
     if (statusBar.cache) {
         const cacheRate = formatCacheHitRate(usage);
         if (cacheRate !== undefined) {
-            contextParts.push(_jsxs(Text, { color: "inactiveShimmer", children: [_jsx(Text, { dimColor: true, children: t('status-cache-label') }), cacheRate] }, "cache"));
+            contextParts.push({
+                key: 'cache',
+                id: 'cache',
+                node: (_jsxs(Text, { color: "inactiveShimmer", children: [_jsx(Text, { dimColor: true, children: t('status-cache-label') }), cacheRate] })),
+            });
         }
     }
-    const tpsParts = [];
+    let tpsPart;
     if (statusBar.tps && channel.tps !== undefined) {
         if (channel.working && channel.tpsSamples.length === 0) {
-            tpsParts.push(_jsxs(Text, { children: [renderTpsGauge(channel.tps, channel.tps), ' ', _jsxs(Text, { dimColor: true, children: [Math.round(channel.tps), " tps"] })] }, "tps"));
+            tpsPart = {
+                key: 'tps',
+                id: 'tps',
+                node: (_jsxs(Text, { children: [renderTpsGauge(channel.tps, channel.tps), ' ', _jsxs(Text, { dimColor: true, children: [Math.round(channel.tps), " tps"] })] })),
+            };
         }
         else if (channel.tpsSamples.length > 0) {
             const peak = Math.max(...channel.tpsSamples.map(sample => sample.tps), channel.tps);
-            tpsParts.push(_jsxs(Text, { children: [channel.working
-                        ? renderTpsGauge(channel.tps, peak)
-                        : renderTpsSparkline(channel.tpsSamples), ' ', speedColor(channel.tps, `${Math.round(channel.tps)}`), " tps"] }, "tps"));
+            tpsPart = {
+                key: 'tps',
+                id: 'tps',
+                node: (_jsxs(Text, { children: [channel.working
+                            ? renderTpsGauge(channel.tps, peak)
+                            : renderTpsSparkline(channel.tpsSamples), ' ', speedColor(channel.tps, `${Math.round(channel.tps)}`), " tps"] })),
+            };
         }
         else {
-            tpsParts.push(_jsxs(Text, { dimColor: true, children: [Math.round(channel.tps), " t/s"] }, "tps"));
+            tpsPart = {
+                key: 'tps',
+                id: 'tps',
+                node: _jsxs(Text, { dimColor: true, children: [Math.round(channel.tps), " t/s"] }),
+            };
         }
     }
-    const leftParts = [
+    const leftFields = [
         ...(statusBar.model
-            ? [_jsx(Text, { color: "inactiveShimmer", children: channel.model }, "model")]
+            ? [{ key: 'model', node: _jsx(Text, { color: "inactiveShimmer", children: channel.model }) }]
             : []),
-        ...tpsParts,
+        ...(tpsPart !== undefined ? [tpsPart] : []),
         ...contextParts,
         ...(statusBar.tokens
-            ? [
-                _jsxs(Text, { color: "inactiveShimmer", children: [formatTokens(channel.tokens.input), "\u2192", formatTokens(channel.tokens.output)] }, "tokens"),
-            ]
+            ? [{
+                    key: 'tokens',
+                    id: 'tokens',
+                    node: (_jsxs(Text, { color: "inactiveShimmer", children: [formatTokens(channel.tokens.input), "\u2192", formatTokens(channel.tokens.output)] })),
+                }]
             : []),
     ];
-    const rightParts = [
+    const rightFields = [
+        // Goal chip first: session-level state outranks repo/location details.
+        ...(statusBar.goal && channel.goal !== undefined
+            ? [{
+                    key: 'goal',
+                    id: 'goal',
+                    node: _jsx(GoalStatusChip, { goal: channel.goal, minimal: channel.minimal }),
+                }]
+            : []),
         ...(statusBar.gitBranch && channel.gitBranch
             ? [
-                _jsx(Text, { color: "professionalBlue", children: channel.gitBranch }, "git"),
+                {
+                    key: 'git',
+                    node: _jsx(Text, { color: "professionalBlue", children: channel.gitBranch }),
+                },
             ]
             : []),
         ...(statusBar.cwd
-            ? [
-                _jsx(Text, { color: "inactiveShimmer", children: statusBar.compact ? basename(channel.displayCwd) : channel.displayCwd }, "cwd"),
-            ]
+            ? [{
+                    key: 'cwd',
+                    id: 'cwd',
+                    node: (_jsx(Text, { color: "inactiveShimmer", children: statusBar.compact ? basename(channel.displayCwd) : channel.displayCwd })),
+                }]
             : []),
         ...(statusBar.sessionTitle && channel.sessionTitle
-            ? [
-                _jsx(Text, { dimColor: true, children: channel.sessionTitle }, "title"),
-            ]
+            ? [{
+                    key: 'title',
+                    id: 'title',
+                    node: _jsx(Text, { dimColor: true, children: channel.sessionTitle }),
+                }]
+            : []),
+        // Short id last: a provenance tag trails the content it identifies, and
+        // the 8-char form is what the session log filename starts with, so a
+        // truncated rendering still names the right log for --resume.
+        ...(statusBar.sessionId && channel.agentId
+            ? [{
+                    key: 'sessionId',
+                    id: 'sessionId',
+                    node: _jsx(Text, { dimColor: true, children: `#${channel.agentId.slice(0, 8)}` }),
+                }]
             : []),
     ];
     const hint = selectionActive
@@ -106,24 +198,111 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
         activity.phase !== 'idle';
     const showTrajectory = statusBar.trajectory && wake !== undefined;
     const barWidth = columns - 4;
-    let bar = null;
     const barColors = themeName === 'light'
         ? undefined
         : { freeFill: '#2E3440', freeText: '#8D95A6' };
-    if (statusBar.contextBar &&
+    const barVisible = statusBar.contextBar &&
         channel.contextBarEnabled &&
         barWidth >= 14 &&
         usage !== undefined &&
-        channel.contextWindow !== undefined) {
-        bar = renderContextBar(channel.contextSegments, contextUsed ?? 0, channel.contextWindow, barWidth, barColors);
+        channel.contextWindow !== undefined;
+    // The supplemental-row readout for the hovered field: replaces the idle
+    // hint (never the activity line) while the pointer dwells on a field.
+    const detail = buildHoverDetail(hover, channel, usage, contextUsed);
+    const trailer = detail !== null
+        ? detail
+        : hint !== ''
+            ? _jsx(Text, { color: "inactiveShimmer", children: hint })
+            : null;
+    const compactFields = [...leftFields, ...rightFields];
+    const fullLeftFields = [
+        ...leftFields,
+        ...(ctxNode !== undefined ? [{ key: 'context', id: 'ctx', node: ctxNode }] : []),
+    ];
+    const hasStatusFields = compactFields.length > 0 || ctxNode !== undefined;
+    // The supplemental row is PERMANENTLY mounted (height pinned to 1)
+    // whenever the footer carries hoverable chrome — mounting it from nothing
+    // on hover is what made the footer grow mid-gesture and shoved the
+    // transcript up (user feedback). Idle it may sit blank: a stable footer
+    // outranks a reclaimable row, and hovering only ever swaps this line's
+    // content. Minimal mode keeps the old contract — no hover details, the
+    // row appears only for real content (which its defaults never produce).
+    const showSupplementalRow = (!channel.minimal && (hasStatusFields || barVisible)) ||
+        showActivity ||
+        showTrajectory ||
+        hint !== '';
+    return (_jsx(Box, { paddingX: 1, width: columns, flexShrink: 0, children: _jsxs(Box, { flexDirection: "column", width: "100%", children: [barVisible ? (_jsx(ContextBarView, { segments: channel.contextSegments, usedTokens: contextUsed ?? 0, contextWindow: channel.contextWindow ?? 0, width: barWidth, colors: barColors, onHover: segment => setHover(current => segment === null
+                        ? (current !== null && current.startsWith('segment:') ? null : current)
+                        : `segment:${segment}`) })) : null, hasStatusFields ? statusBar.compact ? (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, flexDirection: "row", overflow: "hidden", children: _jsx(FieldLine, { parts: compactFields, hoverProps: hoverProps }) }), ctxNode !== undefined ? (_jsx(Box, { flexShrink: 0, ...hoverProps('ctx'), children: _jsx(Text, { wrap: "truncate", children: ctxNode }) })) : null] })) : (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, flexDirection: "row", overflow: "hidden", children: _jsx(FieldLine, { parts: fullLeftFields, hoverProps: hoverProps }) }), _jsx(Box, { justifyContent: "flex-end", flexShrink: 2, flexDirection: "row", overflow: "hidden", children: _jsx(FieldLine, { parts: rightFields, hoverProps: hoverProps }) })] })) : null, showSupplementalRow ? _jsxs(Box, { height: 1, overflow: "hidden", flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { flexDirection: "row", flexGrow: 1, justifyContent: showActivity && trailer !== null ? 'space-between' : 'flex-start', gap: 2, children: [showActivity && activity !== undefined ? (_jsx(ActivityLine, { activity: activity, activityFrames: channel.activityFrames, warnPct: contextPressurePct(usage, channel.contextWindow), warnDanger: (contextPressurePct(usage, channel.contextWindow) ?? 0) >= 95 })) : trailer, showActivity ? trailer : null] }), showTrajectory && wake !== undefined ? (_jsx(MiniWake, { band: wake.band, hint: wake.hint, tick: wake.tick })) : null] }) : null] }) }));
+}
+/**
+ * The supplemental-row readout for a hovered footer field. Technical label
+ * tokens (ctx, free, read, sys…) stay unlocalized like the footer fields
+ * themselves; sentences go through t(). Returns null when nothing is
+ * hovered (or the hover outlived its data, which the field gating makes
+ * near-impossible).
+ */
+function buildHoverDetail(hover, channel, usage, contextUsed) {
+    if (hover === null)
+        return null;
+    const window = channel.contextWindow;
+    const dim = (label) => _jsx(Text, { dimColor: true, children: label });
+    if (hover.startsWith('segment:')) {
+        if (window === undefined || window <= 0 || contextUsed === undefined)
+            return null;
+        const key = hover.slice('segment:'.length);
+        const free = Math.max(0, window - contextUsed);
+        if (key === 'free') {
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('free '), formatTokens(free), " \u00B7 ", ((free / window) * 100).toFixed(1), "% ", t('status-detail-of-window')] }));
+        }
+        const segment = USED_SEGMENTS.find(s => s.key === key);
+        if (segment === undefined)
+            return null;
+        const tokens = channel.contextSegments[segment.key];
+        return (_jsxs(Text, { wrap: "truncate", children: [dim(`${segment.labels[1] ?? segment.key} `), formatTokens(tokens), " \u00B7", ' ', ((tokens / window) * 100).toFixed(1), "% ", t('status-detail-of-window')] }));
+    }
+    switch (hover) {
+        case 'ctx': {
+            if (contextUsed === undefined || window === undefined || window <= 0)
+                return null;
+            const free = Math.max(0, window - contextUsed);
+            // The hover payoff for the ctx ask: percent + counts + free, then the
+            // segment breakdown as the truncate-able tail (no bar — the row's
+            // in-place morph and the segment bar above already carry the gauge).
+            const segments = USED_SEGMENTS.map(segment => `${segment.labels[1] ?? segment.key} ${formatTokens(channel.contextSegments[segment.key])}`).join(' · ');
+            return (_jsxs(Text, { wrap: "truncate", children: [((contextUsed / window) * 100).toFixed(1), "% \u00B7", ' ', formatTokens(contextUsed), "/", formatTokens(window), " \u00B7 ", dim('free '), formatTokens(free), ' · ', segments] }));
+        }
+        case 'cache': {
+            const rate = formatCacheHitRate(usage);
+            if (usage === undefined || rate === undefined)
+                return null;
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('cache '), rate, " \u00B7 ", dim('read '), formatTokens(usage.cacheRead), " \u00B7", ' ', dim('write '), formatTokens(usage.cacheWrite), " \u00B7 ", dim('input '), formatTokens(usage.input)] }));
+        }
+        case 'tps': {
+            if (channel.tps === undefined)
+                return null;
+            const stats = tpsStats(channel.tpsSamples, Date.now());
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('tps '), Math.round(channel.tps), " \u00B7 ", dim('avg60 '), stats.avg.toFixed(1), " \u00B7", ' ', dim('mean '), stats.mean.toFixed(1), " \u00B7 ", dim('p95 '), stats.p95.toFixed(1)] }));
+        }
+        case 'tokens': {
+            const { input, output } = channel.tokens;
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('in '), input.toLocaleString(), " \u00B7 ", dim('out '), output.toLocaleString(), " \u00B7", ' ', dim('total '), (input + output).toLocaleString()] }));
+        }
+        case 'goal': {
+            const goal = channel.goal;
+            if (goal === undefined)
+                return null;
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('goal '), goal.phase, " \u00B7 ", dim('r'), goal.roundsStarted, "/", goal.maxGoalRounds, " \u00B7", ' ', goal.objective] }));
+        }
+        case 'sessionId':
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('# '), channel.agentId, " \u00B7 ", t('status-detail-session-id')] }));
+        case 'cwd':
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('cwd '), channel.displayCwd] }));
+        case 'title':
+            return (_jsxs(Text, { wrap: "truncate", children: [dim('title '), channel.sessionTitle] }));
+        default:
+            return null;
     }
-    const compactLeftParts = [...leftParts, ...rightParts];
-    const fullLeftParts = contextUsagePart === undefined
-        ? leftParts
-        : [...leftParts, contextUsagePart];
-    const hasStatusFields = compactLeftParts.length > 0 || contextUsagePart !== undefined;
-    const showSupplementalRow = hint !== '' || showActivity || showTrajectory;
-    return (_jsx(Box, { paddingX: 1, width: columns, flexShrink: 0, children: _jsxs(Box, { flexDirection: "column", width: "100%", children: [bar ? _jsx(Text, { children: bar }) : null, hasStatusFields ? statusBar.compact ? (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { wrap: "truncate", children: _jsx(Byline, { children: compactLeftParts }) }) }), contextUsagePart ? (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { wrap: "truncate", children: _jsx(Byline, { children: [contextUsagePart] }) }) })) : null] })) : (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { wrap: "truncate", children: _jsx(Byline, { children: fullLeftParts }) }) }), _jsx(Box, { justifyContent: "flex-end", flexShrink: 2, children: _jsx(Text, { wrap: "truncate", children: _jsx(Byline, { children: rightParts }) }) })] })) : null, showSupplementalRow ? _jsxs(Box, { height: 1, overflow: "hidden", flexDirection: "row", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { flexDirection: "row", flexGrow: 1, justifyContent: showActivity && hint ? 'space-between' : 'flex-start', gap: 2, children: [showActivity && activity !== undefined ? (_jsx(ActivityLine, { activity: activity, activityFrames: channel.activityFrames, warnPct: contextPressurePct(usage, channel.contextWindow), warnDanger: (contextPressurePct(usage, channel.contextWindow) ?? 0) >= 95 })) : hint ? (_jsx(Text, { color: "inactiveShimmer", children: hint })) : null, showActivity && hint ? (_jsx(Text, { color: "inactiveShimmer", wrap: "truncate", children: hint })) : null] }), showTrajectory && wake !== undefined ? (_jsx(MiniWake, { band: wake.band, hint: wake.hint, tick: wake.tick })) : null] }) : null] }) }));
 }
 /** Return the prompt-cache hit rate, or nothing when usage is unavailable. */
 export function formatCacheHitRate(usage) {

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

@@ -8,8 +8,10 @@
  *    yellow ≥ 20, red below.
  */
 /** Context bar segments — DeepSeek blue family (dark-theme friendly: deep
- *  navy → brand blue, neutral grey free segment; labels adapt to width). */
-declare const USED_SEGMENTS: readonly [{
+ *  navy → brand blue, neutral grey free segment; labels adapt to width).
+ *  Exported for the hoverable JSX bar (ContextBarView), which re-derives
+ *  the same column split this module's ANSI path renders. */
+export declare const USED_SEGMENTS: readonly [{
     readonly key: "system";
     readonly color: "#22305F";
     readonly labels: readonly ["system", "sys", "s"];
@@ -37,6 +39,22 @@ export type ContextSegments = Record<(typeof USED_SEGMENTS)[number]['key'], numb
  * @returns The compact count string.
  */
 export declare function formatTokens(count: number): string;
+/** Center `text` in `width` cells (plain spaces, no ANSI). Exported for
+ *  ContextBarView's JSX used-segment labels. */
+export declare function centeredText(text: string, width: number): string;
+/** Pick the longest label that fits `width` cells. Exported for
+ *  ContextBarView's JSX segments (same fallback ladder as the ANSI path). */
+export declare function chooseLabel(labels: readonly string[], width: number): string;
+/**
+ * Compose the free segment's plain text: the `free` label centered, the
+ * usage readout right-aligned into whatever width remains. Shared by the
+ * ANSI string path (renderContextBar) and the hoverable JSX bar
+ * (ContextBarView) so both render pixel-identical content.
+ */
+export declare function composeFreeSegmentText(options: readonly string[], width: number): string;
+/** Give every visible used segment at least one column before sharing the
+ *  rest. Exported for ContextBarView (hoverable JSX twin of the bar). */
+export declare function allocateBarColumns(values: readonly number[], width: number): number[];
 /**
  * The segmented context bar: used segments by content type, the remainder as
  * a light free segment whose right edge carries the usage readout
@@ -51,6 +69,21 @@ export declare function renderContextBar(segments: ContextSegments, usedTokens:
     freeFill: string;
     freeText: string;
 }): string;
+/** Pressure-colored text: green below 80%, amber ≥ 80, red ≥ 95.
+ * @param pct - Context occupancy percent (0–100+).
+ * @param text - Text to color.
+ * @returns The ANSI 24-bit color-wrapped text.
+ */
+export declare function pressureColor(pct: number, text: string): string;
+/** Compact 1/8-cell context gauge for the footer's ctx field on hover:
+ *  `▕██████▋···▏`, fill proportional to context occupancy, colored by the
+ *  amber/red pressure thresholds. Same block ramp as the TPS gauge.
+ * @param usedTokens - Total context tokens in use.
+ * @param contextWindow - Context window size in tokens.
+ * @param width - Gauge width in terminal columns (fill cells, brackets excluded).
+ * @returns The ANSI gauge string, or '' for a non-positive window.
+ */
+export declare function renderMiniContextBar(usedTokens: number, contextWindow: number, width?: number): string;
 /** Speed color: green ≥ 50, yellow ≥ 20, red below (pi-tps-meter).
  * @param tps - Tokens per second; selects the color threshold.
  * @param text - Text to color.
@@ -83,5 +116,4 @@ export declare function tpsStats(samples: readonly {
     mean: number;
     p95: number;
 };
-export {};
 //# sourceMappingURL=StatusMetrics.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusMetrics.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusMetrics.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;4EAC4E;AAC5E,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAMT,CAAA;AAEV,yFAAyF;AACzF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;AAsBnF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOlD;AA+GD;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,eAAe,EACzB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC9C,MAAM,CAkBR;AAYD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG5D;AAYD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAYhE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,MAAM,CAqB9E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG;IACxF,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAUA"}
+{"version":3,"file":"StatusMetrics.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusMetrics.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;6DAG6D;AAC7D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAMhB,CAAA;AAEV,yFAAyF;AACzF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;AAsBnF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOlD;AAID;gDACgD;AAChD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;6EAC6E;AAC7E,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAK5E;AA4BD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,KAAK,EAAE,MAAM,GACZ,MAAM,CAmBR;AA+BD;yEACyE;AACzE,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAkBrF;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,eAAe,EACzB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC9C,MAAM,CAkBR;AASD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG/D;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,KAAK,SAAK,GACT,MAAM,CAaR;AAYD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG5D;AAYD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAYhE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,SAAS;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,MAAM,CAqB9E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG;IACxF,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;CACZ,CAUA"}