total-recall-brain 3.12.2 → 3.13.0

package/frontend/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "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

@@ -21,6 +21,10 @@ import UsagePage from './pages/UsagePage'
 import CollabPage from './pages/CollabPage'
 import HelpPage from './pages/HelpPage'
 import GraphPage from './pages/GraphPage'
+import InstructionsPage from './pages/InstructionsPage'
+import DesignDocsPage from './pages/DesignDocsPage'
+import OkfPage from './pages/OkfPage'
+import OpenWikiPage from './pages/OpenWikiPage'
 
 // ─── Auth state type ──────────────────────────────────────────────────────────
 type AuthState = 'loading' | 'authed' | 'unauthed'
@@ -152,6 +156,42 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           </svg>
           Collaboration
         </NavLink>
+        <NavLink to="/instructions" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-instructions">
+          <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="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+            <polyline points="10 9 9 9 8 9" />
+          </svg>
+          Instructions
+        </NavLink>
+        <NavLink to="/design" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-design">
+          <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="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <line x1="3" y1="9" x2="21" y2="9" />
+            <line x1="9" y1="21" x2="9" y2="9" />
+          </svg>
+          Design Docs
+        </NavLink>
+        <NavLink to="/okf" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-okf">
+          <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 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
+            <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
+            <polyline points="7.5 19.79 7.5 14.6 3 12" />
+            <polyline points="21 12 16.5 14.6 16.5 19.79" />
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+            <line x1="12" y1="22.08" x2="12" y2="12" />
+          </svg>
+          OKF Manager
+        </NavLink>
+        <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="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>
+          OpenWiki
+        </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" />
@@ -317,6 +357,10 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
             <Route path="/integrations" element={<IntegrationsPage />} />
             <Route path="/skills" element={<SkillsPage />} />
             <Route path="/collab" element={<CollabPage />} />
+            <Route path="/instructions" element={<InstructionsPage />} />
+            <Route path="/design" element={<DesignDocsPage />} />
+            <Route path="/okf" element={<OkfPage />} />
+            <Route path="/openwiki" element={<OpenWikiPage />} />
             <Route path="/help" element={<HelpPage />} />
             <Route path="/graph" element={<GraphPage activeBrainId={activeBrainId} />} />
           </Routes>

package/frontend/src/api.ts

@@ -667,12 +667,33 @@ export interface GeminiModelInfo {
 }
 
 export async function fetchGeminiModels(): Promise<GeminiModelInfo[]> {
-  const res = await apiFetch(`${API_BASE}/api/gemini-models`)
+  const res = await apiFetch(`${API_BASE}/api/gemini-models?t=${Date.now()}`)
   if (!res.ok) throw new Error(`Gemini models API error: ${res.status}`)
   const data = await res.json()
   return data.models ?? []
 }
 
