🧪 File Tree Tab Test Results

Test Instructions:

  1. Open the Claude MPM Dashboard at http://localhost:8765
  2. Click on the "File Tree" tab
  3. Verify what content is displayed

Expected Behavior:

✅ File Tree tab should show D3.js tree visualization
✅ Tree should show at least a session root node
✅ No event items should be visible
✅ Control buttons: Expand All, Collapse All, Reset Zoom
✅ Legend showing file/class/function/method indicators

Fixed Issues:

🔧 EventViewer now respects container ID passed to constructor
🔧 UIStateManager cleans up leaked event items from non-event tabs
🔧 CodeViewer aggressively removes foreign content from its container
🔧 Added tab activity checks to prevent rendering in inactive tabs

Console Commands for Testing:

// Check if File Tree tab is active
document.getElementById('claude-tree-tab').classList.contains('active')

// Check File Tree container content
document.getElementById('claude-tree-container').children.length

// Force render the tree
window.CodeViewer.show()

// Check for leaked event items
document.querySelectorAll('#claude-tree-container .event-item').length

Files Modified: