@kumologica/sdk 3.5.4 → 3.6.0-alpha7

package/src/app/ui/editor-client/public/red/red.js

@@ -23,33 +23,33 @@ jQuery.propHooks.disabled = {
   let disableComms = false;
 
   function appendNodeConfig(nodeConfig, done) {
-    done = done || function () { };
+    done = done || function () {};
     var m = /<!-- --- \[red-module:(\S+)\] --- -->/.exec(nodeConfig.trim());
     var moduleId;
     if (m) {
       moduleId = m[1];
     } else {
-      moduleId = 'unknown';
+      moduleId = "unknown";
     }
     try {
       var hasDeferred = false;
 
-      var nodeConfigEls = $('<div>' + nodeConfig + '</div>');
-      var scripts = nodeConfigEls.find('script');
+      var nodeConfigEls = $("<div>" + nodeConfig + "</div>");
+      var scripts = nodeConfigEls.find("script");
       var scriptCount = scripts.length;
       scripts.each(function (i, el) {
-        var srcUrl = $(el).attr('src');
+        var srcUrl = $(el).attr("src");
         if (srcUrl && !/^\s*(https?:|\/|\.)/.test(srcUrl)) {
           $(el).remove();
-          var newScript = document.createElement('script');
+          var newScript = document.createElement("script");
           newScript.onload = function () {
             scriptCount--;
             if (scriptCount === 0) {
-              $('body').append(nodeConfigEls);
+              $("body").append(nodeConfigEls);
               done();
             }
           };
-          $('body').append(newScript);
+          $("body").append(newScript);
           newScript.src = RED.settings.apiRootUrl + srcUrl;
           hasDeferred = true;
         } else {
@@ -61,24 +61,25 @@ jQuery.propHooks.disabled = {
             // break the version of ace included in the editor.
             // At the time of commit, the contrib-python nodes did this.
             // This is a crude fix until the python nodes are fixed.
-            console.warn('Blocked attempt to load', srcUrl, 'by', moduleId);
+            console.warn("Blocked attempt to load", srcUrl, "by", moduleId);
             $(el).remove();
           }
           scriptCount--;
         }
       });
       if (!hasDeferred) {
-        $('body').append(nodeConfigEls);
+        $("body").append(nodeConfigEls);
         done();
       }
     } catch (err) {
-      RED.notify(`<p>Failed to load '${moduleId}'</p><p>${err.toString()}</p>`,
+      RED.notify(
+        `<p>Failed to load '${moduleId}'</p><p>${err.toString()}</p>`,
         {
-          type: 'error',
+          type: "error",
           timeout: 10000,
         }
       );
-      console.log('[' + moduleId + '] ' + err.toString());
+      console.log("[" + moduleId + "] " + err.toString());
       done();
     }
   }
@@ -86,10 +87,10 @@ jQuery.propHooks.disabled = {
   function loadNodeList() {
     $.ajax({
       headers: {
-        Accept: 'application/json',
+        Accept: "application/json",
       },
       cache: false,
-      url: 'nodes',
+      url: "nodes",
       success: function (data) {
         RED.nodes.setNodeList(data);
         // RED.i18n.loadNodeCatalogs(function () {
@@ -102,10 +103,10 @@ jQuery.propHooks.disabled = {
   function loadIconList(done) {
     $.ajax({
       headers: {
-        Accept: 'application/json',
+        Accept: "application/json",
       },
       cache: false,
-      url: '__icons',
+      url: "__icons",
       success: function (data) {
         RED.nodes.setIconSets(data);
         if (done) {
@@ -118,28 +119,28 @@ jQuery.propHooks.disabled = {
   function loadNodes() {
     $.ajax({
       headers: {
-        Accept: 'text/html',
+        Accept: "text/html",
       },
       cache: false,
-      url: 'nodes',
+      url: "nodes",
       success: function (data) {
         var configs = data
           .trim()
           .split(/(?=<!-- --- \[red-module:\S+\] --- -->)/);
         var stepConfig = function () {
           if (configs.length === 0) {
-            $('body').i18n();
-            $('#palette > .palette-spinner').hide();
-            $('.palette-scroll').removeClass('hide');
-            $('#palette-search').removeClass('hide');
+            $("body").i18n();
+            $("#palette > .palette-spinner").hide();
+            $(".palette-scroll").removeClass("hide");
+            $("#palette-search").removeClass("hide");
             loadFlows(function () {
-              if (RED.settings.theme('projects.enabled', false)) {
+              if (RED.settings.theme("projects.enabled", false)) {
                 RED.projects.refresh(function (activeProject) {
                   RED.sidebar.info.refresh();
                   if (!activeProject) {
                     // Projects enabled but no active project
-                    RED.menu.setDisabled('menu-item-projects-open', true);
-                    RED.menu.setDisabled('menu-item-projects-settings', true);
+                    RED.menu.setDisabled("menu-item-projects-open", true);
+                    RED.menu.setDisabled("menu-item-projects-settings", true);
                     if (activeProject === false) {
                       // User previously decline the migration to projects.
                     } else {
@@ -168,10 +169,10 @@ jQuery.propHooks.disabled = {
   function loadFlows(done) {
     $.ajax({
       headers: {
-        Accept: 'application/json',
+        Accept: "application/json",
       },
       cache: false,
-      url: 'flows',
+      url: "flows",
       success: function (nodes) {
         if (nodes) {
           var currentHash = window.location.hash;
@@ -190,18 +191,18 @@ jQuery.propHooks.disabled = {
 
   function completeLoad() {
     var persistentNotifications = {};
-    RED.comms.subscribe('notification/#', function (topic, msg) {
-      var parts = topic.split('/');
+    RED.comms.subscribe("notification/#", function (topic, msg) {
+      var parts = topic.split("/");
       var notificationId = parts[1];
-      if (notificationId === 'runtime-deploy') {
+      if (notificationId === "runtime-deploy") {
         // handled in ui/deploy.js
         return;
       }
-      if (notificationId === 'node') {
+      if (notificationId === "node") {
         // handled below
         return;
       }
-      if (notificationId === 'project-update') {
+      if (notificationId === "project-update") {
         RED.nodes.clear();
         RED.history.clear();
         RED.view.redraw(true);
@@ -222,28 +223,28 @@ jQuery.propHooks.disabled = {
           timeout: msg.timeout,
           id: notificationId,
         };
-        if (notificationId === 'runtime-state') {
-          if (msg.error === 'safe-mode') {
+        if (notificationId === "runtime-state") {
+          if (msg.error === "safe-mode") {
             options.buttons = [
               {
-                text: 'Close',
+                text: "Close",
                 click: function () {
                   persistentNotifications[notificationId].hideNotification();
                 },
               },
             ];
-          } else if (msg.error === 'missing-types') {
+          } else if (msg.error === "missing-types") {
             text +=
-              '<ul><li>' +
-              msg.types.map(RED.utils.sanitize).join('</li><li>') +
-              '</li></ul>';
+              "<ul><li>" +
+              msg.types.map(RED.utils.sanitize).join("</li><li>") +
+              "</li></ul>";
             if (!!RED.projects.getActiveProject()) {
               options.buttons = [
                 {
-                  text: 'Manage project dependencies',
+                  text: "Manage project dependencies",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
-                    RED.projects.settings.show('deps');
+                    RED.projects.settings.show("deps");
                   },
                 },
               ];
@@ -251,20 +252,20 @@ jQuery.propHooks.disabled = {
             } else {
               options.buttons = [
                 {
-                  text: 'Close',
+                  text: "Close",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                   },
                 },
               ];
             }
-          } else if (msg.error === 'credentials_load_failed') {
-            if (RED.settings.theme('projects.enabled', false)) {
+          } else if (msg.error === "credentials_load_failed") {
+            if (RED.settings.theme("projects.enabled", false)) {
               // projects enabled
-              if (RED.user.hasPermission('projects.write')) {
+              if (RED.user.hasPermission("projects.write")) {
                 options.buttons = [
                   {
-                    text: 'Setup credentials',
+                    text: "Setup credentials",
                     click: function () {
                       persistentNotifications[
                         notificationId
@@ -277,18 +278,18 @@ jQuery.propHooks.disabled = {
             } else {
               options.buttons = [
                 {
-                  text: 'Close',
+                  text: "Close",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                   },
                 },
               ];
             }
-          } else if (msg.error === 'missing_flow_file') {
-            if (RED.user.hasPermission('projects.write')) {
+          } else if (msg.error === "missing_flow_file") {
+            if (RED.user.hasPermission("projects.write")) {
               options.buttons = [
                 {
-                  text: 'Setup credentials',
+                  text: "Setup credentials",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                     RED.projects.showFilesPrompt();
@@ -296,11 +297,11 @@ jQuery.propHooks.disabled = {
                 },
               ];
             }
-          } else if (msg.error === 'missing_package_file') {
-            if (RED.user.hasPermission('projects.write')) {
+          } else if (msg.error === "missing_package_file") {
+            if (RED.user.hasPermission("projects.write")) {
               options.buttons = [
                 {
-                  text: 'Setup credentials',
+                  text: "Setup credentials",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                     RED.projects.showFilesPrompt();
@@ -308,17 +309,17 @@ jQuery.propHooks.disabled = {
                 },
               ];
             }
-          } else if (msg.error === 'project_empty') {
-            if (RED.user.hasPermission('projects.write')) {
+          } else if (msg.error === "project_empty") {
+            if (RED.user.hasPermission("projects.write")) {
               options.buttons = [
                 {
-                  text: 'No thanks',
+                  text: "No thanks",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                   },
                 },
                 {
-                  text: 'Create default project files',
+                  text: "Create default project files",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                     RED.projects.createDefaultFileSet();
@@ -326,13 +327,13 @@ jQuery.propHooks.disabled = {
                 },
               ];
             }
-          } else if (msg.error === 'git_merge_conflict') {
+          } else if (msg.error === "git_merge_conflict") {
             RED.nodes.clear();
             RED.sidebar.versionControl.refresh(true);
-            if (RED.user.hasPermission('projects.write')) {
+            if (RED.user.hasPermission("projects.write")) {
               options.buttons = [
                 {
-                  text: 'Show merge conflicts',
+                  text: "Show merge conflicts",
                   click: function () {
                     persistentNotifications[notificationId].hideNotification();
                     RED.sidebar.versionControl.showLocalChanges();
@@ -352,11 +353,11 @@ jQuery.propHooks.disabled = {
         delete persistentNotifications[notificationId];
       }
     });
-    RED.comms.subscribe('status/#', function (topic, msg) {
-      var parts = topic.split('/');
+    RED.comms.subscribe("status/#", function (topic, msg) {
+      var parts = topic.split("/");
       var node = RED.nodes.node(parts[1]);
       if (node) {
-        if (msg.hasOwnProperty('text') && /^[a-zA-Z]/.test(msg.text)) {
+        if (msg.hasOwnProperty("text") && /^[a-zA-Z]/.test(msg.text)) {
           msg.text = node._(msg.text.toString(), {
             defaultValue: msg.text.toString(),
           });
@@ -366,74 +367,77 @@ jQuery.propHooks.disabled = {
         RED.view.redraw();
       }
     });
-    RED.comms.subscribe('notification/node/#', function (topic, msg) {
+    RED.comms.subscribe("notification/node/#", function (topic, msg) {
       var i, m;
       var typeList;
       var info;
-      if (topic == 'notification/node/added') {
+      if (topic == "notification/node/added") {
         var addedTypes = [];
         msg.forEach(function (m) {
           var id = m.id;
           RED.nodes.addNodeSet(m);
           addedTypes = addedTypes.concat(m.types);
           RED.i18n.loadNodeCatalog(id, function () {
-            $.get('nodes/' + id, function (data) {
+            $.get("nodes/" + id, function (data) {
               appendNodeConfig(data);
             });
           });
         });
         if (addedTypes.length) {
-          typeList = '<ul><li>' + addedTypes.join('</li><li>') + '</li></ul>';
-          RED.notify(`Node added to palette: ${addedTypes.length} ` + typeList,
-            'success'
+          typeList = "<ul><li>" + addedTypes.join("</li><li>") + "</li></ul>";
+          RED.notify(
+            `Node added to palette: ${addedTypes.length} ` + typeList,
+            "success"
           );
         }
         loadIconList();
-      } else if (topic == 'notification/node/removed') {
+      } else if (topic == "notification/node/removed") {
         for (i = 0; i < msg.length; i++) {
           m = msg[i];
           info = RED.nodes.removeNodeSet(m.id);
           if (info.added) {
-            typeList = '<ul><li>' + m.types.join('</li><li>') + '</li></ul>';
-            RED.notify(`Node removed from palette: ${m.types.length}` + typeList,
-              'success'
+            typeList = "<ul><li>" + m.types.join("</li><li>") + "</li></ul>";
+            RED.notify(
+              `Node removed from palette: ${m.types.length}` + typeList,
+              "success"
             );
           }
         }
         loadIconList();
-      } else if (topic == 'notification/node/enabled') {
+      } else if (topic == "notification/node/enabled") {
         if (msg.types) {
           info = RED.nodes.getNodeSet(msg.id);
           if (info.added) {
             RED.nodes.enableNodeSet(msg.id);
-            typeList = '<ul><li>' + msg.types.join('</li><li>') + '</li></ul>';
+            typeList = "<ul><li>" + msg.types.join("</li><li>") + "</li></ul>";
             // RED.notify(
             //   RED._('palette.event.nodeEnabled', { count: msg.types.length }) +
             //     typeList,
             //   'success'
             // );
           } else {
-            $.get('nodes/' + msg.id, function (data) {
+            $.get("nodes/" + msg.id, function (data) {
               appendNodeConfig(data);
               typeList =
-                '<ul><li>' + msg.types.join('</li><li>') + '</li></ul>';
-              RED.notify(`Node added to palette: ${msg.types.length} ` + typeList,
-                'success'
+                "<ul><li>" + msg.types.join("</li><li>") + "</li></ul>";
+              RED.notify(
+                `Node added to palette: ${msg.types.length} ` + typeList,
+                "success"
               );
             });
           }
         }
-      } else if (topic == 'notification/node/disabled') {
+      } else if (topic == "notification/node/disabled") {
         if (msg.types) {
           RED.nodes.disableNodeSet(msg.id);
-          typeList = '<ul><li>' + msg.types.join('</li><li>') + '</li></ul>';
+          typeList = "<ul><li>" + msg.types.join("</li><li>") + "</li></ul>";
           // RED.notify(
           //   RED._('palette.event.nodeDisabled', { count: msg.types.length }) +
           //     typeList,
           //   'success'
           // );
         }
-      } else if (topic == 'notification/node/upgraded') {
+      } else if (topic == "notification/node/upgraded") {
         // RED.notify(
         //   RED._('palette.event.nodeUpgraded', {
         //     module: msg.module,
@@ -444,18 +448,18 @@ jQuery.propHooks.disabled = {
         RED.nodes.registry.setModulePendingUpdated(msg.module, msg.version);
       }
     });
-    RED.comms.subscribe('event-log/#', function (topic, payload) {
+    RED.comms.subscribe("event-log/#", function (topic, payload) {
       var id = topic.substring(9);
       RED.eventLog.log(id, payload);
     });
   }
 
   function showAbout() {
-    $.get('red/about', function (data) {
+    $.get("red/about", function (data) {
       var aboutHeader =
         '<div style="text-align:center;">' +
         '<img width="50px" src="red/images/kumologica-core-icon.svg" />' +
-        '</div>';
+        "</div>";
 
       RED.sidebar.info.set(aboutHeader + marked(data));
       RED.sidebar.info.show();
@@ -464,180 +468,180 @@ jQuery.propHooks.disabled = {
 
   function loadEditor() {
     var menuOptions = [];
-    if (RED.settings.theme('projects.enabled', false)) {
+    if (RED.settings.theme("projects.enabled", false)) {
       menuOptions.push({
-        id: 'menu-item-projects-menu',
-        label: 'Projects',
+        id: "menu-item-projects-menu",
+        label: "Projects",
         options: [
           {
-            id: 'menu-item-projects-new',
-            label: 'New',
+            id: "menu-item-projects-new",
+            label: "New",
             disabled: false,
-            onselect: 'core:new-project',
+            onselect: "core:new-project",
           },
           {
-            id: 'menu-item-projects-open',
-            label: 'Open',
+            id: "menu-item-projects-open",
+            label: "Open",
             disabled: false,
-            onselect: 'core:open-project',
+            onselect: "core:open-project",
           },
           {
-            id: 'menu-item-projects-settings',
-            label: 'Project Settings',
+            id: "menu-item-projects-settings",
+            label: "Project Settings",
             disabled: false,
-            onselect: 'core:show-project-settings',
+            onselect: "core:show-project-settings",
           },
         ],
       });
     }
 
     menuOptions.push({
-      id: 'menu-item-view-menu',
-      label: 'View',
+      id: "menu-item-view-menu",
+      label: "View",
       options: [
         {
-          id: 'menu-item-palette',
-          label: 'Show palette',
+          id: "menu-item-palette",
+          label: "Show palette",
           toggle: true,
-          onselect: 'core:toggle-palette',
+          onselect: "core:toggle-palette",
           selected: true,
         },
         {
-          id: 'menu-item-sidebar',
-          label: 'Show sidebar',
+          id: "menu-item-sidebar",
+          label: "Show sidebar",
           toggle: true,
-          onselect: 'core:toggle-sidebar',
+          onselect: "core:toggle-sidebar",
           selected: false,
         },
         {
-          id: 'menu-item-event-log',
-          label: 'Event log',
-          onselect: 'core:show-event-log',
+          id: "menu-item-event-log",
+          label: "Event log",
+          onselect: "core:show-event-log",
         },
         null,
       ],
     });
     menuOptions.push(null);
     menuOptions.push({
-      id: 'menu-item-import',
-      label: 'Import',
+      id: "menu-item-import",
+      label: "Import",
       options: [
         {
-          id: 'menu-item-import-clipboard',
-          label: 'Clipboard',
-          onselect: 'core:show-import-dialog',
+          id: "menu-item-import-clipboard",
+          label: "Clipboard",
+          onselect: "core:show-import-dialog",
         },
         {
-          id: 'menu-item-import-library',
-          label: 'Library',
+          id: "menu-item-import-library",
+          label: "Library",
           options: [],
         },
       ],
     });
     menuOptions.push({
-      id: 'menu-item-export',
-      label: 'Export',
+      id: "menu-item-export",
+      label: "Export",
       options: [
         {
-          id: 'menu-item-export-clipboard',
-          label: 'Clipboard',
-          onselect: 'core:show-export-dialog',
+          id: "menu-item-export-clipboard",
+          label: "Clipboard",
+          onselect: "core:show-export-dialog",
         },
         {
-          id: 'menu-item-export-library',
-          label: 'Library',
+          id: "menu-item-export-library",
+          label: "Library",
           disabled: true,
-          onselect: 'core:library-export',
+          onselect: "core:library-export",
         },
       ],
     });
     menuOptions.push(null);
     menuOptions.push({
-      id: 'menu-item-search',
-      label: 'Search',
-      onselect: 'core:search',
+      id: "menu-item-search",
+      label: "Search",
+      onselect: "core:search",
     });
     menuOptions.push(null);
     menuOptions.push({
-      id: 'menu-item-config-nodes',
-      label: 'Configuration nodes',
-      onselect: 'core:show-config-tab',
+      id: "menu-item-config-nodes",
+      label: "Configuration nodes",
+      onselect: "core:show-config-tab",
     });
     menuOptions.push({
-      id: 'menu-item-workspace',
-      label: 'Flows',
+      id: "menu-item-workspace",
+      label: "Flows",
       options: [
         {
-          id: 'menu-item-workspace-add',
-          label: 'Add',
-          onselect: 'core:add-flow',
+          id: "menu-item-workspace-add",
+          label: "Add",
+          onselect: "core:add-flow",
         },
         {
-          id: 'menu-item-workspace-edit',
-          label: 'Rename',
-          onselect: 'core:edit-flow',
+          id: "menu-item-workspace-edit",
+          label: "Rename",
+          onselect: "core:edit-flow",
         },
         {
-          id: 'menu-item-workspace-delete',
-          label: 'Delete',
-          onselect: 'core:remove-flow',
+          id: "menu-item-workspace-delete",
+          label: "Delete",
+          onselect: "core:remove-flow",
         },
       ],
     });
     menuOptions.push({
-      id: 'menu-item-subflow',
-      label: 'Subflows',
+      id: "menu-item-subflow",
+      label: "Subflows",
       options: [
         {
-          id: 'menu-item-subflow-create',
-          label: 'Create Subflow',
-          onselect: 'core:create-subflow',
+          id: "menu-item-subflow-create",
+          label: "Create Subflow",
+          onselect: "core:create-subflow",
         },
         {
-          id: 'menu-item-subflow-convert',
-          label: 'Selection to Subflow',
+          id: "menu-item-subflow-convert",
+          label: "Selection to Subflow",
           disabled: true,
-          onselect: 'core:convert-to-subflow',
+          onselect: "core:convert-to-subflow",
         },
       ],
     });
     menuOptions.push(null);
-    if (RED.settings.theme('palette.editable') !== false) {
+    if (RED.settings.theme("palette.editable") !== false) {
       menuOptions.push({
-        id: 'menu-item-edit-palette',
-        label: 'Manage palette',
-        onselect: 'core:manage-palette',
+        id: "menu-item-edit-palette",
+        label: "Manage palette",
+        onselect: "core:manage-palette",
       });
       menuOptions.push(null);
     }
 
     menuOptions.push({
-      id: 'menu-item-user-settings',
-      label: 'Settings',
-      onselect: 'core:show-user-settings',
+      id: "menu-item-user-settings",
+      label: "Settings",
+      onselect: "core:show-user-settings",
     });
     menuOptions.push(null);
 
     menuOptions.push({
-      id: 'menu-item-keyboard-shortcuts',
-      label: 'Keyboard shortcuts',
-      onselect: 'core:show-help',
+      id: "menu-item-keyboard-shortcuts",
+      label: "Keyboard shortcuts",
+      onselect: "core:show-help",
     });
     menuOptions.push({
-      id: 'menu-item-help',
+      id: "menu-item-help",
       label: RED.settings.theme(
-        'menu.menu-item-help.label',
-        'Kumologica website'
+        "menu.menu-item-help.label",
+        "Kumologica website"
       ),
       href: RED.settings.theme(
-        'menu.menu-item-help.url',
-        'http://kumologica.com/docs'
+        "menu.menu-item-help.url",
+        "http://kumologica.com/docs"
       ),
     });
     menuOptions.push({
-      id: 'menu-item-kumologica-core-version',
-      label: 'v' + RED.settings.version,
-      onselect: 'core:show-about',
+      id: "menu-item-kumologica-core-version",
+      label: "v" + RED.settings.version,
+      onselect: "core:show-about",
     });
 
     RED.view.init();
@@ -649,13 +653,13 @@ jQuery.propHooks.disabled = {
     RED.palette.explorer.init();
     RED.palette.nodes.init();
     RED.eventLog.init();
-    if (RED.settings.theme('palette.editable') !== false) {
+    if (RED.settings.theme("palette.editable") !== false) {
       RED.palette.editor.init();
     }
 
     RED.sidebar.init();
 
-    if (RED.settings.theme('projects.enabled', false)) {
+    if (RED.settings.theme("projects.enabled", false)) {
       RED.projects.init();
     }
 
@@ -666,16 +670,17 @@ jQuery.propHooks.disabled = {
     RED.search.init();
     RED.projectInfo.init();
     RED.uiSettings.init();
+    RED.modules.init();
 
     RED.editor.init();
     //RED.diff.init();
 
-    RED.menu.init({ id: 'btn-sidemenu', options: menuOptions });
+    RED.menu.init({ id: "btn-sidemenu", options: menuOptions });
 
-    RED.deploy.init(RED.settings.theme('deployButton', null));
+    RED.deploy.init(RED.settings.theme("deployButton", null));
     RED.notifications.init();
 
-    RED.actions.add('core:show-about', showAbout);
+    RED.actions.add("core:show-about", showAbout);
     RED.nodes.init();
 
     if (!disableComms) {
@@ -693,8 +698,8 @@ jQuery.propHooks.disabled = {
 
     //RED.comms.connectWS();
 
-    $('#main-container').show();
-    $('.header-toolbar').show();
+    $("#main-container").show();
+    $(".header-toolbar").show();
 
     // Terminal must go before headers, as they reference the terminal in the shelves section
     //RED.terminal.init();
@@ -708,21 +713,20 @@ jQuery.propHooks.disabled = {
 
   function init(options) {
     if (initialised) {
-      throw new Error('RED already initialised');
+      throw new Error("RED already initialised");
     }
     disableComms = options.disableComms || false;
     initialised = true;
-    ace.require('ace/ext/language_tools');
+    ace.require("ace/ext/language_tools");
     options = options || {};
-    options.apiRootUrl = options.apiRootUrl || '';
+    options.apiRootUrl = options.apiRootUrl || "";
     if (options.apiRootUrl && !/\/$/.test(options.apiRootUrl)) {
-      options.apiRootUrl = options.apiRootUrl + '/';
+      options.apiRootUrl = options.apiRootUrl + "/";
     }
     RED.i18n.init(options, function () {
       RED.settings.init(options, loadEditor);
     });
     RED.footer.init();
-
   }
 
   return {
@@ -8627,103 +8631,211 @@ RED.panels = (function() {
     },
   };
 })();
-; 
-(function($) {
+;(function ($) {
+  /**
+   * options:
+   *   - minimumLength : the minimum length of text before firing a change event
+   *   - delay : delay, in ms, after a keystroke before firing change event
+   *
+   * methods:
+   *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+   *   - count - sets or clears a sub-label on the input. This can be used to provide
+   *             a feedback on the number of matches, or number of available entries to search
+   *   - change - trigger a change event
+   *
+   */
 
-/**
- * options:
- *   - minimumLength : the minimum length of text before firing a change event
- *   - delay : delay, in ms, after a keystroke before firing change event
- *
- * methods:
- *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
- *   - count - sets or clears a sub-label on the input. This can be used to provide
- *             a feedback on the number of matches, or number of available entries to search
- *   - change - trigger a change event
- *
- */
+  $.widget("nodered.searchBox", {
+    _create: function () {
+      var that = this;
 
-    $.widget( "nodered.searchBox", {
-        _create: function() {
-            var that = this;
+      this.currentTimeout = null;
+      this.lastSent = "";
+      this.element.val("");
+      this.uiContainer = this.element.wrap("<div>").parent();
+      this.uiContainer.addClass("red-ui-searchBox-container");
+
+      $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
+      this.clearButton = $(
+        '<a href="#"><i class="fa fa-times"></i></a>'
+      ).appendTo(this.uiContainer);
+      this.clearButton.on("click", function (e) {
+        e.preventDefault();
+        that.element.val("");
+        that._change("", true);
+        that.element.focus();
+      });
 
-            this.currentTimeout = null;
-            this.lastSent = "";
-            this.element.val("");
-            this.uiContainer = this.element.wrap("<div>").parent();
-            this.uiContainer.addClass("red-ui-searchBox-container");
+      this.resultCount = $("<span>", {
+        class: "red-ui-searchBox-resultCount hide",
+      }).appendTo(this.uiContainer);
 
-            $('<i class="fa fa-search"></i>').prependTo(this.uiContainer);
-            this.clearButton = $('<a href="#"><i class="fa fa-times"></i></a>').appendTo(this.uiContainer);
-            this.clearButton.on("click",function(e) {
-                e.preventDefault();
-                that.element.val("");
-                that._change("",true);
-                that.element.focus();
-            });
+      this.element.val("");
+      this.element.on("keydown", function (evt) {
+        if (evt.keyCode === 27) {
+          that.element.val("");
+        }
+      });
+      this.element.on("keyup", function (evt) {
+        that._change($(this).val());
+      });
+
+      this.element.on("focus", function () {
+        $("body").one("mousedown", function () {
+          that.element.blur();
+        });
+      });
+    },
+    _change: function (val, instant) {
+      var fireEvent = false;
+      if (val === "") {
+        this.clearButton.hide();
+        fireEvent = true;
+      } else {
+        this.clearButton.show();
+        fireEvent = val.length >= (this.options.minimumLength || 0);
+      }
+      var current = this.element.val();
+      fireEvent = fireEvent && current !== this.lastSent;
+      if (fireEvent) {
+        if (!instant && this.options.delay > 0) {
+          clearTimeout(this.currentTimeout);
+          var that = this;
+          this.currentTimeout = setTimeout(function () {
+            that.lastSent = that.element.val();
+            that._trigger("change");
+          }, this.options.delay);
+        } else {
+          this._trigger("change");
+        }
+      }
+    },
+    value: function (val) {
+      if (val === undefined) {
+        return this.element.val();
+      } else {
+        this.element.val(val);
+        this._change(val);
+      }
+    },
+    count: function (val) {
+      if (val === undefined || val === null || val === "") {
+        this.resultCount.text("").hide();
+      } else {
+        this.resultCount.text(val).show();
+      }
+    },
+    change: function () {
+      this._trigger("change");
+    },
+  });
+})(jQuery);
+;(function ($) {
+  /**
+   * options:
+   *   - command : the command to run
+   *   - delay : delay, in ms, after a keystroke before firing change event
+   *
+   * methods:
+   *   - value([val]) - gets the current value, or, if `val` is provided, sets the value
+   *   - count - sets or clears a sub-label on the input. This can be used to provide
+   *             a feedback on the number of matches, or number of available entries to search
+   *   - change - trigger a change event
+   *
+   */
 
-            this.resultCount = $('<span>',{class:"red-ui-searchBox-resultCount hide"}).appendTo(this.uiContainer);
+  $.widget("kumologica.commandBox", {
+    _create: function () {
+      var that = this;
 
-            this.element.val("");
-            this.element.on("keydown",function(evt) {
-                if (evt.keyCode === 27) {
-                    that.element.val("");
-                }
-            })
-            this.element.on("keyup",function(evt) {
-                that._change($(this).val());
-            });
+      this.currentTimeout = null;
+      this.lastSent = "";
+      let command = this.options.command || "";
 
-            this.element.on("focus",function() {
-                $("body").one("mousedown",function() {
-                    that.element.blur();
-                });
-            });
+      this.element.val(command + " ");
+      this.uiContainer = this.element.wrap("<div>").parent();
+      this.uiContainer.addClass("red-ui-commandBox-container");
 
-        },
-        _change: function(val,instant) {
-            var fireEvent = false;
-            if (val === "") {
-                this.clearButton.hide();
-                fireEvent = true;
-            } else {
-                this.clearButton.show();
-                fireEvent = (val.length >= (this.options.minimumLength||0));
-            }
-            var current = this.element.val();
-            fireEvent = fireEvent && current !== this.lastSent;
-            if (fireEvent) {
-                if (!instant && this.options.delay > 0) {
-                    clearTimeout(this.currentTimeout);
-                    var that = this;
-                    this.currentTimeout = setTimeout(function() {
-                        that.lastSent = that.element.val();
-                        that._trigger("change");
-                    },this.options.delay);
-                } else {
-                    this._trigger("change");
-                }
-            }
-        },
-        value: function(val) {
-            if (val === undefined) {
-                return this.element.val();
-            } else {
-                this.element.val(val);
-                this._change(val);
-            }
-        },
-        count: function(val) {
-            if (val === undefined || val === null || val === "") {
-                this.resultCount.text("").hide();
-            } else {
-                this.resultCount.text(val).show();
-            }
-        },
-        change: function() {
-            this._trigger("change");
+      $(
+        `<div class="red-ui-commandBox-command"><i class="fa fa-terminal"></i></div>`
+      ).prependTo(this.uiContainer);
+      this.enterButton = $(
+        '<span class="enter-command pointer">run</span>'
+      ).appendTo(this.uiContainer);
+
+      this.enterButton.on("click", function (e) {
+        e.preventDefault();
+        that.options.execute(that.element.val());
+      });
+
+      this.resultCount = $("<span>", {
+        class: "red-ui-searchBox-resultCount hide",
+      }).appendTo(this.uiContainer);
+
+      this.element.on("keydown", function (evt) {
+        if (evt.keyCode === 27) {
+          // Escape key
+          that.element.val("");
+        } else if (evt.keyCode === 13) {
+          // Enter key
+          evt.preventDefault();
+          let command = that.element.val();
+          that.options.execute(command);
         }
-    });
+      });
+      this.element.on("keyup", function (evt) {
+        that._change($(this).val());
+      });
+
+      this.element.on("focus", function () {
+        $("body").one("mousedown", function () {
+          that.element.blur();
+        });
+      });
+    },
+    _change: function (val, instant) {
+      var fireEvent = false;
+      if (val === "") {
+        // this.clearButton.hide();
+        fireEvent = true;
+      } else {
+        // this.clearButton.show();
+        fireEvent = val.length >= (this.options.minimumLength || 0);
+      }
+      var current = this.element.val();
+      fireEvent = fireEvent && current !== this.lastSent;
+      if (fireEvent) {
+        if (!instant && this.options.delay > 0) {
+          clearTimeout(this.currentTimeout);
+          var that = this;
+          this.currentTimeout = setTimeout(function () {
+            that.lastSent = that.element.val();
+            that._trigger("change");
+          }, this.options.delay);
+        } else {
+          this._trigger("change");
+        }
+      }
+    },
+    value: function (val) {
+      if (val === undefined) {
+        return this.element.val();
+      } else {
+        this.element.val(val);
+        this._change(val);
+      }
+    },
+    count: function (val) {
+      if (val === undefined || val === null || val === "") {
+        this.resultCount.text("").hide();
+      } else {
+        this.resultCount.text(val).show();
+      }
+    },
+    change: function () {
+      this._trigger("change");
+    },
+  });
 })(jQuery);
 ;RED.tabs = (function () {
   var defaultTabIcon = 'fa fa-lemon-o';
@@ -21208,7 +21320,7 @@ RED.view.tools = (function() {
     RED.sidebar.info.init();
     RED.sidebar.test.init();
     RED.sidebar.git.init();
-    //RED.sidebar.kumohub.init();
+    RED.sidebar.kumohub.init();
     RED.sidebar.azure.init();
     RED.sidebar.awsDeploy.init();
 
@@ -26730,7 +26842,833 @@ RED.sidebar.azure = (function () {
       init: init,
       show: show,
     };
-  })();;RED.palette = (function () {
+  })();;RED.sidebar.kumohub = (function () {
+  marked.setOptions({
+    renderer: new marked.Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false, 
+    sanitize: true,
+    smartLists: true,
+    smartypants: false,
+  });
+
+  var content;
+  var sections;
+  var functionSection;
+  var environmentSection;
+  var initialised = false;
+  var parameters;
+  var SELECT_KUMOHUB_PROFILE = 'Select Kumohub profile...';
+  var DEFINE_KUMOHUB_PROFILE = 'Define Kumohub profile';
+  let workspaces; // workspaces from kumohub.io
+  // store for workspace, storage, policy from profile before kumohub login
+  let profileWorkspace; 
+  let profileStage;
+  let profilePolicy;
+
+  const DEPLOYING = 'DEPLOYING';
+  const NOTDEPLOYING = 'NOTDEPLOYING';
+  let deployState = NOTDEPLOYING;
+  
+  function initCss() {
+    $('<style>')
+      .text(
+        `
+    select {
+      outline: 1.5px solid #ccc;
+    }
+    select:focus {
+      outline: 1.5px solid #ccc; 
+      outline-offset: 0px;
+    }
+    .invalid {
+      border: 1px solid red;
+    }
+    
+    .valid {
+      border: 1px solid green;
+    }
+    datalist {
+      max-height: 300px;
+      overflow-y: auto !important;
+    }
+    .editor-button-xsmall {
+      height: 16px;
+      min-width: 16px;
+      line-height: 14px;
+      font-size: 10px;
+      border-radius: 2px;
+      padding: 0 2px;
+  }
+    `
+      )
+      .appendTo(document.head);
+  }
+
+  function initHTML() {
+    initCss();
+    content = document.createElement('div');
+    content.className = 'sidebar-kumohub';
+
+    RED.actions.add('core:show-kumohub-tab', show);
+
+    var stackContainer = $('<div>', {
+      class: 'sidebar-node-info-stack',
+    }).appendTo(content);
+
+    let headerContentHtml = `
+    <div class="sidebar-title-wrapper">
+      <span>Deploy: Kumohub</span>
+    </div>
+    <div id="kumohub-sidebar-header" class="sidebar-header">
+        <div id="kumohub-instrumentation" class="node-info">
+          <div id="kumohub-profiles-wrapper">
+            <span style="padding-left: 3px">Profiles</span>
+            <select id="kumohub-sidebar-profiles" class="palette-textinput" style="padding: 0px;">
+              <option value="Select Kumohub profile..." style="color:#3988CB !important">Click to select one...</option>
+            </select>
+          </div>  
+
+          <div id="kumohub-wrapper">
+            <!-- connect btn -->
+            <div>
+            <a id="kumohub-sidebar-connect-btn" class="sidebar-header-button" href="#">
+              <i id="kumohub-sidebar-connect-icon" class="fa fa-circle" style="color: red"></i>  
+              Connect
+            </a>
+            </div>
+ 
+            <!-- deploy btn -->
+            <div style="margin-right: 4px;">
+            <a id="kumohub-sidebar-deploy-btn" class="sidebar-header-button" href="#">
+              <i id="kumohub-sidebar-deploy-icon" class="fa fa-cloud-upload"></i>  
+              Deploy
+            </a>
+            </div>
+
+            <!-- export btn -->
+            <div id="kumohub-options-dropdown">
+              <a id="kumohub-sidebar-export-btn" class="sidebar-header-button" href="#">
+                <i class="fa fa-ellipsis-h"></i>  
+              </a>
+            </div>
+            <div id="kumohub-options-dropdown-content">
+              <span id="kumohub-buildZipBtn" class="option">Export as Zip</span>
+              <!--span id="kumohub-exportServerlessBtn" class="option">Serverless</span-->
+            </div>        
+          </div>
+        </div>
+        <table hidden id="kumohub-sidebar-error" class="node-info" style="margin: 0px;">
+        <tr>
+          <td style="border: 0px solid white; padding: 3px; width: 100%;">
+            <p style="font-size: 12px; margin: 0px; text-align: center; color:red;"><span>Kumohub profile has not been configured</span></p>
+          </td>
+
+          <td style="border: 0px solid white; padding: 3px;">
+            <a id="kumohub-sidebar-error-help-btn" class="editor-button editor-button-xsmall" href="https://docs.kumologica.com/docs/guide/GettingStarted.html#installation" target="_blank">
+              <i class="fa fa-question"></i>  
+            </a>
+          </td>
+          
+          <td style="border: 0px solid white; padding: 3px 6px 3px 3px;">
+            <a id="kumohub-sidebar-error-close-btn" class="editor-button editor-button-xsmall" href="#">
+              <i class="fa fa-times"></i></a>
+          </td>
+        </tr>
+      </table> 
+    </div>
+    `;
+
+    $(headerContentHtml).appendTo(stackContainer);
+
+    let bodyContainer = $(`<div id="kumohub-sidebar-body" style="display:none"></div>`);
+    bodyContainer.appendTo(stackContainer);
+
+    sections = RED.stack
+      .create({
+        container: bodyContainer,
+      })
+      .hide();
+
+    // function section
+    functionSection = sections.add({
+      title: 'function',
+      collapsible: true,
+    });
+    functionSection.expand();
+
+    // environment section
+    environmentSection = sections.add({
+      title: 'environment',
+      collapsible: true,
+    });
+    //environmentSection.expand();
+
+    RED.sidebar.addTab({
+      id: 'kumohub',
+      label: 'Kumohub',
+      name: 'Kumohub Deployer',
+      iconClass: 'fa fa-cloud',
+      action: 'core:show-kumohub-tab',
+      content: content,
+      pinned: true,
+      enableOnEdit: true,
+      onchange: onchange,
+      onsame: onsame
+    });
+       
+    // Function content init
+    let functionSectionHtml = `
+    <table class="node-info">
+        <tr class="node-info-node-row">
+            <td>Service Name</td>
+            <td colspan="2" style="background: white"><input style="width:100%" id="kumohub-fn-name" class="palette-textinput" pattern="[a-zA-Z0-9-_]{1,64}" type="text"></td>
+        </tr>
+       <tr class="node-info-node-row">
+            <td>Description</td>
+            <td colspan="2" style="background: white"><input style="width:100%" id="kumohub-fn-description" class="palette-textinput" type="text"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Memory (MB)</td>
+            <td colspan="2" style="background: white"><input id="kumohub-fn-memory" class="palette-textinput" type="number" min="128" max="1536"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Timeout (s)</td>
+            <td colspan="2" style="background: white"><input id="kumohub-fn-timeout" class="palette-textinput" type="number" min="5" max="900"></td>
+        </tr>
+        <tr class="node-info-node-row">
+            <td>Workspace</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-workspace" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="UNDEFINED" selected="true">Undefined</option>
+              </select>
+            </td>
+        </tr>
+
+        <tr class="node-info-node-row">
+            <td>Stage</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-stage" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="UNDEFINED" selected="true">Undefined</option>
+              </select>
+            </td>
+        </tr>
+
+        <tr class="node-info-node-row">
+            <td>Policy</td>
+            <td colspan="2" style="background: white">
+              <select type="text" class="palette-textinput" id="kumohub-fn-policy" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+                <option value="Public" selected="true">Public</option>
+              </select>
+            </td>
+        </tr>
+      </table>
+    `;
+    $(functionSectionHtml).appendTo(functionSection.content);
+    functionSection.container.show();
+
+    // Environment section init
+    let environmentSectionHtml = `
+    <div style="display:flex; flex-direction: column; justify-content: flex-start;">
+        <div style="display:flex; justify-content: flex-end; padding:6px">
+          <a id="kumohub-add-environment-variable" href="#" class="editor-button editor-button-small red-ui-editableList-addButton">
+              <i class="fa fa-plus"></i> Add
+          </a>
+        </div>
+        <div id="kumohub-fn-env" style="display:flex; flex-direction: column">
+          <table id="kumohub-fn-env-table" class="node-info" style="table-layout: fixed">
+            
+          </table>
+        </div>
+    </div>
+    `;
+    $(environmentSectionHtml).appendTo(environmentSection.content);
+    environmentSection.container.show();
+
+    // Tooltips
+    RED.popover.tooltip($('#kumohub-sidebar-deploy-btn'), 'Deploy to Kumohub');
+    RED.popover.tooltip($('#kumohub-options-dropdown'), 'Other Kumohub Operations');
+    RED.popover.tooltip($('#kumohub-sidebar-connect-btn'), 'Connect to Kumohub');
+  }
+
+  function onchange(){
+    RED.actions.invoke('core:show-sidebar');
+  }
+
+  function onsame(){
+      RED.actions.invoke('core:hide-sidebar');
+  }
+
+  function sanitizeLambdaName(name) {
+    return name
+      .replace('.json', '')
+      .trim()
+      .replace(/^@/, '')
+      .replace(/[^a-zA-Z0-9-_]/g, '_')
+      .substr(0, 140);
+  }
+
+  function setLambdaName(name) {
+    $('#kumohub-fn-name').val(sanitizeLambdaName(name));
+  }
+
+  function setValues(params) {
+    // storing for setting it up after login to kumohub
+    profileWorkspace = params.workspace || params.account; 
+    profileStage = params.stage;
+    profilePolicy = params.policy;
+    console.log(`profile stored: ${profileWorkspace}  - ${profileStage} - ${profilePolicy}`);
+
+    if (!initialised) {
+      parameters = params;    
+      return;
+    }
+
+    if (params && (params.name || params.functionName)) {
+      setLambdaName(params.name || params.functionName || params["service-name"]);
+    } else {
+      if (window.__kumologica.settings.projectFlowName) {
+        setLambdaName(window.__kumologica.settings.projectFlowName);
+      }
+    }
+    if (!params) {
+      return;
+    }
+    if (params.profile) {
+      setProfile(params.profile);
+    }
+    if (params.description) {
+      $('#kumohub-fn-description').val(params.description);
+    }
+    if (params.memory) {
+      $('#kumohub-fn-memory').val(params.memory);
+    }
+    if (params.timeout) {
+      $('#kumohub-fn-timeout').val(params.timeout);
+    }
+    if (params.account) {
+      $('#kumohub-fn-workspace').val(params.workspace || params.account);
+      fillStages(params.workspace || params.account);
+    }
+    if (params.workspace) {
+      $('#kumohub-fn-workspace').val(params.workspace);
+      fillStages(params.workspace);
+    }
+
+    if (params.stage) {
+      $('#kumohub-fn-stage').val(params.stage);
+    }
+    if (params.policy) {
+      $('#kumohub-fn-policy').val(params.policy);
+    }
+
+    if (params.environment && params.environment.length > 0) {
+      let environmentTable = $('#kumohub-fn-env-table');
+
+      params.environment.forEach(function (e, i) {
+        $(`
+          <tr class="node-info-node-row">
+            <td style="background: white; width:46%"><input id="kumohub-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%" value="${e.key}"></td>
+            <td style="background: white; width:46%"><input id="kumohub-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%" value="${e.value}"></td>
+            <td id="kumohub-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+          </tr>`).appendTo(environmentTable);
+      });
+    }
+  }
+
+  function getValues() {
+    // Basic information
+    let fnProfile = getProfile();
+    let fnName = $('#kumohub-fn-name').val();
+    let fnDescription = $('#kumohub-fn-description').val();
+    let fnMemory = $('#kumohub-fn-memory').val();
+    let fnTimeout = $('#kumohub-fn-timeout').val();
+    let fnStage = $('#kumohub-fn-stage').val();
+    let fnAccount = $('#kumohub-fn-account').val();
+    let fnWorkspace = $('#kumohub-fn-workspace').val();
+    let fnPolicy = $('#kumohub-fn-policy').val();
+ 
+    // Environment variables
+    let environment = [];
+    let envvarRows = $('#kumohub-fn-env-table tr');
+
+    envvarRows.map((index, row) => {
+      let envvar = $(row).find('td').find('input');
+      let key = $(envvar[0]).val();
+      let value = $(envvar[1]).val();
+      environment.push({ key, value });
+    });
+
+    return {
+      profile: fnProfile,
+      "service-name": fnName,
+      description: fnDescription,
+      memory: fnMemory,
+      timeout: fnTimeout,
+      workspace: fnWorkspace || fnAccount,
+      stage: fnStage,
+      environment: environment,
+      policy: fnPolicy
+    };
+  }
+
+  function fillWorkspaces() {
+    let dropdown = $('#kumohub-fn-workspace');
+
+    if (workspaces.length > 0) {
+      dropdown.empty();
+    }
+    workspaces.forEach(function (w) {
+      dropdown.append($('<option></option>').val(w.name).text(w.name));
+    });
+
+    if (profileWorkspace) {
+        $('#kumohub-fn-workspace').val(profileWorkspace);
+        fillStages(profileWorkspace);
+    }
+  }
+  
+  function fillStages(fnWorkspace) {
+      
+    let dropdown = $('#kumohub-fn-stage');
+    if (fnWorkspace == "UNDEFINED") {
+      //dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      return;
+    }
+    let ws;
+    
+    if (workspaces) {
+      ws = workspaces.find(w => w.name === fnWorkspace);
+    }
+
+    if (ws) {
+      dropdown.empty();
+      if (ws.stages && ws.stages.length > 0) {
+        ws.stages.forEach(function (s) {
+          dropdown.append($('<option></option>').val(s.name).text(s.name));
+        });
+        if (profileStage) {
+           $('#kumohub-fn-stage').val(profileStage);
+           fillPolicies(fnWorkspace, profileStage);
+        }
+      } else {
+        dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      }
+
+    }
+  }
+    
+  function fillPolicies(workspace, stage) {
+      
+    let dropdown = $('#kumohub-fn-policy');
+    if (workspace == "UNDEFINED") {
+      //dropdown.append($('<option></option>').val("UNDEFINED").text("Undefined"));
+      return;
+    }
+    let ws;
+    
+    if (workspaces) {
+      ws = workspaces.find(w => w.name === workspace);
+    }
+
+    if (ws) {
+      let st = ws.stages.find(s => s.name === stage);
+      if (st && st.policies) {
+        dropdown.empty();
+
+        if (st.policies && st.policies.length > 0) {
+          st.policies.forEach(function (p) {
+            dropdown.append($('<option></option>').val(p.name).text(p.name));
+          });
+          if (profilePolicy) {
+            $('#kumohub-fn-policy').val(profilePolicy);
+          }
+        } else {
+          dropdown.append($('<option></option>').val("Public").text("Public"));
+        }
+      }
+    }
+  }
+
+  function fillProfiles() {
+    try {
+      const profiles = window.__kumologica.kumohub.listProfiles();
+      let dropdown = $('#kumohub-sidebar-profiles');
+
+      if (profiles.length > 0) {
+        dropdown.empty();
+        dropdown.append($('<option disabled>Available Kumohub Profiles</option>'));
+      }
+      profiles.forEach(function (profile) {
+        dropdown.append($('<option></option>').val(profile).text(profile));
+      });
+
+      // in case kumohub-config.json was loaded already and
+      // setValues could not select correct profile, doing it now
+      if (window.__kumologica.kumohub.profile) {
+        setProfile(window.__kumologica.kumohub.profile);
+      }
+    } catch (Error) {
+      console.log(`error: ${Error}`);
+      showProfileError();
+    }
+  }
+
+  function getProfile() {
+    return $('#kumohub-sidebar-profiles').find(':selected').val();
+  }
+
+  function setProfile(profile) {
+    window.__kumologica.kumohub.profile = profile;
+
+    // Show the body if profile is set to existing profile
+    if (profile != SELECT_KUMOHUB_PROFILE && 
+      $('#kumohub-sidebar-profiles').find('option[value=' + profile + ']').length) {
+      
+      $(`#kumohub-sidebar-profiles option[value='${SELECT_KUMOHUB_PROFILE}']`).remove();
+      $('#kumohub-sidebar-profiles').val(profile);
+    } else {
+      $('#kumohub-sidebar-profiles').val(SELECT_KUMOHUB_PROFILE);
+    }
+  }
+
+
+  function showProfileError() {
+    $('#kumohub-sidebar-error').show();
+  }
+
+  RED.events.on('settings:cloud-config-changed', function() {
+    fillProfiles();
+  });
+  
+  // event triggered when kumohub-config.json file has been loaded
+  RED.events.on('kumohub-config', function () {
+    if (!$('#kumohub-fn-name').val() &&
+      window.__kumologica.settings.projectFlowName
+    ) {
+      setLambdaName(window.__kumologica.settings.projectFlowName);
+    }
+
+    if (window.__kumologica.settings.kumohubConfig ) {
+      const params = window.__kumologica.settings.kumohubConfig.getKumohubConfig();
+
+      setValues(params);
+
+    } else {
+      console.log('kumologica.settings.kumohubConfig not present');
+    }
+  });
+
+  function initJs() {
+    fillProfiles();
+
+    // Initialize fields with default values
+    if (window.__kumologica.settings.projectFlowName) {
+      setLambdaName(window.__kumologica.settings.projectFlowName);
+    }
+
+    $('#kumohub-fn-description').val('kumologica flow');
+    $('#kumohub-fn-memory').val('512');
+    $('#kumohub-fn-timeout').val('20');
+
+    $('#kumohub-fn-timeout, #kumohub-fn-workspace, #kumohub-fn-stage, #kumohub-fn-policy, #kumohub-fn-memory, #kumohub-fn-description, #kumohub-fn-name').change(function () {
+      saveSettings();
+    });
+
+    $('#kumohub-fn-name').change(function () {
+      this.value = sanitizeLambdaName(this.value);
+    });
+
+    $('#kumohub-fn-workspace').on('change', function() {
+      fillStages( this.value );
+    });
+
+    $('#kumohub-fn-stage').on('change', function() {
+      fillPolicies($('#kumohub-fn-workspace').val(), this.value);
+    });
+    
+    $('#kumohub-sidebar-profiles').change(function () {
+      
+      if (this.value) {
+        $('#kumohub-sidebar-body').show();
+      }
+      saveSettings();
+
+      if (this.value != SELECT_KUMOHUB_PROFILE) {
+        $(`#kumohub-sidebar-profiles option[value='${SELECT_KUMOHUB_PROFILE}']`).remove();
+        window.__kumologica.kumohub.profile = this.value;
+        disconnectFromKumohub();
+      }
+    });
+
+    // Attach the environment variables
+    $('#kumohub-add-environment-variable').click((e) => {
+      let environmentTable = $('#kumohub-fn-env-table');
+      let environmentRowHtml = `
+        <tr class="node-info-node-row">
+          <td style="background: white; width:46%"><input id="kumohub-fn-env-key" class="palette-textinput" type="text" placeholder="key" style="width:100%"></td>
+          <td style="background: white; width:46%"><input id="kumohub-fn-env-val" class="palette-textinput" type="text" placeholder="value" style="width:100%"></td>
+          <td id="kumohub-fn-env-row" style="text-align:center; width:8%" class="removeRow"><i class="fa fa-minus"></i></td>
+        </tr>`;
+      $(environmentRowHtml).appendTo(environmentTable);
+
+      $('#kumohub-fn-env-table')
+        .find('input')
+        .each(function () {
+          $(this).change(function () {
+            saveSettings();
+          });
+        });
+    });
+
+    $('#kumohub-fn-env-table')
+      .find('input')
+      .each(function () {
+        $(this).change(function () {
+          saveSettings();
+        });
+      });
+
+    $('#kumohub-fn-env-table').on('click', '.removeRow', function () {
+      $(this).parent().remove();
+      saveSettings();
+    });
+
+    // Close export menu when click in the window
+    $('.sidebar-kumohub').click(function (e) {
+      $('#kumohub-options-dropdown-content').hide();
+    });
+
+    // Connect to AWS button
+    $('#kumohub-sidebar-connect-btn').click((e) => {
+      e.preventDefault();
+      connectToKumohub();
+    });
+
+    // Deploy to kumohub button
+    $('#kumohub-sidebar-deploy-btn').click((e) => {
+      e.preventDefault();
+      deploy();
+    });
+    
+    $('#kumohub-buildZipBtn').click((e) => {
+      e.preventDefault();
+      hideMenu();
+      buildZip();
+    });
+
+    // Export cloudformation script
+    $('#kumohub-exportCloudFormationBtn').click((e) => {
+      e.preventDefault();
+      hideMenu();
+      exportScript(window.__kumologica.cloud.provider.aws);
+    });
+
+    // Export serverless script
+    $('#kumohub-exportServerlessBtn').click((e) => {
+      e.preventDefault();
+      hideMenu();
+      exportScript(window.__kumologica.cloud.provider.serverless);
+    });
+
+    $('#kumohub-options-dropdown').click((e) => {
+      e.stopPropagation();
+
+      $('#kumohub-sidebar-export-btn').toggleClass('dropdown-selected');
+
+      $('#kumohub-options-dropdown-content').toggle();
+    });
+
+    initialised = true;
+    if (parameters) {
+      setValues(parameters);
+    }
+
+    connectUIDisconnected();
+  }
+
+  function hideMenu() {
+    $('#kumohub-sidebar-export-btn').removeClass('dropdown-selected');
+    $('#kumohub-options-dropdown-content').hide();
+  }
+
+  async function exportScript(provider) {
+    
+    $('#workspace-terminal').show();
+    try {
+      await window.__kumologica.cloud.generateScript(
+        provider,
+        RED.header.getCurrentProjectInfo(),
+        getValues()
+      );
+    } catch (Error) {
+      handleError(Error);
+    }
+  }
+
+  async function buildZip(provider) {
+    
+    $('#workspace-terminal').show();
+    try {
+      await window.__kumologica.kumohub.build(RED.header.getCurrentProjectInfo());
+      /*await window.__kumologica.cloud.generateScript(
+        provider,
+        RED.header.getCurrentProjectInfo(),
+        getValues()
+      );*/
+    } catch (Error) {
+      handleError(Error);
+    }
+  }
+
+  async function connectToKumohub() {
+    profile = getProfile();
+
+    if (!profile || profile == SELECT_KUMOHUB_PROFILE) {
+      RED.notify(`<strong>Error</strong>: Please select Kumohub profile before connecting to Kumohub account.`, 'error');
+      return;
+    }
+
+    if (window.__kumologica.kumohub.isLoggedIn(profile)) {
+      RED.notify(`<strong>Information</strong>: Already connected to ${profile} Kumohub account.`, 'info');
+      return;
+    }
+
+    connectUIConnecting();
+    
+    try {
+      await window.__kumologica.kumohub.login(profile);
+      workspaces = await window.__kumologica.kumohub.getWorkspaces(profile);
+
+      fillWorkspaces(profileWorkspace);
+     } catch (err) {
+      connectUIDisconnected();
+
+      RED.notify(`<strong>Error</strong>: ${err.stderr? err.stderr: err}`, 'error');
+      return;
+    }
+    connectUIConnected();
+  }
+
+  function disconnectFromKumohub() {
+    window.__kumologica.kumohub.logout();
+    connectUIDisconnected();
+  }
+
+  function connectUIDisconnected() {
+    // show connect button
+    $('#kumohub-sidebar-connect-btn').show();
+    if ($('#kumohub-sidebar-connect-btn') && $('#kumohub-sidebar-connect-btn').html()) { 
+      $('#kumohub-sidebar-connect-btn').html($('#kumohub-sidebar-connect-btn').html().replace('Connecting', 'Connect'));
+    }
+    $('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+    $('#kumohub-sidebar-connect-icon').css({'color': 'red'});
+    // hide deploy and export buttons 
+    $('#kumohub-sidebar-deploy-btn').hide();
+    $('#kumohub-sidebar-export-btn').hide();
+    $('#kumohub-sidebar-body').hide();
+  }
+
+  function connectUIConnecting() {
+    $('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-spinner fa-spin'});
+    $('#kumohub-sidebar-connect-icon').css({'color': 'black'});
+  }
+
+  function connectUIConnected() {
+    // hide connect button
+    $('#kumohub-sidebar-connect-btn').hide();
+    //$('#kumohub-sidebar-connect-btn').html($('#kumohub-sidebar-connect-btn').html().replace('Connect', 'Connected'));
+    //$('#kumohub-sidebar-connect-icon').attr({'class': 'fa fa-circle'});
+    //$('#kumohub-sidebar-connect-icon').css({'color': 'green'});
+
+    // show deploy and options buttons 
+    $('#kumohub-sidebar-deploy-btn').show();
+
+    // dont show until functionality implemented
+    $('#kumohub-sidebar-export-btn').show();
+    $('#kumohub-sidebar-body').show();
+  }
+
+  function deployingUIDeploying() {
+    $('#kumohub-sidebar-deploy-icon').attr({'class': 'fa fa-spinner fa-spin'});
+  }
+  function deployingUINotDeploying() {
+    $('#kumohub-sidebar-deploy-icon').attr({'class': 'fa fa-cloud-upload'});
+  }
+
+  async function deploy() {
+
+    const profile = getProfile();
+    if (!profile || profile == SELECT_KUMOHUB_PROFILE) {
+      RED.notify(`Please select kumohub profile before deploying flows.`, 'error');
+      return;
+    }
+
+    if (deployState == DEPLOYING) {
+      RED.notify(`<strong>Information</strong>: Already deploying to Kumohub.`, 'info');
+      return;
+    }
+    
+    RED.deploy.save();
+
+    deployingUIDeploying();
+    deployState = DEPLOYING;
+
+    $('#workspace-terminal').show();
+
+    let params = getValues();
+  
+    let envs = params.environment;
+    
+    if (envs) {
+      let variables = {Variables: {}};
+      
+      envs.forEach(function(e) {
+        variables.Variables[e.key] = e.value;  
+      });
+      params.environment = {};
+      params.environment = JSON.stringify(variables);
+    };
+
+    try {
+      await window.__kumologica.kumohub.deploy(
+        RED.header.getCurrentProjectInfo(),
+        params
+      ); 
+
+    } catch (Error) {
+      handleError(Error);
+    }
+
+    deployState = NOTDEPLOYING;
+    deployingUINotDeploying();
+  }
+
+  function handleError(error) {
+    let msg = error.toString();
+    RED.notify(msg, 'error');
+  }
+
+  function saveSettings() {
+    window.__kumologica.settings.kumohubConfig.setKumohubConfig(getValues());
+  }
+
+  function show() {
+    RED.sidebar.show('kumohub');
+  }
+
+  function init() {
+    initHTML();
+    initJs();
+  }
+  
+  return {
+    init: init,
+    show: show,
+  };
+})();;RED.palette = (function () {
   const options = {
     nodes: {
       header: 'palette-option-nodes-a',
@@ -35550,15 +36488,15 @@ RED.notifications = (function() {
   var results = [];
 
   function indexProperty(node, label, property) {
-    if (typeof property === 'string' || typeof property === 'number') {
-      property = ('' + property).toLowerCase();
+    if (typeof property === "string" || typeof property === "number") {
+      property = ("" + property).toLowerCase();
       index[property] = index[property] || {};
       index[property][node.id] = { node: node, label: label };
     } else if (Array.isArray(property)) {
       property.forEach(function (prop) {
         indexProperty(node, label, prop);
       });
-    } else if (typeof property === 'object') {
+    } else if (typeof property === "object") {
       for (var prop in property) {
         if (property.hasOwnProperty(prop)) {
           indexProperty(node, label, property[prop]);
@@ -35569,13 +36507,13 @@ RED.notifications = (function() {
   function indexNode(n) {
     var l = RED.utils.getNodeLabel(n);
     if (l) {
-      l = ('' + l).toLowerCase();
+      l = ("" + l).toLowerCase();
       index[l] = index[l] || {};
       index[l][n.id] = { node: n, label: l };
     }
-    l = l || n.label || n.name || n.id || '';
+    l = l || n.label || n.name || n.id || "";
 
-    var properties = ['id', 'type', 'name', 'label', 'info'];
+    var properties = ["id", "type", "name", "label", "info"];
     if (n._def && n._def.defaults) {
       properties = properties.concat(Object.keys(n._def.defaults));
     }
@@ -35603,14 +36541,14 @@ RED.notifications = (function() {
 
   /**
    * User search when typing it the search box...
-   * @param {string} val 
+   * @param {string} val
    */
   function search(val) {
-    searchResults.editableList('empty');
+    searchResults.editableList("empty");
     var typeFilter;
     var m = /(?:^| )type:([^ ]+)/.exec(val);
     if (m) {
-      val = val.replace(/(?:^| )type:[^ ]+/, '');
+      val = val.replace(/(?:^| )type:[^ ]+/, "");
       typeFilter = m[1];
     }
 
@@ -35622,27 +36560,25 @@ RED.notifications = (function() {
         // Excluding tabs
         // results = results.filter((r) => r.node.type !== 'tab');
         for (i = 0; i < Math.min(results.length, 25); i++) {
-          searchResults.editableList('addItem', results[i]);
+          searchResults.editableList("addItem", results[i]);
         }
       } else {
-        searchResults.editableList('addItem', {});
+        searchResults.editableList("addItem", {});
       }
     } else {
       let commands = searchCommands();
-      commands.forEach(c => {
-        searchResults.editableList('addItem', c);
+      commands.forEach((c) => {
+        searchResults.editableList("addItem", c);
       });
 
-      let results = $('#search-result-list');
+      let results = $("#search-result-list");
       $('<div class="searchSeparator"></div>').appendTo(results);
 
-
       let allNodes = searchNodes();
 
-      allNodes.forEach(n => {
-        searchResults.editableList('addItem', n);
-      })
-
+      allNodes.forEach((n) => {
+        searchResults.editableList("addItem", n);
+      });
     }
   }
 
@@ -35681,56 +36617,89 @@ RED.notifications = (function() {
         results.push(nodes[list[i]]);
       }
     } else {
-      let setResults = new Set()
+      let setResults = new Set();
       for (const i in index) {
-        index[i].forEach(n => {
+        index[i].forEach((n) => {
           if (setResults.has(n.node.id)) return;
           else {
             setResults.add(n.node.id);
-            if (n.node.type === 'tab') {
+            if (n.node.type === "tab") {
               results.push({ label: n.node.label, node: n.node });
             } else {
               results.push({ label: n.node.name, node: n.node });
             }
           }
-        })
+        });
       }
-
     }
     return results;
-
   }
   /**
    * Returns a list of commands that will be added to the search window when it is opened
    */
   function searchCommands() {
-
     return [
-      { type: 'command', title: 'Open Settings', action: 'core:settings:open', shortcut: `${CtrlOrCmd()} /` },
-      { type: 'command', title: 'Show Project Info', action: 'core:project-info' },
       {
-        type: 'command', title: 'Run Test...', cb: () => {
-          if (!$('.sidebar-test').is(':visible')) {
-            $('#red-ui-tab-test-link-button').click();
+        type: "command",
+        title: "Open Settings",
+        action: "core:settings:open",
+        shortcut: `${CtrlOrCmd()} /`,
+      },
+      {
+        type: "command",
+        title: "Show Project Info",
+        action: "core:project-info",
+      },
+      {
+        type: "command",
+        title: "Run Test...",
+        cb: () => {
+          if (!$(".sidebar-test").is(":visible")) {
+            $("#red-ui-tab-test-link-button").click();
           }
 
-          $('#test-sidebar-run-btn').click();
-        }
+          $("#test-sidebar-run-btn").click();
+        },
+      },
+      {
+        type: "command",
+        title: "Open Log Viewer",
+        cb: () => {
+          $("#workspace-terminal").toggle();
+        },
+        shortcut: `${CtrlOrCmd()} T`,
+      },
+      {
+        type: "command",
+        title: "Import Flow",
+        action: "core:show-import-dialog",
+        shortcut: `${CtrlOrCmd()} I`,
       },
       {
-        type: 'command', title: 'Open Log Viewer', cb: () => {
-          $('#workspace-terminal').toggle()
-        }, shortcut: `${CtrlOrCmd()} T`
+        type: "command",
+        title: "Export Flow",
+        action: "core:show-export-dialog",
+        shortcut: `${CtrlOrCmd()} E`,
       },
-      { type: 'command', title: 'Import Flow', action: 'core:show-import-dialog', shortcut: `${CtrlOrCmd()} I` },
-      { type: 'command', title: 'Export Flow', action: 'core:show-export-dialog', shortcut: `${CtrlOrCmd()} E` },
       // { type: 'command', title: 'SignIn to Kumologica.dev', action: 'core:signup:show' },
       {
-        type: 'command', title: 'Help: Documentation', cb: () => {
-          window.__kumologica.electron.shell.openExternal('https://docs.kumologica.com/docs/guide/Intro.html');
-        }
-      }
-    ]
+        type: "command",
+        title: "Task: npm install",
+        action: "npm:install",
+        cb: () => {
+          RED.actions.invoke("core:search:close");
+        },
+      },
+      {
+        type: "command",
+        title: "Help: Documentation",
+        cb: () => {
+          window.__kumologica.electron.shell.openExternal(
+            "https://docs.kumologica.com/docs/guide/Intro.html"
+          );
+        },
+      },
+    ];
   }
 
   function CtrlOrCmd() {
@@ -35738,7 +36707,7 @@ RED.notifications = (function() {
   }
 
   function ensureSelectedIsVisible() {
-    var selectedEntry = searchResults.find('li.selected');
+    var selectedEntry = searchResults.find("li.selected");
     if (selectedEntry.length === 1) {
       var scrollWindow = searchResults.parent();
       var scrollHeight = scrollWindow.height();
@@ -35747,21 +36716,31 @@ RED.notifications = (function() {
       var h = selectedEntry.height();
       if (y + h > scrollHeight) {
         scrollWindow.animate(
-          { scrollTop: '-=' + (scrollHeight - (y + h) - 10) },
+          { scrollTop: "-=" + (scrollHeight - (y + h) - 10) },
           50
         );
       } else if (y < 0) {
-        scrollWindow.animate({ scrollTop: '+=' + (y - 10) }, 50);
+        scrollWindow.animate({ scrollTop: "+=" + (y - 10) }, 50);
       }
     }
   }
 
+  function shouldInvokeCommand(value) {
+    if (value.startsWith("npm install")) {
+      RED.actions.invoke("core:search:close");
+      RED.actions.invoke("npm:install", value);
+      RED.modules.updateValue(value);
+      return true;
+    } else {
+      return false;
+    }
+  }
   function createDialog() {
-    dialog = $('<div>', {
-      id: 'red-ui-search',
-      class: 'red-ui-search',
-    }).appendTo('#main-container');
-    var searchDiv = $('<div>', { class: 'red-ui-search-container' }).appendTo(
+    dialog = $("<div>", {
+      id: "red-ui-search",
+      class: "red-ui-search",
+    }).appendTo("#main-container");
+    var searchDiv = $("<div>", { class: "red-ui-search-container" }).appendTo(
       dialog
     );
     searchInput = $(
@@ -35769,25 +36748,30 @@ RED.notifications = (function() {
     )
       .appendTo(searchDiv)
       .searchBox({
-        delay: 200,
+        delay: 100,
         change: function () {
-          search($(this).val());
+          let value = $(this).val();
+          if (!shouldInvokeCommand(value)) {
+            search($(this).val());
+          }
         },
       });
 
-    searchInput.on('keydown', function (evt) {
+    searchInput.on("keydown", function (evt) {
       var children;
-      if (results.length > 0) {
+
+      // Check for embedded commands
+      if (!shouldInvokeCommand(evt.target.value) && results.length > 0) {
         if (evt.keyCode === 40) {
           // Down
           children = searchResults.children();
           if (selected < children.length - 1) {
             if (selected > -1) {
-              $(children[selected]).removeClass('selected');
+              $(children[selected]).removeClass("selected");
             }
             selected++;
           }
-          $(children[selected]).addClass('selected');
+          $(children[selected]).addClass("selected");
           ensureSelectedIsVisible();
           evt.preventDefault();
         } else if (evt.keyCode === 38) {
@@ -35795,11 +36779,11 @@ RED.notifications = (function() {
           children = searchResults.children();
           if (selected > 0) {
             if (selected < children.length) {
-              $(children[selected]).removeClass('selected');
+              $(children[selected]).removeClass("selected");
             }
             selected--;
           }
-          $(children[selected]).addClass('selected');
+          $(children[selected]).addClass("selected");
           ensureSelectedIsVisible();
           evt.preventDefault();
         } else if (evt.keyCode === 13) {
@@ -35812,13 +36796,13 @@ RED.notifications = (function() {
     });
     searchInput.i18n();
 
-    var searchResultsDiv = $('<div>', {
-      class: 'red-ui-search-results-container',
+    var searchResultsDiv = $("<div>", {
+      class: "red-ui-search-results-container",
     }).appendTo(dialog);
 
-    searchResults = $('<ol>', {
-      id: 'search-result-list',
-      style: 'position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;',
+    searchResults = $("<ol>", {
+      id: "search-result-list",
+      style: "position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;",
     })
       .appendTo(searchResultsDiv)
       .editableList({
@@ -35826,36 +36810,38 @@ RED.notifications = (function() {
         addItem: function (container, i, object) {
           var node = object.node;
 
-          // If node === undefined and object is object => object is the command 
+          // If node === undefined and object is object => object is the command
           // If node === undefiend and object is empty => user search yield no results
           // otherwise is a normal search ...
 
           if (node === undefined && !object) {
             // case of user search yield no results
-            $('<div>', { class: 'red-ui-search-empty' })
-              .text('No matches found')
+            $("<div>", { class: "red-ui-search-empty" })
+              .text("No matches found")
               .appendTo(container);
           } else if (node === undefined && object) {
             // case of initial display of options (commands & tabs ) ... (object is a command)
-            if (object.type === 'command') {
-
+            if (object.type === "command") {
               // Main result container
-              var div = $('<a>', {
-                href: '#',
-                class: 'red-ui-search-result',
+              var div = $("<a>", {
+                href: "#",
+                class: "red-ui-search-result",
               }).appendTo(container);
 
               // Command title here
-              var contentDescription = $('<div>', {
-                class: 'red-ui-search-result-description',
+              var contentDescription = $("<div>", {
+                class: "red-ui-search-result-description",
               }).appendTo(div);
 
-              $('<div>', { class: 'red-ui-search-result-command-label', style: 'width:95%' })
+              $("<div>", {
+                class: "red-ui-search-result-command-label",
+                style: "width:95%",
+              })
                 .text(object.title)
                 .appendTo(contentDescription);
 
               // Type of object (command)
-              $('<div>', { class: 'red-ui-search-result-command-shortcut' })
+              $("<div>", { class: "red-ui-search-result-command-shortcut" })
                 .text(object.shortcut)
                 .appendTo(div);
 
@@ -35864,46 +36850,48 @@ RED.notifications = (function() {
                 if (object.action) {
                   hide();
                   window.setTimeout(() => {
-                    RED.actions.invoke(object.action)
-                  }, 10)
+                    RED.actions.invoke(object.action);
+                  }, 10);
                 } else {
                   hide();
                   window.setTimeout(() => {
-                    object.cb()
-                  }, 10)
+                    object.cb();
+                  }, 10);
                 }
-
               });
             }
-
           } else {
             var def = node._def;
-            var div = $('<a>', {
-              href: '#',
-              class: 'red-ui-search-result',
+            var div = $("<a>", {
+              href: "#",
+              class: "red-ui-search-result",
             }).appendTo(container);
 
             // ::: Part of the description
-            var contentDescription = $('<div>', {
-              class: 'red-ui-search-result-description',
+            var contentDescription = $("<div>", {
+              class: "red-ui-search-result-description",
             }).appendTo(div);
 
-            // ::: Part of the icon here... 
-            var nodeDiv = $('<div>', {
-              class: 'ui-search-result-node',
+            // ::: Part of the icon here...
+            var nodeDiv = $("<div>", {
+              class: "ui-search-result-node",
             }).appendTo(contentDescription);
 
             var colour = RED.utils.getNodeColor(node.type, def);
             var icon_url = RED.utils.getNodeIcon(def, node);
 
-            if (node.type === 'tab') {
-              var iconContainer = $('<div/>', {
-                class: 'palette_icon_container',
+            if (node.type === "tab") {
+              var iconContainer = $("<div/>", {
+                class: "palette_icon_container",
               }).appendTo(nodeDiv);
-              RED.utils.createIconElement('icons/kumologica-core/kumologica-tab.png', iconContainer, true);
+              RED.utils.createIconElement(
+                "icons/kumologica-core/kumologica-tab.png",
+                iconContainer,
+                true
+              );
             } else {
-              var iconContainer = $('<div/>', {
-                class: 'palette_icon_container',
+              var iconContainer = $("<div/>", {
+                class: "palette_icon_container",
               }).appendTo(nodeDiv);
               RED.utils.createIconElement(icon_url, iconContainer, true);
             }
@@ -35912,22 +36900,22 @@ RED.notifications = (function() {
               var workspace = RED.nodes.workspace(node.z);
               if (!workspace) {
                 workspace = RED.nodes.subflow(node.z);
-                workspace = 'subflow:' + workspace.name;
+                workspace = "subflow:" + workspace.name;
               } else {
                 workspace = workspace.label; //'flow:' + workspace.label
               }
-              $('<div>', { class: 'red-ui-search-result-node-flow' })
+              $("<div>", { class: "red-ui-search-result-node-flow" })
                 .text(workspace)
                 .appendTo(div);
             }
 
-            $('<div>', { class: 'red-ui-search-result-node-label' })
+            $("<div>", { class: "red-ui-search-result-node-label" })
               .text(object.label || node.id)
               .appendTo(contentDescription);
-            $('<div>', { class: 'red-ui-search-result-node-type' })
+            $("<div>", { class: "red-ui-search-result-node-type" })
               .text(node.type)
               .appendTo(contentDescription);
-            $('<div>', { class: 'red-ui-search-result-node-id' })
+            $("<div>", { class: "red-ui-search-result-node-id" })
               .text(node.id)
               .appendTo(contentDescription);
 
@@ -35954,15 +36942,15 @@ RED.notifications = (function() {
 
   function show(v) {
     // Disable the project dialog
-    RED.actions.invoke('core:project-info:close');
-    RED.actions.invoke('core:settings:close');
+    RED.actions.invoke("core:project-info:close");
+    RED.actions.invoke("core:settings:close");
 
     if (!visible) {
-      RED.keyboard.add('*', 'escape', function () {
+      RED.keyboard.add("*", "escape", function () {
         hide();
       });
 
-      $('#main-container').click(() => {
+      $("#main-container").click(() => {
         hide();
       });
 
@@ -35972,24 +36960,22 @@ RED.notifications = (function() {
         createDialog();
       }
       dialog.slideDown(300);
-      searchInput.searchBox('value', v);
-      RED.events.emit('search:open');
+      searchInput.searchBox("value", v);
+      RED.events.emit("search:open");
       visible = true;
       window.setTimeout(() => {
-        searchInput.focus()
+        searchInput.focus();
       }, 50);
 
       // Populate search results with commands and tabs at least
       search();
     }
-
-
   }
 
   function hide() {
     if (visible) {
-      $('#main-container').off('click');
-      RED.keyboard.remove('escape');
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
       visible = false;
       //   $('#header-shade').hide();
       //   $('#editor-shade').hide();
@@ -35998,28 +36984,28 @@ RED.notifications = (function() {
       // $('#sidebar-separator').show();
       if (dialog !== null) {
         dialog.slideUp(200, function () {
-          searchInput.searchBox('value', '');
+          searchInput.searchBox("value", "");
         });
       }
-      RED.events.emit('search:close');
+      RED.events.emit("search:close");
     }
   }
 
   function init() {
-    RED.actions.add('core:search', show);
-    RED.actions.add('core:search:close', hide);
+    RED.actions.add("core:search", show);
+    RED.actions.add("core:search:close", hide);
 
-    RED.events.on('type-search:open', function () {
+    RED.events.on("type-search:open", function () {
       disabled = true;
     });
-    RED.events.on('type-search:close', function () {
+    RED.events.on("type-search:close", function () {
       disabled = false;
     });
 
-    $('#header-shade').on('mousedown', hide);
-    $('#editor-shade').on('mousedown', hide);
-    $('#palette-shade').on('mousedown', hide);
-    $('#sidebar-shade').on('mousedown', hide);
+    $("#header-shade").on("mousedown", hide);
+    $("#editor-shade").on("mousedown", hide);
+    $("#palette-shade").on("mousedown", hide);
+    $("#sidebar-shade").on("mousedown", hide);
   }
 
   return {
@@ -36027,7 +37013,171 @@ RED.notifications = (function() {
     show: show,
     hide: hide,
     reveal: reveal,
-    revealByNodeId: revealByNodeId
+    revealByNodeId: revealByNodeId,
+  };
+})();
+;RED.modules = (function () {
+  let dialog;
+  let commandInputContainer;
+  let visible = false;
+
+  const NPM_INSTALL_CMD = "npm install";
+  function createDialog() {
+    console.log("[RED.modules.createDialog] Invoked");
+
+    let $mainContainer = $("#main-container");
+
+    dialog = $(
+      `<div id="modules-dialog-container" class="red-ui-search"></div>`
+    ).appendTo($mainContainer);
+
+    dialog.on("click", function (e) {
+      e.stopPropagation();
+    });
+
+    console.log(
+      "[RED.modules.createDialog] Looking for hook for main-container",
+      $("#main-container")
+    );
+
+    commandInputContainer = $("<div>", {
+      class: "command-input-container",
+    }).appendTo(dialog);
+
+    installInput = $(
+      `<input type="text" placeholder="Type module to install...">`
+    )
+      .appendTo(commandInputContainer)
+      .commandBox({
+        command: NPM_INSTALL_CMD,
+        delay: 100,
+        change: function () {
+          evaluateCommand($(this).val());
+        },
+        execute: function (command) {
+          hide();
+          $("#workspace-terminal").show();
+          console.log("[modules] command received", command);
+          executeCommand(command);
+        },
+      });
+    console.log("[RED.modules.createDialog] 2");
+
+    installInput.on("keydown", function (evt) {
+      if (evt.key === "Enter" || evt.keyCode === 13) {
+        evt.preventDefault(); // Prevent default action if necessary
+        evaluateCommand($(this).val());
+      }
+    });
+
+    installInput.on("paste", function (evt) {
+      evt.preventDefault();
+
+      let clipboardData =
+        evt.originalEvent.clipboardData || window.clipboardData;
+      let pastedData = clipboardData.getData("Text");
+      if (pastedData.startsWith(NPM_INSTALL_CMD)) {
+        pastedData = pastedData.slice(NPM_INSTALL_CMD.length).trim();
+      }
+
+      installInput.commandBox("value", `${NPM_INSTALL_CMD} ${pastedData}`);
+    });
+  }
+
+  function init() {
+    RED.actions.add("npm:install", show);
+    RED.actions.add("npm:install:close", hide);
+  }
+
+  function show(v) {
+    if (!visible) {
+      RED.keyboard.add("*", "escape", function () {
+        hide();
+      });
+
+      $("#main-container").click(() => {
+        hide();
+      });
+
+      console.log("[modules.show] dialog?", dialog);
+      if (!dialog) {
+        createDialog();
+      }
+      // restore the value to the original
+      installInput.commandBox("value", NPM_INSTALL_CMD + " ");
+      visible = true;
+      console.log("[modules.show] dialog created");
+      dialog.slideDown(300);
+
+      RED.events.emit("modules:install");
+      window.setTimeout(() => {
+        installInput.focus();
+      }, 50);
+    }
+  }
+  function updateValue(value) {
+    installInput.commandBox("value", value);
+  }
+  function hide() {
+    if (visible) {
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
+      visible = false;
+      if (dialog !== null) {
+        dialog.slideUp(200, function () {
+          installInput.commandBox("value", NPM_INSTALL_CMD);
+        });
+      }
+      RED.events.emit("modules:close");
+    }
+  }
+
+  function evaluateCommand(module) {
+    // check that module contains the prefix: NPM_INSTALL_CMD otherwise quit the app
+    if (!module.startsWith(NPM_INSTALL_CMD)) {
+      hide();
+      RED.actions.invoke("core:search");
+    } else {
+      const moduleName = module.slice(NPM_INSTALL_CMD.length).trim();
+      console.log(`npm install ${moduleName}`);
+    }
+  }
+
+  async function executeCommand(command) {
+    try {
+      await window.__kumologica.command.npmInstall(command);
+      RED.notifications.notify(
+        "<b>Task Completed Successfully</b></br>Please reload the designer to update the nodes palette.",
+        {
+          type: "success",
+          buttons: [
+            {
+              text: "Reload",
+              click: () => {
+                window.__kumologica.main.dispatch("restart-requested");
+              },
+            },
+          ],
+          fixed: true,
+        },
+        true,
+        undefined
+      );
+    } catch (err) {
+      RED.notifications.notify(
+        "<b>Error: Task Failed</b></br>The task could not be completed due to errors. Check the logs for details",
+        "error",
+        undefined,
+        5000
+      );
+    }
+  }
+
+  return {
+    init,
+    show,
+    hide,
+    updateValue,
   };
 })();
 ;RED.projectInfo = (function () {
@@ -36266,62 +37416,67 @@ RED.notifications = (function() {
     getWorkspaceInfo
   };
 })();
-;RED.uiSettings = (function(){
-    let testConfigStore;
-    let cloudConfigStore   = window.__kumologica.settings.cloudConfigStore;
-    let networkConfigStore = window.__kumologica.settings.networkConfigStore
-    let shell      = window.__kumologica.electron.shell;
-    let dialog     = null;
-    let visible    = false;
-    let cmInstanceCloud = null;
-    let cmInstanceEnvvars = null;
-    let totalHeightAvailable;
-
-    let screen;
-
-    function getScreen() {
-      if (!screen){
-        // we get a reference here and not like the rest of the stores, as the testConfig relies on the project details set which are injected in the header.
-        testConfigStore = window.__kumologica.settings.testConfig;
-        // initialize the screen now
-        screen = [
-          { "selected": true,
-            "id": "ui-settings-creds",
-            "label": "Cloud Profiles",
-            "body": {
-              "title": "Cloud Profiles",
-              "subtitle": `
+;RED.uiSettings = (function () {
+  let testConfigStore;
+  let cloudConfigStore = window.__kumologica.settings.cloudConfigStore;
+  let networkConfigStore = window.__kumologica.settings.networkConfigStore;
+  let shell = window.__kumologica.electron.shell;
+  let dialog = null;
+  let visible = false;
+  let cmInstanceCloud = null;
+  let cmInstanceEnvvars = null;
+  let totalHeightAvailable;
+
+  let screen;
+
+  function getScreen() {
+    if (!screen) {
+      // we get a reference here and not like the rest of the stores, as the testConfig relies on the project details set which are injected in the header.
+      testConfigStore = window.__kumologica.settings.testConfig;
+      // initialize the screen now
+      screen = [
+        {
+          selected: true,
+          id: "ui-settings-creds",
+          label: "Cloud Profiles",
+          body: {
+            title: "Cloud Profiles",
+            subtitle: `
                 Configure all of your cloud profile settings that can be used by this designer to support testing or deploying.
                 <a href="https://docs.kumologica.com/docs/guide/Intro.html" target="_blank">Learn more</a>`,
-              "html": `
+            html: `
                 <div>
                   <div id="fileLocationPath">
                       <span id="settingFilePath">${cloudConfigStore.getCloudConfigFileFullPath()}</span>
                   </div>
                   <textarea id="cloud-settings-editor" rows="20">
                   </textarea>
-                </div>`
-            },
-            "onInit": () => {
-              // load content of config credentials file: ~/.kumologica/credentials
-              let cloudConfigContent = cloudConfigStore.readCloudConfigFile();
-              cmInstanceCloud = initEditor('cloud-settings-editor', cloudConfigContent);
-            },
-            "onSelect": () => {
-              cmInstanceCloud.refresh();
-            },
-            "onSave": () => {
-              cloudConfigStore.writeCloudConfigFile(cmInstanceCloud.getValue());
-              RED.events.emit('settings:cloud-config-changed');
-            }
+                </div>`,
           },
-          {
-            "id": "ui-settings-network",
-            "label": "Network",
-            "body": {
-              "title": "Proxy Server Settings",
-              "subtitle": "Configure the proxy settings used by the designer. Flows will use the proxy specified on the nodes instead.",
-              "html": `
+          onInit: () => {
+            // load content of config credentials file: ~/.kumologica/credentials
+            let cloudConfigContent = cloudConfigStore.readCloudConfigFile();
+            cmInstanceCloud = initEditor(
+              "cloud-settings-editor",
+              cloudConfigContent
+            );
+          },
+          onSelect: () => {
+            cmInstanceCloud.refresh();
+          },
+          onSave: () => {
+            cloudConfigStore.writeCloudConfigFile(cmInstanceCloud.getValue());
+            RED.events.emit("settings:cloud-config-changed");
+          },
+        },
+        {
+          id: "ui-settings-network",
+          label: "Network",
+          body: {
+            title: "Proxy Server Settings",
+            subtitle:
+              "Configure the proxy settings used by the designer. Flows will use the proxy specified on the nodes instead.",
+            html: `
                 <div>
                   <form id="proxy-options-div">
                     <input type="radio" id="proxy-option-default" name="proxy-option" style="margin:0"> Use default operating system settings<br>
@@ -36332,45 +37487,45 @@ RED.notifications = (function() {
                     <div class="option"><label>Port</label><input type="text" id="proxy-port" /></div>
                   </div>
                   <div id="proxy-auth">
-                    <div id="proxyCredsRequiredBox" style="display: flex">
-                      <input type="checkbox" id="proxyAuthRequired" style="margin-right: 3px">
+                    <div id="proxyCredsRequiredBox" style="display: flex; align-items: flex-start">
+                      <input type="checkbox" id="proxyAuthRequired" style="margin-top: 3px; margin-right: 3px">
                         <label>Proxy server requires username and password</label>
                     </div>
-                    <div id="proxyCredsBox" style="padding-left: 40px">
+                    <div id="proxyCredsBox" style="padding-top: 10px;padding-left: 40px">
                       <div class="option"><label>Username</label><input type="text" id="proxy-auth-username" style="width:50%" /></div>
                       <div class="option"><label>Password</label><input type="password" id="proxy-auth-password" style="width:50%"/></div>
                     </div>
                   </div>
                 </div>
-              `
-            },
-            "onInit": () => {
-              // load content of config credentials file: ~/.kumologica/settings
-              let proxySettings = networkConfigStore.getProxyDetails();
-              initProxySettings(proxySettings);
-              handleProxySettingsEvent();
-            },
-            "onSelect": () => {},
-            "onSave": () => {
-              // Save proxy details
-              networkConfigStore.saveProxyDetails(
-                $('#proxy-option-custom').is(':checked'), // custom clicked?
-                $('#proxy-server').val(), // host
-                $('#proxy-port').val(), // port
-                $('#proxyAuthRequired').is(':checked'), // authentication clicked?
-                $('#proxy-auth-username').val(), // username
-                $('#proxy-auth-password').val() // password
-              );
-            }
+              `,
           },
-          {
-            "id": "ui-settings-envvars",
-            "label": "Environments",
-            "body": {
-              "title": "Environments",
-              "subtitle": `
+          onInit: () => {
+            // load content of config credentials file: ~/.kumologica/settings
+            let proxySettings = networkConfigStore.getProxyDetails();
+            initProxySettings(proxySettings);
+            handleProxySettingsEvent();
+          },
+          onSelect: () => {},
+          onSave: () => {
+            // Save proxy details
+            networkConfigStore.saveProxyDetails(
+              $("#proxy-option-custom").is(":checked"), // custom clicked?
+              $("#proxy-server").val(), // host
+              $("#proxy-port").val(), // port
+              $("#proxyAuthRequired").is(":checked"), // authentication clicked?
+              $("#proxy-auth-username").val(), // username
+              $("#proxy-auth-password").val() // password
+            );
+          },
+        },
+        {
+          id: "ui-settings-envvars",
+          label: "Environments",
+          body: {
+            title: "Environments",
+            subtitle: `
                 Environments are groups of key value pairs (variables) that allow you to quickly set a different context for each test executions`,
-              "html": `
+            html: `
                 <div>
                   <!--
                   <div id="fileLocationPath">
@@ -36378,393 +37533,398 @@ RED.notifications = (function() {
                   </div> -->
                   <textarea id="envvar-settings-editor" rows="20">
                   </textarea>
-                </div>`
-            },
-            "onInit": () => {
-              let envvarConfigContent = testConfigStore.getEnvironmentSectionFromConfig();
-              cmInstanceEnvvars = initEditor('envvar-settings-editor', envvarConfigContent);
-            },
-            "onSelect": () => {
-              cmInstanceEnvvars.refresh();
-            },
-            "onSave": () => {
-              testConfigStore.saveEnvironmentSectionIntoConfig(cmInstanceEnvvars.getValue());
-              RED.events.emit('settings:environment-variables-changed');
-            }
-          }
-        ];
-      }
-      return screen;
+                </div>`,
+          },
+          onInit: () => {
+            let envvarConfigContent =
+              testConfigStore.getEnvironmentSectionFromConfig();
+            cmInstanceEnvvars = initEditor(
+              "envvar-settings-editor",
+              envvarConfigContent
+            );
+          },
+          onSelect: () => {
+            cmInstanceEnvvars.refresh();
+          },
+          onSave: () => {
+            testConfigStore.saveEnvironmentSectionIntoConfig(
+              cmInstanceEnvvars.getValue()
+            );
+            RED.events.emit("settings:environment-variables-changed");
+          },
+        },
+      ];
     }
+    return screen;
+  }
 
-    function createDialog() {
-       
-
-        // remove if previous dialog exist
-        $('#ui-settings').remove();
+  function createDialog() {
+    // remove if previous dialog exist
+    $("#ui-settings").remove();
 
-        dialog = $('<div>', {
-            id: 'ui-settings',
-            class: 'ui-settings',
-        }).appendTo('#main-container');
+    dialog = $("<div>", {
+      id: "ui-settings",
+      class: "ui-settings",
+    }).appendTo("#main-container");
 
-        // Programmatically calculate the height of the ui-settings window
-        totalHeightAvailable = $('#main-container').height();
-        let offset = 74;
-        $('#ui-settings').height(totalHeightAvailable - offset);
+    // Programmatically calculate the height of the ui-settings window
+    totalHeightAvailable = $("#main-container").height();
+    let offset = 74;
+    $("#ui-settings").height(900);
 
-        let wrapperDiv = $('<div>', {
-            class: 'ui-settings-body'
-        }).appendTo(dialog);
+    let wrapperDiv = $("<div>", {
+      class: "ui-settings-body",
+    }).appendTo(dialog);
 
-        // Left pannel of settings
-        let optionsDiv = $(`
+    // Left pannel of settings
+    let optionsDiv = $(`
           <div id="ui-settings-options">
           </div>
         `).appendTo(wrapperDiv);
 
-        // Left pannel of settings
-        getScreen().forEach(option => {
-          if (option.selected){
-            $(`
+    // Left pannel of settings
+    getScreen().forEach((option) => {
+      if (option.selected) {
+        $(`
             <div id="${option.id}" class="ui-settings-option ui-settings-option-selected">
               <span class="settingsOptionLabel">
                   ${option.label}
               </span>
             </div>`).appendTo(optionsDiv);
-          } else {
-            $(`
+      } else {
+        $(`
             <div id="${option.id}" class="ui-settings-option ui-settings-option">
               <span class="settingsOptionLabel">
                   ${option.label}
               </span>
             </div>`).appendTo(optionsDiv);
-          }
-          
-        });
+      }
+    });
 
-        // Right pannel of settings
-        let optionsBodyDiv = $(`
+    // Right pannel of settings
+    let optionsBodyDiv = $(`
         <div id="ui-settings-optionsbody">
         </div>
-        `).appendTo(wrapperDiv)
+        `).appendTo(wrapperDiv);
 
-        getScreen().forEach(option => {
-          $(`
+    getScreen().forEach((option) => {
+      $(`
             <div id="${option.id}-body" class="ui-settings-general-body">
-              <div>
+              <div style="display=flex; flex-direction: column; height:100%">
                 <div class="settingsTitle">${option.body.title}</div>
                 <div class="settingsSubtitle">${option.body.subtitle}</div>
                 ${option.body.html}
               </div>
             </div>
-          `).appendTo(optionsBodyDiv)
-        });
-        
-        $(`
-        <div class="editor-tray-toolbar" style="top: 16px !important">
+          `).appendTo(optionsBodyDiv);
+    });
+
+    $(`
+        <div class="editor-tray-toolbar">
           <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only secondary" role="button" aria-disabled="false" id="options-cancel">Cancel</button>
           <button class="ui-button ui-widget ui-state-default ui-corner-all ui-buton-text-only primary" role="button" aria-disabled="false" id="options-save">Save</button>
         </div>
         `).appendTo(optionsBodyDiv);
 
-        // Initialize the options body screen
-        getScreen().forEach(option => {
-          // Left click on option
-          $(`#${option.id}`).click ((e) => {
-            resetWindows();
-            $(`#${option.id}`).addClass('ui-settings-option-selected');
-            $(`#${option.id}-body`).show();
-            option.onSelect();
-          });
-          // Specific functionality
-          option.onInit()
+    // Initialize the options body screen
+    getScreen().forEach((option) => {
+      // Left click on option
+      $(`#${option.id}`).click((e) => {
+        resetWindows();
+        $(`#${option.id}`).addClass("ui-settings-option-selected");
+        $(`#${option.id}-body`).show();
+        option.onSelect();
+      });
+      // Specific functionality
+      option.onInit();
 
-          // Hide screen if not default
-          if (option.hasOwnProperty("selected") && option.selected){
-            $(`#${option.id}-body`).show();
-          } else {
-            $(`#${option.id}-body`).hide();
-          }
-        });
-        // Initialize the toolbar
-        $('#options-save').click(e=> {
-          saveSettings();
-        });
+      // Hide screen if not default
+      if (option.hasOwnProperty("selected") && option.selected) {
+        $(`#${option.id}-body`).show();
+      } else {
+        $(`#${option.id}-body`).hide();
+      }
+    });
+    // Initialize the toolbar
+    $("#options-save").click((e) => {
+      saveSettings();
+    });
 
-        $('#options-cancel').click(e => {
-          cancelSettings();
-        });
+    $("#options-cancel").click((e) => {
+      cancelSettings();
+    });
+  }
 
-    }
+  function saveSettings() {
+    getScreen().forEach((option) => {
+      option.onSave();
+    });
+    hide();
+  }
 
-    function saveSettings() {
-      getScreen().forEach(option => {
-        option.onSave();
-      })
-      hide();
-    }
+  function cancelSettings() {
+    hide();
+  }
 
-    function cancelSettings() {
-      hide();
-    }
+  function selectProxyCustom() {
+    setTimeout(() => {
+      $("#proxy-option-custom").prop("checked", true);
+      $("#proxy-option-default").prop("checked", false);
+    }, 50);
 
-    function selectProxyCustom() {
-      setTimeout(() => {
-        $('#proxy-option-custom').prop('checked', true);
-        $('#proxy-option-default').prop('checked', false);
-      }, 50);
+    $("#proxy-server").prop("readonly", false);
+    $("#proxy-port").prop("readonly", false);
+  }
 
-      $('#proxy-server').prop('readonly', false);
-      $('#proxy-port').prop('readonly', false);
-    }
+  function selectProxyDefault() {
+    setTimeout(() => {
+      $("#proxy-option-custom").prop("checked", false);
+      $("#proxy-option-default").prop("checked", true);
+    }, 50);
 
-    function selectProxyDefault(){
-      setTimeout(() => {
-        $('#proxy-option-custom').prop('checked', false);
-        $('#proxy-option-default').prop('checked', true);
-      }, 50);
-      
-      $('#proxy-server').prop('readonly', true);
-      $('#proxy-port').prop('readonly', true);
-    }
+    $("#proxy-server").prop("readonly", true);
+    $("#proxy-port").prop("readonly", true);
+  }
 
-    function selectProxyAuth() {
-      setTimeout(() => {
-        let isChecked = $('#proxyAuthRequired').is(':checked');
-        if (isChecked){
-          $('#proxyAuthRequired').prop('checked', false);
-          $('#proxy-auth-username').prop('readonly', true);
-          $('#proxy-auth-password').prop('readonly', true);
-        } else {
-          $('#proxyAuthRequired').prop('checked', true);
-          $('#proxy-auth-username').prop('readonly', false);
-          $('#proxy-auth-password').prop('readonly', false);
-        }
-      }, 50);
-    }
+  function selectProxyAuth() {
+    setTimeout(() => {
+      let isChecked = $("#proxyAuthRequired").is(":checked");
+      if (isChecked) {
+        $("#proxyAuthRequired").prop("checked", false);
+        $("#proxy-auth-username").prop("readonly", true);
+        $("#proxy-auth-password").prop("readonly", true);
+      } else {
+        $("#proxyAuthRequired").prop("checked", true);
+        $("#proxy-auth-username").prop("readonly", false);
+        $("#proxy-auth-password").prop("readonly", false);
+      }
+    }, 50);
+  }
 
-    function handleProxySettingsEvent(){
-      $('#proxy-option-default').click( () => {
-       RED.events.emit('settings:select-proxy-default');
-       return false;
-      });
+  function handleProxySettingsEvent() {
+    $("#proxy-option-default").click(() => {
+      RED.events.emit("settings:select-proxy-default");
+      return false;
+    });
 
-      $('#proxy-option-custom').click( () => {
-        RED.events.emit('settings:select-proxy-custom');
-        return false;
-      });
+    $("#proxy-option-custom").click(() => {
+      RED.events.emit("settings:select-proxy-custom");
+      return false;
+    });
 
-      $('#proxyAuthRequired').click( function(e){
-        RED.events.emit('settings:select-proxy-auth');
-        return false;
-      });
+    $("#proxyAuthRequired").click(function (e) {
+      RED.events.emit("settings:select-proxy-auth");
+      return false;
+    });
+  }
+
+  function initProxySettings(proxySettings) {
+    // console.log('[ui-settings] initProxySettings with settings:', proxySettings);
+    // Proxy server
+    if (proxySettings.custom) {
+      $("#proxy-option-custom").prop("checked", true);
+      $("#proxy-option-default").prop("checked", false);
+      $("#proxy-server").val(proxySettings.host);
+      $("#proxy-port").val(proxySettings.port || "8080");
+    } else {
+      $("#proxy-option-default").prop("checked", true);
+      $("#proxy-option-custom").prop("checked", false);
+      $("#proxy-server").prop("readonly", true);
+      $("#proxy-port").prop("readonly", true);
+    }
+    // Proxy auth
+    if (proxySettings.authentication) {
+      $("#proxyAuthRequired").prop("checked", true);
+      $("#proxy-auth-username").val(proxySettings.username);
+      $("#proxy-auth-password").val(proxySettings.password);
+    } else {
+      $("#proxyAuthRequired").prop("checked", false);
+      $("#proxy-auth-username").prop("readonly", true);
+      $("#proxy-auth-password").prop("readonly", true);
     }
 
-    function initProxySettings(proxySettings){
-      // console.log('[ui-settings] initProxySettings with settings:', proxySettings);
-      // Proxy server
-      if (proxySettings.custom){
-        $('#proxy-option-custom').prop('checked', true);
-        $('#proxy-option-default').prop('checked', false);
-        $('#proxy-server').val(proxySettings.host);
-        $('#proxy-port').val(proxySettings.port || '8080');
-      } else {
-        $('#proxy-option-default').prop('checked', true);
-        $('#proxy-option-custom').prop('checked', false);
-        $('#proxy-server').prop('readonly', true);
-        $('#proxy-port').prop('readonly', true);
-      }
-      // Proxy auth
-      if (proxySettings.authentication){
-        $('#proxyAuthRequired').prop('checked', true);
-        $('#proxy-auth-username').val(proxySettings.username);
-        $('#proxy-auth-password').val(proxySettings.password);
-      } else {
-        $('#proxyAuthRequired').prop('checked', false);
-        $('#proxy-auth-username').prop('readonly', true);
-        $('#proxy-auth-password').prop('readonly', true);
-      }
+    RED.events.on("settings:select-proxy-custom", selectProxyCustom);
+    RED.events.on("settings:select-proxy-default", selectProxyDefault);
+    RED.events.on("settings:select-proxy-auth", selectProxyAuth);
+  }
 
-      RED.events.on('settings:select-proxy-custom', selectProxyCustom);
-      RED.events.on('settings:select-proxy-default', selectProxyDefault);
-      RED.events.on('settings:select-proxy-auth', selectProxyAuth);
-    }
+  function initEditor(anchorId, contentBody) {
+    CodeMirror.defineMode("properties", function () {
+      return {
+        token: function (stream, state) {
+          var sol = stream.sol() || state.afterSection;
+          var eol = stream.eol();
 
-    function initEditor(anchorId, contentBody) {
-        CodeMirror.defineMode("properties", function() {
-            return {
-              token: function(stream, state) {
-                var sol = stream.sol() || state.afterSection;
-                var eol = stream.eol();
-          
-                state.afterSection = false;
-          
-                if (sol) {
-                  if (state.nextMultiline) {
-                    state.inMultiline = true;
-                    state.nextMultiline = false;
-                  } else {
-                    state.position = "def";
-                  }
-                }
-          
-                if (eol && ! state.nextMultiline) {
-                  state.inMultiline = false;
-                  state.position = "def";
-                }
-          
-                if (sol) {
-                  while(stream.eatSpace()) {}
-                }
-          
-                var ch = stream.next();
-          
-                if (sol && (ch === "#" || ch === "!" || ch === ";")) {
-                  state.position = "comment";
-                  stream.skipToEnd();
-                  return "comment";
-                } else if (sol && ch === "[") {
-                  state.afterSection = true;
-                  stream.skipTo("]"); stream.eat("]");
-                  return "header";
-                } else if (ch === "=") {
-                  state.position = "quote";
-                  return null;
-                } else if (ch === "\\" && state.position === "quote") {
-                  if (stream.eol()) {  // end of line?
-                    // Multiline value
-                    state.nextMultiline = true;
-                  }
-                }
-          
-                return state.position;
-              },
-          
-              startState: function() {
-                return {
-                  position : "def",       // Current position, "def", "quote" or "comment"
-                  nextMultiline : false,  // Is the next line multiline value
-                  inMultiline : false,    // Is the current line a multiline value
-                  afterSection : false    // Did we just open a section
-                };
-              }
-          
-            };
-          });
-        let cmInstance = CodeMirror.fromTextArea(document.getElementById(anchorId), { 
-          theme: "monokai",
-          lineWrapping: true,
-          mode: 'properties'
-        });
+          state.afterSection = false;
 
-        // reset the listenere
-        cmInstance.off("change");
+          if (sol) {
+            if (state.nextMultiline) {
+              state.inMultiline = true;
+              state.nextMultiline = false;
+            } else {
+              state.position = "def";
+            }
+          }
 
-        cmInstance.getDoc().setValue(contentBody);
-        cmInstance.focus();
-        //console.log(`lineCount: ${cmInstance.lineCount()}`)
-        // Set the cursor at the end of existing content
-        cmInstance.setCursor(cmInstance.lineCount(), 0);
-        let codeMirrorHeight = totalHeightAvailable - 400;
+          if (eol && !state.nextMultiline) {
+            state.inMultiline = false;
+            state.position = "def";
+          }
 
-        cmInstance.setSize(null, codeMirrorHeight);
-        // cmInstance.refresh();
-        setTimeout(function() {
-            cmInstance.refresh();
-           }, 100);
+          if (sol) {
+            while (stream.eatSpace()) {}
+          }
 
-        cmInstance.on("change", function(cm, change){
-          // enable the save button
-          $('#options-save').removeClass('disabled');
-        })
+          var ch = stream.next();
 
-        return cmInstance;
-    }
+          if (sol && (ch === "#" || ch === "!" || ch === ";")) {
+            state.position = "comment";
+            stream.skipToEnd();
+            return "comment";
+          } else if (sol && ch === "[") {
+            state.afterSection = true;
+            stream.skipTo("]");
+            stream.eat("]");
+            return "header";
+          } else if (ch === "=") {
+            state.position = "quote";
+            return null;
+          } else if (ch === "\\" && state.position === "quote") {
+            if (stream.eol()) {
+              // end of line?
+              // Multiline value
+              state.nextMultiline = true;
+            }
+          }
 
-    function show(){
-        
-        // Disable the search dialog if opened
-        RED.actions.invoke('core:search:close');
-        RED.actions.invoke('core:project-info:close');
-        if (!visible){
-            RED.keyboard.add('*', 'escape', () => hide() );
+          return state.position;
+        },
 
-            createDialog();
-            dialog.slideDown(300);
-            visible = true;
+        startState: function () {
+          return {
+            position: "def", // Current position, "def", "quote" or "comment"
+            nextMultiline: false, // Is the next line multiline value
+            inMultiline: false, // Is the current line a multiline value
+            afterSection: false, // Did we just open a section
+          };
+        },
+      };
+    });
+    let cmInstance = CodeMirror.fromTextArea(
+      document.getElementById(anchorId),
+      {
+        theme: "monokai",
+        lineWrapping: true,
+        mode: "properties",
+      }
+    );
 
-            // UI goodies
-            $('#ui-settings').click( e=> {
-              e.preventDefault();
-              if ($(e.target).is('a')){
-                shell.openExternal(e.target.href);
-              }
-              e.stopImmediatePropagation();
-            });
-      
-            $('#main-container').click((e)=> {
-                hide();
-            });
-        }
+    // reset the listenere
+    cmInstance.off("change");
 
-    }
+    cmInstance.getDoc().setValue(contentBody);
+    cmInstance.focus();
+    //console.log(`lineCount: ${cmInstance.lineCount()}`)
+    // Set the cursor at the end of existing content
+    cmInstance.setCursor(cmInstance.lineCount(), 0);
+    let codeMirrorHeight = 650; // totalHeightAvailable - 400;
 
-    function showEnvironments() {
-      show();
-      $('#ui-settings-envvars').click();
-    }
+    cmInstance.setSize(null, codeMirrorHeight);
+    // cmInstance.refresh();
+    setTimeout(function () {
+      cmInstance.refresh();
+    }, 100);
 
-    function hide(){
-        if (visible){
-            $('#main-container').off('click');
-            RED.keyboard.remove('escape');
-            visible = false;
-            if (dialog !== null) {
-                dialog.slideUp(200, function () {
-                  // searchInput.searchBox('value', '');
-                });
-              }
+    cmInstance.on("change", function (cm, change) {
+      // enable the save button
+      $("#options-save").removeClass("disabled");
+    });
+
+    return cmInstance;
+  }
+
+  function show() {
+    // Disable the search dialog if opened
+    RED.actions.invoke("core:search:close");
+    RED.actions.invoke("core:project-info:close");
+    if (!visible) {
+      RED.keyboard.add("*", "escape", () => hide());
+
+      createDialog();
+      dialog.slideDown(300);
+      visible = true;
+
+      // UI goodies
+      $("#ui-settings").click((e) => {
+        e.preventDefault();
+        if ($(e.target).is("a")) {
+          shell.openExternal(e.target.href);
         }
-    }
+        e.stopImmediatePropagation();
+      });
 
-    function resetWindows() {
-      getScreen().forEach(option => {
-        $(`#${option.id}-body`).hide();
-        $(`#${option.id}`).removeClass('ui-settings-option-selected');
+      $("#main-container").click((e) => {
+        hide();
       });
     }
+  }
 
-    function getProxyHeader() {
-      // Read the proxy details
-      let proxyHeader = undefined;
-      let proxySettings = networkConfigStore.getProxyDetails();
-      let { custom, host, port, authentication, username, password } = proxySettings;
-      if (custom){
-        proxyHeader = `${host}:${port}`;
-        if (proxySettings.authentication){
-          proxyHeader = `${username}:${password}@${proxyHeader}`
-        }
-        proxyHeader = `http://${proxyHeader}`;
-      } 
+  function showEnvironments() {
+    show();
+    $("#ui-settings-envvars").click();
+  }
 
-      return proxyHeader;
+  function hide() {
+    if (visible) {
+      $("#main-container").off("click");
+      RED.keyboard.remove("escape");
+      visible = false;
+      if (dialog !== null) {
+        dialog.slideUp(200, function () {
+          // searchInput.searchBox('value', '');
+        });
+      }
     }
+  }
 
-    function init() {
-      RED.actions.add('core:settings:open', show);
-      RED.actions.add('core:settings:close', hide);
-      RED.actions.add('core:settings:select-environments', showEnvironments)
+  function resetWindows() {
+    getScreen().forEach((option) => {
+      $(`#${option.id}-body`).hide();
+      $(`#${option.id}`).removeClass("ui-settings-option-selected");
+    });
+  }
+
+  function getProxyHeader() {
+    // Read the proxy details
+    let proxyHeader = undefined;
+    let proxySettings = networkConfigStore.getProxyDetails();
+    let { custom, host, port, authentication, username, password } =
+      proxySettings;
+    if (custom) {
+      proxyHeader = `${host}:${port}`;
+      if (proxySettings.authentication) {
+        proxyHeader = `${username}:${password}@${proxyHeader}`;
+      }
+      proxyHeader = `http://${proxyHeader}`;
     }
 
+    return proxyHeader;
+  }
 
-    return {
-        init: init,
-        show: show,
-        hide: hide,
-        getProxyHeader: getProxyHeader,
-    }
-})();;RED.typeSearch = (function () {
+  function init() {
+    RED.actions.add("core:settings:open", show);
+    RED.actions.add("core:settings:close", hide);
+    RED.actions.add("core:settings:select-environments", showEnvironments);
+  }
+
+  return {
+    init: init,
+    show: show,
+    hide: hide,
+    getProxyHeader: getProxyHeader,
+  };
+})();
+;RED.typeSearch = (function () {
   var shade;
 
   var disabled = false;