icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/cloudforge_finops.html

@@ -0,0 +1,111 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — CloudForge FinOps{% endblock %}
+{% block content %}
+
+<h1>CloudForge — FinOps Engine</h1>
+
+<div class="intro-panel">
+    <h2>Multi-Cloud Cost Governance</h2>
+    <p>Track spend across all CSPs, detect anomalies, enforce budgets, and generate chargeback reports. Powered by DataBridge billing connectors.</p>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Total Spend (MTD)</div>
+        <div class="value blue" id="fo-spend">$0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Budgets</div>
+        <div class="value green" id="fo-budgets">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Anomalies</div>
+        <div class="value red" id="fo-anomalies">0</div>
+    </div>
+</div>
+
+<!-- Budgets Table -->
+<div class="section-card">
+    <h2>Budgets</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="fo-budget-table">
+        <thead><tr><th>Name</th><th>Zone</th><th>Limit</th><th>Spent</th><th>% Used</th><th>Status</th></tr></thead>
+        <tbody id="fo-budget-body"><tr><td colspan="6" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<!-- Cost Breakdown -->
+<div class="section-card">
+    <h2>Cost Records</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="fo-cost-table">
+        <thead><tr><th>Cloud</th><th>Service</th><th>Cost</th><th>Period</th><th>Collected</th></tr></thead>
+        <tbody id="fo-cost-body"><tr><td colspan="5" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<!-- Create Budget -->
+<div class="section-card">
+    <h2>New Budget</h2>
+    <form id="fo-form" style="display: grid; gap: 12px; max-width: 600px;">
+        <div><label>Budget Name</label><input type="text" id="fo-name" value="Monthly Cloud Budget" class="input-field" style="width:100%"></div>
+        <div><label>Monthly Limit (USD)</label><input type="number" id="fo-limit" value="10000" class="input-field" style="width:100%"></div>
+        <div><label>Alert Threshold (%)</label><input type="number" id="fo-threshold" value="80" min="1" max="100" class="input-field" style="width:100%"></div>
+        <button type="submit" class="btn btn-primary">Create Budget</button>
+    </form>
+    <div id="fo-result" style="margin-top: 12px;"></div>
+</div>
+
+<script>
+async function loadBudgets() {
+    try {
+        const resp = await fetch('/api/cloudforge/finops/budgets');
+        const data = await resp.json();
+        const rows = (data.budgets || []);
+        document.getElementById('fo-budgets').textContent = rows.length;
+        const tbody = document.getElementById('fo-budget-body');
+        if (!rows.length) { tbody.innerHTML = '<tr><td colspan="6" style="text-align:center">No budgets yet</td></tr>'; return; }
+        tbody.innerHTML = rows.map(r => {
+            const pct = r.monthly_limit_usd > 0 ? ((r.current_spend_usd / r.monthly_limit_usd) * 100).toFixed(1) : 0;
+            return `<tr><td>${r.name}</td><td>${r.zone_id || 'All'}</td><td>$${r.monthly_limit_usd.toLocaleString()}</td><td>$${r.current_spend_usd.toLocaleString()}</td><td>${pct}%</td><td><span class="badge badge-${r.status === 'exceeded' ? 'error' : 'success'}">${r.status}</span></td></tr>`;
+        }).join('');
+    } catch(e) { console.error('Failed to load budgets', e); }
+}
+
+async function loadCosts() {
+    try {
+        const resp = await fetch('/api/cloudforge/finops/costs');
+        const data = await resp.json();
+        const rows = (data.costs || []);
+        let total = 0;
+        rows.forEach(r => total += r.cost_usd || 0);
+        document.getElementById('fo-spend').textContent = '$' + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
+        const tbody = document.getElementById('fo-cost-body');
+        if (!rows.length) { tbody.innerHTML = '<tr><td colspan="5" style="text-align:center">No cost data yet</td></tr>'; return; }
+        tbody.innerHTML = rows.slice(0, 50).map(r => `<tr><td>${r.cloud_type}</td><td>${r.service_name}</td><td>$${r.cost_usd.toFixed(2)}</td><td>${r.period_start} — ${r.period_end}</td><td>${r.collected_at || ''}</td></tr>`).join('');
+    } catch(e) { console.error('Failed to load costs', e); }
+}
+
+document.getElementById('fo-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+        const resp = await fetch('/api/cloudforge/finops/budgets', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                name: document.getElementById('fo-name').value,
+                monthly_limit_usd: parseFloat(document.getElementById('fo-limit').value),
+                alert_threshold_pct: parseFloat(document.getElementById('fo-threshold').value),
+            }),
+        });
+        const data = await resp.json();
+        document.getElementById('fo-result').innerHTML = `<div class="alert alert-success">Budget created: ${data.budget_id || data.id}</div>`;
+        loadBudgets();
+    } catch (err) {
+        document.getElementById('fo-result').innerHTML = `<div class="alert alert-error">${err.message}</div>`;
+    }
+});
+
+loadBudgets();
+loadCosts();
+</script>
+
+{% endblock %}

