@polderlabs/bizar 5.2.0 → 5.3.1

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

@@ -0,0 +1,27 @@
+// src/components/EvalExportButton.tsx — v5.3.0
+// Export button for downloading eval run results as CSV.
+
+import React from 'react';
+import { Download } from 'lucide-react';
+import { Button } from './Button';
+import { api } from '../lib/api';
+
+type Props = {
+  runId: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export function EvalExportButton({ runId, variant = 'secondary', size = 'sm' }: Props) {
+  const onExport = () => {
+    const token = api.getToken();
+    window.open(`/api/eval/runs/${encodeURIComponent(runId)}/export.csv?_t=${encodeURIComponent(token)}`, '_blank');
+  };
+
+  return (
+    <Button variant={variant} size={size} onClick={onExport} title="Export results as CSV">
+      <Download size={14} aria-hidden />
+      Export CSV
+    </Button>
+  );
+}

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>