claude-mpm 4.1.22__py3-none-any.whl → 4.1.23__py3-none-any.whl

claude_mpm/dashboard/static/js/components/activity-tree.js

@@ -24,6 +24,24 @@ class ActivityTree {
         this.expandedAgents = new Set();
         this.expandedTools = new Set();
         this.selectedItem = null;
+        
+        // Add debounce for renderTree to prevent excessive DOM rebuilds
+        this.renderTreeDebounced = this.debounce(() => this.renderTree(), 100);
+    }
+    
+    /**
+     * Debounce helper to prevent excessive DOM updates
+     */
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
     }
 
     /**
@@ -223,7 +241,6 @@ class ActivityTree {
                         userInstructions: [],
                         tools: [],
                         toolsMap: new Map(),
-                        todoWritesMap: new Map(),
                         status: 'active',
                         currentTodoTool: null,
                         // Preserve additional session metadata
@@ -234,10 +251,16 @@ class ActivityTree {
                     this.sessions.set(sessionId, activitySession);
                 } else {
                     // Update existing session metadata without clearing accumulated data
+                    // CRITICAL: Preserve all accumulated data (tools, agents, todos, etc.)
                     const existingSession = this.sessions.get(sessionId);
                     existingSession.timestamp = new Date(sessionData.lastActivity || sessionData.startTime || existingSession.timestamp);
                     existingSession.eventCount = sessionData.eventCount;
                     existingSession.status = sessionData.status || existingSession.status;
+                    // Update metadata without losing accumulated data
+                    existingSession.working_directory = sessionData.working_directory || existingSession.working_directory;
+                    existingSession.git_branch = sessionData.git_branch || existingSession.git_branch;
+                    // DO NOT reset tools, agents, todos, userInstructions, toolsMap, etc.
+                    // These are built up from events and must be preserved!
                 }
             }
             
@@ -258,7 +281,8 @@ class ActivityTree {
             }
                 
             this.events = [...events];
-            this.renderTree();
+            // Use debounced render to prevent excessive DOM rebuilds
+            this.renderTreeDebounced();
             
             // Debug: Log session state after processing
             console.log(`ActivityTree: Sessions after sync with socket client:`, Array.from(this.sessions.entries()));
@@ -285,7 +309,6 @@ class ActivityTree {
                         userInstructions: [],
                         tools: [],
                         toolsMap: new Map(),
-                        todoWritesMap: new Map(),
                         status: 'active',
                         currentTodoTool: null,
                         working_directory: sessionData.working_directory,
@@ -312,6 +335,7 @@ class ActivityTree {
             }
             
             this.events = [...socketState.events];
+            // Initial render can be immediate
             this.renderTree();
             
             // Debug: Log initial session state
@@ -382,7 +406,8 @@ class ActivityTree {
                 this.processUserInstruction(event, session);
                 break;
             case 'TodoWrite':
-                this.processTodoWrite(event, session);
+                // TodoWrite is now handled as a tool in 'tool_use' events
+                // Skip separate TodoWrite processing to avoid duplication
                 break;
             case 'SubagentStart':
                 this.processSubagentStart(event, session);
@@ -639,14 +664,12 @@ class ActivityTree {
                 timestamp: event.timestamp,
                 status: 'active',
                 tools: [],
-                todoWrites: [],  // Store TodoWrite instances
                 subagents: new Map(),  // Store nested subagents
                 sessionId: agentSessionId,
                 parentAgent: parentAgent,
                 isPM: agentName.toLowerCase() === 'pm' || agentName.toLowerCase().includes('project manager'),
                 instanceCount: 1,
-                toolsMap: new Map(), // Track unique tools by name
-                todoWritesMap: new Map() // Track unique TodoWrites
+                toolsMap: new Map() // Track unique tools by name
             };
             
             // If this is a subagent, nest it under the parent agent
@@ -698,6 +721,12 @@ class ActivityTree {
 
     /**
      * Process tool use event
+     * 
+     * DISPLAY RULES:
+     * 1. TodoWrite is a privileged tool that ALWAYS appears first under the agent/PM
+     * 2. Each tool appears only once per unique instance (updated in place)
+     * 3. Tools are listed in order of creation (after TodoWrite)
+     * 4. Tool instances are updated with new events as they arrive
      */
     processToolUse(event, session) {
         const toolName = event.tool_name || event.data?.tool_name || event.tool || event.data?.tool || 'unknown';
@@ -723,11 +752,13 @@ class ActivityTree {
                 targetAgent.tools = [];
             }
             
-            // Check if we already have this tool type
-            let existingTool = targetAgent.toolsMap.get(toolName);
+            // Check if we already have this tool instance
+            // Use tool name + params hash for unique identification
+            const toolKey = this.getToolKey(toolName, params);
+            let existingTool = targetAgent.toolsMap.get(toolKey);
             
             if (existingTool) {
-                // Update existing tool instance
+                // UPDATE RULE: Update existing tool instance in place
                 existingTool.params = params;
                 existingTool.timestamp = event.timestamp;
                 existingTool.status = 'in_progress';
@@ -737,7 +768,7 @@ class ActivityTree {
                 // Update current tool for collapsed display
                 targetAgent.currentTool = existingTool;
             } else {
-                // Create new tool instance
+                // CREATE RULE: Create new tool instance
                 const tool = {
                     id: `tool-${targetAgent.id}-${toolName}-${Date.now()}`,
                     name: toolName,
@@ -747,7 +778,8 @@ class ActivityTree {
                     status: 'in_progress',
                     params: params,
                     eventId: event.id,
-                    callCount: 1
+                    callCount: 1,
+                    createdAt: event.timestamp  // Track creation order
                 };
                 
                 // Special handling for Task tool (subagent delegation)
@@ -756,12 +788,22 @@ class ActivityTree {
                     tool.subagentType = params.subagent_type;
                 }
                 
-                targetAgent.toolsMap.set(toolName, tool);
-                targetAgent.tools.push(tool);
+                targetAgent.toolsMap.set(toolKey, tool);
+                
+                // ORDERING RULE: TodoWrite always goes first, others in creation order
+                if (toolName === 'TodoWrite') {
+                    // Insert TodoWrite at the beginning
+                    targetAgent.tools.unshift(tool);
+                } else {
+                    // Append other tools in creation order
+                    targetAgent.tools.push(tool);
+                }
+                
                 targetAgent.currentTool = tool;
             }
         } else {
             // No agent found, attach to session (PM level)
+            // PM RULE: Same display rules apply - TodoWrite first, others in creation order
             if (!session.tools) {
                 session.tools = [];
             }
@@ -769,9 +811,11 @@ class ActivityTree {
                 session.toolsMap = new Map();
             }
             
-            let existingTool = session.toolsMap.get(toolName);
+            const toolKey = this.getToolKey(toolName, params);
+            let existingTool = session.toolsMap.get(toolKey);
             
             if (existingTool) {
+                // UPDATE RULE: Update existing tool instance in place
                 existingTool.params = params;
                 existingTool.timestamp = event.timestamp;
                 existingTool.status = 'in_progress';
@@ -788,23 +832,69 @@ class ActivityTree {
                     status: 'in_progress',
                     params: params,
                     eventId: event.id,
-                    callCount: 1
+                    callCount: 1,
+                    createdAt: event.timestamp  // Track creation order
                 };
                 
-                session.toolsMap.set(toolName, tool);
-                session.tools.push(tool);
+                session.toolsMap.set(toolKey, tool);
+                
+                // ORDERING RULE: TodoWrite always goes first for PM too
+                if (toolName === 'TodoWrite') {
+                    session.tools.unshift(tool);
+                } else {
+                    session.tools.push(tool);
+                }
+                
                 session.currentTool = tool;
             }
         }
     }
 
+    /**
+     * Generate unique key for tool instance identification
+     * Tools are unique per name + certain parameter combinations
+     */
+    getToolKey(toolName, params) {
+        // For TodoWrite, we want ONE instance per agent/PM that updates in place
+        // So we use just the tool name as the key
+        if (toolName === 'TodoWrite') {
+            return 'TodoWrite';  // Single instance per agent/PM
+        }
+        
+        // For other tools, we generally want one instance per tool type
+        // that gets updated with each call (not creating new instances)
+        let key = toolName;
+        
+        // Only add distinguishing params if we need multiple instances
+        // For example, multiple files being edited simultaneously
+        if (toolName === 'Edit' || toolName === 'Write' || toolName === 'Read') {
+            if (params.file_path) {
+                key += `-${params.file_path}`;
+            }
+        }
+        
+        // For search tools, we might want separate instances for different searches
+        if ((toolName === 'Grep' || toolName === 'Glob') && params.pattern) {
+            // Only add pattern if significantly different
+            key += `-${params.pattern.substring(0, 20)}`;
+        }
+        
+        // Most tools should have a single instance that updates
+        // This prevents the tool list from growing unbounded
+        return key;
+    }
+
     /**
      * Update tool status after completion
      */
     updateToolStatus(event, session, status) {
         const toolName = event.tool_name || event.data?.tool_name || event.tool || 'unknown';
+        const params = event.tool_parameters || event.data?.tool_parameters || event.parameters || event.data?.parameters || {};
         const agentSessionId = event.session_id || event.data?.session_id;
         
+        // Generate the same key we used to store the tool
+        const toolKey = this.getToolKey(toolName, params);
+        
         // Find the appropriate agent
         let targetAgent = session.currentActiveAgent;
         
@@ -815,7 +905,7 @@ class ActivityTree {
         }
         
         if (targetAgent && targetAgent.toolsMap) {
-            const tool = targetAgent.toolsMap.get(toolName);
+            const tool = targetAgent.toolsMap.get(toolKey);
             if (tool) {
                 tool.status = status;
                 tool.completedAt = event.timestamp;
@@ -831,7 +921,7 @@ class ActivityTree {
         
         // Check session-level tools
         if (session.toolsMap) {
-            const tool = session.toolsMap.get(toolName);
+            const tool = session.toolsMap.get(toolKey);
             if (tool) {
                 tool.status = status;
                 tool.completedAt = event.timestamp;
@@ -845,7 +935,7 @@ class ActivityTree {
             }
         }
         
-        console.log(`ActivityTree: Could not find tool to update status for ${toolName} (event ${event.id})`);
+        console.log(`ActivityTree: Could not find tool to update status for ${toolName} with key ${toolKey} (event ${event.id})`);
     }
 
     /**
@@ -925,6 +1015,14 @@ class ActivityTree {
 
     /**
      * Render session content (user instructions, todos, agents, tools)
+     * 
+     * PM DISPLAY RULES (documented inline):
+     * 1. User instructions appear first (context)
+     * 2. PM-level tools follow the same rules as agent tools:
+     *    - TodoWrite is privileged and appears first
+     *    - Other tools appear in creation order
+     *    - Each unique instance is updated in place
+     * 3. Agents appear after PM tools
      */
     renderSessionContent(session) {
         let html = '';
@@ -936,13 +1034,16 @@ class ActivityTree {
             }
         }
         
-        // Render session-level TodoWrite FIRST (if exists)
-        if (session.todoWrites && session.todoWrites.length > 0) {
-            // Show the first (and should be only) TodoWrite at session level
-            html += this.renderTodoWriteElement(session.todoWrites[0], 1);
+        // PM TOOL DISPLAY RULES:
+        // Render PM-level tools (TodoWrite first, then others in creation order)
+        // The session.tools array is already properly ordered by processToolUse
+        if (session.tools && session.tools.length > 0) {
+            for (let tool of session.tools) {
+                html += this.renderToolElement(tool, 1);
+            }
         }
         
-        // Render agents (they will have their own TodoWrite)
+        // Render agents (they will have their own TodoWrite at the top)
         const agents = Array.from(session.agents.values())
             .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
         
@@ -950,15 +1051,6 @@ class ActivityTree {
             html += this.renderAgentElement(agent, 1);
         }
         
-        // Render session-level tools LAST (excluding TodoWrite since we show it first)
-        if (session.tools && session.tools.length > 0) {
-            for (let tool of session.tools) {
-                if (tool.name !== 'TodoWrite') {
-                    html += this.renderToolElement(tool, 1);
-                }
-            }
-        }
-        
         return html;
     }
 
@@ -1052,10 +1144,9 @@ class ActivityTree {
     renderAgentElement(agent, level) {
         const statusClass = agent.status === 'active' ? 'status-active' : 'status-completed';
         const isExpanded = this.expandedAgents.has(agent.id);
-        const hasTodoWrites = agent.todoWrites && agent.todoWrites.length > 0;
         const hasTools = agent.tools && agent.tools.length > 0;
         const hasSubagents = agent.subagents && agent.subagents.size > 0;
-        const hasContent = hasTodoWrites || hasTools || hasSubagents;
+        const hasContent = hasTools || hasSubagents;
         const isSelected = this.selectedItem && this.selectedItem.type === 'agent' && this.selectedItem.data.id === agent.id;
         
         const expandIcon = hasContent ? (isExpanded ? '▼' : '▶') : '';
@@ -1096,10 +1187,18 @@ class ActivityTree {
         if (hasContent && isExpanded) {
             html += '<div class="tree-children">';
             
-            // ALWAYS render TodoWrite FIRST (single instance)
-            if (hasTodoWrites) {
-                // Only render the first (and should be only) TodoWrite instance
-                html += this.renderTodoWriteElement(agent.todoWrites[0], level + 1);
+            // DISPLAY ORDER RULES (documented inline):
+            // 1. TodoWrite is a privileged tool - ALWAYS appears first
+            // 2. Each tool appears only once per unique instance
+            // 3. Tools are displayed in order of creation (after TodoWrite)
+            // 4. Tool instances are updated in place as new events arrive
+            
+            // Render all tools in their proper order
+            // The tools array is already ordered: TodoWrite first, then others by creation
+            if (hasTools) {
+                for (let tool of agent.tools) {
+                    html += this.renderToolElement(tool, level + 1);
+                }
             }
             
             // Then render subagents (they will have their own TodoWrite at the top)
@@ -1110,16 +1209,6 @@ class ActivityTree {
                 }
             }
             
-            // Finally render other tools (excluding TodoWrite)
-            if (hasTools) {
-                for (let tool of agent.tools) {
-                    // Skip TodoWrite tools since we show them separately at the top
-                    if (tool.name !== 'TodoWrite') {
-                        html += this.renderToolElement(tool, level + 1);
-                    }
-                }
-            }
-            
             html += '</div>';
         }