icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/devsecops_maturity.html

@@ -0,0 +1,278 @@
+{% extends "base.html" %}
+{% block title %}DevSecOps Maturity — {{ app_name }}{% endblock %}
+{% block content %}
+<h1>DevSecOps Maturity Dashboard</h1>
+<div class="intro-panel">
+    <h2>Phase 6: Testing & DevSecOps Maturity</h2>
+    <p>Compliance sidecar decorator, feature flags, SLSA Level 2 provenance,
+       property-based testing, contract tests, and snapshot testing.</p>
+</div>
+
+<!-- Tab buttons -->
+<div style="display:flex;gap:4px;margin-bottom:20px;flex-wrap:wrap;">
+    <button class="btn btn-primary tab-btn active" onclick="switchTab('sidecar')">Compliance Sidecar</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('flags')">Feature Flags</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('slsa')">SLSA Provenance</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('testing')">Testing Strategy</button>
+</div>
+
+<!-- ═══════════════ Compliance Sidecar Panel ═══════════════ -->
+<div id="panel-sidecar" class="tab-panel">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Wrapped Functions</div><div class="value blue" id="sidecar-wrapped">—</div></div>
+        <div class="stat-card"><div class="label">Total Calls</div><div class="value green" id="sidecar-calls">—</div></div>
+        <div class="stat-card"><div class="label">Total Errors</div><div class="value red" id="sidecar-errors">—</div></div>
+        <div class="stat-card"><div class="label">Avg Duration</div><div class="value orange" id="sidecar-duration">—</div></div>
+    </div>
+    <div style="display:flex;gap:8px;margin-bottom:16px;">
+        <button class="btn btn-primary" id="sidecar-load-btn" onclick="loadSidecar()">Load Sidecar Stats</button>
+        <div style="flex:1;">
+            <input type="text" id="sidecar-validate-text" class="nl-input" placeholder="Enter text to validate classification level..." />
+        </div>
+        <button class="btn btn-primary" onclick="validateClassification()">Validate</button>
+    </div>
+    <div id="sidecar-validate-result" style="display:none;margin-bottom:16px;"></div>
+    <h2>Decorator Pattern</h2>
+    <div class="code-block">@compliance_sidecar(classification="CUI // SP-CTI", audit_event="tool_invoked")
+def my_tool_function(project_id, **kwargs):
+    """Tool entry point — sidecar handles marking + audit automatically."""
+    result = do_work(project_id)
+    return result  # sidecar adds classification + logs to audit trail</div>
+    <h2 style="margin-top:24px;">Classification Hierarchy</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Level</th><th>Marking</th><th>Description</th><th>Status</th></tr></thead>
+        <tbody>
+            <tr><td>1</td><td>UNCLASSIFIED</td><td>Public information</td><td><span class="badge badge-green">Allowed</span></td></tr>
+            <tr><td>2</td><td>CUI</td><td>Controlled Unclassified Information</td><td><span class="badge badge-green">Allowed</span></td></tr>
+            <tr><td>3</td><td>CUI // SP-CTI</td><td>CUI with Special Protection</td><td><span class="badge badge-blue">Current</span></td></tr>
+            <tr><td>4</td><td>SECRET</td><td>Classified — SECRET</td><td><span class="badge badge-red">Blocked</span></td></tr>
+            <tr><td>5</td><td>TOP SECRET</td><td>Classified — TOP SECRET</td><td><span class="badge badge-red">Blocked</span></td></tr>
+            <tr><td>6</td><td>TS//SCI</td><td>Top Secret / SCI</td><td><span class="badge badge-red">Blocked</span></td></tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- ═══════════════ Feature Flags Panel ═══════════════ -->
+<div id="panel-flags" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Total Flags</div><div class="value blue" id="flags-total">—</div></div>
+        <div class="stat-card"><div class="label">Enabled</div><div class="value green" id="flags-enabled">—</div></div>
+        <div class="stat-card"><div class="label">Disabled</div><div class="value red" id="flags-disabled">—</div></div>
+        <div class="stat-card"><div class="label">Active Profile</div><div class="value purple" id="flags-profile">—</div></div>
+    </div>
+    <button class="btn btn-primary" id="flags-load-btn" onclick="loadFlags()">Load Feature Flags</button>
+    <table id="flags-table" style="margin-top:16px;">
+        <thead><tr><th>Flag Name</th><th>Status</th><th>Description</th><th>Env Override</th></tr></thead>
+        <tbody id="flags-tbody"></tbody>
+    </table>
+    <h2 style="margin-top:24px;">Environment Profiles</h2>
+    <div class="agent-grid" style="margin-top:12px;">
+        <div class="agent-card">
+            <div class="agent-name">Dev</div>
+            <div class="agent-role">Development environment</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">All features enabled, property testing on, SLSA off</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Staging</div>
+            <div class="agent-role">Pre-production testing</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">All features enabled, property testing on, SLSA on</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Production</div>
+            <div class="agent-role">Live deployment</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Core features only, property testing off, SLSA on</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Air-Gap</div>
+            <div class="agent-role">Disconnected environment</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Local-only LLM, no cloud, no marketplace, no budget routing</div>
+        </div>
+    </div>
+</div>
+
+<!-- ═══════════════ SLSA Provenance Panel ═══════════════ -->
+<div id="panel-slsa" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Attestations</div><div class="value blue" id="slsa-total">—</div></div>
+        <div class="stat-card"><div class="label">Verified</div><div class="value green" id="slsa-verified">—</div></div>
+        <div class="stat-card"><div class="label">Failed</div><div class="value red" id="slsa-failed">—</div></div>
+        <div class="stat-card"><div class="label">SLSA Level</div><div class="value purple">2</div></div>
+    </div>
+    <div style="display:flex;gap:8px;margin-bottom:16px;">
+        <button class="btn btn-primary" id="slsa-load-btn" onclick="loadSLSA()">Load Attestations</button>
+        <button class="btn btn-success" onclick="generateSLSA()">Generate from Audit</button>
+    </div>
+    <table id="slsa-table" style="margin-top:8px;">
+        <thead><tr><th>Subject</th><th>Digest</th><th>Builder</th><th>SLSA Level</th><th>Verified</th><th>Created</th></tr></thead>
+        <tbody id="slsa-tbody"></tbody>
+    </table>
+    <h2 style="margin-top:24px;">SLSA Level 2 Requirements</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Requirement</th><th>Level</th><th>Status</th><th>Implementation</th></tr></thead>
+        <tbody>
+            <tr><td>Build provenance exists</td><td>L1</td><td><span class="badge badge-green">Met</span></td><td>Attestation generated from audit trail</td></tr>
+            <tr><td>Provenance is authenticated</td><td>L2</td><td><span class="badge badge-green">Met</span></td><td>SHA-256 content hash verification</td></tr>
+            <tr><td>Source is version controlled</td><td>L2</td><td><span class="badge badge-green">Met</span></td><td>Git commit SHA in attestation</td></tr>
+            <tr><td>Builder is identified</td><td>L2</td><td><span class="badge badge-green">Met</span></td><td>icdev-ci builder identity</td></tr>
+            <tr><td>Dependencies recorded</td><td>L2</td><td><span class="badge badge-green">Met</span></td><td>Materials list in attestation</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- ═══════════════ Testing Strategy Panel ═══════════════ -->
+<div id="panel-testing" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Test Types</div><div class="value blue">6</div></div>
+        <div class="stat-card"><div class="label">Pipeline Stages</div><div class="value green">7</div></div>
+        <div class="stat-card"><div class="label">Contract Tests</div><div class="value purple">27</div></div>
+        <div class="stat-card"><div class="label">Coverage Target</div><div class="value orange">80%</div></div>
+    </div>
+    <h2>Testing Pipeline (7 Stages)</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Stage</th><th>Tool</th><th>Purpose</th><th>Gate Criteria</th></tr></thead>
+        <tbody>
+            <tr><td>1. py_compile</td><td>Python stdlib</td><td>Syntax validation</td><td>Zero syntax errors</td></tr>
+            <tr><td>2. Ruff</td><td>ruff</td><td>Ultra-fast linting</td><td>Zero errors (warnings allowed)</td></tr>
+            <tr><td>3. pytest</td><td>pytest + coverage</td><td>Unit/integration tests</td><td>All pass, coverage >= 80%</td></tr>
+            <tr><td>4. Behave</td><td>behave (Gherkin)</td><td>BDD scenario tests</td><td>All scenarios pass</td></tr>
+            <tr><td>5. Bandit</td><td>bandit</td><td>SAST security scan</td><td>No high/critical findings</td></tr>
+            <tr><td>6. Playwright</td><td>playwright</td><td>Browser E2E tests</td><td>All assertions pass</td></tr>
+            <tr><td>7. Security Gates</td><td>Custom tools</td><td>CUI, STIG, secrets</td><td>Zero CAT1, markings present</td></tr>
+        </tbody>
+    </table>
+    <h2 style="margin-top:24px;">Test Strategy Matrix</h2>
+    <div class="agent-grid" style="margin-top:12px;">
+        <div class="agent-card">
+            <div class="agent-name">Property-Based</div>
+            <div class="agent-role">Hypothesis framework</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Random valid inputs test invariants: crosswalk idempotency, ZTA score bounds, trust decay monotonicity. 50x more bugs per test.</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Contract Tests</div>
+            <div class="agent-role">Pact-style JSON Schema</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Consumer-driven contracts for 12 agent interfaces. 27 tests across 9 agent contracts.</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Snapshot Tests</div>
+            <div class="agent-role">syrupy plugin</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Normalized compliance artifact comparison. Catches unintended SSP/POAM/SBOM/OSCAL regressions.</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">E2E Tests</div>
+            <div class="agent-role">Playwright</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Full browser automation. Login, navigate, interact, screenshot 3 viewports, verify API responses.</div>
+        </div>
+    </div>
+</div>
+
+<script>
+// ── Tab switching ────────────────────────────────────────
+function switchTab(tab) {
+    document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    document.getElementById('panel-' + tab).style.display = 'block';
+    event.target.classList.add('active');
+}
+
+// ── Compliance Sidecar ───────────────────────────────────
+function loadSidecar() {
+    fetch('/api/maturity/sidecar').then(r => r.json()).then(d => {
+        document.getElementById('sidecar-wrapped').textContent = d.total_wrapped || 0;
+        document.getElementById('sidecar-calls').textContent = d.total_calls || 0;
+        document.getElementById('sidecar-errors').textContent = d.total_errors || 0;
+        const avg = d.avg_duration_ms != null ? parseFloat(d.avg_duration_ms).toFixed(1) + 'ms' : '0ms';
+        document.getElementById('sidecar-duration').textContent = avg;
+    }).catch(e => console.error('Sidecar load error:', e));
+}
+
+function validateClassification() {
+    const text = document.getElementById('sidecar-validate-text').value.trim();
+    if (!text) return;
+    fetch('/api/maturity/sidecar/validate', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({text: text})
+    }).then(r => r.json()).then(d => {
+        const el = document.getElementById('sidecar-validate-result');
+        el.style.display = 'block';
+        const badge = d.valid ? 'badge-green' : 'badge-red';
+        const label = d.valid ? 'VALID' : 'VIOLATION';
+        let html = `<div class="info-callout"><strong>Result:</strong> <span class="badge ${badge}">${label}</span>`;
+        if (d.violations && d.violations.length > 0) {
+            html += `<br><strong>Violations:</strong> ${d.violations.join(', ')}`;
+        }
+        html += '</div>';
+        el.innerHTML = html;
+    }).catch(e => console.error('Validate error:', e));
+}
+
+// ── Feature Flags ────────────────────────────────────────
+function loadFlags() {
+    fetch('/api/maturity/flags').then(r => r.json()).then(d => {
+        const flags = d.flags || [];
+        document.getElementById('flags-total').textContent = d.total_flags || flags.length;
+        document.getElementById('flags-enabled').textContent = d.enabled_count || flags.filter(f => f.enabled).length;
+        document.getElementById('flags-disabled').textContent = d.disabled_count || flags.filter(f => !f.enabled).length;
+        document.getElementById('flags-profile').textContent = d.active_profile || 'dev';
+
+        const tbody = document.getElementById('flags-tbody');
+        tbody.innerHTML = '';
+        if (flags.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="4" class="empty">No feature flags configured.</td></tr>';
+            return;
+        }
+        flags.forEach(f => {
+            const badge = f.enabled ? 'badge-green' : 'badge-red';
+            const status = f.enabled ? 'Enabled' : 'Disabled';
+            const envVar = 'ICDEV_FF_' + (f.name || '').toUpperCase();
+            tbody.innerHTML += `<tr>
+                <td>${f.name}</td>
+                <td><span class="badge ${badge}">${status}</span></td>
+                <td style="font-size:13px;">${f.description || '—'}</td>
+                <td style="font-size:11px;font-family:monospace;">${envVar}</td>
+            </tr>`;
+        });
+    }).catch(e => console.error('Flags load error:', e));
+}
+
+// ── SLSA Provenance ──────────────────────────────────────
+function loadSLSA() {
+    fetch('/api/maturity/slsa').then(r => r.json()).then(d => {
+        document.getElementById('slsa-total').textContent = d.total_attestations || 0;
+        document.getElementById('slsa-verified').textContent = d.verified_count || 0;
+        document.getElementById('slsa-failed').textContent = d.failed_count || 0;
+
+        const attestations = d.attestations || [];
+        const tbody = document.getElementById('slsa-tbody');
+        tbody.innerHTML = '';
+        if (attestations.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="empty">No attestations yet. Generate from audit trail to begin.</td></tr>';
+            return;
+        }
+        attestations.forEach(a => {
+            const vBadge = a.verification_result === 'passed' ? 'badge-green' : a.verification_result === 'failed' ? 'badge-red' : 'badge-gray';
+            const vText = a.verification_result || 'pending';
+            tbody.innerHTML += `<tr>
+                <td>${a.subject_name || '—'}</td>
+                <td style="font-size:11px;font-family:monospace;">${(a.subject_digest || '').substring(0, 16)}...</td>
+                <td>${a.builder_id || 'icdev-ci'}</td>
+                <td><span class="badge badge-purple">L${a.slsa_level || 2}</span></td>
+                <td><span class="badge ${vBadge}">${vText}</span></td>
+                <td style="font-size:12px;">${a.created_at || '—'}</td>
+            </tr>`;
+        });
+    }).catch(e => console.error('SLSA load error:', e));
+}
+
+function generateSLSA() {
+    fetch('/api/maturity/slsa/generate', {method: 'POST'}).then(r => r.json()).then(d => {
+        if (d.attestation_id || d.id) {
+            loadSLSA();
+        }
+    }).catch(e => console.error('SLSA generate error:', e));
+}
+
+// Auto-load sidecar stats on page load
+document.addEventListener('DOMContentLoaded', loadSidecar);
+</script>
+{% endblock %}

