@polderlabs/bizar 5.1.0 → 5.3.0

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

@@ -0,0 +1,353 @@
+// 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/Marketplace.tsx

@@ -0,0 +1,135 @@
+// src/web/views/Marketplace.tsx — browse and install plugins from the marketplace registry.
+
+import { useEffect, useState } from 'react';
+import { Store } from 'lucide-react';
+import { MarketplacePluginCard, type MarketplacePlugin } from '../components/MarketplacePluginCard';
+import { InstallConfirmDialog } from '../components/InstallConfirmDialog';
+import { EmptyState } from '../components/EmptyState';
+import { Spinner } from '../components/Spinner';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+
+type RegistryResponse = {
+  plugins: MarketplacePlugin[];
+};
+
+export function Marketplace() {
+  const toast = useToast();
+  const [registry, setRegistry] = useState<RegistryResponse | null>(null);
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState<string | null>(null);
+  const [installing, setInstalling] = useState<MarketplacePlugin | null>(null);
+  const [selected, setSelected] = useState<MarketplacePlugin | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get<RegistryResponse>('/plugins/registry')
+      .then((r) => setRegistry(r))
+      .catch((err) => toast.error(`Failed to load marketplace: ${err.message}`))
+      .finally(() => setLoading(false));
+  }, [toast]);
+
+  const install = async (plugin: MarketplacePlugin) => {
+    setInstalling(plugin);
+    try {
+      await api.post('/plugins/install', { pluginId: plugin.id });
+      toast.success(`${plugin.name} installed`);
+      setInstalling(null);
+      setSelected(null);
+    } catch (err) {
+      toast.error(`Install failed: ${(err as Error).message}`);
+      setInstalling(null);
+    }
+  };
+
+  const plugins = registry?.plugins ?? [];
+  const filtered = plugins.filter(
+    (p) =>
+      (!search || p.name.toLowerCase().includes(search.toLowerCase())) &&
+      (!category || p.category === category),
+  );
+  const categories = [...new Set(plugins.map((p) => p.category))];
+
+  if (loading) {
+    return (
+      <div className="view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="view view-marketplace">
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Store size={18} aria-hidden />
+            Plugin Marketplace
+          </h2>
+          <p className="view-subtitle">
+            Discover and install plugins from the community registry.
+          </p>
+        </div>
+      </header>
+
+      <div className="marketplace-search-row">
+        <input
+          className="input"
+          type="search"
+          placeholder="Search plugins..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{ maxWidth: 320 }}
+        />
+      </div>
+
+      <div className="category-chips">
+        <button
+          type="button"
+          onClick={() => setCategory(null)}
+          className={!category ? 'active' : ''}
+        >
+          All
+        </button>
+        {categories.map((c) => (
+          <button
+            key={c}
+            type="button"
+            onClick={() => setCategory(c)}
+            className={category === c ? 'active' : ''}
+          >
+            {c}
+          </button>
+        ))}
+      </div>
+
+      {filtered.length === 0 ? (
+        <EmptyState
+          icon={<Store size={32} />}
+          title="No plugins found"
+          message={search ? `No plugins match "${search}".` : 'The marketplace is empty.'}
+        />
+      ) : (
+        <div className="marketplace-grid">
+          {filtered.map((p) => (
+            <MarketplacePluginCard
+              key={p.id}
+              plugin={p}
+              onInstall={() => setSelected(p)}
+              onView={() => setSelected(p)}
+            />
+          ))}
+        </div>
+      )}
+
+      {selected && (
+        <InstallConfirmDialog
+          plugin={selected}
+          onConfirm={() => install(selected)}
+          onCancel={() => setSelected(null)}
+          installing={installing?.id === selected.id || false}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+// src/views/Plugins.tsx — manage installed plugins and their permissions.
+
+import { useEffect, useState } from 'react';
+import { Puzzle, Store } from 'lucide-react';
+import { PluginCard, type InstalledPlugin } from '../components/PluginCard';
+import { EmptyState } from '../components/EmptyState';
+import { Spinner } from '../components/Spinner';
+import { Button } from '../components/Button';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+import type { Settings, Snapshot } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+export function Plugins({ setActiveTab }: Props) {
+  const toast = useToast();
+  const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('');
+
+  const load = async () => {
+    try {
+      const r = await api.get<{ plugins: InstalledPlugin[] }>('/plugins/installed');
+      setPlugins(r.plugins);
+    } catch (err) {
+      toast.error(`Failed to load plugins: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const toggle = async (id: string) => {
+    try {
+      // Toggle is handled by the backend via a toggle endpoint or we use update
+      await api.post(`/plugins/${id}/toggle`).catch(() => {
+        // Fallback: toggle is not a separate endpoint, may need PUT
+      });
+      await load();
+      toast.success('Plugin toggled.');
+    } catch (err) {
+      toast.error(`Toggle failed: ${(err as Error).message}`);
+    }
+  };
+
+  const uninstall = async (id: string) => {
+    if (!confirm('Uninstall this plugin?')) return;
+    try {
+      await api.del(`/plugins/${id}`);
+      await load();
+      toast.success('Plugin uninstalled.');
+    } catch (err) {
+      toast.error(`Uninstall failed: ${(err as Error).message}`);
+    }
+  };
+
+  const configure = (_id: string) => {
+    // TODO: open config dialog
+  };
+
+  if (loading) {
+    return (
+      <div className="view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  const filtered = plugins.filter((p) =>
+    p.name.toLowerCase().includes(filter.toLowerCase()),
+  );
+
+  return (
+    <div className="view view-plugins">
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Puzzle size={18} aria-hidden />
+            Plugins ({plugins.length})
+          </h2>
+          <p className="view-subtitle">
+            Manage plugins installed via the marketplace.
+          </p>
+        </div>
+        <Button variant="secondary" size="sm" onClick={() => setActiveTab('marketplace')}>
+          <Store size={14} aria-hidden />
+          Browse Marketplace
+        </Button>
+      </header>
+
+      {plugins.length === 0 ? (
+        <EmptyState
+          icon={<Puzzle size={32} />}
+          title="No plugins installed"
+          message="Browse the marketplace to discover and install plugins."
+        />
+      ) : (
+        <>
+          <div className="plugins-toolbar">
+            <input
+              className="input"
+              type="search"
+              placeholder="Filter plugins…"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              aria-label="Filter plugins"
+              style={{ maxWidth: 320 }}
+            />
+          </div>
+          <div className="plugin-grid">
+            {filtered.map((p) => (
+              <PluginCard
+                key={p.id}
+                plugin={p}
+                onToggle={toggle}
+                onUninstall={uninstall}
+                onConfigure={configure}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -372,7 +372,7 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
         <div className="view-actions">
           {activeSection === 'schedules' && (
             <>
-              <Button variant="secondary" size="sm" onClick={reload}>
+              <Button variant="secondary" size="sm" onClick={reload} aria-label="Refresh schedules">
                 <RefreshCw size={14} /> Refresh
               </Button>
               <Button variant="primary" size="sm" onClick={() => openEditor()}>

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

@@ -12,6 +12,7 @@ import { ThemeSection } from './settings/ThemeSection';
 import { UpdatesSection } from './settings/UpdatesSection';
 import { GeneralSection } from './settings/GeneralSection';
 import { NetworkSection } from './settings/NetworkSection';
+import { TailscaleSettings } from '../components/TailscaleSettings';
 import { NotificationsSection } from './settings/NotificationsSection';
 import { AuthSection } from './settings/AuthSection';
 import { AgentSection } from './settings/AgentSection';
@@ -290,6 +291,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot, settingsMode, s
         {(showAll || sectionOf('layout') || sectionOf('general')) && <GeneralSection {...sp} autoSave={autoSave} />}
         {(showAll || sectionOf('env-vars')) && <EnvVarsSection />}
         {(showAll || sectionOf('network') || sectionOf('service') || sectionOf('tailscale')) && <NetworkSection tailscale={tailscale} tailscaleDraft={tailscaleDraft} setTailscaleDraft={setTailscaleDraft} onTailscaleToggle={onTailscaleToggle} />}
+        {(showAll || sectionOf('network') || sectionOf('tailscale')) && <TailscaleSettings initialStatus={tailscale} />}
         {(showAll || sectionOf('notifications')) && <NotificationsSection {...sp} />}
         {(showAll || sectionOf('auth')) && <AuthSection settings={settings} authStatus={authStatus} setAuthStatus={setAuthStatus} />}
         {(showAll || sectionOf('agents') || sectionOf('dashboard') || sectionOf('background')) && <AgentSection {...sp} autoSave={autoSave} />}