total-recall-brain 3.12.2 → 3.13.1

package/frontend/package.json

@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@simplewebauthn/browser": "^13.3.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-router-dom": "^7.15.0"
+    "react-router-dom": "^7.15.0",
+    "recharts": "^3.9.2"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

package/frontend/src/App.tsx

@@ -1,26 +1,22 @@
 import { useState, useEffect } from 'react'
-import { BrowserRouter, Routes, Route, NavLink, useLocation } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, NavLink, Navigate, useLocation } from 'react-router-dom'
 import './App.css'
 import { getApiBase, setApiBase, checkSession, logout, registerUnauthedCallback, fetchHealth } from './api'
 import type { HealthData } from './types'
 import LoginPage from './pages/LoginPage'
 import ChatPage from './pages/ChatPage'
 import MemoryPage from './pages/MemoryPage'
-import HealthPage from './pages/HealthPage'
-import SandboxPage from './pages/SandboxPage'
 import SettingsPage from './pages/SettingsPage'
 import TasksPage from './pages/TasksPage'
-import FilesPage from './pages/FilesPage'
 import ApiKeysPage from './pages/ApiKeysPage'
 import IntegrationsPage from './pages/IntegrationsPage'
 import BrainSelector from './components/BrainSelector'
-import AutomationsPage from './pages/AutomationsPage'
-import ModelsPage from './pages/ModelsPage'
 import SkillsPage from './pages/SkillsPage'
-import UsagePage from './pages/UsagePage'
-import CollabPage from './pages/CollabPage'
 import HelpPage from './pages/HelpPage'
 import GraphPage from './pages/GraphPage'
+import OpenWikiPage from './pages/OpenWikiPage'
+import OnboardingPage, { isOnboardingComplete } from './pages/OnboardingPage'
+import BrandMark from './components/brand/BrandMark'
 
 // ─── Auth state type ──────────────────────────────────────────────────────────
 type AuthState = 'loading' | 'authed' | 'unauthed'
