@polderlabs/bizar 5.0.2 → 5.2.0

package/bizar-dash/src/server/workers/transcription-worker.mjs

@@ -0,0 +1,213 @@
+/**
+ * src/server/workers/transcription-worker.mjs
+ *
+ * v5.2 — Background transcription worker for voice notes.
+ *
+ * When a user uploads a voice note, the audio is saved immediately and a
+ * reference (noteId) is enqueued here. The worker drains the queue in
+ * FIFO order: it reads the audio from disk, calls `transcribe()` (the
+ * Whisper adapter), persists the result via `updateVoiceNote()`, and
+ * pushes a `voice:updated` event on the dashboard WebSocket so the UI
+ * can replace the "transcribing…" placeholder as soon as the text is
+ * ready.
+ *
+ * Design choices:
+ *   - In-memory queue (per-process). No cross-instance persistence; if
+ *     the server dies with work in the queue, those notes remain
+ *     un-transcribed (the audio file is still on disk and can be
+ *     re-triggered manually if needed).
+ *   - Single-threaded drain (`processing` flag). Multiple callers
+ *     enqueueing during a drain are captured by the while-loop's
+ *     `queue.length > 0` check on each iteration.
+ *   - Errors inside `processOne()` are caught and logged by
+ *     `processQueue()`; a failure on note X does NOT stop note X+1.
+ *   - `broadcast()` is injected at startup so the worker doesn't take
+ *     a hard dependency on server.mjs. In tests, a no-op stub is fine.
+ *   - `setInterval(..., 5000)` is a safety net: any work left in the
+ *     queue (e.g. from a processQueue race during teardown) gets a
+ *     retry tick. `.unref()` keeps the interval from blocking process
+ *     exit — the worker never closes the server by itself.
+ *
+ * Test injection: the four setters / helpers exposed on the bottom of
+ * this file (`setTranscribe`, `setBroadcast`, `drainQueue`, `reset`)
+ * exist so tests can stub the Whisper adapter and observe the queue
+ * without booting a server or hitting the network. They have no effect
+ * in production unless called.
+ */
+
+import { readFileSync, existsSync } from 'node:fs';
+import { getVoiceNote, updateVoiceNote } from '../voice-store.mjs';
+import { transcribe as defaultTranscribe } from '../voice-transcribe.mjs';
+import { child } from '../logger.mjs';
+
+const log = child({ module: 'transcription-worker' });
+
+const POLL_INTERVAL_MS = 5000;
+
+// ── Mutable worker state ────────────────────────────────────────────────────
+
+/** @type {{ noteId: string, enqueuedAt: number }[]} */
+const queue = [];
+let processing = false;
+
+/** Override hooks — defaults call through to the real Whisper adapter / no-op broadcast. */
+let _transcribe = defaultTranscribe;
+let _broadcast = () => {};
+
+const idleWaiters = [];
+
+// ── Core processing ─────────────────────────────────────────────────────────
+
+/**
+ * Process one note end-to-end. Returns a status object so tests (and
+ * the drain loop) can distinguish "skipped for a reason" from "ok".
+ *
+ * @param {string} noteId
+ * @returns {Promise<{ ok?: true, transcript?: string, skipped?: string }>}
+ */
+export async function processOne(noteId) {
+  const note = getVoiceNote(noteId);
+  if (!note) {
+    log.debug('note missing, skipping', { noteId });
+    return { skipped: 'missing' };
+  }
+  if (note.transcript) {
+    log.debug('already transcribed', { noteId });
+    return { skipped: 'already_transcribed' };
+  }
+  if (!existsSync(note.audioPath)) {
+    log.error('audio file missing on disk', { noteId, audioPath: note.audioPath });
+    return { skipped: 'audio_missing' };
+  }
+
+  let transcript;
+  try {
+    const audioBuffer = readFileSync(note.audioPath);
+    transcript = await _transcribe(audioBuffer, { mimeType: 'audio/webm' });
+  } catch (err) {
+    log.error('transcription threw', { noteId, err: err.message });
+    return { skipped: 'error', err: err.message };
+  }
+
+  if (!transcript) {
+    log.warn('transcription returned null', { noteId });
+    return { skipped: 'no_transcript' };
+  }
+
+  const updated = updateVoiceNote(noteId, { transcript });
+  if (!updated) {
+    log.error('updateVoiceNote returned null after successful transcription', { noteId });
+    return { skipped: 'update_failed' };
+  }
+
+  try {
+    _broadcast({ type: 'voice:updated', noteId, patch: { transcript } });
+  } catch (err) {
+    // Broadcast failure must not corrupt the on-disk state.
+    log.warn('broadcast threw', { noteId, err: err.message });
+  }
+
+  log.info('transcription complete', { noteId, length: transcript.length });
+  return { ok: true, transcript };
+}
+
+/**
+ * Drain the queue. Guarded by the `processing` flag so concurrent
+ * callers don't double-drain. Errors inside `processOne` are logged
+ * and swallowed, NOT re-thrown — the next item must always get a
+ * chance.
+ */
+async function processQueue() {
+  if (processing) return;
+  processing = true;
+  try {
+    while (queue.length > 0) {
+      const { noteId } = queue.shift();
+      try {
+        await processOne(noteId);
+      } catch (err) {
+        log.error('transcription failed', { noteId, err: err.message });
+      }
+    }
+  } finally {
+    processing = false;
+    if (queue.length === 0) {
+      const toResolve = idleWaiters.splice(0);
+      for (const r of toResolve) r();
+    }
+  }
+}
+
+// ── Public API ──────────────────────────────────────────────────────────────
+
+/**
+ * Enqueue a note for background transcription.
+ *
+ * @param {string} noteId
+ */
+export function enqueueTranscription(noteId) {
+  if (!noteId || typeof noteId !== 'string') return;
+  queue.push({ noteId, enqueuedAt: Date.now() });
+  // Drain is fire-and-forget — callers don't await per-note work.
+  void processQueue();
+}
+
+/**
+ * Start the worker. Idempotent — calling twice clears the previous
+ * interval and starts a fresh one.
+ *
+ * @param {{ broadcast?: (msg: unknown) => void }} [opts]
+ */
+export function startTranscriptionWorker({ broadcast } = {}) {
+  if (typeof broadcast === 'function') _broadcast = broadcast;
+  // Replace any prior interval so tests + double-boot are safe.
+  if (startTranscriptionWorker._interval) {
+    clearInterval(startTranscriptionWorker._interval);
+  }
+  log.info('transcription worker started', { pollIntervalMs: POLL_INTERVAL_MS });
+  const handle = setInterval(() => void processQueue(), POLL_INTERVAL_MS);
+  if (typeof handle.unref === 'function') handle.unref();
+  startTranscriptionWorker._interval = handle;
+}
+
+// ── Test hooks (no-op in production) ────────────────────────────────────────
+
+/** @param {(buf: Buffer|Uint8Array, opts?: object) => Promise<string|null>} fn */
+export function setTranscribe(fn) {
+  _transcribe = typeof fn === 'function' ? fn : defaultTranscribe;
+}
+
+/** @param {(msg: unknown) => void} fn */
+export function setBroadcast(fn) {
+  _broadcast = typeof fn === 'function' ? fn : () => {};
+}
+
+/** Number of items waiting or currently being processed. */
+export function getQueueDepth() {
+  return queue.length + (processing ? 1 : 0);
+}
+
+/**
+ * Resolve once the queue is fully drained (no items + not processing).
+ * Returns a resolved promise immediately if already idle.
+ */
+export function drainQueue() {
+  if (queue.length === 0 && !processing) return Promise.resolve();
+  return new Promise((resolve) => {
+    idleWaiters.push(resolve);
+    void processQueue();
+  });
+}
+
+/** Reset all mutable state. ONLY for tests. */
+export function reset() {
+  queue.length = 0;
+  processing = false;
+  _transcribe = defaultTranscribe;
+  _broadcast = () => {};
+  idleWaiters.length = 0;
+  if (startTranscriptionWorker._interval) {
+    clearInterval(startTranscriptionWorker._interval);
+    startTranscriptionWorker._interval = null;
+  }
+}

