claude-mpm 4.1.15__py3-none-any.whl → 4.1.17__py3-none-any.whl

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

@@ -3,9 +3,12 @@
  * 
  * HTML/CSS-based linear tree visualization for showing PM activity hierarchy.
  * Replaces D3.js with simpler, cleaner linear tree structure.
- * Uses simple display methods for data visualization.
+ * Uses UnifiedDataViewer for consistent data display with Tools viewer.
  */
 
+// Import UnifiedDataViewer for consistent data display
+import { UnifiedDataViewer } from './unified-data-viewer.js';
+
 class ActivityTree {
     constructor() {
         this.container = null;
@@ -205,27 +208,36 @@ class ActivityTree {
         window.socketClient.onEventUpdate((events, sessions) => {
             console.log(`ActivityTree: onEventUpdate called with ${events.length} total events and ${sessions.size} sessions`);
             
-            // Use the authoritative sessions from socket client instead of building our own
-            this.sessions.clear();
-            
-            // Convert authoritative sessions Map to our format
+            // IMPORTANT: Don't clear sessions! We need to preserve the accumulated agent data
+            // Only create new sessions if they don't exist yet
             for (const [sessionId, sessionData] of sessions.entries()) {
-                const activitySession = {
-                    id: sessionId,
-                    timestamp: new Date(sessionData.lastActivity || sessionData.startTime || new Date()),
-                    expanded: this.expandedSessions.has(sessionId) || true, // Preserve expansion state
-                    agents: new Map(),
-                    todos: [],
-                    userInstructions: [],
-                    tools: [],
-                    status: 'active',
-                    currentTodoTool: null,
-                    // Preserve additional session metadata
-                    working_directory: sessionData.working_directory,
-                    git_branch: sessionData.git_branch,
-                    eventCount: sessionData.eventCount
-                };
-                this.sessions.set(sessionId, activitySession);
+                if (!this.sessions.has(sessionId)) {
+                    // Create new session only if it doesn't exist
+                    const activitySession = {
+                        id: sessionId,
+                        timestamp: new Date(sessionData.lastActivity || sessionData.startTime || new Date()),
+                        expanded: this.expandedSessions.has(sessionId) || true, // Preserve expansion state
+                        agents: new Map(),
+                        todos: [],
+                        userInstructions: [],
+                        tools: [],
+                        toolsMap: new Map(),
+                        todoWritesMap: new Map(),
+                        status: 'active',
+                        currentTodoTool: null,
+                        // Preserve additional session metadata
+                        working_directory: sessionData.working_directory,
+                        git_branch: sessionData.git_branch,
+                        eventCount: sessionData.eventCount
+                    };
+                    this.sessions.set(sessionId, activitySession);
+                } else {
+                    // Update existing session metadata without clearing accumulated data
+                    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;
+                }
             }
             
             // Process only the new events since last update
@@ -253,25 +265,29 @@ class ActivityTree {
             console.log(`ActivityTree: Loading existing data - ${socketState.events.length} events, ${socketState.sessions.size} sessions`);
             
             // Initialize from existing socket client data
-            this.sessions.clear();
+            // Don't clear existing sessions - preserve accumulated data
             
             // Convert authoritative sessions Map to our format
             for (const [sessionId, sessionData] of socketState.sessions.entries()) {
-                const activitySession = {
-                    id: sessionId,
-                    timestamp: new Date(sessionData.lastActivity || sessionData.startTime || new Date()),
-                    expanded: this.expandedSessions.has(sessionId) || true,
-                    agents: new Map(),
-                    todos: [],
-                    userInstructions: [],
-                    tools: [],
-                    status: 'active',
-                    currentTodoTool: null,
-                    working_directory: sessionData.working_directory,
-                    git_branch: sessionData.git_branch,
-                    eventCount: sessionData.eventCount
-                };
-                this.sessions.set(sessionId, activitySession);
+                if (!this.sessions.has(sessionId)) {
+                    const activitySession = {
+                        id: sessionId,
+                        timestamp: new Date(sessionData.lastActivity || sessionData.startTime || new Date()),
+                        expanded: this.expandedSessions.has(sessionId) || true,
+                        agents: new Map(),
+                        todos: [],
+                        userInstructions: [],
+                        tools: [],
+                        toolsMap: new Map(),
+                        todoWritesMap: new Map(),
+                        status: 'active',
+                        currentTodoTool: null,
+                        working_directory: sessionData.working_directory,
+                        git_branch: sessionData.git_branch,
+                        eventCount: sessionData.eventCount
+                    };
+                    this.sessions.set(sessionId, activitySession);
+                }
             }
             
             // Process existing events to populate activity data
@@ -424,6 +440,15 @@ class ActivityTree {
             type: 'user_instruction'
         };
         
+        // NEW USER PROMPT: This is when we should clear/reset agent activity
+        // Clear previous agents for this session as we're starting fresh
+        console.log('ActivityTree: New user prompt detected, clearing previous agent activity');
+        session.agents.clear();
+        session.tools = [];
+        session.toolsMap = new Map();
+        session.todoWritesMap = new Map();
+        session.currentActiveAgent = null;
+        
         // Add to session's user instructions
         session.userInstructions.push(instruction);
         
@@ -447,77 +472,104 @@ class ActivityTree {
             return;
         }
 
-        // Update session's todos directly for overall checklist view
-        session.todos = todos.map(todo => ({
+        // Update session's current todos for latest state tracking
+        session.currentTodos = todos.map(todo => ({
             content: todo.content,
             activeForm: todo.activeForm,
             status: todo.status,
             timestamp: event.timestamp
         }));
-        
-        // Create TodoWrite tool for session-level display
-        const sessionTodoTool = {
-            id: `todo-session-${session.id}-${Date.now()}`,
-            name: 'TodoWrite',
-            type: 'tool',
-            icon: '📝',
-            timestamp: event.timestamp,
-            status: 'active',
-            params: {
-                todos: todos
-            },
-            isPrioritizedTool: true
-        };
-        
-        // Update session-level TodoWrite tool
-        session.tools = session.tools.filter(t => t.name !== 'TodoWrite');
-        session.tools.unshift(sessionTodoTool);
-        session.currentTodoTool = sessionTodoTool;
 
-        // ALSO attach TodoWrite to the active agent that triggered it
-        const agentSessionId = event.session_id || event.data?.session_id;
-        let targetAgent = null;
-        
         // Find the appropriate agent to attach this TodoWrite to
-        // First try to find by session ID
-        if (agentSessionId && session.agents.has(agentSessionId)) {
-            targetAgent = session.agents.get(agentSessionId);
-        } else {
+        let targetAgent = session.currentActiveAgent;
+        
+        if (!targetAgent) {
             // Fall back to most recent active agent
-            const activeAgents = Array.from(session.agents.values())
+            const activeAgents = this.getAllAgents(session)
                 .filter(agent => agent.status === 'active' || agent.status === 'in_progress')
                 .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
             
             if (activeAgents.length > 0) {
                 targetAgent = activeAgents[0];
             } else {
-                // If no active agents, use the most recently used agent
-                const allAgents = Array.from(session.agents.values())
-                    .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
-                if (allAgents.length > 0) {
+                // If no active agents, check if this is PM-level
+                const allAgents = this.getAllAgents(session);
+                const pmAgent = allAgents.find(a => a.isPM);
+                if (pmAgent) {
+                    targetAgent = pmAgent;
+                } else if (allAgents.length > 0) {
                     targetAgent = allAgents[0];
                 }
             }
         }
 
-        // Create agent-specific TodoWrite tool
+        // Attach or update TodoWrite for the agent
         if (targetAgent) {
-            const agentTodoTool = {
-                id: `todo-agent-${targetAgent.id}-${Date.now()}`,
-                name: 'TodoWrite',
-                type: 'tool',
-                icon: '📝',
-                timestamp: event.timestamp,
-                status: 'active',
-                params: {
-                    todos: todos
-                },
-                isPrioritizedTool: true
-            };
+            if (!targetAgent.todoWritesMap) {
+                targetAgent.todoWritesMap = new Map();
+            }
+            if (!targetAgent.todoWrites) {
+                targetAgent.todoWrites = [];
+            }
+            
+            // Check if we already have a TodoWrite instance
+            const existingTodoWrite = targetAgent.todoWritesMap.get('TodoWrite');
             
-            // Remove existing TodoWrite tool from agent and add the updated one
-            targetAgent.tools = targetAgent.tools.filter(t => t.name !== 'TodoWrite');
-            targetAgent.tools.unshift(agentTodoTool);
+            if (existingTodoWrite) {
+                // Update existing TodoWrite instance
+                existingTodoWrite.todos = todos;
+                existingTodoWrite.timestamp = event.timestamp;
+                existingTodoWrite.updateCount = (existingTodoWrite.updateCount || 1) + 1;
+            } else {
+                // Create new TodoWrite instance
+                const todoWriteInstance = {
+                    id: `todowrite-${targetAgent.id}-${Date.now()}`,
+                    name: 'TodoWrite',
+                    type: 'todowrite',
+                    icon: '📝',
+                    timestamp: event.timestamp,
+                    status: 'completed',
+                    todos: todos,
+                    params: {
+                        todos: todos
+                    },
+                    updateCount: 1
+                };
+                
+                targetAgent.todoWritesMap.set('TodoWrite', todoWriteInstance);
+                targetAgent.todoWrites = [todoWriteInstance]; // Keep single instance
+            }
+            
+            // Update agent's current todos for display when collapsed
+            targetAgent.currentTodos = todos;
+        } else {
+            // No agent found, attach to session level
+            if (!session.todoWrites) {
+                session.todoWrites = [];
+            }
+            if (!session.todoWritesMap) {
+                session.todoWritesMap = new Map();
+            }
+            
+            const existingTodoWrite = session.todoWritesMap.get('TodoWrite');
+            if (existingTodoWrite) {
+                existingTodoWrite.todos = todos;
+                existingTodoWrite.timestamp = event.timestamp;
+                existingTodoWrite.updateCount = (existingTodoWrite.updateCount || 1) + 1;
+            } else {
+                const todoWriteInstance = {
+                    id: `todowrite-session-${Date.now()}`,
+                    name: 'TodoWrite',
+                    type: 'todowrite',
+                    icon: '📝',
+                    timestamp: event.timestamp,
+                    status: 'completed',
+                    todos: todos,
+                    updateCount: 1
+                };
+                session.todoWritesMap.set('TodoWrite', todoWriteInstance);
+                session.todoWrites = [todoWriteInstance];
+            }
         }
     }
 
@@ -527,13 +579,38 @@ class ActivityTree {
     processSubagentStart(event, session) {
         const agentName = event.agent_name || event.data?.agent_name || event.data?.agent_type || event.agent_type || event.agent || 'unknown';
         const agentSessionId = event.session_id || event.data?.session_id;
+        const parentAgent = event.parent_agent || event.data?.parent_agent;
+        
+        // Use a composite key based on agent name and session to find existing instances
+        // This ensures we track unique agent instances per session
+        const agentKey = `${agentName}-${agentSessionId || 'no-session'}`;
         
-        // Use session ID as unique agent identifier, or create unique ID
-        const agentId = agentSessionId || `agent-${Date.now()}-${Math.random()}`;
+        // Check if this agent already exists in the session
+        let existingAgent = null;
+        for (let [id, ag] of session.agents.entries()) {
+            if (ag.name === agentName && (ag.sessionId === agentSessionId || (!ag.sessionId && !agentSessionId))) {
+                existingAgent = ag;
+                break;
+            }
+        }
         
-        // Check if agent already exists in this session
-        if (!session.agents.has(agentId)) {
-            const agent = {
+        // Also check in subagents of all agents
+        if (!existingAgent) {
+            const allAgents = this.getAllAgents(session);
+            existingAgent = allAgents.find(a => a.name === agentName && a.sessionId === agentSessionId);
+        }
+        
+        let agent;
+        if (existingAgent) {
+            // Update existing agent
+            agent = existingAgent;
+            agent.status = 'active';
+            agent.timestamp = event.timestamp;
+            agent.instanceCount = (agent.instanceCount || 1) + 1;
+        } else {
+            // Create new agent instance for first occurrence
+            const agentId = `agent-${agentKey}-${Date.now()}`;
+            agent = {
                 id: agentId,
                 name: agentName,
                 type: 'agent',
@@ -541,17 +618,45 @@ class ActivityTree {
                 timestamp: event.timestamp,
                 status: 'active',
                 tools: [],
+                todoWrites: [],  // Store TodoWrite instances
+                subagents: new Map(),  // Store nested subagents
                 sessionId: agentSessionId,
-                isPM: false
+                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
             };
             
-            session.agents.set(agentId, agent);
-        } else {
-            // Update existing agent status to active
-            const existingAgent = session.agents.get(agentId);
-            existingAgent.status = 'active';
-            existingAgent.timestamp = event.timestamp; // Update timestamp
+            // If this is a subagent, nest it under the parent agent
+            if (parentAgent) {
+                // Find the parent agent in the session
+                let parent = null;
+                for (let [id, ag] of session.agents.entries()) {
+                    if (ag.sessionId === parentAgent || ag.name === parentAgent) {
+                        parent = ag;
+                        break;
+                    }
+                }
+                
+                if (parent) {
+                    // Add as nested subagent
+                    if (!parent.subagents) {
+                        parent.subagents = new Map();
+                    }
+                    parent.subagents.set(agent.id, agent);
+                } else {
+                    // No parent found, add to session level
+                    session.agents.set(agent.id, agent);
+                }
+            } else {
+                // Top-level agent, add to session
+                session.agents.set(agent.id, agent);
+            }
         }
+        
+        // Track the currently active agent for tool/todo association
+        session.currentActiveAgent = agent;
     }
 
     /**
@@ -574,67 +679,149 @@ class ActivityTree {
         const toolName = event.tool_name || event.data?.tool_name || event.tool || event.data?.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;
-        
-        const tool = {
-            id: `tool-${Date.now()}-${Math.random()}`,
-            name: toolName,
-            type: 'tool',
-            icon: this.getToolIcon(toolName),
-            timestamp: event.timestamp,
-            status: 'in_progress',
-            params: params,
-            eventId: event.id
-        };
 
         // Find the appropriate agent to attach this tool to
-        let targetAgent = null;
+        let targetAgent = session.currentActiveAgent;
         
-        // First try to find by session ID
-        if (agentSessionId && session.agents.has(agentSessionId)) {
-            targetAgent = session.agents.get(agentSessionId);
+        if (!targetAgent) {
+            // Fall back to finding by session ID or most recent active
+            const allAgents = this.getAllAgents(session);
+            targetAgent = allAgents.find(a => a.sessionId === agentSessionId) ||
+                         allAgents.find(a => a.status === 'active') ||
+                         allAgents[0];
+        }
+
+        if (targetAgent) {
+            if (!targetAgent.toolsMap) {
+                targetAgent.toolsMap = new Map();
+            }
+            if (!targetAgent.tools) {
+                targetAgent.tools = [];
+            }
+            
+            // Check if we already have this tool type
+            let existingTool = targetAgent.toolsMap.get(toolName);
+            
+            if (existingTool) {
+                // Update existing tool instance
+                existingTool.params = params;
+                existingTool.timestamp = event.timestamp;
+                existingTool.status = 'in_progress';
+                existingTool.eventId = event.id;
+                existingTool.callCount = (existingTool.callCount || 1) + 1;
+                
+                // Update current tool for collapsed display
+                targetAgent.currentTool = existingTool;
+            } else {
+                // Create new tool instance
+                const tool = {
+                    id: `tool-${targetAgent.id}-${toolName}-${Date.now()}`,
+                    name: toolName,
+                    type: 'tool',
+                    icon: this.getToolIcon(toolName),
+                    timestamp: event.timestamp,
+                    status: 'in_progress',
+                    params: params,
+                    eventId: event.id,
+                    callCount: 1
+                };
+                
+                // Special handling for Task tool (subagent delegation)
+                if (toolName === 'Task' && params.subagent_type) {
+                    tool.isSubagentTask = true;
+                    tool.subagentType = params.subagent_type;
+                }
+                
+                targetAgent.toolsMap.set(toolName, tool);
+                targetAgent.tools.push(tool);
+                targetAgent.currentTool = tool;
+            }
         } else {
-            // Fall back to most recent active agent
-            const activeAgents = Array.from(session.agents.values())
-                .filter(agent => agent.status === 'active')
-                .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+            // No agent found, attach to session (PM level)
+            if (!session.tools) {
+                session.tools = [];
+            }
+            if (!session.toolsMap) {
+                session.toolsMap = new Map();
+            }
             
-            if (activeAgents.length > 0) {
-                targetAgent = activeAgents[0];
+            let existingTool = session.toolsMap.get(toolName);
+            
+            if (existingTool) {
+                existingTool.params = params;
+                existingTool.timestamp = event.timestamp;
+                existingTool.status = 'in_progress';
+                existingTool.eventId = event.id;
+                existingTool.callCount = (existingTool.callCount || 1) + 1;
+                session.currentTool = existingTool;
             } else {
-                // If no active agents, attach to session (PM level)
+                const tool = {
+                    id: `tool-session-${toolName}-${Date.now()}`,
+                    name: toolName,
+                    type: 'tool',
+                    icon: this.getToolIcon(toolName),
+                    timestamp: event.timestamp,
+                    status: 'in_progress',
+                    params: params,
+                    eventId: event.id,
+                    callCount: 1
+                };
+                
+                session.toolsMap.set(toolName, tool);
                 session.tools.push(tool);
-                return;
+                session.currentTool = tool;
             }
         }
-
-        if (targetAgent) {
-            targetAgent.tools.push(tool);
-        }
     }
 
     /**
      * Update tool status after completion
      */
     updateToolStatus(event, session, status) {
-        // Find and update tool status across all agents
-        const findAndUpdateTool = (agent) => {
-            if (agent.tools) {
-                const tool = agent.tools.find(t => t.eventId === event.id);
-                if (tool) {
-                    tool.status = status;
-                    return true;
+        const toolName = event.tool_name || event.data?.tool_name || event.tool || 'unknown';
+        const agentSessionId = event.session_id || event.data?.session_id;
+        
+        // Find the appropriate agent
+        let targetAgent = session.currentActiveAgent;
+        
+        if (!targetAgent) {
+            const allAgents = this.getAllAgents(session);
+            targetAgent = allAgents.find(a => a.sessionId === agentSessionId) ||
+                         allAgents.find(a => a.status === 'active');
+        }
+        
+        if (targetAgent && targetAgent.toolsMap) {
+            const tool = targetAgent.toolsMap.get(toolName);
+            if (tool) {
+                tool.status = status;
+                tool.completedAt = event.timestamp;
+                if (event.data?.result || event.result) {
+                    tool.result = event.data?.result || event.result;
+                }
+                if (event.data?.duration_ms) {
+                    tool.duration = event.data.duration_ms;
                 }
+                return;
+            }
+        }
+        
+        // Check session-level tools
+        if (session.toolsMap) {
+            const tool = session.toolsMap.get(toolName);
+            if (tool) {
+                tool.status = status;
+                tool.completedAt = event.timestamp;
+                if (event.data?.result || event.result) {
+                    tool.result = event.data?.result || event.result;
+                }
+                if (event.data?.duration_ms) {
+                    tool.duration = event.data.duration_ms;
+                }
+                return;
             }
-            return false;
-        };
-
-        // Check all agents in session
-        for (let agent of session.agents.values()) {
-            if (findAndUpdateTool(agent)) return;
         }
         
-        // Check session-level tools (PM level)
-        if (session.tools && findAndUpdateTool(session)) return;
+        console.log(`ActivityTree: Could not find tool to update status for ${toolName} (event ${event.id})`);
     }
 
     /**
@@ -833,33 +1020,79 @@ class ActivityTree {
     }
 
     /**
-     * Render agent element
+     * Render agent element with proper nesting
      */
     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 isSelected = this.selectedItem && this.selectedItem.type === 'agent' && this.selectedItem.data.id === agent.id;
         
-        const expandIcon = hasTools ? (isExpanded ? '▼' : '▶') : '';
+        const expandIcon = hasContent ? (isExpanded ? '▼' : '▶') : '';
         const selectedClass = isSelected ? 'selected' : '';
         
+        // Add instance count if called multiple times
+        const instanceIndicator = agent.instanceCount > 1 ? ` (${agent.instanceCount}x)` : '';
+        
+        // Build status display for collapsed state
+        let collapsedStatus = '';
+        if (!isExpanded && hasContent) {
+            const parts = [];
+            if (agent.currentTodos && agent.currentTodos.length > 0) {
+                const inProgress = agent.currentTodos.find(t => t.status === 'in_progress');
+                if (inProgress) {
+                    parts.push(`📝 ${inProgress.activeForm || inProgress.content}`);
+                }
+            }
+            if (agent.currentTool) {
+                parts.push(`${agent.currentTool.icon} ${agent.currentTool.name}`);
+            }
+            if (parts.length > 0) {
+                collapsedStatus = ` • ${parts.join(' • ')}`;
+            }
+        }
+        
         let html = `
             <div class="tree-node agent ${statusClass} ${selectedClass}" data-level="${level}">
                 <div class="tree-node-content">
                     ${expandIcon ? `<span class="tree-expand-icon" onclick="window.activityTreeInstance.toggleAgent('${agent.id}'); event.stopPropagation();">${expandIcon}</span>` : '<span class="tree-expand-icon"></span>'}
                     <span class="tree-icon">${agent.icon}</span>
-                    <span class="tree-label clickable" onclick="window.activityTreeInstance.selectItem(${this.escapeJson(agent)}, 'agent', event)">${agent.name}</span>
+                    <span class="tree-label clickable" onclick="window.activityTreeInstance.selectItem(${this.escapeJson(agent)}, 'agent', event)">${agent.name}${instanceIndicator}${collapsedStatus}</span>
                     <span class="tree-status ${statusClass}">${agent.status}</span>
                 </div>
         `;
         
-        // Render tools under this agent
-        if (hasTools && isExpanded) {
+        // Render nested content when expanded
+        if (hasContent && isExpanded) {
             html += '<div class="tree-children">';
-            for (let tool of agent.tools) {
-                html += this.renderToolElement(tool, level + 1);
+            
+            // 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);
             }
+            
+            // Then render subagents (they will have their own TodoWrite at the top)
+            if (hasSubagents) {
+                const subagents = Array.from(agent.subagents.values());
+                for (let subagent of subagents) {
+                    html += this.renderAgentElement(subagent, level + 1);
+                }
+            }
+            
+            // 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>';
         }
         
@@ -876,14 +1109,22 @@ class ActivityTree {
         const isSelected = this.selectedItem && this.selectedItem.type === 'tool' && this.selectedItem.data.id === tool.id;
         const selectedClass = isSelected ? 'selected' : '';
         
+        // Add visual status indicators
+        const statusIcon = this.getToolStatusIcon(tool.status);
+        const statusLabel = this.getToolStatusLabel(tool.status);
+        
+        // Add call count if more than 1
+        const callIndicator = tool.callCount > 1 ? ` (${tool.callCount} calls)` : '';
+        
         let html = `
             <div class="tree-node tool ${statusClass} ${selectedClass}" data-level="${level}">
                 <div class="tree-node-content">
                     <span class="tree-expand-icon"></span>
                     <span class="tree-icon">${tool.icon}</span>
-                    <span class="tree-label clickable" onclick="window.activityTreeInstance.selectItem(${this.escapeJson(tool)}, 'tool', event)">${tool.name} (click to view details)</span>
+                    <span class="tree-status-icon">${statusIcon}</span>
+                    <span class="tree-label clickable" onclick="window.activityTreeInstance.selectItem(${this.escapeJson(tool)}, 'tool', event)">${tool.name}${callIndicator}</span>
                     <span class="tree-params">${params}</span>
-                    <span class="tree-status ${statusClass}">${tool.status}</span>
+                    <span class="tree-status ${statusClass}">${statusLabel}</span>
                 </div>
             </div>
         `;
@@ -951,11 +1192,119 @@ class ActivityTree {
             'qa': '🧪',
             'ops': '⚙️',
             'pm': '📊',
-            'architect': '🏗️'
+            'architect': '🏗️',
+            'project manager': '📊'
         };
         return icons[agentName.toLowerCase()] || '🤖';
     }
 
+    /**
+     * Helper to get all agents including nested subagents
+     */
+    getAllAgents(session) {
+        const agents = [];
+        
+        const collectAgents = (agentMap) => {
+            if (!agentMap) return;
+            
+            for (let agent of agentMap.values()) {
+                agents.push(agent);
+                if (agent.subagents && agent.subagents.size > 0) {
+                    collectAgents(agent.subagents);
+                }
+            }
+        };
+        
+        collectAgents(session.agents);
+        return agents;
+    }
+
+    /**
+     * Render TodoWrite element
+     */
+    renderTodoWriteElement(todoWrite, level) {
+        const todoWriteId = todoWrite.id;
+        const isExpanded = this.expandedTools.has(todoWriteId);
+        const expandIcon = isExpanded ? '▼' : '▶';
+        const todos = todoWrite.todos || [];
+        
+        // Calculate status summary
+        let completedCount = 0;
+        let inProgressCount = 0;
+        let pendingCount = 0;
+        
+        todos.forEach(todo => {
+            if (todo.status === 'completed') completedCount++;
+            else if (todo.status === 'in_progress') inProgressCount++;
+            else pendingCount++;
+        });
+        
+        // Find current in-progress todo for highlighting
+        const currentTodo = todos.find(t => t.status === 'in_progress');
+        const currentIndicator = currentTodo ? ` • 🔄 ${currentTodo.activeForm || currentTodo.content}` : '';
+        
+        let statusSummary = '';
+        if (inProgressCount > 0) {
+            statusSummary = `${inProgressCount} in progress, ${completedCount}/${todos.length} done`;
+        } else if (completedCount === todos.length && todos.length > 0) {
+            statusSummary = `All ${todos.length} completed ✅`;
+        } else {
+            statusSummary = `${completedCount}/${todos.length} done`;
+        }
+        
+        // Add update count if more than 1
+        const updateIndicator = todoWrite.updateCount > 1 ? ` (${todoWrite.updateCount} updates)` : '';
+        
+        let html = `
+            <div class="tree-node todowrite ${currentTodo ? 'has-active' : ''}" data-level="${level}">
+                <div class="tree-node-content">
+                    <span class="tree-expand-icon" onclick="window.activityTreeInstance.toggleTodoWrite('${todoWriteId}'); event.stopPropagation();">${expandIcon}</span>
+                    <span class="tree-icon">📝</span>
+                    <span class="tree-label">TodoWrite${updateIndicator}${!isExpanded ? currentIndicator : ''}</span>
+                    <span class="tree-params">${statusSummary}</span>
+                    <span class="tree-status status-active">todos</span>
+                </div>
+        `;
+        
+        // Show expanded todo items if expanded
+        if (isExpanded && todos.length > 0) {
+            html += '<div class="tree-children">';
+            for (let todo of todos) {
+                const statusIcon = this.getCheckboxIcon(todo.status);
+                const statusClass = `status-${todo.status}`;
+                const displayText = todo.status === 'in_progress' ? todo.activeForm : todo.content;
+                const isCurrentTodo = todo === currentTodo;
+                
+                html += `
+                    <div class="tree-node todo-item ${statusClass} ${isCurrentTodo ? 'current-active' : ''}" data-level="${level + 1}">
+                        <div class="tree-node-content">
+                            <span class="tree-expand-icon"></span>
+                            <span class="tree-icon">${statusIcon}</span>
+                            <span class="tree-label">${this.escapeHtml(displayText)}</span>
+                            <span class="tree-status ${statusClass}">${todo.status.replace('_', ' ')}</span>
+                        </div>
+                    </div>
+                `;
+            }
+            html += '</div>';
+        }
+        
+        html += '</div>';
+        return html;
+    }
+
+    /**
+     * Toggle TodoWrite expansion
+     */
+    toggleTodoWrite(todoWriteId) {
+        if (this.expandedTools.has(todoWriteId)) {
+            this.expandedTools.delete(todoWriteId);
+        } else {
+            this.expandedTools.add(todoWriteId);
+        }
+        this.renderTree();
+    }
+
     /**
      * Get tool icon based on name
      */
@@ -973,6 +1322,36 @@ class ActivityTree {
         return icons[toolName.toLowerCase()] || '🔧';
     }
 
+    /**
+     * Get status icon for tool status
+     */
+    getToolStatusIcon(status) {
+        const icons = {
+            'in_progress': '⏳',
+            'completed': '✅',
+            'failed': '❌',
+            'error': '❌',
+            'pending': '⏸️',
+            'active': '🔄'
+        };
+        return icons[status] || '❓';
+    }
+
+    /**
+     * Get formatted status label for tool
+     */
+    getToolStatusLabel(status) {
+        const labels = {
+            'in_progress': 'in progress',
+            'completed': 'completed',
+            'failed': 'failed',
+            'error': 'error',
+            'pending': 'pending',
+            'active': 'active'
+        };
+        return labels[status] || status;
+    }
+
     /**
      * Toggle session expansion
      */
@@ -1171,66 +1550,13 @@ class ActivityTree {
     }
 
     /**
-     * Handle item click to show data in left pane
+     * Render pinned TODOs element under agent
      */
-    selectItem(item, itemType, event) {
-        // Stop event propagation to prevent expand/collapse when clicking on label
-        if (event) {
-            event.stopPropagation();
-        }
-        
-        this.selectedItem = { data: item, type: itemType };
-        this.displayItemData(item, itemType);
-        this.renderTree(); // Re-render to show selection highlight
-    }
-
-    /**
-     * Display item data in left pane using simple display methods
-     */
-    displayItemData(item, itemType) {
-        // Special handling for TodoWrite tools to match Tools view display
-        if (itemType === 'tool' && item.name === 'TodoWrite' && item.params && item.params.todos) {
-            this.displayTodoWriteData(item);
-            return;
-        }
-        
-        // Use simple display methods based on item type
-        switch(itemType) {
-            case 'agent':
-                this.displayAgentData(item);
-                break;
-            case 'tool':
-                this.displayToolData(item);
-                break;
-            case 'instruction':
-                this.displayInstructionData(item);
-                break;
-            default:
-                this.displayGenericData(item, itemType);
-                break;
-        }
-        
-        // Update module header for consistency
-        const moduleHeader = document.querySelector('.module-data-header h5');
-        if (moduleHeader) {
-            const icons = {
-                'agent': '🤖',
-                'tool': '🔧', 
-                'instruction': '💬',
-                'session': '🎯'
-            };
-            const icon = icons[itemType] || '📊';
-            const name = item.name || item.agentName || item.tool_name || 'Item';
-            moduleHeader.textContent = `${icon} ${itemType}: ${name}`;
-        }
-    }
-
-    /**
-     * Display TodoWrite data in the same clean format as Tools view
-     */
-    displayTodoWriteData(item) {
-        const todos = item.params.todos || [];
-        const timestamp = this.formatTimestamp(item.timestamp);
+    renderPinnedTodosElement(pinnedTodos, level) {
+        const checklistId = `pinned-todos-${Date.now()}`;
+        const isExpanded = this.expandedTools.has(checklistId) !== false; // Default to expanded
+        const expandIcon = isExpanded ? '▼' : '▶';
+        const todos = pinnedTodos.todos || [];
         
         // Calculate status summary
         let completedCount = 0;
@@ -1243,293 +1569,95 @@ class ActivityTree {
             else pendingCount++;
         });
         
+        let statusSummary = '';
+        if (inProgressCount > 0) {
+            statusSummary = `${inProgressCount} in progress, ${completedCount} completed`;
+        } else if (completedCount === todos.length && todos.length > 0) {
+            statusSummary = `All ${todos.length} completed`;
+        } else {
+            statusSummary = `${todos.length} todo(s)`;
+        }
+        
         let html = `
-            <div class="unified-viewer-header">
-                <h6>📝 TodoWrite: PM ${timestamp}</h6>
-                <span class="unified-viewer-status">${this.formatStatus(item.status)}</span>
-            </div>
-            <div class="unified-viewer-content">
-        `;
-
-        if (todos.length > 0) {
-            // Status summary 
-            html += `
-                <div class="detail-section">
-                    <span class="detail-section-title">Todo Summary</span>
-                    <div class="todo-summary">
-                        <div class="summary-item completed">
-                            <span class="summary-icon">✅</span>
-                            <span class="summary-count">${completedCount}</span>
-                            <span class="summary-label">Completed</span>
-                        </div>
-                        <div class="summary-item in_progress">
-                            <span class="summary-icon">🔄</span>
-                            <span class="summary-count">${inProgressCount}</span>
-                            <span class="summary-label">In Progress</span>
-                        </div>
-                        <div class="summary-item pending">
-                            <span class="summary-icon">⏳</span>
-                            <span class="summary-count">${pendingCount}</span>
-                            <span class="summary-label">Pending</span>
-                        </div>
-                    </div>
+            <div class="tree-node pinned-todos" data-level="${level}">
+                <div class="tree-node-content">
+                    <span class="tree-expand-icon" onclick="window.activityTreeInstance.toggleTodoChecklist('${checklistId}'); event.stopPropagation();">${expandIcon}</span>
+                    <span class="tree-icon">📌</span>
+                    <span class="tree-label">Pinned TODOs</span>
+                    <span class="tree-params">${statusSummary}</span>
+                    <span class="tree-status status-active">pinned</span>
                 </div>
-            `;
-
-            // Todo list display (same as Tools view)
-            html += `
-                <div class="detail-section">
-                    <span class="detail-section-title">Todo List (${todos.length} items)</span>
-                    <div class="todo-checklist">
-            `;
-            
-            todos.forEach((todo, index) => {
+        `;
+        
+        // Show expanded todo items if expanded
+        if (isExpanded) {
+            html += '<div class="tree-children">';
+            for (let todo of todos) {
                 const statusIcon = this.getCheckboxIcon(todo.status);
-                const displayText = todo.status === 'in_progress' ? 
-                    (todo.activeForm || todo.content) : todo.content;
-                const statusClass = this.formatStatusClass(todo.status);
+                const statusClass = `status-${todo.status}`;
+                const displayText = todo.status === 'in_progress' ? todo.activeForm : todo.content;
                 
                 html += `
-                    <div class="todo-checklist-item ${todo.status}">
-                        <div class="todo-checkbox">
-                            <span class="checkbox-icon ${statusClass}">${statusIcon}</span>
-                        </div>
-                        <div class="todo-text">
-                            <span class="todo-content">${this.escapeHtml(displayText)}</span>
-                            <span class="todo-status-badge ${statusClass}">${todo.status.replace('_', ' ')}</span>
+                    <div class="tree-node todo-item ${statusClass}" data-level="${level + 1}">
+                        <div class="tree-node-content">
+                            <span class="tree-expand-icon"></span>
+                            <span class="tree-icon">${statusIcon}</span>
+                            <span class="tree-label">${this.escapeHtml(displayText)}</span>
+                            <span class="tree-status ${statusClass}">${todo.status.replace('_', ' ')}</span>
                         </div>
                     </div>
                 `;
-            });
-            
-            html += `
-                    </div>
-                </div>
-            `;
-        } else {
-            html += `
-                <div class="detail-section">
-                    <div class="no-todos">No todo items found</div>
-                </div>
-            `;
-        }
-
-        // Add raw JSON section at the bottom
-        html += `
-            <div class="detail-section">
-                <span class="detail-section-title">Parameters (${Object.keys(item.params).length})</span>
-                <div class="params-list">
-                    <div class="param-item">
-                        <div class="param-key">todos:</div>
-                        <div class="param-value">
-                            <pre class="param-json">${this.escapeHtml(JSON.stringify(todos, null, 2))}</pre>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        html += '</div>';
-        
-        // Set the content directly
-        const container = document.getElementById('module-data-content');
-        if (container) {
-            container.innerHTML = html;
-        }
-
-        // Update module header 
-        const moduleHeader = document.querySelector('.module-data-header h5');
-        if (moduleHeader) {
-            moduleHeader.textContent = `📝 tool: TodoWrite`;
+            }
+            html += '</div>';
         }
-    }
-
-    // Utility methods for TodoWrite display
-    formatStatus(status) {
-        if (!status) return 'unknown';
-        
-        const statusMap = {
-            'active': '🟢 Active',
-            'completed': '✅ Completed', 
-            'in_progress': '🔄 In Progress',
-            'pending': '⏳ Pending',
-            'error': '❌ Error',
-            'failed': '❌ Failed'
-        };
         
-        return statusMap[status] || status;
-    }
-
-    formatStatusClass(status) {
-        return `status-${status}`;
-    }
-
-    formatTimestamp(timestamp) {
-        if (!timestamp) return '';
-        
-        try {
-            const date = new Date(timestamp);
-            if (isNaN(date.getTime())) return '';
-            return date.toLocaleTimeString();
-        } catch (error) {
-            return '';
-        }
+        html += '</div>';
+        return html;
     }
 
     /**
-     * Display agent data in a simple format
+     * Handle item click to show data in left pane
      */
-    displayAgentData(agent) {
-        const timestamp = this.formatTimestamp(agent.timestamp);
-        const container = document.getElementById('module-data-content');
-        if (!container) return;
-
-        let html = `
-            <div class="detail-section">
-                <span class="detail-section-title">Agent Information</span>
-                <div class="agent-info">
-                    <div class="info-item">
-                        <span class="info-label">Name:</span>
-                        <span class="info-value">${this.escapeHtml(agent.name)}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Status:</span>
-                        <span class="info-value status-${agent.status}">${agent.status}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Timestamp:</span>
-                        <span class="info-value">${timestamp}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Session ID:</span>
-                        <span class="info-value">${agent.sessionId || 'N/A'}</span>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        if (agent.tools && agent.tools.length > 0) {
-            html += `
-                <div class="detail-section">
-                    <span class="detail-section-title">Tools (${agent.tools.length})</span>
-                    <div class="tool-list">
-            `;
-            
-            agent.tools.forEach(tool => {
-                html += `
-                    <div class="tool-item">
-                        <span class="tool-name">${this.escapeHtml(tool.name)}</span>
-                        <span class="tool-status status-${tool.status}">${tool.status}</span>
-                    </div>
-                `;
-            });
-            
-            html += `
-                    </div>
-                </div>
-            `;
+    selectItem(item, itemType, event) {
+        // Stop event propagation to prevent expand/collapse when clicking on label
+        if (event) {
+            event.stopPropagation();
         }
-
-        container.innerHTML = html;
+        
+        this.selectedItem = { data: item, type: itemType };
+        this.displayItemData(item, itemType);
+        this.renderTree(); // Re-render to show selection highlight
     }
 
     /**
-     * Display tool data in a simple format
+     * Display item data in left pane using UnifiedDataViewer for consistency with Tools viewer
      */
-    displayToolData(tool) {
-        const timestamp = this.formatTimestamp(tool.timestamp);
-        const container = document.getElementById('module-data-content');
-        if (!container) return;
-
-        let html = `
-            <div class="detail-section">
-                <span class="detail-section-title">Tool Information</span>
-                <div class="tool-info">
-                    <div class="info-item">
-                        <span class="info-label">Name:</span>
-                        <span class="info-value">${this.escapeHtml(tool.name)}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Status:</span>
-                        <span class="info-value status-${tool.status}">${tool.status}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="info-label">Timestamp:</span>
-                        <span class="info-value">${timestamp}</span>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        if (tool.params && Object.keys(tool.params).length > 0) {
-            html += `
-                <div class="detail-section">
-                    <span class="detail-section-title">Parameters</span>
-                    <div class="params-list">
-            `;
-            
-            Object.entries(tool.params).forEach(([key, value]) => {
-                html += `
-                    <div class="param-item">
-                        <div class="param-key">${this.escapeHtml(key)}:</div>
-                        <div class="param-value">${this.escapeHtml(String(value))}</div>
-                    </div>
-                `;
-            });
-            
-            html += `
-                    </div>
-                </div>
-            `;
+    displayItemData(item, itemType) {
+        // Initialize UnifiedDataViewer if not already available
+        if (!this.unifiedViewer) {
+            this.unifiedViewer = new UnifiedDataViewer('module-data-content');
+        }
+        
+        // Use the same UnifiedDataViewer as Tools viewer for consistent display
+        this.unifiedViewer.display(item, itemType);
+        
+        // Update module header for consistency
+        const moduleHeader = document.querySelector('.module-data-header h5');
+        if (moduleHeader) {
+            const icons = {
+                'agent': '🤖',
+                'tool': '🔧', 
+                'instruction': '💬',
+                'session': '🎯',
+                'todo': '📝'
+            };
+            const icon = icons[itemType] || '📊';
+            const name = item.name || item.agentName || item.tool_name || 'Item';
+            moduleHeader.textContent = `${icon} ${itemType}: ${name}`;
         }
-
-        container.innerHTML = html;
-    }
-
-    /**
-     * Display instruction data in a simple format
-     */
-    displayInstructionData(instruction) {
-        const timestamp = this.formatTimestamp(instruction.timestamp);
-        const container = document.getElementById('module-data-content');
-        if (!container) return;
-
-        const html = `
-            <div class="detail-section">
-                <span class="detail-section-title">User Instruction</span>
-                <div class="instruction-info">
-                    <div class="info-item">
-                        <span class="info-label">Timestamp:</span>
-                        <span class="info-value">${timestamp}</span>
-                    </div>
-                    <div class="instruction-content">
-                        <div class="instruction-text">${this.escapeHtml(instruction.text)}</div>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        container.innerHTML = html;
     }
 
-    /**
-     * Display generic data for unknown types
-     */
-    displayGenericData(item, itemType) {
-        const container = document.getElementById('module-data-content');
-        if (!container) return;
-
-        let html = `
-            <div class="detail-section">
-                <span class="detail-section-title">${itemType || 'Item'} Data</span>
-                <div class="generic-data">
-                    <pre>${this.escapeHtml(JSON.stringify(item, null, 2))}</pre>
-                </div>
-            </div>
-        `;
-
-        container.innerHTML = html;
-    }
+    // Display methods removed - now using UnifiedDataViewer for consistency
 
     /**
      * Escape HTML for safe display