@polderlabs/bizar 4.5.2 → 4.7.1

package/bizar-dash/src/server/routes/overview.mjs

@@ -15,6 +15,7 @@ import { agentsStore } from '../agents-store.mjs';
 import { schedulesStore } from '../schedules-store.mjs';
 import { providersStore, mcpsStore } from '../providers-store.mjs';
 import { modsLoader } from '../mods-loader.mjs';
+import { error as logError } from '../logger.mjs';
 import {
   OPENCODE_JSON,
   readSettings,
@@ -56,7 +57,7 @@ export function createOverviewRouter({ state }) {
         },
       );
       child.on('error', (err) => {
-        console.error('[dashboard] restart spawn failed:', err.message);
+        logError('restart spawn failed', { module: 'overview', err: err.message });
       });
       child.unref();
       process.exit(0);

package/bizar-dash/src/server/routes-v2/events.mjs

@@ -14,10 +14,24 @@
  */
 
 import express from 'express';
+import { createRateLimiter } from '../lib/rate-limit.mjs';
 
 export function createV2EventsRouter({ eventBus }) {
   const router = express.Router();
 
+  // v4.8.0 — Per-IP token bucket. The v2 event endpoint accepts
+  // arbitrary publishes from the opencode plugin, so we cap it
+  // higher than chat to keep automation pipelines flowing under
+  // burst. Defaults: 120 requests / minute / IP, 2 tokens/sec refill.
+  // Operators can tune via BIZAR_RATE_LIMIT_EVENT_CAPACITY /
+  // BIZAR_RATE_LIMIT_EVENT_REFILL.
+  const eventLimiter = createRateLimiter({
+    capacity: parseInt(process.env.BIZAR_RATE_LIMIT_EVENT_CAPACITY || '120', 10),
+    refillPerSecond: parseFloat(process.env.BIZAR_RATE_LIMIT_EVENT_REFILL || '2'),
+    scope: 'event',
+  });
+  router.use(eventLimiter);
+
   router.get('/event', (req, res) => {
     res.status(200);
     res.setHeader('Content-Type', 'text/event-stream');

package/bizar-dash/src/server/schedules-runner.mjs

@@ -23,6 +23,7 @@ import { homedir } from 'node:os';
 import { isIP } from 'node:net';
 import { projectsStore } from './projects-store.mjs';
 import { schedulesStore } from './schedules-store.mjs';
+import { Cron } from 'croner';
 
 const HOME = homedir();
 const LOG_DIR = join(HOME, '.config', 'bizar');
@@ -30,6 +31,97 @@ const LOG_FILE = join(LOG_DIR, 'service.log');
 const ALLOW_PRIVATE_WEBHOOKS = process.env.BIZAR_DASHBOARD_ALLOW_PRIVATE_WEBHOOKS === '1';
 const SHELL_META = /[;&|`$<>\n\r]/;
 
+// ── Internal schedules ─────────────────────────────────────────────────────
+//
+// v4.8.0 — Builtin schedules registered at module load. These are NOT
+// persisted in the schedules-store; they live in-memory here and are
+// checked alongside the project schedules during tick(). When a builtin
+// schedule fires, the runner dispatches directly to the handler without
+// going through the task delegator or action runner.
+
+/** @type {Array<{ id: string, name: string, schedule: string, type: string, timezone: string, enabled: boolean, builtin: boolean, handler?: Function, lastRun: string|null, nextRun: string|null }>} */
+const internalSchedules = [];
+
+/**
+ * Register an internal schedule that is evaluated during tick().
+ *
+ * @param {object} spec
+ * @param {string} spec.id
+ * @param {string} spec.name
+ * @param {string} spec.cron      — cron expression
+ * @param {string} [spec.timezone='UTC']
+ * @param {Function} [spec.handler] — optional direct-call handler for builtin schedules
+ */
+export function registerInternalSchedule(spec) {
+  const tz = spec.timezone || 'UTC';
+  let nextRun = null;
+  if (spec.cron) {
+    try {
+      const job = new Cron(spec.cron, { timezone: tz });
+      const n = job.nextRun();
+      nextRun = n ? n.toISOString() : null;
+    } catch { /* invalid cron */ }
+  }
+  // Remove existing entry with same id (for hot-reload)
+  const existing = internalSchedules.findIndex((s) => s.id === spec.id);
+  const entry = {
+    id: spec.id,
+    name: spec.name || spec.id,
+    schedule: spec.cron || '',
+    type: 'cron',
+    timezone: tz,
+    enabled: true,
+    builtin: true,
+    handler: spec.handler || null,
+    lastRun: null,
+    nextRun,
+  };
+  if (existing >= 0) {
+    internalSchedules[existing] = { ...internalSchedules[existing], ...entry };
+  } else {
+    internalSchedules.push(entry);
+  }
+}
+
+/**
+ * Recompute nextRun for all internal schedules (called on system clock
+ * changes or after midnight).
+ */
+export function recomputeInternalSchedules() {
+  for (const s of internalSchedules) {
+    if (s.type === 'cron' && s.schedule) {
+      try {
+        const job = new Cron(s.schedule, { timezone: s.timezone || 'UTC' });
+        const n = job.nextRun();
+        s.nextRun = n ? n.toISOString() : null;
+      } catch {
+        s.nextRun = null;
+      }
+    }
+  }
+}
+
+// v4.8.0 — Auto-register the weekly digest cron at module load.
+registerInternalSchedule({
+  id: 'bizar-internal-weekly-digest',
+  name: 'Weekly digest',
+  cron: '0 0 * * 0',
+  timezone: 'UTC',
+  handler: async () => {
+    logLine('[digest] Weekly digest cron fired — generating…');
+    try {
+      const { generateAndSave } = await import('./digest-store.mjs');
+      const projectRoot = process.env.BIZAR_PROJECT_ROOT || process.cwd();
+      const result = await generateAndSave({ projectRoot });
+      logLine(`[digest] Weekly digest generated: ${result.weekStart} (${result.saveResult.paths.length} file(s))`);
+      return { ok: true, result };
+    } catch (err) {
+      logLine(`[digest] Weekly digest generation failed: ${err.message}`);
+      return { ok: false, error: err.message };
+    }
+  },
+});
+
 function logLine(line) {
   try {
     mkdirSync(LOG_DIR, { recursive: true });
@@ -292,6 +384,8 @@ export const schedulesRunner = {
       console.warn('swallowed in schedules due-list:', err.message);
     }
     let skipped = 0;
+
+    // Project schedules
     for (const projectId of projectIds) {
       const due = schedulesStore.due(projectId, Date.now());
       for (const sched of due) {
@@ -300,6 +394,38 @@ export const schedulesRunner = {
         fired.push({ projectId, scheduleId: sched.id, ...result });
       }
     }
+
+    // v4.8.0 — Internal (builtin) schedules
+    const now = Date.now();
+    for (const sched of internalSchedules) {
+      if (!sched.enabled) continue;
+      if (!sched.nextRun) continue;
+      if (new Date(sched.nextRun).getTime() > now) continue;
+      const startedAt = new Date().toISOString();
+      logLine(`[${startedAt}] run internal ${sched.id} (${sched.name})`);
+      try {
+        if (typeof sched.handler === 'function') {
+          const res = await sched.handler();
+          sched.lastRun = new Date().toISOString();
+          // Recompute nextRun
+          if (sched.schedule) {
+            try {
+              const job = new Cron(sched.schedule, { timezone: sched.timezone || 'UTC' });
+              const n = job.nextRun();
+              sched.nextRun = n ? n.toISOString() : null;
+            } catch {
+              sched.nextRun = null;
+            }
+          }
+          logLine(`[${new Date().toISOString()}] done internal ${sched.id} → ${res.ok ? 'success' : 'error'}`);
+          fired.push({ projectId: 'internal', scheduleId: sched.id, ok: res.ok, runResult: res });
+        }
+      } catch (err) {
+        logLine(`[${new Date().toISOString()}] failed internal ${sched.id}: ${err.message}`);
+        fired.push({ projectId: 'internal', scheduleId: sched.id, ok: false, runResult: { error: err.message } });
+      }
+    }
+
     if (skipped > 0) {
       logLine(`[schedule] tick: ${skipped} skipped by budget pre-flight`);
     }

package/bizar-dash/src/server/server.mjs

@@ -39,6 +39,22 @@ import { buildAllowedRootsFromSettings, resolveSafePath } from './lib/path-safe.
 import { V2EventBus } from './v2-event-bus.mjs';
 import { loadOrCreateAuth, V2_DEFAULT_PORT } from './v2-auth-file.mjs';
 import { createV2Router } from './routes-v2/index.mjs';
+import { counter, gauge, render as renderMetrics } from './metrics.mjs';
+import { warn } from './logger.mjs';
+
+// v4.7.0 — Prometheus-style HTTP metrics. Bound to the server-wide
+// registry; render() emits the text exposition format consumed by
+// `GET /metrics`. Counter is keyed by {method, route, status} where
+// `route` is the matched Express pattern (e.g. `/api/tasks/:id`) to
+// keep cardinality bounded; unmatched 404s collapse to `unmatched`.
+const httpRequestsTotal = counter(
+  'http_requests_total',
+  'Count of HTTP requests handled by the dashboard server.',
+);
+const wsClientsGauge = gauge(
+  'ws_clients',
+  'Number of currently-connected WebSocket clients (snapshot + /ws/logs).',
+);
 
 let processHandlersInstalled = false;
 let v2Bus = null;
@@ -161,6 +177,62 @@ export async function createServer({
     next();
   });
 
+  // v4.7.0 — Prometheus scrape endpoint. Mounted BEFORE the auth
+  // middleware and OUTSIDE /api/* so scrapers don't need a bearer
+  // token. Returns text/plain in the standard 0.0.4 exposition
+  // format so both Prometheus and `curl http://host/metrics` work.
+  app.get('/metrics', (_req, res) => {
+    res.set('Content-Type', 'text/plain; version=0.0.4; charset=utf-8');
+    res.send(renderMetrics());
+  });
+
+  // v4.7.0 — Per-request counter. Uses the matched Express route
+  // pattern (e.g. `/api/tasks/:id`) when available; falls back to
+  // `unmatched` for 404s so the cardinality stays bounded. Hooked off
+  // `finish` so the final status code is captured even after error
+  // handlers run.
+  //
+  // v4.8.0 — When the status is 429, also emit a structured warning
+  // so operators can see when an IP is being throttled. The scope
+  // comes from the X-RateLimit-Scope header set by the per-route
+  // limiter middleware (chat / event); if no scope header is
+  // present, log the 429 with scope=unknown (it may be an upstream
+  // 429 proxied from the opencode plugin).
+  app.use((req, res, next) => {
+    res.on('finish', () => {
+      const route = req.route?.path ? `${req.baseUrl || ''}${req.route.path}` : 'unmatched';
+      httpRequestsTotal.inc({
+        method: req.method,
+        route,
+        status: String(res.statusCode),
+      });
+      if (res.statusCode === 429) {
+        const scope = res.getHeader('X-RateLimit-Scope') || 'unknown';
+        warn('rate_limit_exceeded', {
+          ip: req.ip || (req.socket && req.socket.remoteAddress) || 'unknown',
+          scope,
+          method: req.method,
+          route,
+        });
+      }
+    });
+    next();
+  });
+
+  // v4.7.0 — Cache-Control headers for live JSON endpoints. The
+  // frontend pulls these every few seconds, so we use `no-cache` (which
+  // allows conditional revalidation) rather than `no-store` (which
+  // forbids it). Static assets already get `max-age=1y` via
+  // express.static above; this only fills the gap for the live API.
+  app.use('/api/settings', (req, res, next) => {
+    res.setHeader('Cache-Control', 'no-cache');
+    next();
+  });
+  app.use('/api/snapshot', (req, res, next) => {
+    res.setHeader('Cache-Control', 'no-cache');
+    next();
+  });
+
   app.use(
     (
       err,
@@ -519,9 +591,16 @@ export async function createServer({
 
   wss.on('connection', (ws, req) => {
     ws.isAlive = true;
+    wsClientsGauge.set(wss.clients.size);
     ws.on('pong', () => {
       ws.isAlive = true;
     });
+    ws.on('close', () => {
+      wsClientsGauge.set(wss.clients.size);
+    });
+    ws.on('error', () => {
+      wsClientsGauge.set(wss.clients.size);
+    });
     const path = req.url
       ? (() => {
           try {

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

@@ -715,6 +715,13 @@ function Shell() {
 
   return (
     <div className="app" data-layout={layout} data-active-tab={activeTab}>
+      {/* v4.8.0 — WCAG 2.2 AA: skip-to-main-content link. Hidden visually
+          until focused; clicking moves keyboard focus past the nav into
+          the active view. Screen readers and keyboard users can jump
+          past the topbar + sidebar without tabbing through every tab. */}
+      <a className="skip-to-main" href="#main-content">
+        Skip to main content
+      </a>
       {showHeader && (
         <Topbar
           activeTab={activeTab}
@@ -769,7 +776,7 @@ function Shell() {
             onTabChange={setActiveTab}
           />
         )}
-        <main className="content">
+        <main className="content" id="main-content" tabIndex={-1}>
           {bootError && (
             <div className="boot-error">
               <h2>Dashboard unavailable</h2>

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

@@ -0,0 +1,330 @@
+// src/web/components/BackupRestore.tsx — v4.8.0 Backup/restore card for Settings.
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { Download, Upload, Trash2, RefreshCw, CheckCircle, AlertCircle, Archive } from 'lucide-react';
+import { Button } from './Button';
+import { Card, CardTitle, CardMeta } from './Card';
+import { useModal } from './Modal';
+import { useToast } from './Toast';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+
+type BackupEntry = {
+  path: string;
+  name: string;
+  createdAt: string;
+  sizeBytes: number;
+  sizeFormatted: string;
+  manifest: {
+    version?: string;
+    createdAt?: string;
+    label?: string;
+    paths?: string[];
+  } | null;
+};
+
+type RestoreResult = {
+  ok: boolean;
+  restored: string[];
+  skipped: string[];
+  errors: string[];
+};
+
+function RestoreDialog({
+  backup,
+  onClose,
+}: {
+  backup: BackupEntry;
+  onClose: () => void;
+}) {
+  const toast = useToast();
+  const [dryRun, setDryRun] = useState(true);
+  const [strategy, setStrategy] = useState<'overwrite' | 'merge' | 'skip'>('merge');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<RestoreResult | null>(null);
+
+  const doRestore = async () => {
+    setLoading(true);
+    setResult(null);
+    try {
+      const r = await api.post<RestoreResult>('/backup/restore', {
+        backupPath: backup.path,
+        dryRun,
+        conflictStrategy: strategy,
+      });
+      setResult(r);
+      if (!r.ok && r.errors.length > 0) {
+        toast.error(`Restore completed with errors.`);
+      } else if (r.ok && !dryRun) {
+        toast.success('Restore complete.');
+        onClose();
+      }
+    } catch (err) {
+      toast.error(`Restore failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {backup.manifest && (
+        <div style={{ fontSize: 12, color: 'var(--text-muted, #8b949e)' }}>
+          <p><strong>Created:</strong> {new Date(backup.createdAt).toLocaleString()}</p>
+          <p><strong>Version:</strong> {backup.manifest.version || 'unknown'}</p>
+          <p><strong>Contents:</strong> {backup.manifest.paths?.join(', ') || 'unknown'}</p>
+          {backup.manifest.label && <p><strong>Label:</strong> {backup.manifest.label}</p>}
+        </div>
+      )}
+
+      <label className="checkbox-row">
+        <input
+          type="checkbox"
+          checked={dryRun}
+          onChange={(e) => setDryRun(e.target.checked)}
+        />
+        <span>Dry-run (preview only — no files will be modified)</span>
+      </label>
+
+      <div className="field">
+        <label className="field-label">Conflict strategy</label>
+        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6 }}>
+          {(['overwrite', 'merge', 'skip'] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={cn('theme-card', strategy === s && 'theme-card-active')}
+              onClick={() => setStrategy(s)}
+            >
+              <span className="theme-card-label" style={{ fontSize: 12 }}>
+                {s === 'overwrite' ? 'Replace all' : s === 'merge' ? 'Merge (newer wins)' : 'Skip existing'}
+              </span>
+            </button>
+          ))}
+        </div>
+        <p className="field-help">
+          {strategy === 'overwrite' && 'Replace every file in the backup — existing files will be overwritten.'}
+          {strategy === 'merge' && 'Copy newer files from backup over existing files. Existing files are kept if they are newer.'}
+          {strategy === 'skip' && 'Only create files that don\'t already exist. Existing files are never modified.'}
+        </p>
+      </div>
+
+      {result && (
+        <div style={{ fontSize: 12, padding: 12, background: 'var(--surface-2, #161b22)', borderRadius: 8 }}>
+          {result.restored.length > 0 && (
+            <p style={{ color: 'var(--success, #3fb950)' }}>
+              <CheckCircle size={12} style={{ display: 'inline', marginRight: 4 }} />
+              Restored: {result.restored.join(', ')}
+            </p>
+          )}
+          {result.skipped.length > 0 && (
+            <p style={{ color: 'var(--text-muted, #8b949e)' }}>
+              Skipped: {result.skipped.join(', ')}
+            </p>
+          )}
+          {result.errors.length > 0 && (
+            <p style={{ color: 'var(--error, #f85149)' }}>
+              <AlertCircle size={12} style={{ display: 'inline', marginRight: 4 }} />
+              Errors: {result.errors.join(', ')}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="modal-footer-actions">
+        <Button variant="ghost" onClick={onClose}>Cancel</Button>
+        <Button
+          variant="primary"
+          disabled={loading}
+          onClick={doRestore}
+        >
+          {loading ? <span className="btn-spinner" /> : null}
+          {dryRun ? 'Preview restore' : 'Restore'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function BackupRestoreCard() {
+  const toast = useToast();
+  const modal = useModal();
+  const [backups, setBackups] = useState<BackupEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [label, setLabel] = useState('');
+
+  const loadBackups = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await api.get<{ ok: boolean; backups: BackupEntry[] }>('/backup/list');
+      setBackups(r.backups || []);
+    } catch (err) {
+      toast.error(`Load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => { loadBackups(); }, [loadBackups]);
+
+  const onCreate = async () => {
+    setCreating(true);
+    try {
+      const r = await api.post<{ ok: boolean; path: string; sizeBytes: number; durationMs: number }>('/backup/create', {
+        label: label.trim() || null,
+      });
+      if (r.ok) {
+        toast.success('Backup created.');
+        setLabel('');
+        await loadBackups();
+      } else {
+        toast.error('Backup failed.');
+      }
+    } catch (err) {
+      toast.error(`Create failed: ${(err as Error).message}`);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const onVerify = async (backup: BackupEntry) => {
+    try {
+      const r = await api.post<{ ok: boolean; issues: string[] }>('/backup/verify', {
+        backupPath: backup.path,
+      });
+      if (r.ok) {
+        toast.success('Backup is valid.');
+      } else {
+        toast.error(`Backup has issues: ${r.issues.join(', ')}`);
+      }
+    } catch (err) {
+      toast.error(`Verify failed: ${(err as Error).message}`);
+    }
+  };
+
+  const onDelete = async (backup: BackupEntry) => {
+    if (!confirm(`Delete backup?\n\n${backup.path}\n\nThis cannot be undone.`)) return;
+    try {
+      const encoded = encodeURIComponent(backup.path);
+      await api.del(`/backup/${encoded}`);
+      toast.success('Backup deleted.');
+      await loadBackups();
+    } catch (err) {
+      toast.error(`Delete failed: ${(err as Error).message}`);
+    }
+  };
+
+  const onRestore = (backup: BackupEntry) => {
+    modal.open({
+      title: `Restore backup`,
+      children: <RestoreDialog backup={backup} onClose={() => modal.close()} />,
+      width: 520,
+    });
+  };
+
+  const recent = backups.slice(0, 10);
+
+  return (
+    <Card id="settings-backup" data-section="backup">
+      <CardTitle><Archive size={14} /> Backup &amp; Restore</CardTitle>
+      <CardMeta>
+        Snapshot your BizarHarness config, memory, and usage logs.
+        Backups are stored under <code>~/.local/share/bizar/backups/</code>.
+      </CardMeta>
+
+      {/* Create backup */}
+      <div style={{ display: 'flex', gap: 8, marginTop: 12, marginBottom: 16, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+        <div className="field" style={{ flex: '1 1 200px', margin: 0 }}>
+          <label className="field-label" htmlFor="backup-label" style={{ fontSize: 12 }}>
+            Label <span className="muted">(optional)</span>
+          </label>
+          <input
+            id="backup-label"
+            type="text"
+            className="input"
+            placeholder="e.g. before-upgrade"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') onCreate(); }}
+            style={{ fontSize: 13 }}
+          />
+        </div>
+        <Button variant="primary" onClick={onCreate} disabled={creating}>
+          {creating ? <span className="btn-spinner" /> : <Download size={14} />}
+          {creating ? 'Creating…' : 'Create backup'}
+        </Button>
+      </div>
+
+      {/* Backup list */}
+      {loading ? (
+        <div className="muted" style={{ fontSize: 12, padding: '12px 0' }}>Loading backups…</div>
+      ) : recent.length === 0 ? (
+        <div className="muted" style={{ fontSize: 12, padding: '12px 0' }}>
+          No backups yet. Create one to protect your configuration.
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {recent.map((b) => (
+            <div
+              key={b.path}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '8px 10px',
+                borderRadius: 6,
+                border: '1px solid var(--border, #30363d)',
+                background: 'var(--surface-2, #161b22)',
+                flexWrap: 'wrap',
+              }}
+            >
+              <div style={{ flex: '1 1 200px', minWidth: 0 }}>
+                <div style={{ fontSize: 12, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {b.name}
+                </div>
+                <div style={{ fontSize: 11, color: 'var(--text-muted, #8b949e)' }}>
+                  {new Date(b.createdAt).toLocaleString()} · {b.sizeFormatted}
+                  {b.manifest?.label && <> · <em>{b.manifest.label}</em></>}
+                  {b.manifest?.version && <> · v{b.manifest.version}</>}
+                </div>
+              </div>
+              <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={() => onRestore(b)}
+                  title="Restore from this backup"
+                >
+                  <Upload size={12} /> Restore
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onVerify(b)}
+                  title="Verify backup integrity"
+                >
+                  <RefreshCw size={12} />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onDelete(b)}
+                  title="Delete this backup"
+                  style={{ color: 'var(--error, #f85149)' }}
+                >
+                  <Trash2 size={12} />
+                </Button>
+              </div>
+            </div>
+          ))}
+          {backups.length > 10 && (
+            <div style={{ fontSize: 11, color: 'var(--text-muted, #8b949e)', textAlign: 'center', padding: '4px 0' }}>
+              + {backups.length - 10} older backup{backups.length - 10 === 1 ? '' : 's'}
+            </div>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}

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

@@ -128,8 +128,8 @@ export function SearchModal({ open, onClose, onSelect }: Props) {
   return (
     <div className="search-modal-backdrop" onClick={onClose}>
       <div className="search-modal" role="dialog" aria-modal="true" aria-labelledby="search-modal-title" onClick={(e) => e.stopPropagation()}>
-        <div className="search-modal-head">
-          <Search size={14} />
+        <div className="search-modal-head" role="search">
+          <Search size={14} aria-hidden />
           <span id="search-modal-title" className="sr-only">Search</span>
           <input
             ref={inputRef}
@@ -138,6 +138,7 @@ export function SearchModal({ open, onClose, onSelect }: Props) {
             value={q}
             onChange={(e) => setQ(e.target.value)}
             onKeyDown={onKey}
+            aria-label="Search"
           />
           <button
             type="button"
@@ -148,11 +149,13 @@ export function SearchModal({ open, onClose, onSelect }: Props) {
             <X size={14} />
           </button>
         </div>
-        <div className="search-modal-scopes">
+        <div className="search-modal-scopes" role="tablist" aria-label="Search scope">
           {SCOPES.map((s) => (
             <button
               key={s.id}
               type="button"
+              role="tab"
+              aria-selected={scope === s.id}
               className={cn('search-scope', scope === s.id && 'search-scope-active')}
               onClick={() => setScope(s.id)}
             >