@pellux/goodvibes-tui 0.29.0 → 1.1.0

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

@@ -9,7 +9,25 @@ import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { getOverlaySurfaceMetrics, getStableOverlayContentRows } from './overlay-viewport.ts';
 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 { AGENT_TERMINAL_STATUSES as MODAL_TERMINAL_STATUSES, AGENT_STALL_THRESHOLD_MS as MODAL_STALL_THRESHOLD_MS, hasReportedUsage } 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,16 +277,17 @@ 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' });
 
   // Metrics
   sections.push({ type: 'text', content: `Tool calls : ${rec.toolCallCount}` });
-  if (rec.usage) {
-    const totalIn = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
+  if (hasReportedUsage(rec.usage)) {
+    const usage = rec.usage;
+    const totalIn = usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0);
     sections.push({ type: 'text', content: `Tokens in  : ${totalIn.toLocaleString()}` });
-    sections.push({ type: 'text', content: `Tokens out : ${rec.usage.outputTokens.toLocaleString()}` });
+    sections.push({ type: 'text', content: `Tokens out : ${usage.outputTokens.toLocaleString()}` });
   } else {
     sections.push({
       type: 'text',
@@ -271,7 +301,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 +331,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 +346,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: `Progress: ${rec.progress}`,
-      style: { fg: '#00ffcc' },
+      style: { fg: AGENT_DETAIL_NEON.accent },
     });
   }
 
@@ -326,7 +356,7 @@ export function renderAgentDetailModal(
     sections.push({
       type: 'text',
       content: `Error: ${rec.error}`,
-      style: { fg: '#ff6666' },
+      style: { fg: AGENT_DETAIL_NEON.bad },
     });
   }
 
@@ -393,7 +423,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 +433,7 @@ export function renderAgentDetailModal(
       sections.push({
         type: 'text',
         content: `  ${trimmed}`,
-        style: { fg: '#aaffee' },
+        style: { fg: AGENT_DETAIL_NEON.mint },
       });
     }
   }
@@ -415,7 +445,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 = '';

package/src/renderer/fullscreen-workspace.ts

@@ -13,14 +13,9 @@ import {
 } from './fullscreen-primitives.ts';
 
 export {
-  borderLine,
   clamp,
-  contentLine,
-  fillRange,
-  makeLine,
   padDisplay,
   stableWindow,
-  writeText,
 } from './fullscreen-primitives.ts';
 export { FULLSCREEN_PALETTE as WORKSPACE_PALETTE } from './fullscreen-primitives.ts';
 
@@ -63,12 +58,12 @@ export interface FullscreenWorkspaceMetrics {
   readonly controlRows: number;
 }
 
-export function drawVertical(line: Line, x: number, bg = ''): void {
+function drawVertical(line: Line, x: number, bg = ''): void {
   if (x <= 0 || x >= line.length - 1) return;
   drawVerticalRule(line, x, WORKSPACE_PALETTE.border, bg);
 }
 
-export function drawHorizontalRange(line: Line, startX: number, endX: number, bg = ''): void {
+function drawHorizontalRange(line: Line, startX: number, endX: number, bg = ''): void {
   drawHorizontalRule(line, Math.max(1, startX), Math.min(line.length - 2, endX), WORKSPACE_PALETTE.border, bg);
 }
 

package/src/renderer/hint-grammar.ts

@@ -28,7 +28,7 @@ function isEscapeHint(spec: HintSpec): boolean {
 }
 
 /** Render one hint as `[Key] Verb` (or `[Key]` when it has no verb). */
-export function formatHint(spec: HintSpec): string {
+function formatHint(spec: HintSpec): string {
   return spec.verb ? `[${spec.key}] ${spec.verb}` : `[${spec.key}]`;
 }
 

package/src/renderer/history-search-overlay.ts

@@ -1,27 +1,15 @@
 import type { Line } from '../types/grid.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { fitDisplay, getDisplayWidth } from '../utils/terminal-width.ts';
 import type { HistorySearch } from '../input/input-history.ts';
 import { createBottomBarLine, writeBottomBarText } from './bottom-bar.ts';
+import { formatHints } from './hint-grammar.ts';
 
 /**
  * Truncate `text` to at most `maxWidth` display columns, then pad with spaces
  * to exactly `maxWidth` columns. CJK/emoji wide characters count as 2 columns.
  */
 function truncateToWidth(text: string, maxWidth: number): string {
-  let usedWidth = 0;
-  let result = '';
-  let i = 0;
-  while (i < text.length) {
-    const code = text.codePointAt(i)!;
-    const charLen = code > 0xFFFF ? 2 : 1;
-    const charWidth = getDisplayWidth(text.slice(i, i + charLen));
-    if (usedWidth + charWidth > maxWidth) break;
-    result += text.slice(i, i + charLen);
-    usedWidth += charWidth;
-    i += charLen;
-  }
-  // Pad to exactly maxWidth columns with spaces
-  return result + ' '.repeat(maxWidth - usedWidth);
+  return fitDisplay(text, maxWidth, '');
 }
 
 /**
@@ -49,7 +37,13 @@ export function renderHistorySearchOverlay(
 
   // Build the display string
   const label = prefix + queryPart;
-  const full = truncateToWidth(label + matchText, width);
+  const hints = formatHints([
+    { key: 'Ctrl+R/↑', verb: 'Older' },
+    { key: 'Ctrl+S/↓', verb: 'Newer' },
+    { key: 'Enter', verb: 'Accept' },
+    { key: 'Esc', verb: 'Cancel' },
+  ]);
+  const full = truncateToWidth(`${label}${matchText}  ${hints}`, width);
 
   const line = createBottomBarLine(width, { fg: '#000000', bg: '#00ffcc' });
   writeBottomBarText(line, 0, width, full, { fg: '#000000', bg: '#00ffcc' });

package/src/renderer/markdown.ts

@@ -310,7 +310,15 @@ function renderTable(rows: string[], width: number, indent: number): Line[] {
       for (const ch of text) {
         const cw = getDisplayWidth(ch);
         if (w + cw > maxW) {
-          // Truncate with ellipsis
+          // Truncate with ellipsis. If the last cell pushed is a wide-glyph
+          // placeholder (the empty second column of a 2-wide character),
+          // overwriting it in place would leave the wide glyph's first
+          // column dangling next to the ellipsis with no placeholder cell \u2014
+          // step back one more cell so the ellipsis replaces the actual
+          // glyph, not its placeholder.
+          if (cells.length > 0 && cells[cells.length - 1].char === '' && cells.length > 1) {
+            cells.pop();
+          }
           if (cells.length > 0) cells[cells.length - 1] = createStyledCell('\u2026', cells[cells.length - 1]);
           return cells;
         }