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

claude_mpm/dashboard/static/js/components/ui-state-manager.js

@@ -14,8 +14,32 @@
  */
 class UIStateManager {
     constructor() {
-        // Current active tab
-        this.currentTab = 'events';
+        // Switching lock to prevent race conditions
+        this._switching = false;
+
+        // Hash to tab mapping
+        this.hashToTab = {
+            '#events': 'events',
+            '#agents': 'agents',
+            '#tools': 'tools',
+            '#files': 'files',
+            '#activity': 'activity',
+            '#file_tree': 'claude-tree',
+            '': 'events', // default
+        };
+
+        // Tab to hash mapping (reverse lookup)
+        this.tabToHash = {
+            'events': '#events',
+            'agents': '#agents',
+            'tools': '#tools',
+            'files': '#files',
+            'activity': '#activity',
+            'claude-tree': '#file_tree'
+        };
+
+        // Current active tab - will be set based on URL hash
+        this.currentTab = this.getTabFromHash();
 
         // Auto-scroll behavior
         this.autoScroll = true;
@@ -37,28 +61,108 @@ class UIStateManager {
         };
 
         this.setupEventHandlers();
-        console.log('UI state manager initialized');
+        console.log('UI state manager initialized with hash navigation');
+
+        // Initialize with current hash
+        this.handleHashChange();
+    }
+
+    /**
+     * Get tab name from current URL hash
+     * @returns {string} - Tab name based on hash
+     */
+    getTabFromHash() {
+        const hash = window.location.hash || '';
+        return this.hashToTab[hash] || 'events';
     }
 
     /**
      * Set up event handlers for UI interactions
      */
     setupEventHandlers() {
-        this.setupTabNavigation();
+        this.setupHashNavigation();
+        this.setupTabClickHandlers(); // Add explicit tab click handlers
         this.setupUnifiedKeyboardNavigation();
     }
 
     /**
-     * Set up tab navigation event listeners
+     * Set up hash-based navigation
+     */
+    setupHashNavigation() {
+        // Handle hash changes
+        window.addEventListener('hashchange', (e) => {
+            console.log('[Hash Navigation] Hash changed from', new URL(e.oldURL).hash, 'to', window.location.hash);
+            this.handleHashChange();
+        });
+
+        // Handle initial page load
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('[Hash Navigation] Initial hash:', window.location.hash);
+            this.handleHashChange();
+        });
+    }
+
+    /**
+     * Handle hash change events
+     */
+    handleHashChange() {
+        const hash = window.location.hash || '';
+        console.log('[Hash Navigation] DETAILED DEBUG:');
+        console.log('[Hash Navigation] - Current hash:', hash);
+        console.log('[Hash Navigation] - hashToTab mapping:', this.hashToTab);
+        console.log('[Hash Navigation] - Direct lookup result:', this.hashToTab[hash]);
+        console.log('[Hash Navigation] - Is hash in mapping?', hash in this.hashToTab);
+        console.log('[Hash Navigation] - Hash length:', hash.length);
+        console.log('[Hash Navigation] - Hash char codes:', hash.split('').map(c => c.charCodeAt(0)));
+
+        const tabName = this.hashToTab[hash] || 'events';
+        console.log('[Hash Navigation] Final resolved tab name:', tabName);
+
+        // Special logging for File Tree tab
+        if (tabName === 'claude-tree' || hash === '#file_tree') {
+            console.log('[UIStateManager] FILE TREE TAB SELECTED via hash:', hash);
+            console.log('[UIStateManager] Tab name resolved to:', tabName);
+        }
+
+        this.switchTab(tabName, false); // false = don't update hash (we're responding to hash change)
+    }
+
+    /**
+     * DEPRECATED: Tab navigation is now handled by hash navigation
+     * This method is kept for backward compatibility but does nothing
      */
     setupTabNavigation() {
-        // Tab buttons
+        console.log('[Hash Navigation] setupTabNavigation is deprecated - using hash navigation instead');
+    }
+
+    /**
+     * Set up explicit click handlers for tab buttons to ensure proper routing
+     * This ensures tab clicks work even if other modules interfere
+     */
+    setupTabClickHandlers() {
         document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', () => {
-                const tabName = this.getTabNameFromButton(button);
-                this.switchTab(tabName);
+            button.addEventListener('click', (e) => {
+                console.log('[UIStateManager] Tab button clicked:', e.target);
+
+                // Prevent default only if we're going to handle it
+                const tabName = this.getTabNameFromButton(e.target);
+                console.log('[UIStateManager] Resolved tab name:', tabName);
+
+                if (tabName) {
+                    // Let the href attribute update the hash naturally, which will trigger our hashchange handler
+                    // But also explicitly trigger the switch in case href doesn't work
+                    setTimeout(() => {
+                        const expectedHash = this.tabToHash[tabName];
+                        if (window.location.hash !== expectedHash && expectedHash) {
+                            console.log('[UIStateManager] Hash not updated, forcing update:', expectedHash);
+                            window.location.hash = expectedHash;
+                        }
+                    }, 10);
+                }
             });
         });
