claude-mpm 4.2.1__py3-none-any.whl → 4.2.3__py3-none-any.whl

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

@@ -20,6 +20,15 @@ function goUp() {
     }
 }
 
+function analyzeFileFromPath(filePath) {
+    console.log('[analyzeFileFromPath] Called with path:', filePath);
+    if (window.simpleCodeView) {
+        window.simpleCodeView.analyzeFileFromPath(filePath);
+    } else {
+        console.error('[analyzeFileFromPath] simpleCodeView not initialized');
+    }
+}
+
 class SimpleCodeView {
     constructor() {
         console.log('[SimpleCodeView] Constructor called');
@@ -27,6 +36,17 @@ 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;
+        this.svg = null;
+        this.treeGroup = null;
+        this.treeLayout = null;
+        this.treeData = null;
+        this.width = 800;
+        this.height = 600;
+        this.margin = {top: 20, right: 20, bottom: 20, left: 120};
     }
 
     init(container) {
@@ -53,7 +73,18 @@ class SimpleCodeView {
         
         const html = `
             <div class="simple-code-view" style="padding: 20px;">
-                <h2>Simple Directory Browser</h2>
+                <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" 
+                            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')" 
+                            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...
@@ -73,6 +104,20 @@ class SimpleCodeView {
                     <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)" 
+                               style="width: 70%; padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px;">
+                        <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>
+                    </div>
+                    <div id="tree-visualization" style="border: 1px solid #ccc; min-height: 500px; background: white; overflow: auto; position: relative;">
+                        <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>
@@ -225,27 +270,31 @@ class SimpleCodeView {
                 });
                 
                 for (const item of sorted) {
-                    let icon = item.is_directory ? '📁' : '📄';
-                    let nameStyle = 'color: #666;';
-                    
-                    // Special styling for code files
-                    if (!item.is_directory && item.is_code_file) {
-                        icon = '💻'; // Code file icon
-                        nameStyle = 'color: #2e7d32; font-weight: 500;'; // Green color for code files
-                    }
-                    
                     if (item.is_directory) {
                         // Make directories clickable
                         html += `<li style="padding: 5px 0;">
-                            ${icon} <a href="#" onclick="loadDir('${item.path.replace(/'/g, "\\'")}'); return false;" style="color: blue; text-decoration: none; cursor: pointer;">
+                            📁 <a href="#" onclick="loadDir('${item.path.replace(/'/g, "\\'")}'); return false;" style="color: blue; text-decoration: none; cursor: pointer;">
                                 ${item.name}/
                             </a>
                         </li>`;
                     } else {
-                        // Files are not clickable
-                        html += `<li style="padding: 5px 0;">
-                            ${icon} <span style="${nameStyle}">${item.name}</span>
-                        </li>`;
+                        // 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;">
+                                ${fileIcon} <a href="#" onclick="analyzeFileFromPath('${item.path.replace(/'/g, "\\'")}'); return false;" style="color: #0066cc; text-decoration: none; cursor: pointer; font-weight: 500;" title="Click to view AST">
+                                    ${item.name}
+                                </a>
+                            </li>`;
+                        } else {
+                            // Non-code files - not clickable
+                            html += `<li style="padding: 5px 0;">
+                                📄 <span style="color: #666;">${item.name}</span>
+                            </li>`;
+                        }
                     }
                 }
                 
@@ -289,6 +338,449 @@ class SimpleCodeView {
         console.log('[SimpleCodeView.goUp] Going up to:', parent);
         this.loadDirectory(parent);
     }
