@polderlabs/bizar 4.8.0 → 5.0.0

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

@@ -10,10 +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';
@@ -26,8 +30,12 @@ import { ObsidianPanel } from './memory/ObsidianPanel';
 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';
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph' | 'webclip' | 'screenshot' | 'voice';
 
 type Props = {
   snapshot: unknown;
@@ -48,6 +56,10 @@ const SOURCES: Array<{
   { id: 'git', label: 'Git Sync', icon: GitBranch },
   { 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) {
@@ -78,6 +90,14 @@ function MemoryInner(_props: Props) {
         return <SemanticSearchPanel refreshKey={refreshKey} />;
       case 'config':
         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>;
     }
@@ -92,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

@@ -7,6 +7,7 @@ import { api } from '../lib/api';
 import { cn } from '../lib/utils';
 import { applyTheme, applyThemeTokens, type Settings, type SettingsResponse, type Snapshot, type TailscaleStatus } from '../lib/types';
 
+import { SettingsSearch, type SettingsSection, type SettingsField } from '../components/SettingsSearch';
 import { ThemeSection } from './settings/ThemeSection';
 import { UpdatesSection } from './settings/UpdatesSection';
 import { GeneralSection } from './settings/GeneralSection';
@@ -22,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;
@@ -51,8 +53,102 @@ 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 ─── */
+const SETTINGS_SECTIONS: SettingsSection[] = [
+  { id: 'theme', label: 'Theme', fields: [
+    { key: 'theme.presets', label: 'Accent presets', section: 'theme' },
+    { key: 'theme.accent', label: 'Accent color', section: 'theme' },
+    { key: 'theme.success', label: 'Success color', section: 'theme' },
+    { key: 'theme.warning', label: 'Warning color', section: 'theme' },
+    { key: 'theme.error', label: 'Error color', section: 'theme' },
+    { key: 'theme.info', label: 'Info color', section: 'theme' },
+    { key: 'theme.fontFamily', label: 'Font family', section: 'theme' },
+    { key: 'theme.fontSize', label: 'Font size', section: 'theme' },
+    { key: 'theme.compactMode', label: 'Compact mode', section: 'theme' },
+    { key: 'theme.animations', label: 'Animations', section: 'theme' },
+  ] },
+  { id: 'updates', label: 'Updates', fields: [
+    { key: 'updates.channel', label: 'Update channel', section: 'updates' },
+  ] },
+  { id: 'layout', label: 'Layout', fields: [
+    { key: 'ui.layout', label: 'UI layout', section: 'layout' },
+    { key: 'ui.showHeader', label: 'Show header', section: 'layout' },
+    { key: 'ui.showStatusBar', label: 'Show status bar', section: 'layout' },
+    { key: 'ui.defaultTab', label: 'Default tab', section: 'layout' },
+  ] },
+  { id: 'general', label: 'General', fields: [
+    { key: 'defaultAgent', label: 'Default agent', section: 'general' },
+    { key: 'defaultModel', label: 'Model override', section: 'general' },
+  ] },
+  { id: 'network', label: 'Network', fields: [
+    { key: 'tailscale.enabled', label: 'Tailscale Serve', section: 'network' },
+    { key: 'tailscale.port', label: 'Tailscale port', section: 'network' },
+    { key: 'tailscale.https', label: 'Tailscale HTTPS', section: 'network' },
+    { key: 'tailscale.hostname', label: 'Tailscale hostname', section: 'network' },
+  ] },
+  { id: 'notifications', label: 'Notifications', fields: [
+    { key: 'notifications.onAgentComplete', label: 'Notify on agent complete', section: 'notifications' },
+    { key: 'notifications.onPlanApproval', label: 'Notify on plan approval', section: 'notifications' },
+  ] },
+  { id: 'auth', label: 'Auth', fields: [
+    { key: 'auth.enabled', label: 'Auth enabled', section: 'auth' },
+    { key: 'auth.loopback', label: 'Loopback mode', section: 'auth' },
+    { key: 'auth.token', label: 'Auth token', section: 'auth' },
+  ] },
+  { id: 'agents', label: 'Agents', fields: [
+    { key: 'agents.maxParallel', label: 'Max parallel agents', section: 'agents' },
+    { key: 'agents.stuckThresholdMs', label: 'Stuck threshold', section: 'agents' },
+    { key: 'agents.autoRestart', label: 'Auto restart', section: 'agents' },
+    { key: 'workflow.artifactsEnabled', label: 'Artifacts enabled', section: 'agents' },
+    { key: 'workflow.agentsDecideAutonomously', label: 'Autonomous decisions', section: 'agents' },
+  ] },
+  { id: 'dashboard', label: 'Dashboard', fields: [
+    { key: 'dashboard.autoLaunchWeb', label: 'Auto-launch web', section: 'dashboard' },
+    { key: 'dashboard.projectsDirectory', label: 'Projects directory', section: 'dashboard' },
+    { key: 'dashboard.allowedRoots', label: 'Allowed roots', section: 'dashboard' },
+  ] },
+  { id: 'background', label: 'Background', fields: [
+    { key: 'service.enabled', label: 'Background service', section: 'background' },
+    { key: 'service.autostart', label: 'Auto-start service', section: 'background' },
+  ] },
+  { id: 'system-llm', label: 'System LLM', fields: [
+    { key: 'systemLlm.enabled', label: 'System LLM enabled', section: 'system-llm' },
+  ] },
+  { id: 'headroom', label: 'Headroom', fields: [
+    { key: 'headroom.enabled', label: 'Headroom enabled', section: 'headroom' },
+    { key: 'headroom.port', label: 'Headroom port', section: 'headroom' },
+    { key: 'headroom.budget', label: 'Headroom budget', section: 'headroom' },
+    { key: 'headroom.backend', label: 'Headroom backend', section: 'headroom' },
+  ] },
+  { id: 'activity-log', label: 'Activity', fields: [
+    { key: 'activity.log', label: 'Activity log', section: 'activity-log' },
+  ] },
+  { id: 'about', label: 'About', fields: [
+    { key: 'about.version', label: 'Version', section: 'about' },
+    { key: 'about.homepage', label: 'Homepage', section: 'about' },
+    { key: 'about.license', label: 'License', section: 'about' },
+  ] },
+  { id: 'env-vars', label: 'Env Vars', fields: [
+    { key: 'env.add', label: 'Add variable', section: 'env-vars' },
+  ] },
+  { id: 'providers', label: 'Providers', fields: [
+    { key: 'providers.list', label: 'Provider list', section: 'providers' },
+  ] },
+  { id: 'memory', label: 'Memory', fields: [
+    { key: 'memory.config', label: 'Memory config', section: 'memory' },
+  ] },
+  { id: 'skills', label: 'Skills', fields: [
+    { key: 'skills.paths', label: 'Skill paths', section: 'skills' },
+  ] },
+  { id: 'backup', label: 'Backup', fields: [
+    { key: 'backup.create', label: 'Create backup', section: 'backup' },
+    { key: 'backup.restore', label: 'Restore backup', section: 'backup' },
+  ] },
+];
+
 function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
   const toast = useToast();
   const [settings, setSettings] = useState<Settings>(initial);
@@ -145,6 +241,8 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
         </div>
       </header>
 
+      <SettingsSearch sections={SETTINGS_SECTIONS} onJump={onJumpSection} />
+
       <nav className="settings-subnav" aria-label="Settings sections">
         <button type="button" className={cn('settings-subnav-button', 'settings-subnav-button-all', showAll && 'settings-subnav-button-active')} onClick={() => onJumpSection(null)} title="Show all settings sections">All</button>
         {SECTION_LINKS.map((s) => (
@@ -168,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>
+  );
+}

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

@@ -0,0 +1,29 @@
+// src/web/views/memory/MemoryGraphLegend.tsx — color legend for node groups.
+
+import React from 'react';
+import { cn } from '../../lib/utils';
+
+const LEGEND_ITEMS = [
+  { color: '#8b5cf6', label: 'Note / Default' },
+  { color: '#34d399', label: 'Entity (LightRAG)' },
+  { color: '#fbbf24', label: 'Concept (LightRAG)' },
+  { color: '#f87171', label: 'Root / Ungrouped' },
+];
+
+type Props = { className?: string };
+
+export function MemoryGraphLegend({ className }: Props) {
+  return (
+    <div className={cn('memory-graph-legend', className)}>
+      {LEGEND_ITEMS.map((item) => (
+        <span key={item.label} className="memory-graph-legend-item">
+          <span
+            className="memory-graph-legend-dot"
+            style={{ background: item.color }}
+          />
+          {item.label}
+        </span>
+      ))}
+    </div>
+  );
+}