@polderlabs/bizar 5.2.0 → 5.3.0

package/bizar-dash/src/web/components/InstallConfirmDialog.tsx

@@ -0,0 +1,62 @@
+// src/web/components/InstallConfirmDialog.tsx — confirmation dialog for installing a marketplace plugin.
+
+import { useEffect, useRef } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { useModal } from './Modal';
+import { Button } from './Button';
+import { PluginPermissions } from './PluginPermissions';
+import type { MarketplacePlugin } from './MarketplacePluginCard';
+
+export type InstallConfirmDialogProps = {
+  plugin: MarketplacePlugin;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+  installing: boolean;
+};
+
+export function InstallConfirmDialog({ plugin, onConfirm, onCancel, installing }: InstallConfirmDialogProps) {
+  const modal = useModal();
+  // Track the plugin id we've opened the modal for, so we don't re-open on every render.
+  const openedForRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!plugin) return;
+    // Only open if we haven't already opened for this plugin.
+    if (openedForRef.current === plugin.id) return;
+    openedForRef.current = plugin.id;
+
+    modal.open({
+      title: `Install ${plugin.name}?`,
+      width: 480,
+      onClose: () => {
+        openedForRef.current = null;
+        onCancel();
+      },
+      children: (
+        <div className="install-confirm">
+          <h3>{plugin.name} v{plugin.version}</h3>
+          {plugin.description && <p>{plugin.description}</p>}
+
+          <div className="install-warning">
+            <AlertTriangle size={16} />
+            <p>This plugin will run code on your machine. It requests these permissions:</p>
+          </div>
+
+          <PluginPermissions permissions={plugin.permissions ?? []} />
+
+          <div className="install-confirm-actions">
+            <Button onClick={onCancel} disabled={installing}>Cancel</Button>
+            <Button variant="primary" onClick={onConfirm} disabled={installing}>
+              {installing ? 'Installing...' : 'Install'}
+            </Button>
+          </div>
+        </div>
+      ),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plugin, installing]);
+
+  // This component manages its own modal state via useModal.
+  // Render nothing in the React tree — the modal is rendered via portal.
+  return null;
+}

package/bizar-dash/src/web/components/MarketplacePluginCard.tsx

@@ -0,0 +1,51 @@
+// src/web/components/MarketplacePluginCard.tsx — card for a plugin listed in the marketplace.
+
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+import { PluginPermissions } from './PluginPermissions';
+
+export type MarketplacePlugin = {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description?: string;
+  category: string;
+  tags?: string[];
+  permissions?: string[];
+};
+
+export type MarketplacePluginCardProps = {
+  plugin: MarketplacePlugin;
+  onInstall: () => void;
+  onView: () => void;
+};
+
+export function MarketplacePluginCard({ plugin, onInstall, onView }: MarketplacePluginCardProps) {
+  return (
+    <Card className="marketplace-plugin-card">
+      <div className="marketplace-plugin-head">
+        <div>
+          <CardTitle>{plugin.name}</CardTitle>
+          <CardMeta>v{plugin.version} · {plugin.category}</CardMeta>
+        </div>
+        <div className="marketplace-plugin-author">{plugin.author}</div>
+      </div>
+      {plugin.description && (
+        <p className="marketplace-plugin-description">{plugin.description}</p>
+      )}
+      {plugin.tags && plugin.tags.length > 0 && (
+        <div className="marketplace-plugin-tags">
+          {plugin.tags.map((tag) => (
+            <span key={tag} className="tag">{tag}</span>
+          ))}
+        </div>
+      )}
+      <PluginPermissions permissions={plugin.permissions ?? []} />
+      <div className="marketplace-plugin-actions">
+        <Button onClick={onView}>Details</Button>
+        <Button variant="primary" onClick={onInstall}>Install</Button>
+      </div>
+    </Card>
+  );
+}

package/bizar-dash/src/web/components/PluginCard.tsx

