@deepseek-harness-tui/dsh-tui 0.10.2 → 0.11.0

package/lib/types/screens/StatusLine.js

@@ -17,7 +17,7 @@ import { ContextBarView } from '../components/ContextBarView.js';
 import { TooltipTarget } from '../components/Tooltip.js';
 import { formatProject } from '../sessions/format.js';
 import { homeDir } from '../utils/paths.js';
-import { USED_SEGMENTS, renderMiniContextBar, renderTpsGauge, renderTpsSparkline, speedColor, tpsStats, } from './StatusMetrics.js';
+import { FREE_SEGMENT_FILL, USED_SEGMENTS, contextBarBreakdown, renderMiniContextBar, renderTpsGauge, renderTpsSparkline, speedColor, tpsStats, } from './StatusMetrics.js';
 /**
  * The footer under the prompt input: the segmented context progress bar on
  * its own first line, the
@@ -31,7 +31,8 @@ import { USED_SEGMENTS, renderMiniContextBar, renderTpsGauge, renderTpsSparkline
  * swaps the ctx readout for a mini pressure gauge and parks that field's
  * detailed breakdown on the supplemental row where the idle hint lives —
  * the footer stays one line tall, the detail is a peek, not a layout
- * change. Hovering a context-bar segment does the same for that segment.
+ * change. The context bar answers the same way: it carries no labels of its
+ * own, so hovering it is how its colors get their names and numbers.
  */
 /**
  * Minimal mode's footer config. It ignores every SAVED preference (built from
@@ -182,6 +183,7 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
             };
         }
     }
+    const selectionBadge = formatSelectionBadge(channel.selection);
     // Background-job chip (ctx.jobs; /jobs): live count of running/stopping
     // jobs, shown only while non-zero — a silent zero is not information.
     // Not preference-gated: it is transient situational state like the goal
@@ -228,6 +230,15 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
             : []),
     ];
     const rightFields = [
+        // Live IDE-selection badge first: it tracks the user's in-editor gesture,
+        // the freshest signal in the footer (T-FIX-02). Absent without an IDE —
+        // no placeholder, matching the official Claude Code footer.
+        ...(selectionBadge !== undefined
+            ? [{
+                    key: 'ideSelection',
+                    node: (_jsx(Text, { color: "ide", wrap: "truncate", children: selectionBadge })),
+                }]
+            : []),
         // Goal chip first: session-level state outranks repo/location details.
         ...(statusBar.goal && channel.goal !== undefined
             ? [{
@@ -298,7 +309,7 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
         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 detail = buildHoverDetail(hover, channel, usage, contextUsed, columns, barColors);
     const trailer = detail !== null
         ? detail
         : hint !== ''
@@ -321,9 +332,7 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
         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] }) }));
+    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: hovered => setHover(current => hovered ? 'bar' : current === 'bar' ? null : current) })) : 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
@@ -332,24 +341,20 @@ export function StatusLine({ channel, selectionActive = false, helpOpen = false,
  * hovered (or the hover outlived its data, which the field gating makes
  * near-impossible).
  */
