n8n-editor-ui 1.93.0 → 1.94.1

package/dist/assets/{LogsPanel-D9r5AcQH.js → LogsPanel-dLKjFOi5.js}

@@ -1,7 +1,7 @@
-import { b0 as inject, b1 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, b2 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, aA as withDirectives, bc as vModelText, bd as withKeys, w as withCtx, X as watch, h as resolveComponent, l as createTextVNode, be as N8nText, bf as useClipboard, a as useToast, c as useI18n$1, aR as N8nTooltip, bg as N8nButton, aT as _sfc_main$i, aV as createSlots, aJ as useStorage, a_ as watchEffect, y as onBeforeUnmount, G as useDebounce, bh as provide, bi as useProvideTooltipAppendTo, bj as IsInPiPWindowSymbol, bk as CHAT_TRIGGER_NODE_TYPE, bl as MANUAL_CHAT_TRIGGER_NODE_TYPE, bm as NodeConnectionTypes, bn as v4, bo as get, bp as isEmpty, bq as usePinnedData, ai as useMessage, aj as MODAL_CONFIRM, br as CHAIN_SUMMARIZATION_LANGCHAIN_NODE_TYPE, bs as AI_SUBCATEGORY, bt as AI_CATEGORY_AGENTS, bu as AI_CATEGORY_CHAINS, bv as AI_CODE_NODE_TYPE, bw as getNodeInputs, bx as getConnectionTypes, by as getNodeOutputs, Q as useWorkflowsStore, bz as useNodeTypesStore, b as useRouter, bA as useNodeHelpers, bB as useRunWorkflow, V as VIEWS, aZ as LOGS_PANEL_STATE, bC as _sfc_main$k, bD as I18nT, bE as N8nIcon, bF as upperFirst, as as useNDVStore, bG as useVirtualList, bH as N8nRadioButtons, ag as useTelemetry, z as nextTick, bI as ndvEventBus, aS as N8nLink, av as useLocalStorage, bJ as LOG_DETAILS_CONTENT, aY as useTemplateRef, a$ as N8nResizeWrapper, bK as useStyles, $ as useCanvasStore, bL as Workflow, bM as IN_PROGRESS_EXECUTION_ID, bN as useThrottleFn } from "./index-DZ6VpjNj.js";
-import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible-Dwc1_eG9.js";
-import { H as HighlightJS, f as formatTokenUsageCount, _ as _sfc_main$j, g as getSubtreeTotalConsumedTokens, a as getTotalConsumedTokens, b as flattenLogEntries, R as RunData, c as createLogEntries, d as deepToRaw, e as findSelectedLogEntry } from "./RunData-b0RE2JWc.js";
-import { t as toTime, a as toDayMonth } from "./dateFormatter-BPfJSa6q.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, b3 as withModifiers, _ as _export_sfc, b4 as toRefs, r as ref, o as onMounted, n as normalizeClass, x as renderSlot, b5 as normalizeProps, b6 as guardReactiveProps, b7 as resolveDynamicComponent, b8 as mergeProps, F as Fragment, D as renderList, b9 as markdownLink, ba as useFileDialog, bb as chatEventBus, bc as onUnmounted, B as normalizeStyle, aA as withDirectives, bd as vModelText, be as withKeys, w as withCtx, X as watch, h as resolveComponent, l as createTextVNode, bf as N8nText, bg as useClipboard, a as useToast, p as useSettingsStore, c as useI18n$1, aR as N8nTooltip, bh as N8nButton, aT as _sfc_main$i, aV as createSlots, aJ as useStorage, a$ as watchEffect, y as onBeforeUnmount, G as useDebounce, bi as provide, bj as useProvideTooltipAppendTo, bk as IsInPiPWindowSymbol, bl as usePinnedData, ai as useMessage, aj as MODAL_CONFIRM, bm as v4, bn as getInputKey, bo as extractBotResponse, bp as isChatNode, 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, by as NodeConnectionTypes, Q as useWorkflowsStore, bz as useNodeTypesStore, aY as useLogsStore, b as useRouter, bA as useNodeHelpers, bB as useRunWorkflow, bC as restoreChatHistory, V as VIEWS, aZ as useTemplateRef, bD as _sfc_main$k, bE as I18nT, bF as N8nIcon, bG as upperFirst, z as nextTick, bH as useVirtualList, bI as toRef, bJ as N8nRadioButtons, as as useNDVStore, aS as N8nLink, av as useLocalStorage, bK as LOG_DETAILS_PANEL_STATE, bL as KeyboardShortcutTooltip, b0 as N8nResizeWrapper, bM as useStyles, a_ as LOGS_PANEL_STATE, ag as useTelemetry, bN as Workflow, bO as useThrottleFn, bP as parse, bQ as ndvEventBus } from "./index-BEvy7DZc.js";
+import { u as useClearExecutionButtonVisible } from "./useClearExecutionButtonVisible--2zd8JTS.js";
+import { H as HighlightJS, V as VueMarkdown, f as formatTokenUsageCount, _ as _sfc_main$j, g as getSubtreeTotalConsumedTokens, a as getTotalConsumedTokens, h as hasSubExecution, R as RunData, c as createLogTree, d as deepToRaw, m as mergeStartData, b as findSelectedLogEntry, e as getEntryAtRelativeIndex, i as getDepth, j as flattenLogEntries } from "./RunData-D3endKo8.js";
+import { t as toTime, a as toDayMonth } from "./dateFormatter-DNA1ez0J.js";
 function bash(hljs) {
   const regex = hljs.regex;
   const VAR = {};
@@ -2797,39 +2797,6 @@ function render(_ctx, _cache) {
   ]));
 }
 const IconSend = { name: "mdi-send", render };
-function createEventBus() {
-  const handlers = /* @__PURE__ */ new Map();
-  function off(eventName, fn) {
-    const eventFns = handlers.get(eventName);
-    if (eventFns) {
-      eventFns.splice(eventFns.indexOf(fn) >>> 0, 1);
-    }
-  }
-  function on(eventName, fn) {
-    let eventFns = handlers.get(eventName);
-    if (!eventFns) {
-      eventFns = [fn];
-    } else {
-      eventFns.push(fn);
-    }
-    handlers.set(eventName, eventFns);
-    return () => off(eventName, fn);
-  }
-  function emit(eventName, event) {
-    const eventFns = handlers.get(eventName);
-    if (eventFns) {
-      eventFns.slice().forEach(async (handler) => {
-        await handler(event);
-      });
-    }
-  }
-  return {
-    on,
-    off,
-    emit
-  };
-}
-const chatEventBus = createEventBus();
 const _hoisted_1$4 = { class: "chat-inputs" };
 const _hoisted_2$2 = {
   key: 0,
@@ -3268,7 +3235,7 @@ const cssModules$a = {
 };
 const MessageOptionAction = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$a]]);
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "PanelHeader",
+  __name: "LogsPanelHeader",
   props: {
     title: {}
   },
