Module system: discovery, route mounting, client loader, clock module

Milestone 2. Server scans modules/*/module.json, serves module assets at /modules/<id>/, mounts optional server routes (exact + trailing-/* prefix patterns) under /api/modules/<id>/ with per-module config from config/modules.json, and lists enabled manifests at GET /api/modules. Shell dynamically imports each module's client.js and hands it the moduleApi (config, instanceSettings, scoped fetch, auto-reconnecting sse, setStatus). Clock module proves the contract end to end; password-typed config fields never leave the server. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
2026-08-30 14:55:25 +00:00
parent 9d9b92e6d9
commit 3ac70fc44d
6 changed files with 617 additions and 46 deletions
@@ -0,0 +1,74 @@
+/* Clock — the reference ProdDash module. Client-only: no server entry.
+   Everything a module may do is shown here: render inside root, read
+   instanceSettings, report status, clean up in stop(). */
+
+export default function create({ root, moduleApi }) {
+  let timer = null;
+  let timeEl = null;
+  let dateEl = null;
+  let resizeObserver = null;
+
+  function settings() {
+    return moduleApi.instanceSettings; // shell merges schema defaults for us
+  }
+
+  function renderFrame() {
+    root.innerHTML = '';
+    const wrap = document.createElement('div');
+    wrap.className = 'clock-wrap';
+    timeEl = document.createElement('div');
+    timeEl.className = 'clock-time';
+    dateEl = document.createElement('div');
+    dateEl.className = 'clock-date';
+    wrap.append(timeEl, dateEl);
+    root.appendChild(wrap);
+  }
+
+  function tick() {
+    const { format, showSeconds, showDate } = settings();
+    const now = new Date();
+    timeEl.textContent = now.toLocaleTimeString([], {
+      hour12: format === '12h',
+      hour: format === '12h' ? 'numeric' : '2-digit',
+      minute: '2-digit',
+      ...(showSeconds ? { second: '2-digit' } : {}),
+    });
+    dateEl.hidden = !showDate;
+    if (showDate) {
+      dateEl.textContent = now.toLocaleDateString([], {
+        weekday: 'long', month: 'long', day: 'numeric',
+      });
+    }
+  }
+
+  /** Scale the digits to the tile (CSS alone can't see the tile's box). */
+  function fit() {
+    const { showSeconds, showDate } = settings();
+    const chars = (showSeconds ? 8 : 5) + 1;
+    const size = Math.min((root.clientWidth * 1.7) / chars, root.clientHeight * (showDate ? 0.42 : 0.55));
+    timeEl.style.fontSize = Math.max(12, Math.floor(size)) + 'px';
+    dateEl.style.fontSize = Math.max(10, Math.floor(size * 0.28)) + 'px';
+  }
+
+  return {
+    start() {
+      renderFrame();
+      tick();
+      fit();
+      timer = setInterval(tick, 250);
+      resizeObserver = new ResizeObserver(fit);
+      resizeObserver.observe(root);
+      moduleApi.setStatus('ok', 'Ticking');
+    },
+    stop() {
+      clearInterval(timer);
+      timer = null;
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      root.innerHTML = '';
+    },
+    onResize() {
+      fit();
+    },
+  };
+}