claude-mpm 4.2.40__py3-none-any.whl → 4.2.43__py3-none-any.whl

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

@@ -14,8 +14,31 @@
  */
 class UIStateManager {
     constructor() {
-        // Current active tab
-        this.currentTab = 'events';
+        // Hash to tab mapping
+        this.hashToTab = {
+            '#events': 'events',
+            '#agents': 'agents',
+            '#tools': 'tools',
+            '#files': 'files',
+            '#activity': 'activity',
+            '#file_tree': 'claude-tree',
+            '#browser_logs': 'browser-logs',
+            '': 'events', // default
+        };
+
+        // Tab to hash mapping (reverse lookup)
+        this.tabToHash = {
+            'events': '#events',
+            'agents': '#agents',
+            'tools': '#tools',
+            'files': '#files',
+            'activity': '#activity',
+            'claude-tree': '#file_tree',
+            'browser-logs': '#browser_logs'
+        };
+
+        // Current active tab - will be set based on URL hash
+        this.currentTab = this.getTabFromHash();
 
         // Auto-scroll behavior
         this.autoScroll = true;
@@ -37,30 +60,64 @@ 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.setupUnifiedKeyboardNavigation();
     }
 
     /**
-     * Set up tab navigation event listeners
+     * Set up hash-based navigation
      */
-    setupTabNavigation() {
-        // Tab buttons
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', () => {
-                const tabName = this.getTabNameFromButton(button);
-                this.switchTab(tabName);
-            });
+    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 || '';
+        const tabName = this.hashToTab[hash] || 'events';
+        console.log('[Hash Navigation] Switching to tab:', tabName, 'from hash:', hash);
+        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() {
+        console.log('[Hash Navigation] setupTabNavigation is deprecated - using hash navigation instead');
+    }
+
     /**
      * Set up unified keyboard navigation across all tabs
      */
@@ -90,12 +147,19 @@ class UIStateManager {
      * @returns {string} - Tab name
      */
     getTabNameFromButton(button) {
+        // First check for data-tab attribute
+        const dataTab = button.getAttribute('data-tab');
+        if (dataTab) return dataTab;
+        
+        // Fallback to text content matching
         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('browser')) return 'browser-logs';  // Added browser logs support
         if (text.includes('files')) return 'files';
+        if (text.includes('file tree')) return 'claude-tree';
         if (text.includes('code')) return 'code';
         if (text.includes('sessions')) return 'sessions';
         if (text.includes('system')) return 'system';
@@ -105,28 +169,70 @@ class UIStateManager {
     /**
      * Switch to specified tab
      * @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}`);
+    switchTab(tabName, updateHash = true) {
+        console.log(`[Hash Navigation] switchTab called with tabName: ${tabName}, updateHash: ${updateHash}`);
+        
+        // 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(`[Hash Navigation] Updating hash to: ${newHash}`);
+                window.location.hash = newHash;
+                return; // The hashchange event will trigger switchTab again
+            }
+        }
+
         const previousTab = this.currentTab;
         this.currentTab = tabName;
 
-        // Update tab button active states
-        document.querySelectorAll('.tab-button').forEach(btn => {
+        // Update tab button active states - ensure ALL tabs are deselected first
+        const allTabButtons = document.querySelectorAll('.tab-button');
+        allTabButtons.forEach(btn => {
             btn.classList.remove('active');
-            if (this.getTabNameFromButton(btn) === tabName) {
+        });
+        
+        // Now add active class ONLY to the selected tab
+        allTabButtons.forEach(btn => {
+            const btnTabName = this.getTabNameFromButton(btn);
+            if (btnTabName === tabName) {
                 btn.classList.add('active');
+                console.log(`[DEBUG] Set active on button with data-tab: ${btn.getAttribute('data-tab')}`);
             }
         });
 
-        // Show/hide tab content using CSS classes
-        document.querySelectorAll('.tab-content').forEach(content => {
+        // Show/hide tab content using CSS classes - ensure ALL are hidden first
+        const allTabContents = document.querySelectorAll('.tab-content');
+        allTabContents.forEach(content => {
             content.classList.remove('active');
         });
 
+        // Now show ONLY the selected tab content
         const activeTab = document.getElementById(`${tabName}-tab`);
         if (activeTab) {
             activeTab.classList.add('active');
+            console.log(`[DEBUG] Set active on content: ${tabName}-tab`);
+            
+            // Special handling for File Tree tab - ensure it never shows events
+            if (tabName === 'claude-tree') {
+                const claudeTreeContainer = document.getElementById('claude-tree-container');
+                if (claudeTreeContainer) {
+                    // Check if events list somehow got into this container
+                    const eventsList = claudeTreeContainer.querySelector('#events-list');
+                    if (eventsList) {
+                        console.warn('[UIStateManager] Found events-list in File Tree container, removing it!');
+                        eventsList.remove();
+                    }
+                    
+                    // Check for event items
+                    const eventItems = claudeTreeContainer.querySelectorAll('.event-item');
+                    if (eventItems.length > 0) {
+                        console.warn('[UIStateManager] Found event items in File Tree container, clearing!');
+                        eventItems.forEach(item => item.remove());
+                    }
+                }
+            }
         }
 
         // Clear previous selections when switching tabs
@@ -145,6 +251,37 @@ class UIStateManager {
             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();
+                }
+            }
+            
+            // SIMPLEST POSSIBLE Browser Logs tab - just static text
+            if (tabName === 'browser-logs') {
+                console.log('[UIStateManager] Switching to Browser Logs tab - simple mode');
+                
+                const container = document.getElementById('browser-logs-container');
+                if (container) {
+                    // Clear EVERYTHING - no complex logic, just clear it
+                    container.innerHTML = '';
+                    
+                    // Set the simplest possible content - just text
+                    container.innerHTML = '<h2 style="padding: 20px;">Browser Logs</h2>';
+                    
+                    // That's it. Nothing else. No event listeners, no watchers, nothing.
+                    console.log('[UIStateManager] Browser Logs tab set to simple text');
+                } else {
+                    console.warn('[UIStateManager] Browser logs container not found');
+                }
+            }
         }, 100);
     }
 

claude_mpm/dashboard/static/js/dashboard.js

@@ -493,6 +493,22 @@ class Dashboard {
             case 'files':
                 this.renderFiles();
                 break;
+            case 'browser-logs':
+                // Simple browser logs display - no events
+                const browserLogsContainer = document.getElementById('browser-logs-container');
+                if (browserLogsContainer) {
+                    // Only set content if it's not already set
+                    if (!browserLogsContainer.querySelector('.browser-logs-simple')) {
+                        browserLogsContainer.innerHTML = `
+                            <div class="browser-logs-simple" style="padding: 20px;">
+                                <h2>Browser Logs</h2>
+                                <p style="color: #666;">Browser console monitoring - no events shown here</p>
+                            </div>
+                        `;
+                    }
+                }
+                console.log('[Dashboard] Browser Logs tab rendered (simple mode)');
+                break;
         }
 
         // Update selection UI if we have a selected card

claude_mpm/dashboard/static/js/socket-client.js

@@ -351,8 +351,8 @@ class SocketClient {
             timeout: 30000,  // Increased connection timeout to 30 seconds
             forceNew: true,
             transports: ['websocket', 'polling'],
-            pingInterval: 30000,  // Increased ping interval for stability
-            pingTimeout: 60000    // Much longer timeout for better stability
+            // Remove client-side ping configuration - let server control this
+            // The server now properly configures: ping_interval=30s, ping_timeout=60s
         });
 
         this.setupSocketHandlers();