claude-mpm 4.2.13__py3-none-any.whl → 4.2.14__py3-none-any.whl

claude_mpm/dashboard/static/js/components/code-tree/tree-utils.js

@@ -0,0 +1,435 @@
+/**
+ * Tree Utility Functions
+ * 
+ * Common utility functions extracted from code-tree.js
+ * Provides formatting, file type detection, and other helper functions.
+ * 
+ * @module tree-utils
+ */
+
+const treeUtils = {
+    /**
+     * Get complexity level from numeric complexity
+     * @param {number} complexity - Complexity value
+     * @returns {string} Complexity level (low/medium/high)
+     */
+    getComplexityLevel(complexity) {
+        if (complexity <= 5) return 'low';
+        if (complexity <= 10) return 'medium';
+        return 'high';
+    },
+
+    /**
+     * Format file size for display
+     * @param {number} bytes - Size in bytes
+     * @returns {string} Formatted size string
+     */
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    },
+
+    /**
+     * Get file extension from path
+     * @param {string} filePath - File path
+     * @returns {string} File extension (lowercase)
+     */
+    getFileExtension(filePath) {
+        if (!filePath) return '';
+        const parts = filePath.split('.');
+        return parts.length > 1 ? parts.pop().toLowerCase() : '';
+    },
+
+    /**
+     * Get descriptive file type for user messages
+     * @param {string} fileName - File name
+     * @returns {string} Human-readable file type description
+     */
+    getFileTypeDescription(fileName) {
+        if (!fileName) return 'File';
+
+        const ext = this.getFileExtension(fileName);
+        const baseName = fileName.toLowerCase();
+
+        // Special cases
+        if (baseName.endsWith('__init__.py')) {
+            return 'Python package initialization';
+        }
+        if (baseName === 'makefile') {
+            return 'Build configuration';
+        }
+        if (baseName.includes('config') || baseName.includes('settings')) {
+            return 'Configuration file';
+        }
+        if (baseName.includes('test') || baseName.includes('spec')) {
+            return 'Test file';
+        }
+
+        // By extension
+        const typeMap = {
+            'py': 'Python file',
+            'js': 'JavaScript file',
+            'ts': 'TypeScript file',
+            'jsx': 'React component',
+            'tsx': 'React TypeScript component',
+            'html': 'HTML document',
+            'css': 'Stylesheet',
+            'scss': 'SCSS stylesheet',
+            'sass': 'Sass stylesheet',
+            'less': 'LESS stylesheet',
+            'json': 'JSON data',
+            'md': 'Markdown document',
+            'txt': 'Text file',
+            'yml': 'YAML configuration',
+            'yaml': 'YAML configuration',
+            'xml': 'XML document',
+            'sql': 'SQL script',
+            'sh': 'Shell script',
+            'bash': 'Bash script',
+            'toml': 'TOML configuration',
+            'ini': 'INI configuration',
+            'env': 'Environment variables',
+            'dockerfile': 'Docker configuration',
+            'makefile': 'Build configuration',
+            'gitignore': 'Git ignore rules',
+            'readme': 'Documentation'
+        };
+
+        return typeMap[ext] || typeMap[baseName] || 'File';
+    },
+
+    /**
+     * Get file icon based on file type
+     * @param {string} filePath - File path
+     * @returns {string} Unicode emoji icon
+     */
+    getFileIcon(filePath) {
+        if (!filePath) return '📄';
+
+        const ext = this.getFileExtension(filePath);
+        const fileName = filePath.toLowerCase().split('/').pop();
+        
+        const iconMap = {
+            // Programming languages
+            'py': '🐍',
+            'js': '📜',
+            'ts': '📘',
+            'jsx': '⚛️',
+            'tsx': '⚛️',
+            'java': '☕',
+            'c': '🔷',
+            'cpp': '🔷',
+            'cs': '🔷',
+            'go': '🐹',
+            'rs': '🦀',
+            'rb': '💎',
+            'php': '🐘',
+            'swift': '🦉',
+            'kt': '🎯',
+            
+            // Web files
+            'html': '🌐',
+            'css': '🎨',
+            'scss': '🎨',
+            'sass': '🎨',
+            'less': '🎨',
+            
+            // Data files
+            'json': '📋',
+            'xml': '📰',
+            'csv': '📊',
+            'sql': '🗃️',
+            
+            // Documentation
+            'md': '📝',
+            'txt': '📄',
+            'pdf': '📑',
+            'doc': '📃',
+            'docx': '📃',
+            
+            // Configuration
+            'yml': '⚙️',
+            'yaml': '⚙️',
+            'toml': '⚙️',
+            'ini': '⚙️',
+            'env': '🔐',
+            
+            // Scripts
+            'sh': '🐚',
+            'bash': '🐚',
+            'bat': '🖥️',
+            'ps1': '🖥️',
+            
+            // Special files
+            'dockerfile': '🐳',
+            'docker-compose.yml': '🐳',
+            'makefile': '🔨',
+            'package.json': '📦',
+            'requirements.txt': '📦',
+            'gitignore': '🚫',
+            '.gitignore': '🚫',
+            'readme': '📖',
+            'readme.md': '📖',
+            'license': '📜',
+            'license.md': '📜'
+        };
+
+        // Check full filename first, then extension
+        return iconMap[fileName] || iconMap[ext] || '📄';
+    },
+
+    /**
+     * Count different types of AST elements
+     * @param {Array} elements - AST elements
+     * @returns {Object} Element counts
+     */
+    getElementCounts(elements) {
+        const counts = {
+            classes: 0,
+            functions: 0,
+            methods: 0,
+            total: elements.length
+        };
+
+        elements.forEach(elem => {
+            if (elem.type === 'class') {
+                counts.classes++;
+                if (elem.methods) {
+                    counts.methods += elem.methods.length;
+                }
+            } else if (elem.type === 'function') {
+                counts.functions++;
+            }
+        });
+
+        return counts;
+    },
+
+    /**
+     * Format element counts into a readable summary
+     * @param {Object} counts - Element counts
+     * @returns {string} Formatted summary
+     */
+    formatElementSummary(counts) {
+        const parts = [];
+
+        if (counts.classes > 0) {
+            parts.push(`${counts.classes} class${counts.classes !== 1 ? 'es' : ''}`);
+        }
+        if (counts.functions > 0) {
+            parts.push(`${counts.functions} function${counts.functions !== 1 ? 's' : ''}`);
+        }
+        if (counts.methods > 0) {
+            parts.push(`${counts.methods} method${counts.methods !== 1 ? 's' : ''}`);
+        }
+
+        if (parts.length === 0) {
+            return 'Structural elements for tree view';
+        } else if (parts.length === 1) {
+            return parts[0] + ' found';
+        } else if (parts.length === 2) {
+            return parts.join(' and ') + ' found';
+        } else {
+            return parts.slice(0, -1).join(', ') + ', and ' + parts[parts.length - 1] + ' found';
+        }
+    },
+
+    /**
+     * Get node type from data
+     * @param {Object} node - Node data
+     * @returns {string} Node type
+     */
+    getNodeType(node) {
+        if (!node) return 'unknown';
+        if (node.type) return node.type;
+        if (node.children && node.children.length > 0) return 'directory';
+        if (node.path) return 'file';
+        return 'unknown';
+    },
+
+    /**
+     * Check if node is a directory
+     * @param {Object} node - Node or node data
+     * @returns {boolean} True if directory
+     */
+    isNodeDirectory(node) {
+        if (!node) return false;
+        
+        // Handle D3 node structure
+        if (node.data) {
+            node = node.data;
+        }
+        
+        return node.type === 'directory' || 
+               node.type === 'folder' || 
+               (node.children && node.children.length > 0) ||
+               node.isDirectory === true;
+    },
+
+    /**
+     * Get node icon for tree visualization
+     * @param {string} type - Node type
+     * @returns {string} Unicode icon
+     */
+    getNodeIcon(type) {
+        const icons = {
+            'module': '📦',
+            'class': '🏗️',
+            'function': '⚡',
+            'method': '🔧',
+            'property': '📌',
+            'directory': '📁',
+            'folder': '📁',
+            'file': '📄',
+            'python': '🐍',
+            'javascript': '📜',
+            'unknown': '❓'
+        };
+        return icons[type] || icons['unknown'];
+    },
+
+    /**
+     * Sort nodes for tree display
+     * @param {Array} nodes - Array of nodes
+     * @returns {Array} Sorted nodes
+     */
+    sortNodes(nodes) {
+        return nodes.sort((a, b) => {
+            // Directories first
+            const aIsDir = this.isNodeDirectory(a);
+            const bIsDir = this.isNodeDirectory(b);
+            
+            if (aIsDir && !bIsDir) return -1;
+            if (!aIsDir && bIsDir) return 1;
+            
+            // Then alphabetically
+            const aName = (a.name || a.data?.name || '').toLowerCase();
+            const bName = (b.name || b.data?.name || '').toLowerCase();
+            
+            return aName.localeCompare(bName);
+        });
+    },
+
+    /**
+     * Filter nodes based on criteria
+     * @param {Array} nodes - Array of nodes
+     * @param {Object} criteria - Filter criteria
+     * @returns {Array} Filtered nodes
+     */
+    filterNodes(nodes, criteria = {}) {
+        return nodes.filter(node => {
+            // Language filter
+            if (criteria.language && node.language !== criteria.language) {
+                return false;
+            }
+            
+            // Search term filter
+            if (criteria.searchTerm) {
+                const term = criteria.searchTerm.toLowerCase();
+                const name = (node.name || '').toLowerCase();
+                const path = (node.path || '').toLowerCase();
+                
+                if (!name.includes(term) && !path.includes(term)) {
+                    return false;
+                }
+            }
+            
+            // Complexity filter
+            if (criteria.minComplexity && node.complexity < criteria.minComplexity) {
+                return false;
+            }
+            if (criteria.maxComplexity && node.complexity > criteria.maxComplexity) {
+                return false;
+            }
+            
+            return true;
+        });
+    },
+
+    /**
+     * Calculate tree statistics
+     * @param {Object} node - Root node
+     * @returns {Object} Tree statistics
+     */
+    calculateTreeStats(node) {
+        const stats = {
+            files: 0,
+            directories: 0,
+            classes: 0,
+            functions: 0,
+            methods: 0,
+            lines: 0,
+            maxDepth: 0
+        };
+
+        const traverse = (n, depth = 0) => {
+            stats.maxDepth = Math.max(stats.maxDepth, depth);
+            
+            if (this.isNodeDirectory(n)) {
+                stats.directories++;
+            } else {
+                stats.files++;
+            }
+            
+            if (n.type === 'class') stats.classes++;
+            if (n.type === 'function') stats.functions++;
+            if (n.type === 'method') stats.methods++;
+            if (n.lines) stats.lines += n.lines;
+            
+            if (n.children) {
+                n.children.forEach(child => traverse(child, depth + 1));
+            }
+        };
+
+        traverse(node);
+        return stats;
+    },
+
+    /**
+     * Get color based on complexity
+     * @param {number} complexity - Complexity value
+     * @returns {string} Color hex code
+     */
+    getComplexityColor(complexity) {
+        if (!complexity || complexity <= 5) {
+            return '#52c41a'; // Green - low complexity
+        } else if (complexity <= 10) {
+            return '#faad14'; // Orange - medium complexity
+        } else {
+            return '#f5222d'; // Red - high complexity
+        }
+    },
+
+    /**
+     * Format node path for display
+     * @param {Object} node - Node object
+     * @returns {string} Formatted path
+     */
+    formatNodePath(node) {
+        const parts = [];
+        let current = node;
+        
+        while (current) {
+            if (current.data?.name) {
+                parts.unshift(current.data.name);
+            } else if (current.name) {
+                parts.unshift(current.name);
+            }
+            current = current.parent;
+        }
+        
+        return parts.join(' / ');
+    }
+};
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = treeUtils;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => treeUtils);
+} else {
+    window.treeUtils = treeUtils;
+}

