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

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

@@ -0,0 +1,427 @@
+/**
+ * UI State Manager Module
+ * 
+ * Manages UI state including tab switching, card selection, keyboard navigation,
+ * and visual feedback across the dashboard interface.
+ * 
+ * WHY: Extracted from main dashboard to centralize UI state management and
+ * provide better separation between business logic and UI state. This makes
+ * the UI behavior more predictable and easier to test.
+ * 
+ * DESIGN DECISION: Maintains centralized state for current tab, selected cards,
+ * and navigation context while providing a clean API for other modules to
+ * interact with UI state changes.
+ */
+class UIStateManager {
+    constructor() {
+        // Current active tab
+        this.currentTab = 'events';
+        
+        // Auto-scroll behavior
+        this.autoScroll = true;
+        
+        // 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: [] }
+        };
+
+        this.setupEventHandlers();
+        console.log('UI state manager initialized');
+    }
+
+    /**
+     * Set up event handlers for UI interactions
+     */
+    setupEventHandlers() {
+        this.setupTabNavigation();
+        this.setupUnifiedKeyboardNavigation();
+    }
+
+    /**
+     * Set up tab navigation event listeners
+     */
+    setupTabNavigation() {
+        // Tab buttons
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.addEventListener('click', () => {
+                const tabName = this.getTabNameFromButton(button);
+                this.switchTab(tabName);
+            });
+        });
+    }
+
+    /**
+     * Set up unified keyboard navigation across all tabs
+     */
+    setupUnifiedKeyboardNavigation() {
+        document.addEventListener('keydown', (e) => {
+            // Only handle if not in an input field
+            if (document.activeElement && 
+                ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
+                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') {
+                this.clearUnifiedSelection();
+            }
+        });
+    }
+
+    /**
+     * Get tab name from button element
+     * @param {HTMLElement} button - Tab button element
+     * @returns {string} - Tab name
+     */
+    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';
+    }
+
+    /**
+     * Switch to specified tab
+     * @param {string} tabName - Name of tab to switch to
+     */
+    switchTab(tabName) {
+        console.log(`[DEBUG] switchTab called with tabName: ${tabName}`);
+        const previousTab = this.currentTab;
+        this.currentTab = tabName;
+
+        // Update tab button active states
+        document.querySelectorAll('.tab-button').forEach(btn => {
+            btn.classList.remove('active');
+            if (this.getTabNameFromButton(btn) === tabName) {
+                btn.classList.add('active');
+            }
+        });
+
+        // Show/hide tab content using CSS classes
+        document.querySelectorAll('.tab-content').forEach(content => {
+            content.classList.remove('active');
+        });
+
+        const activeTab = document.getElementById(`${tabName}-tab`);
+        if (activeTab) {
+            activeTab.classList.add('active');
+        }
+
+        // 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();
+            }
+        }, 100);
+    }
+
+    /**
+     * Handle unified arrow navigation across tabs
+     * @param {number} direction - Navigation direction (1 for down, -1 for up)
+     */
+    handleUnifiedArrowNavigation(direction) {
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (!tabNav) return;
+
+        let newIndex = tabNav.selectedIndex + direction;
+        
+        // Handle bounds
+        if (tabNav.items.length === 0) return;
+        
+        if (newIndex < 0) {
+            newIndex = tabNav.items.length - 1;
+        } else if (newIndex >= tabNav.items.length) {
+            newIndex = 0;
+        }
+
+        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;
+
+        const selectedElement = tabNav.items[tabNav.selectedIndex];
+        if (selectedElement && selectedElement.onclick) {
+            selectedElement.onclick();
+        }
+    }
+
+    /**
+     * Clear all unified selection states
+     */
+    clearUnifiedSelection() {
+        // Clear all tab navigation states
+        Object.keys(this.tabNavigation).forEach(tabName => {
+            this.tabNavigation[tabName].selectedIndex = -1;
+        });
+        
+        // Clear card selection
+        this.clearCardSelection();
+    }
+
+    /**
+     * Update tab navigation items for current tab
+     * Should be called after tab content is rendered
+     */
+    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 .event-item';
+                break;
+        }
+
+        if (containerSelector) {
+            tabNav.items = Array.from(document.querySelectorAll(containerSelector));
+        }
+    }
+
+    /**
+     * Select card by index for 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();
+
+        // If this is a different tab selection, record the card selection
+        const selectedElement = tabNav.items[index];
+        if (selectedElement) {
+            // Extract data from the element to populate selectedCard
+            this.selectCard(tabName, index, this.getCardType(tabName), index);
+        }
+
+        // Show details for the selected item
+        this.showCardDetails(tabName, index);
+    }
+
+    /**
+     * Update visual selection UI for unified navigation
+     */
+    updateUnifiedSelectionUI() {
+        // Clear all existing selections
+        document.querySelectorAll('.event-item.keyboard-selected').forEach(el => {
+            el.classList.remove('keyboard-selected');
+        });
+
+        // Apply selection to current tab's selected item
+        const tabNav = this.tabNavigation[this.currentTab];
+        if (tabNav && tabNav.selectedIndex !== -1 && tabNav.items[tabNav.selectedIndex]) {
+            tabNav.items[tabNav.selectedIndex].classList.add('keyboard-selected');
+        }
+    }
+
+    /**
+     * Show card details for specified tab and index
+     * @param {string} tabName - Tab name
+     * @param {number} index - Item index
+     */
+    showCardDetails(tabName, index) {
+        // Dispatch event for other modules to handle
+        document.dispatchEvent(new CustomEvent('showCardDetails', {
+            detail: {
+                tabName: tabName,
+                index: index
+            }
+        }));
+    }
+
+    /**
+     * Select a specific card
+     * @param {string} tabName - Tab name
+     * @param {number} index - Item index
+     * @param {string} type - Item type
+     * @param {*} data - Item data
+     */
+    selectCard(tabName, index, type, data) {
+        // Clear previous selection
+        this.clearCardSelection();
+        
+        // Update selection state
+        this.selectedCard = {
+            tab: tabName,
+            index: index,
+            type: type,
+            data: data
+        };
+
+        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 card selection UI
+     */
+    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 items = listContainer.querySelectorAll('.event-item, .file-item');
+            if (items[this.selectedCard.index]) {
+                items[this.selectedCard.index].classList.add('selected');
+            }
+        }
+    }
+
+    /**
+     * Get card type based on tab name
+     * @param {string} tabName - Tab name
+     * @returns {string} - Card type
+     */
+    getCardType(tabName) {
+        switch (tabName) {
+            case 'events': return 'event';
+            case 'agents': return 'agent';
+            case 'tools': return 'tool';
+            case 'files': return 'file';
+            default: return 'unknown';
+        }
+    }
+
+    /**
+     * Scroll current tab to bottom
+     */
+    scrollCurrentTabToBottom() {
+        const tabId = `${this.currentTab}-list`;
+        const element = document.getElementById(tabId);
+        if (element && this.autoScroll) {
+            element.scrollTop = element.scrollHeight;
+        }
+    }
+
+    /**
+     * Clear selection for cleanup
+     */
+    clearSelection() {
+        this.clearCardSelection();
+        this.clearUnifiedSelection();
+    }
+
+    /**
+     * Get current tab name
+     * @returns {string} - Current tab name
+     */
+    getCurrentTab() {
+        return this.currentTab;
+    }
+
+    /**
+     * Get selected card info
+     * @returns {Object} - Selected card state
+     */
+    getSelectedCard() {
+        return { ...this.selectedCard };
+    }
+
+    /**
+     * Get tab navigation state
+     * @returns {Object} - Tab navigation state
+     */
+    getTabNavigation() {
+        return { ...this.tabNavigation };
+    }
+
+    /**
+     * Set auto-scroll behavior
+     * @param {boolean} enabled - Whether to enable auto-scroll
+     */
+    setAutoScroll(enabled) {
+        this.autoScroll = enabled;
+    }
+
+    /**
+     * Get auto-scroll state
+     * @returns {boolean} - Auto-scroll enabled state
+     */
+    getAutoScroll() {
+        return this.autoScroll;
+    }
+}