n8n-editor-ui 1.86.0 → 1.87.1

package/dist/assets/{CanvasChatSwitch-BTInPgKl.js → CanvasChatSwitch-BnTApoNZ.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 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";
+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, bH as useStyles, p as useSettingsStore } from "./index-D76xStxp.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-DULZvgnn.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-CnDyjcGF.js";
+import { t as toTime, a as toDayMonth } from "./dateFormatter-Cdy8FmTT.js";
+import { u as upperFirst } from "./useCanvasOperations-CAthHfOB.js";
+import "./useExecutionHelpers-C_yBGArA.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$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ChatFile",
   props: {
     file: {},
@@ -2655,7 +2654,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__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$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     message: {}
@@ -2730,8 +2729,8 @@ const _sfc_main$e = /* @__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$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     placeholder: { default: "inputPlaceholder" }
@@ -3051,8 +3050,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9f775274"]]);
-const _sfc_main$c = /* @__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$c = /* @__PURE__ */ defineComponent({
       messageContainer.value?.scrollToView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$e), {
+      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$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "MessagesList",
   props: {
     messages: {},
@@ -3147,13 +3149,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         ])
       ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(initialMessages), (initialMessage) => {
-          return openBlock(), createBlock(_sfc_main$e, {
+          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$e, {
+          return openBlock(), createBlock(_sfc_main$g, {
             key: message.id,
             ref_for: true,
             ref_key: "messageComponents",
@@ -3166,12 +3168,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["message"]);
         }), 128)),
-        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$c, { key: 0 })) : createCommentVNode("", true)
+        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$e, { key: 0 })) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionTooltip",
   props: {
     placement: {
@@ -3206,17 +3208,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$6 = "_container_pqtqf_123";
+const container$7 = "_container_pqtqf_123";
 const icon$2 = "_icon_pqtqf_129";
-const style0$8 = {
-  container: container$6,
+const style0$9 = {
+  container: container$7,
   icon: icon$2
 };
-const cssModules$8 = {
-  "$style": style0$8
+const cssModules$9 = {
+  "$style": style0$9
 };
-const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$8]]);
-const _sfc_main$9 = /* @__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$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$5 = "_container_u1r1u_123";
+const container$6 = "_container_u1r1u_123";
 const icon$1 = "_icon_u1r1u_129";
-const style0$7 = {
-  container: container$5,
+const style0$8 = {
+  container: container$6,
   icon: icon$1
 };
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$8 = {
+  "$style": style0$8
 };
-const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$7]]);
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$8]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PanelHeader",
   props: {
     title: {}
@@ -3299,20 +3301,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$4 = "_container_u9nuz_123";
+const container$5 = "_container_u9nuz_123";
 const title = "_title_u9nuz_144";
 const actions$1 = "_actions_u9nuz_149";
-const style0$6 = {
-  container: container$4,
+const style0$7 = {
+  container: container$5,
   title,
   actions: actions$1
 };
-const cssModules$6 = {
-  "$style": style0$6
+const cssModules$7 = {
+  "$style": style0$7
 };
-const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$6]]);
+const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$7]]);
 const _hoisted_1$1 = ["onClick"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
   props: {
     pastChatMessages: {},
@@ -3399,6 +3401,7 @@ const _sfc_main$7 = /* @__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"))
         }, {
@@ -3429,7 +3432,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               content: unref(locale).baseText("chat.window.session.resetSession")
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$g), {
+                createVNode(unref(_sfc_main$i), {
                   class: normalizeClass(_ctx.$style.headerButton),
                   "data-test-id": "refresh-session-button",
                   outline: "",
@@ -3469,7 +3472,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$g), {
+            createVNode(unref(_sfc_main$i), {
               class: normalizeClass(_ctx.$style.headerButton),
               "data-test-id": "refresh-session-button",
               outline: "",
@@ -3479,7 +3482,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               title: unref(locale).baseText("chat.window.session.reset"),
               onClick: onRefreshSession
             }, null, 8, ["class", "title"]),
-            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$g), {
+            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$i), {
               key: 0,
               class: normalizeClass(_ctx.$style.headerButton),
               outline: "",
@@ -3494,7 +3497,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           key: 2,
           class: normalizeClass(_ctx.$style.chatBody)
         }, [
-          createVNode(_sfc_main$b, {
+          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
@@ -3585,7 +3588,7 @@ const headerButton = "_headerButton_14fd2_183";
 const chatBody = "_chatBody_14fd2_188";
 const messages = "_messages_14fd2_197";
 const messagesInput = "_messagesInput_14fd2_208";
-const style0$5 = {
+const style0$6 = {
   chat: chat$2,
   chatHeader,
   chatTitle,
@@ -3597,13 +3600,13 @@ const style0$5 = {
   messages,
   messagesInput
 };
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$6 = {
+  "$style": style0$6
 };
-const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$5]]);
+const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$6]]);
 const _hoisted_1 = { class: "meta" };
 const _hoisted_2 = { key: 0 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ChatLogsPanel",
   props: {
     node: {},
@@ -3650,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$4 = {
+const style0$5 = {
   logsHeader,
   logsWrapper,
   logsTitle,
   logs: logs$1,
   actions
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$5 = {
+  "$style": style0$5
 };
-const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$4]]);
+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;
@@ -3816,12 +3819,9 @@ function usePiPWindow({
 }
 function useChatMessaging({
   chatTrigger,
-  connectedNode,
   messages: messages2,
   sessionId: sessionId2,
-  workflow,
   executionResultData,
-  getWorkflowResultDataByNodeName,
   onRunChatWorkflow
 }) {
   const locale = useI18n$1();
@@ -3982,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({
@@ -4087,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,
@@ -4102,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) {
@@ -4152,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");
@@ -4234,7 +4208,7 @@ function useChatState(isDisabled, onWindowResize) {
     displayExecution
   };
 }
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "CanvasChat",
   setup(__props, { expose: __expose }) {
     const workflowsStore = useWorkflowsStore();
@@ -4244,7 +4218,7 @@ const _sfc_main$5 = /* @__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();
@@ -4262,13 +4236,13 @@ const _sfc_main$5 = /* @__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 {
@@ -4287,14 +4261,15 @@ const _sfc_main$5 = /* @__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");
@@ -4309,9 +4284,9 @@ const _sfc_main$5 = /* @__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)
@@ -4323,7 +4298,7 @@ const _sfc_main$5 = /* @__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)
                 }, [
@@ -4397,28 +4372,28 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 const resizeWrapper$1 = "_resizeWrapper_1aajp_124";
 const pipContent$1 = "_pipContent_1aajp_129";
 const empty$1 = "_empty_1aajp_140";
-const container$3 = "_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$3 = {
+const style0$4 = {
   resizeWrapper: resizeWrapper$1,
   pipContent: pipContent$1,
   empty: empty$1,
-  container: container$3,
+  container: container$4,
   chatResizer,
   footer,
   chat: chat$1,
   inner,
   logs
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$4 = {
+  "$style": style0$4
 };
-const __unplugin_components_0$1 = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
-const _sfc_main$4 = /* @__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: {}
@@ -4426,7 +4401,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const locale = useI18n$1();
     return (_ctx, _cache) => {
-      const _component_ConsumedTokensDetails = _sfc_main$h;
+      const _component_ConsumedTokensDetails = _sfc_main$j;
       return _ctx.consumedTokens !== void 0 ? (openBlock(), createBlock(unref(N8nTooltip), {
         key: 0,
         enterable: false
@@ -4446,15 +4421,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewRow",
   props: {
     data: {},
     node: {},
     isSelected: { type: Boolean },
-    shouldShowConsumedTokens: { type: Boolean }
+    shouldShowConsumedTokens: { type: Boolean },
+    isCompact: { type: Boolean }
   },
-  emits: ["toggleExpanded"],
+  emits: ["toggleExpanded", "triggerPartialExecution", "openNdv"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -4467,28 +4443,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     );
     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", {
+    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: {
-          status: statusText,
-          time: locale.displayTimer(runData.value.executionTime, true)
+          time: `${toTime(time, true)}, ${toDayMonth(time)}`
         }
-      }) : 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
     );
@@ -4503,10 +4469,15 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return data === siblings[siblings.length - 1];
     }
     return (_ctx, _cache) => {
-      const _component_NodeIcon = _sfc_main$i;
+      const _component_NodeIcon = _sfc_main$k;
       return node.value !== void 0 ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass({ [_ctx.$style.container]: true, [_ctx.$style.selected]: props.isSelected })
+        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", {
@@ -4518,6 +4489,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             })
           }, 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,
@@ -4527,13 +4502,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           tag: "div",
           bold: true,
           size: "small",
-          class: normalizeClass(_ctx.$style.name)
+          class: normalizeClass(_ctx.$style.name),
+          color: isError.value ? "danger" : void 0
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(node.value.name), 1)
           ]),
           _: 1
-        }, 8, ["class"]),
+        }, 8, ["class", "color"]),
         createVNode(unref(N8nText), {
           tag: "div",
           color: "text-light",
@@ -4541,7 +4517,36 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.timeTook)
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(timeTookText.value), 1)
+            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"]),
@@ -4564,71 +4569,124 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.consumedTokens)
         }, {
           default: withCtx(() => [
-            subtreeConsumedTokens.value.totalTokens > 0 && (props.data.children.length === 0 || !props.node.expanded) ? (openBlock(), createBlock(_sfc_main$4, {
+            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),
-        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"])
-        ])
+        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$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,
+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
+  consumedTokens,
+  compactErrorIcon,
+  partialExecutionButton,
+  openNdvButton,
+  unavailable,
+  toggleButton
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$3 = {
+  "$style": style0$3
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const LogsOverviewRow = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewPanel",
   props: {
     isOpen: { type: Boolean },
-    node: {}
+    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());
@@ -4665,17 +4723,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     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;
+      if (__props.selected?.node === clicked.node && __props.selected.runIndex === clicked.runIndex) {
+        emit("select", void 0);
         return;
       }
-      selectedRun.value = { node: clicked.node, runIndex: clicked.runIndex };
+      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,
@@ -4683,16 +4740,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         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);
+    }
+    async function handleTriggerPartialExecution(treeNode) {
+      await runWorkflow.runWorkflow({ destinationNode: treeNode.node });
+    }
     return (_ctx, _cache) => {
-      const _component_LogsOverviewRow = __unplugin_components_0;
       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(() => [
@@ -4722,14 +4792,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }, 8, ["title"]),
         _ctx.isOpen ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass([_ctx.$style.content, isEmpty2.value ? _ctx.$style.empty : ""])
+          class: normalizeClass([_ctx.$style.content, isEmpty2.value ? _ctx.$style.empty : ""]),
+          "data-test-id": "logs-overview-body"
         }, [
           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)
@@ -4748,7 +4820,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 createBaseVNode("span", null, toDisplayString(executionStatusText.value), 1),
-                consumedTokens2.value.totalTokens > 0 ? (openBlock(), createBlock(_sfc_main$4, {
+                consumedTokens2.value.totalTokens > 0 ? (openBlock(), createBlock(_sfc_main$6, {
                   key: 0,
                   "consumed-tokens": consumedTokens2.value
                 }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
@@ -4757,6 +4829,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             }, 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,
@@ -4765,21 +4838,25 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               onNodeClick: handleClickNode
             }, {
               default: withCtx(({ node: elTreeNode, data }) => [
-                createVNode(_component_LogsOverviewRow, {
+                createVNode(LogsOverviewRow, {
                   data,
                   node: elTreeNode,
-                  "is-selected": data.node === selectedRun.value?.node && data.runIndex === selectedRun.value?.runIndex,
+                  "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
-                }, null, 8, ["data", "node", "is-selected", "should-show-consumed-tokens"])
+                  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": selectedRun.value ? "details" : "overview",
-              options: switchViewOptions.value
+              "model-value": _ctx.selected ? "details" : "overview",
+              options: switchViewOptions.value,
+              "onUpdate:modelValue": handleSwitchView
             }, null, 8, ["class", "model-value", "options"])
           ], 2))
         ], 2)) : createCommentVNode("", true)
@@ -4787,17 +4864,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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,
+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,
@@ -4805,17 +4882,119 @@ const style0$1 = {
   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
+};
 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);
@@ -4824,48 +5003,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, connectedNode, sendMessage, refreshSession, displayExecution } = useChatState(ref(false), onWindowResize);
-    const appStyles = useStyles();
-    const tooltipZIndex = computed(() => appStyles.APP_Z_INDEXES.ASK_ASSISTANT_FLOATING_BUTTON + 100);
+    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) => {
@@ -4881,9 +5065,9 @@ 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(() => [
@@ -4896,7 +5080,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 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),
@@ -4905,13 +5089,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),
@@ -4921,49 +5105,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$g), {
-                          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$g), {
-                          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", "node"])
+                }, 8, ["class", "is-open"])) : createCommentVNode("", true)
               ], 2)
             ]),
             _: 1
@@ -4973,17 +5137,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 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
@@ -4994,7 +5162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const { isNewLogsEnabled } = useSettingsStore();
     return (_ctx, _cache) => {
-      const _component_CanvasChat = __unplugin_components_0$1;
+      const _component_CanvasChat = __unplugin_components_0;
       return unref(isNewLogsEnabled) ? (openBlock(), createBlock(LogsPanel, { key: 0 })) : (openBlock(), createBlock(_component_CanvasChat, { key: 1 }));
     };
   }