@pellux/goodvibes-tui 0.28.0 → 1.0.0

package/src/renderer/process-indicator.ts

@@ -1,28 +1,16 @@
 import { type Line } from '../types/grid.ts';
 import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
-import { GLYPHS } from './ui-primitives.ts';
-
-/** Truncate a string to fit within maxWidth display columns. */
-function truncateToWidth(text: string, maxWidth: number): string {
-  let width = 0;
-  let i = 0;
-  for (const char of text) {
-    const cw = getDisplayWidth(char);
-    if (width + cw > maxWidth) break;
-    width += cw;
-    i += char.length;
-  }
-  return text.slice(0, i);
-}
+import { truncateDisplay } from '../utils/terminal-width.ts';
+import { GLYPHS, UI_TONES } from './ui-primitives.ts';
+import { formatHints } from './hint-grammar.ts';
 
 /**
  * renderProcessIndicator — shows a one-line summary of active background
  * processes below the input area.
  *
  * Dimmed when no processes are active, highlighted (cyan) when agents or
- * background exec processes are running. Includes an `Enter to view` hint
- * when active.
+ * background exec processes are running. Includes an `[Enter] View` hint
+ * (hint-grammar bracket form) when active.
  */
 export function renderProcessIndicator(
   width: number,
@@ -38,10 +26,10 @@ export function renderProcessIndicator(
   const renderFocusedStatus = (text: string): Line[] => {
     const bg = '#31506f';
     const fg = '#eefaff';
-    const markerFg = '#7dd3fc';
+    const markerFg = UI_TONES.accent.browser;
     const line = UIFactory.stringToLine(' '.repeat(width), width, { fg: '238' });
     const prefix = `${GLYPHS.navigation.selected} `;
-    const body = truncateToWidth(text, Math.max(0, width - 8));
+    const body = truncateDisplay(text, Math.max(0, width - 8), '');
     const highlighted = ` ${prefix}${body} `;
     const startX = 2;
     for (let i = 0; i < highlighted.length && startX + i < width - 2; i++) {
@@ -62,8 +50,8 @@ export function renderProcessIndicator(
     if (agentCount > 0) parts.push(`${agentCount} agent${agentCount !== 1 ? 's' : ''}`);
     if (toolCount > 0) parts.push(`${toolCount} tool${toolCount !== 1 ? 's' : ''} running`);
     const label = total === 0
-      ? `No background processes  ${GLYPHS.status.pending}  back to input`
-      : `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}  ${GLYPHS.status.pending}  Enter to open  ${GLYPHS.status.pending}  back to input`;
+      ? `No background processes  ${formatHints([{ key: 'Esc', verb: 'Back to input' }])}`
+      : `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}  ${formatHints([{ key: 'Enter', verb: 'Open' }, { key: 'Esc', verb: 'Back to input' }])}`;
     return renderFocusedStatus(label);
   }
 
@@ -83,14 +71,16 @@ export function renderProcessIndicator(
   /**
    * Number of columns reserved for the agent count label and hint text.
    * Breakdown: "bg: N agents" prefix (~15 chars) + " | " separator (~3)
-   * + "  Enter to view  " hint (~17) + padding (~8) ≈ 43 chars.
+   * + "  [Enter] View  " hint (~16) + padding (~9) ≈ 43 chars.
    */
   const PROGRESS_RESERVED_CHARS = 43;
   const progressMaxLen = Math.max(0, width - PROGRESS_RESERVED_CHARS); // reserve space for count + hint
+  // Truncate by display width (not JS string length) so wide/CJK glyphs in the
+  // agent progress text don't overflow the reserved budget.
   const progressSuffix = agentProgress && progressMaxLen > 10
-    ? ` | ${agentProgress.length > progressMaxLen ? agentProgress.slice(0, Math.max(0, progressMaxLen - 3)) + '...' : agentProgress}`
+    ? ` | ${truncateDisplay(agentProgress, progressMaxLen, '...')}`
     : '';
   const label = `${parts.join(` ${GLYPHS.navigation.pipeSeparator} `)}${progressSuffix}`;
-  const hint = `  ${GLYPHS.status.pending}  Enter to view`;
-  return renderPlainStatus(`${label}${hint}`, { fg: '#00ffff', bold: true });
+  const hint = `  ${formatHints([{ key: 'Enter', verb: 'View' }])}`;
+  return renderPlainStatus(`${label}${hint}`, { fg: UI_TONES.accent.brand, bold: true });
 }

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

@@ -3,7 +3,7 @@
  * using ModalFactory.
  *
  * Shows a list of saved profiles with:
- *   - name, timestamp (formatted), settings preview
+ *   - name, timestamp (formatted)
  * Footer hints: [Up/Down] Navigate  [Enter] Load  [d] Arm/Delete  [s] Save current  [Esc] Close
  */
 
@@ -55,18 +55,21 @@ export function renderProfilePickerModal(
       style: { fg: '240', dim: true },
     });
   } else {
-    // Column widths: name(24) | timestamp(16) | preview(remaining)
-    const nameW = 24;
-    const tsW = 16;
-    const previewW = Math.max(4, contentW - nameW - tsW - 4);
+    // Proportional column widths that adapt to the modal's content width:
+    // timestamp ~22% (clamped 10..16); the name column absorbs the remainder
+    // (ported from session-picker-modal.ts). Reserves 4 cols — 2 for the
+    // name/timestamp separator and 2 for the list row's selection indicator
+    // ("▸ ") that ModalFactory prepends outside the wrapped label — so the
+    // row never spills the timestamp's embedded space onto a wrapped line.
+    const tsW = Math.min(16, Math.max(10, Math.floor(contentW * 0.22)));
+    const nameW = Math.max(8, contentW - tsW - 4);
 
     // Column header
-    const nameHdr    = fitDisplay('Name', nameW);
-    const tsHdr      = fitDisplay('Saved', tsW);
-    const previewHdr = fitDisplay('Settings', previewW);
+    const nameHdr = fitDisplay('Name', nameW);
+    const tsHdr   = fitDisplay('Saved', tsW);
     sections.push({
       type: 'text',
-      content: `${nameHdr}  ${tsHdr}  ${previewHdr}`,
+      content: `${nameHdr}  ${tsHdr}`,
       style: { fg: '240', dim: true },
     });
     sections.push({ type: 'separator' });
@@ -79,11 +82,7 @@ export function renderProfilePickerModal(
 
       const tsStr = fitDisplay(formatTimestamp(prof.timestamp), tsW);
 
-      // Read the profile file to get a preview of settings
-      // (We only have name/timestamp in ProfileInfo, so show a placeholder)
-      const preview = fitDisplay('(display/provider/behavior)', previewW);
-
-      const label = `${nameStr}  ${tsStr}  ${preview}`;
+      const label = `${nameStr}  ${tsStr}`;
       return { label, selected: isSelected };
     });
 

package/src/renderer/prompt-content-width.ts

@@ -0,0 +1,16 @@
+/**
+ * computePromptContentWidth — content width available for prompt text inside
+ * the footer input box, after the box margin, inner padding, and the ' > '
+ * prefix are subtracted.
+ *
+ * Floors at 1: on a hostile-narrow terminal the raw subtraction
+ * (boxWidth - 4 - 3) can go zero or negative, and a non-positive content
+ * width breaks downstream text-wrapping and cursor-position math (which
+ * assume at least one column to place a character in).
+ */
+export function computePromptContentWidth(terminalColumns: number): number {
+  const w = terminalColumns || 80;
+  const boxMargin = 2;
+  const boxWidth = w - (boxMargin * 2);
+  return Math.max(1, boxWidth - 4 - 3); // minus padding (4) minus prefix width (3: ' > ')
+}

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/selection-modal-overlay.ts

@@ -196,10 +196,12 @@ export function renderSelectionModalOverlay(
     : selectedItem?.primaryAction === 'delete'
     ? '[Enter] Delete'
     : '[Enter] Select';
-  let hints = `[Up/Down] Navigate  ${primaryVerb}  [Esc] Close`;
+  let hints = `[Up/Down] Navigate  ${primaryVerb}`;
   if (modal.allowSearch) hints += '  [/] Search';
   if (selectedItem?.primaryAction === 'toggle' && !selectedItem.actions) hints += '  [Space] Toggle';
   if (selectedItem?.actions) hints += `  ${selectedItem.actions}`;
+  // hint-grammar: Esc is the conventional "way out" and always sorts last.
+  hints += '  [Esc] Close';
   putText(
     footerLine,
     layout.margin + 2,

package/src/renderer/semantic-diff.ts

@@ -328,7 +328,7 @@ const CHANGE_GLYPH: Record<ChangeKind, string> = {
  *   +  import  ./utils  { A, B }
  *   ~  import  ./types  (+NewType, -OldType)
  */
-export function formatSemanticDiff(diff: SemanticDiff): string[] {
+function formatSemanticDiff(diff: SemanticDiff): string[] {
   const lines: string[] = [];
 
   // Symbol changes first

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-helpers.ts

@@ -7,6 +7,13 @@
 import type { SettingEntry, McpEntry, SubscriptionEntry } from '../input/settings-modal-types.ts';
 import { SETTINGS_CATEGORIES } from '../input/settings-modal-types.ts';
 import { isSecretConfigKey, isSecretReferenceValue } from '../config/secret-config.ts';
+import { UI_TONES } from './ui-primitives.ts';
+
+/**
+ * "Modified / active" accent for settings rows — cyan-green, no UI_TONES
+ * role matches it (WO-207b: preserved byte-exact as a named constant).
+ */
+const SETTINGS_ACCENT = '#00ffcc';
 
 function maskSecretValue(value: string): string {
   if (value.length === 0) return '(empty)';
@@ -25,43 +32,12 @@ export function formatValue(entry: SettingEntry): string {
 }
 
 export function valueColor(entry: SettingEntry): string {
-  if (!entry.isDefault) return '#00ffcc'; // cyan-green = modified
-  return '244';                            // dim = default
+  if (!entry.isDefault) return SETTINGS_ACCENT; // cyan-green = modified
+  return '244';                                  // dim = default
 }
 
-export function flagStateColor(state: string, killed: boolean): string {
-  if (killed) return '#ef4444'; // red
-  if (state === 'enabled') return '#00ffcc'; // cyan-green
-  return '244'; // dim
-}
 
-export function mcpTrustColor(mode: McpEntry['trustMode']): string {
-  switch (mode) {
-    case 'allow-all':
-      return '#ef4444';
-    case 'ask-on-risk':
-      return '#eab308';
-    case 'constrained':
-      return '#00ffcc';
-    case 'blocked':
-      return '244';
-    default:
-      return '244';
-  }
-}
 
-export function subscriptionStateColor(state: SubscriptionEntry['state']): string {
-  switch (state) {
-    case 'active':
-      return '#00ffcc';
-    case 'pending':
-      return '#eab308';
-    case 'available':
-      return '#38bdf8';
-    default:
-      return '244';
-  }
-}
 
 export function inferSubscriptionRouteReason(entry: SubscriptionEntry): string | undefined {
   if (entry.routeReason?.trim()) return entry.routeReason;
@@ -107,7 +83,7 @@ export const CATEGORY_LABELS: Record<(typeof SETTINGS_CATEGORIES)[number], strin
   network: 'Network',
 };
 
-export const SETTING_LABELS: Partial<Record<string, string>> = {
+const SETTING_LABELS: Partial<Record<string, string>> = {
   'ui.systemMessages': 'System Message Target',
   'ui.operationalMessages': 'Operational Message Target',
   'ui.wrfcMessages': 'WRFC Message Target',

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,15 +47,42 @@ 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;
+// Compact posture drops the context-info line (and never shows the context
+// bar or process indicator), leaving just: prompt-box top border, bottom
+// border, token-usage line, and the help/exit line.
+const COMPACT_FOOTER_BASE_ROWS = 4;
+
+/**
+ * Real height of the most recently rendered footer, tagged with the compact
+ * posture it was rendered under. 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. The compact flag is part of the cache
+ * key: a cached non-compact height must never answer a compact query (and
+ * vice versa), since the two postures differ by several rows.
+ */
+let lastRenderedFooterHeight: { compact: boolean; height: number } | null = null;
 
 export function estimateShellFooterHeight(
   promptLineCount: number,
   contextWindow?: number,
+  compact = false,
 ): number {
+  if (lastRenderedFooterHeight !== null && lastRenderedFooterHeight.compact === compact) {
+    return lastRenderedFooterHeight.height;
+  }
   const safePromptLines = Math.max(1, promptLineCount);
+  if (compact) {
+    return COMPACT_FOOTER_BASE_ROWS + safePromptLines;
+  }
   const progressRows = contextWindow && contextWindow > 0 ? CONTEXT_PROGRESS_ROWS : 0;
   return FOOTER_BASE_ROWS + safePromptLines + progressRows + PROCESS_INDICATOR_ROWS;
 }
@@ -79,20 +112,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 = { compact: options.compact ?? false, height: 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/surface-layout.ts

@@ -87,15 +87,3 @@ export function getTrackedVisibleWindow(
   }
   return { start, end, count: end - start, total };
 }
-
-export function sliceVisibleWindow<T>(
-  items: readonly T[],
-  selectedIndex: number,
-  visibleCount: number,
-): { readonly items: readonly T[]; readonly window: VisibleWindow } {
-  const window = getVisibleWindow(items.length, selectedIndex, visibleCount);
-  return {
-    items: items.slice(window.start, window.end),
-    window,
-  };
-}

package/src/renderer/term-caps.ts

@@ -223,7 +223,7 @@ export function nearestAnsi16Fg(r: number, g: number, b: number): number {
  * Convert an ANSI16 fg code to the corresponding bg code.
  * fg 30-37 → bg 40-47; fg 90-97 → bg 100-107.
  */
-export function ansi16FgToBg(fgCode: number): number {
+function ansi16FgToBg(fgCode: number): number {
   // Both ranges (30-37 and 90-97) shift by +10 to reach their bg equivalents
   // (30-37 → 40-47, 90-97 → 100-107).
   return fgCode + 10;

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;
+}