total-recall-brain 3.13.2 → 3.14.4

package/bin/total-recall.mjs

@@ -62,6 +62,9 @@ const COMMANDS = {
   task:     'task.mjs',
   share:    'share.mjs',
   'generate-pat': 'generate-pat.mjs',
+  key:      'key.mjs',
+  keys:     'key.mjs',
+  pat:      'key.mjs',
   'hash-password': 'hash-password.mjs',
   'reset-password': 'reset-password.mjs',
   compile:  'rebuild.mjs',

package/frontend/src/App.tsx

@@ -15,7 +15,8 @@ import SkillsPage from './pages/SkillsPage'
 import HelpPage from './pages/HelpPage'
 import GraphPage from './pages/GraphPage'
 import OpenWikiPage from './pages/OpenWikiPage'
-import OnboardingPage, { isOnboardingComplete } from './pages/OnboardingPage'
+import OnboardingPage from './pages/OnboardingPage'
+import { isOnboardingComplete } from './utils/onboarding'
 import BrandMark from './components/brand/BrandMark'
 
 // ─── Auth state type ──────────────────────────────────────────────────────────
@@ -122,7 +123,7 @@ 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">
             <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>
-          Secrets
+          Keys & Usage
         </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">
@@ -299,13 +300,13 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
             <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="/skills" element={<SkillsPage />} />
+            <Route path="/tasks" element={<TasksPage activeBrainId={activeBrainId} />} />
+            <Route path="/skills" element={<SkillsPage activeBrainId={activeBrainId} />} />
             <Route path="/openwiki" element={<OpenWikiPage activeBrainId={activeBrainId} />} />
-            <Route path="/integrations" element={<IntegrationsPage />} />
+            <Route path="/integrations" element={<IntegrationsPage activeBrainId={activeBrainId} />} />
             <Route path="/keys" element={<ApiKeysPage />} />
-            <Route path="/settings" element={<SettingsPage />} />
-            <Route path="/help" element={<HelpPage />} />
+            <Route path="/settings" element={<SettingsPage activeBrainId={activeBrainId} />} />
+            <Route path="/help" element={<HelpPage 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 />} />

package/frontend/src/api.ts

@@ -453,6 +453,11 @@ export async function fetchConfigJson(): Promise<ConfigJson> {
   return res.json()
 }
 
+export async function fetchBrains(): Promise<Record<string, unknown>[]> {
+  const res = await apiFetch(`${API_BASE}/api/brains`)
+  return res.json()
+}
+
 export async function saveConfigJson(config: ConfigJson): Promise<void> {
   const res = await apiFetch(`${API_BASE}/api/config-json`, {
     method: 'POST',
@@ -1414,3 +1419,23 @@ export async function postDecision(id: string, action: string, notes?: string):
   }
   return res.json()
 }
+
+export async function toggleSkillRepo(skillName: string, targetRepo: string, enabled: boolean): Promise<{ success: boolean; message: string }> {
+  const res = await apiFetch(`${API_BASE}/api/skills/toggle`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ skillName, targetRepo, enabled })
+  });
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}
+
+export async function auditSkill(skillName: string, repoPath?: string): Promise<{ success: boolean; audit: { outdated: boolean; problematic: boolean; reason: string; proposed_changes: string } }> {
+  const res = await apiFetch(`${API_BASE}/api/skills/audit`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ skillName, repoPath })
+  });
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}

package/frontend/src/components/UsageChart.tsx

@@ -63,7 +63,7 @@ export const UsageChart: React.FC<UsageChartProps> = ({ usageData }) => {
             <Tooltip 
               contentStyle={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12 }}
               itemStyle={{ fontSize: 12 }}
-              formatter={(value: any) => [`$${Number(value).toFixed(4)}`, undefined]}
+              formatter={(value: number | string) => [`$${Number(value).toFixed(4)}`, undefined]}
             />
             <Legend wrapperStyle={{ fontSize: 11 }} />
             <Bar isAnimationActive={false} dataKey="gemini" name="Gemini" stackId="a" fill="#10b981" radius={[0,0,0,0]} />

