class SystemStatus extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

Orchestrator

Operational

The Brain - Local LLM orchestrator responsible for verification, scoring, and routing decisions.

1,248
Candidates Scored
42ms
Avg Response

Worker Pool

Operational

The Muscle - Cloud LLM workers generating parallel code with stateless execution.

8/10
Active Workers
987
Tasks Completed

Redis Queues

Operational

The Nervous System - Pub/Sub message queues handling async decoupling between components.

87
Queue Size
342/s
Msg Rate

Neo4j Graph

Degraded

The Long-Term Memory - Verification graph storage experiencing higher than normal latency.

1,247
Total Nodes
128ms
Query Latency
`; // 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);