// ============================================================================
//  Project   : localvm-research
//  File      : web/server.js
//  Purpose   : Research showcase platform — routes and pages (English, light)
//  Author    : Simon-Pierre Boucher
//  Contact   : contact@spboucher.ai
//  Created   : 2026-08-12
//  Modified  : 2026-08-12
//  Platform  : macOS / Apple Silicon (arm64) — Node.js (deployed on MacLustr)
//  License   : All rights reserved (research code)
// ============================================================================
"use strict";

const fs = require("fs");
const path = require("path");
const express = require("express");
const C = require("./lib/content");
const R = require("./lib/render");

const app = express();
const PORT = process.env.PORT || 8120;

app.use("/static", express.static(path.join(__dirname, "public"), { maxAge: "1h" }));
app.use(express.urlencoded({ extended: false, limit: "16kb" }));

// ---- comments storage (data/ is excluded from deploy rsync — persistent) ----
const DATA_DIR = path.join(__dirname, "data");
const COMMENTS_FILE = path.join(DATA_DIR, "comments.json");
fs.mkdirSync(DATA_DIR, { recursive: true });

function readComments() {
  try {
    return JSON.parse(fs.readFileSync(COMMENTS_FILE, "utf8"));
  } catch {
    return [];
  }
}
function saveComment(entry) {
  const all = readComments();
  all.push(entry);
  fs.writeFileSync(COMMENTS_FILE, JSON.stringify(all, null, 2));
}
const lastPostByIp = new Map();

function page(res, opts) {
  res.send(R.layout({ ...opts, buildInfo: C.buildInfo() }));
}

function metaChips(data) {
  if (!data || !Object.keys(data).length) return "";
  const fields = ["document", "author", "created", "modified", "status"];
  const chips = fields
    .filter((f) => data[f])
    .map((f) => `<span class="chip"><span class="chip-k">${f}</span>${R.esc(data[f])}</span>`)
    .join("");
  return chips ? `<div class="chips">${chips}</div>` : "";
}

// ---------------------------------------------------------------- home
app.get("/", (req, res) => {
  const s = C.stats();
  const chart = C.expHChartData();
  const log = C.parseLogEntries().slice(-3).reverse();
  const phases = [
    ["Phase 1 — Literature sweep (§4.1–4.10)", "done", `${s.notes} theme notes · ${s.sources} sources`],
    ["Phase 2 — State-of-the-art map", C.exists("research/state_of_the_art.md") ? "done" : "pending", "technique taxonomy + overlap analysis"],
    ["Phase 3 — Research gaps", s.gaps ? "done" : "pending", `${s.gaps} falsifiable approaches (G01–G${String(s.gaps).padStart(2, "0")})`],
    ["Phase 4 — Candidate ranking", C.exists("research/candidate_ranking.md") ? "done" : "in progress", "10-axis scoring, 3–5 candidates"],
    ["Phases 5–6 — Framework & micro-experiments", s.experimentsDone ? "in progress" : "pending", `${s.experimentsDone}/${s.experiments} experiments completed`],
    ["Phase 7 — Candidate prototype", C.exists("experiments/candidate_01/analysis.md") ? "in progress" : "pending", "margin-gated deferred refinement, 1.7B + 32B runs"],
    ["Phase 11 — Novelty check", C.exists("research/novelty_check.md") ? "done" : "pending", "adversarial prior-art search, 45 sources"],
  ];
  const phaseHtml = phases
    .map(
      ([name, st, detail]) => `<li class="phase ${st.replace(" ", "-")}">
        <span class="phase-dot"></span><div><strong>${name}</strong><span class="phase-detail">${detail}</span></div>
        <span class="badge badge-${st.replace(" ", "-")}">${st}</span></li>`
    )
    .join("");
  const logHtml = log
    .map((e) => {
      const [when, ...rest] = e.title.split(" — ");
      const excerpt = R.markdownToHtml(e.body.split("\n").slice(0, 6).join("\n"), "research/LOG.md").html;
      return `<article class="log-entry">
      <time class="tl-time">${R.esc(rest.length ? when : "")}</time>
      <h3>${R.esc(rest.join(" — ") || when)}</h3>
      <div class="md md-compact">${excerpt}</div></article>`;
    })
    .join("");

  const body = `
<section class="hero">
  <p class="kicker">Independent systems + ML research · Apple Silicon</p>
  <h1>Running LLMs larger than memory<br>on a consumer Mac</h1>
  <p class="lede">Can an existing pretrained model be transformed <em>post-training</em> into an execution
  representation whose instantaneous working set is dramatically smaller than the full checkpoint —
  while preserving most of its capabilities? This platform exposes the complete paper trail:
  hypotheses, notes, code, benchmarks, and raw results.</p>
  <p class="lede-eq"><code>total model size ≠ resident size ≠ bytes read per token ≠ parameters required for this token</code></p>
</section>

<section class="tiles">
  <div class="tile"><span class="tile-value">${s.sources}</span><span class="tile-label">sources reviewed</span></div>
  <div class="tile"><span class="tile-value">${s.gaps}</span><span class="tile-label">research gaps identified</span></div>
  <div class="tile"><span class="tile-value">${s.experimentsDone}<span class="tile-denom">/${s.experiments}</span></span><span class="tile-label">experiments completed</span></div>
  <div class="tile"><span class="tile-value">${s.build.commits || "—"}</span><span class="tile-label">commits</span></div>
</section>

<section class="split">
  <div class="card">
    <h2>First result — the SSD substrate is not the bottleneck</h2>
    <p>Experiment H measured this Mac's internal NVMe under genuinely cold-cache conditions.
    Random reads reach the ~13.1 GB/s device ceiling at 1 MiB blocks (QD 8), while
    4 KiB single-threaded reads manage only 67 MB/s — a 200× spread that dictates the
    weight-block layout contract: <strong>≥ 256 KiB blocks at QD ≥ 4</strong>. Saturated
    Metal GPU compute costs &lt; 5%.</p>
    ${R.ssdChartSvg(chart)}
    <a class="more" href="/experiments/expH_ssd_feasibility">Experiment H: hypothesis, method, analysis →</a>
  </div>
  <div class="card">
    <h2>Research phases</h2>
    <ul class="phases">${phaseHtml}</ul>
  </div>
</section>

<section class="card">
  <div class="card-head-row"><h2>Latest from the research log</h2>
  <a class="more" href="/doc/research/LOG.md">Full research log →</a></div>
  <div class="log-grid">${logHtml}</div>
</section>`;
  page(res, { title: "Home", active: "Home", body });
});

