From bc33230739d518bbd5ee62aebbf5c6669b6dfe5b Mon Sep 17 00:00:00 2001
From: Sergei <sergei@Sergeis-MacBook-Pro.local>
Date: Sun, 18 Jan 2026 22:39:43 -0800
Subject: [PATCH] Clean up voice call UI - remove debug panel and technical
 info

- Remove debug logs panel entirely
- Simplify top bar (only back button)
- Remove unused imports, variables and styles
- Update component description
---
 app/voice-call.tsx | 200 ++-------------------------------------------
 1 file changed, 5 insertions(+), 195 deletions(-)

diff --git a/app/voice-call.tsx b/app/voice-call.tsx
index cebd98f..f4e542a 100644
--- a/app/voice-call.tsx
+++ b/app/voice-call.tsx
@@ -9,25 +9,12 @@
  * Features:
  * - Phone call-like UI with Julia avatar
  * - Call duration timer
- * - Mute/unmute
- * - Debug logs panel (collapsible)
+ * - Mute/unmute and speaker toggle
  * - Proper cleanup on unmount
  */
 
 import React, { useEffect, useRef } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Platform,
-  Animated,
-  Easing,
-  Dimensions,
-  ScrollView,
-  Alert,
-} from 'react-native';
-import * as Clipboard from 'expo-clipboard';
+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';
@@ -43,11 +30,6 @@ export default function VoiceCallScreen() {
   const router = useRouter();
   const { clearTranscript, addTranscriptEntry } = useVoiceTranscript();
 
-  // Debug logs panel state
-  const [showLogs, setShowLogs] = React.useState(false);
-  const [logsMinimized, setLogsMinimized] = React.useState(false);
-  const logsScrollRef = useRef<ScrollView>(null);
-
   // Speaker/earpiece toggle state
   const [isSpeakerOn, setIsSpeakerOn] = React.useState(true);
 
@@ -55,17 +37,14 @@ export default function VoiceCallScreen() {
   const {
     state,
     error,
-    roomName,
     callDuration,
     isMuted,
     isAgentSpeaking,
     canPlayAudio,
-    logs,
     participantCount,
     connect,
     disconnect,
     toggleMute,
-    clearLogs,
   } = useLiveKitRoom({
     userId: `user-${Date.now()}`,
     onTranscript: (role, text) => {
@@ -170,13 +149,6 @@ export default function VoiceCallScreen() {
     await setAudioOutput(newSpeakerState);
   };
 
-  // Copy logs to clipboard
-  const copyLogs = async () => {
-    const logsText = logs.map(l => `[${l.timestamp}] ${l.message}`).join('\n');
-    await Clipboard.setStringAsync(logsText);
-    Alert.alert('Copied!', `${logs.length} log entries copied to clipboard`);
-  };
-
   // Format duration as MM:SS
   const formatDuration = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
@@ -235,27 +207,13 @@ export default function VoiceCallScreen() {
       {/* Background gradient effect */}
       <View style={styles.backgroundGradient} />
 
-      {/* Top bar */}
+      {/* 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}>
-          <Text style={styles.encryptedText}>LiveKit + Deepgram</Text>
-          {roomName && (
-            <Text style={styles.roomNameText}>{roomName}</Text>
-          )}
-        </View>
-        <TouchableOpacity
-          style={styles.logsButton}
-          onPress={() => setShowLogs(!showLogs)}
-        >
-          <Ionicons
-            name={showLogs ? 'code-slash' : 'code'}
-            size={22}
-            color={showLogs ? AppColors.success : AppColors.white}
-          />
-        </TouchableOpacity>
+        <View style={styles.topBarCenter} />
+        <View style={styles.backButton} />
       </View>
 
       {/* Main content */}
@@ -308,63 +266,6 @@ export default function VoiceCallScreen() {
         )}
       </View>
 
-      {/* Debug logs panel */}
-      {showLogs && (
-        <View style={[styles.logsPanel, logsMinimized && styles.logsPanelMinimized]}>
-          <View style={styles.logsPanelHeader}>
-            <TouchableOpacity
-              style={styles.minimizeButton}
-              onPress={() => setLogsMinimized(!logsMinimized)}
-            >
-              <Ionicons
-                name={logsMinimized ? 'chevron-up' : 'chevron-down'}
-                size={20}
-                color={AppColors.white}
-              />
-            </TouchableOpacity>
-            <Text style={styles.logsPanelTitle}>
-              Logs ({logs.length}) • State: {state}
-            </Text>
-            <View style={styles.logsPanelButtons}>
-              <TouchableOpacity style={styles.copyButton} onPress={copyLogs}>
-                <Ionicons name="copy-outline" size={16} color={AppColors.white} />
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.clearButton} onPress={clearLogs}>
-                <Ionicons name="trash-outline" size={16} color={AppColors.white} />
-              </TouchableOpacity>
-              <TouchableOpacity
-                style={styles.closeLogsButton}
-                onPress={() => setShowLogs(false)}
-              >
-                <Ionicons name="close" size={18} color={AppColors.white} />
-              </TouchableOpacity>
-            </View>
-          </View>
-          {!logsMinimized && (
-            <ScrollView
-              ref={logsScrollRef}
-              style={styles.logsScrollView}
-              onContentSizeChange={() => logsScrollRef.current?.scrollToEnd()}
-            >
-              {logs.map((log, index) => (
-                <Text
-                  key={index}
-                  style={[
-                    styles.logEntry,
-                    log.level === 'error' && styles.logEntryError,
-                    log.level === 'warn' && styles.logEntryWarn,
-                  ]}
-                >
-                  [{log.timestamp}] {log.message}
-                </Text>
-              ))}
-              {logs.length === 0 && (
-                <Text style={styles.logEntryEmpty}>Waiting for events...</Text>
-              )}
-            </ScrollView>
-          )}
-        </View>
-      )}
 
       {/* Bottom controls */}
       <View style={styles.controls}>
@@ -438,21 +339,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
   },
-  encryptedText: {
-    fontSize: FontSizes.xs,
-    color: 'rgba(255,255,255,0.5)',
-  },
-  roomNameText: {
-    fontSize: 10,
-    color: 'rgba(255,255,255,0.3)',
-    marginTop: 2,
-  },
-  logsButton: {
-    width: 44,
-    height: 44,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   content: {
     flex: 1,
     alignItems: 'center',
@@ -580,80 +466,4 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 8,
   },
-  // Logs panel styles
-  logsPanel: {
-    position: 'absolute',
-    top: 80,
-    left: Spacing.md,
-    right: Spacing.md,
-    bottom: 180,
-    backgroundColor: 'rgba(0,0,0,0.9)',
-    borderRadius: BorderRadius.lg,
-    padding: Spacing.sm,
-    zIndex: 100,
-  },
-  logsPanelMinimized: {
-    bottom: 'auto' as any,
-    height: 44,
-  },
-  logsPanelHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: Spacing.sm,
-    paddingBottom: Spacing.sm,
-    borderBottomWidth: 1,
-    borderBottomColor: 'rgba(255,255,255,0.2)',
-  },
-  minimizeButton: {
-    padding: 4,
-    marginRight: Spacing.sm,
-  },
-  logsPanelTitle: {
-    flex: 1,
-    fontSize: FontSizes.sm,
-    fontWeight: '600',
-    color: AppColors.white,
-  },
-  logsPanelButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  copyButton: {
-    padding: 6,
-    backgroundColor: 'rgba(255,255,255,0.15)',
-    borderRadius: BorderRadius.sm,
-  },
-  clearButton: {
-    padding: 6,
-    backgroundColor: 'rgba(255,255,255,0.15)',
-    borderRadius: BorderRadius.sm,
-  },
-  closeLogsButton: {
-    padding: 6,
-  },
-  logsScrollView: {
-    flex: 1,
-  },
-  logEntry: {
-    fontSize: 11,
-    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-    color: '#4ade80',
-    lineHeight: 16,
-    marginBottom: 2,
-  },
-  logEntryError: {
-    color: '#f87171',
-  },
-  logEntryWarn: {
-    color: '#fbbf24',
-  },
-  logEntryEmpty: {
-    fontSize: FontSizes.xs,
-    color: 'rgba(255,255,255,0.5)',
-    fontStyle: 'italic',
-    textAlign: 'center',
-    marginTop: Spacing.lg,
-  },
 });