# 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