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

claude_mpm/dashboard/static/js/shared/tooltip-service.js

@@ -0,0 +1,253 @@
+/**
+ * Unified Tooltip Service
+ * 
+ * Provides a consistent tooltip implementation for all dashboard components.
+ * Supports different tooltip types and behaviors.
+ * 
+ * @module tooltip-service
+ */
+
+class TooltipService {
+    constructor() {
+        this.tooltips = new Map();
+        this.defaultOptions = {
+            className: 'dashboard-tooltip',
+            duration: 200,
+            offset: { x: 10, y: -28 },
+            hideDelay: 500
+        };
+    }
+
+    /**
+     * Create a new tooltip instance
+     * @param {string} id - Unique identifier for the tooltip
+     * @param {Object} options - Configuration options
+     * @returns {Object} Tooltip instance
+     */
+    create(id, options = {}) {
+        const config = { ...this.defaultOptions, ...options };
+        
+        // Check if tooltip already exists
+        if (this.tooltips.has(id)) {
+            return this.tooltips.get(id);
+        }
+
+        // Create tooltip element
+        const tooltip = d3.select('body').append('div')
+            .attr('class', config.className)
+            .style('opacity', 0)
+            .style('position', 'absolute')
+            .style('pointer-events', 'none')
+            .style('background', 'rgba(0, 0, 0, 0.8)')
+            .style('color', '#fff')
+            .style('padding', '8px 12px')
+            .style('border-radius', '4px')
+            .style('font-size', '12px')
+            .style('font-family', 'system-ui, -apple-system, sans-serif')
+            .style('z-index', '10000');
+
+        const instance = {
+            element: tooltip,
+            config,
+            show: (event, content) => this.show(tooltip, event, content, config),
+            hide: () => this.hide(tooltip, config),
+            update: (content) => this.update(tooltip, content),
+            destroy: () => this.destroy(id)
+        };
+
+        this.tooltips.set(id, instance);
+        return instance;
+    }
+
+    /**
+     * Show a tooltip
+     * @param {Object} tooltip - D3 selection of tooltip element
+     * @param {Event} event - Mouse event
+     * @param {string|Array|Object} content - Content to display
+     * @param {Object} config - Configuration options
+     */
+    show(tooltip, event, content, config) {
+        // Cancel any pending hide transition
+        tooltip.interrupt();
+
+        // Format content
+        const html = this.formatContent(content);
+        
+        tooltip.html(html)
+            .style('left', (event.pageX + config.offset.x) + 'px')
+            .style('top', (event.pageY + config.offset.y) + 'px');
+
+        tooltip.transition()
+            .duration(config.duration)
+            .style('opacity', 0.9);
+
+        // Ensure tooltip stays within viewport
+        this.adjustPosition(tooltip, event, config);
+    }
+
+    /**
+     * Hide a tooltip
+     * @param {Object} tooltip - D3 selection of tooltip element
+     * @param {Object} config - Configuration options
+     */
+    hide(tooltip, config) {
+        tooltip.transition()
+            .duration(config.hideDelay)
+            .style('opacity', 0);
+    }
+
+    /**
+     * Update tooltip content without changing position
+     * @param {Object} tooltip - D3 selection of tooltip element
+     * @param {string|Array|Object} content - New content
+     */
+    update(tooltip, content) {
+        const html = this.formatContent(content);
+        tooltip.html(html);
+    }
+
+    /**
+     * Format content for display
+     * @param {string|Array|Object} content - Content to format
+     * @returns {string} HTML string
+     */
+    formatContent(content) {
+        if (typeof content === 'string') {
+            return content;
+        }
+
+        if (Array.isArray(content)) {
+            return content.join('<br>');
+        }
+
+        if (typeof content === 'object' && content !== null) {
+            const lines = [];
+            
+            // Handle title
+            if (content.title) {
+                lines.push(`<strong>${this.escapeHtml(content.title)}</strong>`);
+            }
+
+            // Handle fields
+            if (content.fields) {
+                for (const [key, value] of Object.entries(content.fields)) {
+                    if (value !== undefined && value !== null) {
+                        lines.push(`${this.escapeHtml(key)}: ${this.escapeHtml(String(value))}`);
+                    }
+                }
+            }
+
+            // Handle description
+            if (content.description) {
+                lines.push(`<em>${this.escapeHtml(content.description)}</em>`);
+            }
+
+            // Handle raw HTML (trusted content only)
+            if (content.html) {
+                lines.push(content.html);
+            }
+
+            return lines.join('<br>');
+        }
+
+        return String(content);
+    }
+
+    /**
+     * Adjust tooltip position to stay within viewport
+     * @param {Object} tooltip - D3 selection of tooltip element
+     * @param {Event} event - Mouse event
+     * @param {Object} config - Configuration options
+     */
+    adjustPosition(tooltip, event, config) {
+        const node = tooltip.node();
+        if (!node) return;
+
+        const rect = node.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        
+        let left = event.pageX + config.offset.x;
+        let top = event.pageY + config.offset.y;
+
+        // Adjust horizontal position
+        if (rect.right > viewportWidth) {
+            left = event.pageX - rect.width - config.offset.x;
+        }
+
+        // Adjust vertical position
+        if (rect.bottom > viewportHeight) {
+            top = event.pageY - rect.height - Math.abs(config.offset.y);
+        }
+
+        tooltip
+            .style('left', left + 'px')
+            .style('top', top + 'px');
+    }
+
+    /**
+     * Destroy a tooltip instance
+     * @param {string} id - Tooltip identifier
+     */
+    destroy(id) {
+        const instance = this.tooltips.get(id);
+        if (instance) {
+            instance.element.remove();
+            this.tooltips.delete(id);
+        }
+    }
+
+    /**
+     * Destroy all tooltips
+     */
+    destroyAll() {
+        for (const [id] of this.tooltips) {
+            this.destroy(id);
+        }
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Create a simple tooltip helper for basic use cases
+     * @param {string} selector - CSS selector for target elements
+     * @param {Function} contentFn - Function to generate content from data
+     * @param {Object} options - Configuration options
+     */
+    attachToElements(selector, contentFn, options = {}) {
+        const id = `tooltip-${selector.replace(/[^a-zA-Z0-9]/g, '-')}`;
+        const tooltip = this.create(id, options);
+
+        d3.selectAll(selector)
+            .on('mouseenter', function(event, d) {
+                const content = contentFn(d, this);
+                tooltip.show(event, content);
+            })
+            .on('mouseleave', function() {
+                tooltip.hide();
+            });
+
+        return tooltip;
+    }
+}
+
+// Export as singleton
+const tooltipService = new TooltipService();
+
+// Support both module and global usage
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = tooltipService;
+} else if (typeof define === 'function' && define.amd) {
+    define([], () => tooltipService);
+} else {
+    window.tooltipService = tooltipService;
+}

