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

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

@@ -1,1718 +0,0 @@
-/**
- * HUD Visualizer Component
- * Manages the Cytoscape.js tree visualization for the HUD mode with lazy loading
- */
-
-class HUDVisualizer {
-    constructor() {
-        this.cy = null;
-        this.container = null;
-        this.nodes = new Map(); // Map of node IDs to node data
-        this.isActive = false;
-        this.librariesLoaded = false;
-        this.loadingPromise = null;
-        this.pendingEvents = []; // Store events received before libraries are loaded
-
-        // Layout configuration
-        this.layoutConfig = {
-            name: 'dagre',
-            rankDir: 'TB', // Top to bottom
-            animate: true,
-            animationDuration: 500,
-            fit: true,
-            padding: 30,
-            rankSep: 100,
-            nodeSep: 80
-        };
-
-        // Node type configurations
-        this.nodeTypes = {
-            PM: {
-                color: '#48bb78',
-                shape: 'rectangle',
-                width: 120,
-                height: 40,
-                icon: '👤'
-            },
-            AGENT: {
-                color: '#9f7aea',
-                shape: 'ellipse',
-                width: 100,
-                height: 60,
-                icon: '🤖'
-            },
-            TOOL: {
-                color: '#4299e1',
-                shape: 'diamond',
-                width: 80,
-                height: 50,
-                icon: '🔧'
-            },
-            TODO: {
-                color: '#e53e3e',
-                shape: 'triangle',
-                width: 70,
-                height: 40,
-                icon: '📝'
-            }
-        };
-    }
-
-    /**
-     * Initialize the HUD visualizer (called at startup)
-     */
-    initialize() {
-        this.container = document.getElementById('hud-cytoscape');
-        if (!this.container) {
-            console.error('HUD container not found');
-            return false;
-        }
-
-        // Ensure container has proper attributes for interaction
-        this.container.style.pointerEvents = 'auto';
-        this.container.style.cursor = 'default';
-        this.container.style.position = 'relative';
-        this.container.style.zIndex = '1';
-
-        // Setup basic event handlers (not library-dependent)
-        this.setupBasicEventHandlers();
-
-        console.log('HUD Visualizer initialized (libraries will load lazily)');
-        return true;
-    }
-
-    /**
-     * Load libraries and initialize Cytoscape when HUD is first activated
-     * @returns {Promise} - Promise that resolves when libraries are loaded and Cytoscape is initialized
-     */
-    async loadLibrariesAndInitialize() {
-        if (this.librariesLoaded && this.cy) {
-            return Promise.resolve();
-        }
-
-        // If already loading, return the existing promise
-        if (this.loadingPromise) {
-            return this.loadingPromise;
-        }
-
-        this.loadingPromise = this._performLazyLoading();
-        return this.loadingPromise;
-    }
-
-    /**
-     * Perform the actual lazy loading process
-     * @private
-     */
-    async _performLazyLoading() {
-        try {
-            console.log('[HUD-VISUALIZER-DEBUG] _performLazyLoading() called');
-            console.log('[HUD-VISUALIZER-DEBUG] Loading HUD visualization libraries...');
-
-            // Show loading indicator
-            this.showLoadingIndicator();
-
-            // Load libraries using the HUD library loader
-            if (!window.HUDLibraryLoader) {
-                throw new Error('HUD Library Loader not available');
-            }
-
-            console.log('[HUD-VISUALIZER-DEBUG] HUD Library Loader found, loading libraries...');
-            await window.HUDLibraryLoader.loadHUDLibraries((progress) => {
-                console.log('[HUD-VISUALIZER-DEBUG] Loading progress:', progress);
-                this.updateLoadingProgress(progress);
-            });
-
-            // Verify libraries are available
-            console.log('[HUD-VISUALIZER-DEBUG] Verifying libraries are loaded...');
-            if (typeof window.cytoscape === 'undefined') {
-                throw new Error('Cytoscape.js not loaded');
-            }
-            if (typeof window.dagre === 'undefined') {
-                throw new Error('Dagre not loaded');
-            }
-            if (typeof window.cytoscapeDagre === 'undefined') {
-                throw new Error('Cytoscape-dagre not loaded');
-            }
-
-            console.log('[HUD-VISUALIZER-DEBUG] All HUD libraries loaded successfully');
-            this.librariesLoaded = true;
-
-            // 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();
-
-            console.log('[HUD-VISUALIZER-DEBUG] HUD Visualizer fully initialized with lazy loading');
-            return true;
-
-        } catch (error) {
-            console.error('[HUD-VISUALIZER-DEBUG] Failed to load HUD libraries:', error);
-            console.error('[HUD-VISUALIZER-DEBUG] Error stack:', error.stack);
-            this.showLoadingError(error.message);
-            this.librariesLoaded = false;
-            this.loadingPromise = null;
-            throw error;
-        }
-    }
-
-    /**
-     * Initialize Cytoscape.js instance (called after libraries are loaded)
-     */
-    initializeCytoscape() {
-        if (!this.librariesLoaded || !window.cytoscape) {
-            console.error('Cannot initialize Cytoscape: libraries not loaded');
-            return;
-        }
-
-        // Register dagre extension for hierarchical layouts
-        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
-                {
-                    selector: 'node',
-                    style: {
-                        'background-color': 'data(color)',
-                        'border-color': 'data(borderColor)',
-                        'border-width': 2,
-                        'color': '#ffffff',
-                        'label': 'data(label)',
-                        'text-valign': 'center',
-                        'text-halign': 'center',
-                        'font-size': '12px',
-                        'font-weight': 'bold',
-                        'width': 'data(width)',
-                        'height': 'data(height)',
-                        'shape': 'data(shape)',
-                        'text-wrap': 'wrap',
-                        'text-max-width': '100px'
-                    }
-                },
-
-                // Edge styles
-                {
-                    selector: 'edge',
-                    style: {
-                        'width': 2,
-                        'line-color': '#718096',
-                        'target-arrow-color': '#718096',
-                        'target-arrow-shape': 'triangle',
-                        'curve-style': 'bezier',
-                        'arrow-scale': 1.2
-                    }
-                },
-
-                // Node type specific styles
-                {
-                    selector: '.pm-node',
-                    style: {
-                        'background-color': '#48bb78',
-                        'border-color': '#38a169',
-                        'shape': 'rectangle'
-                    }
-                },
-
-                {
-                    selector: '.agent-node',
-                    style: {
-                        'background-color': '#9f7aea',
-                        'border-color': '#805ad5',
-                        'shape': 'ellipse'
-                    }
-                },
-
-                {
-                    selector: '.tool-node',
-                    style: {
-                        'background-color': '#4299e1',
-                        'border-color': '#3182ce',
-                        'shape': 'diamond'
-                    }
-                },
-
-                {
-                    selector: '.todo-node',
-                    style: {
-                        'background-color': '#e53e3e',
-                        'border-color': '#c53030',
-                        'shape': 'triangle'
-                    }
-                },
-
-                // Hover effects
-                {
-                    selector: 'node:active',
-                    style: {
-                        'overlay-opacity': 0.2,
-                        'overlay-color': '#000000'
-                    }
-                }
-            ],
-
-            layout: this.layoutConfig
-        });
-
-        // Setup resize handler
-        this.setupResizeHandler();
-    }
-
-    /**
-     * Setup basic event handlers (not dependent on libraries)
-     */
-    setupBasicEventHandlers() {
-        // Reset layout button
-        const resetBtn = document.getElementById('hud-reset-layout');
-        if (resetBtn) {
-            resetBtn.addEventListener('click', () => {
-                this.resetLayout();
-            });
-        }
-
-        // Center view button
-        const centerBtn = document.getElementById('hud-center-view');
-        if (centerBtn) {
-            centerBtn.addEventListener('click', () => {
-                this.centerView();
-            });
-        }
-    }
-
-    /**
-     * Setup Cytoscape-dependent event handlers (called after libraries are loaded)
-     */
-    setupCytoscapeEventHandlers() {
-        if (!this.cy) {
-            console.warn('[HUD-VISUALIZER-DEBUG] Cannot setup Cytoscape event handlers: no cy instance');
-            return;
-        }
-
-        console.log('[HUD-VISUALIZER-DEBUG] Setting up Cytoscape event handlers...');
-
-        // Node click events
-        this.cy.on('tap', 'node', (evt) => {
-            const node = evt.target;
-            const data = node.data();
-            console.log('[HUD-VISUALIZER-DEBUG] Node clicked:', data);
-
-            // Highlight connected nodes
-            this.highlightConnectedNodes(node);
-        });
-
-        // Background click events
-        this.cy.on('tap', (evt) => {
-            if (evt.target === this.cy) {
-                console.log('[HUD-VISUALIZER-DEBUG] Background clicked - resetting highlights');
-                // Reset all node styles
-                this.cy.nodes().style({
-                    'opacity': 1
-                });
-
-                this.cy.edges().style({
-                    'opacity': 1
-                });
-            }
-        });
-
-        // Mouse events for debugging
-        this.cy.on('mouseover', 'node', (evt) => {
-            const node = evt.target;
-            node.style('opacity', 0.8);
-        });
-
-        this.cy.on('mouseout', 'node', (evt) => {
-            const node = evt.target;
-            node.style('opacity', 1);
-        });
-
-        console.log('[HUD-VISUALIZER-DEBUG] Cytoscape event handlers set up successfully');
-    }
-
-    /**
-     * Setup resize handler for container
-     */
-    setupResizeHandler() {
-        const resizeObserver = new ResizeObserver(() => {
-            if (this.cy && this.isActive) {
-                this.ensureContainerResize();
-            }
-        });
-
-        if (this.container) {
-            resizeObserver.observe(this.container);
-        }
-    }
-
-    /**
-     * Ensure container is properly resized and visible
-     */
-    ensureContainerResize() {
-        if (!this.cy || !this.container) {
-            console.log('[HUD-VISUALIZER-DEBUG] Cannot resize: missing cy or container');
-            return;
-        }
-
-        // Ensure container can receive events
-        this.ensureContainerInteractivity();
-
-        // Log container dimensions
-        const containerRect = this.container.getBoundingClientRect();
-        console.log('[HUD-VISUALIZER-DEBUG] Container dimensions:', {
-            width: containerRect.width,
-            height: containerRect.height,
-            offsetWidth: this.container.offsetWidth,
-            offsetHeight: this.container.offsetHeight,
-            isVisible: containerRect.width > 0 && containerRect.height > 0
-        });
-
-        // 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;
-                console.log('[HUD-VISUALIZER-DEBUG] Cytoscape elements after resize:', {
-                    nodes: nodeCount,
-                    edges: edgeCount
-                });
-
-                // If we have nodes, fit and run layout
-                if (nodeCount > 0) {
-                    console.log('[HUD-VISUALIZER-DEBUG] Running fit and layout...');
-                    this.cy.fit();
-                    this.runLayout();
-                } else {
-                    console.log('[HUD-VISUALIZER-DEBUG] No nodes to display');
-                }
-
-            } catch (error) {
-                console.error('[HUD-VISUALIZER-DEBUG] Error during resize:', error);
-            }
-        } else {
-            console.log('[HUD-VISUALIZER-DEBUG] Container not visible yet, skipping resize');
-        }
-    }
-
-    /**
-     * Ensure container can receive mouse and touch events
-     */
-    ensureContainerInteractivity() {
-        if (!this.container) return;
-
-        // Force container to be interactive
-        this.container.style.pointerEvents = 'auto';
-        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) {
-            parent.style.pointerEvents = 'auto';
-            parent.style.position = 'relative';
-        }
-
-        console.log('[HUD-VISUALIZER-DEBUG] Container interactivity ensured');
-    }
-
-    /**
-     * Activate the HUD visualizer (triggers lazy loading if needed)
-     */
-    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();
-                }, 500);
-            }
-            console.log('[HUD-VISUALIZER-DEBUG] activate() completed successfully');
-        } catch (error) {
-            console.error('[HUD-VISUALIZER-DEBUG] Failed to activate HUD:', error);
-            console.error('[HUD-VISUALIZER-DEBUG] Error stack:', error.stack);
-            // Keep isActive true so user can retry
-            throw error; // Re-throw so the promise rejects properly
-        }
-    }
-
-    /**
-     * Deactivate the HUD visualizer
-     */
-    deactivate() {
-        this.isActive = false;
-    }
-
-    /**
-     * Process pending events that were received before libraries loaded
-     */
-    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 = [];
-        }
-    }
-
-    /**
-     * Process existing events from dashboard when HUD is activated
-     * This builds the complete tree structure from historical events
-     * @param {Array} events - Array of sorted historical events
-     */
-    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`);
-            this.pendingEvents = [...events];
-            return;
-        }
-
-        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:');
-            events.slice(0, 3).forEach((event, i) => {
-                console.log(`[HUD-VISUALIZER-DEBUG]   Event ${i + 1}:`, {
-                    timestamp: event.timestamp,
-                    hook_event_name: event.hook_event_name,
-                    type: event.type,
-                    subtype: event.subtype,
-                    session_id: event.session_id,
-                    data_session_id: event.data?.session_id,
-                    data_keys: event.data ? Object.keys(event.data) : 'no data'
-                });
-            });
-        }
-
-        // 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`);
-    }
-
-    /**
-     * Group events by session ID for hierarchical processing
-     * @param {Array} events - Array of events
-     * @returns {Object} Object with session IDs as keys and event arrays as values
-     */
-    groupEventsBySession(events) {
-        const sessionGroups = {};
-
-        events.forEach(event => {
-            const sessionId = event.session_id || event.data?.session_id || 'unknown';
-            if (!sessionGroups[sessionId]) {
-                sessionGroups[sessionId] = [];
-            }
-            sessionGroups[sessionId].push(event);
-        });
-
-        return sessionGroups;
-    }
-
-    /**
-     * Build a tree structure for a specific session
-     * @param {string} sessionId - Session identifier
-     * @param {Array} sessionEvents - Events for this session
-     */
-    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,
-                timestamp: event.timestamp,
-                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);
-        });
-    }
-
-    /**
-     * Create node data from an event
-     * @param {Object} event - Event object
-     * @param {string} sessionId - Session ID
-     * @returns {Object|null} Node data or null if event should be skipped
-     */
-    createNodeFromEvent(event, sessionId) {
-        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
-            nodeType = 'PM';
-            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';
-            const toolName = event.data?.tool_name || 'Unknown Tool';
-            // Clean tool name for ID
-            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';
-            const agentName = event.data?.agent_type || event.data?.agent_name || 'Agent';
-            // Clean agent name for ID
-            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';
-            if (!['error', 'critical'].includes(level)) {
-                return null;
-            }
-            nodeType = 'PM';
-            label = `${level.toUpperCase()} Log`;
-            nodeId = `log-${level}-${timestampId}-${randomSuffix}`;
-
-        } else {
-            // Generic event node
-            nodeType = 'PM';
-            const cleanEventType = eventType.replace(/[^a-zA-Z0-9]/g, '') || 'Event';
-            label = eventType || 'Event';
-            nodeId = `generic-${cleanEventType}-${timestampId}-${randomSuffix}`;
-        }
-
-        return {
-            id: nodeId,
-            type: nodeType,
-            label: label,
-            isSessionRoot: isSessionRoot
-        };
-    }
-
-    /**
-     * Create hierarchical relationships between nodes based on event context
-     * @param {string} nodeId - Current node ID
-     * @param {Object} event - Current event
-     * @param {Map} sessionNodes - Map of all nodes in this session
-     * @param {string} sessionRootNode - Root node ID for this session
-     */
-    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);
-        }
-    }
-
-    /**
-     * Find the most recent parent node of specified types
-     * @param {Map} sessionNodes - Map of session nodes
-     * @param {Array} nodeTypes - Array of node type prefixes to search for
-     * @param {string} currentNodeId - Current node ID to exclude from search
-     * @returns {string|null} Parent node ID or null
-     */
-    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)) {
-                    return nodeId;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * Process a socket event and add appropriate nodes/edges
-     * @param {Object} event - Socket event data
-     */
-    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);
-            return;
-        }
-
-        this._processEventInternal(event);
-    }
-
-    /**
-     * Internal event processing (assumes libraries are loaded)
-     * @private
-     */
-    _processEventInternal(event) {
-        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';
-            const toolName = event.data?.tool_name || 'Unknown Tool';
-            label = toolName;
-            nodeId = `tool-${toolName}-${timestamp.getTime()}`;
-        } else if (eventType.includes('agent')) {
-            nodeType = 'AGENT';
-            const agentName = event.data?.agent_name || 'Agent';
-            label = agentName;
-            nodeId = `agent-${agentName}-${timestamp.getTime()}`;
-        } else if (eventType.includes('todo')) {
-            nodeType = 'TODO';
-            label = 'Todo List';
-            nodeId = `todo-${timestamp.getTime()}`;
-        } else if (eventType.includes('user_prompt') || eventType.includes('claude_response')) {
-            nodeType = 'PM';
-            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);
-    }
-
-    /**
-     * Add a node to the visualization
-     * @param {string} id - Unique node identifier
-     * @param {string} type - Node type (PM, AGENT, TOOL, TODO)
-     * @param {string} label - Node label
-     * @param {Object} data - Additional node data
-     */
-    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,
-            label: `${nodeType.icon} ${label}`,
-            type: type,
-            color: nodeType.color,
-            borderColor: this.darkenColor(nodeType.color, 20),
-            shape: nodeType.shape,
-            width: nodeType.width,
-            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}`);
-            this.runLayout();
-        }
-    }
-
-    /**
-     * Add an edge between two nodes
-     * @param {string} sourceId - Source node ID
-     * @param {string} targetId - Target node ID
-     * @param {string} edgeId - Unique edge identifier
-     * @param {Object} data - Additional edge data
-     */
-    addEdge(sourceId, targetId, edgeId = null, data = {}) {
-        if (!sourceId || !targetId) {
-            console.warn(`[HUD-VISUALIZER-DEBUG] Cannot create edge: missing source (${sourceId}) or target (${targetId})`);
-            return;
-        }
-
-        if (sourceId === targetId) {
-            console.warn(`[HUD-VISUALIZER-DEBUG] Cannot create self-loop edge from ${sourceId} to itself`);
-            return;
-        }
-
-        if (!edgeId) {
-            edgeId = `edge-${sourceId}-to-${targetId}`;
-        }
-
-        if (this.cy) {
-            // Check if edge already exists
-            const existingEdge = this.cy.getElementById(edgeId);
-            if (existingEdge.length > 0) {
-                console.log(`[HUD-VISUALIZER-DEBUG] Edge ${edgeId} already exists, skipping`);
-                return;
-            }
-
-            // 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;
-            }
-
-            const element = {
-                group: 'edges',
-                data: {
-                    id: edgeId,
-                    source: sourceId,
-                    target: targetId,
-                    ...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}`);
-                this.runLayout();
-            } catch (error) {
-                console.error(`[HUD-VISUALIZER-DEBUG] Failed to add edge ${edgeId}:`, error);
-                console.error(`[HUD-VISUALIZER-DEBUG] Element details:`, element);
-            }
-        }
-    }
-
-    /**
-     * Create relationships between events
-     * @param {string} nodeId - Current node ID
-     * @param {Object} event - Event data
-     */
-    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
-            const parentNode = this.findParentNode(sessionId, ['PM', 'AGENT']);
-            if (parentNode) {
-                this.addEdge(parentNode, nodeId);
-                return;
-            }
-        }
-
-        // Agent delegation relationships
-        if (eventType.includes('agent') || event.data?.agent_name) {
-            // Connect agents to PM nodes
-            const pmNode = this.findParentNode(sessionId, ['PM']);
-            if (pmNode) {
-                this.addEdge(pmNode, nodeId);
-                return;
-            }
-        }
-
-        // Todo relationships - connect to agent or PM nodes
-        if (eventType.includes('todo')) {
-            const parentNode = this.findParentNode(sessionId, ['AGENT', 'PM']);
-            if (parentNode) {
-                this.addEdge(parentNode, nodeId);
-                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);
-        }
-    }
-
-    /**
-     * Find a parent node of specific types for the same session
-     * @param {string} sessionId - Session ID
-     * @param {Array} nodeTypes - Array of node types to search for
-     * @returns {string|null} - Parent node ID or null
-     */
-    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;
-    }
-
-    /**
-     * Highlight connected nodes
-     * @param {Object} node - Cytoscape node object
-     */
-    highlightConnectedNodes(node) {
-        if (!this.cy) return;
-
-        // Reset all node styles
-        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);
-        neighborhood.style('opacity', 1);
-    }
-
-    /**
-     * Reset layout
-     */
-    resetLayout() {
-        if (this.cy) {
-            this.cy.layout(this.layoutConfig).run();
-        }
-    }
-
-    /**
-     * Center view
-     */
-    centerView() {
-        if (this.cy) {
-            this.cy.fit();
-            this.cy.center();
-        }
-    }
-
-    /**
-     * Run layout animation
-     */
-    runLayout() {
-        console.log(`[HUD-VISUALIZER-DEBUG] runLayout called - isActive: ${this.isActive}, cy exists: ${!!this.cy}`);
-        if (this.cy && this.isActive) {
-            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();
-                console.log(`[HUD-VISUALIZER-DEBUG] Container dimensions before layout:`, {
-                    width: rect.width,
-                    height: rect.height,
-                    offsetWidth: this.container.offsetWidth,
-                    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:`);
-                this.cy.nodes().forEach((node, index) => {
-                    const position = node.position();
-                    const data = node.data();
-                    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`);
-        }
-    }
-
-    /**
-     * Clear all nodes and edges
-     */
-    clear() {
-        console.log(`[HUD-VISUALIZER-DEBUG] Clearing HUD: ${this.nodes.size} nodes, ${this.pendingEvents.length} pending events`);
-        this.nodes.clear();
-        this.pendingEvents = [];
-        if (this.cy) {
-            const elementCount = this.cy.elements().length;
-            try {
-                this.cy.elements().remove();
-                console.log(`[HUD-VISUALIZER-DEBUG] Removed ${elementCount} Cytoscape elements`);
-            } catch (error) {
-                console.error(`[HUD-VISUALIZER-DEBUG] Error clearing Cytoscape elements:`, error);
-                // Try to destroy and recreate if clearing fails
-                try {
-                    this.cy.destroy();
-                    this.cy = null;
-                    console.log(`[HUD-VISUALIZER-DEBUG] Destroyed Cytoscape instance due to clear error`);
-                } catch (destroyError) {
-                    console.error(`[HUD-VISUALIZER-DEBUG] Error destroying Cytoscape:`, destroyError);
-                }
-            }
-        }
-    }
-
-    /**
-     * Show loading indicator
-     */
-    showLoadingIndicator() {
-        if (this.container) {
-            this.container.innerHTML = `
-                <div class="hud-loading-container">
-                    <div class="hud-loading-spinner"></div>
-                    <div class="hud-loading-text">Loading HUD visualization libraries...</div>
-                    <div class="hud-loading-progress" id="hud-loading-progress"></div>
-                </div>
-            `;
-        }
-    }
-
-    /**
-     * Update loading progress
-     */
-    updateLoadingProgress(progress) {
-        const progressElement = document.getElementById('hud-loading-progress');
-        if (progressElement) {
-            if (progress.error) {
-                progressElement.innerHTML = `<span class="hud-error">❌ ${progress.message}</span>`;
-            } else {
-                progressElement.innerHTML = `
-                    <div class="hud-progress-bar">
-                        <div class="hud-progress-fill" style="width: ${(progress.current / progress.total) * 100}%"></div>
-                    </div>
-                    <div class="hud-progress-text">${progress.message} (${progress.current}/${progress.total})</div>
-                `;
-            }
-        }
-    }
-
-    /**
-     * Hide loading indicator
-     */
-    hideLoadingIndicator() {
-        if (this.container) {
-            this.container.innerHTML = '';
-        }
-    }
-
-    /**
-     * Show loading error
-     */
-    showLoadingError(message) {
-        if (this.container) {
-            this.container.innerHTML = `
-                <div class="hud-error-container">
-                    <div class="hud-error-icon">⚠️</div>
-                    <div class="hud-error-text">Failed to load HUD libraries</div>
-                    <div class="hud-error-message">${message}</div>
-                    <button class="hud-retry-button" onclick="window.hudVisualizer && window.hudVisualizer.retryLoading()">
-                        Retry Loading
-                    </button>
-                </div>
-            `;
-        }
-    }
-
-    /**
-     * Retry loading libraries (called from error UI)
-     */
-    retryLoading() {
-        this.librariesLoaded = false;
-        this.loadingPromise = null;
-        this.activate();
-    }
-
-    /**
-     * Debug method to manually test HUD visualizer
-     * Can be called from browser console: window.hudVisualizer.debugTest()
-     */
-    debugTest() {
-        console.log('[HUD-VISUALIZER-DEBUG] debugTest() called manually');
-        console.log('[HUD-VISUALIZER-DEBUG] Current state:', {
-            isActive: this.isActive,
-            librariesLoaded: this.librariesLoaded,
-            hasCy: !!this.cy,
-            hasContainer: !!this.container,
-            nodeCount: this.nodes.size,
-            pendingEventCount: this.pendingEvents.length,
-            hasHUDLibraryLoader: !!window.HUDLibraryLoader
-        });
-
-        // Test container
-        if (this.container) {
-            console.log('[HUD-VISUALIZER-DEBUG] Container info:', {
-                id: this.container.id,
-                className: this.container.className,
-                offsetWidth: this.container.offsetWidth,
-                offsetHeight: this.container.offsetHeight,
-                innerHTML: this.container.innerHTML ? 'has content' : 'empty'
-            });
-        }
-
-        // Test library availability
-        console.log('[HUD-VISUALIZER-DEBUG] Library availability:', {
-            cytoscape: typeof window.cytoscape,
-            dagre: typeof window.dagre,
-            cytoscapeDagre: typeof window.cytoscapeDagre,
-            HUDLibraryLoader: typeof window.HUDLibraryLoader
-        });
-
-        return {
-            isActive: this.isActive,
-            librariesLoaded: this.librariesLoaded,
-            hasCy: !!this.cy,
-            containerFound: !!this.container
-        };
-    }
-
-    /**
-     * Comprehensive debug method to identify blank screen issues
-     * Can be called from browser console: window.hudVisualizer.debugBlankScreen()
-     */
-    debugBlankScreen() {
-        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,
-            librariesLoaded: this.librariesLoaded,
-            hasCy: !!this.cy,
-            hasContainer: !!this.container,
-            nodeCount: this.nodes.size,
-            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();
-            console.log('[HUD-BLANK-SCREEN-DEBUG] 3. Cytoscape Info:', cytoscapeInfo);
-        } else {
-            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;
-    }
-
-    /**
-     * Get comprehensive container debug information
-     */
-    getContainerDebugInfo() {
-        const rect = this.container.getBoundingClientRect();
-        const computed = window.getComputedStyle(this.container);
-
-        return {
-            id: this.container.id,
-            className: this.container.className,
-            // Dimensions
-            offsetWidth: this.container.offsetWidth,
-            offsetHeight: this.container.offsetHeight,
-            clientWidth: this.container.clientWidth,
-            clientHeight: this.container.clientHeight,
-            scrollWidth: this.container.scrollWidth,
-            scrollHeight: this.container.scrollHeight,
-            // Bounding rect
-            boundingRect: {
-                width: rect.width,
-                height: rect.height,
-                top: rect.top,
-                left: rect.left,
-                bottom: rect.bottom,
-                right: rect.right
-            },
-            // Computed styles that affect visibility
-            computedStyles: {
-                display: computed.display,
-                visibility: computed.visibility,
-                opacity: computed.opacity,
-                position: computed.position,
-                overflow: computed.overflow,
-                zIndex: computed.zIndex,
-                backgroundColor: computed.backgroundColor,
-                transform: computed.transform
-            },
-            // Check if visible
-            isVisible: rect.width > 0 && rect.height > 0 && computed.display !== 'none' && computed.visibility !== 'hidden',
-            // Parent info
-            parentElement: this.container.parentElement ? {
-                tagName: this.container.parentElement.tagName,
-                className: this.container.parentElement.className,
-                offsetWidth: this.container.parentElement.offsetWidth,
-                offsetHeight: this.container.parentElement.offsetHeight
-            } : null
-        };
-    }
-
-    /**
-     * Get comprehensive Cytoscape debug information
-     */
-    getCytoscapeDebugInfo() {
-        const extent = this.cy.extent();
-        const zoom = this.cy.zoom();
-        const pan = this.cy.pan();
-        const viewport = this.cy.viewport();
-
-        return {
-            // Elements
-            nodeCount: this.cy.nodes().length,
-            edgeCount: this.cy.edges().length,
-            elementCount: this.cy.elements().length,
-            // Viewport
-            zoom: zoom,
-            pan: pan,
-            extent: extent,
-            viewport: viewport,
-            // Container
-            containerWidth: this.cy.width(),
-            containerHeight: this.cy.height(),
-            // Check if initialized
-            isInitialized: this.cy.scratch('_cytoscape-initialized') !== undefined,
-            // Renderer info
-            renderer: this.cy.renderer() ? {
-                name: this.cy.renderer().name,
-                options: this.cy.renderer().options
-            } : null
-        };
-    }
-
-    /**
-     * Debug node positions to check if they're outside viewport
-     */
-    debugNodePositions() {
-        if (!this.cy || this.cy.nodes().length === 0) {
-            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,
-                position: position,
-                boundingBox: boundingBox,
-                isVisible: node.visible(),
-                opacity: node.style('opacity'),
-                width: node.style('width'),
-                height: node.style('height')
-            });
-        });
-    }
-
-    /**
-     * Add background color to container to verify it's visible
-     */
-    debugAddContainerBackground() {
-        if (this.container) {
-            this.container.style.backgroundColor = '#ff000020'; // Light red background
-            this.container.style.border = '2px solid #ff0000'; // Red border
-            this.container.style.minHeight = '400px'; // Ensure minimum height
-            console.log('[HUD-BLANK-SCREEN-DEBUG] Added red background and border to container for visibility test');
-        }
-    }
-
-    /**
-     * Manual rendering triggers to force Cytoscape to render
-     */
-    debugManualRenderingTriggers() {
-        if (!this.cy) {
-            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);
-        }
-    }
-
-    /**
-     * Add test nodes to verify Cytoscape is working
-     */
-    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 = [
-                {
-                    group: 'nodes',
-                    data: {
-                        id: 'test-node-1',
-                        label: '🤖 Test Node 1',
-                        color: '#48bb78',
-                        borderColor: '#38a169',
-                        shape: 'rectangle',
-                        width: 120,
-                        height: 40
-                    },
-                    classes: 'pm-node'
-                },
-                {
-                    group: 'nodes',
-                    data: {
-                        id: 'test-node-2',
-                        label: '🔧 Test Node 2',
-                        color: '#4299e1',
-                        borderColor: '#3182ce',
-                        shape: 'diamond',
-                        width: 80,
-                        height: 50
-                    },
-                    classes: 'tool-node'
-                },
-                {
-                    group: 'nodes',
-                    data: {
-                        id: 'test-node-3',
-                        label: '📝 Test Node 3',
-                        color: '#e53e3e',
-                        borderColor: '#c53030',
-                        shape: 'triangle',
-                        width: 70,
-                        height: 40
-                    },
-                    classes: 'todo-node'
-                }
-            ];
-
-            // Add test edges
-            const testEdges = [
-                {
-                    group: 'edges',
-                    data: {
-                        id: 'test-edge-1',
-                        source: 'test-node-1',
-                        target: 'test-node-2'
-                    }
-                },
-                {
-                    group: 'edges',
-                    data: {
-                        id: 'test-edge-2',
-                        source: 'test-node-2',
-                        target: 'test-node-3'
-                    }
-                }
-            ];
-
-            // 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);
-        }
-    }
-
-    /**
-     * Force zoom fit after layout with multiple attempts
-     */
-    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);
-        setTimeout(() => attemptZoomFit(3), 500);
-        setTimeout(() => attemptZoomFit(4), 1000);
-    }
-
-    /**
-     * Quick test to draw a simple shape to verify Cytoscape canvas is working
-     */
-    debugDrawSimpleShape() {
-        if (!this.cy) {
-            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',
-                data: {
-                    id: 'canvas-test',
-                    label: '✅ CANVAS TEST',
-                    color: '#ff0000',
-                    borderColor: '#000000',
-                    width: 200,
-                    height: 100,
-                    shape: 'rectangle'
-                },
-                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;
-        }
-    }
-
-    /**
-     * Utility function to darken a color
-     * @param {string} color - Hex color
-     * @param {number} percent - Percentage to darken
-     * @returns {string} - Darkened hex color
-     */
-    darkenColor(color, percent) {
-        const num = parseInt(color.replace("#", ""), 16);
-        const amt = Math.round(2.55 * percent);
-        const R = (num >> 16) - amt;
-        const G = (num >> 8 & 0x00FF) - amt;
-        const B = (num & 0x0000FF) - amt;
-        return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
-            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
-            (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
-    }
-}
-
-// Export for use in dashboard
-window.HUDVisualizer = HUDVisualizer;