-function buildHoverDetail(hover, channel, usage, contextUsed) {
+function buildHoverDetail(hover, channel, usage, contextUsed, columns, barColors) {
     if (hover === null)
         return null;
     const window = channel.contextWindow;
     const dim = (label) => _jsx(Text, { dimColor: true, children: label });
-    if (hover.startsWith('segment:')) {
+    if (hover === 'bar') {
         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)
+        // The bar's text-free design pays off here: this line is its legend, so
+        // every entry leads with a chip of the very color it names.
+        const { entries, separator } = contextBarBreakdown(channel.contextSegments, contextUsed, window, columns, barColors?.freeFill ?? FREE_SEGMENT_FILL);
+        if (entries.length === 0)
             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')] }));
+        return (_jsx(Text, { wrap: "truncate", children: entries.map((entry, index) => (_jsxs(React.Fragment, { children: [index > 0 ? dim(separator) : null, _jsx(Text, { backgroundColor: entry.color, children: " " }), entry.label] }, entry.key))) }));
     }
     switch (hover) {
         case 'ctx': {
@@ -428,6 +433,20 @@ export function formatCacheHitRate(usage) {
         return undefined;
     return `${((usage.cacheRead / total) * 100).toFixed(1)}%`;
 }
+/**
+ * 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 function formatSelectionBadge(selection) {
+    if (selection === undefined || selection.isEmpty === true)
+        return undefined;
+    const lines = selection.endLine - selection.startLine + 1;
+    return `⧉ ${lines} ${lines === 1 ? 'line' : 'lines'} selected`;
+}
 function basename(path) {
     const parts = path.split(/[\\/]/);
     return parts[parts.length - 1] ?? path;

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

@@ -7,58 +7,115 @@
  *    normalized sparkline after each completed turn; colors green ≥ 50 tps,
  *    yellow ≥ 20, red below.
  */
+import type { Color } from '../ink/styles.js';
 /** Context bar segments — DeepSeek blue family (dark-theme friendly: deep
- *  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. */
+ *  navy → brand blue, neutral grey free segment).
+ *
+ *  The bar draws NO text inside a used segment: the fill color is the whole
+ *  signal (community feedback — the old `s`/`p`/`t` letters read as noise on
+ *  a row that is already decorative). `labels` therefore belongs to the hover
+ *  breakdown only: index 0 is the readable name, index 1 the short form the
+ *  supplemental row falls back to on a narrow terminal. 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"];
+    readonly labels: readonly ["system", "sys"];
 }, {
     readonly key: "prompt";
     readonly color: "#2B3D78";
-    readonly labels: readonly ["prompt", "pr", "p"];
+    readonly labels: readonly ["prompt", "pr"];
 }, {
     readonly key: "assistant";
     readonly color: "#344A92";
-    readonly labels: readonly ["assistant", "ast", "a"];
+    readonly labels: readonly ["assistant", "ast"];
 }, {
     readonly key: "thinking";
     readonly color: "#4D6BFE";
-    readonly labels: readonly ["think", "th", "t"];
+    readonly labels: readonly ["thinking", "th"];
 }, {
     readonly key: "tools";
     readonly color: "#5A7CFF";
-    readonly labels: readonly ["tools", "tl", "x"];
+    readonly labels: readonly ["tools", "tl"];
 }];
 /** Used tokens per context content type (system, prompt, assistant, thinking, tools). */
 export type ContextSegments = Record<(typeof USED_SEGMENTS)[number]['key'], number>;
+/** Free-segment colors: light grey fill, dark grey readout. Exported so the
+ *  JSX bar (ContextBarView) and the hover chip paint the same free color the
+ *  ANSI path does instead of re-declaring the hex. */
+export declare const FREE_SEGMENT_FILL = "#E8E8E8";
+export declare const FREE_SEGMENT_TEXT = "#4A4A4A";
 /** Compact token count like pi's: `988`, `3.4k`, `12k`, `1.0M`.
  * @param count - The raw token count; negative values clamp to zero.
  * @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;
+/** Which pressure step a context occupancy falls in: undefined while the
+ *  context is comfortable, then the shared `warning` / `error` theme colors.
+ * @param pct - Context occupancy percent (0–100+).
+ * @returns The theme color key, or undefined below the amber threshold.
+ */
+export declare function contextPressureStep(pct: number): 'warning' | 'error' | undefined;
+/**
+ * The bar's right-aligned usage readout, longest form first: token counts and
+ * percent (`13k/64k 19.5%`), then the percent alone once the free segment is
+ * too narrow to carry the counts.
+ * @param usedTokens - Total context tokens in use.
+ * @param contextWindow - The context window size in tokens.
+ * @returns The readout ladder, widest option first.
+ */
+export declare function contextBarReadout(usedTokens: number, contextWindow: number): readonly 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.
+ * Blank-pad to `width` cells and right-align the first readout option that
+ * fits. Shared by the ANSI string path (renderContextBar) and the hoverable
+ * JSX bar (ContextBarView) so both render identical readouts.
+ */
+export declare function rightAlignBarText(options: readonly string[], width: number): string;
+/** One entry of the context bar's hover breakdown: the fill color, the name
+ *  to put next to a swatch of it, and the token count already folded into
+ *  `label` (`system 1.2k`). */
+export type ContextBarBreakdownEntry = {
+    /** `system` … `tools`, or `free`. */
+    key: string;
+    /** The chip label, e.g. `thinking 5.0k`. */
+    label: string;
+    /** The segment's fill color — the hover chip paints with it, which is what
+     *  ties each number back to a slice of the bar. */
+    color: Color;
+};
+/** Separator between breakdown entries, chosen by the width ladder below. */
+export type ContextBarBreakdown = {
+    readonly entries: readonly ContextBarBreakdownEntry[];
+    readonly separator: string;
+};
+/**
+ * The context bar's hover breakdown — the legend the bar no longer carries
+ * itself. One entry per segment the bar actually paints (a zero-token content
+ * type gets no columns, so it gets no entry either), in bar order, free last.
+ *
+ * `columns` picks the label form: readable names with a ` · ` separator while
+ * the line fits, then the short forms, then a bare space separator (the color
+ * chip already separates the entries). The caller renders each entry as
+ * `chip + space + label`, which is what the fit test measures.
+ *
+ * @param segments - Used tokens per content type.
+ * @param usedTokens - Total used tokens; the remainder is the free entry.
+ * @param contextWindow - The context window size in tokens.
+ * @param columns - Terminal width; the footer's own padding is subtracted here.
+ * @param freeFill - The free segment's fill color (callers pass a theme override).
+ * @returns The breakdown entries and the separator to join them with.
  */
-export declare function composeFreeSegmentText(options: readonly string[], width: number): string;
+export declare function contextBarBreakdown(segments: ContextSegments, usedTokens: number, contextWindow: number, columns: number, freeFill?: Color): ContextBarBreakdown;
 /** 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
- * (`ctx 12.3k/1.0M 1.2% 988.9k`, shrinking as width allows).
+ * The segmented context bar: used segments by content type, then the
+ * remainder as a light free segment whose right edge carries the usage
+ * readout (`13k/64k 19.5%`). No other text — the bar is read by color, and
+ * the pointer supplies the names and numbers (contextBarBreakdown). The
+ * readout tints amber / red as the context fills (contextPressureStep).
  * @param segments - Used tokens per content type.
  * @param usedTokens - Total used tokens, driving the usage readout.
  * @param contextWindow - The context window size in tokens.

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;;;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"}
+{"version":3,"file":"StatusMetrics.d.ts","sourceRoot":"","sources":["../../../src/screens/StatusMetrics.ts"],"names":[],"mappings":"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"}

package/lib/types/screens/StatusMetrics.js

@@ -1,27 +1,26 @@
-/**
- * Status-line metric renderers, ported from two pi extensions:
- *  - `pi-nano-context`: segmented context progress bar (morandi pastel
- *    segments by content type, free space right-aligned with the usage
- *    readout, largest-remainder column allocation).
- *  - `pi-tps-meter`: live 1/8-cell gauge while streaming and a min-max
- *    normalized sparkline after each completed turn; colors green ≥ 50 tps,
- *    yellow ≥ 20, red below.
- */
+import { stringWidth } from '../ink/stringWidth.js';
 /** Context bar segments — DeepSeek blue family (dark-theme friendly: deep
- *  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. */
+ *  navy → brand blue, neutral grey free segment).
+ *
+ *  The bar draws NO text inside a used segment: the fill color is the whole
+ *  signal (community feedback — the old `s`/`p`/`t` letters read as noise on
+ *  a row that is already decorative). `labels` therefore belongs to the hover
+ *  breakdown only: index 0 is the readable name, index 1 the short form the
+ *  supplemental row falls back to on a narrow terminal. Exported for the
+ *  hoverable JSX bar (ContextBarView), which re-derives the same column split
+ *  this module's ANSI path renders. */
 export const USED_SEGMENTS = [
-    { key: 'system', color: '#22305F', labels: ['system', 'sys', 's'] }, // deep navy
-    { key: 'prompt', color: '#2B3D78', labels: ['prompt', 'pr', 'p'] }, // navy
-    { key: 'assistant', color: '#344A92', labels: ['assistant', 'ast', 'a'] }, // indigo
-    { key: 'thinking', color: '#4D6BFE', labels: ['think', 'th', 't'] }, // DeepSeek brand blue
-    { key: 'tools', color: '#5A7CFF', labels: ['tools', 'tl', 'x'] }, // lighter blue
+    { key: 'system', color: '#22305F', labels: ['system', 'sys'] }, // deep navy
+    { key: 'prompt', color: '#2B3D78', labels: ['prompt', 'pr'] }, // navy
+    { key: 'assistant', color: '#344A92', labels: ['assistant', 'ast'] }, // indigo
+    { key: 'thinking', color: '#4D6BFE', labels: ['thinking', 'th'] }, // DeepSeek brand blue
+    { key: 'tools', color: '#5A7CFF', labels: ['tools', 'tl'] }, // lighter blue
 ];
