claude-mpm 4.1.12__py3-none-any.whl → 4.1.14__py3-none-any.whl

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

@@ -1,49 +1,40 @@
 /**
- * Activity Tree Component
+ * Activity Tree Component - Linear Tree View
  * 
- * D3.js-based collapsible tree visualization for showing PM activity hierarchy.
- * Displays PM actions, TodoWrite delegations, agent assignments, and tool usage.
+ * 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.
  */
 
 class ActivityTree {
     constructor() {
         this.container = null;
-        this.svg = null;
-        this.treeData = null;
-        this.root = null;
-        this.treeLayout = null;
-        this.treeGroup = null;
         this.events = [];
-        this.todoWriteStack = [];
-        this.activeAgent = null;
-        this.activeAgentStack = [];
-        this.margin = {top: 20, right: 120, bottom: 20, left: 120};
-        this.width = 960 - this.margin.left - this.margin.right;
-        this.height = 500 - this.margin.top - this.margin.bottom;
-        this.nodeId = 0;
-        this.duration = 750;
+        this.sessions = new Map();
+        this.currentSession = null;
+        this.selectedSessionFilter = 'all';
         this.timeRange = '30min';
         this.searchTerm = '';
-        this.tooltip = null;
         this.initialized = false;
+        this.expandedSessions = new Set();
+        this.expandedAgents = new Set();
+        this.expandedTools = new Set();
+        this.selectedItem = null;
     }
 
     /**
-     * Initialize the activity tree visualization
+     * Initialize the activity tree
      */
     initialize() {
         console.log('ActivityTree.initialize() called, initialized:', this.initialized);
         
-        // Check if already initialized
         if (this.initialized) {
             console.log('Activity tree already initialized, skipping');
             return;
         }
         
-        // First try to find the container
         this.container = document.getElementById('activity-tree-container');
         if (!this.container) {
-            // Fall back to the inner div if container not found
             this.container = document.getElementById('activity-tree');
             if (!this.container) {
                 console.error('Activity tree container not found in DOM');
@@ -51,14 +42,6 @@ class ActivityTree {
             }
         }
         
-        // Clear any existing text content that might be in the container
-        if (this.container.textContent && this.container.textContent.trim()) {
-            console.log('Clearing existing text content from container:', this.container.textContent);
-            this.container.textContent = '';
-        }
-        
-        console.log('Activity tree container found:', this.container);
-        
         // Check if the container is visible before initializing
         const tabPanel = document.getElementById('activity-tab');
         if (!tabPanel) {
@@ -66,48 +49,17 @@ class ActivityTree {
             return;
         }
         
-        // Initialize even if tab is not active, but don't render until visible
+        // Initialize even if tab is not active
         if (!tabPanel.classList.contains('active')) {
             console.log('Activity tab not active, initializing but deferring render');
-            // Clear any text content that might be showing
-            if (this.container.textContent && this.container.textContent.trim()) {
-                this.container.textContent = '';
-            }
-            // Set up basic structure but defer visualization
             this.setupControls();
-            this.initializeTreeData();
             this.subscribeToEvents();
             this.initialized = true;
             return;
         }
 
-        // Clear container before creating visualization
-        if (this.container.textContent && this.container.textContent.trim()) {
-            console.log('Clearing container text before creating visualization');
-            this.container.textContent = '';
-        }
-        
         this.setupControls();
-        this.createVisualization();
-        
-        if (!this.svg || !this.treeGroup) {
-            console.error('Failed to create D3 visualization elements');
-            // Show error message in container
-            if (this.container) {
-                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ Failed to create visualization. Please refresh the page.</div>';
-            }
-            return;
-        }
-        
-        this.initializeTreeData();
-        
-        // Only update if we have a valid root
-        if (this.root) {
-            this.update(this.root);
-        } else {
-            console.warn('Root not created, skipping initial update');
-        }
-        
+        this.createLinearTreeView();
         this.subscribeToEvents();
         
         this.initialized = true;
@@ -120,7 +72,6 @@ class ActivityTree {
     forceShow() {
         console.log('ActivityTree.forceShow() called');
         
-        // Ensure container is available
         if (!this.container) {
             this.container = document.getElementById('activity-tree-container') || document.getElementById('activity-tree');
             if (!this.container) {
@@ -129,217 +80,112 @@ class ActivityTree {
             }
         }
         
-        // Clear any text content
-        if (this.container.textContent && this.container.textContent.trim()) {
-            console.log('Clearing text from container:', this.container.textContent);
-            this.container.innerHTML = '';
-        }
-        
-        // Create visualization if needed
-        if (!this.svg) {
-            this.createVisualization();
-        }
-        
-        // Initialize tree data if needed
-        if (!this.root) {
-            this.initializeTreeData();
-        }
-        
-        // Update the tree
-        if (this.root && this.svg && this.treeGroup) {
-            this.update(this.root);
-        }
-        
-        // Ensure the SVG is visible
-        if (this.svg) {
-            const svgNode = this.svg.node();
-            if (svgNode) {
-                svgNode.style.display = 'block';
-                svgNode.style.visibility = 'visible';
-            }
-        }
+        this.createLinearTreeView();
+        this.renderTree();
     }
     
     /**
-     * Render the visualization when tab becomes visible (called when switching to Activity tab)
+     * Render the visualization when tab becomes visible
      */
     renderWhenVisible() {
         console.log('ActivityTree.renderWhenVisible() called');
         
-        // Ensure the container is clean
-        if (this.container && this.container.textContent && this.container.textContent.trim() && !this.svg) {
-            console.log('Clearing text content before rendering:', this.container.textContent);
-            this.container.textContent = '';
-        }
-        
         if (!this.initialized) {
             console.log('Not initialized yet, calling initialize...');
             this.initialize();
             return;
         }
         
-        // If already initialized but no visualization, create it
-        if (!this.svg) {
-            console.log('Creating deferred visualization...');
-            this.createVisualization();
-            if (this.svg && this.treeGroup && this.root) {
-                this.update(this.root);
-            } else if (!this.root) {
-                console.warn('No root node available, initializing tree data...');
-                this.initializeTreeData();
-                if (this.root && this.svg && this.treeGroup) {
-                    this.update(this.root);
-                }
-            }
-        }
-        
-        // Force update to ensure tree is rendered with current data
-        if (this.root && this.svg) {
-            console.log('Updating tree with current data...');
-            this.update(this.root);
-        } else {
-            console.warn('Cannot update tree - missing components:', {
-                hasRoot: !!this.root,
-                hasSvg: !!this.svg,
-                hasTreeGroup: !!this.treeGroup
-            });
-        }
+        this.createLinearTreeView();
+        this.renderTree();
     }
 
     /**
      * Setup control handlers
      */
     setupControls() {
-        // Expand all button
+        // Time range filter dropdown
+        const timeRangeSelect = document.getElementById('time-range');
+        if (timeRangeSelect) {
+            timeRangeSelect.addEventListener('change', (e) => {
+                this.timeRange = e.target.value;
+                console.log(`ActivityTree: Time range changed to: ${this.timeRange}`);
+                this.renderTree();
+            });
+        }
+
+        // Listen for session filter changes from SessionManager
+        document.addEventListener('sessionFilterChanged', (e) => {
+            this.selectedSessionFilter = e.detail.sessionId || 'all';
+            console.log(`ActivityTree: Session filter changed to: ${this.selectedSessionFilter} (from SessionManager)`);
+            this.renderTree();
+        });
+
+        // Also listen for sessionChanged for backward compatibility
+        document.addEventListener('sessionChanged', (e) => {
+            this.selectedSessionFilter = e.detail.sessionId || 'all';
+            console.log(`ActivityTree: Session changed to: ${this.selectedSessionFilter} (from SessionManager - backward compat)`);
+            this.renderTree();
+        });
+
+        // Initialize with current session filter from SessionManager
+        setTimeout(() => {
+            if (window.sessionManager) {
+                const currentFilter = window.sessionManager.getCurrentFilter();
+                if (currentFilter !== this.selectedSessionFilter) {
+                    this.selectedSessionFilter = currentFilter || 'all';
+                    console.log(`ActivityTree: Initialized with current session filter: ${this.selectedSessionFilter}`);
+                    this.renderTree();
+                }
+            }
+        }, 100); // Small delay to ensure SessionManager is initialized
+
+        // Expand all button - expand all sessions
         const expandAllBtn = document.getElementById('expand-all');
         if (expandAllBtn) {
-            expandAllBtn.addEventListener('click', () => this.expandAll());
+            expandAllBtn.addEventListener('click', () => this.expandAllSessions());
         }
 
-        // Collapse all button
+        // Collapse all button - collapse all sessions
         const collapseAllBtn = document.getElementById('collapse-all');
         if (collapseAllBtn) {
-            collapseAllBtn.addEventListener('click', () => this.collapseAll());
+            collapseAllBtn.addEventListener('click', () => this.collapseAllSessions());
         }
 
-        // Reset zoom button
+        // Reset zoom button functionality
         const resetZoomBtn = document.getElementById('reset-zoom');
         if (resetZoomBtn) {
+            resetZoomBtn.style.display = 'inline-block';
             resetZoomBtn.addEventListener('click', () => this.resetZoom());
         }
 
-        // Time range selector
-        const timeRangeSelect = document.getElementById('time-range');
-        if (timeRangeSelect) {
-            timeRangeSelect.addEventListener('change', (e) => {
-                this.timeRange = e.target.value;
-                this.filterEventsByTime();
-            });
-        }
-
         // Search input
         const searchInput = document.getElementById('activity-search');
         if (searchInput) {
             searchInput.addEventListener('input', (e) => {
                 this.searchTerm = e.target.value.toLowerCase();
-                this.highlightSearchResults();
+                this.renderTree();
             });
         }
     }
 
     /**
-     * Create the D3 visualization
+     * Create the linear tree view container
      */
-    createVisualization() {
-        // Check if D3 is available
-        if (typeof d3 === 'undefined') {
-            console.error('D3.js is not loaded! Cannot create activity tree visualization.');
-            // Try to display an error message in the container
-            if (this.container) {
-                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ D3.js is not loaded. Cannot create visualization.</div>';
-            }
-            return;
-        }
-
-        // Calculate dimensions based on container
-        const containerRect = this.container.getBoundingClientRect();
-        this.width = containerRect.width - this.margin.left - this.margin.right;
-        this.height = Math.max(500, containerRect.height - this.margin.top - this.margin.bottom);
-
-        console.log('Creating D3 visualization with dimensions:', { width: this.width, height: this.height });
-
-        // Clear any existing content (including text)
-        d3.select(this.container).selectAll('*').remove();
-
-        // Create SVG
-        this.svg = d3.select(this.container)
-            .append('svg')
-            .attr('width', '100%')
-            .attr('height', '100%')
-            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`);
-
-        // Create main group for tree positioning
-        this.treeGroup = this.svg.append('g')
-            .attr('class', 'tree-group')
-            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
-
-        // Add zoom behavior
-        const zoom = d3.zoom()
-            .scaleExtent([0.1, 3])
-            .on('zoom', (event) => {
-                this.treeGroup.attr('transform', 
-                    `translate(${this.margin.left + event.transform.x},${this.margin.top + event.transform.y}) scale(${event.transform.k})`
-                );
-            });
-
-        this.svg.call(zoom);
-
-        // Create tree layout
-        this.treeLayout = d3.tree()
-            .size([this.height, this.width]);
+    createLinearTreeView() {
+        console.log('Creating linear tree view');
         
-        console.log('ActivityTree: Tree layout created:', this.treeLayout);
-
-        // Create tooltip
-        this.tooltip = d3.select('body').append('div')
-            .attr('class', 'activity-tooltip')
-            .style('opacity', 0);
+        // Clear container
+        this.container.innerHTML = '';
         
-        console.log('ActivityTree: Visualization complete, svg:', this.svg, 'treeGroup:', this.treeGroup);
-    }
-
-    /**
-     * Initialize tree data structure
-     */
-    initializeTreeData() {
-        console.log('ActivityTree: Initializing tree data');
-        
-        this.treeData = {
-            name: 'PM',
-            type: 'pm',
-            icon: '🎯',
-            children: [],
-            _children: null
-        };
-
-        // Check if D3 is available
-        if (typeof d3 === 'undefined') {
-            console.error('ActivityTree: D3 is not available - cannot create hierarchy!');
-            // Try to display an error message
-            if (this.container) {
-                this.container.innerHTML = '<div style="padding: 20px; text-align: center; color: #e53e3e;">⚠️ Waiting for D3.js to load...</div>';
-            }
-            return;
-        }
-
-        this.root = d3.hierarchy(this.treeData);
-        this.root.x0 = this.height / 2;
-        this.root.y0 = 0;
+        // Create main tree container
+        const treeContainer = document.createElement('div');
+        treeContainer.id = 'linear-tree';
+        treeContainer.className = 'linear-tree';
         
-        console.log('ActivityTree: Root node created:', this.root);
+        this.container.appendChild(treeContainer);
         
-        // Update stats immediately after creating root
-        this.updateStats();
+        console.log('Linear tree view created');
     }
 
     /**
@@ -355,45 +201,98 @@ class ActivityTree {
         console.log('ActivityTree: Setting up event subscription');
 
         // Subscribe to event updates from the socket client
-        // Process ALL events and determine their type internally
-        window.socketClient.onEventUpdate((events) => {
-            console.log(`ActivityTree: onEventUpdate called with ${events.length} total events`);
+        // FIXED: Now correctly receives both events AND sessions from socket client
+        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
+            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);
+            }
             
             // Process only the new events since last update
             const newEventCount = events.length - this.events.length;
             if (newEventCount > 0) {
-                // Process only the new events
                 const newEvents = events.slice(this.events.length);
-                
                 console.log(`ActivityTree: Processing ${newEventCount} new events`, newEvents);
                 
-                // Process all events, regardless of format
                 newEvents.forEach(event => {
                     this.processEvent(event);
                 });
-                
-                // Update our event count
-                this.events = [...events];
             }
+                
+            this.events = [...events];
+            this.renderTree();
+            
+            // Debug: Log session state after processing
+            console.log(`ActivityTree: Sessions after sync with socket client:`, Array.from(this.sessions.entries()));
         });
 
-        // Load existing events if available
-        const existingEvents = window.socketClient?.events || window.eventViewer?.events || [];
+        // Load existing data from socket client
+        const socketState = window.socketClient?.getState();
         
-        if (existingEvents.length > 0) {
-            console.log(`ActivityTree: Processing ${existingEvents.length} existing events`, existingEvents);
-            existingEvents.forEach(event => {
+        if (socketState && socketState.events.length > 0) {
+            console.log(`ActivityTree: Loading existing data - ${socketState.events.length} events, ${socketState.sessions.size} sessions`);
+            
+            // Initialize from existing socket client data
+            this.sessions.clear();
+            
+            // 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);
+            }
+            
+            // Process existing events to populate activity data
+            socketState.events.forEach(event => {
                 this.processEvent(event);
             });
-            this.events = [...existingEvents];
+            this.events = [...socketState.events];
+            this.renderTree();
+            
+            // Debug: Log initial session state
+            console.log(`ActivityTree: Initial sessions state:`, Array.from(this.sessions.entries()));
         } else {
             console.log('ActivityTree: No existing events found');
             this.events = [];
+            this.sessions.clear();
+            this.renderTree();
         }
     }
 
     /**
-     * Process an event and update the tree
+     * Process an event and update the session structure
      */
     processEvent(event) {
         if (!event) {
@@ -401,75 +300,68 @@ class ActivityTree {
             return;
         }
         
-        // Handle events with the actual format from the server
-        let eventType = null;
-        
-        // First check if hook_event_name exists (from transformation)
-        if (event.hook_event_name) {
-            eventType = event.hook_event_name;
+        // Determine event type
+        let eventType = this.getEventType(event);
+        if (!eventType) {
+            return;
         }
-        // Map from type/subtype for hook events
-        else if (event.type === 'hook' && event.subtype) {
-            const mapping = {
-                'pre_tool': 'PreToolUse',
-                'post_tool': 'PostToolUse',
-                'subagent_start': 'SubagentStart',
-                'subagent_stop': 'SubagentStop',
-                'todo_write': 'TodoWrite'
-            };
-            eventType = mapping[event.subtype];
-        }
-        // Handle todo events
-        else if (event.type === 'todo' && event.subtype === 'updated') {
-            eventType = 'TodoWrite';
-        }
-        // Handle subagent events
-        else if (event.type === 'subagent') {
-            if (event.subtype === 'started') {
-                eventType = 'SubagentStart';
-            } else if (event.subtype === 'stopped') {
-                eventType = 'SubagentStop';
+        
+        console.log(`ActivityTree: Processing event: ${eventType}`, event);
+        
+        // Fix timestamp processing - ensure we get a valid date
+        let timestamp;
+        if (event.timestamp) {
+            // Handle both ISO strings and already parsed dates
+            timestamp = new Date(event.timestamp);
+            // Check if date is valid
+            if (isNaN(timestamp.getTime())) {
+                console.warn('ActivityTree: Invalid timestamp, using current time:', event.timestamp);
+                timestamp = new Date();
             }
-        }
-        // Handle start event
-        else if (event.type === 'start') {
-            eventType = 'Start';
+        } else {
+            console.warn('ActivityTree: No timestamp found, using current time');
+            timestamp = new Date();
         }
         
-        if (!eventType) {
-            // Only log if it's a potentially relevant event
-            if (event.type === 'hook' || event.type === 'todo' || event.type === 'subagent') {
-                console.log('ActivityTree: Cannot determine event type for:', event);
-            }
+        // Get session ID from event - this should match the authoritative sessions
+        const sessionId = event.session_id || event.data?.session_id;
+        
+        // Skip events without session ID - they can't be properly categorized
+        if (!sessionId) {
+            console.log(`ActivityTree: Skipping event without session_id: ${eventType}`);
             return;
         }
         
-        console.log(`ActivityTree: Processing event: ${eventType}`, event);
-        
-        const timestamp = new Date(event.timestamp);
-        if (!this.isEventInTimeRange(timestamp)) {
+        // Find the session - it should already exist from authoritative sessions
+        if (!this.sessions.has(sessionId)) {
+            console.warn(`ActivityTree: Session ${sessionId} not found in authoritative sessions - skipping event`);
             return;
         }
         
+        const session = this.sessions.get(sessionId);
+        
         switch (eventType) {
+            case 'Start':
+                // New PM session started
+                this.currentSession = session;
+                break;
+            case 'user_prompt':
+                this.processUserInstruction(event, session);
+                break;
             case 'TodoWrite':
-                this.processTodoWrite(event);
+                this.processTodoWrite(event, session);
                 break;
             case 'SubagentStart':
-                this.processSubagentStart(event);
+                this.processSubagentStart(event, session);
                 break;
             case 'SubagentStop':
-                this.processSubagentStop(event);
+                this.processSubagentStop(event, session);
                 break;
             case 'PreToolUse':
-                this.processToolUse(event);
+                this.processToolUse(event, session);
                 break;
             case 'PostToolUse':
-                this.updateToolStatus(event, 'completed');
-                break;
-            case 'Start':
-                this.initializeTreeData();
-                this.update(this.root);
+                this.updateToolStatus(event, session, 'completed');
                 break;
         }
         
@@ -477,256 +369,576 @@ class ActivityTree {
     }
 
     /**
-     * Process TodoWrite event
+     * Get event type from event data
      */
-    processTodoWrite(event) {
-        console.log('ActivityTree: Processing TodoWrite event:', event);
+    getEventType(event) {
+        if (event.hook_event_name) {
+            return event.hook_event_name;
+        }
         
-        // Look for todos in multiple places for compatibility
-        let todos = event.todos || 
-                    event.data?.todos || 
-                    event.data ||  // Sometimes todos are directly in data
-                    [];
+        if (event.type === 'hook' && event.subtype) {
+            const mapping = {
+                'pre_tool': 'PreToolUse',
+                'post_tool': 'PostToolUse',
+                'subagent_start': 'SubagentStart',
+                'subagent_stop': 'SubagentStop',
+                'todo_write': 'TodoWrite'
+            };
+            return mapping[event.subtype];
+        }
         
-        // Handle case where todos might be an object with todos property
-        if (todos && typeof todos === 'object' && todos.todos) {
-            todos = todos.todos;
+        if (event.type === 'todo' && event.subtype === 'updated') {
+            return 'TodoWrite';
         }
         
-        // Ensure todos is an array
-        if (!Array.isArray(todos)) {
-            console.log('ActivityTree: Invalid todos format in event:', event);
-            return;
+        if (event.type === 'subagent') {
+            if (event.subtype === 'started') return 'SubagentStart';
+            if (event.subtype === 'stopped') return 'SubagentStop';
         }
         
-        if (todos.length === 0) {
-            console.log('ActivityTree: No todos in event');
-            return;
+        if (event.type === 'start') {
+            return 'Start';
         }
-
-        // Find in-progress todo
-        const activeTodo = todos.find(t => t.status === 'in_progress');
-        if (!activeTodo) {
-            console.log('ActivityTree: No in-progress todo found');
-            return;
+        
+        if (event.type === 'user_prompt' || event.subtype === 'user_prompt') {
+            return 'user_prompt';
         }
+        
+        return null;
+    }
 
-        console.log('ActivityTree: Found active todo:', activeTodo);
+    // getSessionId method removed - now using authoritative session IDs directly from socket client
 
-        // Create TodoWrite node
-        const todoNode = {
-            name: activeTodo.activeForm || activeTodo.content,
-            type: 'todowrite',
-            icon: '📝',
-            content: activeTodo.content,
-            status: activeTodo.status,
-            timestamp: event.timestamp,
-            children: [],
-            _children: null,
-            eventId: event.id
+    /**
+     * Process user instruction/prompt event
+     */
+    processUserInstruction(event, session) {
+        const promptText = event.prompt_text || event.data?.prompt_text || event.prompt || '';
+        if (!promptText) return;
+        
+        const instruction = {
+            id: `instruction-${session.id}-${Date.now()}`,
+            text: promptText,
+            preview: promptText.length > 100 ? promptText.substring(0, 100) + '...' : promptText,
+            timestamp: event.timestamp || new Date().toISOString(),
+            type: 'user_instruction'
         };
-
-        // Add to PM root
-        if (!this.root) {
-            console.error('ActivityTree: No root node!');
-            return;
-        }
         
-        if (!this.root.data) {
-            console.error('ActivityTree: Root has no data!');
-            return;
-        }
+        // Add to session's user instructions
+        session.userInstructions.push(instruction);
         
-        if (!this.root.data.children) {
-            this.root.data.children = [];
+        // Keep only last 5 instructions to prevent memory bloat
+        if (session.userInstructions.length > 5) {
+            session.userInstructions = session.userInstructions.slice(-5);
         }
-        
-        console.log('ActivityTree: Adding TodoWrite node to root');
-        this.root.data.children.push(todoNode);
-
-        // Track this TodoWrite
-        this.todoWriteStack.push({
-            node: todoNode,
-            content: activeTodo.content
-        });
-
-        console.log('ActivityTree: Calling update with root:', this.root);
-        this.update(this.root);
-        console.log('ActivityTree: Update complete');
     }
 
     /**
-     * Process SubagentStart event
+     * Process TodoWrite event - attach TODOs to session and active agent
      */
-    processSubagentStart(event) {
-        // Look for agent_name in multiple places for compatibility
-        const agentName = event.agent_name || 
-                         event.data?.agent_name || 
-                         event.data?.agent_type || 
-                         event.agent_type ||  // Check direct agent_type field
-                         event.agent ||        // Check agent field
-                         'unknown';
-        const agentIcon = this.getAgentIcon(agentName);
-
-        // Create agent node
-        const agentNode = {
-            name: agentName,
-            type: 'agent',
-            icon: agentIcon,
+    processTodoWrite(event, session) {
+        let todos = event.todos || event.data?.todos || event.data || [];
+        
+        if (todos && typeof todos === 'object' && todos.todos) {
+            todos = todos.todos;
+        }
+        
+        if (!Array.isArray(todos) || todos.length === 0) {
+            return;
+        }
+
+        // Update session's todos directly for overall checklist view
+        session.todos = 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,
-            children: [],
-            _children: null,
-            eventId: event.id,
-            sessionId: event.session_id || event.data?.session_id
+            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;
 
-        // Find parent - either last TodoWrite or PM root
-        let parent = null;
-        if (this.todoWriteStack.length > 0) {
-            // Check if TodoWrite mentions this agent
-            const todoWrite = this.todoWriteStack[this.todoWriteStack.length - 1];
-            if (todoWrite.content && todoWrite.content.toLowerCase().includes(agentName.toLowerCase())) {
-                parent = todoWrite.node;
+        // 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 {
+            // Fall back to most recent active agent
+            const activeAgents = Array.from(session.agents.values())
+                .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) {
+                    targetAgent = allAgents[0];
+                }
             }
         }
 
-        if (!parent) {
-            parent = this.root.data;
+        // Create agent-specific TodoWrite tool
+        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
+            };
+            
+            // 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 (!parent.children) {
-            parent.children = [];
+    /**
+     * Process SubagentStart event
+     */
+    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;
+        
+        // Use session ID as unique agent identifier, or create unique ID
+        const agentId = agentSessionId || `agent-${Date.now()}-${Math.random()}`;
+        
+        // Check if agent already exists in this session
+        if (!session.agents.has(agentId)) {
+            const agent = {
+                id: agentId,
+                name: agentName,
+                type: 'agent',
+                icon: this.getAgentIcon(agentName),
+                timestamp: event.timestamp,
+                status: 'active',
+                tools: [],
+                sessionId: agentSessionId,
+                isPM: false
+            };
+            
+            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
         }
-        parent.children.push(agentNode);
-
-        // Track active agent
-        this.activeAgent = agentNode;
-        this.activeAgentStack.push(agentNode);
-
-        this.update(this.root);
     }
 
     /**
      * Process SubagentStop event
      */
-    processSubagentStop(event) {
-        // Mark agent as completed (look for session_id in multiple places)
-        const sessionId = event.session_id || event.data?.session_id;
-        if (this.activeAgent && this.activeAgent.sessionId === sessionId) {
-            this.activeAgent.status = 'completed';
-            this.activeAgentStack.pop();
-            this.activeAgent = this.activeAgentStack.length > 0 ? 
-                this.activeAgentStack[this.activeAgentStack.length - 1] : null;
+    processSubagentStop(event, session) {
+        const agentSessionId = event.session_id || event.data?.session_id;
+        
+        // Find and mark agent as completed
+        if (agentSessionId && session.agents.has(agentSessionId)) {
+            const agent = session.agents.get(agentSessionId);
+            agent.status = 'completed';
         }
-
-        this.update(this.root);
     }
 
     /**
      * Process tool use event
      */
-    processToolUse(event) {
-        // Get tool name from various possible locations
-        const toolName = event.tool_name || 
-                        event.data?.tool_name || 
-                        event.tool ||           // Check event.tool field
-                        event.data?.tool ||
-                        'unknown';
-        
-        const toolIcon = this.getToolIcon(toolName);
-        
-        // Get parameters from various possible locations
-        const params = event.tool_parameters || 
-                      event.data?.tool_parameters || 
-                      event.parameters ||          // Check event.parameters field
-                      event.data?.parameters ||
-                      {};
-
-        // Create tool node
-        const toolNode = {
+    processToolUse(event, session) {
+        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: toolIcon,
+            icon: this.getToolIcon(toolName),
             timestamp: event.timestamp,
             status: 'in_progress',
-            children: [],
-            _children: null,
+            params: params,
             eventId: event.id
         };
 
-        // Add file/command as child if applicable
-        if (toolName === 'Read' && params.file_path) {
-            toolNode.children.push({
-                name: params.file_path,
-                type: 'file',
-                icon: '📄',
-                timestamp: event.timestamp
-            });
-        } else if (toolName === 'Edit' && params.file_path) {
-            toolNode.children.push({
-                name: params.file_path,
-                type: 'file',
-                icon: '✏️',
-                timestamp: event.timestamp
-            });
-        } else if (toolName === 'Write' && params.file_path) {
-            toolNode.children.push({
-                name: params.file_path,
-                type: 'file',
-                icon: '💾',
-                timestamp: event.timestamp
-            });
-        } else if (toolName === 'Bash' && params.command) {
-            toolNode.children.push({
-                name: params.command.substring(0, 50) + (params.command.length > 50 ? '...' : ''),
-                type: 'command',
-                icon: '⚡',
-                timestamp: event.timestamp
-            });
-        } else if (toolName === 'WebFetch' && params.url) {
-            toolNode.children.push({
-                name: params.url,
-                type: 'url',
-                icon: '🌐',
-                timestamp: event.timestamp
-            });
+        // Find the appropriate agent to attach this tool to
+        let targetAgent = null;
+        
+        // First try to find by session ID
+        if (agentSessionId && session.agents.has(agentSessionId)) {
+            targetAgent = session.agents.get(agentSessionId);
+        } 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));
+            
+            if (activeAgents.length > 0) {
+                targetAgent = activeAgents[0];
+            } else {
+                // If no active agents, attach to session (PM level)
+                session.tools.push(tool);
+                return;
+            }
         }
 
-        // Find parent - active agent or PM root
-        let parent = this.activeAgent || this.root.data;
-        if (!parent.children) {
-            parent.children = [];
+        if (targetAgent) {
+            targetAgent.tools.push(tool);
         }
-        parent.children.push(toolNode);
-
-        this.update(this.root);
     }
 
     /**
      * Update tool status after completion
      */
-    updateToolStatus(event, status) {
-        // Find tool node by event ID and update status
-        const findAndUpdate = (node) => {
-            if (node.eventId === event.id) {
-                node.status = status;
-                return true;
-            }
-            if (node.children) {
-                for (let child of node.children) {
-                    if (findAndUpdate(child)) return true;
-                }
-            }
-            if (node._children) {
-                for (let child of node._children) {
-                    if (findAndUpdate(child)) return true;
+    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;
                 }
             }
             return false;
         };
 
-        findAndUpdate(this.root.data);
-        this.update(this.root);
+        // 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;
+    }
+
+    /**
+     * Render the linear tree view
+     */
+    renderTree() {
+        const treeContainer = document.getElementById('linear-tree');
+        if (!treeContainer) return;
+        
+        // Clear tree
+        treeContainer.innerHTML = '';
+        
+        // Add sessions directly (no project root)
+        const sortedSessions = Array.from(this.sessions.values())
+            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+        
+        for (let session of sortedSessions) {
+            if (this.selectedSessionFilter !== 'all' && this.selectedSessionFilter !== session.id) {
+                continue;
+            }
+            
+            const sessionElement = this.createSessionElement(session);
+            treeContainer.appendChild(sessionElement);
+        }
+        
+        // Session filtering is now handled by the main session selector via event listeners
+    }
+
+
+    /**
+     * Create session element
+     */
+    createSessionElement(session) {
+        const isExpanded = this.expandedSessions.has(session.id) || session.expanded;
+        
+        // Ensure timestamp is valid and format it consistently
+        let sessionTime;
+        try {
+            const sessionDate = session.timestamp instanceof Date ? session.timestamp : new Date(session.timestamp);
+            if (isNaN(sessionDate.getTime())) {
+                sessionTime = 'Invalid Date';
+                console.warn('ActivityTree: Invalid session timestamp:', session.timestamp);
+            } else {
+                sessionTime = sessionDate.toLocaleString();
+            }
+        } catch (error) {
+            sessionTime = 'Invalid Date';
+            console.error('ActivityTree: Error formatting session timestamp:', error, session.timestamp);
+        }
+        
+        const element = document.createElement('div');
+        element.className = 'tree-node session';
+        element.dataset.sessionId = session.id;
+        
+        const expandIcon = isExpanded ? '▼' : '▶';
+        const agentCount = session.agents ? session.agents.size : 0;
+        const todoCount = session.todos ? session.todos.length : 0;
+        const instructionCount = session.userInstructions ? session.userInstructions.length : 0;
+        
+        console.log(`ActivityTree: Rendering session ${session.id}: ${agentCount} agents, ${instructionCount} instructions, ${todoCount} todos at ${sessionTime}`);
+        
+        element.innerHTML = `
+            <div class="tree-node-content" onclick="window.activityTreeInstance.toggleSession('${session.id}')">
+                <span class="tree-expand-icon">${expandIcon}</span>
+                <span class="tree-icon">🎯</span>
+                <span class="tree-label">PM Session</span>
+                <span class="tree-meta">${sessionTime} • ${agentCount} agent(s) • ${instructionCount} instruction(s) • ${todoCount} todo(s)</span>
+            </div>
+            <div class="tree-children" style="display: ${isExpanded ? 'block' : 'none'}">
+                ${this.renderSessionContent(session)}
+            </div>
+        `;
+        
+        return element;
+    }
+
+    /**
+     * Render session content (user instructions, todos, agents, tools)
+     */
+    renderSessionContent(session) {
+        let html = '';
+        
+        // Render user instructions first
+        if (session.userInstructions && session.userInstructions.length > 0) {
+            for (let instruction of session.userInstructions.slice(-3)) { // Show last 3 instructions
+                html += this.renderUserInstructionElement(instruction, 1);
+            }
+        }
+        
+        // Render TODOs as checklist directly under session
+        if (session.todos && session.todos.length > 0) {
+            html += this.renderTodoChecklistElement(session.todos, 1);
+        }
+        
+        // Render session-level tools (PM tools)
+        if (session.tools && session.tools.length > 0) {
+            for (let tool of session.tools) {
+                // Show all tools including TodoWrite - both checklist and tool views are useful
+                html += this.renderToolElement(tool, 1);
+            }
+        }
+        
+        // Render agents
+        const agents = Array.from(session.agents.values())
+            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+        
+        for (let agent of agents) {
+            html += this.renderAgentElement(agent, 1);
+        }
+        
+        return html;
+    }
+
+    /**
+     * Render user instruction element
+     */
+    renderUserInstructionElement(instruction, level) {
+        const isSelected = this.selectedItem && this.selectedItem.type === 'instruction' && this.selectedItem.data.id === instruction.id;
+        const selectedClass = isSelected ? 'selected' : '';
+        
+        return `
+            <div class="tree-node user-instruction ${selectedClass}" data-level="${level}">
+                <div class="tree-node-content">
+                    <span class="tree-expand-icon"></span>
+                    <span class="tree-icon">💬</span>
+                    <span class="tree-label clickable" onclick="window.activityTreeInstance.selectItem(${this.escapeJson(instruction)}, 'instruction', event)">User: "${this.escapeHtml(instruction.preview)}"</span>
+                    <span class="tree-status status-active">instruction</span>
+                </div>
+            </div>
+        `;
+    }
+
+    /**
+     * Render TODO checklist element
+     */
+    renderTodoChecklistElement(todos, level) {
+        const checklistId = `checklist-${Date.now()}`;
+        const isExpanded = this.expandedTools.has(checklistId) !== false; // Default to expanded
+        const expandIcon = isExpanded ? '▼' : '▶';
+        
+        // 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++;
+        });
+        
+        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="tree-node todo-checklist" 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">TODOs</span>
+                    <span class="tree-params">${statusSummary}</span>
+                    <span class="tree-status status-active">checklist</span>
+                </div>
+        `;
+        
+        // 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 statusClass = `status-${todo.status}`;
+                const displayText = todo.status === 'in_progress' ? todo.activeForm : todo.content;
+                
+                html += `
+                    <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>';
+        }
+        
+        html += '</div>';
+        return html;
+    }
+
+    /**
+     * Render agent element
+     */
+    renderAgentElement(agent, level) {
+        const statusClass = agent.status === 'active' ? 'status-active' : 'status-completed';
+        const isExpanded = this.expandedAgents.has(agent.id);
+        const hasTools = agent.tools && agent.tools.length > 0;
+        const isSelected = this.selectedItem && this.selectedItem.type === 'agent' && this.selectedItem.data.id === agent.id;
+        
+        const expandIcon = hasTools ? (isExpanded ? '▼' : '▶') : '';
+        const selectedClass = isSelected ? 'selected' : '';
+        
+        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-status ${statusClass}">${agent.status}</span>
+                </div>
+        `;
+        
+        // Render tools under this agent
+        if (hasTools && isExpanded) {
+            html += '<div class="tree-children">';
+            for (let tool of agent.tools) {
+                html += this.renderToolElement(tool, level + 1);
+            }
+            html += '</div>';
+        }
+        
+        html += '</div>';
+        return html;
+    }
+
+    /**
+     * Render tool element (non-expandable, clickable to show data)
+     */
+    renderToolElement(tool, level) {
+        const statusClass = `status-${tool.status}`;
+        const params = this.getToolParams(tool);
+        const isSelected = this.selectedItem && this.selectedItem.type === 'tool' && this.selectedItem.data.id === tool.id;
+        const selectedClass = isSelected ? 'selected' : '';
+        
+        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-params">${params}</span>
+                    <span class="tree-status ${statusClass}">${tool.status}</span>
+                </div>
+            </div>
+        `;
+        
+        return html;
+    }
+
+    /**
+     * Get formatted tool parameters
+     */
+    getToolParams(tool) {
+        if (!tool.params) return '';
+        
+        if (tool.name === 'Read' && tool.params.file_path) {
+            return tool.params.file_path;
+        }
+        if (tool.name === 'Edit' && tool.params.file_path) {
+            return tool.params.file_path;
+        }
+        if (tool.name === 'Write' && tool.params.file_path) {
+            return tool.params.file_path;
+        }
+        if (tool.name === 'Bash' && tool.params.command) {
+            const cmd = tool.params.command;
+            return cmd.length > 50 ? cmd.substring(0, 50) + '...' : cmd;
+        }
+        if (tool.name === 'WebFetch' && tool.params.url) {
+            return tool.params.url;
+        }
+        
+        return '';
+    }
+
+    /**
+     * Get status icon for todo status
+     */
+    getStatusIcon(status) {
+        const icons = {
+            'pending': '⏸️',
+            'in_progress': '🔄',
+            'completed': '✅'
+        };
+        return icons[status] || '❓';
+    }
+
+    /**
+     * Get checkbox icon for todo checklist items
+     */
+    getCheckboxIcon(status) {
+        const icons = {
+            'pending': '⏳',
+            'in_progress': '🔄',
+            'completed': '✅'
+        };
+        return icons[status] || '❓';
     }
 
     /**
@@ -762,508 +974,606 @@ class ActivityTree {
     }
 
     /**
-     * Update the tree visualization
+     * Toggle session expansion
      */
-    update(source) {
-        console.log('ActivityTree: update() called with source:', source);
-        
-        // Check if D3 is available
-        if (typeof d3 === 'undefined') {
-            console.error('ActivityTree: Cannot update - D3.js not loaded');
-            return;
-        }
-        
-        // Check if visualization is ready
-        if (!this.svg || !this.treeGroup) {
-            console.warn('ActivityTree: Cannot update - SVG not initialized');
-            // Try to create visualization if container exists
-            if (this.container) {
-                console.log('Attempting to create visualization from update()');
-                this.createVisualization();
-                // Check again after creation attempt
-                if (!this.svg || !this.treeGroup) {
-                    console.error('Failed to create visualization in update()');
-                    return;
-                }
-            } else {
-                return;
-            }
-        }
-        
-        if (!this.treeLayout) {
-            console.warn('ActivityTree: Cannot update - tree layout not initialized');
-            // Try to create tree layout
-            if (typeof d3 !== 'undefined') {
-                this.treeLayout = d3.tree().size([this.height, this.width]);
-                console.log('Created tree layout in update()');
-            } else {
-                return;
-            }
-        }
-        
-        // Ensure source has valid data
-        if (!source || !source.data) {
-            console.error('ActivityTree: Invalid source in update()', source);
-            return;
-        }
-        
-        // Ensure we have a valid root
-        if (!this.root) {
-            console.error('ActivityTree: No root node available for update');
-            return;
+    toggleSession(sessionId) {
+        if (this.expandedSessions.has(sessionId)) {
+            this.expandedSessions.delete(sessionId);
+        } else {
+            this.expandedSessions.add(sessionId);
         }
         
-        // Compute the new tree layout
-        let treeData;
-        try {
-            treeData = this.treeLayout(this.root);
-        } catch (error) {
-            console.error('ActivityTree: Error computing tree layout:', error);
-            return;
+        // Update the session in the data structure
+        const session = this.sessions.get(sessionId);
+        if (session) {
+            session.expanded = this.expandedSessions.has(sessionId);
         }
         
-        const nodes = treeData.descendants();
-        const links = treeData.links();
-        
-        console.log(`ActivityTree: Updating tree with ${nodes.length} nodes`);
-        
-        // Check if we actually have the tree container
-        if (nodes.length === 1 && this.container) {
-            // Only root node exists, ensure container shows the tree
-            const svgElement = this.container.querySelector('svg');
-            if (!svgElement) {
-                console.warn('SVG element not found in container after update');
-            }
-        }
-
-        // Normalize for fixed-depth
-        nodes.forEach((d) => {
-            d.y = d.depth * 180;
-        });
-
-        // Update nodes
-        const node = this.treeGroup.selectAll('g.node')
-            .data(nodes, (d) => d.id || (d.id = ++this.nodeId));
-
-        // Enter new nodes
-        const nodeEnter = node.enter().append('g')
-            .attr('class', 'node')
-            .attr('transform', (d) => `translate(${source.y0},${source.x0})`)
-            .on('click', (event, d) => this.click(d));
-
-        // Add circles for nodes
-        nodeEnter.append('circle')
-            .attr('class', (d) => `node-circle ${d.data.type}`)
-            .attr('r', 1e-6)
-            .style('fill', (d) => d._children ? this.getNodeColor(d.data.type) : '#fff')
-            .style('stroke', (d) => this.getNodeColor(d.data.type));
-
-        // Add icons
-        nodeEnter.append('text')
-            .attr('class', 'node-icon')
-            .attr('dy', '.35em')
-            .attr('text-anchor', 'middle')
-            .style('font-size', '14px')
-            .text((d) => d.data.icon || '');
-
-        // Add labels
-        nodeEnter.append('text')
-            .attr('class', 'node-label')
-            .attr('dy', '.35em')
-            .attr('x', (d) => d.children || d._children ? -25 : 25)
-            .attr('text-anchor', (d) => d.children || d._children ? 'end' : 'start')
-            .text((d) => d.data.name)
-            .style('fill-opacity', 1e-6);
-
-        // Add tooltips
-        nodeEnter.on('mouseover', (event, d) => this.showTooltip(event, d))
-            .on('mouseout', () => this.hideTooltip());
-
-        // Update existing nodes
-        const nodeUpdate = nodeEnter.merge(node);
-
-        // Transition nodes to new position
-        nodeUpdate.transition()
-            .duration(this.duration)
-            .attr('transform', (d) => `translate(${d.y},${d.x})`);
-
-        nodeUpdate.select('circle.node-circle')
-            .attr('r', 10)
-            .style('fill', (d) => {
-                if (d.data.status === 'in_progress') {
-                    return this.getNodeColor(d.data.type);
-                }
-                return d._children ? this.getNodeColor(d.data.type) : '#fff';
-            })
-            .attr('class', (d) => {
-                let classes = `node-circle ${d.data.type}`;
-                if (d.data.status === 'in_progress') classes += ' pulsing';
-                if (d.data.status === 'failed') classes += ' failed';
-                return classes;
-            });
-
-        nodeUpdate.select('text.node-label')
-            .style('fill-opacity', 1);
-
-        // Remove exiting nodes
-        const nodeExit = node.exit().transition()
-            .duration(this.duration)
-            .attr('transform', (d) => `translate(${source.y},${source.x})`)
-            .remove();
-
-        nodeExit.select('circle')
-            .attr('r', 1e-6);
+        this.renderTree();
+    }
 
-        nodeExit.select('text')
-            .style('fill-opacity', 1e-6);
+    /**
+     * Expand all sessions
+     */
+    expandAllSessions() {
+        for (let sessionId of this.sessions.keys()) {
+            this.expandedSessions.add(sessionId);
+            const session = this.sessions.get(sessionId);
+            if (session) session.expanded = true;
+        }
+        this.renderTree();
+    }
 
-        // Update links
-        const link = this.treeGroup.selectAll('path.link')
-            .data(links, (d) => d.target.id);
+    /**
+     * Collapse all sessions
+     */
+    collapseAllSessions() {
+        this.expandedSessions.clear();
+        for (let session of this.sessions.values()) {
+            session.expanded = false;
+        }
+        this.renderTree();
+    }
 
-        // Enter new links
-        const linkEnter = link.enter().insert('path', 'g')
-            .attr('class', 'link')
-            .attr('d', (d) => {
-                const o = {x: source.x0, y: source.y0};
-                return this.diagonal({source: o, target: o});
-            });
 
-        // Update existing links
-        const linkUpdate = linkEnter.merge(link);
-
-        linkUpdate.transition()
-            .duration(this.duration)
-            .attr('d', this.diagonal);
-
-        // Remove exiting links
-        link.exit().transition()
-            .duration(this.duration)
-            .attr('d', (d) => {
-                const o = {x: source.x, y: source.y};
-                return this.diagonal({source: o, target: o});
-            })
-            .remove();
-
-        // Store old positions for transition
-        nodes.forEach((d) => {
-            d.x0 = d.x;
-            d.y0 = d.y;
-        });
+    /**
+     * Update statistics
+     */
+    updateStats() {
+        const totalNodes = this.countTotalNodes();
+        const activeNodes = this.countActiveNodes();
+        const maxDepth = this.calculateMaxDepth();
 
-        // Update breadcrumb on node click
-        this.updateBreadcrumb(source);
+        const nodeCountEl = document.getElementById('node-count');
+        const activeCountEl = document.getElementById('active-count');
+        const depthEl = document.getElementById('tree-depth');
+        
+        if (nodeCountEl) nodeCountEl.textContent = totalNodes;
+        if (activeCountEl) activeCountEl.textContent = activeNodes;
+        if (depthEl) depthEl.textContent = maxDepth;
+        
+        console.log(`ActivityTree: Stats updated - Nodes: ${totalNodes}, Active: ${activeNodes}, Depth: ${maxDepth}`);
     }
 
     /**
-     * Create diagonal path for links
+     * Count total nodes across all sessions
      */
-    diagonal(d) {
-        return `M ${d.source.y} ${d.source.x}
-                C ${(d.source.y + d.target.y) / 2} ${d.source.x},
-                  ${(d.source.y + d.target.y) / 2} ${d.target.x},
-                  ${d.target.y} ${d.target.x}`;
+    countTotalNodes() {
+        let count = 0; // No project root anymore
+        for (let session of this.sessions.values()) {
+            count += 1; // Session
+            count += session.agents.size; // Agents
+            
+            // Count user instructions
+            if (session.userInstructions) {
+                count += session.userInstructions.length;
+            }
+            
+            // Count todos
+            if (session.todos) {
+                count += session.todos.length;
+            }
+            
+            // Count session-level tools
+            if (session.tools) {
+                count += session.tools.length;
+            }
+            
+            // Count tools in agents
+            for (let agent of session.agents.values()) {
+                if (agent.tools) {
+                    count += agent.tools.length;
+                }
+            }
+        }
+        return count;
     }
 
     /**
-     * Handle node click for expand/collapse
+     * Count active nodes (in progress)
      */
-    click(d) {
-        if (d.children) {
-            d._children = d.children;
-            d.children = null;
-        } else {
-            d.children = d._children;
-            d._children = null;
+    countActiveNodes() {
+        let count = 0;
+        for (let session of this.sessions.values()) {
+            // Count active session
+            if (session.status === 'active') count++;
+            
+            // Count active todos
+            if (session.todos) {
+                for (let todo of session.todos) {
+                    if (todo.status === 'in_progress') count++;
+                }
+            }
+            
+            // Count session-level tools
+            if (session.tools) {
+                for (let tool of session.tools) {
+                    if (tool.status === 'in_progress') count++;
+                }
+            }
+            
+            // Count agents and their tools
+            for (let agent of session.agents.values()) {
+                if (agent.status === 'active') count++;
+                if (agent.tools) {
+                    for (let tool of agent.tools) {
+                        if (tool.status === 'in_progress') count++;
+                    }
+                }
+            }
         }
-        this.update(d);
-        this.updateBreadcrumb(d);
+        return count;
     }
 
     /**
-     * Get node color based on type
+     * Calculate maximum depth
      */
-    getNodeColor(type) {
-        const colors = {
-            'pm': '#4299e1',
-            'todowrite': '#48bb78',
-            'agent': '#ed8936',
-            'tool': '#9f7aea',
-            'file': '#38b2ac',
-            'command': '#f56565',
-            'url': '#4299e1'
-        };
-        return colors[type] || '#718096';
+    calculateMaxDepth() {
+        let maxDepth = 0; // No project root anymore
+        for (let session of this.sessions.values()) {
+            let sessionDepth = 1; // Session level (now root level)
+            
+            // Check session content (instructions, todos, tools)
+            if (session.userInstructions && session.userInstructions.length > 0) {
+                sessionDepth = Math.max(sessionDepth, 2); // Instruction level
+            }
+            
+            if (session.todos && session.todos.length > 0) {
+                sessionDepth = Math.max(sessionDepth, 3); // Todo checklist -> todo items
+            }
+            
+            if (session.tools && session.tools.length > 0) {
+                sessionDepth = Math.max(sessionDepth, 2); // Tool level
+            }
+            
+            // Check agents
+            for (let agent of session.agents.values()) {
+                if (agent.tools && agent.tools.length > 0) {
+                    sessionDepth = Math.max(sessionDepth, 3); // Tool level under agents
+                }
+            }
+            
+            maxDepth = Math.max(maxDepth, sessionDepth);
+        }
+        return maxDepth;
     }
 
     /**
-     * Show tooltip
+     * Toggle agent expansion
      */
-    showTooltip(event, d) {
-        const content = `
-            <strong>${d.data.name}</strong><br>
-            Type: ${d.data.type}<br>
-            ${d.data.timestamp ? `Time: ${new Date(d.data.timestamp).toLocaleTimeString()}` : ''}
-            ${d.data.status ? `<br>Status: ${d.data.status}` : ''}
-        `;
-
-        this.tooltip.transition()
-            .duration(200)
-            .style('opacity', .9);
-        
-        this.tooltip.html(content)
-            .style('left', (event.pageX + 10) + 'px')
-            .style('top', (event.pageY - 28) + 'px');
+    toggleAgent(agentId) {
+        if (this.expandedAgents.has(agentId)) {
+            this.expandedAgents.delete(agentId);
+        } else {
+            this.expandedAgents.add(agentId);
+        }
+        this.renderTree();
     }
-
+    
     /**
-     * Hide tooltip
+     * Toggle tool expansion (deprecated - tools are no longer expandable)
      */
-    hideTooltip() {
-        this.tooltip.transition()
-            .duration(500)
-            .style('opacity', 0);
+    toggleTool(toolId) {
+        // Tools are no longer expandable - this method is kept for compatibility
+        console.log('Tool expansion is disabled. Tools now show data in the left pane when clicked.');
     }
 
     /**
-     * Expand all nodes
+     * Toggle TODO checklist expansion
      */
-    expandAll() {
-        const expand = (d) => {
-            if (d._children) {
-                d.children = d._children;
-                d._children = null;
-            }
-            if (d.children) {
-                d.children.forEach(expand);
-            }
-        };
-        
-        expand(this.root);
-        this.update(this.root);
+    toggleTodoChecklist(checklistId) {
+        if (this.expandedTools.has(checklistId)) {
+            this.expandedTools.delete(checklistId);
+        } else {
+            this.expandedTools.add(checklistId);
+        }
+        this.renderTree();
     }
 
     /**
-     * Collapse all nodes
+     * Handle item click to show data in left pane
      */
-    collapseAll() {
-        const collapse = (d) => {
-            if (d.children) {
-                d._children = d.children;
-                d._children.forEach(collapse);
-                d.children = null;
-            }
-        };
+    selectItem(item, itemType, event) {
+        // Stop event propagation to prevent expand/collapse when clicking on label
+        if (event) {
+            event.stopPropagation();
+        }
         
-        this.root.children?.forEach(collapse);
-        this.update(this.root);
+        this.selectedItem = { data: item, type: itemType };
+        this.displayItemData(item, itemType);
+        this.renderTree(); // Re-render to show selection highlight
     }
 
     /**
-     * Reset zoom
+     * Display item data in left pane using simple display methods
      */
-    resetZoom() {
-        if (!this.svg) {
-            console.warn('Cannot reset zoom: SVG not initialized');
+    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;
         }
         
-        const zoom = d3.zoom()
-            .scaleExtent([0.1, 3])
-            .on('zoom', (event) => {
-                this.treeGroup.attr('transform', 
-                    `translate(${this.margin.left + event.transform.x},${this.margin.top + event.transform.y}) scale(${event.transform.k})`
-                );
-            });
-        
-        this.svg.transition()
-            .duration(750)
-            .call(zoom.transform, d3.zoomIdentity);
+        // 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;
+        }
         
-        // Reset the tree group transform
-        this.treeGroup.transition()
-            .duration(750)
-            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+        // 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}`;
+        }
     }
 
     /**
-     * Check if event is in time range
+     * Display TodoWrite data in the same clean format as Tools view
      */
-    isEventInTimeRange(timestamp) {
-        if (this.timeRange === 'all') return true;
+    displayTodoWriteData(item) {
+        const todos = item.params.todos || [];
+        const timestamp = this.formatTimestamp(item.timestamp);
+        
+        // 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++;
+        });
+        
+        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>
+            `;
+
+            // 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) => {
+                const statusIcon = this.getCheckboxIcon(todo.status);
+                const displayText = todo.status === 'in_progress' ? 
+                    (todo.activeForm || todo.content) : todo.content;
+                const statusClass = this.formatStatusClass(todo.status);
+                
+                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>
+                    </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>
+        `;
 
-        const now = new Date();
-        const diff = now - timestamp;
-        const minutes = diff / (1000 * 60);
+        html += '</div>';
+        
+        // Set the content directly
+        const container = document.getElementById('module-data-content');
+        if (container) {
+            container.innerHTML = html;
+        }
 
-        switch (this.timeRange) {
-            case '10min': return minutes <= 10;
-            case '30min': return minutes <= 30;
-            case 'hour': return minutes <= 60;
-            default: return true;
+        // Update module header 
+        const moduleHeader = document.querySelector('.module-data-header h5');
+        if (moduleHeader) {
+            moduleHeader.textContent = `📝 tool: TodoWrite`;
         }
     }
 
-    /**
-     * Filter events by time
-     */
-    filterEventsByTime() {
-        this.initializeTreeData();
+    // 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'
+        };
         
-        // Reprocess all events with new time filter
-        if (window.eventViewer && window.eventViewer.events) {
-            window.eventViewer.events.forEach(event => {
-                this.processEvent(event);
-            });
+        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 '';
         }
     }
 
     /**
-     * Update statistics
+     * Display agent data in a simple format
      */
-    updateStats() {
-        // Check if we have a valid root node
-        if (!this.root || !this.root.data) {
-            console.warn('ActivityTree: Cannot update stats - root not initialized');
-            // Set default values
-            const nodeCountEl = document.getElementById('node-count');
-            const activeCountEl = document.getElementById('active-count');
-            const depthEl = document.getElementById('tree-depth');
+    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">
+            `;
             
-            if (nodeCountEl) nodeCountEl.textContent = '1';
-            if (activeCountEl) activeCountEl.textContent = '0';
-            if (depthEl) depthEl.textContent = '0';
-            return;
+            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>
+            `;
         }
-        
-        const nodeCount = this.countNodes(this.root);
-        const activeCount = this.countActiveNodes(this.root.data);
-        const depth = this.getTreeDepth(this.root);
 
-        const nodeCountEl = document.getElementById('node-count');
-        const activeCountEl = document.getElementById('active-count');
-        const depthEl = document.getElementById('tree-depth');
-        
-        if (nodeCountEl) nodeCountEl.textContent = nodeCount;
-        if (activeCountEl) activeCountEl.textContent = activeCount;
-        if (depthEl) depthEl.textContent = depth;
-        
-        console.log(`ActivityTree: Stats updated - Nodes: ${nodeCount}, Active: ${activeCount}, Depth: ${depth}`);
+        container.innerHTML = html;
     }
 
     /**
-     * Count total nodes
+     * Display tool data in a simple format
      */
-    countNodes(node) {
-        let count = 1;
-        if (node.children) {
-            node.children.forEach(child => {
-                count += this.countNodes(child);
-            });
-        }
-        if (node._children) {
-            node._children.forEach(child => {
-                count += this.countNodes(child);
+    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>
+            `;
         }
-        return count;
+
+        container.innerHTML = html;
     }
 
     /**
-     * Count active nodes
+     * Display instruction data in a simple format
      */
-    countActiveNodes(node) {
-        let count = node.status === 'in_progress' ? 1 : 0;
-        if (node.children) {
-            node.children.forEach(child => {
-                count += this.countActiveNodes(child);
-            });
-        }
-        if (node._children) {
-            node._children.forEach(child => {
-                count += this.countActiveNodes(child);
-            });
-        }
-        return count;
+    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;
     }
 
     /**
-     * Get tree depth
+     * Display generic data for unknown types
      */
-    getTreeDepth(node) {
-        if (!node.children && !node._children) return 0;
-        
-        const children = node.children || node._children;
-        const depths = children.map(child => this.getTreeDepth(child));
-        return Math.max(...depths) + 1;
+    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;
     }
 
     /**
-     * Update breadcrumb
+     * Escape HTML for safe display
      */
-    updateBreadcrumb(node) {
-        const path = [];
-        let current = node;
-        
-        while (current) {
-            path.unshift(current.data.name);
-            current = current.parent;
-        }
-        
-        const breadcrumb = document.getElementById('activity-breadcrumb');
-        if (breadcrumb) {
-            breadcrumb.textContent = path.join(' > ');
-        }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
     }
 
     /**
-     * Highlight search results
+     * Reset zoom and pan to initial state
      */
-    highlightSearchResults() {
-        // Clear previous highlights
-        this.treeGroup.selectAll('.node-label')
-            .style('font-weight', 'normal')
-            .style('fill', '#2d3748');
-
-        if (!this.searchTerm) return;
-
-        // Highlight matching nodes
-        this.treeGroup.selectAll('.node-label')
-            .style('font-weight', d => {
-                return d.data.name.toLowerCase().includes(this.searchTerm) ? 'bold' : 'normal';
-            })
-            .style('fill', d => {
-                return d.data.name.toLowerCase().includes(this.searchTerm) ? '#e53e3e' : '#2d3748';
-            });
+    resetZoom() {
+        if (this.svg && this.zoom) {
+            this.svg.transition()
+                .duration(this.duration)
+                .call(this.zoom.transform, d3.zoomIdentity);
+        }
+    }
+    
+    /**
+     * Escape JSON for safe inclusion in HTML attributes
+     */
+    escapeJson(obj) {
+        return JSON.stringify(obj).replace(/'/g, '&apos;').replace(/"/g, '&quot;');
     }
 }
 
-// Make ActivityTree globally available immediately when module loads
+// Make ActivityTree globally available
 window.ActivityTree = ActivityTree;
 
 // Initialize when the Activity tab is selected
-// Only set up event listeners when DOM is ready, but expose class immediately
 const setupActivityTreeListeners = () => {
     let activityTree = null;
 
-    // Function to initialize the tree
     const initializeActivityTree = () => {
         if (!activityTree) {
             console.log('Creating new Activity Tree instance...');
             activityTree = new ActivityTree();
-            // Store instance globally for dashboard access
             window.activityTreeInstance = activityTree;
+            window.activityTree = () => activityTree; // For debugging
         }
         
-        // Ensure the container is ready and clear any text
-        const container = document.getElementById('activity-tree-container') || document.getElementById('activity-tree');
-        if (container && container.textContent && container.textContent.trim()) {
-            console.log('Clearing text from activity tree container before init:', container.textContent);
-            container.textContent = '';
-        }
-        
-        // Always try to initialize when tab becomes active, even if instance exists
-        // Small delay to ensure DOM is ready and tab is visible
         setTimeout(() => {
             console.log('Attempting to initialize Activity Tree visualization...');
             activityTree.initialize();
@@ -1278,11 +1588,9 @@ const setupActivityTreeListeners = () => {
             if (tabName === 'activity') {
                 console.log('Activity tab button clicked, initializing tree...');
                 initializeActivityTree();
-                // Also call renderWhenVisible and forceShow to ensure proper rendering
                 if (activityTree) {
                     setTimeout(() => {
                         activityTree.renderWhenVisible();
-                        // Force show to ensure SVG is visible
                         activityTree.forceShow();
                     }, 150);
                 }
@@ -1290,16 +1598,14 @@ const setupActivityTreeListeners = () => {
         });
     });
 
-    // Also listen for custom tab change events
+    // Listen for custom tab change events
     document.addEventListener('tabChanged', (e) => {
         if (e.detail && e.detail.newTab === 'activity') {
             console.log('Tab changed to activity, initializing tree...');
             initializeActivityTree();
-            // Also call renderWhenVisible and forceShow to ensure proper rendering
             if (activityTree) {
                 setTimeout(() => {
                     activityTree.renderWhenVisible();
-                    // Force show to ensure SVG is visible
                     activityTree.forceShow();
                 }, 150);
             }
@@ -1313,7 +1619,6 @@ const setupActivityTreeListeners = () => {
         initializeActivityTree();
     }
     
-    // Also check the tab panel directly
     const activityPanel = document.getElementById('activity-tab');
     if (activityPanel && activityPanel.classList.contains('active')) {
         console.log('Activity panel is active on load, initializing tree...');
@@ -1321,16 +1626,12 @@ const setupActivityTreeListeners = () => {
             initializeActivityTree();
         }
     }
-
-    // Export for debugging
-    window.activityTree = () => activityTree;  // Expose instance getter for debugging
 };
 
 // Set up listeners when DOM is ready
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', setupActivityTreeListeners);
 } else {
-    // DOM already loaded
     setupActivityTreeListeners();
 }