n8n-editor-ui 1.101.0 → 1.102.0

package/dist/assets/{NodeDetailsView-DB-5JPUD.js → TriggerPanel-BOC7PYsi.js}

@@ -1,18 +1,8 @@
-import { d as defineComponent, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, J as renderSlot, _ as _export_sfc, h as resolveComponent, e as createBlock, hn as Draggable, w as withCtx, f as createCommentVNode, j as createVNode, a3 as useWorkflowsStore, bN as useNodeTypesStore, x as computed, bw as NodeConnectionTypes, o as onMounted, I as onBeforeUnmount, F as Fragment, y as renderList, Z as N8nTooltip, bW as _sfc_main$e, l as createTextVNode, t as toDisplayString, ch as useThrottleFn, aL as useNDVStore, S as useUIStore, r as ref, cO as useSlots, cr as ndvEventBus, a9 as watch, i8 as MAIN_NODE_PANEL_WIDTH, b6 as useStorage, i9 as LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH, m as unref, O as normalizeStyle, ce as N8nResizeWrapper, K as nextTick, ia as convertToDisplayDateComponents, ca as resolveDirective, f1 as InfoTip, aT as withDirectives, c as useI18n, p as N8nText, bu as emptyTokenUsageData, bt as addTokenUsageData, bQ as getDefaultExportFromCjs, ib as requireCapitalize, gv as parseAiContent, ic as FontAwesomeIcon, H as N8nRadioButtons, bP as formatTokenUsageCount, id as ElTree, fp as storeToRefs, v as useSettingsStore, e4 as useNodeDirtiness, gp as useNodeType, bG as usePinnedData, c_ as CanvasNodeDirtiness, bh as createSlots, cb as waitingNodeTooltip, aU as vShow, ax as useTelemetry, cD as isPresent, fd as N8nSelect, fe as _sfc_main$h, ie as truncate, he as createStaticVNode, bO as START_NODE_TYPE, hR as MANUAL_TRIGGER_NODE_TYPE, ig as CRON_NODE_TYPE, ih as INTERVAL_NODE_TYPE, dg as getNodeInputs, e7 as getNodeOutputs, ii as uniqBy, c2 as resolveDynamicComponent, bV as withModifiers, dE as _sfc_main$i, aW as N8nIcon, b as useRouter, aj as useWorkflowHelpers, ij as isTriggerPanelObject, e8 as getTriggerNodeServiceName, bF as CHAT_TRIGGER_NODE_TYPE, hX as WEBHOOK_NODE_TYPE, d8 as FORM_TRIGGER_NODE_TYPE, fY as CopyInput, q as N8nButton, eP as _sfc_main$j, N as N8nHeading, a0 as N8nLink, P as createEventBus, dW as Transition, V as VIEWS, aB as WORKFLOW_SETTINGS_MODAL_KEY, bI as useNodeHelpers, d_ as useDeviceSupport, ik as EXECUTABLE_TRIGGER_NODE_TYPES, aR as STICKY_NODE_TYPE, il as BASE_NODE_SURVEY_URL, ao as EnterpriseEditionFeature, gx as dataPinningEventBus, cf as useStyles, im as APP_MODALS_ELEMENT_ID, az as useMessage, aA as MODAL_CONFIRM, ey as jsonParse, bf as useExternalHooks } from "./index-7S5ADieN.js";
-import { N as NodeSettings } from "./NodeView-DoR46iB5.js";
-import { b as _sfc_main$f, c as ViewSubExecution, _ as _sfc_main$g, R as RunData } from "./RunData-DG20AzLo.js";
-import RunDataAi$1 from "./RunDataParsedAiContent-DRO1Bjsh.js";
-import { N as N8nInfoAccordion } from "./InfoAccordion-CEk3XG5b.js";
-import { u as useWorkflowActivate } from "./useWorkflowActivate-BKz3N1SO.js";
-import "./ActionDropdown-BujIG0Jq.js";
-import "./useKeybindings-CV0VsjNP.js";
-import "./import-curl-DD21H3kK.js";
-import "./global-link-actions-olwfH36z.js";
-import "./useExecutionDebugging-DM4nhx6D.js";
-import "./useBeforeUnload-DveXGtGN.js";
-import "./FileSaver.min-C5wzcK59.js";
-import "./useExecutionHelpers-BfF56crp.js";
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+import { d as defineComponent, h as createElementBlock, g as openBlock, n as normalizeClass, j as createBaseVNode, J as renderSlot, _ as _export_sfc, a4 as useWorkflowsStore, bG as useNodeTypesStore, aO as usePostHog, x as computed, dy as NDV_UI_OVERHAUL_EXPERIMENT, bo as NodeConnectionTypes, o as onMounted, I as onBeforeUnmount, F as Fragment, y as renderList, e as createBlock, f as createCommentVNode, $ as N8nTooltip, w as withCtx, i as createVNode, bP as _sfc_main$c, k as createTextVNode, t as toDisplayString, ig as convertToDisplayDateComponents, c4 as resolveDirective, l as unref, eX as InfoTip, aU as withDirectives, c as useI18n, p as N8nText, bm as emptyTokenUsageData, bl as addTokenUsageData, bJ as getDefaultExportFromCjs, ih as requireCapitalize, r as ref, gu as parseAiContent, N as N8nIcon, H as N8nRadioButtons, bI as formatTokenUsageCount, aa as watch, ii as ElTree, P as normalizeStyle, aM as useNDVStore, fn as storeToRefs, v as useSettingsStore, d$ as useNodeDirtiness, go as useNodeType, bz as usePinnedData, cV as CanvasNodeDirtiness, O as resolveComponent, bh as createSlots, c5 as waitingNodeTooltip, dd as _sfc_main$f, aV as vShow, ay as useTelemetry, cy as isPresent, f7 as N8nSelect, f8 as _sfc_main$g, ij as truncate, gL as createStaticVNode, bH as START_NODE_TYPE, hU as MANUAL_TRIGGER_NODE_TYPE, ik as CRON_NODE_TYPE, il as INTERVAL_NODE_TYPE, dc as getNodeInputs, e2 as getNodeOutputs, im as uniqBy, bY as resolveDynamicComponent, bO as withModifiers, T as useUIStore, b as useRouter, ak as useWorkflowHelpers, io as isTriggerPanelObject, e3 as getTriggerNodeServiceName, bx as CHAT_TRIGGER_NODE_TYPE, h_ as WEBHOOK_NODE_TYPE, d4 as FORM_TRIGGER_NODE_TYPE, fW as CopyInput, q as N8nButton, eK as _sfc_main$h, m as N8nHeading, a1 as N8nLink, Q as createEventBus, dQ as Transition, V as VIEWS, aC as WORKFLOW_SETTINGS_MODAL_KEY } from "./index-V0GOmfo8.js";
+import { b as _sfc_main$d, c as ViewSubExecution, _ as _sfc_main$e, R as RunData } from "./RunData-D3xzjO33.js";
+import RunDataAi$1 from "./RunDataParsedAiContent-BYISiW-I.js";
+import { N as N8nInfoAccordion } from "./InfoAccordion-75IQV-_q.js";
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{ name: "N8nPulse" },
   __name: "Pulse",
   setup(__props) {
@@ -36,106 +26,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 const pulseContainer = "_pulseContainer_1w2uc_123";
 const pulse = "_pulse_1w2uc_123";
 const pulse2 = "_pulse2_1w2uc_139";
-const style0$b = {
+const style0$a = {
   pulseContainer,
   pulse,
   pulse2
 };
-const cssModules$c = {
-  "$style": style0$b
-};
-const N8nPulse = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__cssModules", cssModules$c]]);
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "PanelDragButton",
-  props: {
-    canMoveRight: { type: Boolean },
-    canMoveLeft: { type: Boolean }
-  },
-  emits: ["drag", "dragstart", "dragend"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const onDrag = (e) => {
-      emit("drag", e);
-    };
-    const onDragEnd = () => {
-      emit("dragend");
-    };
-    const onDragStart = () => {
-      emit("dragstart");
-    };
-    return (_ctx, _cache) => {
-      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-      return openBlock(), createBlock(Draggable, {
-        type: "panel-resize",
-        class: normalizeClass(_ctx.$style.dragContainer),
-        onDrag,
-        onDragstart: onDragStart,
-        onDragend: onDragEnd
-      }, {
-        default: withCtx(({ isDragging }) => [
-          createBaseVNode("div", {
-            class: normalizeClass({ [_ctx.$style.dragButton]: true }),
-            "data-test-id": "panel-drag-button"
-          }, [
-            _ctx.canMoveLeft ? (openBlock(), createElementBlock("span", {
-              key: 0,
-              class: normalizeClass({ [_ctx.$style.leftArrow]: true, [_ctx.$style.visible]: isDragging })
-            }, [
-              createVNode(_component_font_awesome_icon, { icon: "arrow-left" })
-            ], 2)) : createCommentVNode("", true),
-            _ctx.canMoveRight ? (openBlock(), createElementBlock("span", {
-              key: 1,
-              class: normalizeClass({ [_ctx.$style.rightArrow]: true, [_ctx.$style.visible]: isDragging })
-            }, [
-              createVNode(_component_font_awesome_icon, { icon: "arrow-right" })
-            ], 2)) : createCommentVNode("", true),
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.grid)
-            }, _cache[0] || (_cache[0] = [
-              createBaseVNode("div", null, [
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div")
-              ], -1),
-              createBaseVNode("div", null, [
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div"),
-                createBaseVNode("div")
-              ], -1)
-            ]), 2)
-          ], 2)
-        ]),
-        _: 1
-      }, 8, ["class"]);
-    };
-  }
-});
-const dragContainer = "_dragContainer_16elv_123";
-const dragButton = "_dragButton_16elv_127";
-const leftArrow = "_leftArrow_16elv_141 _arrow_16elv_150";
-const rightArrow = "_rightArrow_16elv_142 _arrow_16elv_150";
-const visible$1 = "_visible_16elv_146";
-const arrow = "_arrow_16elv_150";
-const grid = "_grid_16elv_168";
-const style0$a = {
-  dragContainer,
-  dragButton,
-  leftArrow,
-  rightArrow,
-  visible: visible$1,
-  arrow,
-  grid
-};
-const cssModules$b = {
+const cssModules$a = {
   "$style": style0$a
 };
-const PanelDragButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$b]]);
-const _hoisted_1$6 = ["data-node-name", "data-node-placement", "onClick"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const N8nPulse = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$a]]);
+const _hoisted_1$5 = ["data-node-name", "data-node-placement", "onClick"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "NDVFloatingNodes",
   props: {
     rootNode: {}
@@ -145,8 +46,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const props = __props;
     const workflowsStore = useWorkflowsStore();
     const nodeTypesStore = useNodeTypesStore();
-    const workflow = workflowsStore.getCurrentWorkflow();
+    const posthogStore = usePostHog();
     const emit = __emit;
+    const isNDVV2 = computed(
+      () => posthogStore.isVariantEnabled(
+        NDV_UI_OVERHAUL_EXPERIMENT.name,
+        NDV_UI_OVERHAUL_EXPERIMENT.variant
+      )
+    );
     function moveNodeDirection(direction) {
       const matchedDirectionNode = connectedNodes.value[direction][0];
       if (matchedDirectionNode) {
@@ -180,6 +87,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }).filter((n) => n !== null);
     }
     const connectedNodes = computed(() => {
+      const workflow = workflowsStore.getCurrentWorkflow();
       const rootName = props.rootNode.name;
       return {
         [
@@ -234,7 +142,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_n8n_tooltip = N8nTooltip;
       return openBlock(), createElementBlock("aside", {
-        class: normalizeClass(_ctx.$style.floatingNodes)
+        class: normalizeClass([_ctx.$style.floatingNodes, { [_ctx.$style.v2]: isNDVV2.value }]),
+        "data-test-id": "floating-nodes"
       }, [
         (openBlock(), createElementBlock(Fragment, null, renderList(connectionGroups, (connectionGroup) => {
           return createBaseVNode("ul", {
@@ -247,7 +156,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   key: node2.name,
                   placement: tooltipPositionMapper[connectionGroup],
                   teleported: false,
-                  offset: 60
+                  offset: isNDVV2.value ? 16 : 60
                 }, {
                   content: withCtx(() => [
                     createTextVNode(toDisplayString(node2.name), 1)
@@ -260,17 +169,17 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       "data-node-placement": connectionGroup,
                       onClick: ($event) => emit("switchSelectedNode", node2.name)
                     }, [
-                      createVNode(_sfc_main$e, {
+                      createVNode(_sfc_main$c, {
                         "node-type": nodeType,
                         "node-name": node2.name,
                         "tooltip-position": tooltipPositionMapper[connectionGroup],
-                        size: 35,
+                        size: isNDVV2.value ? 24 : 35,
                         circle: ""
-                      }, null, 8, ["node-type", "node-name", "tooltip-position"])
-                    ], 10, _hoisted_1$6)
+                      }, null, 8, ["node-type", "node-name", "tooltip-position", "size"])
+                    ], 10, _hoisted_1$5)
                   ]),
                   _: 2
-                }, 1032, ["placement"])) : createCommentVNode("", true)
+                }, 1032, ["placement", "offset"])) : createCommentVNode("", true)
               ], 64);
             }), 256))
           ], 2);
