@polderlabs/bizar 4.8.0 → 5.0.0

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

@@ -0,0 +1,158 @@
+// src/web/components/WorkspaceSelector.tsx — v5.0.0 — dropdown to switch active workspace.
+import { useState, useEffect, useRef } from 'react';
+import { ChevronDown, Check, Plus, Users } from 'lucide-react';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+import { Button } from './Button';
+
+export type WorkspaceInfo = {
+  id: string;
+  name: string;
+  role: string;
+};
+
+type Props = {
+  currentWorkspaceId: string | null;
+  onWorkspaceChange: (workspaceId: string) => void;
+};
+
+// Keep a global ref of workspaces so sibling components can refresh
+let _cachedWorkspaces: WorkspaceInfo[] = [];
+const _listeners = new Set<(ws: WorkspaceInfo[]) => void>();
+
+function notifyListeners() {
+  _listeners.forEach((fn) => fn(_cachedWorkspaces));
+}
+
+export function useWorkspaceList() {
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>(_cachedWorkspaces);
+
+  useEffect(() => {
+    _listeners.add(setWorkspaces);
+    return () => { _listeners.delete(setWorkspaces); };
+  }, []);
+
+  return workspaces;
+}
+
+async function fetchWorkspaces(): Promise<WorkspaceInfo[]> {
+  try {
+    const r = await api.get<{ workspaces: Array<{ workspace: { id: string; name: string }; role: string }> }>('/workspaces');
+    const list = r.workspaces.map((w) => ({ id: w.workspace.id, name: w.workspace.name, role: w.role }));
+    _cachedWorkspaces = list;
+    notifyListeners();
+    return list;
+  } catch {
+    return [];
+  }
+}
+
+export function WorkspaceSelector({ currentWorkspaceId, onWorkspaceChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const [workspaces, setWorkspaces] = useState<WorkspaceInfo[]>(_cachedWorkspaces);
+  const [loading, setLoading] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Listen for global cache updates
+  useEffect(() => {
+    _listeners.add(setWorkspaces);
+    return () => { _listeners.delete(setWorkspaces); };
+  }, []);
+
+  useEffect(() => {
+    fetchWorkspaces().catch(() => undefined);
+  }, []);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function onOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onOutside);
+    return () => document.removeEventListener('mousedown', onOutside);
+  }, [open]);
+
+  const current = workspaces.find((w) => w.id === currentWorkspaceId) || workspaces[0];
+  const canManage = current && (current.role === 'admin');
+
+  const handleSelect = async (wsId: string) => {
+    setOpen(false);
+    if (wsId === currentWorkspaceId) return;
+    onWorkspaceChange(wsId);
+  };
+
+  const handleRefresh = async () => {
+    setLoading(true);
+    await fetchWorkspaces();
+    setLoading(false);
+  };
+
+  return (
+    <div className="workspace-selector" ref={ref}>
+      <button
+        type="button"
+        className={cn('workspace-selector-trigger', open && 'workspace-selector-open')}
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        title={current?.name || 'Select workspace'}
+      >
+        <Users size={14} />
+        <span className="workspace-selector-label">{current?.name || 'Workspace'}</span>
+        {canManage && <ChevronDown size={12} className={cn('workspace-selector-chevron', open && 'workspace-selector-chevron-open')} />}
+      </button>
+
+      {open && (
+        <div className="workspace-selector-dropdown" role="menu">
+          <div className="workspace-selector-header">
+            <span className="workspace-selector-title">Workspaces</span>
+            <Button
+              variant="ghost"
+              size="sm"
+              iconOnly
+              onClick={handleRefresh}
+              loading={loading}
+              title="Refresh workspaces"
+            >
+              <span style={{ transform: 'rotate(90deg)' }}>⟳</span>
+            </Button>
+          </div>
+
+          <div className="workspace-selector-list">
+            {workspaces.length === 0 && (
+              <div className="workspace-selector-empty">No workspaces</div>
+            )}
+            {workspaces.map((ws) => (
+              <button
+                key={ws.id}
+                type="button"
+                className={cn('workspace-selector-item', ws.id === currentWorkspaceId && 'workspace-selector-item-active')}
+                onClick={() => handleSelect(ws.id)}
+                role="menuitem"
+              >
+                <span className="workspace-selector-item-name">{ws.name}</span>
+                <span className={cn('workspace-selector-item-role', `role-${ws.role}`)}>{ws.role}</span>
+                {ws.id === currentWorkspaceId && <Check size={12} className="workspace-selector-item-check" />}
+              </button>
+            ))}
+          </div>
+
+          <div className="workspace-selector-footer">
+            <button
+              type="button"
+              className="workspace-selector-create"
+              onClick={() => {
+                setOpen(false);
+                // Trigger creation flow — emit a custom event that Workspace.tsx listens for
+                window.dispatchEvent(new CustomEvent('bizar:workspace:create'));
+              }}
+            >
+              <Plus size={12} />
+              New workspace
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/lib/search.ts

@@ -0,0 +1,115 @@
+// src/web/lib/search.ts — fuzzy search with typo tolerance (Levenshtein distance).
+// Provides SearchableItem/SearchResult types and a fuzzySearch function for
+// settings, commands, and any structured UI search.
+
+export interface SearchableItem {
+  key: string;
+  label: string;
+  section: string;
+  value?: string | number | boolean;
+  description?: string;
+}
+
+export interface SearchResult extends SearchableItem {
+  score: number;
+  matchedField: 'label' | 'value' | 'description';
+  matchedTerm: string;
+}
+
+/**
+ * Levenshtein distance for typo tolerance.
+ */
+export function levenshtein(a: string, b: string): number {
+  const alen = a.length;
+  const blen = b.length;
+  const matrix: number[][] = Array.from({ length: blen + 1 }, () => Array(alen + 1).fill(0));
+  for (let i = 0; i <= alen; i++) matrix[0][i] = i;
+  for (let j = 0; j <= blen; j++) matrix[j][0] = j;
+  for (let j = 1; j <= blen; j++) {
+    for (let i = 1; i <= alen; i++) {
+      const indicator = a[i - 1] === b[j - 1] ? 0 : 1;
+      matrix[j][i] = Math.min(
+        matrix[j][i - 1] + 1,
+        matrix[j - 1][i] + 1,
+        matrix[j - 1][i - 1] + indicator,
+      );
+    }
+  }
+  return matrix[blen][alen];
+}
+
+/**
+ * Score a single field against the query.
+ * Returns a numeric score (higher = better match) or 0 if no match.
+ *
+ * Scoring tiers (mutually exclusive — first match wins):
+ *   100 — exact field match (query === field)
+ *    90 — field starts with query (prefix match)
+ *    80 — a word in the field starts with query (word boundary)
+ *    40 — typo-tolerant match (Levenshtein ≤ 2 against the first query.length chars)
+ *    30 — substring match anywhere in field (fallback)
+ */
+export function scoreField(query: string, field: string): number {
+  // Exact match
+  if (field === query) return 100;
+
+  // Field prefix match (field starts with query)
+  if (field.startsWith(query)) return 90;
+
+  // Word boundary match (any word starts with query)
+  const words = field.split(/\s+/);
+  for (const word of words) {
+    if (word.startsWith(query)) return 80;
+  }
+
+  // Typo tolerance: compare query against first query.length chars of field
+  const compareLen = Math.min(query.length, field.length);
+  const dist = levenshtein(query, field.substring(0, compareLen));
+  if (dist <= 2) return 40;
+
+  // Substring match (anywhere)
+  if (field.includes(query)) return 30;
+
+  return 0;
+}
+
+/**
+ * Fuzzy search over an array of SearchableItem.
+ * Returns results sorted by descending score. Empty query returns [].
+ */
+export function fuzzySearch(query: string, items: SearchableItem[]): SearchResult[] {
+  const q = query.toLowerCase().trim();
+  if (!q) return [];
+
+  return items
+    .map((item) => {
+      const labelScore = scoreField(q, item.label.toLowerCase());
+      const valueScore = item.value ? scoreField(q, String(item.value).toLowerCase()) : 0;
+      const descScore = item.description ? scoreField(q, item.description.toLowerCase()) : 0;
+
+      const max = Math.max(labelScore, valueScore, descScore);
+      if (max === 0) return null;
+
+      const matchedField: SearchResult['matchedField'] =
+        labelScore >= valueScore && labelScore >= descScore
+          ? 'label'
+          : valueScore >= labelScore && valueScore >= descScore
+            ? 'value'
+            : 'description';
+      const matchedTerm =
+        matchedField === 'label'
+          ? item.label
+          : matchedField === 'value'
+            ? String(item.value)
+            : item.description!;
+
+      return {
+        ...item,
+        score: max,
+        matchedField,
+        matchedTerm,
+      };
+    })
+    .filter((r): r is SearchResult => r !== null)
+    .sort((a, b) => b.score - a.score);
+}

package/bizar-dash/src/web/mobile/views/MobileSettings.tsx

@@ -1,9 +1,9 @@
 // src/mobile/views/MobileSettings.tsx — mobile settings with full desktop parity.
 import { useEffect, useState } from 'react';
-import { QrCode, RefreshCw, Smartphone, Sun, Moon, Monitor, Save } from 'lucide-react';
-import { QRCodeSVG } from 'qrcode.react';
+import { Smartphone, Sun, Moon, Monitor, Save } from 'lucide-react';
 import { api } from '../../lib/api';
 import { applyTheme, applyThemeTokens, type Settings, type Snapshot, type ThemeName } from '../../lib/types';
+import { QrCodePanel } from './QrCodePanel';
 
 type Props = {
   settings: Settings;
@@ -30,21 +30,12 @@ const PRESET_ACCENTS = [
   { name: 'Mono', accent: '#6b7280' },
 ];
 
-function formatCountdown(ms: number): string {
-  if (ms <= 0) return 'expired';
-  const s = Math.floor(ms / 1000);
-  const m = Math.floor(s / 60);
-  const r = s % 60;
-  return `${m}:${String(r).padStart(2, '0')}`;
-}
-
 export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props) {
   const [settings, setSettings] = useState<Settings>(initial);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [pair, setPair] = useState<PairSession | null>(null);
   const [pairing, setPairing] = useState(false);
-  const [now, setNow] = useState(Date.now());
 
   useEffect(() => {
     setSettings(initial);
@@ -52,12 +43,6 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
     if (initial.theme) applyThemeTokens(initial.theme);
   }, [initial]);
 
-  useEffect(() => {
-    if (!pair) return;
-    const t = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(t);
-  }, [pair]);
-
   const patchTheme = (patch: Partial<Settings['theme']>) => {
     setSettings((cur) => {
       const next = { ...cur, theme: { ...cur.theme, ...patch } };
@@ -101,8 +86,8 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
     }
   };
 
-  const remaining = pair ? pair.expiresAt - now : 0;
-  const expired = pair != null && remaining <= 0;
+  // remaining/expired are now managed inside QrCodePanel to keep
+  // qrcode.react out of the main mobile bundle chunk.
 
   return (
     <div className="mobile-view">
@@ -332,24 +317,14 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
         <div className="mobile-card">
           {!pair && (
             <button type="button" className="mobile-btn" onClick={startPair} disabled={pairing} style={{ width: '100%' }}>
-              <QrCode size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
+              <Smartphone size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
             </button>
           )}
-          {pair && !expired && (
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ background: '#fff', padding: 12, borderRadius: 12, display: 'inline-block' }}>
-                <QRCodeSVG value={pair.qrPayload} size={180} level="M" />
-              </div>
-              <div style={{ marginTop: 8, fontSize: 12 }}>
-                Expires in <strong>{formatCountdown(remaining)}</strong>
-              </div>
-              <div className="mono" style={{ fontSize: 10, wordBreak: 'break-all', marginTop: 4 }}>{pair.publicUrl}</div>
-            </div>
-          )}
-          {pair && expired && (
-            <button type="button" className="mobile-btn" onClick={startPair} style={{ width: '100%' }}>
-              <RefreshCw size={14} /> Generate new QR
-            </button>
+          {pair && (
+            <QrCodePanel
+              pair={pair}
+              onStart={startPair}
+            />
           )}
         </div>
       </section>

package/bizar-dash/src/web/mobile/views/QrCodePanel.tsx

@@ -0,0 +1,69 @@
+// src/mobile/views/QrCodePanel.tsx — lazy-loaded QR code panel.
+// Split from MobileSettings to keep qrcode.react (~30 KB) out of the
+// mobile entry chunk; it is only loaded when the user navigates to
+// the Companion App section and taps "Generate QR Code".
+import { useEffect, useState } from 'react';
+import { RefreshCw } from 'lucide-react';
+
+type PairSession = { token: string; qrPayload: string; publicUrl: string; expiresAt: number };
+
+function formatCountdown(ms: number): string {
+  if (ms <= 0) return 'expired';
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  const r = s % 60;
+  return `${m}:${String(r).padStart(2, '0')}`;
+}
+
+export function QrCodePanel({ pair, onStart }: {
+  pair: PairSession;
+  onStart: () => void;
+}) {
+  const [QRCodeSVG, setQRCodeSVG] = useState<React.ComponentType<{ value: string; size: number; level: string }> | null>(null);
+  const [remaining, setRemaining] = useState(() => pair.expiresAt - Date.now());
+  const expired = remaining <= 0;
+
+  useEffect(() => {
+    import('qrcode.react').then((mod) => {
+      setQRCodeSVG(mod.QRCodeSVG as React.ComponentType<{ value: string; size: number; level: string }>);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!pair) return;
+    const tick = setInterval(() => {
+      setRemaining(pair.expiresAt - Date.now());
+    }, 1000);
+    return () => clearInterval(tick);
+  }, [pair]);
+
+  if (!QRCodeSVG) {
+    return (
+      <div style={{ textAlign: 'center', padding: '16px' }}>
+        <span style={{ color: 'var(--text-dim)', fontSize: 13 }}>Loading QR library…</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ background: '#fff', padding: 12, borderRadius: 12, display: 'inline-block' }}>
+        <QRCodeSVG value={pair.qrPayload} size={180} level="M" />
+      </div>
+      <div style={{ marginTop: 8, fontSize: 12 }}>
+        Expires in <strong>{formatCountdown(remaining)}</strong>
+      </div>
+      <div className="mono" style={{ fontSize: 10, wordBreak: 'break-all', marginTop: 4 }}>{pair.publicUrl}</div>
+      {expired && (
+        <button
+          type="button"
+          className="mobile-btn"
+          onClick={onStart}
+          style={{ marginTop: 12, width: '100%' }}
+        >
+          <RefreshCw size={14} /> Generate new QR
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -952,4 +952,169 @@ dl.memory-config-row dd {
 
 .memory-status-card-sub {
   font-size: 11px;
-}
+}
+
+/* ── Memory Graph ─────────────────────────────────────────────────────── */
+
+.memory-graph-canvas {
+  display: block;
+  background: var(--bg, #0b0e14);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius, 8px);
+  user-select: none;
+}
+
+.memory-graph-canvas-svg {
+  height: 480px;
+}
+
+.memory-graph-node {
+  transition: opacity var(--motion-fast, 120ms);
+}
+
+.memory-graph-node:hover circle {
+  opacity: 1;
+}
+
+.memory-graph-tooltip {
+  position: absolute;
+  padding: 6px 10px;
+  background: var(--bg-elev, #12161f);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius-sm, 6px);
+  font-size: 12px;
+  color: var(--text, #c9d1d9);
+  pointer-events: none;
+  z-index: 10;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.memory-graph-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.memory-graph-search-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.memory-graph-legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.memory-graph-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-dim, #b4bcd0);
+}
+
+.memory-graph-legend-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.memory-graph-stats {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text, #c9d1d9);
+}
+
+/* ── Voice Notes ─────────────────────────────────────────────────────────── */
+
+.voice-recorder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.voice-recorder-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.voice-note-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.voice-note-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--bg-elev, #12161f);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius, 8px);
+  transition: border-color var(--motion-fast, 120ms);
+}
+
+.voice-note-card:hover {
+  border-color: var(--border-strong, #2d3648);
+}
+
+.voice-note-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.voice-note-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--text-dim, #b4bcd0);
+}
+
+.voice-note-date {
+  font-family: var(--font-mono, monospace);
+}
+
+.voice-note-duration {
+  font-family: var(--font-mono, monospace);
+  padding: 1px 6px;
+  background: var(--bg-elev-2, #1a1f2b);
+  border-radius: 4px;
+}
+
+.voice-note-card-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.voice-note-transcript {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text, #c9d1d9);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.voice-note-no-transcript {
+  margin: 0;
+  font-style: italic;
+}

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

@@ -77,6 +77,86 @@
   min-width: 0;
 }
 
+/* ─── Setting flash animation (quick-jump highlight) ─── */
+.setting-flash {
+  animation: setting-flash 2s ease-out;
+}
+
+@keyframes setting-flash {
+  0%, 100% { background-color: transparent; }
+  50% { background-color: var(--accent, rgba(139, 92, 246, 0.1)); border-radius: 6px; }
+}
+
+/* Highlight matched terms in search results */
+.settings-search-result-label mark {
+  background: var(--accent, rgba(139, 92, 246, 0.2));
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+/* Recent searches dropdown */
+.settings-search-recent {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-2);
+  z-index: 100;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.settings-search-recent-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 2px;
+}
+
+.settings-search-recent-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+.settings-search-recent-clear {
+  font-size: 10px;
+  color: var(--accent-2);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.settings-search-recent-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--motion-fast);
+}
+
+.settings-search-recent-item:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
 /* Search within settings */
 .settings-search {
   position: relative;