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

claude_mpm/dashboard/static/js/components/event-processor.js

@@ -1,13 +1,13 @@
 /**
  * Event Processor Module
- * 
+ *
  * Handles event processing, filtering, and rendering for different tabs in the dashboard.
  * Provides centralized event filtering and rendering logic for agents, tools, and files tabs.
- * 
+ *
  * WHY: Extracted from main dashboard to isolate complex event processing logic
  * that involves filtering, transforming, and rendering events across different views.
  * This improves maintainability and makes the event processing logic testable.
- * 
+ *
  * DESIGN DECISION: Maintains its own filtered event collections while relying on
  * eventViewer for source data. Provides separate filtering logic for each tab type
  * while sharing common filtering patterns and utilities.
@@ -16,20 +16,20 @@ class EventProcessor {
     constructor(eventViewer, agentInference) {
         this.eventViewer = eventViewer;
         this.agentInference = agentInference;
-        
+
         // Processed event collections for different tabs
         this.agentEvents = [];
         this.filteredAgentEvents = [];
         this.filteredToolEvents = [];
         this.filteredFileEvents = [];
-        
+
         // Session filtering
         this.selectedSessionId = null;
-        
+
         // Git tracking status cache
         this.fileTrackingCache = new Map(); // file_path -> {is_tracked: boolean, timestamp: number}
         this.trackingCheckTimeout = 30000; // Cache for 30 seconds
-        
+
         console.log('Event processor initialized');
     }
 
@@ -61,10 +61,10 @@ class EventProcessor {
     applyAgentsFilters(uniqueInstances) {
         const searchInput = document.getElementById('agents-search-input');
         const typeFilter = document.getElementById('agents-type-filter');
-        
+
         const searchText = searchInput ? searchInput.value.toLowerCase() : '';
         const typeValue = typeFilter ? typeFilter.value : '';
-        
+
         return uniqueInstances.filter(instance => {
             // Search filter
             if (searchText) {
@@ -73,12 +73,12 @@ class EventProcessor {
                     instance.type || '',
                     instance.isImplied ? 'implied' : 'explicit'
                 ].join(' ').toLowerCase();
-                
+
                 if (!searchableText.includes(searchText)) {
                     return false;
                 }
             }
-            
+
             // Type filter
             if (typeValue) {
                 const agentName = instance.agentName || 'unknown';
@@ -86,7 +86,7 @@ class EventProcessor {
                     return false;
                 }
             }
-            
+
             return true;
         });
     }
@@ -99,10 +99,10 @@ class EventProcessor {
     applyToolsFilters(events) {
         const searchInput = document.getElementById('tools-search-input');
         const typeFilter = document.getElementById('tools-type-filter');
-        
+
         const searchText = searchInput ? searchInput.value.toLowerCase() : '';
         const typeValue = typeFilter ? typeFilter.value : '';
-        
+
         return events.filter(event => {
             // Search filter
             if (searchText) {
@@ -112,12 +112,12 @@ class EventProcessor {
                     event.type || '',
                     event.subtype || ''
                 ].join(' ').toLowerCase();
-                
+
                 if (!searchableText.includes(searchText)) {
                     return false;
                 }
             }
-            
+
             // Type filter
             if (typeValue) {
                 const toolName = event.tool_name || '';
@@ -125,7 +125,7 @@ class EventProcessor {
                     return false;
                 }
             }
-            
+
             return true;
         });
     }
@@ -138,10 +138,10 @@ class EventProcessor {
     applyToolCallFilters(toolCallsArray) {
         const searchInput = document.getElementById('tools-search-input');
         const typeFilter = document.getElementById('tools-type-filter');
-        
+
         const searchText = searchInput ? searchInput.value.toLowerCase() : '';
         const typeValue = typeFilter ? typeFilter.value : '';
-        
+
         return toolCallsArray.filter(([key, toolCall]) => {
             // Search filter
             if (searchText) {
@@ -150,12 +150,12 @@ class EventProcessor {
                     toolCall.agent_type || '',
                     'tool_call'
                 ].join(' ').toLowerCase();
-                
+
                 if (!searchableText.includes(searchText)) {
                     return false;
                 }
             }
-            
+
             // Type filter
             if (typeValue) {
                 const toolName = toolCall.tool_name || '';
@@ -163,7 +163,7 @@ class EventProcessor {
                     return false;
                 }
             }
-            
+
             return true;
         });
     }
@@ -176,23 +176,23 @@ class EventProcessor {
     applyFilesFilters(fileOperations) {
         const searchInput = document.getElementById('files-search-input');
         const typeFilter = document.getElementById('files-type-filter');
-        
+
         const searchText = searchInput ? searchInput.value.toLowerCase() : '';
         const typeValue = typeFilter ? typeFilter.value : '';
-        
+
         return fileOperations.filter(([filePath, fileData]) => {
             // Session filter - filter operations within each file
             if (this.selectedSessionId) {
                 // Filter operations for this file by session
-                const sessionOperations = fileData.operations.filter(op => 
+                const sessionOperations = fileData.operations.filter(op =>
                     op.sessionId === this.selectedSessionId
                 );
-                
+
                 // If no operations from this session, exclude the file
                 if (sessionOperations.length === 0) {
                     return false;
                 }
-                
+
                 // Update the fileData to only include session-specific operations
                 // (Note: This creates a filtered view without modifying the original)
                 fileData = {
@@ -201,7 +201,7 @@ class EventProcessor {
                     lastOperation: sessionOperations[sessionOperations.length - 1]?.timestamp || fileData.lastOperation
                 };
             }
-            
+
             // Search filter
             if (searchText) {
                 const searchableText = [
@@ -209,12 +209,12 @@ class EventProcessor {
                     ...fileData.operations.map(op => op.operation),
                     ...fileData.operations.map(op => op.agent)
                 ].join(' ').toLowerCase();
-                
+
                 if (!searchableText.includes(searchText)) {
                     return false;
                 }
             }
-            
+
             // Type filter
             if (typeValue) {
                 const operations = fileData.operations.map(op => op.operation);
@@ -222,7 +222,7 @@ class EventProcessor {
                     return false;
                 }
             }
-            
+
             return true;
         });
     }
@@ -234,7 +234,7 @@ class EventProcessor {
      */
     extractOperation(eventType) {
         if (!eventType) return 'unknown';
-        
+
         const type = eventType.toLowerCase();
         if (type.includes('read')) return 'read';
         if (type.includes('write')) return 'write';
@@ -242,7 +242,7 @@ class EventProcessor {
         if (type.includes('create')) return 'create';
         if (type.includes('delete')) return 'delete';
         if (type.includes('move') || type.includes('rename')) return 'move';
-        
+
         return 'other';
     }
 
@@ -253,7 +253,7 @@ class EventProcessor {
      */
     extractToolFromHook(eventType) {
         if (!eventType) return '';
-        
+
         // Pattern: Pre{ToolName}Use or Post{ToolName}Use
         const match = eventType.match(/^(?:Pre|Post)(.+)Use$/);
         return match ? match[1] : '';
@@ -266,13 +266,13 @@ class EventProcessor {
      */
     extractToolFromSubtype(subtype) {
         if (!subtype) return '';
-        
+
         // Handle various subtype patterns
         if (subtype.includes('_')) {
             const parts = subtype.split('_');
             return parts[0] || '';
         }
-        
+
         return subtype;
     }
 
@@ -285,7 +285,7 @@ class EventProcessor {
      */
     extractToolTarget(toolName, params, toolParameters) {
         const parameters = params || toolParameters || {};
-        
+
         switch (toolName?.toLowerCase()) {
             case 'read':
             case 'write':
@@ -318,17 +318,17 @@ class EventProcessor {
     generateAgentHTML(events) {
         // Get unique agent instances from agent inference
         const uniqueInstances = this.agentInference.getUniqueAgentInstances();
-        
+
         // Apply filtering
         const filteredInstances = this.applyAgentsFilters(uniqueInstances);
-        
+
         return filteredInstances.map((instance, index) => {
             const agentName = instance.agentName;
             const timestamp = this.formatTimestamp(instance.firstTimestamp || instance.timestamp);
             const delegationType = instance.isImplied ? 'implied' : 'explicit';
             // Fix: Use totalEventCount which is the actual property name from getUniqueAgentInstances()
             const eventCount = instance.totalEventCount || instance.eventCount || 0;
-            
+
             const onclickString = `dashboard.selectCard('agents', ${index}, 'agent_instance', '${instance.id}'); dashboard.showAgentInstanceDetails('${instance.id}');`;
 
             // Format: "[Agent Name] (delegationType, eventCount events)" with separate timestamp
@@ -352,14 +352,14 @@ class EventProcessor {
      */
     generateToolHTML(toolCalls) {
         const filteredToolCalls = this.applyToolCallFilters(toolCalls);
-        
+
         return filteredToolCalls.map(([key, toolCall], index) => {
             const toolName = toolCall.tool_name || 'Unknown';
             const rawAgent = toolCall.agent_type || 'Unknown';
             const timestamp = this.formatTimestamp(toolCall.timestamp);
             const status = toolCall.post_event ? 'completed' : 'pending';
             const statusClass = status === 'completed' ? 'status-success' : 'status-pending';
-            
+
             // Convert agent name: show "pm" for PM agent, otherwise show actual agent name
             const agentName = rawAgent.toLowerCase() === 'pm' ? 'pm' : rawAgent;
 
@@ -384,25 +384,25 @@ class EventProcessor {
      */
     generateFileHTML(fileOperations) {
         const filteredFiles = this.applyFilesFilters(fileOperations);
-        
+
         return filteredFiles.map(([filePath, fileData], index) => {
             const operations = fileData.operations.map(op => op.operation);
             const timestamp = this.formatTimestamp(fileData.lastOperation);
-            
+
             // Count operations by type for display: "read(2), write(1)"
             const operationCounts = {};
             operations.forEach(op => {
                 operationCounts[op] = (operationCounts[op] || 0) + 1;
             });
-            
+
             const operationSummary = Object.entries(operationCounts)
                 .map(([op, count]) => `${op}(${count})`)
                 .join(', ');
-            
+
             // Get unique agents that worked on this file
             const uniqueAgents = [...new Set(fileData.operations.map(op => op.agent))];
             const agentSummary = uniqueAgents.length > 1 ? `by ${uniqueAgents.length} agents` : `by ${uniqueAgents[0] || 'unknown'}`;
-            
+
             // Format: "[file path] read(2), write(1) by agent" with separate timestamp
             const fileName = this.getRelativeFilePath(filePath);
             const fileMainContent = `${fileName} ${operationSummary} ${agentSummary}`;
@@ -439,7 +439,7 @@ class EventProcessor {
      */
     getRelativeFilePath(filePath) {
         if (!filePath) return '';
-        
+
         // Simple relative path logic - can be enhanced
         const parts = filePath.split('/');
         if (parts.length > 3) {
@@ -455,7 +455,7 @@ class EventProcessor {
      */
     formatTimestamp(timestamp) {
         if (!timestamp) return '';
-        
+
         const date = new Date(timestamp);
         return date.toLocaleTimeString();
     }
@@ -511,13 +511,13 @@ class EventProcessor {
     async isFileTracked(filePath, workingDir) {
         const cacheKey = `${workingDir}:${filePath}`;
         const now = Date.now();
-        
+
         // Check cache first
         const cached = this.fileTrackingCache.get(cacheKey);
         if (cached && (now - cached.timestamp) < this.trackingCheckTimeout) {
             return cached.is_tracked;
         }
-        
+
         try {
             // Use the socketio connection to check tracking status
             const socket = window.socket;
@@ -525,39 +525,39 @@ class EventProcessor {
                 console.warn('No socket connection available for git tracking check');
                 return false;
             }
-            
+
             return new Promise((resolve) => {
                 // Set up one-time listener for response
                 const responseHandler = (data) => {
                     if (data.file_path === filePath) {
                         const isTracked = data.success && data.is_tracked;
-                        
+
                         // Cache the result
                         this.fileTrackingCache.set(cacheKey, {
                             is_tracked: isTracked,
                             timestamp: now
                         });
-                        
+
                         socket.off('file_tracked_response', responseHandler);
                         resolve(isTracked);
                     }
                 };
-                
+
                 socket.on('file_tracked_response', responseHandler);
-                
+
                 // Send request
                 socket.emit('check_file_tracked', {
                     file_path: filePath,
                     working_dir: workingDir
                 });
-                
+
                 // Timeout after 5 seconds
                 setTimeout(() => {
                     socket.off('file_tracked_response', responseHandler);
                     resolve(false); // Default to not tracked on timeout
                 }, 5000);
             });
-            
+
         } catch (error) {
             console.error('Error checking file tracking status:', error);
             return false;
@@ -573,17 +573,17 @@ class EventProcessor {
      */
     generateGitDiffIcon(filePath, timestamp, workingDir) {
         const iconId = `git-icon-${filePath.replace(/[^a-zA-Z0-9]/g, '-')}-${timestamp}`;
-        
+
         // Initially show default icon
         const iconHtml = `
-            <span id="${iconId}" class="git-diff-icon" 
+            <span id="${iconId}" class="git-diff-icon"
                   onclick="event.stopPropagation(); showGitDiffModal('${filePath}', '${timestamp}')"
                   title="View git diff for this file operation"
                   style="margin-left: 8px; cursor: pointer; font-size: 16px;">
                 📋
             </span>
         `;
-        
+
         // Asynchronously check tracking status and update icon
         this.isFileTracked(filePath, workingDir).then(isTracked => {
             const iconElement = document.getElementById(iconId);
@@ -603,7 +603,7 @@ class EventProcessor {
         }).catch(error => {
             console.error('Error updating git diff icon:', error);
         });
-        
+
         return iconHtml;
     }
 
@@ -614,15 +614,15 @@ class EventProcessor {
     showAgentInstanceDetails(instanceId) {
         const pmDelegations = this.agentInference.getPMDelegations();
         const instance = pmDelegations.get(instanceId);
-        
+
         if (!instance) {
             console.error('Agent instance not found:', instanceId);
             return;
         }
-        
+
         // Show details about this PM delegation and its events
         console.log('Showing agent instance details for:', instanceId, instance);
-        
+
         // This would integrate with the existing detail view system
         // For now, just log the details - can be expanded to show in a modal/sidebar
         const detailsHtml = `
@@ -635,8 +635,12 @@ class EventProcessor {
                 ${instance.pmCall ? `<p><strong>PM Call:</strong> Task delegation to ${instance.agentName}</p>` : '<p><strong>Note:</strong> Implied delegation (no explicit PM call found)</p>'}
             </div>
         `;
-        
+
         // You would integrate this with your existing detail display system
         console.log('Agent instance details HTML:', detailsHtml);
     }
-}
+}
+
+// ES6 Module export
+export { EventProcessor };
+export default EventProcessor;