icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_deploy.html

@@ -0,0 +1,573 @@
+<!-- CUI // SP-CTI -->
+{% extends "base.html" %}
+{% block title %}Forge Studio — Deploy{% endblock %}
+{% block content %}
+<style>
+.fsd-wrap{max-width:1200px;margin:0 auto;padding:24px}
+.fsd-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
+.fsd-header h1{font-size:24px;font-weight:700;color:#e2e8f0}
+.fsd-header .fsd-back{color:#94a3b8;text-decoration:none;font-size:18px}
+.fsd-header .fsd-back:hover{color:#e2e8f0}
+
+/* App selector */
+.fsd-app-select{display:flex;gap:12px;align-items:center;margin-bottom:24px;background:#1e293b;padding:16px;border-radius:10px}
+.fsd-app-select label{color:#94a3b8;font-size:13px}
+.fsd-app-select select{background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:8px 12px;font-size:14px;min-width:280px}
+
+/* Tabs */
+.fsd-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:2px solid #1e293b}
+.fsd-tab{padding:10px 20px;color:#94a3b8;cursor:pointer;font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
+.fsd-tab:hover{color:#e2e8f0;background:#1e293b;border-radius:6px 6px 0 0}
+.fsd-tab.active{color:#818cf8;border-bottom-color:#818cf8}
+
+/* Cards grid */
+.fsd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px}
+.fsd-card{background:#1e293b;border-radius:10px;padding:20px;border:1px solid #334155;transition:border-color .15s}
+.fsd-card:hover{border-color:#818cf8}
+.fsd-card h3{font-size:16px;font-weight:600;color:#e2e8f0;margin-bottom:8px}
+.fsd-card p{font-size:13px;color:#94a3b8;margin-bottom:12px}
+.fsd-card .fsd-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
+.fsd-badge-aws{background:#ff990033;color:#ff9900}
+.fsd-badge-azure{background:#0078d433;color:#0078d4}
+.fsd-badge-gcp{background:#4285f433;color:#4285f4}
+.fsd-badge-onprem{background:#22c55e33;color:#22c55e}
+.fsd-badge-gov{background:#ef444433;color:#ef4444;margin-left:6px}
+
+/* Region selector */
+.fsd-region-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.fsd-region{padding:4px 10px;border-radius:4px;font-size:11px;background:#0f172a;color:#94a3b8;cursor:pointer;border:1px solid #334155}
+.fsd-region:hover,.fsd-region.selected{border-color:#818cf8;color:#818cf8}
+.fsd-region.gov{border-color:#ef4444;color:#ef4444}
+
+/* Deploy form */
+.fsd-form{background:#1e293b;border-radius:10px;padding:24px;margin-bottom:24px;border:1px solid #334155}
+.fsd-form-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
+.fsd-form-group{flex:1;min-width:200px}
+.fsd-form-group label{display:block;font-size:12px;color:#94a3b8;margin-bottom:4px;font-weight:500}
+.fsd-form-group input,.fsd-form-group select{width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:8px 12px;font-size:13px}
+.fsd-form-group input:focus,.fsd-form-group select:focus{border-color:#818cf8;outline:none}
+
+/* Buttons */
+.fsd-btn{padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
+.fsd-btn-primary{background:#818cf8;color:#fff}
+.fsd-btn-primary:hover{background:#6366f1}
+.fsd-btn-secondary{background:#334155;color:#e2e8f0}
+.fsd-btn-secondary:hover{background:#475569}
+.fsd-btn-airgap{background:#22c55e;color:#fff}
+.fsd-btn-airgap:hover{background:#16a34a}
+.fsd-btn:disabled{opacity:.5;cursor:not-allowed}
+.fsd-btn-row{display:flex;gap:12px;flex-wrap:wrap}
+
+/* Env toggles */
+.fsd-env-row{display:flex;gap:12px;margin-bottom:16px}
+.fsd-env-pill{padding:8px 20px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:2px solid #334155;background:transparent;color:#94a3b8;transition:all .15s}
+.fsd-env-pill:hover{border-color:#818cf8;color:#818cf8}
+.fsd-env-pill.active-dev{border-color:#22c55e;color:#22c55e;background:#22c55e15}
+.fsd-env-pill.active-staging{border-color:#f59e0b;color:#f59e0b;background:#f59e0b15}
+.fsd-env-pill.active-prod{border-color:#ef4444;color:#ef4444;background:#ef444415}
+
+/* Checkboxes */
+.fsd-check-row{display:flex;gap:20px;align-items:center}
+.fsd-check-row label{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:13px;cursor:pointer}
+.fsd-check-row input[type=checkbox]{accent-color:#818cf8}
+
+/* Result panel */
+.fsd-result{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:20px;margin-top:20px;display:none}
+.fsd-result h3{font-size:16px;color:#e2e8f0;margin-bottom:12px}
+.fsd-result pre{background:#1e293b;padding:16px;border-radius:8px;font-size:12px;color:#94a3b8;overflow-x:auto;max-height:400px}
+.fsd-result .fsd-files{list-style:none;padding:0}
+.fsd-result .fsd-files li{padding:4px 0;font-size:12px;color:#94a3b8;font-family:monospace}
+.fsd-result .fsd-files li::before{content:"📄 ";margin-right:4px}
+
+/* History table */
+.fsd-table{width:100%;border-collapse:collapse;font-size:13px}
+.fsd-table th{text-align:left;padding:10px 12px;color:#94a3b8;font-weight:600;border-bottom:2px solid #334155;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
+.fsd-table td{padding:10px 12px;border-bottom:1px solid #1e293b;color:#e2e8f0}
+.fsd-table tr:hover td{background:#1e293b33}
+
+/* Tenant cards */
+.fsd-tenant-card{background:#1e293b;border-radius:10px;padding:16px;border:1px solid #334155;display:flex;align-items:center;gap:16px}
+.fsd-tenant-avatar{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
+.fsd-tenant-info h4{color:#e2e8f0;font-size:14px;margin-bottom:4px}
+.fsd-tenant-info span{color:#94a3b8;font-size:12px}
+
+/* Status dot */
+.fsd-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
+.fsd-status-generated{background:#818cf8}
+.fsd-status-deployed{background:#22c55e}
+.fsd-status-failed{background:#ef4444}
+</style>
+
+<div class="fsd-wrap">
+  <div class="fsd-header">
+    <a href="/forge-studio" class="fsd-back">&larr;</a>
+    <h1>Deploy &amp; Tenancy</h1>
+  </div>
+
+  <!-- App selector -->
+  <div class="fsd-app-select">
+    <label>App:</label>
+    <select id="fsdAppSelect" onchange="loadAppData()">
+      <option value="">Loading apps...</option>
+    </select>
+    <span id="fsdAppStatus" style="color:#94a3b8;font-size:12px"></span>
+  </div>
+
+  <!-- Tabs -->
+  <div class="fsd-tabs">
+    <div class="fsd-tab active" onclick="switchTab('deploy')">Deploy</div>
+    <div class="fsd-tab" onclick="switchTab('envs')">Environments</div>
+    <div class="fsd-tab" onclick="switchTab('tenants')">Tenants</div>
+    <div class="fsd-tab" onclick="switchTab('history')">History</div>
+  </div>
+
+  <!-- DEPLOY TAB -->
+  <div id="tab-deploy" class="fsd-tab-content">
+    <!-- Provider cards -->
+    <div class="fsd-cards" id="fsdProviders">
+      <div class="fsd-card" onclick="selectProvider('aws')" id="card-aws">
+        <h3><span class="fsd-badge fsd-badge-aws">AWS</span> Amazon Web Services</h3>
+        <p>ECS Fargate + RDS PostgreSQL + S3. Supports GovCloud (us-gov-west-1, us-gov-east-1).</p>
+        <div class="fsd-region-grid" id="regions-aws"></div>
+      </div>
+      <div class="fsd-card" onclick="selectProvider('azure')" id="card-azure">
+        <h3><span class="fsd-badge fsd-badge-azure">Azure</span> Microsoft Azure</h3>
+        <p>Container Apps + Azure Database for PostgreSQL + Blob Storage. Supports Azure Government.</p>
+        <div class="fsd-region-grid" id="regions-azure"></div>
+      </div>
+      <div class="fsd-card" onclick="selectProvider('gcp')" id="card-gcp">
+        <h3><span class="fsd-badge fsd-badge-gcp">GCP</span> Google Cloud Platform</h3>
+        <p>Cloud Run + Cloud SQL + Cloud Storage. Serverless auto-scaling.</p>
+        <div class="fsd-region-grid" id="regions-gcp"></div>
+      </div>
+      <div class="fsd-card" onclick="selectProvider('onprem')" id="card-onprem">
+        <h3><span class="fsd-badge fsd-badge-onprem">On-Prem</span> Docker Compose</h3>
+        <p>Self-hosted with full Supabase stack. No cloud dependency.</p>
+      </div>
+    </div>
+
+    <!-- Deploy form -->
+    <div class="fsd-form" id="fsdDeployForm" style="display:none">
+      <h3 style="color:#e2e8f0;margin-bottom:16px">Configure Deployment</h3>
+      <div class="fsd-env-row">
+        <button class="fsd-env-pill" onclick="selectEnv('dev')" id="env-dev">Dev</button>
+        <button class="fsd-env-pill" onclick="selectEnv('staging')" id="env-staging">Staging</button>
+        <button class="fsd-env-pill active-prod" onclick="selectEnv('prod')" id="env-prod">Prod</button>
+      </div>
+      <div class="fsd-form-row">
+        <div class="fsd-form-group">
+          <label>Custom Domain</label>
+          <input type="text" id="fsdDomain" placeholder="app.example.com">
+        </div>
+        <div class="fsd-form-group">
+          <label>Replicas</label>
+          <input type="number" id="fsdReplicas" value="2" min="1" max="10">
+        </div>
+        <div class="fsd-form-group">
+          <label>Selected Region</label>
+          <input type="text" id="fsdRegion" readonly style="opacity:.7">
+        </div>
+      </div>
+      <div class="fsd-check-row" style="margin-bottom:20px">
+        <label><input type="checkbox" id="fsdK8s"> Generate Kubernetes manifests</label>
+        <label><input type="checkbox" id="fsdCicd" checked> Generate CI/CD pipeline</label>
+      </div>
+      <div class="fsd-btn-row">
+        <button class="fsd-btn fsd-btn-primary" onclick="generateDeploy()" id="fsdDeployBtn">Generate Deployment</button>
+        <button class="fsd-btn fsd-btn-airgap" onclick="generateAirgap()">Air-Gap Package</button>
+      </div>
+    </div>
+
+    <!-- Result -->
+    <div class="fsd-result" id="fsdResult">
+      <h3 id="fsdResultTitle">Deployment Generated</h3>
+      <div id="fsdResultContent"></div>
+    </div>
+  </div>
+
+  <!-- ENVIRONMENTS TAB -->
+  <div id="tab-envs" class="fsd-tab-content" style="display:none">
+    <div class="fsd-cards" id="fsdEnvCards">
+      <div class="fsd-card">
+        <h3 style="color:#22c55e">Dev</h3>
+        <p>Local testing and iteration. Debug toolbar enabled, mock auth.</p>
+        <button class="fsd-btn fsd-btn-secondary" onclick="createEnv('dev')" style="font-size:12px">Create Dev Config</button>
+      </div>
+      <div class="fsd-card">
+        <h3 style="color:#f59e0b">Staging</h3>
+        <p>Pre-production validation. Production settings, seed data.</p>
+        <button class="fsd-btn fsd-btn-secondary" onclick="createEnv('staging')" style="font-size:12px">Create Staging Config</button>
+      </div>
+      <div class="fsd-card">
+        <h3 style="color:#ef4444">Prod</h3>
+        <p>Live user traffic. Full security, monitoring, multi-replica.</p>
+        <button class="fsd-btn fsd-btn-secondary" onclick="createEnv('prod')" style="font-size:12px">Create Prod Config</button>
+      </div>
+    </div>
+    <div style="margin-top:16px">
+      <div class="fsd-btn-row">
+        <button class="fsd-btn fsd-btn-secondary" onclick="promoteEnv('dev','staging')">Promote Dev &rarr; Staging</button>
+        <button class="fsd-btn fsd-btn-secondary" onclick="promoteEnv('staging','prod')">Promote Staging &rarr; Prod</button>
+      </div>
+    </div>
+    <div class="fsd-result" id="fsdEnvResult" style="margin-top:16px"></div>
+  </div>
+
+  <!-- TENANTS TAB -->
+  <div id="tab-tenants" class="fsd-tab-content" style="display:none">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+      <h3 style="color:#e2e8f0;font-size:16px">Tenant Management</h3>
+      <button class="fsd-btn fsd-btn-primary" onclick="showCreateTenant()" style="font-size:12px">+ New Tenant</button>
+    </div>
+    <div class="fsd-cards" id="fsdTenantList"></div>
+    <div class="fsd-form" id="fsdTenantForm" style="display:none;margin-top:16px">
+      <h3 style="color:#e2e8f0;margin-bottom:16px">Create Tenant</h3>
+      <div class="fsd-form-row">
+        <div class="fsd-form-group">
+          <label>Tenant Name</label>
+          <input type="text" id="fsdTenantName" placeholder="Acme Corporation">
+        </div>
+        <div class="fsd-form-group">
+          <label>Custom Domain</label>
+          <input type="text" id="fsdTenantDomain" placeholder="apps.acme.com">
+        </div>
+        <div class="fsd-form-group">
+          <label>Plan</label>
+          <select id="fsdTenantPlan">
+            <option value="community">Community</option>
+            <option value="pro">Pro</option>
+            <option value="enterprise">Enterprise</option>
+          </select>
+        </div>
+      </div>
+      <div class="fsd-form-row">
+        <div class="fsd-form-group">
+          <label>Primary Color</label>
+          <input type="color" id="fsdTenantColor" value="#6366f1" style="height:36px;padding:2px">
+        </div>
+        <div class="fsd-form-group">
+          <label>Max Apps</label>
+          <input type="number" id="fsdTenantMaxApps" value="10" min="1">
+        </div>
+      </div>
+      <button class="fsd-btn fsd-btn-primary" onclick="createTenant()">Create Tenant</button>
+    </div>
+  </div>
+
+  <!-- HISTORY TAB -->
+  <div id="tab-history" class="fsd-tab-content" style="display:none">
+    <table class="fsd-table" id="fsdHistoryTable">
+      <thead>
+        <tr>
+          <th>Deploy ID</th>
+          <th>Provider</th>
+          <th>Region</th>
+          <th>Environment</th>
+          <th>Status</th>
+          <th>Created</th>
+        </tr>
+      </thead>
+      <tbody id="fsdHistoryBody">
+        <tr><td colspan="6" style="color:#94a3b8;text-align:center;padding:32px">Select an app to view deployment history</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+{% raw %}<script>
+let selectedProvider = '';
+let selectedRegion = '';
+let selectedEnv = 'prod';
+let providersData = {};
+let selectedAppId = '';
+let selectedAppName = '';
+
+// Load apps + providers on page load
+(async function init() {
+    // Load apps
+    try {
+        const r = await fetch('/api/forge-studio/apps');
+        const d = await r.json();
+        const sel = document.getElementById('fsdAppSelect');
+        sel.innerHTML = '<option value="">-- Select an app --</option>';
+        (Array.isArray(d) ? d : d.apps || []).forEach(a => {
+            sel.innerHTML += `<option value="${a.id}" data-name="${a.name}">${a.name} (${a.id.slice(0,12)})</option>`;
+        });
+    } catch(e) { console.error('Failed to load apps', e); }
+
+    // Load providers
+    try {
+        const r = await fetch('/api/forge-studio/deploy/providers');
+        const d = await r.json();
+        providersData = {};
+        (d.providers || []).forEach(p => {
+            providersData[p.id] = p;
+            const el = document.getElementById(`regions-${p.id}`);
+            if (el) {
+                el.innerHTML = (p.regions || []).map(reg => {
+                    const isGov = (p.govcloud_regions || []).includes(reg);
+                    return `<span class="fsd-region${isGov ? ' gov' : ''}" onclick="event.stopPropagation();selectRegion('${p.id}','${reg}')" id="reg-${p.id}-${reg}">${reg}${isGov ? ' (Gov)' : ''}</span>`;
+                }).join('');
+            }
+        });
+    } catch(e) { console.error('Failed to load providers', e); }
+})();
+
+function loadAppData() {
+    const sel = document.getElementById('fsdAppSelect');
+    selectedAppId = sel.value;
+    const opt = sel.options[sel.selectedIndex];
+    selectedAppName = opt ? opt.dataset.name || '' : '';
+    document.getElementById('fsdAppStatus').textContent = selectedAppId ? `ID: ${selectedAppId}` : '';
+    if (selectedAppId) loadHistory();
+}
+
+function switchTab(tab) {
+    document.querySelectorAll('.fsd-tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.fsd-tab-content').forEach(c => c.style.display = 'none');
+    document.querySelector(`.fsd-tab:nth-child(${{'deploy':1,'envs':2,'tenants':3,'history':4}[tab]})`).classList.add('active');
+    document.getElementById(`tab-${tab}`).style.display = '';
+    if (tab === 'tenants') loadTenants();
+    if (tab === 'history' && selectedAppId) loadHistory();
+}
+
+function selectProvider(pid) {
+    selectedProvider = pid;
+    document.querySelectorAll('.fsd-card').forEach(c => c.style.borderColor = '#334155');
+    const card = document.getElementById(`card-${pid}`);
+    if (card) card.style.borderColor = '#818cf8';
+    document.getElementById('fsdDeployForm').style.display = '';
+    if (pid === 'onprem') {
+        selectedRegion = 'local';
+        document.getElementById('fsdRegion').value = 'local';
+    } else {
+        const p = providersData[pid];
+        if (p && p.regions && p.regions.length > 0 && !selectedRegion) {
+            selectRegion(pid, p.regions[0]);
+        }
+    }
+}
+
+function selectRegion(pid, region) {
+    selectedRegion = region;
+    selectedProvider = pid;
+    document.querySelectorAll('.fsd-region').forEach(r => r.classList.remove('selected'));
+    const el = document.getElementById(`reg-${pid}-${region}`);
+    if (el) el.classList.add('selected');
+    document.getElementById('fsdRegion').value = region;
+    selectProvider(pid);
+}
+
+function selectEnv(env) {
+    selectedEnv = env;
+    ['dev','staging','prod'].forEach(e => {
+        const pill = document.getElementById(`env-${e}`);
+        pill.className = 'fsd-env-pill' + (e === env ? ` active-${e}` : '');
+    });
+}
+
+async function generateDeploy() {
+    if (!selectedAppId) { alert('Select an app first'); return; }
+    if (!selectedProvider) { alert('Select a cloud provider'); return; }
+
+    const btn = document.getElementById('fsdDeployBtn');
+    btn.disabled = true;
+    btn.textContent = 'Generating...';
+
+    try {
+        const r = await fetch('/api/forge-studio/deploy/generate', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                app_id: selectedAppId,
+                app_name: selectedAppName || 'forge-app',
+                provider: selectedProvider,
+                region: selectedRegion,
+                environment: selectedEnv,
+                enable_k8s: document.getElementById('fsdK8s').checked,
+                enable_cicd: document.getElementById('fsdCicd').checked,
+                domain: document.getElementById('fsdDomain').value,
+                replicas: parseInt(document.getElementById('fsdReplicas').value) || 2,
+            }),
+        });
+        const d = await r.json();
+        showResult(d);
+    } catch(e) {
+        showResult({status:'error', error: e.message});
+    }
+    btn.disabled = false;
+    btn.textContent = 'Generate Deployment';
+}
+
+async function generateAirgap() {
+    if (!selectedAppId) { alert('Select an app first'); return; }
+
+    try {
+        const r = await fetch('/api/forge-studio/deploy/airgap', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                app_id: selectedAppId,
+                app_name: selectedAppName || 'forge-app',
+            }),
+        });
+        const d = await r.json();
+        showResult(d);
+    } catch(e) {
+        showResult({status:'error', error: e.message});
+    }
+}
+
+function showResult(data) {
+    const panel = document.getElementById('fsdResult');
+    const title = document.getElementById('fsdResultTitle');
+    const content = document.getElementById('fsdResultContent');
+    panel.style.display = 'block';
+
+    if (data.status === 'error') {
+        title.textContent = 'Error';
+        title.style.color = '#ef4444';
+        content.innerHTML = `<p style="color:#ef4444">${data.error}</p>`;
+        return;
+    }
+
+    title.style.color = '#22c55e';
+    title.textContent = data.package_id ? 'Air-Gap Package Ready' : 'Deployment Generated';
+
+    let html = `<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px">`;
+    if (data.provider) html += `<div><span style="color:#94a3b8;font-size:12px">Provider</span><br><strong style="color:#e2e8f0">${data.provider}</strong></div>`;
+    if (data.region) html += `<div><span style="color:#94a3b8;font-size:12px">Region</span><br><strong style="color:#e2e8f0">${data.region}${data.is_govcloud ? ' (GovCloud)' : ''}</strong></div>`;
+    if (data.environment) html += `<div><span style="color:#94a3b8;font-size:12px">Environment</span><br><strong style="color:#e2e8f0">${data.environment}</strong></div>`;
+    html += `<div><span style="color:#94a3b8;font-size:12px">Files</span><br><strong style="color:#e2e8f0">${data.file_count} files</strong></div>`;
+    html += `<div><span style="color:#94a3b8;font-size:12px">Duration</span><br><strong style="color:#e2e8f0">${data.duration_ms}ms</strong></div>`;
+    html += `<div><span style="color:#94a3b8;font-size:12px">Output</span><br><strong style="color:#e2e8f0;font-size:11px;word-break:break-all">${data.output_dir || ''}</strong></div>`;
+    html += `</div>`;
+
+    if (data.files_created && data.files_created.length > 0) {
+        html += `<details><summary style="color:#94a3b8;cursor:pointer;margin-bottom:8px">Generated Files (${data.files_created.length})</summary>`;
+        html += `<ul class="fsd-files">`;
+        data.files_created.forEach(f => html += `<li>${f}</li>`);
+        html += `</ul></details>`;
+    }
+
+    if (data.next_steps) {
+        html += `<div style="margin-top:12px"><span style="color:#94a3b8;font-size:12px">Next Steps:</span><pre>${data.next_steps.join('\n')}</pre></div>`;
+    }
+
+    content.innerHTML = html;
+}
+
+// Environment tab
+async function createEnv(env) {
+    if (!selectedAppId) { alert('Select an app first'); return; }
+    try {
+        const r = await fetch('/api/forge-studio/envs', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ app_id: selectedAppId, environment: env }),
+        });
+        const d = await r.json();
+        const panel = document.getElementById('fsdEnvResult');
+        panel.style.display = 'block';
+        panel.innerHTML = d.status === 'success'
+            ? `<p style="color:#22c55e">Created ${env} environment config</p><pre>${JSON.stringify(d.config, null, 2)}</pre>`
+            : `<p style="color:#ef4444">${d.error || 'Failed'}</p>`;
+    } catch(e) { alert(e.message); }
+}
+
+async function promoteEnv(from, to) {
+    if (!selectedAppId) { alert('Select an app first'); return; }
+    try {
+        const r = await fetch('/api/forge-studio/envs/promote', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ app_id: selectedAppId, from_env: from, to_env: to }),
+        });
+        const d = await r.json();
+        const panel = document.getElementById('fsdEnvResult');
+        panel.style.display = 'block';
+        panel.innerHTML = d.status === 'success'
+            ? `<p style="color:#22c55e">Promoted ${from} &rarr; ${to}</p>`
+            : `<p style="color:#ef4444">${d.error || 'Failed'}</p>`;
+    } catch(e) { alert(e.message); }
+}
+
+// Tenants tab
+async function loadTenants() {
+    try {
+        const r = await fetch('/api/forge-studio/tenants');
+        const d = await r.json();
+        const list = document.getElementById('fsdTenantList');
+        if (!d.tenants || d.tenants.length === 0) {
+            list.innerHTML = '<p style="color:#94a3b8;padding:16px">No tenants yet. Create one to enable multi-tenant isolation.</p>';
+            return;
+        }
+        list.innerHTML = d.tenants.map(t => {
+            const colors = {'community':'#22c55e','pro':'#818cf8','enterprise':'#f59e0b'};
+            return `<div class="fsd-tenant-card">
+                <div class="fsd-tenant-avatar" style="background:${colors[t.plan]||'#334155'}20;color:${colors[t.plan]||'#94a3b8'}">${(t.name||'T')[0].toUpperCase()}</div>
+                <div class="fsd-tenant-info">
+                    <h4>${t.name} <span class="fsd-badge" style="background:${colors[t.plan]||'#334155'}33;color:${colors[t.plan]||'#94a3b8'}">${t.plan}</span></h4>
+                    <span>${t.slug}${t.domain ? ' &middot; ' + t.domain : ''} &middot; Max ${t.max_apps} apps</span>
+                </div>
+            </div>`;
+        }).join('');
+    } catch(e) { console.error(e); }
+}
+
+function showCreateTenant() {
+    const form = document.getElementById('fsdTenantForm');
+    form.style.display = form.style.display === 'none' ? '' : 'none';
+}
+
+async function createTenant() {
+    const name = document.getElementById('fsdTenantName').value;
+    if (!name) { alert('Enter a tenant name'); return; }
+    try {
+        const r = await fetch('/api/forge-studio/tenants', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                name: name,
+                domain: document.getElementById('fsdTenantDomain').value,
+                plan: document.getElementById('fsdTenantPlan').value,
+                max_apps: parseInt(document.getElementById('fsdTenantMaxApps').value) || 10,
+                branding: { primary_color: document.getElementById('fsdTenantColor').value },
+            }),
+        });
+        const d = await r.json();
+        if (d.status === 'success') {
+            document.getElementById('fsdTenantForm').style.display = 'none';
+            loadTenants();
+        } else {
+            alert(d.error || 'Failed to create tenant');
+        }
+    } catch(e) { alert(e.message); }
+}
+
+// History tab
+async function loadHistory() {
+    if (!selectedAppId) return;
+    try {
+        const r = await fetch(`/api/forge-studio/deploy/history/${selectedAppId}`);
+        const d = await r.json();
+        const tbody = document.getElementById('fsdHistoryBody');
+        if (!d.deployments || d.deployments.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="6" style="color:#94a3b8;text-align:center;padding:32px">No deployments yet</td></tr>';
+            return;
+        }
+        tbody.innerHTML = d.deployments.map(dep => {
+            const statusColors = {'generated':'#818cf8','deployed':'#22c55e','failed':'#ef4444','deploying':'#f59e0b'};
+            return `<tr>
+                <td style="font-family:monospace;font-size:11px">${dep.id}</td>
+                <td><span class="fsd-badge fsd-badge-${dep.provider}">${dep.provider}</span></td>
+                <td>${dep.region||'-'}</td>
+                <td>${dep.environment}</td>
+                <td><span class="fsd-status" style="background:${statusColors[dep.status]||'#94a3b8'}"></span>${dep.status}</td>
+                <td style="font-size:11px">${dep.created_at ? new Date(dep.created_at).toLocaleString() : '-'}</td>
+            </tr>`;
+        }).join('');
+    } catch(e) { console.error(e); }
+}
+</script>{% endraw %}
+{% endblock %}