package/frontend/src/pages/ApiKeysPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, type CSSProperties, type ReactNode } from 'react'
+import { useState, useEffect, useCallback, useMemo, type CSSProperties, type ReactNode } from 'react'
 import {
   listApiKeys,
   issueApiKey,
@@ -32,8 +32,9 @@ import {
 } from '../api'
 import type { ConfigJson, GeminiModelInfo } from '../types'
 import { startRegistration, startAuthentication, browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import UsagePage from './UsagePage'
 
-type Tab = 'catalog' | 'pats' | 'import' | 'cloud'
+type Tab = 'catalog' | 'pats' | 'import' | 'cloud' | 'usage'
 
 /** Form state — string inputs; converted on save */
 type MetaEdit = {
@@ -50,6 +51,46 @@ type MetaEdit = {
   project_path: string
 }
 
+function metaForm(k: SecretCatalogKey): MetaEdit {
+  return {
+    label: k.label || '',
+    provider: k.provider || '',
+    repos: (k.repos || []).join(', '),
+    subscription_tier: k.subscription_tier || '',
+    monthly_cost_usd: k.monthly_cost_usd != null ? String(k.monthly_cost_usd) : '',
+    monthly_cap_usd: k.monthly_cap_usd != null ? String(k.monthly_cap_usd) : '',
+    api_docs_url: k.api_docs_url || '',
+    rotate_every_days: k.rotate_every_days != null ? String(k.rotate_every_days) : '',
+    auto_rotate: !!k.auto_rotate,
+    notes: k.notes || '',
+    project_path: k.project_path || '',
+  }
+}
+
+function groupKeysByProvider(keys: SecretCatalogKey[]) {
+  const groups = new Map<string, { id: string; label: string; kind: 'repo'; keys: SecretCatalogKey[] }>()
+
+  keys.forEach((k) => {
+    const provider = (k.provider || 'unknown').toLowerCase()
+    if (!groups.has(provider)) {
+      groups.set(provider, { id: provider, label: provider.toUpperCase(), kind: 'repo', keys: [] })
+    }
+    groups.get(provider)!.keys.push(k)
+  })
+
+  return [...groups.values()].sort((a, b) => a.id.localeCompare(b.id))
+}
+
+function ProviderLogo({ provider }: { provider?: string }) {
+  if (!provider) return null;
+  const p = provider.toLowerCase();
+  if (p === 'openai') return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0462 6.0462 0 0 0 5.3-3.71 6.0415 6.0415 0 0 0 4.4646-6.4463A5.9847 5.9847 0 0 0 22.282 9.8211Z"/></svg>;
+  if (p === 'anthropic') return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.433 2.115L15.939 12h3.048l1.494-9.885h-3.048zM14.616 2.115l-1.392 9.885h3.048l1.392-9.885h-3.048zM10.371 14.542l-5.637 7.343H7.78l3.966-5.166 2.766 5.166h3.018l-7.159-12.836-5.836 12.836h3.043l1.838-4.043h4.636l-3.681-3.3z"/></svg>;
+  if (p === 'google') return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>;
+  if (p === 'github') return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd"/></svg>;
+  return null;
+}
+
 export default function ApiKeysPage() {
   const [tab, setTab] = useState<Tab>('catalog')
 
@@ -64,6 +105,7 @@ export default function ApiKeysPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [filter, setFilter] = useState('')
+  const [groupBy, setGroupBy] = useState<'repo' | 'api'>('repo')
   const [selected, setSelected] = useState<SecretCatalogKey | null>(null)
   const [edit, setEdit] = useState<MetaEdit>({
     label: '',
@@ -122,9 +164,11 @@ export default function ApiKeysPage() {
       setOpenaiModels(open)
       const or = await fetchOpenRouterModels().catch(() => [])
       setOrModels(or)
-    } catch(e) {}
+    } catch {
+      // ignore fetching models error
+    }
 
-      const data = await fetchSecretsCatalog()
+    const data = await fetchSecretsCatalog()
       setCatalog(data)
       if (selected) {
         const fresh = data.keys.find((k) => k.key === selected.key)
@@ -136,7 +180,7 @@ export default function ApiKeysPage() {
     } finally {
       setLoading(false)
     }
-  }, [selected?.key])
+  }, [selected])
 
   const loadPats = useCallback(async () => {
     try {
@@ -156,10 +200,13 @@ export default function ApiKeysPage() {
   }, [])
 
   useEffect(() => {
+    // eslint-disable-next-line
     void loadCatalog()
+     
     void loadPats()
+     
     void loadWebAuthn()
-  }, [])
+  }, [loadCatalog, loadPats, loadWebAuthn])
 
   
   const updateSecretsProp = (prop: string, value: string) => {
@@ -194,21 +241,7 @@ export default function ApiKeysPage() {
     }
   };
 
-  function metaForm(k: SecretCatalogKey): MetaEdit {
-    return {
-      label: k.label || '',
-      provider: k.provider || '',
-      repos: (k.repos || []).join(', '),
-      subscription_tier: k.subscription_tier || '',
-      monthly_cost_usd: k.monthly_cost_usd != null ? String(k.monthly_cost_usd) : '',
-      monthly_cap_usd: k.monthly_cap_usd != null ? String(k.monthly_cap_usd) : '',
-      api_docs_url: k.api_docs_url || '',
-      rotate_every_days: k.rotate_every_days != null ? String(k.rotate_every_days) : '',
-      auto_rotate: !!k.auto_rotate,
-      notes: k.notes || '',
-      project_path: k.project_path || '',
-    }
-  }
+  // metaForm hoisted
 
   function openKey(k: SecretCatalogKey, sectionId?: string) {
     setSelected(k)
@@ -437,7 +470,18 @@ export default function ApiKeysPage() {
   })
 
   /** Group filtered keys into repo sections (one key → one repo; multi = error; none = developer). */
-  const repoSections = groupKeysByRepo(keys)
+  const repoSections = useMemo<{ id: string; label: string; kind: 'error' | 'developer' | 'repo'; keys: SecretCatalogKey[] }[]>(() => {
+    if (!catalog?.keys) return []
+    const f = filter.toLowerCase()
+    const filtered = catalog.keys.filter(
+      (k) =>
+        k.key.toLowerCase().includes(f) ||
+        (k.provider || '').toLowerCase().includes(f) ||
+        (k.repos || []).some((r) => r.toLowerCase().includes(f)) ||
+        (k.label || '').toLowerCase().includes(f)
+    )
+    return groupBy === 'api' ? groupKeysByProvider(filtered) : groupKeysByRepo(filtered)
+  }, [catalog, filter, groupBy])
 
   // Default accordion: open errors + first product/developer section only
   useEffect(() => {
@@ -448,7 +492,9 @@ export default function ApiKeysPage() {
     }
     const first = repoSections.find((s) => s.kind !== 'error')
     if (first) next.add(first.id)
+    // eslint-disable-next-line
     setExpandedSections(next)
+     
     setSectionsInited(true)
   }, [repoSections, sectionsInited])
 
@@ -707,6 +753,12 @@ export default function ApiKeysPage() {
         ))}
       </div>
 
