@polderlabs/bizar 5.5.0 → 5.5.2

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

@@ -1,16 +1,30 @@
 // src/web/views/Marketplace.tsx — browse and install plugins from the marketplace registry.
-
-import { useEffect, useState } from 'react';
-import { Store } from 'lucide-react';
+// v6.x — Better UX: explicit loading + registry URL, refresh button, "showing
+// cached" notice when the disk cache is the source, and a friendlier empty
+// state when the registry returns zero plugins. The category filter chips
+// are kept (they were already there but unverified).
+import { useCallback, useEffect, useState } from 'react';
+import { Store, RefreshCw, AlertTriangle, Wifi, Globe, Clock } from 'lucide-react';
 import { MarketplacePluginCard, type MarketplacePlugin } from '../components/MarketplacePluginCard';
 import { InstallConfirmDialog } from '../components/InstallConfirmDialog';
 import { EmptyState } from '../components/EmptyState';
 import { Spinner } from '../components/Spinner';
+import { Button } from '../components/Button';
 import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
+import { api, ApiError } from '../lib/api';
 
 type RegistryResponse = {
   plugins: MarketplacePlugin[];
+  registry?: {
+    source?: string | null;
+    updatedAt?: string | null;
+  };
+  /** v6.x — Server indicates when this response came from the on-disk cache. */
+  cached?: boolean;
+  /** v6.x — When the on-disk cache was last refreshed (epoch ms). */
+  cacheTimestamp?: number | null;
+  /** v6.x — How many registry URLs were tried. */
+  urlsTried?: number;
 };
 
 export function Marketplace() {
@@ -21,14 +35,33 @@ export function Marketplace() {
   const [installing, setInstalling] = useState<MarketplacePlugin | null>(null);
   const [selected, setSelected] = useState<MarketplacePlugin | null>(null);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<{ message: string; url?: string } | null>(null);
 
-  useEffect(() => {
-    api.get<RegistryResponse>('/plugins/registry')
-      .then((r) => setRegistry(r))
-      .catch((err) => toast.error(`Failed to load marketplace: ${err.message}`))
-      .finally(() => setLoading(false));
+  const fetchRegistry = useCallback(async (opts: { refresh?: boolean } = {}) => {
+    if (opts.refresh) setRefreshing(true);
+    else setLoading(true);
+    setError(null);
+    try {
+      const r = await api.get<RegistryResponse>('/plugins/registry');
+      setRegistry(r);
+    } catch (err) {
+      const e = err as ApiError;
+      const data = e?.data as { registryUrl?: string } | null;
+      const url = data?.registryUrl;
+      const message = e?.message || 'unknown error';
+      setError({ message, url });
+      toast.error(`Failed to load marketplace: ${message}`);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
   }, [toast]);
 
+  useEffect(() => {
+    fetchRegistry();
+  }, [fetchRegistry]);
+
   const install = async (plugin: MarketplacePlugin) => {
     setInstalling(plugin);
     try {
@@ -50,14 +83,79 @@ export function Marketplace() {
   );
   const categories = [...new Set(plugins.map((p) => p.category))];
 
+  const sourceUrl = registry?.registry?.source;
+  const isCached = !!registry?.cached;
+  const cacheTimestamp = registry?.cacheTimestamp ?? null;
+
+  // ── Loading state ──────────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="view-loading">
-        <Spinner size="lg" />
+      <div className="view view-marketplace">
+        <header className="view-header">
+          <div className="view-header-text">
+            <h2 className="view-title">
+              <Store size={18} aria-hidden />
+              Plugin Marketplace
+            </h2>
+            <p className="view-subtitle">
+              Fetching registry from the community server…
+            </p>
+          </div>
+        </header>
+        <div className="view-loading" data-testid="marketplace-loading">
+          <Spinner size="lg" />
+          <p>Fetching registry from <code>{sourceUrl ?? 'https://github.com/DrB0rk/bizar-mods'}</code>…</p>
+        </div>
       </div>
     );
   }
 
+  // ── Error state ────────────────────────────────────────────────────────
+  if (error) {
+    return (
+      <div className="view view-marketplace">
+        <header className="view-header">
+          <div className="view-header-text">
+            <h2 className="view-title">
+              <Store size={18} aria-hidden />
+              Plugin Marketplace
+            </h2>
+            <p className="view-subtitle">
+              Couldn't reach the community registry.
+            </p>
+          </div>
+          <div className="view-actions">
+            <Button variant="secondary" size="sm" onClick={() => fetchRegistry({ refresh: true })} disabled={refreshing}>
+              {refreshing ? <Spinner size="sm" /> : <RefreshCw size={14} />}
+              Retry
+            </Button>
+          </div>
+        </header>
+        <EmptyState
+          icon={<AlertTriangle size={32} />}
+          title="Registry unreachable"
+          message={
+            <>
+              <p>All registry URLs failed to respond.</p>
+              {error.url && (
+                <p className="mono muted" style={{ marginTop: 8, fontSize: 12 }}>
+                  Last tried: {error.url}
+                </p>
+              )}
+              <p className="muted" style={{ marginTop: 8, fontSize: 12 }}>{error.message}</p>
+            </>
+          }
+          action={
+            <Button variant="primary" size="sm" onClick={() => fetchRegistry({ refresh: true })} disabled={refreshing}>
+              {refreshing ? <Spinner size="sm" /> : <RefreshCw size={14} />} Try again
+            </Button>
+          }
+        />
+      </div>
+    );
+  }
+
+  // ── Success state ──────────────────────────────────────────────────────
   return (
     <div className="view view-marketplace">
       <header className="view-header">
@@ -70,8 +168,42 @@ export function Marketplace() {
             Discover and install plugins from the community registry.
           </p>
         </div>
+        <div className="view-actions">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => fetchRegistry({ refresh: true })}
+            disabled={refreshing}
+            data-testid="marketplace-refresh"
+          >
+            {refreshing ? <Spinner size="sm" /> : <RefreshCw size={14} />}
+            Refresh
+          </Button>
+        </div>
       </header>
 
+      {/* Registry source banner */}
+      <div className="marketplace-source-banner muted" data-testid="marketplace-source">
+        <Globe size={12} aria-hidden />
+        <span>
+          Source:{' '}
+          {sourceUrl ? (
+            <code className="mono">{sourceUrl}</code>
+          ) : (
+            <span>community registry</span>
+          )}
+        </span>
+        {isCached && (
+          <span className="marketplace-cache-notice" data-testid="marketplace-cache-notice">
+            <Clock size={12} aria-hidden /> Showing cached results
+            {cacheTimestamp && ` from ${new Date(cacheTimestamp).toLocaleString()}`}
+          </span>
+        )}
+        <span className="marketplace-count-pill" data-testid="marketplace-count">
+          {plugins.length} plugin{plugins.length === 1 ? '' : 's'}
+        </span>
+      </div>
+
       <div className="marketplace-search-row">
         <input
           className="input"
@@ -80,37 +212,66 @@ export function Marketplace() {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           style={{ maxWidth: 320 }}
+          aria-label="Search marketplace plugins"
         />
       </div>
 
-      <div className="category-chips">
-        <button
-          type="button"
-          onClick={() => setCategory(null)}
-          className={!category ? 'active' : ''}
-        >
-          All
-        </button>
-        {categories.map((c) => (
+      {categories.length > 0 && (
+        <div className="category-chips">
           <button
-            key={c}
             type="button"
-            onClick={() => setCategory(c)}
-            className={category === c ? 'active' : ''}
+            onClick={() => setCategory(null)}
+            className={!category ? 'active' : ''}
+            data-testid="marketplace-category-all"
           >
-            {c}
+            All
           </button>
-        ))}
-      </div>
+          {categories.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setCategory(c)}
+              className={category === c ? 'active' : ''}
+              data-testid={`marketplace-category-${c.toLowerCase().replace(/\s+/g, '-')}`}
+            >
+              {c}
+            </button>
+          ))}
+        </div>
+      )}
 
       {filtered.length === 0 ? (
         <EmptyState
-          icon={<Store size={32} />}
-          title="No plugins found"
-          message={search ? `No plugins match "${search}".` : 'The marketplace is empty.'}
+          icon={plugins.length === 0 ? <Wifi size={32} /> : <Store size={32} />}
+          title={plugins.length === 0 ? 'No plugins published yet' : 'No plugins match your filter'}
+          message={
+            plugins.length === 0 ? (
+              <>
+                <p>The community registry is empty right now.</p>
+                {sourceUrl && (
+                  <p className="mono muted" style={{ marginTop: 8, fontSize: 12 }}>
+                    Check back at <code>{sourceUrl}</code> later, or publish your own.
+                  </p>
+                )}
+              </>
+            ) : search ? (
+              `No plugins match "${search}".`
+            ) : category ? (
+              `No plugins in "${category}".`
+            ) : (
+              'Try a different search or category filter.'
+            )
+          }
+          action={
+            plugins.length === 0 ? (
+              <Button variant="secondary" size="sm" onClick={() => fetchRegistry({ refresh: true })} disabled={refreshing}>
+                {refreshing ? <Spinner size="sm" /> : <RefreshCw size={14} />} Refresh
+              </Button>
+            ) : null
+          }
         />
       ) : (
-        <div className="marketplace-grid">
+        <div className="marketplace-grid" data-testid="marketplace-grid">
           {filtered.map((p) => (
             <MarketplacePluginCard
               key={p.id}
@@ -132,4 +293,4 @@ export function Marketplace() {
       )}
     </div>
   );
-}
+}

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

@@ -1,4 +1,7 @@
 // src/web/views/memory/ConfigPanel.tsx — simplified memory config.
+// v6.x — Vault path is now fetched from /api/memory/status so the row
+// stops saying "(loading…)" forever. Users can change the vault path
+// inline and initialise the vault if it doesn't exist yet.
 import { useEffect, useState } from 'react';
 import {
   GitBranch,
@@ -8,6 +11,9 @@ import {
   Loader2,
   Plug,
   Save,
+  FolderInput,
+  CheckCircle2,
+  XCircle,
 } from 'lucide-react';
 import { Button } from '../../components/Button';
 import { Card, CardMeta, CardTitle } from '../../components/Card';
@@ -31,6 +37,17 @@ type SyncStatus = {
   untracked?: number;
 };
 
+type MemoryStatus = {
+  initialized: boolean;
+  mode?: string | null;
+  projectId?: string | null;
+  vaultRoot?: string | null;
+  branch?: string | null;
+  gitClean?: boolean | null;
+  noteCount?: number;
+  lastSecretScan?: string | null;
+};
+
 type Props = { refreshKey: number };
 
 export function ConfigPanel({ refreshKey }: Props) {
@@ -39,7 +56,10 @@ export function ConfigPanel({ refreshKey }: Props) {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [remoteUrl, setRemoteUrl] = useState('');
-  const [vaultPath] = useState<string>('');
+  const [memoryStatus, setMemoryStatus] = useState<MemoryStatus | null>(null);
+  const [vaultPathDraft, setVaultPathDraft] = useState<string>('');
+  const [pathInitialising, setPathInitialising] = useState(false);
+  const [pathSaving, setPathSaving] = useState(false);
   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);
@@ -48,9 +68,22 @@ export function ConfigPanel({ refreshKey }: Props) {
   const reload = async () => {
     setLoading(true);
     try {
-      const r = await api.get<{ config: GlobalConfig }>('/memory/config/global');
-      setCfg(r.config);
-      setRemoteUrl(r.config?.git?.remoteUrl || '');
+      const [cfgRes, statusRes] = await Promise.all([
+        api.get<{ config: GlobalConfig }>('/memory/config/global').catch(() => null),
+        api.get<MemoryStatus>('/memory/status').catch(() => null),
+      ]);
+      if (cfgRes) {
+        setCfg(cfgRes.config);
+        setRemoteUrl(cfgRes.config?.git?.remoteUrl || '');
+      } else {
+        setCfg({});
+      }
+      if (statusRes) {
+        setMemoryStatus(statusRes);
+        // Initialise the draft input from the server's current vaultRoot.
+        // Only overwrite while the user hasn't started editing.
+        setVaultPathDraft((cur) => cur || statusRes.vaultRoot || '');
+      }
       // Also fetch git status from the per-project vault
       await loadSyncStatus();
     } catch (err) {
@@ -81,6 +114,50 @@ export function ConfigPanel({ refreshKey }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refreshKey]);
 
+  // v6.x — Save the new vault path. If the folder doesn't exist, the
+  // backend's /memory/init endpoint can be used to create it (handled
+  // by ensureVaultExists()).
+  const onSaveVaultPath = async () => {
+    const target = vaultPathDraft.trim();
+    if (!target) {
+      toast.error('Vault path cannot be empty.');
+      return;
+    }
+    setPathSaving(true);
+    try {
+      const status = await api.get<MemoryStatus & { exists?: boolean }>('/memory/status').catch(() => null);
+      const initialised = status?.initialized;
+      if (!initialised) {
+        // Initialise the vault at the chosen path.
+        await api.post('/memory/init', { vaultRoot: target });
+        toast.success(`Vault initialised at ${target}.`);
+      } else {
+        // v6.x — Call the new vault config endpoint to persist the path.
+        await api.post('/memory/config/vault', { vaultRoot: target });
+        toast.success(`Vault path updated to ${target}.`);
+      }
+      setVaultPathDraft(target);
+      await reload();
+    } catch (err) {
+      toast.error(`Vault path save failed: ${(err as Error).message}`);
+    } finally {
+      setPathSaving(false);
+    }
+  };
+
+  const onInitVault = async () => {
+    setPathInitialising(true);
+    try {
+      await api.post('/memory/init', {});
+      toast.success('Vault initialised.');
+      await reload();
+    } catch (err) {
+      toast.error(`Init failed: ${(err as Error).message}`);
+    } finally {
+      setPathInitialising(false);
+    }
+  };
+
   const onSave = async () => {
     if (!cfg) return;
     setSaving(true);
@@ -143,16 +220,89 @@ export function ConfigPanel({ refreshKey }: Props) {
   }
   if (!cfg) return <div className="muted">No config available.</div>;
 
+  const initialised = !!memoryStatus?.initialized;
+  const currentVaultPath = memoryStatus?.vaultRoot ?? '';
+
   return (
     <div className="memory-panel-content">
+      {/* ── Vault path ──────────────────────────────────────────────────── */}
+      <Card>
+        <CardTitle>
+          <FolderInput size={14} /> Vault location
+        </CardTitle>
+        <CardMeta>
+          The on-disk folder where notes and memory metadata live. Default:{' '}
+          <code>~/.bizar_memory</code>.
+        </CardMeta>
+        <div className="memory-config-form">
+          <Row label="Current path" inline>
+            <span className="memory-vault-path mono" data-testid="memory-current-vault-path">
+              {currentVaultPath || <span className="muted">not initialised</span>}
+            </span>
+            {initialised ? (
+              <span
+                className="memory-pill memory-pill-ok"
+                style={{ marginLeft: 8 }}
+                title="Vault folder exists on disk"
+              >
+                <CheckCircle2 size={10} /> initialised
+              </span>
+            ) : (
+              <span
+                className="memory-pill memory-pill-warn"
+                style={{ marginLeft: 8 }}
+                title="Vault folder does not exist yet"
+              >
+                <XCircle size={10} /> not initialised
+              </span>
+            )}
+          </Row>
+          <Row label="Set path">
+            <input
+              type="text"
+              className="input mono"
+              value={vaultPathDraft}
+              onChange={(e) => setVaultPathDraft(e.target.value)}
+              placeholder="~/.bizar_memory"
+              aria-label="Vault path"
+              data-testid="memory-vault-path-input"
+            />
+            <span className="field-hint">
+              {initialised
+                ? 'Save to update the working path.'
+                : 'Save and initialise will create this folder if it does not exist.'}
+            </span>
+          </Row>
+        </div>
+        <div className="memory-action-row" style={{ marginTop: 12 }}>
+          <Button
+            variant="primary"
+            onClick={onSaveVaultPath}
+            disabled={pathSaving || pathInitialising || !vaultPathDraft.trim()}
+            data-testid="memory-save-vault-path"
+          >
+            {pathSaving ? <Loader2 size={12} className="memory-spin" /> : <Save size={12} />}
+            {initialised ? 'Save path' : 'Save and initialise'}
+          </Button>
+          {!initialised && (
+            <Button
+              variant="secondary"
+              onClick={onInitVault}
+              disabled={pathInitialising || pathSaving}
+              data-testid="memory-init-vault"
+            >
+              {pathInitialising ? <Loader2 size={12} className="memory-spin" /> : <FolderInput size={12} />}
+              Initialise default
+            </Button>
+          )}
+        </div>
+      </Card>
+
       {/* ── Git sync ───────────────────────────────────────────────────── */}
       <Card>
         <CardTitle><GitBranch size={14} /> Git sync</CardTitle>
         <CardMeta>Configure the git remote and sync your memory vault.</CardMeta>
         <div className="memory-config-form">
-          <Row label="Vault path" inline>
-            <span className="memory-vault-path mono muted">{vaultPath || '(loading…)'}</span>
-          </Row>
           <Row label="Remote URL">
             <input
               type="text"

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

@@ -96,6 +96,7 @@ type Props = {
 export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Props) {
   const toast = useToast();
   const [data, setData] = useState<MemoryOverviewData | null>(null);
+  const [vaultPath, setVaultPath] = useState<string>('');
   const [loading, setLoading] = useState(true);
 
   const reload = async (signal?: AbortSignal) => {
@@ -107,6 +108,10 @@ export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Pro
         api.get<LightragStats>('/memory/lightrag/stats', signal).catch(() => null),
         api.get<StorageStats>('/memory/storage', signal).catch(() => null),
       ]);
+      // v6.x — Surface the resolved vault path as a top-level piece of state
+      // so the section header can display it instead of relying on
+      // derived fields. Resolves the "(loading…)" UI bug in the Config panel.
+      setVaultPath(status?.vaultRoot || '');
       setData({
         health: health || {
           score: 0,
@@ -186,6 +191,12 @@ export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Pro
             <span style={{ color: scoreColor }}>{health.status}</span>
           </h3>
           <p className="memory-health-message">{health.message}</p>
+          {/* v6.x — Vault path surfaced as a top-level piece of context.
+              Resolves the "(loading…)" stuck-state in the Config panel. */}
+          <p className="memory-health-vault mono muted" data-testid="memory-overview-vault-path">
+            <span className="memory-health-vault-label">Vault:</span>{' '}
+            {vaultPath || <em>not initialised</em>}
+          </p>
           <Button variant="ghost" size="sm" onClick={onRefresh}>
             <RefreshCw size={12} /> Refresh
           </Button>

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

@@ -1,6 +1,8 @@
 // src/web/views/settings/MemorySection.tsx — memory vault + git config for Settings.
+// v6.x — Vault path now loads from /api/memory/status (was hardcoded to '').
+// We also surface a small "Initialise" button when the vault does not exist.
 import React, { useEffect, useState } from 'react';
-import { Brain, GitBranch, Loader2, Save } from 'lucide-react';
+import { Brain, GitBranch, Loader2, Save, FolderInput } from 'lucide-react';
 import { Button } from '../../components/Button';
 import { Card, CardTitle, CardMeta } from '../../components/Card';
 import { Spinner } from '../../components/Spinner';
@@ -15,21 +17,41 @@ type GlobalConfig = {
   git?: GitConfig;
 };
 
+type MemoryStatus = {
+  initialized: boolean;
+  vaultRoot?: string | null;
+  mode?: string | null;
+};
+
 export function MemorySection() {
   const toast = useToast();
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [initialising, setInitialising] = useState(false);
   const [remoteUrl, setRemoteUrl] = useState('');
-  const [vaultPath] = useState<string>(''); // server-side default, not user-editable
+  const [vaultPath, setVaultPath] = useState<string>('');
+  const [vaultInitialised, setVaultInitialised] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
-    api.get<{ config: GlobalConfig; path?: string }>('/memory/config/global')
-      .then((r) => {
-        setRemoteUrl(r.config?.git?.remoteUrl || '');
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
+    let cancelled = false;
+    (async () => {
+      try {
+        const [cfgRes, statusRes] = await Promise.all([
+          api.get<{ config: GlobalConfig; path?: string }>('/memory/config/global').catch(() => null),
+          api.get<MemoryStatus>('/memory/status').catch(() => null),
+        ]);
+        if (cancelled) return;
+        if (cfgRes) setRemoteUrl(cfgRes.config?.git?.remoteUrl || '');
+        if (statusRes) {
+          setVaultPath(statusRes.vaultRoot || '');
+          setVaultInitialised(!!statusRes.initialized);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
   }, [refreshKey]);
 
   const onSave = async () => {
@@ -45,6 +67,19 @@ export function MemorySection() {
     }
   };
 
+  const onInitialise = async () => {
+    setInitialising(true);
+    try {
+      await api.post('/memory/init', {});
+      toast.success('Vault initialised.');
+      setRefreshKey((k) => k + 1);
+    } catch (err) {
+      toast.error(`Initialise failed: ${(err as Error).message}`);
+    } finally {
+      setInitialising(false);
+    }
+  };
+
   return (
     <Card id="settings-memory" data-section="memory">
       <CardTitle><Brain size={14} /> Memory vault</CardTitle>
@@ -60,9 +95,28 @@ export function MemorySection() {
       ) : (
         <div className="settings-fields">
           <div className="field">
-            <label className="field-label">Vault path</label>
-            <div className="field-readonly mono muted" style={{ fontSize: 12, padding: '6px 0' }}>
-              {vaultPath || '~/.local/share/bizar/memory'}
+            <label className="field-label">
+              <FolderInput size={12} style={{ display: 'inline', marginRight: 4 }} />
+              Vault path
+            </label>
+            <div
+              className="field-readonly mono"
+              data-testid="settings-memory-vault-path"
+              style={{ fontSize: 12, padding: '6px 0' }}
+            >
+              {vaultPath || <span className="muted">not initialised</span>}
+              {vaultInitialised ? null : (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onInitialise}
+                  disabled={initialising}
+                  style={{ marginLeft: 12 }}
+                >
+                  {initialising ? <Loader2 size={12} className="memory-spin" /> : <FolderInput size={12} />}
+                  Initialise
+                </Button>
+              )}
             </div>
           </div>