Add comprehensive console debugging to SSE diagnostic test

Enhanced JavaScript debugging with:
- Detailed connection state logging (CONNECTING/OPEN/CLOSED)
- EventSource object inspection
- Real-time readyState monitoring
- Verbose error information (type, target, readyState)
- URL and location details for troubleshooting
- Console grouping for organized output

This will help diagnose SSE connection issues by providing
detailed information in the browser console.

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

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

server/php/diagnostic.php

@@ -162,43 +162,95 @@
             const time = new Date().toLocaleTimeString();
             sseLog.innerHTML += `[${time}] ${message}<br>`;
             sseLog.scrollTop = sseLog.scrollHeight;
+            console.log(`[SSE Test] ${message}`);
         }
 
         // Create test room
         const testRoom = 'diagnostic-test-' + Date.now();
         const url = `server.php?action=stream&room=${encodeURIComponent(testRoom)}`;
 
+        console.group('SSE Connection Test');
+        console.log('Test Room:', testRoom);
+        console.log('Full URL:', url);
+        console.log('Current Location:', window.location.href);
+        console.log('Base URL:', window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, '/'));
+
         log(`Attempting to connect to: ${url}`);
 
         try {
             const eventSource = new EventSource(url);
 
-            eventSource.onopen = () => {
+            console.log('EventSource object created:', eventSource);
+            console.log('EventSource readyState:', eventSource.readyState, '(0=CONNECTING, 1=OPEN, 2=CLOSED)');
+            console.log('EventSource url:', eventSource.url);
+
+            eventSource.onopen = (event) => {
+                console.log('EventSource.onopen fired:', event);
+                console.log('ReadyState after open:', eventSource.readyState);
                 sseStatus.innerHTML = '<span style="color: #4CAF50; font-weight: bold;">✓ SSE Connected</span>';
                 log('✓ Connection established');
                 log('✓ Server-Sent Events are working');
 
                 // Close after successful connection
                 setTimeout(() => {
+                    console.log('Closing EventSource after successful test');
                     eventSource.close();
                     log('Connection test complete - closing');
+                    console.groupEnd();
                 }, 2000);
             };
 
             eventSource.onmessage = (event) => {
+                console.log('EventSource.onmessage:', event);
+                console.log('Message data:', event.data);
+                console.log('Event ID:', event.lastEventId);
                 log('Received message: ' + event.data);
             };
 
             eventSource.onerror = (error) => {
+                console.error('EventSource.onerror fired:', error);
+                console.error('ReadyState on error:', eventSource.readyState);
+                console.error('EventSource URL:', eventSource.url);
+
+                // Try to get more info from the error
+                console.error('Error type:', error.type);
+                console.error('Error target:', error.target);
+                console.error('Error currentTarget:', error.currentTarget);
+
+                // Check if it's a network error
+                if (eventSource.readyState === EventSource.CLOSED) {
+                    console.error('Connection is CLOSED - this usually indicates a network error or server rejection');
+                } else if (eventSource.readyState === EventSource.CONNECTING) {
+                    console.warn('Still CONNECTING - may be retrying');
+                }
+
                 sseStatus.innerHTML = '<span style="color: #f44336; font-weight: bold;">✗ SSE Failed</span>';
                 log('✗ Connection error occurred');
-                log('Error: ' + JSON.stringify(error));
+                log('ReadyState: ' + eventSource.readyState + ' (0=CONNECTING, 1=OPEN, 2=CLOSED)');
-                log('Check browser console for more details');
+                log('Check browser console for detailed error information');
+
                 eventSource.close();
+                console.groupEnd();
             };
+
+            // Monitor readyState changes
+            let lastReadyState = eventSource.readyState;
+            const stateMonitor = setInterval(() => {
+                if (eventSource.readyState !== lastReadyState) {
+                    console.log('ReadyState changed:', lastReadyState, '→', eventSource.readyState);
+                    lastReadyState = eventSource.readyState;
+                }
+                if (eventSource.readyState === EventSource.CLOSED) {
+                    clearInterval(stateMonitor);
+                }
+            }, 100);
+
         } catch (error) {
+            console.error('Exception creating EventSource:', error);
+            console.error('Error stack:', error.stack);
             sseStatus.innerHTML = '<span style="color: #f44336; font-weight: bold;">✗ SSE Error</span>';
             log('✗ Exception: ' + error.message);
+            console.groupEnd();
         }
     </script>
 </body>