create-volt 0.41.0 → 0.43.0

package/templates/starter/server.js

@@ -1,9 +1,9 @@
-// server.js — dev server with a built-in first-run setup wizard.
+// server.js — dev server with a built-in first-run setup wizard.
 //
 // First run (no .env) or `node server.js --edit` (-e) opens a disposable, local
 // config page: tick add-ons, fill settings, Apply. Apply writes .env (a
 // VOLT_ADDONS list + settings) and adds any needed packages to package.json,
-// runs npm install, then starts the app — which wires whatever .env enables.
+// runs npm install, then starts the app — which wires whatever .env enables.
 // Add-on code is bundled under .volt/addons; nothing is copied into your code.
 //
 // No build step, no env-file flag: .env is auto-loaded below.
@@ -25,7 +25,7 @@ const THEMES_DIR = path.join(__dirname, ".volt", "themes"); // bundled themes th
 const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
 const CONFIG_DEFAULT_PORT = 5050; // the --edit/--studio config UI's default port (its own, so it never clashes with a running app)
 
-// `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
+// `--port <n>` (or --port=<n>) overrides the listen port for this run — lets
 // --edit/--studio dodge a port the running app already holds, and runs the app
 // itself on a one-off port. Explicit flag wins over PORT in .env.
 function cliPort() {
@@ -105,7 +105,7 @@ const imp = (rel) => import(pathToFileURL(path.join(__dirname, rel)).href);
 const addonMod = (n) => imp(path.join(".volt", "addons", n, "files", "lib", LIB_FILE[n]));
 
 // Built-in add-ons are wired explicitly below; everything else in VOLT_ADDONS is
-// a third-party add-on — a local .volt/addons/<name>/index.js or an installed
+// a third-party add-on — a local .volt/addons/<name>/index.js or an installed
 // npm package "volt-addon-<name>" exporting register(ctx). See /docs/plugins.
 const BUILTINS = new Set(Object.keys(LIB_FILE));
 async function loadAddon(name) {
@@ -129,7 +129,7 @@ function openBrowser(url) {
   const args = plat === "win32" ? ["/c", "start", "", url] : [url];
   try {
     const child = spawn(cmd, args, { stdio: "ignore", detached: true });
-    child.on("error", () => {}); // launcher missing — emits async, don't crash
+    child.on("error", () => {}); // launcher missing — emits async, don't crash
     child.unref();
     return true;
   } catch {
@@ -157,7 +157,7 @@ async function startApp() {
   if (enabled.has("mailer")) mailer = await (await addonMod("mailer")).createMailer();
   if (enabled.has("auth") && store && mailer) app.use((await addonMod("auth")).authRouter({ store, mailer }));
 
-  // notes — a per-user CRUD example (auth-gated, owner-scoped, db-backed)
+  // notes — a per-user CRUD example (auth-gated, owner-scoped, db-backed)
   if (enabled.has("db") && enabled.has("auth") && store) {
     const guard = (await addonMod("auth")).requireAuth(store);
     const notes = store.collection("notes");
@@ -201,8 +201,8 @@ async function startApp() {
     app.use(await (await addonMod("media")).mediaRouter({ requireAuth, dir: path.join(__dirname, "media") }));
   }
 
-  // markdown pages (/<slug> ← pages/<slug>.md) — mounted last, so app routes win
-  // blog posts (/blog, /blog/<slug>, /category, /tag, /feed.xml) — before pages so /blog wins; renders in the same theme.
+  // markdown pages (/<slug> → pages/<slug>.md) — mounted last, so app routes win
+  // blog posts (/blog, /blog/<slug>, /category, /tag, /feed.xml) — before pages so /blog wins; renders in the same theme.
   if (enabled.has("posts")) app.use(await (await addonMod("posts")).postsRouter({ dir: path.join(__dirname, "posts"), themeDir: path.join(__dirname, "pages") }));
   if (enabled.has("pages")) app.use(await (await addonMod("pages")).pagesRouter({ dir: path.join(__dirname, "pages") }));
 
@@ -217,7 +217,7 @@ async function startApp() {
     res.json({ ok: true });
   });
 
-  // third-party add-ons — register(ctx). When auth is on, requireAuth/sessionFromReq
+  // third-party add-ons — register(ctx). When auth is on, requireAuth/sessionFromReq
   // are provided so add-ons can gate routes by login.
   let requireAuth = null;
   let sessionFromReq = null;
@@ -233,7 +233,7 @@ async function startApp() {
     if (typeof register === "function") {
       await register({ app, express, io, store, mailer, env: process.env, requireAuth, sessionFromReq, log: (...a) => console.log(`[${name}]`, ...a) });
     } else {
-      console.warn(`[volt] add-on "${name}" not found or missing a register() export — skipped`);
+      console.warn(`[volt] add-on "${name}" not found or missing a register() export — skipped`);
     }
   }
 
@@ -241,7 +241,7 @@ async function startApp() {
   const onChange = (file) => {
     clearTimeout(timer);
     timer = setTimeout(() => {
-      console.log(`[volt] change: ${file ?? "?"} → reload`);
+      console.log(`[volt] change: ${file ?? "?"} → reload`);
       io.emit("volt:reload", { file });
     }, 80);
   };
@@ -284,7 +284,7 @@ async function startApp() {
     }
     throw e;
   });
-  server.listen(PORT, () => console.log(`⚡ Volt → http://localhost:${PORT}${on.length ? "  (add-ons: " + on.join(", ") + ")" : ""}`));
+  server.listen(PORT, () => console.log(`Volt at http://localhost:${PORT}${on.length ? "  (add-ons: " + on.join(", ") + ")" : ""}`));
 }
 
 // Packages an .env's selections need, beyond what package.json already has.
@@ -308,7 +308,7 @@ function neededPackages(env) {
 function ensureDriverInstalled(driver) {
   const pkg = { mongodb: "mongodb", mongo: "mongodb", mysql: "mysql2", postgres: "pg", postgresql: "pg", pg: "pg" }[String(driver || "").toLowerCase()];
   if (!pkg || fs.existsSync(path.join(__dirname, "node_modules", pkg))) return;
-  console.log(`[volt] installing ${pkg} for the connection test…`);
+  console.log(`[volt] installing ${pkg} for the connection test…`);
   spawnSync("npm", ["install", `${pkg}@${PKG_VERSIONS[pkg] || "latest"}`], { cwd: __dirname, stdio: "inherit", shell: process.platform === "win32" });
 }
 
@@ -338,6 +338,83 @@ function startSetup() {
       res.setHeader("Content-Type", "application/json");
       return res.end(JSON.stringify({ available: availableAddons(), themes: availableThemes(), current: readEnvFile(), defaultPort: DEFAULT_PORT, configDefaultPort: CONFIG_DEFAULT_PORT }));
     }
+    // --- upgrade: compare .volt/version to npm latest, and run the update ---
+    if (req.method === "GET" && p === "/setup/upgrade-check") {
+      const vf = path.join(__dirname, ".volt", "version");
+      const current = (fs.existsSync(vf) ? fs.readFileSync(vf, "utf8").trim() : "") || "?";
+      fetch("https://registry.npmjs.org/create-volt/latest")
+        .then((r) => r.json())
+        .then((j) => {
+          const latest = j.version || "?";
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ current, latest, available: latest !== "?" && current !== "?" && latest !== current }));
+        })
+        .catch(() => {
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ current, latest: "?", available: false }));
+        });
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/upgrade") {
+      res.setHeader("Content-Type", "application/json");
+      try {
+        const r = spawnSync("npx", ["--yes", "create-volt@latest", "update"], { cwd: __dirname, encoding: "utf8", shell: process.platform === "win32" });
+        res.end(JSON.stringify({ ok: r.status === 0, output: ((r.stdout || "") + (r.stderr || "")).slice(-2000) }));
+      } catch (e) {
+        res.statusCode = 500;
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+      return;
+    }
+    // --- content manager: list / read / write / delete pages + posts ---
+    if (req.method === "GET" && p === "/setup/content") {
+      const list = (type) => {
+        const dir = path.join(__dirname, type === "post" ? "posts" : "pages");
+        if (!fs.existsSync(dir)) return [];
+        return fs
+          .readdirSync(dir)
+          .filter((f) => f.endsWith(".md") && !f.startsWith("_"))
+          .map((f) => {
+            const slug = f.replace(/\.md$/, "");
+            const title = (fs.readFileSync(path.join(dir, f), "utf8").match(/^title:\s*(.+)$/m) || [])[1];
+            return { type, slug, title: (title || slug).trim() };
+          });
+      };
+      res.setHeader("Content-Type", "application/json");
+      return res.end(JSON.stringify({ pages: list("page"), posts: list("post") }));
+    }
+    if (req.method === "GET" && p === "/setup/content/raw") {
+      const type = u.searchParams.get("type") === "post" ? "posts" : "pages";
+      const slug = u.searchParams.get("slug") || "";
+      res.setHeader("Content-Type", "application/json");
+      if (!/^[a-z0-9][a-z0-9-]*$/i.test(slug)) return res.end(JSON.stringify({ ok: false, error: "invalid slug" }));
+      const file = path.join(__dirname, type, slug + ".md");
+      return res.end(JSON.stringify({ ok: true, body: fs.existsSync(file) ? fs.readFileSync(file, "utf8") : "" }));
+    }
+    if (req.method === "POST" && (p === "/setup/content/save" || p === "/setup/content/delete")) {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const { type, slug, body } = JSON.parse(cbody || "{}");
+          if (!/^[a-z0-9][a-z0-9-]*$/i.test(slug || "")) throw new Error("slug: lowercase letters, numbers, hyphens");
+          const dir = path.join(__dirname, type === "post" ? "posts" : "pages");
+          const file = path.join(dir, slug + ".md");
+          if (p === "/setup/content/delete") {
+            if (fs.existsSync(file)) fs.unlinkSync(file);
+            return res.end(JSON.stringify({ ok: true }));
+          }
+          fs.mkdirSync(dir, { recursive: true });
+          fs.writeFileSync(file, String(body ?? ""));
+          res.end(JSON.stringify({ ok: true, file: (type === "post" ? "posts/" : "pages/") + slug + ".md" }));
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
     // "Customize": copy a bundled theme into pages/_theme.js so it can be edited.
     if (req.method === "POST" && p === "/setup/eject-theme") {
       let body = "";
@@ -431,15 +508,15 @@ function startSetup() {
               server.closeIdleConnections?.();
             };
             if (added.length) {
-              console.log(`[volt] installing ${added.join(", ")}…`);
+              console.log(`[volt] installing ${added.join(", ")}…`);
               const npm = spawn("npm", ["install"], { cwd: __dirname, stdio: "inherit", shell: process.platform === "win32" });
               npm.on("error", () => handoff());
               npm.on("close", () => {
-                console.log("[volt] saved .env — starting the app…");
+                console.log("[volt] saved .env — starting the app…");
                 handoff();
               });
             } else {
-              console.log("[volt] saved .env — starting the app…");
+              console.log("[volt] saved .env — starting the app…");
               handoff();
             }
           });
