total-recall-brain 3.13.0 → 3.13.2

package/frontend/src/pages/ChatPage.tsx

@@ -110,20 +110,24 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
       .then(health => {
         const agents = health.cli_agents && health.cli_agents.length > 0
           ? health.cli_agents
-          : ['antigravity', 'claude', 'codex'];
+          : ['antigravity', 'grok', 'claude', 'codex'];
         setAvailableModels(agents);
         
         const saved = localStorage.getItem('selectedModel');
         if (saved && agents.includes(saved)) {
           setSelectedModel(saved);
         } else {
-          const defaultAgent = agents.includes('antigravity') ? 'antigravity' : agents[0];
+          const defaultAgent = agents.includes('antigravity')
+            ? 'antigravity'
+            : agents.includes('grok')
+              ? 'grok'
+              : agents[0];
           setSelectedModel(defaultAgent);
           localStorage.setItem('selectedModel', defaultAgent);
         }
       })
       .catch(() => {
-        const agents = ['antigravity', 'claude', 'codex'];
+        const agents = ['antigravity', 'grok', 'claude', 'codex'];
         setAvailableModels(agents);
         const saved = localStorage.getItem('selectedModel');
         if (saved && agents.includes(saved)) {
@@ -170,11 +174,51 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
     }
   }, [])
 
-  // Reload memory nodes when active selected brain changes
+  // Reload memory nodes when active selected brain changes or background SSE triggers
   useEffect(() => {
-    listMemory(activeBrainId)
-      .then(setAllMemoryNodes)
-      .catch(console.error)
+    let active = true
+
+    const loadMemoryNodes = () => {
+      listMemory(activeBrainId)
+        .then(nodes => {
+          if (!active) return
+          setAllMemoryNodes(nodes)
+          // Ensure selected grounding nodes stay in sync if a node is deleted in another tab/process
+          setSelectedGroundingNodes(prev => prev.filter(slug => nodes.some(n => n.slug === slug)))
+        })
+        .catch(console.error)
+    }
+
+    // Initial load
+    loadMemoryNodes()
+
+    // Listen to Cognitive Daemon SSE for memory surface rebuilds
+    const sseUrl = "http://localhost:9111/stream"
+    const eventSource = new EventSource(sseUrl)
+
+    eventSource.onmessage = (event) => {
+      if (!active) return
+      try {
+        const logEntry = JSON.parse(event.data)
+        if (
+          logEntry.sender === 'conflict-detector' ||
+          logEntry.sender === 'memory-ingestion' ||
+          logEntry.message?.includes('Surface compilation') ||
+          logEntry.message?.includes('Brain embeddings rebuilt') ||
+          logEntry.message?.includes('Graph indices rebuilt') ||
+          logEntry.message?.includes('deleted')
+        ) {
+          loadMemoryNodes()
+        }
+      } catch (e) {
+        // ignore parsing errors from stream
+      }
+    }
+
+    return () => {
+      active = false
+      eventSource.close()
+    }
   }, [activeBrainId])
 
   // Click outside listener for grounding node selector popover and model selector dropdown
@@ -501,8 +545,36 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
       </aside>
 
       {/* Main Chat Area */}
-      <div className="chat-container">
-        <header className="chat-header animate-fade-in">
+      <div className="chat-container" style={{ position: 'relative', overflow: 'hidden' }}>
+        {/* Decorative graph only — never intercepts clicks (was blocking model/provider UI) */}
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 0,
+            pointerEvents: 'none',
+            opacity: messages.length > 0 ? 0.22 : 0.55,
+            transition: 'opacity 0.3s ease',
+          }}
+        >
+          <Graph3D
+            threads={threads}
+            memoryNodes={allMemoryNodes}
+            researchItems={researchItems}
+            onOpenThread={() => {}}
+            onGroundMemoryNode={() => {}}
+            selectedGroundingNodes={selectedGroundingNodes}
+            interactive={false}
+          />
+        </div>
+        <header
+          className="chat-header animate-fade-in"
+          style={{ position: 'relative', zIndex: 40, overflow: 'visible' }}
+        >
           <div className="chat-header-title">
             <h2>Chat Session</h2>
             {activeThreadId && (
@@ -511,13 +583,17 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
               </span>
             )}
           </div>
