#!/bin/bash

# Test script to verify dashboard fixes
# Tests:
# 1. Session dropdown format (working_directory | session_id)
# 2. Activity tree D3 visualization

echo "================================"
echo "Dashboard Fix Verification Test"
echo "================================"
echo ""
echo "This script will help verify that the dashboard fixes are working correctly."
echo ""
echo "FIXES APPLIED:"
echo "1. ✅ Session dropdown format changed to: working_directory | session_id..."
echo "   - Modified: src/claude_mpm/dashboard/static/js/components/session-manager.js"
echo ""
echo "2. ✅ Activity Tree D3 visualization improvements:"
echo "   - Enhanced initialization logic with better debugging"
echo "   - Fixed D3 group creation and zoom behavior"
echo "   - Added proper CSS styles for node types"
echo "   - Added container dimensions and SVG display styles"
echo ""
echo "FILES MODIFIED:"
echo "- src/claude_mpm/dashboard/static/js/components/session-manager.js"
echo "- src/claude_mpm/dashboard/static/js/components/activity-tree.js"
echo "- src/claude_mpm/dashboard/static/css/activity.css"
echo ""
echo "================================"
echo "TO TEST THE FIXES:"
echo "================================"
echo ""
echo "1. Start the dashboard server:"
echo "   ./scripts/claude-mpm serve --port 8765"
echo ""
echo "2. Open the dashboard in your browser:"
echo "   http://localhost:8765"
echo ""
echo "3. Verify Session Dropdown:"
echo "   - Click on the Session dropdown"
echo "   - Format should be: /path/to/project | a29fc0b8..."
echo "   - NOT: a29fc0b8... | /path/to/project"
echo ""
echo "4. Verify Activity Tree:"
echo "   - Click on the 'Activity' tab"
echo "   - You should see a D3 tree visualization (not an event list)"
echo "   - Tree should show hierarchy: PM → Tool/TodoWrite → Agent → Tool → File"
echo "   - Nodes should be collapsible/expandable by clicking"
echo "   - Check browser console for any initialization messages"
echo ""
echo "5. Debug Information:"
echo "   - Open browser Developer Tools (F12)"
echo "   - Go to Console tab"
echo "   - Look for messages like:"
echo "     * 'Initializing Activity Tree visualization...'"
echo "     * 'Activity tree container found: ...'"
echo "     * 'Creating D3 visualization with dimensions: ...'"
echo "     * 'Activity Tree initialized successfully'"
echo ""
echo "6. If the tree doesn't appear:"
echo "   - Check console for errors about D3.js not being loaded"
echo "   - Verify network tab shows d3.v7.min.js loaded successfully"
echo "   - Try refreshing the page and clicking Activity tab again"
echo ""
echo "================================"
echo "Expected Results:"
echo "================================"
echo "✅ Session dropdown shows: /Users/masa/Projects/claude-mpm | a29fc0b8..."
echo "✅ Activity tab shows a proper D3 tree visualization"
echo "✅ Tree nodes are interactive (click to expand/collapse)"
echo "✅ Tree shows PM at the root with tools and agents as children"
echo "✅ Zoom controls work (scroll to zoom, drag to pan)"
echo ""