create-volt 0.42.0 → 0.44.0

package/templates/starter/server.js

@@ -14,6 +14,7 @@ import path from "node:path";
 import crypto from "node:crypto";
 import { spawn, spawnSync } from "node:child_process";
 import { fileURLToPath, pathToFileURL } from "node:url";
+import os from "node:os";
 import express from "express";
 import { Server as SocketServer } from "socket.io";
 
@@ -338,6 +339,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) => {
@@ -612,6 +641,117 @@ async function startStudio() {
   });
 }
 
+// --- `--logs`: a disposable, localhost-only log viewer (its own port, like
+// --studio). Tails pm2 stdout/stderr; with mir-sentinel installed, an Analytics
+// tab parses Apache/nginx access logs (ACCESS_LOG). Shell access is the auth;
+// for a remote box, SSH-tunnel the port. ---
+async function startLogs() {
+  loadEnv();
+  const PORT = configPort();
+  const name = (() => {
+    try {
+      return JSON.parse(fs.readFileSync(PKG_PATH, "utf8")).name || "app";
+    } catch {
+      return "app";
+    }
+  })();
+  const logsDir = path.join(os.homedir(), ".pm2", "logs");
+  // Sources: pm2 stdout/stderr work out of the box; ACCESS_LOG adds an Apache/nginx
+  // log; users add more (other apps/servers/mounted or tunneled paths) via
+  // .volt/logs.json, editable here in the viewer. Re-read per request so additions
+  // show live. For a remote box, ship its log here or SSH-tunnel + run --logs there.
+  const LOGS_JSON = path.join(__dirname, ".volt", "logs.json");
+  const readExtra = () => {
+    try {
+      const a = JSON.parse(fs.readFileSync(LOGS_JSON, "utf8"));
+      return Array.isArray(a) ? a.filter((x) => x && x.label && x.file) : [];
+    } catch {
+      return [];
+    }
+  };
+  const sources = () => {
+    const s = { app: path.join(logsDir, `${name}-out.log`), error: path.join(logsDir, `${name}-error.log`) };
+    if (process.env.ACCESS_LOG) s.access = process.env.ACCESS_LOG;
+    for (const x of readExtra()) s[x.label] = x.file;
+    return s;
+  };
+  const tail = (f, n) => (f && fs.existsSync(f) ? fs.readFileSync(f, "utf8").split(/\r?\n/).filter(Boolean).slice(-n) : []);
+  let parseLine = null;
+  try {
+    parseLine = (await import("mir-sentinel")).parseLine;
+  } catch {
+    /* analytics optional */
+  }
+  const top = (arr, key) => {
+    const m = {};
+    for (const x of arr) if (x && x[key]) m[x[key]] = (m[x[key]] || 0) + 1;
+    return Object.entries(m).sort((a, b) => b[1] - a[1]).slice(0, 10);
+  };
+  const assets = {
+    "/": ["text/html; charset=utf-8", fs.readFileSync(path.join(__dirname, "setup", "logs.html"))],
+    "/logs.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "setup", "logs.js"))],
+  };
+  const json = (res, o) => {
+    res.setHeader("Content-Type", "application/json");
+    res.end(JSON.stringify(o));
+  };
+  const server = http.createServer((req, res) => {
+    const u = new URL(req.url, "http://localhost");
+    const p = u.pathname;
+    if (assets[p]) {
+      res.setHeader("Content-Type", assets[p][0]);
+      return res.end(assets[p][1]);
+    }
+    if (p === "/api/sources") return json(res, { sources: Object.keys(sources()), extra: readExtra(), analytics: !!parseLine });
+    if (p === "/api/tail") {
+      const f = sources()[u.searchParams.get("source")];
+      return f ? json(res, { ok: true, lines: tail(f, Math.min(2000, Number(u.searchParams.get("lines")) || 300)) }) : json(res, { ok: false });
+    }
+    if (p === "/api/analytics") {
+      if (!parseLine) return json(res, { ok: false, error: "npm i mir-sentinel for analytics" });
+      const f = sources()[u.searchParams.get("source")];
+      if (!f) return json(res, { ok: false });
+      const parsed = tail(f, 5000).map((l) => parseLine(l));
+      return json(res, { ok: true, total: parsed.length, paths: top(parsed, "path"), statuses: top(parsed, "status"), ips: top(parsed, "ip"), bots: parsed.filter((x) => x && x.bot).length, attacks: parsed.filter((x) => x && x.attack).length });
+    }
+    // add/remove a source ("add servers") — written to .volt/logs.json
+    if (req.method === "POST" && (p === "/api/source" || p === "/api/source/remove")) {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        try {
+          const { label, file } = JSON.parse(body || "{}");
+          if (!/^[a-z0-9][a-z0-9 _-]*$/i.test(label || "")) throw new Error("label: letters, numbers, spaces, - _");
+          let list = readExtra().filter((x) => x.label !== label);
+          if (p === "/api/source") list.push({ label, file: String(file || "") });
+          fs.mkdirSync(path.dirname(LOGS_JSON), { recursive: true });
+          fs.writeFileSync(LOGS_JSON, JSON.stringify(list, null, 2));
+          json(res, { ok: true });
+        } catch (e) {
+          res.statusCode = 400;
+          json(res, { ok: false, error: e.message });
+        }
+      });
+      return;
+    }
+    res.statusCode = 404;
+    res.end("not found");
+  });
+  server.on("error", (e) => {
+    if (e.code === "EADDRINUSE") {
+      console.error(`\n[volt] Logs port ${PORT} is in use — set CONFIG_PORT in .env or pass --port <n>.`);
+      process.exit(1);
+    }
+    throw e;
+  });
+  server.listen(PORT, "127.0.0.1", () => {
+    const url = `http://localhost:${PORT}`;
+    console.log(`\nVolt logs at ${url}   (${parseLine ? "analytics on" : "raw tail — npm i mir-sentinel for analytics"})`);
+    console.log("  localhost only; for a remote box: ssh -L " + PORT + ":localhost:" + PORT + " you@server");
+    openBrowser(url);
+  });
+}
+
 // --- gate: studio / setup (first run, --edit) / the app ---
 const editMode = process.argv.includes("--edit") || process.argv.includes("-e");
 // In production / on a PaaS there's no interactive wizard: config comes from the
