total-recall-brain 3.6.3 → 3.6.5

package/frontend/src/App.tsx

@@ -15,7 +15,7 @@ import ApiKeysPage from './pages/ApiKeysPage'
 import IntegrationsPage from './pages/IntegrationsPage'
 import BrainSelector from './components/BrainSelector'
 import AutomationsPage from './pages/AutomationsPage'
-import DeploymentsPage from './pages/DeploymentsPage'
+import ModelsPage from './pages/ModelsPage'
 import SkillsPage from './pages/SkillsPage'
 import UsagePage from './pages/UsagePage'
 import CollabPage from './pages/CollabPage'
@@ -99,14 +99,11 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           </svg>
           Sandbox
         </NavLink>
-        <NavLink to="/deployments" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-deployments">
+        <NavLink to="/models" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-models">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
-            <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
-            <line x1="6" y1="6" x2="6.01" y2="6" />
-            <line x1="6" y1="18" x2="6.01" y2="18" />
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line>
           </svg>
-          Deployments
+          Models & Agents
         </NavLink>
         <NavLink to="/health" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-health">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -312,7 +309,7 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
             <Route path="/automations" element={<AutomationsPage />} />
             <Route path="/files" element={<FilesPage />} />
             <Route path="/sandbox" element={<SandboxPage />} />
-            <Route path="/deployments" element={<DeploymentsPage />} />
+            <Route path="/models" element={<ModelsPage />} />
             <Route path="/health" element={<HealthPage />} />
             <Route path="/usage" element={<UsagePage />} />
             <Route path="/settings" element={<SettingsPage />} />

package/frontend/src/api.ts

@@ -530,6 +530,13 @@ export async function triggerDream(): Promise<{ success: boolean; status: string
   return res.json()
 }
 
+export async function runAgentDiagnostics(): Promise<{ success: boolean; output: string }> {
+  const res = await apiFetch(`${API_BASE}/api/diagnostics/agents`, { method: 'POST' })
+  if (!res.ok) throw new Error(`Diagnostics API error: ${res.status}`)
+  return res.json()
+}
+
+
 export async function fetchGraph(): Promise<{ nodes: MemoryNode[]; routes: unknown[] }> {
   const res = await apiFetch(`${API_BASE}/api/graph`)
   if (!res.ok) throw new Error(`Graph API error: ${res.status}`)

package/frontend/src/components/BrainSelector.tsx

@@ -181,9 +181,14 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
           {brains.map(brain => {
             const isSelected = selectedIds.includes(brain.id);
             return (
-              <button
+              <div
                 key={brain.id}
-                onClick={(e) => handleRowClick(brain.id, e)}
+                onClick={(e) => {
+                  if (brain.exists) {
+                    handleRowClick(brain.id, e);
+                    setExpanded(false); // Close dropdown on single selection
+                  }
+                }}
                 style={{
                   width: '100%',
                   padding: '8px 10px',
@@ -201,7 +206,8 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                 }}
                 onMouseEnter={e => { if (brain.exists) (e.currentTarget as HTMLElement).style.background = 'var(--bg-tertiary)' }}
                 onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = isSelected ? 'var(--accent-faint)' : 'transparent' }}
-                disabled={!brain.exists}
+                role="button"
+                tabIndex={0}
               >
                 <input
                   type="checkbox"
@@ -247,7 +253,7 @@ export default function BrainSelector({ activeBrainId, onBrainChange }: BrainSel
                 }}>
                   {brain.layer}
                 </span>
-              </button>
+              </div>
             );
           })}
         </div>

package/frontend/src/index.css

@@ -271,6 +271,7 @@ code, pre { font-family: var(--font-mono); }
 /* ─── Chat ───────────────────────────────────────────────────────────────────── */
 
 .chat-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
   height: calc(100vh - 1px);

package/frontend/src/pages/ChatPage.tsx

@@ -718,6 +718,8 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
             flexDirection: 'column',
             gap: '16px',
             width: '100%',
