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

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

@@ -0,0 +1,353 @@
+/**
+ * Tree Breadcrumb Navigation
+ * 
+ * Breadcrumb navigation and status display for the code tree.
+ * Provides path navigation and activity status updates.
+ * 
+ * @module tree-breadcrumb
+ */
+
+class TreeBreadcrumb {
+    constructor() {
+        this.container = null;
+        this.pathElement = null;
+        this.statusElement = null;
+        this.currentPath = '/';
+        this.workingDirectory = null;
+        this.navigationCallback = null;
+        this.maxSegments = 10;
+    }
+
+    /**
+     * Initialize breadcrumb component
+     * @param {string} containerId - Container element ID
+     * @param {Object} options - Configuration options
+     */
+    initialize(containerId, options = {}) {
+        this.container = document.getElementById(containerId);
+        if (!this.container) {
+            console.error(`Breadcrumb container not found: ${containerId}`);
+            return;
+        }
+
+        // Set options
+        this.maxSegments = options.maxSegments || 10;
+        this.navigationCallback = options.onNavigate || null;
+
+        // Create breadcrumb structure
+        this.createBreadcrumbStructure();
+    }
+
+    /**
+     * Create breadcrumb DOM structure
+     */
+    createBreadcrumbStructure() {
+        // Clear existing content
+        this.container.innerHTML = '';
+
+        // Create path navigation
+        const pathContainer = document.createElement('div');
+        pathContainer.className = 'tree-breadcrumb-path-container';
+        
+        this.pathElement = document.createElement('div');
+        this.pathElement.id = 'tree-breadcrumb-path';
+        this.pathElement.className = 'tree-breadcrumb-path';
+        pathContainer.appendChild(this.pathElement);
+
+        // Create status/activity display
+        const statusContainer = document.createElement('div');
+        statusContainer.className = 'tree-breadcrumb-status-container';
+        
+        this.statusElement = document.createElement('div');
+        this.statusElement.id = 'breadcrumb-content';
+        this.statusElement.className = 'breadcrumb-content';
+        statusContainer.appendChild(this.statusElement);
+
+        // Add to container
+        this.container.appendChild(pathContainer);
+        this.container.appendChild(statusContainer);
+    }
+
+    /**
+     * Set working directory
+     * @param {string} directory - Working directory path
+     */
+    setWorkingDirectory(directory) {
+        this.workingDirectory = directory;
+        this.updatePath(this.currentPath);
+    }
+
+    /**
+     * Update breadcrumb path
+     * @param {string} path - Current navigation path
+     */
+    updatePath(path) {
+        this.currentPath = path || '/';
+        
+        if (!this.pathElement) return;
+
+        // Clear existing path
+        this.pathElement.innerHTML = '';
+
+        if (!this.workingDirectory || 
+            this.workingDirectory === 'Loading...' || 
+            this.workingDirectory === 'Not selected') {
+            this.pathElement.textContent = 'No project selected';
+            return;
+        }
+
+        // Build path segments
+        const segments = this.buildSegments(this.currentPath);
+        
+        // Create clickable segments
+        segments.forEach((segment, index) => {
+            if (index > 0) {
+                const separator = document.createElement('span');
+                separator.className = 'breadcrumb-separator';
+                separator.textContent = '/';
+                this.pathElement.appendChild(separator);
+            }
+
+            const segmentElement = document.createElement('span');
+            segmentElement.className = index === segments.length - 1 ? 
+                'breadcrumb-segment current' : 'breadcrumb-segment';
+            segmentElement.textContent = segment.name;
+            
+            // Add click handler for non-current segments
+            if (index < segments.length - 1) {
+                segmentElement.style.cursor = 'pointer';
+                segmentElement.addEventListener('click', () => {
+                    this.navigateToSegment(segment.path);
+                });
+                
+                // Add hover effect
+                segmentElement.addEventListener('mouseenter', () => {
+                    segmentElement.classList.add('hover');
+                });
+                segmentElement.addEventListener('mouseleave', () => {
+                    segmentElement.classList.remove('hover');
+                });
+            }
+            
+            this.pathElement.appendChild(segmentElement);
+        });
+
+        // Add overflow handling for long paths
+        this.handlePathOverflow();
+    }
+
+    /**
+     * Build path segments from current path
+     * @param {string} path - Current path
+     * @returns {Array} Array of segment objects
+     */
+    buildSegments(path) {
+        const segments = [];
+        
+        // Add root/project segment
+        const projectName = this.workingDirectory.split('/').pop() || 'Root';
+        segments.push({
+            name: projectName,
+            path: '/'
+        });
+
+        // Add path segments if not at root
+        if (path && path !== '/') {
+            const pathParts = path.split('/').filter(p => p.length > 0);
+            let currentPath = '';
+            
+            pathParts.forEach(part => {
+                currentPath += '/' + part;
+                segments.push({
+                    name: part,
+                    path: currentPath
+                });
+            });
+        }
+
+        // Truncate if too many segments
+        if (segments.length > this.maxSegments) {
+            const truncated = [
+                segments[0],
+                { name: '...', path: null },
+                ...segments.slice(-(this.maxSegments - 2))
+            ];
+            return truncated;
+        }
+
+        return segments;
+    }
+
+    /**
+     * Navigate to a path segment
+     * @param {string} path - Path to navigate to
+     */
+    navigateToSegment(path) {
+        if (path === null) return; // Skip ellipsis
+        
+        this.currentPath = path;
+        this.updatePath(path);
+        
+        // Call navigation callback if provided
+        if (this.navigationCallback) {
+            this.navigationCallback(path);
+        }
+        
+        // Dispatch custom event
+        const event = new CustomEvent('breadcrumbNavigation', {
+            detail: { path }
+        });
+        document.dispatchEvent(event);
+    }
+
+    /**
+     * Update status/activity message
+     * @param {string} message - Status message
+     * @param {string} type - Message type (info/success/warning/error)
+     */
+    updateStatus(message, type = 'info') {
+        if (!this.statusElement) return;
+        
+        this.statusElement.textContent = message;
+        this.statusElement.className = `breadcrumb-content breadcrumb-${type}`;
+        
+        // Add fade animation for status changes
+        this.statusElement.style.animation = 'none';
+        setTimeout(() => {
+            this.statusElement.style.animation = 'fadeIn 0.3s ease-in';
+        }, 10);
+    }
+
+    /**
+     * Update activity ticker with rotating messages
+     * @param {string} message - Activity message
+     * @param {string} type - Message type
+     */
+    updateActivityTicker(message, type = 'info') {
+        this.updateStatus(message, type);
+        
+        // Optional: Add to activity history
+        if (!this.activityHistory) {
+            this.activityHistory = [];
+        }
+        
+        this.activityHistory.push({
+            message,
+            type,
+            timestamp: Date.now()
+        });
+        
+        // Keep only last 100 activities
+        if (this.activityHistory.length > 100) {
+            this.activityHistory.shift();
+        }
+    }
+
+    /**
+     * Handle path overflow for long paths
+     */
+    handlePathOverflow() {
+        if (!this.pathElement) return;
+        
+        // Check if path overflows
+        if (this.pathElement.scrollWidth > this.pathElement.clientWidth) {
+            // Add scroll buttons or implement horizontal scroll
+            this.pathElement.style.overflowX = 'auto';
+            this.pathElement.classList.add('overflow');
+        } else {
+            this.pathElement.style.overflowX = 'hidden';
+            this.pathElement.classList.remove('overflow');
+        }
+    }
+
+    /**
+     * Show loading state
+     * @param {string} message - Loading message
+     */
+    showLoading(message = 'Loading...') {
+        this.updateStatus(message, 'info');
+        
+        // Add loading spinner if needed
+        if (this.statusElement) {
+            const spinner = document.createElement('span');
+            spinner.className = 'breadcrumb-spinner';
+            spinner.innerHTML = ' ⏳';
+            this.statusElement.appendChild(spinner);
+        }
+    }
+
+    /**
+     * Hide loading state
+     */
+    hideLoading() {
+        if (this.statusElement) {
+            const spinner = this.statusElement.querySelector('.breadcrumb-spinner');
+            if (spinner) {
+                spinner.remove();
+            }
+        }
+    }
+
+    /**
+     * Get current path
+     * @returns {string} Current path
+     */
+    getCurrentPath() {
+        return this.currentPath;
+    }
+
+    /**
+     * Get activity history
+     * @returns {Array} Activity history
+     */
+    getActivityHistory() {
+        return this.activityHistory || [];
+    }
+
+    /**
+     * Clear breadcrumb
+     */
+    clear() {
+        this.currentPath = '/';
+        this.workingDirectory = null;
+        
+        if (this.pathElement) {
+            this.pathElement.innerHTML = '';
+        }
+        
+        if (this.statusElement) {
+            this.statusElement.textContent = '';
+            this.statusElement.className = 'breadcrumb-content';
+        }
+        
+        this.activityHistory = [];
+    }
+
+    /**
+     * Destroy breadcrumb component
+     */
+    destroy() {
+        this.clear();
+        
+        if (this.container) {
+            this.container.innerHTML = '';
+        }
+        
+        this.container = null;
+        this.pathElement = null;
+        this.statusElement = null;
+        this.navigationCallback = null;
+    }
+}
+
+// Export as singleton for consistent state
+const treeBreadcrumb = new TreeBreadcrumb();
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = treeBreadcrumb;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => treeBreadcrumb);
+} else {
+    window.treeBreadcrumb = treeBreadcrumb;
+}

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

