@pellux/goodvibes-tui 0.28.0 → 1.0.0

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

@@ -40,12 +40,21 @@ export function applyConversationOverlays(
   let next = viewport;
   const bottomDockInset = 1 + (input.searchManager.active || input.historySearch.active ? 1 : 0);
 
+  // Overlay posture rule: workspaces (onboarding, model, settings, mcp, help,
+  // shortcuts) claim the full viewport and are mutually exclusive with docked
+  // pickers/modals. Once a fullscreen workspace claims the screen, no docked
+  // overlay is drawn on top of it — enforcing a single visible overlay even if
+  // stray state survives the handler's clearModalStack. The input layer keeps
+  // the modal stack to one entry; this is the renderer-side backstop.
+  let fullscreenClaimed = false;
+
   if (input.onboardingWizard.active) {
     const lines = renderOnboardingWizard(input.onboardingWizard, conversationWidth, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
-  if (input.filePicker.active) {
+  if (!fullscreenClaimed && input.filePicker.active) {
     const lines = renderFilePickerOverlay(input.filePicker, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
@@ -53,9 +62,10 @@ export function applyConversationOverlays(
   if (input.modelPicker.active) {
     const lines = renderModelWorkspace(input.modelPicker, conversationWidth, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
-  if (input.selectionModal.active) {
+  if (!fullscreenClaimed && input.selectionModal.active) {
     const lines = renderSelectionModalOverlay(input.selectionModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
@@ -68,22 +78,22 @@ export function applyConversationOverlays(
     next.push(...renderHistorySearchOverlay(input.historySearch, conversationWidth));
   }
 
-  if (input.processModal.active) {
+  if (!fullscreenClaimed && input.processModal.active) {
     const lines = renderProcessModal(input.processModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.agentDetailModal.active) {
-    const lines = renderAgentDetailModal(input.agentDetailModal, conversationWidth);
+  if (!fullscreenClaimed && input.agentDetailModal.active) {
+    const lines = renderAgentDetailModal(input.agentDetailModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.liveTailModal.active) {
+  if (!fullscreenClaimed && input.liveTailModal.active) {
     const lines = renderLiveTailModal(input.liveTailModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.contextInspectorModal.active) {
+  if (!fullscreenClaimed && input.contextInspectorModal.active) {
     const lines = renderContextInspector(conversation, conversationWidth, viewportHeight, contextWindow);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
@@ -91,24 +101,26 @@ export function applyConversationOverlays(
   if (input.settingsModal.active) {
     const lines = renderSettingsModal(input.settingsModal, conversationWidth, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
   if (input.mcpWorkspace.active) {
     const lines = renderMcpWorkspace(input.mcpWorkspace, conversationWidth, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
-  if (input.sessionPickerModal.active) {
+  if (!fullscreenClaimed && input.sessionPickerModal.active) {
     const lines = renderSessionPickerModal(input.sessionPickerModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.profilePickerModal.active) {
+  if (!fullscreenClaimed && input.profilePickerModal.active) {
     const lines = renderProfilePickerModal(input.profilePickerModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
 
-  if (input.bookmarkModal.active) {
+  if (!fullscreenClaimed && input.bookmarkModal.active) {
     const lines = renderBookmarkModal(input.bookmarkModal, conversationWidth, viewportHeight);
     next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);
   }
@@ -116,14 +128,16 @@ export function applyConversationOverlays(
   if (input.helpOverlayActive) {
     const lines = renderHelpOverlay(conversationWidth, keybindingsManager, commandRegistry.getAll(), input.helpScrollOffset, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
   if (input.shortcutsOverlayActive) {
     const lines = renderShortcutsOverlay(conversationWidth, keybindingsManager, input.shortcutsScrollOffset, viewportHeight);
     next = replaceViewportWithOverlay(lines, conversationWidth, viewportHeight);
+    fullscreenClaimed = true;
   }
 
-  if (input.commandMode && input.autocomplete?.isActive) {
+  if (!fullscreenClaimed && input.commandMode && input.autocomplete?.isActive) {
     const lines = renderAutocompleteOverlay(input.autocomplete, conversationWidth, viewportHeight);
     if (lines.length > 0) {
       next = overlayViewportBottom(next, lines, conversationWidth, viewportHeight, bottomDockInset);

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/footer-tips.ts

@@ -0,0 +1,41 @@
+/**
+ * footer-tips.ts — the persistent discoverability hint shown in the shell
+ * footer's tip slot.
+ *
+ * WO-151: instead of a single frozen "/help for commands" line, the footer
+ * surfaces a rotating set of the highest-value affordances (panels, process
+ * monitor, help, quit). Rotation is *contextual, not timed*: when an agent turn
+ * is actively running, the process-monitor tip is promoted to the front so the
+ * operator can jump to F2 while work is in flight. Selection is a pure function
+ * of context so the footer renders deterministically (golden frames stay
+ * stable) — no wall-clock input.
+ */
+
+export interface FooterTipContext {
+  /** True while an agent turn is actively running (streaming / tools / hooks). */
+  readonly agentActive: boolean;
+}
+
+/** Composer status labels that mean an agent turn is actively in flight. */
+const ACTIVE_TURN_STATUSES = new Set(['preflight', 'streaming', 'tools', 'post-hooks']);
+
+/** Derive agent-active state from the composer status label passed to the footer. */
+export function isAgentActive(composerStatus: string | undefined): boolean {
+  return composerStatus !== undefined && ACTIVE_TURN_STATUSES.has(composerStatus);
+}
+
+const TIP_PANELS = 'Ctrl+P panels';
+const TIP_PROCESSES = 'F2 processes';
+const TIP_HELP = '? help';
+const TIP_QUIT = 'Ctrl+C quit';
+
+/**
+ * Build the footer discoverability tip. Segments join with the shared middle
+ * dot. Agent-active state promotes the process-monitor tip to the front.
+ */
+export function buildFooterTip(ctx: FooterTipContext): string {
+  const lead = ctx.agentActive
+    ? [TIP_PROCESSES, TIP_PANELS, TIP_HELP]
+    : [TIP_PANELS, TIP_PROCESSES, TIP_HELP];
+  return [...lead, TIP_QUIT].join(' · ');
+}