create-volt 0.43.0 → 0.44.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.44.0] - 2026-06-29
+
+### Added
+- **`--logs` — a built-in log viewer** on its own localhost port (like `--studio`):
+  `npm run logs`. Tails pm2 stdout/stderr **out of the box**; an Analytics tab
+  parses Apache/nginx access logs via `mir-sentinel` (optional dep) → top
+  paths/status/IPs + bot/attack counts. **Add more sources** (other apps, servers,
+  mounted/tunneled paths) right in the viewer — saved to `.volt/logs.json`.
+  Localhost-only; SSH-tunnel the port for a remote box.
+
 ## [0.43.0] - 2026-06-30
 
 ### Added
@@ -574,6 +584,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.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
 [0.41.0]: https://github.com/MIR-2025/volt/releases/tag/v0.41.0

package/package.json

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

package/templates/blog/package.json

@@ -11,7 +11,8 @@
     "pm2": "npx --yes pm2 start ecosystem.config.cjs",
     "pm2:restart": "npx --yes pm2 restart ecosystem.config.cjs",
     "pm2:stop": "npx --yes pm2 delete ecosystem.config.cjs",
-    "pm2:logs": "npx --yes pm2 logs"
+    "pm2:logs": "npx --yes pm2 logs",
+    "logs": "node server.js --logs"
   },
   "dependencies": {
     "express": "^4.22.2",

package/templates/blog/server.js

@@ -13,6 +13,7 @@ import fs from "node:fs";
 import path from "node:path";
 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";
 
@@ -614,7 +615,118 @@ async function startStudio() {
   });
 }
 
-// --- gate: studio / setup (first run, --edit) / the app ---
+// --- `--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 / logs / 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
 // platform's env vars (a Dockerfile sets NODE_ENV=production). Only fall back to
@@ -622,6 +734,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/blog/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/blog/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/default/package.json

@@ -11,7 +11,8 @@
     "pm2": "npx --yes pm2 start ecosystem.config.cjs",
     "pm2:restart": "npx --yes pm2 restart ecosystem.config.cjs",
     "pm2:stop": "npx --yes pm2 delete ecosystem.config.cjs",
-    "pm2:logs": "npx --yes pm2 logs"
+    "pm2:logs": "npx --yes pm2 logs",
+    "logs": "node server.js --logs"
   },
   "dependencies": {
     "express": "^4.22.2",

package/templates/default/server.js

@@ -13,6 +13,7 @@ import fs from "node:fs";
 import path from "node:path";
 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";
 
@@ -614,7 +615,118 @@ async function startStudio() {
   });
 }
 
-// --- gate: studio / setup (first run, --edit) / the app ---
+// --- `--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 / logs / 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
 // platform's env vars (a Dockerfile sets NODE_ENV=production). Only fall back to
@@ -622,6 +734,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/default/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/default/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/docs/package.json

@@ -11,7 +11,8 @@
     "pm2": "npx --yes pm2 start ecosystem.config.cjs",
     "pm2:restart": "npx --yes pm2 restart ecosystem.config.cjs",
     "pm2:stop": "npx --yes pm2 delete ecosystem.config.cjs",
-    "pm2:logs": "npx --yes pm2 logs"
+    "pm2:logs": "npx --yes pm2 logs",
+    "logs": "node server.js --logs"
   },
   "dependencies": {
     "express": "^4.22.2",

package/templates/docs/server.js

@@ -13,6 +13,7 @@ import fs from "node:fs";
 import path from "node:path";
 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";
 
@@ -614,7 +615,118 @@ async function startStudio() {
   });
 }
 
-// --- gate: studio / setup (first run, --edit) / the app ---
+// --- `--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 / logs / 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
 // platform's env vars (a Dockerfile sets NODE_ENV=production). Only fall back to
@@ -622,6 +734,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/docs/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/docs/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/package.json

@@ -11,7 +11,8 @@
     "pm2": "npx --yes pm2 start ecosystem.config.cjs",
     "pm2:restart": "npx --yes pm2 restart ecosystem.config.cjs",
     "pm2:stop": "npx --yes pm2 delete ecosystem.config.cjs",
-    "pm2:logs": "npx --yes pm2 logs"
+    "pm2:logs": "npx --yes pm2 logs",
+    "logs": "node server.js --logs"
   },
   "dependencies": {
     "express": "^4.22.2",

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";
 
@@ -640,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
@@ -648,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);