class StatsPanel extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `
Task Queue Status
87
+12%
Pending tasks waiting for worker assignment
Active Workers
8
2 online
Parallel workers processing code generation
Verified States
1,247
+42 today
Successful transitions stored in Neo4j graph
Avg. Score
92.4%
+1.2%
Average verification score from LLM orchestrator
`; // Initialize with random values setTimeout(() => { this.initializeStats(); // Update stats every 5 seconds setInterval(() => { this.updateStats(); }, 5000); // Replace feather icons if (window.feather) { feather.replace(); } }, 100); } initializeStats() { const stats = { 'queue-tasks': Math.floor(Math.random() * 100), 'workers-active': Math.floor(Math.random() * 8) + 2, 'verified-states': 1247 + Math.floor(Math.random() * 50), 'avg-score': (Math.random() * 5 + 90).toFixed(1) }; Object.keys(stats).forEach(id => { const el = this.shadowRoot.getElementById(id); if (el) { el.textContent = stats[id]; } }); } updateStats() { // Simulate stat updates const stats = { 'queue-tasks': Math.max(0, Math.floor(Math.random() * 120)), 'workers-active': Math.max(2, Math.floor(Math.random() * 10)), 'verified-states': 1247 + Math.floor(Math.random() * 100), 'avg-score': (Math.random() * 5 + 90).toFixed(1) }; Object.keys(stats).forEach(id => { const el = this.shadowRoot.getElementById(id); if (el) { // Animate the change const oldValue = parseInt(el.textContent.replace(/[^0-9.-]+/g, "")); const newValue = parseInt(stats[id].toString().replace(/[^0-9.-]+/g, "")); if (oldValue !== newValue) { el.style.transform = 'scale(1.1)'; el.style.color = newValue > oldValue ? '#10b981' : '#ef4444'; setTimeout(() => { el.textContent = stats[id]; el.style.transform = 'scale(1)'; setTimeout(() => { el.style.color = ''; }, 1000); }, 300); } } }); // Update progress bars const progressBars = this.shadowRoot.querySelectorAll('.progress-fill'); progressBars.forEach((bar, index) => { const newWidth = Math.floor(Math.random() * 30 + 60); bar.style.width = `${newWidth}%`; }); } } customElements.define('stats-panel', StatsPanel);