@polderlabs/bizar 5.1.0 → 5.3.0

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

@@ -0,0 +1,78 @@
+// src/components/EvalRunCard.tsx — v5.2.0
+//
+// Compact card summarizing a single eval run. Used in the EvalReport's
+// left rail to show the recent run history. Click selects the run.
+//
+// Status rules (per brief):
+//   failed === 0            → pass
+//   passed/total > 0.8      → warn
+//   otherwise               → fail
+
+import type { ReactNode } from 'react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { cn, formatTime } from '../lib/utils';
+
+/**
+ * Summary of an eval run. The fields here are the subset returned by
+ * GET /api/eval/runs (the list endpoint) — `results` lives on the full
+ * run record returned by GET /api/eval/runs/:id and is not present here.
+ */
+export type EvalRunSummary = {
+  id: string;
+  startedAt: string;
+  finishedAt?: string;
+  suitePath: string;
+  total: number;
+  passed: number;
+  failed: number;
+};
+
+export type EvalRunCardProps = {
+  run: EvalRunSummary;
+  onClick?: () => void;
+  /** v5.2.0 — Marks the card as the currently selected run. */
+  selected?: boolean;
+  /** Optional aria-label override; falls back to the run id. */
+  ariaLabel?: string;
+};
+
+function pickStatus(run: EvalRunSummary): 'pass' | 'warn' | 'fail' {
+  if (run.total <= 0) return 'fail';
+  if (run.failed === 0) return 'pass';
+  if (run.passed / run.total > 0.8) return 'warn';
+  return 'fail';
+}
+
+export function EvalRunCard({ run, onClick, selected, ariaLabel }: EvalRunCardProps): ReactNode {
+  const status = pickStatus(run);
+  // Pass-rate as a fixed-percent string. toFixed guards against locale
+  // issues (e.g. some locales use "," as the decimal separator).
+  const passRate = run.total > 0
+    ? ((run.passed / run.total) * 100).toFixed(1)
+    : '0.0';
+  const interactive = Boolean(onClick);
+
+  return (
+    <Card
+      onClick={onClick}
+      interactive={interactive}
+      aria-label={ariaLabel ?? `Eval run ${run.id}`}
+      aria-pressed={interactive ? selected : undefined}
+      className={cn(
+        'eval-run-card',
+        selected && 'eval-run-card-selected',
+        `eval-run-${status}`,
+      )}
+    >
+      <div className="eval-run-head">
+        <CardTitle className="eval-run-title">{run.id}</CardTitle>
+        <span className={cn('eval-status', `is-${status}`)}>
+          {run.passed}/{run.total} ({passRate}%)
+        </span>
+      </div>
+      <CardMeta className="eval-run-meta">
+        {formatTime(run.startedAt)} · {run.suitePath}
+      </CardMeta>
+    </Card>
+  );
+}

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

