components/stats-panel.js

class StatsPanel extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .stats-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 1.5rem;
                }
                
                .stat-card {
                    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;
                    position: relative;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }
                
                .stat-card:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
                }
                
                .stat-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                }
                
                .queue-card::before {
                    background: linear-gradient(90deg, #f59e0b, #fbbf24);
                }
                
                .workers-card::before {
                    background: linear-gradient(90deg, #06b6d4, #0891b2);
                }
                
                .graph-card::before {
                    background: linear-gradient(90deg, #10b981, #34d399);
                }
                
                .performance-card::before {
                    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
                }
                
                .stat-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                }
                
                .stat-title {
                    font-size: 0.875rem;
                    color: #94a3b8;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                
                .stat-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                }
                
                .queue-icon {
                    background: linear-gradient(45deg, #f59e0b, #fbbf24);
                }
                
                .workers-icon {
                    background: linear-gradient(45deg, #06b6d4, #0891b2);
                }
                
                .graph-icon {
                    background: linear-gradient(45deg, #10b981, #34d399);
                }
                
                .performance-icon {
                    background: linear-gradient(45deg, #8b5cf6, #7c3aed);
                }
                
                .stat-value {
                    font-size: 2.5rem;
                    font-weight: 800;
                    margin-bottom: 0.5rem;
                    background: linear-gradient(45deg, #ffffff, #cbd5e1);
                    background-clip: text;
                    -webkit-background-clip: text;
                    color: transparent;
                }
                
                .stat-value.small {
                    font-size: 2rem;
                }
                
                .stat-change {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 0.875rem;
                }
                
                .change-positive {
                    color: #10b981;
                }
                
                .change-negative {
                    color: #ef4444;
                }
                
                .stat-description {
                    font-size: 0.875rem;
                    color: #94a3b8;
                    margin-top: 0.5rem;
                }
                
                .progress-bar {
                    height: 6px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 3px;
                    margin-top: 1rem;
                    overflow: hidden;
                }
                
                .progress-fill {
                    height: 100%;
                    border-radius: 3px;
                    transition: width 1s ease;
                }
                
                .queue-progress {
                    background: linear-gradient(90deg, #f59e0b, #fbbf24);
                }
                
                .performance-progress {
                    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
                }
                
                .workers-progress {
                    background: linear-gradient(90deg, #06b6d4, #0891b2);
                }
                
                @media (max-width: 768px) {
                    .stats-container {
                        grid-template-columns: 1fr;
                    }
                }
            </style>
            
            <div class="stats-container">
                <div class="stat-card queue-card">
                    <div class="stat-header">
                        <div class="stat-title">Task Queue Status</div>
                        <div class="stat-icon queue-icon">
                            <i data-feather="layers"></i>
                        </div>
                    </div>
                    <div class="stat-value" id="queue-tasks">87</div>
                    <div class="stat-change change-positive">
                        <i data-feather="trending-up"></i>
                        <span>+12%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill queue-progress" style="width: 65%"></div>
                    </div>
                    <div class="stat-description">
                        Pending tasks waiting for worker assignment
                    </div>
                </div>
                
                <div class="stat-card workers-card">
                    <div class="stat-header">
                        <div class="stat-title">Active Workers</div>
                        <div class="stat-icon workers-icon">
                            <i data-feather="cpu"></i>
                        </div>
                    </div>
                    <div class="stat-value" id="workers-active">8</div>
                    <div class="stat-change change-positive">
                        <i data-feather="zap"></i>
                        <span>2 online</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill workers-progress" style="width: 80%"></div>
                    </div>
                    <div class="stat-description">
                        Parallel workers processing code generation
                    </div>
                </div>
                
                <div class="stat-card graph-card">
                    <div class="stat-header">
                        <div class="stat-title">Verified States</div>
                        <div class="stat-icon graph-icon">
                            <i data-feather="git-merge"></i>
                        </div>
                    </div>
                    <div class="stat-value small" id="verified-states">1,247</div>
                    <div class="stat-change change-positive">
                        <i data-feather="activity"></i>
                        <span>+42 today</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill workers-progress" style="width: 38%"></div>
                    </div>
                    <div class="stat-description">
                        Successful transitions stored in Neo4j graph
                    </div>
                </div>
                
                <div class="stat-card performance-card">
                    <div class="stat-header">
                        <div class="stat-title">Avg. Score</div>
                        <div class="stat-icon performance-icon">
                            <i data-feather="bar-chart-2"></i>
                        </div>
                    </div>
                    <div class="stat-value" id="avg-score">92.4%</div>
                    <div class="stat-change change-positive">
                        <i data-feather="trending-up"></i>
                        <span>+1.2%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill performance-progress" style="width: 92%"></div>
                    </div>
                    <div class="stat-description">
                        Average verification score from LLM orchestrator
                    </div>
                </div>
            </div>
        `;
        
        // 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);