create-volt 0.44.0 → 0.45.1

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.45.1] - 2026-06-29
+
+### Fixed
+- **.env inline comments.** `KEY=value # note` now parses to `value` (trailing
+  comment stripped); quoted values stay literal. Previously the comment became
+  part of the value.
+
+## [0.45.0] - 2026-06-29
+
+### Added
+- **Buy AI credits from the config wizard.** When an app uses the hosted gateway
+  (`VOLT_AI_TOKEN` set), the `--edit` wizard shows an **AI credits** card — live
+  balance + tier, and top-up buttons that open Stripe Checkout. The purchase flow
+  lives in the (shell-gated) config only; the running app never exposes it.
+  Proxied via `/setup/ai-credits` + `/setup/ai-credits/checkout` to the gateway.
+
 ## [0.44.0] - 2026-06-29
 
 ### Added
@@ -584,6 +600,8 @@ 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.45.1]: https://github.com/MIR-2025/volt/releases/tag/v0.45.1
+[0.45.0]: https://github.com/MIR-2025/volt/releases/tag/v0.45.0
 [0.44.0]: https://github.com/MIR-2025/volt/releases/tag/v0.44.0
 [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

package/package.json

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

package/templates/blog/server.js

@@ -51,7 +51,10 @@ function readEnvFile() {
   if (!fs.existsSync(ENV_PATH)) return out;
   for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
     const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
-    if (m) out[m[1]] = m[2];
+    if (m) {
+      const v = m[2];
+      out[m[1]] = (v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'")) ? v.slice(1, -1) : v.replace(/(?:^|\s+)#.*$/, "");
+    }
   }
   return out;
 }
@@ -341,6 +344,42 @@ function startSetup() {
       }
       return;
     }
+    // --- AI credits: in-config purchase flow. Proxies the hosted gateway with
+    // the app's VOLT_AI_TOKEN — the buy flow lives here in the (shell-gated)
+    // config only, never in the running app. ---
+    if (req.method === "GET" && p === "/setup/ai-credits") {
+      const env = readEnvFile();
+      res.setHeader("Content-Type", "application/json");
+      if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN (BYO or unset)" }));
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/credits", { headers: { authorization: "Bearer " + env.VOLT_AI_TOKEN } })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/ai-credits/checkout") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        const env = readEnvFile();
+        res.setHeader("Content-Type", "application/json");
+        if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN" }));
+        const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+        let amountUsd = 0;
+        try {
+          amountUsd = Number(JSON.parse(cbody || "{}").amountUsd) || 0;
+        } catch {
+          /* bad json */
+        }
+        const baseUrl = env.SITE_URL || `http://localhost:${configPort()}`;
+        fetch(base + "/api/credits/checkout", { method: "POST", headers: { "content-type": "application/json", authorization: "Bearer " + env.VOLT_AI_TOKEN }, body: JSON.stringify({ amountUsd, baseUrl }) })
+          .then((r) => r.json())
+          .then((j) => res.end(JSON.stringify(j)))
+          .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      });
+      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

@@ -284,6 +284,21 @@ async function doUpgrade() {
     status("Upgrade request failed.");
   }
 }
