@pellux/goodvibes-agent 0.1.0

package/src/panels/docs-panel.ts

@@ -0,0 +1,283 @@
+// ---------------------------------------------------------------------------
+// DocsPanel — tool list, model capabilities, and keyboard shortcut reference.
+// ---------------------------------------------------------------------------
+
+import type { Line } from '../types/grid.ts';
+import { BasePanel } from './base-panel.ts';
+import { buildPanelLine, buildPanelWorkspace, buildSearchInputLine, resolveScrollablePanelSection, DEFAULT_PANEL_PALETTE } from './polish.ts';
+import type { ProviderModelCatalogQuery, ToolCatalogQuery } from '../runtime/ui-service-queries.ts';
+import {
+  getPanelSearchFocusTransition,
+  isPanelSearchBackspace,
+  isPanelSearchCancel,
+  isPanelSearchCommit,
+  isPanelSearchPrintable,
+} from './search-focus.ts';
+
+const C = {
+  headerBg:   '#1a1a2e',
+  headerFg:   '#ffffff',
+  statusBar:  '#222233',
+  statusFg:   '#aaaaaa',
+  sectionFg:  '#00ffff',
+  sectionBg:  '#0d1a2a',
+  toolFg:     '#88ccff',
+  descFg:     '#aaaaaa',
+  keyFg:      '#ffcc44',
+  valueFg:    '#ccccdd',
+  dimFg:      '#555566',
+  selected:   '#00ffff',
+  selectedBg: '#1a2a3a',
+  searchFg:   '#ffffff',
+} as const;
+
+// ---------------------------------------------------------------------------
+// Hardcoded keyboard shortcut reference
+// ---------------------------------------------------------------------------
+const SHORTCUTS: Array<{ key: string; desc: string }> = [
+  { key: 'Ctrl+C',      desc: 'Cancel generation / exit (double)' },
+  { key: 'Ctrl+P',      desc: 'Open panel picker' },
+  { key: 'Ctrl+F',      desc: 'Search conversation' },
+  { key: 'Ctrl+K',      desc: 'Copy last response to clipboard' },
+  { key: 'Ctrl+L',      desc: 'Clear screen' },
+  { key: 'Ctrl+Z',      desc: 'Undo input' },
+  { key: 'Alt+Enter',   desc: 'Insert newline in prompt' },
+  { key: 'PageUp/Down', desc: 'Scroll conversation' },
+  { key: 'Alt+PgUp/Dn', desc: 'Scroll panel' },
+  { key: 'Tab',         desc: 'Path completion / tab panels' },
+  { key: '/',           desc: 'Start slash command' },
+  { key: 'Enter',       desc: 'Submit prompt' },
+  { key: 'Esc',         desc: 'Close overlay / cancel search' },
+  { key: 'Up/Down',      desc: 'Scroll history / navigate list' },
+  { key: 'Alt+Up/Down',  desc: 'Move cursor in multi-line input' },
+  { key: 'Ctrl+A/E',    desc: 'Jump to start/end of line' },
+  { key: 'Ctrl+W',      desc: 'Delete word backward' },
+  { key: 'Ctrl+U',      desc: 'Clear line' },
+  { key: 'F1',          desc: 'Toggle help overlay' },
+  { key: 'F2',          desc: 'Toggle shortcuts overlay' },
+];
+
+type DocSection = 'tools' | 'models' | 'shortcuts';
+
+interface FlatRow {
+  kind: 'header' | 'item' | 'detail' | 'empty';
+  text: string;
+  fg: string;
+  bg: string;
+  bold?: boolean;
+}
+
+function renderRow(width: number, row: FlatRow, isCursor: boolean): Line {
+  const bg = isCursor ? C.selectedBg : row.bg;
+  return buildPanelLine(width, [
+    [isCursor ? '▸' : ' ', C.selected, bg],
+    [row.text, isCursor ? C.selected : row.fg, bg],
+  ]);
+}
+
+export class DocsPanel extends BasePanel {
+  private toolRegistry: ToolCatalogQuery | null = null;
+  private providerRegistry: ProviderModelCatalogQuery | null = null;
+  private section: DocSection = 'tools';
+  private searchQuery = '';
+  private searching = false;
+  private rows: FlatRow[] = [];
+  private cursorIndex = 0;
+  private scrollOffset = 0;
+
+  constructor(toolRegistry?: ToolCatalogQuery, providerRegistry?: ProviderModelCatalogQuery) {
+    super('docs', 'Docs', '?', 'session');
+    this.toolRegistry = toolRegistry ?? null;
+    this.providerRegistry = providerRegistry ?? null;
+  }
+
+  override onActivate(): void {
+    this.needsRender = true;
+    this._buildRows();
+  }
+
+  handleInput(key: string): boolean {
+    if (this.searching) {
+      const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.cursorIndex, itemCount: this.rows.length });
+      if (transition === 'focus-list') {
+        this.searching = false;
+        this.cursorIndex = 0;
+        this.markDirty();
+        return true;
+      }
+      if (isPanelSearchCancel(key) || isPanelSearchCommit(key)) {
+        this.searching = false;
+        this._buildRows();
+        return true;
+      }
+      if (isPanelSearchBackspace(key)) {
+        this.searchQuery = this.searchQuery.slice(0, -1);
+        this._buildRows();
+        return true;
+      }
+      if (isPanelSearchPrintable(key)) {
+        this.searchQuery += key;
+        this._buildRows();
+        return true;
+      }
+      return false;
+    }
+
+    const transition = getPanelSearchFocusTransition(key, { selectedIndex: this.cursorIndex, itemCount: this.rows.length });
+    if (transition === 'focus-search') {
+      this._startSearch();
+      return true;
+    }
+
+    switch (key) {
+      case 'up':       this._move(-1);         return true;
+      case 'down':     this._move(1);          return true;
+      case 'pageup':   this._move(-10);        return true;
+      case 'pagedown': this._move(10);         return true;
+      case 't':        this._setSection('tools');     return true;
+      case 'm':        this._setSection('models');    return true;
+      case 'k':        this._setSection('shortcuts'); return true;
+      default:         return false;
+    }
+  }
+
+  render(width: number, height: number): Line[] {
+    if (height <= 0 || width <= 0) return [];
+    const sectionLabel = this.section === 'tools' ? 'Tools' : this.section === 'models' ? 'Models' : 'Shortcuts';
+    const searchLine = this.searching
+      ? ` Search: ${this.searchQuery}\u258a`
+      : this.searchQuery
+      ? ` Filter: ${this.searchQuery}  (/ or up at top to edit)`
+      : ` / or up at top to search`;
+    this.cursorIndex = Math.max(0, Math.min(this.cursorIndex, Math.max(0, this.rows.length - 1)));
+    const controlsSection = {
+      title: 'Controls',
+      lines: [
+        buildPanelLine(width, [
+          [' t', DEFAULT_PANEL_PALETTE.info], [' tools', DEFAULT_PANEL_PALETTE.dim],
+          ['   m', DEFAULT_PANEL_PALETTE.info], [' models', DEFAULT_PANEL_PALETTE.dim],
+          ['   k', DEFAULT_PANEL_PALETTE.info], [' shortcuts', DEFAULT_PANEL_PALETTE.dim],
+          ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim],
+        ]),
+        buildSearchInputLine(width, '', searchLine.trimStart(), DEFAULT_PANEL_PALETTE, { active: this.searching }),
+      ],
+    } as const;
+    const sectionWindow = resolveScrollablePanelSection(width, height, {
+      intro: 'Browse built-in tool docs, available models, and keyboard shortcuts from one shared reference surface.',
+      palette: DEFAULT_PANEL_PALETTE,
+      beforeSections: [controlsSection],
+      section: {
+        title: sectionLabel,
+        scrollableLines: this.rows.map((row, absIdx) => {
+          const isCursor = absIdx === this.cursorIndex && row.kind !== 'header' && row.kind !== 'empty';
+          return renderRow(width, row, isCursor);
+        }),
+        selectedIndex: this.cursorIndex,
+        scrollOffset: this.scrollOffset,
+        minRows: 8,
+      },
+    });
+    this.scrollOffset = sectionWindow.scrollOffset;
+
+    return buildPanelWorkspace(width, height, {
+      title: ` Docs / ${sectionLabel}`,
+      intro: 'Browse built-in tool docs, available models, and keyboard shortcuts from one shared reference surface.',
+      sections: [
+        controlsSection,
+        sectionWindow.section.lines.length > 0 ? sectionWindow.section : { title: sectionLabel, lines: [buildPanelLine(width, [[' No matching docs', DEFAULT_PANEL_PALETTE.dim]])] },
+      ],
+      palette: DEFAULT_PANEL_PALETTE,
+    });
+  }
+
+  private _setSection(section: DocSection): void {
+    this.section = section;
+    this.searchQuery = '';
+    this.cursorIndex = 0;
+    this.scrollOffset = 0;
+    this._buildRows();
+  }
+
+  private _startSearch(): void {
+    this.searching = true;
+    this.markDirty();
+  }
+
+  private _move(delta: number): void {
+    if (this.rows.length === 0) return;
+    this.cursorIndex = Math.max(0, Math.min(this.rows.length - 1, this.cursorIndex + delta));
+    this.markDirty();
+  }
+
+  private _buildRows(): void {
+    const q = this.searchQuery.trim().toLowerCase();
+    const rows: FlatRow[] = [];
+
+    if (this.section === 'tools') {
+      const tools = this.toolRegistry?.list() ?? [];
+      const filtered = q ? tools.filter(t => t.definition.name.toLowerCase().includes(q) || (t.definition.description ?? '').toLowerCase().includes(q)) : tools;
+      if (filtered.length === 0) {
+        rows.push({ kind: 'empty', text: ' No tools match.', fg: C.dimFg, bg: '' });
+      } else {
+        rows.push({ kind: 'header', text: ` Tools (${filtered.length})`, fg: C.sectionFg, bg: C.sectionBg, bold: true });
+        for (const tool of filtered) {
+          rows.push({ kind: 'item', text: `  ${tool.definition.name}`, fg: C.toolFg, bg: '', bold: true });
+          if (tool.definition.description) {
+            rows.push({ kind: 'detail', text: `    ${tool.definition.description}`, fg: C.descFg, bg: '' });
+          }
+          const metadata: string[] = [];
+          if (tool.definition.sideEffects && tool.definition.sideEffects.length > 0) {
+            metadata.push(`effects: ${tool.definition.sideEffects.join(', ')}`);
+          }
+          if (tool.definition.concurrency) {
+            metadata.push(`concurrency: ${tool.definition.concurrency}`);
+          }
+          if (tool.definition.supportsProgress) {
+            metadata.push('progress');
+          }
+          if (tool.definition.supportsStreamingOutput) {
+            metadata.push('streaming');
+          }
+          if (metadata.length > 0) {
+            rows.push({ kind: 'detail', text: `    ${metadata.join('  |  ')}`, fg: C.dimFg, bg: '' });
+          }
+        }
+      }
+    } else if (this.section === 'models') {
+      const models = this.providerRegistry?.listModels() ?? [];
+      const filtered = q ? models.filter(m => m.id.toLowerCase().includes(q) || m.displayName.toLowerCase().includes(q) || m.provider.toLowerCase().includes(q)) : models;
+      if (filtered.length === 0) {
+        rows.push({ kind: 'empty', text: ' No models match.', fg: C.dimFg, bg: '' });
+      } else {
+        // Group by provider
+        const byProvider = new Map<string, typeof filtered>();
+        for (const m of filtered) {
+          let arr = byProvider.get(m.provider);
+          if (!arr) { arr = []; byProvider.set(m.provider, arr); }
+          arr.push(m);
+        }
+        for (const [provider, pModels] of byProvider) {
+          rows.push({ kind: 'header', text: ` ${provider} (${pModels.length})`, fg: C.sectionFg, bg: C.sectionBg, bold: true });
+          for (const m of pModels) {
+            const ctxK = m.contextWindow > 0 ? `${(m.contextWindow / 1000).toFixed(0)}k` : '?';
+            const caps = [m.contextWindow > 0 ? `ctx:${ctxK}` : ''].filter(Boolean).join(' ');
+            rows.push({ kind: 'item', text: `  ${m.displayName}  ${caps}`, fg: C.toolFg, bg: '' });
+            rows.push({ kind: 'detail', text: `    ${m.id}`, fg: C.descFg, bg: '' });
+          }
+        }
+      }
+    } else {
+      // Shortcuts
+      const filtered = q ? SHORTCUTS.filter(s => s.key.toLowerCase().includes(q) || s.desc.toLowerCase().includes(q)) : SHORTCUTS;
+      rows.push({ kind: 'header', text: ' Keyboard Shortcuts', fg: C.sectionFg, bg: C.sectionBg, bold: true });
+      for (const s of filtered) {
+        const key = s.key.padEnd(16);
+        rows.push({ kind: 'item', text: `  ${key} ${s.desc}`, fg: C.valueFg, bg: '' });
+      }
+    }
+
+    this.rows = rows;
+    this.cursorIndex = Math.min(this.cursorIndex, Math.max(0, rows.length - 1));
+    this.markDirty();
+  }
+}

