feat: SaaS analytics infrastructure — PostHog events, feature flags, surveys, billing, referral, edge functions

- Add WAITLIST_JOINED and UPGRADE_LIMIT_HIT analytics events
- Wire events into ProComingSoonPage and VisualizerApp
- Dynamic anonymous viz limit via PostHog feature flag
- Add posthog-js mock to test setup
- 6 PostHog feature flags (anon-viz-limit, onboarding, upgrade-modal, waitlist-social-proof, recommendations, referral)
- 4 PostHog surveys (exit, feature-request, NPS, pro-interest)
- DB migrations: user_sessions, billing_subscriptions, referrals
- Edge functions: sync-contacts (Resend), lemonqueezy-webhook (billing)
- CSP updates for LemonSqueezy domains
- Supabase MCP deploys for both new edge functions

Author: ayoub3bidi

public/_headers

@@ -5,7 +5,7 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=(), identity-credentials-get=(self "https://accounts.google.com")
   # Pyodide CDN origins: jsDelivr below; custom VITE_PYODIDE_CDN_BASE origins appended at build (vite.config.js)
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://*.posthog.com https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://*.posthog.com https://e.bayanflow.com https://e.dev.bayanflow.com https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://*.posthog.com https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com https://app.lemonsqueezy.com; connect-src 'self' blob: https://*.posthog.com https://e.bayanflow.com https://e.dev.bayanflow.com https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com https://api.lemonsqueezy.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com https://app.lemonsqueezy.com; object-src 'none'; base-uri 'self'; form-action 'self'
   Link: <https://bayanflow.com/sitemap.xml>; rel="sitemap"
   Link: </.well-known/api-catalog>; rel="api-catalog"
   Link: </.well-known/agent-card.json>; rel="service-desc"

scripts/cspHeaders.js

@@ -173,3 +173,36 @@ export function assertAuthCspDirectives(csp, source) {
 
   return { connectSrc: connectSrc ?? '', imgSrc: imgSrc ?? '' };
 }
+
+/**
+ * Assert CSP directives required for LemonSqueezy billing integration.
+ * @param {string} csp
+ * @param {string} source - Label for error messages (e.g. "public/_headers")
+ * @returns {{ scriptSrc: string; connectSrc: string; frameSrc: string }}
+ */
+export function assertBillingCspDirectives(csp, source) {
+  const directives = parseCspDirectives(csp);
+
+  const scriptSrc = directives.get('script-src') ?? '';
+  if (!scriptSrc.includes('https://app.lemonsqueezy.com')) {
+    throw new Error(
+      `${source}: script-src must include https://app.lemonsqueezy.com (LemonSqueezy checkout)`
+    );
+  }
+
+  const connectSrc = directives.get('connect-src') ?? '';
+  if (!connectSrc.includes('https://api.lemonsqueezy.com')) {
+    throw new Error(
+      `${source}: connect-src must include https://api.lemonsqueezy.com (LemonSqueezy API)`
+    );
+  }
+
+  const frameSrc = directives.get('frame-src') ?? '';
+  if (!frameSrc.includes('https://app.lemonsqueezy.com')) {
+    throw new Error(
+      `${source}: frame-src must include https://app.lemonsqueezy.com (LemonSqueezy checkout overlay)`
+    );
+  }
+
+  return { scriptSrc, connectSrc, frameSrc };
+}

src/contexts/AuthProvider.jsx

