n8n-editor-ui 1.92.0 → 1.94.0

package/dist/assets/{NodeCreator-cEUgbAI9.js → NodeCreator-weAzsmlU.js}

@@ -1,273 +1,7 @@
-import { eu as createCompounder, iz as memoize, dp as i18n, fh as HTTP_REQUEST_NODE_TYPE, iA as getCredentialOnlyNodeType, eQ as AI_CATEGORY_TOOLS, fs as AI_CATEGORY_ROOT_NODES, fy as CUSTOM_API_CALL_KEY, bs as AI_SUBCATEGORY, d as defineComponent, bQ as reactive, o as onMounted, aP as useExternalHooks, y as onBeforeUnmount, b3 as toRefs, h as resolveComponent, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, j as createVNode, _ as _export_sfc, d_ as useNodeType, r as ref, q as computed, eB as DEFAULT_SUBCATEGORY, iB as CREDENTIAL_ONLY_NODE_PREFIX, c as useI18n, fk as HITL_SUBCATEGORY, dT as isCommunityPackageName, cm as resolveDirective, e as createBlock, aV as createSlots, w as withCtx, aA as withDirectives, aB as vShow, B as normalizeStyle, bC as _sfc_main$h, b2 as withModifiers, m as unref, cO as COMMUNITY_NODES_INSTALLATION_DOCS_URL, ce as DRAG_EVENT_DATA_KEY, ag as useTelemetry, b7 as mergeProps, t as toDisplayString, fi as WEBHOOK_NODE_TYPE, fB as getNewNodePosition, fO as NODE_SIZE, x as renderSlot, Q as useWorkflowsStore, X as watch, b4 as normalizeProps, b5 as guardReactiveProps, bb as onUnmounted, F as Fragment, D as renderList, fm as REGULAR_NODE_CREATOR_VIEW, u as useUsersStore, fl as TRIGGER_NODE_CREATOR_VIEW, hJ as OPEN_AI_NODE_TYPE, hI as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, iC as withMemo, gY as createStaticVNode, l as createTextVNode, iD as REQUEST_NODE_FORM_URL, gp as getNodeIconSource, eG as SEND_AND_WAIT_OPERATION, eU as AI_OTHERS_NODE_CREATOR_VIEW, eV as AI_NODE_CREATOR_VIEW, G as useDebounce, gi as Transition, eT as AI_UNCATEGORIZED_CATEGORY, H as useUIStore, dC as useAssistantStore, bV as useBuilderStore, aT as _sfc_main$i, iE as SlideTransition, bz as useNodeTypesStore, bR as useCredentialsStore } from "./index-B6eunbxp.js";
-import { u as upperFirst, g as formatTriggerActionName, a as useNodeCreatorStore, h as useViewStacks, j as camelCase, k as useKeyboardNavigation, t as transformNodeType, A as AINodesView, l as AIView, R as RegularView, T as TriggerView, n as flattenCreateElements } from "./useCanvasOperations-DaP5jKbH.js";
-import { u as useActions } from "./NodeCreation-BEjdAYc_.js";
-var startCase = createCompounder(function(result, word, index) {
-  return result + (index ? " " : "") + upperFirst(word);
-});
-const PLACEHOLDER_RECOMMENDED_ACTION_KEY = "placeholder_recommended";
-function translate(...args) {
-  return i18n.baseText(...args);
-}
-const cachedBaseText = memoize(translate, (...args) => JSON.stringify(args));
-const customNodeActionsParsers = {
-  ["n8n-nodes-base.hubspotTrigger"]: (matchedProperty, nodeTypeDescription) => {
-    const collection = matchedProperty?.options?.[0];
-    return collection?.values[0]?.options?.map(
-      (categoryItem) => ({
-        ...getNodeTypeBase(nodeTypeDescription),
-        actionKey: categoryItem.value,
-        displayName: cachedBaseText("nodeCreator.actionsCategory.onEvent", {
-          interpolate: { event: startCase(categoryItem.name) }
-        }),
-        description: categoryItem.description ?? "",
-        displayOptions: matchedProperty.displayOptions,
-        values: { eventsUi: { eventValues: [{ name: categoryItem.value }] } }
-      })
-    );
-  }
-};
-function getNodeTypeBase(nodeTypeDescription, label2) {
-  const isTrigger = nodeTypeDescription.group.includes("trigger");
-  const category2 = isTrigger ? cachedBaseText("nodeCreator.actionsCategory.triggers") : cachedBaseText("nodeCreator.actionsCategory.actions");
-  return {
-    name: nodeTypeDescription.name,
-    group: nodeTypeDescription.group,
-    codex: {
-      label: label2 ?? "",
-      categories: [category2]
-    },
-    iconUrl: nodeTypeDescription.iconUrl,
-    iconColor: nodeTypeDescription.iconColor,
-    outputs: nodeTypeDescription.outputs,
-    icon: nodeTypeDescription.icon,
-    defaults: nodeTypeDescription.defaults
-  };
-}
-function operationsCategory(nodeTypeDescription) {
-  if (!!nodeTypeDescription.properties.find((property) => property.name === "resource")) return [];
-  const matchedProperty = nodeTypeDescription.properties.find(
-    (property) => property.name?.toLowerCase() === "operation"
-  );
-  if (!matchedProperty?.options) return [];
-  const filteredOutItems = matchedProperty.options.filter(
-    (categoryItem) => !["*", "", " "].includes(categoryItem.name)
-  );
-  const items2 = filteredOutItems.map((item) => ({
-    ...getNodeTypeBase(nodeTypeDescription),
-    actionKey: item.value,
-    displayName: item.action ?? startCase(item.name),
-    description: item.description ?? "",
-    displayOptions: matchedProperty.displayOptions,
-    outputConnectionType: item.outputConnectionType,
-    values: {
-      [matchedProperty.name]: matchedProperty.type === "multiOptions" ? [item.value] : item.value
-    }
-  }));
-  if (items2.length === 0) return [];
-  return items2;
-}
-function modeCategory(nodeTypeDescription) {
-  const isAINode = nodeTypeDescription.codex?.categories?.includes(AI_SUBCATEGORY);
-  if (!isAINode) return [];
-  const matchedProperty = nodeTypeDescription.properties.find(
-    (property) => property.name?.toLowerCase() === "mode"
-  );
-  if (!matchedProperty?.options) return [];
-  const modeOptions = matchedProperty.options;
-  const items2 = modeOptions.map((item) => ({
-    ...getNodeTypeBase(nodeTypeDescription),
-    actionKey: item.value,
-    displayName: item.action ?? startCase(item.name),
-    description: item.description ?? "",
-    displayOptions: matchedProperty.displayOptions,
-    outputConnectionType: item.outputConnectionType,
-    values: {
-      [matchedProperty.name]: item.value
-    }
-  }));
-  if (items2.length === 0) return [];
-  return items2;
-}
-function triggersCategory(nodeTypeDescription) {
-  const matchingKeys = ["event", "events", "trigger on"];
-  const isTrigger = nodeTypeDescription.displayName?.toLowerCase().includes("trigger");
-  const matchedProperty = nodeTypeDescription.properties.find(
-    (property) => matchingKeys.includes(property.displayName?.toLowerCase())
-  );
-  if (!isTrigger) return [];
-  if (!matchedProperty?.options) {
-    return [
-      {
-        ...getNodeTypeBase(nodeTypeDescription),
-        actionKey: PLACEHOLDER_RECOMMENDED_ACTION_KEY,
-        displayName: cachedBaseText("nodeCreator.actionsCategory.onNewEvent", {
-          interpolate: { event: nodeTypeDescription.displayName.replace("Trigger", "").trimEnd() }
-        }),
-        description: ""
-      }
-    ];
-  }
-  const filteredOutItems = matchedProperty.options.filter(
-    (categoryItem) => !["*", "", " "].includes(categoryItem.name)
-  );
-  const customParsedItem = customNodeActionsParsers[nodeTypeDescription.name]?.(
-    matchedProperty,
-    nodeTypeDescription
-  );
-  const items2 = customParsedItem ?? filteredOutItems.map((categoryItem) => ({
-    ...getNodeTypeBase(nodeTypeDescription),
-    actionKey: categoryItem.value,
-    displayName: categoryItem.action ?? cachedBaseText("nodeCreator.actionsCategory.onEvent", {
-      interpolate: { event: formatTriggerActionName(categoryItem.name) }
-    }),
-    description: categoryItem.description ?? "",
-    displayOptions: matchedProperty.displayOptions,
-    values: {
-      [matchedProperty.name]: matchedProperty.type === "multiOptions" ? [categoryItem.value] : categoryItem.value
-    }
-  }));
-  return items2;
-}
-function resourceCategories(nodeTypeDescription) {
-  const transformedNodes = [];
-  const matchedProperties = nodeTypeDescription.properties.filter(
-    (property) => property.displayName?.toLowerCase() === "resource"
-  );
-  matchedProperties.forEach((property) => {
-    (property.options || []).filter((option) => option.value !== CUSTOM_API_CALL_KEY).forEach((resourceOption, _i, options) => {
-      const isSingleResource = options.length === 1;
-      const operations = nodeTypeDescription.properties.find((operation) => {
-        const isOperation = operation.name === "operation";
-        const isMatchingResource = operation.displayOptions?.show?.resource?.includes(resourceOption.value) ?? isSingleResource;
-        const operationVersions = operation.displayOptions?.show?.["@version"];
-        const nodeTypeVersions = Array.isArray(nodeTypeDescription.version) ? nodeTypeDescription.version : [nodeTypeDescription.version];
-        const isMatchingVersion = operationVersions ? operationVersions.some(
-          (version) => typeof version === "number" && nodeTypeVersions.includes(version)
-        ) : true;
-        return isOperation && isMatchingResource && isMatchingVersion;
-      });
-      if (!operations?.options) return;
-      const items2 = (operations.options || []).map(
-        (operationOption) => {
-          const displayName = operationOption.action ?? `${resourceOption.name} ${startCase(operationOption.name)}`;
-          const displayOptions = isSingleResource ? { show: { resource: [options[0]?.value] } } : operations?.displayOptions;
-          return {
-            ...getNodeTypeBase(
-              nodeTypeDescription,
-              `${resourceOption.name} ${cachedBaseText("nodeCreator.actionsCategory.actions")}`
-            ),
-            actionKey: operationOption.value,
-            description: operationOption?.description ?? "",
-            displayOptions,
-            values: {
-              operation: operations?.type === "multiOptions" ? [operationOption.value] : operationOption.value
-            },
-            displayName,
-            group: ["trigger"]
-          };
-        }
-      );
-      transformedNodes.push(...items2);
-    });
-  });
-  return transformedNodes;
-}
-function useActionsGenerator() {
-  function generateNodeActions(node) {
-    if (!node) return [];
-    if (node.codex?.subcategories?.AI?.includes(AI_CATEGORY_TOOLS) && !node.codex?.subcategories?.AI?.includes(AI_CATEGORY_ROOT_NODES))
-      return [];
-    return [
-      ...triggersCategory(node),
-      ...operationsCategory(node),
-      ...resourceCategories(node),
-      ...modeCategory(node)
-    ];
-  }
-  function filterActions(actions) {
-    if (actions.length <= 1) return [];
-    return actions.filter(
-      (action2, _, arr) => {
-        const isApiCall = action2.actionKey === CUSTOM_API_CALL_KEY;
-        if (isApiCall) return false;
-        const isPlaceholderTriggerAction = action2.actionKey === PLACEHOLDER_RECOMMENDED_ACTION_KEY;
-        return !isPlaceholderTriggerAction || isPlaceholderTriggerAction && arr.length > 1;
-      }
-    );
-  }
-  function getSimplifiedNodeType(node) {
-    const {
-      displayName,
-      defaults,
-      description,
-      name: name2,
-      group,
-      icon: icon2,
-      iconUrl,
-      iconColor,
-      badgeIconUrl,
-      outputs,
-      codex
-    } = node;
-    return {
-      displayName,
-      defaults,
-      description,
-      name: name2,
-      group,
-      icon: icon2,
-      iconColor,
-      iconUrl,
-      badgeIconUrl,
-      outputs,
-      codex
-    };
-  }
-  function generateMergedNodesAndActions(nodeTypes, httpOnlyCredentials) {
-    const visibleNodeTypes = [...nodeTypes];
-    const actions = {};
-    const mergedNodes = [];
-    visibleNodeTypes.filter((node) => !node.group.includes("trigger")).forEach((app) => {
-      const appActions = generateNodeActions(app);
-      actions[app.name] = appActions;
-      if (app.name === HTTP_REQUEST_NODE_TYPE) {
-        const credentialOnlyNodes = httpOnlyCredentials.map((credentialType) => {
-          const credsOnlyNode = getCredentialOnlyNodeType(app, credentialType);
-          if (credsOnlyNode) return getSimplifiedNodeType(credsOnlyNode);
-          return null;
-        });
-        const filteredNodes = credentialOnlyNodes.filter(
-          (node) => node !== null
-        );
-        mergedNodes.push(...filteredNodes);
-      }
-      mergedNodes.push(getSimplifiedNodeType(app));
-    });
-    visibleNodeTypes.filter((node) => node.group.includes("trigger")).forEach((trigger) => {
-      const normalizedName = trigger.name.replace("Trigger", "");
-      const triggerActions = generateNodeActions(trigger);
-      const appActions = actions?.[normalizedName] || [];
-      const app = mergedNodes.find((node) => node.name === normalizedName);
-      if (app && appActions?.length > 0) {
-        const mergedActions = filterActions([...appActions, ...triggerActions]);
-        actions[normalizedName] = mergedActions;
-        app.description = trigger.description;
-      } else {
-        actions[trigger.name] = filterActions(triggerActions);
-        mergedNodes.push(getSimplifiedNodeType(trigger));
-      }
-    });
-    return {
-      actions,
-      mergedNodes
-    };
-  }
-  return {
-    generateMergedNodesAndActions
-  };
-}
-const _hoisted_1$7 = ["placeholder", "value"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+import { d as defineComponent, bS as reactive, o as onMounted, aP as useExternalHooks, y as onBeforeUnmount, b4 as toRefs, h as resolveComponent, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, f as createCommentVNode, j as createVNode, _ as _export_sfc, bT as useNodeCreatorStore, hI as useViewStacks, e8 as useNodeType, r as ref, q as computed, hJ as DEFAULT_SUBCATEGORY, hK as CREDENTIAL_ONLY_NODE_PREFIX, c as useI18n, hL as HITL_SUBCATEGORY, dN as isCommunityPackageName, hM as isNodePreviewKey, cu as resolveDirective, e as createBlock, aV as createSlots, w as withCtx, aA as withDirectives, aB as vShow, B as normalizeStyle, bD as _sfc_main$n, b3 as withModifiers, m as unref, cW as COMMUNITY_NODES_INSTALLATION_DOCS_URL, cm as DRAG_EVENT_DATA_KEY, ag as useTelemetry, hN as camelCase, b8 as mergeProps, t as toDisplayString, gL as WEBHOOK_NODE_TYPE, hO as getNewNodePosition, eX as NODE_SIZE, u as useUsersStore, bF as N8nIcon, bf as N8nText, l as createTextVNode, bh as N8nButton, x as renderSlot, hP as useKeyboardNavigation, Q as useWorkflowsStore, X as watch, b5 as normalizeProps, b6 as guardReactiveProps, bc as onUnmounted, F as Fragment, D as renderList, hQ as REGULAR_NODE_CREATOR_VIEW, cV as useCommunityNodesStore, bz as useNodeTypesStore, aR as N8nTooltip, dx as i18n, h9 as captureException, b as useRouter, aS as N8nLink, V as VIEWS, fb as CUSTOM_API_CALL_KEY, gU as TRIGGER_NODE_CREATOR_VIEW, gI as OPEN_AI_NODE_TYPE, gH as OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE, hR as withMemo, hS as HTTP_REQUEST_NODE_TYPE, fV as createStaticVNode, hT as REQUEST_NODE_FORM_URL, hU as filterAndSearchNodes, hV as prepareCommunityNodeDetailsViewStack, fl as getNodeIconSource, gN as transformNodeType, hW as AINodesView, hX as AIView, hY as RegularView, hZ as TriggerView, h_ as flattenCreateElements, fe as SEND_AND_WAIT_OPERATION, h$ as AI_OTHERS_NODE_CREATOR_VIEW, i0 as AI_NODE_CREATOR_VIEW, a as useToast, bU as useCredentialsStore, i1 as removePreviewToken, G as useDebounce, f8 as Transition, i2 as AI_UNCATEGORIZED_CATEGORY, H as useUIStore, dL as useAssistantStore, bY as useBuilderStore, aT as _sfc_main$o, i3 as SlideTransition, i4 as useActionsGenerator } from "./index-hdsPF3tl.js";
+import { u as useActions } from "./NodeCreation-nHiG-Lhi.js";
+const _hoisted_1$8 = ["placeholder", "value"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "SearchBar",
   props: {
     placeholder: { default: "" },
@@ -328,7 +62,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             "data-test-id": "node-creator-search-bar",
             tabindex: "0",
             onInput
-          }, null, 42, _hoisted_1$7)
+          }, null, 42, _hoisted_1$8)
         ], 2),
         _ctx.modelValue.length > 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -351,7 +85,7 @@ const active$3 = "_active_1knv8_144";
 const text = "_text_1knv8_148";
 const suffix = "_suffix_1knv8_164";
 const clear = "_clear_1knv8_170";
