claude-mpm 4.1.6__py3-none-any.whl → 4.24.0__py3-none-any.whl

claude_mpm/dashboard/static/js/components/file-tool-tracker.js

@@ -316,14 +316,24 @@ class FileToolTracker {
      * @returns {boolean} - True if tool operation
      */
     isToolOperation(event) {
-        // Tool operations have tool_name and are hook events with pre_tool or post_tool subtype
+        // Tool operations have tool_name - be more inclusive about event types
         // Check both top-level and data.tool_name for compatibility
         const hasToolName = event.tool_name || (event.data && event.data.tool_name);
-        const isHookEvent = event.type === 'hook';
-        const isToolSubtype = event.subtype === 'pre_tool' || event.subtype === 'post_tool' ||
-                              (event.subtype && typeof event.subtype === 'string' && event.subtype.includes('tool'));
-        
-        return hasToolName && isHookEvent && isToolSubtype;
+
+        // Accept multiple event types that might contain tool operations
+        const validEventTypes = ['hook', 'tool_use', 'tool', 'agent', 'response'];
+        const isValidEventType = validEventTypes.includes(event.type) ||
+                                 (event.type && event.type.includes('tool'));
+
+        // Check for tool-related subtypes or any indication this is a tool operation
+        const isToolSubtype = event.subtype === 'pre_tool' ||
+                              event.subtype === 'post_tool' ||
+                              (event.subtype && typeof event.subtype === 'string' && event.subtype.includes('tool')) ||
+                              event.type === 'tool_use' ||
+                              event.type === 'tool';
+
+        // If it has a tool_name and either a valid event type or tool subtype, it's a tool operation
+        return hasToolName && (isValidEventType || isToolSubtype);
     }
 
     /**
@@ -332,14 +342,20 @@ class FileToolTracker {
      * @returns {boolean} - True if file operation
      */
     isFileOperation(event) {
-        // File operations are tool events with tools that operate on files
+        // File operations are events with file-related tools - be more inclusive
         // Check both top-level and data for tool_name
         let toolName = event.tool_name || (event.data && event.data.tool_name) || '';
+
+        // If no tool name, not a file operation
+        if (!toolName) {
+            return false;
+        }
+
         toolName = toolName.toLowerCase();
-        
+
         // Check case-insensitively since tool names can come in different cases
         const fileTools = ['read', 'write', 'edit', 'grep', 'multiedit', 'glob', 'ls', 'bash', 'notebookedit'];
-        
+
         // Get tool parameters from either location
         const toolParams = event.tool_parameters || (event.data && event.data.tool_parameters);
 
@@ -352,7 +368,8 @@ class FileToolTracker {
             }
         }
 
-        return toolName && fileTools.includes(toolName);
+        // If it's a file tool, it's a file operation regardless of event type
+        return fileTools.includes(toolName);
     }
 
     /**
@@ -702,3 +719,6 @@ class FileToolTracker {
 // ES6 Module export
 export { FileToolTracker };
 export default FileToolTracker;
+
+// Make FileToolTracker globally available for dist/dashboard.js
+window.FileToolTracker = FileToolTracker;

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

@@ -0,0 +1,580 @@
+/**
+ * File Viewer Component
+ * 
+ * A simple file content viewer that displays file contents in a modal window.
+ * This component handles file loading via HTTP requests and displays the content
+ * with basic syntax highlighting support.
+ */
+
+class FileViewer {
+    constructor() {
+        this.modal = null;
+        this.currentFile = null;
+        this.initialized = false;
+        this.contentCache = new Map();
+    }
+
+    /**
+     * Initialize the file viewer
+     */
+    initialize() {
+        if (this.initialized) {
+            return;
+        }
+
+        this.createModal();
+        this.setupEventHandlers();
+        
+        this.initialized = true;
+        console.log('File viewer initialized');
+    }
+
+    /**
+     * Create modal DOM structure
+     */
+    createModal() {
+        const modalHtml = `
+            <div class="file-viewer-modal" id="file-viewer-modal">
+                <div class="file-viewer-content">
+                    <div class="file-viewer-header">
+                        <h2>📄 File Viewer</h2>
+                        <button class="file-viewer-close" id="file-viewer-close">×</button>
+                    </div>
+                    <div class="file-viewer-path" id="file-viewer-path">
+                        Loading...
+                    </div>
+                    <div class="file-viewer-body">
+                        <pre class="file-viewer-code" id="file-viewer-code">
+                            <code id="file-viewer-code-content">Loading file content...</code>
+                        </pre>
+                    </div>
+                    <div class="file-viewer-footer">
+                        <div class="file-viewer-info">
+                            <span id="file-viewer-type">Type: --</span>
+                            <span id="file-viewer-lines">Lines: --</span>
+                            <span id="file-viewer-size">Size: --</span>
+                        </div>
+                        <button class="file-viewer-copy" id="file-viewer-copy">📋 Copy</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Add modal to body
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        this.modal = document.getElementById('file-viewer-modal');
+
+        // Add styles if not already present
+        if (!document.getElementById('file-viewer-styles')) {
+            const styles = `
+                <style id="file-viewer-styles">
+                    .file-viewer-modal {
+                        display: none;
+                        position: fixed;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background: rgba(0, 0, 0, 0.7);
+                        z-index: 10000;
+                        animation: fadeIn 0.2s;
+                    }
+
+                    .file-viewer-modal.show {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+
+                    .file-viewer-content {
+                        background: #1e1e1e;
+                        border-radius: 8px;
+                        width: 90%;
+                        max-width: 1200px;
+                        height: 80%;
+                        display: flex;
+                        flex-direction: column;
+                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+                    }
+
+                    .file-viewer-header {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        padding: 15px 20px;
+                        background: #2d2d30;
+                        border-radius: 8px 8px 0 0;
+                        border-bottom: 1px solid #3e3e42;
+                    }
+
+                    .file-viewer-header h2 {
+                        margin: 0;
+                        color: #cccccc;
+                        font-size: 18px;
+                    }
+
+                    .file-viewer-close {
+                        background: none;
+                        border: none;
+                        color: #999;
+                        font-size: 24px;
+                        cursor: pointer;
+                        padding: 0;
+                        width: 30px;
+                        height: 30px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+
+                    .file-viewer-close:hover {
+                        color: #fff;
+                    }
+
+                    .file-viewer-path {
+                        padding: 10px 20px;
+                        background: #252526;
+                        color: #8b8b8b;
+                        font-family: 'Consolas', 'Monaco', monospace;
+                        font-size: 12px;
+                        border-bottom: 1px solid #3e3e42;
+                        word-break: break-all;
+                    }
+
+                    .file-viewer-body {
+                        flex: 1;
+                        overflow: auto;
+                        padding: 20px;
+                        background: #1e1e1e;
+                    }
+
+                    .file-viewer-code {
+                        margin: 0;
+                        padding: 0;
+                        background: transparent;
+                        overflow: visible;
+                    }
+
+                    .file-viewer-code code {
+                        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+                        font-size: 13px;
+                        line-height: 1.5;
+                        color: #d4d4d4;
+                        white-space: pre;
+                        display: block;
+                    }
+
+                    .file-viewer-footer {
+                        padding: 15px 20px;
+                        background: #2d2d30;
+                        border-top: 1px solid #3e3e42;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        border-radius: 0 0 8px 8px;
+                    }
+
+                    .file-viewer-info {
+                        display: flex;
+                        gap: 20px;
+                        color: #8b8b8b;
+                        font-size: 12px;
+                    }
+
+                    .file-viewer-copy {
+                        background: #0e639c;
+                        color: white;
+                        border: none;
+                        padding: 6px 12px;
+                        border-radius: 4px;
+                        cursor: pointer;
+                        font-size: 12px;
+                    }
+
+                    .file-viewer-copy:hover {
+                        background: #1177bb;
+                    }
+
+                    .file-viewer-copy.copied {
+                        background: #4ec9b0;
+                    }
+
+                    .file-viewer-error {
+                        color: #f48771;
+                        padding: 20px;
+                        text-align: center;
+                    }
+
+                    @keyframes fadeIn {
+                        from { opacity: 0; }
+                        to { opacity: 1; }
+                    }
+                </style>
+            `;
+            document.head.insertAdjacentHTML('beforeend', styles);
+        }
+    }
+
+    /**
+     * Setup event handlers
+     */
+    setupEventHandlers() {
+        // Close button
+        document.getElementById('file-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();
+            }
+        });
+
+        // Copy button
+        document.getElementById('file-viewer-copy').addEventListener('click', () => {
+            this.copyContent();
+        });
+    }
+
+    /**
+     * Show the file viewer with file content
+     */
+    async show(filePath) {
+        console.log('[FileViewer] show() called with path:', filePath);
+        console.log('[FileViewer] initialized:', this.initialized);
+        
+        if (!this.initialized) {
+            console.log('[FileViewer] Not initialized, initializing now...');
+            this.initialize();
+        }
+
+        this.currentFile = filePath;
+        this.modal.classList.add('show');
+        
+        // Update path
+        document.getElementById('file-viewer-path').textContent = filePath;
+        
+        console.log('[FileViewer] Modal shown, loading file content...');
+        // Load file content
+        await this.loadFileContent(filePath);
+    }
+
+    /**
+     * Hide the file viewer
+     */
+    hide() {
+        this.modal.classList.remove('show');
+        this.currentFile = null;
+    }
+
+    /**
+     * Load file content
+     */
+    async loadFileContent(filePath) {
+        const codeContent = document.getElementById('file-viewer-code-content');
+        
+        console.log('[FileViewer] loadFileContent called with path:', filePath);
+        
+        // Check cache first
+        if (this.contentCache.has(filePath)) {
+            console.log('[FileViewer] Using cached content for:', filePath);
+            this.displayContent(this.contentCache.get(filePath));
+            return;
+        }
+        
+        // Show loading state
+        codeContent.textContent = 'Loading file content...';
+        
+        try {
+            // Check if we have a socket connection available
+            if (window.socket && window.socket.connected) {
+                console.log('[FileViewer] Using Socket.IO to load file:', filePath);
+                
+                // Create a promise to wait for the response
+                const responsePromise = new Promise((resolve, reject) => {
+                    const timeoutId = setTimeout(() => {
+                        console.error('[FileViewer] Socket.IO request timed out for:', filePath);
+                        reject(new Error('Socket.IO request timed out'));
+                    }, 10000); // 10 second timeout
+                    
+                    // Set up one-time listener for the response
+                    window.socket.once('file_content_response', (data) => {
+                        clearTimeout(timeoutId);
+                        console.log('[FileViewer] Received file_content_response:', data);
+                        resolve(data);
+                    });
+                    
+                    // Emit the read_file event
+                    console.log('[FileViewer] Emitting read_file event with data:', {
+                        file_path: filePath,
+                        working_dir: window.workingDirectory || '/',
+                        max_size: 5 * 1024 * 1024  // 5MB limit
+                    });
+                    
+                    window.socket.emit('read_file', {
+                        file_path: filePath,
+                        working_dir: window.workingDirectory || '/',
+                        max_size: 5 * 1024 * 1024  // 5MB limit
+                    });
+                });
+                
+                // Wait for the response
+                const data = await responsePromise;
+                
+                if (data.success && data.content !== undefined) {
+                    console.log('[FileViewer] Successfully loaded file content, caching...');
+                    // Cache the content
+                    this.contentCache.set(filePath, data.content);
+                    
+                    // Display the content
+                    this.displayContent(data.content);
+                    
+                    // Update file info
+                    this.updateFileInfo(data);
+                } else {
+                    console.error('[FileViewer] Server returned error:', data.error);
+                    throw new Error(data.error || 'Failed to load file content');
+                }
+            } else {
+                console.error('[FileViewer] No Socket.IO connection available');
+                throw new Error('No socket connection available. Please ensure the dashboard is connected to the monitoring server.');
+            }
+        } catch (error) {
+            console.error('[FileViewer] Error loading file:', error);
+            console.error('[FileViewer] Error stack:', error.stack);
+            
+            // If API fails, show error message with helpful information
+            this.displayError(filePath, error.message);
+        }
+    }
+
+    /**
+     * Display file content
+     */
+    displayContent(content) {
+        const codeContent = document.getElementById('file-viewer-code-content');
+        
+        // Set the content
+        codeContent.textContent = content || '(Empty file)';
+        
+        // Update line count
+        const lines = content ? content.split('\n').length : 0;
+        document.getElementById('file-viewer-lines').textContent = `Lines: ${lines}`;
+        
+        // Update file size
+        const size = content ? new Blob([content]).size : 0;
+        document.getElementById('file-viewer-size').textContent = `Size: ${this.formatFileSize(size)}`;
+        
+        // Detect and set file type
+        const fileType = this.detectFileType(this.currentFile);
+        document.getElementById('file-viewer-type').textContent = `Type: ${fileType}`;
+        
+        // Apply syntax highlighting if Prism is available
+        if (window.Prism) {
+            const language = this.detectLanguage(this.currentFile);
+            codeContent.className = `language-${language}`;
+            Prism.highlightElement(codeContent);
+        }
+    }
+
+    /**
+     * Display error message
+     */
+    displayError(filePath, errorMessage) {
+        const codeContent = document.getElementById('file-viewer-code-content');
+        
+        // For now, show a helpful message since the API endpoint doesn't exist yet
+        const errorHtml = `
+            <div class="file-viewer-error">
+                ⚠️ File content loading is not yet implemented
+                
+                File path: ${filePath}
+                
+                The file viewing functionality requires:
+                1. A server-side /api/file endpoint
+                2. Proper file reading permissions
+                3. Security validation for file access
+                
+                Error: ${errorMessage}
+                
+                This feature will be available once the backend API is implemented.
+            </div>
+        `;
+        
+        codeContent.innerHTML = errorHtml;
+        
+        // Update info
+        document.getElementById('file-viewer-lines').textContent = 'Lines: --';
+        document.getElementById('file-viewer-size').textContent = 'Size: --';
+        document.getElementById('file-viewer-type').textContent = 'Type: --';
+    }
+
+    /**
+     * Update file info
+     */
+    updateFileInfo(data) {
+        if (data.lines !== undefined) {
+            document.getElementById('file-viewer-lines').textContent = `Lines: ${data.lines}`;
+        }
+        
+        if (data.size !== undefined) {
+            document.getElementById('file-viewer-size').textContent = `Size: ${this.formatFileSize(data.size)}`;
+        }
+        
+        if (data.type) {
+            document.getElementById('file-viewer-type').textContent = `Type: ${data.type}`;
+        }
+    }
+
+    /**
+     * Format file size for display
+     */
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    }
+
+    /**
+     * Detect file type from path
+     */
+    detectFileType(path) {
+        if (!path) return 'Unknown';
+        
+        const ext = path.split('.').pop()?.toLowerCase();
+        const typeMap = {
+            'py': 'Python',
+            'js': 'JavaScript',
+            'ts': 'TypeScript',
+            'jsx': 'React JSX',
+            'tsx': 'React TSX',
+            'html': 'HTML',
+            'css': 'CSS',
+            'json': 'JSON',
+            'xml': 'XML',
+            'yaml': 'YAML',
+            'yml': 'YAML',
+            'md': 'Markdown',
+            'txt': 'Text',
+            'sh': 'Shell Script',
+            'bash': 'Bash Script',
+            'sql': 'SQL',
+            'go': 'Go',
+            'rs': 'Rust',
+            'java': 'Java',
+            'cpp': 'C++',
+            'c': 'C',
+            'cs': 'C#',
+            'rb': 'Ruby',
+            'php': 'PHP'
+        };
+        
+        return typeMap[ext] || 'Text';
+    }
+
+    /**
+     * Detect language for syntax highlighting
+     */
+    detectLanguage(path) {
+        if (!path) return 'plaintext';
+        
+        const ext = path.split('.').pop()?.toLowerCase();
+        const languageMap = {
+            'py': 'python',
+            'js': 'javascript',
+            'ts': 'typescript',
+            'jsx': 'jsx',
+            'tsx': 'tsx',
+            'html': 'html',
+            'css': 'css',
+            'json': 'json',
+            'xml': 'xml',
+            'yaml': 'yaml',
+            'yml': 'yaml',
+            'md': 'markdown',
+            'sh': 'bash',
+            'bash': 'bash',
+            'sql': 'sql',
+            'go': 'go',
+            'rs': 'rust',
+            'java': 'java',
+            'cpp': 'cpp',
+            'c': 'c',
+            'cs': 'csharp',
+            'rb': 'ruby',
+            'php': 'php'
+        };
+        
+        return languageMap[ext] || 'plaintext';
+    }
+
+    /**
+     * Copy file content to clipboard
+     */
+    async copyContent() {
+        const codeContent = document.getElementById('file-viewer-code-content');
+        const button = document.getElementById('file-viewer-copy');
+        const content = codeContent.textContent;
+        
+        try {
+            await navigator.clipboard.writeText(content);
+            
+            // Show feedback
+            const originalText = button.textContent;
+            button.textContent = '✅ Copied!';
+            button.classList.add('copied');
+            
+            setTimeout(() => {
+                button.textContent = originalText;
+                button.classList.remove('copied');
+            }, 2000);
+        } catch (err) {
+            console.error('Failed to copy:', err);
+            alert('Failed to copy content to clipboard');
+        }
+    }
+}
+
+// Create singleton instance
+const fileViewer = new FileViewer();
+
+// Create global function for easy access
+// Only set if not already defined by dashboard.js
+if (!window.showFileViewerModal) {
+    window.showFileViewerModal = (filePath) => {
+        console.log('[FileViewer] showFileViewerModal called with path:', filePath);
+        fileViewer.show(filePath);
+    };
+}
+
+// Expose the singleton for debugging
+window.fileViewerInstance = fileViewer;
+
+// Export for use in other modules
+if (typeof window !== 'undefined') {
+    window.FileViewer = fileViewer;
+    
+    // Initialize when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+            fileViewer.initialize();
+        });
+    } else {
+        // DOM is already loaded
+        fileViewer.initialize();
+    }
+}
+
+export default fileViewer;