claude-mpm 3.4.13__py3-none-any.whl → 3.4.14__py3-none-any.whl

claude_mpm/dashboard/static/js/dashboard-original.js

@@ -0,0 +1,4134 @@
+/**
+ * Main Dashboard Application
+ * Coordinates all components and handles tab management
+ */
+
+class Dashboard {
+    constructor() {
+        // Components
+        this.socketClient = null;
+        this.eventViewer = null;
+        this.moduleViewer = null;
+        this.sessionManager = null;
+        this.hudVisualizer = null;
+        
+        // State
+        this.currentTab = 'events';
+        this.autoScroll = true;
+        this.hudMode = false;
+        
+        // Working directory state - will be set properly during initialization
+        this.currentWorkingDir = null;
+        
+        // Selection state - tracks the currently selected card across all tabs
+        this.selectedCard = {
+            tab: null,        // which tab the selection is in
+            index: null,      // index of selected item in that tab
+            type: null,       // 'event', 'agent', 'tool', 'file'
+            data: null        // the actual data object
+        };
+        
+        // Navigation state for each tab
+        this.tabNavigation = {
+            events: { selectedIndex: -1, items: [] },
+            agents: { selectedIndex: -1, items: [] },
+            tools: { selectedIndex: -1, items: [] },
+            files: { selectedIndex: -1, items: [] }
+        };
+        
+        // File tracking for files tab
+        this.fileOperations = new Map(); // Map of file paths to operations
+        
+        // Tool call tracking for tools tab
+        this.toolCalls = new Map(); // Map of tool call keys to paired pre/post events
+        
+        // Agent events tracking for agents tab
+        this.agentEvents = []; // Array of filtered agent events
+        
+        this.init();
+    }
+
+    /**
+     * Initialize the dashboard
+     */
+    init() {
+        // Initialize components
+        this.initializeComponents();
+        this.setupEventHandlers();
+        this.setupTabNavigation();
+        this.setupUnifiedKeyboardNavigation();
+        this.initializeFromURL();
+        
+        // Initialize agent inference system
+        this.initializeAgentInference();
+        
+        // Initialize working directory for current session
+        this.initializeWorkingDirectory();
+        
+        // Watch for footer directory changes
+        this.watchFooterDirectory();
+        
+        // Initialize HUD button state
+        this.updateHUDButtonState();
+        
+        console.log('Claude MPM Dashboard initialized');
+    }
+
+    /**
+     * Initialize agent inference system
+     * Based on docs/design/main-subagent-identification.md
+     */
+    initializeAgentInference() {
+        // Agent inference state tracking
+        this.agentInference = {
+            // Track current subagent delegation context
+            currentDelegation: null,
+            // Map of session_id -> agent context
+            sessionAgents: new Map(),
+            // Map of event indices -> inferred agent
+            eventAgentMap: new Map()
+        };
+        
+        console.log('Agent inference system initialized');
+    }
+
+    /**
+     * Infer agent context from event payload
+     * Based on production-ready detection from design document
+     * @param {Object} event - Event payload
+     * @returns {Object} - {type: 'main_agent'|'subagent', confidence: 'definitive'|'high'|'medium'|'default', agentName: string}
+     */
+    inferAgentFromEvent(event) {
+        // Handle both direct properties and nested data properties
+        const data = event.data || {};
+        const sessionId = event.session_id || data.session_id || 'unknown';
+        const eventType = event.hook_event_name || data.hook_event_name || event.type || '';
+        const subtype = event.subtype || '';
+        const toolName = event.tool_name || data.tool_name || '';
+        
+        // Direct event detection (highest confidence) - from design doc
+        if (eventType === 'SubagentStop' || subtype === 'subagent_stop') {
+            const agentName = this.extractAgentNameFromEvent(event);
+            return {
+                type: 'subagent',
+                confidence: 'definitive',
+                agentName: agentName,
+                reason: 'SubagentStop event'
+            };
+        }
+        
+        if (eventType === 'Stop' || subtype === 'stop') {
+            return {
+                type: 'main_agent',
+                confidence: 'definitive',
+                agentName: 'PM',
+                reason: 'Stop event'
+            };
+        }
+        
+        // Tool-based detection (high confidence) - from design doc
+        if (toolName === 'Task') {
+            const agentName = this.extractSubagentTypeFromTask(event);
+            if (agentName) {
+                return {
+                    type: 'subagent',
+                    confidence: 'high',
+                    agentName: agentName,
+                    reason: 'Task tool with subagent_type'
+                };
+            }
+        }
+        
+        // Hook event pattern analysis (high confidence)
+        if (eventType === 'PreToolUse' && toolName === 'Task') {
+            const agentName = this.extractSubagentTypeFromTask(event);
+            if (agentName) {
+                return {
+                    type: 'subagent',
+                    confidence: 'high',
+                    agentName: agentName,
+                    reason: 'PreToolUse Task delegation'
+                };
+            }
+        }
+        
+        // Session pattern analysis (medium confidence) - from design doc
+        if (sessionId) {
+            const sessionLower = sessionId.toLowerCase();
+            if (['subagent', 'task', 'agent-'].some(pattern => sessionLower.includes(pattern))) {
+                return {
+                    type: 'subagent',
+                    confidence: 'medium',
+                    agentName: 'Subagent',
+                    reason: 'Session ID pattern'
+                };
+            }
+        }
+        
+        // Agent type field analysis
+        const agentType = event.agent_type || event.data?.agent_type;
+        const subagentType = event.subagent_type || event.data?.subagent_type;
+        
+        if (subagentType && subagentType !== 'unknown') {
+            return {
+                type: 'subagent',
+                confidence: 'high',
+                agentName: subagentType,
+                reason: 'subagent_type field'
+            };
+        }
+        
+        if (agentType && agentType !== 'unknown' && agentType !== 'main') {
+            return {
+                type: 'subagent',
+                confidence: 'medium',
+                agentName: agentType,
+                reason: 'agent_type field'
+            };
+        }
+        
+        // Default to main agent (from design doc)
+        return {
+            type: 'main_agent',
+            confidence: 'default',
+            agentName: 'PM',
+            reason: 'default classification'
+        };
+    }
+
+    /**
+     * Extract subagent type from Task tool parameters
+     * @param {Object} event - Event with Task tool
+     * @returns {string|null} - Subagent type or null
+     */
+    extractSubagentTypeFromTask(event) {
+        // Check tool_parameters directly
+        if (event.tool_parameters?.subagent_type) {
+            return event.tool_parameters.subagent_type;
+        }
+        
+        // Check nested in data.tool_parameters (hook events)
+        if (event.data?.tool_parameters?.subagent_type) {
+            return event.data.tool_parameters.subagent_type;
+        }
+        
+        // Check delegation_details (new structure)
+        if (event.data?.delegation_details?.agent_type) {
+            return event.data.delegation_details.agent_type;
+        }
+        
+        // Check tool_input fallback
+        if (event.tool_input?.subagent_type) {
+            return event.tool_input.subagent_type;
+        }
+        
+        return null;
+    }
+
+    /**
+     * Extract agent name from any event
+     * @param {Object} event - Event payload
+     * @returns {string} - Agent name
+     */
+    extractAgentNameFromEvent(event) {
+        // Priority order based on reliability from design doc
+        const data = event.data || {};
+        
+        // 1. Task tool subagent_type (highest priority)
+        if (event.tool_name === 'Task' || data.tool_name === 'Task') {
+            const taskAgent = this.extractSubagentTypeFromTask(event);
+            if (taskAgent) return taskAgent;
+        }
+        
+        // 2. Direct subagent_type field
+        if (event.subagent_type && event.subagent_type !== 'unknown') {
+            return event.subagent_type;
+        }
+        if (data.subagent_type && data.subagent_type !== 'unknown') {
+            return data.subagent_type;
+        }
+        
+        // 3. Agent type fields (but not 'main' or 'unknown')
+        if (event.agent_type && !['main', 'unknown'].includes(event.agent_type)) {
+            return event.agent_type;
+        }
+        if (data.agent_type && !['main', 'unknown'].includes(data.agent_type)) {
+            return event.agent_type;
+        }
+        
+        if (event.data?.agent_type && !['main', 'unknown'].includes(event.data.agent_type)) {
+            return event.data.agent_type;
+        }
+        
+        // 5. Other fallbacks
+        if (event.agent && event.agent !== 'unknown') {
+            return event.agent;
+        }
+        
+        if (event.name && event.name !== 'unknown') {
+            return event.name;
+        }
+        
+        // Default fallback
+        return 'Unknown';
+    }
+
+    /**
+     * Process all events and build agent inference context
+     * This tracks delegation boundaries and agent context throughout the session
+     */
+    processAgentInference() {
+        const events = this.eventViewer.events;
+        
+        // Reset inference state
+        this.agentInference.currentDelegation = null;
+        this.agentInference.sessionAgents.clear();
+        this.agentInference.eventAgentMap.clear();
+        
+        console.log('Processing agent inference for', events.length, 'events');
+        
+        // Process events chronologically to track delegation context
+        events.forEach((event, index) => {
+            const inference = this.inferAgentFromEvent(event);
+            const sessionId = event.session_id || 'default';
+            
+            // Track delegation boundaries
+            if (event.tool_name === 'Task' && inference.type === 'subagent') {
+                // Start of subagent delegation
+                this.agentInference.currentDelegation = {
+                    agentName: inference.agentName,
+                    sessionId: sessionId,
+                    startIndex: index,
+                    endIndex: null
+                };
+                console.log('Delegation started:', this.agentInference.currentDelegation);
+            } else if (inference.confidence === 'definitive' && inference.reason === 'SubagentStop event') {
+                // End of subagent delegation
+                if (this.agentInference.currentDelegation) {
+                    this.agentInference.currentDelegation.endIndex = index;
+                    console.log('Delegation ended:', this.agentInference.currentDelegation);
+                    this.agentInference.currentDelegation = null;
+                }
+            }
+            
+            // Determine agent for this event based on context
+            let finalAgent = inference;
+            
+            // If we're in a delegation context and this event doesn't have high confidence agent info,
+            // inherit from delegation context
+            if (this.agentInference.currentDelegation && 
+                inference.confidence === 'default' && 
+                sessionId === this.agentInference.currentDelegation.sessionId) {
+                finalAgent = {
+                    type: 'subagent',
+                    confidence: 'inherited',
+                    agentName: this.agentInference.currentDelegation.agentName,
+                    reason: 'inherited from delegation context'
+                };
+            }
+            
+            // Store the inference result
+            this.agentInference.eventAgentMap.set(index, finalAgent);
+            
+            // Update session agent tracking
+            this.agentInference.sessionAgents.set(sessionId, finalAgent);
+            
+            // Debug first few inferences
+            if (index < 5) {
+                console.log(`Event ${index} agent inference:`, {
+                    event_type: event.type,
+                    subtype: event.subtype,
+                    tool_name: event.tool_name,
+                    inference: finalAgent
+                });
+            }
+        });
+        
+        console.log('Agent inference processing complete. Results:', {
+            total_events: events.length,
+            inferred_agents: this.agentInference.eventAgentMap.size,
+            unique_sessions: this.agentInference.sessionAgents.size
+        });
+    }
+
+    /**
+     * Get inferred agent for a specific event
+     * @param {number} eventIndex - Index of event in events array
+     * @returns {Object|null} - Agent inference result or null
+     */
+    getInferredAgent(eventIndex) {
+        return this.agentInference.eventAgentMap.get(eventIndex) || null;
+    }
+
+    /**
+     * Get inferred agent for an event object
+     * @param {Object} event - Event object
+     * @returns {Object|null} - Agent inference result or null
+     */
+    getInferredAgentForEvent(event) {
+        const events = this.eventViewer.events;
+        const eventIndex = events.indexOf(event);
+        if (eventIndex === -1) return null;
+        
+        return this.getInferredAgent(eventIndex);
+    }
+
+    /**
+     * Initialize all components
+     */
+    initializeComponents() {
+        // Initialize socket client
+        this.socketClient = new SocketClient();
+        
+        // Initialize UI components
+        this.eventViewer = new EventViewer('events-list', this.socketClient);
+        this.moduleViewer = new ModuleViewer('module-content');
+        this.sessionManager = new SessionManager(this.socketClient);
+        this.hudVisualizer = new HUDVisualizer();
+        
+        // Store globally for backward compatibility
+        window.socketClient = this.socketClient;
+        window.eventViewer = this.eventViewer;
+        window.moduleViewer = this.moduleViewer;
+        window.sessionManager = this.sessionManager;
+        window.hudVisualizer = this.hudVisualizer;
+        
+        // Initialize HUD visualizer
+        this.hudVisualizer.initialize();
+        
+        // Setup component interactions
+        this.setupComponentInteractions();
+    }
+
+    /**
+     * Setup interactions between components
+     */
+    setupComponentInteractions() {
+        // Socket connection status is now handled in the header connection status badge
+        // Footer now focuses on session-specific information
+
+        // Listen for socket events to update file operations and tool calls
+        this.socketClient.onEventUpdate((events) => {
+            this.updateFileOperations(events);
+            this.updateToolCalls(events);
+            // Process agent inference after events are updated
+            this.processAgentInference();
+            this.renderCurrentTab();
+            
+            // Process new events for HUD visualization
+            if (this.hudMode && this.hudVisualizer && events.length > 0) {
+                // Get the most recent event for HUD processing
+                const latestEvent = events[events.length - 1];
+                this.handleHUDEvent(latestEvent);
+            }
+            
+            // Auto-scroll events list if on events tab
+            if (this.currentTab === 'events') {
+                this.scrollListToBottom('events-list');
+            }
+        });
+
+        // Listen for connection status changes
+        document.addEventListener('socketConnectionStatus', (e) => {
+            this.updateConnectionStatus(e.detail.status, e.detail.type);
+            
+            // Set up git branch listener when connected
+            if (e.detail.type === 'connected' && this.socketClient && this.socketClient.socket) {
+                // Remove any existing listener first
+                this.socketClient.socket.off('git_branch_response');
+                
+                // Add the listener
+                this.socketClient.socket.on('git_branch_response', (data) => {
+                    if (data.success) {
+                        const footerBranch = document.getElementById('footer-git-branch');
+                        if (footerBranch) {
+                            footerBranch.textContent = data.branch;
+                        }
+                    } else {
+                        const footerBranch = document.getElementById('footer-git-branch');
+                        if (footerBranch) {
+                            footerBranch.textContent = 'No Git';
+                        }
+                    }
+                });
+                
+                // Request git branch for current working directory
+                this.updateGitBranch(this.currentWorkingDir);
+            }
+        });
+
+        // Listen for session filter changes to update dropdown options
+        document.addEventListener('sessionFilterChanged', (e) => {
+            console.log('Session filter changed, re-rendering current tab:', this.currentTab);
+            this.renderCurrentTab();
+            // Update HUD button state based on session selection
+            this.updateHUDButtonState();
+        });
+    }
+
+    /**
+     * Setup general event handlers
+     */
+    setupEventHandlers() {
+        // Connection controls
+        const connectBtn = document.getElementById('connect-btn');
+        const disconnectBtn = document.getElementById('disconnect-btn');
+        const portInput = document.getElementById('port-input');
+
+        if (connectBtn) {
+            connectBtn.addEventListener('click', () => {
+                const port = portInput ? portInput.value : '8765';
+                this.socketClient.connect(port);
+            });
+        }
+
+        if (disconnectBtn) {
+            disconnectBtn.addEventListener('click', () => {
+                this.socketClient.disconnect();
+            });
+        }
+
+        // Connection toggle button
+        const connectionToggleBtn = document.getElementById('connection-toggle-btn');
+        if (connectionToggleBtn) {
+            connectionToggleBtn.addEventListener('click', () => {
+                this.toggleConnectionControls();
+            });
+        }
+
+        // Working directory controls
+        const changeDirBtn = document.getElementById('change-dir-btn');
+        const workingDirPath = document.getElementById('working-dir-path');
+        
+        if (changeDirBtn) {
+            changeDirBtn.addEventListener('click', () => {
+                this.showChangeDirDialog();
+            });
+        }
+        
+        if (workingDirPath) {
+            workingDirPath.addEventListener('click', () => {
+                this.showChangeDirDialog();
+            });
+        }
+        
+        // Action buttons
+        const clearBtn = document.querySelector('button[onclick="clearEvents()"]');
+        const exportBtn = document.getElementById('export-btn');
+        
+        if (clearBtn) {
+            clearBtn.addEventListener('click', () => {
+                this.clearEvents();
+            });
+        }
+        
+        if (exportBtn) {
+            exportBtn.addEventListener('click', () => {
+                this.exportEvents();
+            });
+        }
+
+        // HUD toggle button
+        const hudToggleBtn = document.getElementById('hud-toggle-btn');
+        if (hudToggleBtn) {
+            hudToggleBtn.addEventListener('click', () => {
+                this.toggleHUD();
+            });
+        }
+
+        // Clear selection button
+        const clearSelectionBtn = document.querySelector('button[onclick="clearSelection()"]');
+        if (clearSelectionBtn) {
+            clearSelectionBtn.addEventListener('click', () => {
+                this.clearSelection();
+            });
+        }
+
+        // Tab-specific filters
+        this.setupTabFilters();
+    }
+
+    /**
+     * Setup filtering for each tab
+     */
+    setupTabFilters() {
+        // Agents tab filters
+        const agentsSearchInput = document.getElementById('agents-search-input');
+        const agentsTypeFilter = document.getElementById('agents-type-filter');
+        
+        if (agentsSearchInput) {
+            agentsSearchInput.addEventListener('input', () => {
+                if (this.currentTab === 'agents') this.renderCurrentTab();
+            });
+        }
+        
+        if (agentsTypeFilter) {
+            agentsTypeFilter.addEventListener('change', () => {
+                if (this.currentTab === 'agents') this.renderCurrentTab();
+            });
+        }
+
+        // Tools tab filters
+        const toolsSearchInput = document.getElementById('tools-search-input');
+        const toolsTypeFilter = document.getElementById('tools-type-filter');
+        
+        if (toolsSearchInput) {
+            toolsSearchInput.addEventListener('input', () => {
+                if (this.currentTab === 'tools') this.renderCurrentTab();
+            });
+        }
+        
+        if (toolsTypeFilter) {
+            toolsTypeFilter.addEventListener('change', () => {
+                if (this.currentTab === 'tools') this.renderCurrentTab();
+            });
+        }
+
+        // Files tab filters
+        const filesSearchInput = document.getElementById('files-search-input');
+        const filesTypeFilter = document.getElementById('files-type-filter');
+        
+        if (filesSearchInput) {
+            filesSearchInput.addEventListener('input', () => {
+                if (this.currentTab === 'files') this.renderCurrentTab();
+            });
+        }
+        
+        if (filesTypeFilter) {
+            filesTypeFilter.addEventListener('change', () => {
+                if (this.currentTab === 'files') this.renderCurrentTab();
+            });
+        }
+    }
+
+    /**
+     * Populate filter dropdown with unique values from data
+     * @param {string} selectId - ID of the select element
+     * @param {Array} values - Array of unique values to populate
+     * @param {string} allOption - Text for the "All" option
+     */
+    populateFilterDropdown(selectId, values, allOption) {
+        const select = document.getElementById(selectId);
+        if (!select) return;
+
+        // Store current selection
+        const currentValue = select.value;
+
+        // Clear existing options except the first "All" option
+        select.innerHTML = `<option value="">${allOption}</option>`;
+
+        // Add unique values, sorted alphabetically
+        const sortedValues = [...values].sort();
+        sortedValues.forEach(value => {
+            const option = document.createElement('option');
+            option.value = value;
+            option.textContent = value;
+            select.appendChild(option);
+        });
+
+        // Restore selection if it still exists
+        if (currentValue && sortedValues.includes(currentValue)) {
+            select.value = currentValue;
+        }
+    }
+
+    /**
+     * Setup tab navigation
+     */
+    setupTabNavigation() {
+        const tabButtons = document.querySelectorAll('.tab-button');
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const tabName = this.getTabNameFromButton(button);
+                this.switchTab(tabName);
+            });
+        });
+    }
+
+    /**
+     * Setup unified keyboard navigation for all tabs
+     */
+    setupUnifiedKeyboardNavigation() {
+        document.addEventListener('keydown', (e) => {
+            // Only handle navigation if no input is focused
+            if (document.activeElement && 
+                (document.activeElement.tagName === 'INPUT' || 
+                 document.activeElement.tagName === 'TEXTAREA' || 
+                 document.activeElement.tagName === 'SELECT')) {
+                return;
+            }
+
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleUnifiedArrowNavigation(e.key === 'ArrowDown' ? 1 : -1);
+            } else if (e.key === 'Enter') {
+                e.preventDefault();
+                this.handleUnifiedEnterKey();
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.clearUnifiedSelection();
+            }
+        });
+    }
+
+    /**
+     * Get tab name from button text
+     */
+    getTabNameFromButton(button) {
+        const text = button.textContent.toLowerCase();
+        if (text.includes('events')) return 'events';
+        if (text.includes('agents')) return 'agents';
+        if (text.includes('tools')) return 'tools';
+        if (text.includes('files')) return 'files';
+        return 'events';
+    }
+
+    /**
+     * Initialize from URL parameters
+     */
+    initializeFromURL() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const defaultPort = urlParams.get('port') || '8765';
+        const autoConnect = urlParams.get('autoconnect');
+        
+        const portInput = document.getElementById('port-input');
+        if (portInput) {
+            portInput.value = defaultPort;
+        }
+        
+        // Auto-connect logic:
+        // - Connect if autoconnect=true (explicit)
+        // - Connect by default unless autoconnect=false (explicit)
+        // - Don't connect if already connected or connecting
+        const shouldAutoConnect = autoConnect === 'true' || (autoConnect !== 'false' && autoConnect === null);
+        
+        if (shouldAutoConnect && !this.socketClient.isConnected && !this.socketClient.isConnecting) {
+            console.log('Auto-connecting to Socket.IO server on page load...');
+            this.socketClient.connect(defaultPort);
+        }
+    }
+
+    /**
+     * Switch to a different tab
+     */
+    switchTab(tabName) {
+        console.log(`[DEBUG] switchTab called with tabName: ${tabName}`);
+        this.currentTab = tabName;
+        
+        // Update tab buttons
+        document.querySelectorAll('.tab-button').forEach(btn => {
+            btn.classList.remove('active');
+            if (this.getTabNameFromButton(btn) === tabName) {
+                btn.classList.add('active');
+            }
+        });
+        
+        // Update tab content
+        document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+        });
+        
+        const activeTab = document.getElementById(`${tabName}-tab`);
+        console.log(`[DEBUG] Active tab element found:`, activeTab);
+        if (activeTab) {
+            activeTab.classList.add('active');
+        }
+        
+        // Render content for the active tab
+        console.log(`[DEBUG] About to render current tab: ${tabName}`);
+        this.renderCurrentTab();
+        
+        // Auto-scroll to bottom after tab content is rendered
+        const listId = `${tabName}-list`;
+        console.log(`[DEBUG] About to scroll list with ID: ${listId}`);
+        this.scrollListToBottom(listId);
+        
+        // Fallback: Try again with longer delay in case content takes time to render
+        setTimeout(() => {
+            console.log(`[DEBUG] Fallback scroll attempt for ${listId}`);
+            this.scrollListToBottom(listId);
+        }, 200);
+        
+        console.log(`[DEBUG] Switched to ${tabName} tab`);
+    }
+
+    /**
+     * Handle unified arrow key navigation across all tabs
+     * @param {number} direction - Direction: 1 for down, -1 for up
+     */
+    handleUnifiedArrowNavigation(direction) {
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (!tabNav) return;
+
+        // Update items list for current tab
+        this.updateTabNavigationItems();
+
+        if (tabNav.items.length === 0) return;
+
+        // Calculate new index
+        let newIndex = tabNav.selectedIndex + direction;
+        
+        // Wrap around
+        if (newIndex >= tabNav.items.length) {
+            newIndex = 0;
+        } else if (newIndex < 0) {
+            newIndex = tabNav.items.length - 1;
+        }
+
+        // Update selection
+        this.selectCardByIndex(this.currentTab, newIndex);
+    }
+
+    /**
+     * Handle unified Enter key across all tabs
+     */
+    handleUnifiedEnterKey() {
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (!tabNav || tabNav.selectedIndex === -1) return;
+
+        // Trigger click on the selected item
+        const selectedElement = tabNav.items[tabNav.selectedIndex];
+        if (selectedElement && selectedElement.onclick) {
+            selectedElement.click();
+        }
+    }
+
+    /**
+     * Clear unified selection across all tabs
+     */
+    clearUnifiedSelection() {
+        // Clear all tab navigation states
+        Object.keys(this.tabNavigation).forEach(tabName => {
+            this.tabNavigation[tabName].selectedIndex = -1;
+        });
+        
+        // Clear card selection
+        this.clearCardSelection();
+        
+        // Clear EventViewer selection if it exists
+        if (this.eventViewer) {
+            this.eventViewer.clearSelection();
+        }
+        
+        // Clear module viewer
+        if (this.moduleViewer) {
+            this.moduleViewer.clear();
+        }
+    }
+
+    /**
+     * Update items list for current tab navigation
+     */
+    updateTabNavigationItems() {
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (!tabNav) return;
+
+        let containerSelector;
+        switch (this.currentTab) {
+            case 'events':
+                containerSelector = '#events-list .event-item';
+                break;
+            case 'agents':
+                containerSelector = '#agents-list .event-item';
+                break;
+            case 'tools':
+                containerSelector = '#tools-list .event-item';
+                break;
+            case 'files':
+                containerSelector = '#files-list .file-item, #files-list .event-item';
+                break;
+        }
+
+        if (containerSelector) {
+            tabNav.items = Array.from(document.querySelectorAll(containerSelector));
+        }
+    }
+
+    /**
+     * Select a card by index in the specified tab
+     * @param {string} tabName - Tab name
+     * @param {number} index - Index of item to select
+     */
+    selectCardByIndex(tabName, index) {
+        const tabNav = this.tabNavigation[tabName];
+        if (!tabNav || index < 0 || index >= tabNav.items.length) return;
+
+        // Update navigation state
+        tabNav.selectedIndex = index;
+        
+        // Update visual selection
+        this.updateUnifiedSelectionUI();
+        
+        // Scroll selected item into view
+        const selectedElement = tabNav.items[index];
+        if (selectedElement) {
+            selectedElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'nearest' 
+            });
+        }
+
+        // Update details view based on tab
+        this.showCardDetails(tabName, index);
+    }
+
+    /**
+     * Update visual selection UI for current tab
+     */
+    updateUnifiedSelectionUI() {
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (!tabNav) return;
+
+        // Clear all selections in current tab
+        tabNav.items.forEach((item, index) => {
+            item.classList.toggle('selected', index === tabNav.selectedIndex);
+        });
+    }
+
+    /**
+     * Show card details based on tab and index
+     * @param {string} tabName - Tab name
+     * @param {number} index - Index of item
+     */
+    showCardDetails(tabName, index) {
+        switch (tabName) {
+            case 'events':
+                // Use EventViewer's existing method
+                if (this.eventViewer) {
+                    this.eventViewer.showEventDetails(index);
+                }
+                break;
+            case 'agents':
+                this.showAgentDetailsByIndex(index);
+                break;
+            case 'tools':
+                this.showToolDetailsByIndex(index);
+                break;
+            case 'files':
+                this.showFileDetailsByIndex(index);
+                break;
+        }
+    }
+
+    /**
+     * Select a card and update the UI
+     * @param {string} tabName - Tab name (events, agents, tools, files)
+     * @param {number} index - Index of the item in that tab
+     * @param {string} type - Type of item (event, agent, tool, file)
+     * @param {Object} data - The data object for the selected item
+     */
+    selectCard(tabName, index, type, data) {
+        // Clear previous selection
+        this.clearCardSelection();
+        
+        // Update selection state
+        this.selectedCard = {
+            tab: tabName,
+            index: index,
+            type: type,
+            data: data
+        };
+        
+        // Update visual selection in the current tab
+        this.updateCardSelectionUI();
+        
+        console.log('Card selected:', this.selectedCard);
+    }
+    
+    /**
+     * Clear card selection
+     */
+    clearCardSelection() {
+        // Clear visual selection from all tabs
+        document.querySelectorAll('.event-item.selected, .file-item.selected').forEach(el => {
+            el.classList.remove('selected');
+        });
+        
+        // Reset selection state
+        this.selectedCard = {
+            tab: null,
+            index: null,
+            type: null,
+            data: null
+        };
+    }
+    
+    /**
+     * Update visual selection in the current tab
+     */
+    updateCardSelectionUI() {
+        if (!this.selectedCard.tab || this.selectedCard.index === null) return;
+        
+        // Get the list container for the selected tab
+        let listContainer;
+        switch (this.selectedCard.tab) {
+            case 'events':
+                listContainer = document.getElementById('events-list');
+                break;
+            case 'agents':
+                listContainer = document.getElementById('agents-list');
+                break;
+            case 'tools':
+                listContainer = document.getElementById('tools-list');
+                break;
+            case 'files':
+                listContainer = document.getElementById('files-list');
+                break;
+        }
+        
+        if (listContainer) {
+            const cards = listContainer.querySelectorAll('.event-item, .file-item');
+            cards.forEach((card, index) => {
+                card.classList.toggle('selected', index === this.selectedCard.index);
+            });
+        }
+    }
+
+    /**
+     * Show agent details by index in the current filtered list
+     * @param {number} index - Index in the filtered agents list
+     */
+    showAgentDetailsByIndex(index) {
+        // Use stored filtered agent events instead of recalculating
+        const agentEvents = this.agentEvents;
+
+        if (index < 0 || index >= agentEvents.length) {
+            console.warn('Invalid agent index:', index, 'Available agents:', agentEvents.length);
+            return;
+        }
+
+        const event = agentEvents[index];
+        const eventIndex = this.eventViewer.events.indexOf(event);
+        this.showAgentDetails(index, eventIndex);
+    }
+
+    /**
+     * Show tool details by index in the current filtered list
+     * @param {number} index - Index in the filtered tool calls list
+     */
+    showToolDetailsByIndex(index) {
+        // Get filtered tool calls array (same as renderTools)
+        let toolCallsArray = Array.from(this.toolCalls.entries())
+            .filter(([key, toolCall]) => {
+                return toolCall.tool_name && (toolCall.pre_event || toolCall.post_event);
+            })
+            .sort((a, b) => {
+                const timeA = new Date(a[1].timestamp || 0);
+                const timeB = new Date(b[1].timestamp || 0);
+                return timeA - timeB;
+            });
+
+        // Apply tab-specific filters
+        toolCallsArray = this.applyToolCallFilters(toolCallsArray);
+
+        if (index < 0 || index >= toolCallsArray.length) return;
+
+        const [toolCallKey] = toolCallsArray[index];
+        this.showToolCallDetails(toolCallKey);
+    }
+
+    /**
+     * Show file details by index in the current filtered list
+     * @param {number} index - Index in the filtered files list
+     */
+    showFileDetailsByIndex(index) {
+        let filesArray = Array.from(this.fileOperations.entries())
+            .filter(([filePath, fileData]) => {
+                return fileData.operations && fileData.operations.length > 0;
+            })
+            .sort((a, b) => {
+                const timeA = a[1].lastOperation ? new Date(a[1].lastOperation) : new Date(0);
+                const timeB = b[1].lastOperation ? new Date(b[1].lastOperation) : new Date(0);
+                return timeA - timeB;
+            });
+
+        filesArray = this.applyFilesFilters(filesArray);
+
+        if (index < 0 || index >= filesArray.length) return;
+
+        const [filePath] = filesArray[index];
+        this.showFileDetails(filePath);
+    }
+
+    /**
+     * Render content for the current tab
+     */
+    renderCurrentTab() {
+        switch (this.currentTab) {
+            case 'events':
+                // Events are automatically rendered by EventViewer
+                break;
+            case 'agents':
+                this.renderAgents();
+                break;
+            case 'tools':
+                this.renderTools();
+                break;
+            case 'files':
+                this.renderFiles();
+                break;
+        }
+        
+        // Update navigation items for the current tab after rendering
+        this.updateTabNavigationItems();
+        
+        // Restore selection after rendering if it's in the current tab
+        if (this.selectedCard.tab === this.currentTab) {
+            this.updateCardSelectionUI();
+        }
+        
+        // Update unified selection UI to maintain consistency
+        this.updateUnifiedSelectionUI();
+    }
+
+    /**
+     * Render agents tab
+     */
+    renderAgents() {
+        console.log('=== RENDERAGENTS DEBUG START ===');
+        console.log('1. Function called, checking agentsList element...');
+        
+        const agentsList = document.getElementById('agents-list');
+        if (!agentsList) {
+            console.error('agentsList element not found!');
+            return;
+        }
+        console.log('2. agentsList element found:', agentsList);
+
+        const events = this.getFilteredEventsForTab('agents');
+        console.log('3. Total events from getFilteredEventsForTab:', events.length);
+        
+        // Enhanced debugging: log first few events to understand structure
+        if (events.length > 0) {
+            console.log('Agent tab - sample events for analysis:');
+            events.slice(0, 3).forEach((event, i) => {
+                console.log(`  Event ${i}:`, {
+                    type: event.type,
+                    subtype: event.subtype,
+                    tool_name: event.tool_name,
+                    agent_type: event.agent_type,
+                    subagent_type: event.subagent_type,
+                    tool_parameters: event.tool_parameters,
+                    delegation_details: event.delegation_details,
+                    data: event.data ? {
+                        agent_type: event.data.agent_type,
+                        subagent_type: event.data.subagent_type,
+                        event_type: event.data.event_type,
+                        tool_name: event.data.tool_name,
+                        tool_parameters: event.data.tool_parameters,
+                        delegation_details: event.data.delegation_details
+                    } : 'no data field'
+                });
+            });
+            
+            // Count events by type and tool_name for debugging
+            const eventCounts = {};
+            const toolCounts = {};
+            const agentCounts = {};
+            events.forEach(event => {
+                const key = `${event.type}.${event.subtype || 'none'}`;
+                eventCounts[key] = (eventCounts[key] || 0) + 1;
+                
+                if (event.tool_name) {
+                    toolCounts[event.tool_name] = (toolCounts[event.tool_name] || 0) + 1;
+                }
+                
+                // Count agent types from multiple sources
+                const agentTypes = [];
+                if (event.agent_type) agentTypes.push(`direct:${event.agent_type}`);
+                if (event.subagent_type) agentTypes.push(`sub:${event.subagent_type}`);
+                if (event.tool_parameters?.subagent_type) agentTypes.push(`tool_param:${event.tool_parameters.subagent_type}`);
+                if (event.data?.agent_type) agentTypes.push(`data:${event.data.agent_type}`);
+                if (event.data?.subagent_type) agentTypes.push(`data_sub:${event.data.subagent_type}`);
+                if (event.data?.delegation_details?.agent_type) agentTypes.push(`delegation:${event.data.delegation_details.agent_type}`);
+                
+                agentTypes.forEach(agentType => {
+                    agentCounts[agentType] = (agentCounts[agentType] || 0) + 1;
+                });
+            });
+            console.log('Agent tab - event type breakdown:', eventCounts);
+            console.log('Agent tab - tool breakdown:', toolCounts);
+            console.log('Agent tab - agent type breakdown:', agentCounts);
+        }
+        
+        // Use agent inference to filter events instead of hardcoded logic
+        let agentEvents = events
+            .map((event, index) => ({ event, index, inference: this.inferAgentFromEvent(event) }))
+            .filter(({ event, index, inference }) => {
+                // Show events that have meaningful agent context
+                if (!inference) return false;
+                
+                // Include events that are definitely agent-related
+                const isAgentRelated = inference.type === 'subagent' || 
+                                     (inference.type === 'main_agent' && inference.confidence !== 'default') ||
+                                     event.tool_name === 'Task' ||
+                                     event.hook_event_name === 'SubagentStop' ||
+                                     event.subtype === 'subagent_stop';
+                
+                // Debug first few events
+                if (index < 5) {
+                    console.log(`Agent filter [${index}] - ${isAgentRelated ? 'MATCHED' : 'SKIPPED'}:`, {
+                        type: event.type,
+                        subtype: event.subtype,
+                        tool_name: event.tool_name,
+                        inference: inference,
+                        isAgentRelated
+                    });
+                }
+                
+                return isAgentRelated;
+            })
+            .map(({ event, inference }) => ({ event, inference }))
+            .sort((a, b) => new Date(a.event.timestamp) - new Date(b.event.timestamp));
+
+        // Extract unique agent types from the data for filter dropdown
+        const uniqueAgentTypes = new Set();
+        agentEvents.forEach(({ event, inference }) => {
+            if (inference && inference.agentName && inference.agentName !== 'Unknown') {
+                uniqueAgentTypes.add(inference.agentName);
+            }
+            // Also check for agent_type in the event data
+            if (event.agent_type && event.agent_type !== 'unknown' && event.agent_type !== 'main') {
+                uniqueAgentTypes.add(event.agent_type);
+            }
+            if (event.subagent_type) {
+                uniqueAgentTypes.add(event.subagent_type);
+            }
+        });
+
+        // Populate the agents filter dropdown
+        this.populateFilterDropdown('agents-type-filter', Array.from(uniqueAgentTypes), 'All Agents');
+
+        // Apply tab-specific filters to the agentEvents array while preserving inference data
+        let filteredAgentEvents = agentEvents.filter(({ event }) => {
+            // Create a temporary array with just events for the existing filter function
+            const singleEventArray = [event];
+            const filteredSingleEvent = this.applyAgentsFilters(singleEventArray);
+            return filteredSingleEvent.length > 0;
+        });
+        
+        // Store filtered agent events with inference data in class property
+        this.agentEventsWithInference = filteredAgentEvents;
+        
+        // Also store just the events for backward compatibility
+        this.agentEvents = filteredAgentEvents.map(({ event }) => event);
+
+        console.log('4. Agent tab - filtering summary:', {
+            total_events: events.length,
+            agent_events_found: filteredAgentEvents.length,
+            percentage: filteredAgentEvents.length > 0 ? ((filteredAgentEvents.length / events.length) * 100).toFixed(1) + '%' : '0%'
+        });
+
+        if (filteredAgentEvents.length === 0) {
+            console.log('5. No agent events found, showing empty message');
+            agentsList.innerHTML = '<div class="no-events">No agent events found...</div>';
+            return;
+        }
+
+        console.log('Rendering', filteredAgentEvents.length, 'agent events');
+
+        const agentsHtml = filteredAgentEvents.map(({ event, inference }, index) => {
+            const timestamp = new Date(event.timestamp).toLocaleTimeString();
+            
+            let agentName = inference ? inference.agentName : 'Unknown';
+            let operation = 'operation';
+            let prompt = '';
+            let description = '';
+            let taskPreview = '';
+            let confidence = inference ? inference.confidence : 'unknown';
+            let reason = inference ? inference.reason : 'no inference';
+            
+            // Extract Task tool information if present
+            const data = event.data || {};
+            if (event.tool_name === 'Task' || data.tool_name === 'Task') {
+                operation = 'delegation';
+                
+                // Try different sources for Task tool data
+                const taskParams = event.tool_parameters || data.tool_parameters || data.delegation_details || {};
+                
+                if (taskParams.prompt) {
+                    prompt = taskParams.prompt;
+                    taskPreview = prompt.length > 200 ? prompt.substring(0, 200) + '...' : prompt;
+                }
+                if (taskParams.description) {
+                    description = taskParams.description;
+                }
+            }
+            
+            // Extract operation from event type/subtype
+            if (event.subtype) {
+                operation = event.subtype.replace(/_/g, ' ');
+            } else {
+                operation = this.extractOperation(event.type) || 'operation';
+            }
+            
+            // Add confidence indicator
+            const confidenceIcon = {
+                'definitive': '🎯',
+                'high': '✅',
+                'medium': '⚠️',
+                'inherited': '📋',
+                'default': '❓',
+                'unknown': '❔'
+            }[confidence] || '❔';
+
+            const onclickString = `dashboard.selectCard('agents', ${index}, 'agent', ${index}); dashboard.showAgentDetailsByIndex(${index});`;
+
+            return `
+                <div class="event-item event-agent" onclick="${onclickString}">
+                    <div class="event-header">
+                        <span class="event-type">🤖 ${agentName}</span>
+                        <span class="confidence-indicator" title="Confidence: ${confidence} (${reason})">${confidenceIcon}</span>
+                        <span class="event-timestamp">${timestamp}</span>
+                    </div>
+                    <div class="event-data">
+                        <strong>Operation:</strong> ${operation}
+                        <strong>Inference:</strong> ${inference ? inference.type : 'unknown'} (${confidence})
+                        ${taskPreview ? `<br><strong>Task Preview:</strong> ${taskPreview}` : ''}
+                        ${description ? `<br><strong>Description:</strong> ${description}` : ''}
+                        ${event.session_id || data.session_id ? `<br><strong>Session:</strong> ${(event.session_id || data.session_id).substring(0, 8)}...` : ''}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        console.log('9. Generated HTML length:', agentsHtml.length);
+        console.log('10. Sample HTML (first 500 chars):', agentsHtml.substring(0, 500));
+        
+        agentsList.innerHTML = agentsHtml;
+        
+        // Check if the HTML was actually set
+        console.log('11. HTML set in DOM, innerHTML length:', agentsList.innerHTML.length);
+        console.log('12. Number of event-agent elements:', agentsList.querySelectorAll('.event-agent').length);
+        
+        // Test onclick on first element if exists
+        const firstAgent = agentsList.querySelector('.event-agent');
+        if (firstAgent) {
+            console.log('13. First agent element found:', firstAgent);
+            console.log('14. First agent onclick attribute:', firstAgent.getAttribute('onclick'));
+            
+            // Add a test click event listener as well
+            firstAgent.addEventListener('click', function(e) {
+                console.log('15. CLICK EVENT DETECTED on agent element!', e.target);
+            });
+        } else {
+            console.log('13. No .event-agent elements found in DOM after setting innerHTML');
+        }
+        
+        console.log('=== RENDERAGENTS DEBUG END ===');
+        this.scrollListToBottom('agents-list');
+    }
+
+    /**
+     * Render tools tab - shows paired tool calls instead of individual events
+     */
+    renderTools() {
+        const toolsList = document.getElementById('tools-list');
+        if (!toolsList) return;
+
+        console.log('Tools tab - total tool calls:', this.toolCalls.size);
+        
+        if (this.toolCalls.size === 0) {
+            toolsList.innerHTML = '<div class="no-events">No tool calls found...</div>';
+            return;
+        }
+
+        // Convert to array and sort by timestamp
+        let toolCallsArray = Array.from(this.toolCalls.entries())
+            .filter(([key, toolCall]) => {
+                // Ensure we have valid data
+                return toolCall.tool_name && (toolCall.pre_event || toolCall.post_event);
+            })
+            .sort((a, b) => {
+                const timeA = new Date(a[1].timestamp || 0);
+                const timeB = new Date(b[1].timestamp || 0);
+                return timeA - timeB;
+            });
+
+        console.log('Tools tab - after filtering:', toolCallsArray.length, 'tool calls');
+
+        // Extract unique tool names from the data for filter dropdown
+        const uniqueToolNames = new Set();
+        toolCallsArray.forEach(([key, toolCall]) => {
+            if (toolCall.tool_name) {
+                uniqueToolNames.add(toolCall.tool_name);
+            }
+        });
+
+        // Populate the tools filter dropdown
+        this.populateFilterDropdown('tools-type-filter', Array.from(uniqueToolNames), 'All Tools');
+
+        // Apply tab-specific filters to tool calls
+        toolCallsArray = this.applyToolCallFilters(toolCallsArray);
+
+        console.log('Tools tab - after search/type filters:', toolCallsArray.length, 'tool calls');
+
+        if (toolCallsArray.length === 0) {
+            toolsList.innerHTML = '<div class="no-events">No tool calls match current filters...</div>';
+            return;
+        }
+
+        const toolsHtml = toolCallsArray.map(([key, toolCall], index) => {
+            const timestamp = new Date(toolCall.timestamp).toLocaleTimeString();
+            const toolName = toolCall.tool_name || 'Unknown Tool';
+            
+            // Use inferred agent data instead of hardcoded 'PM'
+            let agentName = 'PM';
+            let confidence = 'default';
+            
+            // Try to get inference from pre_event first, then post_event
+            const preEvent = toolCall.pre_event;
+            const postEvent = toolCall.post_event;
+            
+            if (preEvent) {
+                const eventIndex = this.eventViewer.events.indexOf(preEvent);
+                const inference = this.getInferredAgent(eventIndex);
+                if (inference) {
+                    agentName = inference.agentName;
+                    confidence = inference.confidence;
+                }
+            } else if (postEvent) {
+                const eventIndex = this.eventViewer.events.indexOf(postEvent);
+                const inference = this.getInferredAgent(eventIndex);
+                if (inference) {
+                    agentName = inference.agentName;
+                    confidence = inference.confidence;
+                }
+            }
+            
+            // Fallback to existing logic if no inference available
+            if (agentName === 'PM' && confidence === 'default') {
+                agentName = toolCall.agent_type || 'PM';
+            }
+            
+            // Extract tool target/parameters from pre_event
+            const target = preEvent ? this.extractToolTarget(toolName, preEvent.tool_parameters, preEvent.tool_parameters) : 'Unknown target';
+            
+            // Determine status and duration
+            let statusInfo = '';
+            let statusClass = '';
+            
+            if (toolCall.post_event) {
+                // We have completion data
+                const duration = toolCall.duration_ms ? `${toolCall.duration_ms}ms` : 'Unknown duration';
+                const success = toolCall.success !== undefined ? toolCall.success : 'Unknown';
+                
+                if (success === true) {
+                    statusInfo = `✅ Success (${duration})`;
+                    statusClass = 'tool-success';
+                } else if (success === false) {
+                    statusInfo = `❌ Failed (${duration})`;
+                    statusClass = 'tool-failure';
+                } else {
+                    statusInfo = `⏳ Completed (${duration})`;
+                    statusClass = 'tool-completed';
+                }
+            } else {
+                // Only pre_event - still running or incomplete
+                statusInfo = '⏳ Running...';
+                statusClass = 'tool-running';
+            }
+            
+            // Add confidence indicator for agent inference
+            const confidenceIcon = {
+                'definitive': '🎯',
+                'high': '✅',
+                'medium': '⚠️',
+                'inherited': '📋',
+                'default': '❓',
+                'unknown': '❔'
+            }[confidence] || '❔';
+            
+            return `
+                <div class="event-item event-tool ${statusClass}" onclick="dashboard.selectCard('tools', ${index}, 'toolCall', '${key}'); dashboard.showToolCallDetails('${key}')">
+                    <div class="event-header">
+                        <span class="event-type">🔧 ${toolName}</span>
+                        <span class="event-timestamp">${timestamp}</span>
+                    </div>
+                    <div class="event-data">
+                        <strong>Agent:</strong> ${agentName} (${confidence})<br>
+                        <strong>Status:</strong> ${statusInfo}<br>
+                        <strong>Target:</strong> ${target}
+                        ${toolCall.session_id ? `<br><strong>Session:</strong> ${toolCall.session_id.substring(0, 8)}...` : ''}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        toolsList.innerHTML = toolsHtml;
+        this.scrollListToBottom('tools-list');
+    }
+
+    /**
+     * Render files tab with file-centric view
+     */
+    renderFiles() {
+        const filesList = document.getElementById('files-list');
+        if (!filesList) return;
+
+        console.log('Files tab - file operations:', this.fileOperations.size);
+        console.log('Files tab - operations map:', this.fileOperations);
+
+        if (this.fileOperations.size === 0) {
+            filesList.innerHTML = '<div class="no-events">No file operations found...</div>';
+            return;
+        }
+
+        // Convert to array and sort by most recent operations at bottom (chronological order)
+        let filesArray = Array.from(this.fileOperations.entries())
+            .filter(([filePath, fileData]) => {
+                // Ensure we have valid data
+                return fileData.operations && fileData.operations.length > 0;
+            })
+            .sort((a, b) => {
+                const timeA = a[1].lastOperation ? new Date(a[1].lastOperation) : new Date(0);
+                const timeB = b[1].lastOperation ? new Date(b[1].lastOperation) : new Date(0);
+                return timeA - timeB;
+            });
+
+        console.log('Files tab - after filtering:', filesArray.length, 'files');
+
+        // Extract unique operations from the data for filter dropdown
+        const uniqueOperations = new Set();
+        filesArray.forEach(([filePath, fileData]) => {
+            if (fileData.operations && fileData.operations.length > 0) {
+                fileData.operations.forEach(operation => {
+                    if (operation.operation) {
+                        uniqueOperations.add(operation.operation);
+                    }
+                });
+            }
+        });
+
+        // Populate the files filter dropdown
+        this.populateFilterDropdown('files-type-filter', Array.from(uniqueOperations), 'All Operations');
+
+        // Apply tab-specific filters
+        filesArray = this.applyFilesFilters(filesArray);
+
+        console.log('Files tab - after search/type filters:', filesArray.length, 'files');
+
+        if (filesArray.length === 0) {
+            filesList.innerHTML = '<div class="no-events">No files match current filters...</div>';
+            return;
+        }
+
+        const filesHtml = filesArray.map(([filePath, fileData], index) => {
+            if (!fileData.operations || fileData.operations.length === 0) {
+                console.warn('File with no operations:', filePath);
+                return '';
+            }
+            
+            const icon = this.getFileOperationIcon(fileData.operations);
+            const lastOp = fileData.operations[fileData.operations.length - 1];
+            const timestamp = new Date(lastOp.timestamp).toLocaleTimeString();
+            
+            // Get unique operations as text, joined with |
+            const uniqueOperations = [...new Set(fileData.operations.map(op => op.operation))];
+            const operationsText = uniqueOperations.join('|');
+            
+            return `
+                <div class="event-item file-item" onclick="dashboard.selectCard('files', ${index}, 'file', '${filePath}'); dashboard.showFileDetails('${filePath}')">
+                    <div class="event-header">
+                        <span class="event-type">${icon}</span>
+                        <span class="file-path">${this.getRelativeFilePath(filePath)}</span>
+                        <span class="event-timestamp">${timestamp}</span>
+                    </div>
+                    <div class="event-data">
+                        <strong>Operations:</strong> ${operationsText}<br>
+                        <strong>Agent:</strong> ${lastOp.agent} ${lastOp.confidence ? `(${lastOp.confidence})` : ''}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        filesList.innerHTML = filesHtml;
+        this.scrollListToBottom('files-list');
+    }
+
+    /**
+     * Show agent details in module viewer
+     */
+    showAgentDetails(agentIndex, eventIndex) {
+        console.log('showAgentDetails called with agentIndex:', agentIndex, 'eventIndex:', eventIndex);
+        
+        // Use stored filtered agent events with inference data if available
+        const agentEventsWithInference = this.agentEventsWithInference || [];
+        const agentEvents = this.agentEvents;
+        
+        let event, inference;
+        
+        // Try to get event and inference data together
+        if (agentEventsWithInference[agentIndex]) {
+            event = agentEventsWithInference[agentIndex].event;
+            inference = agentEventsWithInference[agentIndex].inference;
+        } else if (agentEvents[agentIndex]) {
+            // Fallback to just event data
+            event = agentEvents[agentIndex];
+            inference = null;
+        } else {
+            return;
+        }
+        
+        // Extract agent information using inference data first, then fallback to event data
+        let agentName = 'Unknown Agent';
+        let prompt = '';
+        let description = '';
+        let fullPrompt = '';
+        
+        // Use inference data for agent name if available
+        if (inference && inference.agentName && inference.agentName !== 'Unknown') {
+            agentName = inference.agentName;
+        } else if (event.tool_name === 'Task' && event.tool_parameters?.subagent_type) {
+            agentName = event.tool_parameters.subagent_type;
+        } else if (event.subagent_type) {
+            agentName = event.subagent_type;
+        } else if (event.agent_type && event.agent_type !== 'unknown') {
+            agentName = event.agent_type;
+        }
+        
+        // Extract task information
+        if (event.tool_name === 'Task' && event.tool_parameters) {
+            prompt = event.tool_parameters.prompt || '';
+            description = event.tool_parameters.description || '';
+            fullPrompt = prompt;
+        }
+
+        // Add debug logging
+        console.log('showAgentDetails called with:', { 
+            agentIndex, 
+            eventIndex, 
+            event, 
+            inference, 
+            agentName: agentName,
+            hasInferenceData: !!inference 
+        });
+        console.log('moduleViewer available:', !!this.moduleViewer);
+
+        // Create enhanced event object with inference data for module viewer
+        const enhancedEvent = {
+            ...event,
+            _inference: inference, // Add inference data as a private property
+            _agentName: agentName  // Add resolved agent name
+        };
+
+        // Use the module viewer's ingest method to properly display the agent event
+        if (this.moduleViewer) {
+            console.log('Calling moduleViewer.ingest with enhanced event:', enhancedEvent);
+            this.moduleViewer.ingest(enhancedEvent);
+        }
+        
+        // Also show the event details in EventViewer
+        if (eventIndex >= 0) {
+            this.eventViewer.showEventDetails(eventIndex);
+        }
+    }
+
+    /**
+     * Toggle prompt expansion
+     */
+    togglePromptExpansion(button) {
+        const promptDiv = button.parentElement.previousElementSibling;
+        const isExpanded = promptDiv.style.maxHeight !== '300px';
+        
+        if (isExpanded) {
+            promptDiv.style.maxHeight = '300px';
+            button.textContent = 'Show More';
+        } else {
+            promptDiv.style.maxHeight = 'none';
+            button.textContent = 'Show Less';
+        }
+    }
+
+    /**
+     * Show tool details in module viewer
+     */
+    showToolDetails(toolIndex, eventIndex) {
+        // Get the tool event
+        const events = this.getFilteredEventsForTab('tools');
+        const toolEvents = this.applyToolsFilters(events.filter(event => {
+            const type = event.type || '';
+            const subtype = event.subtype || '';
+            
+            const isHookToolEvent = type === 'hook' && (
+                subtype.includes('tool') || 
+                subtype.includes('pre_') || 
+                subtype.includes('post_')
+            );
+            const hasToolName = event.tool_name;
+            const hasToolsArray = event.tools && Array.isArray(event.tools);
+            const isLegacyHookEvent = type.startsWith('hook.') && (
+                type.includes('tool') || 
+                type.includes('pre') || 
+                type.includes('post')
+            );
+            
+            return isHookToolEvent || hasToolName || hasToolsArray || isLegacyHookEvent;
+        }));
+
+        const event = toolEvents[toolIndex];
+        if (!event) return;
+
+        // Extract tool information
+        let toolName = event.tool_name || 'Unknown Tool';
+        if (event.tools && Array.isArray(event.tools) && event.tools.length > 0) {
+            toolName = event.tools[0];
+        }
+        
+        let agentName = 'PM';
+        if (event.subagent_type) {
+            agentName = event.subagent_type;
+        } else if (event.agent_type && event.agent_type !== 'main' && event.agent_type !== 'unknown') {
+            agentName = event.agent_type;
+        }
+
+        const target = this.extractToolTarget(toolName, event.tool_parameters, event.tool_parameters);
+        
+        let operation = 'execution';
+        if (event.subtype) {
+            if (event.subtype.includes('pre_')) {
+                operation = 'pre-execution';
+            } else if (event.subtype.includes('post_')) {
+                operation = 'post-execution';
+            } else {
+                operation = event.subtype.replace(/_/g, ' ');
+            }
+        }
+
+        const content = `
+            <div class="structured-view-section">
+                <div class="structured-view-header">
+                    <h4>🔧 Tool Details</h4>
+                </div>
+                <div class="tool-details">
+                    <div class="tool-info">
+                        <div class="structured-field">
+                            <strong>Tool Name:</strong> ${toolName}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Agent:</strong> ${agentName}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Operation:</strong> ${operation}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Target:</strong> ${target}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Timestamp:</strong> ${new Date(event.timestamp).toLocaleString()}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Event Type:</strong> ${event.type}.${event.subtype || 'default'}
+                        </div>
+                        ${event.session_id ? `
+                            <div class="structured-field">
+                                <strong>Session ID:</strong> ${event.session_id}
+                            </div>
+                        ` : ''}
+                    </div>
+                    
+                    ${event.tool_parameters ? `
+                        <div class="parameters-section">
+                            <div class="structured-view-header">
+                                <h4>⚙️ Parameters</h4>
+                            </div>
+                            <div class="structured-data">
+                                <pre style="white-space: pre-wrap; font-family: monospace; font-size: 12px; line-height: 1.4;">${JSON.stringify(event.tool_parameters, null, 2)}</pre>
+                            </div>
+                        </div>
+                    ` : ''}
+                </div>
+            </div>
+        `;
+
+        // Use the new dual-pane approach for tools
+        if (this.moduleViewer.dataContainer) {
+            this.moduleViewer.dataContainer.innerHTML = content;
+        }
+        if (this.moduleViewer.jsonContainer && event) {
+            this.moduleViewer.jsonContainer.innerHTML = `<pre>${JSON.stringify(event, null, 2)}</pre>`;
+        }
+        
+        // Also show the event details in EventViewer
+        if (eventIndex >= 0) {
+            this.eventViewer.showEventDetails(eventIndex);
+        }
+    }
+
+    /**
+     * Show tool call details in module viewer with combined pre/post data
+     */
+    showToolCallDetails(toolCallKey) {
+        const toolCall = this.toolCalls.get(toolCallKey);
+        if (!toolCall) return;
+
+        const toolName = toolCall.tool_name || 'Unknown Tool';
+        const agentName = toolCall.agent_type || 'PM';
+        const timestamp = new Date(toolCall.timestamp).toLocaleString();
+
+        // Extract information from pre and post events
+        const preEvent = toolCall.pre_event;
+        const postEvent = toolCall.post_event;
+        
+        // Get parameters from pre-event
+        const parameters = preEvent?.tool_parameters || {};
+        const target = preEvent ? this.extractToolTarget(toolName, parameters, parameters) : 'Unknown target';
+        
+        // Get execution results from post-event
+        const duration = toolCall.duration_ms ? `${toolCall.duration_ms}ms` : '-';
+        const success = toolCall.success !== undefined ? toolCall.success : null;
+        const exitCode = toolCall.exit_code !== undefined ? toolCall.exit_code : null;
+        // Format result summary properly if it's an object
+        let resultSummary = toolCall.result_summary || 'No summary available';
+        let formattedResultSummary = '';
+        
+        if (typeof resultSummary === 'object' && resultSummary !== null) {
+            // Format the result summary object into human-readable text
+            const parts = [];
+            
+            if (resultSummary.exit_code !== undefined) {
+                parts.push(`Exit Code: ${resultSummary.exit_code}`);
+            }
+            
+            if (resultSummary.has_output !== undefined) {
+                parts.push(`Has Output: ${resultSummary.has_output ? 'Yes' : 'No'}`);
+            }
+            
+            if (resultSummary.has_error !== undefined) {
+                parts.push(`Has Error: ${resultSummary.has_error ? 'Yes' : 'No'}`);
+            }
+            
+            if (resultSummary.output_lines !== undefined) {
+                parts.push(`Output Lines: ${resultSummary.output_lines}`);
+            }
+            
+            if (resultSummary.output_preview) {
+                parts.push(`Output Preview: ${resultSummary.output_preview}`);
+            }
+            
+            if (resultSummary.error_preview) {
+                parts.push(`Error Preview: ${resultSummary.error_preview}`);
+            }
+            
+            formattedResultSummary = parts.join('\n');
+        } else {
+            formattedResultSummary = String(resultSummary);
+        }
+
+        // Status information
+        let statusIcon = '⏳';
+        let statusText = 'Running...';
+        let statusClass = 'tool-running';
+        
+        if (postEvent) {
+            if (success === true) {
+                statusIcon = '✅';
+                statusText = 'Success';
+                statusClass = 'tool-success';
+            } else if (success === false) {
+                statusIcon = '❌';
+                statusText = 'Failed';
+                statusClass = 'tool-failure';
+            } else {
+                statusIcon = '⏳';
+                statusText = 'Completed';
+                statusClass = 'tool-completed';
+            }
+        }
+
+        const content = `
+            <div class="structured-view-section">
+                <div class="structured-view-header">
+                    <h4>🔧 Tool Call Details</h4>
+                </div>
+                <div class="tool-call-details">
+                    <div class="tool-call-info ${statusClass}">
+                        <div class="structured-field">
+                            <strong>Tool Name:</strong> ${toolName}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Agent:</strong> ${agentName}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Status:</strong> ${statusIcon} ${statusText}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Target:</strong> ${target}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Started:</strong> ${timestamp}
+                        </div>
+                        <div class="structured-field">
+                            <strong>Duration:</strong> ${duration}
+                        </div>
+                        ${success !== null ? `
+                            <div class="structured-field">
+                                <strong>Success:</strong> ${success}
+                            </div>
+                        ` : ''}
+                        ${exitCode !== null ? `
+                            <div class="structured-field">
+                                <strong>Exit Code:</strong> ${exitCode}
+                            </div>
+                        ` : ''}
+                        ${toolCall.session_id ? `
+                            <div class="structured-field">
+                                <strong>Session ID:</strong> ${toolCall.session_id}
+                            </div>
+                        ` : ''}
+                    </div>
+                    
+                    ${formattedResultSummary && formattedResultSummary !== 'No summary available' ? `
+                        <div class="result-section">
+                            <div class="structured-view-header">
+                                <h4>📊 Result Summary</h4>
+                            </div>
+                            <div class="structured-data">
+                                <div class="result-summary" style="white-space: pre-wrap; max-height: 200px; overflow-y: auto; padding: 10px; background: #f8fafc; border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.4;">
+                                    ${formattedResultSummary}
+                                </div>
+                                ${typeof resultSummary === 'object' && resultSummary !== null ? `
+                                    <div class="result-summary-json" style="white-space: pre-wrap; max-height: 200px; overflow-y: auto; padding: 10px; background: #f0f9ff; border-radius: 6px; font-family: monospace; font-size: 11px; line-height: 1.3; margin-top: 10px;">
+                                        <h5 style="margin: 0 0 8px 0; font-size: 11px; color: #4a5568;">Raw JSON:</h5>
+                                        ${JSON.stringify(resultSummary, null, 2)}
+                                    </div>
+                                ` : ''}
+                            </div>
+                        </div>
+                    ` : ''}
+                    
+                    ${toolName === 'TodoWrite' && parameters.todos ? `
+                        <div class="todos-section">
+                            <div class="todos-list">
+                                ${parameters.todos.map(todo => {
+                                    const statusIcon = {
+                                        'pending': '⏳',
+                                        'in_progress': '🔄',
+                                        'completed': '✅'
+                                    }[todo.status] || '❓';
+                                    
+                                    const priorityColor = {
+                                        'high': '#dc2626',
+                                        'medium': '#f59e0b',
+                                        'low': '#10b981'
+                                    }[todo.priority] || '#6b7280';
+                                    
+                                    return `
+                                        <div class="todo-item" style="padding: 8px; margin: 4px 0; border-left: 3px solid ${priorityColor}; background: #f8fafc; border-radius: 4px;">
+                                            <div style="display: flex; align-items: center; gap: 8px;">
+                                                <span style="font-size: 16px;">${statusIcon}</span>
+                                                <span style="font-weight: 500; color: #374151;">${todo.content}</span>
+                                                <span style="font-size: 11px; color: ${priorityColor}; text-transform: uppercase; font-weight: 600; margin-left: auto;">${todo.priority}</span>
+                                            </div>
+                                        </div>
+                                    `;
+                                }).join('')}
+                            </div>
+                        </div>
+                    ` : ''}
+                    
+                    ${Object.keys(parameters).length > 0 && toolName !== 'TodoWrite' ? `
+                        <div class="parameters-section">
+                            <div class="structured-view-header">
+                                <h4>⚙️ Parameters</h4>
+                            </div>
+                            <div class="structured-data">
+                                <pre style="white-space: pre-wrap; font-family: monospace; font-size: 12px; line-height: 1.4;">${JSON.stringify(parameters, null, 2)}</pre>
+                            </div>
+                        </div>
+                    ` : ''}
+                    
+                    <div class="raw-data-section">
+                        <div class="structured-view-header">
+                            <h4>🔧 JSON Event Data</h4>
+                        </div>
+                        <div class="structured-data">
+                            <div style="margin-bottom: 15px;">
+                                <strong>Pre-execution Event:</strong>
+                                <pre style="white-space: pre-wrap; font-family: monospace; font-size: 11px; line-height: 1.3; background: #f0f9ff; padding: 8px; border-radius: 4px; max-height: 300px; overflow-y: auto;">${preEvent ? JSON.stringify(preEvent, null, 2) : 'No pre-event data'}</pre>
+                            </div>
+                            <div>
+                                <strong>Post-execution Event:</strong>
+                                <pre style="white-space: pre-wrap; font-family: monospace; font-size: 11px; line-height: 1.3; background: #f0f9ff; padding: 8px; border-radius: 4px; max-height: 300px; overflow-y: auto;">${postEvent ? JSON.stringify(postEvent, null, 2) : 'No post-event data'}</pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Special handling for TodoWrite - show only checklist with standard header
+        if (toolName === 'TodoWrite' && parameters.todos) {
+            // Create contextual header matching module-viewer pattern
+            const contextualHeader = `
+                <div class="contextual-header">
+                    <h3 class="contextual-header-text">TodoWrite: ${agentName} ${this.formatTimestamp(toolCall.timestamp)}</h3>
+                </div>
+            `;
+            
+            const todoContent = `
+                <div class="todo-checklist">
+                    ${parameters.todos.map(todo => {
+                        const statusIcon = {
+                            'pending': '⏳',
+                            'in_progress': '🔄',
+                            'completed': '✅'
+                        }[todo.status] || '❓';
+                        
+                        const priorityIcon = {
+                            'high': '🔴',
+                            'medium': '🟡',
+                            'low': '🟢'
+                        }[todo.priority] || '🟡';
+                        
+                        return `
+                            <div class="todo-item todo-${todo.status || 'pending'}">
+                                <span class="todo-status">${statusIcon}</span>
+                                <span class="todo-content">${todo.content || 'No content'}</span>
+                                <span class="todo-priority priority-${todo.priority || 'medium'}">${priorityIcon}</span>
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            `;
+            
+            if (this.moduleViewer.dataContainer) {
+                this.moduleViewer.dataContainer.innerHTML = contextualHeader + todoContent;
+            }
+            if (this.moduleViewer.jsonContainer) {
+                const toolCallData = {
+                    toolCall: toolCall,
+                    preEvent: preEvent,
+                    postEvent: postEvent
+                };
+                this.moduleViewer.jsonContainer.innerHTML = `<pre>${JSON.stringify(toolCallData, null, 2)}</pre>`;
+            }
+        } else {
+            // For other tools, use the module viewer's ingest method with pre-event
+            if (this.moduleViewer && preEvent) {
+                this.moduleViewer.ingest(preEvent);
+            }
+        }
+    }
+
+
+
+    /**
+     * Show detailed file operations in module viewer
+     */
+    showFileDetails(filePath) {
+        const fileData = this.fileOperations.get(filePath);
+        if (!fileData) return;
+
+        // Filter operations by selected session if applicable
+        let operations = fileData.operations;
+        if (this.selectedSessionId) {
+            operations = operations.filter(op => op.sessionId === this.selectedSessionId);
+            if (operations.length === 0) {
+                // No operations from this session
+                this.moduleViewer.showErrorMessage(
+                    'No Operations in Selected Session',
+                    `This file has no operations from the selected session.`
+                );
+                return;
+            }
+        }
+
+        // Get file name from path for header
+        const fileName = filePath.split('/').pop() || filePath;
+        const lastOp = operations[operations.length - 1];
+        const headerTimestamp = this.formatTimestamp(lastOp.timestamp);
+        
+        // Create contextual header matching module-viewer pattern
+        const contextualHeader = `
+            <div class="contextual-header">
+                <h3 class="contextual-header-text">File: ${fileName} ${headerTimestamp}</h3>
+            </div>
+        `;
+
+        const content = `
+            <div class="structured-view-section">
+                <div class="file-details">
+                    <div class="file-path-display">
+                        <strong>Full Path:</strong> ${filePath}
+                    </div>
+                    <div class="operations-list">
+                        ${operations.map(op => `
+                            <div class="operation-item">
+                                <div class="operation-header">
+                                    <span class="operation-icon">${this.getOperationIcon(op.operation)}</span>
+                                    <span class="operation-type">${op.operation}</span>
+                                    <span class="operation-timestamp">${new Date(op.timestamp).toLocaleString()}</span>
+                                    ${(['edit', 'write'].includes(op.operation)) ? `
+                                        <span class="git-diff-icon" 
+                                              onclick="showGitDiffModal('${filePath}', '${op.timestamp}')"
+                                              title="View git diff for this file operation"
+                                              style="margin-left: 8px; cursor: pointer; font-size: 16px;">
+                                            📋
+                                        </span>
+                                    ` : ''}
+                                </div>
+                                <div class="operation-details">
+                                    <strong>Agent:</strong> ${op.agent}<br>
+                                    <strong>Session:</strong> ${op.sessionId ? op.sessionId.substring(0, 8) + '...' : 'Unknown'}
+                                    ${op.details ? `<br><strong>Details:</strong> ${op.details}` : ''}
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Use the new dual-pane approach for file details with standard header
+        if (this.moduleViewer.dataContainer) {
+            this.moduleViewer.dataContainer.innerHTML = contextualHeader + content;
+        }
+        if (this.moduleViewer.jsonContainer) {
+            // Show the file data with operations
+            this.moduleViewer.jsonContainer.innerHTML = `<pre>${JSON.stringify(fileData, null, 2)}</pre>`;
+        }
+    }
+
+    /**
+     * Update file operations from events
+     */
+    updateFileOperations(events) {
+        // Clear existing data
+        this.fileOperations.clear();
+
+        console.log('updateFileOperations - processing', events.length, 'events');
+
+        // Group events by session and timestamp to match pre/post pairs
+        const eventPairs = new Map(); // Key: session_id + timestamp + tool_name
+        let fileOperationCount = 0;
+        
+        // First pass: collect all tool events and group them
+        events.forEach((event, index) => {
+            const isFileOp = this.isFileOperation(event);
+            if (isFileOp) fileOperationCount++;
+            
+            if (index < 5) { // Debug first 5 events with more detail
+                console.log(`Event ${index}:`, {
+                    type: event.type,
+                    subtype: event.subtype,
+                    tool_name: event.tool_name,
+                    tool_parameters: event.tool_parameters,
+                    isFileOp: isFileOp
+                });
+            }
+            
+            if (isFileOp) {
+                const toolName = event.tool_name;
+                const sessionId = event.session_id || 'unknown';
+                const eventKey = `${sessionId}_${toolName}_${Math.floor(new Date(event.timestamp).getTime() / 1000)}`; // Group by second
+                
+                if (!eventPairs.has(eventKey)) {
+                    eventPairs.set(eventKey, {
+                        pre_event: null,
+                        post_event: null,
+                        tool_name: toolName,
+                        session_id: sessionId
+                    });
+                }
+                
+                const pair = eventPairs.get(eventKey);
+                if (event.subtype === 'pre_tool' || event.type === 'hook' && !event.subtype.includes('post')) {
+                    pair.pre_event = event;
+                } else if (event.subtype === 'post_tool' || event.subtype.includes('post')) {
+                    pair.post_event = event;
+                } else {
+                    // For events without clear pre/post distinction, treat as both
+                    pair.pre_event = event;
+                    pair.post_event = event;
+                }
+            }
+        });
+        
+        console.log('updateFileOperations - found', fileOperationCount, 'file operations in', eventPairs.size, 'event pairs');
+        
+        // Second pass: extract file paths and operations from paired events
+        eventPairs.forEach((pair, key) => {
+            const filePath = this.extractFilePathFromPair(pair);
+            
+            if (filePath) {
+                console.log('File operation detected for:', filePath, 'from pair:', key);
+                
+                if (!this.fileOperations.has(filePath)) {
+                    this.fileOperations.set(filePath, {
+                        path: filePath,
+                        operations: [],
+                        lastOperation: null
+                    });
+                }
+
+                const fileData = this.fileOperations.get(filePath);
+                const operation = this.getFileOperationFromPair(pair);
+                const timestamp = pair.post_event?.timestamp || pair.pre_event?.timestamp;
+                
+                const agentInfo = this.extractAgentFromPair(pair);
+                const workingDirectory = this.extractWorkingDirectoryFromPair(pair);
+                
+                fileData.operations.push({
+                    operation: operation,
+                    timestamp: timestamp,
+                    agent: agentInfo.name,
+                    confidence: agentInfo.confidence,
+                    sessionId: pair.session_id,
+                    details: this.getFileOperationDetailsFromPair(pair),
+                    workingDirectory: workingDirectory
+                });
+                fileData.lastOperation = timestamp;
+            } else {
+                console.log('No file path found for pair:', key, pair);
+            }
+        });
+        
+        console.log('updateFileOperations - final result:', this.fileOperations.size, 'file operations');
+        if (this.fileOperations.size > 0) {
+            console.log('File operations map:', Array.from(this.fileOperations.entries()));
+        }
+    }
+
+    /**
+     * Update tool calls from events - pairs pre/post tool events into complete tool calls
+     */
+    updateToolCalls(events) {
+        // Clear existing data
+        this.toolCalls.clear();
+
+        console.log('updateToolCalls - processing', events.length, 'events');
+
+        // Group events by session and timestamp to match pre/post pairs
+        const toolCallPairs = new Map(); // Key: session_id + timestamp + tool_name
+        let toolOperationCount = 0;
+        
+        // First pass: collect all tool events and group them
+        events.forEach((event, index) => {
+            const isToolOp = this.isToolOperation(event);
+            if (isToolOp) toolOperationCount++;
+            
+            if (index < 5) { // Debug first 5 events with more detail
+                console.log(`Tool Event ${index}:`, {
+                    type: event.type,
+                    subtype: event.subtype,
+                    tool_name: event.tool_name,
+                    tool_parameters: event.tool_parameters,
+                    isToolOp: isToolOp
+                });
+            }
+            
+            if (isToolOp) {
+                const toolName = event.tool_name;
+                const sessionId = event.session_id || 'unknown';
+                const eventKey = `${sessionId}_${toolName}_${Math.floor(new Date(event.timestamp).getTime() / 1000)}`; // Group by second
+                
+                if (!toolCallPairs.has(eventKey)) {
+                    toolCallPairs.set(eventKey, {
+                        pre_event: null,
+                        post_event: null,
+                        tool_name: toolName,
+                        session_id: sessionId,
+                        operation_type: null,
+                        timestamp: null,
+                        duration_ms: null,
+                        success: null,
+                        exit_code: null,
+                        result_summary: null,
+                        agent_type: null
+                    });
+                }
+                
+                const pair = toolCallPairs.get(eventKey);
+                if (event.subtype === 'pre_tool' || (event.type === 'hook' && !event.subtype.includes('post'))) {
+                    pair.pre_event = event;
+                    pair.timestamp = event.timestamp;
+                    pair.operation_type = event.operation_type || 'tool_execution';
+                    pair.agent_type = event.agent_type || event.subagent_type || 'PM';
+                } else if (event.subtype === 'post_tool' || event.subtype.includes('post')) {
+                    pair.post_event = event;
+                    pair.duration_ms = event.duration_ms;
+                    pair.success = event.success;
+                    pair.exit_code = event.exit_code;
+                    pair.result_summary = event.result_summary;
+                    if (!pair.agent_type) {
+                        pair.agent_type = event.agent_type || event.subagent_type || 'PM';
+                    }
+                } else {
+                    // For events without clear pre/post distinction, treat as both
+                    pair.pre_event = event;
+                    pair.post_event = event;
+                    pair.timestamp = event.timestamp;
+                    pair.agent_type = event.agent_type || event.subagent_type || 'PM';
+                }
+            }
+        });
+        
+        console.log('updateToolCalls - found', toolOperationCount, 'tool operations in', toolCallPairs.size, 'tool call pairs');
+        
+        // Second pass: store complete tool calls
+        toolCallPairs.forEach((pair, key) => {
+            // Ensure we have at least a pre_event or post_event
+            if (pair.pre_event || pair.post_event) {
+                console.log('Tool call detected for:', pair.tool_name, 'from pair:', key);
+                this.toolCalls.set(key, pair);
+            } else {
+                console.log('No valid tool call found for pair:', key, pair);
+            }
+        });
+        
+        console.log('updateToolCalls - final result:', this.toolCalls.size, 'tool calls');
+        if (this.toolCalls.size > 0) {
+            console.log('Tool calls map:', Array.from(this.toolCalls.entries()));
+        }
+    }
+
+    /**
+     * Check if event is a tool operation
+     */
+    isToolOperation(event) {
+        const type = event.type || '';
+        const subtype = event.subtype || '';
+        
+        // Check for hook events with tool subtypes
+        const isHookToolEvent = type === 'hook' && (
+            subtype.includes('tool') || 
+            subtype.includes('pre_') || 
+            subtype.includes('post_')
+        );
+        
+        // Events with tool_name
+        const hasToolName = event.tool_name;
+        
+        // Events with tools array (multiple tools)
+        const hasToolsArray = event.tools && Array.isArray(event.tools);
+        
+        // Legacy hook events with tool patterns (backward compatibility)
+        const isLegacyHookEvent = type.startsWith('hook.') && (
+            type.includes('tool') || 
+            type.includes('pre') || 
+            type.includes('post')
+        );
+        
+        return isHookToolEvent || hasToolName || hasToolsArray || isLegacyHookEvent;
+    }
+
+    /**
+     * Check if event is a file operation
+     */
+    isFileOperation(event) {
+        const toolName = event.tool_name;
+        const fileTools = ['Read', 'Write', 'Edit', 'MultiEdit', 'Glob', 'LS', 'NotebookRead', 'NotebookEdit', 'Grep'];
+        
+        // Check for direct tool name match
+        if (fileTools.includes(toolName)) {
+            console.log('isFileOperation - direct tool match:', toolName);
+            return true;
+        }
+        
+        // Check for hook events that involve file tools (updated for new structure)
+        const type = event.type || '';
+        const subtype = event.subtype || '';
+        
+        // Check both legacy format and new format
+        const isHookEvent = type === 'hook' || type.startsWith('hook.');
+        
+        if (isHookEvent) {
+            // Check if tool_name indicates file operation
+            if (fileTools.includes(event.tool_name)) {
+                console.log('isFileOperation - hook tool match:', event.tool_name);
+                return true;
+            }
+            
+            // Check if parameters suggest file operation
+            const params = event.tool_parameters || {};
+            const hasFileParams = !!(params.file_path || params.path || params.notebook_path || params.pattern);
+            
+            // Also check top-level event for file parameters (flat structure)
+            const hasDirectFileParams = !!(event.file_path || event.path || event.notebook_path || event.pattern);
+            
+            const hasAnyFileParams = hasFileParams || hasDirectFileParams;
+            if (hasAnyFileParams) {
+                console.log('isFileOperation - file params match:', { hasFileParams, hasDirectFileParams, params, directParams: { file_path: event.file_path, path: event.path } });
+            }
+            
+            return hasAnyFileParams;
+        }
+        
+        return false;
+    }
+
+    /**
+     * Extract file path from event
+     */
+    extractFilePath(event) {
+        // Check tool_parameters first
+        const params = event.tool_parameters;
+        if (params) {
+            if (params.file_path) return params.file_path;
+            if (params.path) return params.path;
+            if (params.notebook_path) return params.notebook_path;
+        }
+        
+        // Check top-level event (flat structure)
+        if (event.file_path) return event.file_path;
+        if (event.path) return event.path;
+        if (event.notebook_path) return event.notebook_path;
+        
+        // Check tool_input if available (sometimes path is here)
+        if (event.tool_input) {
+            if (event.tool_input.file_path) return event.tool_input.file_path;
+            if (event.tool_input.path) return event.tool_input.path;
+            if (event.tool_input.notebook_path) return event.tool_input.notebook_path;
+        }
+        
+        // Check result/output if available (sometimes path is in result)
+        if (event.result) {
+            if (event.result.file_path) return event.result.file_path;
+            if (event.result.path) return event.result.path;
+        }
+        
+        return null;
+    }
+    
+    /**
+     * Extract file path from paired pre/post events
+     */
+    extractFilePathFromPair(pair) {
+        // Try pre_event first, then post_event
+        const preEvent = pair.pre_event;
+        const postEvent = pair.post_event;
+        
+        if (preEvent) {
+            const prePath = this.extractFilePath(preEvent);
+            if (prePath) return prePath;
+        }
+        
+        if (postEvent) {
+            const postPath = this.extractFilePath(postEvent);
+            if (postPath) return postPath;
+        }
+        
+        return null;
+    }
+
+    /**
+     * Get file operation type
+     */
+    getFileOperation(event) {
+        const toolName = event.tool_name;
+        const operationMap = {
+            'Read': 'read',
+            'Write': 'write',
+            'Edit': 'edit',
+            'MultiEdit': 'edit',
+            'Glob': 'search',
+            'LS': 'list',
+            'NotebookRead': 'read',
+            'NotebookEdit': 'edit',
+            'Grep': 'search'
+        };
+        
+        return operationMap[toolName] || 'operation';
+    }
+    
+    /**
+     * Get file operation type from paired events
+     */
+    getFileOperationFromPair(pair) {
+        const toolName = pair.tool_name;
+        const operationMap = {
+            'Read': 'read',
+            'Write': 'write',
+            'Edit': 'edit',
+            'MultiEdit': 'edit',
+            'Glob': 'search',
+            'LS': 'list',
+            'NotebookRead': 'read',
+            'NotebookEdit': 'edit',
+            'Grep': 'search'
+        };
+        
+        return operationMap[toolName] || 'operation';
+    }
+    
+    /**
+     * Extract agent from paired events using inference
+     */
+    extractAgentFromPair(pair) {
+        // Try to get inference from either event
+        const preEvent = pair.pre_event;
+        const postEvent = pair.post_event;
+        
+        if (preEvent) {
+            const eventIndex = this.eventViewer.events.indexOf(preEvent);
+            const inference = this.getInferredAgent(eventIndex);
+            if (inference) {
+                return {
+                    name: inference.agentName,
+                    confidence: inference.confidence
+                };
+            }
+        }
+        
+        if (postEvent) {
+            const eventIndex = this.eventViewer.events.indexOf(postEvent);
+            const inference = this.getInferredAgent(eventIndex);
+            if (inference) {
+                return {
+                    name: inference.agentName,
+                    confidence: inference.confidence
+                };
+            }
+        }
+        
+        // Fallback to legacy logic
+        const preAgent = preEvent?.agent_type || preEvent?.subagent_type;
+        const postAgent = postEvent?.agent_type || postEvent?.subagent_type;
+        
+        // Prefer non-'main' and non-'unknown' agents
+        if (preAgent && preAgent !== 'main' && preAgent !== 'unknown') {
+            return { name: preAgent, confidence: 'legacy' };
+        }
+        if (postAgent && postAgent !== 'main' && postAgent !== 'unknown') {
+            return { name: postAgent, confidence: 'legacy' };
+        }
+        
+        // Fallback to any agent
+        const agentName = preAgent || postAgent || 'PM';
+        return { name: agentName, confidence: 'fallback' };
+    }
+
+    /**
+     * Extract working directory from event pair
+     */
+    extractWorkingDirectoryFromPair(pair) {
+        // Try to get working directory from either event's data
+        const preEvent = pair.pre_event;
+        const postEvent = pair.post_event;
+        
+        // Check pre_event first
+        if (preEvent?.data?.working_directory) {
+            return preEvent.data.working_directory;
+        }
+        
+        // Check post_event
+        if (postEvent?.data?.working_directory) {
+            return postEvent.data.working_directory;
+        }
+        
+        // Check tool_parameters for working directory
+        if (preEvent?.tool_parameters?.working_dir) {
+            return preEvent.tool_parameters.working_dir;
+        }
+        
+        if (postEvent?.tool_parameters?.working_dir) {
+            return postEvent.tool_parameters.working_dir;
+        }
+        
+        // Fallback to null (will use default behavior in showGitDiffModal)
+        return null;
+    }
+
+    /**
+     * Get file operation details
+     */
+    getFileOperationDetails(event) {
+        const toolName = event.tool_name;
+        const params = event.tool_parameters;
+        
+        switch (toolName) {
+            case 'Edit':
+            case 'MultiEdit':
+                return `Modified content`;
+            case 'Write':
+                return `Created/updated file`;
+            case 'Read':
+                return `Read file content`;
+            case 'NotebookRead':
+                return `Read notebook content`;
+            case 'NotebookEdit':
+                return `Modified notebook`;
+            case 'Glob':
+                return `Searched pattern: ${params?.pattern || 'unknown'}`;
+            case 'Grep':
+                return `Searched pattern: ${params?.pattern || 'unknown'}`;
+            case 'LS':
+                return `Listed directory`;
+            default:
+                return '';
+        }
+    }
+    
+    /**
+     * Get file operation details from paired events
+     */
+    getFileOperationDetailsFromPair(pair) {
+        const toolName = pair.tool_name;
+        
+        // Get parameters from either event
+        const preParams = pair.pre_event?.tool_parameters || {};
+        const postParams = pair.post_event?.tool_parameters || {};
+        const params = { ...preParams, ...postParams };
+        
+        switch (toolName) {
+            case 'Edit':
+            case 'MultiEdit':
+                return `Modified content`;
+            case 'Write':
+                return `Created/updated file`;
+            case 'Read':
+                return `Read file content`;
+            case 'NotebookRead':
+                return `Read notebook content`;
+            case 'NotebookEdit':
+                return `Modified notebook`;
+            case 'Glob':
+                return `Searched pattern: ${params?.pattern || 'unknown'}`;
+            case 'Grep':
+                return `Searched pattern: ${params?.pattern || 'unknown'}`;
+            case 'LS':
+                return `Listed directory`;
+            default:
+                return '';
+        }
+    }
+
+    /**
+     * Get icon for file operations - shows combined icons for read+write
+     */
+    getFileOperationIcon(operations) {
+        // Check for notebook operations first
+        const hasNotebook = operations.some(op => op.details && (op.details.includes('notebook') || op.details.includes('Notebook')));
+        if (hasNotebook) return '📓';
+        
+        const hasWrite = operations.some(op => ['write', 'edit'].includes(op.operation));
+        const hasRead = operations.some(op => op.operation === 'read');
+        const hasSearch = operations.some(op => op.operation === 'search');
+        const hasList = operations.some(op => op.operation === 'list');
+        
+        // Show both icons for read+write combinations
+        if (hasWrite && hasRead) return '📖✏️'; // Both read and write
+        if (hasWrite) return '✏️'; // Write only
+        if (hasRead) return '📖'; // Read only
+        if (hasSearch) return '🔍'; // Search only
+        if (hasList) return '📋'; // List only
+        return '📄'; // Default
+    }
+
+    /**
+     * Get icon for specific operation
+     */
+    getOperationIcon(operation) {
+        const icons = {
+            read: '📖',
+            write: '📝',
+            edit: '✏️',
+            search: '🔍',
+            list: '📋'
+        };
+        return icons[operation] || '📄';
+    }
+
+    /**
+     * Format timestamp for display
+     * @param {string|number} timestamp - Timestamp to format
+     * @returns {string} Formatted time
+     */
+    formatTimestamp(timestamp) {
+        if (!timestamp) return 'Unknown time';
+        
+        try {
+            const date = new Date(timestamp);
+            return date.toLocaleTimeString('en-US', {
+                hour: 'numeric',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: true
+            });
+        } catch (e) {
+            return 'Invalid time';
+        }
+    }
+
+    /**
+     * Get relative file path for display
+     */
+    getRelativeFilePath(filePath) {
+        // Try to make path relative to common base paths
+        const commonPaths = [
+            '/Users/masa/Projects/claude-mpm/',
+            '.'
+        ];
+        
+        for (const basePath of commonPaths) {
+            if (filePath.startsWith(basePath)) {
+                return filePath.substring(basePath.length).replace(/^\//, '');
+            }
+        }
+        
+        // If no common path found, show last 2-3 path segments
+        const parts = filePath.split('/');
+        if (parts.length > 3) {
+            return '.../' + parts.slice(-2).join('/');
+        }
+        
+        return filePath;
+    }
+
+    /**
+     * Apply agents tab filtering
+     */
+    applyAgentsFilters(events) {
+        const searchInput = document.getElementById('agents-search-input');
+        const typeFilter = document.getElementById('agents-type-filter');
+        
+        const searchText = searchInput ? searchInput.value.toLowerCase() : '';
+        const typeValue = typeFilter ? typeFilter.value : '';
+        
+        return events.filter(event => {
+            // Search filter
+            if (searchText) {
+                const searchableText = [
+                    event.subagent_type || '',
+                    event.agent_type || '',
+                    event.name || '',
+                    event.type || '',
+                    event.subtype || ''
+                ].join(' ').toLowerCase();
+                
+                if (!searchableText.includes(searchText)) {
+                    return false;
+                }
+            }
+            
+            // Type filter
+            if (typeValue) {
+                const agentType = event.subagent_type || event.agent_type || 'unknown';
+                if (!agentType.toLowerCase().includes(typeValue.toLowerCase())) {
+                    return false;
+                }
+            }
+            
+            return true;
+        });
+    }
+
+    /**
+     * Apply tools tab filtering
+     */
+    applyToolsFilters(events) {
+        const searchInput = document.getElementById('tools-search-input');
+        const typeFilter = document.getElementById('tools-type-filter');
+        
+        const searchText = searchInput ? searchInput.value.toLowerCase() : '';
+        const typeValue = typeFilter ? typeFilter.value : '';
+        
+        return events.filter(event => {
+            // Search filter
+            if (searchText) {
+                const searchableText = [
+                    event.tool_name || '',
+                    event.agent_type || '',
+                    event.type || '',
+                    event.subtype || ''
+                ].join(' ').toLowerCase();
+                
+                if (!searchableText.includes(searchText)) {
+                    return false;
+                }
+            }
+            
+            // Type filter
+            if (typeValue) {
+                const toolName = event.tool_name || '';
+                if (toolName !== typeValue) {
+                    return false;
+                }
+            }
+            
+            return true;
+        });
+    }
+
+    /**
+     * Apply tools tab filtering for tool calls
+     */
+    applyToolCallFilters(toolCallsArray) {
+        const searchInput = document.getElementById('tools-search-input');
+        const typeFilter = document.getElementById('tools-type-filter');
+        
+        const searchText = searchInput ? searchInput.value.toLowerCase() : '';
+        const typeValue = typeFilter ? typeFilter.value : '';
+        
+        return toolCallsArray.filter(([key, toolCall]) => {
+            // Search filter
+            if (searchText) {
+                const searchableText = [
+                    toolCall.tool_name || '',
+                    toolCall.agent_type || '',
+                    'tool_call'
+                ].join(' ').toLowerCase();
+                
+                if (!searchableText.includes(searchText)) {
+                    return false;
+                }
+            }
+            
+            // Type filter
+            if (typeValue) {
+                const toolName = toolCall.tool_name || '';
+                if (toolName !== typeValue) {
+                    return false;
+                }
+            }
+            
+            return true;
+        });
+    }
+
+    /**
+     * Apply files tab filtering
+     */
+    applyFilesFilters(fileOperations) {
+        const searchInput = document.getElementById('files-search-input');
+        const typeFilter = document.getElementById('files-type-filter');
+        
+        const searchText = searchInput ? searchInput.value.toLowerCase() : '';
+        const typeValue = typeFilter ? typeFilter.value : '';
+        
+        return fileOperations.filter(([filePath, fileData]) => {
+            // Session filter - filter operations within each file
+            if (this.selectedSessionId) {
+                // Filter operations for this file by session
+                const sessionOperations = fileData.operations.filter(op => 
+                    op.sessionId === this.selectedSessionId
+                );
+                
+                // If no operations from this session, exclude the file
+                if (sessionOperations.length === 0) {
+                    return false;
+                }
+                
+                // Update the fileData to only include session-specific operations
+                // (Note: This creates a filtered view without modifying the original)
+                fileData = {
+                    ...fileData,
+                    operations: sessionOperations,
+                    lastOperation: sessionOperations[sessionOperations.length - 1]?.timestamp || fileData.lastOperation
+                };
+            }
+            
+            // Search filter
+            if (searchText) {
+                const searchableText = [
+                    filePath,
+                    ...fileData.operations.map(op => op.operation),
+                    ...fileData.operations.map(op => op.agent)
+                ].join(' ').toLowerCase();
+                
+                if (!searchableText.includes(searchText)) {
+                    return false;
+                }
+            }
+            
+            // Type filter
+            if (typeValue) {
+                const hasOperationType = fileData.operations.some(op => op.operation === typeValue);
+                if (!hasOperationType) {
+                    return false;
+                }
+            }
+            
+            return true;
+        });
+    }
+
+    /**
+     * Extract operation from event type
+     */
+    extractOperation(eventType) {
+        if (!eventType) return 'unknown';
+        
+        if (eventType.includes('pre_')) return 'pre-' + eventType.split('pre_')[1];
+        if (eventType.includes('post_')) return 'post-' + eventType.split('post_')[1];
+        if (eventType.includes('delegation')) return 'delegation';
+        if (eventType.includes('start')) return 'started';
+        if (eventType.includes('end')) return 'ended';
+        
+        // Extract operation from type like "hook.pre_tool" -> "pre_tool"
+        const parts = eventType.split('.');
+        return parts.length > 1 ? parts[1] : eventType;
+    }
+
+    /**
+     * Extract tool name from hook event type
+     */
+    extractToolFromHook(eventType) {
+        if (!eventType || !eventType.startsWith('hook.')) return null;
+        
+        // For hook events, the tool name might be in the data
+        return 'Tool'; // Fallback - actual tool name should be in event.tool_name
+    }
+
+    /**
+     * Extract tool name from subtype
+     */
+    extractToolFromSubtype(subtype) {
+        if (!subtype) return null;
+        
+        // Try to extract tool name from subtype patterns like 'pre_tool' or 'post_tool'
+        if (subtype.includes('tool')) {
+            return 'Tool'; // Generic fallback
+        }
+        
+        return null;
+    }
+
+    /**
+     * Extract tool target for display
+     */
+    extractToolTarget(toolName, params, toolParameters) {
+        const allParams = { ...params, ...toolParameters };
+        
+        switch (toolName) {
+            case 'Read':
+            case 'Write':
+            case 'Edit':
+            case 'MultiEdit':
+                return allParams.file_path || 'Unknown file';
+            case 'Bash':
+                return allParams.command || 'Unknown command';
+            case 'Glob':
+                return allParams.pattern || 'Unknown pattern';
+            case 'Grep':
+                return `"${allParams.pattern || 'unknown'}" in ${allParams.path || 'unknown path'}`;
+            case 'LS':
+                return allParams.path || 'Unknown path';
+            default:
+                if (Object.keys(allParams).length > 0) {
+                    return JSON.stringify(allParams).substring(0, 50) + '...';
+                }
+                return 'No parameters';
+        }
+    }
+
+    /**
+     * Get filtered events for a specific tab
+     */
+    getFilteredEventsForTab(tabName) {
+        // Use ALL events, not the EventViewer's filtered events
+        // Each tab will apply its own filtering logic
+        const events = this.eventViewer.events;
+        console.log(`getFilteredEventsForTab(${tabName}) - using RAW events: ${events.length} total`);
+        
+        // Enhanced debugging for empty events
+        if (events.length === 0) {
+            console.log(`❌ NO RAW EVENTS available!`);
+            console.log('EventViewer state:', {
+                total_events: this.eventViewer.events.length,
+                filtered_events: this.eventViewer.filteredEvents.length,
+                search_filter: this.eventViewer.searchFilter,
+                type_filter: this.eventViewer.typeFilter,
+                session_filter: this.eventViewer.sessionFilter
+            });
+        } else {
+            console.log('✅ Raw events available for', tabName, '- sample:', events[0]);
+            console.log('EventViewer filters (IGNORED for tabs):', {
+                search_filter: this.eventViewer.searchFilter,
+                type_filter: this.eventViewer.typeFilter,
+                session_filter: this.eventViewer.sessionFilter
+            });
+        }
+        
+        return events;
+    }
+
+    /**
+     * Scroll a list container to the bottom
+     * @param {string} listId - The ID of the list container element
+     */
+    scrollListToBottom(listId) {
+        console.log(`[DEBUG] scrollListToBottom called with listId: ${listId}`);
+        
+        // Use setTimeout to ensure DOM updates are completed
+        setTimeout(() => {
+            const listElement = document.getElementById(listId);
+            console.log(`[DEBUG] Element found for ${listId}:`, listElement);
+            
+            if (listElement) {
+                const scrollHeight = listElement.scrollHeight;
+                const clientHeight = listElement.clientHeight;
+                const currentScrollTop = listElement.scrollTop;
+                const computedStyle = window.getComputedStyle(listElement);
+                
+                console.log(`[DEBUG] Scroll metrics for ${listId}:`);
+                console.log(`  - scrollHeight: ${scrollHeight}`);
+                console.log(`  - clientHeight: ${clientHeight}`);
+                console.log(`  - currentScrollTop: ${currentScrollTop}`);
+                console.log(`  - needsScroll: ${scrollHeight > clientHeight}`);
+                console.log(`  - overflowY: ${computedStyle.overflowY}`);
+                console.log(`  - height: ${computedStyle.height}`);
+                console.log(`  - maxHeight: ${computedStyle.maxHeight}`);
+                
+                if (scrollHeight > clientHeight) {
+                    // Method 1: Direct scrollTop assignment
+                    listElement.scrollTop = scrollHeight;
+                    console.log(`[DEBUG] Method 1 - Scroll applied to ${listId}, new scrollTop: ${listElement.scrollTop}`);
+                    
+                    // Method 2: Force layout recalculation and try again if needed
+                    if (listElement.scrollTop !== scrollHeight) {
+                        console.log(`[DEBUG] Method 1 failed, trying method 2 with layout recalculation`);
+                        listElement.offsetHeight; // Force reflow
+                        listElement.scrollTop = scrollHeight;
+                        console.log(`[DEBUG] Method 2 - new scrollTop: ${listElement.scrollTop}`);
+                    }
+                    
+                    // Method 3: scrollIntoView on last element if still not working
+                    if (listElement.scrollTop < scrollHeight - clientHeight - 10) {
+                        console.log(`[DEBUG] Methods 1-2 failed, trying method 3 with scrollIntoView`);
+                        const lastElement = listElement.lastElementChild;
+                        if (lastElement) {
+                            lastElement.scrollIntoView({ behavior: 'instant', block: 'end' });
+                            console.log(`[DEBUG] Method 3 - scrollIntoView applied on last element`);
+                        }
+                    }
+                } else {
+                    console.log(`[DEBUG] No scroll needed for ${listId} - content fits in container`);
+                }
+            } else {
+                console.error(`[DEBUG] Element not found for ID: ${listId}`);
+                // Log all elements with similar IDs to help debug
+                const allElements = document.querySelectorAll('[id*="list"]');
+                console.log(`[DEBUG] Available elements with 'list' in ID:`, Array.from(allElements).map(el => el.id));
+            }
+        }, 50);  // Small delay to ensure content is rendered
+    }
+
+    /**
+     * Test scroll functionality - adds dummy content and tries to scroll
+     * This is for debugging purposes only
+     * @returns {Promise<string>} Status message indicating test results
+     */
+    async testScrollFunctionality() {
+        console.log('[DEBUG] Testing scroll functionality...');
+        const results = [];
+        const listId = `${this.currentTab}-list`;
+        const listElement = document.getElementById(listId);
+        
+        if (!listElement) {
+            const errorMsg = `❌ Could not find list element: ${listId}`;
+            console.error(`[DEBUG] ${errorMsg}`);
+            
+            // Debug: Show available elements
+            const allElements = document.querySelectorAll('[id*="list"]');
+            const availableIds = Array.from(allElements).map(el => el.id);
+            console.log(`[DEBUG] Available elements with 'list' in ID:`, availableIds);
+            results.push(errorMsg);
+            results.push(`Available list IDs: ${availableIds.join(', ')}`);
+            return results.join('\n');
+        }
+        
+        // Get initial state
+        const initialScrollTop = listElement.scrollTop;
+        const initialScrollHeight = listElement.scrollHeight;
+        const initialClientHeight = listElement.clientHeight;
+        const computedStyle = window.getComputedStyle(listElement);
+        
+        results.push(`✅ Found list element: ${listId}`);
+        results.push(`📊 Initial state: scrollTop=${initialScrollTop}, scrollHeight=${initialScrollHeight}, clientHeight=${initialClientHeight}`);
+        results.push(`🎨 CSS: overflowY=${computedStyle.overflowY}, height=${computedStyle.height}, maxHeight=${computedStyle.maxHeight}`);
+        
+        // Test 1: Direct scroll without adding content
+        console.log('[DEBUG] Test 1: Direct scroll test');
+        listElement.scrollTop = 999999;
+        await new Promise(resolve => setTimeout(resolve, 50));
+        const directScrollResult = listElement.scrollTop;
+        results.push(`🧪 Test 1 - Direct scroll to 999999: scrollTop=${directScrollResult} ${directScrollResult > 0 ? '✅' : '❌'}`);
+        
+        // Reset scroll position
+        listElement.scrollTop = 0;
+        
+        // Test 2: Add visible content to force scrolling need
+        console.log('[DEBUG] Test 2: Adding test content');
+        const originalContent = listElement.innerHTML;
+        
+        // Add 15 large test items to definitely exceed container height
+        for (let i = 0; i < 15; i++) {
+            const testItem = document.createElement('div');
+            testItem.className = 'event-item test-scroll-item';
+            testItem.style.cssText = 'background: #fffacd !important; border: 2px solid #f39c12 !important; padding: 20px; margin: 10px 0; min-height: 60px;';
+            testItem.innerHTML = `<strong>🧪 Test Item ${i + 1}</strong><br>This is a test item to verify scrolling functionality.<br><em>Item height: ~80px total</em>`;
+            listElement.appendChild(testItem);
+        }
+        
+        // Force layout recalculation
+        listElement.offsetHeight;
+        
+        const afterContentScrollHeight = listElement.scrollHeight;
+        const afterContentClientHeight = listElement.clientHeight;
+        const needsScroll = afterContentScrollHeight > afterContentClientHeight;
+        
+        results.push(`📦 Added 15 test items (expected ~1200px total height)`);
+        results.push(`📊 After content: scrollHeight=${afterContentScrollHeight}, clientHeight=${afterContentClientHeight}`);
+        results.push(`🔍 Needs scroll: ${needsScroll ? 'YES ✅' : 'NO ❌'}`);
+        
+        if (needsScroll) {
+            // Test 3: Multiple scroll methods
+            console.log('[DEBUG] Test 3: Testing different scroll methods');
+            
+            // Method A: Direct scrollTop assignment
+            listElement.scrollTop = afterContentScrollHeight;
+            await new Promise(resolve => setTimeout(resolve, 50));
+            const methodAResult = listElement.scrollTop;
+            const methodASuccess = methodAResult > (afterContentScrollHeight - afterContentClientHeight - 50);
+            results.push(`🔧 Method A - scrollTop assignment: ${methodAResult} ${methodASuccess ? '✅' : '❌'}`);
+            
+            // Method B: scrollIntoView on last element
+            const lastElement = listElement.lastElementChild;
+            if (lastElement) {
+                lastElement.scrollIntoView({ behavior: 'instant', block: 'end' });
+                await new Promise(resolve => setTimeout(resolve, 50));
+                const methodBResult = listElement.scrollTop;
+                const methodBSuccess = methodBResult > (afterContentScrollHeight - afterContentClientHeight - 50);
+                results.push(`🔧 Method B - scrollIntoView: ${methodBResult} ${methodBSuccess ? '✅' : '❌'}`);
+            }
+            
+            // Method C: Using the existing scrollListToBottom method
+            console.log('[DEBUG] Test 4: Using scrollListToBottom method');
+            this.scrollListToBottom(listId);
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const methodCResult = listElement.scrollTop;
+            const methodCSuccess = methodCResult > (afterContentScrollHeight - afterContentClientHeight - 50);
+            results.push(`🔧 Method C - scrollListToBottom: ${methodCResult} ${methodCSuccess ? '✅' : '❌'}`);
+        }
+        
+        // Clean up test content after a visible delay
+        setTimeout(() => {
+            console.log('[DEBUG] Cleaning up test content...');
+            const testItems = listElement.querySelectorAll('.test-scroll-item');
+            testItems.forEach(item => item.remove());
+            results.push(`🧹 Cleaned up ${testItems.length} test items`);
+        }, 2000);
+        
+        const finalResult = results.join('\n');
+        console.log('[DEBUG] Test complete. Results:', finalResult);
+        return finalResult;
+    }
+
+    /**
+     * Update connection status in UI
+     */
+    updateConnectionStatus(status, type) {
+        const statusElement = document.getElementById('connection-status');
+        if (statusElement) {
+            statusElement.textContent = status;
+            statusElement.className = `status-badge status-${type}`;
+            
+            // Update status indicator
+            const indicator = statusElement.querySelector('span');
+            if (indicator) {
+                indicator.textContent = type === 'connected' ? '●' : '●';
+            }
+        }
+    }
+
+    /**
+     * Clear all events
+     */
+    clearEvents() {
+        this.eventViewer.clearEvents();
+        this.fileOperations.clear();
+        this.toolCalls.clear();
+        this.agentEvents = [];
+        this.renderCurrentTab();
+    }
+
+    /**
+     * Export current events
+     */
+    exportEvents() {
+        this.eventViewer.exportEvents();
+    }
+
+    /**
+     * Toggle connection controls visibility
+     */
+    toggleConnectionControls() {
+        const controlsRow = document.getElementById('connection-controls-row');
+        const toggleBtn = document.getElementById('connection-toggle-btn');
+        
+        if (controlsRow && toggleBtn) {
+            const isVisible = controlsRow.classList.contains('show');
+            
+            if (isVisible) {
+                controlsRow.classList.remove('show');
+                controlsRow.style.display = 'none';
+                toggleBtn.textContent = 'Connection Settings';
+            } else {
+                controlsRow.style.display = 'flex';
+                // Use setTimeout to ensure display change is applied before adding animation class
+                setTimeout(() => {
+                    controlsRow.classList.add('show');
+                }, 10);
+                toggleBtn.textContent = 'Hide Connection Settings';
+            }
+        }
+    }
+
+    /**
+     * Clear current selection
+     */
+    clearSelection() {
+        this.clearCardSelection();
+        this.eventViewer.clearSelection();
+        this.moduleViewer.clear();
+    }
+    
+    /**
+     * Show dialog to change working directory
+     */
+    showChangeDirDialog() {
+        const currentDir = this.currentWorkingDir || this.getDefaultWorkingDir();
+        const newDir = prompt('Enter new working directory:', currentDir);
+        
+        if (newDir && newDir !== currentDir) {
+            this.setWorkingDirectory(newDir);
+        }
+    }
+    
+    /**
+     * Set the working directory for the current session
+     * @param {string} dir - New working directory path
+     */
+    setWorkingDirectory(dir) {
+        this.currentWorkingDir = dir;
+        
+        // Update UI
+        const pathElement = document.getElementById('working-dir-path');
+        if (pathElement) {
+            pathElement.textContent = dir;
+            pathElement.title = `Click to change from ${dir}`;
+        }
+        
+        // Update footer (with flag to prevent observer loop)
+        const footerDir = document.getElementById('footer-working-dir');
+        if (footerDir) {
+            this._updatingFooter = true;
+            footerDir.textContent = dir;
+            // Reset flag after a small delay to ensure observer has processed
+            setTimeout(() => {
+                this._updatingFooter = false;
+            }, 10);
+        }
+        
+        // Store in session data if a session is selected
+        const sessionSelect = document.getElementById('session-select');
+        if (sessionSelect && sessionSelect.value) {
+            const sessionId = sessionSelect.value;
+            // Store working directory per session in localStorage
+            const sessionDirs = JSON.parse(localStorage.getItem('sessionWorkingDirs') || '{}');
+            sessionDirs[sessionId] = dir;
+            localStorage.setItem('sessionWorkingDirs', JSON.stringify(sessionDirs));
+        }
+        
+        console.log(`Working directory set to: ${dir}`);
+        
+        // Request git branch for the new directory
+        this.updateGitBranch(dir);
+    }
+    
+    /**
+     * Update git branch display for current working directory
+     * @param {string} dir - Working directory path
+     */
+    updateGitBranch(dir) {
+        if (!this.socketClient || !this.socketClient.socket || !this.socketClient.socket.connected) {
+            // Not connected, set to unknown
+            const footerBranch = document.getElementById('footer-git-branch');
+            if (footerBranch) {
+                footerBranch.textContent = 'Not Connected';
+            }
+            return;
+        }
+        
+        // Request git branch from server
+        this.socketClient.socket.emit('get_git_branch', dir);
+    }
+    
+    /**
+     * Get default working directory
+     */
+    getDefaultWorkingDir() {
+        // Try to get from footer first (may be set by server)
+        const footerDir = document.getElementById('footer-working-dir');
+        if (footerDir && footerDir.textContent && footerDir.textContent !== 'Unknown') {
+            return footerDir.textContent;
+        }
+        // Fallback to hardcoded default
+        return '/Users/masa/Projects/claude-mpm';
+    }
+    
+    /**
+     * Initialize working directory on dashboard load
+     */
+    initializeWorkingDirectory() {
+        // Check if there's a selected session
+        const sessionSelect = document.getElementById('session-select');
+        if (sessionSelect && sessionSelect.value) {
+            // Load working directory for selected session
+            this.loadWorkingDirectoryForSession(sessionSelect.value);
+        } else {
+            // Set default working directory
+            this.setWorkingDirectory(this.getDefaultWorkingDir());
+        }
+    }
+    
+    /**
+     * Watch footer directory for changes and sync working directory
+     */
+    watchFooterDirectory() {
+        const footerDir = document.getElementById('footer-working-dir');
+        if (!footerDir) return;
+        
+        // Store observer reference for later use
+        this.footerDirObserver = new MutationObserver((mutations) => {
+            // Skip if we're updating from setWorkingDirectory
+            if (this._updatingFooter) return;
+            
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                    const newDir = footerDir.textContent.trim();
+                    // Only update if it's a valid directory path and different from current
+                    if (newDir && 
+                        newDir !== 'Unknown' && 
+                        newDir !== 'Not Connected' &&
+                        newDir.startsWith('/') &&
+                        newDir !== this.currentWorkingDir) {
+                        console.log(`Footer directory changed to: ${newDir}, syncing working directory`);
+                        this.setWorkingDirectory(newDir);
+                    }
+                }
+            });
+        });
+        
+        // Start observing
+        this.footerDirObserver.observe(footerDir, {
+            childList: true,
+            characterData: true,
+            subtree: true
+        });
+    }
+    
+    /**
+     * Load working directory for a session
+     * @param {string} sessionId - Session ID
+     */
+    loadWorkingDirectoryForSession(sessionId) {
+        if (!sessionId) {
+            // No session selected, use default
+            this.setWorkingDirectory(this.getDefaultWorkingDir());
+            return;
+        }
+        
+        // Load from localStorage
+        const sessionDirs = JSON.parse(localStorage.getItem('sessionWorkingDirs') || '{}');
+        const dir = sessionDirs[sessionId] || this.getDefaultWorkingDir();
+        this.setWorkingDirectory(dir);
+    }
+
+    /**
+     * Toggle HUD visualizer mode
+     */
+    toggleHUD() {
+        if (!this.isSessionSelected()) {
+            console.log('Cannot toggle HUD: No session selected');
+            return;
+        }
+
+        this.hudMode = !this.hudMode;
+        this.updateHUDDisplay();
+        
+        console.log('HUD mode toggled:', this.hudMode ? 'ON' : 'OFF');
+    }
+
+    /**
+     * Check if a session is currently selected
+     * @returns {boolean} - True if session is selected
+     */
+    isSessionSelected() {
+        const sessionSelect = document.getElementById('session-select');
+        return sessionSelect && sessionSelect.value && sessionSelect.value !== '';
+    }
+
+    /**
+     * Update HUD display based on current mode
+     */
+    updateHUDDisplay() {
+        const eventsWrapper = document.querySelector('.events-wrapper');
+        const hudToggleBtn = document.getElementById('hud-toggle-btn');
+        
+        if (!eventsWrapper || !hudToggleBtn) return;
+
+        if (this.hudMode) {
+            // Switch to HUD mode
+            eventsWrapper.classList.add('hud-mode');
+            hudToggleBtn.classList.add('btn-hud-active');
+            hudToggleBtn.textContent = 'Normal View';
+            
+            // Activate the HUD visualizer (with lazy loading)
+            if (this.hudVisualizer) {
+                this.hudVisualizer.activate().then(() => {
+                    // Process existing events after libraries are loaded
+                    this.processExistingEventsForHUD();
+                }).catch((error) => {
+                    console.error('Failed to activate HUD:', error);
+                    // Optionally revert HUD mode on failure
+                    // this.hudMode = false;
+                    // this.updateHUDDisplay();
+                });
+            }
+        } else {
+            // Switch to normal mode
+            eventsWrapper.classList.remove('hud-mode');
+            hudToggleBtn.classList.remove('btn-hud-active');
+            hudToggleBtn.textContent = 'HUD';
+            
+            // Deactivate the HUD visualizer
+            if (this.hudVisualizer) {
+                this.hudVisualizer.deactivate();
+            }
+        }
+    }
+
+    /**
+     * Update HUD button state based on session selection
+     */
+    updateHUDButtonState() {
+        const hudToggleBtn = document.getElementById('hud-toggle-btn');
+        if (!hudToggleBtn) return;
+
+        if (this.isSessionSelected()) {
+            hudToggleBtn.disabled = false;
+            hudToggleBtn.title = 'Toggle HUD visualizer';
+        } else {
+            hudToggleBtn.disabled = true;
+            hudToggleBtn.title = 'Select a session to enable HUD';
+            
+            // If HUD is currently active, turn it off
+            if (this.hudMode) {
+                this.hudMode = false;
+                this.updateHUDDisplay();
+            }
+        }
+    }
+
+    /**
+     * Process existing events for HUD visualization
+     */
+    processExistingEventsForHUD() {
+        if (!this.hudVisualizer || !this.eventViewer) return;
+        
+        console.log('🔄 Processing existing events for HUD visualization...');
+        
+        // Clear existing visualization
+        this.hudVisualizer.clear();
+        
+        // Get all events (not just filtered ones) to build complete tree structure
+        const allEvents = this.eventViewer.getAllEvents();
+        
+        if (allEvents.length === 0) {
+            console.log('❌ No events available for HUD visualization');
+            return;
+        }
+        
+        // Sort events chronologically to ensure proper tree building
+        const sortedEvents = [...allEvents].sort((a, b) => {
+            const timeA = new Date(a.timestamp).getTime();
+            const timeB = new Date(b.timestamp).getTime();
+            return timeA - timeB;
+        });
+        
+        console.log(`📊 Processing ${sortedEvents.length} events chronologically for HUD:`);
+        console.log(`   • Earliest: ${new Date(sortedEvents[0].timestamp).toLocaleString()}`);
+        console.log(`   • Latest: ${new Date(sortedEvents[sortedEvents.length - 1].timestamp).toLocaleString()}`);
+        
+        // Process events with enhanced hierarchy building
+        this.hudVisualizer.processExistingEvents(sortedEvents);
+        
+        console.log(`✅ Processed ${sortedEvents.length} events for HUD visualization`);
+    }
+
+    /**
+     * Handle new socket events for HUD
+     * @param {Object} event - Socket event data
+     */
+    handleHUDEvent(event) {
+        if (this.hudMode && this.hudVisualizer) {
+            this.hudVisualizer.processEvent(event);
+        }
+    }
+}
+
+// Global functions for backward compatibility
+window.connectSocket = function() {
+    if (window.dashboard) {
+        const port = document.getElementById('port-input')?.value || '8765';
+        window.dashboard.socketClient.connect(port);
+    }
+};
+
+window.disconnectSocket = function() {
+    if (window.dashboard) {
+        window.dashboard.socketClient.disconnect();
+    }
+};
+
+window.clearEvents = function() {
+    if (window.dashboard) {
+        window.dashboard.clearEvents();
+    }
+};
+
+window.exportEvents = function() {
+    if (window.dashboard) {
+        window.dashboard.exportEvents();
+    }
+};
+
+window.clearSelection = function() {
+    if (window.dashboard) {
+        window.dashboard.clearSelection();
+    }
+};
+
+window.switchTab = function(tabName) {
+    if (window.dashboard) {
+        window.dashboard.switchTab(tabName);
+    }
+};
+
+// Detail view functions
+window.showAgentDetailsByIndex = function(index) {
+    if (window.dashboard) {
+        window.dashboard.showAgentDetailsByIndex(index);
+    }
+};
+
+window.showToolCallDetails = function(toolCallKey) {
+    if (window.dashboard) {
+        window.dashboard.showToolCallDetails(toolCallKey);
+    }
+};
+
+window.showFileDetails = function(filePath) {
+    if (window.dashboard) {
+        window.dashboard.showFileDetails(filePath);
+    }
+};
+
+// Debug function for testing scroll functionality
+window.testScroll = async function() {
+    if (window.dashboard) {
+        console.log('🧪 Starting scroll functionality test...');
+        try {
+            const result = await window.dashboard.testScrollFunctionality();
+            console.log('📋 Test results:\n' + result);
+            
+            // Also display results in an alert for easier viewing
+            alert('Scroll Test Results:\n\n' + result);
+            
+            return result;
+        } catch (error) {
+            const errorMsg = `❌ Test failed with error: ${error.message}`;
+            console.error(errorMsg, error);
+            alert(errorMsg);
+            return errorMsg;
+        }
+    } else {
+        const errorMsg = '❌ Dashboard not initialized';
+        console.error(errorMsg);
+        alert(errorMsg);
+        return errorMsg;
+    }
+};
+
+// Simple direct scroll test function
+window.testDirectScroll = function() {
+    if (!window.dashboard) {
+        console.error('❌ Dashboard not initialized');
+        return 'Dashboard not initialized';
+    }
+    
+    const currentTab = window.dashboard.currentTab;
+    const listId = `${currentTab}-list`;
+    const element = document.getElementById(listId);
+    
+    if (!element) {
+        const msg = `❌ Element ${listId} not found`;
+        console.error(msg);
+        return msg;
+    }
+    
+    console.log(`🎯 Direct scroll test on ${listId}`);
+    console.log(`Before: scrollTop=${element.scrollTop}, scrollHeight=${element.scrollHeight}, clientHeight=${element.clientHeight}`);
+    
+    // Try direct assignment to maximum scroll
+    element.scrollTop = 999999;
+    
+    setTimeout(() => {
+        console.log(`After: scrollTop=${element.scrollTop}, scrollHeight=${element.scrollHeight}, clientHeight=${element.clientHeight}`);
+        const success = element.scrollTop > 0 || element.scrollHeight <= element.clientHeight;
+        const result = `${success ? '✅' : '❌'} Direct scroll test: scrollTop=${element.scrollTop}`;
+        console.log(result);
+        alert(result);
+        return result;
+    }, 50);
+    
+    return 'Test running...';
+};
+
+// CSS layout diagnostic function
+window.diagnoseCSSLayout = function() {
+    if (!window.dashboard) {
+        return 'Dashboard not initialized';
+    }
+    
+    const currentTab = window.dashboard.currentTab;
+    const listId = `${currentTab}-list`;
+    const results = [];
+    
+    // Check the full hierarchy
+    const containers = [
+        'events-wrapper',
+        'events-container', 
+        `${currentTab}-tab`,
+        listId
+    ];
+    
+    results.push(`🔍 CSS Layout Diagnosis for ${currentTab} tab:`);
+    results.push('');
+    
+    containers.forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            const computed = window.getComputedStyle(element);
+            const rect = element.getBoundingClientRect();
+            
+            results.push(`📦 ${id}:`);
+            results.push(`  Display: ${computed.display}`);
+            results.push(`  Position: ${computed.position}`);
+            results.push(`  Width: ${computed.width} (${rect.width}px)`);
+            results.push(`  Height: ${computed.height} (${rect.height}px)`);
+            results.push(`  Max-height: ${computed.maxHeight}`);
+            results.push(`  Overflow-Y: ${computed.overflowY}`);
+            results.push(`  Flex: ${computed.flex}`);
+            results.push(`  Flex-direction: ${computed.flexDirection}`);
+            
+            if (element.scrollHeight !== element.clientHeight) {
+                results.push(`  📊 ScrollHeight: ${element.scrollHeight}, ClientHeight: ${element.clientHeight}`);
+                results.push(`  📊 ScrollTop: ${element.scrollTop} (can scroll: ${element.scrollHeight > element.clientHeight})`);
+            }
+            results.push('');
+        } else {
+            results.push(`❌ ${id}: Not found`);
+            results.push('');
+        }
+    });
+    
+    const diagnosis = results.join('\n');
+    console.log(diagnosis);
+    alert(diagnosis);
+    return diagnosis;
+};
+
+// Run all scroll diagnostics
+window.runScrollDiagnostics = async function() {
+    console.log('🔬 Running complete scroll diagnostics...');
+    
+    // Step 1: CSS Layout diagnosis
+    console.log('\n=== STEP 1: CSS Layout Diagnosis ===');
+    const cssResult = window.diagnoseCSSLayout();
+    
+    // Step 2: Direct scroll test
+    console.log('\n=== STEP 2: Direct Scroll Test ===');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    const directResult = window.testDirectScroll();
+    
+    // Step 3: Full scroll functionality test
+    console.log('\n=== STEP 3: Full Scroll Functionality Test ===');
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    const fullResult = await window.testScroll();
+    
+    const summary = `
+🔬 SCROLL DIAGNOSTICS COMPLETE
+===============================
+
+Step 1 - CSS Layout: See console for details
+Step 2 - Direct Scroll: ${directResult}
+Step 3 - Full Test: See alert for details
+
+Check browser console for complete logs.
+    `;
+    
+    console.log(summary);
+    return summary;
+};
+
+// Git Diff Modal Functions
+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
+    }
+};
+
+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 === 'block') {
+            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);
+        
+        // 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');
+        
+        // Debug height information and force scrolling test
+        setTimeout(() => {
+            const modal = document.querySelector('.modal-content.git-diff-content');
+            const body = document.querySelector('.git-diff-body');
+            const wrapper = document.querySelector('.git-diff-scroll-wrapper');
+            const display = document.querySelector('.git-diff-display');
+            const code = document.querySelector('.git-diff-code');
+            
+            console.log('🔍 Height debugging:', {
+                modalHeight: modal?.offsetHeight,
+                bodyHeight: body?.offsetHeight,
+                wrapperHeight: wrapper?.offsetHeight,
+                wrapperScrollHeight: wrapper?.scrollHeight,
+                displayHeight: display?.offsetHeight,
+                displayScrollHeight: display?.scrollHeight,
+                codeHeight: code?.offsetHeight,
+                wrapperStyle: wrapper ? window.getComputedStyle(wrapper).overflow : null,
+                bodyStyle: body ? window.getComputedStyle(body).overflow : null
+            });
+            
+            // Force test - add a lot of content to test scrolling
+            if (code && code.textContent.length < 1000) {
+                console.log('🧪 Adding test content for scrolling...');
+                code.innerHTML = code.innerHTML + '\n\n' + '// TEST SCROLLING\n'.repeat(100);
+            }
+            
+            // Force fix scrolling with inline styles
+            if (wrapper) {
+                console.log('🔧 Applying scrolling fix...');
+                wrapper.style.height = '100%';
+                wrapper.style.overflow = 'auto';
+                wrapper.style.maxHeight = 'calc(100% - 60px)'; // Account for toolbar
+            }
+            
+            // Also check parent heights
+            const contentArea = document.querySelector('.git-diff-content-area');
+            if (contentArea) {
+                const computedStyle = window.getComputedStyle(contentArea);
+                console.log('📏 Content area height:', computedStyle.height);
+                if (computedStyle.height === 'auto' || !computedStyle.height) {
+                    contentArea.style.height = '100%';
+                }
+            }
+        }, 100);
+    }
+}
+
+function displayGitDiffError(modal, result) {
+    const errorArea = modal.querySelector('.git-diff-error');
+    const messageElement = modal.querySelector('.error-message');
+    const suggestionsElement = modal.querySelector('.error-suggestions');
+    
+    messageElement.textContent = result.error || 'Unknown error occurred';
+    
+    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 = '';
+    }
+    
+    errorArea.style.display = 'block';
+}
+
+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);
+    }
+};
+
+// Initialize dashboard when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.dashboard = new Dashboard();
+    console.log('Dashboard ready');
+});
+
+// Export for use in other modules
+window.Dashboard = Dashboard;