+export async function fetchClaudeModels(): Promise<GeminiModelInfo[]> {
+  const res = await apiFetch(`${API_BASE}/api/claude-models?t=${Date.now()}`)
+  if (!res.ok) throw new Error(`Claude models API error: ${res.status}`)
+  const data = await res.json()
+  return data.models ?? []
+}
+
+export async function fetchOpenaiModels(): Promise<GeminiModelInfo[]> {
+  const res = await apiFetch(`${API_BASE}/api/openai-models?t=${Date.now()}`)
+  if (!res.ok) throw new Error(`OpenAI models API error: ${res.status}`)
+  const data = await res.json()
+  return data.models ?? []
+}
+
+export async function fetchOpenRouterModels(): Promise<GeminiModelInfo[]> {
+  const res = await apiFetch(`${API_BASE}/api/openrouter-models?t=${Date.now()}`)
+  if (!res.ok) throw new Error(`OpenRouter models API error: ${res.status}`)
+  const data = await res.json()
+  return data.models ?? []
+}
+
 // ─── Share API ──────────────────────────────────────────────────────────────────
 
 export async function shareToApi(payload: { url: string; action: string; title?: string; tags?: string[] }): Promise<{ success: boolean; message?: string }> {
@@ -732,3 +753,82 @@ export async function fetchHelpContent(topicId: string): Promise<{ topic: string
   if (!res.ok) throw new Error('Failed to load help content')
   return res.json()
 }
+
+// ─── Instructions APIs ─────────────────────────────────────────────────────────
+
+export async function fetchInstructions(): Promise<{ surfaces: Array<{ name: string; filename: string; size: number; lastCompiled: string; active: boolean }>; lastCompileTimestamp: string; totalNodes: number }> {
+  const res = await apiFetch(`${API_BASE}/api/instructions`)
+  if (!res.ok) throw new Error(`Instructions API error: ${res.status}`)
+  return res.json()
+}
+
+export async function fetchInstructionContent(name: string): Promise<{ name: string; content: string }> {
+  const res = await apiFetch(`${API_BASE}/api/ssss/instructions?surface=${encodeURIComponent(name)}`)
+  if (!res.ok) throw new Error(`Instruction content error: ${res.status}`)
+  return res.json()
+}
+
+// ─── OKF APIs ──────────────────────────────────────────────────────────────────
+
+export async function runOkfLint(): Promise<{ results: Array<{ slug: string; field: string; severity: string; message: string }>; summary: { total: number; errors: number; warnings: number } }> {
+  const res = await apiFetch(`${API_BASE}/api/sandbox`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ code: 'const { execSync } = require("child_process"); console.log(JSON.stringify({ output: execSync("npx total-recall lint --okf 2>&1 || true", { encoding: "utf-8" }) }));', timeout: 30000 }),
+  })
+  if (!res.ok) throw new Error(`OKF lint error: ${res.status}`)
+  return res.json()
+}
+
+export async function triggerOkfExport(path: string, options: { stripSsss?: boolean; format?: string; scope?: string }): Promise<{ success: boolean; message: string; path?: string }> {
+  const args = [`export ${path} --okf`]
+  if (options.stripSsss) args.push('--strip-ssss')
+  if (options.format) args.push(`--format ${options.format}`)
+  if (options.scope === 'global') args.push('--global')
+  if (options.scope === 'project') args.push('--project')
+
+  const res = await apiFetch(`${API_BASE}/api/sandbox`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ code: `const { execSync } = require("child_process"); try { const out = execSync("npx total-recall ${args.join(' ')} 2>&1", { encoding: "utf-8" }); console.log(JSON.stringify({ success: true, message: out })); } catch(e) { console.log(JSON.stringify({ success: false, message: e.stdout || e.message })); }`, timeout: 60000 }),
+  })
+  if (!res.ok) throw new Error(`OKF export error: ${res.status}`)
+  return res.json()
+}
+
+// ─── OpenWiki APIs ─────────────────────────────────────────────────────────────
+
+export async function fetchOpenWikiNodes(): Promise<import('./types').MemoryNode[]> {
+  const res = await apiFetch(`${API_BASE}/api/memory?tags=openwiki`)
+  if (!res.ok) throw new Error(`OpenWiki nodes error: ${res.status}`)
+  const data = await res.json()
+  return Array.isArray(data) ? data : (data.nodes ?? [])
+}
+
+// UCW export/import/validate handled via runSandbox + @ssss/cli (SSSS §16)
+
+export async function fetchVaultStatus(): Promise<{ totalNodes: number; categories: Record<string, number>; embeddings: number; lastCompiled: string }> {
+  const res = await apiFetch(`${API_BASE}/api/vault/status`)
+  if (!res.ok) throw new Error(`Vault status error: ${res.status}`)
+  return res.json()
+}
+
+export async function fetchMemoryStats(): Promise<{ total: number; byCategory: Record<string, number>; byPriority: Record<string, number>; byStatus: Record<string, number> }> {
+  const res = await apiFetch(`${API_BASE}/api/memory/stats`)
+  if (!res.ok) throw new Error(`Memory stats error: ${res.status}`)
+  return res.json()
+}
+
+// ─── Design Docs APIs ──────────────────────────────────────────────────────────
+
+export async function fetchDesignDocs(): Promise<Array<{ name: string; path: string; size: number; modified: string; category: string }>> {
+  const res = await apiFetch(`${API_BASE}/api/files?path=docs`)
+  if (!res.ok) throw new Error(`Design docs error: ${res.status}`)
+  return res.json()
+}
+
+export async function fetchDesignDocContent(path: string): Promise<{ content: string }> {
+  const res = await apiFetch(`${API_BASE}/api/files?path=${encodeURIComponent(path)}&content=true`)
+  if (!res.ok) throw new Error(`Design doc content error: ${res.status}`)
+  return res.json()
+}

