feat(website): wire English subtitle tracks for learning tutorials

fix: show featured workflow video before copy on mobile
Refine execution error presentation (#12683 )
2026-06-09 07:48:15 +00:00 · 2026-06-08 12:55:41 -04:00 · 2026-06-08 12:11:54 -04:00 · 2026-06-08 06:52:57 +00:00 · 2026-06-08 06:49:10 +00:00 · 2026-06-07 04:40:35 +00:00
45 changed files with 2135 additions and 430 deletions
--- a/apps/website/src/components/common/VideoPlayer.vue
+++ b/apps/website/src/components/common/VideoPlayer.vue
@@ -13,15 +13,9 @@ import { computed, shallowRef, useTemplateRef, watch } from 'vue'

 import { t } from '../../i18n/translations'
 import type { Locale } from '../../i18n/translations'
+import type { VideoTrack } from '../../types/video'
 import PlayPauseButton from './PlayPauseButton.vue'

-type VideoTrack = {
-  src: string
-  kind: 'subtitles' | 'captions' | 'descriptions'
-  srclang: string
-  label: string
-}
-
 const {
  locale = 'en',
  src,
@@ -285,7 +279,7 @@ function toggleFullscreen() {
        @click="toggleFullscreen"
      >
        <svg
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
@@ -331,7 +325,7 @@ function toggleFullscreen() {
        <!-- Muted icon -->
        <svg
          v-if="muted"
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
@@ -349,7 +343,7 @@ function toggleFullscreen() {
        <!-- Unmuted icon -->
        <svg
          v-else
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
--- a/apps/website/src/components/learning/FeaturedWorkflowSection.vue
+++ b/apps/website/src/components/learning/FeaturedWorkflowSection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Locale } from '../../i18n/translations'
+import type { VideoTrack } from '../../types/video'

 import { t } from '../../i18n/translations'
 import Badge from '../common/Badge.vue'
@@ -13,15 +14,23 @@ const demoVideoSrc =
  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4'
 const demoVideoPoster =
  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg'
+const demoVideoTracks: VideoTrack[] = [
+  {
+    src: 'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_vtt.en.vtt',
+    kind: 'subtitles',
+    srclang: 'en',
+    label: 'English'
+  }
+]
 </script>

 <template>
  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
-      <div class="flex flex-col gap-8">
+      <div class="order-last flex flex-col gap-8 lg:order-0">
        <div>
          <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+            class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
          >
            {{ t('learning.featured.title', locale) }}
          </h2>
@@ -31,7 +40,7 @@ const demoVideoPoster =
        </div>

        <p
-          class="text-primary-comfy-canvas max-w-md text-sm/relaxed lg:text-base"
+          class="max-w-md text-sm/relaxed text-primary-comfy-canvas lg:text-base"
        >
          {{ t('learning.featured.description', locale) }}
        </p>
@@ -54,11 +63,14 @@ const demoVideoPoster =
        </ul>
      </div>

-      <div class="border-primary-warm-gray rounded-4.5xl border p-4">
+      <div
+        class="border-primary-warm-gray rounded-4.5xl order-first border p-4 lg:order-0"
+      >
        <VideoPlayer
          :locale
          :src="demoVideoSrc"
          :poster="demoVideoPoster"
+          :tracks="demoVideoTracks"
          minimal
        />
      </div>
--- a/apps/website/src/components/learning/TutorialDetailDialog.vue
+++ b/apps/website/src/components/learning/TutorialDetailDialog.vue
@@ -62,31 +62,41 @@ onUnmounted(() => {
    >
      <button
        :aria-label="t('gallery.detail.close', locale)"
-        class="border-primary-comfy-yellow bg-primary-comfy-ink hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 transition-colors lg:right-26"
+        class="border-primary-comfy-yellow hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 bg-primary-comfy-ink transition-colors lg:right-26"
        @click="emit('close')"
      >
        <span
-          class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors"
+          class="bg-primary-comfy-yellow size-5 transition-colors group-hover:bg-primary-comfy-ink"
          style="mask: url('/icons/close.svg') center / contain no-repeat"
        />
      </button>

      <div
-        class="border-primary-comfy-yellow bg-primary-comfy-ink rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 p-3 lg:p-4"
+        class="border-primary-comfy-yellow rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 bg-primary-comfy-ink p-3 lg:p-4"
      >
        <video
          ref="videoRef"
          :src="tutorial.videoSrc"
          :poster="tutorial.poster"
          class="aspect-video w-full rounded-3xl object-contain lg:rounded-4xl"
+          crossorigin="anonymous"
          controls
          autoplay
          playsinline
-        ></video>
+        >
+          <track
+            v-for="track in tutorial.tracks ?? []"
+            :key="track.src"
+            :src="track.src"
+            :kind="track.kind"
+            :srclang="track.srclang"
+            :label="track.label"
+          />
+        </video>
      </div>

      <h2
-        class="text-primary-comfy-canvas mt-6 text-center text-lg font-medium lg:text-xl"
+        class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
      >
        {{ t('learning.tutorials.titlePrefix', locale) }}
        {{ tutorial.title[locale] }}
--- a/apps/website/src/data/learningTutorials.ts
+++ b/apps/website/src/data/learningTutorials.ts
@@ -1,4 +1,9 @@
-import type { LocalizedText, TranslationKey } from '../i18n/translations'
+import type {
+  Locale,
+  LocalizedText,
+  TranslationKey
+} from '../i18n/translations'
+import type { VideoTrack } from '../types/video'

 export interface LearningTutorial {
  id: string
@@ -8,6 +13,7 @@ export interface LearningTutorial {
  href?: string
  poster?: string
  posterTime?: number
+  tracks?: readonly VideoTrack[]
 }

 const DEFAULT_POSTER_TIME_SECONDS = 1
@@ -20,6 +26,18 @@ export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
    ? tutorial.poster
    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`

+const SUBTITLE_LABELS: Record<Locale, string> = {
+  en: 'English',
+  'zh-CN': '简体中文'
+}
+
+const subtitleTrack = (src: string, locale: Locale): VideoTrack => ({
+  src,
+  kind: 'subtitles',
+  srclang: locale,
+  label: SUBTITLE_LABELS[locale]
+})
+
 export const learningTutorials: readonly LearningTutorial[] = [
  {
    id: 'cleanplate_walkthrough_v03',
@@ -29,7 +47,13 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg',
    // href: '#',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_vtt.en.vtt',
+        'en'
+      )
+    ]
  },
  {
    id: 'deaging_workflow_v03',
@@ -39,7 +63,13 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg',
    href: 'https://cloud.comfy.org/?share=93f286fbc2c8',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/deaging_workflow_v03_vtt.en.vtt',
+        'en'
+      )
+    ]
  },
  {
    id: 'frame_adjustments_demo_v03',
@@ -49,7 +79,13 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg',
    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/frame_adjustments_demo_v03_vtt.en.vtt',
+        'en'
+      )
+    ]
  },
  {
    id: 'mattes_and_utilities_v03',
@@ -59,7 +95,13 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg',
    href: 'https://cloud.comfy.org/?share=be0889296f65',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/mattes_and_utilities_v03_vtt.en.vtt',
+        'en'
+      )
+    ]
  },
  {
    id: 'seedance_demo_comfyui_v03',
@@ -69,7 +111,13 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/seedance_demo_comfyui_v03_vtt.en.vtt',
+        'en'
+      )
+    ]
  },
  {
    id: 'skyreplacement_smaller_v06',
@@ -79,6 +127,12 @@ export const learningTutorials: readonly LearningTutorial[] = [
    poster:
      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg',
    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
-    tags: [partnerNodesTag, imageToVideoTag]
+    tags: [partnerNodesTag, imageToVideoTag],
+    tracks: [
+      subtitleTrack(
+        'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_vtt.en.vtt',
+        'en'
+      )
+    ]
  }
 ] as const
--- a/apps/website/src/types/video.ts
+++ b/apps/website/src/types/video.ts
@@ -0,0 +1,6 @@
+export interface VideoTrack {
+  src: string
+  kind: 'subtitles' | 'captions' | 'descriptions'
+  srclang: string
+  label: string
+}
--- a/browser_tests/assets/missing/missing_model_promoted_widget.json
+++ b/browser_tests/assets/missing/missing_model_promoted_widget.json
@@ -0,0 +1,115 @@
+{
+  "id": "test-missing-model-promoted-widget",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "subgraph-with-promoted-missing-model",
+      "pos": [450, 250],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-promoted-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Promoted Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "ckpt-name-input-id",
+            "name": "ckpt_name",
+            "type": "COMBO",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "ckpt_name",
+                "name": "ckpt_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "ckpt_name"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": null },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}
--- a/browser_tests/tests/load3d/load3dSerializeCache.spec.ts
+++ b/browser_tests/tests/load3d/load3dSerializeCache.spec.ts
@@ -0,0 +1,63 @@
+import { expect } from '@playwright/test'
+
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { load3dTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
+
+type Load3dImageInput = {
+  image: string
+  mask: string
+  normal: string
+  recording: string
+}
+
+type PromptBody = {
+  prompt?: Record<
+    string,
+    { class_type?: string; inputs?: Record<string, unknown> }
+  >
+}
+
+function getLoad3dImageInput(body: unknown, nodeId: string): Load3dImageInput {
+  const prompt = (body as PromptBody).prompt ?? {}
+  const node = prompt[nodeId]
+  expect(node?.class_type, `node ${nodeId} should be Load3D`).toBe('Load3D')
+  const input = node!.inputs!.image as Load3dImageInput
+  expect(typeof input.image).toBe('string')
+  expect(typeof input.recording).toBe('string')
+  return input
+}
+
+test.describe('Load3D serialize cache', () => {
+  test('starting a recording forces the next queue to re-capture (FE-905)', async ({
+    comfyPage,
+    load3d
+  }) => {
+    const exec = new ExecutionHelper(comfyPage)
+
+    let firstBody: unknown
+    await exec.run({
+      onPromptRequest: (body) => {
+        firstBody = body
+      }
+    })
+    const firstInput = getLoad3dImageInput(firstBody, '1')
+    expect(firstInput.recording).toBe('')
+
+    await load3d.recordingButton.click()
+    await expect(load3d.stopRecordingButton).toBeVisible()
+
+    let secondBody: unknown
+    await exec.run({
+      onPromptRequest: (body) => {
+        secondBody = body
+      }
+    })
+    const secondInput = getLoad3dImageInput(secondBody, '1')
+
+    expect(
+      secondInput.image,
+      'after starting a recording, the next queue must re-capture ' +
+        '(image filename must change) so the recording is not dropped'
+    ).not.toBe(firstInput.image)
+  })
+})
--- a/browser_tests/tests/propertiesPanel/errorsTab.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTab.spec.ts
@@ -41,7 +41,7 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
      await comfyPage.setup()
    })

-    test('Should filter execution errors by search query', async ({
+    test('Should keep execution errors matching the search query', async ({
      comfyPage
    }) => {
      await comfyPage.workflow.loadWorkflow('nodes/execution_error')
@@ -62,9 +62,9 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
      await expect(runtimePanel).toBeVisible()

      const searchInput = comfyPage.page.getByPlaceholder(/^Search/)
-      await searchInput.fill('nonexistent_query_xyz_12345')
+      await searchInput.fill('Execution failed')

-      await expect(runtimePanel).toHaveCount(0)
+      await expect(runtimePanel).toBeVisible()
    })
  })
 })
--- a/browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts
@@ -41,7 +41,7 @@ test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
    ).toBeVisible()
  })

-  test('Should show error message in runtime error panel', async ({
+  test('Should show runtime error log in the execution error group', async ({
    comfyPage
  }) => {
    await openExecutionErrorTab(comfyPage)
@@ -50,6 +50,6 @@ test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
      TestIds.dialogs.runtimeErrorPanel
    )
    await expect(runtimePanel).toBeVisible()
-    await expect(runtimePanel).toContainText(/\S/)
+    await expect(runtimePanel).toContainText('Error log')
  })
 })
--- a/browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts
@@ -369,6 +369,62 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
      await cleanupFakeModel(comfyPage)
    })

+    test(
+      'Resolving a promoted missing model widget through the legacy canvas path clears its error',
+      { tag: ['@canvas', '@widget', '@subgraph'] },
+      async ({ comfyPage }) => {
+        const resolvedModelName = 'v1-5-pruned-emaonly-fp16.safetensors'
+
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+        await loadWorkflowAndOpenErrorsTab(
+          comfyPage,
+          'missing/missing_model_promoted_widget'
+        )
+
+        const missingModelGroup = comfyPage.page.getByTestId(
+          TestIds.dialogs.missingModelsGroup
+        )
+        await expect(missingModelGroup).toContainText(
+          /fake_model\.safetensors\s*\(1\)/
+        )
+
+        await comfyPage.page.evaluate((value) => {
+          const hostNode = window.app!.graph!.getNodeById(2)
+          if (!hostNode?.isSubgraphNode()) {
+            throw new Error('Expected subgraph host node')
+          }
+
+          const interiorNode = hostNode.subgraph.getNodeById(1)
+          const widget = interiorNode?.widgets?.find(
+            (entry) => entry.name === 'ckpt_name'
+          )
+          type SettableWidget = typeof widget & {
+            setValue?: (
+              value: string,
+              options: {
+                e: PointerEvent
+                node: unknown
+                canvas: unknown
+              }
+            ) => void
+          }
+          const settableWidget = widget as SettableWidget | undefined
+
+          if (!settableWidget?.setValue) {
+            throw new Error('Expected concrete ckpt_name widget')
+          }
+
+          settableWidget.setValue(value, {
+            e: new PointerEvent('pointerup'),
+            node: hostNode,
+            canvas: window.app!.canvas
+          })
+        }, resolvedModelName)
+
+        await expect(missingModelGroup).toBeHidden()
+      }
+    )
+
    test('Bypassing a subgraph hides interior errors, un-bypassing restores them', async ({
      comfyPage
    }) => {
--- a/browser_tests/tests/textareaWidgetFontSize.spec.ts
+++ b/browser_tests/tests/textareaWidgetFontSize.spec.ts
@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe(
+  'Textarea widget font size',
+  { tag: ['@widget', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+    })
+
+    test('applies Comfy.TextareaWidget.FontSize to Vue Nodes 2.0 textarea widget', async ({
+      comfyPage
+    }) => {
+      const textarea = comfyPage.vueNodes.nodes.locator('textarea').first()
+      await expect(textarea).toBeVisible()
+
+      await comfyPage.settings.setSetting('Comfy.TextareaWidget.FontSize', 14)
+      await expect
+        .poll(() => textarea.evaluate((el) => getComputedStyle(el).fontSize))
+        .toBe('14px')
+
+      await comfyPage.settings.setSetting('Comfy.TextareaWidget.FontSize', 22)
+      await expect
+        .poll(() => textarea.evaluate((el) => getComputedStyle(el).fontSize))
+        .toBe('22px')
+    })
+  }
+)
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
@@ -180,4 +180,44 @@ test.describe('Vue Nodes Batch Image Preview', { tag: '@vue-nodes' }, () => {
      await expect.poll(() => countColumns(node.imageGrid)).toBeLessThan(10)
    }
  )
+
+  wstest(
+    'requests lightweight thumbnail URLs for grid cells',
+    async ({ comfyPage, getWebSocket }) => {
+      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
+
+      await test.step('Add node', async () => {
+        await comfyPage.menu.topbar.newWorkflowButton.click()
+        await comfyPage.nextFrame()
+
+        await comfyPage.searchBoxV2.addNode('Preview Image')
+        const previewImage = comfyPage.vueNodes.getNodeByTitle('Preview Image')
+        await expect(previewImage).toBeVisible()
+      })
+
+      const node = await comfyPage.vueNodes.getFixtureByTitle('Preview Image')
+      const gridImages = node.imageGrid.locator('img')
+
+      await test.step('Inject a multi-image grid', async () => {
+        const images = Array.from({ length: 4 }, (_, index) => ({
+          filename: `grid-${index}.png`,
+          subfolder: '',
+          type: 'output'
+        }))
+        execution.executed('', '1', { images })
+        await expect(gridImages).toHaveCount(4)
+      })
+
+      // FE-741: small on-node grid cells must request a server re-encoded
+      // thumbnail (`preview=webp;75`, `;` may be percent-encoded) instead of
+      // downloading the full-resolution image, while still pointing at the
+      // real `/api/view` URL for that output. Verifies the full path: WS
+      // output -> nodeOutputStore.buildImageUrls -> getGridThumbnailUrl ->
+      // rendered grid `<img>`.
+      for (const cell of await gridImages.all()) {
+        await expect(cell).toHaveAttribute('src', /[?&]preview=webp(%3B|;)75/)
+        await expect(cell).toHaveAttribute('src', /[?&]filename=grid-\d+\.png/)
+      }
+    }
+  )
 })
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -121,6 +121,7 @@
  --comfy-topbar-height: 2.5rem;
  --workflow-tabs-height: 2.375rem;
  --comfy-input-bg: #222;
+  --comfy-textarea-font-size: 10px;
  --input-text: #ddd;
  --descrip-text: #999;
  --drag-text: #ccc;
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts
@@ -2,20 +2,12 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'

-/**
- * ErrorNodeCard displays a single error card inside the error tab.
- * It shows the node header (ID badge, title, action buttons)
- * and the list of error items (message, traceback, copy button).
- */
 const meta: Meta<typeof ErrorNodeCard> = {
  title: 'RightSidePanel/Errors/ErrorNodeCard',
  component: ErrorNodeCard,
  parameters: {
    layout: 'centered'
  },
-  argTypes: {
-    showNodeIdBadge: { control: 'boolean' }
-  },
  decorators: [
    (story) => ({
      components: { story },
@@ -105,58 +97,36 @@ const promptOnlyCard: ErrorCardData = {
  ]
 }

-/** Single validation error with node ID badge visible */
-export const WithNodeIdBadge: Story = {
+export const SingleValidationError: Story = {
  args: {
-    card: singleErrorCard,
-    showNodeIdBadge: true
-  }
-}
-
-/** Single validation error without node ID badge */
-export const WithoutNodeIdBadge: Story = {
-  args: {
-    card: singleErrorCard,
-    showNodeIdBadge: false
+    card: singleErrorCard
  }
 }

 /** Subgraph node error — shows "Enter subgraph" button */
 export const WithEnterSubgraphButton: Story = {
  args: {
-    card: subgraphErrorCard,
-    showNodeIdBadge: true
-  }
-}
-
-/** Regular node error — no "Enter subgraph" button */
-export const WithoutEnterSubgraphButton: Story = {
-  args: {
-    card: singleErrorCard,
-    showNodeIdBadge: true
+    card: subgraphErrorCard
  }
 }

 /** Multiple validation errors on one node */
 export const MultipleErrors: Story = {
  args: {
-    card: multipleErrorsCard,
-    showNodeIdBadge: true
+    card: multipleErrorsCard
  }
 }

 /** Runtime execution error with full traceback */
 export const RuntimeError: Story = {
  args: {
-    card: runtimeErrorCard,
-    showNodeIdBadge: true
+    card: runtimeErrorCard
  }
 }

 /** Prompt-level error (no node header) */
 export const PromptError: Story = {
  args: {
-    card: promptOnlyCard,
-    showNodeIdBadge: false
+    card: promptOnlyCard
  }
 }
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.test.ts
@@ -71,6 +71,7 @@ describe('ErrorNodeCard.vue', () => {
        en: {
          g: {
            copy: 'Copy',
+            details: 'Details',
            findIssues: 'Find Issues',
            findOnGithub: 'Find on GitHub',
            getHelpAction: 'Get Help'
@@ -78,6 +79,7 @@ describe('ErrorNodeCard.vue', () => {
          rightSidePanel: {
            locateNode: 'Locate Node',
            enterSubgraph: 'Enter Subgraph',
+            errorLog: 'Error log',
            findOnGithubTooltip: 'Search GitHub issues for related problems',
            getHelpTooltip:
              'Report this error and we\u0027ll help you resolve it'
@@ -96,8 +98,9 @@ describe('ErrorNodeCard.vue', () => {
  ) {
    const user = userEvent.setup()
    const onCopyToClipboard = vi.fn()
+    const onLocateNode = vi.fn()
    render(ErrorNodeCard, {
-      props: { card, onCopyToClipboard },
+      props: { card, onCopyToClipboard, onLocateNode },
      global: {
        plugins: [
          PrimeVue,
@@ -131,14 +134,20 @@ describe('ErrorNodeCard.vue', () => {
          })
        ],
        stubs: {
+          TransitionCollapse: { template: '<div><slot /></div>' },
          Button: {
-            template:
-              '<button :aria-label="$attrs[\'aria-label\']"><slot /></button>'
+            template: '<button v-bind="$attrs"><slot /></button>'
          }
        }
      }
    })
-    return { user, onCopyToClipboard }
+    return { user, onCopyToClipboard, onLocateNode }
+  }
+
+  async function toggleRuntimeDetails(
+    user: ReturnType<typeof userEvent.setup>
+  ) {
+    await user.click(screen.getByRole('button', { name: /Details/ }))
  }

  let cardIdCounter = 0
@@ -160,40 +169,67 @@ describe('ErrorNodeCard.vue', () => {
    }
  }

-  function makeValidationErrorCard(): ErrorCardData {
+  function makePromptErrorCard(): ErrorCardData {
    return {
-      id: `node-${++cardIdCounter}`,
-      title: 'CLIPTextEncode',
-      nodeId: '6',
-      nodeTitle: 'CLIP Text Encode',
+      id: '__prompt__',
+      title: 'Prompt has no outputs',
      errors: [
        {
-          message: 'Required input is missing',
-          details: 'Input: text'
+          message: 'Server Error: No outputs',
+          details: 'Error details',
+          displayMessage:
+            'The workflow does not contain any output nodes to produce a result.'
        }
      ]
    }
  }

-  it('displays enriched report for runtime errors on mount', async () => {
+  it('shows runtime details by default and can collapse them', async () => {
    const reportText =
      '# ComfyUI Error Report\n## System Information\n- OS: Linux'
    mockGenerateErrorReport.mockReturnValue(reportText)

-    renderCard(makeRuntimeErrorCard())
+    const { user } = renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
-      expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
    })
+    expect(screen.queryByRole('listitem')).not.toBeInTheDocument()
+    expect(screen.getByText('Error log')).toBeInTheDocument()
+    const detailsButton = screen.getByRole('button', { name: /Details/ })
+    const detailsRegion = screen.getByRole('region', { name: 'Error log' })
+    expect(detailsButton).toHaveAttribute(
+      'aria-controls',
+      detailsRegion.getAttribute('id')
+    )
+    expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
    expect(screen.getByText(/System Information/)).toBeInTheDocument()
    expect(screen.getByText(/OS: Linux/)).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /Find on GitHub/ })
+    ).toBeInTheDocument()
+
+    await toggleRuntimeDetails(user)
+
+    expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /Find on GitHub/ })
+    ).not.toBeInTheDocument()
+  })
+
+  it('locates the node when the runtime node title is clicked', async () => {
+    const { user, onLocateNode } = renderCard(makeRuntimeErrorCard())
+
+    await user.click(screen.getByRole('button', { name: 'KSampler' }))
+
+    expect(onLocateNode).toHaveBeenCalledWith('10')
  })

  it('does not generate report for non-runtime errors', async () => {
-    renderCard(makeValidationErrorCard())
+    renderCard(makePromptErrorCard())

    await waitFor(() => {
-      expect(screen.getByText('Input: text')).toBeInTheDocument()
+      expect(screen.getByText('Error details')).toBeInTheDocument()
    })

    expect(mockGetLogs).not.toHaveBeenCalled()
@@ -201,15 +237,15 @@ describe('ErrorNodeCard.vue', () => {
  })

  it('displays original details for non-runtime errors', async () => {
-    renderCard(makeValidationErrorCard())
+    renderCard(makePromptErrorCard())

    await waitFor(() => {
-      expect(screen.getByText('Input: text')).toBeInTheDocument()
+      expect(screen.getByText('Error details')).toBeInTheDocument()
    })
    expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
  })

-  it('displays catalog-resolved copy when available', async () => {
+  it('hides grouped catalog copy and shows the item label as a list item', async () => {
    renderCard({
      id: `node-${++cardIdCounter}`,
      title: 'KSampler',
@@ -229,17 +265,17 @@ describe('ErrorNodeCard.vue', () => {
    })

    await waitFor(() => {
-      expect(screen.getByText('Missing connection')).toBeInTheDocument()
+      expect(screen.getByText('KSampler - model')).toBeInTheDocument()
    })
+    expect(screen.getByRole('listitem')).toHaveTextContent('KSampler - model')
+    expect(screen.queryByText('Missing connection')).not.toBeInTheDocument()
    expect(
-      screen.getByText('Required input slots have no connection feeding them.')
-    ).toBeInTheDocument()
+      screen.queryByText(
+        'Required input slots have no connection feeding them.'
+      )
+    ).not.toBeInTheDocument()
    expect(
-      screen.getByText('KSampler is missing a required input: model')
-    ).toBeInTheDocument()
-    expect(screen.queryByText('KSampler - model')).not.toBeInTheDocument()
-    expect(
-      screen.queryByText('Required input is missing')
+      screen.queryByText('KSampler is missing a required input: model')
    ).not.toBeInTheDocument()
  })

@@ -250,8 +286,9 @@ describe('ErrorNodeCard.vue', () => {
    const { user, onCopyToClipboard } = renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
-      expect(screen.getByText(/Full Report Content/)).toBeInTheDocument()
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
    })
+    expect(screen.getByText(/Full Report Content/)).toBeInTheDocument()

    await user.click(screen.getByRole('button', { name: /Copy/ }))

@@ -261,21 +298,6 @@ describe('ErrorNodeCard.vue', () => {
    )
  })

-  it('copies original details when copy button is clicked for validation error', async () => {
-    const { user, onCopyToClipboard } = renderCard(makeValidationErrorCard())
-
-    await waitFor(() => {
-      expect(screen.getByText('Input: text')).toBeInTheDocument()
-    })
-
-    await user.click(screen.getByRole('button', { name: /Copy/ }))
-
-    expect(onCopyToClipboard).toHaveBeenCalledTimes(1)
-    expect(onCopyToClipboard.mock.calls[0][0]).toBe(
-      'Required input is missing\n\nInput: text'
-    )
-  })
-
  it('generates report with fallback logs when getLogs fails', async () => {
    mockGetLogs.mockRejectedValue(new Error('Network error'))

@@ -300,8 +322,9 @@ describe('ErrorNodeCard.vue', () => {
    renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
-      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
    })
+    expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
  })

  it('opens GitHub issues search when Find Issue button is clicked', async () => {
@@ -310,9 +333,7 @@ describe('ErrorNodeCard.vue', () => {
    const { user } = renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
-      expect(
-        screen.getByRole('button', { name: /Find on GitHub/ })
-      ).toBeInTheDocument()
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
    })

    await user.click(screen.getByRole('button', { name: /Find on GitHub/ }))
@@ -335,9 +356,7 @@ describe('ErrorNodeCard.vue', () => {
    const { user } = renderCard(makeRuntimeErrorCard())

    await waitFor(() => {
-      expect(
-        screen.getByRole('button', { name: /Get Help/ })
-      ).toBeInTheDocument()
+      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
    })

    await user.click(screen.getByRole('button', { name: /Get Help/ }))
@@ -398,9 +417,7 @@ describe('ErrorNodeCard.vue', () => {
      }
    })

-    await waitFor(() => {
-      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
-    })
+    expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()

    expect(mockGenerateErrorReport).not.toHaveBeenCalled()
  })
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.vue
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
@@ -1,18 +1,19 @@
 <template>
  <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
-    <!-- Card Header -->
    <div
      v-if="card.nodeId && !compact"
      class="flex flex-wrap items-center gap-2 py-2"
    >
-      <span
-        v-if="showNodeIdBadge"
-        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+      <button
+        v-if="hasRuntimeError && (card.nodeTitle || card.title)"
+        type="button"
+        class="m-0 min-w-0 flex-1 cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-left text-sm font-medium text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
+        @click="handleLocateNode"
      >
-        #{{ card.nodeId }}
-      </span>
+        {{ card.nodeTitle || card.title }}
+      </button>
      <span
-        v-if="card.nodeTitle || card.title"
+        v-else-if="card.nodeTitle || card.title"
        class="flex-1 truncate text-sm font-medium text-muted-foreground"
      >
        {{ card.nodeTitle || card.title }}
@@ -27,6 +28,24 @@
        >
          {{ t('rightSidePanel.enterSubgraph') }}
        </Button>
+        <Button
+          v-if="hasRuntimeError"
+          variant="textonly"
+          size="icon-sm"
+          :class="
+            cn(
+              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground',
+              runtimeDetailsExpanded &&
+                'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
+            )
+          "
+          :aria-label="t('g.details')"
+          :aria-controls="runtimeDetailsControlIds || undefined"
+          :aria-expanded="runtimeDetailsExpanded"
+          @click.stop="toggleRuntimeDetails"
+        >
+          <i class="icon-[lucide--monitor-x] size-4" />
+        </Button>
        <Button
          variant="textonly"
          size="icon-sm"
@@ -39,120 +58,143 @@
      </div>
    </div>

-    <!-- Multiple Errors within one Card -->
    <div
      class="flex min-h-0 flex-1 flex-col space-y-4 divide-y divide-interface-stroke/20"
    >
-      <!-- Card Content -->
      <div
        v-for="(error, idx) in card.errors"
        :key="idx"
-        :class="
-          cn(
-            'flex min-h-0 flex-col gap-3',
-            fullHeight && error.isRuntimeError && 'flex-1'
-          )
-        "
+        class="flex min-h-0 flex-col gap-3"
      >
-        <!-- Human-friendly category/title when resolved by the error catalog. -->
        <p
-          v-if="error.displayTitle"
-          class="m-0 px-0.5 text-sm font-semibold text-destructive-background-hover"
-        >
-          {{ error.displayTitle }}
-        </p>
-
-        <!-- Error Message -->
-        <p
-          v-if="getDisplayMessage(error)"
+          v-if="getInlineMessage(error)"
          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
        >
-          {{ getDisplayMessage(error) }}
+          {{ getInlineMessage(error) }}
        </p>

-        <!-- Traceback / Details (enriched with full report for runtime errors) -->
+        <ul
+          v-if="getInlineItemLabel(error)"
+          class="m-0 list-disc space-y-1 pl-5 text-sm/relaxed text-muted-foreground marker:text-muted-foreground"
+        >
+          <li class="min-w-0 wrap-break-word">
+            <button
+              v-if="card.nodeId"
+              type="button"
+              class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
+              @click="handleLocateNode"
+            >
+              {{ getInlineItemLabel(error) }}
+            </button>
+            <span v-else>
+              {{ getInlineItemLabel(error) }}
+            </span>
+          </li>
+        </ul>
+
        <div
-          v-if="displayedDetailsMap[idx]"
+          v-if="!error.isRuntimeError && getInlineDetails(error, idx)"
          :class="
            cn(
-              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background-hover p-2.5',
-              error.isRuntimeError
-                ? fullHeight
-                  ? 'min-h-0 flex-1'
-                  : 'max-h-[15lh]'
-                : 'max-h-[6lh]'
+              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background p-2.5',
+              'max-h-[6lh]'
            )
          "
        >
          <p
            class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
          >
-            {{ displayedDetailsMap[idx] }}
+            {{ getInlineDetails(error, idx) }}
          </p>
        </div>

-        <div class="flex flex-col gap-2">
-          <div class="flex gap-2">
-            <Button
-              v-tooltip.top="t('rightSidePanel.findOnGithubTooltip')"
-              variant="secondary"
-              size="sm"
-              class="h-8 w-2/3 justify-center gap-1 rounded-lg text-xs"
-              data-testid="error-card-find-on-github"
-              @click="handleCheckGithub(error)"
-            >
-              {{ t('g.findOnGithub') }}
-              <i class="icon-[lucide--github] size-3.5" />
-            </Button>
-            <Button
-              variant="secondary"
-              size="sm"
-              class="h-8 w-1/3 justify-center gap-1 rounded-lg text-xs"
-              data-testid="error-card-copy"
-              @click="handleCopyError(idx)"
-            >
-              {{ t('g.copy') }}
-              <i class="icon-[lucide--copy] size-3.5" />
-            </Button>
-          </div>
-          <Button
-            v-tooltip.top="t('rightSidePanel.getHelpTooltip')"
-            variant="secondary"
-            size="sm"
-            class="h-8 w-full justify-center gap-1 rounded-lg text-xs"
-            @click="handleGetHelp"
+        <TransitionCollapse>
+          <div
+            v-if="error.isRuntimeError && isRuntimeDisclosureExpanded"
+            :id="getRuntimeDetailsId(idx)"
+            role="region"
+            data-testid="runtime-error-panel"
+            :aria-label="t('rightSidePanel.errorLog')"
+            class="flex min-h-0 flex-col gap-3"
          >
-            {{ t('g.getHelpAction') }}
-            <i class="icon-[lucide--external-link] size-3.5" />
-          </Button>
-        </div>
+            <div
+              v-if="getInlineDetails(error, idx)"
+              class="overflow-hidden rounded-lg border border-interface-stroke/30 bg-secondary-background"
+            >
+              <div
+                class="flex items-center justify-between gap-2 px-3 pt-3 pb-2"
+              >
+                <span
+                  class="text-xs font-semibold tracking-wide text-base-foreground uppercase"
+                >
+                  {{ t('rightSidePanel.errorLog') }}
+                </span>
+                <Button
+                  variant="textonly"
+                  size="icon-sm"
+                  class="size-7 shrink-0 text-muted-foreground hover:text-base-foreground"
+                  :aria-label="t('g.copy')"
+                  data-testid="error-card-copy"
+                  @click="handleCopyError(idx)"
+                >
+                  <i class="icon-[lucide--copy] size-4" />
+                </Button>
+              </div>
+              <div class="max-h-[15lh] overflow-y-auto px-3 pb-3">
+                <p
+                  class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+                >
+                  {{ getInlineDetails(error, idx) }}
+                </p>
+              </div>
+
+              <div class="mx-3 mt-1 h-px bg-base-foreground/20" />
+              <div class="mx-3 flex items-center justify-between gap-2 py-2">
+                <Button
+                  v-tooltip.top="t('rightSidePanel.getHelpTooltip')"
+                  variant="textonly"
+                  size="sm"
+                  class="h-8 justify-start gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
+                  @click="handleGetHelp"
+                >
+                  <i class="icon-[lucide--external-link] size-3.5" />
+                  {{ t('g.getHelpAction') }}
+                </Button>
+                <Button
+                  v-tooltip.top="t('rightSidePanel.findOnGithubTooltip')"
+                  variant="textonly"
+                  size="sm"
+                  class="h-8 justify-end gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
+                  data-testid="error-card-find-on-github"
+                  @click="handleCheckGithub(error)"
+                >
+                  <i class="icon-[lucide--github] size-3.5" />
+                  {{ t('g.findOnGithub') }}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </TransitionCollapse>
      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@comfyorg/tailwind-utils'
+import TransitionCollapse from '../layout/TransitionCollapse.vue'

 import type { ErrorCardData, ErrorItem } from './types'
 import { useErrorActions } from './useErrorActions'
 import { useErrorReport } from './useErrorReport'

-const {
-  card,
-  showNodeIdBadge = false,
-  compact = false,
-  fullHeight = false
-} = defineProps<{
+const { card, compact = false } = defineProps<{
  card: ErrorCardData
-  showNodeIdBadge?: boolean
-  /** Hide card header and error message (used in single-node selection mode) */
  compact?: boolean
-  /** Allow runtime error details to fill available height (used in dedicated panel) */
-  fullHeight?: boolean
 }>()

 const emit = defineEmits<{
@@ -164,6 +206,23 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const { displayedDetailsMap } = useErrorReport(() => card)
 const { findOnGitHub, contactSupport: handleGetHelp } = useErrorActions()
+const runtimeDetailsExpanded = ref(true)
+const hasRuntimeError = computed(() =>
+  card.errors.some((error) => error.isRuntimeError)
+)
+const isRuntimeDisclosureExpanded = computed(
+  () => compact || runtimeDetailsExpanded.value
+)
+const runtimeDetailsControlIds = computed(() =>
+  card.errors
+    .map((error, idx) => (error.isRuntimeError ? getRuntimeDetailsId(idx) : ''))
+    .filter(Boolean)
+    .join(' ')
+)
+
+function toggleRuntimeDetails() {
+  runtimeDetailsExpanded.value = !runtimeDetailsExpanded.value
+}

 function handleLocateNode() {
  if (card.nodeId) {
@@ -179,7 +238,7 @@ function handleEnterSubgraph() {

 function handleCopyError(idx: number) {
  const details = displayedDetailsMap.value[idx]
-  const message = getDisplayMessage(card.errors[idx])
+  const message = getCopyMessage(card.errors[idx])
  emit('copyToClipboard', [message, details].filter(Boolean).join('\n\n'))
 }

@@ -187,7 +246,26 @@ function handleCheckGithub(error: ErrorItem) {
  findOnGitHub(error.message)
 }

-function getDisplayMessage(error: ErrorItem | undefined) {
+function getCopyMessage(error: ErrorItem | undefined) {
  return error?.displayMessage ?? error?.message
 }
+
+function getInlineMessage(error: ErrorItem | undefined) {
+  if (!error || error.displayMessage) return undefined
+  return error.message
+}
+
+function getInlineItemLabel(error: ErrorItem | undefined) {
+  if (!error || error.isRuntimeError) return undefined
+  return error.displayItemLabel
+}
+
+function getInlineDetails(error: ErrorItem | undefined, idx: number) {
+  if (getInlineItemLabel(error)) return undefined
+  return displayedDetailsMap.value[idx]
+}
+
+function getRuntimeDetailsId(idx: number) {
+  return `${card.id}-runtime-details-${idx}`
+}
 </script>
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -1,15 +1,18 @@
 import { createTestingPinia } from '@pinia/testing'
-import { render, screen } from '@testing-library/vue'
+import { render, screen, within } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import TabErrors from './TabErrors.vue'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import type { MissingNodeType } from '@/types/comfy'

+const mockFocusNode = vi.hoisted(() => vi.fn())
+const mockEnterSubgraph = vi.hoisted(() => vi.fn())
+
 vi.mock('@/scripts/app', () => ({
  app: {
    rootGraph: {
@@ -38,6 +41,13 @@ vi.mock('@/services/litegraphService', () => ({
  }))
 }))

+vi.mock('@/composables/canvas/useFocusNode', () => ({
+  useFocusNode: vi.fn(() => ({
+    focusNode: mockFocusNode,
+    enterSubgraph: mockEnterSubgraph
+  }))
+}))
+
 vi.mock('@/platform/missingModel/missingModelDownload', () => ({
  downloadModel: vi.fn(),
  fetchModelMetadata: vi.fn().mockResolvedValue({
@@ -52,6 +62,7 @@ describe('TabErrors.vue', () => {
  let i18n: ReturnType<typeof createI18n>

  beforeEach(() => {
+    vi.clearAllMocks()
    i18n = createI18n({
      legacy: false,
      locale: 'en',
@@ -59,11 +70,22 @@ describe('TabErrors.vue', () => {
        en: {
          g: {
            workflow: 'Workflow',
-            copy: 'Copy'
+            copy: 'Copy',
+            details: 'Details',
+            findOnGithub: 'Find on GitHub',
+            getHelpAction: 'Get Help'
          },
          rightSidePanel: {
            noErrors: 'No errors',
            noneSearchDesc: 'No results found',
+            errorHelp: 'Error help',
+            errorLog: 'Error log',
+            findOnGithubTooltip: 'Search GitHub issues',
+            getHelpTooltip: 'Get help',
+            info: 'Info',
+            infoFor: 'Info for {item}',
+            locateNode: 'Locate node',
+            locateNodeFor: 'Locate {item}',
            missingModels: {
              missingModelsTitle: 'Missing Models',
              downloadAll: 'Download all',
@@ -144,29 +166,111 @@ describe('TabErrors.vue', () => {
    expect(screen.queryByText('Error details')).not.toBeInTheDocument()
  })

-  it('renders node validation errors grouped by class_type', async () => {
+  it('renders node validation errors grouped by catalog copy', async () => {
    const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
-    vi.mocked(getNodeByExecutionId).mockReturnValue({
-      title: 'CLIP Text Encode'
-    } as ReturnType<typeof getNodeByExecutionId>)
+    vi.mocked(getNodeByExecutionId).mockImplementation((_, nodeId) => {
+      const titles: Record<string, string> = {
+        '1': 'KSampler',
+        '2': 'CLIP Text Encode'
+      }
+      return {
+        title: titles[String(nodeId)] ?? ''
+      } as ReturnType<typeof getNodeByExecutionId>
+    })

-    renderComponent({
+    const { user } = renderComponent({
      executionError: {
        lastNodeErrors: {
-          '6': {
+          '2': {
            class_type: 'CLIPTextEncode',
            errors: [
-              { message: 'Required input is missing', details: 'Input: text' }
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: clip',
+                extra_info: {
+                  input_name: 'clip'
+                }
+              }
+            ]
+          },
+          '1': {
+            class_type: 'KSampler',
+            errors: [
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: positive',
+                extra_info: {
+                  input_name: 'positive'
+                }
+              },
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: model',
+                extra_info: {
+                  input_name: 'model'
+                }
+              }
            ]
          }
        }
      }
    })

-    expect(screen.getByText('CLIPTextEncode')).toBeInTheDocument()
-    expect(screen.getByText('#6')).toBeInTheDocument()
-    expect(screen.getByText('CLIP Text Encode')).toBeInTheDocument()
-    expect(screen.getByText('Required input is missing')).toBeInTheDocument()
+    expect(screen.getByText('Missing connection')).toBeInTheDocument()
+    expect(screen.getByText('(3)')).toBeInTheDocument()
+    expect(
+      screen.getAllByText(
+        'Required input slots have no connection feeding them.'
+      )
+    ).toHaveLength(1)
+    expect(screen.queryByText('#1')).not.toBeInTheDocument()
+    expect(screen.queryByText('#2')).not.toBeInTheDocument()
+    expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
+    expect(screen.queryByText('CLIP Text Encode')).not.toBeInTheDocument()
+
+    const itemRows = screen.getAllByRole('listitem')
+    expect(itemRows).toHaveLength(3)
+    expect(itemRows[0]).toHaveTextContent('KSampler - model')
+    expect(itemRows[1]).toHaveTextContent('KSampler - positive')
+    expect(itemRows[2]).toHaveTextContent('CLIP Text Encode - clip')
+
+    const infoButton = within(itemRows[1]).getByRole('button', {
+      name: 'Info for KSampler - positive'
+    })
+
+    await user.click(infoButton)
+
+    const itemDetail = screen.getByText(
+      'KSampler is missing a required input: positive'
+    )
+    expect(infoButton).toHaveAttribute(
+      'aria-controls',
+      itemDetail.getAttribute('id')
+    )
+
+    const labelLocateButton = within(itemRows[1]).getByRole('button', {
+      name: 'KSampler - positive'
+    })
+
+    await user.click(labelLocateButton)
+    expect(mockFocusNode.mock.calls.at(-1)?.[0]).toBe('1')
+
+    const iconLocateButton = within(itemRows[2]).getByRole('button', {
+      name: 'Locate CLIP Text Encode - clip'
+    })
+
+    await user.click(iconLocateButton)
+    expect(mockFocusNode.mock.calls.at(-1)?.[0]).toBe('2')
+
+    expect(
+      screen.queryByText('Required input is missing')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('Input: model')).not.toBeInTheDocument()
+    expect(screen.queryByText('Input: positive')).not.toBeInTheDocument()
+    expect(screen.queryByText('Input: clip')).not.toBeInTheDocument()
  })

  it('renders runtime execution errors from WebSocket', async () => {
@@ -175,7 +279,7 @@ describe('TabErrors.vue', () => {
      title: 'KSampler'
    } as ReturnType<typeof getNodeByExecutionId>)

-    renderComponent({
+    const { user } = renderComponent({
      executionError: {
        lastExecutionError: {
          prompt_id: 'abc',
@@ -190,12 +294,16 @@ describe('TabErrors.vue', () => {
    })

    expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
-    expect(screen.getByText('#10')).toBeInTheDocument()
    expect(screen.getByText('Execution failed')).toBeInTheDocument()
    expect(
      screen.getByText('Node threw an error during execution.')
    ).toBeInTheDocument()
+    expect(screen.getByText('Error log')).toBeInTheDocument()
    expect(screen.getByText(/Line 1/)).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Details' }))
+
+    expect(screen.queryByText(/Line 1/)).not.toBeInTheDocument()
  })

  it('filters errors based on search query', async () => {
@@ -230,7 +338,7 @@ describe('TabErrors.vue', () => {
    expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
  })

-  it('calls copyToClipboard when copy button is clicked', async () => {
+  it('calls copyToClipboard when a runtime error copy button is clicked', async () => {
    const { useCopyToClipboard } =
      await import('@/composables/useCopyToClipboard')
    const mockCopy = vi.fn()
@@ -238,21 +346,26 @@ describe('TabErrors.vue', () => {

    const { user } = renderComponent({
      executionError: {
-        lastNodeErrors: {
-          '1': {
-            class_type: 'TestNode',
-            errors: [{ message: 'Test message', details: 'Test details' }]
-          }
+        lastExecutionError: {
+          prompt_id: 'abc',
+          node_id: '1',
+          node_type: 'TestNode',
+          exception_message: 'Test message',
+          exception_type: 'RuntimeError',
+          traceback: ['Test details'],
+          timestamp: Date.now()
        }
      }
    })

    await user.click(screen.getByTestId('error-card-copy'))

-    expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
+    expect(mockCopy).toHaveBeenCalledWith(
+      'Node threw an error during execution.\n\nTest details'
+    )
  })

-  it('renders single runtime error outside accordion in full-height panel', async () => {
+  it('renders a single runtime error in the normal execution group', async () => {
    const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
    vi.mocked(getNodeByExecutionId).mockReturnValue({
      title: 'KSampler'
@@ -274,7 +387,11 @@ describe('TabErrors.vue', () => {

    expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
    expect(screen.getByText('Execution failed')).toBeInTheDocument()
-    expect(screen.getByTestId('runtime-error-panel')).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('error-group-execution')).getByTestId(
+        'runtime-error-panel'
+      )
+    ).toBeInTheDocument()
    expect(screen.getAllByText('Execution failed')).toHaveLength(1)
  })

--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -11,32 +11,7 @@
      />
    </div>

-    <!-- Runtime error: full-height panel outside accordion -->
-    <div
-      v-if="singleRuntimeErrorCard"
-      data-testid="runtime-error-panel"
-      aria-live="polite"
-      class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-3"
-    >
-      <div
-        class="shrink-0 pb-2 text-sm font-semibold text-destructive-background-hover"
-      >
-        {{ singleRuntimeErrorGroup?.displayTitle }}
-      </div>
-      <ErrorNodeCard
-        :key="singleRuntimeErrorCard.id"
-        :card="singleRuntimeErrorCard"
-        :show-node-id-badge="showNodeIdBadge"
-        full-height
-        class="min-h-0 flex-1"
-        @locate-node="handleLocateNode"
-        @enter-subgraph="handleEnterSubgraph"
-        @copy-to-clipboard="copyToClipboard"
-      />
-    </div>
-
-    <!-- Scrollable content (non-runtime or mixed errors) -->
-    <div v-else class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
+    <div class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
      <TransitionGroup tag="div" name="list-scale" class="relative">
        <div
          v-if="filteredGroups.length === 0"
@@ -70,10 +45,13 @@
                  {{ group.displayTitle }}
                </span>
                <span
-                  v-if="group.type === 'execution' && group.cards.length > 1"
+                  v-if="
+                    group.type === 'execution' &&
+                    getExecutionGroupCount(group) > 1
+                  "
                  class="text-destructive-background-hover"
                >
-                  ({{ group.cards.length }})
+                  ({{ getExecutionGroupCount(group) }})
                </span>
              </span>
              <Button
@@ -155,7 +133,7 @@
          </template>

          <div
-            v-if="group.type !== 'execution' && group.displayMessage"
+            v-if="group.displayMessage"
            data-testid="error-group-display-message"
            class="px-4 pt-1 pb-3"
          >
@@ -186,12 +164,79 @@
          />

          <!-- Execution Errors -->
-          <div v-if="group.type === 'execution'" class="space-y-3 px-4">
+          <div v-if="isExecutionItemListGroup(group)" class="px-4">
+            <ul class="m-0 list-none space-y-1 p-0">
+              <li
+                v-for="item in getExecutionItemList(group)"
+                :key="item.key"
+                class="min-w-0"
+              >
+                <div class="flex min-w-0 items-center gap-2">
+                  <span class="flex min-w-0 flex-1 items-center gap-1">
+                    <button
+                      v-tooltip.top="{
+                        value: item.displayDetails || undefined,
+                        showDelay: 300
+                      }"
+                      type="button"
+                      class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
+                      @click="handleLocateNode(item.nodeId)"
+                    >
+                      {{ item.label }}
+                    </button>
+                    <Button
+                      v-if="item.displayDetails"
+                      variant="textonly"
+                      size="icon-sm"
+                      :class="
+                        cn(
+                          'size-6 shrink-0 text-muted-foreground hover:text-base-foreground',
+                          isExecutionItemDetailExpanded(item.key) &&
+                            'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
+                        )
+                      "
+                      :aria-label="
+                        t('rightSidePanel.infoFor', { item: item.label })
+                      "
+                      :aria-controls="getExecutionItemDetailId(item.key)"
+                      :aria-expanded="isExecutionItemDetailExpanded(item.key)"
+                      @click.stop="toggleExecutionItemDetail(item.key)"
+                    >
+                      <i class="icon-[lucide--info] size-3.5" />
+                    </Button>
+                  </span>
+                  <Button
+                    variant="textonly"
+                    size="icon-sm"
+                    class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+                    :aria-label="
+                      t('rightSidePanel.locateNodeFor', { item: item.label })
+                    "
+                    @click.stop="handleLocateNode(item.nodeId)"
+                  >
+                    <i class="icon-[lucide--locate] size-4" />
+                  </Button>
+                </div>
+                <TransitionCollapse>
+                  <p
+                    v-if="
+                      item.displayDetails &&
+                      isExecutionItemDetailExpanded(item.key)
+                    "
+                    :id="getExecutionItemDetailId(item.key)"
+                    class="m-0 mt-0.5 pr-10 text-2xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+                  >
+                    {{ item.displayDetails }}
+                  </p>
+                </TransitionCollapse>
+              </li>
+            </ul>
+          </div>
+          <div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
            <ErrorNodeCard
              v-for="card in group.cards"
              :key="card.id"
              :card="card"
-              :show-node-id-badge="showNodeIdBadge"
              :compact="isSingleNodeSelected"
              @locate-node="handleLocateNode"
              @enter-subgraph="handleEnterSubgraph"
@@ -255,6 +300,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'

 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
@@ -266,6 +312,7 @@ import { NodeBadgeMode } from '@/types/nodeSource'

 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import CollapseToggleButton from '../layout/CollapseToggleButton.vue'
+import TransitionCollapse from '../layout/TransitionCollapse.vue'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
@@ -285,6 +332,13 @@ import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'

+interface ExecutionItemListEntry {
+  key: string
+  nodeId: string
+  label: string
+  displayDetails?: string
+}
+
 const ErrorPanelSurveyCta =
  isNightly && !isCloud && !isDesktop
    ? defineAsyncComponent(
@@ -307,6 +361,7 @@ const { isInstalling: isInstallingAll, installAllPacks: installAll } =
 const { replaceGroup, replaceAllGroups } = useNodeReplacement()

 const searchQuery = ref('')
+const expandedExecutionItemDetailKeys = ref(new Set<string>())
 const isSearching = computed(() => searchQuery.value.trim() !== '')

 const fullSizeGroupTypes = new Set([
@@ -325,6 +380,78 @@ const showNodeIdBadge = computed(
    NodeBadgeMode.None
 )

+function isExecutionItemListGroup(group: ErrorGroup) {
+  return (
+    group.type === 'execution' &&
+    group.cards.length > 0 &&
+    group.cards.every(
+      (card) =>
+        card.nodeId &&
+        card.errors.length > 0 &&
+        card.errors.every(
+          (error) => !error.isRuntimeError && Boolean(error.displayItemLabel)
+        )
+    )
+  )
+}
+
+function getExecutionItemList(group: ErrorGroup): ExecutionItemListEntry[] {
+  if (group.type !== 'execution') return []
+
+  const items: ExecutionItemListEntry[] = []
+  for (const card of group.cards) {
+    if (!card.nodeId) continue
+    for (let idx = 0; idx < card.errors.length; idx++) {
+      const error = card.errors[idx]
+      const label = error.displayItemLabel
+      if (!label) continue
+      items.push({
+        key: `${card.id}:${idx}`,
+        nodeId: card.nodeId,
+        label,
+        displayDetails: error.displayDetails
+      })
+    }
+  }
+  return items.sort(compareExecutionItemListEntry)
+}
+
+function compareExecutionItemListEntry(
+  a: ExecutionItemListEntry,
+  b: ExecutionItemListEntry
+) {
+  return (
+    a.nodeId.localeCompare(b.nodeId, undefined, { numeric: true }) ||
+    a.label.localeCompare(b.label)
+  )
+}
+
+function getExecutionGroupCount(group: ErrorGroup) {
+  if (group.type !== 'execution') return 0
+  if (isExecutionItemListGroup(group)) {
+    return group.cards.reduce((count, card) => count + card.errors.length, 0)
+  }
+  return group.cards.length
+}
+
+function isExecutionItemDetailExpanded(key: string) {
+  return expandedExecutionItemDetailKeys.value.has(key)
+}
+
+function toggleExecutionItemDetail(key: string) {
+  const nextKeys = new Set(expandedExecutionItemDetailKeys.value)
+  if (nextKeys.has(key)) {
+    nextKeys.delete(key)
+  } else {
+    nextKeys.add(key)
+  }
+  expandedExecutionItemDetailKeys.value = nextKeys
+}
+
+function getExecutionItemDetailId(key: string) {
+  return `execution-item-detail-${key}`
+}
+
 const {
  allErrorGroups,
  tabErrorGroups,
@@ -356,20 +483,6 @@ function handleMissingModelRefresh() {
  void missingModelStore.refreshMissingModels()
 }

-const singleRuntimeErrorGroup = computed(() => {
-  if (filteredGroups.value.length !== 1) return null
-  const group = filteredGroups.value[0]
-  const isSoleRuntimeError =
-    group.type === 'execution' &&
-    group.cards.length === 1 &&
-    group.cards[0].errors.every((e) => e.isRuntimeError)
-  return isSoleRuntimeError ? group : null
-})
-
-const singleRuntimeErrorCard = computed(
-  () => singleRuntimeErrorGroup.value?.cards[0] ?? null
-)
-
 const isAllCollapsed = computed({
  get() {
    return filteredGroups.value.every((g) => isSectionCollapsed(g.groupKey))
--- a/src/components/rightSidePanel/errors/useErrorGroups.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
@@ -23,6 +23,9 @@ vi.mock('@/utils/graphTraversalUtil', () => ({
 }))

 const mockIsCloud = vi.hoisted(() => ({ value: false }))
+const unknownValidationMessage = vi.hoisted(
+  () => 'A node returned a validation error ComfyUI does not recognize.'
+)
 vi.mock('@/platform/distribution/types', () => ({
  get isCloud() {
    return mockIsCloud.value
@@ -43,6 +46,18 @@ vi.mock('@/i18n', () => {
      'Required input missing',
    'errorCatalog.validationErrors.required_input_missing.toastMessage':
      '{nodeName} is missing a required input: {inputName}',
+    'errorCatalog.validationErrors.unknown_validation_error.title':
+      'Validation failed',
+    'errorCatalog.validationErrors.unknown_validation_error.message':
+      unknownValidationMessage,
+    'errorCatalog.validationErrors.unknown_validation_error.detailsWithRawDetails':
+      '{nodeName} returned an unrecognized validation error ({errorType}): {rawDetails}',
+    'errorCatalog.validationErrors.unknown_validation_error.itemLabel':
+      '{nodeName}',
+    'errorCatalog.validationErrors.unknown_validation_error.toastTitle':
+      'Validation failed',
+    'errorCatalog.validationErrors.unknown_validation_error.toastMessage':
+      '{nodeName} returned an unrecognized validation error.',
    'errorCatalog.promptErrors.prompt_no_outputs.title':
      'Prompt has no outputs',
    'errorCatalog.promptErrors.prompt_no_outputs.desc':
@@ -384,7 +399,7 @@ describe('useErrorGroups', () => {
      expect(swapIdx).toBeLessThan(missingIdx)
    })

-    it('includes execution error groups from node errors', async () => {
+    it('uses fallback catalog grouping for unknown node validation errors', async () => {
      const { store, groups } = createErrorGroups()
      store.lastNodeErrors = {
        '1': {
@@ -405,8 +420,8 @@ describe('useErrorGroups', () => {
        (g) => g.type === 'execution'
      )
      expect(execGroups.length).toBeGreaterThan(0)
-      expect(execGroups[0].groupKey).toBe('execution:KSampler')
-      expect(execGroups[0].displayTitle).toBe('KSampler')
+      expect(execGroups[0].groupKey).toBe('execution:unknown_validation_error')
+      expect(execGroups[0].displayTitle).toBe('Validation failed')
    })

    it('resolves required_input_missing item display copy', async () => {
@@ -455,6 +470,55 @@ describe('useErrorGroups', () => {
      )
    })

+    it('groups node validation errors by catalog id across node types', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'required_input_missing',
+              message: 'Required input is missing',
+              details: 'model',
+              extra_info: {
+                input_name: 'model'
+              }
+            }
+          ]
+        },
+        '2': {
+          class_type: 'CLIPLoader',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'required_input_missing',
+              message: 'Required input is missing',
+              details: 'clip',
+              extra_info: {
+                input_name: 'clip'
+              }
+            }
+          ]
+        }
+      }
+      await nextTick()
+
+      const execGroups = groups.allErrorGroups.value.filter(
+        (g) => g.type === 'execution'
+      )
+      expect(execGroups).toHaveLength(1)
+
+      const [group] = execGroups
+      expect(group.groupKey).toBe('execution:missing_connection')
+      expect(group.displayTitle).toBe('Missing connection')
+      expect(group.cards.map((card) => card.title)).toEqual([
+        'KSampler',
+        'CLIPLoader'
+      ])
+      expect(group.cards.flatMap((card) => card.errors)).toHaveLength(2)
+    })
+
    it('uses general execution_failed display fields for unrecognized runtime execution errors', async () => {
      mockIsCloud.value = true
      const { store, groups } = createErrorGroups()
@@ -716,7 +780,7 @@ describe('useErrorGroups', () => {
      expect(groups.groupedErrorMessages.value).toEqual([])
    })

-    it('collects unique error messages from node errors', async () => {
+    it('collects unique display messages from node errors', async () => {
      const { store, groups } = createErrorGroups()
      store.lastNodeErrors = {
        '1': {
@@ -736,10 +800,7 @@ describe('useErrorGroups', () => {
      await nextTick()

      const messages = groups.groupedErrorMessages.value
-      expect(messages).toContain('Error A')
-      expect(messages).toContain('Error B')
-      // Deduplication: Error A appears twice but should only be listed once
-      expect(messages.filter((m) => m === 'Error A')).toHaveLength(1)
+      expect(messages).toEqual([unknownValidationMessage])
    })

    it('includes missing node group display message', async () => {
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -30,6 +30,7 @@ import type {
  MissingModelCandidate,
  MissingModelGroup
 } from '@/platform/missingModel/types'
+import type { ResolvedCatalogErrorMessage } from '@/platform/errorCatalog/types'
 import type { MissingMediaGroup } from '@/platform/missingMedia/types'
 import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
 import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
@@ -43,7 +44,6 @@ import {
 } from '@/types/nodeIdentification'

 const PROMPT_CARD_ID = '__prompt__'
-const SINGLE_GROUP_KEY = '__single__'

 /** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
 const RESOLVING = '__RESOLVING__'
@@ -66,6 +66,7 @@ export interface SwapNodeGroup {
 interface GroupEntry {
  type: 'execution'
  displayTitle: string
+  displayMessage?: string
  priority: number
  cards: Map<string, ErrorCardData>
 }
@@ -75,10 +76,14 @@ interface ErrorSearchItem {
  cardIndex: number
  searchableNodeId: string
  searchableNodeTitle: string
+  searchableRawMessage: string
+  searchableRawDetails: string
  searchableMessage: string
  searchableDetails: string
 }

+type CataloguedErrorItem = ErrorItem & ResolvedCatalogErrorMessage
+
 /**
 * Resolve display info for a node by its execution ID.
 * For group node internals, resolves the parent group node's title instead.
@@ -106,17 +111,21 @@ function getOrCreateGroup(
  groupsMap: Map<string, GroupEntry>,
  groupKey: string,
  displayTitle = groupKey,
-  priority = 1
+  priority = 1,
+  displayMessage?: string
 ): Map<string, ErrorCardData> {
  let entry = groupsMap.get(groupKey)
  if (!entry) {
    entry = {
      type: 'execution',
      displayTitle,
+      displayMessage,
      priority,
      cards: new Map()
    }
    groupsMap.set(groupKey, entry)
+  } else if (!entry.displayMessage && displayMessage) {
+    entry.displayMessage = displayMessage
  }
  return entry.cards
 }
@@ -138,44 +147,6 @@ function createErrorCard(
  }
 }

-/**
- * In single-node mode, regroup cards by error message instead of class_type.
- * This lets the user see "what kinds of errors this node has" at a glance.
- */
-function regroupByErrorMessage(
-  groupsMap: Map<string, GroupEntry>
-): Map<string, GroupEntry> {
-  const allCards = Array.from(groupsMap.values()).flatMap((g) =>
-    Array.from(g.cards.values())
-  )
-
-  const cardErrorPairs = allCards.flatMap((card) =>
-    card.errors.map((error) => ({ card, error }))
-  )
-
-  const messageMap = new Map<string, GroupEntry>()
-  for (const { card, error } of cardErrorPairs) {
-    addCardErrorToGroup(messageMap, card, error)
-  }
-
-  return messageMap
-}
-
-function addCardErrorToGroup(
-  messageMap: Map<string, GroupEntry>,
-  card: ErrorCardData,
-  error: ErrorItem
-) {
-  const displayTitle =
-    error.displayTitle ?? error.displayMessage ?? error.message
-  const groupKey = error.catalogId ?? displayTitle
-  const group = getOrCreateGroup(messageMap, groupKey, displayTitle, 1)
-  if (!group.has(card.id)) {
-    group.set(card.id, { ...card, errors: [] })
-  }
-  group.get(card.id)?.errors.push(error)
-}
-
 function compareNodeId(a: ErrorCardData, b: ErrorCardData): number {
  return compareExecutionId(a.nodeId, b.nodeId)
 }
@@ -186,6 +157,7 @@ function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
      type: 'execution' as const,
      groupKey: `execution:${rawGroupKey}`,
      displayTitle: groupData.displayTitle,
+      displayMessage: groupData.displayMessage,
      cards: Array.from(groupData.cards.values()).sort(compareNodeId),
      priority: groupData.priority
    }))
@@ -209,6 +181,8 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
        cardIndex: ci,
        searchableNodeId: card.nodeId ?? '',
        searchableNodeTitle: card.nodeTitle ?? '',
+        searchableRawMessage: card.errors.map((e) => e.message).join(' '),
+        searchableRawDetails: card.errors.map((e) => e.details).join(' '),
        searchableMessage: card.errors
          .map((e) =>
            [e.displayTitle, e.displayMessage, e.message]
@@ -225,9 +199,11 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {

  const fuseOptions: IFuseOptions<ErrorSearchItem> = {
    keys: [
-      { name: 'searchableNodeId', weight: 0.3 },
-      { name: 'searchableNodeTitle', weight: 0.3 },
-      { name: 'searchableMessage', weight: 0.3 },
+      { name: 'searchableRawMessage', weight: 0.3 },
+      { name: 'searchableNodeId', weight: 0.2 },
+      { name: 'searchableNodeTitle', weight: 0.2 },
+      { name: 'searchableMessage', weight: 0.2 },
+      { name: 'searchableRawDetails', weight: 0.1 },
      { name: 'searchableDetails', weight: 0.1 }
    ],
    threshold: 0.3
@@ -333,18 +309,23 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
    nodeId: string,
    classType: string,
    idPrefix: string,
-    errors: ErrorItem[],
+    error: CataloguedErrorItem,
    filterBySelection = false
  ) {
    if (filterBySelection && !isErrorInSelection(nodeId)) return
-    const groupKey = isSingleNodeSelected.value ? SINGLE_GROUP_KEY : classType
-    const cards = getOrCreateGroup(groupsMap, groupKey, classType, 1)
+    const cards = getOrCreateGroup(
+      groupsMap,
+      error.catalogId,
+      error.displayTitle ?? classType,
+      1,
+      error.displayMessage
+    )
    if (!cards.has(nodeId)) {
      cards.set(nodeId, createErrorCard(nodeId, classType, idPrefix))
    }
    const card = cards.get(nodeId)
    if (!card) return
-    card.errors.push(...errors)
+    card.errors.push(error)
  }

  function processPromptError(
@@ -368,7 +349,8 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
      groupsMap,
      `prompt:${error.type}`,
      groupDisplayTitle,
-      0
+      0,
+      resolvedDisplay.displayMessage
    )

    // Prompt errors are not tied to a node, so they bypass addNodeErrorToGroup.
@@ -395,13 +377,13 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
    )) {
      const nodeDisplayName =
        resolveNodeInfo(nodeId).title || nodeError.class_type
-      addNodeErrorToGroup(
-        groupsMap,
-        nodeId,
-        nodeError.class_type,
-        'node',
-        nodeError.errors.map((e) => {
-          return {
+      for (const e of nodeError.errors) {
+        addNodeErrorToGroup(
+          groupsMap,
+          nodeId,
+          nodeError.class_type,
+          'node',
+          {
            message: e.message,
            details: e.details ?? undefined,
            ...resolveRunErrorMessage({
@@ -409,10 +391,10 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
              error: e,
              nodeDisplayName
            })
-          }
-        }),
-        filterBySelection
-      )
+          },
+          filterBySelection
+        )
+      }
    }
  }

@@ -428,20 +410,18 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
      String(e.node_id),
      e.node_type,
      'exec',
-      [
-        {
-          message: `${e.exception_type}: ${e.exception_message}`,
-          details: e.traceback.join('\n'),
-          isRuntimeError: true,
-          exceptionType: e.exception_type,
-          ...resolveRunErrorMessage({
-            kind: 'execution',
-            error: e,
-            nodeDisplayName:
-              resolveNodeInfo(String(e.node_id)).title || e.node_type
-          })
-        }
-      ],
+      {
+        message: `${e.exception_type}: ${e.exception_message}`,
+        details: e.traceback.join('\n'),
+        isRuntimeError: true,
+        exceptionType: e.exception_type,
+        ...resolveRunErrorMessage({
+          kind: 'execution',
+          error: e,
+          nodeDisplayName:
+            resolveNodeInfo(String(e.node_id)).title || e.node_type
+        })
+      },
      filterBySelection
    )
  }
@@ -867,10 +847,6 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
    processNodeErrors(groupsMap, true)
    processExecutionError(groupsMap, true)

-    const executionGroups = isSingleNodeSelected.value
-      ? toSortedGroups(regroupByErrorMessage(groupsMap))
-      : toSortedGroups(groupsMap)
-
    const filterByNode = selectedNodeInfo.value.nodeIds !== null

    // Missing nodes are intentionally unfiltered — they represent
@@ -883,7 +859,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
      ...(filterByNode
        ? buildMissingMediaGroupsFiltered()
        : buildMissingMediaGroups()),
-      ...executionGroups
+      ...toSortedGroups(groupsMap)
    ]
  })

--- a/src/composables/graph/useErrorClearingHooks.test.ts
+++ b/src/composables/graph/useErrorClearingHooks.test.ts
@@ -5,6 +5,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'

 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  CanvasPointer,
+  CanvasPointerEvent,
+  LGraphCanvas
+} from '@/lib/litegraph/src/litegraph'
 import {
  createTestSubgraph,
  createTestSubgraphNode
@@ -285,14 +290,7 @@ describe('Widget change error clearing via onWidgetChanged', () => {
    )
    expect(promotedWidget).toBeDefined()

-    // PromotedWidgetView.name returns displayName ("ckpt_input"), which is
-    // passed as errorInputName to clearSimpleNodeErrors. Seed the error
-    // with that name so the slot-name filter matches.
-    seedRequiredInputMissingNodeError(
-      store,
-      interiorExecId,
-      promotedWidget!.name
-    )
+    seedRequiredInputMissingNodeError(store, interiorExecId, 'ckpt_name')

    subgraphNode.onWidgetChanged!.call(
      subgraphNode,
@@ -304,6 +302,227 @@ describe('Widget change error clearing via onWidgetChanged', () => {

    expect(store.lastNodeErrors).toBeNull()
  })
+
+  it('clears range errors for promoted widgets by interior widget name', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'steps_input', type: 'INT' }]
+    })
+    const interiorNode = new LGraphNode('KSampler')
+    const interiorInput = interiorNode.addInput('steps_input', 'INT')
+    interiorNode.addWidget('number', 'steps', 150, () => undefined, {
+      min: 1,
+      max: 100
+    })
+    interiorInput.widget = { name: 'steps' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    store.lastNodeErrors = {
+      [interiorExecId]: {
+        errors: [
+          {
+            type: 'value_bigger_than_max',
+            message: 'Too big',
+            details: '',
+            extra_info: { input_name: 'steps' }
+          }
+        ],
+        dependent_outputs: [],
+        class_type: 'KSampler'
+      }
+    }
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (w) => 'sourceWidgetName' in w && w.sourceWidgetName === 'steps'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'steps',
+      50,
+      150,
+      promotedWidget!
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+  })
+
+  it('clears missing model state when a promoted widget changes through the legacy canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [{ name: 'ckpt_input', type: '*' }]
+    })
+    const interiorNode = new LGraphNode('CheckpointLoaderSimple')
+    interiorNode.type = 'CheckpointLoaderSimple'
+    const interiorInput = interiorNode.addInput('ckpt_input', '*')
+    interiorNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    interiorInput.widget = { name: 'ckpt_name' }
+    subgraph.add(interiorNode)
+    subgraph.inputNode.slots[0].connect(interiorInput, interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, {
+      id: 65,
+      pos: [0, 0],
+      size: [200, 100]
+    })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const missingModelStore = useMissingModelStore()
+    const interiorExecId = `${subgraphNode.id}:${interiorNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: interiorExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    const promotedWidget = subgraphNode.widgets?.find(
+      (widget) =>
+        'sourceWidgetName' in widget && widget.sourceWidgetName === 'ckpt_name'
+    )
+    expect(promotedWidget).toBeDefined()
+
+    const clickEvent = fromAny<CanvasPointerEvent, unknown>({
+      canvasX: 190,
+      canvasY: 20,
+      deltaX: 0
+    })
+    const pointer = fromAny<CanvasPointer, unknown>({
+      eDown: clickEvent
+    })
+    const canvas = fromAny<LGraphCanvas, unknown>({
+      graph_mouse: [190, 20],
+      last_mouseclick: 0
+    })
+
+    const handled = promotedWidget!.onPointerDown?.(
+      pointer,
+      subgraphNode,
+      canvas
+    )
+    expect(handled).toBe(true)
+    expect(pointer.onClick).toBeDefined()
+
+    pointer.onClick?.(clickEvent)
+
+    expect(missingModelStore.missingModelCandidates).toBeNull()
+  })
+
+  it('keeps unchanged same-named promoted model targets on the canvas path', () => {
+    const subgraph = createTestSubgraph({
+      inputs: [
+        { name: 'first_ckpt', type: '*' },
+        { name: 'second_ckpt', type: '*' }
+      ]
+    })
+    const firstNode = new LGraphNode('CheckpointLoaderSimple')
+    firstNode.type = 'CheckpointLoaderSimple'
+    const firstInput = firstNode.addInput('first_ckpt', '*')
+    const firstWidget = firstNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    firstInput.widget = { name: 'ckpt_name' }
+    subgraph.add(firstNode)
+    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+
+    const secondNode = new LGraphNode('CheckpointLoaderSimple')
+    secondNode.type = 'CheckpointLoaderSimple'
+    const secondInput = secondNode.addInput('second_ckpt', '*')
+    secondNode.addWidget(
+      'combo',
+      'ckpt_name',
+      'missing.safetensors',
+      () => undefined,
+      { values: ['missing.safetensors', 'present.safetensors'] }
+    )
+    secondInput.widget = { name: 'ckpt_name' }
+    subgraph.add(secondNode)
+    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 65 })
+    subgraphNode._internalConfigureAfterSlots()
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    installErrorClearingHooks(graph)
+
+    const promotedWidgets =
+      subgraphNode.widgets?.filter(
+        (widget) =>
+          'sourceWidgetName' in widget &&
+          widget.sourceWidgetName === 'ckpt_name'
+      ) ?? []
+    expect(promotedWidgets).toHaveLength(2)
+
+    const missingModelStore = useMissingModelStore()
+    const firstExecId = `${subgraphNode.id}:${firstNode.id}`
+    const secondExecId = `${subgraphNode.id}:${secondNode.id}`
+    missingModelStore.setMissingModels([
+      {
+        nodeId: firstExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate,
+      {
+        nodeId: secondExecId,
+        nodeType: 'CheckpointLoaderSimple',
+        widgetName: 'ckpt_name',
+        isAssetSupported: false,
+        name: 'missing.safetensors',
+        isMissing: true
+      } satisfies MissingModelCandidate
+    ])
+
+    firstWidget.value = 'present.safetensors'
+    subgraphNode.onWidgetChanged!.call(
+      subgraphNode,
+      'ckpt_name',
+      'present.safetensors',
+      'missing.safetensors',
+      firstWidget
+    )
+
+    expect(missingModelStore.missingModelCandidates).toEqual([
+      expect.objectContaining({
+        nodeId: secondExecId,
+        widgetName: 'ckpt_name',
+        name: 'missing.safetensors'
+      })
+    ])
+  })
 })

 describe('installErrorClearingHooks lifecycle', () => {
--- a/src/composables/graph/useErrorClearingHooks.ts
+++ b/src/composables/graph/useErrorClearingHooks.ts
@@ -7,6 +7,7 @@
 */
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -45,22 +46,128 @@ import {
  isAncestorPathActive
 } from '@/utils/graphTraversalUtil'

-function resolvePromotedExecId(
-  rootGraph: LGraph,
-  node: LGraphNode,
+interface WidgetErrorClearingTarget {
+  executionId: string
+  validationInputName: string
+  assetWidgetName: string
+  currentValue: unknown
+  options?: { min?: number; max?: number }
+}
+
+function getWidgetRangeOptions(widget: IBaseWidget): {
+  min?: number
+  max?: number
+} {
+  return {
+    min: widget.options?.min,
+    max: widget.options?.max
+  }
+}
+
+function plainWidgetToErrorTarget(
  widget: IBaseWidget,
  hostExecId: string
-): string {
-  if (!isPromotedWidgetView(widget)) return hostExecId
+): WidgetErrorClearingTarget {
+  return {
+    executionId: hostExecId,
+    validationInputName: widget.name,
+    assetWidgetName: widget.name,
+    currentValue: widget.value,
+    options: getWidgetRangeOptions(widget)
+  }
+}
+
+function promotedWidgetToErrorTarget(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: PromotedWidgetView,
+  hostExecId: string
+): WidgetErrorClearingTarget {
  const result = resolveConcretePromotedWidget(
-    node,
+    hostNode,
    widget.sourceNodeId,
    widget.sourceWidgetName
  )
-  if (result.status === 'resolved' && result.resolved.node) {
-    return getExecutionIdByNode(rootGraph, result.resolved.node) ?? hostExecId
+  const execId =
+    result.status === 'resolved' && result.resolved.node
+      ? (getExecutionIdByNode(rootGraph, result.resolved.node) ?? hostExecId)
+      : hostExecId
+  const resolvedWidget =
+    result.status === 'resolved' ? result.resolved.widget : widget
+
+  return {
+    executionId: execId,
+    validationInputName: resolvedWidget.name,
+    assetWidgetName: widget.sourceWidgetName,
+    currentValue: resolvedWidget.value,
+    options: getWidgetRangeOptions(resolvedWidget)
+  }
+}
+
+function resolveCanvasPathPromotedWidgetTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (!hostNode.isSubgraphNode?.() || isPromotedWidgetView(widget)) return []
+
+  // Canvas-path events lose promoted identity, so the post-write value
+  // disambiguates same-named promoted widgets.
+  return (hostNode.widgets ?? [])
+    .filter(isPromotedWidgetView)
+    .filter((promotedWidget) => promotedWidget.sourceWidgetName === widget.name)
+    .map((promotedWidget) =>
+      promotedWidgetToErrorTarget(
+        rootGraph,
+        hostNode,
+        promotedWidget,
+        hostExecId
+      )
+    )
+    .filter((target) => Object.is(target.currentValue, newValue))
+}
+
+function resolveWidgetErrorTargets(
+  rootGraph: LGraph,
+  hostNode: LGraphNode,
+  widget: IBaseWidget,
+  hostExecId: string,
+  newValue: unknown
+): WidgetErrorClearingTarget[] {
+  if (isPromotedWidgetView(widget)) {
+    return [
+      promotedWidgetToErrorTarget(rootGraph, hostNode, widget, hostExecId)
+    ]
+  }
+
+  const canvasPathTargets = resolveCanvasPathPromotedWidgetTargets(
+    rootGraph,
+    hostNode,
+    widget,
+    hostExecId,
+    newValue
+  )
+  return canvasPathTargets.length
+    ? canvasPathTargets
+    : [plainWidgetToErrorTarget(widget, hostExecId)]
+}
+
+function clearWidgetErrorTargets(
+  targets: WidgetErrorClearingTarget[],
+  newValue: unknown
+): void {
+  const store = useExecutionErrorStore()
+  for (const target of targets) {
+    store.clearWidgetRelatedErrors(
+      target.executionId,
+      target.validationInputName,
+      target.assetWidgetName,
+      newValue,
+      target.options
+    )
  }
-  return hostExecId
 }

 const hookedNodes = new WeakSet<LGraphNode>()
@@ -103,23 +210,14 @@ function installNodeHooks(node: LGraphNode): void {
      const hostExecId = getExecutionIdByNode(app.rootGraph, node)
      if (!hostExecId) return

-      const execId = resolvePromotedExecId(
+      const targets = resolveWidgetErrorTargets(
        app.rootGraph,
        node,
        widget,
-        hostExecId
-      )
-      const widgetName = isPromotedWidgetView(widget)
-        ? widget.sourceWidgetName
-        : widget.name
-
-      useExecutionErrorStore().clearWidgetRelatedErrors(
-        execId,
-        widget.name,
-        widgetName,
-        newValue,
-        { min: widget.options?.min, max: widget.options?.max }
+        hostExecId,
+        newValue
      )
+      clearWidgetErrorTargets(targets, newValue)
    }
  )
 }
--- a/src/composables/useLoad3d.test.ts
+++ b/src/composables/useLoad3d.test.ts
@@ -3,7 +3,14 @@ import { nextTick, reactive, ref, shallowRef } from 'vue'
 import type { Pinia } from 'pinia'
 import { getActivePinia } from 'pinia'

-import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import {
+  getLoad3dOutputCache,
+  isLoad3dSceneDirty,
+  markLoad3dSceneDirty,
+  nodeToLoad3dMap,
+  setLoad3dOutputCache,
+  useLoad3d
+} from '@/composables/useLoad3d'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
@@ -186,6 +193,7 @@ describe('useLoad3d', () => {
      resetGizmoTransform: vi.fn(),
      applyGizmoTransform: vi.fn(),
      fitToViewer: vi.fn(),
+      centerCameraOnModel: vi.fn(),
      getGizmoTransform: vi.fn().mockReturnValue({
        position: { x: 0, y: 0, z: 0 },
        rotation: { x: 0, y: 0, z: 0 },
@@ -1742,4 +1750,184 @@ describe('useLoad3d', () => {
      expect(originalOnRemoved).toHaveBeenCalledTimes(1)
    })
  })
+
+  describe('scene dirty tracking', () => {
+    const fakeCache = {
+      image: 'threed/scene-1.png [temp]',
+      mask: 'threed/scene_mask-1.png [temp]',
+      normal: 'threed/scene_normal-1.png [temp]',
+      camera_info: null,
+      recording: '',
+      model_3d_info: []
+    }
+
+    it('treats an unseen node as dirty by default', () => {
+      const fresh = createMockLGraphNode({ properties: {} })
+      expect(isLoad3dSceneDirty(fresh)).toBe(true)
+    })
+
+    it('markLoad3dSceneDirty sets the node dirty', () => {
+      const fresh = createMockLGraphNode({ properties: {} })
+      setLoad3dOutputCache(fresh, fakeCache)
+      expect(isLoad3dSceneDirty(fresh)).toBe(false)
+
+      markLoad3dSceneDirty(fresh)
+      expect(isLoad3dSceneDirty(fresh)).toBe(true)
+    })
+
+    it('setLoad3dOutputCache stores the output and clears dirty', () => {
+      const fresh = createMockLGraphNode({ properties: {} })
+      setLoad3dOutputCache(fresh, fakeCache)
+
+      expect(getLoad3dOutputCache(fresh)).toBe(fakeCache)
+      expect(isLoad3dSceneDirty(fresh)).toBe(false)
+    })
+
+    it('two nodes keep independent dirty state', () => {
+      const a = createMockLGraphNode({ properties: {} })
+      const b = createMockLGraphNode({ properties: {} })
+
+      setLoad3dOutputCache(a, fakeCache)
+      expect(isLoad3dSceneDirty(a)).toBe(false)
+      expect(isLoad3dSceneDirty(b)).toBe(true)
+
+      markLoad3dSceneDirty(a)
+      expect(isLoad3dSceneDirty(a)).toBe(true)
+      expect(isLoad3dSceneDirty(b)).toBe(true)
+    })
+
+    it('markLoad3dSceneDirty on null is a no-op', () => {
+      expect(() => markLoad3dSceneDirty(null)).not.toThrow()
+    })
+
+    it('sceneConfig changes flip the node dirty', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
+
+      composable.sceneConfig.value.backgroundColor = '#ffffff'
+      await nextTick()
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('cameraChanged event marks the node dirty', async () => {
+      let cameraChangedHandler: ((state: unknown) => void) | undefined
+      vi.mocked(mockLoad3d.addEventListener!).mockImplementation(
+        (event: string, handler: unknown) => {
+          if (event === 'cameraChanged') {
+            cameraChangedHandler = handler as (state: unknown) => void
+          }
+        }
+      )
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
+
+      cameraChangedHandler!({ position: { x: 1, y: 2, z: 3 } })
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('handleStopRecording marks dirty when a recording was produced', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+
+      vi.mocked(mockLoad3d.getRecordingDuration!).mockReturnValue(5)
+      composable.handleStopRecording()
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('handleStopRecording leaves dirty alone when no recording was produced', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+
+      vi.mocked(mockLoad3d.getRecordingDuration!).mockReturnValue(0)
+      composable.handleStopRecording()
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
+    })
+
+    it('handleClearRecording marks dirty', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+      composable.handleClearRecording()
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('handleStartRecording marks dirty so an in-progress recording forces a re-capture', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
+
+      await composable.handleStartRecording()
+
+      expect(mockLoad3d.startRecording).toHaveBeenCalledTimes(1)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('handleCenterCameraOnModel marks dirty', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      setLoad3dOutputCache(mockNode, fakeCache)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
+
+      composable.handleCenterCameraOnModel()
+
+      expect(mockLoad3d.centerCameraOnModel).toHaveBeenCalledTimes(1)
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+
+    it('handleSeek marks dirty when the animation has a duration', async () => {
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+      await composable.initializeLoad3d(containerRef)
+      await nextTick()
+
+      const calls = vi.mocked(mockLoad3d.addEventListener!).mock.calls
+      const match = calls.find(([event]) => event === 'animationProgressChange')
+      const animationProgressHandler = match![1] as (d: {
+        progress: number
+        currentTime: number
+        duration: number
+      }) => void
+
+      animationProgressHandler({ progress: 0, currentTime: 0, duration: 10 })
+      setLoad3dOutputCache(mockNode, fakeCache)
+
+      composable.handleSeek(50)
+
+      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
+    })
+  })
 })
--- a/src/composables/useLoad3d.ts
+++ b/src/composables/useLoad3d.ts
@@ -22,6 +22,7 @@ import type {
  GizmoMode,
  LightConfig,
  MaterialMode,
+  Model3DInfo,
  ModelConfig,
  SceneConfig,
  UpDirection
@@ -38,6 +39,38 @@ import { useLoad3dService } from '@/services/load3dService'

 type Load3dReadyCallback = (load3d: Load3d) => void
 export const nodeToLoad3dMap = new Map<LGraphNode, Load3d>()
+
+export type Load3dCachedOutput = {
+  image: string
+  mask: string
+  normal: string
+  camera_info: CameraState | null
+  recording: string
+  model_3d_info: Model3DInfo
+}
+
+const load3dSceneDirty = new WeakMap<LGraphNode, boolean>()
+const load3dOutputCache = new WeakMap<LGraphNode, Load3dCachedOutput>()
+
+export const markLoad3dSceneDirty = (node: LGraphNode | null): void => {
+  if (!node) return
+  load3dSceneDirty.set(node, true)
+}
+
+export const isLoad3dSceneDirty = (node: LGraphNode): boolean =>
+  load3dSceneDirty.get(node) !== false
+
+export const getLoad3dOutputCache = (
+  node: LGraphNode
+): Load3dCachedOutput | undefined => load3dOutputCache.get(node)
+
+export const setLoad3dOutputCache = (
+  node: LGraphNode,
+  output: Load3dCachedOutput
+): void => {
+  load3dOutputCache.set(node, output)
+  load3dSceneDirty.set(node, false)
+}
 const pendingCallbacks = new Map<LGraphNode, Load3dReadyCallback[]>()
 const persistentReadyCallbacks = new Map<LGraphNode, Load3dReadyCallback[]>()

@@ -69,6 +102,11 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
  let load3d: Load3d | null = null
  let isFirstModelLoad = true

+  const markDirty = () => {
+    const rawNode = toRaw(nodeRef.value)
+    if (rawNode) markLoad3dSceneDirty(rawNode as LGraphNode)
+  }
+
  const debouncedHandleResize = useDebounceFn(() => {
    load3d?.handleResize()
  }, 150)
@@ -371,6 +409,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
    if (n) {
      n.properties['Light Config'] = lightConfig.value
    }
+    markDirty()
  }

  const waitForLoad3d = (callback: Load3dReadyCallback) => {
@@ -415,6 +454,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
      if (nodeRef.value) {
        nodeRef.value.properties['Scene Config'] = newValue
      }
+      markDirty()
    },
    { deep: true }
  )
@@ -455,6 +495,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
      if (nodeRef.value) {
        nodeRef.value.properties['Model Config'] = newValue
      }
+      markDirty()
    },
    { deep: true }
  )
@@ -488,6 +529,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
        load3d.toggleCamera(newValue.cameraType)
        load3d.setFOV(newValue.fov)
      }
+      markDirty()
    },
    { deep: true }
  )
@@ -547,18 +589,21 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
    if (load3d) {
      load3d.toggleAnimation(newValue)
    }
+    markDirty()
  })

  watch(selectedSpeed, (newValue) => {
    if (load3d && newValue) {
      load3d.setAnimationSpeed(newValue)
    }
+    markDirty()
  })

  watch(selectedAnimation, (newValue) => {
    if (load3d && newValue !== undefined) {
      load3d.updateSelectedAnimation(newValue)
    }
+    markDirty()
  })

  const handleMouseEnter = () => {
@@ -573,6 +618,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
    if (load3d) {
      await load3d.startRecording()
      isRecording.value = true
+      markDirty()
    }
  }

@@ -582,6 +628,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
      isRecording.value = false
      recordingDuration.value = load3d.getRecordingDuration()
      hasRecording.value = recordingDuration.value > 0
+      if (hasRecording.value) markDirty()
    }
  }

@@ -598,6 +645,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
      load3d.clearRecording()
      hasRecording.value = false
      recordingDuration.value = 0
+      markDirty()
    }
  }