@@ -0,0 +1,235 @@
+/**
+ * Tree Constants and Configuration
+ * 
+ * Constants and default configurations for the code tree visualization.
+ * 
+ * @module tree-constants
+ */
+
+const treeConstants = {
+    // Layout dimensions
+    DEFAULT_MARGIN: { top: 20, right: 20, bottom: 20, left: 20 },
+    DEFAULT_WIDTH: 960,
+    DEFAULT_HEIGHT: 600,
+    
+    // Animation settings
+    ANIMATION_DURATION: 750,
+    TOOLTIP_FADE_DURATION: 200,
+    TOOLTIP_HIDE_DELAY: 500,
+    
+    // Node visualization
+    NODE_RADIUS: {
+        DEFAULT: 6,
+        SMALL: 4,
+        LARGE: 8,
+        EXPANDED: 10
+    },
+    
+    // Colors
+    COLORS: {
+        // Complexity colors
+        COMPLEXITY_LOW: '#52c41a',      // Green
+        COMPLEXITY_MEDIUM: '#faad14',   // Orange
+        COMPLEXITY_HIGH: '#f5222d',      // Red
+        
+        // Node state colors
+        NODE_DEFAULT: '#69b7ff',
+        NODE_SELECTED: '#1890ff',
+        NODE_HOVER: '#40a9ff',
+        NODE_LOADING: '#ffc53d',
+        NODE_ERROR: '#ff4d4f',
+        
+        // Link colors
+        LINK_DEFAULT: '#d9d9d9',
+        LINK_SELECTED: '#1890ff',
+        
+        // Text colors
+        TEXT_PRIMARY: '#262626',
+        TEXT_SECONDARY: '#8c8c8c',
+        TEXT_DISABLED: '#bfbfbf'
+    },
+    
+    // Tree layout
+    TREE_LAYOUT: {
+        NODE_SIZE: [100, 40],
+        SEPARATION: (a, b) => (a.parent === b.parent ? 1 : 2),
+        RADIAL_SEPARATION: (a, b) => (a.parent === b.parent ? 1 : 2) / a.depth
+    },
+    
+    // File type mappings
+    LANGUAGE_EXTENSIONS: {
+        'py': 'python',
+        'js': 'javascript',
+        'ts': 'typescript',
+        'jsx': 'javascript',
+        'tsx': 'typescript',
+        'java': 'java',
+        'c': 'c',
+        'cpp': 'cpp',
+        'cs': 'csharp',
+        'go': 'go',
+        'rs': 'rust',
+        'rb': 'ruby',
+        'php': 'php',
+        'swift': 'swift',
+        'kt': 'kotlin',
+        'scala': 'scala',
+        'r': 'r',
+        'lua': 'lua',
+        'dart': 'dart',
+        'html': 'html',
+        'css': 'css',
+        'scss': 'scss',
+        'sass': 'sass',
+        'less': 'less',
+        'json': 'json',
+        'xml': 'xml',
+        'yaml': 'yaml',
+        'yml': 'yaml',
+        'toml': 'toml',
+        'ini': 'ini',
+        'sql': 'sql',
+        'sh': 'shell',
+        'bash': 'bash',
+        'ps1': 'powershell',
+        'bat': 'batch',
+        'md': 'markdown'
+    },
+    
+    // Default filters
+    DEFAULT_FILTERS: {
+        language: 'all',
+        searchTerm: '',
+        minComplexity: 0,
+        maxComplexity: 999,
+        showHidden: false
+    },
+    
+    // API endpoints
+    API_ENDPOINTS: {
+        FILE_READ: '/api/file/read',
+        ANALYZE_FILE: '/api/analyze/file',
+        ANALYZE_DIRECTORY: '/api/analyze/directory',
+        SEARCH: '/api/search'
+    },
+    
+    // WebSocket events
+    SOCKET_EVENTS: {
+        CONNECT: 'connect',
+        DISCONNECT: 'disconnect',
+        CODE_UPDATE: 'code_update',
+        ANALYSIS_START: 'analysis_start',
+        ANALYSIS_PROGRESS: 'analysis_progress',
+        ANALYSIS_COMPLETE: 'analysis_complete',
+        ANALYSIS_ERROR: 'analysis_error',
+        FILE_SELECTED: 'file_selected',
+        NODE_EXPANDED: 'node_expanded',
+        NODE_COLLAPSED: 'node_collapsed'
+    },
+    
+    // Messages
+    MESSAGES: {
+        NO_WORKING_DIR: 'Please select a working directory to view the code tree',
+        LOADING: 'Loading code tree...',
+        ANALYZING: 'Analyzing code structure...',
+        NO_DATA: 'No code structure data available',
+        ERROR: 'Error loading code tree',
+        EMPTY_DIR: 'Directory is empty',
+        NO_RESULTS: 'No matching files found',
+        CLICK_TO_EXPLORE: 'Click to explore contents',
+        CLICK_TO_ANALYZE: 'Click to analyze file'
+    },
+    
+    // Performance thresholds
+    PERFORMANCE: {
+        MAX_NODES_RENDER: 1000,
+        MAX_NODES_EXPAND: 100,
+        DEBOUNCE_SEARCH: 300,
+        DEBOUNCE_RESIZE: 150,
+        CACHE_TTL: 300000  // 5 minutes
+    },
+    
+    // Icon mappings
+    ICONS: {
+        // Node type icons
+        MODULE: '📦',
+        CLASS: '🏗️',
+        FUNCTION: '⚡',
+        METHOD: '🔧',
+        PROPERTY: '📌',
+        VARIABLE: '📍',
+        DIRECTORY: '📁',
+        FILE: '📄',
+        
+        // State icons
+        LOADING: '⏳',
+        ERROR: '❌',
+        WARNING: '⚠️',
+        SUCCESS: '✅',
+        
+        // Action icons
+        EXPAND: '▶',
+        COLLAPSE: '▼',
+        SEARCH: '🔍',
+        FILTER: '🔽',
+        REFRESH: '🔄',
+        SETTINGS: '⚙️'
+    },
+    
+    // CSS classes
+    CSS_CLASSES: {
+        // Container classes
+        CONTAINER: 'code-tree-container',
+        SVG: 'code-tree-svg',
+        GROUP: 'code-tree-group',
+        
+        // Node classes
+        NODE: 'tree-node',
+        NODE_SELECTED: 'tree-node-selected',
+        NODE_HOVER: 'tree-node-hover',
+        NODE_LOADING: 'tree-node-loading',
+        NODE_ERROR: 'tree-node-error',
+        
+        // Link classes
+        LINK: 'tree-link',
+        LINK_SELECTED: 'tree-link-selected',
+        
+        // Text classes
+        LABEL: 'tree-label',
+        LABEL_PRIMARY: 'tree-label-primary',
+        LABEL_SECONDARY: 'tree-label-secondary',
+        
+        // Tooltip classes
+        TOOLTIP: 'code-tree-tooltip',
+        TOOLTIP_VISIBLE: 'code-tree-tooltip-visible',
+        
+        // Control classes
+        CONTROLS: 'tree-controls',
+        CONTROL_BTN: 'tree-control-btn',
+        CONTROL_ACTIVE: 'tree-control-active'
+    }
+};
+
+// Freeze constants to prevent modification
+Object.freeze(treeConstants);
+Object.freeze(treeConstants.DEFAULT_MARGIN);
+Object.freeze(treeConstants.NODE_RADIUS);
+Object.freeze(treeConstants.COLORS);
+Object.freeze(treeConstants.TREE_LAYOUT);
+Object.freeze(treeConstants.LANGUAGE_EXTENSIONS);
+Object.freeze(treeConstants.DEFAULT_FILTERS);
+Object.freeze(treeConstants.API_ENDPOINTS);
+Object.freeze(treeConstants.SOCKET_EVENTS);
+Object.freeze(treeConstants.MESSAGES);
+Object.freeze(treeConstants.PERFORMANCE);
+Object.freeze(treeConstants.ICONS);
+Object.freeze(treeConstants.CSS_CLASSES);
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = treeConstants;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => treeConstants);
+} else {
+    window.treeConstants = treeConstants;
+}