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>

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);