@polderlabs/bizar 4.8.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>
+  );
+}