@kumologica/sdk 3.4.0 → 3.5.0-beta2

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

@@ -23,7 +23,7 @@ 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) {
@@ -93,7 +93,7 @@ jQuery.propHooks.disabled = {
       success: function (data) {
         RED.nodes.setNodeList(data);
         // RED.i18n.loadNodeCatalogs(function () {
-          loadIconList(loadNodes);
+        loadIconList(loadNodes);
         // });
       },
     });
@@ -417,7 +417,7 @@ jQuery.propHooks.disabled = {
               appendNodeConfig(data);
               typeList =
                 '<ul><li>' + msg.types.join('</li><li>') + '</li></ul>';
-              RED.notify(`Node added to palette: ${msg.types.length} `+ typeList,
+              RED.notify(`Node added to palette: ${msg.types.length} ` + typeList,
                 'success'
               );
             });
@@ -662,6 +662,7 @@ jQuery.propHooks.disabled = {
     RED.subflow.init();
     RED.workspaces.init();
     RED.clipboard.init();
+    RED.signup.init();
     RED.search.init();
     RED.projectInfo.init();
     RED.uiSettings.init();
@@ -720,6 +721,8 @@ jQuery.propHooks.disabled = {
     RED.i18n.init(options, function () {
       RED.settings.init(options, loadEditor);
     });
+    RED.footer.init();
+
   }
 
   return {
@@ -3171,9 +3174,9 @@ RED.state = {
 
           // TODO: too tightly coupled into palette UI
         }
-        
+
         RED.events.emit('registry:node-type-added', nt);
-       
+
       },
       removeNodeType: function (nt) {
         if (nt.substring(0, 8) != 'subflow:') {
@@ -3528,7 +3531,7 @@ RED.state = {
               if (
                 !n.credentials._ ||
                 n.credentials['has_' + cred] !=
-                  n.credentials._['has_' + cred] ||
+                n.credentials._['has_' + cred] ||
                 (n.credentials['has_' + cred] && n.credentials[cred])
               ) {
                 credentialSet[cred] = n.credentials[cred];
@@ -3613,7 +3616,7 @@ RED.state = {
       node.caname = '_error_unknown';
       node.category = '_error_unknown'
     }
-    
+
     return node;
   }
 
@@ -3753,7 +3756,7 @@ RED.state = {
     }
     var nns = [];
     var i;
-    
+
     for (i = 0; i < workspacesOrder.length; i++) {
       if (workspaces[workspacesOrder[i]].type == 'tab') {
         nns.push(convertWorkspace(workspaces[workspacesOrder[i]]));
@@ -3771,12 +3774,12 @@ RED.state = {
     }
     for (i = 0; i < nodes.length; i++) {
       var node = nodes[i];
-        let n = convertNode(node, exportCredentials);
-        // check if we need to report an error with node convertion
-        if (n.caname === '_error_unknown' && n.category === '_error_unknown'){
-          RED.notify(`<strong>Error</strong>: Invalid flow due to node type unknown [${n.type}]`, 'error');
-        }
-        nns.push(n);
+      let n = convertNode(node, exportCredentials);
+      // check if we need to report an error with node convertion
+      if (n.caname === '_error_unknown' && n.category === '_error_unknown') {
+        RED.notify(`<strong>Error</strong>: Invalid flow due to node type unknown [${n.type}]`, 'error');
+      }
+      nns.push(n);
     }
     return nns;
   }
@@ -3921,9 +3924,9 @@ RED.state = {
       var typeList = '<ul><li>' + unknownTypes.join('</li><li>') + '</li></ul>';
       RED.notify(
         '<p>' +
-          'Imported unrecognised type:' +
-          '</p>' +
-          typeList,
+        'Imported unrecognised type:' +
+        '</p>' +
+        typeList,
         'error',
         false,
         10000
@@ -3931,6 +3934,7 @@ RED.state = {
     }
 
     var activeWorkspace = RED.workspaces.active();
+    console.log('[nodes] ImportNodes --> activeWorkspace=', activeWorkspace)
     //TODO: check the z of the subflow instance and check _that_ if it exists
     var activeSubflow = getSubflow(activeWorkspace);
     for (i = 0; i < newNodes.length; i++) {
@@ -3948,7 +3952,7 @@ RED.state = {
           }
           if (err) {
             // TODO: standardise error codes
-            err.code = 'NODE_RED';
+            err.code = 'KUMOLOGICA';
             throw err;
           }
         }
@@ -4468,9 +4472,9 @@ RED.state = {
     ];
   }
 
-  function getTabLabel(id){
+  function getTabLabel(id) {
     let tabs = listWorkspaces();
-    for (tab in tabs){
+    for (tab in tabs) {
       if (tabs[tab].id === id) {
         return tabs[tab].label;
       }
@@ -4753,7 +4757,7 @@ RED.state = {
       }
     },
     eachWorkspace: eachWorkspace,
-    
+
     listWorkspaces: listWorkspaces,
 
     node: getNode,
@@ -6004,7 +6008,6 @@ RED.validators = {
   ipcRenderer.on('core:show-import-dialog', ()=> {
     RED.actions.invoke('core:show-import-dialog');
   });
-
   ipcRenderer.on('core:show-export-dialog', ()=> {
     RED.actions.invoke('core:show-export-dialog');
   });
@@ -15270,14 +15273,14 @@ RED.h = handlers;
     {
       title: 'Paste',
       shortcut: 'Ctrl+V',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         RED.actions.invoke('core:paste-from-internal-clipboard');
       }
     },
     {
       title: 'Search Node...',
       shortcut: 'Ctrl+F',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#btn-search').click();
         d3.event.stopPropagation();
       }
@@ -15285,7 +15288,7 @@ RED.h = handlers;
     { separator: true },
     {
       title: 'Clear All Breakpoints',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         await window.__kumologica.debugger.removeAllBreakpoints();
         await redrawBreakpoints();
         redraw();
@@ -15295,7 +15298,7 @@ RED.h = handlers;
     {
       title: 'Run TestCase',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#red-ui-tab-test-link-button').click();
         $('#test-sidebar-run-btn').click();
       }
@@ -15303,7 +15306,7 @@ RED.h = handlers;
     {
       title: 'Debug TestCase',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#red-ui-tab-test-link-button').click();
         $('#test-sidebar-debug-btn').click();
       }
@@ -15312,14 +15315,14 @@ RED.h = handlers;
     {
       title: 'Toggle Navigator',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         RED.view.navigator.toggle();
       }
-    }, 
+    },
     {
       title: 'Automatic Layout',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         applyLayout();
       }
     },
@@ -15327,25 +15330,25 @@ RED.h = handlers;
     {
       title: 'Open Node Library',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#launch-node-library').click()
       }
     },
     {
       title: 'Add Node...',
       shortcut: 'Ctrl+Click',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         d3.event.stopPropagation();
 
         let eventProps = {
-          ctrlKey: true, 
+          ctrlKey: true,
           metaKey: true,
           screenX: d3.event.screenX,
           screenY: d3.event.screenY,
           clientX: d3.event.clientX,
           clientY: d3.event.clientY,
           offsetX: d3.event.offsetX,
-          offsetY: d3.event.offsetY                
+          offsetY: d3.event.offsetY
         }
         mouse_mode = RED.state.DEFAULT;
 
@@ -15465,8 +15468,8 @@ RED.h = handlers;
             Math.max(
               0.3,
               scaleFactor +
-                Math.floor(moveTouchDistance * 100 - startTouchDistance * 100) /
-                  10000
+              Math.floor(moveTouchDistance * 100 - startTouchDistance * 100) /
+              10000
             )
           );
 
@@ -15485,7 +15488,7 @@ RED.h = handlers;
         }
       }
     })
-    
+
   vis.on('contextmenu', d3.contextMenu('canvas', menuCanvas, () => { zoomZero() }));
 
   var outer_background = vis
@@ -15554,13 +15557,13 @@ RED.h = handlers;
   var contextMenuLayer = vis.append('g');
   // add the context menu placeholder for the canvas
   contextMenuLayer
-  .append('foreignObject')
-  .attr('id', `d3-context-menu-canvas`)
-  .attr('class', `d3-context-menu-canvas d3-context-menu`)
-  .attr('width', 350)
-  .attr('height', 100)
-  .attr('x', 100)
-  .attr('y', 100)
+    .append('foreignObject')
+    .attr('id', `d3-context-menu-canvas`)
+    .attr('class', `d3-context-menu-canvas d3-context-menu`)
+    .attr('width', 350)
+    .attr('height', 100)
+    .attr('x', 100)
+    .attr('y', 100)
 
   var drag_lines = [];
 
@@ -15685,7 +15688,7 @@ RED.h = handlers;
       zoomIn();
     });
 