// ---------------------------------------------------------------- research index
app.get("/research", (req, res) => {
  const docs = [
    ["research/LOG.md", "Research log", "Append-only, auditable record of every question, experiment, result, and decision."],
    ["research/state_of_the_art.md", "State of the art", "Phase 2 — technique taxonomy across six families with overlap analysis."],
    ["research/research_gaps.md", "Research gaps", "Phase 3 — falsifiable approaches with kill-numbers, G01–G24."],
    ["research/candidate_ranking.md", "Candidate ranking", "Phase 4 — 10-axis scoring and selected prototype candidates."],
    ["research/bibliography.md", "Bibliography", "Every consulted source with URL and access date."],
    ["research/novelty_check.md", "Novelty check", "Phase 11 — final novelty verification (written last)."],
  ];
  const cards = docs
    .map(([rel, title, desc]) => {
      const ok = C.exists(rel);
      return `<a class="doc-card ${ok ? "" : "disabled"}" href="${ok ? "/doc/" + rel : "#"}">
        <h3>${title}</h3><p>${desc}</p>${ok ? "" : '<span class="badge badge-pending">not yet written</span>'}</a>`;
    })
    .join("");
  const notes = (C.listDir("research/notes") || [])
    .filter((f) => f.name.endsWith(".md") && f.name !== "README.md")
    .map((f) => {
      const md = C.readMarkdown(f.rel);
      const sources = md ? (md.content.match(/^- .*http/gm) || []).length : 0;
      const lines = md ? md.content.split("\n").length : 0;
      return `<a class="doc-card" href="/doc/${f.rel}"><h3>${R.esc(f.name.replace(".md", "").replace(/_/g, " "))}</h3>
        <p>Phase 1 literature notes — ${lines} lines.</p>
        <span class="badge badge-done">${sources} sources</span></a>`;
    })
    .join("");
  const body = `<h1 class="page-title">Research documents</h1>
<div class="doc-grid">${cards}</div>
<h2 class="section-title">Phase 1 literature notes</h2>
<div class="doc-grid">${notes}</div>
<p class="note-line">The project charter itself is public: <a href="/doc/CLAUDE.md">read the full research charter</a>.</p>`;
  page(res, { title: "Research", active: "Research", body });
});