@@ -279,13 +188,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const floatingNodes = "_floatingNodes_1tkq5_123";
-const nodesList = "_nodesList_1tkq5_137";
-const inputSub = "_inputSub_1tkq5_151";
-const outputSub = "_outputSub_1tkq5_151";
-const outputMain = "_outputMain_1tkq5_162";
-const inputMain = "_inputMain_1tkq5_162";
-const connectedNode = "_connectedNode_1tkq5_185";
+const floatingNodes = "_floatingNodes_1o49e_123";
+const nodesList = "_nodesList_1o49e_137";
+const inputSub = "_inputSub_1o49e_151";
+const outputSub = "_outputSub_1o49e_151";
+const outputMain = "_outputMain_1o49e_162";
+const inputMain = "_inputMain_1o49e_162";
+const connectedNode = "_connectedNode_1o49e_185";
+const v2 = "_v2_1o49e_233";
 const style0$9 = {
   floatingNodes,
   nodesList,
@@ -293,362 +203,49 @@ const style0$9 = {
   outputSub,
   outputMain,
   inputMain,
-  connectedNode
+  connectedNode,
+  v2
 };
-const cssModules$a = {
+const cssModules$9 = {
   "$style": style0$9
 };
-const NDVFloatingNodes = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$a]]);
-const SIDE_MARGIN = 24;
-const SIDE_PANELS_MARGIN = 80;
-const MIN_PANEL_WIDTH = 310;
-const PANEL_WIDTH = 350;
-const PANEL_WIDTH_LARGE = 420;
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "NDVDraggablePanels",
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "NDVEmptyState",
   props: {
-    isDraggable: { type: Boolean },
-    hideInputAndOutput: { type: Boolean },
-    nodeType: {}
+    title: {}
   },
-  emits: ["init", "dragstart", "dragend", "switchSelectedNode", "close"],
-  setup(__props, { emit: __emit }) {
-    const MIN_WINDOW_WIDTH = 2 * (SIDE_MARGIN + SIDE_PANELS_MARGIN) + MIN_PANEL_WIDTH;
-    const initialMainPanelWidth = {
-      regular: MAIN_NODE_PANEL_WIDTH,
-      dragless: MAIN_NODE_PANEL_WIDTH,
-      unknown: MAIN_NODE_PANEL_WIDTH,
-      inputless: MAIN_NODE_PANEL_WIDTH,
-      wide: MAIN_NODE_PANEL_WIDTH * 2
-    };
-    const throttledOnResize = useThrottleFn(onResize, 100);
-    const ndvStore = useNDVStore();
-    const uiStore = useUIStore();
-    const props = __props;
-    const isDragging = ref(false);
-    const initialized = ref(false);
-    const containerWidth = ref(uiStore.appGridDimensions.width);
-    const emit = __emit;
-    const slots = useSlots();
-    onMounted(() => {
-      if (mainPanelDimensions.value.relativeLeft === 1 && mainPanelDimensions.value.relativeRight === 1) {
-        setMainPanelWidth();
-        setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
-        restorePositionData();
-      }
-      emit("init", { position: mainPanelDimensions.value.relativeLeft });
-      setTimeout(() => {
-        initialized.value = true;
-      }, 0);
-      ndvEventBus.on("setPositionByName", setPositionByName);
-    });
-    onBeforeUnmount(() => {
-      ndvEventBus.off("setPositionByName", setPositionByName);
-    });
-    watch(
-      () => uiStore.appGridDimensions,
-      async (dimensions) => {
-        const ndv = document.getElementById("ndv");
-        if (ndv) {
-          await nextTick();
-          const { width: ndvWidth } = ndv.getBoundingClientRect();
-          containerWidth.value = ndvWidth;
-        } else {
-          containerWidth.value = dimensions.width;
-        }
-        const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
-        const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
-        if (isBelowMinWidthMainPanel) {
-          setMainPanelWidth(minRelativeWidth);
-        }
-        const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
-        const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
-        if (dimensions.width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
-          setMainPanelWidth(minRelativeWidth);
-          setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
-        }
-        setPositions(mainPanelDimensions.value.relativeLeft);
-      }
-    );
-    const currentNodePaneType = computed(() => {
-      if (!hasInputSlot.value) return "inputless";
-      if (!props.isDraggable) return "dragless";
-      if (props.nodeType === null) return "unknown";
-      return props.nodeType.parameterPane ?? "regular";
-    });
-    const mainPanelDimensions = computed(() => {
-      return ndvStore.mainPanelDimensions[currentNodePaneType.value];
-    });
-    const calculatedPositions = computed(
-      () => {
-        const hasInput = slots.input !== void 0;
-        const outputPanelRelativeLeft = mainPanelDimensions.value.relativeLeft + mainPanelDimensions.value.relativeWidth;
-        const inputPanelRelativeRight = hasInput ? 1 - outputPanelRelativeLeft + mainPanelDimensions.value.relativeWidth : 1 - pxToRelativeWidth(SIDE_MARGIN);
-        return {
-          inputPanelRelativeRight,
-          outputPanelRelativeLeft
-        };
-      }
-    );
-    const outputPanelRelativeTranslate = computed(() => {
-      const panelMinLeft = 1 - pxToRelativeWidth(MIN_PANEL_WIDTH + SIDE_MARGIN);
-      const currentRelativeLeftDelta = calculatedPositions.value.outputPanelRelativeLeft - panelMinLeft;
-      return currentRelativeLeftDelta > 0 ? currentRelativeLeftDelta : 0;
-    });
-    const supportedResizeDirections = computed(() => {
-      const supportedDirections = ["right"];
-      if (props.isDraggable) supportedDirections.push("left");
-      return supportedDirections;
-    });
-    const hasInputSlot = computed(() => {
-      return slots.input !== void 0;
-    });
-    const inputPanelMargin = computed(() => pxToRelativeWidth(SIDE_PANELS_MARGIN));
-    const minimumLeftPosition = computed(() => {
-      if (containerWidth.value < MIN_WINDOW_WIDTH) return pxToRelativeWidth(1);
-      if (!hasInputSlot.value) return pxToRelativeWidth(SIDE_MARGIN);
-      return pxToRelativeWidth(SIDE_MARGIN + 20) + inputPanelMargin.value;
-    });
-    const maximumRightPosition = computed(() => {
-      if (containerWidth.value < MIN_WINDOW_WIDTH) return pxToRelativeWidth(1);
-      return pxToRelativeWidth(SIDE_MARGIN + 20) + inputPanelMargin.value;
-    });
-    const canMoveLeft = computed(() => {
-      return mainPanelDimensions.value.relativeLeft > minimumLeftPosition.value;
-    });
-    const canMoveRight = computed(() => {
-      return mainPanelDimensions.value.relativeRight > maximumRightPosition.value;
-    });
-    const mainPanelStyles = computed(() => {
-      return {
-        left: `${relativeWidthToPx(mainPanelDimensions.value.relativeLeft)}px`,
-        right: `${relativeWidthToPx(mainPanelDimensions.value.relativeRight)}px`
-      };
-    });
-    const inputPanelStyles = computed(() => {
-      return {
-        right: `${relativeWidthToPx(calculatedPositions.value.inputPanelRelativeRight)}px`
-      };
-    });
-    const outputPanelStyles = computed(() => {
-      return {
-        left: `${relativeWidthToPx(calculatedPositions.value.outputPanelRelativeLeft)}px`,
-        transform: `translateX(-${relativeWidthToPx(outputPanelRelativeTranslate.value)}px)`
-      };
-    });
-    const hasDoubleWidth = computed(() => {
-      return props.nodeType?.parameterPane === "wide";
-    });
-    const fixedPanelWidth = computed(() => {
-      const multiplier = hasDoubleWidth.value ? 2 : 1;
-      if (containerWidth.value > 1700) {
-        return PANEL_WIDTH_LARGE * multiplier;
-      }
-      return PANEL_WIDTH * multiplier;
-    });
-    const onSwitchSelectedNode = (node2) => emit("switchSelectedNode", node2);
-    function getInitialLeftPosition(width) {
-      if (currentNodePaneType.value === "dragless")
-        return pxToRelativeWidth(SIDE_MARGIN + 1 + fixedPanelWidth.value);
-      return hasInputSlot.value ? 0.5 - width / 2 : minimumLeftPosition.value;
-    }
-    function setMainPanelWidth(relativeWidth) {
-      const mainPanelRelativeWidth = relativeWidth || pxToRelativeWidth(initialMainPanelWidth[currentNodePaneType.value]);
-      ndvStore.setMainPanelDimensions({
-        panelType: currentNodePaneType.value,
-        dimensions: {
-          relativeWidth: mainPanelRelativeWidth
-        }
-      });
-    }
-    function setPositions(relativeLeft) {
-      const mainPanelRelativeLeft = relativeLeft || 1 - calculatedPositions.value.inputPanelRelativeRight;
-      const mainPanelRelativeRight = 1 - mainPanelRelativeLeft - mainPanelDimensions.value.relativeWidth;
-      const isMaxRight = maximumRightPosition.value > mainPanelRelativeRight;
-      const isMinLeft = minimumLeftPosition.value > mainPanelRelativeLeft;
-      const isInputless = currentNodePaneType.value === "inputless";
-      if (isMinLeft) {
-        ndvStore.setMainPanelDimensions({
-          panelType: currentNodePaneType.value,
-          dimensions: {
-            relativeLeft: minimumLeftPosition.value,
-            relativeRight: 1 - mainPanelDimensions.value.relativeWidth - minimumLeftPosition.value
-          }
-        });
-        return;
-      }
-      if (isMaxRight) {
-        ndvStore.setMainPanelDimensions({
-          panelType: currentNodePaneType.value,
-          dimensions: {
-            relativeLeft: 1 - mainPanelDimensions.value.relativeWidth - maximumRightPosition.value,
-            relativeRight: maximumRightPosition.value
-          }
-        });
-        return;
-      }
-      ndvStore.setMainPanelDimensions({
-        panelType: currentNodePaneType.value,
-        dimensions: {
-          relativeLeft: isInputless ? minimumLeftPosition.value : mainPanelRelativeLeft,
-          relativeRight: mainPanelRelativeRight
-        }
-      });
-    }
-    function setPositionByName(position) {
-      const positionByName = {
-        minLeft: minimumLeftPosition.value,
-        maxRight: maximumRightPosition.value,
-        initial: getInitialLeftPosition(mainPanelDimensions.value.relativeWidth)
-      };
-      setPositions(positionByName[position]);
-    }
-    function pxToRelativeWidth(px) {
-      return px / containerWidth.value;
-    }
-    function relativeWidthToPx(relativeWidth) {
-      return relativeWidth * containerWidth.value;
-    }
-    function onResizeEnd() {
-      storePositionData();
-    }
-    function onResizeThrottle(data) {
-      if (initialized.value) {
-        void throttledOnResize(data);
-      }
-    }
-    function onResize({ direction, x, width }) {
-      const relativeDistance = pxToRelativeWidth(x);
-      const relativeWidth = pxToRelativeWidth(width);
-      if (direction === "left" && relativeDistance <= minimumLeftPosition.value) return;
-      if (direction === "right" && 1 - relativeDistance <= maximumRightPosition.value) return;
-      if (width <= MIN_PANEL_WIDTH) return;
-      setMainPanelWidth(relativeWidth);
-      setPositions(direction === "left" ? relativeDistance : mainPanelDimensions.value.relativeLeft);
-    }
-    function restorePositionData() {
-      const storedPanelWidthData = useStorage(
-        `${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${currentNodePaneType.value}`
-      ).value;
-      if (storedPanelWidthData) {
-        const parsedWidth = parseFloat(storedPanelWidthData);
-        setMainPanelWidth(parsedWidth);
-        const initialPosition = getInitialLeftPosition(parsedWidth);
-        setPositions(initialPosition);
-        return true;
-      }
-      return false;
-    }
-    function storePositionData() {
-      useStorage(`${LOCAL_STORAGE_MAIN_PANEL_RELATIVE_WIDTH}_${currentNodePaneType.value}`).value = mainPanelDimensions.value.relativeWidth.toString();
-    }
-    function onDragStart() {
-      isDragging.value = true;
-      emit("dragstart", { position: mainPanelDimensions.value.relativeLeft });
-    }
-    function onDrag(position) {
-      const relativeLeft = pxToRelativeWidth(position[0]) - mainPanelDimensions.value.relativeWidth / 2;
-      setPositions(relativeLeft);
-    }
-    function onDragEnd() {
-      setTimeout(() => {
-        isDragging.value = false;
-        emit("dragend", {
-          windowWidth: containerWidth.value,
-          position: mainPanelDimensions.value.relativeLeft
-        });
-      }, 0);
-      storePositionData();
-    }
+  setup(__props) {
     return (_ctx, _cache) => {
-      const _component_N8nResizeWrapper = N8nResizeWrapper;
-      return openBlock(), createElementBlock("div", null, [
-        unref(ndvStore).activeNode ? (openBlock(), createBlock(NDVFloatingNodes, {
-          key: 0,
-          "root-node": unref(ndvStore).activeNode,
-          onSwitchSelectedNode
-        }, null, 8, ["root-node"])) : createCommentVNode("", true),
-        !_ctx.hideInputAndOutput ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(_ctx.$style.inputPanel),
-          style: normalizeStyle(inputPanelStyles.value)
-        }, [
-          renderSlot(_ctx.$slots, "input")
-        ], 6)) : createCommentVNode("", true),
-        !_ctx.hideInputAndOutput ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(_ctx.$style.outputPanel),
-          style: normalizeStyle(outputPanelStyles.value)
-        }, [
-          renderSlot(_ctx.$slots, "output")
-        ], 6)) : createCommentVNode("", true),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.mainPanel),
-          style: normalizeStyle(mainPanelStyles.value)
+      return openBlock(), createElementBlock("article", {
+        class: normalizeClass(_ctx.$style.empty)
+      }, [
+        renderSlot(_ctx.$slots, "icon"),
+        createBaseVNode("h1", {
+          class: normalizeClass(_ctx.$style.title)
+        }, toDisplayString(_ctx.title), 3),
+        createBaseVNode("p", {
+          class: normalizeClass(_ctx.$style.description)
         }, [
-          createVNode(_component_N8nResizeWrapper, {
-            "is-resizing-enabled": currentNodePaneType.value !== "unknown",
-            width: relativeWidthToPx(mainPanelDimensions.value.relativeWidth),
-            "min-width": MIN_PANEL_WIDTH,
-            "grid-size": 20,
-            "supported-directions": supportedResizeDirections.value,
-            outset: "",
-            onResize: onResizeThrottle,
-            onResizeend: onResizeEnd
-          }, {
-            default: withCtx(() => [
-              createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style.dragButtonContainer)
-              }, [
-                !_ctx.hideInputAndOutput && _ctx.isDraggable ? (openBlock(), createBlock(PanelDragButton, {
-                  key: 0,
-                  class: normalizeClass({ [_ctx.$style.draggable]: true, [_ctx.$style.visible]: isDragging.value }),
-                  "can-move-left": canMoveLeft.value,
-                  "can-move-right": canMoveRight.value,
-                  onDragstart: onDragStart,
-                  onDrag,
-                  onDragend: onDragEnd
-                }, null, 8, ["class", "can-move-left", "can-move-right"])) : createCommentVNode("", true)
-              ], 2),
-              createBaseVNode("div", {
-                class: normalizeClass({ [_ctx.$style.mainPanelInner]: true, [_ctx.$style.dragging]: isDragging.value })
-              }, [
-                renderSlot(_ctx.$slots, "main")
-              ], 2)
-            ]),
-            _: 3
-          }, 8, ["is-resizing-enabled", "width", "supported-directions"])
-        ], 6)
-      ]);
+          renderSlot(_ctx.$slots, "description")
+        ], 2)
+      ], 2);
     };
   }
 });