@@ -605,6 +653,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
    if (load3d && animationDuration.value > 0) {
      const time = (progress / 100) * animationDuration.value
      load3d.setAnimationTime(time)
+      markDirty()
    }
  }

@@ -936,6 +985,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
            state: cameraState
          }
        }
+        markLoad3dSceneDirty(node)
      }
    },
    gizmoTransformChange: (data: GizmoConfig) => {
@@ -976,7 +1026,9 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
  }

  const handleCenterCameraOnModel = () => {
-    load3d?.centerCameraOnModel()
+    if (!load3d) return
+    load3d.centerCameraOnModel()
+    markDirty()
  }

  const handleResetGizmoTransform = () => {
--- a/src/extensions/core/load3d.test.ts
+++ b/src/extensions/core/load3d.test.ts
@@ -38,13 +38,27 @@ vi.mock('@/services/load3dService', () => ({
  })
 }))

-vi.mock('@/composables/useLoad3d', () => ({
-  useLoad3d: () => ({
-    waitForLoad3d: waitForLoad3dMock,
-    onLoad3dReady: onLoad3dReadyMock
-  }),
-  nodeToLoad3dMap
-}))
+vi.mock('@/composables/useLoad3d', () => {
+  const sceneDirty = new WeakMap<LGraphNode, boolean>()
+  const outputCache = new WeakMap<LGraphNode, unknown>()
+  return {
+    useLoad3d: () => ({
+      waitForLoad3d: waitForLoad3dMock,
+      onLoad3dReady: onLoad3dReadyMock
+    }),
+    nodeToLoad3dMap,
+    markLoad3dSceneDirty: (node: LGraphNode | null) => {
+      if (!node) return
+      sceneDirty.set(node, true)
+    },
+    isLoad3dSceneDirty: (node: LGraphNode) => sceneDirty.get(node) !== false,
+    getLoad3dOutputCache: (node: LGraphNode) => outputCache.get(node),
+    setLoad3dOutputCache: (node: LGraphNode, value: unknown) => {
+      outputCache.set(node, value)
+      sceneDirty.set(node, false)
+    }
+  }
+})

 vi.mock('@/extensions/core/load3d/Load3DConfiguration', () => ({
  default: class {
@@ -482,13 +496,16 @@ describe('Comfy.Load3D.nodeCreated', () => {

    await load3DExt.nodeCreated(node)

-    expect(configureMock).toHaveBeenCalledWith({
-      loadFolder: 'input',
-      modelWidget: widgets[0],
-      cameraState: undefined,
-      width: widgets[1],
-      height: widgets[2]
-    })
+    expect(configureMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadFolder: 'input',
+        modelWidget: widgets[0],
+        cameraState: undefined,
+        width: widgets[1],
+        height: widgets[2],
+        onSceneInvalidated: expect.any(Function)
+      })
+    )
  })

  it('attaches a serializeValue function to the scene widget', async () => {
@@ -1014,3 +1031,95 @@ describe('Comfy.Preview3DAdvanced.getNodeMenuItems', () => {
    ])
  })
 })
