@pellux/goodvibes-tui 0.28.0 → 0.29.0

package/src/renderer/search-overlay.ts

@@ -25,18 +25,39 @@ export function renderSearchOverlay(
   const locked = manager.locked;
   const cursor = locked ? '' : '█';
   const queryDisplay = manager.query + cursor;
-  const hints = locked
+  const label = ' Find: ';
+  const fullHints = locked
     ? '  [n/N] next/prev  [jk] navigate  [Bksp] edit  [Esc] close'
     : '  [Enter/Tab] lock  [Esc] close';
-  const label = ' Find: ';
-  const matchStr = matchCount ? ` ${matchCount}` : '';
+  const shortHints = locked ? '  [n/N]  [Esc]' : '  [Esc]';
 
   // Build left portion: label + query (no match count — that gets separate styling)
   const leftPart = label + queryDisplay;
-  const hintsW = getDisplayWidth(hints);
+
+  // Tiered degradation: as the terminal narrows, first shorten the hints, then
+  // drop them, then drop the match-count segment — so the query area (leftWidth)
+  // never collapses to zero or negative and the overlay never renders garbage.
+  const minLeft = getDisplayWidth(label) + 4; // label + a few query cells
+  let hints = fullHints;
+  let matchStr = matchCount ? ` ${matchCount}` : '';
+  const leftFor = (h: string, m: string) => width - getDisplayWidth(h) - getDisplayWidth(m) - 2;
+  let leftWidth = leftFor(hints, matchStr);
+  if (leftWidth < minLeft) {
+    hints = shortHints;
+    leftWidth = leftFor(hints, matchStr);
+  }
+  if (leftWidth < minLeft) {
+    hints = '';
+    leftWidth = leftFor(hints, matchStr);
+  }
+  if (leftWidth < minLeft && matchStr.length > 0) {
+    matchStr = '';
+    leftWidth = leftFor(hints, matchStr);
+  }
+  // Final clamp: at least one cell, never wider than the bar.
+  leftWidth = Math.max(1, Math.min(width, leftWidth));
+
   const matchStrW = getDisplayWidth(matchStr);
-  // Available width for left content (query area)
-  const leftWidth = width - hintsW - matchStrW - 2;
   const truncatedLeft = fitDisplay(
     getDisplayWidth(leftPart) > leftWidth ? truncateDisplay(leftPart, leftWidth) : leftPart,
     leftWidth,

package/src/renderer/session-picker-modal.ts

@@ -55,10 +55,12 @@ export function renderSessionPickerModal(
       style: { fg: '240', dim: true },
     });
   } else {
-    // Column widths: name(24) | timestamp(16) | messages(remaining)
-    const nameW = 24;
-    const tsW = 16;
-    const msgW = Math.max(4, contentW - nameW - tsW - 4); // 4 = separators/spaces
+    // Proportional column widths that adapt to the modal's content width:
+    // timestamp ~22% (clamped 10..16), messages ~12% (clamped 4..8), and the
+    // name column absorbs the remainder so the row always fills contentW.
+    const tsW = Math.min(16, Math.max(10, Math.floor(contentW * 0.22)));
+    const msgW = Math.min(8, Math.max(4, Math.floor(contentW * 0.12)));
+    const nameW = Math.max(8, contentW - tsW - msgW - 4); // 4 = separators/spaces
 
     // Column header
     const nameHdr = fitDisplay('Name', nameW);

package/src/renderer/settings-modal.ts

@@ -12,6 +12,7 @@ import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { CATEGORY_LABELS, describeUiRouting, formatValue, getSettingLabel, inferSubscriptionRouteReason, valueColor } from './settings-modal-helpers.ts';
 import { isSecretConfigKey } from '../config/secret-config.ts';
 import { GLYPHS } from './ui-primitives.ts';
+import { formatHints, joinHints } from './hint-grammar.ts';
 import {
   clamp,
   getFullscreenWorkspaceMetrics,
@@ -540,24 +541,83 @@ function rowColorForSetting(modal: SettingsModal, rowText: string): string {
 }
 
 function footerText(modal: SettingsModal, width: number): string {
+  // Every branch speaks the shared hint grammar: bracketed [Key] Verb segments
+  // joined by the middle dot, with Esc sorted last. Leading words like
+  // "Focus settings" are state labels appended verbatim, not key hints.
   // Armed reset gate takes priority over all other footer states.
   if (modal.resetCategoryConfirm !== null || modal.resetAllConfirm !== null)
-    return 'Reset armed · Enter/y confirm · Esc/n cancel';
-  if (modal.searchFocused) return 'Search · type to filter · Up/Down navigate results · Enter select · Esc exit search';
-  if (modal.editingMode) return 'Enter Confirm edit · Esc Cancel edit · text keys edit the selected field';
-  if (modal.focusPane === 'categories') return 'Focus categories · Up/Down choose · Right/Enter settings · Tab pane · / search · Esc close';
-  if (modal.currentCategory === 'subscriptions') return 'Focus settings · Up/Down provider · Left categories · Tab pane · / search · Enter review/sign out · Esc close';
-  if (modal.currentCategory === 'mcp') return 'Focus settings · Up/Down server · Left categories · Tab pane · / search · Enter edit trust · Esc close';
-  if (modal.currentCategory === 'flags') return 'Focus feature flags · Up/Down flag · Left categories · Tab pane · / search · Enter/Space toggle · Esc close';
+    return joinHints('Reset armed', formatHints([
+      { key: 'Enter/y', verb: 'confirm' },
+      { key: 'Esc/n', verb: 'cancel' },
+    ]));
+  if (modal.searchFocused)
+    return joinHints('Search', 'type to filter', formatHints([
+      { key: 'Up/Down', verb: 'Navigate' },
+      { key: 'Enter', verb: 'Select' },
+      { key: 'Esc', verb: 'Exit search' },
+    ]));
+  if (modal.editingMode)
+    return formatHints([
+      { key: 'Enter', verb: 'Confirm edit' },
+      { key: 'Esc', verb: 'Cancel edit' },
+    ]);
+  if (modal.focusPane === 'categories')
+    return joinHints('Focus categories', formatHints([
+      { key: 'Up/Down', verb: 'Choose' },
+      { key: 'Right/Enter', verb: 'Settings' },
+      { key: 'Tab', verb: 'Pane' },
+      { key: '/', verb: 'Search' },
+      { key: 'Esc', verb: 'Close' },
+    ]));
+  if (modal.currentCategory === 'subscriptions')
+    return joinHints('Focus settings', formatHints([
+      { key: 'Up/Down', verb: 'Provider' },
+      { key: 'Left', verb: 'Categories' },
+      { key: 'Tab', verb: 'Pane' },
+      { key: '/', verb: 'Search' },
+      { key: 'Enter', verb: 'Review/sign out' },
+      { key: 'Esc', verb: 'Close' },
+    ]));
+  if (modal.currentCategory === 'mcp')
+    return joinHints('Focus settings', formatHints([
+      { key: 'Up/Down', verb: 'Server' },
+      { key: 'Left', verb: 'Categories' },
+      { key: 'Tab', verb: 'Pane' },
+      { key: '/', verb: 'Search' },
+      { key: 'Enter', verb: 'Edit trust' },
+      { key: 'Esc', verb: 'Close' },
+    ]));
+  if (modal.currentCategory === 'flags')
+    return joinHints('Focus feature flags', formatHints([
+      { key: 'Up/Down', verb: 'Flag' },
+      { key: 'Left', verb: 'Categories' },
+      { key: 'Tab', verb: 'Pane' },
+      { key: '/', verb: 'Search' },
+      { key: 'Enter/Space', verb: 'Toggle' },
+      { key: 'Esc', verb: 'Close' },
+    ]));
   // Default settings pane: tier the reset affordances by available width.
   // W<80:  minimal — only the most critical action survives.
   // W<160: compact but still shows both reset affordances.
   // W≥160: standard with all navigation tokens.
   if (width < 80)
-    return 'R reset · Esc';
+    return formatHints([{ key: 'R', verb: 'reset' }, { key: 'Esc', verb: 'Close' }]);
   if (width < 160)
-    return 'Up/Down · Enter/Space edit · ⇧R reset cat · ^⇧R reset all · Esc';
-  return 'Focus settings · Up/Down setting · Left · Enter/Space edit/toggle · ⇧R reset cat · ^⇧R reset all · Esc close';
+    return formatHints([
+      { key: 'Up/Down', verb: 'Move' },
+      { key: 'Enter/Space', verb: 'Edit' },
+      { key: '⇧R', verb: 'reset cat' },
+      { key: '^⇧R', verb: 'reset all' },
+      { key: 'Esc', verb: 'Close' },
+    ]);
+  return joinHints('Focus settings', formatHints([
+    { key: 'Up/Down', verb: 'Setting' },
+    { key: 'Left', verb: 'Categories' },
+    { key: 'Enter/Space', verb: 'Edit/toggle' },
+    { key: '⇧R', verb: 'reset cat' },
+    { key: '^⇧R', verb: 'reset all' },
+    { key: 'Esc', verb: 'Close' },
+  ]));
 }
 
 export function renderSettingsModal(

package/src/renderer/shell-surface.ts

@@ -34,6 +34,12 @@ export interface ShellFooterBuildOptions {
    * Rendered as a dim informational line above the prompt when non-null.
    */
   readonly contextStatusHint?: string | null;
+  /**
+   * Compact footer posture for short terminals (~<30 rows). Collapses the
+   * footer to its essentials (prompt box + token/cost line + help) and drops
+   * the process indicator, context bar, context-info line and posture block.
+   */
+  readonly compact?: boolean;
 }
 
 export interface ShellFooterBuildResult {
@@ -41,14 +47,28 @@ export interface ShellFooterBuildResult {
   readonly height: number;
 }
 
-const FOOTER_BASE_ROWS = 9;
-const CONTEXT_PROGRESS_ROWS = 2;
+// Fixed rows that createFooter always emits (non-compact): prompt-box top
+// border, prompt-box bottom border, token-usage line, context-info line, and
+// the help/exit line. The composer posture block and context bar are counted
+// separately (they are conditional).
+const FOOTER_BASE_ROWS = 5;
+const CONTEXT_PROGRESS_ROWS = 1;
 const PROCESS_INDICATOR_ROWS = 1;
 
+/**
+ * Real height of the most recently rendered footer. estimateShellFooterHeight
+ * prefers this so the pre-prompt viewport math accounts for the composer
+ * posture block and context hint that the static formula cannot see. Reset to
+ * null before any footer has rendered (cold start), where the formula is exact
+ * for the common posture-free, hint-free case.
+ */
+let lastRenderedFooterHeight: number | null = null;
+
 export function estimateShellFooterHeight(
   promptLineCount: number,
   contextWindow?: number,
 ): number {
+  if (lastRenderedFooterHeight !== null) return lastRenderedFooterHeight;
   const safePromptLines = Math.max(1, promptLineCount);
   const progressRows = contextWindow && contextWindow > 0 ? CONTEXT_PROGRESS_ROWS : 0;
   return FOOTER_BASE_ROWS + safePromptLines + progressRows + PROCESS_INDICATOR_ROWS;
@@ -79,20 +99,26 @@ export function buildShellFooter(
     options.composerStatus,
     options.composerFlags,
     options.composerPendingRisk,
+    options.compact ?? false,
   );
-  const processIndicator = renderProcessIndicator(
-    options.width,
-    options.runningAgentCount,
-    options.runningProcessCount,
-    options.indicatorFocused,
-    options.runningAgentProgress,
-  );
-  const inputBoxRows = Math.max(1, options.promptLineCount) + 2;
-  lines.splice(inputBoxRows, 0, ...processIndicator);
-  // Passive context status hint — rendered as a dim informational line before the prompt.
-  if (options.contextStatusHint) {
-    const hintLine = UIFactory.stringToLine(options.contextStatusHint, options.width, { fg: '#64748b' });
-    lines.unshift(hintLine);
+  // Compact posture drops the process indicator and context hint entirely so
+  // the footer fits within ~5 rows on short terminals.
+  if (!options.compact) {
+    const processIndicator = renderProcessIndicator(
+      options.width,
+      options.runningAgentCount,
+      options.runningProcessCount,
+      options.indicatorFocused,
+      options.runningAgentProgress,
+    );
+    const inputBoxRows = Math.max(1, options.promptLineCount) + 2;
+    lines.splice(inputBoxRows, 0, ...processIndicator);
+    // Passive context status hint — rendered as a dim informational line before the prompt.
+    if (options.contextStatusHint) {
+      const hintLine = UIFactory.stringToLine(options.contextStatusHint, options.width, { fg: '#64748b' });
+      lines.unshift(hintLine);
+    }
   }
+  lastRenderedFooterHeight = lines.length;
   return { lines, height: lines.length };
 }

package/src/renderer/status-glyphs.ts

@@ -4,18 +4,20 @@
 // Extracted as a neutral module so both status-token.ts and polish.ts can
 // import from here without creating a circular ESM dependency.
 //
-// Glyphs:
-//   good  ✓  (CHECK MARK U+2713)
-//   warn  ⚠  (WARNING SIGN U+26A0)
-//   bad   ✕  (MULTIPLICATION X U+2715)
-//   info  ○  (WHITE CIRCLE U+25CB)
+// STATE_GLYPHS is an alias into GLYPHS.status (ui-primitives.ts) — the single
+// glyph registry. Previously GLYPHS.status.info ('•') collided with
+// GLYPHS.status.pending, and STATE_GLYPHS.info ('○') collided with
+// GLYPHS.status.idle. GLYPHS.status.info is now '○' (this module's historical
+// value) and idle uses a distinct glyph ('◌').
 // ---------------------------------------------------------------------------
 
+import { GLYPHS } from './ui-primitives.ts';
+
 export type StatusState = 'good' | 'warn' | 'bad' | 'info';
 
 export const STATE_GLYPHS: Record<StatusState, string> = {
-  good: '\u2713', // ✓
-  warn: '\u26a0', // ⚠
-  bad:  '\u2715', // ✕
-  info: '\u25cb', // ○
+  good: GLYPHS.status.success, // ✓
+  warn: GLYPHS.status.warn,    // ⚠
+  bad:  GLYPHS.status.failure, // ✕
+  info: GLYPHS.status.info,    // ○
 };

package/src/renderer/theme.ts

@@ -14,8 +14,19 @@
  * IMPORTANT: inline code has NO background token. The bg:#1a1a1a hardcode
  * that previously existed caused a near-black box on light terminals.
  * Differentiate inline code via inlineCodeFg + bold only; bg inherits terminal.
+ *
+ * resolveUiTones(mode) is the sibling read path for CHROME tokens (UI_TONES
+ * in ui-primitives.ts — panel/modal/overlay/fullscreen backgrounds, borders,
+ * status colours). It composes the same ThemeMode dimension so that
+ * DEFAULT_PANEL_PALETTE, DEFAULT_STYLE, FULLSCREEN_PALETTE and
+ * DEFAULT_OVERLAY_PALETTE all read through ONE mode-resolved path instead of
+ * importing the static UI_TONES constant directly. Mode stays 'dark'
+ * everywhere until the terminal-bg-probe lands (see WO-001) — the light
+ * entry is type-complete, not a shipped light theme.
  */
 
+import { UI_TONES } from './ui-primitives.ts';
+
 /** Background mode — dark is the safe default until terminal-bg-probe lands. */
 export type ThemeMode = 'dark' | 'light';
 
@@ -78,9 +89,9 @@ const DARK: ThemeTokens = {
   searchCurrentFg: '#000000',
   strikethrough:   '244',
   blockquote:      '244',
-  assistantHeader: '#22d3ee',
-  reasoningAccent: '#a855f7',
-  toolAccent:      '#38bdf8',
+  assistantHeader: UI_TONES.accent.control,
+  reasoningAccent: UI_TONES.state.reasoning,
+  toolAccent:      UI_TONES.state.info,
   collapsedBodyBg: '#1a1a1a',
   checkboxChecked: '#22c55e',
   errorBarBg:      '#3a1a1a',
@@ -156,3 +167,49 @@ Object.freeze(LIGHT);
  * Frozen — do not mutate.
  */
 export const DARK_THEME: Readonly<ThemeTokens> = DARK;
+
+// ---------------------------------------------------------------------------
+// Chrome tokens (UI_TONES) — mode-resolved sibling to resolveTheme().
+//
+// UI_TONES (ui-primitives.ts) is the dark entry. The light entry mirrors
+// dark for every role that has no light-appropriate equivalent yet — the
+// WO-001 deliverable is the mode dimension and single read path, not a
+// shipped light chrome theme (see module doc comment above).
+// ---------------------------------------------------------------------------
+
+/** Recursively widen the `as const` literal leaves of UI_TONES to `string`
+ * so mode variants (e.g. UI_TONES_LIGHT) can assign different colour
+ * values without fighting TypeScript's literal-type inference. */
+type DeepWidenToString<T> = T extends string ? string : { [K in keyof T]: DeepWidenToString<T[K]> };
+
+export type UiToneTokens = DeepWidenToString<typeof UI_TONES>;
+
+const UI_TONES_LIGHT: UiToneTokens = {
+  ...UI_TONES,
+  state: {
+    ...UI_TONES.state,
+    info: LIGHT.toolAccent,
+    reasoning: LIGHT.reasoningAccent,
+  },
+  accent: {
+    ...UI_TONES.accent,
+    brand: LIGHT.heading1,
+    gradientStart: LIGHT.heading1,
+    gradientEnd: LIGHT.reasoningAccent,
+  },
+};
+
+Object.freeze(UI_TONES_LIGHT.state);
+Object.freeze(UI_TONES_LIGHT.accent);
+Object.freeze(UI_TONES_LIGHT);
+
+/**
+ * resolveUiTones — Return the chrome (panel/modal/overlay/fullscreen) token
+ * set for the given background mode. Single read path for UI_TONES; the
+ * 'dark' resolution is byte-identical to the UI_TONES constant.
+ *
+ * Call with 'dark' (the safe default) until terminal-bg-probe lands.
+ */
+export function resolveUiTones(mode: ThemeMode): Readonly<UiToneTokens> {
+  return mode === 'light' ? UI_TONES_LIGHT : UI_TONES;
+}

package/src/renderer/ui-factory.ts

@@ -4,10 +4,12 @@ import { VERSION } from '../version.ts';
 import { fitDisplay, getDisplayWidth, truncateDisplay, wrapText, interpolateColor } from '../utils/terminal-width.ts';
 import type { GitHeaderInfo } from './git-status.ts';
 import { renderConversationFragment, renderConversationStatusLine, type ConversationStatusSegment } from './conversation-surface.ts';
-import { GLYPHS } from './ui-primitives.ts';
+import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 import { formatElapsed } from '../utils/format-elapsed.ts';
 import { abbreviateCount } from '../utils/format-number.ts';
 import { computeContextUsage } from '../core/context-usage.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { buildFooterTip, isAgentActive } from './footer-tips.ts';
 
 /** Number of frames before the animated gradient completes one full cycle. */
 const GRADIENT_CYCLE_FRAMES = 50;
@@ -35,15 +37,23 @@ function fmtNum(n: number): string {
   return abbreviateCount(n, { bSuffix: true });
 }
 
+/** Format a running USD cost estimate with a precision that suits its magnitude. */
+function fmtCost(usd: number): string {
+  if (!(usd > 0)) return '0.00';
+  if (usd < 0.01) return usd.toFixed(4);
+  if (usd < 1) return usd.toFixed(3);
+  return usd.toFixed(2);
+}
+
 /**
  * UIFactory - Generates standard UI fragments without needing Ink/React overhead.
  */
 export class UIFactory {
   public static createHeader(width: number, model: string, provider: string, title?: string, gitInfo?: GitHeaderInfo): Line[] {
     const lines: Line[] = [];
-    const CYAN = '#00ffff';
-    const GREY = '244';
-    const TITLE_COLOR = '250';
+    const CYAN = UI_TONES.accent.brand;
+    const GREY = UI_TONES.fg.dim;
+    const TITLE_COLOR = UI_TONES.fg.muted;
     const brand = ` GoodVibes `;
     const ver = `v${VERSION} `;
     const stats = ` ${model} `;
@@ -77,11 +87,11 @@ export class UIFactory {
     }
     // Build git info segment
     let gitStr = '';
-    let gitFg = '238';
+    let gitFg: string = UI_TONES.fg.dim;
     if (gitInfo) {
       gitStr = buildGitSegment(gitInfo).text;
       if (gitInfo.dirty || gitInfo.ahead > 0 || gitInfo.behind > 0) {
-        gitFg = '220'; // yellow when dirty or out-of-sync
+        gitFg = UI_TONES.state.warn; // yellow when dirty or out-of-sync
       }
     }
     const rightSideText = stats + prov;
@@ -91,7 +101,7 @@ export class UIFactory {
     for (const char of stats) { if (rightX < width) line[rightX++] = { char, fg: CYAN, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false }; }
     for (const char of prov) { if (rightX < width) line[rightX++] = { char, fg: GREY, bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false }; }
     lines.push(line);
-    lines.push(this.stringToLine('━'.repeat(width), width, { fg: '244' }));
+    lines.push(this.stringToLine('━'.repeat(width), width, { fg: UI_TONES.fg.dim }));
     return lines;
   }
 
@@ -101,12 +111,12 @@ export class UIFactory {
    */
   public static createMessageBar(
     width: number, text: string,
-    bgColor = '#2a2a2a', textColor = '252', prefixStr = ' › ',
+    bgColor: string = '#2a2a2a', textColor: string = UI_TONES.fg.secondary, prefixStr: string = ' › ',
     strikethrough = false
   ): Line[] {
     return renderConversationFragment(text, width, {
       prefix: prefixStr,
-      prefixFg: '135',
+      prefixFg: UI_TONES.state.reasoning,
       text: textColor,
       bodyBg: bgColor,
       strikethrough,
@@ -119,8 +129,8 @@ export class UIFactory {
   public static createQueuedMessageFragment(width: number, text: string): Line[] {
     return renderConversationFragment(text, width, {
       prefix: ' (...) ',
-      prefixFg: '135',
-      text: '240',
+      prefixFg: UI_TONES.state.reasoning,
+      text: UI_TONES.fg.dim,
       bodyBg: '#1a1a1a',
       dim: true,
     });
@@ -148,6 +158,7 @@ export class UIFactory {
     composerStatus?: string,
     composerFlags?: readonly string[],
     composerPendingRisk?: 'none' | 'approval-wait' | 'shell' | 'command' | 'remote',
+    compact: boolean = false,
   ): Line[] {
     const lines: Line[] = [];
     const promptLines = prompt.split('\n');
@@ -253,7 +264,9 @@ export class UIFactory {
       }
     }
     lines.push(bottomLine);
-    lines.push(createBaseLine());
+    // --- Composer posture block (mode / risk / status / flags) ------------
+    // Suppressed in compact mode; the ctx-info line no longer duplicates these
+    // tokens, so this block is the single home for mode/status/flags.
     const composerTokens: Array<{ text: string; fg: string; bold?: boolean; dim?: boolean }> = [];
     if (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: '#38bdf8', bold: true });
     if (composerPendingRisk && composerPendingRisk !== 'none') {
@@ -268,7 +281,7 @@ export class UIFactory {
     }
     if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
     if (composerFlags && composerFlags.length > 0) composerTokens.push({ text: ` flags:${composerFlags.join(',')} `, fg: '244', dim: true });
-    if (composerTokens.length > 0) {
+    if (!compact && composerTokens.length > 0) {
       const postureLine = createBaseLine();
       let px = 2;
       for (const token of composerTokens) {
@@ -289,10 +302,10 @@ export class UIFactory {
         if (px >= width) break;
       }
       lines.push(postureLine);
-      lines.push(createBaseLine());
     }
     const isRecentlyCopied = Date.now() - lastCopyTime < 2000;
-    // Token usage line
+    // Token usage line + running ~$ cost estimate (derived from the usage
+    // object and the active model via cost-utils).
     const u = usage as { input?: number; output?: number; cacheRead?: number; cacheWrite?: number; up?: number; down?: number };
     const inp = u.input ?? u.up ?? 0;
     const out = u.output ?? u.down ?? 0;
@@ -300,12 +313,13 @@ export class UIFactory {
     const cw = u.cacheWrite ?? 0;
     const total = inp + out + cr + cw;
     const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
-    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)} ]`;
+    const costSegment = model ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}` : '';
+    const tokenLine = ` Token Usage [ Input: ${fmtNum(inp)}${tokenSep}Output: ${fmtNum(out)}${tokenSep}Cache Read: ${fmtNum(cr)}${tokenSep}Cache Write: ${fmtNum(cw)}${tokenSep}Total: ${fmtNum(total)}${costSegment} ]`;
     const copiedNotice = isRecentlyCopied ? ` [COPIED] ` : '';
     const statsLine = '  ' + tokenLine + ' '.repeat(Math.max(0, width - 4 - getDisplayWidth(tokenLine) - getDisplayWidth(copiedNotice))) + copiedNotice;
     lines.push(this.stringToLine(statsLine, width, { fg: isRecentlyCopied ? '81' : '244', bold: isRecentlyCopied }));
-    // Context usage progress bar
-    if (contextWindow && contextWindow > 0) {
+    // Context usage progress bar — suppressed in compact mode.
+    if (!compact && contextWindow && contextWindow > 0) {
       const ctxTokens = lastInputTokens ?? 0;
       const label = '   Context Usage: ';
       const suffix = ` [ ${fmtNum(ctxTokens)} / ${fmtNum(contextWindow)} ]`;
@@ -315,11 +329,12 @@ export class UIFactory {
       const thresholdFraction = (compactThreshold !== undefined && compactThreshold > 0)
         ? Math.min(1, compactThreshold)
         : undefined;
-      lines.push(createBaseLine());
       lines.push(this.createProgressBarLine(label, ctxPct, barWidth, width, suffix, thresholdFraction));
     }
-    // Context info line (working dir, model+provider, tools)
-    if (workingDir || model) {
+    // Context info line (working dir, model+provider, tools, hitl).
+    // Suppressed in compact mode. mode/status/flags are intentionally omitted —
+    // the posture block above owns them, so they are not duplicated here.
+    if (!compact && (workingDir || model)) {
       const home = typeof process !== 'undefined' ? process.env.HOME ?? '' : '';
       const displayDir = workingDir && home && workingDir.startsWith(home)
         ? '~' + workingDir.slice(home.length)
@@ -331,19 +346,16 @@ export class UIFactory {
       }
       if (toolCount) ctxParts.push(`${toolCount} tools`);
       if (hitlMode) ctxParts.push(`hitl:${hitlMode}`);
-      if (composerMode) ctxParts.push(`mode:${composerMode}`);
-      if (composerStatus && composerStatus !== 'idle') ctxParts.push(`status:${composerStatus}`);
-      if (composerFlags && composerFlags.length > 0) ctxParts.push(composerFlags.join(','));
       const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
-      lines.push(createBaseLine());
       lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
-      lines.push(createBaseLine());
     }
     if (showExitNotice) {
       const notice = `   !!! Press Ctrl+C again to exit !!! `;
       lines.push(this.stringToLine(fitDisplay(notice, width), width, { fg: '196', bold: true }));
     } else {
-      const help = `   /help for commands  -  Ctrl+C to quit `;
+      // Persistent discoverability tip. Rotates by context (agent-aware): the
+      // process-monitor tip leads while a turn is in flight. See footer-tips.ts.
+      const help = `   ${buildFooterTip({ agentActive: isAgentActive(composerStatus) })} `;
       const dangerWarn = dangerMode ? `! DANGER MODE - ALL CHANGES AUTO-APPROVED ` : '';
       const helpW = getDisplayWidth(help);
       const dangerW = getDisplayWidth(dangerWarn);
@@ -363,7 +375,6 @@ export class UIFactory {
       }
       lines.push(line);
     }
-    lines.push(createBaseLine());
     return lines;
   }
 
@@ -392,8 +403,8 @@ export class UIFactory {
   ];
 
   /** Gradient colors for thinking text — cyan to purple (matches splash). */
-  private static readonly THINK_GRADIENT_START = '#00ffff';
-  private static readonly THINK_GRADIENT_END = '#d000ff';
+  private static readonly THINK_GRADIENT_START = UI_TONES.accent.gradientStart;
+  private static readonly THINK_GRADIENT_END = UI_TONES.accent.gradientEnd;
 
   public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: number): Line[] {
     // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)

package/src/renderer/ui-primitives.ts

@@ -35,8 +35,9 @@ export const GLYPHS = {
     failure: '✕',
     pending: '•',
     active: '●',
-    idle: '○',
-    info: '•',
+    idle: '◌',
+    info: '○',
+    warn: '⚠',
     blocked: '⊘',
     skipped: '◇',
     review: '◈',
@@ -56,6 +57,11 @@ export const GLYPHS = {
   },
 } as const;
 
+/**
+ * UI_TONES — the single chrome/color-token source for src/renderer and
+ * src/panels. Concrete (dark-mode) values; resolveUiTones(mode) in theme.ts
+ * is the single mode-resolved read path — this object is the 'dark' entry.
+ */
 export const UI_TONES = {
   fg: {
     primary: '#e2e8f0',
@@ -63,6 +69,8 @@ export const UI_TONES = {
     muted: '#94a3b8',
     dim: '#475569',
     inverse: '#0f172a',
+    /** Empty-state / placeholder foreground (formerly DEFAULT_PANEL_PALETTE.empty literal). */
+    empty: '#334155',
   },
   bg: {
     base: '#11131a',
@@ -75,6 +83,8 @@ export const UI_TONES = {
     warning: '#2b2116',
     error: '#2a161b',
     success: '#14241b',
+    /** Fullscreen/shell footer background. */
+    footer: '#111827',
   },
   state: {
     info: '#38bdf8',
@@ -83,6 +93,8 @@ export const UI_TONES = {
     bad: '#ef4444',
     blocked: '#f97316',
     active: '#60a5fa',
+    /** Single canonical reasoning/thinking purple (replaces #9945FF and ad-hoc purples). */
+    reasoning: '#a855f7',
   },
   accent: {
     browser: '#7dd3fc',
@@ -90,7 +102,16 @@ export const UI_TONES = {
     inspector: '#c4b5fd',
     workflow: '#fbbf24',
     conversation: '#93c5fd',
+    /** Neon brand accent — header/splash/thinking gradient only. */
+    brand: '#00ffff',
+    gradientStart: '#00ffff',
+    gradientEnd: '#d000ff',
   },
+  /** Canonical border stroke color for fullscreen/panel chrome. */
+  border: '#64748b',
 } as const;
 
 export type UiGlyphRegistry = typeof GLYPHS;
+
+/** Single spinner-frame source — layout.ts and progress.ts both re-export this. */
+export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const;