claude-mpm 4.2.39__py3-none-any.whl → 4.2.42__py3-none-any.whl

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

@@ -1,17 +1,29 @@
 /**
- * Code Viewer Component
+ * Code Viewer Component - File Activity Tree Viewer
  * 
- * Modal window for displaying source code with syntax highlighting.
- * Supports navigation between parent/child nodes and shows code metrics.
+ * Shows a D3.js tree visualization of files that have been viewed or edited,
+ * including AST paths (classes, functions, methods) extracted from the files.
+ * This is NOT a directory viewer but an activity-focused visualization.
+ * Renders in the File Tree tab of the dashboard.
  */
 
 class CodeViewer {
     constructor() {
-        this.modal = null;
-        this.currentNode = null;
-        this.socket = null;
+        this.container = null;
+        this.svg = null;
         this.initialized = false;
-        this.codeCache = new Map();
+        this.fileActivity = new Map(); // Map of file path to activity data
+        this.sessions = new Map();
+        this.currentSession = null;
+        this.treeData = null;
+        this.d3Tree = null;
+        this.d3Root = null;
+        this.selectedNode = null;
+        this.width = 800;
+        this.height = 600;
+        this.nodeRadius = 5;
+        this.renderInProgress = false; // Prevent concurrent renders
+        this.containerObserver = null;
     }
 
     /**
@@ -19,462 +31,1041 @@ class CodeViewer {
      */
     initialize() {
         if (this.initialized) {
+            console.log('[CodeViewer] Already initialized, skipping');
             return;
         }
 
-        this.createModal();
+        console.log('[CodeViewer] Initializing...');
+        this.setupContainer();
         this.setupEventHandlers();
         this.subscribeToEvents();
+        this.processExistingEvents();
         
         this.initialized = true;
-        console.log('Code viewer initialized');
+        console.log('[CodeViewer] Code Viewer (File Activity Tree) initialized successfully');
     }
 
     /**
-     * Create modal DOM structure
+     * Setup the container in the File Tree tab
      */
-    createModal() {
-        const modalHtml = `
-            <div class="code-viewer-modal" id="code-viewer-modal">
-                <div class="code-viewer-content">
-                    <div class="code-viewer-header">
-                        <div class="code-viewer-title" id="code-viewer-title">
-                            Loading...
-                        </div>
-                        <div class="code-viewer-info">
-                            <span id="code-viewer-type">Type: --</span>
-                            <span id="code-viewer-lines">Lines: --</span>
-                            <span id="code-viewer-complexity">Complexity: --</span>
-                        </div>
-                        <button class="code-viewer-close" id="code-viewer-close">×</button>
-                    </div>
-                    <div class="code-viewer-body">
-                        <pre class="code-viewer-code line-numbers" id="code-viewer-code">
-                            <code class="language-python" id="code-viewer-code-content"></code>
-                        </pre>
-                    </div>
-                    <div class="code-viewer-navigation">
-                        <div class="nav-group">
-                            <button class="code-nav-button" id="code-nav-parent" disabled>
-                                ⬆️ Parent
-                            </button>
-                            <button class="code-nav-button" id="code-nav-prev" disabled>
-                                ⬅️ Previous
-                            </button>
-                            <button class="code-nav-button" id="code-nav-next" disabled>
-                                ➡️ Next
-                            </button>
-                        </div>
-                        <div class="nav-info">
-                            <span id="code-nav-position">-- / --</span>
-                        </div>
-                        <div class="nav-actions">
-                            <button class="code-nav-button" id="code-copy">
-                                📋 Copy
-                            </button>
-                            <button class="code-nav-button" id="code-open-file">
-                                📂 Open File
-                            </button>
-                        </div>
-                    </div>
+    setupContainer() {
+        // Find the File Tree tab container
+        const treeContainer = document.getElementById('claude-tree-container');
+        if (!treeContainer) {
+            console.error('File Tree container not found');
+            return;
+        }
+
+        // Store the container reference
+        this.container = treeContainer;
+        
+        // Setup the activity tree interface
+        this.renderInterface();
+    }
+
+    /**
+     * Render the activity tree interface in the File Tree tab
+     */
+    renderInterface() {
+        if (!this.container) {
+            console.error('[CodeViewer] Container not found, cannot render interface');
+            return;
+        }
+
+        // Prevent concurrent renders
+        if (this.renderInProgress) {
+            console.log('[CodeViewer] Render already in progress, skipping');
+            return;
+        }
+        
+        // Check if interface already exists and is intact
+        const existingWrapper = this.container.querySelector('.activity-tree-wrapper');
+        const existingSvg = this.container.querySelector('#claude-activity-tree-svg');
+        if (existingWrapper && existingSvg) {
+            console.log('[CodeViewer] Interface already exists and is intact, skipping render');
+            return;
+        }
+        
+        this.renderInProgress = true;
+        console.log('[CodeViewer] Rendering interface in container:', this.container.id);
+        
+        // Temporarily disconnect observer to prevent loops
+        if (this.containerObserver) {
+            this.containerObserver.disconnect();
+        }
+        
+        // Clear any existing content completely
+        this.container.innerHTML = '';
+        
+        // Create the activity tree interface (without redundant session selector)
+        this.container.innerHTML = `
+            <div class="activity-tree-wrapper" style="height: 100%; display: flex; flex-direction: column;">
+                <div class="activity-controls" style="padding: 10px; border-bottom: 1px solid #ddd; background: #f9f9f9; display: flex; align-items: center; gap: 10px;">
+                    <button id="claude-expand-all-btn" class="control-btn" style="padding: 4px 8px; font-size: 0.9em;">Expand All</button>
+                    <button id="claude-collapse-all-btn" class="control-btn" style="padding: 4px 8px; font-size: 0.9em;">Collapse All</button>
+                    <button id="claude-reset-zoom-btn" class="control-btn" style="padding: 4px 8px; font-size: 0.9em;">Reset Zoom</button>
+                    <div class="stats" id="claude-tree-stats" style="margin-left: auto; font-size: 0.9em; color: #666;"></div>
+                </div>
+                <div class="tree-container" id="claude-tree-svg-container" style="flex: 1; overflow: hidden; position: relative; background: white;">
+                    <svg id="claude-activity-tree-svg" style="width: 100%; height: 100%;"></svg>
+                </div>
+                <div class="legend" style="padding: 5px 10px; border-top: 1px solid #ddd; background: #f9f9f9; font-size: 0.85em; display: flex; gap: 15px;">
+                    <span class="legend-item"><span style="color: #4CAF50;">●</span> File</span>
+                    <span class="legend-item"><span style="color: #2196F3;">●</span> Class</span>
+                    <span class="legend-item"><span style="color: #FF9800;">●</span> Function</span>
+                    <span class="legend-item"><span style="color: #9C27B0;">●</span> Method</span>
+                    <span class="legend-item"><span style="color: #F44336;">◆</span> Edited</span>
+                    <span class="legend-item"><span style="color: #4CAF50;">○</span> Viewed</span>
                 </div>
             </div>
         `;
 
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-        this.modal = document.getElementById('code-viewer-modal');
+        // Get container dimensions for tree sizing
+        const svgContainer = document.getElementById('claude-tree-svg-container');
+        if (svgContainer) {
+            const rect = svgContainer.getBoundingClientRect();
+            this.width = rect.width || 800;
+            this.height = rect.height || 600;
+        }
+        
+        // Mark render as complete and re-enable observer if needed
+        this.renderInProgress = false;
+        
+        // Re-enable container protection after render
+        if (this.containerObserver && this.container) {
+            this.containerObserver.observe(this.container, {
+                childList: true,
+                subtree: false // Only watch direct children, not subtree
+            });
+        }
     }
 
     /**
-     * Setup event handlers
+     * Render the content without switching tabs
+     * This is called by UIStateManager when the tab is already active
      */
-    setupEventHandlers() {
-        // Close button
-        document.getElementById('code-viewer-close').addEventListener('click', () => {
-            this.hide();
-        });
+    renderContent() {
+        console.log('[CodeViewer] renderContent() called');
+        this._showInternal();
+    }
+    
+    /**
+     * Show the activity tree (for backward compatibility)
+     * Note: Tab switching is now handled by UIStateManager
+     */
+    show() {
+        console.log('[CodeViewer] show() called');
+        this._showInternal();
+    }
+    
+    /**
+     * Internal show implementation (without tab switching)
+     */
+    _showInternal() {
+
+        // Get the file tree container
+        const claudeTreeContainer = document.getElementById('claude-tree-container');
+        if (!claudeTreeContainer) {
+            console.error('[CodeViewer] File Tree container not found!');
+            return;
+        }
 
-        // Close on backdrop click
-        this.modal.addEventListener('click', (e) => {
-            if (e.target === this.modal) {
-                this.hide();
+        // CRITICAL: Prevent other components from writing to this container
+        // Add multiple attributes to mark ownership strongly
+        claudeTreeContainer.setAttribute('data-owner', 'code-viewer');
+        claudeTreeContainer.setAttribute('data-tab-reserved', 'claude-tree');
+        claudeTreeContainer.setAttribute('data-component', 'CodeViewer');
+        
+        // Store the container reference if not already set
+        if (!this.container || this.container !== claudeTreeContainer) {
+            this.container = claudeTreeContainer;
+        }
+        
+        // Initialize if needed (this will setup container and render interface)
+        if (!this.initialized) {
+            this.initialize();
+        } else {
+            // Only render interface if it doesn't exist
+            const existingWrapper = this.container.querySelector('.activity-tree-wrapper');
+            if (!existingWrapper) {
+                console.log('[CodeViewer] Interface missing, rendering...');
+                this.renderInterface();
             }
-        });
+        }
+        
+        // Set up mutation observer to protect container (only if not already set)
+        if (!this.containerObserver) {
+            this.protectContainer();
+        }
+
+        // Setup event handlers for the new controls
+        this.setupControlHandlers();
+        
+        // Get current session from main selector
+        const mainSessionSelect = document.getElementById('session-select');
+        if (mainSessionSelect) {
+            this.currentSession = mainSessionSelect.value || null;
+        }
+        
+        // Build and render tree
+        this.buildTreeData();
+        this.renderTree();
+        
+        // Update stats
+        this.updateStats();
+        
+        console.log('[CodeViewer] show() completed, container should now have tree interface');
+    }
 
-        // Close on ESC key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.modal.classList.contains('show')) {
-                this.hide();
+    /**
+     * Protect the container from being overwritten by other components
+     */
+    protectContainer() {
+        const container = document.getElementById('claude-tree-container');
+        if (!container) return;
+        
+        // Disconnect any existing observer
+        if (this.containerObserver) {
+            this.containerObserver.disconnect();
+        }
+        
+        // Flag to prevent re-render loops
+        let reRenderScheduled = false;
+        
+        // Create a new observer to watch for unwanted changes
+        this.containerObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                // Check if nodes were added that shouldn't be there
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = node;
+                        
+                        // AGGRESSIVE filtering: Block ANY content that's not our tree interface
+                        const isUnwantedContent = (
+                            element.classList?.contains('event-item') ||
+                            element.classList?.contains('events-list') ||
+                            element.classList?.contains('no-events') ||
+                            element.id === 'events-list' ||
+                            (element.textContent && (
+                                element.textContent.includes('[hook]') ||
+                                element.textContent.includes('hook.user_prompt') ||
+                                element.textContent.includes('hook.pre_tool') ||
+                                element.textContent.includes('hook.post_tool') ||
+                                element.textContent.includes('Connect to Socket.IO') ||
+                                element.textContent.includes('No events')
+                            )) ||
+                            // Block any div without our expected classes
+                            (element.tagName === 'DIV' && 
+                             !element.classList?.contains('activity-tree-wrapper') &&
+                             !element.classList?.contains('activity-controls') &&
+                             !element.classList?.contains('tree-container') &&
+                             !element.classList?.contains('legend') &&
+                             !element.id?.startsWith('claude-'))
+                        );
+                        
+                        if (isUnwantedContent) {
+                            console.warn('[CodeViewer] BLOCKED unwanted content in File Tree container:', element);
+                            console.warn('[CodeViewer] Element classes:', element.classList?.toString());
+                            console.warn('[CodeViewer] Element text preview:', element.textContent?.substring(0, 100));
+                            
+                            // Remove the unwanted content immediately
+                            try {
+                                node.remove();
+                            } catch (e) {
+                                console.warn('[CodeViewer] Failed to remove unwanted node:', e);
+                            }
+                            
+                            // Schedule a single re-render if needed
+                            if (!reRenderScheduled && !this.renderInProgress) {
+                                reRenderScheduled = true;
+                                setTimeout(() => {
+                                    reRenderScheduled = false;
+                                    if (!container.querySelector('.activity-tree-wrapper')) {
+                                        console.log('[CodeViewer] Re-rendering interface after blocking unwanted content');
+                                        this.renderInterface();
+                                        this.setupControlHandlers();
+                                        this.buildTreeData();
+                                        this.renderTree();
+                                    }
+                                }, 50);
+                            }
+                        }
+                    }
+                }
+                
+                // Also check if our content was removed
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    for (const node of mutation.removedNodes) {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node;
+                            if (element.classList?.contains('activity-tree-wrapper')) {
+                                console.warn('[CodeViewer] Our tree interface was removed! Re-rendering...');
+                                if (!reRenderScheduled && !this.renderInProgress) {
+                                    reRenderScheduled = true;
+                                    setTimeout(() => {
+                                        reRenderScheduled = false;
+                                        this.renderInterface();
+                                        this.setupControlHandlers();
+                                        this.buildTreeData();
+                                        this.renderTree();
+                                    }, 50);
+                                }
+                            }
+                        }
+                    }
+                }
             }
         });
-
-        // Navigation buttons
-        document.getElementById('code-nav-parent').addEventListener('click', () => {
-            this.navigateToParent();
+        
+        // Start observing only direct children to reduce overhead
+        this.containerObserver.observe(container, {
+            childList: true,
+            subtree: false // Only watch direct children, not entire subtree
         });
+        
+        console.log('[CodeViewer] Container protection enabled with aggressive filtering');
+    }
 
-        document.getElementById('code-nav-prev').addEventListener('click', () => {
-            this.navigateToPrevious();
-        });
+    /**
+     * Setup event handlers for controls
+     */
+    setupControlHandlers() {
+        // Listen to main session selector changes
+        const mainSessionSelect = document.getElementById('session-select');
+        if (mainSessionSelect && !mainSessionSelect.hasAttribute('data-tree-listener')) {
+            mainSessionSelect.setAttribute('data-tree-listener', 'true');
+            mainSessionSelect.addEventListener('change', (e) => {
+                this.currentSession = e.target.value || null;
+                console.log('[CodeViewer] Session changed to:', this.currentSession);
+                if (this.isTabActive()) {
+                    this.buildTreeData();
+                    this.renderTree();
+                    this.updateStats();
+                }
+            });
+        }
 
-        document.getElementById('code-nav-next').addEventListener('click', () => {
-            this.navigateToNext();
-        });
+        // Expand all button
+        const expandBtn = document.getElementById('claude-expand-all-btn');
+        if (expandBtn && !expandBtn.hasAttribute('data-listener')) {
+            expandBtn.setAttribute('data-listener', 'true');
+            expandBtn.addEventListener('click', () => {
+                this.expandAllNodes();
+            });
+        }
 
-        // Action buttons
-        document.getElementById('code-copy').addEventListener('click', () => {
-            this.copyCode();
-        });
+        // Collapse all button
+        const collapseBtn = document.getElementById('claude-collapse-all-btn');
+        if (collapseBtn && !collapseBtn.hasAttribute('data-listener')) {
+            collapseBtn.setAttribute('data-listener', 'true');
+            collapseBtn.addEventListener('click', () => {
+                this.collapseAllNodes();
+            });
+        }
 
-        document.getElementById('code-open-file').addEventListener('click', () => {
-            this.openInEditor();
-        });
+        // Reset zoom button
+        const resetBtn = document.getElementById('claude-reset-zoom-btn');
+        if (resetBtn && !resetBtn.hasAttribute('data-listener')) {
+            resetBtn.setAttribute('data-listener', 'true');
+            resetBtn.addEventListener('click', () => {
+                this.resetZoom();
+            });
+        }
+    }
+
+    /**
+     * Setup event handlers
+     */
+    setupEventHandlers() {
+        // Tab handling is done in show() method
     }
 
     /**
-     * Subscribe to Socket.IO events
+     * Subscribe to events from socket and event bus
      */
     subscribeToEvents() {
+        // Listen for claude events from socket
         if (window.socket) {
-            this.socket = window.socket;
-            
-            // Listen for code content responses
-            this.socket.on('code:content:response', (data) => {
-                this.handleCodeContent(data);
+            window.socket.on('claude_event', (event) => {
+                console.log('[CodeViewer] Received claude_event:', event);
+                if (this.isFileOperationEvent(event)) {
+                    this.processClaudeEvent(event);
+                    // Only update if the File Tree tab is active
+                    if (this.isTabActive()) {
+                        this.buildTreeData();
+                        this.renderTree();
+                        this.updateStats();
+                    }
+                }
+            });
+        }
+
+        // Listen for events from event bus
+        if (window.eventBus) {
+            window.eventBus.on('claude_event', (event) => {
+                console.log('[CodeViewer] Received claude_event from eventBus:', event);
+                if (this.isFileOperationEvent(event)) {
+                    this.processClaudeEvent(event);
+                    // Only update if the File Tree tab is active
+                    if (this.isTabActive()) {
+                        this.buildTreeData();
+                        this.renderTree();
+                        this.updateStats();
+                    }
+                }
             });
         }
     }
 
     /**
-     * Show the code viewer with node data
+     * Check if File Tree tab is active
      */
-    show(nodeData) {
-        if (!this.initialized) {
-            this.initialize();
+    isTabActive() {
+        const claudeTreeContent = document.getElementById('claude-tree-tab');
+        return claudeTreeContent && claudeTreeContent.classList.contains('active');
+    }
+
+    /**
+     * Process existing events from dashboard
+     */
+    processExistingEvents() {
+        if (window.dashboard && window.dashboard.eventStore) {
+            const events = window.dashboard.eventStore.getAllEvents();
+            events.forEach(event => {
+                if (this.isFileOperationEvent(event)) {
+                    this.processClaudeEvent(event);
+                }
+            });
+        }
+    }
+
+    /**
+     * Check if an event is a file operation event
+     */
+    isFileOperationEvent(event) {
+        // Check if this is a hook event with file operation tool
+        if (event.type === 'hook' && 
+            (event.subtype === 'pre_tool' || event.subtype === 'post_tool') &&
+            event.data && event.data.tool_name) {
+            const fileOps = ['Read', 'Write', 'Edit', 'MultiEdit', 'NotebookEdit'];
+            return fileOps.includes(event.data.tool_name);
         }
+        return false;
+    }
+
+    /**
+     * Check if an event is a file operation (legacy format)
+     */
+    isFileOperation(event) {
+        const fileOps = ['Read', 'Write', 'Edit', 'MultiEdit', 'NotebookEdit'];
+        return fileOps.includes(event.tool_name);
+    }
+
+    /**
+     * Process a claude event with file operation
+     */
+    processClaudeEvent(event) {
+        if (!this.isFileOperationEvent(event)) return;
 
-        this.currentNode = nodeData;
-        this.modal.classList.add('show');
+        // Extract data from claude_event structure
+        const data = event.data || {};
+        const tool_name = data.tool_name;
+        const tool_parameters = data.tool_parameters || {};
+        const tool_output = data.tool_output;
+        const timestamp = event.timestamp || new Date().toISOString();
+        const session_id = event.session_id || data.session_id;
+        const working_directory = data.working_directory || '/';
         
-        // Update header
-        this.updateHeader(nodeData);
+        const filePath = tool_parameters.file_path || tool_parameters.notebook_path;
         
-        // Load code content
-        this.loadCode(nodeData);
+        console.log('[CodeViewer] Processing file operation:', tool_name, filePath);
         
-        // Update navigation
-        this.updateNavigation(nodeData);
+        this.processFileOperation({
+            tool_name,
+            tool_parameters,
+            tool_output,
+            timestamp,
+            session_id,
+            working_directory,
+            filePath
+        });
     }
 
     /**
-     * Hide the code viewer
+     * Process a file operation event (legacy format)
      */
-    hide() {
-        this.modal.classList.remove('show');
-        this.currentNode = null;
+    processEvent(event) {
+        if (!this.isFileOperation(event)) return;
+
+        const { tool_name, tool_parameters, tool_output, timestamp, session_id, working_directory } = event;
+        const filePath = tool_parameters?.file_path || tool_parameters?.notebook_path;
+        
+        this.processFileOperation({
+            tool_name,
+            tool_parameters,
+            tool_output,
+            timestamp,
+            session_id,
+            working_directory,
+            filePath
+        });
     }
 
     /**
-     * Update modal header
+     * Process a file operation
      */
-    updateHeader(nodeData) {
-        // Update title
-        const title = document.getElementById('code-viewer-title');
-        title.textContent = `${nodeData.name} (${nodeData.path || 'Unknown'})`;
+    processFileOperation({ tool_name, tool_parameters, tool_output, timestamp, session_id, working_directory, filePath }) {
+        if (!filePath) return;
+
+        // Track session
+        if (session_id && !this.sessions.has(session_id)) {
+            this.sessions.set(session_id, {
+                id: session_id,
+                working_directory: working_directory || '/',
+                files: new Set()
+            });
+            // Update session list when new session is added
+            this.updateSessionList();
+        }
+
+        // Get or create file activity
+        if (!this.fileActivity.has(filePath)) {
+            this.fileActivity.set(filePath, {
+                path: filePath,
+                operations: [],
+                sessions: new Set(),
+                working_directories: new Set(),
+                lastContent: null,
+                astPaths: []
+            });
+        }
+
+        const activity = this.fileActivity.get(filePath);
         
-        // Update info
-        document.getElementById('code-viewer-type').textContent = `Type: ${nodeData.type}`;
-        document.getElementById('code-viewer-lines').textContent = `Lines: ${nodeData.lines || '--'}`;
-        document.getElementById('code-viewer-complexity').textContent = `Complexity: ${nodeData.complexity || '--'}`;
+        // Add operation
+        activity.operations.push({
+            type: tool_name,
+            timestamp: timestamp,
+            parameters: tool_parameters,
+            output: tool_output,
+            session_id: session_id
+        });
+
+        // Track session and working directory
+        if (session_id) {
+            activity.sessions.add(session_id);
+            const session = this.sessions.get(session_id);
+            if (session) {
+                session.files.add(filePath);
+            }
+        }
+        if (working_directory) {
+            activity.working_directories.add(working_directory);
+        }
+
+        // Update content and extract AST if applicable
+        if (tool_name === 'Write' && tool_parameters.content) {
+            activity.lastContent = tool_parameters.content;
+            activity.astPaths = this.extractASTPaths(tool_parameters.content, filePath);
+        } else if (tool_name === 'Read' && tool_output?.content) {
+            activity.lastContent = tool_output.content;
+            activity.astPaths = this.extractASTPaths(tool_output.content, filePath);
+        } else if (tool_name === 'Edit' && activity.lastContent) {
+            // Apply edit to content if we have it
+            const oldString = tool_parameters.old_string;
+            const newString = tool_parameters.new_string;
+            if (oldString && newString) {
+                activity.lastContent = activity.lastContent.replace(oldString, newString);
+                activity.astPaths = this.extractASTPaths(activity.lastContent, filePath);
+            }
+        }
+        
+        console.log('[CodeViewer] File activity updated:', filePath, 'Total files:', this.fileActivity.size)
     }
 
     /**
-     * Load code content
+     * Extract AST paths from code content
      */
-    loadCode(nodeData) {
-        const codeContent = document.getElementById('code-viewer-code-content');
+    extractASTPaths(content, filePath) {
+        if (!content || typeof content !== 'string') return [];
         
-        // Check cache first
-        const cacheKey = `${nodeData.path}:${nodeData.line}`;
-        if (this.codeCache.has(cacheKey)) {
-            this.displayCode(this.codeCache.get(cacheKey));
-            return;
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        const paths = [];
+
+        if (ext === 'py') {
+            // Python: Extract classes, functions, and methods
+            const classRegex = /^class\s+(\w+)/gm;
+            const functionRegex = /^def\s+(\w+)/gm;
+            const methodRegex = /^\s{4,}def\s+(\w+)/gm;
+
+            let match;
+            while ((match = classRegex.exec(content)) !== null) {
+                paths.push({ name: match[1], type: 'class' });
+            }
+            while ((match = functionRegex.exec(content)) !== null) {
+                paths.push({ name: match[1], type: 'function' });
+            }
+            while ((match = methodRegex.exec(content)) !== null) {
+                if (!paths.some(p => p.name === match[1])) {
+                    paths.push({ name: match[1], type: 'method' });
+                }
+            }
+        } else if (ext === 'js' || ext === 'jsx' || ext === 'ts' || ext === 'tsx') {
+            // JavaScript/TypeScript: Extract classes, functions, methods
+            const classRegex = /class\s+(\w+)/g;
+            const functionRegex = /function\s+(\w+)/g;
+            const arrowFunctionRegex = /const\s+(\w+)\s*=\s*\([^)]*\)\s*=>/g;
+            const methodRegex = /(\w+)\s*\([^)]*\)\s*\{/g;
+
+            let match;
+            while ((match = classRegex.exec(content)) !== null) {
+                paths.push({ name: match[1], type: 'class' });
+            }
+            while ((match = functionRegex.exec(content)) !== null) {
+                paths.push({ name: match[1], type: 'function' });
+            }
+            while ((match = arrowFunctionRegex.exec(content)) !== null) {
+                paths.push({ name: match[1], type: 'function' });
+            }
         }
+
+        return paths;
+    }
+
+    /**
+     * Build tree data from file activity
+     */
+    buildTreeData() {
+        const root = {
+            name: 'File Activity',
+            type: 'root',
+            children: []
+        };
+
+        // Group by working directory
+        const dirMap = new Map();
+
+        for (const [filePath, activity] of this.fileActivity.entries()) {
+            // Filter by session if selected
+            if (this.currentSession) {
+                if (!activity.sessions.has(this.currentSession)) {
+                    continue;
+                }
+            }
+
+            // Determine working directory
+            const workingDirs = Array.from(activity.working_directories);
+            const workingDir = workingDirs[0] || '/';
+
+            if (!dirMap.has(workingDir)) {
+                dirMap.set(workingDir, {
+                    name: workingDir.split('/').pop() || workingDir,
+                    path: workingDir,
+                    type: 'directory',
+                    children: []
+                });
+            }
+
+            // Create file node
+            const fileName = filePath.split('/').pop();
+            const hasEdits = activity.operations.some(op => op.type === 'Edit' || op.type === 'Write');
+            
+            const fileNode = {
+                name: fileName,
+                path: filePath,
+                type: 'file',
+                edited: hasEdits,
+                operations: activity.operations.length,
+                children: []
+            };
+
+            // Add AST nodes
+            if (activity.astPaths.length > 0) {
+                activity.astPaths.forEach(ast => {
+                    fileNode.children.push({
+                        name: ast.name,
+                        type: ast.type,
+                        path: `${filePath}#${ast.name}`,
+                        children: []
+                    });
+                });
+            }
+
+            dirMap.get(workingDir).children.push(fileNode);
+        }
+
+        // Add directories to root
+        root.children = Array.from(dirMap.values());
         