claude_mpm/dashboard/static/js/components/code-tree.js

@@ -13,10 +13,34 @@
  * 
  * Version: 2025-08-29T15:30:00Z - ALL CENTERING REMOVED
  * Last Update: Completely disabled tree centering/movement on node clicks
+ * 
+ * REFACTORED: 2025-09-05 - Extracted utilities, constants, search, and breadcrumb modules
  */
 
+// Load dependencies - these should be loaded in the HTML before this file
+// Shared services
+// <script src="/static/js/shared/tooltip-service.js"></script>
+// <script src="/static/js/shared/dom-helpers.js"></script>
+// <script src="/static/js/shared/event-bus.js"></script>
+// <script src="/static/js/shared/logger.js"></script>
+// Tree modules
+// <script src="/static/js/components/code-tree/tree-utils.js"></script>
+// <script src="/static/js/components/code-tree/tree-constants.js"></script>
+// <script src="/static/js/components/code-tree/tree-search.js"></script>
+// <script src="/static/js/components/code-tree/tree-breadcrumb.js"></script>
+
 class CodeTree {
     constructor() {
+        // Initialize services
+        this.tooltipService = window.tooltipService || null;
+        this.domHelpers = window.domHelpers || null;
+        this.eventBus = window.eventBus || null;
+        this.logger = window.logger ? window.logger.createComponentLogger('CodeTree') : console;
+        this.treeUtils = window.treeUtils || null;
+        this.treeConstants = window.treeConstants || {};
+        this.treeSearch = window.treeSearch || null;
+        this.treeBreadcrumb = window.treeBreadcrumb || null;
+        
         this.container = null;
         this.svg = null;
         this.treeData = null;
@@ -31,14 +55,14 @@ class CodeTree {
             methods: 0,
             lines: 0
         };
-        // Radial layout settings
+        // Radial layout settings - use constants if available
         this.isRadialLayout = false;  // Toggle for radial vs linear layout - defaulting to linear for better readability
-        this.margin = {top: 20, right: 20, bottom: 20, left: 20};
-        this.width = 960 - this.margin.left - this.margin.right;
-        this.height = 600 - this.margin.top - this.margin.bottom;
+        this.margin = this.treeConstants.DEFAULT_MARGIN || {top: 20, right: 20, bottom: 20, left: 20};
+        this.width = (this.treeConstants.DEFAULT_WIDTH || 960) - this.margin.left - this.margin.right;
+        this.height = (this.treeConstants.DEFAULT_HEIGHT || 600) - this.margin.top - this.margin.bottom;
         this.radius = Math.min(this.width, this.height) / 2;
         this.nodeId = 0;
-        this.duration = 750;
+        this.duration = this.treeConstants.ANIMATION_DURATION || 750;
         this.languageFilter = 'all';
         this.searchTerm = '';
         this.tooltip = null;

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

@@ -248,7 +248,11 @@ class FileViewer {
      * Show the file viewer with file content
      */
     async show(filePath) {
+        console.log('[FileViewer] show() called with path:', filePath);
+        console.log('[FileViewer] initialized:', this.initialized);
+        
         if (!this.initialized) {
+            console.log('[FileViewer] Not initialized, initializing now...');
             this.initialize();
         }
 
@@ -258,6 +262,7 @@ class FileViewer {
         // Update path
         document.getElementById('file-viewer-path').textContent = filePath;
         
+        console.log('[FileViewer] Modal shown, loading file content...');
         // Load file content
         await this.loadFileContent(filePath);
     }
@@ -276,8 +281,11 @@ class FileViewer {
     async loadFileContent(filePath) {
         const codeContent = document.getElementById('file-viewer-code-content');
         
+        console.log('[FileViewer] loadFileContent called with path:', filePath);
+        
         // Check cache first
         if (this.contentCache.has(filePath)) {
+            console.log('[FileViewer] Using cached content for:', filePath);
             this.displayContent(this.contentCache.get(filePath));
             return;
         }
@@ -286,35 +294,62 @@ class FileViewer {
         codeContent.textContent = 'Loading file content...';
         
         try {
-            // Try to fetch file content via API
-            const response = await fetch('/api/file', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ path: filePath })
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-
-            const data = await response.json();
-            
-            if (data.success && data.content !== undefined) {
-                // Cache the content
-                this.contentCache.set(filePath, data.content);
+            // Check if we have a socket connection available
+            if (window.socket && window.socket.connected) {
+                console.log('[FileViewer] Using Socket.IO to load file:', filePath);
+                
+                // Create a promise to wait for the response
+                const responsePromise = new Promise((resolve, reject) => {
+                    const timeoutId = setTimeout(() => {
+                        console.error('[FileViewer] Socket.IO request timed out for:', filePath);
+                        reject(new Error('Socket.IO request timed out'));
+                    }, 10000); // 10 second timeout
+                    
+                    // Set up one-time listener for the response
+                    window.socket.once('file_content_response', (data) => {
+                        clearTimeout(timeoutId);
+                        console.log('[FileViewer] Received file_content_response:', data);
+                        resolve(data);
+                    });
+                    
+                    // Emit the read_file event
+                    console.log('[FileViewer] Emitting read_file event with data:', {
+                        file_path: filePath,
+                        working_dir: window.workingDirectory || '/',
+                        max_size: 5 * 1024 * 1024  // 5MB limit
+                    });
+                    
+                    window.socket.emit('read_file', {
+                        file_path: filePath,
+                        working_dir: window.workingDirectory || '/',
+                        max_size: 5 * 1024 * 1024  // 5MB limit
+                    });
+                });
                 
-                // Display the content
-                this.displayContent(data.content);
+                // Wait for the response
+                const data = await responsePromise;
                 
-                // Update file info
-                this.updateFileInfo(data);
+                if (data.success && data.content !== undefined) {
+                    console.log('[FileViewer] Successfully loaded file content, caching...');
+                    // Cache the content
+                    this.contentCache.set(filePath, data.content);
+                    
+                    // Display the content
+                    this.displayContent(data.content);
+                    
+                    // Update file info
+                    this.updateFileInfo(data);
+                } else {
+                    console.error('[FileViewer] Server returned error:', data.error);
+                    throw new Error(data.error || 'Failed to load file content');
+                }
             } else {
-                throw new Error(data.error || 'Failed to load file content');
+                console.error('[FileViewer] No Socket.IO connection available');
+                throw new Error('No socket connection available. Please ensure the dashboard is connected to the monitoring server.');
             }
         } catch (error) {
-            console.error('Error loading file:', error);
+            console.error('[FileViewer] Error loading file:', error);
+            console.error('[FileViewer] Error stack:', error.stack);
             
             // If API fails, show error message with helpful information
             this.displayError(filePath, error.message);
@@ -516,9 +551,16 @@ class FileViewer {
 const fileViewer = new FileViewer();
 
 // Create global function for easy access
-window.showFileViewerModal = (filePath) => {
-    fileViewer.show(filePath);
-};
+// Only set if not already defined by dashboard.js
+if (!window.showFileViewerModal) {
+    window.showFileViewerModal = (filePath) => {
+        console.log('[FileViewer] showFileViewerModal called with path:', filePath);
+        fileViewer.show(filePath);
+    };
+}
+
+// Expose the singleton for debugging
+window.fileViewerInstance = fileViewer;
 
 // Export for use in other modules
 if (typeof window !== 'undefined') {

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

@@ -93,7 +93,7 @@ class SessionManager {
         const currentSelection = sessionSelect.value;
 
         // Get the default working directory from various sources
-        let defaultWorkingDir = '/Users/masa/Projects/claude-mpm';
+        let defaultWorkingDir = '/';
         
         // Try to get from working directory manager
         if (window.dashboard && window.dashboard.workingDirectoryManager) {

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

@@ -355,12 +355,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 +381,9 @@ 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));
+        // Final fallback to a generic path
+        const fallback = window.location.hostname === 'localhost' ? '/' : '/';
+        console.log('[WORKING-DIR-DEBUG] Using generic fallback directory:', this.repr(fallback));
         return fallback;
     }