claude-mpm 3.9.11__py3-none-any.whl → 4.0.4__py3-none-any.whl

claude_mpm/dashboard/static/js/components/session-manager.js

@@ -9,7 +9,7 @@ class SessionManager {
         this.sessions = new Map();
         this.currentSessionId = null;
         this.selectedSessionId = '';
-        
+
         this.init();
     }
 
@@ -32,7 +32,7 @@ class SessionManager {
             sessionSelect.addEventListener('change', (e) => {
                 this.selectedSessionId = e.target.value;
                 this.onSessionFilterChanged();
-                
+
                 // Load working directory for this session
                 if (window.dashboard && window.dashboard.loadWorkingDirectoryForSession) {
                     window.dashboard.loadWorkingDirectoryForSession(e.target.value);
@@ -93,12 +93,12 @@ class SessionManager {
             sortedSessions.forEach(session => {
                 const option = document.createElement('option');
                 option.value = session.id;
-                
+
                 // Format session display text
                 const startTime = new Date(session.startTime || session.last_activity).toLocaleString();
                 const eventCount = session.eventCount || session.event_count || 0;
                 const isActive = session.id === this.currentSessionId;
-                
+
                 option.textContent = `${session.id.substring(0, 8)}... (${eventCount} events, ${startTime})${isActive ? ' [ACTIVE]' : ''}`;
                 sessionSelect.appendChild(option);
             });
@@ -136,7 +136,7 @@ class SessionManager {
         document.dispatchEvent(new CustomEvent('sessionFilterChanged', {
             detail: { sessionId: this.selectedSessionId }
         }));
-        
+
         // Also dispatch sessionChanged for backward compatibility with other components
         document.dispatchEvent(new CustomEvent('sessionChanged', {
             detail: { sessionId: this.selectedSessionId }
@@ -160,7 +160,7 @@ class SessionManager {
      */
     updateFooterInfo() {
         console.log('[SESSION-DEBUG] updateFooterInfo called, selectedSessionId:', this.selectedSessionId);
-        
+
         const footerSessionEl = document.getElementById('footer-session');
         const footerWorkingDirEl = document.getElementById('footer-working-dir');
         const footerGitBranchEl = document.getElementById('footer-git-branch');
@@ -173,14 +173,14 @@ class SessionManager {
         let sessionInfo = 'All Sessions';
         let workingDir = window.dashboard?.workingDirectoryManager?.getDefaultWorkingDir() || process?.cwd?.() || '/Users/masa/Projects/claude-mpm';
         let gitBranch = 'Unknown';
-        
+
         console.log('[SESSION-DEBUG] Initial values - sessionInfo:', sessionInfo, 'workingDir:', workingDir, 'gitBranch:', gitBranch);
 
         if (this.selectedSessionId === 'current') {
-            sessionInfo = this.currentSessionId ? 
-                `Current: ${this.currentSessionId.substring(0, 8)}...` : 
+            sessionInfo = this.currentSessionId ?
+                `Current: ${this.currentSessionId.substring(0, 8)}...` :
                 'Current: None';
-            
+
             // For current session, try to extract info from recent events
             if (this.currentSessionId) {
                 const sessionData = this.extractSessionInfoFromEvents(this.currentSessionId);
@@ -193,7 +193,7 @@ class SessionManager {
                 sessionInfo = `${this.selectedSessionId.substring(0, 8)}...`;
                 workingDir = session.working_directory || session.workingDirectory || '';
                 gitBranch = session.git_branch || session.gitBranch || '';
-                
+
                 // If session doesn't have these values, extract from events
                 if (!workingDir || !gitBranch) {
                     const sessionData = this.extractSessionInfoFromEvents(this.selectedSessionId);
@@ -204,7 +204,7 @@ class SessionManager {
         }
 
         console.log('[SESSION-DEBUG] Final values before setting footer - sessionInfo:', sessionInfo, 'workingDir:', workingDir, 'gitBranch:', gitBranch);
-        
+
         footerSessionEl.textContent = sessionInfo;
         if (footerWorkingDirEl) {
             console.log('[SESSION-DEBUG] Setting footer working dir to:', workingDir);
@@ -235,9 +235,9 @@ class SessionManager {
         const socketClient = this.socketClient;
         if (socketClient && socketClient.events) {
             console.log(`[DEBUG] Total events available: ${socketClient.events.length}`);
-            
+
             // Look for session start events or recent events with this session ID
-            const sessionEvents = socketClient.events.filter(event => 
+            const sessionEvents = socketClient.events.filter(event =>
                 event.data && event.data.session_id === sessionId
             );
 
@@ -246,7 +246,7 @@ class SessionManager {
             // Log a few sample events to see their structure
             if (sessionEvents.length > 0) {
                 console.log(`[DEBUG] Sample events for session ${sessionId}:`);
-                
+
                 // Show first 3 events
                 sessionEvents.slice(0, 3).forEach((event, index) => {
                     console.log(`[DEBUG] Event ${index + 1}:`, {
@@ -276,7 +276,7 @@ class SessionManager {
                 const event = sessionEvents[i];
                 if (event.data) {
                     console.log(`[DEBUG] Examining event ${i} data:`, event.data);
-                    
+
                     // Check for working directory info
                     if (!workingDir) {
                         if (event.data.working_directory) {
@@ -295,13 +295,13 @@ class SessionManager {
                     if (!gitBranch) {
                         const possibleBranchFields = [
                             'git_branch',
-                            'gitBranch', 
+                            'gitBranch',
                             'branch',
                             'git.branch',
                             'vcs_branch',
                             'current_branch'
                         ];
-                        
+
                         for (const field of possibleBranchFields) {
                             if (event.data[field]) {
                                 gitBranch = event.data[field];
@@ -309,7 +309,7 @@ class SessionManager {
                                 break;
                             }
                         }
-                        
+
                         // Check nested locations
                         if (!gitBranch) {
                             if (event.data.instance_info) {
@@ -322,7 +322,7 @@ class SessionManager {
                                     }
                                 }
                             }
-                            
+
                             if (!gitBranch && event.data.git) {
                                 console.log(`[DEBUG] Checking git object:`, event.data.git);
                                 if (event.data.git.branch) {
@@ -364,7 +364,7 @@ class SessionManager {
      */
     addSession(sessionData) {
         if (!sessionData.id) return;
-        
+
         const existingSession = this.sessions.get(sessionData.id);
         if (existingSession) {
             // Update existing session
@@ -382,7 +382,7 @@ class SessionManager {
                 ...sessionData
             });
         }
-        
+
         this.updateSessionSelect();
     }
 
@@ -393,7 +393,7 @@ class SessionManager {
     removeSession(sessionId) {
         if (this.sessions.has(sessionId)) {
             this.sessions.delete(sessionId);
-            
+
             // If the removed session was selected, reset to all sessions
             if (this.selectedSessionId === sessionId) {
                 this.selectedSessionId = '';
@@ -403,7 +403,7 @@ class SessionManager {
                 }
                 this.onSessionFilterChanged();
             }
-            
+
             this.updateSessionSelect();
         }
     }
@@ -475,15 +475,15 @@ class SessionManager {
                 this.sessions.set(id, sessionData);
             });
         }
-        
+
         if (data.currentSessionId) {
             this.currentSessionId = data.currentSessionId;
         }
-        
+
         if (data.selectedSessionId !== undefined) {
             this.selectedSessionId = data.selectedSessionId;
         }
-        
+
         this.updateSessionSelect();
         this.updateFooterInfo();
     }
@@ -501,7 +501,7 @@ class SessionManager {
         const allEvents = this.socketClient.events || [];
         return allEvents.filter(event => {
             // Check for session ID in various possible locations
-            const eventSessionId = event.session_id || 
+            const eventSessionId = event.session_id ||
                                  (event.data && event.data.session_id) ||
                                  null;
             return eventSessionId === sessionId;
@@ -517,4 +517,7 @@ window.refreshSessions = function() {
 };
 
 // Export for global use
-window.SessionManager = SessionManager;
+window.SessionManager = SessionManager;
+// ES6 Module export
+export { SessionManager };
+export default SessionManager;

claude_mpm/dashboard/static/js/components/socket-manager.js

@@ -1,36 +1,39 @@
 /**
  * Socket Manager Module
- * 
+ *
  * Handles all socket connection management, event dispatching, and connection state.
  * Provides a centralized interface for socket operations across the dashboard.
- * 
+ *
  * WHY: Extracted from main dashboard to centralize socket connection logic and
  * provide better separation of concerns. This allows for easier testing and
  * maintenance of connection handling code.
- * 
+ *
  * DESIGN DECISION: Acts as a wrapper around SocketClient to provide dashboard-specific
  * connection management while maintaining the existing SocketClient interface.
  * Uses event dispatching to notify other modules of connection state changes.
  */
+
+// Import SocketClient (assuming it will be converted to ES6 modules too)
+import { SocketClient } from '../socket-client.js';
 class SocketManager {
     constructor() {
         this.socketClient = null;
         this.connectionCallbacks = new Set();
         this.eventUpdateCallbacks = new Set();
-        
+
         // Initialize socket client
         this.socketClient = new SocketClient();
-        
+
         // Make socketClient globally available (for backward compatibility)
         window.socketClient = this.socketClient;
-        
+
         this.setupSocketEventHandlers();
-        
+
         // Force initial status update after a short delay to ensure DOM is ready
         setTimeout(() => {
             this.updateInitialConnectionStatus();
         }, 100);
-        
+
         console.log('Socket manager initialized');
     }
 
@@ -42,7 +45,7 @@ class SocketManager {
         document.addEventListener('socketConnectionStatus', (e) => {
             console.log(`SocketManager: Processing connection status update: ${e.detail.status} (${e.detail.type})`);
             this.handleConnectionStatusChange(e.detail.status, e.detail.type);
-            
+
             // Notify all registered callbacks
             this.connectionCallbacks.forEach(callback => {
                 try {
@@ -75,7 +78,7 @@ class SocketManager {
      */
     handleConnectionStatusChange(status, type) {
         this.updateConnectionStatus(status, type);
-        
+
         // Set up git branch listener when connected
         if (type === 'connected' && this.socketClient && this.socketClient.socket) {
             this.setupGitBranchListener();
@@ -87,7 +90,7 @@ class SocketManager {
      */
     updateInitialConnectionStatus() {
         console.log('SocketManager: Updating initial connection status');
-        
+
         // Force status check on socket client (uses fallback mechanism)
         if (this.socketClient && typeof this.socketClient.checkAndUpdateStatus === 'function') {
             console.log('SocketManager: Using socket client checkAndUpdateStatus method');
@@ -99,7 +102,7 @@ class SocketManager {
                 isConnecting: this.socketClient.isConnecting,
                 isConnected: this.socketClient.isConnected
             });
-            
+
             if (this.socketClient.socket.connected) {
                 console.log('SocketManager: Socket is already connected, updating status');
                 this.updateConnectionStatus('Connected', 'connected');
@@ -114,7 +117,7 @@ class SocketManager {
             console.log('SocketManager: No socket client or socket found, setting disconnected status');
             this.updateConnectionStatus('Disconnected', 'disconnected');
         }
-        
+
         // Additional fallback - check again after a longer delay in case connection is still establishing
         setTimeout(() => {
             console.log('SocketManager: Secondary status check after 1 second');
@@ -131,7 +134,7 @@ class SocketManager {
     setupGitBranchListener() {
         // 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) {
@@ -166,7 +169,7 @@ class SocketManager {
                 // If no span, just update text content
                 statusElement.textContent = status;
             }
-            
+
             statusElement.className = `status-badge status-${type}`;
             console.log(`SocketManager: UI updated - status: '${status}' (${type})`);
         } else {
@@ -263,10 +266,10 @@ class SocketManager {
     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';
@@ -315,7 +318,7 @@ class SocketManager {
     initializeFromURL(params) {
         const port = params.get('port');
         const portInput = document.getElementById('port-input');
-        
+
         // Determine the port to use:
         // 1. URL parameter 'port'
         // 2. Current page port (if served via HTTP)
@@ -328,7 +331,7 @@ class SocketManager {
         if (!connectPort) {
             connectPort = portInput?.value || '8765';
         }
-        
+
         // Update the port input field with the determined port
         if (portInput) {
             portInput.value = connectPort;
@@ -340,4 +343,8 @@ class SocketManager {
             this.connect(connectPort);
         }
     }
-}
+}
+
+// ES6 Module export
+export { SocketManager };
+export default SocketManager;

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

@@ -1,13 +1,13 @@
 /**
  * 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.
@@ -16,10 +16,10 @@ 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
@@ -27,7 +27,7 @@ class UIStateManager {
             type: null,       // 'event', 'agent', 'tool', 'file'
             data: null        // the actual data object
         };
-        
+
         // Navigation state for each tab
         this.tabNavigation = {
             events: { selectedIndex: -1, items: [] },
@@ -67,7 +67,7 @@ class UIStateManager {
     setupUnifiedKeyboardNavigation() {
         document.addEventListener('keydown', (e) => {
             // Only handle if not in an input field
-            if (document.activeElement && 
+            if (document.activeElement &&
                 ['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement.tagName)) {
                 return;
             }
@@ -130,7 +130,7 @@ class UIStateManager {
 
         // Trigger tab change event for other modules
         document.dispatchEvent(new CustomEvent('tabChanged', {
-            detail: { 
+            detail: {
                 newTab: tabName,
                 previousTab: previousTab
             }
@@ -153,10 +153,10 @@ class UIStateManager {
         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) {
@@ -187,7 +187,7 @@ class UIStateManager {
         Object.keys(this.tabNavigation).forEach(tabName => {
             this.tabNavigation[tabName].selectedIndex = -1;
         });
-        
+
         // Clear card selection
         this.clearCardSelection();
     }
@@ -232,7 +232,7 @@ class UIStateManager {
 
         // Update navigation state
         tabNav.selectedIndex = index;
-        
+
         // Update visual selection
         this.updateUnifiedSelectionUI();
 
@@ -288,7 +288,7 @@ class UIStateManager {
     selectCard(tabName, index, type, data) {
         // Clear previous selection
         this.clearCardSelection();
-        
+
         // Update selection state
         this.selectedCard = {
             tab: tabName,
@@ -298,7 +298,7 @@ class UIStateManager {
         };
 
         this.updateCardSelectionUI();
-        
+
         console.log('Card selected:', this.selectedCard);
     }
 
@@ -310,7 +310,7 @@ class UIStateManager {
         document.querySelectorAll('.event-item.selected, .file-item.selected').forEach(el => {
             el.classList.remove('selected');
         });
-        
+
         // Reset selection state
         this.selectedCard = {
             tab: null,
@@ -325,7 +325,7 @@ class UIStateManager {
      */
     updateCardSelectionUI() {
         if (!this.selectedCard.tab || this.selectedCard.index === null) return;
-        
+
         // Get the list container for the selected tab
         let listContainer;
         switch (this.selectedCard.tab) {
@@ -342,7 +342,7 @@ class UIStateManager {
                 listContainer = document.getElementById('files-list');
                 break;
         }
-        
+
         if (listContainer) {
             const items = listContainer.querySelectorAll('.event-item, .file-item');
             if (items[this.selectedCard.index]) {
@@ -424,4 +424,7 @@ class UIStateManager {
     getAutoScroll() {
         return this.autoScroll;
     }
-}
+}
+// ES6 Module export
+export { UIStateManager };
+export default UIStateManager;