claude-mpm 4.1.26__py3-none-any.whl → 5.0.9__py3-none-any.whl

claude_mpm/dashboard/static/js/socket-client.js

@@ -1,38 +1,38 @@
 /**
  * Socket.IO Client for Claude MPM Dashboard
- * 
+ *
  * This module provides real-time WebSocket communication between the Claude MPM dashboard
  * and the backend Socket.IO server. It handles connection management, event processing,
  * retry logic, and health monitoring.
- * 
+ *
  * Architecture:
  * - Maintains persistent WebSocket connection to Claude MPM backend
  * - Implements robust retry logic with exponential backoff
  * - Provides event queuing during disconnections
  * - Validates event schemas for data integrity
  * - Monitors connection health with ping/pong mechanisms
- * 
+ *
  * Event Flow:
  * 1. Events from Claude Code hooks → Socket.IO server → Dashboard client
  * 2. Dashboard requests → Socket.IO server → Backend services
  * 3. Status updates → Socket.IO server → All connected clients
- * 
+ *
  * Thread Safety:
  * - Single-threaded JavaScript execution model ensures safety
  * - Event callbacks are queued and executed sequentially
  * - Connection state changes are atomic
- * 
+ *
  * Performance Considerations:
  * - Event queue limited to 100 items to prevent memory leaks
  * - Health checks run every 45s to match server ping interval
  * - Exponential backoff prevents connection spam
  * - Lazy event validation reduces overhead
- * 
+ *
  * Security:
  * - Connects only to localhost to prevent external access
  * - Event schema validation prevents malformed data processing
  * - Connection timeout prevents hanging connections
- * 
+ *
  * @author Claude MPM Team
  * @version 1.0
  * @since v4.0.25
@@ -44,42 +44,42 @@ const io = window.io;
 
 /**
  * Primary Socket.IO client for dashboard communication.
- * 
+ *
  * Manages WebSocket connection lifecycle, event processing, and error handling.
  * Implements connection resilience with automatic retry and health monitoring.
- * 
+ *
  * Key Features:
  * - Automatic connection retry with exponential backoff
- * - Event queue management during disconnections  
+ * - Event queue management during disconnections
  * - Schema validation for incoming events
  * - Health monitoring with ping/pong
  * - Session management and event history
- * 
+ *
  * Connection States:
  * - isConnected: Currently connected to server
  * - isConnecting: Connection attempt in progress
  * - disconnectTime: Timestamp of last disconnection
- * 
+ *
  * Event Processing:
  * - Validates against schema before processing
  * - Queues events during disconnection (max 100)
  * - Maintains event history and session tracking
- * 
+ *
  * @class SocketClient
  */
 class SocketClient {
     /**
      * Initialize Socket.IO client with default configuration.
-     * 
+     *
      * Sets up connection management, event processing, and health monitoring.
      * Configures retry logic and event queue management.
-     * 
+     *
      * WHY this initialization approach:
      * - Lazy socket creation allows for port specification
      * - Event queue prevents data loss during reconnections
      * - Health monitoring detects server issues early
      * - Schema validation ensures data integrity
-     * 
+     *
      * @constructor
      */
     constructor() {
@@ -89,14 +89,14 @@ class SocketClient {
          * @private
          */
         this.socket = null;
-        
+
         /**
          * Current connection port.
          * @type {string|null}
          * @private
          */
         this.port = null; // Store the current port
-        
+
         /**
          * Event callback registry for connection lifecycle events.
          * WHY: Allows multiple components to register for connection events.
@@ -105,11 +105,11 @@ class SocketClient {
          */
         this.connectionCallbacks = {
             connect: [],    // Called on successful connection
-            disconnect: [], // Called on disconnection  
+            disconnect: [], // Called on disconnection
             error: [],      // Called on connection errors
             event: []       // Called on incoming events
         };
-        
+
         /**
          * Event schema definition for validation.
          * WHY: Ensures data integrity and prevents processing malformed events.
@@ -127,7 +127,7 @@ class SocketClient {
          * @private
          */
         this.isConnected = false;
-        
+
         /**
          * Connection attempt in progress flag.
          * WHY: Prevents multiple simultaneous connection attempts.
@@ -135,14 +135,14 @@ class SocketClient {
          * @private
          */
         this.isConnecting = false;
-        
+
         /**
          * Timestamp of last successful connection.
          * @type {number|null}
          * @private
          */
         this.lastConnectTime = null;
-        
+
         /**
          * Timestamp of last disconnection.
          * WHY: Used to calculate downtime and trigger reconnection logic.
@@ -158,7 +158,7 @@ class SocketClient {
          * @private
          */
         this.events = [];
-        
+
         /**
          * Session tracking map.
          * WHY: Groups events by session for better organization.
@@ -166,7 +166,7 @@ class SocketClient {
          * @private
          */
         this.sessions = new Map();
-        
+
         /**
          * Current active session identifier.
          * @type {string|null}
@@ -181,7 +181,7 @@ class SocketClient {
          * @private
          */
         this.eventQueue = [];
-        
+
         /**
          * Maximum queue size to prevent memory leaks.
          * WHY: Limits memory usage during extended disconnections.
@@ -190,7 +190,7 @@ class SocketClient {
          * @const
          */
         this.maxQueueSize = 100;
-        
+
         /**
          * Current retry attempt counter.
          * WHY: Tracks retry attempts for exponential backoff logic.
@@ -198,7 +198,7 @@ class SocketClient {
          * @private
          */
         this.retryAttempts = 0;
-        
+
         /**
          * Maximum retry attempts before giving up.
          * WHY: Prevents infinite retry loops that could impact performance.
@@ -207,7 +207,7 @@ class SocketClient {
          * @const
          */
         this.maxRetryAttempts = 5;  // Increased from 3 to 5 for better stability
-        
+
         /**
          * Retry delay intervals in milliseconds (exponential backoff).
          * WHY: Prevents server overload during connection issues.
@@ -216,7 +216,7 @@ class SocketClient {
          * @const
          */
         this.retryDelays = [1000, 2000, 3000, 4000, 5000]; // Exponential backoff with 5 attempts
-        
+
         /**
          * Map of pending emissions for retry logic.
          * WHY: Tracks failed emissions that need to be retried.
@@ -224,7 +224,7 @@ class SocketClient {
          * @private
          */
         this.pendingEmissions = new Map(); // Track pending emissions for retry
-        
+
         /**
          * Timestamp of last ping sent to server.
          * WHY: Used for health monitoring and connection validation.
@@ -232,7 +232,7 @@ class SocketClient {
          * @private
          */
         this.lastPingTime = null;
-        
+
         /**
          * Timestamp of last pong received from server.
          * WHY: Confirms server is responsive and connection is healthy.
@@ -240,7 +240,7 @@ class SocketClient {
          * @private
          */
         this.lastPongTime = null;
-        
+
         /**
          * Health check timeout in milliseconds.
          * WHY: More lenient than Socket.IO timeout to prevent false positives.
@@ -248,15 +248,15 @@ class SocketClient {
          * @private
          * @const
          */
-        this.pingTimeout = 90000; // 90 seconds for health check (more lenient than Socket.IO timeout)
-        
+        this.pingTimeout = 120000; // 120 seconds for health check (more lenient for stability)
+
         /**
          * Health check interval timer.
          * @type {number|null}
          * @private
          */
         this.healthCheckInterval = null;
-        
+
         // Initialize background monitoring
         this.startStatusCheckFallback();
         this.startHealthMonitoring();
@@ -264,27 +264,27 @@ class SocketClient {
 
     /**
      * Connect to Socket.IO server on specified port.
-     * 
+     *
      * Initiates WebSocket connection to the Claude MPM Socket.IO server.
      * Handles connection conflicts and ensures clean state transitions.
-     * 
+     *
      * Connection Process:
      * 1. Validates port and constructs localhost URL
      * 2. Checks for existing connections and cleans up if needed
      * 3. Delegates to doConnect() for actual connection logic
-     * 
+     *
      * Thread Safety:
      * - Uses setTimeout for async cleanup to prevent race conditions
      * - Connection state flags prevent multiple simultaneous attempts
-     * 
+     *
      * @param {string} [port='8765'] - Port number to connect to (defaults to 8765)
-     * 
+     *
      * @throws {Error} If Socket.IO library is not loaded
-     * 
+     *
      * @example
      * // Connect to default port
      * socketClient.connect();
-     * 
+     *
      * // Connect to specific port
      * socketClient.connect('8766');
      */
@@ -307,38 +307,38 @@ class SocketClient {
 
     /**
      * Execute the actual Socket.IO connection with full configuration.
-     * 
+     *
      * Creates and configures Socket.IO client with appropriate timeouts,
      * retry logic, and transport settings. Sets up event handlers for
      * connection lifecycle management.
-     * 
+     *
      * Configuration Details:
      * - autoConnect: true - Immediate connection attempt
      * - reconnection: true - Built-in reconnection enabled
      * - pingInterval: 25000ms - Matches server configuration
      * - pingTimeout: 20000ms - Health check timeout
      * - transports: ['websocket', 'polling'] - Fallback options
-     * 
+     *
      * WHY these settings:
      * - Ping intervals must match server to prevent timeouts
      * - Limited reconnection attempts prevent infinite loops
      * - forceNew prevents socket reuse issues
-     * 
+     *
      * @param {string} url - Complete Socket.IO server URL (http://localhost:port)
      * @private
-     * 
+     *
      * @throws {Error} If Socket.IO library is not available
      */
     doConnect(url) {
         console.log(`Connecting to Socket.IO server at ${url}`);
-        
+
         // Check if io is available
         if (typeof io === 'undefined') {
             console.error('Socket.IO library not loaded! Make sure socket.io.min.js is loaded before this script.');
             this.notifyConnectionStatus('Socket.IO library not loaded', 'error');
             return;
         }
-        
+
         this.isConnecting = true;
         this.notifyConnectionStatus('Connecting...', 'connecting');
 
@@ -346,13 +346,13 @@ class SocketClient {
             autoConnect: true,
             reconnection: true,
             reconnectionDelay: 1000,
-            reconnectionDelayMax: 5000,
-            reconnectionAttempts: 5,  // Try 5 times then stop (was Infinity which can cause issues)
-            timeout: 20000,  // Connection timeout
+            reconnectionDelayMax: 10000,  // Increased max delay for stability
+            reconnectionAttempts: 10,  // Increased attempts for better resilience
+            timeout: 30000,  // Increased connection timeout to 30 seconds
             forceNew: true,
             transports: ['websocket', 'polling'],
-            pingInterval: 25000,  // CRITICAL: Must match server's 25 seconds
-            pingTimeout: 20000    // CRITICAL: Must match server's 20 seconds
+            // Remove client-side ping configuration - let server control this
+            // The server now properly configures: ping_interval=30s, ping_timeout=60s
         });
 
         this.setupSocketHandlers();
@@ -369,16 +369,16 @@ class SocketClient {
             this.isConnecting = false;
             this.lastConnectTime = Date.now();
             this.retryAttempts = 0; // Reset retry counter on successful connect
-            
+
             // Calculate downtime if this is a reconnection
             if (this.disconnectTime && previouslyConnected === false) {
                 const downtime = (Date.now() - this.disconnectTime) / 1000;
                 console.log(`Reconnected after ${downtime.toFixed(1)}s downtime`);
-                
+
                 // Flush queued events after reconnection
                 this.flushEventQueue();
             }
-            
+
             this.notifyConnectionStatus('Connected', 'connected');
 
             // Expose socket globally for components that need direct access
@@ -405,20 +405,20 @@ class SocketClient {
                 lastPing: this.lastPingTime ? ((Date.now() - this.lastPingTime) / 1000).toFixed(1) + 's ago' : 'never',
                 lastPong: this.lastPongTime ? ((Date.now() - this.lastPongTime) / 1000).toFixed(1) + 's ago' : 'never'
             };
-            
+
             console.log('Disconnected from server:', disconnectInfo);
-            
+
             this.isConnected = false;
             this.isConnecting = false;
             this.disconnectTime = Date.now();
-            
+
             this.notifyConnectionStatus(`Disconnected: ${reason}`, 'disconnected');
 
             // Emit disconnect callback
             this.connectionCallbacks.disconnect.forEach(callback =>
                 callback(reason)
             );
-            
+
             // Detailed reason analysis for auto-reconnect decision
             const reconnectReasons = [
                 'transport close',      // Network issue
@@ -426,7 +426,7 @@ class SocketClient {
                 'transport error',      // Connection error
                 'io server disconnect', // Server initiated disconnect (might be restart)
             ];
-            
+
             if (reconnectReasons.includes(reason)) {
                 console.log(`Auto-reconnect triggered for reason: ${reason}`);
                 this.scheduleReconnect();
@@ -448,8 +448,8 @@ class SocketClient {
             this.addEvent({
                 type: 'connection.error',
                 timestamp: new Date().toISOString(),
-                data: { 
-                    error: errorMsg, 
+                data: {
+                    error: errorMsg,
                     url: this.socket.io.uri,
                     retry_attempt: this.retryAttempts
                 }
@@ -459,7 +459,7 @@ class SocketClient {
             this.connectionCallbacks.error.forEach(callback =>
                 callback(errorMsg)
             );
-            
+
             // Schedule reconnect with backoff
             this.scheduleReconnect();
         });
@@ -467,20 +467,20 @@ class SocketClient {
         // Primary event handler - this is what the server actually emits
         this.socket.on('claude_event', (data) => {
             console.log('Received claude_event:', data);
-            
+
             // Validate event schema
             const validatedEvent = this.validateEventSchema(data);
             if (!validatedEvent) {
                 console.warn('Invalid event schema received:', data);
                 return;
             }
-            
+
             // Code analysis events are now allowed to flow through to the events list for troubleshooting
             // They will appear in both the Events tab and the Code tab
             if (validatedEvent.type && validatedEvent.type.startsWith('code:')) {
                 console.log('Code analysis event received via claude_event, adding to events list for troubleshooting:', validatedEvent.type);
             }
-            
+
             // Transform event to match expected format (for backward compatibility)
             const transformedEvent = this.transformEvent(validatedEvent);
             console.log('Transformed event:', transformedEvent);
@@ -491,20 +491,38 @@ class SocketClient {
         this.socket.on('ping', (data) => {
             // console.log('Received ping from server');
             this.lastPingTime = Date.now();
-            
+
             // Send pong response immediately
-            this.socket.emit('pong', { 
+            this.socket.emit('pong', {
                 timestamp: data.timestamp,
                 client_time: Date.now()
             });
         });
-        
+
         // Track pong responses from server
         this.socket.on('pong', (data) => {
             this.lastPongTime = Date.now();
             // console.log('Received pong from server');
         });
-        
+
+        // Listen for heartbeat events from server (every 3 minutes)
+        this.socket.on('heartbeat', (data) => {
+            console.log('🫀 Received server heartbeat:', data);
+            // Add heartbeat to event list for visibility
+            this.addEvent({
+                type: 'system',
+                subtype: 'heartbeat',
+                timestamp: data.timestamp || new Date().toISOString(),
+                data: data
+            });
+
+            // Update last ping time to indicate server is alive
+            this.lastPingTime = Date.now();
+
+            // Log to console for debugging
+            console.log(`Server heartbeat #${data.heartbeat_number}: ${data.server_uptime_formatted} uptime, ${data.connected_clients} clients connected`);
+        });
+
         // Session and event handlers (legacy/fallback)
         this.socket.on('session.started', (data) => {
             this.addEvent({ type: 'session', subtype: 'started', timestamp: new Date().toISOString(), data });
@@ -530,13 +548,15 @@ class SocketClient {
             this.addEvent({ type: 'agent', subtype: 'executed', timestamp: new Date().toISOString(), data });
         });
 
-        this.socket.on('hook.pre', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
-        });
+        // DISABLED: Legacy hook handlers - events now come through claude_event pathway
+        // to prevent duplication. Hook events are processed by the claude_event handler above.
+        // this.socket.on('hook.pre', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
+        // });
 
-        this.socket.on('hook.post', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
-        });
+        // this.socket.on('hook.post', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
+        // });
 
         this.socket.on('todo.updated', (data) => {
             this.addEvent({ type: 'todo', subtype: 'updated', timestamp: new Date().toISOString(), data });
@@ -558,43 +578,43 @@ class SocketClient {
             console.log('Code analysis queued event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'analysis:queued', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:analysis:accepted', (data) => {
             // Add to events list for troubleshooting
             console.log('Code analysis accepted event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'analysis:accepted', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:analysis:start', (data) => {
             // Add to events list for troubleshooting
             console.log('Code analysis start event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'analysis:start', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:analysis:complete', (data) => {
             // Add to events list for troubleshooting
             console.log('Code analysis complete event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'analysis:complete', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:analysis:error', (data) => {
             // Add to events list for troubleshooting
             console.log('Code analysis error event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'analysis:error', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:file:start', (data) => {
             // Add to events list for troubleshooting
             console.log('Code file start event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'file:start', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:node:found', (data) => {
             // Add to events list for troubleshooting
             console.log('Code node found event received, adding to events list for troubleshooting');
             this.addEvent({ type: 'code', subtype: 'node:found', timestamp: new Date().toISOString(), data });
         });
-        
+
         this.socket.on('code:analysis:progress', (data) => {
             // Add to events list for troubleshooting
             console.log('Code analysis progress event received, adding to events list for troubleshooting');
@@ -613,6 +633,15 @@ class SocketClient {
                 });
                 this.notifyEventUpdate();
                 console.log(`Event history loaded: ${data.events.length} events added to dashboard`);
+
+                // FIX: Dispatch custom event after history is loaded
+                // WHY: Allows dashboard to render panes with initial data
+                document.dispatchEvent(new CustomEvent('historyLoaded', {
+                    detail: {
+                        eventCount: data.events.length,
+                        totalAvailable: data.total_available
+                    }
+                }));
             } else if (Array.isArray(data)) {
                 // Handle legacy format for backward compatibility
                 console.log('Received legacy event history format:', data.length, 'events');
@@ -621,6 +650,14 @@ class SocketClient {
                     this.addEvent(transformedEvent, false);
                 });
                 this.notifyEventUpdate();
+
+                // FIX: Dispatch custom event for legacy format too
+                document.dispatchEvent(new CustomEvent('historyLoaded', {
+                    detail: {
+                        eventCount: data.length,
+                        totalAvailable: data.length
+                    }
+                }));
             }
         });
 
@@ -655,15 +692,15 @@ class SocketClient {
      * @param {Object} options - Options for retry behavior
      */
     emitWithRetry(event, data = null, options = {}) {
-        const { 
+        const {
             maxRetries = 3,
             retryDelays = [1000, 2000, 4000],
             onSuccess = null,
             onFailure = null
         } = options;
-        
+
         const emissionId = `${event}_${Date.now()}_${Math.random()}`;
-        
+
         const attemptEmission = (attemptNum = 0) => {
             if (!this.socket || !this.socket.connected) {
                 // Queue for later if disconnected
@@ -674,24 +711,24 @@ class SocketClient {
                 }
                 return;
             }
-            
+
             try {
                 // Attempt emission
                 this.socket.emit(event, data);
                 console.log(`Emitted ${event} successfully`);
-                
+
                 // Remove from pending
                 this.pendingEmissions.delete(emissionId);
-                
+
                 if (onSuccess) onSuccess();
-                
+
             } catch (error) {
                 console.error(`Failed to emit ${event} (attempt ${attemptNum + 1}):`, error);
-                
+
                 if (attemptNum < maxRetries - 1) {
                     const delay = retryDelays[attemptNum] || retryDelays[retryDelays.length - 1];
                     console.log(`Retrying ${event} in ${delay}ms...`);
-                    
+
                     // Store pending emission
                     this.pendingEmissions.set(emissionId, {
                         event,
@@ -699,7 +736,7 @@ class SocketClient {
                         attemptNum: attemptNum + 1,
                         scheduledTime: Date.now() + delay
                     });
-                    
+
                     setTimeout(() => attemptEmission(attemptNum + 1), delay);
                 } else {
                     console.error(`Failed to emit ${event} after ${maxRetries} attempts`);
@@ -708,10 +745,10 @@ class SocketClient {
                 }
             }
         };
-        
+
         attemptEmission();
     }
-    
+
     /**
      * Queue an event for later emission
      * @param {string} event - Event name
@@ -723,24 +760,24 @@ class SocketClient {
             const removed = this.eventQueue.shift();
             console.warn(`Event queue full, dropped oldest event: ${removed.event}`);
         }
-        
+
         this.eventQueue.push({
             event,
             data,
             timestamp: Date.now()
         });
     }
-    
+
     /**
      * Flush queued events after reconnection
      */
     flushEventQueue() {
         if (this.eventQueue.length === 0) return;
-        
+
         console.log(`Flushing ${this.eventQueue.length} queued events...`);
         const events = [...this.eventQueue];
         this.eventQueue = [];
-        
+
         // Emit each queued event with a small delay between them
         events.forEach((item, index) => {
             setTimeout(() => {
@@ -751,7 +788,7 @@ class SocketClient {
             }, index * 100); // 100ms between each event
         });
     }
-    
+
     /**
      * Schedule a reconnection attempt with exponential backoff
      */
@@ -761,13 +798,13 @@ class SocketClient {
             this.notifyConnectionStatus('Reconnection failed', 'disconnected');
             return;
         }
-        
+
         const delay = this.retryDelays[this.retryAttempts] || this.retryDelays[this.retryDelays.length - 1];
         this.retryAttempts++;
-        
+
         console.log(`Scheduling reconnect attempt ${this.retryAttempts}/${this.maxRetryAttempts} in ${delay}ms...`);
         this.notifyConnectionStatus(`Reconnecting in ${delay/1000}s...`, 'connecting');
-        
+
         setTimeout(() => {
             if (!this.isConnected && this.port) {
                 console.log(`Attempting reconnection ${this.retryAttempts}/${this.maxRetryAttempts}...`);
@@ -775,7 +812,7 @@ class SocketClient {
             }
         }, delay);
     }
-    
+
     /**
      * Request server status
      */
@@ -846,7 +883,7 @@ class SocketClient {
             const session = this.sessions.get(sessionId);
             session.lastActivity = eventData.timestamp;
             session.eventCount++;
-            
+
             // Extract working directory from event data if available (prioritize newer data)
             // Check multiple possible locations for working directory
             const possiblePaths = [
@@ -861,7 +898,7 @@ class SocketClient {
                 eventData.working_directory,
                 eventData.working_dir
             ];
-            
+
             for (const path of possiblePaths) {
                 if (path && typeof path === 'string' && path.trim()) {
                     session.working_directory = path;
@@ -869,7 +906,7 @@ class SocketClient {
                     break;
                 }
             }
-            
+
             // Extract git branch if available
             if (eventData.data.git_branch) {
                 session.git_branch = eventData.data.git_branch;
@@ -1045,10 +1082,10 @@ class SocketClient {
             console.warn('Event data is not an object:', eventData);
             return null;
         }
-        
+
         // Make a copy to avoid modifying the original
         const validated = { ...eventData };
-        
+
         // Check and provide defaults for required fields
         if (!validated.source) {
             validated.source = 'system';  // Default source for backward compatibility
@@ -1070,16 +1107,16 @@ class SocketClient {
         if (!validated.data) {
             validated.data = {};
         }
-        
+
         // Ensure data field is an object
         if (validated.data && typeof validated.data !== 'object') {
             validated.data = { value: validated.data };
         }
-        
+
         console.log('Validated event:', validated);
         return validated;
     }
-    
+
     /**
      * Transform received event to match expected dashboard format
      * @param {Object} eventData - Raw event data from server
@@ -1100,8 +1137,8 @@ class SocketClient {
 
         // Check if event is already normalized (has both type and subtype as separate fields)
         // This prevents double-transformation of events that were normalized on the backend
-        const isAlreadyNormalized = eventData.type && eventData.subtype && 
-                                   !eventData.type.includes('.') && 
+        const isAlreadyNormalized = eventData.type && eventData.subtype &&
+                                   !eventData.type.includes('.') &&
                                    !eventData.type.includes(':');
 
         if (isAlreadyNormalized) {
@@ -1120,7 +1157,7 @@ class SocketClient {
         else if (!eventData.type && eventData.event) {
             // Map common event names to proper type/subtype
             const eventName = eventData.event;
-            
+
             // Check for known event patterns
             if (eventName === 'TestStart' || eventName === 'TestEnd') {
                 transformedEvent.type = 'test';
@@ -1139,13 +1176,13 @@ class SocketClient {
                 // Use 'unknown' for type and the actual eventName for subtype
                 transformedEvent.type = 'unknown';
                 transformedEvent.subtype = eventName.toLowerCase();
-                
+
                 // Prevent duplicate type/subtype values
                 if (transformedEvent.type === transformedEvent.subtype) {
                     transformedEvent.subtype = 'event';
                 }
             }
-            
+
             // Remove the 'event' field to avoid confusion
             delete transformedEvent.event;
             // Store original event name for display purposes
@@ -1154,7 +1191,7 @@ class SocketClient {
         // Handle standard format with 'type' field that needs transformation
         else if (eventData.type) {
             const type = eventData.type;
-            
+
             // Transform 'hook.subtype' format to separate type and subtype
             if (type.startsWith('hook.')) {
                 const subtype = type.substring(5); // Remove 'hook.' prefix
@@ -1204,7 +1241,7 @@ class SocketClient {
         if (eventData.data && typeof eventData.data === 'object') {
             // Protected fields that should never be overwritten by data fields
             const protectedFields = ['type', 'subtype', 'timestamp', 'id', 'event', 'event_type', 'originalEventName'];
-            
+
             // Copy all data fields to the top level, except protected ones
             Object.keys(eventData.data).forEach(key => {
                 // Only copy if not a protected field
@@ -1218,11 +1255,14 @@ class SocketClient {
                         transformedEvent[key] = eventData.data[key];
                     }
                 } else {
-                    // Log warning if data field would overwrite a protected field
-                    console.warn(`Protected field '${key}' in data object was not copied to top level to preserve event structure`);
+                    // Log debug info if data field would overwrite a protected field
+                    // Only log for non-timestamp fields to reduce noise
+                    if (key !== 'timestamp') {
+                        console.debug(`Protected field '${key}' in data object was not copied to top level to preserve event structure`);
+                    }
                 }
             });
-            
+
             // Keep the original data object for backward compatibility
             transformedEvent.data = eventData.data;
         }
@@ -1267,7 +1307,7 @@ class SocketClient {
                 has_data: !!transformedEvent.data,
                 keys: Object.keys(transformedEvent).filter(k => k !== 'data')
             });
-            
+
             // Extra debug logging for file-related tools
             const fileTools = ['Read', 'Write', 'Edit', 'MultiEdit', 'NotebookEdit'];
             if (fileTools.includes(transformedEvent.tool_name)) {
@@ -1304,10 +1344,10 @@ class SocketClient {
         this.healthCheckInterval = setInterval(() => {
             if (this.isConnected && this.lastPingTime) {
                 const timeSinceLastPing = Date.now() - this.lastPingTime;
-                
+
                 if (timeSinceLastPing > this.pingTimeout) {
                     console.warn(`No ping from server for ${timeSinceLastPing/1000}s, connection may be stale`);
-                    
+
                     // Force reconnection
                     if (this.socket) {
                         console.log('Forcing reconnection due to stale connection...');
@@ -1322,7 +1362,7 @@ class SocketClient {
             }
         }, 10000); // Check every 10 seconds
     }
-    
+
     /**
      * Stop health monitoring
      */
@@ -1332,7 +1372,7 @@ class SocketClient {
             this.healthCheckInterval = null;
         }
     }
-    
+
     /**
      * Start periodic status check as fallback mechanism
      * This ensures the UI stays in sync with actual socket state
@@ -1366,6 +1406,12 @@ class SocketClient {
                 actualType = 'connected';
                 this.isConnected = true;
                 this.isConnecting = false;
+
+                // Expose socket globally when connected
+                if (!window.socket) {
+                    window.socket = this.socket;
+                    console.log('SocketClient: Exposed socket globally as window.socket');
+                }
             } else if (this.socket.connecting || this.isConnecting) {
                 actualStatus = 'Connecting...';
                 actualType = 'connecting';
@@ -1378,17 +1424,15 @@ class SocketClient {
             }
         }
 
-        // Check if UI needs updating
+        // Always update status to ensure consistency
+        this.updateConnectionStatusDOM(actualStatus, actualType);
+
+        // Also ensure state is consistent
         const statusElement = document.getElementById('connection-status');
         if (statusElement) {
             const currentText = statusElement.textContent.replace('●', '').trim();
-            const currentClass = statusElement.className;
-            const expectedClass = `status-badge status-${actualType}`;
-
-            // Update if status text or class doesn't match
-            if (currentText !== actualStatus || currentClass !== expectedClass) {
-                console.log(`SocketClient: Fallback update - was '${currentText}' (${currentClass}), now '${actualStatus}' (${expectedClass})`);
-                this.updateConnectionStatusDOM(actualStatus, actualType);
+            if (currentText !== actualStatus) {
+                console.log(`SocketClient: Status sync - updating from '${currentText}' to '${actualStatus}'`);
             }
         }
     }
@@ -1405,7 +1449,7 @@ class SocketClient {
         this.eventQueue = [];
         this.pendingEmissions.clear();
     }
-    
+
     /**
      * Get connection metrics
      * @returns {Object} Connection metrics