n8n-editor-ui 1.85.2 → 1.87.0

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

@@ -1,10 +1,9 @@
-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 { aZ as inject, a_ 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, b0 as normalizeProps, b1 as guardReactiveProps, b2 as resolveDynamicComponent, b3 as mergeProps, b4 as VueMarkdown, F as Fragment, D as renderList, b5 as markdownLink, b6 as useFileDialog, b7 as onUnmounted, B as normalizeStyle, aC as withDirectives, b8 as vModelText, H as withKeys, w as withCtx, I as watch, h as resolveComponent, l as createTextVNode, b9 as N8nText, ba as useClipboard, a as useToast, c as useI18n$1, aS as N8nTooltip, bb as N8nButton, aU as _sfc_main$i, aW as createSlots, aL as useStorage, bc as watchEffect, y as onBeforeUnmount, K as useDebounce, bd as provide, be as useProvideTooltipAppendTo, bf as IsInPiPWindowSymbol, bg as isEmpty, bh as get, bi as usePinnedData, ak as useMessage, al 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 NodeConnectionTypes, bv as CHAT_TRIGGER_NODE_TYPE$1, U as useWorkflowsStore, bw as useNodeTypesStore, a2 as useCanvasStore, b as useRouter, bx as useNodeHelpers, by as useRunWorkflow, V as VIEWS, bz as LOGS_PANEL_STATE, bA as useTemplateRef, bB as N8nResizeWrapper, ai as useTelemetry, bC as _sfc_main$k, bD as I18nT, bE as N8nIcon, au as useNDVStore, bF as ElTree, bG as N8nRadioButtons, z as nextTick, bH as useStyles, p as useSettingsStore } from "./index-DD7Wuhk5.js";
+import { H as HighlightJS, R as RunDataAi, f as formatTokenUsageCount, _ as _sfc_main$j, g as getSubtreeTotalConsumedTokens, a as getTreeNodeData, c as createAiData, b as getTotalConsumedTokens } from "./RunDataAi-B_EadpzG.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-CVPKhr9F.js";
+import { t as toTime, a as toDayMonth } from "./dateFormatter-C7xnNKzY.js";
+import { u as upperFirst } from "./useCanvasOperations-DCaSrD1N.js";
+import "./useExecutionHelpers-BVY9xXbG.js";
 function bash(hljs) {
   const regex = hljs.regex;
   const VAR = {};
@@ -2605,7 +2604,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$h = /* @__PURE__ */ defineComponent({
   __name: "ChatFile",
   props: {
     file: {},
@@ -2655,7 +2654,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$h, [["__scopeId", "data-v-70b9370d"]]);
 const _hoisted_1$6 = {
   key: 0,
   class: "chat-message-actions"
@@ -2664,7 +2663,7 @@ const _hoisted_2$3 = {
   key: 2,
   class: "chat-message-files"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     message: {}
@@ -2730,8 +2729,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           try {
             const dataURL = await readFileAsDataURL(file);
             fileSources.value[file.name] = dataURL;
-          } catch (error) {
-            console.error("Error reading file:", error);
+          } catch (error2) {
+            console.error("Error reading file:", error2);
           }
         }
       }
@@ -2846,7 +2845,7 @@ const _hoisted_7 = {
   key: 0,
   class: "chat-files"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     placeholder: { default: "inputPlaceholder" }
@@ -3051,8 +3050,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$f, [["__scopeId", "data-v-9f775274"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "MessageTyping",
   props: {
     animation: { default: "bouncing" }
@@ -3077,7 +3076,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$g), {
         ref_key: "messageContainer",
         ref: messageContainer,
         class: normalizeClass(classes.value),
@@ -3100,12 +3099,15 @@ const _hoisted_1$2 = {
   key: 0,
   class: "empty-container"
 };
-const _hoisted_2$1 = { class: "empty" };
+const _hoisted_2$1 = {
+  class: "empty",
+  "data-test-id": "chat-messages-empty"
+};
 const _hoisted_3 = {
   key: 1,
   class: "chat-messages-list"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "MessagesList",
   props: {
     messages: {},
@@ -3147,13 +3149,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$g, {
             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$g, {
             key: message.id,
             ref_for: true,
             ref_key: "messageComponents",
@@ -3166,12 +3168,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$e, { key: 0 })) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionTooltip",
   props: {
     placement: {
@@ -3206,17 +3208,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$7 = "_container_pqtqf_123";
+const icon$2 = "_icon_pqtqf_129";
+const style0$9 = {
+  container: container$7,
+  icon: icon$2
 };
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$9 = {
+  "$style": style0$9
 };
-const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$9]]);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionAction",
   props: {
     label: {
@@ -3257,17 +3259,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$6 = "_container_u1r1u_123";
+const icon$1 = "_icon_u1r1u_129";
+const style0$8 = {
+  container: container$6,
+  icon: icon$1
 };
-const cssModules$6 = {
-  "$style": style0$6
+const cssModules$8 = {
+  "$style": style0$8
 };
-const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$8]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PanelHeader",
   props: {
     title: {}
@@ -3280,9 +3282,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 +3301,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$5 = "_container_u9nuz_123";
+const title = "_title_u9nuz_144";
+const actions$1 = "_actions_u9nuz_149";
+const style0$7 = {
+  container: container$5,
   title,
   actions: actions$1
 };
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$7 = {
+  "$style": style0$7
 };
-const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
+const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$7]]);
 const _hoisted_1$1 = ["onClick"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
   props: {
     pastChatMessages: {},
@@ -3392,6 +3401,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }, [
         _ctx.isNewLogsEnabled ? (openBlock(), createBlock(PanelHeader, {
           key: 0,
+          "data-test-id": "chat-header",
           title: unref(locale).baseText("chat.window.title"),
           onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
         }, {
@@ -3422,7 +3432,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$i), {
                   class: normalizeClass(_ctx.$style.headerButton),
                   "data-test-id": "refresh-session-button",
                   outline: "",
@@ -3462,7 +3472,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$e), {
+            createVNode(unref(_sfc_main$i), {
               class: normalizeClass(_ctx.$style.headerButton),
               "data-test-id": "refresh-session-button",
               outline: "",
@@ -3472,7 +3482,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$i), {
               key: 0,
               class: normalizeClass(_ctx.$style.headerButton),
               outline: "",
@@ -3487,7 +3497,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           key: 2,
           class: normalizeClass(_ctx.$style.chatBody)
         }, [
-          createVNode(_sfc_main$9, {
+          createVNode(_sfc_main$d, {
             messages: _ctx.messages,
             class: normalizeClass(_ctx.$style.messages),
             "empty-text": _ctx.isNewLogsEnabled ? unref(locale).baseText("chat.window.chat.emptyChatMessage.v2") : void 0
@@ -3568,17 +3578,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$6 = {
   chat: chat$2,
   chatHeader,
   chatTitle,
@@ -3590,13 +3600,13 @@ const style0$4 = {
   messages,
   messagesInput
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$6 = {
+  "$style": style0$6
 };
-const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
+const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$6]]);
 const _hoisted_1 = { class: "meta" };
 const _hoisted_2 = { key: 0 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ChatLogsPanel",
   props: {
     node: {},
@@ -3643,17 +3653,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$5 = {
   logsHeader,
   logsWrapper,
   logsTitle,
   logs: logs$1,
   actions
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$5 = {
+  "$style": style0$5
 };
-const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$5]]);
 const LOCAL_STORAGE_PANEL_HEIGHT = "N8N_CANVAS_CHAT_HEIGHT";
 const LOCAL_STORAGE_PANEL_WIDTH = "N8N_CANVAS_CHAT_WIDTH";
 const MAX_WIDTH_PERCENTAGE = 0.8;
@@ -3809,12 +3819,9 @@ function usePiPWindow({
 }
 function useChatMessaging({
   chatTrigger,
-  connectedNode,
   messages: messages2,
   sessionId: sessionId2,
-  workflow,
   executionResultData,
-  getWorkflowResultDataByNodeName,
   onRunChatWorkflow
 }) {
   const locale = useI18n$1();
@@ -3975,31 +3982,11 @@ function useChatMessaging({
     messages2.value.push(newMessage);
     await startWorkflowWithMessage(newMessage.text, files);
   }
-  function getChatMessages() {
-    if (!connectedNode.value) return [];
-    const connectedMemoryInputs = workflow.value.connectionsByDestinationNode?.[connectedNode.value.name]?.[NodeConnectionTypes.AiMemory];
-    if (!connectedMemoryInputs) return [];
-    const memoryConnection = (connectedMemoryInputs ?? []).find((i) => (i ?? []).length > 0)?.[0];
-    if (!memoryConnection) return [];
-    const nodeResultData = getWorkflowResultDataByNodeName(memoryConnection.node);
-    const memoryOutputData = (nodeResultData ?? []).map(
-      (data) => get(data, ["data", NodeConnectionTypes.AiMemory, 0, 0, "json"])
-    ).find((data) => data && data.action === "saveContext");
-    return (memoryOutputData?.chatHistory ?? []).map((message, index) => {
-      return {
-        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-        text: message.kwargs.content,
-        id: `preload__${index}`,
-        sender: last(message.id) === "HumanMessage" ? "user" : "bot"
-      };
-    });
-  }
   return {
     previousMessageIndex,
     isLoading: computed(() => isLoading.value),
     sendMessage,
-    extractResponseMessage,
-    getChatMessages
+    extractResponseMessage
   };
 }
 function useChatTrigger({
@@ -4080,7 +4067,7 @@ function useChatState(isDisabled, onWindowResize) {
   const currentSessionId = ref(v4().replace(/-/g, ""));
   const canvasNodes = computed(() => workflowsStore.allNodes);
   const allConnections = computed(() => workflowsStore.allConnections);
-  const chatPanelState = computed(() => workflowsStore.chatPanelState);
+  const logsPanelState = computed(() => workflowsStore.logsPanelState);
   const workflow = computed(() => workflowsStore.getCurrentWorkflow());
   const {
     chatTriggerNode,
@@ -4095,14 +4082,11 @@ function useChatState(isDisabled, onWindowResize) {
     getNodeByName: workflowsStore.getNodeByName,
     getNodeType: nodeTypesStore.getNodeType
   });
-  const { sendMessage, getChatMessages, isLoading } = useChatMessaging({
+  const { sendMessage, isLoading } = useChatMessaging({
     chatTrigger: chatTriggerNode,
-    connectedNode,
     messages: messages2,
     sessionId: currentSessionId,
-    workflow,
     executionResultData: computed(() => workflowsStore.getWorkflowExecution?.data?.resultData),
-    getWorkflowResultDataByNodeName: workflowsStore.getWorkflowResultDataByNodeName,
     onRunChatWorkflow
   });
   function createChatConfig(params) {
@@ -4145,14 +4129,11 @@ function useChatState(isDisabled, onWindowResize) {
   provide(ChatSymbol, chatConfig);
   provide(ChatOptionsSymbol, chatOptions);
   watch(
-    () => chatPanelState.value,
+    () => logsPanelState.value,
     (state) => {
-      if (state !== "closed") {
+      if (state !== LOGS_PANEL_STATE.CLOSED) {
         setChatTriggerNode();
         setConnectedNode();
-        if (messages2.value.length === 0) {
-          messages2.value = getChatMessages();
-        }
         setTimeout(() => {
           onWindowResize();
           chatEventBus.emit("focusInput");
@@ -4227,7 +4208,7 @@ function useChatState(isDisabled, onWindowResize) {
     displayExecution
   };
 }
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "CanvasChat",
   setup(__props, { expose: __expose }) {
     const workflowsStore = useWorkflowsStore();
@@ -4237,7 +4218,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const pipContainer = useTemplateRef("pipContainer");
     const pipContent2 = useTemplateRef("pipContent");
     const workflow = computed(() => workflowsStore.getCurrentWorkflow());
-    const chatPanelState = computed(() => workflowsStore.chatPanelState);
+    const chatPanelState = computed(() => workflowsStore.logsPanelState);
     const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
     const resultData = computed(() => workflowsStore.getWorkflowRunData);
     const telemetry = useTelemetry();
@@ -4255,13 +4236,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       initialWidth: window.document.body.offsetWidth * 0.8,
       container: pipContainer,
       content: pipContent2,
-      shouldPopOut: computed(() => chatPanelState.value === "floating"),
+      shouldPopOut: computed(() => chatPanelState.value === LOGS_PANEL_STATE.FLOATING),
       onRequestClose: () => {
-        if (chatPanelState.value === "closed") {
+        if (chatPanelState.value === LOGS_PANEL_STATE.CLOSED) {
           return;
         }
         telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPanelState("attached");
+        workflowsStore.setPreferPoppedOutLogsView(false);
       }
     });
     const {
@@ -4280,14 +4261,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       workflow
     });
     const closePanel = () => {
-      workflowsStore.setPanelState("closed");
+      workflowsStore.toggleLogsPanelOpen(false);
     };
     function onPopOut() {
       telemetry.track("User toggled log view", { new_state: "floating" });
-      workflowsStore.setPanelState("floating");
+      workflowsStore.toggleLogsPanelOpen(true);
+      workflowsStore.setPreferPoppedOutLogsView(true);
     }
     watchEffect(() => {
-      canvasStore.setPanelHeight(chatPanelState.value === "attached" ? height.value : 0);
+      canvasStore.setPanelHeight(chatPanelState.value === LOGS_PANEL_STATE.ATTACHED ? height.value : 0);
     });
     return (_ctx, _cache) => {
       const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
@@ -4302,9 +4284,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }, [
           unref(chatTriggerNode) ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
             key: 0,
-            "is-resizing-enabled": !unref(isPoppedOut) && chatPanelState.value === "attached",
+            "is-resizing-enabled": !unref(isPoppedOut) && chatPanelState.value === unref(LOGS_PANEL_STATE).ATTACHED,
             "supported-directions": ["top"],
-            class: normalizeClass([_ctx.$style.resizeWrapper, chatPanelState.value === "closed" && _ctx.$style.empty]),
+            class: normalizeClass([_ctx.$style.resizeWrapper, chatPanelState.value === unref(LOGS_PANEL_STATE).CLOSED && _ctx.$style.empty]),
             height: unref(height),
             style: normalizeStyle(unref(rootStyles)),
             onResize: unref(onResizeDebounced)
@@ -4316,7 +4298,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
                 tabindex: "0"
               }, [
-                chatPanelState.value !== "closed" ? (openBlock(), createElementBlock("div", {
+                chatPanelState.value !== unref(LOGS_PANEL_STATE).CLOSED ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   class: normalizeClass(_ctx.$style.chatResizer)
                 }, [
@@ -4390,49 +4372,398 @@ 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$4 = "_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$4 = {
   resizeWrapper: resizeWrapper$1,
   pipContent: pipContent$1,
   empty: empty$1,
-  container: container$2,
+  container: container$4,
   chatResizer,
   footer,
   chat: chat$1,
   inner,
   logs
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$4 = {
+  "$style": style0$4
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$4]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "ConsumedTokenCountText",
+  props: {
+    consumedTokens: {}
+  },
+  setup(__props) {
+    const locale = useI18n$1();
+    return (_ctx, _cache) => {
+      const _component_ConsumedTokensDetails = _sfc_main$j;
+      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$5 = /* @__PURE__ */ defineComponent({
+  __name: "LogsOverviewRow",
+  props: {
+    data: {},
+    node: {},
+    isSelected: { type: Boolean },
+    shouldShowConsumedTokens: { type: Boolean },
+    isCompact: { type: Boolean }
+  },
+  emits: ["toggleExpanded", "triggerPartialExecution", "openNdv"],
+  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 isSettled = computed(
+      () => runData.value?.executionStatus && ["crashed", "error", "success"].includes(runData.value.executionStatus)
+    );
+    const isError = computed(() => !!runData.value?.error);
+    const startedAtText = computed(() => {
+      const time = new Date(runData.value?.startTime ?? 0);
+      return locale.baseText("logs.overview.body.started", {
+        interpolate: {
+          time: `${toTime(time, true)}, ${toDayMonth(time)}`
+        }
+      });
+    });
+    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$k;
+      return node.value !== void 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass({
+          [_ctx.$style.container]: true,
+          [_ctx.$style.compact]: props.isCompact,
+          [_ctx.$style.error]: isError.value,
+          [_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)),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.background),
+          style: normalizeStyle({ "--indent-depth": depth.value })
+        }, null, 6),
+        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),
+          color: isError.value ? "danger" : void 0
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(node.value.name), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "color"]),
+        createVNode(unref(N8nText), {
+          tag: "div",
+          color: "text-light",
+          size: "small",
+          class: normalizeClass(_ctx.$style.timeTook)
+        }, {
+          default: withCtx(() => [
+            isSettled.value && runData.value ? (openBlock(), createBlock(unref(I18nT), {
+              key: 0,
+              keypath: "logs.overview.body.summaryText"
+            }, {
+              status: withCtx(() => [
+                isError.value ? (openBlock(), createBlock(unref(N8nText), {
+                  key: 0,
+                  color: "danger",
+                  bold: true,
+                  size: "small"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(N8nIcon), {
+                      icon: "exclamation-triangle",
+                      class: normalizeClass(_ctx.$style.errorIcon)
+                    }, null, 8, ["class"]),
+                    createTextVNode(toDisplayString(unref(upperFirst)(runData.value.executionStatus)), 1)
+                  ]),
+                  _: 1
+                })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(unref(upperFirst)(runData.value.executionStatus)), 1)
+                ], 64))
+              ]),
+              time: withCtx(() => [
+                createTextVNode(toDisplayString(unref(locale).displayTimer(runData.value.executionTime, true)), 1)
+              ]),
+              _: 1
+            })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(unref(upperFirst)(runData.value?.executionStatus)), 1)
+            ], 64))
+          ]),
+          _: 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$6, {
+              key: 0,
+              "consumed-tokens": subtreeConsumedTokens.value
+            }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class"])) : createCommentVNode("", true),
+        isError.value && _ctx.isCompact ? (openBlock(), createBlock(unref(N8nIcon), {
+          key: 1,
+          size: "medium",
+          color: "danger",
+          icon: "exclamation-triangle",
+          class: normalizeClass(_ctx.$style.compactErrorIcon)
+        }, null, 8, ["class"])) : createCommentVNode("", true),
+        createVNode(unref(_sfc_main$i), {
+          type: "secondary",
+          size: "small",
+          icon: "play",
+          style: { "color": "var(--color-text-base)" },
+          "aria-label": unref(locale).baseText("logs.overview.body.run"),
+          class: normalizeClass([_ctx.$style.partialExecutionButton, depth.value > 0 ? _ctx.$style.unavailable : ""]),
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("triggerPartialExecution", props.data), ["stop"]))
+        }, null, 8, ["aria-label", "class"]),
+        createVNode(unref(_sfc_main$i), {
+          type: "secondary",
+          size: "small",
+          icon: "external-link-alt",
+          style: { "color": "var(--color-text-base)" },
+          class: normalizeClass(_ctx.$style.openNdvButton),
+          "aria-label": unref(locale).baseText("logs.overview.body.open"),
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("openNdv", props.data), ["stop"]))
+        }, null, 8, ["class", "aria-label"]),
+        !_ctx.isCompact || props.data.children.length > 0 ? (openBlock(), createBlock(unref(N8nButton), {
+          key: 2,
+          type: "secondary",
+          size: "small",
+          square: true,
+          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),
+          "aria-label": unref(locale).baseText("logs.overview.body.toggleRow"),
+          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("toggleExpanded", props.node), ["stop"]))
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(N8nIcon), {
+              size: "medium",
+              icon: props.node.expanded ? "chevron-down" : "chevron-up"
+            }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["style", "class", "aria-label"])) : createCommentVNode("", true)
+      ], 2)) : createCommentVNode("", true);
+    };
+  }
+});
+const container$3 = "_container_1jepl_123";
+const background = "_background_1jepl_140";
+const selected = "_selected_1jepl_149";
+const error = "_error_1jepl_152";
+const indent = "_indent_1jepl_156";
+const connectorCurved = "_connectorCurved_1jepl_165";
+const connectorStraight = "_connectorStraight_1jepl_175";
+const icon = "_icon_1jepl_184";
+const name = "_name_1jepl_190";
+const timeTook = "_timeTook_1jepl_195";
+const errorIcon = "_errorIcon_1jepl_200";
+const compact = "_compact_1jepl_204";
+const startedAt = "_startedAt_1jepl_211";
+const consumedTokens = "_consumedTokens_1jepl_220";
+const compactErrorIcon = "_compactErrorIcon_1jepl_233";
+const partialExecutionButton = "_partialExecutionButton_1jepl_241";
+const openNdvButton = "_openNdvButton_1jepl_242";
+const unavailable = "_unavailable_1jepl_252";
+const toggleButton = "_toggleButton_1jepl_260";
+const style0$3 = {
+  container: container$3,
+  background,
+  selected,
+  error,
+  indent,
+  connectorCurved,
+  connectorStraight,
+  icon,
+  name,
+  timeTook,
+  errorIcon,
+  compact,
+  startedAt,
+  consumedTokens,
+  compactErrorIcon,
+  partialExecutionButton,
+  openNdvButton,
+  unavailable,
+  toggleButton
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const LogsOverviewRow = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewPanel",
   props: {
-    isOpen: { type: Boolean }
+    isOpen: { type: Boolean },
+    node: {},
+    selected: {}
   },
-  emits: ["clickHeader"],
+  emits: ["clickHeader", "select"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const locale = useI18n$1();
+    const telemetry = useTelemetry();
     const workflowsStore = useWorkflowsStore();
+    const router = useRouter();
+    const runWorkflow = useRunWorkflow({ router });
+    const ndvStore = useNDVStore();
     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))
+    );
     function onClearExecutionData() {
       workflowsStore.setWorkflowExecutionData(null);
       nodeHelpers.updateNodesExecutionIssues();
     }
+    function handleClickNode(clicked) {
+      if (__props.selected?.node === clicked.node && __props.selected.runIndex === clicked.runIndex) {
+        emit("select", void 0);
+        return;
+      }
+      emit("select", { 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 handleSwitchView(value) {
+      emit(
+        "select",
+        value === "overview" || executionTree.value.length === 0 ? void 0 : executionTree.value[0]
+      );
+    }
+    function handleToggleExpanded(treeNode) {
+      treeNode.expanded = !treeNode.expanded;
+    }
+    async function handleOpenNdv(treeNode) {
+      ndvStore.setActiveNodeName(treeNode.node);
+      await nextTick(() => ndvStore.setOutputRunIndex(treeNode.runIndex));
+    }
+    async function handleTriggerPartialExecution(treeNode) {
+      await runWorkflow.runWorkflow({ destinationNode: treeNode.node });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.container)
+        class: normalizeClass(_ctx.$style.container),
+        "data-test-id": "logs-overview"
       }, [
         createVNode(PanelHeader, {
           title: unref(locale).baseText("logs.overview.header.title"),
+          "data-test-id": "logs-overview-header",
           onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
         }, {
           actions: withCtx(() => [
@@ -4462,45 +4793,209 @@ 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 : ""]),
+          "data-test-id": "logs-overview-body"
         }, [
-          createVNode(unref(N8nText), {
+          isEmpty2.value ? (openBlock(), createBlock(unref(N8nText), {
+            key: 0,
             tag: "p",
             size: "medium",
             color: "text-base",
-            class: normalizeClass(_ctx.$style.emptyText)
+            class: normalizeClass(_ctx.$style.emptyText),
+            "data-test-id": "logs-overview-empty"
           }, {
             default: withCtx(() => [
               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$6, {
+                  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,
+              "node-key": "id",
+              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(LogsOverviewRow, {
+                  data,
+                  node: elTreeNode,
+                  "is-selected": data.node === _ctx.selected?.node && data.runIndex === _ctx.selected?.runIndex,
+                  "is-compact": _ctx.selected !== void 0,
+                  "should-show-consumed-tokens": consumedTokens2.value.totalTokens > 0,
+                  onToggleExpanded: handleToggleExpanded,
+                  onOpenNdv: handleOpenNdv,
+                  onTriggerPartialExecution: handleTriggerPartialExecution
+                }, null, 8, ["data", "node", "is-selected", "is-compact", "should-show-consumed-tokens"])
+              ]),
+              _: 1
+            }, 8, ["class", "data"])) : createCommentVNode("", true),
+            createVNode(unref(N8nRadioButtons), {
+              size: "medium",
+              class: normalizeClass(_ctx.$style.switchViewButtons),
+              "model-value": _ctx.selected ? "details" : "overview",
+              options: switchViewOptions.value,
+              "onUpdate:modelValue": handleSwitchView
+            }, 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$2 = "_container_1xpvq_123";
+const content$1 = "_content_1xpvq_133";
+const empty = "_empty_1xpvq_142";
+const emptyText = "_emptyText_1xpvq_147";
+const scrollable = "_scrollable_1xpvq_152";
+const summary = "_summary_1xpvq_159";
+const tree = "_tree_1xpvq_171";
+const switchViewButtons = "_switchViewButtons_1xpvq_178";
+const style0$2 = {
+  container: container$2,
+  content: content$1,
+  empty,
+  emptyText,
+  scrollable,
+  summary,
+  tree,
+  switchViewButtons
+};
+const cssModules$2 = {
+  "$style": style0$2
+};
+const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$2]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "LogDetailsPanel",
+  props: {
+    isOpen: { type: Boolean }
+  },
+  emits: ["clickHeader"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container),
+        "data-test-id": "log-details"
+      }, [
+        createVNode(PanelHeader, {
+          title: "Log details",
+          "data-test-id": "logs-details-header",
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
+        }, {
+          actions: withCtx(() => [
+            renderSlot(_ctx.$slots, "actions")
+          ]),
+          _: 3
+        }),
+        _ctx.isOpen ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.content),
+          "data-test-id": "logs-details-body"
+        }, null, 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const container$1 = "_container_q8l5j_123";
+const content = "_content_q8l5j_133";
 const style0$1 = {
   container: container$1,
-  content,
-  empty,
-  emptyText
+  content
 };
 const cssModules$1 = {
   "$style": style0$1
 };
-const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$1]]);
+const LogsDetailsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$1]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "LogsPanelActions",
+  props: {
+    panelState: {},
+    showPopOutButton: { type: Boolean }
+  },
+  emits: ["popOut", "toggleOpen"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const appStyles = useStyles();
+    const locales = useI18n$1();
+    const tooltipZIndex = computed(() => appStyles.APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON + 100);
+    const popOutButtonText = computed(() => locales.baseText("runData.panel.actions.popOut"));
+    const toggleButtonText = computed(
+      () => locales.baseText(
+        __props.panelState === LOGS_PANEL_STATE.ATTACHED ? "runData.panel.actions.collapse" : "runData.panel.actions.open"
+      )
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.showPopOutButton ? (openBlock(), createBlock(unref(N8nTooltip), {
+          key: 0,
+          "z-index": tooltipZIndex.value,
+          content: popOutButtonText.value
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(_sfc_main$i), {
+              icon: "pop-out",
+              type: "secondary",
+              size: "small",
+              "icon-size": "medium",
+              "aria-label": popOutButtonText.value,
+              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("popOut"), ["stop"]))
+            }, null, 8, ["aria-label"])
+          ]),
+          _: 1
+        }, 8, ["z-index", "content"])) : createCommentVNode("", true),
+        _ctx.panelState !== unref(LOGS_PANEL_STATE).FLOATING ? (openBlock(), createBlock(unref(N8nTooltip), {
+          key: 1,
+          "z-index": tooltipZIndex.value,
+          content: toggleButtonText.value
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(_sfc_main$i), {
+              type: "secondary",
+              size: "small",
+              "icon-size": "medium",
+              icon: _ctx.panelState === unref(LOGS_PANEL_STATE).ATTACHED ? "chevron-down" : "chevron-up",
+              "aria-label": toggleButtonText.value,
+              style: { "color": "var(--color-text-base)" },
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("toggleOpen"), ["stop"]))
+            }, null, 8, ["icon", "aria-label"])
+          ]),
+          _: 1
+        }, 8, ["z-index", "content"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "LogsPanel",
   setup(__props) {
     const workflowsStore = useWorkflowsStore();
     const canvasStore = useCanvasStore();
-    const panelState = computed(() => workflowsStore.chatPanelState);
+    const panelState = computed(() => workflowsStore.logsPanelState);
     const container2 = ref();
+    const selectedLogEntry = ref(void 0);
     const pipContainer = useTemplateRef("pipContainer");
     const pipContent2 = useTemplateRef("pipContent");
     const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
@@ -4509,51 +5004,53 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         (node) => [CHAT_TRIGGER_NODE_TYPE$1, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
       )
     );
-    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 appStyles = useStyles();
-    const tooltipZIndex = computed(() => appStyles.APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON + 100);
+    const { currentSessionId, messages: messages2, connectedNode, sendMessage, refreshSession, displayExecution } = useChatState(ref(false), onWindowResize);
+    const isLogDetailsOpen = computed(() => selectedLogEntry.value !== void 0);
     const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
       initialHeight: 400,
       initialWidth: window.document.body.offsetWidth * 0.8,
       container: pipContainer,
       content: pipContent2,
-      shouldPopOut: computed(() => panelState.value === "floating"),
+      shouldPopOut: computed(() => panelState.value === LOGS_PANEL_STATE.FLOATING),
       onRequestClose: () => {
-        if (panelState.value === "closed") {
+        if (panelState.value === LOGS_PANEL_STATE.CLOSED) {
           return;
         }
         telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPanelState("attached");
+        workflowsStore.setPreferPoppedOutLogsView(false);
       }
     });
-    function handleToggleOpen() {
-      if (panelState.value === "closed") {
-        telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPanelState("attached");
-      } else {
-        telemetry.track("User toggled log view", { new_state: "collapsed" });
-        workflowsStore.setPanelState("closed");
-      }
+    const logsPanelActionsProps = computed(() => ({
+      panelState: panelState.value,
+      showPopOutButton: canPopOut.value && !isPoppedOut.value,
+      onPopOut,
+      onToggleOpen
+    }));
+    function onToggleOpen() {
+      workflowsStore.toggleLogsPanelOpen();
+      telemetry.track("User toggled log view", {
+        new_state: panelState.value === LOGS_PANEL_STATE.CLOSED ? "attached" : "collapsed"
+      });
     }
     function handleClickHeader() {
-      if (panelState.value === "closed") {
+      if (panelState.value === LOGS_PANEL_STATE.CLOSED) {
         telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPanelState("attached");
+        workflowsStore.toggleLogsPanelOpen(true);
       }
     }
+    function handleSelectLogEntry(selected2) {
+      selectedLogEntry.value = selected2;
+    }
     function onPopOut() {
       telemetry.track("User toggled log view", { new_state: "floating" });
-      workflowsStore.setPanelState("floating");
+      workflowsStore.toggleLogsPanelOpen(true);
+      workflowsStore.setPreferPoppedOutLogsView(true);
     }
     watch([panelState, height], ([state, h]) => {
       canvasStore.setPanelHeight(
-        state === "floating" ? 0 : state === "attached" ? h : 32
+        state === LOGS_PANEL_STATE.FLOATING ? 0 : state === LOGS_PANEL_STATE.ATTACHED ? h : 32
       );
     });
     return (_ctx, _cache) => {
@@ -4569,21 +5066,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           createVNode(unref(N8nResizeWrapper), {
             height: unref(height),
             "supported-directions": ["top"],
-            "is-resizing-enabled": panelState.value === "attached",
+            "is-resizing-enabled": panelState.value === unref(LOGS_PANEL_STATE).ATTACHED,
             style: normalizeStyle(unref(rootStyles)),
-            class: normalizeClass([_ctx.$style.resizeWrapper, panelState.value === "closed" ? "" : _ctx.$style.isOpen]),
+            class: normalizeClass([_ctx.$style.resizeWrapper, panelState.value === unref(LOGS_PANEL_STATE).CLOSED ? "" : _ctx.$style.isOpen]),
             onResize: unref(onResizeDebounced)
           }, {
             default: withCtx(() => [
               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,
                   "supported-directions": ["right"],
-                  "is-resizing-enabled": panelState.value !== "closed",
+                  "is-resizing-enabled": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
                   width: unref(chatWidth),
                   class: normalizeClass(_ctx.$style.chat),
                   window: unref(pipWindow),
@@ -4592,13 +5090,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   default: withCtx(() => [
                     createVNode(ChatMessagesPanel, {
                       "data-test-id": "canvas-chat",
-                      "is-open": panelState.value !== "closed",
+                      "is-open": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
                       messages: unref(messages2),
                       "session-id": unref(currentSessionId),
                       "past-chat-messages": previousChatMessages.value,
                       "show-close-button": false,
                       "is-new-logs-enabled": true,
-                      onClose: handleToggleOpen,
+                      onClose: onToggleOpen,
                       onRefreshSession: unref(refreshSession),
                       onDisplayExecution: unref(displayExecution),
                       onSendMessage: unref(sendMessage),
@@ -4608,48 +5106,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   _: 1
                 }, 8, ["is-resizing-enabled", "width", "class", "window", "onResize"])) : createCommentVNode("", true),
                 createVNode(LogsOverviewPanel, {
-                  "is-open": panelState.value !== "closed",
+                  class: normalizeClass(_ctx.$style.logsOverview),
+                  "is-open": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
+                  node: unref(connectedNode),
+                  selected: selectedLogEntry.value,
+                  onClickHeader: handleClickHeader,
+                  onSelect: handleSelectLogEntry
+                }, {
+                  actions: withCtx(() => [
+                    !isLogDetailsOpen.value ? (openBlock(), createBlock(_sfc_main$2, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 8, ["class", "is-open", "node", "selected"]),
+                selectedLogEntry.value ? (openBlock(), createBlock(LogsDetailsPanel, {
+                  key: 1,
+                  class: normalizeClass(_ctx.$style.logDetails),
+                  "is-open": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
                   onClickHeader: handleClickHeader
                 }, {
                   actions: withCtx(() => [
-                    unref(canPopOut) && !unref(isPoppedOut) ? (openBlock(), createBlock(unref(N8nTooltip), {
-                      key: 0,
-                      "z-index": tooltipZIndex.value,
-                      content: unref(locales).baseText("runData.panel.actions.popOut")
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(_sfc_main$e), {
-                          icon: "pop-out",
-                          type: "secondary",
-                          size: "small",
-                          "icon-size": "medium",
-                          onClick: onPopOut
-                        })
-                      ]),
-                      _: 1
-                    }, 8, ["z-index", "content"])) : createCommentVNode("", true),
-                    panelState.value !== "floating" ? (openBlock(), createBlock(unref(N8nTooltip), {
-                      key: 1,
-                      "z-index": tooltipZIndex.value,
-                      content: unref(locales).baseText(
-                        panelState.value === "attached" ? "runData.panel.actions.collapse" : "runData.panel.actions.open"
-                      )
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(_sfc_main$e), {
-                          type: "secondary",
-                          size: "small",
-                          "icon-size": "medium",
-                          icon: panelState.value === "attached" ? "chevron-down" : "chevron-up",
-                          style: { "color": "var(--color-text-base)" },
-                          onClick: withModifiers(handleToggleOpen, ["stop"])
-                        }, null, 8, ["icon"])
-                      ]),
-                      _: 1
-                    }, 8, ["z-index", "content"])) : createCommentVNode("", true)
+                    isLogDetailsOpen.value ? (openBlock(), createBlock(_sfc_main$2, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
                   ]),
                   _: 1
-                }, 8, ["is-open"])
+                }, 8, ["class", "is-open"])) : createCommentVNode("", true)
               ], 2)
             ]),
             _: 1
@@ -4659,17 +5138,21 @@ 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_1zlbj_124";
+const pipContent = "_pipContent_1zlbj_129";
+const isOpen = "_isOpen_1zlbj_142";
+const container = "_container_1zlbj_149";
+const chat = "_chat_1zlbj_158";
+const logsOverview = "_logsOverview_1zlbj_164";
+const logDetails = "_logDetails_1zlbj_171";
 const style0 = {
   resizeWrapper,
   pipContent,
   isOpen,
   container,
-  chat
+  chat,
+  logsOverview,
+  logDetails
 };
 const cssModules = {
   "$style": style0