n8n-editor-ui 1.89.1 → 1.90.1

package/dist/assets/{CanvasChatSwitch-B5IdrA6Q.js → LogsPanel-zIrTNE6j.js}

@@ -1,9 +1,8 @@
-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-CN4JmOoA.js";
-import { H as HighlightJS, R as RunDataAi, f as formatTokenUsageCount, _ as _sfc_main$j, g as getSubtreeTotalConsumedTokens, c as createLogEntries, a as getTotalConsumedTokens } from "./RunDataAi-DsidSvp-.js";
-import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-CRcafrkD.js";
-import { t as toTime, a as toDayMonth } from "./dateFormatter-DP26ifk_.js";
-import { u as upperFirst } from "./useCanvasOperations-BW3qnkOc.js";
-import "./useExecutionHelpers-Bet0YWvb.js";
+import { b1 as inject, b2 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, b3 as toRefs, r as ref, o as onMounted, n as normalizeClass, x as renderSlot, b4 as normalizeProps, b5 as guardReactiveProps, b6 as resolveDynamicComponent, b7 as mergeProps, b8 as VueMarkdown, F as Fragment, D as renderList, b9 as markdownLink, ba as useFileDialog, bb as onUnmounted, B as normalizeStyle, aC as withDirectives, bc as vModelText, H as withKeys, w as withCtx, I as watch, h as resolveComponent, l as createTextVNode, bd as N8nText, be as useClipboard, a as useToast, c as useI18n$1, aS as N8nTooltip, bf as N8nButton, aU as _sfc_main$h, aW as createSlots, aL as useStorage, a$ as watchEffect, y as onBeforeUnmount, K as useDebounce, bg as provide, bh as useProvideTooltipAppendTo, bi as IsInPiPWindowSymbol, bj as CHAT_TRIGGER_NODE_TYPE, bk as MANUAL_CHAT_TRIGGER_NODE_TYPE, bl as NodeConnectionTypes, bm as v4, bn as get, bo as isEmpty, bp as usePinnedData, ak as useMessage, al as MODAL_CONFIRM, bq as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, br as AI_SUBCATEGORY, bs as AI_CATEGORY_AGENTS, bt as AI_CATEGORY_CHAINS, bu as AI_CODE_NODE_TYPE, bv as getNodeInputs, bw as getConnectionTypes, bx as getNodeOutputs, U as useWorkflowsStore, by as useNodeTypesStore, a2 as useCanvasStore, b as useRouter, bz as useNodeHelpers, bA as useRunWorkflow, V as VIEWS, a_ as LOGS_PANEL_STATE, aZ as useTemplateRef, bB as _sfc_main$j, bC as I18nT, bD as N8nIcon, au as useNDVStore, bE as ElTree, bF as N8nRadioButtons, ai as useTelemetry, bG as uniqBy, aT as N8nLink, ax as useLocalStorage, bH as LOG_DETAILS_CONTENT, b0 as N8nResizeWrapper, bI as useStyles } from "./index-BpdkKRP4.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-D_0O6f0X.js";
+import { H as HighlightJS, f as formatTokenUsageCount, _ as _sfc_main$i, g as getSubtreeTotalConsumedTokens, a as getTotalConsumedTokens, R as RunData, c as createLogEntries, b as findLogEntryToAutoSelect } from "./RunData-Ds-U68nr.js";
+import { t as toTime, a as toDayMonth } from "./dateFormatter-CZI1kGYK.js";
+import { u as upperFirst } from "./useCanvasOperations-D6VFiC3b.js";
 function bash(hljs) {
   const regex = hljs.regex;
   const VAR = {};
@@ -2519,13 +2518,13 @@ function useI18n() {
   }
   return { t, te };
 }
-const _hoisted_1$d = {
+const _hoisted_1$c = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$d, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12z"
@@ -2533,13 +2532,13 @@ function render$7(_ctx, _cache) {
   ]));
 }
 const IconDelete = { name: "mdi-closeThick", render: render$7 };
-const _hoisted_1$c = {
+const _hoisted_1$b = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$c, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$b, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m0 18h12v-8l-4 4l-2-2zM8 9a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2"
@@ -2547,13 +2546,13 @@ function render$6(_ctx, _cache) {
   ]));
 }
 const IconFileImage = { name: "mdi-fileImage", render: render$6 };
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$b, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$a, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 11h-2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2c.4 0 .7.1 1 .3V11h3zm0-4V3.5L18.5 9z"
@@ -2561,13 +2560,13 @@ function render$5(_ctx, _cache) {
   ]));
 }
 const IconFileMusic = { name: "mdi-fileMusic", render: render$5 };
-const _hoisted_1$a = {
+const _hoisted_1$9 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$a, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2zm3-4v-2H6v2z"
@@ -2575,13 +2574,13 @@ function render$4(_ctx, _cache) {
   ]));
 }
 const IconFileText = { name: "mdi-fileText", render: render$4 };
-const _hoisted_1$9 = {
+const _hoisted_1$8 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$9, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$8, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m11 17v-6l-3 2.2V13H7v6h7v-2.2z"
@@ -2589,13 +2588,13 @@ function render$3(_ctx, _cache) {
   ]));
 }
 const IconFileVideo = { name: "mdi-fileVideo", render: render$3 };
-const _hoisted_1$8 = {
+const _hoisted_1$7 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$8, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"
@@ -2603,8 +2602,8 @@ function render$2(_ctx, _cache) {
   ]));
 }
 const IconPreview = { name: "mdi-openInNew", render: render$2 };
