claude-mpm 4.1.26__py3-none-any.whl → 4.24.0__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

@@ -248,7 +248,7 @@ class SocketClient {
          * @private
          * @const
          */
-        this.pingTimeout = 90000; // 90 seconds for health check (more lenient than Socket.IO timeout)
+        this.pingTimeout = 120000; // 120 seconds for health check (more lenient for stability)
         
         /**
          * Health check interval timer.
@@ -346,13 +346,13 @@ class SocketClient {
             autoConnect: true,
             reconnection: true,
             reconnectionDelay: 1000,
-            reconnectionDelayMax: 5000,
-            reconnectionAttempts: 5,  // Try 5 times then stop (was Infinity which can cause issues)
-            timeout: 20000,  // Connection timeout
+            reconnectionDelayMax: 10000,  // Increased max delay for stability
+            reconnectionAttempts: 10,  // Increased attempts for better resilience  
+            timeout: 30000,  // Increased connection timeout to 30 seconds
             forceNew: true,
             transports: ['websocket', 'polling'],
-            pingInterval: 25000,  // CRITICAL: Must match server's 25 seconds
-            pingTimeout: 20000    // CRITICAL: Must match server's 20 seconds
+            // Remove client-side ping configuration - let server control this
+            // The server now properly configures: ping_interval=30s, ping_timeout=60s
         });
 
         this.setupSocketHandlers();
@@ -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 });
@@ -530,13 +548,15 @@ class SocketClient {
             this.addEvent({ type: 'agent', subtype: 'executed', timestamp: new Date().toISOString(), data });
         });
 
-        this.socket.on('hook.pre', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
-        });
+        // DISABLED: Legacy hook handlers - events now come through claude_event pathway
+        // to prevent duplication. Hook events are processed by the claude_event handler above.
+        // this.socket.on('hook.pre', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
+        // });
 
-        this.socket.on('hook.post', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
-        });
+        // this.socket.on('hook.post', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
+        // });
 
         this.socket.on('todo.updated', (data) => {
             this.addEvent({ type: 'todo', subtype: 'updated', timestamp: new Date().toISOString(), data });
@@ -1218,8 +1238,11 @@ class SocketClient {
                         transformedEvent[key] = eventData.data[key];
                     }
                 } else {
-                    // Log warning if data field would overwrite a protected field
-                    console.warn(`Protected field '${key}' in data object was not copied to top level to preserve event structure`);
+                    // Log debug info if data field would overwrite a protected field
+                    // Only log for non-timestamp fields to reduce noise
+                    if (key !== 'timestamp') {
+                        console.debug(`Protected field '${key}' in data object was not copied to top level to preserve event structure`);
+                    }
                 }
             });
             
@@ -1366,6 +1389,12 @@ class SocketClient {
                 actualType = 'connected';
                 this.isConnected = true;
                 this.isConnecting = false;
+
+                // Expose socket globally when connected
+                if (!window.socket) {
+                    window.socket = this.socket;
+                    console.log('SocketClient: Exposed socket globally as window.socket');
+                }
             } else if (this.socket.connecting || this.isConnecting) {
                 actualStatus = 'Connecting...';
                 actualType = 'connecting';
@@ -1378,17 +1407,15 @@ class SocketClient {
             }
         }
 
-        // Check if UI needs updating
+        // Always update status to ensure consistency
+        this.updateConnectionStatusDOM(actualStatus, actualType);
+
+        // Also ensure state is consistent
         const statusElement = document.getElementById('connection-status');
         if (statusElement) {
             const currentText = statusElement.textContent.replace('●', '').trim();
-            const currentClass = statusElement.className;
-            const expectedClass = `status-badge status-${actualType}`;
-
-            // Update if status text or class doesn't match
-            if (currentText !== actualStatus || currentClass !== expectedClass) {
-                console.log(`SocketClient: Fallback update - was '${currentText}' (${currentClass}), now '${actualStatus}' (${expectedClass})`);
-                this.updateConnectionStatusDOM(actualStatus, actualType);
+            if (currentText !== actualStatus) {
+                console.log(`SocketClient: Status sync - updating from '${currentText}' to '${actualStatus}'`);
             }
         }
     }