claude-mpm 4.24.0__py3-none-any.whl → 5.4.41__py3-none-any.whl

claude_mpm/dashboard/static/js/components/connection-debug.js

@@ -1,654 +0,0 @@
-/**
- * Connection Debug Panel
- * 
- * Provides detailed connection metrics and debugging tools
- * for troubleshooting connection issues.
- */
-
-class ConnectionDebugPanel {
-    constructor(connectionManager) {
-        this.connectionManager = connectionManager;
-        this.isVisible = false;
-        this.updateInterval = null;
-        
-        this.init();
-    }
-    
-    init() {
-        // Create debug panel HTML
-        this.createPanel();
-        
-        // Setup event listeners
-        this.setupEventListeners();
-        
-        // Start metric updates when visible
-        this.connectionManager.onStatusChange(() => {
-            if (this.isVisible) {
-                this.updateMetrics();
-            }
-        });
-    }
-    
-    createPanel() {
-        const panel = document.createElement('div');
-        panel.id = 'connection-debug-panel';
-        panel.className = 'connection-debug-panel';
-        panel.style.display = 'none';
-        
-        panel.innerHTML = `
-            <div class="debug-panel-header">
-                <h3>🔧 Connection Debug</h3>
-                <button id="close-debug-panel" class="btn-close">✕</button>
-            </div>
-            
-            <div class="debug-panel-content">
-                <!-- Connection Info -->
-                <div class="debug-section">
-                    <h4>Connection Info</h4>
-                    <div class="debug-info">
-                        <div class="info-row">
-                            <span class="info-label">Client ID:</span>
-                            <span id="debug-client-id" class="info-value">--</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Socket ID:</span>
-                            <span id="debug-socket-id" class="info-value">--</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">State:</span>
-                            <span id="debug-state" class="info-value">--</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Quality:</span>
-                            <span id="debug-quality" class="info-value">--</span>
-                        </div>
-                        <div class="info-row">
-                            <span class="info-label">Last Sequence:</span>
-                            <span id="debug-sequence" class="info-value">--</span>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Connection Metrics -->
-                <div class="debug-section">
-                    <h4>Metrics</h4>
-                    <div class="metrics-grid">
-                        <div class="metric-item">
-                            <span class="metric-value" id="debug-total-events">0</span>
-                            <span class="metric-label">Total Events</span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-value" id="debug-events-acked">0</span>
-                            <span class="metric-label">Acknowledged</span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-value" id="debug-buffered">0</span>
-                            <span class="metric-label">Buffered</span>
-                        </div>
-                        <div class="metric-item">
-                            <span class="metric-value" id="debug-reconnects">0</span>
-                            <span class="metric-label">Reconnects</span>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Connection Timeline -->
-                <div class="debug-section">
-                    <h4>Connection Timeline</h4>
-                    <div id="debug-timeline" class="debug-timeline">
-                        <!-- Timeline events will be added here -->
-                    </div>
-                </div>
-                
-                <!-- Debug Actions -->
-                <div class="debug-section">
-                    <h4>Debug Actions</h4>
-                    <div class="debug-actions">
-                        <button id="debug-force-reconnect" class="btn-action">Force Reconnect</button>
-                        <button id="debug-request-stats" class="btn-action">Request Stats</button>
-                        <button id="debug-clear-buffer" class="btn-action">Clear Buffer</button>
-                        <button id="debug-simulate-disconnect" class="btn-action">Simulate Disconnect</button>
-                        <button id="debug-export-logs" class="btn-action">Export Logs</button>
-                    </div>
-                </div>
-                
-                <!-- Network Tests -->
-                <div class="debug-section">
-                    <h4>Network Tests</h4>
-                    <div class="network-tests">
-                        <div class="test-row">
-                            <button id="test-latency" class="btn-test">Test Latency</button>
-                            <span id="latency-result" class="test-result">--</span>
-                        </div>
-                        <div class="test-row">
-                            <button id="test-throughput" class="btn-test">Test Throughput</button>
-                            <span id="throughput-result" class="test-result">--</span>
-                        </div>
-                        <div class="test-row">
-                            <button id="test-stability" class="btn-test">Test Stability</button>
-                            <span id="stability-result" class="test-result">--</span>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Event Log -->
-                <div class="debug-section">
-                    <h4>Recent Events</h4>
-                    <div id="debug-event-log" class="event-log">
-                        <!-- Recent events will be shown here -->
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        document.body.appendChild(panel);
-        
-        // Add styles
-        this.addStyles();
-    }
-    
-    addStyles() {
-        const style = document.createElement('style');
-        style.textContent = `
-            .connection-debug-panel {
-                position: fixed;
-                right: 20px;
-                top: 80px;
-                width: 400px;
-                max-height: 80vh;
-                background: white;
-                border-radius: 12px;
-                box-shadow: 0 8px 32px rgba(0,0,0,0.15);
-                z-index: 1001;
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-            }
-            
-            .debug-panel-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 16px;
-                background: linear-gradient(135deg, #667eea 0%, #4299e1 100%);
-                color: white;
-            }
-            
-            .debug-panel-header h3 {
-                margin: 0;
-                font-size: 16px;
-            }
-            
-            .btn-close {
-                background: rgba(255,255,255,0.2);
-                border: none;
-                color: white;
-                width: 28px;
-                height: 28px;
-                border-radius: 50%;
-                cursor: pointer;
-                font-size: 16px;
-                transition: background 0.2s;
-            }
-            
-            .btn-close:hover {
-                background: rgba(255,255,255,0.3);
-            }
-            
-            .debug-panel-content {
-                overflow-y: auto;
-                padding: 16px;
-                max-height: calc(80vh - 60px);
-            }
-            
-            .debug-section {
-                margin-bottom: 20px;
-                padding-bottom: 16px;
-                border-bottom: 1px solid #e2e8f0;
-            }
-            
-            .debug-section:last-child {
-                border-bottom: none;
-            }
-            
-            .debug-section h4 {
-                margin: 0 0 12px 0;
-                font-size: 14px;
-                color: #2d3748;
-                font-weight: 600;
-            }
-            
-            .debug-info {
-                background: #f7fafc;
-                padding: 12px;
-                border-radius: 8px;
-            }
-            
-            .info-row {
-                display: flex;
-                justify-content: space-between;
-                padding: 4px 0;
-                font-size: 13px;
-            }
-            
-            .info-label {
-                color: #718096;
-            }
-            
-            .info-value {
-                font-family: 'SF Mono', Monaco, monospace;
-                color: #2d3748;
-                font-weight: 500;
-            }
-            
-            .debug-actions {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 8px;
-            }
-            
-            .btn-action {
-                padding: 8px 12px;
-                background: #4299e1;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                font-size: 12px;
-                cursor: pointer;
-                transition: background 0.2s;
-            }
-            
-            .btn-action:hover {
-                background: #3182ce;
-            }
-            
-            .network-tests {
-                display: flex;
-                flex-direction: column;
-                gap: 8px;
-            }
-            
-            .test-row {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-            
-            .btn-test {
-                flex: 0 0 120px;
-                padding: 6px 12px;
-                background: #805ad5;
-                color: white;
-                border: none;
-                border-radius: 6px;
-                font-size: 12px;
-                cursor: pointer;
-            }
-            
-            .test-result {
-                flex: 1;
-                padding: 6px 12px;
-                background: #f7fafc;
-                border-radius: 6px;
-                font-size: 12px;
-                font-family: 'SF Mono', Monaco, monospace;
-            }
-            
-            .debug-timeline {
-                max-height: 150px;
-                overflow-y: auto;
-                background: #f7fafc;
-                padding: 8px;
-                border-radius: 8px;
-                font-size: 12px;
-            }
-            
-            .timeline-event {
-                padding: 4px 0;
-                border-bottom: 1px solid #e2e8f0;
-            }
-            
-            .timeline-event:last-child {
-                border-bottom: none;
-            }
-            
-            .timeline-time {
-                color: #718096;
-                font-size: 11px;
-            }
-            
-            .timeline-desc {
-                color: #2d3748;
-                margin-top: 2px;
-            }
-            
-            .event-log {
-                max-height: 200px;
-                overflow-y: auto;
-                background: #1a202c;
-                color: #e2e8f0;
-                padding: 12px;
-                border-radius: 8px;
-                font-family: 'SF Mono', Monaco, monospace;
-                font-size: 11px;
-            }
-            
-            .log-entry {
-                padding: 2px 0;
-            }
-            
-            .log-time {
-                color: #718096;
-            }
-            
-            .log-type {
-                color: #4299e1;
-                font-weight: 600;
-            }
-            
-            .log-data {
-                color: #cbd5e0;
-            }
-            
-            @media (max-width: 768px) {
-                .connection-debug-panel {
-                    right: 10px;
-                    left: 10px;
-                    width: auto;
-                }
-            }
-        `;
-        
-        document.head.appendChild(style);
-    }
-    
-    setupEventListeners() {
-        // Close button
-        document.getElementById('close-debug-panel').addEventListener('click', () => {
-            this.hide();
-        });
-        
-        // Debug actions
-        document.getElementById('debug-force-reconnect').addEventListener('click', () => {
-            this.forceReconnect();
-        });
-        
-        document.getElementById('debug-request-stats').addEventListener('click', () => {
-            this.requestStats();
-        });
-        
-        document.getElementById('debug-clear-buffer').addEventListener('click', () => {
-            this.clearBuffer();
-        });
-        
-        document.getElementById('debug-simulate-disconnect').addEventListener('click', () => {
-            this.simulateDisconnect();
-        });
-        
-        document.getElementById('debug-export-logs').addEventListener('click', () => {
-            this.exportLogs();
-        });
-        
-        // Network tests
-        document.getElementById('test-latency').addEventListener('click', () => {
-            this.testLatency();
-        });
-        
-        document.getElementById('test-throughput').addEventListener('click', () => {
-            this.testThroughput();
-        });
-        
-        document.getElementById('test-stability').addEventListener('click', () => {
-            this.testStability();
-        });
-    }
-    
-    show() {
-        const panel = document.getElementById('connection-debug-panel');
-        panel.style.display = 'flex';
-        this.isVisible = true;
-        
-        // Start metric updates
-        this.startMetricUpdates();
-        
-        // Initial update
-        this.updateMetrics();
-    }
-    
-    hide() {
-        const panel = document.getElementById('connection-debug-panel');
-        panel.style.display = 'none';
-        this.isVisible = false;
-        
-        // Stop metric updates
-        this.stopMetricUpdates();
-    }
-    
-    toggle() {
-        if (this.isVisible) {
-            this.hide();
-        } else {
-            this.show();
-        }
-    }
-    
-    startMetricUpdates() {
-        this.updateInterval = setInterval(() => {
-            this.updateMetrics();
-        }, 1000);
-    }
-    
-    stopMetricUpdates() {
-        if (this.updateInterval) {
-            clearInterval(this.updateInterval);
-            this.updateInterval = null;
-        }
-    }
-    
-    updateMetrics() {
-        const metrics = this.connectionManager.getMetrics();
-        const socket = this.connectionManager.socket;
-        
-        // Update connection info
-        document.getElementById('debug-client-id').textContent = metrics.clientId || '--';
-        document.getElementById('debug-socket-id').textContent = socket?.id || '--';
-        document.getElementById('debug-state').textContent = metrics.connectionState || '--';
-        document.getElementById('debug-quality').textContent = 
-            `${Math.round(metrics.connectionQuality * 100)}%`;
-        document.getElementById('debug-sequence').textContent = metrics.lastSequence || '0';
-        
-        // Update metrics
-        document.getElementById('debug-total-events').textContent = metrics.totalEvents || '0';
-        document.getElementById('debug-events-acked').textContent = metrics.eventsAcked || '0';
-        document.getElementById('debug-buffered').textContent = metrics.bufferedEvents || '0';
-        document.getElementById('debug-reconnects').textContent = metrics.totalReconnections || '0';
-    }
-    
-    addTimelineEvent(description) {
-        const timeline = document.getElementById('debug-timeline');
-        const event = document.createElement('div');
-        event.className = 'timeline-event';
-        
-        const now = new Date();
-        event.innerHTML = `
-            <div class="timeline-time">${now.toLocaleTimeString()}</div>
-            <div class="timeline-desc">${description}</div>
-        `;
-        
-        timeline.insertBefore(event, timeline.firstChild);
-        
-        // Keep only last 20 events
-        while (timeline.children.length > 20) {
-            timeline.removeChild(timeline.lastChild);
-        }
-    }
-    
-    addLogEntry(type, data) {
-        const log = document.getElementById('debug-event-log');
-        const entry = document.createElement('div');
-        entry.className = 'log-entry';
-        
-        const now = new Date();
-        entry.innerHTML = `
-            <span class="log-time">${now.toLocaleTimeString()}</span>
-            <span class="log-type">${type}</span>
-            <span class="log-data">${JSON.stringify(data)}</span>
-        `;
-        
-        log.insertBefore(entry, log.firstChild);
-        
-        // Keep only last 50 entries
-        while (log.children.length > 50) {
-            log.removeChild(log.lastChild);
-        }
-    }
-    
-    // Debug actions
-    forceReconnect() {
-        this.addTimelineEvent('Force reconnect initiated');
-        if (this.connectionManager.socket) {
-            this.connectionManager.socket.disconnect();
-            setTimeout(() => {
-                this.connectionManager.socket.connect();
-            }, 100);
-        }
-    }
-    
-    requestStats() {
-        this.addTimelineEvent('Requesting connection stats');
-        if (this.connectionManager.socket) {
-            this.connectionManager.socket.emit('get_connection_stats');
-        }
-    }
-    
-    clearBuffer() {
-        this.addTimelineEvent('Clearing event buffer');
-        this.connectionManager.eventBuffer = [];
-        localStorage.removeItem('claude_mpm_event_buffer');
-        this.updateMetrics();
-    }
-    
-    simulateDisconnect() {
-        this.addTimelineEvent('Simulating disconnect');
-        if (this.connectionManager.socket) {
-            this.connectionManager.socket.disconnect();
-        }
-    }
-    
-    exportLogs() {
-        const logs = {
-            metrics: this.connectionManager.getMetrics(),
-            timeline: [],
-            events: []
-        };
-        
-        // Collect timeline events
-        const timeline = document.getElementById('debug-timeline');
-        Array.from(timeline.children).forEach(child => {
-            logs.timeline.push(child.textContent.trim());
-        });
-        
-        // Collect event log
-        const eventLog = document.getElementById('debug-event-log');
-        Array.from(eventLog.children).forEach(child => {
-            logs.events.push(child.textContent.trim());
-        });
-        
-        // Download as JSON
-        const blob = new Blob([JSON.stringify(logs, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `connection-debug-${Date.now()}.json`;
-        a.click();
-        URL.revokeObjectURL(url);
-        
-        this.addTimelineEvent('Logs exported');
-    }
-    
-    // Network tests
-    async testLatency() {
-        const resultEl = document.getElementById('latency-result');
-        resultEl.textContent = 'Testing...';
-        
-        const start = Date.now();
-        this.connectionManager.socket.emit('ping');
-        
-        // Wait for pong
-        const pongHandler = () => {
-            const latency = Date.now() - start;
-            resultEl.textContent = `${latency}ms`;
-            this.connectionManager.socket.off('pong', pongHandler);
-            this.addTimelineEvent(`Latency test: ${latency}ms`);
-        };
-        
-        this.connectionManager.socket.on('pong', pongHandler);
-        
-        // Timeout after 5 seconds
-        setTimeout(() => {
-            this.connectionManager.socket.off('pong', pongHandler);
-            if (resultEl.textContent === 'Testing...') {
-                resultEl.textContent = 'Timeout';
-            }
-        }, 5000);
-    }
-    
-    async testThroughput() {
-        const resultEl = document.getElementById('throughput-result');
-        resultEl.textContent = 'Testing...';
-        
-        // Send 100 events rapidly
-        const start = Date.now();
-        let received = 0;
-        
-        const handler = () => {
-            received++;
-            if (received === 100) {
-                const duration = (Date.now() - start) / 1000;
-                const throughput = Math.round(100 / duration);
-                resultEl.textContent = `${throughput} evt/s`;
-                this.addTimelineEvent(`Throughput test: ${throughput} events/sec`);
-            }
-        };
-        
-        this.connectionManager.socket.on('test_response', handler);
-        
-        for (let i = 0; i < 100; i++) {
-            this.connectionManager.socket.emit('test_event', { index: i });
-        }
-        
-        // Cleanup after 10 seconds
-        setTimeout(() => {
-            this.connectionManager.socket.off('test_response', handler);
-            if (received < 100) {
-                resultEl.textContent = `${received}/100 received`;
-            }
-        }, 10000);
-    }
-    
-    async testStability() {
-        const resultEl = document.getElementById('stability-result');
-        resultEl.textContent = 'Testing (30s)...';
-        
-        let disconnects = 0;
-        let reconnects = 0;
-        const startMetrics = { ...this.connectionManager.metrics };
-        
-        // Monitor for 30 seconds
-        setTimeout(() => {
-            const endMetrics = this.connectionManager.metrics;
-            disconnects = endMetrics.totalConnections - startMetrics.totalConnections;
-            
-            if (disconnects === 0) {
-                resultEl.textContent = 'Stable ✓';
-            } else {
-                resultEl.textContent = `${disconnects} drops`;
-            }
-            
-            this.addTimelineEvent(`Stability test: ${disconnects} disconnections`);
-        }, 30000);
-    }
-}
-
-// Export for use
-export { ConnectionDebugPanel };