@polderlabs/bizar 4.7.2 → 4.9.0

package/bizar-dash/src/web/mobile/views/QrCodePanel.tsx

@@ -0,0 +1,69 @@
+// src/mobile/views/QrCodePanel.tsx — lazy-loaded QR code panel.
+// Split from MobileSettings to keep qrcode.react (~30 KB) out of the
+// mobile entry chunk; it is only loaded when the user navigates to
+// the Companion App section and taps "Generate QR Code".
+import { useEffect, useState } from 'react';
+import { RefreshCw } from 'lucide-react';
+
+type PairSession = { token: string; qrPayload: string; publicUrl: string; expiresAt: number };
+
+function formatCountdown(ms: number): string {
+  if (ms <= 0) return 'expired';
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  const r = s % 60;
+  return `${m}:${String(r).padStart(2, '0')}`;
+}
+
+export function QrCodePanel({ pair, onStart }: {
+  pair: PairSession;
+  onStart: () => void;
+}) {
+  const [QRCodeSVG, setQRCodeSVG] = useState<React.ComponentType<{ value: string; size: number; level: string }> | null>(null);
+  const [remaining, setRemaining] = useState(() => pair.expiresAt - Date.now());
+  const expired = remaining <= 0;
+
+  useEffect(() => {
+    import('qrcode.react').then((mod) => {
+      setQRCodeSVG(mod.QRCodeSVG as React.ComponentType<{ value: string; size: number; level: string }>);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!pair) return;
+    const tick = setInterval(() => {
+      setRemaining(pair.expiresAt - Date.now());
+    }, 1000);
+    return () => clearInterval(tick);
+  }, [pair]);
+
+  if (!QRCodeSVG) {
+    return (
+      <div style={{ textAlign: 'center', padding: '16px' }}>
+        <span style={{ color: 'var(--text-dim)', fontSize: 13 }}>Loading QR library…</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <div style={{ background: '#fff', padding: 12, borderRadius: 12, display: 'inline-block' }}>
+        <QRCodeSVG value={pair.qrPayload} size={180} level="M" />
+      </div>
+      <div style={{ marginTop: 8, fontSize: 12 }}>
+        Expires in <strong>{formatCountdown(remaining)}</strong>
+      </div>
+      <div className="mono" style={{ fontSize: 10, wordBreak: 'break-all', marginTop: 4 }}>{pair.publicUrl}</div>
+      {expired && (
+        <button
+          type="button"
+          className="mobile-btn"
+          onClick={onStart}
+          style={{ marginTop: 12, width: '100%' }}
+        >
+          <RefreshCw size={14} /> Generate new QR
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -952,4 +952,87 @@ dl.memory-config-row dd {
 
 .memory-status-card-sub {
   font-size: 11px;
-}
+}
+
+/* ── Memory Graph ─────────────────────────────────────────────────────── */
+
+.memory-graph-canvas {
+  display: block;
+  background: var(--bg, #0b0e14);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius, 8px);
+  user-select: none;
+}
+
+.memory-graph-canvas-svg {
+  height: 480px;
+}
+
+.memory-graph-node {
+  transition: opacity var(--motion-fast, 120ms);
+}
+
+.memory-graph-node:hover circle {
+  opacity: 1;
+}
+
+.memory-graph-tooltip {
+  position: absolute;
+  padding: 6px 10px;
+  background: var(--bg-elev, #12161f);
+  border: 1px solid var(--border, #232a39);
+  border-radius: var(--radius-sm, 6px);
+  font-size: 12px;
+  color: var(--text, #c9d1d9);
+  pointer-events: none;
+  z-index: 10;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.memory-graph-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.memory-graph-search-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.memory-graph-legend {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.memory-graph-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-dim, #b4bcd0);
+}
+
+.memory-graph-legend-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.memory-graph-stats {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text, #c9d1d9);
+}

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

@@ -77,6 +77,86 @@
   min-width: 0;
 }
 
+/* ─── Setting flash animation (quick-jump highlight) ─── */
+.setting-flash {
+  animation: setting-flash 2s ease-out;
+}
+
+@keyframes setting-flash {
+  0%, 100% { background-color: transparent; }
+  50% { background-color: var(--accent, rgba(139, 92, 246, 0.1)); border-radius: 6px; }
+}
+
+/* Highlight matched terms in search results */
+.settings-search-result-label mark {
+  background: var(--accent, rgba(139, 92, 246, 0.2));
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+/* Recent searches dropdown */
+.settings-search-recent {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-2);
+  z-index: 100;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.settings-search-recent-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 2px;
+}
+
+.settings-search-recent-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+
+.settings-search-recent-clear {
+  font-size: 10px;
+  color: var(--accent-2);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.settings-search-recent-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--motion-fast);
+}
+
+.settings-search-recent-item:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
 /* Search within settings */
 .settings-search {
   position: relative;

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

@@ -13,6 +13,7 @@ import {
   FileText,
   GitBranch,
   LayoutDashboard,
+  Network,
   RefreshCw,
   Search as SearchIcon,
   Sliders,
@@ -26,8 +27,9 @@ 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';
 
-type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config';
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph';
 
 type Props = {
   snapshot: unknown;
@@ -48,6 +50,7 @@ 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 },
 ];
 
 function MemoryInner(_props: Props) {
@@ -78,6 +81,8 @@ function MemoryInner(_props: Props) {
         return <SemanticSearchPanel refreshKey={refreshKey} />;
       case 'config':
         return <ConfigPanel refreshKey={refreshKey} />;
+      case 'graph':
+        return <MemoryGraphPanel refreshKey={refreshKey} />;
       default:
         return <Card>Unknown panel: {active}</Card>;
     }

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';
@@ -53,6 +54,99 @@ const SECTION_LINKS = [
   { id: 'backup', label: 'Backup' },
 ] 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 +239,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) => (

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>
+  );
+}

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

@@ -0,0 +1,192 @@
+// src/web/views/memory/MemoryGraphPanel.tsx — Memory Graph panel (v4.9).
+//
+// Interactive SVG knowledge graph spanning LightRAG entities + Obsidian wikilinks.
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { Network, RefreshCw } from 'lucide-react';
+import { Card, CardMeta, CardTitle } from '../../components/Card';
+import { Spinner } from '../../components/Spinner';
+import { useToast } from '../../components/Toast';
+import { api } from '../../lib/api';
+import { cn } from '../../lib/utils';
+import { MemoryGraphView, type GraphNode, type GraphData } from './MemoryGraphView';
+import { MemoryGraphLegend } from './MemoryGraphLegend';
+
+type GraphResponse = {
+  nodes: GraphNode[];
+  edges: Array<{ source: string; target: string; type: string; weight: number }>;
+  totalNodes: number;
+  totalEdges: number;
+};
+
+type Props = { refreshKey: number };
+
+export function MemoryGraphPanel({ refreshKey }: Props) {
+  const toast = useToast();
+  const [data, setData] = useState<GraphData>({ nodes: [], edges: [] });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('');
+  const [depth, setDepth] = useState(2);
+  const [root, setRoot] = useState('');
+  const [stats, setStats] = useState<{ totalNodes: number; totalEdges: number } | null>(null);
+  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
+
+  const fetchGraph = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({ limit: '200' });
+      if (root) params.set('root', root);
+      params.set('depth', String(depth));
+      const res = await api.get<GraphResponse>(`/memory/graph?${params}`);
+      setData({ nodes: res.nodes || [], edges: res.edges || [] });
+      setStats({ totalNodes: res.totalNodes ?? res.nodes?.length ?? 0, totalEdges: res.totalEdges ?? res.edges?.length ?? 0 });
+    } catch (err) {
+      setError((err as Error).message);
+      toast.error(`Graph load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [root, depth, toast]);
+
+  useEffect(() => {
+    fetchGraph();
+  }, [fetchGraph, refreshKey]);
+
+  const onNodeClick = useCallback((node: GraphNode) => {
+    setSelectedNode((prev) => (prev?.id === node.id ? null : node));
+  }, []);
+
+  // Filter nodes by label.
+  const filteredData = filter.trim()
+    ? {
+        nodes: data.nodes.filter((n) => n.label.toLowerCase().includes(filter.toLowerCase())),
+        edges: data.edges.filter(
+          (e) =>
+            data.nodes.some((n) => n.id === e.source && n.label.toLowerCase().includes(filter.toLowerCase())) ||
+            data.nodes.some((n) => n.id === e.target && n.label.toLowerCase().includes(filter.toLowerCase())),
+        ),
+      }
+    : data;
+
+  return (
+    <div className="memory-panel-content">
+      {/* ── Controls ─────────────────────────────────────────────── */}
+      <Card>
+        <CardTitle>
+          <Network size={14} /> Memory Graph
+        </CardTitle>
+        <CardMeta>Interactive knowledge graph — LightRAG entities + Obsidian wikilinks. Drag to pan, scroll to zoom.</CardMeta>
+
+        <div className="memory-graph-controls">
+          <div className="memory-graph-search-row">
+            <label htmlFor="graph-filter" className="sr-only">Filter nodes</label>
+            <input
+              id="graph-filter"
+              type="text"
+              className="input"
+              placeholder="Filter nodes…"
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              style={{ maxWidth: 240 }}
+            />
+            <input
+              type="text"
+              className="input"
+              placeholder="Root note id (optional)"
+              value={root}
+              onChange={(e) => setRoot(e.target.value)}
+              style={{ maxWidth: 240 }}
+              title="Start from a specific note"
+            />
+            <label htmlFor="graph-depth" className="sr-only">Depth</label>
+            <span className="muted text-sm" style={{ whiteSpace: 'nowrap' }}>
+              Depth
+              <input
+                id="graph-depth"
+                type="range"
+                min={1}
+                max={3}
+                value={depth}
+                onChange={(e) => setDepth(parseInt(e.target.value, 10))}
+                style={{ marginLeft: 8, verticalAlign: 'middle' }}
+              />
+              {depth}
+            </span>
+            <button
+              type="button"
+              className="icon-btn"
+              onClick={fetchGraph}
+              title="Refresh graph"
+              disabled={loading}
+            >
+              <RefreshCw size={14} className={loading ? 'memory-spin' : ''} />
+            </button>
+          </div>
+
+          <MemoryGraphLegend />
+        </div>
+      </Card>
+
+      {/* ── Graph canvas ─────────────────────────────────────────── */}
+      <Card>
+        {loading && !data.nodes.length ? (
+          <div className="view-loading">
+            <Spinner size="lg" />
+            <p>Loading graph…</p>
+          </div>
+        ) : error && !data.nodes.length ? (
+          <div className="muted text-sm">Failed to load graph: {error}</div>
+        ) : data.nodes.length === 0 ? (
+          <div className="muted text-sm">
+            No graph data available. Index some notes first with LightRAG or add wikilinks to your vault.
+          </div>
+        ) : (
+          <div style={{ position: 'relative' }}>
+            <MemoryGraphView
+              data={filteredData}
+              onNodeClick={onNodeClick}
+              className="memory-graph-canvas-svg"
+            />
+            {filter && (
+              <div className="text-xs muted" style={{ marginTop: 4 }}>
+                Showing {filteredData.nodes.length} of {data.nodes.length} nodes
+              </div>
+            )}
+          </div>
+        )}
+      </Card>
+
+      {/* ── Node detail ──────────────────────────────────────────── */}
+      {selectedNode && (
+        <Card>
+          <CardTitle>{selectedNode.label}</CardTitle>
+          <CardMeta>
+            <code>{selectedNode.id}</code>
+          </CardMeta>
+          <dl className="memory-config-row">
+            <dt>Type</dt>
+            <dd><code>{selectedNode.type}</code></dd>
+            <dt>Group</dt>
+            <dd><code>{selectedNode.group}</code></dd>
+            <dt>Size</dt>
+            <dd>{selectedNode.size}</dd>
+          </dl>
+        </Card>
+      )}
+
+      {/* ── Stats footer ─────────────────────────────────────────── */}
+      {stats && (
+        <Card>
+          <div className="memory-graph-stats">
+            <span>{stats.totalNodes} node{stats.totalNodes !== 1 ? 's' : ''}</span>
+            <span className="muted">·</span>
+            <span>{stats.totalEdges} edge{stats.totalEdges !== 1 ? 's' : ''}</span>
+            {filter && <span className="muted">· {filteredData.nodes.length} shown</span>}
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}