total-recall-brain 3.12.2 → 3.13.1

package/frontend/src/components/Graph3D.tsx

@@ -12,6 +12,8 @@ interface Graph3DProps {
   onOpenThread: (threadId: string) => void
   onGroundMemoryNode: (slug: string) => void
   selectedGroundingNodes: string[]
+  /** When false, canvas ignores pointer events (chat background decoration). Default true. */
+  interactive?: boolean
 }
 
 interface VisualNode {
@@ -48,6 +50,7 @@ export default function Graph3D({
   onOpenThread,
   onGroundMemoryNode,
   selectedGroundingNodes,
+  interactive = true,
 }: Graph3DProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -60,7 +63,7 @@ export default function Graph3D({
   const [visibleTypes, setVisibleTypes] = useState({
     research: true,
     observations: true,
-    rules: false,
+    rules: true,
     threads: false,
   })
 
@@ -191,7 +194,7 @@ export default function Graph3D({
                 source: nodeA,
                 target: targetNode,
                 opacity: 0.7,
-                color: "rgba(167, 139, 250, 0.55)"
+                color: "rgba(96, 165, 250, 0.55)"
               })
             }
           })
@@ -362,7 +365,7 @@ export default function Graph3D({
         }
 
         if (isHighlight) {
-          ctx.strokeStyle = color || (source.type === "memory" ? "rgba(139, 92, 246, 0.65)" : source.type === "thread" ? "rgba(6, 182, 212, 0.65)" : "rgba(245, 158, 11, 0.65)")
+          ctx.strokeStyle = color || (source.type === "memory" ? "rgba(96, 165, 250, 0.55)" : source.type === "thread" ? "rgba(34, 211, 238, 0.55)" : "rgba(251, 191, 36, 0.55)")
           ctx.lineWidth = 1.8
         } else {
           ctx.strokeStyle = color 
@@ -398,22 +401,37 @@ export default function Graph3D({
           size * (isHovered || isSelected ? 2.5 : 1.5)
         )
 
-        let color = "#8b5cf6" // memory observations (purple)
-        let glowColor = "rgba(139, 92, 246, 0.2)"
-        
+        // Brand-aligned palette: readable on dark, category-distinct
+        let color = "#60a5fa" // facts / default memory (sky)
+        let glowColor = "rgba(96, 165, 250, 0.28)"
+
         if (node.type === "memory") {
-          const category = ((node.originalData as MemoryNode).category || 'general').toLowerCase()
-          const isRule = ['invariants', 'preferences', 'patterns', 'anti-patterns'].includes(category)
-          if (isRule) {
-            color = "#6366f1" // developer rules (indigo)
-            glowColor = "rgba(99, 102, 241, 0.2)"
+          const category = ((node.originalData as MemoryNode).category || "general").toLowerCase()
+          const palette: Record<string, [string, string]> = {
+            invariants: ["#38bdf8", "rgba(56, 189, 248, 0.3)"], // cyan-bright — must-rules
+            preferences: ["#818cf8", "rgba(129, 140, 248, 0.28)"], // soft indigo
+            patterns: ["#34d399", "rgba(52, 211, 153, 0.28)"], // emerald
+            "anti-patterns": ["#f87171", "rgba(248, 113, 113, 0.28)"], // rose
+            facts: ["#60a5fa", "rgba(96, 165, 250, 0.28)"], // sky blue
+            concepts: ["#a78bfa", "rgba(167, 139, 250, 0.28)"], // violet
+            decisions: ["#fbbf24", "rgba(251, 191, 36, 0.28)"], // amber
+            lore: ["#c084fc", "rgba(192, 132, 252, 0.25)"], // orchid
+            corrections: ["#fb923c", "rgba(251, 146, 60, 0.28)"], // orange
+          }
+          const pair = palette[category]
+          if (pair) {
+            color = pair[0]
+            glowColor = pair[1]
+          } else if (["invariants", "preferences", "patterns", "anti-patterns"].includes(category)) {
+            color = "#818cf8"
+            glowColor = "rgba(129, 140, 248, 0.28)"
           }
         } else if (node.type === "thread") {
-          color = "#06b6d4" // thread nodes (cyan)
-          glowColor = "rgba(6, 182, 212, 0.2)"
+          color = "#22d3ee" // cyan — sessions
+          glowColor = "rgba(34, 211, 238, 0.28)"
         } else if (node.type === "research") {
-          color = "#f59e0b" // research nodes (gold)
-          glowColor = "rgba(245, 158, 11, 0.2)"
+          color = "#fbbf24" // amber — research
+          glowColor = "rgba(251, 191, 36, 0.28)"
         }
 
         gradient.addColorStop(0, color)
@@ -598,76 +616,110 @@ export default function Graph3D({
   }
 
   return (
-    <div className="graph-3d-wrapper" ref={containerRef} style={{ position: 'relative', width: '100%', height: '100%', background: 'radial-gradient(circle at center, #0b0f19 0%, #030712 100%)', overflow: 'hidden' }}>
+    <div
+      className="graph-3d-wrapper"
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        background: 'radial-gradient(ellipse at 50% 40%, #0c1a33 0%, #070b14 55%, #030712 100%)',
+        overflow: 'hidden',
+        // Isolate stacking so UI chrome always sits above the canvas
+        isolation: 'isolate',
+      }}
+    >
       
-      {/* 3D Projection Canvas */}
+      {/* 3D Projection Canvas — always under UI chrome */}
       <canvas
         ref={canvasRef}
-        onMouseDown={(e) => handleStartDrag(e.clientX, e.clientY)}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleEndDrag}
-        onMouseLeave={handleEndDrag}
-        onClick={handleCanvasClick}
-        onWheel={handleWheel}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleEndDrag}
-        style={{ cursor: dragging ? "grabbing" : hoveredNode ? "pointer" : "grab", display: "block" }}
+        onMouseDown={interactive ? (e) => handleStartDrag(e.clientX, e.clientY) : undefined}
+        onMouseMove={interactive ? handleMouseMove : undefined}
+        onMouseUp={interactive ? handleEndDrag : undefined}
+        onMouseLeave={interactive ? handleEndDrag : undefined}
+        onClick={interactive ? handleCanvasClick : undefined}
+        onWheel={interactive ? handleWheel : undefined}
+        onTouchStart={interactive ? handleTouchStart : undefined}
+        onTouchMove={interactive ? handleTouchMove : undefined}
+        onTouchEnd={interactive ? handleEndDrag : undefined}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          pointerEvents: interactive ? 'auto' : 'none',
+          cursor: interactive
+            ? dragging
+              ? 'grabbing'
+              : hoveredNode
+                ? 'pointer'
+                : 'grab'
+            : 'default',
+        }}
       />
 
       {/* Cosmic Floating Background Dust overlay */}
-      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'none', background: 'radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 60%)' }} />
+      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none', background: 'radial-gradient(circle at 50% 45%, rgba(59, 130, 246, 0.08) 0%, transparent 55%)' }} />
 
       {/* Floating UI Elements */}
