icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/resilience.html

@@ -0,0 +1,300 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — Resilience Dashboard{% endblock %}
+{% block content %}
+
+<h1>Resilience & Infrastructure Dashboard</h1>
+
+<div class="intro-panel">
+    <h2>Phase 1: Resilience, Code Quality & Infrastructure</h2>
+    <p>Monitor circuit breakers, pipeline gates, dead letter queue, event bus, and compliance marking enforcement across the platform.</p>
+    <div class="intro-steps">
+        <div class="intro-step"><span class="step-num">1</span><span class="step-text">Circuit Breakers</span></div>
+        <div class="intro-step"><span class="step-num">2</span><span class="step-text">Pipeline Gates</span></div>
+        <div class="intro-step"><span class="step-num">3</span><span class="step-text">Dead Letter Queue</span></div>
+        <div class="intro-step"><span class="step-num">4</span><span class="step-text">Event Bus</span></div>
+    </div>
+</div>
+
+<!-- Tab Navigation -->
+<div style="display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0;">
+    <button class="tab-btn active" data-tab="breakers" id="tab-breakers">Circuit Breakers</button>
+    <button class="tab-btn" data-tab="gates" id="tab-gates">Pipeline Gates</button>
+    <button class="tab-btn" data-tab="dlq" id="tab-dlq">Dead Letter Queue</button>
+    <button class="tab-btn" data-tab="events" id="tab-events">Event Bus</button>
+</div>
+
+<!-- ── Circuit Breakers Tab ─────────────────────────────────── -->
+<div class="tab-content" id="panel-breakers">
+    <div class="stat-grid" id="breaker-stats">
+        <div class="stat-card">
+            <div class="label">Total Breakers</div>
+            <div class="value blue" id="cb-total">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Closed (Healthy)</div>
+            <div class="value green" id="cb-closed">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Open (Tripped)</div>
+            <div class="value red" id="cb-open">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Half-Open (Probing)</div>
+            <div class="value orange" id="cb-half-open">0</div>
+        </div>
+    </div>
+    <div class="section-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h2>Breaker Status</h2>
+            <button class="btn btn-primary btn-sm" id="cb-refresh-btn">Refresh</button>
+        </div>
+        <table id="cb-table">
+            <thead><tr><th>Name</th><th>State</th><th>Failures</th><th>Window Calls</th><th>Threshold</th><th>Retry After</th></tr></thead>
+            <tbody id="cb-tbody">
+                <tr><td colspan="6" class="empty">Click Refresh to load breaker status</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- ── Pipeline Gates Tab ───────────────────────────────────── -->
+<div class="tab-content" id="panel-gates" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">Pipeline Stages</div>
+            <div class="value blue" id="gate-stage-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Total Gates</div>
+            <div class="value purple" id="gate-total-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Blocking Gates</div>
+            <div class="value orange" id="gate-blocking-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Last Run</div>
+            <div class="value green" id="gate-last-run" style="font-size:18px;">—</div>
+        </div>
+    </div>
+    <div class="section-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h2>Gate Configuration</h2>
+            <button class="btn btn-primary btn-sm" id="gate-load-btn">Load Stages</button>
+        </div>
+        <div id="gate-stages-container"></div>
+    </div>
+</div>
+
+<!-- ── Dead Letter Queue Tab ────────────────────────────────── -->
+<div class="tab-content" id="panel-dlq" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">Unresolved Entries</div>
+            <div class="value red" id="dlq-unresolved">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Total Entries</div>
+            <div class="value blue" id="dlq-total">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Top Agent</div>
+            <div class="value orange" id="dlq-top-agent" style="font-size:18px;">—</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Avg Retries</div>
+            <div class="value purple" id="dlq-avg-retries">0</div>
+        </div>
+    </div>
+    <div class="section-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h2>DLQ Entries</h2>
+            <button class="btn btn-primary btn-sm" id="dlq-refresh-btn">Refresh</button>
+        </div>
+        <table id="dlq-table">
+            <thead><tr><th>ID</th><th>Task</th><th>Agent</th><th>Method</th><th>Reason</th><th>Retries</th><th>Created</th><th>Status</th></tr></thead>
+            <tbody id="dlq-tbody">
+                <tr><td colspan="8" class="empty">Click Refresh to load DLQ entries</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- ── Event Bus Tab ────────────────────────────────────────── -->
+<div class="tab-content" id="panel-events" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">Registered Topics</div>
+            <div class="value blue" id="evt-topic-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Total Handlers</div>
+            <div class="value purple" id="evt-handler-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Recent Events</div>
+            <div class="value green" id="evt-recent-count">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Bus Status</div>
+            <div class="value green" id="evt-status" style="font-size:18px;">Active</div>
+        </div>
+    </div>
+    <div class="section-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h2>Recent Events</h2>
+            <button class="btn btn-primary btn-sm" id="evt-refresh-btn">Refresh</button>
+        </div>
+        <table id="evt-table">
+            <thead><tr><th>Event ID</th><th>Topic</th><th>Source</th><th>Timestamp</th><th>Payload</th></tr></thead>
+            <tbody id="evt-tbody">
+                <tr><td colspan="5" class="empty">Click Refresh to load recent events</td></tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="section-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px;">
+        <h2>Well-Known Topics</h2>
+        <div id="evt-topics-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 12px;">
+        </div>
+    </div>
+</div>
+
+<style>
+.tab-btn { background: none; border: none; color: var(--text-dim); padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; transition: all .2s; }
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+.section-card { margin-bottom: 16px; }
+</style>
+
+<script>
+// Tab switching
+document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(p => p.style.display = 'none');
+        btn.classList.add('active');
+        document.getElementById('panel-' + btn.dataset.tab).style.display = '';
+    });
+});
+
+// Circuit Breakers
+document.getElementById('cb-refresh-btn').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/resilience/breakers');
+        const data = await res.json();
+        const breakers = data.breakers || {};
+        const names = Object.keys(breakers);
+        document.getElementById('cb-total').textContent = names.length;
+        let closed=0, open=0, half=0;
+        names.forEach(n => {
+            if(breakers[n].state==='closed') closed++;
+            else if(breakers[n].state==='open') open++;
+            else half++;
+        });
+        document.getElementById('cb-closed').textContent = closed;
+        document.getElementById('cb-open').textContent = open;
+        document.getElementById('cb-half-open').textContent = half;
+        const tbody = document.getElementById('cb-tbody');
+        if(names.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="empty">No circuit breakers registered yet</td></tr>';
+        } else {
+            tbody.innerHTML = names.map(n => {
+                const b = breakers[n];
+                const stateClass = b.state==='closed'?'badge-green':b.state==='open'?'badge-red':'badge-orange';
+                return `<tr><td>${n}</td><td><span class="badge ${stateClass}">${b.state}</span></td><td>${b.failure_count}</td><td>${b.total_calls_in_window}</td><td>${b.failure_threshold}</td><td>${b.retry_after_seconds > 0 ? b.retry_after_seconds.toFixed(1)+'s' : '—'}</td></tr>`;
+            }).join('');
+        }
+    } catch(e) { console.error('Breaker fetch error:', e); }
+});
+
+// Pipeline Gates
+document.getElementById('gate-load-btn').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/resilience/gates');
+        const data = await res.json();
+        const stages = data.stages || {};
+        const stageNames = Object.keys(stages);
+        document.getElementById('gate-stage-count').textContent = stageNames.length;
+        let totalGates = 0, blockingGates = 0;
+        stageNames.forEach(s => {
+            const gates = stages[s] || [];
+            totalGates += gates.length;
+            gates.forEach(g => { if(g.blocking) blockingGates++; });
+        });
+        document.getElementById('gate-total-count').textContent = totalGates;
+        document.getElementById('gate-blocking-count').textContent = blockingGates;
+        const container = document.getElementById('gate-stages-container');
+        container.innerHTML = stageNames.map(s => {
+            const gates = stages[s] || [];
+            return `<div class="card"><h3 style="margin-bottom:8px;">${s} <span class="badge badge-blue">${gates.length} gates</span></h3><table><thead><tr><th>Gate</th><th>Tool</th><th>Blocking</th><th>Timeout</th></tr></thead><tbody>${gates.map(g => `<tr><td>${g.name}</td><td style="font-size:12px;color:var(--text-dim);">${g.tool}</td><td><span class="badge ${g.blocking?'badge-red':'badge-gray'}">${g.blocking?'blocking':'advisory'}</span></td><td>${g.timeout_seconds||'—'}s</td></tr>`).join('')}</tbody></table></div>`;
+        }).join('');
+    } catch(e) { console.error('Gates fetch error:', e); }
+});
+
+// DLQ
+document.getElementById('dlq-refresh-btn').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/resilience/dlq');
+        const data = await res.json();
+        const entries = data.entries || [];
+        const unresolved = entries.filter(e => !e.resolved_at);
+        document.getElementById('dlq-unresolved').textContent = unresolved.length;
+        document.getElementById('dlq-total').textContent = entries.length;
+        if(entries.length > 0) {
+            const agents = {};
+            let totalRetries = 0;
+            entries.forEach(e => {
+                agents[e.agent_name] = (agents[e.agent_name]||0) + 1;
+                totalRetries += e.retry_count || 0;
+            });
+            const topAgent = Object.entries(agents).sort((a,b) => b[1]-a[1])[0];
+            document.getElementById('dlq-top-agent').textContent = topAgent ? topAgent[0] : '—';
+            document.getElementById('dlq-avg-retries').textContent = (totalRetries / entries.length).toFixed(1);
+        }
+        const tbody = document.getElementById('dlq-tbody');
+        if(entries.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="8" class="empty">No DLQ entries — all tasks healthy</td></tr>';
+        } else {
+            tbody.innerHTML = entries.map(e => {
+                const status = e.resolved_at ? '<span class="badge badge-green">resolved</span>' : '<span class="badge badge-red">unresolved</span>';
+                return `<tr><td style="font-size:11px;">${e.id||'—'}</td><td>${e.task_id||'—'}</td><td>${e.agent_name}</td><td>${e.method}</td><td>${e.reason}</td><td>${e.retry_count}</td><td style="font-size:11px;">${e.created_at||'—'}</td><td>${status}</td></tr>`;
+            }).join('');
+        }
+    } catch(e) { console.error('DLQ fetch error:', e); }
+});
+
+// Event Bus
+document.getElementById('evt-refresh-btn').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/resilience/events');
+        const data = await res.json();
+        const topics = data.topics || [];
+        const events = data.recent_events || [];
+        document.getElementById('evt-topic-count').textContent = topics.length;
+        document.getElementById('evt-handler-count').textContent = data.total_handlers || 0;
+        document.getElementById('evt-recent-count').textContent = events.length;
+        const tbody = document.getElementById('evt-tbody');
+        if(events.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="5" class="empty">No events recorded yet</td></tr>';
+        } else {
+            tbody.innerHTML = events.slice(0, 50).map(e => {
+                const ts = new Date(e.timestamp * 1000).toLocaleTimeString();
+                const payload = JSON.stringify(e.payload || {}).substring(0, 80);
+                return `<tr><td style="font-size:11px;">${e.event_id}</td><td><span class="badge badge-blue">${e.topic}</span></td><td>${e.source||'—'}</td><td>${ts}</td><td style="font-size:11px;color:var(--text-dim);">${payload}</td></tr>`;
+            }).join('');
+        }
+        // Well-known topics
+        const wellKnown = ['agent.started','agent.stopped','agent.health_changed','compliance.gate_passed','compliance.gate_failed','compliance.evidence_collected','security.threat_detected','security.scan_completed','llm.fallback_triggered','llm.circuit_opened','build.completed','deploy.started','deploy.completed','task.sent_to_dlq'];
+        const topicsList = document.getElementById('evt-topics-list');
+        topicsList.innerHTML = wellKnown.map(t => {
+            const active = topics.includes(t);
+            return `<div style="background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;"><span style="font-size:13px;">${t}</span><span class="badge ${active?'badge-green':'badge-gray'}">${active?'subscribed':'idle'}</span></div>`;
+        }).join('');
+    } catch(e) { console.error('Events fetch error:', e); }
+});
+
+// Auto-load breakers on page load
+document.getElementById('cb-refresh-btn').click();
+</script>
+
+{% endblock %}

