Homepage (TDD slice 4): the pages, theme, and toggle

Red tests first, then the pages.
- tests/homepage_pages.bats: the pages reference the data + theme; no
  auto-refresh (Q41); no cursor alteration (Q28); the styling toggle strips
  to bare HTML (Q27); the footer shows the last master deployment datetime
  (Q43).
- index.html / admin.html: the user and admin pages. A grid of TUI panels,
  a summary line, the bare toggle, the deployed-at footer.
- app.js: reads status.json + services.json once (no auto-refresh), renders
  one panel per service for the page's category, the toggle, the footer.
- style.css: the terminal TUI theme (green-on-black, phosphor palette,
  scanlines) + a ?bare=1 mode that strips to unstyled HTML. No custom cursor.

Functionally verified with a Node DOM shim: 9 user panels, correct summary,
correct footer datetime.

shared/homepage/app.js

@@ -1,79 +1,76 @@
-// Dankclaw homepage status checker.
-// Loads services.json, renders cards, probes each service URL for up/down.
-(function () {
-  "use strict";
+// The homepage front end. It reads status.json and services.json once on load
+// (no auto-refresh, Q41), renders one TUI panel per service for this page's
+// category, offers the styling toggle (Q27), and shows the last master
+// deployment datetime (Q43). It never alters the user's cursor (Q28).
 
-  function probe(url, timeoutMs) {
-    // Same-origin fetch only; cross-origin will throw -> counted as checking
-    // via proxy. For LAN hostnames Caddy proxies everything, so URLs here are
-    // Caddy hostnames and fetch works same-origin.
-    var controller = new AbortController();
-    var timer = setTimeout(function () { controller.abort(); }, timeoutMs);
-    return fetch(url, { signal: controller.signal, cache: "no-store" })
-      .then(function (r) { return r.ok; })
-      .catch(function () { return false; })
-      .finally(function () { clearTimeout(timer); });
-  }
+const CATEGORY = window.location.pathname.indexOf('/admin') !== -1 ? 'admin' : 'user';
 
-  function card(svc) {
-    var el = document.createElement("article");
-    el.className = "card";
+function load(url) {
+    return fetch(url, { cache: 'no-store' }).then(function (r) { return r.json(); });
+}
 
-    var top = document.createElement("div");
-    top.className = "top";
-    var badge = document.createElement("span");
-    badge.className = "badge checking";
-    badge.title = "checking";
-    var h2 = document.createElement("h2");
-    h2.textContent = svc.name;
-    top.appendChild(badge);
-    top.appendChild(h2);
-
-    var desc = document.createElement("p");
-    desc.textContent = svc.description;
-
-    var links = document.createElement("div");
-    links.className = "links";
-    var aOpen = document.createElement("a");
-    aOpen.href = svc.url;
-    aOpen.target = "_blank";
-    aOpen.rel = "noopener";
-    aOpen.textContent = "Open";
-    var aDocs = document.createElement("a");
-    aDocs.href = svc.docs;
-    aDocs.textContent = "Docs";
-    links.appendChild(aOpen);
-    links.appendChild(aDocs);
-
-    el.appendChild(top);
-    el.appendChild(desc);
-    el.appendChild(links);
-    return { el: el, badge: badge };
-  }
-
-  fetch("services.json")
-    .then(function (r) { return r.json(); })
-    .then(function (data) {
-      var grid = document.getElementById("services");
-      data.services.forEach(function (svc) {
-        var c = card(svc);
-        grid.appendChild(c.el);
-        // For the homepage itself, mark up immediately.
-        if (svc.url === "/") {
-          c.badge.className = "badge up";
-          c.badge.title = "up";
-          return;
-        }
-        probe(svc.url, 6000).then(function (ok) {
-          c.badge.className = "badge " + (ok ? "up" : "down");
-          c.badge.title = ok ? "up" : "down";
-        });
-      });
-    })
-    .catch(function (err) {
-      var grid = document.getElementById("services");
-      var p = document.createElement("p");
-      p.textContent = "Failed to load services.json: " + err.message;
-      grid.appendChild(p);
+function esc(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
     });
-})();
+}
+
+function renderPanels(services, status) {
+    const stateByName = {};
+    for (const s of (status.services || [])) stateByName[s.name] = s.state;
+
+    const grid = document.getElementById('grid');
+    grid.innerHTML = '';
+    let up = 0, down = 0, wip = 0;
+
+    for (const svc of services) {
+        if (svc.category !== CATEGORY) continue;
+        const state = svc.wip ? 'wip' : (stateByName[svc.name] || 'down');
+        if (state === 'up') up++; else if (state === 'down') down++; else wip++;
+
+        const panel = document.createElement('div');
+        panel.className = 'panel ' + state;
+        const links = [];
+        if (svc.showLink && svc.url) links.push('<a class="open" href="' + esc(svc.url) + '">open</a>');
+        if (svc.docs) links.push('<a class="docs" href="' + esc(svc.docs) + '">docs</a>');
+        panel.innerHTML =
+            '<div class="panel-head">' +
+            '  <span class="badge ' + state + '">' + state.toUpperCase() + '</span>' +
+            '  <span class="name">' + esc(svc.name) + '</span>' +
+            '</div>' +
+            '<div class="desc">' + esc(svc.description || '') + '</div>' +
+            '<div class="links">' + links.join('') + '</div>';
+        grid.appendChild(panel);
+    }
+
+    document.getElementById('summary').textContent = 'UP ' + up + '   DOWN ' + down + '   WIP ' + wip;
+}
+
+// The styling toggle (Q27): ?bare=1 strips the page to bare, unstyled HTML.
+function applyBare() {
+    const bare = new URLSearchParams(window.location.search).get('bare') === '1';
+    document.documentElement.setAttribute('data-bare', bare ? '1' : '0');
+    const t = document.getElementById('bare-toggle');
+    if (t) {
+        t.textContent = bare ? 'styled' : 'bare';
+        t.href = bare ? '?bare=0' : '?bare=1';
+    }
+}
+
+// The last master deployment datetime (Q43), baked in at deploy time.
+function fillDeployed() {
+    const el = document.getElementById('deployed-at');
+    if (el && window.DEPLOYED_AT) el.textContent = window.DEPLOYED_AT;
+}
+
+function main() {
+    applyBare();
+    fillDeployed();
+    Promise.all([load('services.json'), load('status.json')])
+        .then(function (pair) { renderPanels(pair[0], pair[1]); })
+        .catch(function (e) {
+            document.getElementById('summary').textContent = 'status unavailable: ' + e;
+        });
+}
+
+main();