package/src/panels/eval-panel.ts

@@ -0,0 +1,399 @@
+/**
+ * Eval Panel — renders evaluation harness results in list and detail modes.
+ *
+ * Displays suite run summaries, per-scenario scorecards, and regression
+ * indicators. Wired with an EvalRegistry that holds the latest run results.
+ */
+
+import { BasePanel } from './base-panel.ts';
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine } from '../types/grid.ts';
+import {
+  buildEmptyState,
+  buildPanelLine,
+  buildPanelWorkspace,
+  resolveScrollablePanelSection,
+  DEFAULT_PANEL_PALETTE,
+} from './polish.ts';
+
+// ── EvalRegistry ─────────────────────────────────────────────────────────────
+
+import type {
+  EvalSuiteResult,
+  EvalResult,
+  EvalGateResult,
+  EvalDimension,
+} from '@/runtime/index.ts';
+
+/**
+ * Holds the latest eval run state for display in EvalPanel.
+ * Created externally, injected into the panel.
+ */
+export class EvalRegistry {
+  private _suiteResults: EvalSuiteResult[] = [];
+  private _gateResults: EvalGateResult[] = [];
+  private _running = false;
+  private _lastRunAt: number | null = null;
+  private readonly _subscribers = new Set<() => void>();
+
+  push(result: EvalSuiteResult): void {
+    const idx = this._suiteResults.findIndex((r) => r.suite === result.suite);
+    if (idx >= 0) {
+      this._suiteResults[idx] = result;
+    } else {
+      this._suiteResults.push(result);
+    }
+    this._lastRunAt = Date.now();
+    this._notify();
+  }
+
+  pushGate(gate: EvalGateResult): void {
+    const idx = this._gateResults.findIndex((g) => g.suite === gate.suite);
+    if (idx >= 0) {
+      this._gateResults[idx] = gate;
+    } else {
+      this._gateResults.push(gate);
+    }
+    this._notify();
+  }
+
+  setRunning(running: boolean): void {
+    this._running = running;
+    this._notify();
+  }
+
+  isRunning(): boolean { return this._running; }
+  getLastRunAt(): number | null { return this._lastRunAt; }
+  getSuiteResults(): EvalSuiteResult[] { return this._suiteResults; }
+  getGateResults(): EvalGateResult[] { return this._gateResults; }
+
+  subscribe(cb: () => void): () => void {
+    this._subscribers.add(cb);
+    return () => this._subscribers.delete(cb);
+  }
+
+  private _notify(): void {
+    for (const cb of this._subscribers) cb();
+  }
+}
+
+// ── Colour palette (hex fg colours for createStyledCell) ─────────────────────
+
+const C = {
+  ...DEFAULT_PANEL_PALETTE,
+  header:   '#94a3b8',
+  headerBg: '#1e293b',
+  cyan:     '#38bdf8',
+  green:    '#22c55e',
+  yellow:   '#eab308',
+  red:      '#ef4444',
+  dim:      '#4b5563',
+  label:    '#64748b',
+  value:    '#e2e8f0',
+  selected: '#f1f5f9',
+  sep:      '#1e293b',
+  white:    '#cbd5e1',
+  selectBg: '#0f172a',
+} as const;
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function scoreColor(score: number): string {
+  if (score >= 80) return C.green;
+  if (score >= 60) return C.yellow;
+  return C.red;
+}
+
+function fmtTime(ms: number): string {
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+const DIMENSION_ORDER: EvalDimension[] = ['safety', 'quality', 'latency', 'cost', 'recovery'];
+
+// ── EvalPanel ─────────────────────────────────────────────────────────────────
+
+export class EvalPanel extends BasePanel {
+  private readonly _registry: EvalRegistry;
+  private _mode: 'list' | 'detail' = 'list';
+  private _selectedSuiteIdx = 0;
+  private _selectedScenarioIdx = 0;
+  private _scrollOffset = 0;
+  private _unsub: (() => void) | null = null;
+
+  public constructor(registry: EvalRegistry) {
+    super('eval', 'Eval', 'V', 'monitoring');
+    this._registry = registry;
+  }
+
+  public override onActivate(): void {
+    this._unsub = this._registry.subscribe(() => this.markDirty());
+    this.markDirty();
+  }
+
+  public override onDestroy(): void {
+    this._unsub?.();
+    this._unsub = null;
+  }
+
+  public handleInput(key: string): boolean {
+    const suites = this._registry.getSuiteResults();
+
+    if (this._mode === 'list') {
+      if (key === 'ArrowUp' || key === 'k') {
+        this._selectedSuiteIdx = Math.max(0, this._selectedSuiteIdx - 1);
+        this.markDirty();
+        return true;
+      }
+      if (key === 'ArrowDown' || key === 'j') {
+        this._selectedSuiteIdx = Math.min(suites.length - 1, this._selectedSuiteIdx + 1);
+        this.markDirty();
+        return true;
+      }
+      if ((key === 'Enter' || key === 'Return' || key === 'l') && suites.length > 0) {
+        this._mode = 'detail';
+        this._selectedScenarioIdx = 0;
+        this._scrollOffset = 0;
+        this.markDirty();
+        return true;
+      }
+      return false;
+    }
+
+    // detail mode
+    if (key === 'Escape' || key === 'q' || key === 'h') {
+      this._mode = 'list';
+      this.markDirty();
+      return true;
+    }
+    if (key === 'ArrowUp' || key === 'k') {
+      const suite = suites[this._selectedSuiteIdx];
+      if (suite) {
+        this._selectedScenarioIdx = Math.max(0, this._selectedScenarioIdx - 1);
+        this._scrollOffset = 0;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'ArrowDown' || key === 'j') {
+      const suite = suites[this._selectedSuiteIdx];
+      if (suite) {
+        this._selectedScenarioIdx = Math.min(
+          suite.results.length - 1,
+          this._selectedScenarioIdx + 1,
+        );
+        this._scrollOffset = 0;
+        this.markDirty();
+      }
+      return true;
+    }
+    if (key === 'PageUp') {
+      this._scrollOffset = Math.max(0, this._scrollOffset - 5);
+      this.markDirty();
+      return true;
+    }
+    if (key === 'PageDown') {
+      this._scrollOffset += 5;
+      this.markDirty();
+      return true;
+    }
+    return false;
+  }
+
+  public render(width: number, height: number): Line[] {
+    this.needsRender = false;
+    const suites = this._registry.getSuiteResults();
+    const gates = this._registry.getGateResults();
+    const intro = 'Evaluation harness runs, gates, scenario scorecards, and regression indicators for model and product validation.';
+
+    const running = this._registry.isRunning();
+    const lastRun = this._registry.getLastRunAt();
+    const summaryLine = buildPanelLine(width, [
+      ['  state: ', C.label],
+      [running ? 'running' : 'idle', running ? C.yellow : C.dim],
+      ['  last: ', C.label],
+      [lastRun ? new Date(lastRun).toLocaleTimeString() : 'n/a', C.dim],
+    ]);
+
+    if (suites.length === 0) {
+      const workspace = buildPanelWorkspace(width, height, {
+        title: 'Eval Harness',
+        intro,
+        sections: [{
+          title: 'Status',
+          lines: [
+            summaryLine,
+            ...buildEmptyState(
+              width,
+              ' No results yet.',
+              'Run an eval suite to populate this workspace with suite scores, gate results, and per-scenario detail.',
+              [{ command: '/eval run <suite>', summary: 'start a suite such as core-performance, safety-baseline, or cost-tokens' }],
+              C,
+            ),
+          ],
+        }],
+        palette: C,
+      });
+      while (workspace.length < height) workspace.push(createEmptyLine(width));
+      return workspace;
+    }
+
+    const lines: Line[] = [];
+    if (this._mode === 'list') {
+      this._renderList(lines, suites, gates, width, height, intro, summaryLine);
+    } else {
+      const suite = suites[this._selectedSuiteIdx];
+      if (suite) {
+        this._renderDetail(lines, suite, width, height, intro, summaryLine);
+      }
+    }
+
+    return lines;
+  }
+
+  // ── List view ────────────────────────────────────────────────────────────────
+
+  private _renderList(
+    lines: Line[],
+    suites: EvalSuiteResult[],
+    gates: EvalGateResult[],
+    width: number,
+    _height: number,
+    intro: string,
+    summaryLine: Line,
+  ): void {
+    const gateMap = new Map(gates.map((g) => [g.suite, g]));
+    const sectionLines: Line[] = [
+      summaryLine,
+      buildPanelLine(width, [
+      ['Suite'.padEnd(28), C.header],
+      ['Score'.padEnd(8), C.header],
+      ['Pass'.padEnd(6), C.header],
+      ['Gate'.padEnd(6), C.header],
+      ['Duration', C.header],
+      ]),
+    ];
+
+    suites.forEach((suite, idx) => {
+      const selected = idx === this._selectedSuiteIdx;
+      const gate = gateMap.get(suite.suite);
+      const gateStr = gate ? (gate.passed ? 'ok' : 'FAIL') : '-';
+      const gateColor = gate ? (gate.passed ? C.green : C.red) : C.dim;
+      const durationMs = suite.finishedAt - suite.startedAt;
+      const scoreC = scoreColor(suite.meanScore);
+      const passC = suite.passed ? C.green : C.red;
+      const nameColor = selected ? C.selected : C.white;
+      const bg = selected ? C.selectBg : undefined;
+      const prefix = selected ? '▸ ' : '  ';
+      const name = suite.suite.slice(0, 24).padEnd(26);
+
+      sectionLines.push(buildPanelLine(width, [
+        [prefix + name, nameColor, bg],
+        [suite.meanScore.toFixed(1).padEnd(8), scoreC, bg],
+        [(suite.passed ? 'PASS' : 'FAIL').padEnd(6), passC, bg],
+        [gateStr.padEnd(6), gateColor, bg],
+        [fmtTime(durationMs), C.dim, bg],
+      ]));
+    });
+
+    sectionLines.push(buildPanelLine(width, [[' Enter/l: detail  j/k: navigate', C.dim]]));
+    lines.push(...buildPanelWorkspace(width, _height, {
+      title: 'Eval Harness',
+      intro,
+      sections: [{ title: 'Suites', lines: sectionLines }],
+      palette: C,
+    }));
+  }
+
+  // ── Detail view ──────────────────────────────────────────────────────────────
+
+  private _renderDetail(
+    lines: Line[],
+    suite: EvalSuiteResult,
+    width: number,
+    height: number,
+    intro: string,
+    summaryLine: Line,
+  ): void {
+    const sectionLines: Line[] = [
+      summaryLine,
+      buildPanelLine(width, [
+      [`Suite: ${suite.suite}`, C.cyan],
+      ['  mean=', C.label],
+      [suite.meanScore.toFixed(1), scoreColor(suite.meanScore)],
+      ['  ', C.label],
+      [suite.passed ? 'PASS' : 'FAIL', suite.passed ? C.green : C.red],
+      ]),
+    ];
+
+    const allDetailLines: Line[] = [];
+    suite.results.forEach((result, idx) => {
+      const selected = idx === this._selectedScenarioIdx;
+      this._renderScenarioBlock(allDetailLines, result, selected, width);
+    });
+
+    const detailSection = resolveScrollablePanelSection(width, height, {
+      intro,
+      palette: C,
+      beforeSections: [{ title: 'Scenario Detail', lines: sectionLines }],
+      section: {
+        scrollableLines: allDetailLines,
+        scrollOffset: this._scrollOffset,
+        minRows: 1,
+      },
+    });
+    this._scrollOffset = detailSection.scrollOffset;
+    sectionLines.push(...detailSection.section.lines);
+    sectionLines.push(buildPanelLine(width, [[' Esc/q: back  j/k: scenario  PgUp/PgDn: scroll', C.dim]]));
+    lines.push(...buildPanelWorkspace(width, height, {
+      title: 'Eval Harness',
+      intro,
+      sections: [{ title: 'Scenario Detail', lines: sectionLines }],
+      palette: C,
+    }));
+  }
+
+  private _renderScenarioBlock(
+    lines: Line[],
+    result: EvalResult,
+    selected: boolean,
+    width: number,
+  ): void {
+    const sc = result.scorecard;
+    const prefix = selected ? '▸ ' : '  ';
+    const nameColor = selected ? C.selected : C.white;
+    const scoreC = scoreColor(sc.compositeScore);
+    const passC = sc.passed ? C.green : C.red;
+    const nameLen = Math.max(1, width - 22);
+
+    lines.push(buildPanelLine(width, [
+      [prefix + result.scenario.name.slice(0, nameLen).padEnd(nameLen + 2), nameColor, selected ? C.selectBg : undefined],
+      [sc.compositeScore.toFixed(1).padStart(5), scoreC, selected ? C.selectBg : undefined],
+      ['  ', C.label, selected ? C.selectBg : undefined],
+      [sc.passed ? 'PASS' : 'FAIL', passC, selected ? C.selectBg : undefined],
+    ]));
+
+    if (selected) {
+      for (const dim of DIMENSION_ORDER) {
+        const d = sc.dimensions.find((x) => x.dimension === dim);
+        if (!d) continue;
+        const filled = Math.round(d.score / 10);
+        const bar = '#'.repeat(filled) + '.'.repeat(10 - filled);
+        lines.push(buildPanelLine(width, [
+          ['    ' + dim.padEnd(10) + ' ', C.label],
+          [bar, scoreColor(d.score)],
+          [` ${d.score.toFixed(0).padStart(3)}/100`, C.value],
+        ]));
+      }
+
+      if (sc.notes && sc.notes.length > 0) {
+        for (const note of sc.notes) {
+          lines.push(buildPanelLine(width, [
+            ['    ! ', C.yellow],
+            [note.slice(0, width - 6), C.yellow],
+          ]));
+        }
+      }
+    }
+  }
+}