@@ -18,9 +18,31 @@ import {
 import { AuthContext } from './AuthContextDefinition';
 import { identifyUser, resetUser } from '../services/analytics';
 import { trackSignInCompleted } from '../services/analyticsEvents';
+import { getSupabaseClient } from '@/lib/supabaseClient';
 
 /** @typedef {'account_banned' | null} AccessBlockReason */
 
+/**
+ * Sync user contact to Resend for email automation (fire-and-forget).
+ * @param {object} user
+ * @param {object} profile
+ */
+function syncContactToResend(user, profile) {
+  const supabase = getSupabaseClient();
+  if (!supabase) return;
+
+  void supabase.functions.invoke('sync-contacts', {
+    method: 'POST',
+    body: {
+      email: user.email,
+      userId: user.id,
+      plan: profile?.plan || 'free',
+      displayName: profile?.displayName || '',
+      language: document.documentElement.lang,
+    },
+  });
+}
+
 /**
  * @param {import('@supabase/supabase-js').User | null} user
  * @param {Awaited<ReturnType<typeof getProfile>>} profileRow
@@ -194,6 +216,11 @@ export function AuthProvider({ children }) {
             plan: null,
           });
           trackSignInCompleted();
+          syncContactToResend(nextSession.user, {
+            displayName:
+              nextSession.user.user_metadata?.full_name ||
+              nextSession.user.user_metadata?.name,
+          });
         }
 
         if (event === 'SIGNED_OUT') {

src/pages/ProComingSoonPage.jsx

@@ -27,6 +27,7 @@ import {
   joinWaitlist,
   readStoredWaitlistEmail,
 } from '@/services/waitlistService';
+import { trackWaitlistJoined } from '@/services/analyticsEvents';
 
 const FEATURE_ITEMS = [
   { key: 'customInput', Icon: Sliders },
@@ -104,6 +105,7 @@ function ProComingSoonPage() {
     if (result.status === 'joined') {
       setPosition(result.position ?? null);
       setSubmitState('success');
+      trackWaitlistJoined(source, result.position);
       return;
     }
 

src/pages/VisualizerApp.jsx

@@ -83,6 +83,7 @@ import {
   trackInsightPanelOpened,
   trackVideoExportStarted,
   trackCategoryChanged,
+  trackUpgradeLimitHit,
 } from '../services/analyticsEvents';
 
 const SOUND_PREFERENCE_STORAGE_KEY = 'bayan-flow:sound-enabled';
@@ -418,6 +419,7 @@ function App() {
   /** Play handler with session limit check for anonymous users */
   const handlePlay = () => {
     if (!canRunVisualization(user)) {
+      trackUpgradeLimitHit(ANONYMOUS_VISUALIZATION_LIMIT);
       openGatedFeature('session_limit', {
         limit: ANONYMOUS_VISUALIZATION_LIMIT,
       });

src/security/cspHeaders.test.js

@@ -12,6 +12,7 @@ import {
   assertAnalyticsCspDirectives,
   assertAuthCspDirectives,
   assertVideoExportCspDirectives,
+  assertBillingCspDirectives,
   extractCspFromHeadersFile,
   parseCspDirectives,
 } from '../../scripts/cspHeaders.js';
@@ -45,4 +46,8 @@ describe('CSP security headers', () => {
   it('public/_headers allows PostHog analytics', () => {
     assertAnalyticsCspDirectives(headersCsp, 'public/_headers');
   });
+
+  it('public/_headers allows LemonSqueezy billing', () => {
+    assertBillingCspDirectives(headersCsp, 'public/_headers');
+  });
 });

src/services/analytics.js

@@ -44,6 +44,7 @@ export function initPostHog() {
     api_host: host,
     ui_host: 'https://us.posthog.com',
     defaults: '2026-05-30',
+    capture_pageview: 'history_change',
     autocapture: false,
     disable_surveys: true,
     capture_performance: true,

src/services/analyticsEvents.js

@@ -70,6 +70,12 @@ export const UPGRADE_MODAL_VIEWED = 'upgrade_modal_viewed';
 /** Upgrade button clicked */
 export const UPGRADE_CLICKED = 'upgrade_clicked';
 
+/** Waitlist form submitted successfully */
+export const WAITLIST_JOINED = 'waitlist_joined';
+
+/** Anonymous user hit visualization limit (sign-in prompt triggered) */
+export const UPGRADE_LIMIT_HIT = 'upgrade_limit_hit';
+
 // ─── Navigation ───────────────────────────────────────────────────────────────
 
 /** Category tab changed */
@@ -256,3 +262,20 @@ export function trackCategoryChanged(fromCategory, toCategory) {
     to_category: toCategory,
   });
 }
+
+/**
+ * Capture a waitlist joined event.
+ * @param {string} source
+ * @param {number} [position]
+ */
+export function trackWaitlistJoined(source, position) {
+  captureEvent(WAITLIST_JOINED, { source, position });
+}
+
+/**
+ * Capture an upgrade limit hit event (anonymous viz limit reached).
+ * @param {number} limit
+ */
+export function trackUpgradeLimitHit(limit) {
+  captureEvent(UPGRADE_LIMIT_HIT, { limit });
+}

src/services/entitlementService.js

@@ -13,12 +13,28 @@ import {
   PRO_TIER_FAVORITE_SLOT_LIMIT,
 } from '@/constants/personalLearning';
 import { DEFAULT_VIDEO_WATERMARK } from '@/video/constants';
+import { getFeatureFlagVariant } from './featureFlags';
 
-// Session limits for anonymous users
-export const ANONYMOUS_VISUALIZATION_LIMIT = 12;
+// Default session limits for anonymous users
+const DEFAULT_ANONYMOUS_VISUALIZATION_LIMIT = 12;
 const ANONYMOUS_COMPLEXITY_VIEW_LIMIT = 2;
 const FREE_TIER_DAILY_EXPORT_LIMIT = 50;
 
+/**
+ * Get the anonymous visualization limit, considering PostHog feature flag.
+ * @returns {number}
+ */
+function getAnonymousVisualizationLimit() {
+  const variant = getFeatureFlagVariant('feature-anonymous-viz-limit');
+  if (variant === 'limit-8') return 8;
+  if (variant === 'limit-16') return 16;
+  return DEFAULT_ANONYMOUS_VISUALIZATION_LIMIT;
+}
+
+// Exported constant for backward compatibility (reads once at module load)
+export const ANONYMOUS_VISUALIZATION_LIMIT =
+  DEFAULT_ANONYMOUS_VISUALIZATION_LIMIT;
+
 // localStorage keys
 const STORAGE_KEY_VIZ_COUNT = 'anon_viz_count';
 const STORAGE_KEY_COMPLEXITY_COUNT = 'anon_complexity_views';
@@ -169,12 +185,12 @@ export function canRunVisualization(user) {
   if (plan === PLAN_TIERS.FREE || plan === PLAN_TIERS.PRO) {
     return true; // Unlimited
   }
-  // Anonymous: check session limit
+  // Anonymous: check session limit (dynamic from feature flag)
   const count = parseInt(
     localStorage.getItem(STORAGE_KEY_VIZ_COUNT) || '0',
     10
   );
-  return count < ANONYMOUS_VISUALIZATION_LIMIT;
+  return count < getAnonymousVisualizationLimit();
 }
 
 /**
@@ -204,7 +220,7 @@ export function getRemainingVisualizations(user) {
     localStorage.getItem(STORAGE_KEY_VIZ_COUNT) || '0',
     10
   );
-  return Math.max(0, ANONYMOUS_VISUALIZATION_LIMIT - count);
+  return Math.max(0, getAnonymousVisualizationLimit() - count);
 }
 
 /**

src/test/setup.js

@@ -287,6 +287,26 @@ const gridHelpersMock = {
 vi.mock('../utils/gridHelpers', () => gridHelpersMock);
 vi.mock('../utils/gridHelpers.js', () => gridHelpersMock);
 
+vi.mock('posthog-js', () => ({
+  default: {
+    init: vi.fn(),
+    identify: vi.fn(),
+    capture: vi.fn(),
+    reset: vi.fn(),
+    setPersonProperties: vi.fn(),
+    isFeatureEnabled: vi.fn(() => false),
+    getFeatureFlagVariant: vi.fn(() => undefined),
+    getFeatureFlagPayload: vi.fn(() => undefined),
+    onFeatureFlags: vi.fn(() => vi.fn()),
+    get_distinct_id: vi.fn(() => 'test-distinct-id'),
+    opt_out_capturing: vi.fn(),
+    has_opted_out_capturing: vi.fn(() => false),
+    opt_in_capturing: vi.fn(),
+    reloadFeatureFlags: vi.fn(),
+    shutdown: vi.fn(),
+  },
+}));
+
 vi.mock('../lib/supabaseClient', () => import('./supabaseMock.js'));
 vi.mock('../lib/supabaseClient.js', () => import('./supabaseMock.js'));