+
+        console.log('[UIStateManager] Tab click handlers set up for', document.querySelectorAll('.tab-button').length, 'buttons');
     }
 
     /**
@@ -90,62 +194,270 @@ class UIStateManager {
      * @returns {string} - Tab name
      */
     getTabNameFromButton(button) {
-        const text = button.textContent.toLowerCase();
-        if (text.includes('events')) return 'events';
-        if (text.includes('activity')) return 'activity';
-        if (text.includes('agents')) return 'agents';
-        if (text.includes('tools')) return 'tools';
-        if (text.includes('files')) return 'files';
+        console.log('[getTabNameFromButton] DEBUG: button object:', button);
+        console.log('[getTabNameFromButton] DEBUG: button.nodeType:', button.nodeType);
+        console.log('[getTabNameFromButton] DEBUG: button.tagName:', button.tagName);
+
+        // CRITICAL FIX: Make sure we're dealing with the actual button element
+        // Sometimes the click target might be a child element (like the emoji icon)
+        let targetButton = button;
+        if (button && button.closest && button.closest('.tab-button')) {
+            targetButton = button.closest('.tab-button');
+            console.log('[getTabNameFromButton] DEBUG: Used closest() to find actual button');
+        }
+
+        // First check for data-tab attribute
+        const dataTab = targetButton ? targetButton.getAttribute('data-tab') : null;
+        console.log('[getTabNameFromButton] DEBUG: data-tab attribute:', dataTab);
+        console.log('[getTabNameFromButton] DEBUG: dataTab truthy:', !!dataTab);
+
+        // CRITICAL: Specifically handle the File Tree case
+        if (dataTab === 'claude-tree') {
+            console.log('[getTabNameFromButton] DEBUG: Found claude-tree data-tab, returning it');
+            return 'claude-tree';
+        }
+
+        if (dataTab) {
+            console.log('[getTabNameFromButton] DEBUG: Returning dataTab:', dataTab);
+            return dataTab;
+        }
+
+        // Fallback to text content matching
+        const text = targetButton ? targetButton.textContent.toLowerCase() : '';
+        console.log('[getTabNameFromButton] DEBUG: text content:', text);
+        console.log('[getTabNameFromButton] DEBUG: text includes file tree:', text.includes('file tree'));
+        console.log('[getTabNameFromButton] DEBUG: text includes events:', text.includes('events'));
+
+        // CRITICAL: Check File Tree FIRST since it's the problematic one
+        if (text.includes('file tree') || text.includes('📝')) {
+            console.log('[getTabNameFromButton] DEBUG: Matched file tree, returning claude-tree');
+            return 'claude-tree';
+        }
+        if (text.includes('activity') || text.includes('🌳')) return 'activity';
+        if (text.includes('agents') || text.includes('🤖')) return 'agents';
+        if (text.includes('tools') || text.includes('🔧')) return 'tools';
+        if (text.includes('files') || text.includes('📁')) return 'files';
         if (text.includes('code')) return 'code';
         if (text.includes('sessions')) return 'sessions';
         if (text.includes('system')) return 'system';
+        if (text.includes('events') || text.includes('📊')) return 'events';
+
+        console.log('[getTabNameFromButton] DEBUG: No match, falling back to events');
         return 'events';
     }
 
     /**
-     * Switch to specified tab
+     * Switch to specified tab - BULLETPROOF VERSION
      * @param {string} tabName - Name of tab to switch to
+     * @param {boolean} updateHash - Whether to update URL hash (default: true)
      */