@@ -457,18 +534,18 @@ function startSetup() {
   server.on("error", (e) => { if (e.code === "EADDRINUSE") { console.error(`\n[volt] Config UI port ${PORT} is in use (is the app already running?). Set CONFIG_PORT in .env or pass --port <n>.\n`); process.exit(1); } throw e; });
   server.listen(PORT, "127.0.0.1", () => {
     const url = `http://localhost:${PORT}`;
-    console.log(`\n⚡ Volt setup → ${url}`);
+    console.log(`\nVolt setup at ${url}`);
     console.log("  Configure your app; it starts automatically on Apply. (reopen later: npm run dev -- --edit)");
     const ssh = process.env.SSH_CONNECTION;
     if (ssh) {
       const host = ssh.split(" ")[2];
       const user = process.env.USER || process.env.USERNAME || "you";
-      console.log("  Remote box — the server is up here; bridge it from your LOCAL machine:");
+      console.log("  Remote box — the server is up here; bridge it from your LOCAL machine:");
       console.log(`    ssh -N -L 127.0.0.1:${PORT}:localhost:${PORT} ${user}@${host}`);
-      console.log(`  …then open ${url} on your machine (the tunnel points it here).`);
+      console.log(`  …then open ${url} on your machine (the tunnel points it here).`);
     }
     console.log("");
-    if (openBrowser(url)) console.log("  (opening your browser…)\n");
+    if (openBrowser(url)) console.log("  (opening your browser…)\n");
   });
 }
 