-        // Show loading state
-        codeContent.textContent = 'Loading code...';
-        
-        // Request code from server
-        if (this.socket) {
-            this.socket.emit('code:content:request', {
-                path: nodeData.path,
-                line: nodeData.line,
-                type: nodeData.type,
-                name: nodeData.name
-            });
-        } else {
-            // Fallback: show mock code for demo
-            this.displayMockCode(nodeData);
+        // If only one directory and it's the root, flatten
+        if (root.children.length === 1 && root.children[0].path === '/') {
+            root.children = root.children[0].children;
         }
+
+        this.treeData = root;
     }
 
     /**
-     * Handle code content response
+     * Render the D3 tree
      */
-    handleCodeContent(data) {
-        if (!data.success) {
-            this.displayError(data.error || 'Failed to load code');
+    renderTree() {
+        if (!this.treeData || !this.container) return;
+
+        // Ensure SVG element exists
+        const svgElement = document.getElementById('claude-activity-tree-svg');
+        if (!svgElement) {
+            console.warn('[CodeViewer] SVG element not found, skipping tree render');
+            return;
+        }
+        
+        const svg = d3.select(svgElement);
+        if (svg.empty()) {
+            console.warn('[CodeViewer] D3 could not select SVG element');
             return;
         }
         
-        // Cache the content
-        const cacheKey = `${data.path}:${data.line}`;
-        this.codeCache.set(cacheKey, data.content);
+        svg.selectAll('*').remove();
+
+        // Get actual dimensions
+        const svgContainer = document.getElementById('claude-tree-svg-container');
+        if (svgContainer) {
+            const rect = svgContainer.getBoundingClientRect();
+            this.width = rect.width || 800;
+            this.height = rect.height || 600;
+        }
+
+        // Create container group for zoom/pan
+        const g = svg.append('g');
+
+        // Setup zoom behavior
+        const zoom = d3.zoom()
+            .scaleExtent([0.1, 4])
+            .on('zoom', (event) => {
+                g.attr('transform', event.transform);
+            });
+
+        svg.call(zoom);
+
+        // Create tree layout
+        const treeLayout = d3.tree()
+            .size([this.height - 100, this.width - 200]);
+
+        // Create hierarchy
+        this.d3Root = d3.hierarchy(this.treeData);
         
-        // Display the code
-        this.displayCode(data.content);
+        // Apply tree layout
+        treeLayout(this.d3Root);
+
+        // Create links
+        const link = g.selectAll('.link')
+            .data(this.d3Root.links())
+            .enter().append('path')
+            .attr('class', 'link')
+            .attr('d', d3.linkHorizontal()
+                .x(d => d.y + 100)
+                .y(d => d.x + 50))
+            .style('fill', 'none')
+            .style('stroke', '#ccc')
+            .style('stroke-width', 1);
+
+        // Create nodes
+        const node = g.selectAll('.node')
+            .data(this.d3Root.descendants())
+            .enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', d => `translate(${d.y + 100},${d.x + 50})`);
+
+        // Add circles for nodes
+        node.append('circle')
+            .attr('r', this.nodeRadius)
+            .style('fill', d => this.getNodeColor(d.data))
+            .style('stroke', d => d.data.edited ? '#F44336' : '#999')
+            .style('stroke-width', d => d.data.edited ? 2 : 1)
+            .style('cursor', 'pointer')
+            .on('click', (event, d) => this.handleNodeClick(event, d));
+
+        // Add text labels
+        node.append('text')
+            .attr('dy', '.35em')
+            .attr('x', d => d.children ? -10 : 10)
+            .style('text-anchor', d => d.children ? 'end' : 'start')
+            .style('font-size', '12px')
+            .style('cursor', 'pointer')
+            .text(d => d.data.name)
+            .on('click', (event, d) => this.handleNodeClick(event, d));
+
+        // Store tree reference
+        this.d3Tree = { svg, g, zoom };
     }
 
     /**
-     * Display code with syntax highlighting
+     * Get node color based on type
      */
-    displayCode(code) {
-        const codeContent = document.getElementById('code-viewer-code-content');
-        const codeElement = document.getElementById('code-viewer-code');
-        
-        // Set the code content
-        codeContent.textContent = code;
-        
-        // Update language class based on file extension
-        const language = this.detectLanguage(this.currentNode.path);
-        codeContent.className = `language-${language}`;
-        
-        // Apply Prism syntax highlighting
-        if (window.Prism) {
-            Prism.highlightElement(codeContent);
-            
-            // Add line numbers if plugin is available
-            if (Prism.plugins && Prism.plugins.lineNumbers) {
-                Prism.plugins.lineNumbers.resize(codeElement);
-            }
+    getNodeColor(node) {
+        switch (node.type) {
+            case 'root': return '#666';
+            case 'directory': return '#FFC107';
+            case 'file': return '#4CAF50';
+            case 'class': return '#2196F3';
+            case 'function': return '#FF9800';
+            case 'method': return '#9C27B0';
+            default: return '#999';
         }
     }
 
     /**
-     * Display mock code for demo purposes
+     * Handle node click
      */
-    displayMockCode(nodeData) {
-        let mockCode = '';
-        
-        switch (nodeData.type) {
-            case 'class':
-                mockCode = `class ${nodeData.name}:
-    """
-    ${nodeData.docstring || 'A sample class implementation.'}
-    """
-    
-    def __init__(self):
-        """Initialize the ${nodeData.name} class."""
-        self._data = {}
-        self._initialized = False
-    
-    def process(self, input_data):
-        """Process the input data."""
-        if not self._initialized:
-            self._initialize()
-        return self._transform(input_data)
-    
-    def _initialize(self):
-        """Initialize internal state."""
-        self._initialized = True
-    
-    def _transform(self, data):
-        """Transform the data."""
-        return data`;
-                break;
-                
-            case 'function':
-                mockCode = `def ${nodeData.name}(${nodeData.params ? nodeData.params.join(', ') : ''}):
-    """
-    ${nodeData.docstring || 'A sample function implementation.'}
-    
-    Args:
-        ${nodeData.params ? nodeData.params.map(p => `${p}: Description of ${p}`).join('\n        ') : 'None'}
-    
-    Returns:
-        ${nodeData.returns || 'None'}: Return value description
-    """
-    # Implementation here
-    result = None
-    
-    # Process logic
-    for item in range(10):
-        result = process_item(item)
-    
-    return result`;
-                break;
-                
-            case 'method':
-                mockCode = `    def ${nodeData.name}(self${nodeData.params ? ', ' + nodeData.params.join(', ') : ''}):
-        """
-        ${nodeData.docstring || 'A sample method implementation.'}
-        """
-        # Method implementation
-        self._validate()
-        result = self._process()
-        return result`;
-                break;
-                
-            default:
-                mockCode = `# ${nodeData.name}
-# Type: ${nodeData.type}
-# Path: ${nodeData.path || 'Unknown'}
-# Line: ${nodeData.line || 'Unknown'}
-
-# Code content would appear here
-# This is a placeholder for demonstration purposes`;
+    handleNodeClick(event, d) {
+        event.stopPropagation();
+        
+        // Toggle children
+        if (d.children) {
+            d._children = d.children;
+            d.children = null;
+        } else if (d._children) {
+            d.children = d._children;
+            d._children = null;
         }
+
+        // Re-render tree
+        this.renderTree();
+
+        // Update selection
+        this.selectedNode = d;
         
-        this.displayCode(mockCode);
+        // Update the data viewer in the left pane if it's a file
+        if (d.data.type === 'file' && this.fileActivity.has(d.data.path)) {
+            this.showFileDetails(d.data.path);
+        }
     }
 
     /**
-     * Display error message
+     * Show file details in the left viewer pane
      */
-    displayError(message) {
-        const codeContent = document.getElementById('code-viewer-code-content');
-        codeContent.textContent = `# Error loading code\n# ${message}`;
-        codeContent.className = 'language-python';
+    showFileDetails(filePath) {
+        const activity = this.fileActivity.get(filePath);
+        if (!activity) return;
+
+        const dataContent = document.getElementById('module-data-content');
+        if (!dataContent) return;
+
+        // Update header
+        const dataHeader = document.querySelector('.module-data-header h5');
+        if (dataHeader) {
+            dataHeader.innerHTML = `📄 ${filePath.split('/').pop()}`;
+        }
+
+        // Build operations display
+        let html = '<div style="padding: 10px; overflow-y: auto; height: 100%;">';
+        html += `<div style="margin-bottom: 15px;">`;
+        html += `<strong>File Path:</strong> ${filePath}<br>`;
+        html += `<strong>Operations:</strong> ${activity.operations.length}<br>`;
+        html += `<strong>Sessions:</strong> ${activity.sessions.size}`;
+        html += `</div>`;
+
+        // Show operations timeline
+        html += '<div style="margin-bottom: 15px;"><strong>Operations Timeline:</strong></div>';
+        activity.operations.forEach((op, index) => {
+            const time = new Date(op.timestamp).toLocaleTimeString();
+            html += `<div style="margin-bottom: 10px; padding: 8px; background: #f5f5f5; border-left: 3px solid ${this.getOperationColor(op.type)};">`;
+            html += `<div><strong>${op.type}</strong> at ${time}</div>`;
+            
+            if (op.type === 'Edit' && op.parameters) {
+                html += `<div style="margin-top: 5px; font-size: 0.9em;">`;
+                html += `<div style="color: #d32f2f;">- ${this.escapeHtml(op.parameters.old_string || '').substring(0, 100)}</div>`;
+                html += `<div style="color: #388e3c;">+ ${this.escapeHtml(op.parameters.new_string || '').substring(0, 100)}</div>`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+        });
+
+        // Show AST structure if available
+        if (activity.astPaths.length > 0) {
+            html += '<div style="margin-top: 15px;"><strong>AST Structure:</strong></div>';
+            html += '<ul style="list-style: none; padding-left: 10px;">';
+            activity.astPaths.forEach(ast => {
+                const icon = ast.type === 'class' ? '🔷' : ast.type === 'function' ? '🔶' : '🔸';
+                html += `<li>${icon} ${ast.name} (${ast.type})</li>`;
+            });
+            html += '</ul>';
+        }
+
+        html += '</div>';
+        dataContent.innerHTML = html;
     }
 
     /**
-     * Detect language from file path
+     * Get operation color
      */
-    detectLanguage(path) {
-        if (!path) return 'python';
-        
-        const ext = path.split('.').pop().toLowerCase();
-        const languageMap = {
-            'py': 'python',
-            'js': 'javascript',
-            'ts': 'typescript',
-            'jsx': 'jsx',
-            'tsx': 'tsx',
-            'css': 'css',
-            'html': 'html',
-            'json': 'json',
-            'yaml': 'yaml',
-            'yml': 'yaml',
-            'md': 'markdown',
-            'sh': 'bash',
-            'bash': 'bash',
-            'sql': 'sql',
-            'go': 'go',
-            'rs': 'rust',
-            'cpp': 'cpp',
-            'c': 'c',
-            'h': 'c',
-            'hpp': 'cpp',
-            'java': 'java',
-            'rb': 'ruby',
-            'php': 'php'
-        };
-        
-        return languageMap[ext] || 'plaintext';
+    getOperationColor(type) {
+        switch (type) {
+            case 'Write': return '#4CAF50';
+            case 'Edit': return '#FF9800';
+            case 'Read': return '#2196F3';
+            default: return '#999';
+        }
     }
 
     /**
-     * Update navigation buttons
+     * Escape HTML
      */
-    updateNavigation(nodeData) {
-        // For now, disable navigation buttons
-        // In a real implementation, these would navigate through the AST
-        document.getElementById('code-nav-parent').disabled = true;
-        document.getElementById('code-nav-prev').disabled = true;
-        document.getElementById('code-nav-next').disabled = true;
-        document.getElementById('code-nav-position').textContent = '1 / 1';
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
     }
 
     /**
-     * Navigate to parent node
+     * Expand all nodes
      */
-    navigateToParent() {
-        console.log('Navigate to parent node');
-        // Implementation would load parent node's code
+    expandAllNodes() {
+        if (!this.d3Root) return;
+        
+        this.d3Root.descendants().forEach(d => {
+            if (d._children) {
+                d.children = d._children;
+                d._children = null;
+            }
+        });
+        
+        this.renderTree();
     }
 
     /**
-     * Navigate to previous sibling
+     * Collapse all nodes
      */
-    navigateToPrevious() {
-        console.log('Navigate to previous sibling');
-        // Implementation would load previous sibling's code
+    collapseAllNodes() {
+        if (!this.d3Root) return;
+        
+        this.d3Root.descendants().forEach(d => {
+            if (d.children && d.depth > 0) {
+                d._children = d.children;
+                d.children = null;
+            }
+        });
+        
+        this.renderTree();
     }
 
     /**
-     * Navigate to next sibling
+     * Reset zoom
      */
-    navigateToNext() {
-        console.log('Navigate to next sibling');
-        // Implementation would load next sibling's code
+    resetZoom() {
+        if (!this.d3Tree) return;
+        
+        this.d3Tree.svg.transition()
+            .duration(750)
+            .call(this.d3Tree.zoom.transform, d3.zoomIdentity);
     }
 
     /**
-     * Copy code to clipboard
+     * Update session list in main selector
      */
-    async copyCode() {
-        const codeContent = document.getElementById('code-viewer-code-content');
-        const code = codeContent.textContent;
+    updateSessionList() {
+        // Update the main session selector if it exists
+        const mainSelect = document.getElementById('session-select');
+        if (!mainSelect) return;
+
+        const currentValue = mainSelect.value;
         
-        try {
-            await navigator.clipboard.writeText(code);
+        // Clear existing options except "All Sessions"
+        while (mainSelect.options.length > 1) {
+            mainSelect.remove(1);
+        }
+
+        // Add session options from our tracked sessions
+        for (const [sessionId, session] of this.sessions.entries()) {
+            // Check if option already exists
+            let exists = false;
+            for (let i = 0; i < mainSelect.options.length; i++) {
+                if (mainSelect.options[i].value === sessionId) {
+                    exists = true;
+                    break;
+                }
+            }
             
-            // Show feedback
-            const button = document.getElementById('code-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
-        } catch (err) {
-            console.error('Failed to copy code:', err);
-            alert('Failed to copy code to clipboard');
+            if (!exists) {
+                const option = document.createElement('option');
+                option.value = sessionId;
+                option.textContent = `Session ${sessionId.substring(0, 8)}... (${session.files.size} files)`;
+                mainSelect.appendChild(option);
+            }
+        }
+        
+        // Restore previous selection if it still exists
+        if (currentValue) {
+            mainSelect.value = currentValue;
         }
     }
 
     /**
-     * Open file in editor
+     * Update statistics
      */
-    openInEditor() {
-        if (!this.currentNode || !this.currentNode.path) {
-            alert('File path not available');
-            return;
-        }
-        
-        // Emit event to open file
-        if (this.socket) {
-            this.socket.emit('file:open', {
-                path: this.currentNode.path,
-                line: this.currentNode.line
-            });
-        }
+    updateStats() {
+        const stats = document.getElementById('claude-tree-stats');
+        if (!stats) return;
+
+        const totalFiles = this.currentSession
+            ? Array.from(this.fileActivity.values()).filter(a => a.sessions.has(this.currentSession)).length
+            : this.fileActivity.size;
         
-        console.log('Opening file in editor:', this.currentNode.path);
+        const totalOps = this.currentSession
+            ? Array.from(this.fileActivity.values())
+                .filter(a => a.sessions.has(this.currentSession))
+                .reduce((sum, a) => sum + a.operations.length, 0)
+            : Array.from(this.fileActivity.values())
+                .reduce((sum, a) => sum + a.operations.length, 0);
+
+        stats.textContent = `Files: ${totalFiles} | Operations: ${totalOps} | Sessions: ${this.sessions.size}`;
     }
 }
 
-// Create singleton instance
-const codeViewer = new CodeViewer();
+// Create and export singleton instance
+window.CodeViewer = new CodeViewer();
 
-// Export for use in other modules
-if (typeof window !== 'undefined') {
-    window.CodeViewer = codeViewer;
-    
-    // Initialize when DOM is ready
+// Auto-initialize when DOM is ready
+if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => {
-        codeViewer.initialize();
+        window.CodeViewer.initialize();
+        
+        // If File Tree tab is already active, show it
+        const claudeTreeTab = document.getElementById('claude-tree-tab');
+        if (claudeTreeTab && claudeTreeTab.classList.contains('active')) {
+            console.log('[CodeViewer] File Tree tab is active on load, showing tree...');
+            setTimeout(() => window.CodeViewer.show(), 100);
+        }
     });
+} else {
+    window.CodeViewer.initialize();
+    
+    // If File Tree tab is already active, show it
+    const claudeTreeTab = document.getElementById('claude-tree-tab');
+    if (claudeTreeTab && claudeTreeTab.classList.contains('active')) {
+        console.log('[CodeViewer] File Tree tab is active, showing tree...');
+        setTimeout(() => window.CodeViewer.show(), 100);
+    }
 }
 
-export default codeViewer;
+// Also listen for tab changes to ensure we render when needed
+document.addEventListener('tabChanged', (event) => {
+    if (event.detail && event.detail.newTab === 'claude-tree') {
+        console.log('[CodeViewer] Tab changed to File Tree, forcing show...');
+        setTimeout(() => window.CodeViewer.show(), 50);
+    }
+});
+
+// Tab click handling is now done by UIStateManager
+// CodeViewer.renderContent() is called when the File Tree tab is activated
+
+// FALLBACK: Periodic check to ensure File Tree tab is properly rendered
+setInterval(() => {
+    const claudeTreeTab = document.getElementById('claude-tree-tab');
+    const claudeTreeContainer = document.getElementById('claude-tree-container');
+    
+    if (claudeTreeTab && claudeTreeTab.classList.contains('active') && 
+        claudeTreeContainer && !claudeTreeContainer.querySelector('.activity-tree-wrapper')) {
+        console.log('[CodeViewer] Periodic check: File Tree tab is active but not properly rendered, fixing...');
+        window.CodeViewer.show();
+    }
+}, 5000);