create-volt 0.48.2 → 0.49.0

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.49.0] - 2026-06-29
+
+### Added
+- **AI in the config editor.** The embedded RTEPro editor's AI button now works:
+  a new `/setup/ai` proxy injects the `.env` provider key server-side
+  (Anthropic / OpenAI / Gemini, BYO) and RTEPro is wired to it via aiProxy. The
+  key never reaches the browser. (Set ANTHROPIC_API_KEY etc. in the app's .env.)
+
+## [0.48.3] - 2026-06-29
+
+### Fixed
+- **Unreadable text in the dark config.** The wizard never set Bootstrap's
+  `data-bs-theme`, so muted/secondary text (feature descriptions, hints) was
+  colored for a light background and vanished on the dark cards. It now tracks the
+  light/dark toggle, so all Bootstrap text is readable in both modes.
+
 ## [0.48.2] - 2026-06-29
 
 ### Changed
@@ -641,6 +657,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.49.0]: https://github.com/MIR-2025/volt/releases/tag/v0.49.0
+[0.48.3]: https://github.com/MIR-2025/volt/releases/tag/v0.48.3
 [0.48.2]: https://github.com/MIR-2025/volt/releases/tag/v0.48.2
 [0.48.1]: https://github.com/MIR-2025/volt/releases/tag/v0.48.1
 [0.48.0]: https://github.com/MIR-2025/volt/releases/tag/v0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-volt",
-  "version": "0.48.2",
+  "version": "0.49.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

@@ -344,6 +344,47 @@ function startSetup() {
       }
       return;
     }
+    // --- AI proxy for the in-config editor (RTEPro). Injects the .env provider
+    // key server-side (never reaches the browser). BYO keys; RTEPro POSTs a
+    // provider-native body with a _provider field. ---
+    if (req.method === "POST" && p === "/setup/ai") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", async () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const env = readEnvFile();
+          const body = JSON.parse(cbody || "{}");
+          const provider = body._provider || env.AI_PROVIDER || "anthropic";
+          delete body._provider;
+          let url, headers;
+          if (provider === "anthropic") {
+            if (!env.ANTHROPIC_API_KEY) throw new Error("ANTHROPIC_API_KEY not set in .env");
+            url = "https://api.anthropic.com/v1/messages";
+            headers = { "x-api-key": env.ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", "content-type": "application/json" };
+          } else if (provider === "openai") {
+            if (!env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY not set in .env");
+            url = "https://api.openai.com/v1/chat/completions";
+            headers = { authorization: "Bearer " + env.OPENAI_API_KEY, "content-type": "application/json" };
+          } else if (provider === "gemini") {
+            if (!env.GEMINI_API_KEY) throw new Error("GEMINI_API_KEY not set in .env");
+            const model = body.model || "gemini-2.0-flash";
+            delete body.model;
+            url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${env.GEMINI_API_KEY}`;
+            headers = { "content-type": "application/json" };
+          } else throw new Error("unknown AI provider: " + provider);
+          const r = await fetch(url, { method: "POST", headers, body: JSON.stringify(body) });
+          const text = await r.text();
+          res.statusCode = r.status;
+          res.setHeader("Content-Type", r.headers.get("content-type") || "application/json");
+          res.end(text);
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: e.message }));
+        }
+      });
+      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. ---

package/templates/blog/setup/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,7 +31,7 @@
     (function () {
       const root = document.documentElement;
       const btn = document.getElementById("theme-toggle");
-      const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
+      const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
       apply(localStorage.getItem("volt-setup-theme") || "dark");
       btn.addEventListener("click", () => {
         const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";

package/templates/blog/setup/setup.js

@@ -317,7 +317,7 @@ function parseDoc(raw) {
   return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
 }
 function mountEditor(doc) {
-  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…", aiProxy: "/setup/ai", aiProvider: state().aiProvider || "anthropic" });
   if (doc && doc.isHtml) ed.setHTML(doc.body || "");
   else ed.setMarkdown((doc && doc.body) || "");
 }

package/templates/default/server.js

@@ -344,6 +344,47 @@ function startSetup() {
       }
       return;
     }
+    // --- AI proxy for the in-config editor (RTEPro). Injects the .env provider
+    // key server-side (never reaches the browser). BYO keys; RTEPro POSTs a
+    // provider-native body with a _provider field. ---
+    if (req.method === "POST" && p === "/setup/ai") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", async () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const env = readEnvFile();
+          const body = JSON.parse(cbody || "{}");
+          const provider = body._provider || env.AI_PROVIDER || "anthropic";
+          delete body._provider;
+          let url, headers;
+          if (provider === "anthropic") {
+            if (!env.ANTHROPIC_API_KEY) throw new Error("ANTHROPIC_API_KEY not set in .env");
+            url = "https://api.anthropic.com/v1/messages";
+            headers = { "x-api-key": env.ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", "content-type": "application/json" };
+          } else if (provider === "openai") {
+            if (!env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY not set in .env");
+            url = "https://api.openai.com/v1/chat/completions";
+            headers = { authorization: "Bearer " + env.OPENAI_API_KEY, "content-type": "application/json" };
+          } else if (provider === "gemini") {
+            if (!env.GEMINI_API_KEY) throw new Error("GEMINI_API_KEY not set in .env");
+            const model = body.model || "gemini-2.0-flash";
+            delete body.model;
+            url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${env.GEMINI_API_KEY}`;
+            headers = { "content-type": "application/json" };
+          } else throw new Error("unknown AI provider: " + provider);
+          const r = await fetch(url, { method: "POST", headers, body: JSON.stringify(body) });
+          const text = await r.text();
+          res.statusCode = r.status;
+          res.setHeader("Content-Type", r.headers.get("content-type") || "application/json");
+          res.end(text);
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: e.message }));
+        }
+      });
+      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. ---

