Scalability hardening: secure API keys, fix O(N²) realtime, cache auth token, reduce polling

CRITICAL-1 — Move PAGEINDEX and GROQ keys server-side
- Create supabase/functions/api-page-index edge function to proxy all
  PageIndex and Groq calls, reading keys from Deno env (never in bundle)
- Rewrite pageIndexService.ts to call the edge function via Supabase auth;
  remove VITE_PAGEINDEX_API_KEY and VITE_GROQ_API_KEY from frontend

HIGH-1 — Scope active_sessions Realtime channel to current user
- Add filter `user_id=eq.${user.id}` to postgres_changes subscription
- Prevents O(N²) fan-out where 1M users receive every other user's events
- Also add fetchActiveSessions to the cleanup interval so global count
  stays fresh via periodic polling when other users' sessions change

HIGH-2 — Paginate initial call_history fetch
- Add .limit(50) to the Supabase query; prevents loading 10–50 MB of JSON
  into browser memory for users with large call histories

HIGH-3 — Cache Supabase auth token in api.ts interceptor
- Module-level token + expiry cache; skips getSession() when token is fresh
- Invalidated immediately via onAuthStateChange; re-fetched only when
  <60 s from expiry — eliminates 1M auth reads/s at peak load

MEDIUM-1 — Remove 30 s KnowledgeBase polling
- setInterval(testConnection, 30000) fired 33 K req/s at 1M users
- Replaced with single on-mount check; button remains for manual re-test

MEDIUM-2 — Throttle mousemove handlers via requestAnimationFrame
- MousePosition.tsx and useMouseGradient.ts both fired setState on every
  raw mousemove (60+ Hz); wrapped in rAF to cap at display refresh rate

MEDIUM-3 — Add jitter to token refresh interval
- Fixed 60 s interval caused thundering herd (16 K Supabase auth hits/min)
- Added Math.random() * 30_000 ms jitter to spread load across time

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

Author: claude

src/components/DemoCall/KnowledgeBase.tsx

@@ -199,8 +199,6 @@ export default function KnowledgeBase({ isDark = true, activeSection }: Knowledg
 
   useEffect(() => {
     testConnection();
-    const interval = setInterval(testConnection, 30000);
-    return () => clearInterval(interval);
   }, []);
 
   // Update local state and context

src/components/Landing/Particles/MousePosition.tsx

@@ -12,12 +12,19 @@ export function useMousePosition(): MousePosition {
   });
 
   useEffect(() => {
+    let rafId: number;
     const handleMouseMove = (event: MouseEvent) => {
-      setMousePosition({ x: event.clientX, y: event.clientY });
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        setMousePosition({ x: event.clientX, y: event.clientY });
+      });
     };
 
     window.addEventListener("mousemove", handleMouseMove);
-    return () => window.removeEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      cancelAnimationFrame(rafId);
+    };
   }, []);
 
   return mousePosition;

src/config/api.ts

@@ -17,13 +17,35 @@ const api = axios.create({
   withCredentials: true, // Important for cookies/sessions
 });
 
+// ── Token cache — avoids a Supabase auth read on every request ───────────────
+// At scale (1M users × N requests/s) calling getSession() per request is
+// prohibitively expensive. Cache the token and only refresh when near expiry.
+let _cachedToken: string | null = null;
+let _tokenExpiry = 0;
+
+supabase.auth.onAuthStateChange((_event, session) => {
+  _cachedToken = session?.access_token ?? null;
+  _tokenExpiry = session ? session.expires_at! * 1000 : 0;
+});
+
+async function getCachedToken(): Promise<string | null> {
+  // Return cached token if it won't expire in the next 60 seconds
+  if (_cachedToken && Date.now() < _tokenExpiry - 60_000) return _cachedToken;
+  try {
+    const { data: { session } } = await supabase.auth.getSession();
+    _cachedToken = session?.access_token ?? null;
+    _tokenExpiry = session ? session.expires_at! * 1000 : 0;
+  } catch {
+    _cachedToken = null;
+  }
+  return _cachedToken;
+}
+
 // Inject Supabase auth token into every request
 api.interceptors.request.use(async (config) => {
   try {
-    const { data: { session } } = await supabase.auth.getSession();
-    if (session?.access_token) {
-      config.headers.Authorization = `Bearer ${session.access_token}`;
-    }
+    const token = await getCachedToken();
+    if (token) config.headers.Authorization = `Bearer ${token}`;
   } catch {
     // Silently proceed without token if auth check fails
   }

src/contexts/DemoCallContext.tsx

@@ -379,7 +379,8 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
           .from('call_history')
           .select('*')
           .eq('user_id', user.id)
-          .order('date', { ascending: false });
+          .order('date', { ascending: false })
+          .limit(50);
 
         if (!historyError && historyData && historyData.length > 0) {
           // Map Supabase snake_case to app camelCase
@@ -582,9 +583,9 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
     // Initial cleanup then fetch
     cleanupStaleSessions().then(() => fetchActiveSessions());
 
-    // Periodically cleanup stale sessions every minute
+    // Periodically cleanup stale sessions and refresh global count every minute
     const cleanupInterval = setInterval(() => {
-      cleanupStaleSessions();
+      cleanupStaleSessions().then(() => fetchActiveSessions());
     }, 60 * 1000);
 
     // Subscribe to changes (debounced to avoid UI thrashing under high load)
@@ -597,10 +598,10 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
     };
 
     const subscription = supabase
-      .channel('active_sessions_changes')
+      .channel('active_sessions_global_count')
       .on(
         'postgres_changes',
-        { event: '*', schema: 'public', table: 'active_sessions' },
+        { event: '*', schema: 'public', table: 'active_sessions', filter: `user_id=eq.${user?.id ?? ''}` },
         (payload) => {
           console.log('📡 Active sessions change:', payload.eventType);
           debouncedFetch();
@@ -817,7 +818,9 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
       }
     };
     updateToken();
-    const interval = setInterval(updateToken, 60000); // Refresh every 60s
+    // Jitter prevents 1M sessions all refreshing at the same wall-clock second
+    const jitter = Math.random() * 30_000; // 0–30s random offset
+    const interval = setInterval(updateToken, 60_000 + jitter);
     return () => clearInterval(interval);
   }, []);
 

src/hooks/useMouseGradient.ts

@@ -9,14 +9,21 @@ export function useMouseGradient() {
   const [mousePosition, setMousePosition] = useState<MousePosition>({ x: 0, y: 0 });
 
   useEffect(() => {
+    let rafId: number;
     const handleMouseMove = (e: MouseEvent) => {
-      const x = (e.clientX / window.innerWidth) * 100;
-      const y = (e.clientY / window.innerHeight) * 100;
-      setMousePosition({ x, y });
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const x = (e.clientX / window.innerWidth) * 100;
+        const y = (e.clientY / window.innerHeight) * 100;
+        setMousePosition({ x, y });
+      });
     };
 
     window.addEventListener('mousemove', handleMouseMove);
-    return () => window.removeEventListener('mousemove', handleMouseMove);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      cancelAnimationFrame(rafId);
+    };
   }, []);
 
   const gradientStyle = {