icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/architecture.html

@@ -0,0 +1,289 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — Architecture Dashboard{% endblock %}
+{% block content %}
+
+<h1>Architecture Dashboard</h1>
+
+<div class="intro-panel">
+    <h2>Phase 2: Architecture Visibility — C4, DDD, ADRs</h2>
+    <p>Explore the ICDEV architecture through C4 diagrams, DDD bounded contexts, and searchable Architecture Decision Records.</p>
+    <div class="intro-steps">
+        <div class="intro-step"><span class="step-num">1</span><span class="step-text">C4 Model</span></div>
+        <div class="intro-step"><span class="step-num">2</span><span class="step-text">Bounded Contexts</span></div>
+        <div class="intro-step"><span class="step-num">3</span><span class="step-text">ADR Registry</span></div>
+    </div>
+</div>
+
+<!-- Tab Navigation -->
+<div style="display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0;">
+    <button class="tab-btn active" data-tab="c4" id="tab-c4">C4 Model</button>
+    <button class="tab-btn" data-tab="ddd" id="tab-ddd">Bounded Contexts</button>
+    <button class="tab-btn" data-tab="adr" id="tab-adr">ADR Registry</button>
+</div>
+
+<!-- ── C4 Model Tab ─────────────────────────────────────────── -->
+<div class="tab-content" id="panel-c4">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">C4 Levels</div>
+            <div class="value blue">3</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">External Actors</div>
+            <div class="value purple">10</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Containers</div>
+            <div class="value green">17</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Components (Compliance)</div>
+            <div class="value orange">12</div>
+        </div>
+    </div>
+
+    <!-- L1: System Context -->
+    <div class="card">
+        <div class="card-header"><h2>L1: System Context</h2><span class="badge badge-blue">Level 1</span></div>
+        <p style="color:var(--text-dim);font-size:14px;margin-bottom:16px;">ICDEV system boundary with external actors and integrations.</p>
+        <div class="agent-grid" id="c4-actors">
+            <div class="agent-card"><div class="agent-name">Developer</div><div class="agent-role">Primary user — writes code, runs tools</div></div>
+            <div class="agent-card"><div class="agent-name">ISSO</div><div class="agent-role">Information System Security Officer</div></div>
+            <div class="agent-card"><div class="agent-name">ATO Assessor</div><div class="agent-role">3PAO / government reviewer</div></div>
+            <div class="agent-card"><div class="agent-name">CI/CD Pipeline</div><div class="agent-role">GitLab CI automated builds</div></div>
+            <div class="agent-card"><div class="agent-name">Jira</div><div class="agent-role">Issue tracking integration</div></div>
+            <div class="agent-card"><div class="agent-name">ServiceNow</div><div class="agent-role">ITSM / change management</div></div>
+            <div class="agent-card"><div class="agent-name">GitLab</div><div class="agent-role">Source code, MR, registry</div></div>
+            <div class="agent-card"><div class="agent-name">DOORS NG</div><div class="agent-role">Requirements management (ReqIF)</div></div>
+            <div class="agent-card"><div class="agent-name">SAM.gov</div><div class="agent-role">Government opportunity scanning</div></div>
+            <div class="agent-card"><div class="agent-name">AWS GovCloud</div><div class="agent-role">us-gov-west-1 infrastructure</div></div>
+        </div>
+    </div>
+
+    <!-- L2: Container -->
+    <div class="card">
+        <div class="card-header"><h2>L2: Containers</h2><span class="badge badge-purple">Level 2</span></div>
+        <p style="color:var(--text-dim);font-size:14px;margin-bottom:16px;">Runtime containers within the ICDEV system boundary.</p>
+        <table id="c4-containers-table">
+            <thead><tr><th>Container</th><th>Technology</th><th>Tier</th><th>Port</th><th>Role</th></tr></thead>
+            <tbody>
+                <tr><td>Orchestrator Agent</td><td>Python / A2A</td><td>Core</td><td>9443</td><td>Task routing, workflow mgmt</td></tr>
+                <tr><td>Architect Agent</td><td>Python / A2A</td><td>Core</td><td>9444</td><td>ATLAS A/T phases, system design</td></tr>
+                <tr><td>Builder Agent</td><td>Python / A2A</td><td>Domain</td><td>9445</td><td>TDD code gen (RED-GREEN-REFACTOR)</td></tr>
+                <tr><td>Compliance Agent</td><td>Python / A2A</td><td>Domain</td><td>9446</td><td>ATO artifacts, 9-framework compliance</td></tr>
+                <tr><td>Security Agent</td><td>Python / A2A</td><td>Domain</td><td>9447</td><td>SAST, dep audit, secret detection</td></tr>
+                <tr><td>Requirements Agent</td><td>Python / A2A</td><td>Domain</td><td>9453</td><td>Conversational intake, gap detection</td></tr>
+                <tr><td>Supply Chain Agent</td><td>Python / A2A</td><td>Domain</td><td>9454</td><td>Dependency graph, SBOM aggregation</td></tr>
+                <tr><td>Simulation Agent</td><td>Python / A2A</td><td>Domain</td><td>9455</td><td>Digital Program Twin, Monte Carlo</td></tr>
+                <tr><td>DevSecOps/ZTA Agent</td><td>Python / A2A</td><td>Domain</td><td>9457</td><td>Pipeline security, Zero Trust</td></tr>
+                <tr><td>Connector Forge Agent</td><td>Python / A2A</td><td>Domain</td><td>9458</td><td>Dynamic connector generation</td></tr>
+                <tr><td>Knowledge Agent</td><td>Python / A2A</td><td>Support</td><td>9449</td><td>Self-healing, recommendations</td></tr>
+                <tr><td>Monitor Agent</td><td>Python / A2A</td><td>Support</td><td>9450</td><td>Log analysis, metrics, alerts</td></tr>
+                <tr><td>Dashboard</td><td>Flask / Jinja2</td><td>UI</td><td>5050</td><td>Web dashboard for all features</td></tr>
+                <tr><td>MCP Gateway</td><td>Python / stdio</td><td>Integration</td><td>—</td><td>12 MCP servers for Claude Code</td></tr>
+                <tr><td>PostgreSQL</td><td>PostgreSQL 15</td><td>Data</td><td>5432</td><td>Primary operational database</td></tr>
+                <tr><td>SQLite</td><td>SQLite 3</td><td>Data</td><td>—</td><td>Fallback / air-gap / browser</td></tr>
+                <tr><td>Event Bus</td><td>Python in-process</td><td>Infra</td><td>—</td><td>Domain event pub/sub</td></tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- L3: Component (Compliance) -->
+    <div class="card">
+        <div class="card-header"><h2>L3: Components — Compliance Agent</h2><span class="badge badge-green">Level 3</span></div>
+        <p style="color:var(--text-dim);font-size:14px;margin-bottom:16px;">Internal components of the Compliance Agent (tools/compliance/).</p>
+        <div class="agent-grid" id="c4-compliance-components">
+            <div class="agent-card"><div class="agent-name">SSP Generator</div><div class="agent-role">System Security Plan (OSCAL)</div></div>
+            <div class="agent-card"><div class="agent-name">POAM Generator</div><div class="agent-role">Plan of Action & Milestones</div></div>
+            <div class="agent-card"><div class="agent-name">STIG Checker</div><div class="agent-role">Security Technical IG checks</div></div>
+            <div class="agent-card"><div class="agent-name">SBOM Generator</div><div class="agent-role">Software Bill of Materials</div></div>
+            <div class="agent-card"><div class="agent-name">CUI Marker</div><div class="agent-role">Classification marking enforcement</div></div>
+            <div class="agent-card"><div class="agent-name">Control Mapper</div><div class="agent-role">Activity-to-control mapping</div></div>
+            <div class="agent-card"><div class="agent-name">Crosswalk Engine</div><div class="agent-role">Multi-framework crosswalk</div></div>
+            <div class="agent-card"><div class="agent-name">FedRAMP Assessor</div><div class="agent-role">Moderate/High baseline check</div></div>
+            <div class="agent-card"><div class="agent-name">CMMC Assessor</div><div class="agent-role">Level 2/3 maturity certification</div></div>
+            <div class="agent-card"><div class="agent-name">OSCAL Generator</div><div class="agent-role">OSCAL artifact emission</div></div>
+            <div class="agent-card"><div class="agent-name">SbD Assessor</div><div class="agent-role">CISA Secure by Design pledge</div></div>
+            <div class="agent-card"><div class="agent-name">cATO Live Engine</div><div class="agent-role">Continuous evidence streaming</div></div>
+        </div>
+    </div>
+</div>
+
+<!-- ── Bounded Contexts Tab ─────────────────────────────────── -->
+<div class="tab-content" id="panel-ddd" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">Bounded Contexts</div>
+            <div class="value blue" id="ddd-context-count">12</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Aggregate Roots</div>
+            <div class="value purple" id="ddd-aggregate-count">12</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Integration Patterns</div>
+            <div class="value green" id="ddd-pattern-count">8</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Domain Events</div>
+            <div class="value orange" id="ddd-event-count">14</div>
+        </div>
+    </div>
+
+    <!-- Context Map -->
+    <div class="card">
+        <div class="card-header"><h2>Context Map</h2><span class="badge badge-blue">DDD Strategic</span></div>
+        <div id="ddd-context-map" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;">
+        </div>
+    </div>
+
+    <!-- Bounded Context Details -->
+    <div class="card" style="margin-top:16px;">
+        <div class="card-header">
+            <h2>Bounded Context Details</h2>
+            <button class="btn btn-primary btn-sm" id="ddd-load-btn">Load Contexts</button>
+        </div>
+        <table id="ddd-table">
+            <thead><tr><th>Context</th><th>Directory</th><th>Aggregate Root</th><th>Key Invariant</th><th>Relationship</th></tr></thead>
+            <tbody id="ddd-tbody"></tbody>
+        </table>
+    </div>
+</div>
+
+<!-- ── ADR Registry Tab ─────────────────────────────────────── -->
+<div class="tab-content" id="panel-adr" style="display:none;">
+    <div class="stat-grid">
+        <div class="stat-card">
+            <div class="label">Total ADRs</div>
+            <div class="value blue" id="adr-total">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">ADR Groups</div>
+            <div class="value purple" id="adr-groups">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Accepted</div>
+            <div class="value green" id="adr-accepted">0</div>
+        </div>
+        <div class="stat-card">
+            <div class="label">Superseded</div>
+            <div class="value orange" id="adr-superseded">0</div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <h2>Architecture Decision Records</h2>
+            <div style="display:flex;gap:8px;">
+                <input type="text" class="nl-input" id="adr-search" placeholder="Search ADRs..." style="width:260px;padding:6px 12px;font-size:13px;">
+                <button class="btn btn-primary btn-sm" id="adr-load-btn">Load ADRs</button>
+            </div>
+        </div>
+        <table id="adr-table">
+            <thead><tr><th>ID</th><th>Group</th><th>Status</th><th>Decision</th></tr></thead>
+            <tbody id="adr-tbody">
+                <tr><td colspan="4" class="empty">Click Load ADRs to browse decisions</td></tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<style>
+.tab-btn { background: none; border: none; color: var(--text-dim); padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; transition: all .2s; }
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+.context-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
+.context-card .ctx-name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
+.context-card .ctx-aggregate { font-size: 13px; color: var(--accent2); margin-bottom: 6px; }
+.context-card .ctx-invariant { font-size: 12px; color: var(--text-dim); }
+.context-card .ctx-relationship { margin-top: 8px; }
+</style>
+
+<script>
+// Tab switching
+document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(p => p.style.display = 'none');
+        btn.classList.add('active');
+        document.getElementById('panel-' + btn.dataset.tab).style.display = '';
+    });
+});
+
+// Bounded Contexts data
+const contexts = [
+    {name:"Compliance", dir:"tools/compliance/", aggregate:"ComplianceControl", invariant:"Cannot be 'Implemented' without non-expired evidence", relationship:"Conformist <-> Security"},
+    {name:"Security", dir:"tools/security/", aggregate:"ThreatModel", invariant:"Every STRIDE threat maps to >= 1 NIST control", relationship:"Conformist <-> Compliance"},
+    {name:"Requirements", dir:"tools/requirements/", aggregate:"IntakeSession", invariant:"Cannot pass Stage 3 without readiness >= 0.7", relationship:"Customer/Supplier -> Compliance, Simulation"},
+    {name:"Simulation", dir:"tools/simulation/", aggregate:"Scenario", invariant:"Monte Carlo requires >= 1000 iterations", relationship:"Supplier <- Requirements"},
+    {name:"DevSecOps", dir:"tools/devsecops/", aggregate:"DevSecOpsProfile", invariant:"IL4+ requires ZTA maturity >= Advanced", relationship:"Shared Kernel <-> CloudForge"},
+    {name:"Supply Chain", dir:"tools/supply_chain/", aggregate:"DependencyGraph", invariant:"All vendors must have SCRM assessment", relationship:"ACL <-> External Vendors"},
+    {name:"MBSE", dir:"tools/mbse/", aggregate:"DigitalThread", invariant:"Every model element must have trace link", relationship:"Partnership <-> Requirements"},
+    {name:"Embedded", dir:"tools/embedded/ + fleet/ + edge_ai/", aggregate:"Device", invariant:"Deployed firmware must have SBOM", relationship:"ACL <-> Compliance"},
+    {name:"Observability", dir:"tools/observability/", aggregate:"Trace", invariant:"Active tracing required for production", relationship:"Open Host Service"},
+    {name:"GovCon", dir:"tools/govcon/", aggregate:"Proposal", invariant:"Read-only bridge to compliance (D-WG-8)", relationship:"Published Language -> Compliance"},
+    {name:"CloudForge", dir:"tools/cloudforge/", aggregate:"Runbook", invariant:"DAG execution via Kahn's algorithm", relationship:"Shared Kernel <-> DevSecOps"},
+    {name:"Knowledge", dir:"tools/memory/ + tools/rag/", aggregate:"MemoryEntry", invariant:"Hybrid search: 0.7 BM25 + 0.3 semantic", relationship:"Open Host Service"}
+];
+
+// Load context map cards
+const mapContainer = document.getElementById('ddd-context-map');
+contexts.forEach(ctx => {
+    mapContainer.innerHTML += `<div class="context-card"><div class="ctx-name">${ctx.name}</div><div class="ctx-aggregate">Aggregate: ${ctx.aggregate}</div><div class="ctx-invariant">${ctx.invariant}</div><div class="ctx-relationship"><span class="badge badge-purple" style="font-size:11px;">${ctx.relationship}</span></div></div>`;
+});
+
+// Load context table
+document.getElementById('ddd-load-btn').addEventListener('click', () => {
+    const tbody = document.getElementById('ddd-tbody');
+    tbody.innerHTML = contexts.map(ctx =>
+        `<tr><td><strong>${ctx.name}</strong></td><td style="font-size:12px;color:var(--text-dim);">${ctx.dir}</td><td><span class="badge badge-purple">${ctx.aggregate}</span></td><td style="font-size:13px;">${ctx.invariant}</td><td><span class="badge badge-blue" style="font-size:11px;">${ctx.relationship}</span></td></tr>`
+    ).join('');
+});
+
+// ADR loading
+document.getElementById('adr-load-btn').addEventListener('click', async () => {
+    try {
+        const res = await fetch('/api/architecture/adrs');
+        const data = await res.json();
+        const adrs = data.adrs || [];
+        document.getElementById('adr-total').textContent = adrs.length;
+
+        const groups = [...new Set(adrs.map(a => a.group))];
+        document.getElementById('adr-groups').textContent = groups.length;
+
+        const accepted = adrs.filter(a => a.status === 'Accepted').length;
+        const superseded = adrs.filter(a => a.status === 'Superseded').length;
+        document.getElementById('adr-accepted').textContent = accepted;
+        document.getElementById('adr-superseded').textContent = superseded;
+
+        window._adrData = adrs;
+        renderAdrs(adrs);
+    } catch(e) { console.error('ADR load error:', e); }
+});
+
+function renderAdrs(adrs) {
+    const tbody = document.getElementById('adr-tbody');
+    if(adrs.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="4" class="empty">No ADRs found</td></tr>';
+        return;
+    }
+    tbody.innerHTML = adrs.map(a => {
+        const statusClass = a.status === 'Accepted' ? 'badge-green' : a.status === 'Superseded' ? 'badge-orange' : 'badge-gray';
+        return `<tr><td><strong>${a.id}</strong></td><td><span class="badge badge-purple">${a.group}</span></td><td><span class="badge ${statusClass}">${a.status}</span></td><td style="font-size:13px;">${a.description}</td></tr>`;
+    }).join('');
+}
+
+// ADR search filter
+document.getElementById('adr-search').addEventListener('input', (e) => {
+    const q = e.target.value.toLowerCase();
+    if(!window._adrData) return;
+    const filtered = window._adrData.filter(a =>
+        a.id.toLowerCase().includes(q) ||
+        a.group.toLowerCase().includes(q) ||
+        a.description.toLowerCase().includes(q)
+    );
+    renderAdrs(filtered);
+});
+</script>
+
+{% endblock %}

