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

package/nodes/portal-react.js

@@ -7,9 +7,7 @@
  */
 
 const crypto = require("crypto");
-const fs = require("fs");
 const path = require("path");
-const esbuild = require("esbuild");
 
 module.exports = function (RED) {
   // ── Admin root prefix (for correct URLs when httpAdminRoot is set) ──
@@ -47,136 +45,55 @@ module.exports = function (RED) {
   }
   const rebuildCallbacks = RED.settings.fcRebuildCallbacks;
 
+  // Track endpoint ownership: { endpoint: nodeId } — prevents duplicate endpoints
+  if (!RED.settings.fcEndpointOwners) {
+    RED.settings.fcEndpointOwners = {};
+  }
+  const endpointOwners = RED.settings.fcEndpointOwners;
+
+  // Track component name ownership: { compName: nodeId } — prevents duplicate component names
+  if (!RED.settings.fcCompNameOwners) {
+    RED.settings.fcCompNameOwners = {};
+  }
+  const compNameOwners = RED.settings.fcCompNameOwners;
+
   // Debounced rebuild-all: coalesces multiple component registrations into one rebuild pass
+  // Yields event loop between builds so HTTP server stays responsive
   let _rebuildTimer = null;
   function scheduleRebuildAll() {
     if (_rebuildTimer) clearTimeout(_rebuildTimer);
     _rebuildTimer = setTimeout(() => {
       _rebuildTimer = null;
-      Object.values(rebuildCallbacks).forEach((fn) => fn());
-    }, 50);
-  }
-
-  // ── Helpers ───────────────────────────────────────────────────
-
-  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;
-  }
-
-  // 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)
-  // https://nodered.org/docs/api/hooks/install/
-  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 (_) {}
-  });
-
-  function transpile(jsx) {
-    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,
-        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) {
-      return { js: null, error: e.message };
-    }
-  }
-
-  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"];
+      const fns = Object.values(rebuildCallbacks);
+      let i = 0;
+      function next() {
+        if (i >= fns.length) return;
+        try { fns[i](); } catch (e) { RED.log.error("[portal-react] rebuild failed: " + e.message); }
+        i++;
+        if (i < fns.length) setImmediate(next);
       }
-    }
-    return Object.keys(user).length > 0 ? user : null;
+      next();
+    }, 50);
   }
 
-  function removeRoute(router, path) {
-    if (!router || !router.stack) return;
-    router.stack = router.stack.filter(
-      (layer) => !(layer.route && layer.route.path === path),
-    );
-  }
+  // ── Load modules ─────────────────────────────────────────────
+  const helpers = require("./lib/helpers")(RED);
+  const {
+    hash,
+    transpile,
+    generateCSS,
+    extractPortalUser,
+    removeRoute,
+    isSafeName,
+    userDir,
+    readCachedJS,
+    writeCachedJS,
+    readCachedCSS,
+    writeCachedCSS,
+    deleteCacheFiles,
+    isHashInUse,
+  } = helpers;
+  const { buildPage, buildErrorPage } = require("./lib/page-builder");
 
   // ── Canvas node: shared component ─────────────────────────────
 
@@ -191,20 +108,26 @@ module.exports = function (RED) {
       return;
     }
 
+    // Duplicate component name check
+    const existingOwner = compNameOwners[compName];
+    if (existingOwner && existingOwner !== node.id) {
+      node.error(
+        `Component name "${compName}" is already used by another node`,
+      );
+      node.status({
+        fill: "red",
+        shape: "ring",
+        text: "duplicate: " + compName,
+      });
+      node.on("close", function (_removed, done) {
+        if (done) done();
+      });
+      return;
+    }
+    compNameOwners[compName] = node.id;
+
     registry[compName] = {
       code: config.compCode || "",
-      inputs: config.compInputs
-        ? config.compInputs
-            .split(",")
-            .map((s) => s.trim())
-            .filter(Boolean)
-        : [],
-      outputs: config.compOutputs
-        ? config.compOutputs
-            .split(",")
-            .map((s) => s.trim())
-            .filter(Boolean)
-        : [],
     };
 
     node.status({ fill: "green", shape: "dot", text: compName });