package/templates/default/setup/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,7 +31,7 @@
     (function () {
       const root = document.documentElement;
       const btn = document.getElementById("theme-toggle");
-      const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
+      const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
       apply(localStorage.getItem("volt-setup-theme") || "dark");
       btn.addEventListener("click", () => {
         const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";

package/templates/default/setup/setup.js

@@ -317,7 +317,7 @@ function parseDoc(raw) {
   return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
 }
 function mountEditor(doc) {
-  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…", aiProxy: "/setup/ai", aiProvider: state().aiProvider || "anthropic" });
   if (doc && doc.isHtml) ed.setHTML(doc.body || "");
   else ed.setMarkdown((doc && doc.body) || "");
 }

package/templates/docs/server.js

@@ -344,6 +344,47 @@ function startSetup() {
       }
       return;
     }
+    // --- AI proxy for the in-config editor (RTEPro). Injects the .env provider
+    // key server-side (never reaches the browser). BYO keys; RTEPro POSTs a
+    // provider-native body with a _provider field. ---
+    if (req.method === "POST" && p === "/setup/ai") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", async () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const env = readEnvFile();
+          const body = JSON.parse(cbody || "{}");
+          const provider = body._provider || env.AI_PROVIDER || "anthropic";
+          delete body._provider;
+          let url, headers;
+          if (provider === "anthropic") {
+            if (!env.ANTHROPIC_API_KEY) throw new Error("ANTHROPIC_API_KEY not set in .env");
+            url = "https://api.anthropic.com/v1/messages";
+            headers = { "x-api-key": env.ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", "content-type": "application/json" };
+          } else if (provider === "openai") {
+            if (!env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY not set in .env");
+            url = "https://api.openai.com/v1/chat/completions";
+            headers = { authorization: "Bearer " + env.OPENAI_API_KEY, "content-type": "application/json" };
+          } else if (provider === "gemini") {
+            if (!env.GEMINI_API_KEY) throw new Error("GEMINI_API_KEY not set in .env");
+            const model = body.model || "gemini-2.0-flash";
+            delete body.model;
+            url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${env.GEMINI_API_KEY}`;
+            headers = { "content-type": "application/json" };
+          } else throw new Error("unknown AI provider: " + provider);
+          const r = await fetch(url, { method: "POST", headers, body: JSON.stringify(body) });
+          const text = await r.text();
+          res.statusCode = r.status;
+          res.setHeader("Content-Type", r.headers.get("content-type") || "application/json");
+          res.end(text);
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: e.message }));
+        }
+      });
+      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. ---

package/templates/docs/setup/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,7 +31,7 @@
     (function () {
       const root = document.documentElement;
       const btn = document.getElementById("theme-toggle");
-      const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
+      const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
       apply(localStorage.getItem("volt-setup-theme") || "dark");
       btn.addEventListener("click", () => {
         const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";

package/templates/docs/setup/setup.js

@@ -317,7 +317,7 @@ function parseDoc(raw) {
   return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
 }
 function mountEditor(doc) {
-  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…", aiProxy: "/setup/ai", aiProvider: state().aiProvider || "anthropic" });
   if (doc && doc.isHtml) ed.setHTML(doc.body || "");
   else ed.setMarkdown((doc && doc.body) || "");
 }

package/templates/starter/server.js

@@ -370,6 +370,47 @@ function startSetup() {
       }
       return;
     }
+    // --- AI proxy for the in-config editor (RTEPro). Injects the .env provider
+    // key server-side (never reaches the browser). BYO keys; RTEPro POSTs a
+    // provider-native body with a _provider field. ---
+    if (req.method === "POST" && p === "/setup/ai") {
+      let cbody = "";
+      req.on("data", (c) => (cbody += c));
+      req.on("end", async () => {
+        res.setHeader("Content-Type", "application/json");
+        try {
+          const env = readEnvFile();
+          const body = JSON.parse(cbody || "{}");
+          const provider = body._provider || env.AI_PROVIDER || "anthropic";
+          delete body._provider;
+          let url, headers;
+          if (provider === "anthropic") {
+            if (!env.ANTHROPIC_API_KEY) throw new Error("ANTHROPIC_API_KEY not set in .env");
+            url = "https://api.anthropic.com/v1/messages";
+            headers = { "x-api-key": env.ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", "content-type": "application/json" };
+          } else if (provider === "openai") {
+            if (!env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY not set in .env");
+            url = "https://api.openai.com/v1/chat/completions";
+            headers = { authorization: "Bearer " + env.OPENAI_API_KEY, "content-type": "application/json" };
+          } else if (provider === "gemini") {
+            if (!env.GEMINI_API_KEY) throw new Error("GEMINI_API_KEY not set in .env");
+            const model = body.model || "gemini-2.0-flash";
+            delete body.model;
+            url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${env.GEMINI_API_KEY}`;
+            headers = { "content-type": "application/json" };
+          } else throw new Error("unknown AI provider: " + provider);
+          const r = await fetch(url, { method: "POST", headers, body: JSON.stringify(body) });
+          const text = await r.text();
+          res.statusCode = r.status;
+          res.setHeader("Content-Type", r.headers.get("content-type") || "application/json");
+          res.end(text);
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ error: e.message }));
+        }
+      });
+      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. ---

package/templates/starter/setup/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -31,7 +31,7 @@
     (function () {
       const root = document.documentElement;
       const btn = document.getElementById("theme-toggle");
-      const apply = (t) => { root.setAttribute("data-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
+      const apply = (t) => { root.setAttribute("data-theme", t); root.setAttribute("data-bs-theme", t); btn.textContent = t === "light" ? "Dark mode" : "Light mode"; };
       apply(localStorage.getItem("volt-setup-theme") || "dark");
       btn.addEventListener("click", () => {
         const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";

package/templates/starter/setup/setup.js

@@ -317,7 +317,7 @@ function parseDoc(raw) {
   return { title, body: fm ? raw.slice(fm[0].length) : raw, isHtml: /^format:\s*html\s*$/m.test(front) };
 }
 function mountEditor(doc) {
-  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…" });
+  ed = window.RTEPro.init("#mg-editor", { height: "60vh", placeholder: "Write…", aiProxy: "/setup/ai", aiProvider: state().aiProvider || "anthropic" });
   if (doc && doc.isHtml) ed.setHTML(doc.body || "");
   else ed.setMarkdown((doc && doc.body) || "");
 }