@@ -476,8 +553,8 @@ function readEnvFileLines() {
   return fs.existsSync(ENV_PATH) ? fs.readFileSync(ENV_PATH, "utf8").split("\n") : [];
 }
 
-// --- Studio: an ephemeral, localhost-only data browser (à la Prisma Studio).
-// Not a route in the running app — it only exists while you run `--studio`, on
+// --- Studio: an ephemeral, localhost-only data browser (— la Prisma Studio).
+// Not a route in the running app — it only exists while you run `--studio`, on
 // loopback, and disappears on Ctrl-C. Shell/SSH access is the auth. ---
 const HIDDEN_COLLECTIONS = new Set(["auth_tokens", "auth_sessions", "__voltcheck"]);
 async function startStudio() {
@@ -490,7 +567,7 @@ async function startStudio() {
   try {
     store = await (await addonMod("db")).createStore();
   } catch (e) {
-    console.error("Studio: couldn't connect the store — " + e.message);
+    console.error("Studio: couldn't connect the store — " + e.message);
     process.exit(1);
   }
   const PORT = configPort();
@@ -548,15 +625,15 @@ async function startStudio() {
   server.on("error", (e) => { if (e.code === "EADDRINUSE") { console.error(`\n[volt] Config UI port ${PORT} is in use (is the app already running?). Set CONFIG_PORT in .env or pass --port <n>.\n`); process.exit(1); } throw e; });
   server.listen(PORT, "127.0.0.1", () => {
     const url = `http://localhost:${PORT}`;
-    console.log(`\n⚡ Volt Studio → ${url}   (${store.name})`);
-    console.log("  Browse your data. localhost-only, disposable — Ctrl-C when done.");
+    console.log(`\nVolt Studio at ${url}   (${store.name})`);
+    console.log("  Browse your data. localhost-only, disposable — Ctrl-C when done.");
     const ssh = process.env.SSH_CONNECTION;
     if (ssh) {
       const host = ssh.split(" ")[2];
       const user = process.env.USER || process.env.USERNAME || "you";
-      console.log("  Remote box — from your LOCAL machine:");
+      console.log("  Remote box — from your LOCAL machine:");
       console.log(`    ssh -N -L 127.0.0.1:${PORT}:localhost:${PORT} ${user}@${host}`);
-      console.log(`  …then open ${url}.`);
+      console.log(`  …then open ${url}.`);
     }
     console.log("");
     openBrowser(url);

package/templates/starter/setup/setup.js

@@ -249,46 +249,116 @@ const themePicker = () =>
   </div>`;
 
 // AI keys (optional) — used by the WYSIWYG editor's assistant. Kept server-side.
+const AI_KEY_URL = {
+  anthropic: "https://console.anthropic.com/settings/keys",
+  openai: "https://platform.openai.com/api-keys",
+  gemini: "https://aistudio.google.com/app/apikey",
+};
 const aiSettings = () =>
-  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI keys (optional) — for the editor's assistant</summary>
+  html`<details class="mb-2"><summary class="form-label small mb-0" style="cursor:pointer">AI assistant for the editor (optional)</summary>
     <div class="mt-2">
-      <label class="form-label small mb-1">Provider (AI_PROVIDER)</label>
-      <select class="form-select mb-2" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
+      <p class="small text-muted mb-2">Powers the WYSIWYG editor's "write with AI" button. <strong>Totally optional</strong> — leave the key blank and the editor still works, just without AI.</p>
+      <label class="form-label small mb-1">Provider</label>
+      <select class="form-select mb-1" value=${() => state().aiProvider} onchange=${(e) => set({ aiProvider: e.target.value })}>
         <option value="anthropic">Anthropic (Claude)</option>
         <option value="openai">OpenAI</option>
         <option value="gemini">Google Gemini</option>
       </select>
-      ${field("API key — stays server-side, written to .env", "aiKey", "sk-…")}
+      ${() => html`<a class="small d-inline-block mb-1" href=${AI_KEY_URL[state().aiProvider] || AI_KEY_URL.anthropic} target="_blank" rel="noopener">Get a ${state().aiProvider} key → paste it below (stays server-side in .env)</a>`}
+      ${field("API key", "aiKey", "sk-…")}
     </div>
   </details>`;
 
-mount(
-  "#app",
-  available.length
-    ? html`<div class="card-x p-4 mb-3">
-        <h2 class="h6 mb-3">Features</h2>
-        ${available.map(addonRow)}
-        <p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p>
-      </div>`
-    : null,
-  html`<div class="card-x p-4 mb-3">
-    <h2 class="h6 mb-3">Settings</h2>
-    ${field("PORT", "port", String(defaultPort))}
-    ${field("SITE_NAME", "siteName", "My Site")}
-    ${() => (hasContent() ? themePicker() : null)}
-    ${() => (hasDb() ? dbSettings() : null)}
-    ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
-    ${() => (hasMedia() ? mediaSettings() : null)}
-    ${aiSettings()}
-    ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
-    ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
-  </div>`,
+// --- Manage content (a second screen reached via "Manage content →") ---
+const view = signal("config"); // "config" | "manage"
+// upgrade check: compare bundled version to npm latest; offer a one-click upgrade
+const upgrade = signal(null); // { current, latest, available }
+fetch("/setup/upgrade-check").then((r) => r.json()).then((u) => upgrade(u)).catch(() => {});
+async function doUpgrade() {
+  status("Upgrading via npx create-volt@latest update…");
+  try {
+    const r = await (await fetch("/setup/upgrade", { method: "POST" })).json();
+    status(r.ok ? "Upgraded — restart the wizard/app to load the new version." : "Upgrade failed (see terminal).");
+    if (r.ok) upgrade({ ...upgrade(), available: false });
+  } catch {
+    status("Upgrade request failed.");
+  }
+}
+const items = signal({ pages: [], posts: [] });
+const editing = signal(null); // { type, slug, body, isNew } — set only on open/save/close, so typing doesn't re-render
+const loadItems = async () => items(await (await fetch("/setup/content")).json());
+async function editItem(type, slug) {
+  const d = await (await fetch(`/setup/content/raw?type=${type}&slug=${encodeURIComponent(slug)}`)).json();
+  editing({ type, slug, body: d.body || "", isNew: false });
+}
+function newItem(type) {
+  const body = type === "post" ? "---\ntitle: New Post\ndate: 2026-01-01\ncategory: \ntags: \n---\n\nWrite your post here.\n" : "---\ntitle: New Page\n---\n\nWrite your page here.\n";
+  editing({ type, slug: "", body, isNew: true });
+}
+async function saveItem() {
+  const e = editing();
+  const slug = (document.querySelector("#mg-slug").value || "").trim().toLowerCase();
+  const body = document.querySelector("#mg-body").value;
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) return status("Slug must be lowercase letters, numbers, hyphens.");
+  const r = await (await fetch("/setup/content/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: e.type, slug, body }) })).json();
+  if (!r.ok) return status("Error: " + (r.error || "?"));
+  status("Saved → " + r.file);
+  editing(null);
+  loadItems();
+}
+async function delItem(type, slug) {
+  if (typeof confirm === "function" && !confirm(`Delete ${slug}?`)) return;
+  await fetch("/setup/content/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, slug }) });
+  status("Deleted " + slug);
+  loadItems();
+}
+
+const itemRow = (it) =>
+  html`<li class="list-group-item bg-transparent text-light d-flex justify-content-between align-items-center py-1 px-2">
+    <span><a href=${"http://localhost:" + state().port + (it.type === "post" ? "/blog/" : "/") + it.slug} target="_blank" rel="noopener">${it.title}</a> <span class="text-muted small">/${it.type === "post" ? "blog/" : ""}${it.slug}</span></span>
+    <span><button class="btn btn-sm btn-link p-0 me-3" onclick=${() => editItem(it.type, it.slug)}>edit</button><button class="btn btn-sm btn-link p-0 text-danger" onclick=${() => delItem(it.type, it.slug)}>delete</button></span>
+  </li>`;
+const section = (label, type, key) =>
+  html`<div class="mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-1"><strong>${label}</strong><button class="btn btn-sm btn-outline-secondary" onclick=${() => newItem(type)}>+ New</button></div>
+    ${() => (items()[key].length ? html`<ul class="list-group">${items()[key].map(itemRow)}</ul>` : html`<div class="small text-muted">No ${key} yet.</div>`)}
+  </div>`;
+const editorPanel = () => {
+  const e = editing(); // inputs are uncontrolled (read on Save) so typing never re-renders
+  return html`<div class="p-3 mb-2" style="border:1px solid #232a36;border-radius:10px">
+    <div class="d-flex gap-2 mb-2"><input id="mg-slug" class="form-control" placeholder="slug" value=${e.slug} readonly=${!e.isNew} /><span class="align-self-center small text-muted">${e.type === "post" ? "posts/" : "pages/"}</span></div>
+    <textarea id="mg-body" class="form-control" rows="16" style="font-family:ui-monospace,monospace;font-size:13px">${e.body}</textarea>
+    <div class="mt-2 d-flex gap-2"><button class="btn btn-primary btn-sm" onclick=${saveItem}>Save</button><button class="btn btn-outline-secondary btn-sm" onclick=${() => editing(null)}>Cancel</button></div>
+  </div>`;
+};
+const manageView = () =>
   html`<div class="card-x p-4 mb-3">
-    <div class="d-flex justify-content-between align-items-center mb-2">
-      <h2 class="h6 mb-0">.env</h2>
-      <button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button>
+    <div class="d-flex justify-content-between align-items-center mb-3"><h2 class="h6 mb-0">Manage content</h2><button class="btn btn-sm btn-outline-secondary" onclick=${() => view("config")}>← Settings</button></div>
+    ${() => (editing() ? editorPanel() : html`${section("Pages", "page", "pages")}${section("Posts", "post", "posts")}<p class="small text-muted mb-0">Pages → <code>/slug</code>, posts → <code>/blog/slug</code>; <code>index</code> page is your home. All rendered in your theme. Edits hot-reload the running app.</p>`)}
+  </div>`;
+
+const configView = () =>
+  html`${() => (upgrade()?.available ? html`<div class="card-x p-3 mb-3 d-flex justify-content-between align-items-center"><span class="small">⬆ <strong>create-volt ${upgrade().latest}</strong> is available — you have ${upgrade().current}.</span><button class="btn btn-sm btn-primary" onclick=${doUpgrade}>Upgrade</button></div>` : "")}
+    ${available.length ? html`<div class="card-x p-4 mb-3"><h2 class="h6 mb-3">Features</h2>${available.map(addonRow)}<p class="small text-muted mb-0">Enabling a feature wires its backend automatically. Frontend UI (login form, chat) is yours to build — or start from <code>--template guestbook</code>.</p></div>` : ""}
+    <div class="card-x p-4 mb-3">
+      <h2 class="h6 mb-3">Settings</h2>
+      ${field("PORT", "port", String(defaultPort))}
+      ${field("SITE_NAME", "siteName", "My Site")}
+      ${() => (hasContent() ? themePicker() : null)}
+      ${() => (hasDb() ? dbSettings() : null)}
+      ${() => (hasMailer() ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
+      ${() => (hasMedia() ? mediaSettings() : null)}
+      ${aiSettings()}
+      ${field("SITE_URL (optional — absolute links, RSS, canonical)", "siteUrl", "https://example.com")}
+      ${field("CONFIG_PORT (this wizard's own port)", "configPort", String(configDefaultPort))}
     </div>
-    <pre class="mb-0" style="background:#0b0d11;border:1px solid #232a36;border-radius:10px;padding:12px;color:#cfe3ff;white-space:pre-wrap">${env}</pre>
-  </div>`,
+    <div class="card-x p-4 mb-3">
+      <div class="d-flex justify-content-between align-items-center mb-2"><h2 class="h6 mb-0">.env</h2><div class="d-flex gap-2">${() => (hasContent() ? html`<button class="btn btn-outline-light btn-sm" onclick=${() => (view("manage"), loadItems())}>Manage content →</button>` : "")}<button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button></div></div>
+      <pre class="mb-0" style="background:#0b0d11;border:1px solid #232a36;border-radius:10px;padding:12px;color:#cfe3ff;white-space:pre-wrap">${env}</pre>
+    </div>`;
+
+mount(
+  "#app",
+  () => (view() === "config" ? configView() : manageView()),
   () => (status() ? html`<p class="small accent">${status}</p>` : null),
 );