components/system-status.js

class SystemStatus extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .status-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                    gap: 1.5rem;
                }
                
                .status-item {
                    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
                    border-radius: 12px;
                    padding: 1.5rem;
                    border: 1px solid;
                    display: flex;
                    flex-direction: column;
                    transition: all 0.3s ease;
                }
                
                .status-item:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                }
                
                .status-item.operational {
                    border-color: rgba(16, 185, 129, 0.5);
                }
                
                .status-item.degraded {
                    border-color: rgba(245, 158, 11, 0.5);
                }
                
                .status-item.offline {
                    border-color: rgba(239, 68, 68, 0.5);
                }
                
                .status-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                }
                
                .status-title {
                    font-size: 1.125rem;
                    font-weight: 600;
                }
                
                .status-badge {
                    padding: 0.25rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                
                .status-operational .status-badge {
                    background: rgba(16, 185, 129, 0.2);
                    color: #10b981;
                }
                
                .status-degraded .status-badge {
                    background: rgba(245, 158, 11, 0.2);
                    color: #f59e0b;
                }
                
                .status-offline .status-badge {
                    background: rgba(239, 68, 68, 0.2);
                    color: #ef4444;
                }
                
                .status-content {
                    flex: 1;
                }
                
                .status-description {
                    color: #94a3b8;
                    font-size: 0.875rem;
                    line-height: 1.5;
                    margin-bottom: 1rem;
                }
                
                .status-metrics {
                    display: flex;
                    gap: 1rem;
                    margin-bottom: 1rem;
                }
                
                .metric {
                    flex: 1;
                    text-align: center;
                    padding: 0.5rem;
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 6px;
                }
                
                .metric-value {
                    font-size: 1.5rem;
                    font-weight: 700;
                    margin-bottom: 0.25rem;
                }
                
                .metric-label {
                    font-size: 0.75rem;
                    color: #94a3b8;
                }
                
                .status-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-top: 1rem;
                    border-top: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .uptime {
                    font-size: 0.875rem;
                    color: #94a3b8;
                }
                
                .details-btn {
                    padding: 0.5rem 1rem;
                    border-radius: 6px;
                    font-size: 0.875rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    border: 1px solid;
                    background: transparent;
                    color: inherit;
                }
                
                .status-operational .details-btn {
                    border-color: rgba(16, 185, 129, 0.5);
                    color: #10b981;
                }
                
                .status-degraded .details-btn {
                    border-color: rgba(245, 158, 11, 0.5);
                    color: #f59e0b;
                }
                
                .status-offline .details-btn {
                    border-color: rgba(239, 68, 68, 0.5);
                    color: #ef4444;
                }
                
                .details-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                }
                
                @media (max-width: 768px) {
                    .status-container {
                        grid-template-columns: 1fr;
                    }
                }
            </style>
            
            <div class="status-container">
                <div class="status-item operational" data-system="orchestrator">
                    <div class="status-header">
                        <h3 class="status-title">Orchestrator</h3>
                        <span class="status-badge">Operational</span>
                    </div>
                    <div class="status-content">
                        <p class="status-description">
                            The Brain - Local LLM orchestrator responsible for verification, scoring, and routing decisions.
                        </p>
                        <div class="status-metrics">
                            <div class="metric">
                                <div class="metric-value" id="candidates-scored">1,248</div>
                                <div class="metric-label">Candidates Scored</div>
                            </div>
                            <div class="metric">
                                <div class="metric-value" id="avg-response">42ms</div>
                                <div class="metric-label">Avg Response</div>
                            </div>
                        </div>
                    </div>
                    <div class="status-footer">
                        <span class="uptime">Uptime: 99.8%</span>
                        <button class="details-btn">View Details</button>
                    </div>
                </div>
                
                <div class="status-item operational" data-system="workers">
                    <div class="status-header">
                        <h3 class="status-title">Worker Pool</h3>
                        <span class="status-badge">Operational</span>
                    </div>
                    <div class="status-content">
                        <p class="status-description">
                            The Muscle - Cloud LLM workers generating parallel code with stateless execution.
                        </p>
                        <div class="status-metrics">
                            <div class="metric">
                                <div class="metric-value" id="active-workers">8/10</div>
                                <div class="metric-label">Active Workers</div>
                            </div>
                            <div class="metric">
                                <div class="metric-value" id="tasks-completed">987</div>
                                <div class="metric-label">Tasks Completed</div>
                            </div>
                        </div>
                    </div>
                    <div class="status-footer">
                        <span class="uptime">Load: 65%</span>
                        <button class="details-btn">View Details</button>
                    </div>
                </div>
                
                <div class="status-item operational" data-system="redis">
                    <div class="status-header">
                        <h3 class="status-title">Redis Queues</h3>
                        <span class="status-badge">Operational</span>
                    </div>
                    <div class="status-content">
                        <p class="status-description">
                            The Nervous System - Pub/Sub message queues handling async decoupling between components.
                        </p>
                        <div class="status-metrics">
                            <div class="metric">
                                <div class="metric-value" id="queue-size">87</div>
                                <div class="metric-label">Queue Size</div>
                            </div>
                            <div class="metric">
                                <div class="metric-value" id="msg-rate">342/s</div>
                                <div class="metric-label">Msg Rate</div>
                            </div>
                        </div>
                    </div>
                    <div class="status-footer">
                        <span class="uptime">Latency: &lt;5ms</span>
                        <button class="details-btn">View Details</button>
                    </div>
                </div>
                
                <div class="status-item degraded status-degraded" data-system="neo4j">
                    <div class="status-header">
                        <h3 class="status-title">Neo4j Graph</h3>
                        <span class="status-badge">Degraded</span>
                    </div>
                    <div class="status-content">
                        <p class="status-description">
                            The Long-Term Memory - Verification graph storage experiencing higher than normal latency.
                        </p>
                        <div class="status-metrics">
                            <div class="metric">
                                <div class="metric-value" id="graph-nodes">1,247</div>
                                <div class="metric-label">Total Nodes</div>
                            </div>
                            <div class="metric">
                                <div class="metric-value" id="query-latency">128ms</div>
                                <div class="metric-label">Query Latency</div>
                            </div>
                        </div>
                    </div>
                    <div class="status-footer">
                        <span class="uptime">Performance: 85%</span>
                        <button class="details-btn">View Details</button>
                    </div>
                </div>
            </div>
        `;
        
        // Add event listeners
        setTimeout(() => {
            this.shadowRoot.querySelectorAll('.details-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const statusItem = e.target.closest('.status-item');
                    const system = statusItem.getAttribute('data-system');
                    const status = statusItem.classList.contains('operational') ? 'operational' : 
                                  statusItem.classList.contains('degraded') ? 'degraded' : 'offline';
                    this.showSystemDetails(system, status);
                });
            });
            
            // Initialize metrics
            this.initializeMetrics();
            
            // Update metrics periodically
            setInterval(() => {
                this.updateMetrics();
            }, 3000);
            
            // Replace feather icons if needed
            if (window.feather) {
                feather.replace();
            }
        }, 100);
    }
    
    initializeMetrics() {
        const metrics = {
            'candidates-scored': 1248 + Math.floor(Math.random() * 50),
            'avg-response': Math.floor(Math.random() * 20 + 35) + 'ms',
            'active-workers': `${Math.floor(Math.random() * 3 + 8)}/10`,
            'tasks-completed': 987 + Math.floor(Math.random() * 100),
            'queue-size': Math.floor(Math.random() * 100),
            'msg-rate': Math.floor(Math.random() * 100 + 300) + '/s',
            'graph-nodes': 1247 + Math.floor(Math.random() * 50),
            'query-latency': Math.floor(Math.random() * 50 + 100) + 'ms'
        };
        
        Object.keys(metrics).forEach(id => {
            const el = this.shadowRoot.getElementById(id);
            if (el) {
                el.textContent = metrics[id];
            }
        });
    }
    
    updateMetrics() {
        // Update worker metrics
        const activeWorkers = this.shadowRoot.getElementById('active-workers');
        if (activeWorkers) {
            const current = parseInt(activeWorkers.textContent.split('/')[0]);
            const newCount = Math.max(2, Math.min(10, current + (Math.random() > 0.5 ? 1 : -1)));
            activeWorkers.textContent = `${newCount}/10`;
        }
        
        // Update queue metrics
        const queueSize = this.shadowRoot.getElementById('queue-size');
        if (queueSize) {
            const current = parseInt(queueSize.textContent);
            const newSize = Math.max(0, current + Math.floor(Math.random() * 10) - 5);
            queueSize.textContent = newSize;
        }
        
        // Update message rate
        const msgRate = this.shadowRoot.getElementById('msg-rate');
        if (msgRate) {
            const current = parseInt(msgRate.textContent);
            const newRate = Math.max(100, Math.min(500, current + Math.floor(Math.random() * 50) - 25));
            msgRate.textContent = newRate + '/s';
        }
        
        // Randomly change system status (for demo purposes)
        if (Math.random() < 0.1) {
            const neo4jCard = this.shadowRoot.querySelector('.status-degraded');
            if (neo4jCard) {
                if (Math.random() > 0.5 && !neo4jCard.classList.contains('operational')) {
                    neo4jCard.classList.replace('degraded', 'operational');
                    neo4jCard.classList.remove('status-degraded');
                    neo4jCard.classList.add('status-operational');
                    const badge = neo4jCard.querySelector('.status-badge');
                    if (badge) {
                        badge.textContent = 'Operational';
                        badge.style.background = 'rgba(16, 185, 129, 0.2)';
                        badge.style.color = '#10b981';
                    }
                }
            }
        }
    }
    
    showSystemDetails(system, status) {
        const details = {
            'orchestrator': {
                operational: 'The orchestrator is running optimally with sub-50ms response times.',
                degraded: 'The orchestrator is experiencing higher than normal latency.',
                offline: 'The orchestrator is offline or unresponsive.'
            },
            'workers': {
                operational: 'Worker pool is fully operational with all 10 workers active.',
                degraded: 'Some workers are experiencing issues or are offline.',
                offline: 'The worker pool is completely offline.'
            },
            'redis': {
                operational: 'Redis queues are operating normally with optimal message throughput.',
                degraded: 'Redis is experiencing message backlog or connection issues.',
                offline: 'Redis is offline or unreachable.'
            },
            'neo4j': {
                operational: 'Neo4j graph is performing optimally with normal query latency.',
                degraded: 'Neo4j is experiencing higher than normal query latency.',
                offline: 'Neo4j is offline or unreachable.'
            }
        };
        
        const message = details[system]?.[status] || 'Status information unavailable.';
        alert(`${system.toUpperCase()} System Status: ${status.toUpperCase()}\n\n${message}`);
    }
}

customElements.define('system-status', SystemStatus);