claude-mpm 3.9.11__py3-none-any.whl → 4.0.3__py3-none-any.whl

claude_mpm/dashboard/static/js/components/hud-visualizer.js

@@ -12,7 +12,7 @@ class HUDVisualizer {
         this.librariesLoaded = false;
         this.loadingPromise = null;
         this.pendingEvents = []; // Store events received before libraries are loaded
-        
+
         // Layout configuration
         this.layoutConfig = {
             name: 'dagre',
@@ -24,7 +24,7 @@ class HUDVisualizer {
             rankSep: 100,
             nodeSep: 80
         };
-        
+
         // Node type configurations
         this.nodeTypes = {
             PM: {
@@ -76,7 +76,7 @@ class HUDVisualizer {
 
         // Setup basic event handlers (not library-dependent)
         this.setupBasicEventHandlers();
-        
+
         console.log('HUD Visualizer initialized (libraries will load lazily)');
         return true;
     }
@@ -107,7 +107,7 @@ class HUDVisualizer {
         try {
             console.log('[HUD-VISUALIZER-DEBUG] _performLazyLoading() called');
             console.log('[HUD-VISUALIZER-DEBUG] Loading HUD visualization libraries...');
-            
+
             // Show loading indicator
             this.showLoadingIndicator();
 
@@ -140,15 +140,15 @@ class HUDVisualizer {
             // Initialize Cytoscape instance
             console.log('[HUD-VISUALIZER-DEBUG] Initializing Cytoscape...');
             this.initializeCytoscape();
-            
+
             // Setup library-dependent event handlers
             console.log('[HUD-VISUALIZER-DEBUG] Setting up Cytoscape event handlers...');
             this.setupCytoscapeEventHandlers();
-            
+
             // Process any pending events
             console.log('[HUD-VISUALIZER-DEBUG] Processing pending events...');
             this.processPendingEvents();
-            
+
             // Hide loading indicator
             this.hideLoadingIndicator();
 
@@ -178,19 +178,19 @@ class HUDVisualizer {
         if (typeof window.cytoscape !== 'undefined' && typeof window.cytoscapeDagre !== 'undefined') {
             window.cytoscape.use(window.cytoscapeDagre);
         }
-        
+
         this.cy = window.cytoscape({
             container: this.container,
-            
+
             elements: [],
-            
+
             // Enable user interaction
             userZoomingEnabled: true,
             userPanningEnabled: true,
             boxSelectionEnabled: false,
             autoungrabify: false,
             autounselectify: false,
-            
+
             style: [
                 // Node styles
                 {
@@ -212,7 +212,7 @@ class HUDVisualizer {
                         'text-max-width': '100px'
                     }
                 },
-                
+
                 // Edge styles
                 {
                     selector: 'edge',
@@ -225,7 +225,7 @@ class HUDVisualizer {
                         'arrow-scale': 1.2
                     }
                 },
-                
+
                 // Node type specific styles
                 {
                     selector: '.pm-node',
@@ -235,7 +235,7 @@ class HUDVisualizer {
                         'shape': 'rectangle'
                     }
                 },
-                
+
                 {
                     selector: '.agent-node',
                     style: {
@@ -244,7 +244,7 @@ class HUDVisualizer {
                         'shape': 'ellipse'
                     }
                 },
-                
+
                 {
                     selector: '.tool-node',
                     style: {
@@ -253,7 +253,7 @@ class HUDVisualizer {
                         'shape': 'diamond'
                     }
                 },
-                
+
                 {
                     selector: '.todo-node',
                     style: {
@@ -262,7 +262,7 @@ class HUDVisualizer {
                         'shape': 'triangle'
                     }
                 },
-                
+
                 // Hover effects
                 {
                     selector: 'node:active',
@@ -272,7 +272,7 @@ class HUDVisualizer {
                     }
                 }
             ],
-            
+
             layout: this.layoutConfig
         });
 
@@ -291,7 +291,7 @@ class HUDVisualizer {
                 this.resetLayout();
             });
         }
-        
+
         // Center view button
         const centerBtn = document.getElementById('hud-center-view');
         if (centerBtn) {
@@ -317,7 +317,7 @@ class HUDVisualizer {
             const node = evt.target;
             const data = node.data();
             console.log('[HUD-VISUALIZER-DEBUG] Node clicked:', data);
-            
+
             // Highlight connected nodes
             this.highlightConnectedNodes(node);
         });
@@ -330,7 +330,7 @@ class HUDVisualizer {
                 this.cy.nodes().style({
                     'opacity': 1
                 });
-                
+
                 this.cy.edges().style({
                     'opacity': 1
                 });
@@ -360,7 +360,7 @@ class HUDVisualizer {
                 this.ensureContainerResize();
             }
         });
-        
+
         if (this.container) {
             resizeObserver.observe(this.container);
         }
@@ -391,11 +391,11 @@ class HUDVisualizer {
         // Only proceed if container is visible
         if (containerRect.width > 0 && containerRect.height > 0) {
             console.log('[HUD-VISUALIZER-DEBUG] Container is visible, resizing Cytoscape...');
-            
+
             try {
                 // Force Cytoscape to resize
                 this.cy.resize();
-                
+
                 // Log Cytoscape elements
                 const nodeCount = this.cy.nodes().length;
                 const edgeCount = this.cy.edges().length;
@@ -403,7 +403,7 @@ class HUDVisualizer {
                     nodes: nodeCount,
                     edges: edgeCount
                 });
-                
+
                 // If we have nodes, fit and run layout
                 if (nodeCount > 0) {
                     console.log('[HUD-VISUALIZER-DEBUG] Running fit and layout...');
@@ -412,7 +412,7 @@ class HUDVisualizer {
                 } else {
                     console.log('[HUD-VISUALIZER-DEBUG] No nodes to display');
                 }
-                
+
             } catch (error) {
                 console.error('[HUD-VISUALIZER-DEBUG] Error during resize:', error);
             }
@@ -432,7 +432,7 @@ class HUDVisualizer {
         this.container.style.cursor = 'default';
         this.container.style.userSelect = 'none';
         this.container.style.touchAction = 'manipulation';
-        
+
         // Remove any overlapping elements that might block events
         const parent = this.container.parentElement;
         if (parent) {
@@ -449,36 +449,36 @@ class HUDVisualizer {
     async activate() {
         console.log('[HUD-VISUALIZER-DEBUG] activate() called');
         this.isActive = true;
-        
+
         try {
             console.log('[HUD-VISUALIZER-DEBUG] Loading libraries and initializing...');
             // Load libraries if not already loaded
             await this.loadLibrariesAndInitialize();
-            
+
             console.log('[HUD-VISUALIZER-DEBUG] Libraries loaded, cy exists:', !!this.cy);
-            
+
             // If Cytoscape was destroyed during clearing, recreate it
             if (!this.cy) {
                 console.log('[HUD-VISUALIZER-DEBUG] Cytoscape instance missing, recreating...');
                 this.initializeCytoscape();
                 this.setupCytoscapeEventHandlers();
             }
-            
+
             if (this.cy) {
                 // Wait for container to be visible, then trigger resize and fit
                 console.log('[HUD-VISUALIZER-DEBUG] Triggering resize and fit...');
-                
+
                 // Multiple resize attempts to ensure container visibility
                 setTimeout(() => {
                     console.log('[HUD-VISUALIZER-DEBUG] First resize attempt...');
                     this.ensureContainerResize();
                 }, 50);
-                
+
                 setTimeout(() => {
                     console.log('[HUD-VISUALIZER-DEBUG] Second resize attempt...');
                     this.ensureContainerResize();
                 }, 200);
-                
+
                 setTimeout(() => {
                     console.log('[HUD-VISUALIZER-DEBUG] Final resize attempt...');
                     this.ensureContainerResize();
@@ -506,11 +506,11 @@ class HUDVisualizer {
     processPendingEvents() {
         if (this.pendingEvents.length > 0) {
             console.log(`Processing ${this.pendingEvents.length} pending events`);
-            
+
             for (const event of this.pendingEvents) {
                 this._processEventInternal(event);
             }
-            
+
             this.pendingEvents = [];
         }
     }
@@ -522,19 +522,19 @@ class HUDVisualizer {
      */
     processExistingEvents(events) {
         console.log(`[HUD-VISUALIZER-DEBUG] processExistingEvents called with ${events ? events.length : 0} events`);
-        
+
         if (!events) {
             console.error('[HUD-VISUALIZER-DEBUG] No events provided to processExistingEvents');
             return;
         }
-        
+
         if (!Array.isArray(events)) {
             console.error('[HUD-VISUALIZER-DEBUG] Events is not an array:', typeof events);
             return;
         }
-        
+
         console.log(`[HUD-VISUALIZER-DEBUG] Libraries loaded: ${this.librariesLoaded}, Cytoscape available: ${!!this.cy}`);
-        
+
         if (!this.librariesLoaded || !this.cy) {
             console.warn('[HUD-VISUALIZER-DEBUG] HUD libraries not loaded, cannot process existing events');
             console.log(`[HUD-VISUALIZER-DEBUG] Storing ${events.length} events as pending`);
@@ -543,7 +543,7 @@ class HUDVisualizer {
         }
 
         console.log(`[HUD-VISUALIZER-DEBUG] 🏗️ Building HUD tree structure from ${events.length} historical events`);
-        
+
         // Log sample events to understand structure
         if (events.length > 0) {
             console.log('[HUD-VISUALIZER-DEBUG] Sample events:');
@@ -559,22 +559,22 @@ class HUDVisualizer {
                 });
             });
         }
-        
+
         // Clear any existing visualization
         this.clear();
-        
+
         // Group events by session to build proper hierarchies
         const sessionGroups = this.groupEventsBySession(events);
-        
+
         // Process each session group to build trees
         Object.entries(sessionGroups).forEach(([sessionId, sessionEvents]) => {
             console.log(`  📂 Processing session ${sessionId}: ${sessionEvents.length} events`);
             this.buildSessionTree(sessionId, sessionEvents);
         });
-        
+
         // Run final layout to organize the complete visualization
         this.runLayout();
-        
+
         console.log(`✅ HUD tree structure built successfully`);
     }
 
@@ -585,7 +585,7 @@ class HUDVisualizer {
      */
     groupEventsBySession(events) {
         const sessionGroups = {};
-        
+
         events.forEach(event => {
             const sessionId = event.session_id || event.data?.session_id || 'unknown';
             if (!sessionGroups[sessionId]) {
@@ -593,7 +593,7 @@ class HUDVisualizer {
             }
             sessionGroups[sessionId].push(event);
         });
-        
+
         return sessionGroups;
     }
 
@@ -604,21 +604,21 @@ class HUDVisualizer {
      */
     buildSessionTree(sessionId, sessionEvents) {
         console.log(`[HUD-VISUALIZER-DEBUG] Building session tree for ${sessionId} with ${sessionEvents.length} events`);
-        
+
         const sessionNodes = new Map(); // Track nodes created for this session
         let sessionRootNode = null;
-        
+
         // Sort events chronologically within the session
         const sortedEvents = sessionEvents.sort((a, b) => {
             return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
         });
-        
+
         console.log(`[HUD-VISUALIZER-DEBUG] Sorted ${sortedEvents.length} events chronologically`);
-        
+
         sortedEvents.forEach((event, index) => {
             const nodeData = this.createNodeFromEvent(event, sessionId);
             if (!nodeData) return;
-            
+
             // Add the node to visualization
             this.addNode(nodeData.id, nodeData.type, nodeData.label, {
                 sessionId: sessionId,
@@ -626,18 +626,18 @@ class HUDVisualizer {
                 eventData: event,
                 isSessionRoot: nodeData.isSessionRoot
             });
-            
+
             sessionNodes.set(nodeData.id, {
                 ...nodeData,
                 event: event,
                 index: index
             });
-            
+
             // Track session root node
             if (nodeData.isSessionRoot && !sessionRootNode) {
                 sessionRootNode = nodeData.id;
             }
-            
+
             // Create relationships based on event context
             this.createHierarchicalRelationships(nodeData.id, event, sessionNodes, sessionRootNode);
         });
@@ -653,15 +653,15 @@ class HUDVisualizer {
         const eventType = event.hook_event_name || event.type || '';
         const subtype = event.subtype || '';
         const timestamp = new Date(event.timestamp || Date.now());
-        
+
         console.log(`[HUD-VISUALIZER-DEBUG] Creating node from event: ${eventType}/${subtype} for session ${sessionId}`);
-        
+
         let nodeId, nodeType, label, isSessionRoot = false;
-        
+
         // Generate a unique timestamp-based ID suffix
         const timestampId = timestamp.getTime();
         const randomSuffix = Math.random().toString(36).substring(2, 7);
-        
+
         // Determine node type and create appropriate visualization
         if (eventType === 'session' && subtype === 'started') {
             // Session root node
@@ -669,20 +669,20 @@ class HUDVisualizer {
             label = `Session ${sessionId.substring(0, 8)}...`;
             nodeId = `session-${sessionId.replace(/[^a-zA-Z0-9]/g, '')}`;
             isSessionRoot = true;
-            
+
         } else if (eventType === 'hook' && subtype === 'user_prompt') {
             // User prompts are major workflow nodes
             nodeType = 'PM';
             const promptPreview = event.data?.prompt_preview || 'User Prompt';
             label = promptPreview.length > 20 ? promptPreview.substring(0, 20) + '...' : promptPreview;
             nodeId = `user-prompt-${timestampId}-${randomSuffix}`;
-            
+
         } else if (eventType === 'hook' && subtype === 'claude_response') {
             // Claude responses
             nodeType = 'PM';
             label = 'Claude Response';
             nodeId = `claude-response-${timestampId}-${randomSuffix}`;
-            
+
         } else if (eventType === 'hook' && subtype === 'pre_tool') {
             // Tool calls - pre hook
             nodeType = 'TOOL';
@@ -691,7 +691,7 @@ class HUDVisualizer {
             const cleanToolName = toolName.replace(/[^a-zA-Z0-9]/g, '');
             label = `${toolName}`;
             nodeId = `tool-${cleanToolName}-${timestampId}-${randomSuffix}`;
-            
+
         } else if (eventType === 'agent' || event.data?.agent_type) {
             // Agent operations
             nodeType = 'AGENT';
@@ -700,17 +700,17 @@ class HUDVisualizer {
             const cleanAgentName = agentName.replace(/[^a-zA-Z0-9]/g, '');
             label = agentName;
             nodeId = `agent-${cleanAgentName}-${timestampId}-${randomSuffix}`;
-            
+
         } else if (eventType === 'todo' || subtype.includes('todo')) {
             // Todo operations
             nodeType = 'TODO';
             label = 'Todo Update';
             nodeId = `todo-${timestampId}-${randomSuffix}`;
-            
+
         } else if (eventType === 'hook' && subtype === 'notification') {
             // Skip notifications for cleaner visualization
             return null;
-            
+
         } else if (eventType === 'log') {
             // Skip log events for cleaner visualization unless they're errors
             const level = event.data?.level || 'info';
@@ -720,7 +720,7 @@ class HUDVisualizer {
             nodeType = 'PM';
             label = `${level.toUpperCase()} Log`;
             nodeId = `log-${level}-${timestampId}-${randomSuffix}`;
-            
+
         } else {
             // Generic event node
             nodeType = 'PM';
@@ -728,7 +728,7 @@ class HUDVisualizer {
             label = eventType || 'Event';
             nodeId = `generic-${cleanEventType}-${timestampId}-${randomSuffix}`;
         }
-        
+
         return {
             id: nodeId,
             type: nodeType,
@@ -747,40 +747,40 @@ class HUDVisualizer {
     createHierarchicalRelationships(nodeId, event, sessionNodes, sessionRootNode) {
         const eventType = event.hook_event_name || event.type || '';
         const subtype = event.subtype || '';
-        
+
         // Find appropriate parent node based on event context
         let parentNodeId = null;
-        
+
         if (eventType === 'session' && subtype === 'started') {
             // Session start nodes have no parent
             return;
-            
+
         } else if (eventType === 'hook' && subtype === 'pre_tool') {
             // Tool calls should connect to the most recent user prompt or agent
             parentNodeId = this.findRecentParentNode(sessionNodes, ['user-prompt', 'agent'], nodeId);
-            
+
         } else if (eventType === 'hook' && subtype === 'claude_response') {
             // Claude responses should connect to user prompts
             parentNodeId = this.findRecentParentNode(sessionNodes, ['user-prompt'], nodeId);
-            
+
         } else if (eventType === 'agent') {
             // Agents should connect to user prompts or other agents (delegation)
             parentNodeId = this.findRecentParentNode(sessionNodes, ['user-prompt', 'agent'], nodeId);
-            
+
         } else if (eventType === 'todo') {
             // Todos should connect to agents or user prompts
             parentNodeId = this.findRecentParentNode(sessionNodes, ['agent', 'user-prompt'], nodeId);
-            
+
         } else {
             // Default: connect to most recent significant node
             parentNodeId = this.findRecentParentNode(sessionNodes, ['user-prompt', 'agent', 'session'], nodeId);
         }
-        
+
         // If no specific parent found, connect to session root
         if (!parentNodeId && sessionRootNode && nodeId !== sessionRootNode) {
             parentNodeId = sessionRootNode;
         }
-        
+
         // Create the edge if parent exists
         if (parentNodeId && parentNodeId !== nodeId) {
             this.addEdge(parentNodeId, nodeId);
@@ -796,10 +796,10 @@ class HUDVisualizer {
      */
     findRecentParentNode(sessionNodes, nodeTypes, currentNodeId) {
         const nodeEntries = Array.from(sessionNodes.entries()).reverse(); // Most recent first
-        
+
         for (const [nodeId, nodeData] of nodeEntries) {
             if (nodeId === currentNodeId) continue; // Skip current node
-            
+
             // Check if this node matches any of the desired parent types
             for (const typePrefix of nodeTypes) {
                 if (nodeId.startsWith(typePrefix)) {
@@ -807,7 +807,7 @@ class HUDVisualizer {
                 }
             }
         }
-        
+
         return null;
     }
 
@@ -817,7 +817,7 @@ class HUDVisualizer {
      */
     processEvent(event) {
         if (!this.isActive) return;
-        
+
         // If libraries aren't loaded yet, store the event for later processing
         if (!this.librariesLoaded || !this.cy) {
             this.pendingEvents.push(event);
@@ -835,12 +835,12 @@ class HUDVisualizer {
         const eventType = event.hook_event_name || event.type || '';
         const sessionId = event.session_id || 'unknown';
         const timestamp = new Date(event.timestamp || Date.now());
-        
+
         // Create a unique node ID based on event type and data
         let nodeId = `${eventType}-${timestamp.getTime()}`;
         let nodeType = 'PM';
         let label = eventType;
-        
+
         // Determine node type based on event
         if (eventType.includes('tool_call')) {
             nodeType = 'TOOL';
@@ -861,14 +861,14 @@ class HUDVisualizer {
             label = eventType.includes('user_prompt') ? 'User Prompt' : 'Claude Response';
             nodeId = `pm-${label.replace(' ', '')}-${timestamp.getTime()}`;
         }
-        
+
         // Add the node
         this.addNode(nodeId, nodeType, label, {
             sessionId: sessionId,
             timestamp: timestamp.toISOString(),
             eventData: event
         });
-        
+
         // Add edges based on relationships
         this.createEventRelationships(nodeId, event);
     }
@@ -882,12 +882,12 @@ class HUDVisualizer {
      */
     addNode(id, type, label, data = {}) {
         console.log(`[HUD-VISUALIZER-DEBUG] Adding node: ${id} (${type}) - ${label}`);
-        
+
         if (this.nodes.has(id)) {
             console.log(`[HUD-VISUALIZER-DEBUG] Node ${id} already exists, skipping`);
             return; // Node already exists
         }
-        
+
         const nodeType = this.nodeTypes[type] || this.nodeTypes.PM;
         const nodeData = {
             id: id,
@@ -900,16 +900,16 @@ class HUDVisualizer {
             height: nodeType.height,
             ...data
         };
-        
+
         this.nodes.set(id, nodeData);
-        
+
         if (this.cy) {
             const element = {
                 group: 'nodes',
                 data: nodeData,
                 classes: `${type.toLowerCase()}-node`
             };
-            
+
             console.log(`[HUD-VISUALIZER-DEBUG] Adding node element to Cytoscape:`, element);
             this.cy.add(element);
             console.log(`[HUD-VISUALIZER-DEBUG] Node added successfully. Total nodes in cy: ${this.cy.nodes().length}`);
@@ -938,7 +938,7 @@ class HUDVisualizer {
         if (!edgeId) {
             edgeId = `edge-${sourceId}-to-${targetId}`;
         }
-        
+
         if (this.cy) {
             // Check if edge already exists
             const existingEdge = this.cy.getElementById(edgeId);
@@ -950,12 +950,12 @@ class HUDVisualizer {
             // Check if nodes exist
             const sourceNode = this.cy.getElementById(sourceId);
             const targetNode = this.cy.getElementById(targetId);
-            
+
             if (sourceNode.length === 0) {
                 console.warn(`[HUD-VISUALIZER-DEBUG] Source node ${sourceId} does not exist, cannot create edge`);
                 return;
             }
-            
+
             if (targetNode.length === 0) {
                 console.warn(`[HUD-VISUALIZER-DEBUG] Target node ${targetId} does not exist, cannot create edge`);
                 return;
@@ -970,9 +970,9 @@ class HUDVisualizer {
                     ...data
                 }
             };
-            
+
             console.log(`[HUD-VISUALIZER-DEBUG] Adding edge element to Cytoscape:`, element);
-            
+
             try {
                 this.cy.add(element);
                 console.log(`[HUD-VISUALIZER-DEBUG] Edge added successfully. Total edges in cy: ${this.cy.edges().length}`);
@@ -992,10 +992,10 @@ class HUDVisualizer {
     createEventRelationships(nodeId, event) {
         const eventType = event.hook_event_name || event.type || '';
         const sessionId = event.session_id || 'unknown';
-        
+
         // Find parent nodes based on event relationships
         const allNodeEntries = Array.from(this.nodes.entries());
-        
+
         // Tool call relationships
         if (eventType.includes('tool_call') && event.data?.tool_name) {
             // Connect tool calls to their invoking agent/PM nodes
@@ -1005,7 +1005,7 @@ class HUDVisualizer {
                 return;
             }
         }
-        
+
         // Agent delegation relationships
         if (eventType.includes('agent') || event.data?.agent_name) {
             // Connect agents to PM nodes
@@ -1015,7 +1015,7 @@ class HUDVisualizer {
                 return;
             }
         }
-        
+
         // Todo relationships - connect to agent or PM nodes
         if (eventType.includes('todo')) {
             const parentNode = this.findParentNode(sessionId, ['AGENT', 'PM']);
@@ -1024,11 +1024,11 @@ class HUDVisualizer {
                 return;
             }
         }
-        
+
         // Default sequential relationship
         const allNodes = Array.from(this.nodes.keys());
         const currentIndex = allNodes.indexOf(nodeId);
-        
+
         if (currentIndex > 0) {
             const previousNodeId = allNodes[currentIndex - 1];
             this.addEdge(previousNodeId, nodeId);
@@ -1043,13 +1043,13 @@ class HUDVisualizer {
      */
     findParentNode(sessionId, nodeTypes) {
         const nodeEntries = Array.from(this.nodes.entries()).reverse(); // Start from most recent
-        
+
         for (const [nodeId, nodeData] of nodeEntries) {
             if (nodeData.sessionId === sessionId && nodeTypes.includes(nodeData.type)) {
                 return nodeId;
             }
         }
-        
+
         return null;
     }
 
@@ -1064,11 +1064,11 @@ class HUDVisualizer {
         this.cy.nodes().style({
             'opacity': 0.3
         });
-        
+
         this.cy.edges().style({
             'opacity': 0.2
         });
-        
+
         // Highlight selected node and its neighborhood
         const neighborhood = node.neighborhood();
         node.style('opacity', 1);
@@ -1103,7 +1103,7 @@ class HUDVisualizer {
             const nodeCount = this.cy.nodes().length;
             const edgeCount = this.cy.edges().length;
             console.log(`[HUD-VISUALIZER-DEBUG] Running layout with ${nodeCount} nodes and ${edgeCount} edges`);
-            
+
             // Check container dimensions before layout
             if (this.container) {
                 const rect = this.container.getBoundingClientRect();
@@ -1114,9 +1114,9 @@ class HUDVisualizer {
                     offsetHeight: this.container.offsetHeight
                 });
             }
-            
+
             const layout = this.cy.layout(this.layoutConfig);
-            
+
             // Listen for layout completion
             layout.on('layoutstop', () => {
                 console.log(`[HUD-VISUALIZER-DEBUG] Layout completed. Final node positions:`);
@@ -1126,7 +1126,7 @@ class HUDVisualizer {
                     console.log(`[HUD-VISUALIZER-DEBUG]   Node ${index + 1}: ${data.label} at (${position.x.toFixed(1)}, ${position.y.toFixed(1)})`);
                 });
             });
-            
+
             layout.run();
         } else {
             console.log(`[HUD-VISUALIZER-DEBUG] Skipping layout - not active or no Cytoscape instance`);
@@ -1244,7 +1244,7 @@ class HUDVisualizer {
             pendingEventCount: this.pendingEvents.length,
             hasHUDLibraryLoader: !!window.HUDLibraryLoader
         });
-        
+
         // Test container
         if (this.container) {
             console.log('[HUD-VISUALIZER-DEBUG] Container info:', {
@@ -1255,7 +1255,7 @@ class HUDVisualizer {
                 innerHTML: this.container.innerHTML ? 'has content' : 'empty'
             });
         }
-        
+
         // Test library availability
         console.log('[HUD-VISUALIZER-DEBUG] Library availability:', {
             cytoscape: typeof window.cytoscape,
@@ -1263,7 +1263,7 @@ class HUDVisualizer {
             cytoscapeDagre: typeof window.cytoscapeDagre,
             HUDLibraryLoader: typeof window.HUDLibraryLoader
         });
-        
+
         return {
             isActive: this.isActive,
             librariesLoaded: this.librariesLoaded,
@@ -1280,7 +1280,7 @@ class HUDVisualizer {
         console.log('[HUD-BLANK-SCREEN-DEBUG] =================================');
         console.log('[HUD-BLANK-SCREEN-DEBUG] COMPREHENSIVE BLANK SCREEN DEBUG');
         console.log('[HUD-BLANK-SCREEN-DEBUG] =================================');
-        
+
         // 1. Check basic state
         const basicState = {
             isActive: this.isActive,
@@ -1291,19 +1291,19 @@ class HUDVisualizer {
             cytoscapeElementCount: this.cy ? this.cy.elements().length : 0
         };
         console.log('[HUD-BLANK-SCREEN-DEBUG] 1. Basic State:', basicState);
-        
+
         // 2. Check container visibility and dimensions
         if (this.container) {
             const containerInfo = this.getContainerDebugInfo();
             console.log('[HUD-BLANK-SCREEN-DEBUG] 2. Container Info:', containerInfo);
-            
+
             // Add background color to verify container is visible
             this.debugAddContainerBackground();
         } else {
             console.error('[HUD-BLANK-SCREEN-DEBUG] 2. Container not found!');
             return false;
         }
-        
+
         // 3. Check Cytoscape state
         if (this.cy) {
             const cytoscapeInfo = this.getCytoscapeDebugInfo();
@@ -1312,22 +1312,22 @@ class HUDVisualizer {
             console.error('[HUD-BLANK-SCREEN-DEBUG] 3. Cytoscape instance not found!');
             return false;
         }
-        
+
         // 4. Check node positions
         this.debugNodePositions();
-        
+
         // 5. Try manual rendering triggers
         this.debugManualRenderingTriggers();
-        
+
         // 6. Add test nodes if none exist
         if (this.cy && this.cy.nodes().length === 0) {
             console.log('[HUD-BLANK-SCREEN-DEBUG] 6. No nodes found, adding test nodes...');
             this.debugAddTestNodes();
         }
-        
+
         // 7. Force zoom fit
         this.debugForceZoomFit();
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG] Debug complete. Check visual results.');
         return true;
     }
@@ -1338,7 +1338,7 @@ class HUDVisualizer {
     getContainerDebugInfo() {
         const rect = this.container.getBoundingClientRect();
         const computed = window.getComputedStyle(this.container);
-        
+
         return {
             id: this.container.id,
             className: this.container.className,
@@ -1389,7 +1389,7 @@ class HUDVisualizer {
         const zoom = this.cy.zoom();
         const pan = this.cy.pan();
         const viewport = this.cy.viewport();
-        
+
         return {
             // Elements
             nodeCount: this.cy.nodes().length,
@@ -1421,20 +1421,20 @@ class HUDVisualizer {
             console.log('[HUD-BLANK-SCREEN-DEBUG] 4. No nodes to check positions');
             return;
         }
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG] 4. Node Positions:');
         const nodes = this.cy.nodes();
         const extent = this.cy.extent();
         const viewport = this.cy.viewport();
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG]   Viewport extent:', extent);
         console.log('[HUD-BLANK-SCREEN-DEBUG]   Current viewport:', viewport);
-        
+
         nodes.forEach((node, index) => {
             const position = node.position();
             const data = node.data();
             const boundingBox = node.boundingBox();
-            
+
             console.log(`[HUD-BLANK-SCREEN-DEBUG]   Node ${index + 1}:`, {
                 id: data.id,
                 label: data.label,
@@ -1468,31 +1468,31 @@ class HUDVisualizer {
             console.log('[HUD-BLANK-SCREEN-DEBUG] 5. No Cytoscape instance for manual rendering');
             return;
         }
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG] 5. Triggering manual rendering operations...');
-        
+
         try {
             // Force resize
             console.log('[HUD-BLANK-SCREEN-DEBUG]   - Forcing resize...');
             this.cy.resize();
-            
+
             // Force redraw
             console.log('[HUD-BLANK-SCREEN-DEBUG]   - Forcing redraw...');
             this.cy.forceRender();
-            
+
             // Force layout
             if (this.cy.nodes().length > 0) {
                 console.log('[HUD-BLANK-SCREEN-DEBUG]   - Running layout...');
                 this.cy.layout(this.layoutConfig).run();
             }
-            
+
             // Force viewport update
             console.log('[HUD-BLANK-SCREEN-DEBUG]   - Updating viewport...');
             this.cy.viewport({
                 zoom: this.cy.zoom(),
                 pan: this.cy.pan()
             });
-            
+
             console.log('[HUD-BLANK-SCREEN-DEBUG]   Manual rendering triggers completed');
         } catch (error) {
             console.error('[HUD-BLANK-SCREEN-DEBUG]   Error during manual rendering:', error);
@@ -1504,13 +1504,13 @@ class HUDVisualizer {
      */
     debugAddTestNodes() {
         if (!this.cy) return;
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG]   Adding test nodes...');
-        
+
         try {
             // Clear existing elements
             this.cy.elements().remove();
-            
+
             // Add test nodes
             const testNodes = [
                 {
@@ -1553,7 +1553,7 @@ class HUDVisualizer {
                     classes: 'todo-node'
                 }
             ];
-            
+
             // Add test edges
             const testEdges = [
                 {
@@ -1573,21 +1573,21 @@ class HUDVisualizer {
                     }
                 }
             ];
-            
+
             // Add elements to Cytoscape
             this.cy.add(testNodes);
             this.cy.add(testEdges);
-            
+
             console.log('[HUD-BLANK-SCREEN-DEBUG]   Added 3 test nodes and 2 test edges');
-            
+
             // Update our internal nodes map
             testNodes.forEach(nodeElement => {
                 this.nodes.set(nodeElement.data.id, nodeElement.data);
             });
-            
+
             // Run layout
             this.runLayout();
-            
+
         } catch (error) {
             console.error('[HUD-BLANK-SCREEN-DEBUG]   Error adding test nodes:', error);
         }
@@ -1598,50 +1598,50 @@ class HUDVisualizer {
      */
     debugForceZoomFit() {
         if (!this.cy) return;
-        
+
         console.log('[HUD-BLANK-SCREEN-DEBUG] 7. Forcing zoom fit...');
-        
+
         const attemptZoomFit = (attemptNumber) => {
             try {
                 console.log(`[HUD-BLANK-SCREEN-DEBUG]   Zoom fit attempt ${attemptNumber}...`);
-                
+
                 // Get current state before fit
                 const beforeZoom = this.cy.zoom();
                 const beforePan = this.cy.pan();
                 const elements = this.cy.elements();
-                
+
                 console.log('[HUD-BLANK-SCREEN-DEBUG]   Before fit:', {
                     zoom: beforeZoom,
                     pan: beforePan,
                     elementCount: elements.length
                 });
-                
+
                 if (elements.length > 0) {
                     // Try fit with specific options
                     this.cy.fit(elements, 50); // 50px padding
-                    
+
                     // Get state after fit
                     const afterZoom = this.cy.zoom();
                     const afterPan = this.cy.pan();
-                    
+
                     console.log('[HUD-BLANK-SCREEN-DEBUG]   After fit:', {
                         zoom: afterZoom,
                         pan: afterPan,
                         changed: beforeZoom !== afterZoom || beforePan.x !== afterPan.x || beforePan.y !== afterPan.y
                     });
-                    
+
                     // Force center
                     this.cy.center(elements);
-                    
+
                 } else {
                     console.log('[HUD-BLANK-SCREEN-DEBUG]   No elements to fit');
                 }
-                
+
             } catch (error) {
                 console.error(`[HUD-BLANK-SCREEN-DEBUG]   Zoom fit attempt ${attemptNumber} failed:`, error);
             }
         };
-        
+
         // Multiple attempts with delays
         attemptZoomFit(1);
         setTimeout(() => attemptZoomFit(2), 100);
@@ -1657,13 +1657,13 @@ class HUDVisualizer {
             console.log('[HUD-CANVAS-TEST] No Cytoscape instance');
             return false;
         }
-        
+
         console.log('[HUD-CANVAS-TEST] Testing Cytoscape canvas rendering...');
-        
+
         try {
             // Clear everything
             this.cy.elements().remove();
-            
+
             // Add a single, simple node at center
             this.cy.add({
                 group: 'nodes',
@@ -1678,18 +1678,18 @@ class HUDVisualizer {
                 },
                 position: { x: 200, y: 200 } // Fixed position
             });
-            
+
             // Force immediate render
             this.cy.forceRender();
-            
+
             // Zoom to fit this single node
             this.cy.fit(this.cy.$('#canvas-test'), 50);
-            
+
             console.log('[HUD-CANVAS-TEST] Canvas test node added and positioned');
             console.log('[HUD-CANVAS-TEST] If you see a red rectangle with "CANVAS TEST", rendering works!');
-            
+
             return true;
-            
+
         } catch (error) {
             console.error('[HUD-CANVAS-TEST] Canvas test failed:', error);
             return false;
@@ -1715,4 +1715,4 @@ class HUDVisualizer {
 }
 
 // Export for use in dashboard
-window.HUDVisualizer = HUDVisualizer;
+window.HUDVisualizer = HUDVisualizer;