total-recall-brain 3.6.4 → 3.6.6

package/extension/background.js

@@ -10,6 +10,10 @@ const { share, search, healthCheck } = self.BrainClient;
 // Context menu registration
 // ---------------------------------------------------------------------------
 chrome.runtime.onInstalled.addListener(() => {
+  if (chrome.sidePanel && chrome.sidePanel.setPanelBehavior) {
+    chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true }).catch(console.error);
+  }
+
   chrome.contextMenus.create({
     id: 'send-to-brain',
     title: 'Send to Brain',

package/extension/content-script.js

@@ -398,7 +398,15 @@
           toast.classList.add('visible');
           setTimeout(() => toast.classList.remove('visible'), 2500);
         } else {
-          toast.textContent = '❌ Action failed';
+          let errText = '❌ Action failed';
+          if (res && res.error) {
+            if (res.error.includes('Authentication failed')) {
+              errText = '❌ Auth Error - Check PAT';
+            } else {
+              errText = `❌ ${res.error}`;
+            }
+          }
+          toast.textContent = errText;
           toast.style.background = '#e74c3c';
           toast.style.boxShadow = '0 4px 12px rgba(231, 76, 60, 0.3)';
           toast.classList.add('visible');

package/extension/manifest.json

@@ -10,7 +10,6 @@
     "service_worker": "background.js"
   },
   "action": {
-    "default_popup": "popup/popup.html",
     "default_icon": {
       "16": "icons/icon-16.png",
       "48": "icons/icon-48.png",

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/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/{DeploymentsPage.tsx → ModelsPage.tsx}

@@ -1,11 +1,12 @@
-import { useState, useEffect, useRef } from 'react';
-import { fetchHealth, fetchLogs, runAgentDiagnostics } from '../api';
-import type { HealthData } from '../types';
+import { useState, useEffect, useCallback } from 'react';
+import { fetchHealth, runAgentDiagnostics, fetchConfigJson, saveConfigJson } from '../api';
+import type { HealthData, ConfigJson } from '../types';
 
-export default function DeploymentsPage() {
+export default function ModelsPage() {
   const [health, setHealth] = useState<HealthData | null>(null);
-  const [logs, setLogs] = useState('(loading live cognitive activity console streams...)');
+  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);
   
@@ -13,36 +14,44 @@ export default function DeploymentsPage() {
   const [runningDiagnostics, setRunningDiagnostics] = useState(false);
   const [diagnosticLogs, setDiagnosticLogs] = useState<string | null>(null);
 
-  const consoleEndRef = useRef<HTMLDivElement>(null);
-
-  const fetchSystemData = async () => {
+  const fetchSystemData = useCallback(async () => {
     try {
       const systemHealth = await fetchHealth();
       setHealth(systemHealth);
       
-      const daemonLogs = await fetchLogs('daemon');
-      setLogs(daemonLogs.content || '(no console activity streamed yet)');
+      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 health.');
+      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();
-    const interval = setInterval(fetchSystemData, 4000);
-    return () => clearInterval(interval);
-  }, []);
+  }, [fetchSystemData]);
 
-  useEffect(() => {
-    // Auto-scroll the retro console log to bottom
-    if (consoleEndRef.current) {
-      consoleEndRef.current.scrollIntoView({ behavior: 'smooth' });
+  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);
     }
-  }, [logs]);
+  };
 
   const handleRunDiagnostics = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -66,6 +75,28 @@ export default function DeploymentsPage() {
     }
   };
 
+  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' },
@@ -76,9 +107,21 @@ export default function DeploymentsPage() {
 
   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 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 && (
@@ -97,63 +140,143 @@ export default function DeploymentsPage() {
           <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>Loading models and agents...</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 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
             
-            {/* 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>
+            {/* 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>
-                  <h4 style={{ fontSize: 13, fontWeight: 600 }}>Reasoning Daemon</h4>
-                  <p style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>System 2 scheduler loop</p>
+                  <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>
-              <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 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>
-              <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>
+            {/* 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>
-                  <h4 style={{ fontSize: 13, fontWeight: 600 }}>Cloudflare Secure Tunnel</h4>
-                  <p style={{ fontSize: 10, color: 'var(--text-tertiary)' }}>Expose tunnel behind SSL</p>
+                  <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>
-              <span className="badge" style={{ background: 'rgba(16, 185, 129, 0.1)', color: '#10b981', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
-                active
+
+              {/* 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 */}
+          {/* CLI Agents Catalog & Diagnostics */}
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 24 }}>
             
             {/* Catalog */}
@@ -249,33 +372,6 @@ export default function DeploymentsPage() {
 
           </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>
       )}
 

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.4",
+  "version": "3.6.6",
   "description": "Sovereign AI system — database-free, SSSS-powered personal intelligence engine deployable to any POSIX host.",
   "type": "module",
   "bin": {