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

claude_mpm/dashboard/static/js/dashboard.js

@@ -13,25 +13,34 @@
  * 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';
+// 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;
 
         // New modular components
         this.socketManager = null;
@@ -55,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();
@@ -81,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
@@ -95,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');
         }
     }
 
@@ -114,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
@@ -163,14 +205,22 @@ class Dashboard {
         // 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');
-        }
+        // Mount to header with retry logic for DOM readiness
+        const mountBuildTracker = () => {
+            const headerTitle = document.querySelector('.header-title');
+            if (headerTitle) {
+                // Insert after the title and status badge
+                this.buildTracker.mount(headerTitle);
+                console.log('BuildTracker mounted successfully');
+            } else {
+                console.warn('Header-title element not found for build tracker, will retry');
+                // Retry after a short delay if DOM is still being constructed
+                setTimeout(mountBuildTracker, 100);
+            }
+        };
+        
+        // Try to mount immediately, with retry logic if needed
+        mountBuildTracker();
         
         // Make available globally for debugging
         window.buildTracker = this.buildTracker;
@@ -193,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
@@ -249,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);
 
@@ -296,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();
         });
     }
@@ -372,6 +437,63 @@ class Dashboard {
             case 'events':
                 // Events tab is handled by EventViewer
                 break;
+            case 'activity':
+                // Trigger Activity tab rendering through the component
+                // Check if ActivityTree class is available (from built module)
+                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();
+                        }
+                    }
+                } else if (window.activityTree && typeof window.activityTree === 'function') {
+                    // Fallback to legacy approach if available
+                    const activityTreeInstance = window.activityTree();
+                    if (activityTreeInstance) {
+                        if (typeof activityTreeInstance.renderWhenVisible === 'function') {
+                            activityTreeInstance.renderWhenVisible();
+                        }
+                        if (typeof activityTreeInstance.forceShow === 'function') {
+                            activityTreeInstance.forceShow();
+                        }
+                    }
+                } else {
+                    // Module not loaded yet, retry after a delay (with retry limit)
+                    if (this.activityTreeRetryCount < this.maxRetryAttempts) {
+                        this.activityTreeRetryCount++;
+                        console.warn(`Activity tree component not available, retrying in 100ms... (attempt ${this.activityTreeRetryCount}/${this.maxRetryAttempts})`);
+                        setTimeout(() => {
+                            if (this.uiStateManager.getCurrentTab() === 'activity') {
+                                this.renderCurrentTab();
+                            }
+                        }, 100);
+                    } else {
+                        console.error('Maximum retry attempts reached for ActivityTree initialization. Giving up.');
+                        const activityContainer = document.getElementById('activity-tree-container') || document.getElementById('activity-tree');
+                        if (activityContainer) {
+                            activityContainer.innerHTML = '<div class="error-message">⚠️ Activity Tree failed to load. Please refresh the page.</div>';
+                        }
+                    }
+                }
+                break;
             case 'agents':
                 this.renderAgents();
                 break;
