n8n-editor-ui 1.85.2 → 1.86.0

package/dist/assets/{CanvasChatSwitch-E9vu2jW8.js → CanvasChatSwitch-BTInPgKl.js}

@@ -1,10 +1,10 @@
-import { aY as inject, aZ as isRef, i as createElementBlock, g as openBlock, k as createBaseVNode, d as defineComponent, q as computed, j as createVNode, e as createBlock, f as createCommentVNode, m as unref, t as toDisplayString, J as withModifiers, _ as _export_sfc, a_ as toRefs, r as ref, o as onMounted, n as normalizeClass, x as renderSlot, a$ as normalizeProps, b0 as guardReactiveProps, b1 as resolveDynamicComponent, b2 as mergeProps, b3 as VueMarkdown, F as Fragment, D as renderList, b4 as markdownLink, b5 as useFileDialog, b6 as onUnmounted, B as normalizeStyle, aB as withDirectives, b7 as vModelText, H as withKeys, w as withCtx, I as watch, h as resolveComponent, l as createTextVNode, b8 as useClipboard, a as useToast, c as useI18n$1, aR as N8nTooltip, b9 as N8nButton, aT as _sfc_main$e, aV as createSlots, aK as useStorage, ba as watchEffect, y as onBeforeUnmount, K as useDebounce, bb as provide, bc as useProvideTooltipAppendTo, bd as IsInPiPWindowSymbol, be as NodeConnectionTypes, bf as get, bg as last, bh as isEmpty, aj as useMessage, ak as MODAL_CONFIRM, bi as v4, bj as MANUAL_CHAT_TRIGGER_NODE_TYPE, bk as CHAT_TRIGGER_NODE_TYPE, bl as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, bm as AI_SUBCATEGORY, bn as AI_CATEGORY_AGENTS, bo as AI_CATEGORY_CHAINS, bp as AI_CODE_NODE_TYPE, bq as getNodeInputs, br as getConnectionTypes, bs as getNodeOutputs, bt as CHAT_TRIGGER_NODE_TYPE$1, T as useWorkflowsStore, bu as useNodeTypesStore, a1 as useCanvasStore, b as useRouter, bv as useNodeHelpers, V as VIEWS, bw as useTemplateRef, bx as N8nResizeWrapper, ah as useTelemetry, by as N8nText, bz as useStyles, p as useSettingsStore } from "./index-DZljH0cm.js";
-import { H as HighlightJS, R as RunDataAi } from "./RunDataAi-C-tu9GrI.js";
-import { u as usePinnedData } from "./useCanvasOperations-2Ca5hPmu.js";
-import { u as useRunWorkflow } from "./useRunWorkflow-sGIs6NeH.js";
-import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-D8unhL-H.js";
-import "./useExecutionHelpers-CgD9G_XU.js";
-import "./pushConnection.store-DHLcz9cC.js";
+import { aY as inject, aZ as isRef, i as createElementBlock, g as openBlock, k as createBaseVNode, d as defineComponent, q as computed, j as createVNode, e as createBlock, f as createCommentVNode, m as unref, t as toDisplayString, J as withModifiers, _ as _export_sfc, a_ as toRefs, r as ref, o as onMounted, n as normalizeClass, x as renderSlot, a$ as normalizeProps, b0 as guardReactiveProps, b1 as resolveDynamicComponent, b2 as mergeProps, b3 as VueMarkdown, F as Fragment, D as renderList, b4 as markdownLink, b5 as useFileDialog, b6 as onUnmounted, B as normalizeStyle, aB as withDirectives, b7 as vModelText, H as withKeys, w as withCtx, I as watch, h as resolveComponent, l as createTextVNode, b8 as N8nText, b9 as useClipboard, a as useToast, c as useI18n$1, aR as N8nTooltip, ba as N8nButton, aT as _sfc_main$g, aV as createSlots, aK as useStorage, bb as watchEffect, y as onBeforeUnmount, K as useDebounce, bc as provide, bd as useProvideTooltipAppendTo, be as IsInPiPWindowSymbol, bf as NodeConnectionTypes, bg as get, bh as last, bi as isEmpty, aj as useMessage, ak as MODAL_CONFIRM, bj as v4, bk as MANUAL_CHAT_TRIGGER_NODE_TYPE, bl as CHAT_TRIGGER_NODE_TYPE, bm as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, bn as AI_SUBCATEGORY, bo as AI_CATEGORY_AGENTS, bp as AI_CATEGORY_CHAINS, bq as AI_CODE_NODE_TYPE, br as getNodeInputs, bs as getConnectionTypes, bt as getNodeOutputs, bu as CHAT_TRIGGER_NODE_TYPE$1, T as useWorkflowsStore, bv as useNodeTypesStore, a1 as useCanvasStore, b as useRouter, bw as useNodeHelpers, V as VIEWS, bx as useTemplateRef, by as N8nResizeWrapper, ah as useTelemetry, bz as _sfc_main$i, bA as ElTree, bB as N8nRadioButtons, bC as useStyles, p as useSettingsStore } from "./index-CkOV8f0Z.js";
+import { H as HighlightJS, R as RunDataAi, f as formatTokenUsageCount, _ as _sfc_main$h, g as getSubtreeTotalConsumedTokens, a as getTreeNodeData, c as createAiData, b as getTotalConsumedTokens } from "./RunDataAi-CQE0VYut.js";
+import { u as usePinnedData, a as upperFirst } from "./useCanvasOperations-FyzGfva5.js";
+import { u as useRunWorkflow } from "./useRunWorkflow-DnbQqqcB.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-fESJZE5R.js";
+import "./useExecutionHelpers-Bm91b8wb.js";
+import "./pushConnection.store-Cb2TGyrZ.js";
 function bash(hljs) {
   const regex = hljs.regex;
   const VAR = {};
@@ -2605,7 +2605,7 @@ function render$2(_ctx, _cache) {
 }
 const IconPreview = { name: "mdi-openInNew", render: render$2 };
 const _hoisted_1$7 = { class: "chat-file-name" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ChatFile",
   props: {
     file: {},
@@ -2655,7 +2655,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-70b9370d"]]);
+const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-70b9370d"]]);
 const _hoisted_1$6 = {
   key: 0,
   class: "chat-message-actions"
@@ -2664,7 +2664,7 @@ const _hoisted_2$3 = {
   key: 2,
   class: "chat-message-files"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     message: {}
@@ -2846,7 +2846,7 @@ const _hoisted_7 = {
   key: 0,
   class: "chat-files"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     placeholder: { default: "inputPlaceholder" }
@@ -3051,8 +3051,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-9f775274"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9f775274"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "MessageTyping",
   props: {
     animation: { default: "bouncing" }
@@ -3077,7 +3077,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       messageContainer.value?.scrollToView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$c), {
+      return openBlock(), createBlock(unref(_sfc_main$e), {
         ref_key: "messageContainer",
         ref: messageContainer,
         class: normalizeClass(classes.value),
@@ -3105,7 +3105,7 @@ const _hoisted_3 = {
   key: 1,
   class: "chat-messages-list"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "MessagesList",
   props: {
     messages: {},
@@ -3147,13 +3147,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         ])
       ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(initialMessages), (initialMessage) => {
-          return openBlock(), createBlock(_sfc_main$c, {
+          return openBlock(), createBlock(_sfc_main$e, {
             key: initialMessage.id,
             message: initialMessage
           }, null, 8, ["message"]);
         }), 128)),
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.messages, (message) => {
-          return openBlock(), createBlock(_sfc_main$c, {
+          return openBlock(), createBlock(_sfc_main$e, {
             key: message.id,
             ref_for: true,
             ref_key: "messageComponents",
@@ -3166,12 +3166,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["message"]);
         }), 128)),
-        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$a, { key: 0 })) : createCommentVNode("", true)
+        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$c, { key: 0 })) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionTooltip",
   props: {
     placement: {
@@ -3206,17 +3206,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$5 = "_container_pqtqf_123";
-const icon$1 = "_icon_pqtqf_129";
-const style0$7 = {
-  container: container$5,
-  icon: icon$1
+const container$6 = "_container_pqtqf_123";
+const icon$2 = "_icon_pqtqf_129";
+const style0$8 = {
+  container: container$6,
+  icon: icon$2
 };
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$8 = {
+  "$style": style0$8
 };
-const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$8]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionAction",
   props: {
     label: {
@@ -3257,17 +3257,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$4 = "_container_u1r1u_123";
-const icon = "_icon_u1r1u_129";
-const style0$6 = {
-  container: container$4,
-  icon
+const container$5 = "_container_u1r1u_123";
+const icon$1 = "_icon_u1r1u_129";
+const style0$7 = {
+  container: container$5,
+  icon: icon$1
 };
-const cssModules$6 = {
-  "$style": style0$6
+const cssModules$7 = {
+  "$style": style0$7
 };
-const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$7]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PanelHeader",
   props: {
     title: {}
@@ -3280,9 +3280,16 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.container),
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
       }, [
-        createBaseVNode("span", {
-          class: normalizeClass(_ctx.$style.title)
-        }, toDisplayString(_ctx.title), 3),
+        createVNode(unref(N8nText), {
+          class: normalizeClass(_ctx.$style.title),
+          bold: true,
+          size: "small"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.actions)
         }, [
@@ -3292,20 +3299,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$3 = "_container_oxcgo_123";
-const title = "_title_oxcgo_145";
-const actions$1 = "_actions_oxcgo_151";
-const style0$5 = {
-  container: container$3,
+const container$4 = "_container_u9nuz_123";
+const title = "_title_u9nuz_144";
+const actions$1 = "_actions_u9nuz_149";
+const style0$6 = {
+  container: container$4,
   title,
   actions: actions$1
 };
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$6 = {
+  "$style": style0$6
 };
-const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
+const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$6]]);
 const _hoisted_1$1 = ["onClick"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
   props: {
     pastChatMessages: {},
@@ -3422,7 +3429,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               content: unref(locale).baseText("chat.window.session.resetSession")
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$e), {
+                createVNode(unref(_sfc_main$g), {
                   class: normalizeClass(_ctx.$style.headerButton),
                   "data-test-id": "refresh-session-button",
                   outline: "",
@@ -3462,7 +3469,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$e), {
+            createVNode(unref(_sfc_main$g), {
               class: normalizeClass(_ctx.$style.headerButton),
               "data-test-id": "refresh-session-button",
               outline: "",
@@ -3472,7 +3479,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               title: unref(locale).baseText("chat.window.session.reset"),
               onClick: onRefreshSession
             }, null, 8, ["class", "title"]),
-            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$e), {
+            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$g), {
               key: 0,
               class: normalizeClass(_ctx.$style.headerButton),
               outline: "",
@@ -3487,7 +3494,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           key: 2,
           class: normalizeClass(_ctx.$style.chatBody)
         }, [
-          createVNode(_sfc_main$9, {
+          createVNode(_sfc_main$b, {
             messages: _ctx.messages,
             class: normalizeClass(_ctx.$style.messages),
             "empty-text": _ctx.isNewLogsEnabled ? unref(locale).baseText("chat.window.chat.emptyChatMessage.v2") : void 0
@@ -3568,17 +3575,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const chat$2 = "_chat_fs224_123";
-const chatHeader = "_chatHeader_fs224_148";
-const chatTitle = "_chatTitle_fs224_161";
-const session = "_session_fs224_165";
-const sessionId = "_sessionId_fs224_173";
-const copyable = "_copyable_fs224_179";
-const headerButton = "_headerButton_fs224_183";
-const chatBody = "_chatBody_fs224_188";
-const messages = "_messages_fs224_197";
-const messagesInput = "_messagesInput_fs224_208";
-const style0$4 = {
+const chat$2 = "_chat_14fd2_123";
+const chatHeader = "_chatHeader_14fd2_148";
+const chatTitle = "_chatTitle_14fd2_161";
+const session = "_session_14fd2_165";
+const sessionId = "_sessionId_14fd2_173";
+const copyable = "_copyable_14fd2_179";
+const headerButton = "_headerButton_14fd2_183";
+const chatBody = "_chatBody_14fd2_188";
+const messages = "_messages_14fd2_197";
+const messagesInput = "_messagesInput_14fd2_208";
+const style0$5 = {
   chat: chat$2,
   chatHeader,
   chatTitle,
@@ -3590,13 +3597,13 @@ const style0$4 = {
   messages,
   messagesInput
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$5 = {
+  "$style": style0$5
 };
-const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
+const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$5]]);
 const _hoisted_1 = { class: "meta" };
 const _hoisted_2 = { key: 0 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ChatLogsPanel",
   props: {
     node: {},
@@ -3643,17 +3650,17 @@ const logsWrapper = "_logsWrapper_1n9n2_140";
 const logsTitle = "_logsTitle_1n9n2_149";
 const logs$1 = "_logs_1n9n2_123";
 const actions = "_actions_1n9n2_159";
-const style0$3 = {
+const style0$4 = {
   logsHeader,
   logsWrapper,
   logsTitle,
   logs: logs$1,
   actions
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$4 = {
+  "$style": style0$4
 };
-const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$4]]);
 const LOCAL_STORAGE_PANEL_HEIGHT = "N8N_CANVAS_CHAT_HEIGHT";
 const LOCAL_STORAGE_PANEL_WIDTH = "N8N_CANVAS_CHAT_WIDTH";
 const MAX_WIDTH_PERCENTAGE = 0.8;
@@ -4227,7 +4234,7 @@ function useChatState(isDisabled, onWindowResize) {
     displayExecution
   };
 }
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "CanvasChat",
   setup(__props, { expose: __expose }) {
     const workflowsStore = useWorkflowsStore();
@@ -4390,23 +4397,222 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 const resizeWrapper$1 = "_resizeWrapper_1aajp_124";
 const pipContent$1 = "_pipContent_1aajp_129";
 const empty$1 = "_empty_1aajp_140";
-const container$2 = "_container_1aajp_146";
+const container$3 = "_container_1aajp_146";
 const chatResizer = "_chatResizer_1aajp_154";
 const footer = "_footer_1aajp_161";
 const chat$1 = "_chat_1aajp_154";
 const inner = "_inner_1aajp_180";
 const logs = "_logs_1aajp_188";
-const style0$2 = {
+const style0$3 = {
   resizeWrapper: resizeWrapper$1,
   pipContent: pipContent$1,
   empty: empty$1,
-  container: container$2,
+  container: container$3,
   chatResizer,
   footer,
   chat: chat$1,
   inner,
   logs
 };
+const cssModules$3 = {
+  "$style": style0$3
+};
+const __unplugin_components_0$1 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "ConsumedTokenCountText",
+  props: {
+    consumedTokens: {}
+  },
+  setup(__props) {
+    const locale = useI18n$1();
+    return (_ctx, _cache) => {
+      const _component_ConsumedTokensDetails = _sfc_main$h;
+      return _ctx.consumedTokens !== void 0 ? (openBlock(), createBlock(unref(N8nTooltip), {
+        key: 0,
+        enterable: false
+      }, {
+        content: withCtx(() => [
+          createVNode(_component_ConsumedTokensDetails, { "consumed-tokens": _ctx.consumedTokens }, null, 8, ["consumed-tokens"])
+        ]),
+        default: withCtx(() => [
+          createBaseVNode("span", null, toDisplayString(unref(locale).baseText("runData.aiContentBlock.tokens", {
+            interpolate: {
+              count: unref(formatTokenUsageCount)(_ctx.consumedTokens, "total")
+            }
+          })), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "LogsOverviewRow",
+  props: {
+    data: {},
+    node: {},
+    isSelected: { type: Boolean },
+    shouldShowConsumedTokens: { type: Boolean }
+  },
+  emits: ["toggleExpanded"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const locale = useI18n$1();
+    const workflowsStore = useWorkflowsStore();
+    const nodeTypeStore = useNodeTypesStore();
+    const node = computed(() => workflowsStore.nodesByName[props.data.node]);
+    const runData = computed(
+      () => node.value ? workflowsStore.workflowExecutionData?.data?.resultData.runData[node.value.name]?.[props.data.runIndex] : void 0
+    );
+    const type = computed(() => node.value ? nodeTypeStore.getNodeType(node.value.type) : void 0);
+    const depth = computed(() => (props.node.level ?? 1) - 1);
+    const timeTookText = computed(() => {
+      const finalStatuses = ["crashed", "error", "success"];
+      const status = runData.value?.executionStatus;
+      if (!status) {
+        return "";
+      }
+      const statusText = upperFirst(status);
+      return finalStatuses.includes(status) ? locale.baseText("logs.overview.body.summaryText", {
+        interpolate: {
+          status: statusText,
+          time: locale.displayTimer(runData.value.executionTime, true)
+        }
+      }) : statusText;
+    });
+    const startedAtText = computed(
+      () => locale.baseText("logs.overview.body.started", {
+        interpolate: {
+          time: new Date(runData.value?.startTime ?? 0).toISOString()
+          // TODO: confirm date format
+        }
+      })
+    );
+    const subtreeConsumedTokens = computed(
+      () => props.shouldShowConsumedTokens ? getSubtreeTotalConsumedTokens(props.data) : void 0
+    );
+    function isLastChild(level) {
+      let parent = props.data.parent;
+      let data = props.data;
+      for (let i = 0; i < depth.value - level; i++) {
+        data = parent;
+        parent = parent?.parent;
+      }
+      const siblings = parent?.children ?? [];
+      return data === siblings[siblings.length - 1];
+    }
+    return (_ctx, _cache) => {
+      const _component_NodeIcon = _sfc_main$i;
+      return node.value !== void 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass({ [_ctx.$style.container]: true, [_ctx.$style.selected]: props.isSelected })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(depth.value, (level) => {
+          return openBlock(), createElementBlock("div", {
+            key: level,
+            class: normalizeClass({
+              [_ctx.$style.indent]: true,
+              [_ctx.$style.connectorCurved]: level === depth.value,
+              [_ctx.$style.connectorStraight]: !isLastChild(level)
+            })
+          }, null, 2);
+        }), 128)),
+        createVNode(_component_NodeIcon, {
+          "node-type": type.value,
+          size: 16,
+          class: normalizeClass(_ctx.$style.icon)
+        }, null, 8, ["node-type", "class"]),
+        createVNode(unref(N8nText), {
+          tag: "div",
+          bold: true,
+          size: "small",
+          class: normalizeClass(_ctx.$style.name)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(node.value.name), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createVNode(unref(N8nText), {
+          tag: "div",
+          color: "text-light",
+          size: "small",
+          class: normalizeClass(_ctx.$style.timeTook)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(timeTookText.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createVNode(unref(N8nText), {
+          tag: "div",
+          color: "text-light",
+          size: "small",
+          class: normalizeClass(_ctx.$style.startedAt)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(startedAtText.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        subtreeConsumedTokens.value !== void 0 ? (openBlock(), createBlock(unref(N8nText), {
+          key: 0,
+          tag: "div",
+          color: "text-light",
+          size: "small",
+          class: normalizeClass(_ctx.$style.consumedTokens)
+        }, {
+          default: withCtx(() => [
+            subtreeConsumedTokens.value.totalTokens > 0 && (props.data.children.length === 0 || !props.node.expanded) ? (openBlock(), createBlock(_sfc_main$4, {
+              key: 0,
+              "consumed-tokens": subtreeConsumedTokens.value
+            }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class"])) : createCommentVNode("", true),
+        createBaseVNode("div", null, [
+          createVNode(unref(_sfc_main$g), {
+            type: "secondary",
+            size: "medium",
+            icon: props.node.expanded ? "chevron-down" : "chevron-up",
+            style: normalizeStyle({
+              visibility: props.data.children.length === 0 ? "hidden" : "",
+              color: "var(--color-text-base)"
+              // give higher specificity than the style from the component itself
+            }),
+            class: normalizeClass(_ctx.$style.toggleButton),
+            onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggleExpanded", props.node), ["stop"]))
+          }, null, 8, ["icon", "style", "class"])
+        ])
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const container$2 = "_container_16ks1_123";
+const toggleButton = "_toggleButton_16ks1_135";
+const icon = "_icon_16ks1_141";
+const selected = "_selected_16ks1_149";
+const indent = "_indent_16ks1_149";
+const connectorCurved = "_connectorCurved_16ks1_161";
+const connectorStraight = "_connectorStraight_16ks1_171";
+const name = "_name_16ks1_185";
+const timeTook = "_timeTook_16ks1_190";
+const startedAt = "_startedAt_16ks1_196";
+const consumedTokens = "_consumedTokens_16ks1_202";
+const style0$2 = {
+  container: container$2,
+  toggleButton,
+  icon,
+  selected,
+  indent,
+  connectorCurved,
+  connectorStraight,
+  name,
+  timeTook,
+  startedAt,
+  consumedTokens
+};
 const cssModules$2 = {
   "$style": style0$2
 };
@@ -4414,20 +4620,74 @@ const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cs
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewPanel",
   props: {
-    isOpen: { type: Boolean }
+    isOpen: { type: Boolean },
+    node: {}
   },
   emits: ["clickHeader"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const locale = useI18n$1();
+    const telemetry = useTelemetry();
     const workflowsStore = useWorkflowsStore();
     const nodeHelpers = useNodeHelpers();
     const isClearExecutionButtonVisible = useClearExecutionButtonVisible();
+    const workflow = computed(() => workflowsStore.getCurrentWorkflow());
+    const executionTree = computed(
+      () => __props.node ? getTreeNodeData(
+        __props.node.name,
+        workflow.value,
+        createAiData(__props.node.name, workflow.value, workflowsStore.getWorkflowResultDataByNodeName)
+      ) : []
+    );
+    const isEmpty2 = computed(() => workflowsStore.workflowExecutionData === null);
+    const switchViewOptions = computed(() => [
+      { label: locale.baseText("logs.overview.header.switch.details"), value: "details" },
+      { label: locale.baseText("logs.overview.header.switch.overview"), value: "overview" }
+    ]);
+    const executionStatusText = computed(() => {
+      const execution = workflowsStore.workflowExecutionData;
+      if (!execution) {
+        return void 0;
+      }
+      if (execution.startedAt && execution.stoppedAt) {
+        return locale.baseText("logs.overview.body.summaryText", {
+          interpolate: {
+            status: upperFirst(execution.status),
+            time: locale.displayTimer(
+              +new Date(execution.stoppedAt) - +new Date(execution.startedAt),
+              true
+            )
+          }
+        });
+      }
+      return upperFirst(execution.status);
+    });
+    const consumedTokens2 = computed(
+      () => getTotalConsumedTokens(...executionTree.value.map(getSubtreeTotalConsumedTokens))
+    );
+    const selectedRun = ref(void 0);
     function onClearExecutionData() {
       workflowsStore.setWorkflowExecutionData(null);
       nodeHelpers.updateNodesExecutionIssues();
     }
+    function handleClickNode(clicked) {
+      if (selectedRun.value?.node === clicked.node && selectedRun.value.runIndex === clicked.runIndex) {
+        selectedRun.value = void 0;
+        return;
+      }
+      selectedRun.value = { node: clicked.node, runIndex: clicked.runIndex };
+      telemetry.track("User selected node in log view", {
+        node_type: workflowsStore.nodesByName[clicked.node].type,
+        node_id: workflowsStore.nodesByName[clicked.node].id,
+        execution_id: workflowsStore.workflowExecutionData?.id,
+        workflow_id: workflow.value.id
+      });
+    }
+    function handleToggleExpanded(treeNode) {
+      treeNode.expanded = !treeNode.expanded;
+    }
     return (_ctx, _cache) => {
+      const _component_LogsOverviewRow = __unplugin_components_0;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
@@ -4462,9 +4722,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }, 8, ["title"]),
         _ctx.isOpen ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass([_ctx.$style.content, _ctx.$style.empty])
+          class: normalizeClass([_ctx.$style.content, isEmpty2.value ? _ctx.$style.empty : ""])
         }, [
-          createVNode(unref(N8nText), {
+          isEmpty2.value ? (openBlock(), createBlock(unref(N8nText), {
+            key: 0,
             tag: "p",
             size: "medium",
             color: "text-base",
@@ -4474,21 +4735,75 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString(unref(locale).baseText("logs.overview.body.empty.message")), 1)
             ]),
             _: 1
-          }, 8, ["class"])
+          }, 8, ["class"])) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(_ctx.$style.scrollable)
+          }, [
+            executionStatusText.value !== void 0 ? (openBlock(), createBlock(unref(N8nText), {
+              key: 0,
+              tag: "div",
+              color: "text-light",
+              size: "small",
+              class: normalizeClass(_ctx.$style.summary)
+            }, {
+              default: withCtx(() => [
+                createBaseVNode("span", null, toDisplayString(executionStatusText.value), 1),
+                consumedTokens2.value.totalTokens > 0 ? (openBlock(), createBlock(_sfc_main$4, {
+                  key: 0,
+                  "consumed-tokens": consumedTokens2.value
+                }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["class"])) : createCommentVNode("", true),
+            executionTree.value.length > 0 ? (openBlock(), createBlock(unref(ElTree), {
+              key: 1,
+              class: normalizeClass(_ctx.$style.tree),
+              indent: 0,
+              data: executionTree.value,
+              "expand-on-click-node": false,
+              "default-expand-all": true,
+              onNodeClick: handleClickNode
+            }, {
+              default: withCtx(({ node: elTreeNode, data }) => [
+                createVNode(_component_LogsOverviewRow, {
+                  data,
+                  node: elTreeNode,
+                  "is-selected": data.node === selectedRun.value?.node && data.runIndex === selectedRun.value?.runIndex,
+                  "should-show-consumed-tokens": consumedTokens2.value.totalTokens > 0,
+                  onToggleExpanded: handleToggleExpanded
+                }, null, 8, ["data", "node", "is-selected", "should-show-consumed-tokens"])
+              ]),
+              _: 1
+            }, 8, ["class", "data"])) : createCommentVNode("", true),
+            createVNode(unref(N8nRadioButtons), {
+              size: "medium",
+              class: normalizeClass(_ctx.$style.switchViewButtons),
+              "model-value": selectedRun.value ? "details" : "overview",
+              options: switchViewOptions.value
+            }, null, 8, ["class", "model-value", "options"])
+          ], 2))
         ], 2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const container$1 = "_container_wrmwc_123";
-const content = "_content_wrmwc_131";
-const empty = "_empty_wrmwc_135";
-const emptyText = "_emptyText_wrmwc_141";
+const container$1 = "_container_ok07h_123";
+const content = "_content_ok07h_132";
+const empty = "_empty_ok07h_141";
+const emptyText = "_emptyText_ok07h_146";
+const scrollable = "_scrollable_ok07h_151";
+const summary = "_summary_ok07h_158";
+const tree = "_tree_ok07h_170";
+const switchViewButtons = "_switchViewButtons_ok07h_177";
 const style0$1 = {
   container: container$1,
   content,
   empty,
-  emptyText
+  emptyText,
+  scrollable,
+  summary,
+  tree,
+  switchViewButtons
 };
 const cssModules$1 = {
   "$style": style0$1
@@ -4512,10 +4827,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const locales = useI18n$1();
     const telemetry = useTelemetry();
     const { rootStyles, height, chatWidth, onWindowResize, onResizeDebounced, onResizeChatDebounced } = useResize(container2);
-    const { currentSessionId, messages: messages2, sendMessage, refreshSession, displayExecution } = useChatState(
-      ref(false),
-      onWindowResize
-    );
+    const { currentSessionId, messages: messages2, connectedNode, sendMessage, refreshSession, displayExecution } = useChatState(ref(false), onWindowResize);
     const appStyles = useStyles();
     const tooltipZIndex = computed(() => appStyles.APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON + 100);
     const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
@@ -4578,7 +4890,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createBaseVNode("div", {
                 ref_key: "container",
                 ref: container2,
-                class: normalizeClass(_ctx.$style.container)
+                class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
+                tabindex: "0"
               }, [
                 hasChat.value ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
                   key: 0,
@@ -4609,6 +4922,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 }, 8, ["is-resizing-enabled", "width", "class", "window", "onResize"])) : createCommentVNode("", true),
                 createVNode(LogsOverviewPanel, {
                   "is-open": panelState.value !== "closed",
+                  node: unref(connectedNode),
                   onClickHeader: handleClickHeader
                 }, {
                   actions: withCtx(() => [
@@ -4618,7 +4932,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       content: unref(locales).baseText("runData.panel.actions.popOut")
                     }, {
                       default: withCtx(() => [
-                        createVNode(unref(_sfc_main$e), {
+                        createVNode(unref(_sfc_main$g), {
                           icon: "pop-out",
                           type: "secondary",
                           size: "small",
@@ -4636,7 +4950,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       )
                     }, {
                       default: withCtx(() => [
-                        createVNode(unref(_sfc_main$e), {
+                        createVNode(unref(_sfc_main$g), {
                           type: "secondary",
                           size: "small",
                           "icon-size": "medium",
@@ -4649,7 +4963,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     }, 8, ["z-index", "content"])) : createCommentVNode("", true)
                   ]),
                   _: 1
-                }, 8, ["is-open"])
+                }, 8, ["is-open", "node"])
               ], 2)
             ]),
             _: 1
@@ -4659,11 +4973,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const resizeWrapper = "_resizeWrapper_1brak_124";
-const pipContent = "_pipContent_1brak_129";
-const isOpen = "_isOpen_1brak_145";
-const container = "_container_1brak_152";
-const chat = "_chat_1brak_160";
+const resizeWrapper = "_resizeWrapper_4rmz8_124";
+const pipContent = "_pipContent_4rmz8_129";
+const isOpen = "_isOpen_4rmz8_142";
+const container = "_container_4rmz8_149";
+const chat = "_chat_4rmz8_158";
 const style0 = {
   resizeWrapper,
   pipContent,
@@ -4680,7 +4994,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { isNewLogsEnabled } = useSettingsStore();
     return (_ctx, _cache) => {
-      const _component_CanvasChat = __unplugin_components_0;
+      const _component_CanvasChat = __unplugin_components_0$1;
       return unref(isNewLogsEnabled) ? (openBlock(), createBlock(LogsPanel, { key: 0 })) : (openBlock(), createBlock(_component_CanvasChat, { key: 1 }));
     };
   }