@polderlabs/bizar 5.1.0 → 5.2.0

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

@@ -0,0 +1,349 @@
+// 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 { 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>
+          <Button variant="ghost" size="sm" onClick={onClearSelection} title="Close detail">
+            <X size={12} /> Close
+          </Button>
+        </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/Plugins.tsx

@@ -0,0 +1,128 @@
+// src/views/Plugins.tsx — manage installed plugins and their permissions.
+
+import { useEffect, useState } from 'react';
+import { Puzzle } from 'lucide-react';
+import { PluginCard, type InstalledPlugin } from '../components/PluginCard';
+import { EmptyState } from '../components/EmptyState';
+import { Spinner } from '../components/Spinner';
+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(_props: 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>
+      </header>
+
+      {plugins.length === 0 ? (
+        <EmptyState
+          icon={<Puzzle size={32} />}
+          title="No plugins installed"
+          message="Install plugins from the marketplace using the CLI."
+        />
+      ) : (
+        <>
+          <div className="plugins-toolbar">
+            <input
+              className="input"
+              type="search"
+              placeholder="Filter plugins…"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              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/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} />}

package/bizar-dash/tests/cli-tailscale.test.mjs

@@ -0,0 +1,113 @@
+/**
+ * bizar-dash/tests/cli-tailscale.test.mjs
+ *
+ * v5.2 — CLI Tailscale integration tests.
+ *
+ * Tests the tailscale CLI command module (cli/commands/tailscale.mjs).
+ * Verifies module structure and run() doesn't throw for help/invalid subcommands.
+ * Full integration testing requires a real or mocked tailscale binary.
+ */
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CLI_COMMANDS = resolve(__dirname, '..', '..', 'cli', 'commands');
+
+// ── Tests ───────────────────────────────────────────────────────────────────
+
+describe('cli/commands/tailscale.mjs exports', () => {
+  test('exports run() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.run, 'function');
+  });
+
+  test('exports ensureTailscaleAuth() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.ensureTailscaleAuth, 'function');
+  });
+
+  test('exports setupTailscaleServe() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.setupTailscaleServe, 'function');
+  });
+
+  test('exports unsetupTailscaleServe() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.unsetupTailscaleServe, 'function');
+  });
+
+  test('exports getServeUrl() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.getServeUrl, 'function');
+  });
+
+  test('exports showTailscaleStatus() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.showTailscaleStatus, 'function');
+  });
+
+  test('exports showTailscaleHelp() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.showTailscaleHelp, 'function');
+  });
+
+  test('exports isTailscaleInstalled() function', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    assert.equal(typeof mod.isTailscaleInstalled, 'function');
+  });
+});
+
+describe('run() — CLI subcommand dispatcher', () => {
+  test('run() with no args does not throw (prints help)', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    // Should not throw - it will print help and return
+    await mod.run('tailscale', [], false);
+  });
+
+  test('run() with --help flag does not throw', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    await mod.run('tailscale', ['--help'], false);
+  });
+
+  test('run() with "help" subcommand does not throw', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    await mod.run('tailscale', ['help'], false);
+  });
+
+  test('run() with unknown subcommand does not throw (prints error + help)', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    // Should not throw - it will print an error and help
+    await mod.run('tailscale', ['unknown-subcommand'], false);
+  });
+});
+
+describe('showTailscaleHelp()', () => {
+  test('prints help text including env var documentation', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    let stdout = '';
+    const orig = process.stdout.write.bind(process.stdout);
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    process.stdout.write = (s) => { stdout += String(s); return true; };
+    try {
+      mod.showTailscaleHelp();
+      assert.ok(stdout.includes('bizar tailscale'));
+      assert.ok(stdout.includes('TAILSCALE_AUTHKEY'));
+      assert.ok(stdout.includes('bizar tailscale status'));
+      assert.ok(stdout.includes('bizar tailscale serve'));
+      assert.ok(stdout.includes('bizar tailscale unserve'));
+    } finally {
+      process.stdout.write = orig;
+    }
+  });
+});
+
+describe('getServeUrl()', () => {
+  test('returns null when serve config does not exist', async () => {
+    const mod = await import(`${CLI_COMMANDS}/tailscale.mjs`);
+    const url = mod.getServeUrl();
+    // Returns null when no config file exists (test environment)
+    assert.equal(url, null);
+  });
+});