package/frontend/src/components/UsageChart.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, CartesianGrid } from 'recharts';
+import type { UsageData } from '../types';
+
+interface UsageChartProps {
+  usageData: UsageData | null;
+  geminiModels: any[];
+  claudeModels: any[];
+  openaiModels: any[];
+}
+
+export const UsageChart: React.FC<UsageChartProps> = ({ usageData }) => {
+  if (!usageData || !usageData.timeseries) return null;
+
+  // Transform timeseries into chart data
+  const data = Object.keys(usageData.timeseries).sort().map(dateStr => {
+    const dayData = usageData.timeseries![dateStr];
+    
+    let totalUsd = 0;
+    const providersCost: Record<string, number> = { gemini: 0, claude: 0, codex: 0, openrouter: 0 };
+    
+    Object.keys(dayData).forEach(model => {
+      const { cost, provider } = dayData[model];
+      
+      // Safety fallback to ensure numbers
+      const finalCost = typeof cost === 'number' && !isNaN(cost) ? cost : 0;
+
+      totalUsd += finalCost;
+      if (providersCost[provider] !== undefined) {
+        providersCost[provider] += finalCost;
+      } else if (provider) {
+        providersCost[provider] = finalCost;
+      }
+    });
+
+    return {
+      date: dateStr.split('-').slice(1).join('/'), // MM/DD
+      gemini: parseFloat(providersCost.gemini.toFixed(4)),
+      claude: parseFloat(providersCost.claude.toFixed(4)),
+      codex: parseFloat(providersCost.codex.toFixed(4)),
+      openrouter: parseFloat((providersCost.openrouter || 0).toFixed(4)),
+      total: parseFloat(totalUsd.toFixed(4))
+    };
+  });
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', paddingBottom: 12 }}>
+        <span style={{ fontSize: 20 }}>📊</span>
+        <div>
+          <h3 style={{ fontSize: 14, fontWeight: 600 }}>API Costs Over Time</h3>
+          <p style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Historical cost breakdown by provider (USD)</p>
+        </div>
+      </div>
+      <div style={{ width: '100%', height: 250, marginTop: 10 }}>
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={data} margin={{ top: 5, right: 20, left: -20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
+            <XAxis dataKey="date" stroke="var(--text-tertiary)" fontSize={11} tickLine={false} axisLine={false} />
+            <YAxis stroke="var(--text-tertiary)" fontSize={11} tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
+            <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]}
+            />
+            <Legend wrapperStyle={{ fontSize: 11 }} />
+            <Bar isAnimationActive={false} dataKey="gemini" name="Gemini" stackId="a" fill="#10b981" radius={[0,0,0,0]} />
+            <Bar isAnimationActive={false} dataKey="claude" name="Claude" stackId="a" fill="#d97757" radius={[0,0,0,0]} />
+            <Bar isAnimationActive={false} dataKey="codex" name="OpenAI" stackId="a" fill="#3b82f6" radius={[0,0,0,0]} />
+            <Bar isAnimationActive={false} dataKey="openrouter" name="OpenRouter" stackId="a" fill="#8b5cf6" radius={[4,4,0,0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};