@polderlabs/bizar 4.9.0 → 5.0.1

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

@@ -1,14 +1,13 @@
-// src/web/views/memory/ConfigPanel.tsx — global memory config + per-system toggles.
+// src/web/views/memory/ConfigPanel.tsx — simplified memory config.
 import { useEffect, useState } from 'react';
 import {
-  Brain,
-  Database,
-  FileText,
   GitBranch,
+  GitCommitHorizontal,
+  Download,
+  Upload,
   Loader2,
   Plug,
   Save,
-  Sparkles,
 } from 'lucide-react';
 import { Button } from '../../components/Button';
 import { Card, CardMeta, CardTitle } from '../../components/Card';
@@ -17,10 +16,19 @@ import { useToast } from '../../components/Toast';
 import { api } from '../../lib/api';
 import { cn } from '../../lib/utils';
 
+type GitConfig = {
+  remoteUrl?: string;
+};
+
 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 };
+  git?: GitConfig;
+};
+
+type SyncStatus = {
+  clean?: boolean;
+  branch?: string;
+  modified?: number;
+  untracked?: number;
 };
 
 type Props = { refreshKey: number };
@@ -30,6 +38,10 @@ export function ConfigPanel({ refreshKey }: Props) {
   const [cfg, setCfg] = useState<GlobalConfig | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [remoteUrl, setRemoteUrl] = useState('');
+  const [vaultPath] = useState<string>('');
+  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [tests, setTests] = useState<Array<{ name: string; pass: boolean; detail: string }> | null>(null);
   const [testing, setTesting] = useState(false);
 
@@ -38,6 +50,9 @@ export function ConfigPanel({ refreshKey }: Props) {
     try {
       const r = await api.get<{ config: GlobalConfig }>('/memory/config/global');
       setCfg(r.config);
+      setRemoteUrl(r.config?.git?.remoteUrl || '');
+      // Also fetch git status from the per-project vault
+      await loadSyncStatus();
     } catch (err) {
       toast.error(`Config load failed: ${(err as Error).message}`);
     } finally {
@@ -45,20 +60,32 @@ export function ConfigPanel({ refreshKey }: Props) {
     }
   };
 
+  const loadSyncStatus = async () => {
+    try {
+      const r = await api.get<{ ok: boolean; clean?: boolean; branch?: string; modified?: number; untracked?: number }>('/memory/git/status');
+      if (r.ok) {
+        setSyncStatus({
+          clean: r.clean,
+          branch: r.branch,
+          modified: r.modified,
+          untracked: r.untracked,
+        });
+      }
+    } catch {
+      // git status is best-effort
+    }
+  };
+
   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);
+      await api.put('/memory/config/global', { git: { remoteUrl } });
       toast.success('Config saved.');
     } catch (err) {
       toast.error(`Save failed: ${(err as Error).message}`);
@@ -67,6 +94,30 @@ export function ConfigPanel({ refreshKey }: Props) {
     }
   };
 
