@pellux/goodvibes-tui 0.29.0 → 1.1.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,16 +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
-    ? ` | ${getDisplayWidth(agentProgress) > progressMaxLen ? truncateToWidth(agentProgress, 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/process-modal.ts

@@ -85,7 +85,7 @@ function buildAgentLabel(rec: AgentRecord, deps: ProcessModalDeps): string {
   if (task.startsWith('WRFC Review Request')) {
     const thresholdMatch = task.match(/threshold is (\d+(?:\.\d+)?)/);
     const threshold = thresholdMatch ? thresholdMatch[1] : '9.9';
-    const desc = truncateFirst(originalTask ?? 'review in progress', 50);
+    const desc = truncateFirst(originalTask ?? embeddedTaskDescription(task) ?? 'review in progress', 50);
     return `[Review] ${desc}  (target: ${threshold}/10)`;
   }
 
@@ -96,7 +96,7 @@ function buildAgentLabel(rec: AgentRecord, deps: ProcessModalDeps): string {
     const toScore = scoreMatch ? scoreMatch[3] : '?';
     const attemptMatch = task.match(/Fix attempt:\s*(\d+)/);
     const attempt = attemptMatch ? attemptMatch[1] : '?';
-    const desc = truncateFirst(originalTask ?? 'fix in progress', 45);
+    const desc = truncateFirst(originalTask ?? embeddedTaskDescription(task) ?? 'fix in progress', 45);
     // Show constraint count when the chain has constraints to target (SDK 0.23.0)
     const chain = rec.wrfcId ? safeGetChain(rec.wrfcId, deps) : null;
     const constraintCount = chain && (chain.constraints?.length ?? 0) > 0 ? chain.constraints?.length ?? 0 : 0;
@@ -441,6 +441,21 @@ function getChainTask(wrfcId: string | undefined, deps: Pick<ProcessModalDeps, '
   return safeGetChain(wrfcId, deps)?.task ?? null;
 }
 
+/**
+ * Fallback for when the WRFC chain lookup comes back null (chain already
+ * completed/evicted, or wrfcId not populated on the record) — the record's
+ * own `rec.task` is seeded as `'WRFC Review Request\n<original task
+ * description>'` / `'WRFC Fix Request\n...'`, so the description is sitting
+ * right there even without the chain. Returns null (not the generic
+ * placeholder) when there's no second line to extract.
+ */
+function embeddedTaskDescription(task: string): string | null {
+  const firstNewline = task.indexOf('\n');
+  if (firstNewline === -1) return null;
+  const desc = task.slice(firstNewline + 1).trim();
+  return desc.length > 0 ? desc : null;
+}
+
 /** Truncate to first line, capped at max chars. */
 function truncateFirst(text: string, max: number): string {
   const line = text.split('\n')[0].trim();

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/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/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/shell-surface.ts

@@ -8,6 +8,13 @@ export interface ShellFooterBuildOptions {
   readonly promptLineCount: number;
   readonly promptCursorPos?: number;
   readonly promptFocused?: boolean;
+  /**
+   * True when the panel workspace owns keyboard focus. Only consulted as a
+   * fallback when `promptFocused` is not supplied — see buildShellFooter's
+   * default expression. Callers that already compute `promptFocused`
+   * themselves (main.ts does) do not need to also pass this.
+   */
+  readonly panelFocused?: boolean;
   readonly usage: { up: number; down: number };
   readonly showExitNotice: boolean;
   readonly lastCopyTime: number;
@@ -54,22 +61,35 @@ export interface ShellFooterBuildResult {
 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. 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.
+ * 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: number | null = null;
+let lastRenderedFooterHeight: { compact: boolean; height: number } | null = null;
 
 export function estimateShellFooterHeight(
   promptLineCount: number,
   contextWindow?: number,
+  compact = false,
 ): number {
-  if (lastRenderedFooterHeight !== null) return lastRenderedFooterHeight;
+  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;
 }
@@ -94,7 +114,7 @@ export function buildShellFooter(
     options.lastInputTokens,
     options.commandArgsHint,
     options.hitlMode,
-    options.promptFocused ?? !options.indicatorFocused,
+    options.promptFocused ?? (!options.indicatorFocused && !options.panelFocused),
     options.composerMode,
     options.composerStatus,
     options.composerFlags,
@@ -119,6 +139,6 @@ export function buildShellFooter(
       lines.unshift(hintLine);
     }
   }
-  lastRenderedFooterHeight = lines.length;
+  lastRenderedFooterHeight = { compact: options.compact ?? false, height: lines.length };
   return { lines, height: lines.length };
 }

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/tool-call.ts

@@ -4,6 +4,7 @@ import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
 import type { ToolCall } from '@pellux/goodvibes-sdk/platform/types';
 import { stripDangerousAnsi } from './ansi-sanitize.ts';
 import { formatElapsed } from '../utils/format-elapsed.ts';
+import { UI_TONES } from './ui-primitives.ts';
 
 const TOOL_NAME_MIN_WIDTH = 8;
 const TOOL_NAME_MAX_WIDTH = 20;
@@ -73,14 +74,14 @@ function buildLeftSegments(
     segments.push({ text: toolNameDisplay, fg: '#00ffcc', bold: true });
   }
   if (keyArgDisplay) {
-    segments.push({ text: '  ', fg: '#e2e8f0' });
+    segments.push({ text: '  ', fg: UI_TONES.fg.primary });
     segments.push({ text: keyArgDisplay, fg: '252' });
   }
   if (suffixDisplay) {
-    segments.push({ text: '  ', fg: '#e2e8f0' });
+    segments.push({ text: '  ', fg: UI_TONES.fg.primary });
     segments.push({
       text: suffixDisplay,
-      fg: suffixText.startsWith('- ') ? '#ef4444' : '244',
+      fg: suffixText.startsWith('- ') ? UI_TONES.state.bad : '244',
       dim: true,
     });
   }
@@ -171,8 +172,8 @@ export function renderToolCallBlock(
   const icon = status === 'done' ? TOOL_STATUS.SUCCESS_ICON
     : status === 'error' ? TOOL_STATUS.FAIL_ICON
     : TOOL_STATUS.SPINNER_FRAMES[(frameIndex ?? 0) % TOOL_STATUS.SPINNER_FRAMES.length];
-  const iconColor = status === 'done' ? '#22c55e'
-    : status === 'error' ? '#ef4444'
+  const iconColor = status === 'done' ? UI_TONES.state.good
+    : status === 'error' ? UI_TONES.state.bad
     : '244';
   const rightText = (() => {
     if (durationMs !== undefined && status === 'done') {
@@ -227,18 +228,3 @@ export function renderToolCallBlock(
 
   return [line];
 }
-
-/**
- * Render a list of tool calls. All calls are treated as completed (done).
- * Used for historical message rendering where status/timing is unavailable.
- */
-export function renderToolCallList(
-  toolCalls: ToolCall[],
-  width: number,
-): Line[] {
-  const lines: Line[] = [];
-  for (const tc of toolCalls) {
-    lines.push(...renderToolCallBlock(tc, 'done', undefined, width));
-  }
-  return lines;
-}

package/src/renderer/ui-factory.ts

@@ -8,13 +8,36 @@ 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 { calcSessionCost, isModelPriced } from '../export/cost-utils.ts';
 import { buildFooterTip, isAgentActive } from './footer-tips.ts';
+import type { StreamMetrics } from '../core/stream-event-wiring.ts';
 
 /** Number of frames before the animated gradient completes one full cycle. */
 const GRADIENT_CYCLE_FRAMES = 50;
 /** Number of frames before rotating to the next thinking phrase (~30 seconds at 80ms/frame). */
 const PHRASE_ROTATION_FRAMES = 375;
+/**
+ * Ms since the last STREAM_DELTA before the whimsical phrase rotation freezes
+ * and createThinkingFragment shows an honest "stalled Ns" / "reconnecting"
+ * label instead. Deliberately much shorter than the 30s stream-stall-watchdog
+ * hint threshold (stream-stall-watchdog.ts) — that threshold gates a
+ * low-priority system message about a likely-dead connection; this one gates
+ * a cosmetic label so the UI stops claiming "Vibing..." within a couple of
+ * seconds of real silence, well before the stall is confirmed as a problem.
+ */
+const THINKING_STALL_FREEZE_MS = 2_500;
+
+/**
+ * Stall/reconnect state for the live thinking indicator, computed by the
+ * caller every render frame from streamMetrics (see stream-event-wiring.ts).
+ * `reconnect` is populated only once the SDK's STREAM_RETRY event fires
+ * (structurally consumed — absent from SDK 0.35.0's TurnEvent union today).
+ */
+export interface ThinkingStallInfo {
+  /** Ms since the last STREAM_DELTA (or STREAM_START if none yet this turn). */
+  readonly msSinceLastDelta: number;
+  readonly reconnect?: { readonly attempt: number; readonly maxAttempts: number };
+}
 
 /** Build the git segment string and its display width. Single source of truth for header layout. */
 function buildGitSegment(gitInfo: GitHeaderInfo): { text: string; width: number } {
@@ -268,15 +291,15 @@ export class UIFactory {
     // 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 (composerMode) composerTokens.push({ text: ` ${GLYPHS.status.active} ${composerMode} `, fg: UI_TONES.state.info, bold: true });
     if (composerPendingRisk && composerPendingRisk !== 'none') {
       const riskColor = composerPendingRisk === 'approval-wait'
-        ? '#f59e0b'
+        ? UI_TONES.state.warn
         : composerPendingRisk === 'shell'
-          ? '#ef4444'
+          ? UI_TONES.state.bad
           : composerPendingRisk === 'remote'
             ? '#a78bfa'
-            : '#f59e0b';
+            : UI_TONES.state.warn;
       composerTokens.push({ text: ` risk:${composerPendingRisk} `, fg: riskColor, bold: true });
     }
     if (composerStatus && composerStatus !== 'idle') composerTokens.push({ text: ` state:${composerStatus} `, fg: '244', dim: true });
@@ -313,7 +336,15 @@ export class UIFactory {
     const cw = u.cacheWrite ?? 0;
     const total = inp + out + cr + cw;
     const tokenSep = ` ${GLYPHS.navigation.pipeSeparator} `;
-    const costSegment = model ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}` : '';
+    // 'n/a' (not 'unpriced') to stay compact in the single-line footer and
+    // match the existing "no priceable data" convention used elsewhere
+    // (cockpit-panel formatCost, agent-inspector-shared) — the footer has no
+    // room for a longer marker before truncation kicks in.
+    const costSegment = model
+      ? isModelPriced(model)
+        ? `${tokenSep}~$${fmtCost(calcSessionCost(inp, out, cr, cw, model))}`
+        : `${tokenSep}~n/a`
+      : '';
     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;
@@ -345,7 +376,11 @@ export class UIFactory {
         ctxParts.push(model + (provider ? ` (${provider})` : ''));
       }
       if (toolCount) ctxParts.push(`${toolCount} tools`);
-      if (hitlMode) ctxParts.push(`hitl:${hitlMode}`);
+      // Labeled "notify" (not "hitl") — /mode (aliased /hitl) governs UX
+      // notification verbosity (quiet/balanced/operator), not tool
+      // auto-approval, so it must not share vocabulary with the DANGER MODE
+      // risk banner rendered a few lines below.
+      if (hitlMode) ctxParts.push(`notify:${hitlMode}`);
       const ctxLine = '   ' + ctxParts.join(`  ${GLYPHS.navigation.pipeSeparator}  `);
       lines.push(this.stringToLine(truncateDisplay(ctxLine, width), width, { fg: '240', dim: true }));
     }
@@ -368,7 +403,7 @@ export class UIFactory {
         for (const ch of dangerWarn) {
           if (col >= width) break;
           const cw = getDisplayWidth(ch);
-          line[col] = { char: ch, fg: '#ef4444', bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
+          line[col] = { char: ch, fg: UI_TONES.state.bad, bg: '', bold: true, dim: false, underline: false, italic: false, strikethrough: false };
           if (cw === 2 && col + 1 < width) line[col + 1] = { ...line[col], char: '' };
           col += cw;
         }
@@ -406,10 +441,59 @@ export class UIFactory {
   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)
-    const phraseIndex = Math.floor(frame / PHRASE_ROTATION_FRAMES) % this.THINKING_PHRASES.length;
-    const phrase = this.THINKING_PHRASES[phraseIndex];
+  /**
+   * Per-frame stall info from stream metrics — computed from lastDeltaAtMs every render (not
+   * from any event) so it degrades gracefully with zero new SDK events. Undefined until the
+   * first delta clock exists this turn.
+   */
+  public static computeStallInfo(lastDeltaAtMs: number | undefined, reconnectAttempt: number | undefined, reconnectMaxAttempts: number | undefined, nowMs: number): ThinkingStallInfo | undefined {
+    if (lastDeltaAtMs === undefined) return undefined;
+    const reconnect = reconnectAttempt !== undefined && reconnectMaxAttempts !== undefined
+      ? { attempt: reconnectAttempt, maxAttempts: reconnectMaxAttempts }
+      : undefined;
+    return { msSinceLastDelta: nowMs - lastDeltaAtMs, reconnect };
+  }
+
+  /**
+   * Render-frame stall-info decision used at the main render loop's call
+   * site: suppress stall detection entirely while a tool is actively
+   * executing. lastDeltaAtMs only tracks STREAM_START/STREAM_DELTA and is
+   * never advanced during tool execution (the model isn't producing tokens
+   * then), so without this gate any tool call longer than
+   * THINKING_STALL_FREEZE_MS would make the thinking fragment print
+   * "Stalled Ns..." directly above the ticking "executing (Ns)" tool row — a
+   * false positive during ordinary tool execution (see stream-event-wiring.ts
+   * TOOL_EXECUTING/TOOL_SUCCEEDED/TOOL_FAILED/TOOL_CANCELLED handlers).
+   * Genuine no-delta silence while waiting on the provider — including the
+   * pre-first-token case, where lastDeltaAtMs is seeded at STREAM_START —
+   * still stall-detects normally here, since no tool is active then; that is
+   * the honest stall case this indicator exists for.
+   */
+  public static computeRenderStallInfo(
+    metrics: Pick<StreamMetrics, 'activeToolName' | 'lastDeltaAtMs' | 'reconnectAttempt' | 'reconnectMaxAttempts'>,
+    nowMs: number,
+  ): ThinkingStallInfo | undefined {
+    return metrics.activeToolName === undefined
+      ? this.computeStallInfo(metrics.lastDeltaAtMs, metrics.reconnectAttempt, metrics.reconnectMaxAttempts, nowMs)
+      : undefined;
+  }
+
+  public static createThinkingFragment(width: number, spinner: string, frame: number = 0, tokenSpeed?: number, toolPreview?: string, inputTokens?: number, outputTokens?: number, elapsedMs?: number, ttftMs?: number, stallInfo?: ThinkingStallInfo): Line[] {
+    // Freeze the whimsical phrase rotation once real silence has gone on
+    // long enough to be misleading (THINKING_STALL_FREEZE_MS), and show an
+    // honest label instead: the SDK's reconnect attempt/maxAttempts once
+    // STREAM_RETRY is available, else a plain elapsed-silence readout.
+    const isStalled = stallInfo !== undefined && stallInfo.msSinceLastDelta >= THINKING_STALL_FREEZE_MS;
+    let phrase: string;
+    if (stallInfo?.reconnect) {
+      phrase = `Reconnecting (attempt ${stallInfo.reconnect.attempt}/${stallInfo.reconnect.maxAttempts})...`;
+    } else if (isStalled) {
+      phrase = `Stalled ${Math.floor(stallInfo.msSinceLastDelta / 1000)}s...`;
+    } else {
+      // Rotate phrase every ~30 seconds (frame ticks at 80ms, so ~375 frames)
+      const phraseIndex = Math.floor(frame / PHRASE_ROTATION_FRAMES) % this.THINKING_PHRASES.length;
+      phrase = this.THINKING_PHRASES[phraseIndex];
+    }
     const speedSuffix = (tokenSpeed !== undefined && tokenSpeed > 0) ? ` (${Math.round(tokenSpeed)} tok/s)` : '';
     const elapsedSuffix = elapsedMs !== undefined ? ` (${formatElapsed(elapsedMs)})` : '';
     const ttftSuffix = (ttftMs !== undefined && ttftMs > 0) ? ` ttft:${ttftMs}ms` : '';
@@ -430,7 +514,7 @@ export class UIFactory {
       const inTok = inputTokens ?? 0;
       const outTok = outputTokens ?? 0;
       segments.push({ text: ` in ${fmtNum(inTok)} `, fg: '243', dim: true });
-      segments.push({ text: `out ${fmtNum(outTok)}`, fg: '#00ffff' });
+      segments.push({ text: `out ${fmtNum(outTok)}`, fg: UI_TONES.accent.brand });
     }
     const line = createEmptyLine(width);
     let col = 1;
@@ -470,7 +554,7 @@ export class UIFactory {
         if (px >= width) break;
         previewLine[px] = {
           char: ch,
-          fg: '#38bdf8',
+          fg: UI_TONES.state.info,
           bg: '',
           bold: true,
           dim: false,

package/src/renderer/ui-primitives.ts

@@ -111,7 +111,24 @@ export const UI_TONES = {
   border: '#64748b',
 } as const;
 
-export type UiGlyphRegistry = typeof GLYPHS;
+/**
+ * Diff surface accent color shared across the three diff-rendering surfaces —
+ * the conversation diff view (diff-view.ts), the file diff panel
+ * (diff-panel.ts), and the git panel's inline diff (git-panel.ts). Hunk-header
+ * blue has no matching UI_TONES.state/accent role, so WO-204 gives it one
+ * named token here (value converged on diff-panel.ts's pre-existing hunk
+ * color, the only one of the three surfaces that predates this token; add/del
+ * on all three surfaces already converge on UI_TONES.state.good/bad).
+ */
+export const DIFF_TONES = {
+  // add/del carry diff-panel.ts's shipped colors: the diff panel is the only
+  // diff surface users have ever seen (diff-view.ts was unwired from v0.9.6
+  // until WO-204), so its look is the reference — the conversation surface
+  // adopts it, never the other way around.
+  add: '#00ff88',
+  del: '#ff4444',
+  hunk: '#88aaff',
+} as const;
 
 /** Single spinner-frame source — layout.ts and progress.ts both re-export this. */
 export const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const;