@@ -620,6 +760,8 @@ const editMode = process.argv.includes("--edit") || process.argv.includes("-e");
 const configured = fs.existsSync(ENV_PATH) || process.env.VOLT_ADDONS != null || process.env.NODE_ENV === "production";
 if (process.argv.includes("--studio")) {
   startStudio();
+} else if (process.argv.includes("--logs")) {
+  startLogs();
 } else if (editMode || !configured) {
   startSetup();
 } else {

package/templates/starter/setup/logs.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Logs — Volt</title><meta name="robots" content="noindex" /><link rel="icon" href="/favicon.webp" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <style>body{background:#0f1115;color:#e7e9ee}pre{background:#0b0d11;color:#cfe3ff;border:1px solid #232a36;border-radius:8px;padding:12px;max-height:72vh;overflow:auto;font-size:12.5px;white-space:pre-wrap}</style>
+</head>
+<body>
+  <div class="container-fluid py-3">
+    <div class="d-flex gap-2 align-items-center mb-2 flex-wrap">
+      <strong class="me-2">Volt logs</strong>
+      <select id="src" class="form-select form-select-sm" style="max-width:200px"></select>
+      <select id="view" class="form-select form-select-sm" style="max-width:160px"><option value="tail">Raw tail</option><option value="analytics">Analytics</option></select>
+      <button id="refresh" class="btn btn-sm btn-outline-secondary">Refresh</button>
+      <button id="toggleadd" class="btn btn-sm btn-outline-secondary" title="Add another log source (server, app, mounted/tunneled path)">+ source</button>
+      <label class="form-check-label small ms-1"><input id="follow" type="checkbox" class="form-check-input" /> follow</label>
+      <input id="filter" class="form-control form-control-sm ms-auto" style="max-width:240px" placeholder="filter…" />
+    </div>
+    <div id="addbar" class="d-flex gap-2 mb-2" style="display:none">
+      <input id="newlabel" class="form-control form-control-sm" style="max-width:160px" placeholder="label (e.g. prod)" />
+      <input id="newfile" class="form-control form-control-sm" style="max-width:420px" placeholder="/var/log/nginx/access.log  (local, mounted, or shipped path)" />
+      <button id="addsrc" class="btn btn-sm btn-primary">Add</button>
+    </div>
+    <div id="out"></div>
+  </div>
+  <script type="module" src="/logs.js"></script>
+</body>
+</html>

package/templates/starter/setup/logs.js

@@ -0,0 +1,58 @@
+// logs.js — the --logs viewer client (raw tail + mir-sentinel analytics).
+const $ = (s) => document.querySelector(s);
+const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+let timer = null;
+
+async function loadSources() {
+  const { sources = [] } = await (await fetch("/api/sources")).json();
+  $("#src").innerHTML = sources.map((s) => `<option value="${esc(s)}">${esc(s)}</option>`).join("") || `<option>(no logs found)</option>`;
+}
+
+async function render() {
+  const src = $("#src").value;
+  if (!src) return;
+  if ($("#view").value === "analytics") {
+    const a = await (await fetch(`/api/analytics?source=${encodeURIComponent(src)}`)).json();
+    if (!a.ok) {
+      $("#out").innerHTML = `<div class="text-muted small">${esc(a.error || "no analytics")}</div>`;
+      return;
+    }
+    const tbl = (title, rows) => `<h6 class="mt-3">${title}</h6><table class="table table-dark table-sm mb-0"><tbody>${(rows || []).map(([k, v]) => `<tr><td>${esc(String(k))}</td><td class="text-end">${v}</td></tr>`).join("")}</tbody></table>`;
+    $("#out").innerHTML = `<div class="small text-muted mb-2">${a.total} lines · ${a.bots} bot · ${a.attacks} attack</div>` + tbl("Top paths", a.paths) + tbl("Status codes", a.statuses) + tbl("Top IPs", a.ips);
+  } else {
+    const { lines = [] } = await (await fetch(`/api/tail?source=${encodeURIComponent(src)}&lines=400`)).json();
+    const filter = $("#filter").value.toLowerCase();
+    const shown = filter ? lines.filter((l) => l.toLowerCase().includes(filter)) : lines;
+    const pre = document.createElement("pre");
+    pre.textContent = shown.join("\n") || "(empty)";
+    $("#out").innerHTML = "";
+    $("#out").appendChild(pre);
+    pre.scrollTop = pre.scrollHeight;
+  }
+}
+
+$("#toggleadd").onclick = () => {
+  const b = $("#addbar");
+  b.style.display = b.style.display === "none" ? "flex" : "none";
+};
+$("#addsrc").onclick = async () => {
+  const label = $("#newlabel").value.trim();
+  const file = $("#newfile").value.trim();
+  if (!label || !file) return;
+  const r = await (await fetch("/api/source", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label, file }) })).json();
+  if (!r.ok) return alert(r.error || "could not add source");
+  $("#newlabel").value = $("#newfile").value = "";
+  $("#addbar").style.display = "none";
+  await loadSources();
+  $("#src").value = label;
+  render();
+};
+$("#refresh").onclick = render;
+$("#src").onchange = render;
+$("#view").onchange = render;
+$("#filter").oninput = render;
+$("#follow").onchange = (e) => {
+  clearInterval(timer);
+  if (e.target.checked) timer = setInterval(render, 3000);
+};
+loadSources().then(render);

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))}