tools/dashboard/templates/scorecard.html

@@ -0,0 +1,162 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — Developer Scorecard{% endblock %}
+{% block content %}
+
+<h1>Developer Scorecard — Multi-Dimension Quality Assessment</h1>
+
+<div class="intro-panel">
+    <h2>Know Your Project Health</h2>
+    <p>Compute a composite score across five dimensions — code quality, security, compliance, test coverage, and velocity. Track trends over time and identify areas for improvement.</p>
+    <div class="intro-steps">
+        <div class="intro-step"><span class="step-num">1</span><span class="step-text">Compute Score</span></div>
+        <div class="intro-step"><span class="step-num">2</span><span class="step-text">Review Dimensions</span></div>
+        <div class="intro-step"><span class="step-num">3</span><span class="step-text">Track Trends</span></div>
+    </div>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Overall Score</div>
+        <div class="value blue" id="sc-overall">—</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Grade</div>
+        <div class="value green" id="sc-grade" style="font-size:36px;">—</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Dimensions</div>
+        <div class="value purple" id="sc-dimensions">5</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Trend Points</div>
+        <div class="value orange" id="sc-trend-points">0</div>
+    </div>
+</div>
+
+<!-- Compute -->
+<div class="section-card">
+    <h2>Compute Scorecard</h2>
+    <button class="btn btn-primary" id="sc-compute-btn">Compute Now</button>
+    <div id="sc-compute-result" style="margin-top: 12px;"></div>
+</div>
+
+<!-- Dimensions -->
+<div class="section-card">
+    <h2>Dimension Breakdown</h2>
+    <div id="sc-dimensions-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
+        <div class="stat-card"><div class="label">Code Quality</div><div class="value blue" id="sc-dim-code">—</div></div>
+        <div class="stat-card"><div class="label">Security</div><div class="value red" id="sc-dim-security">—</div></div>
+        <div class="stat-card"><div class="label">Compliance</div><div class="value green" id="sc-dim-compliance">—</div></div>
+        <div class="stat-card"><div class="label">Test Coverage</div><div class="value purple" id="sc-dim-test">—</div></div>
+        <div class="stat-card"><div class="label">Velocity</div><div class="value orange" id="sc-dim-velocity">—</div></div>
+    </div>
+</div>
+
+<!-- Trend -->
+<div class="section-card">
+    <h2>Score Trend</h2>
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Overall</th>
+                <th>Grade</th>
+                <th>Code Quality</th>
+                <th>Security</th>
+                <th>Compliance</th>
+                <th>Test Coverage</th>
+                <th>Velocity</th>
+            </tr>
+        </thead>
+        <tbody id="sc-trend-body">
+            <tr><td colspan="8" style="text-align:center; color: #888;">No trend data yet. Compute a scorecard to start tracking.</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<script>
+const PROJECT_ID = 'sparkpilot';
+
+function gradeBadge(grade) {
+    const map = { 'A+': 'green', 'A': 'green', 'A-': 'green', 'B+': 'blue', 'B': 'blue', 'B-': 'blue',
+                  'C+': 'orange', 'C': 'orange', 'C-': 'orange', 'D': 'red', 'F': 'red' };
+    const color = map[grade] || 'gray';
+    return `<span class="badge badge-${color}">${grade}</span>`;
+}
+
+function fmtScore(val) {
+    return val != null ? (typeof val === 'number' ? val.toFixed(1) : val) : '—';
+}
+
+function updateDimensions(dims) {
+    const dimMap = { code_quality: 'sc-dim-code', security: 'sc-dim-security', compliance: 'sc-dim-compliance',
+                     test_coverage: 'sc-dim-test', velocity: 'sc-dim-velocity' };
+    if (Array.isArray(dims)) {
+        dims.forEach(d => {
+            const el = document.getElementById(dimMap[d.name] || '');
+            if (el) el.textContent = fmtScore(d.score);
+        });
+    } else if (typeof dims === 'object') {
+        Object.entries(dims).forEach(([k, v]) => {
+            const el = document.getElementById(dimMap[k] || '');
+            if (el) el.textContent = fmtScore(typeof v === 'object' ? v.score : v);
+        });
+    }
+}
+
+async function loadLatest() {
+    try {
+        const data = await fetch(`/api/scorecard/latest/${PROJECT_ID}`).then(r => r.json());
+        if (data.overall_score != null) {
+            document.getElementById('sc-overall').textContent = fmtScore(data.overall_score);
+            document.getElementById('sc-grade').textContent = data.grade || '—';
+            updateDimensions(data.dimensions || {});
+        }
+    } catch (err) {
+        console.error('Scorecard load error:', err);
+    }
+}
+
+async function loadTrend() {
+    try {
+        const data = await fetch(`/api/scorecard/trend/${PROJECT_ID}`).then(r => r.json());
+        const points = data.trend || data.points || [];
+        document.getElementById('sc-trend-points').textContent = points.length;
+
+        if (points.length > 0) {
+            document.getElementById('sc-trend-body').innerHTML = points.map(p => `<tr>
+                <td>${p.date || p.computed_at || '—'}</td>
+                <td><strong>${fmtScore(p.overall_score)}</strong></td>
+                <td>${gradeBadge(p.grade || '—')}</td>
+                <td>${fmtScore(p.code_quality)}</td>
+                <td>${fmtScore(p.security)}</td>
+                <td>${fmtScore(p.compliance)}</td>
+                <td>${fmtScore(p.test_coverage)}</td>
+                <td>${fmtScore(p.velocity)}</td>
+            </tr>`).join('');
+        }
+    } catch (err) {
+        console.error('Trend load error:', err);
+    }
+}
+
+document.getElementById('sc-compute-btn').addEventListener('click', async () => {
+    const result = document.getElementById('sc-compute-result');
+    result.innerHTML = '<em>Computing scorecard...</em>';
+    try {
+        const data = await fetch(`/api/scorecard/compute/${PROJECT_ID}`).then(r => r.json());
+        document.getElementById('sc-overall').textContent = fmtScore(data.overall_score);
+        document.getElementById('sc-grade').textContent = data.grade || '—';
+        updateDimensions(data.dimensions || {});
+        result.innerHTML = `<div class="alert alert-success">Scorecard computed — Grade: ${data.grade}, Score: ${fmtScore(data.overall_score)}</div>`;
+        loadTrend();
+    } catch (err) {
+        result.innerHTML = `<div class="alert alert-error">${err.message}</div>`;
+    }
+});
+
+loadLatest();
+loadTrend();
+</script>
+
+{% endblock %}