// ---------------------------------------------------------------- markdown viewer
app.get(/^\/doc\/(.+)$/, (req, res) => {
  const rel = req.params[0];
  const md = rel.endsWith(".md") ? C.readMarkdown(rel) : null;
  if (!md) return notFound(res);
  const crumb = `<p class="crumb"><a href="/research">Research</a> / ${R.esc(rel)}</p>`;

  if (rel === "research/LOG.md") {
    const entries = C.parseLogEntries();
    const body = `${crumb}
      ${R.docHeader({ ...md.data, document: "Research log" }, rel)}
      <p class="lede-small">Append-only, newest first — every question, experiment, result,
      interpretation, and decision, as required by the charter (§12). ${entries.length} entries.</p>
      ${R.logTimeline(entries, rel)}`;
    return page(res, { title: "Research log", active: "Research", body });
  }

  const { html, toc } = R.markdownToHtml(md.content, rel);
  const tocBox = R.tocHtml(toc);
  const body = `${crumb}${R.docHeader(md.data, rel)}
  <div class="doc-layout ${tocBox ? "has-toc" : ""}">
    ${tocBox}
    <article class="doc"><div class="md">${html}</div></article>
  </div>`;
  page(res, { title: md.data.document || rel, active: "Research", body });
});

// ---------------------------------------------------------------- experiments
app.get("/experiments", (req, res) => {
  const exps = C.listExperiments();
  const cards = exps
    .map(
      (e) => `<a class="doc-card" href="/experiments/${e.id}">
      <h3>${R.esc(e.id)}</h3><p>${R.esc(e.purpose)}</p>
      <span class="badge badge-${e.status === "completed" ? "done" : e.status === "has results" ? "in-progress" : "pending"}">${e.status}</span>
      ${e.runs ? `<span class="runs">${e.runs} result run${e.runs > 1 ? "s" : ""}</span>` : ""}</a>`
    )
    .join("");
  const body = `<h1 class="page-title">Experiments</h1>
<p class="lede-small">Every experiment carries a registered hypothesis with an explicit falsification criterion
(seven-field scientific block), a benchmark implementation, raw results, and an analysis. Negative results are kept.</p>
<div class="doc-grid">${cards}</div>`;
  page(res, { title: "Experiments", active: "Experiments", body });
});

app.get("/experiments/:id", (req, res) => {
  const exps = C.listExperiments();
  const exp = exps.find((e) => e.id === req.params.id);
  if (!exp) return notFound(res);
  const sections = [];
  for (const [file, title] of [["hypothesis.md", "Hypothesis"], ["analysis.md", "Analysis"], ["README.md", "README"]]) {
    const md = C.readMarkdown(path.posix.join(exp.rel, file));
    if (md && md.content.trim().length > 40) {
      sections.push(`<section class="card"><h2>${title}</h2>${metaChips(md.data)}
        <div class="md">${R.markdownToHtml(md.content, path.posix.join(exp.rel, file)).html}</div></section>`);
    }
  }
  const runs = C.listResultRuns().filter((r) => r.experiment === exp.id || r.experiment.startsWith(exp.id + "_"));
  const runsHtml = runs.length
    ? `<section class="card"><h2>Result runs</h2><ul class="file-list">` +
      runs.map((r) => r.files.map((f) => `<li><a href="/results/${f.rel}">${r.timestamp} / ${f.name}</a> <span class="mono-small">${(f.size / 1024).toFixed(1)} KiB</span></li>`).join("")).join("") +
      `</ul></section>`
    : "";
  const codeLink = C.exists(path.posix.join(exp.rel, "benchmark.py"))
    ? `<p><a class="more" href="/file/${exp.rel}/benchmark.py">View benchmark implementation (benchmark.py) →</a></p>`
    : "";
  const body = `<p class="crumb"><a href="/experiments">Experiments</a> / ${R.esc(exp.id)}</p>
<h1 class="page-title">${R.esc(exp.id)}</h1><p class="lede-small">${R.esc(exp.purpose)}</p>
${codeLink}${sections.join("")}${runsHtml}`;
  page(res, { title: exp.id, active: "Experiments", body });
});

