Implement live notifications for all user-facing events

claude · claude · commit 8e1fe3b04929 · 2026-03-24T04:20:03.000Z
Replace hardcoded/empty notifications with real end-to-end triggers across the full stack. ## Backend (Supabase edge functions) _shared/notify.ts — shared insertNotification() helper used by all edge functions; fire-and-forget, never throws, single INSERT per event. api-notifications — add POST /create endpoint so the frontend can create notifications for client-side events with auth verification. api-billing — notify on: - Payment successful (credits added, new balance) - Payment failed (signature verification failure) - Promo code redeemed (credits added) api-team — notify on: - Team member invited (email + role) - Team member role updated - Team member removed (fetches email before delete) api-keys — notify on: - API key created (name, security reminder) - API key revoked (fetches name before delete) playbooks — notify on: - Playbooks generated (count of templates created) ## Frontend notificationService.ts — thin wrapper around api-notifications/create with module-level token cache; fire-and-forget, never throws. NotificationCenter — replace 30s setInterval polling with Supabase Realtime subscription (user-scoped filter: user_id=eq.{uid}). INSERT events increment badge and prepend notification to open list instantly. DELETE events remove from list. Eliminates 33K req/s at 1M users from polling. DemoCallContext — notify on: - Call completed (caller name, duration, follow-up flag) - Knowledge base saved (after successful Supabase upsert) SettingsView — notify on: - Profile updated - Data export downloaded - Account deletion scheduled https://claude.ai/code/session_01SGdxNUC1TVMDtW73TZbxjW
diff --git a/src/components/DashboardViews/NotificationCenter.tsx b/src/components/DashboardViews/NotificationCenter.tsx
@@ -101,11 +101,54 @@ export default function NotificationCenter({ isDark, className }: NotificationCe
     }
   }, [apiCall]);
 
-  // Poll unread count
+  // Subscribe to new notifications via Realtime (replaces 30s polling)
+  // User-scoped filter ensures each user only receives their own events —
+  // critical at 1M-user scale to avoid O(N²) broadcast fan-out.
   useEffect(() => {
     fetchUnreadCount();
-    const interval = setInterval(fetchUnreadCount, 30000);
-    return () => clearInterval(interval);
+
+    let channel: ReturnType<typeof supabase.channel> | null = null;
+
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      if (!session?.user?.id) return;
+
+      channel = supabase
+        .channel(`notifications_${session.user.id}`)
+        .on(
+          'postgres_changes',
+          {
+            event: 'INSERT',
+            schema: 'public',
+            table: 'notifications',
+            filter: `user_id=eq.${session.user.id}`,
+          },
+          (payload) => {
+            // Increment badge immediately
+            setUnreadCount(prev => prev + 1);
+            // If dropdown is open, prepend the new notification
+            if (payload.new) {
+              setNotifications(prev => [payload.new as NotificationEntry, ...prev]);
+            }
+          }
+        )
+        .on(
+          'postgres_changes',
+          {
+            event: 'DELETE',
+            schema: 'public',
+            table: 'notifications',
+            filter: `user_id=eq.${session.user.id}`,
+          },
+          (payload) => {
+            setNotifications(prev => prev.filter(n => n.id !== (payload.old as { id: string }).id));
+          }
+        )
+        .subscribe();
+    });
+
+    return () => {
+      if (channel) supabase.removeChannel(channel);
+    };
   }, [fetchUnreadCount]);
 
   // Fetch full list when opened
diff --git a/src/components/DashboardViews/SettingsView.tsx b/src/components/DashboardViews/SettingsView.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
+import { createNotification } from '../../services/notificationService';
 import {
   User, Building2, Phone as PhoneIcon, Globe, Shield, Download, Trash2,
   Loader2, Save, Check, AlertCircle, Bell, Mail, Smartphone, ChevronRight,
@@ -177,6 +178,13 @@ export default function SettingsView({ isDark }: SettingsViewProps) {
       });
       setSaved(true);
       setTimeout(() => setSaved(false), 2000);
