claude-mpm 4.0.32__py3-none-any.whl → 4.1.0__py3-none-any.whl

claude_mpm/dashboard/static/js/dashboard.js

@@ -19,11 +19,13 @@ import { EventViewer } from '@components/event-viewer.js';
 import { ModuleViewer } from '@components/module-viewer.js';
 import { SessionManager } from '@components/session-manager.js';
 import { AgentInference } from '@components/agent-inference.js';
+import { AgentHierarchy } from '@components/agent-hierarchy.js';
 import { UIStateManager } from '@components/ui-state-manager.js';
 import { EventProcessor } from '@components/event-processor.js';
 import { ExportManager } from '@components/export-manager.js';
 import { WorkingDirectoryManager } from '@components/working-directory.js';
 import { FileToolTracker } from '@components/file-tool-tracker.js';
+import { BuildTracker } from '@components/build-tracker.js';
 class Dashboard {
     constructor() {
         // Core components (existing)
@@ -34,11 +36,13 @@ class Dashboard {
         // New modular components
         this.socketManager = null;
         this.agentInference = null;
+        this.agentHierarchy = null;
         this.uiStateManager = null;
         this.eventProcessor = null;
         this.exportManager = null;
         this.workingDirectoryManager = null;
         this.fileToolTracker = null;
+        this.buildTracker = null;
 
         // Initialize the dashboard
         this.init();
@@ -50,23 +54,75 @@ class Dashboard {
     init() {
         console.log('Initializing refactored Claude MPM Dashboard...');
 
-        // Initialize modules in dependency order
-        this.initializeSocketManager();
-        this.initializeCoreComponents();
-        this.initializeAgentInference();
-        this.initializeUIStateManager();
-        this.initializeWorkingDirectoryManager();
-        this.initializeFileToolTracker();
-        this.initializeEventProcessor();
-        this.initializeExportManager();
-
-        // Set up inter-module communication
-        this.setupModuleInteractions();
-
-        // Initialize from URL parameters
-        this.initializeFromURL();
+        try {
+            // Initialize modules in dependency order
+            this.initializeSocketManager();
+            this.initializeCoreComponents();
+            this.initializeBuildTracker();
+            this.initializeAgentInference();
+            this.initializeAgentHierarchy();
+            this.initializeUIStateManager();
+            this.initializeWorkingDirectoryManager();
+            this.initializeFileToolTracker();
+            this.initializeEventProcessor();
+            this.initializeExportManager();
+
+            // Set up inter-module communication
+            this.setupModuleInteractions();
+
+            // Initialize from URL parameters
+            this.initializeFromURL();
+
+            console.log('Claude MPM Dashboard initialized successfully');
+        } catch (error) {
+            console.error('Error during dashboard initialization:', error);
+            // Re-throw to be caught by DOMContentLoaded handler
+            throw error;
+        }
+    }
+    
+    /**
+     * Validate that all critical components are initialized
+     * WHY: Ensures dashboard is in a valid state after initialization
+     */
+    validateInitialization() {
+        const criticalComponents = [
+            { name: 'socketManager', component: this.socketManager },
+            { name: 'eventViewer', component: this.eventViewer },
+            { name: 'agentHierarchy', component: this.agentHierarchy }
+        ];
+        
+        const missing = criticalComponents.filter(c => !c.component);
+        if (missing.length > 0) {
+            console.warn('Missing critical components:', missing.map(c => c.name));
+        } else {
+            console.log('All critical components initialized');
+        }
+    }
 
-        console.log('Claude MPM Dashboard initialized successfully');
+    /**
+     * Post-initialization setup that requires window.dashboard to be set
+     * WHY: Some components need to reference window.dashboard but it's not available
+     * during constructor execution. This method is called after the Dashboard instance
+     * is assigned to window.dashboard, ensuring proper initialization order.
+     * 
+     * DESIGN DECISION: Separate post-init phase prevents "cannot read property of undefined"
+     * errors when components try to access window.dashboard during construction.
+     */
+    postInit() {
+        try {
+            // Set global reference for agent hierarchy after dashboard is available
+            if (this.agentHierarchy) {
+                window.dashboard.agentHierarchy = this.agentHierarchy;
+                console.log('Agent hierarchy global reference set');
+            }
+            
+            // Initialize any other components that need window.dashboard
+            this.validateInitialization();
+        } catch (error) {
+            console.error('Error in dashboard postInit:', error);
+            // Continue execution - non-critical error
+        }
     }
 
     /**
@@ -98,6 +154,28 @@ class Dashboard {
         window.sessionManager = this.sessionManager;
     }
 
+    /**
+     * Initialize build tracker
+     */
+    initializeBuildTracker() {
+        this.buildTracker = new BuildTracker();
+        
+        // Set the socket client for receiving updates
+        this.buildTracker.setSocketClient(this.socketClient);
+        
+        // Mount to header - find the best location
+        const headerTitle = document.querySelector('.header-title');
+        if (headerTitle) {
+            // Insert after the title and status badge
+            this.buildTracker.mount(headerTitle);
+        } else {
+            console.warn('Could not find header-title element for build tracker');
+        }
+        
+        // Make available globally for debugging
+        window.buildTracker = this.buildTracker;
+    }
+
     /**
      * Initialize agent inference system
      */
@@ -105,6 +183,28 @@ class Dashboard {
         this.agentInference = new AgentInference(this.eventViewer);
         this.agentInference.initialize();
     }
+    
+    /**
+     * Initialize agent hierarchy component
+     * WHY: Creates the agent hierarchy visualization component but defers global
+     * reference setting to postInit() to avoid initialization order issues.
+     */
+    initializeAgentHierarchy() {
+        try {
+            this.agentHierarchy = new AgentHierarchy(this.agentInference, this.eventViewer);
+            // Global reference will be set in postInit() after window.dashboard exists
+            console.log('Agent hierarchy component created');
+        } catch (error) {
+            console.error('Failed to initialize agent hierarchy:', error);
+            // Create a stub to prevent further errors
+            this.agentHierarchy = {
+                render: () => '<div class="error">Agent hierarchy unavailable</div>',
+                expandAllNodes: () => {},
+                collapseAllNodes: () => {},
+                updateWithNewEvents: () => {}
+            };
+        }
+    }
 
     /**
      * Initialize UI state manager
@@ -154,6 +254,9 @@ class Dashboard {
 
             // Process agent inference for new events
             this.agentInference.processAgentInference();
+            
+            // Update agent hierarchy with new events
+            this.agentHierarchy.updateWithNewEvents(events);
 
             // Auto-scroll events list if on events tab
             if (this.uiStateManager.getCurrentTab() === 'events') {
@@ -291,26 +394,74 @@ class Dashboard {
     }
 
     /**
-     * Render agents tab with unique instance view (one row per PM delegation)
+     * Render agents tab with hierarchical view
      */
     renderAgents() {
         const agentsList = document.getElementById('agents-list');
         if (!agentsList) return;
-
-        // Process agent inference to get PM delegations
-        this.agentInference.processAgentInference();
-
-        // Generate HTML for unique agent instances
-        const events = this.eventProcessor.getFilteredEventsForTab('agents');
-        const agentHTML = this.eventProcessor.generateAgentHTML(events);
-
-        agentsList.innerHTML = agentHTML;
-        this.exportManager.scrollListToBottom('agents-list');
-
-        // Update filter dropdowns with unique instances
+        
+        // Get filter values
+        const searchText = document.getElementById('agents-search-input')?.value || '';
+        const agentType = document.getElementById('agents-type-filter')?.value || '';
+        
+        // Build filters object
+        const filters = {};
+        if (searchText) filters.searchText = searchText;
+        if (agentType) filters.agentType = agentType;
+        
+        // Generate hierarchical HTML
+        const hierarchyHTML = this.agentHierarchy.render(filters);
+        agentsList.innerHTML = hierarchyHTML;
+        
+        // Add expand/collapse all buttons if not present
+        this.addHierarchyControls();
+        
+        // Update filter dropdowns with available agent types
         const uniqueInstances = this.agentInference.getUniqueAgentInstances();
         this.updateAgentsFilterDropdowns(uniqueInstances);
     }
+    
+    /**
+     * Add hierarchy control buttons
+     */
+    addHierarchyControls() {
+        const tabFilters = document.querySelector('#agents-tab .tab-filters');
+        if (!tabFilters) return;
+        
+        // Check if controls already exist
+        if (document.getElementById('hierarchy-controls')) return;
+        
+        // Create control buttons
+        const controls = document.createElement('div');
+        controls.id = 'hierarchy-controls';
+        controls.className = 'hierarchy-controls';
+        controls.innerHTML = `
+            <button data-action="expand-all" 
+                    class="hierarchy-btn hierarchy-expand-all">
+                Expand All
+            </button>
+            <button data-action="collapse-all" 
+                    class="hierarchy-btn hierarchy-collapse-all">
+                Collapse All
+            </button>
+        `;
+        
+        // Add safe event listeners
+        controls.addEventListener('click', (event) => {
+            const action = event.target.dataset.action;
+            if (action && window.dashboard && window.dashboard.agentHierarchy) {
+                if (action === 'expand-all') {
+                    window.dashboard.agentHierarchy.expandAllNodes();
+                    window.dashboard.renderAgents();
+                } else if (action === 'collapse-all') {
+                    window.dashboard.agentHierarchy.collapseAllNodes();
+                    window.dashboard.renderAgents();
+                }
+            }
+        });
+        
+        tabFilters.appendChild(controls);
+    }
 
     /**
      * Render tools tab with unique instance view (one row per unique tool call)
@@ -1810,8 +1961,33 @@ window.showAgentInstanceDetails = function(instanceId) {
 
 // Initialize dashboard when page loads
 document.addEventListener('DOMContentLoaded', function() {
-    window.dashboard = new Dashboard();
-    console.log('Dashboard loaded and initialized');
+    try {
+        // Create dashboard instance
+        window.dashboard = new Dashboard();
+        
+        // Call post-initialization setup that requires window.dashboard
+        // This must happen after window.dashboard is set
+        if (window.dashboard && typeof window.dashboard.postInit === 'function') {
+            window.dashboard.postInit();
+        }
+        
+        console.log('Dashboard loaded and initialized successfully');
+        
+        // Dispatch custom event to signal dashboard ready
+        document.dispatchEvent(new CustomEvent('dashboardReady', {
+            detail: { dashboard: window.dashboard }
+        }));
+    } catch (error) {
+        console.error('Failed to initialize dashboard:', error);
+        // Show user-friendly error message
+        document.body.innerHTML = `
+            <div style="padding: 20px; font-family: sans-serif;">
+                <h1>Dashboard Initialization Error</h1>
+                <p>The dashboard failed to load properly. Please refresh the page or check the console for details.</p>
+                <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px;">${error.message}</pre>
+            </div>
+        `;
+    }
 });
 
 // ES6 Module export

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

@@ -16,6 +16,12 @@ class SocketClient {
             error: [],
             event: []
         };
+        
+        // Event schema validation
+        this.eventSchema = {
+            required: ['source', 'type', 'subtype', 'timestamp', 'data'],
+            optional: ['event', 'session_id']
+        };
 
         // Connection state
         this.isConnected = false;
@@ -41,7 +47,7 @@ class SocketClient {
         // Health monitoring
         this.lastPingTime = null;
         this.lastPongTime = null;
-        this.pingTimeout = 40000; // 40 seconds (server sends every 30s)
+        this.pingTimeout = 90000; // 90 seconds for health check (more lenient than Socket.IO timeout)
         this.healthCheckInterval = null;
         
         // Start periodic status check as fallback mechanism
@@ -91,11 +97,13 @@ class SocketClient {
             autoConnect: true,
             reconnection: true,
             reconnectionDelay: 1000,
-            reconnectionDelayMax: 10000,
-            maxReconnectionAttempts: 10,
-            timeout: 10000,
+            reconnectionDelayMax: 5000,
+            reconnectionAttempts: Infinity,  // Keep trying indefinitely
+            timeout: 20000,  // Increase connection timeout
             forceNew: true,
-            transports: ['websocket', 'polling']
+            transports: ['websocket', 'polling'],
+            pingInterval: 25000,  // Match server setting
+            pingTimeout: 60000    // Match server setting
         });
 
         this.setupSocketHandlers();
@@ -187,11 +195,18 @@ class SocketClient {
 
         // Primary event handler - this is what the server actually emits
         this.socket.on('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('Received claude_event:', data);
+            
+            // Validate event schema
+            const validatedEvent = this.validateEventSchema(data);
+            if (!validatedEvent) {
+                console.warn('Invalid event schema received:', data);
+                return;
+            }
+            
+            // Transform event to match expected format (for backward compatibility)
+            const transformedEvent = this.transformEvent(validatedEvent);
+            console.log('Transformed event:', transformedEvent);
             this.addEvent(transformedEvent);
         });
 
@@ -628,6 +643,51 @@ class SocketClient {
         };
     }
 
+    /**
+     * Validate event against expected schema
+     * @param {Object} eventData - Raw event data
+     * @returns {Object|null} Validated event or null if invalid
+     */
+    validateEventSchema(eventData) {
+        if (!eventData || typeof eventData !== 'object') {
+            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
+        }
+        if (!validated.type) {
+            // If there's an event field, use it as the type
+            if (validated.event) {
+                validated.type = validated.event;
+            } else {
+                validated.type = 'unknown';
+            }
+        }
+        if (!validated.subtype) {
+            validated.subtype = 'generic';
+        }
+        if (!validated.timestamp) {
+            validated.timestamp = new Date().toISOString();
+        }
+        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
@@ -718,7 +778,14 @@ class SocketClient {
             Object.keys(eventData.data).forEach(key => {
                 // Only copy if not a protected field
                 if (!protectedFields.includes(key)) {
-                    transformedEvent[key] = eventData.data[key];
+                    // Special handling for tool_parameters to ensure it's properly preserved
+                    // This is critical for file path extraction in file-tool-tracker
+                    if (key === 'tool_parameters' && typeof eventData.data[key] === 'object') {
+                        // Deep copy the tool_parameters object to preserve all nested fields
+                        transformedEvent[key] = JSON.parse(JSON.stringify(eventData.data[key]));
+                    } else {
+                        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`);
@@ -735,9 +802,23 @@ class SocketClient {
                 type: transformedEvent.type,
                 subtype: transformedEvent.subtype,
                 tool_name: transformedEvent.tool_name,
+                has_tool_parameters: !!transformedEvent.tool_parameters,
+                tool_parameters: transformedEvent.tool_parameters,
                 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)) {
+                console.log('File tool event details:', {
+                    tool_name: transformedEvent.tool_name,
+                    file_path: transformedEvent.tool_parameters?.file_path,
+                    path: transformedEvent.tool_parameters?.path,
+                    notebook_path: transformedEvent.tool_parameters?.notebook_path,
+                    full_parameters: transformedEvent.tool_parameters
+                });
+            }
         }
 
         return transformedEvent;

claude_mpm/dashboard/templates/index.html

@@ -141,6 +141,7 @@
                     <div id="connection-status" class="status-badge status-disconnected">
                         <span>●</span> Disconnected
                     </div>
+                    <!-- Version display will be inserted here by BuildTracker component -->
                 </div>
                 <div class="metrics-widget">
                     <div class="metric-mini">

claude_mpm/hooks/claude_hooks/connection_pool.py

@@ -1,7 +1,18 @@
 #!/usr/bin/env python3
-"""Socket.IO connection pool for Claude Code hook handler.
+"""[DEPRECATED] Socket.IO connection pool for Claude Code hook handler.
 
-This module provides connection pooling for Socket.IO clients to reduce
+DEPRECATION NOTICE: As of v4.0.35, this module is deprecated.
+All event emission now goes through the EventBus, which handles
+Socket.IO connections via its relay component. This provides:
+- Single event path (no duplicates)
+- Better separation of concerns
+- Centralized connection management
+- More resilient architecture
+
+This module is kept for backward compatibility but will be removed in v5.0.0.
+Please use EventBus.publish() instead of direct Socket.IO emission.
+
+Original purpose: Provided connection pooling for Socket.IO clients to reduce
 connection overhead and implement circuit breaker patterns.
 """
 
@@ -109,7 +120,12 @@ class SocketIOConnectionPool:
             if client.connected:
                 # Send a keep-alive ping to establish the connection
                 try:
-                    client.emit('ping', {'timestamp': time.time()})
+                    client.emit('ping', {
+                        'type': 'system',
+                        'subtype': 'ping',
+                        'timestamp': time.time(),
+                        'source': 'connection_pool'
+                    })
                 except:
                     pass  # Ignore ping errors
                 return client
@@ -137,7 +153,12 @@ class SocketIOConnectionPool:
             # This helps detect zombie connections
             try:
                 # Just emit a ping, don't wait for response (faster)
-                client.emit('ping', {'timestamp': time.time()})
+                client.emit('ping', {
+                    'type': 'system',
+                    'subtype': 'ping',
+                    'timestamp': time.time(),
+                    'source': 'connection_pool'
+                })
                 return True
             except:
                 # If ping fails, connection might be dead