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

claude_mpm/dashboard/static/js/components/unified-data-viewer.js

@@ -16,6 +16,26 @@ class UnifiedDataViewer {
         this.container = document.getElementById(containerId);
         this.currentData = null;
         this.currentType = null;
+        
+        // Global JSON visibility state - synchronized with localStorage
+        // This ensures all JSON sections maintain consistent state
+        this.globalJsonExpanded = localStorage.getItem('dashboard-json-expanded') === 'true';
+        
+        // Separate state for "Full Event Data" sections - uses its own localStorage key
+        // This allows independent control of Full Event Data visibility
+        this.fullEventDataExpanded = localStorage.getItem('dashboard-full-event-expanded') === 'true';
+        
+        // Listen for global JSON toggle changes from other components
+        document.addEventListener('jsonToggleChanged', (e) => {
+            this.globalJsonExpanded = e.detail.expanded;
+            this.updateAllJsonSections();
+        });
+        
+        // Listen for full event data toggle changes
+        document.addEventListener('fullEventToggleChanged', (e) => {
+            this.fullEventDataExpanded = e.detail.expanded;
+            this.updateAllFullEventSections();
+        });
     }
 
     /**
@@ -646,35 +666,64 @@ class UnifiedDataViewer {
     }
 
     /**
-     * Display file operation data with file viewing capabilities
+     * Display file operation data with enhanced file viewing capabilities
      */
     displayFileOperation(data) {
         const fileName = data.file_path ? data.file_path.split('/').pop() : 'Unknown File';
+        const isSingleFile = this.isSingleFileOperation(data);
+        const fileIcon = this.getFileIcon(data.file_path);
+        const fileType = this.getFileType(data.file_path);
         
         let html = `
-            <div class="unified-viewer-header">
-                <h6>📄 File: ${fileName}</h6>
+            <div class="unified-viewer-header ${isSingleFile ? 'single-file-header' : ''}">
+                <h6>${fileIcon} File: ${fileName}</h6>
                 <span class="unified-viewer-count">${data.operations ? data.operations.length : 1} operation${data.operations && data.operations.length !== 1 ? 's' : ''}</span>
+                ${fileType ? `<span class="file-type-badge">${fileType}</span>` : ''}
             </div>
             <div class="unified-viewer-content">
                 <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>
+                        <span class="detail-value code clickable-file-path" 
+                              onclick="window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')"
+                              title="Click to view file contents\\nKeyboard: Hover + V key or Ctrl/Cmd + Click\\nFile: ${data.file_path}"
+                              tabindex="0"
+                              role="button"
+                              aria-label="Open file ${data.file_path} in viewer"
+                              onkeypress="if(event.key==='Enter'||event.key===' '){window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')}">${data.file_path}</span>
                     </div>
         `;
 
-        // Add file viewing button for tracked files
+        // Enhanced file viewing for single file operations
         if (data.file_path) {
+            const shouldShowPreview = this.shouldShowInlinePreview(data);
+            
             html += `
-                <div class="file-actions">
-                    <button class="file-action-btn view-file-btn" 
+                <div class="file-actions ${isSingleFile ? 'single-file-actions' : ''}">
+                    <button class="file-action-btn view-file-btn ${isSingleFile ? 'primary-action' : ''}" 
                             onclick="window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')"
                             title="View file contents with syntax highlighting">
-                        👁️ View File Contents
+                        ${fileIcon} View File Contents
                     </button>
+                    ${isSingleFile && this.isTextFile(data.file_path) ? `
+                        <button class="file-action-btn inline-preview-btn" 
+                                onclick="window.unifiedDataViewer && window.unifiedDataViewer.toggleInlinePreview('${data.file_path}', this)"
+                                title="Toggle inline preview">
+                            📖 Quick Preview
+                        </button>
+                    ` : ''}
                 </div>
             `;
+            
+            // Add inline preview container for single file operations
+            if (isSingleFile && shouldShowPreview) {
+                const previewId = this.generatePreviewId(data.file_path);
+                html += `
+                    <div class="inline-preview-container" id="preview-${previewId}" style="display: none;">
+                        <div class="inline-preview-loading">Loading preview...</div>
+                    </div>
+                `;
+            }
         }
 
         html += `</div>`;
@@ -1114,6 +1163,225 @@ class UnifiedDataViewer {
         return html;
     }
 
+    // ==================== FILE OPERATION UTILITIES ====================
+
+    /**
+     * Determine if this is a single file operation
+     */
+    isSingleFileOperation(data) {
+        // Single file if no operations array or only one operation
+        if (!data.operations) return true;
+        return data.operations.length === 1;
+    }
+
+    /**
+     * Get file icon based on file extension
+     */
+    getFileIcon(filePath) {
+        if (!filePath) return '📄';
+        
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        const iconMap = {
+            // Code files
+            'js': '🟨',
+            'jsx': '⚛️',
+            'ts': '🔷',
+            'tsx': '⚛️',
+            'py': '🐍',
+            'java': '☕',
+            'cpp': '⚡',
+            'c': '⚡',
+            'cs': '#️⃣',
+            'php': '🐘',
+            'rb': '💎',
+            'go': '🐹',
+            'rs': '🦀',
+            'swift': '🦉',
+            'kt': '🅺',
+            'scala': '🎯',
+            
+            // Web files
+            'html': '🌐',
+            'htm': '🌐',
+            'css': '🎨',
+            'scss': '🎨',
+            'sass': '🎨',
+            'less': '🎨',
+            'vue': '💚',
+            
+            // Config files
+            'json': '📋',
+            'xml': '📄',
+            'yaml': '⚙️',
+            'yml': '⚙️',
+            'toml': '⚙️',
+            'ini': '⚙️',
+            'conf': '⚙️',
+            'config': '⚙️',
+            
+            // Documentation
+            'md': '📝',
+            'txt': '📃',
+            'rtf': '📃',
+            'pdf': '📕',
+            'doc': '📘',
+            'docx': '📘',
+            
+            // Images
+            'jpg': '🖼️',
+            'jpeg': '🖼️',
+            'png': '🖼️',
+            'gif': '🖼️',
+            'svg': '🎨',
+            'webp': '🖼️',
+            'ico': '🖼️',
+            
+            // Archives
+            'zip': '🗜️',
+            'tar': '🗜️',
+            'gz': '🗜️',
+            'rar': '🗜️',
+            '7z': '🗜️',
+            
+            // Other
+            'sql': '🗃️',
+            'db': '🗃️',
+            'log': '📊',
+            'env': '🔐',
+            'lock': '🔒'
+        };
+        
+        return iconMap[ext] || '📄';
+    }
+
+    /**
+     * Get file type description
+     */
+    getFileType(filePath) {
+        if (!filePath) return null;
+        
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        const typeMap = {
+            'js': 'JavaScript',
+            'jsx': 'React JSX',
+            'ts': 'TypeScript',
+            'tsx': 'React TSX',
+            'py': 'Python',
+            'java': 'Java',
+            'cpp': 'C++',
+            'c': 'C',
+            'cs': 'C#',
+            'php': 'PHP',
+            'rb': 'Ruby',
+            'go': 'Go',
+            'rs': 'Rust',
+            'html': 'HTML',
+            'css': 'CSS',
+            'scss': 'SCSS',
+            'json': 'JSON',
+            'xml': 'XML',
+            'yaml': 'YAML',
+            'yml': 'YAML',
+            'md': 'Markdown',
+            'txt': 'Text',
+            'sql': 'SQL',
+            'log': 'Log File'
+        };
+        
+        return typeMap[ext] || null;
+    }
+
+    /**
+     * Check if file should show inline preview
+     */
+    shouldShowInlinePreview(data) {
+        // Show preview for single file text operations
+        return this.isSingleFileOperation(data) && this.isTextFile(data.file_path);
+    }
+
+    /**
+     * Check if file is a text file suitable for preview
+     */
+    isTextFile(filePath) {
+        if (!filePath) return false;
+        
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        const textExtensions = [
+            'txt', 'md', 'json', 'xml', 'yaml', 'yml', 'ini', 'conf', 'config',
+            'js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c', 'cs', 'php', 'rb',
+            'go', 'rs', 'swift', 'kt', 'scala', 'html', 'htm', 'css', 'scss', 'sass',
+            'less', 'vue', 'sql', 'log', 'env', 'gitignore', 'dockerignore'
+        ];
+        
+        return textExtensions.includes(ext);
+    }
+
+    /**
+     * Toggle inline preview for a file
+     */
+    async toggleInlinePreview(filePath, buttonElement) {
+        const containerId = `preview-${this.generatePreviewId(filePath)}`;
+        const container = document.getElementById(containerId);
+        
+        if (!container) {
+            console.warn('Preview container not found');
+            return;
+        }
+        
+        if (container.style.display === 'none') {
+            // Show preview
+            container.style.display = 'block';
+            buttonElement.innerHTML = '📖 Hide Preview';
+            await this.loadInlinePreview(filePath, container);
+        } else {
+            // Hide preview
+            container.style.display = 'none';
+            buttonElement.innerHTML = '📖 Quick Preview';
+        }
+    }
+
+    /**
+     * Load inline preview content
+     */
+    async loadInlinePreview(filePath, container) {
+        try {
+            // This would typically make an API call to get file contents
+            // For now, show a placeholder
+            container.innerHTML = `
+                <div class="inline-preview-header">
+                    <span class="preview-label">Quick Preview:</span>
+                    <span class="preview-file">${filePath}</span>
+                </div>
+                <div class="inline-preview-content">
+                    <div class="preview-note">
+                        💡 Inline preview feature ready - API integration needed
+                        <br>Click "View File Contents" for full syntax-highlighted view
+                    </div>
+                </div>
+            `;
+        } catch (error) {
+            container.innerHTML = `
+                <div class="inline-preview-error">
+                    ❌ Could not load preview: ${error.message}
+                </div>
+            `;
+        }
+    }
+
+    /**
+     * Generate a unique ID for preview containers
+     */
+    generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
+    }
+
+    /**
+     * Generate preview ID based on file path
+     */
+    generatePreviewId(filePath) {
+        return btoa(filePath).replace(/[^a-zA-Z0-9]/g, '');
+    }
+
     // ==================== UTILITY METHODS ====================
 
     /**
@@ -1285,6 +1553,112 @@ class UnifiedDataViewer {
         div.textContent = text;
         return div.innerHTML;
     }
+    
+    /**
+     * Toggle JSON section visibility and update global state
+     * WHY: Maintains sticky state across all JSON sections for consistent behavior
+     * @param {string} sectionId - ID of the specific section being toggled
+     * @param {HTMLElement} button - The button element that was clicked
+     */
+    toggleJsonSection(sectionId, button) {
+        // Toggle the global state
+        this.globalJsonExpanded = !this.globalJsonExpanded;
+        
+        // Persist the preference to localStorage
+        localStorage.setItem('dashboard-json-expanded', this.globalJsonExpanded.toString());
+        
+        // Update ALL JSON sections on the page
+        this.updateAllJsonSections();
+        
+        // Dispatch event to notify other components (like module-viewer) of the change
+        document.dispatchEvent(new CustomEvent('jsonToggleChanged', {
+            detail: { expanded: this.globalJsonExpanded }
+        }));
+    }
+    
+    /**
+     * Toggle Full Event Data section visibility and update state
+     * WHY: Maintains separate sticky state for Full Event Data sections
+     * @param {string} sectionId - ID of the specific section being toggled
+     * @param {HTMLElement} button - The button element that was clicked
+     */
+    toggleFullEventSection(sectionId, button) {
+        // Toggle the full event data state
+        this.fullEventDataExpanded = !this.fullEventDataExpanded;
+        
+        // Persist the preference to localStorage
+        localStorage.setItem('dashboard-full-event-expanded', this.fullEventDataExpanded.toString());
+        
+        // Update ALL Full Event sections on the page
+        this.updateAllFullEventSections();
+        
+        // Dispatch event to notify other components of the change
+        document.dispatchEvent(new CustomEvent('fullEventToggleChanged', {
+            detail: { expanded: this.fullEventDataExpanded }
+        }));
+    }
+    
+    /**
+     * Update all JSON sections on the page to match global state
+     * WHY: Ensures all "Structured Data" sections maintain consistent visibility
+     */
+    updateAllJsonSections() {
+        // Find all unified JSON sections (NOT full event sections)
+        const allJsonContents = document.querySelectorAll('.unified-json-content');
+        const allJsonButtons = document.querySelectorAll('.unified-json-toggle');
+        
+        // Update each JSON section
+        allJsonContents.forEach(content => {
+            if (this.globalJsonExpanded) {
+                content.style.display = 'block';
+            } else {
+                content.style.display = 'none';
+            }
+        });
+        
+        // Update all button states
+        allJsonButtons.forEach(button => {
+            const title = button.textContent.substring(2); // Remove arrow
+            if (this.globalJsonExpanded) {
+                button.innerHTML = '▼ ' + title;
+                button.classList.add('expanded');
+            } else {
+                button.innerHTML = '▶ ' + title;
+                button.classList.remove('expanded');
+            }
+        });
+    }
+    
+    /**
+     * Update all Full Event Data sections on the page to match state
+     * WHY: Ensures all "Full Event Data" sections maintain consistent visibility
+     */
+    updateAllFullEventSections() {
+        // Find all full event sections
+        const allFullEventContents = document.querySelectorAll('.full-event-content');
+        const allFullEventButtons = document.querySelectorAll('.full-event-toggle');
+        
+        // Update each full event section
+        allFullEventContents.forEach(content => {
+            if (this.fullEventDataExpanded) {
+                content.style.display = 'block';
+            } else {
+                content.style.display = 'none';
+            }
+        });
+        
+        // Update all button states
+        allFullEventButtons.forEach(button => {
+            const title = button.textContent.substring(2); // Remove arrow
+            if (this.fullEventDataExpanded) {
+                button.innerHTML = '▼ ' + title;
+                button.classList.add('expanded');
+            } else {
+                button.innerHTML = '▶ ' + title;
+                button.classList.remove('expanded');
+            }
+        });
+    }
 
     /**
      * Create a collapsible JSON viewer for secondary details
@@ -1297,22 +1671,28 @@ class UnifiedDataViewer {
         // Filter out sensitive or overly verbose properties
         const cleanData = this.cleanDataForDisplay(data);
         
+        // Determine which state to use based on title
+        // "Full Event Data" and similar titles use the fullEventDataExpanded state
+        // Other titles use the global JSON state (for backward compatibility)
+        const isFullEventData = title.includes('Full Event') || title.includes('Full Details') || 
+                               title.includes('Full Agent') || title.includes('Full Tool');
+        const isExpanded = isFullEventData ? this.fullEventDataExpanded : this.globalJsonExpanded;
+        const display = isExpanded ? 'block' : 'none';
+        const arrow = isExpanded ? '▼' : '▶';
+        const expandedClass = isExpanded ? 'expanded' : '';
+        
+        // Use different toggle function based on section type
+        const toggleFunction = isFullEventData ? 'toggleFullEventSection' : 'toggleJsonSection';
+        
         return `
             <div class="collapsible-json-section">
-                <button class="collapsible-json-toggle" onclick="
-                    const content = document.getElementById('${sectionId}');
-                    const button = this;
-                    if (content.style.display === 'none' || content.style.display === '') {
-                        content.style.display = 'block';
-                        button.classList.add('expanded');
-                        button.innerHTML = '▼ ${title}';
-                    } else {
-                        content.style.display = 'none';
-                        button.classList.remove('expanded');
-                        button.innerHTML = '▶ ${title}';
-                    }
-                ">▶ ${title}</button>
-                <div id="${sectionId}" class="collapsible-json-content" style="display: none;">
+                <button class="collapsible-json-toggle ${isFullEventData ? 'full-event-toggle' : 'unified-json-toggle'} ${expandedClass}" 
+                        data-section-id="${sectionId}"
+                        data-is-full-event="${isFullEventData}"
+                        onclick="window.unifiedDataViewer.${toggleFunction}('${sectionId}', this)">
+                    ${arrow} ${title}
+                </button>
+                <div id="${sectionId}" class="collapsible-json-content ${isFullEventData ? 'full-event-content' : 'unified-json-content'}" style="display: ${display};">
                     <pre class="json-viewer">${this.escapeHtml(JSON.stringify(cleanData, null, 2))}</pre>
                 </div>
             </div>
@@ -1389,4 +1769,56 @@ export { UnifiedDataViewer };
 export default UnifiedDataViewer;
 
 // Make globally available for non-module usage
-window.UnifiedDataViewer = UnifiedDataViewer;
+window.UnifiedDataViewer = UnifiedDataViewer;
+
+// Create a global instance immediately for inline onclick handlers
+// This ensures the instance is available when HTML is rendered dynamically
+if (typeof window !== 'undefined') {
+    // Always create/update the global instance
+    window.unifiedDataViewer = new UnifiedDataViewer();
+    
+    // Also expose the methods directly on window as a fallback
+    window.toggleFullEventSection = function(sectionId, button) {
+        if (window.unifiedDataViewer) {
+            window.unifiedDataViewer.toggleFullEventSection(sectionId, button);
+        }
+    };
+    
+    window.toggleJsonSection = function(sectionId, button) {
+        if (window.unifiedDataViewer) {
+            window.unifiedDataViewer.toggleJsonSection(sectionId, button);
+        }
+    };
+}
+
+// Create a global instance for inline preview functionality
+if (typeof window !== 'undefined') {
+    window.addEventListener('DOMContentLoaded', function() {
+        // Create global instance if one doesn't exist
+        if (!window.unifiedDataViewer) {
+            window.unifiedDataViewer = new UnifiedDataViewer();
+        }
+        
+        // Add keyboard shortcuts for file operations
+        document.addEventListener('keydown', function(e) {
+            // Ctrl/Cmd + Click on file paths to open file viewer
+            if ((e.ctrlKey || e.metaKey) && e.target.classList.contains('clickable-file-path')) {
+                e.preventDefault();
+                const filePath = e.target.textContent.trim();
+                if (window.showFileViewerModal) {
+                    window.showFileViewerModal(filePath);
+                }
+            }
+            
+            // 'V' key to open file viewer when hovering over clickable file paths
+            if (e.key.toLowerCase() === 'v' && document.querySelector('.clickable-file-path:hover')) {
+                const hoveredPath = document.querySelector('.clickable-file-path:hover');
+                if (hoveredPath && window.showFileViewerModal) {
+                    e.preventDefault();
+                    const filePath = hoveredPath.textContent.trim();
+                    window.showFileViewerModal(filePath);
+                }
+            }
+        });
+    });
+}

claude_mpm/dashboard/static/js/components/working-directory.js

@@ -177,6 +177,12 @@ class WorkingDirectoryManager {
         console.log('[WORKING-DIR-DEBUG] setWorkingDirectory called with:', this.repr(dir));
 
         this.currentWorkingDir = dir;
+        
+        // Store in session storage for persistence during the session
+        if (dir && this.validateDirectoryPath(dir)) {
+            sessionStorage.setItem('currentWorkingDirectory', dir);
+            console.log('[WORKING-DIR-DEBUG] Stored working directory in session storage:', dir);
+        }
 
         // Update UI
         const pathElement = document.getElementById('working-dir-path');
@@ -355,12 +361,21 @@ class WorkingDirectoryManager {
         // Fallback to a reasonable default - try to get the current project directory
         // This should be set when the dashboard initializes
 
-        // Try getting from the browser's URL or any other hint about the current project
-        if (window.location.pathname.includes('claude-mpm')) {
-            // We can infer we're in a claude-mpm project
-            const cwdFallback = '/Users/masa/Projects/claude-mpm';
-            console.log('[WORKING-DIR-DEBUG] Using inferred project path as fallback:', cwdFallback);
-            return cwdFallback;
+        // Try getting from events that have a working directory
+        if (window.socketClient && window.socketClient.events) {
+            // Look for the most recent event with a working directory
+            const eventsWithDir = window.socketClient.events
+                .filter(e => e.data && (e.data.working_directory || e.data.cwd || e.data.working_dir))
+                .reverse();
+            
+            if (eventsWithDir.length > 0) {
+                const recentEvent = eventsWithDir[0];
+                const dir = recentEvent.data.working_directory || 
+                           recentEvent.data.cwd || 
+                           recentEvent.data.working_dir;
+                console.log('[WORKING-DIR-DEBUG] Using working directory from recent event:', dir);
+                return dir;
+            }
         }
         const workingDirPath = document.getElementById('working-dir-path');
         if (workingDirPath?.textContent?.trim()) {
@@ -372,9 +387,26 @@ class WorkingDirectoryManager {
             }
         }
 
-        // Final fallback to current directory indicator
-        const fallback = process?.cwd?.() || '/Users/masa/Projects/claude-mpm';
-        console.log('[WORKING-DIR-DEBUG] Using hard-coded fallback directory:', this.repr(fallback));
+        // Try to get from session storage or environment
+        const sessionWorkingDir = sessionStorage.getItem('currentWorkingDirectory');
+        if (sessionWorkingDir && this.validateDirectoryPath(sessionWorkingDir)) {
+            console.log('[WORKING-DIR-DEBUG] Using session storage working directory:', this.repr(sessionWorkingDir));
+            return sessionWorkingDir;
+        }
+        
+        // Try to get the current working directory from environment/process
+        // This should be the directory where claude-mpm was started from
+        const processWorkingDir = window.processWorkingDirectory || process?.cwd?.() || null;
+        if (processWorkingDir && this.validateDirectoryPath(processWorkingDir)) {
+            console.log('[WORKING-DIR-DEBUG] Using process working directory:', this.repr(processWorkingDir));
+            return processWorkingDir;
+        }
+        
+        // Final fallback - use current working directory if available, otherwise home directory
+        // Never default to root "/" as it's not a useful default for code viewing
+        const homeDir = window.homeDirectory || process?.env?.HOME || process?.env?.USERPROFILE || null;
+        const fallback = homeDir || process?.cwd?.() || os?.homedir?.() || '/Users/masa';
+        console.log('[WORKING-DIR-DEBUG] Using fallback directory (home or cwd):', this.repr(fallback));
         return fallback;
     }
 
@@ -883,3 +915,6 @@ class WorkingDirectoryManager {
 // ES6 Module export
 export { WorkingDirectoryManager };
 export default WorkingDirectoryManager;
+
+// Make WorkingDirectoryManager globally available for dist/dashboard.js
+window.WorkingDirectoryManager = WorkingDirectoryManager;