+            maxWidth: 800,
+            margin: '0 auto',
             pointerEvents: 'auto'
           }}>
             {messages.map((m, index) => (

package/frontend/src/pages/CollabPage.tsx

@@ -166,7 +166,7 @@ function CollabDashboard({ token, username, onLogout, onSelectSandbox }: { token
           <p style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>Share annotations and real-time page chat rooms</p>
         </div>
         <div style={{ display: 'flex', gap: '10px' }}>
-          <button className="btn btn-purple" onClick={onSelectSandbox}>🌐 Open Page Sandbox</button>
+          <button className="btn btn-purple" onClick={onSelectSandbox}>🌐 Open Browse Workspace</button>
           <button className="btn btn-ghost" onClick={onLogout} style={{ color: '#f87171' }}>Logout</button>
         </div>
       </div>
@@ -219,7 +219,7 @@ function CollabDashboard({ token, username, onLogout, onSelectSandbox }: { token
 function CollabSandbox({ token, username, onBack }: { token: string, username: string, onBack: () => void }) {
   const [groups, setGroups] = useState<CollabGroup[]>([]);
   const [selectedGroup, setSelectedGroup] = useState<CollabGroup | null>(null);
-  const [simulatedUrl, setSimulatedUrl] = useState('https://news.ycombinator.com');
+  const [activeBrowseUrl, setActiveBrowseUrl] = useState('https://news.ycombinator.com');
   const [activeUrl, setActiveUrl] = useState('https://news.ycombinator.com');
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const [noteText, setNoteText] = useState('');
@@ -313,9 +313,9 @@ function CollabSandbox({ token, username, onBack }: { token: string, username: s
 
   const handleUrlSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!simulatedUrl.trim()) return;
+    if (!activeBrowseUrl.trim()) return;
     setChatMessages([]); setSystemLogs([]); setActiveUsers([]);
-    setActiveUrl(simulatedUrl);
+    setActiveUrl(activeBrowseUrl);
   };
 
   const handleAddAnnotation = async (e: React.FormEvent) => {
@@ -348,14 +348,14 @@ function CollabSandbox({ token, username, onBack }: { token: string, username: s
       <div style={{ display: 'flex', gap: '16px', alignItems: 'center', justifyContent: 'space-between', background: 'rgba(255,255,255,0.02)', padding: '12px 20px', borderRadius: '8px', border: '1px solid var(--border)', flexWrap: 'wrap' }}>
         <button className="btn btn-ghost" onClick={onBack}>← Back to Workspaces</button>
         <form onSubmit={handleUrlSubmit} style={{ display: 'flex', gap: '10px', flex: '1', minWidth: '250px' }}>
-          <input type="text" value={simulatedUrl} onChange={e => setSimulatedUrl(e.target.value)} style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', color: '#fff', padding: '6px 12px', borderRadius: '6px', flex: '1', fontFamily: 'monospace' }} />
-          <button type="submit" className="btn btn-purple">Simulate Visit</button>
+          <input type="text" value={activeBrowseUrl} onChange={e => setActiveBrowseUrl(e.target.value)} style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border)', color: '#fff', padding: '6px 12px', borderRadius: '6px', flex: '1', fontFamily: 'monospace' }} />
+          <button type="submit" className="btn btn-purple">Connect URL</button>
         </form>
         <div style={{ fontSize: '13px', color: wsConnected ? '#34d399' : '#f87171' }}>● {wsConnected ? 'Connected' : 'Disconnected'}</div>
       </div>
 
       <div style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
-        Simulated browser context: <strong style={{ color: 'var(--purple-primary)', fontFamily: 'monospace' }}>{activeUrl}</strong>
+        Active browse context URL: <strong style={{ color: 'var(--purple-primary)', fontFamily: 'monospace' }}>{activeUrl}</strong>
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '20px', height: '500px' }}>

package/frontend/src/pages/ModelsPage.tsx

@@ -0,0 +1,380 @@
+import { useState, useEffect, useCallback } from 'react';
+import { fetchHealth, runAgentDiagnostics, fetchConfigJson, saveConfigJson } from '../api';
+import type { HealthData, ConfigJson } from '../types';
+
+export default function ModelsPage() {
+  const [health, setHealth] = useState<HealthData | null>(null);
+  const [configData, setConfigData] = useState<ConfigJson | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  
+  // CLI Agent Diagnostics state
+  const [runningDiagnostics, setRunningDiagnostics] = useState(false);
+  const [diagnosticLogs, setDiagnosticLogs] = useState<string | null>(null);
+
+  const fetchSystemData = useCallback(async () => {
+    try {
+      const systemHealth = await fetchHealth();
+      setHealth(systemHealth);
+      
+      const data = await fetchConfigJson();
+      if (!data.secrets) data.secrets = {};
+      if (!data.brain) data.brain = {};
+      setConfigData(data);
+      
+      setError(null);
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to sync system data.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate metrics polling on mount
+    void fetchSystemData();
+  }, [fetchSystemData]);
+
+  const handleSaveConfig = async () => {
+    if (!configData) return;
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      await saveConfigJson(configData);
+      setSuccess('Configuration saved successfully. Kernel will hot-reload settings.');
+      setTimeout(() => setSuccess(null), 4000);
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to save configuration.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleRunDiagnostics = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setRunningDiagnostics(true);
+    setError(null);
+    setSuccess(null);
+    setDiagnosticLogs(null);
+    try {
+      const res = await runAgentDiagnostics();
+      setDiagnosticLogs(res.output);
+      if (res.success) {
+        setSuccess('CLI Agent diagnostics completed successfully.');
+      } else {
+        setError('CLI Agent diagnostics finished with warnings or missing binaries.');
+      }
+      void fetchSystemData();
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Diagnostics execution failed.');
+    } finally {
+      setRunningDiagnostics(false);
+    }
+  };
+
+  const updateSecretsProp = (prop: string, value: string) => {
+    if (!configData) return;
+    setConfigData({
+      ...configData,
+      secrets: {
+        ...configData.secrets,
+        [prop]: value
+      }
+    });
+  };
+
+  const updateBrainProp = (prop: string, value: string) => {
+    if (!configData) return;
+    setConfigData({
+      ...configData,
+      brain: {
+        ...configData.brain,
+        [prop]: value
+      }
+    });
+  };
+
+  const AGENTS_LIST = [
+    { id: 'antigravity', name: 'Antigravity (Gemini SDK)', desc: 'Primary core developer agent' },
+    { id: 'gemini', name: 'Gemini CLI', desc: 'Direct Gemini assistant binary' },
+    { id: 'claude', name: 'Claude Code', desc: 'Anthropic developer CLI wrapper' },
+    { id: 'codex', name: 'Codex CLI', desc: 'OpenAI agent binary integration' }
+  ];
+
+
+  return (
+    <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
+      <div className="page-header" style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <div>
+          <h1>Models & Agents</h1>
+          <p>Configure Bring Your Own Model (BYOM) settings and manage active reasoning agents</p>
+        </div>
+        {configData && (
+          <button
+            onClick={handleSaveConfig}
+            disabled={saving}
+            className="btn btn-primary"
+            style={{ minWidth: 120 }}
+          >
+            {saving ? 'Saving...' : 'Save Configuration'}
+          </button>
+        )}
+      </div>
+
+      {error && (
+        <div className="badge badge-error" style={{ marginBottom: 20, display: 'inline-flex', padding: '6px 12px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #ef4444', color: '#f87171' }}>
+          ⚠️ {error}
+        </div>
+      )}
+      {success && (
+        <div className="badge badge-success" style={{ marginBottom: 20, display: 'inline-flex', padding: '6px 12px', background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10b981', color: '#34d399' }}>
+          ✓ {success}
+        </div>
+      )}
+
+      {loading ? (
+        <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-secondary)' }}>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ animation: 'spin 1s linear infinite', marginBottom: 12 }}>
+            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+          </svg>
+          <div>Loading models and agents...</div>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, flex: 1, minHeight: 0 }}>
+          
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
+            
+            {/* Ollama Panel */}
+            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 16 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+                <span style={{ fontSize: 20 }}>🦙</span>
+                <div>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Local Provider</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Connect Ollama, LM Studio, vLLM, or Llama.cpp</p>
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <label htmlFor="local_endpoint" style={{ fontSize: 13, fontWeight: 500 }}>Provider Base URL</label>
+                <input
+                  id="local_endpoint"
+                  type="text"
+                  placeholder="http://127.0.0.1:11434 or http://127.0.0.1:1234/v1"
+                  value={configData?.brain?.local_endpoint || ''}
+                  onChange={(e) => updateBrainProp('local_endpoint', e.target.value)}
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)',
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    outline: 'none',
+                    fontSize: 13
+                  }}
+                />
+                <span style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>Leave blank to use the default localhost endpoint.</span>
+              </div>
+              
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8 }}>
+                 <span className="badge" style={{
+                    background: health?.ollama === 'running' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+                    color: health?.ollama === 'running' ? '#10b981' : '#ef4444',
+                    border: health?.ollama === 'running' ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(239, 68, 68, 0.2)',
+                    fontSize: 10,
+                    padding: '4px 8px'
+                  }}>
+                    {health?.ollama === 'running' ? 'Connected' : 'Offline'}
+                  </span>
+                  {health?.ollama === 'running' && health?.ollama_models && (
+                    <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>
+                      {health.ollama_models.length} local models available
+                    </span>
+                  )}
+              </div>
+            </div>
+
+            {/* Cloud API Keys Panel */}
+            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 16 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+                <span style={{ fontSize: 20 }}>🔑</span>
+                <div>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Cloud Models (API Keys)</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Bring your own cloud models</p>
+                </div>
+              </div>
+
+              {/* Google Gemini API Key */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <label htmlFor="google_api_key" style={{ fontSize: 13, fontWeight: 500 }}>Google Gemini API Key</label>
+                <input
+                  id="google_api_key"
+                  type="password"
+                  placeholder="AIzaSy..."
+                  value={configData?.secrets?.google_api_key || ''}
+                  onChange={(e) => updateSecretsProp('google_api_key', e.target.value)}
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)',
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    outline: 'none',
+                    fontSize: 13
+                  }}
+                />
+              </div>
+
+              {/* Anthropic API Key */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <label htmlFor="anthropic_api_key" style={{ fontSize: 13, fontWeight: 500 }}>Anthropic API Key (Claude)</label>
+                <input
+                  id="anthropic_api_key"
+                  type="password"
+                  placeholder="sk-ant-..."
+                  value={configData?.secrets?.anthropic_api_key || ''}
+                  onChange={(e) => updateSecretsProp('anthropic_api_key', e.target.value)}
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)',
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    outline: 'none',
+                    fontSize: 13
+                  }}
+                />
+              </div>
+
+              {/* OpenAI API Key */}
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                <label htmlFor="openai_api_key" style={{ fontSize: 13, fontWeight: 500 }}>OpenAI API Key (Codex)</label>
+                <input
+                  id="openai_api_key"
+                  type="password"
+                  placeholder="sk-proj-..."
+                  value={configData?.secrets?.openai_api_key || ''}
+                  onChange={(e) => updateSecretsProp('openai_api_key', e.target.value)}
+                  style={{
+                    background: 'var(--bg-tertiary)',
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)',
+                    padding: '8px 12px',
+                    borderRadius: 6,
+                    outline: 'none',
+                    fontSize: 13
+                  }}
+                />
+              </div>
+              
+              <span style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>
+                These keys are stored locally and injected into the CLI reasoning agents on dispatch.
+              </span>
+            </div>
+
+          </div>
+
+          {/* CLI Agents Catalog & Diagnostics */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
+            
+            {/* Catalog */}
+            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 16 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+                <span style={{ fontSize: 20 }}>🧠</span>
+                <div>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>CLI Reasoning Agents</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Headless CLI reasoning agents configured on system</p>
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                {AGENTS_LIST.map((a) => {
+                  const activeAgent = health?.cli_agents?.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 }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{a.name}</span>
+                          <span className="badge" style={{
+                            fontSize: 9,
+                            padding: '2px 6px',
+                            background: activeAgent ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+                            color: activeAgent ? '#10b981' : '#ef4444',
+                            border: activeAgent ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(239, 68, 68, 0.2)'
+                          }}>
+                            {activeAgent ? 'available' : 'missing'}
+                          </span>
+                        </div>
+                        <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginTop: 2 }}>{a.desc}</div>
+                        <div style={{ fontSize: 9, color: 'var(--text-tertiary)', marginTop: 4 }}>Registry ID: {a.id}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Diagnostics Form */}
+            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 20 }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+                <span style={{ fontSize: 20 }}>📡</span>
+                <div>
+                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>CLI Agent Diagnostics</h3>
+                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Trigger active paths check and verify registered agents</p>
+                </div>
+              </div>
+
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                <p style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--text-secondary)' }}>
+                  This executes a diagnostic check on registered reasoning agents (equivalent to running <code>npx total-recall upgrade --agents</code> in the background) to audit paths and verify binaries.
+                </p>
+
+                <button
+                  onClick={handleRunDiagnostics}
+                  disabled={runningDiagnostics}
+                  style={{
+                    background: 'linear-gradient(135deg, var(--accent), var(--accent-hover))',
+                    color: '#fff',
+                    padding: '10px',
+                    borderRadius: 6,
+                    fontWeight: 500,
+                    border: 'none',
+                    marginTop: 8,
+                    cursor: runningDiagnostics ? 'not-allowed' : 'pointer'
+                  }}
+                >
+                  {runningDiagnostics ? '⏳ Running Audit...' : '🚀 Run Diagnostics Audit'}
+                </button>
+              </div>
+
+              {diagnosticLogs && (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
+                  <span style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)' }}>Diagnostics Console Output:</span>
+                  <pre style={{
+                    background: '#07070a',
+                    border: '1px solid var(--border)',
+                    padding: 10,
+                    borderRadius: 6,
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: 11,
+                    color: '#e6edf3',
+                    whiteSpace: 'pre-wrap',
+                    maxHeight: 150,
+                    overflowY: 'auto'
+                  }}>
+                    {diagnosticLogs}
+                  </pre>
+                </div>
+              )}
+            </div>
+
+          </div>
+
+        </div>
+      )}
+
+    </div>
+  );
+}

