claude-mpm 4.1.23__py3-none-any.whl → 4.1.25__py3-none-any.whl

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

@@ -1655,7 +1655,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
      */
@@ -1665,92 +1665,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);
     }
 
     /**
@@ -2653,122 +2592,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/unified-data-viewer.js

@@ -62,7 +62,13 @@ class UnifiedDataViewer {
                 this.displaySession(data);
                 break;
             case 'file_operation':
-                this.displayFileOperation(data);
+                // Convert file tool to file operation format if needed
+                if (data.name && (data.params || data.tool_parameters)) {
+                    const convertedData = this.convertToolToFileOperation(data);
+                    this.displayFileOperation(convertedData);
+                } else {
+                    this.displayFileOperation(data);
+                }
                 break;
             case 'hook':
                 this.displayHook(data);
@@ -124,6 +130,14 @@ class UnifiedDataViewer {
             return 'file_operation';
         }
 
+        // File tool detection - handle file tools as file operations when they have file_path
+        if ((data.name === 'Read' || data.name === 'Write' || data.name === 'Edit' || 
+             data.name === 'MultiEdit' || data.name === 'Grep' || data.name === 'Glob') &&
+            (data.params?.file_path || data.tool_parameters?.file_path)) {
+            // Convert file tool to file operation format for better display
+            return 'file_operation';
+        }
+
         // Hook detection
         if (data.event_type && (data.hook_name || data.subtype)) {
             return 'hook';
@@ -426,24 +440,12 @@ class UnifiedDataViewer {
         if (todos.length > 0) {
             const statusCounts = this.getTodoStatusCounts(todos);
             
-            // Status summary bar
+            // Status summary - horizontal single line format
             html += `
-                <div class="todo-status-bar">
-                    <div class="status-item completed">
-                        <span class="status-icon">✅</span>
-                        <span class="status-count">${statusCounts.completed}</span>
-                        <span class="status-label">Done</span>
-                    </div>
-                    <div class="status-item in_progress">
-                        <span class="status-icon">🔄</span>
-                        <span class="status-count">${statusCounts.in_progress}</span>
-                        <span class="status-label">Active</span>
-                    </div>
-                    <div class="status-item pending">
-                        <span class="status-icon">⏳</span>
-                        <span class="status-count">${statusCounts.pending}</span>
-                        <span class="status-label">Pending</span>
-                    </div>
+                <div class="todo-status-line">
+                    <span class="status-inline">✅ ${statusCounts.completed} Done</span>
+                    <span class="status-inline">🔄 ${statusCounts.in_progress} Active</span>
+                    <span class="status-inline">⏳ ${statusCounts.pending} Pending</span>
                 </div>
             `;
 
@@ -644,30 +646,54 @@ class UnifiedDataViewer {
     }
 
     /**
-     * Display file operation data
+     * Display file operation data with file viewing capabilities
      */
     displayFileOperation(data) {
+        const fileName = data.file_path ? data.file_path.split('/').pop() : 'Unknown File';
+        
         let html = `
             <div class="unified-viewer-header">
-                <h6>📄 File: ${data.file_path}</h6>
+                <h6>📄 File: ${fileName}</h6>
                 <span class="unified-viewer-count">${data.operations ? data.operations.length : 1} operation${data.operations && data.operations.length !== 1 ? 's' : ''}</span>
             </div>
             <div class="unified-viewer-content">
-                <div class="detail-row">
-                    <span class="detail-label">File Path:</span>
-                    <span class="detail-value">${data.file_path}</span>
-                </div>
+                <div class="primary-data">
+                    <div class="detail-row highlight">
+                        <span class="detail-label">📁 File Path:</span>
+                        <span class="detail-value code">${data.file_path}</span>
+                    </div>
         `;
 
+        // Add file viewing button for tracked files
+        if (data.file_path) {
+            html += `
+                <div class="file-actions">
+                    <button class="file-action-btn view-file-btn" 
+                            onclick="window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')"
+                            title="View file contents with syntax highlighting">
+                        👁️ View File Contents
+                    </button>
+                </div>
+            `;
+        }
+
+        html += `</div>`;
+
         if (data.operations && Array.isArray(data.operations)) {
             html += `
                 <div class="detail-section">
-                    <span class="detail-section-title">Operations:</span>
+                    <span class="detail-section-title">Operations (${data.operations.length}):</span>
                     <div class="operations-list">
-                        ${data.operations.map(op => `
+                        ${data.operations.map((op, index) => `
                             <div class="operation-item">
-                                <span class="operation-type">${op.operation}</span>
-                                <span class="operation-timestamp">${this.formatTimestamp(op.timestamp)}</span>
+                                <div class="operation-header">
+                                    <span class="operation-type">${this.getOperationIcon(op.operation)} ${op.operation}</span>
+                                    <span class="operation-timestamp">${this.formatTimestamp(op.timestamp)}</span>
+                                </div>
+                                <div class="operation-details">
+                                    <span class="operation-agent">by ${op.agent || 'Unknown'}</span>
+                                    ${op.workingDirectory ? `<span class="operation-dir">in ${op.workingDirectory}</span>` : ''}
+                                </div>
                             </div>
                         `).join('')}
                     </div>
@@ -675,6 +701,9 @@ class UnifiedDataViewer {
             `;
         }
 
+        // Add collapsible JSON viewer for full file data
+        html += this.createCollapsibleJSON(data, 'Full File Data');
+
         html += '</div>';
         this.container.innerHTML = html;
     }
@@ -1179,6 +1208,58 @@ class UnifiedDataViewer {
         return icons[status] || '❓';
     }
 
+    /**
+     * Get icon for file operation type
+     */
+    getOperationIcon(operation) {
+        const icons = {
+            'read': '👁️',
+            'write': '✍️',
+            'edit': '✏️',
+            'delete': '🗑️',
+            'create': '📝',
+            'search': '🔍',
+            'list': '📂',
+            'copy': '📋',
+            'move': '📦',
+            'bash': '💻'
+        };
+        return icons[operation.toLowerCase()] || '📄';
+    }
+
+    /**
+     * Convert tool data to file operation format for better display
+     */
+    convertToolToFileOperation(toolData) {
+        const params = toolData.params || toolData.tool_parameters || {};
+        const filePath = params.file_path || params.path || params.notebook_path;
+        
+        if (!filePath) {
+            return toolData; // Return original if no file path
+        }
+
+        // Create file operation format
+        const operation = {
+            operation: toolData.name.toLowerCase(),
+            timestamp: toolData.timestamp || new Date().toISOString(),
+            agent: 'Activity Tool',
+            sessionId: toolData.sessionId || 'unknown',
+            details: {
+                parameters: params,
+                tool_name: toolData.name,
+                status: toolData.status || 'completed'
+            }
+        };
+
+        return {
+            file_path: filePath,
+            operations: [operation],
+            lastOperation: operation.timestamp,
+            // Preserve original tool data for reference
+            originalTool: toolData
+        };
+    }
+
     /**
      * Get todo status counts
      */