@pellux/goodvibes-tui 0.29.0 → 1.0.0

package/src/input/input-history.ts

@@ -351,15 +351,28 @@ export class InputHistory {
     return redactedText;
   }
 
+  /**
+   * Entries persisted before CR normalization was deployed (registerPaste now
+   * converts the \r line separators terminals send in bracketed pastes to \n)
+   * may still carry literal \r bytes; launder them on load so history recall
+   * cannot reintroduce \r into the composer.
+   */
+  private launderLineBreaks(text: string): string {
+    return text.replace(/\r\n?/g, '\n');
+  }
+
   private normalizeStoredEntry(entry: unknown): StoredInputHistoryEntry | null {
-    if (typeof entry === 'string') return entry;
+    if (typeof entry === 'string') return this.launderLineBreaks(entry);
     if (!entry || typeof entry !== 'object') return null;
     const record = entry as Record<string, unknown>;
     if (typeof record.text !== 'string') return null;
-    const text = record.text.trim();
+    const text = this.launderLineBreaks(record.text).trim();
     if (!text) return null;
-    if (typeof record.recallText === 'string' && record.recallText.trim() && record.recallText.trim() !== text) {
-      return { text, recallText: record.recallText.trim() };
+    const recallText = typeof record.recallText === 'string'
+      ? this.launderLineBreaks(record.recallText).trim()
+      : '';
+    if (recallText && recallText !== text) {
+      return { text, recallText };
     }
     return text;
   }

package/src/main.ts

@@ -24,6 +24,7 @@ import { GitStatusProvider } from './renderer/git-status.ts';
 import type { GitHeaderInfo } from './renderer/git-status.ts';
 import { createShellLayout } from './renderer/layout-engine.ts';
 import { buildShellFooter, estimateShellFooterHeight } from './renderer/shell-surface.ts';
+import { computePromptContentWidth } from './renderer/prompt-content-width.ts';
 import { buildConversationViewport } from './renderer/conversation-layout.ts';
 import { applyConversationOverlays } from './renderer/conversation-overlays.ts';
 import { buildPanelCompositeData } from './renderer/panel-composite.ts';
@@ -53,6 +54,7 @@ import { wireSpokenTurnRuntime } from './audio/spoken-turn-wiring.ts';
 import { attachSpokenTurnModelRouting, createSpokenTurnInputOptions } from './audio/spoken-turn-model-routing.ts';
 import { allowTerminalWrite, installTuiTerminalOutputGuard } from './runtime/terminal-output-guard.ts';
 import { installProcessLifecycle } from './runtime/process-lifecycle.ts';
+import { createRenderScheduler } from './runtime/render-scheduler.ts';
 import { buildCommandArgsHint } from './input/command-args-hint.ts';
 import { summarizeRunningAgents } from './renderer/process-summary.ts';
 import { formatUserFacingErrorLine } from './core/format-user-error.ts';
@@ -180,19 +182,19 @@ async function main() {
     activeToolName: undefined,
   };
 
-  const getPromptContentWidth = () => {
-    const w = stdout.columns || 80;
-    const boxMargin = 2;
-    const boxWidth = w - (boxMargin * 2);
-    return boxWidth - 4 - 3; // minus padding (4) minus prefix width (3: ' > ')
-  };
+  const getPromptContentWidth = () => computePromptContentWidth(stdout.columns);
 
   const getViewportHeight = (): number => {
     if (input.onboardingWizard.active) return stdout.rows || 24;
     const promptLines: number = input.getVisiblePromptLineCount(getPromptContentWidth());
     const currentModel = providerRegistry.getCurrentModel();
     const contextWindow = providerRegistry.getContextWindowForModel(currentModel);
-    return (stdout.rows || 24) - 2 - estimateShellFooterHeight(promptLines, contextWindow);
+    const rows = stdout.rows || 24;
+    // Compact threshold must match buildShellFooter's `compact: height < 30`
+    // posture below — otherwise the cached-height fast path in
+    // estimateShellFooterHeight can answer a compact-vs-non-compact query
+    // with the wrong cached mode and throw the viewport math off by several rows.
+    return rows - 2 - estimateShellFooterHeight(promptLines, contextWindow, rows < 30);
   };
 
   const scroll = (delta: number) => {
@@ -223,7 +225,7 @@ async function main() {
     noAltScreen: cli.flags.noAltScreen,
     ansi: { CLEAR_SCREEN, ALT_SCREEN_EXIT, PASTE_DISABLE, KEYBOARD_EXT_DISABLE, MOUSE_DISABLE, CURSOR_SHOW },
     getInput: () => input,
-    render: () => render(),
+    render: () => renderScheduler.flushNow(), // resize: synchronous immediate path
     getPromptContentWidth,
     getTerminalOutputGuard: () => terminalOutputGuard,
     buildSessionContinuityHints,
@@ -432,7 +434,7 @@ async function main() {
     lastSessionId: readLastSessionPointer({ workingDirectory: workingDir, homeDirectory, surfaceRoot: 'tui' }) ?? undefined,
   };
 
-  const render = () => {
+  const renderNow = () => {
     const width = stdout.columns || 80;
     const height = stdout.rows || 24;
 
@@ -648,9 +650,11 @@ async function main() {
       panelWidth: panelComposite.panelWidth,
     });
   };
+  const renderScheduler = createRenderScheduler(renderNow); // WO-208 same-tick coalescer
+  const render = (): void => renderScheduler.schedule();
   const terminalOutputGuard = installTuiTerminalOutputGuard({ stdout, stderr: process.stderr, notify: (message) => { systemMessageRouter.low(message); render(); } });
 
-  setRenderRequest(render);
+  setRenderRequest(renderNow); // bootstrap's 16ms coalescer calls the composite directly
   orchestratorRefs.requestRender = render;
   commandContext.renderRequest = render;
   wireShellUiOpeners({

package/src/panels/base-panel.ts

@@ -3,7 +3,7 @@ import type { Panel, PanelCategory } from './types.ts';
 import type { ComponentResourceContract, ComponentHealthState } from '../runtime/perf/panel-contracts.ts';
 import type { ComponentHealthMonitor } from '../runtime/perf/panel-health-monitor.ts';
 import { UIFactory } from '../renderer/ui-factory.ts';
-import { SPINNER_FRAMES } from '../renderer/progress.ts';
+import { SPINNER_FRAMES } from '../renderer/ui-primitives.ts';
 import { fitDisplay } from '../utils/terminal-width.ts';
 
 /** Canonical error-surface foreground (bad/red), kept out of the render body. */

package/src/panels/diff-panel.ts

@@ -6,7 +6,7 @@ import type { Line } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
 import { truncateDisplay, getDisplayWidth } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
-import { UI_TONES } from '../renderer/ui-primitives.ts';
+import { UI_TONES, DIFF_TONES } from '../renderer/ui-primitives.ts';
 import { FilePreviewPanel } from './file-preview-panel.ts';
 import type { PanelIntegrationContext } from './types.ts';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
@@ -30,14 +30,20 @@ import {
 // DEFAULT_PANEL_PALETTE.headerBg (WO-002: one title band everywhere).
 // ---------------------------------------------------------------------------
 
-const HUNK_BLUE = '#88aaff';
+// Hunk blue is the shared DIFF_TONES token (WO-204) — diff-view.ts (conversation)
+// and git-panel.ts's inline diff converge onto this file's pre-existing value.
+const HUNK_BLUE: string = DIFF_TONES.hunk;
 // Context rows and line-number gutter use the shared theme's muted/dim
 // foreground tones rather than dedicated gray hex literals.
 const CONTEXT_GRAY = UI_TONES.fg.muted;
 const FILENAME_WHITE = '#ffffff';
-const ADD_GREEN = '#00ff88';
+// Add/del text colors are the shared DIFF_TONES tokens, whose values ARE this
+// panel's shipped colors — this panel is the reference diff look (diff-view
+// was unwired dead code until WO-204, so "majority of surfaces" was a mirage);
+// the conversation surface converges onto these, not the reverse.
+const ADD_GREEN: string = DIFF_TONES.add;
 const ADD_BG = '#001a0d';
-const DEL_RED = '#ff4444';
+const DEL_RED: string = DIFF_TONES.del;
 const DEL_BG = '#1a0000';
 const HUNK_BG = '#0a0a1a';
 const MARKER_GRAY = '#aaaaaa';

package/src/panels/git-panel.ts

@@ -4,7 +4,7 @@ import { truncateDisplay, getDisplayWidth } from '../utils/terminal-width.ts';
 import { GitService } from '@pellux/goodvibes-sdk/platform/git';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
-import { UI_TONES } from '../renderer/ui-primitives.ts';
+import { UI_TONES, DIFF_TONES } from '../renderer/ui-primitives.ts';
 import {
   buildEmptyState,
   buildKeyboardHints,
@@ -77,7 +77,7 @@ const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   commitAuthor: '244',
   selected: '#1c1c1c',
   selectedFg: '#ffffff',
-  diffMeta: '#5f87ff',
+  diffMeta: DIFF_TONES.hunk, // WO-204: shared diff-hunk token, was a local literal
   diffNeutral: '250',
   // Reuses the existing workflow accent token rather than adding a new hex
   // literal (architecture gate ratchets the raw-hex-literal count).

package/src/renderer/agent-detail-modal.ts

@@ -10,6 +10,24 @@ import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import { handleConfirmInput, type ConfirmState } from '../panels/confirm-state.ts';
 import { AGENT_TERMINAL_STATUSES as MODAL_TERMINAL_STATUSES, AGENT_STALL_THRESHOLD_MS as MODAL_STALL_THRESHOLD_MS } from '../panels/agent-inspector-shared.ts';
+import { UI_TONES } from './ui-primitives.ts';
+
+/**
+ * Agent-detail-modal neon accent palette — WRFC/streaming panel-native hues
+ * with no UI_TONES.state/accent role. Preserved byte-exact as named
+ * accents per WO-207b (2026-07-02-renderer-plan.md decisions: "Agent-detail
+ * neon palette: preserved byte-exact as named accents, zero visual change").
+ */
+const AGENT_DETAIL_NEON = {
+  /** Addendum note + streaming content text. */
+  mint: '#aaffee',
+  /** Unsatisfied WRFC findings + agent error text. */
+  bad: '#ff6666',
+  /** Satisfied WRFC findings. */
+  good: '#44ff88',
+  /** Progress line + streaming label. */
+  accent: '#00ffcc',
+} as const;
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -19,6 +37,17 @@ const AGENT_ID_DISPLAY_LENGTH = 16;
 // MODAL_TERMINAL_STATUSES and MODAL_STALL_THRESHOLD_MS are re-exported aliases
 // from agent-inspector-shared.ts (imported above alongside ConfirmState).
 
+/**
+ * formatStalledLabel — the "[STALLED — N+ min no activity]" suffix appended
+ * to the Status line for a stalled agent. The minute count is derived from
+ * the stall threshold (in ms) rather than hardcoded, so the label can never
+ * drift out of sync with the actual threshold that decided isStalled.
+ */
+export function formatStalledLabel(thresholdMs: number): string {
+  const minutes = Math.floor(thresholdMs / 60000);
+  return `  [STALLED — ${minutes}+ min no activity]`;
+}
+
 export interface AgentDetailModalDeps {
   readonly agentManager: Pick<AgentManager, 'getStatus' | 'list'>;
   readonly agentMessageBus: Pick<AgentMessageBus, 'getMessages'>;
@@ -248,7 +277,7 @@ export function renderAgentDetailModal(
   sections.push({ type: 'text', content: `Template : ${rec.template}` });
   sections.push({ type: 'text', content: `Model    : ${modelStr}` });
   const isStalled = !MODAL_TERMINAL_STATUSES.has(rec.status) && (now - rec.startedAt) >= MODAL_STALL_THRESHOLD_MS;
-  sections.push({ type: 'text', content: `Status   : ${rec.status}${isStalled ? '  [STALLED — 5+ min no activity]' : ''}` });
+  sections.push({ type: 'text', content: `Status   : ${rec.status}${isStalled ? formatStalledLabel(MODAL_STALL_THRESHOLD_MS) : ''}` });
   sections.push({ type: 'text', content: `Duration : ${formatElapsed(elapsedMs)}` });
   sections.push({ type: 'separator' });
 
@@ -271,7 +300,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: 'Addendum   : yes (WRFC constraint layer injected)',
-      style: { fg: '#aaffee' },
+      style: { fg: AGENT_DETAIL_NEON.mint },
     });
   }
 
@@ -301,7 +330,7 @@ export function renderAgentDetailModal(
           sections.push({
             type: 'text',
             content: `Findings   : ${findings.length} checked, ${unsatisfied.length} unsatisfied`,
-            style: { fg: unsatisfied.length > 0 ? '#ff6666' : '#44ff88' },
+            style: { fg: unsatisfied.length > 0 ? AGENT_DETAIL_NEON.bad : AGENT_DETAIL_NEON.good },
           });
         }
       }
@@ -316,7 +345,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: `Progress: ${rec.progress}`,
-      style: { fg: '#00ffcc' },
+      style: { fg: AGENT_DETAIL_NEON.accent },
     });
   }
 
@@ -326,7 +355,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: `Error: ${rec.error}`,
-      style: { fg: '#ff6666' },
+      style: { fg: AGENT_DETAIL_NEON.bad },
     });
   }
 
