@pellux/goodvibes-tui 0.29.0 → 1.0.0

package/src/renderer/model-workspace.ts

@@ -10,22 +10,22 @@ import type { ModelPickerModal } from '../input/model-picker.ts';
 import type { ModelPickerTargetInfo } from '../input/model-picker.ts';
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine, createStyledCell } from '../types/grid.ts';
-import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
+import { fitDisplay, getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { abbreviateCount } from '../utils/format-number.ts';
 import { GLYPHS, UI_TONES } from './ui-primitives.ts';
 
 const PALETTE = {
-  border: '#64748b',
+  border: UI_TONES.border,
   title: '#67e8f9',
-  subtitle: '#93c5fd',
-  text: '#e2e8f0',
-  muted: '#94a3b8',
-  dim: '#64748b',
-  selectedBg: '#223049',
+  subtitle: UI_TONES.accent.conversation,
+  text: UI_TONES.fg.primary,
+  muted: UI_TONES.fg.muted,
+  dim: UI_TONES.border,
+  selectedBg: UI_TONES.bg.selected,
   targetBg: '#141b25',
   detailBg: '#121923',
   bodyBg: '#0f141d',
-  footerBg: '#111827',
+  footerBg: UI_TONES.bg.footer,
   good: UI_TONES.state.good,
   warn: UI_TONES.state.warn,
   info: UI_TONES.state.info,
@@ -100,23 +100,8 @@ function drawVertical(line: Line, x: number, bg = ''): void {
   line[x] = createStyledCell(GLYPHS.frame.vertical, { fg: PALETTE.border, bg });
 }
 
-function clipDisplay(text: string, width: number): string {
-  if (width <= 0) return '';
-  let used = 0;
-  let output = '';
-  for (const ch of text) {
-    const chWidth = getDisplayWidth(ch);
-    if (chWidth <= 0) continue;
-    if (used + chWidth > width) break;
-    output += ch;
-    used += chWidth;
-  }
-  return output;
-}
-
 function padDisplay(text: string, width: number): string {
-  const clipped = clipDisplay(text, width);
-  return clipped + ' '.repeat(Math.max(0, width - getDisplayWidth(clipped)));
+  return fitDisplay(text, width, '');
 }
 
 function stableWindow(total: number, selected: number, visible: number): { start: number; end: number } {

package/src/renderer/overlay-box.ts

@@ -53,7 +53,13 @@ export function createOverlayBoxLayout(
   maxWidth: number,
 ): OverlayBoxLayout {
   const resolvedMaxWidth = getOverlayMaxWidth(terminalWidth, margin, maxWidth);
-  const width = Math.max(20, Math.min(terminalWidth - margin * 2, resolvedMaxWidth));
+  // The 20-column floor exists so overlays stay legible on ordinary narrow
+  // terminals, but on a hostile-narrow terminal (terminalWidth smaller than
+  // margin*2 + 20) that floor alone can push the box wider than the real
+  // terminal, walking cells off the right edge of the line array. Clamp the
+  // floored result back down to what actually fits before returning it.
+  const availableWidth = Math.max(1, terminalWidth - margin * 2);
+  const width = Math.min(availableWidth, Math.max(20, Math.min(availableWidth, resolvedMaxWidth)));
   const contentWidth = width - 2;
   const innerWidth = contentWidth - 2;
   return { margin, width, contentWidth, innerWidth };
@@ -128,14 +134,6 @@ export function createOverlayFilledBorderLine(
   return line;
 }
 
-export function createOverlayFrameLine(
-  terminalWidth: number,
-  layout: OverlayBoxLayout,
-  bg = DEFAULT_OVERLAY_PALETTE.bodyBg,
-): Line {
-  return createOverlayContentLine(terminalWidth, layout, DEFAULT_OVERLAY_PALETTE.borderFg, bg);
-}
-
 export const OVERLAY_GLYPHS = {
   topLeft: GLYPHS.frame.topLeft,
   topRight: GLYPHS.frame.topRight,

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/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

@@ -54,22 +54,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;
 }
@@ -119,6 +132,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

@@ -268,15 +268,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 });
@@ -368,7 +368,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;
         }
@@ -430,7 +430,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 +470,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;

package/src/runtime/render-scheduler.ts

@@ -0,0 +1,80 @@
+/**
+ * render-scheduler.ts — same-tick render coalescing for the TUI shell (WO-208).
+ *
+ * main.ts fans out its own direct render() calls across turn/stream/input wiring
+ * (~14 direct invocation contexts). Each one previously ran a full synchronous
+ * Compositor.composite() the instant it was called. When several fire within a
+ * single event-loop tick — a streaming burst is the canonical case — only the
+ * LAST frame is ever visible; the earlier composites are immediately overwritten.
+ * This scheduler collapses every schedule() call made within one tick into a
+ * single composite flushed on the microtask queue, so the tick produces exactly
+ * one frame. That frame is byte-identical to what the last synchronous render()
+ * would have produced, because the coalesced flush runs after all of the tick's
+ * synchronous state mutations, reading the same final state the last direct
+ * render() would have read.
+ *
+ * This is deliberately SEPARATE from bootstrap-core's requestRender(), which is a
+ * cross-tick, 16ms-throttled (~60fps) coalescer for the panel/input/runtime
+ * fan-out — that one caps repaint RATE across ticks. This one collapses the
+ * WITHIN-tick burst with no added latency: a microtask flushes at the tail of the
+ * current tick, before the event loop yields to I/O, so the frame still lands in
+ * the same turn it was requested in.
+ *
+ * flushNow() preserves a synchronous immediate path for callers that genuinely
+ * need the frame composited before they return. Terminal resize is the known
+ * case: the resize handler resets the compositor diff and must repaint against
+ * the new dimensions synchronously rather than waiting for the microtask.
+ * flushNow() also clears any pending coalesced flush, so a resize (or any
+ * immediate paint) followed by an already-queued microtask never double-composites.
+ */
+
+export interface RenderScheduler {
+  /**
+   * Coalesced request: schedule a composite for the current tick. N calls within
+   * one tick collapse into exactly one composite, flushed on the microtask queue.
+   */
+  readonly schedule: () => void;
+  /**
+   * Immediate request: run the composite synchronously right now, and cancel any
+   * pending coalesced flush so the tick still composites only once. Use only where
+   * a caller genuinely requires synchronous output (terminal resize).
+   */
+  readonly flushNow: () => void;
+}
+
+/**
+ * Build a render scheduler around `renderNow` (the synchronous composite closure).
+ *
+ * `scheduleFlush` is the deferral primitive; it defaults to `queueMicrotask` so
+ * bursts coalesce within the current tick. Tests and benchmarks inject a manual
+ * queue to flush deterministically.
+ */
+export function createRenderScheduler(
+  renderNow: () => void,
+  scheduleFlush: (flush: () => void) => void = queueMicrotask,
+): RenderScheduler {
+  let scheduled = false;
+
+  const flush = (): void => {
+    // A synchronous flushNow() (or a superseding immediate paint) before this
+    // microtask ran clears `scheduled`, turning this into a no-op so a single
+    // tick never composites twice.
+    if (!scheduled) return;
+    scheduled = false;
+    renderNow();
+  };
+
+  const schedule = (): void => {
+    if (scheduled) return;
+    scheduled = true;
+    scheduleFlush(flush);
+  };
+
+  const flushNow = (): void => {
+    // Satisfy any pending coalesced flush, then composite synchronously.
+    scheduled = false;
+    renderNow();
+  };
+
+  return { schedule, flushNow };
+}

package/src/utils/splash-lines.ts

@@ -20,7 +20,8 @@ const SEPARATOR = '━'.repeat(ART_W);
  */
 const TAGLINE = '[ ｇｏｏｄ ｖｉｂｅｓ ・ Ａ Ｉ ・ いい雰囲気 ]';
 
-const VERSION_LINE = `　✦　v${VERSION}　█　terminal AI assistant　█　自動ｺｰﾄﾞ 　✦`;
+const versionLine = (version: string) =>
+  `　✦　v${version}　█　terminal AI assistant　█　自動ｺｰﾄﾞ 　✦`;
 
 /** Fixed hint line — the three primary shell entry points. */
 const HINT_LINE = 'Ctrl+P panels  /  ? help  /  F2 processes';
@@ -35,6 +36,13 @@ export interface SplashOptions {
    * When present, the splash advertises a resume affordance.
    */
   lastSessionId?: string;
+  /**
+   * Version string rendered on the splash's version line. Defaults to the
+   * build VERSION; injectable so the golden-frame tests can pin a fixture —
+   * the version's display width shifts the line's centering, so goldens tied
+   * to the live VERSION break on every release bump (v1.0.0 release failure).
+   */
+  version?: string;
 }
 
 /** Collapse a $HOME-prefixed working directory to a leading `~`. */
@@ -54,7 +62,7 @@ export function getSplashLines(columns: number, opts: SplashOptions = {}): strin
     ...ART_LINES.map((line) => center(line, columns)),
     center(SEPARATOR, columns),
     center(TAGLINE, columns),
-    center(VERSION_LINE, columns),
+    center(versionLine(opts.version ?? VERSION), columns),
     '',
   ];