icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/index.html

@@ -0,0 +1,207 @@
+{% extends "base.html" %}
+{% block title %}SparkPilot — Dashboard{% endblock %}
+{% block content %}
+<h1>SparkPilot Dashboard</h1>
+
+<div class="intro-panel">
+    <div class="intro-icon">⚡</div>
+    <h2>Welcome to SparkPilot!</h2>
+    <p>SparkPilot is your <strong>AI co-pilot for embedded systems</strong>. Tell it what you want in plain English,
+       and it generates real FreeRTOS code, compiles firmware, and deploys to devices — all powered by
+       <strong>11 specialized AI agents</strong> working together. Start with the
+       <a href="/missions" style="color:var(--accent);text-decoration:underline;">Missions</a> to learn step by step!</p>
+</div>
+
+<!-- Agent Status Bar -->
+<div class="card" style="margin-bottom:24px;padding:16px;">
+    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
+        <div style="display:flex;align-items:center;gap:8px;">
+            <div style="width:10px;height:10px;border-radius:50%;background:var(--success);animation:pulse 2s ease-in-out infinite;"></div>
+            <span style="font-size:14px;"><strong>8 AI Agents</strong> active</span>
+            <span style="color:var(--text-dim);font-size:13px;">| Orchestrator, Builder, Knowledge, Monitor, Security, Edge AI, Fleet Manager, Architect</span>
+        </div>
+        <a href="/agents" class="btn btn-sm btn-primary" style="text-decoration:none;">View All Agents</a>
+    </div>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Devices</div>
+        <div class="value blue">{{ stats.devices }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Online</div>
+        <div class="value green">{{ stats.devices_online }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Firmware Builds</div>
+        <div class="value purple">{{ stats.firmware_builds }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Missions</div>
+        <div class="value blue">{{ stats.missions_total }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Missions Completed</div>
+        <div class="value green">{{ stats.missions_completed }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">ML Models</div>
+        <div class="value purple">{{ stats.ml_models }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Sim Sessions</div>
+        <div class="value blue">{{ stats.sim_sessions }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Crash Dumps</div>
+        <div class="value red">{{ stats.crash_dumps }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">OTA Pending</div>
+        <div class="value orange">{{ stats.ota_pending }}</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">NL Commands</div>
+        <div class="value blue">{{ stats.nl_commands }}</div>
+    </div>
+</div>
+
+<h2>Natural Language Command</h2>
+<div class="info-callout">
+    <strong>How it works:</strong> You type a command → the <strong>Orchestrator Agent</strong> parses it →
+    the <strong>Embedded Builder Agent</strong> generates FreeRTOS C code → the <strong>Simulator</strong> runs it live.
+</div>
+<div class="card" style="margin-bottom:24px;">
+    <form id="nl-form" style="display:flex;gap:12px;margin-bottom:16px;">
+        <input type="text" id="nl-input" class="nl-input" placeholder="Try: &quot;Blink an LED every 2 seconds&quot;" style="flex:1;" />
+        <button type="submit" class="btn btn-primary" id="nl-btn">Generate</button>
+    </form>
+    <div id="nl-result" style="display:none;">
+        <div style="display:grid;grid-template-columns:1fr 280px;gap:16px;">
+            <!-- Code output -->
+            <div>
+                <div style="font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Generated FreeRTOS Code</div>
+                <div class="code-block" id="nl-code" style="margin-top:0;max-height:350px;overflow-y:auto;"></div>
+            </div>
+            <!-- Live device preview -->
+            <div id="device-preview" style="background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center;">
+                <div style="font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;">Device Preview</div>
+                <div id="preview-board" style="background:#1a1a2e;border-radius:12px;padding:24px;display:inline-block;position:relative;min-width:200px;">
+                    <!-- PCB silkscreen label -->
+                    <div style="color:#4a5568;font-size:10px;font-family:monospace;margin-bottom:16px;">ESP32-S3 DevKit</div>
+                    <!-- LED -->
+                    <div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:16px;">
+                        <div id="preview-led" style="width:20px;height:20px;border-radius:50%;background:#333;border:2px solid #555;transition:all 0.15s;"></div>
+                        <span style="font-size:11px;color:#666;font-family:monospace;">GPIO2</span>
+                    </div>
+                    <!-- Status -->
+                    <div id="preview-status" style="font-size:11px;color:var(--text-dim);font-family:monospace;margin-top:12px;">Waiting for command...</div>
+                </div>
+                <div id="preview-info" style="font-size:12px;color:var(--text-dim);margin-top:12px;"></div>
+            </div>
+        </div>
+    </div>
+    <!-- Placeholder when no result yet -->
+    <div id="nl-placeholder" style="text-align:center;padding:24px;color:var(--text-dim);border:2px dashed var(--border);border-radius:8px;">
+        <div style="font-size:32px;margin-bottom:8px;">⚡</div>
+        <div>Type a command above and click <strong>Generate</strong> to see firmware code + live preview</div>
+        <div style="font-size:13px;margin-top:4px;">Example: "Blink an LED every 2 seconds" or "Read temperature sensor every 5 seconds"</div>
+    </div>
+</div>
+
+<h2>Recent Activity</h2>
+{% if recent_audit %}
+<table>
+    <thead><tr><th>Time</th><th>Event</th><th>Actor</th><th>Action</th></tr></thead>
+    <tbody>
+    {% for e in recent_audit %}
+        <tr>
+            <td>{{ e.created_at[:19] if e.created_at else '—' }}</td>
+            <td>{{ e.event_type or '—' }}</td>
+            <td>{{ e.actor or '—' }}</td>
+            <td>{{ e.action or '—' }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+{% else %}
+<div class="empty">No activity yet. Start a mission or run a simulator session!</div>
+{% endif %}
+
+<script>
+let ledInterval = null;
+
+document.getElementById('nl-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    const cmd = document.getElementById('nl-input').value.trim();
+    if (!cmd) return;
+    const btn = document.getElementById('nl-btn');
+    btn.textContent = 'Generating...';
+    btn.disabled = true;
+    try {
+        const res = await fetch('/api/nl-command', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({command: cmd, board: 'simulator'})
+        });
+        const data = await res.json();
+        const block = document.getElementById('nl-code');
+        block.textContent = data.code || data.message || JSON.stringify(data, null, 2);
+        document.getElementById('nl-placeholder').style.display = 'none';
+        document.getElementById('nl-result').style.display = 'block';
+
+        // Animate device preview based on command
+        animatePreview(cmd, data.code || '');
+    } catch(err) {
+        alert('Error: ' + err.message);
+    } finally {
+        btn.textContent = 'Generate';
+        btn.disabled = false;
+    }
+});
+
+function animatePreview(cmd, code) {
+    const led = document.getElementById('preview-led');
+    const status = document.getElementById('preview-status');
+    const info = document.getElementById('preview-info');
+    if (ledInterval) { clearInterval(ledInterval); ledInterval = null; }
+
+    // Parse delay from code (e.g., pdMS_TO_TICKS(2000) or vTaskDelay)
+    const delayMatch = code.match(/pdMS_TO_TICKS\((\d+)\)/);
+    const delayMs = delayMatch ? parseInt(delayMatch[1]) : 1000;
+
+    const cmdLower = cmd.toLowerCase();
+    if (cmdLower.includes('blink') || cmdLower.includes('led') || cmdLower.includes('flash') || cmdLower.includes('toggle')) {
+        // LED blink animation
+        let on = false;
+        const color = cmdLower.includes('green') ? '#22c55e' : cmdLower.includes('blue') ? '#3b82f6' : '#ef4444';
+        const colorGlow = cmdLower.includes('green') ? 'rgba(34,197,94,.6)' : cmdLower.includes('blue') ? 'rgba(59,130,246,.6)' : 'rgba(239,68,68,.6)';
+        status.textContent = 'Running vBlinkTask...';
+        info.textContent = 'Period: ' + delayMs + 'ms (' + (1000/delayMs).toFixed(1) + ' Hz)';
+        ledInterval = setInterval(function() {
+            on = !on;
+            led.style.background = on ? color : '#333';
+            led.style.boxShadow = on ? '0 0 12px ' + colorGlow : 'none';
+        }, Math.min(delayMs, 2000)); // cap visual speed at 2s
+    } else if (cmdLower.includes('sensor') || cmdLower.includes('temperature') || cmdLower.includes('read')) {
+        // Sensor reading animation
+        led.style.background = '#22c55e';
+        led.style.boxShadow = '0 0 8px rgba(34,197,94,.4)';
+        status.textContent = 'Reading sensor data...';
+        let reading = 22.0;
+        info.textContent = 'Temp: ' + reading.toFixed(1) + '°C';
+        ledInterval = setInterval(function() {
+            reading = 20 + Math.random() * 8;
+            info.textContent = 'Temp: ' + reading.toFixed(1) + '°C';
+        }, Math.min(delayMs, 2000));
+    } else {
+        // Generic task running
+        led.style.background = '#3b82f6';
+        led.style.boxShadow = '0 0 8px rgba(59,130,246,.4)';
+        status.textContent = 'Task running...';
+        info.textContent = 'Delay: ' + delayMs + 'ms';
+    }
+}
+</script>
+{% endblock %}

tools/dashboard/templates/intelligence.html

@@ -0,0 +1,336 @@
+{% extends "base.html" %}
+{% block title %}Intelligence — {{ app_name }}{% endblock %}
+{% block content %}
+<h1>Intelligence Dashboard</h1>
+<div class="intro-panel">
+    <h2>Phase 5: Intelligence — Semantic Cache, RAG, Budget Routing</h2>
+    <p>Semantic caching for 40-60% token savings, corrective RAG for compliance retrieval,
+       budget-aware routing, prompt versioning, and output verification gates.</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('cache')">Semantic Cache</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('budget')">Budget Routing</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('rag')">Corrective RAG</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('prompts')">Prompt Registry</button>
+    <button class="btn btn-primary tab-btn" onclick="switchTab('verifier')">Output Verifier</button>
+</div>
+
+<!-- ═══════════════ Semantic Cache Panel ═══════════════ -->
+<div id="panel-cache" class="tab-panel">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Cache Entries</div><div class="value blue" id="cache-entries">—</div></div>
+        <div class="stat-card"><div class="label">Total Hits</div><div class="value green" id="cache-hits">—</div></div>
+        <div class="stat-card"><div class="label">Hit Rate</div><div class="value purple" id="cache-hit-rate">—</div></div>
+        <div class="stat-card"><div class="label">Token Savings</div><div class="value orange" id="cache-savings">~60%</div></div>
+    </div>
+    <div style="display:flex;gap:8px;margin-bottom:16px;">
+        <button class="btn btn-primary" id="cache-load-btn" onclick="loadCache()">Load Cache Stats</button>
+        <button class="btn btn-success" onclick="cleanupCache()">Cleanup Expired</button>
+    </div>
+    <h2>Cache Tiers</h2>
+    <table id="cache-tier-table" style="margin-top:8px;">
+        <thead><tr><th>Tier</th><th>Match Strategy</th><th>Latency</th><th>Description</th></tr></thead>
+        <tbody>
+            <tr><td><span class="badge badge-green">Tier 1</span></td><td>Exact Hash</td><td>&lt; 1ms</td><td>SHA-256 hash of normalized prompt text</td></tr>
+            <tr><td><span class="badge badge-blue">Tier 2</span></td><td>Semantic</td><td>~50ms</td><td>Cosine similarity &gt; 0.92 on embeddings</td></tr>
+            <tr><td><span class="badge badge-orange">Tier 3</span></td><td>Cache Miss</td><td>Variable</td><td>Full LLM invocation required</td></tr>
+        </tbody>
+    </table>
+    <h2 style="margin-top:24px;">TTL by Function Tier</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Function Tier</th><th>TTL</th><th>Expected Hit Rate</th><th>Functions</th></tr></thead>
+        <tbody>
+            <tr><td>Scanner</td><td>30 days</td><td>60-70%</td><td style="font-size:12px;">compliance_export, narrative_generation, memory_consolidation, ...</td></tr>
+            <tr><td>Worker</td><td>7 days</td><td>20-30%</td><td style="font-size:12px;">code_generation, wg_rewrite, wg_coherence_check</td></tr>
+            <tr><td>Planner</td><td>1 day</td><td>5-10%</td><td style="font-size:12px;">intake_persona_response</td></tr>
+        </tbody>
+    </table>
+    <div id="cache-by-function" style="margin-top:16px;"></div>
+</div>
+
+<!-- ═══════════════ Budget Routing Panel ═══════════════ -->
+<div id="panel-budget" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Monthly Budget</div><div class="value blue" id="budget-monthly">—</div></div>
+        <div class="stat-card"><div class="label">Tokens Used</div><div class="value green" id="budget-used">—</div></div>
+        <div class="stat-card"><div class="label">Budget Remaining</div><div class="value purple" id="budget-remaining">—</div></div>
+        <div class="stat-card"><div class="label">Current Tier</div><div class="value orange" id="budget-tier">Normal</div></div>
+    </div>
+    <button class="btn btn-primary" id="budget-load-btn" onclick="loadBudget()">Load Budget Status</button>
+    <h2 style="margin-top:24px;">Budget Thresholds</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Threshold</th><th>Budget %</th><th>Action</th><th>Impact</th></tr></thead>
+        <tbody>
+            <tr><td><span class="badge badge-green">Normal</span></td><td>&lt; 80%</td><td>Full routing</td><td>All tiers available</td></tr>
+            <tr><td><span class="badge badge-orange">Warning</span></td><td>80-90%</td><td>Alert ISSO</td><td>Planner requests flagged</td></tr>
+            <tr><td><span class="badge badge-red">Degraded</span></td><td>90-100%</td><td>Downgrade Worker→Scanner</td><td>Worker uses local-only</td></tr>
+            <tr><td><span class="badge badge-purple">Blocked</span></td><td>&gt; 100%</td><td>Block Planner tier</td><td>Only Scanner/local available</td></tr>
+        </tbody>
+    </table>
+    <div id="budget-history" style="margin-top:16px;"></div>
+</div>
+
+<!-- ═══════════════ Corrective RAG Panel ═══════════════ -->
+<div id="panel-rag" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Total Queries</div><div class="value blue" id="rag-queries">—</div></div>
+        <div class="stat-card"><div class="label">Avg Relevance</div><div class="value green" id="rag-relevance">—</div></div>
+        <div class="stat-card"><div class="label">Direct Hits</div><div class="value purple" id="rag-direct">—</div></div>
+        <div class="stat-card"><div class="label">Corrections Applied</div><div class="value orange" id="rag-corrections">—</div></div>
+    </div>
+    <div style="display:flex;gap:8px;margin-bottom:16px;align-items:flex-end;">
+        <div style="flex:1;">
+            <div class="section-label">Test Query</div>
+            <input type="text" id="rag-query" class="nl-input" placeholder="Enter a compliance query, e.g. 'AC-2 account management implementation'" />
+        </div>
+        <button class="btn btn-primary" onclick="testRAG()">Retrieve & Evaluate</button>
+        <button class="btn btn-primary" id="rag-stats-btn" onclick="loadRAGStats()">Load Stats</button>
+    </div>
+    <div id="rag-result" style="display:none;">
+        <h2>Retrieval Result</h2>
+        <div id="rag-scores" class="stat-grid" style="margin-top:8px;"></div>
+        <div id="rag-strategy" style="margin-top:8px;"></div>
+        <div id="rag-documents" style="margin-top:8px;"></div>
+    </div>
+    <h2 style="margin-top:24px;">Correction Strategies</h2>
+    <div class="agent-grid" style="margin-top:12px;">
+        <div class="agent-card">
+            <div class="agent-name">Direct</div>
+            <div class="agent-role">Relevance &gt; 0.8</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Document used as-is. High keyword overlap and control ID matching.</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Refined</div>
+            <div class="agent-role">Relevance 0.5 – 0.8</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Query expanded with synonyms, NIST control full names, framework terms.</div>
+        </div>
+        <div class="agent-card">
+            <div class="agent-name">Decomposed</div>
+            <div class="agent-role">Relevance &lt; 0.5</div>
+            <div style="font-size:12px;color:var(--text-dim);margin-top:8px;">Complex query split into atomic sub-queries, results merged.</div>
+        </div>
+    </div>
+</div>
+
+<!-- ═══════════════ Prompt Registry Panel ═══════════════ -->
+<div id="panel-prompts" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Registered Prompts</div><div class="value blue" id="prompt-count">—</div></div>
+        <div class="stat-card"><div class="label">Total Versions</div><div class="value green" id="prompt-versions">—</div></div>
+        <div class="stat-card"><div class="label">Active Prompts</div><div class="value purple" id="prompt-active">—</div></div>
+        <div class="stat-card"><div class="label">Provenance</div><div class="value orange">SHA-256</div></div>
+    </div>
+    <button class="btn btn-primary" id="prompt-load-btn" onclick="loadPrompts()">Load Prompt Registry</button>
+    <table id="prompt-table" style="margin-top:16px;">
+        <thead><tr><th>Prompt ID</th><th>Version</th><th>Function</th><th>Content Hash</th><th>Status</th><th>Created</th></tr></thead>
+        <tbody id="prompt-tbody"></tbody>
+    </table>
+</div>
+
+<!-- ═══════════════ Output Verifier Panel ═══════════════ -->
+<div id="panel-verifier" class="tab-panel" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card"><div class="label">Total Checks</div><div class="value blue" id="verifier-checks">—</div></div>
+        <div class="stat-card"><div class="label">Violations Found</div><div class="value red" id="verifier-violations">—</div></div>
+        <div class="stat-card"><div class="label">Blocked Outputs</div><div class="value orange" id="verifier-blocked">—</div></div>
+        <div class="stat-card"><div class="label">Pass Rate</div><div class="value green" id="verifier-pass-rate">—</div></div>
+    </div>
+    <div style="display:flex;gap:8px;margin-bottom:16px;align-items:flex-end;">
+        <div style="flex:1;">
+            <div class="section-label">Test Output Text</div>
+            <textarea id="verifier-text" class="nl-input" rows="3" placeholder="Paste LLM output text to verify..."></textarea>
+        </div>
+        <button class="btn btn-primary" onclick="verifyOutput()">Verify Output</button>
+        <button class="btn btn-primary" id="verifier-stats-btn" onclick="loadVerifierStats()">Load Stats</button>
+    </div>
+    <div id="verifier-result" style="display:none;">
+        <h2>Verification Result</h2>
+        <div id="verifier-result-content" style="margin-top:8px;"></div>
+    </div>
+    <h2 style="margin-top:24px;">Detection Categories</h2>
+    <table style="margin-top:8px;">
+        <thead><tr><th>Category</th><th>Severity</th><th>Detection Method</th><th>Examples</th></tr></thead>
+        <tbody>
+            <tr><td>System Prompt Leaks</td><td><span class="badge badge-red">Critical</span></td><td>Pattern matching</td><td style="font-size:12px;">"You are a", "Your instructions are", "&lt;&lt;SYS&gt;&gt;"</td></tr>
+            <tr><td>Credential Leaks</td><td><span class="badge badge-red">Critical</span></td><td>Regex patterns</td><td style="font-size:12px;">AKIA..., sk-..., bearer tokens, connection strings</td></tr>
+            <tr><td>Classification Overflow</td><td><span class="badge badge-red">High</span></td><td>Keyword scan</td><td style="font-size:12px;">SECRET, TOP SECRET, TS//SCI, NOFORN</td></tr>
+            <tr><td>PII Exposure</td><td><span class="badge badge-orange">Medium</span></td><td>Pattern matching</td><td style="font-size:12px;">SSN (XXX-XX-XXXX), credit card numbers</td></tr>
+            <tr><td>Internal Path Leaks</td><td><span class="badge badge-orange">Low</span></td><td>Path detection</td><td style="font-size:12px;">Absolute paths, internal URLs, DB connection strings</td></tr>
+        </tbody>
+    </table>
+</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');
+}
+
+// ── Semantic Cache ───────────────────────────────────────
+function loadCache() {
+    fetch('/api/intelligence/cache').then(r => r.json()).then(d => {
+        document.getElementById('cache-entries').textContent = d.total_entries || 0;
+        document.getElementById('cache-hits').textContent = d.total_hits || 0;
+        const hitRate = d.hit_rate != null ? (d.hit_rate * 100).toFixed(1) + '%' : '0%';
+        document.getElementById('cache-hit-rate').textContent = hitRate;
+
+        const byFunc = d.entries_by_function || {};
+        if (Object.keys(byFunc).length > 0) {
+            let html = '<h2 style="margin-top:16px;">Entries by Function</h2><div class="agent-grid" style="margin-top:8px;">';
+            for (const [fn, count] of Object.entries(byFunc)) {
+                html += `<div class="agent-card"><div class="agent-name">${fn}</div><div class="agent-role">${count} cached entries</div></div>`;
+            }
+            html += '</div>';
+            document.getElementById('cache-by-function').innerHTML = html;
+        }
+    }).catch(e => console.error('Cache load error:', e));
+}
+
+function cleanupCache() {
+    fetch('/api/intelligence/cache/cleanup', {method: 'POST'}).then(r => r.json()).then(d => {
+        alert('Cleaned up ' + (d.removed || 0) + ' expired entries');
+        loadCache();
+    }).catch(e => console.error('Cache cleanup error:', e));
+}
+
+// ── Budget Routing ───────────────────────────────────────
+function loadBudget() {
+    fetch('/api/intelligence/budget').then(r => r.json()).then(d => {
+        document.getElementById('budget-monthly').textContent = (d.monthly_budget || 0).toLocaleString() + ' tokens';
+        document.getElementById('budget-used').textContent = (d.tokens_used || 0).toLocaleString();
+        document.getElementById('budget-remaining').textContent = (d.tokens_remaining || 0).toLocaleString();
+        const pct = d.budget_pct || 0;
+        const tier = pct > 100 ? 'Blocked' : pct > 90 ? 'Degraded' : pct > 80 ? 'Warning' : 'Normal';
+        const tierEl = document.getElementById('budget-tier');
+        tierEl.textContent = tier;
+        tierEl.className = 'value ' + (tier === 'Normal' ? 'green' : tier === 'Warning' ? 'orange' : 'red');
+    }).catch(e => console.error('Budget load error:', e));
+}
+
+// ── Corrective RAG ───────────────────────────────────────
+function testRAG() {
+    const query = document.getElementById('rag-query').value.trim();
+    if (!query) return;
+    fetch('/api/intelligence/rag', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({query: query})
+    }).then(r => r.json()).then(d => {
+        document.getElementById('rag-result').style.display = 'block';
+
+        // Strategy badge
+        const strategy = d.strategy_used || 'direct';
+        const stratBadge = strategy === 'direct' ? 'badge-green' : strategy === 'refined' ? 'badge-blue' : 'badge-orange';
+        document.getElementById('rag-strategy').innerHTML =
+            `<div class="info-callout"><strong>Strategy used:</strong> <span class="badge ${stratBadge}">${strategy}</span> — Avg relevance: ${(d.avg_relevance || 0).toFixed(2)}</div>`;
+
+        // Documents
+        const docs = d.documents || [];
+        let html = '';
+        docs.forEach((doc, i) => {
+            const score = (d.relevance_scores || [])[i] || 0;
+            const scoreBadge = score > 0.8 ? 'badge-green' : score > 0.5 ? 'badge-blue' : 'badge-orange';
+            html += `<div class="card"><div class="card-header"><strong>Document ${i+1}</strong><span class="badge ${scoreBadge}">${score.toFixed(2)}</span></div><div style="font-size:13px;color:var(--text-dim);">${(doc.text || doc.content || doc).toString().substring(0, 200)}...</div></div>`;
+        });
+        document.getElementById('rag-documents').innerHTML = html || '<div class="empty">No documents retrieved</div>';
+    }).catch(e => console.error('RAG test error:', e));
+}
+
+function loadRAGStats() {
+    fetch('/api/intelligence/rag/stats').then(r => r.json()).then(d => {
+        document.getElementById('rag-queries').textContent = d.total_queries || 0;
+        document.getElementById('rag-relevance').textContent = (d.avg_relevance || 0).toFixed(2);
+        const strategies = d.strategy_counts || {};
+        document.getElementById('rag-direct').textContent = strategies.direct || 0;
+        document.getElementById('rag-corrections').textContent = (strategies.refined || 0) + (strategies.decomposed || 0);
+    }).catch(e => console.error('RAG stats error:', e));
+}
+
+// ── Prompt Registry ──────────────────────────────────────
+function loadPrompts() {
+    fetch('/api/intelligence/prompts').then(r => r.json()).then(d => {
+        const prompts = d.prompts || [];
+        document.getElementById('prompt-count').textContent = prompts.length;
+        const totalVersions = prompts.reduce((s, p) => s + (p.version || 1), 0);
+        document.getElementById('prompt-versions').textContent = totalVersions;
+        document.getElementById('prompt-active').textContent = prompts.filter(p => p.active).length;
+
+        const tbody = document.getElementById('prompt-tbody');
+        tbody.innerHTML = '';
+        if (prompts.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" class="empty">No prompts registered. Register prompts via CLI or API.</td></tr>';
+            return;
+        }
+        prompts.forEach(p => {
+            const badge = p.active ? 'badge-green' : 'badge-gray';
+            const status = p.active ? 'Active' : 'Deprecated';
+            const hash = (p.content_hash || '').substring(0, 12) + '...';
+            tbody.innerHTML += `<tr>
+                <td>${p.prompt_id}</td>
+                <td>v${p.version || 1}</td>
+                <td>${p.function_name || '—'}</td>
+                <td style="font-size:12px;font-family:monospace;">${hash}</td>
+                <td><span class="badge ${badge}">${status}</span></td>
+                <td style="font-size:12px;">${p.created_at || '—'}</td>
+            </tr>`;
+        });
+    }).catch(e => console.error('Prompt load error:', e));
+}
+
+// ── Output Verifier ──────────────────────────────────────
+function verifyOutput() {
+    const text = document.getElementById('verifier-text').value.trim();
+    if (!text) return;
+    fetch('/api/intelligence/verify', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({text: text})
+    }).then(r => r.json()).then(d => {
+        document.getElementById('verifier-result').style.display = 'block';
+        const passed = d.passed;
+        const riskLevel = d.risk_level || 'none';
+        const violations = d.violations || [];
+        const riskBadge = riskLevel === 'none' ? 'badge-green' : riskLevel === 'low' ? 'badge-blue' :
+                          riskLevel === 'medium' ? 'badge-orange' : 'badge-red';
+
+        let html = `<div class="info-callout">
+            <strong>Result:</strong> <span class="badge ${passed ? 'badge-green' : 'badge-red'}">${passed ? 'PASSED' : 'FAILED'}</span>
+            &nbsp; <strong>Risk Level:</strong> <span class="badge ${riskBadge}">${riskLevel}</span>
+            &nbsp; <strong>Violations:</strong> ${violations.length}
+        </div>`;
+
+        if (violations.length > 0) {
+            html += '<table style="margin-top:8px;"><thead><tr><th>Type</th><th>Severity</th><th>Description</th></tr></thead><tbody>';
+            violations.forEach(v => {
+                const sevBadge = v.severity === 'critical' ? 'badge-red' : v.severity === 'high' ? 'badge-red' :
+                                 v.severity === 'medium' ? 'badge-orange' : 'badge-blue';
+                html += `<tr><td>${v.type}</td><td><span class="badge ${sevBadge}">${v.severity}</span></td><td style="font-size:12px;">${v.description}</td></tr>`;
+            });
+            html += '</tbody></table>';
+        }
+        document.getElementById('verifier-result-content').innerHTML = html;
+    }).catch(e => console.error('Verify error:', e));
+}
+
+function loadVerifierStats() {
+    fetch('/api/intelligence/verify/stats').then(r => r.json()).then(d => {
+        document.getElementById('verifier-checks').textContent = d.total_checks || 0;
+        const byType = d.violations_by_type || {};
+        const totalViolations = Object.values(byType).reduce((s, v) => s + v, 0);
+        document.getElementById('verifier-violations').textContent = totalViolations;
+        document.getElementById('verifier-blocked').textContent = d.block_count || 0;
+        const total = d.total_checks || 1;
+        const passRate = ((total - (d.block_count || 0)) / total * 100).toFixed(1) + '%';
+        document.getElementById('verifier-pass-rate').textContent = passRate;
+    }).catch(e => console.error('Verifier stats error:', e));
+}
+
+// Auto-load cache stats on page load
+document.addEventListener('DOMContentLoaded', loadCache);
+</script>
+{% endblock %}