claude-mpm 4.2.7__py3-none-any.whl → 4.2.11__py3-none-any.whl

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

@@ -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();
+        });
     }
 
     /**
@@ -1533,6 +1553,112 @@ class UnifiedDataViewer {
         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
@@ -1545,22 +1671,28 @@ class UnifiedDataViewer {
         // 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>
@@ -1639,6 +1771,26 @@ 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() {

claude_mpm/dashboard/static/js/dashboard.js

@@ -1073,35 +1073,7 @@ window.switchTab = function(tabName) {
     }
 };
 
-// File Viewer Modal Functions - REMOVED DUPLICATE (keeping the one at line 1553)
-window.showFileViewerModal = function(filePath, workingDir) {
-    // Use the dashboard's current working directory if not provided
-    if (!workingDir && window.dashboard && window.dashboard.currentWorkingDir) {
-        workingDir = window.dashboard.currentWorkingDir;
-    }
-
-    // Create modal if it doesn't exist
-    let modal = document.getElementById('file-viewer-modal');
-    if (!modal) {
-        modal = createFileViewerModal();
-        document.body.appendChild(modal);
-    }
-
-    // Update modal content
-    updateFileViewerModal(modal, filePath, workingDir);
-
-    // Show the modal as flex container
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden'; // Prevent background scrolling
-};
-
-window.hideFileViewerModal = function() {
-    const modal = document.getElementById('file-viewer-modal');
-    if (modal) {
-        modal.style.display = 'none';
-        document.body.style.overflow = ''; // Restore background scrolling
-    }
-};
+// File Viewer Modal Functions - Removed broken duplicate (using the one at line 1505)
 
 window.copyFileContent = function() {
     const modal = document.getElementById('file-viewer-modal');
@@ -1116,11 +1088,13 @@ window.copyFileContent = function() {
         navigator.clipboard.writeText(text).then(() => {
             // Show brief feedback
             const button = modal.querySelector('.file-content-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
+            if (button) {
+                const originalText = button.textContent;
+                button.textContent = '✅ Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }
         }).catch(err => {
             console.error('Failed to copy text:', err);
         });
@@ -1134,11 +1108,13 @@ window.copyFileContent = function() {
         document.body.removeChild(textarea);
 
         const button = modal.querySelector('.file-content-copy');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        setTimeout(() => {
-            button.textContent = originalText;
-        }, 2000);
+        if (button) {
+            const originalText = button.textContent;
+            button.textContent = '✅ Copied!';
+            setTimeout(() => {
+                button.textContent = originalText;
+            }, 2000);
+        }
     }
 };
 
@@ -1214,13 +1190,27 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     const filePathElement = modal.querySelector('.file-viewer-file-path');
     const fileSizeElement = modal.querySelector('.file-viewer-file-size');
 
-    filePathElement.textContent = filePath;
-    fileSizeElement.textContent = '';
+    if (filePathElement) {
+        filePathElement.textContent = filePath;
+    }
+    if (fileSizeElement) {
+        fileSizeElement.textContent = '';
+    }
 
     // Show loading state
-    modal.querySelector('.file-viewer-loading').style.display = 'flex';
-    modal.querySelector('.file-viewer-error').style.display = 'none';
-    modal.querySelector('.file-viewer-content-area').style.display = 'none';
+    const loadingElement = modal.querySelector('.file-viewer-loading');
+    const errorElement = modal.querySelector('.file-viewer-error');
+    const contentArea = modal.querySelector('.file-viewer-content-area');
+    
+    if (loadingElement) {
+        loadingElement.style.display = 'flex';
+    }
+    if (errorElement) {
+        errorElement.style.display = 'none';
+    }
+    if (contentArea) {
+        contentArea.style.display = 'none';
+    }
 
     try {
         // Get the Socket.IO client
@@ -1264,7 +1254,10 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
         // File content received successfully
 
         // Hide loading
-        modal.querySelector('.file-viewer-loading').style.display = 'none';
+        const loadingEl = modal.querySelector('.file-viewer-loading');
+        if (loadingEl) {
+            loadingEl.style.display = 'none';
+        }
 
         // Show successful content
         displayFileContent(modal, result);
@@ -1272,7 +1265,10 @@ async function updateFileViewerModal(modal, filePath, workingDir) {
     } catch (error) {
         console.error('❌ Failed to fetch file content:', error);
 
-        modal.querySelector('.file-viewer-loading').style.display = 'none';
+        const loadingEl2 = modal.querySelector('.file-viewer-loading');
+        if (loadingEl2) {
+            loadingEl2.style.display = 'none';
+        }
 
         // Create detailed error message
         let errorMessage = error.message || 'Unknown error occurred';
@@ -1373,21 +1369,25 @@ function displayFileError(modal, result) {
 
     let errorMessage = result.error || 'Unknown error occurred';
 
-    messageElement.innerHTML = `
-        <div class="error-main">${errorMessage}</div>
-        ${result.file_path ? `<div class="error-file">File: ${result.file_path}</div>` : ''}
-        ${result.working_dir ? `<div class="error-dir">Working directory: ${result.working_dir}</div>` : ''}
-    `;
-
-    if (result.suggestions && result.suggestions.length > 0) {
-        suggestionsElement.innerHTML = `
-            <h4>Suggestions:</h4>
-            <ul>
-                ${result.suggestions.map(s => `<li>${s}</li>`).join('')}
-            </ul>
+    if (messageElement) {
+        messageElement.innerHTML = `
+            <div class="error-main">${errorMessage}</div>
+            ${result.file_path ? `<div class="error-file">File: ${result.file_path}</div>` : ''}
+            ${result.working_dir ? `<div class="error-dir">Working directory: ${result.working_dir}</div>` : ''}
         `;
-    } else {
-        suggestionsElement.innerHTML = '';
+    }
+
+    if (suggestionsElement) {
+        if (result.suggestions && result.suggestions.length > 0) {
+            suggestionsElement.innerHTML = `
+                <h4>Suggestions:</h4>
+                <ul>
+                    ${result.suggestions.map(s => `<li>${s}</li>`).join('')}
+                </ul>
+            `;
+        } else {
+            suggestionsElement.innerHTML = '';
+        }
     }
 
     console.log('📋 Displaying file viewer error:', {
@@ -1396,7 +1396,9 @@ function displayFileError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 function highlightCode(code, extension) {
@@ -1502,7 +1504,7 @@ function formatFileSize(bytes) {
 }
 
 // File Viewer Modal Functions
-window.showFileViewerModal = function(filePath) {
+window.showFileViewerModal = async function(filePath) {
     // Use the dashboard's current working directory
     let workingDir = '';
     if (window.dashboard && window.dashboard.currentWorkingDir) {
@@ -1514,10 +1516,15 @@ window.showFileViewerModal = function(filePath) {
     if (!modal) {
         modal = createFileViewerModal();
         document.body.appendChild(modal);
+
+        // Small delay to ensure DOM is fully updated
+        await new Promise(resolve => setTimeout(resolve, 10));
     }
 
     // Update modal content
-    updateFileViewerModal(modal, filePath, workingDir);
+    updateFileViewerModal(modal, filePath, workingDir).catch(error => {
+        console.error('Error updating file viewer modal:', error);
+    });
 
     // Show the modal as flex container
     modal.style.display = 'flex';
@@ -1545,11 +1552,13 @@ window.copyFileContent = function() {
         navigator.clipboard.writeText(text).then(() => {
             // Show brief feedback
             const button = modal.querySelector('.file-content-copy');
-            const originalText = button.textContent;
-            button.textContent = '✅ Copied!';
-            setTimeout(() => {
-                button.textContent = originalText;
-            }, 2000);
+            if (button) {
+                const originalText = button.textContent;
+                button.textContent = '✅ Copied!';
+                setTimeout(() => {
+                    button.textContent = originalText;
+                }, 2000);
+            }
         }).catch(err => {
             console.error('Failed to copy text:', err);
         });
@@ -1563,11 +1572,13 @@ window.copyFileContent = function() {
         document.body.removeChild(textarea);
 
         const button = modal.querySelector('.file-content-copy');
-        const originalText = button.textContent;
-        button.textContent = '✅ Copied!';
-        setTimeout(() => {
-            button.textContent = originalText;
-        }, 2000);
+        if (button) {
+            const originalText = button.textContent;
+            button.textContent = '✅ Copied!';
+            setTimeout(() => {
+                button.textContent = originalText;
+            }, 2000);
+        }
     }
 };
 
@@ -1592,25 +1603,29 @@ function displayFileContentError(modal, result) {
         errorMessage = `⚠️ ${errorMessage}`;
     }
 
-    messageElement.textContent = errorMessage;
+    if (messageElement) {
+        messageElement.textContent = errorMessage;
+    }
 
     // Add suggestions if available
-    if (result.suggestions && result.suggestions.length > 0) {
-        suggestionsElement.innerHTML = `
-            <h4>Suggestions:</h4>
-            <ul>
-                ${result.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
-            </ul>
-        `;
-    } else {
-        suggestionsElement.innerHTML = `
-            <h4>Try:</h4>
-            <ul>
-                <li>Check if the file exists and is readable</li>
-                <li>Verify file permissions</li>
-                <li>Ensure the monitoring server has access to this file</li>
-            </ul>
-        `;
+    if (suggestionsElement) {
+        if (result.suggestions && result.suggestions.length > 0) {
+            suggestionsElement.innerHTML = `
+                <h4>Suggestions:</h4>
+                <ul>
+                    ${result.suggestions.map(suggestion => `<li>${suggestion}</li>`).join('')}
+                </ul>
+            `;
+        } else {
+            suggestionsElement.innerHTML = `
+                <h4>Try:</h4>
+                <ul>
+                    <li>Check if the file exists and is readable</li>
+                    <li>Verify file permissions</li>
+                    <li>Ensure the monitoring server has access to this file</li>
+                </ul>
+            `;
+        }
     }
 
     console.log('📋 Displaying file content error:', {
@@ -1619,7 +1634,9 @@ function displayFileContentError(modal, result) {
         suggestions: result.suggestions
     });
 
-    errorArea.style.display = 'block';
+    if (errorArea) {
+        errorArea.style.display = 'block';
+    }
 }
 
 // Search Viewer Modal Functions

claude_mpm/dashboard/static/js/socket-client.js

@@ -530,13 +530,15 @@ class SocketClient {
             this.addEvent({ type: 'agent', subtype: 'executed', timestamp: new Date().toISOString(), data });
         });
 
-        this.socket.on('hook.pre', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
-        });
-
-        this.socket.on('hook.post', (data) => {
-            this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
-        });
+        // DISABLED: Legacy hook handlers - events now come through claude_event pathway
+        // to prevent duplication. Hook events are processed by the claude_event handler above.
+        // this.socket.on('hook.pre', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'pre', timestamp: new Date().toISOString(), data });
+        // });
+
+        // this.socket.on('hook.post', (data) => {
+        //     this.addEvent({ type: 'hook', subtype: 'post', timestamp: new Date().toISOString(), data });
+        // });
 
         this.socket.on('todo.updated', (data) => {
             this.addEvent({ type: 'todo', subtype: 'updated', timestamp: new Date().toISOString(), data });

claude_mpm/dashboard/templates/index.html

@@ -388,7 +388,8 @@
                     <!-- Code Tab -->
                     <div class="tab-content" id="code-tab">
                         <div class="code-container">
-                            <div id="code-tree-container" class="code-tree-container">
+                            <div class="code-split-container">
+                                <div id="code-tree-container" class="code-tree-container">
                                 <!-- Top-left corner: Language selector -->
                                 <div class="tree-corner-controls top-left">
                                     <div class="control-group">
@@ -454,6 +455,7 @@
                                 </div>
                             </div>
                         </div>
+                        </div>
                     </div>
 
                 </div>
@@ -533,7 +535,8 @@
             loadModule('/static/dist/dashboard.js'),
             loadModule('/static/dist/components/activity-tree.js'),
             loadModule('/static/js/components/code-tree.js'),  // TEMPORARY: Direct source for debugging
-            loadModule('/static/dist/components/code-viewer.js')
+            loadModule('/static/dist/components/code-viewer.js'),
+            loadModule('/static/dist/components/file-viewer.js')  // File viewer for viewing file contents
         ]).then(() => {
             console.log('All dashboard modules loaded successfully');
             

claude_mpm/hooks/claude_hooks/hook_handler.py

@@ -3,7 +3,7 @@
 
 This handler uses a service-oriented architecture with:
 - StateManagerService: Manages state and delegation tracking
-- ConnectionManagerService: Handles SocketIO and EventBus connections
+- ConnectionManagerService: Handles SocketIO connections with HTTP fallback
 - SubagentResponseProcessor: Processes complex subagent responses
 - DuplicateEventDetector: Detects and filters duplicate events
 
@@ -73,19 +73,10 @@ DEBUG = os.environ.get("CLAUDE_MPM_HOOK_DEBUG", "true").lower() != "false"
 Conditional imports with graceful fallbacks for testing and modularity.
 
 WHY conditional imports:
-- EventBus is optional for basic hook functionality
 - Tests may not have full environment setup
 - Allows hooks to work in minimal configurations
 - Graceful degradation when dependencies unavailable
 """
-# Import EventBus availability flag for backward compatibility with tests
-try:
-    from claude_mpm.services.event_bus import EventBus
-
-    EVENTBUS_AVAILABLE = True
-except ImportError:
-    EVENTBUS_AVAILABLE = False
-    EventBus = None
 
 # Import get_connection_pool for backward compatibility with tests
 try:
@@ -241,7 +232,6 @@ class ClaudeHookHandler:
 
         # Backward compatibility properties for tests
         self.connection_pool = self.connection_manager.connection_pool
-        self.event_bus = self.connection_manager.event_bus
 
         # Expose state manager properties for backward compatibility
         self.active_delegations = self.state_manager.active_delegations