claude-mpm 4.1.8__py3-none-any.whl → 4.1.11__py3-none-any.whl

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

@@ -0,0 +1,480 @@
+/**
+ * Code Viewer Component
+ * 
+ * Modal window for displaying source code with syntax highlighting.
+ * Supports navigation between parent/child nodes and shows code metrics.
+ */
+
+class CodeViewer {
+    constructor() {
+        this.modal = null;
+        this.currentNode = null;
+        this.socket = null;
+        this.initialized = false;
+        this.codeCache = new Map();
+    }
+
+    /**
+     * Initialize the code viewer
+     */
+    initialize() {
+        if (this.initialized) {
+            return;
+        }
+
+        this.createModal();
+        this.setupEventHandlers();
+        this.subscribeToEvents();
+        
+        this.initialized = true;
+        console.log('Code viewer initialized');
+    }
+
+    /**
+     * Create modal DOM structure
+     */
+    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>
+                </div>
+            </div>
+        `;
+
+        // Add modal to body
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        this.modal = document.getElementById('code-viewer-modal');
+    }
+
+    /**
+     * Setup event handlers
+     */
+    setupEventHandlers() {
+        // Close button
+        document.getElementById('code-viewer-close').addEventListener('click', () => {
+            this.hide();
+        });
+
+        // Close on backdrop click
+        this.modal.addEventListener('click', (e) => {
+            if (e.target === this.modal) {
+                this.hide();
+            }
+        });
+
+        // Close on ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.modal.classList.contains('show')) {
+                this.hide();
+            }
+        });
+
+        // Navigation buttons
+        document.getElementById('code-nav-parent').addEventListener('click', () => {
+            this.navigateToParent();
+        });
+
+        document.getElementById('code-nav-prev').addEventListener('click', () => {
+            this.navigateToPrevious();
+        });
+
+        document.getElementById('code-nav-next').addEventListener('click', () => {
+            this.navigateToNext();
+        });
+
+        // Action buttons
+        document.getElementById('code-copy').addEventListener('click', () => {
+            this.copyCode();
+        });
+
+        document.getElementById('code-open-file').addEventListener('click', () => {
+            this.openInEditor();
+        });
+    }
+
+    /**
+     * Subscribe to Socket.IO events
+     */
+    subscribeToEvents() {
+        if (window.socket) {
+            this.socket = window.socket;
+            
+            // Listen for code content responses
+            this.socket.on('code:content:response', (data) => {
+                this.handleCodeContent(data);
+            });
+        }
+    }
+
+    /**
+     * Show the code viewer with node data
+     */
+    show(nodeData) {
+        if (!this.initialized) {
+            this.initialize();
+        }
+
+        this.currentNode = nodeData;
+        this.modal.classList.add('show');
+        
+        // Update header
+        this.updateHeader(nodeData);
+        
+        // Load code content
+        this.loadCode(nodeData);
+        
+        // Update navigation
+        this.updateNavigation(nodeData);
+    }
+
+    /**
+     * Hide the code viewer
+     */
+    hide() {
+        this.modal.classList.remove('show');
+        this.currentNode = null;
+    }
+
+    /**
+     * Update modal header
+     */
+    updateHeader(nodeData) {
+        // Update title
+        const title = document.getElementById('code-viewer-title');
+        title.textContent = `${nodeData.name} (${nodeData.path || 'Unknown'})`;
+        
+        // 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 || '--'}`;
+    }
+
+    /**
+     * Load code content
+     */
+    loadCode(nodeData) {
+        const codeContent = document.getElementById('code-viewer-code-content');
+        
+        // Check cache first
+        const cacheKey = `${nodeData.path}:${nodeData.line}`;
+        if (this.codeCache.has(cacheKey)) {
+            this.displayCode(this.codeCache.get(cacheKey));
+            return;
+        }
+        
+        // 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);
+        }
+    }
+
+    /**
+     * Handle code content response
+     */
+    handleCodeContent(data) {
+        if (!data.success) {
+            this.displayError(data.error || 'Failed to load code');
+            return;
+        }
+        
+        // Cache the content
+        const cacheKey = `${data.path}:${data.line}`;
+        this.codeCache.set(cacheKey, data.content);
+        
+        // Display the code
+        this.displayCode(data.content);
+    }
+
+    /**
+     * Display code with syntax highlighting
+     */
+    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);
+            }
+        }
+    }
+
+    /**
+     * Display mock code for demo purposes
+     */
+    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`;
+        }
+        
+        this.displayCode(mockCode);
+    }
+
+    /**
+     * Display error message
+     */
+    displayError(message) {
+        const codeContent = document.getElementById('code-viewer-code-content');
+        codeContent.textContent = `# Error loading code\n# ${message}`;
+        codeContent.className = 'language-python';
+    }
+
+    /**
+     * Detect language from file path
+     */
+    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';
+    }
+
+    /**
+     * Update navigation buttons
+     */
+    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';
+    }
+
+    /**
+     * Navigate to parent node
+     */
+    navigateToParent() {
+        console.log('Navigate to parent node');
+        // Implementation would load parent node's code
+    }
+
+    /**
+     * Navigate to previous sibling
+     */
+    navigateToPrevious() {
+        console.log('Navigate to previous sibling');
+        // Implementation would load previous sibling's code
+    }
+
+    /**
+     * Navigate to next sibling
+     */
+    navigateToNext() {
+        console.log('Navigate to next sibling');
+        // Implementation would load next sibling's code
+    }
+
+    /**
+     * Copy code to clipboard
+     */
+    async copyCode() {
+        const codeContent = document.getElementById('code-viewer-code-content');
+        const code = codeContent.textContent;
+        
+        try {
+            await navigator.clipboard.writeText(code);
+            
+            // 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');
+        }
+    }
+
+    /**
+     * Open file in editor
+     */
+    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
+            });
+        }
+        
+        console.log('Opening file in editor:', this.currentNode.path);
+    }
+}
+
+// Create singleton instance
+const codeViewer = new CodeViewer();
+
+// Export for use in other modules
+if (typeof window !== 'undefined') {
+    window.CodeViewer = codeViewer;
+    
+    // Initialize when DOM is ready
+    document.addEventListener('DOMContentLoaded', () => {
+        codeViewer.initialize();
+    });
+}
+
+export default codeViewer;

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

