Add automatic token refresh for browser phone to prevent timeouts

- Implement proactive token refresh 5 minutes before expiry (1-hour tokens)
- Add call-safe refresh logic that postpones refresh during active calls
- Replace fixed-interval refresh with smart scheduling based on token expiry
- Add proper cleanup on page unload to prevent memory leaks
- Enhance error handling with retry mechanisms for network failures
- Apply to both admin browser phone page and frontend shortcode

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

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

admin/class-twp-admin.php

@@ -5691,6 +5691,8 @@ class TWP_Admin {
                 var currentCall = null;
                 var callTimer = null;
                 var callStartTime = null;
+                var tokenRefreshTimer = null;
+                var tokenExpiry = null;
                 
                 // Wait for SDK to load
                 function waitForTwilioSDK(callback) {
@@ -5718,6 +5720,9 @@ class TWP_Admin {
                             if (response.success) {
                                 $('#browser-phone-error').hide();
                                 setupTwilioDevice(response.data.token);
+                                // Set token expiry and schedule refresh
+                                tokenExpiry = Date.now() + (response.data.expires_in || 3600) * 1000;
+                                scheduleTokenRefresh();
                             } else {
                                 // WordPress wp_send_json_error sends the error message as response.data
                                 var errorMsg = response.data || response.error || 'Unknown error';
@@ -5852,18 +5857,65 @@ class TWP_Admin {
                 }
                 
                 function refreshToken() {
+                    console.log('Refreshing capability token...');
+                    
+                    // Don't refresh if currently in a call
+                    if (currentCall) {
+                        console.log('Currently in call, postponing token refresh');
+                        setTimeout(refreshToken, 60000); // Retry in 1 minute
+                        return;
+                    }
+                    
                     $.post(ajaxurl, {
                         action: 'twp_generate_capability_token',
                         nonce: '<?php echo wp_create_nonce('twp_ajax_nonce'); ?>'
                     }, function(response) {
                         if (response.success && device) {
+                            console.log('Token refreshed successfully');
                             device.updateToken(response.data.token);
+                            // Update token expiry and schedule next refresh
+                            tokenExpiry = Date.now() + (response.data.expires_in || 3600) * 1000;
+                            scheduleTokenRefresh();
+                        } else {
+                            console.error('Failed to refresh token:', response.data);
+                            showError('Failed to refresh connection. Please refresh the page.');
                         }
                     }).fail(function() {
-                        console.error('Failed to refresh token');
+                        console.error('Failed to refresh token - network error');
+                        // Retry in 30 seconds
+                        setTimeout(refreshToken, 30000);
                     });
                 }
                 
+                /**
+                 * Schedule token refresh
+                 * Refreshes token 5 minutes before expiry
+                 */
+                function scheduleTokenRefresh() {
+                    // Clear any existing timer
+                    if (tokenRefreshTimer) {
+                        clearTimeout(tokenRefreshTimer);
+                    }
+                    
+                    if (!tokenExpiry) {
+                        console.error('Token expiry time not set');
+                        return;
+                    }
+                    
+                    // Calculate time until refresh (5 minutes before expiry)
+                    var refreshBuffer = 5 * 60 * 1000; // 5 minutes in milliseconds
+                    var timeUntilRefresh = tokenExpiry - Date.now() - refreshBuffer;
+                    
+                    if (timeUntilRefresh <= 0) {
+                        // Token needs refresh immediately
+                        refreshToken();
+                    } else {
+                        // Schedule refresh
+                        console.log('Scheduling token refresh in', Math.round(timeUntilRefresh / 1000), 'seconds');
+                        tokenRefreshTimer = setTimeout(refreshToken, timeUntilRefresh);
+                    }
+                }
+                
                 function showError(message) {
                     $('#browser-phone-error').html('<p><strong>Error:</strong> ' + message + '</p>').show();
                     $('#phone-status').text('Error').css('color', '#f44336');
@@ -6005,8 +6057,15 @@ class TWP_Admin {
                     }, 1000);
                 });
                 
-                // Refresh token every 50 minutes (tokens expire in 1 hour)
+                // Clean up on page unload
-                setInterval(initializeBrowserPhone, 50 * 60 * 1000);
+                $(window).on('beforeunload', function() {
+                    if (tokenRefreshTimer) {
+                        clearTimeout(tokenRefreshTimer);
+                    }
+                    if (device) {
+                        device.destroy();
+                    }
+                });
                 
                 // Mode switching functionality
                 $('input[name="call_mode"]').on('change', function() {

assets/js/browser-phone-frontend.js

@@ -13,6 +13,8 @@
     let availableNumbers = [];
     let userQueues = [];
     let selectedQueue = null;
+    let tokenRefreshTimer = null;
+    let tokenExpiry = null;
     
     // Initialize when document is ready
     $(document).ready(function() {
@@ -86,6 +88,9 @@
                 success: function(response) {
                     if (response.success) {
                         setupTwilioDevice(response.data.token);
+                        // Set token expiry time (expires in 1 hour)
+                        tokenExpiry = Date.now() + (response.data.expires_in || 3600) * 1000;
+                        scheduleTokenRefresh();
                     } else {
                         updateStatus('offline', 'Failed to initialize');
                         showMessage('Failed to initialize browser phone: ' + (response.data || 'Unknown error'), 'error');
@@ -112,6 +117,12 @@
         }
         
         try {
+            // If device already exists, destroy it first to prevent multiple connections
+            if (twilioDevice) {
+                twilioDevice.destroy();
+                twilioDevice = null;
+            }
+            
             twilioDevice = new Twilio.Device(token, {
                 logLevel: 1,
                 answerOnBridge: true
@@ -120,13 +131,21 @@
             twilioDevice.on('registered', function() {
                 updateStatus('online', 'Ready');
                 isConnected = true;
-                showMessage('Browser phone ready!', 'success');
+                // Only show success message on initial connection
+                if (!tokenRefreshTimer) {
+                    showMessage('Browser phone ready!', 'success');
+                }
             });
             
             twilioDevice.on('error', function(error) {
                 console.error('Twilio Device Error:', error);
                 updateStatus('offline', 'Error: ' + error.message);
                 showMessage('Device error: ' + error.message, 'error');
+                
+                // If token expired error, refresh immediately
+                if (error.message && error.message.toLowerCase().includes('token')) {
+                    refreshToken();
+                }
             });
             
             twilioDevice.on('incoming', function(call) {
@@ -641,5 +660,88 @@
         }
     }, 30000); // Every 30 seconds
     
+    /**
+     * Schedule token refresh
+     * Refreshes token 5 minutes before expiry
+     */
+    function scheduleTokenRefresh() {
+        // Clear any existing timer
+        if (tokenRefreshTimer) {
+            clearTimeout(tokenRefreshTimer);
+        }
+        
+        if (!tokenExpiry) {
+            console.error('Token expiry time not set');
+            return;
+        }
+        
+        // Calculate time until refresh (5 minutes before expiry)
+        const refreshBuffer = 5 * 60 * 1000; // 5 minutes in milliseconds
+        const timeUntilRefresh = tokenExpiry - Date.now() - refreshBuffer;
+        
+        if (timeUntilRefresh <= 0) {
+            // Token needs refresh immediately
+            refreshToken();
+        } else {
+            // Schedule refresh
+            console.log('Scheduling token refresh in', Math.round(timeUntilRefresh / 1000), 'seconds');
+            tokenRefreshTimer = setTimeout(refreshToken, timeUntilRefresh);
+        }
+    }
+    
+    /**
+     * Refresh the capability token
+     */
+    function refreshToken() {
+        console.log('Refreshing capability token...');
+        
+        // Don't refresh if currently in a call
+        if (currentCall) {
+            console.log('Currently in call, postponing token refresh');
+            // Retry in 1 minute
+            setTimeout(refreshToken, 60000);
+            return;
+        }
+        
+        $.ajax({
+            url: twp_frontend_ajax.ajax_url,
+            method: 'POST',
+            data: {
+                action: 'twp_generate_capability_token',
+                nonce: twp_frontend_ajax.nonce
+            },
+            success: function(response) {
+                if (response.success) {
+                    console.log('Token refreshed successfully');
+                    // Update token expiry
+                    tokenExpiry = Date.now() + (response.data.expires_in || 3600) * 1000;
+                    // Update device with new token
+                    setupTwilioDevice(response.data.token);
+                    // Schedule next refresh
+                    scheduleTokenRefresh();
+                } else {
+                    console.error('Failed to refresh token:', response.data);
+                    updateStatus('offline', 'Token refresh failed');
+                    showMessage('Failed to refresh connection. Please refresh the page.', 'error');
+                }
+            },
+            error: function() {
+                console.error('Failed to refresh token - network error');
+                updateStatus('offline', 'Connection lost');
+                // Retry in 30 seconds
+                setTimeout(refreshToken, 30000);
+            }
+        });
+    }
+    
+    // Clean up on page unload
+    $(window).on('beforeunload', function() {
+        if (tokenRefreshTimer) {
+            clearTimeout(tokenRefreshTimer);
+        }
+        if (twilioDevice) {
+            twilioDevice.destroy();
+        }
+    });
     
 })(jQuery);