@@ -213,6 +136,9 @@ module.exports = function (RED) {
     scheduleRebuildAll();
 
     node.on("close", function (removed, done) {
+      if (compNameOwners[compName] === node.id) {
+        delete compNameOwners[compName];
+      }
       delete registry[compName];
       if (done) done();
     });
@@ -235,11 +161,30 @@ module.exports = function (RED) {
     const showWsStatus = config.showWsStatus === true;
     const libs = config.libs || [];
 
+    // ── Duplicate endpoint check ──
+    const existingOwner = endpointOwners[endpoint];
+    if (existingOwner && existingOwner !== nodeId) {
+      node.error(
+        `Endpoint "${endpoint}" is already used by another portal node`,
+      );
+      node.status({
+        fill: "red",
+        shape: "ring",
+        text: "duplicate: " + endpoint,
+      });
+      node.on("close", function (_removed, done) {
+        if (done) done();
+      });
+      return;
+    }
+    endpointOwners[endpoint] = nodeId;
+
     // State
     const clients = new Map(); // portalId → ws
     let lastPayload = null;
     let wsServer = null;
     let isClosing = false;
+    let lastJsxHash = null;
 
     if (libs.length > 0) {
       node.status({ fill: "blue", shape: "ring", text: "loading libs..." });
@@ -252,167 +197,273 @@ module.exports = function (RED) {
     // ── Rebuild: transpile JSX + update page state ────────────
 
     function rebuild() {
-      node.status({ fill: "yellow", shape: "dot", text: "building..." });
-
-      // Selective injection: only include components referenced in user code (+ transitive deps)
-      const allEntries = Object.entries(registry);
-      const needed = new Set();
-
-      function addWithDeps(name) {
-        if (needed.has(name)) return;
-        const entry = registry[name];
-        if (!entry) return;
-        needed.add(name);
-        for (const [other] of allEntries) {
-          if (other !== name && entry.code.includes(other)) {
-            addWithDeps(other);
+      try {
+        node.status({ fill: "yellow", shape: "dot", text: "building..." });
+
+        // ── Pre-build: clear cache, set building state, notify browsers ──
+        const prevState = pageState[endpoint];
+        const prevHash = prevState?.jsxHash;
+        if (prevHash && !isHashInUse(prevHash, pageState, endpoint)) {
+          deleteCacheFiles(prevHash);
+        }
+        pageState[endpoint] = { building: true, wsPath, pageTitle };
+        clients.forEach((ws) => {
+          try { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "building" })); } catch (_) {}
+        });
+
+        // Selective injection: only include components referenced in user code (+ transitive deps)
+        const allEntries = Object.entries(registry);
+        const needed = new Set();
+
+        function addWithDeps(name) {
+          if (needed.has(name)) return;
+          const entry = registry[name];
+          if (!entry) return;
+          needed.add(name);
+          for (const [other] of allEntries) {
+            if (other !== name && entry.code.includes(other)) {
+              addWithDeps(other);
+            }
           }
         }
-      }
 
-      for (const [name] of allEntries) {
-        if (componentCode.includes(name)) {
-          addWithDeps(name);
+        for (const [name] of allEntries) {
+          if (componentCode.includes(name)) {
+            addWithDeps(name);
+          }
         }
-      }
 
-      // Topological sort only needed components
-      const entries = allEntries.filter(([n]) => needed.has(n));
-      entries.sort((a, b) => {
-        const aUsesB = a[1].code.includes(b[0]);
-        const bUsesA = b[1].code.includes(a[0]);
-        if (aUsesB && !bUsesA) return 1; // a depends on b → b first
-        if (bUsesA && !aUsesB) return -1; // b depends on a → a first
-        return 0;
-      });
-      const libraryJsx = entries
-        .map(
-          ([name, c]) =>
-            `// Library: ${name}\nconst ${name} = (() => {\n${c.code}\nreturn ${name};\n})();`,
-        )
-        .join("\n\n");
-
-      // Extract import statements from library/user code so they appear at top level
-      const importRe = /^import\s+.+?from\s+['"].+?['"];?\s*$/gm;
-      const libImports = libraryJsx.match(importRe) || [];
-      const userImports = componentCode.match(importRe) || [];
-      const cleanLibJsx = libraryJsx.replace(importRe, "").trim();
-      const cleanCompCode = componentCode.replace(importRe, "").trim();
-
-      // Warn about import * (prevents tree-shaking)
-      const starRe = /^import\s+\*\s+as\s+(\w+)\s+from\s+['"](.+?)['"];?\s*$/;
-      const allCode = cleanLibJsx + "\n" + cleanCompCode;
-      for (const imp of [...libImports, ...userImports]) {
-        const m = imp.match(starRe);
-        if (!m) continue;
-        const [, localName, modulePath] = m;
-        const propRe = new RegExp(`\\b${localName}\\s*\\??\\s*\\.\\s*(\\w+)`, "g");
-        const props = new Set();
-        let pm;
-        while ((pm = propRe.exec(allCode)) !== null) props.add(pm[1]);
-        if (props.size > 0) {
-          const named = [...props].sort().join(", ");
-          node.warn(
-            `"import * as ${localName}" bundles entire ${modulePath} library. ` +
-            `For smaller builds use: import { ${named} } from '${modulePath}'`,
+        // Topological sort only needed components
+        const entries = allEntries.filter(([n]) => needed.has(n));
+        entries.sort((a, b) => {
+          const aUsesB = a[1].code.includes(b[0]);
+          const bUsesA = b[1].code.includes(a[0]);
+          if (aUsesB && !bUsesA) return 1; // a depends on b → b first
+          if (bUsesA && !aUsesB) return -1; // b depends on a → a first
+          return 0;
+        });
+        const libraryJsx = entries
+          .map(
+            ([name, c]) =>
+              `// Library: ${name}\nconst ${name} = (() => {\n${c.code}\nreturn ${name};\n})();`,
+          )
+          .join("\n\n");
+
+        // Extract import statements from library/user code so they appear at top level
+        const importRe = /^import\s+.+?from\s+['"].+?['"];?\s*$/gm;
+        const libImports = libraryJsx.match(importRe) || [];
+        const userImports = componentCode.match(importRe) || [];
+        const cleanLibJsx = libraryJsx.replace(importRe, "").trim();
+        const cleanCompCode = componentCode.replace(importRe, "").trim();
+
+        // Warn about import * (prevents tree-shaking)
+        const starRe = /^import\s+\*\s+as\s+(\w+)\s+from\s+['"](.+?)['"];?\s*$/;
+        const allCode = cleanLibJsx + "\n" + cleanCompCode;
+        for (const imp of [...libImports, ...userImports]) {
+          const m = imp.match(starRe);
+          if (!m) continue;
+          const [, localName, modulePath] = m;
+          const propRe = new RegExp(
+            `\\b${localName}\\s*\\??\\s*\\.\\s*(\\w+)`,
+            "g",
           );
+          const props = new Set();
+          let pm;
+          while ((pm = propRe.exec(allCode)) !== null) props.add(pm[1]);
+          if (props.size > 0) {
+            const named = [...props].sort().join(", ");
+            node.warn(
+              `"import * as ${localName}" bundles entire ${modulePath} library. ` +
+                `For smaller builds use: import { ${named} } from '${modulePath}'`,
+            );
+          }
+        }
+
+        const fullJsx = [
+          "// ── Imports ──",
+          'import React from "react";',
+          'import ReactDOM from "react-dom";',
+          'import { createRoot } from "react-dom/client";',
+          ...libImports,
+          ...userImports,
+          "",
+          "// ── React shorthand ──",
+          "Object.keys(React).filter(k => /^use[A-Z]/.test(k)).forEach(k => { window[k] = React[k]; });",
+          "const { createContext, memo, forwardRef, Fragment } = React;",
+          "",
+          "// ── useNodeRed hook ──",
+          [
+            "function useNodeRed() {",
+            "  const [data, setData] = React.useState(window.__NR._lastData);",
+            "  React.useEffect(() => {",
+            "    return window.__NR.subscribe(setData);",
+            "  }, []);",
+            "  const send = React.useCallback((payload, topic) => {",
+            "    window.__NR.send(payload, topic);",
+            "  }, []);",
+            "  const user = window.__NR._user || null;",
+            "  const portalClient = window.__NR._portalClient;",
+            "  return { data, send, user, portalClient };",
+            "}",
+          ].join("\n"),
+          "",
+          "// ── Library components ──",
+          cleanLibJsx,
+          "",
+          "// ── View component ──",
+          cleanCompCode,
+          "",
+          "// ── Mount ──",
+          "createRoot(document.getElementById('root')).render(React.createElement(App));",
+        ].join("\n");
+
+        // ── Check: missing return in App ──
+        const appFnMatch = cleanCompCode.match(/function\s+App\s*\([^)]*\)\s*\{/);
+        if (appFnMatch) {
+          let depth = 1, i = appFnMatch.index + appFnMatch[0].length;
+          let hasReturn = false;
+          while (i < cleanCompCode.length && depth > 0) {
+            const ch = cleanCompCode[i];
+            if (ch === "{") depth++;
+            else if (ch === "}") depth--;
+            else if (cleanCompCode.slice(i, i + 7) === "return ") hasReturn = true;
+            i++;
+          }
+          if (!hasReturn) {
+            node.error("App component has no return statement");
+            node.status({ fill: "red", shape: "dot", text: "missing return" });
+            const missingReturnError = {
+              js: null,
+              error: "App component has no return statement.\n\nAdd a return with JSX, e.g.:\n\nfunction App() {\n  return <div>Hello</div>\n}",
+            };
+            pageState[endpoint] = {
+              compiled: missingReturnError,
+              contentHash: "",
+              cssReady: Promise.resolve({ css: "", cssHash: "" }),
+              jsxHash: "",
+              css: null,
+              cssHash: "",
+              pageTitle,
+              wsPath,
+              customHead,
+              portalAuth,
+              showWsStatus,
+            };
+            clients.forEach((ws) => {
+              try { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "error", message: missingReturnError.error })); } catch (_) {}
+            });
+            return;
+          }
         }
-      }
 
-      const fullJsx = [
-        "// ── Imports ──",
-        'import React from "react";',
-        'import ReactDOM from "react-dom";',
-        'import { createRoot } from "react-dom/client";',
-        ...libImports,
-        ...userImports,
-        "",
-        "// ── React shorthand ──",
-        "Object.keys(React).filter(k => /^use[A-Z]/.test(k)).forEach(k => { window[k] = React[k]; });",
-        "const { createContext, memo, forwardRef, Fragment } = React;",
-        "",
-        "// ── useNodeRed hook ──",
-        [
-          "function useNodeRed() {",
-          "  const [data, setData] = React.useState(window.__NR._lastData);",
-          "  React.useEffect(() => {",
-          "    return window.__NR.subscribe(setData);",
-          "  }, []);",
-          "  const send = React.useCallback((payload, topic) => {",
-          "    window.__NR.send(payload, topic);",
-          "  }, []);",
-          "  const user = window.__NR._user || null;",
-          "  const portalClient = window.__NR._portalClient;",
-          "  return { data, send, user, portalClient };",
-          "}",
-        ].join("\n"),
-        "",
-        "// ── Library components ──",
-        cleanLibJsx,
-        "",
-        "// ── View component ──",
-        cleanCompCode,
-        "",
-        "// ── Mount ──",
-        "createRoot(document.getElementById('root')).render(React.createElement(App));",
-      ].join("\n");
-
-      const compiled = transpile(fullJsx);
-
-      if (compiled.error) {
-        node.error("JSX transpile error: " + compiled.error);
-        node.status({ fill: "red", shape: "dot", text: "transpile error" });
-      } else {
-        node.status({ fill: "green", shape: "dot", text: `built • ${endpoint}` });
-        if (compiled.metafile) {
-          const output = Object.values(compiled.metafile.outputs)[0];
-          const sizes = output
-            ? Object.entries(output.inputs)
-                .map(([name, info]) => ({ name: name.replace(/^.*node_modules\//, ""), bytes: info.bytesInOutput }))
-                .sort((a, b) => b.bytes - a.bytes)
-                .slice(0, 5)
-            : [];
-          const totalKB = (compiled.js.length / 1024).toFixed(1);
-          node.log(`Bundle: ${totalKB}KB — top: ${sizes.map((s) => `${s.name} (${(s.bytes / 1024).toFixed(1)}KB)`).join(", ")}`);
+        const jsxHash = hash(fullJsx);
+
+        // ── JS: disk cache → transpile ──
+        let compiled = readCachedJS(jsxHash);
+        let cacheHit = !!compiled;
+        if (!compiled) {
+          compiled = transpile(fullJsx);
+          if (!compiled.error) {
+            writeCachedJS(jsxHash, compiled.js, compiled.metafile);
+          }
         }
-      }
 
-      const contentHash = compiled.js ? hash(compiled.js) : "";
-      const prevState = pageState[endpoint];
-      const jsxHash = hash(fullJsx);
-
-      const cssReady = !compiled.error
-        ? (prevState?.jsxHash === jsxHash && prevState?.css
-            ? Promise.resolve({ css: prevState.css, cssHash: prevState.cssHash })
-            : generateCSS(fullJsx))
-          .catch((err) => {
-            node.warn("Tailwind CSS generation failed: " + err.message);
-            return { css: "", cssHash: "" };
-          })
-        : Promise.resolve({ css: "", cssHash: "" });
-
-      pageState[endpoint] = {
-        compiled,
-        contentHash,
-        cssReady,
-        jsxHash,
-        css: null,
-        cssHash: "",
-        pageTitle,
-        wsPath,
-        customHead,
-        portalAuth,
-        showWsStatus,
-      };
-
-      cssReady.then(({ css, cssHash }) => {
-        const state = pageState[endpoint];
-        if (state && state.jsxHash === jsxHash) {
-          state.css = css;
-          state.cssHash = cssHash;
-          node.status({ fill: "green", shape: "dot", text: `built • ${endpoint}` });
+        if (compiled.error) {
+          node.error("JSX transpile error: " + compiled.error);
+          RED.log.warn(
+            `[portal-react] ${endpoint} — JSX transpile error: ${compiled.error}`,
+          );
+          node.status({ fill: "red", shape: "dot", text: "transpile error" });
+          clients.forEach((ws) => {
+            try { if (ws.readyState === 1) ws.send(JSON.stringify({ type: "error", message: compiled.error })); } catch (_) {}
+          });
+        } else {
+          node.status({
+            fill: "green",
+            shape: "dot",
+            text: `built • ${endpoint}`,
+          });
+          if (compiled.metafile) {
+            const output = Object.values(compiled.metafile.outputs)[0];
+            const sizes = output
+              ? Object.entries(output.inputs)
+                  .map(([name, info]) => ({
+                    name: name.replace(/^.*node_modules\//, ""),
+                    bytes: info.bytesInOutput,
+                  }))
+                  .sort((a, b) => b.bytes - a.bytes)
+                  .slice(0, 5)
+              : [];
+            const totalKB = (compiled.js.length / 1024).toFixed(1);
+            node.log(
+              `Bundle${cacheHit ? " (cached)" : ""}: ${totalKB}KB — top: ${sizes.map((s) => `${s.name} (${(s.bytes / 1024).toFixed(1)}KB)`).join(", ")}`,
+            );
+          }
         }
-      });
+
+        const contentHash = compiled.js ? hash(compiled.js) : "";
+
+        // ── CSS: disk cache → in-memory → generate ──
+        const cssReady = !compiled.error
+          ? (() => {
+              const cachedCSS = readCachedCSS(jsxHash);
+              if (cachedCSS) return Promise.resolve(cachedCSS);
+              if (prevState?.jsxHash === jsxHash && prevState?.css) {
+                return Promise.resolve({
+                  css: prevState.css,
+                  cssHash: prevState.cssHash,
+                });
+              }
+              return generateCSS(fullJsx).then(({ css, cssHash }) => {
+                writeCachedCSS(jsxHash, css);
+                return { css, cssHash };
+              });
+            })().catch((err) => {
+              node.warn("Tailwind CSS generation failed: " + err.message);
+              return { css: "", cssHash: "" };
+            })
+          : Promise.resolve({ css: "", cssHash: "" });
+
+        lastJsxHash = jsxHash;
+
+        pageState[endpoint] = {
+          compiled,
+          contentHash,
+          cssReady,
+          jsxHash,
+          css: null,
+          cssHash: "",
+          pageTitle,
+          wsPath,
+          customHead,
+          portalAuth,
+          showWsStatus,
+        };
+
+        // Notify all connected browsers that build finished — triggers reload or overlay cleanup
+        if (!compiled.error && contentHash) {
+          const versionFrame = JSON.stringify({ type: "version", hash: contentHash });
+          clients.forEach((ws) => {
+            try { if (ws.readyState === 1) ws.send(versionFrame); } catch (_) {}
+          });
+        }
+
+        cssReady.then(({ css, cssHash }) => {
+          const state = pageState[endpoint];
+          if (state && state.jsxHash === jsxHash) {
+            state.css = css;
+            state.cssHash = cssHash;
+            node.status({
+              fill: "green",
+              shape: "dot",
+              text: `built • ${endpoint}`,
+            });
+          }
+        });
+      } catch (e) {
+        node.error("Rebuild failed: " + e.message);
+        node.status({ fill: "red", shape: "dot", text: "rebuild error" });
+      }
     }
 
     // Register rebuild callback so library components can trigger re-transpile
@@ -421,40 +472,74 @@ module.exports = function (RED) {
     // Initial build: debounced so all fc-portal-component nodes register first
     scheduleRebuildAll();
     setImmediate(() => {
-
       // Register route only once per endpoint (persists across deploys)
       if (!registeredRoutes[endpoint]) {
         RED.httpNode.get(endpoint, async function (_req, res) {
-          const state = pageState[endpoint];
-          if (!state) {
-            res.status(404).send("Not found");
-            return;
-          }
-          res.set("Cache-Control", "no-store");
-          if (state.compiled.error) {
+          try {
+            const state = pageState[endpoint];
+            if (!state || state.building) {
+              const bWsPath = state?.wsPath || wsPath;
+              res
+                .set("Cache-Control", "no-store")
+                .set("Refresh", "3")
+                .type("text/html")
+                .send(
+                  `<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Building\u2026</title><style>@keyframes __sp{to{transform:rotate(360deg)}}body{font-family:monospace;background:#111;color:#888;margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}</style></head><body><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><script>(function(){var r=0;function c(){var p=location.protocol==='https:'?'wss:':'ws:';var ws=new WebSocket(p+'//'+location.host+'${bWsPath}');ws.onmessage=function(e){try{var m=JSON.parse(e.data);if(m.type==='version'||m.type==='error')location.reload();}catch(_){}};ws.onclose=function(){var d=Math.min(500*Math.pow(2,r),8000);r++;setTimeout(c,d);};ws.onerror=function(){ws.close();};}c();})()</script></body></html>`,
+                );
+              return;
+            }
+            res.set("Cache-Control", "no-store");
+            if (state.compiled.error) {
+              res
+                .status(500)
+                .type("text/html")
+                .send(
+                  buildErrorPage(
+                    state.pageTitle,
+                    state.compiled.error,
+                    state.wsPath,
+                  ),
+                );
+              return;
+            }
+            const { cssHash } = await Promise.race([
+              state.cssReady,
+              new Promise((_, reject) =>
+                setTimeout(
+                  () => reject(new Error("CSS generation timeout")),
+                  15000,
+                ),
+              ),
+            ]);
+            const user = state.portalAuth
+              ? extractPortalUser(_req.headers)
+              : null;
+            res
+              .type("text/html")
+              .send(
+                buildPage(
+                  state.pageTitle,
+                  state.compiled.js,
+                  state.wsPath,
+                  state.customHead,
+                  cssHash,
+                  user,
+                  state.showWsStatus,
+                  adminRoot,
+                ),
+              );
+          } catch (e) {
             res
               .status(500)
               .type("text/html")
-              .send(buildErrorPage(state.pageTitle, state.compiled.error));
-            return;
+              .send(
+                buildErrorPage(
+                  pageTitle,
+                  "Page build failed: " + e.message,
+                  wsPath,
+                ),
+              );
           }
-          const { cssHash } = await state.cssReady;
-          const user = state.portalAuth
-            ? extractPortalUser(_req.headers)
-            : null;
-          res
-            .type("text/html")
-            .send(
-              buildPage(
-                state.pageTitle,
-                state.compiled.js,
-                state.wsPath,
-                state.customHead,
-                cssHash,
-                user,
-                state.showWsStatus,
-              ),
-            );
         });
         registeredRoutes[endpoint] = true;
       }
@@ -567,7 +652,10 @@ module.exports = function (RED) {
             if (ws.readyState !== 1) return;
             const u = ws._portalUser;
             if (!u) return;
-            if ((matchId && u.userId === matchId) || (matchName && u.username === matchName)) {
+            if (
+              (matchId && u.userId === matchId) ||
+              (matchName && u.username === matchName)
+            ) {
               ws.send(frame);
             }
           });
@@ -613,8 +701,17 @@ module.exports = function (RED) {
         // Unregister rebuild callback
         delete rebuildCallbacks[nodeId];
 
+        // Release endpoint ownership
+        if (endpointOwners[endpoint] === nodeId) {
+          delete endpointOwners[endpoint];
+        }
+
         // Clean up route only when node is fully removed (not redeployed)
         if (removed) {
+          // Delete disk cache if no other endpoint uses this hash
+          if (lastJsxHash && !isHashInUse(lastJsxHash, pageState, endpoint)) {
+            deleteCacheFiles(lastJsxHash);
+          }
           delete pageState[endpoint];
           removeRoute(RED.httpNode._router, endpoint);
           delete registeredRoutes[endpoint];
@@ -689,178 +786,8 @@ module.exports = function (RED) {
   });
 
   // ── Public assets folder ─────────────────────────────────────
-  const assetsDir = path.join(userDir, "fromcubes-public");
-  fs.mkdirSync(assetsDir, { recursive: true });
-  const UNSAFE_EXTS = new Set([".html", ".htm", ".svg", ".js", ".mjs", ".xml", ".xhtml"]);
-  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" }),
-  );
-
-  const RESERVED_NAMES = /^(CON|PRN|AUX|NUL|COM\d|LPT\d)(\.|$)/i;
-  function isSafePathSegment(s) {
-    return (
-      typeof s === "string" &&
-      s.length > 0 &&
-      s.length <= 255 &&
-      !/[\\:*?"<>|\0]/.test(s) &&
-      !s.startsWith(".") &&
-      !s.endsWith(".") &&   // Windows strips trailing dots
-      !s.endsWith(" ") &&   // Windows strips trailing spaces
-      s !== ".." &&
-      !RESERVED_NAMES.test(s)
-    );
-  }
-
-  const MAX_PATH_DEPTH = 10;
-  function safePath(rel) {
-    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;
-    // Symlink escape check: verify realpath stays inside assetsDir
-    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;
-  }
-
-  function scanDir(dir, prefix) {
-    const results = [];
-    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-      if (entry.isSymbolicLink()) continue; // skip symlinks for safety
-      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;
-  }
-
-  RED.httpAdmin.get("/portal-react/assets", (_req, res) => {
-    try {
-      res.json(scanDir(assetsDir, ""));
-    } catch (e) {
-      res.json([]);
-    }
-  });
-
-  RED.httpAdmin.post("/portal-react/assets/mkdir", express.json(), (req, res) => {
-    const target = safePath(req.body && req.body.path);
-    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" });
-    }
-  });
-
-  RED.httpAdmin.post("/portal-react/assets/move", express.json(), (req, res) => {
-    const from = safePath(req.body && req.body.from);
-    const to = safePath(req.body && req.body.to);
-    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" });
-    }
-  });
-
-  const MAX_ASSETS_BYTES = 500 * 1024 * 1024; // 500 MB total
-  const MAX_ASSETS_FILES = 1000;
-  function getAssetsStats() {
-    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 };
-  }
-
-  RED.httpAdmin.post(
-    "/portal-react/assets/upload/*",
-    express.raw({ type: "*/*", limit: "100mb" }),
-    (req, res) => {
-      const rel = req.params[0];
-      const target = safePath(rel);
-      if (!target) return res.status(400).json({ error: "invalid path" });
-      const stats = getAssetsStats();
-      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" });
-      }
-    },
-  );
-
-  RED.httpAdmin.delete("/portal-react/assets/*", (req, res) => {
-    const rel = req.params[0];
-    const target = safePath(rel);
-    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" });
-    }
-  });
-
-  RED.httpAdmin.get("/portal-react/assets/download/*", (req, res) => {
-    const rel = req.params[0];
-    const target = safePath(rel);
-    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" });
-    }
-  });
+  const { registerAssets } = require("./lib/assets");
+  registerAssets(RED, express, path.join(userDir, "fromcubes", "public"));
 
   // ── Admin API for component registry ──────────────────────────
 
@@ -869,10 +796,10 @@ module.exports = function (RED) {
   });
 
   RED.httpAdmin.post("/portal-react/registry", (req, res) => {
-    const { name, code, inputs, outputs } = req.body || {};
+    const { name, code } = req.body || {};
     if (!isSafeName(name))
       return res.status(400).json({ error: "invalid name" });
-    registry[name] = { code, inputs: inputs || [], outputs: outputs || [] };
+    registry[name] = { code: code || "" };
     res.json({ ok: true });
   });
 
@@ -883,133 +810,4 @@ module.exports = function (RED) {
     delete registry[name];
     res.json({ ok: true });
   });
-
-  // ── Page builders ─────────────────────────────────────────────
-
-  function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user, showWsStatus) {
-    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') {
-                  if (this._version && this._version !== m.hash) { location.reload(); return; }
-                  this._version = m.hash;
-                }
-                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>
-        ${escScript(transpiledJs)}
-      <\/script>
-    </body>
-    </html>`;
-  }
-
-  function buildErrorPage(title, error) {
-    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 }
-      </style>
-    </head>
-    <body>
-      <h1>JSX Transpile Error</h1>
-      <p>Fix the component code in Node-RED and deploy again.</p>
-      <pre>${esc(error)}</pre>
-    </body>
-    </html>`;
-  }
-
-  function esc(s) {
-    return String(s)
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;");
-  }
-
-  function escScript(s) {
-    return String(s).replace(/<\/(script)/gi, "<\\/$1");
-  }
 };