@@ -0,0 +1,64 @@
+// src/web/components/PluginCard.tsx — card for one installed plugin with toggle, configure, and uninstall.
+
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+import { Toggle } from './Toggle';
+import { PluginPermissions } from './PluginPermissions';
+
+export type InstalledPlugin = {
+  id: string;
+  name: string;
+  version: string;
+  description?: string;
+  permissions?: string[];
+  config?: Record<string, unknown>;
+  methodCount?: number;
+  invocations?: number;
+  lastInvokedAt?: string | null;
+  enabled?: boolean;
+};
+
+export type PluginCardProps = {
+  plugin: InstalledPlugin;
+  onToggle: (id: string) => void;
+  onUninstall: (id: string) => void;
+  onConfigure: (id: string) => void;
+};
+
+export function PluginCard({ plugin, onToggle, onUninstall, onConfigure }: PluginCardProps) {
+  return (
+    <Card>
+      <div className="plugin-card-head">
+        <div>
+          <CardTitle>{plugin.name}</CardTitle>
+          <CardMeta>
+            v{plugin.version} · {plugin.id}
+          </CardMeta>
+        </div>
+        <Toggle
+          checked={plugin.enabled ?? true}
+          onChange={() => onToggle(plugin.id)}
+          aria-label={`Toggle ${plugin.name} enabled`}
+        />
+      </div>
+      {plugin.description && (
+        <p className="plugin-description">{plugin.description}</p>
+      )}
+      <PluginPermissions permissions={plugin.permissions ?? []} />
+      <div className="plugin-card-actions">
+        <Button size="sm" onClick={() => onConfigure(plugin.id)} aria-label={`Configure ${plugin.name}`}>
+          Configure
+        </Button>
+        <Button size="sm" variant="danger" onClick={() => onUninstall(plugin.id)} aria-label={`Uninstall ${plugin.name}`}>
+          Uninstall
+        </Button>
+      </div>
+      <div className="plugin-card-stats">
+        {plugin.invocations ?? 0} invocations
+        {plugin.lastInvokedAt
+          ? ` · last used ${plugin.lastInvokedAt}`
+          : ' · never used'}
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,36 @@
+// src/web/components/PluginPermissions.tsx — renders permission chips for a plugin.
+
+import { Globe, FileText, Settings, Terminal, Shield, type LucideIcon } from 'lucide-react';
+
+const PERMISSION_LABELS: Record<string, { label: string; icon: LucideIcon; color: string; description: string }> = {
+  net: { label: 'Network access', icon: Globe, color: 'blue', description: 'Can make HTTP requests to external services' },
+  fs: { label: 'Filesystem', icon: FileText, color: 'yellow', description: 'Can read and write files' },
+  config: { label: 'Config access', icon: Settings, color: 'gray', description: 'Can read and write Bizar config' },
+  log: { label: 'Logging', icon: FileText, color: 'gray', description: 'Can write to the structured log' },
+  exec: { label: 'Shell execution', icon: Terminal, color: 'red', description: 'Can run shell commands' },
+};
+
+export type PluginPermissionsProps = {
+  permissions: string[];
+};
+
+export function PluginPermissions({ permissions }: PluginPermissionsProps) {
+  return (
+    <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;
+        return (
+          <div
+            key={perm}
+            className={`permission-chip is-${info.color}`}
+            title={info.description}
+          >
+            <Icon size={12} aria-hidden />
+            <span>{info.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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/TailscaleSettings.tsx

@@ -0,0 +1,161 @@
+// src/web/components/TailscaleSettings.tsx
+//
+// v5.2 — Tailscale auth key integration UI.
+//
+// Allows users to authenticate with Tailscale using an auth key and
+// set up tailscale serve for the dashboard without using the CLI.
+import React, { useEffect, useState } from 'react';
+import { CheckCircle, Link as LinkIcon, Plug } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+import { api } from '../lib/api';
+import type { TailscaleStatus } from '../lib/types';
+
+type Props = {
+  /** Existing tailscale status from Settings-level fetch. If provided, used as initial value. */
+  initialStatus?: TailscaleStatus | null;
+};
+
+export function TailscaleSettings({ initialStatus }: Props) {
+  const [status, setStatus] = useState<TailscaleStatus | null>(initialStatus ?? null);
+  const [authKey, setAuthKey] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (status === null) {
+      api.get<TailscaleStatus>('/tailscale/status')
+        .then((r) => setStatus(r))
+        .catch(() => setStatus(null));
+    }
+  }, []);
+
+  const loadStatus = async () => {
+    try {
+      const r = await api.get<TailscaleStatus>('/tailscale/status');
+      setStatus(r);
+    } catch {
+      setError('Failed to load Tailscale status');
+    }
+  };
+
+  const handleAuthenticate = async () => {
+    if (!authKey.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/setup', { authKey: authKey.trim() });
+      await loadStatus();
+      setAuthKey('');
+    } catch (err) {
+      setError((err as Error).message || 'Authentication failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSetupServe = async () => {
+    if (!status) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/setup', {
+        port: status.settings?.port || 4321,
+        https: status.settings?.https !== false,
+        hostname: status.settings?.hostname || '',
+      });
+      await loadStatus();
+    } catch (err) {
+      setError((err as Error).message || 'Setup failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemoveServe = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/unserve');
+      await loadStatus();
+    } catch (err) {
+      setError((err as Error).message || 'Remove failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isInstalled = status?.installed ?? false;
+  const isAuthenticated = status?.authenticated ?? false;
+  const isServeEnabled = status?.settings?.enabled ?? false;
+  const serveUrl = isServeEnabled ? `https://${status?.hostname || 'bizar-dash'}` : null;
+
+  if (!isInstalled) {
+    return (
+      <Card id="settings-tailscale-auth" data-section="tailscale">
+        <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
+        <CardMeta>Tailscale is not installed on this machine.</CardMeta>
+        <p className="muted">
+          Install from{' '}
+          <a href="https://tailscale.com/download" target="_blank" rel="noreferrer">
+            tailscale.com/download
+          </a>
+        </p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card id="settings-tailscale-auth" data-section="tailscale">
+      <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
+      <CardMeta>Expose the dashboard over your Tailscale network using an auth key.</CardMeta>
+
+      {error && (
+        <p style={{ color: 'var(--color-error, #f85149)', fontSize: '0.85rem' }}>{error}</p>
+      )}
+
+      {isAuthenticated ? (
+        <>
+          <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+            <CheckCircle size={16} style={{ color: 'var(--color-success, #3fb950)' }} />
+            <span>Authenticated as <strong>{status?.hostname || 'unknown'}</strong></span>
+          </div>
+
+          {isServeEnabled && serveUrl ? (
+            <>
+              <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+                <LinkIcon size={16} />
+                <a href={serveUrl} target="_blank" rel="noreferrer">{serveUrl}</a>
+              </div>
+              <Button variant="secondary" size="sm" onClick={handleRemoveServe} disabled={loading}>
+                Remove serve
+              </Button>
+            </>
+          ) : (
+            <Button variant="primary" size="sm" onClick={handleSetupServe} disabled={loading}>
+              Set up Tailscale serve
+            </Button>
+          )}
+        </>
+      ) : (
+        <>
+          <p className="muted" style={{ marginBottom: '0.75rem' }}>Not authenticated with Tailscale.</p>
+          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <input
+              type="text"
+              className="input"
+              placeholder="tskey-..."
+              value={authKey}
+              onChange={(e) => setAuthKey(e.target.value)}
+              style={{ flex: 1, minWidth: '200px' }}
+              disabled={loading}
+            />
+            <Button variant="primary" size="sm" onClick={handleAuthenticate} disabled={loading || !authKey.trim()}>
+              Authenticate
+            </Button>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,31 @@
+// src/components/Toggle.tsx — toggle switch control.
+
+import { type InputHTMLAttributes, forwardRef } from 'react';
+import { cn } from '../lib/utils';
+
+export type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
+  /** Called with the new checked value on change. */
+  onChange?: (checked: boolean) => void;
+};
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  function Toggle({ className, checked, onChange, onClick, ...rest }, ref) {
+    return (
+      <label className={cn('toggle', className)}>
+        <input
+          ref={ref}
+          type="checkbox"
+          role="switch"
+          aria-checked={checked}
+          checked={checked}
+          onChange={(e) => onChange?.(e.target.checked)}
+          onClick={(e) => {
+            onClick?.(e as unknown as React.MouseEvent<HTMLInputElement>);
+          }}
+          {...rest}
+        />
+        <span className="toggle-slider" aria-hidden />
+      </label>
+    );
+  },
+);

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

@@ -24,6 +24,8 @@ import {
   Coins,
   Brain,
   Stethoscope,
+  ClipboardCheck,
+  Store,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -50,9 +52,16 @@ 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 },
   { id: 'minimax', label: 'Usage', icon: Coins },
+  // v5.2.0 — Eval framework UI. Lives next to Doctor (both are
+  // operator-quality surfaces) so the "did the last eval pass?"
+  // question is one click from the home screen.
+  { id: 'eval', label: 'Eval', icon: ClipboardCheck },
   // v6.0.0 — Doctor page. Lives between Overview and Settings so the
   // "is everything healthy?" question is always one click from the
   // home screen and from the settings surface (where an operator

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) => {