Remove separate voice call screen

Deleted app/voice-call.tsx fullscreen modal and removed all navigation
references to it from chat.tsx, voice.tsx and _layout.tsx.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(tabs)/chat.tsx

@@ -2,7 +2,6 @@
  * Chat Screen - Text Chat with Julia AI
  *
  * Clean text chat interface.
- * Voice calls are handled by separate voice-call.tsx screen.
  */
 
 import React, { useState, useCallback, useRef, useEffect } from 'react';
@@ -209,10 +208,6 @@ export default function ChatScreen() {
     setShowBeneficiaryPicker(false);
   }, [setCurrentBeneficiary]);
 
-  // Start voice call - navigate to voice-call screen
-  const startVoiceCall = useCallback(() => {
-    router.push('/voice-call');
-  }, [router]);
 
   // Cached API token for WellNuo
   const apiTokenRef = useRef<string | null>(null);
@@ -395,12 +390,7 @@ export default function ChatScreen() {
             </Text>
           </View>
         </View>
-        <View style={styles.headerButtons}>
+        <View style={styles.headerButtons} />
-          {/* Voice Call Button */}
-          <TouchableOpacity style={styles.callButton} onPress={startVoiceCall}>
-            <Ionicons name="call" size={22} color={AppColors.white} />
-          </TouchableOpacity>
-        </View>
       </View>
 
       {/* Beneficiary Picker Modal */}
@@ -476,11 +466,6 @@ export default function ChatScreen() {
 
         {/* Input */}
         <View style={styles.inputContainer}>
-          {/* Voice Call Button in input area */}
-          <TouchableOpacity style={styles.voiceCallButton} onPress={startVoiceCall}>
-            <Ionicons name="call-outline" size={20} color={AppColors.primary} />
-          </TouchableOpacity>
-
           <TextInput
             style={styles.input}
             placeholder="Type a message..."
@@ -560,14 +545,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: Spacing.sm,
   },
-  callButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: AppColors.success,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   headerButton: {
     padding: Spacing.xs,
   },
@@ -643,17 +620,6 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: AppColors.border,
   },
-  voiceCallButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: AppColors.surface,
-    borderWidth: 1,
-    borderColor: AppColors.primary,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: Spacing.sm,
-  },
   input: {
     flex: 1,
     backgroundColor: AppColors.surface,

app/(tabs)/voice.tsx

@@ -15,13 +15,11 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons, Feather } from '@expo/vector-icons';
-import { useRouter } from 'expo-router';
 import * as Clipboard from 'expo-clipboard';
 import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
 import { useVoiceTranscript } from '@/contexts/VoiceTranscriptContext';
 
 export default function VoiceDebugScreen() {
-  const router = useRouter();
   const { transcript, clearTranscript, hasNewTranscript, markTranscriptAsShown, addTranscriptEntry } = useVoiceTranscript();
 
   // Mark as shown when viewed
@@ -74,10 +72,6 @@ export default function VoiceDebugScreen() {
     );
   }, [clearTranscript]);
 