@@ -393,7 +422,7 @@ export function renderAgentDetailModal(
       content: truncated
         ? `Streaming (last ${STREAMING_MAX_CHARS} of ${content.length} chars \u2191 scroll for more):`
         : 'Streaming:',
-      style: { fg: '#00ffcc', dim: true },
+      style: { fg: AGENT_DETAIL_NEON.accent, dim: true },
     });
     // Split into display lines, capped at width for readability
     const maxLineWidth = Math.max(width - 10, 40);
@@ -403,7 +432,7 @@ export function renderAgentDetailModal(
       sections.push({
         type: 'text',
         content: `  ${trimmed}`,
-        style: { fg: '#aaffee' },
+        style: { fg: AGENT_DETAIL_NEON.mint },
       });
     }
   }
@@ -415,7 +444,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: `Cancel agent "${modal.confirmCancel.label}"?`,
-      style: { fg: '#f59e0b' },
+      style: { fg: UI_TONES.state.warn },
     });
     sections.push({
       type: 'text',

package/src/renderer/code-block.ts

@@ -3,6 +3,32 @@ import { UIFactory } from './ui-factory.ts';
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
 import { SyntaxHighlighter, type SyntaxToken as HLToken } from './syntax-highlighter.ts';
+import { UI_TONES } from './ui-primitives.ts';
+
+/**
+ * Regex-fallback tokenizer theme. VS Code Dark+ inspired, but the
+ * semantic-token hues (string/number/keyword/type/function/operator/
+ * property/comment) are pinned to the same values as the tree-sitter
+ * Vaporwave palette in syntax-highlighter.ts's TOKEN_STYLES map, so a code
+ * block that starts on the regex fallback and gets replaced by the async
+ * tree-sitter parse doesn't visibly shift color mid-stream (WO-207c).
+ * `accent` and `bg` are chrome (the language-label header bar and the body
+ * background), not syntax tokens, and keep their original VS Code Dark+
+ * values — folded here from two separate literals (one in the header, one
+ * duplicated on the footer line) into a single named source (WO-207b).
+ */
+const FALLBACK_THEME = {
+  string: '#00ff88',
+  number: '#ffcc00',
+  keyword: '#d000ff',
+  type: '#ff6b9d',
+  function: UI_TONES.accent.brand,
+  operator: '#ffffff',
+  property: '#87ceeb',
+  comment: '#666666',
+  bg: '#0d0d0d',
+  accent: '#4ec9b0',
+} as const;
 
 // ─── Language Keyword Maps ───────────────────────────────────────────────────
 
@@ -61,7 +87,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
   while (i < line.length) {
     // Line comment
     if (line.slice(i, i + 2) === '//') {
-      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
       break;
     }
     // String (single, double, template)
@@ -72,7 +98,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
         if (line[j] === '\\') j++;
         j++;
       }
-      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
       i = j + 1;
       continue;
     }
@@ -80,7 +106,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
     if (/[0-9]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9._xXbBoO]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
       i = j;
       continue;
     }
