@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,353 +0,0 @@
-// src/views/EvalReport.tsx — v5.2.0
-//
-// Eval report dashboard view. Two columns:
-//
-//   ┌────────────────┬───────────────────────────────────┐
-//   │ Runs list      │ Detail panel                       │
-//   │ (EvalRunCard)  │   - Run metadata + summary         │
-//   │                │   - Per-fixture pass/fail table    │
-//   │                │   - Optional EvalDiff (when a      │
-//   │                │     baseline run is selected)      │
-//   └────────────────┴───────────────────────────────────┘
-//
-// Data sources:
-//   GET /api/eval/runs                       — list of recent runs
-//   GET /api/eval/runs/:id                   — full run record
-//   GET /api/eval/runs/:id/compare/:otherId  — diff between two runs
-
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ClipboardCheck, RefreshCw, ArrowLeftRight, X } 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 {
-  EvalDiff,
-  computeEvalDiff,
-  type EvalRunWithResults,
-  type EvalFixtureResult,
-} from '../components/EvalDiff';
-import { EvalExportButton } from '../components/EvalExportButton';
-import { api } from '../lib/api';
-import { cn, formatTime } 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>;
-};
-
-function RunDetail({
-  run,
-  onClearCompare,
-  compareRun,
-  onClearSelection,
-  runsForDiff,
-}: {
-  run: EvalRunWithResults;
-  onClearCompare: () => void;
-  compareRun: string | null;
-  onClearSelection: () => void;
-  runsForDiff: EvalRunWithResults[];
-}) {
-  const passRate = run.total > 0 ? ((run.passed / run.total) * 100).toFixed(1) : '0.0';
-  const sortedResults = [...run.results].sort((a, b) => {
-    // Failures first, then by fixture id
-    if (a.ok !== b.ok) return a.ok ? 1 : -1;
-    return a.fixtureId.localeCompare(b.fixtureId);
-  });
-
-  return (
-    <div className="eval-run-detail" data-testid="eval-run-detail">
-      <Card className="eval-run-detail-header">
-        <div className="eval-run-detail-header-row">
-          <CardTitle>
-            <ClipboardCheck size={14} aria-hidden /> {run.id}
-          </CardTitle>
-          <div className="eval-run-detail-actions">
-            <EvalExportButton runId={run.id} />
-            <Button variant="ghost" size="sm" onClick={onClearSelection} title="Close detail">
-              <X size={12} /> Close
-            </Button>
-          </div>
-        </div>
-        <CardMeta>
-          {formatTime(run.startedAt)}
-          {run.finishedAt ? ` → ${formatTime(run.finishedAt)}` : ''} · {run.suitePath}
-        </CardMeta>
-        <div className="eval-run-detail-summary">
-          <span className={cn('eval-status', run.failed === 0 ? 'is-pass' : 'is-fail')}>
-            {run.passed}/{run.total} ({passRate}%)
-          </span>
-          <span className="muted">
-            {run.failed} failed · {run.passed} passed
-          </span>
-        </div>
-      </Card>
-
-      {compareRun ? (
-        <Card className="eval-diff-card">
-          {(() => {
-            const baseRun = runsForDiff.find((r) => r.id === compareRun);
-            if (!baseRun) {
-              return (
-                <div className="eval-diff-missing muted">
-                  Baseline run <code>{compareRun}</code> not loaded. Pick another from the list.
-                </div>
-              );
-            }
-            // Show "before" as the baseline (older) and "after" as the
-            // currently-selected run (newer). Re-derive before/after
-            // from the diff helper to drive the heading.
-            const diff = computeEvalDiff(baseRun, run);
-            const improved = diff.filter((d) => d.change === 'improved').length;
-            const regressed = diff.filter((d) => d.change === 'regressed').length;
-            return (
-              <>
-                <div className="eval-diff-card-head">
-                  <span className="eval-diff-card-title">
-                    <ArrowLeftRight size={14} aria-hidden /> Comparing {baseRun.id} → {run.id}
-                  </span>
-                  <Button variant="ghost" size="sm" onClick={onClearCompare}>
-                    <X size={12} /> Clear baseline
-                  </Button>
-                </div>
-                <div className="eval-diff-stats" aria-label="Diff summary">
-                  <span className="eval-diff-stat improved">+{improved} improved</span>
-                  <span className="eval-diff-stat regressed">−{regressed} regressed</span>
-                </div>
-                <EvalDiff runA={baseRun} runB={run} />
-              </>
-            );
-          })()}
-        </Card>
-      ) : (
-        <Card className="eval-baseline-hint">
-          <CardMeta>
-            Tip: click another run in the list to use it as a baseline for diffing.
-          </CardMeta>
-        </Card>
-      )}
-
-      <Card className="eval-fixtures-card">
-        <CardTitle>Fixtures ({run.results.length})</CardTitle>
-        {sortedResults.length === 0 ? (
-          <CardMeta className="muted">No fixture results in this run.</CardMeta>
-        ) : (
-          <ul className="eval-fixtures-list" role="list">
-            {sortedResults.map((r) => (
-              <li
-                key={r.fixtureId}
-                className={cn('eval-fixture-row', r.ok ? 'is-pass' : 'is-fail')}
-              >
-                <span
-                  className={cn('eval-fixture-pill', r.ok ? 'is-pass' : 'is-fail')}
-                  aria-label={r.ok ? 'pass' : 'fail'}
-                >
-                  {r.ok ? '✓' : '✗'}
-                </span>
-                <span className="eval-fixture-id mono">{r.fixtureId}</span>
-                {!r.ok && r.checks ? (
-                  <span className="eval-fixture-fails muted">
-                    {r.checks
-                      .filter((c) => !c.ok)
-                      .map((c) => c.message)
-                      .filter(Boolean)
-                      .join(' · ')}
-                  </span>
-                ) : null}
-                {r.latencyMs != null ? (
-                  <span className="eval-fixture-latency muted">{Math.round(r.latencyMs)}ms</span>
-                ) : null}
-              </li>
-            ))}
-          </ul>
-        )}
-      </Card>
-    </div>
-  );
-}
-
-function EvalReportInner({ setActiveTab }: Props) {
-  const toast = useToast();
-  const [runs, setRuns] = useState<EvalRunSummary[]>([]);
-  const [loadingRuns, setLoadingRuns] = useState(true);
-  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
-  const [compareRunId, setCompareRunId] = useState<string | null>(null);
-  const [detail, setDetail] = useState<EvalRunWithResults | null>(null);
-  const [detailLoading, setDetailLoading] = useState(false);
-  const [compareDetail, setCompareDetail] = useState<EvalRunWithResults | null>(null);
-  const cancelledRef = useRef(false);
-
-  const loadRuns = useCallback(async () => {
-    setLoadingRuns(true);
-    try {
-      const r = await api.get<{ runs: EvalRunSummary[] }>('/eval/runs');
-      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) setLoadingRuns(false);
-    }
-  }, [toast]);
-
-  const loadDetail = useCallback(
-    async (id: string) => {
-      setDetailLoading(true);
-      try {
-        const r = await api.get<EvalRunWithResults>(`/eval/runs/${encodeURIComponent(id)}`);
-        if (!cancelledRef.current) setDetail(r);
-      } catch (err) {
-        if (!cancelledRef.current) {
-          toast.error(`Failed to load run ${id}: ${(err as Error).message}`);
-          setDetail(null);
-        }
-      } finally {
-        if (!cancelledRef.current) setDetailLoading(false);
-      }
-    },
-    [toast],
-  );
-
-  const loadCompareDetail = useCallback(
-    async (id: string) => {
-      try {
-        const r = await api.get<EvalRunWithResults>(`/eval/runs/${encodeURIComponent(id)}`);
-        if (!cancelledRef.current) setCompareDetail(r);
-      } catch (err) {
-        if (!cancelledRef.current) {
-          toast.error(`Failed to load run ${id}: ${(err as Error).message}`);
-          setCompareDetail(null);
-        }
-      }
-    },
-    [toast],
-  );
-
-  // Initial fetch
-  useEffect(() => {
-    cancelledRef.current = false;
-    loadRuns();
-    return () => { cancelledRef.current = true; };
-  }, [loadRuns]);
-
-  const selectRun = async (id: string) => {
-    if (id === selectedRunId) return;
-    setSelectedRunId(id);
-    setCompareRunId(null);
-    setCompareDetail(null);
-    await loadDetail(id);
-  };
-
-  const useAsBaseline = async (id: string) => {
-    if (id === selectedRunId) return;
-    setCompareRunId(id);
-    await loadCompareDetail(id);
-  };
-
-  // Build the runsForDiff array — only the full records we actually
-  // have loaded (selected + baseline). Anything else is unavailable
-  // and the detail panel will show a "not loaded" hint.
-  const runsForDiff: EvalRunWithResults[] = [];
-  if (compareDetail) runsForDiff.push(compareDetail);
-  if (detail) runsForDiff.push(detail);
-
-  return (
-    <div className="view view-eval-report" data-testid="eval-report">
-      <div className="view-header">
-        <div className="view-header-text">
-          <h1 className="view-title">
-            <ClipboardCheck size={20} aria-hidden /> Eval Reports
-          </h1>
-          <p className="view-subtitle muted">
-            Browse eval runs, inspect per-fixture results, and diff two runs to spot regressions.
-          </p>
-        </div>
-        <div className="view-actions">
-          <Button variant="secondary" size="sm" onClick={loadRuns} disabled={loadingRuns}>
-            {loadingRuns ? <Spinner size="sm" /> : <RefreshCw size={12} />}
-            {loadingRuns ? 'Refreshing…' : 'Refresh'}
-          </Button>
-        </div>
-      </div>
-
-      <div className="eval-grid">
-        <div className="eval-runs-list">
-          {loadingRuns && runs.length === 0 ? (
-            <div className="eval-runs-loading">
-              <Spinner size="sm" />
-              <span className="muted">Loading runs…</span>
-            </div>
-          ) : runs.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>.
-                </>
-              }
-            />
-          ) : (
-            runs.map((r) => (
-              <div key={r.id} className="eval-run-card-wrap">
-                <EvalRunCard
-                  run={r}
-                  selected={r.id === selectedRunId}
-                  onClick={() => selectRun(r.id)}
-                />
-                {selectedRunId && r.id !== selectedRunId ? (
-                  <button
-                    type="button"
-                    className="eval-baseline-btn"
-                    onClick={() => useAsBaseline(r.id)}
-                    title="Use this run as a baseline for diffing"
-                  >
-                    <ArrowLeftRight size={10} aria-hidden />
-                    Use as baseline
-                  </button>
-                ) : null}
-              </div>
-            ))
-          )}
-        </div>
-
-        <div className="eval-detail">
-          {detailLoading && !detail ? (
-            <div className="eval-detail-loading">
-              <Spinner size="sm" />
-              <span className="muted">Loading run details…</span>
-            </div>
-          ) : detail ? (
-            <RunDetail
-              run={detail}
-              compareRun={compareRunId}
-              runsForDiff={runsForDiff}
-              onClearCompare={() => { setCompareRunId(null); setCompareDetail(null); }}
-              onClearSelection={() => { setSelectedRunId(null); setDetail(null); setCompareRunId(null); setCompareDetail(null); }}
-            />
-          ) : (
-            <Card className="eval-detail-empty">
-              <EmptyState
-                icon={<ClipboardCheck size={28} />}
-                title="Select a run"
-                message="Pick an eval run from the list to view fixture-by-fixture results, latency, and per-check failure details."
-              />
-            </Card>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const EvalReport = React.memo(EvalReportInner);
-export type { EvalFixtureResult };

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

@@ -1,158 +0,0 @@
-// src/views/GoalPlanner.tsx — Goal Planner UI.
-//
-// v6.4.0 — F-036 (Goal Planner UI). The main page wires the
-// plain-English input to the GOAP planner endpoint and renders the
-// resulting plan plus four live panels:
-//   - PlanVisualization (collapsible action tree)
-//   - DependencyGraph (DAG via @xyflow/react)
-//   - CommunicationLog (inter-agent message bus)
-//   - RealTimeEventLog (live WS event ticker)
-//   - QualityGates (L09 rubric)
-//
-// The two live panels subscribe to the shared Ws() singleton — we
-// never spin up a second WebSocket connection.
-import { useEffect, useState } from 'react';
-import { Target, Sparkles } from 'lucide-react';
-import { Ws } from '../lib/ws';
-import { Card, CardTitle, CardMeta } from '../components/Card';
-import { GoalInput } from '../components/goals/GoalInput';
-import { PlanVisualization } from '../components/goals/PlanVisualization';
-import { DependencyGraph } from '../components/agents/DependencyGraph';
-import { CommunicationLog } from '../components/agents/CommunicationLog';
-import { RealTimeEventLog } from '../components/agents/RealTimeEventLog';
-import { QualityGates } from '../components/agents/QualityGates';
-import type { Plan } from '../lib/goapPlanner';
-import type { Snapshot, Settings } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-const RUBRIC_DIMENSIONS = {
-  compileCheck: 'compile-check',
-  testCoverage: 'unit',
-  archScore: 'check-arch',
-  evidencePresent: 'e2e',
-} as const;
-
-function GoalPlannerInner(_props: Props) {
-  const [plan, setPlan] = useState<Plan | null>(null);
-  // Live counters for the QualityGates panel. We start optimistic
-  // (assume the planner succeeded) and let the WS stream adjust the
-  // numbers as events flow in.
-  const [compileCheck, setCompileCheck] = useState<boolean>(false);
-  const [coverage, setCoverage] = useState<number>(0);
-  const [archScore, setArchScore] = useState<number>(0);
-  const [evidence, setEvidence] = useState<boolean>(false);
-
-  // Subscribe to the shared Ws(). We don't trigger any refetch; we
-  // just bump the QualityGates metrics as the relevant events
-  // arrive. The four live panels manage their own subscriptions.
-  useEffect(() => {
-    const ws = new Ws();
-    const off = ws.on((msg) => {
-      const m = msg as { type?: string } & Record<string, unknown>;
-      switch (m.type) {
-        case 'task:progress':
-          setCoverage((c) => clamp(c + 5, 0, 100));
-          setEvidence(true);
-          break;
-        case 'tasks:change':
-          setEvidence(true);
-          break;
-        case 'goal:planned':
-          setCompileCheck(true);
-          setCoverage((c) => (c < 25 ? 25 : c));
-          setArchScore((s) => (s < 30 ? 30 : s));
-          setEvidence(true);
-          break;
-        case 'agents:change':
-        case 'agent:status':
-          setArchScore((s) => clamp(s + 2, 0, 100));
-          break;
-        default:
-          break;
-      }
-    });
-    return () => {
-      off();
-      ws.close();
-    };
-  }, []);
-
-  return (
-    <div className="goal-planner-page" data-testid="goal-planner-page">
-      <header className="goal-planner-header">
-        <div className="goal-planner-title-row">
-          <Target size={20} aria-hidden />
-          <h2>Goal Planner</h2>
-          <span className="badge badge-info" data-testid="goal-planner-version">v6.4.0</span>
-        </div>
-        <p className="goal-planner-blurb">
-          <Sparkles size={12} aria-hidden /> Type a goal in plain English. We decompose it into clauses, map
-          each clause to a Bizar action template, and run A* over the action space to produce an executable
-          plan. The four panels below update in real time as the harness streams events.
-        </p>
-      </header>
-
-      <div className="goal-planner-grid">
-        <section className="goal-planner-input-row">
-          <GoalInput onPlan={setPlan} />
-        </section>
-
-        <section className="goal-planner-plan-row">
-          <PlanVisualization plan={plan} />
-        </section>
-
-        <section className="goal-planner-panel-row">
-          <DependencyGraph plan={plan} />
-        </section>
-
-        <section className="goal-planner-panel-row">
-          <CommunicationLog />
-        </section>
-
-        <section className="goal-planner-panel-row">
-          <RealTimeEventLog />
-        </section>
-
-        <section className="goal-planner-panel-row">
-          <QualityGates
-            plan={plan}
-            metrics={{
-              compileCheck,
-              testCoverage: coverage,
-              archScore,
-              evidencePresent: evidence,
-            }}
-          />
-        </section>
-      </div>
-
-      <footer className="goal-planner-footer">
-        <Card>
-          <CardTitle>How this works</CardTitle>
-          <CardMeta>
-            Rubric dimensions: {Object.values(RUBRIC_DIMENSIONS).join(' · ')}. The dependency graph uses
-            @xyflow/react; the message bus and event ticker subscribe to the shared WebSocket feed
-            (never a second connection).
-          </CardMeta>
-        </Card>
-      </footer>
-    </div>
-  );
-}
-
-function clamp(n: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, n));
-}
-
-export function GoalPlanner(props: Props) {
-  return <GoalPlannerInner {...props} />;
-}
-
-export default GoalPlanner;