@polderlabs/bizar 4.8.0 → 5.0.0

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

@@ -0,0 +1,73 @@
+/**
+ * bundle-analysis.test.mjs
+ *
+ * Regression test to track dashboard bundle sizes and enforce that the
+ * mobile entry chunk stays under control.
+ *
+ * The mobile entry point (mobile.html → assets/mobile-*.js) is a
+ * separate Vite chunk from the desktop entry (index.html → assets/main-*.js).
+ * The desktop entry statically imports both App and MobileApp; the mobile
+ * entry imports only MobileApp — so the two chunks have different
+ * chunking characteristics.
+ *
+ * We track the primary mobile chunk (largest mobile-*.js, > 10 KB) and
+ * ensure neither bundle exceeds its documented cap.  The QR-code library
+ * (qrcode.react) lives in a separate lazy chunk (index-*.js) and is NOT
+ * counted against the mobile bundle cap.
+ */
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const dist = join(__dirname, '..', 'dist', 'assets');
+
+function findLargestAsset(prefix) {
+  const files = readdirSync(dist)
+    .filter((f) => f.startsWith(prefix) && f.endsWith('.js'))
+    .map((f) => ({ file: f, path: join(dist, f), size: readFileSync(join(dist, f)).length }))
+    .filter((f) => f.size > 10 * 1024); // exclude tiny entry wrappers
+  if (files.length === 0) throw new Error(`No asset found starting with "${prefix}" in dist/assets`);
+  return files.sort((a, b) => b.size - a.size)[0];
+}
+
+function kbytes(path) {
+  return readFileSync(path).length / 1024;
+}
+
+// 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  = 400;
+
+const desktop = findLargestAsset('main-');
+const mobile  = findLargestAsset('mobile-');
+
+const dk = kbytes(desktop.path);
+const mk = kbytes(mobile.path);
+
+console.log(`desktop bundle : ${dk.toFixed(1)} KB  (${desktop.file})`);
+console.log(`mobile bundle  : ${mk.toFixed(1)} KB  (${mobile.file})`);
+
+// Check caps
+if (dk > DESKTOP_MAX_KB) {
+  console.error(`FAIL: desktop bundle (${dk.toFixed(1)} KB) exceeds cap ${DESKTOP_MAX_KB} KB`);
+  process.exit(1);
+}
+if (mk > MOBILE_MAX_KB) {
+  console.error(`FAIL: mobile bundle (${mk.toFixed(1)} KB) exceeds cap ${MOBILE_MAX_KB} KB`);
+  process.exit(1);
+}
+
+// Dominance rule: mobile users should not pay more per initial load than desktop.
+// The desktop entry (index.html) includes both App and MobileApp in its main chunk;
+// the mobile entry (mobile.html) loads only MobileApp.  If mobile ≥ desktop here
+// it means the chunking ratio has inverted and warrants investigation.
+if (mk >= dk) {
+  console.error(`FAIL: mobile (${mk.toFixed(1)} KB) is not smaller than desktop (${dk.toFixed(1)} KB)`);
+  process.exit(1);
+}
+
+console.log(`PASS: mobile (${mk.toFixed(1)} KB) < desktop (${dk.toFixed(1)} KB)`);

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/settings-search.test.tsx