package/bizar-dash/src/web/App.tsx

@@ -31,6 +31,7 @@ import { Activity } from './views/Activity';
 import { Config } from './views/Config';
 import { SettingsView } from './views/Settings';
 import { Mods } from './views/Mods';
+import { Plugins } from './views/Plugins';
 import { ModView, type ModView as ModViewType } from './views/ModView';
 import { Schedules } from './views/Schedules';
 import { Skills } from './views/Skills';
@@ -39,6 +40,8 @@ import { History } from './views/History';
 import { MiniMaxUsage } from './views/MiniMaxUsage';
 import { BackgroundAgents } from './views/BackgroundAgents';
 import { Doctor } from './views/Doctor';
+import { Eval } from './views/Eval';
+import { EvalReport } from './views/EvalReport';
 import { SettingsNav } from './components/SettingsNav';
 import { Spinner } from './components/Spinner';
 import { Button } from './components/Button';
@@ -92,10 +95,16 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   skills: Skills,
   history: History,
   minimax: MiniMaxUsage,
+  plugins: Plugins,
   // v6.0.0 — Doctor page (system health + diagnostics surface).
   // Registered here so the tab id 'doctor' from Topbar.tsx TABS
   // resolves to a real view instead of falling back to Overview.
   doctor: Doctor,
