icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_enterprise.html

@@ -0,0 +1,888 @@
+<!-- CUI // SP-CTI -->
+{% extends "base.html" %}
+{% block title %}Forge Studio — Enterprise & Government{% endblock %}
+{% block content %}
+<style>
+/* ---- Layout ---- */
+.fse-wrap{max-width:1200px;margin:0 auto;padding:24px}
+.fse-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
+.fse-header h1{font-size:24px;font-weight:700;color:var(--text)}
+.fse-header .fse-back{color:var(--text-dim);text-decoration:none;font-size:18px}
+.fse-header .fse-back:hover{color:var(--text)}
+
+/* ---- Tabs ---- */
+.fse-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:2px solid var(--surface2)}
+.fse-tab{padding:10px 20px;color:var(--text-dim);cursor:pointer;font-size:14px;font-weight:500;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
+.fse-tab:hover{color:var(--text);background:var(--surface2);border-radius:6px 6px 0 0}
+.fse-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
+
+/* ---- Tab content ---- */
+.fse-tab-content{display:none}
+.fse-tab-content.active{display:block}
+
+/* ---- Cards ---- */
+.fse-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px}
+.fse-card{background:var(--surface);border-radius:10px;padding:20px;border:1px solid var(--border);transition:border-color .15s}
+.fse-card:hover{border-color:var(--accent)}
+.fse-card h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
+.fse-card p{font-size:13px;color:var(--text-dim);margin-bottom:12px;line-height:1.5}
+.fse-card-meta{font-size:11px;color:var(--text-dim);display:flex;gap:12px;flex-wrap:wrap}
+
+/* ---- Forms ---- */
+.fse-form{background:var(--surface);border-radius:10px;padding:24px;margin-bottom:24px;border:1px solid var(--border)}
+.fse-form h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:16px}
+.fse-form-row{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
+.fse-form-group{flex:1;min-width:200px}
+.fse-form-group label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px;font-weight:500}
+.fse-form-group input,
+.fse-form-group select,
+.fse-form-group textarea{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:13px;font-family:inherit}
+.fse-form-group input:focus,
+.fse-form-group select:focus,
+.fse-form-group textarea:focus{border-color:var(--accent);outline:none}
+.fse-form-group textarea{min-height:80px;resize:vertical}
+.fse-form-group input[type="color"]{height:36px;padding:2px 4px;cursor:pointer}
+.fse-form-group .fse-checkbox-row{display:flex;align-items:center;gap:8px;margin-top:6px}
+.fse-form-group .fse-checkbox-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px}
+.fse-form-group .fse-checkbox-row label{margin-bottom:0;font-size:13px;color:var(--text)}
+
+/* ---- Buttons ---- */
+.fse-btn-primary{background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
+.fse-btn-primary:hover{filter:brightness(1.15)}
+.fse-btn-primary:disabled{opacity:.5;cursor:not-allowed}
+.fse-btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:10px 20px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .15s}
+.fse-btn-secondary:hover{border-color:var(--accent)}
+.fse-btn-danger{background:#ef4444;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
+.fse-btn-danger:hover{background:#dc2626}
+.fse-btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
+
+/* ---- Tables ---- */
+.fse-table-wrap{overflow-x:auto;margin-bottom:24px}
+.fse-table{width:100%;border-collapse:collapse;font-size:13px}
+.fse-table th{text-align:left;padding:10px 12px;background:var(--surface2);color:var(--text-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
+.fse-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text)}
+.fse-table tr:hover td{background:var(--surface2)}
+.fse-table .fse-empty-row td{text-align:center;color:var(--text-dim);padding:24px;font-style:italic}
+
+/* ---- Badges ---- */
+.fse-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
+.fse-badge-active{background:rgba(34,197,94,.15);color:#22c55e}
+.fse-badge-inactive{background:rgba(156,163,175,.15);color:#9ca3af}
+.fse-badge-saml{background:rgba(59,130,246,.15);color:#3b82f6}
+.fse-badge-oidc{background:rgba(168,85,247,.15);color:#a855f7}
+.fse-badge-api_key{background:rgba(245,158,11,.15);color:#f59e0b}
+.fse-badge-il4{background:rgba(239,68,68,.15);color:#ef4444}
+.fse-badge-il5{background:rgba(220,38,38,.15);color:#dc2626}
+.fse-badge-fedramp{background:rgba(168,85,247,.15);color:#a855f7}
+.fse-badge-stig{background:rgba(34,197,94,.15);color:#22c55e}
+
+/* ---- Section ---- */
+.fse-section{margin-bottom:24px}
+.fse-section h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:12px}
+.fse-section p{font-size:13px;color:var(--text-dim);margin-bottom:12px}
+
+/* ---- Preset cards ---- */
+.fse-preset-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:24px}
+.fse-preset-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;transition:all .15s}
+.fse-preset-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
+.fse-preset-card h4{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
+.fse-preset-card p{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:10px}
+.fse-preset-card .fse-preset-meta{font-size:11px;color:var(--text-dim);display:flex;gap:10px}
+
+/* ---- Result panel ---- */
+.fse-result{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:20px;margin-top:20px;display:none}
+.fse-result.visible{display:block}
+.fse-result h3{font-size:16px;color:var(--text);margin-bottom:12px}
+.fse-result pre{background:var(--surface);padding:16px;border-radius:8px;font-size:12px;color:var(--text-dim);overflow-x:auto;max-height:400px}
+
+/* ---- Loading ---- */
+.fse-loading{text-align:center;padding:20px;color:var(--accent)}
+.fse-spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:fse-spin .6s linear infinite;margin-right:8px;vertical-align:middle}
+@keyframes fse-spin{to{transform:rotate(360deg)}}
+
+/* ---- Modal ---- */
+.fse-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center}
+.fse-modal-overlay.open{display:flex}
+.fse-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:700px;max-width:95vw;max-height:80vh;padding:28px;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.4)}
+.fse-modal h2{font-size:18px;margin-bottom:16px}
+.fse-modal pre{background:var(--surface2);padding:16px;border-radius:8px;font-size:12px;color:var(--text);overflow-x:auto;white-space:pre-wrap}
+.fse-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
+
+@media(max-width:600px){
+    .fse-cards,.fse-preset-cards{grid-template-columns:1fr}
+    .fse-form-row{flex-direction:column}
+    .fse-tabs{flex-wrap:wrap}
+}
+</style>
+
+<div class="fse-wrap">
+    <!-- Header -->
+    <div class="fse-header">
+        <a href="/forge-studio" class="fse-back">&larr;</a>
+        <h1>Enterprise &amp; Government</h1>
+    </div>
+
+    <!-- Tabs -->
+    <div class="fse-tabs">
+        <button class="fse-tab active" onclick="switchTab('sso')">SSO &amp; Auth</button>
+        <button class="fse-tab" onclick="switchTab('frameworks')">Compliance Frameworks</button>
+        <button class="fse-tab" onclick="switchTab('whitelabel')">White-Label</button>
+        <button class="fse-tab" onclick="switchTab('hardening')">Hardening &amp; FedRAMP</button>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- TAB 1: SSO & Auth -->
+    <!-- ============================================================ -->
+    <div class="fse-tab-content active" id="tab-sso">
+        <div class="fse-section">
+            <h3>SSO Configurations</h3>
+            <div class="fse-table-wrap">
+                <table class="fse-table" id="sso-table">
+                    <thead>
+                        <tr>
+                            <th>Tenant</th>
+                            <th>Provider</th>
+                            <th>Display Name</th>
+                            <th>Issuer</th>
+                            <th>MFA</th>
+                            <th>Status</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="sso-tbody">
+                        <tr class="fse-empty-row"><td colspan="7">Loading...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Configure SSO</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Tenant ID</label>
+                    <input type="text" id="sso-tenant" placeholder="e.g. acme-corp">
+                </div>
+                <div class="fse-form-group">
+                    <label>Provider Type</label>
+                    <select id="sso-provider" onchange="onProviderChange()">
+                        <option value="oidc">OIDC</option>
+                        <option value="saml">SAML</option>
+                        <option value="api_key">API Key</option>
+                    </select>
+                </div>
+                <div class="fse-form-group">
+                    <label>Preset</label>
+                    <select id="sso-preset" onchange="onPresetChange()">
+                        <option value="">— Custom —</option>
+                        <option value="keycloak">Keycloak (OIDC)</option>
+                        <option value="azure_ad">Azure AD</option>
+                        <option value="okta">Okta</option>
+                    </select>
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Issuer URL</label>
+                    <input type="text" id="sso-issuer" placeholder="https://idp.example.com/realms/main">
+                </div>
+                <div class="fse-form-group">
+                    <label>Metadata URL</label>
+                    <input type="text" id="sso-metadata" placeholder="https://idp.example.com/.well-known/openid-configuration">
+                </div>
+            </div>
+            <div class="fse-form-row" id="sso-oidc-fields">
+                <div class="fse-form-group">
+                    <label>Client ID</label>
+                    <input type="text" id="sso-client-id" placeholder="client-id">
+                </div>
+                <div class="fse-form-group">
+                    <label>Client Secret</label>
+                    <input type="password" id="sso-client-secret" placeholder="client-secret">
+                </div>
+            </div>
+            <div class="fse-form-row" id="sso-saml-fields" style="display:none">
+                <div class="fse-form-group" style="flex:2">
+                    <label>Certificate PEM</label>
+                    <textarea id="sso-cert-pem" placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"></textarea>
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Display Name</label>
+                    <input type="text" id="sso-display-name" placeholder="Corporate SSO">
+                </div>
+                <div class="fse-form-group">
+                    <label>Default Role</label>
+                    <select id="sso-default-role">
+                        <option value="viewer">Viewer</option>
+                        <option value="editor">Editor</option>
+                        <option value="admin">Admin</option>
+                    </select>
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <div class="fse-checkbox-row">
+                        <input type="checkbox" id="sso-mfa">
+                        <label for="sso-mfa">Enforce MFA</label>
+                    </div>
+                </div>
+                <div class="fse-form-group">
+                    <label>Allowed Domains (one per line)</label>
+                    <textarea id="sso-domains" placeholder="example.com&#10;corp.example.com" rows="3"></textarea>
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="configureSso()">Configure SSO</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- TAB 2: Compliance Frameworks -->
+    <!-- ============================================================ -->
+    <div class="fse-tab-content" id="tab-frameworks">
+        <div class="fse-section">
+            <h3>Custom Frameworks</h3>
+            <div class="fse-btn-row" style="margin-bottom:16px">
+                <button class="fse-btn-secondary" onclick="seedFrameworks()">Seed Examples (HIPAA, SOC 2, PCI DSS)</button>
+            </div>
+            <div class="fse-table-wrap">
+                <table class="fse-table" id="fw-table">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>Key</th>
+                            <th>Controls</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody id="fw-tbody">
+                        <tr class="fse-empty-row"><td colspan="5">Loading...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Create Framework</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Name</label>
+                    <input type="text" id="fw-name" placeholder="e.g. HIPAA">
+                </div>
+                <div class="fse-form-group">
+                    <label>Short Key</label>
+                    <input type="text" id="fw-key" placeholder="e.g. hipaa">
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group" style="flex:2">
+                    <label>Description</label>
+                    <input type="text" id="fw-desc" placeholder="Health Insurance Portability and Accountability Act">
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group" style="flex:2">
+                    <label>Controls JSON</label>
+                    <textarea id="fw-controls" rows="6" placeholder='[{"id":"AC-1","title":"Access Control Policy","description":"...","severity":"high"}]'></textarea>
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="createFramework()">Create Framework</button>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Assess Application</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>App ID</label>
+                    <input type="text" id="fw-assess-app" placeholder="app-001">
+                </div>
+                <div class="fse-form-group">
+                    <label>Framework</label>
+                    <select id="fw-assess-id">
+                        <option value="">— Select Framework —</option>
+                    </select>
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="assessApp()">Run Assessment</button>
+            </div>
+            <div class="fse-result" id="fw-assess-result">
+                <h3>Assessment Results</h3>
+                <div id="fw-assess-summary"></div>
+                <div class="fse-table-wrap" style="margin-top:12px">
+                    <table class="fse-table">
+                        <thead>
+                            <tr><th>Control</th><th>Title</th><th>Status</th><th>Details</th></tr>
+                        </thead>
+                        <tbody id="fw-assess-tbody"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- TAB 3: White-Label -->
+    <!-- ============================================================ -->
+    <div class="fse-tab-content" id="tab-whitelabel">
+        <div class="fse-section">
+            <h3>White-Label Configurations</h3>
+            <div class="fse-table-wrap">
+                <table class="fse-table" id="wl-table">
+                    <thead>
+                        <tr>
+                            <th>Tenant</th>
+                            <th>Domain</th>
+                            <th>Company</th>
+                            <th>Primary</th>
+                            <th>Font</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="wl-tbody">
+                        <tr class="fse-empty-row"><td colspan="6">Loading...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Configure White-Label</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Tenant ID</label>
+                    <input type="text" id="wl-tenant" placeholder="acme-corp">
+                </div>
+                <div class="fse-form-group">
+                    <label>Custom Domain</label>
+                    <input type="text" id="wl-domain" placeholder="app.acme.com">
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Primary Color</label>
+                    <input type="color" id="wl-primary" value="#3b82f6">
+                </div>
+                <div class="fse-form-group">
+                    <label>Secondary Color</label>
+                    <input type="color" id="wl-secondary" value="#1e293b">
+                </div>
+                <div class="fse-form-group">
+                    <label>Accent Color</label>
+                    <input type="color" id="wl-accent" value="#818cf8">
+                </div>
+                <div class="fse-form-group">
+                    <label>Font Family</label>
+                    <input type="text" id="wl-font" placeholder="Inter, sans-serif">
+                </div>
+            </div>
+
+            <h3 style="margin-top:20px">Legal</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Company Name</label>
+                    <input type="text" id="wl-company" placeholder="Acme Corporation">
+                </div>
+                <div class="fse-form-group">
+                    <label>Privacy Policy URL</label>
+                    <input type="text" id="wl-privacy" placeholder="https://acme.com/privacy">
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Terms of Service URL</label>
+                    <input type="text" id="wl-terms" placeholder="https://acme.com/terms">
+                </div>
+                <div class="fse-form-group">
+                    <label>Copyright Text</label>
+                    <input type="text" id="wl-copyright" placeholder="&copy; 2026 Acme Corporation">
+                </div>
+            </div>
+
+            <h3 style="margin-top:20px">Feature Flags</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <div class="fse-checkbox-row">
+                        <input type="checkbox" id="wl-hide-powered">
+                        <label for="wl-hide-powered">Hide "Powered By" branding</label>
+                    </div>
+                </div>
+                <div class="fse-form-group">
+                    <div class="fse-checkbox-row">
+                        <input type="checkbox" id="wl-custom-favicon">
+                        <label for="wl-custom-favicon">Custom Favicon</label>
+                    </div>
+                </div>
+                <div class="fse-form-group">
+                    <div class="fse-checkbox-row">
+                        <input type="checkbox" id="wl-custom-404">
+                        <label for="wl-custom-404">Custom 404 Page</label>
+                    </div>
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="configureWhiteLabel()">Configure</button>
+                <button class="fse-btn-secondary" onclick="previewCss()">Preview CSS</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- TAB 4: Hardening & FedRAMP -->
+    <!-- ============================================================ -->
+    <div class="fse-tab-content" id="tab-hardening">
+        <div class="fse-section">
+            <h3>Hardening Presets</h3>
+            <div class="fse-preset-cards" id="preset-cards">
+                <div class="fse-loading"><span class="fse-spinner"></span> Loading presets...</div>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Apply Hardening</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>App ID</label>
+                    <input type="text" id="hd-app" placeholder="app-001">
+                </div>
+                <div class="fse-form-group">
+                    <label>Preset</label>
+                    <select id="hd-preset">
+                        <option value="">— Select Preset —</option>
+                    </select>
+                </div>
+            </div>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>Provider</label>
+                    <select id="hd-provider">
+                        <option value="aws">AWS</option>
+                        <option value="azure">Azure</option>
+                        <option value="gcp">GCP</option>
+                        <option value="on_prem">On-Premises</option>
+                    </select>
+                </div>
+                <div class="fse-form-group">
+                    <label>Region</label>
+                    <input type="text" id="hd-region" placeholder="us-gov-west-1">
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="applyHardening()">Apply Hardening</button>
+            </div>
+            <div class="fse-result" id="hd-apply-result">
+                <h3>Hardening Applied</h3>
+                <pre id="hd-apply-output"></pre>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>Hardening Status</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>App ID</label>
+                    <input type="text" id="hd-status-app" placeholder="app-001">
+                </div>
+                <div class="fse-form-group" style="display:flex;align-items:flex-end">
+                    <button class="fse-btn-secondary" onclick="checkHardeningStatus()">Check Status</button>
+                </div>
+            </div>
+            <div class="fse-result" id="hd-status-result">
+                <h3>Current Hardening</h3>
+                <pre id="hd-status-output"></pre>
+            </div>
+        </div>
+
+        <div class="fse-form">
+            <h3>FedRAMP Package Generation</h3>
+            <div class="fse-form-row">
+                <div class="fse-form-group">
+                    <label>App ID</label>
+                    <input type="text" id="fedramp-app" placeholder="app-001">
+                </div>
+            </div>
+            <div class="fse-btn-row">
+                <button class="fse-btn-primary" onclick="generateFedramp()">Generate FedRAMP Package</button>
+            </div>
+            <div class="fse-result" id="fedramp-result">
+                <h3>Generated Documents</h3>
+                <ul id="fedramp-docs" style="list-style:none;padding:0"></ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- CSS Preview Modal -->
+<div class="fse-modal-overlay" id="css-preview-modal">
+    <div class="fse-modal">
+        <h2>White-Label CSS Preview</h2>
+        <pre id="css-preview-content">Loading...</pre>
+        <div class="fse-modal-footer">
+            <button class="fse-btn-secondary" onclick="closeCssPreview()">Close</button>
+        </div>
+    </div>
+</div>
+
+<script>
+const API = "/api/forge-studio";
+
+function esc(s) { const d = document.createElement("div"); d.textContent = s || ""; return d.innerHTML; }
+
+/* ---- Tab switching ---- */
+function switchTab(name) {
+    document.querySelectorAll(".fse-tab").forEach(t => t.classList.remove("active"));
+    document.querySelectorAll(".fse-tab-content").forEach(t => t.classList.remove("active"));
+    document.querySelector(`#tab-${name}`).classList.add("active");
+    const tabs = ["sso", "frameworks", "whitelabel", "hardening"];
+    const idx = tabs.indexOf(name);
+    if (idx >= 0) document.querySelectorAll(".fse-tab")[idx].classList.add("active");
+}
+
+/* ---- SSO ---- */
+async function loadSsoConfigs() {
+    try {
+        const r = await fetch(`${API}/sso/configs`);
+        const data = await r.json();
+        const configs = data.configs || data || [];
+        const tbody = document.getElementById("sso-tbody");
+        if (!configs.length) {
+            tbody.innerHTML = '<tr class="fse-empty-row"><td colspan="7">No SSO configurations found</td></tr>';
+            return;
+        }
+        tbody.innerHTML = configs.map(c => `<tr>
+            <td>${esc(c.tenant_id)}</td>
+            <td><span class="fse-badge fse-badge-${esc(c.provider_type)}">${esc(c.provider_type)}</span></td>
+            <td>${esc(c.display_name)}</td>
+            <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(c.issuer_url)}">${esc(c.issuer_url)}</td>
+            <td>${c.enforce_mfa ? "Yes" : "No"}</td>
+            <td><span class="fse-badge fse-badge-${c.active ? 'active' : 'inactive'}">${c.active ? "Active" : "Inactive"}</span></td>
+            <td><button class="fse-btn-danger" onclick="deactivateSso('${esc(c.tenant_id)}')">Deactivate</button></td>
+        </tr>`).join("");
+    } catch (e) {
+        document.getElementById("sso-tbody").innerHTML = '<tr class="fse-empty-row"><td colspan="7">No SSO configurations found</td></tr>';
+    }
+}
+
+function onProviderChange() {
+    const prov = document.getElementById("sso-provider").value;
+    document.getElementById("sso-oidc-fields").style.display = prov === "oidc" ? "flex" : "none";
+    document.getElementById("sso-saml-fields").style.display = prov === "saml" ? "flex" : "none";
+}
+
+function onPresetChange() {
+    const preset = document.getElementById("sso-preset").value;
+    const issuer = document.getElementById("sso-issuer");
+    const metadata = document.getElementById("sso-metadata");
+    const provider = document.getElementById("sso-provider");
+    const displayName = document.getElementById("sso-display-name");
+
+    if (preset === "keycloak") {
+        provider.value = "oidc";
+        onProviderChange();
+        issuer.value = "https://<hostname>/realms/<realm>";
+        metadata.value = "https://<hostname>/realms/<realm>/.well-known/openid-configuration";
+        displayName.value = "Keycloak SSO";
+    } else if (preset === "azure_ad") {
+        provider.value = "oidc";
+        onProviderChange();
+        issuer.value = "https://login.microsoftonline.com/<tenant-id>/v2.0";
+        metadata.value = "https://login.microsoftonline.com/<tenant-id>/v2.0/.well-known/openid-configuration";
+        displayName.value = "Azure AD SSO";
+    } else if (preset === "okta") {
+        provider.value = "oidc";
+        onProviderChange();
+        issuer.value = "https://<org>.okta.com/oauth2/default";
+        metadata.value = "https://<org>.okta.com/oauth2/default/.well-known/openid-configuration";
+        displayName.value = "Okta SSO";
+    }
+}
+
+async function configureSso() {
+    const body = {
+        tenant_id: document.getElementById("sso-tenant").value,
+        provider_type: document.getElementById("sso-provider").value,
+        issuer_url: document.getElementById("sso-issuer").value,
+        metadata_url: document.getElementById("sso-metadata").value,
+        client_id: document.getElementById("sso-client-id").value,
+        client_secret: document.getElementById("sso-client-secret").value,
+        certificate_pem: document.getElementById("sso-cert-pem").value,
+        display_name: document.getElementById("sso-display-name").value,
+        default_role: document.getElementById("sso-default-role").value,
+        enforce_mfa: document.getElementById("sso-mfa").checked,
+        allowed_domains: document.getElementById("sso-domains").value.split("\n").filter(d => d.trim())
+    };
+    if (!body.tenant_id) { alert("Tenant ID is required"); return; }
+    try {
+        const r = await fetch(`${API}/sso/configure`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to configure SSO"); return; }
+        alert("SSO configured successfully");
+        loadSsoConfigs();
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function deactivateSso(tenantId) {
+    if (!confirm(`Deactivate SSO for tenant "${tenantId}"?`)) return;
+    try {
+        const r = await fetch(`${API}/sso/deactivate`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ tenant_id: tenantId }) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to deactivate"); return; }
+        alert("SSO deactivated");
+        loadSsoConfigs();
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+/* ---- Compliance Frameworks ---- */
+async function loadFrameworks() {
+    try {
+        const r = await fetch(`${API}/frameworks`);
+        const data = await r.json();
+        const frameworks = data.frameworks || data || [];
+        const tbody = document.getElementById("fw-tbody");
+        const sel = document.getElementById("fw-assess-id");
+        if (!frameworks.length) {
+            tbody.innerHTML = '<tr class="fse-empty-row"><td colspan="5">No frameworks found. Click "Seed Examples" to get started.</td></tr>';
+            sel.innerHTML = '<option value="">— No frameworks —</option>';
+            return;
+        }
+        tbody.innerHTML = frameworks.map(f => `<tr>
+            <td>${esc(String(f.id))}</td>
+            <td>${esc(f.name)}</td>
+            <td><code>${esc(f.short_key)}</code></td>
+            <td>${f.control_count || (f.controls ? f.controls.length : 0)}</td>
+            <td>${esc(f.description)}</td>
+        </tr>`).join("");
+        sel.innerHTML = '<option value="">— Select Framework —</option>' +
+            frameworks.map(f => `<option value="${esc(String(f.id))}">${esc(f.name)}</option>`).join("");
+    } catch (e) {
+        document.getElementById("fw-tbody").innerHTML = '<tr class="fse-empty-row"><td colspan="5">No frameworks found</td></tr>';
+    }
+}
+
+async function seedFrameworks() {
+    try {
+        const r = await fetch(`${API}/frameworks/seed`, { method: "POST", headers: {"Content-Type": "application/json"} });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to seed"); return; }
+        alert("Example frameworks seeded successfully");
+        loadFrameworks();
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function createFramework() {
+    let controls;
+    try { controls = JSON.parse(document.getElementById("fw-controls").value || "[]"); }
+    catch (e) { alert("Invalid controls JSON"); return; }
+    const body = {
+        name: document.getElementById("fw-name").value,
+        short_key: document.getElementById("fw-key").value,
+        description: document.getElementById("fw-desc").value,
+        controls: controls
+    };
+    if (!body.name || !body.short_key) { alert("Name and Short Key are required"); return; }
+    try {
+        const r = await fetch(`${API}/frameworks`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to create framework"); return; }
+        alert("Framework created");
+        document.getElementById("fw-name").value = "";
+        document.getElementById("fw-key").value = "";
+        document.getElementById("fw-desc").value = "";
+        document.getElementById("fw-controls").value = "";
+        loadFrameworks();
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function assessApp() {
+    const appId = document.getElementById("fw-assess-app").value;
+    const fwId = document.getElementById("fw-assess-id").value;
+    if (!appId || !fwId) { alert("App ID and Framework are required"); return; }
+    try {
+        const r = await fetch(`${API}/frameworks/assess`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ app_id: appId, framework_id: fwId }) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Assessment failed"); return; }
+        const res = data.assessment || data;
+        const pct = res.score != null ? Math.round(res.score * 100) : "N/A";
+        const passed = res.controls_passed || 0;
+        const total = res.controls_total || 0;
+        document.getElementById("fw-assess-summary").innerHTML =
+            `<p style="font-size:14px;color:var(--text)">Score: <strong>${pct}%</strong> &mdash; ${passed}/${total} controls passed</p>`;
+        const details = res.details || res.control_results || [];
+        document.getElementById("fw-assess-tbody").innerHTML = details.map(d => `<tr>
+            <td><code>${esc(d.control_id || d.id)}</code></td>
+            <td>${esc(d.title || "")}</td>
+            <td><span class="fse-badge fse-badge-${d.status === 'pass' ? 'active' : 'inactive'}">${esc(d.status)}</span></td>
+            <td>${esc(d.details || d.finding || "")}</td>
+        </tr>`).join("") || '<tr class="fse-empty-row"><td colspan="4">No details</td></tr>';
+        document.getElementById("fw-assess-result").classList.add("visible");
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+/* ---- White-Label ---- */
+async function loadWhiteLabelConfigs() {
+    try {
+        const r = await fetch(`${API}/whitelabel/configs`);
+        const data = await r.json();
+        const configs = data.configs || data || [];
+        const tbody = document.getElementById("wl-tbody");
+        if (!configs.length) {
+            tbody.innerHTML = '<tr class="fse-empty-row"><td colspan="6">No white-label configurations found</td></tr>';
+            return;
+        }
+        tbody.innerHTML = configs.map(c => `<tr>
+            <td>${esc(c.tenant_id)}</td>
+            <td>${esc(c.custom_domain || "—")}</td>
+            <td>${esc(c.company_name || "—")}</td>
+            <td><span style="display:inline-block;width:20px;height:20px;border-radius:4px;background:${esc(c.primary_color || '#3b82f6')};vertical-align:middle;border:1px solid var(--border)"></span> ${esc(c.primary_color || "")}</td>
+            <td>${esc(c.font_family || "—")}</td>
+            <td><button class="fse-btn-secondary" style="padding:4px 10px;font-size:12px" onclick="previewCssForTenant('${esc(c.tenant_id)}')">Preview</button></td>
+        </tr>`).join("");
+    } catch (e) {
+        document.getElementById("wl-tbody").innerHTML = '<tr class="fse-empty-row"><td colspan="6">No white-label configurations found</td></tr>';
+    }
+}
+
+async function configureWhiteLabel() {
+    const body = {
+        tenant_id: document.getElementById("wl-tenant").value,
+        custom_domain: document.getElementById("wl-domain").value,
+        primary_color: document.getElementById("wl-primary").value,
+        secondary_color: document.getElementById("wl-secondary").value,
+        accent_color: document.getElementById("wl-accent").value,
+        font_family: document.getElementById("wl-font").value,
+        company_name: document.getElementById("wl-company").value,
+        privacy_url: document.getElementById("wl-privacy").value,
+        terms_url: document.getElementById("wl-terms").value,
+        copyright_text: document.getElementById("wl-copyright").value,
+        hide_powered_by: document.getElementById("wl-hide-powered").checked,
+        custom_favicon: document.getElementById("wl-custom-favicon").checked,
+        custom_404: document.getElementById("wl-custom-404").checked
+    };
+    if (!body.tenant_id) { alert("Tenant ID is required"); return; }
+    try {
+        const r = await fetch(`${API}/whitelabel/configure`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to configure"); return; }
+        alert("White-label configured");
+        loadWhiteLabelConfigs();
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function previewCss() {
+    const tenantId = document.getElementById("wl-tenant").value;
+    if (!tenantId) { alert("Enter a Tenant ID first"); return; }
+    previewCssForTenant(tenantId);
+}
+
+async function previewCssForTenant(tenantId) {
+    try {
+        const r = await fetch(`${API}/whitelabel/preview-css/${encodeURIComponent(tenantId)}`);
+        const data = await r.json();
+        document.getElementById("css-preview-content").textContent = data.css || JSON.stringify(data, null, 2);
+        document.getElementById("css-preview-modal").classList.add("open");
+    } catch (e) {
+        document.getElementById("css-preview-content").textContent = "Error loading preview: " + e.message;
+        document.getElementById("css-preview-modal").classList.add("open");
+    }
+}
+
+function closeCssPreview() {
+    document.getElementById("css-preview-modal").classList.remove("open");
+}
+
+/* ---- Hardening & FedRAMP ---- */
+async function loadHardeningPresets() {
+    try {
+        const r = await fetch(`${API}/hardening/presets`);
+        const data = await r.json();
+        const presets = data.presets || data || [];
+        const container = document.getElementById("preset-cards");
+        const sel = document.getElementById("hd-preset");
+        if (!presets.length) {
+            container.innerHTML = '<p style="color:var(--text-dim)">No presets available</p>';
+            return;
+        }
+        container.innerHTML = presets.map(p => `<div class="fse-preset-card">
+            <h4>${esc(p.name)}</h4>
+            <p>${esc(p.description)}</p>
+            <div class="fse-preset-meta">
+                <span class="fse-badge fse-badge-${(p.impact_level || '').toLowerCase().replace(' ', '')}">${esc(p.impact_level || "")}</span>
+                <span>${p.check_count || p.checks || 0} checks</span>
+            </div>
+        </div>`).join("");
+        sel.innerHTML = '<option value="">— Select Preset —</option>' +
+            presets.map(p => `<option value="${esc(p.id || p.name)}">${esc(p.name)}</option>`).join("");
+    } catch (e) {
+        document.getElementById("preset-cards").innerHTML = '<p style="color:var(--text-dim)">Failed to load presets</p>';
+    }
+}
+
+async function applyHardening() {
+    const body = {
+        app_id: document.getElementById("hd-app").value,
+        preset: document.getElementById("hd-preset").value,
+        provider: document.getElementById("hd-provider").value,
+        region: document.getElementById("hd-region").value
+    };
+    if (!body.app_id || !body.preset) { alert("App ID and Preset are required"); return; }
+    try {
+        const r = await fetch(`${API}/hardening/apply`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(body) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to apply hardening"); return; }
+        document.getElementById("hd-apply-output").textContent = JSON.stringify(data, null, 2);
+        document.getElementById("hd-apply-result").classList.add("visible");
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function checkHardeningStatus() {
+    const appId = document.getElementById("hd-status-app").value;
+    if (!appId) { alert("App ID is required"); return; }
+    try {
+        const r = await fetch(`${API}/hardening/status/${encodeURIComponent(appId)}`);
+        const data = await r.json();
+        document.getElementById("hd-status-output").textContent = JSON.stringify(data, null, 2);
+        document.getElementById("hd-status-result").classList.add("visible");
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+async function generateFedramp() {
+    const appId = document.getElementById("fedramp-app").value;
+    if (!appId) { alert("App ID is required"); return; }
+    try {
+        const r = await fetch(`${API}/fedramp/generate`, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ app_id: appId }) });
+        const data = await r.json();
+        if (!r.ok) { alert(data.error || "Failed to generate"); return; }
+        const docs = data.documents || data.files || [];
+        const ul = document.getElementById("fedramp-docs");
+        if (docs.length) {
+            ul.innerHTML = docs.map(d => `<li style="padding:6px 0;font-size:13px;color:var(--text);border-bottom:1px solid var(--border)">
+                <strong>${esc(typeof d === "string" ? d : d.name || d.filename)}</strong>
+                ${d.description ? '<span style="color:var(--text-dim);margin-left:8px">' + esc(d.description) + '</span>' : ''}
+            </li>`).join("");
+        } else {
+            ul.innerHTML = '<li style="padding:6px 0;color:var(--text-dim)">No documents generated</li>';
+        }
+        document.getElementById("fedramp-result").classList.add("visible");
+    } catch (e) { alert("Error: " + e.message); }
+}
+
+/* ---- Init ---- */
+document.addEventListener("DOMContentLoaded", () => {
+    loadSsoConfigs();
+    loadFrameworks();
+    loadWhiteLabelConfigs();
+    loadHardeningPresets();
+});
+
+/* Close modal on overlay click */
+document.getElementById("css-preview-modal").addEventListener("click", function(e) {
+    if (e.target === this) closeCssPreview();
+});
+</script>
+{% endblock %}