total-recall-brain 3.18.2 → 3.18.3

package/frontend/src/pages/SettingsPage.tsx

@@ -1,11 +1,40 @@
 import React, { useState, useEffect } from 'react';
-import { fetchConfigJson, saveConfigJson, runSandbox, fetchHealth, runAgentDiagnostics, checkUpdate, runUpdate, fetchBrains } from '../api';
+import {
+  fetchConfigJson,
+  saveConfigJson,
+  fetchHealth,
+  runAgentDiagnostics,
+  checkUpdate,
+  runUpdate,
+  triggerRecompile,
+  apiFetch,
+  getApiBase,
+} from '../api';
 import type { HealthData } from '../types';
 import type { ConfigJson } from '../types';
 import { MobilePairing } from '../components/MobilePairing';
 
+function normalizeConfigJson(data: ConfigJson): ConfigJson {
+  const next = { ...data } as ConfigJson & Record<string, any>;
+  if (!next.security) next.security = {};
+  if (!next.security.dashboard) next.security.dashboard = {};
+  if (!next.security.api) next.security.api = {};
+  if (!next.security.network) next.security.network = {};
+  if (!next.security.bind) next.security.bind = {};
+  if (!next.security.rate_limits) next.security.rate_limits = {};
+  if (!next.security.sandbox) next.security.sandbox = {};
+  if (!next.security.privacy) next.security.privacy = {};
+  if (!next.budget) next.budget = { budget: {} };
+  if (!next.budget.budget) next.budget.budget = {};
+  if (!next.brain) next.brain = {};
+  if (!next.secrets) next.secrets = {};
+  return next;
+}
+
 export default function SettingsPage({ activeBrainId }: { activeBrainId?: string }) {
   const [configData, setConfigData] = useState<ConfigJson | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const [sandboxLog, setSandboxLog] = useState('');
 
@@ -14,35 +43,43 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
   const [runningDiagnostics, setRunningDiagnostics] = useState(false);
   const [diagnosticLogs, setDiagnosticLogs] = useState<string | null>(null);
 
-  const [updateInfo, setUpdateInfo] = useState<{ updateAvailable: boolean, latestVersion?: string } | null>(null);
+  const [updateInfo, setUpdateInfo] = useState<{
+    updateAvailable: boolean;
+    latestVersion?: string;
+    currentVersion?: string;
+  } | null>(null);
   const [updating, setUpdating] = useState(false);
   const [updateMessage, setUpdateMessage] = useState<string | null>(null);
+  const [rebuilding, setRebuilding] = useState(false);
   
-  const [brains, setBrains] = useState<unknown[]>([]);
-  const activeBrain = activeBrainId || localStorage.getItem('total-recall-active-brain') || '';
+  const loadConfig = async () => {
+    setLoading(true);
+    setLoadError(null);
+    try {
+      const data = await fetchConfigJson();
+      setConfigData(normalizeConfigJson(data));
+    } catch (err) {
+      console.error(err);
+      setLoadError(err instanceof Error ? err.message : 'Failed to load settings');
+      setConfigData(null);
+    } finally {
+      setLoading(false);
+    }
+  };
   
   useEffect(() => {
     fetchHealth().then(setHealth).catch(console.error);
-    checkUpdate().then(setUpdateInfo).catch(console.error);
-    fetchBrains().then(setBrains).catch(console.error);
-    fetchConfigJson()
-      .then(data => {
-        // Ensure all nested structures exist for controlled inputs
-        if (!data.security) data.security = {};
-        if (!data.security.dashboard) data.security.dashboard = {};
-        if (!data.security.api) data.security.api = {};
-        if (!data.security.network) data.security.network = {};
-        if (!data.security.bind) data.security.bind = {};
-        if (!data.security.rate_limits) data.security.rate_limits = {};
-        if (!data.security.sandbox) data.security.sandbox = {};
-        if (!data.security.privacy) data.security.privacy = {};
-        if (!data.budget) data.budget = { budget: {} };
-        if (!data.budget.budget) data.budget.budget = {};
-        if (!data.brain) data.brain = {};
-        if (!data.secrets) data.secrets = {};
-        setConfigData(data);
-      })
+    // Update check must never block config load (server used to spawnSync npm view).
+    checkUpdate()
+      .then((u) =>
+        setUpdateInfo({
+          updateAvailable: !!u.updateAvailable,
+          latestVersion: u.latestVersion,
+          currentVersion: u.currentVersion,
+        }),
+      )
       .catch(console.error);
+    loadConfig();
   }, [activeBrainId]);
 
   
@@ -54,6 +91,12 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
     { id: 'grok', name: 'Grok CLI', desc: 'xAI developer binary integration' }
   ];
 
