fix: encode large copy payload metadata in chunks (#12847 )

## Summary Fix Ctrl+C copy for large subgraphs by encoding clipboard metadata in bounded byte chunks instead of spreading the full serialized payload into a single `String.fromCharCode(...)` call. ## Root Cause <img width="648" height="33" alt="스크린샷 2026-06-15 오후 4 46 52" src="https://github.com/user-attachments/assets/09aec159-fd10-4979-bfb2-51aec9b51a63" /> Ctrl+C uses the native `copy` event path in `useCopy.ts` so ComfyUI can write serialized node metadata into the system clipboard as `text/html`. That metadata supports the cross-app / cross-window copy-paste path. For Unicode safety, the current code first converts the serialized node JSON to UTF-8 bytes with `TextEncoder`, then converts those bytes into a binary string for `btoa`. The bug was in this conversion step: ```ts String.fromCharCode(...Array.from(new TextEncoder().encode(serializedData))) ``` When a selected subgraph is large enough, the UTF-8 byte array becomes too large to spread as function arguments. The browser throws `RangeError: Maximum call stack size exceeded` before clipboard metadata is written, so Ctrl+C appears to fail for large subgraphs. The right-click / menu copy path was not affected in the same way because it uses LiteGraph's internal `copyToClipboard()` path directly and does not go through this system clipboard metadata encoding step. ## Changes - **What**: Convert UTF-8 bytes to a binary string in `0x8000` byte chunks before passing the result to `btoa`. - **Why**: This preserves the existing UTF-8 safe cross-app clipboard metadata format while avoiding the JavaScript argument-count limit that caused the stack overflow. - **Fallback**: Wrap system clipboard metadata encoding/writing in `try/catch` so the internal `canvas.copyToClipboard()` result is still produced even if the metadata bridge fails unexpectedly. - **Dependencies**: None ## Review Focus - Chunking is only used while building the binary string for base64 encoding. The clipboard payload format remains unchanged. - Multi-byte UTF-8 data remains safe because chunking happens at the byte-string construction layer; paste still reassembles the full byte stream before `TextDecoder` decodes it. - The unit test exercises the actual `useCopy` copy handler with a large serialized payload, Unicode metadata, and a partial final chunk. ## Test Plan - `vitest run src/composables/useCopy.test.ts` - pre-commit hook: `oxfmt`, `oxlint`, `eslint`, `typecheck` - pre-push hook: `pnpm knip` No E2E was added because this regression is isolated to deterministic clipboard metadata encoding in `useCopy`. The unit test exercises the actual `copy` event handler with a large serialized payload and Unicode metadata, avoiding a large workflow fixture and slower browser coverage for behavior that does not require canvas rendering or end-to-end UI orchestration. Linear: [FE-858](https://linear.app/comfyorg/issue/FE-858/bug-ctrlc-copy-keyboard-shortcut-does-not-work-on-large-subgraphs)
Redesign error tab cards with summary hero and unified sections (#12828 )
2026-06-16 19:39:28 +00:00 · 2026-06-16 14:12:08 +00:00 · 2026-06-16 13:32:10 +00:00 · 2026-06-16 13:03:02 +00:00 · 2026-06-16 01:41:18 +00:00 · 2026-06-15 21:44:27 -04:00
27 changed files with 766 additions and 446 deletions
--- a/browser_tests/tests/maskEditorLoadSave.spec.ts
+++ b/browser_tests/tests/maskEditorLoadSave.spec.ts
@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test'
+
+import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
+
+interface UploadResponse {
+  name: string
+  subfolder: string
+  type: 'input' | 'output' | 'temp'
+}
+
+const IMAGE_CANVAS_INDEX = 0
+const MASK_CANVAS_INDEX = 2
+
+const successResponse = (name: string): UploadResponse => ({
+  name,
+  subfolder: 'clipspace',
+  type: 'input'
+})
+
+const fulfillJson = (body: UploadResponse) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
+  test('Save with drawn mask uploads non-empty mask data', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
+
+    let observedContentType = ''
+    let observedBodyLength = 0
+
+    await comfyPage.page.route('**/upload/mask', async (route) => {
+      const request = route.request()
+      observedContentType = (await request.headerValue('content-type')) ?? ''
+      observedBodyLength = request.postDataBuffer()?.byteLength ?? 0
+      await route.fulfill(
+        fulfillJson(successResponse('clipspace-mask-123.png'))
+      )
+    })
+
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill(fulfillJson(successResponse('clipspace-painted-123.png')))
+    )
+
+    await dialog.getByRole('button', { name: 'Save' }).click()
+    await expect(dialog).toBeHidden()
+    expect(observedContentType).toContain('multipart/form-data')
+    expect(observedBodyLength).toBeGreaterThan(256)
+  })
+
+  test('Canvas dimensions match the loaded image', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
+
+    const imageDimensions =
+      await maskEditor.getCanvasPixelData(IMAGE_CANVAS_INDEX)
+    const maskDimensions =
+      await maskEditor.getCanvasPixelData(MASK_CANVAS_INDEX)
+
+    expect(imageDimensions).not.toBeNull()
+    expect(maskDimensions).not.toBeNull()
+    expect(imageDimensions?.totalPixels).toBe(64 * 64)
+    expect(maskDimensions?.totalPixels).toBe(64 * 64)
+
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Save failure on partial upload keeps dialog open', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
+
+    // The saver uploads sequentially: mask layer first, then image layers.
+    // Let the mask upload succeed and the image upload fail to exercise both
+    // endpoints and verify the dialog stays open after a partial failure.
+    let maskUploadHit = false
+    let imageUploadHit = false
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadHit = true
+      return route.fulfill(
+        fulfillJson(successResponse('clipspace-mask-999.png'))
+      )
+    })
+    await comfyPage.page.route('**/upload/image', (route) => {
+      imageUploadHit = true
+      return route.fulfill({ status: 500 })
+    })
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.click()
+
+    await expect.poll(() => maskUploadHit).toBe(true)
+    await expect.poll(() => imageUploadHit).toBe(true)
+    await expect(dialog).toBeVisible()
+    await expect(saveButton).toBeVisible()
+  })
+})
--- a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
+++ b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
@@ -8,6 +8,7 @@ import {
  getPromotedWidgetNames,
  getPromotedWidgetCountByName
 } from '@e2e/fixtures/utils/promotedWidgets'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 const wstest = mergeTests(test, webSocketFixture)

@@ -139,6 +140,46 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
      )
    }
  )
+
+  wstest(
+    'Displays previews inside subgraphs received while workflow inactive',
+    async ({ comfyPage, getWebSocket }) => {
+      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
+      const previewLocator = comfyPage.vueNodes.getNodeByTitle('Preview Image')
+      const previewImage = new VueNodeFixture(previewLocator)
+      const subgraphLocator = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      const subgraphNode = new VueNodeFixture(subgraphLocator)
+
+      await test.step('Add node', async () => {
+        await comfyPage.menu.topbar.newWorkflowButton.click()
+        await comfyPage.nextFrame()
+
+        await comfyPage.searchBoxV2.addNode('Preview Image')
+        await expect(previewImage.root).toBeVisible()
+      })
+
+      await test.step('Create subgraph', async () => {
+        await previewImage.title.click()
+        await comfyPage.page.keyboard.press('Control+Shift+e')
+        await expect(subgraphNode.root).toBeVisible()
+      })
+
+      await test.step('Inject Previews from different tab', async () => {
+        const jobId = await execution.run()
+        await comfyPage.menu.topbar.getTab(0).click()
+        await comfyPage.vueNodes.waitForNodes(7)
+
+        const images = [{ filename: 'example.png', type: 'input' }]
+        execution.executed(jobId, '2:1', { images })
+        await comfyPage.nextFrame()
+
+        await comfyPage.menu.topbar.getTab(1).click()
+        await comfyPage.vueNodes.waitForNodes(1)
+      })
+
+      await expect(subgraphNode.imagePreview.locator('img')).toHaveCount(1)
+    }
+  )
 })

 async function countColumns(locator: Locator) {
--- a/src/components/rightSidePanel/errors/ErrorCardSection.vue
+++ b/src/components/rightSidePanel/errors/ErrorCardSection.vue
@@ -0,0 +1,71 @@
+<template>
+  <section :class="cn('group flex min-w-0 flex-col py-2', className)">
+    <div class="flex min-h-8 w-full items-center gap-2 px-3">
+      <button
+        type="button"
+        class="focus-visible:ring-ring flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-1"
+        :aria-expanded="!collapse"
+        :aria-controls="bodyId"
+        @click="collapse = !collapse"
+      >
+        <span
+          class="flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-destructive-background-hover px-1 text-2xs/none font-semibold text-white tabular-nums"
+        >
+          {{ count }}
+        </span>
+        <span class="min-w-0 flex-1 truncate text-sm text-base-foreground">
+          {{ title }}
+        </span>
+      </button>
+      <slot name="actions" />
+      <button
+        type="button"
+        class="focus-visible:ring-ring flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-none focus-visible:ring-1"
+        :aria-expanded="!collapse"
+        :aria-controls="bodyId"
+        :aria-label="
+          collapse ? t('rightSidePanel.expand') : t('rightSidePanel.collapse')
+        "
+        @click="collapse = !collapse"
+      >
+        <i
+          aria-hidden="true"
+          :class="
+            cn(
+              'icon-[lucide--chevron-up] size-4 text-muted-foreground transition-transform group-hover:text-base-foreground',
+              collapse && '-rotate-180'
+            )
+          "
+        />
+      </button>
+    </div>
+    <TransitionCollapse>
+      <div v-if="!collapse" :id="bodyId">
+        <slot />
+      </div>
+    </TransitionCollapse>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
+
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+
+const {
+  title,
+  count,
+  class: className
+} = defineProps<{
+  title: string
+  count: number
+  class?: string
+}>()
+
+const collapse = defineModel<boolean>('collapse', { default: false })
+
+const bodyId = useId()
+const { t } = useI18n()
+</script>
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.vue
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
@@ -1,29 +1,31 @@
 <template>
-  <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+  <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
    <div
      v-if="card.nodeId && !compact"
-      class="flex flex-wrap items-center gap-2 py-2"
+      class="flex min-h-8 flex-wrap items-center gap-2"
    >
-      <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.nodeTitle || card.title }}
-      </button>
-      <span
-        v-else-if="card.nodeTitle || card.title"
-        class="flex-1 truncate text-sm font-medium text-muted-foreground"
-      >
-        {{ card.nodeTitle || card.title }}
+      <span class="flex min-w-0 flex-1">
+        <button
+          v-if="hasRuntimeError && (card.nodeTitle || card.title)"
+          type="button"
+          class="focus-visible:ring-ring m-0 max-w-full min-w-0 cursor-pointer appearance-none truncate rounded-sm border-0 bg-transparent p-0 text-left text-xs font-normal text-base-foreground outline-none focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
+          @click="handleLocateNode"
+        >
+          {{ card.nodeTitle || card.title }}
+        </button>
+        <span
+          v-else-if="card.nodeTitle || card.title"
+          class="max-w-full min-w-0 truncate text-xs font-normal text-base-foreground"
+        >
+          {{ card.nodeTitle || card.title }}
+        </span>
      </span>
      <div class="flex shrink-0 items-center">
        <Button
          v-if="card.isSubgraphNode"
          variant="secondary"
          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
          @click.stop="handleEnterSubgraph"
        >
          {{ t('rightSidePanel.enterSubgraph') }}