@@ -394,7 +516,7 @@ class Dashboard {
     }
 
     /**
-     * Render agents tab with hierarchical view
+     * Render agents tab with flat chronological view
      */
     renderAgents() {
         const agentsList = document.getElementById('agents-list');
@@ -404,17 +526,12 @@ class Dashboard {
         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;
+        // Generate flat HTML
+        const flatHTML = this.renderAgentsFlat(searchText, agentType);
+        agentsList.innerHTML = flatHTML;
         
-        // Add expand/collapse all buttons if not present
-        this.addHierarchyControls();
+        // Remove hierarchy controls if they exist
+        this.removeHierarchyControls();
         
         // Update filter dropdowns with available agent types
         const uniqueInstances = this.agentInference.getUniqueAgentInstances();
@@ -422,45 +539,202 @@ class Dashboard {
     }
     
     /**
-     * Add hierarchy control buttons
+     * Remove hierarchy control buttons (flat view doesn't need them)
      */
-    addHierarchyControls() {
-        const tabFilters = document.querySelector('#agents-tab .tab-filters');
-        if (!tabFilters) return;
-        
-        // Check if controls already exist
-        if (document.getElementById('hierarchy-controls')) return;
+    removeHierarchyControls() {
+        const existingControls = document.getElementById('hierarchy-controls');
+        if (existingControls) {
+            existingControls.remove();
+        }
+    }
+    
+    /**
+     * Render agents as a flat chronological list
+     * @param {string} searchText - Search filter
+     * @param {string} agentType - Agent type filter 
+     * @returns {string} HTML for flat agent list
+     */
+    renderAgentsFlat(searchText, agentType) {
+        const events = this.eventViewer.events;
+        if (!events || events.length === 0) {
+            return '<div class="no-events">No agent events found...</div>';
+        }
         
-        // 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>
-        `;
+        // Process agent inference to get agent mappings
+        this.agentInference.processAgentInference();
+        const eventAgentMap = this.agentInference.getEventAgentMap();
         
-        // 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();
+        // Collect all agent events with metadata
+        const agentEvents = [];
+        events.forEach((event, index) => {
+            const inference = eventAgentMap.get(index);
+            if (inference && (inference.type === 'subagent' || inference.type === 'main_agent')) {
+                // Apply filters
+                let includeEvent = true;
+                
+                if (searchText) {
+                    const searchLower = searchText.toLowerCase();
+                    includeEvent = includeEvent && (
+                        inference.agentName.toLowerCase().includes(searchLower) ||
+                        (event.tool_name && event.tool_name.toLowerCase().includes(searchLower)) ||
+                        (event.data && JSON.stringify(event.data).toLowerCase().includes(searchLower))
+                    );
+                }
+                
+                if (agentType) {
+                    includeEvent = includeEvent && inference.agentName.includes(agentType);
+                }
+                
+                if (includeEvent) {
+                    agentEvents.push({
+                        event,
+                        inference,
+                        index,
+                        timestamp: new Date(event.timestamp)
+                    });
                 }
             }
         });
         
-        tabFilters.appendChild(controls);
+        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 = '🟢';
+                details = 'Agent session began';
+            } else if (event.event_type === 'SubagentStop') {
+                action = 'Stopped';
+                actionIcon = '🔴';
+                details = 'Agent session ended';
+            } 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;
+                    if (params.file_path) {
+                        details = params.file_path;
+                    } else if (params.command) {
+                        details = params.command.substring(0, 50) + (params.command.length > 50 ? '...' : '');
+                    } else if (params.pattern) {
+                        details = `pattern="${params.pattern}"`;
+                    } else if (params.query) {
+                        details = `query="${params.query}"`;
+                    }
+                }
+            }
+            
+            // Status based on event type
+            let status = 'completed';
+            if (event.event_type === 'SubagentStart') {
+                status = 'active';
+            } 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">
+                        <div class="agent-event-time">${this.formatTimestamp(timestamp)}</div>
+                        <div class="agent-event-agent">
+                            ${this.getAgentIcon(inference.agentName)} ${inference.agentName}
+                        </div>
+                        <div class="agent-event-action">
+                            ${actionIcon} ${action}
+                        </div>
+                        <div class="agent-event-status status-${status}">
+                            ${this.getStatusIcon(status)}
+                        </div>
+                    </div>
+                    ${details ? `<div class="agent-event-details">${this.escapeHtml(details)}</div>` : ''}
+                </div>
+            `;
+        }).join('');
+        
+        return `<div class="agent-events-flat">${html}</div>`;
+    }
+    
+    /**
+     * Get icon for agent type
+     */
+    getAgentIcon(agentName) {
+        const agentIcons = {
+            'PM': '🎯',
+            'Engineer Agent': '🔧',
+            'Research Agent': '🔍', 
+            'QA Agent': '✅',
+            'Documentation Agent': '📝',
+            'Security Agent': '🔒',
+            'Ops Agent': '⚙️',
+            'Version Control Agent': '📦',
+            'Data Engineer Agent': '💾',
+            'Test Integration Agent': '🧪'
+        };
+        return agentIcons[agentName] || '🤖';
+    }
+    
+    /**
+     * Get icon for tool
+     */
+    getToolIcon(toolName) {
+        const toolIcons = {
+            'Read': '📖',
+            'Write': '✏️',
+            'Edit': '📝',
+            'Bash': '💻',
+            'Grep': '🔍',
+            'Glob': '📂',
+            'LS': '📁',
+            'Task': '📋'
+        };
+        return toolIcons[toolName] || '🔧';
+    }
+    
+    /**
+     * Get icon for status
+     */
+    getStatusIcon(status) {
+        const statusIcons = {
+            'active': '🟢',
+            'completed': '✅',
+            'error': '❌',
+            'pending': '🟡'
+        };
+        return statusIcons[status] || '❓';
+    }
+    
+    /**
+     * Format timestamp for display
+     */
+    formatTimestamp(timestamp) {
+        return timestamp.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit', 
+            second: '2-digit',
+            hour12: false
+        });
+    }
+    
+    /**
+     * Escape HTML for safe display
+     */
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
     }
 
     /**
@@ -491,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
@@ -517,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
     }
 
     /**
@@ -845,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');
@@ -888,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);
         });
@@ -906,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);
+        }
     }
 };
 
@@ -986,60 +1240,97 @@ 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);
 
-        console.log('📄 File viewer request sent:', {
-            filePath,
-            workingDir
-        });
+        // File viewer request sent
 
         // Wait for response
         const result = await responsePromise;
-        console.log('📦 File content received:', result);
+        // 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);
@@ -1047,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';
@@ -1092,7 +1386,7 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
 }
 
 function displayFileContent(modal, result) {
-    console.log('📝 displayFileContent called with:', result);
+    // Display file content in modal
     const contentArea = modal.querySelector('.file-viewer-content-area');
     const extensionElement = modal.querySelector('.file-extension');
     const encodingElement = modal.querySelector('.file-encoding');
@@ -1106,7 +1400,7 @@ function displayFileContent(modal, result) {
 
     // Update content with basic syntax highlighting
     if (codeElement && result.content) {
-        console.log('💡 Setting file content, length:', result.content.length);
+        // Setting file content
         codeElement.innerHTML = highlightCode(result.content, result.extension);
 
         // Force scrolling to work by setting explicit heights
@@ -1124,12 +1418,7 @@ function displayFileContent(modal, result) {
 
                 const availableHeight = modalHeight - headerHeight - toolbarHeight - 40; // 40px for padding
 
-                console.log('🎯 Setting file viewer scroll height:', {
-                    modalHeight,
-                    headerHeight,
-                    toolbarHeight,
-                    availableHeight
-                });
+                // Setting file viewer scroll height
 
                 wrapper.style.maxHeight = `${availableHeight}px`;
                 wrapper.style.overflowY = 'auto';
@@ -1142,7 +1431,7 @@ function displayFileContent(modal, result) {
     // Show content area
     if (contentArea) {
         contentArea.style.display = 'block';
-        console.log('✅ File content area displayed');
+        // File content area displayed
     }
 }
 
@@ -1153,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:', {
@@ -1176,7 +1469,9 @@ function displayFileError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 function highlightCode(code, extension) {
@@ -1281,459 +1576,38 @@ function formatFileSize(bytes) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 }
 
-// Git Diff Modal Functions - restored from original dashboard
-window.showGitDiffModal = function(filePath, timestamp, 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('git-diff-modal');
-    if (!modal) {
-        modal = createGitDiffModal();
-        document.body.appendChild(modal);
-    }
-
-    // Update modal content
-    updateGitDiffModal(modal, filePath, timestamp, workingDir);
-
-    // Show the modal as flex container
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden'; // Prevent background scrolling
-};
-
-window.hideGitDiffModal = function() {
-    const modal = document.getElementById('git-diff-modal');
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.style.overflow = ''; // Restore background scrolling
-    }
-};
-
-window.copyGitDiff = function() {
-    const modal = document.getElementById('git-diff-modal');
-    if (!modal) return;
-
-    const codeElement = modal.querySelector('.git-diff-code');
-    if (!codeElement) return;
-
-    const text = codeElement.textContent;
-
-    if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(() => {
-            // Show brief feedback
-            const button = modal.querySelector('.git-diff-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
-        }).catch(err => {
-            console.error('Failed to copy text:', err);
-        });
-    } else {
-        // Fallback for older browsers
-        const textarea = document.createElement('textarea');
-        textarea.value = text;
-        document.body.appendChild(textarea);
-        textarea.select();
-        document.execCommand('copy');
-        document.body.removeChild(textarea);
-
-        const button = modal.querySelector('.git-diff-copy');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        setTimeout(() => {
-            button.textContent = originalText;
-        }, 2000);
-    }
-};
-
-function createGitDiffModal() {
-    const modal = document.createElement('div');
-    modal.id = 'git-diff-modal';
-    modal.className = 'modal git-diff-modal';
-
-    modal.innerHTML = `
-        <div class="modal-content git-diff-content">
-            <div class="git-diff-header">
-                <h2 class="git-diff-title">
-                    <span class="git-diff-icon">📋</span>
-                    <span class="git-diff-title-text">Git Diff</span>
-                </h2>
-                <div class="git-diff-meta">
-                    <span class="git-diff-file-path"></span>
-                    <span class="git-diff-timestamp"></span>
-                </div>
-                <button class="git-diff-close" onclick="hideGitDiffModal()">
-                    <span>&times;</span>
-                </button>
-            </div>
-            <div class="git-diff-body">
-                <div class="git-diff-loading">
-                    <div class="loading-spinner"></div>
-                    <span>Loading git diff...</span>
-                </div>
-                <div class="git-diff-error" style="display: none;">
-                    <div class="error-icon">⚠️</div>
-                    <div class="error-message"></div>
-                    <div class="error-suggestions"></div>
-                </div>
-                <div class="git-diff-content-area" style="display: none;">
-                    <div class="git-diff-toolbar">
-                        <div class="git-diff-info">
-                            <span class="commit-hash"></span>
-                            <span class="diff-method"></span>
-                        </div>
-                        <div class="git-diff-actions">
-                            <button class="git-diff-copy" onclick="copyGitDiff()">
-                                📋 Copy
-                            </button>
-                        </div>
-                    </div>
-                    <div class="git-diff-scroll-wrapper">
-                        <pre class="git-diff-display"><code class="git-diff-code"></code></pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Close modal when clicking outside
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-            hideGitDiffModal();
-        }
-    });
-
-    // Close modal with Escape key
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modal.style.display === 'flex') {
-            hideGitDiffModal();
-        }
-    });
-
-    return modal;
-}
-
-async function updateGitDiffModal(modal, filePath, timestamp, workingDir) {
-    // Update header info
-    const filePathElement = modal.querySelector('.git-diff-file-path');
-    const timestampElement = modal.querySelector('.git-diff-timestamp');
-
-    filePathElement.textContent = filePath;
-    timestampElement.textContent = timestamp ? new Date(timestamp).toLocaleString() : 'Latest';
-
-    // Show loading state
-    modal.querySelector('.git-diff-loading').style.display = 'flex';
-    modal.querySelector('.git-diff-error').style.display = 'none';
-    modal.querySelector('.git-diff-content-area').style.display = 'none';
-
-    try {
-        // Get the Socket.IO server port with multiple fallbacks
-        let port = 8765; // Default fallback
-
-        // Try to get port from socketClient first
-        if (window.dashboard && window.dashboard.socketClient && window.dashboard.socketClient.port) {
-            port = window.dashboard.socketClient.port;
-        }
-        // Fallback to port input field if socketClient port is not available
-        else {
-            const portInput = document.getElementById('port-input');
-            if (portInput && portInput.value) {
-                port = portInput.value;
-            }
-        }
-
-        // Build URL parameters
-        const params = new URLSearchParams({
-            file: filePath
-        });
-
-        if (timestamp) {
-            params.append('timestamp', timestamp);
-        }
-        if (workingDir) {
-            params.append('working_dir', workingDir);
-        }
-
-        const requestUrl = `http://localhost:${port}/api/git-diff?${params}`;
-        console.log('🌐 Making git diff request to:', requestUrl);
-        console.log('📋 Git diff request parameters:', {
-            filePath,
-            timestamp,
-            workingDir,
-            urlParams: params.toString()
-        });
-
-        // Test server connectivity first
-        try {
-            const healthResponse = await fetch(`http://localhost:${port}/health`, {
-                method: 'GET',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                mode: 'cors'
-            });
-
-            if (!healthResponse.ok) {
-                throw new Error(`Server health check failed: ${healthResponse.status} ${healthResponse.statusText}`);
-            }
-
-            console.log('✅ Server health check passed');
-        } catch (healthError) {
-            throw new Error(`Cannot reach server at localhost:${port}. Health check failed: ${healthError.message}`);
-        }
-
-        // Make the actual git diff request
-        const response = await fetch(requestUrl, {
-            method: 'GET',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            },
-            mode: 'cors'
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        const result = await response.json();
-        console.log('📦 Git diff response:', result);
-
-        // Hide loading
-        modal.querySelector('.git-diff-loading').style.display = 'none';
-
-        if (result.success) {
-            console.log('📊 Displaying successful git diff');
-            // Show successful diff
-            displayGitDiff(modal, result);
-        } else {
-            console.log('⚠️ Displaying git diff error:', result);
-            // Show error
-            displayGitDiffError(modal, result);
-        }
-
-    } catch (error) {
-        console.error('❌ Failed to fetch git diff:', error);
-        console.error('Error details:', {
-            name: error.name,
-            message: error.message,
-            stack: error.stack,
-            filePath,
-            timestamp,
-            workingDir
-        });
-
-        modal.querySelector('.git-diff-loading').style.display = 'none';
-
-        // Create detailed error message based on error type
-        let errorMessage = `Network error: ${error.message}`;
-        let suggestions = [];
-
-        if (error.message.includes('Failed to fetch')) {
-            errorMessage = 'Failed to connect to the monitoring server';
-            suggestions = [
-                'Check if the monitoring server is running on port 8765',
-                'Verify the port configuration in the dashboard',
-                'Check browser console for CORS or network errors',
-                'Try refreshing the page and reconnecting'
-            ];
-        } else if (error.message.includes('health check failed')) {
-            errorMessage = error.message;
-            suggestions = [
-                'The server may be starting up - try again in a few seconds',
-                'Check if another process is using port 8765',
-                'Restart the claude-mpm monitoring server'
-            ];
-        } else if (error.message.includes('HTTP')) {
-            errorMessage = `Server error: ${error.message}`;
-            suggestions = [
-                'The server encountered an internal error',
-                'Check the server logs for more details',
-                'Try with a different file or working directory'
-            ];
-        }
-
-        displayGitDiffError(modal, {
-            error: errorMessage,
-            file_path: filePath,
-            working_dir: workingDir,
-            suggestions: suggestions,
-            debug_info: {
-                error_type: error.name,
-                original_message: error.message,
-                port: window.dashboard?.socketClient?.port || document.getElementById('port-input')?.value || '8765',
-                timestamp: new Date().toISOString()
-            }
-        });
-    }
-}
-
-function highlightGitDiff(diffText) {
-    /**
-     * Apply basic syntax highlighting to git diff output
-     * WHY: Git diffs have a standard format that can be highlighted for better readability:
-     * - Lines starting with '+' are additions (green)
-     * - Lines starting with '-' are deletions (red)
-     * - Lines starting with '@@' are context headers (blue)
-     * - File headers and metadata get special formatting
-     */
-    return diffText
-        .split('\n')
-        .map(line => {
-            // Escape HTML entities
-            const escaped = line
-                .replace(/&/g, '&amp;')
-                .replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;');
-
-            // Apply diff highlighting
-            if (line.startsWith('+++') || line.startsWith('---')) {
-                return `<span class="diff-header">${escaped}</span>`;
-            } else if (line.startsWith('@@')) {
-                return `<span class="diff-meta">${escaped}</span>`;
-            } else if (line.startsWith('+')) {
-                return `<span class="diff-addition">${escaped}</span>`;
-            } else if (line.startsWith('-')) {
-                return `<span class="diff-deletion">${escaped}</span>`;
-            } else if (line.startsWith('commit ') || line.startsWith('Author:') || line.startsWith('Date:')) {
-                return `<span class="diff-header">${escaped}</span>`;
-            } else {
-                return `<span class="diff-context">${escaped}</span>`;
-            }
-        })
-        .join('\n');
-}
-
-function displayGitDiff(modal, result) {
-    console.log('📝 displayGitDiff called with:', result);
-    const contentArea = modal.querySelector('.git-diff-content-area');
-    const commitHashElement = modal.querySelector('.commit-hash');
-    const methodElement = modal.querySelector('.diff-method');
-    const codeElement = modal.querySelector('.git-diff-code');
-
-    console.log('🔍 Elements found:', {
-        contentArea: !!contentArea,
-        commitHashElement: !!commitHashElement,
-        methodElement: !!methodElement,
-        codeElement: !!codeElement
-    });
-
-    // Update metadata
-    if (commitHashElement) commitHashElement.textContent = `Commit: ${result.commit_hash}`;
-    if (methodElement) methodElement.textContent = `Method: ${result.method}`;
-
-    // Update diff content with basic syntax highlighting
-    if (codeElement && result.diff) {
-        console.log('💡 Setting diff content, length:', result.diff.length);
-        codeElement.innerHTML = highlightGitDiff(result.diff);
-
-        // Force scrolling to work by setting explicit heights
-        const wrapper = modal.querySelector('.git-diff-scroll-wrapper');
-        if (wrapper) {
-            // Give it a moment for content to render
-            setTimeout(() => {
-                const modalContent = modal.querySelector('.modal-content');
-                const header = modal.querySelector('.git-diff-header');
-                const toolbar = modal.querySelector('.git-diff-toolbar');
-
-                const modalHeight = modalContent?.offsetHeight || 0;
-                const headerHeight = header?.offsetHeight || 0;
-                const toolbarHeight = toolbar?.offsetHeight || 0;
-
-                const availableHeight = modalHeight - headerHeight - toolbarHeight - 40; // 40px for padding
-
-                console.log('🎯 Setting explicit scroll height:', {
-                    modalHeight,
-                    headerHeight,
-                    toolbarHeight,
-                    availableHeight
-                });
-
-                wrapper.style.maxHeight = `${availableHeight}px`;
-                wrapper.style.overflowY = 'auto';
-            }, 50);
-        }
-    } else {
-        console.warn('⚠️ Missing codeElement or diff data');
-    }
-
-    // Show content area
-    if (contentArea) {
-        contentArea.style.display = 'block';
-        console.log('✅ Content area displayed');
-    }
-}
-
-function displayGitDiffError(modal, result) {
-    const errorArea = modal.querySelector('.git-diff-error');
-    const messageElement = modal.querySelector('.error-message');
-    const suggestionsElement = modal.querySelector('.error-suggestions');
-
-    // Create more user-friendly error messages
-    let errorMessage = result.error || 'Unknown error occurred';
-    let isUntracked = false;
-
-    if (errorMessage.includes('not tracked by git')) {
-        errorMessage = '📝 This file is not tracked by git yet';
-        isUntracked = true;
-    } else if (errorMessage.includes('No git history found')) {
-        errorMessage = '📋 No git history available for this file';
-    }
-
-    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) {
-        const suggestionTitle = isUntracked ? 'How to track this file:' : 'Suggestions:';
-        suggestionsElement.innerHTML = `
-            <h4>${suggestionTitle}</h4>
-            <ul>
-                ${result.suggestions.map(s => `<li>${s}</li>`).join('')}
-            </ul>
-        `;
-    } else {
-        suggestionsElement.innerHTML = '';
-    }
-
-    console.log('📋 Displaying git diff error:', {
-        originalError: result.error,
-        processedMessage: errorMessage,
-        isUntracked,
-        suggestions: result.suggestions
-    });
-
-    errorArea.style.display = 'block';
-}
-
 // 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() {
@@ -1757,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);
         });
@@ -1775,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);
+        }
     }
 };
 
@@ -1790,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';
@@ -1800,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:', {
@@ -1831,7 +1730,9 @@ function displayFileContentError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 // Search Viewer Modal Functions