From 03b6e5d70fed6bf001a6583f229c0352c72a0ac0 Mon Sep 17 00:00:00 2001
From: jknapp <jknapp85@gmail.com>
Date: Fri, 23 Jan 2026 19:02:03 -0800
Subject: [PATCH] Add debug logging to browser phone for mobile troubleshooting

Adds visible debug output to track SDK loading and device registration
steps on mobile devices where the phone stays stuck on "Connecting".

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 admin/class-twp-admin.php | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/admin/class-twp-admin.php b/admin/class-twp-admin.php
index 3fa0bdb..8643b44 100644
--- a/admin/class-twp-admin.php
+++ b/admin/class-twp-admin.php
@@ -7016,7 +7016,8 @@ class TWP_Admin {
                 <div class="phone-interface">
                     <div class="phone-display">
                         <div id="phone-status">Ready</div>
-                        <div id="device-connection-status" style="font-size: 12px; color: #999; margin-top: 5px;">Connecting...</div>
+                        <div id="device-connection-status" style="font-size: 12px; color: #999; margin-top: 5px;">Loading...</div>
+                        <div id="twp-debug-info" style="font-size: 10px; color: #666; margin-top: 3px;"></div>
                         <div id="phone-number-display"></div>
                         <div id="call-timer" style="display: none;">00:00</div>
                     </div>
@@ -7674,6 +7675,7 @@ class TWP_Admin {
                 
                 // Initialize the browser phone
                 function initializeBrowserPhone() {
+                    debugLog('initializeBrowserPhone called');
                     $('#phone-status').text('Initializing...');
                     updateConnectionStatus('connecting');
 
@@ -7751,13 +7753,16 @@ class TWP_Admin {
                 }
 
                 async function setupTwilioDevice(token) {
+                    debugLog('setupTwilioDevice called');
                     try {
                         // Check if Twilio SDK is available
+                        debugLog('Twilio check: ' + (typeof Twilio) + ', Device: ' + (typeof Twilio !== 'undefined' ? typeof Twilio.Device : 'N/A'));
                         if (typeof Twilio === 'undefined' || !Twilio.Device) {
                             throw new Error('Twilio Voice SDK not loaded');
                         }
 
                         console.log('Setting up Twilio Device...');
+                        debugLog('Creating Twilio.Device...');
                         updateConnectionStatus('connecting');
 
                         // Request media permissions before setting up device
@@ -7807,11 +7812,13 @@ class TWP_Admin {
                         });
 
                         console.log('Twilio Device created with audio constraints:', audioConstraints);
-                        
+                        debugLog('Device created, setting up handlers...');
+
                         // Set up event handlers BEFORE registering
                         // Device registered and ready
                         device.on('registered', function() {
                             console.log('Device registered successfully');
+                            debugLog('Device REGISTERED!');
                             $('#phone-status').text('Ready').css('color', '#4CAF50');
                             $('#call-btn').prop('disabled', false);
                             updateConnectionStatus('connected');
@@ -7893,10 +7900,13 @@ class TWP_Admin {
                         });
                         
                         // Register device AFTER setting up event handlers
+                        debugLog('Calling device.register()...');
                         await device.register();
-                        
+                        debugLog('device.register() completed');
+
                     } catch (error) {
                         console.error('Error setting up Twilio Device:', error);
+                        debugLog('ERROR: ' + error.message);
                         showError('Failed to setup device: ' + error.message);
                     }
                 }
@@ -8232,14 +8242,28 @@ class TWP_Admin {
                     }
                 });
                 
+                // Debug helper
+                function debugLog(msg) {
+                    console.log('TWP Debug: ' + msg);
+                    var debugEl = $('#twp-debug-info');
+                    if (debugEl.length) {
+                        debugEl.append(msg + '<br>');
+                    }
+                }
+
                 // Check if SDK loaded and initialize
+                debugLog('jQuery ready');
                 $(window).on('load', function() {
+                    debugLog('Window loaded');
                     setTimeout(function() {
+                        debugLog('Checking Twilio: ' + (typeof Twilio));
                         if (typeof Twilio === 'undefined') {
                             showError('Twilio Voice SDK failed to load. Please check your internet connection and try refreshing the page.');
                             console.error('Twilio SDK not found. Script may be blocked or failed to load.');
+                            debugLog('SDK FAILED');
                         } else {
                             console.log('Twilio SDK loaded successfully');
+                            debugLog('SDK OK, initializing...');
                             initializeBrowserPhone();
                         }
                     }, 1000);