+
+describe('Comfy.Load3D scene widget serializeValue caching', () => {
+  beforeEach(setupBaseMocks)
+
+  function makeFullFakeLoad3d() {
+    return {
+      getCurrentCameraType: vi.fn(() => 'perspective'),
+      cameraManager: { perspectiveCamera: { fov: 35 } },
+      getCameraState: vi.fn(() => ({ position: { x: 0, y: 0, z: 0 } })),
+      stopRecording: vi.fn(),
+      captureScene: vi.fn(async () => ({
+        scene: 'scene-data',
+        mask: 'mask-data',
+        normal: 'normal-data'
+      })),
+      handleResize: vi.fn(),
+      getModelInfo: vi.fn(() => null),
+      getRecordingData: vi.fn(() => null)
+    }
+  }
+
+  async function setup() {
+    const { load3DExt } = await loadExtensionsFresh()
+    const useLoad3dModule = await import('@/composables/useLoad3d')
+    const utilsModule = await import('@/extensions/core/load3d/Load3dUtils')
+    const uploadTempImage = utilsModule.default.uploadTempImage as ReturnType<
+      typeof vi.fn
+    >
+    let counter = 0
+    uploadTempImage.mockImplementation(
+      async (_data: unknown, kind: string) => ({
+        name: `${kind}-${++counter}.png`
+      })
+    )
+
+    const widgets: FakeWidget[] = [
+      { name: 'model_file', value: 'm.glb' },
+      { name: 'width', value: 256 },
+      { name: 'height', value: 256 },
+      { name: 'image', value: '' }
+    ]
+    const node = makeLoad3DNode({ widgets, properties: {} })
+    useLoad3dModule.nodeToLoad3dMap.set(node, makeFullFakeLoad3d() as never)
+
+    await load3DExt.nodeCreated(node)
+    const serialize = widgets[3].serializeValue! as () => Promise<{
+      image: string
+    } | null>
+
+    return { node, serialize, uploadTempImage, useLoad3dModule }
+  }
+
+  it('reuses the cached output when the scene has not been dirtied', async () => {
+    const { node, serialize, uploadTempImage, useLoad3dModule } = await setup()
+
+    const first = await serialize()
+    expect(uploadTempImage).toHaveBeenCalledTimes(3)
+    expect(first?.image).toBe('threed/scene-1.png [temp]')
+    expect(useLoad3dModule.isLoad3dSceneDirty(node)).toBe(false)
+    expect(useLoad3dModule.getLoad3dOutputCache(node)).toBe(first)
+
+    const second = await serialize()
+    expect(uploadTempImage).toHaveBeenCalledTimes(3)
+    expect(second).toBe(first)
+  })
+
+  it('re-captures after the scene is marked dirty', async () => {
+    const { node, serialize, uploadTempImage, useLoad3dModule } = await setup()
+
+    await serialize()
+    expect(uploadTempImage).toHaveBeenCalledTimes(3)
+
+    useLoad3dModule.markLoad3dSceneDirty(node)
+
+    const refreshed = await serialize()
+    expect(uploadTempImage).toHaveBeenCalledTimes(6)
+    expect(refreshed?.image).toBe('threed/scene-4.png [temp]')
+  })
+
+  it('returns null when no load3d instance is registered for the node', async () => {
+    const { load3DExt } = await loadExtensionsFresh()
+    const widgets: FakeWidget[] = [
+      { name: 'model_file', value: 'm.glb' },
+      { name: 'width', value: 256 },
+      { name: 'height', value: 256 },
+      { name: 'image', value: '' }
+    ]
+    const node = makeLoad3DNode({ widgets })
+    await load3DExt.nodeCreated(node)
+    expect(await widgets[3].serializeValue!()).toBeNull()
+  })
+})
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -2,7 +2,15 @@ import { nextTick } from 'vue'

 import Load3D from '@/components/load3d/Load3D.vue'
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
-import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import {
+  type Load3dCachedOutput,
+  getLoad3dOutputCache,
+  isLoad3dSceneDirty,
+  markLoad3dSceneDirty,
+  nodeToLoad3dMap,
+  setLoad3dOutputCache,
+  useLoad3d
+} from '@/composables/useLoad3d'
 import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
 import type {
  CameraConfig,
@@ -96,6 +104,8 @@ async function handleModelUpload(files: FileList, node: LGraphNode) {

      modelWidget.value = uploadPath
    }
+
+    markLoad3dSceneDirty(node)
  } catch (error) {
    console.error('Model upload failed:', error)
    useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
@@ -113,6 +123,7 @@ async function handleResourcesUpload(files: FileList, node: LGraphNode) {
      : '3d'

    await Load3dUtils.uploadMultipleFiles(files, subfolder)
+    markLoad3dSceneDirty(node)
  } catch (error) {
    console.error('Extra resources upload failed:', error)
    useToastStore().addAlert(t('toastMessages.extraResourcesUploadFailed'))
@@ -319,6 +330,7 @@ useExtensionService().registerExtension({
            if (modelWidget) {
              modelWidget.value = LOAD3D_NONE_MODEL
            }
+            markLoad3dSceneDirty(node)
          })
        }

@@ -377,7 +389,8 @@ useExtensionService().registerExtension({
        modelWidget,
        cameraState,
        width,
-        height
+        height,
+        onSceneInvalidated: () => markLoad3dSceneDirty(node)
      })
    })

