fix: sync DOM widget values to widgetValueStore on registration

DOM widgets (e.g. textarea for system_prompt) resolve their value through options.getValue() / DOM elements rather than _state.value. When BaseWidget.setNodeId registers with the store, it spreads _state.value which is undefined for DOM widgets, causing Vue nodes to display empty. Override setNodeId in BaseDOMWidgetImpl to capture the DOM-resolved value before registration and sync it into the store afterward. This keeps the fix in the DOM widget layer where the mismatch originates, leaving BaseWidget unchanged.
[backport cloud/1.40] fix: open image in new tab on cloud fetches as blob to avoid GCS auto-download (#9158 )
2026-04-21 23:09:39 +00:00 · 2026-02-24 03:40:11 -05:00 · 2026-02-23 22:13:19 -08:00 · 2026-02-23 04:14:00 -08:00 · 2026-02-23 04:01:08 -08:00 · 2026-02-23 01:18:43 -08:00
32 changed files with 864 additions and 439 deletions
--- a/src/base/common/downloadUtil.test.ts
+++ b/src/base/common/downloadUtil.test.ts
@@ -2,17 +2,28 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'

 import {
  downloadFile,
-  extractFilenameFromContentDisposition
+  extractFilenameFromContentDisposition,
+  openFileInNewTab
 } from '@/base/common/downloadUtil'

-let mockIsCloud = false
+const { mockIsCloud } = vi.hoisted(() => ({
+  mockIsCloud: { value: false }
+}))

 vi.mock('@/platform/distribution/types', () => ({
  get isCloud() {
-    return mockIsCloud
+    return mockIsCloud.value
  }
 }))

+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn(() => ({ addAlert: vi.fn() }))
+}))
+
 // Global stubs
 const createObjectURLSpy = vi
  .spyOn(URL, 'createObjectURL')
