@polderlabs/bizar 5.2.0 → 5.3.0

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();
+  });
+});

package/bizar-dash/tests/a11y/forms.test.tsx

@@ -0,0 +1,191 @@
+// tests/a11y/forms.test.tsx — WCAG 2.1.1 / 3.3.1 form accessibility for Doctor and Schedules.
+//
+// Tests that all form inputs have accessible names (label, aria-label,
+// or aria-labelledby), and that form errors and live regions are announced.
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Doctor } from '../../src/web/views/Doctor';
+import { Schedules } from '../../src/web/views/Schedules';
+import { ToastProvider } from '../../src/web/components/Toast';
+import { ModalProvider } from '../../src/web/components/Modal';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+/** Assert every input/select/textarea in the container has an accessible name. */
+function expectAllInputsAccessible(container: HTMLElement) {
+  const inputs = container.querySelectorAll('input, select, textarea');
+  const offenders: string[] = [];
+  inputs.forEach((el) => {
+    if ((el as HTMLInputElement).type === 'hidden') return;
+    const accessibleName =
+      el.getAttribute('aria-label') ||
+      el.getAttribute('aria-labelledby') ||
+      el.getAttribute('placeholder') ||
+      el.getAttribute('title');
+    let labelledByLabel = false;
+    if (el.id) {
+      labelledByLabel = !!container.querySelector(`label[for="${el.id}"]`);
+    }
+    if (!accessibleName && !labelledByLabel) {
+      offenders.push(
+        `<${el.tagName.toLowerCase()}${el.id ? ` id="${el.id}"` : ''}${el.getAttribute('type') ? ` type="${el.getAttribute('type')}"` : ''}> has no accessible name`,
+      );
+    }
+  });
+  expect(offenders, offenders.join('\n')).toEqual([]);
+}
+
+/** 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([]);
+}
+
+function renderWithProviders(ui: React.ReactNode) {
+  return render(
+    <ToastProvider>
+      <ModalProvider>{ui}</ModalProvider>
+    </ToastProvider>,
+  );
+}
+
+// ─── Doctor ─────────────────────────────────────────────────────────────────
+
+const FAKE_SNAPSHOT = {
+  bizarreVersion: '99.0.0',
+  platform: 'linux',
+  arch: 'x64',
+  uptime: 3600,
+  tasks: 0,
+  schedules: 0,
+  mods: 0,
+  providers: 0,
+  mcps: 0,
+  agents: 0,
+  projects: 0,
+  workspaces: 0,
+  voiceNotes: 0,
+  evalRuns: 0,
+  backups: 0,
+  activeProject: null,
+};
+
+const FAKE_SETTINGS = {};
+
+describe('Doctor — WCAG 3.3.1: form inputs have accessible names + aria-live', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    // Mock the API to avoid real network calls
+    vi.spyOn(require('../../src/web/lib/api'), 'api').mockImplementation(() => ({
+      get: vi.fn().mockResolvedValue({
+        health: { status: 'ok', issues: [] },
+        checks: { system: [], services: [], config: [], counts: [] },
+        bizarreVersion: '99.0.0',
+        platform: 'linux',
+        arch: 'x64',
+        uptime: 3600,
+        counts: {},
+        recentErrors: [],
+      }),
+      post: vi.fn().mockResolvedValue({ name: 'test', message: 'ok' }),
+    }));
+  });
+
+  it('the "Run Health Check Now" button has aria-label="Refresh diagnostics"', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh diagnostics/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('the auto-refresh toggle button has an accessible name', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    // The button shows "Pause auto-refresh" or "Resume auto-refresh"
+    const btn = screen.getByRole('button', { name: /(pause|resume) auto-refresh/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('header meta region has aria-live="polite"', async () => {
+    renderWithProviders(
+      <Doctor
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="doctor"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const liveRegion = document.querySelector('[aria-live="polite"]');
+    expect(liveRegion).toBeInTheDocument();
+  });
+});
+
+// ─── Schedules ───────────────────────────────────────────────────────────────
+
+describe('Schedules — WCAG 3.3.1: all form inputs have accessible names', () => {
+  it('the Refresh button has aria-label="Refresh schedules"', () => {
+    renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh schedules/i });
+    expect(btn).toBeInTheDocument();
+  });
+
+  it('all visible inputs in the Schedules view have accessible names', () => {
+    const { container } = renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    expectAllInputsAccessible(container);
+  });
+
+  it('all visible buttons in the Schedules view have accessible names', () => {
+    const { container } = renderWithProviders(
+      <Schedules
+        snapshot={FAKE_SNAPSHOT}
+        settings={FAKE_SETTINGS}
+        activeTab="schedules"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    expectAllButtonsAccessible(container);
+  });
+});

package/bizar-dash/tests/a11y/navigation.test.tsx

@@ -0,0 +1,112 @@
+// tests/a11y/navigation.test.tsx — WCAG 2.1.1 / 2.4.1 navigation accessibility.
+//
+// Tests that sidebar, tabs, and the Memory source rail all meet
+// keyboard navigation, role, and aria attributes requirements.
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Memory } from '../../src/web/views/Memory';
+import { Plugins } from '../../src/web/views/Plugins';
+import { ToastProvider } from '../../src/web/components/Toast';
+import { ModalProvider } from '../../src/web/components/Modal';
+
+function renderWithProviders(ui: React.ReactNode) {
+  return render(
+    <ToastProvider>
+      <ModalProvider>{ui}</ModalProvider>
+    </ToastProvider>,
+  );
+}
+
+// ─── Memory tab ──────────────────────────────────────────────────────────────
+
+describe('Memory — WCAG 2.4.1: nav has aria-label, tabs have role=tab + aria-selected', () => {
+  it('source rail has aria-label="Memory sources"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const nav = document.querySelector('[aria-label="Memory sources"]');
+    expect(nav).toBeInTheDocument();
+  });
+
+  it('each source button has role="tab"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs.length).toBeGreaterThan(0);
+  });
+
+  it('active tab has aria-selected="true"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const activeTab = screen.getByRole('tab', { selected: true });
+    expect(activeTab).toBeInTheDocument();
+  });
+
+  it('inactive tabs have aria-selected="false"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const tabs = screen.getAllByRole('tab');
+    const unselected = tabs.filter((t) => !t.getAttribute('aria-selected') || t.getAttribute('aria-selected') === 'false');
+    expect(unselected.length).toBeGreaterThan(0);
+  });
+
+  it('refresh button has aria-label="Refresh memory"', () => {
+    renderWithProviders(
+      <Memory
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="memory"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const btn = screen.getByRole('button', { name: /refresh memory/i });
+    expect(btn).toBeInTheDocument();
+  });
+});
+
+// ─── Plugins ─────────────────────────────────────────────────────────────────
+
+describe('Plugins — WCAG 2.1.1: filter input has accessible name', () => {
+  it('the filter input has aria-label="Filter plugins"', () => {
+    renderWithProviders(
+      <Plugins
+        snapshot={{} as any}
+        settings={{} as any}
+        activeTab="plugins"
+        setActiveTab={() => {}}
+        refreshSnapshot={() => Promise.resolve()}
+      />,
+    );
+    const input = document.querySelector('input[type="search"]');
+    expect(input).toHaveAttribute('aria-label', 'Filter plugins');
+  });
+});