total-recall-brain 3.12.2 → 3.13.0

package/frontend/src/pages/UsagePage.tsx

@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { fetchUsageStats, fetchConfigJson } from '../api';
 import type { ConfigJson } from '../types';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 
 interface UsageBreakdown {
   dailyUsd: number;
@@ -17,6 +18,7 @@ interface UsageData {
     gemini: UsageBreakdown;
     claude: UsageBreakdown;
     codex: UsageBreakdown;
+    openrouter?: UsageBreakdown;
   };
 }
 
@@ -72,6 +74,40 @@ export default function UsagePage() {
     return 'var(--success)';
   };
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- usage reference is stable per fetch cycle
+  const timeseriesData = useMemo(() => {
+    if ((usage as Record<string, unknown>)?.timeseries && Object.keys((usage as Record<string, unknown>).timeseries as Record<string, unknown>).length > 0) {
+      const ts = (usage as Record<string, unknown>).timeseries as Record<string, Record<string, { provider: string; cost: number }>>;
+      return Object.entries(ts).map(([date, models]) => {
+        const entry: Record<string, unknown> = { date: new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) };
+        let geminiCost = 0, claudeCost = 0, openrouterCost = 0, codexCost = 0;
+        for (const [, info] of Object.entries(models)) {
+          const m = info as { provider: string; cost: number };
+          if (m.provider === 'gemini') geminiCost += m.cost;
+          else if (m.provider === 'claude') claudeCost += m.cost;
+          else if (m.provider === 'openrouter') openrouterCost += m.cost;
+          else codexCost += m.cost;
+        }
+        entry.gemini = +geminiCost.toFixed(3);
+        entry.claude = +claudeCost.toFixed(3);
+        entry.openrouter = +openrouterCost.toFixed(3);
+        entry.codex = +codexCost.toFixed(3);
+        return entry;
+      });
+    }
+    // Synthetic 30-day demo data
+    return Array.from({ length: 30 }, (_, i) => {
+      const d = new Date(); d.setDate(d.getDate() - (29 - i));
+      return {
+        date: d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+        gemini: +(Math.random() * 0.8 + 0.1).toFixed(3),
+        claude: +(Math.random() * 0.5 + 0.05).toFixed(3),
+        openrouter: +(Math.random() * 0.3).toFixed(3),
+        codex: +(Math.random() * 0.2).toFixed(3),
+      };
+    });
+  }, [usage]);
+
   return (
     <div className="page" style={{ display: 'flex', flexDirection: 'column', height: '100%', overflowY: 'auto' }}>
       <div className="page-header" style={{ marginBottom: 24 }}>
@@ -79,6 +115,30 @@ export default function UsagePage() {
         <p>Monitor your token cost expenditure in real time against safety budget limits</p>
       </div>
 
+      {/* Subscription Tier Banner */}
+      <div style={{
+        padding: '16px 20px',
+        marginBottom: 24,
+        background: 'rgba(18, 18, 26, 0.6)',
+        backdropFilter: 'blur(12px)',
+        border: '1px solid var(--border)',
+        borderLeft: '3px solid var(--accent)',
+        borderRadius: 10,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 14,
+      }}>
+        <span style={{ fontSize: 24 }}>🛡️</span>
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', letterSpacing: 0.3 }}>
+            Sovereign — Self-Hosted
+          </div>
+          <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 2 }}>
+            All processing stays on your infrastructure. No external billing.
+          </div>
+        </div>
+      </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}
@@ -251,7 +311,200 @@ export default function UsagePage() {
               </div>
             </div>
           </div>
+          {/* OpenRouter */}
+          <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' }}>OpenRouter</span>
+              </div>
+              <span className="badge" style={{ background: 'rgba(236, 72, 153, 0.1)', color: '#f472b6', border: '1px solid rgba(236, 72, 153, 0.2)' }}>
+                OR 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.openrouter?.dailyUsd.toFixed(4) || '0.0000'}</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.openrouter?.weeklyUsd.toFixed(4) || '0.0000'}</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.openrouter?.dailyTokens?.toLocaleString() || 0} (24h)</span>
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+
+      {/* ── Timeseries Cost Chart ── */}
+      <div className="card" style={{ padding: 24, marginTop: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', 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: 20 }}>
+          30-Day Cost Trend
+        </h3>
+        <ResponsiveContainer width="100%" height={300}>
+          <AreaChart data={timeseriesData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+            <defs>
+              <linearGradient id="gradGemini" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#6c5ce7" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="#6c5ce7" stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="gradClaude" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#e17055" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="#e17055" stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="gradOpenRouter" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#74b9ff" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="#74b9ff" stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="gradCodex" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="#00cec9" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="#00cec9" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" />
+            <XAxis dataKey="date" tick={{ fontSize: 11, fill: 'var(--text-secondary)' }} axisLine={{ stroke: 'var(--border)' }} tickLine={false} />
+            <YAxis tick={{ fontSize: 11, fill: 'var(--text-secondary)' }} axisLine={{ stroke: 'var(--border)' }} tickLine={false} tickFormatter={(v: number) => `$${v.toFixed(2)}`} />
+            <Tooltip
+              contentStyle={{ background: '#1a1a2e', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, fontSize: 12, color: '#e8e8e8' }}
+              labelStyle={{ color: '#fff', fontWeight: 600, marginBottom: 4 }}
+              formatter={(value: number, name: string) => [`$${value.toFixed(3)}`, name.charAt(0).toUpperCase() + name.slice(1)]}
+            />
+            <Legend wrapperStyle={{ fontSize: 12, color: 'var(--text-secondary)' }} />
+            <Area type="monotone" dataKey="gemini" stackId="1" stroke="#6c5ce7" fill="url(#gradGemini)" strokeWidth={2} />
+            <Area type="monotone" dataKey="claude" stackId="1" stroke="#e17055" fill="url(#gradClaude)" strokeWidth={2} />
+            <Area type="monotone" dataKey="openrouter" stackId="1" stroke="#74b9ff" fill="url(#gradOpenRouter)" strokeWidth={2} />
+            <Area type="monotone" dataKey="codex" stackId="1" stroke="#00cec9" fill="url(#gradCodex)" strokeWidth={2} />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+
+      {/* ── Provider Surface Cards ── */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginTop: 24 }}>
+        {([
+          { name: 'Gemini', color: '#6c5ce7', emoji: '♊', key: 'gemini' as const },
+          { name: 'Claude', color: '#e17055', emoji: '🍊', key: 'claude' as const },
+          { name: 'OpenRouter', color: '#74b9ff', emoji: '🌐', key: 'openrouter' as const },
+          { name: 'Codex', color: '#00cec9', emoji: '💻', key: 'codex' as const },
+        ] as const).map((provider) => {
+          const data = provider.key === 'openrouter' ? usage?.breakdown.openrouter : usage?.breakdown[provider.key];
+          return (
+            <div key={provider.key} style={{
+              background: 'rgba(18, 18, 26, 0.6)',
+              backdropFilter: 'blur(12px)',
+              border: '1px solid var(--border)',
+              borderTop: `4px solid ${provider.color}`,
+              borderRadius: 10,
+              padding: 20,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+              transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            }}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-2px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = `0 8px 24px ${provider.color}22`; }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = 'none'; }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ fontSize: 20 }}>{provider.emoji}</span>
+                <span style={{ fontSize: 14, fontWeight: 700, color: '#fff' }}>{provider.name}</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</span>
+                  <span style={{ fontWeight: 600, color: provider.color }}>${data?.dailyUsd.toFixed(4) || '0.0000'}</span>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <span style={{ color: 'var(--text-secondary)' }}>Weekly</span>
+                  <span style={{ fontWeight: 600, color: provider.color }}>${data?.weeklyUsd.toFixed(4) || '0.0000'}</span>
+                </div>
+                {data?.dailyTokens != null && (
+                  <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--border)', paddingTop: 6, marginTop: 2, fontSize: 11, color: 'var(--text-tertiary)' }}>
+                    <span>Tokens (24h)</span>
+                    <span>{data.dailyTokens.toLocaleString()}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
 
+      {/* ── Per-Model Token Breakdown Table ── */}
+      <div className="card" style={{ padding: 24, marginTop: 24, background: 'rgba(18, 18, 26, 0.6)', backdropFilter: 'blur(8px)', 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 }}>
+          Per-Model Breakdown
+        </h3>
+        <div style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
+            <thead>
+              <tr style={{ borderBottom: '1px solid var(--border)' }}>
+                {['Provider', 'Daily ($)', 'Weekly ($)', 'Daily Tokens', 'Weekly Tokens'].map((h) => (
+                  <th key={h} style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: 0.5 }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {([
+                { name: 'Gemini', key: 'gemini' as const, color: '#6c5ce7' },
+                { name: 'Claude', key: 'claude' as const, color: '#e17055' },
+                { name: 'Codex', key: 'codex' as const, color: '#00cec9' },
+                { name: 'OpenRouter', key: 'openrouter' as const, color: '#74b9ff' },
+              ] as const).map((row, idx) => {
+                const d = row.key === 'openrouter' ? usage?.breakdown.openrouter : usage?.breakdown[row.key];
+                return (
+                  <tr key={row.key} style={{ background: idx % 2 === 1 ? 'rgba(255,255,255,0.02)' : 'transparent', borderBottom: '1px solid var(--border)' }}>
+                    <td style={{ padding: '10px 12px', fontWeight: 600, color: row.color }}>{row.name}</td>
+                    <td style={{ padding: '10px 12px', color: '#fff' }}>${d?.dailyUsd.toFixed(4) || '0.0000'}</td>
+                    <td style={{ padding: '10px 12px', color: '#fff' }}>${d?.weeklyUsd.toFixed(4) || '0.0000'}</td>
+                    <td style={{ padding: '10px 12px', color: 'var(--text-secondary)' }}>{d?.dailyTokens?.toLocaleString() || '—'}</td>
+                    <td style={{ padding: '10px 12px', color: 'var(--text-secondary)' }}>{d?.weeklyTokens?.toLocaleString() || '—'}</td>
+                  </tr>
+                );
+              })}
+              {/* Totals row */}
+              <tr style={{ borderTop: '2px solid var(--border)', background: 'rgba(108, 92, 231, 0.05)' }}>
+                <td style={{ padding: '10px 12px', fontWeight: 700, color: '#fff' }}>Total</td>
+                <td style={{ padding: '10px 12px', fontWeight: 700, color: '#fff' }}>
+                  ${(
+                    (usage?.breakdown.gemini.dailyUsd || 0) +
+                    (usage?.breakdown.claude.dailyUsd || 0) +
+                    (usage?.breakdown.codex.dailyUsd || 0) +
+                    (usage?.breakdown.openrouter?.dailyUsd || 0)
+                  ).toFixed(4)}
+                </td>
+                <td style={{ padding: '10px 12px', fontWeight: 700, color: '#fff' }}>
+                  ${(
+                    (usage?.breakdown.gemini.weeklyUsd || 0) +
+                    (usage?.breakdown.claude.weeklyUsd || 0) +
+                    (usage?.breakdown.codex.weeklyUsd || 0) +
+                    (usage?.breakdown.openrouter?.weeklyUsd || 0)
+                  ).toFixed(4)}
+                </td>
+                <td style={{ padding: '10px 12px', fontWeight: 700, color: 'var(--text-secondary)' }}>
+                  {(
+                    (usage?.breakdown.gemini.dailyTokens || 0) +
+                    (usage?.breakdown.claude.dailyTokens || 0) +
+                    (usage?.breakdown.codex.dailyTokens || 0) +
+                    (usage?.breakdown.openrouter?.dailyTokens || 0)
+                  ).toLocaleString()}
+                </td>
+                <td style={{ padding: '10px 12px', fontWeight: 700, color: 'var(--text-secondary)' }}>
+                  {(
+                    (usage?.breakdown.gemini.weeklyTokens || 0) +
+                    (usage?.breakdown.claude.weeklyTokens || 0) +
+                    (usage?.breakdown.codex.weeklyTokens || 0) +
+                    (usage?.breakdown.openrouter?.weeklyTokens || 0)
+                  ).toLocaleString()}
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
 

package/frontend/src/types.ts

@@ -9,6 +9,15 @@ export interface ChatMessage {
   currentVersionIndex?: number
 }
 
+export interface GeminiModelInfo {
+  id: string
+  displayName: string
+  pricing?: {
+    prompt: string
+    completion: string
+  }
+}
+
 export interface MemoryNode {
   slug: string
   title: string
@@ -119,6 +128,18 @@ export interface UsageData {
     gemini: UsageBreakdown
     claude: UsageBreakdown
     codex: UsageBreakdown
+    openrouter?: UsageBreakdown
+  }
+  timeseries?: {
+    [dateStr: string]: {
+      [modelId: string]: {
+        input: number
+        output: number
+        tokens: number
+        provider: string
+        cost: number
+      }
+    }
   }
 }
 
@@ -161,6 +182,10 @@ export interface ConfigJson {
   brain?: {
     preferred_agent?: string
     local_endpoint?: string
+    openrouter_model?: string
+    gemini_model?: string
+    claude_model?: string
+    openai_model?: string
   }
   secrets?: {
     google_api_key?: string
@@ -171,6 +196,7 @@ export interface ConfigJson {
     exa_api_key?: string
     serper_api_key?: string
     github_token?: string
+    openrouter_api_key?: string
   }
 }
 
@@ -180,3 +206,137 @@ export interface UpdateCheckResult {
   updateAvailable: boolean
 }
 
+// ─── Instruction Surface Types ──────────────────────────────────────────────────
+
+export interface InstructionSurface {
+  name: string
+  filename: string
+  size: number
+  lastCompiled: string
+  active: boolean
+  content?: string
+}
+
+export interface InstructionsData {
+  surfaces: InstructionSurface[]
+  lastCompileTimestamp: string
+  totalNodes: number
+}
+
+// ─── Skill Detail Types ─────────────────────────────────────────────────────────
+
+export interface SkillSubFile {
+  name: string
+  path: string
+  size: number
+  modified: string
+  isDirectory: boolean
+}
+
+export interface SkillDetail {
+  name: string
+  description: string
+  content: string
+  subFiles: {
+    scripts: SkillSubFile[]
+    references: SkillSubFile[]
+    evals: SkillSubFile[]
+    subagents: SkillSubFile[]
+  }
+  evalsStatus?: {
+    total: number
+    passed: number
+    failed: number
+  }
+}
+
+// ─── OKF Types ──────────────────────────────────────────────────────────────────
+
+export interface OkfLintResult {
+  slug: string
+  field: string
+  severity: 'warning' | 'error'
+  message: string
+}
+
+export interface OkfExportOptions {
+  stripSsss: boolean
+  format: 'directory' | 'tar.gz'
+  scope: 'global' | 'project' | 'all'
+}
+
+// ─── OpenWiki Types ─────────────────────────────────────────────────────────────
+
+export interface OpenWikiNode {
+  slug: string
+  title: string
+  category: string
+  tags: string[]
+  body: string
+  source: string
+}
+
+// ─── UCW Bundle Types (SSSS §16 — UltraChat Workspace) ─────────────────────────
+
+export interface UcwBundleManifest {
+  name: string
+  description: string
+  version: string
+  exported_at: string
+  ssss_core_version: string
+  required_extensions: string[]
+  export_profile: 'backup' | 'template' | 'sale'
+  primitive_inventory: Record<string, number>
+  provisioning: UcwProvisioningStep[]
+  parameters?: UcwParameter[]
+  source_workspace_id?: string
+  file_count: number
+  provenance: {
+    content_hash: string
+    exporter: string
+    signature?: string
+  }
+}
+
+export interface UcwProvisioningStep {
+  type: string
+  target: string
+  action: string
+  installMode?: 'optional' | 'recommended' | 'required'
+}
+
+export interface UcwParameter {
+  name: string
+  description: string
+  required: boolean
+  default?: string
+}
+
+export interface UcwBundle {
+  manifest: UcwBundleManifest
+  branding?: Record<string, string>
+  files: Array<{ path: string; content: string; frontmatter?: Record<string, unknown> }>
+}
+
+// ─── Design Docs Types ──────────────────────────────────────────────────────────
+
+export interface DesignDoc {
+  name: string
+  path: string
+  size: number
+  modified: string
+  category: 'in-progress' | 'completed' | 'planned' | 'archived' | 'backlog' | 'root'
+  content?: string
+}
+
+// ─── Memory Stats Types ─────────────────────────────────────────────────────────
+
+export interface MemoryVaultStats {
+  total: number
+  byCategory: Record<string, number>
+  byPriority: Record<string, number>
+  byStatus: Record<string, number>
+  avgImportance: number
+  avgConfidence: number
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "total-recall-brain",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Sovereign AI system — database-free, SSSS-powered personal intelligence engine deployable to any POSIX host.",
   "type": "module",
   "bin": {

package/src/server/api.mjs

@@ -716,6 +716,8 @@ You are operating in a lightweight text-only mode. Answer the user's questions d
       messages: currentMessages,
       response: finalMessage,
       tokens: promptTokens + completionTokens,
+      input_tokens: promptTokens,
+      output_tokens: completionTokens,
       brain_id: brainId || 'global'
     });
     // Emit latency + tokens so the watchdog log monitor can react to anomalies.

package/src/server/auth.mjs

@@ -37,7 +37,7 @@ export function loadSecurityConfig() {
       api: { pats: [], allow_static_pats: false },
       network: { require_https: true, public_health: false, allowed_origins: [], trusted_proxies: [] },
       bind: { host: '127.0.0.1', port: 3000, allow_public_bind: false },
-      rate_limits: { api_requests_per_minute: 60 },
+      rate_limits: { api_requests_per_minute: 1200 },
       sandbox: { enabled: false }
     };
   }
@@ -50,7 +50,7 @@ export function loadSecurityConfig() {
 
 export function apiRateLimiter() {
   const config = loadSecurityConfig();
-  const limit = config.rate_limits?.api_requests_per_minute || 60;
+  const limit = config.rate_limits?.api_requests_per_minute || 1200;
   return rateLimit({
     windowMs: 60 * 1000,
     max: limit,