@polderlabs/bizar 4.9.0 → 5.0.0

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

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

package/bizar-dash/src/web/styles/memory.css

@@ -1036,3 +1036,85 @@ dl.memory-config-row dd {
   font-size: 13px;
   color: var(--text, #c9d1d9);
 }
+
+/* ── Voice Notes ─────────────────────────────────────────────────────────── */
+
+.voice-recorder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.voice-recorder-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.voice-note-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.voice-note-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--bg-elev, #12161f);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius, 8px);
+  transition: border-color var(--motion-fast, 120ms);
+}
+
+.voice-note-card:hover {
+  border-color: var(--border-strong, #2d3648);
+}
+
+.voice-note-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.voice-note-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--text-dim, #b4bcd0);
+}
+
+.voice-note-date {
+  font-family: var(--font-mono, monospace);
+}
+
+.voice-note-duration {
+  font-family: var(--font-mono, monospace);
+  padding: 1px 6px;
+  background: var(--bg-elev-2, #1a1f2b);
+  border-radius: 4px;
+}
+
+.voice-note-card-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.voice-note-transcript {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text, #c9d1d9);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+.voice-note-no-transcript {
+  margin: 0;
+  font-style: italic;
+}

package/bizar-dash/src/web/views/Memory.tsx

@@ -10,11 +10,14 @@
 import React, { useCallback, useState } from 'react';
 import {
   Brain,
+  Clipboard,
   FileText,
   GitBranch,
   LayoutDashboard,
+  Mic,
   Network,
   RefreshCw,
+  Scan,
   Search as SearchIcon,
   Sliders,
 } from 'lucide-react';
@@ -28,8 +31,11 @@ import { GitSyncPanel } from './memory/GitSyncPanel';
 import { SemanticSearchPanel } from './memory/SemanticSearchPanel';
 import { ConfigPanel } from './memory/ConfigPanel';
 import { MemoryGraphPanel } from './memory/MemoryGraphPanel';
+import { FromScreenshotPanel } from './memory/FromScreenshotPanel';
+import { VaultFromClipboardPanel } from './memory/VaultFromClipboardPanel';
+import { VoiceNotesPanel } from '../components/VoiceNotesPanel';
 
-type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph';
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph' | 'webclip' | 'screenshot' | 'voice';
 
 type Props = {
   snapshot: unknown;
@@ -51,6 +57,9 @@ const SOURCES: Array<{
   { id: 'semantic', label: 'Semantic Search', icon: SearchIcon },
   { id: 'config', label: 'Config', icon: Sliders },
   { id: 'graph', label: 'Memory Graph', icon: Network },
+  { id: 'webclip', label: 'Web Clip', icon: Clipboard },
+  { id: 'screenshot', label: 'Screenshot OCR', icon: Scan },
+  { id: 'voice', label: 'Voice Notes', icon: Mic },
 ];
 
 function MemoryInner(_props: Props) {
@@ -83,6 +92,12 @@ function MemoryInner(_props: Props) {
         return <ConfigPanel refreshKey={refreshKey} />;
       case 'graph':
         return <MemoryGraphPanel refreshKey={refreshKey} />;
+      case 'webclip':
+        return <VaultFromClipboardPanel refreshKey={refreshKey} />;
+      case 'screenshot':
+        return <FromScreenshotPanel refreshKey={refreshKey} />;
+      case 'voice':
+        return <VoiceNotesPanel refreshKey={refreshKey} />;
       default:
         return <Card>Unknown panel: {active}</Card>;
     }
@@ -97,7 +112,7 @@ function MemoryInner(_props: Props) {
             <Brain size={18} /> Memory
           </h2>
           <p className="view-subtitle">
-            LightRAG, Obsidian vault, git sync, and semantic search — all in one place.
+            LightRAG, Obsidian vault, git sync, semantic search, web clips, and screenshot OCR — all in one place.
           </p>
         </div>
         <div className="view-actions">

package/bizar-dash/src/web/views/Settings.tsx

@@ -23,6 +23,7 @@ import { ProvidersSection } from './settings/ProvidersSection';
 import { MemorySection } from './settings/MemorySection';
 import { SkillsSection } from './settings/SkillsSection';
 import { BackupSection } from './settings/BackupSection';
+import { WorkspacesSection } from './settings/WorkspacesSection';
 
 type Props = {
   snapshot: Snapshot;
@@ -52,6 +53,7 @@ const SECTION_LINKS = [
   { id: 'memory', label: 'Memory' },
   { id: 'skills', label: 'Skills' },
   { id: 'backup', label: 'Backup' },
+  { id: 'workspaces', label: 'Workspaces' },
 ] as const;
 
 /* ─── Settings search sections metadata ─── */
@@ -264,6 +266,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
         {(showAll || sectionOf('memory')) && <MemorySection />}
         {(showAll || sectionOf('skills')) && <SkillsSection />}
         {(showAll || sectionOf('backup')) && <BackupSection />}
+        {(showAll || sectionOf('workspaces')) && <WorkspacesSection />}
       </div>
     </div>
   );

package/bizar-dash/src/web/views/Workspace.tsx

@@ -0,0 +1,294 @@
+// src/web/views/Workspace.tsx — v5.0.0 — workspace management view.
+import { useEffect, useState, useCallback } from 'react';
+import { Users, Plus, Trash2, Shield, Crown, Eye } from 'lucide-react';
+import { api } from '../lib/api';
+import { useModal } from '../components/Modal';
+import { Button } from '../components/Button';
+import { InviteDialog, type InviteInfo } from '../components/InviteDialog';
+import { cn } from '../lib/utils';
+
+export type WorkspaceMember = {
+  userId: string;
+  email: string;
+  name: string;
+  role: 'admin' | 'editor' | 'viewer';
+  joinedAt: string;
+};
+
+export type WorkspaceInfo = {
+  id: string;
+  name: string;
+  ownerId: string;
+  createdAt: string;
+};
+
+type Props = {
+  workspaceId: string;
+  onWorkspaceDeleted?: () => void;
+  onWorkspaceUpdated?: (name: string) => void;
+};
+
+const ROLE_ICONS = {
+  admin: Crown,
+  editor: Shield,
+  viewer: Eye,
+};
+
+const ROLE_COLORS = {
+  admin: 'role-admin',
+  editor: 'role-editor',
+  viewer: 'role-viewer',
+};
+
+export function WorkspaceView({ workspaceId, onWorkspaceDeleted, onWorkspaceUpdated }: Props) {
+  const modal = useModal();
+  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
+  const [members, setMembers] = useState<WorkspaceMember[]>([]);
+  const [invites, setInvites] = useState<InviteInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [nameDraft, setNameDraft] = useState('');
+  const [nameEditing, setNameEditing] = useState(false);
+
+  const loadWorkspace = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const r = await api.get<{ workspace: WorkspaceInfo; members: WorkspaceMember[] }>(
+        `/workspaces/${workspaceId}`,
+      );
+      setWorkspace(r.workspace);
+      setMembers(r.members || []);
+      setNameDraft(r.workspace.name);
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to load workspace');
+    } finally {
+      setLoading(false);
+    }
+  }, [workspaceId]);
+
+  useEffect(() => {
+    loadWorkspace();
+  }, [loadWorkspace]);
+
+  const loadInvites = async () => {
+    try {
+      const r = await api.get<{ invites: InviteInfo[] }>(`/workspaces/${workspaceId}/invites`);
+      setInvites(r.invites || []);
+    } catch {
+      // Ignore
+    }
+  };
+
+  useEffect(() => {
+    loadInvites();
+  }, [workspaceId]);
+
+  const handleSaveName = async () => {
+    if (!nameDraft.trim() || !workspace) return;
+    try {
+      // Workspace rename would be a separate endpoint; for now just update locally
+      setWorkspace((w) => (w ? { ...w, name: nameDraft.trim() } : w));
+      onWorkspaceUpdated?.(nameDraft.trim());
+      setNameEditing(false);
+    } catch {
+      setError('Failed to update name');
+    }
+  };
+
+  const handleDeleteWorkspace = async () => {
+    if (!confirm(`Delete workspace "${workspace?.name}"? This cannot be undone.`)) return;
+    if (!confirm('Are you absolutely sure? All workspace data will be permanently deleted.')) return;
+    try {
+      await api.del(`/workspaces/${workspaceId}`);
+      onWorkspaceDeleted?.();
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to delete workspace');
+    }
+  };
+
+  const handleRemoveMember = async (userId: string) => {
+    if (!confirm('Remove this member from the workspace?')) return;
+    try {
+      await api.del(`/workspaces/${workspaceId}/members/${userId}`);
+      setMembers((prev) => prev.filter((m) => m.userId !== userId));
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to remove member');
+    }
+  };
+
+  const handleUpdateRole = async (userId: string, newRole: string) => {
+    try {
+      await api.post(`/workspaces/${workspaceId}/members/${userId}`, { role: newRole });
+      setMembers((prev) =>
+        prev.map((m) => (m.userId === userId ? { ...m, role: newRole as WorkspaceMember['role'] } : m)),
+      );
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to update role');
+    }
+  };
+
+  // Note: In a real implementation, we'd get the current user ID from the session/JWT.
+  // For now, we trust the server to only render this view for authorized users.
+  const currentUserIsAdmin = true;
+
+  if (loading) {
+    return (
+      <div className="view view-workspace">
+        <div className="workspace-loading">Loading workspace...</div>
+      </div>
+    );
+  }
+
+  if (error && !workspace) {
+    return (
+      <div className="view view-workspace">
+        <div className="workspace-error">
+          <p>{error}</p>
+          <Button variant="secondary" size="sm" onClick={loadWorkspace}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="view view-workspace">
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Users size={18} />
+            {nameEditing ? (
+              <input
+                type="text"
+                className="workspace-name-input"
+                value={nameDraft}
+                onChange={(e) => setNameDraft(e.target.value)}
+                onBlur={handleSaveName}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleSaveName();
+                  if (e.key === 'Escape') setNameEditing(false);
+                }}
+                autoFocus
+              />
+            ) : (
+              <span onClick={() => currentUserIsAdmin && setNameEditing(true)} className={cn('workspace-name', currentUserIsAdmin && 'workspace-name-editable')}>
+                {workspace?.name}
+              </span>
+            )}
+          </h2>
+          <p className="view-subtitle">
+            Created {workspace?.createdAt ? new Date(workspace.createdAt).toLocaleDateString() : '—'}
+          </p>
+        </div>
+        <div className="view-actions">
+          {currentUserIsAdmin && (
+            <>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => {
+                  modal.open({
+                    title: 'Invite Members',
+                    children: <InviteDialog workspaceId={workspaceId} onInviteCreated={loadInvites} />,
+                    width: 480,
+                  });
+                }}
+              >
+                <Plus size={14} />
+                Invite
+              </Button>
+              <Button variant="danger" size="sm" onClick={handleDeleteWorkspace}>
+                <Trash2 size={14} />
+                Delete
+              </Button>
+            </>
+          )}
+        </div>
+      </header>
+
+      {error && (
+        <div className="workspace-error-banner">
+          <span>{error}</span>
+          <button onClick={() => setError(null)}>×</button>
+        </div>
+      )}
+
+      <div className="workspace-sections">
+        {/* Members section */}
+        <section className="workspace-section">
+          <h3 className="workspace-section-title">Members ({members.length})</h3>
+          <div className="workspace-members-list">
+            {members.map((member) => {
+              const RoleIcon = ROLE_ICONS[member.role] || Eye;
+              return (
+                <div key={member.userId} className="workspace-member">
+                  <div className="workspace-member-info">
+                    <div className="workspace-member-avatar">
+                      {member.name?.[0]?.toUpperCase() || member.email[0].toUpperCase()}
+                    </div>
+                    <div className="workspace-member-details">
+                      <span className="workspace-member-name">{member.name || 'Unknown'}</span>
+                      <span className="workspace-member-email">{member.email}</span>
+                    </div>
+                  </div>
+                  <div className="workspace-member-actions">
+                    <span className={cn('workspace-member-role', ROLE_COLORS[member.role])}>
+                      <RoleIcon size={12} />
+                      {member.role}
+                    </span>
+                    {currentUserIsAdmin && member.role !== 'admin' && (
+                      <>
+                        <select
+                          className="workspace-role-select"
+                          value={member.role}
+                          onChange={(e) => handleUpdateRole(member.userId, e.target.value)}
+                        >
+                          <option value="viewer">Viewer</option>
+                          <option value="editor">Editor</option>
+                          <option value="admin">Admin</option>
+                        </select>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          iconOnly
+                          onClick={() => handleRemoveMember(member.userId)}
+                          title="Remove member"
+                        >
+                          <Trash2 size={13} />
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* Pending invites section */}
+        {currentUserIsAdmin && (
+          <section className="workspace-section">
+            <h3 className="workspace-section-title">Pending Invites ({invites.length})</h3>
+            {invites.length === 0 ? (
+              <p className="workspace-empty">No pending invites</p>
+            ) : (
+              <div className="workspace-invites-list">
+                {invites.map((inv) => (
+                  <div key={inv.token} className="workspace-invite">
+                    <span className="workspace-invite-email">{inv.email}</span>
+                    <span className={cn('workspace-invite-role', ROLE_COLORS[inv.role])}>{inv.role}</span>
+                    <span className="workspace-invite-expiry">
+                      Expires {new Date(inv.expiresAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+// src/web/views/memory/FromScreenshotPanel.tsx — v5.0.0
+//
+// Memory tab panel that wraps ScreenshotOCR for the three-column Memory layout.
+// Provides a self-contained screenshot → OCR → save workflow.
+
+import { ScreenshotOCR } from '../../components/ScreenshotOCR';
+import { Card } from '../../components/Card';
+
+type Props = {
+  refreshKey: number;
+};
+
+export function FromScreenshotPanel({ refreshKey: _refreshKey }: Props) {
+  return (
+    <div className="memory-panel-content">
+      <Card variant="outlined" className="memory-panel-card">
+        <div className="memory-panel-body">
+          <ScreenshotOCR />
+        </div>
+      </Card>
+    </div>
+  );
+}