@polderlabs/bizar 4.5.0 → 4.5.2

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

@@ -162,6 +162,8 @@
   cursor: grab;
   transition: transform var(--motion-fast) var(--ease),
     border-color var(--motion-base) var(--ease);
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
 }
 
 .task-card:hover {

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

@@ -0,0 +1,141 @@
+// src/web/views/Memory.tsx — v4.7.0 dedicated Memory tab.
+//
+// Three-column layout: left rail (source picker), main panel (per-source UI),
+// and a top stat row + a health hero at the top of every panel for context.
+//
+// The Memory subsystem has 4 sources (LightRAG, Obsidian vault, git sync,
+// semantic search) plus a config panel and a high-level overview. Each is a
+// standalone component under views/memory/.
+
+import React, { useCallback, useState } from 'react';
+import {
+  Brain,
+  FileText,
+  GitBranch,
+  LayoutDashboard,
+  RefreshCw,
+  Search as SearchIcon,
+  Sliders,
+} from 'lucide-react';
+import { Card } from '../components/Card';
+import { useToast } from '../components/Toast';
+import { cn } from '../lib/utils';
+import { MemoryOverview } from './memory/MemoryOverview';
+import { LightragPanel } from './memory/LightragPanel';
+import { ObsidianPanel } from './memory/ObsidianPanel';
+import { GitSyncPanel } from './memory/GitSyncPanel';
+import { SemanticSearchPanel } from './memory/SemanticSearchPanel';
+import { ConfigPanel } from './memory/ConfigPanel';
+
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config';
+
+type Props = {
+  snapshot: unknown;
+  settings: unknown;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+const SOURCES: Array<{
+  id: SubPanel;
+  label: string;
+  icon: typeof LayoutDashboard;
+}> = [
+  { id: 'overview', label: 'Overview', icon: LayoutDashboard },
+  { id: 'lightrag', label: 'LightRAG', icon: Brain },
+  { id: 'obsidian', label: 'Obsidian Vault', icon: FileText },
+  { id: 'git', label: 'Git Sync', icon: GitBranch },
+  { id: 'semantic', label: 'Semantic Search', icon: SearchIcon },
+  { id: 'config', label: 'Config', icon: Sliders },
+];
+
+function MemoryInner(_props: Props) {
+  const toast = useToast();
+  const [active, setActive] = useState<SubPanel>('overview');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const refresh = useCallback(() => {
+    setRefreshKey((k) => k + 1);
+  }, []);
+
+  const onRefreshAll = useCallback(async () => {
+    refresh();
+    toast.info('Refreshing memory…', 1200);
+  }, [refresh, toast]);
+
+  const renderPanel = () => {
+    switch (active) {
+      case 'overview':
+        return <MemoryOverview refreshKey={refreshKey} onRefresh={refresh} setActiveSubPanel={setActive} />;
+      case 'lightrag':
+        return <LightragPanel refreshKey={refreshKey} />;
+      case 'obsidian':
+        return <ObsidianPanel refreshKey={refreshKey} />;
+      case 'git':
+        return <GitSyncPanel refreshKey={refreshKey} />;
+      case 'semantic':
+        return <SemanticSearchPanel refreshKey={refreshKey} />;
+      case 'config':
+        return <ConfigPanel refreshKey={refreshKey} />;
+      default:
+        return <Card>Unknown panel: {active}</Card>;
+    }
+  };
+
+  return (
+    <div className="view view-memory memory-tab">
+      {/* ── Header ─────────────────────────────────────────────── */}
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Brain size={18} /> Memory
+          </h2>
+          <p className="view-subtitle">
+            LightRAG, Obsidian vault, git sync, and semantic search — all in one place.
+          </p>
+        </div>
+        <div className="view-actions">
+          <button
+            type="button"
+            className="icon-btn"
+            onClick={onRefreshAll}
+            aria-label="Refresh memory"
+            title="Refresh"
+          >
+            <RefreshCw size={14} />
+          </button>
+        </div>
+      </header>
+
+      <div className="memory-tab-body">
+        {/* ── Source rail ─────────────────────────────────────── */}
+        <nav className="memory-source-rail" aria-label="Memory sources">
+          {SOURCES.map((s) => {
+            const Icon = s.icon;
+            const isActive = active === s.id;
+            return (
+              <button
+                key={s.id}
+                type="button"
+                role="tab"
+                aria-selected={isActive}
+                className={cn('memory-source-button', isActive && 'memory-source-button-active')}
+                onClick={() => setActive(s.id)}
+              >
+                <Icon size={16} aria-hidden />
+                <span>{s.label}</span>
+              </button>
+            );
+          })}
+        </nav>
+
+        {/* ── Main panel ─────────────────────────────────────── */}
+        <div className="memory-main" key={active}>
+          {renderPanel()}
+        </div>
+      </div>
+    </div>
+  );
+}
+export const Memory = React.memo(MemoryInner);

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

@@ -8,7 +8,7 @@
 // (written by minimax.mjs after every chatCompletion / fetchRemains call).
 // The Usage Analytics tab is only shown when the key is configured.
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Coins,
   RefreshCw,
@@ -196,7 +196,7 @@ type TimeRange = '24h' | '7d' | '30d' | 'custom';
 
 // ─── Main component ────────────────────────────────────────────────────
 
-export function MiniMaxUsage({ activeTab, setActiveTab }: Props) {
+function MiniMaxUsageInner({ activeTab, setActiveTab }: Props) {
   // Share state between tabs.
   const [view, setView] = useState<'quota' | 'analytics'>('quota');
   const toast = useToast();
@@ -921,3 +921,4 @@ function OnboardingWizard({ step, setStep, keyDraft, setKeyDraft, showKey, setSh
     </div>
   );
 }
+export const MiniMaxUsage = React.memo(MiniMaxUsageInner);

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

@@ -1,5 +1,5 @@
 // src/views/Overview.tsx — v3.7.0 activity cards + SSE stream.
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Bot,
   CheckSquare,
@@ -30,6 +30,7 @@ import {
 } from 'lucide-react';
 import { Card, CardTitle, CardMeta } from '../components/Card';
 import { Button } from '../components/Button';
+import { MemoryStatusCard } from './memory/MemoryStatusCard';
 import { EmptyState } from '../components/EmptyState';
 import { Spinner } from '../components/Spinner';
 import { useToast } from '../components/Toast';
@@ -48,7 +49,7 @@ type Props = {
   refreshSnapshot: () => Promise<void>;
 };
 
-export function Overview({
+function OverviewInner({
   snapshot,
   settings,
   setActiveTab,
@@ -461,6 +462,8 @@ export function Overview({
         )}
       </Card>
 
+      <MemoryStatusCard setActiveTab={setActiveTab} />
+
       <div className="overview-cols">
         <Card>
           <CardTitle>Mods</CardTitle>
@@ -810,3 +813,5 @@ function ActivityFeedItem({
     </div>
   );
 }
+const OverviewMemo = React.memo(OverviewInner);
+export { OverviewMemo as Overview };

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

@@ -36,6 +36,7 @@ import { Card, CardTitle, CardMeta } from '../components/Card';
 import { useToast } from '../components/Toast';
 import { api } from '../lib/api';
 import { cn } from '../lib/utils';
+import { HeadroomSettingsCard } from '../components/HeadroomSettings';
 import { Ws } from '../lib/ws';
 import {
   applyTheme,
@@ -73,6 +74,21 @@ const PRESET_THEMES = [
   { name: 'Mono', accent: '#6b7280' },
 ];
 
+// v5.0.0 — Headroom default settings
+const DEFAULT_HEADROOM_SETTINGS = {
+  enabled: true,
+  autoInstall: true,
+  port: 8787,
+  host: '127.0.0.1',
+  outputShaper: false,
+  telemetry: false,
+  budget: 0,
+  backend: 'anthropic',
+  autoStart: true,
+  autoWrap: true,
+  routeAllProviders: true,
+};
+
 const FONT_FAMILIES = [
   'Inter',
   'system-ui',
@@ -469,7 +485,7 @@ function UpdatesCard() {
   );
 }
 
-export function SettingsView({ settings: initial, refreshSnapshot }: Props) {
+function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
   const toast = useToast();
   const [settings, setSettings] = useState<Settings>(initial);
   const [dirty, setDirty] = useState(false);
@@ -552,6 +568,7 @@ export function SettingsView({ settings: initial, refreshSnapshot }: Props) {
     { id: 'dashboard', label: 'Dashboard' },
     { id: 'background', label: 'Background' },
     { id: 'system-llm', label: 'System LLM' },
+    { id: 'headroom', label: 'Headroom' },
     { id: 'updates', label: 'Updates' },
     { id: 'activity-log', label: 'Activity' },
     { id: 'about', label: 'About' },
@@ -1586,6 +1603,19 @@ export function SettingsView({ settings: initial, refreshSnapshot }: Props) {
         </Card>
 </div>
 
+        <div data-section="headroom" style={{display: (activeSection === null || activeSection === 'headroom') ? 'block' : 'none'}}>
+          <HeadroomSettingsCard
+            settings={settings.headroom || DEFAULT_HEADROOM_SETTINGS}
+            onPatch={(patch) => {
+              setSettings((cur) => ({
+                ...cur,
+                headroom: { ...(cur.headroom || DEFAULT_HEADROOM_SETTINGS), ...patch },
+              }));
+              setDirty(true);
+            }}
+          />
+        </div>
+
       <PairDeviceCard />
 
       <div style={{display: (activeSection === null || activeSection === 'activity-log') ? 'block' : 'none'}}>
@@ -1791,3 +1821,4 @@ function ActivityLogCard() {
     </Card>
   );
 }
+export const SettingsView = React.memo(SettingsViewInner);

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

@@ -1,5 +1,5 @@
 // src/views/Skills.tsx — v4.0.0 skills browser: scans all local SKILL.md sources.
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Sparkles,
   Search,
@@ -58,7 +58,7 @@ const SOURCE_ICON: Record<string, typeof Package> = {
   project: Folder,
 };
 
-export function Skills({ snapshot, refreshSnapshot }: Props) {
+function SkillsInner({ snapshot, refreshSnapshot }: Props) {
   const toast = useToast();
   const modal = useModal();
   const [skills, setSkills]       = useState<Skill[]>([]);
@@ -377,3 +377,4 @@ function highlightMatch(text: string, q: string): React.ReactNode {
     </>
   );
 }
+export const Skills = React.memo(SkillsInner);

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

@@ -20,7 +20,7 @@
 // We keep the API contract (statuses: queued/doing/done/blocked/backlog)
 // so the dashboard doesn't break the existing server, tasks store, and
 // tests. The UI maps API statuses to friendlier labels.
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   CheckSquare,
   Plus,
@@ -76,7 +76,7 @@ const COLUMNS: { id: Task['status']; label: string; kind: StatusKind }[] = [
 const PRIORITIES = ['low', 'normal', 'high'] as const;
 type Priority = (typeof PRIORITIES)[number];
 
-export function Tasks({ snapshot, refreshSnapshot, setActiveTab }: Props) {
+function TasksInner({ snapshot, refreshSnapshot, setActiveTab }: Props) {
   const toast = useToast();
   const modal = useModal();
   const [tasks, setTasks] = useState<Task[]>(snapshot.tasks || []);
@@ -771,4 +771,5 @@ function openEditTaskModal(
       </div>
     ),
   });
-}
+}
+export const Tasks = React.memo(TasksInner);

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

@@ -0,0 +1,289 @@
+// src/web/views/memory/ConfigPanel.tsx — global memory config + per-system toggles.
+import { useEffect, useState } from 'react';
+import {
+  Brain,
+  Database,
+  FileText,
+  GitBranch,
+  Loader2,
+  Plug,
+  Save,
+  Sparkles,
+} from 'lucide-react';
+import { Button } from '../../components/Button';
+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';
+
+type GlobalConfig = {
+  lightrag?: { enabled?: boolean; url?: string; llm?: string; embedding?: string };
+  obsidian?: { vaultPath?: string; syncInterval?: number };
+  git?: { repoPath?: string; remoteUrl?: string; branch?: string; autoSync?: boolean };
+};
+
+type Props = { refreshKey: number };
+
+export function ConfigPanel({ refreshKey }: Props) {
+  const toast = useToast();
+  const [cfg, setCfg] = useState<GlobalConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [tests, setTests] = useState<Array<{ name: string; pass: boolean; detail: string }> | null>(null);
+  const [testing, setTesting] = useState(false);
+
+  const reload = async () => {
+    setLoading(true);
+    try {
+      const r = await api.get<{ config: GlobalConfig }>('/memory/config/global');
+      setCfg(r.config);
+    } catch (err) {
+      toast.error(`Config load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  const update = (block: keyof GlobalConfig, key: string, value: unknown) => {
+    setCfg((cur) => cur ? { ...cur, [block]: { ...(cur[block] || {}), [key]: value } } : cur);
+  };
+
+  const onSave = async () => {
+    if (!cfg) return;
+    setSaving(true);
+    try {
+      await api.put('/memory/config/global', cfg);
+      toast.success('Config saved.');
+    } catch (err) {
+      toast.error(`Save failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const onTest = async () => {
+    setTesting(true);
+    try {
+      const r = await api.post<{ ok: boolean; checks: Array<{ name: string; pass: boolean; detail: string }> }>(
+        '/memory/test-git',
+        {},
+      );
+      setTests(r.checks);
+    } catch (err) {
+      toast.error(`Test failed: ${(err as Error).message}`);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (loading && !cfg) {
+    return (
+      <div className="view-loading">
+        <Spinner size="md" />
+        <p>Loading config…</p>
+      </div>
+    );
+  }
+  if (!cfg) return <div className="muted">No config available.</div>;
+
+  return (
+    <div className="memory-panel-content">
+      {/* ── LightRAG ──────────────────────────────────────────────── */}
+      <Card>
+        <CardTitle><Brain size={14} /> LightRAG</CardTitle>
+        <CardMeta>URL + model overrides. Server-side defaults from <code>opencode Zen free tier</code>.</CardMeta>
+        <div className="memory-config-form">
+          <Row label="Enabled" inline>
+            <label className="memory-switch">
+              <input
+                type="checkbox"
+                checked={!!cfg.lightrag?.enabled}
+                onChange={(e) => update('lightrag', 'enabled', e.target.checked)}
+              />
+              <span>{cfg.lightrag?.enabled ? 'on' : 'off'}</span>
+            </label>
+          </Row>
+          <Row label="URL">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.lightrag?.url || ''}
+              onChange={(e) => update('lightrag', 'url', e.target.value)}
+              placeholder="http://127.0.0.1:9621"
+            />
+          </Row>
+          <Row label="LLM model">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.lightrag?.llm || ''}
+              onChange={(e) => update('lightrag', 'llm', e.target.value)}
+              placeholder="opencode/gpt-5-nano"
+            />
+          </Row>
+          <Row label="Embedding">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.lightrag?.embedding || ''}
+              onChange={(e) => update('lightrag', 'embedding', e.target.value)}
+              placeholder="opencode/text-embedding-3-small"
+            />
+          </Row>
+        </div>
+      </Card>
+
+      {/* ── Obsidian ──────────────────────────────────────────────── */}
+      <Card>
+        <CardTitle><FileText size={14} /> Obsidian vault</CardTitle>
+        <CardMeta>Path + sync cadence for the markdown vault.</CardMeta>
+        <div className="memory-config-form">
+          <Row label="Vault path">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.obsidian?.vaultPath || ''}
+              onChange={(e) => update('obsidian', 'vaultPath', e.target.value)}
+              placeholder="/home/me/vault"
+            />
+          </Row>
+          <Row label="Sync interval (seconds)">
+            <input
+              type="number"
+              min={0}
+              max={2592000}
+              className="input mono"
+              value={cfg.obsidian?.syncInterval ?? 300}
+              onChange={(e) => update('obsidian', 'syncInterval', Number(e.target.value))}
+            />
+          </Row>
+        </div>
+      </Card>
+
+      {/* ── Git ───────────────────────────────────────────────────── */}
+      <Card>
+        <CardTitle><GitBranch size={14} /> Git sync</CardTitle>
+        <CardMeta>Repo path, remote, branch, and auto-sync toggle.</CardMeta>
+        <div className="memory-config-form">
+          <Row label="Repo path">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.git?.repoPath || ''}
+              onChange={(e) => update('git', 'repoPath', e.target.value)}
+              placeholder="/path/to/repo"
+            />
+          </Row>
+          <Row label="Remote URL">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.git?.remoteUrl || ''}
+              onChange={(e) => update('git', 'remoteUrl', e.target.value)}
+              placeholder="git@github.com:org/repo.git"
+            />
+          </Row>
+          <Row label="Branch">
+            <input
+              type="text"
+              className="input mono"
+              value={cfg.git?.branch || 'main'}
+              onChange={(e) => update('git', 'branch', e.target.value)}
+              placeholder="main"
+            />
+          </Row>
+          <Row label="Auto-sync" inline>
+            <label className="memory-switch">
+              <input
+                type="checkbox"
+                checked={!!cfg.git?.autoSync}
+                onChange={(e) => update('git', 'autoSync', e.target.checked)}
+              />
+              <span>{cfg.git?.autoSync ? 'on' : 'off'}</span>
+            </label>
+          </Row>
+        </div>
+      </Card>
+
+      {/* ── CCR (placeholder when Headroom is installed) ─────────── */}
+      <Card>
+        <CardTitle>
+          <Sparkles size={14} /> CCR (Compress-Cache-Retrieve)
+        </CardTitle>
+        <CardMeta>
+          Reversible compression for very long conversations. Enabled automatically
+          when the Headroom mod is installed.
+        </CardMeta>
+        <div className="muted text-sm">
+          See Settings → Headroom for CCR configuration. This panel will surface
+          retention + compression-ratio controls when the mod is active.
+        </div>
+      </Card>
+
+      {/* ── Test all connections ─────────────────────────────────── */}
+      <Card>
+        <CardTitle>
+          <Plug size={14} /> Connection tests
+        </CardTitle>
+        <CardMeta>Verify the configured git repo, remote, and path.</CardMeta>
+        <div className="memory-action-row">
+          <Button variant="secondary" onClick={onTest} disabled={testing}>
+            {testing ? <Loader2 size={12} className="memory-spin" /> : <Plug size={12} />}
+            Test git connection
+          </Button>
+          <Button variant="primary" onClick={onSave} disabled={saving}>
+            {saving ? <Loader2 size={12} className="memory-spin" /> : <Save size={12} />}
+            Save config
+          </Button>
+        </div>
+        {tests && tests.length > 0 && (
+          <ul className="memory-check-list" style={{ marginTop: 12 }}>
+            {tests.map((t, i) => (
+              <li key={i} className="memory-check-row">
+                <span className="memory-check-icon">
+                  <span className={cn('memory-pill', t.pass ? 'memory-pill-ok' : 'memory-pill-warn')}>
+                    {t.pass ? 'OK' : 'FAIL'}
+                  </span>
+                </span>
+                <span className="memory-check-name">{t.name}</span>
+                <span className="memory-check-detail muted">{t.detail}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  children,
+  inline,
+}: {
+  label: string;
+  children: React.ReactNode;
+  inline?: boolean;
+}) {
+  if (inline) {
+    return (
+      <div className="memory-config-row-inline">
+        <div className="memory-config-row-label">{label}</div>
+        <div className="memory-config-row-control">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <label className="memory-config-row-stack">
+      <span>{label}</span>
+      {children}
+    </label>
+  );
+}
+