+
+// AI credits — config-only purchase flow (gateway mode). Hidden unless a
+// VOLT_AI_TOKEN is set and the gateway answers.
+const aiCredits = signal(null); // { ok, tier, creditBalanceUsd, payments } | { ok:false }
+fetch("/setup/ai-credits").then((r) => r.json()).then((c) => aiCredits(c)).catch(() => {});
+async function buyCredits(amountUsd) {
+  status("Starting checkout…");
+  try {
+    const r = await (await fetch("/setup/ai-credits/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountUsd }) })).json();
+    if (r.ok && r.url) window.open(r.url, "_blank");
+    else status("Checkout failed: " + (r.error || "?"));
+  } catch {
+    status("Checkout 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());
@@ -339,6 +354,7 @@ const manageView = () =>
 
 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>` : "")}
+    ${() => (aiCredits()?.ok ? html`<div class="card-x p-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-2"><strong>AI credits</strong><span class="small text-muted">${aiCredits().tier}${typeof aiCredits().creditBalanceUsd === "number" ? ` · $${aiCredits().creditBalanceUsd.toFixed(2)} left` : ""}</span></div>${aiCredits().payments ? html`<div class="d-flex gap-2 align-items-center"><span class="small text-muted me-1">Top up:</span>${[10, 25, 50].map((a) => html`<button class="btn btn-sm btn-outline-primary" onclick=${() => buyCredits(a)}>$${a}</button>`)}</div>` : html`<div class="small text-muted">Pay-as-you-go isn't enabled on the gateway yet — using the free tier.</div>`}</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>

package/templates/default/server.js

@@ -51,7 +51,10 @@ function readEnvFile() {
   if (!fs.existsSync(ENV_PATH)) return out;
   for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
     const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
-    if (m) out[m[1]] = m[2];
+    if (m) {
+      const v = m[2];
+      out[m[1]] = (v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'")) ? v.slice(1, -1) : v.replace(/(?:^|\s+)#.*$/, "");
+    }
   }
   return out;
 }
@@ -341,6 +344,42 @@ function startSetup() {
       }
       return;
     }
+    // --- AI credits: in-config purchase flow. Proxies the hosted gateway with
+    // the app's VOLT_AI_TOKEN — the buy flow lives here in the (shell-gated)
+    // config only, never in the running app. ---
+    if (req.method === "GET" && p === "/setup/ai-credits") {
+      const env = readEnvFile();
+      res.setHeader("Content-Type", "application/json");
+      if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN (BYO or unset)" }));
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/credits", { headers: { authorization: "Bearer " + env.VOLT_AI_TOKEN } })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/ai-credits/checkout") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        const env = readEnvFile();
+        res.setHeader("Content-Type", "application/json");
+        if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN" }));
+        const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+        let amountUsd = 0;
+        try {
+          amountUsd = Number(JSON.parse(cbody || "{}").amountUsd) || 0;
+        } catch {
+          /* bad json */
+        }
+        const baseUrl = env.SITE_URL || `http://localhost:${configPort()}`;
+        fetch(base + "/api/credits/checkout", { method: "POST", headers: { "content-type": "application/json", authorization: "Bearer " + env.VOLT_AI_TOKEN }, body: JSON.stringify({ amountUsd, baseUrl }) })
+          .then((r) => r.json())
+          .then((j) => res.end(JSON.stringify(j)))
+          .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      });
+      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

@@ -284,6 +284,21 @@ async function doUpgrade() {
     status("Upgrade request failed.");
   }
 }
+
+// AI credits — config-only purchase flow (gateway mode). Hidden unless a
+// VOLT_AI_TOKEN is set and the gateway answers.
+const aiCredits = signal(null); // { ok, tier, creditBalanceUsd, payments } | { ok:false }
+fetch("/setup/ai-credits").then((r) => r.json()).then((c) => aiCredits(c)).catch(() => {});
+async function buyCredits(amountUsd) {
+  status("Starting checkout…");
+  try {
+    const r = await (await fetch("/setup/ai-credits/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountUsd }) })).json();
+    if (r.ok && r.url) window.open(r.url, "_blank");
+    else status("Checkout failed: " + (r.error || "?"));
+  } catch {
+    status("Checkout 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());
@@ -339,6 +354,7 @@ const manageView = () =>
 
 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>` : "")}
+    ${() => (aiCredits()?.ok ? html`<div class="card-x p-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-2"><strong>AI credits</strong><span class="small text-muted">${aiCredits().tier}${typeof aiCredits().creditBalanceUsd === "number" ? ` · $${aiCredits().creditBalanceUsd.toFixed(2)} left` : ""}</span></div>${aiCredits().payments ? html`<div class="d-flex gap-2 align-items-center"><span class="small text-muted me-1">Top up:</span>${[10, 25, 50].map((a) => html`<button class="btn btn-sm btn-outline-primary" onclick=${() => buyCredits(a)}>$${a}</button>`)}</div>` : html`<div class="small text-muted">Pay-as-you-go isn't enabled on the gateway yet — using the free tier.</div>`}</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>

package/templates/docs/server.js

@@ -51,7 +51,10 @@ function readEnvFile() {
   if (!fs.existsSync(ENV_PATH)) return out;
   for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
     const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
-    if (m) out[m[1]] = m[2];
+    if (m) {
+      const v = m[2];
+      out[m[1]] = (v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'")) ? v.slice(1, -1) : v.replace(/(?:^|\s+)#.*$/, "");
+    }
   }
   return out;
 }
@@ -341,6 +344,42 @@ function startSetup() {
       }
       return;
     }
+    // --- AI credits: in-config purchase flow. Proxies the hosted gateway with
+    // the app's VOLT_AI_TOKEN — the buy flow lives here in the (shell-gated)
+    // config only, never in the running app. ---
+    if (req.method === "GET" && p === "/setup/ai-credits") {
+      const env = readEnvFile();
+      res.setHeader("Content-Type", "application/json");
+      if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN (BYO or unset)" }));
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/credits", { headers: { authorization: "Bearer " + env.VOLT_AI_TOKEN } })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/ai-credits/checkout") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        const env = readEnvFile();
+        res.setHeader("Content-Type", "application/json");
+        if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN" }));
+        const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+        let amountUsd = 0;
+        try {
+          amountUsd = Number(JSON.parse(cbody || "{}").amountUsd) || 0;
+        } catch {
+          /* bad json */
+        }
+        const baseUrl = env.SITE_URL || `http://localhost:${configPort()}`;
+        fetch(base + "/api/credits/checkout", { method: "POST", headers: { "content-type": "application/json", authorization: "Bearer " + env.VOLT_AI_TOKEN }, body: JSON.stringify({ amountUsd, baseUrl }) })
+          .then((r) => r.json())
+          .then((j) => res.end(JSON.stringify(j)))
+          .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      });
+      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

@@ -284,6 +284,21 @@ async function doUpgrade() {
     status("Upgrade request failed.");
   }
 }
+
+// AI credits — config-only purchase flow (gateway mode). Hidden unless a
+// VOLT_AI_TOKEN is set and the gateway answers.
+const aiCredits = signal(null); // { ok, tier, creditBalanceUsd, payments } | { ok:false }
+fetch("/setup/ai-credits").then((r) => r.json()).then((c) => aiCredits(c)).catch(() => {});
+async function buyCredits(amountUsd) {
+  status("Starting checkout…");
+  try {
+    const r = await (await fetch("/setup/ai-credits/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountUsd }) })).json();
+    if (r.ok && r.url) window.open(r.url, "_blank");
+    else status("Checkout failed: " + (r.error || "?"));
+  } catch {
+    status("Checkout 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());
@@ -339,6 +354,7 @@ const manageView = () =>
 
 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>` : "")}
+    ${() => (aiCredits()?.ok ? html`<div class="card-x p-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-2"><strong>AI credits</strong><span class="small text-muted">${aiCredits().tier}${typeof aiCredits().creditBalanceUsd === "number" ? ` · $${aiCredits().creditBalanceUsd.toFixed(2)} left` : ""}</span></div>${aiCredits().payments ? html`<div class="d-flex gap-2 align-items-center"><span class="small text-muted me-1">Top up:</span>${[10, 25, 50].map((a) => html`<button class="btn btn-sm btn-outline-primary" onclick=${() => buyCredits(a)}>$${a}</button>`)}</div>` : html`<div class="small text-muted">Pay-as-you-go isn't enabled on the gateway yet — using the free tier.</div>`}</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>

package/templates/starter/server.js

@@ -52,7 +52,10 @@ function readEnvFile() {
   if (!fs.existsSync(ENV_PATH)) return out;
   for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
     const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
-    if (m) out[m[1]] = m[2];
+    if (m) {
+      const v = m[2];
+      out[m[1]] = (v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'")) ? v.slice(1, -1) : v.replace(/(?:^|\s+)#.*$/, "");
+    }
   }
   return out;
 }
@@ -367,6 +370,42 @@ function startSetup() {
       }
       return;
     }
+    // --- AI credits: in-config purchase flow. Proxies the hosted gateway with
+    // the app's VOLT_AI_TOKEN — the buy flow lives here in the (shell-gated)
+    // config only, never in the running app. ---
+    if (req.method === "GET" && p === "/setup/ai-credits") {
+      const env = readEnvFile();
+      res.setHeader("Content-Type", "application/json");
+      if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN (BYO or unset)" }));
+      const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+      fetch(base + "/api/credits", { headers: { authorization: "Bearer " + env.VOLT_AI_TOKEN } })
+        .then((r) => r.json())
+        .then((j) => res.end(JSON.stringify(j)))
+        .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/ai-credits/checkout") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", () => {
+        const env = readEnvFile();
+        res.setHeader("Content-Type", "application/json");
+        if (!env.VOLT_AI_TOKEN) return res.end(JSON.stringify({ ok: false, error: "no VOLT_AI_TOKEN" }));
+        const base = (env.VOLT_AI_GATEWAY || "https://voltjs.com/api/ai").replace(/\/api\/ai\/?$/, "");
+        let amountUsd = 0;
+        try {
+          amountUsd = Number(JSON.parse(cbody || "{}").amountUsd) || 0;
+        } catch {
+          /* bad json */
+        }
+        const baseUrl = env.SITE_URL || `http://localhost:${configPort()}`;
+        fetch(base + "/api/credits/checkout", { method: "POST", headers: { "content-type": "application/json", authorization: "Bearer " + env.VOLT_AI_TOKEN }, body: JSON.stringify({ amountUsd, baseUrl }) })
+          .then((r) => r.json())
+          .then((j) => res.end(JSON.stringify(j)))
+          .catch(() => res.end(JSON.stringify({ ok: false, error: "gateway unreachable" })));
+      });
+      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

@@ -284,6 +284,21 @@ async function doUpgrade() {
     status("Upgrade request failed.");
   }
 }
+
+// AI credits — config-only purchase flow (gateway mode). Hidden unless a
+// VOLT_AI_TOKEN is set and the gateway answers.
+const aiCredits = signal(null); // { ok, tier, creditBalanceUsd, payments } | { ok:false }
+fetch("/setup/ai-credits").then((r) => r.json()).then((c) => aiCredits(c)).catch(() => {});
+async function buyCredits(amountUsd) {
+  status("Starting checkout…");
+  try {
+    const r = await (await fetch("/setup/ai-credits/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ amountUsd }) })).json();
+    if (r.ok && r.url) window.open(r.url, "_blank");
+    else status("Checkout failed: " + (r.error || "?"));
+  } catch {
+    status("Checkout 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());
@@ -339,6 +354,7 @@ const manageView = () =>
 
 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>` : "")}
+    ${() => (aiCredits()?.ok ? html`<div class="card-x p-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-2"><strong>AI credits</strong><span class="small text-muted">${aiCredits().tier}${typeof aiCredits().creditBalanceUsd === "number" ? ` · $${aiCredits().creditBalanceUsd.toFixed(2)} left` : ""}</span></div>${aiCredits().payments ? html`<div class="d-flex gap-2 align-items-center"><span class="small text-muted me-1">Top up:</span>${[10, 25, 50].map((a) => html`<button class="btn btn-sm btn-outline-primary" onclick=${() => buyCredits(a)}>$${a}</button>`)}</div>` : html`<div class="small text-muted">Pay-as-you-go isn't enabled on the gateway yet — using the free tier.</div>`}</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>