@aaqu/fromcubes-portal-react 0.1.0-alpha.2 → 0.1.0-alpha.21

package/nodes/portal-react.html

@@ -26,7 +26,10 @@
     // Idempotent — safe to call multiple times, only runs setup once.
     function ensureJsxSetup() {
       if (jsxSetupDone) {
-        console.log(PREFIX, "ensureJsxSetup: already done, re-applying compiler+diag only");
+        console.log(
+          PREFIX,
+          "ensureJsxSetup: already done, re-applying compiler+diag only",
+        );
         // Always re-apply compiler/diag in case Node-RED reset them
         applyCompilerAndDiag();
         return;
@@ -36,8 +39,16 @@
       var jsDef = monaco.typescript.javascriptDefaults;
 
       // Log initial state
-      console.log(PREFIX, "INITIAL compilerOptions:", JSON.stringify(jsDef.getCompilerOptions()));
-      console.log(PREFIX, "INITIAL diagnosticsOptions:", JSON.stringify(jsDef.getDiagnosticsOptions()));
+      console.log(
+        PREFIX,
+        "INITIAL compilerOptions:",
+        JSON.stringify(jsDef.getCompilerOptions()),
+      );
+      console.log(
+        PREFIX,
+        "INITIAL diagnosticsOptions:",
+        JSON.stringify(jsDef.getDiagnosticsOptions()),
+      );
 
       applyCompilerAndDiag();
 
@@ -45,7 +56,7 @@
       var libContent = [
         "declare var React: any;",
         "declare var ReactDOM: any;",
-        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void };",
+        "declare function useNodeRed(opts?: { ignoreRecovery?: boolean }): { data: any; send: (payload: any, topic?: string) => void; user: { userId?: string; userName?: string; username?: string; email?: string; role?: string; groups?: any[] } | null; portalClient: string | null };",
       ].join("\n");
       console.log(PREFIX, "addExtraLib globals.d.ts");
       jsDef.addExtraLib(libContent, "file:///globals.d.ts");
@@ -134,7 +145,17 @@
               });
             }
           }
-          console.log(PREFIX, "TW completion: ctx=" + (isClassName ? "className" : "string") + " word='" + word + "', matched=" + suggestions.length + "/" + classes.length);
+          console.log(
+            PREFIX,
+            "TW completion: ctx=" +
+              (isClassName ? "className" : "string") +
+              " word='" +
+              word +
+              "', matched=" +
+              suggestions.length +
+              "/" +
+              classes.length,
+          );
           return { suggestions: suggestions };
         },
       });
@@ -142,19 +163,82 @@
       // JSX/HTML tag completion — type tag name, Tab → <tag>|</tag>
       console.log(PREFIX, "registering JSX tag completion provider");
       var HTML_TAGS = [
-        "div","span","p","a","button","input","img","form","label",
-        "h1","h2","h3","h4","h5","h6",
-        "ul","ol","li","dl","dt","dd",
-        "table","thead","tbody","tfoot","tr","th","td",
-        "section","article","aside","header","footer","nav","main",
-        "strong","em","b","i","u","s","small","mark","code","pre","blockquote",
-        "br","hr","wbr",
-        "select","option","optgroup","textarea",
-        "fieldset","legend","details","summary","dialog",
-        "canvas","video","audio","source","picture","figure","figcaption",
-        "svg","path","circle","rect","line","g","defs","use","text",
+        "div",
+        "span",
+        "p",
+        "a",
+        "button",
+        "input",
+        "img",
+        "form",
+        "label",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "ul",
+        "ol",
+        "li",
+        "dl",
+        "dt",
+        "dd",
+        "table",
+        "thead",
+        "tbody",
+        "tfoot",
+        "tr",
+        "th",
+        "td",
+        "section",
+        "article",
+        "aside",
+        "header",
+        "footer",
+        "nav",
+        "main",
+        "strong",
+        "em",
+        "b",
+        "i",
+        "u",
+        "s",
+        "small",
+        "mark",
+        "code",
+        "pre",
+        "blockquote",
+        "br",
+        "hr",
+        "wbr",
+        "select",
+        "option",
+        "optgroup",
+        "textarea",
+        "fieldset",
+        "legend",
+        "details",
+        "summary",
+        "dialog",
+        "canvas",
+        "video",
+        "audio",
+        "source",
+        "picture",
+        "figure",
+        "figcaption",
+        "svg",
+        "path",
+        "circle",
+        "rect",
+        "line",
+        "g",
+        "defs",
+        "use",
+        "text",
       ];