-const dataPanel = "_dataPanel_181lg_123";
-const inputPanel = "_inputPanel_181lg_132 _dataPanel_181lg_123";
-const outputPanel = "_outputPanel_181lg_140 _dataPanel_181lg_123";
-const mainPanel = "_mainPanel_181lg_148";
-const draggable = "_draggable_181lg_152";
-const mainPanelInner = "_mainPanelInner_181lg_156";
-const dragging = "_dragging_181lg_163";
-const dragButtonContainer = "_dragButtonContainer_181lg_176";
-const visible = "_visible_181lg_192";
+const empty$1 = "_empty_1x72k_2";
+const title$5 = "_title_1x72k_13";
+const description = "_description_1x72k_20";
 const style0$8 = {
-  dataPanel,
-  inputPanel,
-  outputPanel,
-  mainPanel,
-  draggable,
-  mainPanelInner,
-  dragging,
-  "double-width": "_double-width_181lg_172",
-  dragButtonContainer,
-  visible
+  empty: empty$1,
+  title: title$5,
+  description
 };
-const cssModules$9 = {
+const cssModules$8 = {
   "$style": style0$8
 };
-const NDVDraggablePanels = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const NDVEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "RunInfo",
   props: {
     taskData: {},
@@ -702,7 +299,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         createVNode(unref(InfoTip), {
           type: "note",
           theme: theme.value,
-          "data-test-id": `node-run-status-${theme.value}`
+          "data-test-id": `node-run-status-${theme.value}`,
+          size: "large"
         }, null, 8, ["theme", "data-test-id"]),
         createVNode(unref(InfoTip), {
           type: "tooltip",
@@ -755,10 +353,10 @@ const tooltipRow = "_tooltipRow_14r7d_123";
 const style0$7 = {
   tooltipRow
 };
-const cssModules$8 = {
+const cssModules$7 = {
   "$style": style0$7
 };
-const RunInfo = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+const RunInfo = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
 function createNode(parent, nodeName, currentDepth, runIndex, r, children = []) {
   return {
     parent,
@@ -776,24 +374,22 @@ function getTreeNodeData(nodeName, workflow, aiData, runIndex) {
 }
 function getTreeNodeDataRec(parent, nodeName, currentDepth, workflow, aiData, runIndex) {
   const connections = workflow.connectionsByDestinationNode[nodeName];
-  const resultData = aiData?.filter(
-    (data) => data.node === nodeName && (runIndex === void 0 || runIndex === data.runIndex)
-  ) ?? [];
+  const resultData = aiData?.filter((data) => data.node === nodeName && runIndex === data.runIndex) ?? [];
   if (!connections) {
     return resultData.map((d) => createNode(parent, nodeName, currentDepth, d.runIndex, d));
   }
-  const filteredAiData = currentDepth === 0 ? aiData?.filter(({ data }) => {
+  const filteredAiData = aiData?.filter(({ data }) => {
     if (!data?.source || data.source.every((source) => source === null)) {
       return true;
     }
     return data.source.some(
-      (source) => source?.previousNode === nodeName && (runIndex === void 0 || source.previousNodeRun === runIndex)
+      (source) => source?.previousNode === nodeName && source.previousNodeRun === runIndex
     );
-  }) : aiData;
+  });
   const connectedSubNodes = workflow.getParentNodes(nodeName, "ALL_NON_MAIN", 1);
-  const treeNode2 = createNode(parent, nodeName, currentDepth, runIndex ?? 0);
+  const treeNode2 = createNode(parent, nodeName, currentDepth, runIndex);
   const children = (filteredAiData ?? []).flatMap(
-    (data) => connectedSubNodes.includes(data.node) && (runIndex === void 0 || data.runIndex === runIndex) ? getTreeNodeDataRec(treeNode2, data.node, currentDepth + 1, workflow, aiData, data.runIndex) : []
+    (data) => connectedSubNodes.includes(data.node) ? getTreeNodeDataRec(treeNode2, data.node, currentDepth + 1, workflow, aiData, data.runIndex) : []
   );
   treeNode2.children = children;
   if (resultData.length) {
@@ -871,7 +467,7 @@ function getConsumedTokens(outputRun) {
 }
 var capitalizeExports = requireCapitalize();
 const capitalize = /* @__PURE__ */ getDefaultExportFromCjs(capitalizeExports);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "AiRunContentBlock",
   props: {
     runData: {},
@@ -907,7 +503,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       renderType.value = value;
     }
     return (_ctx, _cache) => {
-      const _component_NodeErrorView = _sfc_main$f;
+      const _component_N8nIcon = N8nIcon;
+      const _component_NodeErrorView = _sfc_main$d;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.block)
       }, [
@@ -918,9 +515,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           createBaseVNode("button", {
             class: normalizeClass(_ctx.$style.blockToggle)
           }, [
-            createVNode(unref(FontAwesomeIcon), {
-              icon: isExpanded.value ? "angle-down" : "angle-right",
-              size: "lg"
+            createVNode(_component_N8nIcon, {
+              icon: isExpanded.value ? "chevron-down" : "chevron-right",
+              size: "large"
             }, null, 8, ["icon"])
           ], 2),
           createBaseVNode("p", {
@@ -979,14 +576,14 @@ const style0$6 = {
   blockToggle,
   error
 };
-const cssModules$7 = {
+const cssModules$6 = {
   "$style": style0$6
 };
-const AiRunContentBlock = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const _hoisted_1$5 = { key: 0 };
+const AiRunContentBlock = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const _hoisted_1$4 = { key: 0 };
 const _hoisted_2$2 = { key: 1 };
 const _hoisted_3$2 = { key: 2 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "RunDataAiContent",
   props: {
     inputData: {},
@@ -1037,7 +634,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         createBaseVNode("header", {
           class: normalizeClass(_ctx.$style.header)
         }, [
-          runMeta.value?.node ? (openBlock(), createBlock(_sfc_main$e, {
+          runMeta.value?.node ? (openBlock(), createBlock(_sfc_main$c, {
             key: 0,
             class: normalizeClass(_ctx.$style.nodeIcon),
             "node-type": runMeta.value.node,
@@ -1052,7 +649,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             createBaseVNode("ul", {
               class: normalizeClass(_ctx.$style.meta)
             }, [
-              runMeta.value?.startTimeMs ? (openBlock(), createElementBlock("li", _hoisted_1$5, toDisplayString(runMeta.value?.executionTimeMs) + "ms", 1)) : createCommentVNode("", true),
+              runMeta.value?.startTimeMs ? (openBlock(), createElementBlock("li", _hoisted_1$4, toDisplayString(runMeta.value?.executionTimeMs) + "ms", 1)) : createCommentVNode("", true),
               runMeta.value?.startTimeMs ? (openBlock(), createElementBlock("li", _hoisted_2$2, [
                 createVNode(_component_n8n_tooltip, null, {
                   content: withCtx(() => [
@@ -1090,7 +687,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   "tooltip-placement": "right"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$g, { "consumed-tokens": consumedTokensSum.value }, null, 8, ["consumed-tokens"])
+                    createVNode(_sfc_main$e, { "consumed-tokens": consumedTokensSum.value }, null, 8, ["consumed-tokens"])
                   ]),
                   _: 1
                 })
@@ -1129,14 +726,14 @@ const style0$5 = {
   meta,
   tokensUsage
 };
-const cssModules$6 = {
+const cssModules$5 = {
   "$style": style0$5
 };
-const RunDataAiContent = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
-const _hoisted_1$4 = ["data-tree-depth"];
+const RunDataAiContent = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
+const _hoisted_1$3 = ["data-tree-depth"];
 const _hoisted_2$1 = ["onClick"];
 const _hoisted_3$1 = ["textContent"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "RunDataAi",
   props: {
     node: {},
@@ -1150,6 +747,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const nodeTypesStore = useNodeTypesStore();
     const selectedRun = ref([]);
     const i18n = useI18n();
+    const aiData = computed(
+      () => createAiData(props.node.name, props.workflow, workflowsStore.getWorkflowResultDataByNodeName)
+    );
+    const executionTree = computed(
+      () => getTreeNodeData(props.node.name, props.workflow, aiData.value, props.runIndex)
+    );
     function isTreeNodeSelected(node2) {
       return selectedRun.value.some((run) => run.node === node2.node && run.runIndex === node2.runIndex);
     }
@@ -1189,15 +792,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         onItemClick(executionTree.value[0].children[0]);
       }
     }
-    const aiData = computed(
-      () => createAiData(props.node.name, props.workflow, workflowsStore.getWorkflowResultDataByNodeName)
-    );
-    const executionTree = computed(
-      () => getTreeNodeData(props.node.name, props.workflow, aiData.value)
-    );
     watch(() => props.runIndex, selectFirst, { immediate: true });
     return (_ctx, _cache) => {
-      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      const _component_n8n_icon = N8nIcon;
       const _component_n8n_tooltip = N8nTooltip;
       const _component_n8n_text = N8nText;
       return openBlock(), createElementBlock("div", {
@@ -1216,7 +813,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               "data-test-id": "lm-chat-logs-tree",
               onNodeClick: onItemClick
             }, {
-              default: withCtx(({ node: node2, data }) => [
+              default: withCtx(({ node: currentNode, data }) => [
                 createBaseVNode("div", {
                   class: normalizeClass({
                     [_ctx.$style.treeNode]: true,
@@ -1228,10 +825,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   data.children.length ? (openBlock(), createElementBlock("button", {
                     key: 0,
                     class: normalizeClass(_ctx.$style.treeToggle),
-                    onClick: ($event) => toggleTreeItem(node2)
+                    onClick: ($event) => toggleTreeItem(currentNode)
                   }, [
-                    createVNode(_component_font_awesome_icon, {
-                      icon: node2.expanded ? "angle-down" : "angle-right"
+                    createVNode(_component_n8n_icon, {
+                      icon: currentNode.expanded ? "chevron-down" : "chevron-right"
                     }, null, 8, ["icon"])
                   ], 10, _hoisted_2$1)) : createCommentVNode("", true),
                   createVNode(_component_n8n_tooltip, {
@@ -1239,26 +836,26 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                     placement: "right"
                   }, {
                     content: withCtx(() => [
-                      createTextVNode(toDisplayString(node2.label), 1)
+                      createTextVNode(toDisplayString(currentNode.label), 1)
                     ]),
                     default: withCtx(() => [
                       createBaseVNode("span", {
                         class: normalizeClass(_ctx.$style.leafLabel)
                       }, [
-                        createVNode(_sfc_main$e, {
+                        createVNode(_sfc_main$c, {
                           "node-type": getNodeType(data.node),
                           size: 17,
                           class: normalizeClass(_ctx.$style.nodeIcon)
                         }, null, 8, ["node-type", "class"]),
                         !_ctx.slim ? (openBlock(), createElementBlock("span", {
                           key: 0,
-                          textContent: toDisplayString(node2.label)
+                          textContent: toDisplayString(currentNode.label)
                         }, null, 8, _hoisted_3$1)) : createCommentVNode("", true)
                       ], 2)
                     ]),
                     _: 2
                   }, 1032, ["disabled"])
-                ], 14, _hoisted_1$4)
+                ], 14, _hoisted_1$3)
               ]),
               _: 1
             }, 8, ["data"])
@@ -1327,11 +924,11 @@ const style0$4 = {
   isSelected,
   treeNode
 };
-const cssModules$5 = {
+const cssModules$4 = {
   "$style": style0$4
 };
-const RunDataAi = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const RunDataAi = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "OutputPanel",
   props: {
     workflow: {},
@@ -1345,7 +942,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     isPaneActive: { type: Boolean, default: false },
     displayMode: {}
   },
-  emits: ["linkRun", "unlinkRun", "runChange", "activatePane", "tableMounted", "itemHover", "search", "openSettings", "displayModeChange"],
+  emits: ["linkRun", "unlinkRun", "runChange", "activatePane", "tableMounted", "itemHover", "search", "openSettings", "execute", "displayModeChange"],
   setup(__props, { emit: __emit }) {
     const OUTPUT_TYPE = {
       REGULAR: "regular",
@@ -1356,6 +953,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const ndvStore = useNDVStore();
     const nodeTypesStore = useNodeTypesStore();
     const workflowsStore = useWorkflowsStore();
+    const posthogStore = usePostHog();
     const telemetry = useTelemetry();
     const i18n = useI18n();
     const { activeNode } = storeToRefs(ndvStore);
@@ -1374,6 +972,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       { label: i18n.baseText("ndv.output.outType.logs"), value: OUTPUT_TYPE.LOGS }
     ]);
     const runDataRef = ref();
+    const collapsingColumnName = ref(null);
     const node2 = computed(() => {
       return ndvStore.activeNode ?? void 0;
     });
@@ -1427,7 +1026,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return null;
       }
       const runData2 = workflowRunData.value;
-      if (runData2 === null || !runData2.hasOwnProperty(node2.value.name)) {
+      if (!runData2?.hasOwnProperty(node2.value.name)) {
         return null;
       }
       if (runData2[node2.value.name].length <= props.runIndex) {
@@ -1485,6 +1084,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         return void 0;
       }
     });
+    const isNDVV2 = computed(
+      () => posthogStore.isVariantEnabled(
+        NDV_UI_OVERHAUL_EXPERIMENT.name,
+        NDV_UI_OVERHAUL_EXPERIMENT.variant
+      )
+    );
     const insertTestData = () => {
       if (!runDataRef.value) return;
       runDataRef.value.enterEditMode({
@@ -1528,7 +1133,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const activatePane = () => {
       emit("activatePane");
     };
+    function handleChangeCollapsingColumn(columnName) {
+      collapsingColumnName.value = columnName;
+    }
     return (_ctx, _cache) => {
+      const _component_N8nIcon = N8nIcon;
+      const _component_NodeExecuteButton = _sfc_main$f;
+      const _component_i18n_t = resolveComponent("i18n-t");
+      const _component_NDVEmptyState = NDVEmptyState;
       const _directive_n8n_html = resolveDirective("n8n-html");
       return openBlock(), createBlock(RunData, {
         ref_key: "runDataRef",
@@ -1553,18 +1165,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "callout-message": allToolsWereUnusedNotice.value,
         "display-mode": _ctx.displayMode,
         "disable-ai-content": true,
+        "collapsing-table-column-name": collapsingColumnName.value,
+        "data-test-id": "ndv-output-panel",
         onActivatePane: activatePane,
         onRunChange: onRunIndexChange,
         onLinkRun,
         onUnlinkRun,
-        onTableMounted: _cache[1] || (_cache[1] = ($event) => emit("tableMounted", $event)),
-        onItemHover: _cache[2] || (_cache[2] = ($event) => emit("itemHover", $event)),
-        onSearch: _cache[3] || (_cache[3] = ($event) => emit("search", $event)),
-        onDisplayModeChange: _cache[4] || (_cache[4] = ($event) => emit("displayModeChange", $event))
+        onTableMounted: _cache[2] || (_cache[2] = ($event) => emit("tableMounted", $event)),
+        onItemHover: _cache[3] || (_cache[3] = ($event) => emit("itemHover", $event)),
+        onSearch: _cache[4] || (_cache[4] = ($event) => emit("search", $event)),
+        onDisplayModeChange: _cache[5] || (_cache[5] = ($event) => emit("displayModeChange", $event)),
+        onCollapsingTableColumnChanged: handleChangeCollapsingColumn
       }, createSlots({
         header: withCtx(() => [
           createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.titleSection)
+            class: normalizeClass([_ctx.$style.titleSection, { [_ctx.$style.titleSectionV2]: isNDVV2.value }])
           }, [
             hasAiMetadata.value ? (openBlock(), createBlock(unref(N8nRadioButtons), {
               key: 0,
@@ -1574,7 +1189,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               options: outputTypes.value
             }, null, 8, ["modelValue", "options"])) : (openBlock(), createElementBlock("span", {
               key: 1,
-              class: normalizeClass(_ctx.$style.title)
+              class: normalizeClass([_ctx.$style.title, { [_ctx.$style.titleV2]: isNDVV2.value }])
             }, toDisplayString(unref(i18n).baseText(outputPanelEditMode.value.enabled ? "ndv.output.edit" : "ndv.output")), 3)),
             hasNodeRun.value && !unref(pinnedData).hasData.value && (runsCount.value === 1 || runsCount.value > 0 && staleData.value) ? withDirectives((openBlock(), createBlock(RunInfo, {
               key: 2,
@@ -1587,45 +1202,103 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ], 2)
         ]),
         "node-not-run": withCtx(() => [
-          workflowRunning.value && !isTriggerNode.value ? (openBlock(), createBlock(unref(N8nText), {
+          isNDVV2.value ? (openBlock(), createBlock(_component_NDVEmptyState, {
             key: 0,
-            "data-test-id": "ndv-output-waiting"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.waitingToRun")), 1)
+            title: unref(i18n).baseText(
+              isTriggerNode.value ? "ndv.output.noOutputData.trigger.title" : "ndv.output.noOutputData.v2.title"
+            )
+          }, createSlots({
+            description: withCtx(() => [
+              createVNode(_component_i18n_t, {
+                tag: "span",
+                keypath: unref(isSubNodeType) ? "ndv.output.runNodeHintSubNode" : "ndv.output.noOutputData.v2.description"
+              }, {
+                link: withCtx(() => [
+                  createVNode(_component_NodeExecuteButton, {
+                    "hide-icon": "",
+                    transparent: "",
+                    type: "secondary",
+                    "node-name": unref(activeNode)?.name ?? "",
+                    label: unref(i18n).baseText(
+                      isTriggerNode.value ? "ndv.output.noOutputData.trigger.action" : "ndv.output.noOutputData.v2.action"
+                    ),
+                    "telemetry-source": "inputs",
+                    onExecute: _cache[1] || (_cache[1] = ($event) => emit("execute"))
+                  }, null, 8, ["node-name", "label"]),
+                  _cache[7] || (_cache[7] = createBaseVNode("br", null, null, -1))
+                ]),
+                _: 1
+              }, 8, ["keypath"])
             ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          !workflowRunning.value ? (openBlock(), createBlock(unref(N8nText), {
-            key: 1,
-            "data-test-id": "ndv-output-run-node-hint"
-          }, {
-            default: withCtx(() => [
-              unref(isSubNodeType) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.runNodeHintSubNode")), 1)
-              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.runNodeHint")) + " ", 1),
-                canPinData.value ? (openBlock(), createElementBlock("span", {
-                  key: 0,
-                  onClick: insertTestData
+            _: 2
+          }, [
+            isTriggerNode.value ? {
+              name: "icon",
+              fn: withCtx(() => [
+                _cache[6] || (_cache[6] = createBaseVNode("svg", {
+                  width: "16",
+                  viewBox: "0 0 14 18",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg"
                 }, [
-                  _cache[5] || (_cache[5] = createBaseVNode("br", null, null, -1)),
-                  createTextVNode(" " + toDisplayString(unref(i18n).baseText("generic.or")) + " ", 1),
-                  createVNode(unref(N8nText), {
-                    tag: "a",
-                    size: "medium",
-                    color: "primary"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.insertTestData")), 1)
-                    ]),
-                    _: 1
+                  createBaseVNode("path", {
+                    d: "M10.9062 2.40625L8.5 8.03125H12C12.4062 8.03125 12.7812 8.28125 12.9375 8.65625C13.0625 9.0625 12.9688 9.5 12.6562 9.78125L4.65625 16.7812C4.28125 17.0625 3.78125 17.0938 3.40625 16.8125C3.03125 16.5625 2.875 16.0625 3.0625 15.625L5.46875 10H2C1.5625 10 1.1875 9.75 1.0625 9.375C0.90625 8.96875 1 8.53125 1.3125 8.25L9.3125 1.25C9.6875 0.96875 10.1875 0.9375 10.5625 1.21875C10.9375 1.46875 11.0938 1.96875 10.9062 2.40625Z",
+                    fill: "currentColor"
                   })
-                ])) : createCommentVNode("", true)
-              ], 64))
-            ]),
-            _: 1
-          })) : createCommentVNode("", true)
+                ], -1))
+              ]),
+              key: "0"
+            } : {
+              name: "icon",
+              fn: withCtx(() => [
+                createVNode(_component_N8nIcon, {
+                  icon: "arrow-right-from-line",
+                  size: "xlarge"
+                })
+              ]),
+              key: "1"
+            }
+          ]), 1032, ["title"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            workflowRunning.value && !isTriggerNode.value ? (openBlock(), createBlock(unref(N8nText), {
+              key: 0,
+              "data-test-id": "ndv-output-waiting"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.waitingToRun")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            !workflowRunning.value ? (openBlock(), createBlock(unref(N8nText), {
+              key: 1,
+              "data-test-id": "ndv-output-run-node-hint"
+            }, {
+              default: withCtx(() => [
+                unref(isSubNodeType) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.runNodeHintSubNode")), 1)
+                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.runNodeHint")) + " ", 1),
+                  canPinData.value ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    onClick: insertTestData
+                  }, [
+                    _cache[8] || (_cache[8] = createBaseVNode("br", null, null, -1)),
+                    createTextVNode(" " + toDisplayString(unref(i18n).baseText("generic.or")) + " ", 1),
+                    createVNode(unref(N8nText), {
+                      tag: "a",
+                      size: "medium",
+                      color: "primary"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(i18n).baseText("ndv.output.insertTestData")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])) : createCommentVNode("", true)
+                ], 64))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ], 64))
         ]),
         "node-waiting": withCtx(() => [
           createVNode(unref(N8nText), {
@@ -1705,30 +1378,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ]),
           key: "1"
         } : void 0
-      ]), 1032, ["class", "node", "workflow", "run-index", "linked-runs", "can-link-runs", "too-much-data-title", "no-data-in-branch-message", "is-executing", "executing-message", "push-ref", "block-u-i", "is-production-execution-preview", "is-pane-active", "hide-pagination", "data-output-type", "callout-message", "display-mode"]);
+      ]), 1032, ["class", "node", "workflow", "run-index", "linked-runs", "can-link-runs", "too-much-data-title", "no-data-in-branch-message", "is-executing", "executing-message", "push-ref", "block-u-i", "is-production-execution-preview", "is-pane-active", "hide-pagination", "data-output-type", "callout-message", "display-mode", "collapsing-table-column-name"]);
     };
   }
 });
-const runData$1 = "_runData_6c8lp_128";
-const outputTypeSelect = "_outputTypeSelect_6c8lp_132";
-const titleSection$1 = "_titleSection_6c8lp_137";
-const title$2 = "_title_6c8lp_137";
-const noOutputData$1 = "_noOutputData_6c8lp_153";
-const recoveredOutputData$1 = "_recoveredOutputData_6c8lp_163";
+const runData$1 = "_runData_16mi2_128";
+const outputTypeSelect = "_outputTypeSelect_16mi2_132";
+const titleSection$1 = "_titleSection_16mi2_137";
+const titleSectionV2$1 = "_titleSectionV2_16mi2_145";
+const title$2 = "_title_16mi2_137";
+const titleV2$1 = "_titleV2_16mi2_157";
+const noOutputData$1 = "_noOutputData_16mi2_162";
+const recoveredOutputData$1 = "_recoveredOutputData_16mi2_172";
+const link = "_link_16mi2_181";
 const style0$3 = {
   runData: runData$1,
   outputTypeSelect,
   titleSection: titleSection$1,
+  titleSectionV2: titleSectionV2$1,
   title: title$2,
+  titleV2: titleV2$1,
   noOutputData: noOutputData$1,
-  recoveredOutputData: recoveredOutputData$1
+  recoveredOutputData: recoveredOutputData$1,
+  link
 };
-const cssModules$4 = {
+const cssModules$3 = {
   "$style": style0$3
 };
-const OutputPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
-const _hoisted_1$3 = { key: 0 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const OutputPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const _hoisted_1$2 = { key: 0 };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "InputNodeSelect",
   props: {
     nodes: {},
@@ -1804,7 +1483,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       emit("update:model-value", value);
     }
     return (_ctx, _cache) => {
-      const _component_n8n_option = _sfc_main$h;
+      const _component_n8n_option = _sfc_main$g;
       const _component_n8n_select = N8nSelect;
       return openBlock(), createBlock(_component_n8n_select, {
         "model-value": _ctx.modelValue,
@@ -1818,7 +1497,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": onInputNodeChange
       }, {
         prefix: withCtx(() => [
-          createVNode(_sfc_main$e, {
+          createVNode(_sfc_main$c, {
             disabled: selectedInputNode.value?.disabled,
             "node-type": selectedInputNodeType.value,
             size: 14,
@@ -1835,7 +1514,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               "data-test-id": "ndv-input-option"
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$e, {
+                createVNode(_sfc_main$c, {
                   disabled: node2.disabled,
                   "node-type": type,
                   size: 14,
@@ -1846,7 +1525,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(_ctx.$style.title)
                 }, [
                   createTextVNode(toDisplayString(title2(node2.name)) + " ", 1),
-                  node2.disabled ? (openBlock(), createElementBlock("span", _hoisted_1$3, "(" + toDisplayString(unref(i18n).baseText("node.disabled")) + ")", 1)) : createCommentVNode("", true)
+                  node2.disabled ? (openBlock(), createElementBlock("span", _hoisted_1$2, "(" + toDisplayString(unref(i18n).baseText("node.disabled")) + ")", 1)) : createCommentVNode("", true)
                 ], 2),
                 createBaseVNode("span", {
                   class: normalizeClass(_ctx.$style.subtitle)
@@ -1875,12 +1554,12 @@ const style0$2 = {
   disabled,
   subtitle
 };
-const cssModules$3 = {
+const cssModules$2 = {
   "$style": style0$2
 };
-const InputNodeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
-const _sfc_main$3 = {};
-const _hoisted_1$2 = {
+const InputNodeSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
+const _sfc_main$2 = {};
+const _hoisted_1$1 = {
   width: "112",
   height: "80",
   viewBox: "0 0 112 80",
@@ -1889,12 +1568,12 @@ const _hoisted_1$2 = {
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
     createStaticVNode('<mask id="mask0_489_46042" style="mask-type:alpha;" maskUnits="userSpaceOnUse" x="0" y="0" width="112" height="80"><rect width="112" height="80" fill="url(#paint0_linear_489_46042)"></rect></mask><g mask="url(#mask0_489_46042)"><rect x="-0.5" width="112" height="80" fill="url(#pattern0)" fill-opacity="0.6"></rect></g><defs><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"><use xlink:href="#image0_489_46042" transform="scale(0.00357143 0.005)"></use></pattern><linearGradient id="paint0_linear_489_46042" x1="90.5" y1="40.4494" x2="112.5" y2="40.4494" gradientUnits="userSpaceOnUse"><stop></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></linearGradient><image id="image0_489_46042" width="280" height="200" xlink:href="data:image/png;base64,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"></image></defs>', 3)
   ]));
 }
-const WireMeUp = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const WireMeUp = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "InputPanel",
   props: {
     runIndex: {},
@@ -1917,6 +1596,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const showDraggableHintWithDelay = ref(false);
     const draggableHintShown = ref(false);
     const mappedNode2 = ref(null);
+    const collapsingColumnName = ref(null);
     const inputModes = [
       { value: "mapping", label: i18n.baseText("ndv.input.mapping") },
       { value: "debugging", label: i18n.baseText("ndv.input.fromAI") }
@@ -1924,6 +1604,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const nodeTypesStore = useNodeTypesStore();
     const ndvStore = useNDVStore();
     const workflowsStore = useWorkflowsStore();
+    const posthogStore = usePostHog();
     const {
       activeNode,
       focusedMappableInput,
@@ -2025,6 +1706,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const parentNode = parentNodes.value[0];
       return parentNode && waitingNodeTooltip(workflowsStore.getNodeByName(parentNode.name));
     });
+    const isNDVV2 = computed(
+      () => posthogStore.isVariantEnabled(
+        NDV_UI_OVERHAUL_EXPERIMENT.name,
+        NDV_UI_OVERHAUL_EXPERIMENT.variant
+      )
+    );
     watch(
       inputMode,
       (mode) => {
@@ -2116,6 +1803,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     function activatePane() {
       emit("activatePane");
     }
+    function handleChangeCollapsingColumn(columnName) {
+      collapsingColumnName.value = columnName;
+    }
     return (_ctx, _cache) => {
       const _component_i18n_t = resolveComponent("i18n-t");
       const _directive_n8n_html = resolveDirective("n8n-html");
@@ -2141,6 +1831,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         "pane-type": "input",
         "data-test-id": "ndv-input-panel",
         "disable-ai-content": true,
+        "collapsing-table-column-name": collapsingColumnName.value,
         onActivatePane: activatePane,
         onItemHover,
         onLinkRun,
@@ -2148,14 +1839,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         onRunChange: onRunIndexChange,
         onTableMounted,
         onSearch,
-        onDisplayModeChange: _cache[1] || (_cache[1] = ($event) => emit("displayModeChange", $event))
+        onDisplayModeChange: _cache[2] || (_cache[2] = ($event) => emit("displayModeChange", $event)),
+        onCollapsingTableColumnChanged: handleChangeCollapsingColumn
       }, createSlots({
         header: withCtx(() => [
           createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.titleSection)
+            class: normalizeClass([_ctx.$style.titleSection, { [_ctx.$style.titleSectionV2]: isNDVV2.value }])
           }, [
             createBaseVNode("span", {
-              class: normalizeClass(_ctx.$style.title)
+              class: normalizeClass([_ctx.$style.title, { [_ctx.$style.titleV2]: isNDVV2.value }])
             }, toDisplayString(unref(i18n).baseText("ndv.input")), 3),
             isActiveNodeConfig.value && !_ctx.readOnly ? (openBlock(), createBlock(unref(N8nRadioButtons), {
               key: 0,
@@ -2180,35 +1872,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             key: 0,
             class: normalizeClass(_ctx.$style.noOutputData)
           }, [
-            isMappingEnabled.value || hasRootNodeRun.value ? (openBlock(), createBlock(unref(N8nText), {
-              key: 0,
-              tag: "div",
-              bold: true,
-              color: "text-dark",
-              size: "large"
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.noOutputData.title")), 1)
-              ]),
-              _: 1
-            })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              createVNode(unref(N8nText), {
-                tag: "div",
-                bold: true,
-                color: "text-dark",
-                size: "large"
+            isNDVV2.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              isMappingEnabled.value || hasRootNodeRun.value ? (openBlock(), createBlock(NDVEmptyState, {
+                key: 0,
+                title: unref(i18n).baseText("ndv.input.noOutputData.v2.title")
               }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.rootNodeHasNotRun.title")), 1)
+                icon: withCtx(() => [
+                  createVNode(unref(N8nIcon), {
+                    icon: "arrow-right-to-line",
+                    size: "xlarge"
+                  })
+                ]),
+                description: withCtx(() => [
+                  createVNode(_component_i18n_t, {
+                    tag: "span",
+                    keypath: "ndv.input.noOutputData.v2.description"
+                  }, {
+                    link: withCtx(() => [
+                      createVNode(_sfc_main$f, {
+                        "hide-icon": "",
+                        transparent: "",
+                        type: "secondary",
+                        "node-name": (isActiveNodeConfig.value ? rootNode.value : unref(activeNode)?.name) ?? "",
+                        label: unref(i18n).baseText("ndv.input.noOutputData.v2.action"),
+                        tooltip: unref(i18n).baseText("ndv.input.noOutputData.v2.tooltip"),
+                        "tooltip-placement": "bottom",
+                        "telemetry-source": "inputs",
+                        "data-test-id": "execute-previous-node",
+                        onExecute: onNodeExecute
+                      }, null, 8, ["node-name", "label", "tooltip"]),
+                      _cache[4] || (_cache[4] = createBaseVNode("br", null, null, -1))
+                    ]),
+                    _: 1
+                  })
                 ]),
                 _: 1
-              }),
-              createVNode(unref(N8nText), {
-                tag: "div",
-                color: "text-dark",
-                size: "medium"
+              }, 8, ["title"])) : (openBlock(), createBlock(NDVEmptyState, {
+                key: 1,
+                title: unref(i18n).baseText("ndv.input.rootNodeHasNotRun.title")
               }, {
-                default: withCtx(() => [
+                icon: withCtx(() => _cache[5] || (_cache[5] = [
+                  createBaseVNode("svg", {
+                    width: "16px",
+                    viewBox: "0 0 16 14",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    createBaseVNode("path", {
+                      d: "M11 2C10.4375 2 10 1.5625 10 1C10 0.46875 10.4375 0 11 0H13C14.6562 0 16 1.34375 16 3V11C16 12.6562 14.6562 14 13 14H11C10.4375 14 10 13.5625 10 13C10 12.4688 10.4375 12 11 12H13C13.5312 12 14 11.5625 14 11V3C14 2.46875 13.5312 2 13 2H11ZM10.6875 7.71875L6.6875 11.7188C6.3125 12.125 5.65625 12.125 5.28125 11.7188C4.875 11.3438 4.875 10.6875 5.28125 10.3125L7.5625 8H1C0.4375 8 0 7.5625 0 7C0 6.46875 0.4375 6 1 6H7.5625L5.28125 3.71875C4.875 3.34375 4.875 2.6875 5.28125 2.3125C5.65625 1.90625 6.3125 1.90625 6.6875 2.3125L10.6875 6.3125C11.0938 6.6875 11.0938 7.34375 10.6875 7.71875Z",
+                      fill: "currentColor"
+                    })
+                  ], -1)
+                ])),
+                description: withCtx(() => [
                   createVNode(_component_i18n_t, {
                     tag: "span",
                     keypath: "ndv.input.rootNodeHasNotRun.description"
@@ -2224,89 +1940,161 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              })
-            ], 64)),
-            !_ctx.readOnly ? (openBlock(), createBlock(unref(N8nTooltip), {
-              key: 2,
-              visible: showDraggableHint.value && showDraggableHintWithDelay.value
-            }, {
-              content: withCtx(() => [
-                withDirectives(createBaseVNode("div", null, null, 512), [
-                  [
-                    _directive_n8n_html,
-                    unref(i18n).baseText("dataMapping.dragFromPreviousHint", {
-                      interpolate: { name: unref(focusedMappableInput) }
-                    })
-                  ]
-                ])
-              ]),
-              default: withCtx(() => [
-                createVNode(_sfc_main$i, {
-                  type: "secondary",
-                  "hide-icon": "",
-                  transparent: true,
-                  "node-name": (isActiveNodeConfig.value ? rootNode.value : _ctx.currentNodeName) ?? "",
-                  label: unref(i18n).baseText("ndv.input.noOutputData.executePrevious"),
-                  class: "mt-m",
-                  "telemetry-source": "inputs",
-                  "data-test-id": "execute-previous-node",
-                  onExecute: onNodeExecute
-                }, null, 8, ["node-name", "label"])
-              ]),
-              _: 1
-            }, 8, ["visible"])) : createCommentVNode("", true),
-            !_ctx.readOnly ? (openBlock(), createBlock(unref(N8nText), {
-              key: 3,
-              tag: "div",
-              size: "small"
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_i18n_t, { keypath: "ndv.input.noOutputData.hint" }, {
-                  info: withCtx(() => [
-                    createVNode(unref(N8nTooltip), { placement: "bottom" }, {
-                      content: withCtx(() => [
-                        createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.noOutputData.hint.tooltip")), 1)
-                      ]),
-                      default: withCtx(() => [
-                        createVNode(unref(N8nIcon), { icon: "question-circle" })
+              }, 8, ["title"]))
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              isMappingEnabled.value || hasRootNodeRun.value ? (openBlock(), createBlock(unref(N8nText), {
+                key: 0,
+                tag: "div",
+                bold: true,
+                color: "text-dark",
+                size: "large"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.noOutputData.title")), 1)
+                ]),
+                _: 1
+              })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(N8nText), {
+                  tag: "div",
+                  bold: true,
+                  color: "text-dark",
+                  size: "large"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.rootNodeHasNotRun.title")), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(N8nText), {
+                  tag: "div",
+                  color: "text-dark",
+                  size: "medium"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_i18n_t, {
+                      tag: "span",
+                      keypath: "ndv.input.rootNodeHasNotRun.description"
+                    }, {
+                      link: withCtx(() => [
+                        createBaseVNode("a", {
+                          href: "#",
+                          "data-test-id": "switch-to-mapping-mode-link",
+                          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => onInputModeChange("mapping"), ["prevent"]))
+                        }, toDisplayString(unref(i18n).baseText("ndv.input.rootNodeHasNotRun.description.link")), 1)
                       ]),
                       _: 1
                     })
                   ]),
                   _: 1
                 })
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
+              ], 64)),
+              !_ctx.readOnly ? (openBlock(), createBlock(unref(N8nTooltip), {
+                key: 2,
+                visible: showDraggableHint.value && showDraggableHintWithDelay.value
+              }, {
+                content: withCtx(() => [
+                  withDirectives(createBaseVNode("div", null, null, 512), [
+                    [
+                      _directive_n8n_html,
+                      unref(i18n).baseText("dataMapping.dragFromPreviousHint", {
+                        interpolate: { name: unref(focusedMappableInput) }
+                      })
+                    ]
+                  ])
+                ]),
+                default: withCtx(() => [
+                  createVNode(_sfc_main$f, {
+                    type: "secondary",
+                    "hide-icon": "",
+                    transparent: true,
+                    "node-name": (isActiveNodeConfig.value ? rootNode.value : unref(activeNode)?.name) ?? "",
+                    label: unref(i18n).baseText("ndv.input.noOutputData.executePrevious"),
+                    class: "mt-m",
+                    "telemetry-source": "inputs",
+                    "data-test-id": "execute-previous-node",
+                    onExecute: onNodeExecute
+                  }, null, 8, ["node-name", "label"])
+                ]),
+                _: 1
+              }, 8, ["visible"])) : createCommentVNode("", true),
+              !_ctx.readOnly ? (openBlock(), createBlock(unref(N8nText), {
+                key: 3,
+                tag: "div",
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_i18n_t, { keypath: "ndv.input.noOutputData.hint" }, {
+                    info: withCtx(() => [
+                      createVNode(unref(N8nTooltip), { placement: "bottom" }, {
+                        content: withCtx(() => [
+                          createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.noOutputData.hint.tooltip")), 1)
+                        ]),
+                        default: withCtx(() => [
+                          createVNode(unref(N8nIcon), { icon: "circle-help" })
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ], 64))
           ], 2)) : (openBlock(), createElementBlock("div", {
             key: 1,
             class: normalizeClass(_ctx.$style.notConnected)
           }, [
-            createBaseVNode("div", null, [
-              createVNode(WireMeUp)
-            ]),
-            createVNode(unref(N8nText), {
-              tag: "div",
-              bold: true,
-              color: "text-dark",
-              size: "large"
+            isNDVV2.value ? (openBlock(), createBlock(NDVEmptyState, {
+              key: 0,
+              title: unref(i18n).baseText("ndv.input.notConnected.v2.title")
             }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.notConnected.title")), 1)
+              icon: withCtx(() => [
+                createVNode(WireMeUp)
               ]),
-              _: 1
-            }),
-            createVNode(unref(N8nText), { tag: "div" }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.notConnected.message")) + " ", 1),
-                createBaseVNode("a", {
-                  href: "https://docs.n8n.io/workflows/connections/",
-                  target: "_blank",
-                  onClick: onConnectionHelpClick
-                }, toDisplayString(unref(i18n).baseText("ndv.input.notConnected.learnMore")), 1)
+              description: withCtx(() => [
+                createVNode(_component_i18n_t, {
+                  tag: "span",
+                  keypath: "ndv.input.notConnected.v2.description"
+                }, {
+                  link: withCtx(() => [
+                    createBaseVNode("a", {
+                      href: "https://docs.n8n.io/workflows/connections/",
+                      target: "_blank",
+                      onClick: onConnectionHelpClick
+                    }, toDisplayString(unref(i18n).baseText("ndv.input.notConnected.learnMore")), 1)
+                  ]),
+                  _: 1
+                })
               ]),
               _: 1
-            })
+            }, 8, ["title"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createBaseVNode("div", null, [
+                createVNode(WireMeUp)
+              ]),
+              createVNode(unref(N8nText), {
+                tag: "div",
+                bold: true,
+                color: "text-dark",
+                size: "large"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.notConnected.title")), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(N8nText), { tag: "div" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("ndv.input.notConnected.message")) + " ", 1),
+                  createBaseVNode("a", {
+                    href: "https://docs.n8n.io/workflows/connections/",
+                    target: "_blank",
+                    onClick: onConnectionHelpClick
+                  }, toDisplayString(unref(i18n).baseText("ndv.input.notConnected.learnMore")), 1)
+                ]),
+                _: 1
+              })
+            ], 64))
           ], 2))
         ]),
         "node-waiting": withCtx(() => [
@@ -2366,7 +2154,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           name: "before-data",
           fn: withCtx(() => [
             (openBlock(), createBlock(resolveDynamicComponent("style"), null, {
-              default: withCtx(() => _cache[2] || (_cache[2] = [
+              default: withCtx(() => _cache[3] || (_cache[3] = [
                 createTextVNode("button.linkRun { display: none }")
               ])),
               _: 1
@@ -2384,33 +2172,37 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["class", "node", "nodes", "workflow", "run-index", "linked-runs", "can-link-runs", "too-much-data-title", "no-data-in-branch-message", "is-executing", "executing-message", "push-ref", "override-outputs", "mapping-enabled", "distance-from-active", "is-production-execution-preview", "is-pane-active", "display-mode"]);
+      ]), 1032, ["class", "node", "nodes", "workflow", "run-index", "linked-runs", "can-link-runs", "too-much-data-title", "no-data-in-branch-message", "is-executing", "executing-message", "push-ref", "override-outputs", "mapping-enabled", "distance-from-active", "is-production-execution-preview", "is-pane-active", "display-mode", "collapsing-table-column-name"]);
     };
   }
 });
-const runData = "_runData_115kf_123";
-const mappedNode = "_mappedNode_115kf_127";
-const titleSection = "_titleSection_115kf_131";
-const inputModeTab = "_inputModeTab_115kf_140";
-const noOutputData = "_noOutputData_115kf_144";
-const recoveredOutputData = "_recoveredOutputData_115kf_151";
-const notConnected = "_notConnected_115kf_160";
-const title = "_title_115kf_131";
+const runData = "_runData_1mdum_123";
+const mappedNode = "_mappedNode_1mdum_127";
+const titleSection = "_titleSection_1mdum_131";
+const titleSectionV2 = "_titleSectionV2_1mdum_140";
+const inputModeTab = "_inputModeTab_1mdum_144";
+const noOutputData = "_noOutputData_1mdum_148";
+const recoveredOutputData = "_recoveredOutputData_1mdum_155";
+const notConnected = "_notConnected_1mdum_164";
+const title = "_title_1mdum_131";
+const titleV2 = "_titleV2_1mdum_182";
 const style0$1 = {
   runData,
   mappedNode,
   titleSection,
+  titleSectionV2,
   inputModeTab,
   noOutputData,
   recoveredOutputData,
   notConnected,
-  title
+  title,
+  titleV2
 };
-const cssModules$2 = {
+const cssModules$1 = {
   "$style": style0$1
 };
-const InputPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
-const _hoisted_1$1 = { key: "empty" };
+const InputPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const _hoisted_1 = { key: "empty" };
 const _hoisted_2 = { key: "listening" };
 const _hoisted_3 = { key: 0 };
 const _hoisted_4 = { key: 1 };
@@ -2421,7 +2213,7 @@ const _hoisted_7 = {
   class: "mb-xl"
 };
 const _hoisted_8 = ["textContent"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TriggerPanel",
   props: {
     nodeName: {},
@@ -2692,7 +2484,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const _component_n8n_pulse = N8nPulse;
       const _component_n8n_text = N8nText;
       const _component_n8n_button = N8nButton;
-      const _component_n8n_spinner = _sfc_main$j;
+      const _component_n8n_spinner = _sfc_main$h;
       const _component_n8n_heading = N8nHeading;
       const _component_n8n_link = N8nLink;
       const _component_n8n_info_accordion = N8nInfoAccordion;
@@ -2705,10 +2497,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           mode: "out-in"
         }, {
           default: withCtx(() => [
-            hasIssues.value || hideContent.value ? (openBlock(), createElementBlock("div", _hoisted_1$1)) : isListeningForEvents.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            hasIssues.value || hideContent.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : isListeningForEvents.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
               createVNode(_component_n8n_pulse, null, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$e, {
+                  createVNode(_sfc_main$c, {
                     "node-type": nodeType.value,
                     size: 40
                   }, null, 8, ["node-type"])
@@ -2749,7 +2541,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   "copy-button-text": unref(i18n).baseText("generic.clickToCopy"),
                   onCopy: onTestLinkCopied
                 }, null, 8, ["value", "toast-title", "copy-button-text"]),
-                createVNode(_sfc_main$i, {
+                createVNode(_sfc_main$f, {
                   "data-test-id": "trigger-execute-button",
                   "node-name": _ctx.nodeName,
                   size: "medium",
@@ -2790,7 +2582,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ])) : createCommentVNode("", true),
-                createVNode(_sfc_main$i, {
+                createVNode(_sfc_main$f, {
                   "data-test-id": "trigger-execute-button",
                   "node-name": _ctx.nodeName,
                   size: "medium",
@@ -2827,7 +2619,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     _: 1
                   })) : createCommentVNode("", true)
                 ], 2),
-                createVNode(_sfc_main$i, {
+                createVNode(_sfc_main$f, {
                   "data-test-id": "trigger-execute-button",
                   "node-name": _ctx.nodeName,
                   size: "medium",
@@ -2876,11 +2668,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_13dut_123";
-const header = "_header_13dut_140";
-const action = "_action_13dut_147";
-const shake = "_shake_13dut_151";
-const accordion = "_accordion_13dut_172";
+const container = "_container_1mcl9_123";
+const header = "_header_1mcl9_140";
+const action = "_action_1mcl9_147";
+const shake = "_shake_1mcl9_151";
+const accordion = "_accordion_1mcl9_172";
 const style0 = {
   container,
   header,
@@ -2888,722 +2680,13 @@ const style0 = {
   shake,
   accordion
 };
-const cssModules$1 = {
-  "$style": style0
-};
-const TriggerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-0f040cf5"]]);
-const _hoisted_1 = {
-  key: 0,
-  ref: "container",
-  class: "data-display",
-  "data-test-id": "ndv-modal",
-  tabindex: "0"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "NodeDetailsView",
-  props: {
-    workflowObject: {},
-    readOnly: { type: Boolean, default: false },
-    renaming: { type: Boolean },
-    isProductionExecutionPreview: { type: Boolean, default: false }
-  },
-  emits: ["saveKeyboardShortcut", "valueChanged", "switchSelectedNode", "openConnectionNodeCreator", "redrawNode", "stopExecution"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const props = __props;
-    const ndvStore = useNDVStore();
-    const externalHooks = useExternalHooks();
-    const nodeHelpers = useNodeHelpers();
-    const { activeNode } = storeToRefs(ndvStore);
-    const pinnedData = usePinnedData(activeNode);
-    const workflowActivate = useWorkflowActivate();
-    const nodeTypesStore = useNodeTypesStore();
-    const workflowsStore = useWorkflowsStore();
-    const settingsStore = useSettingsStore();
-    const deviceSupport = useDeviceSupport();
-    const telemetry = useTelemetry();
-    const i18n = useI18n();
-    const message = useMessage();
-    const { APP_Z_INDEXES } = useStyles();
-    const settingsEventBus = createEventBus();
-    const redrawRequired = ref(false);
-    const runInputIndex = ref(-1);
-    const runOutputIndex = computed(() => ndvStore.output.run ?? -1);
-    const selectedInput = ref();
-    const isLinkingEnabled = ref(true);
-    const triggerWaitingWarningEnabled = ref(false);
-    const isDragging = ref(false);
-    const mainPanelPosition = ref(0);
-    const pinDataDiscoveryTooltipVisible = ref(false);
-    const avgInputRowHeight = ref(0);
-    const avgOutputRowHeight = ref(0);
-    const isInputPaneActive = ref(false);
-    const isOutputPaneActive = ref(false);
-    const isPairedItemHoveringEnabled = ref(true);
-    const pushRef = computed(() => ndvStore.pushRef);
-    const activeNodeType = computed(() => {
-      if (activeNode.value) {
-        return nodeTypesStore.getNodeType(activeNode.value.type, activeNode.value.typeVersion);
-      }
-      return null;
-    });
-    const showTriggerWaitingWarning = computed(
-      () => triggerWaitingWarningEnabled.value && !!activeNodeType.value && !activeNodeType.value.group.includes("trigger") && workflowsStore.isWorkflowRunning && workflowsStore.executionWaitingForWebhook
-    );
-    const workflowRunData = computed(() => {
-      if (workflowExecution.value === null) {
-        return null;
-      }
-      const executionData = workflowExecution.value.data;
-      if (executionData?.resultData) {
-        return executionData.resultData.runData;
-      }
-      return null;
-    });
-    const parentNodes = computed(() => {
-      if (activeNode.value) {
-        return props.workflowObject.getParentNodesByDepth(activeNode.value.name, 1);
-      }
-      return [];
-    });
-    const parentNode = computed(() => {
-      for (const parent of parentNodes.value) {
-        if (workflowsStore?.pinnedWorkflowData?.[parent.name]) {
-          return parent;
-        }
-        if (workflowRunData.value?.[parent.name]) {
-          return parent;
-        }
-      }
-      return parentNodes.value[0];
-    });
-    const inputNodeName = computed(() => {
-      const nodeOutputs = activeNode.value && activeNodeType.value ? getNodeOutputs(props.workflowObject, activeNode.value, activeNodeType.value) : [];
-      const nonMainOutputs = nodeOutputs.filter((output) => {
-        if (typeof output === "string") return output !== NodeConnectionTypes.Main;
-        return output.type !== NodeConnectionTypes.Main;
-      });
-      const isSubNode = nonMainOutputs.length > 0;
-      if (isSubNode && activeNode.value) {
-        const connectedOutputNode = props.workflowObject.getChildNodes(
-          activeNode.value.name,
-          "ALL_NON_MAIN"
-        )?.[0];
-        return connectedOutputNode;
-      }
-      return selectedInput.value ?? parentNode.value?.name;
-    });
-    const inputNode = computed(() => {
-      if (inputNodeName.value) {
-        return workflowsStore.getNodeByName(inputNodeName.value);
-      }
-      return null;
-    });
-    const inputSize = computed(() => ndvStore.ndvInputDataWithPinnedData.length);
-    const isTriggerNode = computed(
-      () => !!activeNodeType.value && (activeNodeType.value.group.includes("trigger") || activeNodeType.value.name === START_NODE_TYPE)
-    );
-    const showTriggerPanel = computed(() => {
-      const override = !!activeNodeType.value?.triggerPanel;
-      if (typeof activeNodeType.value?.triggerPanel === "boolean") {
-        return override;
-      }
-      const isWebhookBasedNode = !!activeNodeType.value?.webhooks?.length;
-      const isPollingNode = activeNodeType.value?.polling;
-      return !props.readOnly && isTriggerNode.value && (isWebhookBasedNode || isPollingNode || override);
-    });
-    const hasOutputConnection = computed(() => {
-      if (!activeNode.value) return false;
-      const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(activeNode.value.name);
-      return (Object.values(outgoingConnections)?.[0]?.[0] ?? []).length > 0;
-    });
-    const isExecutableTriggerNode = computed(() => {
-      if (!activeNodeType.value) return false;
-      return EXECUTABLE_TRIGGER_NODE_TYPES.includes(activeNodeType.value.name);
-    });
-    const isActiveStickyNode = computed(
-      () => !!ndvStore.activeNode && ndvStore.activeNode.type === STICKY_NODE_TYPE
-    );
-    const workflowExecution = computed(() => workflowsStore.getWorkflowExecution);
-    const maxOutputRun = computed(() => {
-      if (activeNode.value === null) {
-        return 0;
-      }
-      const runData2 = workflowRunData.value;
-      if (!runData2?.[activeNode.value.name]) {
-        return 0;
-      }
-      if (runData2[activeNode.value.name].length) {
-        return runData2[activeNode.value.name].length - 1;
-      }
-      return 0;
-    });
-    const outputRun = computed(
-      () => runOutputIndex.value === -1 ? maxOutputRun.value : Math.min(runOutputIndex.value, maxOutputRun.value)
-    );
-    const maxInputRun = computed(() => {
-      if (inputNode.value === null || activeNode.value === null) {
-        return 0;
-      }
-      const workflowNode = props.workflowObject.getNode(activeNode.value.name);
-      if (!workflowNode || !activeNodeType.value) {
-        return 0;
-      }
-      const outputs = getNodeOutputs(
-        props.workflowObject,
-        workflowNode,
-        activeNodeType.value
-      );
-      let node2 = inputNode.value;
-      const runData2 = workflowRunData.value;
-      if (outputs.some((output) => output !== NodeConnectionTypes.Main)) {
-        node2 = activeNode.value;
-      }
-      if (!node2 || !runData2 || !runData2.hasOwnProperty(node2.name)) {
-        return 0;
-      }
-      if (runData2[node2.name].length) {
-        return runData2[node2.name].length - 1;
-      }
-      return 0;
-    });
-    const connectedCurrentNodeOutputs = computed(() => {
-      return parentNodes.value.find(({ name }) => name === inputNodeName.value)?.indicies;
-    });
-    const inputRun = computed(() => {
-      if (isLinkingEnabled.value && maxOutputRun.value === maxInputRun.value) {
-        return outputRun.value;
-      }
-      const currentInputNodeName = inputNodeName.value;
-      if (runInputIndex.value === -1 && currentInputNodeName) {
-        return connectedCurrentNodeOutputs.value?.map(
-          (outputIndex) => nodeHelpers.getLastRunIndexWithData(currentInputNodeName, outputIndex)
-        ).find((runIndex) => runIndex !== -1) ?? maxInputRun.value;
-      }
-      return Math.min(runInputIndex.value, maxInputRun.value);
-    });
-    const canLinkRuns = computed(
-      () => maxOutputRun.value > 0 && maxOutputRun.value === maxInputRun.value
-    );
-    const linked = computed(() => isLinkingEnabled.value && canLinkRuns.value);
-    const featureRequestUrl = computed(() => {
-      if (!activeNodeType.value) {
-        return "";
-      }
-      return `${BASE_NODE_SURVEY_URL}${activeNodeType.value.name}`;
-    });
-    const outputPanelEditMode = computed(() => ndvStore.outputPanelEditMode);
-    const isExecutionWaitingForWebhook = computed(() => workflowsStore.executionWaitingForWebhook);
-    const blockUi = computed(
-      () => workflowsStore.isWorkflowRunning || isExecutionWaitingForWebhook.value
-    );
-    const foreignCredentials = computed(() => {
-      const credentials = activeNode.value?.credentials;
-      const usedCredentials = workflowsStore.usedCredentials;
-      const foreignCredentialsArray = [];
-      if (credentials && settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing]) {
-        Object.values(credentials).forEach((credential) => {
-          if (credential.id && usedCredentials[credential.id] && !usedCredentials[credential.id].currentUserHasAccess) {
-            foreignCredentialsArray.push(credential.id);
-          }
-        });
-      }
-      return foreignCredentialsArray;
-    });
-    const hasForeignCredential = computed(() => foreignCredentials.value.length > 0);
-    const inputPanelDisplayMode = computed(() => ndvStore.inputPanelDisplayMode);
-    const outputPanelDisplayMode = computed(() => ndvStore.outputPanelDisplayMode);
-    const setIsTooltipVisible = ({ isTooltipVisible }) => {
-      pinDataDiscoveryTooltipVisible.value = isTooltipVisible;
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "s" && deviceSupport.isCtrlKeyPressed(e)) {
-        onSaveWorkflow(e);
-      }
-    };
-    const onSaveWorkflow = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (props.readOnly) return;
-      emit("saveKeyboardShortcut", e);
-    };
-    const onInputItemHover = (e) => {
-      if (e === null || !inputNodeName.value || !isPairedItemHoveringEnabled.value) {
-        ndvStore.setHoveringItem(null);
-        return;
-      }
-      const item = {
-        nodeName: inputNodeName.value,
-        runIndex: inputRun.value,
-        outputIndex: e.outputIndex,
-        itemIndex: e.itemIndex
-      };
-      ndvStore.setHoveringItem(item);
-    };
-    const onInputTableMounted = (e) => {
-      avgInputRowHeight.value = e.avgRowHeight;
-    };
-    const onWorkflowActivate = () => {
-      ndvStore.activeNodeName = null;
-      setTimeout(() => {
-        void workflowActivate.activateCurrentWorkflow("ndv");
-      }, 1e3);
-    };
-    const onOutputItemHover = (e) => {
-      if (e === null || !activeNode.value || !isPairedItemHoveringEnabled.value) {
-        ndvStore.setHoveringItem(null);
-        return;
-      }
-      const item = {
-        nodeName: activeNode.value?.name,
-        runIndex: outputRun.value,
-        outputIndex: e.outputIndex,
-        itemIndex: e.itemIndex
-      };
-      ndvStore.setHoveringItem(item);
-    };
-    const onFeatureRequestClick = () => {
-      window.open(featureRequestUrl.value, "_blank");
-      if (activeNode.value) {
-        telemetry.track("User clicked ndv link", {
-          node_type: activeNode.value.type,
-          workflow_id: workflowsStore.workflowId,
-          push_ref: pushRef.value,
-          pane: NodeConnectionTypes.Main,
-          type: "i-wish-this-node-would"
-        });
-      }
-    };
-    const onDragEnd = (e) => {
-      isDragging.value = false;
-      telemetry.track("User moved parameters pane", {
-        // example method for tracking
-        window_width: e.windowWidth,
-        start_position: mainPanelPosition.value,
-        end_position: e.position,
-        node_type: activeNodeType.value ? activeNodeType.value.name : "",
-        push_ref: pushRef.value,
-        workflow_id: workflowsStore.workflowId
-      });
-      mainPanelPosition.value = e.position;
-    };
-    const onDragStart = (e) => {
-      isDragging.value = true;
-      mainPanelPosition.value = e.position;
-    };
-    const onPanelsInit = (e) => {
-      mainPanelPosition.value = e.position;
-    };
-    const onLinkRunToOutput = () => {
-      isLinkingEnabled.value = true;
-      trackLinking("output");
-    };
-    const onUnlinkRun = (pane) => {
-      runInputIndex.value = runOutputIndex.value;
-      isLinkingEnabled.value = false;
-      trackLinking(pane);
-    };
-    const onNodeExecute = () => {
-      setTimeout(() => {
-        if (!activeNode.value || !workflowsStore.isWorkflowRunning) {
-          return;
-        }
-        triggerWaitingWarningEnabled.value = true;
-      }, 1e3);
-    };
-    const openSettings = () => {
-      settingsEventBus.emit("openSettings");
-    };
-    const trackLinking = (pane) => {
-      telemetry.track("User changed ndv run linking", {
-        node_type: activeNodeType.value ? activeNodeType.value.name : "",
-        push_ref: pushRef.value,
-        linked: linked.value,
-        pane
-      });
-    };
-    const onLinkRunToInput = () => {
-      ndvStore.setOutputRunIndex(runInputIndex.value);
-      isLinkingEnabled.value = true;
-      trackLinking("input");
-    };
-    const valueChanged = (parameterData) => {
-      emit("valueChanged", parameterData);
-    };
-    const onSwitchSelectedNode = (nodeTypeName) => {
-      emit("switchSelectedNode", nodeTypeName);
-    };
-    const onOpenConnectionNodeCreator = (nodeTypeName, connectionType, connectionIndex = 0) => {
-      emit("openConnectionNodeCreator", nodeTypeName, connectionType, connectionIndex);
-    };
-    const close = async () => {
-      if (isDragging.value) {
-        return;
-      }
-      if (activeNode.value && (typeof activeNodeType.value?.outputs === "string" || typeof activeNodeType.value?.inputs === "string" || redrawRequired.value)) {
-        const nodeName = activeNode.value.name;
-        setTimeout(() => {
-          emit("redrawNode", nodeName);
-        }, 1);
-      }
-      if (outputPanelEditMode.value.enabled && activeNode.value) {
-        const shouldPinDataBeforeClosing = await message.confirm(
-          "",
-          i18n.baseText("ndv.pinData.beforeClosing.title"),
-          {
-            confirmButtonText: i18n.baseText("ndv.pinData.beforeClosing.confirm"),
-            cancelButtonText: i18n.baseText("ndv.pinData.beforeClosing.cancel")
-          }
-        );
-        if (shouldPinDataBeforeClosing === MODAL_CONFIRM) {
-          const { value } = outputPanelEditMode.value;
-          try {
-            pinnedData.setData(jsonParse(value), "on-ndv-close-modal");
-          } catch (error2) {
-            console.error(error2);
-          }
-        }
-        ndvStore.setOutputPanelEditModeEnabled(false);
-      }
-      await externalHooks.run("dataDisplay.nodeEditingFinished");
-      telemetry.track("User closed node modal", {
-        node_type: activeNodeType.value ? activeNodeType.value?.name : "",
-        push_ref: pushRef.value,
-        workflow_id: workflowsStore.workflowId
-      });
-      triggerWaitingWarningEnabled.value = false;
-      ndvStore.activeNodeName = null;
-      ndvStore.resetNDVPushRef();
-    };
-    const trackRunChange = (run, pane) => {
-      telemetry.track("User changed ndv run dropdown", {
-        push_ref: pushRef.value,
-        run_index: run,
-        node_type: activeNodeType.value ? activeNodeType.value?.name : "",
-        pane
-      });
-    };
-    const onRunOutputIndexChange = (run) => {
-      ndvStore.setOutputRunIndex(run);
-      trackRunChange(run, "output");
-    };
-    const onRunInputIndexChange = (run) => {
-      runInputIndex.value = run;
-      if (linked.value) {
-        ndvStore.setOutputRunIndex(run);
-      }
-      trackRunChange(run, "input");
-    };
-    const onOutputTableMounted = (e) => {
-      avgOutputRowHeight.value = e.avgRowHeight;
-    };
-    const onInputNodeChange = (value, index) => {
-      runInputIndex.value = -1;
-      isLinkingEnabled.value = true;
-      selectedInput.value = value;
-      telemetry.track("User changed ndv input dropdown", {
-        node_type: activeNode.value ? activeNode.value.type : "",
-        push_ref: pushRef.value,
-        workflow_id: workflowsStore.workflowId,
-        selection_value: index,
-        input_node_type: inputNode.value ? inputNode.value.type : ""
-      });
-    };
-    const onStopExecution = () => {
-      emit("stopExecution");
-    };
-    const activateInputPane = () => {
-      isInputPaneActive.value = true;
-      isOutputPaneActive.value = false;
-    };
-    const activateOutputPane = () => {
-      isInputPaneActive.value = false;
-      isOutputPaneActive.value = true;
-    };
-    const onSearch = (search) => {
-      isPairedItemHoveringEnabled.value = !search;
-    };
-    const registerKeyboardListener = () => {
-      document.addEventListener("keydown", onKeyDown, true);
-    };
-    const unregisterKeyboardListener = () => {
-      document.removeEventListener("keydown", onKeyDown, true);
-    };
-    const setSelectedInput = (value) => {
-      selectedInput.value = value;
-    };
-    const handleChangeDisplayMode = (pane, mode) => {
-      ndvStore.setPanelDisplayMode({ pane, mode });
-    };
-    watch(
-      activeNode,
-      (node2, oldNode) => {
-        if (node2 && !oldNode) {
-          registerKeyboardListener();
-        } else if (!node2) {
-          unregisterKeyboardListener();
-        }
-        if (node2 && node2.name !== oldNode?.name && !isActiveStickyNode.value) {
-          runInputIndex.value = -1;
-          ndvStore.setOutputRunIndex(-1);
-          isLinkingEnabled.value = true;
-          selectedInput.value = void 0;
-          triggerWaitingWarningEnabled.value = false;
-          avgOutputRowHeight.value = 0;
-          avgInputRowHeight.value = 0;
-          setTimeout(() => ndvStore.setNDVPushRef(), 0);
-          if (!activeNodeType.value) {
-            return;
-          }
-          void externalHooks.run("dataDisplay.nodeTypeChanged", {
-            nodeSubtitle: nodeHelpers.getNodeSubtitle(node2, activeNodeType.value, props.workflowObject)
-          });
-          setTimeout(() => {
-            if (activeNode.value) {
-              const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(
-                activeNode.value?.name
-              );
-              telemetry.track("User opened node modal", {
-                node_id: activeNode.value?.id,
-                node_type: activeNodeType.value ? activeNodeType.value?.name : "",
-                workflow_id: workflowsStore.workflowId,
-                push_ref: pushRef.value,
-                is_editable: !hasForeignCredential.value,
-                parameters_pane_position: mainPanelPosition.value,
-                input_first_connector_runs: maxInputRun.value,
-                output_first_connector_runs: maxOutputRun.value,
-                selected_view_inputs: isTriggerNode.value ? "trigger" : inputPanelDisplayMode.value,
-                selected_view_outputs: outputPanelDisplayMode.value,
-                input_connectors: parentNodes.value.length,
-                output_connectors: outgoingConnections?.main?.length,
-                input_displayed_run_index: inputRun.value,
-                output_displayed_run_index: outputRun.value,
-                data_pinning_tooltip_presented: pinDataDiscoveryTooltipVisible.value,
-                input_displayed_row_height_avg: avgInputRowHeight.value,
-                output_displayed_row_height_avg: avgOutputRowHeight.value
-              });
-            }
-          }, 2e3);
-        }
-        if (window.top && !isActiveStickyNode.value) {
-          window.top.postMessage(JSON.stringify({ command: node2 ? "openNDV" : "closeNDV" }), "*");
-        }
-      },
-      { immediate: true }
-    );
-    watch(maxOutputRun, () => {
-      ndvStore.setOutputRunIndex(-1);
-    });
-    watch(maxInputRun, () => {
-      runInputIndex.value = -1;
-    });
-    watch(inputNodeName, (nodeName) => {
-      setTimeout(() => {
-        ndvStore.setInputNodeName(nodeName);
-      }, 0);
-    });
-    watch(inputRun, (inputRun2) => {
-      setTimeout(() => {
-        ndvStore.setInputRunIndex(inputRun2);
-      }, 0);
-    });
-    onMounted(() => {
-      dataPinningEventBus.on("data-pinning-discovery", setIsTooltipVisible);
-      ndvEventBus.on("updateInputNodeName", setSelectedInput);
-    });
-    onBeforeUnmount(() => {
-      dataPinningEventBus.off("data-pinning-discovery", setIsTooltipVisible);
-      ndvEventBus.off("updateInputNodeName", setSelectedInput);
-      unregisterKeyboardListener();
-    });
-    return (_ctx, _cache) => {
-      const _component_n8n_icon = N8nIcon;
-      const _component_n8n_text = N8nText;
-      const _component_n8n_tooltip = N8nTooltip;
-      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-      const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createBlock(_component_el_dialog, {
-        id: "ndv",
-        "model-value": (!!unref(activeNode) || _ctx.renaming) && !isActiveStickyNode.value,
-        "before-close": close,
-        "show-close": false,
-        class: "data-display-wrapper ndv-wrapper",
-        "overlay-class": "data-display-overlay",
-        width: "auto",
-        "append-to": `#${unref(APP_MODALS_ELEMENT_ID)}`,
-        "data-test-id": "ndv",
-        "z-index": unref(APP_Z_INDEXES).NDV,
-        "data-has-output-connection": hasOutputConnection.value
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_n8n_tooltip, {
-            placement: "bottom-start",
-            visible: showTriggerWaitingWarning.value,
-            disabled: !showTriggerWaitingWarning.value
-          }, {
-            content: withCtx(() => [
-              createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style.triggerWarning)
-              }, toDisplayString(unref(i18n).baseText("ndv.backToCanvas.waitingForTriggerWarning")), 3)
-            ]),
-            default: withCtx(() => [
-              createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style.backToCanvas),
-                "data-test-id": "back-to-canvas",
-                onClick: close
-              }, [
-                createVNode(_component_n8n_icon, {
-                  icon: "arrow-left",
-                  color: "text-xlight",
-                  size: "medium"
-                }),
-                createVNode(_component_n8n_text, {
-                  color: "text-xlight",
-                  size: "medium",
-                  bold: true
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(i18n).baseText("ndv.backToCanvas")), 1)
-                  ]),
-                  _: 1
-                })
-              ], 2)
-            ]),
-            _: 1
-          }, 8, ["visible", "disabled"]),
-          unref(activeNode) ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.modalBackground),
-              onClick: close
-            }, null, 2),
-            (openBlock(), createBlock(NDVDraggablePanels, {
-              key: unref(activeNode).name,
-              "is-trigger-node": isTriggerNode.value,
-              "hide-input-and-output": activeNodeType.value === null,
-              position: isTriggerNode.value && !showTriggerPanel.value ? 0 : void 0,
-              "is-draggable": !isTriggerNode.value,
-              "has-double-width": activeNodeType.value?.parameterPane === "wide",
-              "node-type": activeNodeType.value,
-              onSwitchSelectedNode,
-              onOpenConnectionNodeCreator,
-              onClose: close,
-              onInit: onPanelsInit,
-              onDragstart: onDragStart,
-              onDragend: onDragEnd
-            }, createSlots({
-              output: withCtx(() => [
-                createVNode(OutputPanel, {
-                  "data-test-id": "output-panel",
-                  workflow: _ctx.workflowObject,
-                  "can-link-runs": canLinkRuns.value,
-                  "run-index": outputRun.value,
-                  "linked-runs": linked.value,
-                  "push-ref": pushRef.value,
-                  "is-read-only": _ctx.readOnly || hasForeignCredential.value,
-                  "block-u-i": blockUi.value && isTriggerNode.value && !isExecutableTriggerNode.value,
-                  "is-production-execution-preview": _ctx.isProductionExecutionPreview,
-                  "is-pane-active": isOutputPaneActive.value,
-                  "display-mode": outputPanelDisplayMode.value,
-                  onActivatePane: activateOutputPane,
-                  onLinkRun: onLinkRunToOutput,
-                  onUnlinkRun: _cache[2] || (_cache[2] = () => onUnlinkRun("output")),
-                  onRunChange: onRunOutputIndexChange,
-                  onOpenSettings: openSettings,
-                  onTableMounted: onOutputTableMounted,
-                  onItemHover: onOutputItemHover,
-                  onSearch,
-                  onDisplayModeChange: _cache[3] || (_cache[3] = ($event) => handleChangeDisplayMode("output", $event))
-                }, null, 8, ["workflow", "can-link-runs", "run-index", "linked-runs", "push-ref", "is-read-only", "block-u-i", "is-production-execution-preview", "is-pane-active", "display-mode"])
-              ]),
-              main: withCtx(() => [
-                createVNode(NodeSettings, {
-                  "event-bus": unref(settingsEventBus),
-                  dragging: isDragging.value,
-                  "push-ref": pushRef.value,
-                  "node-type": activeNodeType.value,
-                  "foreign-credentials": foreignCredentials.value,
-                  "read-only": _ctx.readOnly,
-                  "block-u-i": blockUi.value && showTriggerPanel.value,
-                  executable: !_ctx.readOnly,
-                  "input-size": inputSize.value,
-                  onValueChanged: valueChanged,
-                  onExecute: onNodeExecute,
-                  onStopExecution,
-                  onRedrawRequired: _cache[4] || (_cache[4] = ($event) => redrawRequired.value = true),
-                  onActivate: onWorkflowActivate,
-                  onSwitchSelectedNode,
-                  onOpenConnectionNodeCreator
-                }, null, 8, ["event-bus", "dragging", "push-ref", "node-type", "foreign-credentials", "read-only", "block-u-i", "executable", "input-size"]),
-                featureRequestUrl.value ? (openBlock(), createElementBlock("a", {
-                  key: 0,
-                  class: normalizeClass(_ctx.$style.featureRequest),
-                  target: "_blank",
-                  onClick: onFeatureRequestClick
-                }, [
-                  createVNode(_component_font_awesome_icon, { icon: "lightbulb" }),
-                  createTextVNode(" " + toDisplayString(unref(i18n).baseText("ndv.featureRequest")), 1)
-                ], 2)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, [
-              showTriggerPanel.value || !isTriggerNode.value ? {
-                name: "input",
-                fn: withCtx(() => [
-                  showTriggerPanel.value ? (openBlock(), createBlock(TriggerPanel, {
-                    key: 0,
-                    "node-name": unref(activeNode).name,
-                    "push-ref": pushRef.value,
-                    onExecute: onNodeExecute,
-                    onActivate: onWorkflowActivate
-                  }, null, 8, ["node-name", "push-ref"])) : !isTriggerNode.value ? (openBlock(), createBlock(InputPanel, {
-                    key: 1,
-                    workflow: _ctx.workflowObject,
-                    "can-link-runs": canLinkRuns.value,
-                    "run-index": inputRun.value,
-                    "linked-runs": linked.value,
-                    "current-node-name": inputNodeName.value,
-                    "push-ref": pushRef.value,
-                    "read-only": _ctx.readOnly || hasForeignCredential.value,
-                    "is-production-execution-preview": _ctx.isProductionExecutionPreview,
-                    "is-pane-active": isInputPaneActive.value,
-                    "display-mode": inputPanelDisplayMode.value,
-                    onActivatePane: activateInputPane,
-                    onLinkRun: onLinkRunToInput,
-                    onUnlinkRun: _cache[0] || (_cache[0] = () => onUnlinkRun("input")),
-                    onRunChange: onRunInputIndexChange,
-                    onOpenSettings: openSettings,
-                    onChangeInputNode: onInputNodeChange,
-                    onExecute: onNodeExecute,
-                    onTableMounted: onInputTableMounted,
-                    onItemHover: onInputItemHover,
-                    onSearch,
-                    onDisplayModeChange: _cache[1] || (_cache[1] = ($event) => handleChangeDisplayMode("input", $event))
-                  }, null, 8, ["workflow", "can-link-runs", "run-index", "linked-runs", "current-node-name", "push-ref", "read-only", "is-production-execution-preview", "is-pane-active", "display-mode"])) : createCommentVNode("", true)
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["is-trigger-node", "hide-input-and-output", "position", "is-draggable", "has-double-width", "node-type"]))
-          ], 512)) : createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["model-value", "append-to", "z-index", "data-has-output-connection"]);
-    };
-  }
-});
-const modalBackground = "_modalBackground_176ah_123";
-const triggerWarning = "_triggerWarning_176ah_128";
-const backToCanvas = "_backToCanvas_176ah_132";
-const featureRequest = "_featureRequest_176ah_153";
-const style1 = {
-  modalBackground,
-  triggerWarning,
-  backToCanvas,
-  featureRequest
-};
 const cssModules = {
-  "$style": style1
+  "$style": style0
 };
-const NodeDetailsView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const TriggerPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-a321aff2"]]);
 export {
-  NodeDetailsView as default
+  InputPanel as I,
+  OutputPanel as O,
+  TriggerPanel as T,
+  __unplugin_components_0 as _
 };