@polderlabs/bizar 5.2.0 → 5.3.1

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

@@ -10,7 +10,7 @@
 // overview pattern (counts at top, recent history, call to action).
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ClipboardCheck, ArrowRight, RefreshCw, ExternalLink } from 'lucide-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';
@@ -21,6 +21,14 @@ 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;
@@ -31,10 +39,103 @@ type Props = {
 
 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 () => {
@@ -51,11 +152,36 @@ function EvalInner({ setActiveTab }: Props) {
     }
   }, [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]);
+  }, [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(
@@ -139,30 +265,104 @@ function EvalInner({ setActiveTab }: Props) {
       </div>
 
       <div className="eval-recent-section">
-        <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-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>
+            )}
+          </>
         ) : (
-          <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>

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

@@ -29,6 +29,7 @@ import {
   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';
@@ -68,9 +69,12 @@ function RunDetail({
           <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 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)}

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

@@ -1,10 +1,11 @@
 // src/views/Plugins.tsx — manage installed plugins and their permissions.
 
 import { useEffect, useState } from 'react';
-import { Puzzle } from 'lucide-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';
@@ -17,7 +18,7 @@ type Props = {
   refreshSnapshot: () => Promise<void>;
 };
 
-export function Plugins(_props: Props) {
+export function Plugins({ setActiveTab }: Props) {
   const toast = useToast();
   const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
   const [loading, setLoading] = useState(true);
@@ -90,13 +91,17 @@ export function Plugins(_props: Props) {
             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="Install plugins from the marketplace using the CLI."
+          message="Browse the marketplace to discover and install plugins."
         />
       ) : (
         <>
@@ -107,6 +112,7 @@ export function Plugins(_props: Props) {
               placeholder="Filter plugins…"
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
+              aria-label="Filter plugins"
               style={{ maxWidth: 320 }}
             />
           </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/tests/a11y/components.test.tsx

@@ -0,0 +1,149 @@
+// tests/a11y/components.test.tsx — WCAG 2.2 AA accessibility for interactive components.
+//
+// Tests Toggle role/switch behavior, PluginCard button accessible names,
+// PluginPermissions container label, and semantic structure.
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Toggle } from '../../src/web/components/Toggle';
+import { PluginCard } from '../../src/web/components/PluginCard';
+import { PluginPermissions } from '../../src/web/components/PluginPermissions';
+import { ScheduleTemplateCard } from '../../src/web/components/ScheduleTemplateCard';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+/** Assert every button in the container has an accessible name. */
+function expectAllButtonsAccessible(container: HTMLElement) {
+  const buttons = container.querySelectorAll('button');
+  const offenders: string[] = [];
+  buttons.forEach((el) => {
+    const ariaLabel = el.getAttribute('aria-label');
+    const labelledBy = el.getAttribute('aria-labelledby');
+    const text = (el.textContent || '').trim();
+    const title = el.getAttribute('title');
+    if (!ariaLabel && !labelledBy && !text && !title) {
+      offenders.push(`<button> has no accessible name`);
+    }
+  });
+  expect(offenders, offenders.join('\n')).toEqual([]);
+}
+
+// ─── Toggle ────────────────────────────────────────────────────────────────
+
+describe('Toggle — WCAG 4.4.2: role=switch + aria-checked', () => {
+  it('has role="switch" on the input element', () => {
+    render(<Toggle checked={false} onChange={() => {}} />);
+    const input = document.querySelector('input[type="checkbox"]');
+    expect(input).toHaveAttribute('role', 'switch');
+  });
+
+  it('has aria-checked matching the checked prop', () => {
+    const { rerender } = render(<Toggle checked={true} onChange={() => {}} />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+    rerender(<Toggle checked={false} onChange={() => {}} />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('has a visible focus indicator via :focus-visible', () => {
+    const { container } = render(<Toggle checked={false} onChange={() => {}} />);
+    const input = container.querySelector('input');
+    expect(input).toBeInTheDocument();
+  });
+});
+
+// ─── PluginCard ─────────────────────────────────────────────────────────────
+
+const FAKE_PLUGIN = {
+  id: 'test-plugin',
+  name: 'Test Plugin',
+  version: '1.0.0',
+  description: 'A test plugin',
+  permissions: ['net', 'fs'],
+  enabled: true,
+  invocations: 0,
+  lastInvokedAt: null,
+};
+
+describe('PluginCard — WCAG 2.1.1: all buttons have accessible names', () => {
+  it('the toggle has an accessible name via aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-label', 'Toggle Test Plugin enabled');
+  });
+
+  it('the Configure button has an aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const configureBtn = screen.getByRole('button', { name: /configure test plugin/i });
+    expect(configureBtn).toBeInTheDocument();
+  });
+
+  it('the Uninstall button has an aria-label', () => {
+    render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    const uninstallBtn = screen.getByRole('button', { name: /uninstall test plugin/i });
+    expect(uninstallBtn).toBeInTheDocument();
+  });
+
+  it('all buttons inside the card have accessible names', () => {
+    const { container } = render(
+      <PluginCard
+        plugin={FAKE_PLUGIN}
+        onToggle={() => {}}
+        onUninstall={() => {}}
+        onConfigure={() => {}}
+      />,
+    );
+    expectAllButtonsAccessible(container);
+  });
+});
+
+// ─── PluginPermissions ──────────────────────────────────────────────────────
+
+describe('PluginPermissions — WCAG 1.3.1: container has aria-label', () => {
+  it('the permissions container has aria-label="Required permissions"', () => {
+    render(<PluginPermissions permissions={['net', 'fs']} />);
+    const container = document.querySelector('.plugin-permissions');
+    expect(container).toHaveAttribute('aria-label', 'Required permissions');
+  });
+});
+
+// ─── ScheduleTemplateCard ────────────────────────────────────────────────────
+
+describe('ScheduleTemplateCard — WCAG 2.1.1: button has accessible name', () => {
+  it('the Use this template button has an aria-label', () => {
+    render(
+      <ScheduleTemplateCard
+        template={{
+          id: 't1',
+          name: 'Weekly Review',
+          description: 'Run weekly review',
+          type: 'cron',
+          action: { type: 'agent', target: 'weekly-reviewer' },
+        }}
+        onUse={() => {}}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /use template: weekly review/i });
+    expect(btn).toBeInTheDocument();
+  });
+});