@polderlabs/bizar 4.4.13 → 4.5.1

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

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

@@ -0,0 +1,220 @@
+// src/web/views/memory/GitSyncPanel.tsx — git status, pull/push/commit/fetch, diff viewer.
+import { useEffect, useState } from 'react';
+import {
+  ArrowDown,
+  ArrowUp,
+  CheckCircle2,
+  GitBranch,
+  GitCommit,
+  GitMerge,
+  GitPullRequest,
+  Loader2,
+  RefreshCw,
+  Settings,
+} 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 { formatTime, cn } from '../../lib/utils';
+
+type GitStatus = {
+  ok: boolean;
+  clean?: boolean;
+  branch?: string;
+  ahead?: number;
+  behind?: number;
+  modified?: string[];
+  untracked?: string[];
+  mode?: string;
+};
+
+type GitDiff = {
+  hasDiff: boolean;
+  lines: string[];
+  files: string[];
+  mode: string;
+};
+
+type Props = { refreshKey: number };
+
+export function GitSyncPanel({ refreshKey }: Props) {
+  const toast = useToast();
+  const [status, setStatus] = useState<GitStatus | null>(null);
+  const [diff, setDiff] = useState<GitDiff | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [config, setConfig] = useState<{ repoPath?: string; remoteUrl?: string; branch?: string; autoSync?: boolean } | null>(null);
+
+  const reload = async () => {
+    setLoading(true);
+    try {
+      const [s, d, g] = await Promise.all([
+        api.get<GitStatus>('/memory/git/status').catch(() => null),
+        api.get<GitDiff>('/memory/git/diff').catch(() => null),
+        api.get<{ config?: { git?: { repoPath?: string; remoteUrl?: string; branch?: string; autoSync?: boolean } } }>(
+          '/memory/config/global',
+        ).catch(() => null),
+      ]);
+      setStatus(s);
+      setDiff(d);
+      setConfig(g?.config?.git || null);
+    } catch (err) {
+      toast.error(`Git status failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  const run = async (key: string, fn: () => Promise<unknown>, msg: string) => {
+    setBusy(key);
+    try {
+      await fn();
+      toast.success(msg);
+      await reload();
+    } catch (err) {
+      toast.error(`${key} failed: ${(err as Error).message}`);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const onPull = () => run('pull', () => api.post('/memory/git/pull', {}), 'Pull complete.');
+  const onPush = () => run('push', () => api.post('/memory/git/push', {}), 'Push complete.');
+  const onCommit = () => {
+    const message = prompt('Commit message:', `[memory-sync] ${new Date().toISOString().slice(0, 10)} vault sync`);
+    if (!message) return;
+    run('commit', () => api.post('/memory/git/commit', { message }), 'Committed.');
+  };
+  const onFetch = () => run('fetch', () => api.post('/memory/git/sync', { push: false }), 'Fetch complete.');
+
+  if (loading && !status) {
+    return (
+      <div className="view-loading">
+        <Spinner size="lg" />
+        <p>Loading git status…</p>
+      </div>
+    );
+  }
+  if (!status) {
+    return <div className="muted">No git data available.</div>;
+  }
+
+  const isLocal = status.mode === 'local-only';
+
+  return (
+    <div className="memory-panel-content">
+      {/* ── Status card ───────────────────────────────────────────── */}
+      <Card variant="elevated">
+        <CardTitle>
+          <GitBranch size={14} /> Git sync
+          {isLocal ? (
+            <span className="memory-source-pill-status na">local-only</span>
+          ) : (
+            <span className={cn('memory-source-pill-status', status.clean ? 'on' : 'warn')}>
+              {status.clean ? 'clean' : 'dirty'}
+            </span>
+          )}
+        </CardTitle>
+        <CardMeta>
+          {isLocal
+            ? 'Memory is in local-only mode. Configure a shared repo in Settings → Memory to enable git sync.'
+            : <>Branch <code>{status.branch || '—'}</code>{status.ahead ? <> · ahead {status.ahead}</> : null}{status.behind ? <> · behind {status.behind}</> : null}</>}
+        </CardMeta>
+
+        {!isLocal && (
+          <div className="memory-git-status-row">
+            <Pill ok={status.clean ?? false} label="Working tree" />
+            <Pill ok={(status.ahead ?? 0) === 0} label={`Ahead: ${status.ahead ?? 0}`} />
+            <Pill ok={(status.behind ?? 0) === 0} label={`Behind: ${status.behind ?? 0}`} />
+            <Pill ok={(status.modified?.length ?? 0) === 0} label={`Modified: ${status.modified?.length ?? 0}`} />
+            <Pill ok={(status.untracked?.length ?? 0) === 0} label={`Untracked: ${status.untracked?.length ?? 0}`} />
+          </div>
+        )}
+
+        <div className="memory-action-row">
+          <Button variant="secondary" size="sm" onClick={onPull} disabled={!!busy || isLocal}>
+            {busy === 'pull' ? <Loader2 size={12} className="memory-spin" /> : <ArrowDown size={12} />}
+            Pull
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onPush} disabled={!!busy || isLocal}>
+            {busy === 'push' ? <Loader2 size={12} className="memory-spin" /> : <ArrowUp size={12} />}
+            Push
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onCommit} disabled={!!busy || isLocal}>
+            {busy === 'commit' ? <Loader2 size={12} className="memory-spin" /> : <GitCommit size={12} />}
+            Commit
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onFetch} disabled={!!busy || isLocal}>
+            {busy === 'fetch' ? <Loader2 size={12} className="memory-spin" /> : <GitPullRequest size={12} />}
+            Fetch + sync
+          </Button>
+          <Button variant="ghost" size="sm" onClick={reload} disabled={!!busy}>
+            <RefreshCw size={12} /> Refresh
+          </Button>
+        </div>
+      </Card>
+
+      {/* ── Repo config snapshot ──────────────────────────────────── */}
+      {config && (
+        <Card>
+          <CardTitle>
+            <Settings size={14} /> Repository
+          </CardTitle>
+          <CardMeta>Snapshot of <code>~/.config/bizar/memory-config.json</code> → git block.</CardMeta>
+          <dl className="memory-config-row">
+            <dt>Path</dt>
+            <dd className="mono ellipsis" title={config.repoPath}>{config.repoPath || '—'}</dd>
+            <dt>Remote</dt>
+            <dd className="mono ellipsis" title={config.remoteUrl}>{config.remoteUrl || '—'}</dd>
+            <dt>Branch</dt>
+            <dd><code>{config.branch || 'main'}</code></dd>
+            <dt>Auto-sync</dt>
+            <dd>{config.autoSync ? 'enabled' : 'disabled'}</dd>
+          </dl>
+        </Card>
+      )}
+
+      {/* ── Working-tree diff ─────────────────────────────────────── */}
+      <Card>
+        <CardTitle>
+          <GitMerge size={14} /> Working-tree diff
+        </CardTitle>
+        <CardMeta>
+          {diff?.hasDiff
+            ? `${diff.files.length} file(s) changed`
+            : 'no working-tree changes'}
+        </CardMeta>
+        {diff && diff.files.length > 0 && (
+          <ul className="memory-diff-files">
+            {diff.files.map((f) => (
+              <li key={f}>
+                <code>{f}</code>
+              </li>
+            ))}
+          </ul>
+        )}
+        {diff && diff.lines.length > 1 && (
+          <pre className="memory-log-tail mono text-xs">
+            {diff.lines.slice(0, 400).join('\n')}
+          </pre>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function Pill({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <span className={cn('memory-git-status-pill', ok ? 'ok' : 'warn')}>
+      {ok ? <CheckCircle2 size={11} /> : <Loader2 size={11} className="memory-spin" />}
+      {label}
+    </span>
+  );
+}