-const USED_SEGMENT_TEXT = '#FFFFFF';
-const FREE_SEGMENT_FILL = '#E8E8E8';
-const FREE_SEGMENT_TEXT = '#4A4A4A';
-const FREE_SEGMENT_LABELS = ['free', 'fr', 'f'];
+/** Free-segment colors: light grey fill, dark grey readout. Exported so the
+ *  JSX bar (ContextBarView) and the hover chip paint the same free color the
+ *  ANSI path does instead of re-declaring the hex. */
+export const FREE_SEGMENT_FILL = '#E8E8E8';
+export const FREE_SEGMENT_TEXT = '#4A4A4A';
 const ANSI_RE = /\x1b\[[0-9;]*m/g;
 const stripAnsi = (text) => text.replace(ANSI_RE, '');
 const plainWidth = (text) => Array.from(stripAnsi(text)).length;
@@ -50,74 +49,138 @@ export function formatTokens(count) {
         return `${(value / 1000000).toFixed(1)}M`;
     return `${Math.round(value / 1000000)}M`;
 }
-// --- Context bar (pi-nano-context) ---
-/** Center `text` in `width` cells (plain spaces, no ANSI). Exported for
- *  ContextBarView's JSX used-segment labels. */
-export function centeredText(text, width) {
-    const textWidth = plainWidth(text);
-    if (textWidth > width)
-        return ' '.repeat(width);
-    const left = Math.floor((width - textWidth) / 2);
-    const right = width - textWidth - left;
-    return `${' '.repeat(left)}${text}${' '.repeat(right)}`;
-}
-/** Pick the longest label that fits `width` cells. Exported for
- *  ContextBarView's JSX segments (same fallback ladder as the ANSI path). */
-export function chooseLabel(labels, width) {
-    for (const label of labels) {
-        if (plainWidth(label) <= width)
-            return label;
-    }
-    return '';
-}
-function renderUsedSegment(labels, color, width) {
-    if (width <= 0)
-        return '';
-    const label = chooseLabel(labels, width);
-    const text = label.length > 0
-        ? foreground(USED_SEGMENT_TEXT, centeredText(label, width))
-        : ' '.repeat(width);
-    return background(color, text);
+/** Context-pressure thresholds, shared by the bar readout's tint, the ctx
+ *  field's hover gauge, and contextPressurePct's amber/red footer convention
+ *  (amber ≥ 80%, red ≥ 95%). */
+const PRESSURE_WARN = 80;
+const PRESSURE_DANGER = 95;
+/** Which pressure step a context occupancy falls in: undefined while the
+ *  context is comfortable, then the shared `warning` / `error` theme colors.
+ * @param pct - Context occupancy percent (0–100+).
+ * @returns The theme color key, or undefined below the amber threshold.
+ */
+export function contextPressureStep(pct) {
+    if (pct >= PRESSURE_DANGER)
+        return 'error';
+    if (pct >= PRESSURE_WARN)
+        return 'warning';
+    return undefined;
 }
-function chooseRightAlignedText(options, width, blockedUntil) {
-    for (const option of options) {
-        const start = width - plainWidth(option);
-        if (start > blockedUntil)
-            return option;
-    }
-    return '';
+// --- Context bar (pi-nano-context) ---
+/**
+ * The bar's right-aligned usage readout, longest form first: token counts and
+ * percent (`13k/64k 19.5%`), then the percent alone once the free segment is
+ * too narrow to carry the counts.
+ * @param usedTokens - Total context tokens in use.
+ * @param contextWindow - The context window size in tokens.
+ * @returns The readout ladder, widest option first.
+ */
+export function contextBarReadout(usedTokens, contextWindow) {
+    const percent = `${((usedTokens / contextWindow) * 100).toFixed(1)}%`;
+    return [`${formatTokens(usedTokens)}/${formatTokens(contextWindow)} ${percent}`, percent];
 }
+// --- Context bar (pi-nano-context) ---
 /**
- * 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.
+ * Blank-pad to `width` cells and right-align the first readout option that
+ * fits. Shared by the ANSI string path (renderContextBar) and the hoverable
+ * JSX bar (ContextBarView) so both render identical readouts.
  */
-export function composeFreeSegmentText(options, width) {
+export function rightAlignBarText(options, width) {
     if (width <= 0)
         return '';
     const content = Array.from({ length: width }, () => ' ');
-    const label = chooseLabel(FREE_SEGMENT_LABELS, width);
-    const labelStart = Math.max(0, Math.floor((width - plainWidth(label)) / 2));
-    const labelEnd = label.length > 0 ? labelStart + plainWidth(label) : -1;
-    const rightText = chooseRightAlignedText(options, width, labelEnd);
-    if (rightText) {
-        const start = width - plainWidth(rightText);
-        for (const [offset, char] of Array.from(rightText).entries()) {
+    for (const option of options) {
+        const start = width - plainWidth(option);
+        if (start < 0)
+            continue;
+        for (const [offset, char] of Array.from(option).entries()) {
             content[start + offset] = char;
         }
-    }
-    if (label) {
-        for (const [offset, char] of Array.from(label).entries()) {
-            content[labelStart + offset] = char;
-        }
+        break;
     }
     return content.join('');
 }
-function renderFreeSegment(options, width, fill, text) {
+/** A used segment's fill: background color only, no text. Letters inside the
+ *  bar read as noise (community feedback) and never fit the narrow segments
+ *  anyway — the pointer names a color now (contextBarBreakdown). */
+function renderUsedSegment(color, width) {
     if (width <= 0)
         return '';
-    return background(fill, foreground(text, composeFreeSegmentText(options, width)));
+    return background(color, ' '.repeat(width));
+}
+function renderFreeSegment(options, width, fill, style) {
+    if (width <= 0)
+        return '';
+    return background(fill, style(rightAlignBarText(options, width)));
+}
+/**
+ * The context bar's hover breakdown — the legend the bar no longer carries
+ * itself. One entry per segment the bar actually paints (a zero-token content
+ * type gets no columns, so it gets no entry either), in bar order, free last.
+ *
+ * `columns` picks the label form: readable names with a ` · ` separator while
+ * the line fits, then the short forms, then a bare space separator (the color
+ * chip already separates the entries). The caller renders each entry as
+ * `chip + space + label`, which is what the fit test measures.
+ *
+ * @param segments - Used tokens per content type.
+ * @param usedTokens - Total used tokens; the remainder is the free entry.
+ * @param contextWindow - The context window size in tokens.
+ * @param columns - Terminal width; the footer's own padding is subtracted here.
+ * @param freeFill - The free segment's fill color (callers pass a theme override).
+ * @returns The breakdown entries and the separator to join them with.
+ */
+export function contextBarBreakdown(segments, usedTokens, contextWindow, columns, freeFill = FREE_SEGMENT_FILL) {
+    if (contextWindow <= 0)
+        return { entries: [], separator: ' · ' };
+    const freeTokens = Math.max(0, contextWindow - usedTokens);
+    const raw = [];
+    for (const segment of USED_SEGMENTS) {
+        const tokens = segments[segment.key];
+        if (tokens > 0) {
+            raw.push({ key: segment.key, tokens, color: segment.color, labels: segment.labels });
+        }
+    }
+    if (freeTokens > 0)
+        raw.push({ key: 'free', tokens: freeTokens, color: freeFill, labels: ['free'] });
+    if (raw.length === 0)
+        return { entries: [], separator: ' · ' };
+    // Footer padding (1 cell each side) plus slack for the trajectory wake that
+    // shares this row: a breakdown one cell too long would truncate its tail.
+    const budget = columns - 6;
+    // Widest form first; the last rung wins when nothing fits (the row then
+    // truncates like every other hover detail).
+    const rungs = [
+        { separator: ' · ', labelIndex: 0 },
+        { separator: ' ', labelIndex: 0 },
+        { separator: ' ', labelIndex: 1 },
+    ];
+    let rung = { separator: ' ', labelIndex: 1 };
+    for (const candidate of rungs) {
+        rung = candidate;
+        const labels = raw.map(entry => breakdownLabel(entry, candidate.labelIndex));
+        // One chip cell per entry prefixes each label on the supplemental row.
+        // Measured in terminal cells with the renderer's own helper, not UTF-16
+        // units: the ` · ` separator is East-Asian ambiguous, and the label set is
+        // free to gain non-ASCII names later.
+        const rendered = labels.reduce((sum, label) => sum + stringWidth(label), 0)
+            + labels.length
+            + stringWidth(candidate.separator) * (labels.length - 1);
+        if (rendered <= budget)
+            break;
+    }
+    return {
+        entries: raw.map(entry => ({
+            key: entry.key,
+            color: entry.color,
+            label: breakdownLabel(entry, rung.labelIndex),
+        })),
+        separator: rung.separator,
+    };
+}
+function breakdownLabel(entry, labelIndex) {
+    const name = entry.labels[labelIndex] ?? entry.labels[0] ?? entry.key;
+    return `${name} ${formatTokens(entry.tokens)}`;
 }
 /** Largest-remainder column allocation (pi-nano-context). */
 function allocateProportionally(values, columns) {
@@ -157,9 +220,11 @@ export function allocateBarColumns(values, width) {
     return minimumColumns.map((minimum, index) => minimum + (remainingColumns[index] ?? 0));
 }
 /**
- * The segmented context bar: used segments by content type, the remainder as
- * a light free segment whose right edge carries the usage readout
- * (`ctx 12.3k/1.0M 1.2% 988.9k`, shrinking as width allows).
+ * The segmented context bar: used segments by content type, then the
+ * remainder as a light free segment whose right edge carries the usage
+ * readout (`13k/64k 19.5%`). No other text — the bar is read by color, and
+ * the pointer supplies the names and numbers (contextBarBreakdown). The
+ * readout tints amber / red as the context fills (contextPressureStep).
  * @param segments - Used tokens per content type.
  * @param usedTokens - Total used tokens, driving the usage readout.
  * @param contextWindow - The context window size in tokens.
@@ -172,25 +237,25 @@ export function renderContextBar(segments, usedTokens, contextWindow, width, col
     const freeTokens = Math.max(0, contextWindow - usedTokens);
     const values = [...USED_SEGMENTS.map(segment => segments[segment.key]), freeTokens];
     const columns = allocateBarColumns(values, width);
-    const used = USED_SEGMENTS.map((segment, index) => renderUsedSegment(segment.labels, segment.color, columns[index] ?? 0)).join('');
+    const used = USED_SEGMENTS.map((segment, index) => renderUsedSegment(segment.color, columns[index] ?? 0)).join('');
     const freeWidth = columns[USED_SEGMENTS.length] ?? 0;
-    const percent = `${((usedTokens / contextWindow) * 100).toFixed(1)}%`;
-    const total = `${formatTokens(usedTokens)}/${formatTokens(contextWindow)}`;
-    const free = formatTokens(contextWindow - usedTokens);
-    return `${used}${renderFreeSegment([`ctx ${total} ${percent} ${free}`, `${total} ${percent} ${free}`, `${total} ${percent}`, percent], freeWidth, colors?.freeFill ?? FREE_SEGMENT_FILL, colors?.freeText ?? FREE_SEGMENT_TEXT)}`;
+    const pct = (usedTokens / contextWindow) * 100;
+    const step = contextPressureStep(pct);
+    // Same two-path convention as the free-segment colors: the JSX bar tints
+    // through the theme key, this string path through the raw ANSI twin.
+    const style = step === undefined
+        ? (text) => foreground(colors?.freeText ?? FREE_SEGMENT_TEXT, text)
+        : (text) => pressureColor(pct, text);
+    return `${used}${renderFreeSegment(contextBarReadout(usedTokens, contextWindow), freeWidth, colors?.freeFill ?? FREE_SEGMENT_FILL, style)}`;
 }
 // --- Mini context bar (footer ctx-field hover) ---
-/** Context-pressure thresholds, shared with contextPressurePct's amber/red
- *  footer convention (amber ≥ 80%, red ≥ 95%). */
-const PRESSURE_WARN = 80;
-const PRESSURE_DANGER = 95;
 /** 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 function pressureColor(pct, text) {
-    const key = pct >= PRESSURE_DANGER ? 'error' : pct >= PRESSURE_WARN ? 'warning' : 'success';
+    const key = contextPressureStep(pct) ?? 'success';
     return `\x1b[38;2;${colorHex(key)}m${text}\x1b[39m`;
 }
 /** Compact 1/8-cell context gauge for the footer's ctx field on hover: