claude-mpm 4.1.26__py3-none-any.whl → 5.0.9__py3-none-any.whl

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

@@ -1,12 +1,12 @@
 /**
  * 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.
  */
@@ -16,6 +16,26 @@ class UnifiedDataViewer {
         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();
+        });
     }
 
     /**
@@ -91,16 +111,16 @@ class UnifiedDataViewer {
             return 'event';
         }
 
-        // Agent detection  
-        if (data.agent_name || data.agentName || 
+        // 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) || 
+        if (data.tool_name || data.name === 'TodoWrite' || data.name === 'Read' ||
+            data.tool_parameters || (data.params && data.icon) ||
             (data.name && data.type === 'tool')) {
             return 'tool';
         }
@@ -131,7 +151,7 @@ class UnifiedDataViewer {
         }
 
         // File tool detection - handle file tools as file operations when they have file_path
-        if ((data.name === 'Read' || data.name === 'Write' || data.name === 'Edit' || 
+        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
@@ -154,7 +174,7 @@ class UnifiedDataViewer {
     displayEvent(data) {
         const eventType = this.formatEventType(data);
         const timestamp = this.formatTimestamp(data.timestamp);
-        
+
         let html = `
             <div class="unified-viewer-header">
                 <h6>${eventType}</h6>
@@ -166,7 +186,7 @@ class UnifiedDataViewer {
         // 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;
@@ -176,7 +196,7 @@ class UnifiedDataViewer {
                     <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) {
@@ -216,7 +236,7 @@ class UnifiedDataViewer {
         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>
@@ -227,7 +247,7 @@ class UnifiedDataViewer {
 
         // PRIMARY DATA: Key agent information
         html += `<div class="primary-data">`;
-        
+
         // Status with visual indicator
         html += `
             <div class="detail-row highlight">
@@ -241,7 +261,7 @@ class UnifiedDataViewer {
             // 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">
@@ -257,7 +277,7 @@ class UnifiedDataViewer {
                 });
                 html += `</div></div>`;
             }
-            
+
             html += `
                 <div class="detail-row">
                     <span class="detail-label">Tools Summary:</span>
@@ -277,7 +297,7 @@ class UnifiedDataViewer {
                 </div>
             `;
         }
-        
+
         html += `</div>`;
 
         // SECONDARY DATA: Collapsible JSON viewer
@@ -295,13 +315,13 @@ class UnifiedDataViewer {
         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>
@@ -312,7 +332,7 @@ class UnifiedDataViewer {
 
         // 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
@@ -415,7 +435,7 @@ class UnifiedDataViewer {
 
         // Collapsible JSON viewer for full details
         html += this.createCollapsibleJSON(data, 'Full Tool Details');
-        
+
         html += '</div>';
         this.container.innerHTML = html;
     }
@@ -427,7 +447,7 @@ class UnifiedDataViewer {
         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>
@@ -439,7 +459,7 @@ class UnifiedDataViewer {
         // 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">
@@ -453,13 +473,13 @@ class UnifiedDataViewer {
             html += `
                 <div class="todo-list-primary">
             `;
-            
+
             todos.forEach((todo, index) => {
                 const statusIcon = this.getCheckboxIcon(todo.status);
-                const displayText = todo.status === 'in_progress' ? 
+                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>
@@ -468,7 +488,7 @@ class UnifiedDataViewer {
                     </div>
                 `;
             });
-            
+
             html += `
                 </div>
             `;
@@ -492,7 +512,7 @@ class UnifiedDataViewer {
 
         // Collapsible JSON viewer for full details
         html += this.createCollapsibleJSON(data, 'Full Details');
-        
+
         html += '</div>';
         this.container.innerHTML = html;
     }
@@ -504,7 +524,7 @@ class UnifiedDataViewer {
         // 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)) {
@@ -514,7 +534,7 @@ class UnifiedDataViewer {
         } else {
             todos = [];
         }
-        
+
         let html = `
             <div class="unified-viewer-header">
                 <h6>📋 ${toolName}</h6>
@@ -527,13 +547,13 @@ class UnifiedDataViewer {
             html += `
                 <div class="todo-list-primary">
             `;
-            
+
             todos.forEach((todo) => {
                 const statusIcon = this.getCheckboxIcon(todo.status);
-                const displayText = todo.status === 'in_progress' ? 
+                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>
@@ -542,7 +562,7 @@ class UnifiedDataViewer {
                     </div>
                 `;
             });
-            
+
             html += `
                 </div>
             `;
@@ -571,7 +591,7 @@ class UnifiedDataViewer {
             </div>
             <div class="unified-viewer-content">
         `;
-        
+
         // PRIMARY DATA: The instruction text itself
         html += `
             <div class="primary-data">
@@ -589,7 +609,7 @@ class UnifiedDataViewer {
         if (Object.keys(data).length > 3) {
             html += this.createCollapsibleJSON(data, 'Full Instruction Data');
         }
-        
+
         html += '</div>';
         this.container.innerHTML = html;
     }
@@ -646,35 +666,64 @@ class UnifiedDataViewer {
     }
 
     /**
-     * Display file operation data with file viewing capabilities
+     * 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">
-                <h6>📄 File: ${fileName}</h6>
+            <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">${data.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>
         `;
 
-        // Add file viewing button for tracked files
+        // Enhanced file viewing for single file operations
         if (data.file_path) {
+            const shouldShowPreview = this.shouldShowInlinePreview(data);
+
             html += `
-                <div class="file-actions">
-                    <button class="file-action-btn view-file-btn" 
+                <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">
-                        👁️ View File Contents
+                        ${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>`;
@@ -713,7 +762,7 @@ class UnifiedDataViewer {
      */
     displayHook(data) {
         const hookType = data.event_type || data.subtype || 'unknown';
-        
+
         let html = `
             <div class="unified-viewer-header">
                 <h6>🔗 Hook: ${hookType}</h6>
@@ -742,14 +791,14 @@ class UnifiedDataViewer {
         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>
@@ -788,7 +837,7 @@ class UnifiedDataViewer {
      */
     formatEventDetails(event) {
         const data = event.data || {};
-        
+
         switch (event.type) {
             case 'hook':
                 return this.formatHookDetails(event);
@@ -809,7 +858,7 @@ class UnifiedDataViewer {
     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>
@@ -999,7 +1048,7 @@ class UnifiedDataViewer {
     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>
@@ -1055,11 +1104,11 @@ class UnifiedDataViewer {
             }
         } 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 && 
+            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) {
@@ -1075,7 +1124,7 @@ class UnifiedDataViewer {
      */
     formatTodosAsParameter(todos) {
         const statusCounts = this.getTodoStatusCounts(todos);
-        
+
         let html = `
             <div class="param-todos">
                 <div class="param-todos-header">
@@ -1086,13 +1135,13 @@ class UnifiedDataViewer {
                 </div>
                 <div class="param-todos-list">
         `;
-        
+
         todos.forEach((todo, index) => {
             const statusIcon = this.getCheckboxIcon(todo.status);
-            const displayText = todo.status === 'in_progress' ? 
+            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">
@@ -1105,15 +1154,234 @@ class UnifiedDataViewer {
                 </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 ====================
 
     /**
@@ -1121,7 +1389,7 @@ class UnifiedDataViewer {
      */
     formatTimestamp(timestamp) {
         if (!timestamp) return 'Unknown time';
-        
+
         try {
             const date = new Date(timestamp);
             if (isNaN(date.getTime())) return 'Invalid date';
@@ -1136,16 +1404,16 @@ class UnifiedDataViewer {
      */
     formatStatus(status) {
         if (!status) return 'unknown';
-        
+
         const statusMap = {
             'active': '🟢 Active',
-            'completed': '✅ Completed', 
+            'completed': '✅ Completed',
             'in_progress': '🔄 In Progress',
             'pending': '⏳ Pending',
             'error': '❌ Error',
             'failed': '❌ Failed'
         };
-        
+
         return statusMap[status] || status;
     }
 
@@ -1182,7 +1450,7 @@ class UnifiedDataViewer {
     getToolIcon(toolName) {
         const icons = {
             'Read': '👁️',
-            'Write': '✍️', 
+            'Write': '✍️',
             'Edit': '✏️',
             'MultiEdit': '📝',
             'Bash': '💻',
@@ -1233,7 +1501,7 @@ class UnifiedDataViewer {
     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
         }
@@ -1265,13 +1533,13 @@ class UnifiedDataViewer {
      */
     getTodoStatusCounts(todos) {
         const counts = { completed: 0, in_progress: 0, pending: 0 };
-        
+
         todos.forEach(todo => {
             if (counts.hasOwnProperty(todo.status)) {
                 counts[todo.status]++;
             }
         });
-        
+
         return counts;
     }
 
@@ -1280,12 +1548,118 @@ class UnifiedDataViewer {
      */
     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
@@ -1293,26 +1667,32 @@ class UnifiedDataViewer {
     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" onclick="
-                    const content = document.getElementById('${sectionId}');
-                    const button = this;
-                    if (content.style.display === 'none' || content.style.display === '') {
-                        content.style.display = 'block';
-                        button.classList.add('expanded');
-                        button.innerHTML = '▼ ${title}';
-                    } else {
-                        content.style.display = 'none';
-                        button.classList.remove('expanded');
-                        button.innerHTML = '▶ ${title}';
-                    }
-                ">▶ ${title}</button>
-                <div id="${sectionId}" class="collapsible-json-content" style="display: none;">
+                <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>
@@ -1325,7 +1705,7 @@ class UnifiedDataViewer {
      */
     cleanDataForDisplay(data) {
         const seen = new WeakSet();
-        
+
         return JSON.parse(JSON.stringify(data, (key, value) => {
             // Handle circular references
             if (typeof value === 'object' && value !== null) {
@@ -1334,17 +1714,17 @@ class UnifiedDataViewer {
                 }
                 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;
         }));
     }
@@ -1389,4 +1769,56 @@ export { UnifiedDataViewer };
 export default UnifiedDataViewer;
 
 // Make globally available for non-module usage
-window.UnifiedDataViewer = UnifiedDataViewer;
+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);
+                }
+            }
+        });
+    });
+}