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

claude_mpm/dashboard/static/js/dashboard.js

@@ -13,20 +13,24 @@
  * compatibility for existing code that depends on the dashboard interface.
  */
 
-// ES6 Module imports
-import { SocketManager } from '@components/socket-manager.js';
-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';
-import { UnifiedDataViewer } from '@components/unified-data-viewer.js';
+// NOTE: Components are loaded as ES6 modules via index.html
+// They expose their classes globally for backward compatibility
+// Commenting out ES6 imports to avoid module resolution errors
+
+// import { SocketManager } from './components/socket-manager.js';
+// 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';
+// import { UnifiedDataViewer } from './components/unified-data-viewer.js';
+
 class Dashboard {
     constructor() {
         // Core components (existing)
@@ -60,6 +64,9 @@ class Dashboard {
         console.log('Initializing refactored Claude MPM Dashboard...');
 
         try {
+            // Fetch server configuration first
+            this.fetchServerConfig();
+            
             // Initialize modules in dependency order
             this.initializeSocketManager();
             this.initializeCoreComponents();
@@ -86,6 +93,39 @@ class Dashboard {
         }
     }
     
+    /**
+     * Fetch server configuration for dashboard initialization
+     */
+    fetchServerConfig() {
+        fetch('/api/config')
+            .then(response => response.json())
+            .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 => {
+                console.warn('Failed to fetch server config:', error);
+                // Set default config as fallback
+                window.dashboardConfig = {
+                    workingDirectory: '.',
+                    gitBranch: 'Unknown'
+                };
+            });
+    }
+    
     /**
      * Validate that all critical components are initialized
      * WHY: Ensures dashboard is in a valid state after initialization
@@ -100,8 +140,6 @@ class Dashboard {
         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');
         }
     }
 
@@ -119,7 +157,6 @@ class Dashboard {
             // 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
@@ -206,7 +243,6 @@ class Dashboard {
         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
@@ -262,12 +298,29 @@ class Dashboard {
     setupModuleInteractions() {
         // Socket events to update file operations and tool calls
         this.socketManager.onEventUpdate((events) => {
+            console.log('[Dashboard] Processing event update with', events.length, 'events');
+
+            // Debug: Log some sample events to see their structure
+            if (events.length > 0) {
+                console.log('[Dashboard] Sample event structure:', {
+                    first_event: events[0],
+                    has_tool_events: events.some(e => e.tool_name || (e.data && e.data.tool_name)),
+                    hook_events: events.filter(e => e.type === 'hook').length,
+                    tool_subtypes: events.filter(e => e.subtype === 'pre_tool' || e.subtype === 'post_tool').length
+                });
+            }
+
             this.fileToolTracker.updateFileOperations(events);
             this.fileToolTracker.updateToolCalls(events);
 
+            // Debug: Check what was tracked
+            const fileOps = this.fileToolTracker.getFileOperations();
+            const toolCalls = this.fileToolTracker.getToolCalls();
+            console.log('[Dashboard] After update - File operations:', fileOps.size, 'Tool calls:', toolCalls.size);
+
             // Process agent inference for new events
             this.agentInference.processAgentInference();
-            
+
             // Update agent hierarchy with new events
             this.agentHierarchy.updateWithNewEvents(events);
 
@@ -309,7 +362,6 @@ class Dashboard {
 
         // Session changes
         document.addEventListener('sessionFilterChanged', (e) => {
-            console.log('Session filter changed, re-rendering current tab:', this.uiStateManager.getCurrentTab());
             this.renderCurrentTab();
         });
     }
@@ -394,25 +446,21 @@ class Dashboard {
                     
                     // Create or get instance
                     if (!window.activityTreeInstance) {
-                        console.log('Creating new ActivityTree instance...');
                         window.activityTreeInstance = new window.ActivityTree();
                     }
                     
                     // Initialize if needed and render
                     if (window.activityTreeInstance) {
                         if (!window.activityTreeInstance.initialized) {
-                            console.log('Initializing ActivityTree...');
                             window.activityTreeInstance.initialize();
                         }
                         
                         if (typeof window.activityTreeInstance.renderWhenVisible === 'function') {
-                            console.log('Dashboard triggering activity tree render...');
                             window.activityTreeInstance.renderWhenVisible();
                         }
                         
                         // Force show to ensure the tree is visible
                         if (typeof window.activityTreeInstance.forceShow === 'function') {
-                            console.log('Dashboard forcing activity tree to show...');
                             window.activityTreeInstance.forceShow();
                         }
                     }
@@ -421,11 +469,9 @@ class Dashboard {
                     const activityTreeInstance = window.activityTree();
                     if (activityTreeInstance) {
                         if (typeof activityTreeInstance.renderWhenVisible === 'function') {
-                            console.log('Dashboard triggering activity tree render (legacy)...');
                             activityTreeInstance.renderWhenVisible();
                         }
                         if (typeof activityTreeInstance.forceShow === 'function') {
-                            console.log('Dashboard forcing activity tree to show (legacy)...');
                             activityTreeInstance.forceShow();
                         }
                     }
@@ -719,10 +765,19 @@ class Dashboard {
 
         const fileOperations = this.fileToolTracker.getFileOperations();
         const filesArray = Array.from(fileOperations.entries());
+
+        console.log('[renderFiles] File operations map size:', fileOperations.size);
+        console.log('[renderFiles] Files array:', filesArray);
+
         const uniqueFileInstances = this.eventProcessor.getUniqueFileInstances(filesArray);
         const fileHTML = this.eventProcessor.generateFileHTML(uniqueFileInstances);
 
-        filesList.innerHTML = fileHTML;
+        if (filesArray.length === 0) {
+            filesList.innerHTML = '<div class="empty-state">No file operations tracked yet. File operations will appear here when tools like Read, Write, Edit, or Grep are used.</div>';
+        } else {
+            filesList.innerHTML = fileHTML;
+        }
+
         this.exportManager.scrollListToBottom('files-list');
 
         // Update filter dropdowns
@@ -745,12 +800,7 @@ class Dashboard {
         const sortedTypes = Array.from(agentTypes).filter(type => type && type.trim() !== '');
         this.populateFilterDropdown('agents-type-filter', sortedTypes, 'All Agent Types');
 
-        // Debug log
-        if (sortedTypes.length > 0) {
-            console.log('Agent types found for filter:', sortedTypes);
-        } else {
-            console.log('No agent types found for filter. Instances:', uniqueInstances.length);
-        }
+        // Agent filter types populated
     }
 
     /**
@@ -1073,35 +1123,7 @@ window.switchTab = function(tabName) {
     }
 };
 
-// File Viewer Modal Functions - REMOVED DUPLICATE (keeping the one at line 1553)
-window.showFileViewerModal = function(filePath, workingDir) {
-    // Use the dashboard's current working directory if not provided
-    if (!workingDir && window.dashboard && window.dashboard.currentWorkingDir) {
-        workingDir = window.dashboard.currentWorkingDir;
-    }
-
-    // Create modal if it doesn't exist
-    let modal = document.getElementById('file-viewer-modal');
-    if (!modal) {
-        modal = createFileViewerModal();
-        document.body.appendChild(modal);
-    }
-
-    // Update modal content
-    updateFileViewerModal(modal, filePath, workingDir);
-
-    // Show the modal as flex container
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden'; // Prevent background scrolling
-};
-
-window.hideFileViewerModal = function() {
-    const modal = document.getElementById('file-viewer-modal');
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.style.overflow = ''; // Restore background scrolling
-    }
-};
+// File Viewer Modal Functions - Removed broken duplicate (using the one at line 1505)
 
 window.copyFileContent = function() {
     const modal = document.getElementById('file-viewer-modal');
@@ -1116,11 +1138,13 @@ window.copyFileContent = function() {
         navigator.clipboard.writeText(text).then(() => {
             // Show brief feedback
             const button = modal.querySelector('.file-content-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
+            if (button) {
+                const originalText = button.textContent;
+                button.textContent = '✅ Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }
         }).catch(err => {
             console.error('Failed to copy text:', err);
         });
@@ -1134,11 +1158,13 @@ window.copyFileContent = function() {
         document.body.removeChild(textarea);
 
         const button = modal.querySelector('.file-content-copy');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        setTimeout(() => {
-            button.textContent = originalText;
-        }, 2000);
+        if (button) {
+            const originalText = button.textContent;
+            button.textContent = '✅ Copied!';
+            setTimeout(() => {
+                button.textContent = originalText;
+            }, 2000);
+        }
     }
 };
 
@@ -1214,48 +1240,85 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     const filePathElement = modal.querySelector('.file-viewer-file-path');
     const fileSizeElement = modal.querySelector('.file-viewer-file-size');
 
-    filePathElement.textContent = filePath;
-    fileSizeElement.textContent = '';
+    if (filePathElement) {
+        filePathElement.textContent = filePath;
+    }
+    if (fileSizeElement) {
+        fileSizeElement.textContent = '';
+    }
 
     // Show loading state
-    modal.querySelector('.file-viewer-loading').style.display = 'flex';
-    modal.querySelector('.file-viewer-error').style.display = 'none';
-    modal.querySelector('.file-viewer-content-area').style.display = 'none';
+    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';
+    }
+    if (errorElement) {
+        errorElement.style.display = 'none';
+    }
+    if (contentArea) {
+        contentArea.style.display = 'none';
+    }
 
     try {
         // Get the Socket.IO client
-        const socket = window.socket || window.dashboard?.socketClient?.socket;
+        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,
+            'dashboard.socketClient.socket': !!window.dashboard?.socketClient?.socket,
+            'dashboard.socketClient.socket.connected': window.dashboard?.socketClient?.socket?.connected,
+            'window.socketClient.socket': !!window.socketClient?.socket,
+            'window.socketClient.socket.connected': window.socketClient?.socket?.connected
+        });
+        
         if (!socket) {
-            throw new Error('No socket connection available');
+            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
         const responsePromise = new Promise((resolve, reject) => {
             const responseHandler = (data) => {
+                console.log('[FileViewer] Received file_content_response:', data);
                 if (data.file_path === filePath) {
                     socket.off('file_content_response', responseHandler);
                     if (data.success) {
+                        console.log('[FileViewer] File content loaded successfully');
                         resolve(data);
                     } else {
+                        console.error('[FileViewer] File read failed:', data.error);
                         reject(new Error(data.error || 'Failed to read file'));
                     }
                 }
             };
 
             socket.on('file_content_response', responseHandler);
+            console.log('[FileViewer] Listener registered for file_content_response');
 
             // Timeout after 10 seconds
             setTimeout(() => {
                 socket.off('file_content_response', responseHandler);
-                reject(new Error('Request timeout'));
+                console.error('[FileViewer] Request timeout after 10 seconds');
+                reject(new Error('Request timeout - server did not respond'));
             }, 10000);
         });
 
         // Send file read request
-        socket.emit('read_file', {
+        const requestData = {
             file_path: filePath,
             working_dir: workingDir
-        });
+        };
+        console.log('[FileViewer] Emitting read_file event with data:', requestData);
+        socket.emit('read_file', requestData);
 
         // File viewer request sent
 
@@ -1264,7 +1327,10 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
         // File content received successfully
 
         // Hide loading
-        modal.querySelector('.file-viewer-loading').style.display = 'none';
+        const loadingEl = modal.querySelector('.file-viewer-loading');
+        if (loadingEl) {
+            loadingEl.style.display = 'none';
+        }
 
         // Show successful content
         displayFileContent(modal, result);
@@ -1272,7 +1338,10 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     } catch (error) {
         console.error('❌ Failed to fetch file content:', error);
 
-        modal.querySelector('.file-viewer-loading').style.display = 'none';
+        const loadingEl2 = modal.querySelector('.file-viewer-loading');
+        if (loadingEl2) {
+            loadingEl2.style.display = 'none';
+        }
 
         // Create detailed error message
         let errorMessage = error.message || 'Unknown error occurred';
@@ -1373,21 +1442,25 @@ function displayFileError(modal, result) {
 
     let errorMessage = result.error || 'Unknown error occurred';
 
-    messageElement.innerHTML = `
-        <div class="error-main">${errorMessage}</div>
-        ${result.file_path ? `<div class="error-file">File: ${result.file_path}</div>` : ''}
-        ${result.working_dir ? `<div class="error-dir">Working directory: ${result.working_dir}</div>` : ''}
-    `;
-
-    if (result.suggestions && result.suggestions.length > 0) {
-        suggestionsElement.innerHTML = `
-            <h4>Suggestions:</h4>
-            <ul>
-                ${result.suggestions.map(s => `<li>${s}</li>`).join('')}
-            </ul>
+    if (messageElement) {
+        messageElement.innerHTML = `
+            <div class="error-main">${errorMessage}</div>
+            ${result.file_path ? `<div class="error-file">File: ${result.file_path}</div>` : ''}
+            ${result.working_dir ? `<div class="error-dir">Working directory: ${result.working_dir}</div>` : ''}
         `;
-    } else {
-        suggestionsElement.innerHTML = '';
+    }
+
+    if (suggestionsElement) {
+        if (result.suggestions && result.suggestions.length > 0) {
+            suggestionsElement.innerHTML = `
+                <h4>Suggestions:</h4>
+                <ul>
+                    ${result.suggestions.map(s => `<li>${s}</li>`).join('')}
+                </ul>
+            `;
+        } else {
+            suggestionsElement.innerHTML = '';
+        }
     }
 
     console.log('📋 Displaying file viewer error:', {
@@ -1396,7 +1469,9 @@ function displayFileError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 function highlightCode(code, extension) {
@@ -1502,26 +1577,37 @@ function formatFileSize(bytes) {
 }
 
 // File Viewer Modal Functions
-window.showFileViewerModal = function(filePath) {
+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) {
         workingDir = window.dashboard.currentWorkingDir;
+        console.log('[FileViewer] Using working directory:', workingDir);
     }
 
     // Create modal if it doesn't exist
     let modal = document.getElementById('file-viewer-modal');
     if (!modal) {
+        console.log('[FileViewer] Creating new modal');
         modal = createFileViewerModal();
         document.body.appendChild(modal);
-    }
 
-    // Update modal content
-    updateFileViewerModal(modal, filePath, workingDir);
+        // Small delay to ensure DOM is fully updated
+        await new Promise(resolve => setTimeout(resolve, 10));
+    }
 
-    // Show the modal as flex container
+    // Show the modal as flex container first (ensures proper rendering)
     modal.style.display = 'flex';
     document.body.style.overflow = 'hidden'; // Prevent background scrolling
+
+    // Update modal content
+    updateFileViewerModal(modal, filePath, workingDir).catch(error => {
+        console.error('Error updating file viewer modal:', error);
+        // Show error in the modal
+        displayFileContentError(modal, { error: error.message });
+    });
 };
 
 window.hideFileViewerModal = function() {
@@ -1545,11 +1631,13 @@ window.copyFileContent = function() {
         navigator.clipboard.writeText(text).then(() => {
             // Show brief feedback
             const button = modal.querySelector('.file-content-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
+            if (button) {
+                const originalText = button.textContent;
+                button.textContent = '✅ Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }
         }).catch(err => {
             console.error('Failed to copy text:', err);
         });
@@ -1563,11 +1651,13 @@ window.copyFileContent = function() {
         document.body.removeChild(textarea);
 
         const button = modal.querySelector('.file-content-copy');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        setTimeout(() => {
-            button.textContent = originalText;
-        }, 2000);
+        if (button) {
+            const originalText = button.textContent;
+            button.textContent = '✅ Copied!';
+            setTimeout(() => {
+                button.textContent = originalText;
+            }, 2000);
+        }
     }
 };
 
@@ -1578,6 +1668,19 @@ function displayFileContentError(modal, result) {
     const errorArea = modal.querySelector('.file-viewer-error');
     const messageElement = modal.querySelector('.error-message');
     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';
+    }
+    if (contentArea) {
+        contentArea.style.display = 'none';
+    }
+    if (errorArea) {
+        errorArea.style.display = 'flex';
+    }
 
     // Create user-friendly error messages
     let errorMessage = result.error || 'Unknown error occurred';
@@ -1588,29 +1691,37 @@ function displayFileContentError(modal, result) {
         errorMessage = '🔒 Permission denied accessing this file';
     } else if (errorMessage.includes('too large')) {
         errorMessage = '📏 File is too large to display';
+    } else if (errorMessage.includes('socket connection')) {
+        errorMessage = '🔌 Not connected to the server. Please check your connection.';
+    } else if (errorMessage.includes('timeout')) {
+        errorMessage = '⏱️ Request timed out. The server may be busy or unresponsive.';
     } else if (!errorMessage.includes('📁') && !errorMessage.includes('🔒') && !errorMessage.includes('📏')) {
         errorMessage = `⚠️ ${errorMessage}`;
     }
 
-    messageElement.textContent = errorMessage;
+    if (messageElement) {
+        messageElement.textContent = errorMessage;
+    }
 
     // Add suggestions if available
-    if (result.suggestions && result.suggestions.length > 0) {
-        suggestionsElement.innerHTML = `
-            <h4>Suggestions:</h4>
-            <ul>
-                ${result.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
-            </ul>
-        `;
-    } else {
-        suggestionsElement.innerHTML = `
-            <h4>Try:</h4>
-            <ul>
-                <li>Check if the file exists and is readable</li>
-                <li>Verify file permissions</li>
-                <li>Ensure the monitoring server has access to this file</li>
-            </ul>
-        `;
+    if (suggestionsElement) {
+        if (result.suggestions && result.suggestions.length > 0) {
+            suggestionsElement.innerHTML = `
+                <h4>Suggestions:</h4>
+                <ul>
+                    ${result.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
+                </ul>
+            `;
+        } else {
+            suggestionsElement.innerHTML = `
+                <h4>Try:</h4>
+                <ul>
+                    <li>Check if the file exists and is readable</li>
+                    <li>Verify file permissions</li>
+                    <li>Ensure the monitoring server has access to this file</li>
+                </ul>
+            `;
+        }
     }
 
     console.log('📋 Displaying file content error:', {
@@ -1619,7 +1730,9 @@ function displayFileContentError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 // Search Viewer Modal Functions