+  const availableAgents: string[] = Array.isArray(health?.cli_agents)
+    ? health.cli_agents
+    : Array.isArray((health as unknown as { agents?: string[] } | null)?.agents)
+      ? ((health as unknown as { agents: string[] }).agents)
+      : [];
+
   const handleRunDiagnostics = async (e: React.FormEvent) => {
     e.preventDefault();
     setRunningDiagnostics(true);
@@ -75,6 +118,14 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
     try {
       const res = await runUpdate();
       setUpdateMessage(res.success ? 'Update complete. Restarting...' : 'Update failed: ' + res.message);
+      const refreshed = await checkUpdate().catch(() => null);
+      if (refreshed) {
+        setUpdateInfo({
+          updateAvailable: !!refreshed.updateAvailable,
+          latestVersion: refreshed.latestVersion,
+          currentVersion: refreshed.currentVersion,
+        });
+      }
     } catch (err: unknown) {
       setUpdateMessage('Update error: ' + (err as Error).message);
     } finally {
@@ -86,7 +137,18 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
     if (!configData) return;
     setSaveStatus('saving');
     try {
-      await saveConfigJson(configData);
+      // Do not persist masked secret placeholders back into the store.
+      const payload = { ...configData } as ConfigJson & { secrets?: Record<string, string> };
+      if (payload.secrets) {
+        const cleaned: Record<string, string> = {};
+        for (const [k, v] of Object.entries(payload.secrets)) {
+          if (typeof v === 'string' && v && !v.includes('•') && v !== '[redacted]') {
+            cleaned[k] = v;
+          }
+        }
+        payload.secrets = cleaned;
+      }
+      await saveConfigJson(payload);
       setSaveStatus('saved');
       setTimeout(() => setSaveStatus('idle'), 2500);
     } catch (err) {
@@ -96,18 +158,39 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
     }
   };
 
-  const executeSandboxCommand = async (command: string, description: string) => {
-    setSandboxLog(`[Running] ${description}...\n$ ${command}`);
-    const res = await runSandbox(`
-      const { execSync } = require('child_process');
-      try {
-        const out = execSync('${command}', { encoding: 'utf8' });
-        console.log(out);
-      } catch (e) {
-        console.error(e.stdout || e.message);
-      }
-    `);
-    setSandboxLog(`[Finished] ${description}\n\n` + res.output);
+  const handleRebuildIndex = async () => {
+    setRebuilding(true);
+    setSandboxLog('[Running] Rebuilding instruction surfaces…');
+    try {
+      const res = await triggerRecompile();
+      setSandboxLog(
+        `[Finished] Rebuilding instruction surfaces\n\n${res.message || (res.success ? 'Compile complete.' : 'Compile finished with warnings.')}`,
+      );
+    } catch (err) {
+      setSandboxLog(`[Failed] Rebuild\n\n${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      setRebuilding(false);
+    }
+  };
+
+  const handleDownloadExtension = async () => {
+    try {
+      const res = await apiFetch(`${getApiBase()}/api/extension/download`);
+      if (!res.ok) throw new Error(`Download failed: ${res.status}`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'total-recall-extension.zip';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setSandboxLog(
+        `[Failed] Extension download\n\n${err instanceof Error ? err.message : String(err)}`,
+      );
+    }
   };
 
   // State Update Helpers
@@ -153,12 +236,16 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
 
   // Instead of parsing it back and forth on every keystroke, 
   // we just use simple helpers that don't aggressively trim trailing commas.
-  const getCsv = (arr: unknown) => Array.isArray(arr) ? arr.join(', ') : '';
-  const setCsv = (str: string) => str.split(',').map(s => s.trimStart());
-
-  if (!configData) {
+  const getCsv = (arr: unknown) => Array.isArray(arr) ? arr.filter(Boolean).join(', ') : '';
+  const setCsv = (str: string) =>
+    str
+      .split(',')
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
+
+  if (loading && !configData) {
     return (
-      <div style={{ padding: 40, color: 'var(--text-secondary)' }}>
+      <div style={{ padding: 40, color: 'var(--text-secondary)' }} data-testid="settings-loading">
         <div className="glass-card" style={{ display: 'inline-block', padding: '12px 24px' }}>
           Loading Settings...
         </div>
@@ -166,8 +253,38 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
     );
   }
 
+  if (loadError && !configData) {
+    return (
+      <div style={{ padding: 40 }} data-testid="settings-error" role="alert">
+        <div
+          className="glass-card"
+          style={{
+            display: 'inline-block',
+            padding: '16px 24px',
+            border: '1px solid #ef4444',
+            color: '#ef4444',
+          }}
+        >
+          Failed to load settings: {loadError}
+          <button
+            type="button"
+            className="btn-primary"
+            style={{ marginLeft: 16 }}
+            onClick={() => loadConfig()}
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!configData) {
+    return null;
+  }
+
   return (
-    <div className="settings-page-wrapper">
+    <div className="settings-page-wrapper" data-testid="settings-page">
       <style>{`
         .settings-page-wrapper {
           padding: 32px 40px 100px;
@@ -627,7 +744,12 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
                 step="0.01"
                 className="settings-input"
                 value={configData.budget.budget?.daily_cap_usd ?? 5.0}
-                onChange={(e) => updateBudgetProp('monthly_soft_cap', e.target.value === '' ? null : Number(e.target.value))}
+                onChange={(e) =>
+                  updateBudgetProp(
+                    'daily_cap_usd',
+                    e.target.value === '' ? null : Number(e.target.value),
+                  )
+                }
               />
             </div>
             <div className="field-col" style={{ flex: 1 }}>
@@ -638,7 +760,12 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
                 step="0.01"
                 className="settings-input"
                 value={configData.budget.budget?.weekly_cap_usd ?? 20.0}
-                onChange={(e) => updateBudgetProp('weekly_cap_usd', parseFloat(e.target.value))}
+                onChange={(e) =>
+                  updateBudgetProp(
+                    'weekly_cap_usd',
+                    e.target.value === '' ? null : Number(e.target.value),
+                  )
+                }
               />
             </div>
           </div>
@@ -654,28 +781,10 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
             </div>
           </div>
 
-          <div className="field-col">
-            <label className="field-label" style={{ color: 'var(--text-accent)', fontWeight: 600 }}>Select Active Brain</label>
-            <select
-              className="settings-select"
-              style={{ border: '1px solid var(--border-accent)', background: 'rgba(59, 130, 246, 0.05)' }}
-              value={activeBrain}
-              onChange={(e) => {
-                const val = e.target.value;
-                if (val) {
-                  localStorage.setItem('total-recall-active-brain', val);
-                } else {
-                  localStorage.removeItem('total-recall-active-brain');
-                }
-                window.location.reload();
-              }}
-            >
-              <option value="">Global Brain (Root)</option>
-              {brains.map((b: any) => (
-                <option key={b.name} value={b.name}>{b.name} ({b.role} - {b.nodes} nodes)</option>
-              ))}
-            </select>
-          </div>
+          <p style={{ fontSize: 12, color: 'var(--text-tertiary)', margin: '0 0 12px', lineHeight: 1.5 }}>
+            Active vault layer is chosen in the <strong>sidebar brain selector</strong> (bottom left).
+            Fields below edit this install’s <code>brain.json</code> identity — not the active layer.
+          </p>
 
           <div style={{ display: 'flex', gap: 16 }}>
             <div className="field-col" style={{ flex: 1 }}>
@@ -765,7 +874,7 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
               <option value="antigravity">Antigravity (Google Deepmind)</option>
               <option value="gemini">Gemini (Google)</option>
               <option value="claude">Claude (Anthropic)</option>
-              <option value="openai">OpenAI (O-Series)</option>
+              <option value="codex">Codex (OpenAI)</option>
               <option value="grok">Grok (xAI)</option>
             </select>
           </div>
@@ -788,22 +897,30 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
               <p style={{ fontSize: 13, color: 'var(--text-tertiary)', margin: '0 0 16px', lineHeight: 1.5 }}>
                 Capture context directly from your browser. Install from the Chrome Web Store or load unpacked from <code>/extension</code> directory.
               </p>
-              <a href="/api/extension/download" download className="btn-primary" style={{ display: 'block', textAlign: 'center', textDecoration: 'none', width: '100%', boxSizing: 'border-box' }}>Download Extension</a>
+              <button
+                type="button"
+                className="btn-primary"
+                style={{ display: 'block', width: '100%', boxSizing: 'border-box' }}
+                onClick={handleDownloadExtension}
+              >
+                Download Extension
+              </button>
             </div>
 
             <div style={{ background: 'rgba(255,255,255,0.03)', padding: 20, borderRadius: 12, border: '1px solid rgba(255,255,255,0.06)' }}>
               <div style={{ fontSize: 24, marginBottom: 12 }}>🛠️</div>
               <h4 style={{ margin: '0 0 8px', fontSize: 15 }}>Developer Utilities</h4>
               <p style={{ fontSize: 13, color: 'var(--text-tertiary)', margin: '0 0 16px', lineHeight: 1.5 }}>
-                Run background maintenance tasks or re-index the local search tree.
+                Rebuild compiled instruction surfaces (vault compile) without a shell sandbox.
               </p>
               <div style={{ display: 'flex', gap: 12 }}>
                 <button 
                   className="btn-secondary" 
                   style={{ flex: 1 }}
-                  onClick={() => executeSandboxCommand('npx total-recall compile', 'Rebuilding Search Indexes')}
+                  disabled={rebuilding}
+                  onClick={handleRebuildIndex}
                 >
-                  Rebuild Index
+                  {rebuilding ? 'Rebuilding…' : 'Rebuild Index'}
                 </button>
               </div>
             </div>
@@ -826,13 +943,19 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
             </div>
           </div>
           
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 24, padding: '16px 20px', background: 'rgba(0,0,0,0.2)', borderRadius: 12, border: '1px solid rgba(255,255,255,0.05)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 24, padding: '16px 20px', background: 'rgba(0,0,0,0.2)', borderRadius: 12, border: '1px solid rgba(255,255,255,0.05)', gap: 16, flexWrap: 'wrap' }}>
             <div>
               <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>
-                {updateInfo?.updateAvailable ? `Update Available (v${updateInfo.latestVersion})` : 'System is up to date'}
+                {updateInfo?.updateAvailable
+                  ? `Update available (latest v${updateInfo.latestVersion || '?'})`
+                  : 'Host package is up to date'}
               </div>
               <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 4 }}>
-                {updateInfo?.updateAvailable ? 'A new version of Total Recall is available for download.' : 'You are running the latest version.'}
+                Running v{updateInfo?.currentVersion || health?.version || '—'}
+                {updateInfo?.latestVersion ? ` · npm latest v${updateInfo.latestVersion}` : ''}
+                {updateInfo?.updateAvailable
+                  ? ' · registered projects or host package can be upgraded'
+                  : ''}
               </div>
               {updateMessage && (
                 <div style={{ fontSize: 12, color: updateMessage.includes('error') || updateMessage.includes('failed') ? '#ef4444' : '#10b981', marginTop: 8 }}>
@@ -840,16 +963,14 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
                 </div>
               )}
             </div>
-            {updateInfo?.updateAvailable && (
-              <button 
-                className="btn-primary"
-                onClick={handleRunUpdate}
-                disabled={updating}
-                style={{ background: '#3fb950', border: 'none' }}
-              >
-                {updating ? 'Updating...' : 'Download & Restart'}
-              </button>
-            )}
+            <button 
+              className="btn-primary"
+              onClick={handleRunUpdate}
+              disabled={updating}
+              style={{ background: updateInfo?.updateAvailable ? '#3fb950' : undefined, border: 'none' }}
+            >
+              {updating ? 'Updating…' : updateInfo?.updateAvailable ? 'Apply Updates' : 'Check & Sync Projects'}
+            </button>
           </div>
         </div>
 
@@ -868,7 +989,7 @@ export default function SettingsPage({ activeBrainId }: { activeBrainId?: string
 
               <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                 {AGENTS_LIST.map((a) => {
-                  const activeAgent = health?.cli_agents?.includes(a.id);
+                  const activeAgent = availableAgents.includes(a.id);
                   return (
                     <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-tertiary)', padding: 12, borderRadius: 8, border: '1px solid var(--border)' }}>
                       <div style={{ flex: 1 }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "total-recall-brain",
-  "version": "3.18.2",
+  "version": "3.18.3",
   "description": "Personal AI system — database-free, SSSS-powered intelligence engine deployable to any POSIX host.",
   "type": "module",
   "workspaces": [

package/src/cli/agent-dir.mjs

@@ -56,7 +56,8 @@ export function detectProjectBrain(startDir = process.cwd()) {
       if (fs.existsSync(path.join(c.candidate, 'SKILL.md')) || fs.existsSync(path.join(c.candidate, 'memory-vault'))) {
         return {
           agentDir: c.dir,
-          brainDir: getGlobalBrainDir(),
+          // Project brain lives at the detected candidate — never alias to global.
+          brainDir: c.candidate,
           projectRoot: dir,
         };
       }