+{tab === 'usage' && (
+        <div style={{ height: 'calc(100vh - 280px)', minHeight: 420, position: 'relative', overflowY: 'auto' }}>
+          <UsagePage />
+        </div>
+      )}
+
       {tab === 'catalog' && (
         <div
           style={{
@@ -722,13 +774,34 @@ export default function ApiKeysPage() {
           <div
             style={{
               display: 'flex',
-              gap: 8,
-              flexWrap: 'wrap',
+              gap: 12,
               alignItems: 'center',
-              marginBottom: 8,
-              flexShrink: 0,
+              marginBottom: 16,
+              flexWrap: 'wrap',
             }}
           >
+            <div style={{ display: 'flex', background: 'var(--bg-tertiary)', borderRadius: 6, padding: 2 }}>
+              <button
+                onClick={() => setGroupBy('repo')}
+                style={{
+                  padding: '4px 10px', fontSize: 11, fontWeight: 500, borderRadius: 4, cursor: 'pointer', border: 'none',
+                  background: groupBy === 'repo' ? 'var(--bg-active)' : 'transparent',
+                  color: groupBy === 'repo' ? 'var(--text-primary)' : 'var(--text-secondary)'
+                }}
+              >
+                By Repo
+              </button>
+              <button
+                onClick={() => setGroupBy('api')}
+                style={{
+                  padding: '4px 10px', fontSize: 11, fontWeight: 500, borderRadius: 4, cursor: 'pointer', border: 'none',
+                  background: groupBy === 'api' ? 'var(--bg-active)' : 'transparent',
+                  color: groupBy === 'api' ? 'var(--text-primary)' : 'var(--text-secondary)'
+                }}
+              >
+                By API
+              </button>
+            </div>
             <input
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
@@ -741,9 +814,21 @@ export default function ApiKeysPage() {
                 border: '1px solid var(--border)',
                 background: 'var(--bg-primary)',
                 color: 'var(--text-primary)',
-                fontSize: 13,
+                outline: 'none',
               }}
             />
+          </div>
+
+          <div
+            style={{
+              display: 'flex',
+              gap: 8,
+              flexWrap: 'wrap',
+              alignItems: 'center',
+              marginBottom: 8,
+              flexShrink: 0,
+            }}
+          >
             <button
               type="button"
               className="btn btn-ghost btn-sm"
@@ -801,6 +886,7 @@ export default function ApiKeysPage() {
                     title={open ? 'Currently expanded' : 'Expand this repo only'}
                   >
                     {open ? '▾ ' : '▸ '}
+                    {groupBy === 'api' && <ProviderLogo provider={sec.id} />}
                     {sec.label}
                     <span style={{ marginLeft: 6, opacity: 0.7 }}>{sec.keys.length}</span>
                   </button>
@@ -873,7 +959,7 @@ export default function ApiKeysPage() {
                             color: sec.kind === 'error' ? '#f87171' : 'var(--text-primary)',
                           }}
                         >
-                          {open ? '▾' : '▸'} {sec.label}
+                          {open ? '▾' : '▸'} {groupBy === 'api' && <ProviderLogo provider={sec.id} />} {sec.label}
                         </div>
                         <div style={{ fontSize: 10, color: 'var(--text-tertiary)', marginTop: 2 }}>
                           {sec.kind === 'error'
@@ -1367,7 +1453,6 @@ export default function ApiKeysPage() {
           ))}
         </div>
       )}
-
       {tab === 'cloud' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
           <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
@@ -1380,7 +1465,7 @@ export default function ApiKeysPage() {
               ✓ {configSuccess}
             </div>
           )}
-            <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 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>
@@ -1673,24 +1758,15 @@ export default function ApiKeysPage() {
                 )}
               </div>
               