+  const runAction = async (action: 'pull' | 'push' | 'commit') => {
+    setActionLoading(action);
+    try {
+      if (action === 'pull') {
+        const r = await api.post<{ ok: boolean; output?: string }>('/memory/git/pull', {});
+        if (r.ok) toast.success('Pull successful.');
+        else toast.error(`Pull failed: ${r.output || 'unknown error'}`);
+      } else if (action === 'push') {
+        const r = await api.post<{ ok: boolean }>('/memory/git/push', {});
+        if (r.ok) toast.success('Push successful.');
+        else toast.error('Push failed.');
+      } else if (action === 'commit') {
+        const r = await api.post<{ ok: boolean; message?: string }>('/memory/git/commit', {});
+        if (r.ok) toast.success(`Committed: ${r.message}`);
+        else toast.error('Commit failed.');
+      }
+      await loadSyncStatus();
+    } catch (err) {
+      toast.error(`${action} failed: ${(err as Error).message}`);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
   const onTest = async () => {
     setTesting(true);
     try {
@@ -94,144 +145,75 @@ export function ConfigPanel({ refreshKey }: Props) {
 
   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 ───────────────────────────────────────────────────── */}
+      {/* ── Git sync ───────────────────────────────────────────────────── */}
       <Card>
         <CardTitle><GitBranch size={14} /> Git sync</CardTitle>
-        <CardMeta>Repo path, remote, branch, and auto-sync toggle.</CardMeta>
+        <CardMeta>Configure the git remote and sync your memory vault.</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 label="Vault path" inline>
+            <span className="memory-vault-path mono muted">{vaultPath || '(loading…)'}</span>
           </Row>
           <Row label="Remote URL">
             <input
               type="text"
               className="input mono"
-              value={cfg.git?.remoteUrl || ''}
-              onChange={(e) => update('git', 'remoteUrl', e.target.value)}
+              value={remoteUrl}
+              onChange={(e) => setRemoteUrl(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>
+          {syncStatus && (
+            <Row label="Status" inline>
+              <span className={cn('memory-pill', syncStatus.clean ? 'memory-pill-ok' : 'memory-pill-warn')}>
+                {syncStatus.clean ? 'clean' : 'dirty'}
+              </span>
+              {syncStatus.branch && (
+                <span className="muted" style={{ marginLeft: 8 }}>
+                  <GitBranch size={12} style={{ display: 'inline' }} /> {syncStatus.branch}
+                </span>
+              )}
+              {!syncStatus.clean && syncStatus.modified !== undefined && (
+                <span className="muted" style={{ marginLeft: 8 }}>
+                  {syncStatus.modified} modified, {syncStatus.untracked} untracked
+                </span>
+              )}
+            </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 className="memory-action-row" style={{ marginTop: 12 }}>
+          <Button
+            variant="secondary"
+            onClick={() => runAction('pull')}
+            disabled={actionLoading !== null}
+          >
+            {actionLoading === 'pull' ? <Loader2 size={12} className="memory-spin" /> : <Download size={12} />}
+            Pull
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => runAction('commit')}
+            disabled={actionLoading !== null}
+          >
+            {actionLoading === 'commit' ? <Loader2 size={12} className="memory-spin" /> : <GitCommitHorizontal size={12} />}
+            Commit
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => runAction('push')}
+            disabled={actionLoading !== null}
+          >
+            {actionLoading === 'push' ? <Loader2 size={12} className="memory-spin" /> : <Upload size={12} />}
+            Push
+          </Button>
         </div>
       </Card>
 
-      {/* ── Test all connections ─────────────────────────────────── */}
+      {/* ── Connection tests ─────────────────────────────────────────── */}
       <Card>
         <CardTitle>
           <Plug size={14} /> Connection tests
         </CardTitle>
-        <CardMeta>Verify the configured git repo, remote, and path.</CardMeta>
+        <CardMeta>Verify the configured git remote is reachable.</CardMeta>
         <div className="memory-action-row">
           <Button variant="secondary" onClick={onTest} disabled={testing}>
             {testing ? <Loader2 size={12} className="memory-spin" /> : <Plug size={12} />}
@@ -292,4 +274,3 @@ function Row({
     </label>
   );
 }
-

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/VaultFromClipboardPanel.tsx

@@ -0,0 +1,101 @@
+// src/web/views/memory/VaultFromClipboardPanel.tsx — v5.0.0
+//
+// Memory tab panel for pasting content directly into the vault.
+// Accepts URL + title + content text, saves via /api/clipboard/save.
+
+import { useState } from 'react';
+import { Clipboard, Loader2 } from 'lucide-react';
+import { Button } from '../../components/Button';
+import { Card, CardTitle } from '../../components/Card';
+import { useToast } from '../../components/Toast';
+import { api } from '../../lib/api';
+
+type Props = {
+  refreshKey: number;
+};
+
+export function VaultFromClipboardPanel({ refreshKey: _refreshKey }: Props) {
+  const toast = useToast();
+  const [url, setUrl] = useState('');
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleSave = async () => {
+    if (!content.trim()) {
+      toast.error('Content is required');
+      return;
+    }
+    setSaving(true);
+    try {
+      const r = await api.post<{ ok: boolean; notePath: string }>('/clipboard/save', {
+        url: url.trim() || undefined,
+        title: title.trim() || undefined,
+        content: content,
+        savedAt: new Date().toISOString(),
+      });
+      if (r.ok) {
+        toast.success(`Saved to ${r.notePath}`);
+        setUrl('');
+        setTitle('');
+        setContent('');
+      }
+    } catch (err) {
+      toast.error(`Save failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="memory-panel-content">
+      <Card variant="outlined" className="memory-panel-card">
+        <div className="memory-panel-body">
+          <div className="vault-clipboard-panel">
+            <div className="vault-clipboard-header">
+              <Clipboard size={16} />
+              <span>Paste Content</span>
+            </div>
+
+            <label className="field-label" htmlFor="clip-url">URL (optional)</label>
+            <input
+              id="clip-url"
+              type="text"
+              className="input"
+              placeholder="https://example.com"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+
+            <label className="field-label" htmlFor="clip-title" style={{ marginTop: 10 }}>Title (optional)</label>
+            <input
+              id="clip-title"
+              type="text"
+              className="input"
+              placeholder="Page title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+
+            <label className="field-label" htmlFor="clip-content" style={{ marginTop: 10 }}>Content *</label>
+            <textarea
+              id="clip-content"
+              className="input vault-clipboard-textarea mono text-sm"
+              rows={12}
+              placeholder="Paste or type content to save to your vault…"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+            />
+
+            <div className="vault-clipboard-actions" style={{ marginTop: 12 }}>
+              <Button variant="primary" size="sm" onClick={handleSave} disabled={saving || !content.trim()}>
+                {saving && <Loader2 size={12} className="spinner" />}
+                Save to Vault
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/bizar-dash/src/web/views/settings/AgentSection.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Server as ServerIcon, Globe, Save } from 'lucide-react';
 import { Card, CardTitle, CardMeta } from '../../components/Card';
 import { Button } from '../../components/Button';
+import { AutosaveField } from '../../components/AutosaveField';
 import { useToast } from '../../components/Toast';
 import { api } from '../../lib/api';
 import type { Settings } from '../../lib/types';
@@ -11,9 +12,11 @@ type Props = {
   settings: Settings;
   patchAgents: (patch: Partial<Settings['agents']>) => void;
   patchDashboard: (patch: Partial<Settings['dashboard']>) => void;
+  /** Called after state is patched; parent debounces the API save */
+  autoSave?: (key: keyof Settings, value: Settings[keyof Settings]) => void;
 };
 
-export function AgentSection({ settings, patchAgents, patchDashboard }: Props) {
+export function AgentSection({ settings, patchAgents, patchDashboard, autoSave }: Props) {
   const toast = useToast();
   const [pluginOptions, setPluginOptions] = useState<Record<string, number>>({});
 
@@ -139,19 +142,27 @@ export function AgentSection({ settings, patchAgents, patchDashboard }: Props) {
           <label className="field-label" htmlFor="set-allowed-roots">
             Additional allowed roots <span className="muted">(advanced)</span>
           </label>
-          <textarea
-            id="set-allowed-roots"
-            className="textarea"
-            rows={4}
-            placeholder="/workspace&#10;/srv/projects"
-            value={(settings.dashboard.allowedRoots ?? []).join('\n')}
-            onChange={(e) => {
-              const lines = e.target.value
-                .split('\n')
-                .map((l) => l.trim())
-                .filter(Boolean);
+          {/* key= forces re-mount when allowedRoots changes externally (e.g. reset/reload) */}
+          <AutosaveField
+            key={settings.dashboard.allowedRoots?.join('\n')}
+            initialValue={(settings.dashboard.allowedRoots ?? []).join('\n')}
+            delay={1500}
+            saveFn={async (v) => {
+              const lines = v.split('\n').map((l) => l.trim()).filter(Boolean);
               patchDashboard({ allowedRoots: lines });
+              autoSave?.('dashboard', { allowedRoots: lines } as Settings['dashboard']);
             }}
+            render={({ value, onChange, onBlur }) => (
+              <textarea
+                id="set-allowed-roots"
+                className="textarea"
+                rows={4}
+                placeholder="/workspace&#10;/srv/projects"
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                onBlur={onBlur}
+              />
+            )}
           />
           <p className="field-help">
             Optional. Add filesystem roots beyond your home directory that the file

package/bizar-dash/src/web/views/settings/EnvVarsSection.tsx

@@ -1,16 +1,15 @@
 // src/web/views/settings/EnvVarsSection.tsx
-// Placeholder — EnvVarManager integration to be added in a future PR.
 import React from 'react';
+import { KeyRound } from 'lucide-react';
 import { Card, CardTitle, CardMeta } from '../../components/Card';
+import { EnvVarManager } from '../../components/EnvVarManager';
 
 export function EnvVarsSection() {
   return (
     <Card id="settings-env-vars" data-section="env-vars">
-      <CardTitle>Environment Variables</CardTitle>
-      <CardMeta>Configure environment variables for the Bizar runtime.</CardMeta>
-      <p className="muted" style={{ fontSize: 12 }}>
-        Environment variable management is coming soon.
-      </p>
+      <CardTitle><KeyRound size={14} /> Environment Variables</CardTitle>
+      <CardMeta>Manage BIZAR_* env vars (API keys, secrets). Values are stored in <code>~/.config/bizar/env.json</code> (mode 0600).</CardMeta>
+      <EnvVarManager />
     </Card>
   );
 }

package/bizar-dash/src/web/views/settings/GeneralSection.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Layout as LayoutIcon } from 'lucide-react';
 import { Card, CardTitle, CardMeta } from '../../components/Card';
+import { AutosaveField } from '../../components/AutosaveField';
 import { cn } from '../../lib/utils';
 import type { Settings } from '../../lib/types';
 
@@ -9,6 +10,8 @@ type Props = {
   settings: Settings;
   patchUi: (patch: Partial<Settings['ui']>) => void;
   patchTop: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+  /** Called by AutosaveField after state is patched; the parent debounces the API save */
+  autoSave?: (key: keyof Settings, value: Settings[keyof Settings]) => void;
 };
 
 const LAYOUTS = [
@@ -17,7 +20,7 @@ const LAYOUTS = [
   { id: 'both', label: 'Both' },
 ] as const;
 
-export function GeneralSection({ settings, patchUi, patchTop }: Props) {
+export function GeneralSection({ settings, patchUi, patchTop, autoSave }: Props) {
   return (
     <>
       {/* UI Layout */}
@@ -79,24 +82,44 @@ export function GeneralSection({ settings, patchUi, patchTop }: Props) {
         <CardMeta>Default agent + model override.</CardMeta>
         <div className="field" data-setting-id="defaultAgent">
           <label className="field-label" htmlFor="set-default-agent">Default agent</label>
-          <input
-            id="set-default-agent"
-            className="input"
-            type="text"
-            placeholder="e.g. odin"
-            value={settings.defaultAgent || ''}
-            onChange={(e) => patchTop('defaultAgent', e.target.value)}
+          <AutosaveField
+            initialValue={settings.defaultAgent || ''}
+            saveFn={async (v) => {
+              patchTop('defaultAgent', v);
+              autoSave?.('defaultAgent', v);
+            }}
+            render={({ value, onChange, onBlur }) => (
+              <input
+                id="set-default-agent"
+                className="input"
+                type="text"
+                placeholder="e.g. odin"
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                onBlur={onBlur}
+              />
+            )}
           />
         </div>
         <div className="field" data-setting-id="defaultModel">
           <label className="field-label" htmlFor="set-default-model">Model override</label>
-          <input
-            id="set-default-model"
-            className="input"
-            type="text"
-            placeholder="(leave empty for provider default)"
-            value={settings.defaultModel || ''}
-            onChange={(e) => patchTop('defaultModel', e.target.value)}
+          <AutosaveField
+            initialValue={settings.defaultModel || ''}
+            saveFn={async (v) => {
+              patchTop('defaultModel', v);
+              autoSave?.('defaultModel', v);
+            }}
+            render={({ value, onChange, onBlur }) => (
+              <input
+                id="set-default-model"
+                className="input"
+                type="text"
+                placeholder="(leave empty for provider default)"
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                onBlur={onBlur}
+              />
+            )}
           />
         </div>
       </Card>