claude_mpm/dashboard/static/js/socket-client.js

@@ -505,6 +505,24 @@ class SocketClient {
             // console.log('Received pong from server');
         });
         
+        // Listen for heartbeat events from server (every 3 minutes)
+        this.socket.on('heartbeat', (data) => {
+            console.log('🫀 Received server heartbeat:', data);
+            // Add heartbeat to event list for visibility
+            this.addEvent({
+                type: 'system',
+                subtype: 'heartbeat',
+                timestamp: data.timestamp || new Date().toISOString(),
+                data: data
+            });
+            
+            // Update last ping time to indicate server is alive
+            this.lastPingTime = Date.now();
+            
+            // Log to console for debugging
+            console.log(`Server heartbeat #${data.heartbeat_number}: ${data.server_uptime_formatted} uptime, ${data.connected_clients} clients connected`);
+        });
+        
         // Session and event handlers (legacy/fallback)
         this.socket.on('session.started', (data) => {
             this.addEvent({ type: 'session', subtype: 'started', timestamp: new Date().toISOString(), data });

claude_mpm/dashboard/templates/index.html

@@ -530,14 +530,27 @@
             });
         };
         
-        // Load dashboard.js first, then other components
-        Promise.all([
-            loadModule('/static/dist/dashboard.js'),
-            loadModule('/static/dist/components/activity-tree.js'),
-            loadModule('/static/js/components/code-tree.js'),  // TEMPORARY: Direct source for debugging
-            loadModule('/static/dist/components/code-viewer.js'),
-            loadModule('/static/dist/components/file-viewer.js')  // File viewer for viewing file contents
-        ]).then(() => {
+        // Load shared services first, then tree modules, then components
+        // Load services sequentially to ensure dependencies are available
+        loadModule('/static/js/shared/tooltip-service.js')
+            .then(() => loadModule('/static/js/shared/dom-helpers.js'))
+            .then(() => loadModule('/static/js/shared/event-bus.js'))
+            .then(() => loadModule('/static/js/shared/logger.js'))
+            .then(() => loadModule('/static/js/components/code-tree/tree-utils.js'))
+            .then(() => loadModule('/static/js/components/code-tree/tree-constants.js'))
+            .then(() => loadModule('/static/js/components/code-tree/tree-search.js'))
+            .then(() => loadModule('/static/js/components/code-tree/tree-breadcrumb.js'))
+            .then(() => {
+                // Now load main components in parallel
+                return Promise.all([
+                    loadModule('/static/dist/dashboard.js'),
+                    loadModule('/static/dist/components/activity-tree.js'),
+                    loadModule('/static/js/components/code-tree.js'),  // TEMPORARY: Direct source for debugging
+                    loadModule('/static/dist/components/code-viewer.js'),
+                    loadModule('/static/dist/components/file-viewer.js')  // File viewer for viewing file contents
+                ]);
+            })
+            .then(() => {
             console.log('All dashboard modules loaded successfully');
             
             // Give modules time to execute and initialize dashboard

claude_mpm/services/monitor/handlers/__init__.py

@@ -15,6 +15,7 @@ DESIGN DECISIONS:
 
 from .code_analysis import CodeAnalysisHandler
 from .dashboard import DashboardHandler
+from .file import FileHandler
 from .hooks import HookHandler
 
-__all__ = ["CodeAnalysisHandler", "DashboardHandler", "HookHandler"]
+__all__ = ["CodeAnalysisHandler", "DashboardHandler", "FileHandler", "HookHandler"]

claude_mpm/services/monitor/handlers/file.py

@@ -0,0 +1,263 @@
+"""
+File Handler for Unified Monitor Server
+========================================
+
+WHY: Provides file reading capabilities for the dashboard file viewer.
+This handler allows the dashboard to display file contents when users
+click on files in the code tree or other file references.
+
+DESIGN DECISIONS:
+- Secure file reading with path validation
+- Size limits to prevent memory issues
+- Compatible with UnifiedMonitorServer architecture
+"""
+
+import os
+from pathlib import Path
+from typing import Any, Dict, Optional
+
+import socketio
+
+from ....core.logging_config import get_logger
+from ....core.unified_paths import get_project_root
+
+
+class FileHandler:
+    """Socket.IO handler for file operations in the unified monitor server.
+
+    WHY: The dashboard needs to display file contents when users click on files,
+    but we must ensure secure file access with proper validation and size limits.
+    """
+
+    def __init__(self, sio: socketio.AsyncServer):
+        """Initialize the file handler.
+
+        Args:
+            sio: Socket.IO server instance
+        """
+        self.sio = sio
+        self.logger = get_logger(__name__)
+
+    def register(self):
+        """Register Socket.IO event handlers for file operations."""
+        self.logger.info("[FileHandler] Registering file event handlers")
+
+        @self.sio.event
+        async def read_file(sid, data):
+            """Handle file read requests from dashboard clients.
+
+            WHY: The dashboard needs to display file contents when users
+            click on files, but we must ensure secure file access with
+            proper validation and size limits.
+            """
+            self.logger.info(
+                f"[FileHandler] Received read_file event from {sid} with data: {data}"
+            )
+
+            try:
+                file_path = data.get("file_path")
+                working_dir = data.get("working_dir", os.getcwd())
+                max_size = data.get("max_size", 1024 * 1024)  # 1MB default limit
+
+                if not file_path:
+                    self.logger.warning(
+                        f"[FileHandler] Missing file_path in request from {sid}"
+                    )
+                    await self.sio.emit(
+                        "file_content_response",
+                        {
+                            "success": False,
+                            "error": "file_path is required",
+                            "file_path": file_path,
+                        },
+                        room=sid,
+                    )
+                    return
+
+                # Read the file safely
+                self.logger.info(
+                    f"[FileHandler] Reading file: {file_path} from working_dir: {working_dir}"
+                )
+                result = await self._read_file_safely(file_path, working_dir, max_size)
+
+                # Send the result back to the client
+                self.logger.info(
+                    f"[FileHandler] Sending file_content_response to {sid}, success: {result.get('success', False)}"
+                )
+                await self.sio.emit("file_content_response", result, room=sid)
+                self.logger.info(f"[FileHandler] Response sent successfully to {sid}")
+
+            except Exception as e:
+                self.logger.error(
+                    f"[FileHandler] Exception in read_file handler: {e}", exc_info=True
+                )
+                await self.sio.emit(
+                    "file_content_response",
+                    {
+                        "success": False,
+                        "error": str(e),
+                        "file_path": data.get("file_path", "unknown"),
+                    },
+                    room=sid,
+                )
+                self.logger.info(f"[FileHandler] Error response sent to {sid}")
+
+        self.logger.info("[FileHandler] File event handlers registered successfully")
+
+    async def _read_file_safely(
+        self,
+        file_path: str,
+        working_dir: Optional[str] = None,
+        max_size: int = 1024 * 1024,
+    ) -> Dict[str, Any]:
+        """Safely read file content with security checks.
+
+        WHY: File reading must be secure to prevent directory traversal attacks
+        and resource exhaustion. This method centralizes all security checks
+        and provides consistent error handling.
+
+        Args:
+            file_path: Path to the file to read
+            working_dir: Working directory (defaults to current directory)
+            max_size: Maximum file size in bytes
+
+        Returns:
+            dict: Response with success status, content, and metadata
+        """
+        try:
+            if working_dir is None:
+                working_dir = os.getcwd()
+
+            # Resolve absolute path based on working directory
+            file_path_obj = Path(file_path)
+            if not file_path_obj.is_absolute():
+                full_path = Path(working_dir) / file_path
+            else:
+                full_path = file_path_obj
+
+            # Security check: ensure file is within working directory or project
+            try:
+                real_path = full_path.resolve()
+                real_working_dir = Path(working_dir).resolve()
+
+                # Allow access to files within working directory or the project root
+                project_root = Path(get_project_root()).resolve()
+                allowed_paths = [real_working_dir, project_root]
+
+                is_allowed = any(
+                    str(real_path).startswith(str(allowed_path))
+                    for allowed_path in allowed_paths
+                )
+
+                if not is_allowed:
+                    return {
+                        "success": False,
+                        "error": "Access denied: file is outside allowed directories",
+                        "file_path": file_path,
+                    }
+
+            except Exception as path_error:
+                self.logger.error(f"Path validation error: {path_error}")
+                return {
+                    "success": False,
+                    "error": "Invalid file path",
+                    "file_path": file_path,
+                }
+
+            # Check if file exists
+            if not real_path.exists():
+                return {
+                    "success": False,
+                    "error": "File does not exist",
+                    "file_path": file_path,
+                }
+
+            # Check if it's a file (not directory)
+            if not real_path.is_file():
+                return {
+                    "success": False,
+                    "error": "Path is not a file",
+                    "file_path": file_path,
+                }
+
+            # Check file size
+            file_size = real_path.stat().st_size
+            if file_size > max_size:
+                return {
+                    "success": False,
+                    "error": f"File too large ({file_size} bytes). Maximum allowed: {max_size} bytes",
+                    "file_path": file_path,
+                    "file_size": file_size,
+                }
+
+            # Read file content
+            try:
+                with open(real_path, encoding="utf-8") as f:
+                    content = f.read()
+
+                # Get file extension for syntax highlighting hint
+                ext = real_path.suffix
+
+                return {
+                    "success": True,
+                    "file_path": file_path,
+                    "content": content,
+                    "file_size": file_size,
+                    "extension": ext.lower(),
+                    "encoding": "utf-8",
+                }
+
+            except UnicodeDecodeError:
+                # Try reading as binary if UTF-8 fails
+                return self._read_binary_file(real_path, file_path, file_size)
+
+        except Exception as e:
+            self.logger.error(f"Error in _read_file_safely: {e}")
+            return {"success": False, "error": str(e), "file_path": file_path}
+
+    def _read_binary_file(
+        self, real_path: Path, file_path: str, file_size: int
+    ) -> Dict[str, Any]:
+        """Handle binary or non-UTF8 files.
+
+        WHY: Not all files are UTF-8 encoded. We need to handle other
+        encodings gracefully and detect binary files that shouldn't
+        be displayed as text.
+        """
+        try:
+            with open(real_path, "rb") as f:
+                binary_content = f.read()
+
+            # Check if it's a text file by looking for common text patterns
+            try:
+                text_content = binary_content.decode("latin-1")
+                if "\x00" in text_content:
+                    # Binary file
+                    return {
+                        "success": False,
+                        "error": "File appears to be binary and cannot be displayed as text",
+                        "file_path": file_path,
+                        "file_size": file_size,
+                    }
+                # Text file with different encoding
+                ext = real_path.suffix
+                return {
+                    "success": True,
+                    "file_path": file_path,
+                    "content": text_content,
+                    "file_size": file_size,
+                    "extension": ext.lower(),
+                    "encoding": "latin-1",
+                }
+            except Exception:
+                return {
+                    "success": False,
+                    "error": "File encoding not supported",
+                    "file_path": file_path,
+                }
+        except Exception as read_error:
+            return {
+                "success": False,
+                "error": f"Failed to read file: {read_error!s}",
+                "file_path": file_path,
+            }