@polderlabs/bizar 5.0.2 → 5.2.0

package/bizar-dash/src/web/styles/main.css

@@ -9065,3 +9065,548 @@ select:focus-visible,
   color: var(--accent, #8b5cf6);
   margin-left: 6px;
 }
+
+/* ─── Toggle switch ──────────────────────────────────────────────── */
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-elev-3);
+  border-radius: 11px;
+  transition: background 200ms ease;
+}
+
+.toggle-slider::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 200ms ease;
+}
+
+.toggle input:checked + .toggle-slider {
+  background: var(--accent);
+}
+
+.toggle input:checked + .toggle-slider::before {
+  transform: translateX(18px);
+}
+
+.toggle input:focus-visible + .toggle-slider {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ─── Plugins view ────────────────────────────────────────────────── */
+.view-plugins {
+  max-width: 1400px;
+}
+
+.plugins-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+.plugin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--space-4);
+}
+
+.plugin-description {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.plugin-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.plugin-card-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+}
+
+.plugin-card-stats {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: var(--space-2);
+}
+
+/* ─── Plugin permissions ──────────────────────────────────────────── */
+.plugin-permissions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: var(--space-3) 0;
+}
+
+.permission-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.permission-chip.is-blue {
+  background: rgba(59, 130, 246, 0.15);
+  color: #58a6ff;
+}
+
+.permission-chip.is-yellow {
+  background: rgba(245, 158, 11, 0.15);
+  color: #d29922;
+}
+
+.permission-chip.is-red {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f85149;
+}
+
+.permission-chip.is-gray {
+  background: rgba(139, 148, 158, 0.15);
+  color: #8b949e;
+}
+
+/* ─── v5.2.0 — Eval framework web UI ─────────────────────────────────────── */
+
+.eval-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
+  gap: var(--space-6, 24px);
+  margin-top: var(--space-6, 24px);
+  align-items: flex-start;
+}
+
+@media (max-width: 900px) {
+  .eval-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.eval-runs-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 12px);
+  min-width: 0;
+}
+
+.eval-run-card-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eval-run-card {
+  cursor: pointer;
+}
+
+.eval-run-card-selected {
+  border-color: var(--accent, #8b5cf6);
+  box-shadow: 0 0 0 1px var(--accent, #8b5cf6);
+}
+
+.eval-run-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 12px);
+  min-width: 0;
+}
+
+.eval-run-title {
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-strong);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.eval-run-meta {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.eval-status {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.eval-status.is-pass { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
+.eval-status.is-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; }
+.eval-status.is-fail { background: rgba(239, 68, 68, 0.15); color: #f85149; }
+
+.eval-baseline-btn {
+  align-self: flex-end;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: border-color var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
+}
+
+.eval-baseline-btn:hover {
+  border-color: var(--accent, #8b5cf6);
+  color: var(--accent, #8b5cf6);
+}
+
+.eval-detail {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+}
+
+.eval-detail-loading,
+.eval-runs-loading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2, 8px);
+  padding: var(--space-4, 16px);
+  color: var(--text-dim);
+}
+
+.eval-detail-empty {
+  padding: var(--space-6, 24px);
+}
+
+.eval-run-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+}
+
+.eval-run-detail-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 12px);
+}
+
+.eval-run-detail-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 12px);
+  flex-wrap: wrap;
+}
+
+.eval-rate {
+  font-weight: 600;
+}
+
+.eval-rate.is-pass { color: #3fb950; }
+.eval-rate.is-fail { color: #f85149; }
+
+.eval-fixtures-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eval-fixture-row {
+  display: grid;
+  grid-template-columns: 24px 1fr auto;
+  align-items: center;
+  gap: var(--space-3, 12px);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.eval-fixture-row:last-child {
+  border-bottom: none;
+}
+
+.eval-fixture-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-weight: 700;
+  font-size: 12px;
+}
+
+.eval-fixture-pill.is-pass {
+  background: rgba(63, 185, 80, 0.15);
+  color: #3fb950;
+}
+
+.eval-fixture-pill.is-fail {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f85149;
+}
+
+.eval-fixture-id {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eval-fixture-fails {
+  font-size: 12px;
+  grid-column: 2 / 3;
+}
+
+.eval-fixture-latency {
+  font-size: 11px;
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  white-space: nowrap;
+}
+
+.eval-diff {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 12px);
+}
+
+.eval-diff-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.eval-diff-subtitle {
+  font-size: 12px;
+}
+
+.eval-diff-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 16px);
+  flex-wrap: wrap;
+  margin: 4px 0 8px;
+}
+
+.eval-diff-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.eval-diff-stat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.eval-diff-stat.improved { color: #3fb950; }
+.eval-diff-stat.improved .eval-diff-stat-icon { background: rgba(63, 185, 80, 0.15); }
+.eval-diff-stat.regressed { color: #f85149; }
+.eval-diff-stat.regressed .eval-diff-stat-icon { background: rgba(239, 68, 68, 0.15); }
+.eval-diff-stat.unchanged { color: var(--text-dim); }
+
+.eval-diff-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.eval-diff-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-3, 12px);
+  padding: 4px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.eval-diff-row:last-child {
+  border-bottom: none;
+}
+
+.eval-diff-row.is-improved { color: var(--text); }
+.eval-diff-row.is-improved .eval-diff-fixture { color: #3fb950; }
+.eval-diff-row.is-regressed { color: var(--text); }
+.eval-diff-row.is-regressed .eval-diff-fixture { color: #f85149; }
+
+.eval-diff-fixture {
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eval-diff-arrow {
+  color: var(--text-dim);
+}
+
+.eval-diff-arrow-small {
+  color: var(--text-dim);
+  margin: 0 4px;
+}
+
+.eval-diff-states {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.eval-diff-state {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.eval-diff-state.is-pass {
+  background: rgba(63, 185, 80, 0.15);
+  color: #3fb950;
+}
+
+.eval-diff-state.is-fail {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f85149;
+}
+
+.eval-diff-empty {
+  margin: 0;
+  font-size: 13px;
+}
+
+.eval-diff-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 12px);
+}
+
+.eval-diff-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 12px);
+}
+
+.eval-diff-card-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.eval-diff-missing {
+  font-size: 13px;
+  padding: var(--space-3, 12px);
+}
+
+.eval-baseline-hint {
+  background: rgba(139, 92, 246, 0.05);
+  border-color: rgba(139, 92, 246, 0.25);
+}
+
+/* ─── Eval overview (Eval.tsx) ──────────────────────────────────────────── */
+
+.eval-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-4, 16px);
+  margin-bottom: var(--space-6, 24px);
+}
+
+.eval-summary-card {
+  min-height: 120px;
+}
+
+.eval-summary-value {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text-strong);
+  line-height: 1;
+  margin: 4px 0;
+}
+
+.eval-summary-cta {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.04));
+  border-color: rgba(139, 92, 246, 0.25);
+  justify-content: space-between;
+}
+
+.eval-summary-cta-btn {
+  align-self: flex-start;
+  margin-top: auto;
+}
+
+.eval-section-title {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+  margin: 0 0 var(--space-3, 12px);
+}
+
+.eval-recent-section {
+  display: flex;
+  flex-direction: column;
+}

