@polderlabs/bizar 4.4.13 → 4.5.1

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

@@ -0,0 +1,307 @@
+// src/web/views/memory/LightragPanel.tsx — LightRAG controls, stats, query.
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Brain,
+  CheckCircle2,
+  Database,
+  Loader2,
+  Play,
+  Power,
+  PowerOff,
+  RefreshCw,
+  RotateCw,
+  Search as SearchIcon,
+  Sparkles,
+  XCircle,
+  Zap,
+} from 'lucide-react';
+import { Button } from '../../components/Button';
+import { Card, CardMeta, CardTitle } from '../../components/Card';
+import { EmptyState } from '../../components/EmptyState';
+import { Spinner } from '../../components/Spinner';
+import { useToast } from '../../components/Toast';
+import { api } from '../../lib/api';
+import { formatTime, cn } from '../../lib/utils';
+
+type Stats = {
+  running: boolean;
+  pid: number | null;
+  host: string;
+  port: number;
+  workingDir: string;
+  lastReindexAt: string | null;
+  lastReindexOk: boolean | null;
+  lastReindexInserted: number | null;
+  lastReindexFailed: number | null;
+  noteCount: number;
+  indexedApprox: number;
+  queryCountLast24h: number;
+  avgResponseMs: number | null;
+};
+
+type Config = {
+  enabled: boolean;
+  host: string;
+  port: number;
+  workingDir: string;
+  llmBinding: string;
+  embeddingBinding: string;
+  llmModel: string;
+  embeddingModel: string;
+};
+
+type Props = { refreshKey: number };
+
+export function LightragPanel({ refreshKey }: Props) {
+  const toast = useToast();
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [config, setConfig] = useState<Config | null>(null);
+  const [logTail, setLogTail] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [query, setQuery] = useState('');
+  const [queryResult, setQueryResult] = useState<{ ok: boolean; text: string } | null>(null);
+
+  const reload = async () => {
+    setLoading(true);
+    try {
+      const [s, c, log] = await Promise.all([
+        api.get<Stats>('/memory/lightrag/stats').catch(() => null),
+        api.get<{ lightrag?: Config }>('/memory/config').then((r) => r?.lightrag || null).catch(() => null),
+        api.get<{ lines: string[] }>('/memory/lightrag/log').catch(() => ({ lines: [] })),
+      ]);
+      setStats(s);
+      setConfig(c);
+      setLogTail(log?.lines || []);
+    } catch (err) {
+      toast.error(`LightRAG status failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  const runCommand = async (key: string, fn: () => Promise<unknown>, successMsg: string) => {
+    setBusy(key);
+    try {
+      await fn();
+      toast.success(successMsg);
+      await reload();
+    } catch (err) {
+      toast.error(`${key} failed: ${(err as Error).message}`);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const onStart = () => runCommand('start', () => api.post('/memory/lightrag/start', {}), 'LightRAG starting…');
+  const onStop = () => runCommand('stop', () => api.post('/memory/lightrag/stop', {}), 'LightRAG stopping…');
+  const onRestart = async () => {
+    setBusy('restart');
+    try {
+      await api.post('/memory/lightrag/stop', {}).catch(() => {});
+      await new Promise((r) => setTimeout(r, 600));
+      await api.post('/memory/lightrag/start', {});
+      toast.success('LightRAG restarted.');
+      await reload();
+    } catch (err) {
+      toast.error(`Restart failed: ${(err as Error).message}`);
+    } finally {
+      setBusy(null);
+    }
+  };
+  const onReindex = () => runCommand('reindex', () => api.post('/memory/lightrag/reindex', {}), 'Reindex complete.');
+  const onRebuild = () => runCommand('rebuild', () => api.post('/memory/lightrag/rebuild-graph', {}), 'Graph rebuilt.');
+
+  const onQuery = async () => {
+    if (!query.trim()) return;
+    setBusy('query');
+    try {
+      const r = await api.get<{ ok: boolean; q: string; semantic?: { ok: boolean; response?: unknown; error?: string } }>(
+        `/memory/query?q=${encodeURIComponent(query)}&topK=8`,
+      );
+      const text = r?.semantic?.response
+        ? (typeof r.semantic.response === 'string'
+          ? r.semantic.response
+          : JSON.stringify(r.semantic.response))
+        : (r?.semantic?.error || 'No response');
+      setQueryResult({ ok: !!r?.semantic?.ok, text });
+    } catch (err) {
+      setQueryResult({ ok: false, text: (err as Error).message });
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  if (loading && !stats) {
+    return (
+      <div className="view-loading">
+        <Spinner size="lg" />
+        <p>Loading LightRAG status…</p>
+      </div>
+    );
+  }
+  if (!stats) {
+    return <div className="muted">No LightRAG data available.</div>;
+  }
+
+  return (
+    <div className="memory-panel-content">
+      {/* ── Status header ───────────────────────────────────────────── */}
+      <Card variant="elevated">
+        <CardTitle>
+          <Brain size={14} />
+          LightRAG
+          <span className={cn('memory-source-pill-status', stats.running ? 'on' : 'off')}>
+            {stats.running ? 'running' : 'stopped'}
+          </span>
+        </CardTitle>
+        <CardMeta>
+          {stats.running
+            ? <>PID <code>{stats.pid}</code> · {stats.host}:{stats.port}</>
+            : <>Server is not running. Start it from the controls below.</>}
+        </CardMeta>
+        <div className="memory-action-row">
+          <Button variant="primary" size="sm" onClick={onStart} disabled={!!busy || stats.running}>
+            {busy === 'start' ? <Loader2 size={12} className="memory-spin" /> : <Play size={12} />}
+            Start
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onStop} disabled={!!busy || !stats.running}>
+            {busy === 'stop' ? <Loader2 size={12} className="memory-spin" /> : <PowerOff size={12} />}
+            Stop
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onRestart} disabled={!!busy}>
+            {busy === 'restart' ? <Loader2 size={12} className="memory-spin" /> : <Power size={12} />}
+            Restart
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onReindex} disabled={!!busy}>
+            {busy === 'reindex' ? <Loader2 size={12} className="memory-spin" /> : <RefreshCw size={12} />}
+            Reindex all
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onRebuild} disabled={!!busy} title="Wipe working dir + reindex from scratch">
+            {busy === 'rebuild' ? <Loader2 size={12} className="memory-spin" /> : <RotateCw size={12} />}
+            Rebuild graph
+          </Button>
+        </div>
+      </Card>
+
+      {/* ── Stat cards ─────────────────────────────────────────────── */}
+      <div className="memory-stat-grid">
+        <StatBox icon={<Database size={14} />} label="Indexed chunks (approx)" value={String(stats.indexedApprox)} />
+        <StatBox icon={<FileTextCount n={stats.noteCount} />} label="Notes in vault" value={String(stats.noteCount)} />
+        <StatBox icon={<Zap size={14} />} label="Queries last 24h" value={String(stats.queryCountLast24h)} />
+        <StatBox
+          icon={<Sparkles size={14} />}
+          label="Avg response"
+          value={stats.avgResponseMs !== null ? `${stats.avgResponseMs} ms` : '—'}
+        />
+        <StatBox
+          icon={stats.lastReindexOk ? <CheckCircle2 size={14} /> : stats.lastReindexOk === false ? <XCircle size={14} /> : <RefreshCw size={14} />}
+          label="Last reindex"
+          value={stats.lastReindexAt ? formatTime(stats.lastReindexAt) : 'never'}
+          sub={stats.lastReindexInserted !== null
+            ? `${stats.lastReindexInserted} inserted${stats.lastReindexFailed ? `, ${stats.lastReindexFailed} failed` : ''}`
+            : undefined}
+        />
+      </div>
+
+      {/* ── Quick search ───────────────────────────────────────────── */}
+      <Card>
+        <CardTitle>
+          <SearchIcon size={14} /> Quick search
+        </CardTitle>
+        <CardMeta>Send a natural-language query to the LightRAG index.</CardMeta>
+        <div className="memory-search-row">
+          <input
+            type="text"
+            className="input"
+            placeholder="e.g. how does the memory service write notes?"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') onQuery();
+            }}
+            disabled={busy === 'query'}
+          />
+          <Button variant="primary" onClick={onQuery} disabled={busy === 'query' || !query.trim()}>
+            {busy === 'query' ? <Loader2 size={12} className="memory-spin" /> : <SearchIcon size={12} />}
+            Query
+          </Button>
+        </div>
+        {queryResult && (
+          <div className={cn('memory-query-result', queryResult.ok ? 'ok' : 'err')}>
+            <pre className="mono text-sm">{queryResult.text}</pre>
+          </div>
+        )}
+      </Card>
+
+      {/* ── Config snapshot ────────────────────────────────────────── */}
+      {config && (
+        <Card>
+          <CardTitle>Configuration</CardTitle>
+          <CardMeta>Effective values from <code>.bizar/memory.json</code> + env defaults.</CardMeta>
+          <dl className="memory-config-row">
+            <dt>LLM binding</dt>
+            <dd><code>{config.llmBinding}</code> · <code>{config.llmModel}</code></dd>
+            <dt>Embedding</dt>
+            <dd><code>{config.embeddingBinding}</code> · <code>{config.embeddingModel}</code></dd>
+            <dt>Host</dt>
+            <dd><code>{config.host}:{config.port}</code></dd>
+            <dt>Working dir</dt>
+            <dd className="mono ellipsis" title={config.workingDir}>{config.workingDir}</dd>
+          </dl>
+        </Card>
+      )}
+
+      {/* ── Log tail ───────────────────────────────────────────────── */}
+      {logTail.length > 0 && (
+        <Card>
+          <CardTitle>
+            <RefreshCw size={14} /> Server log (tail)
+          </CardTitle>
+          <CardMeta>Last {logTail.length} lines from <code>lightrag.log</code></CardMeta>
+          <pre className="memory-log-tail mono text-xs">
+            {logTail.join('\n')}
+          </pre>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function StatBox({
+  icon,
+  label,
+  value,
+  sub,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  sub?: string;
+}) {
+  return (
+    <div className="memory-stat-card">
+      <div className="memory-stat-icon">{icon}</div>
+      <div className="memory-stat-body">
+        <div className="memory-stat-label">{label}</div>
+        <div className="memory-stat-value">{value}</div>
+        {sub && <div className="memory-stat-sub muted">{sub}</div>}
+      </div>
+    </div>
+  );
+}
+
+function FileTextCount({ n }: { n: number }) {
+  // Stable icon — use FileText with a small badge
+  return (
+    <span style={{ position: 'relative', display: 'inline-block' }}>
+      <SearchIcon size={14} />
+      <span className="memory-mini-badge">{n}</span>
+    </span>
+  );
+}

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

@@ -0,0 +1,354 @@
+// src/web/views/memory/MemoryOverview.tsx — Memory tab overview panel (KPIs + sub-system pills).
+import { useEffect, useState } from 'react';
+import {
+  Activity,
+  Brain,
+  CheckCircle2,
+  Database,
+  FileText,
+  GitBranch,
+  RefreshCw,
+  Search,
+  ShieldCheck,
+  Sparkles,
+  XCircle,
+  AlertTriangle,
+} 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';
+
+export type HealthResponse = {
+  score: number;
+  status: 'healthy' | 'degraded' | 'unhealthy' | 'unconfigured';
+  checks: Array<{ name: string; pass: boolean; detail: string }>;
+  message: string;
+};
+
+export type VaultStats = {
+  exists: boolean;
+  vaultRoot: string;
+  mode: string;
+  noteCount: number;
+  totalSize: number;
+  folderCount: number;
+  folders: string[];
+  lastModified: number | null;
+  gitClean: boolean | null;
+  gitBranch: string | null;
+};
+
+type MemoryStatus = {
+  initialized: boolean;
+  mode?: string;
+  projectId?: string;
+  vaultRoot?: string;
+  branch?: string;
+  gitClean?: boolean | null;
+  noteCount?: number;
+  lastSecretScan?: string | null;
+};
+
+type LightragStats = {
+  running: boolean;
+  pid: number | null;
+  host: string;
+  port: number;
+  indexedApprox: number;
+  queryCountLast24h: number;
+  lastReindexAt: string | null;
+  avgResponseMs?: number | null;
+  noteCount?: number;
+};
+
+type StorageStats = {
+  total: number;
+  breakdown: Array<{ name: string; path: string; size: number }>;
+};
+
+export type MemoryOverviewData = {
+  health: HealthResponse;
+  vault: VaultStats;
+  lightrag: {
+    running: boolean;
+    pid: number | null;
+    host: string;
+    port: number;
+    indexedApprox: number;
+    queryCountLast24h: number;
+    lastReindexAt: string | null;
+  };
+  storage: {
+    total: number;
+    breakdown: Array<{ name: string; path: string; size: number }>;
+  };
+};
+
+type Props = {
+  refreshKey: number;
+  onRefresh: () => void;
+  setActiveSubPanel: (panel: 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config') => void;
+};
+
+export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Props) {
+  const toast = useToast();
+  const [data, setData] = useState<MemoryOverviewData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const reload = async () => {
+    setLoading(true);
+    try {
+      const [health, status, lightrag, storage] = await Promise.all([
+        api.get<HealthResponse>('/memory/health').catch(() => null),
+        api.get<MemoryStatus>('/memory/status').catch(() => null),
+        api.get<LightragStats>('/memory/lightrag/stats').catch(() => null),
+        api.get<StorageStats>('/memory/storage').catch(() => null),
+      ]);
+      setData({
+        health: health || {
+          score: 0,
+          status: 'unconfigured',
+          checks: [],
+          message: 'memory not initialised',
+        },
+        vault: {
+          exists: !!status?.initialized,
+          vaultRoot: status?.vaultRoot || '',
+          mode: status?.mode || 'local-only',
+          noteCount: status?.noteCount || 0,
+          totalSize: storage?.total || 0,
+          folderCount: 0,
+          folders: [],
+          lastModified: null,
+          gitClean: status?.gitClean ?? null,
+          gitBranch: status?.branch || null,
+        },
+        lightrag: lightrag || {
+          running: false,
+          pid: null,
+          host: '127.0.0.1',
+          port: 9621,
+          indexedApprox: 0,
+          queryCountLast24h: 0,
+          lastReindexAt: null,
+        },
+        storage: storage || { total: 0, breakdown: [] },
+      });
+    } catch (err) {
+      toast.error(`Memory overview failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshKey]);
+
+  if (loading && !data) {
+    return (
+      <div className="view-loading">
+        <Spinner size="lg" />
+        <p>Loading memory overview…</p>
+      </div>
+    );
+  }
+  if (!data) {
+    return <div className="muted">No memory data available.</div>;
+  }
+
+  const { health, vault, lightrag, storage } = data;
+  const scoreColor =
+    health.score >= 80 ? 'var(--success)' :
+    health.score >= 50 ? 'var(--warning)' :
+    'var(--error)';
+
+  return (
+    <div className="memory-overview">
+      {/* ── Health score hero ─────────────────────────────────────────── */}
+      <Card variant="elevated" className="memory-health-hero">
+        <div className="memory-health-score" style={{ borderColor: scoreColor }}>
+          <span className="memory-health-score-value" style={{ color: scoreColor }}>
+            {health.score}
+          </span>
+          <span className="memory-health-score-label">/ 100</span>
+        </div>
+        <div className="memory-health-meta">
+          <h3 className="memory-health-title">
+            <Activity size={16} />
+            Memory health ·{' '}
+            <span style={{ color: scoreColor }}>{health.status}</span>
+          </h3>
+          <p className="memory-health-message">{health.message}</p>
+          <Button variant="ghost" size="sm" onClick={onRefresh}>
+            <RefreshCw size={12} /> Refresh
+          </Button>
+        </div>
+      </Card>
+
+      {/* ── Source pills ─────────────────────────────────────────────── */}
+      <div className="memory-source-pills">
+        <button
+          type="button"
+          className="memory-source-pill"
+          onClick={() => setActiveSubPanel('lightrag')}
+        >
+          <Brain size={14} />
+          <span>LightRAG</span>
+          <span className={cn('memory-source-pill-status', lightrag.running ? 'on' : 'off')}>
+            {lightrag.running ? 'running' : 'stopped'}
+          </span>
+        </button>
+        <button
+          type="button"
+          className="memory-source-pill"
+          onClick={() => setActiveSubPanel('obsidian')}
+        >
+          <FileText size={14} />
+          <span>Obsidian Vault</span>
+          <span className={cn('memory-source-pill-status', vault.exists ? 'on' : 'off')}>
+            {vault.noteCount} notes
+          </span>
+        </button>
+        <button
+          type="button"
+          className="memory-source-pill"
+          onClick={() => setActiveSubPanel('git')}
+        >
+          <GitBranch size={14} />
+          <span>Git Sync</span>
+          <span className={cn(
+            'memory-source-pill-status',
+            vault.gitClean === null ? 'na' : vault.gitClean ? 'on' : 'warn',
+          )}>
+            {vault.gitClean === null ? '—' : vault.gitClean ? 'clean' : 'dirty'}
+          </span>
+        </button>
+        <button
+          type="button"
+          className="memory-source-pill"
+          onClick={() => setActiveSubPanel('semantic')}
+        >
+          <Search size={14} />
+          <span>Semantic Search</span>
+          <span className="memory-source-pill-status na">cross-source</span>
+        </button>
+      </div>
+
+      {/* ── KPI grid ─────────────────────────────────────────────────── */}
+      <div className="memory-stat-grid">
+        <StatCard
+          icon={<Brain size={16} />}
+          label="LightRAG"
+          value={lightrag.running ? `running · ${lightrag.queryCountLast24h} q/24h` : 'stopped'}
+          sub={lightrag.running ? `${lightrag.indexedApprox} indexed chunks` : 'start from the LightRAG panel'}
+          onClick={() => setActiveSubPanel('lightrag')}
+        />
+        <StatCard
+          icon={<FileText size={16} />}
+          label="Obsidian"
+          value={`${vault.noteCount} notes`}
+          sub={vault.folderCount > 0 ? `${vault.folderCount} folders` : 'no folders yet'}
+          onClick={() => setActiveSubPanel('obsidian')}
+        />
+        <StatCard
+          icon={<GitBranch size={16} />}
+          label="Git"
+          value={vault.gitBranch ? `branch ${vault.gitBranch}` : 'local-only'}
+          sub={
+            vault.gitClean === null ? 'not configured' :
+            vault.gitClean ? 'clean working tree' :
+            'dirty — commit or pull'
+          }
+          onClick={() => setActiveSubPanel('git')}
+        />
+        <StatCard
+          icon={<Database size={16} />}
+          label="Storage"
+          value={formatBytes(storage.total)}
+          sub={storage.breakdown.length > 0
+            ? `${storage.breakdown.length} dirs tracked`
+            : 'no memory data on disk'}
+        />
+        <StatCard
+          icon={<Sparkles size={16} />}
+          label="Last reindex"
+          value={lightrag.lastReindexAt ? formatTime(lightrag.lastReindexAt) : 'never'}
+          sub="lightrag ingest"
+          onClick={() => setActiveSubPanel('lightrag')}
+        />
+        <StatCard
+          icon={<ShieldCheck size={16} />}
+          label="Health"
+          value={`${health.score}/100`}
+          sub={health.status}
+          onClick={() => setActiveSubPanel('config')}
+        />
+      </div>
+
+      {/* ── Health checks detail ─────────────────────────────────────── */}
+      {health.checks.length > 0 && (
+        <Card>
+          <CardTitle>Health checks</CardTitle>
+          <CardMeta>Composite score across all memory subsystems</CardMeta>
+          <ul className="memory-check-list">
+            {health.checks.map((c) => (
+              <li key={c.name} className="memory-check-row">
+                <span className="memory-check-icon">
+                  {c.pass
+                    ? <CheckCircle2 size={14} style={{ color: 'var(--success)' }} />
+                    : c.name.includes('secrets') || c.name.includes('schema')
+                      ? <AlertTriangle size={14} style={{ color: 'var(--warning)' }} />
+                      : <XCircle size={14} style={{ color: 'var(--error)' }} />}
+                </span>
+                <span className="memory-check-name">{c.name}</span>
+                <span className="memory-check-detail muted">{c.detail}</span>
+              </li>
+            ))}
+          </ul>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  icon,
+  label,
+  value,
+  sub,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  sub: string;
+  onClick?: () => void;
+}) {
+  const Comp = onClick ? 'button' : 'div';
+  return (
+    <Comp
+      type={onClick ? 'button' : undefined}
+      onClick={onClick}
+      className={cn('memory-stat-card', onClick && 'memory-stat-card-clickable')}
+    >
+      <div className="memory-stat-icon">{icon}</div>
+      <div className="memory-stat-body">
+        <div className="memory-stat-label">{label}</div>
+        <div className="memory-stat-value">{value}</div>
+        <div className="memory-stat-sub muted">{sub}</div>
+      </div>
+    </Comp>
+  );
+}
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}