total-recall-brain 3.1.2 → 3.2.2

package/frontend/src/pages/TasksPage.tsx

@@ -0,0 +1,392 @@
+import { useState, useCallback, useEffect } from 'react'
+import {
+  listTasks,
+  createTask,
+  listResearch,
+  createResearch,
+  fetchLogs,
+  triggerRecompile,
+  readMemory
+} from '../api'
+import type { Task, MemoryNode } from '../types'
+import TaskQueueTab from '../components/TaskQueueTab'
+import ResearchAgendaTab from '../components/ResearchAgendaTab'
+import type { ResearchItem } from '../components/ResearchAgendaTab'
+import DaemonLogsTab from '../components/DaemonLogsTab'
+
+export default function TasksPage() {
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [researchItems, setResearchItems] = useState<ResearchItem[]>([])
+  const [researchCounts, setResearchCounts] = useState({ pending: 0, in_progress: 0, done: 0, failed: 0 })
+  const [logs, setLogs] = useState('(loading live cognitive stream...)')
+  const [activeTab, setActiveTab] = useState<'tasks' | 'research' | 'logs'>('tasks')
+  
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [recompiling, setRecompiling] = useState(false)
+  const [actionSuccess, setActionSuccess] = useState('')
+
+  // Expanded research and lazy-loaded nodes
+  const [expandedResearchId, setExpandedResearchId] = useState<string | null>(null)
+  const [loadedDiscoveries, setLoadedDiscoveries] = useState<Record<string, MemoryNode | null>>({})
+  const [loadingNodeSlugs, setLoadingNodeSlugs] = useState<Record<string, boolean>>({})
+
+  const handleToggleExpand = async (item: ResearchItem) => {
+    if (expandedResearchId === item.id) {
+      setExpandedResearchId(null)
+      return
+    }
+    
+    setExpandedResearchId(item.id)
+    
+    if (item.node_slug && !loadedDiscoveries[item.node_slug] && !loadingNodeSlugs[item.node_slug]) {
+      setLoadingNodeSlugs(prev => ({ ...prev, [item.node_slug!]: true }))
+      try {
+        const node = await readMemory(item.node_slug)
+        setLoadedDiscoveries(prev => ({ ...prev, [item.node_slug!]: node }))
+      } catch (e) {
+        console.error('Failed to load memory node for research', e)
+      } finally {
+        setLoadingNodeSlugs(prev => ({ ...prev, [item.node_slug!]: false }))
+      }
+    }
+  }
+
+  // Task creation form state
+  const [showTaskForm, setShowTaskForm] = useState(false)
+  const [taskCategory, setTaskCategory] = useState('fact-seeker')
+  const [taskTarget, setTaskTarget] = useState('')
+  const [taskBody, setTaskBody] = useState('')
+  const [taskSubmitting, setTaskSubmitting] = useState(false)
+
+  // Research creation form state
+  const [showResearchForm, setShowResearchForm] = useState(false)
+  const [researchTopic, setResearchTopic] = useState('')
+  const [researchPriority, setResearchPriority] = useState<'low' | 'medium' | 'high' | 'critical'>('medium')
+  const [researchNotes, setResearchNotes] = useState('')
+  const [researchSubmitting, setResearchSubmitting] = useState(false)
+
+  // Fetch Scheduler Tasks
+  const fetchTasks = useCallback(async () => {
+    try {
+      const data = await listTasks()
+      setTasks(data || [])
+      setError('')
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }, [])
+
+  // Fetch Research Agenda
+  const fetchResearch = useCallback(async () => {
+    try {
+      const res = await listResearch('all')
+      setResearchItems(res.items || [])
+      setResearchCounts(res.counts || { pending: 0, in_progress: 0, done: 0, failed: 0 })
+      setError('')
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }, [])
+
+  // Fetch Daemon (Cognitive Engine) Logs
+  const fetchDaemonLogs = useCallback(async () => {
+    try {
+      const data = await fetchLogs('daemon')
+      setLogs(data.content || '(no logs streamed yet)')
+    } catch (e) {
+      setLogs(`Error connecting to cognitive logs: ${(e as Error).message}`)
+    }
+  }, [])
+
+  // Combined Refresh
+  const refreshAll = useCallback(async () => {
+    setLoading(true)
+    await Promise.all([fetchTasks(), fetchResearch(), fetchDaemonLogs()])
+    setLoading(false)
+  }, [fetchTasks, fetchResearch, fetchDaemonLogs])
+
+  // Polling loop
+  useEffect(() => {
+    const init = async () => {
+      await Promise.all([fetchTasks(), fetchResearch(), fetchDaemonLogs()])
+      setLoading(false)
+    }
+    void init()
+
+    const interval = setInterval(() => {
+      void fetchTasks()
+      void fetchResearch()
+      void fetchDaemonLogs()
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [fetchTasks, fetchResearch, fetchDaemonLogs])
+
+  // Trigger Brain Recompilation
+  const handleRecompile = async () => {
+    setRecompiling(true)
+    setError('')
+    setActionSuccess('')
+    try {
+      const res = await triggerRecompile()
+      setActionSuccess(res.message || 'Brain surface recompiled successfully!')
+      setTimeout(() => setActionSuccess(''), 4000)
+      void refreshAll()
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setRecompiling(false)
+    }
+  }
+
+  // Seed Autonomous Gaps to fill the queue
+  const handleSeedGaps = async () => {
+    setError('')
+    setActionSuccess('')
+    try {
+      await createTask(
+        'fact-seeker',
+        'Audit latest Chrome Extension MV3 API updates',
+        'Verify if chrome.declarativeNetRequest rulesets have new declarative properties.'
+      )
+      await createTask(
+        'post-mortem-daily',
+        'Ingest yesterday\'s IDE compile session logs',
+        'Analyze TypeScript build latency and suggest performance optimizations.'
+      )
+      await createTask(
+        'clarity-rewriter',
+        'Harden security.yml authentication encryption',
+        'Enforce bcrypt rounds to 12 and verify cross-origin session domain locks.'
+      )
+
+      await createResearch(
+        'TypeScript 5.4 advanced mapped types and template literal constraints',
+        'high',
+        'Evaluate mapped type performance on large monorepos.'
+      )
+      await createResearch(
+        'Glassmorphism backdrop-filter performance optimizations on mobile Safari',
+        'medium',
+        'Prevent GPU compositing lag by limiting blur radius.'
+      )
+      await createResearch(
+        'Local LLM quantization (GGUF vs EXL2) memory efficiency on macOS',
+        'high',
+        'Check metal buffer usage in Ollama backend models.'
+      )
+
+      setActionSuccess('Autonomous gaps seeded successfully! Task queue and research agenda are now full.')
+      setTimeout(() => setActionSuccess(''), 5000)
+      void refreshAll()
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+
+  // Create Task Handler
+  const handleCreateTask = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!taskTarget.trim()) return
+    setTaskSubmitting(true)
+    setError('')
+    try {
+      await createTask(taskCategory, taskTarget.trim(), taskBody.trim())
+      setTaskTarget('')
+      setTaskBody('')
+      setShowTaskForm(false)
+      setActionSuccess('Task enqueued successfully!')
+      setTimeout(() => setActionSuccess(''), 3000)
+      void fetchTasks()
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setTaskSubmitting(false)
+    }
+  }
+
+  // Create Research Handler
+  const handleCreateResearch = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!researchTopic.trim()) return
+    setResearchSubmitting(true)
+    setError('')
+    try {
+      await createResearch(researchTopic.trim(), researchPriority, researchNotes.trim() || undefined)
+      setResearchTopic('')
+      setResearchNotes('')
+      setShowResearchForm(false)
+      setActionSuccess('Research project enqueued successfully!')
+      setTimeout(() => setActionSuccess(''), 3000)
+      void fetchResearch()
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setResearchSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
+        <div>
+          <h1>Cognitive Dashboard</h1>
+          <p>Real-time background reasoning engine, autonomous research, and active schedulers</p>
+        </div>
+        
+        <div style={{ display: 'flex', gap: 10 }}>
+          <button 
+            className="btn btn-ghost btn-sm" 
+            onClick={handleSeedGaps}
+            style={{ 
+              border: '1px solid rgba(59, 130, 246, 0.4)', 
+              background: 'rgba(59, 130, 246, 0.05)',
+              color: '#60a5fa' 
+            }}
+          >
+            🔥 Seed Gaps
+          </button>
+          
+          <button 
+            className="btn btn-sm"
+            onClick={handleRecompile}
+            disabled={recompiling}
+            style={{
+              background: recompiling ? 'var(--bg-secondary)' : 'linear-gradient(135deg, #3b82f6, #1d4ed8)',
+              color: '#ffffff',
+              border: 'none',
+              cursor: recompiling ? 'not-allowed' : 'pointer'
+            }}
+          >
+            {recompiling ? (
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ animation: 'spin 1s linear infinite' }}>
+                  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+                </svg>
+                Compiling...
+              </span>
+            ) : 'Recompile Surface'}
+          </button>
+        </div>
+      </div>
+
+      {error && <div className="badge badge-error" style={{ marginBottom: 16, display: 'inline-flex' }}>⚠️ {error}</div>}
+      {actionSuccess && <div className="badge badge-success" style={{ marginBottom: 16, display: 'inline-flex', background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10b981', color: '#34d399' }}>✓ {actionSuccess}</div>}
+
+      {/* Tabs Layout */}
+      <div style={{
+        display: 'flex',
+        borderBottom: '1px solid var(--border)',
+        marginBottom: 20,
+        gap: 20,
+      }}>
+        <button
+          onClick={() => setActiveTab('tasks')}
+          style={{
+            background: 'none',
+            border: 'none',
+            borderBottom: activeTab === 'tasks' ? '2px solid #3b82f6' : '2px solid transparent',
+            color: activeTab === 'tasks' ? 'var(--text-primary)' : 'var(--text-tertiary)',
+            padding: '10px 4px',
+            cursor: 'pointer',
+            fontSize: 14,
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8
+          }}
+        >
+          📅 Task Queue
+          <span className="badge badge-accent" style={{ fontSize: 10, padding: '2px 6px' }}>{tasks.length}</span>
+        </button>
+
+        <button
+          onClick={() => setActiveTab('research')}
+          style={{
+            background: 'none',
+            border: 'none',
+            borderBottom: activeTab === 'research' ? '2px solid #3b82f6' : '2px solid transparent',
+            color: activeTab === 'research' ? 'var(--text-primary)' : 'var(--text-tertiary)',
+            padding: '10px 4px',
+            cursor: 'pointer',
+            fontSize: 14,
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8
+          }}
+        >
+          🔬 Research Agenda
+          <span className="badge" style={{ fontSize: 10, padding: '2px 6px', background: 'rgba(16, 185, 129, 0.1)', color: '#34d399', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
+            {researchCounts.pending + researchCounts.in_progress}
+          </span>
+        </button>
+
+        <button
+          onClick={() => setActiveTab('logs')}
+          style={{
+            background: 'none',
+            border: 'none',
+            borderBottom: activeTab === 'logs' ? '2px solid #3b82f6' : '2px solid transparent',
+            color: activeTab === 'logs' ? 'var(--text-primary)' : 'var(--text-tertiary)',
+            padding: '10px 4px',
+            cursor: 'pointer',
+            fontSize: 14,
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8
+          }}
+        >
+          📟 Live Brain Stream
+          <span className="pulse" style={{ background: '#10b981', width: 6, height: 6, borderRadius: '50%' }} />
+        </button>
+      </div>
+
+      {/* Tab Panels */}
+      {activeTab === 'tasks' && (
+        <TaskQueueTab
+          tasks={tasks}
+          loading={loading}
+          showTaskForm={showTaskForm}
+          setShowTaskForm={setShowTaskForm}
+          taskCategory={taskCategory}
+          setTaskCategory={setTaskCategory}
+          taskTarget={taskTarget}
+          setTaskTarget={setTaskTarget}
+          taskBody={taskBody}
+          setTaskBody={setTaskBody}
+          taskSubmitting={taskSubmitting}
+          handleCreateTask={handleCreateTask}
+        />
+      )}
+
+      {activeTab === 'research' && (
+        <ResearchAgendaTab
+          researchItems={researchItems}
+          loading={loading}
+          showResearchForm={showResearchForm}
+          setShowResearchForm={setShowResearchForm}
+          researchTopic={researchTopic}
+          setResearchTopic={setResearchTopic}
+          researchPriority={researchPriority}
+          setResearchPriority={setResearchPriority}
+          researchNotes={researchNotes}
+          setResearchNotes={setResearchNotes}
+          researchSubmitting={researchSubmitting}
+          handleCreateResearch={handleCreateResearch}
+          expandedResearchId={expandedResearchId}
+          handleToggleExpand={handleToggleExpand}
+          loadedDiscoveries={loadedDiscoveries}
+          loadingNodeSlugs={loadingNodeSlugs}
+          refreshResearch={fetchResearch}
+        />
+      )}
+
+      {activeTab === 'logs' && (
+        <DaemonLogsTab logs={logs} activeTab={activeTab} />
+      )}
+    </div>
+  )
+}

package/frontend/src/pages/UsagePage.tsx

@@ -0,0 +1,260 @@
+import { useState, useEffect } from 'react';
+import { fetchUsageStats, fetchConfigJson } from '../api';
+import type { ConfigJson } from '../types';
+
+interface UsageBreakdown {
+  dailyUsd: number;
+  weeklyUsd: number;
+  dailyTokens?: number;
+  weeklyTokens?: number;
+}
+
+interface UsageData {
+  timestamp: string;
+  dailyUsd: number;
+  weeklyUsd: number;
+  breakdown: {
+    gemini: UsageBreakdown;
+    claude: UsageBreakdown;
+    codex: UsageBreakdown;
+  };
+}
+
+export default function UsagePage() {
+  const [usage, setUsage] = useState<UsageData | null>(null);
+  const [config, setConfig] = useState<ConfigJson | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUsageAndConfig = async () => {
+    try {
+      const stats = await fetchUsageStats();
+      setUsage(stats);
+      
+      const configData = await fetchConfigJson();
+      setConfig(configData);
+      setError(null);
+    } catch (err: unknown) {
+      setError((err as Error).message || 'Failed to sync budget consumption stats.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- legitimate statistics sync on mount
+    void fetchUsageAndConfig();
+    const interval = setInterval(fetchUsageAndConfig, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="page" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" 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 style={{ color: 'var(--text-secondary)' }}>Aggregating token expenditures...</div>
+      </div>
+    );
+  }
+
+  const dailyCap = config?.budget?.budget?.daily_cap_usd ?? 5.0;
+  const weeklyCap = config?.budget?.budget?.weekly_cap_usd ?? 25.0;
+  const budgetEnabled = config?.budget?.budget?.enabled !== false;
+
+  const dailyPercent = Math.min(100, ((usage?.dailyUsd || 0) / dailyCap) * 100);
+  const weeklyPercent = Math.min(100, ((usage?.weeklyUsd || 0) / weeklyCap) * 100);
+
+  const getProgressColor = (percent: number) => {
+    if (percent > 85) return 'var(--error)';
+    if (percent > 60) return 'var(--warning)';
+    return 'var(--success)';
+  };
+
+  return (
+    <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
+      <div className="page-header" style={{ marginBottom: 24 }}>
+        <h1>Token & Budget Statistics</h1>
+        <p>Monitor your token cost expenditure in real time against safety budget limits</p>
+      </div>
+
+      {error && (
+        <div className="badge badge-error" style={{ marginBottom: 20, display: 'inline-flex', padding: '6px 12px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #ef4444', color: '#f87171' }}>
+          ⚠️ {error}
+        </div>
+      )}
+
+      {/* Overview dollar cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 24, marginBottom: 24 }}>
+        
+        {/* Daily Cap progress card */}
+        <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', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div>
+              <h3 style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Daily Expenditure</h3>
+              <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, color: '#fff' }}>
+                ${usage?.dailyUsd.toFixed(4) || '0.0000'}
+              </div>
+            </div>
+            <span className="badge" style={{ background: 'var(--bg-elevated)', color: 'var(--text-secondary)', border: '1px solid var(--border)', fontSize: 11 }}>
+              Cap: ${dailyCap.toFixed(2)}
+            </span>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)' }}>
+              <span>Consumption Ratio</span>
+              <span>{dailyPercent.toFixed(1)}%</span>
+            </div>
+            <div style={{ height: 6, background: 'var(--bg-elevated)', borderRadius: 3, overflow: 'hidden' }}>
+              <div style={{
+                height: '100%',
+                width: `${dailyPercent}%`,
+                background: getProgressColor(dailyPercent),
+                boxShadow: `0 0 8px ${getProgressColor(dailyPercent)}`,
+                transition: 'width 0.4s ease'
+              }} />
+            </div>
+          </div>
+
+          <div style={{ fontSize: 10, color: 'var(--text-tertiary)', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 4 }}>
+            Status: {budgetEnabled ? '🛡️ Budget supervision active' : '⚠️ Limits unmonitored (disabled)'}
+          </div>
+        </div>
+
+        {/* Weekly Cap progress card */}
+        <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', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div>
+              <h3 style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Weekly Expenditure</h3>
+              <div style={{ fontSize: 28, fontWeight: 700, marginTop: 4, color: '#fff' }}>
+                ${usage?.weeklyUsd.toFixed(4) || '0.0000'}
+              </div>
+            </div>
+            <span className="badge" style={{ background: 'var(--bg-elevated)', color: 'var(--text-secondary)', border: '1px solid var(--border)', fontSize: 11 }}>
+              Cap: ${weeklyCap.toFixed(2)}
+            </span>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)' }}>
+              <span>Consumption Ratio</span>
+              <span>{weeklyPercent.toFixed(1)}%</span>
+            </div>
+            <div style={{ height: 6, background: 'var(--bg-elevated)', borderRadius: 3, overflow: 'hidden' }}>
+              <div style={{
+                height: '100%',
+                width: `${weeklyPercent}%`,
+                background: getProgressColor(weeklyPercent),
+                boxShadow: `0 0 8px ${getProgressColor(weeklyPercent)}`,
+                transition: 'width 0.4s ease'
+              }} />
+            </div>
+          </div>
+
+          <div style={{ fontSize: 10, color: 'var(--text-tertiary)', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 4 }}>
+            Rolling window: Last 7 days in local system time
+          </div>
+        </div>
+
+      </div>
+
+      {/* Per Model breakdown list */}
+      <div className="card" style={{ padding: 24, background: 'rgba(18, 18, 26, 0.6)', border: '1px solid var(--border)' }}>
+        <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: 0.5, borderBottom: '1px solid var(--border)', paddingBottom: 10, marginBottom: 16 }}>
+          Model Engine Spend breakdown
+        </h3>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
+          
+          {/* Gemini */}
+          <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border)', padding: 16, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 18 }}>♊</span>
+                <span style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Gemini</span>
+              </div>
+              <span className="badge" style={{ background: 'rgba(59, 130, 246, 0.1)', color: '#60a5fa', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
+                Google API
+              </span>
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Daily Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.gemini.dailyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Weekly Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.gemini.weeklyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--border)', paddingTop: 6, marginTop: 4, fontSize: 11, color: 'var(--text-tertiary)' }}>
+                <span>Rolling Tokens:</span>
+                <span>{usage?.breakdown.gemini.dailyTokens?.toLocaleString() || 0} (24h)</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Claude */}
+          <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border)', padding: 16, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 18 }}>🍊</span>
+                <span style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Claude</span>
+              </div>
+              <span className="badge" style={{ background: 'rgba(239, 107, 107, 0.1)', color: '#f87171', border: '1px solid rgba(239, 107, 107, 0.2)' }}>
+                Anthropic API
+              </span>
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Daily Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.claude.dailyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Weekly Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.claude.weeklyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--border)', paddingTop: 6, marginTop: 4, fontSize: 11, color: 'var(--text-tertiary)' }}>
+                <span>Rolling Tokens:</span>
+                <span>(Ingested stats-cache)</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Codex */}
+          <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border)', padding: 16, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 12 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 18 }}>💻</span>
+                <span style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Codex</span>
+              </div>
+              <span className="badge" style={{ background: 'rgba(16, 185, 129, 0.1)', color: '#34d399', border: '1px solid rgba(16, 185, 129, 0.2)' }}>
+                OpenAI API
+              </span>
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Daily Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.codex.dailyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <span style={{ color: 'var(--text-secondary)' }}>Weekly Spend:</span>
+                <span style={{ fontWeight: 600, color: '#fff' }}>${usage?.breakdown.codex.weeklyUsd.toFixed(4)}</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--border)', paddingTop: 6, marginTop: 4, fontSize: 11, color: 'var(--text-tertiary)' }}>
+                <span>Rolling Tokens:</span>
+                <span>{usage?.breakdown.codex.dailyTokens?.toLocaleString() || 0} (24h)</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  );
+}