claude-mpm 4.1.6__py3-none-any.whl → 4.24.0__py3-none-any.whl

claude_mpm/dashboard/static/js/components/module-viewer.js

@@ -1,8 +1,11 @@
 /**
  * Module Viewer Component
  * Displays detailed information about selected events organized by class/type
+ * Now uses UnifiedDataViewer for consistent data formatting
  */
 
+import { UnifiedDataViewer } from './unified-data-viewer.js';
+
 class ModuleViewer {
     constructor(containerId) {
         this.container = document.getElementById(containerId);
@@ -15,8 +18,37 @@ class ModuleViewer {
         // When true, all events show JSON expanded; when false, all collapsed
         this.globalJsonExpanded = localStorage.getItem('dashboard-json-expanded') === 'true';
         
+        // Separate state for Full Event Data sections
+        this.fullEventDataExpanded = localStorage.getItem('dashboard-full-event-expanded') === 'true';
+        
         // Track if keyboard listener has been added to avoid duplicates
         this.keyboardListenerAdded = false;
+        
+        // Initialize unified data viewer
+        this.unifiedViewer = new UnifiedDataViewer('module-data-content');
+        
+        // Sync unified viewer's JSON state with module viewer's state
+        // This ensures both viewers maintain consistent JSON visibility
+        this.unifiedViewer.globalJsonExpanded = this.globalJsonExpanded;
+        this.unifiedViewer.fullEventDataExpanded = this.fullEventDataExpanded;
+        
+        // Listen for JSON state changes from unified viewer
+        document.addEventListener('jsonToggleChanged', (e) => {
+            this.globalJsonExpanded = e.detail.expanded;
+            // Also update the unified viewer's state if it's different
+            if (this.unifiedViewer.globalJsonExpanded !== e.detail.expanded) {
+                this.unifiedViewer.globalJsonExpanded = e.detail.expanded;
+            }
+        });
+        
+        // Listen for Full Event Data state changes
+        document.addEventListener('fullEventToggleChanged', (e) => {
+            this.fullEventDataExpanded = e.detail.expanded;
+            // Also update the unified viewer's state if it's different
+            if (this.unifiedViewer.fullEventDataExpanded !== e.detail.expanded) {
+                this.unifiedViewer.fullEventDataExpanded = e.detail.expanded;
+            }
+        });
 
         this.init();
     }
@@ -81,17 +113,22 @@ class ModuleViewer {
     }
 
     /**
-     * Show details for a selected event
+     * Show details for a selected event using UnifiedDataViewer
      * @param {Object} event - The selected event
      */
     showEventDetails(event) {
         this.currentEvent = event;
-
-        // Render structured data in top pane
-        this.renderStructuredData(event);
-
-        // Render JSON in bottom pane
-        this.renderJsonData(event);
+        
+        if (!this.unifiedViewer) {
+            console.warn('ModuleViewer: UnifiedDataViewer not available');
+            // Fallback to legacy rendering
+            this.renderStructuredData(event);
+            this.renderJsonData(event);
+            return;
+        }
+        
+        // Use unified viewer to display event data
+        this.unifiedViewer.display(event, 'event');
     }
 
     /**
@@ -1386,6 +1423,9 @@ class ModuleViewer {
      * Clear the module viewer
      */
     clear() {
+        if (this.unifiedViewer) {
+            this.unifiedViewer.clear();
+        }
         this.showEmptyState();
     }
 
@@ -1641,7 +1681,7 @@ class ModuleViewer {
     }
 
     /**
-     * Show file operations details (backward compatibility method)
+     * Show file operations using UnifiedDataViewer for consistency
      * @param {Object} fileData - The file operations data
      * @param {string} filePath - The file path
      */
@@ -1651,92 +1691,31 @@ class ModuleViewer {
             return;
         }
 
-        // Get file name from path for header
-        const fileName = filePath.split('/').pop() || filePath;
-        const operations = fileData.operations || [];
-        const lastOp = operations[operations.length - 1];
-        const headerTimestamp = lastOp ? this.formatTimestamp(lastOp.timestamp) : '';
-
-        // Create contextual header
-        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> ${this.createClickableFilePath(filePath)}
-                        <div id="git-track-status-${filePath.replace(/[^a-zA-Z0-9]/g, '-')}" class="git-track-status" style="margin-top: 8px;">
-                            <!-- Git tracking status will be populated here -->
-                        </div>
-                    </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>
-                                    ${this.isReadOnlyOperation(op.operation) ? `
-                                        <!-- Read-only operation: show only file viewer -->
-                                        <span class="file-viewer-icon"
-                                              onclick="showFileViewerModal('${filePath}')"
-                                              title="View file contents with syntax highlighting"
-                                              style="margin-left: 8px; cursor: pointer; font-size: 16px;">
-                                            👁️
-                                        </span>
-                                    ` : `
-                                        <!-- Edit operation: show both file viewer and git diff -->
-                                        <span class="file-viewer-icon"
-                                              onclick="showFileViewerModal('${filePath}')"
-                                              title="View file contents with syntax highlighting"
-                                              style="margin-left: 8px; cursor: pointer; font-size: 16px;">
-                                            👁️
-                                        </span>
-                                        <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; display: none;"
-                                              data-file-path="${filePath}"
-                                              data-operation-timestamp="${op.timestamp}">
-                                            📋
-                                        </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 ? this.formatOperationDetails(op.details) : ''}
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            </div>
-        `;
-
-        // Check git tracking status and show track control if needed
-        this.checkAndShowTrackControl(filePath);
+        // Initialize UnifiedDataViewer if not already available
+        if (!this.unifiedViewer) {
+            this.unifiedViewer = new UnifiedDataViewer('module-data-content');
+        }
 
-        // Check git status and conditionally show git diff icons
-        this.checkAndShowGitDiffIcons(filePath);
+        // Convert file data to standardized format
+        const standardizedFileData = {
+            file_path: filePath,
+            operations: fileData.operations || [],
+            lastOperation: fileData.lastOperation,
+            ...fileData // Preserve any additional data
+        };
 
-        // Create collapsible JSON section for file data
-        const collapsibleJsonSection = this.createCollapsibleJsonSection(fileData);
+        // Use UnifiedDataViewer for consistent display
+        this.unifiedViewer.display(standardizedFileData, 'file_operation');
 
-        // Show structured data with JSON section in data pane
-        if (this.dataContainer) {
-            this.dataContainer.innerHTML = contextualHeader + content + collapsibleJsonSection;
+        // Update module header for consistency
+        const moduleHeader = document.querySelector('.module-data-header h5');
+        if (moduleHeader) {
+            const fileName = filePath.split('/').pop() || filePath;
+            moduleHeader.textContent = `📄 File: ${fileName}`;
         }
 
-        // Initialize JSON toggle functionality
-        this.initializeJsonToggle();
-
-        // Hide JSON pane since data is integrated above
-        // JSON container no longer exists - handled via collapsible sections
+        // Check git tracking status and show track control if needed
+        this.checkAndShowTrackControl(filePath);
     }
 
     /**
@@ -2639,122 +2618,6 @@ class ModuleViewer {
         }
     }
 
-    /**
-     * Check git status and conditionally show git diff icons
-     * Only shows git diff icons if git status check succeeds
-     * @param {string} filePath - Path to the file to check
-     */
-    async checkAndShowGitDiffIcons(filePath) {
-        if (!filePath) {
-            console.debug('[GIT-DIFF-ICONS] No filePath provided, skipping git diff icon check');
-            return;
-        }
-
-        console.debug('[GIT-DIFF-ICONS] Checking git diff icons for file:', filePath);
-
-        try {
-            // Get the Socket.IO client
-            const socket = window.socket || window.dashboard?.socketClient?.socket;
-            if (!socket) {
-                console.warn('[GIT-DIFF-ICONS] No socket connection available for git status check');
-                return;
-            }
-
-            console.debug('[GIT-DIFF-ICONS] Socket connection available, proceeding');
-
-            // Get working directory from dashboard with proper fallback
-            let workingDir = window.dashboard?.currentWorkingDir;
-
-            // Don't use 'Unknown' as a working directory
-            if (!workingDir || workingDir === 'Unknown' || workingDir.trim() === '') {
-                // Try to get from footer element
-                const footerDir = document.getElementById('footer-working-dir');
-                if (footerDir?.textContent?.trim() && footerDir.textContent.trim() !== 'Unknown') {
-                    workingDir = footerDir.textContent.trim();
-                } else {
-                    // Final fallback to current directory
-                    workingDir = '.';
-                }
-                console.log('[GIT-DIFF-ICONS] Working directory fallback used:', workingDir);
-            } else {
-                console.debug('[GIT-DIFF-ICONS] Using working directory:', workingDir);
-            }
-
-            // Set up one-time listener for git status response
-            const responsePromise = new Promise((resolve, reject) => {
-                const responseHandler = (data) => {
-                    console.debug('[GIT-DIFF-ICONS] Received git status response:', data);
-                    if (data.file_path === filePath) {
-                        socket.off('git_status_response', responseHandler);
-                        resolve(data);
-                    } else {
-                        console.debug('[GIT-DIFF-ICONS] Response for different file, ignoring:', data.file_path);
-                    }
-                };
-
-                socket.on('git_status_response', responseHandler);
-
-                // Timeout after 3 seconds
-                setTimeout(() => {
-                    socket.off('git_status_response', responseHandler);
-                    console.warn('[GIT-DIFF-ICONS] Timeout waiting for git status response');
-                    reject(new Error('Request timeout'));
-                }, 3000);
-            });
-
-            console.debug('[GIT-DIFF-ICONS] Sending check_git_status event');
-            // Send git status request
-            socket.emit('check_git_status', {
-                file_path: filePath,
-                working_dir: workingDir
-            });
-
-            // Wait for response
-            const result = await responsePromise;
-            console.debug('[GIT-DIFF-ICONS] Git status check result:', result);
-
-            // Only show git diff icons if git status check was successful
-            if (result.success) {
-                console.debug('[GIT-DIFF-ICONS] Git status check successful, showing icons for:', filePath);
-                this.showGitDiffIconsForFile(filePath);
-            } else {
-                console.debug('[GIT-DIFF-ICONS] Git status check failed, icons will remain hidden:', result.error);
-            }
-            // If git status fails, icons remain hidden (display: none)
-
-        } catch (error) {
-            console.warn('[GIT-DIFF-ICONS] Git status check failed, hiding git diff icons:', error.message);
-            // Icons remain hidden on error
-        }
-    }
-
-    /**
-     * Show git diff icons for a specific file after successful git status check
-     * @param {string} filePath - Path to the file
-     */
-    showGitDiffIconsForFile(filePath) {
-        console.debug('[GIT-DIFF-ICONS] Showing git diff icons for file:', filePath);
-
-        // Find all git diff icons for this file path and show them
-        const gitDiffIcons = document.querySelectorAll(`[data-file-path="${filePath}"]`);
-        console.debug('[GIT-DIFF-ICONS] Found', gitDiffIcons.length, 'elements with matching file path');
-
-        let shownCount = 0;
-        gitDiffIcons.forEach((icon, index) => {
-            console.debug('[GIT-DIFF-ICONS] Processing element', index, ':', icon);
-            console.debug('[GIT-DIFF-ICONS] Element classes:', icon.classList.toString());
-
-            if (icon.classList.contains('git-diff-icon')) {
-                console.debug('[GIT-DIFF-ICONS] Setting display to inline for git-diff-icon');
-                icon.style.display = 'inline';
-                shownCount++;
-            } else {
-                console.debug('[GIT-DIFF-ICONS] Element is not a git-diff-icon, skipping');
-            }
-        });
-
-        console.debug('[GIT-DIFF-ICONS] Showed', shownCount, 'git diff icons for file:', filePath);
-    }
 
     /**
      * Show notification to user

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

@@ -65,6 +65,8 @@ class SessionManager {
     setupSocketListeners() {
         // Listen for socket event updates
         this.socketClient.onEventUpdate((events, sessions) => {
+            // Log the sessions data to debug
+            console.log('[SESSION-MANAGER] Received sessions update:', sessions);
             this.sessions = sessions;
             this.updateSessionSelect();
             // Update footer info when new events arrive
@@ -90,9 +92,28 @@ class SessionManager {
         // Store current selection
         const currentSelection = sessionSelect.value;
 
-        // Clear existing options except default ones
+        // Get the default working directory from various sources
+        let defaultWorkingDir = '/';
+        
+        // Try to get from working directory manager
+        if (window.dashboard && window.dashboard.workingDirectoryManager) {
+            defaultWorkingDir = window.dashboard.workingDirectoryManager.getDefaultWorkingDir();
+        } else {
+            // Fallback: Try to get from header display element
+            const headerWorkingDir = document.getElementById('working-dir-path');
+            if (headerWorkingDir?.textContent?.trim()) {
+                const headerPath = headerWorkingDir.textContent.trim();
+                if (headerPath !== 'Loading...' && headerPath !== 'Unknown') {
+                    defaultWorkingDir = headerPath;
+                }
+            }
+        }
+        
+        console.log('[SESSION-MANAGER] Using default working directory:', defaultWorkingDir);
+
+        // Update "All Sessions" option to show working directory
         sessionSelect.innerHTML = `
-            <option value="">All Sessions</option>
+            <option value="">${defaultWorkingDir} | All Sessions</option>
         `;
 
         // Add sessions from the sessions map
@@ -108,8 +129,23 @@ class SessionManager {
                 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]' : ''}`;
+                
+                // Extract working directory from session or events
+                let workingDir = session.working_directory || session.workingDirectory || '';
+                
+                // Log for debugging
+                console.log(`[SESSION-DROPDOWN] Session ${session.id.substring(0, 8)} working_directory:`, workingDir);
+                
+                if (!workingDir) {
+                    const sessionData = this.extractSessionInfoFromEvents(session.id);
+                    workingDir = sessionData.workingDir || defaultWorkingDir;
+                    console.log(`[SESSION-DROPDOWN] Extracted working directory from events:`, workingDir);
+                }
+                
+                // Format display: working_directory | session_id...
+                const shortId = session.id.substring(0, 8);
+                const dirDisplay = workingDir || defaultWorkingDir;
+                option.textContent = `${dirDisplay} | ${shortId}...${isActive ? ' [ACTIVE]' : ''}`;
                 sessionSelect.appendChild(option);
             });
         }
@@ -183,10 +219,10 @@ class SessionManager {
         let sessionInfo = 'All Sessions';
         // Use browser-compatible fallback for working directory
         // WHY: Removed process.cwd() Node.js reference - not available in browser
-        // BROWSER FIX: Use dashboard manager or hardcoded fallback
+        // BROWSER FIX: Use dashboard manager or server-provided config
         let workingDir = window.dashboard?.workingDirectoryManager?.getDefaultWorkingDir() || 
-                        window.location.pathname || 
-                        '/Users/masa/Projects/claude-mpm';
+                        window.dashboardConfig?.workingDirectory || 
+                        '.';
         let gitBranch = 'Unknown';
 
         console.log('[SESSION-DEBUG] Initial values - sessionInfo:', sessionInfo, 'workingDir:', workingDir, 'gitBranch:', gitBranch);
@@ -202,8 +238,8 @@ class SessionManager {
                 // Browser-compatible working directory fallback
                 workingDir = sessionData.workingDir || 
                            window.dashboard?.workingDirectoryManager?.getDefaultWorkingDir() || 
-                           window.location.pathname || 
-                           '/Users/masa/Projects/claude-mpm';
+                           window.dashboardConfig?.workingDirectory || 
+                           '.';
                 gitBranch = sessionData.gitBranch || 'Unknown';
             }
         } else if (this.selectedSessionId) {
@@ -217,7 +253,7 @@ class SessionManager {
                 if (!workingDir || !gitBranch) {
                     const sessionData = this.extractSessionInfoFromEvents(this.selectedSessionId);
                     // Browser-compatible fallback - no process.cwd()
-                    workingDir = workingDir || sessionData.workingDir || window.location.pathname || '.';
+                    workingDir = workingDir || sessionData.workingDir || window.dashboardConfig?.workingDirectory || '.';
                     gitBranch = gitBranch || sessionData.gitBranch || '';
                 }
             }

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

@@ -81,6 +81,10 @@ class SocketManager {
 
         // Set up git branch listener when connected
         if (type === 'connected' && this.socketClient && this.socketClient.socket) {
+            // Expose socket globally for components like CodeTree
+            window.socket = this.socketClient.socket;
+            console.log('SocketManager: Exposed socket globally as window.socket');
+            
             this.setupGitBranchListener();
         }
     }
@@ -105,6 +109,9 @@ class SocketManager {
 
             if (this.socketClient.socket.connected) {
                 console.log('SocketManager: Socket is already connected, updating status');
+                // Expose socket globally for components like CodeTree
+                window.socket = this.socketClient.socket;
+                console.log('SocketManager: Exposed socket globally as window.socket');
                 this.updateConnectionStatus('Connected', 'connected');
             } else if (this.socketClient.isConnecting || this.socketClient.socket.connecting) {
                 console.log('SocketManager: Socket is connecting, updating status');
@@ -123,6 +130,11 @@ class SocketManager {
             console.log('SocketManager: Secondary status check after 1 second');
             if (this.socketClient && this.socketClient.socket && this.socketClient.socket.connected) {
                 console.log('SocketManager: Socket connected in secondary check, updating status');
+                // Expose socket globally if not already done
+                if (!window.socket) {
+                    window.socket = this.socketClient.socket;
+                    console.log('SocketManager: Exposed socket globally as window.socket (secondary check)');
+                }
                 this.updateConnectionStatus('Connected', 'connected');
             }
         }, 1000);
@@ -350,3 +362,7 @@ class SocketManager {
 // ES6 Module export
 export { SocketManager };
 export default SocketManager;
+
+// Make SocketManager globally available for the dist/dashboard.js
+// This ensures compatibility with the minified version
+window.SocketManager = SocketManager;