claude-mpm 4.20.3__py3-none-any.whl → 5.1.8__py3-none-any.whl

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

@@ -37,7 +37,7 @@ class SimpleCodeView {
         this.container = null;
         this.apiBase = window.location.origin;
         console.log('[SimpleCodeView] API base:', this.apiBase);
-        
+
         // Tree view properties
         this.currentView = 'directory';
         this.socket = null;
@@ -52,16 +52,16 @@ class SimpleCodeView {
 
     init(container) {
         console.log('[SimpleCodeView.init] Starting with container:', container);
-        
+
         if (!container) {
             console.error('[SimpleCodeView.init] No container provided!');
             document.body.innerHTML += '<div style="color:red;font-size:20px;">ERROR: No container for SimpleCodeView</div>';
             return;
         }
-        
+
         this.container = container;
         this.render();
-        
+
         // Load initial directory after a short delay to ensure DOM is ready
         setTimeout(() => {
             console.log('[SimpleCodeView.init] Loading initial directory after delay');
@@ -71,45 +71,45 @@ class SimpleCodeView {
 
     render() {
         console.log('[SimpleCodeView.render] Rendering UI');
-        
+
         const html = `
             <div class="simple-code-view" style="padding: 20px;">
                 <h2>Simple Code Browser</h2>
-                
+
                 <div class="view-toggle" style="margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 4px;">
-                    <button id="dir-view-btn" onclick="window.simpleCodeView.setView('directory')" class="active" 
+                    <button id="dir-view-btn" onclick="window.simpleCodeView.setView('directory')" class="active"
                             style="margin-right: 10px; padding: 8px 16px; border: 1px solid #ccc; background: #007cba; color: white; border-radius: 4px; cursor: pointer;">
                         📁 Directory View
                     </button>
-                    <button id="tree-view-btn" onclick="window.simpleCodeView.setView('tree')" 
+                    <button id="tree-view-btn" onclick="window.simpleCodeView.setView('tree')"
                             style="padding: 8px 16px; border: 1px solid #ccc; background: #f9f9f9; color: #333; border-radius: 4px; cursor: pointer;">
                         🌳 Tree View
                     </button>
                 </div>
-                
+
                 <div id="status-bar" style="padding: 10px; background: #e0e0e0; border-radius: 4px; margin-bottom: 10px;">
                     Status: Initializing...
                 </div>
-                
+
                 <div class="path-bar" style="margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 4px;">
-                    <strong>Current Path:</strong> 
+                    <strong>Current Path:</strong>
                     <input type="text" id="path-input" value="${this.currentPath}" style="width: 50%; margin: 0 10px;">
                     <button id="load-btn" onclick="loadDir(document.getElementById('path-input').value)">Load</button>
                     <button id="up-btn" onclick="goUp()">Go Up</button>
                 </div>
-                
+
                 <div id="error-display" style="display:none; padding: 10px; background: #fee; color: red; border: 1px solid #fcc; border-radius: 4px; margin: 10px 0;">
                 </div>
-                
+
                 <div id="directory-contents" style="border: 1px solid #ccc; padding: 10px; min-height: 400px; background: white;">
                     <div style="color: #666;">Waiting to load directory...</div>
                 </div>
-                
+
                 <div id="tree-view-container" style="display: none;">
                     <div class="file-selector" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 4px;">
-                        <input type="text" id="file-path-input" placeholder="Enter file path to analyze (e.g., ./src/claude_mpm/core/framework_loader.py)" 
+                        <input type="text" id="file-path-input" placeholder="Enter file path to analyze (e.g., ./src/claude_mpm/core/framework_loader.py)"
                                style="width: 70%; padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;">
-                        <button onclick="window.simpleCodeView.analyzeFile()" 
+                        <button onclick="window.simpleCodeView.analyzeFile()"
                                 style="padding: 8px 16px; border: 1px solid #ccc; background: #28a745; color: white; border-radius: 4px; cursor: pointer;">
                             Analyze File
                         </button>
@@ -118,7 +118,7 @@ class SimpleCodeView {
                         <div style="padding: 20px; text-align: center; color: #666;">Enter a file path above and click "Analyze File" to view AST tree</div>
                     </div>
                 </div>
-                
+
                 <div id="debug-info" style="margin-top: 10px; padding: 10px; background: #f9f9f9; font-family: monospace; font-size: 12px;">
                     <strong>Debug Info:</strong><br>
                     API Base: ${this.apiBase}<br>
@@ -127,10 +127,10 @@ class SimpleCodeView {
                 </div>
             </div>
         `;
-        
+
         this.container.innerHTML = html;
         console.log('[SimpleCodeView.render] UI rendered');
-        
+
         this.updateStatus('UI Rendered - Ready to load directory', 'blue');
     }
 
@@ -162,23 +162,23 @@ class SimpleCodeView {
 
     async loadDirectory(path) {
         console.log('[SimpleCodeView.loadDirectory] Loading path:', path);
-        
+
         this.currentPath = path;
         this.hideError();
         this.updateStatus(`Loading ${path}...`, 'blue');
-        
+
         // Update path input
         const pathInput = document.getElementById('path-input');
         if (pathInput) {
             pathInput.value = path;
         }
-        
+
         // Update debug info
         const debugDiv = document.getElementById('debug-info');
         const contentsDiv = document.getElementById('directory-contents');
-        
+
         const apiUrl = `${this.apiBase}/api/directory/list?path=${encodeURIComponent(path)}`;
-        
+
         if (debugDiv) {
             debugDiv.innerHTML = `
                 <strong>Debug Info:</strong><br>
@@ -187,20 +187,20 @@ class SimpleCodeView {
                 Status: Fetching...
             `;
         }
-        
+
         try {
             console.log('[SimpleCodeView.loadDirectory] Fetching:', apiUrl);
-            
+
             const response = await fetch(apiUrl);
             console.log('[SimpleCodeView.loadDirectory] Response status:', response.status);
-            
+
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
-            
+
             const data = await response.json();
             console.log('[SimpleCodeView.loadDirectory] Data received:', data);
-            
+
             // Update debug info with response and filtering status
             if (debugDiv) {
                 let debugContent = `
@@ -211,7 +211,7 @@ class SimpleCodeView {
                     Is Directory: ${data.is_directory}<br>
                     Item Count: ${data.contents ? data.contents.length : 0}<br>
                 `;
-                
+
                 // Add filtering information
                 if (data.filtered) {
                     debugContent += `<strong>Filtering:</strong> ${data.filter_info || 'Filtered view'}<br>`;
@@ -219,17 +219,17 @@ class SimpleCodeView {
                         debugContent += `<strong>Items:</strong> ${data.summary.directories} directories, ${data.summary.code_files} code files<br>`;
                     }
                 }
-                
+
                 debugContent += `
                     <details>
                         <summary>Raw Response (click to expand)</summary>
                         <pre style="overflow-x: auto;">${JSON.stringify(data, null, 2)}</pre>
                     </details>
                 `;
-                
+
                 debugDiv.innerHTML = debugContent;
             }
-            
+
             // Display contents
             if (!data.exists) {
                 contentsDiv.innerHTML = '<p style="color: red;">❌ Path does not exist</p>';
@@ -250,18 +250,18 @@ class SimpleCodeView {
                     headerText += ` (${data.summary.directories} directories, ${data.summary.code_files} code files)`;
                 }
                 headerText += ':';
-                
+
                 let html = `<div style="margin-bottom: 10px; color: #666;">${headerText}</div>`;
-                
+
                 // Add filtering notice if applicable
                 if (data.filtered) {
                     html += `<div style="margin-bottom: 10px; padding: 8px; background: #e8f4fd; border-left: 3px solid #2196f3; color: #1565c0; font-size: 13px;">
                         🔍 Filtered view: ${data.filter_info || 'Showing only code-related files and directories'}
                     </div>`;
                 }
-                
+
                 html += '<ul style="list-style: none; padding: 0; margin: 0;">';
-                
+
                 // Sort: directories first, then files
                 const sorted = data.contents.sort((a, b) => {
                     if (a.is_directory !== b.is_directory) {
@@ -269,7 +269,7 @@ class SimpleCodeView {
                     }
                     return a.name.localeCompare(b.name);
                 });
-                
+
                 for (const item of sorted) {
                     if (item.is_directory) {
                         // Make directories clickable
@@ -282,7 +282,7 @@ class SimpleCodeView {
                         // Check if it's a code file and make it clickable
                         const isCodeFile = this.isCodeFile(item.name);
                         const fileIcon = this.getFileIcon(item.name);
-                        
+
                         if (isCodeFile) {
                             // Code files - clickable to show AST
                             html += `<li style="padding: 5px 0;">
@@ -298,18 +298,18 @@ class SimpleCodeView {
                         }
                     }
                 }
-                
+
                 html += '</ul>';
                 contentsDiv.innerHTML = html;
                 this.updateStatus(`Loaded ${data.contents.length} items`, 'green');
             }
-            
+
         } catch (error) {
             console.error('[SimpleCodeView.loadDirectory] Error:', error);
-            
+
             const errorMsg = `Failed to load directory: ${error.message}`;
             this.showError(errorMsg);
-            
+
             if (contentsDiv) {
                 contentsDiv.innerHTML = `
                     <div style="color: red;">
@@ -319,7 +319,7 @@ class SimpleCodeView {
                     </div>
                 `;
             }
-            
+
             if (debugDiv) {
                 debugDiv.innerHTML += `<br><span style="color:red;">ERROR: ${error.stack || error.message}</span>`;
             }
@@ -333,7 +333,7 @@ class SimpleCodeView {
             this.updateStatus('Already at root directory', 'orange');
             return;
         }
-        
+
         const lastSlash = this.currentPath.lastIndexOf('/');
         const parent = lastSlash > 0 ? this.currentPath.substring(0, lastSlash) : '/';
         console.log('[SimpleCodeView.goUp] Going up to:', parent);
@@ -344,35 +344,35 @@ class SimpleCodeView {
     setView(view) {
         console.log('[SimpleCodeView.setView] Switching to view:', view);
         this.currentView = view;
-        
+
         const dirContents = document.getElementById('directory-contents');
         const treeContainer = document.getElementById('tree-view-container');
         const dirBtn = document.getElementById('dir-view-btn');
         const treeBtn = document.getElementById('tree-view-btn');
-        
+
         if (view === 'tree') {
             dirContents.style.display = 'none';
             treeContainer.style.display = 'block';
-            
+
             // Update button styles
             dirBtn.style.background = '#f9f9f9';
             dirBtn.style.color = '#333';
             dirBtn.classList.remove('active');
-            
+
             treeBtn.style.background = '#007cba';
             treeBtn.style.color = 'white';
             treeBtn.classList.add('active');
-            
+
             this.initializeTreeView();
         } else {
             dirContents.style.display = 'block';
             treeContainer.style.display = 'none';
-            
+
             // Update button styles
             treeBtn.style.background = '#f9f9f9';
             treeBtn.style.color = '#333';
             treeBtn.classList.remove('active');
-            
+
             dirBtn.style.background = '#007cba';
             dirBtn.style.color = 'white';
             dirBtn.classList.add('active');
@@ -381,52 +381,52 @@ class SimpleCodeView {
 
     initializeTreeView() {
         console.log('[SimpleCodeView.initializeTreeView] Initializing tree view');
-        
+
         if (!window.d3) {
             this.updateStatus('D3.js not loaded - cannot initialize tree view', 'red');
             return;
         }
-        
+
         this.initializeSocket();
     }
 
     initializeSocket() {
         console.log('[SimpleCodeView.initializeSocket] Initializing Socket.IO connection');
-        
+
         if (!window.io) {
             this.updateStatus('Socket.IO not loaded - using fallback mode', 'orange');
             return;
         }
-        
+
         try {
             this.socket = io('/');
-            
+
             this.socket.on('connect', () => {
                 console.log('[SimpleCodeView] Socket connected');
                 this.updateStatus('Connected to analysis server', 'green');
             });
-            
+
             this.socket.on('disconnect', () => {
                 console.log('[SimpleCodeView] Socket disconnected');
                 this.updateStatus('Disconnected from analysis server', 'orange');
             });
-            
+
             this.socket.on('analysis_progress', (data) => {
                 console.log('[SimpleCodeView] Analysis progress:', data);
                 this.updateStatus(`Analysis: ${data.message}`, 'blue');
             });
-            
+
             this.socket.on('analysis_complete', (data) => {
                 console.log('[SimpleCodeView] Analysis complete:', data);
                 this.updateStatus('Analysis complete - rendering tree', 'green');
                 this.renderTree(data);
             });
-            
+
             this.socket.on('analysis_error', (error) => {
                 console.error('[SimpleCodeView] Analysis error:', error);
                 this.showError(`Analysis failed: ${error.message || error}`);
             });
-            
+
         } catch (error) {
             console.error('[SimpleCodeView] Failed to initialize socket:', error);
             this.updateStatus('Socket connection failed - using fallback mode', 'orange');
@@ -435,24 +435,24 @@ class SimpleCodeView {
 
     async analyzeFile() {
         console.log('[SimpleCodeView.analyzeFile] Starting file analysis');
-        
+
         const fileInput = document.getElementById('file-path-input');
         const filePath = fileInput.value.trim();
-        
+
         if (!filePath) {
             this.showError('Please enter a file path');
             return;
         }
-        
+
         this.hideError();
         this.updateStatus(`Analyzing file: ${filePath}`, 'blue');
-        
+
         // Clear previous tree
         const treeViz = document.getElementById('tree-visualization');
         if (treeViz) {
             treeViz.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Analyzing file...</div>';
         }
-        
+
         try {
             if (this.socket && this.socket.connected) {
                 // Use Socket.IO for real-time analysis
@@ -472,7 +472,7 @@ class SimpleCodeView {
 
     async analyzeFileHTTP(filePath) {
         console.log('[SimpleCodeView.analyzeFileHTTP] Using HTTP fallback for:', filePath);
-        
+
         try {
             // Create a simple mock analysis for demonstration
             // In a real implementation, this would call a proper analysis endpoint
@@ -480,7 +480,7 @@ class SimpleCodeView {
                 const mockData = this.createMockTreeData(filePath);
                 this.renderTree(mockData);
             }, 1000);
-            
+
         } catch (error) {
             throw new Error(`HTTP analysis failed: ${error.message}`);
         }
@@ -490,13 +490,13 @@ class SimpleCodeView {
         // Create mock AST data for demonstration
         const fileName = filePath.split('/').pop() || 'file';
         const ext = fileName.split('.').pop()?.toLowerCase();
-        
+
         let mockData = {
             name: fileName,
             type: 'module',
             children: []
         };
-        
+
         if (ext === 'py') {
             mockData.children = [
                 {
@@ -549,62 +549,62 @@ class SimpleCodeView {
                 { name: 'Content Section 3', type: 'section' }
             ];
         }
-        
+
         return mockData;
     }
 
     renderTree(data) {
         console.log('[SimpleCodeView.renderTree] Rendering tree with data:', data);
-        
+
         if (!data || !window.d3) {
             this.showError('Cannot render tree: missing data or D3.js');
             return;
         }
-        
+
         this.treeData = data;
-        
+
         // Clear previous visualization
         const container = document.getElementById('tree-visualization');
         if (!container) {
             this.showError('Tree visualization container not found');
             return;
         }
-        
+
         container.innerHTML = '';
-        
+
         // Create SVG
         const margin = this.margin;
         const width = this.width - margin.left - margin.right;
         const height = this.height - margin.top - margin.bottom;
-        
+
         this.svg = d3.select('#tree-visualization')
             .append('svg')
             .attr('width', this.width)
             .attr('height', this.height);
-        
+
         // Add zoom behavior
         const zoom = d3.zoom()
             .scaleExtent([0.1, 4])
             .on('zoom', (event) => {
                 this.treeGroup.attr('transform', event.transform);
             });
-        
+
         this.svg.call(zoom);
-        
+
         // Create main group
         this.treeGroup = this.svg.append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
-        
+
         // Create tree layout
         this.treeLayout = d3.tree()
             .size([height, width]);
-        
+
         // Convert data to hierarchy
         const hierarchy = d3.hierarchy(data);
-        
+
         // Generate tree layout
         const treeData = this.treeLayout(hierarchy);
-        
+
         // Add links
         const links = this.treeGroup.selectAll('.link')
             .data(treeData.links())
@@ -618,7 +618,7 @@ class SimpleCodeView {
             .style('fill', 'none')
             .style('stroke', '#ccc')
             .style('stroke-width', '2px');
-        
+
         // Add nodes
         const nodes = this.treeGroup.selectAll('.node')
             .data(treeData.descendants())
@@ -626,14 +626,14 @@ class SimpleCodeView {
             .append('g')
             .attr('class', 'tree-node')
             .attr('transform', d => `translate(${d.y},${d.x})`);
-        
+
         // Add circles for nodes
         nodes.append('circle')
             .attr('r', 6)
             .style('fill', d => this.getNodeColor(d.data.type))
             .style('stroke', '#333')
             .style('stroke-width', '2px');
-        
+
         // Add labels
         nodes.append('text')
             .attr('dy', '.35em')
@@ -642,14 +642,14 @@ class SimpleCodeView {
             .style('font-size', '12px')
             .style('font-family', 'Arial, sans-serif')
             .text(d => d.data.name);
-        
+
         // Add tooltips
         nodes.append('title')
             .text(d => `${d.data.type}: ${d.data.name}`);
-        
+
         // Add legend
         this.addLegend(container);
-        
+
         this.updateStatus('Tree visualization rendered successfully', 'green');
     }
 
@@ -685,7 +685,7 @@ class SimpleCodeView {
         const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'));
         const iconMap = {
             '.py': '🐍',
-            '.js': '📜', 
+            '.js': '📜',
             '.jsx': '⚛️',
             '.ts': '📘',
             '.tsx': '⚛️',
@@ -730,16 +730,16 @@ class SimpleCodeView {
     // New method to analyze file from directory click
     analyzeFileFromPath(filePath) {
         console.log('[SimpleCodeView.analyzeFileFromPath] Analyzing file:', filePath);
-        
+
         // Switch to tree view
         this.setView('tree');
-        
+
         // Set the file path in the input
         const fileInput = document.getElementById('file-path-input');
         if (fileInput) {
             fileInput.value = filePath;
         }
-        
+
         // Trigger analysis
         this.analyzeFile();
     }
@@ -750,10 +750,10 @@ class SimpleCodeView {
         if (existingLegend) {
             existingLegend.remove();
         }
-        
+
         const legend = document.createElement('div');
         legend.className = 'tree-legend';
-        
+
         const legendTypes = [
             { type: 'module', label: 'Module/File' },
             { type: 'class', label: 'Class' },
@@ -764,7 +764,7 @@ class SimpleCodeView {
             { type: 'section', label: 'Section' },
             { type: 'hook', label: 'Hook/Other' }
         ];
-        
+
         legend.innerHTML = `
             <strong>Legend</strong><br>
             ${legendTypes.map(item => `
@@ -779,10 +779,10 @@ class SimpleCodeView {
                 Pan: Click and drag
             </div>
         `;
-        
+
         container.appendChild(legend);
     }
-    
+
     /**
      * Get initial path from various sources
      * @returns {string} Initial path to use
@@ -793,34 +793,34 @@ class SimpleCodeView {
             const dir = window.dashboard.workingDirectoryManager.getCurrentWorkingDir();
             if (dir) return dir;
         }
-        
+
         // Try to get from working directory element
         const workingDirPath = document.getElementById('working-dir-path');
         if (workingDirPath && workingDirPath.textContent && workingDirPath.textContent !== 'Loading...') {
             return workingDirPath.textContent.trim();
         }
-        
+
         // Try to get from footer
         const footerDir = document.getElementById('footer-working-dir');
         if (footerDir && footerDir.textContent && footerDir.textContent !== 'Unknown') {
             return footerDir.textContent.trim();
         }
-        
+
         // Try to get from recent events
         if (window.socketClient && window.socketClient.events) {
             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 || 
+                const dir = recentEvent.data.working_directory ||
+                           recentEvent.data.cwd ||
                            recentEvent.data.working_dir;
                 if (dir) return dir;
             }
         }
-        
+
         // Default fallback
         return '/';
     }