package/bizar-dash/src/web/views/Eval.tsx

@@ -0,0 +1,172 @@
+// src/views/Eval.tsx — v5.2.0
+//
+// Main "Eval" tab view. Acts as the entry point to the eval framework
+// UI: shows the recent runs summary at the top and links the user
+// into EvalReport for the full per-fixture breakdown and regression
+// diffing.
+//
+// The detailed comparison/diff lives in EvalReport.tsx; this view is
+// a lighter landing page that mirrors the existing Doctor-style
+// overview pattern (counts at top, recent history, call to action).
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ClipboardCheck, ArrowRight, RefreshCw, ExternalLink } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { Button } from '../components/Button';
+import { EmptyState } from '../components/EmptyState';
+import { Spinner } from '../components/Spinner';
+import { useToast } from '../components/Toast';
+import { EvalRunCard, type EvalRunSummary } from '../components/EvalRunCard';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+import type { Settings, Snapshot } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+const RECENT_RUNS_LIMIT = 8;
+
+function EvalInner({ setActiveTab }: Props) {
+  const toast = useToast();
+  const [runs, setRuns] = useState<EvalRunSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const cancelledRef = useRef(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await api.get<{ runs: EvalRunSummary[] }>(`/eval/runs?limit=${RECENT_RUNS_LIMIT}`);
+      if (!cancelledRef.current) setRuns(r.runs || []);
+    } catch (err) {
+      if (!cancelledRef.current) {
+        toast.error(`Failed to load eval runs: ${(err as Error).message}`);
+      }
+    } finally {
+      if (!cancelledRef.current) setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    load();
+    return () => { cancelledRef.current = true; };
+  }, [load]);
+
+  const recent = runs.slice(0, RECENT_RUNS_LIMIT);
+  const totals = runs.reduce(
+    (acc, r) => {
+      acc.total += r.total;
+      acc.passed += r.passed;
+      acc.failed += r.failed;
+      if (r.failed === 0) acc.fullPass += 1;
+      return acc;
+    },
+    { total: 0, passed: 0, failed: 0, fullPass: 0 },
+  );
+  const overallRate = totals.total > 0 ? ((totals.passed / totals.total) * 100).toFixed(1) : '—';
+
+  return (
+    <div className="view view-eval" data-testid="eval-overview">
+      <div className="view-header">
+        <div className="view-header-text">
+          <h1 className="view-title">
+            <ClipboardCheck size={20} aria-hidden /> Eval
+          </h1>
+          <p className="view-subtitle muted">
+            Track golden-fixture runs, catch regressions, and compare run history.
+          </p>
+        </div>
+        <div className="view-actions">
+          <Button variant="secondary" size="sm" onClick={load} disabled={loading}>
+            {loading ? <Spinner size="sm" /> : <RefreshCw size={12} />}
+            {loading ? 'Refreshing…' : 'Refresh'}
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => setActiveTab('evalReport')}
+            title="Open the full eval report"
+          >
+            <ExternalLink size={12} /> Open Eval Report
+          </Button>
+        </div>
+      </div>
+
+      <div className="eval-summary-grid">
+        <Card className="eval-summary-card">
+          <CardTitle>Recent runs</CardTitle>
+          <div className="eval-summary-value">{runs.length}</div>
+          <CardMeta className="muted">
+            Latest {RECENT_RUNS_LIMIT} runs across all suites.
+          </CardMeta>
+        </Card>
+        <Card className="eval-summary-card">
+          <CardTitle>Fixtures run</CardTitle>
+          <div className="eval-summary-value">{totals.total}</div>
+          <CardMeta className="muted">
+            <span className={cn('eval-rate', totals.failed === 0 ? 'is-pass' : 'is-fail')}>
+              {overallRate}% pass rate
+            </span>
+          </CardMeta>
+        </Card>
+        <Card className="eval-summary-card">
+          <CardTitle>Clean runs</CardTitle>
+          <div className="eval-summary-value">{totals.fullPass}</div>
+          <CardMeta className="muted">
+            Runs where every fixture passed.
+          </CardMeta>
+        </Card>
+        <Card className="eval-summary-card eval-summary-cta">
+          <CardTitle>Compare runs</CardTitle>
+          <CardMeta>
+            Open the detailed report to diff two runs side-by-side and
+            spot regressions fixture by fixture.
+          </CardMeta>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => setActiveTab('evalReport')}
+            className="eval-summary-cta-btn"
+          >
+            Open report <ArrowRight size={12} />
+          </Button>
+        </Card>
+      </div>
+
+      <div className="eval-recent-section">
+        <h2 className="eval-section-title">Recent runs</h2>
+        {loading && recent.length === 0 ? (
+          <div className="eval-runs-loading">
+            <Spinner size="sm" />
+            <span className="muted">Loading runs…</span>
+          </div>
+        ) : recent.length === 0 ? (
+          <EmptyState
+            icon={<ClipboardCheck size={28} />}
+            title="No eval runs yet"
+            message={
+              <>
+                Run a suite via the CLI:{' '}
+                <code className="mono">bizar eval run ./path/to/fixtures</code>.
+                Results will appear here.
+              </>
+            }
+          />
+        ) : (
+          <div className="eval-runs-list">
+            {recent.map((r) => (
+              <EvalRunCard key={r.id} run={r} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const Eval = React.memo(EvalInner);