-const _hoisted_1$7 = { class: "chat-file-name" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = { class: "chat-file-name" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ChatFile",
   props: {
     file: {},
@@ -2639,7 +2638,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         onClick
       }, [
         createVNode(unref(TypeIcon)),
-        createBaseVNode("p", _hoisted_1$7, toDisplayString(_ctx.file.name), 1),
+        createBaseVNode("p", _hoisted_1$6, toDisplayString(_ctx.file.name), 1),
         _ctx.isRemovable ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: "chat-file-delete",
@@ -2654,16 +2653,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-70b9370d"]]);
-const _hoisted_1$6 = {
+const ChatFile = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-70b9370d"]]);
+const _hoisted_1$5 = {
   key: 0,
   class: "chat-message-actions"
 };
-const _hoisted_2$3 = {
+const _hoisted_2$2 = {
   key: 2,
   class: "chat-message-files"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Message",
   props: {
     message: {}
@@ -2741,7 +2740,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         ref: messageContainer,
         class: normalizeClass(["chat-message", classes.value])
       }, [
-        _ctx.$slots.beforeMessage ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+        _ctx.$slots.beforeMessage ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
           renderSlot(_ctx.$slots, "beforeMessage", normalizeProps(guardReactiveProps({ message: unref(message) })))
         ])) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default", {}, () => [
@@ -2752,7 +2751,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             options: markdownOptions,
             plugins: [linksNewTabPlugin]
           }, null, 8, ["source", "plugins"])),
-          (unref(message).files ?? []).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+          (unref(message).files ?? []).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(message).files ?? [], (file) => {
               return openBlock(), createElementBlock("div", {
                 key: file.name,
@@ -2771,13 +2770,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+const _hoisted_1$4 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "M16.5 6v11.5a4 4 0 0 1-4 4a4 4 0 0 1-4-4V5A2.5 2.5 0 0 1 11 2.5A2.5 2.5 0 0 1 13.5 5v10.5a1 1 0 0 1-1 1a1 1 0 0 1-1-1V6H10v9.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5V5a4 4 0 0 0-4-4a4 4 0 0 0-4 4v12.5a5.5 5.5 0 0 0 5.5 5.5a5.5 5.5 0 0 0 5.5-5.5V6z"
@@ -2785,13 +2784,13 @@ function render$1(_ctx, _cache) {
   ]));
 }
 const IconPaperclip = { name: "mdi-paperclip", render: render$1 };
-const _hoisted_1$4 = {
+const _hoisted_1$3 = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [
     createBaseVNode("path", {
       fill: "currentColor",
       d: "m2 21l21-9L2 3v7l15 2l-15 2z"
@@ -2832,8 +2831,8 @@ function createEventBus() {
   };
 }
 const chatEventBus = createEventBus();
-const _hoisted_1$3 = { class: "chat-inputs" };
-const _hoisted_2$2 = {
+const _hoisted_1$2 = { class: "chat-inputs" };
+const _hoisted_2$1 = {
   key: 0,
   class: "chat-input-left-panel"
 };
@@ -2845,7 +2844,7 @@ const _hoisted_7 = {
   key: 0,
   class: "chat-files"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     placeholder: { default: "inputPlaceholder" }
@@ -2907,7 +2906,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         resizeObserver.value = new ResizeObserver((entries) => {
           for (const entry of entries) {
             if (entry.target === chatTextArea.value) {
-              adjustHeight({ target: chatTextArea.value });
+              adjustTextAreaHeight();
             }
           }
         });
@@ -2955,7 +2954,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         return;
       }
       await onSubmit(event);
-      adjustHeight({ target: chatTextArea.value });
+      adjustTextAreaHeight();
     }
     function onFileRemove(file) {
       if (!files.value) return;
@@ -2980,8 +2979,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       if (isFileUploadDisabled.value) return;
       openFileDialog({ accept: unref(allowedFileTypes) });
     }
-    function adjustHeight(event) {
-      const textarea = event.target;
+    function adjustTextAreaHeight() {
+      const textarea = chatTextArea.value;
+      if (!textarea) return;
       textarea.style.height = "var(--chat--textarea--height)";
       const newHeight = Math.min(textarea.scrollHeight, 480);
       textarea.style.height = `${newHeight}px`;
@@ -2992,8 +2992,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(styleVars.value),
         onKeydown: withModifiers(onKeyDown, ["stop"])
       }, [
-        createBaseVNode("div", _hoisted_1$3, [
-          _ctx.$slots.leftPanel ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+        createBaseVNode("div", _hoisted_1$2, [
+          _ctx.$slots.leftPanel ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
             renderSlot(_ctx.$slots, "leftPanel", {}, void 0, true)
           ])) : createCommentVNode("", true),
           withDirectives(createBaseVNode("textarea", {
@@ -3004,9 +3004,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             disabled: isInputDisabled.value,
             placeholder: unref(t)(props.placeholder),
             onKeydown: withKeys(onSubmitKeydown, ["enter"]),
-            onInput: adjustHeight,
-            onMousedown: adjustHeight,
-            onFocus: adjustHeight
+            onInput: adjustTextAreaHeight,
+            onMousedown: adjustTextAreaHeight,
+            onFocus: adjustTextAreaHeight
           }, null, 40, _hoisted_3$1), [
             [vModelText, input.value]
           ]),
@@ -3050,8 +3050,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-9f775274"]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const ChatInput = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-f0e5731e"]]);
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "MessageTyping",
   props: {
     animation: { default: "bouncing" }
@@ -3061,8 +3061,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const message = {
       id: "typing",
       text: "",
-      sender: "bot",
-      createdAt: ""
+      sender: "bot"
     };
     const messageContainer = ref();
     const classes = computed(() => {
@@ -3076,7 +3075,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       messageContainer.value?.scrollToView();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$g), {
+      return openBlock(), createBlock(unref(_sfc_main$f), {
         ref_key: "messageContainer",
         ref: messageContainer,
         class: normalizeClass(classes.value),
@@ -3095,11 +3094,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   key: 0,
   class: "empty-container"
 };
-const _hoisted_2$1 = {
+const _hoisted_2 = {
   class: "empty",
   "data-test-id": "chat-messages-empty"
 };
@@ -3107,7 +3106,7 @@ const _hoisted_3 = {
   key: 1,
   class: "chat-messages-list"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "MessagesList",
   props: {
     messages: {},
@@ -3129,8 +3128,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_N8nIcon = resolveComponent("N8nIcon");
       const _component_N8nText = resolveComponent("N8nText");
-      return _ctx.emptyText && unref(initialMessages).length === 0 && _ctx.messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createBaseVNode("div", _hoisted_2$1, [
+      return _ctx.emptyText && unref(initialMessages).length === 0 && _ctx.messages.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createBaseVNode("div", _hoisted_2, [
           createVNode(_component_N8nIcon, {
             icon: "comment",
             size: "large",
@@ -3149,13 +3148,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         ])
       ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(initialMessages), (initialMessage) => {
-          return openBlock(), createBlock(_sfc_main$g, {
+          return openBlock(), createBlock(_sfc_main$f, {
             key: initialMessage.id,
             message: initialMessage
           }, null, 8, ["message"]);
         }), 128)),
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.messages, (message) => {
-          return openBlock(), createBlock(_sfc_main$g, {
+          return openBlock(), createBlock(_sfc_main$f, {
             key: message.id,
             ref_for: true,
             ref_key: "messageComponents",
@@ -3168,12 +3167,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             _: 2
           }, 1032, ["message"]);
         }), 128)),
-        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$e, { key: 0 })) : createCommentVNode("", true)
+        unref(waitingForResponse) ? (openBlock(), createBlock(_sfc_main$d, { key: 0 })) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionTooltip",
   props: {
     placement: {
@@ -3208,17 +3207,17 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$7 = "_container_pqtqf_123";
-const icon$2 = "_icon_pqtqf_129";
-const style0$9 = {
-  container: container$7,
-  icon: icon$2
+const container$8 = "_container_pqtqf_123";
+const icon$3 = "_icon_pqtqf_129";
+const style0$a = {
+  container: container$8,
+  icon: icon$3
 };
-const cssModules$9 = {
-  "$style": style0$9
+const cssModules$a = {
+  "$style": style0$a
 };
-const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__cssModules", cssModules$9]]);
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const MessageOptionTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$a]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "MessageOptionAction",
   props: {
     label: {
@@ -3259,17 +3258,17 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$6 = "_container_u1r1u_123";
-const icon$1 = "_icon_u1r1u_129";
-const style0$8 = {
-  container: container$6,
-  icon: icon$1
+const container$7 = "_container_u1r1u_123";
+const icon$2 = "_icon_u1r1u_129";
+const style0$9 = {
+  container: container$7,
+  icon: icon$2
 };
-const cssModules$8 = {
-  "$style": style0$8
+const cssModules$9 = {
+  "$style": style0$9
 };
-const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$8]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PanelHeader",
   props: {
     title: {}
@@ -3288,9 +3287,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           size: "small"
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.title), 1)
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ])
           ]),
-          _: 1
+          _: 3
         }, 8, ["class"]),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.actions)
@@ -3301,20 +3302,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$5 = "_container_u9nuz_123";
-const title = "_title_u9nuz_144";
-const actions$1 = "_actions_u9nuz_149";
-const style0$7 = {
-  container: container$5,
-  title,
+const container$6 = "_container_w45gq_123";
+const title$2 = "_title_w45gq_144";
+const actions$1 = "_actions_w45gq_152";
+const style0$8 = {
+  container: container$6,
+  title: title$2,
   actions: actions$1
 };
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$8 = {
+  "$style": style0$8
 };
-const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$7]]);
-const _hoisted_1$1 = ["onClick"];
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+const _hoisted_1 = ["onClick"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
   props: {
     pastChatMessages: {},
@@ -3322,6 +3323,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     sessionId: {},
     showCloseButton: { type: Boolean },
     isOpen: { type: Boolean, default: true },
+    isReadOnly: { type: Boolean, default: false },
     isNewLogsEnabled: { type: Boolean, default: false }
   },
   emits: ["displayExecution", "sendMessage", "refreshSession", "close", "clickHeader"],
@@ -3406,7 +3408,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
         }, {
           actions: withCtx(() => [
-            unref(clipboard).isSupported.value ? (openBlock(), createBlock(unref(N8nTooltip), { key: 0 }, {
+            unref(clipboard).isSupported.value && !_ctx.isReadOnly ? (openBlock(), createBlock(unref(N8nTooltip), { key: 0 }, {
               content: withCtx(() => [
                 createTextVNode(toDisplayString(_ctx.sessionId) + " ", 1),
                 _cache[5] || (_cache[5] = createBaseVNode("br", null, null, -1)),
@@ -3417,23 +3419,24 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   "data-test-id": "chat-session-id",
                   type: "secondary",
                   size: "mini",
+                  class: normalizeClass(_ctx.$style.newHeaderButton),
                   onClick: withModifiers(copySessionId, ["stop"])
                 }, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(sessionIdText.value), 1)
                   ]),
                   _: 1
-                })
+                }, 8, ["class"])
               ]),
               _: 1
             })) : createCommentVNode("", true),
-            _ctx.messages.length > 0 ? (openBlock(), createBlock(unref(N8nTooltip), {
+            _ctx.messages.length > 0 && !_ctx.isReadOnly ? (openBlock(), createBlock(unref(N8nTooltip), {
               key: 1,
               content: unref(locale).baseText("chat.window.session.resetSession")
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$i), {
-                  class: normalizeClass(_ctx.$style.headerButton),
+                createVNode(unref(_sfc_main$h), {
+                  class: normalizeClass(_ctx.$style.newHeaderButton),
                   "data-test-id": "refresh-session-button",
                   outline: "",
                   type: "secondary",
@@ -3472,7 +3475,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createVNode(unref(_sfc_main$i), {
+            createVNode(unref(_sfc_main$h), {
               class: normalizeClass(_ctx.$style.headerButton),
               "data-test-id": "refresh-session-button",
               outline: "",
@@ -3482,7 +3485,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
               title: unref(locale).baseText("chat.window.session.reset"),
               onClick: onRefreshSession
             }, null, 8, ["class", "title"]),
-            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$i), {
+            _ctx.showCloseButton ? (openBlock(), createBlock(unref(_sfc_main$h), {
               key: 0,
               class: normalizeClass(_ctx.$style.headerButton),
               outline: "",
@@ -3497,13 +3500,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           key: 2,
           class: normalizeClass(_ctx.$style.chatBody)
         }, [
-          createVNode(_sfc_main$d, {
+          createVNode(_sfc_main$c, {
             messages: _ctx.messages,
             class: normalizeClass(_ctx.$style.messages),
             "empty-text": _ctx.isNewLogsEnabled ? unref(locale).baseText("chat.window.chat.emptyChatMessage.v2") : void 0
           }, {
             beforeMessage: withCtx(({ message }) => [
-              message.sender === "bot" && !message.id.includes("preload") ? (openBlock(), createBlock(MessageOptionTooltip, {
+              !_ctx.isReadOnly && message.sender === "bot" && !message.id.includes("preload") ? (openBlock(), createBlock(MessageOptionTooltip, {
                 key: 0,
                 placement: "right",
                 "data-test-id": "execution-id-tooltip"
@@ -3513,11 +3516,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   createBaseVNode("a", {
                     href: "#",
                     onClick: ($event) => emit("displayExecution", message.id)
-                  }, toDisplayString(message.id), 9, _hoisted_1$1)
+                  }, toDisplayString(message.id), 9, _hoisted_1)
                 ]),
                 _: 2
               }, 1024)) : createCommentVNode("", true),
-              isTextMessage(message) && message.sender === "user" ? (openBlock(), createBlock(MessageOptionAction, {
+              !_ctx.isReadOnly && isTextMessage(message) && message.sender === "user" ? (openBlock(), createBlock(MessageOptionAction, {
                 key: 1,
                 "data-test-id": "repost-message-button",
                 icon: "redo",
@@ -3525,7 +3528,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 placement: "left",
                 onClickOnce: ($event) => repostMessage(message)
               }, null, 8, ["label", "onClickOnce"])) : createCommentVNode("", true),
-              isTextMessage(message) && message.sender === "user" ? (openBlock(), createBlock(MessageOptionAction, {
+              !_ctx.isReadOnly && isTextMessage(message) && message.sender === "user" ? (openBlock(), createBlock(MessageOptionAction, {
                 key: 2,
                 "data-test-id": "reuse-message-button",
                 icon: "copy",
@@ -3578,94 +3581,37 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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,
+const chat$1 = "_chat_1r0jy_123";
+const chatHeader = "_chatHeader_1r0jy_148";
+const chatTitle = "_chatTitle_1r0jy_161";
+const session = "_session_1r0jy_165";
+const sessionId = "_sessionId_1r0jy_173";
+const copyable = "_copyable_1r0jy_179";
+const headerButton = "_headerButton_1r0jy_183";
+const newHeaderButton = "_newHeaderButton_1r0jy_188";
+const chatBody = "_chatBody_1r0jy_193";
+const messages = "_messages_1r0jy_202";
+const messagesInput = "_messagesInput_1r0jy_213";
+const style0$7 = {
+  chat: chat$1,
   chatHeader,
   chatTitle,
   session,
   sessionId,
   copyable,
   headerButton,
+  newHeaderButton,
   chatBody,
   messages,
   messagesInput
 };
-const cssModules$6 = {
-  "$style": style0$6
-};
-const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$6]]);
-const _hoisted_1 = { class: "meta" };
-const _hoisted_2 = { key: 0 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "ChatLogsPanel",
-  props: {
-    node: {},
-    slim: { type: Boolean },
-    workflow: {}
-  },
-  setup(__props) {
-    const locale = useI18n$1();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.logsWrapper),
-        "data-test-id": "lm-chat-logs"
-      }, [
-        createBaseVNode("header", {
-          class: normalizeClass(_ctx.$style.logsHeader)
-        }, [
-          createBaseVNode("div", _hoisted_1, [
-            createTextVNode(toDisplayString(unref(locale).baseText("chat.window.logs")) + " ", 1),
-            _ctx.node ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(locale).baseText("chat.window.logsFromNode", { interpolate: { nodeName: _ctx.node.name } })), 1)) : createCommentVNode("", true)
-          ]),
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.actions)
-          }, [
-            renderSlot(_ctx.$slots, "actions")
-          ], 2)
-        ], 2),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.logs)
-        }, [
-          _ctx.node ? (openBlock(), createBlock(RunDataAi, {
-            key: 0,
-            class: normalizeClass(_ctx.$style.runData),
-            node: _ctx.node,
-            workflow: _ctx.workflow,
-            slim: _ctx.slim
-          }, null, 8, ["class", "node", "workflow", "slim"])) : createCommentVNode("", true)
-        ], 2)
-      ], 2);
-    };
-  }
-});
-const logsHeader = "_logsHeader_1n9n2_123";
-const logsWrapper = "_logsWrapper_1n9n2_140";
-const logsTitle = "_logsTitle_1n9n2_149";
-const logs$1 = "_logs_1n9n2_123";
-const actions = "_actions_1n9n2_159";
-const style0$5 = {
-  logsHeader,
-  logsWrapper,
-  logsTitle,
-  logs: logs$1,
-  actions
-};
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$7 = {
+  "$style": style0$7
 };
-const ChatLogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$5]]);
+const ChatMessagesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
 const LOCAL_STORAGE_PANEL_HEIGHT = "N8N_CANVAS_CHAT_HEIGHT";
 const LOCAL_STORAGE_PANEL_WIDTH = "N8N_CANVAS_CHAT_WIDTH";
+const LOCAL_STORAGE_OVERVIEW_PANEL_WIDTH = "N8N_LOGS_OVERVIEW_PANEL_WIDTH";
 const MAX_WIDTH_PERCENTAGE = 0.8;
 const MIN_WIDTH_PERCENTAGE = 0.3;
 const MIN_HEIGHT_PERCENTAGE = 0.3;
@@ -3767,7 +3713,9 @@ function usePiPWindow({
 }) {
   const pipWindow = ref();
   const isUnmounting = ref(false);
-  const canPopOut = computed(() => !!window.documentPictureInPicture);
+  const canPopOut = computed(
+    () => !!window.documentPictureInPicture && window.parent === window
+  );
   const isPoppedOut = computed(() => !!pipWindow.value);
   const tooltipContainer = computed(
     () => isPoppedOut.value ? content2.value ?? void 0 : void 0
@@ -3817,6 +3765,85 @@ function usePiPWindow({
   });
   return { canPopOut, isPoppedOut, pipWindow };
 }
+function isChatNode(node) {
+  return [CHAT_TRIGGER_NODE_TYPE, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type);
+}
+function getInputKey(node) {
+  if (node.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && node.typeVersion < 1.1) {
+    return "input";
+  }
+  if (node.type === CHAT_TRIGGER_NODE_TYPE) {
+    return "chatInput";
+  }
+  return "chatInput";
+}
+function extractChatInput(workflow, resultData) {
+  const chatTrigger = workflow.nodes.find(isChatNode);
+  if (chatTrigger === void 0) {
+    return void 0;
+  }
+  const inputKey = getInputKey(chatTrigger);
+  const runData = (resultData.runData[chatTrigger.name] ?? [])[0];
+  const message = runData?.data?.[NodeConnectionTypes.Main]?.[0]?.[0]?.json?.[inputKey];
+  if (runData === void 0 || typeof message !== "string") {
+    return void 0;
+  }
+  return {
+    text: message,
+    sender: "user",
+    id: v4()
+  };
+}
+function extractBotResponse(resultData, executionId, emptyText2) {
+  const lastNodeExecuted = resultData.lastNodeExecuted;
+  if (!lastNodeExecuted) return void 0;
+  const nodeResponseDataArray = get(resultData.runData, lastNodeExecuted) ?? [];
+  const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
+  let responseMessage;
+  if (get(nodeResponseData, "error")) {
+    responseMessage = "[ERROR: " + get(nodeResponseData, "error.message") + "]";
+  } else {
+    const responseData = get(nodeResponseData, "data.main[0][0].json");
+    const text = extractResponseText(responseData) ?? emptyText2;
+    if (!text) {
+      return void 0;
+    }
+    responseMessage = text;
+  }
+  return {
+    text: responseMessage,
+    sender: "bot",
+    id: executionId ?? v4()
+  };
+}
+function extractResponseText(responseData) {
+  if (!responseData || isEmpty(responseData)) {
+    return void 0;
+  }
+  const paths = ["output", "text", "response.text"];
+  const matchedPath = paths.find((path) => get(responseData, path));
+  if (!matchedPath) return JSON.stringify(responseData, null, 2);
+  const matchedOutput = get(responseData, matchedPath);
+  if (typeof matchedOutput === "object") {
+    return "```json\n" + JSON.stringify(matchedOutput, null, 2) + "\n```";
+  }
+  return matchedOutput?.toString() ?? "";
+}
+function restoreChatHistory(workflowExecutionData, emptyText2) {
+  if (!workflowExecutionData?.data) {
+    return [];
+  }
+  const userMessage = extractChatInput(
+    workflowExecutionData.workflowData,
+    workflowExecutionData.data.resultData
+  );
+  const botMessage = extractBotResponse(
+    workflowExecutionData.data.resultData,
+    workflowExecutionData.id,
+    emptyText2
+  );
+  return [...userMessage ? [userMessage] : [], ...botMessage ? [botMessage] : []];
+}
 function useChatMessaging({
   chatTrigger,
   messages: messages2,
@@ -3874,13 +3901,7 @@ function useChatMessaging({
       showError(new Error("Chat Trigger Node could not be found!"), "Trigger Node not found");
       return;
     }
-    let inputKey = "chatInput";
-    if (triggerNode.type === MANUAL_CHAT_TRIGGER_NODE_TYPE && triggerNode.typeVersion < 1.1) {
-      inputKey = "input";
-    }
-    if (triggerNode.type === CHAT_TRIGGER_NODE_TYPE) {
-      inputKey = "chatInput";
-    }
+    const inputKey = getInputKey(triggerNode);
     const inputPayload = {
       json: {
         sessionId: sessionId2.value,
@@ -3915,40 +3936,14 @@ function useChatMessaging({
     if (!response?.executionId) {
       return;
     }
-    processExecutionResultData(response.executionId);
-  }
-  function processExecutionResultData(executionId) {
-    const lastNodeExecuted = executionResultData.value?.lastNodeExecuted;
-    if (!lastNodeExecuted) return;
-    const nodeResponseDataArray = get(executionResultData.value.runData, lastNodeExecuted) ?? [];
-    const nodeResponseData = nodeResponseDataArray[nodeResponseDataArray.length - 1];
-    let responseMessage;
-    if (get(nodeResponseData, "error")) {
-      responseMessage = "[ERROR: " + get(nodeResponseData, "error.message") + "]";
-    } else {
-      const responseData = get(nodeResponseData, "data.main[0][0].json");
-      responseMessage = extractResponseMessage(responseData);
-    }
-    isLoading.value = false;
-    messages2.value.push({
-      text: responseMessage,
-      sender: "bot",
-      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-      id: executionId ?? v4()
-    });
-  }
-  function extractResponseMessage(responseData) {
-    if (!responseData || isEmpty(responseData)) {
-      return locale.baseText("chat.window.chat.response.empty");
-    }
-    const paths = ["output", "text", "response.text"];
-    const matchedPath = paths.find((path) => get(responseData, path));
-    if (!matchedPath) return JSON.stringify(responseData, null, 2);
-    const matchedOutput = get(responseData, matchedPath);
-    if (typeof matchedOutput === "object") {
-      return "```json\n" + JSON.stringify(matchedOutput, null, 2) + "\n```";
+    const chatMessage = executionResultData.value ? extractBotResponse(
+      executionResultData.value,
+      response.executionId,
+      locale.baseText("chat.window.chat.response.empty")
+    ) : void 0;
+    if (chatMessage !== void 0) {
+      messages2.value.push(chatMessage);
     }
-    return matchedOutput?.toString() ?? "";
   }
   async function sendMessage(message, files) {
     previousMessageIndex.value = 0;
@@ -3975,7 +3970,6 @@ function useChatMessaging({
     const newMessage = {
       text: message,
       sender: "user",
-      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
       sessionId: sessionId2.value,
       id: v4(),
       files
@@ -3986,8 +3980,7 @@ function useChatMessaging({
   return {
     previousMessageIndex,
     isLoading: computed(() => isLoading.value),
-    sendMessage,
-    extractResponseMessage
+    sendMessage
   };
 }
 function useChatTrigger({
@@ -4008,9 +4001,7 @@ function useChatTrigger({
     return chatTriggerNode.value?.parameters?.options?.allowedFilesMimeTypes?.toString() ?? "";
   });
   function setChatTriggerNode() {
-    const triggerNode = unref(canvasNodes).find(
-      (node) => [CHAT_TRIGGER_NODE_TYPE$1, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
-    );
+    const triggerNode = unref(canvasNodes).find(isChatNode);
     if (!triggerNode) {
       return;
     }
@@ -4057,7 +4048,8 @@ function useChatTrigger({
     setConnectedNode
   };
 }
-function useChatState(isDisabled, onWindowResize) {
+function useChatState(isReadOnly, onWindowResize) {
+  const locale = useI18n$1();
   const workflowsStore = useWorkflowsStore();
   const nodeTypesStore = useNodeTypesStore();
   const canvasStore = useCanvasStore();
@@ -4123,10 +4115,16 @@ function useChatState(isDisabled, onWindowResize) {
     sendMessage,
     currentSessionId,
     isLoading,
-    isDisabled,
+    isDisabled: computed(() => isReadOnly),
     allowFileUploads,
-    locale: useI18n$1()
+    locale
   });
+  const restoredChatMessages = computed(
+    () => restoreChatHistory(
+      workflowsStore.workflowExecutionData,
+      locale.baseText("chat.window.chat.response.empty")
+    )
+  );
   provide(ChatSymbol, chatConfig);
   provide(ChatOptionsSymbol, chatOptions);
   watch(
@@ -4136,7 +4134,7 @@ function useChatState(isDisabled, onWindowResize) {
         setChatTriggerNode();
         setConnectedNode();
         setTimeout(() => {
-          onWindowResize();
+          onWindowResize?.();
           chatEventBus.emit("focusInput");
         }, 0);
       }
@@ -4201,7 +4199,7 @@ function useChatState(isDisabled, onWindowResize) {
   }
   return {
     currentSessionId,
-    messages: messages2,
+    messages: computed(() => isReadOnly ? restoredChatMessages.value : messages2.value),
     chatTriggerNode,
     connectedNode,
     sendMessage,
@@ -4210,191 +4208,6 @@ function useChatState(isDisabled, onWindowResize) {
   };
 }
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "CanvasChat",
-  setup(__props, { expose: __expose }) {
-    const workflowsStore = useWorkflowsStore();
-    const canvasStore = useCanvasStore();
-    const isDisabled = ref(false);
-    const container2 = ref();
-    const pipContainer = useTemplateRef("pipContainer");
-    const pipContent2 = useTemplateRef("pipContent");
-    const workflow = computed(() => workflowsStore.getCurrentWorkflow());
-    const chatPanelState = computed(() => workflowsStore.logsPanelState);
-    const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
-    const resultData = computed(() => workflowsStore.getWorkflowRunData);
-    const telemetry = useTelemetry();
-    const {
-      height,
-      chatWidth,
-      rootStyles,
-      logsWidth,
-      onResizeDebounced,
-      onResizeChatDebounced,
-      onWindowResize
-    } = useResize(container2);
-    const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
-      initialHeight: 400,
-      initialWidth: window.document.body.offsetWidth * 0.8,
-      container: pipContainer,
-      content: pipContent2,
-      shouldPopOut: computed(() => chatPanelState.value === LOGS_PANEL_STATE.FLOATING),
-      onRequestClose: () => {
-        if (chatPanelState.value === LOGS_PANEL_STATE.CLOSED) {
-          return;
-        }
-        telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPreferPoppedOutLogsView(false);
-      }
-    });
-    const {
-      currentSessionId,
-      messages: messages2,
-      chatTriggerNode,
-      connectedNode,
-      sendMessage,
-      refreshSession,
-      displayExecution
-    } = useChatState(isDisabled, onWindowResize);
-    __expose({
-      messages: messages2,
-      currentSessionId,
-      isDisabled,
-      workflow
-    });
-    const closePanel = () => {
-      workflowsStore.toggleLogsPanelOpen(false);
-    };
-    function onPopOut() {
-      telemetry.track("User toggled log view", { new_state: "floating" });
-      workflowsStore.toggleLogsPanelOpen(true);
-      workflowsStore.setPreferPoppedOutLogsView(true);
-    }
-    watchEffect(() => {
-      canvasStore.setPanelHeight(chatPanelState.value === LOGS_PANEL_STATE.ATTACHED ? height.value : 0);
-    });
-    return (_ctx, _cache) => {
-      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
-      return openBlock(), createElementBlock("div", {
-        ref_key: "pipContainer",
-        ref: pipContainer
-      }, [
-        createBaseVNode("div", {
-          ref_key: "pipContent",
-          ref: pipContent2,
-          class: normalizeClass(_ctx.$style.pipContent)
-        }, [
-          unref(chatTriggerNode) ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
-            key: 0,
-            "is-resizing-enabled": !unref(isPoppedOut) && chatPanelState.value === unref(LOGS_PANEL_STATE).ATTACHED,
-            "supported-directions": ["top"],
-            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)
-          }, {
-            default: withCtx(() => [
-              createBaseVNode("div", {
-                ref_key: "container",
-                ref: container2,
-                class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
-                tabindex: "0"
-              }, [
-                chatPanelState.value !== unref(LOGS_PANEL_STATE).CLOSED ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass(_ctx.$style.chatResizer)
-                }, [
-                  createVNode(unref(N8nResizeWrapper), {
-                    "supported-directions": ["right"],
-                    width: unref(chatWidth),
-                    class: normalizeClass(_ctx.$style.chat),
-                    window: unref(pipWindow),
-                    onResize: unref(onResizeChatDebounced)
-                  }, {
-                    default: withCtx(() => [
-                      createBaseVNode("div", {
-                        class: normalizeClass(_ctx.$style.inner)
-                      }, [
-                        createVNode(ChatMessagesPanel, {
-                          "data-test-id": "canvas-chat",
-                          messages: unref(messages2),
-                          "session-id": unref(currentSessionId),
-                          "past-chat-messages": previousChatMessages.value,
-                          "show-close-button": !unref(isPoppedOut) && !unref(connectedNode),
-                          onClose: closePanel,
-                          onRefreshSession: unref(refreshSession),
-                          onDisplayExecution: unref(displayExecution),
-                          onSendMessage: unref(sendMessage)
-                        }, null, 8, ["messages", "session-id", "past-chat-messages", "show-close-button", "onRefreshSession", "onDisplayExecution", "onSendMessage"])
-                      ], 2)
-                    ]),
-                    _: 1
-                  }, 8, ["width", "class", "window", "onResize"]),
-                  unref(connectedNode) ? (openBlock(), createElementBlock("div", {
-                    key: 0,
-                    class: normalizeClass(_ctx.$style.logs)
-                  }, [
-                    (openBlock(), createBlock(ChatLogsPanel, {
-                      key: `${resultData.value?.length ?? unref(messages2)?.length}`,
-                      workflow: workflow.value,
-                      "data-test-id": "canvas-chat-logs",
-                      node: unref(connectedNode),
-                      slim: unref(logsWidth) < 700
-                    }, {
-                      actions: withCtx(() => [
-                        unref(canPopOut) && !unref(isPoppedOut) ? (openBlock(), createBlock(_component_n8n_icon_button, {
-                          key: 0,
-                          icon: "pop-out",
-                          type: "secondary",
-                          size: "medium",
-                          onClick: onPopOut
-                        })) : createCommentVNode("", true),
-                        !unref(isPoppedOut) ? (openBlock(), createBlock(_component_n8n_icon_button, {
-                          key: 1,
-                          outline: "",
-                          icon: "times",
-                          type: "secondary",
-                          size: "medium",
-                          onClick: closePanel
-                        })) : createCommentVNode("", true)
-                      ]),
-                      _: 1
-                    }, 8, ["workflow", "node", "slim"]))
-                  ], 2)) : createCommentVNode("", true)
-                ], 2)) : createCommentVNode("", true)
-              ], 2)
-            ]),
-            _: 1
-          }, 8, ["is-resizing-enabled", "class", "height", "style", "onResize"])) : createCommentVNode("", true)
-        ], 2)
-      ], 512);
-    };
-  }
-});
-const resizeWrapper$1 = "_resizeWrapper_1aajp_124";
-const pipContent$1 = "_pipContent_1aajp_129";
-const empty$1 = "_empty_1aajp_140";
-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$4 = {
-  resizeWrapper: resizeWrapper$1,
-  pipContent: pipContent$1,
-  empty: empty$1,
-  container: container$4,
-  chatResizer,
-  footer,
-  chat: chat$1,
-  inner,
-  logs
-};
-const cssModules$4 = {
-  "$style": style0$4
-};
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$4]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ConsumedTokenCountText",
   props: {
     consumedTokens: {}
@@ -4402,7 +4215,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const locale = useI18n$1();
     return (_ctx, _cache) => {
-      const _component_ConsumedTokensDetails = _sfc_main$j;
+      const _component_ConsumedTokensDetails = _sfc_main$i;
       return _ctx.consumedTokens !== void 0 ? (openBlock(), createBlock(unref(N8nTooltip), {
         key: 0,
         enterable: false
@@ -4422,12 +4235,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewRow",
   props: {
     data: {},
     node: {},
     isSelected: { type: Boolean },
+    isReadOnly: { type: Boolean },
     shouldShowConsumedTokens: { type: Boolean },
     isCompact: { type: Boolean }
   },
@@ -4436,6 +4250,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const locale = useI18n$1();
+    const containerRef = useTemplateRef("containerRef");
     const workflowsStore = useWorkflowsStore();
     const nodeTypeStore = useNodeTypesStore();
     const node = computed(() => workflowsStore.nodesByName[props.data.node]);
@@ -4470,10 +4285,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       const lastSibling = siblings[siblings.length - 1];
       return data === void 0 && lastSibling === void 0 || data?.node === lastSibling?.node && data?.runIndex === lastSibling?.runIndex;
     }
+    watch(
+      [() => props.isSelected, containerRef],
+      ([isSelected, ref2]) => {
+        if (isSelected && ref2) {
+          ref2.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
-      const _component_NodeIcon = _sfc_main$k;
+      const _component_NodeIcon = _sfc_main$j;
       return node.value !== void 0 ? (openBlock(), createElementBlock("div", {
         key: 0,
+        ref_key: "containerRef",
+        ref: containerRef,
         class: normalizeClass({
           [_ctx.$style.container]: true,
           [_ctx.$style.compact]: props.isCompact,
@@ -4571,7 +4397,7 @@ const _sfc_main$5 = /* @__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$6, {
+            subtreeConsumedTokens.value.totalTokens > 0 && (props.data.children.length === 0 || !props.node.expanded) ? (openBlock(), createBlock(_sfc_main$7, {
               key: 0,
               "consumed-tokens": subtreeConsumedTokens.value
             }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
@@ -4585,7 +4411,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           icon: "exclamation-triangle",
           class: normalizeClass(_ctx.$style.compactErrorIcon)
         }, null, 8, ["class"])) : createCommentVNode("", true),
-        createVNode(unref(_sfc_main$i), {
+        !props.isReadOnly ? (openBlock(), createBlock(unref(_sfc_main$h), {
+          key: 2,
           type: "secondary",
           size: "small",
           icon: "play",
@@ -4593,8 +4420,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           "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), {
+        }, null, 8, ["aria-label", "class"])) : createCommentVNode("", true),
+        createVNode(unref(_sfc_main$h), {
           type: "secondary",
           size: "small",
           icon: "external-link-alt",
@@ -4604,7 +4431,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           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,
+          key: 3,
           type: "secondary",
           size: "small",
           square: true,
@@ -4629,35 +4456,35 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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,
+const container$5 = "_container_jrkhv_123";
+const background = "_background_jrkhv_140";
+const selected = "_selected_jrkhv_149";
+const error = "_error_jrkhv_152";
+const indent = "_indent_jrkhv_156";
+const connectorCurved = "_connectorCurved_jrkhv_165";
+const connectorStraight = "_connectorStraight_jrkhv_175";
+const icon$1 = "_icon_jrkhv_184";
+const name$1 = "_name_jrkhv_190";
+const timeTook = "_timeTook_jrkhv_196";
+const errorIcon = "_errorIcon_jrkhv_201";
+const compact = "_compact_jrkhv_205";
+const startedAt = "_startedAt_jrkhv_215";
+const consumedTokens = "_consumedTokens_jrkhv_224";
+const compactErrorIcon = "_compactErrorIcon_jrkhv_240";
+const partialExecutionButton = "_partialExecutionButton_jrkhv_248";
+const openNdvButton = "_openNdvButton_jrkhv_249";
+const unavailable = "_unavailable_jrkhv_259";
+const toggleButton = "_toggleButton_jrkhv_267";
+const style0$6 = {
+  container: container$5,
   background,
   selected,
   error,
   indent,
   connectorCurved,
   connectorStraight,
-  icon,
-  name,
+  icon: icon$1,
+  name: name$1,
   timeTook,
   errorIcon,
   compact,
@@ -4669,15 +4496,62 @@ const style0$3 = {
   unavailable,
   toggleButton
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$6 = {
+  "$style": style0$6
 };
-const LogsOverviewRow = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$3]]);
+const LogsOverviewRow = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$6]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "ExecutionSummary",
+  props: {
+    status: {},
+    consumedTokens: {},
+    timeTook: {}
+  },
+  setup(__props) {
+    const locale = useI18n$1();
+    const executionStatusText = computed(
+      () => __props.timeTook === void 0 ? upperFirst(__props.status) : locale.baseText("logs.overview.body.summaryText", {
+        interpolate: {
+          status: upperFirst(__props.status),
+          time: locale.displayTimer(__props.timeTook, true)
+        }
+      })
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(N8nText), {
+        tag: "div",
+        color: "text-light",
+        size: "small",
+        class: normalizeClass(_ctx.$style.container)
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("span", null, toDisplayString(executionStatusText.value), 1),
+          _ctx.consumedTokens.totalTokens > 0 ? (openBlock(), createBlock(_sfc_main$7, {
+            key: 0,
+            "consumed-tokens": _ctx.consumedTokens
+          }, null, 8, ["consumed-tokens"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+const container$4 = "_container_pt5hk_123";
+const style0$5 = {
+  container: container$4
+};
+const cssModules$5 = {
+  "$style": style0$5
+};
+const ExecutionSummary = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewPanel",
   props: {
     isOpen: { type: Boolean },
-    selected: {}
+    selected: {},
+    isReadOnly: { type: Boolean },
+    isCompact: { type: Boolean },
+    executionTree: {}
   },
   emits: ["clickHeader", "select"],
   setup(__props, { emit: __emit }) {
@@ -4691,48 +4565,25 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const nodeHelpers = useNodeHelpers();
     const isClearExecutionButtonVisible = useClearExecutionButtonVisible();
     const workflow = computed(() => workflowsStore.getCurrentWorkflow());
-    const executionTree = computed(
-      () => createLogEntries(
-        workflow.value,
-        workflowsStore.workflowExecutionData?.data?.resultData.runData ?? {}
-      )
-    );
     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 execution = computed(() => workflowsStore.workflowExecutionData);
     const consumedTokens2 = computed(
-      () => getTotalConsumedTokens(...executionTree.value.map(getSubtreeTotalConsumedTokens))
+      () => getTotalConsumedTokens(...__props.executionTree.map(getSubtreeTotalConsumedTokens))
     );
     function onClearExecutionData() {
       workflowsStore.setWorkflowExecutionData(null);
       nodeHelpers.updateNodesExecutionIssues();
     }
     function handleClickNode(clicked) {
-      if (__props.selected?.node === clicked.node && __props.selected.runIndex === clicked.runIndex) {
+      if (__props.selected?.node === clicked.node && __props.selected?.runIndex === clicked.runIndex) {
         emit("select", void 0);
         return;
       }
-      emit("select", { node: clicked.node, runIndex: clicked.runIndex });
+      emit("select", clicked);
       telemetry.track("User selected node in log view", {
         node_type: workflowsStore.nodesByName[clicked.node].type,
         node_id: workflowsStore.nodesByName[clicked.node].id,
@@ -4741,10 +4592,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       });
     }
     function handleSwitchView(value) {
-      emit(
-        "select",
-        value === "overview" || executionTree.value.length === 0 ? void 0 : executionTree.value[0]
-      );
+      emit("select", value === "overview" || __props.executionTree.length === 0 ? void 0 : __props.executionTree[0]);
     }
     function handleToggleExpanded(treeNode) {
       treeNode.expanded = !treeNode.expanded;
@@ -4776,13 +4624,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   type: "secondary",
                   icon: "trash",
                   "icon-size": "medium",
+                  class: normalizeClass(_ctx.$style.clearButton),
                   onClick: withModifiers(onClearExecutionData, ["stop"])
                 }, {
                   default: withCtx(() => [
                     createTextVNode(toDisplayString(unref(locale).baseText("logs.overview.header.actions.clearExecution")), 1)
                   ]),
                   _: 1
-                })
+                }, 8, ["class"])
               ]),
               _: 1
             }, 8, ["content"])) : createCommentVNode("", true),
@@ -4811,28 +4660,19 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             key: 1,
             class: normalizeClass(_ctx.$style.scrollable)
           }, [
-            executionStatusText.value !== void 0 ? (openBlock(), createBlock(unref(N8nText), {
+            execution.value ? (openBlock(), createBlock(ExecutionSummary, {
               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), {
+              class: normalizeClass(_ctx.$style.summary),
+              status: execution.value.status,
+              "consumed-tokens": consumedTokens2.value,
+              "time-took": execution.value.startedAt && execution.value.stoppedAt ? +new Date(execution.value.stoppedAt) - +new Date(execution.value.startedAt) : void 0
+            }, null, 8, ["class", "status", "consumed-tokens", "time-took"])) : createCommentVNode("", true),
+            _ctx.executionTree.length > 0 ? (openBlock(), createBlock(unref(ElTree), {
               key: 1,
               "node-key": "id",
               class: normalizeClass(_ctx.$style.tree),
               indent: 0,
-              data: executionTree.value,
+              data: _ctx.executionTree,
               "expand-on-click-node": false,
               "default-expand-all": true,
               onNodeClick: handleClickNode
@@ -4841,13 +4681,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 createVNode(LogsOverviewRow, {
                   data,
                   node: elTreeNode,
+                  "is-read-only": _ctx.isReadOnly,
                   "is-selected": data.node === _ctx.selected?.node && data.runIndex === _ctx.selected?.runIndex,
-                  "is-compact": _ctx.selected !== void 0,
+                  "is-compact": _ctx.isCompact,
                   "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"])
+                }, null, 8, ["data", "node", "is-read-only", "is-selected", "is-compact", "should-show-consumed-tokens"])
               ]),
               _: 1
             }, 8, ["class", "data"])) : createCommentVNode("", true),
@@ -4864,16 +4705,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$2 = "_container_1xh09_123";
-const content$1 = "_content_1xh09_133";
-const empty = "_empty_1xh09_142";
-const emptyText = "_emptyText_1xh09_147";
-const scrollable = "_scrollable_1xh09_152";
-const summary = "_summary_1xh09_159";
-const tree = "_tree_1xh09_171";
-const switchViewButtons = "_switchViewButtons_1xh09_178";
-const style0$2 = {
-  container: container$2,
+const container$3 = "_container_ow69g_123";
+const clearButton = "_clearButton_ow69g_133";
+const content$1 = "_content_ow69g_138";
+const empty = "_empty_ow69g_147";
+const emptyText = "_emptyText_ow69g_152";
+const scrollable = "_scrollable_ow69g_157";
+const summary = "_summary_ow69g_163";
+const tree = "_tree_ow69g_169";
+const switchViewButtons = "_switchViewButtons_ow69g_176";
+const style0$4 = {
+  container: container$3,
+  clearButton,
   content: content$1,
   empty,
   emptyText,
@@ -4882,29 +4725,340 @@ const style0$2 = {
   tree,
   switchViewButtons
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$4 = {
+  "$style": style0$4
 };
-const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$2]]);
+const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "RunDataView",
+  props: {
+    title: {},
+    paneType: {},
+    logEntry: {}
+  },
+  setup(__props) {
+    const locale = useI18n$1();
+    const workflowsStore = useWorkflowsStore();
+    const ndvStore = useNDVStore();
+    const workflow = computed(() => workflowsStore.getCurrentWorkflow());
+    const node = computed(() => {
+      if (__props.logEntry.depth > 0 || __props.paneType === "output") {
+        return workflowsStore.nodesByName[__props.logEntry.node];
+      }
+      const parent = workflow.value.getParentNodesByDepth(__props.logEntry.node)[0];
+      if (!parent) {
+        return void 0;
+      }
+      return workflowsStore.nodesByName[parent.name];
+    });
+    const isMultipleInput = computed(
+      () => __props.paneType === "input" && uniqBy(
+        workflow.value.getParentNodesByDepth(__props.logEntry.node).filter((n) => n.name !== __props.logEntry.node),
+        (n) => n.name
+      ).length > 1
+    );
+    function handleClickOpenNdv() {
+      ndvStore.setActiveNodeName(__props.logEntry.node);
+    }
+    return (_ctx, _cache) => {
+      return node.value ? (openBlock(), createBlock(RunData, {
+        key: 0,
+        node: node.value,
+        workflow: workflow.value,
+        "run-index": _ctx.logEntry.runIndex,
+        "too-much-data-title": unref(locale).baseText("ndv.output.tooMuchData.title"),
+        "no-data-in-branch-message": unref(locale).baseText("ndv.output.noOutputDataInBranch"),
+        "executing-message": unref(locale).baseText("ndv.output.executing"),
+        "pane-type": _ctx.paneType,
+        "disable-run-index-selection": true,
+        compact: true,
+        "disable-pin": true,
+        "disable-edit": true,
+        "table-header-bg-color": "light"
+      }, createSlots({
+        header: withCtx(() => [
+          createVNode(unref(N8nText), {
+            class: normalizeClass(_ctx.$style.title),
+            bold: true,
+            color: "text-light",
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ]),
+        "no-output-data": withCtx(() => [
+          createVNode(unref(N8nText), {
+            bold: true,
+            color: "text-dark",
+            size: "large"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(locale).baseText("ndv.output.noOutputData.title")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 2
+      }, [
+        isMultipleInput.value ? {
+          name: "content",
+          fn: withCtx(() => []),
+          key: "0"
+        } : void 0,
+        isMultipleInput.value ? {
+          name: "callout-message",
+          fn: withCtx(() => [
+            createVNode(unref(I18nT), { keypath: "logs.details.body.multipleInputs" }, {
+              button: withCtx(() => [
+                createVNode(unref(N8nLink), {
+                  size: "small",
+                  onClick: handleClickOpenNdv
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(locale).baseText("logs.details.body.multipleInputs.openingTheNode")), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["node", "workflow", "run-index", "too-much-data-title", "no-data-in-branch-message", "executing-message", "pane-type"])) : createCommentVNode("", true);
+    };
+  }
+});
+const title$1 = "_title_1ur7r_123";
+const style0$3 = {
+  title: title$1
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const RunDataView = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
+function useResizablePanel(localStorageKey, {
+  container: container2,
+  defaultSize,
+  snap = true,
+  minSize = 0,
+  maxSize = (size) => size,
+  position = "left",
+  allowCollapse,
+  allowFullSize
+}) {
+  const containerSize = ref(0);
+  const size = useLocalStorage(localStorageKey, -1, { writeDefaults: false });
+  const isResizing = ref(false);
+  const constrainedSize = computed(() => {
+    if (isResizing.value && allowCollapse && size.value < 30) {
+      return 0;
+    }
+    if (isResizing.value && allowFullSize && size.value > containerSize.value - 30) {
+      return containerSize.value;
+    }
+    const defaultSizeValue = resolveSize(defaultSize, containerSize.value);
+    if (Number.isNaN(size.value) || size.value < 0) {
+      return defaultSizeValue;
+    }
+    const minSizeValue = resolveSize(minSize, containerSize.value);
+    const maxSizeValue = resolveSize(maxSize, containerSize.value);
+    return Math.max(
+      minSizeValue,
+      Math.min(
+        snap && Math.abs(defaultSizeValue - size.value) < 30 ? defaultSizeValue : size.value,
+        maxSizeValue
+      )
+    );
+  });
+  function getSize(el) {
+    return position === "bottom" ? el.height : el.width;
+  }
+  function getOffsetSize(el) {
+    return position === "bottom" ? el.offsetHeight : el.offsetWidth;
+  }
+  function getValue(data) {
+    return position === "bottom" ? data.y : data.x;
+  }
+  function resolveSize(getter, containerSizeValue) {
+    return typeof getter === "number" ? getter : getter(containerSizeValue);
+  }
+  function onResize(data) {
+    const containerRect = unref(container2)?.getBoundingClientRect();
+    isResizing.value = true;
+    size.value = Math.max(
+      0,
+      position === "bottom" ? (containerRect ? getSize(containerRect) : 0) - getValue(data) : getValue(data) - (containerRect ? getValue(containerRect) : 0)
+    );
+  }
+  function onResizeEnd() {
+    isResizing.value = false;
+  }
+  watch(
+    () => unref(container2),
+    (el, _, onCleanUp) => {
+      if (!el) {
+        return;
+      }
+      const observer = new ResizeObserver(() => {
+        containerSize.value = getOffsetSize(el);
+      });
+      observer.observe(el);
+      containerSize.value = getOffsetSize(el);
+      onCleanUp(() => observer.disconnect());
+    },
+    { immediate: true }
+  );
+  watch(containerSize, (newValue, oldValue) => {
+    if (size.value > 0 && oldValue > 0) {
+      const ratio = size.value / oldValue;
+      size.value = Math.round(newValue * ratio);
+    }
+  });
+  return {
+    isResizing: computed(() => isResizing.value),
+    isCollapsed: computed(() => isResizing.value && constrainedSize.value <= 0),
+    isFullSize: computed(() => isResizing.value && constrainedSize.value >= containerSize.value),
+    size: constrainedSize,
+    onResize,
+    onResizeEnd
+  };
+}
+const MIN_IO_PANEL_WIDTH = 200;
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "LogDetailsPanel",
   props: {
-    isOpen: { type: Boolean }
+    isOpen: { type: Boolean },
+    logEntry: {},
+    window: {}
   },
   emits: ["clickHeader"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
+    const locale = useI18n$1();
+    const telemetry = useTelemetry();
+    const workflowsStore = useWorkflowsStore();
+    const nodeTypeStore = useNodeTypesStore();
+    const content2 = ref(LOG_DETAILS_CONTENT.BOTH);
+    const node = computed(() => workflowsStore.nodesByName[__props.logEntry.node]);
+    const type = computed(() => node.value ? nodeTypeStore.getNodeType(node.value.type) : void 0);
+    const runData = computed(
+      () => (workflowsStore.workflowExecutionData?.data?.resultData.runData[__props.logEntry.node] ?? [])[__props.logEntry.runIndex]
+    );
+    const consumedTokens2 = computed(() => getSubtreeTotalConsumedTokens(__props.logEntry));
+    const isTriggerNode = computed(() => type.value?.group.includes("trigger"));
+    const container2 = useTemplateRef("container");
+    const resizer = useResizablePanel("N8N_LOGS_INPUT_PANEL_WIDTH", {
+      container: container2,
+      defaultSize: (size) => size / 2,
+      minSize: MIN_IO_PANEL_WIDTH,
+      maxSize: (size) => size - MIN_IO_PANEL_WIDTH,
+      allowCollapse: true,
+      allowFullSize: true
+    });
+    const shouldResize = computed(() => content2.value === LOG_DETAILS_CONTENT.BOTH);
+    function handleToggleInput(open) {
+      const wasOpen = [LOG_DETAILS_CONTENT.INPUT, LOG_DETAILS_CONTENT.BOTH].includes(content2.value);
+      if (open === wasOpen) {
+        return;
+      }
+      content2.value = wasOpen ? LOG_DETAILS_CONTENT.OUTPUT : LOG_DETAILS_CONTENT.BOTH;
+      telemetry.track("User toggled log view sub pane", {
+        pane: "input",
+        newState: wasOpen ? "hidden" : "visible"
+      });
+    }
+    function handleToggleOutput(open) {
+      const wasOpen = [LOG_DETAILS_CONTENT.OUTPUT, LOG_DETAILS_CONTENT.BOTH].includes(content2.value);
+      if (open === wasOpen) {
+        return;
+      }
+      content2.value = wasOpen ? LOG_DETAILS_CONTENT.INPUT : LOG_DETAILS_CONTENT.BOTH;
+      telemetry.track("User toggled log view sub pane", {
+        pane: "output",
+        newState: wasOpen ? "hidden" : "visible"
+      });
+    }
+    function handleResizeEnd() {
+      if (resizer.isCollapsed.value) {
+        handleToggleInput(false);
+      }
+      if (resizer.isFullSize.value) {
+        handleToggleOutput(false);
+      }
+      resizer.onResizeEnd();
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container2,
         class: normalizeClass(_ctx.$style.container),
         "data-test-id": "log-details"
       }, [
         createVNode(PanelHeader, {
-          title: "Log details",
-          "data-test-id": "logs-details-header",
+          "data-test-id": "log-details-header",
           onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
         }, {
+          title: withCtx(() => [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.title)
+            }, [
+              createVNode(_sfc_main$j, {
+                "node-type": type.value,
+                size: 16,
+                class: normalizeClass(_ctx.$style.icon)
+              }, null, 8, ["node-type", "class"]),
+              createVNode(unref(N8nText), {
+                tag: "div",
+                bold: true,
+                size: "small",
+                class: normalizeClass(_ctx.$style.name)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(node.value?.name), 1)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              _ctx.isOpen ? (openBlock(), createBlock(ExecutionSummary, {
+                key: 0,
+                class: normalizeClass(_ctx.$style.executionSummary),
+                status: runData.value?.executionStatus ?? "unknown",
+                "consumed-tokens": consumedTokens2.value,
+                "time-took": runData.value?.executionTime
+              }, null, 8, ["class", "status", "consumed-tokens", "time-took"])) : createCommentVNode("", true)
+            ], 2)
+          ]),
           actions: withCtx(() => [
+            _ctx.isOpen && !isTriggerNode.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.actions)
+            }, [
+              createVNode(unref(N8nButton), {
+                size: "mini",
+                type: "secondary",
+                class: normalizeClass(content2.value === unref(LOG_DETAILS_CONTENT).OUTPUT ? "" : _ctx.$style.pressed),
+                onClick: withModifiers(handleToggleInput, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.input")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              createVNode(unref(N8nButton), {
+                size: "mini",
+                type: "secondary",
+                class: normalizeClass(content2.value === unref(LOG_DETAILS_CONTENT).INPUT ? "" : _ctx.$style.pressed),
+                onClick: withModifiers(handleToggleOutput, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.output")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ], 2)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "actions")
           ]),
           _: 3
@@ -4913,25 +5067,80 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           key: 0,
           class: normalizeClass(_ctx.$style.content),
           "data-test-id": "logs-details-body"
-        }, null, 2)) : createCommentVNode("", true)
+        }, [
+          !isTriggerNode.value && content2.value !== unref(LOG_DETAILS_CONTENT).OUTPUT ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
+            key: 0,
+            class: normalizeClass({
+              [_ctx.$style.inputResizer]: true,
+              [_ctx.$style.collapsed]: unref(resizer).isCollapsed.value,
+              [_ctx.$style.full]: unref(resizer).isFullSize.value
+            }),
+            width: unref(resizer).size.value,
+            style: normalizeStyle(shouldResize.value ? { width: `${unref(resizer).size.value ?? 0}px` } : void 0),
+            "supported-directions": ["right"],
+            "is-resizing-enabled": shouldResize.value,
+            window: _ctx.window,
+            onResize: unref(resizer).onResize,
+            onResizeend: handleResizeEnd
+          }, {
+            default: withCtx(() => [
+              createVNode(RunDataView, {
+                "data-test-id": "log-details-input",
+                "pane-type": "input",
+                title: unref(locale).baseText("logs.details.header.actions.input"),
+                "log-entry": _ctx.logEntry
+              }, null, 8, ["title", "log-entry"])
+            ]),
+            _: 1
+          }, 8, ["class", "width", "style", "is-resizing-enabled", "window", "onResize"])) : createCommentVNode("", true),
+          isTriggerNode.value || content2.value !== unref(LOG_DETAILS_CONTENT).INPUT ? (openBlock(), createBlock(RunDataView, {
+            key: 1,
+            "data-test-id": "log-details-output",
+            "pane-type": "output",
+            class: normalizeClass(_ctx.$style.outputPanel),
+            title: unref(locale).baseText("logs.details.header.actions.output"),
+            "log-entry": _ctx.logEntry
+          }, null, 8, ["class", "title", "log-entry"])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const container$1 = "_container_q8l5j_123";
-const content = "_content_q8l5j_133";
-const style0$1 = {
-  container: container$1,
-  content
+const container$2 = "_container_v1vl1_123";
+const actions = "_actions_v1vl1_132";
+const pressed = "_pressed_v1vl1_138";
+const title = "_title_v1vl1_142";
+const icon = "_icon_v1vl1_148";
+const name = "_name_v1vl1_152";
+const executionSummary = "_executionSummary_v1vl1_158";
+const content = "_content_v1vl1_162";
+const outputPanel = "_outputPanel_v1vl1_170";
+const inputResizer = "_inputResizer_v1vl1_175";
+const collapsed = "_collapsed_v1vl1_179";
+const full = "_full_v1vl1_179";
+const style0$2 = {
+  container: container$2,
+  actions,
+  pressed,
+  title,
+  icon,
+  name,
+  executionSummary,
+  content,
+  outputPanel,
+  inputResizer,
+  collapsed,
+  full
 };
-const cssModules$1 = {
-  "$style": style0$1
+const cssModules$2 = {
+  "$style": style0$2
 };
-const LogsDetailsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$1]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const LogsDetailsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "LogsPanelActions",
   props: {
-    panelState: {},
+    isOpen: { type: Boolean },
+    showToggleButton: { type: Boolean },
     showPopOutButton: { type: Boolean }
   },
   emits: ["popOut", "toggleOpen"],
@@ -4942,19 +5151,19 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     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"
-      )
+      () => locales.baseText(__props.isOpen ? "runData.panel.actions.collapse" : "runData.panel.actions.open")
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
         _ctx.showPopOutButton ? (openBlock(), createBlock(unref(N8nTooltip), {
           key: 0,
           "z-index": tooltipZIndex.value,
           content: popOutButtonText.value
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$i), {
+            createVNode(unref(_sfc_main$h), {
               icon: "pop-out",
               type: "secondary",
               size: "small",
@@ -4965,17 +5174,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["z-index", "content"])) : createCommentVNode("", true),
-        _ctx.panelState !== unref(LOGS_PANEL_STATE).FLOATING ? (openBlock(), createBlock(unref(N8nTooltip), {
+        _ctx.showToggleButton ? (openBlock(), createBlock(unref(N8nTooltip), {
           key: 1,
           "z-index": tooltipZIndex.value,
           content: toggleButtonText.value
         }, {
           default: withCtx(() => [
-            createVNode(unref(_sfc_main$i), {
+            createVNode(unref(_sfc_main$h), {
               type: "secondary",
               size: "small",
               "icon-size": "medium",
-              icon: _ctx.panelState === unref(LOGS_PANEL_STATE).ATTACHED ? "chevron-down" : "chevron-up",
+              icon: _ctx.isOpen ? "chevron-down" : "chevron-up",
               "aria-label": toggleButtonText.value,
               style: { "color": "var(--color-text-base)" },
               onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("toggleOpen"), ["stop"]))
@@ -4983,78 +5192,188 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["z-index", "content"])) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const container$1 = "_container_1qwjg_123";
+const style0$1 = {
+  container: container$1
+};
+const cssModules$1 = {
+  "$style": style0$1
+};
+const LogsPanelActions = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+function useLayout(pipContainer, pipContent2, container2, logsContainer2) {
+  const canvasStore = useCanvasStore();
+  const telemetry = useTelemetry();
+  const workflowsStore = useWorkflowsStore();
+  const panelState = computed(() => workflowsStore.logsPanelState);
+  const resizer = useResizablePanel(LOCAL_STORAGE_PANEL_HEIGHT, {
+    container: document.body,
+    position: "bottom",
+    snap: false,
+    defaultSize: (size) => size * 0.3,
+    minSize: 160,
+    maxSize: (size) => size * 0.75,
+    allowCollapse: true
+  });
+  const chatPanelResizer = useResizablePanel(LOCAL_STORAGE_PANEL_WIDTH, {
+    container: container2,
+    defaultSize: (size) => size * 0.3,
+    minSize: 300,
+    maxSize: (size) => size * 0.8
+  });
+  const overviewPanelResizer = useResizablePanel(LOCAL_STORAGE_OVERVIEW_PANEL_WIDTH, {
+    container: logsContainer2,
+    defaultSize: (size) => size * 0.3,
+    minSize: 80,
+    maxSize: 500,
+    allowFullSize: true
+  });
+  const isOpen = computed(
+    () => panelState.value === LOGS_PANEL_STATE.CLOSED ? resizer.isResizing.value && resizer.size.value > 0 : !resizer.isCollapsed.value
+  );
+  const isCollapsingDetailsPanel = computed(() => overviewPanelResizer.isFullSize.value);
+  const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
+    initialHeight: 400,
+    initialWidth: window.document.body.offsetWidth * 0.8,
+    container: pipContainer,
+    content: pipContent2,
+    shouldPopOut: computed(() => panelState.value === LOGS_PANEL_STATE.FLOATING),
+    onRequestClose: () => {
+      if (!isOpen.value) {
+        return;
+      }
+      telemetry.track("User toggled log view", { new_state: "attached" });
+      workflowsStore.setPreferPoppedOutLogsView(false);
+    }
+  });
+  function handleToggleOpen(open) {
+    const wasOpen = panelState.value !== LOGS_PANEL_STATE.CLOSED;
+    if (open === wasOpen) {
+      return;
+    }
+    workflowsStore.toggleLogsPanelOpen(open);
+    telemetry.track("User toggled log view", {
+      new_state: wasOpen ? "collapsed" : "attached"
+    });
+  }
+  function handlePopOut() {
+    telemetry.track("User toggled log view", { new_state: "floating" });
+    workflowsStore.toggleLogsPanelOpen(true);
+    workflowsStore.setPreferPoppedOutLogsView(true);
+  }
+  function handleResizeEnd() {
+    if (panelState.value === LOGS_PANEL_STATE.CLOSED && !resizer.isCollapsed.value) {
+      handleToggleOpen(true);
+    }
+    if (resizer.isCollapsed.value) {
+      handleToggleOpen(false);
+    }
+    resizer.onResizeEnd();
+  }
+  watch([panelState, resizer.size], ([state, height]) => {
+    canvasStore.setPanelHeight(
+      state === LOGS_PANEL_STATE.FLOATING ? 0 : state === LOGS_PANEL_STATE.ATTACHED ? height : 32
+    );
+  });
+  return {
+    height: resizer.size,
+    chatPanelWidth: chatPanelResizer.size,
+    overviewPanelWidth: overviewPanelResizer.size,
+    canPopOut,
+    isOpen,
+    isCollapsingDetailsPanel,
+    isPoppedOut,
+    isOverviewPanelFullWidth: overviewPanelResizer.isFullSize,
+    pipWindow,
+    onToggleOpen: handleToggleOpen,
+    onPopOut: handlePopOut,
+    onResize: resizer.onResize,
+    onResizeEnd: handleResizeEnd,
+    onChatPanelResize: chatPanelResizer.onResize,
+    onChatPanelResizeEnd: chatPanelResizer.onResizeEnd,
+    onOverviewPanelResize: overviewPanelResizer.onResize,
+    onOverviewPanelResizeEnd: overviewPanelResizer.onResizeEnd
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LogsPanel",
+  props: {
+    isReadOnly: { type: Boolean, default: false }
+  },
   setup(__props) {
+    const props = __props;
     const workflowsStore = useWorkflowsStore();
-    const canvasStore = useCanvasStore();
-    const panelState = computed(() => workflowsStore.logsPanelState);
-    const container2 = ref();
-    const selectedLogEntry = ref(void 0);
+    const container2 = useTemplateRef("container");
+    const logsContainer2 = useTemplateRef("logsContainer");
     const pipContainer = useTemplateRef("pipContainer");
     const pipContent2 = useTemplateRef("pipContent");
     const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
+    const {
+      height,
+      chatPanelWidth,
+      overviewPanelWidth,
+      canPopOut,
+      isOpen,
+      isPoppedOut,
+      isCollapsingDetailsPanel,
+      isOverviewPanelFullWidth,
+      pipWindow,
+      onResize,
+      onResizeEnd,
+      onToggleOpen,
+      onPopOut,
+      onChatPanelResize,
+      onChatPanelResizeEnd,
+      onOverviewPanelResize,
+      onOverviewPanelResizeEnd
+    } = useLayout(pipContainer, pipContent2, container2, logsContainer2);
+    const { currentSessionId, messages: messages2, sendMessage, refreshSession, displayExecution } = useChatState(
+      props.isReadOnly
+    );
     const hasChat = computed(
-      () => workflowsStore.workflowTriggerNodes.some(
-        (node) => [CHAT_TRIGGER_NODE_TYPE$1, MANUAL_CHAT_TRIGGER_NODE_TYPE].includes(node.type)
+      () => workflowsStore.workflowTriggerNodes.some(isChatNode) && (!props.isReadOnly || messages2.value.length > 0)
+    );
+    const workflow = computed(() => workflowsStore.getCurrentWorkflow());
+    const executionTree = computed(
+      () => createLogEntries(
+        workflow.value,
+        workflowsStore.workflowExecutionData?.data?.resultData.runData ?? {}
       )
     );
-    const telemetry = useTelemetry();
-    const { rootStyles, height, chatWidth, onWindowResize, onResizeDebounced, onResizeChatDebounced } = useResize(container2);
-    const { currentSessionId, messages: messages2, sendMessage, refreshSession, displayExecution } = useChatState(
-      ref(false),
-      onWindowResize
+    const manualLogEntrySelection = ref({ type: "initial" });
+    const autoSelectedLogEntry = computed(
+      () => findLogEntryToAutoSelect(
+        executionTree.value,
+        workflowsStore.nodesByName,
+        workflowsStore.workflowExecutionData?.data?.resultData.runData ?? {}
+      )
     );
-    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 === LOGS_PANEL_STATE.FLOATING),
-      onRequestClose: () => {
-        if (panelState.value === LOGS_PANEL_STATE.CLOSED) {
-          return;
-        }
-        telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.setPreferPoppedOutLogsView(false);
-      }
-    });
+    const selectedLogEntry = computed(
+      () => manualLogEntrySelection.value.type === "initial" || manualLogEntrySelection.value.workflowId !== workflowsStore.workflow.id ? autoSelectedLogEntry.value : manualLogEntrySelection.value.type === "none" ? void 0 : manualLogEntrySelection.value.data
+    );
+    const isLogDetailsOpen = computed(
+      () => selectedLogEntry.value !== void 0 && !isCollapsingDetailsPanel.value
+    );
+    const isLogDetailsOpenOrCollapsing = computed(() => selectedLogEntry.value !== void 0);
     const logsPanelActionsProps = computed(() => ({
-      panelState: panelState.value,
+      isOpen: isOpen.value,
+      showToggleButton: !isPoppedOut.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 === LOGS_PANEL_STATE.CLOSED) {
-        telemetry.track("User toggled log view", { new_state: "attached" });
-        workflowsStore.toggleLogsPanelOpen(true);
-      }
-    }
     function handleSelectLogEntry(selected2) {
-      selectedLogEntry.value = selected2;
+      manualLogEntrySelection.value = selected2 === void 0 ? { type: "none", workflowId: workflowsStore.workflow.id } : { type: "selected", workflowId: workflowsStore.workflow.id, data: selected2 };
     }
-    function onPopOut() {
-      telemetry.track("User toggled log view", { new_state: "floating" });
-      workflowsStore.toggleLogsPanelOpen(true);
-      workflowsStore.setPreferPoppedOutLogsView(true);
+    function handleResizeOverviewPanelEnd() {
+      if (isOverviewPanelFullWidth.value) {
+        handleSelectLogEntry(void 0);
+      }
+      onOverviewPanelResizeEnd();
     }
-    watch([panelState, height], ([state, h]) => {
-      canvasStore.setPanelHeight(
-        state === LOGS_PANEL_STATE.FLOATING ? 0 : state === LOGS_PANEL_STATE.ATTACHED ? h : 32
-      );
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "pipContainer",
@@ -5068,10 +5387,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           createVNode(unref(N8nResizeWrapper), {
             height: unref(height),
             "supported-directions": ["top"],
-            "is-resizing-enabled": panelState.value === unref(LOGS_PANEL_STATE).ATTACHED,
-            style: normalizeStyle(unref(rootStyles)),
-            class: normalizeClass([_ctx.$style.resizeWrapper, panelState.value === unref(LOGS_PANEL_STATE).CLOSED ? "" : _ctx.$style.isOpen]),
-            onResize: unref(onResizeDebounced)
+            "is-resizing-enabled": !unref(isPoppedOut),
+            class: normalizeClass(_ctx.$style.resizeWrapper),
+            style: normalizeStyle({ height: unref(isOpen) ? `${unref(height)}px` : "auto" }),
+            onResize: unref(onResize),
+            onResizeend: unref(onResizeEnd)
           }, {
             default: withCtx(() => [
               createBaseVNode("div", {
@@ -5083,92 +5403,116 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 hasChat.value ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
                   key: 0,
                   "supported-directions": ["right"],
-                  "is-resizing-enabled": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
-                  width: unref(chatWidth),
+                  "is-resizing-enabled": unref(isOpen),
+                  width: unref(chatPanelWidth),
+                  style: normalizeStyle({ width: `${unref(chatPanelWidth)}px` }),
                   class: normalizeClass(_ctx.$style.chat),
                   window: unref(pipWindow),
-                  onResize: unref(onResizeChatDebounced)
+                  onResize: unref(onChatPanelResize),
+                  onResizeend: unref(onChatPanelResizeEnd)
                 }, {
                   default: withCtx(() => [
                     createVNode(ChatMessagesPanel, {
                       "data-test-id": "canvas-chat",
-                      "is-open": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
+                      "is-open": unref(isOpen),
+                      "is-read-only": _ctx.isReadOnly,
                       messages: unref(messages2),
                       "session-id": unref(currentSessionId),
                       "past-chat-messages": previousChatMessages.value,
                       "show-close-button": false,
                       "is-new-logs-enabled": true,
-                      onClose: onToggleOpen,
+                      onClose: unref(onToggleOpen),
                       onRefreshSession: unref(refreshSession),
                       onDisplayExecution: unref(displayExecution),
                       onSendMessage: unref(sendMessage),
-                      onClickHeader: handleClickHeader
-                    }, null, 8, ["is-open", "messages", "session-id", "past-chat-messages", "onRefreshSession", "onDisplayExecution", "onSendMessage"])
-                  ]),
-                  _: 1
-                }, 8, ["is-resizing-enabled", "width", "class", "window", "onResize"])) : createCommentVNode("", true),
-                createVNode(LogsOverviewPanel, {
-                  class: normalizeClass(_ctx.$style.logsOverview),
-                  "is-open": panelState.value !== unref(LOGS_PANEL_STATE).CLOSED,
-                  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", "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(() => [
-                    isLogDetailsOpen.value ? (openBlock(), createBlock(_sfc_main$2, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
+                      onClickHeader: _cache[0] || (_cache[0] = ($event) => unref(onToggleOpen)(true))
+                    }, null, 8, ["is-open", "is-read-only", "messages", "session-id", "past-chat-messages", "onClose", "onRefreshSession", "onDisplayExecution", "onSendMessage"])
                   ]),
                   _: 1
-                }, 8, ["class", "is-open"])) : createCommentVNode("", true)
+                }, 8, ["is-resizing-enabled", "width", "style", "class", "window", "onResize", "onResizeend"])) : createCommentVNode("", true),
+                createBaseVNode("div", {
+                  ref_key: "logsContainer",
+                  ref: logsContainer2,
+                  class: normalizeClass(_ctx.$style.logsContainer)
+                }, [
+                  createVNode(unref(N8nResizeWrapper), {
+                    class: normalizeClass(_ctx.$style.overviewResizer),
+                    width: unref(overviewPanelWidth),
+                    style: normalizeStyle({ width: isLogDetailsOpen.value ? `${unref(overviewPanelWidth)}px` : "" }),
+                    "supported-directions": ["right"],
+                    "is-resizing-enabled": isLogDetailsOpenOrCollapsing.value,
+                    window: unref(pipWindow),
+                    onResize: unref(onOverviewPanelResize),
+                    onResizeend: handleResizeOverviewPanelEnd
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(LogsOverviewPanel, {
+                        class: normalizeClass(_ctx.$style.logsOverview),
+                        "is-open": unref(isOpen),
+                        "is-read-only": _ctx.isReadOnly,
+                        "is-compact": isLogDetailsOpen.value,
+                        selected: selectedLogEntry.value,
+                        "execution-tree": executionTree.value,
+                        onClickHeader: _cache[1] || (_cache[1] = ($event) => unref(onToggleOpen)(true)),
+                        onSelect: handleSelectLogEntry
+                      }, {
+                        actions: withCtx(() => [
+                          !isLogDetailsOpen.value ? (openBlock(), createBlock(LogsPanelActions, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
+                        ]),
+                        _: 1
+                      }, 8, ["class", "is-open", "is-read-only", "is-compact", "selected", "execution-tree"])
+                    ]),
+                    _: 1
+                  }, 8, ["class", "width", "style", "is-resizing-enabled", "window", "onResize"]),
+                  isLogDetailsOpenOrCollapsing.value && selectedLogEntry.value ? (openBlock(), createBlock(LogsDetailsPanel, {
+                    key: 0,
+                    class: normalizeClass(_ctx.$style.logDetails),
+                    "is-open": unref(isOpen),
+                    "log-entry": selectedLogEntry.value,
+                    window: unref(pipWindow),
+                    onClickHeader: _cache[2] || (_cache[2] = ($event) => unref(onToggleOpen)(true))
+                  }, {
+                    actions: withCtx(() => [
+                      isLogDetailsOpen.value ? (openBlock(), createBlock(LogsPanelActions, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  }, 8, ["class", "is-open", "log-entry", "window"])) : createCommentVNode("", true)
+                ], 2)
               ], 2)
             ]),
             _: 1
-          }, 8, ["height", "is-resizing-enabled", "style", "class", "onResize"])
+          }, 8, ["height", "is-resizing-enabled", "class", "style", "onResize", "onResizeend"])
         ], 2)
       ], 512);
     };
   }
 });
-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 resizeWrapper = "_resizeWrapper_19m2p_124";
+const pipContent = "_pipContent_19m2p_129";
+const container = "_container_19m2p_143";
+const chat = "_chat_19m2p_152";
+const logsContainer = "_logsContainer_19m2p_156";
+const overviewResizer = "_overviewResizer_19m2p_166";
+const logsOverview = "_logsOverview_19m2p_174";
+const logsDetails = "_logsDetails_19m2p_178";
 const style0 = {
   resizeWrapper,
   pipContent,
-  isOpen,
   container,
   chat,
+  logsContainer,
+  overviewResizer,
   logsOverview,
-  logDetails
+  logsDetails
 };
 const cssModules = {
   "$style": style0
 };
-const LogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules]]);
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "CanvasChatSwitch",
-  setup(__props) {
-    const { isNewLogsEnabled } = useSettingsStore();
-    return (_ctx, _cache) => {
-      const _component_CanvasChat = __unplugin_components_0;
-      return unref(isNewLogsEnabled) ? (openBlock(), createBlock(LogsPanel, { key: 0 })) : (openBlock(), createBlock(_component_CanvasChat, { key: 1 }));
-    };
-  }
-});
+const LogsPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
-  _sfc_main as default
+  ChatMessagesPanel as C,
+  LogsPanel as L,
+  usePiPWindow as a,
+  useChatState as b,
+  useResize as u
 };