@@ -26,7 +37,7 @@ describe('downloadUtil', () => {
  let fetchMock: ReturnType<typeof vi.fn>

  beforeEach(() => {
-    mockIsCloud = false
+    mockIsCloud.value = false
    fetchMock = vi.fn()
    vi.stubGlobal('fetch', fetchMock)
    createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
@@ -154,7 +165,7 @@ describe('downloadUtil', () => {
    })

    it('streams downloads via blob when running in cloud', async () => {
-      mockIsCloud = true
+      mockIsCloud.value = true
      const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
      const blob = new Blob(['test'])
      const blobFn = vi.fn().mockResolvedValue(blob)
@@ -173,6 +184,7 @@ describe('downloadUtil', () => {
      expect(fetchMock).toHaveBeenCalledWith(testUrl)
      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
      await fetchPromise
+      await Promise.resolve() // let fetchAsBlob return
      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
      await blobPromise
      await Promise.resolve()
@@ -183,7 +195,7 @@ describe('downloadUtil', () => {
    })

    it('logs an error when cloud fetch fails', async () => {
-      mockIsCloud = true
+      mockIsCloud.value = true
      const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
      fetchMock.mockResolvedValue({
@@ -197,14 +209,15 @@ describe('downloadUtil', () => {
      expect(fetchMock).toHaveBeenCalledWith(testUrl)
      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
      await fetchPromise
-      await Promise.resolve()
+      await Promise.resolve() // let fetchAsBlob throw
+      await Promise.resolve() // let .catch handler run
      expect(consoleSpy).toHaveBeenCalled()
      expect(createObjectURLSpy).not.toHaveBeenCalled()
      consoleSpy.mockRestore()
    })

    it('uses filename from Content-Disposition header in cloud mode', async () => {
-      mockIsCloud = true
+      mockIsCloud.value = true
      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
      const blob = new Blob(['test'])
      const blobFn = vi.fn().mockResolvedValue(blob)
@@ -223,6 +236,7 @@ describe('downloadUtil', () => {
      expect(fetchMock).toHaveBeenCalledWith(testUrl)
      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
      await fetchPromise
+      await Promise.resolve() // let fetchAsBlob return
      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
      await blobPromise
      await Promise.resolve()
@@ -231,7 +245,7 @@ describe('downloadUtil', () => {
    })

    it('uses RFC 5987 filename from Content-Disposition header', async () => {
-      mockIsCloud = true
+      mockIsCloud.value = true
      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
      const blob = new Blob(['test'])
      const blobFn = vi.fn().mockResolvedValue(blob)
@@ -253,6 +267,7 @@ describe('downloadUtil', () => {

      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
      await fetchPromise
+      await Promise.resolve() // let fetchAsBlob return
      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
      await blobPromise
      await Promise.resolve()
@@ -260,7 +275,7 @@ describe('downloadUtil', () => {
    })

    it('falls back to provided filename when Content-Disposition is missing', async () => {
-      mockIsCloud = true
+      mockIsCloud.value = true
      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
      const blob = new Blob(['test'])
      const blobFn = vi.fn().mockResolvedValue(blob)
@@ -278,6 +293,7 @@ describe('downloadUtil', () => {

      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
      await fetchPromise
+      await Promise.resolve() // let fetchAsBlob return
      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
      await blobPromise
      await Promise.resolve()
@@ -285,6 +301,99 @@ describe('downloadUtil', () => {
    })
  })

+  describe('openFileInNewTab', () => {
+    let windowOpenSpy: ReturnType<typeof vi.spyOn>
+
+    beforeEach(() => {
+      vi.useFakeTimers()
+      windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('opens URL directly when not in cloud mode', async () => {
+      mockIsCloud.value = false
+      const testUrl = 'https://example.com/image.png'
+
+      await openFileInNewTab(testUrl)
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(testUrl, '_blank')
+      expect(fetchMock).not.toHaveBeenCalled()
+    })
+
+    it('opens blank tab synchronously then navigates to blob URL in cloud mode', async () => {
+      mockIsCloud.value = true
+      const testUrl = 'https://storage.googleapis.com/bucket/image.png'
+      const blob = new Blob(['test'], { type: 'image/png' })
+      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
+      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
+      fetchMock.mockResolvedValue({
+        ok: true,
+        blob: vi.fn().mockResolvedValue(blob)
+      } as unknown as Response)
+
+      await openFileInNewTab(testUrl)
+
+      expect(windowOpenSpy).toHaveBeenCalledWith('', '_blank')
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      expect(createObjectURLSpy).toHaveBeenCalledWith(blob)
+      expect(mockTab.location.href).toBe('blob:mock-url')
+    })
+
+    it('revokes blob URL after timeout in cloud mode', async () => {
+      mockIsCloud.value = true
+      const blob = new Blob(['test'], { type: 'image/png' })
+      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
+      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
+      fetchMock.mockResolvedValue({
+        ok: true,
+        blob: vi.fn().mockResolvedValue(blob)
+      } as unknown as Response)
+
+      await openFileInNewTab('https://example.com/image.png')
+
+      expect(revokeObjectURLSpy).not.toHaveBeenCalled()
+      vi.advanceTimersByTime(60_000)
+      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
+    })
+
+    it('closes blank tab and logs error when cloud fetch fails', async () => {
+      mockIsCloud.value = true
+      const testUrl = 'https://storage.googleapis.com/bucket/missing.png'
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
+      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
+      fetchMock.mockResolvedValue({
+        ok: false,
+        status: 404
+      } as unknown as Response)
+
+      await openFileInNewTab(testUrl)
+
+      expect(mockTab.close).toHaveBeenCalled()
+      expect(consoleSpy).toHaveBeenCalled()
+      consoleSpy.mockRestore()
+    })
+
+    it('revokes blob URL immediately if tab was closed by user', async () => {
+      mockIsCloud.value = true
+      const blob = new Blob(['test'], { type: 'image/png' })
+      const mockTab = { location: { href: '' }, closed: true, close: vi.fn() }
+      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
+      fetchMock.mockResolvedValue({
+        ok: true,
+        blob: vi.fn().mockResolvedValue(blob)
+      } as unknown as Response)
+
+      await openFileInNewTab('https://example.com/image.png')
+
+      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
+      expect(mockTab.location.href).toBe('')
+    })
+  })
+
  describe('extractFilenameFromContentDisposition', () => {
    it('returns null for null header', () => {
      expect(extractFilenameFromContentDisposition(null)).toBeNull()
--- a/src/base/common/downloadUtil.ts
+++ b/src/base/common/downloadUtil.ts
@@ -1,7 +1,9 @@
 /**
 * Utility functions for downloading files
 */
+import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
+import { useToastStore } from '@/platform/updates/common/toastStore'

 // Constants
 const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
@@ -112,14 +114,23 @@ export function extractFilenameFromContentDisposition(
  return null
 }

-const downloadViaBlobFetch = async (
+/**
+ * Fetch a URL and return its body as a Blob.
+ * Shared by download and open-in-new-tab cloud paths.
+ */
+async function fetchAsBlob(url: string): Promise<Response> {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status}`)
+  }
+  return response
+}
+
+async function downloadViaBlobFetch(
  href: string,
  fallbackFilename: string
-): Promise<void> => {
-  const response = await fetch(href)
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${href}: ${response.status}`)
-  }
+): Promise<void> {
+  const response = await fetchAsBlob(href)

  // Try to get filename from Content-Disposition header (set by backend)
  const contentDisposition = response.headers.get('Content-Disposition')
@@ -129,3 +140,44 @@ const downloadViaBlobFetch = async (
  const blob = await response.blob()
  downloadBlob(headerFilename ?? fallbackFilename, blob)
 }
+
+/**
+ * Open a file URL in a new browser tab.
+ * On cloud, fetches the resource as a blob first to avoid GCS redirects
+ * that would trigger an auto-download instead of displaying the file.
+ *
+ * Opens the tab synchronously to preserve the user-gesture context
+ * (browsers block window.open after an await), then navigates it to
+ * the blob URL once the fetch completes.
+ */
+export async function openFileInNewTab(url: string): Promise<void> {
+  if (!isCloud) {
+    window.open(url, '_blank')
+    return
+  }
+
+  // Open immediately to preserve user-gesture activation.
+  const tab = window.open('', '_blank')
+
+  try {
+    const response = await fetchAsBlob(url)
+    const blob = await response.blob()
+    const blobUrl = URL.createObjectURL(blob)
+
+    if (tab && !tab.closed) {
+      tab.location.href = blobUrl
+      // Revoke after the tab has had time to load the blob.
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000)
+    } else {
+      URL.revokeObjectURL(blobUrl)
+    }
+  } catch (error) {
+    tab?.close()
+    console.error('Failed to open image:', error)
+    useToastStore().addAlert(
+      t('toastMessages.errorOpenImage', {
+        error: error instanceof Error ? error.message : String(error)
+      })
+    )
+  }
+}
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -169,6 +169,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -189,6 +190,7 @@ const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
 const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const queueUIStore = useQueueUIStore()
 const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
@@ -262,7 +264,7 @@ const shouldShowRedDot = computed((): boolean => {
  return shouldShowConflictRedDot.value
 })

-const { hasAnyError } = storeToRefs(executionStore)
+const { hasAnyError } = storeToRefs(executionErrorStore)

 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
--- a/src/components/error/ErrorOverlay.vue
+++ b/src/components/error/ErrorOverlay.vue
@@ -64,17 +64,17 @@ import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'

 import Button from '@/components/ui/button/Button.vue'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'

 const { t } = useI18n()
-const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()

-const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionStore)
+const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
 const { groupedErrorMessages } = useErrorGroups(ref(''), t)

 const errorCountLabel = computed(() =>
@@ -90,7 +90,7 @@ const isVisible = computed(
 )

 function dismiss() {
-  executionStore.dismissErrorOverlay()
+  executionErrorStore.dismissErrorOverlay()
 }

 function seeErrors() {
@@ -100,6 +100,6 @@ function seeErrors() {
  }

  rightSidePanelStore.openPanel('errors')
-  executionStore.dismissErrorOverlay()
+  executionErrorStore.dismissErrorOverlay()
 }
 </script>
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -70,7 +70,7 @@
      :key="nodeData.id"
      :node-data="nodeData"
      :error="
-        executionStore.lastExecutionError?.node_id === nodeData.id
+        executionErrorStore.lastExecutionError?.node_id === nodeData.id
          ? 'Execution error'
          : null
      "
@@ -170,6 +170,7 @@ import { storeToRefs } from 'pinia'
 import { useBootstrapStore } from '@/stores/bootstrapStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
@@ -196,6 +197,7 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const toastStore = useToastStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
@@ -376,7 +378,7 @@ watch(
 // Update node slot errors for LiteGraph nodes
 // (Vue nodes read from store directly)
 watch(
-  () => executionStore.lastNodeErrors,
+  () => executionErrorStore.lastNodeErrors,
  (lastNodeErrors) => {
    if (!comfyApp.graph) return

--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -14,7 +14,7 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -36,12 +36,12 @@ import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 import TabErrors from './errors/TabErrors.vue'

 const canvasStore = useCanvasStore()
-const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()

-const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionStore)
+const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)

 const { findParentGroup } = useGraphHierarchy()

@@ -98,7 +98,7 @@ type RightSidePanelTabList = Array<{

 const hasDirectNodeError = computed(() =>
  selectedNodes.value.some((node) =>
-    executionStore.activeGraphErrorNodeIds.has(String(node.id))
+    executionErrorStore.activeGraphErrorNodeIds.has(String(node.id))
  )
 )

@@ -106,7 +106,7 @@ const hasContainerInternalError = computed(() => {
  if (allErrorExecutionIds.value.length === 0) return false
  return selectedNodes.value.some((node) => {
    if (!(node instanceof SubgraphNode || isGroupNode(node))) return false
-    return executionStore.hasInternalErrorForNode(node.id)
+    return executionErrorStore.isContainerWithInternalError(node)
  })
 })

--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -94,7 +94,7 @@ describe('TabErrors.vue', () => {

  it('renders prompt-level errors (Group title = error message)', async () => {
    const wrapper = mountComponent({
-      execution: {
+      executionError: {
        lastPromptError: {
          type: 'prompt_no_outputs',
          message: 'Server Error: No outputs',
@@ -118,7 +118,7 @@ describe('TabErrors.vue', () => {
    } as ReturnType<typeof getNodeByExecutionId>)

    const wrapper = mountComponent({
-      execution: {
+      executionError: {
        lastNodeErrors: {
          '6': {
            class_type: 'CLIPTextEncode',
@@ -143,7 +143,7 @@ describe('TabErrors.vue', () => {
    } as ReturnType<typeof getNodeByExecutionId>)

    const wrapper = mountComponent({
-      execution: {
+      executionError: {
        lastExecutionError: {
          prompt_id: 'abc',
          node_id: '10',
@@ -167,7 +167,7 @@ describe('TabErrors.vue', () => {
    vi.mocked(getNodeByExecutionId).mockReturnValue(null)

    const wrapper = mountComponent({
-      execution: {
+      executionError: {
        lastNodeErrors: {
          '1': {
            class_type: 'CLIPTextEncode',
@@ -198,7 +198,7 @@ describe('TabErrors.vue', () => {
    vi.mocked(useCopyToClipboard).mockReturnValue({ copyToClipboard: mockCopy })

    const wrapper = mountComponent({
-      execution: {
+      executionError: {
        lastNodeErrors: {
          '1': {
            class_type: 'TestNode',
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -3,15 +3,17 @@ import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'

-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'

 import { app } from '@/scripts/app'
 import { isCloud } from '@/platform/distribution/types'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
 import {
  getNodeByExecutionId,
+  getExecutionIdByNode,
  getRootParentNode
 } from '@/utils/graphTraversalUtil'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -19,6 +21,7 @@ import { isLGraphNode } from '@/utils/litegraphUtil'
 import { isGroupNode } from '@/utils/executableGroupNodeDto'
 import { st } from '@/i18n'
 import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { isNodeExecutionId } from '@/types/nodeIdentification'

 const PROMPT_CARD_ID = '__prompt__'
@@ -192,38 +195,42 @@ export function useErrorGroups(
  searchQuery: Ref<string>,
  t: (key: string) => string
 ) {
-  const executionStore = useExecutionStore()
+  const executionErrorStore = useExecutionErrorStore()
  const canvasStore = useCanvasStore()
  const collapseState = reactive<Record<string, boolean>>({})

  const selectedNodeInfo = computed(() => {
    const items = canvasStore.selectedItems
    const nodeIds = new Set<string>()
-    const containerIds = new Set<string>()
+    const containerExecutionIds = new Set<NodeExecutionId>()

    for (const item of items) {
      if (!isLGraphNode(item)) continue
      nodeIds.add(String(item.id))
-      if (item instanceof SubgraphNode || isGroupNode(item)) {
-        containerIds.add(String(item.id))
+      if (
+        (item instanceof SubgraphNode || isGroupNode(item)) &&
+        app.rootGraph
+      ) {
+        const execId = getExecutionIdByNode(app.rootGraph, item)
+        if (execId) containerExecutionIds.add(execId)
      }
    }

    return {
      nodeIds: nodeIds.size > 0 ? nodeIds : null,
-      containerIds
+      containerExecutionIds
    }
  })

  const isSingleNodeSelected = computed(
    () =>
      selectedNodeInfo.value.nodeIds?.size === 1 &&
-      selectedNodeInfo.value.containerIds.size === 0
+      selectedNodeInfo.value.containerExecutionIds.size === 0
  )

  const errorNodeCache = computed(() => {
    const map = new Map<string, LGraphNode>()
-    for (const execId of executionStore.allErrorExecutionIds) {
+    for (const execId of executionErrorStore.allErrorExecutionIds) {
      const node = getNodeByExecutionId(app.rootGraph, execId)
      if (node) map.set(execId, node)
    }
@@ -237,8 +244,9 @@ export function useErrorGroups(
    const graphNode = errorNodeCache.value.get(executionNodeId)
    if (graphNode && nodeIds.has(String(graphNode.id))) return true

-    for (const containerId of selectedNodeInfo.value.containerIds) {
-      if (executionNodeId.startsWith(`${containerId}:`)) return true
+    for (const containerExecId of selectedNodeInfo.value
+      .containerExecutionIds) {
+      if (executionNodeId.startsWith(`${containerExecId}:`)) return true
    }

    return false
@@ -262,10 +270,10 @@ export function useErrorGroups(
  }

  function processPromptError(groupsMap: Map<string, GroupEntry>) {
-    if (selectedNodeInfo.value.nodeIds || !executionStore.lastPromptError)
+    if (selectedNodeInfo.value.nodeIds || !executionErrorStore.lastPromptError)
      return

-    const error = executionStore.lastPromptError
+    const error = executionErrorStore.lastPromptError
    const groupTitle = error.message
    const cards = getOrCreateGroup(groupsMap, groupTitle, 0)
    const isKnown = KNOWN_PROMPT_ERROR_TYPES.has(error.type)
@@ -293,10 +301,10 @@ export function useErrorGroups(
    groupsMap: Map<string, GroupEntry>,
    filterBySelection = false
  ) {
-    if (!executionStore.lastNodeErrors) return
+    if (!executionErrorStore.lastNodeErrors) return

    for (const [nodeId, nodeError] of Object.entries(
-      executionStore.lastNodeErrors
+      executionErrorStore.lastNodeErrors
    )) {
      addNodeErrorToGroup(
        groupsMap,
@@ -316,9 +324,9 @@ export function useErrorGroups(
    groupsMap: Map<string, GroupEntry>,
    filterBySelection = false
  ) {
-    if (!executionStore.lastExecutionError) return
+    if (!executionErrorStore.lastExecutionError) return

-    const e = executionStore.lastExecutionError
+    const e = executionErrorStore.lastExecutionError
    addNodeErrorToGroup(
      groupsMap,
      String(e.node_id),
--- a/src/components/rightSidePanel/parameters/SectionWidgets.vue
+++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue
@@ -9,7 +9,7 @@ import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -62,7 +62,7 @@ watchEffect(() => (widgets.value = widgetsProp))
 provide(HideLayoutFieldKey, true)

 const canvasStore = useCanvasStore()
-const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const nodeDefStore = useNodeDefStore()
 const { t } = useI18n()
@@ -110,7 +110,9 @@ const targetNode = computed<LGraphNode | null>(() => {

 const hasDirectError = computed(() => {
  if (!targetNode.value) return false
-  return executionStore.activeGraphErrorNodeIds.has(String(targetNode.value.id))
+  return executionErrorStore.activeGraphErrorNodeIds.has(
+    String(targetNode.value.id)
+  )
 })

 const hasContainerInternalError = computed(() => {
@@ -119,7 +121,7 @@ const hasContainerInternalError = computed(() => {
    targetNode.value instanceof SubgraphNode || isGroupNode(targetNode.value)
  if (!isContainer) return false

-  return executionStore.hasInternalErrorForNode(targetNode.value.id)
+  return executionErrorStore.isContainerWithInternalError(targetNode.value)
 })

 const nodeHasError = computed(() => {
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -53,6 +53,7 @@ import NodeSearchCategoryTreeNode, {
  CATEGORY_UNSELECTED_CLASS
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
@@ -64,6 +65,7 @@ const selectedCategory = defineModel<string>('selectedCategory', {
 })

 const { t } = useI18n()
+const { flags } = useFeatureFlags()
 const nodeDefStore = useNodeDefStore()

 const topCategories = computed(() => [
@@ -79,7 +81,7 @@ const hasEssentialNodes = computed(() =>

 const sourceCategories = computed(() => {
  const categories = []
-  if (hasEssentialNodes.value) {
+  if (flags.nodeLibraryEssentialsEnabled && hasEssentialNodes.value) {
    categories.push({ id: 'essentials', label: t('g.essentials') })
  }
  categories.push({ id: 'custom', label: t('g.custom') })
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -204,13 +204,22 @@ import {
 } from '@vueuse/core'
 import Divider from 'primevue/divider'
 import { useToast } from 'primevue/usetoast'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'

 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 // Lazy-loaded to avoid pulling THREE.js into the main bundle
-const Load3dViewerContent = () =>
-  import('@/components/load3d/Load3dViewerContent.vue')
+const Load3dViewerContent = defineAsyncComponent(
+  () => import('@/components/load3d/Load3dViewerContent.vue')
+)
 import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -52,7 +52,7 @@
            :value="tab.value"
            :class="
              cn(
-                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
+                'flex-1 text-center select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
                'text-sm text-foreground transition-colors',
                selectedTab === tab.value
                  ? 'bg-comfy-input font-bold'
@@ -70,7 +70,9 @@
      <!-- Tab content (scrollable) -->
      <TabsRoot v-model="selectedTab" class="h-full">
        <EssentialNodesPanel
-          v-if="selectedTab === 'essentials'"
+          v-if="
+            flags.nodeLibraryEssentialsEnabled && selectedTab === 'essentials'
+          "
          v-model:expanded-keys="expandedKeys"
          :root="renderedEssentialRoot"
          @node-click="handleNodeClick"
@@ -109,10 +111,11 @@ import {
  TabsRoot,
  TabsTrigger
 } from 'reka-ui'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'

 import SearchBox from '@/components/common/SearchBoxV2.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
 import { usePerTabState } from '@/composables/usePerTabState'
 import {
@@ -136,11 +139,22 @@ import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
 import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'

+const { flags } = useFeatureFlags()
+
 const selectedTab = useLocalStorage<TabId>(
  'Comfy.NodeLibrary.Tab',
  DEFAULT_TAB_ID
 )

+watchEffect(() => {
+  if (
+    !flags.nodeLibraryEssentialsEnabled &&
+    selectedTab.value === 'essentials'
+  ) {
+    selectedTab.value = DEFAULT_TAB_ID
+  }
+})
+
 const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
  'Comfy.NodeLibrary.SortByTab',
  {
@@ -324,11 +338,21 @@ async function handleSearch() {
  expandedKeys.value = allKeys
 }

-const tabs = computed(() => [
-  { value: 'essentials', label: t('sideToolbar.nodeLibraryTab.essentials') },
-  { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
-  { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
-])
+const tabs = computed(() => {
+  const baseTabs: Array<{ value: TabId; label: string }> = [
+    { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
+    { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
+  ]
+  return flags.nodeLibraryEssentialsEnabled
+    ? [
+        {
+          value: 'essentials' as TabId,
+          label: t('sideToolbar.nodeLibraryTab.essentials')
+        },
+        ...baseTabs
+      ]
+    : baseTabs
+})

 onMounted(() => {
  searchBoxRef.value?.focus()
--- a/src/composables/graph/useImageMenuOptions.ts
+++ b/src/composables/graph/useImageMenuOptions.ts
@@ -1,6 +1,6 @@
 import { useI18n } from 'vue-i18n'

-import { downloadFile } from '@/base/common/downloadUtil'
+import { downloadFile, openFileInNewTab } from '@/base/common/downloadUtil'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useCommandStore } from '@/stores/commandStore'

@@ -23,7 +23,7 @@ export function useImageMenuOptions() {
    if (!img) return
    const url = new URL(img.src)
    url.searchParams.delete('preview')
-    window.open(url.toString(), '_blank')
+    void openFileInNewTab(url.toString())
  }

  const copyImage = async (node: LGraphNode) => {
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -21,7 +21,8 @@ export enum ServerFeatureFlag {
  LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
  TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
  USER_SECRETS_ENABLED = 'user_secrets_enabled',
-  NODE_REPLACEMENTS = 'node_replacements'
+  NODE_REPLACEMENTS = 'node_replacements',
+  NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled'
 }

 /**
@@ -100,6 +101,17 @@ export function useFeatureFlags() {
    },
    get nodeReplacementsEnabled() {
      return api.getServerFeature(ServerFeatureFlag.NODE_REPLACEMENTS, false)
+    },
+    get nodeLibraryEssentialsEnabled() {
+      if (isNightly || import.meta.env.DEV) return true
+
+      return (
+        remoteConfig.value.node_library_essentials_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.NODE_LIBRARY_ESSENTIALS_ENABLED,
+          false
+        )
+      )
    }
  })

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -69,6 +69,7 @@
    "icon": "Icon",
    "color": "Color",
    "error": "Error",
+    "enter": "Enter",
    "enterSubgraph": "Enter Subgraph",
    "resizeFromBottomRight": "Resize from bottom-right corner",
    "resizeFromTopRight": "Resize from top-right corner",
@@ -1900,6 +1901,7 @@
    "nodeDefinitionsUpdated": "Node definitions updated",
    "errorSaveSetting": "Error saving setting {id}: {err}",
    "errorCopyImage": "Error copying image: {error}",
+    "errorOpenImage": "Error opening image: {error}",
    "noTemplatesToExport": "No templates to export",
    "failedToFetchLogs": "Failed to fetch server logs",
    "migrateToLitegraphReroute": "Reroute nodes will be removed in future versions. Click to migrate to litegraph-native reroute.",
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -43,4 +43,5 @@ export type RemoteConfig = {
  linear_toggle_enabled?: boolean
  team_workspaces_enabled?: boolean
  user_secrets_enabled?: boolean
+  node_library_essentials_enabled?: boolean
 }
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -22,6 +22,7 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
@@ -29,6 +30,7 @@ import { cn } from '@/utils/tailwindUtil'
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const { batchCount } = storeToRefs(useQueueSettingsStore())
 const settingStore = useSettingStore()
 const { isActiveSubscription } = useBillingContext()
@@ -79,7 +81,7 @@ function nodeToNodeData(node: LGraphNode) {
  return {
    ...nodeData,
    //note lastNodeErrors uses exeuctionid, node.id is execution for root
-    hasErrors: !!executionStore.lastNodeErrors?.[node.id],
+    hasErrors: !!executionErrorStore.lastNodeErrors?.[node.id],

    dropIndicator,
    onDragDrop: node.onDragDrop,
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -122,46 +122,85 @@
        <NodeBadges v-bind="badges" :pricing="undefined" class="mt-auto" />
      </div>
    </template>
-    <Button
-      variant="textonly"
+    <div
+      v-if="
+        (hasAnyError && showErrorsTabEnabled) ||
+        lgraphNode?.isSubgraphNode() ||
+        showAdvancedState ||
+        showAdvancedInputsButton
+      "
      :class="
        cn(
-          'w-full h-7 rounded-b-2xl py-2 -z-1 text-xs rounded-t-none',
-          hasAnyError && 'hover:bg-destructive-background-hover',
-          !isCollapsed && '-mt-5 pt-7 h-12'
+          'flex w-full h-7 rounded-b-2xl -z-1 text-xs rounded-t-none overflow-hidden divide-x divide-component-node-border',
+          !isCollapsed && '-mt-5 h-12'
        )
      "
-      as-child
    >
-      <button
-        v-if="hasAnyError && showErrorsTabEnabled"
-        @click.stop="useRightSidePanelStore().openPanel('errors')"
-      >
-        <span>{{ t('g.error') }}</span>
-        <i class="icon-[lucide--info] size-4" />
-      </button>
-      <button
-        v-else-if="lgraphNode?.isSubgraphNode()"
+      <Button
+        v-if="lgraphNode?.isSubgraphNode()"
+        variant="textonly"
+        :class="
+          cn(
+            'flex-1 rounded-none h-full',
+            hasAnyError &&
+              showErrorsTabEnabled &&
+              !nodeData.color &&
+              'bg-node-component-header-surface',
+            isCollapsed ? 'py-2' : 'pt-7 pb-2'
+          )
+        "
        data-testid="subgraph-enter-button"
        @click.stop="handleEnterSubgraph"
      >
-        <span>{{ t('g.enterSubgraph') }}</span>
-        <i class="icon-[comfy--workflow] size-4" />
-      </button>
-      <button
-        v-else-if="showAdvancedState || showAdvancedInputsButton"
+        <span class="truncate">{{
+          hasAnyError && showErrorsTabEnabled
+            ? t('g.enter')
+            : t('g.enterSubgraph')
+        }}</span>
+        <i class="icon-[comfy--workflow] size-4 shrink-0" />
+      </Button>
+
+      <Button
+        v-if="hasAnyError && showErrorsTabEnabled"
+        variant="textonly"
+        :class="
+          cn(
+            'flex-1 rounded-none h-full bg-error hover:bg-destructive-background-hover',
+            isCollapsed ? 'py-2' : 'pt-7 pb-2'
+          )
+        "
+        @click.stop="useRightSidePanelStore().openPanel('errors')"
+      >
+        <span class="truncate">{{ t('g.error') }}</span>
+        <i class="icon-[lucide--info] size-4 shrink-0" />
+      </Button>
+
+      <!-- Advanced inputs (non-subgraph nodes only) -->
+      <Button
+        v-if="
+          !lgraphNode?.isSubgraphNode() &&
+          (showAdvancedState || showAdvancedInputsButton)
+        "
+        variant="textonly"
+        :class="
+          cn('flex-1 rounded-none h-full', isCollapsed ? 'py-2' : 'pt-7 pb-2')
+        "
        @click.stop="showAdvancedState = !showAdvancedState"
      >
        <template v-if="showAdvancedState">
-          <span>{{ t('rightSidePanel.hideAdvancedInputsButton') }}</span>
-          <i class="icon-[lucide--chevron-up] size-4" />
+          <span class="truncate">{{
+            t('rightSidePanel.hideAdvancedInputsButton')
+          }}</span>
+          <i class="icon-[lucide--chevron-up] size-4 shrink-0" />
        </template>
        <template v-else>
-          <span>{{ t('rightSidePanel.showAdvancedInputsButton') }} </span>
-          <i class="icon-[lucide--settings-2] size-4" />
+          <span class="truncate">{{
+            t('rightSidePanel.showAdvancedInputsButton')
+          }}</span>
+          <i class="icon-[lucide--settings-2] size-4 shrink-0" />
        </template>
-      </button>
-    </Button>
+      </Button>
+    </div>
    <template v-if="!isCollapsed && nodeData.resizable !== false">
      <div
        v-for="handle in RESIZE_HANDLES"
@@ -246,7 +285,7 @@ import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useN
 import { nonWidgetedInputs } from '@/renderer/extensions/vueNodes/utils/nodeDataUtils'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import { app } from '@/scripts/app'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isTransparent } from '@/utils/colorUtil'
@@ -293,9 +332,9 @@ const isSelected = computed(() => {

 const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
 const { executing, progress } = useNodeExecutionState(nodeLocatorId)
-const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()
 const hasExecutionError = computed(
-  () => executionStore.lastExecutionErrorNodeId === nodeData.id
+  () => executionErrorStore.lastExecutionErrorNodeId === nodeData.id
 )

 const hasAnyError = computed((): boolean => {
@@ -303,7 +342,9 @@ const hasAnyError = computed((): boolean => {
    hasExecutionError.value ||
    nodeData.hasErrors ||
    error ||
-    (executionStore.lastNodeErrors?.[nodeData.id]?.errors.length ?? 0) > 0
+    executionErrorStore.getNodeErrors(nodeLocatorId.value) ||
+    (lgraphNode.value &&
+      executionErrorStore.isContainerWithInternalError(lgraphNode.value))
  )
 })

--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -101,7 +101,7 @@ import {
  stripGraphPrefix,
  useWidgetValueStore
 } from '@/stores/widgetValueStore'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'

@@ -116,7 +116,7 @@ const { nodeData } = defineProps<NodeWidgetsProps>()
 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
  useCanvasInteractions()
 const { bringNodeToFront } = useNodeZIndex()
-const executionStore = useExecutionStore()
+const executionErrorStore = useExecutionErrorStore()

 function handleWidgetPointerEvent(event: PointerEvent) {
  if (shouldHandleNodePointerEvents.value) return
@@ -170,7 +170,7 @@ interface ProcessedWidget {

 const processedWidgets = computed((): ProcessedWidget[] => {
  if (!nodeData?.widgets) return []
-  const nodeErrors = executionStore.lastNodeErrors?.[nodeData.id ?? '']
+  const nodeErrors = executionErrorStore.lastNodeErrors?.[nodeData.id ?? '']

  const nodeId = nodeData.id
  const { widgets } = nodeData
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -60,6 +60,7 @@ import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
@@ -218,18 +219,18 @@ export class ComfyApp {

  /**
   * The node errors from the previous execution.
-   * @deprecated Use useExecutionStore().lastNodeErrors instead
+   * @deprecated Use app.extensionManager.lastNodeErrors instead
   */
  get lastNodeErrors(): Record<NodeId, NodeError> | null {
-    return useExecutionStore().lastNodeErrors
+    return useExecutionErrorStore().lastNodeErrors
  }

  /**
   * The error from the previous execution.
-   * @deprecated Use useExecutionStore().lastExecutionError instead
+   * @deprecated Use app.extensionManager.lastExecutionError instead
   */
  get lastExecutionError(): ExecutionErrorWsMessage | null {
-    return useExecutionStore().lastExecutionError
+    return useExecutionErrorStore().lastExecutionError
  }

  /**
@@ -713,7 +714,7 @@ export class ComfyApp {
          })
        }
      } else if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
-        useExecutionStore().showErrorOverlay()
+        useExecutionErrorStore().showErrorOverlay()
      } else {
        useDialogService().showExecutionErrorDialog(detail)
      }
@@ -1402,9 +1403,8 @@ export class ComfyApp {

    this.processingQueue = true
    const executionStore = useExecutionStore()
-    executionStore.lastNodeErrors = null
-    executionStore.lastExecutionError = null
-    executionStore.lastPromptError = null
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.clearAllErrors()

    // Get auth token for backend nodes - uses workspace token if enabled, otherwise Firebase token
    const comfyOrgAuthToken = await useFirebaseAuthStore().getAuthToken()
@@ -1440,8 +1440,8 @@ export class ComfyApp {
            })
            delete api.authToken
            delete api.apiKey
-            executionStore.lastNodeErrors = res.node_errors ?? null
-            if (executionStore.lastNodeErrors?.length) {
+            executionErrorStore.lastNodeErrors = res.node_errors ?? null
+            if (executionErrorStore.lastNodeErrors?.length) {
              this.canvas.draw(true, true)
            } else {
              try {
@@ -1477,7 +1477,8 @@ export class ComfyApp {
            console.error(error)

            if (error instanceof PromptExecutionError) {
-              executionStore.lastNodeErrors = error.response.node_errors ?? null
+              executionErrorStore.lastNodeErrors =
+                error.response.node_errors ?? null

              // Store prompt-level error separately only when no node-specific errors exist,
              // because node errors already carry the full context. Prompt-level errors
@@ -1489,13 +1490,13 @@ export class ComfyApp {
              if (!hasNodeErrors) {
                const respError = error.response.error
                if (respError && typeof respError === 'object') {
-                  executionStore.lastPromptError = {
+                  executionErrorStore.lastPromptError = {
                    type: respError.type,
                    message: respError.message,
                    details: respError.details ?? ''
                  }
                } else if (typeof respError === 'string') {
-                  executionStore.lastPromptError = {
+                  executionErrorStore.lastPromptError = {
                    type: 'error',
                    message: respError,
                    details: ''
@@ -1504,7 +1505,7 @@ export class ComfyApp {
              }

              if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
-                executionStore.showErrorOverlay()
+                executionErrorStore.showErrorOverlay()
              }
              this.canvas.draw(true, true)
            }
@@ -1533,7 +1534,7 @@ export class ComfyApp {
    } finally {
      this.processingQueue = false
    }
-    return !executionStore.lastNodeErrors
+    return !executionErrorStore.lastNodeErrors
  }

  showErrorOnFileLoad(file: File) {
@@ -1880,10 +1881,8 @@ export class ComfyApp {
  clean() {
    const nodeOutputStore = useNodeOutputStore()
    nodeOutputStore.resetAllOutputsAndPreviews()
-    const executionStore = useExecutionStore()
-    executionStore.lastNodeErrors = null
-    executionStore.lastExecutionError = null
-    executionStore.lastPromptError = null
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.clearAllErrors()

    useDomWidgetStore().clear()

--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -7,12 +7,14 @@ import {
  LegacyWidget,
  LiteGraph
 } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import type {
  IBaseWidget,
  IWidgetOptions
 } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { generateUUID } from '@/utils/formatUtil'

 export interface BaseDOMWidget<
@@ -148,6 +150,16 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
    this.callback?.(this.value)
  }

+  override setNodeId(nodeId: NodeId): void {
+    // Capture the DOM-resolved value before registration, since the base class
+    // registers _state.value which is undefined for DOM widgets (their value
+    // lives in the DOM element / options.getValue).
+    const resolvedValue = this.value
+    super.setNodeId(nodeId)
+    const state = useWidgetValueStore().getWidget(nodeId, this.name)
+    if (state) state.value = resolvedValue
+  }
+
  get margin(): number {
    return this.options.margin ?? BaseDOMWidgetImpl.DEFAULT_MARGIN
  }
--- a/src/scripts/domWidgetStore.test.ts
+++ b/src/scripts/domWidgetStore.test.ts
@@ -0,0 +1,47 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { DOMWidgetImpl } from '@/scripts/domWidget'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
+
+describe('DOMWidgetImpl store integration', () => {
+  let node: LGraphNode
+  let store: ReturnType<typeof useWidgetValueStore>
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    store = useWidgetValueStore()
+    const graph = new LGraph()
+    node = new LGraphNode('TestNode')
+    node.id = 1
+    graph.add(node)
+  })
+
+  it('registers DOM-resolved value in store via setNodeId', () => {
+    const defaultValue = 'You are an expert image-generation engine.'
+    const element = document.createElement('textarea')
+    element.value = defaultValue
+
+    const widget = new DOMWidgetImpl({
+      node,
+      name: 'system_prompt',
+      type: 'customtext',
+      element,
+      options: {
+        getValue: () => element.value as string,
+        setValue: (v: string) => {
+          element.value = v
+          const state = store.getWidget(node.id, 'system_prompt')
+          if (state) state.value = v
+        }
+      }
+    })
+
+    widget.setNodeId(node.id)
+
+    const state = store.getWidget(node.id, 'system_prompt')
+    expect(state?.value).toBe(defaultValue)
+  })
+})
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -1,6 +1,6 @@
 import _ from 'es-toolkit/compat'

-import { downloadFile } from '@/base/common/downloadUtil'
+import { downloadFile, openFileInNewTab } from '@/base/common/downloadUtil'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
 import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
@@ -654,7 +654,7 @@ export const useLitegraphService = () => {
              callback: () => {
                const url = new URL(img.src)
                url.searchParams.delete('preview')
-                window.open(url, '_blank')
+                void openFileInNewTab(url.toString())
              }
            },
            ...getCopyImageOption(img),
--- a/src/stores/executionErrorStore.ts
+++ b/src/stores/executionErrorStore.ts
@@ -0,0 +1,306 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
+import type {
+  ExecutionErrorWsMessage,
+  NodeError,
+  PromptError
+} from '@/schemas/apiSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
+import {
+  executionIdToNodeLocatorId,
+  forEachNode,
+  getNodeByExecutionId,
+  getExecutionIdByNode
+} from '@/utils/graphTraversalUtil'
+
+/**
+ * Store dedicated to execution error state management.
+ *
+ * Extracted from executionStore to separate error-related concerns
+ * (state, computed properties, graph flag propagation, overlay UI)
+ * from execution flow management (progress, queuing, events).
+ */
+export const useExecutionErrorStore = defineStore('executionError', () => {
+  const workflowStore = useWorkflowStore()
+  const canvasStore = useCanvasStore()
+
+  const lastNodeErrors = ref<Record<NodeId, NodeError> | null>(null)
+  const lastExecutionError = ref<ExecutionErrorWsMessage | null>(null)
+  const lastPromptError = ref<PromptError | null>(null)
+
+  const isErrorOverlayOpen = ref(false)
+
+  function showErrorOverlay() {
+    isErrorOverlayOpen.value = true
+  }
+
+  function dismissErrorOverlay() {
+    isErrorOverlayOpen.value = false
+  }
+
+  /** Clear all error state. Called at execution start. */
+  function clearAllErrors() {
+    lastExecutionError.value = null
+    lastPromptError.value = null
+    lastNodeErrors.value = null
+    isErrorOverlayOpen.value = false
+  }
+
+  /** Clear only prompt-level errors. Called during resetExecutionState. */
+  function clearPromptError() {
+    lastPromptError.value = null
+  }
+
+  const lastExecutionErrorNodeLocatorId = computed(() => {
+    const err = lastExecutionError.value
+    if (!err) return null
+    return executionIdToNodeLocatorId(app.rootGraph, String(err.node_id))
+  })
+
+  const lastExecutionErrorNodeId = computed(() => {
+    const locator = lastExecutionErrorNodeLocatorId.value
+    if (!locator) return null
+    const localId = workflowStore.nodeLocatorIdToNodeId(locator)
+    return localId != null ? String(localId) : null
+  })
+
+  /** Whether a runtime execution error is present */
+  const hasExecutionError = computed(() => !!lastExecutionError.value)
+
+  /** Whether a prompt-level error is present (e.g. invalid_prompt, prompt_no_outputs) */
+  const hasPromptError = computed(() => !!lastPromptError.value)
+
+  /** Whether any node validation errors are present */
+  const hasNodeError = computed(
+    () => !!lastNodeErrors.value && Object.keys(lastNodeErrors.value).length > 0
+  )
+
+  /** Whether any error (node validation, runtime execution, or prompt-level) is present */
+  const hasAnyError = computed(
+    () => hasExecutionError.value || hasPromptError.value || hasNodeError.value
+  )
+
+  const allErrorExecutionIds = computed<string[]>(() => {
+    const ids: string[] = []
+    if (lastNodeErrors.value) {
+      ids.push(...Object.keys(lastNodeErrors.value))
+    }
+    if (lastExecutionError.value) {
+      const nodeId = lastExecutionError.value.node_id
+      if (nodeId !== null && nodeId !== undefined) {
+        ids.push(String(nodeId))
+      }
+    }
+    return ids
+  })
+
+  /** Count of prompt-level errors (0 or 1) */
+  const promptErrorCount = computed(() => (lastPromptError.value ? 1 : 0))
+
+  /** Count of all individual node validation errors */
+  const nodeErrorCount = computed(() => {
+    if (!lastNodeErrors.value) return 0
+    let count = 0
+    for (const nodeError of Object.values(lastNodeErrors.value)) {
+      count += nodeError.errors.length
+    }
+    return count
+  })
+
+  /** Count of runtime execution errors (0 or 1) */
+  const executionErrorCount = computed(() => (lastExecutionError.value ? 1 : 0))
+
+  /** Total count of all individual errors */
+  const totalErrorCount = computed(
+    () =>
+      promptErrorCount.value + nodeErrorCount.value + executionErrorCount.value
+  )
+
+  /** Pre-computed Set of graph node IDs (as strings) that have errors in the current graph scope. */
+  const activeGraphErrorNodeIds = computed<Set<string>>(() => {
+    const ids = new Set<string>()
+    if (!app.rootGraph) return ids
+
+    // Fall back to rootGraph when currentGraph hasn't been initialized yet
+    const activeGraph = canvasStore.currentGraph ?? app.rootGraph
+
+    if (lastNodeErrors.value) {
+      for (const executionId of Object.keys(lastNodeErrors.value)) {
+        const graphNode = getNodeByExecutionId(app.rootGraph, executionId)
+        if (graphNode?.graph === activeGraph) {
+          ids.add(String(graphNode.id))
+        }
+      }
+    }
+
+    if (lastExecutionError.value) {
+      const execNodeId = String(lastExecutionError.value.node_id)
+      const graphNode = getNodeByExecutionId(app.rootGraph, execNodeId)
+      if (graphNode?.graph === activeGraph) {
+        ids.add(String(graphNode.id))
+      }
+    }
+
+    return ids
+  })
+
+  /** Map of node errors indexed by locator ID. */
+  const nodeErrorsByLocatorId = computed<Record<NodeLocatorId, NodeError>>(
+    () => {
+      if (!lastNodeErrors.value) return {}
+
+      const map: Record<NodeLocatorId, NodeError> = {}
+
+      for (const [executionId, nodeError] of Object.entries(
+        lastNodeErrors.value
+      )) {
+        const locatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
+        if (locatorId) {
+          map[locatorId] = nodeError
+        }
+      }
+
+      return map
+    }
+  )
+
+  /** Get node errors by locator ID. */
+  const getNodeErrors = (
+    nodeLocatorId: NodeLocatorId
+  ): NodeError | undefined => {
+    return nodeErrorsByLocatorId.value[nodeLocatorId]
+  }
+
+  /** Check if a specific slot has validation errors. */
+  const slotHasError = (
+    nodeLocatorId: NodeLocatorId,
+    slotName: string
+  ): boolean => {
+    const nodeError = getNodeErrors(nodeLocatorId)
+    if (!nodeError) return false
+
+    return nodeError.errors.some((e) => e.extra_info?.input_name === slotName)
+  }
+
+  /**
+   * Set of all execution ID prefixes derived from active error nodes,
+   * including the error nodes themselves.
+   *
+   * Example: error at "65:70:63" → Set { "65", "65:70", "65:70:63" }
+   */
+  const errorAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
+    const ids = new Set<NodeExecutionId>()
+
+    for (const executionId of allErrorExecutionIds.value) {
+      const parts = executionId.split(':')
+      // Add every prefix including the full ID (error leaf node itself)
+      for (let i = 1; i <= parts.length; i++) {
+        ids.add(parts.slice(0, i).join(':'))
+      }
+    }
+
+    return ids
+  })
+
+  /** True if the node has errors inside it at any nesting depth. */
+  function isContainerWithInternalError(node: LGraphNode): boolean {
+    if (!app.rootGraph) return false
+    const execId = getExecutionIdByNode(app.rootGraph, node)
+    if (!execId) return false
+    return errorAncestorExecutionIds.value.has(execId)
+  }
+
+  /**
+   * Update node and slot error flags when validation errors change.
+   * Propagates errors up subgraph chains.
+   */
+  watch(lastNodeErrors, () => {
+    if (!app.rootGraph) return
+
+    // Clear all error flags
+    forEachNode(app.rootGraph, (node) => {
+      node.has_errors = false
+      if (node.inputs) {
+        for (const slot of node.inputs) {
+          slot.hasErrors = false
+        }
+      }
+    })
+
+    if (!lastNodeErrors.value) return
+
+    // Set error flags on nodes and slots
+    for (const [executionId, nodeError] of Object.entries(
+      lastNodeErrors.value
+    )) {
+      const node = getNodeByExecutionId(app.rootGraph, executionId)
+      if (!node) continue
+
+      node.has_errors = true
+
+      // Mark input slots with errors
+      if (node.inputs) {
+        for (const error of nodeError.errors) {
+          const slotName = error.extra_info?.input_name
+          if (!slotName) continue
+
+          const slot = node.inputs.find((s) => s.name === slotName)
+          if (slot) {
+            slot.hasErrors = true
+          }
+        }
+      }
+
+      // Propagate errors to parent subgraph nodes
+      const parts = executionId.split(':')
+      for (let i = parts.length - 1; i > 0; i--) {
+        const parentExecutionId = parts.slice(0, i).join(':')
+        const parentNode = getNodeByExecutionId(
+          app.rootGraph,
+          parentExecutionId
+        )
+        if (parentNode) {
+          parentNode.has_errors = true
+        }
+      }
+    }
+  })
+
+  return {
+    // Raw state
+    lastNodeErrors,
+    lastExecutionError,
+    lastPromptError,
+
+    // Clearing
+    clearAllErrors,
+    clearPromptError,
+
+    // Overlay UI
+    isErrorOverlayOpen,
+    showErrorOverlay,
+    dismissErrorOverlay,
+
+    // Derived state
+    hasExecutionError,
+    hasPromptError,
+    hasNodeError,
+    hasAnyError,
+    allErrorExecutionIds,
+    totalErrorCount,
+    lastExecutionErrorNodeId,
+    activeGraphErrorNodeIds,
+
+    // Lookup helpers
+    getNodeErrors,
+    slotHasError,
+    errorAncestorExecutionIds,
+    isContainerWithInternalError
+  }
+})
--- a/src/stores/executionStore.test.ts
+++ b/src/stores/executionStore.test.ts
@@ -2,6 +2,8 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'

 // Create mock functions that will be shared
 const mockNodeExecutionIdToNodeLocatorId = vi.fn()
@@ -80,20 +82,20 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
      // Mock app.rootGraph.getNodeById to return the mock node
      vi.mocked(app.rootGraph.getNodeById).mockReturnValue(mockNode)

-      const result = store.executionIdToNodeLocatorId('123:456')
+      const result = executionIdToNodeLocatorId(app.rootGraph, '123:456')

      expect(result).toBe('a1b2c3d4-e5f6-7890-abcd-ef1234567890:456')
    })

    it('should convert simple node ID to NodeLocatorId', () => {
-      const result = store.executionIdToNodeLocatorId('123')
+      const result = executionIdToNodeLocatorId(app.rootGraph, '123')

      // For simple node IDs, it should return the ID as-is
      expect(result).toBe('123')
    })

    it('should handle numeric node IDs', () => {
-      const result = store.executionIdToNodeLocatorId(123)
+      const result = executionIdToNodeLocatorId(app.rootGraph, 123)

      // For numeric IDs, it should convert to string and return as-is
      expect(result).toBe('123')
@@ -103,7 +105,9 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
      // Mock app.rootGraph.getNodeById to return null (node not found)
      vi.mocked(app.rootGraph.getNodeById).mockReturnValue(null)

-      expect(store.executionIdToNodeLocatorId('999:456')).toBe(undefined)
+      expect(executionIdToNodeLocatorId(app.rootGraph, '999:456')).toBe(
+        undefined
+      )
    })
  })

@@ -174,13 +178,13 @@ describe('useExecutionStore - reconcileInitializingJobs', () => {
  })
 })

-describe('useExecutionStore - Node Error Lookups', () => {
-  let store: ReturnType<typeof useExecutionStore>
+describe('useExecutionErrorStore - Node Error Lookups', () => {
+  let store: ReturnType<typeof useExecutionErrorStore>

  beforeEach(() => {
    vi.clearAllMocks()
    setActivePinia(createTestingPinia({ stubActions: false }))
-    store = useExecutionStore()
+    store = useExecutionErrorStore()
  })

  describe('getNodeErrors', () => {
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -1,8 +1,7 @@
 import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'

 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
-import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
@@ -20,22 +19,20 @@ import type {
  ExecutionInterruptedWsMessage,
  ExecutionStartWsMessage,
  ExecutionSuccessWsMessage,
-  NodeError,
  NodeProgressState,
  NotificationWsMessage,
  ProgressStateWsMessage,
  ProgressTextWsMessage,
-  ProgressWsMessage,
-  PromptError
+  ProgressWsMessage
 } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useJobPreviewStore } from '@/stores/jobPreviewStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
-import { createNodeLocatorId } from '@/types/nodeIdentification'
-import { forEachNode, getNodeByExecutionId } from '@/utils/graphTraversalUtil'
 import { classifyCloudValidationError } from '@/utils/executionErrorUtil'
+import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'

 interface QueuedJob {
  /**
@@ -49,73 +46,14 @@ interface QueuedJob {
  workflow?: ComfyWorkflow
 }

-const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
-  const node = graph.getNodeById(id)
-  if (node?.isSubgraphNode()) return node.subgraph
-}
-
-/**
- * Recursively get the subgraph objects for the given subgraph instance IDs
- * @param currentGraph The current graph
- * @param subgraphNodeIds The instance IDs
- * @param subgraphs The subgraphs
- * @returns The subgraphs that correspond to each of the instance IDs.
- */
-function getSubgraphsFromInstanceIds(
-  currentGraph: LGraph | Subgraph,
-  subgraphNodeIds: string[],
-  subgraphs: Subgraph[] = []
-): Subgraph[] | undefined {
-  // Last segment is the node portion; nothing to do.
-  if (subgraphNodeIds.length === 1) return subgraphs
-
-  const currentPart = subgraphNodeIds.shift()
-  if (currentPart === undefined) return subgraphs
-
-  const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-  if (!subgraph) {
-    console.warn(`Subgraph not found: ${currentPart}`)
-    return undefined
-  }
-
-  subgraphs.push(subgraph)
-  return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
-}
-
-/**
- * Convert execution context node IDs to NodeLocatorIds
- * @param nodeId The node ID from execution context (could be execution ID)
- * @returns The NodeLocatorId
- */
-function executionIdToNodeLocatorId(
-  nodeId: string | number
-): NodeLocatorId | undefined {
-  const nodeIdStr = String(nodeId)
-
-  if (!nodeIdStr.includes(':')) {
-    // It's a top-level node ID
-    return nodeIdStr
-  }
-
-  // It's an execution node ID
-  const parts = nodeIdStr.split(':')
-  const localNodeId = parts[parts.length - 1]
-  const subgraphs = getSubgraphsFromInstanceIds(app.rootGraph, parts)
-  if (!subgraphs) return undefined
-  const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
-  return nodeLocatorId
-}
-
 export const useExecutionStore = defineStore('execution', () => {
  const workflowStore = useWorkflowStore()
  const canvasStore = useCanvasStore()
+  const executionErrorStore = useExecutionErrorStore()

  const clientId = ref<string | null>(null)
  const activeJobId = ref<string | null>(null)
  const queuedJobs = ref<Record<NodeId, QueuedJob>>({})
-  const lastNodeErrors = ref<Record<NodeId, NodeError> | null>(null)
-  const lastExecutionError = ref<ExecutionErrorWsMessage | null>(null)
-  const lastPromptError = ref<PromptError | null>(null)
  // This is the progress of all nodes in the currently executing workflow
  const nodeProgressStates = ref<Record<string, NodeProgressState>>({})
  const nodeProgressStatesByJob = ref<
@@ -168,7 +106,7 @@ export const useExecutionStore = defineStore('execution', () => {
      const parts = String(state.display_node_id).split(':')
      for (let i = 0; i < parts.length; i++) {
        const executionId = parts.slice(0, i + 1).join(':')
-        const locatorId = executionIdToNodeLocatorId(executionId)
+        const locatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
        if (!locatorId) continue

        result[locatorId] = mergeExecutionProgressStates(
@@ -245,19 +183,6 @@ export const useExecutionStore = defineStore('execution', () => {
    return total > 0 ? done / total : 0
  })

-  const lastExecutionErrorNodeLocatorId = computed(() => {
-    const err = lastExecutionError.value
-    if (!err) return null
-    return executionIdToNodeLocatorId(String(err.node_id))
-  })
-
-  const lastExecutionErrorNodeId = computed(() => {
-    const locator = lastExecutionErrorNodeLocatorId.value
-    if (!locator) return null
-    const localId = workflowStore.nodeLocatorIdToNodeId(locator)
-    return localId != null ? String(localId) : null
-  })
-
  function bindExecutionEvents() {
    api.addEventListener('notification', handleNotification)
    api.addEventListener('execution_start', handleExecutionStart)
@@ -289,10 +214,7 @@ export const useExecutionStore = defineStore('execution', () => {
  }

  function handleExecutionStart(e: CustomEvent<ExecutionStartWsMessage>) {
-    lastExecutionError.value = null
-    lastPromptError.value = null
-    lastNodeErrors.value = null
-    isErrorOverlayOpen.value = false
+    executionErrorStore.clearAllErrors()
    activeJobId.value = e.detail.prompt_id
    queuedJobs.value[activeJobId.value] ??= { nodes: {} }
    clearInitializationByJobId(activeJobId.value)
@@ -410,7 +332,7 @@ export const useExecutionStore = defineStore('execution', () => {
    if (handleServiceLevelError(e.detail)) return

    // OSS path / Cloud fallback (real runtime errors)
-    lastExecutionError.value = e.detail
+    executionErrorStore.lastExecutionError = e.detail
    clearInitializationByJobId(e.detail.prompt_id)
    resetExecutionState(e.detail.prompt_id)
  }
@@ -422,7 +344,7 @@ export const useExecutionStore = defineStore('execution', () => {

    clearInitializationByJobId(detail.prompt_id)
    resetExecutionState(detail.prompt_id)
-    lastPromptError.value = {
+    executionErrorStore.lastPromptError = {
      type: detail.exception_type ?? 'error',
      message: detail.exception_type
        ? `${detail.exception_type}: ${detail.exception_message}`
@@ -442,9 +364,9 @@ export const useExecutionStore = defineStore('execution', () => {
    resetExecutionState(detail.prompt_id)

    if (result.kind === 'nodeErrors') {
-      lastNodeErrors.value = result.nodeErrors
+      executionErrorStore.lastNodeErrors = result.nodeErrors
    } else {
-      lastPromptError.value = result.promptError
+      executionErrorStore.lastPromptError = result.promptError
    }
    return true
  }
@@ -515,7 +437,7 @@ export const useExecutionStore = defineStore('execution', () => {
    }
    activeJobId.value = null
    _executingNodeProgress.value = null
-    lastPromptError.value = null
+    executionErrorStore.clearPromptError()
  }

  function getNodeIdIfExecuting(nodeId: string | number) {
@@ -596,207 +518,11 @@ export const useExecutionStore = defineStore('execution', () => {
    () => runningJobIds.value.length
  )

-  /** Map of node errors indexed by locator ID. */
-  const nodeErrorsByLocatorId = computed<Record<NodeLocatorId, NodeError>>(
-    () => {
-      if (!lastNodeErrors.value) return {}
-
-      const map: Record<NodeLocatorId, NodeError> = {}
-
-      for (const [executionId, nodeError] of Object.entries(
-        lastNodeErrors.value
-      )) {
-        const locatorId = executionIdToNodeLocatorId(executionId)
-        if (locatorId) {
-          map[locatorId] = nodeError
-        }
-      }
-
-      return map
-    }
-  )
-
-  /** Get node errors by locator ID. */
-  const getNodeErrors = (
-    nodeLocatorId: NodeLocatorId
-  ): NodeError | undefined => {
-    return nodeErrorsByLocatorId.value[nodeLocatorId]
-  }
-
-  /** Check if a specific slot has validation errors. */
-  const slotHasError = (
-    nodeLocatorId: NodeLocatorId,
-    slotName: string
-  ): boolean => {
-    const nodeError = getNodeErrors(nodeLocatorId)
-    if (!nodeError) return false
-
-    return nodeError.errors.some((e) => e.extra_info?.input_name === slotName)
-  }
-
-  /**
-   * Update node and slot error flags when validation errors change.
-   * Propagates errors up subgraph chains.
-   */
-  watch(lastNodeErrors, () => {
-    if (!app.rootGraph) return
-
-    // Clear all error flags
-    forEachNode(app.rootGraph, (node) => {
-      node.has_errors = false
-      if (node.inputs) {
-        for (const slot of node.inputs) {
-          slot.hasErrors = false
-        }
-      }
-    })
-
-    if (!lastNodeErrors.value) return
-
-    // Set error flags on nodes and slots
-    for (const [executionId, nodeError] of Object.entries(
-      lastNodeErrors.value
-    )) {
-      const node = getNodeByExecutionId(app.rootGraph, executionId)
-      if (!node) continue
-
-      node.has_errors = true
-
-      // Mark input slots with errors
-      if (node.inputs) {
-        for (const error of nodeError.errors) {
-          const slotName = error.extra_info?.input_name
-          if (!slotName) continue
-
-          const slot = node.inputs.find((s) => s.name === slotName)
-          if (slot) {
-            slot.hasErrors = true
-          }
-        }
-      }
-
-      // Propagate errors to parent subgraph nodes
-      const parts = executionId.split(':')
-      for (let i = parts.length - 1; i > 0; i--) {
-        const parentExecutionId = parts.slice(0, i).join(':')
-        const parentNode = getNodeByExecutionId(
-          app.rootGraph,
-          parentExecutionId
-        )
-        if (parentNode) {
-          parentNode.has_errors = true
-        }
-      }
-    }
-  })
-
-  /** Whether a runtime execution error is present */
-  const hasExecutionError = computed(() => !!lastExecutionError.value)
-
-  /** Whether a prompt-level error is present (e.g. invalid_prompt, prompt_no_outputs) */
-  const hasPromptError = computed(() => !!lastPromptError.value)
-
-  /** Whether any node validation errors are present */
-  const hasNodeError = computed(
-    () => !!lastNodeErrors.value && Object.keys(lastNodeErrors.value).length > 0
-  )
-
-  /** Whether any error (node validation, runtime execution, or prompt-level) is present */
-  const hasAnyError = computed(
-    () => hasExecutionError.value || hasPromptError.value || hasNodeError.value
-  )
-
-  const allErrorExecutionIds = computed<string[]>(() => {
-    const ids: string[] = []
-    if (lastNodeErrors.value) {
-      ids.push(...Object.keys(lastNodeErrors.value))
-    }
-    if (lastExecutionError.value) {
-      const nodeId = lastExecutionError.value.node_id
-      if (nodeId !== null && nodeId !== undefined) {
-        ids.push(String(nodeId))
-      }
-    }
-    return ids
-  })
-
-  /** Count of prompt-level errors (0 or 1) */
-  const promptErrorCount = computed(() => (lastPromptError.value ? 1 : 0))
-
-  /** Count of all individual node validation errors */
-  const nodeErrorCount = computed(() => {
-    if (!lastNodeErrors.value) return 0
-    let count = 0
-    for (const nodeError of Object.values(lastNodeErrors.value)) {
-      count += nodeError.errors.length
-    }
-    return count
-  })
-
-  /** Count of runtime execution errors (0 or 1) */
-  const executionErrorCount = computed(() => (lastExecutionError.value ? 1 : 0))
-
-  /** Total count of all individual errors */
-  const totalErrorCount = computed(
-    () =>
-      promptErrorCount.value + nodeErrorCount.value + executionErrorCount.value
-  )
-
-  /** Pre-computed Set of graph node IDs (as strings) that have errors in the current graph scope. */
-  const activeGraphErrorNodeIds = computed<Set<string>>(() => {
-    const ids = new Set<string>()
-    if (!app.rootGraph) return ids
-
-    // Fall back to rootGraph when currentGraph hasn't been initialized yet
-    const activeGraph = canvasStore.currentGraph ?? app.rootGraph
-
-    if (lastNodeErrors.value) {
-      for (const executionId of Object.keys(lastNodeErrors.value)) {
-        const graphNode = getNodeByExecutionId(app.rootGraph, executionId)
-        if (graphNode?.graph === activeGraph) {
-          ids.add(String(graphNode.id))
-        }
-      }
-    }
-
-    if (lastExecutionError.value) {
-      const execNodeId = String(lastExecutionError.value.node_id)
-      const graphNode = getNodeByExecutionId(app.rootGraph, execNodeId)
-      if (graphNode?.graph === activeGraph) {
-        ids.add(String(graphNode.id))
-      }
-    }
-
-    return ids
-  })
-
-  function hasInternalErrorForNode(nodeId: string | number): boolean {
-    const prefix = `${nodeId}:`
-    return allErrorExecutionIds.value.some((id) => id.startsWith(prefix))
-  }
-
-  const isErrorOverlayOpen = ref(false)
-
-  function showErrorOverlay() {
-    isErrorOverlayOpen.value = true
-  }
-
-  function dismissErrorOverlay() {
-    isErrorOverlayOpen.value = false
-  }
-
  return {
    isIdle,
    clientId,
    activeJobId,
    queuedJobs,
-    lastNodeErrors,
-    lastExecutionError,
-    lastPromptError,
-    hasAnyError,
-    allErrorExecutionIds,
-    totalErrorCount,
-    lastExecutionErrorNodeId,
    executingNodeId,
    executingNodeIds,
    activeJob,
@@ -823,16 +549,7 @@ export const useExecutionStore = defineStore('execution', () => {
    // Raw executing progress data for backward compatibility in ComfyApp.
    _executingNodeProgress,
    // NodeLocatorId conversion helpers
-    executionIdToNodeLocatorId,
    nodeLocatorIdToExecutionId,
-    jobIdToWorkflowId,
-    // Node error lookup helpers
-    getNodeErrors,
-    slotHasError,
-    hasInternalErrorForNode,
-    activeGraphErrorNodeIds,
-    isErrorOverlayOpen,
-    showErrorOverlay,
-    dismissErrorOverlay
+    jobIdToWorkflowId
  }
 })
--- a/src/stores/imagePreviewStore.test.ts
+++ b/src/stores/imagePreviewStore.test.ts
@@ -38,10 +38,8 @@ const createMockOutputs = (
  images?: ExecutedWsMessage['output']['images']
 ): ExecutedWsMessage['output'] => ({ images })

-vi.mock('@/stores/executionStore', () => ({
-  useExecutionStore: vi.fn(() => ({
-    executionIdToNodeLocatorId: vi.fn((id: string) => id)
-  }))
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  executionIdToNodeLocatorId: vi.fn((_rootGraph: unknown, id: string) => id)
 }))

 vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -12,7 +12,6 @@ import type {
 } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useExecutionStore } from '@/stores/executionStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isAnimatedOutput, isVideoNode } from '@/utils/litegraphUtil'
@@ -20,6 +19,7 @@ import {
  releaseSharedObjectUrl,
  retainSharedObjectUrl
 } from '@/utils/objectUrlUtil'
+import { executionIdToNodeLocatorId } from '@/utils/graphTraversalUtil'

 const PREVIEW_REVOKE_DELAY_MS = 400

@@ -43,7 +43,6 @@ interface SetOutputOptions {

 export const useNodeOutputStore = defineStore('nodeOutput', () => {
  const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = useWorkflowStore()
-  const { executionIdToNodeLocatorId } = useExecutionStore()
  const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
  const latestPreview = ref<string[]>([])

@@ -202,7 +201,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
    outputs: ExecutedWsMessage['output'] | ResultItem,
    options: SetOutputOptions = {}
  ) {
-    const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+    const nodeLocatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
    if (!nodeLocatorId) return

    setOutputsByLocatorId(nodeLocatorId, outputs, options)
@@ -219,7 +218,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
    executionId: string,
    previewImages: string[]
  ) {
-    const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+    const nodeLocatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
    if (!nodeLocatorId) return
    const existingPreviews = app.nodePreviewImages[nodeLocatorId]
    if (scheduledRevoke[nodeLocatorId]) {
@@ -275,7 +274,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   * @param executionId - The execution ID
   */
  function revokePreviewsByExecutionId(executionId: string) {
-    const nodeLocatorId = executionIdToNodeLocatorId(executionId)
+    const nodeLocatorId = executionIdToNodeLocatorId(app.rootGraph, executionId)
    if (!nodeLocatorId) return
    scheduleRevoke(nodeLocatorId, () =>
      revokePreviewsByLocatorId(nodeLocatorId)
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -25,7 +25,7 @@ import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates
 import { api } from '@/scripts/api'
 import type { GlobalSubgraphData } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
-import { useExecutionStore } from '@/stores/executionStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { UserFile } from '@/stores/userFileStore'

@@ -79,7 +79,7 @@ export const useSubgraphStore = defineStore('subgraph', () => {
          dependent_outputs: []
        }
      }
-      useExecutionStore().lastNodeErrors = errors
+      useExecutionErrorStore().lastNodeErrors = errors
      useCanvasStore().getCanvas().draw(true, true)
      throw new Error(
        'The root graph of a subgraph blueprint must consist of only a single subgraph node'
--- a/src/stores/workspaceStore.ts
+++ b/src/stores/workspaceStore.ts
@@ -12,6 +12,7 @@ import type { SidebarTabExtension, ToastManager } from '@/types/extensionTypes'

 import { useApiKeyAuthStore } from './apiKeyAuthStore'
 import { useCommandStore } from './commandStore'
+import { useExecutionErrorStore } from './executionErrorStore'
 import { useFirebaseAuthStore } from './firebaseAuthStore'
 import { useQueueSettingsStore } from './queueStore'
 import { useBottomPanelStore } from './workspace/bottomPanelStore'
@@ -86,6 +87,8 @@ function workspaceStoreSetup() {
    return sidebarTab.value.sidebarTabs
  }

+  const executionErrorStore = useExecutionErrorStore()
+
  return {
    spinner,
    shiftDown,
@@ -104,6 +107,10 @@ function workspaceStoreSetup() {
    bottomPanel,
    user: partialUserStore,

+    // Execution error state (read-only, exposed for custom extensions)
+    lastNodeErrors: computed(() => executionErrorStore.lastNodeErrors),
+    lastExecutionError: computed(() => executionErrorStore.lastExecutionError),
+
    registerSidebarTab,
    unregisterSidebarTab,
    getSidebarTabs
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -1,5 +1,7 @@
 import type { Component } from 'vue'

+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ExecutionErrorWsMessage, NodeError } from '@/schemas/apiSchema'
 import type { useDialogService } from '@/services/dialogService'
 import type { ComfyCommand } from '@/stores/commandStore'

@@ -111,6 +113,10 @@ export interface ExtensionManager {
    get: <T = unknown>(id: string) => T | undefined
    set: <T = unknown>(id: string, value: T) => void
  }
+
+  // Execution error state (read-only)
+  lastNodeErrors: Record<NodeId, NodeError> | null
+  lastExecutionError: ExecutionErrorWsMessage | null
 }

 export interface CommandManager {
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -4,7 +4,10 @@ import type {
  Subgraph
 } from '@/lib/litegraph/src/litegraph'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
-import { parseNodeLocatorId } from '@/types/nodeIdentification'
+import {
+  createNodeLocatorId,
+  parseNodeLocatorId
+} from '@/types/nodeIdentification'

 import { isSubgraphIoNode } from './typeGuardUtil'

@@ -328,6 +331,35 @@ export function getNodeByExecutionId(
  return targetGraph.getNodeById(localNodeId) || null
 }

+/**
+ * Returns the execution ID for a node relative to the root graph.
+ *
+ * Root-level nodes return their ID directly (e.g. "42").
+ * Nodes inside subgraphs return a colon-separated chain (e.g. "65:70:63").
+ *
+ * @param rootGraph - The root graph to resolve from
+ * @param node - The node whose execution ID to compute
+ * @returns The execution ID string, or null if the node has no graph
+ */
+export function getExecutionIdByNode(
+  rootGraph: LGraph,
+  node: LGraphNode
+): NodeExecutionId | null {
+  if (!node.graph) return null
+
+  if (node.graph === rootGraph || node.graph.isRootGraph) {
+    return String(node.id)
+  }
+
+  const parentPath = findPartialExecutionPathToGraph(
+    node.graph as LGraph,
+    rootGraph
+  )
+  if (parentPath === undefined) return null
+
+  return `${parentPath}:${node.id}`
+}
+
 /**
 * Get a node by its locator ID from anywhere in the graph hierarchy.
 * Locator IDs use UUID format like "uuid:nodeId" for subgraph nodes.
@@ -359,6 +391,36 @@ export function getNodeByLocatorId(
  return targetSubgraph.getNodeById(localNodeId) || null
 }

+/**
+ * Convert execution context node IDs to NodeLocatorIds.
+ * Uses traverseSubgraphPath to resolve the subgraph chain.
+ *
+ * @param rootGraph - The root graph to resolve against
+ * @param nodeId - The node ID from execution context (could be execution ID like "123:456:789")
+ * @returns The NodeLocatorId, or undefined if resolution fails
+ */
+export function executionIdToNodeLocatorId(
+  rootGraph: LGraph,
+  nodeId: string | number
+): NodeLocatorId | undefined {
+  const nodeIdStr = String(nodeId)
+
+  if (!nodeIdStr.includes(':')) {
+    // It's a top-level node ID
+    return nodeIdStr
+  }
+
+  // It's an execution node ID — resolve subgraph path
+  const parts = nodeIdStr.split(':')
+  const localNodeId = parts.at(-1)!
+  const subgraphPath = parts.slice(0, -1)
+
+  const targetGraph = traverseSubgraphPath(rootGraph, subgraphPath)
+  if (!targetGraph) return undefined
+
+  return createNodeLocatorId(targetGraph.id, localNodeId)
+}
+
 /**
 * Finds the root graph from any graph in the hierarchy.
 *
Author	SHA1	Message	Date
Hunter Senft-Grupp	8ed15f680e	fix: sync DOM widget values to widgetValueStore on registration DOM widgets (e.g. textarea for system_prompt) resolve their value through options.getValue() / DOM elements rather than _state.value. When BaseWidget.setNodeId registers with the store, it spreads _state.value which is undefined for DOM widgets, causing Vue nodes to display empty. Override setNodeId in BaseDOMWidgetImpl to capture the DOM-resolved value before registration and sync it into the store afterward. This keeps the fix in the DOM widget layer where the mismatch originates, leaving BaseWidget unchanged.	2026-02-24 03:40:11 -05:00
Comfy Org PR Bot	4daba09415	[backport cloud/1.40] fix: open image in new tab on cloud fetches as blob to avoid GCS auto-download (#9158 ) Backport of #9122 to `cloud/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9158-backport-cloud-1-40-fix-open-image-in-new-tab-on-cloud-fetches-as-blob-to-avoid-GCS-au-3116d73d365081789cc2fffb3fb538f3) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org>	2026-02-23 22:13:19 -08:00
Comfy Org PR Bot	b6ca126eff	[backport cloud/1.40] fix: fix error overlay and TabErrors filtering for nested subgraphs (#9133 ) Backport of #9129 to `cloud/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9133-backport-cloud-1-40-fix-fix-error-overlay-and-TabErrors-filtering-for-nested-subgraphs-3106d73d3650818cb0d9d8e96e60ae37) by [Unito](https://www.unito.io) Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>	2026-02-23 04:14:00 -08:00
Comfy Org PR Bot	d4f6a9af0e	[backport cloud/1.40] [refactor] Extract executionErrorStore from executionStore (#9131 ) Backport of #9060 to `cloud/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9131-backport-cloud-1-40-refactor-Extract-executionErrorStore-from-executionStore-3106d73d3650815e8713d30979eed798) by [Unito](https://www.unito.io) Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>	2026-02-23 04:01:08 -08:00
Comfy Org PR Bot	b654d7c06a	[backport cloud/1.40] feat(node): show Enter Subgraph and Error buttons side by side in node footer (#9128 ) Backport of #9126 to `cloud/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9128-backport-cloud-1-40-feat-node-show-Enter-Subgraph-and-Error-buttons-side-by-side-in-n-3106d73d3650818e8a61c8c6efab2a93) by [Unito](https://www.unito.io) Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>	2026-02-23 01:18:43 -08:00
Benjamin Lu	d3b67511f9	fix: backport load 3D dialog defineAsyncComponent to cloud/1.40 (#9092 ) ## Summary Backport the `defineAsyncComponent` fix from #8990 to `cloud/1.40` so the 3D inspect dialog renders the component instead of a promise payload. ## Changes - Add `defineAsyncComponent` import in `AssetsSidebarTab.vue` - Wrap `Load3dViewerContent` lazy import with `defineAsyncComponent(...)` ## Validation - `pnpm typecheck` - `pnpm lint` - pre-push hook (`pnpm knip --cache`) ran during `git push` Backports #8990. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9092-fix-backport-load-3D-dialog-defineAsyncComponent-to-cloud-1-40-30f6d73d365081eb9ea6f2d771cbd762) by [Unito](https://www.unito.io)	2026-02-22 02:03:54 -08:00
Comfy Org PR Bot	92a193203d	[backport cloud/1.40] feat: add feature flag to disable Essentials tab in node library (#9082 ) Backport of #9067 to `cloud/1.40` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9082-backport-cloud-1-40-feat-add-feature-flag-to-disable-Essentials-tab-in-node-library-30f6d73d3650818ab63dd02841657bec) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: GitHub Action <action@github.com>	2026-02-21 22:29:52 -08:00