tools/dashboard/templates/edge_ai.html

@@ -0,0 +1,128 @@
+{% extends "base.html" %}
+{% block title %}SparkPilot — Edge AI{% endblock %}
+{% block content %}
+<h1>Edge AI / TinyML</h1>
+
+<div class="intro-panel">
+    <div class="intro-icon">🧠</div>
+    <h2>What is Edge AI?</h2>
+    <p><strong>Edge AI</strong> means running machine learning directly on your tiny device — not in the cloud!
+       SparkPilot uses <strong>TFLite Micro</strong> to run AI models that can detect anomalies, recognize
+       voice commands, or classify sensor data — all on a chip with just a few KB of memory.
+       The <strong>Edge AI Agent</strong> manages the full model lifecycle for you.</p>
+    <div class="intro-steps">
+        <div class="intro-step">
+            <div class="step-num">1</div>
+            <div class="step-text">Train a model</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">2</div>
+            <div class="step-text">Convert to TFLite</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">3</div>
+            <div class="step-text">Deploy to device</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">4</div>
+            <div class="step-text">Monitor performance</div>
+        </div>
+    </div>
+</div>
+
+<h2>ML Models</h2>
+<div class="info-callout">
+    Each model has a <strong>task type</strong> (what it does) and requires a <strong>tensor arena</strong> (memory pool).
+    The Edge AI Agent ensures models fit within your device's memory constraints.
+</div>
+{% if models %}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px;">
+    {% for m in models %}
+    <div class="card">
+        <div class="card-header">
+            <h2 style="margin:0;">{{ m.name }}</h2>
+            <span class="badge {% if m.status == 'deployed' %}badge-green{% elif m.status == 'registered' %}badge-blue{% else %}badge-gray{% endif %}">
+                {{ m.status }}
+            </span>
+        </div>
+        <div style="font-size:13px;color:var(--text-dim);margin-bottom:12px;">
+            {% if m.task_type == 'anomaly_detection' %}
+                🔍 Anomaly Detection — Finds unusual patterns in sensor data
+            {% elif m.task_type == 'keyword_spotting' %}
+                🎤 Keyword Spotting — Recognizes spoken commands
+            {% elif m.task_type == 'image_classification' %}
+                📷 Image Classification — Identifies objects in images
+            {% else %}
+                {{ m.task_type or 'General' }} &middot; {{ m.framework or 'TFLite Micro' }}
+            {% endif %}
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;">
+            <div>
+                <span style="color:var(--text-dim);">Model Size</span><br>
+                <strong>{{ m.model_size_bytes or '—' }} bytes</strong>
+            </div>
+            <div>
+                <span style="color:var(--text-dim);">Arena Size</span><br>
+                <strong>{{ m.arena_size_bytes or '—' }} bytes</strong>
+            </div>
+            <div>
+                <span style="color:var(--text-dim);">Framework</span><br>
+                <strong>{{ m.framework or 'TFLite Micro' }}</strong>
+            </div>
+            <div>
+                <span style="color:var(--text-dim);">Version</span><br>
+                <strong>{{ m.version or '1.0' }}</strong>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="empty" style="margin-bottom:24px;">
+    <div style="font-size:32px;margin-bottom:8px;">🤖</div>
+    <div>No ML models registered yet.</div>
+    <div style="font-size:13px;margin-top:4px;">
+        Complete <a href="/missions" style="color:var(--accent);">Mission 5: AI Detective</a> to deploy your first AI model!
+    </div>
+</div>
+{% endif %}
+
+<h2>Inference Telemetry</h2>
+<div class="info-callout">
+    <strong>Inference</strong> = running the AI model on real data.
+    The Monitor Agent tracks how fast each model runs (<strong>latency</strong>) and how sure it is about its
+    predictions (<strong>confidence</strong>). Lower latency and higher confidence = better performance.
+</div>
+{% if inference %}
+<table>
+    <thead><tr><th>Model</th><th>Total Inferences</th><th>Avg Latency</th><th>Avg Confidence</th><th>Performance</th></tr></thead>
+    <tbody>
+    {% for i in inference %}
+        <tr>
+            <td><strong>{{ i.model_id }}</strong></td>
+            <td>{{ i.count }}</td>
+            <td>{{ i.avg_latency|round(1) if i.avg_latency else '—' }} ms</td>
+            <td>{{ (i.avg_confidence * 100)|round(1) if i.avg_confidence else '—' }}%</td>
+            <td>
+                {% if i.avg_confidence and i.avg_confidence > 0.8 %}
+                    <span class="badge badge-green">Excellent</span>
+                {% elif i.avg_confidence and i.avg_confidence > 0.6 %}
+                    <span class="badge badge-blue">Good</span>
+                {% elif i.avg_confidence %}
+                    <span class="badge badge-orange">Needs Tuning</span>
+                {% else %}
+                    <span class="badge badge-gray">No data</span>
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<div class="empty">
+    <div style="font-size:32px;margin-bottom:8px;">📊</div>
+    <div>No inference data yet.</div>
+    <div style="font-size:13px;margin-top:4px;">Deploy a model and run predictions to see telemetry data here!</div>
+</div>
+{% endif %}
+{% endblock %}

