@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,317 +0,0 @@
-// src/views/Doctor.tsx — v6.0.0 Doctor page.
-//
-// Full-page Doctor view: shows system health, service health, counts,
-// recent errors, and action buttons. Refreshes every 30 seconds via
-// the cheap `/api/doctor/health` endpoint and re-fetches the full
-// snapshot on demand (initial mount, manual Refresh, or after a
-// single-check POST so the operator sees the immediate result).
-//
-// The page deliberately leans on the existing Card component and the
-// StatusBadge variants added in v6.0.0 (`ok`/`warn`/`fail`). Layout
-// is a single column on narrow viewports, two columns on desktop —
-// matching the rest of the dashboard's grid.
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  CheckCircle2,
-  AlertTriangle,
-  AlertOctagon,
-  Download,
-  FileText,
-  RefreshCw,
-  PlayCircle,
-  Stethoscope,
-  Clock,
-} from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../components/Card';
-import { Button } from '../components/Button';
-import { DoctorPanel } from '../components/DoctorPanel';
-import { StatusBadge } from '../components/StatusBadge';
-import { Spinner } from '../components/Spinner';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-import { cn, formatTime } from '../lib/utils';
-import type { DoctorSnapshot, DoctorCheck, Settings, Snapshot } from '../lib/types';
-
-const REFRESH_INTERVAL_MS = 30_000;
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-function DoctorInner({
-  setActiveTab,
-}: Props) {
-  const toast = useToast();
-  const [data, setData] = useState<DoctorSnapshot | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [lastFetched, setLastFetched] = useState<number | null>(null);
-  const [autoRefresh, setAutoRefresh] = useState(true);
-  const cancelledRef = useRef(false);
-
-  const fetchSnapshot = useCallback(async () => {
-    setRefreshing(true);
-    try {
-      const r = await api.get<DoctorSnapshot>('/doctor');
-      if (!cancelledRef.current) {
-        setData(r);
-        setLastFetched(Date.now());
-        setLoading(false);
-      }
-    } catch (err) {
-      if (!cancelledRef.current) {
-        setLoading(false);
-        toast.error(`Doctor refresh failed: ${(err as Error).message}`);
-      }
-    } finally {
-      if (!cancelledRef.current) setRefreshing(false);
-    }
-  }, [toast]);
-
-  // Initial fetch on mount
-  useEffect(() => {
-    cancelledRef.current = false;
-    fetchSnapshot();
-    return () => { cancelledRef.current = true; };
-  }, [fetchSnapshot]);
-
-  // 30s auto-refresh via the cheap health endpoint so the page
-  // stays current without burning a full snapshot every tick. We
-  // only trigger a full snapshot fetch if status changed.
-  useEffect(() => {
-    if (!autoRefresh) return;
-    const tick = async () => {
-      try {
-        const r = await api.get<{ status: string; issues: DoctorCheck[] }>('/doctor/health');
-        setData((cur) => {
-          if (!cur) return cur;
-          if (cur.health.status !== r.status || cur.health.issues.length !== r.issues.length) {
-            // Status changed — re-fetch the full snapshot
-            fetchSnapshot();
-          }
-          return cur;
-        });
-      } catch { /* non-fatal */ }
-    };
-    const id = setInterval(tick, REFRESH_INTERVAL_MS);
-    return () => clearInterval(id);
-  }, [autoRefresh, fetchSnapshot]);
-
-  const onRunCheck = async (checkName: string) => {
-    try {
-      const r = await api.post<DoctorCheck>('/doctor/check', { checkName });
-      toast.info(`${r.name}: ${r.message}`, 4000);
-      // Re-fetch so the panel reflects the fresh result
-      await fetchSnapshot();
-    } catch (err) {
-      const apiErr = err as { status?: number; data?: { message?: string } };
-      toast.error(`Check failed: ${apiErr.data?.message ?? (err as Error).message}`);
-    }
-  };
-
-  const onExportJson = () => {
-    if (!data) return;
-    try {
-      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `doctor-snapshot-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch (err) {
-      toast.error(`Export failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onViewLogs = () => {
-    // Logs live on the Settings → Activity Log surface (already
-    // implemented). Set the tab and let the user browse.
-    setActiveTab('settings');
-  };
-
-  const counts = data?.counts;
-  const countsInfo = useMemo(() => {
-    if (!counts) return [];
-    return [
-      { label: 'Tasks', value: counts.tasks },
-      { label: 'Schedules', value: counts.schedules },
-      { label: 'Mods', value: counts.mods },
-      { label: 'Providers', value: counts.providers },
-      { label: 'MCPs', value: counts.mcps },
-      { label: 'Agents', value: counts.agents },
-      { label: 'Projects', value: counts.projects },
-      { label: 'Workspaces', value: counts.workspaces },
-      { label: 'Voice notes', value: counts.voiceNotes },
-      { label: 'Eval runs', value: counts.evalRuns },
-      { label: 'Backups', value: counts.backups },
-    ];
-  }, [counts]);
-
-  if (loading) {
-    return (
-      <div className="view view-doctor view-loading">
-        <Spinner size="lg" />
-        <p>Running health checks…</p>
-      </div>
-    );
-  }
-
-  if (!data) {
-    return (
-      <div className="view view-doctor">
-        <Card>
-          <CardTitle>
-            <AlertOctagon size={14} /> Doctor unavailable
-          </CardTitle>
-          <CardMeta>Could not reach /api/doctor.</CardMeta>
-          <div className="doctor-fallback-actions">
-            <Button variant="primary" onClick={fetchSnapshot}>
-              <RefreshCw size={12} /> Retry
-            </Button>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  const overall = data.health.status;
-  const OverallIcon =
-    overall === 'ok' ? CheckCircle2 : overall === 'warn' ? AlertTriangle : AlertOctagon;
-  const overallLabel =
-    overall === 'ok' ? 'Healthy' : overall === 'warn' ? 'Warning' : 'Failed';
-
-  return (
-    <div className="view view-doctor" data-overall={overall}>
-      <div className="doctor-header">
-        <div className="doctor-header-row">
-          <div className="doctor-header-title">
-            <Stethoscope size={20} aria-hidden />
-            <h1>Doctor</h1>
-          </div>
-          <div className="doctor-header-status">
-            <span className={cn('doctor-overall-pill', `doctor-overall-${overall}`)}>
-              <OverallIcon size={14} aria-hidden />
-              <span className="doctor-overall-label">{overallLabel}</span>
-              <StatusBadge kind={overall} dot>
-                {data.health.issues.length} issue{data.health.issues.length === 1 ? '' : 's'}
-              </StatusBadge>
-            </span>
-          </div>
-        </div>
-        <div className="doctor-header-meta muted">
-          <Clock size={12} aria-hidden />
-          <span aria-live="polite" aria-atomic="true">
-            v{data.bizarVersion} · {data.platform}/{data.arch} ·{' '}
-            up {Math.floor(data.uptime)}s
-            {lastFetched ? ` · refreshed ${formatTime(new Date(lastFetched))}` : ''}
-          </span>
-        </div>
-      </div>
-
-      <div className="doctor-grid">
-        <DoctorPanel
-          category="system"
-          checks={data.checks.system}
-          meta={`${data.platform}/${data.arch}`}
-        />
-        <DoctorPanel
-          category="services"
-          checks={data.checks.services}
-          meta={
-            data.services.cline?.reachable
-              ? `cline on ${data.services.cline.port ?? '?'}`
-              : 'cline not connected'
-          }
-        />
-        <DoctorPanel
-          category="counts"
-          checks={[]}
-          info={countsInfo}
-          meta={counts?.activeProject ? `active: ${counts.activeProject}` : 'no active project'}
-        />
-        <Card className="doctor-errors-card">
-          <CardTitle>
-            <AlertOctagon size={14} aria-hidden />
-            <span>Recent errors (last hour)</span>
-            <span className="card-meta-inline muted">
-              {data.recentErrors.length} line{data.recentErrors.length === 1 ? '' : 's'}
-            </span>
-          </CardTitle>
-          {data.recentErrors.length === 0 ? (
-            <div className="muted doctor-errors-empty">No errors in the last hour. Nice.</div>
-          ) : (
-            <ul className="doctor-errors-list" role="list">
-              {data.recentErrors.map((e, idx) => (
-                <li key={`${e.tsMs ?? idx}-${idx}`} className="doctor-error-row">
-                  <span className="doctor-error-ts mono">
-                    {e.ts ? formatTime(new Date(e.ts)) : '??:??:??'}
-                  </span>
-                  <span className="doctor-error-line mono">{e.line}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </Card>
-        <Card className="doctor-actions-card">
-          <CardTitle>
-            <PlayCircle size={14} aria-hidden /> Actions
-          </CardTitle>
-          <CardMeta>Run a check, view logs, or export the snapshot.</CardMeta>
-          <div className="doctor-actions-row">
-            <Button variant="primary" onClick={fetchSnapshot} disabled={refreshing} aria-label="Refresh diagnostics">
-              {refreshing ? <Spinner size="sm" /> : <RefreshCw size={12} />}
-              {refreshing ? 'Running…' : 'Run Health Check Now'}
-            </Button>
-            <Button variant="secondary" onClick={onViewLogs}>
-              <FileText size={12} /> View Full Logs
-            </Button>
-            <Button variant="secondary" onClick={onExportJson}>
-              <Download size={12} /> Export Diagnostics as JSON
-            </Button>
-            <Button
-              variant="ghost"
-              onClick={() => setAutoRefresh((v) => !v)}
-              aria-label={autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'}
-            >
-              {autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'}
-            </Button>
-          </div>
-          {data.checks.services.some((c) => c.status !== 'ok') ||
-          data.checks.config.some((c) => c.status !== 'ok') ? (
-            <div className="doctor-actions-rerun">
-              <span className="muted">Rerun a single check:</span>
-              <div className="doctor-actions-rerun-row">
-                {[
-                  ...data.checks.services,
-                  ...data.checks.config,
-                ]
-                  .filter((c) => c.status !== 'ok')
-                  .map((c) => (
-                    <Button
-                      key={c.name}
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => onRunCheck(c.name)}
-                      title={`Run check: ${c.name}`}
-                    >
-                      <PlayCircle size={10} /> {c.name}
-                    </Button>
-                  ))}
-              </div>
-            </div>
-          ) : null}
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-export const Doctor = React.memo(DoctorInner);

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

@@ -1,372 +0,0 @@
-// 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, Clock, Plus, Trash2 } 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 EvalSchedule = {
-  id: string;
-  name: string;
-  suitePath: string;
-  cron: string;
-  agent: string;
-};
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-const RECENT_RUNS_LIMIT = 8;
-
-function AddScheduleForm({
-  onAdded,
-  onCancel,
-}: {
-  onAdded: (schedule: EvalSchedule) => void;
-  onCancel: () => void;
-}) {
-  const toast = useToast();
-  const [name, setName] = useState('');
-  const [suitePath, setSuitePath] = useState('');
-  const [cron, setCron] = useState('');
-  const [agent, setAgent] = useState('thor');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!name || !suitePath || !cron) {
-      toast.error('name, suitePath, and cron are required');
-      return;
-    }
-    setSubmitting(true);
-    try {
-      const result = await api.post<EvalSchedule>('/eval/schedules', { name, suitePath, cron, agent });
-      onAdded(result);
-      toast.success('Schedule created');
-    } catch (err) {
-      toast.error(`Failed to create schedule: ${(err as Error).message}`);
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <form className="eval-schedule-form" onSubmit={handleSubmit}>
-      <div className="form-row">
-        <label htmlFor="sched-name">Name</label>
-        <input
-          id="sched-name"
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Daily fixture check"
-          required
-        />
-      </div>
-      <div className="form-row">
-        <label htmlFor="sched-suite">Suite path</label>
-        <input
-          id="sched-suite"
-          type="text"
-          value={suitePath}
-          onChange={(e) => setSuitePath(e.target.value)}
-          placeholder="./fixtures"
-          required
-        />
-      </div>
-      <div className="form-row">
-        <label htmlFor="sched-cron">Cron</label>
-        <input
-          id="sched-cron"
-          type="text"
-          value={cron}
-          onChange={(e) => setCron(e.target.value)}
-          placeholder="0 8 * * *"
-          required
-        />
-      </div>
-      <div className="form-row">
-        <label htmlFor="sched-agent">Agent</label>
-        <input
-          id="sched-agent"
-          type="text"
-          value={agent}
-          onChange={(e) => setAgent(e.target.value)}
-          placeholder="thor"
-        />
-      </div>
-      <div className="form-actions">
-        <Button type="submit" variant="primary" size="sm" disabled={submitting}>
-          {submitting ? 'Creating…' : 'Create schedule'}
-        </Button>
-        <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
-        </Button>
-      </div>
-    </form>
-  );
-}
-
-function EvalInner({ setActiveTab }: Props) {
-  const toast = useToast();
-  const [runs, setRuns] = useState<EvalRunSummary[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [subTab, setSubTab] = useState<'runs' | 'schedules'>('runs');
-  const [schedules, setSchedules] = useState<EvalSchedule[]>([]);
-  const [loadingSchedules, setLoadingSchedules] = useState(false);
-  const [showAddSchedule, setShowAddSchedule] = useState(false);
-  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]);
-
-  const loadSchedules = useCallback(async () => {
-    setLoadingSchedules(true);
-    try {
-      const r = await api.get<{ schedules: EvalSchedule[] }>('/eval/schedules');
-      if (!cancelledRef.current) setSchedules(r.schedules || []);
-    } catch (err) {
-      if (!cancelledRef.current) {
-        toast.error(`Failed to load eval schedules: ${(err as Error).message}`);
-      }
-    } finally {
-      if (!cancelledRef.current) setLoadingSchedules(false);
-    }
-  }, [toast]);
-
-  useEffect(() => {
-    cancelledRef.current = false;
-    load();
-    if (subTab === 'schedules') loadSchedules();
-    return () => { cancelledRef.current = true; };
-  }, [load, loadSchedules, subTab]);
-
-  const deleteSchedule = async (id: string) => {
-    try {
-      await api.del(`/eval/schedules/${id}`);
-      setSchedules((prev) => prev.filter((s) => s.id !== id));
-      toast.success('Schedule deleted');
-    } catch (err) {
-      toast.error(`Failed to delete schedule: ${(err as Error).message}`);
-    }
-  };
-
-  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">
-        <div className="eval-sub-tabs">
-          <button
-            type="button"
-            className={cn('eval-sub-tab', subTab === 'runs' ? 'is-active' : '')}
-            onClick={() => setSubTab('runs')}
-          >
-            <ClipboardCheck size={12} aria-hidden /> Runs
-          </button>
-          <button
-            type="button"
-            className={cn('eval-sub-tab', subTab === 'schedules' ? 'is-active' : '')}
-            onClick={() => { setSubTab('schedules'); if (schedules.length === 0) loadSchedules(); }}
-          >
-            <Clock size={12} aria-hidden /> Schedules
-          </button>
-        </div>
-
-        {subTab === 'runs' ? (
-          <>
-            <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>
-            )}
-          </>
-        ) : (
-          <>
-            <h2 className="eval-section-title">Schedules</h2>
-            {loadingSchedules ? (
-              <div className="eval-runs-loading">
-                <Spinner size="sm" />
-                <span className="muted">Loading schedules…</span>
-              </div>
-            ) : schedules.length === 0 ? (
-              <EmptyState
-                icon={<Clock size={28} />}
-                title="No eval schedules"
-                message="Schedules let you run eval suites automatically on a cron. Add one below."
-              />
-            ) : (
-              <div className="eval-schedules-list">
-                {schedules.map((s) => (
-                  <Card key={s.id} className="eval-schedule-card">
-                    <div className="eval-schedule-row">
-                      <div className="eval-schedule-info">
-                        <CardTitle>{s.name}</CardTitle>
-                        <CardMeta className="muted">
-                          {s.cron} · {s.suitePath} · agent:{s.agent || 'thor'}
-                        </CardMeta>
-                      </div>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => deleteSchedule(s.id)}
-                        title="Delete schedule"
-                      >
-                        <Trash2 size={12} aria-hidden />
-                      </Button>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-            )}
-            <div className="eval-schedule-add">
-              <AddScheduleForm
-                onAdded={(newSchedule) => {
-                  setSchedules((prev) => [...prev, newSchedule]);
-                  setShowAddSchedule(false);
-                }}
-                onCancel={() => setShowAddSchedule(false)}
-              />
-              {!showAddSchedule && (
-                <Button variant="secondary" size="sm" onClick={() => setShowAddSchedule(true)}>
-                  <Plus size={12} aria-hidden /> Add schedule
-                </Button>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export const Eval = React.memo(EvalInner);