claude-code-templates 1.10.1 → 1.12.0

package/src/analytics/data/DataCache.js

@@ -119,28 +119,12 @@ class DataCache {
       return cached.messages;
     }
     
-    // Cache miss - parse conversation
+    // Cache miss - parse conversation with tool correlation
     this.metrics.misses++;
     const content = await this.getFileContent(filepath);
+    const lines = content.trim().split('\n').filter(line => line.trim());
     
-    const messages = content.trim().split('\n')
-      .filter(line => line.trim())
-      .map(line => {
-        try {
-          const item = JSON.parse(line);
-          if (item.message && item.message.role) {
-            return {
-              role: item.message.role,
-              timestamp: new Date(item.timestamp),
-              content: item.message.content,
-              model: item.message.model || null,
-              usage: item.message.usage || null,
-            };
-          }
-        } catch {}
-        return null;
-      })
-      .filter(Boolean);
+    const messages = this.parseAndCorrelateToolMessages(lines);
     
     this.caches.parsedConversations.set(filepath, {
       messages,
@@ -150,6 +134,127 @@ class DataCache {
     return messages;
   }
 
+  /**
+   * Parse JSONL lines and correlate tool_use with tool_result
+   * @param {Array} lines - JSONL lines
+   * @returns {Array} Parsed and correlated messages
+   */
+  parseAndCorrelateToolMessages(lines) {
+    const entries = [];
+    const toolUseMap = new Map();
+    
+    // First pass: parse all entries and map tool_use entries
+    for (const line of lines) {
+      try {
+        const item = JSON.parse(line);
+        if (item.message && (item.type === 'assistant' || item.type === 'user')) {
+          entries.push(item);
+          
+          // Track tool_use entries by their ID
+          if (item.type === 'assistant' && item.message.content) {
+            const toolUseBlock = Array.isArray(item.message.content) 
+              ? item.message.content.find(c => c.type === 'tool_use')
+              : (item.message.content.type === 'tool_use' ? item.message.content : null);
+            
+            if (toolUseBlock && toolUseBlock.id) {
+              toolUseMap.set(toolUseBlock.id, item);
+              if (toolUseBlock.id === 'toolu_01D8RMQYDySWAscQCC6pfDWf') {
+                // Debug: Specific tool_use mapped for debugging
+              }
+            }
+          }
+        }
+      } catch (error) {
+        // Skip invalid JSONL lines
+      }
+    }
+    
+    // Second pass: correlate tool_result with tool_use (first process ALL tool_results)
+    for (const item of entries) {
+      if (item.type === 'user' && item.message.content) {
+        // Check if this is a tool_result entry
+        const toolResultBlock = Array.isArray(item.message.content)
+          ? item.message.content.find(c => c.type === 'tool_result')
+          : (item.message.content.type === 'tool_result' ? item.message.content : null);
+        
+        if (toolResultBlock && toolResultBlock.tool_use_id) {
+          // This is a tool_result - attach it to the corresponding tool_use
+          const toolUseEntry = toolUseMap.get(toolResultBlock.tool_use_id);
+          if (toolUseEntry) {
+            // Enhance tool result with additional metadata
+            const enhancedToolResult = {
+              ...toolResultBlock,
+              // Include additional metadata from toolUseResult if available
+              ...(item.toolUseResult && {
+                stdout: item.toolUseResult.stdout,
+                stderr: item.toolUseResult.stderr,
+                interrupted: item.toolUseResult.interrupted,
+                isImage: item.toolUseResult.isImage,
+                returnCodeInterpretation: item.toolUseResult.returnCodeInterpretation
+              })
+            };
+            
+            // Attach tool result to the tool use entry
+            if (!toolUseEntry.toolResults) {
+              toolUseEntry.toolResults = [];
+            }
+            toolUseEntry.toolResults.push(enhancedToolResult);
+            // console.log: Tool result attached successfully
+          }
+        }
+      }
+    }
+    
+    // Third pass: process messages and filter out standalone tool_result entries
+    const processedMessages = [];
+    
+    for (const item of entries) {
+      if (item.type === 'user' && item.message.content) {
+        // Check if this is a tool_result entry (skip it as we've already processed it)
+        const toolResultBlock = Array.isArray(item.message.content)
+          ? item.message.content.find(c => c.type === 'tool_result')
+          : (item.message.content.type === 'tool_result' ? item.message.content : null);
+        
+        if (toolResultBlock && toolResultBlock.tool_use_id) {
+          // Skip standalone tool_result entries - they've been attached to their tool_use
+          continue;
+        }
+      }
+      
+      // Convert to our standard format
+      if (item.toolResults) {
+        // console.log: Processing item with tool results
+      }
+      
+      // Debug specific item we're looking for
+      if (item.message && item.message.content && Array.isArray(item.message.content)) {
+        const toolUseBlock = item.message.content.find(c => c.type === 'tool_use' && c.id === 'toolu_01D8RMQYDySWAscQCC6pfDWf');
+        if (toolUseBlock) {
+          // Debug: Processing tool_use item
+        }
+      }
+      const parsed = {
+        id: item.message.id || item.uuid || null,
+        role: item.message.role || (item.type === 'assistant' ? 'assistant' : 'user'),
+        timestamp: new Date(item.timestamp),
+        content: item.message.content,
+        model: item.message.model || null,
+        usage: item.message.usage || null,
+        toolResults: item.toolResults || null, // Include attached tool results (populated during correlation)
+        isCompactSummary: item.isCompactSummary || false, // Preserve compact summary flag
+        uuid: item.uuid || null, // Include UUID for message identification
+        type: item.type || null // Include type field
+      };
+      
+      // Debug log for our specific tool_use
+      // Debug: Final message processing completed
+      
+      processedMessages.push(parsed);
+    }
+    
+    return processedMessages;
+  }
+
   /**
    * Get file stats with caching
    * @param {string} filepath - Path to file

package/src/analytics/notifications/NotificationManager.js

@@ -104,6 +104,43 @@ class NotificationManager {
     console.log(chalk.green(`📊 Data refreshed (source: ${source})`));
   }
 
+  /**
+   * Send new message notification for real-time updates
+   * @param {string} conversationId - Conversation ID
+   * @param {Object} message - New message object
+   * @param {Object} metadata - Additional metadata
+   */
+  notifyNewMessage(conversationId, message, metadata = {}) {
+    const notification = {
+      type: 'new_message',
+      conversationId,
+      message,
+      metadata,
+      timestamp: new Date().toISOString(),
+      id: this.generateNotificationId()
+    };
+
+    // Don't throttle new message notifications - they should be immediate
+    this.addToHistory(notification);
+
+    // Send via WebSocket to conversation_updates channel
+    if (this.webSocketServer) {
+      this.webSocketServer.broadcast({
+        type: 'new_message',
+        data: {
+          conversationId,
+          message,
+          metadata
+        }
+      }, 'conversation_updates');
+    }
+
+    // Send to local subscribers
+    this.notifySubscribers('new_message', notification);
+
+    console.log(chalk.blue(`📨 New message notification sent for conversation ${conversationId}`));
+  }
+
   /**
    * Send system status notification
    * @param {Object} status - System status

package/src/analytics/notifications/WebSocketServer.js

@@ -281,7 +281,7 @@ class WebSocketServer {
     });
 
     if (sentCount > 0) {
-      console.log(chalk.green(`📢 Broadcasted ${message.type} to ${sentCount} clients${channel ? ` on channel ${channel}` : ''}`));
+      //console.log(chalk.green(`📢 Broadcasted ${message.type} to ${sentCount} clients${channel ? ` on channel ${channel}` : ''}`));
     }
 
     // Queue message if no clients connected

package/src/analytics-web/FRONT_ARCHITECTURE.md

@@ -0,0 +1,46 @@
+# Analytics Web Architecture
+
+## Current Architecture (Active)
+
+### Main Components:
+- **App.js** - Main application orchestrator with sidebar navigation
+- **Sidebar.js** - Navigation sidebar component
+- **DashboardPage.js** - Dashboard page with metrics and charts
+- **AgentsPage.js** - Agents/conversations page
+
+### Services:
+- **WebSocketService.js** - Real-time communication
+- **DataService.js** - API data fetching and caching
+- **StateService.js** - Application state management
+
+### Layout Structure:
+```
+App.js
+├── Sidebar.js (navigation)
+└── Page Components
+    ├── DashboardPage.js
+    └── AgentsPage.js
+```
+
+## Deprecated Architecture (Removed)
+
+### Deprecated Files:
+- **main.js** → `main.js.deprecated` - Old initialization system
+- **Dashboard.js** → `Dashboard.js.deprecated` - Old monolithic dashboard
+
+### Reason for Deprecation:
+The old architecture used a single Dashboard.js component without navigation, while the new architecture uses App.js with proper routing and a sidebar navigation system.
+
+## WebSocket Integration
+
+The WebSocket system is fully functional and provides real-time updates for:
+- Conversation state changes
+- Data refresh events
+- System status updates
+
+## Loading State Fix
+
+Fixed issue where loading states weren't clearing properly by:
+1. Reordering DOM rendering before setting loading states
+2. Adding proper error handling and fallback mechanisms
+3. Ensuring `setLoading(false)` is called in finally blocks

package/src/analytics-web/assets/js/{main.js → main.js.deprecated}

@@ -39,8 +39,11 @@ class AnalyticsDashboard {
   async initializeServices() {
     console.log('🔧 Initializing services...');
     
-    // Initialize DataService
-    this.services.data = new DataService();
+    // Initialize WebSocketService
+    this.services.webSocket = new WebSocketService();
+    
+    // Initialize DataService with WebSocket integration
+    this.services.data = new DataService(this.services.webSocket);
     
     // Initialize StateService
     this.services.state = new StateService();
@@ -48,7 +51,33 @@ class AnalyticsDashboard {
     // Initialize Charts service (placeholder)
     this.services.chart = new Charts(null, this.services.data, this.services.state);
     
-    // Start periodic data refresh
+    // Setup DataService -> StateService integration for real-time updates
+    this.services.data.addEventListener((type, data) => {
+      switch (type) {
+        case 'new_message':
+          // Route new message events to StateService which will notify AgentsPage
+          this.services.state.notifyListeners('new_message', data);
+          break;
+        case 'conversation_state_change':
+          // Route state changes to StateService
+          this.services.state.notifyListeners('conversation_state_change', data);
+          break;
+        case 'data_refresh':
+          // Route data refresh events to StateService
+          this.services.state.notifyListeners('data_refresh', data);
+          break;
+      }
+    });
+    
+    // Connect WebSocket (will fallback to polling if connection fails)
+    try {
+      await this.services.webSocket.connect();
+      console.log('✅ WebSocket connected successfully');
+    } catch (error) {
+      console.log('⚠️ WebSocket connection failed, falling back to polling');
+    }
+    
+    // Start periodic data refresh (will adjust based on WebSocket availability)
     this.services.data.startPeriodicRefresh();
     
     console.log('✅ Services initialized');