Claude Tree Tab Debug Test

This test will help diagnose why the Claude Tree tab is showing events instead of the D3.js tree.

Steps to debug:

1. Open the dashboard at http://localhost:8080
2. Open browser developer console
3. Run these commands in console:

// 1. Check if CodeViewer is initialized
console.log('CodeViewer exists?', window.CodeViewer);

// 2. Check the Claude Tree tab content
const claudeTreeTab = document.getElementById('claude-tree-tab');
console.log('Claude Tree Tab HTML:', claudeTreeTab?.innerHTML);

// 3. Check the Claude Tree container
const claudeTreeContainer = document.getElementById('claude-tree-container');
console.log('Claude Tree Container HTML:', claudeTreeContainer?.innerHTML);

// 4. Manually trigger CodeViewer
if (window.CodeViewer) {
    window.CodeViewer.show();
    console.log('CodeViewer.show() called');
    
    // Check container after show()
    setTimeout(() => {
        const container = document.getElementById('claude-tree-container');
        console.log('Container after show():', container?.innerHTML.substring(0, 500));
    }, 1000);
}

// 5. Check for event-item elements in Claude Tree tab
const eventItems = claudeTreeTab?.querySelectorAll('.event-item');
console.log('Event items found in Claude Tree tab:', eventItems?.length || 0);

// 6. Check what's rendering events
const allEventLists = document.querySelectorAll('.events-list');
console.log('All elements with class "events-list":', allEventLists.length);
allEventLists.forEach((el, i) => {
    console.log(`  List ${i}: ID="${el.id}", Parent ID="${el.parentElement?.id}"`);
});
    

Expected vs Actual:

• Expected: Claude Tree tab should contain a D3.js SVG tree visualization
• Actual: Claude Tree tab is showing event entries like "[hook] hook.user_prompt"

Hypothesis:

The issue might be one of:

• CodeViewer is not being initialized properly
• The container is being overwritten after CodeViewer renders
• There's a CSS issue causing wrong content to be displayed
• Events are being rendered into the wrong container