-              
-              {/* Search & Tool APIs */}
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.05)', marginTop: 16 }}>
-                <h4 style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 8 }}>Search & External Tools</h4>
-                {['tavily_api_key', 'brave_api_key', 'exa_api_key', 'serper_api_key', 'github_token'].map(key => (
-                  <div key={key} style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
-                    <label style={{ fontSize: 12, fontWeight: 500 }}>{key.replace(/_/g, ' ').replace('api', 'API').replace('key', 'Key').replace('token', 'Token').replace(/\\b\\w/g, c => c.toUpperCase())}</label>
-                    <input type="password" placeholder="Enter token..." value={(configData?.secrets as any)?.[key] || ''} onChange={(e) => updateSecretsProp(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>
-                ))}
-              </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>
         </div>
       )}
 
+
+
       <p style={{ marginTop: 24, fontSize: 11, color: 'var(--text-tertiary)' }}>
         CLI: <code>secret catalog</code> · <code>secret meta KEY --repo app --tier pro --monthly-cost 25 --rotate-days 90</code> ·{' '}
         <code>secret rotation-due</code> · <code>secret usage</code> · <code>secret providers</code>

package/frontend/src/pages/ChatPage.tsx

@@ -210,7 +210,7 @@ export default function ChatPage({ activeBrainId, onBrainChange }: { activeBrain
         ) {
           loadMemoryNodes()
         }
-      } catch (e) {
+      } catch {
         // ignore parsing errors from stream
       }
     }

package/frontend/src/pages/DesignDocsPage.tsx