@@ -90,11 +116,11 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
       while (j < line.length && /[\w$]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (TS_JS_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: '#569cd6', bold: true });
+        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
       } else if (TS_TYPES.has(word)) {
-        tokens.push({ text: word, fg: '#4ec9b0' });
+        tokens.push({ text: word, fg: FALLBACK_THEME.type });
       } else if (line[j] === '(') {
-        tokens.push({ text: word, fg: '#dcdcaa' });
+        tokens.push({ text: word, fg: FALLBACK_THEME.function });
       } else {
         tokens.push({ text: word, fg: '' });
       }
@@ -104,7 +130,7 @@ function tokenizeTsJs(line: string): SyntaxToken[] {
     // Operators and punctuation
     const ch = line[i];
     const isOp = '=<>!&|+-*/%^~?:'.includes(ch);
-    tokens.push({ text: ch, fg: isOp ? '#d4d4d4' : '' });
+    tokens.push({ text: ch, fg: isOp ? FALLBACK_THEME.operator : '' });
     i++;
   }
 
@@ -117,21 +143,21 @@ function tokenizePython(line: string): SyntaxToken[] {
 
   while (i < line.length) {
     if (line[i] === '#') {
-      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
       break;
     }
     if (line[i] === '"' || line[i] === "'") {
       const q = line[i];
       let j = i + 1;
       while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
-      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
       i = j + 1;
       continue;
     }
     if (/[0-9]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9._]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
       i = j;
       continue;
     }
@@ -140,11 +166,11 @@ function tokenizePython(line: string): SyntaxToken[] {
       while (j < line.length && /[\w]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (PYTHON_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: '#569cd6', bold: true });
+        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
       } else if (/^[A-Z]/.test(word)) {
-        tokens.push({ text: word, fg: '#4ec9b0' });
+        tokens.push({ text: word, fg: FALLBACK_THEME.type });
       } else if (line[j] === '(') {
-        tokens.push({ text: word, fg: '#dcdcaa' });
+        tokens.push({ text: word, fg: FALLBACK_THEME.function });
       } else {
         tokens.push({ text: word, fg: '' });
       }
@@ -163,21 +189,21 @@ function tokenizeBash(line: string): SyntaxToken[] {
 
   while (i < line.length) {
     if (line[i] === '#') {
-      tokens.push({ text: line.slice(i), fg: '65', italic: true });
+      tokens.push({ text: line.slice(i), fg: FALLBACK_THEME.comment, italic: true });
       break;
     }
     if (line[i] === '"' || line[i] === "'") {
       const q = line[i];
       let j = i + 1;
       while (j < line.length && line[j] !== q) { if (line[j] === '\\') j++; j++; }
-      tokens.push({ text: line.slice(i, j + 1), fg: '#ce9178' });
+      tokens.push({ text: line.slice(i, j + 1), fg: FALLBACK_THEME.string });
       i = j + 1;
       continue;
     }
     if (line[i] === '$') {
       let j = i + 1;
       while (j < line.length && /[\w{}_]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: '#9cdcfe' });
+      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.property });
       i = j;
       continue;
     }