// ---------------------------------------------------------------- results
app.get("/results", (req, res) => {
  const runs = C.listResultRuns();
  const expIds = C.listExperiments().map((e) => e.id);
  const rows = runs
    .map(
      (r) => {
        const target = expIds.find((id) => r.experiment === id || r.experiment.startsWith(id + "_"));
        const expCell = target
          ? `<a href="/experiments/${target}">${r.experiment}</a>`
          : r.experiment;
        return `<tr><td>${expCell}</td>
      <td class="mono-small">${r.timestamp}</td>
      <td>${r.files.map((f) => `<a href="/results/${f.rel}">${f.name}</a>`).join(" · ")}</td></tr>`;
      }
    )
    .join("");
  const body = `<h1 class="page-title">Raw results</h1>
<p class="lede-small">Every result is reproducible from commit hash + config + seed + hardware manifest,
and each JSON embeds the manifest of the exact machine that produced it.</p>
<table class="results-table"><thead><tr><th>Experiment</th><th>Run (UTC)</th><th>Files</th></tr></thead>
<tbody>${rows || '<tr><td colspan="3">No result runs yet.</td></tr>'}</tbody></table>`;
  page(res, { title: "Results", active: "Results", body });
});

app.get(/^\/results\/(.+)$/, (req, res) => {
  const rel = req.params[0].startsWith("results/") ? req.params[0] : "results/" + req.params[0];
  const raw = C.readText(rel);
  if (raw === null) return notFound(res);
  let bodyContent;
  if (rel.endsWith(".json")) {
    const obj = C.readJson(rel);
    bodyContent = `<pre class="codeblock"><code class="hljs">${R.highlightFile(JSON.stringify(obj, null, 2), "x.json")}</code></pre>`;
  } else {
    bodyContent = `<pre class="codeblock"><code>${R.esc(raw.slice(0, 200000))}</code></pre>`;
  }
  const body = `<p class="crumb"><a href="/results">Results</a> / ${R.esc(rel)}</p><div class="card">${bodyContent}</div>`;
  page(res, { title: rel, active: "Results", body });
});

// ---------------------------------------------------------------- code browser
const CODE_ROOTS = ["src", "tools", "benchmarks", "experiments", "Makefile", "pyproject.toml", "CITATION.cff"];
app.get("/code", (req, res) => {
  const sections = CODE_ROOTS.map((root) => {
    if (!C.exists(root)) return "";
    const st = C.listDir(root);
    if (st === null) {
      return `<li><a href="/file/${root}">${root}</a></li>`;
    }
    const files = C.walk(root, (f) => C.isTextFile(f.rel) && !f.rel.includes("results/"));
    return `<li class="tree-root"><strong>${root}/</strong><ul>` +
      files.map((f) => `<li><a href="/file/${f.rel}">${f.rel.slice(root.length + 1)}</a></li>`).join("") +
      `</ul></li>`;
  }).join("");
  const body = `<h1 class="page-title">Code</h1>
<p class="lede-small">Core library (<code>src/localvm/</code>), tooling, benchmark harness, and experiment
implementations. Every file carries the project's author header; MLX/Metal is the primary compute path — CUDA
is never a core dependency.</p>
<ul class="tree">${sections}</ul>`;
  page(res, { title: "Code", active: "Code", body });
});

app.get(/^\/file\/(.+)$/, (req, res) => {
  const rel = req.params[0];
  if (!C.isTextFile(rel)) return notFound(res);
  const raw = C.readText(rel);
  if (raw === null) return notFound(res);
  const name = rel.split("/").pop();
  const body = `<p class="crumb"><a href="/code">Code</a> / ${R.esc(rel)}</p>
<div class="card file-card"><div class="file-head"><span class="mono-small">${R.esc(rel)}</span>
<span class="mono-small">${raw.split("\n").length} lines</span></div>
<pre class="codeblock"><code class="hljs">${R.highlightFile(raw.slice(0, 400000), name)}</code></pre></div>`;
  page(res, { title: name, active: "Code", body });
});

