@polderlabs/bizar 4.9.0 → 5.0.0

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

@@ -0,0 +1,205 @@
+// src/web/components/InviteDialog.tsx — v5.0.0 — modal to create and manage workspace invites.
+import { useState, useEffect } from 'react';
+import { Copy, Check, Trash2, Mail, Link2 } from 'lucide-react';
+import { useModal } from './Modal';
+import { Button } from './Button';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+
+export type InviteInfo = {
+  token: string;
+  email: string;
+  role: 'admin' | 'editor' | 'viewer';
+  invitedBy: string;
+  expiresAt: string;
+};
+
+type Props = {
+  workspaceId: string;
+  onInviteCreated?: () => void;
+};
+
+export function InviteDialog({ workspaceId, onInviteCreated }: Props) {
+  const modal = useModal();
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<'admin' | 'editor' | 'viewer'>('editor');
+  const [invites, setInvites] = useState<InviteInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadInvites();
+  }, [workspaceId]);
+
+  async function loadInvites() {
+    setLoading(true);
+    try {
+      const r = await api.get<{ invites: InviteInfo[] }>(`/workspaces/${workspaceId}/invites`);
+      setInvites(r.invites || []);
+    } catch {
+      // Ignore load errors
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const result = await api.post<{ token: string; url: string }>(`/workspaces/${workspaceId}/invites`, {
+        email: email.trim(),
+        role,
+      });
+      setEmail('');
+      await loadInvites();
+      onInviteCreated?.();
+
+      // Show the invite URL in a copy dialog
+      modal.open({
+        title: 'Invite Link Created',
+        children: (
+          <div className="invite-link-dialog">
+            <p>Share this link with <strong>{email}</strong> to invite them as <strong>{role}</strong>:</p>
+            <div className="invite-url-box">
+              <Link2 size={14} />
+              <input
+                type="text"
+                readOnly
+                value={result.url}
+                onClick={(e) => (e.target as HTMLInputElement).select()}
+              />
+              <button
+                type="button"
+                className="invite-copy-btn"
+                onClick={() => {
+                  navigator.clipboard.writeText(result.url).catch(() => undefined);
+                  setCopied(result.token);
+                  setTimeout(() => setCopied(null), 2000);
+                }}
+              >
+                {copied === result.token ? <Check size={14} /> : <Copy size={14} />}
+              </button>
+            </div>
+            <p className="invite-url-note">This link expires in 7 days.</p>
+          </div>
+        ),
+        footer: (
+          <Button variant="primary" size="sm" onClick={() => modal.close()}>
+            Done
+          </Button>
+        ),
+      });
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to create invite');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleRevoke(token: string) {
+    if (!confirm('Revoke this invite?')) return;
+    try {
+      await api.del(`/workspaces/${workspaceId}/invites/${token}`);
+      await loadInvites();
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to revoke invite');
+    }
+  }
+
+  function copyToClipboard(text: string, key: string) {
+    navigator.clipboard.writeText(text).catch(() => undefined);
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
+  }
+
+  const roleColors: Record<string, string> = {
+    admin: 'role-admin',
+    editor: 'role-editor',
+    viewer: 'role-viewer',
+  };
+
+  return (
+    <div className="invite-dialog">
+      <form className="invite-form" onSubmit={handleCreate}>
+        <div className="invite-form-row">
+          <div className="invite-form-field">
+            <label htmlFor="invite-email">Email address</label>
+            <input
+              id="invite-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="colleague@example.com"
+              required
+            />
+          </div>
+          <div className="invite-form-field invite-form-field-role">
+            <label htmlFor="invite-role">Role</label>
+            <select
+              id="invite-role"
+              value={role}
+              onChange={(e) => setRole(e.target.value as 'admin' | 'editor' | 'viewer')}
+            >
+              <option value="viewer">Viewer</option>
+              <option value="editor">Editor</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+          <Button
+            type="submit"
+            variant="primary"
+            size="sm"
+            loading={creating}
+            disabled={!email.trim()}
+          >
+            <Mail size={13} />
+            Invite
+          </Button>
+        </div>
+        {error && <p className="invite-error">{error}</p>}
+      </form>
+
+      <div className="invite-list">
+        <h4 className="invite-list-title">Pending Invites</h4>
+        {loading && <p className="invite-loading">Loading...</p>}
+        {!loading && invites.length === 0 && (
+          <p className="invite-empty">No pending invites</p>
+        )}
+        {invites.map((inv) => (
+          <div key={inv.token} className="invite-item">
+            <div className="invite-item-info">
+              <span className="invite-item-email">{inv.email}</span>
+              <span className={cn('invite-item-role', roleColors[inv.role])}>{inv.role}</span>
+            </div>
+            <div className="invite-item-actions">
+              <button
+                type="button"
+                className="invite-action-btn"
+                title="Copy invite link"
+                onClick={() => {
+                  const url = `${window.location.origin}/accept-invite?token=${inv.token}`;
+                  copyToClipboard(url, inv.token);
+                }}
+              >
+                {copied === inv.token ? <Check size={13} /> : <Copy size={13} />}
+              </button>
+              <button
+                type="button"
+                className="invite-action-btn invite-action-revoke"
+                title="Revoke invite"
+                onClick={() => handleRevoke(inv.token)}
+              >
+                <Trash2 size={13} />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+// src/web/components/ScreenshotCapture.tsx — v5.0.0
+//
+// Uses browser's getDisplayMedia() to capture a screen, window, or browser tab.
+// Returns a blob URL for preview and uploads to /api/ocr/process for text extraction.
+
+import { useState, useCallback } from 'react';
+import { Camera, Loader2 } from 'lucide-react';
+import { Button } from './Button';
+import { Card, CardTitle } from './Card';
+import { useToast } from './Toast';
+import { api } from '../lib/api';
+
+export type ScreenshotCaptureProps = {
+  onTextExtracted?: (text: string, notePath: string) => void;
+};
+
+export function ScreenshotCapture({ onTextExtracted }: ScreenshotCaptureProps) {
+  const toast = useToast();
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [processing, setProcessing] = useState(false);
+  const [capturing, setCapturing] = useState(false);
+
+  const capture = useCallback(async () => {
+    setCapturing(true);
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: { mediaSource: 'screen' } as MediaTrackConstraints,
+      });
+      const video = document.createElement('video');
+      video.srcObject = stream;
+      await video.play();
+
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        toast.error('Failed to get canvas context');
+        return;
+      }
+      ctx.drawImage(video, 0, 0);
+
+      // Stop all tracks
+      stream.getTracks().forEach((t) => t.stop());
+      video.remove();
+
+      canvas.toBlob(async (blob) => {
+        if (!blob) {
+          toast.error('Failed to capture screenshot');
+          return;
+        }
+        const url = URL.createObjectURL(blob);
+        setImageUrl(url);
+        await processImage(blob);
+      }, 'image/png');
+    } catch (err) {
+      if ((err as Error).name !== 'NotAllowedError') {
+        toast.error(`Capture failed: ${(err as Error).message}`);
+      }
+      // NotAllowedError = user cancelled the picker — no toast needed
+    } finally {
+      setCapturing(false);
+    }
+  }, [toast]);
+
+  const processImage = useCallback(async (blob: Blob) => {
+    setProcessing(true);
+    try {
+      const reader = new FileReader();
+      const base64 = await new Promise<string>((resolve, reject) => {
+        reader.onload = () => {
+          const result = reader.result as string;
+          // Strip data:image/png;base64, prefix for API
+          const b64 = result.includes(',') ? result.split(',')[1] : result;
+          resolve(b64);
+        };
+        reader.onerror = () => reject(new Error('FileReader failed'));
+        reader.readAsDataURL(blob);
+      });
+
+      const r = await api.post<{ ok: boolean; text: string; notePath: string }>('/ocr/process', {
+        image: base64,
+        lang: 'eng',
+      });
+
+      if (r.ok) {
+        toast.success('Text extracted from screenshot');
+        onTextExtracted?.(r.text, r.notePath);
+      }
+    } catch (err) {
+      toast.error(`OCR failed: ${(err as Error).message}`);
+    } finally {
+      setProcessing(false);
+    }
+  }, [toast, onTextExtracted]);
+
+  const dismiss = useCallback(() => {
+    setImageUrl(null);
+  }, []);
+
+  return (
+    <Card variant="outlined" className="screenshot-capture-card">
+      <CardTitle><Camera size={14} /> Screenshot Capture</CardTitle>
+
+      <div className="screenshot-capture-body">
+        {!imageUrl ? (
+          <div className="screenshot-capture-empty">
+            <Camera size={32} className="muted" />
+            <p className="muted text-sm">Capture your screen to extract text via OCR.</p>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={capture}
+              disabled={capturing}
+            >
+              {capturing ? <Loader2 size={12} className="spinner" /> : <Camera size={12} />}
+              {capturing ? 'Selecting…' : 'Capture Screen'}
+            </Button>
+          </div>
+        ) : (
+          <div className="screenshot-capture-preview">
+            <img src={imageUrl} alt="Captured screenshot" className="screenshot-capture-img" />
+            <div className="screenshot-capture-actions">
+              {processing && (
+                <span className="text-sm muted">
+                  <Loader2 size={12} className="spinner" /> Extracting text…
+                </span>
+              )}
+              <Button variant="ghost" size="sm" onClick={dismiss} disabled={processing}>
+                Dismiss
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,42 @@
+// src/web/components/ScreenshotOCR.tsx — v5.0.0
+//
+// Combines ScreenshotCapture + extracted text display in one panel.
+// Shows the screenshot preview and the OCR-extracted text side by side.
+
+import { useState } from 'react';
+import { FileText } from 'lucide-react';
+import { ScreenshotCapture } from './ScreenshotCapture';
+import { Card, CardTitle, CardMeta } from './Card';
+
+export function ScreenshotOCR() {
+  const [ocrText, setOcrText] = useState<string | null>(null);
+  const [notePath, setNotePath] = useState<string | null>(null);
+
+  const handleTextExtracted = (text: string, path: string) => {
+    setOcrText(text);
+    setNotePath(path);
+  };
+
+  return (
+    <div className="screenshot-ocr-panel">
+      <ScreenshotCapture onTextExtracted={handleTextExtracted} />
+
+      {ocrText !== null && (
+        <Card variant="outlined" className="screenshot-ocr-result-card">
+          <CardTitle>
+            <FileText size={14} /> Extracted Text
+          </CardTitle>
+          {notePath && <CardMeta>Saved to: {notePath}</CardMeta>}
+
+          <div className="screenshot-ocr-text">
+            {ocrText ? (
+              <pre className="screenshot-ocr-pre mono text-sm">{ocrText}</pre>
+            ) : (
+              <p className="muted text-sm">No text was found in the captured image.</p>
+            )}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,182 @@
+// 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';
+
+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) {
+      console.error('[VoiceNotesPanel] failed to load notes:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadNotes();
+  }, [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) {
+      console.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

@@ -0,0 +1,104 @@
+// 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';
+
+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
+      console.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) {
+        console.error('[VoiceRecorder] upload failed:', res.status, await res.text());
+        setTranscribing(false);
+        return;
+      }
+      const { notePath, transcription } = await res.json();
+      onSaved?.(notePath, transcription);
+    } catch (err) {
+      console.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>
+  );
+}