@@ -3312,7 +3279,7 @@ const style0$9 = {
 const cssModules$9 = {
   "$style": style0$9
 };
-const PanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
+const LogsPanelHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
 const _hoisted_1$2 = ["onClick"];
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ChatMessagesPanel",
@@ -3332,6 +3299,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const clipboard = useClipboard();
     const locale = useI18n$1();
     const toast = useToast();
+    const settingsStore = useSettingsStore();
     const previousMessageIndex = ref(0);
     const sessionIdText = computed(
       () => locale.baseText("chat.window.session.id", {
@@ -3398,7 +3366,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     watch(
       () => props.isOpen,
       (isOpen) => {
-        if (isOpen) {
+        if (isOpen && !settingsStore.isNewLogsEnabled) {
           setTimeout(() => {
             chatEventBus.emit("focusInput");
           }, 0);
@@ -3408,10 +3376,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.chat),
-        "data-test-id": "workflow-lm-chat-dialog"
+        class: normalizeClass([_ctx.$style.chat, "ignore-key-press-canvas"]),
+        "data-test-id": "workflow-lm-chat-dialog",
+        tabindex: "0"
       }, [
-        _ctx.isNewLogsEnabled ? (openBlock(), createBlock(PanelHeader, {
+        _ctx.isNewLogsEnabled ? (openBlock(), createBlock(LogsPanelHeader, {
           key: 0,
           "data-test-id": "chat-header",
           title: unref(locale).baseText("chat.window.title"),
@@ -3775,85 +3744,6 @@ 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,
@@ -4046,13 +3936,13 @@ function useChatState(isReadOnly) {
   const locale = useI18n$1();
   const workflowsStore = useWorkflowsStore();
   const nodeTypesStore = useNodeTypesStore();
+  const logsStore = useLogsStore();
   const router = useRouter();
   const nodeHelpers = useNodeHelpers();
   const { runWorkflow } = useRunWorkflow({ router });
   const messages2 = ref([]);
   const currentSessionId = ref(v4().replace(/-/g, ""));
   const previousChatMessages = computed(() => workflowsStore.getPastChatMessages);
-  const logsPanelState = computed(() => workflowsStore.logsPanelState);
   const workflow = computed(() => workflowsStore.getCurrentWorkflow());
   const { chatTriggerNode, connectedNode, allowFileUploads, allowedFilesMimeTypes } = useChatTrigger({
     workflow,
@@ -4146,7 +4036,7 @@ function useChatState(isReadOnly) {
     nodeHelpers.updateNodesExecutionIssues();
     messages2.value = [];
     currentSessionId.value = v4().replace(/-/g, "");
-    if (logsPanelState.value !== LOGS_PANEL_STATE.CLOSED) {
+    if (logsStore.isOpen) {
       chatEventBus.emit("focusInput");
     }
   }
@@ -4169,7 +4059,7 @@ function useChatState(isReadOnly) {
   };
 }
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "ConsumedTokenCountText",
+  __name: "LogsViewConsumedTokenCountText",
   props: {
     consumedTokens: {}
   },
@@ -4199,7 +4089,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$1 = { key: 0 };
 const _hoisted_2 = { key: 1 };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "NodeName",
+  __name: "LogsViewNodeName",
   props: {
     name: {},
     latestName: {},
@@ -4231,7 +4121,7 @@ const style0$7 = {
 const cssModules$7 = {
   "$style": style0$7
 };
-const NodeName = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$7]]);
+const LogsViewNodeName = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$7]]);
 const _hoisted_1 = ["aria-expanded", "aria-selected"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewRow",
@@ -4239,15 +4129,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     data: {},
     isSelected: { type: Boolean },
     isReadOnly: { type: Boolean },
-    shouldShowConsumedTokens: { type: Boolean },
+    shouldShowTokenCountColumn: { type: Boolean },
     isCompact: { type: Boolean },
     latestInfo: {},
-    expanded: { type: Boolean }
+    expanded: { type: Boolean },
+    canOpenNdv: { type: Boolean }
   },
-  emits: ["toggleExpanded", "triggerPartialExecution", "openNdv"],
+  emits: ["toggleExpanded", "toggleSelected", "triggerPartialExecution", "openNdv"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const container2 = useTemplateRef("containerRef");
     const locale = useI18n$1();
     const nodeTypeStore = useNodeTypesStore();
     const type = computed(() => nodeTypeStore.getNodeType(props.data.node.type));
@@ -4264,7 +4156,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       });
     });
     const subtreeConsumedTokens = computed(
-      () => props.shouldShowConsumedTokens ? getSubtreeTotalConsumedTokens(props.data) : void 0
+      () => props.shouldShowTokenCountColumn ? getSubtreeTotalConsumedTokens(props.data, false) : void 0
+    );
+    const hasChildren = computed(
+      () => props.data.children.length > 0 || !!props.data.runData.metadata?.subExecution
     );
     function isLastChild(level) {
       let parent = props.data.parent;
@@ -4277,11 +4172,23 @@ const _sfc_main$6 = /* @__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,
+      (isSelected) => {
+        void nextTick(() => {
+          if (isSelected) {
+            container2.value?.focus();
+          }
+        });
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       const _component_NodeIcon = _sfc_main$k;
       return openBlock(), createElementBlock("div", {
+        ref: "containerRef",
         role: "treeitem",
-        tabindex: "0",
+        tabindex: "-1",
         "aria-expanded": props.data.children.length > 0 && props.expanded,
         "aria-selected": props.isSelected,
         class: normalizeClass({
@@ -4289,7 +4196,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           [_ctx.$style.compact]: props.isCompact,
           [_ctx.$style.error]: isError.value,
           [_ctx.$style.selected]: props.isSelected
-        })
+        }),
+        onClick: _cache[3] || (_cache[3] = withModifiers(($event) => emit("toggleSelected"), ["stop"]))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(props.data.depth, (level) => {
           return openBlock(), createElementBlock("div", {
@@ -4310,7 +4218,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           size: 16,
           class: normalizeClass(_ctx.$style.icon)
         }, null, 8, ["node-type", "class"]),
-        createVNode(NodeName, {
+        createVNode(LogsViewNodeName, {
           class: normalizeClass(_ctx.$style.name),
           "latest-name": _ctx.latestInfo?.name ?? props.data.node.name,
           name: props.data.node.name,
@@ -4397,12 +4305,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           type: "secondary",
           size: "medium",
           icon: "edit",
-          style: { "color": "var(--color-text-base)" },
+          style: normalizeStyle([{ "color": "var(--color-text-base)" }, {
+            visibility: props.canOpenNdv ? "" : "hidden",
+            color: "var(--color-text-base)"
+          }]),
           disabled: props.latestInfo?.deleted,
           class: normalizeClass(_ctx.$style.openNdvButton),
           "aria-label": unref(locale).baseText("logs.overview.body.open"),
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("openNdv", props.data), ["stop"]))
-        }, null, 8, ["disabled", "class", "aria-label"])) : createCommentVNode("", true),
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("openNdv"), ["stop"]))
+        }, null, 8, ["style", "disabled", "class", "aria-label"])) : createCommentVNode("", true),
         !_ctx.isCompact || !props.isReadOnly && !props.latestInfo?.deleted && !props.latestInfo?.disabled ? (openBlock(), createBlock(unref(_sfc_main$i), {
           key: 5,
           type: "secondary",
@@ -4412,21 +4323,21 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           "aria-label": unref(locale).baseText("logs.overview.body.run"),
           class: normalizeClass([_ctx.$style.partialExecutionButton, props.data.depth > 0 ? _ctx.$style.unavailable : ""]),
           disabled: props.latestInfo?.deleted || props.latestInfo?.disabled,
-          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("triggerPartialExecution", props.data), ["stop"]))
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("triggerPartialExecution"), ["stop"]))
         }, null, 8, ["aria-label", "class", "disabled"])) : createCommentVNode("", true),
-        !_ctx.isCompact || props.data.children.length > 0 ? (openBlock(), createBlock(unref(N8nButton), {
+        !_ctx.isCompact || hasChildren.value ? (openBlock(), createBlock(unref(N8nButton), {
           key: 6,
           type: "secondary",
           size: "small",
           square: true,
           style: normalizeStyle({
-            visibility: props.data.children.length === 0 ? "hidden" : "",
+            visibility: hasChildren.value ? "" : "hidden",
             color: "var(--color-text-base)"
             // give higher specificity than the style from the component itself
           }),
           class: normalizeClass(_ctx.$style.toggleButton),
           "aria-label": unref(locale).baseText("logs.overview.body.toggleRow"),
-          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("toggleExpanded", props.data), ["stop"]))
+          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("toggleExpanded"), ["stop"]))
         }, {
           default: withCtx(() => [
             createVNode(unref(N8nIcon), {
@@ -4485,7 +4396,7 @@ const cssModules$6 = {
 };
 const LogsOverviewRow = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$6]]);
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "ExecutionSummary",
+  __name: "LogsViewExecutionSummary",
   props: {
     status: {},
     consumedTokens: {},
@@ -4527,7 +4438,7 @@ const style0$5 = {
 const cssModules$5 = {
   "$style": style0$5
 };
-const ExecutionSummary = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
+const LogsViewExecutionSummary = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "LogsOverviewPanel",
   props: {
@@ -4536,62 +4447,49 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     isReadOnly: { type: Boolean },
     isCompact: { type: Boolean },
     execution: {},
-    latestNodeInfo: {},
-    scrollToSelection: { type: Boolean }
+    entries: {},
+    flatLogEntries: {},
+    latestNodeInfo: {}
   },
-  emits: ["clickHeader", "select", "clearExecutionData"],
+  emits: ["clickHeader", "select", "clearExecutionData", "openNdv", "toggleExpanded", "loadSubExecution"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const locale = useI18n$1();
-    const telemetry = useTelemetry();
     const router = useRouter();
     const runWorkflow = useRunWorkflow({ router });
-    const ndvStore = useNDVStore();
     const isClearExecutionButtonVisible = useClearExecutionButtonVisible();
-    const isEmpty2 = computed(() => __props.execution === void 0);
+    const isEmpty = computed(() => __props.flatLogEntries.length === 0 || __props.execution === void 0);
     const switchViewOptions = computed(() => [
       { label: locale.baseText("logs.overview.header.switch.overview"), value: "overview" },
       { label: locale.baseText("logs.overview.header.switch.details"), value: "details" }
     ]);
     const consumedTokens2 = computed(
-      () => getTotalConsumedTokens(...(__props.execution?.tree ?? []).map(getSubtreeTotalConsumedTokens))
+      () => getTotalConsumedTokens(
+        ...__props.entries.map(
+          (entry) => getSubtreeTotalConsumedTokens(
+            entry,
+            false
+            // Exclude token usages from sub workflow which is loaded only after expanding the row
+          )
+        )
+      )
     );
-    const collapsedEntries = ref({});
-    const flatLogEntries = computed(
-      () => flattenLogEntries(__props.execution?.tree ?? [], collapsedEntries.value)
+    const shouldShowTokenCountColumn = computed(
+      () => consumedTokens2.value.totalTokens > 0 || __props.entries.some((entry) => getSubtreeTotalConsumedTokens(entry, true).totalTokens > 0)
+    );
+    const virtualList = useVirtualList(
+      toRef(() => __props.flatLogEntries),
+      { itemHeight: 32 }
     );
-    const virtualList = useVirtualList(flatLogEntries, { itemHeight: 32 });
-    function handleClickNode(clicked) {
-      if (__props.selected?.node === clicked.node && __props.selected?.runIndex === clicked.runIndex) {
-        emit("select", void 0);
-        return;
-      }
-      emit("select", clicked);
-      telemetry.track("User selected node in log view", {
-        node_type: clicked.node.type,
-        node_id: clicked.node.id,
-        execution_id: __props.execution?.id,
-        workflow_id: __props.execution?.workflowData.id
-      });
-    }
     function handleSwitchView(value) {
-      emit(
-        "select",
-        value === "overview" || (__props.execution?.tree ?? []).length === 0 ? void 0 : __props.execution?.tree[0]
-      );
+      emit("select", value === "overview" ? void 0 : __props.flatLogEntries[0]);
     }
     function handleToggleExpanded(treeNode) {
-      collapsedEntries.value[treeNode.id] = !collapsedEntries.value[treeNode.id];
-    }
-    async function handleOpenNdv(treeNode) {
-      ndvStore.setActiveNodeName(treeNode.node.name);
-      await nextTick(() => {
-        const source = treeNode.runData.source[0];
-        const inputBranch = source?.previousNodeOutput ?? 0;
-        ndvEventBus.emit("updateInputNodeName", source?.previousNode);
-        ndvEventBus.emit("setInputBranchIndex", inputBranch);
-        ndvStore.setOutputRunIndex(treeNode.runIndex);
-      });
+      if (hasSubExecution(treeNode) && treeNode.children.length === 0) {
+        emit("loadSubExecution", treeNode);
+        return;
+      }
+      emit("toggleExpanded", treeNode);
     }
     async function handleTriggerPartialExecution(treeNode) {
       const latestName = __props.latestNodeInfo[treeNode.node.id]?.name ?? treeNode.node.name;
@@ -4600,10 +4498,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     }
     watch(
-      () => __props.scrollToSelection ? __props.selected : void 0,
-      async (entry) => {
-        if (entry) {
-          const index = flatLogEntries.value.findIndex((e) => e.id === entry.id);
+      () => __props.selected,
+      async (selection) => {
+        if (selection && virtualList.list.value.every((e) => e.data.id !== selection.id)) {
+          const index = __props.flatLogEntries.findIndex((e) => e.id === selection?.id);
           if (index >= 0) {
             await nextTick(() => virtualList.scrollTo(index));
           }
@@ -4616,7 +4514,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.container),
         "data-test-id": "logs-overview"
       }, [
-        createVNode(PanelHeader, {
+        createVNode(LogsPanelHeader, {
           title: unref(locale).baseText("logs.overview.header.title"),
           "data-test-id": "logs-overview-header",
           onClick: _cache[1] || (_cache[1] = ($event) => emit("clickHeader"))
@@ -4632,6 +4530,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   type: "secondary",
                   icon: "trash",
                   "icon-size": "medium",
+                  "data-test-id": "clear-execution-data-button",
                   class: normalizeClass(_ctx.$style.clearButton),
                   onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("clearExecutionData"), ["stop"]))
                 }, {
@@ -4649,10 +4548,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }, 8, ["title"]),
         _ctx.isOpen ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass([_ctx.$style.content, isEmpty2.value ? _ctx.$style.empty : ""]),
+          class: normalizeClass([_ctx.$style.content, isEmpty.value ? _ctx.$style.empty : ""]),
           "data-test-id": "logs-overview-body"
         }, [
-          isEmpty2.value ? (openBlock(), createBlock(unref(N8nText), {
+          isEmpty.value || _ctx.execution === void 0 ? (openBlock(), createBlock(unref(N8nText), {
             key: 0,
             tag: "p",
             size: "medium",
@@ -4665,14 +4564,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            _ctx.execution ? (openBlock(), createBlock(ExecutionSummary, {
-              key: 0,
+            createVNode(LogsViewExecutionSummary, {
               "data-test-id": "logs-overview-status",
               class: normalizeClass(_ctx.$style.summary),
               status: _ctx.execution.status,
               "consumed-tokens": consumedTokens2.value,
               "time-took": _ctx.execution.startedAt && _ctx.execution.stoppedAt ? +new Date(_ctx.execution.stoppedAt) - +new Date(_ctx.execution.startedAt) : void 0
-            }, null, 8, ["class", "status", "consumed-tokens", "time-took"])) : createCommentVNode("", true),
+            }, null, 8, ["class", "status", "consumed-tokens", "time-took"]),
             createBaseVNode("div", mergeProps({
               class: _ctx.$style.tree
             }, unref(virtualList).containerProps), [
@@ -4682,16 +4580,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                     key: index,
                     data,
                     "is-read-only": _ctx.isReadOnly,
-                    "is-selected": data.node.name === _ctx.selected?.node.name && data.runIndex === _ctx.selected?.runIndex,
+                    "is-selected": data.id === _ctx.selected?.id,
                     "is-compact": _ctx.isCompact,
-                    "should-show-consumed-tokens": consumedTokens2.value.totalTokens > 0,
+                    "should-show-token-count-column": shouldShowTokenCountColumn.value,
                     "latest-info": _ctx.latestNodeInfo[data.node.id],
-                    expanded: !collapsedEntries.value[data.id],
-                    onClick: withModifiers(($event) => handleClickNode(data), ["stop"]),
-                    onToggleExpanded: handleToggleExpanded,
-                    onOpenNdv: handleOpenNdv,
-                    onTriggerPartialExecution: handleTriggerPartialExecution
-                  }, null, 8, ["data", "is-read-only", "is-selected", "is-compact", "should-show-consumed-tokens", "latest-info", "expanded", "onClick"]);
+                    expanded: unref(virtualList).list.value[index + 1]?.data.parent?.id === data.id,
+                    "can-open-ndv": data.executionId === _ctx.execution?.id,
+                    onToggleExpanded: ($event) => handleToggleExpanded(data),
+                    onOpenNdv: ($event) => emit("openNdv", data),
+                    onTriggerPartialExecution: ($event) => handleTriggerPartialExecution(data),
+                    onToggleSelected: ($event) => emit("select", _ctx.selected?.id === data.id ? void 0 : data)
+                  }, null, 8, ["data", "is-read-only", "is-selected", "is-compact", "should-show-token-count-column", "latest-info", "expanded", "can-open-ndv", "onToggleExpanded", "onOpenNdv", "onTriggerPartialExecution", "onToggleSelected"]);
                 }), 128))
               ], 16)
             ], 16),
@@ -4731,13 +4630,11 @@ const cssModules$4 = {
 };
 const LogsOverviewPanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "RunDataView",
+  __name: "LogsViewRunData",
   props: {
     title: {},
     paneType: {},
-    logEntry: {},
-    workflow: {},
-    execution: {}
+    logEntry: {}
   },
   setup(__props) {
     const locale = useI18n$1();
@@ -4749,7 +4646,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         return { node: __props.logEntry.node, runIndex: __props.logEntry.runIndex };
       }
       const source = __props.logEntry.runData.source[0];
-      const node = source && __props.workflow.getNode(source.previousNode);
+      const node = source && __props.logEntry.workflow.getNode(source.previousNode);
       if (!source || !node) {
         return void 0;
       }
@@ -4771,8 +4668,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return runDataProps.value ? (openBlock(), createBlock(RunData, mergeProps({ key: 0 }, runDataProps.value, {
-        workflow: _ctx.workflow,
-        "workflow-execution": _ctx.execution,
+        workflow: _ctx.logEntry.workflow,
+        "workflow-execution": _ctx.logEntry.execution,
         "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"),
@@ -4850,7 +4747,7 @@ const style0$3 = {
 const cssModules$3 = {
   "$style": style0$3
 };
-const RunDataView = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
+const LogsViewRunData = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$3]]);
 function useResizablePanel(localStorageKey, {
   container: container2,
   defaultSize,
@@ -4948,24 +4845,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   props: {
     isOpen: { type: Boolean },
     logEntry: {},
-    workflow: {},
-    execution: {},
     window: {},
-    latestInfo: {}
+    latestInfo: {},
+    panels: {}
   },
-  emits: ["clickHeader"],
+  emits: ["clickHeader", "toggleInputOpen", "toggleOutputOpen"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const locale = useI18n$1();
-    const telemetry = useTelemetry();
     const nodeTypeStore = useNodeTypesStore();
-    const content2 = useLocalStorage(
-      "N8N_LOGS_DETAIL_PANEL_CONTENT",
-      LOG_DETAILS_CONTENT.OUTPUT,
-      { writeDefaults: false }
-    );
     const type = computed(() => nodeTypeStore.getNodeType(__props.logEntry.node.type));
-    const consumedTokens2 = computed(() => getSubtreeTotalConsumedTokens(__props.logEntry));
+    const consumedTokens2 = computed(() => getSubtreeTotalConsumedTokens(__props.logEntry, false));
     const isTriggerNode = computed(() => type.value?.group.includes("trigger"));
     const container2 = useTemplateRef("container");
     const resizer = useResizablePanel("N8N_LOGS_INPUT_PANEL_WIDTH", {
@@ -4976,35 +4866,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       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"
-      });
-    }
+    const shouldResize = computed(() => __props.panels === LOG_DETAILS_PANEL_STATE.BOTH);
     function handleResizeEnd() {
       if (resizer.isCollapsed.value) {
-        handleToggleInput(false);
+        emit("toggleInputOpen", false);
       }
       if (resizer.isFullSize.value) {
-        handleToggleOutput(false);
+        emit("toggleOutputOpen", false);
       }
       resizer.onResizeEnd();
     }
@@ -5015,10 +4883,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.container),
         "data-test-id": "log-details"
       }, [
-        createVNode(PanelHeader, {
+        createVNode(LogsPanelHeader, {
           "data-test-id": "log-details-header",
           class: normalizeClass(_ctx.$style.header),
-          onClick: _cache[0] || (_cache[0] = ($event) => emit("clickHeader"))
+          onClick: _cache[2] || (_cache[2] = ($event) => emit("clickHeader"))
         }, {
           title: withCtx(() => [
             createBaseVNode("div", {
@@ -5029,12 +4897,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 size: 16,
                 class: normalizeClass(_ctx.$style.icon)
               }, null, 8, ["node-type", "class"]),
-              createVNode(NodeName, {
+              createVNode(LogsViewNodeName, {
                 "latest-name": _ctx.latestInfo?.name ?? _ctx.logEntry.node.name,
                 name: _ctx.logEntry.node.name,
                 "is-deleted": _ctx.latestInfo?.deleted ?? false
               }, null, 8, ["latest-name", "name", "is-deleted"]),
-              _ctx.isOpen ? (openBlock(), createBlock(ExecutionSummary, {
+              _ctx.isOpen ? (openBlock(), createBlock(LogsViewExecutionSummary, {
                 key: 0,
                 class: normalizeClass(_ctx.$style.executionSummary),
                 status: _ctx.logEntry.runData.executionStatus ?? "unknown",
@@ -5048,28 +4916,44 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               key: 0,
               class: normalizeClass(_ctx.$style.actions)
             }, [
-              createVNode(unref(N8nButton), {
-                size: "mini",
-                type: "secondary",
-                class: normalizeClass(unref(content2) === unref(LOG_DETAILS_CONTENT).OUTPUT ? "" : _ctx.$style.pressed),
-                onClick: withModifiers(handleToggleInput, ["stop"])
+              createVNode(KeyboardShortcutTooltip, {
+                label: unref(locale).baseText("generic.shortcutHint"),
+                shortcut: { keys: ["i"] }
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.input")), 1)
+                  createVNode(unref(N8nButton), {
+                    size: "mini",
+                    type: "secondary",
+                    class: normalizeClass(_ctx.panels === unref(LOG_DETAILS_PANEL_STATE).OUTPUT ? "" : _ctx.$style.pressed),
+                    onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggleInputOpen"), ["stop"]))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.input")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
                 ]),
                 _: 1
-              }, 8, ["class"]),
-              createVNode(unref(N8nButton), {
-                size: "mini",
-                type: "secondary",
-                class: normalizeClass(unref(content2) === unref(LOG_DETAILS_CONTENT).INPUT ? "" : _ctx.$style.pressed),
-                onClick: withModifiers(handleToggleOutput, ["stop"])
+              }, 8, ["label"]),
+              createVNode(KeyboardShortcutTooltip, {
+                label: unref(locale).baseText("generic.shortcutHint"),
+                shortcut: { keys: ["o"] }
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.output")), 1)
+                  createVNode(unref(N8nButton), {
+                    size: "mini",
+                    type: "secondary",
+                    class: normalizeClass(_ctx.panels === unref(LOG_DETAILS_PANEL_STATE).INPUT ? "" : _ctx.$style.pressed),
+                    onClick: _cache[1] || (_cache[1] = withModifiers(($event) => emit("toggleOutputOpen"), ["stop"]))
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(locale).baseText("logs.details.header.actions.output")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["class"])
                 ]),
                 _: 1
-              }, 8, ["class"])
+              }, 8, ["label"])
             ], 2)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "actions")
           ]),
@@ -5080,7 +4964,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(_ctx.$style.content),
           "data-test-id": "logs-details-body"
         }, [
-          !isTriggerNode.value && unref(content2) !== unref(LOG_DETAILS_CONTENT).OUTPUT ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
+          !isTriggerNode.value && _ctx.panels !== unref(LOG_DETAILS_PANEL_STATE).OUTPUT ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
             key: 0,
             class: normalizeClass({
               [_ctx.$style.inputResizer]: true,
@@ -5096,27 +4980,23 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             onResizeend: handleResizeEnd
           }, {
             default: withCtx(() => [
-              createVNode(RunDataView, {
+              createVNode(LogsViewRunData, {
                 "data-test-id": "log-details-input",
                 "pane-type": "input",
                 title: unref(locale).baseText("logs.details.header.actions.input"),
-                "log-entry": _ctx.logEntry,
-                workflow: _ctx.workflow,
-                execution: _ctx.execution
-              }, null, 8, ["title", "log-entry", "workflow", "execution"])
+                "log-entry": _ctx.logEntry
+              }, null, 8, ["title", "log-entry"])
             ]),
             _: 1
           }, 8, ["class", "width", "style", "is-resizing-enabled", "window", "onResize"])) : createCommentVNode("", true),
-          isTriggerNode.value || unref(content2) !== unref(LOG_DETAILS_CONTENT).INPUT ? (openBlock(), createBlock(RunDataView, {
+          isTriggerNode.value || _ctx.panels !== unref(LOG_DETAILS_PANEL_STATE).INPUT ? (openBlock(), createBlock(LogsViewRunData, {
             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,
-            workflow: _ctx.workflow,
-            execution: _ctx.execution
-          }, null, 8, ["class", "title", "log-entry", "workflow", "execution"])) : createCommentVNode("", true)
+            "log-entry": _ctx.logEntry
+          }, null, 8, ["class", "title", "log-entry"])) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true)
       ], 2);
     };
@@ -5190,10 +5070,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["z-index", "content"])) : createCommentVNode("", true),
-        _ctx.showToggleButton ? (openBlock(), createBlock(unref(N8nTooltip), {
+        _ctx.showToggleButton ? (openBlock(), createBlock(KeyboardShortcutTooltip, {
           key: 1,
-          "z-index": tooltipZIndex.value,
-          content: toggleButtonText.value
+          label: unref(locales).baseText("generic.shortcutHint"),
+          shortcut: { keys: ["l"] },
+          "z-index": tooltipZIndex.value
         }, {
           default: withCtx(() => [
             createVNode(unref(_sfc_main$i), {
@@ -5207,7 +5088,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["icon", "aria-label"])
           ]),
           _: 1
-        }, 8, ["z-index", "content"])) : createCommentVNode("", true)
+        }, 8, ["label", "z-index"])) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -5220,11 +5101,9 @@ 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();
+function useLogsPanelLayout(pipContainer, pipContent2, container2, logsContainer2) {
+  const logsStore = useLogsStore();
   const telemetry = useTelemetry();
-  const workflowsStore = useWorkflowsStore();
-  const panelState = computed(() => workflowsStore.logsPanelState);
   const resizer = useResizablePanel(LOCAL_STORAGE_PANEL_HEIGHT, {
     container: document.body,
     position: "bottom",
@@ -5248,7 +5127,7 @@ function useLayout(pipContainer, pipContent2, container2, logsContainer2) {
     allowFullSize: true
   });
   const isOpen = computed(
-    () => panelState.value === LOGS_PANEL_STATE.CLOSED ? resizer.isResizing.value && resizer.size.value > 0 : !resizer.isCollapsed.value
+    () => logsStore.isOpen ? !resizer.isCollapsed.value : resizer.isResizing.value && resizer.size.value > 0
   );
   const isCollapsingDetailsPanel = computed(() => overviewPanelResizer.isFullSize.value);
   const { canPopOut, isPoppedOut, pipWindow } = usePiPWindow({
@@ -5256,32 +5135,32 @@ function useLayout(pipContainer, pipContent2, container2, logsContainer2) {
     initialWidth: window.document.body.offsetWidth * 0.8,
     container: pipContainer,
     content: pipContent2,
-    shouldPopOut: computed(() => panelState.value === LOGS_PANEL_STATE.FLOATING),
+    shouldPopOut: computed(() => logsStore.state === LOGS_PANEL_STATE.FLOATING),
     onRequestClose: () => {
       if (!isOpen.value) {
         return;
       }
       telemetry.track("User toggled log view", { new_state: "attached" });
-      workflowsStore.setPreferPoppedOutLogsView(false);
+      logsStore.setPreferPoppedOut(false);
     }
   });
   function handleToggleOpen(open) {
-    const wasOpen = panelState.value !== LOGS_PANEL_STATE.CLOSED;
+    const wasOpen = logsStore.isOpen;
     if (open === wasOpen) {
       return;
     }
-    workflowsStore.toggleLogsPanelOpen(open);
+    logsStore.toggleOpen(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);
+    logsStore.toggleOpen(true);
+    logsStore.setPreferPoppedOut(true);
   }
   function handleResizeEnd() {
-    if (panelState.value === LOGS_PANEL_STATE.CLOSED && !resizer.isCollapsed.value) {
+    if (!logsStore.isOpen && !resizer.isCollapsed.value) {
       handleToggleOpen(true);
     }
     if (resizer.isCollapsed.value) {
@@ -5290,9 +5169,9 @@ function useLayout(pipContainer, pipContent2, container2, logsContainer2) {
     resizer.onResizeEnd();
   }
   watch(
-    [panelState, resizer.size],
+    [() => logsStore.state, resizer.size],
     ([state, height]) => {
-      canvasStore.setPanelHeight(
+      logsStore.setHeight(
         state === LOGS_PANEL_STATE.FLOATING ? 0 : state === LOGS_PANEL_STATE.ATTACHED ? height : 32
       );
     },
@@ -5318,10 +5197,13 @@ function useLayout(pipContainer, pipContent2, container2, logsContainer2) {
     onOverviewPanelResizeEnd: overviewPanelResizer.onResizeEnd
   };
 }
-function useExecutionData() {
+function useLogsExecutionData() {
   const nodeHelpers = useNodeHelpers();
   const workflowsStore = useWorkflowsStore();
+  const toast = useToast();
   const execData = ref();
+  const subWorkflowExecData = ref({});
+  const subWorkflows = ref({});
   const workflow = computed(
     () => execData.value ? new Workflow({
       ...execData.value?.workflowData,
@@ -5347,35 +5229,65 @@ function useExecutionData() {
       (nodes) => nodes.some(isChatNode)
     )
   );
-  const execution = computed(() => {
-    if (!execData.value || !workflow.value) {
-      return void 0;
+  const entries = computed(() => {
+    if (!execData.value?.data || !workflow.value) {
+      return [];
     }
-    return {
-      ...execData.value,
-      tree: createLogEntries(workflow.value, execData.value.data?.resultData.runData ?? {})
-    };
+    return createLogTree(
+      workflow.value,
+      execData.value,
+      subWorkflows.value,
+      subWorkflowExecData.value
+    );
   });
-  const updateInterval = computed(() => (execution.value?.tree.length ?? 0) > 10 ? 300 : 0);
-  const runStatusList = computed(
-    () => workflowsStore.workflowExecutionData?.id === IN_PROGRESS_EXECUTION_ID ? Object.values(workflowsStore.workflowExecutionData?.data?.resultData.runData ?? {}).flatMap((tasks) => tasks.map((task) => task.executionStatus ?? "")).join("|") : ""
-  );
+  const updateInterval = computed(() => (entries.value?.length ?? 0) > 10 ? 300 : 0);
   function resetExecutionData() {
     execData.value = void 0;
     workflowsStore.setWorkflowExecutionData(null);
     nodeHelpers.updateNodesExecutionIssues();
   }
+  async function loadSubExecution(logEntry) {
+    const executionId = logEntry.runData.metadata?.subExecution?.executionId;
+    const workflowId = logEntry.runData.metadata?.subExecution?.workflowId;
+    if (!execData.value?.data || !executionId || !workflowId) {
+      return;
+    }
+    try {
+      const subExecution = await workflowsStore.fetchExecutionDataById(executionId);
+      const data = subExecution?.data ? parse(subExecution.data) : void 0;
+      if (!data || !subExecution) {
+        throw Error("Data is missing");
+      }
+      subWorkflowExecData.value[executionId] = data;
+      subWorkflows.value[workflowId] = new Workflow({
+        ...subExecution.workflowData,
+        nodeTypes: workflowsStore.getNodeTypes()
+      });
+    } catch (e) {
+      toast.showError(e, "Unable to load sub execution");
+    }
+  }
   watch(
     // Fields that should trigger update
     [
       () => workflowsStore.workflowExecutionData?.id,
       () => workflowsStore.workflowExecutionData?.workflowData.id,
       () => workflowsStore.workflowExecutionData?.status,
-      runStatusList
+      () => workflowsStore.workflowExecutionResultDataLastUpdate,
+      () => workflowsStore.workflowExecutionStartedData
     ],
     useThrottleFn(
-      () => {
-        execData.value = deepToRaw(workflowsStore.workflowExecutionData ?? void 0);
+      ([executionId], [previousExecutionId]) => {
+        execData.value = workflowsStore.workflowExecutionData === null ? void 0 : deepToRaw(
+          mergeStartData(
+            workflowsStore.workflowExecutionStartedData?.[1] ?? {},
+            workflowsStore.workflowExecutionData
+          )
+        );
+        if (executionId !== previousExecutionId) {
+          subWorkflowExecData.value = {};
+          subWorkflows.value = {};
+        }
       },
       updateInterval,
       true,
@@ -5383,7 +5295,53 @@ function useExecutionData() {
     ),
     { immediate: true }
   );
-  return { execution, workflow, hasChat, latestNodeNameById, resetExecutionData };
+  return {
+    execution: computed(() => execData.value),
+    entries,
+    hasChat,
+    latestNodeNameById,
+    resetExecutionData,
+    loadSubExecution
+  };
+}
+function useLogsSelection(execution, tree2, flatLogEntries) {
+  const telemetry = useTelemetry();
+  const manualLogEntrySelection = ref({ type: "initial" });
+  const selected2 = computed(() => findSelectedLogEntry(manualLogEntrySelection.value, tree2.value));
+  function select(value) {
+    manualLogEntrySelection.value = value === void 0 ? { type: "none" } : { type: "selected", id: value.id };
+    if (value) {
+      telemetry.track("User selected node in log view", {
+        node_type: value.node.type,
+        node_id: value.node.id,
+        execution_id: execution.value?.id,
+        workflow_id: execution.value?.workflowData.id,
+        subworkflow_depth: getDepth(value)
+      });
+    }
+  }
+  function selectPrev() {
+    const entries = flatLogEntries.value;
+    const prevEntry = selected2.value ? getEntryAtRelativeIndex(entries, selected2.value.id, -1) ?? entries[0] : entries[entries.length - 1];
+    select(prevEntry);
+  }
+  function selectNext() {
+    const entries = flatLogEntries.value;
+    const nextEntry = selected2.value ? getEntryAtRelativeIndex(entries, selected2.value.id, 1) ?? entries[entries.length - 1] : entries[0];
+    select(nextEntry);
+  }
+  return { selected: selected2, select, selectPrev, selectNext };
+}
+function useLogsTreeExpand(entries) {
+  const collapsedEntries = ref({});
+  const flatLogEntries = computed(() => flattenLogEntries(entries.value, collapsedEntries.value));
+  function toggleExpanded(treeNode) {
+    collapsedEntries.value[treeNode.id] = !collapsedEntries.value[treeNode.id];
+  }
+  return {
+    flatLogEntries,
+    toggleExpanded
+  };
 }
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LogsPanel",
@@ -5396,6 +5354,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const logsContainer2 = useTemplateRef("logsContainer");
     const pipContainer = useTemplateRef("pipContainer");
     const pipContent2 = useTemplateRef("pipContent");
+    const logsStore = useLogsStore();
+    const ndvStore = useNDVStore();
     const {
       height,
       chatPanelWidth,
@@ -5414,7 +5374,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onChatPanelResizeEnd,
       onOverviewPanelResize,
       onOverviewPanelResizeEnd
-    } = useLayout(pipContainer, pipContent2, container2, logsContainer2);
+    } = useLogsPanelLayout(pipContainer, pipContent2, container2, logsContainer2);
     const {
       currentSessionId,
       messages: messages2,
@@ -5423,12 +5383,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       refreshSession,
       displayExecution
     } = useChatState(props.isReadOnly);
-    const { workflow, execution, hasChat, latestNodeNameById, resetExecutionData } = useExecutionData();
-    const manualLogEntrySelection = ref({ type: "initial" });
-    const selectedLogEntry = computed(
-      () => findSelectedLogEntry(manualLogEntrySelection.value, execution.value)
+    const { entries, execution, hasChat, latestNodeNameById, resetExecutionData, loadSubExecution } = useLogsExecutionData();
+    const { flatLogEntries, toggleExpanded } = useLogsTreeExpand(entries);
+    const { selected: selected2, select, selectNext, selectPrev } = useLogsSelection(
+      execution,
+      entries,
+      flatLogEntries
     );
-    const isLogDetailsOpen = computed(() => isOpen.value && selectedLogEntry.value !== void 0);
+    const isLogDetailsOpen = computed(() => isOpen.value && selected2.value !== void 0);
     const isLogDetailsVisuallyOpen = computed(
       () => isLogDetailsOpen.value && !isCollapsingDetailsPanel.value
     );
@@ -5439,19 +5401,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onPopOut,
       onToggleOpen
     }));
-    function handleSelectLogEntry(selected2) {
-      const workflowId = execution.value?.workflowData.id;
-      if (!workflowId) {
-        return;
-      }
-      manualLogEntrySelection.value = selected2 === void 0 ? { type: "none", workflowId } : { type: "selected", workflowId, data: selected2 };
-    }
     function handleResizeOverviewPanelEnd() {
       if (isOverviewPanelFullWidth.value) {
-        handleSelectLogEntry(void 0);
+        select(void 0);
       }
       onOverviewPanelResizeEnd();
     }
+    async function handleOpenNdv(treeNode) {
+      ndvStore.setActiveNodeName(treeNode.node.name);
+      await nextTick(() => {
+        const source = treeNode.runData.source[0];
+        const inputBranch = source?.previousNodeOutput ?? 0;
+        ndvEventBus.emit("updateInputNodeName", source?.previousNode);
+        ndvEventBus.emit("setInputBranchIndex", inputBranch);
+        ndvStore.setOutputRunIndex(treeNode.runIndex);
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "pipContainer",
@@ -5475,8 +5440,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createBaseVNode("div", {
                 ref_key: "container",
                 ref: container2,
-                class: normalizeClass([_ctx.$style.container, "ignore-key-press-canvas"]),
-                tabindex: "0"
+                class: normalizeClass(_ctx.$style.container),
+                tabindex: "-1",
+                onKeydown: [
+                  _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => unref(select)(void 0), ["stop"]), ["esc"])),
+                  _cache[4] || (_cache[4] = withKeys(withModifiers(
+                    //@ts-ignore
+                    (...args) => unref(selectNext) && unref(selectNext)(...args),
+                    ["stop"]
+                  ), ["j"])),
+                  _cache[5] || (_cache[5] = withKeys(withModifiers(
+                    //@ts-ignore
+                    (...args) => unref(selectNext) && unref(selectNext)(...args),
+                    ["stop", "prevent"]
+                  ), ["down"])),
+                  _cache[6] || (_cache[6] = withKeys(withModifiers(
+                    //@ts-ignore
+                    (...args) => unref(selectPrev) && unref(selectPrev)(...args),
+                    ["stop"]
+                  ), ["k"])),
+                  _cache[7] || (_cache[7] = withKeys(withModifiers(
+                    //@ts-ignore
+                    (...args) => unref(selectPrev) && unref(selectPrev)(...args),
+                    ["stop", "prevent"]
+                  ), ["up"])),
+                  _cache[8] || (_cache[8] = withKeys(withModifiers(($event) => unref(selected2) && unref(toggleExpanded)(unref(selected2)), ["stop"]), ["space"])),
+                  _cache[9] || (_cache[9] = withKeys(withModifiers(($event) => unref(selected2) && handleOpenNdv(unref(selected2)), ["stop"]), ["enter"]))
+                ]
               }, [
                 unref(hasChat) && (!props.isReadOnly || unref(messages2).length > 0) ? (openBlock(), createBlock(unref(N8nResizeWrapper), {
                   key: 0,
@@ -5530,40 +5520,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "is-open": unref(isOpen),
                         "is-read-only": _ctx.isReadOnly,
                         "is-compact": isLogDetailsVisuallyOpen.value,
-                        selected: selectedLogEntry.value,
+                        selected: unref(selected2),
                         execution: unref(execution),
-                        "scroll-to-selection": manualLogEntrySelection.value.type !== "selected" || manualLogEntrySelection.value.data.id !== selectedLogEntry.value?.id,
+                        entries: unref(entries),
                         "latest-node-info": unref(latestNodeNameById),
+                        "flat-log-entries": unref(flatLogEntries),
                         onClickHeader: _cache[1] || (_cache[1] = ($event) => unref(onToggleOpen)(true)),
-                        onSelect: handleSelectLogEntry,
-                        onClearExecutionData: unref(resetExecutionData)
+                        onSelect: unref(select),
+                        onClearExecutionData: unref(resetExecutionData),
+                        onToggleExpanded: unref(toggleExpanded),
+                        onOpenNdv: handleOpenNdv,
+                        onLoadSubExecution: unref(loadSubExecution)
                       }, {
                         actions: withCtx(() => [
                           !isLogDetailsVisuallyOpen.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", "scroll-to-selection", "latest-node-info", "onClearExecutionData"]))
+                      }, 8, ["class", "is-open", "is-read-only", "is-compact", "selected", "execution", "entries", "latest-node-info", "flat-log-entries", "onSelect", "onClearExecutionData", "onToggleExpanded", "onLoadSubExecution"]))
                     ]),
                     _: 1
                   }, 8, ["class", "width", "style", "is-resizing-enabled", "window", "onResize"]),
-                  isLogDetailsVisuallyOpen.value && selectedLogEntry.value && unref(workflow) && unref(execution) ? (openBlock(), createBlock(LogsDetailsPanel, {
+                  isLogDetailsVisuallyOpen.value && unref(selected2) ? (openBlock(), createBlock(LogsDetailsPanel, {
                     key: 0,
                     class: normalizeClass(_ctx.$style.logDetails),
                     "is-open": unref(isOpen),
-                    "log-entry": selectedLogEntry.value,
-                    workflow: unref(workflow),
-                    execution: unref(execution),
+                    "log-entry": unref(selected2),
                     window: unref(pipWindow),
-                    "latest-info": unref(latestNodeNameById)[selectedLogEntry.value.node.id],
-                    onClickHeader: _cache[2] || (_cache[2] = ($event) => unref(onToggleOpen)(true))
+                    "latest-info": unref(latestNodeNameById)[unref(selected2).id],
+                    panels: unref(logsStore).detailsState,
+                    onClickHeader: _cache[2] || (_cache[2] = ($event) => unref(onToggleOpen)(true)),
+                    onToggleInputOpen: unref(logsStore).toggleInputOpen,
+                    onToggleOutputOpen: unref(logsStore).toggleOutputOpen
                   }, {
                     actions: withCtx(() => [
                       isLogDetailsVisuallyOpen.value ? (openBlock(), createBlock(LogsPanelActions, normalizeProps(mergeProps({ key: 0 }, logsPanelActionsProps.value)), null, 16)) : createCommentVNode("", true)
                     ]),
                     _: 1
-                  }, 8, ["class", "is-open", "log-entry", "workflow", "execution", "window", "latest-info"])) : createCommentVNode("", true)
+                  }, 8, ["class", "is-open", "log-entry", "window", "latest-info", "panels", "onToggleInputOpen", "onToggleOutputOpen"])) : createCommentVNode("", true)
                 ], 2)
-              ], 2)
+              ], 34)
             ]),
             _: 1
           }, 8, ["height", "is-resizing-enabled", "class", "style", "onResize", "onResizeend"])