+
+    // Tree view methods
+    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');
+        }
+    }
+
+    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');
+        }
+    }
+
+    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
+                this.socket.emit('analyze_file', {
+                    path: filePath,
+                    working_directory: this.currentPath
+                });
+            } else {
+                // Fallback to HTTP API (we'll create a simple endpoint)
+                await this.analyzeFileHTTP(filePath);
+            }
+        } catch (error) {
+            console.error('[SimpleCodeView.analyzeFile] Error:', error);
+            this.showError(`Failed to analyze file: ${error.message}`);
+        }
+    }
+
+    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
+            setTimeout(() => {
+                const mockData = this.createMockTreeData(filePath);
+                this.renderTree(mockData);
+            }, 1000);
+            
+        } catch (error) {
+            throw new Error(`HTTP analysis failed: ${error.message}`);
+        }
+    }
+
+    createMockTreeData(filePath) {
+        // 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 = [
+                {
+                    name: 'imports',
+                    type: 'imports',
+                    children: [
+                        { name: 'import os', type: 'import' },
+                        { name: 'from pathlib import Path', type: 'import' }
+                    ]
+                },
+                {
+                    name: 'MyClass',
+                    type: 'class',
+                    children: [
+                        { name: '__init__', type: 'method' },
+                        { name: 'process_data', type: 'method' },
+                        { name: 'save_results', type: 'method' }
+                    ]
+                },
+                {
+                    name: 'helper_function',
+                    type: 'function',
+                    children: []
+                }
+            ];
+        } else if (ext === 'js' || ext === 'ts') {
+            mockData.children = [
+                {
+                    name: 'imports',
+                    type: 'imports',
+                    children: [
+                        { name: "import React from 'react'", type: 'import' },
+                        { name: "import { useState } from 'react'", type: 'import' }
+                    ]
+                },
+                {
+                    name: 'MyComponent',
+                    type: 'function',
+                    children: [
+                        { name: 'useState', type: 'hook' },
+                        { name: 'useEffect', type: 'hook' },
+                        { name: 'handleClick', type: 'function' }
+                    ]
+                }
+            ];
+        } else {
+            mockData.children = [
+                { name: 'Content Section 1', type: 'section' },
+                { name: 'Content Section 2', type: 'section' },
+                { 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())
+            .enter()
+            .append('path')
+            .attr('class', 'link')
+            .attr('d', d3.linkHorizontal()
+                .x(d => d.y)
+                .y(d => d.x)
+            )
+            .style('fill', 'none')
+            .style('stroke', '#ccc')
+            .style('stroke-width', '2px');
+        
+        // Add nodes
+        const nodes = this.treeGroup.selectAll('.node')
+            .data(treeData.descendants())
+            .enter()
+            .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')
+            .attr('x', d => d.children ? -13 : 13)
+            .style('text-anchor', d => d.children ? 'end' : 'start')
+            .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');
+    }
+
+    getNodeColor(type) {
+        const colors = {
+            'module': '#1f77b4',
+            'class': '#ff7f0e',
+            'function': '#2ca02c',
+            'method': '#d62728',
+            'import': '#9467bd',
+            'imports': '#8c564b',
+            'section': '#e377c2',
+            'hook': '#7f7f7f'
+        };
+        return colors[type] || '#bcbd22';
+    }
+
+    // Check if file is a code file
+    isCodeFile(filename) {
+        const codeExtensions = [
+            '.py', '.js', '.jsx', '.ts', '.tsx', '.java', '.cpp', '.c', '.h',
+            '.cs', '.go', '.rs', '.rb', '.php', '.swift', '.kt', '.scala',
+            '.r', '.m', '.mm', '.sh', '.bash', '.zsh', '.sql', '.html',
+            '.css', '.scss', '.sass', '.less', '.xml', '.json', '.yaml', '.yml',
+            '.md', '.rst', '.txt', '.log', '.conf', '.ini', '.toml'
+        ];
+        const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+        return codeExtensions.includes(ext);
+    }
+
+    // Get appropriate icon for file type
+    getFileIcon(filename) {
+        const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+        const iconMap = {
+            '.py': '🐍',
+            '.js': '📜', 
+            '.jsx': '⚛️',
+            '.ts': '📘',
+            '.tsx': '⚛️',
+            '.json': '📋',
+            '.html': '🌐',
+            '.css': '🎨',
+            '.md': '📝',
+            '.yml': '⚙️',
+            '.yaml': '⚙️',
+            '.sh': '🔧',
+            '.go': '🐹',
+            '.rs': '🦀',
+            '.java': '☕',
+            '.rb': '💎',
+            '.php': '🐘',
+            '.cpp': '⚙️',
+            '.c': '⚙️',
+            '.h': '📄',
+            '.cs': '💜',
+            '.swift': '🦉',
+            '.kt': '🚀',
+            '.scala': '📈',
+            '.r': '📊',
+            '.sql': '🗃️',
+            '.scss': '🎨',
+            '.sass': '🎨',
+            '.less': '🎨',
+            '.xml': '📑',
+            '.bash': '🔧',
+            '.zsh': '🔧',
+            '.md': '📝',
+            '.rst': '📝',
+            '.txt': '📄',
+            '.log': '📋',
+            '.conf': '⚙️',
+            '.ini': '⚙️',
+            '.toml': '⚙️'
+        };
+        return iconMap[ext] || '💻';
+    }
+
+    // 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();
+    }
+
+    addLegend(container) {
+        // Remove existing legend
+        const existingLegend = container.querySelector('.tree-legend');
+        if (existingLegend) {
+            existingLegend.remove();
+        }
+        
+        const legend = document.createElement('div');
+        legend.className = 'tree-legend';
+        
+        const legendTypes = [
+            { type: 'module', label: 'Module/File' },
+            { type: 'class', label: 'Class' },
+            { type: 'function', label: 'Function' },
+            { type: 'method', label: 'Method' },
+            { type: 'imports', label: 'Imports' },
+            { type: 'import', label: 'Import' },
+            { type: 'section', label: 'Section' },
+            { type: 'hook', label: 'Hook/Other' }
+        ];
+        
+        legend.innerHTML = `
+            <strong>Legend</strong><br>
+            ${legendTypes.map(item => `
+                <div class="tree-legend-item">
+                    <div class="tree-legend-color" style="background-color: ${this.getNodeColor(item.type)};"></div>
+                    ${item.label}
+                </div>
+            `).join('')}
+            <hr style="margin: 8px 0;">
+            <div style="font-size: 11px; color: #666;">
+                Zoom: Mouse wheel<br>
+                Pan: Click and drag
+            </div>
+        `;
+        
+        container.appendChild(legend);
+    }
 }
 
 // Create global instance