tools/dashboard/templates/simulator.html

@@ -0,0 +1,131 @@
+{% extends "base.html" %}
+{% block title %}SparkPilot — Simulator{% endblock %}
+{% block content %}
+<h1>FreeRTOS Simulator</h1>
+
+<div class="intro-panel">
+    <div class="intro-icon">🖥️</div>
+    <h2>What is the Simulator?</h2>
+    <p>The simulator lets you <strong>run real FreeRTOS code in your browser</strong> — no hardware needed!
+       It emulates virtual peripherals (LEDs, sensors, displays) so you can test your code before
+       deploying to a real device. Perfect for learning and prototyping.</p>
+    <div class="intro-steps">
+        <div class="intro-step">
+            <div class="step-num">1</div>
+            <div class="step-text">Launch a session</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">2</div>
+            <div class="step-text">Write your code</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">3</div>
+            <div class="step-text">See it run live</div>
+        </div>
+    </div>
+</div>
+
+<div class="card" style="margin-bottom:24px;">
+    <div class="card-header">
+        <h2 style="margin:0;">Launch New Session</h2>
+        <button class="btn btn-primary" id="sim-btn" onclick="createSession()">Launch Simulator</button>
+    </div>
+    <p style="color:var(--text-dim);font-size:14px;">
+        Start a browser-based FreeRTOS simulator with virtual peripherals. No hardware required!
+    </p>
+    <div id="sim-result" style="display:none;margin-top:12px;"></div>
+</div>
+
+<h2>Virtual Peripherals</h2>
+<div class="info-callout">
+    These are the virtual hardware components available in the simulator.
+    <strong>They behave just like real hardware</strong> — LEDs light up, sensors return data, displays show text.
+</div>
+{% if peripherals %}
+<div class="stat-grid" style="margin-bottom:24px;">
+    {% for p in peripherals %}
+    <div class="stat-card">
+        <div class="label">{{ p.peripheral_type }}</div>
+        <div class="value" style="font-size:18px;">{{ p.name }}</div>
+        <div style="color:var(--text-dim);font-size:12px;margin-top:4px;">Module: {{ p.wasm_module }}</div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="empty" style="margin-bottom:24px;">
+    <div style="font-size:32px;margin-bottom:8px;">🔌</div>
+    <div>No virtual peripherals loaded yet.</div>
+    <div style="font-size:13px;margin-top:4px;color:var(--text-dim);">
+        They'll be created automatically when you launch a simulator session.
+    </div>
+</div>
+{% endif %}
+
+<h2>Recent Sessions</h2>
+{% if sessions %}
+<table>
+    <thead><tr><th>Session</th><th>Board</th><th>Status</th><th>Peripherals</th><th>Started</th></tr></thead>
+    <tbody>
+    {% for s in sessions %}
+        <tr>
+            <td><code style="font-size:12px;">{{ s.id[:12] }}...</code></td>
+            <td>{{ s.board_emulated or 'ESP32-S3 (Virtual)' }}</td>
+            <td>
+                {% if s.status == 'running' %}
+                    <span class="badge badge-green">Running</span>
+                {% elif s.status == 'stopped' %}
+                    <span class="badge badge-gray">Stopped</span>
+                {% else %}
+                    <span class="badge badge-blue">{{ s.status }}</span>
+                {% endif %}
+            </td>
+            <td style="font-size:12px;">{{ s.peripherals if s.peripherals is string else 'LED, Sensor, Display' }}</td>
+            <td>{{ s.created_at[:19] if s.created_at else '—' }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<div class="empty">
+    <div style="font-size:32px;margin-bottom:8px;">🚀</div>
+    <div>No simulator sessions yet.</div>
+    <div style="font-size:13px;margin-top:4px;">Click <strong>"Launch Simulator"</strong> above to start your first session!</div>
+</div>
+{% endif %}
+
+<script>
+async function createSession() {
+    const btn = document.getElementById('sim-btn');
+    const result = document.getElementById('sim-result');
+    btn.textContent = 'Launching...';
+    btn.disabled = true;
+    try {
+        const res = await fetch('/api/sim/create', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({user_id: 'player1'})
+        });
+        const data = await res.json();
+        if (data.status === 'success') {
+            result.innerHTML = '<div class="completion-banner" style="padding:16px;">' +
+                '<h3 style="font-size:18px;">Simulator Launched!</h3>' +
+                '<p style="color:var(--text-dim);font-size:14px;">Session <code>' + data.session_id + '</code> is running.</p>' +
+                '<p style="color:var(--text-dim);font-size:13px;margin-top:8px;">Go to <a href="/missions" style="color:var(--accent);">Missions</a> to write code and see it run, or use the <a href="/" style="color:var(--accent);">NL Command</a> on the Home page.</p>' +
+                '</div>';
+            result.style.display = 'block';
+            // Reload table after a moment
+            setTimeout(function() { location.reload(); }, 2000);
+        } else {
+            result.innerHTML = '<div class="hint-box">' + (data.message || 'Error creating session') + '</div>';
+            result.style.display = 'block';
+        }
+    } catch(err) {
+        result.innerHTML = '<div class="hint-box">Error: ' + err.message + '</div>';
+        result.style.display = 'block';
+    } finally {
+        btn.textContent = 'Launch Simulator';
+        btn.disabled = false;
+    }
+}
+</script>
+{% endblock %}