<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude MPM Socket.IO Dashboard</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHJ4PSI2IiBmaWxsPSIjNDI5OWUxIi8+CiAgPHRleHQgeD0iMTYiIHk9IjIxIiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5NUE08L3RleHQ+Cjwvc3ZnPgo=">
    
    <!-- External Dependencies -->
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    
    <!-- Syntax Highlighting - Prism.js -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="/static/css/dashboard.css">
    
    <!-- Additional styles for file operations -->
    <style>
        .file-item {
            background: white;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 8px;
            border-left: 4px solid #4299e1;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .file-item:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transform: translateX(2px);
        }
        
        .file-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .file-icon {
            font-size: 16px;
            min-width: 20px;
        }
        
        .file-path {
            flex: 1;
            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
            font-size: 13px;
            color: #2d3748;
            word-break: break-all;
        }
        
        .file-timestamp {
            font-size: 12px;
            color: #718096;
        }
        
        .file-summary {
            font-size: 12px;
            color: #4a5568;
            margin-left: 28px;
        }
        
        .operation-item {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 8px;
        }
        
        .operation-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }
        
        .operation-icon {
            font-size: 14px;
            min-width: 16px;
        }
        
        .operation-type {
            font-weight: 600;
            color: #2d3748;
        }
        
        .operation-timestamp {
            margin-left: auto;
            font-size: 11px;
            color: #718096;
        }
        
        .operation-details {
            font-size: 12px;
            color: #4a5568;
            line-height: 1.4;
        }
        
        .file-details {
            background: white;
            border-radius: 6px;
            padding: 15px;
        }
        
        .file-path-display {
            font-size: 14px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .operations-list {
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header Section -->
        <div class="header">
            <!-- Row 1: Title, Status, Metrics -->
            <div class="header-row">
                <div class="header-title">
                    <h1>🚀 Claude MPM Monitor</h1>
                    <div id="connection-status" class="status-badge status-disconnected">
                        <span>●</span> Disconnected
                    </div>
                </div>
                <div class="metrics-widget">
                    <div class="metric-mini">
                        <div class="metric-mini-value" id="total-events">0</div>
                        <div class="metric-mini-label">Events</div>
                    </div>
                    <div class="metric-mini">
                        <div class="metric-mini-value" id="events-per-minute">0</div>
                        <div class="metric-mini-label">Per Min</div>
                    </div>
                    <div class="metric-mini">
                        <div class="metric-mini-value" id="unique-types">0</div>
                        <div class="metric-mini-label">Types</div>
                    </div>
                    <div class="metric-mini">
                        <div class="metric-mini-value" id="error-count">0</div>
                        <div class="metric-mini-label">Errors</div>
                    </div>
                </div>
            </div>
            
            <!-- Row 2: Main Controls (Always Visible) -->
            <div class="header-row main-controls">
                <div class="session-group">
                    <label>Session:</label>
                    <select id="session-select" class="session-select">
                        <option value="">All Sessions</option>
                    </select>
                </div>
                <div class="working-dir-group">
                    <label>Working Dir:</label>
                    <div class="working-dir-display">
                        <span id="working-dir-path" class="working-dir-path" title="Click to browse files • Shift+Click to change directory">/Users/masa/Projects/claude-mpm</span>
                        <button id="change-dir-btn" class="btn-icon" title="Change working directory">📁</button>
                    </div>
                </div>
                <div class="action-buttons">
                    <button id="export-btn" class="btn-success">Export</button>
                </div>
                <div class="connection-toggle">
                    <button id="connection-toggle-btn" class="btn-secondary">Connection Settings</button>
                </div>
            </div>
            
            <!-- Row 3: Connection Controls (Hidden by Default) -->
            <div class="header-row connection-controls-row" id="connection-controls-row" style="display: none;">
                <div class="connection-controls">
                    <button id="connect-btn">Connect</button>
                    <button id="disconnect-btn" class="btn-secondary">Disconnect</button>
                    <input type="text" id="port-input" value="8765" placeholder="Port">
                    <label>Session:</label>
                </div>
            </div>
        </div>
        
        <!-- Main Content Area -->
        <div class="events-wrapper">
            <!-- Split container for module viewer and tabbed content -->
            <div class="split-container" id="normal-view">
                <!-- Left: Module Viewer -->
                <div class="module-viewer">
                    <!-- Single pane layout: Structured Data with collapsible JSON -->
                    <div class="module-panes" id="module-content">
                        <!-- Data Pane -->
                        <div class="module-data-pane">
                            <div class="module-data-header">
                                <h5>📊 Structured Data</h5>
                            </div>
                            <div class="module-data-content" id="module-data-content">
                                <div class="module-empty">
                                    <p>Click on an event to view structured data</p>
                                    <p class="module-hint">Data is organized by event type</p>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                <!-- Right: Tabbed Content -->
                <div class="events-container">
                    <!-- Tab Navigation -->
                    <div class="tab-nav">
                        <button class="tab-button active">📊 Events</button>
                        <button class="tab-button">🤖 Agents</button>
                        <button class="tab-button">🔧 Tools</button>
                        <button class="tab-button">📁 Files</button>
                    </div>
                    
                    <!-- Events Tab -->
                    <div class="tab-content active" id="events-tab">
                        <div class="tab-filters">
                            <input type="text" id="events-search-input" placeholder="Search events...">
                            <select id="events-type-filter">
                                <option value="">All Events</option>
                                <!-- Event types will be dynamically populated from actual event data -->
                            </select>
                        </div>
                        <div class="events-list" id="events-list">
                            <div class="no-events">
                                Connect to Socket.IO server to see events...
                            </div>
                        </div>
                    </div>
                    
                    <!-- Agents Tab -->
                    <div class="tab-content" id="agents-tab">
                        <div class="tab-filters">
                            <input type="text" id="agents-search-input" placeholder="Search agents...">
                            <select id="agents-type-filter">
                                <option value="">All Agents</option>
                                <option value="research">Research</option>
                                <option value="engineer">Engineer</option>
                                <option value="pm">Project Manager</option>
                                <option value="ops">Operations</option>
                            </select>
                        </div>
                        <div class="events-list" id="agents-list">
                            <div class="no-events">
                                No agent events found...
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tools Tab -->
                    <div class="tab-content" id="tools-tab">
                        <div class="tab-filters">
                            <input type="text" id="tools-search-input" placeholder="Search tools...">
                            <select id="tools-type-filter">
                                <option value="">All Tools</option>
                                <option value="Read">Read</option>
                                <option value="Write">Write</option>
                                <option value="Edit">Edit</option>
                                <option value="Bash">Bash</option>
                                <option value="Grep">Grep</option>
                                <option value="Glob">Glob</option>
                            </select>
                        </div>
                        <div class="events-list" id="tools-list">
                            <div class="no-events">
                                No tool events found...
                            </div>
                        </div>
                    </div>
                    
                    <!-- Files Tab -->
                    <div class="tab-content" id="files-tab">
                        <div class="tab-filters">
                            <input type="text" id="files-search-input" placeholder="Search files...">
                            <select id="files-type-filter">
                                <option value="">All Operations</option>
                                <option value="read">Read</option>
                                <option value="write">Write</option>
                                <option value="edit">Edit</option>
                                <option value="search">Search</option>
                            </select>
                        </div>
                        <div class="events-list" id="files-list">
                            <div class="no-events">
                                No file operations found...
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <div class="footer">
        <div class="footer-content">
            <div class="footer-item">
                <span class="footer-label">Session:</span>
                <span class="footer-value" id="footer-session">All Sessions</span>
            </div>
            <span class="footer-divider">|</span>
            <div class="footer-item">
                <span class="footer-label">Directory:</span>
                <span class="footer-value" id="footer-working-dir">Loading...</span>
            </div>
            <span class="footer-divider">|</span>
            <div class="footer-item">
                <span class="footer-label">Branch:</span>
                <span class="footer-value" id="footer-git-branch">Unknown</span>
            </div>
        </div>
    </div>
    
    <!-- JavaScript Modules -->
    <!-- Core infrastructure -->
    <script src="/static/js/socket-client.js"></script>
    
    <!-- Existing components -->
    <script src="/static/js/components/event-viewer.js"></script>
    <script src="/static/js/components/module-viewer.js"></script>
    <script src="/static/js/components/session-manager.js"></script>
    
    <!-- New modular components -->
    <script src="/static/js/components/socket-manager.js"></script>
    <script src="/static/js/components/agent-inference.js"></script>
    <script src="/static/js/components/ui-state-manager.js"></script>
    <script src="/static/js/components/working-directory.js"></script>
    <script src="/static/js/components/file-tool-tracker.js"></script>
    <script src="/static/js/components/event-processor.js"></script>
    <script src="/static/js/components/export-manager.js"></script>
    
    <!-- Main dashboard coordinator -->
    <script src="/static/js/dashboard.js"></script>
</body>
</html>