claude-mpm 3.9.11__py3-none-any.whl → 4.0.4__py3-none-any.whl

claude_mpm/dashboard/static/js/extension-error-handler.js

@@ -0,0 +1,164 @@
+/**
+ * Browser Extension Error Handler
+ * 
+ * WHY: Browser extensions (like password managers, ad blockers, etc.) often inject
+ * scripts that use Chrome's message passing API. When these extensions have bugs
+ * or async handlers that don't properly respond, they generate console errors.
+ * 
+ * This module prevents those external errors from affecting our dashboard and
+ * provides clean error handling for known browser extension issues.
+ * 
+ * DESIGN DECISION: Rather than trying to fix third-party extension bugs, we:
+ * 1. Detect and suppress known harmless extension errors
+ * 2. Log them separately for debugging if needed
+ * 3. Ensure our dashboard remains functional regardless of extension conflicts
+ */
+
+class ExtensionErrorHandler {
+    constructor() {
+        this.extensionErrors = [];
+        this.suppressedPatterns = [
+            // Chrome extension message passing error
+            /listener indicated an asynchronous response.*message channel closed/i,
+            // Other common extension errors
+            /Extension context invalidated/i,
+            /Unchecked runtime\.lastError/i,
+            /Cannot access contents of url.*Extension/i,
+            /Blocked a frame with origin.*from accessing a cross-origin frame/i
+        ];
+        
+        this.setupErrorHandling();
+    }
+    
+    /**
+     * Set up global error handling to catch and suppress extension errors
+     */
+    setupErrorHandling() {
+        // Store original console.error
+        const originalConsoleError = console.error;
+        
+        // Override console.error to filter extension errors
+        console.error = (...args) => {
+            const errorString = args.join(' ');
+            
+            // Check if this is a known extension error
+            if (this.isExtensionError(errorString)) {
+                // Log to our internal list for debugging
+                this.extensionErrors.push({
+                    timestamp: new Date().toISOString(),
+                    error: errorString,
+                    suppressed: true
+                });
+                
+                // Optionally log with a prefix if debug mode is enabled
+                if (window.DEBUG_EXTENSION_ERRORS) {
+                    originalConsoleError.call(console, '[SUPPRESSED EXTENSION ERROR]:', ...args);
+                }
+                
+                // Don't propagate the error
+                return;
+            }
+            
+            // Pass through non-extension errors
+            originalConsoleError.call(console, ...args);
+        };
+        
+        // Handle uncaught promise rejections that might come from extensions
+        window.addEventListener('unhandledrejection', (event) => {
+            const errorString = event.reason?.toString() || '';
+            
+            if (this.isExtensionError(errorString)) {
+                // Prevent the default error handling
+                event.preventDefault();
+                
+                this.extensionErrors.push({
+                    timestamp: new Date().toISOString(),
+                    error: errorString,
+                    type: 'unhandled_rejection',
+                    suppressed: true
+                });
+                
+                if (window.DEBUG_EXTENSION_ERRORS) {
+                    console.warn('[SUPPRESSED EXTENSION REJECTION]:', event.reason);
+                }
+            }
+        });
+        
+        // Add a global message event listener with proper error handling
+        // This prevents our app from being affected by misbehaving extensions
+        window.addEventListener('message', (event) => {
+            // Only process messages from our own origin
+            if (event.origin !== window.location.origin) {
+                return;
+            }
+            
+            // Add timeout protection for any async operations
+            if (event.data && event.data.requiresResponse) {
+                const timeoutId = setTimeout(() => {
+                    console.warn('Message handler timeout - no response sent');
+                }, 5000);
+                
+                // Clear timeout when response is sent
+                if (event.ports && event.ports[0]) {
+                    const originalPostMessage = event.ports[0].postMessage;
+                    event.ports[0].postMessage = function(...args) {
+                        clearTimeout(timeoutId);
+                        return originalPostMessage.apply(this, args);
+                    };
+                }
+            }
+        });
+    }
+    
+    /**
+     * Check if an error string matches known extension error patterns
+     * @param {string} errorString - The error message to check
+     * @returns {boolean} - True if this is a known extension error
+     */
+    isExtensionError(errorString) {
+        return this.suppressedPatterns.some(pattern => pattern.test(errorString));
+    }
+    
+    /**
+     * Get suppressed extension errors for debugging
+     * @returns {Array} - List of suppressed errors
+     */
+    getSuppressedErrors() {
+        return this.extensionErrors;
+    }
+    
+    /**
+     * Clear the suppressed errors list
+     */
+    clearSuppressedErrors() {
+        this.extensionErrors = [];
+    }
+    
+    /**
+     * Enable or disable debug logging of extension errors
+     * @param {boolean} enabled - Whether to enable debug logging
+     */
+    setDebugMode(enabled) {
+        window.DEBUG_EXTENSION_ERRORS = enabled;
+        
+        if (enabled) {
+            console.log('Extension error debug mode enabled. Suppressed errors will be logged with [SUPPRESSED] prefix.');
+            console.log('Current suppressed errors:', this.getSuppressedErrors());
+        } else {
+            console.log('Extension error debug mode disabled. Extension errors will be silently suppressed.');
+        }
+    }
+}
+
+// Create and export singleton instance
+const extensionErrorHandler = new ExtensionErrorHandler();
+
+// Add to window for debugging access
+window.extensionErrorHandler = extensionErrorHandler;
+
+// Export for ES6 modules
+export { ExtensionErrorHandler, extensionErrorHandler };
+export default extensionErrorHandler;
+
+// Log initialization
+console.log('Extension error handler initialized. Use window.extensionErrorHandler.setDebugMode(true) to see suppressed errors.');

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

