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

claude_mpm/dashboard/static/js/dashboard.js

@@ -13,27 +13,31 @@
  * 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)
         this.eventViewer = null;
         this.moduleViewer = null;
         this.sessionManager = null;
-        
+
         // Retry prevention
         this.activityTreeRetryCount = 0;
         this.maxRetryAttempts = 10;
@@ -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();
@@ -78,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);
@@ -85,7 +97,40 @@ class Dashboard {
             throw error;
         }
     }
-    
+
+    /**
+     * 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
@@ -96,12 +141,10 @@ 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));
-        } else {
-            console.log('All critical components initialized');
         }
     }
 
@@ -110,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.
      */
@@ -119,9 +162,8 @@ 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
             this.validateInitialization();
         } catch (error) {
@@ -164,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');
@@ -181,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;
     }
@@ -196,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
@@ -206,7 +248,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 +303,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);
 
@@ -287,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();
             }
         });
 
@@ -309,7 +372,14 @@ class Dashboard {
 
         // Session changes
         document.addEventListener('sessionFilterChanged', (e) => {
-            console.log('Session filter changed, re-rendering current tab:', this.uiStateManager.getCurrentTab());
+            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();
         });
     }
@@ -391,28 +461,24 @@ 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) {
-                        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 +487,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();
                         }
                     }
@@ -475,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)
      */
@@ -501,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) {
@@ -513,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) => {
@@ -525,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 && (
@@ -534,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,
@@ -549,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 = '🟢';
@@ -574,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;
@@ -589,7 +653,7 @@ class Dashboard {
                     }
                 }
             }
-            
+
             // Status based on event type
             let status = 'completed';
             if (event.event_type === 'SubagentStart') {
@@ -597,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">
@@ -616,10 +680,10 @@ class Dashboard {
                 </div>
             `;
         }).join('');
-        
+
         return `<div class="agent-events-flat">${html}</div>`;
     }
-    
+
     /**
      * Get icon for agent type
      */
@@ -627,7 +691,7 @@ class Dashboard {
         const agentIcons = {
             'PM': '🎯',
             'Engineer Agent': '🔧',
-            'Research Agent': '🔍', 
+            'Research Agent': '🔍',
             'QA Agent': '✅',
             'Documentation Agent': '📝',
             'Security Agent': '🔒',
@@ -638,7 +702,7 @@ class Dashboard {
         };
         return agentIcons[agentName] || '🤖';
     }
-    
+
     /**
      * Get icon for tool
      */
@@ -655,7 +719,7 @@ class Dashboard {
         };
         return toolIcons[toolName] || '🔧';
     }
-    
+
     /**
      * Get icon for status
      */
@@ -668,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
      */
@@ -719,10 +783,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 +818,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 +1141,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 +1156,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 +1176,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 +1258,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 +1345,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 +1356,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 +1460,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 +1487,9 @@ function displayFileError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 function highlightCode(code, extension) {
@@ -1502,26 +1595,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 +1649,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 +1669,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 +1686,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 +1709,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 +1748,9 @@ function displayFileContentError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 // Search Viewer Modal Functions
@@ -1705,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>`;
@@ -1727,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;
     }
 }
@@ -1752,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 }