tools/dashboard/templates/firmware.html

@@ -0,0 +1,120 @@
+{% extends "base.html" %}
+{% block title %}SparkPilot — Firmware{% endblock %}
+{% block content %}
+<h1>Firmware Management</h1>
+
+<div class="intro-panel">
+    <div class="intro-icon">⚙️</div>
+    <h2>What is Firmware?</h2>
+    <p><strong>Firmware</strong> is the software that runs on your embedded device (like an ESP32 or STM32).
+       SparkPilot compiles your code into a firmware binary, then sends it to your device wirelessly via
+       <strong>OTA (Over-The-Air) updates</strong>. Think of it like updating an app on your phone — but for hardware!</p>
+    <div class="intro-steps">
+        <div class="intro-step">
+            <div class="step-num">1</div>
+            <div class="step-text">Write code (Missions)</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">2</div>
+            <div class="step-text">Builder compiles it</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">3</div>
+            <div class="step-text">OTA sends to device</div>
+        </div>
+        <div class="intro-step">
+            <div class="step-num">4</div>
+            <div class="step-text">Device runs new code</div>
+        </div>
+    </div>
+</div>
+
+<h2>Firmware Builds</h2>
+<div class="info-callout">
+    The <strong>Embedded Builder Agent</strong> compiles your FreeRTOS C code into a binary file.
+    Each build targets a specific board (ESP32, STM32, etc.) and includes the SparkPilot SDK (~8KB).
+</div>
+{% if builds %}
+<table>
+    <thead><tr><th>Version</th><th>Board</th><th>Status</th><th>Size</th><th>Built</th></tr></thead>
+    <tbody>
+    {% for b in builds %}
+        <tr>
+            <td><strong>{{ b.version or 'dev' }}</strong></td>
+            <td>{{ b.board or 'simulator' }}</td>
+            <td>
+                {% if b.status == 'built' %}
+                    <span class="badge badge-green">Built</span>
+                {% elif b.status == 'building' %}
+                    <span class="badge badge-blue">Building...</span>
+                {% elif b.status == 'failed' %}
+                    <span class="badge badge-red">Failed</span>
+                {% else %}
+                    <span class="badge badge-gray">{{ b.status }}</span>
+                {% endif %}
+            </td>
+            <td>{{ b.binary_size_bytes or '—' }} bytes</td>
+            <td>{{ b.created_at[:19] if b.created_at else '—' }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<div class="empty">
+    <div style="font-size:32px;margin-bottom:8px;">🔨</div>
+    <div>No firmware builds yet.</div>
+    <div style="font-size:13px;margin-top:4px;">
+        Complete a <a href="/missions" style="color:var(--accent);">Mission</a> to generate your first firmware build!
+    </div>
+</div>
+{% endif %}
+
+<h2 style="margin-top:24px;">OTA Update Log</h2>
+<div class="info-callout">
+    <strong>OTA = Over-The-Air.</strong> The Fleet Manager Agent sends firmware wirelessly to your devices.
+    For safety, it uses <strong>canary deployments</strong>: update 10% of devices first, wait for stability, then roll out to the rest.
+</div>
+{% if ota_log %}
+<table>
+    <thead><tr><th>Device</th><th>Firmware</th><th>Status</th><th>Progress</th><th>Started</th></tr></thead>
+    <tbody>
+    {% for o in ota_log %}
+        <tr>
+            <td>{{ o.device_id or '—' }}</td>
+            <td>{{ o.firmware_build_id or '—' }}</td>
+            <td>
+                {% if o.status == 'completed' %}
+                    <span class="badge badge-green">Completed</span>
+                {% elif o.status == 'pending' %}
+                    <span class="badge badge-orange">Pending</span>
+                {% elif o.status == 'in_progress' %}
+                    <span class="badge badge-blue">Updating...</span>
+                {% elif o.status == 'failed' %}
+                    <span class="badge badge-red">Failed</span>
+                {% elif o.status == 'rolled_back' %}
+                    <span class="badge badge-red">Rolled Back</span>
+                {% else %}
+                    <span class="badge badge-gray">{{ o.status }}</span>
+                {% endif %}
+            </td>
+            <td>
+                <div style="background:var(--surface2);border-radius:4px;height:20px;width:120px;overflow:hidden;display:inline-block;vertical-align:middle;">
+                    <div style="background:var(--success);height:100%;width:{{ o.progress_pct or 0 }}%;transition:width .3s;"></div>
+                </div>
+                <span style="font-size:12px;margin-left:6px;">{{ o.progress_pct or 0 }}%</span>
+            </td>
+            <td>{{ o.created_at[:19] if o.created_at else '—' }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<div class="empty">
+    <div style="font-size:32px;margin-bottom:8px;">📡</div>
+    <div>No OTA updates yet.</div>
+    <div style="font-size:13px;margin-top:4px;">
+        Build a firmware and <a href="/devices" style="color:var(--accent);">register a device</a> to start deploying!
+    </div>
+</div>
+{% endif %}
+{% endblock %}