-          <div className="chat-header-model-selector" ref={dropdownRef}>
-            <span className="selector-label">Model:</span>
-            <div className="model-selector-dropdown-wrapper">
+          <div className="chat-header-model-selector" ref={dropdownRef} style={{ position: 'relative', zIndex: 50 }}>
+            <span className="selector-label">Model / provider:</span>
+            <div className="model-selector-dropdown-wrapper" style={{ position: 'relative', zIndex: 50 }}>
               <button 
+                type="button"
                 className={`model-selector-dropdown-btn ${showModelDropdown ? 'active' : ''}`}
-                onClick={() => setShowModelDropdown(!showModelDropdown)}
-                title="Select CLI agent model"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setShowModelDropdown((v) => !v)
+                }}
+                title="Select CLI agent / provider"
               >
                 <span style={{ textTransform: 'capitalize' }}>{selectedModel || 'Select Model'}</span>
                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -525,12 +601,19 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
                 </svg>
               </button>
               {showModelDropdown && (
-                <div className="model-selector-menu glass">
+                <div
+                  className="model-selector-menu glass"
+                  style={{ zIndex: 200, pointerEvents: 'auto' }}
+                  role="listbox"
+                >
                   {availableModels.map(modelName => (
                     <div 
                       key={modelName} 
+                      role="option"
+                      aria-selected={selectedModel === modelName}
                       className={`model-selector-item ${selectedModel === modelName ? 'selected' : ''}`}
-                      onClick={() => {
+                      onClick={(e) => {
+                        e.stopPropagation()
                         setSelectedModel(modelName)
                         localStorage.setItem('selectedModel', modelName)
                         setSelectedSubModel('')
@@ -542,6 +625,7 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
                         <span className="model-selector-item-name" style={{ textTransform: 'capitalize' }}>{modelName}</span>
                         <span className="model-selector-item-desc">
                           {modelName === 'antigravity' && 'Google Antigravity'}
+                          {modelName === 'grok' && 'xAI Grok Build CLI'}
                           {modelName === 'gemini' && 'Google Gemini CLI'}
                           {modelName === 'claude' && 'Anthropic Claude CLI'}
                           {modelName === 'codex' && 'Codex Coding Agent'}
@@ -654,7 +738,7 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
               style={{
                 flexShrink: 0,
                 padding: '6px 14px',
-                background: 'linear-gradient(135deg, #6c5ce7, #a29bfe)',
+                background: 'linear-gradient(135deg, #3b82f6, #93c5fd)',
                 color: '#fff',
                 borderRadius: 6,
                 fontWeight: 500,
@@ -685,35 +769,9 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
           </div>
         )}
 
-        <div className="chat-messages" style={{ position: 'relative' }}>
-          <div style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 1,
-            pointerEvents: messages.length > 0 ? 'none' : 'auto',
-            opacity: messages.length > 0 ? 0.35 : 1,
-            transition: 'opacity 0.3s ease'
-          }}>
-            <Graph3D
-              threads={threads}
-              memoryNodes={allMemoryNodes}
-              researchItems={researchItems}
-              onOpenThread={(threadId) => setActiveThreadId(threadId)}
-              onGroundMemoryNode={(slug) => {
-                setSelectedGroundingNodes(prev =>
-                  prev.includes(slug) ? prev.filter(s => s !== slug) : [...prev, slug]
-                )
-              }}
-              selectedGroundingNodes={selectedGroundingNodes}
-            />
-          </div>
-
+        <div className="chat-messages" style={{ position: 'relative', zIndex: 1, pointerEvents: 'auto' }}>
           <div style={{
             position: 'relative',
-            zIndex: 2,
             display: 'flex',
             flexDirection: 'column',
             gap: '16px',
@@ -773,7 +831,7 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
           <div ref={messagesEnd} />
           </div>
         </div>
-        <div className="chat-input-bar">
+        <div className="chat-input-bar" style={{ position: 'relative', zIndex: 30, pointerEvents: 'auto' }}>
           {selectedGroundingNodes.length > 0 && (
             <div className="grounding-pills">
               {selectedGroundingNodes.map(slug => {

package/frontend/src/pages/DesignDocsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { fetchDesignDocs, fetchDesignDocContent } from '../api';
 
 // ─── Types ──────────────────────────────────────────────────────────────────────
@@ -42,11 +42,11 @@ const KANBAN_COLUMNS: KanbanColumn[] = [
   {
     id: 'in-progress',
     title: 'In Progress',
-    accent: '#6c5ce7',
+    accent: '#3b82f6',
     cards: [
       { id: 'auto-update', name: 'Auto Update Feature', emoji: '🔄' },
       { id: 'compaction-cache', name: 'Compaction Cache Bypass', emoji: '⚡' },
-      { id: 'sovereign-policy', name: 'Sovereign Policy Enforcement', emoji: '🛡️' },
+      { id: 'memory-policy', name: 'Memory Policy Enforcement', emoji: '🛡️' },
     ],
   },
   {
@@ -70,7 +70,7 @@ const KANBAN_COLUMNS: KanbanColumn[] = [
       { id: 'okf-integration', name: 'OKF Integration', emoji: '✅' },
       { id: 'byom-architecture', name: 'BYOM Architecture', emoji: '✅' },
       { id: 'cli-performance', name: 'CLI Performance Optimization', emoji: '✅' },
-      { id: 'ssss-sovereign', name: 'SSSS Sovereign AI OS', emoji: '✅' },
+      { id: 'ssss-portable-memory', name: 'SSSS Portable Memory', emoji: '✅' },
       { id: 'embedding-pipeline', name: 'Embedding Pipeline v2', emoji: '✅' },
       { id: 'surface-compiler', name: 'Surface Compiler', emoji: '✅' },
     ],
@@ -91,7 +91,7 @@ const KANBAN_COLUMNS: KanbanColumn[] = [
 
 // ─── Simple Markdown Renderer ───────────────────────────────────────────────────
 
-function renderMarkdown(md: string): JSX.Element {
+function renderMarkdown(md: string): React.ReactNode {
   if (!md) return <></>;
 
   let html = md

package/frontend/src/pages/FilesPage.tsx

@@ -35,7 +35,11 @@ export default function FilesPage() {
         listSkills()
       ])
       setFiles(filesData)
-      setSkills(skillsData)
+      // Skills API returns { skills, repos } catalog — flatten for this page
+      const flat = Array.isArray(skillsData)
+        ? skillsData
+        : (skillsData?.skills || [])
+      setSkills(flat as import('../types').FileNode[])
       setError("")
     } catch (e) {
       setError((e as Error).message)
@@ -121,10 +125,10 @@ export default function FilesPage() {
     setScriptLoading(true)
     try {
       const defaultCode = name.endsWith(".py")
-        ? "#!/usr/bin/env python3\nprint('Hello from SSSS Sovereign Automation!')\n"
+        ? "#!/usr/bin/env python3\nprint('Hello from Total Recall automation!')\n"
         : name.endsWith(".sh")
-          ? "#!/bin/bash\necho 'Hello from SSSS Sovereign Automation!'\n"
-          : "/**\n * SSSS Skills Automation Script\n */\nconsole.log(\"Hello from SSSS Sovereign Automation!\");\n"
+          ? "#!/bin/bash\necho 'Hello from Total Recall automation!'\n"
+          : "/**\n * Total Recall skills automation script\n */\nconsole.log(\"Hello from Total Recall automation!\");\n"
           
       await saveScript(name, defaultCode)
       setNewScriptName("")
@@ -143,7 +147,7 @@ export default function FilesPage() {
       <div className="page-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 20 }}>
         <div>
           <h1>Storage & Automations</h1>
-          <p>Manage sovereign files, runtime skills, and automation scripts</p>
+          <p>Manage local files, runtime skills, and automation scripts</p>
         </div>
         
         {/* Navigation Tabs */}
@@ -176,7 +180,7 @@ export default function FilesPage() {
 
       {activeTab === "files" && (
         <div className="health-log" style={{ background: "rgba(15,23,42,0.45)", backdropFilter: "blur(12px)", border: "1px solid var(--border)", borderRadius: 12, padding: 24 }}>
-          <h2 style={{ fontSize: 16, marginBottom: 12, borderBottom: "1px solid var(--border)", paddingBottom: 8, color: "#fff" }}>Sovereign Files (~/.agent/files/)</h2>
+          <h2 style={{ fontSize: 16, marginBottom: 12, borderBottom: "1px solid var(--border)", paddingBottom: 8, color: "#fff" }}>Local Files (~/.agent/files/)</h2>
           <table style={{ width: "100%", textAlign: "left", borderCollapse: "collapse" }}>
             <thead>
               <tr>

package/frontend/src/pages/GraphPage.tsx

@@ -17,7 +17,7 @@ export default function GraphPage({ activeBrainId }: { activeBrainId?: string })
       try {
         const [nodes, researchRes, threadsRes] = await Promise.all([
           listMemory(activeBrainId),
-          listResearch(activeBrainId).catch(() => ({ items: [] })),
+          listResearch().catch(() => ({ items: [] })),
           fetchChatThreads().catch(() => [])
         ])
         setMemoryNodes(nodes)
@@ -35,8 +35,10 @@ export default function GraphPage({ activeBrainId }: { activeBrainId?: string })
   return (
     <div className="page" style={{ padding: 0, height: 'calc(100vh - 1px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       <div style={{ padding: '16px 24px', background: 'rgba(18, 18, 26, 0.45)', backdropFilter: 'blur(16px)', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
-        <h1 style={{ fontSize: '18px', fontWeight: 700 }}>Sovereign Memory Network</h1>
-        <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px' }}>Interactive 3D constellation layout of your knowledge vault, sessions, and active thoughts.</p>
+        <h1 style={{ fontSize: '18px', fontWeight: 700, letterSpacing: '-0.02em' }}>Memory Graph</h1>
+        <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '2px' }}>
+          3D vault map — facts (blue), rules (cyan/rose), research (amber), sessions (teal).
+        </p>
       </div>
 
       <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>

package/frontend/src/pages/HelpPage.tsx

@@ -84,8 +84,8 @@ export default function HelpPage() {
   return (
     <div className="page" style={{ padding: '24px', maxWidth: '1100px', margin: '0 auto' }}>
       <div className="page-header" style={{ marginBottom: '24px' }}>
-        <h1>Sovereign Help System</h1>
-        <p>Offline interactive documentation, CLI command references, and SSSS VFS specifications.</p>
+        <h1>Help & CLI Reference</h1>
+        <p>Offline docs for portable memory: CLI commands, vault layout, dream, tasks, and IDE connect.</p>
       </div>
 
       {error && <div className="badge badge-error" style={{ marginBottom: '16px' }}>⚠️ {error}</div>}

package/frontend/src/pages/InboxPage.tsx

@@ -0,0 +1,82 @@
+import { useState, useEffect, useCallback } from "react"
+import { fetchDocs, readDoc, updateDoc, postDecision, type VaultDocument } from "../api"
+import { DocumentTable } from "../components/DocumentTable"
+
+export default function InboxPage({ activeBrainId }: { activeBrainId?: string }) {
+  const [items, setItems] = useState<VaultDocument[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState("")
+
+  const loadData = useCallback(async () => {
+    try {
+      setLoading(true)
+      const data = await fetchDocs(activeBrainId, { status: "pending_approval" })
+      setItems(data.docs)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to load the approval inbox")
+    } finally {
+      setLoading(false)
+    }
+  }, [activeBrainId])
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => { void loadData() }, 0)
+    return () => window.clearTimeout(timer)
+  }, [loadData])
+
+  const handleDecision = async (path: string, action: string) => {
+    try {
+      const doc = await readDoc(path, activeBrainId)
+      // Extract proposal ID from path (e.g. proposals/p2.md -> p2)
+      const idMatch = path.match(/proposals\/(.+?)\.md$/)
+      if (idMatch) {
+        const id = idMatch[1]
+        // This hits the proxy, which forwards to droplet and runs sync
+        await postDecision(id, action)
+      } else {
+        // Fallback for non-proposal docs (just optimistic update)
+        const newBody = doc.raw.replace(/status:.*$/m, `status: ${action}`)
+        await updateDoc(path, newBody, activeBrainId)
+      }
+      loadData()
+    } catch (err: unknown) {
+      alert("Decision failed: " + (err instanceof Error ? err.message : "Unknown error"))
+    }
+  }
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto', color: 'white' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+        <h1 style={{ margin: 0, fontSize: '24px' }}>Approval Inbox</h1>
+        <button onClick={loadData} style={{ padding: '8px 16px', background: 'rgba(255,255,255,0.1)', border: 'none', color: 'white', cursor: 'pointer', borderRadius: '4px' }}>Refresh</button>
+      </div>
+
+      {loading && <p>Loading inbox items...</p>}
+      {error && <p style={{ color: 'red' }}>Error: {error}</p>}
+      
+      {!loading && !error && (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '30px' }}>
+          <div>
+            <DocumentTable
+              data={items}
+              emptyMessage="No items pending approval."
+              columns={[
+                { key: 'type', header: 'Type', render: (d) => <span style={{ opacity: 0.6 }}>{d.type}</span> },
+                { key: 'name', header: 'Name', render: (d) => d.name },
+                { key: 'status', header: 'Status', render: (d) => <span style={{ fontSize: '0.8em', background: 'rgba(234,179,8,0.15)', color: '#eab308', padding: '2px 6px', borderRadius: '4px' }}>{d.status || 'pending'}</span> },
+                { key: 'updated', header: 'Last Updated', render: (d) => d.updatedAt ? new Date(d.updatedAt).toLocaleDateString() : '-' },
+                { key: 'actions', header: 'Actions', render: (d) => (
+                    <>
+                      <button onClick={() => handleDecision(d.path, 'approved')} style={{ marginRight: '10px', background: '#22c55e', border: 'none', color: 'white', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer' }}>Approve</button>
+                      <button onClick={() => handleDecision(d.path, 'rejected')} style={{ background: '#e22b22', border: 'none', color: 'white', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer' }}>Reject</button>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/frontend/src/pages/InstructionsPage.tsx

@@ -268,7 +268,7 @@ export default function InstructionsPage() {
   }
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate data fetch on mount
+    // eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks/exhaustive-deps -- legitimate data fetch on mount
     void loadSurfaces()
   }, [])
 

package/frontend/src/pages/IntegrationsPage.tsx

@@ -45,11 +45,11 @@ const PRESETS: Preset[] = [
     snippet: baseUrl => `Read AGENTS.md from the repo root.\nDiscovery: ${baseUrl}/.well-known/total-recall.json`
   },
   {
-    id: 'ultrachat',
-    name: 'UltraChat',
+    id: 'http-api',
+    name: 'HTTP host app',
     surface: 'OpenAI-compatible provider',
     scopes: 'models:read, chat:write, ssss:read',
-    command: 'npx total-recall connect ultrachat --brain <brain-url>',
+    command: 'npx total-recall connect http-api --brain <brain-url>',
     snippet: baseUrl => `Base URL: ${baseUrl}/v1\nModel: total-recall/gemma4\nModels: ${baseUrl}/v1/models`
   },
   {
@@ -104,7 +104,7 @@ export default function IntegrationsPage() {
   const filteredPresets = useMemo(() => {
     if (activeIdes.length === 0) return PRESETS
     return PRESETS.filter(preset => {
-      if (['ultrachat', 'generic'].includes(preset.id)) {
+      if (['http-api', 'generic'].includes(preset.id)) {
         return true
       }
       return activeIdes.includes(preset.id)
@@ -364,13 +364,24 @@ export default function IntegrationsPage() {
           const snippet = preset.snippet(baseUrl)
           
           // Match keys by name (e.g. "Cursor Link", "Claude Code Link", "Codex Link")
+          // Guard: some legacy rows stored a non-string name object
           const matchingKey = keys.find(k => {
-            if (preset.id === 'cursor') return k.name.toLowerCase().includes('cursor') && !k.revoked;
-            if (preset.id === 'claude-code') return k.name.toLowerCase().includes('claude') && !k.revoked;
-            if (preset.id === 'codex') return (k.name.toLowerCase().includes('codex') || k.name.toLowerCase().includes('agents')) && !k.revoked;
-            if (preset.id === 'antigravity') return k.name.toLowerCase().includes('antigravity') && !k.revoked;
-            if (preset.id === 'ultrachat') return k.name.toLowerCase().includes('ultrachat') && !k.revoked;
-            return false;
+            const rawName = k?.name
+            const name =
+              typeof rawName === 'string'
+                ? rawName
+                : rawName && typeof rawName === 'object' && typeof (rawName as { name?: unknown }).name === 'string'
+                  ? String((rawName as { name: string }).name)
+                  : ''
+            if (!name || k.revoked) return false
+            const n = name.toLowerCase()
+            if (preset.id === 'cursor') return n.includes('cursor')
+            if (preset.id === 'claude-code') return n.includes('claude')
+            if (preset.id === 'codex') return n.includes('codex') || n.includes('agents')
+            if (preset.id === 'antigravity') return n.includes('antigravity')
+            if (preset.id === 'grok') return n.includes('grok') || n.includes('xai')
+            if (preset.id === 'http-api') return n.includes('http') || n.includes('host')
+            return false
           })
 
           let statusBadge = (