-      <div style={{ position: 'absolute', top: 20, left: 20, display: 'flex', flexDirection: 'column', gap: 6, pointerEvents: 'none' }}>
-        <h3 style={{ margin: 0, fontSize: 18, color: '#fff', fontWeight: 700, letterSpacing: '0.5px' }}>Sovereign Mind Matrix</h3>
-        <p style={{ margin: 0, fontSize: 11, color: 'rgba(255,255,255,0.45)' }}>3D Constellation of Research, Memory & Conversations</p>
+      <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 30, display: 'flex', flexDirection: 'column', gap: 6, pointerEvents: 'none', maxWidth: 280 }}>
+        <h3 style={{ margin: 0, fontSize: 18, color: '#f1f5f9', fontWeight: 700, letterSpacing: '-0.02em' }}>Memory Constellation</h3>
+        <p style={{ margin: 0, fontSize: 11, color: 'rgba(148,163,184,0.85)' }}>Vault · sessions · research — use filters to toggle types</p>
       </div>
 
       {/* Controls Overlay */}
-      <div style={{ position: 'absolute', bottom: 20, left: 20, display: 'flex', gap: 8 }}>
+      {interactive && (
+      <div style={{ position: 'absolute', bottom: 20, left: 20, zIndex: 40, display: 'flex', gap: 8, pointerEvents: 'auto' }}>
         <button 
+          type="button"
           onClick={() => setZoom(prev => Math.min(3.0, prev + 0.2))} 
-          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, color: '#fff', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.85)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 8, color: '#fff', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           title="Zoom In"
         >
           ＋
         </button>
         <button 
+          type="button"
           onClick={() => setZoom(prev => Math.max(0.5, prev - 0.2))} 
-          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, color: '#fff', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.85)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 8, color: '#fff', fontSize: 16, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           title="Zoom Out"
         >
           －
         </button>
         <button 
