@pellux/goodvibes-tui 0.28.0 → 1.0.0

package/src/panels/eval-panel.ts

@@ -5,14 +5,14 @@
  * indicators. Wired with an EvalRegistry that holds the latest run results.
  */
 
+import { join } from 'node:path';
 import { BasePanel } from './base-panel.ts';
 import { truncateDisplay } from '../utils/terminal-width.ts';
 import type { Line } from '../types/grid.ts';
-import type { KeyName } from './types.ts';
+import type { KeyName, PanelIntegrationContext } from './types.ts';
 import { createEmptyLine } from '../types/grid.ts';
 import {
   buildAlignedRow,
-  buildEmptyState,
   buildKeyboardHints,
   buildMeterLine,
   buildPanelLine,
@@ -30,9 +30,14 @@ import type {
   EvalResult,
   EvalGateResult,
   EvalDimension,
+  EvalBaseline,
+  RegressionEntry,
 } from '@/runtime/index.ts';
+import { loadBaseline } from '@/runtime/index.ts';
 import { formatShortDuration } from '../utils/format-duration.ts';
 
+const BASELINE_PATH = '.goodvibes/eval/baseline.json';
+
 /**
  * Holds the latest eval run state for display in EvalPanel.
  * Created externally, injected into the panel.
@@ -87,24 +92,18 @@ export class EvalRegistry {
 
 // ── Colour palette (no inline hex in render bodies) ──────────────────────────
 
+// Domain accents only; base chrome (header/headerBg/info/good/warn/bad/
+// value/selectBg) comes from DEFAULT_PANEL_PALETTE.
 const C = extendPalette(DEFAULT_PANEL_PALETTE, {
-  header:   '#94a3b8',
-  headerBg: '#1e293b',
-  cyan:     '#38bdf8',
-  green:    '#22c55e',
-  yellow:   '#eab308',
-  red:      '#ef4444',
-  white:    '#cbd5e1',
-  selected: '#f1f5f9',
-  selectBg: '#0f172a',
+  selected: '#f1f5f9',   // emphasized row/text highlight, brighter than value
 });
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function scoreColor(score: number): string {
-  if (score >= 80) return C.green;
-  if (score >= 60) return C.yellow;
-  return C.red;
+  if (score >= 80) return C.good;
+  if (score >= 60) return C.warn;
+  return C.bad;
 }
 
 function fmtTime(ms: number): string {
@@ -117,19 +116,24 @@ const DIMENSION_ORDER: EvalDimension[] = ['safety', 'quality', 'latency', 'cost'
 
 export class EvalPanel extends BasePanel {
   private readonly _registry: EvalRegistry;
+  private readonly _projectRoot: string;
   private _mode: 'list' | 'detail' = 'list';
   private _selectedSuiteIdx = 0;
   private _selectedScenarioIdx = 0;
   private _scrollOffset = 0;
   private _unsub: (() => void) | null = null;
+  private _baseline: EvalBaseline | null = null;
+  private _baselineLoading = false;
 
-  public constructor(registry: EvalRegistry) {
-    super('eval', 'Eval', 'V', 'monitoring');
+  public constructor(registry: EvalRegistry, projectRoot = '.') {
+    super('eval', 'Eval', '▮', 'incidents-diagnostics');
     this._registry = registry;
+    this._projectRoot = projectRoot;
   }
 
   public override onActivate(): void {
     this._unsub = this._registry.subscribe(() => this.markDirty());
+    this._loadBaselineIfNeeded();
     this.markDirty();
   }
 
@@ -138,6 +142,65 @@ export class EvalPanel extends BasePanel {
     this._unsub = null;
   }
 
+  /**
+   * Seed the panel with last-known scores from the on-disk baseline so a
+   * fresh session shows real data instead of a "run a suite" signpost.
+   * Only loaded once per activation; a live suite run supersedes it.
+   *
+   * Resolved as an absolute path under _projectRoot before handing it to
+   * loadBaseline() — the SDK helper resolves a relative path against the
+   * process cwd (not the projectRoot argument), so joining here is what
+   * actually makes the constructor's projectRoot meaningful.
+   */
+  private _loadBaselineIfNeeded(): void {
+    if (this._baseline || this._baselineLoading) return;
+    this._baselineLoading = true;
+    void loadBaseline(join(this._projectRoot, BASELINE_PATH), this._projectRoot)
+      .then((baseline) => {
+        this._baseline = baseline ?? null;
+      })
+      .catch(() => {
+        this._baseline = null;
+      })
+      .finally(() => {
+        this._baselineLoading = false;
+        this.markDirty();
+      });
+  }
+
+  /** Number of selectable rows in list mode: live suite results, or baseline suites when none have run yet. */
+  private _listLength(suites: EvalSuiteResult[]): number {
+    if (suites.length > 0) return suites.length;
+    return this._baseline ? Object.keys(this._baseline.suites).length : 0;
+  }
+
+  /** Name of the suite currently selected in list mode, from live results or the baseline. */
+  private _selectedSuiteName(suites: EvalSuiteResult[]): string | undefined {
+    if (suites.length > 0) return suites[this._selectedSuiteIdx]?.suite;
+    if (!this._baseline) return undefined;
+    return Object.keys(this._baseline.suites)[this._selectedSuiteIdx];
+  }
+
+  /** Total scenario/detail line count for the given suite, used to clamp pagedown scrolling. */
+  private _detailLineCount(suite: EvalSuiteResult): number {
+    const gates = this._registry.getGateResults();
+    const gate = gates.find((g) => g.suite === suite.suite);
+    const regressedIds = new Set((gate?.regressions ?? []).map((r) => r.scenarioId));
+
+    let count = 0;
+    suite.results.forEach((result, idx) => {
+      count += 1;
+      if (idx === this._selectedScenarioIdx) {
+        count += DIMENSION_ORDER.filter((dim) =>
+          result.scorecard.dimensions.some((d) => d.dimension === dim),
+        ).length;
+        if (regressedIds.has(result.scenario.id)) count += 1;
+        count += result.scorecard.notes?.length ?? 0;
+      }
+    });
+    return count;
+  }
+
   public handleInput(key: KeyName): boolean {
     const suites = this._registry.getSuiteResults();
 
@@ -148,7 +211,8 @@ export class EvalPanel extends BasePanel {
         return true;
       }
       if (key === 'down' || key === 'j') {
-        this._selectedSuiteIdx = Math.min(suites.length - 1, this._selectedSuiteIdx + 1);
+        const len = this._listLength(suites);
+        this._selectedSuiteIdx = Math.min(Math.max(0, len - 1), this._selectedSuiteIdx + 1);
         this.markDirty();
         return true;
       }
@@ -195,13 +259,37 @@ export class EvalPanel extends BasePanel {
       return true;
     }
     if (key === 'pagedown') {
-      this._scrollOffset += 5;
+      const suite = suites[this._selectedSuiteIdx];
+      const maxOffset = suite ? Math.max(0, this._detailLineCount(suite) - 1) : 0;
+      this._scrollOffset = Math.min(maxOffset, this._scrollOffset + 5);
       this.markDirty();
       return true;
     }
     return false;
   }
 
+  /**
+   * Cross-panel integration hook: r runs the selected suite, R runs all
+   * suites, both dispatched through the real /eval command executor rather
+   * than a printed signpost. registry.setRunning()/push() (already wired in
+   * src/input/commands/eval.ts) animate the in-panel state as the run proceeds.
+   */
+  public handlePanelIntegrationAction(key: string, ctx: PanelIntegrationContext): boolean {
+    if (key !== 'r' && key !== 'R') return false;
+    if (!ctx.executeCommand) return false;
+
+    if (key === 'R') {
+      void ctx.executeCommand('eval', ['run', 'all']).catch(() => {});
+      return true;
+    }
+
+    const suites = this._registry.getSuiteResults();
+    const suiteName = this._selectedSuiteName(suites);
+    if (!suiteName) return false;
+    void ctx.executeCommand('eval', ['run', suiteName]).catch(() => {});
+    return true;
+  }
+
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
     const suites = this._registry.getSuiteResults();
@@ -209,6 +297,12 @@ export class EvalPanel extends BasePanel {
     const intro = 'Evaluation harness runs, gates, scenario scorecards, and regression indicators for model and product validation.';
 
     if (suites.length === 0) {
+      if (this._baseline && Object.keys(this._baseline.suites).length > 0) {
+        const workspace = this._renderBaselineList(this._baseline, width, height, intro);
+        while (workspace.length < height) workspace.push(createEmptyLine(width));
+        return workspace;
+      }
+
       const workspace = buildPanelWorkspace(width, height, {
         title: 'Eval Harness',
         intro,
@@ -216,15 +310,13 @@ export class EvalPanel extends BasePanel {
           title: 'Status',
           lines: [
             this._statusLine(width),
-            ...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,
-            ),
+            buildPanelLine(width, [[' No results yet — no baseline on disk.', C.dim]]),
           ],
         }],
+        footerLines: [buildKeyboardHints(width, [
+          { keys: 'r', label: 'run selected suite' },
+          { keys: 'R', label: 'run all suites' },
+        ], C)],
         palette: C,
       });
       while (workspace.length < height) workspace.push(createEmptyLine(width));
@@ -237,7 +329,7 @@ export class EvalPanel extends BasePanel {
     } else {
       const suite = suites[this._selectedSuiteIdx];
       if (suite) {
-        this._renderDetail(lines, suite, width, height, intro);
+        this._renderDetail(lines, suite, gates, width, height, intro);
       }
     }
 
@@ -254,11 +346,11 @@ export class EvalPanel extends BasePanel {
     const failed = suites.length - passed;
     return buildPanelLine(width, [
       ['  state ', C.label],
-      [running ? 'running' : 'idle', running ? C.yellow : C.dim],
+      [running ? 'running' : 'idle', running ? C.warn : C.dim],
       ['  passed ', C.label],
-      [String(passed), passed > 0 ? C.green : C.dim],
+      [String(passed), passed > 0 ? C.good : C.dim],
       ['  failed ', C.label],
-      [String(failed), failed > 0 ? C.red : C.dim],
+      [String(failed), failed > 0 ? C.bad : C.dim],
       ['  last ', C.label],
       [lastRun ? new Date(lastRun).toLocaleTimeString() : 'n/a', C.dim],
     ]);
@@ -280,14 +372,14 @@ export class EvalPanel extends BasePanel {
       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 gateColor = gate ? (gate.passed ? C.good : C.bad) : C.dim;
       const durationMs = suite.finishedAt - suite.startedAt;
       return {
         selected,
         cells: [
-          { text: suite.suite, fg: selected ? C.selected : C.white, bold: selected },
+          { text: suite.suite, fg: selected ? C.selected : C.value, bold: selected },
           { text: suite.meanScore.toFixed(1), fg: scoreColor(suite.meanScore) },
-          { text: suite.passed ? 'PASS' : 'FAIL', fg: suite.passed ? C.green : C.red },
+          { text: suite.passed ? 'PASS' : 'FAIL', fg: suite.passed ? C.good : C.bad },
           { text: gateStr, fg: gateColor },
           { text: fmtTime(durationMs), fg: C.dim },
         ],
@@ -308,9 +400,9 @@ export class EvalPanel extends BasePanel {
       const passCount = selectedSuite.results.filter((r) => r.scorecard.passed).length;
       detailLines.push(buildPanelLine(width, [
         [' selected ', C.label],
-        [selectedSuite.suite, C.cyan],
+        [selectedSuite.suite, C.info],
         ['  scenarios ', C.label],
-        [`${passCount}/${selectedSuite.results.length} passed`, passCount === selectedSuite.results.length ? C.green : C.yellow],
+        [`${passCount}/${selectedSuite.results.length} passed`, passCount === selectedSuite.results.length ? C.good : C.warn],
       ]));
       const meterW = Math.max(10, Math.min(30, width - 24));
       detailLines.push(buildMeterLine(width, Math.round((selectedSuite.meanScore / 100) * meterW), meterW, {
@@ -318,12 +410,27 @@ export class EvalPanel extends BasePanel {
         empty: C.empty,
         label: C.label,
       }, { prefix: ' mean ', suffix: ` ${selectedSuite.meanScore.toFixed(1)}/100 ` }));
+
+      const gate = gateMap.get(selectedSuite.suite);
+      if (gate && gate.regressions.length > 0) {
+        const worst = [...gate.regressions].sort((a, b) => a.delta - b.delta)[0];
+        const segments: Array<[string, string]> = [
+          [' regressions ', C.label],
+          [`${gate.regressions.length}`, C.bad],
+        ];
+        if (worst) {
+          segments.push(['  worst ', C.label], [`${worst.scenarioName} ${worst.delta.toFixed(1)}`, C.bad]);
+        }
+        detailLines.push(buildPanelLine(width, segments));
+      }
     }
 
     const footer = buildKeyboardHints(width, [
       { keys: `${this._selectedSuiteIdx + 1}/${suites.length}`, label: 'suite' },
       { keys: '↑/↓', label: 'navigate' },
       { keys: 'Enter', label: 'open detail' },
+      { keys: 'r', label: 'run selected' },
+      { keys: 'R', label: 'run all' },
     ], C);
 
     lines.push(...buildPanelWorkspace(width, height, {
@@ -344,29 +451,39 @@ export class EvalPanel extends BasePanel {
   private _renderDetail(
     lines: Line[],
     suite: EvalSuiteResult,
+    gates: EvalGateResult[],
     width: number,
     height: number,
     intro: string,
   ): void {
     const passCount = suite.results.filter((r) => r.scorecard.passed).length;
+    const gate = gates.find((g) => g.suite === suite.suite);
+    const regressionMap = new Map((gate?.regressions ?? []).map((r) => [r.scenarioId, r]));
+
     const headerLines: Line[] = [
       this._statusLine(width),
       buildPanelLine(width, [
         [' suite ', C.label],
-        [suite.suite, C.cyan],
+        [suite.suite, C.info],
         ['  mean ', C.label],
         [suite.meanScore.toFixed(1), scoreColor(suite.meanScore)],
         ['  ', C.label],
-        [suite.passed ? 'PASS' : 'FAIL', suite.passed ? C.green : C.red],
+        [suite.passed ? 'PASS' : 'FAIL', suite.passed ? C.good : C.bad],
         ['  scenarios ', C.label],
-        [`${passCount}/${suite.results.length} passed`, passCount === suite.results.length ? C.green : C.yellow],
+        [`${passCount}/${suite.results.length} passed`, passCount === suite.results.length ? C.good : C.warn],
       ]),
     ];
+    if (gate && gate.regressions.length > 0) {
+      headerLines.push(buildPanelLine(width, [
+        [' regressions ', C.label],
+        [`${gate.regressions.length} scenario(s) below baseline`, C.bad],
+      ]));
+    }
 
     const allDetailLines: Line[] = [];
     suite.results.forEach((result, idx) => {
       const selected = idx === this._selectedScenarioIdx;
-      this._renderScenarioBlock(allDetailLines, result, selected, width);
+      this._renderScenarioBlock(allDetailLines, result, selected, width, regressionMap.get(result.scenario.id));
     });
 
     const footer = buildKeyboardHints(width, [
@@ -404,15 +521,18 @@ export class EvalPanel extends BasePanel {
     result: EvalResult,
     selected: boolean,
     width: number,
+    regression: RegressionEntry | undefined,
   ): void {
     const sc = result.scorecard;
     const scoreC = scoreColor(sc.compositeScore);
-    const passC = sc.passed ? C.green : C.red;
+    const passC = sc.passed ? C.good : C.bad;
+    const nameText = regression ? `▼ ${result.scenario.name}` : result.scenario.name;
+    const nameColor = selected ? C.selected : (regression ? C.bad : C.value);
 
     lines.push(buildAlignedRow(
       width,
       [
-        { text: result.scenario.name, fg: selected ? C.selected : C.white, bold: selected },
+        { text: nameText, fg: nameColor, bold: selected },
         { text: sc.compositeScore.toFixed(1), fg: scoreC },
         { text: sc.passed ? 'PASS' : 'FAIL', fg: passC },
       ],
@@ -436,14 +556,72 @@ export class EvalPanel extends BasePanel {
         }, { prefix: `    ${dim.padEnd(9)} `, suffix: ` ${d.score.toFixed(0).padStart(3)}/100 ` }));
       }
 
+      if (regression) {
+        lines.push(buildPanelLine(width, [
+          ['    ▼ regression vs baseline ', C.bad],
+          [`${regression.baselineScore.toFixed(1)} -> ${regression.freshScore.toFixed(1)} (${regression.delta >= 0 ? '+' : ''}${regression.delta.toFixed(1)})`, C.bad],
+        ]));
+      }
+
       if (sc.notes && sc.notes.length > 0) {
         for (const note of sc.notes) {
           lines.push(buildPanelLine(width, [
-            ['    ! ', C.yellow],
-            [truncateDisplay(note, Math.max(8, width - 6)), C.yellow],
+            ['    ! ', C.warn],
+            [truncateDisplay(note, Math.max(8, width - 6)), C.warn],
           ]));
         }
       }
     }
   }
+
+  // ── Baseline-seeded list (no live suite results yet) ─────────────────────────
+
+  private _renderBaselineList(
+    baseline: EvalBaseline,
+    width: number,
+    height: number,
+    intro: string,
+  ): Line[] {
+    const entries = Object.entries(baseline.suites);
+
+    const tableRows = entries.map(([name, summary], idx) => {
+      const selected = idx === this._selectedSuiteIdx;
+      const scenarioCount = Object.keys(summary.scenarioScores).length;
+      return {
+        selected,
+        cells: [
+          { text: name, fg: selected ? C.selected : C.value, bold: selected },
+          { text: summary.meanScore.toFixed(1), fg: scoreColor(summary.meanScore) },
+          { text: `${scenarioCount}`, fg: C.dim },
+        ],
+      };
+    });
+
+    const tableLines = buildTable(width, [
+      { label: 'Suite' },
+      { label: 'Score', width: 7, align: 'right' },
+      { label: 'Scenarios', width: 10, align: 'right' },
+    ], tableRows, C, { selectedBg: C.selectBg });
+
+    const footer = buildKeyboardHints(width, [
+      { keys: `${entries.length > 0 ? this._selectedSuiteIdx + 1 : 0}/${entries.length}`, label: 'suite' },
+      { keys: '↑/↓', label: 'navigate' },
+      { keys: 'r', label: 'run selected' },
+      { keys: 'R', label: 'run all' },
+    ], C);
+
+    return buildPanelWorkspace(width, height, {
+      title: 'Eval Harness',
+      intro,
+      sections: [
+        { lines: [this._statusLine(width)] },
+        {
+          title: `Baseline · ${baseline.label} (captured ${new Date(baseline.capturedAt).toLocaleString()})`,
+          lines: tableLines,
+        },
+      ],
+      footerLines: [footer],
+      palette: C,
+    });
+  }
 }