@@ -27,17 +27,6 @@ interface KanbanColumn {
 
 // ─── Static Data ────────────────────────────────────────────────────────────────
 
-const CORE_DOCS: DocItem[] = [
-  { name: 'ARCHITECTURE.md', path: 'docs/ARCHITECTURE.md', icon: '🏗️', category: 'Core Docs' },
-  { name: 'SSSS.md', path: 'docs/SSSS.md', icon: '🔐', category: 'Core Docs' },
-  { name: 'IDE_INTEGRATION.md', path: 'docs/IDE_INTEGRATION.md', icon: '🔌', category: 'Core Docs' },
-  { name: 'CHANGELOG.md', path: 'docs/CHANGELOG.md', icon: '📋', category: 'Core Docs' },
-];
-
-const DEV_GUIDES: DocItem[] = [
-  { name: 'README.md', path: 'README.md', icon: '📖', category: 'Developer Guides' },
-];
-
 const KANBAN_COLUMNS: KanbanColumn[] = [
   {
     id: 'in-progress',
@@ -173,11 +162,11 @@ export default function DesignDocsPage() {
   const [activeTab, setActiveTab] = useState<'architecture' | 'board'>('architecture');
 
   // Architecture docs state
-  const [selectedDoc, setSelectedDoc] = useState<DocItem>(CORE_DOCS[0]);
+  const [selectedDoc, setSelectedDoc] = useState<DocItem | null>(null);
   const [docContent, setDocContent] = useState<string>('');
   const [docLoading, setDocLoading] = useState(false);
   const [docError, setDocError] = useState<string | null>(null);
-  const [, setDocsFromApi] = useState<Array<{ name: string; path: string; size: number; modified: string; category: string }>>([]);
+  const [docsFromApi, setDocsFromApi] = useState<DocItem[]>([]);
 
   // Kanban state
   const [expandedColumns, setExpandedColumns] = useState<Record<string, boolean>>({});
@@ -187,9 +176,18 @@ export default function DesignDocsPage() {
     async function loadDocsList() {
       try {
         const data = await fetchDesignDocs();
-        setDocsFromApi(data);
+        const docItems: DocItem[] = data.map(d => ({
+          name: d.name,
+          path: d.path,
+          category: d.category || 'Other',
+          icon: '📄',
+        }));
+        setDocsFromApi(docItems);
+        if (docItems.length > 0) {
+          setSelectedDoc(docItems[0]);
+        }
       } catch {
-        // Silently fall back to static doc list
+        // Silently fall back
       }
     }
     loadDocsList();
@@ -204,11 +202,11 @@ export default function DesignDocsPage() {
       setDocLoading(true);
       setDocError(null);
       try {
-        const data = await fetchDesignDocContent(selectedDoc.path);
+        const data = await fetchDesignDocContent(selectedDoc!.path);
         if (!cancelled) setDocContent(data.content);
       } catch {
         if (!cancelled) {
-          setDocError(selectedDoc.path);
+          setDocError(selectedDoc!.path);
           setDocContent('');
         }
       } finally {
@@ -241,7 +239,7 @@ export default function DesignDocsPage() {
         {title}
       </div>
       {items.map(item => {
-        const isActive = selectedDoc.path === item.path;
+        const isActive = selectedDoc?.path === item.path;
         return (
           <button
             id={`doc-nav-${item.name.replace(/\./g, '-').toLowerCase()}`}
@@ -294,8 +292,17 @@ export default function DesignDocsPage() {
           overflowY: 'auto',
         }}
       >
-        {renderSidebarSection('Core Docs', CORE_DOCS)}
-        {renderSidebarSection('Developer Guides', DEV_GUIDES)}
+        {Object.entries(
+          docsFromApi.reduce((acc, doc) => {
+            acc[doc.category] = acc[doc.category] || [];
+            acc[doc.category].push(doc);
+            return acc;
+          }, {} as Record<string, DocItem[]>)
+        ).map(([category, items]) => (
+          <React.Fragment key={category}>
+            {renderSidebarSection(category, items)}
+          </React.Fragment>
+        ))}
       </div>
 
       {/* Main Viewer */}
@@ -328,7 +335,7 @@ export default function DesignDocsPage() {
           <span style={{ color: 'var(--text-tertiary)' }}>›</span>
           <span>docs</span>
           <span style={{ color: 'var(--text-tertiary)' }}>›</span>
-          <span style={{ color: 'var(--accent)' }}>{selectedDoc.name}</span>
+          <span style={{ color: 'var(--accent)' }}>{selectedDoc?.name}</span>
         </div>
 
         {/* Content */}

package/frontend/src/pages/FilesPage.tsx

@@ -134,7 +134,12 @@ export default function FilesPage() {
       setNewScriptName("")
       setIsCreatingScript(false)
       await fetchScriptsList()
-      await handleSelectScript(name)
+      
+      // Yield to the event loop to ensure React state (scripts list) 
+      // is fully committed to the DOM before selecting it.
+      setTimeout(() => {
+        handleSelectScript(name).catch(console.error)
+      }, 0)
     } catch (e) {
       setError(`Failed to create script: ${(e as Error).message}`)
     } finally {

package/frontend/src/pages/GraphPage.tsx

@@ -16,7 +16,7 @@ export default function GraphPage({ activeBrainId }: { activeBrainId?: string })
       setLoading(true)
       try {
         const [nodes, researchRes, threadsRes] = await Promise.all([
-          listMemory(activeBrainId),
+          listMemory(activeBrainId).catch(() => []),
           listResearch().catch(() => ({ items: [] })),
           fetchChatThreads().catch(() => [])
         ])
@@ -44,6 +44,10 @@ export default function GraphPage({ activeBrainId }: { activeBrainId?: string })
       <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
         {loading ? (
           <div className="skeleton" style={{ width: '100%', height: '100%' }} />
+        ) : memoryNodes.length === 0 && researchItems.length === 0 && threads.length === 0 ? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-secondary)' }}>
+            No nodes found for graph
+          </div>
         ) : (
           <Graph3D
             threads={threads}

package/frontend/src/pages/HealthPage.tsx

@@ -186,7 +186,7 @@ export default function HealthPage() {
       <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <div>
           <h1>System Health</h1>
-          <p>Live monitoring of your sovereign brain {lastPoll && <span>· Last poll: {lastPoll.toLocaleTimeString()}</span>}</p>
+          <p>Live monitoring of your memory brain {lastPoll && <span>· Last poll: {lastPoll.toLocaleTimeString()}</span>}</p>
         </div>
         {updateInfo?.updateAvailable ? (
           <div className="badge badge-success" style={{

package/frontend/src/pages/InboxPage.tsx

@@ -25,6 +25,7 @@ export default function InboxPage({ activeBrainId }: { activeBrainId?: string })
   }, [loadData])
 
   const handleDecision = async (path: string, action: string) => {
+    setError("")
     try {
       const doc = await readDoc(path, activeBrainId)
       // Extract proposal ID from path (e.g. proposals/p2.md -> p2)
@@ -40,7 +41,7 @@ export default function InboxPage({ activeBrainId }: { activeBrainId?: string })
       }
       loadData()
     } catch (err: unknown) {
-      alert("Decision failed: " + (err instanceof Error ? err.message : "Unknown error"))
+      setError("Decision failed: " + (err instanceof Error ? err.message : "Unknown error"))
     }
   }
 

package/frontend/src/pages/InstructionsPage.tsx

@@ -194,7 +194,29 @@ export default function InstructionsPage() {
 
   // ─── Data Loading ─────────────────────────────────────────────────────────────
 
-  const loadSurfaces = async () => {
+  const applyFallback = useCallback(() => {
+    setSurfaces(FALLBACK_SURFACES)
+    setIsFallback(true)
+    setLastCompiled('')
+    setTotalNodes(0)
+    const first = FALLBACK_SURFACES[0]
+    setSelected(first)
+    setContent('Content unavailable — recompile to regenerate')
+  }, [])
+
+  const loadContent = useCallback(async (name: string) => {
+    setContentLoading(true)
+    try {
+      const data = await fetchInstructionContent(name)
+      setContent(data.content || 'Empty surface — no compiled content yet.')
+    } catch {
+      setContent('Content unavailable — recompile to regenerate')
+    } finally {
+      setContentLoading(false)
+    }
+  }, [])
+
+  const loadSurfaces = useCallback(async () => {
     setLoading(true)
     setError(null)
     try {
@@ -220,29 +242,7 @@ export default function InstructionsPage() {
     } finally {
       setLoading(false)
     }
-  }
-
-  const applyFallback = () => {
-    setSurfaces(FALLBACK_SURFACES)
-    setIsFallback(true)
-    setLastCompiled('')
-    setTotalNodes(0)
-    const first = FALLBACK_SURFACES[0]
-    setSelected(first)
-    setContent('Content unavailable — recompile to regenerate')
-  }
-
-  const loadContent = async (name: string) => {
-    setContentLoading(true)
-    try {
-      const data = await fetchInstructionContent(name)
-      setContent(data.content || 'Empty surface — no compiled content yet.')
-    } catch {
-      setContent('Content unavailable — recompile to regenerate')
-    } finally {
-      setContentLoading(false)
-    }
-  }
+  }, [applyFallback, loadContent])
 
   const handleSelect = (surface: Surface) => {
     setSelected(surface)
@@ -268,9 +268,9 @@ export default function InstructionsPage() {
   }
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect, react-hooks/exhaustive-deps -- legitimate data fetch on mount
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate data fetch on mount
     void loadSurfaces()
-  }, [])
+  }, [loadSurfaces])
 
   // ─── Derived Stats ───────────────────────────────────────────────────────────