-const style0$e = {
+const style0$k = {
   searchContainer,
   prefix,
   active: active$3,
@@ -359,11 +93,11 @@ const style0$e = {
   suffix,
   clear
 };
-const cssModules$e = {
-  "$style": style0$e
+const cssModules$k = {
+  "$style": style0$k
 };
-const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__cssModules", cssModules$e]]);
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const SearchBar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__cssModules", cssModules$k]]);
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "NodeItem",
   props: {
     nodeType: {},
@@ -383,7 +117,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const dragging = ref(false);
     const draggablePosition = ref({ x: -100, y: -100 });
     const draggableDataTransfer2 = ref(null);
-    const description = computed(() => {
+    const description2 = computed(() => {
+      if (isCommunityNodePreview.value) {
+        return props.nodeType.description;
+      }
       if (isSendAndWaitCategory.value) {
         return "";
       }
@@ -395,7 +132,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         fallback: props.nodeType.description
       });
     });
-    const showActionArrow = computed(() => hasActions.value && !isSendAndWaitCategory.value);
+    const showActionArrow = computed(() => {
+      if (isCommunityNode.value && !activeViewStack.communityNodeDetails) {
+        return true;
+      }
+      return hasActions.value && !isSendAndWaitCategory.value;
+    });
     const isSendAndWaitCategory = computed(() => activeViewStack.subcategory === HITL_SUBCATEGORY);
     const dataTestId = computed(
       () => hasActions.value ? "node-creator-action-item" : "node-creator-node-item"
@@ -412,6 +154,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       left: `${draggablePosition.value.x}px`
     }));
     const isCommunityNode = computed(() => isCommunityPackageName(props.nodeType.name));
+    const isCommunityNodePreview = computed(() => isNodePreviewKey(props.nodeType.name));
     const displayName = computed(() => {
       const trimmedDisplayName = props.nodeType.displayName.trimEnd();
       return i18n2.headerText({
@@ -451,7 +194,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_component_N8nNodeCreatorNode, {
         draggable: !showActionArrow.value,
         class: normalizeClass(_ctx.$style.nodeItem),
-        description: description.value,
+        description: description2.value,
         title: displayName.value,
         "show-action-arrow": showActionArrow.value,
         "is-trigger": isTrigger.value,
@@ -465,7 +208,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             key: 0,
             class: normalizeClass(_ctx.$style.subNodeBackground)
           }, null, 2)) : createCommentVNode("", true),
-          createVNode(_sfc_main$h, {
+          createVNode(_sfc_main$n, {
             class: normalizeClass(_ctx.$style.nodeIcon),
             "node-type": _ctx.nodeType
           }, null, 8, ["class", "node-type"])
@@ -477,7 +220,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             class: normalizeClass(_ctx.$style.draggable),
             style: normalizeStyle(draggableStyle.value)
           }, [
-            createVNode(_sfc_main$h, {
+            createVNode(_sfc_main$n, {
               "node-type": _ctx.nodeType,
               size: 40,
               shrink: false,
@@ -490,7 +233,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         ]),
         _: 2
       }, [
-        isCommunityNode.value ? {
+        isCommunityNode.value && !isCommunityNodePreview.value && !unref(activeViewStack)?.communityNodeDetails ? {
           name: "tooltip",
           fn: withCtx(() => [
             withDirectives(createBaseVNode("p", {
@@ -515,24 +258,24 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const nodeItem = "_nodeItem_1107w_123";
-const nodeIcon$2 = "_nodeIcon_1107w_131";
+const nodeIcon$4 = "_nodeIcon_1107w_131";
 const subNodeBackground = "_subNodeBackground_1107w_135";
 const communityNodeIcon = "_communityNodeIcon_1107w_145";
 const draggable$1 = "_draggable_1107w_149";
 const draggableDataTransfer$1 = "_draggableDataTransfer_1107w_163";
-const style0$d = {
+const style0$j = {
   nodeItem,
-  nodeIcon: nodeIcon$2,
+  nodeIcon: nodeIcon$4,
   subNodeBackground,
   communityNodeIcon,
   draggable: draggable$1,
   draggableDataTransfer: draggableDataTransfer$1
 };
-const cssModules$d = {
-  "$style": style0$d
+const cssModules$j = {
+  "$style": style0$j
 };
-const NodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__cssModules", cssModules$d]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const NodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__cssModules", cssModules$j]]);
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "SubcategoryItem",
   props: {
     item: {}
@@ -565,15 +308,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 const subCategory = "_subCategory_1x5a1_123";
-const style0$c = {
+const style0$i = {
   subCategory
 };
-const cssModules$c = {
-  "$style": style0$c
+const cssModules$i = {
+  "$style": style0$i
 };
-const SubcategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__cssModules", cssModules$c]]);
-const _hoisted_1$6 = ["textContent"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const SubcategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__cssModules", cssModules$i]]);
+const _hoisted_1$7 = ["textContent"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "LabelItem",
   props: {
     item: {}
@@ -586,20 +329,20 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         createBaseVNode("span", {
           class: normalizeClass(_ctx.$style.name),
           textContent: toDisplayString(_ctx.item.key)
-        }, null, 10, _hoisted_1$6)
+        }, null, 10, _hoisted_1$7)
       ], 2);
     };
   }
 });
 const label$1 = "_label_p81gr_123";
-const style0$b = {
+const style0$h = {
   label: label$1
 };
-const cssModules$b = {
-  "$style": style0$b
+const cssModules$h = {
+  "$style": style0$h
 };
-const LabelItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__cssModules", cssModules$b]]);
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const LabelItem = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__cssModules", cssModules$h]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ActionItem",
   props: {
     nodeType: {},
@@ -686,7 +429,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             class: normalizeClass(_ctx.$style.draggable),
             style: normalizeStyle(draggableStyle.value)
           }, [
-            createVNode(_sfc_main$h, {
+            createVNode(_sfc_main$n, {
               "node-type": _ctx.nodeType,
               size: 40,
               shrink: false,
@@ -698,7 +441,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ])
         ]),
         icon: withCtx(() => [
-          createVNode(_sfc_main$h, { "node-type": _ctx.action }, null, 8, ["node-type"])
+          createVNode(_sfc_main$n, { "node-type": _ctx.action }, null, 8, ["node-type"])
         ]),
         _: 1
       }, 8, ["class", "title", "is-trigger"]);
@@ -706,20 +449,20 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 const action$1 = "_action_1owvg_123";
-const nodeIcon$1 = "_nodeIcon_1owvg_135";
+const nodeIcon$3 = "_nodeIcon_1owvg_135";
 const draggable = "_draggable_1owvg_139";
 const draggableDataTransfer = "_draggableDataTransfer_1owvg_153";
-const style0$a = {
+const style0$g = {
   action: action$1,
-  nodeIcon: nodeIcon$1,
+  nodeIcon: nodeIcon$3,
   draggable,
   draggableDataTransfer
 };
-const cssModules$a = {
-  "$style": style0$a
+const cssModules$g = {
+  "$style": style0$g
 };
-const ActionItem = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$a]]);
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const ActionItem = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__cssModules", cssModules$g]]);
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ViewItem",
   props: {
     view: {}
@@ -750,14 +493,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const view$1 = "_view_17lj9_123";
-const style0$9 = {
+const style0$f = {
   view: view$1
 };
-const cssModules$9 = {
-  "$style": style0$9
+const cssModules$f = {
+  "$style": style0$f
 };
-const ViewItem = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$9]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const ViewItem = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__cssModules", cssModules$f]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "LinkItem",
   props: {
     link: {}
@@ -788,15 +531,89 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 const creatorLink = "_creatorLink_cptk0_123";
-const style0$8 = {
+const style0$e = {
   creatorLink
 };
-const cssModules$8 = {
-  "$style": style0$8
+const cssModules$e = {
+  "$style": style0$e
 };
-const LinkItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$8]]);
-const _hoisted_1$5 = ["textContent"];
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const LinkItem = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__cssModules", cssModules$e]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeInstallHint",
+  props: {
+    hint: {}
+  },
+  setup(__props) {
+    const isOwner = computed(() => useUsersStore().isInstanceOwner);
+    return (_ctx, _cache) => {
+      return isOwner.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createVNode(unref(N8nIcon), {
+          color: "text-light",
+          icon: "info-circle",
+          size: "large"
+        }),
+        createVNode(unref(N8nText), {
+          color: "text-base",
+          size: "medium"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.hint), 1)
+          ]),
+          _: 1
+        })
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const container$5 = "_container_1dwo3_123";
+const style0$d = {
+  container: container$5
+};
+const cssModules$d = {
+  "$style": style0$d
+};
+const CommunityNodeInstallHint = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__cssModules", cssModules$d]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeItem",
+  props: {
+    isPreview: { type: Boolean }
+  },
+  setup(__props) {
+    const i18n2 = useI18n();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.isPreview ? (openBlock(), createBlock(CommunityNodeInstallHint, {
+          key: 0,
+          hint: unref(i18n2).baseText("communityNodeItem.node.hint")
+        }, null, 8, ["hint"])) : (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(_ctx.$style.marginLeft)
+        }, [
+          createVNode(unref(N8nButton), {
+            size: "medium",
+            type: "secondary",
+            icon: "plus",
+            label: unref(i18n2).baseText("communityNodeItem.label"),
+            outline: ""
+          }, null, 8, ["label"])
+        ], 2))
+      ]);
+    };
+  }
+});
+const marginLeft = "_marginLeft_1vvtt_123";
+const style0$c = {
+  marginLeft
+};
+const cssModules$c = {
+  "$style": style0$c
+};
+const CommunityNodeItem = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__cssModules", cssModules$c]]);
+const _hoisted_1$6 = ["textContent"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "CategoryItem",
   props: {
     expanded: { type: Boolean, default: true },
@@ -827,7 +644,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           }, [
             createBaseVNode("span", {
               textContent: toDisplayString(categoryName.value)
-            }, null, 8, _hoisted_1$5),
+            }, null, 8, _hoisted_1$6),
             _ctx.isTrigger ? (openBlock(), createBlock(_component_font_awesome_icon, {
               key: 0,
               icon: "bolt",
@@ -855,19 +672,19 @@ const category$1 = "_category_1rqhf_128";
 const active$2 = "_active_1rqhf_149";
 const name = "_name_1rqhf_153";
 const arrow = "_arrow_1rqhf_158";
-const style0$7 = {
+const style0$b = {
   triggerIcon,
   category: category$1,
   active: active$2,
   name,
   arrow
 };
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$b = {
+  "$style": style0$b
 };
-const CategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$7]]);
-const _hoisted_1$4 = ["data-category-collapsed"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const CategoryItem = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__cssModules", cssModules$b]]);
+const _hoisted_1$5 = ["data-category-collapsed"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "CategorizedItemsRenderer",
   props: {
     elements: { default: () => [] },
@@ -880,13 +697,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { popViewStack } = useViewStacks();
+    const { popViewStack, activeViewStack } = useViewStacks();
     const { registerKeyHook } = useKeyboardNavigation();
     const { workflowId } = useWorkflowsStore();
     const nodeCreatorStore = useNodeCreatorStore();
+    const i18n2 = useI18n();
     const activeItemId = computed(() => useKeyboardNavigation()?.activeItemId);
     const actionCount = computed(() => props.elements.filter(({ type }) => type === "action").length);
     const expanded = ref(props.expanded ?? false);
+    const isPreview = computed(
+      () => activeViewStack.communityNodeDetails && !activeViewStack.communityNodeDetails.installed
+    );
     function toggleExpanded() {
       setExpanded(!expanded.value);
     }
@@ -984,39 +805,46 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 2)) : createCommentVNode("", true),
-        expanded.value ? (openBlock(), createBlock(ItemsRenderer, mergeProps({ key: 1 }, _ctx.$attrs, {
+        isPreview.value ? (openBlock(), createBlock(CommunityNodeInstallHint, {
+          key: 1,
+          hint: unref(i18n2).baseText("communityNodeItem.actions.hint")
+        }, null, 8, ["hint"])) : createCommentVNode("", true),
+        expanded.value ? (openBlock(), createBlock(ItemsRenderer, mergeProps({ key: 2 }, _ctx.$attrs, {
           elements: _ctx.elements,
-          "is-trigger": _ctx.isTriggerCategory
+          "is-trigger": _ctx.isTriggerCategory,
+          class: [{ [_ctx.$style.preview]: isPreview.value }]
         }), {
           default: withCtx(() => _cache[0] || (_cache[0] = [])),
           empty: withCtx(() => [
             renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps({ elements: _ctx.elements })))
           ]),
           _: 3
-        }, 16, ["elements", "is-trigger"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$4);
+        }, 16, ["elements", "is-trigger", "class"])) : createCommentVNode("", true)
+      ], 10, _hoisted_1$5);
     };
   }
 });
-const mouseOverTooltip = "_mouseOverTooltip_5wyeb_123";
-const categorizedItemsRenderer = "_categorizedItemsRenderer_5wyeb_131";
-const tooltipPopper = "_tooltipPopper_5wyeb_135";
-const contentSlot = "_contentSlot_5wyeb_139";
-const style0$6 = {
+const mouseOverTooltip = "_mouseOverTooltip_wk4vn_123";
+const categorizedItemsRenderer = "_categorizedItemsRenderer_wk4vn_131";
+const tooltipPopper = "_tooltipPopper_wk4vn_135";
+const contentSlot = "_contentSlot_wk4vn_139";
+const preview$1 = "_preview_wk4vn_148";
+const style0$a = {
   mouseOverTooltip,
   categorizedItemsRenderer,
   tooltipPopper,
-  contentSlot
+  contentSlot,
+  preview: preview$1
 };
-const cssModules$6 = {
-  "$style": style0$6
+const cssModules$a = {
+  "$style": style0$a
 };
-const CategorizedItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$6]]);
-const _hoisted_1$3 = { key: 0 };
-const _hoisted_2$2 = ["data-keyboard-nav-type", "data-keyboard-nav-id", "onClick"];
+const CategorizedItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$a]]);
+const _hoisted_1$4 = { key: 0 };
+const _hoisted_2$3 = ["data-keyboard-nav-type", "data-keyboard-nav-id", "onClick"];
 const LAZY_LOAD_THRESHOLD = 20;
 const LAZY_LOAD_ITEMS_PER_TICK = 5;
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ItemsRenderer",
   props: {
     elements: { default: () => [] },
@@ -1030,7 +858,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const renderedItems2 = ref([]);
     const renderAnimationRequest = ref(0);
+    const { activeViewStack } = useViewStacks();
     const activeItemId = computed(() => useKeyboardNavigation()?.activeItemId);
+    const communityNode = computed(() => activeViewStack.mode === "community-node");
+    const isPreview = computed(() => {
+      return communityNode.value && !activeViewStack.communityNodeDetails?.installed;
+    });
+    const highlightActiveItem = computed(() => {
+      if (activeViewStack.communityNodeDetails && !activeViewStack.communityNodeDetails.installed) {
+        return false;
+      }
+      return true;
+    });
     function renderItems() {
       if (props.elements.length <= LAZY_LOAD_THRESHOLD || !props.lazyRender) {
         renderedItems2.value = props.elements;
@@ -1101,7 +940,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("div", {
             key: item.uuid
           }, [
-            renderedItems2.value.includes(item) ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+            renderedItems2.value.includes(item) ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
               item.type === "section" ? (openBlock(), createBlock(CategorizedItemsRenderer, {
                 key: 0,
                 elements: item.children,
@@ -1114,9 +953,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 ref: "iteratorItems",
                 class: normalizeClass({
                   clickable: !_ctx.disabled,
-                  [_ctx.$style.active]: activeItemId.value === item.uuid,
-                  [_ctx.$style.iteratorItem]: true,
+                  [_ctx.$style.active]: activeItemId.value === item.uuid && highlightActiveItem.value,
+                  [_ctx.$style.iteratorItem]: !communityNode.value,
                   [_ctx.$style[item.type]]: true,
+                  [_ctx.$style.preview]: isPreview.value,
                   // Borderless is only applied to views
                   [_ctx.$style.borderless]: item.type === "view" && item.properties.borderless === true
                 }),
@@ -1133,27 +973,31 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                   key: 1,
                   item: item.properties
                 }, null, 8, ["item"])) : createCommentVNode("", true),
-                item.type === "node" ? (openBlock(), createBlock(NodeItem, {
+                communityNode.value ? (openBlock(), createBlock(CommunityNodeItem, {
                   key: 2,
+                  "is-preview": isPreview.value
+                }, null, 8, ["is-preview"])) : createCommentVNode("", true),
+                item.type === "node" && !communityNode.value ? (openBlock(), createBlock(NodeItem, {
+                  key: 3,
                   "node-type": item.properties,
                   active: true,
                   subcategory: item.subcategory
                 }, null, 8, ["node-type", "subcategory"])) : createCommentVNode("", true),
                 item.type === "action" ? (openBlock(), createBlock(ActionItem, {
-                  key: 3,
+                  key: 4,
                   "node-type": item.properties,
                   action: item.properties,
                   active: true
                 }, null, 8, ["node-type", "action"])) : item.type === "view" ? (openBlock(), createBlock(ViewItem, {
-                  key: 4,
+                  key: 5,
                   view: item.properties,
                   class: normalizeClass(_ctx.$style.viewItem)
                 }, null, 8, ["view", "class"])) : item.type === "link" ? (openBlock(), createBlock(LinkItem, {
-                  key: 5,
+                  key: 6,
                   link: item.properties,
                   class: normalizeClass(_ctx.$style.linkItem)
                 }, null, 8, ["link", "class"])) : createCommentVNode("", true)
-              ], 10, _hoisted_2$2))
+              ], 10, _hoisted_2$3))
             ])) : (openBlock(), createBlock(_component_n8n_loading, {
               key: 1,
               loading: true,
@@ -1172,17 +1016,18 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const itemSkeleton = "_itemSkeleton_e346c_123";
-const iteratorItem = "_iteratorItem_e346c_127";
-const label = "_label_e346c_139";
-const category = "_category_e346c_139";
-const active$1 = "_active_e346c_142";
-const empty = "_empty_e346c_146";
-const itemsRenderer = "_itemsRenderer_e346c_150";
-const view = "_view_e346c_159";
-const link = "_link_e346c_177";
-const borderless = "_borderless_e346c_195";
-const style0$5 = {
+const itemSkeleton = "_itemSkeleton_1r9np_123";
+const iteratorItem = "_iteratorItem_1r9np_127";
+const label = "_label_1r9np_139";
+const category = "_category_1r9np_139";
+const active$1 = "_active_1r9np_142";
+const empty = "_empty_1r9np_146";
+const itemsRenderer = "_itemsRenderer_1r9np_150";
+const view = "_view_1r9np_159";
+const link = "_link_1r9np_177";
+const borderless = "_borderless_1r9np_195";
+const preview = "_preview_1r9np_203";
+const style0$9 = {
   itemSkeleton,
   iteratorItem,
   label,
@@ -1192,13 +1037,14 @@ const style0$5 = {
   itemsRenderer,
   view,
   link,
-  borderless
+  borderless,
+  preview
 };
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$9 = {
+  "$style": style0$9
 };
-const ItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$5]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const ItemsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$9]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "OrderSwitcher",
   props: {
     rootView: {}
@@ -1217,14 +1063,348 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { key: 2 };
+const _hoisted_2$2 = { key: 3 };
+const _hoisted_3 = { style: { "padding-bottom": "8px" } };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeInfo",
+  setup(__props) {
+    const { activeViewStack } = useViewStacks();
+    const { communityNodeDetails } = activeViewStack;
+    const publisherName = ref(void 0);
+    const downloads = ref(null);
+    const verified = ref(false);
+    const communityNodesStore = useCommunityNodesStore();
+    const nodeTypesStore = useNodeTypesStore();
+    const isOwner = computed(() => useUsersStore().isInstanceOwner);
+    const ownerEmailList = computed(
+      () => useUsersStore().allUsers.filter((user) => user.role?.includes("owner")).map((user) => user.email)
+    );
+    const formatNumber = (number) => {
+      if (!number) return null;
+      return new Intl.NumberFormat("en-US").format(number);
+    };
+    async function fetchPackageInfo(packageName) {
+      const communityNodeAttributes = await nodeTypesStore.getCommunityNodeAttributes(
+        activeViewStack.communityNodeDetails?.key || ""
+      );
+      if (communityNodeAttributes) {
+        publisherName.value = communityNodeAttributes.authorName;
+        downloads.value = formatNumber(communityNodeAttributes.numberOfDownloads);
+        const packageInfo = communityNodesStore.getInstalledPackages.find(
+          (p) => p.packageName === communityNodeAttributes.packageName
+        );
+        if (!packageInfo) {
+          verified.value = true;
+        } else {
+          verified.value = packageInfo.installedVersion === communityNodeAttributes.npmVersion;
+        }
+        return;
+      }
+      const url = `https://registry.npmjs.org/${packageName}`;
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          captureException(new Error("Could not get metadata for package"), { extra: { packageName } });
+          return;
+        }
+        const data = await response.json();
+        const publisher = data.maintainers?.[0]?.name;
+        publisherName.value = publisher;
+        const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+        const downloadsUrl = `https://api.npmjs.org/downloads/range/2022-01-01:${today}/${packageName}`;
+        const downloadsResponse = await fetch(downloadsUrl);
+        if (!downloadsResponse.ok) {
+          captureException(new Error("Could not get downloads for package"), {
+            extra: { packageName }
+          });
+          return;
+        }
+        const downloadsData = await downloadsResponse.json();
+        if (!downloadsData.downloads || !downloadsData.downloads.length) return;
+        const total = downloadsData.downloads.reduce((sum, day) => sum + day.downloads, 0);
+        downloads.value = formatNumber(total);
+      } catch (error) {
+        captureException(error, { extra: { packageName } });
+      }
+    }
+    onMounted(async () => {
+      if (communityNodeDetails?.packageName) {
+        await fetchPackageInfo(communityNodeDetails.packageName);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_FontAwesomeIcon = resolveComponent("FontAwesomeIcon");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createVNode(unref(N8nText), {
+          class: normalizeClass(_ctx.$style.description),
+          color: "text-base",
+          size: "medium"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(communityNodeDetails)?.description), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.separator)
+        }, null, 2),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.info)
+        }, [
+          verified.value ? (openBlock(), createBlock(unref(N8nTooltip), {
+            key: 0,
+            placement: "top"
+          }, {
+            content: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.approved")), 1)
+            ]),
+            default: withCtx(() => [
+              createBaseVNode("div", null, [
+                createVNode(_component_FontAwesomeIcon, {
+                  class: normalizeClass(_ctx.$style.tooltipIcon),
+                  icon: "check-circle"
+                }, null, 8, ["class"]),
+                createVNode(unref(N8nText), {
+                  color: "text-light",
+                  size: "xsmall",
+                  bold: "",
+                  "data-test-id": "verified-tag"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.approved.label")), 1)
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })) : (openBlock(), createBlock(unref(N8nTooltip), {
+            key: 1,
+            placement: "top"
+          }, {
+            content: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.unverified")), 1)
+            ]),
+            default: withCtx(() => [
+              createBaseVNode("div", null, [
+                createVNode(_component_FontAwesomeIcon, {
+                  class: normalizeClass(_ctx.$style.tooltipIcon),
+                  icon: "cube"
+                }, null, 8, ["class"]),
+                createVNode(unref(N8nText), {
+                  color: "text-light",
+                  size: "xsmall",
+                  bold: ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.unverified.label")), 1)
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })),
+          downloads.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+            createVNode(_component_FontAwesomeIcon, {
+              class: normalizeClass(_ctx.$style.tooltipIcon),
+              icon: "download"
+            }, null, 8, ["class"]),
+            createVNode(unref(N8nText), {
+              color: "text-light",
+              size: "xsmall",
+              bold: "",
+              "data-test-id": "number-of-downloads"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.downloads", { interpolate: { downloads: downloads.value } })), 1)
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          publisherName.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+            createVNode(_component_FontAwesomeIcon, {
+              class: normalizeClass(_ctx.$style.tooltipIcon),
+              icon: "user"
+            }, null, 8, ["class"]),
+            createVNode(unref(N8nText), {
+              color: "text-light",
+              size: "xsmall",
+              bold: "",
+              "data-test-id": "publisher-name"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeInfo.publishedBy", { interpolate: { publisherName: publisherName.value } })), 1)
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true)
+        ], 2),
+        !isOwner.value && !unref(communityNodeDetails)?.installed ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.contactOwnerHint)
+        }, [
+          createVNode(unref(N8nIcon), {
+            color: "text-light",
+            icon: "info-circle",
+            size: "large"
+          }),
+          createVNode(unref(N8nText), {
+            color: "text-base",
+            size: "medium"
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("div", _hoisted_3, toDisplayString(unref(i18n).baseText("communityNodeInfo.contact.admin")), 1),
+              ownerEmailList.value.length ? (openBlock(), createBlock(unref(N8nText), {
+                key: 0,
+                bold: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(ownerEmailList.value.join(", ")), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const container$4 = "_container_1ty35_123";
+const nodeIcon$2 = "_nodeIcon_1ty35_132";
+const description = "_description_1ty35_137";
+const separator = "_separator_1ty35_141";
+const info$1 = "_info_1ty35_147";
+const tooltipIcon = "_tooltipIcon_1ty35_162";
+const contactOwnerHint = "_contactOwnerHint_1ty35_167";
+const style0$8 = {
+  container: container$4,
+  nodeIcon: nodeIcon$2,
+  description,
+  separator,
+  info: info$1,
+  tooltipIcon,
+  contactOwnerHint
+};
+const cssModules$8 = {
+  "$style": style0$8
+};
+const CommunityNodeInfo = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeFooter",
+  props: {
+    packageName: {},
+    showManage: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const router = useRouter();
+    const bugsUrl = ref(`https://registry.npmjs.org/${props.packageName}`);
+    async function openSettingsPage() {
+      await router.push({ name: VIEWS.COMMUNITY_NODES });
+    }
+    async function openIssuesPage() {
+      if (bugsUrl.value) {
+        window.open(bugsUrl.value, "_blank");
+      }
+    }
+    async function getBugsUrl(packageName) {
+      const url = `https://registry.npmjs.org/${packageName}`;
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error("Could not get metadata for package");
+        }
+        const data = await response.json();
+        if (data.bugs?.url) {
+          bugsUrl.value = data.bugs.url;
+        }
+      } catch (error) {
+        captureException(error);
+      }
+    }
+    onMounted(async () => {
+      if (props.packageName) {
+        await getBugsUrl(props.packageName);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        props.showManage ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(unref(N8nLink), {
+            theme: "text",
+            onClick: openSettingsPage
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(N8nText), {
+                size: "small",
+                color: "primary",
+                bold: ""
+              }, {
+                default: withCtx(() => _cache[0] || (_cache[0] = [
+                  createTextVNode(" Manage ")
+                ])),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(unref(N8nText), {
+            size: "small",
+            color: "primary",
+            bold: ""
+          }, {
+            default: withCtx(() => _cache[1] || (_cache[1] = [
+              createTextVNode("|")
+            ])),
+            _: 1
+          })
+        ], 64)) : createCommentVNode("", true),
+        createVNode(unref(N8nLink), {
+          theme: "text",
+          onClick: openIssuesPage
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(N8nText), {
+              size: "small",
+              color: "primary",
+              bold: ""
+            }, {
+              default: withCtx(() => _cache[2] || (_cache[2] = [
+                createTextVNode(" Report issue ")
+              ])),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ], 2);
+    };
+  }
+});
+const container$3 = "_container_18adw_123";
+const style0$7 = {
+  container: container$3
+};
+const cssModules$7 = {
+  "$style": style0$7
+};
+const CommunityNodeFooter = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ActionsMode",
   emits: ["nodeTypeSelected"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const telemetry = useTelemetry();
     const i18n2 = useI18n();
-    const { userActivated } = useUsersStore();
+    const { userActivated, isInstanceOwner } = useUsersStore();
     const { popViewStack, updateCurrentViewStack } = useViewStacks();
     const { registerKeyHook } = useKeyboardNavigation();
     const {
@@ -1266,6 +1446,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const search = computed(() => useViewStacks().activeViewStack.search);
     const subcategory = computed(() => useViewStacks().activeViewStack.subcategory);
     const rootView = computed(() => useViewStacks().activeViewStack.rootView);
+    const communityNodeDetails = computed(() => useViewStacks().activeViewStack?.communityNodeDetails);
     const placeholderTriggerActions = getPlaceholderTriggerActions(subcategory.value || "");
     const hasNoTriggerActions = computed(
       () => parseCategoryActions(
@@ -1282,6 +1463,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return result;
     });
     const isTriggerRootView = computed(() => rootView.value === TRIGGER_NODE_CREATOR_VIEW);
+    const shouldShowTriggers = computed(() => {
+      if (communityNodeDetails.value && !parsedTriggerActions.value.length) {
+        return !isNodePreviewKey(useViewStacks().activeViewStack?.items?.[0].key) && isTriggerRootView.value;
+      }
+      return isTriggerRootView.value || parsedTriggerActionsBaseline.value.length !== 0;
+    });
     registerKeyHook("ActionsKeyRight", {
       keyboardKeys: ["ArrowRight", "Enter"],
       condition: (type) => type === "action",
@@ -1314,6 +1501,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         if (actionNode) emit("nodeTypeSelected", [actionData.key, actionNode]);
       } else if (actionData?.key === OPEN_AI_NODE_TYPE && actionData?.value?.resource === "assistant" && actionData?.value?.operation === "message") {
         emit("nodeTypeSelected", [OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE]);
+      } else if (isNodePreviewKey(actionData?.key)) {
+        return;
       } else {
         emit("nodeTypeSelected", [actionData.key]);
       }
@@ -1364,13 +1553,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       const _component_n8n_info_tip = resolveComponent("n8n-info-tip");
       const _directive_n8n_html = resolveDirective("n8n-html");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.container)
+        class: normalizeClass({
+          [_ctx.$style.container]: true,
+          [_ctx.$style.containerPaddingBottom]: !communityNodeDetails.value
+        })
       }, [
-        rootView.value ? (openBlock(), createBlock(_sfc_main$6, {
-          key: 0,
+        communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeInfo, { key: 0 })) : createCommentVNode("", true),
+        rootView.value ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 1,
           "root-view": rootView.value
         }, createSlots({ _: 2 }, [
-          isTriggerRootView.value || parsedTriggerActionsBaseline.value.length !== 0 ? {
+          shouldShowTriggers.value ? {
             name: "triggers",
             fn: withCtx(() => [
               withMemo([search.value], () => createVNode(CategorizedItemsRenderer, {
@@ -1484,8 +1677,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             key: "1"
           } : void 0
         ]), 1032, ["root-view"])) : createCommentVNode("", true),
-        containsAPIAction.value ? (openBlock(), createElementBlock("div", {
-          key: 1,
+        containsAPIAction.value && !communityNodeDetails.value ? (openBlock(), createElementBlock("div", {
+          key: 2,
           class: normalizeClass(_ctx.$style.apiHint)
         }, [
           withDirectives(createBaseVNode("span", {
@@ -1498,26 +1691,36 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               })
             ]
           ])
-        ], 2)) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true),
+        communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeFooter, {
+          key: 3,
+          class: normalizeClass(_ctx.$style.communityNodeFooter),
+          "package-name": communityNodeDetails.value.packageName,
+          "show-manage": communityNodeDetails.value.installed && unref(isInstanceOwner)
+        }, null, 8, ["class", "package-name", "show-manage"])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const container = "_container_169mw_123";
-const resetSearch = "_resetSearch_169mw_129";
-const actionsEmpty = "_actionsEmpty_169mw_143";
-const apiHint = "_apiHint_169mw_151";
-const style0$4 = {
-  container,
+const container$2 = "_container_ikzr4_123";
+const containerPaddingBottom = "_containerPaddingBottom_ikzr4_129";
+const communityNodeFooter = "_communityNodeFooter_ikzr4_133";
+const resetSearch = "_resetSearch_ikzr4_137";
+const actionsEmpty = "_actionsEmpty_ikzr4_151";
+const apiHint = "_apiHint_ikzr4_159";
+const style0$6 = {
+  container: container$2,
+  containerPaddingBottom,
+  communityNodeFooter,
   resetSearch,
   actionsEmpty,
   apiHint
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$6 = {
+  "$style": style0$6
 };
-const ActionsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
-const _sfc_main$4 = {};
+const ActionsRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const _sfc_main$6 = {};
 const _hoisted_1$2 = {
   width: "75px",
   height: "75px",
@@ -1531,10 +1734,10 @@ function _sfc_render(_ctx, _cache) {
     createStaticVNode('<title>no-nodes-keyart</title><g id="Nodes-panel-prototype-V2.1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="nodes-panel-(component)" transform="translate(-2085.000000, -352.000000)"><g id="nodes_panel" transform="translate(1880.000000, 151.000000)"><g id="Panel" transform="translate(50.000000, 0.000000)"><g id="Group-3" transform="translate(105.000000, 171.000000)"><g id="no-nodes-keyart" transform="translate(50.000000, 30.000000)"><rect id="Rectangle" x="0" y="0" width="75" height="75"></rect><g id="Group" transform="translate(6.562500, 8.164062)" fill="#C4C8D1" fill-rule="nonzero"><polygon id="Rectangle" transform="translate(49.192016, 45.302553) rotate(-45.000000) translate(-49.192016, -45.302553) " points="44.5045606 32.0526802 53.8794707 32.0526802 53.8794707 58.5524261 44.5045606 58.5524261"></polygon><path id="Path" d="M48.125,23.0859375 C54.15625,23.0859375 59.0625,18.1796875 59.0625,12.1484375 C59.0625,10.3359375 58.5625,8.6484375 57.78125,7.1484375 L49.34375,15.5859375 L44.6875,10.9296875 L53.125,2.4921875 C51.625,1.7109375 49.9375,1.2109375 48.125,1.2109375 C42.09375,1.2109375 37.1875,6.1171875 37.1875,12.1484375 C37.1875,13.4296875 37.4375,14.6484375 37.84375,15.7734375 L32.0625,21.5546875 L26.5,15.9921875 L28.71875,13.7734375 L24.3125,9.3671875 L30.9375,2.7421875 C27.28125,-0.9140625 21.34375,-0.9140625 17.6875,2.7421875 L6.625,13.8046875 L11.03125,18.2109375 L2.21875,18.2109375 L1.38777878e-15,20.4296875 L11.0625,31.4921875 L13.28125,29.2734375 L13.28125,20.4296875 L17.6875,24.8359375 L19.90625,22.6171875 L25.46875,28.1796875 L2.3125,51.3359375 L8.9375,57.9609375 L44.5,22.4296875 C45.625,22.8359375 46.84375,23.0859375 48.125,23.0859375 Z"></path></g></g></g></g></g></g></g>', 2)
   ]));
 }
-const NoResultsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render]]);
+const NoResultsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render]]);
 const _hoisted_1$1 = ["textContent"];
 const _hoisted_2$1 = ["textContent"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "NoResults",
   props: {
     showIcon: { type: Boolean },
@@ -1618,37 +1821,48 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const noResults = "_noResults_17xen_123";
-const title$1 = "_title_17xen_136";
+const title$2 = "_title_17xen_136";
 const action = "_action_17xen_145";
 const request = "_request_17xen_146";
 const icon = "_icon_17xen_162";
 const external = "_external_17xen_168";
-const style0$3 = {
+const style0$5 = {
   noResults,
-  title: title$1,
+  title: title$2,
   action,
   request,
   icon,
   external
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$5 = {
+  "$style": style0$5
 };
-const NoResults = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const NoResults = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "NodesMode",
   emits: ["nodeTypeSelected"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const i18n2 = useI18n();
     const { mergedNodes, actions, onSubcategorySelected } = useNodeCreatorStore();
-    const { pushViewStack, popViewStack } = useViewStacks();
+    const { pushViewStack, popViewStack, isAiSubcategoryView } = useViewStacks();
     const { setAddedNodeActionParameters } = useActions();
     const { registerKeyHook } = useKeyboardNavigation();
     const activeViewStack = computed(() => useViewStacks().activeViewStack);
     const globalSearchItemsDiff = computed(() => useViewStacks().globalSearchItemsDiff);
-    function getFilteredActions(node) {
-      const nodeActions = actions?.[node.key] || [];
+    const communityNodesAndActions = computed(() => useNodeTypesStore().communityNodesAndActions);
+    const moreFromCommunity = computed(() => {
+      return filterAndSearchNodes(
+        communityNodesAndActions.value.mergedNodes,
+        activeViewStack.value.search ?? "",
+        isAiSubcategoryView(activeViewStack.value)
+      );
+    });
+    const isSearchResultEmpty = computed(() => {
+      return (activeViewStack.value.items || []).length === 0 && globalSearchItemsDiff.value.length + moreFromCommunity.value.length === 0;
+    });
+    function getFilteredActions(node, actions2) {
+      const nodeActions = actions2?.[node.key] || [];
       if (activeViewStack.value.subcategory === HITL_SUBCATEGORY) {
         return getHumanInTheLoopActions(nodeActions);
       }
@@ -1689,7 +1903,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         });
       }
       if (item.type === "node") {
-        const nodeActions = getFilteredActions(item);
+        let nodeActions = getFilteredActions(item, actions);
+        if (isCommunityPackageName(item.key) && !activeViewStack.value.communityNodeDetails) {
+          if (!nodeActions.length) {
+            nodeActions = getFilteredActions(item, communityNodesAndActions.value.actions);
+          }
+          const viewStack = prepareCommunityNodeDetailsViewStack(
+            item,
+            getNodeIconSource(item.properties),
+            activeViewStack.value.rootView,
+            nodeActions
+          );
+          pushViewStack(viewStack);
+          return;
+        }
         if (nodeActions.length === 1) {
           selectNodeType([item.key]);
           setAddedNodeActionParameters({
@@ -1749,7 +1976,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     function subcategoriesMapper(item) {
       if (item.type !== "node") return item;
       const hasTriggerGroup = item.properties.group.includes("trigger");
-      const nodeActions = getFilteredActions(item);
+      const nodeActions = getFilteredActions(item, actions);
       const hasActions = nodeActions.length > 0;
       if (hasTriggerGroup && hasActions) {
         if (item.properties?.codex) {
@@ -1766,7 +1993,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (item.type === "section") return true;
       if (item.type !== "node") return false;
       const hasTriggerGroup = item.properties.group.includes("trigger");
-      const nodeActions = getFilteredActions(item);
+      const nodeActions = getFilteredActions(item, actions);
       const hasActions = nodeActions.length > 0;
       const isTriggerRootView = activeViewStack.value.rootView === TRIGGER_NODE_CREATOR_VIEW;
       if (isTriggerRootView) {
@@ -1780,7 +2007,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     function onKeySelect(activeItemId) {
       const mergedItems = flattenCreateElements([
         ...activeViewStack.value.items ?? [],
-        ...globalSearchItemsDiff.value ?? []
+        ...globalSearchItemsDiff.value ?? [],
+        ...moreFromCommunity.value ?? []
       ]);
       const item = mergedItems.find((i) => i.uuid === activeItemId);
       if (!item) return;
@@ -1803,7 +2031,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.items),
           onSelected
         }, createSlots({ _: 2 }, [
-          (activeViewStack.value.items || []).length === 0 && globalSearchItemsDiff.value.length === 0 ? {
+          isSearchResultEmpty.value ? {
             name: "empty",
             fn: withCtx(() => [
               createVNode(NoResults, {
@@ -1821,20 +2049,209 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           key: 0,
           elements: globalSearchItemsDiff.value,
           category: unref(i18n2).baseText("nodeCreator.categoryNames.otherCategories"),
-          onSelected
+          onSelected,
+          expanded: true
+        }, null, 8, ["elements", "category"])) : createCommentVNode("", true),
+        moreFromCommunity.value.length > 0 ? (openBlock(), createBlock(CategorizedItemsRenderer, {
+          key: 1,
+          elements: moreFromCommunity.value,
+          category: unref(i18n2).baseText("nodeCreator.categoryNames.moreFromCommunity"),
+          onSelected,
+          expanded: true
         }, null, 8, ["elements", "category"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 const items = "_items_1i9xd_123";
-const style0$2 = {
+const style0$4 = {
   items
 };
+const cssModules$4 = {
+  "$style": style0$4
+};
+const NodesRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeDetails",
+  setup(__props) {
+    const { activeViewStack, pushViewStack, popViewStack, getAllNodeCreateElements } = useViewStacks();
+    const { communityNodeDetails } = activeViewStack;
+    const loading = ref(false);
+    const communityNodesStore = useCommunityNodesStore();
+    const nodeCreatorStore = useNodeCreatorStore();
+    const toast = useToast();
+    const isOwner = computed(() => useUsersStore().isInstanceOwner);
+    const updateViewStack = (key) => {
+      const installedNodeKey = removePreviewToken(key);
+      const installedNode = getAllNodeCreateElements().find((node) => node.key === installedNodeKey);
+      if (installedNode) {
+        const nodeActions = nodeCreatorStore.actions?.[installedNode.key] || [];
+        popViewStack();
+        const viewStack = prepareCommunityNodeDetailsViewStack(
+          installedNode,
+          getNodeIconSource(installedNode.properties),
+          activeViewStack.rootView,
+          nodeActions
+        );
+        pushViewStack(viewStack, {
+          transitionDirection: "none"
+        });
+      } else {
+        const viewStack = { ...activeViewStack };
+        viewStack.communityNodeDetails.installed = true;
+        pushViewStack(activeViewStack, { resetStacks: true });
+      }
+    };
+    const updateStoresAndViewStack = async (key) => {
+      await useNodeTypesStore().getNodeTypes();
+      await useCredentialsStore().fetchCredentialTypes(true);
+      updateViewStack(key);
+      nodeCreatorStore.removeNodeFromMergedNodes(key);
+    };
+    const getNpmVersion = async (key) => {
+      const communityNodeAttributes = await useNodeTypesStore().getCommunityNodeAttributes(key);
+      if (communityNodeAttributes) {
+        return communityNodeAttributes.npmVersion;
+      }
+      return void 0;
+    };
+    const onInstall = async () => {
+      if (isOwner.value && activeViewStack.communityNodeDetails && !communityNodeDetails?.installed) {
+        const { key, packageName } = activeViewStack.communityNodeDetails;
+        try {
+          loading.value = true;
+          await communityNodesStore.installPackage(packageName, true, await getNpmVersion(key));
+          await updateStoresAndViewStack(key);
+          toast.showMessage({
+            title: i18n.baseText("settings.communityNodes.messages.install.success"),
+            type: "success"
+          });
+        } catch (error) {
+          toast.showError(error, i18n.baseText("settings.communityNodes.messages.install.error"));
+        } finally {
+          loading.value = false;
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_NodeIcon = _sfc_main$n;
+      const _component_FontAwesomeIcon = resolveComponent("FontAwesomeIcon");
+      const _component_N8nButton = resolveComponent("N8nButton");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.title)
+          }, [
+            unref(communityNodeDetails)?.nodeIcon ? (openBlock(), createBlock(_component_NodeIcon, {
+              key: 0,
+              class: normalizeClass(_ctx.$style.nodeIcon),
+              "icon-source": unref(communityNodeDetails).nodeIcon,
+              circle: false,
+              "show-tooltip": false
+            }, null, 8, ["class", "icon-source"])) : createCommentVNode("", true),
+            createBaseVNode("span", null, toDisplayString(unref(communityNodeDetails)?.title), 1)
+          ], 2),
+          createBaseVNode("div", null, [
+            unref(communityNodeDetails)?.installed ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.installed)
+            }, [
+              createVNode(_component_FontAwesomeIcon, {
+                class: normalizeClass(_ctx.$style.installedIcon),
+                icon: "cube"
+              }, null, 8, ["class"]),
+              createVNode(unref(N8nText), {
+                color: "text-light",
+                size: "small",
+                bold: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(i18n).baseText("communityNodeDetails.installed")), 1)
+                ]),
+                _: 1
+              })
+            ], 2)) : isOwner.value ? (openBlock(), createBlock(_component_N8nButton, {
+              key: 1,
+              loading: loading.value,
+              disabled: loading.value,
+              label: "Install Node",
+              size: "small",
+              onClick: onInstall,
+              "data-test-id": "install-community-node-button"
+            }, null, 8, ["loading", "disabled"])) : createCommentVNode("", true)
+          ])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const container$1 = "_container_1eqm0_123";
+const header$1 = "_header_1eqm0_131";
+const title$1 = "_title_1eqm0_137";
+const nodeIcon$1 = "_nodeIcon_1eqm0_145";
+const installedIcon = "_installedIcon_1eqm0_150";
+const installed = "_installed_1eqm0_150";
+const style0$3 = {
+  container: container$1,
+  header: header$1,
+  title: title$1,
+  nodeIcon: nodeIcon$1,
+  installedIcon,
+  installed
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const CommunityNodeDetails = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "CommunityNodeDocsLink",
+  props: {
+    packageName: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const openCommunityNodeDocsPage = () => {
+      const newTab = window.open(`https://www.npmjs.com/package/${props.packageName}`, "_blank");
+      if (newTab) newTab.opener = null;
+    };
+    return (_ctx, _cache) => {
+      const _component_FontAwesomeIcon = resolveComponent("FontAwesomeIcon");
+      return openBlock(), createBlock(unref(N8nLink), {
+        theme: "text",
+        onClick: openCommunityNodeDocsPage,
+        class: normalizeClass(_ctx.$style.container),
+        title: unref(i18n).baseText("communityNodesDocsLink.link.title")
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(N8nText), {
+            size: "small",
+            bold: "",
+            style: { "margin-right": "5px" }
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(i18n).baseText("communityNodesDocsLink.title")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(_component_FontAwesomeIcon, { icon: "external-link-alt" })
+        ]),
+        _: 1
+      }, 8, ["class", "title"]);
+    };
+  }
+});
+const container = "_container_x2no6_123";
+const style0$2 = {
+  container
+};
 const cssModules$2 = {
   "$style": style0$2
 };
-const NodesRenderer = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const CommunityNodeDocsLink = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
 const _hoisted_1 = ["textContent"];
 const _hoisted_2 = ["textContent"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -1846,15 +2263,31 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const { pushViewStack, popViewStack, updateCurrentViewStack } = useViewStacks();
     const { setActiveItemIndex, attachKeydownEvent, detachKeydownEvent } = useKeyboardNavigation();
     const nodeCreatorStore = useNodeCreatorStore();
+    const { isInstanceOwner } = useUsersStore();
     const activeViewStack = computed(() => useViewStacks().activeViewStack);
+    const communityNodeDetails = computed(() => activeViewStack.value.communityNodeDetails);
     const viewStacks = computed(() => useViewStacks().viewStacks);
     const isActionsMode = computed(() => useViewStacks().activeViewStackMode === "actions");
-    const searchPlaceholder = computed(
-      () => isActionsMode.value ? i18n2.baseText("nodeCreator.actionsCategory.searchActions", {
-        interpolate: { node: activeViewStack.value.title }
-      }) : i18n2.baseText("nodeCreator.searchBar.searchNodes")
-    );
+    const searchPlaceholder = computed(() => {
+      let node = activeViewStack.value?.title;
+      if (communityNodeDetails.value) {
+        node = communityNodeDetails.value.title;
+      }
+      if (isActionsMode.value) {
+        return i18n2.baseText("nodeCreator.actionsCategory.searchActions", {
+          interpolate: { node }
+        });
+      }
+      return i18n2.baseText("nodeCreator.searchBar.searchNodes");
+    });
+    const showSearchBar = computed(() => {
+      if (activeViewStack.value.communityNodeDetails) return false;
+      return activeViewStack.value.hasSearch;
+    });
     const nodeCreatorView = computed(() => useNodeCreatorStore().selectedView);
+    const isCommunityNodeActionsMode = computed(() => {
+      return communityNodeDetails.value && isActionsMode.value && activeViewStack.value.subcategory;
+    });
     function getDefaultActiveIndex(search = "") {
       if (activeViewStack.value.mode === "actions") {
         return 1;
@@ -1963,7 +2396,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     size: "2x"
                   }, null, 8, ["class"])
                 ], 2)) : createCommentVNode("", true),
-                activeViewStack.value.nodeIcon ? (openBlock(), createBlock(_sfc_main$h, {
+                activeViewStack.value.nodeIcon ? (openBlock(), createBlock(_sfc_main$n, {
                   key: 1,
                   class: normalizeClass(_ctx.$style.nodeIcon),
                   "icon-source": activeViewStack.value.nodeIcon,
@@ -1975,7 +2408,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   key: 2,
                   class: normalizeClass(_ctx.$style.title),
                   textContent: toDisplayString(activeViewStack.value.title)
-                }, null, 10, _hoisted_1)) : createCommentVNode("", true)
+                }, null, 10, _hoisted_1)) : createCommentVNode("", true),
+                communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeDocsLink, {
+                  key: 3,
+                  "package-name": communityNodeDetails.value.packageName
+                }, null, 8, ["package-name"])) : createCommentVNode("", true)
               ], 2),
               activeViewStack.value.subtitle ? (openBlock(), createElementBlock("p", {
                 key: 0,
@@ -1983,13 +2420,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 textContent: toDisplayString(activeViewStack.value.subtitle)
               }, null, 10, _hoisted_2)) : createCommentVNode("", true)
             ], 2),
-            activeViewStack.value.hasSearch ? (openBlock(), createBlock(SearchBar, {
+            showSearchBar.value ? (openBlock(), createBlock(SearchBar, {
               key: 0,
               class: normalizeClass(_ctx.$style.searchBar),
               placeholder: searchPlaceholder.value ? searchPlaceholder.value : unref(i18n2).baseText("nodeCreator.searchBar.searchNodes"),
               "model-value": activeViewStack.value.search,
               "onUpdate:modelValue": onSearch
             }, null, 8, ["class", "placeholder", "model-value"])) : createCommentVNode("", true),
+            communityNodeDetails.value ? (openBlock(), createBlock(CommunityNodeDetails, { key: 1 })) : createCommentVNode("", true),
+            communityNodeDetails.value && !isActionsMode.value ? (openBlock(), createBlock(CommunityNodeInfo, { key: 2 })) : createCommentVNode("", true),
             createBaseVNode("div", {
               class: normalizeClass(_ctx.$style.renderedItems)
             }, [
@@ -2003,7 +2442,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 key: 2,
                 "root-view": nodeCreatorView.value
               }, _ctx.$attrs), null, 16, ["root-view"]))
-            ], 2)
+            ], 2),
+            communityNodeDetails.value && !isCommunityNodeActionsMode.value ? (openBlock(), createBlock(CommunityNodeFooter, {
+              key: 3,
+              "package-name": communityNodeDetails.value.packageName,
+              "show-manage": communityNodeDetails.value.installed && unref(isInstanceOwner)
+            }, null, 8, ["package-name", "show-manage"])) : createCommentVNode("", true)
           ], 34))
         ]),
         _: 1
@@ -2165,7 +2609,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             [_ctx.$style.active]: showScrim.value
           })
         }, null, 2),
-        _ctx.active ? (openBlock(), createBlock(_sfc_main$i, {
+        _ctx.active ? (openBlock(), createBlock(_sfc_main$o, {
           key: 0,
           class: normalizeClass(_ctx.$style.close),
           type: "secondary",