tools/dashboard/templates/cloudforge_hybrid.html

@@ -0,0 +1,122 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — CloudForge Hybrid Cloud{% endblock %}
+{% block content %}
+
+<h1>CloudForge — Hybrid Cloud Manager</h1>
+
+<div class="intro-panel">
+    <h2>Cross-Cloud Topology</h2>
+    <p>Design, deploy, and monitor hybrid cloud topologies with VPN, peering, and interconnect support across all CSPs.</p>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Topologies</div>
+        <div class="value blue" id="topo-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Connections</div>
+        <div class="value green" id="conn-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Connection Types</div>
+        <div class="value purple">7</div>
+    </div>
+</div>
+
+<!-- Topology Types -->
+<div class="section-card">
+    <h2>Topology Types</h2>
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;">
+        <div class="stat-card"><strong>Hub-Spoke</strong><br><small>Central hub, satellite spokes</small></div>
+        <div class="stat-card"><strong>Mesh</strong><br><small>Full interconnect</small></div>
+        <div class="stat-card"><strong>Gateway</strong><br><small>Transit gateway routing</small></div>
+        <div class="stat-card"><strong>Point-to-Point</strong><br><small>Direct cloud-to-cloud</small></div>
+    </div>
+</div>
+
+<!-- Topologies Table -->
+<div class="section-card">
+    <h2>Topologies</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="topo-table">
+        <thead><tr><th>Name</th><th>Type</th><th>Status</th><th>Health</th><th>Created</th></tr></thead>
+        <tbody id="topo-body"><tr><td colspan="5" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<!-- Connections Table -->
+<div class="section-card">
+    <h2>Connections</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="conn-table">
+        <thead><tr><th>Source</th><th>Target</th><th>Type</th><th>Status</th><th>Bandwidth</th></tr></thead>
+        <tbody id="conn-body"><tr><td colspan="5" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<!-- Create Topology -->
+<div class="section-card">
+    <h2>New Topology</h2>
+    <form id="topo-form" style="display: grid; gap: 12px; max-width: 600px;">
+        <div><label>Name</label><input type="text" id="topo-name" value="My Topology" class="input-field" style="width:100%"></div>
+        <div><label>Type</label>
+            <select id="topo-type" class="input-field" style="width:100%">
+                <option value="hub_spoke">Hub-Spoke</option>
+                <option value="mesh">Mesh</option>
+                <option value="gateway">Gateway</option>
+                <option value="point_to_point">Point-to-Point</option>
+            </select>
+        </div>
+        <button type="submit" class="btn btn-primary">Create Topology</button>
+    </form>
+    <div id="topo-result" style="margin-top: 12px;"></div>
+</div>
+
+<script>
+async function loadTopologies() {
+    try {
+        const resp = await fetch('/api/cloudforge/hybrid/topologies');
+        const data = await resp.json();
+        const rows = (data.topologies || []);
+        document.getElementById('topo-count').textContent = rows.length;
+        const tbody = document.getElementById('topo-body');
+        if (!rows.length) { tbody.innerHTML = '<tr><td colspan="5" style="text-align:center">No topologies yet</td></tr>'; return; }
+        tbody.innerHTML = rows.map(r => `<tr><td>${r.name}</td><td>${r.topology_type}</td><td><span class="badge badge-${r.status === 'active' ? 'success' : 'warning'}">${r.status}</span></td><td>${r.health_status}</td><td>${r.created_at || ''}</td></tr>`).join('');
+    } catch(e) { console.error('Failed to load topologies', e); }
+}
+
+async function loadConnections() {
+    try {
+        const resp = await fetch('/api/cloudforge/hybrid/connections');
+        const data = await resp.json();
+        const rows = (data.connections || []);
+        document.getElementById('conn-count').textContent = rows.length;
+        const tbody = document.getElementById('conn-body');
+        if (!rows.length) { tbody.innerHTML = '<tr><td colspan="5" style="text-align:center">No connections yet</td></tr>'; return; }
+        tbody.innerHTML = rows.map(r => `<tr><td>${r.source_zone_id}</td><td>${r.target_zone_id}</td><td>${r.connection_type}</td><td><span class="badge badge-${r.status === 'active' ? 'success' : 'warning'}">${r.status}</span></td><td>${r.bandwidth_mbps ? r.bandwidth_mbps + ' Mbps' : '—'}</td></tr>`).join('');
+    } catch(e) { console.error('Failed to load connections', e); }
+}
+
+document.getElementById('topo-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+        const resp = await fetch('/api/cloudforge/hybrid/topologies', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                name: document.getElementById('topo-name').value,
+                topology_type: document.getElementById('topo-type').value,
+            }),
+        });
+        const data = await resp.json();
+        document.getElementById('topo-result').innerHTML = `<div class="alert alert-success">Topology created: ${data.topology_id || data.id}</div>`;
+        loadTopologies();
+    } catch (err) {
+        document.getElementById('topo-result').innerHTML = `<div class="alert alert-error">${err.message}</div>`;
+    }
+});
+
+loadTopologies();
+loadConnections();
+</script>
+
+{% endblock %}

