@pellux/goodvibes-tui 1.1.0 → 1.9.0

package/src/permissions/prompt.ts

@@ -2,10 +2,95 @@ import { type Line } from '../types/grid.ts';
 import { UIFactory } from '../renderer/ui-factory.ts';
 import type { PermissionCategory, PermissionRequestAnalysis } from '@pellux/goodvibes-sdk/platform/permissions';
 import { buildPermissionApprovalBrief, getDisplayArg } from '@pellux/goodvibes-sdk/platform/permissions';
+import { DIFF_TONES, UI_TONES } from '../renderer/ui-primitives.ts';
+import type { HunkSelectionState } from './hunk-selection.ts';
+export { buildPendingPermissionExtras } from './hunk-selection.ts';
 
 import type { PermissionPromptRequest, PermissionPromptDecision, PermissionRequestHandler, PermissionRequest } from '@pellux/goodvibes-sdk/platform/permissions';
 export type { PermissionPromptRequest, PermissionPromptDecision, PermissionRequestHandler, PermissionRequest };
 
+/** Visible hunk rows before a "+N more" trailer kicks in (Risk 3). */
+const MAX_VISIBLE_HUNKS = 8;
+
+/** Path rows shown before collapsing to a "N files: a, b, +K more" line (UX-B 2a). */
+const MAX_PATH_ROWS = 3;
+
+/** Trailing filename for compact display of a long/absolute path. */
+function baseName(p: string): string {
+  const cleaned = p.replace(/[/\\]+$/, '');
+  const idx = Math.max(cleaned.lastIndexOf('/'), cleaned.lastIndexOf('\\'));
+  return idx >= 0 ? cleaned.slice(idx + 1) : cleaned;
+}
+
+/** Make an absolute path relative to the working directory when it sits under it. */
+function relativize(p: string, cwd?: string): string {
+  if (!cwd || !p.startsWith('/')) return p;
+  if (p === cwd) return '.';
+  const prefix = cwd.endsWith('/') ? cwd : `${cwd}/`;
+  return p.startsWith(prefix) ? p.slice(prefix.length) : p;
+}
+
+/** Collect string elements or `el[field]` strings from an array arg. */
+function collectField(arr: unknown, field: string): string[] {
+  if (!Array.isArray(arr)) return [];
+  const out: string[] = [];
+  for (const el of arr) {
+    if (typeof el === 'string') out.push(el);
+    else if (el && typeof el === 'object' && typeof (el as Record<string, unknown>)[field] === 'string') {
+      out.push((el as Record<string, unknown>)[field] as string);
+    }
+  }
+  return out;
+}
+
+/**
+ * The real display target(s) of a tool invocation — the paths/commands/urls a
+ * user needs to see, extracted from the actual arg shapes so a nested
+ * `{files:[{path}]}` no longer falls through to a raw JSON blob. (UX-B 2a.)
+ * Returns [] when nothing recognisable is present (caller falls back).
+ */
+function cardTargets(args: Record<string, unknown>): string[] {
+  const files = collectField(args.files, 'path');
+  if (files.length) return files;
+  if (typeof args.path === 'string') return [args.path];
+  if (typeof args.file === 'string') return [args.file];
+  const commands = collectField(args.commands, 'cmd');
+  if (commands.length) return commands;
+  if (typeof args.command === 'string') return [args.command];
+  if (typeof args.cmd === 'string') return [args.cmd];
+  if (typeof args.pattern === 'string') return [args.pattern];
+  const urls = collectField(args.urls, 'url');
+  if (urls.length) return urls;
+  const queries = collectField(args.queries, 'query');
+  if (queries.length) return queries;
+  if (typeof args.query === 'string') return [args.query];
+  if (typeof args.task === 'string') return [args.task];
+  return [];
+}
+
+/** Short human verb for a permission category, for the condensed summary line. */
+function categoryVerb(category: PermissionCategory): string {
+  switch (category) {
+    case 'write':    return 'write';
+    case 'execute':  return 'run';
+    case 'delegate': return 'delegate';
+    default:         return 'read';
+  }
+}
+
+/**
+ * Single source of truth for how many Line rows the hunk-list section
+ * occupies: 1 header row + up to MAX_VISIBLE_HUNKS checkbox rows + 1 trailer
+ * row (rendered as "+N more" when truncated, blank otherwise — always
+ * present so the row count never depends on which branch fires). Both
+ * getPromptHeight and createPromptLines call this SAME function, so they
+ * cannot drift apart (Risk 2 — main.ts's render loop reserves viewport
+ * space from getPromptHeight *before* the real render happens).
+ */
+function hunkListRowCount(hunkState: HunkSelectionState): number {
+  return Math.min(hunkState.hunks.length, MAX_VISIBLE_HUNKS) + 2;
+}
+
 /**
  * PermissionPromptUI - Renders a permission prompt as Line[] fragments.
  *
@@ -30,11 +115,62 @@ export class PermissionPromptUI {
     };
   }
 
-  static getPromptHeight(request: PermissionPromptRequest): number {
+  /** The relativised display target(s) for the Path field, with a raw fallback. */
+  private static resolvedTargets(request: PermissionPromptRequest): string[] {
+    const cwd = request.workingDirectory;
+    const targets = cardTargets(request.args).map((t) => relativize(t, cwd));
+    return targets.length > 0 ? targets : [getDisplayArg(request.tool, request.args)];
+  }
+
+  /** Path-field row texts — one per target when few, a "N files:" summary when many. */
+  private static pathRowTexts(targets: string[], maxLen: number): string[] {
+    const clamp = (s: string): string => (s.length > maxLen ? `...${s.slice(-(maxLen - 3))}` : s);
+    if (targets.length <= 1) return [clamp(targets[0] ?? '(unknown)')];
+    if (targets.length <= MAX_PATH_ROWS) return targets.map(clamp);
+    const shown = targets.slice(0, 2).map(baseName).join(', ');
+    return [clamp(`${targets.length} files: ${shown}, +${targets.length - 2} more`)];
+  }
+
+  /**
+   * A low-risk, project-local request is shown condensed (one summary line +
+   * choices) unless the user expanded it with `d`. High/critical risk, external
+   * scope, and hunk-selectable edits always show the full block. (UX-B 2b.)
+   */
+  private static isCondensed(
+    request: PermissionPromptRequest,
+    hunkState: HunkSelectionState | undefined,
+    detailsExpanded: boolean,
+  ): boolean {
+    if (hunkState || detailsExpanded) return false;
+    // Shell execution, delegation and network requests always show the full
+    // card — their action semantics (command, side effects, host, checklist)
+    // warrant scrutiny even when the risk model rates them low. Only mundane
+    // low-risk filesystem reads/writes condense. (UX-B 2b.)
+    if (request.category === 'execute' || request.category === 'delegate') return false;
+    const analysis = this.fallbackAnalysis(request);
+    if (analysis.riskLevel !== 'low') return false;
+    const scope = analysis.blastRadius;
+    return scope === undefined || scope === 'local' || scope === 'project';
+  }
+
+  static getPromptHeight(
+    request: PermissionPromptRequest,
+    hunkState?: HunkSelectionState,
+    detailsExpanded = false,
+  ): number {
+    // Condensed low-risk card: top separator, title, summary, choices, bottom
+    // separator — see createPromptLines' condensed branch (must stay in sync).
+    if (this.isCondensed(request, hunkState, detailsExpanded)) return 5;
     const analysis = this.fallbackAnalysis(request);
     const reasonLines = Math.min(2, Math.max(1, analysis.reasons.length));
     const extraLines = (analysis.host ? 1 : 0) + (analysis.surface ? 1 : 0) + (analysis.sideEffects && analysis.sideEffects.length > 0 ? 1 : 0);
-    return 12 + reasonLines + extraLines;
+    const hunkLines = hunkState ? hunkListRowCount(hunkState) : 0;
+    // Base 12 counted a single arg line; the Path field now spans `pathRows`
+    // lines and the full card adds one raw-args row (2a reachability), so the
+    // arg allotment becomes pathRows + 1 → base 12 + pathRows (12 already
+    // included one of those). See createPromptLines' full branch.
+    const pathRows = this.pathRowTexts(this.resolvedTargets(request), 999).length;
+    return 12 + pathRows + reasonLines + extraLines + hunkLines;
   }
 
   /** Returns the key argument to display for a given tool invocation. */
