claude-mpm 4.21.3__py3-none-any.whl → 5.1.9__py3-none-any.whl

claude_mpm/dashboard/static/js/dashboard.js

@@ -37,7 +37,7 @@ class Dashboard {
         this.eventViewer = null;
         this.moduleViewer = null;
         this.sessionManager = null;
-        
+
         // Retry prevention
         this.activityTreeRetryCount = 0;
         this.maxRetryAttempts = 10;
@@ -66,7 +66,7 @@ class Dashboard {
         try {
             // Fetch server configuration first
             this.fetchServerConfig();
-            
+
             // Initialize modules in dependency order
             this.initializeSocketManager();
             this.initializeCoreComponents();
@@ -85,6 +85,11 @@ class Dashboard {
             // Initialize from URL parameters
             this.initializeFromURL();
 
+            // FIX: Render current tab after initialization to display any existing data
+            // WHY: If events were loaded before dashboard init completed, they won't be visible
+            console.log('[Dashboard] Initial render after dashboard initialization');
+            this.renderCurrentTab();
+
             console.log('Claude MPM Dashboard initialized successfully');
         } catch (error) {
             console.error('Error during dashboard initialization:', error);
@@ -92,7 +97,7 @@ class Dashboard {
             throw error;
         }
     }
-    
+
     /**
      * Fetch server configuration for dashboard initialization
      */
@@ -102,18 +107,18 @@ class Dashboard {
             .then(config => {
                 // Store config globally for other components
                 window.dashboardConfig = config;
-                
+
                 // Update initial UI elements if they exist
                 const workingDirEl = document.getElementById('working-dir-path');
                 if (workingDirEl && config.workingDirectory) {
                     workingDirEl.textContent = config.workingDirectory;
                 }
-                
+
                 const gitBranchEl = document.getElementById('footer-git-branch');
                 if (gitBranchEl && config.gitBranch) {
                     gitBranchEl.textContent = config.gitBranch;
                 }
-                
+
                 console.log('Dashboard configuration loaded:', config);
             })
             .catch(error => {
@@ -125,7 +130,7 @@ class Dashboard {
                 };
             });
     }
-    
+
     /**
      * Validate that all critical components are initialized
      * WHY: Ensures dashboard is in a valid state after initialization
@@ -136,7 +141,7 @@ class Dashboard {
             { 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));
@@ -148,7 +153,7 @@ class Dashboard {
      * 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.
      */
@@ -158,7 +163,7 @@ class Dashboard {
             if (this.agentHierarchy) {
                 window.dashboard.agentHierarchy = this.agentHierarchy;
             }
-            
+
             // Initialize any other components that need window.dashboard
             this.validateInitialization();
         } catch (error) {
@@ -201,10 +206,10 @@ class Dashboard {
      */
     initializeBuildTracker() {
         this.buildTracker = new BuildTracker();
-        
+
         // Set the socket client for receiving updates
         this.buildTracker.setSocketClient(this.socketClient);
-        
+
         // Mount to header with retry logic for DOM readiness
         const mountBuildTracker = () => {
             const headerTitle = document.querySelector('.header-title');
@@ -218,10 +223,10 @@ class Dashboard {
                 setTimeout(mountBuildTracker, 100);
             }
         };
-        
+
         // Try to mount immediately, with retry logic if needed
         mountBuildTracker();
-        
+
         // Make available globally for debugging
         window.buildTracker = this.buildTracker;
     }
@@ -233,7 +238,7 @@ 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
@@ -340,6 +345,11 @@ class Dashboard {
                 this.workingDirectoryManager.updateGitBranch(
                     this.workingDirectoryManager.getCurrentWorkingDir()
                 );
+
+                // FIX: Force render current tab to display initial/historical event data
+                // WHY: Events are loaded on connection but panes aren't rendered with this data
+                console.log('[Dashboard] Connection established - rendering current tab with initial data');
+                this.renderCurrentTab();
             }
         });
 
@@ -364,6 +374,14 @@ class Dashboard {
         document.addEventListener('sessionFilterChanged', (e) => {
             this.renderCurrentTab();
         });
+
+        // FIX: Listen for history loaded event to render initial data
+        // WHY: When historical events are loaded from server, panes need to be rendered
+        document.addEventListener('historyLoaded', (e) => {
+            console.log('[Dashboard] History loaded event received:', e.detail);
+            console.log('[Dashboard] Rendering current tab with historical data');
+            this.renderCurrentTab();
+        });
     }
 
     /**
@@ -443,22 +461,22 @@ class Dashboard {
                 if (window.ActivityTree && typeof window.ActivityTree === 'function') {
                     // Reset retry count on successful load
                     this.activityTreeRetryCount = 0;
-                    
+
                     // Create or get instance
                     if (!window.activityTreeInstance) {
                         window.activityTreeInstance = new window.ActivityTree();
                     }
-                    
+
                     // Initialize if needed and render
                     if (window.activityTreeInstance) {
                         if (!window.activityTreeInstance.initialized) {
                             window.activityTreeInstance.initialize();
                         }
-                        
+
                         if (typeof window.activityTreeInstance.renderWhenVisible === 'function') {
                             window.activityTreeInstance.renderWhenVisible();
                         }
-                        
+
                         // Force show to ensure the tree is visible
                         if (typeof window.activityTreeInstance.forceShow === 'function') {
                             window.activityTreeInstance.forceShow();
@@ -521,23 +539,23 @@ class Dashboard {
     renderAgents() {
         const agentsList = document.getElementById('agents-list');
         if (!agentsList) return;
-        
+
         // Get filter values
         const searchText = document.getElementById('agents-search-input')?.value || '';
         const agentType = document.getElementById('agents-type-filter')?.value || '';
-        
+
         // Generate flat HTML
         const flatHTML = this.renderAgentsFlat(searchText, agentType);
         agentsList.innerHTML = flatHTML;
-        
+
         // Remove hierarchy controls if they exist
         this.removeHierarchyControls();
-        
+
         // Update filter dropdowns with available agent types
         const uniqueInstances = this.agentInference.getUniqueAgentInstances();
         this.updateAgentsFilterDropdowns(uniqueInstances);
     }
-    
+
     /**
      * Remove hierarchy control buttons (flat view doesn't need them)
      */
@@ -547,11 +565,11 @@ class Dashboard {
             existingControls.remove();
         }
     }
-    
+
     /**
      * Render agents as a flat chronological list
      * @param {string} searchText - Search filter
-     * @param {string} agentType - Agent type filter 
+     * @param {string} agentType - Agent type filter
      * @returns {string} HTML for flat agent list
      */
     renderAgentsFlat(searchText, agentType) {
@@ -559,11 +577,11 @@ class Dashboard {
         if (!events || events.length === 0) {
             return '<div class="no-events">No agent events found...</div>';
         }
-        
+
         // Process agent inference to get agent mappings
         this.agentInference.processAgentInference();
         const eventAgentMap = this.agentInference.getEventAgentMap();
-        
+
         // Collect all agent events with metadata
         const agentEvents = [];
         events.forEach((event, index) => {
@@ -571,7 +589,7 @@ class Dashboard {
             if (inference && (inference.type === 'subagent' || inference.type === 'main_agent')) {
                 // Apply filters
                 let includeEvent = true;
-                
+
                 if (searchText) {
                     const searchLower = searchText.toLowerCase();
                     includeEvent = includeEvent && (
@@ -580,11 +598,11 @@ class Dashboard {
                         (event.data && JSON.stringify(event.data).toLowerCase().includes(searchLower))
                     );
                 }
-                
+
                 if (agentType) {
                     includeEvent = includeEvent && inference.agentName.includes(agentType);
                 }
-                
+
                 if (includeEvent) {
                     agentEvents.push({
                         event,
@@ -595,20 +613,20 @@ class Dashboard {
                 }
             }
         });
-        
+
         if (agentEvents.length === 0) {
             return '<div class="no-events">No agent events match the current filters...</div>';
         }
-        
+
         // Generate HTML for each event
         const html = agentEvents.map((item, listIndex) => {
             const { event, inference, index, timestamp } = item;
-            
+
             // Determine action/tool
             let action = 'Activity';
             let actionIcon = '📋';
             let details = '';
-            
+
             if (event.event_type === 'SubagentStart') {
                 action = 'Started';
                 actionIcon = '🟢';
@@ -620,7 +638,7 @@ class Dashboard {
             } else if (event.tool_name) {
                 action = `Tool: ${event.tool_name}`;
                 actionIcon = this.getToolIcon(event.tool_name);
-                
+
                 // Add tool parameters as details
                 if (event.data && event.data.tool_parameters) {
                     const params = event.data.tool_parameters;
@@ -635,7 +653,7 @@ class Dashboard {
                     }
                 }
             }
-            
+
             // Status based on event type
             let status = 'completed';
             if (event.event_type === 'SubagentStart') {
@@ -643,7 +661,7 @@ class Dashboard {
             } else if (event.data && event.data.error) {
                 status = 'error';
             }
-            
+
             return `
                 <div class="agent-event-item" data-index="${listIndex}" onclick="window.dashboard.showCardDetails('agents', ${index})">
                     <div class="agent-event-header">
@@ -662,10 +680,10 @@ class Dashboard {
                 </div>
             `;
         }).join('');
-        
+
         return `<div class="agent-events-flat">${html}</div>`;
     }
-    
+
     /**
      * Get icon for agent type
      */
@@ -673,7 +691,7 @@ class Dashboard {
         const agentIcons = {
             'PM': '🎯',
             'Engineer Agent': '🔧',
-            'Research Agent': '🔍', 
+            'Research Agent': '🔍',
             'QA Agent': '✅',
             'Documentation Agent': '📝',
             'Security Agent': '🔒',
@@ -684,7 +702,7 @@ class Dashboard {
         };
         return agentIcons[agentName] || '🤖';
     }
-    
+
     /**
      * Get icon for tool
      */
@@ -701,7 +719,7 @@ class Dashboard {
         };
         return toolIcons[toolName] || '🔧';
     }
-    
+
     /**
      * Get icon for status
      */
@@ -714,19 +732,19 @@ class Dashboard {
         };
         return statusIcons[status] || '❓';
     }
-    
+
     /**
      * Format timestamp for display
      */
     formatTimestamp(timestamp) {
         return timestamp.toLocaleTimeString('en-US', {
             hour: '2-digit',
-            minute: '2-digit', 
+            minute: '2-digit',
             second: '2-digit',
             hour12: false
         });
     }
-    
+
     /**
      * Escape HTML for safe display
      */
@@ -1251,7 +1269,7 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     const loadingElement = modal.querySelector('.file-viewer-loading');
     const errorElement = modal.querySelector('.file-viewer-error');
     const contentArea = modal.querySelector('.file-viewer-content-area');
-    
+
     if (loadingElement) {
         loadingElement.style.display = 'flex';
     }
@@ -1265,7 +1283,7 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     try {
         // Get the Socket.IO client
         const socket = window.socket || window.dashboard?.socketClient?.socket || window.socketClient?.socket;
-        
+
         console.log('[FileViewer] Socket search results:', {
             'window.socket': !!window.socket,
             'window.socket.connected': window.socket?.connected,
@@ -1274,15 +1292,15 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
             'window.socketClient.socket': !!window.socketClient?.socket,
             'window.socketClient.socket.connected': window.socketClient?.socket?.connected
         });
-        
+
         if (!socket) {
             throw new Error('No socket connection available. Please ensure the dashboard is connected.');
         }
-        
+
         if (!socket.connected) {
             console.warn('[FileViewer] Socket found but not connected, attempting to use anyway...');
         }
-        
+
         console.log('[FileViewer] Socket found, setting up listener for file_content_response');
 
         // Set up one-time listener for file content response
@@ -1579,7 +1597,7 @@ function formatFileSize(bytes) {
 // File Viewer Modal Functions
 window.showFileViewerModal = async function(filePath) {
     console.log('[FileViewer] Opening file:', filePath);
-    
+
     // Use the dashboard's current working directory
     let workingDir = '';
     if (window.dashboard && window.dashboard.currentWorkingDir) {
@@ -1670,7 +1688,7 @@ function displayFileContentError(modal, result) {
     const suggestionsElement = modal.querySelector('.error-suggestions');
     const loadingElement = modal.querySelector('.file-viewer-loading');
     const contentArea = modal.querySelector('.file-viewer-content-area');
-    
+
     // Hide loading and content areas, show error
     if (loadingElement) {
         loadingElement.style.display = 'none';
@@ -1818,7 +1836,7 @@ function updateSearchViewerModal(modal, searchParams, searchResults) {
     // Display search results
     if (resultsDisplay && searchResults) {
         let resultsHTML = '';
-        
+
         if (typeof searchResults === 'string') {
             // If results are a string, display as preformatted text
             resultsHTML = `<pre class="search-results-text">${escapeHtml(searchResults)}</pre>`;
@@ -1840,7 +1858,7 @@ function updateSearchViewerModal(modal, searchParams, searchResults) {
             // Fallback: display as text
             resultsHTML = `<div class="search-results-text">${escapeHtml(String(searchResults))}</div>`;
         }
-        
+
         resultsDisplay.innerHTML = resultsHTML;
     }
 }
@@ -1865,15 +1883,15 @@ document.addEventListener('DOMContentLoaded', function() {
     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 }

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

@@ -1,13 +1,13 @@
 /**
  * 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
@@ -26,21 +26,21 @@ class ExtensionErrorHandler {
             /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
@@ -49,41 +49,41 @@ class ExtensionErrorHandler {
                     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) => {
@@ -91,13 +91,13 @@ class ExtensionErrorHandler {
             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;
@@ -109,7 +109,7 @@ class ExtensionErrorHandler {
             }
         });
     }
-    
+
     /**
      * Check if an error string matches known extension error patterns
      * @param {string} errorString - The error message to check
@@ -118,7 +118,7 @@ class ExtensionErrorHandler {
     isExtensionError(errorString) {
         return this.suppressedPatterns.some(pattern => pattern.test(errorString));
     }
-    
+
     /**
      * Get suppressed extension errors for debugging
      * @returns {Array} - List of suppressed errors
@@ -126,21 +126,21 @@ class ExtensionErrorHandler {
     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());