-  // Start a new voice call
-  const startVoiceCall = useCallback(() => {
-    router.push('/voice-call');
-  }, [router]);
 
   // Add mock data for testing (simulator has no microphone)
   const addMockData = useCallback(() => {
@@ -122,13 +116,8 @@ export default function VoiceDebugScreen() {
         </View>
       </View>
 
-      {/* Start Call Button */}
-      <View style={styles.callButtonContainer}>
-        <TouchableOpacity style={styles.callButton} onPress={startVoiceCall}>
-          <Ionicons name="call" size={24} color={AppColors.white} />
-          <Text style={styles.callButtonText}>Start Voice Call</Text>
-        </TouchableOpacity>
       {/* Mock Data Button for simulator testing */}
+      <View style={styles.callButtonContainer}>
         <TouchableOpacity style={styles.mockDataButton} onPress={addMockData}>
           <Feather name="plus-circle" size={20} color={AppColors.primary} />
           <Text style={styles.mockDataButtonText}>Add Mock Data</Text>
@@ -242,25 +231,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: Spacing.md,
     paddingVertical: Spacing.md,
   },
-  callButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: Spacing.sm,
-    backgroundColor: AppColors.success,
-    paddingVertical: Spacing.md,
-    borderRadius: BorderRadius.lg,
-    shadowColor: AppColors.success,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 4,
-  },
-  callButtonText: {
-    fontSize: FontSizes.lg,
-    fontWeight: '600',
-    color: AppColors.white,
-  },
   mockDataButton: {
     flexDirection: 'row',
     alignItems: 'center',

app/_layout.tsx

@@ -50,7 +50,6 @@ function RootLayoutNav() {
         <Stack.Screen name="(auth)" />
         <Stack.Screen name="(tabs)" />
         <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
-        <Stack.Screen name="voice-call" options={{ presentation: 'fullScreenModal', headerShown: false, gestureEnabled: false }} />
         <Stack.Screen name="terms" options={{ presentation: 'modal' }} />
         <Stack.Screen name="privacy" options={{ presentation: 'modal' }} />
       </Stack>

app/voice-call.tsx

@@ -1,557 +0,0 @@
-/**
- * Voice Call Screen - Fullscreen LiveKit Voice Call with Julia AI
- *
- * ARCHITECTURE:
- * - ALL LiveKit/WebRTC logic is in useLiveKitRoom hook
- * - This component ONLY handles UI rendering
- * - No direct LiveKit imports here!
- *
- * Features:
- * - Phone call-like UI with Julia avatar
- * - Call duration timer
- * - Mute/unmute toggle
- * - Proper cleanup on unmount
- */
-
-import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Animated, Easing, Dimensions } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useRouter } from 'expo-router';
-import { AppColors, BorderRadius, FontSizes, Spacing } from '@/constants/theme';
-import { useVoiceTranscript } from '@/contexts/VoiceTranscriptContext';
-import { useBeneficiary } from '@/contexts/BeneficiaryContext';
-import { useLiveKitRoom, ConnectionState } from '@/hooks/useLiveKitRoom';
-import { api } from '@/services/api';
-import type { Beneficiary } from '@/types';
-import type { BeneficiaryData } from '@/services/livekitService';
-
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
-export default function VoiceCallScreen() {
-  const router = useRouter();
-  const { clearTranscript, addTranscriptEntry } = useVoiceTranscript();
-  const { currentBeneficiary, debugDeploymentId } = useBeneficiary();
-
-  // Beneficiary state for building beneficiaryData
-  const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
-  const [beneficiariesLoaded, setBeneficiariesLoaded] = useState(false);
-
-  // Load beneficiaries on mount
-  useEffect(() => {
-    const loadBeneficiaries = async () => {
-      try {
-        const response = await api.getAllBeneficiaries();
-        if (response.ok && response.data) {
-          setBeneficiaries(response.data);
-          console.log('[VoiceCall] Beneficiaries loaded:', response.data.length);
-        }
-      } catch (error) {
-        console.warn('[VoiceCall] Failed to load beneficiaries:', error);
-      } finally {
-        setBeneficiariesLoaded(true);
-      }
-    };
-    loadBeneficiaries();
-  }, []);
-
-  // Build beneficiaryData for voice agent
-  const beneficiaryData = useMemo((): BeneficiaryData | undefined => {
-    // PRIORITY 1: If debugDeploymentId is set (from Debug screen), use it
-    if (debugDeploymentId) {
-      console.log('[VoiceCall] Using DEBUG deployment ID:', debugDeploymentId);
-      return {
-        deploymentId: debugDeploymentId,
-        beneficiaryNamesDict: {},
-      };
-    }
-
-    // PRIORITY 2: Use beneficiaries from API
-    // Safety check - ensure beneficiaries is an array
-    if (!Array.isArray(beneficiaries) || beneficiaries.length === 0) {
-      console.log('[VoiceCall] No beneficiaries yet, skipping beneficiaryData');
-      return undefined;
-    }
-
-    try {
-      // Build beneficiary_names_dict from all beneficiaries
-      // Format: {"21": "papa", "69": "David"}
-      const beneficiaryNamesDict: Record<string, string> = {};
-      beneficiaries.forEach(b => {
-        // Safety: check that b exists and has id and name
-        if (b && b.id != null && b.name) {
-          beneficiaryNamesDict[String(b.id)] = b.name;
-        }
-      });
-
-      // Get deployment_id from current beneficiary or fallback to first one
-      const deploymentId = currentBeneficiary?.id != null
-        ? String(currentBeneficiary.id)
-        : beneficiaries[0]?.id != null
-          ? String(beneficiaries[0].id)
-          : '21';
-
-      console.log('[VoiceCall] BeneficiaryData:', { deploymentId, beneficiaryNamesDict });
-
-      return {
-        deploymentId,
-        beneficiaryNamesDict,
-      };
-    } catch (error) {
-      console.error('[VoiceCall] Error building beneficiaryData:', error);
-      return undefined;
-    }
-  }, [beneficiaries, currentBeneficiary, debugDeploymentId]);
-
-  // LiveKit hook - ALL logic is here
-  const {
-    state,
-    error,
-    callDuration,
-    isMuted,
-    isAgentSpeaking,
-    canPlayAudio,
-    participantCount,
-    connect,
-    disconnect,
-    toggleMute,
-  } = useLiveKitRoom({
-    userId: `user-${Date.now()}`,
-    beneficiaryData,
-    onTranscript: (role, text) => {
-      addTranscriptEntry(role, text);
-    },
-  });
-
-  // Animations
-  const pulseAnim = useRef(new Animated.Value(1)).current;
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-  const avatarScale = useRef(new Animated.Value(0.8)).current;
-
-  // Clear transcript on mount
-  useEffect(() => {
-    clearTranscript();
-  }, []);
-
-  // Track if connect has been called to prevent duplicate calls
-  const connectCalledRef = useRef(false);
-
-  // Start call ONLY after beneficiaryData is ready
-  // IMPORTANT: We must wait for beneficiaryData to be populated!
-  // Without deploymentId, Julia AI agent won't know which beneficiary to talk about.
-  useEffect(() => {
-    // Prevent duplicate connect calls
-    if (connectCalledRef.current) return;
-
-    // If debugDeploymentId is set, connect immediately (don't wait for beneficiaries)
-    if (debugDeploymentId && beneficiaryData?.deploymentId) {
-      console.log('[VoiceCall] Starting call with DEBUG deploymentId:', debugDeploymentId);
-      connectCalledRef.current = true;
-      connect();
-      return;
-    }
-
-    // Otherwise, only connect when beneficiaries are loaded AND beneficiaryData is ready
-    if (beneficiariesLoaded && beneficiaryData?.deploymentId) {
-      console.log('[VoiceCall] Starting call with beneficiaryData:', JSON.stringify(beneficiaryData));
-      connectCalledRef.current = true;
-      connect();
-    } else if (beneficiariesLoaded) {
-      console.log('[VoiceCall] Waiting for beneficiaryData... Current state:', {
-        beneficiariesLoaded,
-        beneficiariesCount: beneficiaries.length,
-        beneficiaryData: beneficiaryData ? JSON.stringify(beneficiaryData) : 'undefined'
-      });
-    }
-  }, [beneficiariesLoaded, beneficiaryData, beneficiaries.length, connect, debugDeploymentId]);
-
-  // Fallback: if beneficiaryData doesn't arrive in 5 seconds, connect anyway
-  // This handles edge cases where API fails or user has no beneficiaries
-  useEffect(() => {
-    if (connectCalledRef.current) return;
-
-    const timeout = setTimeout(() => {
-      if (!connectCalledRef.current && beneficiariesLoaded) {
-        console.warn('[VoiceCall] Timeout: beneficiaryData not ready after 5s, connecting without it');
-        connectCalledRef.current = true;
-        connect();
-      }
-    }, 5000);
-
-    return () => clearTimeout(timeout);
-  }, [beneficiariesLoaded, connect]);
-
-  // Navigate back on disconnect or error
-  useEffect(() => {
-    if (state === 'disconnected' || state === 'error') {
-      const timeout = setTimeout(() => {
-        router.back();
-      }, state === 'error' ? 2000 : 500);
-      return () => clearTimeout(timeout);
-    }
-  }, [state, router]);
-
-  // Pulse animation for active call
-  useEffect(() => {
-    if (state === 'connected') {
-      const pulse = Animated.loop(
-        Animated.sequence([
-          Animated.timing(pulseAnim, {
-            toValue: 1.1,
-            duration: 1500,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-          }),
-          Animated.timing(pulseAnim, {
-            toValue: 1,
-            duration: 1500,
-            easing: Easing.inOut(Easing.ease),
-            useNativeDriver: true,
-          }),
-        ])
-      );
-      pulse.start();
-
-      // Avatar entrance animation
-      Animated.spring(avatarScale, {
-        toValue: 1,
-        friction: 8,
-        tension: 40,
-        useNativeDriver: true,
-      }).start();
-
-      return () => pulse.stop();
-    }
-  }, [state, pulseAnim, avatarScale]);
-
-  // Rotate animation for connecting states
-  useEffect(() => {
-    const connectingStates: ConnectionState[] = [
-      'initializing',
-      'configuring_audio',
-      'requesting_token',
-      'connecting',
-      'reconnecting',
-    ];
-
-    if (connectingStates.includes(state)) {
-      const rotate = Animated.loop(
-        Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: 2000,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        })
-      );
-      rotate.start();
-      return () => rotate.stop();
-    } else {
-      rotateAnim.setValue(0);
-    }
-  }, [state, rotateAnim]);
-
-  // End call handler
-  const handleEndCall = async () => {
-    await disconnect();
-    router.back();
-  };
-
-  // Format duration as MM:SS
-  const formatDuration = (seconds: number): string => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
-
-  // Get status text based on state
-  const getStatusText = (): string => {
-    switch (state) {
-      case 'idle':
-        return 'Starting...';
-      case 'initializing':
-        return 'Initializing...';
-      case 'configuring_audio':
-        return 'Configuring audio...';
-      case 'requesting_token':
-        return 'Requesting token...';
-      case 'connecting':
-        return 'Connecting...';
-      case 'connected':
-        if (isAgentSpeaking) return 'Julia is speaking...';
-        if (!canPlayAudio) return 'Waiting for audio...';
-        return 'Connected';
-      case 'reconnecting':
-        return 'Reconnecting...';
-      case 'disconnected':
-        return 'Disconnected';
-      case 'error':
-        return error || 'Error occurred';
-      default:
-        return 'Unknown state';
-    }
-  };
-
-  // Is call currently connecting?
-  const isConnecting = [
-    'idle',
-    'initializing',
-    'configuring_audio',
-    'requesting_token',
-    'connecting',
-  ].includes(state);
-
-  // Is call active?
-  const isActive = state === 'connected';
-
-  // Rotation interpolation
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
-      {/* Background gradient effect */}
-      <View style={styles.backgroundGradient} />
-
-      {/* Top bar - minimal */}
-      <View style={styles.topBar}>
-        <TouchableOpacity style={styles.backButton} onPress={handleEndCall}>
-          <Ionicons name="chevron-down" size={28} color={AppColors.white} />
-        </TouchableOpacity>
-        <View style={styles.topBarCenter} />
-        <View style={styles.backButton} />
-      </View>
-
-      {/* Main content */}
-      <View style={styles.content}>
-        {/* Avatar */}
-        <Animated.View
-          style={[
-            styles.avatarContainer,
-            {
-              transform: [
-                { scale: isActive ? pulseAnim : avatarScale },
-                { rotate: isConnecting ? spin : '0deg' },
-              ],
-            },
-          ]}
-        >
-          <View style={styles.avatar}>
-            <Text style={styles.avatarText}>J</Text>
-          </View>
-          {isActive && <View style={styles.activeIndicator} />}
-        </Animated.View>
-
-        {/* Name and status */}
-        <Text style={styles.name}>Julia AI</Text>
-
-        {isActive ? (
-          <View style={styles.statusContainer}>
-            <View style={styles.activeDot} />
-            <Text style={styles.duration}>{formatDuration(callDuration)}</Text>
-          </View>
-        ) : (
-          <Text style={styles.status}>{getStatusText()}</Text>
-        )}
-
-        {/* Additional status info */}
-        {isActive && (
-          <Text style={styles.listeningStatus}>
-            {getStatusText()}
-            {participantCount > 1 && ` • ${participantCount} participants`}
-          </Text>
-        )}
-
-        {/* Error display */}
-        {state === 'error' && error && (
-          <View style={styles.errorContainer}>
-            <Ionicons name="alert-circle" size={20} color={AppColors.error} />
-            <Text style={styles.errorText}>{error}</Text>
-          </View>
-        )}
-      </View>
-
-
-      {/* Bottom controls - centered layout with 2 buttons */}
-      <View style={styles.controls}>
-        {/* Mute button */}
-        <TouchableOpacity
-          style={[styles.controlButton, isMuted && styles.controlButtonActive]}
-          onPress={toggleMute}
-          disabled={!isActive}
-        >
-          <Ionicons
-            name={isMuted ? 'mic-off' : 'mic'}
-            size={28}
-            color={isMuted ? AppColors.error : AppColors.white}
-          />
-          <Text style={styles.controlLabel}>{isMuted ? 'Unmute' : 'Mute'}</Text>
-        </TouchableOpacity>
-
-        {/* End call button */}
-        <TouchableOpacity style={styles.endCallButton} onPress={handleEndCall}>
-          <Ionicons name="call" size={32} color={AppColors.white} />
-        </TouchableOpacity>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#1a1a2e',
-  },
-  backgroundGradient: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: '50%',
-    backgroundColor: '#16213e',
-    borderBottomLeftRadius: SCREEN_WIDTH,
-    borderBottomRightRadius: SCREEN_WIDTH,
-    transform: [{ scaleX: 2 }],
-  },
-  topBar: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: Spacing.md,
-    paddingVertical: Spacing.sm,
-  },
-  backButton: {
-    width: 44,
-    height: 44,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  topBarCenter: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  content: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingBottom: 100,
-  },
-  avatarContainer: {
-    width: 150,
-    height: 150,
-    marginBottom: Spacing.xl,
-  },
-  avatar: {
-    width: 150,
-    height: 150,
-    borderRadius: 75,
-    backgroundColor: AppColors.success,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: AppColors.success,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.5,
-    shadowRadius: 20,
-    elevation: 10,
-  },
-  avatarText: {
-    fontSize: 64,
-    fontWeight: '600',
-    color: AppColors.white,
-  },
-  activeIndicator: {
-    position: 'absolute',
-    bottom: 10,
-    right: 10,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: AppColors.success,
-    borderWidth: 3,
-    borderColor: '#1a1a2e',
-  },
-  name: {
-    fontSize: 32,
-    fontWeight: '700',
-    color: AppColors.white,
-    marginBottom: Spacing.xs,
-  },
-  statusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  activeDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: AppColors.success,
-    marginRight: Spacing.sm,
-  },
-  duration: {
-    fontSize: FontSizes.lg,
-    color: AppColors.white,
-    fontVariant: ['tabular-nums'],
-  },
-  status: {
-    fontSize: FontSizes.base,
-    color: 'rgba(255,255,255,0.7)',
-  },
-  listeningStatus: {
-    fontSize: FontSizes.sm,
-    color: 'rgba(255,255,255,0.5)',
-    marginTop: Spacing.md,
-    fontStyle: 'italic',
-  },
-  errorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: Spacing.md,
-    paddingHorizontal: Spacing.lg,
-  },
-  errorText: {
-    fontSize: FontSizes.sm,
-    color: AppColors.error,
-    marginLeft: Spacing.sm,
-    flex: 1,
-  },
-  controls: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: Spacing.xl,
-    paddingHorizontal: Spacing.lg,
-    gap: 40, // Space between 2 buttons (Mute, End Call)
-  },
-  controlButton: {
-    alignItems: 'center',
-    padding: Spacing.md,
-    borderRadius: BorderRadius.full,
-    backgroundColor: 'rgba(255,255,255,0.1)',
-    width: 70,
-    height: 70,
-    justifyContent: 'center',
-  },
-  controlButtonActive: {
-    backgroundColor: 'rgba(255,255,255,0.2)',
-  },
-  controlLabel: {
-    fontSize: FontSizes.xs,
-    color: AppColors.white,
-    marginTop: 4,
-  },
-  endCallButton: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    backgroundColor: AppColors.error,
-    justifyContent: 'center',
-    alignItems: 'center',
-    transform: [{ rotate: '135deg' }],
-    shadowColor: AppColors.error,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.4,
-    shadowRadius: 8,
-    elevation: 8,
-  },
-});