@@ -46,10 +46,10 @@ export function PluginCard({ plugin, onToggle, onUninstall, onConfigure }: Plugi
       )}
       <PluginPermissions permissions={plugin.permissions ?? []} />
       <div className="plugin-card-actions">
-        <Button size="sm" onClick={() => onConfigure(plugin.id)}>
+        <Button size="sm" onClick={() => onConfigure(plugin.id)} aria-label={`Configure ${plugin.name}`}>
           Configure
         </Button>
-        <Button size="sm" variant="danger" onClick={() => onUninstall(plugin.id)}>
+        <Button size="sm" variant="danger" onClick={() => onUninstall(plugin.id)} aria-label={`Uninstall ${plugin.name}`}>
           Uninstall
         </Button>
       </div>

package/bizar-dash/src/web/components/PluginPermissions.tsx

@@ -16,7 +16,7 @@ export type PluginPermissionsProps = {
 
 export function PluginPermissions({ permissions }: PluginPermissionsProps) {
   return (
-    <div className="plugin-permissions">
+    <div className="plugin-permissions" aria-label="Required permissions">
       {permissions.map((perm) => {
         const info = PERMISSION_LABELS[perm] ?? { label: perm, icon: Shield, color: 'gray', description: '' };
         const Icon = info.icon;

package/bizar-dash/src/web/components/ScheduleTemplateCard.tsx

@@ -63,6 +63,7 @@ export function ScheduleTemplateCard({ template, onUse }: Props) {
         variant="secondary"
         size="sm"
         onClick={() => onUse(template)}
+        aria-label={`Use template: ${template.name}`}
       >
         Use this template
       </Button>

package/bizar-dash/src/web/components/Topbar.tsx

@@ -25,6 +25,7 @@ import {
   Brain,
   Stethoscope,
   ClipboardCheck,
+  Store,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -51,6 +52,8 @@ export const TABS: TabDef[] = [
   { id: 'skills', label: 'Skills', icon: Sparkles },
   { id: 'memory', label: 'Memory', icon: Brain },
   { id: 'mods', label: 'Mods', icon: Puzzle },
+  // v5.3.0 — Plugin marketplace browse + install UI.
+  { id: 'marketplace', label: 'Marketplace', icon: Store },
   { id: 'schedules', label: 'Schedules', icon: Clock },
   { id: 'plugins', label: 'Plugins', icon: Puzzle },
   { id: 'history', label: 'History', icon: HistoryIcon },

package/bizar-dash/src/web/components/VoiceNotesPanel.tsx

@@ -120,6 +120,34 @@ export function VoiceNotesPanel({ vaultPath, refreshKey = 0 }: Props) {
 
   useEffect(() => {
     loadNotes();
+    
+    // v5.2.0 — Listen for transcription worker updates
+    const handleMessage = (e: MessageEvent) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'voice:updated' && msg.noteId) {
+          // Update the matching note's transcript in place
+          setNotes((prev) => prev.map((n) => 
+            n.id === msg.noteId 
+              ? { ...n, transcript: msg.patch?.transcript ?? n.transcript }
+              : n
+          ));
+        }
+      } catch { /* ignore parse errors */ }
+    };
+    
+    // Connect to WS for real-time transcript updates
+    const wsUrl = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;
+    let ws: WebSocket | null = null;
+    try {
+      ws = new WebSocket(wsUrl);
+      ws.addEventListener('message', handleMessage);
+    } catch { /* ignore */ }
+    
+    return () => {
+      ws?.removeEventListener('message', handleMessage);
+      ws?.close();
+    };
   }, [vaultPath, refreshKey]);
 
   const handleDelete = async (id: string) => {

package/bizar-dash/src/web/styles/main.css

@@ -9162,6 +9162,120 @@ select:focus-visible,
   margin-top: var(--space-2);
 }
 
+/* ─── v5.3.0 — Plugin marketplace ──────────────────────────────── */
+.marketplace-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.marketplace-plugin-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.marketplace-plugin-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.marketplace-plugin-description {
+  color: var(--text-dim);
+  margin: var(--space-2) 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.marketplace-plugin-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 8px 0;
+}
+
+.marketplace-plugin-tags .tag {
+  background: var(--surface-3, rgba(255, 255, 255, 0.05));
+  color: var(--text-dim, #8b949e);
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-size: 10px;
+}
+
+.marketplace-plugin-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: auto;
+  padding-top: var(--space-2);
+}
+
+.marketplace-plugin-author {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.marketplace-search-row {
+  margin-bottom: 16px;
+}
+
+.category-chips {
+  display: flex;
+  gap: 8px;
+  margin: 16px 0;
+  flex-wrap: wrap;
+}
+
+.category-chips button {
+  padding: 6px 12px;
+  border: 1px solid var(--border, #30363d);
+  border-radius: 14px;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.category-chips button:hover {
+  background: var(--surface-2);
+}
+
+.category-chips button.active {
+  background: var(--accent, #8b5cf6);
+  color: white;
+  border-color: var(--accent, #8b5cf6);
+}
+
+.install-confirm h3 {
+  margin: 0 0 var(--space-2);
+  font-size: 16px;
+}
+
+.install-warning {
+  display: flex;
+  gap: 8px;
+  background: rgba(245, 158, 11, 0.1);
+  padding: 12px;
+  border-radius: 6px;
+  margin: 12px 0;
+  color: #d29922;
+  font-size: 13px;
+}
+
+.install-warning p {
+  margin: 0;
+  color: var(--text);
+}
+
+.install-confirm-actions {
+  display: flex;
+  gap: var(--space-2);
+  justify-content: flex-end;
+  margin-top: var(--space-4);
+}
+
 /* ─── Plugin permissions ──────────────────────────────────────────── */
 .plugin-permissions {
   display: flex;
@@ -9610,3 +9724,28 @@ select:focus-visible,
   display: flex;
   flex-direction: column;
 }
+
+/* ─── High-contrast mode (prefers-contrast: more) ──────────────────── */
+@media (prefers-contrast: more) {
+  :root {
+    --text-dim: var(--text);
+    --text-muted: var(--text);
+  }
+
+  [data-theme='light'] {
+    --text-dim: #374151;
+    --text-muted: #374151;
+  }
+
+  :focus-visible,
+  button:focus-visible,
+  [role='button']:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  select:focus-visible,
+  [tabindex]:focus-visible {
+    outline-width: 3px;
+    outline-style: solid;
+  }
+}

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

@@ -208,7 +208,7 @@ function DoctorInner({
         </div>
         <div className="doctor-header-meta muted">
           <Clock size={12} aria-hidden />
-          <span>
+          <span aria-live="polite" aria-atomic="true">
             v{data.bizarVersion} · {data.platform}/{data.arch} ·{' '}
             up {Math.floor(data.uptime)}s
             {lastFetched ? ` · refreshed ${formatTime(new Date(lastFetched))}` : ''}
@@ -266,7 +266,7 @@ function DoctorInner({
           </CardTitle>
           <CardMeta>Run a check, view logs, or export the snapshot.</CardMeta>
           <div className="doctor-actions-row">
-            <Button variant="primary" onClick={fetchSnapshot} disabled={refreshing}>
+            <Button variant="primary" onClick={fetchSnapshot} disabled={refreshing} aria-label="Refresh diagnostics">
               {refreshing ? <Spinner size="sm" /> : <RefreshCw size={12} />}
               {refreshing ? 'Running…' : 'Run Health Check Now'}
             </Button>
@@ -279,7 +279,7 @@ function DoctorInner({
             <Button
               variant="ghost"
               onClick={() => setAutoRefresh((v) => !v)}
-              title="Toggle auto-refresh"
+              aria-label={autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'}
             >
               {autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'}
             </Button>

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>