claude-mpm 4.2.9__py3-none-any.whl → 4.2.11__py3-none-any.whl

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

@@ -59,6 +59,11 @@ class CodeTree {
         this.focusedNode = null;  // Track the currently focused directory
         this.horizontalNodes = new Set();  // Track nodes that should have horizontal text
         this.centralSpine = new Set();  // Track the main path through the tree
+        
+        // CRITICAL FIX: Bind methods to preserve 'this' context when called by D3 event handlers
+        this.onNodeClick = this.onNodeClick.bind(this);
+        this.showTooltip = this.showTooltip.bind(this);
+        this.hideTooltip = this.hideTooltip.bind(this);
     }
 
     /**
@@ -292,9 +297,9 @@ class CodeTree {
         
         // Add tree controls toolbar
         this.addTreeControls();
-        
-        // Add breadcrumb navigation
-        this.addBreadcrumb();
+
+        // Breadcrumb navigation removed - redundant with root node display
+        // this.addBreadcrumb();
 
         if (!container || !container.node()) {
             console.error('Code tree container not found');
@@ -424,16 +429,20 @@ class CodeTree {
      */
     initializeTreeData() {
         const workingDir = this.getWorkingDirectory();
-        const dirName = workingDir ? workingDir.split('/').pop() || 'Project Root' : 'Project Root';
+        // Use a more descriptive root name that doesn't look like a clickable button
+        const dirName = 'Project Root';  // Always use generic name for root
 
         // Use absolute path for consistency with API expectations
         this.treeData = {
             name: dirName,
             path: workingDir || '.',  // Use working directory or fallback to '.'
             type: 'root',
+            isDirectory: true,  // Critical: Mark root as directory for proper handling
             children: [],
             loaded: false,
-            expanded: true  // Start expanded
+            expanded: true,  // Start expanded
+            hasChildren: true,  // Root always has potential children
+            isRoot: true  // Mark as root node for special handling
         };
 
         if (typeof d3 !== 'undefined') {
@@ -515,7 +524,6 @@ class CodeTree {
             return;
         }
         
-        
         this.autoDiscovered = true;
         this.analyzing = true;
         
@@ -530,54 +538,111 @@ class CodeTree {
             lines: 0
         };
         
-        // Subscribe to events if not already done
+        // Subscribe to events if not already done (for other features)
         if (this.socket && !this.socket.hasListeners('code:node:found')) {
             this.setupEventHandlers();
         }
         
-        // Update tree data with working directory as the root
-        const dirName = workingDir.split('/').pop() || 'Project Root';
-        this.treeData = {
-            name: dirName,
-            path: workingDir,  // Use absolute path for consistency with API expectations
-            type: 'root',
-            children: [],
-            loaded: false,
-            expanded: true  // Start expanded to show discovered items
-        };
-        
-        if (typeof d3 !== 'undefined') {
-            this.root = d3.hierarchy(this.treeData);
-            this.root.x0 = this.height / 2;
-            this.root.y0 = 0;
-        }
-        
         // Update UI
         this.showLoading();
+        const dirName = workingDir.split('/').pop() || 'Project Root';
         this.updateBreadcrumb(`Discovering structure in ${dirName}...`, 'info');
         
-        // Get selected languages from checkboxes
-        const selectedLanguages = this.getSelectedLanguages();
-        
-        // Get ignore patterns
-        const ignorePatterns = document.getElementById('ignore-patterns')?.value || '';
+        // Use REST API for initial discovery (more reliable than WebSocket)
+        console.log(`🚀 [ROOT DISCOVERY] Using REST API for root: ${workingDir}`);
         
-        // Enhanced debug logging
+        const apiUrl = `${window.location.origin}/api/directory?path=${encodeURIComponent(workingDir)}`;
         
-        // Request top-level discovery with working directory
-        const requestPayload = {
-            path: workingDir,  // Use working directory instead of '.'
-            depth: 'top_level',
-            languages: selectedLanguages,
-            ignore_patterns: ignorePatterns,
-            request_id: `discover_${Date.now()}`  // Add request ID for tracking
-        };
-        
-        // Sending top-level discovery request
-        
-        if (this.socket) {
-            this.socket.emit('code:discover:top_level', requestPayload);
-        }
+        fetch(apiUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('✅ [ROOT DISCOVERY] REST API response:', data);
+                
+                // Process the response
+                if (data.contents && Array.isArray(data.contents)) {
+                    // Update root node with children
+                    this.treeData.children = data.contents.map(item => ({
+                        name: item.name,
+                        path: item.path,
+                        type: item.type || (item.is_directory ? 'directory' : 'file'),
+                        size: item.size,
+                        hasChildren: item.is_directory,
+                        children: [],
+                        loaded: false
+                    }));
+                    
+                    this.treeData.loaded = true;
+                    
+                    // Update D3 hierarchy
+                    if (typeof d3 !== 'undefined') {
+                        this.root = d3.hierarchy(this.treeData);
+                        this.root.x0 = this.height / 2;
+                        this.root.y0 = 0;
+                        
+                        // Expand root node to show children
+                        if (this.root.children) {
+                            this.root.children.forEach(child => {
+                                child._children = null;
+                            });
+                        }
+                    }
+                    
+                    // Update the visualization
+                    if (this.svg) {
+                        this.update(this.root);
+                    }
+                    
+                    // Update stats
+                    const fileCount = data.contents.filter(item => !item.is_directory).length;
+                    const dirCount = data.contents.filter(item => item.is_directory).length;
+                    
+                    this.stats.files = fileCount;
+                    this.updateStats();
+                    
+                    this.updateBreadcrumb(
+                        `📁 Found ${dirCount} directories and ${fileCount} files`,
+                        'success'
+                    );
+                    
+                    this.updateActivityTicker(
+                        `📁 Found ${dirCount} directories and ${fileCount} files`,
+                        'success'
+                    );
+                    
+                    // Add to events display
+                    this.addEventToDisplay(
+                        `📁 Loaded ${data.contents.length} items from project root`,
+                        'info'
+                    );
+                }
+                
+                this.analyzing = false;
+                this.hideLoading();
+            })
+            .catch(error => {
+                console.error('[ROOT DISCOVERY] Error:', error);
+                this.analyzing = false;
+                this.hideLoading();
+                this.showNotification(`Failed to load directory: ${error.message}`, 'error');
+                
+                // Try WebSocket as fallback
+                if (this.socket) {
+                    console.log('[ROOT DISCOVERY] Falling back to WebSocket');
+                    const requestPayload = {
+                        path: workingDir,
+                        depth: 'top_level',
+                        languages: this.getSelectedLanguages(),
+                        ignore_patterns: document.getElementById('ignore-patterns')?.value || '',
+                        request_id: `discover_${Date.now()}`
+                    };
+                    this.socket.emit('code:discover:top_level', requestPayload);
+                }
+            });
         
         // Update stats display
         this.updateStats();
@@ -761,7 +826,7 @@ class CodeTree {
         if (!this.root) return;
         
         const expandNode = (node) => {
-            if (node.data.type === 'directory' && node.data.loaded === true) {
+            if ((node.data.type === 'directory' || node.data.type === 'root' || node.data.isDirectory) && node.data.loaded === true) {
                 if (node._children) {
                     node.children = node._children;
                     node._children = null;
@@ -785,7 +850,7 @@ class CodeTree {
         if (!this.root) return;
         
         const collapseNode = (node) => {
-            if (node.data.type === 'directory' && node.children) {
+            if ((node.data.type === 'directory' || node.data.type === 'root' || node.data.isDirectory) && node.children) {
                 node._children = node.children;
                 node.children = null;
                 node.data.expanded = false;
@@ -822,7 +887,7 @@ class CodeTree {
     navigateToPath(path) {
         // Implementation for navigating to a specific path
         // This would expand the tree to show the specified path
-        this.updateBreadcrumbPath(path);
+        // this.updateBreadcrumbPath(path); // Breadcrumb removed
         this.showNotification(`Navigating to: ${path}`, 'info');
     }
 
@@ -1559,18 +1624,22 @@ class CodeTree {
                 line: elem.line,
                 methods: elem.methods ? elem.methods.length : 0
             })));
+
+            // Show success message with element count breakdown
+            const fileName = data.path.split('/').pop();
+            const elementCounts = this.getElementCounts(data.elements);
+            const summary = this.formatElementSummary(elementCounts);
+
+            this.showNotification(`${fileName} - ${summary}`, 'success');
+            this.updateBreadcrumb(`${fileName} - AST parsed: ${summary}`, 'success');
         } else {
             const fileName = data.path.split('/').pop();
             console.log('⚠️ [AST ELEMENTS] No elements found in analysis result');
 
-            // Show user-friendly message for files with no AST elements
-            if (fileName.endsWith('__init__.py')) {
-                this.showNotification(`${fileName} is empty or contains only imports`, 'info');
-                this.updateBreadcrumb(`${fileName} - no code elements to display`, 'info');
-            } else {
-                this.showNotification(`${fileName} contains no classes or functions`, 'info');
-                this.updateBreadcrumb(`${fileName} - no AST elements found`, 'info');
-            }
+            // Show accurate message for files with no structural AST elements
+            const fileType = this.getFileTypeDescription(fileName);
+            this.showNotification(`${fileName} - No structural elements to display in tree`, 'info');
+            this.updateBreadcrumb(`${fileName} - ${fileType} analyzed, content not suitable for tree view`, 'info');
         }
 
         // Clear analysis timeout
@@ -1624,6 +1693,9 @@ class CodeTree {
                     childrenCount: children.length,
                     children: children.map(c => ({ name: c.name, type: c.type }))
                 });
+
+                // Auto-expand the file node to show AST tree if it was recently clicked
+                this.autoExpandFileWithAST(data.path, fileNode);
             } else {
                 console.log('⚠️ [FILE NODE] No elements to add as children');
             }
@@ -2439,7 +2511,7 @@ class CodeTree {
         if (children.length === 1) return children[0];
 
         // Prioritize directories over files
-        const directories = children.filter(child => child.data.type === 'directory');
+        const directories = children.filter(child => this.isNodeDirectory(child));
         if (directories.length === 1) return directories[0];
 
         // If multiple directories, choose the first one (could be enhanced with better logic)
@@ -2580,7 +2652,7 @@ class CodeTree {
         const nodeEnter = node.enter().append('g')
             .attr('class', d => {
                 let classes = ['node', 'code-node'];
-                if (d.data.type === 'directory') {
+                if (this.isNodeDirectory(d)) {
                     classes.push('directory');
                     if (d.data.loaded === true && d.children) {
                         classes.push('expanded');
@@ -2604,7 +2676,17 @@ class CodeTree {
                     return `translate(${source.y0},${source.x0})`;
                 }
             })
-            .on('click', (event, d) => this.onNodeClick(event, d));
+            .on('click', (event, d) => {
+                console.log('🔴 [G-ELEMENT] Click on node group element!', {
+                    nodeName: d?.data?.name,
+                    nodePath: d?.data?.path,
+                    eventTarget: event.target.tagName,
+                    thisContext: this,
+                    hasOnNodeClick: typeof this.onNodeClick === 'function'
+                });
+                // Use bound method
+                this.onNodeClick(event, d);
+            });
 
         // Add circles for nodes
         nodeEnter.append('circle')
@@ -2612,14 +2694,22 @@ class CodeTree {
             .attr('r', 1e-6)
             .style('fill', d => this.getNodeColor(d))
             .style('stroke', d => this.getNodeStrokeColor(d))
-            .style('stroke-width', d => d.data.type === 'directory' ? 2 : 1.5)
-            .style('cursor', 'pointer')  // Add cursor pointer for visual feedback
-            .on('click', (event, d) => this.onNodeClick(event, d))  // CRITICAL FIX: Add click handler to circles
-            .on('mouseover', (event, d) => this.showTooltip(event, d))
-            .on('mouseout', () => this.hideTooltip());
+            .style('stroke-width', d => this.isNodeDirectory(d) ? 2 : 1.5)
+            .style('cursor', d => (d.data && (d.data.type === 'root' || d.data.isRoot || d.depth === 0)) ? 'default' : 'pointer')  // No pointer for root
+            .on('click', (event, d) => {
+                console.log('🔵 [CIRCLE] Click on circle element!', {
+                    nodeName: d?.data?.name,
+                    nodePath: d?.data?.path,
+                    hasOnNodeClick: typeof this.onNodeClick === 'function'
+                });
+                // Use bound method
+                this.onNodeClick(event, d);
+            })  // CRITICAL FIX: Add click handler to circles
+            .on('mouseover', this.showTooltip)
+            .on('mouseout', this.hideTooltip);
         
         // Add expand/collapse icons for directories
-        nodeEnter.filter(d => d.data.type === 'directory')
+        nodeEnter.filter(d => this.isNodeDirectory(d))
             .append('text')
             .attr('class', 'expand-icon')
             .attr('x', 0)
@@ -2704,11 +2794,19 @@ class CodeTree {
                 }
                 return null;
             })
-            .on('click', (event, d) => this.onNodeClick(event, d))  // CRITICAL FIX: Add click handler to labels
-            .style('cursor', 'pointer');
+            .on('click', (event, d) => {
+                console.log('📝 [LABEL] Click on text label!', {
+                    nodeName: d?.data?.name,
+                    nodePath: d?.data?.path,
+                    hasOnNodeClick: typeof this.onNodeClick === 'function'
+                });
+                // Use bound method
+                this.onNodeClick(event, d);
+            })  // CRITICAL FIX: Add click handler to labels
+            .style('cursor', d => (d.data && (d.data.type === 'root' || d.data.isRoot || d.depth === 0)) ? 'default' : 'pointer');
 
         // Add icons for node types (files only, directories use expand icons)
-        nodeEnter.filter(d => d.data.type !== 'directory')
+        nodeEnter.filter(d => !this.isNodeDirectory(d))
             .append('text')
             .attr('class', 'node-icon')
             .attr('dy', '.35em')
@@ -2717,11 +2815,11 @@ class CodeTree {
             .text(d => this.getNodeIcon(d))
             .style('font-size', '10px')
             .style('fill', 'white')
-            .on('click', (event, d) => this.onNodeClick(event, d))  // CRITICAL FIX: Add click handler to file icons
+            .on('click', this.onNodeClick)  // CRITICAL FIX: Add click handler to file icons
             .style('cursor', 'pointer');
             
         // Add item count badges for directories
-        nodeEnter.filter(d => d.data.type === 'directory' && d.data.children)
+        nodeEnter.filter(d => this.isNodeDirectory(d) && d.data.children)
             .append('text')
             .attr('class', 'item-count-badge')
             .attr('x', 12)
@@ -2733,7 +2831,7 @@ class CodeTree {
             })
             .style('font-size', '9px')
             .style('opacity', 0.7)
-            .on('click', (event, d) => this.onNodeClick(event, d))  // CRITICAL FIX: Add click handler to count badges
+            .on('click', this.onNodeClick)  // CRITICAL FIX: Add click handler to count badges
             .style('cursor', 'pointer');
 
         // Transition to new positions
@@ -2741,11 +2839,20 @@ class CodeTree {
 
         // CRITICAL FIX: Ensure ALL nodes (new and existing) have click handlers
         // This fixes the issue where subdirectory clicks stop working after tree updates
-        nodeUpdate.on('click', (event, d) => this.onNodeClick(event, d));
+        nodeUpdate.on('click', (event, d) => {
+            console.log('🟡 [NODE-UPDATE] Click on updated node!', {
+                nodeName: d?.data?.name,
+                nodePath: d?.data?.path,
+                hasOnNodeClick: typeof this.onNodeClick === 'function',
+                thisContext: this
+            });
+            // Use bound method
+            this.onNodeClick(event, d);
+        });
         
-        // ADDITIONAL FIX: Also ensure click handlers on all child elements
-        nodeUpdate.selectAll('circle').on('click', (event, d) => this.onNodeClick(event, d));
-        nodeUpdate.selectAll('text').on('click', (event, d) => this.onNodeClick(event, d));
+        // ADDITIONAL FIX: Also ensure click handlers on all child elements using bound methods
+        nodeUpdate.selectAll('circle').on('click', this.onNodeClick);
+        nodeUpdate.selectAll('text').on('click', this.onNodeClick);
 
         nodeUpdate.transition()
             .duration(this.duration)
@@ -2761,7 +2868,7 @@ class CodeTree {
         // Update node classes based on current state
         nodeUpdate.attr('class', d => {
             let classes = ['node', 'code-node'];
-            if (d.data.type === 'directory') {
+            if (this.isNodeDirectory(d)) {
                 classes.push('directory');
                 if (d.data.loaded === true && d.children) {
                     classes.push('expanded');
@@ -2779,7 +2886,7 @@ class CodeTree {
         });
         
         nodeUpdate.select('circle.node-circle')
-            .attr('r', d => d.data.type === 'directory' ? 10 : 8)
+            .attr('r', d => this.isNodeDirectory(d) ? 10 : 8)
             .style('fill', d => this.getNodeColor(d))
             
         // Update expand/collapse icons
@@ -2793,7 +2900,7 @@ class CodeTree {
         // Update item count badges
         nodeUpdate.select('.item-count-badge')
             .text(d => {
-                if (d.data.type !== 'directory') return '';
+                if (!this.isNodeDirectory(d)) return '';
                 const count = d.data.children ? d.data.children.length : 0;
                 return count > 0 ? count : '';
             })
@@ -3104,7 +3211,9 @@ class CodeTree {
     onNodeClick(event, d) {
         const clickId = Date.now() + Math.random();
         // DEBUG: Log all clicks to verify handler is working
-        console.log(`🖱️ [NODE CLICK] Clicked on node (ID: ${clickId}):`, {
+        console.log(`🖱️🖱️🖱️ [NODE CLICK] onNodeClick method called! (ID: ${clickId}):`, {
+            thisContext: this,
+            isBound: this.constructor.name === 'CodeTree',
             name: d?.data?.name,
             path: d?.data?.path,
             type: d?.data?.type,
@@ -3137,7 +3246,13 @@ class CodeTree {
             console.error('[CodeTree] ERROR: d is null/undefined, cannot continue');
             return;
         }
-        
+
+        // Ignore clicks on root node - it should not be interactive
+        if (d.data && (d.data.type === 'root' || d.data.isRoot || d.depth === 0)) {
+            console.log('🚫 [ROOT CLICK] Ignoring click on root node:', d.data.name);
+            return;
+        }
+
         if (!d.data) {
             console.error('[CodeTree] ERROR: d.data is null/undefined, cannot continue');
             return;
@@ -3197,7 +3312,7 @@ class CodeTree {
         
         // Add pulsing animation immediately for directories
         
-        if (d.data.type === 'directory' && !d.data.loaded) {
+        if (this.isNodeDirectory(d) && !d.data.loaded) {
             try {
                 if (typeof this.addLoadingPulse === 'function') {
                     this.addLoadingPulse(d);
@@ -3231,11 +3346,12 @@ class CodeTree {
             type: d.data.type,
             loaded: d.data.loaded,
             loadedType: typeof d.data.loaded,
-            isDirectory: d.data.type === 'directory',
+            isDirectory: d.data.type === 'directory' || d.data.type === 'root',
             notLoaded: !d.data.loaded,
-            shouldLoad: d.data.type === 'directory' && !d.data.loaded
+            shouldLoad: (d.data.type === 'directory' || d.data.type === 'root') && !d.data.loaded
         });
-        if (d.data.type === 'directory' && !d.data.loaded) {
+        // Check for both 'directory' type and 'root' type (or use isDirectory flag)
+        if ((d.data.type === 'directory' || d.data.type === 'root' || d.data.isDirectory) && !d.data.loaded) {
             console.log('✅ [SUBDIRECTORY LOADING] Load check passed, proceeding with loading logic');
             console.log('🔍 [SUBDIRECTORY LOADING] Initial loading state:', {
                 loadingNodesSize: this.loadingNodes ? this.loadingNodes.size : 'undefined',
@@ -3306,12 +3422,12 @@ class CodeTree {
                 console.log('📡 [SUBDIRECTORY LOADING] Using REST API for directory:', {
                     originalPath: d.data.path,
                     fullPath: fullPath,
-                    apiUrl: `${window.location.origin}/api/directory/list?path=${encodeURIComponent(fullPath)}`,
+                    apiUrl: `${window.location.origin}/api/directory?path=${encodeURIComponent(fullPath)}`,
                     loadingNodesSize: this.loadingNodes.size,
                     loadingNodesContent: Array.from(this.loadingNodes)
                 });
                 
-                const apiUrl = `${window.location.origin}/api/directory/list?path=${encodeURIComponent(fullPath)}`;
+                const apiUrl = `${window.location.origin}/api/directory?path=${encodeURIComponent(fullPath)}`;
                 
                 fetch(apiUrl)
                     .then(response => {
@@ -3450,28 +3566,40 @@ class CodeTree {
                 this.showNotification(`Error loading directory: ${error.message}`, 'error');
             }
         }
-        // For files that haven't been analyzed, request analysis
-        else if (d.data.type === 'file' && !d.data.analyzed) {
-            // Only analyze files of selected languages
-            const fileLanguage = this.detectLanguage(d.data.path);
-            console.log('🔍 [FILE ANALYSIS] Language check:', {
+        // For files, handle both content display and analysis
+        else if (d.data.type === 'file') {
+            console.log('📄 [FILE CLICK] File clicked:', {
                 fileName: d.data.name,
                 filePath: d.data.path,
-                detectedLanguage: fileLanguage,
-                selectedLanguages: selectedLanguages,
-                isLanguageSelected: selectedLanguages.includes(fileLanguage),
-                shouldAnalyze: selectedLanguages.includes(fileLanguage) || fileLanguage === 'unknown'
+                analyzed: d.data.analyzed
             });
 
-            if (!selectedLanguages.includes(fileLanguage) && fileLanguage !== 'unknown') {
-                console.warn('⚠️ [FILE ANALYSIS] Skipping file:', {
+            // PHASE 1: Display file content in unified data viewer
+            this.displayFileInDataViewer(d);
+
+            // PHASE 2: Handle AST analysis for code files (if not already analyzed)
+            if (!d.data.analyzed) {
+                // Only analyze files of selected languages
+                const fileLanguage = this.detectLanguage(d.data.path);
+                console.log('🔍 [FILE ANALYSIS] Language check:', {
                     fileName: d.data.name,
+                    filePath: d.data.path,
                     detectedLanguage: fileLanguage,
                     selectedLanguages: selectedLanguages,
-                    reason: `${fileLanguage} not in selected languages`
+                    isLanguageSelected: selectedLanguages.includes(fileLanguage),
+                    shouldAnalyze: selectedLanguages.includes(fileLanguage) || fileLanguage === 'unknown'
                 });
-                this.showNotification(`Skipping ${d.data.name} - ${fileLanguage} not selected`, 'warning');
-                return;
+
+                if (!selectedLanguages.includes(fileLanguage) && fileLanguage !== 'unknown') {
+                    console.warn('⚠️ [FILE ANALYSIS] Skipping AST analysis for file:', {
+                        fileName: d.data.name,
+                        detectedLanguage: fileLanguage,
+                        selectedLanguages: selectedLanguages,
+                        reason: `${fileLanguage} not in selected languages`
+                    });
+                    // Still show file content, just skip AST analysis
+                    return;
+                }
             }
             
             // Add pulsing animation immediately
@@ -3526,7 +3654,7 @@ class CodeTree {
             }, 100);  // 100ms delay to ensure visual effects render first
         }
         // Toggle children visibility for already loaded nodes
-        else if (d.data.type === 'directory' && d.data.loaded === true) {
+        else if (this.isNodeDirectory(d) && d.data.loaded === true) {
             // Directory is loaded, toggle expansion
             if (d.children) {
                 // Collapse - hide children
@@ -3652,6 +3780,14 @@ class CodeTree {
         return path({source: s, target: d});
     }
 
+    /**
+     * Helper function to check if a node is a directory or root
+     */
+    isNodeDirectory(node) {
+        const data = node.data || node;
+        return data.type === 'directory' || data.type === 'root' || data.isDirectory === true;
+    }
+    
     /**
      * Get node color based on type and complexity
      */
@@ -3689,7 +3825,7 @@ class CodeTree {
         if (d.data.loaded === 'loading' || d.data.analyzed === 'loading') {
             return '#FCD34D';  // Yellow for loading
         }
-        if (d.data.type === 'directory' && !d.data.loaded) {
+        if (this.isNodeDirectory(d) && !d.data.loaded) {
             return '#94A3B8';  // Gray for unloaded
         }
         if (d.data.type === 'file' && !d.data.analyzed) {
@@ -3738,7 +3874,7 @@ class CodeTree {
         }
         
         // Special messages for lazy-loaded nodes
-        if (d.data.type === 'directory' && !d.data.loaded) {
+        if (this.isNodeDirectory(d) && !d.data.loaded) {
             info.push('<em>Click to explore contents</em>');
         } else if (d.data.type === 'file' && !d.data.analyzed) {
             info.push('<em>Click to analyze file</em>');
@@ -4084,11 +4220,19 @@ class CodeTree {
      * Show hierarchical source viewer for a source file
      */
     async showSourceViewer(node) {
-        console.log('📄 [SOURCE VIEWER] Showing source for:', node.data.path);
+        console.log('📄 [SOURCE VIEWER] Starting showSourceViewer for:', node.data.path);
+        console.log('  Node type:', node.data.type);
+        console.log('  Content element available:', !!this.structuredDataContent);
+        
+        if (!this.structuredDataContent) {
+            console.error('❌ [SOURCE VIEWER] No content element to display source in!');
+            return;
+        }
 
         // Create source viewer container
         const sourceViewer = document.createElement('div');
         sourceViewer.className = 'source-viewer';
+        console.log('📦 [SOURCE VIEWER] Created source viewer container');
 
         // Create header
         const header = document.createElement('div');
@@ -4108,7 +4252,11 @@ class CodeTree {
 
         sourceViewer.appendChild(header);
         sourceViewer.appendChild(content);
+        console.log('🔨 [SOURCE VIEWER] Appending source viewer to content element...');
         this.structuredDataContent.appendChild(sourceViewer);
+        console.log('✅ [SOURCE VIEWER] Source viewer added to DOM');
+        console.log('  Content element children count:', this.structuredDataContent.children.length);
+        console.log('  Content element HTML preview:', this.structuredDataContent.innerHTML.substring(0, 200) + '...');
 
         // Add control event listeners
         document.getElementById('expand-all-source')?.addEventListener('click', () => this.expandAllSource());
@@ -4378,39 +4526,98 @@ class CodeTree {
      * Initialize the structured data integration
      */
     initializeStructuredData() {
-        // Try to find the Code tab content area first
-        this.structuredDataContent = document.getElementById('code-module-data-content');
+        console.log('🔄 [CODE TREE] Initializing structured data integration...');
         
-        // Fall back to Events tab content area for backward compatibility
-        if (!this.structuredDataContent) {
-            this.structuredDataContent = document.getElementById('module-data-content');
-        }
+        // Use the existing "📊 Structured Data" section in the left panel
+        this.structuredDataContent = document.getElementById('module-data-content');
 
         if (!this.structuredDataContent) {
-            console.warn('Structured data content element not found');
+            console.warn('⏳ [CODE TREE] Structured data element not found yet, retrying in 500ms...');
+            
+            // Retry after a short delay in case DOM is still loading
+            setTimeout(() => {
+                this.structuredDataContent = document.getElementById('module-data-content');
+                
+                if (!this.structuredDataContent) {
+                    console.error('❌ [CODE TREE] Structured data content element (#module-data-content) not found after retry!');
+                    console.log('[CODE TREE] Checking DOM for available elements...');
+                    // Debug: List all elements with module or data in their ID
+                    const allElements = document.querySelectorAll('[id*="module"], [id*="data"]');
+                    console.log(`[CODE TREE] Found ${allElements.length} elements with "module" or "data" in ID:`);
+                    allElements.forEach(el => {
+                        console.log(`  - #${el.id} (class: ${el.className}, parent: ${el.parentElement?.id || 'no-parent'})`);
+                    });
+                    
+                    // Also check for the module viewer container
+                    const moduleViewer = document.querySelector('.module-viewer');
+                    if (moduleViewer) {
+                        console.log('[CODE TREE] Module viewer found, checking children...');
+                        const moduleDataContent = moduleViewer.querySelector('#module-data-content');
+                        if (moduleDataContent) {
+                            console.log('[CODE TREE] Found module-data-content via query selector!');
+                            this.structuredDataContent = moduleDataContent;
+                        } else {
+                            console.log('[CODE TREE] Module data content not found in module viewer');
+                        }
+                    }
+                } else {
+                    console.log('✅ [CODE TREE] Structured data integration initialized on retry');
+                    console.log('  Target element:', this.structuredDataContent);
+                    console.log('  Parent element:', this.structuredDataContent.parentElement);
+                }
+            }, 500);
             return;
         }
 
-        console.log('✅ Structured data integration initialized');
+        console.log('✅ [CODE TREE] Structured data integration initialized immediately');
+        console.log('  Target element:', this.structuredDataContent);
+        console.log('  Parent element:', this.structuredDataContent.parentElement);
     }
 
     /**
      * Update structured data with node information
      */
     updateStructuredData(node) {
+        console.log('📝 [STRUCTURED DATA] updateStructuredData called');
+        
         if (!this.structuredDataContent) {
-            return;
+            console.warn('⚠️ [STRUCTURED DATA] Content element not available, trying to find it...');
+            // Try to find it again in case it wasn't initialized properly
+            this.structuredDataContent = document.getElementById('module-data-content');
+            
+            if (!this.structuredDataContent) {
+                console.error('❌ [STRUCTURED DATA] Cannot find module-data-content element!');
+                // Last resort - try to find it in module viewer
+                const moduleViewer = document.querySelector('.module-viewer');
+                if (moduleViewer) {
+                    this.structuredDataContent = moduleViewer.querySelector('#module-data-content');
+                    if (this.structuredDataContent) {
+                        console.log('✅ [STRUCTURED DATA] Found element via module-viewer query');
+                    } else {
+                        console.error('❌ [STRUCTURED DATA] Still cannot find element, aborting update');
+                        return;
+                    }
+                } else {
+                    console.error('❌ [STRUCTURED DATA] Module viewer not found either, aborting update');
+                    return;
+                }
+            } else {
+                console.log('✅ [STRUCTURED DATA] Found element on retry');
+            }
         }
 
         console.log('🔍 [STRUCTURED DATA] Updating with node:', {
             name: node?.data?.name,
             type: node?.data?.type,
+            path: node?.data?.path,
             hasChildren: !!(node?.children || node?._children),
-            dataChildren: node?.data?.children?.length || 0
+            dataChildren: node?.data?.children?.length || 0,
+            contentElement: this.structuredDataContent
         });
 
         // Clear previous content
         this.structuredDataContent.innerHTML = '';
+        console.log('🧹 [STRUCTURED DATA] Cleared previous content');
 
         // Check if this is a source file that should show source viewer
         if (node.data.type === 'file' && this.isSourceFile(node.data.path)) {
@@ -5135,6 +5342,377 @@ main();
         return match ? match[1].length : 0;
     }
 
+    /**
+     * Auto-expand file node to show AST tree after analysis
+     */
+    autoExpandFileWithAST(filePath, fileNode) {
+        console.log('🌳 [AST EXPANSION] Auto-expanding file with AST:', {
+            filePath: filePath,
+            hasChildren: !!(fileNode && fileNode.children && fileNode.children.length > 0)
+        });
+
+        if (!fileNode || !fileNode.children || fileNode.children.length === 0) {
+            console.log('⚠️ [AST EXPANSION] No children to expand');
+            return;
+        }
+
+        // Find the D3 node for this file
+        const d3Node = this.findD3NodeByPath(filePath);
+        if (!d3Node) {
+            console.log('⚠️ [AST EXPANSION] D3 node not found for path:', filePath);
+            return;
+        }
+
+        // Rebuild the D3 hierarchy to include new children
+        this.root = d3.hierarchy(this.treeData);
+
+        // Find the updated D3 node
+        const updatedD3Node = this.findD3NodeByPath(filePath);
+        if (updatedD3Node) {
+            // Expand the file node to show AST elements
+            if (updatedD3Node._children || (updatedD3Node.children && updatedD3Node.children.length === 0)) {
+                updatedD3Node.children = updatedD3Node._children || updatedD3Node.children;
+                updatedD3Node._children = null;
+                updatedD3Node.data.expanded = true;
+
+                console.log('✅ [AST EXPANSION] Expanded file node to show AST elements:', {
+                    filePath: filePath,
+                    childrenCount: updatedD3Node.children ? updatedD3Node.children.length : 0
+                });
+
+                // Update the visualization
+                this.update(this.root);
+
+                // Show notification about AST expansion
+                const fileName = filePath.split('/').pop();
+                const astCount = updatedD3Node.children ? updatedD3Node.children.length : 0;
+                this.showNotification(`📊 ${fileName} - AST tree expanded with ${astCount} elements`, 'success');
+                this.updateBreadcrumb(`${fileName} - Code structure visible in tree`, 'success');
+            }
+        }
+    }
+
+    /**
+     * Display file content in the unified data viewer
+     */
+    displayFileInDataViewer(d) {
+        console.log('📊 [DATA VIEWER] Displaying file in data viewer:', {
+            fileName: d.data.name,
+            filePath: d.data.path,
+            fileType: d.data.type
+        });
+
+        // Create file data object for unified data viewer
+        const fileData = {
+            file_path: d.data.path,
+            name: d.data.name,
+            type: 'file',
+            size: d.data.size || 0,
+            extension: this.getFileExtension(d.data.path),
+            language: this.detectLanguage(d.data.path),
+            operations: [{
+                operation: 'view',
+                timestamp: new Date().toISOString(),
+                source: 'code_tree_click'
+            }],
+            // Add metadata for better display
+            metadata: {
+                clicked_from: 'code_tree',
+                node_type: d.data.type,
+                has_ast: d.data.analyzed || false,
+                tree_path: this.getNodePath(d)
+            }
+        };
+
+        // Use the unified data viewer to display file information
+        if (window.unifiedDataViewer) {
+            window.unifiedDataViewer.display(fileData, 'file_operation');
+            console.log('✅ [DATA VIEWER] File data displayed in unified viewer');
+        } else {
+            console.warn('⚠️ [DATA VIEWER] UnifiedDataViewer not available');
+        }
+
+        // Update module header to show current file
+        const moduleHeader = document.querySelector('.module-data-header h5');
+        if (moduleHeader) {
+            const fileName = d.data.name;
+            const fileIcon = this.getFileIcon(d.data.path);
+            moduleHeader.innerHTML = `${fileIcon} File: ${fileName}`;
+        }
+
+        // Add a small delay, then check if user wants to open full file viewer
+        // This gives them time to see the data viewer content first
+        setTimeout(() => {
+            this.offerFileViewerOption(d);
+        }, 1000);
+    }
+
+    /**
+     * Offer option to open file in full viewer modal
+     */
+    offerFileViewerOption(d) {
+        // Only offer for text files that can be displayed
+        if (!this.isTextFile(d.data.path)) {
+            return;
+        }
+
+        // Create a subtle notification with option to open full viewer
+        const fileName = d.data.name;
+        const notification = document.createElement('div');
+        notification.className = 'file-viewer-offer';
+        notification.innerHTML = `
+            <div class="offer-content">
+                <span class="offer-text">📄 ${fileName} loaded in data viewer</span>
+                <button class="offer-button" onclick="this.parentElement.parentElement.remove(); window.showFileViewerModal && window.showFileViewerModal('${d.data.path}')">
+                    🔍 Open Full Viewer
+                </button>
+                <button class="offer-close" onclick="this.parentElement.parentElement.remove()">×</button>
+            </div>
+        `;
+
+        // Style the notification
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #f8fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            max-width: 300px;
+            font-size: 14px;
+        `;
+
+        // Style the button
+        const style = document.createElement('style');
+        style.textContent = `
+            .offer-content {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+            .offer-text {
+                flex: 1;
+                color: #4a5568;
+            }
+            .offer-button {
+                background: #4299e1;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                padding: 4px 8px;
+                font-size: 12px;
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+            .offer-button:hover {
+                background: #3182ce;
+            }
+            .offer-close {
+                background: none;
+                border: none;
+                color: #a0aec0;
+                cursor: pointer;
+                font-size: 16px;
+                padding: 0;
+                width: 20px;
+                height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .offer-close:hover {
+                color: #718096;
+            }
+        `;
+
+        document.head.appendChild(style);
+        document.body.appendChild(notification);
+
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+            if (notification.parentElement) {
+                notification.remove();
+            }
+        }, 5000);
+    }
+
+    /**
+     * Check if file is a text file that can be displayed
+     */
+    isTextFile(filePath) {
+        if (!filePath) return false;
+
+        const ext = this.getFileExtension(filePath);
+        const textExtensions = [
+            'py', 'js', 'ts', 'jsx', 'tsx', 'html', 'css', 'json', 'md', 'txt',
+            'yml', 'yaml', 'xml', 'sql', 'sh', 'bash', 'dockerfile', 'makefile',
+            'gitignore', 'readme', 'cfg', 'conf', 'ini', 'toml', 'lock'
+        ];
+
+        return textExtensions.includes(ext) ||
+               textExtensions.includes(filePath.toLowerCase().split('/').pop());
+    }
+
+    /**
+     * Get the full path from root to the given node
+     */
+    getNodePath(d) {
+        const path = [];
+        let current = d;
+        while (current) {
+            if (current.data && current.data.name) {
+                path.unshift(current.data.name);
+            }
+            current = current.parent;
+        }
+        return path.join(' > ');
+    }
+
+    /**
+     * Get file extension from path
+     */
+    getFileExtension(filePath) {
+        if (!filePath) return '';
+        const parts = filePath.split('.');
+        return parts.length > 1 ? parts.pop().toLowerCase() : '';
+    }
+
+    /**
+     * Get descriptive file type for user messages
+     */
+    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',
+            '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'
+        };
+
+        return typeMap[ext] || 'File';
+    }
+
+    /**
+     * Count different types of AST elements
+     */
+    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
+     */
+    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 file icon based on file type
+     */
+    getFileIcon(filePath) {
+        if (!filePath) return '📄';
+
+        const ext = this.getFileExtension(filePath);
+        const iconMap = {
+            'py': '🐍',
+            'js': '📜',
+            'ts': '📘',
+            'jsx': '⚛️',
+            'tsx': '⚛️',
+            'html': '🌐',
+            'css': '🎨',
+            'json': '📋',
+            'md': '📝',
+            'txt': '📄',
+            'yml': '⚙️',
+            'yaml': '⚙️',
+            'xml': '📰',
+            'sql': '🗃️',
+            'sh': '🐚',
+            'bash': '🐚',
+            'dockerfile': '🐳',
+            'makefile': '🔨',
+            'gitignore': '🚫',
+            'readme': '📖'
+        };
+
+        return iconMap[ext] || iconMap[filePath.toLowerCase().split('/').pop()] || '📄';
+    }
+
     /**
      * Handle click on source line with AST elements
      */
@@ -5264,4 +5842,4 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
-});/* Cache buster: 1756393851 */
+});