@aaqu/fromcubes-portal-react 0.1.0-alpha.14 → 0.1.0-alpha.15

package/nodes/lib/assets.js

@@ -0,0 +1,212 @@
+/**
+ * Portal Assets — static file serving with security validation.
+ *
+ * Exports pure validation functions (for testing) and a registerAssets factory
+ * that mounts Express routes on RED.httpAdmin / RED.httpNode.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+// ── Constants ─────────────────────────────────────────────────
+
+const UNSAFE_EXTS = new Set([".html", ".htm", ".svg", ".js", ".mjs", ".xml", ".xhtml"]);
+const RESERVED_NAMES = /^(CON|PRN|AUX|NUL|COM\d|LPT\d)(\.|$)/i;
+const MAX_PATH_DEPTH = 10;
+const MAX_ASSETS_BYTES = 500 * 1024 * 1024; // 500 MB total
+const MAX_ASSETS_FILES = 1000;
+
+// ── Pure validators ───────────────────────────────────────────
+
+function isSafePathSegment(s) {
+  return (
+    typeof s === "string" &&
+    s.length > 0 &&
+    s.length <= 255 &&
+    !/[\\:*?"<>|\0]/.test(s) &&
+    !s.startsWith(".") &&
+    !s.endsWith(".") &&
+    !s.endsWith(" ") &&
+    s !== ".." &&
+    !RESERVED_NAMES.test(s)
+  );
+}
+
+function safePath(rel, assetsDir) {
+  if (!rel || typeof rel !== "string") return null;
+  const segments = rel.split("/").filter(Boolean);
+  if (segments.length === 0 || segments.length > MAX_PATH_DEPTH) return null;
+  if (!segments.every(isSafePathSegment)) return null;
+  const resolved = path.resolve(assetsDir, ...segments);
+  if (!resolved.startsWith(assetsDir + path.sep) && resolved !== assetsDir)
+    return null;
+  try {
+    const real = fs.realpathSync(resolved);
+    if (!real.startsWith(assetsDir + path.sep) && real !== assetsDir)
+      return null;
+  } catch (_e) { /* path doesn't exist yet — OK for mkdir/upload */ }
+  return resolved;
+}
+
+// ── Filesystem helpers ────────────────────────────────────────
+
+function scanDir(dir, prefix) {
+  const results = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (entry.isSymbolicLink()) continue;
+    const rel = prefix ? prefix + "/" + entry.name : entry.name;
+    if (entry.isDirectory()) {
+      results.push({ name: rel, type: "dir" });
+      results.push(...scanDir(path.join(dir, entry.name), rel));
+    } else if (entry.isFile()) {
+      const stat = fs.statSync(path.join(dir, entry.name));
+      results.push({ name: rel, type: "file", size: stat.size, mtime: stat.mtimeMs });
+    }
+  }
+  return results;
+}
+
+function getAssetsStats(assetsDir) {
+  let size = 0, count = 0;
+  function walk(dir) {
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (e.isSymbolicLink()) continue;
+      const p = path.join(dir, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.isFile()) { size += fs.statSync(p).size; count++; }
+    }
+  }
+  try { walk(assetsDir); } catch (_e) { /* ignore */ }
+  return { size, count };
+}
+
+// ── Route registration ────────────────────────────────────────
+
+function registerAssets(RED, express, assetsDir) {
+  fs.mkdirSync(assetsDir, { recursive: true });
+
+  // Security middleware for public serving
+  RED.httpNode.use(
+    "/fromcubes/public",
+    (req, res, next) => {
+      res.set("X-Content-Type-Options", "nosniff");
+      res.set("Content-Security-Policy", "default-src 'none'");
+      const ext = path.extname(req.path).toLowerCase();
+      if (UNSAFE_EXTS.has(ext)) {
+        res.set("Content-Disposition", "attachment");
+      }
+      next();
+    },
+    express.static(assetsDir, { maxAge: "1d" }),
+  );
+
+  // List assets
+  RED.httpAdmin.get("/portal-react/assets", (_req, res) => {
+    try {
+      res.json(scanDir(assetsDir, ""));
+    } catch (e) {
+      res.json([]);
+    }
+  });
+
+  // Create directory
+  RED.httpAdmin.post("/portal-react/assets/mkdir", express.json(), (req, res) => {
+    const target = safePath(req.body && req.body.path, assetsDir);
+    if (!target) return res.status(400).json({ error: "invalid path" });
+    try {
+      fs.mkdirSync(target, { recursive: true });
+      res.json({ ok: true });
+    } catch (e) {
+      RED.log.error("portal-react assets mkdir: " + e.message);
+      res.status(500).json({ error: "internal error" });
+    }
+  });
+
+  // Move / rename
+  RED.httpAdmin.post("/portal-react/assets/move", express.json(), (req, res) => {
+    const from = safePath(req.body && req.body.from, assetsDir);
+    const to = safePath(req.body && req.body.to, assetsDir);
+    if (!from || !to) return res.status(400).json({ error: "invalid path" });
+    const toName = path.basename(to);
+    if (!toName || !toName.trim()) return res.status(400).json({ error: "name cannot be empty" });
+    try {
+      const toDir = path.dirname(to);
+      fs.mkdirSync(toDir, { recursive: true });
+      fs.renameSync(from, to);
+      res.json({ ok: true });
+    } catch (e) {
+      RED.log.error("portal-react assets move: " + e.message);
+      res.status(500).json({ error: "internal error" });
+    }
+  });
+
+  // Upload
+  RED.httpAdmin.post(
+    "/portal-react/assets/upload/*",
+    express.raw({ type: "*/*", limit: "100mb" }),
+    (req, res) => {
+      const rel = req.params[0];
+      const target = safePath(rel, assetsDir);
+      if (!target) return res.status(400).json({ error: "invalid path" });
+      const stats = getAssetsStats(assetsDir);
+      if (stats.size + req.body.length > MAX_ASSETS_BYTES)
+        return res.status(413).json({ error: "storage limit exceeded (500MB)" });
+      if (stats.count >= MAX_ASSETS_FILES)
+        return res.status(413).json({ error: "file count limit exceeded (1000)" });
+      try {
+        fs.mkdirSync(path.dirname(target), { recursive: true });
+        fs.writeFileSync(target, req.body);
+        res.json({ ok: true });
+      } catch (e) {
+        RED.log.error("portal-react assets upload: " + e.message);
+        res.status(500).json({ error: "internal error" });
+      }
+    },
+  );
+
+  // Delete
+  RED.httpAdmin.delete("/portal-react/assets/*", (req, res) => {
+    const rel = req.params[0];
+    const target = safePath(rel, assetsDir);
+    if (!target) return res.status(400).json({ error: "invalid path" });
+    try {
+      fs.rmSync(target, { recursive: true, force: true });
+      res.json({ ok: true });
+    } catch (e) {
+      RED.log.error("portal-react assets delete: " + e.message);
+      res.status(404).json({ error: "not found" });
+    }
+  });
+
+  // Download
+  RED.httpAdmin.get("/portal-react/assets/download/*", (req, res) => {
+    const rel = req.params[0];
+    const target = safePath(rel, assetsDir);
+    if (!target) return res.status(400).json({ error: "invalid path" });
+    try {
+      const stat = fs.statSync(target);
+      if (stat.isDirectory()) return res.status(400).json({ error: "is a directory" });
+      const filename = path.basename(target);
+      res.set({
+        "Content-Disposition": 'attachment; filename="' + filename.replace(/"/g, '\\"') + '"',
+        "Content-Length": stat.size,
+      });
+      fs.createReadStream(target).pipe(res);
+    } catch (e) {
+      res.status(404).json({ error: "not found" });
+    }
+  });
+}
+
+module.exports = {
+  UNSAFE_EXTS,
+  RESERVED_NAMES,
+  MAX_PATH_DEPTH,
+  MAX_ASSETS_BYTES,
+  MAX_ASSETS_FILES,
+  isSafePathSegment,
+  safePath,
+  scanDir,
+  getAssetsStats,
+  registerAssets,
+};

package/nodes/lib/helpers.js

@@ -0,0 +1,270 @@
+/**
+ * Shared helper functions for portal-react.
+ */
+
+const crypto = require("crypto");
+const fs = require("fs");
+const path = require("path");
+const esbuild = require("esbuild");
+
+function hash(str) {
+  return crypto.createHash("sha256").update(str).digest("hex").slice(0, 16);
+}
+
+const twCompile = require("tailwindcss").compile;
+const CANDIDATE_RE = /[a-zA-Z0-9_\-:.\/\[\]#%]+/g;
+
+let twCompiled = null;
+async function getTwCompiled() {
+  if (twCompiled) return twCompiled;
+  twCompiled = await twCompile(`@import 'tailwindcss';`, {
+    loadStylesheet: async (id, base) => {
+      let resolved;
+      if (id === "tailwindcss") {
+        resolved = require.resolve("tailwindcss/index.css");
+      } else {
+        resolved = require.resolve(id, { paths: [base || __dirname] });
+      }
+      return {
+        content: fs.readFileSync(resolved, "utf8"),
+        base: path.dirname(resolved),
+      };
+    },
+  });
+  return twCompiled;
+}
+
+async function generateCSS(source) {
+  const cssHash = hash(source);
+  const compiled = await getTwCompiled();
+  const candidates = [...new Set(source.match(CANDIDATE_RE) || [])];
+  const css = compiled.build(candidates);
+  return { css, cssHash };
+}
+
+const FORBIDDEN_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+
+function isSafeName(name) {
+  return (
+    typeof name === "string" && name.length > 0 && !FORBIDDEN_KEYS.has(name)
+  );
+}
+
+function extractPortalUser(headers) {
+  const user = {};
+  if (headers["x-portal-user-id"]) user.userId = headers["x-portal-user-id"];
+  if (headers["x-portal-user-name"])
+    user.userName = headers["x-portal-user-name"];
+  if (headers["x-portal-user-username"])
+    user.username = headers["x-portal-user-username"];
+  if (headers["x-portal-user-email"])
+    user.email = headers["x-portal-user-email"];
+  if (headers["x-portal-user-role"]) user.role = headers["x-portal-user-role"];
+  if (headers["x-portal-user-groups"]) {
+    try {
+      user.groups = JSON.parse(headers["x-portal-user-groups"]);
+    } catch (_) {
+      user.groups = headers["x-portal-user-groups"];
+    }
+  }
+  return Object.keys(user).length > 0 ? user : null;
+}
+
+function removeRoute(router, path) {
+  if (!router || !router.stack) return;
+  router.stack = router.stack.filter(
+    (layer) => !(layer.route && layer.route.path === path),
+  );
+}
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escScript(s) {
+  return String(s).replace(/<\/(script)/gi, "<\\/$1");
+}
+
+module.exports = function (RED) {
+  // Package root — where react/react-dom live (this package's own node_modules)
+  const pkgRoot = path.join(__dirname, "../..");
+  // userDir — where dynamicModuleList installs user packages
+  const userDir = RED.settings.userDir || path.join(__dirname, "../../../..");
+
+  // Skip npm install for packages already present in node_modules (offline/Docker)
+  RED.hooks.add("preInstall.fcPortal", (event) => {
+    try {
+      const modDir = path.join(event.dir, "node_modules", event.module);
+      if (fs.existsSync(modDir)) {
+        RED.log.info(
+          `[portal-react] ${event.module} already in node_modules, skipping install`,
+        );
+        return false;
+      }
+    } catch (_) {}
+  });
+
+  // ── Disk cache for JS bundles and CSS ────────────────────────
+  const cacheDir = path.join(userDir, "fromcubes", "cache");
+  fs.mkdirSync(cacheDir, { recursive: true });
+
+  function readCachedJS(jsxHash) {
+    try {
+      const js = fs.readFileSync(path.join(cacheDir, jsxHash + ".js"), "utf8");
+      let metafile = null;
+      try {
+        metafile = JSON.parse(
+          fs.readFileSync(path.join(cacheDir, jsxHash + ".meta.json"), "utf8"),
+        );
+      } catch (_) {}
+      return { js, metafile, error: null };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function writeCachedJS(jsxHash, js, metafile) {
+    try {
+      fs.writeFileSync(path.join(cacheDir, jsxHash + ".js"), js, "utf8");
+      if (metafile) {
+        fs.writeFileSync(
+          path.join(cacheDir, jsxHash + ".meta.json"),
+          JSON.stringify(metafile),
+          "utf8",
+        );
+      }
+    } catch (e) {
+      RED.log.warn("[portal-react] cache write failed: " + e.message);
+    }
+  }
+
+  function readCachedCSS(jsxHash) {
+    try {
+      const css = fs.readFileSync(
+        path.join(cacheDir, jsxHash + ".css"),
+        "utf8",
+      );
+      return { css, cssHash: jsxHash };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function writeCachedCSS(jsxHash, css) {
+    try {
+      fs.writeFileSync(path.join(cacheDir, jsxHash + ".css"), css, "utf8");
+    } catch (e) {
+      RED.log.warn("[portal-react] CSS cache write failed: " + e.message);
+    }
+  }
+
+  function deleteCacheFiles(jsxHash) {
+    if (!jsxHash) return;
+    for (const ext of [".js", ".css", ".meta.json"]) {
+      try {
+        fs.unlinkSync(path.join(cacheDir, jsxHash + ext));
+      } catch (_) {}
+    }
+  }
+
+  function isHashInUse(jsxHash, pageState, excludeEndpoint) {
+    for (const ep in pageState) {
+      if (ep !== excludeEndpoint && pageState[ep]?.jsxHash === jsxHash)
+        return true;
+    }
+    return false;
+  }
+
+  function transpile(jsx) {
+    // Pre-validate with transformSync (fast, no bundling) to avoid esbuild buildSync deadlock on syntax errors
+    try {
+      esbuild.transformSync(jsx, {
+        loader: "jsx",
+        jsx: "transform",
+        jsxFactory: "React.createElement",
+        jsxFragment: "React.Fragment",
+        logLevel: "silent",
+      });
+    } catch (e) {
+      const msg = e.errors?.length
+        ? e.errors
+            .map(
+              (err) =>
+                `${err.text}${err.location ? ` (line ${err.location.line})` : ""}`,
+            )
+            .join("\n")
+        : e.message;
+      return { js: null, error: msg };
+    }
+    // Syntax OK — bundle with full resolution
+    try {
+      const buildResult = esbuild.buildSync({
+        stdin: {
+          contents: jsx,
+          resolveDir: pkgRoot,
+          loader: "jsx",
+        },
+        bundle: true,
+        format: "iife",
+        minify: true,
+        write: false,
+        target: ["es2020"],
+        jsx: "transform",
+        jsxFactory: "React.createElement",
+        jsxFragment: "React.Fragment",
+        define: { "process.env.NODE_ENV": '"production"' },
+        metafile: true,
+        logLevel: "silent",
+        logOverride: { "import-is-undefined": "silent" },
+        nodePaths: [path.join(userDir, "node_modules")],
+        alias: {
+          react: path.dirname(
+            require.resolve("react/package.json", { paths: [pkgRoot] }),
+          ),
+          "react-dom": path.dirname(
+            require.resolve("react-dom/package.json", { paths: [pkgRoot] }),
+          ),
+        },
+      });
+      return {
+        js: buildResult.outputFiles[0].text,
+        metafile: buildResult.metafile,
+        error: null,
+      };
+    } catch (e) {
+      const msg = e.errors?.length
+        ? e.errors
+            .map(
+              (err) =>
+                `${err.text}${err.location ? ` (line ${err.location.line})` : ""}`,
+            )
+            .join("\n")
+        : e.message;
+      return { js: null, error: msg };
+    }
+  }
+
+  return {
+    hash,
+    transpile,
+    generateCSS,
+    extractPortalUser,
+    removeRoute,
+    isSafeName,
+    esc,
+    escScript,
+    pkgRoot,
+    userDir,
+    cacheDir,
+    readCachedJS,
+    writeCachedJS,
+    readCachedCSS,
+    writeCachedCSS,
+    deleteCacheFiles,
+    isHashInUse,
+  };
+};

package/nodes/lib/page-builder.js

@@ -0,0 +1,210 @@
+/**
+ * HTML page builders for portal-react.
+ */
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escScript(s) {
+  return String(s).replace(/<\/(script)/gi, "<\\/$1");
+}
+
+function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user, showWsStatus, adminRoot) {
+  return `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1.0">
+      <title>${esc(title)}</title>
+      ${cssHash ? `<link rel="stylesheet" href="${adminRoot}/portal-react/css/${cssHash}.css">` : ""}
+      ${escScript(customHead)}
+      ${showWsStatus ? `<style>
+        #__cs {
+          position: fixed; bottom: 6px; right: 6px;
+          padding: 3px 8px; font-size: 10px; border-radius: 3px;
+          z-index: 99999; background: #111; border: 1px solid #333;
+          opacity: .7; transition: opacity .2s;
+        }
+        #__cs:hover { opacity: 1 }
+        #__cs.ok { color: #4ade80 }
+        #__cs.err { color: #f87171 }
+      </style>` : ""}
+    </head>
+    <body>
+      <div id="root"></div>
+      ${showWsStatus ? `<div id="__cs" class="err">fromcubes</div>` : ""}
+      <script>
+        window.__NR = {
+          _ws: null,
+          _listeners: new Set(),
+          _lastData: null,
+          _retries: 0,
+          _wasConnected: false,
+          _version: null,
+          _portalClient: null,
+          _user: ${user ? escScript(JSON.stringify(user)) : "null"},
+
+          connect() {
+            const p = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const ws = new WebSocket(p + '//' + location.host + '${wsPath}');
+            this._ws = ws;
+            const s = document.getElementById('__cs');
+
+            ws.onopen = () => {
+              if (s) { s.textContent = 'fromcubes \u2022 connected'; s.className = 'ok'; }
+              this._retries = 0;
+              this._wasConnected = true;
+            };
+
+            ws.onmessage = (e) => {
+              try {
+                const m = JSON.parse(e.data);
+                if (m.type === 'hello') {
+                  this._portalClient = m.portalClient;
+                }
+                if (m.type === 'version') {
+                  var hasOverlay = document.getElementById('__building_overlay') || document.getElementById('__error_overlay');
+                  if (hasOverlay || (this._version && this._version !== m.hash)) { location.reload(); return; }
+                  this._version = m.hash;
+                }
+                if (m.type === 'building') {
+                  document.getElementById('root').style.display = 'none';
+                  var eo = document.getElementById('__error_overlay');
+                  if (eo) eo.remove();
+                  if (!document.getElementById('__building_overlay')) {
+                    var ov = document.createElement('div');
+                    ov.id = '__building_overlay';
+                    ov.style.cssText = 'position:fixed;inset:0;z-index:99999;background:#111;color:#888;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:monospace';
+                    ov.innerHTML = '<div style="font-size:24px;margin-bottom:16px">Building\\u2026</div>'
+                      + '<div style="width:40px;height:40px;border:3px solid #333;border-top-color:#888;border-radius:50%;animation:__sp .8s linear infinite"></div>'
+                      + '<style>@keyframes __sp{to{transform:rotate(360deg)}}</style>';
+                    document.body.appendChild(ov);
+                  }
+                }
+                if (m.type === 'error') {
+                  document.getElementById('root').style.display = 'none';
+                  var bo = document.getElementById('__building_overlay');
+                  if (bo) bo.remove();
+                  var ov = document.getElementById('__error_overlay');
+                  if (!ov) {
+                    ov = document.createElement('div');
+                    ov.id = '__error_overlay';
+                    ov.style.cssText = 'position:fixed;inset:0;z-index:99999;background:#1a0000;color:#f87171;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:monospace;padding:40px';
+                    document.body.appendChild(ov);
+                  }
+                  ov.innerHTML = '<h1 style="color:#ff4444;margin-bottom:16px;font-size:24px">JSX Transpile Error</h1>'
+                    + '<p style="color:#888;margin-bottom:16px">Fix the component code in Node-RED and deploy again.</p>'
+                    + '<pre style="background:#0a0a0a;border:1px solid #ff4444;border-radius:8px;padding:20px;overflow-x:auto;color:#fca5a5;max-width:90vw;max-height:60vh;overflow:auto;white-space:pre-wrap">'
+                    + m.message.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+                    + '</pre>'
+                    + '<p style="color:#4ade80;font-size:12px;margin-top:24px">Connected \\u2014 will reload on redeploy</p>';
+                }
+                if (m.type === 'data') {
+                  this._lastData = m.payload;
+                  this._listeners.forEach(fn => fn(m.payload));
+                }
+              } catch (err) { console.error('WS parse', err); }
+            };
+
+            ws.onclose = () => {
+              if (s) { s.textContent = 'fromcubes \u2022 disconnected'; s.className = 'err'; }
+              this._ws = null;
+              const delay = Math.min(500 * Math.pow(2, this._retries), 8000);
+              this._retries++;
+              setTimeout(() => this.connect(), delay);
+            };
+
+            ws.onerror = () => ws.close();
+          },
+
+          subscribe(fn) {
+            this._listeners.add(fn);
+            if (this._lastData !== null) fn(this._lastData);
+            return () => this._listeners.delete(fn);
+          },
+
+          send(payload, topic) {
+            if (this._ws && this._ws.readyState === 1)
+              this._ws.send(JSON.stringify({ type: 'output', payload, topic: topic || '' }));
+          }
+        };
+        window.__NR.connect();
+      <\/script>
+      <script>
+        try { ${escScript(transpiledJs)}
+        } catch(__e) {
+          var __r = document.getElementById('root');
+          __r.style.cssText = 'font-family:monospace;background:#1a0000;color:#f87171;padding:40px;min-height:100vh;margin:0';
+          __r.innerHTML = '<h1 style="color:#ff4444;margin-bottom:16px">Runtime Error</h1>'
+            + '<p style="color:#888">Fix the component code in Node-RED and deploy again.</p>'
+            + '<pre style="background:#0a0a0a;border:1px solid #ff4444;border-radius:8px;padding:20px;overflow-x:auto;color:#fca5a5;white-space:pre-wrap">'
+            + (__e.message || __e).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>';
+        }
+      <\/script>
+    </body>
+    </html>`;
+}
+
+function buildErrorPage(title, error, wsPath) {
+  return `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>${esc(title)} — Error</title>
+      <style>
+        body { font-family: monospace; background: #1a0000; color: #f87171; padding: 40px; line-height: 1.6 }
+        h1 { color: #ff4444; margin-bottom: 16px }
+        pre { background: #0a0a0a; border: 1px solid #ff4444; border-radius: 8px; padding: 20px; overflow-x: auto; color: #fca5a5 }
+        .status { color: #888; font-size: 12px; margin-top: 24px }
+        .status.ok { color: #4ade80 }
+      </style>
+    </head>
+    <body>
+      <h1>JSX Transpile Error</h1>
+      <p>Fix the component code in Node-RED and deploy again.</p>
+      <pre>${esc(error)}</pre>
+      <p class="status" id="st">Waiting for redeploy…</p>
+      <script>
+        (function() {
+          var st = document.getElementById('st');
+          var retries = 0;
+          function connect() {
+            var p = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            var ws = new WebSocket(p + '//' + location.host + '${wsPath}');
+            ws.onopen = function() {
+              retries = 0;
+              if (st) { st.textContent = 'Connected \\u2014 will reload on redeploy'; st.className = 'status ok'; }
+            };
+            ws.onmessage = function(e) {
+              try {
+                var m = JSON.parse(e.data);
+                if (m.type === 'version' && m.hash) location.reload();
+                if (m.type === 'error') { var pre = document.querySelector('pre'); if (pre) pre.textContent = m.message; }
+              } catch(_) {}
+            };
+            ws.onclose = function() {
+              if (st) { st.textContent = 'Disconnected \\u2014 reconnecting\\u2026'; st.className = 'status'; }
+              var delay = Math.min(500 * Math.pow(2, retries), 8000);
+              retries++;
+              setTimeout(connect, delay);
+            };
+            ws.onerror = function() { ws.close(); };
+          }
+          ${wsPath ? "connect();" : ""}
+          setInterval(function() {
+            fetch(location.href, { method: 'HEAD', cache: 'no-store' })
+              .then(function(r) { if (r.ok) location.reload(); })
+              .catch(function() {});
+          }, 3000);
+        })();
+      <\/script>
+    </body>
+    </html>`;
+}
+
+module.exports = { buildPage, buildErrorPage };