// ---------------------------------------------------------------- about
app.get("/about", (req, res) => {
  const chart = C.expHChartData();
  const m = (chart && chart.manifest) || {};
  const chip = m.chip || {}, mem = m.memory || {}, ssd = m.ssd || {}, os = m.os || {}, sw = m.software || {};
  const hw = `
<table class="kv-table">
<tr><th>Chip</th><td>${R.esc(chip.brand || "Apple M5 Max")} — ${chip.cores_performance || 6}P + ${chip.cores_efficiency || 12}E CPU cores, ${chip.gpu_cores || 40} GPU cores</td></tr>
<tr><th>Unified memory</th><td>${mem.unified_gb || 48} GB (16 KiB pages)</td></tr>
<tr><th>Storage</th><td>${R.esc(ssd.model || "APPLE SSD AP2048Z")} ${R.esc(ssd.size || "2 TB")} — measured ceiling ≈ 13.1 GB/s (iostat-validated)</td></tr>
<tr><th>OS</th><td>macOS ${R.esc(os.version || "27.0")} (${R.esc(os.build || "")})</td></tr>
<tr><th>Stack</th><td>Python ${R.esc(sw.python || "3.14")}, MLX ${R.esc(sw.mlx || "0.32")}, PyTorch ${R.esc(sw.torch || "2.12")} (MPS), Metal</td></tr>
</table>`;
  const body = `<h1 class="page-title">About this project</h1>
<div class="card md">
<p><strong>localvm-research</strong> is an independent research project by
<strong>Simon-Pierre Boucher</strong> (<a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>) investigating
whether pretrained large language models that normally do not fit in a consumer Mac's memory can be transformed —
strictly <em>post-training</em> — into execution representations with dramatically smaller instantaneous working sets.</p>
<p>The methodology is deliberately strict: an append-only research log, registered hypotheses with explicit
falsification criteria before any experiment runs, no results reported from uncommitted code, hardware manifests
embedded in every result file, and negative results kept and published. The full methodology is codified in the
<a href="/doc/CLAUDE.md">research charter</a>.</p>
<h2>Primary research hardware</h2>${hw}
<h2>What would count as a breakthrough</h2>
<ul>
<li>A model significantly larger than unified memory running locally with acceptable interactive latency.</li>
<li>Bytes transferred per token substantially smaller than the compressed checkpoint.</li>
<li>Evidence that only a small token-dependent fraction of model information is required during typical inference.</li>
<li>A progressive/conditional execution mechanism that preserves quality while avoiding most weight loading.</li>
<li>A post-training representation with a qualitatively better storage/RAM/quality tradeoff than fixed quantization.</li>
</ul>
<p>Failure is an acceptable outcome — the project's charter defines explicit failure criteria, and the log records
why an approach died, not just what survived.</p>
</div>`;
  page(res, { title: "About", active: "About", body });
});