@@ -3,6 +3,9 @@
  * Handles WebSocket connections and event processing
  */
 
+// Access the global io from window object in ES6 module context
+const io = window.io;
+
 class SocketClient {
     constructor() {
         this.socket = null;
@@ -13,16 +16,16 @@ class SocketClient {
             error: [],
             event: []
         };
-        
+
         // Connection state
         this.isConnected = false;
         this.isConnecting = false;
-        
+
         // Event processing
         this.events = [];
         this.sessions = new Map();
         this.currentSessionId = null;
-        
+
         // Start periodic status check as fallback mechanism
         this.startStatusCheckFallback();
     }
@@ -35,7 +38,7 @@ class SocketClient {
         // Store the port for later use
         this.port = port;
         const url = `http://localhost:${port}`;
-        
+
         // Prevent multiple simultaneous connections
         if (this.socket && (this.socket.connected || this.socket.connecting)) {
             console.log('Already connected or connecting, disconnecting first...');
@@ -44,7 +47,7 @@ class SocketClient {
             setTimeout(() => this.doConnect(url), 100);
             return;
         }
-        
+
         this.doConnect(url);
     }
 
@@ -54,9 +57,17 @@ class SocketClient {
      */
     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');
-        
+
         this.socket = io(url, {
             autoConnect: true,
             reconnection: true,
@@ -67,7 +78,7 @@ class SocketClient {
             forceNew: true,
             transports: ['websocket', 'polling']
         });
-        
+
         this.setupSocketHandlers();
     }
 
@@ -80,55 +91,55 @@ class SocketClient {
             this.isConnected = true;
             this.isConnecting = false;
             this.notifyConnectionStatus('Connected', 'connected');
-            
+
             // Emit connect callback
-            this.connectionCallbacks.connect.forEach(callback => 
+            this.connectionCallbacks.connect.forEach(callback =>
                 callback(this.socket.id)
             );
-            
+
             this.requestStatus();
             // History is now automatically sent by server on connection
             // No need to explicitly request it
         });
-        
+
         this.socket.on('disconnect', (reason) => {
             console.log('Disconnected from server:', reason);
             this.isConnected = false;
             this.isConnecting = false;
             this.notifyConnectionStatus(`Disconnected: ${reason}`, 'disconnected');
-            
+
             // Emit disconnect callback
-            this.connectionCallbacks.disconnect.forEach(callback => 
+            this.connectionCallbacks.disconnect.forEach(callback =>
                 callback(reason)
             );
         });
-        
+
         this.socket.on('connect_error', (error) => {
             console.error('Connection error:', error);
             this.isConnecting = false;
             const errorMsg = error.message || error.description || 'Unknown error';
             this.notifyConnectionStatus(`Connection Error: ${errorMsg}`, 'disconnected');
-            
+
             // Add error event
             this.addEvent({
                 type: 'connection.error',
                 timestamp: new Date().toISOString(),
                 data: { error: errorMsg, url: this.socket.io.uri }
             });
-            
+
             // Emit error callback
-            this.connectionCallbacks.error.forEach(callback => 
+            this.connectionCallbacks.error.forEach(callback =>
                 callback(errorMsg)
             );
         });
 
         // Primary event handler - this is what the server actually emits
         this.socket.on('claude_event', (data) => {
-            console.log('Received claude_event:', data);
-            
+            // console.log('Received claude_event:', data);
+
             // Transform event to match expected format
             const transformedEvent = this.transformEvent(data);
-            console.log('Transformed event:', transformedEvent);
+            // console.log('Transformed event:', transformedEvent);
             this.addEvent(transformedEvent);
         });
 
@@ -310,7 +321,7 @@ class SocketClient {
         this.sessions.clear();
         this.notifyEventUpdate();
     }
-    
+
     /**
      * Clear events and request fresh history from server
      * @param {Object} options - History request options (same as requestHistory)
@@ -329,7 +340,7 @@ class SocketClient {
         if (!sessionId) {
             return this.events;
         }
-        return this.events.filter(event => 
+        return this.events.filter(event =>
             event.data && event.data.session_id === sessionId
         );
     }
@@ -360,10 +371,10 @@ class SocketClient {
      */
     notifyConnectionStatus(status, type) {
         console.log(`SocketClient: Connection status changed to '${status}' (${type})`);
-        
+
         // Direct DOM update - immediate and reliable
         this.updateConnectionStatusDOM(status, type);
-        
+
         // Also dispatch custom event for other modules
         document.dispatchEvent(new CustomEvent('socketConnectionStatus', {
             detail: { status, type }
@@ -380,10 +391,10 @@ class SocketClient {
         if (statusElement) {
             // Update the text content while preserving the indicator span
             statusElement.innerHTML = `<span>●</span> ${status}`;
-            
+
             // Update the CSS class for styling
             statusElement.className = `status-badge status-${type}`;
-            
+
             console.log(`SocketClient: Direct DOM update - status: '${status}' (${type})`);
         } else {
             console.warn('SocketClient: Could not find connection-status element in DOM');
@@ -394,10 +405,10 @@ class SocketClient {
      * Notify event update
      */
     notifyEventUpdate() {
-        this.connectionCallbacks.event.forEach(callback => 
+        this.connectionCallbacks.event.forEach(callback =>
             callback(this.events, this.sessions)
         );
-        
+
         // Also dispatch custom event
         document.dispatchEvent(new CustomEvent('socketEventUpdate', {
             detail: { events: this.events, sessions: this.sessions }
@@ -422,39 +433,104 @@ class SocketClient {
      * @returns {Object} Transformed event
      */
     transformEvent(eventData) {
-        // Handle the actual event structure sent from hook_handler.py:
-        // { type: 'hook.pre_tool', timestamp: '...', data: { tool_name: '...', agent_type: '...', etc } }
-        
-        if (!eventData || !eventData.type) {
-            return eventData; // Return as-is if malformed
+        // Handle multiple event structures:
+        // 1. Hook events: { type: 'hook.pre_tool', timestamp: '...', data: {...} }
+        // 2. Legacy events: { event: 'TestStart', timestamp: '...', ... }
+        // 3. Standard events: { type: 'session', subtype: 'started', ... }
+
+        if (!eventData) {
+            return eventData; // Return as-is if null/undefined
         }
 
-        const type = eventData.type;
         let transformedEvent = { ...eventData };
 
-        // Transform 'hook.subtype' format to separate type and subtype
-        if (type.startsWith('hook.')) {
-            const subtype = type.substring(5); // Remove 'hook.' prefix
-            transformedEvent.type = 'hook';
-            transformedEvent.subtype = subtype;
+        // Handle legacy format with 'event' field but no 'type'
+        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';
+                transformedEvent.subtype = eventName.toLowerCase().replace('test', '');
+            } else if (eventName === 'SubagentStart' || eventName === 'SubagentStop') {
+                transformedEvent.type = 'subagent';
+                transformedEvent.subtype = eventName.toLowerCase().replace('subagent', '');
+            } else if (eventName === 'ToolCall') {
+                transformedEvent.type = 'tool';
+                transformedEvent.subtype = 'call';
+            } else if (eventName === 'UserPrompt') {
+                transformedEvent.type = 'hook';
+                transformedEvent.subtype = 'user_prompt';
+            } else {
+                // Generic fallback for unknown event names
+                transformedEvent.type = 'system';
+                transformedEvent.subtype = eventName.toLowerCase();
+            }
+            
+            // Remove the 'event' field to avoid confusion
+            delete transformedEvent.event;
+        }
+        // Handle standard format with 'type' field
+        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
+                transformedEvent.type = 'hook';
+                transformedEvent.subtype = subtype;
+            }
+            // Transform other dotted types like 'session.started' -> type: 'session', subtype: 'started'
+            else if (type.includes('.')) {
+                const [mainType, ...subtypeParts] = type.split('.');
+                transformedEvent.type = mainType;
+                transformedEvent.subtype = subtypeParts.join('.');
+            }
         }
-        // Transform other dotted types like 'session.started' -> type: 'session', subtype: 'started'
-        else if (type.includes('.')) {
-            const [mainType, ...subtypeParts] = type.split('.');
-            transformedEvent.type = mainType;
-            transformedEvent.subtype = subtypeParts.join('.');
+        // If no type and no event field, mark as unknown
+        else {
+            transformedEvent.type = 'unknown';
+            transformedEvent.subtype = '';
+        }
+
+        // Store original event name for display purposes (before any transformation)
+        if (!eventData.type && eventData.event) {
+            transformedEvent.originalEventName = eventData.event;
+        } else if (eventData.type) {
+            transformedEvent.originalEventName = eventData.type;
         }
 
         // Extract and flatten data fields to top level for dashboard compatibility
         // The dashboard expects fields like tool_name, agent_type, etc. at the top level
         if (eventData.data && typeof eventData.data === 'object') {
-            // Copy all data fields to the top level
+            // 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 the key doesn't already exist at top level
-                if (!(key in transformedEvent)) {
+                // Only copy if not a protected field
+                if (!protectedFields.includes(key)) {
                     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`);
                 }
             });
+            
+            // Keep the original data object for backward compatibility
+            transformedEvent.data = eventData.data;
+        }
+
+        // Debug logging for tool events
+        if (transformedEvent.type === 'hook' && (transformedEvent.subtype === 'pre_tool' || transformedEvent.subtype === 'post_tool')) {
+            console.log('Transformed tool event:', {
+                type: transformedEvent.type,
+                subtype: transformedEvent.subtype,
+                tool_name: transformedEvent.tool_name,
+                has_data: !!transformedEvent.data,
+                keys: Object.keys(transformedEvent).filter(k => k !== 'data')
+            });
         }
 
         return transformedEvent;
@@ -481,7 +557,7 @@ class SocketClient {
         setInterval(() => {
             this.checkAndUpdateStatus();
         }, 2000);
-        
+
         // Initial check after DOM is ready
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => {
@@ -498,7 +574,7 @@ class SocketClient {
     checkAndUpdateStatus() {
         let actualStatus = 'Disconnected';
         let actualType = 'disconnected';
-        
+
         if (this.socket) {
             if (this.socket.connected) {
                 actualStatus = 'Connected';
@@ -516,14 +592,14 @@ class SocketClient {
                 this.isConnecting = false;
             }
         }
-        
+
         // Check if UI needs updating
         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})`);
@@ -533,5 +609,9 @@ class SocketClient {
     }
 }
 
-// Export for use in other modules
-window.SocketClient = SocketClient;
+// ES6 Module export
+export { SocketClient };
+export default SocketClient;
+
+// Backward compatibility - keep window export for non-module usage
+window.SocketClient = SocketClient;