feat(infra): Phase 0 provisioning + dev status dashboard

- scripts/phase0-provision.sh: idempotent root setup (nginx, PostgreSQL, Redis, certbot/TLS, UFW). Opens 22/2222/80/443 before enabling UFW so SSH and Gitea git-SSH can't be locked out. Redis/Postgres stay localhost-only. - infra/nginx/feedthepyre.com.conf: vhost serving the status page; commented web(:3000)/api(:4000) reverse-proxy blocks ready for app deploy. - infra/status/: data-driven dev status dashboard (status.json + gen-status.mjs + prebuilt index.html), served at feedthepyre.com. - ecosystem.config.cjs (PM2), infra/systemd/pm2-pyre.service, infra/logrotate/pyre, scripts/backup.sh — process mgmt + ops (inert until apps are built). Built by 4 parallel agents, reviewed by 2 audit agents; audit fixes applied (logs dir creation, port-citation accuracy, status truthfulness). pm2 installed user-level. Privileged steps gated on `sudo bash scripts/phase0-provision.sh`. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-05-31 02:34:13 +00:00
parent c20094ab56
commit 571e5d04d2
13 changed files with 1629 additions and 0 deletions
--- a/scripts/gen-status.mjs
+++ b/scripts/gen-status.mjs
@@ -0,0 +1,256 @@
+#!/usr/bin/env node
+// PYRE status dashboard generator.
+// Dependency-free: reads ../infra/status/status.json (relative to this file)
+// and renders ../infra/status/index.html.
+//
+// Usage (from repo root):  node scripts/gen-status.mjs
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const dataPath = resolve(__dirname, "../infra/status/status.json");
+const outPath = resolve(__dirname, "../infra/status/index.html");
+
+/** Escape a string for safe insertion into HTML text/attribute context. */
+function esc(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+const data = JSON.parse(readFileSync(dataPath, "utf8"));
+
+// --- compute overall % complete from item done-counts ---
+let totalItems = 0;
+let doneItems = 0;
+for (const phase of data.phases) {
+  for (const item of phase.items) {
+    totalItems += 1;
+    if (item.done) doneItems += 1;
+  }
+}
+const overallPct = totalItems === 0 ? 0 : Math.round((doneItems / totalItems) * 100);
+
+// --- state badge helpers ---
+const STATE_LABEL = {
+  done: "DONE",
+  in_progress: "IN PROGRESS",
+  todo: "TODO",
+};
+function stateLabel(state) {
+  return STATE_LABEL[state] || String(state).toUpperCase();
+}
+
+function renderItems(items) {
+  return items
+    .map((item) => {
+      const cls = item.done ? "item done" : "item";
+      const mark = item.done ? "✓" : "○"; // ✓ / ○
+      return `        <li class="${cls}"><span class="mark">${mark}</span><span>${esc(item.label)}</span></li>`;
+    })
+    .join("\n");
+}
+
+function renderPhase(phase) {
+  const doneCount = phase.items.filter((i) => i.done).length;
+  const stateClass = esc(phase.state);
+  return `      <article class="card ${stateClass}">
+      <header class="card-head">
+        <h3><span class="phase-id">Phase ${esc(phase.id)}</span> ${esc(phase.name)}</h3>
+        <span class="badge ${stateClass}">${esc(stateLabel(phase.state))}</span>
+      </header>
+      <p class="count">${doneCount} / ${phase.items.length} complete</p>
+      <ul class="checklist">
+${renderItems(phase.items)}
+      </ul>
+    </article>`;
+}
+
+const phasesHtml = data.phases.map(renderPhase).join("\n");
+const infraHtml = renderItems(data.infra);
+const infraDone = data.infra.filter((i) => i.done).length;
+
+const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${esc(data.project)} — Status Dashboard</title>
+  <style>
+    :root {
+      --bg: #0a0a0a;
+      --panel: #141210;
+      --panel-2: #1b1815;
+      --border: #2a241e;
+      --ember: #ff5a1f;
+      --ember-soft: #ff8a4f;
+      --text: #ede6df;
+      --muted: #9a8f84;
+      --ok: #6ad17a;
+      --todo: #6b6258;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: radial-gradient(1200px 600px at 50% -200px, #1a0f08 0%, var(--bg) 60%);
+      color: var(--text);
+      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+    }
+    a { color: var(--ember-soft); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    .wrap { max-width: 1040px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
+    header.site {
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .title {
+      font-size: clamp(1.8rem, 5vw, 2.8rem);
+      margin: 0;
+      letter-spacing: 0.5px;
+      background: linear-gradient(90deg, var(--ember), var(--ember-soft));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+    .tagline { color: var(--muted); font-style: italic; margin: 0.4rem 0 1rem; }
+    .links a {
+      display: inline-block;
+      margin-right: 1rem;
+      font-size: 0.9rem;
+      border: 1px solid var(--border);
+      padding: 0.35rem 0.7rem;
+      border-radius: 6px;
+      background: var(--panel);
+    }
+    .links a:hover { border-color: var(--ember); text-decoration: none; }
+    .overall {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 1.25rem 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .overall-head {
+      display: flex; justify-content: space-between; align-items: baseline;
+      margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;
+    }
+    .overall-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
+    .overall-pct { font-size: 1.6rem; font-weight: 700; color: var(--ember); }
+    .bar {
+      height: 16px; width: 100%;
+      background: var(--panel-2);
+      border: 1px solid var(--border);
+      border-radius: 999px; overflow: hidden;
+    }
+    .bar > span {
+      display: block; height: 100%;
+      background: linear-gradient(90deg, var(--ember), var(--ember-soft));
+      box-shadow: 0 0 18px rgba(255, 90, 31, 0.6);
+    }
+    h2.section {
+      font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase;
+      color: var(--muted); margin: 2.25rem 0 1rem;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+    .card {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--todo);
+      border-radius: 10px;
+      padding: 1.1rem 1.25rem;
+    }
+    .card.in_progress { border-left-color: var(--ember); }
+    .card.done { border-left-color: var(--ok); }
+    .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
+    .card-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
+    .phase-id { color: var(--ember); font-weight: 700; display: block; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; }
+    .badge {
+      flex: none;
+      font-size: 0.65rem; letter-spacing: 1px; font-weight: 700;
+      padding: 0.25rem 0.55rem; border-radius: 999px;
+      border: 1px solid var(--border); color: var(--muted);
+      text-transform: uppercase; white-space: nowrap;
+    }
+    .badge.in_progress { color: #0a0a0a; background: var(--ember); border-color: var(--ember); }
+    .badge.done { color: #0a0a0a; background: var(--ok); border-color: var(--ok); }
+    .badge.todo { color: var(--todo); }
+    .count { color: var(--muted); font-size: 0.8rem; margin: 0.5rem 0 0.75rem; }
+    ul.checklist { list-style: none; margin: 0; padding: 0; }
+    .item { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.2rem 0; font-size: 0.92rem; color: var(--muted); }
+    .item.done { color: var(--text); }
+    .item .mark { color: var(--todo); font-weight: 700; flex: none; width: 1rem; text-align: center; }
+    .item.done .mark { color: var(--ok); }
+    .infra-panel {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 1.25rem 1.5rem;
+    }
+    .infra-panel .count { margin-top: 0; }
+    .infra-grid { columns: 2; column-gap: 2rem; }
+    @media (max-width: 520px) { .infra-grid { columns: 1; } }
+    footer.site {
+      margin-top: 3rem; padding-top: 1.5rem;
+      border-top: 1px solid var(--border);
+      color: var(--muted); font-size: 0.85rem;
+    }
+    footer.site .disclaimer { color: var(--ember-soft); margin-top: 0.35rem; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <header class="site">
+      <h1 class="title">${esc(data.project)}</h1>
+      <p class="tagline">${esc(data.tagline)}</p>
+      <nav class="links">
+        <a href="${esc(data.repo)}">Repository</a>
+        <a href="${esc(data.domain)}">${esc(data.domain.replace(/^https?:\/\//, ""))}</a>
+        <a href="../../docs/PYRE_MVP_DESIGN.md">Design Doc</a>
+      </nav>
+    </header>
+
+    <section class="overall">
+      <div class="overall-head">
+        <h2>Overall MVP Progress</h2>
+        <span class="overall-pct">${overallPct}%</span>
+      </div>
+      <div class="bar"><span style="width: ${overallPct}%"></span></div>
+      <p class="count">${doneItems} of ${totalItems} phase deliverables complete</p>
+    </section>
+
+    <h2 class="section">Development Phases</h2>
+    <div class="grid">
+${phasesHtml}
+    </div>
+
+    <h2 class="section">Infrastructure</h2>
+    <div class="infra-panel">
+      <p class="count">${infraDone} / ${data.infra.length} provisioned</p>
+      <ul class="checklist infra-grid">
+${infraHtml}
+      </ul>
+    </div>
+
+    <footer class="site">
+      <div>Last updated: ${esc(data.updated)}</div>
+      <div class="disclaimer">Static snapshot generated from status.json — not live telemetry.</div>
+    </footer>
+  </div>
+</body>
+</html>
+`;
+
+writeFileSync(outPath, html, "utf8");
+console.log(`Wrote ${outPath} (${overallPct}% complete, ${doneItems}/${totalItems} items)`);