@@ -34,7 +36,7 @@
          size="icon-sm"
          :class="
            cn(
-              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground',
+              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset',
              runtimeDetailsExpanded &&
                'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
            )
@@ -49,7 +51,7 @@
        <Button
          variant="textonly"
          size="icon-sm"
-          class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+          class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
          :aria-label="t('rightSidePanel.locateNode')"
          @click.stop="handleLocateNode"
        >
@@ -59,29 +61,29 @@
    </div>

    <div
-      class="flex min-h-0 flex-1 flex-col space-y-4 divide-y divide-interface-stroke/20"
+      class="flex min-h-0 flex-1 flex-col space-y-2 divide-y divide-interface-stroke/20"
    >
      <div
        v-for="(error, idx) in card.errors"
        :key="idx"
-        class="flex min-h-0 flex-col gap-3"
+        class="flex min-h-0 flex-col gap-1"
      >
        <p
          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"
+          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-xs/relaxed wrap-break-word whitespace-pre-wrap"
        >
          {{ getInlineMessage(error) }}
        </p>

        <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"
+          class="m-0 list-disc space-y-1 pl-5 text-xs/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"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm 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:ring-1 focus-visible:outline-none focus-visible:ring-inset"
              @click="handleLocateNode"
            >
              {{ getInlineItemLabel(error) }}
@@ -96,13 +98,13 @@
          v-if="!error.isRuntimeError && getInlineDetails(error, idx)"
          :class="
            cn(
-              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background p-2.5',
+              'overflow-y-auto rounded-lg bg-base-foreground/5 p-3',
              'max-h-[6lh]'
            )
          "
        >
          <p
-            class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+            class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
          >
            {{ getInlineDetails(error, idx) }}
          </p>
@@ -115,60 +117,61 @@
            role="region"
            data-testid="runtime-error-panel"
            :aria-label="t('rightSidePanel.errorLog')"
-            class="flex min-h-0 flex-col gap-3"
+            class="flex min-h-0 flex-col gap-1"
          >
            <div
              v-if="getInlineDetails(error, idx)"
-              class="overflow-hidden rounded-lg border border-interface-stroke/30 bg-secondary-background"
+              class="flex flex-col gap-3 rounded-lg bg-base-foreground/5 p-3"
            >
-              <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 class="flex flex-col gap-2">
+                <div class="flex items-center justify-between gap-1 py-1">
+                  <span
+                    class="text-xs font-semibold 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 focus-visible:ring-inset"
+                    :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">
+                  <p
+                    class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
+                  >
+                    {{ getInlineDetails(error, idx) }}
+                  </p>
+                </div>
              </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">
+              <div aria-hidden="true" class="h-px w-full bg-interface-stroke" />
+
+              <div class="flex items-center justify-between gap-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"
+                  class="justify-start gap-1 px-0 text-xs hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
                  @click="handleGetHelp"
                >