package/frontend/src/types.ts

@@ -47,6 +47,8 @@ export interface HealthData {
   ollama_models?: string[]
   cli_agents?: string[]
   daemon?: string
+  caddy?: string
+  cloudflare?: string
   emergency_alerts?: string | null
 }
 
@@ -158,6 +160,7 @@ export interface ConfigJson {
   }
   brain?: {
     preferred_agent?: string
+    local_endpoint?: string
   }
   secrets?: {
     google_api_key?: string

package/frontend/vite.config.ts

@@ -8,15 +8,15 @@ export default defineConfig({
     port: 5173,
     proxy: {
       '/v1': {
-        target: 'http://localhost:3000',
+        target: 'http://127.0.0.1:3000',
         changeOrigin: true,
       },
       '/health': {
-        target: 'http://localhost:3000',
+        target: 'http://127.0.0.1:3000',
         changeOrigin: true,
       },
       '/api': {
-        target: 'http://localhost:3000',
+        target: 'http://127.0.0.1:3000',
         changeOrigin: true,
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "total-recall-brain",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "description": "Sovereign AI system — database-free, SSSS-powered personal intelligence engine deployable to any POSIX host.",
   "type": "module",
   "bin": {

package/src/core/daemon-loop.mjs

@@ -68,11 +68,15 @@ function requiresLLM(task) {
   return false;
 }
 
-/**
- * Dispatch a task to the appropriate engine.
- * Only deterministic (non-LLM) tasks are executed.
- */
 async function dispatchTask(task) {
+  if (requiresLLM(task)) {
+    logger.info({
+      subsystem: 'daemon-loop',
+      message: `Skipping task (requires LLM): ${task.slug} [${task.category}]`,
+    });
+    return { success: true, skippedLLM: true, output: 'Skipped — handled by IDE agents' };
+  }
+
   const category = task.category;
 
   try {
@@ -85,13 +89,11 @@ async function dispatchTask(task) {
         return await runResearchTask(task);
 
       default:
-        // All other categories (research, deliberation, inference, etc.)
-        // require LLM and are handled by IDE agents, not the daemon.
         logger.info({
           subsystem: 'daemon-loop',
           message: `Skipping task (not deterministic): ${task.slug} [${category}]`,
         });
-        return { success: true, output: 'Skipped — handled by IDE agents' };
+        return { success: true, skippedLLM: true, output: 'Skipped — handled by IDE agents' };
     }
   } catch (err) {
     logger.info({
@@ -309,7 +311,11 @@ async function main() {
       // Mark complete
       if ((source === 'explicit' || source === 'idle') && task._filepath) {
         try {
-          updateTaskStatus(task, result.success ? 'completed' : 'failed', QUEUE_DIR);
+          if (result.skippedLLM) {
+            updateTaskStatus(task, 'pending', QUEUE_DIR);
+          } else {
+            updateTaskStatus(task, result.success ? 'completed' : 'failed', QUEUE_DIR);
+          }
         } catch (statusErr) {
           logger.info({
             subsystem: 'daemon-loop',
@@ -321,15 +327,22 @@ async function main() {
         try {
           const patch = {
             status: result.success ? 'pending' : 'failed',
-            notes: result.output || result.error || null,
+            // Append the output rather than completely overwriting the original rationale
+            notes: result.output ? `Phase output: ${result.output}` : (result.error || null),
           };
           if (result.factSlug) {
             patch.node_slug = result.factSlug;
           }
-          // Only advance through acquisition phase — skip LLM phases
-          if (result.success && task._research_phase === 'acquisition' && result.factSlug) {
-            // Research stays in acquisition — no LLM phases to advance to
-            patch.status = 'done';
+          // If the task was skipped because it requires an LLM, DO NOT complete the research project.
+          // Wait for an IDE agent to run it.
+          if (result.skippedLLM) {
+            patch.status = 'pending';
+          } else if (result.success && task._research_phase === 'acquisition' && result.factSlug) {
+            // Acquisition is done, advance to deliberation phase for LLM processing!
+            patch.status = 'pending';
+            patch.research_phase = 'deliberation';
+            // Also notify the user/UI that phase 1 is complete!
+            patch.completed_at = new Date().toISOString();
           }
           updateQueueItem(task._research_id, patch);
         } catch (err) {

package/src/server/index.mjs

@@ -138,6 +138,23 @@ app.get('/health', requireAuthOrLocal, async (req, res) => {
   // Determine overall status
   const hasCriticalIssue = emergencyAlerts.length > 0 || daemonStatus === 'dead' || cliAgents.length === 0;
 
+  // Check Caddy and Cloudflare status
+  let caddyStatus = 'inactive';
+  let cloudflareStatus = 'inactive';
+  try {
+    const { exec } = await import('node:child_process');
+    const util = await import('node:util');
+    const execAsync = util.promisify(exec);
+    try {
+      await execAsync('pgrep caddy');
+      caddyStatus = 'active';
+    } catch { }
+    try {
+      await execAsync('pgrep cloudflared');
+      cloudflareStatus = 'active';
+    } catch { }
+  } catch { }
+
   res.json({
     status: hasCriticalIssue ? 'degraded' : 'healthy',
     version: PACKAGE_VERSION,
@@ -146,6 +163,8 @@ app.get('/health', requireAuthOrLocal, async (req, res) => {
     disk,
     cli_agents: cliAgents,
     daemon: daemonStatus,
+    caddy: caddyStatus,
+    cloudflare: cloudflareStatus,
     emergency_alerts: emergencyAlerts || null,
     vfs: {
       exists: vaultExists,

package/src/server/rest.mjs

@@ -468,6 +468,25 @@ router.get('/api/vault/status', requireAuth, requireScope('memory:read'), async
   }
 });
 
+/**
+ * POST /api/diagnostics/agents
+ * Run `upgrade --agents` diagnostics checks and return the console text output.
+ */
+router.post('/api/diagnostics/agents', requireAuth, requireScope('health:read'), async (req, res) => {
+  try {
+    const result = spawnSync('node', [path.join(ROOT, 'bin', 'total-recall.mjs'), 'upgrade', '--agents'], {
+      encoding: 'utf8',
+      cwd: ROOT,
+      env: { ...process.env }
+    });
+    const output = (result.stdout || '') + (result.stderr || '');
+    res.json({ success: result.status === 0, output });
+  } catch (err) {
+    serverError(res, err);
+  }
+});
+
+
 // ─── Keys ─────────── (moved to ./routes/keys.mjs)
 // ─── Sessions ─────── (moved to ./routes/sessions.mjs)
 // ─── Sandbox ──────────────────────────────────────────────────────────────────

package/src/server/route-manifest.json

@@ -67,6 +67,10 @@
     "method": "POST",
     "path": "/api/context/stream"
   },
+  {
+    "method": "POST",
+    "path": "/api/diagnostics/agents"
+  },
   {
     "method": "POST",
     "path": "/api/dream"

package/frontend/src/pages/DeploymentsPage.tsx

@@ -1,275 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { fetchHealth, fetchLogs } from '../api';
-import type { HealthData } from '../types';
-
-export default function DeploymentsPage() {
-  const [health, setHealth] = useState<HealthData | null>(null);
-  const [logs, setLogs] = useState('(loading live cognitive activity console streams...)');
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
-  
-  // Model Pull Form state
-  const [modelToPull, setModelToPull] = useState('gemma4:26b');
-  const [pulling, setPulling] = useState(false);
-
-  const consoleEndRef = useRef<HTMLDivElement>(null);
-
-  const fetchSystemData = async () => {
-    try {
-      const systemHealth = await fetchHealth();
-      setHealth(systemHealth);
-      
-      const daemonLogs = await fetchLogs('daemon');
-      setLogs(daemonLogs.content || '(no console activity streamed yet)');
-      setError(null);
-    } catch (err: unknown) {
-      setError((err as Error).message || 'Failed to sync system health.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate metrics polling on mount
-    void fetchSystemData();
-    const interval = setInterval(fetchSystemData, 4000);
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    // Auto-scroll the retro console log to bottom
-    if (consoleEndRef.current) {
-      consoleEndRef.current.scrollIntoView({ behavior: 'smooth' });
-    }
-  }, [logs]);
-
-  const handlePullModel = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setPulling(true);
-    setError(null);
-    setSuccess(null);
-    try {
-      // Simulate/trigger model pull trigger enqueued in task manager
-      setSuccess(`Model pull job successfully enqueued for "${modelToPull}" in the background task runner.`);
-      setTimeout(() => setSuccess(null), 5000);
-    } catch (err: unknown) {
-      setError((err as Error).message || 'Model pull request failed.');
-    } finally {
-      setPulling(false);
-    }
-  };
-
-  const MODELS_CATALOG = [
-    { id: 'gemma4:26b', name: 'Gemma 4 (26B Parameter)', size: '15.6 GB', purpose: 'Standard Kernel LLM (Reasoning & Code Harness)', status: 'ready', type: 'ollama' },
-    { id: 'gemma5:32b', name: 'Gemma 5 Pro (32B Parameter)', size: '19.2 GB', purpose: 'Advanced Reasoning & Deliberation Engine', status: 'available', type: 'ollama' },
-    { id: 'text-embedding-004', name: 'Gemini Text Embeddings v4', size: 'Cloud-native', purpose: 'High-Dimensional Dense Vectorization', status: 'ready', type: 'gemini' },
-    { id: 'claude-3-5-sonnet', name: 'Claude 3.5 Sonnet', size: 'Cloud-native', purpose: 'Frontier Advanced Programming', status: 'ready', type: 'claude' },
-  ];
-
-  return (
-    <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
-      <div className="page-header" style={{ marginBottom: 24 }}>
-        <h1>Sovereign Stack Deployments</h1>
-        <p>Monitor your machine services, pull kernel intelligence models, and stream activity logs</p>
-      </div>
-
-      {error && (
-        <div className="badge badge-error" style={{ marginBottom: 20, display: 'inline-flex', padding: '6px 12px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #ef4444', color: '#f87171' }}>
-          ⚠️ {error}
-        </div>
-      )}
-      {success && (
-        <div className="badge badge-success" style={{ marginBottom: 20, display: 'inline-flex', padding: '6px 12px', background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10b981', color: '#34d399' }}>
-          ✓ {success}
-        </div>
-      )}
-
-      {loading ? (
-        <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-secondary)' }}>
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ animation: 'spin 1s linear infinite', marginBottom: 12 }}>
-            <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
-          </svg>
-          <div>Checking deployment gateways...</div>
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, flex: 1, minHeight: 0 }}>
-          
-          {/* Services Status Panels Grid */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
-            
-            {/* Service 1: Cognitive Daemon */}
-            <div className="card" style={{ padding: 20, background: 'rgba(18, 18, 26, 0.6)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <span style={{ fontSize: 24 }}>⚙️</span>
-                <div>
-                  <h4 style={{ fontSize: 13, fontWeight: 600 }}>Reasoning Daemon</h4>
-                  <p style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>System 2 scheduler loop</p>
-                </div>
-              </div>
-              <span className="badge" style={{
-                background: health?.daemon === 'running' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
-                color: health?.daemon === 'running' ? '#10b981' : '#ef4444',
-                border: health?.daemon === 'running' ? '1px solid rgba(16, 185, 129, 0.2)' : '1px solid rgba(239, 68, 68, 0.2)'
-              }}>
-                {health?.daemon || 'dead'}
-              </span>
-            </div>
-
-            {/* Service 2: Caddy SSL Tunnel */}
-            <div className="card" style={{ padding: 20, background: 'rgba(18, 18, 26, 0.6)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <span style={{ fontSize: 24 }}>🔒</span>
-                <div>
-                  <h4 style={{ fontSize: 13, fontWeight: 600 }}>Caddy SSL Proxy</h4>
-                  <p style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>Reverse proxy tunnel gateway</p>
-                </div>
-              </div>
-              <span className="badge" style={{ background: 'rgba(16, 185, 129, 0.1)', color: '#10b981', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
-                active
-              </span>
-            </div>
-
-            {/* Service 3: Cloudflare Secure Tunnel */}
-            <div className="card" style={{ padding: 20, background: 'rgba(18, 18, 26, 0.6)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <span style={{ fontSize: 24 }}>☁️</span>
-                <div>
-                  <h4 style={{ fontSize: 13, fontWeight: 600 }}>Cloudflare Secure Tunnel</h4>
-                  <p style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>Expose tunnel behind SSL</p>
-                </div>
-              </div>
-              <span className="badge" style={{ background: 'rgba(16, 185, 129, 0.1)', color: '#10b981', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
-                active
-              </span>
-            </div>
-
-          </div>
-
-          {/* Model Catalog & Pull form */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
-            
-            {/* Catalog */}
-            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 16 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
-                <span style={{ fontSize: 20 }}>🧠</span>
-                <div>
-                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Kernel LLM Catalog</h3>
-                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Provisioned local intelligence engines</p>
-                </div>
-              </div>
-
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-                {MODELS_CATALOG.map((m) => {
-                  const activeModel = health?.ollama_models?.includes(m.id) || m.type !== 'ollama';
-                  return (
-                    <div key={m.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 }}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>{m.name}</span>
-                          <span className="badge" style={{
-                            fontSize: 9,
-                            padding: '2px 6px',
-                            background: activeModel ? 'rgba(0, 206, 201, 0.1)' : 'rgba(255, 255, 255, 0.04)',
-                            color: activeModel ? '#00cec9' : 'var(--text-tertiary)',
-                            border: activeModel ? '1px solid rgba(0, 206, 201, 0.2)' : '1px solid var(--border)'
-                          }}>
-                            {activeModel ? 'active' : 'available'}
-                          </span>
-                        </div>
-                        <div style={{ fontSize: 10, color: 'var(--text-secondary)', marginTop: 2 }}>{m.purpose}</div>
-                        <div style={{ fontSize: 9, color: 'var(--text-tertiary)', marginTop: 4 }}>ID: {m.id} • Size: {m.size}</div>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-
-            {/* Pull Model Form */}
-            <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 20 }}>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
-                <span style={{ fontSize: 20 }}>📡</span>
-                <div>
-                  <h3 style={{ fontSize: 14, fontWeight: 600 }}>Pull Catalog Model</h3>
-                  <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Trigger high-performance model downloads in background</p>
-                </div>
-              </div>
-
-              <form onSubmit={handlePullModel} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <label htmlFor="model_pull" style={{ fontSize: 12, fontWeight: 500 }}>Select Catalog Model</label>
-                  <select
-                    id="model_pull"
-                    value={modelToPull}
-                    onChange={(e) => setModelToPull(e.target.value)}
-                    style={{
-                      background: 'var(--bg-tertiary)',
-                      color: 'var(--text-primary)',
-                      border: '1px solid var(--border)',
-                      padding: '8px 12px',
-                      borderRadius: 6,
-                      outline: 'none',
-                      fontSize: 13
-                    }}
-                  >
-                    <option value="gemma4:26b">Gemma 4 (26B Parameter) — 15.6 GB</option>
-                    <option value="gemma5:32b">Gemma 5 Pro (32B Parameter) — 19.2 GB</option>
-                    <option value="llama3:70b">Llama 3 (70B Parameter) — 40 GB</option>
-                  </select>
-                </div>
-
-                <button
-                  type="submit"
-                  disabled={pulling}
-                  style={{
-                    background: 'linear-gradient(135deg, var(--accent), var(--accent-hover))',
-                    color: '#fff',
-                    padding: '10px',
-                    borderRadius: 6,
-                    fontWeight: 500,
-                    border: 'none',
-                    marginTop: 8,
-                    cursor: pulling ? 'not-allowed' : 'pointer'
-                  }}
-                >
-                  {pulling ? '⏳ Initiating download...' : '🚀 Trigger Model Download'}
-                </button>
-              </form>
-            </div>
-
-          </div>
-
-          {/* Active Terminal Console Logs */}
-          <div className="card" style={{ flex: 1, minHeight: 300, background: '#07070a', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', borderRadius: 10, overflow: 'hidden' }}>
-            <div style={{ background: '#0e0e15', padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff6b6b' }} />
-              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#fdcb6e' }} />
-              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#00cec9' }} />
-              <span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)', marginLeft: 8 }}>bash — daemon-activity.log — 80x24</span>
-            </div>
-            
-            <pre style={{
-              flex: 1,
-              overflowY: 'auto',
-              padding: 16,
-              margin: 0,
-              fontFamily: 'var(--font-mono)',
-              fontSize: 12,
-              color: '#34d399',
-              background: '#07070a',
-              lineHeight: 1.5,
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-all'
-            }}>
-              {logs}
-              <div ref={consoleEndRef} />
-            </pre>
-          </div>
-
-        </div>
-      )}
-
-    </div>
-  );
-}