+      void createNotification({
+        type: 'success',
+        title: 'Profile updated',
+        message: 'Your profile changes have been saved.',
+        category: 'system',
+        action_url: '/dashboard?tab=settings',
+      });
     } catch (err) {
       console.error('[SettingsView] save error:', err);
     } finally {
@@ -204,6 +212,12 @@ export default function SettingsView({ isDark }: SettingsViewProps) {
       a.download = `clerktree-export-${new Date().toISOString().slice(0, 10)}.json`;
       a.click();
       URL.revokeObjectURL(url);
+      void createNotification({
+        type: 'success',
+        title: 'Data export ready',
+        message: 'Your account data has been downloaded.',
+        category: 'system',
+      });
     } catch (err) {
       console.error('[SettingsView] export error:', err);
     } finally {
@@ -215,6 +229,12 @@ export default function SettingsView({ isDark }: SettingsViewProps) {
     try {
       await apiCall('account', { method: 'DELETE' });
       setDeleteConfirm(false);
+      void createNotification({
+        type: 'warning',
+        title: 'Account deletion scheduled',
+        message: 'Your account will be deleted. Check your email for confirmation.',
+        category: 'security',
+      });
       alert('Account deletion has been scheduled. You will receive a confirmation email.');
     } catch (err) {
       console.error('[SettingsView] delete error:', err);
diff --git a/src/contexts/DemoCallContext.tsx b/src/contexts/DemoCallContext.tsx
@@ -5,6 +5,7 @@ import { useAuth } from './AuthContext';
 import { DEFAULT_VOICE_ID, normalizeVoiceId } from '../config/voiceConfig';
 import type { RescueEngineSettings, RescuePlaybookTemplate } from '../types/rescuePlaybook';
 import { DEFAULT_RESCUE_PLAYBOOKS, DEFAULT_RESCUE_SETTINGS } from '../types/rescuePlaybook';
+import { createNotification } from '../services/notificationService';
 
 // Types for dynamic context extraction
 export interface ExtractedField {
@@ -667,6 +668,13 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
         console.warn('Supabase save failed (localStorage still saved):', error.message);
       } else {
         console.log('✅ Saved knowledge base to Supabase for user:', userId);
+        void createNotification({
+          type: 'success',
+          title: 'Knowledge base saved',
+          message: 'Your AI agent configuration has been updated.',
+          category: 'system',
+          action_url: '/dashboard?tab=knowledge-base',
+        });
       }
 
       return true;
@@ -1039,6 +1047,15 @@ export function DemoCallProvider({ children, initialAgentId }: { children: React
           ));
           console.log('📝 Call history updated with summary:', historyId);
 
+          // Notify user that the call summary is ready
+          void createNotification({
+            type: finalSummary.followUpRequired ? 'warning' : 'success',
+            title: 'Call completed',
+            message: `${callerName !== 'Unknown Caller' ? callerName + ' · ' : ''}${Math.floor(duration / 60)}m ${duration % 60}s${finalSummary.followUpRequired ? ' · Follow-up required' : ''}`,
+            category: 'calls',
+            action_url: '/dashboard?tab=history',
+          });
+
           // Save to Supabase
           try {
             // Build base payload
diff --git a/src/services/notificationService.ts b/src/services/notificationService.ts
@@ -0,0 +1,69 @@
+/**
+ * Frontend notification service.
+ *
+ * Calls the api-notifications/create edge function to insert a notification
+ * for the currently authenticated user. Used for events that originate on
+ * the client side (call ended, knowledge base saved, settings updated, etc.).
+ *
+ * Fire-and-forget: never throws — errors are silently logged so a failed
+ * notification never disrupts the user action that triggered it.
+ */
+
+import { supabase } from '../config/supabase';
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+export type NotificationCategory = 'billing' | 'team' | 'security' | 'calls' | 'system';
+
+export interface CreateNotificationPayload {
+  type: NotificationType;
+  title: string;
+  message?: string;
+  category: NotificationCategory;
+  action_url?: string;
+}
+
+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 getToken(): Promise<string | null> {
+  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;
+}
+
+/**
+ * Create a notification for the authenticated user.
+ * Safe to fire-and-forget: `void createNotification(...)`.
+ */
+export async function createNotification(payload: CreateNotificationPayload): Promise<void> {
+  try {
+    const token = await getToken();
+    if (!token) return; // Not authenticated — skip silently
+
+    const res = await fetch(
+      `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/api-notifications/create`,
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      }
+    );
+
+    if (!res.ok) {
+      console.warn('[notificationService] create failed:', res.status);
+    }
+  } catch (err) {
+    console.warn('[notificationService] error:', err);
+  }
+}
diff --git a/supabase/functions/_shared/notify.ts b/supabase/functions/_shared/notify.ts
@@ -0,0 +1,52 @@
+/**
+ * Shared notification helper for Supabase edge functions.
+ *
+ * Usage (from any edge function):
+ *   import { insertNotification } from '../_shared/notify.ts';
+ *   await insertNotification(adminClient, userId, {
+ *     type: 'success',
+ *     title: 'Payment successful',
+ *     message: '500 credits added to your account.',
+ *     category: 'billing',
+ *   });
+ *
+ * Fire-and-forget — never throws, errors are logged only.
+ * Designed for 1M-user scale: single INSERT per event, user-scoped.
+ */
+
+import { SupabaseClient } from "jsr:@supabase/supabase-js@2";
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+export type NotificationCategory = 'billing' | 'team' | 'security' | 'calls' | 'system';
+
+export interface NotificationPayload {
+  type: NotificationType;
+  title: string;
+  message?: string;
+  category: NotificationCategory;
+  action_url?: string;
+}
+
+/**
+ * Insert a notification row for a user. Never throws — safe to await anywhere.
+ */
+export async function insertNotification(
+  adminClient: SupabaseClient,
+  userId: string,
+  payload: NotificationPayload,
+): Promise<void> {
+  try {
+    const { error } = await adminClient.from('notifications').insert({
+      user_id: userId,
+      type: payload.type,
+      title: payload.title,
+      message: payload.message ?? '',
+      category: payload.category,
+      action_url: payload.action_url ?? null,
+      is_read: false,
+    });
+    if (error) console.error('[notify] insert error:', error.message);
+  } catch (err) {
+    console.error('[notify] unexpected error:', err);
+  }
+}
diff --git a/supabase/functions/api-billing/index.ts b/supabase/functions/api-billing/index.ts
@@ -1,5 +1,6 @@
 import "jsr:@supabase/functions-js/edge-runtime.d.ts";
 import { createClient } from "jsr:@supabase/supabase-js@2";
+import { insertNotification } from "../_shared/notify.ts";
 
 const corsBaseHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
@@ -251,6 +252,14 @@ Deno.serve(async (req: Request) => {
       if (error) throw error;
       if (!data.success) throw new Error(data.message);
 
+      await insertNotification(adminClient, user.id, {
+        type: 'success',
+        title: 'Credits redeemed',
+        message: `${data.added_amount} credits added to your account via promo code.`,
+        category: 'billing',
+        action_url: '/dashboard?tab=billing',
+      });
+
       return jsonResponse(req, 200, { message: data.message, added_amount: data.added_amount });
     }
 
@@ -315,6 +324,13 @@ Deno.serve(async (req: Request) => {
           credits_added: 0,
         }).catch((err: unknown) => console.error('[api-billing] failed to record failed payment:', err));
 
+        await insertNotification(adminClient, user.id, {
+          type: 'error',
+          title: 'Payment failed',
+          message: 'We could not verify your payment. No credits were added. Please try again.',
+          category: 'billing',
+          action_url: '/dashboard?tab=billing',
+        });
         return jsonResponse(req, 400, { error: 'Invalid signature. Payment could not be verified.' });
       }
 
@@ -384,6 +400,14 @@ Deno.serve(async (req: Request) => {
         credits_added: creditsToAdd,
       }).catch((err: unknown) => console.error('[api-billing] failed to record payment history:', err));
 
+      await insertNotification(adminClient, user.id, {
+        type: 'success',
+        title: 'Payment successful',
+        message: `${creditsToAdd} credits added to your account (${derivedPlan} plan).${newBalance !== null ? ` New balance: ${newBalance} credits.` : ''}`,
+        category: 'billing',
+        action_url: '/dashboard?tab=billing',
+      });
+
       return jsonResponse(req, 200, {
         success: true,
         plan: derivedPlan,
diff --git a/supabase/functions/api-keys/index.ts b/supabase/functions/api-keys/index.ts
@@ -1,5 +1,6 @@
 import "jsr:@supabase/functions-js/edge-runtime.d.ts";
 import { createClient } from "jsr:@supabase/supabase-js@2";
+import { insertNotification } from "../_shared/notify.ts";
 
 const corsBaseHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
@@ -163,6 +164,14 @@ Deno.serve(async (req: Request) => {
 
       if (error) throw error;
 
+      await insertNotification(adminClient, user.id, {
+        type: 'success',
+        title: 'API key created',
+        message: `New API key "${name}" is now active. Store it securely — it won't be shown again.`,
+        category: 'security',
+        action_url: '/dashboard?tab=api-keys',
+      });
+
       // Return the full token only on creation (never again)
       return jsonResponse(req, 201, { key: data });
     }
@@ -174,6 +183,14 @@ Deno.serve(async (req: Request) => {
         return jsonResponse(req, 400, { error: 'Missing key id.' });
       }
 
+      // Fetch name before deleting for the notification message
+      const { data: keyToRevoke } = await adminClient
+        .from('user_api_keys')
+        .select('name')
+        .eq('id', keyId)
+        .eq('user_id', user.id)
+        .maybeSingle();
+
       const { error } = await adminClient
         .from('user_api_keys')
         .delete()
@@ -182,6 +199,14 @@ Deno.serve(async (req: Request) => {
 
       if (error) throw error;
 
+      await insertNotification(adminClient, user.id, {
+        type: 'warning',
+        title: 'API key revoked',
+        message: keyToRevoke?.name ? `API key "${keyToRevoke.name}" has been permanently revoked.` : 'An API key has been revoked.',
+        category: 'security',
+        action_url: '/dashboard?tab=api-keys',
+      });
+
       return jsonResponse(req, 200, { success: true });
     }
 
diff --git a/supabase/functions/api-notifications/index.ts b/supabase/functions/api-notifications/index.ts
diff --git a/supabase/functions/api-team/index.ts b/supabase/functions/api-team/index.ts
diff --git a/supabase/functions/playbooks/index.ts b/supabase/functions/playbooks/index.ts