@@ -58,10 +54,21 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
   return (
     <aside className="sidebar">
       <div className="sidebar-brand">
-        <h1>Total Recall</h1>
-        <span>Sovereign Brain v3.0</span>
+        <div className="sidebar-brand-lockup" title="Total Recall">
+          <BrandMark variant="lockup" height={48} alt="Total Recall" />
+        </div>
+        <span style={{ paddingLeft: 2 }}>Portable memory · any IDE</span>
       </div>
       <nav className="sidebar-nav">
+        <div className="nav-section-label">Memory</div>
+        {!isOnboardingComplete() && (
+          <NavLink to="/onboarding" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-onboarding">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" />
+            </svg>
+            Setup
+          </NavLink>
+        )}
         <NavLink to="/" end className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-chat">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
@@ -72,51 +79,50 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" />
           </svg>
-          Memory
-        </NavLink>
-        <NavLink to="/tasks" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-tasks">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
-          </svg>
-          Tasks
+          Vault
         </NavLink>
-        <NavLink to="/automations" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-automations">
+        <NavLink to="/graph" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-graph">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="10" />
-            <polyline points="12 6 12 12 16 14" />
+            <circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="18" r="2" />
+            <path d="M7 7l4 9M17 7l-4 9" />
           </svg>
-          Automations
+          Graph
         </NavLink>
-        <NavLink to="/files" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-files">
+        <NavLink to="/tasks" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-tasks">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
           </svg>
-          Files
+          Tasks
         </NavLink>
-        <NavLink to="/sandbox" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-sandbox">
+
+        <div className="nav-section-label">Connect</div>
+        <NavLink to="/integrations" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-integrations">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
+            <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
+            <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
           </svg>
-          Sandbox
+          IDEs
         </NavLink>
-        <NavLink to="/models" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-models">
+        <NavLink to="/skills" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-skills">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <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>
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
-          Models & Agents
+          Skills
         </NavLink>
-        <NavLink to="/health" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-health">
+        <NavLink to="/openwiki" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-openwiki">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+            <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z" />
+            <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z" />
           </svg>
-          Health
+          OpenWiki
         </NavLink>
-        <NavLink to="/usage" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-usage">
+
+        <div className="nav-section-label">Account</div>
+        <NavLink to="/keys" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-keys">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <line x1="12" y1="1" x2="12" y2="23"></line>
-            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
+            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
           </svg>
-          Usage & Costs
+          Secrets
         </NavLink>
         <NavLink to="/settings" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-settings">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -124,74 +130,45 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           </svg>
           Settings
         </NavLink>
-        <NavLink to="/keys" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-keys">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
-          </svg>
-          API Keys
-        </NavLink>
-        <NavLink to="/integrations" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-integrations">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
-            <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
-          </svg>
-          Integrations
-        </NavLink>
-        <NavLink to="/skills" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-skills">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
-          </svg>
-          Skills Manager
-        </NavLink>
-        <NavLink to="/collab" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-collab">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
-            <circle cx="9" cy="7" r="4" />
-            <path d="M23 21v-2a4 4 0 00-3-3.87" />
-            <path d="M16 3.13a4 4 0 010 7.75" />
-          </svg>
-          Collaboration
-        </NavLink>
         <NavLink to="/help" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-help">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="10" />
             <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
             <line x1="12" y1="17" x2="12.01" y2="17" />
           </svg>
-          Documentation
-        </NavLink>
-        <NavLink to="/graph" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-graph">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <polygon points="12 2 2 22 22 22" />
-          </svg>
-          Sovereign Graph
+          Help
         </NavLink>
+        {isOnboardingComplete() && (
+          <NavLink to="/onboarding" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-onboarding-replay" style={{ opacity: 0.75 }}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" />
+            </svg>
+            Setup guide
+          </NavLink>
+        )}
       </nav>
-      <div className="sidebar-footer">
-        <div style={{ marginBottom: 8 }}>
-          <BrainSelector activeBrainId={activeBrainId} onBrainChange={onBrainChange} />
-        </div>
-        <div style={{ marginBottom: 12 }}>
-          <select
-            value={getApiBase()}
-            onChange={e => setApiBase(e.target.value)}
-            style={{
-              width: '100%',
-              background: 'var(--bg-secondary)',
-              color: 'var(--text-secondary)',
-              border: '1px solid var(--border)',
-              borderRadius: 6,
-              padding: '4px 8px',
-              fontSize: 12,
-              outline: 'none'
-            }}
-          >
-            <option value="">Localhost (Proxy)</option>
-            {import.meta.env.VITE_BRAIN_URL && (
-              <option value={import.meta.env.VITE_BRAIN_URL}>{new URL(import.meta.env.VITE_BRAIN_URL).host}</option>
-            )}
-          </select>
-        </div>
+      <div className="sidebar-footer" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <BrainSelector activeBrainId={activeBrainId} onBrainChange={onBrainChange} />
+        <select
+          value={getApiBase()}
+          onChange={e => setApiBase(e.target.value)}
+          title="API host"
+          style={{
+            width: '100%',
+            background: 'rgba(148, 163, 184, 0.06)',
+            color: 'var(--text-tertiary)',
+            border: '1px solid var(--border)',
+            borderRadius: 8,
+            padding: '5px 8px',
+            fontSize: 10,
+            outline: 'none',
+          }}
+        >
+          <option value="">Local API</option>
+          {import.meta.env.VITE_BRAIN_URL && (
+            <option value={import.meta.env.VITE_BRAIN_URL}>{new URL(import.meta.env.VITE_BRAIN_URL).host}</option>
+          )}
+        </select>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 4, fontSize: 11 }}>
             {(() => {
@@ -254,9 +231,19 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
 
 // ─── Main content (routes) ────────────────────────────────────────────────────
 
+function OnboardingRedirect() {
+  const location = useLocation()
+  // First visit: force guided onboarding until complete (local flag or vault profile)
+  if (!isOnboardingComplete() && location.pathname !== '/onboarding') {
+    return <Navigate to="/onboarding" replace />
+  }
+
+  return null
+}
+
 function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string; onBrainChange: (id: string) => void }) {
   const location = useLocation();
-  const isChat = location.pathname === '/';
+  const isChat = location.pathname === '/' || location.pathname === '/chat';
   const [floatingChat, setFloatingChat] = useState(false);
 
   useEffect(() => {
@@ -291,10 +278,14 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
 
   return (
     <main className="main-content" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', position: 'relative' }}>
+      <OnboardingRedirect />
       <div style={chatStyle}>
         {floatingChat && (
           <div style={{ padding: '8px', background: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <span style={{ fontSize: 12, fontWeight: 600 }}>Total Recall Agent</span>
+            <span style={{ fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8 }}>
+              <img src="/brand/total-recall-icon.svg" alt="" width={18} height={18} style={{ borderRadius: 4 }} />
+              Total Recall
+            </span>
             <button onClick={() => setFloatingChat(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)' }}>✖</button>
           </div>
         )}
@@ -303,22 +294,32 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
       {(!isChat || floatingChat) && (
         <div style={{ flex: 1, overflow: 'auto' }}>
           <Routes>
-            <Route path="/" element={<div/>} />
+            <Route path="/" element={<Navigate to={isOnboardingComplete() ? '/openwiki' : '/onboarding'} replace />} />
+            <Route path="/chat" element={<ChatPage activeBrainId={activeBrainId} />} />
+            <Route path="/onboarding" element={<OnboardingPage />} />
             <Route path="/memory" element={<MemoryPage activeBrainId={activeBrainId} />} />
+            <Route path="/graph" element={<GraphPage activeBrainId={activeBrainId} />} />
             <Route path="/tasks" element={<TasksPage />} />
-            <Route path="/automations" element={<AutomationsPage />} />
-            <Route path="/files" element={<FilesPage />} />
-            <Route path="/sandbox" element={<SandboxPage />} />
-            <Route path="/models" element={<ModelsPage />} />
-            <Route path="/health" element={<HealthPage />} />
-            <Route path="/usage" element={<UsagePage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="/keys" element={<ApiKeysPage />} />
-            <Route path="/integrations" element={<IntegrationsPage />} />
             <Route path="/skills" element={<SkillsPage />} />
-            <Route path="/collab" element={<CollabPage />} />
+            <Route path="/openwiki" element={<OpenWikiPage activeBrainId={activeBrainId} />} />
+            <Route path="/integrations" element={<IntegrationsPage />} />
+            <Route path="/keys" element={<ApiKeysPage />} />
+            <Route path="/settings" element={<SettingsPage />} />
             <Route path="/help" element={<HelpPage />} />
-            <Route path="/graph" element={<GraphPage activeBrainId={activeBrainId} />} />
+            {/* Legacy OS-control-plane routes → core product */}
+            <Route path="/vault" element={<Navigate to="/memory" replace />} />
+            <Route path="/inbox" element={<Navigate to="/tasks" replace />} />
+            <Route path="/automations" element={<Navigate to="/tasks" replace />} />
+            <Route path="/files" element={<Navigate to="/memory" replace />} />
+            <Route path="/sandbox" element={<Navigate to="/memory" replace />} />
+            <Route path="/models" element={<Navigate to="/settings" replace />} />
+            <Route path="/health" element={<Navigate to="/settings" replace />} />
+            <Route path="/usage" element={<Navigate to="/settings" replace />} />
+            <Route path="/collab" element={<Navigate to="/memory" replace />} />
+            <Route path="/instructions" element={<Navigate to="/memory" replace />} />
+            <Route path="/design" element={<Navigate to="/memory" replace />} />
+            <Route path="/okf" element={<Navigate to="/memory" replace />} />
+            <Route path="*" element={<Navigate to="/memory" replace />} />
           </Routes>
         </div>
       )}