icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/audit_engine.html

@@ -0,0 +1,844 @@
+{% extends "base.html" %}
+{% block title %}Audit Engine — Compliance Report Card{% endblock %}
+{% block content %}
+<style>
+    .ae-wrap { max-width: 100%; margin: 0 auto; padding: 20px 0; }
+    .ae-hero { text-align: center; padding: 30px 20px 20px; }
+    .ae-hero h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; }
+    .ae-hero p { color: var(--text-dim); font-size: 13px; max-width: 700px; margin: 0 auto; }
+
+    /* Target Selector */
+    .ae-target { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-target h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-target-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
+    .ae-target-row .field { display: flex; flex-direction: column; gap: 4px; }
+    .ae-target-row .field label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
+    .ae-target-row .field input, .ae-target-row .field select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 13px; min-width: 180px; }
+    .ae-btn { padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; }
+    .ae-btn-primary { background: var(--accent); color: #fff; }
+    .ae-btn-primary:hover { filter: brightness(1.15); }
+    .ae-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
+    .ae-btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
+    .ae-btn-secondary:hover { border-color: var(--accent); }
+
+    /* Auth section */
+    .ae-auth { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
+    .ae-auth.visible { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
+
+    /* Score Cards */
+    .ae-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
+    .ae-score-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: all .15s; }
+    .ae-score-card:hover { border-color: var(--accent); transform: translateY(-1px); }
+    .ae-score-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
+    .ae-score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+    .ae-score-name { font-size: 14px; font-weight: 600; }
+    .ae-score-grade { font-size: 22px; font-weight: 800; }
+    .ae-score-grade.a { color: #22c55e; }
+    .ae-score-grade.b { color: #84cc16; }
+    .ae-score-grade.c { color: #facc15; }
+    .ae-score-grade.d { color: #f97316; }
+    .ae-score-grade.f { color: #ef4444; }
+    .ae-score-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
+    .ae-score-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
+    .ae-score-fill.green { background: #22c55e; }
+    .ae-score-fill.yellow { background: #facc15; }
+    .ae-score-fill.red { background: #ef4444; }
+    .ae-score-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-dim); }
+    .ae-score-pct { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+
+    /* Comparison View */
+    .ae-compare { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; display: none; }
+    .ae-compare.visible { display: block; }
+    .ae-compare h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-compare-row { display: flex; gap: 10px; margin-bottom: 12px; align-items: end; flex-wrap: wrap; }
+    .ae-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+    .ae-compare-col { }
+    .ae-compare-col h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
+
+    /* Category Detail */
+    .ae-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-detail h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-cat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+    .ae-cat-row:last-child { border-bottom: none; }
+    .ae-cat-name { flex: 1; font-size: 13px; font-weight: 500; }
+    .ae-cat-bar { width: 200px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
+    .ae-cat-fill { height: 100%; border-radius: 3px; }
+    .ae-cat-score { font-size: 13px; font-weight: 600; width: 60px; text-align: right; }
+    .ae-cat-counts { font-size: 11px; color: var(--text-dim); width: 140px; text-align: right; }
+
+    /* AI Advisor Panel */
+    .ae-advisor { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-advisor h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+    .ae-advisor-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
+    .ae-rec { padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; transition: all .15s; }
+    .ae-rec:hover { border-color: var(--accent); }
+    .ae-rec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .ae-rec-title { font-size: 13px; font-weight: 600; }
+    .ae-rec-badge { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
+    .ae-rec-badge.critical { background: rgba(239,68,68,.15); color: #ef4444; }
+    .ae-rec-badge.high { background: rgba(249,115,22,.15); color: #f97316; }
+    .ae-rec-badge.medium { background: rgba(250,204,21,.15); color: #eab308; }
+    .ae-rec-badge.low { background: rgba(34,197,94,.15); color: #22c55e; }
+    .ae-rec-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.5; }
+    .ae-rec-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-dim); }
+    .ae-rec-steps { display: none; margin-top: 8px; padding: 8px 12px; background: var(--surface2); border-radius: 6px; font-size: 12px; }
+    .ae-rec-steps.open { display: block; }
+    .ae-rec-steps ol { margin: 0; padding-left: 18px; }
+    .ae-rec-steps li { margin-bottom: 4px; }
+
+    .ae-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
+    .ae-tab { padding: 8px 16px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-dim); transition: all .15s; }
+    .ae-tab:hover { color: var(--text); }
+    .ae-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+
+    /* Loading / Empty */
+    .ae-loading { text-align: center; padding: 40px; color: var(--text-dim); }
+    .ae-loading .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ae-spin .6s linear infinite; margin-bottom: 12px; }
+    @keyframes ae-spin { to { transform: rotate(360deg); } }
+    .ae-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); }
+
+    /* Export */
+    .ae-export { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
+
+    /* Status badge */
+    .ae-status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
+    .ae-status.pass { background: #22c55e; }
+    .ae-status.partial { background: #facc15; }
+    .ae-status.fail { background: #ef4444; }
+    .ae-status.na { background: #6b7280; }
+
+    /* Trend / History */
+    .ae-trend { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-trend h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-trend-chart { display: flex; align-items: end; gap: 4px; height: 80px; padding: 0 8px; }
+    .ae-trend-bar { flex: 1; min-width: 20px; max-width: 50px; border-radius: 3px 3px 0 0; transition: height .3s; position: relative; }
+    .ae-trend-bar:hover::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--surface2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 10px; white-space: nowrap; }
+    .ae-trend-labels { display: flex; gap: 4px; padding: 4px 8px 0; }
+    .ae-trend-labels span { flex: 1; min-width: 20px; max-width: 50px; font-size: 9px; color: var(--text-dim); text-align: center; overflow: hidden; }
+    .ae-scan-history { margin-top: 12px; }
+    .ae-scan-history table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    .ae-scan-history th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border); color: var(--text-dim); font-size: 11px; text-transform: uppercase; }
+    .ae-scan-history td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
+    .ae-scan-history tr:hover { background: var(--surface2); }
+
+    /* Self-Heal */
+    .ae-btn-heal { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; font-weight: 600; }
+    .ae-btn-heal:hover { background: rgba(34,197,94,.25); }
+    .ae-btn-heal:disabled { opacity: .5; cursor: not-allowed; }
+    .ae-btn-exclude { background: rgba(250,204,21,.1); color: #eab308; border: 1px solid rgba(250,204,21,.3); padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; font-weight: 600; }
+    .ae-btn-exclude:hover { background: rgba(250,204,21,.2); }
+    .ae-btn-poam { background: rgba(99,102,241,.1); color: var(--accent); border: 1px solid rgba(99,102,241,.3); padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; font-weight: 600; }
+    .ae-btn-poam:hover { background: rgba(99,102,241,.2); }
+    .ae-heal-result { margin-top: 6px; font-size: 11px; padding: 6px 10px; border-radius: 4px; }
+    .ae-heal-result.success { background: rgba(34,197,94,.1); color: #22c55e; }
+    .ae-heal-result.error { background: rgba(239,68,68,.1); color: #ef4444; }
+
+    /* Action Plans */
+    .ae-action-plans { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-action-plans h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
+    .ae-action-plans-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
+    .ae-plan-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; border-left: 4px solid #ef4444; }
+    .ae-plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+    .ae-plan-name { font-size: 14px; font-weight: 600; }
+    .ae-plan-score { font-size: 13px; }
+    .ae-phase { padding: 10px 12px; background: var(--surface2); border-radius: 6px; margin-bottom: 8px; }
+    .ae-phase-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .ae-phase-name { font-size: 13px; font-weight: 600; }
+    .ae-phase-meta { font-size: 11px; color: var(--text-dim); }
+    .ae-phase-controls { font-size: 12px; margin-top: 6px; }
+    .ae-phase-controls li { margin-bottom: 3px; }
+    .ae-phase-target { text-align: right; font-size: 12px; margin-top: 4px; color: var(--accent); font-weight: 600; }
+
+    /* Exclusion Modal */
+    .ae-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; }
+    .ae-modal-overlay.open { display: flex; }
+    .ae-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; }
+    .ae-modal h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-modal .field { margin-bottom: 10px; }
+    .ae-modal .field label { display: block; font-size: 11px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
+    .ae-modal .field input, .ae-modal .field select, .ae-modal .field textarea { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px; border-radius: 6px; font-size: 13px; box-sizing: border-box; }
+    .ae-modal .field textarea { resize: vertical; min-height: 60px; }
+    .ae-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+
+    /* POAM Panel */
+    .ae-poam { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
+    .ae-poam h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
+    .ae-poam table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    .ae-poam th { text-align: left; padding: 8px; border-bottom: 2px solid var(--border); font-size: 11px; text-transform: uppercase; color: var(--text-dim); }
+    .ae-poam td { padding: 8px; border-bottom: 1px solid var(--border); }
+    .ae-poam tr:hover { background: var(--surface2); }
+    .ae-priority { padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }
+    .ae-priority.P1 { background: rgba(239,68,68,.15); color: #ef4444; }
+    .ae-priority.P2 { background: rgba(249,115,22,.15); color: #f97316; }
+    .ae-priority.P3 { background: rgba(250,204,21,.15); color: #eab308; }
+    .ae-priority.P4 { background: rgba(34,197,94,.15); color: #22c55e; }
+</style>
+
+<div class="ae-wrap">
+    <div class="ae-hero">
+        <h1>Audit Engine</h1>
+        <p>Unified compliance report card with per-regime scoring, side-by-side gap analysis, and AI-powered improvement recommendations</p>
+    </div>
+
+    <!-- Target Selector -->
+    <div class="ae-target">
+        <h3>Audit Target</h3>
+        <div class="ae-target-row">
+            <div class="field">
+                <label>Target Type</label>
+                <select id="ae-type" onchange="aeToggleAuth()">
+                    <option value="icdev">ICDEV (this installation)</option>
+                    <option value="child_app">Child App</option>
+                    <option value="module">Module</option>
+                    <option value="byos">Bring Your Own Software</option>
+                </select>
+            </div>
+            <div class="field">
+                <label>Path or Git URL</label>
+                <input type="text" id="ae-target" value="." placeholder="./path or https://github.com/..." style="min-width:320px">
+            </div>
+            <div class="field">
+                <label>Project ID (optional)</label>
+                <input type="text" id="ae-project-id" value="sparkpilot" placeholder="e.g. sparkpilot">
+            </div>
+            <button class="ae-btn ae-btn-primary" id="ae-run-btn" onclick="aeRunAudit()">Run Audit</button>
+            <button class="ae-btn ae-btn-secondary" onclick="aeToggleCompare()">Compare Regimes</button>
+        </div>
+        <!-- Git Auth (for BYOS) -->
+        <div class="ae-auth" id="ae-auth">
+            <div class="field">
+                <label>Auth Method</label>
+                <select id="ae-auth-method">
+                    <option value="public">Public (no auth)</option>
+                    <option value="token">HTTPS Token</option>
+                    <option value="ssh">SSH Key</option>
+                </select>
+            </div>
+            <div class="field" id="ae-token-field" style="display:none">
+                <label>Access Token</label>
+                <input type="password" id="ae-token" placeholder="ghp_... or PAT">
+            </div>
+            <div class="field" id="ae-ssh-field" style="display:none">
+                <label>SSH Key Path</label>
+                <input type="text" id="ae-ssh-key" placeholder="~/.ssh/id_ed25519">
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading State -->
+    <div class="ae-loading" id="ae-loading" style="display:none">
+        <div class="spinner"></div>
+        <div>Running audit scan across all regimes...</div>
+    </div>
+
+    <!-- Results Container -->
+    <div id="ae-results" style="display:none">
+        <!-- Export buttons -->
+        <div class="ae-export">
+            <button class="ae-btn ae-btn-secondary" onclick="aeExport('json')">Export JSON</button>
+            <button class="ae-btn ae-btn-secondary" onclick="aeExport('markdown')">Export Markdown</button>
+        </div>
+
+        <!-- Score Cards -->
+        <div class="ae-scores" id="ae-scores"></div>
+
+        <!-- Comparison View -->
+        <div class="ae-compare" id="ae-compare">
+            <h3>Side-by-Side Regime Comparison</h3>
+            <div class="ae-compare-row">
+                <div class="field">
+                    <label>Baseline</label>
+                    <select id="ae-compare-baseline" onchange="aeRunCompare()"></select>
+                </div>
+                <div class="field">
+                    <label>Target</label>
+                    <select id="ae-compare-target" onchange="aeRunCompare()"></select>
+                </div>
+            </div>
+            <div id="ae-compare-result"></div>
+        </div>
+
+        <!-- Category Detail -->
+        <div class="ae-detail" id="ae-detail" style="display:none">
+            <h3 id="ae-detail-title">Category Breakdown</h3>
+            <div id="ae-detail-cats"></div>
+        </div>
+
+        <!-- Scan History & Trends -->
+        <div class="ae-trend" id="ae-trend" style="display:none">
+            <h3>Score Trends</h3>
+            <div class="ae-trend-chart" id="ae-trend-chart"></div>
+            <div class="ae-trend-labels" id="ae-trend-labels"></div>
+            <div class="ae-scan-history" id="ae-scan-history"></div>
+        </div>
+
+        <!-- Action Plans (regimes below 80%) -->
+        <div class="ae-action-plans" id="ae-action-plans" style="display:none">
+            <h3>Action Plans — Regimes Below 80%</h3>
+            <p class="ae-action-plans-sub">Concrete phased remediation roadmaps with estimated score progression</p>
+            <div id="ae-plans-content"></div>
+        </div>
+
+        <!-- AI Advisor -->
+        <div class="ae-advisor" id="ae-advisor">
+            <h3>AI Advisor — Improvement Recommendations</h3>
+            <p class="ae-advisor-sub">Ranked by ROI (highest impact, lowest effort first)</p>
+            <div class="ae-tabs">
+                <div class="ae-tab active" onclick="aeShowTab('roi')">Best ROI</div>
+                <div class="ae-tab" onclick="aeShowTab('impact')">By Impact</div>
+                <div class="ae-tab" onclick="aeShowTab('effort')">By Effort</div>
+                <div class="ae-tab" onclick="aeShowTab('quick')">Quick Wins</div>
+            </div>
+            <div id="ae-recs"></div>
+        </div>
+
+        <!-- POAM -->
+        <div class="ae-poam" id="ae-poam" style="display:none">
+            <h3>Plan of Action & Milestones (POAM)</h3>
+            <div style="display:flex;gap:8px;margin-bottom:12px">
+                <button class="ae-btn ae-btn-secondary" onclick="aeExportPoam()">Export POAM</button>
+                <span id="ae-poam-summary" style="font-size:12px;color:var(--text-dim);align-self:center"></span>
+            </div>
+            <div id="ae-poam-content"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Exclusion Modal -->
+<div class="ae-modal-overlay" id="ae-exclusion-modal">
+    <div class="ae-modal">
+        <h3>Accept Risk — Exclude Control</h3>
+        <div class="field">
+            <label>Control ID</label>
+            <input type="text" id="ae-excl-control" readonly>
+        </div>
+        <div class="field">
+            <label>Business Justification</label>
+            <textarea id="ae-excl-reason" placeholder="Explain why this risk is accepted..."></textarea>
+        </div>
+        <div class="field">
+            <label>Risk Owner</label>
+            <input type="text" id="ae-excl-owner" placeholder="Name or role responsible">
+        </div>
+        <div class="field">
+            <label>Duration (days)</label>
+            <select id="ae-excl-duration">
+                <option value="30">30 days</option>
+                <option value="90" selected>90 days</option>
+                <option value="180">180 days</option>
+                <option value="365">365 days</option>
+            </select>
+        </div>
+        <div class="field">
+            <label>Risk Level</label>
+            <select id="ae-excl-risk">
+                <option value="accepted">Accepted</option>
+                <option value="mitigated">Mitigated (compensating control)</option>
+                <option value="transferred">Transferred (third party)</option>
+            </select>
+        </div>
+        <div class="ae-modal-btns">
+            <button class="ae-btn ae-btn-secondary" onclick="aeCloseExclusion()">Cancel</button>
+            <button class="ae-btn ae-btn-primary" onclick="aeSubmitExclusion()">Accept Risk</button>
+        </div>
+    </div>
+</div>
+
+<script>
+let aeData = null;
+let aeAdvisor = null;
+let aeActionPlans = null;
+let aePoam = null;
+let aeActiveTab = 'roi';
+
+function aeToggleAuth() {
+    const type = document.getElementById('ae-type').value;
+    const auth = document.getElementById('ae-auth');
+    auth.classList.toggle('visible', type === 'byos');
+    // Show/hide token/ssh fields
+    document.getElementById('ae-auth-method').onchange = function() {
+        document.getElementById('ae-token-field').style.display = this.value === 'token' ? '' : 'none';
+        document.getElementById('ae-ssh-field').style.display = this.value === 'ssh' ? '' : 'none';
+    };
+}
+
+function aeToggleCompare() {
+    const el = document.getElementById('ae-compare');
+    el.classList.toggle('visible');
+}
+
+async function aeRunAudit() {
+    const btn = document.getElementById('ae-run-btn');
+    btn.disabled = true;
+    document.getElementById('ae-loading').style.display = '';
+    document.getElementById('ae-results').style.display = 'none';
+
+    const body = {
+        target: document.getElementById('ae-target').value,
+        type: document.getElementById('ae-type').value,
+        project_id: document.getElementById('ae-project-id').value || null,
+    };
+
+    // Add auth for BYOS
+    if (body.type === 'byos') {
+        body.auth_method = document.getElementById('ae-auth-method').value;
+        body.token = document.getElementById('ae-token').value || null;
+        body.ssh_key = document.getElementById('ae-ssh-key').value || null;
+    }
+
+    try {
+        const resp = await fetch('/api/audit-engine/run', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(body),
+        });
+        aeData = await resp.json();
+        aeRenderScores();
+        aePopulateCompareDropdowns();
+        // Run advisor, action plans, POAM, and trends in parallel
+        aeRunAdvisor();
+        aeRunActionPlans();
+        aeRunPoam();
+        aeFetchTrends();
+        document.getElementById('ae-results').style.display = '';
+    } catch(e) {
+        alert('Audit failed: ' + e.message);
+    } finally {
+        btn.disabled = false;
+        document.getElementById('ae-loading').style.display = 'none';
+    }
+}
+
+function aeRenderScores() {
+    if (!aeData || !aeData.regime_scores) return;
+    const el = document.getElementById('ae-scores');
+    el.innerHTML = '';
+
+    for (const [rid, data] of Object.entries(aeData.regime_scores)) {
+        if (data.error) continue;
+        const score = data.overall_score || 0;
+        const grade = data.grade || 'F';
+        const gradeClass = grade.startsWith('A') ? 'a' : grade.startsWith('B') ? 'b' : grade.startsWith('C') ? 'c' : grade.startsWith('D') ? 'd' : 'f';
+        const fillClass = score >= 80 ? 'green' : score >= 60 ? 'yellow' : 'red';
+        const s = data.summary || {};
+
+        el.innerHTML += `
+            <div class="ae-score-card" onclick="aeShowDetail('${rid}')">
+                <div class="ae-score-header">
+                    <div class="ae-score-name">${data.regime_name || rid}</div>
+                    <div class="ae-score-grade ${gradeClass}">${grade}</div>
+                </div>
+                <div class="ae-score-pct">${score.toFixed(1)}%</div>
+                <div class="ae-score-bar"><div class="ae-score-fill ${fillClass}" style="width:${score}%"></div></div>
+                <div class="ae-score-meta">
+                    <span>Passed: ${s.passed || 0}</span>
+                    <span>Partial: ${s.partial || 0}</span>
+                    <span>Failed: ${s.failed || 0}</span>
+                    <span>Total: ${s.total_controls || 0}</span>
+                </div>
+            </div>
+        `;
+    }
+}
+
+function aeShowDetail(regimeId) {
+    if (!aeData || !aeData.regime_scores[regimeId]) return;
+    const data = aeData.regime_scores[regimeId];
+    const el = document.getElementById('ae-detail');
+    const cats = document.getElementById('ae-detail-cats');
+    document.getElementById('ae-detail-title').textContent = `${data.regime_name} — Category Breakdown`;
+
+    cats.innerHTML = '';
+    for (const cat of (data.categories || [])) {
+        const score = cat.score || 0;
+        const fillClass = score >= 80 ? 'green' : score >= 60 ? 'yellow' : 'red';
+        cats.innerHTML += `
+            <div class="ae-cat-row">
+                <div class="ae-cat-name">${cat.category_name || cat.category_id}</div>
+                <div class="ae-cat-bar"><div class="ae-cat-fill ${fillClass}" style="width:${score}%"></div></div>
+                <div class="ae-cat-score" style="color:${score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444'}">${score.toFixed(1)}%</div>
+                <div class="ae-cat-counts">P:${cat.passed} | F:${cat.failed} | N/A:${cat.not_applicable}</div>
+            </div>
+        `;
+    }
+    el.style.display = '';
+
+    // Highlight selected card
+    document.querySelectorAll('.ae-score-card').forEach(c => c.classList.remove('selected'));
+    event.currentTarget.classList.add('selected');
+}
+
+function aePopulateCompareDropdowns() {
+    if (!aeData) return;
+    const ids = Object.keys(aeData.regime_scores || {}).filter(id => !aeData.regime_scores[id].error);
+    ['ae-compare-baseline', 'ae-compare-target'].forEach(selId => {
+        const sel = document.getElementById(selId);
+        sel.innerHTML = ids.map(id => {
+            const name = aeData.regime_scores[id].regime_name || id;
+            return `<option value="${id}">${name}</option>`;
+        }).join('');
+    });
+    // Default: set target to second option
+    if (ids.length >= 2) document.getElementById('ae-compare-target').value = ids[1];
+}
+
+async function aeRunCompare() {
+    const baseline = document.getElementById('ae-compare-baseline').value;
+    const target = document.getElementById('ae-compare-target').value;
+    if (!baseline || !target || baseline === target) return;
+
+    try {
+        const resp = await fetch('/api/audit-engine/compare', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({audit_result: aeData, baseline, target}),
+        });
+        const data = await resp.json();
+        aeRenderCompare(data);
+    } catch(e) { console.error(e); }
+}
+
+function aeRenderCompare(data) {
+    if (data.error) { document.getElementById('ae-compare-result').innerHTML = `<p style="color:#ef4444">${data.error}</p>`; return; }
+    const b = data.baseline || {};
+    const t = data.target || {};
+    const html = `
+        <div class="ae-compare-grid">
+            <div class="ae-compare-col">
+                <h4>${b.regime_name} — ${b.score?.toFixed(1)}% (${b.grade})</h4>
+                <p style="font-size:12px;color:var(--text-dim)">${b.total_controls} controls</p>
+            </div>
+            <div class="ae-compare-col">
+                <h4>${t.regime_name} — ${t.score?.toFixed(1)}% (${t.grade})</h4>
+                <p style="font-size:12px;color:var(--text-dim)">${t.total_controls} controls</p>
+            </div>
+        </div>
+        <div style="margin:16px 0;padding:12px;background:var(--surface2);border-radius:8px;font-size:13px">
+            <strong>Gap Analysis:</strong> ${data.gap_count || 0} controls unique to target that need attention.
+            Score delta: <strong style="color:${data.score_delta >= 0 ? '#22c55e' : '#ef4444'}">${data.score_delta >= 0 ? '+' : ''}${data.score_delta?.toFixed(1)}%</strong>
+        </div>
+        <p style="font-size:13px;color:var(--text-dim);line-height:1.6">${data.recommendation || ''}</p>
+        ${data.gaps?.length ? `<details style="margin-top:12px"><summary style="cursor:pointer;font-size:13px;font-weight:600">Gap Details (${data.gaps.length} controls)</summary>
+        <div style="margin-top:8px">${data.gaps.map(g => `<div style="padding:6px 0;border-bottom:1px solid var(--border);font-size:12px"><span class="ae-rec-badge ${g.severity}">${g.severity}</span> <strong>${g.control_id}</strong> — ${g.title} <span style="color:var(--text-dim)">(${g.status})</span></div>`).join('')}</div></details>` : ''}
+    `;
+    document.getElementById('ae-compare-result').innerHTML = html;
+}
+
+async function aeRunAdvisor() {
+    try {
+        const resp = await fetch('/api/audit-engine/advise', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({audit_result: aeData}),
+        });
+        aeAdvisor = await resp.json();
+        aeRenderRecs();
+    } catch(e) { console.error(e); }
+}
+
+function aeShowTab(tab) {
+    aeActiveTab = tab;
+    document.querySelectorAll('.ae-tab').forEach(t => t.classList.remove('active'));
+    event.currentTarget.classList.add('active');
+    aeRenderRecs();
+}
+
+function aeRenderRecs() {
+    if (!aeAdvisor) return;
+    const el = document.getElementById('ae-recs');
+    const key = aeActiveTab === 'roi' ? 'by_roi' : aeActiveTab === 'impact' ? 'by_impact' : aeActiveTab === 'effort' ? 'by_effort' : 'quick_wins';
+    const recs = aeAdvisor[key] || [];
+
+    if (!recs.length) {
+        el.innerHTML = '<div class="ae-empty">No recommendations for this view.</div>';
+        return;
+    }
+
+    el.innerHTML = recs.map((r, i) => `
+        <div class="ae-rec" id="ae-rec-${r.control_id}">
+            <div class="ae-rec-header">
+                <div class="ae-rec-title">${r.rank}. ${r.title}</div>
+                <span class="ae-rec-badge ${r.severity}">${r.severity}</span>
+            </div>
+            <div class="ae-rec-desc">${r.description || ''}</div>
+            <div class="ae-rec-meta">
+                <span>Control: ${r.control_id}</span>
+                <span>Effort: ${r.effort_label}</span>
+                <span>Impact: ${r.impact_score}</span>
+                <span>ROI: ${r.roi_score}</span>
+            </div>
+            <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center">
+                ${r.steps?.length ? `<a href="#" onclick="event.preventDefault();this.parentElement.querySelector('.ae-rec-steps').classList.toggle('open')" style="font-size:11px;color:var(--accent)">Show steps</a>` : ''}
+                <button class="ae-btn-heal" onclick="aeSelfHeal('${r.control_id}', this)">Authorize Fix</button>
+                <button class="ae-btn-heal" onclick="aeSelfHeal('${r.control_id}', this, true)" style="color:var(--text-dim);background:rgba(128,128,128,.1);border-color:var(--border)">Preview</button>
+                <button class="ae-btn-exclude" onclick="aeOpenExclusion('${r.control_id}')">Accept Risk</button>
+                <button class="ae-btn-poam" onclick="aeAddToPoam('${r.control_id}')">Add to POAM</button>
+            </div>
+            ${r.steps?.length ? `<div class="ae-rec-steps"><ol>${r.steps.map(s => `<li>${s}</li>`).join('')}</ol></div>` : ''}
+            <div id="ae-heal-${r.control_id}"></div>
+        </div>
+    `).join('');
+
+    // Show estimated improvement
+    if (aeAdvisor.estimated_improvement_top5) {
+        el.insertAdjacentHTML('afterbegin',
+            `<div style="padding:10px 14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);border-radius:8px;margin-bottom:12px;font-size:13px">
+                Estimated score improvement from top 5 fixes: <strong style="color:#22c55e">+${aeAdvisor.estimated_improvement_top5}%</strong>
+            </div>`);
+    }
+}
+
+// --- Self-Heal ---
+async function aeSelfHeal(controlId, btn, dryRun = false) {
+    btn.disabled = true;
+    btn.textContent = dryRun ? 'Previewing...' : 'Fixing...';
+    const resultEl = document.getElementById('ae-heal-' + controlId);
+
+    try {
+        const resp = await fetch('/api/audit-engine/self-heal', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                control_id: controlId,
+                target: document.getElementById('ae-target').value,
+                project_id: document.getElementById('ae-project-id').value || null,
+                dry_run: dryRun,
+            }),
+        });
+        const data = await resp.json();
+        if (data.success) {
+            const changes = data.changes || [];
+            const applied = changes.filter(c => c.applied).length;
+            const flagged = changes.filter(c => !c.applied).length;
+            resultEl.innerHTML = `<div class="ae-heal-result success">
+                ${dryRun ? 'Preview' : 'Applied'}: ${applied} files modified, ${flagged} flagged for review.
+                ${changes.slice(0, 5).map(c => `<br>&nbsp;&nbsp;${c.applied ? '✓' : '⚠'} ${c.file || ''} — ${c.action}${c.note ? ' (' + c.note + ')' : ''}`).join('')}
+                ${changes.length > 5 ? `<br>&nbsp;&nbsp;...and ${changes.length - 5} more` : ''}
+            </div>`;
+        } else {
+            resultEl.innerHTML = `<div class="ae-heal-result error">${data.error || 'Unknown error'}</div>`;
+        }
+    } catch(e) {
+        resultEl.innerHTML = `<div class="ae-heal-result error">${e.message}</div>`;
+    } finally {
+        btn.disabled = false;
+        btn.textContent = dryRun ? 'Preview' : 'Authorize Fix';
+    }
+}
+
+// --- Exclusions ---
+function aeOpenExclusion(controlId) {
+    document.getElementById('ae-excl-control').value = controlId;
+    document.getElementById('ae-excl-reason').value = '';
+    document.getElementById('ae-excl-owner').value = '';
+    document.getElementById('ae-exclusion-modal').classList.add('open');
+}
+
+function aeCloseExclusion() {
+    document.getElementById('ae-exclusion-modal').classList.remove('open');
+}
+
+async function aeSubmitExclusion() {
+    const controlId = document.getElementById('ae-excl-control').value;
+    const reason = document.getElementById('ae-excl-reason').value;
+    const owner = document.getElementById('ae-excl-owner').value;
+
+    if (!reason || !owner) { alert('Please fill in justification and owner.'); return; }
+
+    try {
+        const resp = await fetch('/api/audit-engine/exclusion', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                control_id: controlId,
+                reason: reason,
+                owner: owner,
+                project_id: document.getElementById('ae-project-id').value || null,
+                duration_days: parseInt(document.getElementById('ae-excl-duration').value),
+                risk_level: document.getElementById('ae-excl-risk').value,
+            }),
+        });
+        const data = await resp.json();
+        aeCloseExclusion();
+
+        const resultEl = document.getElementById('ae-heal-' + controlId);
+        if (resultEl) {
+            resultEl.innerHTML = `<div class="ae-heal-result success">
+                Risk accepted for ${controlId}. Expires: ${data.expires?.slice(0, 10)}. Owner: ${owner}
+            </div>`;
+        }
+    } catch(e) {
+        alert('Failed to create exclusion: ' + e.message);
+    }
+}
+
+// --- POAM ---
+async function aeRunPoam() {
+    if (!aeData) return;
+    try {
+        const resp = await fetch('/api/audit-engine/poam', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({audit_result: aeData, project_id: document.getElementById('ae-project-id').value || null}),
+        });
+        aePoam = await resp.json();
+        aeRenderPoam();
+    } catch(e) { console.error(e); }
+}
+
+function aeRenderPoam() {
+    if (!aePoam || !aePoam.poam_entries?.length) return;
+    const el = document.getElementById('ae-poam-content');
+    const panel = document.getElementById('ae-poam');
+    panel.style.display = '';
+
+    document.getElementById('ae-poam-summary').textContent =
+        `${aePoam.total_entries} entries | P1: ${aePoam.by_priority?.P1 || 0} | P2: ${aePoam.by_priority?.P2 || 0} | P3: ${aePoam.by_priority?.P3 || 0} | P4: ${aePoam.by_priority?.P4 || 0} | Excluded: ${aePoam.excluded_controls || 0}`;
+
+    el.innerHTML = `<table>
+        <thead><tr><th>POAM ID</th><th>Control</th><th>Severity</th><th>Priority</th><th>Regimes</th><th>Due Date</th><th>Auto-Fix</th></tr></thead>
+        <tbody>${aePoam.poam_entries.slice(0, 30).map(e => `
+            <tr>
+                <td style="font-family:monospace;font-size:11px">${e.poam_id}</td>
+                <td><strong>${e.control_id}</strong><br><span style="font-size:11px;color:var(--text-dim)">${e.weakness_description}</span></td>
+                <td><span class="ae-rec-badge ${e.severity}">${e.severity}</span></td>
+                <td><span class="ae-priority ${e.priority}">${e.priority}</span></td>
+                <td style="font-size:11px">${e.regime_count} regime${e.regime_count > 1 ? 's' : ''}</td>
+                <td style="font-size:11px">${e.scheduled_completion}</td>
+                <td>${e.auto_fixable ? '<span style="color:#22c55e;font-weight:600">Yes</span>' : '<span style="color:var(--text-dim)">No</span>'}</td>
+            </tr>
+        `).join('')}</tbody>
+    </table>`;
+}
+
+function aeAddToPoam(controlId) {
+    const resultEl = document.getElementById('ae-heal-' + controlId);
+    if (resultEl) {
+        resultEl.innerHTML = `<div class="ae-heal-result success">Added ${controlId} to POAM. See POAM section below.</div>`;
+    }
+    // Scroll to POAM
+    document.getElementById('ae-poam').scrollIntoView({behavior: 'smooth'});
+}
+
+function aeExportPoam() {
+    if (!aePoam) return;
+    const blob = new Blob([JSON.stringify(aePoam, null, 2)], {type: 'application/json'});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `poam_${new Date().toISOString().slice(0,10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+// --- Action Plans ---
+async function aeRunActionPlans() {
+    if (!aeData) return;
+    try {
+        const resp = await fetch('/api/audit-engine/action-plans', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({audit_result: aeData}),
+        });
+        aeActionPlans = await resp.json();
+        aeRenderActionPlans();
+    } catch(e) { console.error(e); }
+}
+
+function aeRenderActionPlans() {
+    if (!aeActionPlans || !aeActionPlans.regimes_below_threshold) return;
+    const panel = document.getElementById('ae-action-plans');
+    const el = document.getElementById('ae-plans-content');
+    panel.style.display = '';
+
+    el.innerHTML = Object.values(aeActionPlans.plans).map(plan => `
+        <div class="ae-plan-card">
+            <div class="ae-plan-header">
+                <div class="ae-plan-name">${plan.regime_name}</div>
+                <div class="ae-plan-score">
+                    Current: <span style="color:#ef4444;font-weight:700">${plan.current_score}% (${plan.current_grade})</span>
+                    → Target: <span style="color:#22c55e;font-weight:700">${plan.target_score}%</span>
+                </div>
+            </div>
+            <div style="font-size:12px;color:var(--text-dim);margin-bottom:10px">${plan.total_failing} failing controls out of ${plan.total_controls} | Timeline: ${plan.estimated_timeline}</div>
+            ${plan.phases.map(p => `
+                <div class="ae-phase">
+                    <div class="ae-phase-header">
+                        <div class="ae-phase-name">Phase ${p.phase}: ${p.name}</div>
+                        <div class="ae-phase-meta">${p.timeline} | ${p.effort} effort | ${p.owner}</div>
+                    </div>
+                    <ul class="ae-phase-controls">
+                        ${p.controls.slice(0, 8).map(c => `
+                            <li>${c.auto_fixable ? '<span style="color:#22c55e">●</span>' : '<span style="color:var(--text-dim)">○</span>'} <strong>${c.control_id}</strong> — ${c.action.slice(0, 100)}</li>
+                        `).join('')}
+                        ${p.controls.length > 8 ? `<li style="color:var(--text-dim)">...and ${p.controls.length - 8} more</li>` : ''}
+                    </ul>
+                    <div class="ae-phase-target">After phase: ${p.expected_score_after}% (${p.controls_resolved} controls resolved)</div>
+                </div>
+            `).join('')}
+        </div>
+    `).join('');
+}
+
+// --- Trends ---
+async function aeFetchTrends() {
+    try {
+        const resp = await fetch('/api/audit-engine/trend?limit=10');
+        const data = await resp.json();
+        if (data && data.length > 0) {
+            aeRenderTrends(data);
+        }
+    } catch(e) { console.error(e); }
+}
+
+function aeRenderTrends(data) {
+    const panel = document.getElementById('ae-trend');
+    const chart = document.getElementById('ae-trend-chart');
+    const labels = document.getElementById('ae-trend-labels');
+    const history = document.getElementById('ae-scan-history');
+    panel.style.display = '';
+
+    // Group by timestamp, show latest score per regime
+    const maxScore = 100;
+    chart.innerHTML = data.map(d => {
+        const score = d.overall_score || d[5] || 0;
+        const height = Math.max(4, (score / maxScore) * 80);
+        const color = score >= 80 ? '#22c55e' : score >= 60 ? '#facc15' : '#ef4444';
+        const regime = d.regime_name || d[3] || '';
+        const ts = (d.timestamp || d[7] || '').slice(0, 10);
+        return `<div class="ae-trend-bar" style="height:${height}px;background:${color}" data-label="${regime}: ${score.toFixed(1)}% (${ts})"></div>`;
+    }).join('');
+
+    labels.innerHTML = data.map(d => {
+        const regime = (d.regime_name || d[3] || '').slice(0, 8);
+        return `<span>${regime}</span>`;
+    }).join('');
+
+    // History table
+    history.innerHTML = `<table>
+        <thead><tr><th>Date</th><th>Regime</th><th>Score</th><th>Grade</th><th>Passed</th><th>Failed</th></tr></thead>
+        <tbody>${data.slice(0, 10).map(d => {
+            const score = d.overall_score || d[5] || 0;
+            const grade = d.grade || d[6] || '?';
+            const regime = d.regime_name || d[3] || '';
+            const ts = (d.timestamp || d[7] || '').slice(0, 16);
+            const passed = d.passed || d[7] || 0;
+            const failed = d.failed || d[9] || 0;
+            const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+            return `<tr><td>${ts}</td><td>${regime}</td><td style="color:${color};font-weight:600">${score.toFixed(1)}%</td><td>${grade}</td><td>${passed}</td><td>${failed}</td></tr>`;
+        }).join('')}</tbody>
+    </table>`;
+}
+
+function aeExport(format) {
+    if (!aeData) return;
+    const blob = new Blob([JSON.stringify(aeData, null, 2)], {type: 'application/json'});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `audit_report_${new Date().toISOString().slice(0,10)}.${format === 'markdown' ? 'md' : 'json'}`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+</script>
+{% endblock %}