@rblez/authly 0.4.0 → 0.5.0

package/dist/dashboard/app.js

@@ -1,3 +1,13 @@
+// Authly Dashboard — bundled from src/dashboard/
+// @source-map-url=app.js.map
+
+// ── dashboard/index.js ──
+/**
+ * Authly Dashboard — entry point.
+ * Bundles all sections into a single app.js by esbuild.
+ */
+
+
 document.addEventListener("DOMContentLoaded", () => {
   const navItems = document.querySelectorAll(".nav-item");
   const sections = document.querySelectorAll(".section");
@@ -7,473 +17,981 @@ document.addEventListener("DOMContentLoaded", () => {
   const statusText = document.getElementById("statusText");
   const statusDot = document.querySelector(".header__dot");
 
-  // All API calls go to the hosted authly instance
-  const API_URL = "https://authly.rblez.com/api";
-
   checkHealth();
 
-  // ── Helpers ─────────────────────────────────────────
-  async function api(endpoint, opts = {}) {
-    const res = await fetch(`${API_URL}${endpoint}`, {
-      headers: { "Content-Type": "application/json" },
-      ...opts,
-    });
-    return res.json();
-  }
-
-  function showResult(el, text, type = "info") {
-    el.textContent = "";
-    el.classList.remove("hidden", "result--ok", "result--error", "result--info");
-    el.classList.add(`result--${type}`);
-    el.textContent = text;
-  }
-
-  function hideResult(el) {
-    el.classList.add("hidden");
-    el.classList.remove("result--ok", "result--error", "result--info");
-  }
-
-  function showToast(msg, type = "ok") {
-    const toast = document.getElementById("toast");
-    toast.textContent = msg;
-    toast.className = `toast toast--${type}`;
-    setTimeout(() => toast.classList.add("hidden"), 3500);
-  }
-
   // ── Health ──────────────────────────────────────────
   async function checkHealth() {
     try {
-      const res = await fetch(`${API_URL}/health`);
+      const res = await fetch(`${BASE}/health`);
       if (res.ok) {
         statusText.textContent = "Connected";
-        statusDot.style.background = "#22c55e";
+        if (statusDot) statusDot.style.background = "#22c55e";
       } else { setDisconnected(); }
     } catch { setDisconnected(); }
   }
 
   function setDisconnected() {
     statusText.textContent = "Disconnected";
-    statusDot.style.background = "#ef4444";
+    if (statusDot) statusDot.style.background = "#ef4444";
   }
 
-  // ── Auto-detect Supabase ──────────────────────────────
-  async function autoDetectSupabase() {
-    const scanStatus = document.getElementById("scanStatus");
-    const scanDetail = document.getElementById("scanDetail");
-    const scanAction = document.getElementById("scanAction");
-    const intStatus = document.getElementById("integrationStatus");
-    const intDetail = document.getElementById("integrationDetail");
+  // ── Navigate ────────────────────────────────────────
+  const sectionLoaders = {
+    init: null,
+    integration: loadSupabase,
+    providers: loadProviders,
+    ui: null,
+    routes: null,
+    roles: loadRoles,
+    "api-keys": loadApiKeys,
+    env: null,
+    migrate: loadMigrations,
+    users: loadUsers,
+    mcp: loadMCP,
+    audit: loadAudit,
+  };
 
-    try {
-      const scan = await api("/init/scan");
-
-      if (scan.detected && scan.url && scan.anonKey && scan.serviceKey) {
-        // Auto-connect
-        scanStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Supabase credentials found — auto-connecting…</span>`;
-        const data = await api("/init/connect", { method: "POST" });
-
-        if (data.success) {
-          scanStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Auto-connected to Supabase</span>`;
-          const ref = scan.projectRef || url.ref;
-
-          if (scanDetail) {
-            scanDetail.classList.remove("hidden");
-            scanDetail.innerHTML = `
-              <div style="color:#aaa;font-size:.78rem;line-height:1.7">
-                <div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>
-                <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
-                <div>Found in: <span style="color:#22c55e">${scan.sources.join(", ")}</span></div>
-                <div>Framework: <code style="color:#c9c">${scan.framework || "unknown"}</code></div>
-              </div>
-              `;
-          }
+  for (const item of navItems) {
+    item.addEventListener("click", (e) => {
+      e.preventDefault();
+      switchSection(item.dataset.section);
+    });
+  }
 
-          if (intStatus) {
-            intStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Connected to Supabase</span>`;
-          }
+  function switchSection(id) {
+    for (const n of navItems) n.classList.remove("active");
+    document.querySelector(`[data-section="${id}"]`)?.classList.add("active");
+    for (const sec of sections) sec.classList.toggle("hidden", sec.id !== id);
+    if (headerTitle) headerTitle.textContent = document.querySelector(`[data-section="${id}"]`)?.textContent?.trim() ?? "";
+    sidebar?.classList.remove("open");
 
-          if (intDetail) {
-            intDetail.classList.remove("hidden");
-            intDetail.innerHTML = `
-              <div style="color:#aaa;font-size:.78rem;line-height:1.7">
-                <div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>
-                <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
-                <div>Framework: <code style="color:#c9c">${scan.framework || "unknown"}</code></div>
-                <div>Sources: <span style="color:#22c55e">${scan.sources.join(", ")}</span></div>
-                <div>Can connect: <span style="color:#22c55e">● yes</span></div>
-              </div>
-            `;
-          }
-        } else {
-          scanStatus.innerHTML = `<span style="color:#f87171">Auto-connect failed: ${data.error}</span>`;
-          showScanFallback(scan);
-        }
-      } else {
-        showScanFallback(scan);
-      }
-    } catch (e) {
-      scanStatus.textContent = "Scan failed: " + e.message;
-      intStatus.innerHTML = `<span style="color:#888">Could not reach scan endpoint</span>`;
-    }
+    const container = document.getElementById(id);
+    const loader = sectionLoaders[id];
+    if (loader && container) loader(container);
   }
 
-  function showScanFallback(scan) {
-    const scanStatus = document.getElementById("scanStatus");
-    const scanDetail = document.getElementById("scanDetail");
-    const scanAction = document.getElementById("scanAction");
-    const intStatus = document.getElementById("integrationStatus");
-    const intDetail = document.getElementById("integrationDetail");
-
-    let msg = "No Supabase credentials detected";
-    let color = "#f87171";
-    let icon = "ri-error-warning-line";
-
-    if (scan.detected) {
-      msg = "Partial credentials found — manual config needed";
-      color = "#f59e0b";
-      icon = "ri-alert-line";
-    }
+  // ── Mobile menu ─────────────────────────────────────
+  if (menuBtn) menuBtn.addEventListener("click", () => sidebar?.classList.toggle("open"));
+
+  // ── Toggles ─────────────────────────────────────────
+  document.querySelectorAll(".toggle")?.forEach((toggle) => {
+    toggle.addEventListener("click", () => {
+      toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true"));
+    });
+  });
+
+  // ── Doc panel toggles ──────────────────────────────
+  document.querySelectorAll(".toggle-docs")?.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const target = document.getElementById(btn.dataset.target);
+      if (!target) return;
+      target.classList.toggle("collapsed");
+      target.classList.toggle("expanded");
+    });
+  });
+
+  // ── Scaffold (UI section) ───────────────────────────
+  document.querySelectorAll(".scaffold-card")?.forEach((card) => {
+    card.addEventListener("click", async () => {
+      const type = card.dataset.scaffold;
+      const preview = document.getElementById("scaffoldPreview");
+      const code = document.getElementById("scaffoldCode");
+      try {
+        const data = await api("/api/scaffold/preview", {
+          method: "POST",
+          body: JSON.stringify({ type }),
+        });
+        if (data.success && code && preview) {
+          code.textContent = data.code;
+          preview.classList.remove("hidden");
+        }
+      } catch (e) {
+        showToast(e.message, "error");
+      }
+    });
+  });
 
-    scanStatus.innerHTML = `<span style="color:${color}"><i class="${icon}"></i> ${msg}</span>`;
+  // ── Hash navigation ────────────────────────────────
+  const hash = location.hash.replace("#", "");
+  if (hash && document.getElementById(hash)) switchSection(hash);
+});
 
-    if (scanDetail) {
-      scanDetail.classList.remove("hidden");
-      const details = [];
-      if (scan.url) details.push(`<div>URL: <code style="color:#c9c">${maskKey(scan.url)}</code></div>`);
-      if (scan.anonKey) details.push(`<div>Anon key: <span style="color:#22c55e">found</span></div>`);
-      if (scan.serviceKey) details.push(`<div>Service key: <span style="color:#22c55e">found</span></div>`);
-      if (scan.projectRef) details.push(`<div>Ref: <code style="color:#c9c">${scan.projectRef}</code></div>`);
-      if (scan.sources.length) details.push(`<div>Sources: ${scan.sources.join(", ")}</div>`);
 
-      if (!details.length) details.push('<div style="color:#555">No env files contain Supabase credentials</div>');
+// ── dashboard/api.js ──
+/**
+ * Base API client — all dashboard HTTP calls go through this.
+ * Points to the hosted Railway instance.
+ * No direct fetch() allowed in other files.
+ */
+
+const BASE = "https://authly.rblez.com";
+
+/**
+ * @param {string} path - API path (e.g. '/api/users')
+ * @param {RequestInit} [options]
+ * @returns {Promise<any>}
+ */
+function api(path, options = {}) {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    ...options,
+  });
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
+
+// ── dashboard/state.js ──
+/**
+ * Global state for the dashboard.
+ * Shared across sections so they don't re-fetch unnecessarily.
+ */
+
+const state = {
+  supabase: {
+    connected: false,
+    project: null,
+    scannedFrom: null, // "env" | "oauth" | null
+  },
+  providers: [],
+  users: [],
+  roles: [],
+  migrations: [],
+  keys: [],
+  config: {},
+};
+
+/**
+ * Update a slice of state and optionally re-render.
+ */
+function setState(path, value) {
+  const parts = path.split(".");
+  let obj = state;
+  for (let i = 0; i < parts.length - 1; i++) {
+    obj = obj[parts[i]];
+  }
+  obj[parts[parts.length - 1]] = value;
+}
+
+
+// ── dashboard/components/toast.js ──
+/**
+ * Toast notification system.
+ */
+
+function showToast(message, type = "ok") {
+  const toast = document.getElementById("toast");
+  if (!toast) return;
+  toast.textContent = message;
+  toast.className = `toast toast--${type}`;
+  toast.classList.remove("hidden");
+  setTimeout(() => toast.classList.add("hidden"), 3500);
+}
+
+
+// ── dashboard/sections/supabase.js ──
+/**
+ * Supabase integration section.
+ * Handles auto-config via scan or OAuth flow.
+ */
+
+
+function loadSupabase(sectionContainer) {
+  renderLoading(sectionContainer, "Checking Supabase connection…");
+
+  try {
+    const status = await api("/api/supabase/status");
+
+    if (status.connected) {
+      setState("supabase.connected", true);
+      setState("supabase.project", status.project);
+      setState("supabase.scannedFrom", status.scannedFrom);
+
+      const content = `
+        <div class="supabase-connected">
+          <i class="ri-check-line" style="color:#22c55e;font-size:1.2rem"></i>
+          <h4>Connected to Supabase</h4>
+          <p class="text-muted">Project: <strong>${status.project || "—"}</strong></p>
+          <p class="text-muted">Source: ${status.scannedFrom || "environment"}</p>
+          <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+            <button id="disconnectBtn" class="btn btn--sm" style="background:#444;color:#fff">
+              <i class="ri-plug-line"></i> Disconnect
+            </button>
+          </div>
+        </div>
+      `;
+      renderSuccess(sectionContainer, content);
 
-      scanDetail.innerHTML = `<div style="color:#aaa;font-size:.78rem;line-height:1.7">${details.join("")}</div>`;
+      document.getElementById("disconnectBtn")?.addEventListener("click", () => {
+        showToast("Disconnect not yet implemented", "info");
+      });
+    } else {
+      setState("supabase.connected", false);
+      showConnectFlow(sectionContainer);
     }
-
-    if (scanAction) {
-      scanAction.classList.remove("hidden");
-      scanAction.innerHTML = `
-        <button class="btn btn--primary" id="connectBtn" style="font-size:.8rem;padding:8px 16px">
-          <i class="ri-plug-line"></i> Connect manually
+  } catch (e) {
+    renderError(sectionContainer, `Failed to check connection: ${e.message}`);
+  }
+}
+
+async function showConnectFlow(container) {
+  container.innerHTML = `
+    <div class="supabase-connect">
+      <h4>Connect to Supabase</h4>
+      <p class="text-muted">Authly can find your credentials automatically, or you can connect via OAuth.</p>
+      <div id="supabaseFlowAction" style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+        <button id="startScanBtn" class="btn btn--primary btn--sm">
+          <i class="ri-search-eye-line"></i> Scan project files
         </button>
+      </div>
+      <div id="supabaseFlowResult"></div>
+    </div>
+  `;
+
+  const scanBtn = document.getElementById("startScanBtn");
+  scanBtn?.addEventListener("click", startScan);
+}
+
+async function startScan() {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  const resultDiv = document.getElementById("supabaseFlowResult");
+
+  actionDiv.innerHTML = '<span class="text-muted"><i class="ri-loader-4-line spinner"></i> Scanning project files…</span>';
+  resultDiv.innerHTML = "";
+
+  try {
+    const scan = await api("/api/supabase/scan");
+
+    if (scan.found) {
+      // Found all credentials
+      const fields = scan.fields || [];
+      actionDiv.innerHTML = "";
+      resultDiv.innerHTML = `
+        <div class="state state--success">
+          <p>Found ${fields.length} credentials in your project files.</p>
+          <button id="useCredsBtn" class="btn btn--sm btn--primary" style="margin-top:8px">
+            <i class="ri-check-line"></i> Use these credentials
+          </button>
+        </div>
       `;
-      document.getElementById("connectBtn")?.addEventListener("click", () => {
-        document.querySelector('[data-section="init"]')?.click();
-        document.getElementById("initUrl")?.focus();
+      document.getElementById("useCredsBtn")?.addEventListener("click", () => {
+        applyScanResult(scan);
       });
+    } else {
+      // Nothing found → offer OAuth
+      const fields = scan.fields || [];
+      actionDiv.innerHTML = `
+        <button id="oauthBtn" class="btn btn--sm" style="background:#0d1b3e;border:1px solid #1d355e;color:#58a6ff">
+          <i class="ri-plug-line"></i> Connect with Supabase OAuth
+        </button>
+      `;
+      resultDiv.innerHTML = `
+        <div class="state state--error">
+          <p>Missing: <code>${fields.join(", ")}</code></p>
+          <p class="text-muted">Connect via Supabase Platform OAuth instead.</p>
+        </div>
+      `;
+      document.getElementById("oauthBtn")?.addEventListener("click", redirectToOAuth);
     }
-
-    if (intStatus) {
-      intStatus.innerHTML = `<span style="color:#888">Not connected — enter credentials in Init</span>`;
-    }
-    if (intDetail) {
-      intDetail.classList.add("hidden");
-    }
+  } catch (e) {
+    actionDiv.innerHTML = "";
+    resultDiv.innerHTML = `<div class="state state--error"><p>Scan failed: ${e.message}</p></div>`;
   }
-
-  // ── Connect (auto or manual) ──────────────────────
-  async function connectSupabase(body = {}) {
-    const data = await api("/init/connect", { method: "POST", body: JSON.stringify(body) });
-    return data;
+}
+
+async function applyScanResult(scan) {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  const resultDiv = document.getElementById("supabaseFlowResult");
+  actionDiv.innerHTML = '<span class="text-muted">Saving credentials…</span>';
+
+  try {
+    await api("/api/config", {
+      method: "POST",
+      body: JSON.stringify({
+        type: "supabase",
+        fields: scan.fields,
+      }),
+    });
+    resultDiv.innerHTML = `<div class="state state--success"><p><i class="ri-check-line"></i> Credentials applied. Reload section to verify.</p></div>`;
+    showToast("Supabase credentials saved", "ok");
+    setState("supabase.connected", true);
+  } catch (e) {
+    resultDiv.innerHTML = `<div class="state state--error"><p>Failed to save: ${e.message}</p></div>`;
   }
-
-  function maskKey(key) {
-    if (key.length < 30) return key;
-    return key.slice(0, 20) + "…" + key.slice(-8);
+}
+
+function redirectToOAuth() {
+  const actionDiv = document.getElementById("supabaseFlowAction");
+  actionDiv.innerHTML = '<span class="text-muted"><i class="ri-external-link-line"></i> Redirecting to Supabase…</span>';
+  // Redirect the entire browser to Supabase OAuth
+  window.location.href = `${window.location.origin}/api/auth/supabase/authorize`;
+}
+
+function checkSupabaseStatus() {
+  try {
+    const status = await api("/api/supabase/status");
+    setState("supabase.connected", !!status.connected);
+    setState("supabase.project", status.project || null);
+    setState("supabase.scannedFrom", status.scannedFrom || null);
+  } catch {
+    setState("supabase.connected", false);
   }
+}
+
+
+// ── dashboard/sections/providers.js ──
+/**
+ * Providers section — Google, GitHub, Discord.
+ * Shows provider status with Setup wizard.
+ */
+
+
+const PROVIDERS = ["google", "github", "discord"];
+
+const PROVIDER_LABELS = {
+  google: "Google",
+  github: "GitHub",
+  discord: "Discord",
+};
+
+const CALLBACK_URLS = {
+  google: "https://authly.rblez.com/api/auth/google/callback",
+  github: "https://authly.rblez.com/api/auth/github/callback",
+  discord: "https://authly.rblez.com/api/auth/discord/callback",
+};
+
+const DOCS_URLS = {
+  google: "https://console.cloud.google.com/apis/credentials",
+  github: "https://github.com/settings/applications/new",
+  discord: "https://discord.com/developers/applications",
+};
+
+const GUIDE_STEPS = {
+  google: [
+    "Go to Google Cloud Console → APIs & Services → Credentials",
+    "Create a project or select an existing one",
+    'Click "Create Credentials" → OAuth 2.0 Client ID',
+    "Application type: Web application",
+    "Add the callback URL below as an Authorized redirect URI",
+  ],
+  github: [
+    "Go to GitHub Settings → Developer settings → OAuth Apps",
+    'Click "New OAuth App"',
+    "Fill in Application name and Homepage URL",
+    "Add the callback URL below as Authorization callback URL",
+  ],
+  discord: [
+    "Go to Discord Developer Portal → Applications",
+    "Create a New Application",
+    "Go to OAuth2 → Redirects → Add Redirect",
+    "Add the callback URL below",
+  ],
+};
+
+function loadProviders(sectionContainer) {
+  renderLoading(sectionContainer, "Loading providers…");
+
+  try {
+    const data = await api("/api/providers");
+    const providers = data.providers || [];
+
+    const html = providers.map((p) => {
+      const label = PROVIDER_LABELS[p.name] || p.name;
+      const iconUrl = `https://cdn.simpleicons.org/${p.name}/fff`;
+      const iconClass = p.enabled ? "enabled" : "disabled";
+      return `<div class="provider-card">
+        <img src="${iconUrl}" width="20" height="20" alt="${label}" />
+        <div class="provider-info">
+          <div class="provider-name">${label}</div>
+          <div class="provider-scopes">${p.scopes || ""}</div>
+        </div>
+        <span class="provider-status ${iconClass}">${p.enabled ? "Enabled" : "Disabled"}</span>
+        ${p.enabled
+          ? `<button class="btn btn--sm edit-provider-btn" data-provider="${p.name}">Edit</button>`
+          : `<button class="btn btn--sm btn--primary setup-provider-btn" data-provider="${p.name}">Setup</button>`
+        }
+      </div>`;
+    }).join("");
 
-  // ── Navigation ──────────────────────────────────────
-  for (const item of navItems) {
-    item.addEventListener("click", (e) => {
-      e.preventDefault();
-      switchSection(item.dataset.section);
+    renderSuccess(sectionContainer, html);
+
+    // Bind buttons
+    sectionContainer.querySelectorAll(".setup-provider-btn").forEach((btn) => {
+      btn.addEventListener("click", () => openProviderWizard(btn.dataset.provider));
+    });
+    sectionContainer.querySelectorAll(".edit-provider-btn").forEach((btn) => {
+      btn.addEventListener("click", () => openProviderWizard(btn.dataset.provider, 1));
     });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load providers: ${e.message}`);
   }
+}
+
+function openProviderWizard(name, defaultTab = 0) {
+  const label = PROVIDER_LABELS[name];
+  const callbackUrl = CALLBACK_URLS[name];
+
+  const tabs = [
+    {
+      label: "Guide",
+      content: `
+        <h4>${label} Setup Guide</h4>
+        <ol style="color:#aaa;font-size:.85rem;line-height:2;padding-left:18px">
+          ${(GUIDE_STEPS[name] || []).map((s) => `<li>${s}</li>`).join("")}
+        </ol>
+        <div style="margin-top:12px;padding:8px 12px;background:#111;border-radius:6px">
+          <div style="font-size:.75rem;color:#555;margin-bottom:4px">Callback URL</div>
+          <div style="display:flex;gap:6px;align-items:center">
+            <code id="cbUrl" style="font-size:.8rem;color:#58a6ff;flex:1">${callbackUrl}</code>
+            <button class="btn btn--sm" id="copyCbUrl" title="Copy">Copy</button>
+          </div>
+        </div>
+        <div style="margin-top:8px">
+          <a href="${DOCS_URLS[name]}" target="_blank" rel="noopener" class="btn btn--sm" style="background:#222;color:#888;text-decoration:none">
+            Open ${label} Console <i class="ri-external-link-line" style="font-size:.7rem"></i>
+          </a>
+        </div>
+      `,
+      onShow: () => {
+        document.getElementById("copyCbUrl")?.addEventListener("click", () => {
+          navigator.clipboard.writeText(callbackUrl);
+          showToast("Callback URL copied", "ok");
+        });
+      },
+    },
+    {
+      label: "Enter Keys",
+      content: `
+        <h4>${label} OAuth Credentials</h4>
+        <div style="display:flex;flex-direction:column;gap:8px;margin-top:12px">
+          <input id="providerClientId" placeholder="Client ID" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+          <input id="providerClientSecret" type="password" placeholder="Client Secret" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+          <div id="providerKeyResult" class="result hidden"></div>
+          <button id="providerSaveKeys" class="btn btn--primary btn--sm">Validate &amp; Save</button>
+        </div>
+      `,
+      onShow: () => {
+        document.getElementById("providerSaveKeys")?.addEventListener("click", async () => {
+          const clientId = document.getElementById("providerClientId").value.trim();
+          const clientSecret = document.getElementById("providerClientSecret").value.trim();
+          if (!clientId || !clientSecret) return;
+
+          const resultDiv = document.getElementById("providerKeyResult");
+          resultDiv.classList.remove("hidden");
+          resultDiv.innerHTML = "Validating…";
+
+          try {
+            const res = await api(`/api/providers/${name}/keys`, {
+              method: "POST",
+              body: JSON.stringify({ clientId, clientSecret }),
+            });
+            if (res.valid) {
+              resultDiv.innerHTML = `<span style="color:#22c55e">Keys validated and saved</span>`;
+              showToast(`${label} provider configured`, "ok");
+            } else {
+              resultDiv.innerHTML = `<span style="color:#f87171">Validation failed: ${res.error || "invalid keys"}</span>`;
+            }
+          } catch (e) {
+            resultDiv.innerHTML = `<span style="color:#f87171">${e.message}</span>`;
+          }
+        });
+      },
+    },
+    {
+      label: "Test",
+      content: `
+        <h4>Test ${label} Connection</h4>
+        <p class="text-muted" style="font-size:.8rem;margin:8px 0">Make a test OAuth request to verify your configuration.</p>
+        <pre id="providerTestResult" class="code-block" style="white-space:pre-wrap;font-size:.75rem;color:#888"></pre>
+        <button id="providerTestBtn" class="btn btn--sm">Run Test</button>
+      `,
+      onShow: () => {
+        document.getElementById("providerTestBtn")?.addEventListener("click", async () => {
+          const output = document.getElementById("providerTestResult");
+          output.textContent = "Testing…";
+          try {
+            const data = await api(`/api/providers/${name}/test`);
+            output.textContent = JSON.stringify(data, null, 2);
+          } catch (e) {
+            output.textContent = e.message;
+          }
+        });
+      },
+    },
+  ];
 
-  function switchSection(id) {
-    for (const n of navItems) n.classList.remove("active");
-    document.querySelector(`[data-section="${id}"]`)?.classList.add("active");
-    for (const sec of sections) sec.classList.toggle("hidden", sec.id !== id);
-    headerTitle.textContent = document.querySelector(`[data-section="${id}"]`)?.textContent?.trim() ?? "";
-    sidebar.classList.remove("open");
-
-    // Lazy-load section data
-    if (id === "users") loadUsers();
-    if (id === "providers") loadProviders();
-    if (id === "roles") loadRoles();
-    if (id === "env") loadEnv();
-    if (id === "migrate") loadMigrations();
-    if (id === "integration") loadIntegration();
-  }
+  openWizard({ title: `${label} Setup`, tabs, defaultTab });
+}
 
-  async function loadIntegration() {
-    try {
-      const scan = await api("/init/scan");
-      const intStatus = document.getElementById("integrationStatus");
-      const intDetail = document.getElementById("integrationDetail");
-
-      if (scan.detected && scan.canConnect) {
-        intStatus.innerHTML = `<span style="color:#22c55e"><i class="ri-check-line"></i> Connected</span>`;
-        intDetail.classList.remove("hidden");
-        intDetail.innerHTML = `
-          <div style="color:#aaa;font-size:.78rem;line-height:1.7">
-            <div>URL: <code style="color:#c9c">${maskKey(scan.url || "")}</code></div>
-            <div>Project ref: <code style="color:#c9c">${scan.projectRef || "—"}</code></div>
-            <div>Sources: ${scan.sources.join(", ")}</div>
-          </div>
-        `;
-      } else {
-        intStatus.innerHTML = `<span style="color:#f87171"><i class="ri-close-line"></i> No connection</span>`;
-        intDetail.classList.remove("hidden");
-        intDetail.innerHTML = `<div style="color:#555">No Supabase credentials detected. Go to Init to configure.</div>`;
-      }
-    } catch {}
-  }
 
-  // ── Scan on load ──────────────────────────────────
-  autoDetectSupabase();
-
-  // Reconnect button
-  const reconnectBtn = document.getElementById("reconnectBtn");
-  if (reconnectBtn) {
-    reconnectBtn.addEventListener("click", async () => {
-      reconnectBtn.disabled = true;
-      reconnectBtn.textContent = "Scanning…";
-      await autoDetectSupabase();
-      reconnectBtn.disabled = false;
-      reconnectBtn.innerHTML = '<i class="ri-refresh-line"></i> Re-scan & reconnect';
-    });
-  }
+// ── dashboard/sections/migrations.js ──
+/**
+ * Migrations section — list and run SQL migrations.
+ */
 
-  // ── Manual connect form ──────────────────────────
-  const initForm = document.getElementById("initForm");
-  if (initForm) {
-    initForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const btn = document.getElementById("initBtn");
-      const result = document.getElementById("initResult");
-      btn.disabled = true;
-      btn.textContent = "Connecting…";
-      hideResult(result);
-
-      const data = await api("/init/connect", {
-        method: "POST",
-        body: JSON.stringify({
-          supabaseUrl: document.getElementById("initUrl").value.trim(),
-          supabaseAnonKey: document.getElementById("initAnon").value.trim(),
-          supabaseServiceKey: document.getElementById("initService").value.trim(),
-        }),
-      });
 
-      btn.disabled = false;
-      btn.innerHTML = '<i class="ri-plug-line"></i> Connect &amp; Configure';
+function loadMigrations(sectionContainer) {
+  renderLoading(sectionContainer, "Loading migrations…");
 
-      if (data.success) {
-        showResult(result, "Connected to Supabase. Framework: " + (data.framework || "unknown"), "ok");
-        showToast("Project connected successfully");
-        checkHealth();
-        autoDetectSupabase();
-      } else {
-        showResult(result, data.error, "error");
-      }
+  try {
+    const data = await api("/api/migrations");
+    const migrations = data.migrations || [];
+
+    const html = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <h3>Migrations</h3>
+        <button id="runAllPending" class="btn btn--primary btn--sm">
+          <i class="ri-play-line"></i> Run all pending
+        </button>
+      </div>
+      <div id="migrationList">
+        ${migrations.map((m) => `
+          <div class="migration-item">
+            <span class="badge badge--${m.status === 'applied' ? 'ok' : 'pending'}">${m.status}</span>
+            <code style="font-size:.8rem">${m.name}</code>
+            <span class="text-muted">${m.description || ""}</span>
+            ${m.status === 'pending'
+              ? `<button class="btn btn--sm run-migration" data-name="${m.name}">Run</button>`
+              : ""
+            }
+          </div>
+        `).join("")}
+      </div>
+      <pre id="migrationOutput" class="code-block hidden" style="white-space:pre-wrap;font-size:.75rem;color:#888"></pre>
+    `;
+
+    renderSuccess(sectionContainer, html);
+
+    // Bind run buttons
+    sectionContainer.querySelectorAll(".run-migration").forEach((btn) => {
+      btn.addEventListener("click", () => runMigration(btn.dataset.name));
     });
+
+    document.getElementById("runAllPending")?.addEventListener("click", runAllPending);
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load migrations: ${e.message}`);
   }
+}
 
-  // ── Users ───────────────────────────────────────────
-  window.loadUsers = async function() {
-    const body = document.getElementById("usersBody");
-    body.innerHTML = '<tr><td colspan="4" class="text-muted">Loading…</td></tr>';
-    try {
-      const data = await api("/users");
-      if (!data.success || !data.users?.length) {
-        body.innerHTML = '<tr><td colspan="4" class="text-muted">No users found. Connect Supabase first.</td></tr>';
-        return;
-      }
-      body.innerHTML = data.users.map(u =>
-        `<tr>
-          <td style="font-family:var(--mono);font-size:.8rem">${u.id.slice(0, 8)}…</td>
-          <td>${u.email ?? "—"}</td>
-          <td>${u.raw_user_meta_data?.role ?? "user"}</td>
-          <td class="text-muted">${new Date(u.created_at).toLocaleDateString()}</td>
-        </tr>`
-      ).join("");
-    } catch {
-      body.innerHTML = '<tr><td colspan="4" class="text-muted">Failed to load users</td></tr>';
+async function runMigration(name) {
+  if (!confirm(`Run migration '${name}'? This executes SQL directly.`)) return;
+
+  try {
+    const data = await api(`/api/migrations/${name}/run`, { method: "POST" });
+    const output = document.getElementById("migrationOutput");
+    if (output) {
+      output.classList.remove("hidden");
+      output.textContent = data.output || "Migration applied";
     }
-  };
+    if (data.ok) {
+      showToast(`Migration '${name}' applied`, "ok");
+    } else {
+      showToast(`Migration '${name}' failed: ${data.error}`, "error");
+    }
+  } catch (e) {
+    showToast(`Migration failed: ${e.message}`, "error");
+  }
+}
+
+async function runAllPending() {
+  try {
+    const data = await api("/api/migrations/pending/run", { method: "POST" });
+    const output = document.getElementById("migrationOutput");
+    if (output) {
+      output.classList.remove("hidden");
+      output.textContent = data.output || "All pending migrations applied";
+    }
+    showToast("All pending migrations applied", "ok");
+  } catch (e) {
+    showToast(`Failed: ${e.message}`, "error");
+  }
+}
 
-  const refreshBtn = document.getElementById("refreshUsers");
-  if (refreshBtn) refreshBtn.addEventListener("click", () => loadUsers());
 
-  // ── Providers ───────────────────────────────────────
-  window.loadProviders = async function() {
-    const container = document.getElementById("providerList");
-    const data = await api("/providers");
-    if (!data.providers) return;
+// ── dashboard/sections/users.js ──
+/**
+ * Users section — list users and manage roles.
+ */
 
-    container.innerHTML = data.providers.map(p => {
-      const name = p.name === "magiclink" ? "Magic Link" : p.name;
-      const iconUrl = `https://cdn.simpleicons.org/${p.name === "magiclink" ? "resend" : p.name}/fff`;
-      return `<div class="provider-card">
-        <img src="${iconUrl}" width="20" height="20" alt="${name}" class="provider-icon-img" />
-        <div class="provider-info">
-          <div class="provider-name">${name}</div>
-          <div class="provider-scopes">${p.scopes || ""}</div>
-        </div>
-        <span class="provider-status ${p.enabled ? "enabled" : "disabled"}">${p.enabled ? "Active" : "Off"}</span>
-      </div>`;
-    }).join("");
-  };
 
-  // ── Roles ───────────────────────────────────────────
-  window.loadRoles = async function() {
-    const container = document.getElementById("rolesList");
-    const data = await api("/roles");
-    if (!data.success || !data.roles?.length) {
-      container.innerHTML = '<span class="text-muted">No roles. Connect Supabase and run migration.</span>';
+function loadUsers(sectionContainer) {
+  renderLoading(sectionContainer, "Loading users…");
+
+  try {
+    const data = await api("/api/users");
+    const users = data.users || [];
+
+    if (!users.length) {
+      renderSuccess(sectionContainer, '<div class="text-muted">No users found.</div>');
       return;
     }
-    container.innerHTML = data.roles.map(r =>
-      `<span class="role-chip">${r.name}</span>`
-    ).join("");
-  };
 
-  const addRoleBtn = document.getElementById("addRoleBtn");
-  if (addRoleBtn) {
-    addRoleBtn.addEventListener("click", async () => {
-      const name = prompt("Role name (e.g. editor):");
-      if (!name) return;
-      const data = await api("/roles", {
-        method: "POST",
-        body: JSON.stringify({ name, description: "Custom role" }),
-      });
-      if (data.success) { showToast(`Role '${name}' created`); loadRoles(); }
-      else showToast(data.error || "Failed to create role", "error");
+    const html = `
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead><tr><th>ID</th><th>Email</th><th>Role</th><th>Created</th><th>Roles</th></tr></thead>
+          <tbody>
+            ${users.map((u) => `
+              <tr>
+                <td style="font-family:var(--mono);font-size:.8rem">${u.id?.slice?.(0, 8) || "—" }…</td>
+                <td>${u.email || "—"}</td>
+                <td>${u.role || "user"}</td>
+                <td class="text-muted">${u.created_at ? new Date(u.created_at).toLocaleDateString() : "—"}</td>
+                <td><button class="btn btn--sm manage-roles-btn" data-user-id="${u.id}" style="font-size:.7rem">Manage roles</button></td>
+              </tr>
+            `).join("")}
+          </tbody>
+        </table>
+      </div>
+      <div id="userRolePanel" class="hidden" style="margin-top:12px"></div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+
+    sectionContainer.querySelectorAll(".manage-roles-btn").forEach((btn) => {
+      btn.addEventListener("click", () => showRolePanel(btn.dataset.userId));
     });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load users: ${e.message}`);
   }
-
-  const assignForm = document.getElementById("roleAssignForm");
-  if (assignForm) {
-    assignForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const userId = document.getElementById("assignUserId").value.trim();
-      const roleName = document.getElementById("assignRoleName").value.trim();
-      if (!userId || !roleName) return;
-      const result = document.getElementById("roleAssignResult");
-      const data = await api(`/roles/${roleName}/users/${userId}/assign`, { method: "POST" });
-      if (data.success) { showResult(result, `Role '${roleName}' assigned to ${userId.slice(0,8)}…`, "ok"); }
-      else { showResult(result, data.error || "Failed", "error"); }
+}
+
+async function showRolePanel(userId) {
+  const panel = document.getElementById("userRolePanel");
+  panel.classList.remove("hidden");
+  panel.innerHTML = 'Loading…';
+
+  try {
+    const data = await api(`/api/users/${userId}/roles`);
+    const roles = data.roles || [];
+    const availableRoles = ["admin", "user", "guest"];
+
+    panel.innerHTML = `
+      <div style="padding:8px 12px;background:#111;border-radius:6px">
+        <div style="font-size:.8rem;color:#888;margin-bottom:8px">User: ${userId.slice(0, 8)}…</div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          ${availableRoles.map((r) => `
+            <button class="btn btn--sm ${roles.includes(r) ? "" : "btn--primary"} role-toggle-btn" data-role="${r}" data-user-id="${userId}" data-active="${roles.includes(r)}">
+              ${r} ${roles.includes(r) ? "✓" : ""}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `;
+
+    panel.querySelectorAll(".role-toggle-btn").forEach((btn) => {
+      btn.addEventListener("click", async () => {
+        const role = btn.dataset.role;
+        const uid = btn.dataset.userId;
+        const isActive = btn.dataset.active === "true";
+
+        try {
+          if (isActive) {
+            await api(`/api/users/${uid}/roles/${role}`, { method: "DELETE" });
+          } else {
+            await api(`/api/users/${uid}/roles`, { method: "POST", body: JSON.stringify({ role }) });
+          }
+          showToast(`Role '${role}' ${isActive ? "removed" : "assigned"}`, "ok");
+          showRolePanel(uid);
+        } catch (e) {
+          showToast(e.message, "error");
+        }
+      });
     });
+  } catch (e) {
+    panel.innerHTML = `<div class="text-muted">Failed to load roles: ${e.message}</div>`;
   }
+}
 
-  // ── API Keys ────────────────────────────────────────
-  const keyForm = document.getElementById("keyForm");
-  if (keyForm) {
-    keyForm.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      const name = document.getElementById("keyName").value.trim();
-      if (!name) return;
-      const result = document.getElementById("keyResult");
-      const data = await api("/keys", { method: "POST", body: JSON.stringify({ name }) });
-      if (data.success && data.key) {
-        showResult(result, `Key generated (shown once):\n${data.key}`, "ok");
-      } else {
-        showResult(result, data.error || "Failed to generate key", "error");
-      }
-    });
+
+// ── dashboard/sections/roles.js ──
+/**
+ * Roles section — list roles and role assignments.
+ */
+
+
+function loadRoles(sectionContainer) {
+  renderLoading(sectionContainer, "Loading roles…");
+
+  try {
+    const data = await api("/api/roles");
+    const roles = data.roles || [];
+
+    if (!roles.length) {
+      renderSuccess(sectionContainer, `
+        <div style="display:flex;justify-content:space-between;align-items:center">
+          <div class="text-muted">No roles defined.</div>
+          <button id="addRoleBtn" class="btn btn--primary btn--sm"><i class="ri-add-line"></i> Add role</button>
+        </div>
+      `);
+      document.getElementById("addRoleBtn")?.addEventListener("click", createRoleInline);
+      return;
+    }
+
+    const html = `
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          ${roles.map((r) => `<span class="role-chip">${r.name}</span>`).join("")}
+        </div>
+        <button id="addRoleBtn" class="btn btn--primary btn--sm"><i class="ri-add-line"></i> Add role</button>
+      </div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+    document.getElementById("addRoleBtn")?.addEventListener("click", createRoleInline);
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load roles: ${e.message}`);
   }
+}
 
-  // ── Env ─────────────────────────────────────────────
-  window.loadEnv = async function() {
-    const container = document.getElementById("envVars");
-    const vars = ["SUPABASE_URL", "SUPABASE_ANON_KEY", "SUPABASE_SERVICE_ROLE_KEY", "AUTHLY_SECRET", "GOOGLE_CLIENT_ID", "GITHUB_CLIENT_ID"];
-    const data = await api("/audit", { method: "POST" });
-    const checks = new Map();
-    if (data.issues) data.issues.forEach(i => checks.set(i.check, i.status));
-
-    container.innerHTML = vars.map(v => {
-      const status = checks.has(v) ? (checks.get(v) === "ok" ? "set" : "unset") : "unknown";
-      return `<div class="var-row">
-        <span class="var-name">${v}</span>
-        <span class="var-status ${status === "set" ? "var-status--set" : ""}">${status === "set" ? "● set" : status === "unknown" ? "— unknown" : "○ not set"}</span>
-      </div>`;
-    }).join("");
-  };
+async function createRoleInline() {
+  const name = prompt("Role name (e.g. editor):");
+  if (!name) return;
 
-  // ── Migrations ──────────────────────────────────────
-  window.loadMigrations = async function() {
-    const container = document.getElementById("migrationList");
-    const data = await api("/migrations");
-    if (!data.success) return;
-
-    container.innerHTML = data.migrations.map(m =>
-      `<div class="migration-item">
-        <i class="ri-file-code-line"></i>
-        <span>${m.name}</span>
-        <span class="text-muted" style="margin-left:4px">${m.description}</span>
-        <button class="btn btn--sm btn--primary" onclick="runMigration('${m.name}')">Run</button>
-      </div>`
-    ).join("");
-  };
+  try {
+    const data = await api("/api/roles", {
+      method: "POST",
+      body: JSON.stringify({ name, description: "Custom role" }),
+    });
+    if (data.success) {
+      showToast(`Role '${name}' created`, "ok");
+      loadRoles(document.querySelector('[data-section="roles"]') || document.getElementById("roles"));
+    } else {
+      showToast(data.error || "Failed", "error");
+    }
+  } catch (e) {
+    showToast(e.message, "error");
+  }
+}
+
+
+// ── dashboard/sections/apikeys.js ──
+/**
+ * API Keys section — generate and validate keys.
+ */
+
+
+function loadApiKeys(sectionContainer) {
+  renderLoading(sectionContainer, "Loading API keys…");
+
+  try {
+    const data = await api("/api/keys");
+    const keys = data.keys || [];
+
+    const html = `
+      <h3>Generate API Key</h3>
+      <p class="text-muted" style="margin-bottom:12px">Create a key for programmatic access. The raw key is shown <strong>only once</strong>.</p>
+      <div style="display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:16px">
+        <input id="keyName" placeholder="Key name" style="background:#000;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:4px;font-size:.85rem" />
+        <button id="generateKeyBtn" class="btn btn--primary btn--sm">Generate</button>
+      </div>
+      <pre id="keyResult" class="code-block hidden" style="white-space:pre-wrap;font-size:.8rem;color:#22c55e"></pre>
+      <h3 style="margin-top:16px">Existing Keys</h3>
+      ${keys.length
+        ? `<div style="display:flex;flex-direction:column;gap:6px">
+            ${keys.map((k) => `
+              <div style="display:flex;gap:8px;align-items:center;padding:8px 12px;background:#111;border-radius:6px">
+                <code style="flex:1;font-size:.8rem">authly_...${k.key_hash?.slice?.(-6) || "—"}</code>
+                <span class="text-muted" style="font-size:.75rem">${k.name || ""}</span>
+                <span class="text-muted" style="font-size:.75rem">${k.scopes?.join?.(", ") || ""}</span>
+                <button class="btn btn--sm delete-key-btn" data-key-id="${k.id}">Delete</button>
+              </div>
+            `).join("")}
+          </div>`
+        : '<div class="text-muted">No API keys yet.</div>'
+      }
+    `;
 
-  window.runMigration = async function(name) {
-    const result = confirm(`Run migration '${name}'? This executes SQL directly.`);
-    if (!result) return;
-    const data = await api(`/migrations/${name}/run`, { method: "POST" });
-    if (data.success) showToast(`Migration '${name}' applied`);
-    else showToast(data.error || "Migration failed", "error");
-  };
+    renderSuccess(sectionContainer, html);
 
-  // ── Audit ───────────────────────────────────────────
-  const auditBtn = document.getElementById("runAudit");
-  if (auditBtn) {
-    auditBtn.addEventListener("click", async () => {
-      const resultDiv = document.getElementById("auditResult");
-      resultDiv.classList.remove("hidden");
-      resultDiv.textContent = "Running…";
-
-      const data = await api("/audit", { method: "POST" });
-      let html = `<p style="margin-bottom:8px">${data.success ? "✔ All checks passed" : `✘ ${data.issues.length} issue(s)`}</p>`;
-      html += data.issues.map(i =>
-        `<div style="font-size:.8rem;padding:4px 0;display:flex;gap:6px">
-          <span>${i.status === "ok" ? "<span style='color:#22c55e'>✔</span>" : "<span style='color:#f87171'>✘</span>"}</span>
-          <span>${i.check}${i.detail ? `: ${i.detail}` : ""}</span>
-        </div>`
-      ).join("");
-      resultDiv.innerHTML = html;
+    document.getElementById("generateKeyBtn")?.addEventListener("click", generateKey);
+    sectionContainer.querySelectorAll(".delete-key-btn").forEach((btn) => {
+      btn.addEventListener("click", () => deleteKey(btn.dataset.keyId));
     });
+  } catch (e) {
+    renderError(sectionContainer, `Failed to load API keys: ${e.message}`);
   }
+}
 
-  // ── Scaffold ────────────────────────────────────────
-  for (const card of document.querySelectorAll(".scaffold-card")) {
-    card.addEventListener("click", async () => {
-      const type = card.dataset.scaffold;
-      const preview = document.getElementById("scaffoldPreview");
-      const code = document.getElementById("scaffoldCode");
+async function generateKey() {
+  const name = document.getElementById("keyName").value.trim();
+  if (!name) return;
 
-      const data = await api("/scaffold/preview", {
-        method: "POST",
-        body: JSON.stringify({ type }),
-      });
+  const result = document.getElementById("keyResult");
+  result.classList.remove("hidden");
+  result.textContent = "Generating…";
 
-      if (data.success) {
-        code.textContent = data.code;
-        preview.classList.remove("hidden");
-      }
+  try {
+    const data = await api("/api/keys", {
+      method: "POST",
+      body: JSON.stringify({ name }),
     });
+    if (data.success && data.key) {
+      result.textContent = `Key (copy now):\n${data.key}`;
+      showToast("API key generated — copy it now!", "ok");
+    } else {
+      result.textContent = `Error: ${data.error || "Unknown error"}`;
+    }
+  } catch (e) {
+    result.textContent = e.message;
   }
+}
 
-  // ── Mobile menu ─────────────────────────────────────
-  if (menuBtn) menuBtn.addEventListener("click", () => sidebar.classList.toggle("open"));
+async function deleteKey(id) {
+  if (!confirm("Delete this API key?")) return;
 
-  // ── Toggles ─────────────────────────────────────────
-  for (const toggle of document.querySelectorAll(".toggle")) {
-    toggle.addEventListener("click", () => {
-      toggle.setAttribute("aria-checked", String(toggle.getAttribute("aria-checked") !== "true"));
-    });
+  try {
+    await api(`/api/keys/${id}`, { method: "DELETE" });
+    showToast("API key deleted", "ok");
+    loadApiKeys(document.querySelector('[data-section="api-keys"]') || document.getElementById("api-keys"));
+  } catch (e) {
+    showToast(e.message, "error");
   }
+}
+
+
+// ── dashboard/sections/audit.js ──
+/**
+ * Audit section — run configuration health checks.
+ */
+
+
+function loadAudit(sectionContainer) {
+  renderLoading(sectionContainer, "Running audit…");
+
+  try {
+    const data = await api("/api/audit");
+    const issues = data.issues || [];
+
+    const html = `
+      <div style="margin-bottom:12px">
+        <strong style="font-size:.9rem">${issues.every(i => i.level !== "error") ? "✔ Audit passed" : `✘ ${issues.filter(i => i.level === "error").length} issue(s)`}</strong>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:6px">
+        ${issues.map(i => `
+          <div style="display:flex;gap:8px;align-items:center;padding:8px 12px;background:#111;border-radius:6px">
+            <span>${i.level === "error"
+              ? '<i class="ri-error-warning-line" style="color:#f87171"></i>'
+              : i.level === "warn"
+              ? '<i class="ri-alert-line" style="color:#f59e0b"></i>'
+              : '<i class="ri-check-line" style="color:#22c55e"></i>'
+            }</span>
+            <span style="font-size:.85rem">${i.message || i.check || ""}</span>
+          </div>
+        `).join("")}
+      </div>
+    `;
+
+    renderSuccess(sectionContainer, html);
+  } catch (e) {
+    renderError(sectionContainer, `Audit failed: ${e.message}`);
+  }
+}
+
+
+// ── dashboard/sections/mcp.js ──
+/**
+ * MCP section — info and connection instructions.
+ */
+
+
+function loadMCP(sectionContainer) {
+  renderSuccess(sectionContainer, `
+    <div>
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
+        <i class="ri-robot-line" style="font-size:1.2rem;color:#fff"></i>
+        <h3 style="margin:0">MCP Server</h3>
+        <span class="badge">BETA</span>
+      </div>
+      <p class="text-muted" style="margin-bottom:12px">Connect an MCP client (Claude Desktop, Cursor) to manage Supabase through tools.</p>
+      <pre class="code-block"><code>Connect to:
+  http://localhost:${location.port || 1284}/mcp
+
+Tools available:
+  execute_sql, list_tables, describe_table
+  list_auth_users, list_roles, assign_role_to_user
+  revoke_role_from_user, get_user_roles
+  list_migrations, get_migration_sql, run_migration
+  connection_info</code></pre>
+      <p style="font-size:.8rem;color:#666;margin-top:12px">
+        <i class="ri-error-warning-line"></i> MCP tools are experimental.
+      </p>
+    </div>
+  `);
+}
+
+
+// ── dashboard/components/states.js ──
+/**
+ * Shared state renderers for all sections.
+ * Every section uses exactly these 3 states.
+ */
+
+function renderLoading(container, message = "Loading...") {
+  container.innerHTML = `<div class="state state--loading"><i class="ri-loader-4-line spinner"></i><span>${message}</span></div>`;
+}
+
+function renderError(container, message) {
+  container.innerHTML = `<div class="state state--error"><i class="ri-error-warning-line"></i><span>${message}</span></div>`;
+}
+
+function renderSuccess(container, content) {
+  container.innerHTML = `<div class="state state--success">${content}</div>`;
+}
+
+
+// ── dashboard/components/wizard.js ──
+/**
+ * Reusable wizard/sidebar component.
+ * Opens a panel with tabbed content for provider setup, etc.
+ */
+
+function openWizard(options = {}) {
+  const { title = "Setup", tabs = [], onClose } = options;
+  const existing = document.getElementById("wizard");
+  if (existing) existing.remove();
+
+  const wizard = document.createElement("aside");
+  wizard.id = "wizard";
+  wizard.className = "wizard";
+  wizard.innerHTML = `
+    <div class="wizard__header">
+      <h3>${title}</h3>
+      <button id="wizardClose" aria-label="Close"><i class="ri-close-line"></i></button>
+    </div>
+    <nav class="wizard__tabs" id="wizardTabs">
+      ${tabs.map((t, i) => `<button class="wizard__tab${i === 0 ? " active" : ""}" data-tab="${i}">${t.label}</button>`).join("")}
+    </nav>
+    <div class="wizard__body" id="wizardBody">
+      ${tabs[0]?.content ?? ""}
+    </div>
+  `;
+
+  document.querySelector(".main")?.appendChild(wizard);
+
+  // Tab switching
+  wizard.querySelectorAll(".wizard__tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      wizard.querySelectorAll(".wizard__tab").forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      const idx = tab.dataset.tab;
+      // Replace body content with the tab's content
+      const content = tabs[parseInt(idx)]?.content ?? "";
+      document.getElementById("wizardBody").innerHTML = content;
+      // Call any attached handlers
+      if (tabs[parseInt(idx)]?.onShow) tabs[parseInt(idx)].onShow();
+    });
+  });
+
+  // Close handler
+  document.getElementById("wizardClose")?.addEventListener("click", () => {
+    wizard.remove();
+    onClose?.();
+  });
+}
+
+function closeWizard() {
+  document.getElementById("wizard")?.remove();
+}
 
-  // ── Hash navigation ────────────────────────────────
-  const hash = location.hash.replace("#", "");
-  if (hash && document.getElementById(hash)) switchSection(hash);
-});