tools/dashboard/templates/cloudforge_metastore.html

@@ -0,0 +1,234 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — CloudForge Metastore{% endblock %}
+{% block content %}
+
+<h1>CloudForge — Application Metastore</h1>
+
+<div class="intro-panel">
+    <h2>Application Registry & Dependency Mapping</h2>
+    <p>CMDB-like registry with auto-discovery from CloudForge zones, DataBridge connections, and fleet devices. Track RTO/RPO compliance and dependency graphs.</p>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Applications</div>
+        <div class="value blue" id="ms-app-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Dependencies</div>
+        <div class="value green" id="ms-dep-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">RTO Compliant</div>
+        <div class="value green" id="ms-rto-ok">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">RTO Non-Compliant</div>
+        <div class="value red" id="ms-rto-fail">0</div>
+    </div>
+</div>
+
+<!-- Register App -->
+<div class="section-card">
+    <h2>Register Application</h2>
+    <form id="ms-register-form" onsubmit="registerApp(event)">
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px">
+            <div>
+                <label for="ms-name">Name</label>
+                <input type="text" id="ms-name" name="name" required placeholder="my-api-service">
+            </div>
+            <div>
+                <label for="ms-type">Type</label>
+                <select id="ms-type" name="app_type">
+                    <option value="web">Web</option>
+                    <option value="api">API</option>
+                    <option value="database">Database</option>
+                    <option value="queue">Queue</option>
+                    <option value="cache">Cache</option>
+                    <option value="batch">Batch</option>
+                    <option value="firmware">Firmware</option>
+                    <option value="microservice">Microservice</option>
+                    <option value="other">Other</option>
+                </select>
+            </div>
+            <div>
+                <label for="ms-crit">Criticality</label>
+                <select id="ms-crit" name="criticality">
+                    <option value="low">Low</option>
+                    <option value="medium" selected>Medium</option>
+                    <option value="high">High</option>
+                    <option value="critical">Critical</option>
+                </select>
+            </div>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px">
+            <div>
+                <label for="ms-env">Environment</label>
+                <select id="ms-env" name="environment">
+                    <option value="production">Production</option>
+                    <option value="staging">Staging</option>
+                    <option value="dev">Dev</option>
+                    <option value="dr">DR</option>
+                </select>
+            </div>
+            <div>
+                <label for="ms-rto">RTO (hours)</label>
+                <input type="number" id="ms-rto" name="rto_hours" step="0.1" placeholder="4.0">
+            </div>
+            <div>
+                <label for="ms-rpo">RPO (hours)</label>
+                <input type="number" id="ms-rpo" name="rpo_hours" step="0.1" placeholder="1.0">
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary">Register Application</button>
+        <button type="button" class="btn" onclick="runDiscovery()">Auto-Discover</button>
+    </form>
+    <div id="ms-register-alert" style="margin-top:10px"></div>
+</div>
+
+<!-- Applications Table -->
+<div class="section-card">
+    <h2>Applications</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="ms-app-table">
+        <thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Status</th><th>Env</th><th>Criticality</th><th>RTO</th><th>RPO</th><th>Source</th></tr></thead>
+        <tbody id="ms-app-body"><tr><td colspan="9" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<!-- Dependency Graph -->
+<div class="section-card">
+    <h2>Dependency Graph</h2>
+    <div id="ms-graph-container" style="min-height:200px;padding:16px">
+        <p id="ms-graph-info" style="text-align:center;color:#888">Loading dependency graph…</p>
+        <div id="ms-graph-list"></div>
+    </div>
+</div>
+
+<!-- RTO Compliance -->
+<div class="section-card">
+    <h2>RTO/RPO Compliance</h2>
+    <div style="overflow-x:auto;max-width:100%"><table class="data-table" id="ms-rto-table">
+        <thead><tr><th>Name</th><th>Criticality</th><th>RTO</th><th>RTO Limit</th><th>RPO</th><th>RPO Limit</th><th>Status</th></tr></thead>
+        <tbody id="ms-rto-body"><tr><td colspan="7" style="text-align:center">Loading…</td></tr></tbody>
+    </table></div>
+</div>
+
+<script>
+const critBadge = c => {
+    const m = {critical:'error',high:'warning',medium:'info',low:'success'};
+    return `<span class="badge badge-${m[c]||'info'}">${c}</span>`;
+};
+const statusBadge = s => {
+    const m = {active:'success',discovered:'info',inactive:'warning',decommissioned:'error'};
+    return `<span class="badge badge-${m[s]||'info'}">${s}</span>`;
+};
+
+async function loadApps() {
+    try {
+        const r = await fetch('/api/cloudforge/metastore/apps');
+        const data = await r.json();
+        const rows = data || [];
+        document.getElementById('ms-app-count').textContent = rows.length;
+        const tbody = document.getElementById('ms-app-body');
+        if (!rows.length) { tbody.innerHTML='<tr><td colspan="9" style="text-align:center">No applications registered</td></tr>'; return; }
+        tbody.innerHTML = rows.map(a => `<tr>
+            <td><code>${a.id}</code></td>
+            <td>${a.name}</td>
+            <td>${a.app_type}</td>
+            <td>${statusBadge(a.status)}</td>
+            <td>${a.environment}</td>
+            <td>${critBadge(a.criticality)}</td>
+            <td>${a.rto_hours != null ? a.rto_hours + 'h' : '—'}</td>
+            <td>${a.rpo_hours != null ? a.rpo_hours + 'h' : '—'}</td>
+            <td>${a.discovery_source || 'manual'}</td>
+        </tr>`).join('');
+    } catch(e) { console.error('Failed to load apps', e); }
+}
+
+async function loadGraph() {
+    try {
+        const r = await fetch('/api/cloudforge/metastore/dependency-graph');
+        const data = await r.json();
+        document.getElementById('ms-dep-count').textContent = data.edge_count || 0;
+        const info = document.getElementById('ms-graph-info');
+        const list = document.getElementById('ms-graph-list');
+        if (!data.edges || !data.edges.length) {
+            info.textContent = `${data.node_count || 0} nodes, no dependencies mapped yet`;
+            return;
+        }
+        info.textContent = `${data.node_count} nodes, ${data.edge_count} dependencies`;
+        const nodeMap = {};
+        (data.nodes||[]).forEach(n => nodeMap[n.id] = n.name);
+        list.innerHTML = '<ul style="list-style:none;padding:0">' +
+            data.edges.map(e => `<li style="padding:4px 0"><code>${nodeMap[e.source]||e.source}</code> → <code>${nodeMap[e.target]||e.target}</code> <span class="badge badge-info">${e.type}</span></li>`).join('') +
+            '</ul>';
+    } catch(e) { console.error('Failed to load graph', e); }
+}
+
+async function loadRTO() {
+    try {
+        const r = await fetch('/api/cloudforge/metastore/rto-compliance');
+        const data = await r.json();
+        document.getElementById('ms-rto-ok').textContent = data.compliant_count || 0;
+        document.getElementById('ms-rto-fail').textContent = data.non_compliant_count || 0;
+        const tbody = document.getElementById('ms-rto-body');
+        const all = [...(data.compliant||[]), ...(data.non_compliant||[]), ...(data.undefined||[])];
+        if (!all.length) { tbody.innerHTML='<tr><td colspan="7" style="text-align:center">No data</td></tr>'; return; }
+        tbody.innerHTML = all.map(a => {
+            const rtoOk = a.rto_status === 'compliant';
+            const rpoOk = a.rpo_status === 'compliant';
+            const overall = (rtoOk && rpoOk) ? 'success' : (a.rto_status === 'undefined' ? 'warning' : 'error');
+            return `<tr>
+                <td>${a.name}</td>
+                <td>${critBadge(a.criticality)}</td>
+                <td>${a.rto_hours != null ? a.rto_hours + 'h' : '—'}</td>
+                <td>${a.rto_limit != null ? a.rto_limit + 'h' : '—'}</td>
+                <td>${a.rpo_hours != null ? a.rpo_hours + 'h' : '—'}</td>
+                <td>${a.rpo_limit != null ? a.rpo_limit + 'h' : '—'}</td>
+                <td><span class="badge badge-${overall}">${a.rto_status || 'undefined'}</span></td>
+            </tr>`;
+        }).join('');
+    } catch(e) { console.error('Failed to load RTO', e); }
+}
+
+async function registerApp(e) {
+    e.preventDefault();
+    const alertEl = document.getElementById('ms-register-alert');
+    try {
+        const r = await fetch('/api/cloudforge/metastore/apps', {
+            method:'POST',
+            headers:{'Content-Type':'application/json'},
+            body: JSON.stringify({
+                name: document.getElementById('ms-name').value,
+                app_type: document.getElementById('ms-type').value,
+                criticality: document.getElementById('ms-crit').value,
+                environment: document.getElementById('ms-env').value,
+                rto_hours: parseFloat(document.getElementById('ms-rto').value) || null,
+                rpo_hours: parseFloat(document.getElementById('ms-rpo').value) || null,
+            })
+        });
+        const data = await r.json();
+        if (data.status === 'ok') {
+            alertEl.innerHTML = `<div class="alert alert-success">Registered: ${data.id}</div>`;
+            loadApps(); loadRTO();
+        } else {
+            alertEl.innerHTML = `<div class="alert alert-danger">${(data.errors||[]).join(', ')}</div>`;
+        }
+    } catch(e) { alertEl.innerHTML = `<div class="alert alert-danger">${e.message}</div>`; }
+}
+
+async function runDiscovery() {
+    const alertEl = document.getElementById('ms-register-alert');
+    try {
+        const r = await fetch('/api/cloudforge/metastore/discover', {method:'POST'});
+        const data = await r.json();
+        alertEl.innerHTML = `<div class="alert alert-success">Discovered: ${data.total} apps (${data.zones_discovered} zones, ${data.connections_discovered} connections, ${data.devices_discovered} devices)</div>`;
+        loadApps(); loadGraph(); loadRTO();
+    } catch(e) { alertEl.innerHTML = `<div class="alert alert-danger">${e.message}</div>`; }
+}
+
+loadApps();
+loadGraph();
+loadRTO();
+</script>
+{% endblock %}

