@polderlabs/bizar 4.9.0 → 5.0.0

package/bizar-dash/src/web/views/memory/VaultFromClipboardPanel.tsx

@@ -0,0 +1,101 @@
+// src/web/views/memory/VaultFromClipboardPanel.tsx — v5.0.0
+//
+// Memory tab panel for pasting content directly into the vault.
+// Accepts URL + title + content text, saves via /api/clipboard/save.
+
+import { useState } from 'react';
+import { Clipboard, Loader2 } from 'lucide-react';
+import { Button } from '../../components/Button';
+import { Card, CardTitle } from '../../components/Card';
+import { useToast } from '../../components/Toast';
+import { api } from '../../lib/api';
+
+type Props = {
+  refreshKey: number;
+};
+
+export function VaultFromClipboardPanel({ refreshKey: _refreshKey }: Props) {
+  const toast = useToast();
+  const [url, setUrl] = useState('');
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async () => {
+    if (!content.trim()) {
+      toast.error('Content is required');
+      return;
+    }
+    setSaving(true);
+    try {
+      const r = await api.post<{ ok: boolean; notePath: string }>('/clipboard/save', {
+        url: url.trim() || undefined,
+        title: title.trim() || undefined,
+        content: content,
+        savedAt: new Date().toISOString(),
+      });
+      if (r.ok) {
+        toast.success(`Saved to ${r.notePath}`);
+        setUrl('');
+        setTitle('');
+        setContent('');
+      }
+    } catch (err) {
+      toast.error(`Save failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="memory-panel-content">
+      <Card variant="outlined" className="memory-panel-card">
+        <div className="memory-panel-body">
+          <div className="vault-clipboard-panel">
+            <div className="vault-clipboard-header">
+              <Clipboard size={16} />
+              <span>Paste Content</span>
+            </div>
+
+            <label className="field-label" htmlFor="clip-url">URL (optional)</label>
+            <input
+              id="clip-url"
+              type="text"
+              className="input"
+              placeholder="https://example.com"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+
+            <label className="field-label" htmlFor="clip-title" style={{ marginTop: 10 }}>Title (optional)</label>
+            <input
+              id="clip-title"
+              type="text"
+              className="input"
+              placeholder="Page title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+
+            <label className="field-label" htmlFor="clip-content" style={{ marginTop: 10 }}>Content *</label>
+            <textarea
+              id="clip-content"
+              className="input vault-clipboard-textarea mono text-sm"
+              rows={12}
+              placeholder="Paste or type content to save to your vault…"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+            />
+
+            <div className="vault-clipboard-actions" style={{ marginTop: 12 }}>
+              <Button variant="primary" size="sm" onClick={handleSave} disabled={saving || !content.trim()}>
+                {saving && <Loader2 size={12} className="spinner" />}
+                Save to Vault
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/bizar-dash/src/web/views/settings/WorkspacesSection.tsx

@@ -0,0 +1,189 @@
+// src/web/views/settings/WorkspacesSection.tsx — v5.0.0 — workspace management in settings.
+import { useState, useEffect } from 'react';
+import { Users, Plus, Trash2, Crown, Shield, Eye, Copy, Check } from 'lucide-react';
+import { api } from '../../lib/api';
+import { Button } from '../../components/Button';
+import { useModal } from '../../components/Modal';
+import { InviteDialog } from '../../components/InviteDialog';
+import { cn } from '../../lib/utils';
+
+export type WorkspaceInfo = {
+  id: string;
+  name: string;
+  ownerId: string;
+  createdAt: string;
+};
+
+export type WorkspaceWithRole = {
+  workspace: WorkspaceInfo;
+  role: string;
+};
+
+export type WorkspaceMember = {
+  userId: string;
+  email: string;
+  name: string;
+  role: string;
+  joinedAt: string;
+};
+
+const ROLE_ICONS = { admin: Crown, editor: Shield, viewer: Eye };
+const ROLE_COLORS = { admin: 'role-admin', editor: 'role-editor', viewer: 'role-viewer' };
+
+export function WorkspacesSection() {
+  const [workspaces, setWorkspaces] = useState<WorkspaceWithRole[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
+  const modal = useModal();
+
+  useEffect(() => {
+    loadWorkspaces();
+  }, []);
+
+  async function loadWorkspaces() {
+    setLoading(true);
+    try {
+      const r = await api.get<{ workspaces: WorkspaceWithRole[] }>('/workspaces');
+      setWorkspaces(r.workspaces || []);
+    } catch {
+      setError('Failed to load workspaces');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!newName.trim()) return;
+    setCreating(true);
+    try {
+      await api.post('/workspaces', { name: newName.trim() });
+      setNewName('');
+      await loadWorkspaces();
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to create workspace');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleDelete(workspaceId: string, name: string) {
+    if (!confirm(`Delete workspace "${name}"?`)) return;
+    if (!confirm('This cannot be undone.')) return;
+    try {
+      await api.del(`/workspaces/${workspaceId}`);
+      await loadWorkspaces();
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to delete workspace');
+    }
+  }
+
+  function copyInviteLink(workspaceId: string) {
+    navigator.clipboard.writeText(`${window.location.origin}/accept-invite?workspace=${workspaceId}`).catch(() => undefined);
+    setCopied(workspaceId);
+    setTimeout(() => setCopied(null), 2000);
+  }
+
+  if (loading) {
+    return <div className="settings-section-loading">Loading workspaces...</div>;
+  }
+
+  return (
+    <div className="settings-section settings-section-workspaces">
+      <h3 className="settings-section-title">Workspaces</h3>
+      <p className="settings-section-desc">
+        Workspaces let you share access with team members. Each workspace has its own members, settings, and data.
+      </p>
+
+      {error && (
+        <div className="settings-section-error">
+          <span>{error}</span>
+          <button onClick={() => setError(null)}>×</button>
+        </div>
+      )}
+
+      {/* Create new workspace */}
+      <form className="workspace-create-form" onSubmit={handleCreate}>
+        <input
+          type="text"
+          placeholder="New workspace name"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          maxLength={64}
+        />
+        <Button type="submit" variant="primary" size="sm" loading={creating} disabled={!newName.trim()}>
+          <Plus size={13} />
+          Create
+        </Button>
+      </form>
+
+      {/* Workspace list */}
+      <div className="workspace-list">
+        {workspaces.length === 0 && (
+          <p className="workspace-list-empty">No workspaces yet. Create one above.</p>
+        )}
+        {workspaces.map(({ workspace, role }) => {
+          const RoleIcon = ROLE_ICONS[role as keyof typeof ROLE_ICONS] || Eye;
+          return (
+            <div key={workspace.id} className="workspace-item">
+              <div className="workspace-item-info">
+                <div className="workspace-item-icon">
+                  <Users size={16} />
+                </div>
+                <div className="workspace-item-details">
+                  <span className="workspace-item-name">{workspace.name}</span>
+                  <span className={cn('workspace-item-role', ROLE_COLORS[role as keyof typeof ROLE_COLORS])}>
+                    <RoleIcon size={11} />
+                    {role}
+                  </span>
+                </div>
+              </div>
+              <div className="workspace-item-actions">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  iconOnly
+                  title="Copy invite link"
+                  onClick={() => copyInviteLink(workspace.id)}
+                >
+                  {copied === workspace.id ? <Check size={13} /> : <Copy size={13} />}
+                </Button>
+                {role === 'admin' && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    iconOnly
+                    title="Manage members"
+                    onClick={() => {
+                      modal.open({
+                        title: `Manage "${workspace.name}"`,
+                        children: <InviteDialog workspaceId={workspace.id} onInviteCreated={() => loadWorkspaces()} />,
+                        width: 520,
+                      });
+                    }}
+                  >
+                    <Users size={13} />
+                  </Button>
+                )}
+                {role === 'admin' && workspaces.length > 1 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    iconOnly
+                    title="Delete workspace"
+                    onClick={() => handleDelete(workspace.id, workspace.name)}
+                  >
+                    <Trash2 size={13} />
+                  </Button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/bizar-dash/tests/bundle-analysis.test.mjs

@@ -35,9 +35,12 @@ function kbytes(path) {
   return readFileSync(path).length / 1024;
 }
 
-// Caps — adjust only when the architecture intentionally changes chunk composition.
+// v5.0 targets:
+// - mobile.js < desktop.js (must be smaller — mobile has no App.tsx deduplication)
+// - mobile.js < 400 KB (was 459 KB after v4.9; manualChunks + lazy views target ~350 KB)
+// - desktop.js < 450 KB (was 393 KB; shared vendor chunks may shift bytes)
 const DESKTOP_MAX_KB = 450;
-const MOBILE_MAX_KB  = 500;
+const MOBILE_MAX_KB  = 400;
 
 const desktop = findLargestAsset('main-');
 const mobile  = findLargestAsset('mobile-');

package/bizar-dash/tests/clipboard.test.mjs

@@ -0,0 +1,147 @@
+/**
+ * tests/clipboard.test.mjs
+ *
+ * v5.0.0 — Tests for the clipboard route save-format logic.
+ *
+ * These tests verify the note file format (frontmatter, body) produced
+ * by the clipboard/save endpoint. We test via a lightweight HTTP server
+ * using a temp project root.
+ */
+
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { mkdirSync, rmSync, existsSync, readFileSync } from 'node:fs';
+import express from 'express';
+
+const CLIPBOARD_ROUTES = await import('../src/server/routes/clipboard.mjs');
+
+describe('clipboard note format', () => {
+  let projectRoot;
+  let server;
+  let baseUrl;
+
+  beforeEach(async () => {
+    projectRoot = join(tmpdir(), `bizar-clip-test2-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    mkdirSync(projectRoot, { recursive: true });
+    mkdirSync(join(projectRoot, '.bizar'), { recursive: true });
+
+    const router = await CLIPBOARD_ROUTES.createClipboardRouter({ projectRoot });
+    const app = express();
+    app.use(express.json({ limit: '5mb' }));
+    app.use('/api', router);
+
+    await new Promise((resolve) => {
+      server = app.listen(0, () => {
+        const addr = server.address();
+        baseUrl = `http://127.0.0.1:${addr.port}`;
+        resolve();
+      });
+    });
+  });
+
+  afterEach(() => {
+    try { server?.close?.(); } catch { /* ignore */ }
+    try { rmSync(projectRoot, { recursive: true, force: true }); } catch { /* ignore */ }
+  });
+
+  it('saves a note with correct YAML frontmatter', async () => {
+    const r = await fetch(`${baseUrl}/api/clipboard/save`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        url: 'https://example.com/test',
+        title: 'Test Page Title',
+        content: '<html>test content</html>',
+        selection: 'selected text',
+        savedAt: '2026-07-05T12:00:00.000Z',
+      }),
+    });
+    assert.strictEqual(r.status, 201);
+    const data = await r.json();
+    assert.ok(data.ok);
+    assert.ok(data.notePath);
+    assert.ok(data.notePath.startsWith('clips/'));
+    assert.ok(data.notePath.endsWith('.md'));
+
+    // Read the file
+    const noteFile = join(projectRoot, '.obsidian', data.notePath);
+    assert.ok(existsSync(noteFile));
+    const content = readFileSync(noteFile, 'utf8');
+
+    // Check frontmatter
+    assert.ok(content.startsWith('---'));
+    assert.ok(content.includes('title: "Test Page Title"'));
+    assert.ok(content.includes('url: "https://example.com/test"'));
+    assert.ok(content.includes('type: "webclip"'));
+    assert.ok(content.includes('savedAt: "2026-07-05T12:00:00.000Z"'));
+
+    // Check body contains selection and content
+    assert.ok(content.includes('selected text'));
+    assert.ok(content.includes('<html>test content</html>'));
+
+    // Check tags
+    assert.ok(content.includes('"webclip"'));
+  });
+
+  it('returns 400 when url and content are both missing', async () => {
+    const r = await fetch(`${baseUrl}/api/clipboard/save`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    assert.strictEqual(r.status, 400);
+    const data = await r.json();
+    assert.strictEqual(data.error, 'bad_request');
+  });
+
+  it('GET /api/clipboard/list returns clips array', async () => {
+    // Save a clip first
+    await fetch(`${baseUrl}/api/clipboard/save`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        url: 'https://example.com/list-test',
+        title: 'List Test',
+        content: 'list content',
+      }),
+    });
+
+    const r = await fetch(`${baseUrl}/api/clipboard/list`);
+    assert.strictEqual(r.status, 200);
+    const data = await r.json();
+    assert.ok(Array.isArray(data.clips));
+    assert.strictEqual(data.clips.length, 1);
+    assert.ok(data.clips[0].id);
+    assert.strictEqual(data.clips[0].title, 'List Test');
+  });
+
+  it('DELETE /api/clipboard/:id removes clip from log', async () => {
+    // Save
+    const saveRes = await fetch(`${baseUrl}/api/clipboard/save`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        url: 'https://example.com/delete-test',
+        title: 'Delete Test',
+        content: 'delete content',
+      }),
+    });
+    const { id } = await saveRes.json();
+
+    // Delete
+    const delRes = await fetch(`${baseUrl}/api/clipboard/${id}`, { method: 'DELETE' });
+    assert.strictEqual(delRes.status, 200);
+
+    // List should be empty
+    const listRes = await fetch(`${baseUrl}/api/clipboard/list`);
+    const { clips } = await listRes.json();
+    assert.strictEqual(clips.length, 0);
+  });
+
+  it('DELETE /api/clipboard/:id returns 404 for unknown id', async () => {
+    const r = await fetch(`${baseUrl}/api/clipboard/nonexistent`, { method: 'DELETE' });
+    assert.strictEqual(r.status, 404);
+  });
+});