@@ -64,12 +200,16 @@ export class PermissionPromptUI {
    * createPromptLines - Renders the permission prompt as an array of Lines.
    * Injected into the viewport by the render function when a request is pending.
    */
-  static createPromptLines(width: number, request: PermissionRequest): Line[] {
+  static createPromptLines(
+    width: number,
+    request: PermissionRequest,
+    hunkState?: HunkSelectionState,
+    detailsExpanded = false,
+  ): Line[] {
     const lines: Line[] = [];
     const { tool, args, category } = request;
     const analysis = this.fallbackAnalysis(request);
     const brief = buildPermissionApprovalBrief(request);
-    const displayArg = this.getDisplayArg(tool, args);
     const { label, color } = this.getCategoryLabel(category);
 
     const ACCENT = '135'; // purple
@@ -77,6 +217,24 @@ export class PermissionPromptUI {
     const TEXT   = '252';
     const DIM    = '244';
 
+    const maxArgLen = Math.max(10, width - 16);
+    const pathRows = this.pathRowTexts(this.resolvedTargets(request), maxArgLen);
+
+    // Condensed low-risk / project-local card: one summary line (verb → target
+    // (scope)) plus the choices. Full block is one `d` away. (UX-B 2b.)
+    if (this.isCondensed(request, hunkState, detailsExpanded)) {
+      lines.push(UIFactory.stringToLine('─'.repeat(width), width, { fg: ACCENT, dim: true }));
+      lines.push(UIFactory.stringToLine(` [${label}] ${brief.title} `.padEnd(width), width, { fg: WARN, bold: true }));
+      const scopeText = analysis.blastRadius ? ` (${analysis.blastRadius})` : '';
+      const summaryLine = `   ${categoryVerb(category)} → ${pathRows[0]}${scopeText}`;
+      lines.push(UIFactory.stringToLine(summaryLine.padEnd(width), width, { fg: TEXT }));
+      lines.push(UIFactory.stringToLine(
+        `   [Y] Allow once    [A] Allow always (session)    [N] Deny    [d] details`.padEnd(width),
+        width, { fg: ACCENT, bold: true }));
+      lines.push(UIFactory.stringToLine('─'.repeat(width), width, { fg: ACCENT, dim: true }));
+      return lines;
+    }
+
     // Top separator
     lines.push(UIFactory.stringToLine('─'.repeat(width), width, { fg: ACCENT, dim: true }));
 
@@ -89,13 +247,13 @@ export class PermissionPromptUI {
     const toolLine = `   Tool      : ${tool}`;
     lines.push(UIFactory.stringToLine(toolLine.padEnd(width), width, { fg: TEXT }));
 
-    // Key argument row - truncate if too long
-    const maxArgLen = Math.max(10, width - 16);
-    const truncatedArg = displayArg.length > maxArgLen
-      ? '...' + displayArg.slice(-(maxArgLen - 3))
-      : displayArg;
-    const argLine = `   ${brief.subjectLabel.padEnd(9)}: ${truncatedArg}`;
-    lines.push(UIFactory.stringToLine(argLine.padEnd(width), width, { fg: TEXT }));
+    // Path/subject row(s): actual target path(s), one per line when few, a
+    // "N files: a, b, +K more" summary when many. Raw args move to the Args row
+    // below so this field never shows a truncated JSON blob. (UX-B 2a.)
+    pathRows.forEach((rowText, i) => {
+      const labelCol = i === 0 ? brief.subjectLabel.padEnd(9) : ' '.repeat(9);
+      lines.push(UIFactory.stringToLine(`   ${labelCol}: ${rowText}`.padEnd(width), width, { fg: TEXT }));
+    });
 
     // Working directory row
     const cwd = request.workingDirectory ?? '(unknown)';
@@ -150,11 +308,56 @@ export class PermissionPromptUI {
     const checklistLine = `   Checklist : ${truncatedChecklist}`;
     lines.push(UIFactory.stringToLine(checklistLine.padEnd(width), width, { fg: DIM }));
 
+    // Raw args row — the full tool arguments live here in the details view so
+    // the Path field above can render clean path(s), never a JSON blob. (2a.)
+    const rawArgs = JSON.stringify(args);
+    const maxRawLen = Math.max(10, width - 16);
+    const truncatedRaw = rawArgs.length > maxRawLen ? `${rawArgs.slice(0, maxRawLen - 3)}...` : rawArgs;
+    lines.push(UIFactory.stringToLine(`   Args      : ${truncatedRaw}`.padEnd(width), width, { fg: DIM }));
+
     // Blank spacer
     lines.push(UIFactory.stringToLine(' '.repeat(width), width));
 
-    // Choices row
-    const choicesLine = `   [Y] Allow once    [A] Allow always (session)    [N] Deny`;
+    if (hunkState) {
+      // Hunk list — see hunkListRowCount() for the row-count contract this
+      // block must match exactly (Risk 2: getPromptHeight/createPromptLines
+      // parity is what keeps main.ts's render loop from clipping the
+      // viewport).
+      const { hunks, cursor, selected } = hunkState;
+      const headerLine = `   Hunks (${selected.size}/${hunks.length} selected):`;
+      lines.push(UIFactory.stringToLine(headerLine.padEnd(width), width, { fg: TEXT, bold: true }));
+
+      const visible = hunks.slice(0, MAX_VISIBLE_HUNKS);
+      const maxPreviewLen = Math.max(6, Math.floor((width - 20) / 2));
+      for (let i = 0; i < visible.length; i++) {
+        const hunk = visible[i]!;
+        const box = selected.has(i) ? '[x]' : '[ ]';
+        const findPreview = hunk.find.replace(/\n/g, '⏎').slice(0, maxPreviewLen);
+        const replacePreview = hunk.replace.replace(/\n/g, '⏎').slice(0, maxPreviewLen);
+        const rowText = `   ${box} ${i + 1}. ${hunk.path} — "${findPreview}" -> "${replacePreview}"`;
+        const isCursor = i === cursor;
+        lines.push(UIFactory.stringToLine(
+          rowText.padEnd(width),
+          width,
+          {
+            fg: selected.has(i) ? DIFF_TONES.add : DIFF_TONES.del,
+            bg: isCursor ? UI_TONES.bg.selected : undefined,
+            bold: isCursor,
+          },
+        ));
+      }
+
+      const hiddenCount = hunks.length - visible.length;
+      const trailerLine = hiddenCount > 0 ? `   +${hiddenCount} more` : '';
+      lines.push(UIFactory.stringToLine(trailerLine.padEnd(width), width, { fg: DIM }));
+    }
+
+    // Choices row. A condensable card shown in full is the expanded form, so it
+    // offers `[d]` to collapse back; other full cards omit the details toggle.
+    const collapseHint = this.isCondensed(request, hunkState, false) ? '    [d] hide details' : '';
+    const choicesLine = hunkState
+      ? `   [j/k] Navigate  [Space] Toggle  [A] All  [Enter] Apply selected  [N] Deny`
+      : `   [Y] Allow once    [A] Allow always (session)    [N] Deny${collapseHint}`;
     lines.push(UIFactory.stringToLine(choicesLine.padEnd(width), width, { fg: ACCENT, bold: true }));
 
     // Bottom separator

package/src/renderer/autocomplete-overlay.ts

@@ -81,12 +81,35 @@ export function renderAutocompleteOverlay(
   }
   const endIdx = Math.min(startIdx + maxVisible, total);
 
+  // UX-C palette curation (item 4): on a bare '/' (query === ''), the results
+  // list is "common tier" (score 2) followed by "alphabetical rest" (score
+  // 1) — see CommandRegistry.fuzzyMatch. commonCount marks that boundary;
+  // draw a one-row separator there when it falls inside the visible window,
+  // consuming one of the maxVisible slots so the box height never changes.
+  const hasCommonSeparator = state.query === '' && state.commonCount > 0 && state.commonCount < total;
+  type DisplayRow = { type: 'item'; index: number } | { type: 'separator' };
+  const displayRows: DisplayRow[] = [];
+  for (let i = startIdx; i < endIdx && displayRows.length < maxVisible; i++) {
+    if (hasCommonSeparator && i === state.commonCount) {
+      displayRows.push({ type: 'separator' });
+      if (displayRows.length >= maxVisible) break;
+    }
+    displayRows.push({ type: 'item', index: i });
+  }
+
   const indicatorWidth = 2;
   const maxCommandWidth = Math.min(18, Math.max(10, Math.floor(layout.innerWidth * 0.28)));
   const gapWidth = 2;
   const descWidth = Math.max(0, layout.innerWidth - indicatorWidth - maxCommandWidth - gapWidth);
 
-  for (let i = startIdx; i < endIdx; i++) {
+  for (const row of displayRows) {
+    if (row.type === 'separator') {
+      const sepLine = createOverlayContentLine(width, layout);
+      putText(sepLine, layout.margin + 2, layout.innerWidth, '─'.repeat(layout.innerWidth), { fg: BORDER_FG, dim: true });
+      lines.push(sepLine);
+      continue;
+    }
+    const i = row.index;
     const { command } = results[i];
     const isSelected = i === state.selectedIndex;
     const line = createOverlayContentLine(width, layout, BORDER_FG, isSelected ? SELECTED_BG : '');
@@ -139,7 +162,10 @@ export function renderAutocompleteOverlay(
   }
 
   const footerLine = createOverlayContentLine(width, layout);
-  const hints = '[Tab] Complete  [Up/Down] Navigate  [Enter] Execute  [Esc] Cancel';
+  // UX-C vocab unification: "Run"/"Close" match the /help selection modal's
+  // hint bar (selection-modal-overlay.ts) — both surfaces execute a command
+  // on Enter, so they now say so the same way.
+  const hints = '[Tab] Complete  [Up/Down] Navigate  [Enter] Run  [Esc] Close';
   putText(
     footerLine,
     layout.margin + 2,

package/src/renderer/compaction-history-modal.ts

@@ -10,11 +10,22 @@
  */
 
 import { getCompactionEvents } from '@pellux/goodvibes-sdk/platform/core';
+import { getCompactionQualityScore } from './compaction-quality.ts';
 import type { CompactionEvent } from '@pellux/goodvibes-sdk/platform/core';
+import type { CompactionQualityScore } from './compaction-quality.ts';
 
 // ─── formatCompactionEvent ────────────────────────────────────────────────────
 
-function formatCompactionEvent(ev: CompactionEvent, n: number): string {
+/**
+ * Exported for direct unit testing (W5.4/B28) — the grade suffix is a pure
+ * function of the event and an optional score, independent of whichever
+ * runtime lookup (getCompactionQualityScore) supplies that score.
+ */
+export function formatCompactionEvent(
+  ev: CompactionEvent,
+  n: number,
+  qualityScore?: CompactionQualityScore | null,
+): string {
   const date = new Date(ev.timestamp);
   const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
   const savings = Math.max(0, ev.tokensBeforeEstimate - ev.tokensAfterEstimate);
@@ -22,11 +33,15 @@ function formatCompactionEvent(ev: CompactionEvent, n: number): string {
     ? Math.round((savings / ev.tokensBeforeEstimate) * 100)
     : 0;
   const trigger = ev.trigger === 'auto' ? 'auto' : 'manual';
+  // Honest omission: no score means none was computed for this event (e.g. it
+  // pre-dates this feature, or ran through the small-window path, which has
+  // no CompactionEvent to key a score by) — never fabricate a grade.
+  const qualityStr = qualityScore ? `  quality=${qualityScore.grade} (${qualityScore.score.toFixed(2)})` : '';
   return (
     `#${n} ${timeStr} [${trigger}]  ` +
     `${ev.messagesBeforeCompaction}→${ev.messagesAfterCompaction} msgs  ` +
     `~${fmtN(ev.tokensBeforeEstimate)}→~${fmtN(ev.tokensAfterEstimate)} tok  ` +
-    `saved ${savingsPct}%`
+    `saved ${savingsPct}%${qualityStr}`
   );
 }
 
@@ -48,7 +63,8 @@ export function buildCompactionHistoryText(): string {
   ];
   const ordered = [...events].reverse();
   for (let i = 0; i < ordered.length; i++) {
-    lines.push('  ' + formatCompactionEvent(ordered[i], ordered.length - i));
+    const ev = ordered[i]!;
+    lines.push('  ' + formatCompactionEvent(ev, ordered.length - i, getCompactionQualityScore(ev.timestamp)));
   }
   lines.push('  (Restore not available — the SDK does not yet expose a snapshot restore API.)');
   return lines.join('\n');

package/src/renderer/compaction-preview.ts

@@ -18,8 +18,10 @@
 
 import { estimateConversationTokens } from '@pellux/goodvibes-sdk/platform/core';
 import { computeContextUsage } from '../core/context-usage.ts';
+import { formatQualityScoreLine } from './compaction-quality.ts';
 import type { CompactionEvent } from '@pellux/goodvibes-sdk/platform/core';
 import type { ProviderMessage } from '@pellux/goodvibes-sdk/platform/providers';
+import type { CompactionQualityScore } from './compaction-quality.ts';
 
 /**
  * Default compaction totalCeiling from context-compaction DEFAULT_COMPACTION_CONFIG.
@@ -44,6 +46,12 @@ export interface CompactionAfterOptions {
   readonly event: CompactionEvent;
   /** Number of session memories that survived compaction. */
   readonly pinnedMemoryCount: number;
+  /**
+   * Out-of-band quality-score grade for this run (W5.4/B28). Omitted or null
+   * when no score was computed (e.g. the small-window compaction path, which
+   * has no CompactionEvent to key a score by) — no line is rendered then.
+   */
+  readonly qualityScore?: CompactionQualityScore | null | undefined;
 }
 
 /**
@@ -82,7 +90,7 @@ export function buildCompactionPreview(opts: CompactionPreviewOptions): string {
  * after token counts. The trigger field controls wording.
  */
 export function buildCompactionAfterNotice(opts: CompactionAfterOptions): string {
-  const { event, pinnedMemoryCount } = opts;
+  const { event, pinnedMemoryCount, qualityScore } = opts;
   const {
     messagesBeforeCompaction,
     messagesAfterCompaction,
@@ -102,11 +110,14 @@ export function buildCompactionAfterNotice(opts: CompactionAfterOptions): string
 
   const triggerStr = trigger === 'auto' ? 'Auto-compact complete' : 'Compact complete';
 
+  const qualityStr = qualityScore ? `\n  ${formatQualityScoreLine(qualityScore)}` : '';
+
   return (
     `[Context] ${triggerStr}: ${messagesBeforeCompaction} → ${messagesAfterCompaction} messages,` +
     ` ~${fmtN(tokensBeforeEstimate)} → ~${fmtN(tokensAfterEstimate)} tokens` +
     ` (saved ~${fmtN(savings)}, ${savingsPct}%).` +
-    (pinStr ? ` ${pinStr.trim()}` : '')
+    (pinStr ? ` ${pinStr.trim()}` : '') +
+    qualityStr
   );
 }
 

package/src/renderer/compaction-quality.ts

@@ -0,0 +1,100 @@
+/**
+ * Compaction quality-score bridging (Wave-5 W5.4 / B28).
+ *
+ * Reality check (wo803): the SDK's `computeQualityScore()`
+ * (platform/runtime/compaction/quality-score.ts) is only ever called from a
+ * SEPARATE pipeline, `CompactionManager` (platform/runtime/compaction/manager.ts).
+ * The TUI's actual `/compact` path never instantiates `CompactionManager` — it
+ * goes through `platform/core/context-compaction.ts` via
+ * `ConversationManager.compact()` (see `compactConversation()` in
+ * runtime-services.ts), which has no scoring of its own. Adopting the whole
+ * `CompactionManager` pipeline just to get the score would be a far bigger
+ * change than this item calls for.
+ *
+ * Instead, this module calls `computeQualityScore()` directly and out-of-band,
+ * fed by the before/after message sets and token estimates
+ * `compactConversation()` already holds. That's enough to close the gap:
+ * quality scoring reaches `/compact` and `/compact-history` without adopting
+ * `CompactionManager`.
+ *
+ * Honesty note: the `strategy` value passed to `computeQualityScore()` is a
+ * BORROWED rubric label describing what `compactConversation()`'s structured
+ * multi-section extraction actually does (collapse the whole conversation
+ * into one handoff message) — it is NOT a real `CompactionStrategy`
+ * escalation result, and no strategy switch is triggered from it. Every
+ * rendering of the score says so explicitly (see `formatQualityScoreLine`).
+ *
+ * Storage: scores are kept in a TUI-local, timestamp-keyed store, never added
+ * to the SDK's public `CompactionEvent` type (that would force an
+ * api-extractor regen for a value the SDK's own compaction log never
+ * populates). Keyed by `CompactionEvent.timestamp` rather than array index,
+ * because `compactSmallWindow`'s null-event path (small-context-window
+ * models — see runtime-services.ts) can create index gaps.
+ */
+
+import { computeQualityScore, describeScore } from '@/runtime/index.ts';
+import type { CompactionQualityScore, StrategyInput, StrategyOutput } from '@/runtime/index.ts';
+import type { ProviderMessage } from '@pellux/goodvibes-sdk/platform/providers';
+
+export type { CompactionQualityScore } from '@/runtime/index.ts';
+
+/**
+ * Bound the TUI-local score store the same way the SDK bounds its own
+ * compaction event log (context-compaction.ts caps at 50 and shifts the
+ * oldest entry) — a long-running session should not accumulate this forever.
+ */
+const MAX_TRACKED_SCORES = 50;
+
+const scoresByTimestamp = new Map<number, CompactionQualityScore>();
+
+/** Record a computed quality score, keyed by the CompactionEvent's timestamp. */
+export function recordCompactionQualityScore(timestamp: number, score: CompactionQualityScore): void {
+  scoresByTimestamp.set(timestamp, score);
+  if (scoresByTimestamp.size > MAX_TRACKED_SCORES) {
+    const oldestKey = scoresByTimestamp.keys().next().value;
+    if (oldestKey !== undefined) scoresByTimestamp.delete(oldestKey);
+  }
+}
+
+/** Look up a previously-recorded quality score for a CompactionEvent, by timestamp. */
+export function getCompactionQualityScore(timestamp: number): CompactionQualityScore | undefined {
+  return scoresByTimestamp.get(timestamp);
+}
+
+export interface ScoreCompactionRunInput {
+  readonly sessionId: string;
+  readonly contextWindow: number;
+  readonly messagesBefore: readonly ProviderMessage[];
+  readonly messagesAfter: readonly ProviderMessage[];
+  readonly tokensBefore: number;
+  readonly tokensAfter: number;
+}
+
+/**
+ * Compute a CompactionQualityScore for one compaction run, out-of-band from
+ * the SDK's own (unused, in this TUI) CompactionManager pipeline.
+ */
+export function scoreCompactionRun(input: ScoreCompactionRunInput): CompactionQualityScore {
+  const strategyInput: StrategyInput = {
+    sessionId: input.sessionId,
+    messages: input.messagesBefore,
+    tokensBefore: input.tokensBefore,
+    contextWindow: input.contextWindow,
+    // Borrowed rubric label, not a real strategy escalation — see module doc.
+    strategy: 'collapse',
+  };
+  const strategyOutput: StrategyOutput = {
+    messages: [...input.messagesAfter],
+    tokensAfter: input.tokensAfter,
+    summary: '',
+    strategy: 'collapse',
+    durationMs: 0,
+    warnings: [],
+  };
+  return computeQualityScore(strategyInput, strategyOutput);
+}
+
+/** One-line grade summary for the /compact after-notice and /compact-history entries. */
+export function formatQualityScoreLine(score: CompactionQualityScore): string {
+  return `Quality: ${describeScore(score)} (rubric applied out-of-band; no strategy escalation ran)`;
+}

package/src/renderer/compositor.ts

@@ -5,11 +5,9 @@ import { getDisplayWidth } from '../utils/terminal-width.ts';
 import type { SearchManager } from '../input/search.ts';
 import { allowTerminalWrite } from '../runtime/terminal-output-guard.ts';
 import { probeTermCaps, type TermColorCaps } from './term-caps.ts';
-import { DARK_THEME } from './theme.ts';
+import { activeTheme } from './theme.ts';
 import { UI_TONES } from './ui-primitives.ts';
 
-const T = DARK_THEME;
-
 // Accent / dim colors for the panel focus border. The focused pane's left
 // border column is drawn in the accent tone; the unfocused pane stays dim.
 const PANEL_FOCUS_ACCENT = UI_TONES.state.active; // bright blue
@@ -252,6 +250,7 @@ export class Compositor {
 
       // Apply Search Match Highlighting Overlay (left side only)
       if (search && search.manager.active && search.manager.query.length > 0 && i >= offset) {
+        const T = activeTheme();
         const absoluteRow = search.scrollTop + (i - offset);
         const lineMatches = search.manager.getMatchesOnLine(absoluteRow);
         for (const match of lineMatches) {

package/src/renderer/config-modal.ts

@@ -0,0 +1,95 @@
+import type { Line } from '../types/grid.ts';
+import { ModalFactory, type ModalSection, type ModalTab } from './modal-factory.ts';
+import { getOverlayMaxWidth } from './overlay-viewport.ts';
+import { activeUiTones } from './theme.ts';
+import type { ConfigModal, ConfigModalRenderModel } from '../input/config-modal.ts';
+
+// Matches ModalFactory.createModal's own box-width computation (margin 4,
+// requested max width 76 — see renderConfigModalModel below) so the
+// wrap-clamp in ConfigModal.getRenderModel() measures against the SAME width
+// the list section will actually wrap at, at the current terminal size.
+const MODAL_MARGIN = 4;
+const MODAL_MAX_WIDTH = 76;
+/**
+ * renderConfigModal — the single render path for every ConfigModalSurface.
+ * Reads the host's frozen-structure-plus-live-values render model and maps it
+ * onto ModalFactory.createModal (the same renderer settings-modal uses), so the
+ * chrome, tab strip, list, and footer are one dialect across all migrated
+ * surfaces. Pure: takes the modal's render model, returns Line[].
+ */
+export function renderConfigModal(modal: ConfigModal, width: number, height: number): Line[] {
+  // Size the visible row window to the available height so the list scrolls
+  // rather than overflowing (posture header + separator + chrome ≈ 8 rows).
+  const visible = Math.max(3, Math.min(16, height - 8));
+  modal.setViewportRows(visible);
+  // DEBT-5 item 2: the list section wraps a row label at (contentW - 2),
+  // where contentW = boxW - 4 (see ModalFactory._renderListSection). Compute
+  // that exact column here so getRenderModel's wrap-clamp measures against
+  // reality instead of a fixed guess.
+  const boxW = Math.max(24, getOverlayMaxWidth(width, MODAL_MARGIN, MODAL_MAX_WIDTH));
+  const labelWrapWidth = Math.max(8, boxW - 4 - 2);
+  const model = modal.getRenderModel(labelWrapWidth);
+  return renderConfigModalModel(model, width);
+}
+
+/** Pure model→Line[] mapping — the shared inner step of renderConfigModal. */
+function renderConfigModalModel(model: ConfigModalRenderModel, width: number): Line[] {
+  // Read the active-mode chrome tones per call (this render path is not on a
+  // hot loop; the modal renders once per keystroke).
+  const TONES = activeUiTones();
+  const sections: ModalSection[] = [];
+
+  if (model.degraded) {
+    sections.push({ type: 'text', content: `⚠ ${model.degraded}`, style: { fg: TONES.state.warn, bold: true } });
+    sections.push({ type: 'separator' });
+  }
+
+  for (const line of model.header) {
+    sections.push({ type: 'text', content: line, style: { fg: TONES.fg.secondary } });
+  }
+  if (model.header.length > 0) sections.push({ type: 'separator' });
+
+  if (model.rows.length === 0) {
+    sections.push({ type: 'text', content: model.emptyText ?? 'Nothing to show.', style: { fg: TONES.fg.muted, dim: true } });
+  } else {
+    sections.push({
+      type: 'list',
+      items: model.rows.map((row) => ({
+        label: row.label,
+        selected: row.selected,
+        style: row.stale
+          ? { fg: TONES.fg.muted, dim: true }
+          : row.style,
+      })),
+    });
+  }
+
+  const tabs: ModalTab[] | undefined = model.tabs.length > 1
+    ? model.tabs.map((t) => ({ label: t.label, active: t.active }))
+    : undefined;
+
+  // Keep the content region a stable height so live-value ticks never change
+  // the box size: frozen header + separator + the fixed visible-row window.
+  const targetContentRows =
+    (model.degraded ? 2 : 0) +
+    model.header.length +
+    (model.header.length > 0 ? 1 : 0) +
+    model.scroll.visible;
+
+  const helpers = model.status
+    ? [{ content: model.status, accent: true }]
+    : undefined;
+
+  return ModalFactory.createModal(
+    {
+      title: model.title,
+      width: MODAL_MAX_WIDTH,
+      tabs,
+      sections,
+      targetContentRows,
+      helpers,
+      hints: [...model.hints],
+    },
+    width,
+  );
+}