tools/dashboard/templates/ato_simulator.html

@@ -0,0 +1,170 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — ATO Timeline Simulator{% endblock %}
+{% block content %}
+
+<h1>ATO Timeline Simulator — Monte Carlo Projections</h1>
+
+<div class="intro-panel">
+    <h2>Predict Your Path to Authorization</h2>
+    <p>Run Monte Carlo simulations to estimate ATO timeline with confidence intervals. Identify schedule risks, critical-path tasks, and probability distributions for milestone completion.</p>
+    <div class="intro-steps">
+        <div class="intro-step"><span class="step-num">1</span><span class="step-text">Configure</span></div>
+        <div class="intro-step"><span class="step-num">2</span><span class="step-text">Simulate</span></div>
+        <div class="intro-step"><span class="step-num">3</span><span class="step-text">Analyze Results</span></div>
+    </div>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Simulations Run</div>
+        <div class="value blue" id="ato-sim-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Avg P50 Days</div>
+        <div class="value green" id="ato-p50">—</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Best Case</div>
+        <div class="value purple" id="ato-best">—</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Worst Case</div>
+        <div class="value red" id="ato-worst">—</div>
+    </div>
+</div>
+
+<!-- Simulate -->
+<div class="section-card">
+    <h2>Run Simulation</h2>
+    <form id="ato-sim-form" style="display: grid; gap: 12px; max-width: 600px;">
+        <div><label>Iterations</label><input type="number" id="ato-iterations" value="10000" min="100" max="100000" class="input-field" style="width:100%"></div>
+        <button type="submit" class="btn btn-primary">Run Monte Carlo</button>
+    </form>
+    <div id="ato-sim-result" style="margin-top: 12px;"></div>
+</div>
+
+<!-- Percentile Results -->
+<div class="section-card">
+    <h2>Percentile Results</h2>
+    <div id="ato-percentiles" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;">
+        <div class="stat-card"><div class="label">P50</div><div class="value green" id="ato-res-p50">—</div></div>
+        <div class="stat-card"><div class="label">P75</div><div class="value blue" id="ato-res-p75">—</div></div>
+        <div class="stat-card"><div class="label">P90</div><div class="value orange" id="ato-res-p90">—</div></div>
+        <div class="stat-card"><div class="label">P95</div><div class="value red" id="ato-res-p95">—</div></div>
+    </div>
+</div>
+
+<!-- Histogram -->
+<div class="section-card">
+    <h2>Distribution Histogram</h2>
+    <div id="ato-histogram" style="display: flex; align-items: flex-end; gap: 2px; height: 200px; padding: 12px 0;">
+        <div style="text-align:center; color: #888; width:100%; align-self:center;">Run a simulation to see the distribution.</div>
+    </div>
+</div>
+
+<!-- Task Breakdown -->
+<div class="section-card">
+    <h2>ATO Task Breakdown</h2>
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>Task</th>
+                <th>Min Days</th>
+                <th>Likely Days</th>
+                <th>Max Days</th>
+                <th>Critical Path</th>
+                <th>Status</th>
+            </tr>
+        </thead>
+        <tbody id="ato-tasks-body">
+            <tr><td colspan="6" style="text-align:center; color: #888;">Loading tasks...</td></tr>
+        </tbody>
+    </table>
+</div>
+
+<script>
+const PROJECT_ID = 'sparkpilot';
+let simCount = 0;
+
+async function loadTasks() {
+    try {
+        const data = await fetch(`/api/ato-sim/tasks/${PROJECT_ID}`).then(r => r.json());
+        const tasks = data.tasks || data || [];
+        if (tasks.length > 0) {
+            document.getElementById('ato-tasks-body').innerHTML = tasks.map(t => `<tr>
+                <td>${t.name || t.task}</td>
+                <td>${t.min_days || '—'}</td>
+                <td>${t.likely_days || '—'}</td>
+                <td>${t.max_days || '—'}</td>
+                <td>${t.critical_path ? '<span class="badge badge-red">YES</span>' : '<span class="badge badge-blue">no</span>'}</td>
+                <td><span class="badge badge-${t.status === 'completed' ? 'green' : t.status === 'in_progress' ? 'blue' : 'orange'}">${t.status || 'pending'}</span></td>
+            </tr>`).join('');
+        }
+    } catch (err) {
+        console.error('Tasks load error:', err);
+    }
+}
+
+function renderHistogram(buckets) {
+    if (!buckets || buckets.length === 0) return;
+    const maxCount = Math.max(...buckets.map(b => b.count));
+    const container = document.getElementById('ato-histogram');
+    container.innerHTML = buckets.map(b => {
+        const heightPct = maxCount > 0 ? (b.count / maxCount * 100) : 0;
+        return '<div style="flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;">' +
+            '<div style="font-size:9px; color:#888; margin-bottom:2px;">' + b.count + '</div>' +
+            '<div style="width:100%; background:var(--primary, #3b82f6); border-radius:2px 2px 0 0; height:' + heightPct + '%; min-height:' + (heightPct > 0 ? '2px' : '0') + ';"></div>' +
+            '<div style="font-size:9px; color:#888; margin-top:2px;">' + (b.label || b.range_start || '') + '</div>' +
+        '</div>';
+    }).join('');
+}
+
+function fmtDays(val) {
+    return typeof val === 'number' ? val + ' days' : (val || '—');
+}
+
+document.getElementById('ato-sim-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const result = document.getElementById('ato-sim-result');
+    result.innerHTML = '<em>Running simulation...</em>';
+    try {
+        const resp = await fetch(`/api/ato-sim/simulate/${PROJECT_ID}`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                iterations: parseInt(document.getElementById('ato-iterations').value),
+            }),
+        });
+        const data = await resp.json();
+
+        simCount++;
+        document.getElementById('ato-sim-count').textContent = simCount;
+
+        const p50 = data.p50 || (data.percentiles && data.percentiles.p50) || '—';
+        const p75 = data.p75 || (data.percentiles && data.percentiles.p75) || '—';
+        const p90 = data.p90 || (data.percentiles && data.percentiles.p90) || '—';
+        const p95 = data.p95 || (data.percentiles && data.percentiles.p95) || '—';
+
+        document.getElementById('ato-p50').textContent = fmtDays(p50);
+        document.getElementById('ato-res-p50').textContent = fmtDays(p50);
+        document.getElementById('ato-res-p75').textContent = fmtDays(p75);
+        document.getElementById('ato-res-p90').textContent = fmtDays(p90);
+        document.getElementById('ato-res-p95').textContent = fmtDays(p95);
+
+        document.getElementById('ato-best').textContent = data.best_case != null ? data.best_case + ' days' : '—';
+        document.getElementById('ato-worst').textContent = data.worst_case != null ? data.worst_case + ' days' : '—';
+
+        if (data.histogram || data.buckets) {
+            renderHistogram(data.histogram || data.buckets);
+        }
+
+        result.innerHTML = '<div class="alert alert-success">Simulation complete — P50: ' + fmtDays(p50) + ', ' + (data.iterations || '—') + ' iterations</div>';
+    } catch (err) {
+        result.innerHTML = '<div class="alert alert-error">' + err.message + '</div>';
+    }
+});
+
+loadTasks();
+</script>
+
+{% endblock %}