@@ -395,6 +408,11 @@ useExtensionService().registerExtension({
            return null
          }

+          if (!isLoad3dSceneDirty(node)) {
+            const cached = getLoad3dOutputCache(node)
+            if (cached) return cached
+          }
+
          const cameraConfig: CameraConfig = (node.properties[
            'Camera Config'
          ] as CameraConfig | undefined) || {
@@ -426,7 +444,7 @@ useExtensionService().registerExtension({
          const modelInfo = currentLoad3d.getModelInfo()
          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []

-          const returnVal = {
+          const returnVal: Load3dCachedOutput = {
            image: `threed/${data.name} [temp]`,
            mask: `threed/${dataMask.name} [temp]`,
            normal: `threed/${dataNormal.name} [temp]`,
@@ -443,9 +461,11 @@ useExtensionService().registerExtension({
            const [recording] = await Promise.all([
              Load3dUtils.uploadTempImage(recordingData, 'recording', 'mp4')
            ])
-            returnVal['recording'] = `threed/${recording.name} [temp]`
+            returnVal.recording = `threed/${recording.name} [temp]`
          }

+          setLoad3dOutputCache(node, returnVal)
+
          return returnVal
        }
      }
--- a/src/extensions/core/load3d/Load3DConfiguration.test.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.test.ts
@@ -682,3 +682,138 @@ describe('Load3DConfiguration "none" model handling', () => {
    })
  })
 })
+
+describe('Load3DConfiguration.onSceneInvalidated', () => {
+  function makeLoad3dMock(): Load3d {
+    return {
+      loadModel: vi.fn().mockResolvedValue(undefined),
+      clearModel: vi.fn(),
+      setUpDirection: vi.fn(),
+      setMaterialMode: vi.fn(),
+      setTargetSize: vi.fn(),
+      setCameraState: vi.fn(),
+      toggleGrid: vi.fn(),
+      setBackgroundColor: vi.fn(),
+      setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+      setBackgroundRenderMode: vi.fn(),
+      toggleCamera: vi.fn(),
+      setFOV: vi.fn(),
+      setLightIntensity: vi.fn(),
+      setHDRIIntensity: vi.fn(),
+      setHDRIAsBackground: vi.fn(),
+      setHDRIEnabled: vi.fn(),
+      emitModelReady: vi.fn()
+    } as unknown as Load3d
+  }
+
+  async function flush() {
+    await new Promise<void>((resolve) => setTimeout(resolve, 0))
+  }
+
+  beforeEach(() => {
+    vi.mocked(Load3dUtils.splitFilePath).mockReturnValue(['', 'model.glb'])
+    vi.mocked(Load3dUtils.getResourceURL).mockReturnValue('/view')
+  })
+
+  it('width.callback invokes onSceneInvalidated', async () => {
+    const onSceneInvalidated = vi.fn()
+    const width = { value: 1024 } as unknown as IBaseWidget
+    const height = { value: 1024 } as unknown as IBaseWidget
+    const config = new Load3DConfiguration(makeLoad3dMock())
+
+    config.configure({
+      modelWidget: { value: 'none' } as unknown as IBaseWidget,
+      loadFolder: 'input',
+      width,
+      height,
+      onSceneInvalidated
+    })
+    await flush()
+
+    width.callback!(2048)
+
+    expect(onSceneInvalidated).toHaveBeenCalledTimes(1)
+  })
+
+  it('height.callback invokes onSceneInvalidated', async () => {
+    const onSceneInvalidated = vi.fn()
+    const width = { value: 1024 } as unknown as IBaseWidget
+    const height = { value: 1024 } as unknown as IBaseWidget
+    const config = new Load3DConfiguration(makeLoad3dMock())
+
+    config.configure({
+      modelWidget: { value: 'none' } as unknown as IBaseWidget,
+      loadFolder: 'input',
+      width,
+      height,
+      onSceneInvalidated
+    })
+    await flush()
+
+    height.callback!(2048)
+
+    expect(onSceneInvalidated).toHaveBeenCalledTimes(1)
+  })
+
+  it('model_file widget callback invokes onSceneInvalidated after the model loads', async () => {
+    const onSceneInvalidated = vi.fn()
+    const modelWidget = { value: 'none' } as unknown as IBaseWidget
+    const config = new Load3DConfiguration(makeLoad3dMock())
+
+    config.configure({
+      modelWidget,
+      loadFolder: 'input',
+      onSceneInvalidated
+    })
+    await flush()
+
+    modelWidget.value = 'model.glb'
+    await flush()
+
+    expect(onSceneInvalidated).toHaveBeenCalled()
+  })
+
+  it('preserves any pre-existing model widget callback alongside the invalidation hook', async () => {
+    const onSceneInvalidated = vi.fn()
+    const original = vi.fn()
+    const modelWidget = {
+      value: 'none',
+      callback: original
+    } as unknown as IBaseWidget
+    const config = new Load3DConfiguration(makeLoad3dMock())
+
+    config.configure({
+      modelWidget,
+      loadFolder: 'input',
+      onSceneInvalidated
+    })
+    await flush()
+
+    modelWidget.value = 'model.glb'
+    await flush()
+
+    expect(original).toHaveBeenCalledWith('model.glb')
+    expect(onSceneInvalidated).toHaveBeenCalled()
+  })
+
+  it('callbacks remain safe when onSceneInvalidated is omitted', async () => {
+    const width = { value: 1024 } as unknown as IBaseWidget
+    const height = { value: 1024 } as unknown as IBaseWidget
+    const modelWidget = { value: 'none' } as unknown as IBaseWidget
+    const config = new Load3DConfiguration(makeLoad3dMock())
+
+    config.configure({
+      modelWidget,
+      loadFolder: 'input',
+      width,
+      height
+    })
+    await flush()
+
+    expect(() => width.callback!(2048)).not.toThrow()
+    expect(() => height.callback!(2048)).not.toThrow()
+    expect(() => {
+      modelWidget.value = 'model.glb'
+    }).not.toThrow()
+  })
+})
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -23,6 +23,14 @@ type Load3DConfigurationSettings = {
  height?: IBaseWidget
  bgImagePath?: string
  silentOnNotFound?: boolean
+  /**
+   * Called when a user-driven change to one of the wired widgets
+   * (model_file, width, height) makes the previously captured scene stale.
+   * Backend caching covers these inputs by themselves; this hook lets the
+   * caller invalidate any frontend-side capture cache so the next serialize
+   * re-renders at the new state.
+   */
+  onSceneInvalidated?: () => void
 }

 const ANNOTATED_FILENAME_PATTERN = / \[(input|output|temp)\]$/
@@ -63,22 +71,33 @@ class Load3DConfiguration {
      setting.modelWidget,
      setting.loadFolder,
      setting.cameraState,
-      setting.silentOnNotFound ?? false
+      setting.silentOnNotFound ?? false,
+      setting.onSceneInvalidated
+    )
+    this.setupTargetSize(
+      setting.width,
+      setting.height,
+      setting.onSceneInvalidated
    )
-    this.setupTargetSize(setting.width, setting.height)
    this.setupDefaultProperties(setting.bgImagePath)
  }