-                  <i class="icon-[lucide--external-link] size-3.5" />
+                  <i class="icon-[lucide--external-link] size-4" />
                  {{ 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"
+                  class="justify-end gap-1 px-0 text-xs hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
                  data-testid="error-card-find-on-github"
                  @click="handleCheckGithub(error)"
                >
-                  <i class="icon-[lucide--github] size-3.5" />
+                  <i class="icon-[lucide--github] size-4" />
                  {{ t('g.findOnGithub') }}
                </Button>
              </div>
--- a/src/components/rightSidePanel/errors/MissingNodeCard.vue
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div data-testid="missing-node-card" class="px-4 pb-2">
+  <div data-testid="missing-node-card" class="px-3">
    <!-- Core node version warning (OSS only) -->
    <div
      v-if="!isCloud && hasMissingCoreNodes"
@@ -56,7 +56,7 @@
        >
      </template>
    </i18n-t>
-    <div class="flex flex-col gap-1 overflow-hidden py-2">
+    <div class="flex flex-col gap-1 overflow-hidden">
      <MissingPackGroupRow
        v-for="group in missingPackGroups"
        :key="group.packId ?? '__unknown__'"
@@ -75,7 +75,7 @@
      variant="secondary"
      size="sm"
      :disabled="isRestarting"
-      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
+      class="mt-2 h-8 w-full min-w-0 rounded-md text-xs"
      @click="applyChanges()"
    >
      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
@@ -12,17 +12,17 @@
            : t('rightSidePanel.missingNodePacks.expand')
        "
        :aria-expanded="expanded"
-        :class="
-          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
-          )
-        "
+        class="h-8 w-4 shrink-0 p-0 hover:bg-transparent focus-visible:ring-inset"
        @click="toggleExpand"
      >
        <i
          aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          :class="
+            cn(
+              'icon-[lucide--chevron-right] size-4 text-muted-foreground transition-transform duration-200',
+              expanded && 'rotate-90'
+            )
+          "
        />
      </Button>
      <i
@@ -64,7 +64,7 @@
          </button>
          <span
            v-else
-            class="min-w-0 truncate text-sm/relaxed font-normal"
+            class="min-w-0 truncate text-xs/relaxed font-normal"
            :class="
              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
            "
@@ -80,7 +80,7 @@
            v-if="showInfoButton && group.packId !== null"
            variant="textonly"
            size="icon-sm"
-            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            class="size-6 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
            :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
            @click="emit('openManagerInfo', group.packId ?? '')"
          >
@@ -89,7 +89,7 @@
          <span
            v-if="showNodeCount"
            data-testid="missing-node-pack-count"
-            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+            class="flex h-4 min-w-4 shrink-0 items-center justify-center rounded-sm bg-secondary-background-hover px-1 text-2xs font-semibold text-base-foreground"
          >
            {{ group.nodeTypes.length }}
          </span>
@@ -99,7 +99,7 @@
        <Button
          variant="secondary"
          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
          :disabled="isPackInstalled || isInstalling"
          @click="handlePackInstallClick"
        >
@@ -122,10 +122,10 @@
      </div>
      <div
        v-else-if="showLoadingAction"
-        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
+        class="ml-auto flex h-6 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm bg-secondary-background px-2 py-1 text-xs opacity-60 select-none"
      >
        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
-        <span class="text-foreground min-w-0 truncate text-sm">
+        <span class="text-foreground min-w-0 truncate text-xs">
          {{ t('g.loading') }}
        </span>
      </div>
@@ -133,7 +133,7 @@
        <Button
          variant="secondary"
          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
          @click="
            openManager({
              initialTab: ManagerTab.All,
@@ -150,7 +150,7 @@
        v-if="primaryLocatableNodeType"
        variant="textonly"
        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
        :aria-label="t('rightSidePanel.locateNode')"
        @click="handleLocateNode(primaryLocatableNodeType)"
      >
@@ -163,7 +163,7 @@
        v-if="showNodeTypeList"
        :class="
          cn(
-            'm-0 list-none space-y-1 p-0',
+            'm-0 list-none p-0',
            (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
          )
        "
@@ -190,7 +190,7 @@
              </button>
              <span
                v-else
-                class="text-sm/relaxed wrap-break-word text-muted-foreground"
+                class="text-xs/relaxed wrap-break-word text-muted-foreground"
              >
                {{ getLabel(nodeType) }}
              </span>
@@ -199,7 +199,7 @@
              v-if="isLocatableNodeType(nodeType)"
              variant="textonly"
              size="icon-sm"
-              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
              :aria-label="t('rightSidePanel.locateNode')"
              @click="handleLocateNode(nodeType)"
            >
@@ -241,7 +241,7 @@ const { t } = useI18n()
 const expandedOverride = ref<boolean | null>(null)

 const packTextButtonClass =
-  '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 outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'
+  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word outline-none focus:outline-none rounded-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none'

 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -78,6 +78,10 @@ describe('TabErrors.vue', () => {
          rightSidePanel: {
            noErrors: 'No errors',
            noneSearchDesc: 'No results found',
+            errorsDetected: 'Error detected | Errors detected',
+            resolveBeforeRun: 'Resolve before running the workflow',
+            expand: 'Expand',
+            collapse: 'Collapse',
            errorHelp: 'Error help',
            errorLog: 'Error log',
            findOnGithubTooltip: 'Search GitHub issues',
@@ -118,9 +122,6 @@ describe('TabErrors.vue', () => {
            template:
              '<input @input="$emit(\'update:modelValue\', $event.target.value)" />'
          },
-          PropertiesAccordionItem: {
-            template: '<div><slot name="label" /><slot /></div>'
-          },
          Button: {
            template: '<button v-bind="$attrs"><slot /></button>'
          }
@@ -211,7 +212,13 @@ describe('TabErrors.vue', () => {
    })

    expect(screen.getByText('Missing connection')).toBeInTheDocument()
-    expect(screen.getByText('(3)')).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('error-group-execution')).getByText('3')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('3')
+    ).toBeInTheDocument()
+    expect(screen.getByText('Errors detected')).toBeInTheDocument()
    expect(
      screen.getAllByText(
        'Required input slots have no connection feeding them.'
@@ -404,7 +411,7 @@ describe('TabErrors.vue', () => {
    })
    const missingModelStore = useMissingModelStore()

-    expect(screen.getByText('Missing Models (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Models')).toBeInTheDocument()
    expect(
      screen.queryByTestId('missing-model-actions')
    ).not.toBeInTheDocument()
@@ -414,6 +421,40 @@ describe('TabErrors.vue', () => {
    expect(missingModelStore.refreshMissingModels).toHaveBeenCalled()
  })

+  it('counts missing models per file when several share one directory', () => {
+    renderComponent({
+      missingModel: {
+        missingModelCandidates: [
+          {
+            nodeId: '1',
+            nodeType: 'CheckpointLoaderSimple',
+            widgetName: 'ckpt_name',
+            name: 'model-a.safetensors',
+            directory: 'checkpoints',
+            isMissing: true,
+            isAssetSupported: true
+          },
+          {
+            nodeId: '2',
+            nodeType: 'CheckpointLoaderSimple',
+            widgetName: 'ckpt_name',
+            name: 'model-b.safetensors',
+            directory: 'checkpoints',
+            isMissing: true,
+            isAssetSupported: true
+          }
+        ] satisfies MissingModelCandidate[]
+      }
+    })
+
+    expect(
+      within(screen.getByTestId('error-group-missing-model')).getByText('2')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('2')
+    ).toBeInTheDocument()
+  })
+
  it('renders missing model display message below the section title', () => {
    const missingModel = {
      nodeId: '1',
@@ -431,7 +472,7 @@ describe('TabErrors.vue', () => {
      }
    })

-    expect(screen.getByText('Missing Models (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Models')).toBeInTheDocument()
    expect(
      screen.getByText('Download a model, or open the node to replace it.')
    ).toBeInTheDocument()
@@ -453,7 +494,7 @@ describe('TabErrors.vue', () => {
      }
    })

-    expect(screen.getByText('Missing Inputs (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Inputs')).toBeInTheDocument()
    expect(
      screen.getByText('A required media input has no file selected.')
    ).toBeInTheDocument()
@@ -495,6 +536,12 @@ describe('TabErrors.vue', () => {
    })

    expect(screen.getAllByTestId('missing-media-row')).toHaveLength(2)
+    expect(
+      within(screen.getByTestId('error-group-missing-media')).getByText('2')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('2')
+    ).toBeInTheDocument()

    await user.click(
      screen.getByRole('button', { name: 'Second Loader - image' })
@@ -526,7 +573,7 @@ describe('TabErrors.vue', () => {
      }
    })

-    expect(screen.getByText('Swap Nodes (1)')).toBeInTheDocument()
+    expect(screen.getByText('Swap Nodes')).toBeInTheDocument()
    expect(
      screen.getByText('Some nodes can be replaced with alternatives')
    ).toBeInTheDocument()
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -11,49 +11,62 @@
      />
    </div>

-    <div class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
-      <TransitionGroup tag="div" name="list-scale" class="relative">
+    <div
+      class="min-w-0 flex-1 overflow-y-auto bg-interface-panel-surface p-3"
+      aria-live="polite"
+    >
+      <div
+        v-if="filteredGroups.length === 0"
+        class="px-1 pt-5 pb-15 text-center text-sm text-muted-foreground"
+      >
+        {{
+          searchQuery.trim()
+            ? t('rightSidePanel.noneSearchDesc')
+            : t('rightSidePanel.noErrors')
+        }}
+      </div>
+
+      <div
+        v-else
+        class="overflow-hidden rounded-lg border border-secondary-background"
+      >
+        <!-- Errors summary hero -->
        <div
-          v-if="filteredGroups.length === 0"
-          key="empty"
-          class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
+          data-testid="errors-summary-hero"
+          class="flex items-center gap-2 bg-base-foreground/5 p-2"
        >
-          {{
-            searchQuery.trim()
-              ? t('rightSidePanel.noneSearchDesc')
-              : t('rightSidePanel.noErrors')
-          }}
+          <span
+            class="flex h-12 min-w-9 shrink-0 items-center justify-center px-1 text-[2rem]/none font-extrabold text-destructive-background-hover tabular-nums"
+          >
+            {{ totalErrorCount }}
+          </span>
+          <span
+            aria-hidden="true"
+            class="h-9 w-px shrink-0 bg-interface-stroke"
+          />
+          <div class="flex min-w-0 flex-1 flex-col gap-1 px-2">
+            <span class="text-xs/tight font-semibold text-base-foreground">
+              {{ t('rightSidePanel.errorsDetected', totalErrorCount) }}
+            </span>
+            <span class="text-xs/tight text-muted-foreground">
+              {{ t('rightSidePanel.resolveBeforeRun') }}
+            </span>
+          </div>
        </div>

        <!-- Group by Class Type -->
-        <PropertiesAccordionItem
-          v-for="group in filteredGroups"
-          :key="group.groupKey"
-          :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
-          :collapse="isSectionCollapsed(group.groupKey) && !isSearching"
-          class="border-b border-interface-stroke"
-          :size="getGroupSize(group)"
-          @update:collapse="setSectionCollapsed(group.groupKey, $event)"
-        >
-          <template #label>
-            <div class="flex min-w-0 flex-1 items-center gap-2">
-              <span class="flex min-w-0 flex-1 items-center gap-2">
-                <i
-                  class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
-                />
-                <span class="truncate text-destructive-background-hover">
-                  {{ group.displayTitle }}
-                </span>
-                <span
-                  v-if="
-                    group.type === 'execution' &&
-                    getExecutionGroupCount(group) > 1
-                  "
-                  class="text-destructive-background-hover"
-                >
-                  ({{ getExecutionGroupCount(group) }})
-                </span>
-              </span>
+        <TransitionGroup tag="div" name="list-scale" class="relative">
+          <ErrorCardSection
+            v-for="group in filteredGroups"
+            :key="group.groupKey"
+            :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
+            :title="group.displayTitle"
+            :count="getGroupCount(group)"
+            :collapse="isSectionCollapsed(group.groupKey) && !isSearching"
+            class="border-t border-secondary-background first:border-t-0"
+            @update:collapse="setSectionCollapsed(group.groupKey, $event)"
+          >
+            <template #actions>
              <Button
                v-if="
                  group.type === 'missing_node' &&
@@ -62,7 +75,7 @@
                "
                variant="secondary"
                size="sm"
-                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
+                class="shrink-0"
                :disabled="isInstallingAll"
                @click.stop="installAll"
              >
@@ -83,7 +96,7 @@
                "
                variant="secondary"
                size="sm"
-                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
+                class="shrink-0"
                @click.stop="handleReplaceAll()"
              >
                {{ t('nodeReplacement.replaceAll', 'Replace All') }}
@@ -96,7 +109,7 @@
                data-testid="missing-model-header-refresh"
                variant="muted-textonly"
                size="icon"
-                class="mr-2 shrink-0 rounded-lg hover:bg-transparent hover:text-base-foreground"
+                class="shrink-0 rounded-lg hover:bg-transparent hover:text-base-foreground"
                :aria-label="t('rightSidePanel.missingModels.refresh')"
                :aria-busy="missingModelStore.isRefreshingMissingModels"
                :aria-disabled="missingModelStore.isRefreshingMissingModels"
@@ -129,140 +142,142 @@
                    : ''
                }}
              </span>
-            </div>
-          </template>
+            </template>

-          <div
-            v-if="group.displayMessage"
-            data-testid="error-group-display-message"
-            class="px-4 pt-1 pb-3"
-          >
-            <p
-              class="m-0 text-sm/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+            <div
+              v-if="group.displayMessage"
+              data-testid="error-group-display-message"
+              class="px-3 py-1"
            >
-              {{ group.displayMessage }}
-            </p>
-          </div>
-
-          <!-- Missing Node Packs -->
-          <MissingNodeCard
-            v-if="group.type === 'missing_node'"
-            :show-info-button="shouldShowManagerButtons"
-            :missing-pack-groups="missingPackGroups"
-            @locate-node="handleLocateMissingNode"
-            @open-manager-info="handleOpenManagerInfo"
-          />
-
-          <!-- Swap Nodes -->
-          <SwapNodesCard
-            v-if="group.type === 'swap_nodes'"
-            :swap-node-groups="swapNodeGroups"
-            @locate-node="handleLocateMissingNode"
-            @replace="handleReplaceGroup"
-          />
-
-          <!-- Execution Errors -->
-          <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"
+              <p
+                class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
              >
-                <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>
+                {{ group.displayMessage }}
+              </p>
+            </div>
+
+            <!-- Missing Node Packs -->
+            <MissingNodeCard
+              v-if="group.type === 'missing_node'"
+              :show-info-button="shouldShowManagerButtons"
+              :missing-pack-groups="missingPackGroups"
+              @locate-node="handleLocateMissingNode"
+              @open-manager-info="handleOpenManagerInfo"
+            />
+
+            <!-- Swap Nodes -->
+            <SwapNodesCard
+              v-if="group.type === 'swap_nodes'"
+              :swap-node-groups="swapNodeGroups"
+              @locate-node="handleLocateMissingNode"
+              @replace="handleReplaceGroup"
+            />
+
+            <!-- Execution Errors -->
+            <div v-if="isExecutionItemListGroup(group)" class="px-3">
+              <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="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
+                        @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 focus-visible:ring-inset',
+                            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
-                      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'
-                        )
-                      "
+                      class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
                      :aria-label="
-                        t('rightSidePanel.infoFor', { item: item.label })
+                        t('rightSidePanel.locateNodeFor', { item: item.label })
                      "
-                      :aria-controls="getExecutionItemDetailId(item.key)"
-                      :aria-expanded="isExecutionItemDetailExpanded(item.key)"
-                      @click.stop="toggleExecutionItemDetail(item.key)"
+                      @click.stop="handleLocateNode(item.nodeId)"
                    >
-                      <i class="icon-[lucide--info] size-3.5" />
+                      <i class="icon-[lucide--locate] size-4" />
                    </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"
-              :compact="isSingleNodeSelected"
-              @locate-node="handleLocateNode"
-              @enter-subgraph="handleEnterSubgraph"
-              @copy-to-clipboard="copyToClipboard"
+                  </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-3">
+              <ErrorNodeCard
+                v-for="card in group.cards"
+                :key="card.id"
+                :card="card"
+                :compact="isSingleNodeSelected"
+                @locate-node="handleLocateNode"
+                @enter-subgraph="handleEnterSubgraph"
+                @copy-to-clipboard="copyToClipboard"
+              />
+            </div>
+
+            <!-- Missing Models -->
+            <MissingModelCard
+              v-if="group.type === 'missing_model'"
+              :missing-model-groups="missingModelGroups"
+              @locate-model="handleLocateAssetNode"
            />
-          </div>

-          <!-- Missing Models -->
-          <MissingModelCard
-            v-if="group.type === 'missing_model'"
-            :missing-model-groups="missingModelGroups"
-            @locate-model="handleLocateAssetNode"
-          />
-
-          <!-- Missing Media -->
-          <MissingMediaCard
-            v-if="group.type === 'missing_media'"
-            :missing-media-groups="missingMediaGroups"
-            @locate-node="handleLocateAssetNode"
-          />
-        </PropertiesAccordionItem>
-      </TransitionGroup>
+            <!-- Missing Media -->
+            <MissingMediaCard
+              v-if="group.type === 'missing_media'"
+              :missing-media-groups="missingMediaGroups"
+              @locate-node="handleLocateAssetNode"
+            />
+          </ErrorCardSection>
+        </TransitionGroup>
+      </div>
    </div>

    <ErrorPanelSurveyCta v-if="ErrorPanelSurveyCta" />

    <!-- Fixed Footer: Help Links -->
-    <div class="min-w-0 shrink-0 border-t border-interface-stroke p-4">
+    <div
+      class="min-w-0 shrink-0 border-t border-interface-stroke bg-interface-panel-surface p-4"
+    >
      <i18n-t
        keypath="rightSidePanel.errorHelp"
        tag="p"
@@ -304,15 +319,16 @@ import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'

-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 ErrorCardSection from './ErrorCardSection.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
 import MissingModelCard from '@/platform/missingModel/components/MissingModelCard.vue'
 import MissingMediaCard from '@/platform/missingMedia/components/MissingMediaCard.vue'
+import { countMissingMediaReferences } from '@/platform/missingMedia/missingMediaGrouping'
 import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
@@ -356,16 +372,6 @@ const searchQuery = ref('')
 const expandedExecutionItemDetailKeys = ref(new Set<string>())
 const isSearching = computed(() => searchQuery.value.trim() !== '')

-const fullSizeGroupTypes = new Set([
-  'missing_node',
-  'swap_nodes',
-  'missing_model',
-  'missing_media'
-])
-function getGroupSize(group: ErrorGroup) {
-  return fullSizeGroupTypes.has(group.type) ? 'lg' : 'default'
-}
-
 function isExecutionItemListGroup(group: ErrorGroup) {
  return (
    group.type === 'execution' &&
@@ -452,6 +458,28 @@ const {
  swapNodeGroups
 } = useErrorGroups(searchQuery)

+function getGroupCount(group: ErrorGroup): number {
+  switch (group.type) {
+    case 'execution':
+      return getExecutionGroupCount(group)
+    case 'missing_node':
+      return missingPackGroups.value.length
+    case 'swap_nodes':
+      return swapNodeGroups.value.length
+    case 'missing_model':
+      return missingModelGroups.value.reduce(
+        (total, modelGroup) => total + modelGroup.models.length,
+        0
+      )
+    case 'missing_media':
+      return countMissingMediaReferences(missingMediaGroups.value)
+  }
+}
+
+const totalErrorCount = computed(() =>
+  filteredGroups.value.reduce((sum, group) => sum + getGroupCount(group), 0)
+)
+
 const showMissingModelHeaderRefresh = computed(
  () => !isCloud && missingModelGroups.value.length > 0
 )
--- a/src/components/rightSidePanel/errors/useErrorGroups.test.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.test.ts
@@ -334,7 +334,7 @@ describe('useErrorGroups', () => {
      )
      expect(missingGroup).toBeDefined()
      expect(missingGroup?.groupKey).toBe('missing_node')
-      expect(missingGroup?.displayTitle).toBe('Missing Node Packs (1)')
+      expect(missingGroup?.displayTitle).toBe('Missing Node Packs')
      expect(missingGroup?.displayMessage).toBe(
        'Install missing packs to use this workflow.'
      )
@@ -982,7 +982,7 @@ describe('useErrorGroups', () => {
      )
      expect(modelGroup).toBeDefined()
      expect(modelGroup?.groupKey).toBe('missing_model')
-      expect(modelGroup?.displayTitle).toBe('Missing Models (1)')
+      expect(modelGroup?.displayTitle).toBe('Missing Models')
    })
  })

@@ -1098,7 +1098,7 @@ describe('useErrorGroups', () => {
      const missingMediaGroup = groups.allErrorGroups.value.find(
        (group) => group.type === 'missing_media'
      )
-      expect(missingMediaGroup?.displayTitle).toBe('Missing Inputs (2)')
+      expect(missingMediaGroup?.displayTitle).toBe('Missing Inputs')
    })
  })

--- a/src/composables/useCopy.test.ts
+++ b/src/composables/useCopy.test.ts
@@ -1,105 +1,94 @@
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useCopy } from './useCopy'

-/**
- * Encodes a UTF-8 string to base64 (same logic as useCopy.ts)
- */
-function encodeClipboardData(data: string): string {
-  return btoa(
-    String.fromCharCode(...Array.from(new TextEncoder().encode(data)))
+const copyMocks = vi.hoisted(() => ({
+  copyHandler: undefined as ((event: ClipboardEvent) => unknown) | undefined,
+  canvas: {
+    selectedItems: new Set<object>([{}]),
+    copyToClipboard: vi.fn()
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useEventListener: vi.fn(
+    (
+      _target: EventTarget,
+      event: string,
+      handler: (event: ClipboardEvent) => unknown
+    ) => {
+      if (event === 'copy') copyMocks.copyHandler = handler
+      return vi.fn()
+    }
  )
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({
+    canvas: copyMocks.canvas
+  })
+}))
+
+vi.mock('@/workbench/eventHelpers', () => ({
+  shouldIgnoreCopyPaste: vi.fn(() => false)
+}))
+
+const multiChunkPayloadLength = 0x8000 * 6 + 123
+
+function copySerializedData(serializedData: string): DataTransfer {
+  copyMocks.canvas.copyToClipboard.mockReturnValue(serializedData)
+
+  useCopy()
+
+  const dataTransfer = new DataTransfer()
+  const event = new ClipboardEvent('copy', {
+    clipboardData: dataTransfer
+  })
+  const copyHandler = copyMocks.copyHandler
+  expect(copyHandler).toBeDefined()
+  if (!copyHandler) throw new Error('Expected copy handler to be registered')
+
+  expect(() => copyHandler(event)).not.toThrow()
+
+  return dataTransfer
 }

-/**
- * Decodes base64 to UTF-8 string (same logic as usePaste.ts)
- */
-function decodeClipboardData(base64: string): string {
-  const binaryString = atob(base64)
-  const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0))
+function readSerializedClipboardMetadata(dataTransfer: DataTransfer): string {
+  const match = dataTransfer
+    .getData('text/html')
+    .match(/data-metadata="([A-Za-z0-9+/=]+)"/)?.[1]
+  expect(match).toBeDefined()
+  if (!match) throw new Error('Expected clipboard metadata to be written')
+
+  const binaryString = atob(match)
+  const bytes = Uint8Array.from(binaryString, (char) => char.charCodeAt(0))
  return new TextDecoder().decode(bytes)
 }

-describe('Clipboard UTF-8 base64 encoding/decoding', () => {
-  it('should handle ASCII-only strings', () => {
-    const original = '{"nodes":[{"id":1,"type":"LoadImage"}]}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
+describe('useCopy', () => {
+  beforeEach(() => {
+    copyMocks.copyHandler = undefined
+    copyMocks.canvas.copyToClipboard.mockReset()
  })

-  it('should handle Chinese characters in localized_name', () => {
-    const original =
-      '{"nodes":[{"id":1,"type":"LoadImage","localized_name":"图像"}]}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle Japanese characters', () => {
-    const original = '{"localized_name":"画像を読み込む"}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle Korean characters', () => {
-    const original = '{"localized_name":"이미지 불러오기"}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle mixed ASCII and Unicode characters', () => {
-    const original =
-      '{"nodes":[{"id":1,"type":"LoadImage","localized_name":"加载图像","label":"Load Image 图片"}]}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle emoji characters', () => {
-    const original = '{"title":"Test Node 🎨🖼️"}'
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle empty string', () => {
-    const original = ''
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-  })
-
-  it('should handle complex node data with multiple Unicode fields', () => {
-    const original = JSON.stringify({
+  it('should write large serialized node data to clipboard metadata', () => {
+    const serializedData = JSON.stringify({
      nodes: [
        {
          id: 1,
-          type: 'LoadImage',
-          localized_name: '图像',
-          inputs: [{ localized_name: '图片', name: 'image' }],
-          outputs: [{ localized_name: '输出', name: 'output' }]
+          type: 'Subgraph',
+          title: 'Large Subgraph',
+          localized_name: '이미지 그룹 图像 🎨',
+          payload: 'x'.repeat(multiChunkPayloadLength)
        }
      ],
      groups: [{ title: '预处理组 🔧' }],
-      links: []
+      reroutes: [],
+      links: [],
+      subgraphs: []
    })
-    const encoded = encodeClipboardData(original)
-    const decoded = decodeClipboardData(encoded)
-    expect(decoded).toBe(original)
-    expect(JSON.parse(decoded)).toEqual(JSON.parse(original))
-  })

-  it('should produce valid base64 output', () => {
-    const original = '{"localized_name":"中文测试"}'
-    const encoded = encodeClipboardData(original)
-    // Base64 should only contain valid characters
-    expect(encoded).toMatch(/^[A-Za-z0-9+/=]+$/)
-  })
+    const dataTransfer = copySerializedData(serializedData)

-  it('should fail with plain btoa for non-Latin1 characters', () => {
-    const original = '{"localized_name":"图像"}'
-    // This demonstrates why we need TextEncoder - plain btoa fails
-    expect(() => btoa(original)).toThrow()
+    expect(readSerializedClipboardMetadata(dataTransfer)).toBe(serializedData)
  })
 })
--- a/src/composables/useCopy.ts
+++ b/src/composables/useCopy.ts
@@ -7,6 +7,29 @@ const clipboardHTMLWrapper = [
  '<meta charset="utf-8"><div><span data-metadata="',
  '"></span></div><span style="white-space:pre-wrap;">Text</span>'
 ]
+const clipboardByteChunkSize = 0x8000
+
+function bytesToBinaryString(bytes: Uint8Array): string {
+  const chunks: string[] = []
+
+  for (
+    let offset = 0;
+    offset < bytes.length;
+    offset += clipboardByteChunkSize
+  ) {
+    chunks.push(
+      String.fromCharCode(
+        ...bytes.subarray(offset, offset + clipboardByteChunkSize)
+      )
+    )
+  }
+
+  return chunks.join('')
+}
+
+function encodeClipboardData(data: string): string {
+  return btoa(bytesToBinaryString(new TextEncoder().encode(data)))
+}

 /**
 * Adds a handler on copy that serializes selected nodes to JSON
@@ -23,17 +46,16 @@ export const useCopy = () => {
    const canvas = canvasStore.canvas
    if (canvas?.selectedItems) {
      const serializedData = canvas.copyToClipboard()
-      // Use TextEncoder to handle Unicode characters properly
-      const base64Data = btoa(
-        String.fromCharCode(
-          ...Array.from(new TextEncoder().encode(serializedData))
+      try {
+        const base64Data = encodeClipboardData(serializedData)
+        // clearData doesn't remove images from clipboard
+        e.clipboardData?.setData(
+          'text/html',
+          clipboardHTMLWrapper.join(base64Data)
        )
-      )
-      // clearData doesn't remove images from clipboard
-      e.clipboardData?.setData(
-        'text/html',
-        clipboardHTMLWrapper.join(base64Data)
-      )
+      } catch (error) {
+        console.error(error)
+      }
      e.preventDefault()
      e.stopImmediatePropagation()
      return false
--- a/src/extensions/core/load3dLazy.test.ts
+++ b/src/extensions/core/load3dLazy.test.ts
@@ -119,6 +119,23 @@ describe('load3dLazy', () => {
    expect(spec.upload_subfolder).toBe('3d')
  })

+  it('injects mesh_upload spec flags into the model_file widget for Load3DAdvanced nodes', async () => {
+    const { hook } = await loadLazyExtensionFresh()
+    const nodeData = makeNodeDef('Load3DAdvanced', {
+      input: {
+        required: { model_file: ['STRING', {}] }
+      }
+    } as Partial<ComfyNodeDef>)
+
+    await hook({} as typeof LGraphNode, nodeData)
+
+    const spec = (
+      nodeData.input!.required!.model_file as [string, Record<string, unknown>]
+    )[1]
+    expect(spec.mesh_upload).toBe(true)
+    expect(spec.upload_subfolder).toBe('3d')
+  })
+
  it('does not throw when a Load3D node has no model_file widget spec', async () => {
    const { hook } = await loadLazyExtensionFresh()
    const nodeData = makeNodeDef('Load3D', {
--- a/src/extensions/core/load3dLazy.ts
+++ b/src/extensions/core/load3dLazy.ts
@@ -61,18 +61,12 @@ useExtensionService().registerExtension({
    if (isLoad3dNode(nodeData.name)) {
      // Inject mesh_upload spec flags so WidgetSelect.vue can detect
      // Load3D's model_file as a mesh upload widget without hardcoding.
-      if (nodeData.name === 'Load3D') {
+      if (nodeData.name === 'Load3D' || nodeData.name === 'Load3DAdvanced') {
        const modelFile = nodeData.input?.required?.model_file
        if (modelFile?.[1]) {
          modelFile[1].mesh_upload = true
          modelFile[1].upload_subfolder = '3d'
        }
-      } else if (nodeData.name === 'Load3DAdvanced') {
-        const modelFile = nodeData.input?.required?.model_file
-        if (modelFile?.[1]) {
-          modelFile[1].mesh_upload = true
-          modelFile[1].upload_subfolder = ''
-        }
      }

      // Load the 3D extensions and replay their beforeRegisterNodeDef hooks,
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3627,6 +3627,10 @@
    "hideAdvancedShort": "Hide advanced",
    "errors": "Errors",
    "noErrors": "No errors",
+    "errorsDetected": "Error detected | Errors detected",
+    "resolveBeforeRun": "Resolve before running the workflow",
+    "expand": "Expand",
+    "collapse": "Collapse",
    "executionErrorOccurred": "An error occurred during execution. Check the Errors tab for details.",
    "errorLog": "Error log",
    "findOnGithubTooltip": "Search GitHub issues for related problems",
--- a/src/platform/cloud/subscription/components/CreditSlider.vue
+++ b/src/platform/cloud/subscription/components/CreditSlider.vue
@@ -143,7 +143,7 @@ const { t } = useI18n()
      <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
        <span class="flex shrink-0 items-baseline gap-1.5 whitespace-nowrap">
          <span
-            class="text-[2rem] leading-none font-semibold text-base-foreground"
+            class="text-[2rem]/none font-semibold text-base-foreground"
            data-testid="credit-slider-price"
          >
            {{ formatUsd(displayMonthly) }}
--- a/src/platform/errorCatalog/errorMessageResolver.test.ts
+++ b/src/platform/errorCatalog/errorMessageResolver.test.ts
@@ -1394,7 +1394,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'missing_node',
-      displayTitle: 'Missing Node Packs (1)',
+      displayTitle: 'Missing Node Packs',
      displayMessage: 'Install missing packs to use this workflow.',
      toastTitle: 'Missing node: FooNode',
      toastMessage:
@@ -1410,7 +1410,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'missing_node',
-      displayTitle: 'Unsupported Node Packs (1)',
+      displayTitle: 'Unsupported Node Packs',
      displayMessage:
        "Required custom nodes aren't supported on Cloud. Replace them with supported nodes.",
      toastTitle: "FooNode isn't available on Cloud",
@@ -1471,7 +1471,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'swap_nodes',
-      displayTitle: 'Swap Nodes (1)',
+      displayTitle: 'Swap Nodes',
      displayMessage: 'Some nodes can be replaced with alternatives',
      toastTitle: 'OldNode can be replaced',
      toastMessage: 'Replace it with NewNode from the error panel.'
@@ -1520,7 +1520,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'missing_model',
-      displayTitle: 'Missing Models (1)',
+      displayTitle: 'Missing Models',
      displayMessage: 'Download a model, or open the node to replace it.',
      toastTitle: 'sdxl.safetensors is missing',
      toastMessage: 'Checkpoint Loader Simple is missing a required model file.'
@@ -1535,7 +1535,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'missing_model',
-      displayTitle: 'Missing Models (1)',
+      displayTitle: 'Missing Models',
      displayMessage: 'Import a model, or open the node to replace it.',
      toastTitle: "sdxl.safetensors isn't available on Cloud",
      toastMessage: "This model isn't supported. Choose a different one."
@@ -1573,7 +1573,7 @@ describe('errorMessageResolver', () => {
      })
    ).toEqual({
      catalogId: 'missing_media',
-      displayTitle: 'Missing Inputs (1)',
+      displayTitle: 'Missing Inputs',
      displayMessage: 'A required media input has no file selected.',
      toastTitle: 'Media input missing',
      toastMessage: 'Load Image is missing a required media file.'
@@ -1707,7 +1707,7 @@ describe('errorMessageResolver', () => {
        isCloud: false
      })
    ).toMatchObject({
-      displayTitle: 'Missing Inputs (2)',
+      displayTitle: 'Missing Inputs',
      toastTitle: 'Missing media inputs',
      toastMessage:
        'Please select the missing media inputs before running this workflow.'
--- a/src/platform/errorCatalog/missingErrorResolver.ts
+++ b/src/platform/errorCatalog/missingErrorResolver.ts
@@ -6,10 +6,6 @@ import { normalizeNodeName, translateCatalogMessage } from './catalogI18n'
 import { countMissingMediaReferences } from '@/platform/missingMedia/missingMediaGrouping'
 import { st } from '@/i18n'

-function formatCountTitle(title: string, count: number): string {
-  return `${title} (${count})`
-}
-
 function formatNodeTypeName(nodeType: string): string | null {
  const trimmed = nodeType.trim()
  if (!trimmed) return null
@@ -344,15 +340,12 @@ export function resolveMissingErrorMessage(
    case 'missing_node':
      return {
        catalogId: 'missing_node',
-        displayTitle: formatCountTitle(
-          source.isCloud
-            ? st(
-                'rightSidePanel.missingNodePacks.unsupportedTitle',
-                'Unsupported Node Packs'
-              )
-            : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
-          source.count
-        ),
+        displayTitle: source.isCloud
+          ? st(
+              'rightSidePanel.missingNodePacks.unsupportedTitle',
+              'Unsupported Node Packs'
+            )
+          : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
        displayMessage: resolveMissingNodeDisplayMessage(source),
        toastTitle: resolveMissingNodeToastTitle(source),
        toastMessage: resolveMissingNodeToastMessage(source)
@@ -360,10 +353,7 @@ export function resolveMissingErrorMessage(
    case 'swap_nodes':
      return {
        catalogId: 'swap_nodes',
-        displayTitle: formatCountTitle(
-          st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
-          source.count
-        ),
+        displayTitle: st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
        displayMessage: resolveSwapNodeDisplayMessage(),
        toastTitle: resolveSwapNodeToastTitle(source),
        toastMessage: resolveSwapNodeToastMessage(source)
@@ -371,12 +361,9 @@ export function resolveMissingErrorMessage(
    case 'missing_model':
      return {
        catalogId: 'missing_model',
-        displayTitle: formatCountTitle(
-          st(
-            'rightSidePanel.missingModels.missingModelsTitle',
-            'Missing Models'
-          ),
-          source.count
+        displayTitle: st(
+          'rightSidePanel.missingModels.missingModelsTitle',
+          'Missing Models'
        ),
        displayMessage: resolveMissingModelDisplayMessage(source),
        toastTitle: resolveMissingModelToastTitle(source),
@@ -385,9 +372,9 @@ export function resolveMissingErrorMessage(
    case 'missing_media':
      return {
        catalogId: 'missing_media',
-        displayTitle: formatCountTitle(
-          st('rightSidePanel.missingMedia.missingMediaTitle', 'Missing Inputs'),
-          source.count
+        displayTitle: st(
+          'rightSidePanel.missingMedia.missingMediaTitle',
+          'Missing Inputs'
        ),
        displayMessage: resolveMissingMediaDisplayMessage(),
        toastTitle: resolveMissingMediaToastTitle(source),
--- a/src/platform/missingMedia/components/MissingMediaCard.vue
+++ b/src/platform/missingMedia/components/MissingMediaCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4 pb-2">
+  <div class="px-3">
    <TransitionGroup
      tag="ul"
      name="list-scale"
@@ -15,7 +15,7 @@
          <span class="flex min-w-0 flex-1">
            <button
              type="button"
-              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm 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-1 focus-visible:outline-none"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
              @click="emit('locateNode', item.nodeId)"
            >
              {{ item.displayItemLabel }}
@@ -25,7 +25,7 @@
            data-testid="missing-media-locate-button"
            variant="textonly"
            size="icon-sm"
-            class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+            class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
            :aria-label="
              t('rightSidePanel.locateNodeFor', {
                item: item.displayItemLabel
--- a/src/platform/missingModel/components/MissingModelCard.vue
+++ b/src/platform/missingModel/components/MissingModelCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="px-4 pb-2">
+  <div class="px-3">
    <div
      v-if="importableModelRows.length > 0"
      data-testid="missing-model-importable-rows"
-      class="flex flex-col gap-1 overflow-hidden py-2"
+      class="flex flex-col gap-1 overflow-hidden"
    >
      <MissingModelRow
        v-for="row in importableModelRows"
@@ -19,7 +19,7 @@
    <div
      v-if="unsupportedModelRows.length > 0"
      data-testid="missing-model-import-not-supported-section"
-      class="flex flex-col gap-1 border-t border-interface-stroke pt-3"
+      class="flex flex-col gap-1 border-t border-secondary-background pt-3"
    >
      <div class="mb-1">
        <p class="m-0 text-sm font-semibold text-warning-background">
@@ -49,7 +49,7 @@
        data-testid="missing-model-download-all"
        variant="secondary"
        size="sm"
-        class="h-8 min-w-0 flex-1 rounded-lg text-sm"
+        class="h-8 min-w-0 flex-1 rounded-md text-xs"
        @click="downloadAllModels"
      >
        <i aria-hidden="true" class="icon-[lucide--download] size-4 shrink-0" />
--- a/src/platform/missingModel/components/MissingModelRow.vue
+++ b/src/platform/missingModel/components/MissingModelRow.vue
@@ -12,27 +12,27 @@
            : t('rightSidePanel.missingModels.expandNodes')
        "
        :aria-expanded="expanded"
-        :class="
-          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
-          )
-        "
+        class="h-8 w-4 shrink-0 p-0 hover:bg-transparent focus-visible:ring-inset"
        @click="handleToggleExpand"
      >
        <i
          aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          :class="
+            cn(
+              'icon-[lucide--chevron-right] size-4 text-muted-foreground transition-transform duration-200',
+              expanded && 'rotate-90'
+            )
+          "
        />
      </Button>

      <span class="flex min-w-0 flex-1 flex-col gap-0">
-        <span class="block min-w-0 text-sm/tight">
+        <span class="flex min-w-0 items-center gap-1 text-xs/tight">
          <button
            v-if="hasModelLabelControl"
            ref="modelLabelControl"
            type="button"
-            class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
+            class="focus-visible:ring-ring m-0 min-w-0 cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
            :title="displayModelName"
            @click="handleModelLabelClick"
          >
@@ -40,7 +40,7 @@
          </button>
          <span
            v-else
-            class="font-normal wrap-break-word text-base-foreground"
+            class="min-w-0 font-normal wrap-break-word text-base-foreground"
            :title="displayModelName"
          >
            {{ displayModelName }}
@@ -48,14 +48,14 @@
          <span
            v-if="hasMultipleReferences"
            data-testid="missing-model-reference-count"
-            class="ml-2 inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected align-middle text-xs font-bold text-muted-foreground"
+            class="inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-sm bg-secondary-background-hover px-1 text-2xs font-semibold text-base-foreground"
          >
            {{ model.referencingNodes.length }}
          </span>
          <Button
            variant="textonly"
            size="icon-sm"
-            class="ml-2 inline-flex size-7 shrink-0 align-middle text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            class="size-6 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
            :aria-label="linkLabel"
            :title="linkLabel"
            @click="copyModelLink"
@@ -82,7 +82,7 @@
          data-testid="missing-model-import"
          variant="secondary"
          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
          @click="showUploadDialog"
        >
          {{ t('g.import') }}
@@ -123,7 +123,7 @@
          data-testid="missing-model-download"
          variant="secondary"
          size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
          :aria-label="`${t('g.download')} ${model.name}`"
          @click="handleDownload"
        >
@@ -137,7 +137,7 @@
        variant="textonly"
        size="icon-sm"
        :aria-label="t('rightSidePanel.missingModels.locateNode')"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
        @click="handleLocatePrimary"
      >
        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
@@ -149,7 +149,7 @@
        v-if="showReferenceList"
        :class="
          cn(
-            'm-0 list-none space-y-0.5 p-0',
+            'm-0 list-none p-0',
            (hasMultipleReferences || isUnknownCategory) && 'pl-5'
          )
        "
@@ -159,10 +159,10 @@
          :key="`${String(ref.nodeId)}::${ref.widgetName}`"
          class="min-w-0"
        >
-          <div class="flex min-h-6 min-w-0 items-center gap-2">
+          <div class="flex min-h-8 min-w-0 items-center gap-2">
            <button
              type="button"
-              class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/tight 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"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/tight font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
              @click="emit('locateModel', String(ref.nodeId))"
            >
              {{
@@ -174,7 +174,7 @@
              variant="textonly"
              size="icon-sm"
              :aria-label="t('rightSidePanel.missingModels.locateNode')"
-              class="ml-auto size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
+              class="ml-auto size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
              @click="emit('locateModel', String(ref.nodeId))"
            >
              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
@@ -3,21 +3,26 @@
    <div class="flex min-h-8 w-full items-center gap-1">
      <Button
        v-if="hasMultipleNodeTypes"
+        data-testid="swap-node-group-expand"
        variant="textonly"
        size="unset"
-        :class="
-          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
-          )
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingNodePacks.collapse', 'Collapse')
+            : t('rightSidePanel.missingNodePacks.expand', 'Expand')
        "
-        aria-hidden="true"
-        tabindex="-1"
+        :aria-expanded="expanded"
+        class="h-8 w-4 shrink-0 p-0 hover:bg-transparent focus-visible:ring-inset"
        @click="toggleExpand"
      >
        <i
          aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          :class="
+            cn(
+              'icon-[lucide--chevron-right] size-4 text-muted-foreground transition-transform duration-200',
+              expanded && 'rotate-90'
+            )
+          "
        />
      </Button>

@@ -27,7 +32,7 @@
            <button
              v-if="hasMultipleNodeTypes"
              type="button"
-              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-1 focus-visible:outline-none"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
              :title="group.type"
              :aria-label="titleToggleAriaLabel"
              :aria-expanded="expanded"
@@ -38,7 +43,7 @@
            <button
              v-else-if="primaryLocatableNodeType"
              type="button"
-              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-1 focus-visible:outline-none"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
              :title="group.type"
              @click="handleLocateNode(primaryLocatableNodeType)"
            >
@@ -46,7 +51,7 @@
            </button>
            <span
              v-else
-              class="min-w-0 truncate text-sm/relaxed font-normal text-base-foreground"
+              class="min-w-0 truncate text-xs/relaxed font-normal text-base-foreground"
              :title="group.type"
            >
              {{ group.type }}
@@ -55,7 +60,7 @@
              v-if="hasMultipleNodeTypes"
              data-testid="swap-node-group-count"
              role="img"
-              class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+              class="flex h-4 min-w-4 shrink-0 items-center justify-center rounded-sm bg-secondary-background-hover px-1 text-2xs font-semibold text-base-foreground"
              :aria-label="t('g.nodesCount', group.nodeTypes.length)"
            >
              {{ group.nodeTypes.length }}
@@ -80,7 +85,7 @@
      <Button
        variant="secondary"
        size="sm"
-        class="h-8 shrink-0 rounded-lg text-sm"
+        class="shrink-0 focus-visible:ring-inset"
        @click="handleReplaceNode"
      >
        <i
@@ -96,7 +101,7 @@
        v-if="primaryLocatableNodeType"
        variant="textonly"
        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
        :aria-label="locateNodeLabel"
        @click="handleLocateNode(primaryLocatableNodeType)"
      >
@@ -116,14 +121,14 @@
              <button
                v-if="isLocatableNodeType(nodeType)"
                type="button"
-                class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm 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-1 focus-visible:outline-none"
+                class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
                @click="handleLocateNode(nodeType)"
              >
                {{ getLabel(nodeType) }}
              </button>
              <span
                v-else
-                class="text-sm/relaxed wrap-break-word text-muted-foreground"
+                class="text-xs/relaxed wrap-break-word text-muted-foreground"
              >
                {{ getLabel(nodeType) }}
              </span>
@@ -132,7 +137,7 @@
              v-if="isLocatableNodeType(nodeType)"
              variant="textonly"
              size="icon-sm"
-              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
              :aria-label="locateNodeLabel"
              @click="handleLocateNode(nodeType)"
            >
--- a/src/platform/nodeReplacement/components/SwapNodesCard.vue
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2 px-4 pb-2">
+  <div class="px-3">
    <SwapNodeGroupRow
      v-for="group in swapNodeGroups"
      :key="group.type"
--- a/src/platform/settings/components/SettingDialog.vue
+++ b/src/platform/settings/components/SettingDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog" size="sm">
+  <BaseModalLayout content-title="" data-testid="settings-dialog" size="full">
    <template #leftPanelHeaderTitle>
      <i class="icon-[lucide--settings]" />
      <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
--- a/src/platform/settings/composables/useSettingsDialog.test.ts
+++ b/src/platform/settings/composables/useSettingsDialog.test.ts
@@ -53,13 +53,16 @@ describe('useSettingsDialog', () => {
    isCloudRef.value = false
  })

-  it("show() opens the Reka renderer with size 'full' and 960px content sizing", () => {
+  it("show() opens the Reka renderer with size 'full' and 1280px content sizing", () => {
    useSettingsDialog().show()
    const [args] = showDialog.mock.calls[0]
    expect(args.key).toBe('global-settings')
    expect(args.dialogComponentProps.renderer).toBe('reka')
    expect(args.dialogComponentProps.size).toBe('full')
-    expect(args.dialogComponentProps.contentClass).toContain('max-w-[960px]')
+    expect(args.dialogComponentProps.contentClass).toContain('max-w-[1280px]')
+    expect(args.dialogComponentProps.contentClass).not.toContain(
+      'max-w-[960px]'
+    )
    expect(args.dialogComponentProps.contentClass).toContain('h-[80vh]')
  })

--- a/src/platform/settings/composables/useSettingsDialog.ts
+++ b/src/platform/settings/composables/useSettingsDialog.ts
@@ -8,8 +8,9 @@ import type { SettingPanelType } from '@/platform/settings/types'

 const DIALOG_KEY = 'global-settings'

+// The redesigned Settings dialog is 1280px wide (DES 3253-16079).
 const SETTINGS_CONTENT_CLASS =
-  'w-[90vw] max-w-[960px] sm:max-w-[960px] h-[80vh] max-h-none rounded-2xl overflow-hidden'
+  'w-[90vw] max-w-[1280px] sm:max-w-[1280px] h-[80vh] max-h-none rounded-2xl overflow-hidden'

 export function useSettingsDialog() {
  const dialogService = useDialogService()
--- a/src/stores/nodeOutputStore.ts
+++ b/src/stores/nodeOutputStore.ts
@@ -1,4 +1,5 @@
 import { useTimeoutFn } from '@vueuse/core'
+import { mapKeys } from 'es-toolkit'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'

@@ -358,8 +359,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
  function restoreOutputs(
    outputs: Record<string, ExecutedWsMessage['output']>
  ) {
-    app.nodeOutputs = outputs
-    nodeOutputs.value = { ...outputs }
+    const parsedOutputs = mapKeys(
+      outputs,
+      (_, id) => executionIdToNodeLocatorId(app.rootGraph, id) ?? id
+    )
+    app.nodeOutputs = parsedOutputs
+    nodeOutputs.value = { ...parsedOutputs }
  }

  function updateNodeImages(node: LGraphNode) {
Author	SHA1	Message	Date
jaeone94	0df2b05790	fix: encode large copy payload metadata in chunks (#12847 ) ## Summary Fix Ctrl+C copy for large subgraphs by encoding clipboard metadata in bounded byte chunks instead of spreading the full serialized payload into a single `String.fromCharCode(...)` call. ## Root Cause <img width="648" height="33" alt="스크린샷 2026-06-15 오후 4 46 52" src="https://github.com/user-attachments/assets/09aec159-fd10-4979-bfb2-51aec9b51a63" /> Ctrl+C uses the native `copy` event path in `useCopy.ts` so ComfyUI can write serialized node metadata into the system clipboard as `text/html`. That metadata supports the cross-app / cross-window copy-paste path. For Unicode safety, the current code first converts the serialized node JSON to UTF-8 bytes with `TextEncoder`, then converts those bytes into a binary string for `btoa`. The bug was in this conversion step: ```ts String.fromCharCode(...Array.from(new TextEncoder().encode(serializedData))) ``` When a selected subgraph is large enough, the UTF-8 byte array becomes too large to spread as function arguments. The browser throws `RangeError: Maximum call stack size exceeded` before clipboard metadata is written, so Ctrl+C appears to fail for large subgraphs. The right-click / menu copy path was not affected in the same way because it uses LiteGraph's internal `copyToClipboard()` path directly and does not go through this system clipboard metadata encoding step. ## Changes - What: Convert UTF-8 bytes to a binary string in `0x8000` byte chunks before passing the result to `btoa`. - Why: This preserves the existing UTF-8 safe cross-app clipboard metadata format while avoiding the JavaScript argument-count limit that caused the stack overflow. - Fallback: Wrap system clipboard metadata encoding/writing in `try/catch` so the internal `canvas.copyToClipboard()` result is still produced even if the metadata bridge fails unexpectedly. - Dependencies: None ## Review Focus - Chunking is only used while building the binary string for base64 encoding. The clipboard payload format remains unchanged. - Multi-byte UTF-8 data remains safe because chunking happens at the byte-string construction layer; paste still reassembles the full byte stream before `TextDecoder` decodes it. - The unit test exercises the actual `useCopy` copy handler with a large serialized payload, Unicode metadata, and a partial final chunk. ## Test Plan - `vitest run src/composables/useCopy.test.ts` - pre-commit hook: `oxfmt`, `oxlint`, `eslint`, `typecheck` - pre-push hook: `pnpm knip` No E2E was added because this regression is isolated to deterministic clipboard metadata encoding in `useCopy`. The unit test exercises the actual `copy` event handler with a large serialized payload and Unicode metadata, avoiding a large workflow fixture and slower browser coverage for behavior that does not require canvas rendering or end-to-end UI orchestration. Linear: [FE-858](https://linear.app/comfyorg/issue/FE-858/bug-ctrlc-copy-keyboard-shortcut-does-not-work-on-large-subgraphs)	2026-06-16 14:12:08 +00:00
jaeone94	c36da042d0	Redesign error tab cards with summary hero and unified sections (#12828 ) ## Summary Redesigns the Errors tab cards to match the new Figma error-panel spec (file `Czv0JcCfcUiizeEZURevpq`): every error group is now wrapped in a single bordered card led by an error-count summary hero, with each category rendered as a collapsible section whose count lives in a circular badge rather than a parenthetical title suffix. > Rebased onto `main` after #12793 was merged. This PR now contains only the error-card redesign slice. ## Changes - What: - New `ErrorCardSection.vue` — the shared section shell used by every error type. Renders a 32px header (circular count badge + neutral title + `actions` slot + collapse chevron) and a `TransitionCollapse` body. Replaces the per-group `PropertiesAccordionItem`, dropping the old octagon-alert icon + red title + `(n)` suffix and the sticky-header behavior. - `TabErrors.vue` — wraps all groups in one `rounded-lg` card bordered with `secondary-background`. Adds a summary hero (large severity-colored total count, vertical divider, "N Errors detected / Resolve before running the workflow"). Moves the per-group action buttons (Install All / Replace All / missing-model Refresh) into the section's `actions` slot. Adds `getGroupCount()` / `totalErrorCount` and switches content background to `interface-panel-surface`. Most of the line count here is re-indentation from the template restructure, not behavior change. - `missingErrorResolver.ts` — drops the `formatCountTitle` helper so display titles are `"Missing Models"` instead of `"Missing Models (4)"`; the badge now carries the count. Toast titles/messages are untouched. - `ErrorNodeCard.vue` — restyles the runtime/validation error-log box to the Figma spec: borderless `base-foreground/5` surface, `ERROR LOG` header, 12px non-mono body at 50% opacity, inset footer divider with Get Help / Find on GitHub links. - Row components (`MissingModelRow`, `MissingPackGroupRow`, `SwapNodeGroupRow`, `MissingMediaCard`, `MissingNodeCard`, `MissingModelCard`) — align spacing, fonts, badges, and button sizes with Figma: 12px row labels, `size="sm"` (24px) action buttons, 16px count badges (`rounded-sm`, `secondary-background-hover`, 9px), 32px reference-row heights, `px-3` card padding. Model-name wrapping is kept independent of its count badge and link button so they never reflow into the metadata sub-label. - i18n — adds `errorsDetected` (pluralized), `resolveBeforeRun`, `expand`, `collapse` to `en/main.json`. - Breaking: None. No store, composable, action, or data-flow changes — all handlers and emitted events are preserved. The only user-visible copy change is the removal of the `(n)` count suffix from section titles. ## Review Focus - Title copy change: `"Missing Models (4)"` → `"Missing Models"`. Search-filter matching against the old `(n)` string no longer applies, but the count is shown by the badge and the hero total. - Sticky header removed: section headers no longer pin to the top on scroll (intentional per the new design). - Collapse click target: the old single-button header (which nested action buttons inside a `<button>` — invalid HTML) is split into a separate title button and chevron button. Behavior is unchanged and accessibility improves; the empty space beside an action button no longer toggles collapse. - All semantic colors map to existing design-system tokens (no `dark:` variants, no hardcoded hex). Verified the artifact hex values match the tokens (e.g. `#262729` = `secondary-background`, `#e04e48` = `destructive-background-hover`, `#171718` = `interface-panel-surface`). ## Follow-up This PR intentionally keeps the error-count ownership cleanup out of the current diff so the card redesign remains reviewable. A follow-up PR will centralize error counting around a single source of truth so the Errors tab summary hero, section badges, and any overlay surfaces cannot drift from one another. That follow-up will also address the current count mismatch in the ErrorOverlay and continue the ErrorOverlay redesign there, instead of expanding this PR after review. ## Screenshots (if applicable) After <img width="603" height="703" alt="스크린샷 2026-06-13 오후 1 00 02" src="https://github.com/user-attachments/assets/065d7c19-9748-4e99-9b43-675a31e92949" /> <img width="601" height="197" alt="스크린샷 2026-06-13 오후 1 01 07" src="https://github.com/user-attachments/assets/0fa1fbda-9091-4a45-9eca-e99c43089c0e" /> <img width="617" height="612" alt="스크린샷 2026-06-13 오후 1 02 43" src="https://github.com/user-attachments/assets/3d67a057-bf65-4e51-bcf5-70ecce851826" /> <img width="495" height="723" alt="스크린샷 2026-06-13 오후 1 03 28" src="https://github.com/user-attachments/assets/6dcc4021-0fc3-4955-a68b-c0533c66a3cf" /> --------- Co-authored-by: GitHub Action <action@github.com>	2026-06-16 13:32:10 +00:00
Dante	75553fc214	fix(settings): widen the Settings dialog to 1280 (#12849 ) ## Summary The redesigned Settings dialog (Figma DES `3253-16079`) is 1280px wide, but it rendered at 960px. Root cause — the width was capped at 960 in two layers: 1. `useSettingsDialog.ts` → `SETTINGS_CONTENT_CLASS` (`max-w-[960px]`) sizes the Reka dialog shell. 2. `SettingDialog.vue` → `<BaseModalLayout size="sm">` (`SIZE_CLASSES.sm = max-w-[960px]`) sizes the modal content. Widening only the shell leaves the inner `BaseModalLayout` at 960 (empty space on the right). This sets both to 1280px and lets `BaseModalLayout` fill the shell (`size="full"`). The dialog size is not a workspace-specific concern, so it applies to all Settings (OSS + cloud) — no feature-flag gate. Found during FE-768 designer QA. ## Verification - Live: dialog measures 1280px, content area 1006px (was 960 / 688). - `useSettingsDialog.test.ts`: `contentClass` is 1280px (`size: 'full'`). - `pnpm typecheck` / `lint` / `format` / unit tests green. ## Test Plan - [x] Settings dialog renders at 1280px with the content filling the dialog - [x] Unit test asserts the 1280px sizing ## Screenshots Settings ▸ Plan & Credits at 1280px (content fills the dialog; was 960px shell / 688px content area): Personal — Pro: <img width="720" alt="Settings dialog at 1280px — personal Pro" src="https://github.com/user-attachments/assets/adc2fd9f-d249-469f-b947-1ec8f674cbb0" /> Team: <img width="720" alt="Settings dialog at 1280px — team" src="https://github.com/user-attachments/assets/e7378067-11a2-411b-b37b-98c8aecb82b1" /> --------- Co-authored-by: github-actions <github-actions@github.com>	2026-06-16 13:03:02 +00:00
Alexander Brown	7438f004c1	test: add mask editor load/save round-trip browser tests (#11369 ) PR Created by the Glary-Bot Agent --- ## Summary Adds `browser_tests/tests/maskEditorLoadSave.spec.ts` covering the untested image loading, save round-trip, canvas dimension verification, and error handling paths in the mask editor. ### Coverage gaps filled - `useImageLoader.ts` — image loads onto canvas with correct dimensions - `useMaskEditorSaver.ts` — save uploads non-empty mask data, round-trip preserves state - `useMaskEditorLoader.ts` — editor initialization, canvas dimension matching - Error handling — partial upload failure keeps dialog open ### Test cases (5 tests, 2 groups) \| Group \| Tests \| Behavior \| \|---\|---\|---\| \| Save round-trip \| 3 \| Save with drawn mask uploads non-empty data, save-and-reopen preserves mask state, canvas dimensions match loaded image \| \| Load and error handling \| 2 \| Opening editor loads image onto canvas, partial upload failure keeps dialog open \| ### References - Reuses patterns from existing `maskEditor.spec.ts` (`loadImageOnNode`, `openMaskEditorDialog`, `getMaskCanvasPixelData`, `drawStrokeOnPointerZone`, route mocking for upload endpoints) - Follows `browser_tests/AGENTS.md` directory structure - Follows `browser_tests/FLAKE_PREVENTION_RULES.md` assertion patterns ### Verification - TypeScript: clean - ESLint: clean - oxlint: clean - oxfmt: formatted ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11369-test-add-mask-editor-load-save-round-trip-browser-tests-3466d73d3650818b8245c0b355011136) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: bymyself <cbyrne@comfy.org>	2026-06-16 01:41:18 +00:00
Terry Jia	06dda1fb38	feat: Load3DAdvanced uploads to input/3d (#12851 ) ## Summary As discussed with team, we should keep upload folder as /input/3d folder in new Load 3D node	2026-06-15 21:44:27 -04:00
AustinMroz	cdde1248d4	Resolve errant executionIds on workflow restore (#12659 ) Node previews are stored by `locatorId`, but sent from the server by `executionId`. Normally, this difference is reconciled when the event is received, but this step is skipped when the workflow is backgrounded. Upon reloading the workflow, these backlogged `executionId`s were incorrectly mapped directly onto node outputs. Any outputs located inside a subgraph would then fail to display because `executionId`s are now `locatorId`s. This is solved by resolving any `executionId`s at time of output restoration. Because `executionId`s can only leak into the outputs of backgrounded workflows, it is safe for resolved `executionId`s to overwrite any pre-existing `locatorId`s. It might wind up cleaner to instead properly enforce that the nodeOutputs cached by change tracker resolve a `locatorId` at time of receipt. This would follow naturally for properly branded id types, but would then require resolving `locatorId` from suspended workflows which is a good bit more involved.	2026-06-15 21:29:07 +00:00