+          type="button"
           onClick={() => { angleX.current = 0.3; angleY.current = 0.5; setZoom(1.2) }} 
-          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8, color: '#fff', fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+          style={{ width: 32, height: 32, background: 'rgba(15,23,42,0.85)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: 8, color: '#fff', fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           title="Reset Camera"
         >
           ⟲
         </button>
       </div>
+      )}
 
-      {/* Floating Filter Panel (Top Right) */}
+      {/* Floating Filter Panel — left side under title so node drawer (right) never covers it */}
+      {interactive && (
       <div 
-        className="glass"
+        className="glass graph-type-filters"
         style={{ 
           position: 'absolute', 
-          top: 20, 
-          right: 20, 
+          top: 72, 
+          left: 16, 
           display: 'flex', 
           flexDirection: 'column', 
           gap: 10, 
-          background: 'rgba(10, 15, 30, 0.75)', 
+          background: 'rgba(10, 15, 30, 0.92)', 
           backdropFilter: 'blur(20px)',
           WebkitBackdropFilter: 'blur(20px)',
           padding: '12px 16px', 
           borderRadius: 12, 
-          border: '1px solid rgba(255, 255, 255, 0.08)',
-          boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+          border: '1px solid rgba(255, 255, 255, 0.12)',
+          boxShadow: '0 8px 32px rgba(0,0,0,0.45)',
           width: 220,
-          zIndex: 90,
+          zIndex: 60,
+          pointerEvents: 'auto',
         }}
       >
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -680,63 +732,60 @@ export default function Graph3D({
         </div>
         
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          {/* 1. Research Projects */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
-            <input 
-              type="checkbox" 
-              checked={visibleTypes.research} 
+            <input
+              type="checkbox"
+              checked={visibleTypes.research}
               onChange={() => setVisibleTypes(prev => ({ ...prev, research: !prev.research }))}
-              style={{ accentColor: '#f59e0b', cursor: 'pointer' }}
+              style={{ accentColor: '#fbbf24', cursor: 'pointer' }}
             />
-            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#f59e0b' }} />
-            <span style={{ flex: 1 }}>Research Projects</span>
+            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#fbbf24', boxShadow: '0 0 6px rgba(251,191,36,0.5)' }} />
+            <span style={{ flex: 1 }}>Research</span>
             <span style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>({researchItems.length})</span>
           </label>
 
-          {/* 2. Observations & Facts */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
-            <input 
-              type="checkbox" 
-              checked={visibleTypes.observations} 
+            <input
+              type="checkbox"
+              checked={visibleTypes.observations}
               onChange={() => setVisibleTypes(prev => ({ ...prev, observations: !prev.observations }))}
-              style={{ accentColor: '#8b5cf6', cursor: 'pointer' }}
+              style={{ accentColor: '#60a5fa', cursor: 'pointer' }}
             />
-            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#8b5cf6' }} />
-            <span style={{ flex: 1 }}>Observations</span>
+            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#60a5fa', boxShadow: '0 0 6px rgba(96,165,250,0.5)' }} />
+            <span style={{ flex: 1 }}>Memory</span>
             <span style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>
               ({memoryNodes.filter(m => !['invariants', 'preferences', 'patterns', 'anti-patterns'].includes((m.category || 'general').toLowerCase())).length})
             </span>
           </label>
 
-          {/* 3. Developer Rules */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
-            <input 
-              type="checkbox" 
-              checked={visibleTypes.rules} 
+            <input
+              type="checkbox"
+              checked={visibleTypes.rules}
               onChange={() => setVisibleTypes(prev => ({ ...prev, rules: !prev.rules }))}
-              style={{ accentColor: '#6366f1', cursor: 'pointer' }}
+              style={{ accentColor: '#38bdf8', cursor: 'pointer' }}
             />
-            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#6366f1' }} />
-            <span style={{ flex: 1 }}>Developer Rules</span>
+            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: 'linear-gradient(90deg,#38bdf8,#f87171)', boxShadow: '0 0 6px rgba(56,189,248,0.4)' }} />
+            <span style={{ flex: 1 }}>Rules</span>
             <span style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>
               ({memoryNodes.filter(m => ['invariants', 'preferences', 'patterns', 'anti-patterns'].includes((m.category || 'general').toLowerCase())).length})
             </span>
           </label>
 
-          {/* 4. Chat Threads */}
           <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--text-secondary)', cursor: 'pointer', userSelect: 'none' }}>
-            <input 
-              type="checkbox" 
-              checked={visibleTypes.threads} 
+            <input
+              type="checkbox"
+              checked={visibleTypes.threads}
               onChange={() => setVisibleTypes(prev => ({ ...prev, threads: !prev.threads }))}
-              style={{ accentColor: '#06b6d4', cursor: 'pointer' }}
+              style={{ accentColor: '#22d3ee', cursor: 'pointer' }}
             />
-            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#06b6d4' }} />
-            <span style={{ flex: 1 }}>Conversations</span>
+            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#22d3ee', boxShadow: '0 0 6px rgba(34,211,238,0.5)' }} />
+            <span style={{ flex: 1 }}>Sessions</span>
             <span style={{ fontSize: 9, color: 'var(--text-tertiary)' }}>({threads.length})</span>
           </label>
         </div>
       </div>
+      )}
 
       {/* Selected Node Glass detail overlay drawer */}
       {selectedNode && (

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: unknown[];
+  claudeModels: unknown[];
+  openaiModels: unknown[];
+}
+
+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>
+  );
+};

package/frontend/src/components/brand/BrandMark.tsx

@@ -0,0 +1,95 @@
+/** Official Total Recall brand marks from portfolio-site assets/logos. */
+
+export type BrandVariant = 'lockup' | 'icon' | 'badge' | 'mark'
+
+interface BrandMarkProps {
+  variant?: BrandVariant
+  /** Height in px (width auto). */
+  height?: number
+  className?: string
+  alt?: string
+  /** Light plate behind lockup for dark surfaces (PNG has white bg). */
+  plate?: boolean
+}
+
+const SRC: Record<BrandVariant, string> = {
+  lockup: '/brand/total-recall-lockup.png',
+  icon: '/brand/total-recall-icon.svg',
+  badge: '/brand/total-recall-badge.jpg',
+  mark: '/brand/total-recall-mark.svg',
+}
+
+export default function BrandMark({
+  variant = 'lockup',
+  height = 40,
+  className = '',
+  alt = 'Total Recall',
+  plate = false,
+}: BrandMarkProps) {
+  const isSquare = variant === 'icon' || variant === 'badge' || variant === 'mark'
+  const img = (
+    <img
+      src={SRC[variant]}
+      alt={alt}
+      height={height}
+      width={isSquare ? height : undefined}
+      className={className}
+      style={{
+        height,
+        width: isSquare ? height : 'auto',
+        maxWidth: '100%',
+        objectFit: 'contain',
+        display: 'block',
+      }}
+      draggable={false}
+    />
+  )
+
+  if (!plate) return img
+
+  return (
+    <div
+      className="brand-plate"
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: variant === 'lockup' ? '10px 14px' : 8,
+        borderRadius: variant === 'lockup' ? 14 : 16,
+        background: 'linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%)',
+        boxShadow:
+          '0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(148,163,184,0.25)',
+      }}
+    >
+      {img}
+    </div>
+  )
+}
+
+/** Compact cube-style brand chip for nav / floating chrome. */
+export function BrandChip({ size = 36 }: { size?: number }) {
+  return (
+    <div
+      className="brand-chip"
+      style={{
+        width: size,
+        height: size,
+        borderRadius: Math.round(size * 0.28),
+        overflow: 'hidden',
+        flexShrink: 0,
+        boxShadow:
+          '0 0 0 1px rgba(96,165,250,0.35), 0 8px 24px rgba(37,99,235,0.25)',
+        background: 'linear-gradient(145deg, #1e3a8a, #0b1220)',
+      }}
+    >
+      <img
+        src="/brand/total-recall-icon.svg"
+        alt=""
+        width={size}
+        height={size}
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        draggable={false}
+      />
+    </div>
+  )
+}