@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/components/EnvVarManager.tsx

@@ -1,430 +0,0 @@
-// src/web/components/EnvVarManager.tsx — manage BIZAR_* env vars from ~/.config/bizar/env.json
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Plus, Pencil, Trash2, Eye, EyeOff, RefreshCw, KeyRound, CheckCircle, X, Search, Download, Upload, ChevronDown, ChevronRight, AlertCircle } from 'lucide-react';
-import { Button } from './Button';
-import { useToast } from './Toast';
-import { api } from '../lib/api';
-import { cn } from '../lib/utils';
-
-export type EnvVarEntry = {
-  name: string;
-  value: string; // masked on GET, full on edit
-  createdAt: string;
-  source: string;
-};
-
-export type EnvVarGrouped = Record<string, EnvVarEntry[]>;
-
-type Props = {
-  onError?: (msg: string) => void;
-};
-
-export function EnvVarManager({ onError }: Props) {
-  const toast = useToast();
-  const [vars, setVars] = useState<EnvVarEntry[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
-  // Which rows have the value revealed (edit mode shows real value)
-  const [revealed, setRevealed] = useState<Set<string>>(new Set());
-  // Currently editing name (null = none)
-  const [editing, setEditing] = useState<string | null>(null);
-  const [editValue, setEditValue] = useState('');
-  // New var form
-  const [showAdd, setShowAdd] = useState(false);
-  const [newName, setNewName] = useState('');
-  const [newValue, setNewValue] = useState('');
-  // Bulk operations
-  const [showBulk, setShowBulk] = useState(false);
-  const [bulkText, setBulkText] = useState('');
-  const [bulkImporting, setBulkImporting] = useState(false);
-  // Search / filter
-  const [searchQ, setSearchQ] = useState('');
-  // Group by prefix (collapsed state)
-  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    try {
-      const r = await api.get<EnvVarEntry[]>('/env-vars');
-      setVars(r);
-    } catch (err) {
-      toast.error(`Load failed: ${(err as Error).message}`);
-      onError?.((err as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, [toast, onError]);
-
-  useEffect(() => { load(); }, [load]);
-
-  const toggleReveal = (name: string) => {
-    setRevealed((prev) => {
-      const next = new Set(prev);
-      if (next.has(name)) next.delete(name);
-      else next.add(name);
-      return next;
-    });
-  };
-
-  const handleAdd = async () => {
-    const name = newName.trim().toUpperCase();
-    const value = newValue.trim();
-    if (!name || !/^BIZAR_[A-Z0-9_]+$/.test(name)) {
-      toast.warning('Name must match BIZAR_<NAME> (e.g. BIZAR_MINIMAX_KEY)');
-      return;
-    }
-    if (!value) {
-      toast.warning('Value is required.');
-      return;
-    }
-    if (vars.some((v) => v.name === name)) {
-      toast.warning(`${name} already exists.`);
-      return;
-    }
-    setSaving(true);
-    try {
-      await api.post('/env-vars', { name, value });
-      toast.success(`${name} created.`);
-      setShowAdd(false);
-      setNewName('');
-      setNewValue('');
-      await load();
-    } catch (err) {
-      toast.error(`Create failed: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const startEdit = (v: EnvVarEntry) => {
-    setEditing(v.name);
-    setEditValue(v.value === v.value.replace(/\*/g, '') ? v.value : '');
-    setRevealed((prev) => { const next = new Set(prev); next.add(v.name); return next; });
-  };
-
-  const handleUpdate = async (name: string) => {
-    if (!editValue.trim()) {
-      toast.warning('Value cannot be empty.');
-      return;
-    }
-    setSaving(true);
-    try {
-      await api.put(`/env-vars/${encodeURIComponent(name)}`, { value: editValue.trim() });
-      toast.success(`${name} updated.`);
-      setEditing(null);
-      await load();
-    } catch (err) {
-      toast.error(`Update failed: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async (name: string) => {
-    if (!confirm(`Delete ${name}? This cannot be undone.`)) return;
-    try {
-      await api.del(`/env-vars/${encodeURIComponent(name)}`);
-      toast.success(`${name} deleted.`);
-      await load();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  // ─── Bulk import ───────────────────────────────────────────────────────────
-  const handleBulkImport = async () => {
-    if (!bulkText.trim()) { toast.warning('Nothing to import.'); return; }
-    setBulkImporting(true);
-    try {
-      const r = await api.post<{ ok: boolean; imported: number; skipped: number; errors: string[] }>('/env-vars/bulk-import', { envContent: bulkText });
-      toast.success(`Imported ${r.imported}, skipped ${r.skipped}.`);
-      if (r.errors.length > 0) {
-        toast.warning(`${r.errors.length} lines had errors: ${r.errors.slice(0, 3).join('; ')}${r.errors.length > 3 ? '…' : ''}`);
-      }
-      setBulkText('');
-      setShowBulk(false);
-      await load();
-    } catch (err) {
-      toast.error(`Bulk import failed: ${(err as Error).message}`);
-    } finally {
-      setBulkImporting(false);
-    }
-  };
-
-  // ─── Bulk export ───────────────────────────────────────────────────────────
-  const handleExport = async () => {
-    try {
-      const r = await api.get<string>('/env-vars/export');
-      // r is the raw text content
-      const blob = new Blob([r as unknown as string], { type: 'text/plain' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = '.env';
-      a.click();
-      URL.revokeObjectURL(url);
-      toast.success('Exported .env file.');
-    } catch (err) {
-      toast.error(`Export failed: ${(err as Error).message}`);
-    }
-  };
-
-  // ─── Group by prefix ───────────────────────────────────────────────────────
-  const filtered = useMemo(() => {
-    if (!searchQ.trim()) return vars;
-    const q = searchQ.toLowerCase();
-    return vars.filter((v) => v.name.toLowerCase().includes(q));
-  }, [vars, searchQ]);
-
-  const grouped = useMemo(() => {
-    const groups: Record<string, EnvVarEntry[]> = {};
-    for (const v of filtered) {
-      const prefix = v.name.split('_')[0] + '_';
-      (groups[prefix] ??= []).push(v);
-    }
-    return groups;
-  }, [filtered]);
-
-  const toggleGroup = (prefix: string) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(prefix)) next.delete(prefix);
-      else next.add(prefix);
-      return next;
-    });
-  };
-
-  const sortedGroupKeys = useMemo(() => {
-    const known = ['BIZAR_', 'PROVIDER_', 'MODEL_', 'API_'];
-    const keys = Object.keys(grouped).sort((a, b) => {
-      const ai = known.indexOf(a); const bi = known.indexOf(b);
-      if (ai === -1 && bi === -1) return a.localeCompare(b);
-      if (ai === -1) return 1;
-      if (bi === -1) return -1;
-      return ai - bi;
-    });
-    return keys;
-  }, [grouped]);
-
-  if (loading) {
-    return <div className="muted" style={{ padding: '16px 0', fontSize: 13 }}>Loading env vars…</div>;
-  }
-
-  const hasGroups = sortedGroupKeys.length > 1;
-  const groupMode = hasGroups;
-
-  return (
-    <div className="env-var-manager">
-      <div className="env-var-toolbar">
-        <Button variant="primary" size="sm" onClick={() => setShowAdd(true)}>
-          <Plus size={12} /> New variable
-        </Button>
-        <Button variant="secondary" size="sm" onClick={() => setShowBulk((v) => !v)} className={showBulk ? 'active' : ''}>
-          <Upload size={12} /> Bulk import
-        </Button>
-        <Button variant="ghost" size="sm" onClick={handleExport} title="Export as .env">
-          <Download size={12} /> Export
-        </Button>
-        <div className="env-var-search-wrap">
-          <Search size={12} className="env-var-search-icon" />
-          <input
-            className="env-var-search input"
-            placeholder="Filter…"
-            value={searchQ}
-            onChange={(e) => setSearchQ(e.target.value)}
-          />
-        </div>
-        <Button variant="ghost" size="sm" onClick={load} title="Reload">
-          <RefreshCw size={12} />
-        </Button>
-      </div>
-
-      {/* Bulk import panel */}
-      {showBulk && (
-        <div className="env-var-bulk-panel">
-          <div className="env-var-bulk-header">
-            <span>Paste <code>KEY=value</code> lines (one per line):</span>
-            <Button variant="ghost" size="sm" onClick={() => setShowBulk(false)}><X size={12} /></Button>
-          </div>
-          <textarea
-            className="input mono env-var-bulk-textarea"
-            placeholder={"BIZAR_API_KEY=your-key-here\nPROVIDER_OPENAI_KEY=sk-...\nMODEL_KEY=gem-..."}
-            value={bulkText}
-            onChange={(e) => setBulkText(e.target.value)}
-            rows={6}
-          />
-          <div className="env-var-bulk-footer">
-            <Button variant="primary" size="sm" onClick={handleBulkImport} disabled={bulkImporting || !bulkText.trim()}>
-              {bulkImporting ? 'Importing…' : 'Import'}
-            </Button>
-            <span className="muted" style={{ fontSize: 11 }}>
-              Existing keys are skipped unless re-created individually. Invalid lines are reported.
-            </span>
-          </div>
-        </div>
-      )}
-
-      {vars.length === 0 && !showAdd && (
-        <div className="env-var-empty">
-          <KeyRound size={20} />
-          <span>No BIZAR_* env vars yet.</span>
-          <span style={{ fontSize: 11 }}>Create one to store API keys securely.</span>
-        </div>
-      )}
-
-      {/* New var form */}
-      {showAdd && (
-        <div className="env-var-add-form">
-          <div className="env-var-add-row">
-            <input
-              className="input mono"
-              style={{ width: 240 }}
-              placeholder="BIZAR_NAME"
-              value={newName}
-              onChange={(e) => setNewName(e.target.value.toUpperCase())}
-              onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setShowAdd(false); }}
-              autoFocus
-            />
-            <input
-              className="input mono"
-              type="password"
-              placeholder="value (API key, token, etc.)"
-              value={newValue}
-              onChange={(e) => setNewValue(e.target.value)}
-              onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setShowAdd(false); }}
-            />
-            <Button variant="primary" size="sm" onClick={handleAdd} disabled={saving}>
-              <CheckCircle size={12} /> Create
-            </Button>
-            <Button variant="ghost" size="sm" onClick={() => { setShowAdd(false); setNewName(''); setNewValue(''); }}>
-              <X size={12} />
-            </Button>
-          </div>
-          <p style={{ fontSize: 11, color: 'var(--text-dim)', margin: 0 }}>
-            Names must match <code>BIZAR_<var>NAME</var></code> (uppercase letters, digits, underscores).
-          </p>
-        </div>
-      )}
-
-      {/* Var list — grouped by prefix */}
-      {filtered.length > 0 && (
-        groupMode ? (
-          <div className="env-var-groups">
-            {sortedGroupKeys.map((prefix) => {
-              const items = grouped[prefix];
-              const isCollapsed = collapsed.has(prefix);
-              return (
-                <div key={prefix} className="env-var-group">
-                  <button
-                    type="button"
-                    className="env-var-group-header"
-                    onClick={() => toggleGroup(prefix)}
-                  >
-                    {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
-                    <span className="env-var-group-prefix mono">{prefix}</span>
-                    <span className="env-var-group-count muted">({items.length})</span>
-                  </button>
-                  {!isCollapsed && (
-                    <div className="env-var-list">
-                      {items.map((v) => (
-                        <VarRow key={v.name} v={v} editing={editing} editValue={editValue}
-                          isRevealed={revealed.has(v.name)}
-                          onToggleReveal={toggleReveal} onStartEdit={startEdit}
-                          onEditValueChange={setEditValue} onHandleUpdate={handleUpdate}
-                          onCancelEdit={() => setEditing(null)} onDelete={handleDelete}
-                          saving={saving} />
-                      ))}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="env-var-list">
-            {filtered.map((v) => (
-              <VarRow key={v.name} v={v} editing={editing} editValue={editValue}
-                isRevealed={revealed.has(v.name)}
-                onToggleReveal={toggleReveal} onStartEdit={startEdit}
-                onEditValueChange={setEditValue} onHandleUpdate={handleUpdate}
-                onCancelEdit={() => setEditing(null)} onDelete={handleDelete}
-                saving={saving} />
-            ))}
-          </div>
-        )
-      )}
-
-      {filtered.length === 0 && vars.length > 0 && (
-        <div className="env-var-empty">
-          <Search size={16} />
-          <span>No env vars match "{searchQ}"</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Individual var row (extracted for reuse in group mode) ───────────────────
-type VarRowProps = {
-  v: EnvVarEntry;
-  editing: string | null;
-  editValue: string;
-  isRevealed: boolean;
-  onToggleReveal: (name: string) => void;
-  onStartEdit: (v: EnvVarEntry) => void;
-  onEditValueChange: (v: string) => void;
-  onHandleUpdate: (name: string) => void;
-  onCancelEdit: () => void;
-  onDelete: (name: string) => void;
-  saving: boolean;
-};
-
-function VarRow({ v, editing, editValue, isRevealed, onToggleReveal, onStartEdit, onEditValueChange, onHandleUpdate, onCancelEdit, onDelete, saving }: VarRowProps) {
-  const isEditing = editing === v.name;
-  return (
-    <div className={cn('env-var-row', isEditing && 'env-var-row-editing')}>
-      <span className="env-var-name mono">{v.name}</span>
-      {isEditing ? (
-        <input
-          className="input mono"
-          type="password"
-          style={{ flex: 1, minWidth: 200 }}
-          value={editValue}
-          onChange={(e) => onEditValueChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') onHandleUpdate(v.name);
-            if (e.key === 'Escape') onCancelEdit();
-          }}
-          autoFocus
-        />
-      ) : (
-        <span className={cn('env-var-value mono', !isRevealed && 'env-var-value-masked')}>
-          {v.value}
-        </span>
-      )}
-      <span className="env-var-source muted">{v.source}</span>
-      <div className="env-var-actions">
-        {!isEditing && (
-          <button type="button" className="icon-btn" title={isRevealed ? 'Hide' : 'Reveal'} onClick={() => onToggleReveal(v.name)}>
-            {isRevealed ? <EyeOff size={12} /> : <Eye size={12} />}
-          </button>
-        )}
-        {isEditing ? (
-          <>
-            <Button variant="primary" size="sm" onClick={() => onHandleUpdate(v.name)} disabled={saving}>Save</Button>
-            <Button variant="ghost" size="sm" onClick={onCancelEdit}>Cancel</Button>
-          </>
-        ) : (
-          <>
-            <button type="button" className="icon-btn" title="Edit" onClick={() => onStartEdit(v)}>
-              <Pencil size={12} />
-            </button>
-            <button type="button" className="icon-btn icon-btn-danger" title="Delete" onClick={() => onDelete(v.name)}>
-              <Trash2 size={12} />
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/components/EvalDiff.tsx

@@ -1,157 +0,0 @@
-// src/components/EvalDiff.tsx — v5.2.0
-//
-// Side-by-side comparison of two eval runs. Categorizes each fixture
-// as improved / regressed / unchanged and renders a summary block plus
-// a list of changed fixtures.
-//
-// `runA` is the "before" run (typically an older baseline); `runB` is
-// the "after" run (typically the newer run under review).
-
-import type { ReactNode } from 'react';
-import { cn } from '../lib/utils';
-
-/** Per-fixture result row embedded in a run record. */
-export type EvalFixtureResult = {
-  fixtureId: string;
-  ok: boolean;
-  checks?: { kind: string; ok: boolean; message?: string }[];
-  latencyMs?: number;
-};
-
-export type EvalRunWithResults = {
-  id: string;
-  startedAt: string;
-  finishedAt?: string;
-  suitePath?: string;
-  total: number;
-  passed: number;
-  failed: number;
-  results: EvalFixtureResult[];
-};
-
-export type EvalDiffEntry = {
-  fixtureId: string;
-  /** The fixture's pass/fail status in the "before" run, or null if absent. */
-  before: boolean | null;
-  /** The fixture's pass/fail status in the "after" run, or null if absent. */
-  after: boolean | null;
-  /** Bucket label derived from before/after. */
-  change: 'same' | 'improved' | 'regressed' | 'added' | 'removed';
-};
-
-export type EvalDiffProps = {
-  runA: EvalRunWithResults;
-  runB: EvalRunWithResults;
-  /**
-   * Optional override for the section heading. Defaults to
-   * "Regression Analysis".
-   */
-  title?: string;
-};
-
-/**
- * Pure helper: compute the diff entries from two runs. Exported so
- * tests can exercise the categorization logic without rendering.
- */
-export function computeEvalDiff(
-  runA: EvalRunWithResults,
-  runB: EvalRunWithResults,
-): EvalDiffEntry[] {
-  const mapA = new Map(runA.results.map((r) => [r.fixtureId, r]));
-  const mapB = new Map(runB.results.map((r) => [r.fixtureId, r]));
-  const ids = new Set<string>([...mapA.keys(), ...mapB.keys()]);
-
-  const out: EvalDiffEntry[] = [];
-  for (const id of ids) {
-    const a = mapA.get(id);
-    const b = mapB.get(id);
-    const before = a ? a.ok : null;
-    const after = b ? b.ok : null;
-
-    let change: EvalDiffEntry['change'];
-    if (a && b) {
-      if (before === after) change = 'same';
-      else if (before === false && after === true) change = 'improved';
-      else change = 'regressed';
-    } else if (b && !a) {
-      change = 'added';
-    } else {
-      change = 'removed';
-    }
-
-    out.push({ fixtureId: id, before, after, change });
-  }
-  // Stable sort: regressions first, then improvements, then others.
-  const order: Record<EvalDiffEntry['change'], number> = {
-    regressed: 0,
-    improved: 1,
-    added: 2,
-    removed: 3,
-    same: 4,
-  };
-  out.sort((x, y) => {
-    const d = order[x.change] - order[y.change];
-    if (d !== 0) return d;
-    return x.fixtureId.localeCompare(y.fixtureId);
-  });
-  return out;
-}
-
-export function EvalDiff({ runA, runB, title = 'Regression Analysis' }: EvalDiffProps): ReactNode {
-  const diff = computeEvalDiff(runA, runB);
-
-  const improved = diff.filter((d) => d.change === 'improved').length;
-  const regressed = diff.filter((d) => d.change === 'regressed').length;
-  const unchanged = diff.filter((d) => d.change === 'same').length;
-  const changed = diff.filter((d) => d.change !== 'same');
-
-  return (
-    <div className="eval-diff" data-testid="eval-diff">
-      <h3 className="eval-diff-title">{title}</h3>
-      <div className="eval-diff-subtitle muted">
-        Comparing <code className="mono">{runA.id}</code> →{' '}
-        <code className="mono">{runB.id}</code>
-      </div>
-
-      <div className="eval-diff-stats" aria-label="Diff summary">
-        <span className="eval-diff-stat improved">
-          <span className="eval-diff-stat-icon" aria-hidden>+</span>
-          {improved} improved
-        </span>
-        <span className="eval-diff-stat regressed">
-          <span className="eval-diff-stat-icon" aria-hidden>−</span>
-          {regressed} regressed
-        </span>
-        <span className="eval-diff-stat unchanged muted">
-          {unchanged} unchanged
-        </span>
-      </div>
-
-      {changed.length === 0 ? (
-        <p className="eval-diff-empty muted">No fixture-level changes between these runs.</p>
-      ) : (
-        <ul className="eval-diff-list" role="list">
-          {changed.map((d) => (
-            <li
-              key={d.fixtureId}
-              data-fixture-id={d.fixtureId}
-              className={cn('eval-diff-row', `is-${d.change}`)}
-            >
-              <span className="eval-diff-fixture mono">{d.fixtureId}</span>
-              <span className="eval-diff-arrow" aria-hidden>→</span>
-              <span className="eval-diff-states">
-                <span className={cn('eval-diff-state', d.before ? 'is-pass' : 'is-fail')}>
-                  {d.before === null ? '—' : d.before ? 'pass' : 'fail'}
-                </span>
-                <span className="eval-diff-arrow-small" aria-hidden>→</span>
-                <span className={cn('eval-diff-state', d.after ? 'is-pass' : 'is-fail')}>
-                  {d.after === null ? '—' : d.after ? 'pass' : 'fail'}
-                </span>
-              </span>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/components/EvalExportButton.tsx

@@ -1,27 +0,0 @@
-// src/components/EvalExportButton.tsx — v5.3.0
-// Export button for downloading eval run results as CSV.
-
-import React from 'react';
-import { Download } from 'lucide-react';
-import { Button } from './Button';
-import { api } from '../lib/api';
-
-type Props = {
-  runId: string;
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-};
-
-export function EvalExportButton({ runId, variant = 'secondary', size = 'sm' }: Props) {
-  const onExport = () => {
-    const token = api.getToken();
-    window.open(`/api/eval/runs/${encodeURIComponent(runId)}/export.csv?_t=${encodeURIComponent(token)}`, '_blank');
-  };
-
-  return (
-    <Button variant={variant} size={size} onClick={onExport} title="Export results as CSV">
-      <Download size={14} aria-hidden />
-      Export CSV
-    </Button>
-  );
-}

package/bizar-dash/src/web/components/EvalRunCard.tsx

@@ -1,78 +0,0 @@
-// src/components/EvalRunCard.tsx — v5.2.0
-//
-// Compact card summarizing a single eval run. Used in the EvalReport's
-// left rail to show the recent run history. Click selects the run.
-//
-// Status rules (per brief):
-//   failed === 0            → pass
-//   passed/total > 0.8      → warn
-//   otherwise               → fail
-
-import type { ReactNode } from 'react';
-import { Card, CardTitle, CardMeta } from './Card';
-import { cn, formatTime } from '../lib/utils';
-
-/**
- * Summary of an eval run. The fields here are the subset returned by
- * GET /api/eval/runs (the list endpoint) — `results` lives on the full
- * run record returned by GET /api/eval/runs/:id and is not present here.
- */
-export type EvalRunSummary = {
-  id: string;
-  startedAt: string;
-  finishedAt?: string;
-  suitePath: string;
-  total: number;
-  passed: number;
-  failed: number;
-};
-
-export type EvalRunCardProps = {
-  run: EvalRunSummary;
-  onClick?: () => void;
-  /** v5.2.0 — Marks the card as the currently selected run. */
-  selected?: boolean;
-  /** Optional aria-label override; falls back to the run id. */
-  ariaLabel?: string;
-};
-
-function pickStatus(run: EvalRunSummary): 'pass' | 'warn' | 'fail' {
-  if (run.total <= 0) return 'fail';
-  if (run.failed === 0) return 'pass';
-  if (run.passed / run.total > 0.8) return 'warn';
-  return 'fail';
-}
-
-export function EvalRunCard({ run, onClick, selected, ariaLabel }: EvalRunCardProps): ReactNode {
-  const status = pickStatus(run);
-  // Pass-rate as a fixed-percent string. toFixed guards against locale
-  // issues (e.g. some locales use "," as the decimal separator).
-  const passRate = run.total > 0
-    ? ((run.passed / run.total) * 100).toFixed(1)
-    : '0.0';
-  const interactive = Boolean(onClick);
-
-  return (
-    <Card
-      onClick={onClick}
-      interactive={interactive}
-      aria-label={ariaLabel ?? `Eval run ${run.id}`}
-      aria-pressed={interactive ? selected : undefined}
-      className={cn(
-        'eval-run-card',
-        selected && 'eval-run-card-selected',
-        `eval-run-${status}`,
-      )}
-    >
-      <div className="eval-run-head">
-        <CardTitle className="eval-run-title">{run.id}</CardTitle>
-        <span className={cn('eval-status', `is-${status}`)}>
-          {run.passed}/{run.total} ({passRate}%)
-        </span>
-      </div>
-      <CardMeta className="eval-run-meta">
-        {formatTime(run.startedAt)} · {run.suitePath}
-      </CardMeta>
-    </Card>
-  );
-}