@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,90 +0,0 @@
-// src/web/components/UsageTable.tsx
-//
-// Sortable compact table for per-model usage breakdown.
-//
-// Props:
-//   rows: PerModelRow[]
-//   sortKey: string
-//   sortDir: 'asc' | 'desc'
-//   onSort: (key: string) => void
-
-import { cn } from '../lib/utils';
-
-export type PerModelRow = {
-  providerId: string;
-  modelId: string;
-  requests: number;
-  totalTokens: number;
-  promptTokens: number;
-  completionTokens: number;
-  errors: number;
-  avgLatencyMs: number;
-};
-
-type Props = {
-  rows: PerModelRow[];
-  sortKey: string;
-  sortDir: 'asc' | 'desc';
-  onSort: (key: string) => void;
-};
-
-function SortHeader({ label, col, sortKey, sortDir, onSort }: {
-  label: string; col: string; sortKey: string; sortDir: 'asc' | 'desc'; onSort: (k: string) => void;
-}) {
-  const active = sortKey === col;
-  return (
-    <th
-      className={cn('usage-sort-header', active && 'is-active')}
-      onClick={() => onSort(col)}
-      aria-sort={active ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
-    >
-      <span>{label}</span>
-      <span className="usage-sort-icon">
-        {active ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ' ↕'}
-      </span>
-    </th>
-  );
-}
-
-export function UsageTable({ rows, sortKey, sortDir, onSort }: Props) {
-  return (
-    <div className="usage-table-wrap">
-      <table className="usage-table">
-        <thead>
-          <tr>
-            <SortHeader label="Model"        col="modelId"        sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Requests"    col="requests"        sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Prompt Tok"  col="promptTokens"    sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Compl Tok"   col="completionTokens" sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Total Tok"   col="totalTokens"     sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Avg Latency" col="avgLatencyMs"   sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-            <SortHeader label="Errors"     col="errors"          sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
-          </tr>
-        </thead>
-        <tbody>
-          {rows.length === 0 ? (
-            <tr>
-              <td colSpan={7} className="usage-table-empty">No data for this range</td>
-            </tr>
-          ) : (
-            rows.map((row) => (
-              <tr key={`${row.providerId}::${row.modelId}`}>
-                <td className="usage-table-model">
-                  <code>{row.modelId}</code>
-                </td>
-                <td className="mono">{row.requests.toLocaleString()}</td>
-                <td className="mono">{row.promptTokens.toLocaleString()}</td>
-                <td className="mono">{row.completionTokens.toLocaleString()}</td>
-                <td className="mono">{row.totalTokens.toLocaleString()}</td>
-                <td className="mono">{row.avgLatencyMs}ms</td>
-                <td className={cn('mono', row.errors > 0 && 'is-err')}>
-                  {row.errors > 0 ? row.errors : '—'}
-                </td>
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}

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

@@ -1,53 +0,0 @@
-// src/web/components/VirtualList.tsx — hand-rolled virtual scrolling (no external deps).
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-
-export function VirtualList<T>({
-  items,
-  renderItem,
-  itemHeight = 80,
-  height = 400,
-  overscan = 5,
-  className,
-}: {
-  items: T[];
-  renderItem: (item: T, index: number) => React.ReactNode;
-  itemHeight?: number;
-  height?: number;
-  overscan?: number;
-  className?: string;
-}) {
-  const [scrollTop, setScrollTop] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const visibleRange = useMemo(() => {
-    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-    const end = Math.min(
-      items.length,
-      Math.ceil((scrollTop + height) / itemHeight) + overscan,
-    );
-    return { start, end };
-  }, [scrollTop, itemHeight, height, overscan, items.length]);
-
-  const totalHeight = items.length * itemHeight;
-  const offsetY = visibleRange.start * itemHeight;
-  const visibleItems = items.slice(visibleRange.start, visibleRange.end);
-
-  return (
-    <div
-      ref={containerRef}
-      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
-      style={{ height, overflowY: 'auto' }}
-      className={className}
-    >
-      <div style={{ height: totalHeight, position: 'relative' }}>
-        <div style={{ transform: `translateY(${offsetY}px)` }}>
-          {visibleItems.map((item, i) => (
-            <div key={visibleRange.start + i} style={{ height: itemHeight }}>
-              {renderItem(item, visibleRange.start + i)}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,58 +0,0 @@
-// src/components/VisualPlanDialog.tsx — Dialog for /visual-plan command.
-
-import { Button } from './Button';
-
-type VisualPlanDialogProps = {
-  data?: Record<string, unknown>;
-  onClose: () => void;
-};
-
-export function VisualPlanDialog({ data, onClose }: VisualPlanDialogProps) {
-  const enabled = data?.enabled as boolean | undefined;
-  const previousEnabled = data?.previousEnabled as boolean | undefined;
-  const mode = data?.mode as string | undefined;
-  const defaultTemplate = data?.defaultTemplate as string | undefined;
-  const lastUsedSlug = data?.lastUsedSlug as string | null | undefined;
-
-  const wasToggled = mode === 'toggle';
-
-  return (
-    <div>
-      {wasToggled ? (
-        <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
-          Visual plan mode has been <strong>{enabled ? 'enabled' : 'disabled'}</strong>.
-          {enabled
-            ? ' The agent will create a plan and wait for your feedback on complex tasks.'
-            : ' The agent will work without a visual plan canvas.'}
-        </p>
-      ) : (
-        <div style={{ marginBottom: 16 }}>
-          <p style={{ marginBottom: 8, fontWeight: 600 }}>
-            Visual Plan: <span style={{ color: enabled ? 'var(--color-success)' : 'var(--color-muted)' }}>
-              {enabled ? 'ON' : 'OFF'}
-            </span>
-          </p>
-          <p style={{ lineHeight: 1.6, color: 'var(--color-muted)', fontSize: 13 }}>
-            When enabled, the agent creates a visual plan and waits for your feedback before proceeding with complex tasks.
-          </p>
-          {defaultTemplate && (
-            <p style={{ marginTop: 8, fontSize: 13, color: 'var(--color-muted)' }}>
-              Default template: <code>{defaultTemplate}</code>
-            </p>
-          )}
-          {lastUsedSlug && (
-            <p style={{ fontSize: 13, color: 'var(--color-muted)' }}>
-              Last used plan: <code>{lastUsedSlug}</code>
-            </p>
-          )}
-          <p style={{ marginTop: 12, fontSize: 13, color: 'var(--color-muted)' }}>
-            Use <code>/visual-plan on</code> or <code>/visual-plan off</code> to toggle.
-          </p>
-        </div>
-      )}
-      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-        <Button variant="ghost" onClick={onClose}>Close</Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,211 +0,0 @@
-// src/web/components/VoiceNotesPanel.tsx — v5.0.0
-//
-// List + record + playback for voice notes.
-// Wire into Memory tab as the "Voice Notes" source panel.
-
-import { useEffect, useState } from 'react';
-import { Play, Pause, Trash2, Search as SearchIcon, Mic } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from './Card';
-import { VoiceRecorder } from './VoiceRecorder';
-import { Button } from './Button';
-import { logger } from '../lib/logger';
-
-type VoiceNote = {
-  id: string;
-  audioPath: string;
-  notePath: string | null;
-  transcript: string | null;
-  durationSec: number | null;
-  vaultPath: string | null;
-  createdAtMs: number;
-  updatedAtMs: number;
-};
-
-type Props = {
-  /** Vault path to scope the panel to */
-  vaultPath?: string;
-  /** Key to force reload when parent refreshes */
-  refreshKey?: number;
-};
-
-function NoteCard({ note, onDelete }: { note: VoiceNote; onDelete: (id: string) => void }) {
-  const [playing, setPlaying] = useState(false);
-  const [audio] = useState(() => {
-    if (!note.audioPath) return null;
-    const a = new Audio(`/api/voice/${note.id}/audio`);
-    a.onended = () => setPlaying(false);
-    return a;
-  });
-
-  const togglePlay = () => {
-    if (!audio) return;
-    if (playing) {
-      audio.pause();
-      audio.currentTime = 0;
-      setPlaying(false);
-    } else {
-      audio.play();
-      setPlaying(true);
-    }
-  };
-
-  const created = new Date(note.createdAtMs).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-
-  return (
-    <div className="voice-note-card">
-      <div className="voice-note-card-head">
-        <div className="voice-note-card-meta">
-          <span className="voice-note-date">{created}</span>
-          {note.durationSec && (
-            <span className="voice-note-duration">{Math.round(note.durationSec)}s</span>
-          )}
-        </div>
-        <div className="voice-note-card-actions">
-          {audio && (
-            <button
-              type="button"
-              className="icon-btn"
-              onClick={togglePlay}
-              aria-label={playing ? 'Pause' : 'Play'}
-              title={playing ? 'Pause' : 'Play'}
-            >
-              {playing ? <Pause size={13} /> : <Play size={13} />}
-            </button>
-          )}
-          <button
-            type="button"
-            className="icon-btn"
-            onClick={() => onDelete(note.id)}
-            aria-label="Delete note"
-            title="Delete note"
-          >
-            <Trash2 size={13} />
-          </button>
-        </div>
-      </div>
-
-      {note.transcript && (
-        <p className="voice-note-transcript">{note.transcript}</p>
-      )}
-
-      {!note.transcript && (
-        <p className="voice-note-no-transcript muted text-sm">No transcription available</p>
-      )}
-    </div>
-  );
-}
-
-export function VoiceNotesPanel({ vaultPath, refreshKey = 0 }: Props) {
-  const [notes, setNotes] = useState<VoiceNote[]>([]);
-  const [search, setSearch] = useState('');
-  const [loading, setLoading] = useState(true);
-
-  const loadNotes = async () => {
-    setLoading(true);
-    try {
-      const vaultParam = vaultPath ? `?vaultPath=${encodeURIComponent(vaultPath)}` : '';
-      const r = await fetch(`/api/voice/list${vaultParam}`);
-      const data = await r.json();
-      setNotes(data.notes || []);
-    } catch (err) {
-      logger.error('[VoiceNotesPanel] failed to load notes:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  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) => {
-    try {
-      const r = await fetch(`/api/voice/${id}`, { method: 'DELETE' });
-      if (r.ok || r.status === 204) {
-        setNotes((prev) => prev.filter((n) => n.id !== id));
-      }
-    } catch (err) {
-      logger.error('[VoiceNotesPanel] delete failed:', err);
-    }
-  };
-
-  const filtered = notes.filter(
-    (n) =>
-      !search ||
-      (n.transcript?.toLowerCase().includes(search.toLowerCase()) ?? false),
-  );
-
-  return (
-    <Card>
-      <CardTitle>
-        <Mic size={14} /> Voice Notes
-      </CardTitle>
-      <CardMeta>Record and transcribe audio notes into your vault</CardMeta>
-
-      {/* Search */}
-      <div className="memory-search-row">
-        <input
-          type="text"
-          className="input search-input"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search transcripts…"
-          aria-label="Search voice notes"
-        />
-      </div>
-
-      {/* Recorder */}
-      <div className="voice-recorder-row">
-        <VoiceRecorder vaultPath={vaultPath} onSaved={loadNotes} />
-      </div>
-
-      {/* Note list */}
-      {loading ? (
-        <p className="muted text-sm">Loading notes…</p>
-      ) : filtered.length === 0 ? (
-        <p className="muted text-sm">
-          {search ? 'No notes match your search.' : 'No voice notes yet. Hit Record to add one.'}
-        </p>
-      ) : (
-        <div className="voice-note-list">
-          {filtered.map((n) => (
-            <NoteCard key={n.id} note={n} onDelete={handleDelete} />
-          ))}
-        </div>
-      )}
-    </Card>
-  );
-}

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

@@ -1,105 +0,0 @@
-// src/web/components/VoiceRecorder.tsx — v5.0.0
-//
-// MediaRecorder wrapper: records audio in webm/opus, uploads to /api/voice/upload
-// on stop, then calls onSaved(notePath, transcription) so the parent can refresh
-// the note list.
-
-import { useState, useRef } from 'react';
-import { Mic, Square, Loader2 } from 'lucide-react';
-import { Button } from './Button';
-import { logger } from '../lib/logger';
-
-export type VoiceRecorderProps = {
-  /** Vault path to store the transcript under */
-  vaultPath?: string;
-  /** Called after the note is saved with the note path and transcription text */
-  onSaved?: (notePath: string, transcription: string | null) => void;
-};
-
-export function VoiceRecorder({ vaultPath, onSaved }: VoiceRecorderProps) {
-  const [recording, setRecording] = useState(false);
-  const [transcribing, setTranscribing] = useState(false);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-
-  const startRecording = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      // Prefer webm/opus; fall back to whatever the browser offers
-      const mimeType =
-        MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
-          ? 'audio/webm;codecs=opus'
-          : 'audio/webm';
-      const recorder = new MediaRecorder(stream, { mimeType });
-
-      recorder.ondataavailable = (e) => {
-        if (e.data && e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-
-      recorder.onstop = async () => {
-        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
-        chunksRef.current = [];
-        // Stop all tracks to release the microphone
-        stream.getTracks().forEach((t) => t.stop());
-        await uploadAndTranscribe(blob);
-      };
-
-      recorder.start(1000); // timeslice=1s for chunk delivery
-      mediaRecorderRef.current = recorder;
-      setRecording(true);
-    } catch (err) {
-      // getUserMedia not available or permission denied
-      logger.error('[VoiceRecorder] failed to start recording:', err);
-    }
-  };
-
-  const stopRecording = () => {
-    const rec = mediaRecorderRef.current;
-    if (!rec) return;
-    rec.stop();
-    setRecording(false);
-    setTranscribing(true);
-  };
-
-  const uploadAndTranscribe = async (blob: Blob) => {
-    try {
-      const form = new FormData();
-      form.append('audio', blob, 'voice-note.webm');
-      form.append('vaultPath', vaultPath || '');
-      const res = await fetch('/api/voice/upload', { method: 'POST', body: form });
-      if (!res.ok) {
-        logger.error('[VoiceRecorder] upload failed:', res.status, await res.text());
-        setTranscribing(false);
-        return;
-      }
-      const { notePath, transcription } = await res.json();
-      onSaved?.(notePath, transcription);
-    } catch (err) {
-      logger.error('[VoiceRecorder] upload error:', err);
-    } finally {
-      setTranscribing(false);
-    }
-  };
-
-  return (
-    <div className="voice-recorder">
-      {!recording && !transcribing && (
-        <Button variant="accent" size="sm" onClick={startRecording} aria-label="Start recording">
-          <Mic size={14} /> Record
-        </Button>
-      )}
-      {recording && (
-        <Button variant="danger" size="sm" onClick={stopRecording} aria-label="Stop recording">
-          <Square size={14} /> Stop
-        </Button>
-      )}
-      {transcribing && (
-        <Button variant="secondary" size="sm" disabled>
-          <Loader2 size={14} className="spinning" /> Transcribing…
-        </Button>
-      )}
-    </div>
-  );
-}

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

@@ -1,158 +0,0 @@
-// 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>
-  );
-}