Merge branch 'claude/vibrant-austin-0gQm9': scalability hardening for 1M users

https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW

Author: claude

src/components/DashboardViews/UsageView.tsx

@@ -95,6 +95,7 @@ export default function UsageView({ isDark = true, hasAccess = false }: { isDark
     const billingApiBase = supabaseUrl ? `${supabaseUrl}/functions/v1/api-billing` : null;
 
     const [liveCredits, setLiveCredits] = useState<number | null>(null);
+    const [liveTotalCredits, setLiveTotalCredits] = useState<number | null>(null);
     const [isRedeeming, setIsRedeeming] = useState(false);
     const [redeemCode, setRedeemCode] = useState('');
     const [redeemMessage, setRedeemMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
@@ -113,6 +114,7 @@ export default function UsageView({ isDark = true, hasAccess = false }: { isDark
             if (res.ok) {
                 const data = await res.json();
                 setLiveCredits(Number(data.balance));
+                if (data.total_credits != null) setLiveTotalCredits(Number(data.total_credits));
             }
         } catch (e) {
             console.error('Failed to fetch live balance', e);
@@ -183,8 +185,9 @@ export default function UsageView({ isDark = true, hasAccess = false }: { isDark
         const fallbackCreditsRemaining = Math.max(0, TOTAL_CREDITS - totalCreditsUsed);
 
         const creditsRemaining = liveCredits !== null ? liveCredits : fallbackCreditsRemaining;
+        const effectiveTotal = liveTotalCredits ?? TOTAL_CREDITS;
         const creditsUsedPercent = liveCredits !== null
-            ? ((TOTAL_CREDITS - creditsRemaining) / TOTAL_CREDITS) * 100
+            ? Math.max(0, ((effectiveTotal - creditsRemaining) / effectiveTotal) * 100)
             : (totalCreditsUsed / TOTAL_CREDITS) * 100;
 
         return {

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/components/Legal/Security.tsx

@@ -566,7 +566,7 @@ For security-related inquiries and incident reporting:
 
 Primary Security Contact:
     Email: security@clerktree.com
-    Phone: +1-XXX-XXX-XXXX (24/7 security hotline)
+    Response: 24/7 security response via email above
     PGP Key: Available on our security page
 
 Chief Information Security Officer (CISO):

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 = {

src/pages/DemoDashboard.tsx

@@ -216,7 +216,7 @@ function DemoDashboardContent() {
                   {activeTab === 'billing' && <BillingView isDark={isDark} hasAccess={hasAccess} />}
                   {activeTab === 'keys' && <KeysView isDark={isDark} hasAccess={hasAccess} />}
                   {activeTab === 'team' && <TeamView isDark={isDark} />}
-{activeTab === 'integrations' && <IntegrationView isDark={isDark} />}
+                  {activeTab === 'integrations' && <IntegrationView isDark={isDark} />}
                   {activeTab === 'activity_log' && <ActivityLogView isDark={isDark} />}
                   {activeTab === 'webhooks' && <WebhooksView isDark={isDark} />}
                   {activeTab === 'settings' && <SettingsView isDark={isDark} />}