// ---------------------------------------------------------------- publications
app.get("/publications", (req, res) => {
  const pubs = (C.listDir("docs/publications") || [])
    .filter((f) => f.name.endsWith(".md"))
    .map((f) => {
      const md = C.readMarkdown(f.rel);
      const abstract = (md.content.split(/## Abstract/i)[1] || "").trim().split("\n\n")[0] || "";
      return { rel: f.rel, data: md.data, abstract };
    })
    .sort((a, b) => String(b.data.created).localeCompare(String(a.data.created)));
  const cards = pubs.length ? pubs.map((p) => `
    <a class="pub-card" href="/doc/${p.rel}">
      <div class="pub-meta"><span class="badge badge-done">${R.esc(p.data.number || "report")}</span>
      <span class="mono-small">${R.esc(p.data.created || "")}</span>
      <span class="badge badge-${p.data.status === "final" ? "done" : "in-progress"}">${R.esc(p.data.status || "draft")}</span></div>
      <h2>${R.esc(p.data.title || p.rel)}</h2>
      <p class="pub-authors">${R.esc(p.data.author || "")}</p>
      <p class="pub-abstract">${R.esc(p.abstract.slice(0, 420))}${p.abstract.length > 420 ? "…" : ""}</p>
      <span class="more">Read the full report →</span>
    </a>`).join("") : "<p class='lede-small'>No publications yet.</p>";
  const body = `<h1 class="page-title">Publications</h1>
<p class="lede-small">Official write-ups of the project's results to date — every number traceable
to a committed result file with hardware manifest, every figure regenerated from raw data.</p>
<div class="pub-list">${cards}</div>`;
  page(res, { title: "Publications", active: "Publications", body });
});

// raw asset serving (figures referenced by publications)
app.get(/^\/raw\/(.+)$/, (req, res) => {
  const rel = req.params[0];
  const ext = path.extname(rel).toLowerCase();
  const types = { ".svg": "image/svg+xml", ".png": "image/png", ".jpg": "image/jpeg" };
  const abs = C.safeResolve(rel);
  if (!abs || !types[ext] || !require("fs").existsSync(abs)) return notFound(res);
  res.type(types[ext]).sendFile(abs);
});

// ---------------------------------------------------------------- comments
app.get("/comments", (req, res) => {
  const AVATAR_COLORS = ["#2a78d6", "#eb6834", "#1baf7a", "#4a3aa7", "#e87ba4", "#008300"];
  const comments = readComments().slice().reverse();
  const list = comments.length
    ? comments.map((c) => {
        const initial = (c.name || "?").trim()[0].toUpperCase();
        const hue = AVATAR_COLORS[[...String(c.name)].reduce((a, ch) => a + ch.charCodeAt(0), 0) % AVATAR_COLORS.length];
        return `<article class="comment">
        <span class="avatar" style="background:${hue}">${R.esc(initial)}</span>
        <div class="comment-main">
          <div class="comment-head"><span class="comment-name">${R.esc(c.name)}</span>
          <time class="comment-time">${R.esc((c.ts || "").slice(0, 16).replace("T", " "))} UTC</time></div>
          <p class="comment-body">${R.esc(c.message)}</p>
        </div>
      </article>`;
      }).join("")
    : `<div class="empty-state">
        <span class="empty-icon">💬</span>
        <p>No comments yet — be the first to leave one.</p>
      </div>`;
  const posted = req.query.posted ? `<div class="flash">Thanks — your comment is posted.</div>` : "";
  const err = req.query.err ? `<div class="flash flash-err">${R.esc(String(req.query.err))}</div>` : "";
  const body = `<div class="comments-wrap">
<h1 class="page-title">Discussion</h1>
<p class="lede-small">Questions, critiques, pointers to prior art we missed, replication reports —
all welcome. Comments are public; no account, no tracking.</p>
${posted}${err}
<form class="comment-form" method="POST" action="/comments">
  <div class="cf-head">Leave a comment</div>
  <div class="cf-body">
    <label class="field">
      <span class="field-label">Name</span>
      <input name="name" maxlength="60" required placeholder="Your name" autocomplete="name">
    </label>
    <label class="field">
      <span class="field-label">Comment</span>
      <textarea name="message" maxlength="2000" rows="5" required
        placeholder="Feedback, prior art, questions…"></textarea>
    </label>
    <input type="text" name="website" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true">
    <div class="cf-foot">
      <span class="cf-hint">Stored on this server only · moderated after the fact</span>
      <button type="submit" class="btn">Post comment</button>
    </div>
  </div>
</form>
<section class="comment-list">
  <div class="cl-head">
    <h2>${comments.length} comment${comments.length === 1 ? "" : "s"}</h2>
  </div>
  ${list}
</section>
</div>`;
  page(res, { title: "Comments", active: "Comments", body });
});

app.post("/comments", (req, res) => {
  const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress || "?";
  const name = String(req.body.name || "").trim().slice(0, 60);
  const message = String(req.body.message || "").trim().slice(0, 2000);
  if (String(req.body.website || "").length) return res.redirect("/comments?posted=1"); // honeypot
  if (!name || message.length < 3) return res.redirect("/comments?err=Name and comment are required.");
  const last = lastPostByIp.get(ip) || 0;
  if (Date.now() - last < 30_000) return res.redirect("/comments?err=Please wait a moment between comments.");
  lastPostByIp.set(ip, Date.now());
  saveComment({ name, message, ts: new Date().toISOString() });
  res.redirect("/comments?posted=1");
});

// ---------------------------------------------------------------- misc
app.get("/health", (req, res) => res.json({ ok: true, app: "localvm-web", author: "Simon-Pierre Boucher" }));

function notFound(res) {
  res.status(404);
  page(res, { title: "Not found", active: "", body: `<div class="card"><h1>404</h1><p>That page does not exist. <a href="/">Back to home</a>.</p></div>` });
}
app.use((req, res) => notFound(res));

app.listen(PORT, () => console.log(`localvm-web listening on :${PORT}`));