@@ -0,0 +1,180 @@
+/**
+ * tests/components/settings-search.test.tsx
+ *
+ * v4.9 — Component tests for SettingsSearch.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { SettingsSearch, type SettingsSection } from '../../src/web/components/SettingsSearch';
+
+const mockSections: SettingsSection[] = [
+  {
+    id: 'theme',
+    label: 'Theme',
+    fields: [
+      { key: 'theme.accent', label: 'Accent color', section: 'theme', value: '#8b5cf6' },
+      { key: 'theme.fontFamily', label: 'Font family', section: 'theme' },
+    ],
+  },
+  {
+    id: 'general',
+    label: 'General',
+    fields: [
+      { key: 'defaultAgent', label: 'Default agent', section: 'general', value: 'odin' },
+    ],
+  },
+];
+
+/* ─── localStorage mock ─── */
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
+    removeItem: vi.fn((key: string) => { delete store[key]; }),
+    clear: vi.fn(() => { store = {}; }),
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('SettingsSearch', () => {
+  const onJump = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorageMock.clear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the search input', () => {
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    expect(screen.getByPlaceholderText(/search settings/i)).toBeInTheDocument();
+  });
+
+  it('shows recent searches when input is empty and focused', () => {
+    // Pre-populate a recent search
+    localStorageMock.getItem.mockReturnValue(JSON.stringify(['accent']));
+
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+    fireEvent.focus(input);
+
+    // Wait briefly for focus state — recent dropdown uses focused state
+    expect(screen.getByText('accent')).toBeInTheDocument();
+  });
+
+  it('saves search to recent on submit (Enter)', async () => {
+    const { container } = render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'accent' } });
+
+    // Wait for the search results to render
+    await vi.waitFor(() => {
+      expect(container.querySelector('.settings-search-results')).toBeTruthy();
+    });
+
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    // localStorage should have been written
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      'bizar_settings_recent',
+      expect.any(String),
+    );
+  });
+
+  it('filters items by query', async () => {
+    const { container } = render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'accent' } });
+
+    // Check that results contain the matching field key (not split by highlight)
+    await vi.waitFor(() => {
+      expect(screen.getByText('theme.accent')).toBeInTheDocument();
+    });
+  });
+
+  it('handles typos via fuzzy match', async () => {
+    const { container } = render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'axcent' } });
+
+    // Typo leads to lower score but still matches — key should appear
+    await vi.waitFor(() => {
+      expect(screen.getByText('theme.accent')).toBeInTheDocument();
+    });
+  });
+
+  it('highlights matched terms in results', async () => {
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'accent' } });
+
+    await vi.waitFor(() => {
+      // The label contains <mark>Accent</mark> inside a button
+      const buttons = screen.getAllByRole('button');
+      const matchBtn = buttons.find((b) => b.textContent?.includes('Accent'));
+      expect(matchBtn).toBeTruthy();
+      const mark = matchBtn?.querySelector('mark');
+      expect(mark).toBeTruthy();
+      expect(mark?.textContent).toBe('Accent');
+    });
+  });
+
+  it('jumps to section on result click', async () => {
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'theme' } });
+
+    await vi.waitFor(() => {
+      // Click the section result
+      const buttons = screen.getAllByRole('button');
+      // Find the one containing "section" badge with "Theme"
+      const themeBtn = buttons.find(
+        (b) => b.textContent?.includes('Theme') && b.textContent?.includes('section'),
+      );
+      if (themeBtn) {
+        fireEvent.click(themeBtn);
+        expect(onJump).toHaveBeenCalledWith('theme');
+      }
+    });
+  });
+
+  it('clears search after jump', async () => {
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'font' } });
+
+    await vi.waitFor(() => {
+      const buttons = screen.getAllByRole('button');
+      const fontBtn = buttons.find((b) => b.textContent?.includes('Font family'));
+      if (fontBtn) {
+        fireEvent.click(fontBtn);
+        expect(onJump).toHaveBeenCalledWith('theme', 'theme.fontFamily');
+        // Input should be cleared after jump
+        expect(input).toHaveValue('');
+      }
+    });
+  });
+
+  it('shows no results message for unmatched query', async () => {
+    render(<SettingsSearch sections={mockSections} onJump={onJump} />);
+    const input = screen.getByPlaceholderText(/search settings/i);
+
+    fireEvent.change(input, { target: { value: 'zzzzdoesnotmatch' } });
+
+    await vi.waitFor(() => {
+      expect(screen.getByText(/no matching settings/i)).toBeInTheDocument();
+    });
+  });
+});