@@ -186,7 +212,7 @@ function tokenizeBash(line: string): SyntaxToken[] {
       while (j < line.length && /[\w-]/.test(line[j])) j++;
       const word = line.slice(i, j);
       if (BASH_KEYWORDS.has(word)) {
-        tokens.push({ text: word, fg: '#569cd6', bold: true });
+        tokens.push({ text: word, fg: FALLBACK_THEME.keyword, bold: true });
       } else {
         tokens.push({ text: word, fg: '' });
       }
@@ -211,9 +237,9 @@ function tokenizeJson(line: string): SyntaxToken[] {
       // JSON key: followed by :
       const rest = line.slice(j + 1).trimStart();
       if (rest.startsWith(':')) {
-        tokens.push({ text: str, fg: '#9cdcfe' });
+        tokens.push({ text: str, fg: FALLBACK_THEME.property });
       } else {
-        tokens.push({ text: str, fg: '#ce9178' });
+        tokens.push({ text: str, fg: FALLBACK_THEME.string });
       }
       i = j + 1;
       continue;
@@ -221,13 +247,13 @@ function tokenizeJson(line: string): SyntaxToken[] {
     if (/[0-9-]/.test(line[i])) {
       let j = i;
       while (j < line.length && /[0-9.eE+-]/.test(line[j])) j++;
-      tokens.push({ text: line.slice(i, j), fg: '#b5cea8' });
+      tokens.push({ text: line.slice(i, j), fg: FALLBACK_THEME.number });
       i = j;
       continue;
     }
     const boolNull = ['true', 'false', 'null'].find(k => line.startsWith(k, i));
     if (boolNull) {
-      tokens.push({ text: boolNull, fg: '#569cd6', bold: true });
+      tokens.push({ text: boolNull, fg: FALLBACK_THEME.keyword, bold: true });
       i += boolNull.length;
       continue;
     }
@@ -240,12 +266,12 @@ function tokenizeJson(line: string): SyntaxToken[] {
 function tokenizeYaml(line: string): SyntaxToken[] {
   const tokens: SyntaxToken[] = [];
   if (line.trimStart().startsWith('#')) {
-    return [{ text: line, fg: '65', italic: true }];
+    return [{ text: line, fg: FALLBACK_THEME.comment, italic: true }];
   }
   const keyMatch = line.match(/^(\s*)([^:]+)(:)(\s*.*)/);
   if (keyMatch) {
     if (keyMatch[1]) tokens.push({ text: keyMatch[1], fg: '' });
-    tokens.push({ text: keyMatch[2], fg: '#9cdcfe' });
+    tokens.push({ text: keyMatch[2], fg: FALLBACK_THEME.property });
     tokens.push({ text: keyMatch[3], fg: '244' });
     if (keyMatch[4]) {
       const val = keyMatch[4];
@@ -254,7 +280,7 @@ function tokenizeYaml(line: string): SyntaxToken[] {
       const isStr = /^['"]/.test(trimVal);
       const isBool = trimVal === 'true' || trimVal === 'false' || trimVal === 'null' || trimVal === 'yes' || trimVal === 'no';
       const isNum = /^-?[0-9]/.test(trimVal);
-      const valFg = isStr ? '#ce9178' : isBool ? '#569cd6' : isNum ? '#b5cea8' : '';
+      const valFg = isStr ? FALLBACK_THEME.string : isBool ? FALLBACK_THEME.keyword : isNum ? FALLBACK_THEME.number : '';
       tokens.push({ text: val, fg: valFg });
     }
     return tokens;
@@ -292,7 +318,7 @@ export function renderCodeBlock(
   const showLineNumbers = opts.showLineNumbers ?? true;
   const lineNumW = showLineNumbers ? String(codeLines.length).length + 1 : 0; // e.g. "10 "
   const contentStartX = showLineNumbers ? leftMargin + lineNumW + 1 : leftMargin;
-  const BG = '#0d0d0d';
+  const BG = FALLBACK_THEME.bg;
   const LINE_NUM_FG = '238';
   const effectiveWidth = width - LAYOUT.RIGHT_MARGIN;
 
@@ -320,7 +346,7 @@ export function renderCodeBlock(
   let hx = leftMargin;
   for (const ch of headerStr) {
     if (hx >= effectiveWidth) break;
-    headerLine[hx] = createStyledCell(ch, { fg: '#1a1a1a', bg: '#4ec9b0', bold: true });
+    headerLine[hx] = createStyledCell(ch, { fg: '#1a1a1a', bg: FALLBACK_THEME.accent, bold: true });
     hx++;
   }
   lines.push(headerLine);
@@ -362,7 +388,11 @@ export function renderCodeBlock(
           continue;
         }
         line[cx] = createStyledCell(ch, { fg: token.fg, bg: BG, bold: token.bold, italic: token.italic });
-        if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
+        // Bound the wide-glyph placeholder against the body's own right edge
+        // (effectiveWidth), not the full line width — otherwise a 2-column
+        // glyph landing on the last body column spills its placeholder cell
+        // into the reserved right-margin band the header/footer stop at.
+        if (cw === 2 && cx + 1 < effectiveWidth) line[cx + 1] = { ...line[cx], char: '' };
         cx += cw;
       }
     }
@@ -373,7 +403,7 @@ export function renderCodeBlock(
   // Footer line
   const footerLine = createEmptyLine(width);
   for (let fx = leftMargin; fx < effectiveWidth; fx++) {
-    footerLine[fx] = createStyledCell(' ', { bg: '#0d0d0d' });
+    footerLine[fx] = createStyledCell(' ', { bg: BG });
   }
   lines.push(footerLine);
 

package/src/renderer/context-inspector.ts

@@ -3,6 +3,7 @@ import { ModalFactory } from './modal-factory.ts';
 import type { ConversationManager } from '../core/conversation';
 import { getOverlayContentBudget, getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 import { estimateTokens } from '@pellux/goodvibes-sdk/platform/core';
+import { UI_TONES } from './ui-primitives.ts';
 
 // ─── ContextInspectorModal ────────────────────────────────────────────────────
 
@@ -84,7 +85,6 @@ export function renderContextInspector(
 
   const entries: MsgEntry[] = [];
   let totalTokens = 0;
-  let largeCount = 0;
 
   for (const msg of messages) {
     const role = msg.role;
@@ -126,9 +126,6 @@ export function renderContextInspector(
   // ── Identify large consumers (>10%) ───────────────────────────────────────
 
   const largeThreshold = totalTokens * 0.10;
-  for (const e of entries) {
-    if (e.tokens > largeThreshold) largeCount++;
-  }
 
   // ── Build sections ────────────────────────────────────────────────────────
 
@@ -148,7 +145,7 @@ export function renderContextInspector(
     sections.push({
       type: 'text',
       content: 'WARNING: context is 80%+ full. Run /compact to free space.',
-      style: { fg: '#ff9900', bold: true },
+      style: { fg: UI_TONES.state.warn, bold: true },
     });
   }
 
@@ -181,7 +178,7 @@ export function renderContextInspector(
     sections.push({
       type: 'text',
       content: line,
-      style: isLarge ? { fg: '#ffcc00', bold: true } : {},
+      style: isLarge ? { fg: UI_TONES.state.warn, bold: true } : {},
     });
   }
 

package/src/renderer/conversation-surface.ts

@@ -1,5 +1,5 @@
 import { type Line, createEmptyLine, createStyledCell } from '../types/grid.ts';
-import { getDisplayWidth, truncateDisplay, wrapText } from '../utils/terminal-width.ts';
+import { getDisplayWidth, wrapText } from '../utils/terminal-width.ts';
 import { LAYOUT } from './layout.ts';
 import { GLYPHS } from './ui-primitives.ts';
 
@@ -185,26 +185,6 @@ export function renderConversationCollapsedFragment(
   });
 }
 
-export function renderConversationKeyValueRow(
-  width: number,
-  left: string,
-  right: string,
-  palette: {
-    readonly leftFg: string;
-    readonly rightFg: string;
-    readonly dimFg?: string;
-    readonly bg?: string;
-  },
-): Line {
-  const line = createEmptyLine(width);
-  const leftText = truncateDisplay(left, Math.max(1, width - LAYOUT.RIGHT_MARGIN - 8));
-  const rightWidth = getDisplayWidth(right);
-  const rightStart = Math.max(LAYOUT.LEFT_MARGIN + 1, width - LAYOUT.RIGHT_MARGIN - rightWidth);
-  writeText(line, LAYOUT.LEFT_MARGIN, rightStart - 1, leftText, palette.leftFg, { bg: palette.bg });
-  writeText(line, rightStart, width - LAYOUT.RIGHT_MARGIN, right, palette.rightFg, { bg: palette.bg, dim: palette.dimFg === palette.rightFg });
-  return line;
-}
-
 export function renderConversationStatusLine(
   width: number,
   segments: readonly ConversationStatusSegment[],

package/src/renderer/diff-view.ts

@@ -1,10 +1,12 @@
 import { type Line, type Cell, createStyledCell } from '../types/grid.ts';
 import { UIFactory } from './ui-factory.ts';
 import { getDisplayWidth, padDisplayEnd } from '../utils/terminal-width.ts';
+import { DIFF_TONES } from './ui-primitives.ts';
 
 /**
  * renderDiffView - Render a unified diff string as styled Line[].
- * '+' lines in green, '-' lines in red, '@@' hunks in cyan.
+ * '+' lines in green, '-' lines in red, '@@' hunks in blue (DIFF_TONES.hunk,
+ * shared with diff-panel.ts and git-panel.ts's inline diff).
  */
 export function renderDiffView(diffText: string, width: number, filename?: string): Line[] {
   const lines: Line[] = [];
@@ -34,7 +36,7 @@ export function renderDiffView(diffText: string, width: number, filename?: strin
         oldLineNo = parseInt(hunkMatch[1], 10) - 1;
         newLineNo = parseInt(hunkMatch[2], 10) - 1;
       }
-      lines.push(makeStyledLine(raw, width, '#00bcd4', '#0f1f1f', false));
+      lines.push(makeStyledLine(raw, width, DIFF_TONES.hunk, '#0f1f1f', false));
       continue;
     }
 
@@ -49,7 +51,7 @@ export function renderDiffView(diffText: string, width: number, filename?: strin
       newLineNo++;
       const lineLabel = `${String(newLineNo).padStart(4)} `;
       const content = raw.slice(1);
-      lines.push(makeGutterLine('+', lineLabel, content, width, '#22c55e', '#0a1a0a'));
+      lines.push(makeGutterLine('+', lineLabel, content, width, DIFF_TONES.add, '#0a1a0a'));
       continue;
     }
 
@@ -58,7 +60,7 @@ export function renderDiffView(diffText: string, width: number, filename?: strin
       oldLineNo++;
       const lineLabel = `${String(oldLineNo).padStart(4)} `;
       const content = raw.slice(1);
-      lines.push(makeGutterLine('-', lineLabel, content, width, '#ef4444', '#1a0a0a'));
+      lines.push(makeGutterLine('-', lineLabel, content, width, DIFF_TONES.del, '#1a0a0a'));
       continue;
     }
 

package/src/renderer/fullscreen-primitives.ts

@@ -107,7 +107,7 @@ export function drawHorizontalRule(line: Line, startX: number, endX: number, fg:
   }
 }
 
-export function clipDisplay(text: string, width: number): string {
+function clipDisplay(text: string, width: number): string {
   if (width <= 0) return '';
   let used = 0;
   let output = '';