-    switchTab(tabName) {
-        console.log(`[DEBUG] switchTab called with tabName: ${tabName}`);
-        const previousTab = this.currentTab;
-        this.currentTab = tabName;
+    switchTab(tabName, updateHash = true) {
+        // CRITICAL: Prevent race conditions by using a switching lock
+        if (this._switching) {
+            console.log(`[UIStateManager] Tab switch already in progress, queuing: ${tabName}`);
+            setTimeout(() => this.switchTab(tabName, updateHash), 50);
+            return;
+        }
+        this._switching = true;
+
+        console.log(`[UIStateManager] BULLETPROOF switchTab: ${tabName}, updateHash: ${updateHash}`);
+
+        try {
+            // Extra logging for File Tree debugging
+            if (tabName === 'claude-tree') {
+                console.log('[UIStateManager] SWITCHING TO FILE TREE TAB');
+                console.log('[UIStateManager] Current tab before switch:', this.currentTab);
+            }
+
+            // Update URL hash if requested (when triggered by user action, not hash change)
+            if (updateHash && this.tabToHash[tabName]) {
+                const newHash = this.tabToHash[tabName];
+                if (window.location.hash !== newHash) {
+                    console.log(`[UIStateManager] Updating hash to: ${newHash}`);
+                    this._switching = false; // Release lock before hash change
+                    window.location.hash = newHash;
+                    return; // The hashchange event will trigger switchTab again
+                }
+            }
+
+            const previousTab = this.currentTab;
+            this.currentTab = tabName;
+
+            // STEP 1: NUCLEAR RESET - Remove ALL active states unconditionally
+            this._removeAllActiveStates();
+
+            // STEP 2: Set the ONE correct tab as active
+            this._setActiveTab(tabName);
+
+            // STEP 3: Show ONLY the correct content
+            this._showTabContent(tabName);
+
+            // STEP 4: Cleanup and validation
+            this._validateTabState(tabName);
+
+            // Clear previous selections when switching tabs
+            this.clearUnifiedSelection();
+
+            // Trigger tab change event for other modules
+            document.dispatchEvent(new CustomEvent('tabChanged', {
+                detail: {
+                    newTab: tabName,
+                    previousTab: previousTab
+                }
+            }));
+
+            // Auto-scroll to bottom after a brief delay to ensure content is rendered
+            setTimeout(() => {
+                if (this.autoScroll) {
+                    this.scrollCurrentTabToBottom();
+                }
+
+                // Special handling for File Tree tab - trigger the tree render
+                // But DON'T let it manipulate tabs itself
+                if (tabName === 'claude-tree' && window.CodeViewer) {
+                    // Call a new method that only renders content, not tab switching
+                    if (window.CodeViewer.renderContent) {
+                        window.CodeViewer.renderContent();
+                    } else {
+                        // Fallback to show() but it should be fixed to not switch tabs
+                        window.CodeViewer.show();
+                    }
+                }
+            }, 100);
+
+        } finally {
+            // ALWAYS release the lock
+            setTimeout(() => {
+                this._switching = false;
+            }, 200);
+        }
+    }
 
-        // Update tab button active states
+    /**
+     * NUCLEAR RESET: Remove ALL active states from ALL elements
+     * This ensures no stale states remain
+     */
+    _removeAllActiveStates() {
+        // Remove active class from ALL tab buttons
         document.querySelectorAll('.tab-button').forEach(btn => {
             btn.classList.remove('active');
-            if (this.getTabNameFromButton(btn) === tabName) {
-                btn.classList.add('active');
-            }
+            // Also remove any inline styling that might interfere
+            btn.style.removeProperty('border-bottom');
+            btn.style.removeProperty('color');
         });
 
-        // Show/hide tab content using CSS classes
+        // Remove active class from ALL tab content
         document.querySelectorAll('.tab-content').forEach(content => {
             content.classList.remove('active');
+            // Clear any inline display styles
+            content.style.removeProperty('display');
+
+            // CRITICAL: Clean leaked content in non-events tabs
+            if (content.id !== 'events-tab') {
+                this._cleanLeakedEventContent(content);
+            }
         });
 
-        const activeTab = document.getElementById(`${tabName}-tab`);
-        if (activeTab) {
-            activeTab.classList.add('active');
-        }
+        console.log('[UIStateManager] NUCLEAR: All active states removed');
+    }
 
-        // Clear previous selections when switching tabs
-        this.clearUnifiedSelection();
+    /**
+     * Set ONLY the specified tab as active
+     */
+    _setActiveTab(tabName) {
+        const targetTab = document.querySelector(`[data-tab="${tabName}"]`);
+        if (targetTab) {
+            targetTab.classList.add('active');
+            console.log(`[UIStateManager] Set active: ${tabName}`);
+        } else {
+            console.error(`[UIStateManager] Could not find tab button for: ${tabName}`);
+        }
+    }
 
-        // Trigger tab change event for other modules
-        document.dispatchEvent(new CustomEvent('tabChanged', {
-            detail: {
-                newTab: tabName,
-                previousTab: previousTab
+    /**
+     * Show ONLY the specified tab content
+     */
+    _showTabContent(tabName) {
+        const targetContent = document.getElementById(`${tabName}-tab`);
+        if (targetContent) {
+            targetContent.classList.add('active');
+            console.log(`[UIStateManager] Showing content: ${tabName}-tab`);
+
+            // Special handling for File Tree tab
+            if (tabName === 'claude-tree') {
+                this._prepareFileTreeContent(targetContent);
             }
-        }));
+        } else {
+            console.error(`[UIStateManager] Could not find content for: ${tabName}`);
+        }
+    }
+
+    /**
+     * Clean any leaked event content from non-event tabs
+     */
+    _cleanLeakedEventContent(contentElement) {
+        // Remove any event items that may have leaked
+        const leakedEventItems = contentElement.querySelectorAll('.event-item');
+        if (leakedEventItems.length > 0) {
+            console.warn(`[UIStateManager] Found ${leakedEventItems.length} leaked event items in ${contentElement.id}, removing...`);
+            leakedEventItems.forEach(item => item.remove());
+        }
+
+        // Remove any events-list elements
+        const leakedEventsList = contentElement.querySelectorAll('#events-list, .events-list');
+        if (leakedEventsList.length > 0) {
+            console.warn(`[UIStateManager] Found leaked events-list in ${contentElement.id}, removing...`);
+            leakedEventsList.forEach(list => list.remove());
+        }
+    }
+
+    /**
+     * Prepare File Tree content area
+     */
+    _prepareFileTreeContent(fileTreeContent) {
+        const claudeTreeContainer = document.getElementById('claude-tree-container');
+        if (claudeTreeContainer) {
+            // Final cleanup check
+            this._cleanLeakedEventContent(claudeTreeContainer);
 
-        // Auto-scroll to bottom after a brief delay to ensure content is rendered
+            // Ensure container is properly marked for CodeViewer
+            claudeTreeContainer.setAttribute('data-owner', 'code-viewer');
+            claudeTreeContainer.setAttribute('data-component', 'CodeViewer');
+
+            console.log('[UIStateManager] File Tree container prepared');
+        }
+    }
+
+    /**
+     * Validate that tab state is correct after switching
+     */
+    _validateTabState(expectedTab) {
         setTimeout(() => {
-            if (this.autoScroll) {
-                this.scrollCurrentTabToBottom();
+            const activeTabs = document.querySelectorAll('.tab-button.active');
+            const activeContents = document.querySelectorAll('.tab-content.active');
+
+            if (activeTabs.length !== 1) {
+                console.error(`[UIStateManager] VALIDATION FAILED: Expected 1 active tab, found ${activeTabs.length}`);
+                activeTabs.forEach((tab, idx) => {
+                    console.error(`  - Active tab ${idx + 1}: ${tab.textContent.trim()} (${tab.getAttribute('data-tab')})`);
+                });
+                // Force fix
+                this._removeAllActiveStates();
+                this._setActiveTab(expectedTab);
+            }
+
+            if (activeContents.length !== 1) {
+                console.error(`[UIStateManager] VALIDATION FAILED: Expected 1 active content, found ${activeContents.length}`);
+                activeContents.forEach((content, idx) => {
+                    console.error(`  - Active content ${idx + 1}: ${content.id}`);
+                });
+                // Force fix
+                this._removeAllActiveStates();
+                this._showTabContent(expectedTab);
             }
-        }, 100);
+
+            console.log(`[UIStateManager] Tab state validated for: ${expectedTab}`);
+        }, 50);
     }
 
     /**
@@ -432,3 +744,6 @@ class UIStateManager {
 // ES6 Module export
 export { UIStateManager };
 export default UIStateManager;
+
+// Make UIStateManager globally available for dist/dashboard.js
+window.UIStateManager = UIStateManager;