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

claude_mpm/dashboard/static/js/components/unified-data-viewer.js

@@ -1,1824 +0,0 @@
-/**
- * Unified Data Viewer Component
- * 
- * Consolidates all data formatting and display logic from event-driven tabs
- * (Activity, Events, Agents) into a single, reusable component.
- * 
- * WHY: Eliminates code duplication across multiple components and provides
- * consistent data display formatting throughout the dashboard.
- * 
- * DESIGN DECISION: Auto-detects data type and applies appropriate formatting,
- * while allowing manual type specification for edge cases.
- */
-
-class UnifiedDataViewer {
-    constructor(containerId = 'module-data-content') {
-        this.container = document.getElementById(containerId);
-        this.currentData = null;
-        this.currentType = null;
-        
-        // Global JSON visibility state - synchronized with localStorage
-        // This ensures all JSON sections maintain consistent state
-        this.globalJsonExpanded = localStorage.getItem('dashboard-json-expanded') === 'true';
-        
-        // Separate state for "Full Event Data" sections - uses its own localStorage key
-        // This allows independent control of Full Event Data visibility
-        this.fullEventDataExpanded = localStorage.getItem('dashboard-full-event-expanded') === 'true';
-        
-        // Listen for global JSON toggle changes from other components
-        document.addEventListener('jsonToggleChanged', (e) => {
-            this.globalJsonExpanded = e.detail.expanded;
-            this.updateAllJsonSections();
-        });
-        
-        // Listen for full event data toggle changes
-        document.addEventListener('fullEventToggleChanged', (e) => {
-            this.fullEventDataExpanded = e.detail.expanded;
-            this.updateAllFullEventSections();
-        });
-    }
-
-    /**
-     * Main display method - auto-detects type and renders data
-     * @param {Object|Array} data - Data to display
-     * @param {string|null} type - Optional type override
-     */
-    display(data, type = null) {
-        if (!this.container) {
-            console.warn('UnifiedDataViewer: Container not found');
-            return;
-        }
-
-        // Store current data for reference
-        this.currentData = data;
-        this.currentType = type;
-
-        // Auto-detect type if not provided
-        if (!type) {
-            type = this.detectType(data);
-        }
-
-        // Clear container
-        this.container.innerHTML = '';
-
-        // Display based on type
-        switch(type) {
-            case 'event':
-                this.displayEvent(data);
-                break;
-            case 'agent':
-                this.displayAgent(data);
-                break;
-            case 'tool':
-                this.displayTool(data);
-                break;
-            case 'todo':
-                this.displayTodo(data);
-                break;
-            case 'instruction':
-                this.displayInstruction(data);
-                break;
-            case 'session':
-                this.displaySession(data);
-                break;
-            case 'file_operation':
-                // Convert file tool to file operation format if needed
-                if (data.name && (data.params || data.tool_parameters)) {
-                    const convertedData = this.convertToolToFileOperation(data);
-                    this.displayFileOperation(convertedData);
-                } else {
-                    this.displayFileOperation(data);
-                }
-                break;
-            case 'hook':
-                this.displayHook(data);
-                break;
-            default:
-                this.displayGeneric(data);
-        }
-    }
-
-    /**
-     * Auto-detect data type based on object properties
-     * @param {Object} data - Data to analyze
-     * @returns {string} Detected type
-     */
-    detectType(data) {
-        if (!data || typeof data !== 'object') return 'generic';
-
-        // Event detection
-        if (data.hook_event_name || data.event_type || (data.type && data.timestamp)) {
-            return 'event';
-        }
-
-        // Agent detection  
-        if (data.agent_name || data.agentName || 
-            (data.name && (data.status === 'active' || data.status === 'completed'))) {
-            return 'agent';
-        }
-
-        // Tool detection - PRIORITY: Check if it's a tool first
-        // This includes TodoWrite tools which should always be displayed as tools, not todos
-        if (data.tool_name || data.name === 'TodoWrite' || data.name === 'Read' || 
-            data.tool_parameters || (data.params && data.icon) || 
-            (data.name && data.type === 'tool')) {
-            return 'tool';
-        }
-
-        // Todo detection - Only for standalone todo lists, not tool todos
-        if (data.todos && !data.name && !data.params) {
-            return 'todo';
-        }
-
-        // Single todo item detection
-        if (data.content && data.activeForm && data.status && !data.name && !data.params) {
-            return 'todo';
-        }
-
-        // Instruction detection
-        if (data.text && data.preview && data.type === 'user_instruction') {
-            return 'instruction';
-        }
-
-        // Session detection
-        if (data.session_id && (data.startTime || data.lastActivity)) {
-            return 'session';
-        }
-
-        // File operation detection
-        if (data.file_path && (data.operations || data.operation)) {
-            return 'file_operation';
-        }
-
-        // File tool detection - handle file tools as file operations when they have file_path
-        if ((data.name === 'Read' || data.name === 'Write' || data.name === 'Edit' || 
-             data.name === 'MultiEdit' || data.name === 'Grep' || data.name === 'Glob') &&
-            (data.params?.file_path || data.tool_parameters?.file_path)) {
-            // Convert file tool to file operation format for better display
-            return 'file_operation';
-        }
-
-        // Hook detection
-        if (data.event_type && (data.hook_name || data.subtype)) {
-            return 'hook';
-        }
-
-        return 'generic';
-    }
-
-    /**
-     * Display event data with comprehensive formatting
-     * PRIMARY: Event type, timestamp, and key details
-     * SECONDARY: Full event data in collapsible JSON
-     */
-    displayEvent(data) {
-        const eventType = this.formatEventType(data);
-        const timestamp = this.formatTimestamp(data.timestamp);
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>${eventType}</h6>
-                <span class="unified-viewer-timestamp">${timestamp}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        // PRIMARY DATA: Event-specific key details
-        html += `<div class="primary-data">`;
-        html += this.formatEventDetails(data);
-        
-        // Show important tool parameters inline if present
-        if (data.tool_name || data.data?.tool_name) {
-            const toolName = data.tool_name || data.data.tool_name;
-            html += `
-                <div class="detail-row highlight">
-                    <span class="detail-label">Tool:</span>
-                    <span class="detail-value">${this.getToolIcon(toolName)} ${toolName}</span>
-                </div>
-            `;
-            
-            // Show key parameters for specific tools
-            const params = data.tool_parameters || data.data?.tool_parameters;
-            if (params) {
-                if (params.file_path) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">File:</span>
-                            <span class="detail-value code">${params.file_path}</span>
-                        </div>
-                    `;
-                }
-                if (params.command) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Command:</span>
-                            <pre class="code-snippet">${this.escapeHtml(params.command)}</pre>
-                        </div>
-                    `;
-                }
-            }
-        }
-        html += `</div>`;
-
-        // SECONDARY DATA: Collapsible JSON viewer for full event data
-        html += this.createCollapsibleJSON(data, 'Full Event Data');
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display agent data with full details
-     * PRIMARY: Agent status, active tools, and key info
-     * SECONDARY: Full agent data in collapsible JSON
-     */
-    displayAgent(data) {
-        const agentIcon = this.getAgentIcon(data.name || data.agentName);
-        const agentName = data.name || data.agentName || 'Unknown Agent';
-        const status = this.formatStatus(data.status);
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>${agentIcon} ${agentName}</h6>
-                <span class="unified-viewer-status">${status}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        // PRIMARY DATA: Key agent information
-        html += `<div class="primary-data">`;
-        
-        // Status with visual indicator
-        html += `
-            <div class="detail-row highlight">
-                <span class="detail-label">Status:</span>
-                <span class="detail-value ${this.formatStatusClass(status)}">${status}</span>
-            </div>
-        `;
-
-        // Tools summary if present
-        if (data.tools && data.tools.length > 0) {
-            // Show active tools prominently
-            const activeTools = data.tools.filter(t => t.status === 'in_progress');
-            const completedTools = data.tools.filter(t => t.status === 'completed');
-            
-            if (activeTools.length > 0) {
-                html += `
-                    <div class="active-tools-section">
-                        <span class="section-label">🔄 Active Tools:</span>
-                        <div class="tools-grid">
-                `;
-                activeTools.forEach(tool => {
-                    html += `
-                        <div class="tool-chip active">
-                            ${this.getToolIcon(tool.name)} ${tool.name}
-                        </div>
-                    `;
-                });
-                html += `</div></div>`;
-            }
-            
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Tools Summary:</span>
-                    <span class="detail-value">
-                        ${activeTools.length} active, ${completedTools.length} completed, ${data.tools.length} total
-                    </span>
-                </div>
-            `;
-        }
-
-        // Current task if available
-        if (data.currentTask || data.description) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Current Task:</span>
-                    <span class="detail-value">${data.currentTask || data.description}</span>
-                </div>
-            `;
-        }
-        
-        html += `</div>`;
-
-        // SECONDARY DATA: Collapsible JSON viewer
-        html += this.createCollapsibleJSON(data, 'Full Agent Details');
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display tool data with parameters and results
-     * Special handling for TodoWrite to show todos prominently
-     */
-    displayTool(data) {
-        const toolName = data.name || data.tool_name || 'Unknown Tool';
-        const toolIcon = this.getToolIcon(toolName);
-        const status = this.formatStatus(data.status);
-        
-        // Special handling for TodoWrite tool
-        if (toolName === 'TodoWrite') {
-            this.displayTodoWriteTool(data);
-            return;
-        }
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>${toolIcon} ${toolName}</h6>
-                <span class="unified-viewer-status">${status}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        // PRIMARY DATA: Show important tool-specific information first
-        const params = data.params || data.tool_parameters || {};
-        
-        // Tool-specific primary data display
-        if (toolName === 'Read' || toolName === 'Edit' || toolName === 'Write') {
-            // File tools - show file path prominently
-            if (params.file_path) {
-                html += `
-                    <div class="primary-data">
-                        <div class="detail-row highlight">
-                            <span class="detail-label">📁 File:</span>
-                            <span class="detail-value code">${params.file_path}</span>
-                        </div>
-                `;
-                if (params.old_string) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Old Text:</span>
-                            <pre class="code-snippet">${this.escapeHtml(params.old_string.substring(0, 200))}${params.old_string.length > 200 ? '...' : ''}</pre>
-                        </div>
-                    `;
-                }
-                if (params.new_string) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">New Text:</span>
-                            <pre class="code-snippet">${this.escapeHtml(params.new_string.substring(0, 200))}${params.new_string.length > 200 ? '...' : ''}</pre>
-                        </div>
-                    `;
-                }
-                html += '</div>';
-            }
-        } else if (toolName === 'Bash') {
-            // Bash tool - show command prominently
-            if (params.command) {
-                html += `
-                    <div class="primary-data">
-                        <div class="detail-row highlight">
-                            <span class="detail-label">💻 Command:</span>
-                            <pre class="code-snippet">${this.escapeHtml(params.command)}</pre>
-                        </div>
-                    </div>
-                `;
-            }
-        } else if (toolName === 'Grep' || toolName === 'Glob') {
-            // Search tools - show pattern prominently
-            if (params.pattern) {
-                html += `
-                    <div class="primary-data">
-                        <div class="detail-row highlight">
-                            <span class="detail-label">🔍 Pattern:</span>
-                            <span class="detail-value code">${this.escapeHtml(params.pattern)}</span>
-                        </div>
-                `;
-                if (params.path) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Path:</span>
-                            <span class="detail-value">${params.path}</span>
-                        </div>
-                    `;
-                }
-                html += '</div>';
-            }
-        } else if (toolName === 'Task') {
-            // Task tool - show delegation info prominently
-            if (params.subagent_type) {
-                html += `
-                    <div class="primary-data">
-                        <div class="detail-row highlight">
-                            <span class="detail-label">🤖 Delegating to:</span>
-                            <span class="detail-value">${params.subagent_type} agent</span>
-                        </div>
-                `;
-                if (params.description) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Task:</span>
-                            <span class="detail-value">${params.description}</span>
-                        </div>
-                    `;
-                }
-                html += '</div>';
-            }
-        }
-
-        // Status and metadata
-        html += `
-            <div class="detail-row">
-                <span class="detail-label">Status:</span>
-                <span class="detail-value">${status}</span>
-            </div>
-        `;
-
-        if (data.callCount) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Call Count:</span>
-                    <span class="detail-value">${data.callCount}</span>
-                </div>
-            `;
-        }
-
-        // Collapsible JSON viewer for full details
-        html += this.createCollapsibleJSON(data, 'Full Tool Details');
-        
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display TodoWrite tool with todos list prominently after title
-     */
-    displayTodoWriteTool(data) {
-        const status = this.formatStatus(data.status);
-        const params = data.params || data.tool_parameters || {};
-        const todos = params.todos || [];
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>📝 TodoWrite</h6>
-                <span class="unified-viewer-status">${status}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        // PRIMARY DATA: Todo list and status summary immediately after title
-        if (todos.length > 0) {
-            const statusCounts = this.getTodoStatusCounts(todos);
-            
-            // Status summary - horizontal single line format
-            html += `
-                <div class="todo-status-line">
-                    <span class="status-inline">✅ ${statusCounts.completed} Done</span>
-                    <span class="status-inline">🔄 ${statusCounts.in_progress} Active</span>
-                    <span class="status-inline">⏳ ${statusCounts.pending} Pending</span>
-                </div>
-            `;
-
-            // Todo items list
-            html += `
-                <div class="todo-list-primary">
-            `;
-            
-            todos.forEach((todo, index) => {
-                const statusIcon = this.getCheckboxIcon(todo.status);
-                const displayText = todo.status === 'in_progress' ? 
-                    (todo.activeForm || todo.content) : todo.content;
-                const statusClass = this.formatStatusClass(todo.status);
-                
-                html += `
-                    <div class="todo-item ${todo.status}">
-                        <span class="todo-icon ${statusClass}">${statusIcon}</span>
-                        <span class="todo-text">${this.escapeHtml(displayText)}</span>
-                        ${todo.status === 'in_progress' ? '<span class="todo-badge active">ACTIVE</span>' : ''}
-                    </div>
-                `;
-            });
-            
-            html += `
-                </div>
-            `;
-        } else {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-value">No todos in list</span>
-                </div>
-            `;
-        }
-
-        // Metadata section
-        if (data.callCount && data.callCount > 1) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Updates:</span>
-                    <span class="detail-value">${data.callCount}</span>
-                </div>
-            `;
-        }
-
-        // Collapsible JSON viewer for full details
-        html += this.createCollapsibleJSON(data, 'Full Details');
-        
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display todo data with checklist formatting (for standalone todos, not TodoWrite)
-     */
-    displayTodo(data) {
-        // Handle different data structures for standalone todos
-        let todos;
-        let toolName = 'Todo List';
-        
-        if (data.todos && Array.isArray(data.todos)) {
-            todos = data.todos;
-        } else if (Array.isArray(data)) {
-            todos = data;
-        } else if (data.content && data.activeForm && data.status) {
-            todos = [data];
-        } else {
-            todos = [];
-        }
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>📋 ${toolName}</h6>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        if (todos.length > 0) {
-            // Show todos immediately
-            html += `
-                <div class="todo-list-primary">
-            `;
-            
-            todos.forEach((todo) => {
-                const statusIcon = this.getCheckboxIcon(todo.status);
-                const displayText = todo.status === 'in_progress' ? 
-                    (todo.activeForm || todo.content) : todo.content;
-                const statusClass = this.formatStatusClass(todo.status);
-                
-                html += `
-                    <div class="todo-item ${todo.status}">
-                        <span class="todo-icon ${statusClass}">${statusIcon}</span>
-                        <span class="todo-text">${this.escapeHtml(displayText)}</span>
-                        <span class="todo-status-text ${statusClass}">${todo.status.replace('_', ' ')}</span>
-                    </div>
-                `;
-            });
-            
-            html += `
-                </div>
-            `;
-        } else {
-            html += `
-                <div class="detail-section">
-                    <div class="no-todos">No todo items found</div>
-                </div>
-            `;
-        }
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display instruction data
-     * PRIMARY: Instruction text prominently displayed
-     * SECONDARY: Metadata in collapsible section
-     */
-    displayInstruction(data) {
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>💬 User Instruction</h6>
-                <span class="unified-viewer-timestamp">${this.formatTimestamp(data.timestamp)}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-        
-        // PRIMARY DATA: The instruction text itself
-        html += `
-            <div class="primary-data">
-                <div class="instruction-content">
-                    ${this.escapeHtml(data.text)}
-                </div>
-                <div class="instruction-meta">
-                    <span class="meta-item">📏 ${data.text.length} characters</span>
-                    <span class="meta-item">🕐 ${this.formatTimestamp(data.timestamp)}</span>
-                </div>
-            </div>
-        `;
-
-        // SECONDARY DATA: Full instruction object if there's more data
-        if (Object.keys(data).length > 3) {
-            html += this.createCollapsibleJSON(data, 'Full Instruction Data');
-        }
-        
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display session data
-     */
-    displaySession(data) {
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>🎯 Session: ${data.session_id || data.id}</h6>
-                <span class="unified-viewer-status">${this.formatStatus(data.status || 'active')}</span>
-            </div>
-            <div class="unified-viewer-content">
-                <div class="detail-row">
-                    <span class="detail-label">Session ID:</span>
-                    <span class="detail-value">${data.session_id || data.id}</span>
-                </div>
-                <div class="detail-row">
-                    <span class="detail-label">Start Time:</span>
-                    <span class="detail-value">${this.formatTimestamp(data.startTime || data.timestamp)}</span>
-                </div>
-        `;
-
-        if (data.working_directory) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Working Directory:</span>
-                    <span class="detail-value">${data.working_directory}</span>
-                </div>
-            `;
-        }
-
-        if (data.git_branch) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Git Branch:</span>
-                    <span class="detail-value">${data.git_branch}</span>
-                </div>
-            `;
-        }
-
-        if (data.eventCount !== undefined) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Events:</span>
-                    <span class="detail-value">${data.eventCount}</span>
-                </div>
-            `;
-        }
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display file operation data with enhanced file viewing capabilities
-     */
-    displayFileOperation(data) {
-        const fileName = data.file_path ? data.file_path.split('/').pop() : 'Unknown File';
-        const isSingleFile = this.isSingleFileOperation(data);
-        const fileIcon = this.getFileIcon(data.file_path);
-        const fileType = this.getFileType(data.file_path);
-        
-        let html = `
-            <div class="unified-viewer-header ${isSingleFile ? 'single-file-header' : ''}">
-                <h6>${fileIcon} File: ${fileName}</h6>
-                <span class="unified-viewer-count">${data.operations ? data.operations.length : 1} operation${data.operations && data.operations.length !== 1 ? 's' : ''}</span>
-                ${fileType ? `<span class="file-type-badge">${fileType}</span>` : ''}
-            </div>
-            <div class="unified-viewer-content">
-                <div class="primary-data">
-                    <div class="detail-row highlight">
-                        <span class="detail-label">📁 File Path:</span>
-                        <span class="detail-value code clickable-file-path" 
-                              onclick="window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')"
-                              title="Click to view file contents\\nKeyboard: Hover + V key or Ctrl/Cmd + Click\\nFile: ${data.file_path}"
-                              tabindex="0"
-                              role="button"
-                              aria-label="Open file ${data.file_path} in viewer"
-                              onkeypress="if(event.key==='Enter'||event.key===' '){window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')}">${data.file_path}</span>
-                    </div>
-        `;
-
-        // Enhanced file viewing for single file operations
-        if (data.file_path) {
-            const shouldShowPreview = this.shouldShowInlinePreview(data);
-            
-            html += `
-                <div class="file-actions ${isSingleFile ? 'single-file-actions' : ''}">
-                    <button class="file-action-btn view-file-btn ${isSingleFile ? 'primary-action' : ''}" 
-                            onclick="window.showFileViewerModal && window.showFileViewerModal('${data.file_path}')"
-                            title="View file contents with syntax highlighting">
-                        ${fileIcon} View File Contents
-                    </button>
-                    ${isSingleFile && this.isTextFile(data.file_path) ? `
-                        <button class="file-action-btn inline-preview-btn" 
-                                onclick="window.unifiedDataViewer && window.unifiedDataViewer.toggleInlinePreview('${data.file_path}', this)"
-                                title="Toggle inline preview">
-                            📖 Quick Preview
-                        </button>
-                    ` : ''}
-                </div>
-            `;
-            
-            // Add inline preview container for single file operations
-            if (isSingleFile && shouldShowPreview) {
-                const previewId = this.generatePreviewId(data.file_path);
-                html += `
-                    <div class="inline-preview-container" id="preview-${previewId}" style="display: none;">
-                        <div class="inline-preview-loading">Loading preview...</div>
-                    </div>
-                `;
-            }
-        }
-
-        html += `</div>`;
-
-        if (data.operations && Array.isArray(data.operations)) {
-            html += `
-                <div class="detail-section">
-                    <span class="detail-section-title">Operations (${data.operations.length}):</span>
-                    <div class="operations-list">
-                        ${data.operations.map((op, index) => `
-                            <div class="operation-item">
-                                <div class="operation-header">
-                                    <span class="operation-type">${this.getOperationIcon(op.operation)} ${op.operation}</span>
-                                    <span class="operation-timestamp">${this.formatTimestamp(op.timestamp)}</span>
-                                </div>
-                                <div class="operation-details">
-                                    <span class="operation-agent">by ${op.agent || 'Unknown'}</span>
-                                    ${op.workingDirectory ? `<span class="operation-dir">in ${op.workingDirectory}</span>` : ''}
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            `;
-        }
-
-        // Add collapsible JSON viewer for full file data
-        html += this.createCollapsibleJSON(data, 'Full File Data');
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display hook event data
-     */
-    displayHook(data) {
-        const hookType = data.event_type || data.subtype || 'unknown';
-        
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>🔗 Hook: ${hookType}</h6>
-                <span class="unified-viewer-timestamp">${this.formatTimestamp(data.timestamp)}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        html += this.formatHookDetails(data);
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    /**
-     * Display generic data with fallback formatting
-     */
-    displayGeneric(data) {
-        let html = `
-            <div class="unified-viewer-header">
-                <h6>📊 Data Details</h6>
-                ${data.timestamp ? `<span class="unified-viewer-timestamp">${this.formatTimestamp(data.timestamp)}</span>` : ''}
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        if (typeof data === 'object' && data !== null) {
-            // Display meaningful properties
-            const meaningfulProps = ['id', 'name', 'type', 'status', 'timestamp', 'text', 'content', 'message'];
-            
-            for (let prop of meaningfulProps) {
-                if (data[prop] !== undefined) {
-                    let value = data[prop];
-                    if (typeof value === 'string' && value.length > 200) {
-                        value = value.substring(0, 200) + '...';
-                    }
-                    
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">${prop}:</span>
-                            <span class="detail-value">${this.escapeHtml(String(value))}</span>
-                        </div>
-                    `;
-                }
-            }
-        } else {
-            html += `<div class="simple-value">${this.escapeHtml(String(data))}</div>`;
-        }
-
-        html += '</div>';
-        this.container.innerHTML = html;
-    }
-
-    // ==================== FORMATTING UTILITIES ====================
-
-    /**
-     * Format event type for display
-     */
-    formatEventType(event) {
-        if (event.type && event.subtype) {
-            if (event.type === event.subtype || event.subtype === 'generic') {
-                return event.type;
-            }
-            return `${event.type}.${event.subtype}`;
-        }
-        if (event.type) return event.type;
-        if (event.hook_event_name) return event.hook_event_name;
-        return 'unknown';
-    }
-
-    /**
-     * Format detailed event data based on type
-     */
-    formatEventDetails(event) {
-        const data = event.data || {};
-        
-        switch (event.type) {
-            case 'hook':
-                return this.formatHookDetails(event);
-            case 'agent':
-                return this.formatAgentEventDetails(event);
-            case 'todo':
-                return this.formatTodoEventDetails(event);
-            case 'session':
-                return this.formatSessionEventDetails(event);
-            default:
-                return this.formatGenericEventDetails(event);
-        }
-    }
-
-    /**
-     * Format hook event details
-     */
-    formatHookDetails(event) {
-        const data = event.data || {};
-        const hookType = event.subtype || event.event_type || 'unknown';
-        
-        let html = `
-            <div class="detail-row">
-                <span class="detail-label">Hook Type:</span>
-                <span class="detail-value">${hookType}</span>
-            </div>
-        `;
-
-        switch (hookType) {
-            case 'user_prompt':
-                const prompt = data.prompt_text || data.prompt_preview || '';
-                html += `
-                    <div class="detail-row">
-                        <span class="detail-label">Prompt:</span>
-                        <div class="detail-value prompt-text">${this.escapeHtml(prompt)}</div>
-                    </div>
-                `;
-                break;
-
-            case 'pre_tool':
-            case 'post_tool':
-                const toolName = data.tool_name || 'Unknown tool';
-                html += `
-                    <div class="detail-row">
-                        <span class="detail-label">Tool:</span>
-                        <span class="detail-value">${toolName}</span>
-                    </div>
-                `;
-                if (data.operation_type) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Operation:</span>
-                            <span class="detail-value">${data.operation_type}</span>
-                        </div>
-                    `;
-                }
-                if (hookType === 'post_tool' && data.duration_ms) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Duration:</span>
-                            <span class="detail-value">${data.duration_ms}ms</span>
-                        </div>
-                    `;
-                }
-                break;
-
-            case 'subagent_start':
-            case 'subagent_stop':
-                const agentType = data.agent_type || data.agent || 'Unknown';
-                html += `
-                    <div class="detail-row">
-                        <span class="detail-label">Agent:</span>
-                        <span class="detail-value">${agentType}</span>
-                    </div>
-                `;
-                if (hookType === 'subagent_start' && data.prompt) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Task:</span>
-                            <div class="detail-value">${this.escapeHtml(data.prompt)}</div>
-                        </div>
-                    `;
-                }
-                if (hookType === 'subagent_stop' && data.reason) {
-                    html += `
-                        <div class="detail-row">
-                            <span class="detail-label">Reason:</span>
-                            <span class="detail-value">${data.reason}</span>
-                        </div>
-                    `;
-                }
-                break;
-        }
-
-        return html;
-    }
-
-    /**
-     * Format agent event details
-     */
-    formatAgentEventDetails(event) {
-        const data = event.data || {};
-        let html = '';
-
-        if (data.agent_type || data.name) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Agent Type:</span>
-                    <span class="detail-value">${data.agent_type || data.name}</span>
-                </div>
-            `;
-        }
-
-        if (event.subtype) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Action:</span>
-                    <span class="detail-value">${event.subtype}</span>
-                </div>
-            `;
-        }
-
-        return html;
-    }
-
-    /**
-     * Format todo event details
-     */
-    formatTodoEventDetails(event) {
-        const data = event.data || {};
-        let html = '';
-
-        if (data.todos && Array.isArray(data.todos)) {
-            const statusCounts = this.getTodoStatusCounts(data.todos);
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Todo Items:</span>
-                    <span class="detail-value">${data.todos.length} total</span>
-                </div>
-                <div class="detail-row">
-                    <span class="detail-label">Status:</span>
-                    <span class="detail-value">${statusCounts.completed} completed, ${statusCounts.in_progress} in progress</span>
-                </div>
-            `;
-        }
-
-        return html;
-    }
-
-    /**
-     * Format session event details
-     */
-    formatSessionEventDetails(event) {
-        const data = event.data || {};
-        let html = '';
-
-        if (data.session_id) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Session ID:</span>
-                    <span class="detail-value">${data.session_id}</span>
-                </div>
-            `;
-        }
-
-        if (event.subtype) {
-            html += `
-                <div class="detail-row">
-                    <span class="detail-label">Action:</span>
-                    <span class="detail-value">${event.subtype}</span>
-                </div>
-            `;
-        }
-
-        return html;
-    }
-
-    /**
-     * Format generic event details
-     */
-    formatGenericEventDetails(event) {
-        const data = event.data || {};
-        let html = '';
-
-        // Show basic data properties
-        const basicProps = ['message', 'description', 'value', 'result'];
-        for (let prop of basicProps) {
-            if (data[prop] !== undefined) {
-                let value = data[prop];
-                if (typeof value === 'string' && value.length > 200) {
-                    value = value.substring(0, 200) + '...';
-                }
-                html += `
-                    <div class="detail-row">
-                        <span class="detail-label">${prop}:</span>
-                        <span class="detail-value">${this.escapeHtml(String(value))}</span>
-                    </div>
-                `;
-            }
-        }
-
-        return html;
-    }
-
-    /**
-     * Format event data section
-     */
-    formatEventData(event) {
-        const data = event.data;
-        if (!data || Object.keys(data).length === 0) return '';
-        
-        return `
-            <div class="detail-section">
-                <span class="detail-section-title">Event Data:</span>
-                <pre class="event-data-json">${this.escapeHtml(JSON.stringify(data, null, 2))}</pre>
-            </div>
-        `;
-    }
-
-    /**
-     * Format tool/event parameters
-     */
-    formatParameters(params, title = 'Parameters') {
-        if (!params || Object.keys(params).length === 0) {
-            return `
-                <div class="detail-section">
-                    <span class="detail-section-title">${title}:</span>
-                    <div class="no-params">No parameters</div>
-                </div>
-            `;
-        }
-
-        const paramKeys = Object.keys(params);
-        return `
-            <div class="detail-section">
-                <span class="detail-section-title">${title} (${paramKeys.length}):</span>
-                <div class="params-list">
-                    ${paramKeys.map(key => {
-                        const value = params[key];
-                        const displayValue = this.formatParameterValue(value);
-                        return `
-                            <div class="param-item">
-                                <div class="param-key">${key}:</div>
-                                <div class="param-value">${displayValue}</div>
-                            </div>
-                        `;
-                    }).join('')}
-                </div>
-            </div>
-        `;
-    }
-
-    /**
-     * Format parameter value with appropriate styling
-     */
-    formatParameterValue(value) {
-        if (typeof value === 'string') {
-            if (value.length > 500) {
-                return `<pre class="param-text-long">${this.escapeHtml(value.substring(0, 500) + '...\n\n[Content truncated - ' + value.length + ' total characters]')}</pre>`;
-            } else if (value.length > 100) {
-                return `<pre class="param-text">${this.escapeHtml(value)}</pre>`;
-            } else {
-                return `<span class="param-text-short">${this.escapeHtml(value)}</span>`;
-            }
-        } else if (typeof value === 'object' && value !== null) {
-            // Special handling for todos array - display as formatted list instead of raw JSON
-            if (Array.isArray(value) && value.length > 0 && 
-                value[0].hasOwnProperty('content') && value[0].hasOwnProperty('status')) {
-                return this.formatTodosAsParameter(value);
-            }
-            
-            try {
-                return `<pre class="param-json">${this.escapeHtml(JSON.stringify(value, null, 2))}</pre>`;
-            } catch (e) {
-                return `<span class="param-error">Error displaying object</span>`;
-            }
-        } else {
-            return `<span class="param-primitive">${this.escapeHtml(String(value))}</span>`;
-        }
-    }
-
-    /**
-     * Format todos array as a parameter value
-     */
-    formatTodosAsParameter(todos) {
-        const statusCounts = this.getTodoStatusCounts(todos);
-        
-        let html = `
-            <div class="param-todos">
-                <div class="param-todos-header">
-                    Array of todo objects (${todos.length} items)
-                </div>
-                <div class="param-todos-summary">
-                    ${statusCounts.completed} completed • ${statusCounts.in_progress} in progress • ${statusCounts.pending} pending
-                </div>
-                <div class="param-todos-list">
-        `;
-        
-        todos.forEach((todo, index) => {
-            const statusIcon = this.getCheckboxIcon(todo.status);
-            const displayText = todo.status === 'in_progress' ? 
-                (todo.activeForm || todo.content) : todo.content;
-            const statusClass = this.formatStatusClass(todo.status);
-            
-            html += `
-                <div class="param-todo-item ${todo.status}">
-                    <div class="param-todo-checkbox">
-                        <span class="param-checkbox-icon ${statusClass}">${statusIcon}</span>
-                    </div>
-                    <div class="param-todo-text">
-                        <span class="param-todo-content">${this.escapeHtml(displayText)}</span>
-                        <span class="param-todo-status-badge ${statusClass}">${todo.status.replace('_', ' ')}</span>
-                    </div>
-                </div>
-            `;
-        });
-        
-        html += `
-                </div>
-            </div>
-        `;
-        
-        return html;
-    }
-
-    // ==================== FILE OPERATION UTILITIES ====================
-
-    /**
-     * Determine if this is a single file operation
-     */
-    isSingleFileOperation(data) {
-        // Single file if no operations array or only one operation
-        if (!data.operations) return true;
-        return data.operations.length === 1;
-    }
-
-    /**
-     * Get file icon based on file extension
-     */
-    getFileIcon(filePath) {
-        if (!filePath) return '📄';
-        
-        const ext = filePath.split('.').pop()?.toLowerCase();
-        const iconMap = {
-            // Code files
-            'js': '🟨',
-            'jsx': '⚛️',
-            'ts': '🔷',
-            'tsx': '⚛️',
-            'py': '🐍',
-            'java': '☕',
-            'cpp': '⚡',
-            'c': '⚡',
-            'cs': '#️⃣',
-            'php': '🐘',
-            'rb': '💎',
-            'go': '🐹',
-            'rs': '🦀',
-            'swift': '🦉',
-            'kt': '🅺',
-            'scala': '🎯',
-            
-            // Web files
-            'html': '🌐',
-            'htm': '🌐',
-            'css': '🎨',
-            'scss': '🎨',
-            'sass': '🎨',
-            'less': '🎨',
-            'vue': '💚',
-            
-            // Config files
-            'json': '📋',
-            'xml': '📄',
-            'yaml': '⚙️',
-            'yml': '⚙️',
-            'toml': '⚙️',
-            'ini': '⚙️',
-            'conf': '⚙️',
-            'config': '⚙️',
-            
-            // Documentation
-            'md': '📝',
-            'txt': '📃',
-            'rtf': '📃',
-            'pdf': '📕',
-            'doc': '📘',
-            'docx': '📘',
-            
-            // Images
-            'jpg': '🖼️',
-            'jpeg': '🖼️',
-            'png': '🖼️',
-            'gif': '🖼️',
-            'svg': '🎨',
-            'webp': '🖼️',
-            'ico': '🖼️',
-            
-            // Archives
-            'zip': '🗜️',
-            'tar': '🗜️',
-            'gz': '🗜️',
-            'rar': '🗜️',
-            '7z': '🗜️',
-            
-            // Other
-            'sql': '🗃️',
-            'db': '🗃️',
-            'log': '📊',
-            'env': '🔐',
-            'lock': '🔒'
-        };
-        
-        return iconMap[ext] || '📄';
-    }
-
-    /**
-     * Get file type description
-     */
-    getFileType(filePath) {
-        if (!filePath) return null;
-        
-        const ext = filePath.split('.').pop()?.toLowerCase();
-        const typeMap = {
-            'js': 'JavaScript',
-            'jsx': 'React JSX',
-            'ts': 'TypeScript',
-            'tsx': 'React TSX',
-            'py': 'Python',
-            'java': 'Java',
-            'cpp': 'C++',
-            'c': 'C',
-            'cs': 'C#',
-            'php': 'PHP',
-            'rb': 'Ruby',
-            'go': 'Go',
-            'rs': 'Rust',
-            'html': 'HTML',
-            'css': 'CSS',
-            'scss': 'SCSS',
-            'json': 'JSON',
-            'xml': 'XML',
-            'yaml': 'YAML',
-            'yml': 'YAML',
-            'md': 'Markdown',
-            'txt': 'Text',
-            'sql': 'SQL',
-            'log': 'Log File'
-        };
-        
-        return typeMap[ext] || null;
-    }
-
-    /**
-     * Check if file should show inline preview
-     */
-    shouldShowInlinePreview(data) {
-        // Show preview for single file text operations
-        return this.isSingleFileOperation(data) && this.isTextFile(data.file_path);
-    }
-
-    /**
-     * Check if file is a text file suitable for preview
-     */
-    isTextFile(filePath) {
-        if (!filePath) return false;
-        
-        const ext = filePath.split('.').pop()?.toLowerCase();
-        const textExtensions = [
-            'txt', 'md', 'json', 'xml', 'yaml', 'yml', 'ini', 'conf', 'config',
-            'js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c', 'cs', 'php', 'rb',
-            'go', 'rs', 'swift', 'kt', 'scala', 'html', 'htm', 'css', 'scss', 'sass',
-            'less', 'vue', 'sql', 'log', 'env', 'gitignore', 'dockerignore'
-        ];
-        
-        return textExtensions.includes(ext);
-    }
-
-    /**
-     * Toggle inline preview for a file
-     */
-    async toggleInlinePreview(filePath, buttonElement) {
-        const containerId = `preview-${this.generatePreviewId(filePath)}`;
-        const container = document.getElementById(containerId);
-        
-        if (!container) {
-            console.warn('Preview container not found');
-            return;
-        }
-        
-        if (container.style.display === 'none') {
-            // Show preview
-            container.style.display = 'block';
-            buttonElement.innerHTML = '📖 Hide Preview';
-            await this.loadInlinePreview(filePath, container);
-        } else {
-            // Hide preview
-            container.style.display = 'none';
-            buttonElement.innerHTML = '📖 Quick Preview';
-        }
-    }
-
-    /**
-     * Load inline preview content
-     */
-    async loadInlinePreview(filePath, container) {
-        try {
-            // This would typically make an API call to get file contents
-            // For now, show a placeholder
-            container.innerHTML = `
-                <div class="inline-preview-header">
-                    <span class="preview-label">Quick Preview:</span>
-                    <span class="preview-file">${filePath}</span>
-                </div>
-                <div class="inline-preview-content">
-                    <div class="preview-note">
-                        💡 Inline preview feature ready - API integration needed
-                        <br>Click "View File Contents" for full syntax-highlighted view
-                    </div>
-                </div>
-            `;
-        } catch (error) {
-            container.innerHTML = `
-                <div class="inline-preview-error">
-                    ❌ Could not load preview: ${error.message}
-                </div>
-            `;
-        }
-    }
-
-    /**
-     * Generate a unique ID for preview containers
-     */
-    generateId() {
-        return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
-    }
-
-    /**
-     * Generate preview ID based on file path
-     */
-    generatePreviewId(filePath) {
-        return btoa(filePath).replace(/[^a-zA-Z0-9]/g, '');
-    }
-
-    // ==================== UTILITY METHODS ====================
-
-    /**
-     * Format timestamp for display
-     */
-    formatTimestamp(timestamp) {
-        if (!timestamp) return 'Unknown time';
-        
-        try {
-            const date = new Date(timestamp);
-            if (isNaN(date.getTime())) return 'Invalid date';
-            return date.toLocaleString();
-        } catch (error) {
-            return 'Invalid date';
-        }
-    }
-
-    /**
-     * Format status with appropriate styling
-     */
-    formatStatus(status) {
-        if (!status) return 'unknown';
-        
-        const statusMap = {
-            'active': '🟢 Active',
-            'completed': '✅ Completed', 
-            'in_progress': '🔄 In Progress',
-            'pending': '⏳ Pending',
-            'error': '❌ Error',
-            'failed': '❌ Failed'
-        };
-        
-        return statusMap[status] || status;
-    }
-
-    /**
-     * Get CSS class for status styling
-     */
-    formatStatusClass(status) {
-        return `status-${status}`;
-    }
-
-    /**
-     * Get icon for agent type
-     */
-    getAgentIcon(agentName) {
-        const icons = {
-            'PM': '🎯',
-            'Engineer': '🔧',
-            'Engineer Agent': '🔧',
-            'Research': '🔍',
-            'Research Agent': '🔍',
-            'QA': '✅',
-            'QA Agent': '✅',
-            'Architect': '🏗️',
-            'Architect Agent': '🏗️',
-            'Ops': '⚙️',
-            'Ops Agent': '⚙️'
-        };
-        return icons[agentName] || '🤖';
-    }
-
-    /**
-     * Get icon for tool type
-     */
-    getToolIcon(toolName) {
-        const icons = {
-            'Read': '👁️',
-            'Write': '✍️', 
-            'Edit': '✏️',
-            'MultiEdit': '📝',
-            'Bash': '💻',
-            'Grep': '🔍',
-            'Glob': '📂',
-            'LS': '📁',
-            'TodoWrite': '📝',
-            'Task': '📋',
-            'WebFetch': '🌐'
-        };
-        return icons[toolName] || '🔧';
-    }
-
-    /**
-     * Get checkbox icon for todo status
-     */
-    getCheckboxIcon(status) {
-        const icons = {
-            'pending': '⏳',
-            'in_progress': '🔄',
-            'completed': '✅'
-        };
-        return icons[status] || '❓';
-    }
-
-    /**
-     * Get icon for file operation type
-     */
-    getOperationIcon(operation) {
-        const icons = {
-            'read': '👁️',
-            'write': '✍️',
-            'edit': '✏️',
-            'delete': '🗑️',
-            'create': '📝',
-            'search': '🔍',
-            'list': '📂',
-            'copy': '📋',
-            'move': '📦',
-            'bash': '💻'
-        };
-        return icons[operation.toLowerCase()] || '📄';
-    }
-
-    /**
-     * Convert tool data to file operation format for better display
-     */
-    convertToolToFileOperation(toolData) {
-        const params = toolData.params || toolData.tool_parameters || {};
-        const filePath = params.file_path || params.path || params.notebook_path;
-        
-        if (!filePath) {
-            return toolData; // Return original if no file path
-        }
-
-        // Create file operation format
-        const operation = {
-            operation: toolData.name.toLowerCase(),
-            timestamp: toolData.timestamp || new Date().toISOString(),
-            agent: 'Activity Tool',
-            sessionId: toolData.sessionId || 'unknown',
-            details: {
-                parameters: params,
-                tool_name: toolData.name,
-                status: toolData.status || 'completed'
-            }
-        };
-
-        return {
-            file_path: filePath,
-            operations: [operation],
-            lastOperation: operation.timestamp,
-            // Preserve original tool data for reference
-            originalTool: toolData
-        };
-    }
-
-    /**
-     * Get todo status counts
-     */
-    getTodoStatusCounts(todos) {
-        const counts = { completed: 0, in_progress: 0, pending: 0 };
-        
-        todos.forEach(todo => {
-            if (counts.hasOwnProperty(todo.status)) {
-                counts[todo.status]++;
-            }
-        });
-        
-        return counts;
-    }
-
-    /**
-     * Escape HTML for safe display
-     */
-    escapeHtml(text) {
-        if (typeof text !== 'string') return '';
-        
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    /**
-     * Toggle JSON section visibility and update global state
-     * WHY: Maintains sticky state across all JSON sections for consistent behavior
-     * @param {string} sectionId - ID of the specific section being toggled
-     * @param {HTMLElement} button - The button element that was clicked
-     */
-    toggleJsonSection(sectionId, button) {
-        // Toggle the global state
-        this.globalJsonExpanded = !this.globalJsonExpanded;
-        
-        // Persist the preference to localStorage
-        localStorage.setItem('dashboard-json-expanded', this.globalJsonExpanded.toString());
-        
-        // Update ALL JSON sections on the page
-        this.updateAllJsonSections();
-        
-        // Dispatch event to notify other components (like module-viewer) of the change
-        document.dispatchEvent(new CustomEvent('jsonToggleChanged', {
-            detail: { expanded: this.globalJsonExpanded }
-        }));
-    }
-    
-    /**
-     * Toggle Full Event Data section visibility and update state
-     * WHY: Maintains separate sticky state for Full Event Data sections
-     * @param {string} sectionId - ID of the specific section being toggled
-     * @param {HTMLElement} button - The button element that was clicked
-     */
-    toggleFullEventSection(sectionId, button) {
-        // Toggle the full event data state
-        this.fullEventDataExpanded = !this.fullEventDataExpanded;
-        
-        // Persist the preference to localStorage
-        localStorage.setItem('dashboard-full-event-expanded', this.fullEventDataExpanded.toString());
-        
-        // Update ALL Full Event sections on the page
-        this.updateAllFullEventSections();
-        
-        // Dispatch event to notify other components of the change
-        document.dispatchEvent(new CustomEvent('fullEventToggleChanged', {
-            detail: { expanded: this.fullEventDataExpanded }
-        }));
-    }
-    
-    /**
-     * Update all JSON sections on the page to match global state
-     * WHY: Ensures all "Structured Data" sections maintain consistent visibility
-     */
-    updateAllJsonSections() {
-        // Find all unified JSON sections (NOT full event sections)
-        const allJsonContents = document.querySelectorAll('.unified-json-content');
-        const allJsonButtons = document.querySelectorAll('.unified-json-toggle');
-        
-        // Update each JSON section
-        allJsonContents.forEach(content => {
-            if (this.globalJsonExpanded) {
-                content.style.display = 'block';
-            } else {
-                content.style.display = 'none';
-            }
-        });
-        
-        // Update all button states
-        allJsonButtons.forEach(button => {
-            const title = button.textContent.substring(2); // Remove arrow
-            if (this.globalJsonExpanded) {
-                button.innerHTML = '▼ ' + title;
-                button.classList.add('expanded');
-            } else {
-                button.innerHTML = '▶ ' + title;
-                button.classList.remove('expanded');
-            }
-        });
-    }
-    
-    /**
-     * Update all Full Event Data sections on the page to match state
-     * WHY: Ensures all "Full Event Data" sections maintain consistent visibility
-     */
-    updateAllFullEventSections() {
-        // Find all full event sections
-        const allFullEventContents = document.querySelectorAll('.full-event-content');
-        const allFullEventButtons = document.querySelectorAll('.full-event-toggle');
-        
-        // Update each full event section
-        allFullEventContents.forEach(content => {
-            if (this.fullEventDataExpanded) {
-                content.style.display = 'block';
-            } else {
-                content.style.display = 'none';
-            }
-        });
-        
-        // Update all button states
-        allFullEventButtons.forEach(button => {
-            const title = button.textContent.substring(2); // Remove arrow
-            if (this.fullEventDataExpanded) {
-                button.innerHTML = '▼ ' + title;
-                button.classList.add('expanded');
-            } else {
-                button.innerHTML = '▶ ' + title;
-                button.classList.remove('expanded');
-            }
-        });
-    }
-
-    /**
-     * Create a collapsible JSON viewer for secondary details
-     * Provides a clean way to show full data without cluttering the main view
-     */
-    createCollapsibleJSON(data, title = 'Full Details') {
-        // Generate unique ID for this collapsible section
-        const sectionId = `json-details-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        
-        // Filter out sensitive or overly verbose properties
-        const cleanData = this.cleanDataForDisplay(data);
-        
-        // Determine which state to use based on title
-        // "Full Event Data" and similar titles use the fullEventDataExpanded state
-        // Other titles use the global JSON state (for backward compatibility)
-        const isFullEventData = title.includes('Full Event') || title.includes('Full Details') || 
-                               title.includes('Full Agent') || title.includes('Full Tool');
-        const isExpanded = isFullEventData ? this.fullEventDataExpanded : this.globalJsonExpanded;
-        const display = isExpanded ? 'block' : 'none';
-        const arrow = isExpanded ? '▼' : '▶';
-        const expandedClass = isExpanded ? 'expanded' : '';
-        
-        // Use different toggle function based on section type
-        const toggleFunction = isFullEventData ? 'toggleFullEventSection' : 'toggleJsonSection';
-        
-        return `
-            <div class="collapsible-json-section">
-                <button class="collapsible-json-toggle ${isFullEventData ? 'full-event-toggle' : 'unified-json-toggle'} ${expandedClass}" 
-                        data-section-id="${sectionId}"
-                        data-is-full-event="${isFullEventData}"
-                        onclick="window.unifiedDataViewer.${toggleFunction}('${sectionId}', this)">
-                    ${arrow} ${title}
-                </button>
-                <div id="${sectionId}" class="collapsible-json-content ${isFullEventData ? 'full-event-content' : 'unified-json-content'}" style="display: ${display};">
-                    <pre class="json-viewer">${this.escapeHtml(JSON.stringify(cleanData, null, 2))}</pre>
-                </div>
-            </div>
-        `;
-    }
-
-    /**
-     * Clean data for display in JSON viewer
-     * Removes circular references and limits string lengths
-     */
-    cleanDataForDisplay(data) {
-        const seen = new WeakSet();
-        
-        return JSON.parse(JSON.stringify(data, (key, value) => {
-            // Handle circular references
-            if (typeof value === 'object' && value !== null) {
-                if (seen.has(value)) {
-                    return '[Circular Reference]';
-                }
-                seen.add(value);
-            }
-            
-            // Truncate very long strings
-            if (typeof value === 'string' && value.length > 1000) {
-                return value.substring(0, 1000) + '... [truncated]';
-            }
-            
-            // Handle functions
-            if (typeof value === 'function') {
-                return '[Function]';
-            }
-            
-            return value;
-        }));
-    }
-
-    // ==================== PUBLIC API METHODS ====================
-
-    /**
-     * Clear the viewer
-     */
-    clear() {
-        if (this.container) {
-            this.container.innerHTML = '';
-        }
-        this.currentData = null;
-        this.currentType = null;
-    }
-
-    /**
-     * Get current displayed data
-     */
-    getCurrentData() {
-        return this.currentData;
-    }
-
-    /**
-     * Get current data type
-     */
-    getCurrentType() {
-        return this.currentType;
-    }
-
-    /**
-     * Check if viewer has data
-     */
-    hasData() {
-        return this.currentData !== null;
-    }
-}
-
-// Export for module use
-export { UnifiedDataViewer };
-export default UnifiedDataViewer;
-
-// Make globally available for non-module usage
-window.UnifiedDataViewer = UnifiedDataViewer;
-
-// Create a global instance immediately for inline onclick handlers
-// This ensures the instance is available when HTML is rendered dynamically
-if (typeof window !== 'undefined') {
-    // Always create/update the global instance
-    window.unifiedDataViewer = new UnifiedDataViewer();
-    
-    // Also expose the methods directly on window as a fallback
-    window.toggleFullEventSection = function(sectionId, button) {
-        if (window.unifiedDataViewer) {
-            window.unifiedDataViewer.toggleFullEventSection(sectionId, button);
-        }
-    };
-    
-    window.toggleJsonSection = function(sectionId, button) {
-        if (window.unifiedDataViewer) {
-            window.unifiedDataViewer.toggleJsonSection(sectionId, button);
-        }
-    };
-}
-
-// Create a global instance for inline preview functionality
-if (typeof window !== 'undefined') {
-    window.addEventListener('DOMContentLoaded', function() {
-        // Create global instance if one doesn't exist
-        if (!window.unifiedDataViewer) {
-            window.unifiedDataViewer = new UnifiedDataViewer();
-        }
-        
-        // Add keyboard shortcuts for file operations
-        document.addEventListener('keydown', function(e) {
-            // Ctrl/Cmd + Click on file paths to open file viewer
-            if ((e.ctrlKey || e.metaKey) && e.target.classList.contains('clickable-file-path')) {
-                e.preventDefault();
-                const filePath = e.target.textContent.trim();
-                if (window.showFileViewerModal) {
-                    window.showFileViewerModal(filePath);
-                }
-            }
-            
-            // 'V' key to open file viewer when hovering over clickable file paths
-            if (e.key.toLowerCase() === 'v' && document.querySelector('.clickable-file-path:hover')) {
-                const hoveredPath = document.querySelector('.clickable-file-path:hover');
-                if (hoveredPath && window.showFileViewerModal) {
-                    e.preventDefault();
-                    const filePath = hoveredPath.textContent.trim();
-                    window.showFileViewerModal(filePath);
-                }
-            }
-        });
-    });
-}