tools/dashboard/templates/cloudforge_migration.html

@@ -0,0 +1,87 @@
+{% extends "base.html" %}
+{% block title %}{{ app_name }} — CloudForge Migration{% endblock %}
+{% block content %}
+
+<h1>CloudForge — Migration Planner</h1>
+
+<div class="intro-panel">
+    <h2>Cross-Cloud Migration</h2>
+    <p>Assess, plan, and execute cloud-to-cloud migrations with 7-dimension risk scoring. Powered by DataBridge for data movement.</p>
+</div>
+
+<div class="stat-grid">
+    <div class="stat-card">
+        <div class="label">Assessments</div>
+        <div class="value blue" id="mig-count">0</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">Strategies</div>
+        <div class="value purple">5</div>
+    </div>
+    <div class="stat-card">
+        <div class="label">DataBridge Connectors</div>
+        <div class="value green">45+</div>
+    </div>
+</div>
+
+<!-- Migration Strategies -->
+<div class="section-card">
+    <h2>Migration Strategies</h2>
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;">
+        <div class="stat-card"><strong>Phased</strong><br><small>Multi-phase with validation</small></div>
+        <div class="stat-card"><strong>Big Bang</strong><br><small>Single maintenance window</small></div>
+        <div class="stat-card"><strong>Trickle</strong><br><small>Gradual, zero downtime</small></div>
+        <div class="stat-card"><strong>Replatform</strong><br><small>Migrate + modernize</small></div>
+        <div class="stat-card"><strong>Hybrid</strong><br><small>Dual-cloud with sync</small></div>
+    </div>
+</div>
+
+<!-- Create Assessment -->
+<div class="section-card">
+    <h2>New Migration Assessment</h2>
+    <form id="mig-form" style="display: grid; gap: 12px; max-width: 600px;">
+        <div><label>Assessment Name</label><input type="text" id="mig-name" value="Cloud Migration" class="input-field" style="width:100%"></div>
+        <div><label>Source Cloud</label>
+            <select id="mig-source" class="input-field" style="width:100%">
+                <option value="aws_commercial">AWS Commercial</option>
+                <option value="azure_commercial">Azure Commercial</option>
+                <option value="gcp">GCP</option>
+                <option value="oci">OCI</option>
+            </select>
+        </div>
+        <div><label>Target Cloud</label>
+            <select id="mig-target" class="input-field" style="width:100%">
+                <option value="aws_govcloud">AWS GovCloud</option>
+                <option value="azure_gov">Azure Government</option>
+                <option value="aws_commercial">AWS Commercial</option>
+            </select>
+        </div>
+        <button type="submit" class="btn btn-primary">Start Assessment</button>
+    </form>
+    <div id="mig-result" style="margin-top: 12px;"></div>
+</div>
+
+<script>
+document.getElementById('mig-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+        const resp = await fetch('/api/cloudforge/migration/assess', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                name: document.getElementById('mig-name').value,
+                source_cloud: document.getElementById('mig-source').value,
+                target_cloud: document.getElementById('mig-target').value,
+            }),
+        });
+        const data = await resp.json();
+        document.getElementById('mig-result').innerHTML = `<div class="alert alert-success">
+            Assessment created: ${data.assessment_id}
+        </div>`;
+    } catch (err) {
+        document.getElementById('mig-result').innerHTML = `<div class="alert alert-error">${err.message}</div>`;
+    }
+});
+</script>
+
+{% endblock %}