claude-mpm 4.2.12__py3-none-any.whl → 4.2.14__py3-none-any.whl

claude_mpm/dashboard/static/js/dashboard.js

@@ -1214,38 +1214,61 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
 
     try {
         // Get the Socket.IO client
-        const socket = window.socket || window.dashboard?.socketClient?.socket;
+        const socket = window.socket || window.dashboard?.socketClient?.socket || window.socketClient?.socket;
+        
+        console.log('[FileViewer] Socket search results:', {
+            'window.socket': !!window.socket,
+            'window.socket.connected': window.socket?.connected,
+            'dashboard.socketClient.socket': !!window.dashboard?.socketClient?.socket,
+            'dashboard.socketClient.socket.connected': window.dashboard?.socketClient?.socket?.connected,
+            'window.socketClient.socket': !!window.socketClient?.socket,
+            'window.socketClient.socket.connected': window.socketClient?.socket?.connected
+        });
+        
         if (!socket) {
-            throw new Error('No socket connection available');
+            throw new Error('No socket connection available. Please ensure the dashboard is connected.');
         }
+        
+        if (!socket.connected) {
+            console.warn('[FileViewer] Socket found but not connected, attempting to use anyway...');
+        }
+        
+        console.log('[FileViewer] Socket found, setting up listener for file_content_response');
 
         // Set up one-time listener for file content response
         const responsePromise = new Promise((resolve, reject) => {
             const responseHandler = (data) => {
+                console.log('[FileViewer] Received file_content_response:', data);
                 if (data.file_path === filePath) {
                     socket.off('file_content_response', responseHandler);
                     if (data.success) {
+                        console.log('[FileViewer] File content loaded successfully');
                         resolve(data);
                     } else {
+                        console.error('[FileViewer] File read failed:', data.error);
                         reject(new Error(data.error || 'Failed to read file'));
                     }
                 }
             };
 
             socket.on('file_content_response', responseHandler);
+            console.log('[FileViewer] Listener registered for file_content_response');
 
             // Timeout after 10 seconds
             setTimeout(() => {
                 socket.off('file_content_response', responseHandler);
-                reject(new Error('Request timeout'));
+                console.error('[FileViewer] Request timeout after 10 seconds');
+                reject(new Error('Request timeout - server did not respond'));
             }, 10000);
         });
 
         // Send file read request
-        socket.emit('read_file', {
+        const requestData = {
             file_path: filePath,
             working_dir: workingDir
-        });
+        };
+        console.log('[FileViewer] Emitting read_file event with data:', requestData);
+        socket.emit('read_file', requestData);
 
         // File viewer request sent
 
@@ -1505,15 +1528,19 @@ function formatFileSize(bytes) {
 
 // File Viewer Modal Functions
 window.showFileViewerModal = async function(filePath) {
+    console.log('[FileViewer] Opening file:', filePath);
+    
     // Use the dashboard's current working directory
     let workingDir = '';
     if (window.dashboard && window.dashboard.currentWorkingDir) {
         workingDir = window.dashboard.currentWorkingDir;
+        console.log('[FileViewer] Using working directory:', workingDir);
     }
 
     // Create modal if it doesn't exist
     let modal = document.getElementById('file-viewer-modal');
     if (!modal) {
+        console.log('[FileViewer] Creating new modal');
         modal = createFileViewerModal();
         document.body.appendChild(modal);
 
@@ -1521,14 +1548,16 @@ window.showFileViewerModal = async function(filePath) {
         await new Promise(resolve => setTimeout(resolve, 10));
     }
 
+    // Show the modal as flex container first (ensures proper rendering)
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden'; // Prevent background scrolling
+
     // Update modal content
     updateFileViewerModal(modal, filePath, workingDir).catch(error => {
         console.error('Error updating file viewer modal:', error);
+        // Show error in the modal
+        displayFileContentError(modal, { error: error.message });
     });
-
-    // Show the modal as flex container
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden'; // Prevent background scrolling
 };
 
 window.hideFileViewerModal = function() {
@@ -1589,6 +1618,19 @@ function displayFileContentError(modal, result) {
     const errorArea = modal.querySelector('.file-viewer-error');
     const messageElement = modal.querySelector('.error-message');
     const suggestionsElement = modal.querySelector('.error-suggestions');
+    const loadingElement = modal.querySelector('.file-viewer-loading');
+    const contentArea = modal.querySelector('.file-viewer-content-area');
+    
+    // Hide loading and content areas, show error
+    if (loadingElement) {
+        loadingElement.style.display = 'none';
+    }
+    if (contentArea) {
+        contentArea.style.display = 'none';
+    }
+    if (errorArea) {
+        errorArea.style.display = 'flex';
+    }
 
     // Create user-friendly error messages
     let errorMessage = result.error || 'Unknown error occurred';
@@ -1599,6 +1641,10 @@ function displayFileContentError(modal, result) {
         errorMessage = '🔒 Permission denied accessing this file';
     } else if (errorMessage.includes('too large')) {
         errorMessage = '📏 File is too large to display';
+    } else if (errorMessage.includes('socket connection')) {
+        errorMessage = '🔌 Not connected to the server. Please check your connection.';
+    } else if (errorMessage.includes('timeout')) {
+        errorMessage = '⏱️ Request timed out. The server may be busy or unresponsive.';
     } else if (!errorMessage.includes('📁') && !errorMessage.includes('🔒') && !errorMessage.includes('📏')) {
         errorMessage = `⚠️ ${errorMessage}`;
     }

claude_mpm/dashboard/static/js/shared/dom-helpers.js

@@ -0,0 +1,396 @@
+/**
+ * DOM Helper Utilities
+ * 
+ * Common DOM manipulation utilities for dashboard components.
+ * Provides safe, consistent methods for element creation and manipulation.
+ * 
+ * @module dom-helpers
+ */
+
+const domHelpers = {
+    /**
+     * Create an element with attributes and content
+     * @param {string} tag - Element tag name
+     * @param {Object} attrs - Attributes to set
+     * @param {string|Element|Array} content - Element content
+     * @returns {HTMLElement} Created element
+     */
+    createElement(tag, attrs = {}, content = null) {
+        const element = document.createElement(tag);
+        
+        // Set attributes
+        for (const [key, value] of Object.entries(attrs)) {
+            if (key === 'className') {
+                element.className = value;
+            } else if (key === 'style' && typeof value === 'object') {
+                Object.assign(element.style, value);
+            } else if (key === 'dataset' && typeof value === 'object') {
+                for (const [dataKey, dataValue] of Object.entries(value)) {
+                    element.dataset[dataKey] = dataValue;
+                }
+            } else if (key.startsWith('on') && typeof value === 'function') {
+                const eventName = key.slice(2).toLowerCase();
+                element.addEventListener(eventName, value);
+            } else {
+                element.setAttribute(key, value);
+            }
+        }
+        
+        // Add content
+        if (content !== null) {
+            this.setContent(element, content);
+        }
+        
+        return element;
+    },
+
+    /**
+     * Set element content (supports text, HTML, elements, and arrays)
+     * @param {HTMLElement} element - Target element
+     * @param {string|Element|Array} content - Content to set
+     */
+    setContent(element, content) {
+        if (typeof content === 'string') {
+            element.textContent = content;
+        } else if (content instanceof HTMLElement) {
+            element.appendChild(content);
+        } else if (Array.isArray(content)) {
+            content.forEach(item => {
+                if (typeof item === 'string') {
+                    element.appendChild(document.createTextNode(item));
+                } else if (item instanceof HTMLElement) {
+                    element.appendChild(item);
+                }
+            });
+        }
+    },
+
+    /**
+     * Safely query selector with null check
+     * @param {string} selector - CSS selector
+     * @param {Element} context - Context element (default: document)
+     * @returns {Element|null} Found element or null
+     */
+    query(selector, context = document) {
+        try {
+            return context.querySelector(selector);
+        } catch (e) {
+            console.error(`Invalid selector: ${selector}`, e);
+            return null;
+        }
+    },
+
+    /**
+     * Safely query all matching elements
+     * @param {string} selector - CSS selector
+     * @param {Element} context - Context element (default: document)
+     * @returns {Array} Array of elements
+     */
+    queryAll(selector, context = document) {
+        try {
+            return Array.from(context.querySelectorAll(selector));
+        } catch (e) {
+            console.error(`Invalid selector: ${selector}`, e);
+            return [];
+        }
+    },
+
+    /**
+     * Add classes to element
+     * @param {HTMLElement} element - Target element
+     * @param {...string} classes - Classes to add
+     */
+    addClass(element, ...classes) {
+        if (element && element.classList) {
+            element.classList.add(...classes.filter(c => c));
+        }
+    },
+
+    /**
+     * Remove classes from element
+     * @param {HTMLElement} element - Target element
+     * @param {...string} classes - Classes to remove
+     */
+    removeClass(element, ...classes) {
+        if (element && element.classList) {
+            element.classList.remove(...classes);
+        }
+    },
+
+    /**
+     * Toggle classes on element
+     * @param {HTMLElement} element - Target element
+     * @param {string} className - Class to toggle
+     * @param {boolean} force - Force add (true) or remove (false)
+     * @returns {boolean} Whether class is now present
+     */
+    toggleClass(element, className, force) {
+        if (element && element.classList) {
+            return element.classList.toggle(className, force);
+        }
+        return false;
+    },
+
+    /**
+     * Check if element has class
+     * @param {HTMLElement} element - Target element
+     * @param {string} className - Class to check
+     * @returns {boolean} Whether element has class
+     */
+    hasClass(element, className) {
+        return element && element.classList && element.classList.contains(className);
+    },
+
+    /**
+     * Set multiple styles on element
+     * @param {HTMLElement} element - Target element
+     * @param {Object} styles - Style properties and values
+     */
+    setStyles(element, styles) {
+        if (element && element.style && styles) {
+            Object.assign(element.style, styles);
+        }
+    },
+
+    /**
+     * Get computed style value
+     * @param {HTMLElement} element - Target element
+     * @param {string} property - CSS property name
+     * @returns {string} Computed style value
+     */
+    getStyle(element, property) {
+        if (element) {
+            return window.getComputedStyle(element).getPropertyValue(property);
+        }
+        return '';
+    },
+
+    /**
+     * Show element (removes display: none)
+     * @param {HTMLElement} element - Element to show
+     * @param {string} displayValue - Display value to use (default: '')
+     */
+    show(element, displayValue = '') {
+        if (element && element.style) {
+            element.style.display = displayValue;
+        }
+    },
+
+    /**
+     * Hide element (sets display: none)
+     * @param {HTMLElement} element - Element to hide
+     */
+    hide(element) {
+        if (element && element.style) {
+            element.style.display = 'none';
+        }
+    },
+
+    /**
+     * Toggle element visibility
+     * @param {HTMLElement} element - Element to toggle
+     * @param {boolean} show - Force show (true) or hide (false)
+     */
+    toggle(element, show) {
+        if (element) {
+            if (show === undefined) {
+                show = element.style.display === 'none';
+            }
+            if (show) {
+                this.show(element);
+            } else {
+                this.hide(element);
+            }
+        }
+    },
+
+    /**
+     * Remove element from DOM
+     * @param {HTMLElement} element - Element to remove
+     */
+    remove(element) {
+        if (element && element.parentNode) {
+            element.parentNode.removeChild(element);
+        }
+    },
+
+    /**
+     * Empty element content
+     * @param {HTMLElement} element - Element to empty
+     */
+    empty(element) {
+        if (element) {
+            while (element.firstChild) {
+                element.removeChild(element.firstChild);
+            }
+        }
+    },
+
+    /**
+     * Insert element after reference element
+     * @param {HTMLElement} newElement - Element to insert
+     * @param {HTMLElement} referenceElement - Reference element
+     */
+    insertAfter(newElement, referenceElement) {
+        if (referenceElement && referenceElement.parentNode) {
+            referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
+        }
+    },
+
+    /**
+     * Wrap element with wrapper element
+     * @param {HTMLElement} element - Element to wrap
+     * @param {HTMLElement} wrapper - Wrapper element
+     */
+    wrap(element, wrapper) {
+        if (element && element.parentNode) {
+            element.parentNode.insertBefore(wrapper, element);
+            wrapper.appendChild(element);
+        }
+    },
+
+    /**
+     * Get element dimensions
+     * @param {HTMLElement} element - Target element
+     * @returns {Object} Width and height
+     */
+    getDimensions(element) {
+        if (element) {
+            return {
+                width: element.offsetWidth,
+                height: element.offsetHeight,
+                innerWidth: element.clientWidth,
+                innerHeight: element.clientHeight
+            };
+        }
+        return { width: 0, height: 0, innerWidth: 0, innerHeight: 0 };
+    },
+
+    /**
+     * Get element position relative to viewport
+     * @param {HTMLElement} element - Target element
+     * @returns {Object} Position coordinates
+     */
+    getPosition(element) {
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            return {
+                top: rect.top,
+                right: rect.right,
+                bottom: rect.bottom,
+                left: rect.left,
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+            };
+        }
+        return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0, width: 0, height: 0 };
+    },
+
+    /**
+     * Check if element is visible in viewport
+     * @param {HTMLElement} element - Element to check
+     * @param {boolean} partial - Allow partial visibility
+     * @returns {boolean} Whether element is visible
+     */
+    isInViewport(element, partial = false) {
+        if (!element) return false;
+        
+        const rect = element.getBoundingClientRect();
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        
+        const vertInView = partial
+            ? rect.top < windowHeight && rect.bottom > 0
+            : rect.top >= 0 && rect.bottom <= windowHeight;
+            
+        const horInView = partial
+            ? rect.left < windowWidth && rect.right > 0
+            : rect.left >= 0 && rect.right <= windowWidth;
+        
+        return vertInView && horInView;
+    },
+
+    /**
+     * Smoothly scroll element into view
+     * @param {HTMLElement} element - Element to scroll to
+     * @param {Object} options - Scroll options
+     */
+    scrollIntoView(element, options = {}) {
+        if (element && element.scrollIntoView) {
+            const defaultOptions = {
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest'
+            };
+            element.scrollIntoView({ ...defaultOptions, ...options });
+        }
+    },
+
+    /**
+     * Create DocumentFragment from HTML string
+     * @param {string} html - HTML string
+     * @returns {DocumentFragment} Document fragment
+     */
+    createFragment(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        return template.content;
+    },
+
+    /**
+     * Escape HTML special characters
+     * @param {string} text - Text to escape
+     * @returns {string} Escaped text
+     */
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    },
+
+    /**
+     * Debounce function calls
+     * @param {Function} func - Function to debounce
+     * @param {number} wait - Wait time in ms
+     * @returns {Function} Debounced function
+     */
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    },
+
+    /**
+     * Throttle function calls
+     * @param {Function} func - Function to throttle
+     * @param {number} limit - Time limit in ms
+     * @returns {Function} Throttled function
+     */
+    throttle(func, limit) {
+        let inThrottle;
+        return function(...args) {
+            if (!inThrottle) {
+                func.apply(this, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+};
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = domHelpers;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => domHelpers);
+} else {
+    window.domHelpers = domHelpers;
+}