+  // v5.2.0 — Eval framework web UI. `eval` is the sidebar tab
+  // (recent runs summary), `evalReport` is reachable from the
+  // Eval view's "Open Eval Report" button (full report + diff).
+  eval: Eval,
+  evalReport: EvalReport,
 };
 
 const VERSION = 'v4.5.0';

package/bizar-dash/src/web/MobileApp.tsx

@@ -1,5 +1,5 @@
 // src/MobileApp.tsx — mobile root with state-based routing + stack navigation.
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, Suspense } from 'react';
 import {
   Activity,
   CheckSquare,
@@ -16,7 +16,6 @@ import { MobileBottomNav, type MobileTab } from './mobile/MobileBottomNav';
 import { MobileTopbar } from './mobile/MobileTopbar';
 import { MobileActivity } from './mobile/views/MobileActivity';
 import { MobileAgents } from './mobile/views/MobileAgents';
-import { MobileChat } from './mobile/views/MobileChat';
 import { MobileConfig } from './mobile/views/MobileConfig';
 import { MobileHistory } from './mobile/views/MobileHistory';
 import { MobileMods } from './mobile/views/MobileMods';
@@ -25,10 +24,13 @@ import { MobileArtifactCanvas } from './mobile/views/MobileArtifactCanvas';
 import { MobileArtifacts } from './mobile/views/MobileArtifacts';
 import { MobileSchedules } from './mobile/views/MobileSchedules';
 import { MobileSearchModal } from './mobile/views/MobileSearchModal';
-import { MobileSettings } from './mobile/views/MobileSettings';
 import { MobileSkills } from './mobile/views/MobileSkills';
 import { MobileTasks } from './mobile/views/MobileTasks';
 
+// Lazy-loaded mobile-specific variants (code-split from main bundle)
+const MobileSettings = React.lazy(() => import('./mobile/MobileSettings').then(m => ({ default: m.MobileSettings })));
+const MobileChat = React.lazy(() => import('./mobile/MobileChat').then(m => ({ default: m.MobileChat })));
+
 type MainTabId = 'activity' | 'chat' | 'tasks' | 'settings' | 'more';
 
 export type MobileView =
@@ -326,12 +328,14 @@ export function MobileApp() {
         return <MobileActivity snapshot={snapshot} onRefresh={refreshSnapshot} />;
       case 'chat':
         return (
-          <MobileChat
-            snapshot={snapshot}
-            settings={settings}
-            initialTaskId={pendingChatTaskId}
-            onClearTaskId={() => setPendingChatTaskId(null)}
-          />
+          <Suspense fallback={<div className="mobile-loading"><Spinner size="lg" /></div>}>
+            <MobileChat
+              snapshot={snapshot}
+              settings={settings}
+              initialTaskId={pendingChatTaskId}
+              onClearTaskId={() => setPendingChatTaskId(null)}
+            />
+          </Suspense>
         );
       case 'tasks':
         return (
@@ -345,7 +349,11 @@ export function MobileApp() {
           />
         );
       case 'settings':
-        return <MobileSettings settings={settings} snapshot={snapshot} onRefresh={refreshSnapshot} />;
+        return (
+          <Suspense fallback={<div className="mobile-loading"><Spinner size="lg" /></div>}>
+            <MobileSettings settings={settings} snapshot={snapshot} onRefresh={refreshSnapshot} />
+          </Suspense>
+        );
       case 'more':
         return (
           <MobileMore

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

@@ -0,0 +1,157 @@
+// src/components/EvalDiff.tsx — v5.2.0
+//
+// Side-by-side comparison of two eval runs. Categorizes each fixture
+// as improved / regressed / unchanged and renders a summary block plus
+// a list of changed fixtures.
+//
+// `runA` is the "before" run (typically an older baseline); `runB` is
+// the "after" run (typically the newer run under review).
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/utils';
+
+/** Per-fixture result row embedded in a run record. */
+export type EvalFixtureResult = {
+  fixtureId: string;
+  ok: boolean;
+  checks?: { kind: string; ok: boolean; message?: string }[];
+  latencyMs?: number;
+};
+
+export type EvalRunWithResults = {
+  id: string;
+  startedAt: string;
+  finishedAt?: string;
+  suitePath?: string;
+  total: number;
+  passed: number;
+  failed: number;
+  results: EvalFixtureResult[];
+};
+
+export type EvalDiffEntry = {
+  fixtureId: string;
+  /** The fixture's pass/fail status in the "before" run, or null if absent. */
+  before: boolean | null;
+  /** The fixture's pass/fail status in the "after" run, or null if absent. */
+  after: boolean | null;
+  /** Bucket label derived from before/after. */
+  change: 'same' | 'improved' | 'regressed' | 'added' | 'removed';
+};
+
+export type EvalDiffProps = {
+  runA: EvalRunWithResults;
+  runB: EvalRunWithResults;
+  /**
+   * Optional override for the section heading. Defaults to
+   * "Regression Analysis".
+   */
+  title?: string;
+};
+
+/**
+ * Pure helper: compute the diff entries from two runs. Exported so
+ * tests can exercise the categorization logic without rendering.
+ */
+export function computeEvalDiff(
+  runA: EvalRunWithResults,
+  runB: EvalRunWithResults,
+): EvalDiffEntry[] {
+  const mapA = new Map(runA.results.map((r) => [r.fixtureId, r]));
+  const mapB = new Map(runB.results.map((r) => [r.fixtureId, r]));
+  const ids = new Set<string>([...mapA.keys(), ...mapB.keys()]);
+
+  const out: EvalDiffEntry[] = [];
+  for (const id of ids) {
+    const a = mapA.get(id);
+    const b = mapB.get(id);
+    const before = a ? a.ok : null;
+    const after = b ? b.ok : null;
+
+    let change: EvalDiffEntry['change'];
+    if (a && b) {
+      if (before === after) change = 'same';
+      else if (before === false && after === true) change = 'improved';
+      else change = 'regressed';
+    } else if (b && !a) {
+      change = 'added';
+    } else {
+      change = 'removed';
+    }
+
+    out.push({ fixtureId: id, before, after, change });
+  }
+  // Stable sort: regressions first, then improvements, then others.
+  const order: Record<EvalDiffEntry['change'], number> = {
+    regressed: 0,
+    improved: 1,
+    added: 2,
+    removed: 3,
+    same: 4,
+  };
+  out.sort((x, y) => {
+    const d = order[x.change] - order[y.change];
+    if (d !== 0) return d;
+    return x.fixtureId.localeCompare(y.fixtureId);
+  });
+  return out;
+}
+
+export function EvalDiff({ runA, runB, title = 'Regression Analysis' }: EvalDiffProps): ReactNode {
+  const diff = computeEvalDiff(runA, runB);
+
+  const improved = diff.filter((d) => d.change === 'improved').length;
+  const regressed = diff.filter((d) => d.change === 'regressed').length;
+  const unchanged = diff.filter((d) => d.change === 'same').length;
+  const changed = diff.filter((d) => d.change !== 'same');
+
+  return (
+    <div className="eval-diff" data-testid="eval-diff">
+      <h3 className="eval-diff-title">{title}</h3>
+      <div className="eval-diff-subtitle muted">
+        Comparing <code className="mono">{runA.id}</code> →{' '}
+        <code className="mono">{runB.id}</code>
+      </div>
+
+      <div className="eval-diff-stats" aria-label="Diff summary">
+        <span className="eval-diff-stat improved">
+          <span className="eval-diff-stat-icon" aria-hidden>+</span>
+          {improved} improved
+        </span>
+        <span className="eval-diff-stat regressed">
+          <span className="eval-diff-stat-icon" aria-hidden>−</span>
+          {regressed} regressed
+        </span>
+        <span className="eval-diff-stat unchanged muted">
+          {unchanged} unchanged
+        </span>
+      </div>
+
+      {changed.length === 0 ? (
+        <p className="eval-diff-empty muted">No fixture-level changes between these runs.</p>
+      ) : (
+        <ul className="eval-diff-list" role="list">
+          {changed.map((d) => (
+            <li
+              key={d.fixtureId}
+              data-fixture-id={d.fixtureId}
+              className={cn('eval-diff-row', `is-${d.change}`)}
+            >
+              <span className="eval-diff-fixture mono">{d.fixtureId}</span>
+              <span className="eval-diff-arrow" aria-hidden>→</span>
+              <span className="eval-diff-states">
+                <span className={cn('eval-diff-state', d.before ? 'is-pass' : 'is-fail')}>
+                  {d.before === null ? '—' : d.before ? 'pass' : 'fail'}
+                </span>
+                <span className="eval-diff-arrow-small" aria-hidden>→</span>
+                <span className={cn('eval-diff-state', d.after ? 'is-pass' : 'is-fail')}>
+                  {d.after === null ? '—' : d.after ? 'pass' : 'fail'}
+                </span>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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/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)}>
+          Configure
+        </Button>
+        <Button size="sm" variant="danger" onClick={() => onUninstall(plugin.id)}>
+          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">
+      {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>
+  );
+}