komplian 0.7.3 → 0.7.4

package/komplian-onboard.mjs

@@ -460,16 +460,143 @@ function npmInstallOneRepo(dir, name, opts = {}) {
   return { ok: r.status === 0, skipped: false };
 }
 
-/** Silent installs for batch UX (single spinner + one summary line). */
-function npmInstallBatch(workspace) {
-  const results = [];
+function npmInstallSpawnAsync(cmd, args, cwd, stdio) {
+  return new Promise((resolve) => {
+    const child = spawn(cmd, args, spawnWin({ cwd, stdio }));
+    child.on("close", (code) => resolve(code === 0));
+    child.on("error", () => resolve(false));
+  });
+}
+
+/** Same behavior as npmInstallOneRepo, non-blocking (parallel batch). */
+async function npmInstallOneRepoAsync(dir, name, opts = {}) {
+  const silent = opts.silent === true;
+  const pkg = join(dir, "package.json");
+  if (!existsSync(pkg)) return { ok: true, skipped: true };
+
+  const q = process.env.KOMPLIAN_CLI_QUIET === "1";
+  const stdio = silent || q ? "ignore" : "inherit";
+
+  const yarnLock = join(dir, "yarn.lock");
+  const pnpmLock = join(dir, "pnpm-lock.yaml");
+  const npmLock = join(dir, "package-lock.json");
+
+  if (existsSync(yarnLock)) {
+    if (!canRun("yarn", ["--version"])) {
+      if (!silent) {
+        log(
+          `${c.yellow}○${c.reset} ${name} ${c.dim}(yarn.lock; install yarn or run yarn install manually)${c.reset}`
+        );
+      }
+      return { ok: true, skipped: true };
+    }
+    if (!silent) {
+      if (q) {
+        ux(
+          `  ${c.blue}☁${c.reset}  ${c.cyan}…${c.reset} ${c.bold}${name}${c.reset} ${c.dim}yarn…${c.reset}`
+        );
+      } else {
+        log(`${c.dim}→${c.reset} ${name} ${c.dim}(yarn)${c.reset}`);
+      }
+    }
+    const ok = await npmInstallSpawnAsync(
+      "yarn",
+      ["install", "--frozen-lockfile"],
+      dir,
+      stdio
+    );
+    return { ok, skipped: false };
+  }
+
+  if (existsSync(pnpmLock)) {
+    if (!canRun("pnpm", ["--version"])) {
+      if (!silent) {
+        log(
+          `${c.yellow}○${c.reset} ${name} ${c.dim}(pnpm-lock; install pnpm or run pnpm install manually)${c.reset}`
+        );
+      }
+      return { ok: true, skipped: true };
+    }
+    if (!silent) {
+      if (q) {
+        ux(
+          `  ${c.blue}☁${c.reset}  ${c.cyan}…${c.reset} ${c.bold}${name}${c.reset} ${c.dim}pnpm…${c.reset}`
+        );
+      } else {
+        log(`${c.dim}→${c.reset} ${name} ${c.dim}(pnpm)${c.reset}`);
+      }
+    }
+    const ok = await npmInstallSpawnAsync(
+      "pnpm",
+      ["install", "--frozen-lockfile"],
+      dir,
+      stdio
+    );
+    return { ok, skipped: false };
+  }
+
+  if (!canRun("npm", ["--version"])) {
+    if (!silent) {
+      log(`${c.yellow}○${c.reset} npm not in PATH — skipping ${name}`);
+    }
+    return { ok: true, skipped: true };
+  }
+
+  const quiet = npmQuietFlags();
+
+  if (existsSync(npmLock)) {
+    if (!silent) {
+      if (q) {
+        ux(
+          `  ${c.blue}☁${c.reset}  ${c.cyan}…${c.reset} ${c.bold}${name}${c.reset} ${c.dim}npm ci…${c.reset}`
+        );
+      } else {
+        log(`${c.dim}→${c.reset} ${name} ${c.dim}(npm ci)${c.reset}`);
+      }
+    }
+    const ok = await npmInstallSpawnAsync("npm", ["ci", ...quiet], dir, stdio);
+    if (ok) return { ok: true, skipped: false };
+    if (!silent) {
+      log(
+        `${c.yellow}○${c.reset} ${name}: npm ci failed (lock out of sync?). ${c.dim}Try npm install in that repo.${c.reset}`
+      );
+    }
+    return { ok: false, skipped: false };
+  }
+
+  if (!silent) {
+    if (q) {
+      ux(
+        `  ${c.blue}☁${c.reset}  ${c.cyan}…${c.reset} ${c.bold}${name}${c.reset} ${c.dim}npm install…${c.reset}`
+      );
+    } else {
+      log(`${c.dim}→${c.reset} ${name} ${c.dim}(npm install — no new lockfile)${c.reset}`);
+    }
+  }
+  const ok = await npmInstallSpawnAsync(
+    "npm",
+    ["install", ...quiet, "--no-package-lock"],
+    dir,
+    stdio
+  );
+  return { ok, skipped: false };
+}
+
+/** Silent installs in parallel (faster than sequential). */
+async function npmInstallBatchAsync(workspace) {
+  const jobs = [];
   for (const ent of readdirSync(workspace)) {
     const d = join(workspace, ent);
     if (!statSync(d).isDirectory()) continue;
-    const { ok, skipped } = npmInstallOneRepo(d, ent, { silent: true });
-    results.push({ name: ent, ok, skipped });
+    jobs.push(
+      npmInstallOneRepoAsync(d, ent, { silent: true }).then(({ ok, skipped }) => ({
+        name: ent,
+        ok,
+        skipped,
+      }))
+    );
   }
-  return results;
+  return Promise.all(jobs);
 }
 
 function usage() {
@@ -748,7 +875,7 @@ async function main() {
     }
     let depResults = [];
     try {
-      depResults = npmInstallBatch(abs);
+      depResults = await npmInstallBatchAsync(abs);
     } finally {
       if (spin) spin.stop();
     }

package/komplian-setup.mjs

@@ -8,7 +8,7 @@
 import { spawnSync } from "node:child_process";
 import { createServer } from "node:http";
 import { createHash, randomBytes } from "node:crypto";
-import { existsSync, mkdirSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { homedir } from "node:os";
@@ -75,6 +75,41 @@ function neonOAuthEnvReady() {
   return !!(id && sec && redir && a && b && w);
 }
 
+/** Project IDs for Neon Management API (API key or OAuth token). */
+function neonProjectIdsTriplet() {
+  const app =
+    process.env.KOMPLIAN_NEON_PROJECT_ID_APP?.trim() ||
+    process.env.KOMPLIAN_NEON_OAUTH_PROJECT_ID_APP?.trim();
+  const admin =
+    process.env.KOMPLIAN_NEON_PROJECT_ID_ADMIN?.trim() ||
+    process.env.KOMPLIAN_NEON_OAUTH_PROJECT_ID_ADMIN?.trim();
+  const web =
+    process.env.KOMPLIAN_NEON_PROJECT_ID_WEB?.trim() ||
+    process.env.KOMPLIAN_NEON_OAUTH_PROJECT_ID_WEB?.trim();
+  return { app, admin, web };
+}
+
+function neonApiKeyResolveReady() {
+  const { app, admin, web } = neonProjectIdsTriplet();
+  return !!(app && admin && web);
+}
+
+async function neonBuildTripletFromApiKey(apiKey) {
+  const { app, admin, web } = neonProjectIdsTriplet();
+  if (!app || !admin || !web) {
+    return { ok: false, error: "Neon project IDs are not configured in the environment." };
+  }
+  const [ra, rb, rw] = await Promise.all([
+    neonFetchConnectionUri(apiKey, app),
+    neonFetchConnectionUri(apiKey, admin),
+    neonFetchConnectionUri(apiKey, web),
+  ]);
+  if (!ra.ok) return { ok: false, error: ra.error };
+  if (!rb.ok) return { ok: false, error: rb.error };
+  if (!rw.ok) return { ok: false, error: rw.error };
+  return { ok: true, db: { app: ra.uri, admin: rb.uri, web: rw.uri } };
+}
+
 function parseListenFromRedirectUri() {
   const u = process.env.KOMPLIAN_NEON_OAUTH_REDIRECT_URI?.trim();
   if (!u) return null;
@@ -200,74 +235,225 @@ function openBrowserSync(url) {
   }
 }
 
-const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="132" height="28" viewBox="0 0 132 28" fill="none" aria-hidden="true"><text x="0" y="20" fill="#fafafa" font-family="system-ui,-apple-system,sans-serif" font-size="18" font-weight="600">Komplian</text><circle cx="124" cy="14" r="4" fill="#22c55e"/></svg>`;
-
 function buildSetupPageHtml(token, opts) {
-  const { needsPostmanKey, needsDbUrls, emailDomain, neonOAuth } = opts;
-  const postmanSection = needsPostmanKey
+  const {
+    needsPostmanKey,
+    needsDbUrls,
+    emailDomain,
+    neonOAuth,
+    neonApiResolve,
+    showPostman,
+    logoHtml = "",
+  } = opts;
+  const safeDomain = String(emailDomain || "komplian.com").replace(/[<>&"]/g, "");
+
+  const postmanSection = showPostman
     ? `<section class="card">
-      <p class="fine">Postman does not provide OAuth for API keys. Open your account, create a key, paste it once.</p>
-      <a class="btn secondary" href="https://go.postman.co/settings/me/api-keys" target="_blank" rel="noopener">Open Postman</a>
-      <label>API key · @${emailDomain.replace(/"/g, "")}</label>
-      <input type="password" id="postman_api_key" autocomplete="off" placeholder="••••••••" />
+      <h2 class="card-title">Postman</h2>
+      <p class="fine">${needsPostmanKey ? `Add your API key once (account must match <strong>@${safeDomain}</strong>). Postman has no OAuth for the API — open their site and paste the key.` : `A key is already saved on this machine. Paste below only if you want to replace it.`}</p>
+      <a class="btn secondary" href="https://go.postman.co/settings/me/api-keys" target="_blank" rel="noopener">Open Postman · API keys</a>
+      <label for="postman_api_key">API key${needsPostmanKey ? " · required" : " · optional"}</label>
+      <input type="password" id="postman_api_key" autocomplete="off" placeholder="PMAK-…" ${needsPostmanKey ? "required" : ""} />
     </section>`
     : "";
 
-  const neonBtn = neonOAuth && needsDbUrls
-    ? `<button type="button" class="btn secondary" id="neon_oauth">Connect Neon</button>
-       <p id="neon_status" class="fine hidden">Linked.</p>`
-    : "";
-
-  const dbFields = `<label>APP + API</label><textarea id="db_app" rows="2" autocomplete="off"></textarea>
-      <label>ADMIN</label><textarea id="db_admin" rows="2" autocomplete="off"></textarea>
-      <label>WEB</label><textarea id="db_web" rows="2" autocomplete="off"></textarea>`;
-
-  const dbManual =
-    needsDbUrls && !neonOAuth
-      ? `<section class="card">${dbFields}</section>`
-      : needsDbUrls && neonOAuth
-        ? `<section class="card"><details class="fine" style="margin:0"><summary style="cursor:pointer;outline:none">Paste URLs</summary>${dbFields}</details></section>`
-        : "";
+  let neonSection = "";
+  if (needsDbUrls) {
+    const oauthBlock =
+      neonOAuth &&
+      `<div class="stack">
+        <p class="fine">Sign in with Neon (OAuth). A browser tab will open; return here when it says linked.</p>
+        <button type="button" class="btn secondary" id="neon_oauth">Connect Neon</button>
+        <p id="neon_status" class="ok hidden">Neon linked — URLs loaded.</p>
+      </div>`;
+    const apiKeyBlock =
+      !neonOAuth &&
+      neonApiResolve &&
+      `<div class="stack">
+        <p class="fine">Paste your <a href="https://console.neon.tech/app/settings/api-keys" target="_blank" rel="noopener">Neon API key</a>. Project IDs are read from the CLI environment (KOMPLIAN_NEON_PROJECT_ID_* or OAUTH_* IDs).</p>
+        <label for="neon_api_key">Neon API key</label>
+        <input type="password" id="neon_api_key" autocomplete="off" placeholder="napi_…" />
+        <button type="button" class="btn secondary" id="neon_load">Load connection strings</button>
+        <p id="neon_key_status" class="ok hidden">URLs loaded from Neon.</p>
+      </div>`;
+    const fallbackBlock =
+      !neonOAuth &&
+      !neonApiResolve &&
+      `<p class="fine">Set <code>KOMPLIAN_NEON_PROJECT_ID_APP</code> (and ADMIN, WEB) in the environment to enable one-click fetch, or paste Postgres URLs below. <a href="https://console.neon.tech" target="_blank" rel="noopener">Neon Console</a></p>`;
+
+    const dbFields = `<label for="db_app">APP + API</label><textarea id="db_app" rows="2" spellcheck="false" autocomplete="off" placeholder="postgresql://…"></textarea>
+      <label for="db_admin">ADMIN</label><textarea id="db_admin" rows="2" spellcheck="false" autocomplete="off" placeholder="postgresql://…"></textarea>
+      <label for="db_web">WEB</label><textarea id="db_web" rows="2" spellcheck="false" autocomplete="off" placeholder="postgresql://…"></textarea>`;
+
+    neonSection = `<section class="card">
+      <h2 class="card-title">Neon · databases</h2>
+      ${oauthBlock || ""}
+      ${apiKeyBlock || ""}
+      ${fallbackBlock || ""}
+      <details class="manual" open>
+        <summary>Or paste connection strings</summary>
+        <div class="details-body">${dbFields}</div>
+      </details>
+    </section>`;
+  }
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Komplian</title>
+  <title>Komplian — local setup</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <style>
-    :root { --bg:#0a0a0a; --fg:#fafafa; --muted:#737373; --line:#262626; --card:#111; --accent:#22c55e; }
+    :root {
+      --bg: #0a0a0a;
+      --fg: #fafafa;
+      --muted: #a3a3a3;
+      --line: #262626;
+      --card: #111111;
+      --accent: #22c55e;
+      --accent-dim: rgba(34, 197, 94, 0.15);
+    }
     * { box-sizing: border-box; }
-    body { margin:0; min-height:100vh; font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--fg);
-      display:flex; align-items:center; justify-content:center; padding:1.5rem; }
-    .wrap { width:100%; max-width:380px; }
-    .logo { margin-bottom:1.75rem; }
-    .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin-bottom:1rem; }
-    label { display:block; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:1rem 0 0.4rem; }
-    input, textarea { width:100%; padding:0.65rem 0.75rem; border-radius:8px; border:1px solid var(--line); background:#0a0a0a; color:var(--fg); font-family:ui-monospace,monospace; font-size:0.8rem; }
-    .btn { display:block; width:100%; margin-top:0.75rem; padding:0.75rem; border:none; border-radius:8px; font-weight:600; font-size:0.9rem; cursor:pointer; text-align:center; text-decoration:none; }
-    .btn.primary { background:var(--fg); color:var(--bg); }
-    .btn.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
-    .btn:disabled { opacity:0.45; cursor:not-allowed; }
-    .fine { font-size:0.75rem; color:var(--muted); line-height:1.45; margin:0 0 0.75rem; }
-    .err { color:#f87171; font-size:0.8rem; margin-top:0.75rem; display:none; }
-    .hidden { display:none !important; }
+    body {
+      margin: 0; min-height: 100vh;
+      font-family: Inter, system-ui, -apple-system, sans-serif;
+      background: var(--bg); color: var(--fg);
+      display: flex; align-items: center; justify-content: center;
+      padding: 1.5rem;
+      -webkit-font-smoothing: antialiased;
+    }
+    .wrap { width: 100%; max-width: 420px; position: relative; }
+    .brand {
+      display: flex; align-items: center; gap: 10px;
+      margin-bottom: 1.75rem; min-height: 32px;
+    }
+    .brand-logo { display: flex; align-items: center; max-width: 152px; }
+    .brand-logo :is(svg) { width: 100%; height: auto; display: block; }
+    .brand-word {
+      font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; color: var(--fg);
+    }
+    .brand-dot {
+      width: 9px; height: 9px; border-radius: 50%;
+      background: var(--accent);
+      box-shadow: 0 0 14px rgba(34, 197, 94, 0.5);
+    }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      padding: 1.25rem 1.35rem;
+      margin-bottom: 1rem;
+    }
+    .card-title {
+      margin: 0 0 0.75rem;
+      font-size: 0.8rem; font-weight: 600;
+      letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
+    }
+    .stack { margin-bottom: 1rem; }
+    .stack:last-child { margin-bottom: 0; }
+    label {
+      display: block;
+      font-size: 0.7rem; font-weight: 500;
+      letter-spacing: 0.06em; text-transform: uppercase;
+      color: var(--muted); margin: 1rem 0 0.45rem;
+    }
+    input, textarea {
+      width: 100%;
+      padding: 0.65rem 0.8rem;
+      border-radius: 8px;
+      border: 1px solid var(--line);
+      background: var(--bg);
+      color: var(--fg);
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.8125rem;
+    }
+    input:focus, textarea:focus {
+      outline: none;
+      border-color: #404040;
+      box-shadow: 0 0 0 3px var(--accent-dim);
+    }
+    .btn {
+      display: block; width: 100%;
+      margin-top: 0.65rem;
+      padding: 0.78rem 1rem;
+      border: none; border-radius: 8px;
+      font-family: inherit; font-weight: 600; font-size: 0.9rem;
+      cursor: pointer; text-align: center; text-decoration: none;
+      transition: opacity 0.15s, transform 0.1s;
+    }
+    .btn:active { transform: scale(0.99); }
+    .btn.primary { background: var(--fg); color: var(--bg); }
+    .btn.primary:hover { opacity: 0.92; }
+    .btn.secondary {
+      background: transparent; color: var(--fg);
+      border: 1px solid var(--line);
+    }
+    .btn.secondary:hover { border-color: #404040; background: rgba(255,255,255,0.03); }
+    .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+    .fine { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin: 0 0 0.75rem; }
+    .fine a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
+    .fine code { font-size: 0.75rem; background: var(--bg); padding: 0.1rem 0.35rem; border-radius: 4px; }
+    .ok { color: var(--accent); font-size: 0.8125rem; margin: 0.5rem 0 0; font-weight: 500; }
+    .manual { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
+    .manual summary {
+      cursor: pointer; font-size: 0.8rem; font-weight: 500; color: var(--muted);
+      list-style: none;
+    }
+    .manual summary::-webkit-details-marker { display: none; }
+    .details-body { margin-top: 0.75rem; }
+    .err { color: #f87171; font-size: 0.8125rem; margin: 0.75rem 0 0; display: none; line-height: 1.4; }
+    .hidden { display: none !important; }
+    #overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,0.65);
+      display: none; align-items: center; justify-content: center;
+      z-index: 50; backdrop-filter: blur(4px);
+    }
+    #overlay.show { display: flex; }
+    .loader {
+      display: flex; flex-direction: column; align-items: center; gap: 1rem;
+      padding: 2rem; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
+    }
+    .spinner {
+      width: 36px; height: 36px;
+      border: 3px solid var(--line);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .loader p { margin: 0; font-size: 0.875rem; color: var(--muted); }
   </style>
 </head>
 <body>
+  <div id="overlay" aria-live="polite"><div class="loader"><div class="spinner"></div><p>Securing your session…</p></div></div>
   <div class="wrap">
-    <div class="logo">${LOGO_SVG}</div>
+    <header class="brand" aria-label="Komplian">
+      ${
+        logoHtml
+          ? `<div class="brand-logo">${logoHtml}</div>`
+          : `<span class="brand-word">Komplian</span><span class="brand-dot" aria-hidden="true"></span>`
+      }
+    </header>
     ${postmanSection}
-    ${needsDbUrls ? `<section class="card">${neonBtn}</section>` : ""}
-    ${dbManual}
-    <div id="err" class="err"></div>
+    ${neonSection}
+    <div id="err" class="err" role="alert"></div>
     <button type="button" class="btn primary" id="go">Continue</button>
   </div>
   <script>
     const TOKEN = ${JSON.stringify(token)};
     const needsPostman = ${JSON.stringify(needsPostmanKey)};
+    const showPostman = ${JSON.stringify(!!showPostman)};
     const needsDb = ${JSON.stringify(needsDbUrls)};
     const neonOAuth = ${JSON.stringify(!!neonOAuth)};
+    function setLoading(on, msg) {
+      const o = document.getElementById("overlay");
+      o.classList.toggle("show", on);
+      const p = o.querySelector(".loader p");
+      if (p && msg) p.textContent = msg;
+    }
     function showErr(t) {
       const e = document.getElementById("err");
       e.textContent = t;
@@ -293,20 +479,57 @@ function buildSetupPageHtml(token, opts) {
       }, 900);
       document.getElementById("neon_oauth")?.addEventListener("click", () => { location.href = "/neon/start"; });
     }
+    document.getElementById("neon_load")?.addEventListener("click", async () => {
+      document.getElementById("err").style.display = "none";
+      const k = (document.getElementById("neon_api_key")||{}).value?.trim() || "";
+      if (!k) { showErr("Paste your Neon API key."); return; }
+      setLoading(true, "Fetching Neon connection strings…");
+      try {
+        const r = await fetch("/neon/resolve-key", { method:"POST", headers:{ "Content-Type":"application/json" }, body: JSON.stringify({ token: TOKEN, neon_api_key: k }) });
+        const j = await r.json().catch(() => ({}));
+        if (!r.ok || !j.ok) { showErr(j.error || "Neon API error."); return; }
+        document.getElementById("neon_key_status")?.classList.remove("hidden");
+        if (j.db) {
+          const a = document.getElementById("db_app");
+          const b = document.getElementById("db_admin");
+          const w = document.getElementById("db_web");
+          if (a) a.value = j.db.app || "";
+          if (b) b.value = j.db.admin || "";
+          if (w) w.value = j.db.web || "";
+        }
+      } finally { setLoading(false, "Securing your session…"); }
+    });
     document.getElementById("go").onclick = async () => {
       document.getElementById("err").style.display = "none";
       const body = { token: TOKEN };
-      if (needsPostman) body.postman_api_key = (document.getElementById("postman_api_key")||{}).value || "";
+      const pmEl = document.getElementById("postman_api_key");
+      if (showPostman) body.postman_api_key = (pmEl && pmEl.value) ? pmEl.value.trim() : "";
       if (needsDb) {
         body.db_app = (document.getElementById("db_app")||{}).value || "";
         body.db_admin = (document.getElementById("db_admin")||{}).value || "";
         body.db_web = (document.getElementById("db_web")||{}).value || "";
+        const nk = (document.getElementById("neon_api_key")||{}).value?.trim() || "";
+        if (nk) body.neon_api_key = nk;
       }
       const btn = document.getElementById("go");
+      if (needsPostman && !body.postman_api_key) {
+        showErr("Postman API key is required.");
+        return;
+      }
       btn.disabled = true;
-      if (await submitBody(body)) {
-        setTimeout(() => { try { window.close(); } catch(_){} window.location.href = "about:blank"; }, 400);
-      } else btn.disabled = false;
+      setLoading(true, "Validating and saving…");
+      try {
+        if (await submitBody(body)) {
+          setLoading(true, "Done — closing…");
+          setTimeout(() => { try { window.close(); } catch(_){} window.location.href = "about:blank"; }, 500);
+        } else {
+          btn.disabled = false;
+          setLoading(false);
+        }
+      } catch (_) {
+        btn.disabled = false;
+        setLoading(false);
+      }
     };
   </script>
 </body>
@@ -319,6 +542,9 @@ function runSetupBrowserForm(opts) {
     needsDbUrls,
     emailDomain,
     neonOAuth,
+    neonApiResolve,
+    showPostman,
+    logoHtml = "",
     listenHost,
     listenPort,
     timeoutMs = 600_000,
@@ -344,6 +570,50 @@ function runSetupBrowserForm(opts) {
         return;
       }
 
+      if (req.method === "POST" && url.pathname === "/neon/resolve-key") {
+        let raw = "";
+        for await (const ch of req) raw += ch;
+        let data;
+        try {
+          data = JSON.parse(raw || "{}");
+        } catch {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ ok: false, error: "Bad JSON." }));
+          return;
+        }
+        if (data.token !== token) {
+          res.writeHead(403, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ ok: false, error: "Bad token." }));
+          return;
+        }
+        if (!neonApiKeyResolveReady()) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(
+            JSON.stringify({
+              ok: false,
+              error: "Set KOMPLIAN_NEON_PROJECT_ID_APP, _ADMIN, and _WEB (or OAuth project ID env vars).",
+            })
+          );
+          return;
+        }
+        const apiKey = String(data.neon_api_key || "").trim();
+        if (!apiKey) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ ok: false, error: "Neon API key required." }));
+          return;
+        }
+        const trip = await neonBuildTripletFromApiKey(apiKey);
+        if (!trip.ok) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ ok: false, error: trip.error || "Neon API error." }));
+          return;
+        }
+        ctx.neonTriplet = trip.db;
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ ok: true, db: trip.db }));
+        return;
+      }
+
       if (req.method === "GET" && url.pathname === "/neon/start" && neonOAuth) {
         const { verifier, challenge } = newPkce();
         const state = b64url(randomBytes(16));
@@ -410,6 +680,9 @@ function runSetupBrowserForm(opts) {
             needsDbUrls,
             emailDomain,
             neonOAuth,
+            neonApiResolve: !!neonApiResolve,
+            showPostman: !!showPostman,
+            logoHtml,
           })
         );
         return;
@@ -436,40 +709,72 @@ function runSetupBrowserForm(opts) {
 
         if (needsPostmanKey) {
           const pk = String(data.postman_api_key || "").trim();
-          if (pk) {
-            const v = await validatePostmanApiKeyForKomplian(pk, emailDomain);
+          if (!pk) {
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ ok: false, error: "Postman API key required." }));
+            return;
+          }
+          const v = await validatePostmanApiKeyForKomplian(pk, emailDomain);
+          if (!v.ok) {
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ ok: false, error: v.error || "Invalid Postman key." }));
+            return;
+          }
+          out.postmanKey = pk;
+        } else {
+          const pkOpt = String(data.postman_api_key || "").trim();
+          if (pkOpt) {
+            const v = await validatePostmanApiKeyForKomplian(pkOpt, emailDomain);
             if (!v.ok) {
               res.writeHead(400, { "Content-Type": "application/json" });
               res.end(JSON.stringify({ ok: false, error: v.error || "Invalid Postman key." }));
               return;
             }
-            out.postmanKey = pk;
+            out.postmanKey = pkOpt;
           }
         }
 
         if (needsDbUrls) {
+          let dbOut = null;
           if (ctx.neonTriplet && isValidTriplet(ctx.neonTriplet)) {
-            out.db = ctx.neonTriplet;
+            dbOut = ctx.neonTriplet;
           } else {
             const triplet = {
               app: String(data.db_app || "").trim(),
               admin: String(data.db_admin || "").trim(),
               web: String(data.db_web || "").trim(),
             };
-            if (!isValidTriplet(triplet)) {
-              res.writeHead(400, { "Content-Type": "application/json" });
-              res.end(
-                JSON.stringify({
-                  ok: false,
-                  error: neonOAuth
-                    ? "Connect Neon or paste three postgres URLs."
-                    : "Three valid postgres:// URLs required.",
-                })
-              );
-              return;
+            if (isValidTriplet(triplet)) {
+              dbOut = triplet;
+            } else {
+              const nk = String(data.neon_api_key || "").trim();
+              if (nk && neonApiKeyResolveReady()) {
+                const trip = await neonBuildTripletFromApiKey(nk);
+                if (!trip.ok) {
+                  res.writeHead(400, { "Content-Type": "application/json" });
+                  res.end(JSON.stringify({ ok: false, error: trip.error || "Neon API error." }));
+                  return;
+                }
+                dbOut = trip.db;
+                ctx.neonTriplet = trip.db;
+              }
             }
-            out.db = triplet;
           }
+          if (!dbOut || !isValidTriplet(dbOut)) {
+            res.writeHead(400, { "Content-Type": "application/json" });
+            res.end(
+              JSON.stringify({
+                ok: false,
+                error: neonOAuth
+                  ? "Connect Neon, load URLs with API key, or paste three postgres URLs."
+                  : neonApiKeyResolveReady()
+                    ? "Paste three postgres URLs, or use “Load connection strings” / Neon API key on submit."
+                    : "Three valid postgres:// URLs required (or configure Neon project IDs + API key).",
+              })
+            );
+            return;
+          }
+          out.db = dbOut;
         }
 
         res.writeHead(200, { "Content-Type": "application/json" });
@@ -538,9 +843,9 @@ function usage() {
   out(``);
   out(`  Runs: onboard → postman → mcp-tools → db:all:dev → localhost`);
   out(`  Secrets: local browser on 127.0.0.1 (no URLs or DB strings printed).`);
-  out(`  Neon OAuth (optional): set KOMPLIAN_NEON_OAUTH_CLIENT_ID, _CLIENT_SECRET,`);
-  out(`  _REDIRECT_URI (http://127.0.0.1:<port>/neon/callback), and project IDs:`);
-  out(`  KOMPLIAN_NEON_OAUTH_PROJECT_ID_APP, _ADMIN, _WEB. Partner OAuth required from Neon.`);
+  out(`  Neon OAuth (optional): KOMPLIAN_NEON_OAUTH_CLIENT_ID, _CLIENT_SECRET,`);
+  out(`  _REDIRECT_URI (http://127.0.0.1:<port>/neon/callback), + KOMPLIAN_NEON_OAUTH_PROJECT_ID_*`);
+  out(`  Neon API key (optional): set KOMPLIAN_NEON_PROJECT_ID_APP, _ADMIN, _WEB then paste key in setup UI.`);
   out(``);
   out(`  --terminal-only   No browser`);
   out(`  -w, --workspace   Clone / monorepo root`);
@@ -618,6 +923,18 @@ export async function runSetup(argv) {
   const needsPostmanKey = !existingPmKey;
   const needsDbUrls = !envDbOk && !savedDbOk;
   const neonOAuth = neonOAuthEnvReady();
+  const neonApiResolve = needsDbUrls && neonApiKeyResolveReady();
+  const showPostman = needsPostmanKey || needsDbUrls;
+
+  let logoHtml = "";
+  const logoPath = join(monorepoRoot, "web/public/images/logo-white.svg");
+  if (existsSync(logoPath)) {
+    try {
+      logoHtml = readFileSync(logoPath, "utf8").replace(/fill="#000000"/g, 'fill="#fafafa"');
+    } catch {
+      /* ignore */
+    }
+  }
 
   if (neonOAuth && needsDbUrls) {
     const lp = parseListenFromRedirectUri();
@@ -635,6 +952,9 @@ export async function runSetup(argv) {
         needsDbUrls,
         emailDomain,
         neonOAuth: !!(neonOAuth && needsDbUrls),
+        neonApiResolve,
+        showPostman,
+        logoHtml,
         listenHost: lp?.host || "127.0.0.1",
         listenPort: lp?.port ?? 0,
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "komplian",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Komplian CLI: setup (all-in-one), onboard, Postman, localhost, mcp-tools, db (psql). Node 18+.",
   "type": "module",
   "engines": {