final/static/js/debugConsoleView.js

import apiClient from './apiClient.js';

class DebugConsoleView {
    constructor(section, wsClient) {
        this.section = section;
        this.wsClient = wsClient;
        this.healthInfo = section.querySelector('[data-health-info]');
        this.wsInfo = section.querySelector('[data-ws-info]');
        this.requestLogBody = section.querySelector('[data-request-log]');
        this.errorLogBody = section.querySelector('[data-error-log]');
        this.wsLogBody = section.querySelector('[data-ws-log]');
        this.refreshButton = section.querySelector('[data-refresh-health]');
    }

    init() {
        this.refresh();
        if (this.refreshButton) {
            this.refreshButton.addEventListener('click', () => this.refresh());
        }
        apiClient.onLog(() => this.renderRequestLogs());
        apiClient.onError(() => this.renderErrorLogs());
        this.wsClient.onStatusChange(() => this.renderWsLogs());
        this.wsClient.onMessage(() => this.renderWsLogs());
    }

    async refresh() {
        const [health, providers] = await Promise.all([apiClient.getHealth(), apiClient.getProviders()]);
        
        // Update health info
        if (this.healthInfo) {
            if (health.ok) {
                const data = health.data || {};
                this.healthInfo.innerHTML = `
                    <p><strong>Status:</strong> <span class="text-success">${data.status || 'OK'}</span></p>
                    <p><strong>Uptime:</strong> ${data.uptime || 'N/A'}</p>
                    <p><strong>Version:</strong> ${data.version || 'N/A'}</p>
                `;
            } else {
                this.healthInfo.innerHTML = `<div class="inline-message inline-error">${health.error || 'Unavailable'}</div>`;
            }
        }
        
        // Update WebSocket info
        if (this.wsInfo) {
            const status = this.wsClient.status || 'disconnected';
            const events = this.wsClient.getEvents();
            this.wsInfo.innerHTML = `
                <p><strong>Status:</strong> <span class="${status === 'connected' ? 'text-success' : 'text-danger'}">${status}</span></p>
                <p><strong>Events:</strong> ${events.length}</p>
            `;
        }
        
        this.renderRequestLogs();
        this.renderErrorLogs();
        this.renderWsLogs();
    }

    renderRequestLogs() {
        if (!this.requestLogBody) return;
        const logs = apiClient.getLogs();
        this.requestLogBody.innerHTML = logs
            .slice(-12)
            .reverse()
            .map(
                (log) => `
                <tr>
                    <td>${log.time}</td>
                    <td>${log.method}</td>
                    <td>${log.endpoint}</td>
                    <td>${log.status}</td>
                    <td>${log.duration}ms</td>
                </tr>
            `,
            )
            .join('');
    }

    renderErrorLogs() {
        if (!this.errorLogBody) return;
        const logs = apiClient.getErrors();
        if (!logs.length) {
            this.errorLogBody.innerHTML = '<tr><td colspan="3">No recent errors.</td></tr>';
            return;
        }
        this.errorLogBody.innerHTML = logs
            .slice(-8)
            .reverse()
            .map(
                (log) => `
                <tr>
                    <td>${log.time}</td>
                    <td>${log.endpoint}</td>
                    <td>${log.message}</td>
                </tr>
            `,
            )
            .join('');
    }

    renderWsLogs() {
        if (!this.wsLogBody) return;
        const events = this.wsClient.getEvents();
        if (!events.length) {
            this.wsLogBody.innerHTML = '<tr><td colspan="3">No WebSocket events yet.</td></tr>';
            return;
        }
        this.wsLogBody.innerHTML = events
            .slice(-12)
            .reverse()
            .map(
                (event) => `
                <tr>
                    <td>${event.time}</td>
                    <td>${event.type}</td>
                    <td>${event.messageType || event.status || event.details || ''}</td>
                </tr>
            `,
            )
            .join('');
    }
}

export default DebugConsoleView;