-  private setupTargetSize(width?: IBaseWidget, height?: IBaseWidget) {
+  private setupTargetSize(
+    width?: IBaseWidget,
+    height?: IBaseWidget,
+    onSceneInvalidated?: () => void
+  ) {
    if (width && height) {
      this.load3d.setTargetSize(width.value as number, height.value as number)

      width.callback = (value: number) => {
        this.load3d.setTargetSize(value, height.value as number)
+        onSceneInvalidated?.()
      }

      height.callback = (value: number) => {
        this.load3d.setTargetSize(width.value as number, value)
+        onSceneInvalidated?.()
      }
    }
  }
@@ -103,7 +122,8 @@ class Load3DConfiguration {
    modelWidget: IBaseWidget,
    loadFolder: string,
    cameraState?: CameraState,
-    silentOnNotFound: boolean = false
+    silentOnNotFound: boolean = false,
+    onSceneInvalidated?: () => void
  ) {
    const onModelWidgetUpdate = this.createModelUpdateHandler(
      loadFolder,
@@ -137,6 +157,8 @@ class Load3DConfiguration {
      if (originalCallback) {
        originalCallback(value)
      }
+
+      onSceneInvalidated?.()
    }
  }

--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -268,6 +268,7 @@
    "title": "Title",
    "edit": "Edit",
    "copy": "Copy",
+    "details": "Details",
    "copyJobId": "Copy Job ID",
    "copied": "Copied",
    "relativeTime": {
@@ -3554,6 +3555,7 @@
    "parameters": "Parameters",
    "nodes": "Nodes",
    "info": "Info",
+    "infoFor": "Info for {item}",
    "color": "Node color",
    "pinned": "Pinned",
    "bypass": "Bypass",
@@ -3573,6 +3575,7 @@
    "hideInput": "Hide input",
    "showInput": "Show input",
    "locateNode": "Locate node on canvas",
+    "locateNodeFor": "Locate {item}",
    "favorites": "FAVORITED INPUTS",
    "favoritesNone": "NO FAVORITED INPUTS",
    "favoritesNoneTooltip": "Star widgets to quickly access them without selecting nodes",
@@ -3606,6 +3609,7 @@
    "errors": "Errors",
    "noErrors": "No errors",
    "executionErrorOccurred": "An error occurred during execution. Check the Errors tab for details.",
+    "errorLog": "Error log",
    "findOnGithubTooltip": "Search GitHub issues for related problems",
    "getHelpTooltip": "Report this error and we'll help you resolve it",
    "enterSubgraph": "Enter subgraph",
@@ -3810,6 +3814,15 @@
        "toastTitle": "Invalid input",
        "toastMessage": "{nodeName} rejected the value for {inputName}."
      },
+      "unknown_validation_error": {
+        "title": "Validation failed",
+        "message": "A node returned a validation error ComfyUI does not recognize.",
+        "details": "{nodeName} returned an unrecognized validation error: {errorType}",
+        "detailsWithRawDetails": "{nodeName} returned an unrecognized validation error ({errorType}): {rawDetails}",
+        "itemLabel": "{nodeName}",
+        "toastTitle": "Validation failed",
+        "toastMessage": "{nodeName} returned an unrecognized validation error."
+      },
      "exception_during_inner_validation": {
        "title": "Validation failed",
        "message": "The workflow couldn't validate a connected node.",
--- a/src/platform/errorCatalog/catalogIds.ts
+++ b/src/platform/errorCatalog/catalogIds.ts
@@ -2,6 +2,7 @@
 // 1:1 to an API error type. Simple validation mappings stay with the validation
 // resolver.
 export const MISSING_CONNECTION_CATALOG_ID = 'missing_connection'
+export const UNKNOWN_VALIDATION_ERROR_CATALOG_ID = 'unknown_validation_error'
 export const EXECUTION_FAILED_CATALOG_ID = 'execution_failed'
 export const IMAGE_NOT_LOADED_CATALOG_ID = 'image_not_loaded'
 export const OUT_OF_MEMORY_CATALOG_ID = 'out_of_memory'
--- a/src/platform/errorCatalog/errorMessageResolver.test.ts
+++ b/src/platform/errorCatalog/errorMessageResolver.test.ts
@@ -144,6 +144,26 @@ describe('errorMessageResolver', () => {
    })
  })

+  it('resolves unknown validation errors to fallback catalog copy', () => {
+    expect(
+      resolveRunErrorMessage({
+        kind: 'node_validation',
+        error: nodeValidationError('value_not_valid', undefined, 'some detail'),
+        nodeDisplayName: 'KSampler'
+      })
+    ).toEqual({
+      catalogId: 'unknown_validation_error',
+      displayTitle: 'Validation failed',
+      displayMessage:
+        'A node returned a validation error ComfyUI does not recognize.',
+      displayDetails:
+        'KSampler returned an unrecognized validation error (value_not_valid): some detail',
+      displayItemLabel: 'KSampler',
+      toastTitle: 'Validation failed',
+      toastMessage: 'KSampler returned an unrecognized validation error.'
+    })
+  })
+
  it('falls back to raw API copy when catalog keys are missing in the active locale', () => {
    const originalLocale = i18n.global.locale.value
    const originalKoMessages = i18n.global.getLocaleMessage('ko')
--- a/src/platform/errorCatalog/errorMessageResolver.ts
+++ b/src/platform/errorCatalog/errorMessageResolver.ts
@@ -1,4 +1,8 @@
-import type { ResolvedErrorMessage, RunErrorMessageSource } from './types'
+import type {
+  ResolvedCatalogErrorMessage,
+  ResolvedErrorMessage,
+  RunErrorMessageSource
+} from './types'

 import { resolveExecutionErrorMessage } from './executionErrorResolver'
 import { resolveMissingErrorMessage } from './missingErrorResolver'
@@ -9,6 +13,15 @@ import { resolveNodeValidationErrorMessage } from './validationErrorResolver'
 // own the actual matching/copy rules so this file stays as the routing boundary.
 export { resolveMissingErrorMessage }

+export function resolveRunErrorMessage(
+  source: Extract<RunErrorMessageSource, { kind: 'node_validation' }>
+): ResolvedCatalogErrorMessage
+export function resolveRunErrorMessage(
+  source: Extract<RunErrorMessageSource, { kind: 'execution' }>
+): ResolvedCatalogErrorMessage
+export function resolveRunErrorMessage(
+  source: RunErrorMessageSource
+): ResolvedErrorMessage
 export function resolveRunErrorMessage(
  source: RunErrorMessageSource
 ): ResolvedErrorMessage {
--- a/src/platform/errorCatalog/executionErrorResolver.ts
+++ b/src/platform/errorCatalog/executionErrorResolver.ts
@@ -1,4 +1,7 @@
-import type { ResolvedErrorMessage, RunErrorMessageSource } from './types'
+import type {
+  ResolvedCatalogErrorMessage,
+  RunErrorMessageSource
+} from './types'

 import { EXECUTION_FAILED_CATALOG_ID } from './catalogIds'
 import type { ErrorResolveContext } from './catalogI18n'
@@ -11,7 +14,7 @@ type ExecutionErrorResolveContext = Pick<ErrorResolveContext, 'nodeDisplayName'>
 export function resolveExecutionErrorMessage(
  error: Extract<RunErrorMessageSource, { kind: 'execution' }>['error'],
  context: ExecutionErrorResolveContext
-): ResolvedErrorMessage {
+): ResolvedCatalogErrorMessage {
  const exceptionMessage = error.exception_message.trim()
  const match = resolveRuntimeCatalogMatch({
    exceptionType: error.exception_type,
--- a/src/platform/errorCatalog/runtimeErrorCopy.ts
+++ b/src/platform/errorCatalog/runtimeErrorCopy.ts
@@ -1,4 +1,4 @@
-import type { ResolvedErrorMessage } from './types'
+import type { ResolvedCatalogErrorMessage } from './types'

 import {
  normalizeNodeName,
@@ -19,7 +19,7 @@ export function resolveRuntimeCatalogCopy(
    params?: CatalogParams
    detailsFallback?: string
  } = {}
-): ResolvedErrorMessage {
+): ResolvedCatalogErrorMessage {
  const keyPrefix = `errorCatalog.runtimeErrors.${catalogId}`
  const nodeName = normalizeNodeName(context.nodeDisplayName)
  const params = { nodeName, ...options.params }
@@ -27,7 +27,7 @@ export function resolveRuntimeCatalogCopy(
    translateCatalogMessage(`${keyPrefix}.${suffix}`, fallback, params)

  const displayMessage = resolveMessage('message')
-  const result: ResolvedErrorMessage = {
+  const result: ResolvedCatalogErrorMessage = {
    catalogId,
    displayTitle: resolveMessage('title'),
    displayMessage
--- a/src/platform/errorCatalog/types.ts
+++ b/src/platform/errorCatalog/types.ts
@@ -25,6 +25,10 @@ export interface ResolvedErrorMessage {
  toastMessage?: string
 }

+export type ResolvedCatalogErrorMessage = ResolvedErrorMessage & {
+  catalogId: string
+}
+
 export type ResolvedMissingErrorMessage = ResolvedErrorMessage & {
  displayTitle: string
  displayMessage: string
--- a/src/platform/errorCatalog/validationErrorResolver.ts
+++ b/src/platform/errorCatalog/validationErrorResolver.ts
@@ -1,8 +1,9 @@
-import type { NodeValidationError, ResolvedErrorMessage } from './types'
+import type { NodeValidationError, ResolvedCatalogErrorMessage } from './types'

 import {
  IMAGE_NOT_LOADED_CATALOG_ID,
-  MISSING_CONNECTION_CATALOG_ID
+  MISSING_CONNECTION_CATALOG_ID,
+  UNKNOWN_VALIDATION_ERROR_CATALOG_ID
 } from './catalogIds'
 import {
  normalizeNodeName,
@@ -117,6 +118,11 @@ const IMAGE_NOT_LOADED_VALIDATION_RULE = {
  copyKeys: DEFAULT_COPY_KEYS
 } satisfies ValidationCatalogRule

+const UNKNOWN_VALIDATION_ERROR_RULE = {
+  catalogId: UNKNOWN_VALIDATION_ERROR_CATALOG_ID,
+  itemLabel: 'node'
+} satisfies ValidationCatalogRule
+
 function getInputName(error: NodeValidationError): string {
  const inputName = error.extra_info?.input_name
  return (
@@ -228,7 +234,7 @@ function getValueSpecificCopyKeys(
 }

 function getRawDetailsCopyKeys(error: NodeValidationError): CopyKeys {
-  return error.details.trim()
+  return error.details?.trim()
    ? {
        detailsKey: 'detailsWithRawDetails',
        toastMessageKey: 'toastMessageWithRawDetails'
@@ -237,7 +243,7 @@ function getRawDetailsCopyKeys(error: NodeValidationError): CopyKeys {
 }

 function getRawDetailsOnlyCopyKeys(error: NodeValidationError): CopyKeys {
-  if (!error.details.trim()) return DEFAULT_COPY_KEYS
+  if (!error.details?.trim()) return DEFAULT_COPY_KEYS

  return {
    detailsKey: 'detailsWithRawDetails',
@@ -272,16 +278,17 @@ function resolveValidationCatalogCopy(
  context: ErrorResolveContext,
  localeKey: string,
  rule: ValidationCatalogRule
-): ResolvedErrorMessage {
+): ResolvedCatalogErrorMessage {
  const nodeName = normalizeNodeName(context.nodeDisplayName)
  const inputName = getInputName(error)
-  const trimmedDetails = error.details.trim()
+  const trimmedDetails = error.details?.trim() ?? ''
  const rawDetails =
    error.type === 'dependency_cycle'
      ? formatDependencyCycleDetails(trimmedDetails)
      : trimmedDetails
  const params = {
    ...getValidationParams(error, nodeName, inputName),
+    errorType: error.type || 'unknown',
    rawDetails
  }
  const keyPrefix = `errorCatalog.validationErrors.${localeKey}`
@@ -306,7 +313,7 @@ function resolveValidationCatalogCopy(
    ),
    displayDetails: translateOptionalCatalogMessage(
      `${keyPrefix}.${copyKeys.detailsKey}`,
-      error.details,
+      error.details ?? '',
      params
    ),
    displayItemLabel: translateCatalogMessage(
@@ -330,7 +337,7 @@ function resolveValidationCatalogCopy(
 export function resolveNodeValidationErrorMessage(
  error: NodeValidationError,
  context: ErrorResolveContext
-): ResolvedErrorMessage {
+): ResolvedCatalogErrorMessage {
  if (isImageNotLoadedValidationError(error)) {
    return resolveValidationCatalogCopy(
      error,
@@ -341,7 +348,17 @@ export function resolveNodeValidationErrorMessage(
  }

  const rule = VALIDATION_ERROR_RULES[error.type]
-  if (!rule) return {}
+  if (!rule) {
+    return resolveValidationCatalogCopy(
+      error,
+      context,
+      'unknown_validation_error',
+      {
+        ...UNKNOWN_VALIDATION_ERROR_RULE,
+        copyKeys: getRawDetailsOnlyCopyKeys(error)
+      }
+    )
+  }

  return resolveValidationCatalogCopy(error, context, error.type, rule)
 }
--- a/src/platform/secrets/components/SecretFormDialog.vue
+++ b/src/platform/secrets/components/SecretFormDialog.vue
@@ -1,8 +1,9 @@
 <template>
  <Dialog v-model:open="visible">
    <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay v-reka-z-index />
      <DialogContent
+        v-reka-z-index
        size="md"
        :aria-labelledby="titleId"
        @pointer-down-outside.prevent
@@ -125,6 +126,7 @@ import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
 import DialogOverlay from '@/components/ui/dialog/DialogOverlay.vue'
 import DialogPortal from '@/components/ui/dialog/DialogPortal.vue'
 import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
+import { vRekaZIndex } from '@/components/dialog/vRekaZIndex'
 import Select from '@/components/ui/select/Select.vue'
 import SelectContent from '@/components/ui/select/SelectContent.vue'
 import SelectItem from '@/components/ui/select/SelectItem.vue'
--- a/src/platform/secrets/components/SecretFormDialog.zindex.test.ts
+++ b/src/platform/secrets/components/SecretFormDialog.zindex.test.ts
@@ -0,0 +1,77 @@
+import { ZIndex } from '@primeuix/utils/zindex'
+import { cleanup, render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SecretFormDialog from './SecretFormDialog.vue'
+
+vi.mock('../composables/useSecretForm', () => ({
+  useSecretForm: () => ({
+    form: { provider: '', name: '', secretValue: '' },
+    errors: {},
+    loading: false,
+    apiError: '',
+    providerOptions: [],
+    handleSubmit: vi.fn()
+  })
+}))
+
+vi.mock('primevue/inputtext', () => ({
+  default: { name: 'InputText', template: '<input />' }
+}))
+vi.mock('primevue/password', () => ({
+  default: { name: 'Password', template: '<input type="password" />' }
+}))
+
+vi.mock('@/components/ui/button/Button.vue', () => ({
+  default: { name: 'Button', template: '<button><slot /></button>' }
+}))
+vi.mock('@/components/ui/select/Select.vue', () => ({
+  default: { name: 'Select', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/select/SelectContent.vue', () => ({
+  default: { name: 'SelectContent', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/select/SelectItem.vue', () => ({
+  default: { name: 'SelectItem', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/select/SelectTrigger.vue', () => ({
+  default: { name: 'SelectTrigger', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/select/SelectValue.vue', () => ({
+  default: { name: 'SelectValue', template: '<span />' }
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} },
+  missingWarn: false,
+  fallbackWarn: false
+})
+
+describe('SecretFormDialog z-index stacking', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  let openModalZIndex: number
+
+  beforeEach(() => {
+    const openModal = document.createElement('div')
+    ZIndex.set('modal', openModal, 1700)
+    openModalZIndex = Number(openModal.style.zIndex)
+  })
+
+  it('renders above a modal that is already open', async () => {
+    render(SecretFormDialog, {
+      global: { plugins: [PrimeVue, i18n] },
+      props: { visible: true }
+    })
+
+    const content = await screen.findByRole('dialog')
+
+    expect(Number(content.style.zIndex)).toBeGreaterThan(openModalZIndex)
+  })
+})
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -22,7 +22,7 @@
      :class="
        cn(
          WidgetInputBaseClass,
-          'size-full resize-none text-xs',
+          'size-full resize-none text-(length:--comfy-textarea-font-size) leading-normal',
          !hideLayoutField && 'pt-5',
          // Avoid overflow-auto when idle to prevent per-textarea compositing layers.
          'overflow-hidden hover:overflow-auto focus:overflow-auto'
--- a/src/stores/executionErrorStore.ts
+++ b/src/stores/executionErrorStore.ts
@@ -152,8 +152,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
   * Clears both validation errors and missing model state for a widget.
   *
   * @param errorInputName Name matched against `error.extra_info.input_name`.
-   *   For promoted subgraph widgets this is the subgraph input slot name
-   *   (`widget.slotName`), which differs from the interior widget name.
+   *   For promoted subgraph widgets this is the resolved interior widget name.
   * @param widgetName The actual widget name, used for missing model lookup.
   *   At the legacy canvas call site both names are identical (`widget.name`).
   */
Author	SHA1	Message	Date
Michael B	451d594f23	feat(website): wire English subtitle tracks for learning tutorials	2026-06-08 12:55:41 -04:00
Michael B	9ffdcd17b6	fix: show featured workflow video before copy on mobile	2026-06-08 12:11:54 -04:00
jaeone94	74b9f16b62	Refine execution error presentation (#12683 ) ## Summary This is the first PR in a planned stack to modernize the Workflow Overview error tab. It focuses only on execution-style errors: validation errors, runtime errors, and known prompt errors. The intent is to establish the catalog-driven presentation model before touching the larger missing-resource cards. Validation and prompt errors are known product states, so this PR makes them read more like structured guidance instead of generic reportable failures. Runtime errors remain reportable, but their details are reorganized so the error log is easier to scan and copy. ## What changed - Groups validation errors by error catalog id instead of node class/type. - Adds an `unknown_validation_error` fallback catalog id so validation grouping can follow one rule without special-case missing catalog ids. - Shows validation group title and message once, then lists each affected input as a compact item row. - Adds per-item validation detail disclosure so detailed validation text is still available without repeating the group title/message for every item. - Keeps locate-node behavior available from validation rows, including keyboard/ARIA disclosure wiring. - Removes GitHub, copy, and help actions from validation/prompt errors because these are known, cataloged errors where the UI copy should guide the user directly. - Refines runtime error cards so the error log is visible by default, has its own header, and keeps copy/report actions inside the log area. - Removes the special full-panel singleton runtime layout so runtime errors keep the same fixed card rhythm as the other error groups. - Keeps runtime errors reportable via Get Help and Find on GitHub, because these can still represent unexpected execution failures. - Updates prompt error detail styling to match the darker runtime error-log treatment. - Restores display-message semantics for grouped execution messages: `displayMessage ?? message` is used for user-facing dedupe instead of raw backend-only messages. - Adds focused unit coverage for catalog grouping, fallback validation catalog ids, display-message grouping, runtime detail behavior, and the updated prompt/validation action model. ## Planned stack This PR intentionally keeps the first slice narrow. The broader redesign is planned as a sequence of follow-up PRs rather than one large change: 1. Execution errors, this PR: validation, runtime, and prompt error grouping/presentation. 2. Missing media: simplify image/video/audio missing-media cards around catalog item labels and locate actions. 3. Missing node and swap node: align missing-pack rows, nested node references, install/replace actions, and locate behavior. 4. Missing model: unify OSS and Cloud presentation, simplify download/import actions, and improve import/download progress behavior. The goal is to review and stabilize each slice before stacking the next one. This is especially important because later missing-model changes are much larger and should not obscure the catalog/error-card behavior introduced here. ## Review focus - Validation errors should now group by catalog id, not by node class. - Validation groups intentionally show one message per group, with individual affected inputs rendered as rows. - Prompt and validation errors intentionally no longer show report/copy/help actions. - Runtime errors intentionally still show report actions, but only inside the error-log panel. - Node id badges are intentionally not shown in these execution error rows; the follow-up missing-resource PRs will handle their own row treatments separately. - This PR does not change missing media, missing model, missing node pack, or swap node cards. ## Screenshots ### This PR Validation error <img width="457" height="362" alt="스크린샷 2026-06-07 오전 4 26 19" src="https://github.com/user-attachments/assets/4c35b9f3-57dd-4dae-b44a-6d2fd8547b7c" /> Runtime error <img width="454" height="545" alt="스크린샷 2026-06-07 오전 4 24 24" src="https://github.com/user-attachments/assets/b7d4482f-b35b-4ed2-90f2-0a62dafa3519" /> Prompt / Service error <img width="456" height="192" alt="스크린샷 2026-06-07 오전 4 27 58" src="https://github.com/user-attachments/assets/aeec0978-b47f-40c7-ab71-0a0d18ceb054" /> ### Old (main) Validation error <img width="457" height="853" alt="스크린샷 2026-06-07 오전 4 25 09" src="https://github.com/user-attachments/assets/185dd573-430d-4041-8b31-a8eb6346f1ff" /> Runtime error <img width="455" height="554" alt="스크린샷 2026-06-07 오전 4 24 58" src="https://github.com/user-attachments/assets/deb1c09d-ea58-4d6a-9ac6-d2a3a9832fbe" /> Prompt / Service error <img width="455" height="297" alt="스크린샷 2026-06-07 오전 4 28 14" src="https://github.com/user-attachments/assets/c68eef7c-6525-4a5b-858c-6482fe76ad27" /> ## Validation - `pnpm format:check` - `pnpm test:unit src/components/rightSidePanel/errors/TabErrors.test.ts src/components/rightSidePanel/errors/ErrorNodeCard.test.ts src/components/rightSidePanel/errors/useErrorGroups.test.ts src/platform/errorCatalog/errorMessageResolver.test.ts` - `pnpm typecheck` - `pnpm lint` - `pnpm knip` - `pnpm build`	2026-06-08 06:52:57 +00:00
jaeone94	dbeb9cc10d	fix: clear missing model on promoted widget change (#12677 ) ## Summary Fixes FE-942 by clearing missing model indicators when promoted subgraph widgets are changed through the legacy canvas path. ## Changes - What: Resolves promoted widget error-clearing targets in `useErrorClearingHooks`, including legacy canvas path events from interior widgets. - Dependencies: None. ## Review Focus - Promoted widget validation errors clear by resolved interior widget name, while missing model/media state clears by source widget name. - Same-named promoted widgets are value-gated so changing one promoted model widget does not clear unchanged sibling indicators. - Core promoted widget event emission remains unchanged; the fix is scoped to the error-clearing hook. ## Validation - `pnpm test:unit src/composables/graph/useErrorClearingHooks.test.ts` - `pnpm test:unit src/core/graph/subgraph/promotedWidgetView.test.ts src/lib/litegraph/src/subgraph/SubgraphWidgetPromotion.test.ts` - `pnpm exec oxfmt --check src/composables/graph/useErrorClearingHooks.ts src/composables/graph/useErrorClearingHooks.test.ts src/stores/executionErrorStore.ts` - `pnpm exec oxlint src/composables/graph/useErrorClearingHooks.ts src/composables/graph/useErrorClearingHooks.test.ts src/stores/executionErrorStore.ts --type-aware` - `pnpm exec eslint src/composables/graph/useErrorClearingHooks.ts src/composables/graph/useErrorClearingHooks.test.ts src/stores/executionErrorStore.ts` - `pnpm typecheck` - `pnpm test:browser:local browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts --project=chromium --grep Subgraph` - pre-push `knip --cache` ## Screenshots (if applicable) N/A	2026-06-08 06:49:10 +00:00
Dante	49a05f32ca	fix: stop Add Secret dialog rendering behind Settings modal (FE-939) (#12665 ) ## Summary The "Add Secret" dialog (Settings → Secrets) opens but renders behind the Settings modal because it never joins the shared dialog z-index stack. This is the intermittent "dialog doesn't show" report in FE-939. ## Changes - What: Apply the existing `v-reka-z-index` directive to `SecretFormDialog`'s `DialogOverlay` and `DialogContent`, mirroring `GlobalDialog.vue`. This registers the dialog with the shared `@primeuix` `ZIndex` `'modal'` sequence instead of relying on the static `z-1700` Tailwind class, which always lost to the Settings modal once the shared counter climbed past 1700. ## Review Focus Root cause: `@primeuix` `ZIndex.set` runs with `autoZIndex=true`, so every registered modal lands above the last in the shared `'modal'` sequence — "whichever dialog opens last wins." The Settings modal registers in that sequence (via `GlobalDialog`'s `v-reka-z-index` in the reka renderer, or as a PrimeVue `p-dialog-mask` in the cloud build). `SecretFormDialog` is a standalone reka dialog whose overlay/content carried only the static `z-1700` class and never joined the sequence, so it sat at a fixed `1700`. Whenever the shared counter has climbed past 1700 (the report's `2102/2103` state, reached through repeated dialog/section navigation) the Settings modal paints on top — hence the intermittency. The ~3-line fix lets Add Secret join the same sequence so it always opens above. Scope is intentionally limited to `SecretFormDialog`. Two related items are filed as follow-ups: FE-940 (durable self-registration in the shared dialog primitives so static `z-1700` can be dropped everywhere) and FE-941 (`VideoHelpDialog`, same bug class under the primevue-renderer `UploadModelDialog`). Linear: [FE-939](https://linear.app/comfyorg/issue/FE-939/add-secret-dialog-renders-behind-settings-modal) ## Test plan New `SecretFormDialog.zindex.test.ts` proves the fix red→green: with a modal already registered at `1700`, the unfixed dialog content exposes no inline z-index (`0`, fails the ordering assertion) and the fixed dialog registers strictly above it (passes). It asserts a relative ordering against a real prior registration, not a hardcoded constant, so it is a behavioral regression guard rather than a change-detector. (`@cloud` e2e deferred to FE-940/FE-941 follow-up work — the unit test is the regression guard.) CI red→green proof (Tests Unit): - 🔴 test-only commit `f68d28b6` — [run failed](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/27001789061) (`AssertionError: expected 0 to be greater than 1701`) - 🟢 fix commit `add1862db1` — [run](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/27002203164) ## Screenshots Reproduced on cloud with the shared PrimeVue `'modal'` counter driven to the reported climbed state (`z-2102`); the only difference between the two is whether Add Secret joins the sequence. \| Before (bug) — Add Secret hidden behind Settings \| After (fix) — Add Secret on top \| \| --- \| --- \| \| <img width="360" alt="before" src="https://github.com/user-attachments/assets/c0357dcd-5554-450e-8d4f-5a589a1566f6" /> \| <img width="360" alt="after" src="https://github.com/user-attachments/assets/80b7dd3f-5a73-4bfb-ae38-1eaed115bb8d" /> \|	2026-06-07 04:40:35 +00:00
Dante	f8187cec4c	test: e2e for on-node grid thumbnail previews (FE-741) (#12667 ) ## Summary Adds an end-to-end (Playwright) test for the on-node image-grid thumbnail behavior introduced in #12561 (FE-741), kept in its own PR so #12561 stays scoped to the fix + unit tests. #12561 makes small on-node grid cells request a lightweight thumbnail URL (`preview=webp;75`, server-resized via `res` on cloud) instead of downloading the full-resolution `/api/view` image. That PR covers the helper and component with unit tests. This PR adds the missing integration coverage: it drives a real `Preview Image` node in the browser, injects a multi-image grid over the websocket, and asserts the rendered grid `<img>` elements request thumbnails. It exercises the full path the unit tests can't: `executed` WS output → `nodeOutputStore.buildImageUrls` → `getGridThumbnailUrl` → rendered grid `<img>` `src` ## What it checks - A 4-image `Preview Image` grid renders 4 cells (`viewMode === 'grid'`). - Every grid cell `<img>` `src` carries the compact thumbnail format (`preview=webp;75`; the `;` may be percent-encoded as `%3B`). - Each `src` still points at the real `/api/view` URL for that output (`filename=grid-<n>.png`), confirming it's the thumbnailed view URL, not a placeholder/blob. Lives next to the existing batch-preview test in `browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts`, reusing the `ExecutionHelper` + `webSocketFixture` injection pattern. ## Notes - Stacked on #12561 (`jaewon/fe-741-onnode-grid-thumbnail-preview`). Without that fix the grid cells use the full-res URL and this test is red — i.e. it's a true regression guard. Retarget to `main` once #12561 merges. - Gallery/full-view URLs staying at full resolution is already covered by the unit tests in #12561 (`currentImageUrl` is left untransformed); this test deliberately scopes to the grid path to avoid depending on injected previews actually resolving on the backend. ## Test Plan - [x] `pnpm typecheck:browser` clean - [x] ESLint + oxlint clean - [ ] e2e CI (`ci-tests-e2e`) green on this PR	2026-06-06 13:10:44 +00:00
Terry Jia	7e61358724	FE-905 fix(load3d): cache scene capture so unchanged runs hit backend cache (#12627 ) ## Summary The scene widget's serializeValue uploaded a fresh temp image on every queue, so the `image / mask / normal` filenames in the prompt JSON were new each run. The backend cache key (which hashes those input strings) never matched, forcing Load3D and every downstream node to re-execute even when the user changed nothing. Track a session-scoped dirty flag and last-output cache in module-level WeakMaps keyed by LGraphNode. serializeValue returns the cached output when nothing has changed; user actions that mutate the visible scene (scene/model/camera/light config, animation, recording, gizmo, camera orbit) mark dirty through useLoad3d watchers and event handlers. The model_file / width / height widget callbacks invalidate via a new optional onSceneInvalidated hook plumbed through Load3DConfiguration, so the captured screenshot stays consistent with the inputs the backend sees. ## Screenshots (if applicable) Before https://github.com/user-attachments/assets/5ee5f79f-dd38-401e-babe-4d6ea156e56d After https://github.com/user-attachments/assets/5e00beb4-937c-4c66-abb2-e455f5301de6	2026-06-06 11:58:52 +00:00
Alexander Brown	ff9e6415b5	fix(nodes-2): apply Textarea widget font-size setting in Vue Nodes 2.0 (#12386 ) PR Created by the Glary-Bot Agent --- ## Summary `Settings → Appearance → Node Widget → Textarea widget font size` (`Comfy.TextareaWidget.FontSize`) was wired through the legacy LiteGraph textarea only. The Vue Nodes 2.0 `WidgetTextarea.vue` hardcoded Tailwind `text-xs`, so once Vue nodes were enabled the slider had no effect. `GraphView.vue` already writes the setting value to `--comfy-textarea-font-size` on `:root` for the legacy `.comfy-multiline-input` rule. This PR makes `WidgetTextarea` consume the same variable via Tailwind v4's parenthesized CSS-variable shorthand, keeping `GraphView` as the single source of truth. - `text-xs` → `text-(length:--comfy-textarea-font-size) leading-normal`. The `length:` type hint is required because `text-` is ambiguous between `font-size` and `color`. `leading-normal` keeps line-height proportional to font-size across the 8–24 px range so multi-line text doesn't clip at the high end. - Initialize `--comfy-textarea-font-size: 10px` on `:root` in the design-system stylesheet so isolated renders (Storybook, tests) that do not mount `GraphView` still pick up the documented default. - Fixes [FE-799](https://linear.app/comfyorg/issue/FE-799/bug-textarea-widget-font-size-setting-not-working-in-nodes-20) ## Verification - `pnpm typecheck`, `pnpm lint`, `pnpm exec stylelint`, `pnpm exec oxfmt --check`, `pnpm knip`, and `WidgetTextarea.test.ts` (20 tests) all pass. - Manual browser verification with Vue Nodes 2.0 enabled and a `CLIPTextEncode` node: - setting `8` → computed `font-size: 8px` - setting `22` → computed `font-size: 22px` - setting `24` → computed `font-size: 24px`, computed `line-height: 36px` (ratio 1.5, no clipping) - Confirmed the legacy LiteGraph path still resolves to `comfy-multiline-input` with `font-size: 22px` when Vue Nodes is disabled (no regression). - Confirmed the `:root` default resolves to `10px` when `GraphView`'s inline override is absent (Storybook-like environments). ## Out of scope (follow-up) `WidgetMarkdown.vue` (the Vue Nodes 2.0 markdown/tiptap widget) also hardcodes `text-sm`. The legacy `.comfy-markdown .tiptap` rule reads the same `--comfy-textarea-font-size` variable, so the setting historically governed markdown widgets in Nodes 1.0. Bringing that into line with this PR's approach is a follow-up the design team should weigh in on before changing. ## Screenshots ![textarea-fontsize-8px](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/6f2a0d3f4193afb5583ebf6c01c558f759abf5059f5f0535c4168e081a68ea47/pr-images/1779307449630-3046bbe9-cb29-41f7-8994-9d251bd0ab5d.png) ![textarea-fontsize-22px](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/6f2a0d3f4193afb5583ebf6c01c558f759abf5059f5f0535c4168e081a68ea47/pr-images/1779307449987-46aed4a1-b09c-4b2e-88cf-e6302944c319.png) ![textarea-fontsize-24px-multiline](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/6f2a0d3f4193afb5583ebf6c01c558f759abf5059f5f0535c4168e081a68ea47/pr-images/1779307450337-164136c9-b1e2-4dac-8390-4d935d416675.png) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12386-fix-nodes-2-apply-Textarea-widget-font-size-setting-in-Vue-Nodes-2-0-3666d73d365081fd8084e84a41ee357b) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com>	2026-06-06 00:26:51 +00:00