@onairos/react-native 3.1.11 → 3.1.13

package/src/components/PlatformConnectorsStep.tsx

@@ -0,0 +1,892 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Vibration,
+  TouchableOpacity,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import PlatformToggle from './PlatformToggle';
+import PersonaImage from './PersonaImage';
+import PrimaryButton from './PrimaryButton';
+import PersonalizationConsentScreen from './PersonalizationConsentScreen';
+import PinCreationScreen from './PinCreationScreen';
+import PersonaLoadingScreen from './PersonaLoadingScreen';
+import { useConnections } from '../hooks/useConnections';
+import { getPlatformIcon } from '../services/connectedAccountsService';
+import { initiateOAuth, initiateNativeAuth, hasNativeSDK } from '../services/platformAuthService';
+import { OAuthWebView } from './onboarding/OAuthWebView';
+import { useAuth } from '../context/AuthContext';
+import { startEnochTrainingWithYouTubeCheck } from '../services/mobileTrainingService';
+import { getOnairosUsername } from '../services/authService';
+import { getEncryptedPinForAPI } from '../services/pinEncryptionService';
+import { setTemporaryPin } from '../services/pinStorageUtils';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { io, Socket } from 'socket.io-client';
+
+interface PlatformConnectorsStepProps {
+  onUpdate: (connectedPlatforms: string[]) => void;
+  onSkip: () => void;
+  loading?: boolean;
+  onPinComplete?: (pin: string) => void;
+  onReviewerBypass?: () => void;
+}
+
+const PlatformConnectorsStep: React.FC<PlatformConnectorsStepProps> = ({
+  onUpdate,
+  onSkip,
+  loading = false,
+  onPinComplete,
+  onReviewerBypass,
+}) => {
+  const [connectedPlatforms, setConnectedPlatforms] = useState<Set<string>>(new Set());
+  const [showConsentScreen, setShowConsentScreen] = useState(false);
+  const [showPinScreen, setShowPinScreen] = useState(false);
+  const [showLoadingScreen, setShowLoadingScreen] = useState(false);
+  const [createdPin, setCreatedPin] = useState<string>('');
+  const [connectionStatuses, setConnectionStatuses] = useState<Record<string, string>>({});
+  const [showOAuthWebView, setShowOAuthWebView] = useState(false);
+  const [oauthUrl, setOauthUrl] = useState<string>('');
+  const [currentPlatform, setCurrentPlatform] = useState<string>('');
+  const [longPressTimer, setLongPressTimer] = useState<ReturnType<typeof setTimeout> | null>(null);
+  
+  // EXACT same training state variables as UniversalOnboarding
+  const [username, setUsername] = useState<string>('');
+  const [personaProgress, setPersonaProgress] = useState(0);
+  const [personaStatus, setPersonaStatus] = useState('Initializing...');
+  const [isPersonaComplete, setIsPersonaComplete] = useState(false);
+  const [socketConnected, setSocketConnected] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [userTraits, setUserTraits] = useState<any>(null);
+  const [inferenceResults, setInferenceResults] = useState<any>(null);
+  const [userToken, setUserToken] = useState<string | null>(null);
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const socketRef = useRef<Socket | null>(null);
+  
+  // EXACT same background training state as UniversalOnboarding
+  const [isBackgroundTrainingStarted, setIsBackgroundTrainingStarted] = useState(false);
+  const [backgroundTrainingProgress, setBackgroundTrainingProgress] = useState('');
+  const [backgroundSocketId, setBackgroundSocketId] = useState<string | null>(null);
+
+  // Use the real platform connection hook
+  const { connectPlatform, disconnectPlatform, isConnecting } = useConnections();
+  
+  // Get the authenticated user from auth context
+  const { user } = useAuth();
+  
+  // Initialize username on mount
+  useEffect(() => {
+    const initializeUsername = async () => {
+      try {
+        // First try to get stored username
+        const storedUsername = await AsyncStorage.getItem('onairos_username');
+        if (storedUsername && !username) {
+          console.log('📝 [USERNAME] Using stored username:', storedUsername);
+          setUsername(storedUsername);
+          return;
+        }
+
+        // If no stored username, generate from user data
+        if (user && !username) {
+          const initialUsername = user?.email?.split('@')[0] || user?.name || `user_${Math.floor(Math.random() * 10000)}`;
+          console.log('📝 [USERNAME] Generated username from user data:', initialUsername);
+          setUsername(initialUsername);
+          // Store it for future use
+          await AsyncStorage.setItem('onairos_username', initialUsername);
+          return;
+        }
+
+        // If no user data and no stored username, create a fallback
+        if (!username) {
+          const fallbackUsername = `mobile_user_${Math.floor(Math.random() * 10000)}`;
+          console.log('📝 [USERNAME] Using fallback username:', fallbackUsername);
+          setUsername(fallbackUsername);
+          await AsyncStorage.setItem('onairos_username', fallbackUsername);
+        }
+      } catch (error) {
+        console.error('❌ [USERNAME] Error initializing username:', error);
+        // Fallback to simple username
+        const fallbackUsername = `user_${Math.floor(Math.random() * 10000)}`;
+        setUsername(fallbackUsername);
+      }
+    };
+
+    initializeUsername();
+  }, [user, username]);
+
+  // EXACT same ensureAuthToken function from UniversalOnboarding
+  const ensureAuthToken = async () => {
+    try {
+      let existingToken = await AsyncStorage.getItem('onairos_jwt_token') || 
+                          await AsyncStorage.getItem('enoch_token') || 
+                          await AsyncStorage.getItem('auth_token');
+      
+      if (existingToken && existingToken.trim().length > 20) {
+        console.log('✅ Authentication token already exists:', `${existingToken.substring(0, 20)}...`);
+        return existingToken;
+      }
+
+      console.log('🔐 Creating Enoch authentication token...');
+      console.log('🔍 [ENSURE AUTH] Current username state:', username);
+      console.log('🔍 [ENSURE AUTH] Current user state:', user);
+      
+      const fallbackEmail = user?.email || `${username || 'user'}@onairos.temp`;
+      const fallbackUsername = username || user?.name?.split('@')[0] || 'mobile_user';
+      
+      console.log('🔍 [ENSURE AUTH] Using fallback email:', fallbackEmail);
+      console.log('🔍 [ENSURE AUTH] Using fallback username:', fallbackUsername);
+      
+      // Create Enoch user
+      try {
+        await fetch('https://api2.onairos.uk/enoch/users/register', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            email: fallbackEmail,
+            name: fallbackUsername,
+            photoUrl: ''
+          })
+        });
+      } catch (enochError) {
+        console.warn('⚠️ Enoch user creation failed (continuing):', enochError);
+      }
+      
+      // Create Onairos account to get JWT token
+      const onairosSignupResponse = await fetch('https://api2.onairos.uk/register/enoch', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: fallbackEmail,
+          username: fallbackUsername,
+          name: fallbackUsername
+        })
+      });
+      
+      if (!onairosSignupResponse.ok) {
+        const errorText = await onairosSignupResponse.text();
+        throw new Error(`Onairos signup failed: ${onairosSignupResponse.status} ${errorText}`);
+      }
+      
+      const onairosResponseData = await onairosSignupResponse.json();
+      let authToken = onairosResponseData.token || onairosResponseData.data?.token || onairosResponseData.jwt;
+      
+      if (!authToken) {
+        throw new Error('No authentication token returned from server');
+      }
+      
+      // Store the token
+      await AsyncStorage.setItem('onairos_jwt_token', authToken);
+      await AsyncStorage.setItem('auth_token', authToken);
+      await AsyncStorage.setItem('enoch_token', authToken);
+      await AsyncStorage.setItem('onairos_username', onairosResponseData.username || fallbackUsername);
+      
+      console.log('✅ Successfully stored authentication tokens');
+      return authToken;
+      
+    } catch (error) {
+      console.error('❌ Error ensuring authentication token:', error);
+      throw error;
+    }
+  };
+
+  // EXACT same background training function from UniversalOnboarding
+  const startBackgroundTraining = useCallback(async (): Promise<void> => {
+    try {
+      console.log('🚀 [BACKGROUND] Starting background training optimization...');
+      setBackgroundTrainingProgress('Connecting...');
+      
+      const authToken = await ensureAuthToken();
+      if (!authToken) {
+        throw new Error('Failed to create authentication token for background training');
+      }
+      
+      console.log('✅ [BACKGROUND] Auth token ready:', `${authToken.substring(0, 20)}...`);
+      setUserToken(authToken);
+      
+      // Set up user info if not available
+      if (!userInfo) {
+        const storedUsername = await getOnairosUsername();
+        const fallbackUsername = storedUsername || user?.email?.split('@')[0] || user?.name || 'mobile_user';
+        
+        const newUserInfo = {
+          username: fallbackUsername,
+          email: user?.email || null,
+          id: null
+        };
+        
+        setUserInfo(newUserInfo);
+        setUsername(fallbackUsername);
+        console.log('🧑‍💻 [BACKGROUND] User info set:', newUserInfo);
+      }
+      
+      console.log('🔌 [BACKGROUND] Setting up socket for background training...');
+      setBackgroundTrainingProgress('Initializing data collection...');
+      
+      const backgroundSocket = io('https://api2.onairos.uk', {
+        transports: ['websocket', 'polling'],
+        autoConnect: false,
+        timeout: 15000,
+        reconnection: true,
+        reconnectionAttempts: 3,
+        reconnectionDelay: 1000,
+        forceNew: true
+      });
+      
+      backgroundSocket.on('connect', async () => {
+        console.log('✅ [BACKGROUND] Socket connected, starting background data collection...');
+        const socketId = backgroundSocket.id;
+        setBackgroundSocketId(socketId || null);
+        setBackgroundTrainingProgress('Collecting your data...');
+        
+        if (socketId) {
+          // Step 4: Start background training WITHOUT PIN (per backend instructions)
+          await startBackgroundEnochTraining(socketId, authToken);
+        }
+      });
+      
+      backgroundSocket.on('trainingUpdate', (data: any) => {
+        console.log('🔥 [SOCKET] Received trainingUpdate event:', data);
+        if (data.progress) {
+          setBackgroundTrainingProgress(data.status || 'Processing...');
+          setPersonaProgress(data.progress);
+          setPersonaStatus(data.status || 'Training in progress');
+          console.log('📊 [BACKGROUND] Training progress:', data.progress, '%');
+        } else {
+          console.log('⚠️ [SOCKET] trainingUpdate event has no progress data:', data);
+        }
+      });
+      
+      backgroundSocket.on('disconnect', () => {
+        console.log('❌ [BACKGROUND] Socket disconnected');
+      });
+
+      backgroundSocket.on('trainingCompleted', (data: any) => {
+        console.log('🔥 [SOCKET] Received trainingCompleted event:', data);
+        console.log('✅ [BACKGROUND] Training Complete:', data);
+        setPersonaStatus('Running test inference');
+        setPersonaProgress(60);
+      });
+
+      backgroundSocket.on('inferenceCompleted', (data: any) => {
+        console.log('🔥 [SOCKET] Received inferenceCompleted event:', data);
+        console.log('🧠 [BACKGROUND] Inference Complete:', data);
+        setPersonaStatus('Uploading to S3');
+        setPersonaProgress(80);
+      });
+
+      backgroundSocket.on('modelStandby', (data: any) => {
+        console.log('🔥 [SOCKET] Received modelStandby event:', data);
+        console.log('🎉 [BACKGROUND] All Complete:', data);
+        setIsPersonaComplete(true);
+        setPersonaStatus('Complete!');
+        setPersonaProgress(100);
+      });
+
+      backgroundSocket.on('connect_error', (error: any) => {
+        console.error('❌ [BACKGROUND] Socket connection error:', error);
+        setBackgroundTrainingProgress('Connection failed');
+        setPersonaStatus('Connection error');
+        setPersonaProgress(0);
+      });
+      
+      // Store socket reference for later use
+      socketRef.current = backgroundSocket;
+      
+      // Connect the socket to start background training
+      backgroundSocket.connect();
+      
+      console.log('✅ [BACKGROUND] Background training initiated successfully');
+      
+    } catch (error) {
+      console.error('❌ [BACKGROUND] Error starting background training:', error);
+      setBackgroundTrainingProgress('Failed to start training');
+      setPersonaStatus('Training failed');
+      setPersonaProgress(0);
+    }
+  }, [userInfo, username, user, connectedPlatforms]);
+
+  // EXACT same background training API call from UniversalOnboarding
+  const startBackgroundEnochTraining = async (socketId: string, authToken: string) => {
+    try {
+      console.log('🚀 [BACKGROUND] Starting background training with socketId:', socketId);
+      console.log('🔑 Using auth token:', `${authToken.substring(0, 20)}...`);
+      
+      // Prepare background training data - EXACT same as UniversalOnboarding
+      const backgroundData = {
+        socketId,
+        username: userInfo?.username || userInfo?.name || username || 'mobile_user',
+        email: userInfo?.email || null,
+        modelKey: null,
+        connectedPlatforms: [], // No connected platforms for background training
+        platformConnections: {}, // No platform connections for background training
+        // No encrypted PIN for background training
+      };
+      
+      console.log('📤 Sending background training data to /mobile-training/enoch:', backgroundData);
+      
+      // Use the new training function that includes YouTube migration check
+      const backgroundResult = await startEnochTrainingWithYouTubeCheck(backgroundData);
+      console.log('📡 Background training API response:', backgroundResult);
+      
+      // Handle CONNECTIONS_REQUIRED scenario (pre-training validation)
+      if (backgroundResult.requiresConnections || backgroundResult.code === 'CONNECTIONS_REQUIRED') {
+        console.log('🔗 Connections required detected from background training');
+        setPersonaStatus('Connections required');
+        setHasError(true);
+        setBackgroundTrainingProgress('');
+        return;
+      }
+      
+      if (backgroundResult.success) {
+        console.log('✅ [BACKGROUND] Training started successfully');
+        console.log('🔍 [BACKGROUND] Setting isBackgroundTrainingStarted to true');
+        setIsBackgroundTrainingStarted(true);
+        setBackgroundTrainingProgress('Training model...');
+        setPersonaStatus('Training model...');
+        setPersonaProgress(25);
+        console.log('🔍 [BACKGROUND] Background training state updated:', {
+          isBackgroundTrainingStarted: true,
+          backgroundSocketId: socketId
+        });
+      } else {
+        console.error('❌ Background training start failed:', backgroundResult.error);
+        setPersonaStatus(`Error: ${backgroundResult.error || 'Background training failed to start'}`);
+        setHasError(true);
+        setBackgroundTrainingProgress('');
+        throw new Error(backgroundResult.error || 'Background training failed to start');
+      }
+    } catch (error) {
+      console.error('❌ [BACKGROUND] Background training error:', error);
+      setPersonaStatus('Training failed to start');
+      setHasError(true);
+      setBackgroundTrainingProgress('');
+      throw error;
+    }
+  };
+
+  // EXACT same continue training function from UniversalOnboarding
+  const continueBackgroundTrainingWithPin = async (userPin: string) => {
+    try {
+      console.log('🔐 [BACKGROUND] Continuing existing background training with PIN validation');
+      console.log('🔑 Using auth token:', `${userToken?.substring(0, 20)}...`);
+      
+      if (!backgroundSocketId) {
+        throw new Error('No background training socket available');
+      }
+      
+      const encryptedPin = await getEncryptedPinForAPI().catch(() => null);
+      
+      if (!encryptedPin) {
+        console.warn('⚠️ No encrypted PIN available, continuing without PIN validation');
+      }
+      
+      console.log('📤 [BACKGROUND] Sending PIN validation to continue training...');
+      setPersonaStatus('Validating PIN and continuing training');
+      setPersonaProgress(30);
+      
+      // Check socket connection status after PIN submission
+      console.log('🔍 [SOCKET] Socket connection status after PIN:', {
+        socketId: backgroundSocketId,
+        isConnected: socketRef.current?.connected,
+        socketExists: !!socketRef.current,
+        socketId_current: socketRef.current?.id
+      });
+      
+    } catch (error) {
+      console.error('❌ [BACKGROUND] Failed to continue training with PIN:', error);
+      throw error;
+    }
+  };
+
+  // Cleanup socket on unmount
+  useEffect(() => {
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.disconnect();
+      }
+    };
+  }, []);
+
+  // Real platforms that can be connected (from UniversalOnboarding)
+  const platforms = [
+    {
+      id: 'pinterest',
+      name: 'Pinterest',
+      icon: getPlatformIcon('pinterest'),
+      description: 'We analyze your pins, boards, and interests to understand your style and preferences.',
+    },
+    {
+      id: 'youtube',
+      name: 'YouTube',
+      icon: getPlatformIcon('youtube'),
+      description: 'We analyze your watch history, likes, and subscriptions to understand your interests.',
+    },
+    {
+      id: 'linkedin',
+      name: 'LinkedIn',
+      icon: getPlatformIcon('linkedin'),
+      description: 'We analyze your professional network and career interests.',
+    },
+    {
+      id: 'reddit',
+      name: 'Reddit', 
+      icon: getPlatformIcon('reddit'),
+      description: 'We analyze your posts and comments to understand your interests.',
+    },
+    {
+      id: 'gmail',
+      name: 'Gmail',
+      icon: getPlatformIcon('gmail'),
+      description: 'We analyze your email patterns to understand your communication style.',
+    },
+  ];
+
+  const handlePlatformToggle = async (platformId: string, enabled: boolean) => {
+    console.log(`🔄 [PLATFORM TOGGLE] ${platformId} - enabled: ${enabled}, username: "${username}", user:`, user);
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    
+    try {
+      if (enabled) {
+        // Ensure we have a valid username before proceeding
+        let validUsername = username;
+        if (!validUsername || validUsername.trim() === '') {
+          console.log('⚠️ [PLATFORM TOGGLE] No username available, generating one...');
+          
+          // Try to get stored username first
+          const storedUsername = await AsyncStorage.getItem('onairos_username');
+          if (storedUsername) {
+            validUsername = storedUsername;
+            setUsername(validUsername);
+          } else {
+            // Generate username from user data or fallback
+            validUsername = user?.email?.split('@')[0] || user?.name || `mobile_user_${Math.floor(Math.random() * 10000)}`;
+            setUsername(validUsername);
+            await AsyncStorage.setItem('onairos_username', validUsername);
+          }
+          
+          console.log(`📝 [PLATFORM TOGGLE] Using username: "${validUsername}"`);
+        }
+
+        // Check if the platform has a native SDK
+        if (hasNativeSDK(platformId)) {
+          console.log(`🔧 [PLATFORM TOGGLE] ${platformId} has native SDK`);
+          // Use native SDK authentication (YouTube)
+          setCurrentPlatform(platformId);
+          setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connecting' }));
+          const success = await initiateNativeAuth(platformId, validUsername);
+          
+          if (success) {
+            const newConnected = new Set(connectedPlatforms);
+            newConnected.add(platformId);
+            setConnectedPlatforms(newConnected);
+            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connected' }));
+            triggerHaptic(HapticType.SUCCESS);
+          } else {
+            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
+            triggerHaptic(HapticType.ERROR);
+          }
+        } else {
+          console.log(`🌐 [PLATFORM TOGGLE] ${platformId} using OAuth WebView with username: "${validUsername}"`);
+          // For platforms like Pinterest, use OAuth WebView
+          setCurrentPlatform(platformId);
+          setConnectionStatuses(prev => ({ ...prev, [platformId]: 'connecting' }));
+          
+          console.log(`🚀 [PLATFORM TOGGLE] Calling initiateOAuth for ${platformId}...`);
+          const oauthUrl = await initiateOAuth(platformId, validUsername);
+          console.log(`📡 [PLATFORM TOGGLE] OAuth URL received for ${platformId}:`, oauthUrl);
+          
+          if (oauthUrl) {
+            console.log(`✅ [PLATFORM TOGGLE] Setting OAuth URL and showing WebView for ${platformId}`);
+            setOauthUrl(oauthUrl);
+            setShowOAuthWebView(true);
+          } else {
+            console.log(`❌ [PLATFORM TOGGLE] No OAuth URL received for ${platformId}`);
+            setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
+            triggerHaptic(HapticType.ERROR);
+          }
+        }
+      } else {
+        // Disconnect the platform
+        await disconnectPlatform(platformId);
+        const newConnected = new Set(connectedPlatforms);
+        newConnected.delete(platformId);
+        setConnectedPlatforms(newConnected);
+        setConnectionStatuses(prev => ({ ...prev, [platformId]: 'disconnected' }));
+        triggerHaptic(HapticType.BUTTON_PRESS);
+      }
+    } catch (error) {
+      console.error(`Error toggling platform ${platformId}:`, error);
+      setConnectionStatuses(prev => ({ ...prev, [platformId]: 'error' }));
+      triggerHaptic(HapticType.ERROR);
+    }
+  };
+
+  const handleUpdate = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    
+    // EXACT same logic as UniversalOnboarding handleProceed
+    console.log('🚀 [TRANSITION] Starting background training during connect → pin transition');
+    startBackgroundTraining().catch(error => {
+      console.error('❌ [TRANSITION] Background training failed during transition:', error);
+      // Continue to PIN screen even if training fails
+    });
+    
+    setShowPinScreen(true);
+  };
+
+  const handleConsentAccept = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    if (onPinComplete) {
+      onPinComplete(createdPin);
+    } else {
+      onUpdate(Array.from(connectedPlatforms));
+    }
+  };
+
+  const handleConsentDecline = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setShowConsentScreen(false);
+  };
+
+  const handleSkip = () => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    onSkip();
+  };
+
+  const handlePinComplete = async (pin: string) => {
+    setCreatedPin(pin);
+    
+    // Store PIN temporarily for training component access (EXACT same as UniversalOnboarding)
+    setTemporaryPin(pin);
+    
+    console.log('🔐 [PIN SUBMIT] PIN submitted, checking for background training...');
+    console.log('🔍 [PIN SUBMIT] Background training state:', {
+      isBackgroundTrainingStarted,
+      backgroundSocketId,
+      hasBackgroundSocket: !!backgroundSocketId,
+      userToken: !!userToken,
+      userInfo: !!userInfo
+    });
+    
+    // EXACT same logic as UniversalOnboarding handlePinSubmit
+    if (isBackgroundTrainingStarted && backgroundSocketId) {
+      console.log('✅ [PIN SUBMIT] Background training detected, continuing with PIN validation...');
+      
+      // Continue with existing training by sending PIN validation
+      try {
+        await continueBackgroundTrainingWithPin(pin);
+        setShowPinScreen(false);
+        setShowLoadingScreen(true); // Move to loading screen to show training progress
+      } catch (error) {
+        console.error('❌ [PIN SUBMIT] Failed to continue background training:', error);
+        setPersonaStatus('Error: Failed to continue training');
+        setHasError(true);
+        setShowPinScreen(false);
+        setShowLoadingScreen(true);
+      }
+    } else {
+      console.log('ℹ️ [PIN SUBMIT] No background training detected');
+      setPersonaStatus('No training in progress. Please restart the flow.');
+      setHasError(true);
+      setShowPinScreen(false);
+      setShowLoadingScreen(true);
+    }
+    
+    console.log('🔐 [PIN SUBMIT] PIN stored securely, moved to loading screen');
+  };
+
+  const handleLoadingComplete = () => {
+    setShowLoadingScreen(false);
+    setShowConsentScreen(true);
+  };
+
+  const handleOAuthSuccess = (code: string) => {
+    console.log(`OAuth success for ${currentPlatform} with code:`, code);
+    
+    if (currentPlatform) {
+      // Update connected platforms
+      const newConnected = new Set(connectedPlatforms);
+      newConnected.add(currentPlatform);
+      setConnectedPlatforms(newConnected);
+      setConnectionStatuses(prev => ({ ...prev, [currentPlatform]: 'connected' }));
+      triggerHaptic(HapticType.SUCCESS);
+    }
+    
+    // Close the OAuth window
+    setShowOAuthWebView(false);
+    setOauthUrl('');
+    setCurrentPlatform('');
+  };
+
+  const handleOAuthClose = () => {
+    setShowOAuthWebView(false);
+    setOauthUrl('');
+    if (currentPlatform) {
+      setConnectionStatuses(prev => ({ ...prev, [currentPlatform]: 'disconnected' }));
+    }
+    setCurrentPlatform('');
+  };
+
+  const handlePinBack = () => {
+    setShowPinScreen(false);
+  };
+
+  const handleReviewerBypass = () => {
+    console.log('🔍 Reviewer bypass activated in new UI');
+    if (onReviewerBypass) {
+      onReviewerBypass();
+    }
+  };
+
+  const handleSkipLongPress = () => {
+    console.log('🔍 Skip button long press detected, starting reviewer bypass timer');
+    
+    // Start a timer for haptic feedback at 2 seconds
+    const hapticTimer = setTimeout(() => {
+      // Provide haptic feedback
+      Vibration.vibrate(100);
+    }, 2000);
+    
+    // Start a timer for 4 seconds for the bypass
+    const bypassTimer = setTimeout(() => {
+      handleReviewerBypass();
+    }, 4000);
+    
+    // Store the timer
+    setLongPressTimer(bypassTimer);
+  };
+
+  const handleSkipPressOut = () => {
+    console.log('🔍 Skip button press released, clearing reviewer bypass timer');
+    
+    // Clear the timer if the press is released before 4 seconds
+    if (longPressTimer) {
+      clearTimeout(longPressTimer);
+      setLongPressTimer(null);
+    }
+  };
+
+  // Calculate persona level based on connected platforms (1-5)
+  const personaLevel = Math.min(5, Math.max(1, connectedPlatforms.size + 1));
+
+  // Show PIN screen if triggered
+  if (showPinScreen) {
+    return (
+      <PinCreationScreen
+        visible={showPinScreen}
+        onComplete={handlePinComplete}
+        onBack={handlePinBack}
+      />
+    );
+  }
+
+  // Show loading screen if triggered
+  if (showLoadingScreen) {
+    return (
+      <PersonaLoadingScreen
+        visible={showLoadingScreen}
+        onComplete={handleLoadingComplete}
+        progress={personaProgress}
+        status={personaStatus}
+      />
+    );
+  }
+
+  // Show OAuth WebView if triggered
+  if (showOAuthWebView && oauthUrl) {
+    return (
+      <OAuthWebView
+        url={oauthUrl}
+        platform={currentPlatform}
+        onClose={handleOAuthClose}
+        onSuccess={handleOAuthSuccess}
+        onComplete={handleOAuthClose}
+      />
+    );
+  }
+
+  // Show consent screen if triggered
+  if (showConsentScreen) {
+    return (
+      <PersonalizationConsentScreen
+        visible={showConsentScreen}
+        onAccept={handleConsentAccept}
+        onDecline={handleConsentDecline}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Fixed Header and Persona Section */}
+      <View style={styles.fixedHeaderSection}>
+        {/* Heading */}
+        <View style={styles.headingContainer}>
+          <Text style={styles.title}>Connect platforms</Text>
+          <Text style={styles.subtitle}>More connections, smarter personalization.</Text>
+        </View>
+
+        {/* Persona Image */}
+        <View style={styles.personaContainer}>
+          <PersonaImage level={personaLevel} style={styles.largePersona} />
+        </View>
+      </View>
+
+      {/* Scrollable Platform Section */}
+      <KeyboardAvoidingView 
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.scrollableSection}
+      >
+        <ScrollView 
+          style={styles.scrollView} 
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.scrollContent}
+        >
+          <View style={styles.platformsContainer}>
+            {platforms.map((platform, index) => (
+              <PlatformToggle
+                key={platform.id}
+                platform={platform}
+                isEnabled={connectedPlatforms.has(platform.id)}
+                onToggle={handlePlatformToggle}
+                fullWidth={true}
+                isLast={index === platforms.length - 1}
+                customIconSize={platform.id === 'youtube' ? 36 : undefined}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      {/* Fixed Bottom Buttons */}
+      <View style={styles.bottomContainer}>
+        <View style={styles.buttonContainer}>
+          <PrimaryButton
+            label="Continue"
+            onPress={handleUpdate}
+            disabled={loading || connectedPlatforms.size === 0 || isConnecting}
+            loading={loading || isConnecting}
+          />
+        </View>
+        
+        <View style={styles.skipContainer}>
+          <TouchableOpacity
+            onPress={handleSkip}
+            onLongPress={handleSkipLongPress}
+            onPressOut={handleSkipPressOut}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.skipButton}>
+              Skip
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.surface,
+  },
+  
+  fixedHeaderSection: {
+    paddingTop: 8,
+    paddingHorizontal: 0,
+    backgroundColor: COLORS.surface,
+    maxHeight: '50%',  // Limit fixed section to 50% of screen
+    overflow: 'hidden', // Hide any overflow
+  },
+  
+  scrollableSection: {
+    flex: 1,
+  },
+  
+  scrollView: {
+    flex: 1,
+  },
+  
+  scrollContent: {
+    paddingTop: 0, // Ensure scroll starts at the top
+  },
+  
+  headingContainer: {
+    width: '100%',
+    marginBottom: 0,  // Remove margin to make persona very close
+    paddingHorizontal: 0,
+  },
+  
+  title: {
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    fontSize: 24,
+    lineHeight: 32,
+    color: COLORS.grey800,
+    textAlign: 'left',
+    marginBottom: 2,
+  },
+  
+  subtitle: {
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.grey600,
+    textAlign: 'left',
+    marginBottom: 0,  // Remove bottom margin to bring persona closer
+  },
+  
+  personaContainer: {
+    alignItems: 'center',
+    marginTop: -110,    // Negative margin to pull persona up into header space
+    marginBottom: 0,   // Remove bottom margin
+  },
+  
+  largePersona: {
+    width: 650,  // Make it bigger than default 200x200
+    height: 650,
+    marginTop: -20,    // Additional negative margin to override internal spacing
+    marginBottom: -20, // Pull content below up as well
+  },
+  
+  platformsContainer: {
+    paddingHorizontal: 0,
+    paddingTop: 8,   // Reduced from 20 to minimize space at top of scroll area
+    paddingBottom: 120, // More space to account for fixed buttons at bottom
+  },
+  
+  bottomContainer: {
+    position: 'absolute',
+    bottom: -40,  // Position 40px from bottom of screen
+    left: 0,
+    right: 0,
+    paddingHorizontal: 0,
+    paddingBottom: SPACING.xl,
+    backgroundColor: COLORS.surface,
+  },
+  
+  buttonContainer: {
+    marginBottom: 16,
+  },
+  
+  skipContainer: {
+    alignItems: 'center',
+  },
+  
+  skipButton: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    color: COLORS.grey600,
+    textAlign: 'center',
+  },
+});
+
+export default PlatformConnectorsStep;