-    $('#btn-minimize-restore').click( ()=> {
+    $('#btn-minimize-restore').click(() => {
       if (scaleFactor === 1) {
         scaleFactor = 0.6;
       } else {
@@ -15694,7 +15697,7 @@ RED.h = handlers;
       zoomView(scaleFactor);
     });
 
-    $('#btn-layouter').click(function(){
+    $('#btn-layouter').click(function () {
       applyLayout();
     });
 
@@ -15722,28 +15725,28 @@ RED.h = handlers;
 
     // Handle dragging the workspace
     $('#chart')
-      .keydown(function(e){
-        if(e.keyCode == 32) {
+      .keydown(function (e) {
+        if (e.keyCode == 32) {
           e.preventDefault();
           if (!drag) {
             drag = true;
-            $('#chart').attr('style','cursor: grab !important')    
+            $('#chart').attr('style', 'cursor: grab !important')
           }
         }
       })
-      .keyup(function(e){
-      if(e.keyCode == 32 && drag){
-        e.preventDefault();
-        drag = false;
-        dragging = false;
-        $('#chart').attr('style','cursor: default !important')
-      }
+      .keyup(function (e) {
+        if (e.keyCode == 32 && drag) {
+          e.preventDefault();
+          drag = false;
+          dragging = false;
+          $('#chart').attr('style', 'cursor: default !important')
+        }
       })
-      .on("mousedown", function(e) {
+      .on("mousedown", function (e) {
         if (drag && !dragging) {
           e.preventDefault();
-          
-          $('#chart').attr('style','cursor: grabbing !important')
+
+          $('#chart').attr('style', 'cursor: grabbing !important')
           dragging = true;
           draggingPos = {
             // The current scroll
@@ -15755,27 +15758,27 @@ RED.h = handlers;
         }
       })
 
-      .on("mouseup", function(e) {
-        if (drag && dragging){
+      .on("mouseup", function (e) {
+        if (drag && dragging) {
           e.preventDefault();
           dragging = false;
           // console.log('Dragging off')
-          $('#chart').attr('style','cursor: grab !important')
+          $('#chart').attr('style', 'cursor: grab !important')
         }
-      
+
       })
 
-      .on("mousemove", function(e) {
-          if (drag && dragging){
-            e.preventDefault();
-            
-            // How far the mouse has been moved
-            const dx = e.clientX - draggingPos.x;
-            const dy = e.clientY - draggingPos.y;
-            
-            $("#chart").scrollLeft(draggingPos.left - dx);
-            $("#chart").scrollTop(draggingPos.top - dy);
-          }
+      .on("mousemove", function (e) {
+        if (drag && dragging) {
+          e.preventDefault();
+
+          // How far the mouse has been moved
+          const dx = e.clientX - draggingPos.x;
+          const dy = e.clientY - draggingPos.y;
+
+          $("#chart").scrollLeft(draggingPos.left - dx);
+          $("#chart").scrollTop(draggingPos.top - dy);
+        }
       });
 
 
@@ -15925,10 +15928,10 @@ RED.h = handlers;
       scale =
         0.4 -
         0.2 *
-          Math.max(
-            0,
-            (node_width - Math.min(Math.abs(dx), Math.abs(dy))) / node_width
-          );
+        Math.max(
+          0,
+          (node_width - Math.min(Math.abs(dx), Math.abs(dy))) / node_width
+        );
     }
     if (dx * sc > 0) {
       return (
@@ -16188,10 +16191,10 @@ RED.h = handlers;
           .attr(
             'transform',
             'translate(' +
-              (point[0] - node_width / 2) +
-              ',' +
-              (point[1] - node_height / 2) +
-              ')'
+            (point[0] - node_width / 2) +
+            ',' +
+            (point[1] - node_height / 2) +
+            ')'
           );
         ghostNode
           .append('rect')
@@ -16481,10 +16484,10 @@ RED.h = handlers;
               ghostNode.attr(
                 'transform',
                 'translate(' +
-                  (point[0] - node_width / 2) +
-                  ',' +
-                  (point[1] - node_height / 2) +
-                  ')'
+                (point[0] - node_width / 2) +
+                ',' +
+                (point[1] - node_height / 2) +
+                ')'
               );
               rebuildQuickAddLink();
             } else {
@@ -16499,7 +16502,7 @@ RED.h = handlers;
         redraw();
       }
     }
-    
+
     // console.log('[view] Create a lasso.... mouse_mode = ', mouse_mode);
     // console.log('[view] Create a lasso....d3.event.ctrlKey = ', d3.event.ctrlKey);
 
@@ -17172,27 +17175,27 @@ RED.h = handlers;
         }
         return value;
       });
-    
-    
-    if (ignoreEdit){
+
+
+    if (ignoreEdit) {
       // This is used during the hovering over the debug traces
       lastSelection = selectionJSON;
       // console.log('[view] the selection should not be edited');
-    }else{
+    } else {
       if (selectionJSON !== lastSelection) {
         lastSelection = selectionJSON;
         RED.editor.edit(selection);
-      }else{
+      } else {
         // User has clicked on the canvas or link
         // console.log('[view::updateSelection] Selection has not changed. Ignore');
-        
+
         // Just close the sidebar
         RED.editor.resetEditor();
       }
     }
   }
 
-  
+
   function editSelection() {
     // console.log('[view] editSelection invoked')
     if (moving_set.length > 0) {
@@ -17755,9 +17758,9 @@ RED.h = handlers;
       } catch (err) {
         console.log(
           'Definition error: ' +
-            node.type +
-            '.' +
-            (portType === PORT_TYPE_INPUT ? 'inputLabels' : 'outputLabels'),
+          node.type +
+          '.' +
+          (portType === PORT_TYPE_INPUT ? 'inputLabels' : 'outputLabels'),
           err
         );
         result = null;
@@ -17768,7 +17771,7 @@ RED.h = handlers;
     return result;
   }
   function showTooltip(x, y, content, direction) {
-    if (!content){
+    if (!content) {
       return;
     }
 
@@ -17870,7 +17873,7 @@ RED.h = handlers;
       (mouse_mode != RED.state.JOINING &&
         mouse_mode != RED.state.QUICK_JOINING) || // Not currently joining - all ports active
       (drag_lines.length > 0 && // Currently joining
-      drag_lines[0].portType !== portType && // INPUT->OUTPUT OUTPUT->INPUT
+        drag_lines[0].portType !== portType && // INPUT->OUTPUT OUTPUT->INPUT
         (!drag_lines[0].virtualLink || // Not a link wire
           (drag_lines[0].node.type === 'link in' && d.type === 'link out') ||
           (drag_lines[0].node.type === 'link out' && d.type === 'link in')));
@@ -17930,8 +17933,8 @@ RED.h = handlers;
         ? 1
         : 0
       : d.direction == 'in'
-      ? 0
-      : 1;
+        ? 0
+        : 1;
     var wasJoining = false;
     if (
       mouse_mode === RED.state.JOINING ||
@@ -18241,7 +18244,7 @@ RED.h = handlers;
     }
   }
 
-  async function redrawBreakpoint(node){
+  async function redrawBreakpoint(node) {
     let resp = await window.__kumologica.debugger.isBreakpointFound(node.id);
     let breakpointFound = resp.body;
     if (breakpointFound) {
@@ -18257,15 +18260,15 @@ RED.h = handlers;
     let bpids = resp.body;
 
     activeNodes
-    .filter(node => node.z === 'main.flow')
-    .forEach(node => {
-      node.dirty = true;
-      if (bpids.includes(node.id)) {
-        node.status = { fill: "red", shape: "dot" };
-      } else {
-        node.status = {};
-      }
-    });
+      .filter(node => node.z === 'main.flow')
+      .forEach(node => {
+        node.dirty = true;
+        if (bpids.includes(node.id)) {
+          node.status = { fill: "red", shape: "dot" };
+        } else {
+          node.status = {};
+        }
+      });
   }
 
   function redraw(focusActivated) {
@@ -18617,7 +18620,7 @@ RED.h = handlers;
 
           return d.id;
         });
-      
+
       node.exit().remove();
 
       var nodeEnter = node
@@ -18631,7 +18634,7 @@ RED.h = handlers;
           return d.type === 'link in' || d.type === 'link out';
         })
 
-        
+
       nodeEnter.each(function (d, i) {
         var node = d3.select(this);
         var isLink = d.type === 'link in' || d.type === 'link out';
@@ -18778,23 +18781,23 @@ RED.h = handlers;
         let infoTooltipTimeout;
         let infoTooltipHover;
         node
-        .on('mouseover', function(d){
-          infoTooltipTimeout = setTimeout(
-            ()=> {
-              var pos = getElementPosition(node.node());
-              infoTooltipHover = showTooltip(pos[0] + 46, pos[1] + 10, d.info, 'right')
-            }, 200
-          )
-        })
-        .on('mouseout', function (d) {
-          clearTimeout(infoTooltipTimeout);
-          if (infoTooltipHover) {
-            infoTooltipHover.remove();
-            infoTooltipHover = null;
-          }
-          let tooltipEl = d3.select(this);
-          tooltipEl.classed('port_hovered', false);
-        })
+          .on('mouseover', function (d) {
+            infoTooltipTimeout = setTimeout(
+              () => {
+                var pos = getElementPosition(node.node());
+                infoTooltipHover = showTooltip(pos[0] + 46, pos[1] + 10, d.info, 'right')
+              }, 200
+            )
+          })
+          .on('mouseout', function (d) {
+            clearTimeout(infoTooltipTimeout);
+            if (infoTooltipHover) {
+              infoTooltipHover.remove();
+              infoTooltipHover = null;
+            }
+            let tooltipEl = d3.select(this);
+            tooltipEl.classed('port_hovered', false);
+          })
 
 
         var selectionRect = node
@@ -18804,7 +18807,7 @@ RED.h = handlers;
           .attr('height', 100)
           .attr('height', 100)
           .attr('stroke', '#1890ff')
-          .attr('fill', '#e6f7ff') 
+          .attr('fill', '#e6f7ff')
           .attr('stroke-width', 2)
           .attr('opacity', 0.4)
           .attr('rx', 2)
@@ -19039,9 +19042,9 @@ RED.h = handlers;
           {
             title: 'Toggle Breakpoint',
             disabled: d._def.hasOwnProperty('disableToggleBreakpoint'),
-            action: async function(elm, d, i) {
-              let disabledFlagOn =  d._def.hasOwnProperty('disableToggleBreakpoint');
-              if (!disabledFlagOn || (disabledFlagOn && d._def.disableToggleBreakpoint === false)){
+            action: async function (elm, d, i) {
+              let disabledFlagOn = d._def.hasOwnProperty('disableToggleBreakpoint');
+              if (!disabledFlagOn || (disabledFlagOn && d._def.disableToggleBreakpoint === false)) {
                 await window.__kumologica.debugger.toggleBreakpoint(d.id);
                 await redrawBreakpoint(d);
                 redraw();
@@ -19052,13 +19055,13 @@ RED.h = handlers;
           {
             title: 'Cut',
             shortcut: 'Ctrl+X',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
                 RED.view.select(d.id);
               }
-              
+
               copySelection();
               deleteSelection();
             }
@@ -19066,7 +19069,7 @@ RED.h = handlers;
           {
             title: 'Copy',
             shortcut: 'Ctrl+C',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
@@ -19085,7 +19088,7 @@ RED.h = handlers;
           {
             title: 'Delete',
             shortcut: 'Del',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
@@ -19098,20 +19101,20 @@ RED.h = handlers;
           { separator: true },
           {
             title: 'Copy Node ID',
-            action: async function(elm, d, i, ctx) {
-              if (ctx.nodes.length > 1){
+            action: async function (elm, d, i, ctx) {
+              if (ctx.nodes.length > 1) {
                 RED.notify('<strong>Error:</strong> This option requires selecing a single node', 'error');
                 return;
               } else {
                 RED.clipboard.copyText(d.id);
-                RED.notify(`Node ID [ <b>${d.id}</b> ] copied to clipboard`)              
+                RED.notify(`Node ID [ <b>${d.id}</b> ] copied to clipboard`)
               }
             }
           },
           {
             title: 'Settings...',
-            action: async function(elm, d, i, ctx) {
-              if (ctx.nodes.length > 1){
+            action: async function (elm, d, i, ctx) {
+              if (ctx.nodes.length > 1) {
                 RED.notify('<strong>Error:</strong> This options requires selecting a single node', 'error');
                 return;
               } else {
@@ -19124,15 +19127,15 @@ RED.h = handlers;
         // TODO Javier - prototype to support context menu extensions...
         // =============================================================
         // if there is special context menu for the element, attach it
-        if (d._def.hasOwnProperty('oncontextmenu')){
+        if (d._def.hasOwnProperty('oncontextmenu')) {
           let nodeContextMenu = d._def.oncontextmenu.call(this, window) || [];
           menu = [...nodeContextMenu, { separator: true }, ...menu];
         }
 
-       
+
 
         let nodeId = d.id.replace('.', '_');
-        node.on('contextmenu', d3.contextMenu(nodeId, menu, ()=> { 
+        node.on('contextmenu', d3.contextMenu(nodeId, menu, () => {
           console.log('[view] before context menu');
           console.log('[view] selection of nodes:', RED.view.selection());
           zoomZero()
@@ -19166,7 +19169,7 @@ RED.h = handlers;
           .attr('rx', 8)
           .attr('ry', 8)
           .attr('stroke-width', '2');
-        
+
         statusLabel = status
           .append('svg:text')
           .attr('class', 'node_status_label')
@@ -19240,17 +19243,17 @@ RED.h = handlers;
             const MEDIUM_HEIGHT = 100;
             const LARGE_HEIGHT = 110;
 
-            if (numberOfLinesDesc <= 1){
+            if (numberOfLinesDesc <= 1) {
               selectionHeight = SMALL_HEIGHT;
             } else if (numberOfLinesDesc === 2) {
               selectionHeight = MEDIUM_HEIGHT;
             } else {
               selectionHeight = LARGE_HEIGHT;
             }
-            
-            thisNode 
+
+            thisNode
               .selectAll('.selectionRect')
-              .classed('selection_shown', function (d){
+              .classed('selection_shown', function (d) {
                 return d.selected;
               })
               .attr('height', selectionHeight);
@@ -19608,7 +19611,7 @@ RED.h = handlers;
                 return (
                   'M ' +
                   ((!d._def.align && d.inputs !== 0 && d.outputs === 0) ||
-                  'right' === d._def.align
+                    'right' === d._def.align
                     ? 0
                     : 30) +
                   ' 1 l 0 ' +
@@ -19714,7 +19717,7 @@ RED.h = handlers;
             if (d && d.status && d.status.text) {
               if (typeof d.status.text == 'object') {
                 const err = d.status.text;
-                errTxt = err.message || err.error || err.errorMessage || JSON.stringify(d.status.text);       
+                errTxt = err.message || err.error || err.errorMessage || JSON.stringify(d.status.text);
               } else {
                 errTxt = d.status.text;
               }
@@ -19908,21 +19911,21 @@ RED.h = handlers;
             .attr(
               'd',
               'M ' +
-                stemLength +
-                ' 0 ' +
-                'C ' +
-                (stemLength + 1.7 * branchLength) +
-                ' ' +
-                0 +
-                ' ' +
-                (stemLength + 0.1 * branchLength) +
-                ' ' +
-                y +
-                ' ' +
-                (stemLength + branchLength * 1.5) +
-                ' ' +
-                y +
-                ' '
+              stemLength +
+              ' 0 ' +
+              'C ' +
+              (stemLength + 1.7 * branchLength) +
+              ' ' +
+              0 +
+              ' ' +
+              (stemLength + 0.1 * branchLength) +
+              ' ' +
+              y +
+              ' ' +
+              (stemLength + branchLength * 1.5) +
+              ' ' +
+              y +
+              ' '
             );
           linkG
             .append('svg:path')
@@ -19930,26 +19933,26 @@ RED.h = handlers;
             .attr(
               'd',
               'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 7)) +
-                ' ' +
-                (y - 12) +
-                ' ' +
-                'h ' +
-                -s * linkWidth +
-                ' ' +
-                'a 3 3 45 0 ' +
-                (s === 1 ? '0' : '1') +
-                ' ' +
-                s * -3 +
-                ' 3 ' +
-                'v 18 ' +
-                'a 3 3 45 0 ' +
-                (s === 1 ? '0' : '1') +
-                ' ' +
-                s * 3 +
-                ' 3 ' +
-                'h ' +
-                s * linkWidth
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 7)) +
+              ' ' +
+              (y - 12) +
+              ' ' +
+              'h ' +
+              -s * linkWidth +
+              ' ' +
+              'a 3 3 45 0 ' +
+              (s === 1 ? '0' : '1') +
+              ' ' +
+              s * -3 +
+              ' 3 ' +
+              'v 18 ' +
+              'a 3 3 45 0 ' +
+              (s === 1 ? '0' : '1') +
+              ' ' +
+              s * 3 +
+              ' 3 ' +
+              'h ' +
+              s * linkWidth
             );
           linkG
             .append('svg:path')
@@ -19957,20 +19960,20 @@ RED.h = handlers;
             .attr(
               'd',
               'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
-                ' ' +
-                (y - 12) +
-                ' ' +
-                'h ' +
-                s * (linkWidth * 3) +
-                ' ' +
-                'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
-                ' ' +
-                (y + 12) +
-                ' ' +
-                'h ' +
-                s * (linkWidth * 3)
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
+              ' ' +
+              (y - 12) +
+              ' ' +
+              'h ' +
+              s * (linkWidth * 3) +
+              ' ' +
+              'M ' +
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
+              ' ' +
+              (y + 12) +
+              ' ' +
+              'h ' +
+              s * (linkWidth * 3)
             )
             .style('stroke-dasharray', '12 3 8 4 3');
           linkG
@@ -20069,11 +20072,11 @@ RED.h = handlers;
     }
   }
 
-  function filterWorkspaces(newNodesStr){
+  function filterWorkspaces(newNodesStr) {
     try {
       let newNodes = JSON.parse(newNodesStr);
-      if (newNodes && Array.isArray(newNodes)){
-        return newNodes.filter( e => (e.hasOwnProperty('type') && (e.type !== 'tab')) );
+      if (newNodes && Array.isArray(newNodes)) {
+        return newNodes.filter(e => (e.hasOwnProperty('type') && (e.type !== 'tab')));
       } else {
         return newNodes;
       }
@@ -20091,7 +20094,6 @@ RED.h = handlers;
    *  - attached to mouse for placing - "IMPORT_DRAGGING"
    */
   function importNodes(newNodesStr, addNewFlow, touchImport) {
-    // Kumologica only has two flows: main and test, so never create a new flow
     addNewFlow = false;
     try {
       // Strip the newNodesStr from workspaces elements
@@ -20355,7 +20357,7 @@ RED.h = handlers;
 
   function applyLayout() {
     const NODE_SIZE = 45;
-    let ns = []; 
+    let ns = [];
 
     const dagre = window.__kumologica.libs.dagre;
     // Get all active nodes
@@ -20365,14 +20367,14 @@ RED.h = handlers;
     let g = new dagre.graphlib.Graph();
 
     // Set an object for the graph label
-    g.setGraph({rankdir: "LR", nodesep: 50, marginx: 50, marginy: 50 });
+    g.setGraph({ rankdir: "LR", nodesep: 50, marginx: 50, marginy: 50 });
 
     // Default to assigning a new object as a label for each new edge.
-    g.setDefaultEdgeLabel(function() { return {}; });
+    g.setDefaultEdgeLabel(function () { return {}; });
 
     // Create nodes for the graph
     nodes.forEach(n => {
-      g.setNode(n.id, {label: n.name, width: NODE_SIZE, height: NODE_SIZE })
+      g.setNode(n.id, { label: n.name, width: NODE_SIZE, height: NODE_SIZE })
     });
 
     // Create the edges
@@ -20384,7 +20386,7 @@ RED.h = handlers;
     dagre.layout(g);
 
     // Apply the coordinates
-    g.nodes().forEach(nid=> {
+    g.nodes().forEach(nid => {
       if (nid) {
         let node = nodes.find(n => n.id === nid);
         if (node) {
@@ -20435,7 +20437,7 @@ RED.h = handlers;
             if (node._def.category !== 'config' && node.z) {
               node.dirty = true;
               RED.workspaces.show(node.z);
-    
+
               var screenSize = [
                 chart.width() / scaleFactor,
                 chart.height() / scaleFactor,
@@ -20444,7 +20446,7 @@ RED.h = handlers;
                 chart.scrollLeft() / scaleFactor,
                 chart.scrollTop() / scaleFactor,
               ];
-    
+
               if (
                 node.x < scrollPos[0] ||
                 node.y < scrollPos[1] ||
@@ -20465,7 +20467,7 @@ RED.h = handlers;
               }
             }
           }
-            // ----
+          // ----
 
           if (selectedNode) {
             selectedNode.selected = true;
@@ -20475,21 +20477,21 @@ RED.h = handlers;
         }
         if (Array.isArray(selection)) {
           console.log('[view] selection pre=', selection);
-          let selectionNodes = 
-            (selection.length === 0)? 
-               RED.nodes.filterNodes({ z: 'main.flow'}): RED.nodes.filterNodes({ id: selection });
+          let selectionNodes =
+            (selection.length === 0) ?
+              RED.nodes.filterNodes({ z: 'main.flow' }) : RED.nodes.filterNodes({ id: selection });
 
           console.log('[view] selection nodes=', selectionNodes);
-          if (selectionNodes && Array.isArray(selectionNodes)){
+          if (selectionNodes && Array.isArray(selectionNodes)) {
             moving_set = [];
             selectionNodes.forEach(sn => {
               sn.selected = true;
               sn.dirty = true;
-              moving_set.push({n: sn})
+              moving_set.push({ n: sn })
             })
           }
-          
-          
+
+
         }
       } else {
         clearSelection();
@@ -20566,7 +20568,7 @@ RED.h = handlers;
               200
             );
           }
-   
+
           if (!node._flashing) {
             node._flashing = true;
             var flash = 22;
@@ -20600,11 +20602,11 @@ RED.h = handlers;
     getActiveNodes: function () {
       return activeNodes;
     },
-    getActiveLinks: function() {
+    getActiveLinks: function () {
       return activeLinks;
     },
     showTooltip: showTooltip,
-    applyLayout:applyLayout
+    applyLayout: applyLayout
   };
 })();
 ;/**
@@ -20920,9 +20922,9 @@ RED.view.tools = (function() {
           $(tab.toolbar).show();
         }
       }
-     
+
     },
-    onsame: function (tab){
+    onsame: function (tab) {
       if (tab.onsame) {
         tab.onsame.call(tab);
       }
@@ -21027,16 +21029,16 @@ RED.view.tools = (function() {
       let d = ui.position.left;
       delta = sidebarWidthP0 - d;
       $('#sidebar').width(delta);
-      if ($('#sidebar').width() > maxWidthSidebar()){
+      if ($('#sidebar').width() > maxWidthSidebar()) {
         $('#sidebar').width(maxWidthSidebar());
       }
       event.stopImmediatePropagation();
       RED.events.emit('sidebar:resize');
     },
     stop: function (event, ui) {
-      setTimeout(function() {
+      setTimeout(function () {
         sidebarDragging = false;
-      },1000);
+      }, 1000);
       RED.events.emit('sidebar:resize');
     },
   });
@@ -21060,10 +21062,10 @@ RED.view.tools = (function() {
     return totalWidth - shortcutsWidth - paletteWidth - sidebarSeparatorWidth;
   }
 
-  function maximizeSidebar(){
+  function maximizeSidebar() {
     const targetWidth = maxWidthSidebar();
     $('#sidebar').width(targetWidth);
-    
+
     // Hack: Make sure the workspace if reset before maximizing the sidebar. This is because when dragging the sidebar the workspace width is also modified
     $('#workspace').css('right', 485);
     RED.events.emit('sidebar:resize');
@@ -21078,7 +21080,7 @@ RED.view.tools = (function() {
   }
 
   function isSidebarVisible() {
-    return ! $('#main-container').hasClass('sidebar-closed'); 
+    return !$('#main-container').hasClass('sidebar-closed');
   }
 
   function toggleSidebar(state) {
@@ -21089,7 +21091,7 @@ RED.view.tools = (function() {
       $('#main-container').addClass('sidebar-closed');
       $('#shelve-right').removeClass('shelf-selected');
     } else {
-      if (!$('#shelve-right').hasClass('shelf-selected')){
+      if (!$('#shelve-right').hasClass('shelf-selected')) {
         checkIfscrollWorkspaceRequired = true;
       }
       // Show the sidebar and sidebar-separator
@@ -21099,7 +21101,7 @@ RED.view.tools = (function() {
       sidebar_tabs.resize();
     }
     RED.events.emit('sidebar:resize');
-    if (checkIfscrollWorkspaceRequired && RED.editor.getLatestNodeSelected()){
+    if (checkIfscrollWorkspaceRequired && RED.editor.getLatestNodeSelected()) {
       // Reposition the workspace if the node may be left hidden behind the sidebar
       const safeDistNodeSidebar = 300;
       let nodeSelectedPosX = RED.editor.getLatestNodeSelected().x;
@@ -21111,9 +21113,9 @@ RED.view.tools = (function() {
       //  - sidebarPosLeftX: ${sidebarPosLeftX}
       //  ----------------------------------------
       // `);
-      if (nodeSelectedPosX - initialScrollLeft + safeDistNodeSidebar > sidebarPosLeftX ){
-        let targetScrollLeft = nodeSelectedPosX - sidebarPosLeftX  +  safeDistNodeSidebar;
-        $('#chart').animate( { scrollLeft:  targetScrollLeft})
+      if (nodeSelectedPosX - initialScrollLeft + safeDistNodeSidebar > sidebarPosLeftX) {
+        let targetScrollLeft = nodeSelectedPosX - sidebarPosLeftX + safeDistNodeSidebar;
+        $('#chart').animate({ scrollLeft: targetScrollLeft })
       }
     }
   }
@@ -21135,7 +21137,7 @@ RED.view.tools = (function() {
     return sidebar_tabs.contains(id);
   }
 
-  function deselectAll(){
+  function deselectAll() {
     // Deselect the shortcut icon
     let selectedTab = $('.sidebar-shortcuts-icons').find('a.active');
     selectedTab.each(function () {
@@ -21153,11 +21155,11 @@ RED.view.tools = (function() {
 
   }
 
-  function selectTab(index){
+  function selectTab(index) {
     let selectedTab = $('#sidebar-shortcuts').find('.sidebar-shortcuts-icons').children()[index];
     // Click only if has not been selected
     // console.log('[sidebar] selectedTab.hasClass(selected)=', selectedTab.hasClass('selected'));
-    if (!$(selectedTab).hasClass('selected')){
+    if (!$(selectedTab).hasClass('selected')) {
       $(selectedTab).click();
     }
   }
@@ -21171,29 +21173,29 @@ RED.view.tools = (function() {
       }
     });
 
-    RED.actions.add('core:show-sidebar', function(e){
+    RED.actions.add('core:show-sidebar', function (e) {
       //show the sidebar
       toggleSidebar(true);
 
       //show the sidebar-separator
       // let sidebarSeparator = $('#sidebar-separator');
       // sidebarSeparator.show();
-      
+
       // Select internally the tab
-      if (e && e.hasOwnProperty('selectIndex')){
-        selectTab(e.selectIndex); 
+      if (e && e.hasOwnProperty('selectIndex')) {
+        selectTab(e.selectIndex);
       }
     });
 
-    RED.actions.add('core:hide-sidebar', function(){
-      if (!sidebarDragging){
+    RED.actions.add('core:hide-sidebar', function () {
+      if (!sidebarDragging) {
         toggleSidebar(false);
         deselectAll();
-      }else {
+      } else {
         console.log('[sidebar] Ignoring hide-sidebar as dragging is still enabled')
       }
     });
-    
+
     // RED.popover.tooltip(
     //   $('#sidebar-separator').find('.sidebar-control-right'),
     //   RED._('keyboard.toggleSidebar'),
@@ -21210,6 +21212,8 @@ RED.view.tools = (function() {
     RED.sidebar.azure.init();
     RED.sidebar.awsDeploy.init();
 
+    // RED.sidebar.ai.init();
+
 
 
     // hide info bar at start if screen rather narrow...
@@ -22477,6 +22481,8 @@ RED.view.tools = (function() {
       return;
     }
 
+    console.log(`attaching data list for ${serviceType} ${itemId} ${dataListId}`);
+
     $(`#${dataListId}`).empty();
     try {
       let services = await window.__kumologica.cloud.listServices(serviceType);
@@ -22493,6 +22499,7 @@ RED.view.tools = (function() {
             $('<option>').attr('value', item.id).text(item.name)
           );
         });
+
         $(`#${itemId}`).attr('list', dataListId);
 
         $(itemId).change(function () {
@@ -22528,6 +22535,27 @@ RED.view.tools = (function() {
       $(itemId).change(function () {
         saveSettings();
       });
+
+      // api got 2 levels dependency lists
+      if (serviceType === "api") {
+ 
+        $(itemId).on('input', function() {
+          let id = $(this).val(); // api id
+          alert("Make Ajax call here.2");
+          
+          $(`#${dataListId}`).find("option").each(function() {
+            console.log($(this).val() + "<>" + id);
+            if ($(this).val() === id) {   
+              // api id has been selected, populate stages and parentIds
+              // find itemId of stage
+              const stageItemId = itemId.replace("-api", "-stage");
+              const parentItemId = itemId.replace("-api", "-parentId");
+             // console.log("stage " + stageItemId + " parnet " + parentItemId);
+              //alert("Make Ajax call here.2");
+            }
+          })
+        })
+      }
     }
   }
 
@@ -22546,6 +22574,7 @@ RED.view.tools = (function() {
     return msg;
   }
 
+  // functions adds trigger definition to the list
   function eventTableHtml(eventSource, values, itemId, dataListId) {
     html = `  
       <table id="cloud-fn-event-table" class="node-info" style="table-layout: fixed; padding: 0px; margin: 0px;">
@@ -22557,7 +22586,7 @@ RED.view.tools = (function() {
           </tr>
         </thead>
         <tbody>`;
-
+  
     // add parameters
     parameterSets[eventSource].forEach(function (p, i) {
       let placeholder = 'optional';
@@ -22576,7 +22605,7 @@ RED.view.tools = (function() {
       if (p.list) {
         html += `
           <td style="background: white; width:46%">
-            <select type="text" class="palette-textinput" id="${itemId}-${i}" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
+            <select type="text" class="palette-textinput" id="${itemId}-${p.key}" style="float: left; width: 100%; padding: 0px; outline: 0px solid #ccc; ">
         `;
         $.each(p.list, function () {
           if (values && this.v == values[p.key]) {
@@ -22591,7 +22620,7 @@ RED.view.tools = (function() {
       } else if (p.function) {
         html += `
           <td style="background: white; width:46%">
-            <input id="${itemId}-${i}" 
+            <input id="${itemId}-${p.key}" 
               class="palette-textinput" type="text" 
               list="${dataListId}"
               placeholder="required" style="width:100%" 
@@ -22606,7 +22635,7 @@ RED.view.tools = (function() {
       } else {
         html += `
           <td style="background: white; width:46%">
-            <input id="${itemId}-${i}" class="palette-textinput" type="text" placeholder="${placeholder}" style="width:100%" value="${
+            <input id="${itemId}-${p.key}" class="palette-textinput" type="text" placeholder="${placeholder}" style="width:100%" value="${
           values == undefined || values[p.key] == undefined ? '' : values[p.key]
         }" ${requiredAttribute}>
           </td>
@@ -23290,7 +23319,7 @@ RED.view.tools = (function() {
   ];
   parameterSets['websocket'] = [
     {
-      label: 'ApiId',
+      label: 'Api Id',
       key: 'apiId',
       value: '',
       required: true,
@@ -24314,7 +24343,7 @@ RED.sidebar.nodeinfo = (function(){
         init,
         emptyTab
     }
-})();;RED.sidebar.test = (function() {
+})();;RED.sidebar.test = (function () {
   let editors = {};
 
   // html anchors
@@ -24324,7 +24353,7 @@ RED.sidebar.nodeinfo = (function(){
   let stackContainer;
   let testNodes;
   let triggeredTest; // Flag to indicate when launch a test. As we dont want to launch test for every deployment
-  
+
   // control variables
   let testCaseIdSelected; // nodeID | __runall | undefined
   let environmentSelected;
@@ -24339,7 +24368,7 @@ RED.sidebar.nodeinfo = (function(){
 
   function updateTestCaseInit(event, msg) {
     let { testCaseID, testCaseDescription } = msg.payload.testCase;
-     
+
     // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
     let testCaseId = testCaseID.replace(/\./g, '_');
 
@@ -24390,8 +24419,8 @@ RED.sidebar.nodeinfo = (function(){
       })
       .appendTo(testcaseTabs);
 
-      // This is the dropzone for content that will be selected in the tabs
-      $(`<div class="testcase-info-container">
+    // This is the dropzone for content that will be selected in the tabs
+    $(`<div class="testcase-info-container">
       <div id="testcase-info-response-${testCaseId}" class="testcase-info selected">
       <div style="display: flex; justify-content: flex-end; margin-right: 10px"><span class="testcase-resp-status">Status: </span><span id="testcase-status-${testCaseId}" style="font-size: 12px; color:#2979ff; margin-right: 4px"></span></div>
         <div id="testcase-info-response-header">
@@ -24442,11 +24471,11 @@ RED.sidebar.nodeinfo = (function(){
     });
 
     // Create an editor the the response body
-    editors[testCaseId] =  RED.editor.createEditor({
+    editors[testCaseId] = RED.editor.createEditor({
       id: `testcase-resp-body-${testCaseId}`,
       lineNumbers: true,
       showFoldWidgets: true,
-      mode:"ace/mode/text",
+      mode: "ace/mode/text",
       options: {
         wrap: true
       }
@@ -24456,24 +24485,24 @@ RED.sidebar.nodeinfo = (function(){
     $(`#testcase-info-response-bodyformat-${testCaseId}`).on('change', function (e) {
       var valueSelected = this.value;
       switch (valueSelected) {
-        case 'json': 
+        case 'json':
           let rjson = editors[testCaseId].getSession().getValue();
           let prjson = JSON.parse(rjson);
           editors[testCaseId].getSession().setValue(JSON.stringify(prjson, null, 2));
-          editors[testCaseId].getSession().setMode('ace/mode/json'); 
+          editors[testCaseId].getSession().setMode('ace/mode/json');
           break;
-        case 'xml': 
-          editors[testCaseId].getSession().setMode('ace/mode/xml'); 
+        case 'xml':
+          editors[testCaseId].getSession().setMode('ace/mode/xml');
           let vxml = editors[testCaseId].getSession().getValue();
           editors[testCaseId].getSession().setValue(formatXml(vxml));
           break;
-        case 'html': 
-          editors[testCaseId].getSession().setMode('ace/mode/html'); 
+        case 'html':
+          editors[testCaseId].getSession().setMode('ace/mode/html');
           let vhtml = editors[testCaseId].getSession().getValue();
           editors[testCaseId].getSession().setValue(formatXml(vhtml));
           break;
-        default: 
-          editors[testCaseId].getSession().setMode('ace/mode/text'); 
+        default:
+          editors[testCaseId].getSession().setMode('ace/mode/text');
           break
       }
     });
@@ -24485,10 +24514,10 @@ RED.sidebar.nodeinfo = (function(){
       })
     });
 
-    $(`#testcase-info-copypaste-container-${testCaseId}`).click(e=> {
+    $(`#testcase-info-copypaste-container-${testCaseId}`).click(e => {
       RED.clipboard.copyText(
-        editors[testCaseId].getSession().getValue(), 
-        $(`#testcase-info-copypaste-container-${testCaseId}`), 
+        editors[testCaseId].getSession().getValue(),
+        $(`#testcase-info-copypaste-container-${testCaseId}`),
         'Response Copied to Clipboard');
     });
 
@@ -24496,14 +24525,14 @@ RED.sidebar.nodeinfo = (function(){
   }
 
   function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
-    var formatted = '', indent= '';
+    var formatted = '', indent = '';
     tab = tab || '\t';
-    xml.split(/>\s*</).forEach(function(node) {
-        if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
-        formatted += indent + '<' + node + '>\r\n';
-        if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab;              // increase indent
+    xml.split(/>\s*</).forEach(function (node) {
+      if (node.match(/^\/\w/)) indent = indent.substring(tab.length); // decrease indent by one 'tab'
+      formatted += indent + '<' + node + '>\r\n';
+      if (node.match(/^<?\w[^>]*[^\/]$/)) indent += tab;              // increase indent
     });
-    return formatted.substring(1, formatted.length-3);
+    return formatted.substring(1, formatted.length - 3);
   }
 
   function updateTestCaseStart(event, msg) {
@@ -24525,21 +24554,21 @@ RED.sidebar.nodeinfo = (function(){
 
   }
 
-  function convertBodyToString(body){
+  function convertBodyToString(body) {
     let typeBody = typeof body;
 
-    if (typeBody === 'object'){
+    if (typeBody === 'object') {
       return JSON.stringify(body, null, 2);
-    }else if (typeBody === 'string') {
+    } else if (typeBody === 'string') {
       //return body.replace(/['"]+/g, '');;
       return body;
     } else {
       return ""
     }
-   
+
   }
 
-  function attachHeaders(headers, testCaseId){
+  function attachHeaders(headers, testCaseId) {
     let headersContainerEl = $(`#testcase-resp-headers-${testCaseId}`);
     for (let header in headers) {
       $(`
@@ -24554,7 +24583,7 @@ RED.sidebar.nodeinfo = (function(){
     }
   }
 
-  function changeTabSelection(key, testCaseId){
+  function changeTabSelection(key, testCaseId) {
     // if headers selected, then disable the output format and wrap line option
     if (key === 'headers') {
       $(`#testcase-info-response-bodyformat-container-${testCaseId}`).hide();
@@ -24580,7 +24609,7 @@ RED.sidebar.nodeinfo = (function(){
     $(`#testcase-resp-${key}-${testCaseId}`).addClass('selected');
   }
 
-  function selectTestcaseTab(key, testCaseID){
+  function selectTestcaseTab(key, testCaseID) {
     // Reset the tabs
     $(`#testcase-tab-assertion-${testCaseID}`).removeClass('selected');
     $(`#testcase-tab-response-${testCaseID}`).removeClass('selected');
@@ -24605,14 +24634,14 @@ RED.sidebar.nodeinfo = (function(){
     let status = 'passed';
 
     // Check whether the testcase is failed or not ...
-    for (let i=0; i < assertionResults.length; i++){
+    for (let i = 0; i < assertionResults.length; i++) {
       if (assertionResults[i].status === 'failed') {
         status = 'failed';
         break;
       }
     }
     // Find the testcase section
-    if (status === 'failed'){
+    if (status === 'failed') {
       $(`#section-${testCaseId}`).parent().parent().addClass('failed');
     } else {
       $(`#section-${testCaseId}`).parent().parent().addClass('passed');
@@ -24625,7 +24654,7 @@ RED.sidebar.nodeinfo = (function(){
     let testCaseId = testCaseID.replace(/\./g, '_')
 
     let assertionSectionHtml
-    if (status === 'failed'){
+    if (status === 'failed') {
       assertionSectionHtml = `
       <div class="assertion assertion-failed" style="display: flex; flex-direction: column;">
         <div style="display:flex; align-items: center;">
@@ -24643,34 +24672,35 @@ RED.sidebar.nodeinfo = (function(){
       </div>
       `;
     }
-    
+
     let testCaseAssertionsContainer = $(`#testcase-info-assertion-${testCaseId}`)
 
     $(assertionSectionHtml).appendTo(testCaseAssertionsContainer);
     testCaseSection.container.show();
   }
 
-  function onsame(){
+  function onsame() {
     RED.actions.invoke('core:hide-sidebar');
   }
 
   // Refresh the test tab
   // silently - if true, we will update the nodes if required, but do not show the sidebar. Used primarily for the save button
   function refreshTab(silently) {
-    if (!silently){
+    console.log('[tab-test] refreshTab, silently=', silently);
+    if (!silently) {
       RED.actions.invoke('core:show-sidebar');
     }
 
     // Append to the selector all testcases found in the project
     let $testSidebarTestcases = $('#test-sidebar-testcases');
-    
+
     // Searching for all testcases in the test.flow node.
     let testcasenodes = App.nodes.filterNodes({ type: 'TestCase' });
     // Searching for all HTTP testcases in the test.flow node.
     let httptestcasenodes = App.nodes.filterNodes({ type: 'HTTPTestCase' });
 
     testNodes = testcasenodes.concat(httptestcasenodes);
-    
+
 
     if (testNodes && Array.isArray(testNodes) && testNodes.length > 0) {
       $('#test-sidebar-notestfound-explainer').hide();
@@ -24687,7 +24717,7 @@ RED.sidebar.nodeinfo = (function(){
       );
       $testSidebarTestcases.append(
         `<option value="${RUN_ALL_TEST_CASES}"> Run all TestCases</option>`
-      ); 
+      );
       // Check which option will be selected
       // a) If nothing was selected, select the empty
       if (testCaseIdSelected === undefined || testCaseIdSelected === null) {
@@ -24708,6 +24738,10 @@ RED.sidebar.nodeinfo = (function(){
       $('#test-sidebar-notestfound-explainer').show();
     }
 
+    // Notify the footer about the changes in the testCase dropdown
+    refreshTestCases();
+
+    // Refresh the values of the environments in case there was a change in the config
     refreshEnvironments();
   }
 
@@ -24716,23 +24750,33 @@ RED.sidebar.nodeinfo = (function(){
     if (config) {
       // Preselect the last testCase selected
       testCaseIdSelected = config.getLatestSelectedTestCase();
-  
+
       $(`#test-sidebar-testcases option[value="${testCaseIdSelected}"]`).attr(
         'selected',
         true
       );
+
+      let testCaseSelectedName = $('#test-sidebar-testcases option:selected').text()
+      console.log(`[tab-test] refreshTestCases invoked with id=${testCaseIdSelected}`);
+      console.log(`[tab-test] refreshTestCases invoked with name=${testCaseSelectedName}`);
+
+      RED.actions.invoke('test:change-testcase-selected',
+        {
+          id: testCaseIdSelected,
+          name: testCaseSelectedName
+        });
     }
-    
+
   }
 
   function refreshEnvironments() {
-    let config =  window.__kumologica.settings.testConfig;
+    let config = window.__kumologica.settings.testConfig;
     if (config) {
-      let environmentsList =config.listEnvironments();
+      let environmentsList = config.listEnvironments();
 
       let $testSidebarEnvironments = $('#test-sidebar-environments');
       $testSidebarEnvironments.empty();
-  
+
       // Attach the "no environments" option
       $testSidebarEnvironments.append(
         `<option value="__no_environment__">No Environment</option>`
@@ -24742,7 +24786,7 @@ RED.sidebar.nodeinfo = (function(){
           `<option value=${e}>${e}</option>`
         );
       });
-  
+
       // Select the latest environment
       environmentSelected = window.__kumologica.settings.testConfig.getLatestSelectedEnvironment();
       $(`#test-sidebar-environments option[value="${environmentSelected}"]`).attr('selected', true);
@@ -24756,16 +24800,16 @@ RED.sidebar.nodeinfo = (function(){
    * this to keep fake new row at the bottom. 
    */
   function refreshProperties() {
-    if (window.__kumologica.settings.testConfig){
+    if (window.__kumologica.settings.testConfig) {
       let envvars = window.__kumologica.settings.testConfig.listVariablesByEnvironment();
       // Clean up the table before starting injecting the new variables.
       $('#table-test-properties').empty();
-  
+
       envvars.forEach(ev => {
         attachPropertyRow(ev.key, ev.value);
       })
     }
-    
+
   }
 
   function init() {
@@ -24782,7 +24826,7 @@ RED.sidebar.nodeinfo = (function(){
     ipcRenderer.on('test:assertion-report', updateTestCaseAssertion);
 
     ipcRenderer.on('debugger:stopped', debuggerStoppedOnBreakpoint);
-    
+
 
     // Prepare the html wrappers
     initHtml();
@@ -24799,6 +24843,14 @@ RED.sidebar.nodeinfo = (function(){
     // Attach the change event to the "testcase" select
     $('#test-sidebar-testcases').change(e => {
       testCaseIdSelected = e.target.value;
+      let testCaseSelectedName = $('#test-sidebar-testcases option:selected').text();
+
+      RED.actions.invoke('test:change-testcase-selected',
+        {
+          id: testCaseIdSelected,
+          name: testCaseSelectedName
+        });
+
       saveSettings();
     });
     $('#test-sidebar-environments').change(e => {
@@ -24814,40 +24866,38 @@ RED.sidebar.nodeinfo = (function(){
     });
 
     // Attach debugger events
-    $('#test-sidebar-debug-continue').click( async (e)=> {
+    $('#test-sidebar-debug-continue').click(async (e) => {
       await window.__kumologica.debugger.continue()
     });
 
-    $('#test-sidebar-debug-terminate').click( async (e)=> {
+    $('#test-sidebar-debug-terminate').click(async (e) => {
       await window.__kumologica.debugger.terminate();
     });
 
-    $('#test-sidebar-debug-next').click( async (e)=> {
+    $('#test-sidebar-debug-next').click(async (e) => {
       await window.__kumologica.debugger.next();
     });
 
 
-    $('#test-sidebar-debug-restart').click( async (e)=> {
+    $('#test-sidebar-debug-restart').click(async (e) => {
       await window.__kumologica.debugger.terminate();
       // give 1 sec to clean up the tab
-      setTimeout(async()=> {
+      setTimeout(async () => {
         await triggerDebugTestSuite();
       }, 500);
     });
 
-    RED.events.on('deploy:finished', async()=> {
-      if (triggeredTest){
+    RED.events.on('deploy:finished', async () => {
+      if (triggeredTest) {
         await executeTestSuite();
         triggeredTest = false;
       }
     });
 
     // Case where the environment variables config has change
-    RED.events.on('settings:environment-variables-changed', ()=> {
+    RED.events.on('settings:environment-variables-changed', () => {
       refreshEnvironments();
     })
-
-
   }
 
   function show() {
@@ -24858,7 +24908,7 @@ RED.sidebar.nodeinfo = (function(){
     $('#test-results-wrapper').empty();
   }
 
-  async function triggerExecuteTestSuite(opts){
+  async function triggerExecuteTestSuite(opts) {
     // Clean up the test results from the secion
     if (sections) {
       sections.removeAll();
@@ -24881,10 +24931,10 @@ RED.sidebar.nodeinfo = (function(){
 
     // Clean up the previous test results
     $('#test-results-wrapper').empty();
-    
+
     // Show the terminal if close
     let terminalOpen = $('#workspace-terminal').is(":visible");
-    if (!terminalOpen){
+    if (!terminalOpen) {
       $('#shelve-middle').click();
     }
 
@@ -24903,20 +24953,20 @@ RED.sidebar.nodeinfo = (function(){
 
       // Trigger the testcases
       if (RUN_ALL_TEST_CASES === testCaseIdSelected) {
-        for (let i=0; i < testNodes.length; i++) { 
+        for (let i = 0; i < testNodes.length; i++) {
           createDebugMessageCache(testNodes[i].id);
-          try{
+          try {
             // console.log(`[tab-test] Running testcase: ${testNodes[i].id} ...`, )
             await window.__kumologica.libs.testFlow('{}', testNodes[i].id, environment);
-          }catch(err){
+          } catch (err) {
             console.log('[tab-test] error found: ', err);
           }
-        }    
+        }
       } else {
         try {
           createDebugMessageCache(testCaseIdSelected);
           await window.__kumologica.libs.testFlow('{}', testCaseIdSelected, environment);
-        } catch(err) {
+        } catch (err) {
           console.log('[tab-test] error found: ', err);
           //App.notify(`Error found: ${JSON.stringify(err)}`, { type: 'error'});
         }
@@ -24926,7 +24976,7 @@ RED.sidebar.nodeinfo = (function(){
     }
   }
 
-  function createDebugMessageCache(testCaseID){
+  function createDebugMessageCache(testCaseID) {
     let sanitizeTestCaseID = testCaseID.replace(/\./g, '_')
     $(`<div id="test-debug-message-cache-${sanitizeTestCaseID}" style="margin-right: 2px"></div>`).appendTo($('#test-debug-messages-caches'));
   }
@@ -25080,11 +25130,11 @@ RED.sidebar.nodeinfo = (function(){
     });
 
     // ==> Load initial data to the screen
-    refreshScreen(); 
+    refreshScreen();
 
     // Append to the list of properties a fake record to append a new property
     // attachAppendPropertyRow(); // TODO: Javier review
-    
+
     // Load the tooltips
     RED.popover.tooltip($('#test-sidebar-header-wrapper-left'), 'Select Test Case to Run');
     RED.popover.tooltip(
@@ -25113,8 +25163,8 @@ RED.sidebar.nodeinfo = (function(){
     attachAppendPropertyRow();
   });
 
-  function toggleProperties(){
-    if (propertiesOpened){
+  function toggleProperties() {
+    if (propertiesOpened) {
       // close the properties window
       $('#propertiesSection').hide();
     } else {
@@ -25135,9 +25185,9 @@ RED.sidebar.nodeinfo = (function(){
     refreshProperties();
   }
 
-  
 
-  function attachPropertyRow(key, value){
+
+  function attachPropertyRow(key, value) {
     const s = key;
     const keyid = s.replace(/[^a-zA-Z0-9-]/g, '_');
     let propertyRow = `
@@ -25167,30 +25217,30 @@ RED.sidebar.nodeinfo = (function(){
     });
   }
 
-  function deleteProperty(key){
+  function deleteProperty(key) {
     // detach the DOM element
     $(`#row-${key}`).remove();
     saveSettings();
   }
 
-  function addProperty(key, value){
+  function addProperty(key, value) {
     // reset the errors have happened in the past,... pity we cannot do the same in real life
     $('#new-prop-key').removeClass('wrong-value');
     $('#new-prop-value').removeClass('wrong-value');
 
     let errorsFound = false;
 
-    if (!key){
+    if (!key) {
       errorsFound = true;
       $('#new-prop-key').addClass('wrong-value');
     }
 
-    if (!value){
+    if (!value) {
       errorsFound = true;
       $('#new-prop-value').addClass('wrong-value');
     }
 
-    if (!errorsFound){
+    if (!errorsFound) {
       // remove the addPropertyRow...
       $('#table-row-append').remove();
       // Sanitize the key. As this will be used as a valid `id` property of the html element
@@ -25234,37 +25284,37 @@ RED.sidebar.nodeinfo = (function(){
         <div id="addSaveProperty" class="table-cell-btn"><i class="icofont-save"></i></div>
       </div>
     `;
-   $(addPropertyRow).appendTo($('#table-test-properties'));
+    $(addPropertyRow).appendTo($('#table-test-properties'));
 
-   // Attach the save event
-   $('#addSaveProperty').click(e => {
-    let key = $('#new-prop-key').val();
-    let value = $('#new-prop-value').val();
-    addProperty(key, value);
-   });
-   // Do not allow spaces on the key - replace if for dashes
-   $('#new-prop-key').on('input', () => {
-    let old = $('#new-prop-key').val();
-    $('#new-prop-key').val(old.replace(/\s+/g, '-') );
-   });
+    // Attach the save event
+    $('#addSaveProperty').click(e => {
+      let key = $('#new-prop-key').val();
+      let value = $('#new-prop-value').val();
+      addProperty(key, value);
+    });
+    // Do not allow spaces on the key - replace if for dashes
+    $('#new-prop-key').on('input', () => {
+      let old = $('#new-prop-key').val();
+      $('#new-prop-key').val(old.replace(/\s+/g, '-'));
+    });
   }
 
   // Debugger operations
   async function triggerDebugTestSuite() {
     // console.log('[tab-test] Debugger started ...');
-    let { body}  = await window.__kumologica.debugger.listBreakpoints();
+    let { body } = await window.__kumologica.debugger.listBreakpoints();
     // console.log('[tab-test] Breakpoints =', body);
-    if ( body.length === 0 ) {
+    if (body.length === 0) {
       // case of no breakpoints found in the flow
       await triggerExecuteTestSuite({ debug: false });
       RED.notifications.notify('No breakpoints found in the flow', 'warning', undefined, 2000);
-    } else{
+    } else {
       $('#test-info-wrapper').hide();
       $('#properties-wrapper').hide();
       $('#debugger-wrapper').show();
       await triggerExecuteTestSuite({ debug: true });
     }
-    
+
   }
 
   async function hideDebuggerControls() {
@@ -25281,17 +25331,17 @@ RED.sidebar.nodeinfo = (function(){
     $('#debugger-wrapper').show();
   }
 
-  function debuggerStoppedOnBreakpoint(e,msg) {
+  function debuggerStoppedOnBreakpoint(e, msg) {
     // console.log('[tab-test] Debugger stopped on breakpoint ...e=', e);
     // console.log('[tab-test] Debugger stopped on breakpoint ...msg=', msg);
 
     showDebuggerControls();
 
-    let universalNodeId = msg.payload.nodeId; 
+    let universalNodeId = msg.payload.nodeId;
     let testCaseID = universalNodeId.split('::')[0];
     // sanitize the testCaseId, i.e. removing dots as jquery selector does not like it
     testCaseId = testCaseID.replace(/\./g, '_');
-    
+
     sections.expandLastEntry();
     selectTestcaseTab('traces', testCaseId);
   }
@@ -25301,7 +25351,216 @@ RED.sidebar.nodeinfo = (function(){
     refreshTab,
   };
 })();
-;RED.sidebar.git = (function(){
+;RED.sidebar.ai = (function () {
+    let tabContent;
+    let sections;
+    let stackContainer;
+    let latestCodeGenerated = '[]';
+
+    const INITIAL_MESSAGE = `Generate flow or node that ... (ctrl+enter to generate)`;
+
+    const openAIClient = window.__kumologica.libs.openAIClient; // TODO: javier
+
+    function initHTML() {
+        tabContent = document.createElement('div');
+        tabContent.className = 'sidebar-ai';
+        tabContent.style = "height: 100%";
+
+        RED.actions.add('core:show-ai-tab', show);
+
+        stackContainer = $('<div>', {
+            class: 'sidebar-node-info-stack',
+            style: 'height: 100%'
+        }).appendTo(tabContent);
+
+        // Append the header
+        let headerContentHtml = `
+        <div class="sidebar-ai-title-wrapper">
+            <div style="display:flex;flex-direction:column;padding-right:10px; width:100%; height: 100%">
+                <div id="sidebar-title-wrapper" style="display:flex">
+                    <span>Generative AI</span>
+                </div>
+
+                <div id="sidebar-ai-body">
+                    <div id="sidebar-ai-error-wrapper" style="display:none">
+                        <span><b>An error occurred during processing your request</b> 
+                        <span>Please check the logs for additional details or contact support for assistance</span>
+                    </div>
+                    <div id="sidebar-ai-response-wrapper" style="display:none">
+                        <div class="pt-0.5">
+                            <div class="gizmo-shadow-stroke flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
+                                <div class="relative p-1 rounded-sm h-9 w-9 text-white flex items-center justify-center" style="background-color: rgb(25, 195, 125); width: 24px; height: 24px; border-radius: 9999px; justify-content: center; align-items: center; color: white; margin-bottom: 7px">
+                                    <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm" role="img"><text x="-9999" y="-9999">ChatGPT</text><path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor"></path>
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="sidebar-ai-response-message">
+                            <div id="sidebar-ai-response-action-wrapper">
+                                <a id="sidebar-ai-import-flow" class="sidebar-header-button" href="#" style="margin-right:5px">
+                                    Import Flow
+                                </a>
+                            </div>
+                            <span id="sidebar-ai-response-flow-value"></span>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <div id="sidebar-ai-prompt">
+                    <div id="sidebar-ai-prompt-message-wrapper">
+                        <textarea id="sidebar-ai-prompt-message" rows="4" placeholder="${INITIAL_MESSAGE}" style="min-height:130px"></textarea>
+                    </div>
+                    <div id="sidebar-ai-prompt-actions">
+                        <a id="sidebar-ai-clear-btn" class="sidebar-header-button" href="#" style="margin-right:5px">
+                            Clear
+                        </a>
+                        <a id="sidebar-ai-generate-btn" class="sidebar-header-button" href="#" style="color: white !important; background: #2979ff;">
+                            Generate
+                        </a>
+                    </div>
+                    <div id="sidebar-ai-prompt-noactions" style="display:none">
+                        <a id="sidebar-ai-generating" class="sidebar-header-button" href="#" style="color: white !important; height: 24px;">
+                            <img src="red/images/spin.svg" class="palette-spinner" style="height: 16px; width: 57px" />
+                        </a>
+                    </div>
+                </div>
+                
+                <div id="ai-not-initialized" style="display:none">
+                    <div style="display:flex; flex-direction: column; align-items: center; margin-top: 150px">
+                        <div><i class="fa fa-magic" style="font-size: 56px; color: lightgrey;"></i></div>
+                        <div style="font-weight: bold; font-size: 22px; margin-top: 15px;color: grey;">OpenAI API Key not found</div>
+                        <div style="margin-top: 5px; color: grey;font-weight: 400; font-size: 13px;">To use this feature, you need to add your OpenAI key. </div>
+                        <div style="margin-top: 10px"><span id="add-ai-key" style="font-weight: 500;font-size: 12px; color: #2979ff">Add key</span></div>
+                    </div>
+                </div>
+            </div>
+          </div>
+        `;
+
+        $(headerContentHtml).appendTo(stackContainer);
+
+        RED.sidebar.addTab({
+            id: 'ai',
+            label: 'Gen AI',
+            name: 'Generative AI',
+            iconClass: 'fa fa-magic',
+            action: 'core:show-git-tab',
+            content: tabContent,
+            pinned: true,
+            enableOnEdit: true,
+            onchange: refreshTab,
+            onsame: onsame
+        })
+    }
+    function displayGeneratedCode(code) {
+        // update the latest code generated
+        latestCodeGenerated = JSON.stringify(code, null, 2);
+
+        $('#sidebar-ai-response-wrapper').show();
+        let $response = $('#sidebar-ai-response-flow-value');
+
+        RED.utils
+            .createObjectElement({ "code": code }, {
+                key: /*true*/ null,
+                typeHint: 'object',
+                hideKey: false,
+                path: '',
+                sourceId: 0,
+                rootPath: '',
+            })
+            .appendTo($response);
+    }
+
+    function changeStateToGenerating() {
+        latestCodeGenerated = '[]';
+        // Clear the previous response if required
+        $('#sidebar-ai-response-wrapper').hide();
+        $('#sidebar-ai-response-flow-value').empty();
+
+        // Control buttons
+        $('#sidebar-ai-prompt-actions').hide();
+        $('#sidebar-ai-prompt-noactions').show();
+    }
+
+    function changeStateToGenerated() {
+        $('#sidebar-ai-prompt-actions').show();
+        $('#sidebar-ai-prompt-noactions').hide();
+
+    }
+
+    function initJS() {
+        // Generate action
+        $('#sidebar-ai-generate-btn').click(async e => {
+            console.log('Asking AI to generate code...');
+            // Change the icon to loading
+            changeStateToGenerating();
+
+            let userPrompt = $('#sidebar-ai-prompt-message').val();
+            if (userPrompt) {
+                let response = await openAIClient.t2c(userPrompt);
+                displayGeneratedCode(response);
+                changeStateToGenerated();
+            } else {
+                changeStateToGenerated();
+            }
+
+
+        })
+        // Trigger generate action from ctrl+click
+        $('#sidebar-ai-prompt-message').keydown(e => {
+            if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
+                $('#sidebar-ai-generate-btn').click();
+            }
+        })
+
+        // Clear button
+        $('#sidebar-ai-clear-btn').click(async e => {
+            // Clear all messages
+            $('#sidebar-ai-response-wrapper').hide();
+            $('#sidebar-ai-response-flow-value').empty();
+
+            // Clear user prompt
+            $('#sidebar-ai-prompt-message').val('');
+        });
+
+        $('#sidebar-ai-import-flow').click(e => {
+            // Copy code to clipboard
+            const { clipboard } = window.__kumologica.electron;
+            clipboard.writeText(latestCodeGenerated);
+
+            // Open the import flow dialog
+            RED.actions.invoke('core:show-import-dialog')
+
+            // automatically trigger the import-from-clipboard option
+            setTimeout(() => { $('#import-from-clipboard').click() }, 100);
+        })
+    }
+
+    function init() {
+        initHTML();
+        initJS();
+    }
+
+    function show() {
+        RED.sidebar.show('ai');
+    }
+
+    function refreshTab(silently) {
+        if (!silently) {
+            RED.actions.invoke('core:show-sidebar');
+        }
+    }
+
+    function onsame() {
+        RED.actions.invoke('core:hide-sidebar');
+    }
+
+    return {
+        init: init,
+        show: show,
+    }
+})();;RED.sidebar.git = (function(){
 
     let tabContent;
     let sections;
@@ -26535,7 +26794,149 @@ RED.sidebar.azure = (function () {
   };
   
 })();
-;RED.palette.explorer = (function () {
+;RED.footer = (function () {
+    // AI Section
+    const askConfigureAI = () => {
+        console.log(`[footer] showing "askConfigureAi"`)
+
+        $('#generate-code-ai').hide();
+        $('#explain-code-ai').hide();
+        $('#fix-code-ai').hide();
+
+        $('#ask-configure-ai').show();
+    }
+
+    const showTasksAI = () => {
+        console.log(`[footer] showing all AI tasks`)
+
+        $('#generate-code-ai').show();
+        $('#explain-code-ai').show();
+        $('#fix-code-ai').show();
+
+        $('#ask-configure-ai').hide();
+    }
+
+    const isEnabledAI = () => {
+        return false;
+    }
+
+
+    const handleChangeTestCase = (tcSelected) => {
+        console.log('[footer] callback with tcSelected', tcSelected);
+        let testcaseName = tcSelected.name || 'No TestCase selected'; // 'getTestCaseName(tcSelected.id);
+        console.log('[footer] Resolved testcase name=', testcaseName);
+
+        if (testcaseName) {
+            $('#footer-test').show();
+            $('#footer-test-value').text(testcaseName);
+        } else {
+            $('#footer-test').hide();
+        }
+    }
+
+    const getTestCaseName = (testcaseId) => {
+        if (!testcaseId) return "No TestCase selected";
+
+        if (testcaseId === '__runAll') {
+            return "Run all TestCases";
+        } else {
+            let nodeSelected = RED.nodes.filterNodes({ id: testcaseId });
+            console.log('[footer] Node Selected: ', nodeSelected)
+            if (nodeSelected && Array.isArray(nodeSelected) && nodeSelected.length > 0) {
+                let name = nodeSelected[0].name;
+                return name;
+            }
+        }
+    }
+
+    const initNodeLibraryWidget = () => {
+        let $nodeLibrary = $('#launch-node-library');
+        RED.popover.tooltip($nodeLibrary, 'Open node library...');
+    }
+
+    const initRuntimeVerWidget = () => {
+        let $runtimeVer = $('#footer-runtime-ver');
+        RED.popover.create({
+            target: $runtimeVer,
+            trigger: 'hover',
+            size: 'small',
+            direction: 'top',
+            content: 'Kumologica runtime installed',
+            delay: { show: 750, hide: 50 },
+        })
+    }
+
+    const initServerWidget = () => {
+        let $footerServer = $('#footer-server');
+        RED.popover.tooltip($footerServer, 'Local server listening address')
+    }
+    const initTestWidget = () => {
+        window.__kumologica.settings.loadConfigs();
+        console.log('[footer] testConfig=', window.__kumologica.settings.testConfig);
+
+        let testcaseId = window.__kumologica.settings.testConfig.getLatestSelectedTestCase();
+        let tcSelectedName = getTestCaseName(testcaseId);
+
+        handleChangeTestCase({
+            id: testcaseId,
+            name: tcSelectedName
+        });
+
+        // Add action
+        let $footerTest = $('#footer-test');
+        $footerTest.click(e => {
+            if (!$('.sidebar-test').is(':visible')) {
+                $('#red-ui-tab-test-link-button').click();
+            }
+
+            $('#test-sidebar-run-btn').click();
+        });
+        // Add popover
+        RED.popover.tooltip($footerTest, "Run TestCase");
+
+        // Attach listener
+        RED.actions.add('test:change-testcase-selected', handleChangeTestCase);
+    }
+
+    const initAIWidget = () => {
+        // check whether AI settings are configured or not
+        let aiEnabled = isEnabledAI();
+        if (aiEnabled) {
+            showTasksAI();
+        } else {
+            askConfigureAI();
+        }
+    }
+
+    const initTerminalWidget = () => {
+        let $footerTerminal = $('#footer-terminal');
+
+        $footerTerminal.click(e => {
+            $('#workspace-terminal').toggle();
+        });
+        RED.popover.create({
+            target: $footerTerminal,
+            trigger: 'hover',
+            size: 'small',
+            direction: 'left',
+            content: "Log Viewer",
+            delay: { show: 750, hide: 50 }
+        });
+    }
+
+    const init = () => {
+        initNodeLibraryWidget();
+        initRuntimeVerWidget();
+        initServerWidget();
+        setTimeout(() => initTestWidget(), 2000);
+        initAIWidget();
+        initTerminalWidget();
+    }
+
+    return {
+        init: init
+    }
+})();;RED.palette.explorer = (function () {
   let workspacePreferences = window.__kumologica.settings.workspacePreferenceStore;
   let path = window.__kumologica.libs.path;
 
@@ -28793,7 +29194,7 @@ RED.editor = (function () {
     return latestNodeSelected;
   }
 
-  function setLatestNodeSelected(newLatestNodeSelected){
+  function setLatestNodeSelected(newLatestNodeSelected) {
     // console.log('[editor] setLatestNodeSelected=', newLatestNodeSelected);
     latestNodeSelected = newLatestNodeSelected;
   }
@@ -29069,10 +29470,10 @@ RED.editor = (function () {
     updateConfigNodeSelect(property, type, node[property], prefix);
     $(
       '<a id="' +
-        prefix +
-        '-lookup-' +
-        property +
-        '" class="editor-button"><i class="fa fa-pencil"></i></a>'
+      prefix +
+      '-lookup-' +
+      property +
+      '" class="editor-button"><i class="fa fa-pencil"></i></a>'
     )
       .css({ position: 'absolute', right: 0, top: 0 })
       .appendTo(outerWrap);
@@ -29194,10 +29595,10 @@ RED.editor = (function () {
       // Add the icon of dynamic expression
 
       //input
-        //.parent()
-        // .append(
-        //   '<span style="display:none;float:right;position:relative;top:-23px;right:5px;color:#9c27b0;font-size:14px" class="fa fa-bolt icon-templatable"></span>'
-        // );
+      //.parent()
+      // .append(
+      //   '<span style="display:none;float:right;position:relative;top:-23px;right:5px;color:#9c27b0;font-size:14px" class="fa fa-bolt icon-templatable"></span>'
+      // );
 
       RED.popover.tooltip(
         input.parent().find($('span.icon-templatable')),
@@ -29649,8 +30050,8 @@ RED.editor = (function () {
   function buildEditForm(container, formId, type, ns, node) {
     var dialogForm = $(
       '<form id="' +
-        formId +
-        '" class="form-horizontal" autocomplete="off"></form>'
+      formId +
+      '" class="form-horizontal" autocomplete="off"></form>'
     ).appendTo(container);
     dialogForm.html($("script[data-template-name='" + type + "']").html());
     ns = ns || 'kumologica-core';
@@ -29896,8 +30297,8 @@ RED.editor = (function () {
     var summary = $('<span>').appendTo(metaRow);
     var resetButton = $(
       '<button type="button" class="editor-button editor-button-small">' +
-        'use default' +
-        '</button>'
+      'use default' +
+      '</button>'
     )
       .appendTo(metaRow)
       .click(function (e) {
@@ -29960,10 +30361,10 @@ RED.editor = (function () {
 
     $(
       '<div class="form-row">' +
-        '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>' +
-        '<button type="button" id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> ' +
-        '<input type="checkbox" id="node-input-show-label" style="display: none;"/>' +
-        '</div>'
+      '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>' +
+      '<button type="button" id="node-input-show-label-btn" class="editor-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> ' +
+      '<input type="checkbox" id="node-input-show-label" style="display: none;"/>' +
+      '</div>'
     ).appendTo(dialogForm);
 
     var setToggleState = function (state) {
@@ -30153,7 +30554,7 @@ RED.editor = (function () {
       value: node.info || '',
       lineNumbers: false,
       toolbar: false,
-      onChange: function(delta) {
+      onChange: function (delta) {
         // console.log('[editor] InfoTab changed. Delta=', delta);
         notifyChanges(getLatestNodeSelected());
       }
@@ -30162,7 +30563,7 @@ RED.editor = (function () {
     return nodeInfoEditor;
   }
 
-  function resetEditor(){
+  function resetEditor() {
     editStack.pop();
     RED.sidebar.nodeinfo.emptyTab();
     RED.actions.invoke('core:hide-sidebar');
@@ -30172,7 +30573,7 @@ RED.editor = (function () {
     notifyChanges(getLatestNodeSelected());
   }
 
-  function notifyChanges(nodeSelected){
+  function notifyChanges(nodeSelected) {
     // console.log('[editor] notifyChanges with nodeSelected: ', nodeSelected);
     let editing_node = nodeSelected;
     let node = nodeSelected;
@@ -30336,11 +30737,11 @@ RED.editor = (function () {
       changed = changed || credsChanged;
     }
     if (editing_node.hasOwnProperty("_outputs")) {
-        outputMap = editing_node._outputs;
-        delete editing_node._outputs;
-        if (Object.keys(outputMap).length > 0) {
-            changed = true;
-        }
+      outputMap = editing_node._outputs;
+      delete editing_node._outputs;
+      if (Object.keys(outputMap).length > 0) {
+        changed = true;
+      }
     }
     var removedLinks = updateNodeProperties(editing_node, outputMap);
 
@@ -30379,7 +30780,7 @@ RED.editor = (function () {
       }
     }
 
-    
+
     if (changed) {
       // console.log('[editor] Editing node detected a change. Saving required.');
       var wasChanged = editing_node.changed;
@@ -30424,7 +30825,7 @@ RED.editor = (function () {
       setLatestNodeSelected(editing_node);
       // console.log('[editor] Node changed. Required to be saved', editing_node);
       RED.events.emit('editor:save', editing_node);
-    }else{
+    } else {
       // console.log('[editor] Editing node is same as current node. No saving required');
       return;
     }
@@ -30435,7 +30836,7 @@ RED.editor = (function () {
     // console.log('[editor] Node properties changed. Event: keyup change');
     notifyChanges(getLatestNodeSelected());
     // Wait until the DOM has been modified as part of the click event, to set the new listener to the new elements
-    setTimeout(()=> {
+    setTimeout(() => {
       listenEditorChanges();
     }, 300);
   }
@@ -30444,13 +30845,13 @@ RED.editor = (function () {
     // console.log('[editor] Node properties changed. Event: a click');
 
     // Wait until the DOM has been modified as part of the click event, to set the new listener to the new elements
-    setTimeout(()=> {
+    setTimeout(() => {
       notifyChanges(getLatestNodeSelected());
       listenEditorChanges();
     }, 300);
   }
 
-  function listenEditorChanges(){
+  function listenEditorChanges() {
     // console.log('[editor] Setting new listeners...')
     $('#editor-stack :input').off('keyup change', attachListenerToFieldsChange);
     $('#editor-stack :input').on('keyup change', attachListenerToFieldsChange);
@@ -30460,31 +30861,31 @@ RED.editor = (function () {
   }
 
   function showEditDialog(node) {
-    if (RED.sidebar.isDragging()){
+    if (RED.sidebar.isDragging()) {
       return;
     }
 
     let editing_node;
-    if (Object.keys(node).length === 0 && node.constructor === Object){
+    if (Object.keys(node).length === 0 && node.constructor === Object) {
       resetEditor();
       return;
     }
     // Case selection is about a `link`
-    if (node && node.hasOwnProperty('link')){
+    if (node && node.hasOwnProperty('link')) {
       return;
     }
 
     // Case selection is about a `node`
     if (node && node.hasOwnProperty('nodes') && node.nodes.length === 1) { // Single node selection
       // Ignore if sidebar is not visible - only double click will pull initially the sidebar
-      if (RED.sidebar.isSidebarVisible()){
+      if (RED.sidebar.isSidebarVisible()) {
         editing_node = node.nodes[0];
       } else {
         setLatestNodeSelected(node.nodes[0]);
         return;
       }
-      
-    } else if (node && node.hasOwnProperty('nodes') && Array.isArray(node.nodes)){ // Multinode selection
+
+    } else if (node && node.hasOwnProperty('nodes') && Array.isArray(node.nodes)) { // Multinode selection
       return;
     } else { // Double click on node
       editing_node = node;
@@ -30497,7 +30898,7 @@ RED.editor = (function () {
     // console.log('[editor] Before editStack.push() =', editStack);
     editStack.pop();
     editStack.push(node);
-    
+
     //RED.view.state(RED.state.EDITING);
     var type = node.type;
 
@@ -30513,9 +30914,9 @@ RED.editor = (function () {
       ],
       resize: function (dimensions) {
         editTrayWidthCache[type] = dimensions.width;
-        $('.editor-tray-content').height(dimensions.height - 50);
+        // $('.editor-tray-content').height(dimensions.height - 50);
         var form = $('.editor-tray-content form');
-        
+
         // var form = $('.editor-tray-content form').height(
         //   dimensions.height - 50 - 40
         // );
@@ -30610,10 +31011,10 @@ RED.editor = (function () {
         let editorTabContent = $('#help-tab');
 
         let helpText =
-            $("script[data-help-name='" + node.type + "']").html() ||
-            '<span class="node-info-none">' +
-              'None' +
-              '</span>';
+          $("script[data-help-name='" + node.type + "']").html() ||
+          '<span class="node-info-none">' +
+          'None' +
+          '</span>';
 
         $(`<div class="node-help">${helpText}</div>`).appendTo(editorTabContent);
 
@@ -30683,8 +31084,8 @@ RED.editor = (function () {
         if (editing_node) {
           // console.log('[editor] Showing editor ...')
           RED.sidebar.info.refresh(editing_node);
-           // activate the save button when node properties have changed
-          setTimeout( ()=> {
+          // activate the save button when node properties have changed
+          setTimeout(() => {
             listenEditorChanges();
           }, 300);
         }
@@ -30746,7 +31147,7 @@ RED.editor = (function () {
 
     RED.view.state(RED.state.EDITING);
     var trayOptions = {
-      title: getEditStackTitle(), 
+      title: getEditStackTitle(),
       nodeIconPath: getNodeIconPath(),
       resize: function (dimensions) {
         $('.editor-tray-content').height(dimensions.height - 50);
@@ -30859,8 +31260,8 @@ RED.editor = (function () {
             tabSelect.off('change');
             tabSelect.append(
               '<option value=""' +
-                (!editing_config_node.z ? ' selected' : '') +
-                ' data-i18n="sidebar.config.global"></option>'
+              (!editing_config_node.z ? ' selected' : '') +
+              ' data-i18n="sidebar.config.global"></option>'
             );
             tabSelect.append(
               '<option disabled data-i18n="sidebar.config.flows"></option>'
@@ -30872,10 +31273,10 @@ RED.editor = (function () {
               }
               $(
                 '<option value="' +
-                  ws.id +
-                  '"' +
-                  (ws.id == editing_config_node.z ? ' selected' : '') +
-                  '></option>'
+                ws.id +
+                '"' +
+                (ws.id == editing_config_node.z ? ' selected' : '') +
+                '></option>'
               )
                 .text(workspaceLabel)
                 .appendTo(tabSelect);
@@ -30890,10 +31291,10 @@ RED.editor = (function () {
               }
               $(
                 '<option value="' +
-                  ws.id +
-                  '"' +
-                  (ws.id == editing_config_node.z ? ' selected' : '') +
-                  '></option>'
+                ws.id +
+                '"' +
+                (ws.id == editing_config_node.z ? ' selected' : '') +
+                '></option>'
               )
                 .text(workspaceLabel)
                 .appendTo(tabSelect);
@@ -31261,10 +31662,10 @@ RED.editor = (function () {
         configNodes.forEach(function (cn) {
           $(
             '<option value="' +
-              cn.id +
-              '"' +
-              (value == cn.id ? ' selected' : '') +
-              '></option>'
+            cn.id +
+            '"' +
+            (value == cn.id ? ' selected' : '') +
+            '></option>'
           )
             .text(RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__))
             .appendTo(select);
@@ -31273,9 +31674,9 @@ RED.editor = (function () {
 
         select.append(
           '<option value="_ADD_"' +
-            (value === '' ? ' selected' : '') +
-            '>' + `Add new ${type}...` +
-            '</option>'
+          (value === '' ? ' selected' : '') +
+          '>' + `Add new ${type}...` +
+          '</option>'
         );
         window.setTimeout(function () {
           select.change();
@@ -31554,7 +31955,7 @@ RED.editor = (function () {
         editStack.pop();
         editing_node = null;
       },
-      show: function () {},
+      show: function () { },
     };
     RED.tray.show(trayOptions);
   }
@@ -31645,7 +32046,7 @@ RED.editor = (function () {
     }
     if (options.mode === 'ace/mode/markdown') {
       $(el).addClass('node-text-editor-container-toolbar');
-      if (options.toolbar === false ){
+      if (options.toolbar === false) {
         // do not show the toolbar
       } else {
         editor.toolbar = customEditTypes['_markdown'].buildToolbar(
@@ -31653,7 +32054,7 @@ RED.editor = (function () {
           editor
         );
       }
-      
+
 
       if (options.expandable !== false) {
         // var previewButton = $(
@@ -31679,9 +32080,9 @@ RED.editor = (function () {
       //   autoClose: 50,
       // });
     }
-    if (options.onChange){
-      session.on("change", function(delta){
-        options.onChange(delta); 
+    if (options.onChange) {
+      session.on("change", function (delta) {
+        options.onChange(delta);
       })
     }
     return editor;
@@ -31749,7 +32150,7 @@ RED.editor = (function () {
     editBuffer: function (options) {
       showTypeEditor('_buffer', options);
     },
-    editText: function(options){
+    editText: function (options) {
       showTypeEditor('_string', options);
     },
     buildEditForm: buildEditForm,
@@ -34226,6 +34627,62 @@ RED.eventLog = (function() {
         copyText: copyText
     }
 })();
+; RED.signup = (function() {
+   // const {clipboard} = window.__kumologica.electron;
+
+    let signupWindow;
+    const url = "https://api.dev.kumologica.dev/signup/ui?x-api-key=MLTh1kkXBLaBefMHEFR3d6Svub0otStnaTjjsN5R";
+   //const url = "https://h5201rj4f8.execute-api.ap-southeast-2.amazonaws.com/default/signup/ui?x-api-key=MLTh1kkXBLaBefMHEFR3d6Svub0otStnaTjjsN5R";
+    function signupCompleted(details) {
+        const tokens = processCallback(details.url);
+        saveTokens(tokens);
+        signupWindow.destroy();
+   }
+
+    function processCallback(url) {
+        const u = url.replace("http://localhost:3000/#", "");
+        const t = u.split("&");
+        return t;
+    }
+
+    function saveTokens(tokens) {
+        const cfg = window.__kumologica.settings.settingsConfig;
+        cfg.saveKumologicaDevAlias(tokens);
+    }
+
+   function showSignup() {
+        const {BrowserWindow} = window.__kumologica.electron.remote;
+      
+        signupWindow = new BrowserWindow({width:700, height:470});
+        signupWindow.loadURL(url);
+  
+        const defaultSession = window.__kumologica.electron.remote.session.defaultSession;
+  
+        defaultSession.webRequest.onBeforeRequest(
+          { urls: ["http://localhost:3000/*"] },
+          (details, 
+            callback) => {
+                RED.events.emit('core:signup:completed', details);
+          });
+  
+        signupWindow.on('authenticated', (a) => {
+          console.log("auth");
+          console.log(a);
+        });
+      
+        signupWindow.on('closed', (a) => {
+          console.log("closed");
+        });
+      }
+
+    return {
+        init: function() {
+            RED.actions.add("core:signup:show", showSignup);
+            RED.events.on("core:signup:completed", (details) => signupCompleted(details));
+        },
+       // show: showSignup
+    }
+})();
 ;RED.library = (function() {
   var exportToLibraryDialog;
   var elementPrefix = 'node-input-';
@@ -35170,16 +35627,16 @@ RED.notifications = (function() {
       }
     } else {
       let commands = searchCommands();
-      commands.forEach(c=> {
+      commands.forEach(c => {
         searchResults.editableList('addItem', c);
       });
 
       let results = $('#search-result-list');
       $('<div class="searchSeparator"></div>').appendTo(results);
 
-      
+
       let allNodes = searchNodes();
-      
+
       allNodes.forEach(n => {
         searchResults.editableList('addItem', n);
       })
@@ -35187,7 +35644,7 @@ RED.notifications = (function() {
     }
   }
 
-  function searchNodes(val, typeFilter){
+  function searchNodes(val, typeFilter) {
     results = [];
     if (val) {
       val = val.trim();
@@ -35228,10 +35685,10 @@ RED.notifications = (function() {
           if (setResults.has(n.node.id)) return;
           else {
             setResults.add(n.node.id);
-            if (n.node.type === 'tab'){
-              results.push({ label:n.node.label, node: n.node});
-            }else {
-              results.push({ label:n.node.name, node: n.node});
+            if (n.node.type === 'tab') {
+              results.push({ label: n.node.label, node: n.node });
+            } else {
+              results.push({ label: n.node.name, node: n.node });
             }
           }
         })
@@ -35245,30 +35702,37 @@ RED.notifications = (function() {
    * 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: '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: '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: 'Export Flow', action: 'core:show-export-dialog', shortcut: `${CtrlOrCmd()} E` },
-      { type: 'command', title: 'Help: Documentation', cb: ()=> {
+      // { 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');
-        },
+        }
       }
     ]
   }
 
   function CtrlOrCmd() {
-    return window.__kumologica.settings.platform.isMac? "⌘": "Ctrl";
+    return window.__kumologica.settings.platform.isMac ? "⌘" : "Ctrl";
   }
 
   function ensureSelectedIsVisible() {
@@ -35364,7 +35828,7 @@ RED.notifications = (function() {
           // If node === undefiend and object is empty => user search yield no results
           // otherwise is a normal search ...
 
-          if (node === undefined && !object ) {
+          if (node === undefined && !object) {
             // case of user search yield no results
             $('<div>', { class: 'red-ui-search-empty' })
               .text('No matches found')
@@ -35385,8 +35849,8 @@ RED.notifications = (function() {
               }).appendTo(div);
 
               $('<div>', { class: 'red-ui-search-result-command-label', style: 'width:95%' })
-              .text(object.title)
-              .appendTo(contentDescription);
+                .text(object.title)
+                .appendTo(contentDescription);
 
               // Type of object (command)
               $('<div>', { class: 'red-ui-search-result-command-shortcut' })
@@ -35395,16 +35859,18 @@ RED.notifications = (function() {
 
               div.click(function (evt) {
                 evt.preventDefault();
-                if (object.action){
+                if (object.action) {
                   hide();
-                  window.setTimeout( ()=> {
-                    RED.actions.invoke(object.action)}, 10)
+                  window.setTimeout(() => {
+                    RED.actions.invoke(object.action)
+                  }, 10)
                 } else {
                   hide();
-                  window.setTimeout( ()=> {
-                    object.cb() }, 10)
+                  window.setTimeout(() => {
+                    object.cb()
+                  }, 10)
                 }
-                
+
               });
             }
 
@@ -35427,7 +35893,7 @@ RED.notifications = (function() {
 
             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',
@@ -35479,7 +35945,7 @@ RED.notifications = (function() {
     RED.view.reveal(node.id);
   }
 
-  function revealByNodeId(nodeId){
+  function revealByNodeId(nodeId) {
     var selectedNode = RED.nodes.node(nodeId);
     reveal(selectedNode);
   }
@@ -35507,15 +35973,15 @@ RED.notifications = (function() {
       searchInput.searchBox('value', v);
       RED.events.emit('search:open');
       visible = true;
-      window.setTimeout(()=> {
-        searchInput.focus() 
+      window.setTimeout(() => {
+        searchInput.focus()
       }, 50);
 
       // Populate search results with commands and tabs at least
       search();
     }
 
-    
+
   }
 
   function hide() {