@@ -39,7 +39,6 @@ class EventViewer {
 
         // Subscribe to socket events
         this.socketClient.onEventUpdate((events, sessions) => {
-            console.log('EventViewer received event update:', events?.length || 0, 'events');
             // Ensure we always have a valid events array
             this.events = Array.isArray(events) ? events : [];
             this.updateDisplay();
@@ -76,7 +75,6 @@ class EventViewer {
     setupKeyboardNavigation() {
         // Keyboard navigation is now handled by Dashboard.setupUnifiedKeyboardNavigation()
         // This method is kept for backward compatibility but does nothing
-        console.log('EventViewer: Keyboard navigation handled by unified Dashboard system');
     }
 
     /**
@@ -110,7 +108,10 @@ class EventViewer {
         }
 
         this.filteredEvents = this.events.filter(event => {
-            // Search filter
+            // NO AUTOMATIC FILTERING - All events are shown by default for complete visibility
+            // Users can apply their own filters using the search and type filter controls
+            
+            // User-controlled search filter
             if (this.searchFilter) {
                 const searchableText = [
                     event.type || '',
@@ -123,7 +124,7 @@ class EventViewer {
                 }
             }
 
-            // Type filter - now handles full hook types (like "hook.user_prompt") and main types
+            // User-controlled type filter - handles full hook types (like "hook.user_prompt") and main types
             if (this.typeFilter) {
                 // Use the same logic as formatEventType to get the full event type
                 const eventType = event.type && event.type.trim() !== '' ? event.type : '';
@@ -133,13 +134,14 @@ class EventViewer {
                 }
             }
 
-            // Session filter
+            // User-controlled session filter
             if (this.sessionFilter && this.sessionFilter !== '') {
                 if (!event.data || event.data.session_id !== this.sessionFilter) {
                     return false;
                 }
             }
 
+            // Allow all events through unless filtered by user controls
             return true;
         });
 
@@ -211,7 +213,6 @@ class EventViewer {
      * Update the display with current events
      */
     updateDisplay() {
-        console.log('EventViewer updating display with', this.events?.length || 0, 'events');
         this.updateEventTypeDropdown();
         this.applyFilters();
     }
@@ -223,6 +224,9 @@ class EventViewer {
         const eventsList = document.getElementById('events-list');
         if (!eventsList) return;
 
+        // Check if user is at bottom BEFORE rendering (for autoscroll decision)
+        const wasAtBottom = (eventsList.scrollTop + eventsList.clientHeight >= eventsList.scrollHeight - 10);
+
         if (this.filteredEvents.length === 0) {
             eventsList.innerHTML = `
                 <div class="no-events">
@@ -270,9 +274,12 @@ class EventViewer {
             window.dashboard.tabNavigation.events.items = this.filteredEventElements;
         }
 
-        // Auto-scroll to bottom if enabled
-        if (this.autoScroll && this.filteredEvents.length > 0) {
-            eventsList.scrollTop = eventsList.scrollHeight;
+        // Auto-scroll only if user was already at bottom before rendering
+        if (this.filteredEvents.length > 0 && wasAtBottom && this.autoScroll) {
+            // Use requestAnimationFrame to ensure DOM has updated
+            requestAnimationFrame(() => {
+                eventsList.scrollTop = eventsList.scrollHeight;
+            });
         }
     }
 
@@ -326,6 +333,8 @@ class EventViewer {
                 return this.formatMemoryEvent(event);
             case 'log':
                 return this.formatLogEvent(event);
+            case 'code':
+                return this.formatCodeEvent(event);
             default:
                 return this.formatGenericEvent(event);
         }
@@ -469,6 +478,47 @@ class EventViewer {
         return `<strong>[${level.toUpperCase()}]</strong> ${truncated}`;
     }
 
+    /**
+     * Format code analysis event data
+     */
+    formatCodeEvent(event) {
+        const data = event.data || {};
+        
+        // Handle different code event subtypes
+        if (event.subtype === 'progress') {
+            const message = data.message || 'Processing...';
+            const percentage = data.percentage;
+            if (percentage !== undefined) {
+                return `<strong>Progress:</strong> ${message} (${Math.round(percentage)}%)`;
+            }
+            return `<strong>Progress:</strong> ${message}`;
+        } else if (event.subtype === 'analysis:queued') {
+            return `<strong>Queued:</strong> Analysis for ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'analysis:start') {
+            return `<strong>Started:</strong> Analyzing ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'analysis:complete') {
+            const duration = data.duration ? ` (${data.duration.toFixed(2)}s)` : '';
+            return `<strong>Complete:</strong> Analysis finished${duration}`;
+        } else if (event.subtype === 'analysis:error') {
+            return `<strong>Error:</strong> ${data.message || 'Analysis failed'}`;
+        } else if (event.subtype === 'analysis:cancelled') {
+            return `<strong>Cancelled:</strong> Analysis stopped for ${data.path || 'Unknown path'}`;
+        } else if (event.subtype === 'file:start') {
+            return `<strong>File:</strong> Processing ${data.file || 'Unknown file'}`;
+        } else if (event.subtype === 'file:complete') {
+            const nodes = data.nodes_count !== undefined ? ` (${data.nodes_count} nodes)` : '';
+            return `<strong>File done:</strong> ${data.file || 'Unknown file'}${nodes}`;
+        } else if (event.subtype === 'node:found') {
+            return `<strong>Node:</strong> Found ${data.node_type || 'element'} "${data.name || 'unnamed'}"`;
+        } else if (event.subtype === 'error') {
+            return `<strong>Error:</strong> ${data.error || 'Unknown error'} in ${data.file || 'file'}`;
+        }
+        
+        // Generic fallback for code events
+        const json = JSON.stringify(data);
+        return `<strong>Code:</strong> ${json.length > 100 ? json.substring(0, 100) + '...' : json}`;
+    }
+
     /**
      * Format generic event data
      */

claude_mpm/dashboard/static/js/components/session-manager.js

@@ -65,6 +65,8 @@ class SessionManager {
     setupSocketListeners() {
         // Listen for socket event updates
         this.socketClient.onEventUpdate((events, sessions) => {
+            // Log the sessions data to debug
+            console.log('[SESSION-MANAGER] Received sessions update:', sessions);
             this.sessions = sessions;
             this.updateSessionSelect();
             // Update footer info when new events arrive
@@ -90,9 +92,28 @@ class SessionManager {
         // Store current selection
         const currentSelection = sessionSelect.value;
 
-        // Clear existing options except default ones
+        // Get the default working directory from various sources
+        let defaultWorkingDir = '/Users/masa/Projects/claude-mpm';
+        
+        // Try to get from working directory manager
+        if (window.dashboard && window.dashboard.workingDirectoryManager) {
+            defaultWorkingDir = window.dashboard.workingDirectoryManager.getDefaultWorkingDir();
+        } else {
+            // Fallback: Try to get from header display element
+            const headerWorkingDir = document.getElementById('working-dir-path');
+            if (headerWorkingDir?.textContent?.trim()) {
+                const headerPath = headerWorkingDir.textContent.trim();
+                if (headerPath !== 'Loading...' && headerPath !== 'Unknown') {
+                    defaultWorkingDir = headerPath;
+                }
+            }
+        }
+        
+        console.log('[SESSION-MANAGER] Using default working directory:', defaultWorkingDir);
+
+        // Update "All Sessions" option to show working directory
         sessionSelect.innerHTML = `
-            <option value="">All Sessions</option>
+            <option value="">${defaultWorkingDir} | All Sessions</option>
         `;
 
         // Add sessions from the sessions map
@@ -108,8 +129,23 @@ class SessionManager {
                 const startTime = new Date(session.startTime || session.last_activity).toLocaleString();
                 const eventCount = session.eventCount || session.event_count || 0;
                 const isActive = session.id === this.currentSessionId;
-
-                option.textContent = `${session.id.substring(0, 8)}... (${eventCount} events, ${startTime})${isActive ? ' [ACTIVE]' : ''}`;
+                
+                // Extract working directory from session or events
+                let workingDir = session.working_directory || session.workingDirectory || '';
+                
+                // Log for debugging
+                console.log(`[SESSION-DROPDOWN] Session ${session.id.substring(0, 8)} working_directory:`, workingDir);
+                
+                if (!workingDir) {
+                    const sessionData = this.extractSessionInfoFromEvents(session.id);
+                    workingDir = sessionData.workingDir || defaultWorkingDir;
+                    console.log(`[SESSION-DROPDOWN] Extracted working directory from events:`, workingDir);
+                }
+                
+                // Format display: working_directory | session_id...
+                const shortId = session.id.substring(0, 8);
+                const dirDisplay = workingDir || defaultWorkingDir;
+                option.textContent = `${dirDisplay} | ${shortId}...${isActive ? ' [ACTIVE]' : ''}`;
                 sessionSelect.appendChild(option);
             });
         }