create-volt 0.42.0 → 0.43.0

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to `create-volt` are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and this project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [0.43.0] - 2026-06-30
+
+### Added
+- **Upgrade from the wizard.** Scaffolds record their version in `.volt/version`;
+  the `--edit` wizard checks npm and shows an "create-volt X available" notice with
+  a one-click **Upgrade** button (runs `npx create-volt@latest update`).
+- **`update` refreshes everything framework-owned** — vendored runtime
+  (`volt.js`, `volt-ssr.js`), the setup wizard, and bundled add-ons + themes (was
+  just `volt.js`). Your `server.js` + content are left untouched.
+- **Simpler AI setup.** The wizard AI section is clearly optional with a
+  per-provider **Get a key →** link (Anthropic / OpenAI / Gemini); leave it blank
+  and the editor works without AI.
+
 ## [0.42.0] - 2026-06-30
 
 ### Added
@@ -561,6 +574,7 @@ All notable changes to `create-volt` are documented here. The format follows
   watching and full-page hot reload. Supports `--skip-install` and `--force`,
   and auto-detects npm / pnpm / yarn / bun for the install step.
 
+[0.43.0]: https://github.com/MIR-2025/volt/releases/tag/v0.43.0
 [0.42.0]: https://github.com/MIR-2025/volt/releases/tag/v0.42.0
 [0.41.0]: https://github.com/MIR-2025/volt/releases/tag/v0.41.0
 [0.40.0]: https://github.com/MIR-2025/volt/releases/tag/v0.40.0

package/index.js

@@ -237,24 +237,41 @@ if (positionals[0] === "create-theme") {
 // pulls the latest library). Only touches the library file — never the user's
 // app.js, server.js, or port. ---
 if (positionals[0] === "update") {
-  const target = path.join(process.cwd(), "public", "volt.js");
-  if (!fs.existsSync(target)) {
+  const cwd = process.cwd();
+  if (!fs.existsSync(path.join(cwd, "public", "volt.js"))) {
     die(`No ${cyan("public/volt.js")} here — run ${cyan("create-volt update")} from inside a Volt app.`);
   }
-  const latest = fs.readFileSync(path.join(__dirname, "templates", "default", "public", "volt.js"), "utf8");
-  const current = fs.readFileSync(target, "utf8");
-  if (current === latest) {
-    console.log(`\n${green("✔")} ${bold("public/volt.js")} is already current (create-volt ${pkg.version}).\n`);
-    process.exit(0);
-  }
   if (dryRun) {
-    console.log(`\n${yellow("!")} An update is available for ${bold("public/volt.js")} (create-volt ${pkg.version}).`);
+    console.log(`\n${yellow("!")} Would refresh the vendored runtime + bundled add-ons/themes to create-volt ${pkg.version}.`);
     console.log(`  Re-run without ${cyan("--dry-run")} to apply.\n`);
     process.exit(0);
   }
-  fs.writeFileSync(target, latest);
-  console.log(`\n${green("✔")} Updated ${bold("public/volt.js")} to the version in create-volt ${pkg.version}.`);
-  console.log(`  Review the change with ${cyan("git diff public/volt.js")}.\n`);
+  // Refresh the framework-owned files (not your server.js / content): the vendored
+  // runtime, the setup wizard, and the bundled add-ons + themes.
+  const T = path.join(__dirname, "templates", "default");
+  const done = [];
+  const copyFile = (rel, src) => {
+    if (fs.existsSync(src) && fs.existsSync(path.dirname(path.join(cwd, rel)))) {
+      fs.copyFileSync(src, path.join(cwd, rel));
+      done.push(rel);
+    }
+  };
+  copyFile("public/volt.js", path.join(T, "public", "volt.js"));
+  copyFile("public/volt-ssr.js", path.join(T, "public", "volt-ssr.js"));
+  if (fs.existsSync(path.join(cwd, "setup"))) {
+    fs.cpSync(path.join(T, "setup"), path.join(cwd, "setup"), { recursive: true });
+    done.push("setup/ (wizard)");
+  }
+  if (fs.existsSync(path.join(cwd, ".volt"))) {
+    for (const d of ["addons", "themes"]) {
+      fs.cpSync(path.join(__dirname, d), path.join(cwd, ".volt", d), { recursive: true });
+      done.push(".volt/" + d);
+    }
+  }
+  fs.mkdirSync(path.join(cwd, ".volt"), { recursive: true });
+  fs.writeFileSync(path.join(cwd, ".volt", "version"), pkg.version + "\n");
+  console.log(`\n${green("✔")} Updated to create-volt ${pkg.version}: ${done.join(", ")}.`);
+  console.log(dim(`  Your server.js + content are untouched (re-scaffold to adopt entry-point changes). Restart the app.`));
   process.exit(0);
 }
 
@@ -471,6 +488,7 @@ if (fs.existsSync(path.join(targetDir, "setup"))) {
     const src = path.join(__dirname, name);
     if (fs.existsSync(src)) fs.cpSync(src, path.join(targetDir, ".volt", name), { recursive: true });
   }
+  fs.writeFileSync(path.join(targetDir, ".volt", "version"), pkg.version + "\n"); // for the wizard's upgrade check
 }
 
 // --- stamp the project name into package.json ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Scaffold a new Volt app — no-build, signals-based UI with Socket.io hot reload.",
   "type": "module",
   "bin": {

package/templates/blog/server.js

@@ -312,6 +312,34 @@ 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) => {

package/templates/blog/setup/setup.js

@@ -249,21 +249,41 @@ 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>`;
 
 // --- 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());
@@ -318,7 +338,8 @@ const manageView = () =>
   </div>`;
 
 const configView = () =>
-  html`${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>` : ""}
+  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))}

package/templates/default/server.js

@@ -312,6 +312,34 @@ 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) => {

package/templates/default/setup/setup.js

@@ -249,21 +249,41 @@ 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>`;
 
 // --- 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());
@@ -318,7 +338,8 @@ const manageView = () =>
   </div>`;
 
 const configView = () =>
-  html`${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>` : ""}
+  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))}

package/templates/docs/server.js

@@ -312,6 +312,34 @@ 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) => {

package/templates/docs/setup/setup.js

@@ -249,21 +249,41 @@ 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>`;
 
 // --- 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());
@@ -318,7 +338,8 @@ const manageView = () =>
   </div>`;
 
 const configView = () =>
-  html`${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>` : ""}
+  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))}

package/templates/starter/server.js

@@ -338,6 +338,34 @@ 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) => {

package/templates/starter/setup/setup.js

@@ -249,21 +249,41 @@ 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>`;
 
 // --- 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());
@@ -318,7 +338,8 @@ const manageView = () =>
   </div>`;
 
 const configView = () =>
-  html`${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>` : ""}
+  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))}