package/bizar-dash/tests/components/screenshot-ocr.test.tsx

@@ -0,0 +1,75 @@
+/**
+ * tests/components/screenshot-ocr.test.tsx
+ *
+ * v5.0.0 — Component tests for ScreenshotCapture and ScreenshotOCR.
+ *
+ * These tests verify that the components render correctly and handle
+ * their states (capturing, processing, results).
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ScreenshotCapture } from '../../src/web/components/ScreenshotCapture';
+import { ScreenshotOCR } from '../../src/web/components/ScreenshotOCR';
+
+// Mock the Toast component
+vi.mock('../../src/web/components/Toast', () => ({
+  useToast: () => ({
+    info: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+  }),
+  ToastProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+// Mock the api module
+vi.mock('../../src/web/lib/api', () => ({
+  api: {
+    post: vi.fn().mockResolvedValue({ ok: true, text: 'test text', notePath: 'ocr/test.md' }),
+  },
+}));
+
+// Mock getDisplayMedia
+beforeEach(() => {
+  Object.defineProperty(navigator, 'mediaDevices', {
+    value: {
+      getDisplayMedia: vi.fn().mockRejectedValue(new DOMException('', 'NotAllowedError')),
+    },
+    writable: true,
+    configurable: true,
+  });
+});
+
+describe('ScreenshotCapture', () => {
+  it('renders the capture button', () => {
+    render(<ScreenshotCapture onTextExtracted={vi.fn()} />);
+    expect(screen.getByText('Capture Screen')).toBeDefined();
+  });
+
+  it('renders without crashing when no onTextExtracted provided', () => {
+    render(<ScreenshotCapture />);
+    expect(screen.getByText('Capture Screen')).toBeDefined();
+  });
+
+  it('shows loading state when capturing', async () => {
+    // getDisplayMedia won't resolve, so it will show "Selecting…"
+    render(<ScreenshotCapture onTextExtracted={vi.fn()} />);
+    const btn = screen.getByText('Capture Screen');
+    // Not clicking — just verify initial state renders
+    expect(btn).toBeDefined();
+  });
+});
+
+describe('ScreenshotOCR', () => {
+  it('renders the combined panel', () => {
+    render(<ScreenshotOCR />);
+    expect(screen.getByText('Capture Screen')).toBeDefined();
+    expect(screen.getByText(/capture your screen/i)).toBeDefined();
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<ScreenshotOCR />);
+    expect(container).toBeDefined();
+  });
+});

package/bizar-dash/tests/components/workspace-selector.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { WorkspaceSelector } from '../../src/web/components/WorkspaceSelector';
+
+// Mock the api module
+vi.mock('../../src/web/lib/api', () => ({
+  api: {
+    get: vi.fn().mockResolvedValue({ workspaces: [] }),
+  },
+}));
+
+describe('WorkspaceSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders with default text when no workspace is selected', () => {
+    render(
+      <WorkspaceSelector
+        currentWorkspaceId={null}
+        onWorkspaceChange={vi.fn()}
+      />,
+    );
+    expect(screen.getByText('Workspace')).toBeInTheDocument();
+  });
+
+  it('opens dropdown on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <WorkspaceSelector
+        currentWorkspaceId={null}
+        onWorkspaceChange={vi.fn()}
+      />,
+    );
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+  });
+
+  it('shows empty state in dropdown when no workspaces', async () => {
+    const user = userEvent.setup();
+    render(
+      <WorkspaceSelector
+        currentWorkspaceId={null}
+        onWorkspaceChange={vi.fn()}
+      />,
+    );
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByText('No workspaces')).toBeInTheDocument();
+  });
+
+  it('renders workspace name when provided and API returns data', async () => {
+    const { api } = await import('../../src/web/lib/api');
+    (api.get as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      workspaces: [
+        { workspace: { id: 'ws_abc', name: 'Engineering' }, role: 'admin' },
+      ],
+    });
+
+    render(
+      <WorkspaceSelector
+        currentWorkspaceId="ws_abc"
+        onWorkspaceChange={vi.fn()}
+      />,
+    );
+
+    // Wait for the effect to run and state to update
+    await waitFor(() => {
+      expect(screen.getByText('Engineering')).toBeInTheDocument();
+    });
+  });
+});