-      var VOID_TAGS = new Set(["br","hr","img","input","wbr","source"]);
+      var VOID_TAGS = new Set(["br", "hr", "img", "input", "wbr", "source"]);
 
       monaco.languages.registerCompletionItemProvider("javascript", {
         triggerCharacters: ["<"],
@@ -165,12 +249,15 @@
           // After "<" — suggest tags
           var afterBracket = before.match(/<([a-zA-Z]*)$/);
           // Bare word at line start or after whitespace/{ — Emmet-like (lower or upper)
-          var bareWord = !afterBracket && before.match(/(?:^|[\s{(,])([a-zA-Z][a-zA-Z0-9]*)$/);
+          var bareWord =
+            !afterBracket &&
+            before.match(/(?:^|[\s{(,])([a-zA-Z][a-zA-Z0-9]*)$/);
 
           if (!afterBracket && !bareWord) return { suggestions: [] };
 
           var typed = (afterBracket ? afterBracket[1] : bareWord[1]) || "";
-          var replaceStart = position.column - typed.length - (afterBracket ? 1 : 0);
+          var replaceStart =
+            position.column - typed.length - (afterBracket ? 1 : 0);
 
           var range = {
             startLineNumber: position.lineNumber,
@@ -192,7 +279,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + " />",
                 sortText: "0" + tag,
@@ -202,7 +290,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + ">$0</" + tag + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + ">…</" + tag + ">",
                 sortText: "0" + tag + "a",
@@ -211,7 +300,8 @@
                 label: tag,
                 kind: monaco.languages.CompletionItemKind.Property,
                 insertText: "<" + tag + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + tag + " />",
                 sortText: "0" + tag + "b",
@@ -220,9 +310,15 @@
           }
 
           // Custom components from registry (PascalCase)
-          var upperMatch = afterBracket && before.match(/<([A-Z][a-zA-Z0-9]*)$/);
-          var bareUpper = !afterBracket && before.match(/(?:^|[\s{(,])([A-Z][a-zA-Z0-9]*)$/);
-          var compTyped = upperMatch ? upperMatch[1] : (bareUpper ? bareUpper[1] : "");
+          var upperMatch =
+            afterBracket && before.match(/<([A-Z][a-zA-Z0-9]*)$/);
+          var bareUpper =
+            !afterBracket && before.match(/(?:^|[\s{(,])([A-Z][a-zA-Z0-9]*)$/);
+          var compTyped = upperMatch
+            ? upperMatch[1]
+            : bareUpper
+              ? bareUpper[1]
+              : "";
 
           if (compTyped || (!typed && afterBracket)) {
             // Fetch component names from registry (cached on window)
@@ -231,13 +327,19 @@
               var name = reg[c];
               if (seen.has(name)) continue;
               if (compTyped && name.indexOf(compTyped) !== 0) continue;
-              if (!compTyped && typed && name.toLowerCase().indexOf(typed) !== 0) continue;
+              if (
+                !compTyped &&
+                typed &&
+                name.toLowerCase().indexOf(typed) !== 0
+              )
+                continue;
               seen.add(name);
               suggestions.push({
                 label: name,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + name + ">$0</" + name + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + name + ">…</" + name + ">",
                 sortText: "0" + name + "a",
@@ -246,7 +348,8 @@
                 label: name,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + name + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + name + " />",
                 sortText: "0" + name + "b",
@@ -258,7 +361,8 @@
                 label: compTyped,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + compTyped + ">$0</" + compTyped + ">",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + compTyped + ">…</" + compTyped + ">",
                 sortText: "0" + compTyped + "a",
@@ -267,7 +371,8 @@
                 label: compTyped,
                 kind: monaco.languages.CompletionItemKind.Class,
                 insertText: "<" + compTyped + " $0/>",
-                insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
+                insertTextRules:
+                  monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                 range: range,
                 detail: "<" + compTyped + " />",
                 sortText: "0" + compTyped + "b",
@@ -275,7 +380,13 @@
             }
           }
 
-          console.log(PREFIX, "JSX tag completion: typed='" + typed + "', suggestions=" + suggestions.length);
+          console.log(
+            PREFIX,
+            "JSX tag completion: typed='" +
+              typed +
+              "', suggestions=" +
+              suggestions.length,
+          );
           return { suggestions: suggestions };
         },
       });
@@ -296,12 +407,14 @@
           var m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)>\/<\/\2>(.*)$/);
           var matchStr, tag, prefix;
           if (m) {
-            prefix = m[1]; tag = m[2];
+            prefix = m[1];
+            tag = m[2];
             matchStr = "<" + tag + ">/</" + tag + ">";
           } else {
             m = line.match(/^(.*)<([a-zA-Z][a-zA-Z0-9]*)\/><\/\2>(.*)$/);
             if (!m) return;
-            prefix = m[1]; tag = m[2];
+            prefix = m[1];
+            tag = m[2];
             matchStr = "<" + tag + "/></" + tag + ">";
           }
           var startCol = prefix.length + 1;
@@ -309,15 +422,17 @@
           var replacement = "<" + tag + " />";
           var cursorCol = startCol + replacement.length - 2;
           setTimeout(function () {
-            editor.executeEdits("self-close-collapse", [{
-              range: {
-                startLineNumber: lineNum,
-                endLineNumber: lineNum,
-                startColumn: startCol,
-                endColumn: endCol,
+            editor.executeEdits("self-close-collapse", [
+              {
+                range: {
+                  startLineNumber: lineNum,
+                  endLineNumber: lineNum,
+                  startColumn: startCol,
+                  endColumn: endCol,
+                },
+                text: replacement,
               },
-              text: replacement,
-            }]);
+            ]);
             editor.setPosition({ lineNumber: lineNum, column: cursorCol });
           }, 0);
         });
@@ -328,7 +443,11 @@
       function refreshComponentNames() {
         $.getJSON("portal-react/registry", function (reg) {
           window.__fcComponentNames = Object.keys(reg);
-          console.log(PREFIX, "component names loaded:", window.__fcComponentNames);
+          console.log(
+            PREFIX,
+            "component names loaded:",
+            window.__fcComponentNames,
+          );
         }).fail(function () {
           window.__fcComponentNames = [];
         });
@@ -343,11 +462,19 @@
             console.group(PREFIX + " MARKERS on " + uri.toString());
             markers.forEach(function (m) {
               console.log(
-                "  code=" + (m.code || "?") +
-                " severity=" + m.severity +
-                " source=" + (m.source || "?") +
-                " msg=" + m.message +
-                " [L" + m.startLineNumber + ":" + m.startColumn + "]"
+                "  code=" +
+                  (m.code || "?") +
+                  " severity=" +
+                  m.severity +
+                  " source=" +
+                  (m.source || "?") +
+                  " msg=" +
+                  m.message +
+                  " [L" +
+                  m.startLineNumber +
+                  ":" +
+                  m.startColumn +
+                  "]",
               );
             });
             console.groupEnd();
@@ -372,15 +499,26 @@
 
       var diagOpts = {
         noSemanticValidation: true,
-        noSyntaxValidation: false,
+        // Server-side esbuild does the real syntax check at deploy time;
+        // Monaco's TS parser produces noisy false positives on raw JSX
+        // (1109, 1005, 1128 etc.), so we silence its squiggles entirely.
+        noSyntaxValidation: true,
         noSuggestionDiagnostics: true,
         diagnosticCodesToIgnore: [17004],
       };
       console.log(PREFIX, "setDiagnosticsOptions:", JSON.stringify(diagOpts));
       jsDef.setDiagnosticsOptions(diagOpts);
 
-      console.log(PREFIX, "readback compilerOptions:", JSON.stringify(jsDef.getCompilerOptions()));
-      console.log(PREFIX, "readback diagnosticsOptions:", JSON.stringify(jsDef.getDiagnosticsOptions()));
+      console.log(
+        PREFIX,
+        "readback compilerOptions:",
+        JSON.stringify(jsDef.getCompilerOptions()),
+      );
+      console.log(
+        PREFIX,
+        "readback diagnosticsOptions:",
+        JSON.stringify(jsDef.getDiagnosticsOptions()),
+      );
     }
 
     // Exported for oneditprepare to call before model creation
@@ -391,7 +529,10 @@
     window.__fcLoadMonaco = function (cb) {
       console.log(PREFIX, "loadMonaco called, monaco exists:", !!window.monaco);
       if (window.monaco) {
-        console.log(PREFIX, "Monaco already loaded (by Node-RED?), running setup inline");
+        console.log(
+          PREFIX,
+          "Monaco already loaded (by Node-RED?), running setup inline",
+        );
         ensureJsxSetup();
         cb();
         return;
@@ -429,26 +570,6 @@
     <label for="node-input-compName"><i class="fa fa-cube"></i> JSX Tag</label>
     <input type="text" id="node-input-compName" placeholder="MyComponent" />
   </div>
-  <div class="form-row" style="display:flex;gap:8px;">
-    <div style="flex:1">
-      <label><i class="fa fa-sign-in"></i> Input fields</label>
-      <input
-        type="text"
-        id="node-input-compInputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-    <div style="flex:1">
-      <label><i class="fa fa-sign-out"></i> Output fields</label>
-      <input
-        type="text"
-        id="node-input-compOutputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-  </div>
   <div class="form-row" style="margin-bottom:4px;">
     <label><i class="fa fa-code"></i> JSX Code</label>
   </div>
@@ -491,13 +612,11 @@
         name: { value: "" },
         compName: { value: "StatusCard", required: true },
         compCode: { value: COMP_STARTER },
-        compInputs: { value: "label,value,unit" },
-        compOutputs: { value: "" },
       },
       inputs: 0,
       outputs: 0,
       icon: "font-awesome/fa-cube",
-      paletteLabel: "component",
+      paletteLabel: "fromcubes component",
       label: function () {
         return this.name || this.compName || "component";
       },
@@ -510,22 +629,32 @@
         if (!window.__fcTwClasses) {
           console.log("[FC-Monaco] loading tw-classes...");
           $.getJSON("portal-react/tw-classes", function (classes) {
-            console.log("[FC-Monaco] tw-classes loaded, count=" + classes.length);
+            console.log(
+              "[FC-Monaco] tw-classes loaded, count=" + classes.length,
+            );
             window.__fcTwClasses = classes;
           }).fail(function (xhr) {
-            console.error("[FC-Monaco] tw-classes FAILED:", xhr.status, xhr.statusText);
+            console.error(
+              "[FC-Monaco] tw-classes FAILED:",
+              xhr.status,
+              xhr.statusText,
+            );
           });
         }
 
         window.__fcLoadMonaco(function (failed) {
           if (failed) {
-            console.error("[FC-Monaco] COMP: Monaco load failed, using fallback textarea");
+            console.error(
+              "[FC-Monaco] COMP: Monaco load failed, using fallback textarea",
+            );
             $("#fcc-monaco").hide();
             $("#fcc-fallback").show().val(code);
             return;
           }
 
-          console.log("[FC-Monaco] COMP: applying JSX defaults before model creation");
+          console.log(
+            "[FC-Monaco] COMP: applying JSX defaults before model creation",
+          );
           window.__fcApplyJsxDefaults();
 
           var compUri = monaco.Uri.parse("file:///fc-comp-" + node.id + ".jsx");
@@ -535,8 +664,15 @@
             console.log("[FC-Monaco] COMP: disposing existing model");
             existingModel.dispose();
           }
-          var compModel = monaco.editor.createModel(code, "javascript", compUri);
-          console.log("[FC-Monaco] COMP: model created, language=" + compModel.getLanguageId());
+          var compModel = monaco.editor.createModel(
+            code,
+            "javascript",
+            compUri,
+          );
+          console.log(
+            "[FC-Monaco] COMP: model created, language=" +
+              compModel.getLanguageId(),
+          );
 
           compEditorInstance = monaco.editor.create(
             document.getElementById("fcc-monaco"),
@@ -547,13 +683,27 @@
           // Log markers after a short delay (diagnostics are async)
           setTimeout(function () {
             var markers = monaco.editor.getModelMarkers({ resource: compUri });
-            console.log("[FC-Monaco] COMP: markers after 500ms, count=" + markers.length);
+            console.log(
+              "[FC-Monaco] COMP: markers after 500ms, count=" + markers.length,
+            );
             markers.forEach(function (m) {
-              console.log("[FC-Monaco] COMP marker: code=" + m.code + " msg=" + m.message);
+              console.log(
+                "[FC-Monaco] COMP marker: code=" + m.code + " msg=" + m.message,
+              );
             });
             // Also log current compiler options state
-            console.log("[FC-Monaco] COMP: current compilerOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getCompilerOptions()));
-            console.log("[FC-Monaco] COMP: current diagnosticsOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getDiagnosticsOptions()));
+            console.log(
+              "[FC-Monaco] COMP: current compilerOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getCompilerOptions(),
+              ),
+            );
+            console.log(
+              "[FC-Monaco] COMP: current diagnosticsOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getDiagnosticsOptions(),
+              ),
+            );
           }, 500);
         });
       },
@@ -631,6 +781,34 @@
     <ul id="fc-tabs" style="min-width:600px;margin-bottom:0;"></ul>
   </div>
   <div id="fc-tabs-content">
+    <!-- ── Tab: JSX ── -->
+    <div id="fc-tab-jsx" class="fc-tab-pane">
+      <div class="form-row node-text-editor-row">
+        <div
+          id="fc-editor-wrap"
+          style="width:100%;height:420px;border:1px solid var(--red-ui-form-input-border-color,#555);border-radius:4px;overflow:hidden;position:relative;"
+        >
+          <div id="fc-monaco" style="width:100%;height:100%;"></div>
+          <textarea
+            id="fc-fallback"
+            style="display:none;width:100%;height:100%;font-family:'Cascadia Code',Consolas,monospace;font-size:13px;background:#1e1e1e;color:#d4d4d4;border:none;padding:12px;resize:none;"
+          ></textarea>
+        </div>
+      </div>
+      <div class="form-row" style="display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;">
+        <button type="button" class="red-ui-button" id="fc-btn-starter">
+          <i class="fa fa-magic"></i> Default
+        </button>
+        <button type="button" class="red-ui-button" id="fc-btn-components">
+          <i class="fa fa-cube"></i> Components
+        </button>
+        <span style="flex:1"></span>
+        <button type="button" class="red-ui-button" id="fc-btn-preview">
+          <i class="fa fa-eye"></i> Preview
+        </button>
+      </div>
+    </div>
+
     <!-- ── Tab: Properties ── -->
     <div id="fc-tab-props" class="fc-tab-pane" style="display:none;">
       <div class="form-row">
@@ -638,10 +816,22 @@
         <input type="text" id="node-input-name" placeholder="My Portal" />
       </div>
       <div class="form-row">
-        <label for="node-input-endpoint"
-          ><i class="fa fa-globe"></i> Endpoint</label
+        <label for="node-input-subPath"
+          ><i class="fa fa-globe"></i> Sub-path</label
         >
-        <input type="text" id="node-input-endpoint" placeholder="/portal" />
+        <div style="display:inline-flex;align-items:stretch;width:70%;">
+          <span
+            style="display:inline-flex;align-items:center;padding:0 8px;background:var(--red-ui-secondary-background,#f3f3f3);border:1px solid var(--red-ui-form-input-border-color,#ccc);border-right:none;border-radius:4px 0 0 4px;color:var(--red-ui-secondary-text-color,#888);font-family:monospace;user-select:none;"
+            >/fromcubes/</span
+          >
+          <input
+            type="text"
+            id="node-input-subPath"
+            placeholder="sensors"
+            style="flex:1;border-radius:0 4px 4px 0;"
+          />
+        </div>
+        <input type="hidden" id="node-input-endpoint" />
         <div
           style="font-size:11px;opacity:.5;margin-top:2px;margin-left:105px;"
           id="fc-url-hint"
@@ -653,41 +843,41 @@
         >
         <input type="text" id="node-input-pageTitle" placeholder="Portal" />
       </div>
-    </div>
-
-    <!-- ── Tab: JSX ── -->
-    <div id="fc-tab-jsx" class="fc-tab-pane">
-      <div class="form-row" style="margin-bottom:0;">
-        <div style="font-size:11px;opacity:.6;margin-bottom:4px;">
-          <code>useNodeRed()</code> &rarr;
-          <code>{ data, send }</code> &nbsp;|&nbsp; Components from
-          <code>fc-portal-component</code> nodes auto-imported &nbsp;|&nbsp;
-          Must export <code>&lt;App /&gt;</code> &nbsp;|&nbsp;
-          <strong>Transpiled server-side at deploy</strong>
-        </div>
-      </div>
-      <div class="form-row node-text-editor-row">
+      <div class="form-row node-input-libs-container-row">
+        <label style="width:auto;"><i class="fa fa-archive"></i> Modules</label>
+        <ol id="node-input-libs-container"></ol>
         <div
-          id="fc-editor-wrap"
-          style="width:100%;height:420px;border:1px solid var(--red-ui-form-input-border-color,#555);border-radius:4px;overflow:hidden;position:relative;"
+          style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;"
         >
-          <div id="fc-monaco" style="width:100%;height:100%;"></div>
-          <textarea
-            id="fc-fallback"
-            style="display:none;width:100%;height:100%;font-family:'Cascadia Code',Consolas,monospace;font-size:13px;background:#1e1e1e;color:#d4d4d4;border:none;padding:12px;resize:none;"
-          ></textarea>
+          npm packages to bundle. Node-RED auto-installs them at deploy time.
         </div>
       </div>
-      <div class="form-row" style="display:flex;gap:8px;margin-top:4px;">
-        <button type="button" class="red-ui-button" id="fc-btn-preview">
-          <i class="fa fa-eye"></i> Preview
-        </button>
-        <button type="button" class="red-ui-button" id="fc-btn-components">
-          <i class="fa fa-cube"></i> Components
-        </button>
-        <button type="button" class="red-ui-button" id="fc-btn-starter">
-          <i class="fa fa-magic"></i> Starter
-        </button>
+      <div class="form-row" style="margin-top:12px;">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-showWsStatus"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Show WebSocket status indicator
+        </label>
+        <div style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;">
+          Displays a small <em>fromcubes</em> badge in the bottom-right corner
+          showing connection state.
+        </div>
+      </div>
+      <div class="form-row" style="margin-top:12px;">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-portalAuth"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Enable Portal Auth headers
+        </label>
+        <div style="font-size:11px;opacity:.5;margin-top:4px;margin-left:4px;">
+          Read <code>X-Portal-*</code> headers from reverse proxy.
+        </div>
       </div>
     </div>
 
@@ -723,7 +913,7 @@
     var headEditorInstance = null;
 
     var STARTER = [
-      "// useNodeRed() \u2192 { data, send }",
+      "// useNodeRed() \u2192 { data, send, portalClient }",
       "//   data  = last msg.payload from input wire",
       "//   send(payload, topic?) = push msg to output wire",
       "// Components from fc-portal-component nodes are available by name.",
@@ -734,7 +924,7 @@
       "",
       "  return (",
       '    <div className="min-h-screen bg-zinc-950 p-8">',
-      '      <h1 className="text-2xl font-light text-cyan-400 mb-6">Portal</h1>',
+      '      <h1 className="text-2xl font-light text-cyan-400 mb-6">fromcubes</h1>',
       '      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">',
       '        <StatusCard label="Value" value={d.value ?? "—"} unit="" />',
       "      </div>",
@@ -754,17 +944,40 @@
       color: "#61dafb",
       defaults: {
         name: { value: "" },
-        endpoint: { value: "/portal", required: true },
-        pageTitle: { value: "Portal" },
+        subPath: {
+          value: "",
+          required: true,
+          validate: function (v) {
+            if (typeof v !== "string") return false;
+            var t = v.trim();
+            if (t.length === 0) return false;
+            if (/\s/.test(t)) return false;
+            if (t.charAt(0) === "/" || t.charAt(t.length - 1) === "/") return false;
+            var segs = t.split("/");
+            for (var i = 0; i < segs.length; i++) {
+              var s = segs[i];
+              if (!s || s === "." || s === "..") return false;
+              var lower = s.toLowerCase();
+              if (lower === "public" || lower === "_ws") return false;
+              if (!/^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(s)) return false;
+            }
+            return true;
+          },
+        },
+        endpoint: { value: "" },
+        pageTitle: { value: "fromcubes" },
         componentCode: { value: STARTER },
         customHead: { value: "" },
+        portalAuth: { value: false },
+        showWsStatus: { value: false },
+        libs: { value: [] },
       },
       inputs: 1,
       outputs: 1,
       icon: "font-awesome/fa-desktop",
-      paletteLabel: "portal react",
+      paletteLabel: "fromcubes portal",
       label: function () {
-        return this.name || this.endpoint || "portal react";
+        return this.name || ("/fromcubes/" + (this.subPath || "?"));
       },
 
       oneditprepare: function () {
@@ -776,10 +989,16 @@
         if (!window.__fcTwClasses) {
           console.log("[FC-Monaco] loading tw-classes...");
           $.getJSON("portal-react/tw-classes", function (classes) {
-            console.log("[FC-Monaco] tw-classes loaded, count=" + classes.length);
+            console.log(
+              "[FC-Monaco] tw-classes loaded, count=" + classes.length,
+            );
             window.__fcTwClasses = classes;
           }).fail(function (xhr) {
-            console.error("[FC-Monaco] tw-classes FAILED:", xhr.status, xhr.statusText);
+            console.error(
+              "[FC-Monaco] tw-classes FAILED:",
+              xhr.status,
+              xhr.statusText,
+            );
           });
         }
 
@@ -800,18 +1019,73 @@
         fcTabs.addTab({ id: "fc-tab-head", label: "Head HTML" });
         fcTabs.activateTab("fc-tab-jsx");
 
+        // Legacy endpoint detection + convenience pre-fill
+        if (node.endpoint && typeof node.endpoint === "string") {
+          var legacy = node.endpoint;
+          var prefix = "/fromcubes/";
+          if (legacy.indexOf(prefix) === 0) {
+            if (!node.subPath) {
+              $("#node-input-subPath").val(legacy.slice(prefix.length));
+            }
+          } else if (legacy !== "" && legacy !== "/fromcubes") {
+            $("#fc-url-hint")
+              .css("color", "#c00")
+              .text(
+                "Legacy endpoint detected: '" +
+                  legacy +
+                  "'. Set a Sub-path and redeploy.",
+              );
+          }
+        }
+
         // URL hint
         function updateHint() {
-          var ep = $("#node-input-endpoint").val() || "/portal";
-          $("#fc-url-hint").text("Page served at: http://<host>:1880" + ep);
+          var sp = ($("#node-input-subPath").val() || "").trim();
+          var root = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
+          if (sp) {
+            $("#fc-url-hint")
+              .css("color", "")
+              .text(
+                "Page served at: http://<host>:1880" +
+                  root +
+                  "/fromcubes/" +
+                  sp,
+              );
+          } else if (!node.endpoint || node.endpoint.indexOf("/fromcubes/") === 0) {
+            $("#fc-url-hint")
+              .css("color", "")
+              .text("Sub-path required (will be served under /fromcubes/<sub-path>)");
+          }
         }
-        $("#node-input-endpoint").on("input", updateHint);
+        $("#node-input-subPath").on("input", updateHint);
         updateHint();
 
+        // Modules editableList (like function node's libs)
+        var libsList = node.libs || [];
+        $("#node-input-libs-container").css("min-height","68px").editableList({
+          addItem: function(container, i, opt) {
+            var lib = opt || {};
+            var row = $('<div/>',{style:"display:flex;gap:8px;align-items:center;"}).appendTo(container);
+            var modInput = $('<input/>',{type:"text",placeholder:"e.g. chart.js/auto@^4.4.0",style:"flex:1;"}).appendTo(row);
+            var varInput = $('<input/>',{type:"text",placeholder:"Import as (e.g. Chart)",style:"width:140px;"}).appendTo(row);
+            modInput.val(lib.module || "");
+            varInput.val(lib.var || "");
+            container.data("mod", modInput);
+            container.data("var", varInput);
+          },
+          removable: true,
+          sortable: true
+        });
+        libsList.forEach(function(lib) {
+          $("#node-input-libs-container").editableList("addItem", lib);
+        });
+
         // Monaco
         window.__fcLoadMonaco(function (failed) {
           if (failed) {
-            console.error("[FC-Monaco] PORTAL: Monaco load failed, using fallback textarea");
+            console.error(
+              "[FC-Monaco] PORTAL: Monaco load failed, using fallback textarea",
+            );
             $("#fc-monaco").hide();
             $("#fc-fallback").show().val(code);
             $("#fc-head-monaco").hide();
@@ -819,11 +1093,15 @@
             return;
           }
 
-          console.log("[FC-Monaco] PORTAL: applying JSX defaults before model creation");
+          console.log(
+            "[FC-Monaco] PORTAL: applying JSX defaults before model creation",
+          );
           window.__fcApplyJsxDefaults();
           var opts = window.__fcEditorOpts;
 
-          var jsxUri = monaco.Uri.parse("file:///fc-portal-" + node.id + ".jsx");
+          var jsxUri = monaco.Uri.parse(
+            "file:///fc-portal-" + node.id + ".jsx",
+          );
           console.log("[FC-Monaco] PORTAL: JSX model URI=" + jsxUri.toString());
           var existingJsx = monaco.editor.getModel(jsxUri);
           if (existingJsx) {
@@ -831,15 +1109,21 @@
             existingJsx.dispose();
           }
           var jsxModel = monaco.editor.createModel(code, "javascript", jsxUri);
-          console.log("[FC-Monaco] PORTAL: JSX model created, language=" + jsxModel.getLanguageId());
+          console.log(
+            "[FC-Monaco] PORTAL: JSX model created, language=" +
+              jsxModel.getLanguageId(),
+          );
           editorInstance = monaco.editor.create(
             document.getElementById("fc-monaco"),
             Object.assign({ model: jsxModel }, opts),
           );
           console.log("[FC-Monaco] PORTAL: JSX editor created");
-          if (window.__fcAttachSelfClose) window.__fcAttachSelfClose(editorInstance);
+          if (window.__fcAttachSelfClose)
+            window.__fcAttachSelfClose(editorInstance);
 
-          var headUri = monaco.Uri.parse("file:///fc-head-" + node.id + ".html");
+          var headUri = monaco.Uri.parse(
+            "file:///fc-head-" + node.id + ".html",
+          );
           var existingHead = monaco.editor.getModel(headUri);
           if (existingHead) existingHead.dispose();
           var headModel = monaco.editor.createModel(headCode, "html", headUri);
@@ -852,77 +1136,167 @@
           // Log markers after a short delay (diagnostics are async)
           setTimeout(function () {
             var markers = monaco.editor.getModelMarkers({ resource: jsxUri });
-            console.log("[FC-Monaco] PORTAL: markers after 500ms, count=" + markers.length);
+            console.log(
+              "[FC-Monaco] PORTAL: markers after 500ms, count=" +
+                markers.length,
+            );
             markers.forEach(function (m) {
-              console.log("[FC-Monaco] PORTAL marker: code=" + m.code + " severity=" + m.severity + " msg=" + m.message);
+              console.log(
+                "[FC-Monaco] PORTAL marker: code=" +
+                  m.code +
+                  " severity=" +
+                  m.severity +
+                  " msg=" +
+                  m.message,
+              );
             });
-            console.log("[FC-Monaco] PORTAL: current compilerOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getCompilerOptions()));
-            console.log("[FC-Monaco] PORTAL: current diagnosticsOptions:", JSON.stringify(monaco.typescript.javascriptDefaults.getDiagnosticsOptions()));
+            console.log(
+              "[FC-Monaco] PORTAL: current compilerOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getCompilerOptions(),
+              ),
+            );
+            console.log(
+              "[FC-Monaco] PORTAL: current diagnosticsOptions:",
+              JSON.stringify(
+                monaco.typescript.javascriptDefaults.getDiagnosticsOptions(),
+              ),
+            );
           }, 500);
         });
 
         // Buttons
         $("#fc-btn-starter").on("click", function () {
-          if (editorInstance) editorInstance.setValue(STARTER);
-          else $("#fc-fallback").val(STARTER);
+          $("<div>Replace current JSX with default starter code?</div>").dialog({
+            title: "Load Default",
+            modal: true,
+            width: 360,
+            buttons: [
+              { text: "Cancel", click: function () { $(this).dialog("close"); } },
+              { text: "Replace", class: "primary", click: function () {
+                if (editorInstance) editorInstance.setValue(STARTER);
+                else $("#fc-fallback").val(STARTER);
+                $(this).dialog("close");
+              }},
+            ],
+            close: function () { $(this).remove(); },
+          });
         });
 
         $("#fc-btn-preview").on("click", function () {
-          var ep = $("#node-input-endpoint").val();
-          if (ep) window.open(ep, "_blank");
+          var sp = ($("#node-input-subPath").val() || "").trim();
+          var root = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
+          if (sp) window.open(root + "/fromcubes/" + sp, "_blank");
         });
 
         $("#fc-btn-components").on("click", function () {
           $.getJSON("portal-react/registry", function (reg) {
-            var names = Object.keys(reg);
+            var names = Object.keys(reg).sort();
             if (!names.length) {
               RED.notify("No component nodes on canvas.", "warning");
               return;
             }
-            var html = "<p>Click to insert:</p>";
+
+            function extractProps(code) {
+              if (!code) return [];
+              var m = code.match(/function\s+\w+\s*\(\s*\{([^}]*)\}/);
+              if (!m) return [];
+              return m[1].split(",").map(function (s) { return s.trim().split(/\s*=\s*/)[0]; }).filter(Boolean);
+            }
+
+            var html =
+              '<div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">' +
+              '<input type="text" id="fc-comp-search" placeholder="Search..." ' +
+              'style="width:100%;box-sizing:border-box;margin-bottom:6px;padding:5px 8px;border:1px solid rgba(128,128,128,.4);border-radius:3px;' +
+              'background:var(--red-ui-form-input-background-color,#fff);color:var(--red-ui-form-text-color,#333);font-size:12px;flex-shrink:0;" />' +
+              '<div id="fc-comp-list" style="flex:1;overflow-y:auto;">';
+
             names.forEach(function (n) {
               var c = reg[n];
+              var props = extractProps(c.code);
+              var detailParts = [];
+              if (props.length) {
+                detailParts.push('<div style="margin:4px 0 0 0;font-size:11px;opacity:.6;">' +
+                  props.map(function (p) {
+                    return '<code style="background:rgba(128,128,128,.15);padding:0 4px;border-radius:2px;margin-right:3px;">' + p + '</code>';
+                  }).join("") + '</div>');
+              }
+              var hasDetail = detailParts.length > 0;
+
               html +=
-                '<div style="padding:4px 0;border-bottom:1px solid rgba(128,128,128,.2)">' +
-                '<button class="red-ui-button fc-lib-ins" data-name="' +
-                n +
-                '">' +
-                n +
-                "</button>" +
-                ' <span style="opacity:.5;font-size:11px">in:[' +
-                (c.inputs || []).join(",") +
-                "] out:[" +
-                (c.outputs || []).join(",") +
-                "]</span></div>";
+                '<div class="fc-comp-item" data-name="' + n + '" data-search="' + n.toLowerCase() + '" ' +
+                'style="border-bottom:1px solid rgba(128,128,128,.1);">' +
+                '<div style="display:flex;align-items:center;padding:4px 6px;cursor:pointer;" class="fc-comp-row">' +
+                (hasDetail ? '<i class="fa fa-caret-right fc-comp-arrow" style="width:14px;opacity:.4;font-size:12px;transition:transform .15s;"></i>' : '<span style="width:14px;"></span>') +
+                '<span class="fc-comp-name" data-name="' + n + '" style="font-weight:600;font-size:12px;flex:1;">' + n + '</span>' +
+                '</div>' +
+                (hasDetail ? '<div class="fc-comp-detail" style="display:none;padding:0 6px 4px 20px;">' + detailParts.join("") + '</div>' : '') +
+                '</div>';
             });
-            $("<div></div>")
-              .html(html)
-              .dialog({
-                title: "Available Components",
-                modal: true,
-                width: 400,
-                buttons: [
-                  {
-                    text: "Close",
-                    click: function () {
-                      $(this).dialog("close");
-                    },
-                  },
-                ],
-                close: function () {
-                  $(this).remove();
-                },
+            html += '</div></div>';
+
+            var $dlg = $("<div></div>").html(html).dialog({
+              title: "Components",
+              modal: true,
+              width: 380,
+              buttons: [
+                { text: "Close", click: function () { $(this).dialog("close"); } },
+              ],
+              close: function () { $(this).remove(); },
+            });
+
+            // Search
+            $dlg.find("#fc-comp-search").on("input", function () {
+              var q = $(this).val().toLowerCase();
+              $dlg.find(".fc-comp-item").each(function () {
+                $(this).toggle($(this).data("search").indexOf(q) !== -1);
               });
-            $(document).on("click", ".fc-lib-ins", function () {
-              var tag = "<" + $(this).data("name") + " />";
+            }).focus();
+
+            // Hover
+            $dlg.on("mouseenter", ".fc-comp-row", function () {
+              $(this).css("background", "rgba(128,128,128,.1)");
+            }).on("mouseleave", ".fc-comp-row", function () {
+              $(this).css("background", "");
+            });
+
+            // Arrow toggle detail
+            $dlg.on("click", ".fc-comp-arrow", function (e) {
+              e.stopPropagation();
+              var $item = $(this).closest(".fc-comp-item");
+              var $detail = $item.find(".fc-comp-detail");
+              var open = $detail.is(":visible");
+              $detail.slideToggle(100);
+              $(this).css("transform", open ? "" : "rotate(90deg)");
+            });
+
+            // Click name: delete selection, insert <Tag></Tag> in one line, cursor between tags
+            $dlg.on("click", ".fc-comp-name", function () {
+              var name = $(this).data("name");
+              var openTag = "<" + name + ">";
+              var closeTag = "</" + name + ">";
+              var text = openTag + closeTag;
+              $dlg.dialog("close");
               if (editorInstance) {
-                editorInstance.trigger("keyboard", "type", { text: tag });
-                editorInstance.focus();
+                var sel = editorInstance.getSelection();
+                var startLine = sel.startLineNumber;
+                var startCol = sel.startColumn;
+                editorInstance.executeEdits("fc-components", [{
+                  range: sel,
+                  text: text,
+                }]);
+                setTimeout(function () {
+                  editorInstance.setPosition({ lineNumber: startLine, column: startCol + openTag.length });
+                  editorInstance.focus();
+                }, 50);
               } else {
                 var ta = $("#fc-fallback")[0];
-                var p = ta.selectionStart,
-                  v = ta.value;
-                ta.value = v.slice(0, p) + tag + v.slice(p);
+                var s = ta.selectionStart, e = ta.selectionEnd, v = ta.value;
+                ta.value = v.slice(0, s) + text + v.slice(e);
+                setTimeout(function () {
+                  ta.selectionStart = ta.selectionEnd = s + openTag.length;
+                  ta.focus();
+                }, 50);
               }
             });
           });
@@ -931,6 +1305,24 @@
 
       oneditsave: function () {
         console.log("[FC-Monaco] PORTAL oneditsave");
+
+        // Clear legacy endpoint field + normalize subPath
+        $("#node-input-endpoint").val("");
+        this.endpoint = "";
+        this.subPath = ($("#node-input-subPath").val() || "").trim();
+
+        // Collect libs from editableList
+        var libs = [];
+        var items = $("#node-input-libs-container").editableList("items");
+        items.each(function() {
+          var mod = $(this).data("mod").val().trim();
+          var v = $(this).data("var").val().trim();
+          if (mod) {
+            libs.push({ module: mod, var: v });
+          }
+        });
+        this.libs = libs;
+
         var code = editorInstance
           ? editorInstance.getValue()
           : $("#fc-fallback").val();
@@ -997,37 +1389,59 @@
      Help
      ============================================================ -->
 <script type="text/html" data-help-name="portal-react">
+  <h3>Quick Reference</h3>
+  <ul>
+    <li><code>useNodeRed()</code> &rarr; <code>{ data, send, user, portalClient }</code></li>
+    <li>Components from <code>fc-portal-component</code> nodes are auto-imported</li>
+    <li>Must export <code>&lt;App /&gt;</code></li>
+    <li>JSX is transpiled server-side at deploy</li>
+  </ul>
+
   <p>
-    Renders a React application on a configurable HTTP endpoint with live
-    WebSocket data binding.
-  </p>
-  <h3>Key difference from Dashboard 2.0</h3>
-  <p>
-    JSX is transpiled <strong>server-side at deploy time</strong> using Sucrase.
-    The browser receives plain JS — no Babel, no runtime compilation. Page
-    weight: ~45 KB (React production).
+    Renders a React 19 application on a configurable HTTP endpoint with live
+    WebSocket data binding. JSX is transpiled <strong>server-side at deploy
+    time</strong> using esbuild — browsers receive pre-compiled JS with zero
+    runtime compilation. Tailwind CSS 4 utility classes are generated
+    server-side and served as static CSS.
   </p>
 
   <h3>Inputs</h3>
   <p>
-    <code>msg.payload</code> is pushed to all connected clients via WebSocket.
+    <code>msg.payload</code> is pushed via WebSocket. Set <code>msg._client</code>
+    to target specific clients, or omit it to broadcast to all.
   </p>
   <pre>
-const { data, send } = useNodeRed();
-// data = last msg.payload</pre
+const { data, send, user, portalClient } = useNodeRed();
+// data         = last msg.payload (reactive)
+// send(payload, topic?) — emit msg on output wire
+// user         = portal auth data or null
+// portalClient = unique session/tab ID (assigned by server)</pre
   >
 
   <h3>Outputs</h3>
   <p>
     <code>send(payload, topic?)</code> emits a <code>msg</code> on the node's
-    output wire.
+    output wire via WebSocket.
+  </p>
+
+  <h3>npm Packages</h3>
+  <p>
+    Add npm packages in the <strong>Modules</strong> list (e.g.
+    <code>chart.js/auto@^4.4.0</code>, <code>d3</code>, <code>three</code>).
+    Node-RED auto-installs them at deploy time. All packages are bundled with
+    React into a single vendor IIFE via esbuild, cached by hash of installed
+    versions. Use them in JSX via standard imports.
   </p>
 
   <h3>Deploy behavior</h3>
   <ul>
     <li>
-      Each deploy re-transpiles JSX (cached by content hash — unchanged code is
-      instant)
+      Each deploy re-transpiles JSX via esbuild and rebuilds Tailwind CSS
+      (both cached by content hash — unchanged code is instant)
+    </li>
+    <li>
+      Vendor bundle (React + npm packages) rebuilt only when package versions
+      change
     </li>
     <li>
       Active WebSocket clients receive close code 1001 and auto-reconnect
@@ -1045,15 +1459,548 @@ const { data, send } = useNodeRed();
   <p>
     Components defined in <strong>fc-portal-component</strong> nodes on the
     canvas are auto-injected into every portal-react page. Use them as JSX tags
-    by their component name.
+    by their component name — no imports needed.
   </p>
 
+  <h3>Portal Auth</h3>
+  <p>
+    When enabled in the Auth tab, reads <code>X-Portal-*</code> headers set by
+    a reverse proxy (e.g. Nginx) and exposes user data:
+  </p>
+  <ul>
+    <li><code>useNodeRed()</code> returns <code>{ data, send, user, portalClient }</code></li>
+    <li>
+      All WebSocket messages include <code>msg._client</code> with
+      <code>{ portalClient, ...userFields }</code>
+    </li>
+    <li>
+      To target a specific tab: keep <code>msg._client</code> (or set
+      <code>msg._client = { portalClient: "..." }</code>)
+    </li>
+    <li>
+      To target all tabs of a user: set
+      <code>msg._client = { userId: "..." }</code> (no portalClient)
+    </li>
+    <li>
+      To broadcast to all: remove <code>msg._client</code>
+    </li>
+  </ul>
+
   <h3>Custom Head HTML</h3>
   <p>
     Inject CDN links, fonts, or extra stylesheets into
     <code>&lt;head&gt;</code>. Example:
   </p>
   <pre>
-&lt;link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"&gt;</pre
+&lt;link href="https://fonts.googleapis.com/css2?family=Inter&amp;display=swap" rel="stylesheet"&gt;</pre
   >
+
+  <h3>WebSocket Status</h3>
+  <p>
+    Optional <em>fromcubes</em> badge in the bottom-right corner showing
+    connection state. Enable via the <strong>Show WebSocket status
+    indicator</strong> checkbox (off by default).
+  </p>
+</script>
+
+<!-- ── Assets sidebar tab ──────────────────────────────────────── -->
+<script type="text/javascript">
+(function () {
+  // Resolve httpNodeRoot for public URL prefix
+  var nodeRoot = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
+  var publicBase = nodeRoot + "/fromcubes/public/";
+
+  function formatSize(bytes) {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }
+
+  var allEntries = [];
+  var collapsed = {};
+
+  var content = $('<div class="red-ui-sidebar-info" style="height:100%;overflow:auto;padding:0;"></div>');
+  var fileList = $('<div style="padding:0;"></div>').appendTo(content);
+
+  // ── Toolbar ──
+  var toolbar = $('<div style="display:flex;align-items:center;gap:6px;margin:0 6px;padding:2px 0 0;"></div>');
+  var fileInput = $('<input type="file" multiple style="display:none;">').appendTo(toolbar);
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-upload"></i> Upload</button>')
+    .on("click", function (e) { e.preventDefault(); fileInput.trigger("click"); })
+    .appendTo(toolbar);
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-folder-open"></i> New folder</button>')
+    .on("click", function (e) { e.preventDefault(); showNewFolderInput(""); })
+    .appendTo(toolbar);
+
+  // ── Helpers ──
+  function pathExists(p) {
+    for (var i = 0; i < allEntries.length; i++) {
+      if (allEntries[i].name === p) return true;
+    }
+    return false;
+  }
+
+  function uploadFiles(files, targetDir) {
+    if (!files || files.length === 0) return;
+    var toUpload = [];
+    var duplicates = [];
+    for (var i = 0; i < files.length; i++) {
+      var uploadPath = targetDir ? targetDir + "/" + files[i].name : files[i].name;
+      if (pathExists(uploadPath)) {
+        duplicates.push({ file: files[i], path: uploadPath });
+      } else {
+        toUpload.push({ file: files[i], path: uploadPath });
+      }
+    }
+    if (duplicates.length > 0) {
+      var names = duplicates.map(function (d) { return d.file.name; }).join(", ");
+      if (confirm("These files already exist: " + names + "\nOverwrite?")) {
+        toUpload = toUpload.concat(duplicates);
+      }
+    }
+    if (toUpload.length === 0) return;
+    var pending = toUpload.length;
+    toUpload.forEach(function (item) {
+      var reader = new FileReader();
+      reader.onload = function () {
+        $.ajax({
+          type: "POST",
+          url: "portal-react/assets/upload/" + item.path.split("/").map(encodeURIComponent).join("/"),
+          data: new Uint8Array(reader.result),
+          contentType: "application/octet-stream",
+          processData: false,
+          success: function () { if (--pending === 0) refreshList(); },
+          error: function () {
+            RED.notify("Upload failed: " + item.file.name, "error");
+            if (--pending === 0) refreshList();
+          },
+        });
+      };
+      reader.readAsArrayBuffer(item.file);
+    });
+  }
+
+  fileInput.on("change", function () {
+    uploadFiles(this.files, "");
+    fileInput.val("");
+  });
+
+  // External file drag & drop on content area (root upload)
+  content.on("dragover", function (e) {
+    if (e.originalEvent.dataTransfer.types.indexOf("Files") >= 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      content.css("background", "rgba(34,211,238,0.05)");
+    }
+  });
+  content.on("dragleave", function (e) {
+    e.preventDefault();
+    content.css("background", "");
+  });
+  content.on("drop", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    content.css("background", "");
+    var dt = e.originalEvent.dataTransfer;
+    if (dt.files && dt.files.length > 0) {
+      uploadFiles(dt.files, "");
+    }
+  });
+
+  function moveItem(fromPath, toDir) {
+    var filename = fromPath.split("/").pop();
+    var newPath = toDir ? toDir + "/" + filename : filename;
+    if (fromPath === newPath) return;
+    if (pathExists(newPath)) {
+      if (!confirm("'" + filename + "' already exists in this folder. Overwrite?")) return;
+    }
+    $.ajax({
+      type: "POST", url: "portal-react/assets/move",
+      contentType: "application/json",
+      data: JSON.stringify({ from: fromPath, to: newPath }),
+      success: function () { refreshList(); },
+      error: function (xhr) {
+        var msg = xhr.responseJSON ? xhr.responseJSON.error : "move failed";
+        RED.notify("Move failed: " + msg, "error");
+      },
+    });
+  }
+
+  // ── Inline new-folder input ──
+  function showNewFolderInput(parentDir) {
+    var existingInput = fileList.find(".fc-new-folder-row");
+    if (existingInput.length) existingInput.remove();
+
+    var depth = parentDir ? parentDir.split("/").length : 0;
+    var indent = 8 + depth * 18;
+    var row = $('<div class="fc-new-folder-row" style="display:flex;align-items:center;gap:6px;padding:8px;border-bottom:1px solid var(--red-ui-secondary-border-color);background:var(--red-ui-tertiary-background);"></div>');
+    row.css("padding-left", indent + "px");
+    $('<i class="fa fa-folder" style="color:#fbbf24;font-size:13px;width:16px;text-align:center;"></i>').appendTo(row);
+    var inp = $('<input type="text" placeholder="folder name" class="red-ui-searchBox-input" style="flex:1;padding:3px 6px;font-size:12px;">');
+    inp.appendTo(row);
+    var okBtn = $('<button class="red-ui-button red-ui-button-small" style="color:var(--red-ui-text-color-success);" title="Create"><i class="fa fa-check"></i></button>');
+    var cancelBtn = $('<button class="red-ui-button red-ui-button-small" title="Cancel"><i class="fa fa-times"></i></button>');
+    function submit() {
+      var name = inp.val().trim();
+      if (!name) { row.remove(); return; }
+      var p = parentDir ? parentDir + "/" + name : name;
+      if (pathExists(p)) {
+        RED.notify("Folder '" + name + "' already exists", "warning");
+        return;
+      }
+      $.ajax({ type: "POST", url: "portal-react/assets/mkdir", contentType: "application/json", data: JSON.stringify({ path: p }),
+        success: function () { row.remove(); refreshList(); },
+        error: function () { RED.notify("Failed to create folder", "error"); },
+      });
+    }
+    okBtn.on("click", function (e) { e.preventDefault(); submit(); });
+    cancelBtn.on("click", function (e) { e.preventDefault(); row.remove(); });
+    inp.on("keydown", function (e) {
+      if (e.key === "Enter") submit();
+      if (e.key === "Escape") row.remove();
+    });
+    okBtn.appendTo(row);
+    cancelBtn.appendTo(row);
+
+    // Insert after the parent folder row, or at top
+    if (parentDir) {
+      var parentRow = fileList.find('[data-path="' + parentDir + '"]');
+      if (parentRow.length) { row.insertAfter(parentRow); } else { fileList.prepend(row); }
+    } else {
+      fileList.prepend(row);
+    }
+    inp.focus();
+  }
+
+  // ── Context menu (native Node-RED style) ──
+  var activeMenu = null;
+  function closeMenu() {
+    if (activeMenu) { activeMenu.remove(); activeMenu = null; }
+  }
+  $(document).on("click", closeMenu);
+
+  function showMenu(anchor, items) {
+    closeMenu();
+    var menu = $('<ul class="red-ui-menu red-ui-menu-dropdown" style="position:absolute;z-index:10000;display:block;"></ul>');
+    items.forEach(function (item) {
+      if (item.divider) {
+        menu.append('<li class="red-ui-menu-divider"></li>');
+        return;
+      }
+      var li = $('<li></li>');
+      var a = $('<a href="#"></a>');
+      if (item.danger) a.css("color", "var(--red-ui-text-color-error)");
+      a.append('<i class="fa ' + item.icon + '" style="width:18px;text-align:center;"></i> ');
+      a.append($('<span class="red-ui-menu-label"></span>').text(item.label));
+      a.on("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeMenu();
+        item.action();
+      });
+      li.append(a);
+      menu.append(li);
+    });
+
+    $("body").append(menu);
+    activeMenu = menu;
+
+    // Position near the anchor
+    var off = anchor.offset();
+    var top = off.top + anchor.outerHeight() + 2;
+    var left = off.left - menu.outerWidth() + anchor.outerWidth();
+    if (left < 0) left = off.left;
+    if (top + menu.outerHeight() > $(window).height()) top = off.top - menu.outerHeight() - 2;
+    menu.css({ top: top, left: left });
+  }
+
+  var adminRoot = (RED.settings.httpAdminRoot || "/").replace(/\/$/, "");
+
+  function showRenameInput(rowEl, fullPath, currentName) {
+    var nameSpan = rowEl.find("span").filter(function () { return $(this).text() === currentName; }).first();
+    if (!nameSpan.length) return;
+    var origText = nameSpan.text();
+    var inp = $('<input type="text" class="red-ui-searchBox-input" style="flex:1;padding:3px 6px;font-size:12px;">').val(origText);
+    var okBtn = $('<button class="red-ui-button red-ui-button-small" style="color:var(--red-ui-text-color-success);" title="Save"><i class="fa fa-check"></i></button>');
+    var cancelBtn = $('<button class="red-ui-button red-ui-button-small" title="Cancel"><i class="fa fa-times"></i></button>');
+    var dotIdx = origText.lastIndexOf(".");
+    var hasExt = dotIdx > 0; // has extension (not hidden file)
+    var origExt = hasExt ? origText.slice(dotIdx) : "";
+
+    nameSpan.replaceWith(inp);
+    inp.after(cancelBtn).after(okBtn);
+    inp.focus();
+    // Select only the name part before extension
+    var el = inp[0];
+    if (hasExt && el.setSelectionRange) {
+      el.setSelectionRange(0, dotIdx);
+    } else {
+      inp.select();
+    }
+
+    function restore() {
+      okBtn.remove();
+      cancelBtn.remove();
+      inp.replaceWith($('<span style="flex:1;font-size:12px;word-break:break-all;"></span>').text(origText));
+    }
+    function submit() {
+      var newName = inp.val().trim();
+      if (!newName) {
+        RED.notify("Name cannot be empty", "warning");
+        return;
+      }
+      // Warn if extension changed or removed
+      if (hasExt) {
+        var newDot = newName.lastIndexOf(".");
+        var newExt = newDot > 0 ? newName.slice(newDot) : "";
+        if (newExt.toLowerCase() !== origExt.toLowerCase()) {
+          if (!confirm("Extension changed from '" + origExt + "' to '" + (newExt || "none") + "'. Continue?")) return;
+        }
+      }
+      if (newName === origText) { restore(); return; }
+      var parentDir = fullPath.indexOf("/") >= 0 ? fullPath.slice(0, fullPath.lastIndexOf("/")) : "";
+      var newPath = parentDir ? parentDir + "/" + newName : newName;
+      if (pathExists(newPath)) {
+        RED.notify("'" + newName + "' already exists", "warning");
+        return;
+      }
+      $.ajax({
+        type: "POST", url: "portal-react/assets/move",
+        contentType: "application/json",
+        data: JSON.stringify({ from: fullPath, to: newPath }),
+        success: function () { refreshList(); },
+        error: function (xhr) {
+          var msg = xhr.responseJSON ? xhr.responseJSON.error : "rename failed";
+          RED.notify("Rename failed: " + msg, "error");
+          restore();
+        },
+      });
+    }
+    okBtn.on("click", function (e) { e.preventDefault(); e.stopPropagation(); submit(); });
+    cancelBtn.on("click", function (e) { e.preventDefault(); e.stopPropagation(); restore(); });
+    inp.on("keydown", function (e) {
+      if (e.key === "Enter") submit();
+      if (e.key === "Escape") restore();
+    });
+  }
+
+  // ── Tree rendering ──
+  function buildTree(entries) {
+    // Build nested structure: { children: { name: { type, children, entry } } }
+    var root = { children: {} };
+    entries.forEach(function (e) {
+      var parts = e.name.split("/");
+      var node = root;
+      for (var i = 0; i < parts.length; i++) {
+        if (!node.children[parts[i]]) {
+          node.children[parts[i]] = { children: {} };
+        }
+        node = node.children[parts[i]];
+      }
+      node.entry = e;
+    });
+    return root;
+  }
+
+  var ROOT_KEY = "__root__";
+
+  function renderTree() {
+    fileList.empty();
+    var isOpen = !collapsed[ROOT_KEY];
+
+    // Root folder row — always visible
+    var rootRow = $('<div style="display:flex;align-items:center;gap:5px;padding:4px 8px;border-bottom:1px solid var(--red-ui-secondary-border-color);"></div>');
+    var rootArrow = $('<i class="fa ' + (isOpen ? 'fa-caret-down' : 'fa-caret-right') + '" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:10px;text-align:center;cursor:pointer;"></i>');
+    rootArrow.on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); });
+    rootRow.append(rootArrow);
+    $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(rootRow);
+    $('<span style="flex:1;font-size:12px;cursor:pointer;opacity:0.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>').text(publicBase.replace(/\/$/, ""))
+      .on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); })
+      .appendTo(rootRow);
+    fileList.append(rootRow);
+
+    if (!isOpen) return;
+
+    if (allEntries.length === 0) {
+      fileList.append($('<div style="padding:16px;color:var(--red-ui-secondary-text-color);text-align:center;">No files uploaded.<br><span style="font-size:11px;">Drop files here or click Upload.</span></div>'));
+      return;
+    }
+    var tree = buildTree(allEntries);
+    renderNode(tree, "", 1);
+  }
+
+  function renderNode(node, parentPath, depth) {
+    // Collect and sort: dirs first, then files
+    var names = Object.keys(node.children).sort(function (a, b) {
+      var aIsDir = node.children[a].entry && node.children[a].entry.type === "dir";
+      var bIsDir = node.children[b].entry && node.children[b].entry.type === "dir";
+      if (aIsDir && !bIsDir) return -1;
+      if (!aIsDir && bIsDir) return 1;
+      return a.localeCompare(b);
+    });
+
+    names.forEach(function (name) {
+      var child = node.children[name];
+      var e = child.entry;
+      if (!e) return;
+      var fullPath = e.name;
+      var indent = 8 + depth * 18;
+      var isDir = e.type === "dir";
+      var isOpen = !collapsed[fullPath];
+
+      var row = $('<div data-path="' + fullPath + '" style="display:flex;align-items:center;gap:5px;padding:4px 8px;border-bottom:1px solid var(--red-ui-secondary-border-color);"></div>');
+      row.css("padding-left", indent + "px");
+
+      if (isDir) {
+        // Expand/collapse arrow
+        var arrow = $('<i class="fa ' + (isOpen ? 'fa-caret-down' : 'fa-caret-right') + '" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:10px;text-align:center;cursor:pointer;"></i>');
+        arrow.on("click", function (e) {
+          e.stopPropagation();
+          collapsed[fullPath] = isOpen;
+          renderTree();
+        });
+        row.append(arrow);
+        $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(row);
+        $('<span style="flex:1;font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name)
+          .on("click", function () { collapsed[fullPath] = isOpen; renderTree(); })
+          .appendTo(row);
+
+        // Context menu trigger
+        var dirMenuBtn = $('<button class="red-ui-button red-ui-button-small" style="padding:1px 5px;"><i class="fa fa-ellipsis-v"></i></button>');
+        (function (fp, nm) {
+          dirMenuBtn.on("click", function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            showMenu(dirMenuBtn, [
+              { icon: "fa-pencil", label: "Rename", action: function () {
+                showRenameInput(row, fp, nm);
+              }},
+              { icon: "fa-plus", label: "New subfolder", action: function () {
+                if (collapsed[fp]) { collapsed[fp] = false; renderTree(); }
+                setTimeout(function () { showNewFolderInput(fp); }, 50);
+              }},
+              { divider: true },
+              { icon: "fa-trash", label: "Delete folder", danger: true, action: function () {
+                if (!confirm("Delete folder '" + nm + "' and all contents?")) return;
+                $.ajax({
+                  type: "DELETE",
+                  url: "portal-react/assets/" + fp.split("/").map(encodeURIComponent).join("/"),
+                  success: function () { refreshList(); },
+                  error: function () { RED.notify("Delete failed", "error"); },
+                });
+              }},
+            ]);
+          });
+        })(fullPath, name);
+        dirMenuBtn.appendTo(row);
+
+        // Drop target
+        row.on("dragover", function (ev) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          row.css("background", "rgba(251,191,36,0.08)");
+        });
+        row.on("dragleave", function () { row.css("background", ""); });
+        row.on("drop", function (ev) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          row.css("background", "");
+          var srcPath = ev.originalEvent.dataTransfer.getData("text/x-asset-path");
+          if (srcPath) {
+            moveItem(srcPath, fullPath);
+          } else if (ev.originalEvent.dataTransfer.files && ev.originalEvent.dataTransfer.files.length > 0) {
+            uploadFiles(ev.originalEvent.dataTransfer.files, fullPath);
+          }
+        });
+        fileList.append(row);
+
+        // Render children if open
+        if (isOpen) {
+          renderNode(child, fullPath, depth + 1);
+        }
+      } else {
+        // File
+        row.attr("draggable", "true").css("cursor", "grab");
+        $('<span style="width:10px;"></span>').appendTo(row); // spacer for arrow alignment
+        $('<i class="fa fa-file-o" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:16px;text-align:center;"></i>').appendTo(row);
+        $('<span style="flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name).appendTo(row);
+        $('<span style="font-size:10px;color:var(--red-ui-tertiary-text-color);white-space:nowrap;"></span>').text(formatSize(e.size)).appendTo(row);
+
+        row.on("dragstart", function (ev) {
+          ev.originalEvent.dataTransfer.setData("text/x-asset-path", fullPath);
+          ev.originalEvent.dataTransfer.effectAllowed = "move";
+          row.css("opacity", "0.4");
+        });
+        row.on("dragend", function () { row.css("opacity", "1"); });
+
+        var copyBtn = $('<button class="red-ui-button red-ui-button-small" style="padding:1px 5px;" title="Copy public path"><i class="fa fa-clipboard"></i></button>');
+        var fileMenuBtn = $('<button class="red-ui-button red-ui-button-small" style="padding:1px 5px;"><i class="fa fa-ellipsis-v"></i></button>');
+        (function (fp, nm) {
+          copyBtn.on("click", function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            var url = publicBase + fp;
+            navigator.clipboard.writeText(url).then(function () {
+              RED.notify("Copied: " + url, { type: "success", timeout: 2000 });
+            });
+          });
+          fileMenuBtn.on("click", function (ev) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            showMenu(fileMenuBtn, [
+              { icon: "fa-pencil", label: "Rename", action: function () {
+                showRenameInput(row, fp, nm);
+              }},
+              { icon: "fa-download", label: "Download", action: function () {
+                var a = document.createElement("a");
+                a.href = adminRoot + "/portal-react/assets/download/" + fp.split("/").map(encodeURIComponent).join("/");
+                a.download = nm;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+              }},
+              { divider: true },
+              { icon: "fa-trash", label: "Delete", danger: true, action: function () {
+                $.ajax({
+                  type: "DELETE",
+                  url: "portal-react/assets/" + fp.split("/").map(encodeURIComponent).join("/"),
+                  success: function () { refreshList(); },
+                  error: function () { RED.notify("Delete failed: " + nm, "error"); },
+                });
+              }},
+            ]);
+          });
+        })(fullPath, name);
+        copyBtn.appendTo(row);
+        fileMenuBtn.appendTo(row);
+        fileList.append(row);
+      }
+    });
+  }
+
+  function refreshList() {
+    $.getJSON("portal-react/assets", function (entries) {
+      allEntries = entries || [];
+      renderTree();
+    });
+  }
+
+  RED.sidebar.addTab({
+    id: "fromcubes-public",
+    label: "Portal Assets",
+    name: "fromcubes portal assets",
+    iconClass: "fa fa-desktop",
+    content: content[0],
+    toolbar: toolbar[0],
+    pinned: false,
+    enableOnEdit: true,
+  });
+
+  RED.actions.add("fromcubes:show-assets", function () {
+    RED.sidebar.show("fromcubes-public");
+  });
+
+  RED.events.on("sidebar:resize", function () { refreshList(); });
+  setTimeout(refreshList, 1000);
+})();
 </script>