[automated] Apply ESLint and Oxfmt fixes

.github/workflows/pr-report.yaml

@@ -5,8 +5,6 @@ on:
     workflows: ['CI: Size Data', 'CI: Performance Report', 'CI: E2E Coverage']
     types:
       - completed
-    branches-ignore:
-      - main
 
 permissions:
   contents: read

apps/website/src/components/common/Badge.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { BadgeVariants } from './badge.variants'
-import { badgeVariants } from './badge.variants'
-
-const { variant, class: className } = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: string
-}>()
-</script>
-
-<template>
-  <span :class="cn(badgeVariants({ variant }), className)">
-    <slot />
-  </span>
-</template>

apps/website/src/components/common/CallToActionSection.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { Locale, TranslationKey } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import BrandButton from './BrandButton.vue'
-
-const {
-  locale = 'en',
-  headingKey,
-  primaryLabelKey,
-  primaryHref,
-  secondaryLabelKey,
-  secondaryHref
-} = defineProps<{
-  locale?: Locale
-  headingKey: TranslationKey
-  primaryLabelKey: TranslationKey
-  primaryHref?: string
-  secondaryLabelKey?: TranslationKey
-  secondaryHref?: string
-}>()
-</script>
-
-<template>
-  <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
-    <div class="flex flex-col items-center text-center">
-      <h2
-        class="text-primary-comfy-canvas max-w-5xl text-3xl font-light tracking-tight lg:text-5xl"
-      >
-        {{ t(headingKey, locale) }}
-      </h2>
-      <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
-        <BrandButton
-          :href="primaryHref"
-          variant="solid"
-          size="xs"
-          class="uppercase"
-        >
-          {{ t(primaryLabelKey, locale) }}
-        </BrandButton>
-        <BrandButton
-          v-if="secondaryLabelKey"
-          :href="secondaryHref"
-          variant="outline"
-          size="xs"
-          class="uppercase"
-        >
-          {{ t(secondaryLabelKey, locale) }}
-        </BrandButton>
-      </div>
-    </div>
-  </section>
-</template>

apps/website/src/components/common/EventsSection.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type {
-  Locale,
-  LocalizedText,
-  TranslationKey
-} from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import BrandButton from './BrandButton.vue'
-
-export type EventItem = {
-  label: LocalizedText
-  title: LocalizedText
-  cta: LocalizedText
-  href: string
-}
-
-const {
-  locale = 'en',
-  headingKey,
-  descriptionKey,
-  notifyLabelKey,
-  notifyHref,
-  events
-} = defineProps<{
-  locale?: Locale
-  headingKey: TranslationKey
-  descriptionKey: TranslationKey
-  notifyLabelKey: TranslationKey
-  notifyHref?: string
-  events: readonly EventItem[]
-}>()
-</script>
-
-<template>
-  <section class="max-w-9xl mx-auto px-6 py-12">
-    <div
-      class="bg-transparency-white-t4 rounded-4xl px-6 py-12 lg:px-16 lg:py-20"
-    >
-      <div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
-        <div class="flex flex-col gap-8">
-          <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
-          >
-            {{ t(headingKey, locale) }}
-          </h2>
-          <p
-            class="text-primary-comfy-canvas max-w-sm text-sm/relaxed lg:text-base"
-          >
-            {{ t(descriptionKey, locale) }}
-          </p>
-          <div>
-            <BrandButton
-              :href="notifyHref"
-              variant="outline"
-              size="xs"
-              class="uppercase"
-            >
-              {{ t(notifyLabelKey, locale) }}
-            </BrandButton>
-          </div>
-        </div>
-
-        <div class="flex flex-col">
-          <a
-            v-for="(event, i) in events"
-            :key="i"
-            :href="event.href"
-            class="group border-primary-comfy-canvas/15 flex items-center gap-4 border-b py-6 lg:gap-8"
-          >
-            <span
-              class="text-primary-comfy-canvas shrink-0 text-sm font-medium"
-            >
-              {{ event.label[locale] }}
-            </span>
-            <span class="text-primary-warm-gray flex-1 text-sm">
-              {{ event.title[locale] }}
-            </span>
-            <span
-              class="text-primary-comfy-yellow flex shrink-0 items-center gap-2 text-sm"
-            >
-              {{ event.cta[locale] }}
-              <svg
-                class="size-4 transition-transform group-hover:translate-x-0.5"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

apps/website/src/components/common/MaskRevealButton.stories.ts

@@ -1,165 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import MaskRevealButton from './MaskRevealButton.vue'
-
-const meta: Meta<typeof MaskRevealButton> = {
-  title: 'Website/Common/MaskRevealButton',
-  component: MaskRevealButton,
-  tags: ['autodocs'],
-  decorators: [
-    () => ({
-      template: '<div class="bg-primary-comfy-ink p-12"><story /></div>'
-    })
-  ],
-  argTypes: {
-    href: { control: 'text' },
-    target: { control: 'text' },
-    rel: { control: 'text' },
-    type: {
-      control: { type: 'select' },
-      options: ['button', 'submit', 'reset']
-    },
-    disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text' },
-    variant: {
-      control: { type: 'select' },
-      options: ['solid', 'ghost']
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg']
-    },
-    iconPosition: {
-      control: { type: 'select' },
-      options: ['right', 'left']
-    },
-    hideLabel: { control: 'boolean' }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { href: '#' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>`
-  })
-}
-
-export const Ghost: Story = {
-  args: { href: '#', variant: 'ghost' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Read More</MaskRevealButton>'
-  })
-}
-
-export const IconLeft: Story = {
-  args: { href: '#', iconPosition: 'left' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Go Back</MaskRevealButton>'
-  })
-}
-
-export const SmallSolid: Story = {
-  args: { href: '#', size: 'sm' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Try Workflow</MaskRevealButton>'
-  })
-}
-
-export const LargeSolid: Story = {
-  args: { href: '#', size: 'lg' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: `<MaskRevealButton v-bind="args">Let's Collaborate</MaskRevealButton>`
-  })
-}
-
-export const WithCustomIcon: Story = {
-  args: { href: '#' },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: `
-      <MaskRevealButton v-bind="args">
-        Next Step
-        <template #icon>
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <polyline points="9 6 15 12 9 18" />
-          </svg>
-        </template>
-      </MaskRevealButton>
-    `
-  })
-}
-
-export const LabelVisible: Story = {
-  args: { href: '#', hideLabel: false },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template:
-      '<MaskRevealButton v-bind="args">Always Visible</MaskRevealButton>'
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { MaskRevealButton },
-    setup: () => ({ args }),
-    template: '<MaskRevealButton v-bind="args">Unavailable</MaskRevealButton>'
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { MaskRevealButton },
-    template: `
-      <div class="flex flex-col gap-8">
-        <div class="flex flex-col gap-3">
-          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
-          <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" variant="solid" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" variant="solid" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" variant="solid" size="lg">Large</MaskRevealButton>
-          </div>
-        </div>
-        <div class="flex flex-col gap-3">
-          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
-          <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" variant="ghost" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" variant="ghost" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" variant="ghost" size="lg">Large</MaskRevealButton>
-          </div>
-        </div>
-        <div class="flex flex-col gap-3">
-          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Icon Left</span>
-          <div class="flex flex-wrap items-center gap-4">
-            <MaskRevealButton href="#" iconPosition="left" size="sm">Small</MaskRevealButton>
-            <MaskRevealButton href="#" iconPosition="left" size="md">Medium</MaskRevealButton>
-            <MaskRevealButton href="#" iconPosition="left" size="lg">Large</MaskRevealButton>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}

apps/website/src/components/common/MaskRevealButton.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { HTMLAttributes } from 'vue'
-
-import type { MaskRevealButtonVariants } from './maskRevealButton.variants'
-import {
-  maskRevealButtonBadgeVariants,
-  maskRevealButtonVariants,
-  maskRevealLabelVariants
-} from './maskRevealButton.variants'
-
-const {
-  href,
-  target,
-  rel,
-  type = 'button',
-  disabled,
-  ariaLabel,
-  variant,
-  size,
-  iconPosition,
-  hideLabel = true,
-  class: customClass = ''
-} = defineProps<{
-  href?: string
-  target?: string
-  rel?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  ariaLabel?: string
-  variant?: MaskRevealButtonVariants['variant']
-  size?: MaskRevealButtonVariants['size']
-  iconPosition?: MaskRevealButtonVariants['iconPosition']
-  hideLabel?: boolean
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <component
-    :is="href ? 'a' : 'button'"
-    :href="href || undefined"
-    :target="href ? target : undefined"
-    :rel="href ? rel : undefined"
-    :type="!href ? type : undefined"
-    :disabled="!href ? disabled : undefined"
-    :aria-label="ariaLabel"
-    :class="
-      cn(maskRevealButtonVariants({ variant, size, iconPosition }), customClass)
-    "
-  >
-    <span
-      :data-icon-position="iconPosition ?? 'right'"
-      :data-hidden="hideLabel ? 'true' : 'false'"
-      :class="maskRevealLabelVariants()"
-    >
-      <slot />
-    </span>
-    <span
-      :class="maskRevealButtonBadgeVariants({ variant, size, iconPosition })"
-      aria-hidden="true"
-    >
-      <span class="inline-flex transition-transform duration-500">
-        <slot name="icon">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <path d="M7 17 17 7" />
-            <path d="M7 7h10v10" />
-          </svg>
-        </slot>
-      </span>
-    </span>
-  </component>
-</template>

apps/website/src/components/common/PillButton.stories.ts

@@ -1,165 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import PillButton from './PillButton.vue'
-
-const meta: Meta<typeof PillButton> = {
-  title: 'Website/Common/PillButton',
-  component: PillButton,
-  tags: ['autodocs'],
-  decorators: [
-    () => ({
-      template: '<div class="bg-primary-comfy-ink p-12"><story /></div>'
-    })
-  ],
-  argTypes: {
-    href: { control: 'text' },
-    target: { control: 'text' },
-    rel: { control: 'text' },
-    type: {
-      control: { type: 'select' },
-      options: ['button', 'submit', 'reset']
-    },
-    disabled: { control: 'boolean' },
-    ariaLabel: { control: 'text' },
-    variant: {
-      control: { type: 'select' },
-      options: ['solid', 'ghost']
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg']
-    },
-    iconPosition: {
-      control: { type: 'select' },
-      options: ['right', 'left']
-    },
-    hideLabel: { control: 'boolean' }
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const AsAnchor: Story = {
-  args: { href: '#' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
-  })
-}
-
-export const AsButton: Story = {
-  args: { type: 'button' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Submit</PillButton>'
-  })
-}
-
-export const Ghost: Story = {
-  args: { href: '#', variant: 'ghost' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Read More</PillButton>'
-  })
-}
-
-export const SmallSolid: Story = {
-  args: { href: '#', size: 'sm' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
-  })
-}
-
-export const LargeSolid: Story = {
-  args: { href: '#', size: 'lg' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: `<PillButton v-bind="args">Let's Collaborate</PillButton>`
-  })
-}
-
-export const WithCustomIcon: Story = {
-  args: { href: '#' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: `
-      <PillButton v-bind="args">
-        Next Step
-        <template #icon>
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <polyline points="9 6 15 12 9 18" />
-          </svg>
-        </template>
-      </PillButton>
-    `
-  })
-}
-
-export const IconLeft: Story = {
-  args: { href: '#', iconPosition: 'left' },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Go Back</PillButton>'
-  })
-}
-
-export const RevealLabelOnHover: Story = {
-  args: { href: '#', hideLabel: true },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Try Workflow</PillButton>'
-  })
-}
-
-export const Disabled: Story = {
-  args: { disabled: true },
-  render: (args) => ({
-    components: { PillButton },
-    setup: () => ({ args }),
-    template: '<PillButton v-bind="args">Unavailable</PillButton>'
-  })
-}
-
-export const AllVariants: Story = {
-  render: () => ({
-    components: { PillButton },
-    template: `
-      <div class="flex flex-col gap-8">
-        <div class="flex flex-col gap-3">
-          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Solid</span>
-          <div class="flex flex-wrap items-center gap-4">
-            <PillButton href="#" variant="solid" size="sm">Small</PillButton>
-            <PillButton href="#" variant="solid" size="md">Medium</PillButton>
-            <PillButton href="#" variant="solid" size="lg">Large</PillButton>
-          </div>
-        </div>
-        <div class="flex flex-col gap-3">
-          <span class="text-primary-comfy-canvas text-xs uppercase tracking-wider">Ghost</span>
-          <div class="flex flex-wrap items-center gap-4">
-            <PillButton href="#" variant="ghost" size="sm">Small</PillButton>
-            <PillButton href="#" variant="ghost" size="md">Medium</PillButton>
-            <PillButton href="#" variant="ghost" size="lg">Large</PillButton>
-          </div>
-        </div>
-      </div>
-    `
-  })
-}

apps/website/src/components/common/PillButton.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import type { HTMLAttributes } from 'vue'
-
-import type { PillButtonVariants } from './pillButton.variants'
-import {
-  pillButtonBadgeVariants,
-  pillButtonVariants
-} from './pillButton.variants'
-
-const {
-  href,
-  target,
-  rel,
-  type = 'button',
-  disabled,
-  ariaLabel,
-  variant,
-  size,
-  iconPosition,
-  hideLabel = false,
-  class: customClass = ''
-} = defineProps<{
-  href?: string
-  target?: string
-  rel?: string
-  type?: 'button' | 'submit' | 'reset'
-  disabled?: boolean
-  ariaLabel?: string
-  variant?: PillButtonVariants['variant']
-  size?: PillButtonVariants['size']
-  iconPosition?: PillButtonVariants['iconPosition']
-  hideLabel?: boolean
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <component
-    :is="href ? 'a' : 'button'"
-    :href="href || undefined"
-    :target="href ? target : undefined"
-    :rel="href ? rel : undefined"
-    :type="!href ? type : undefined"
-    :disabled="!href ? disabled : undefined"
-    :aria-label="ariaLabel"
-    :class="
-      cn(pillButtonVariants({ variant, size, iconPosition }), customClass)
-    "
-  >
-    <span
-      :class="
-        cn(
-          'relative leading-none transition-all duration-500',
-          hideLabel && 'opacity-0 group-hover:opacity-100'
-        )
-      "
-    >
-      <slot />
-    </span>
-    <span
-      :class="pillButtonBadgeVariants({ variant, size, iconPosition })"
-      aria-hidden="true"
-    >
-      <span class="inline-flex transition-transform duration-500">
-        <slot name="icon">
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <path d="M7 17 17 7" />
-            <path d="M7 7h10v10" />
-          </svg>
-        </slot>
-      </span>
-    </span>
-  </component>
-</template>

apps/website/src/components/common/SiteFooter.vue

@@ -43,7 +43,6 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
   {
     title: t('footer.resources', locale),
     links: [
-      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('footer.blog', locale),
         href: externalLinks.blog,

apps/website/src/components/common/SiteNav.vue

@@ -52,7 +52,6 @@ const navLinks: NavLink[] = [
   {
     label: t('nav.resources', locale),
     items: [
-      { label: t('nav.learning', locale), href: routes.learning },
       {
         label: t('nav.blogs', locale),
         href: externalLinks.blog,

apps/website/src/components/common/badge.variants.ts

@@ -1,17 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const badgeVariants = cva({
-  base: 'text-primary-warm-gray focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-4 py-1 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
-  variants: {
-    variant: {
-      default: 'bg-transparency-ink-t80',
-      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas'
-    }
-  },
-  defaultVariants: {
-    variant: 'default'
-  }
-})
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>

apps/website/src/components/common/maskRevealButton.variants.ts

@@ -1,110 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const maskRevealButtonVariants = cva({
-  base: 'group relative uppercase inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
-      ghost: 'text-primary-comfy-yellow bg-transparent'
-    },
-    size: {
-      sm: 'h-10 text-xs',
-      md: 'h-12 text-sm',
-      lg: 'h-14 text-base'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    { size: 'sm', iconPosition: 'right', class: 'ps-12 pe-4' },
-    { size: 'md', iconPosition: 'right', class: 'ps-14 pe-6' },
-    { size: 'lg', iconPosition: 'right', class: 'ps-16 pe-8' },
-    { size: 'sm', iconPosition: 'left', class: 'ps-4 pe-12' },
-    { size: 'md', iconPosition: 'left', class: 'ps-6 pe-14' },
-    { size: 'lg', iconPosition: 'left', class: 'ps-8 pe-16' }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const maskRevealButtonBadgeVariants = cva({
-  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
-      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
-    },
-    size: {
-      sm: 'size-8',
-      md: 'size-10',
-      lg: 'size-12'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-52px)]'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-52px)]'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const maskRevealLabelVariants = cva({
-  base: [
-    'relative inline-block align-baseline',
-    '[will-change:mask-size,-webkit-mask-size]',
-    '[mask-image:linear-gradient(black,black)] [-webkit-mask-image:linear-gradient(black,black)]',
-    'mask-no-repeat [-webkit-mask-repeat:no-repeat]',
-    'transition-[mask-size,-webkit-mask-size] duration-500 ease-in-out',
-    'data-[icon-position=right]:[mask-position:100%_0] data-[icon-position=right]:[-webkit-mask-position:100%_0]',
-    'data-[icon-position=left]:[mask-position:0_0] data-[icon-position=left]:[-webkit-mask-position:0_0]',
-    'data-[hidden=true]:[mask-size:0%_100%] data-[hidden=true]:[-webkit-mask-size:0%_100%]',
-    'data-[hidden=false]:[mask-size:100%_100%] data-[hidden=false]:[-webkit-mask-size:100%_100%]',
-    'group-hover:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-hover:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]',
-    'group-focus-visible:data-[hidden=true]:[mask-size:calc(100%_+_1px)_100%] group-focus-visible:data-[hidden=true]:[-webkit-mask-size:calc(100%_+_1px)_100%]'
-  ].join(' ')
-})
-
-export type MaskRevealButtonVariants = VariantProps<
-  typeof maskRevealButtonVariants
->

apps/website/src/components/common/pillButton.variants.ts

@@ -1,116 +0,0 @@
-import type { VariantProps } from 'cva'
-import { cva } from 'cva'
-
-export const pillButtonVariants = cva({
-  base: 'group relative inline-flex w-fit cursor-pointer items-center overflow-hidden rounded-lg p-1 font-bold text-nowrap transition-all duration-500 disabled:cursor-not-allowed disabled:opacity-50',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-yellow text-primary-comfy-ink',
-      ghost: 'text-primary-comfy-yellow bg-transparent'
-    },
-    size: {
-      sm: 'h-10 text-xs',
-      md: 'h-12 text-sm',
-      lg: 'h-14 text-base'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'ps-4 pe-12 hover:ps-12 hover:pe-4'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'ps-6 pe-14 hover:ps-14 hover:pe-6'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'ps-8 pe-16 hover:ps-16 hover:pe-8'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'ps-12 pe-4 hover:ps-4 hover:pe-12'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'ps-14 pe-6 hover:ps-6 hover:pe-14'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'ps-16 pe-8 hover:ps-8 hover:pe-16'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export const pillButtonBadgeVariants = cva({
-  base: 'absolute z-10 flex items-center justify-center rounded-lg transition-all duration-500',
-  variants: {
-    variant: {
-      solid: 'bg-primary-comfy-ink text-primary-comfy-yellow',
-      ghost: 'bg-primary-comfy-yellow text-primary-comfy-ink'
-    },
-    size: {
-      sm: 'size-8',
-      md: 'size-10',
-      lg: 'size-12'
-    },
-    iconPosition: {
-      right: '',
-      left: ''
-    }
-  },
-  compoundVariants: [
-    {
-      size: 'sm',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'right',
-      class: 'right-1 group-hover:right-[calc(100%-52px)]'
-    },
-    {
-      size: 'sm',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-36px)]'
-    },
-    {
-      size: 'md',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-44px)]'
-    },
-    {
-      size: 'lg',
-      iconPosition: 'left',
-      class: 'left-1 group-hover:left-[calc(100%-52px)]'
-    }
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-    iconPosition: 'right'
-  }
-})
-
-export type PillButtonVariants = VariantProps<typeof pillButtonVariants>

apps/website/src/components/learning/FeaturedWorkflowSection.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
-import BrandButton from '../common/BrandButton.vue'
-import VideoPlayer from '../common/VideoPlayer.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const tags = ['Seadance 2.0', 'Image To Video']
-const demoVideoSrc =
-  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4'
-const demoVideoPoster =
-  'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg'
-</script>
-
-<template>
-  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
-      <div class="flex flex-col gap-8">
-        <div>
-          <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
-          >
-            {{ t('learning.featured.title', locale) }}
-          </h2>
-          <p class="text-primary-warm-gray mt-4 text-sm lg:text-base">
-            {{ t('learning.featured.author', locale) }}
-          </p>
-        </div>
-
-        <p
-          class="text-primary-comfy-canvas max-w-md text-sm/relaxed lg:text-base"
-        >
-          {{ t('learning.featured.description', locale) }}
-        </p>
-
-        <div class="flex flex-wrap gap-3">
-          <BrandButton
-            variant="outline"
-            size="xs"
-            class="uppercase"
-            href="https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/"
-          >
-            {{ t('cta.tryWorkflow', locale) }}
-          </BrandButton>
-        </div>
-
-        <ul class="mt-2 flex flex-wrap gap-3">
-          <li v-for="tag in tags" :key="tag">
-            <Badge variant="subtle">{{ tag }}</Badge>
-          </li>
-        </ul>
-      </div>
-
-      <div class="border-primary-warm-gray rounded-4.5xl border p-4">
-        <VideoPlayer
-          :locale
-          :src="demoVideoSrc"
-          :poster="demoVideoPoster"
-          minimal
-        />
-      </div>
-    </div>
-  </section>
-</template>

apps/website/src/components/learning/HeroSection.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-</script>
-
-<template>
-  <section
-    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-24 pb-12 text-center"
-  >
-    <h1
-      class="text-primary-comfy-canvas max-w-4xl text-3xl leading-[110%] font-light tracking-tight lg:text-5xl"
-    >
-      {{ t('learning.heroTitle.before', locale) }}
-      <span class="text-primary-comfy-yellow">ComfyUI</span
-      >{{ t('learning.heroTitle.after', locale) }}
-      <br />
-      {{ t('learning.heroTitle.line2', locale) }}
-    </h1>
-  </section>
-</template>

apps/website/src/components/learning/TutorialDetailDialog.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
-
-import type { LearningTutorial } from '../../data/learningTutorials'
-import type { Locale } from '../../i18n/translations'
-
-import { lockScroll, unlockScroll } from '../../composables/scrollLock'
-import { t } from '../../i18n/translations'
-
-const { tutorial, locale = 'en' } = defineProps<{
-  tutorial: LearningTutorial
-  locale?: Locale
-}>()
-
-const emit = defineEmits<{ close: [] }>()
-
-const dialogRef = useTemplateRef<HTMLDialogElement>('dialogRef')
-const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
-
-const playFromStart = () => {
-  const video = videoRef.value
-  if (!video) return
-  video.currentTime = 0
-  void video.play().catch(() => {})
-}
-
-watch(
-  () => tutorial.id,
-  () => {
-    playFromStart()
-  }
-)
-
-function handleBackdropClick(e: MouseEvent) {
-  if (e.target === e.currentTarget) emit('close')
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape') emit('close')
-}
-
-onMounted(() => {
-  lockScroll()
-  dialogRef.value?.showModal()
-  playFromStart()
-})
-
-onUnmounted(() => {
-  unlockScroll()
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <dialog
-      ref="dialogRef"
-      :aria-label="tutorial.title[locale]"
-      class="fixed inset-0 z-50 flex size-full max-h-none max-w-none flex-col items-center justify-center border-0 bg-transparent px-4 py-8 backdrop-blur-xl backdrop:bg-transparent lg:px-20 lg:py-8"
-      @click="handleBackdropClick"
-      @keydown="handleKeydown"
-      @close="emit('close')"
-    >
-      <button
-        :aria-label="t('gallery.detail.close', locale)"
-        class="border-primary-comfy-yellow bg-primary-comfy-ink hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 transition-colors lg:right-26"
-        @click="emit('close')"
-      >
-        <span
-          class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors"
-          style="mask: url('/icons/close.svg') center / contain no-repeat"
-        />
-      </button>
-
-      <div
-        class="border-primary-comfy-yellow bg-primary-comfy-ink rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 p-3 lg:p-4"
-      >
-        <video
-          ref="videoRef"
-          :src="tutorial.videoSrc"
-          :poster="tutorial.poster"
-          class="aspect-video w-full rounded-3xl object-contain lg:rounded-4xl"
-          controls
-          autoplay
-          playsinline
-        ></video>
-      </div>
-
-      <h2
-        class="text-primary-comfy-canvas mt-6 text-center text-lg font-medium lg:text-xl"
-      >
-        {{ t('learning.tutorials.titlePrefix', locale) }}
-        {{ tutorial.title[locale] }}
-      </h2>
-    </dialog>
-  </Teleport>
-</template>

apps/website/src/components/learning/TutorialsSection.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-
-import {
-  getTutorialPosterSrc,
-  learningTutorials
-} from '../../data/learningTutorials'
-import { t } from '../../i18n/translations'
-import Badge from '../common/Badge.vue'
-import MaskRevealButton from '../common/MaskRevealButton.vue'
-import TutorialDetailDialog from './TutorialDetailDialog.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const activeTutorialId = ref<string | null>(null)
-const activeTutorial = () =>
-  learningTutorials.find((tutorial) => tutorial.id === activeTutorialId.value)
-</script>
-
-<template>
-  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <h2
-      class="text-primary-comfy-canvas mb-12 text-4xl font-light tracking-tight lg:mb-16 lg:text-6xl"
-    >
-      {{ t('learning.tutorials.heading', locale) }}
-    </h2>
-
-    <ul
-      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
-    >
-      <li
-        v-for="tutorial in learningTutorials"
-        :key="tutorial.id"
-        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
-      >
-        <button
-          type="button"
-          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
-          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
-          @click="activeTutorialId = tutorial.id"
-        >
-          <video
-            :src="getTutorialPosterSrc(tutorial)"
-            :poster="tutorial.poster"
-            class="size-full object-cover"
-            preload="metadata"
-            playsinline
-            muted
-          ></video>
-          <span
-            class="absolute inset-0 flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <span
-              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
-            >
-              <svg
-                class="ml-1 size-5 text-white lg:size-6"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path d="M8 5v14l11-7z" />
-              </svg>
-            </span>
-          </span>
-        </button>
-
-        <div class="flex flex-col space-y-3 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <h3
-              class="text-primary-comfy-canvas text-sm/snug lg:text-base/snug"
-            >
-              {{ t('learning.tutorials.titlePrefix', locale) }}<wbr />
-              {{ tutorial.title[locale] }}
-            </h3>
-            <MaskRevealButton
-              v-if="tutorial.href"
-              :href="tutorial.href"
-              icon-position="right"
-              class="shrink-0"
-              variant="ghost"
-              size="sm"
-            >
-              {{ t('cta.tryWorkflow', locale) }}
-              <template #icon>
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="size-4"
-                >
-                  <polyline points="9 6 15 12 9 18" />
-                </svg>
-              </template>
-            </MaskRevealButton>
-          </div>
-
-          <ul class="flex flex-wrap gap-2">
-            <li v-for="tag in tutorial.tags" :key="tag">
-              <Badge>{{ t(tag, locale) }}</Badge>
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-
-    <TutorialDetailDialog
-      v-if="activeTutorial()"
-      :tutorial="activeTutorial()!"
-      :locale="locale"
-      @close="activeTutorialId = null"
-    />
-  </section>
-</template>

apps/website/src/config/routes.ts

@@ -12,7 +12,6 @@ const baseRoutes = {
   careers: '/careers',
   customers: '/customers',
   demos: '/demos',
-  learning: '/learning',
   termsOfService: '/terms-of-service',
   privacyPolicy: '/privacy-policy',
   affiliates: '/affiliates',

apps/website/src/data/events.ts

@@ -1,31 +0,0 @@
-import type { EventItem } from '../components/common/EventsSection.vue'
-
-export const learningEvents: readonly EventItem[] = [
-  {
-    label: { en: 'Live Stream:', 'zh-CN': '直播：' },
-    title: {
-      en: 'Zero to Node: Building Your First Workflow',
-      'zh-CN': '从零到节点：构建你的第一个工作流'
-    },
-    cta: { en: 'Link', 'zh-CN': '链接' },
-    href: '#'
-  },
-  {
-    label: { en: 'Event 1', 'zh-CN': '活动 1' },
-    title: {
-      en: 'Lorem ipsum dollar sita met',
-      'zh-CN': '此处为活动描述的占位文本'
-    },
-    cta: { en: 'London, UK', 'zh-CN': '英国伦敦' },
-    href: '#'
-  },
-  {
-    label: { en: 'Event 2', 'zh-CN': '活动 2' },
-    title: {
-      en: 'Lorem ipsum dollar sita met',
-      'zh-CN': '此处为活动描述的占位文本'
-    },
-    cta: { en: 'San Francisco', 'zh-CN': '旧金山' },
-    href: '#'
-  }
-] as const

apps/website/src/data/learningTutorials.ts

@@ -1,84 +0,0 @@
-import type { LocalizedText, TranslationKey } from '../i18n/translations'
-
-export interface LearningTutorial {
-  id: string
-  tags: readonly TranslationKey[]
-  title: LocalizedText
-  videoSrc: string
-  href?: string
-  poster?: string
-  posterTime?: number
-}
-
-const DEFAULT_POSTER_TIME_SECONDS = 1
-
-const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
-const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
-
-export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
-  tutorial.poster
-    ? tutorial.poster
-    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
-
-export const learningTutorials: readonly LearningTutorial[] = [
-  {
-    id: 'cleanplate_walkthrough_v03',
-    title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg',
-    // href: '#',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'deaging_workflow_v03',
-    title: { en: 'Deaging Workflow', 'zh-CN': '减龄工作流' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/deaging_workflow_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=93f286fbc2c8',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'frame_adjustments_demo_v03',
-    title: { en: 'Frame Adjustments Demo', 'zh-CN': '帧调整演示' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'mattes_and_utilities_v03',
-    title: { en: 'Mattes and Utilities', 'zh-CN': '遮罩与实用工具' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=be0889296f65',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'seedance_demo_comfyui_v03',
-    title: { en: 'Seedance Demo ComfyUI', 'zh-CN': 'Seedance ComfyUI 演示' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'skyreplacement_smaller_v06',
-    title: { en: 'Sky Replacement', 'zh-CN': '天空替换' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg',
-    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
-    tags: [partnerNodesTag, imageToVideoTag]
-  }
-] as const

apps/website/src/i18n/translations.ts

@@ -1,22 +1,6 @@
 type Locale = 'en' | 'zh-CN'
 
 const translations = {
-  // Tags (global, reusable across sections)
-  'tags.partnerNodes': {
-    en: 'Partner Nodes',
-    'zh-CN': '合作伙伴节点'
-  },
-  'tags.imageToVideo': {
-    en: 'Image To Video',
-    'zh-CN': '图像生成视频'
-  },
-
-  // CTAs (global, reusable across sections)
-  'cta.tryWorkflow': {
-    en: 'Try Workflow',
-    'zh-CN': '试用工作流'
-  },
-
   // HeroSection
   'hero.title': {
     en: 'Professional Control\nof Visual AI',
@@ -1451,62 +1435,6 @@ const translations = {
   'player.subtitlesOn': { en: 'Subtitles on', 'zh-CN': '开启字幕' },
   'player.subtitlesOff': { en: 'Subtitles off', 'zh-CN': '关闭字幕' },
 
-  // LearningHeroSection
-  'learning.heroTitle.before': { en: 'Learn', 'zh-CN': '学习' },
-  'learning.heroTitle.after': { en: '.', 'zh-CN': '。' },
-  'learning.heroTitle.line2': {
-    en: 'Build what doesn’t exist yet.',
-    'zh-CN': '构建尚未存在之物。'
-  },
-
-  // LearningFeaturedWorkflowSection
-  'learning.featured.title': {
-    en: 'Sky Replacement',
-    'zh-CN': '天空替换'
-  },
-  'learning.featured.author': {
-    en: 'by Doug Hogan',
-    'zh-CN': '作者：Doug Hogan'
-  },
-  'learning.featured.description': {
-    en: 'A sky replacement workflow built on Wan AI models. WanVideoSampler and WanVideoDecode synthesize new sky visuals into existing footage. CLIPVisionLoader and WanVideoClipVisionEncode ensure replacements feel native, not composited.',
-    'zh-CN':
-      '基于 Wan AI 模型构建的天空替换工作流。WanVideoSampler 与 WanVideoDecode 将全新的天空视觉合成到现有素材中。CLIPVisionLoader 与 WanVideoClipVisionEncode 确保替换效果自然融合，而非生硬叠加。'
-  },
-  'learning.featured.watchDemo': {
-    en: 'Watch Demo',
-    'zh-CN': '观看演示'
-  },
-
-  // LearningTutorialsSection
-  'learning.tutorials.heading': {
-    en: 'Featured Demos',
-    'zh-CN': '精选演示'
-  },
-  'learning.tutorials.titlePrefix': {
-    en: 'Learn how to:',
-    'zh-CN': '学习如何：'
-  },
-
-  // LearningCallToActionSection
-  'learning.cta.heading': {
-    en: 'Schedule a demo and see how ComfyUI fits your team’s creative needs.',
-    'zh-CN': '预约演示，了解 ComfyUI 如何契合你的团队创作需求。'
-  },
-  'learning.cta.contactSales': {
-    en: 'Contact Sales',
-    'zh-CN': '联系销售'
-  },
-
-  // LearningEventsSection
-  'learning.events.heading': { en: 'Events', 'zh-CN': '活动' },
-  'learning.events.description': {
-    en: 'Check out our upcoming live streams and community meetings. We’re always open to your questions, ideas, and conversations.',
-    'zh-CN':
-      '查看我们即将举办的直播和社区聚会。我们随时欢迎你的提问、想法和交流。'
-  },
-  'learning.events.getNotified': { en: 'Get Notified', 'zh-CN': '获取通知' },
-
   // GalleryHeroSection
   'gallery.label': { en: 'GALLERY', 'zh-CN': '画廊' },
   'gallery.heroTitle.before': {
@@ -1543,13 +1471,9 @@ const translations = {
   },
   'about.hero.body': {
     en: 'The team behind Comfy is small, intense, and building what we intend to be our life\u2019s work.',
-    'zh-CN':
-      'Comfy \u80cc\u540e\u7684\u56e2\u961f\u89c4\u6a21\u867d\u5c0f\uff0c\u4f46\u5145\u6ee1\u70ed\u60c5\uff0c\u81f4\u529b\u4e8e\u6253\u9020\u6211\u4eec\u6bd5\u751f\u7684\u4e8b\u4e1a\u3002'
-  },
-  'about.hero.cta': {
-    en: 'SEE OPEN ROLES',
-    'zh-CN': '\u67e5\u770b\u5f00\u653e\u804c\u4f4d'
+    'zh-CN': 'Comfy 背后的团队规模虽小，但充满热情，致力于打造我们毕生的事业。'
   },
+  'about.hero.cta': { en: 'SEE OPEN ROLES', 'zh-CN': '查看开放职位' },
 
   // AboutStorySection
   'about.story.label': { en: 'OUR STORY', 'zh-CN': '我们的故事' },
@@ -1819,7 +1743,6 @@ const translations = {
   },
   'nav.comfyHub': { en: 'Comfy Hub', 'zh-CN': 'Comfy Hub' },
   'nav.gallery': { en: 'Gallery', 'zh-CN': '画廊' },
-  'nav.learning': { en: 'Learning', 'zh-CN': '学习' },
   'nav.blogs': { en: 'Blog', 'zh-CN': '博客' },
   'nav.github': { en: 'GitHub', 'zh-CN': 'GitHub' },
   'nav.discord': { en: 'Discord', 'zh-CN': 'Discord' },
@@ -4813,8 +4736,6 @@ const translations = {
 
 type TranslationKey = keyof typeof translations
 
-type LocalizedText = Record<Locale, string>
-
 export function t(key: TranslationKey, locale: Locale = 'en'): string {
   return translations[key][locale] ?? translations[key].en
 }
@@ -4825,4 +4746,4 @@ export function hasKey(key: string): boolean {
   return key in translations
 }
 
-export type { Locale, LocalizedText, TranslationKey }
+export type { Locale, TranslationKey }

apps/website/src/pages/learning.astro

@@ -1,27 +0,0 @@
----
-import BaseLayout from '../layouts/BaseLayout.astro'
-import HeroSection from '../components/learning/HeroSection.vue'
-import FeaturedWorkflowSection from '../components/learning/FeaturedWorkflowSection.vue'
-import TutorialsSection from '../components/learning/TutorialsSection.vue'
-import CallToActionSection from '../components/common/CallToActionSection.vue'
-// import EventsSection from '../components/common/EventsSection.vue'
-import { getRoutes } from '../config/routes'
-import { externalLinks } from '../config/routes'
-// import { learningEvents } from '../data/events'
-
-const routes = getRoutes('en')
----
-
-<BaseLayout title="Learning — Comfy">
-  <HeroSection client:load />
-  <FeaturedWorkflowSection client:visible />
-  <TutorialsSection client:visible />
-  <CallToActionSection
-    headingKey="learning.cta.heading"
-    primaryLabelKey="learning.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

apps/website/src/pages/zh-CN/learning.astro

@@ -1,27 +0,0 @@
----
-import BaseLayout from '../../layouts/BaseLayout.astro'
-import HeroSection from '../../components/learning/HeroSection.vue'
-import FeaturedWorkflowSection from '../../components/learning/FeaturedWorkflowSection.vue'
-import TutorialsSection from '../../components/learning/TutorialsSection.vue'
-import CallToActionSection from '../../components/common/CallToActionSection.vue'
-import EventsSection from '../../components/common/EventsSection.vue'
-import { getRoutes, externalLinks } from '../../config/routes'
-import { learningEvents } from '../../data/events'
-
-const routes = getRoutes('zh-CN')
----
-
-<BaseLayout title="学习 — Comfy">
-  <HeroSection locale="zh-CN" client:load />
-  <FeaturedWorkflowSection locale="zh-CN" client:visible />
-  <TutorialsSection locale="zh-CN" client:visible />
-  <CallToActionSection
-    locale="zh-CN"
-    headingKey="learning.cta.heading"
-    primaryLabelKey="learning.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

browser_tests/fixtures/data/assetFixtures.ts

@@ -1,11 +1,10 @@
 import type { Asset } from '@comfyorg/ingest-types'
-function createModelAsset(
-  overrides: Partial<Asset> = {}
-): Asset & { hash?: string } {
+function createModelAsset(overrides: Partial<Asset> = {}): Asset {
   return {
     id: 'test-model-001',
     name: 'model.safetensors',
-    hash: 'blake3:0000000000000000000000000000000000000000000000000000000000000000',
+    asset_hash:
+      'blake3:0000000000000000000000000000000000000000000000000000000000000000',
     size: 2_147_483_648,
     mime_type: 'application/octet-stream',
     tags: ['models', 'checkpoints'],
@@ -17,13 +16,12 @@ function createModelAsset(
   }
 }
 
-function createInputAsset(
-  overrides: Partial<Asset> = {}
-): Asset & { hash?: string } {
+function createInputAsset(overrides: Partial<Asset> = {}): Asset {
   return {
     id: 'test-input-001',
     name: 'input.png',
-    hash: 'blake3:1111111111111111111111111111111111111111111111111111111111111111',
+    asset_hash:
+      'blake3:1111111111111111111111111111111111111111111111111111111111111111',
     size: 2_048_576,
     mime_type: 'image/png',
     tags: ['input'],
@@ -34,13 +32,12 @@ function createInputAsset(
   }
 }
 
-function createOutputAsset(
-  overrides: Partial<Asset> = {}
-): Asset & { hash?: string } {
+function createOutputAsset(overrides: Partial<Asset> = {}): Asset {
   return {
     id: 'test-output-001',
     name: 'output_00001.png',
-    hash: 'blake3:2222222222222222222222222222222222222222222222222222222222222222',
+    asset_hash:
+      'blake3:2222222222222222222222222222222222222222222222222222222222222222',
     size: 4_194_304,
     mime_type: 'image/png',
     tags: ['output'],

browser_tests/fixtures/selectors.ts

@@ -54,7 +54,6 @@ export const TestIds = {
     errorDialogFindIssues: 'error-dialog-find-issues',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section',
-    errorGroupDisplayMessage: 'error-group-display-message',
     missingNodePacksGroup: 'error-group-missing-node',
     missingModelsGroup: 'error-group-missing-model',
     missingModelExpand: 'missing-model-expand',

browser_tests/fixtures/sharedWorkflowImportFixture.ts

@@ -43,10 +43,10 @@ const sharedWorkflowAsset: AssetInfo = {
   in_library: false
 }
 
-const defaultInputAsset: Asset & { hash?: string } = {
+const defaultInputAsset: Asset = {
   id: 'default-input-asset',
   name: defaultInputFileName,
-  hash: defaultInputFileName,
+  asset_hash: defaultInputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],
@@ -55,10 +55,10 @@ const defaultInputAsset: Asset & { hash?: string } = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const importedInputAsset: Asset & { hash?: string } = {
+const importedInputAsset: Asset = {
   id: 'imported-input-asset',
   name: sharedWorkflowImportScenario.inputFileName,
-  hash: sharedWorkflowImportScenario.inputFileName,
+  asset_hash: sharedWorkflowImportScenario.inputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],

browser_tests/fixtures/utils/boundsUtils.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
 import { SELECTION_BOUNDS_PADDING } from '@/base/common/selectionBounds'
 import type { CanvasRect } from '@/base/common/selectionBounds'
@@ -91,21 +91,3 @@ export async function measureSelectionBounds(
     { ids: nodeIds, padding: SELECTION_BOUNDS_PADDING }
   ) as Promise<MeasureResult>
 }
-
-export async function intersection(a: Locator, b: Locator) {
-  const aBounds = await a.boundingBox()
-  const bBounds = await b.boundingBox()
-  if (!aBounds || !bBounds) return undefined
-
-  const y = Math.max(aBounds.y, bBounds.y)
-  const x = Math.max(aBounds.x, bBounds.x)
-  const bot = Math.min(aBounds.y + aBounds.height, bBounds.y + bBounds.height)
-  const right = Math.min(aBounds.x + aBounds.width, bBounds.x + bBounds.width)
-
-  if (y > bot || x > right) return undefined
-
-  const width = right - x
-  const height = bot - y
-
-  return { x, y, width, height }
-}

browser_tests/tests/errorOverlay.spec.ts

@@ -19,24 +19,63 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     return page.getByTestId(TestIds.dialogs.errorOverlay)
   }
 
-  function getDetailsButton(page: Page) {
+  function getSeeErrorsButton(page: Page) {
     return getOverlay(page).getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
   }
 
   test.describe('Labels', () => {
-    test('Should display single error copy and View details action', async ({
+    test('Should display singular error count label for single error', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-      const overlay = getOverlay(comfyPage.page)
-      await expect(overlay).toBeVisible()
-      await expect(overlay).not.toContainText(/1 ERROR/i)
-      await expect(
-        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
-      ).toHaveText(/\S/)
-      await expect(getDetailsButton(comfyPage.page)).toContainText(
-        /View details/i
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getOverlay(comfyPage.page)).toContainText(/1 ERROR/i)
+    })
+
+    test('Should display "Show missing nodes" button for missing node errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing nodes/i
+      )
+    })
+
+    test('Should display "Show missing models" button for missing model errors', async ({
+      comfyPage
+    }) => {
+      await cleanupFakeModel(comfyPage)
+
+      await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing models/i
+      )
+    })
+
+    test('Should display "Show missing inputs" button for missing media errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /Show missing inputs/i
+      )
+    })
+
+    test('Should display generic "See Errors" button for multiple error types', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_and_media')
+
+      await expect(getOverlay(comfyPage.page)).toBeVisible()
+      await expect(getSeeErrorsButton(comfyPage.page)).toContainText(
+        /See Errors/i
       )
     })
   })
@@ -98,7 +137,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     })
   })
 
-  test.describe('View details flow', () => {
+  test.describe('See Errors flow', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setup()
     })
@@ -127,7 +166,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(overlay).toHaveText(/\S/)
     })
 
-    test('"View details" opens right side panel', async ({ comfyPage }) => {
+    test('"See Errors" opens right side panel', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -139,7 +178,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 
-    test('"View details" dismisses the overlay', async ({ comfyPage }) => {
+    test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -190,24 +229,19 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     }) => {
       // Regression: ErrorOverlay previously read the selection-filtered
       // missingModelGroups from useErrorGroups, so selecting one of two
-      // missing-model nodes could shrink the overlay count. The overlay must
-      // show the workflow total regardless of canvas selection.
+      // missing-model nodes would shrink the overlay label from
+      // "2 required models are missing" to "1". The overlay must show
+      // the workflow total regardless of canvas selection.
       await comfyPage.workflow.loadWorkflow('missing/missing_models_distinct')
 
       const overlay = getOverlay(comfyPage.page)
       await expect(overlay).toBeVisible()
-      await expect(overlay).toContainText(/2 errors found/i)
-      await expect(
-        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
-      ).toHaveText(/Resolve them before running the workflow\./i)
+      await expect(overlay).toContainText(/2 required models are missing/i)
 
       const node = await comfyPage.nodeOps.getNodeRefById('1')
       await node.click('title')
 
-      await expect(overlay).toContainText(/2 errors found/i)
-      await expect(
-        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
-      ).toHaveText(/Resolve them before running the workflow\./i)
+      await expect(overlay).toContainText(/2 required models are missing/i)
     })
   })
 })

browser_tests/tests/extensionAPI.spec.ts

@@ -208,7 +208,7 @@ test.describe('Topbar commands', () => {
             type: 'color',
             defaultValue: '#000000'
           },
-          selector: '.color-picker-wrapper > button'
+          selector: '.p-colorpicker-preview'
         }
       ] as const
 
@@ -239,9 +239,8 @@ test.describe('Topbar commands', () => {
           await expect
             .poll(() =>
               component.evaluate((el) =>
-                el instanceof HTMLInputElement ||
-                el instanceof HTMLButtonElement
-                  ? el.disabled
+                el.tagName === 'INPUT'
+                  ? (el as HTMLInputElement).disabled
                   : el.classList.contains('p-disabled')
               )
             )

browser_tests/tests/load3d/load3dSerializeCache.spec.ts

@@ -1,63 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { load3dTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
-
-type Load3dImageInput = {
-  image: string
-  mask: string
-  normal: string
-  recording: string
-}
-
-type PromptBody = {
-  prompt?: Record<
-    string,
-    { class_type?: string; inputs?: Record<string, unknown> }
-  >
-}
-
-function getLoad3dImageInput(body: unknown, nodeId: string): Load3dImageInput {
-  const prompt = (body as PromptBody).prompt ?? {}
-  const node = prompt[nodeId]
-  expect(node?.class_type, `node ${nodeId} should be Load3D`).toBe('Load3D')
-  const input = node!.inputs!.image as Load3dImageInput
-  expect(typeof input.image).toBe('string')
-  expect(typeof input.recording).toBe('string')
-  return input
-}
-
-test.describe('Load3D serialize cache', () => {
-  test('starting a recording forces the next queue to re-capture (FE-905)', async ({
-    comfyPage,
-    load3d
-  }) => {
-    const exec = new ExecutionHelper(comfyPage)
-
-    let firstBody: unknown
-    await exec.run({
-      onPromptRequest: (body) => {
-        firstBody = body
-      }
-    })
-    const firstInput = getLoad3dImageInput(firstBody, '1')
-    expect(firstInput.recording).toBe('')
-
-    await load3d.recordingButton.click()
-    await expect(load3d.stopRecordingButton).toBeVisible()
-
-    let secondBody: unknown
-    await exec.run({
-      onPromptRequest: (body) => {
-        secondBody = body
-      }
-    })
-    const secondInput = getLoad3dImageInput(secondBody, '1')
-
-    expect(
-      secondInput.image,
-      'after starting a recording, the next queue must re-capture ' +
-        '(image filename must change) so the recording is not dropped'
-    ).not.toBe(firstInput.image)
-  })
-})

browser_tests/tests/nodeReplacement.spec.ts

@@ -11,7 +11,6 @@ import {
   getSwapNodesGroup,
   setupNodeReplacement
 } from '@e2e/fixtures/helpers/NodeReplacementHelper'
-import { TestIds } from '@e2e/fixtures/selectors'
 
 const renderModes = [
   { name: 'vue nodes', vueNodesEnabled: true },
@@ -39,9 +38,6 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
         }) => {
           const swapGroup = getSwapNodesGroup(comfyPage.page)
           await expect(swapGroup).toBeVisible()
-          await expect(
-            swapGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-          ).toHaveText(/\S/)
           await expect(swapGroup).toContainText('E2E_OldSampler')
           await expect(
             swapGroup.getByRole('button', { name: 'Replace All', exact: true })

browser_tests/tests/propertiesPanel/errorsTab.spec.ts

@@ -41,7 +41,7 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
       await comfyPage.setup()
     })
 
-    test('Should keep execution errors matching the search query', async ({
+    test('Should filter execution errors by search query', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow('nodes/execution_error')
@@ -62,9 +62,9 @@ test.describe('Errors tab - common', { tag: '@ui' }, () => {
       await expect(runtimePanel).toBeVisible()
 
       const searchInput = comfyPage.page.getByPlaceholder(/^Search/)
-      await searchInput.fill('Execution failed')
+      await searchInput.fill('nonexistent_query_xyz_12345')
 
-      await expect(runtimePanel).toBeVisible()
+      await expect(runtimePanel).toHaveCount(0)
     })
   })
 })

browser_tests/tests/propertiesPanel/errorsTabCloudMissingModels.spec.ts

@@ -12,10 +12,11 @@ const WORKFLOW = 'missing/nested_subgraph_installed_model'
 const OUTER_SUBGRAPH_NODE_ID = '205'
 const LOTUS_MODEL_NAME = 'lotus-depth-d-v1-1.safetensors'
 
-const LOTUS_DIFFUSION_MODEL: Asset & { hash?: string } = {
+const LOTUS_DIFFUSION_MODEL: Asset = {
   id: 'test-lotus-depth-d-v1-1',
   name: LOTUS_MODEL_NAME,
-  hash: 'blake3:0000000000000000000000000000000000000000000000000000000000000203',
+  asset_hash:
+    'blake3:0000000000000000000000000000000000000000000000000000000000000203',
   size: 1_024,
   mime_type: 'application/octet-stream',
   tags: ['models', 'diffusion_models'],

browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts

@@ -41,7 +41,7 @@ test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
     ).toBeVisible()
   })
 
-  test('Should show runtime error log in the execution error group', async ({
+  test('Should show error message in runtime error panel', async ({
     comfyPage
   }) => {
     await openExecutionErrorTab(comfyPage)
@@ -50,6 +50,6 @@ test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
       TestIds.dialogs.runtimeErrorPanel
     )
     await expect(runtimePanel).toBeVisible()
-    await expect(runtimePanel).toContainText('Error log')
+    await expect(runtimePanel).toContainText(/\S/)
   })
 })

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -36,10 +36,6 @@ function getDropzone(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId(TestIds.dialogs.missingMediaUploadDropzone)
 }
 
-function getErrorOverlay(comfyPage: ComfyPage) {
-  return comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-}
-
 test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
@@ -50,24 +46,14 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
   test.describe('Detection', () => {
     test('Shows missing media group in errors tab', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
-
-      const overlay = getErrorOverlay(comfyPage)
-      await expect(overlay).toBeVisible()
-      await expect(
-        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
-      ).toContainText(/Load Image/)
-
-      await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
-      await expect(overlay).toBeHidden()
-
-      const missingMediaGroup = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingMediaGroup
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
       )
-      await expect(missingMediaGroup).toBeVisible()
+
       await expect(
-        missingMediaGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-      ).toHaveText(/\S/)
+        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
+      ).toBeVisible()
     })
 
     test('Shows correct number of missing media rows', async ({

browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts

@@ -23,31 +23,11 @@ const plainVideoFileName = 'plain_video.mp4'
 const graphDropPosition = { x: 500, y: 300 }
 const missingMediaUploadObservationMs = 1_000
 const missingMediaUploadPollMs = 100
-const emptyMediaLoaderNodes = [
-  {
-    nodeType: 'LoadImage',
-    widgetName: 'image',
-    serverOnlyOption: 'server-only-image.png',
-    position: { x: 150, y: 150 }
-  },
-  {
-    nodeType: 'LoadVideo',
-    widgetName: 'file',
-    serverOnlyOption: 'server-only-video.mp4',
-    position: { x: 450, y: 150 }
-  },
-  {
-    nodeType: 'LoadAudio',
-    widgetName: 'audio',
-    serverOnlyOption: 'server-only-audio.wav',
-    position: { x: 750, y: 150 }
-  }
-]
 
-const cloudOutputAsset: Asset & { hash?: string } = {
+const cloudOutputAsset: Asset = {
   id: 'test-output-hash-001',
   name: 'ComfyUI_00001_.png',
-  hash: outputHash,
+  asset_hash: outputHash,
   size: 4_194_304,
   mime_type: 'image/png',
   tags: ['output'],
@@ -56,10 +36,10 @@ const cloudOutputAsset: Asset & { hash?: string } = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const cloudUploadedVideoAsset: Asset & { hash?: string } = {
+const cloudUploadedVideoAsset: Asset = {
   id: 'test-uploaded-video-001',
   name: plainVideoFileName,
-  hash: plainVideoFileName,
+  asset_hash: plainVideoFileName,
   size: 1_024,
   mime_type: 'video/mp4',
   tags: ['input'],
@@ -70,10 +50,10 @@ const cloudUploadedVideoAsset: Asset & { hash?: string } = {
 
 // The Cloud test app starts with a default LoadImage node. Keep that baseline
 // input resolvable so this spec only observes the media it creates.
-const cloudDefaultGraphInputAsset: Asset & { hash?: string } = {
+const cloudDefaultGraphInputAsset: Asset = {
   id: 'test-default-input-001',
   name: '00000000000000000000000Aexample.png',
-  hash: '00000000000000000000000Aexample.png',
+  asset_hash: '00000000000000000000000Aexample.png',
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],
@@ -86,168 +66,12 @@ interface CloudUploadAssetState {
   isUploadedAssetAvailable: boolean
 }
 
-type ObjectInfoResponse = Record<
-  string,
-  { input?: { required?: Record<string, unknown> } }
->
-
-function setComboInputOptions(
-  objectInfo: ObjectInfoResponse,
-  nodeType: string,
-  inputName: string,
-  values: string[]
-) {
-  const nodeInfo = objectInfo[nodeType]
-  if (!nodeInfo) {
-    throw new Error(`Missing object_info entry for ${nodeType}`)
-  }
-
-  const requiredInputs = nodeInfo.input?.required
-  if (!requiredInputs) {
-    throw new Error(`Missing required inputs for ${nodeType}`)
-  }
-
-  const input = requiredInputs[inputName]
-  if (!Array.isArray(input)) {
-    throw new Error(`Expected ${nodeType}.${inputName} to be a combo input`)
-  }
-
-  const [valuesOrType, options] = input
-  const optionsObject =
-    options && typeof options === 'object' && !Array.isArray(options)
-  if (Array.isArray(valuesOrType)) {
-    input[0] = values
-  } else if (valuesOrType !== 'COMBO') {
-    throw new Error(`Expected ${nodeType}.${inputName} to have combo options`)
-  }
-
-  if (optionsObject) {
-    Object.assign(options, { options: values })
-  } else if (!Array.isArray(valuesOrType)) {
-    throw new Error(
-      `Expected ${nodeType}.${inputName} to have options metadata`
-    )
-  }
-}
-
-async function routeCloudBootstrapApis(page: Page) {
-  await page.route('**/api/settings**', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify({})
-    })
-  })
-  await page.route('**/api/userdata**', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify([])
-    })
-  })
-  await page.route('**/i18n', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify({})
-    })
-  })
-  await page.route('**/customers/cloud-subscription-status', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify({ is_active: true })
-    })
-  })
-}
-
-async function routeSetupObjectInfo(
-  page: Page,
-  customize?: (objectInfo: ObjectInfoResponse) => void
-) {
-  const setupApiUrl =
-    process.env.PLAYWRIGHT_SETUP_API_URL ?? 'http://127.0.0.1:8188'
-  const objectInfoUrl = new URL('/object_info', setupApiUrl).toString()
-
-  const objectInfoRouteHandler = async (route: Route) => {
-    try {
-      const response = await fetch(objectInfoUrl, {
-        signal: AbortSignal.timeout(5_000)
-      })
-      if (!response.ok) {
-        await route.fulfill({
-          status: response.status,
-          contentType: response.headers.get('content-type') ?? 'text/plain',
-          body: await response.text()
-        })
-        return
-      }
-
-      const objectInfo = (await response.json()) as ObjectInfoResponse
-      customize?.(objectInfo)
-
-      await route.fulfill({
-        status: response.status,
-        contentType: 'application/json',
-        body: JSON.stringify(objectInfo)
-      })
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error)
-      await route.fulfill({
-        status: 502,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          error: `Failed to fetch setup object_info from ${objectInfoUrl}: ${message}`
-        })
-      })
-    }
-  }
-
-  await page.route('**/object_info', objectInfoRouteHandler)
-  return async () =>
-    await page.unroute('**/object_info', objectInfoRouteHandler)
-}
-
-const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset]).extend({
-  page: async ({ page }, use) => {
-    await routeCloudBootstrapApis(page)
-    const unrouteObjectInfo = await routeSetupObjectInfo(page)
-
-    try {
-      await use(page)
-    } finally {
-      await unrouteObjectInfo()
-    }
-  }
-})
-
-const cloudEmptyMediaInputsTest = createCloudAssetsFixture([]).extend({
-  page: async ({ page }, use) => {
-    await routeCloudBootstrapApis(page)
-
-    const unrouteObjectInfo = await routeSetupObjectInfo(page, (objectInfo) => {
-      for (const node of emptyMediaLoaderNodes) {
-        setComboInputOptions(objectInfo, node.nodeType, node.widgetName, [
-          node.serverOnlyOption
-        ])
-      }
-    })
-
-    try {
-      await use(page)
-    } finally {
-      await unrouteObjectInfo()
-    }
-  }
-})
+const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset])
 const cloudUploadAssetStateByPage = new WeakMap<Page, CloudUploadAssetState>()
 const cloudUploadRaceTest = comfyPageFixture.extend<{
   markUploadedCloudAssetAvailable: () => void
 }>({
   page: async ({ page }, use) => {
-    await routeCloudBootstrapApis(page)
-    const unrouteObjectInfo = await routeSetupObjectInfo(page)
-
     const state: CloudUploadAssetState = {
       isUploadedAssetAvailable: false
     }
@@ -282,13 +106,9 @@ const cloudUploadRaceTest = comfyPageFixture.extend<{
     }
 
     await page.route(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-    try {
-      await use(page)
-    } finally {
-      await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-      await unrouteObjectInfo()
-      cloudUploadAssetStateByPage.delete(page)
-    }
+    await use(page)
+    await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+    cloudUploadAssetStateByPage.delete(page)
   },
   markUploadedCloudAssetAvailable: async ({ page }, use) => {
     await use(() => {
@@ -319,41 +139,7 @@ async function expectNoErrorsTab(comfyPage: ComfyPage) {
   ).toBeHidden()
 }
 
-async function closeTemplatesDialogIfOpen(comfyPage: ComfyPage) {
-  const templatesDialog = comfyPage.page.getByRole('dialog').filter({
-    has: comfyPage.templates.content
-  })
-  const closeButton = templatesDialog.getByRole('button', {
-    name: 'Close dialog'
-  })
-  await closeButton
-    .waitFor({ state: 'visible', timeout: 1_000 })
-    .catch(() => undefined)
-
-  if (await closeButton.isVisible()) {
-    await closeButton.click()
-    await expect(templatesDialog).toBeHidden()
-  }
-}
-
-async function getMediaLoaderWidgetValues(comfyPage: ComfyPage) {
-  return await comfyPage.page.evaluate((nodes) => {
-    return nodes.map(({ nodeType, widgetName }) => {
-      const node = window.app!.graph.nodes.find(
-        (graphNode) => graphNode.type === nodeType
-      )
-      const widget = node?.widgets?.find(
-        (candidate) => candidate.name === widgetName
-      )
-      return widget?.value ?? null
-    })
-  }, emptyMediaLoaderNodes)
-}
-
-async function delayNextUpload(
-  comfyPage: ComfyPage,
-  uploadResult?: { name: string; subfolder: string; type: 'input' }
-) {
+async function delayNextUpload(comfyPage: ComfyPage) {
   let releaseUpload!: () => void
   let resolveUploadStarted!: () => void
   const uploadStarted = new Promise<void>((resolve) => {
@@ -366,14 +152,6 @@ async function delayNextUpload(
   const uploadRouteHandler = async (route: Route) => {
     resolveUploadStarted()
     await release
-    if (uploadResult) {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(uploadResult)
-      })
-      return
-    }
     await route.continue()
   }
 
@@ -517,51 +295,12 @@ ossTest.describe(
   }
 )
 
-cloudEmptyMediaInputsTest.describe(
-  'Errors tab - Cloud empty media loader inputs',
-  { tag: '@cloud' },
-  () => {
-    cloudEmptyMediaInputsTest.beforeEach(async ({ comfyPage }) => {
-      await enableErrorsTab(comfyPage)
-      await closeTemplatesDialogIfOpen(comfyPage)
-    })
-
-    cloudEmptyMediaInputsTest(
-      'does not surface missing inputs after adding LoadImage, LoadVideo, and LoadAudio nodes with no cloud input assets',
-      async ({ cloudAssetRequests, comfyPage }) => {
-        await comfyPage.nodeOps.clearGraph()
-
-        for (const node of emptyMediaLoaderNodes) {
-          await comfyPage.nodeOps.addNode(
-            node.nodeType,
-            undefined,
-            node.position
-          )
-        }
-
-        await expect
-          .poll(() =>
-            cloudAssetRequests.some((url) =>
-              assetRequestIncludesTag(url, 'input')
-            )
-          )
-          .toBe(true)
-        await expect
-          .poll(() => getMediaLoaderWidgetValues(comfyPage))
-          .toEqual(['', '', ''])
-        await expectNoErrorsTab(comfyPage)
-      }
-    )
-  }
-)
-
 cloudOutputTest.describe(
   'Errors tab - Cloud missing media runtime sources',
   { tag: '@cloud' },
   () => {
     cloudOutputTest.beforeEach(async ({ comfyPage }) => {
       await enableErrorsTab(comfyPage)
-      await closeTemplatesDialogIfOpen(comfyPage)
     })
 
     cloudOutputTest(
@@ -590,18 +329,13 @@ cloudUploadRaceTest.describe(
   () => {
     cloudUploadRaceTest.beforeEach(async ({ comfyPage }) => {
       await enableErrorsTab(comfyPage)
-      await closeTemplatesDialogIfOpen(comfyPage)
     })
 
     cloudUploadRaceTest(
       'does not surface missing media while dropped video upload is in progress',
       async ({ comfyFiles, comfyPage, markUploadedCloudAssetAvailable }) => {
         await comfyPage.nodeOps.clearGraph()
-        const delayedUpload = await delayNextUpload(comfyPage, {
-          name: plainVideoFileName,
-          subfolder: '',
-          type: 'input'
-        })
+        const delayedUpload = await delayNextUpload(comfyPage)
 
         await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
           dropPosition: graphDropPosition

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -25,13 +25,9 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
-    const missingModelsGroup = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingModelsGroup
-    )
-    await expect(missingModelsGroup).toBeVisible()
     await expect(
-      missingModelsGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-    ).toHaveText(/\S/)
+      comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
+    ).toBeVisible()
   })
 
   test('Should display model name with referencing node count', async ({

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -23,13 +23,9 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test('Should show missing node packs group', async ({ comfyPage }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
-    const missingNodeGroup = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodePacksGroup
-    )
-    await expect(missingNodeGroup).toBeVisible()
     await expect(
-      missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-    ).toHaveText(/\S/)
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
+    ).toBeVisible()
   })
 
   test('Should expand pack group to reveal node type names', async ({

browser_tests/tests/sidebar/assets-output-dedupe.spec.ts

@@ -1,101 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
-import type { JobDetail } from '@/platform/remote/comfyui/jobs/jobTypes'
-
-/**
- * Expanded folder view must drop output records that resolve to the same
- * composite `${nodeId}-${subfolder}-${filename}` key; otherwise Vue's keyed
- * v-for in VirtualGrid collides and one asset visibly duplicates its
- * neighbours while scrolling.
- */
-
-const STACK_JOB_ID = 'job-output-dedupe'
-const COVER_NODE_ID = '9'
-const COVER_FILENAME = 'cover_00001_.png'
-const DUPLICATE_FILENAME = 'duplicate_00002_.png'
-const DISTINCT_FILENAMES = ['distinct_00003_.png', 'distinct_00004_.png']
-
-// 5 records: 1 cover + 2 distinct + 2 sharing DUPLICATE_FILENAME.
-// 4 unique composite keys expected after dedupe.
-const STACK_JOB_OUTPUTS = [
-  { filename: COVER_FILENAME, subfolder: '', type: 'output' as const },
-  ...DISTINCT_FILENAMES.map((filename) => ({
-    filename,
-    subfolder: '',
-    type: 'output' as const
-  })),
-  { filename: DUPLICATE_FILENAME, subfolder: '', type: 'output' as const },
-  { filename: DUPLICATE_FILENAME, subfolder: '', type: 'output' as const }
-]
-
-const STACK_JOB = createMockJob({
-  id: STACK_JOB_ID,
-  create_time: 5000,
-  execution_start_time: 5000,
-  execution_end_time: 5050,
-  preview_output: {
-    filename: COVER_FILENAME,
-    subfolder: '',
-    type: 'output',
-    nodeId: COVER_NODE_ID,
-    mediaType: 'images'
-  },
-  outputs_count: STACK_JOB_OUTPUTS.length
-})
-
-const STACK_JOB_DETAIL: JobDetail = {
-  ...STACK_JOB,
-  outputs: {
-    [COVER_NODE_ID]: { images: STACK_JOB_OUTPUTS }
-  }
-}
-
-const EXPECTED_TOTAL_TILES = 4
-
-test.describe(
-  'Expanded folder view dedupes duplicate composite output keys',
-  { tag: '@cloud' },
-  () => {
-    // @cloud comfyPage already navigates with Firebase auth seeded; a second
-    // setup() call would clear localStorage and bounce to /cloud/login.
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.assets.mockOutputHistory([STACK_JOB])
-      await comfyPage.assets.mockInputFiles([])
-      await comfyPage.assets.mockJobDetail(STACK_JOB_ID, STACK_JOB_DETAIL)
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.assets.clearMocks()
-    })
-
-    test('renders one tile per unique composite key', async ({
-      comfyPage
-    }, testInfo) => {
-      const tab = comfyPage.menu.assetsTab
-      await tab.open()
-      await tab.waitForAssets()
-
-      await tab.assetCards
-        .first()
-        .getByRole('button', { name: 'See more outputs' })
-        .click()
-      await expect(tab.backToAssetsButton).toBeVisible()
-
-      await expect(tab.assetCards).toHaveCount(EXPECTED_TOTAL_TILES)
-
-      const labels = await tab.assetCards.evaluateAll((nodes) =>
-        nodes
-          .map((el) => el.getAttribute('aria-label'))
-          .filter((v): v is string => v !== null)
-      )
-      expect(new Set(labels).size).toBe(labels.length)
-
-      await testInfo.attach('expanded-folder-view.png', {
-        body: await comfyPage.page.screenshot({ fullPage: false }),
-        contentType: 'image/png'
-      })
-    })
-  }
-)

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -289,17 +289,17 @@ test.describe('Node library sidebar', () => {
     await customColorOption.click()
     await customColorOption.click()
 
+    // Use the color picker
+    await comfyPage.page
+      .getByLabel('Customize Folder')
+      .getByRole('textbox')
+      .click()
+    await comfyPage.page.locator('.p-colorpicker-color-background').click()
+
+    // Finalize the customization
     const dialog = comfyPage.page.getByRole('dialog', {
       name: 'Customize Folder'
     })
-    await dialog
-      .locator('.color-customization-selector-container > button')
-      .last()
-      .click()
-    await comfyPage.page
-      .getByLabel('Color saturation and brightness')
-      .click({ position: { x: 10, y: 10 } })
-
     // Select Folder icon (2nd button in Icon group)
     const iconGroup = dialog.getByText('Icon').locator('..').getByRole('group')
     await iconGroup.getByRole('button').nth(1).click()

browser_tests/tests/textareaWidgetFontSize.spec.ts

@@ -1,30 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-
-test.describe(
-  'Textarea widget font size',
-  { tag: ['@widget', '@vue-nodes'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-    })
-
-    test('applies Comfy.TextareaWidget.FontSize to Vue Nodes 2.0 textarea widget', async ({
-      comfyPage
-    }) => {
-      const textarea = comfyPage.vueNodes.nodes.locator('textarea').first()
-      await expect(textarea).toBeVisible()
-
-      await comfyPage.settings.setSetting('Comfy.TextareaWidget.FontSize', 14)
-      await expect
-        .poll(() => textarea.evaluate((el) => getComputedStyle(el).fontSize))
-        .toBe('14px')
-
-      await comfyPage.settings.setSetting('Comfy.TextareaWidget.FontSize', 22)
-      await expect
-        .poll(() => textarea.evaluate((el) => getComputedStyle(el).fontSize))
-        .toBe('22px')
-    })
-  }
-)

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -180,44 +180,4 @@ test.describe('Vue Nodes Batch Image Preview', { tag: '@vue-nodes' }, () => {
       await expect.poll(() => countColumns(node.imageGrid)).toBeLessThan(10)
     }
   )
-
-  wstest(
-    'requests lightweight thumbnail URLs for grid cells',
-    async ({ comfyPage, getWebSocket }) => {
-      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-
-      await test.step('Add node', async () => {
-        await comfyPage.menu.topbar.newWorkflowButton.click()
-        await comfyPage.nextFrame()
-
-        await comfyPage.searchBoxV2.addNode('Preview Image')
-        const previewImage = comfyPage.vueNodes.getNodeByTitle('Preview Image')
-        await expect(previewImage).toBeVisible()
-      })
-
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Preview Image')
-      const gridImages = node.imageGrid.locator('img')
-
-      await test.step('Inject a multi-image grid', async () => {
-        const images = Array.from({ length: 4 }, (_, index) => ({
-          filename: `grid-${index}.png`,
-          subfolder: '',
-          type: 'output'
-        }))
-        execution.executed('', '1', { images })
-        await expect(gridImages).toHaveCount(4)
-      })
-
-      // FE-741: small on-node grid cells must request a server re-encoded
-      // thumbnail (`preview=webp;75`, `;` may be percent-encoded) instead of
-      // downloading the full-resolution image, while still pointing at the
-      // real `/api/view` URL for that output. Verifies the full path: WS
-      // output -> nodeOutputStore.buildImageUrls -> getGridThumbnailUrl ->
-      // rendered grid `<img>`.
-      for (const cell of await gridImages.all()) {
-        await expect(cell).toHaveAttribute('src', /[?&]preview=webp(%3B|;)75/)
-        await expect(cell).toHaveAttribute('src', /[?&]filename=grid-\d+\.png/)
-      }
-    }
-  )
 })

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -54,35 +54,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     })
   }
 
-  const advancedButtonOverflowPx = 24
-  const holdPointCanvasInsetPx = 8
-
-  const getAdvancedInputsButton = (node: Locator) =>
-    node.getByTestId('advanced-inputs-button')
-
-  const moveAdvancedButtonRightEdgePastCanvas = async (
-    comfyPage: ComfyPage,
-    button: Locator,
-    overflow: number
-  ) => {
-    const box = await button.boundingBox()
-    const canvasBox = await comfyPage.canvas.boundingBox()
-    if (!box) throw new Error('Advanced button has no bounding box')
-    if (!canvasBox) throw new Error('Canvas has no bounding box')
-
-    const scale = await comfyPage.canvasOps.getScale()
-    const deltaX = canvasBox.x + canvasBox.width + overflow - box.x - box.width
-    await comfyPage.page.evaluate(
-      ({ deltaX, scale }) => {
-        const canvas = window.app!.canvas
-        canvas.ds.offset[0] += deltaX / scale
-        canvas.setDirty(true, true)
-      },
-      { deltaX, scale }
-    )
-    await comfyPage.idleFrames(2)
-  }
-
   test('should allow moving nodes by dragging', async ({ comfyPage }) => {
     const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
@@ -152,7 +123,7 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.vueNodes.waitForNodes()
 
     const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
-    const showButton = getAdvancedInputsButton(node)
+    const showButton = node.getByText('Show advanced inputs')
     const widgets = node.locator('.lg-node-widget')
 
     await expect(showButton).toBeVisible()
@@ -172,83 +143,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await expectPosChanged(beforePos, afterPos)
   })
 
-  test(
-    'should not pan while holding the Advanced button without dragging',
-    { tag: ['@canvas', '@widget'] },
-    async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting(
-        'Comfy.Node.AlwaysShowAdvancedWidgets',
-        false
-      )
-      await comfyPage.nodeOps.addNode(
-        'ModelSamplingFlux',
-        {},
-        {
-          x: 500,
-          y: 200
-        }
-      )
-      await comfyPage.vueNodes.waitForNodes()
-
-      const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
-      const showButton = getAdvancedInputsButton(node)
-      await expect(showButton).toBeVisible()
-
-      await moveAdvancedButtonRightEdgePastCanvas(
-        comfyPage,
-        showButton,
-        advancedButtonOverflowPx
-      )
-
-      const buttonBox = await showButton.boundingBox()
-      const canvasBox = await comfyPage.canvas.boundingBox()
-      if (!buttonBox) throw new Error('Advanced button has no bounding box')
-      if (!canvasBox) throw new Error('Canvas has no bounding box')
-
-      const canvasRight = canvasBox.x + canvasBox.width
-      const buttonRight = buttonBox.x + buttonBox.width
-      expect(
-        buttonRight,
-        'Advanced button should extend past the canvas right edge'
-      ).toBeGreaterThan(canvasRight)
-
-      const holdPoint = {
-        x: canvasRight - holdPointCanvasInsetPx,
-        y: buttonBox.y + buttonBox.height / 2
-      }
-      expect(
-        holdPoint.x,
-        'Hold point should stay inside the visible part of the Advanced button'
-      ).toBeGreaterThanOrEqual(buttonBox.x)
-      expect(
-        holdPoint.x,
-        'Hold point should stay inside the visible canvas'
-      ).toBeLessThanOrEqual(canvasRight)
-      expect(
-        holdPoint.y,
-        'Hold point should stay inside the Advanced button height'
-      ).toBeGreaterThanOrEqual(buttonBox.y)
-      expect(
-        holdPoint.y,
-        'Hold point should stay inside the Advanced button height'
-      ).toBeLessThanOrEqual(buttonBox.y + buttonBox.height)
-
-      const beforeOffset = await comfyPage.canvasOps.getOffset()
-
-      await comfyPage.page.mouse.move(holdPoint.x, holdPoint.y)
-      await comfyPage.page.mouse.down()
-      try {
-        await comfyPage.idleFrames(8)
-      } finally {
-        await comfyPage.page.mouse.up()
-      }
-
-      const afterOffset = await comfyPage.canvasOps.getOffset()
-      expect(afterOffset[0]).toBeCloseTo(beforeOffset[0], 3)
-      expect(afterOffset[1]).toBeCloseTo(beforeOffset[1], 3)
-    }
-  )
-
   test('should not enter subgraph when dragging by the Enter Subgraph button', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts

@@ -6,7 +6,6 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 const SHOW_ADVANCED_INPUTS = 'Show advanced inputs'
 const HIDE_ADVANCED_INPUTS = 'Hide advanced inputs'
-const FLOAT_SOURCE_POSITION_LEFT_OF_NODE = { x: 100, y: 200 }
 
 test.describe('Advanced Widget Visibility', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -33,20 +32,6 @@ test.describe('Advanced Widget Visibility', { tag: '@vue-nodes' }, () => {
     return getNode(comfyPage).locator('.lg-node-widget')
   }
 
-  async function getWidgetIndex(comfyPage: ComfyPage, widgetName: string) {
-    const index = await comfyPage.page.evaluate((name) => {
-      const node = window.app!.graph.nodes.find(
-        (node) => node.type === 'ModelSamplingFlux'
-      )
-      return node?.widgets?.findIndex((widget) => widget.name === name) ?? -1
-    }, widgetName)
-    expect(
-      index,
-      `${widgetName} widget should exist on ModelSamplingFlux`
-    ).toBeGreaterThanOrEqual(0)
-    return index
-  }
-
   test('should hide advanced widgets by default', async ({ comfyPage }) => {
     const node = getNode(comfyPage)
     const widgets = getWidgets(comfyPage)
@@ -87,47 +72,6 @@ test.describe('Advanced Widget Visibility', { tag: '@vue-nodes' }, () => {
     await expect(widgets).toHaveCount(2)
   })
 
-  test('should keep connected advanced widgets visible when advanced inputs are hidden', async ({
-    comfyPage
-  }) => {
-    const node = getNode(comfyPage)
-    const maxShiftWidget = node.getByLabel('max_shift', { exact: true })
-    const baseShiftWidget = node.getByLabel('base_shift', { exact: true })
-
-    await node.getByText(SHOW_ADVANCED_INPUTS).click()
-    await expect(maxShiftWidget).toBeVisible()
-    await expect(baseShiftWidget).toBeVisible()
-
-    const primitive = await comfyPage.nodeOps.addNode(
-      'PrimitiveFloat',
-      {},
-      FLOAT_SOURCE_POSITION_LEFT_OF_NODE
-    )
-    const [target] =
-      await comfyPage.nodeOps.getNodeRefsByType('ModelSamplingFlux')
-    const maxShiftIndex = await getWidgetIndex(comfyPage, 'max_shift')
-    await primitive.connectWidget(0, target, maxShiftIndex)
-
-    await expect
-      .poll(() =>
-        comfyPage.page.evaluate(() => {
-          const node = window.app!.graph.nodes.find(
-            (node) => node.type === 'ModelSamplingFlux'
-          )
-          return (
-            node?.inputs.find((input) => input.widget?.name === 'max_shift')
-              ?.link ?? null
-          )
-        })
-      )
-      .not.toBeNull()
-
-    await node.getByText(HIDE_ADVANCED_INPUTS).click()
-
-    await expect(maxShiftWidget).toBeVisible()
-    await expect(baseShiftWidget).toBeHidden()
-  })
-
   test('should hide advanced footer button while collapsed', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/widgets/combo/comboWidget.spec.ts

@@ -1,12 +1,10 @@
-import type { Locator } from '@playwright/test'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { intersection } from '@e2e/fixtures/utils/boundsUtils'
+import type { Locator } from '@playwright/test'
 
 test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {
   async function openSamplerDropdown(comfyPage: ComfyPage) {
@@ -280,31 +278,4 @@ test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {
       .getByRole('combobox', { name: 'scheduler', exact: true })
     await expect(schedulerComboAfterReload).toContainText('karras')
   })
-
-  test('Dropdown displays over Selection Toolbox', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
-
-    const nodeName = 'Resize Image/Mask'
-    await comfyPage.searchBoxV2.addNode(nodeName, {
-      position: { x: 200, y: 630 }
-    })
-    const node = await comfyPage.vueNodes.getFixtureByTitle(nodeName)
-    await node.select()
-    await expect(comfyPage.selectionToolbox).toBeVisible()
-
-    const combo = comfyPage.vueNodes.getWidgetByName(nodeName, 'resize_type')
-    await combo.click()
-    const dropdown = comfyPage.page.getByTestId(
-      TestIds.widgets.selectDefaultViewport
-    )
-    await expect(dropdown).toBeVisible()
-
-    const bounds = (await intersection(dropdown, comfyPage.selectionToolbox))!
-    expect(bounds, 'toolbox and dropdown overlap').toBeDefined()
-    const cX = bounds.x + bounds.width / 2
-    const cY = bounds.y + bounds.height / 2
-    const dropdownBounds = (await dropdown.boundingBox())!
-    const position = { x: cX - dropdownBounds.x, y: cY - dropdownBounds.y }
-    await dropdown.click({ position, trial: true })
-  })
 })

manifest.json

@@ -5,16 +5,9 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "/assets/images/comfy-icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/assets/images/comfy-icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any maskable"
+      "src": "/assets/images/comfy-logo-single.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
     }
   ],
   "display": "standalone"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.46.9",
+  "version": "1.46.8",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -8,12 +8,12 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
-    "build:cloud": "cross-env DISTRIBUTION=cloud vite build --config vite.config.mts",
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.config.mts",
     "build:desktop": "pnpm --filter @comfyorg/desktop-ui run build",
     "build-storybook": "storybook build",
-    "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "build:types": "cross-env NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
-    "build": "pnpm typecheck && vite build --config vite.config.mts",
+    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && vite build --config vite.config.mts",
     "clean": "pnpm dlx rimraf dist dist-ssr coverage playwright-report blob-report test-results node_modules/.vite apps/desktop-ui/dist apps/website/dist",
     "clean:all": "pnpm clean && pnpm dlx rimraf node_modules",
     "size:collect": "node scripts/size-collect.js",

packages/design-system/src/css/style.css

@@ -121,7 +121,6 @@
   --comfy-topbar-height: 2.5rem;
   --workflow-tabs-height: 2.375rem;
   --comfy-input-bg: #222;
-  --comfy-textarea-font-size: 10px;
   --input-text: #ddd;
   --descrip-text: #999;
   --drag-text: #ccc;

pnpm-workspace.yaml

@@ -2,8 +2,6 @@ packages:
   - apps/**
   - packages/**
 
-nodeOptions: '${NODE_OPTIONS:- } --no-experimental-webstorage --max-old-space-size=8192'
-
 ignoreWorkspaceRootCheck: true
 catalogMode: prefer
 publicHoistPattern:

scripts/build-config.test.ts

@@ -0,0 +1,188 @@
+/**
+ * Tests for build configuration changes introduced in this PR:
+ *
+ * - package.json: NODE_OPTIONS removed from individual build scripts
+ * - pnpm-workspace.yaml: nodeOptions added at workspace level with
+ *   --no-experimental-webstorage and --max-old-space-size=8192
+ * - vite.config.mts: execArgv removed from vitest test config (no longer
+ *   needed since the flag is applied at workspace level)
+ */
+
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import { beforeAll, describe, expect, it } from 'vitest'
+
+const ROOT = path.resolve(__dirname, '..')
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function readRootFile(filename: string): string {
+  return fs.readFileSync(path.join(ROOT, filename), 'utf8')
+}
+
+function readPackageJson(): Record<string, unknown> & {
+  scripts: Record<string, string>
+} {
+  return JSON.parse(readRootFile('package.json')) as Record<string, unknown> & {
+    scripts: Record<string, string>
+  }
+}
+
+// ---------------------------------------------------------------------------
+// package.json – NODE_OPTIONS removed from build scripts
+// ---------------------------------------------------------------------------
+
+describe('package.json build scripts', () => {
+  it('build:cloud does not set NODE_OPTIONS inline', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:cloud']).not.toContain('NODE_OPTIONS')
+  })
+
+  it('build does not set NODE_OPTIONS inline', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build']).not.toContain('NODE_OPTIONS')
+  })
+
+  it('build:types does not set NODE_OPTIONS inline', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:types']).not.toContain('NODE_OPTIONS')
+  })
+
+  it('build:cloud still sets DISTRIBUTION=cloud via cross-env', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:cloud']).toContain('DISTRIBUTION=cloud')
+    expect(scripts['build:cloud']).toContain('cross-env')
+  })
+
+  it('build:cloud still invokes vite build with the correct config', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:cloud']).toContain('vite build')
+    expect(scripts['build:cloud']).toContain('vite.config.mts')
+  })
+
+  it('build still runs pnpm typecheck before vite build', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build']).toMatch(/pnpm typecheck.+vite build/s)
+  })
+
+  it('build:types still runs vite build and prepare-types.js', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:types']).toContain('vite build')
+    expect(scripts['build:types']).toContain('prepare-types.js')
+  })
+
+  it('build:cloud does not inline --max-old-space-size', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:cloud']).not.toContain('--max-old-space-size')
+  })
+
+  it('build does not inline --max-old-space-size', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build']).not.toContain('--max-old-space-size')
+  })
+
+  it('build:types does not inline --max-old-space-size', () => {
+    const { scripts } = readPackageJson()
+    expect(scripts['build:types']).not.toContain('--max-old-space-size')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// pnpm-workspace.yaml – workspace-level nodeOptions added
+// ---------------------------------------------------------------------------
+
+describe('pnpm-workspace.yaml nodeOptions', () => {
+  let yamlContent: string
+
+  // Read once for the whole describe block
+  beforeAll(() => {
+    yamlContent = readRootFile('pnpm-workspace.yaml')
+  })
+
+  it('contains a nodeOptions entry', () => {
+    expect(yamlContent).toContain('nodeOptions:')
+  })
+
+  it('nodeOptions includes --no-experimental-webstorage flag', () => {
+    expect(yamlContent).toContain('--no-experimental-webstorage')
+  })
+
+  it('nodeOptions includes --max-old-space-size=8192', () => {
+    expect(yamlContent).toContain('--max-old-space-size=8192')
+  })
+
+  it('nodeOptions uses ${NODE_OPTIONS:- } shell parameter expansion', () => {
+    // The pattern ${NODE_OPTIONS:- } means: use $NODE_OPTIONS when set,
+    // otherwise fall back to a single space so extra flags can be safely appended.
+    expect(yamlContent).toContain('${NODE_OPTIONS:-')
+  })
+
+  it('nodeOptions line contains both required flags on the same logical value', () => {
+    // The value must contain both flags so they are applied together.
+    const nodeOptionsLine = yamlContent
+      .split('\n')
+      .find((line) => line.trimStart().startsWith('nodeOptions:'))
+    expect(nodeOptionsLine).toBeDefined()
+    expect(nodeOptionsLine).toContain('--no-experimental-webstorage')
+    expect(nodeOptionsLine).toContain('--max-old-space-size=8192')
+  })
+
+  it('nodeOptions value matches the expected workspace configuration', () => {
+    const expected =
+      "nodeOptions: '${NODE_OPTIONS:- } --no-experimental-webstorage --max-old-space-size=8192'"
+    expect(yamlContent).toContain(expected)
+  })
+
+  it('still defines workspace packages at apps/** and packages/**', () => {
+    expect(yamlContent).toContain('- apps/**')
+    expect(yamlContent).toContain('- packages/**')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// vite.config.mts – execArgv removed from vitest test configuration
+// ---------------------------------------------------------------------------
+
+describe('vite.config.mts vitest test configuration', () => {
+  let configContent: string
+
+  beforeAll(() => {
+    configContent = readRootFile('vite.config.mts')
+  })
+
+  it('does not contain execArgv in the test config section', () => {
+    expect(configContent).not.toContain('execArgv')
+  })
+
+  it('does not contain --no-experimental-webstorage inline within the config', () => {
+    // The flag moved to pnpm-workspace.yaml; it should no longer appear in
+    // the vite config.
+    expect(configContent).not.toContain('--no-experimental-webstorage')
+  })
+
+  it('does not contain Node version check for webstorage workaround', () => {
+    // The old workaround parsed process.versions.node and conditionally added
+    // --no-experimental-webstorage.  Neither pattern should remain.
+    expect(configContent).not.toContain('experimental-webstorage')
+    expect(configContent).not.toContain("process.versions.node.split('.')")
+  })
+
+  it('test config still uses happy-dom environment', () => {
+    expect(configContent).toContain("environment: 'happy-dom'")
+  })
+
+  it('test config still enables globals', () => {
+    expect(configContent).toContain('globals: true')
+  })
+
+  it('test config still references vitest.setup.ts', () => {
+    expect(configContent).toContain('vitest.setup.ts')
+  })
+
+  it('test config includes retry for CI', () => {
+    // Retry logic must remain to avoid flaky tests in CI
+    expect(configContent).toContain('process.env.CI ? 2 : 0')
+  })
+})

src/components/builder/AppModeWidgetList.vue

@@ -8,6 +8,7 @@ import { useI18n } from 'vue-i18n'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -49,6 +50,7 @@ const { onPointerDown } = useAppModeWidgetResizing((widget, config) =>
 )
 
 provide(HideLayoutFieldKey, true)
+provide(OverlayAppendToKey, 'body')
 
 const resolvedInputs = useResolvedSelectedInputs()
 

src/components/common/ColorCustomizationSelector.test.ts

@@ -1,10 +1,10 @@
 import { render } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
+import ColorPicker from 'primevue/colorpicker'
 import PrimeVue from 'primevue/config'
 import SelectButton from 'primevue/selectbutton'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
 
 import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
 
@@ -14,12 +14,6 @@ describe('ColorCustomizationSelector', () => {
     { name: 'Green', value: '#28a745' }
   ]
 
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: { en: { color: { hex: 'Hex', rgba: 'RGBA' } } }
-  })
-
   beforeEach(() => {
     const app = createApp({})
     app.use(PrimeVue)
@@ -33,8 +27,8 @@ describe('ColorCustomizationSelector', () => {
 
     const result = render(ColorCustomizationSelector, {
       global: {
-        plugins: [PrimeVue, i18n],
-        components: { SelectButton }
+        plugins: [PrimeVue],
+        components: { SelectButton, ColorPicker }
       },
       props: {
         modelValue: null,
@@ -74,21 +68,24 @@ describe('ColorCustomizationSelector', () => {
     const buttons = getToggleButtons(container)
     const customButton = buttons[buttons.length - 1]
     expect(customButton).toHaveAttribute('aria-pressed', 'true')
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue ColorPicker uses readonly input preview with no ARIA role
+    const colorPreview = container.querySelector(
+      '.p-colorpicker-preview'
+    ) as HTMLInputElement | null
+    expect(colorPreview).not.toBeNull()
   })
 
   it('shows color picker when custom option is selected', async () => {
-    const { container, user } = renderComponent({ modelValue: '#0d6efd' })
-    await nextTick()
+    const { container, user } = renderComponent()
 
-    // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container -- count buttons to detect the ColorPicker popover trigger appearing
-    const initialButtonCount = container.querySelectorAll('button').length
-    const toggleButtons = getToggleButtons(container)
-    await user.click(toggleButtons[toggleButtons.length - 1])
-    await nextTick()
+    const buttons = getToggleButtons(container)
+    await user.click(buttons[buttons.length - 1])
 
-    // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container -- count buttons to detect the ColorPicker popover trigger appearing
-    const afterButtonCount = container.querySelectorAll('button').length
-    expect(afterButtonCount).toBe(initialButtonCount + 1)
+    expect(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- PrimeVue ColorPicker internal DOM
+      container.querySelector('[data-pc-name="colorpicker"]')
+    ).not.toBeNull()
   })
 
   it('emits update when predefined color is selected', async () => {
@@ -120,7 +117,7 @@ describe('ColorCustomizationSelector', () => {
     onUpdate.mockClear()
     await user.click(buttons[buttons.length - 1]) // Switch to custom
 
-    // When switching to custom, the custom color value inherits from Blue
+    // When switching to custom, the custom color value inherits from Blue ('0d6efd')
     // and the watcher on customColorValue emits the update
     expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
   })

src/components/common/ColorCustomizationSelector.vue

@@ -30,11 +30,10 @@
 </template>
 
 <script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
-
 const {
   modelValue,
   colorOptions,
@@ -66,7 +65,7 @@ onMounted(() => {
       selectedColorOption.value = predefinedColor
     } else {
       selectedColorOption.value = customColorOption
-      customColorValue.value = modelValue
+      customColorValue.value = modelValue.replace('#', '')
     }
   }
 })
@@ -75,7 +74,7 @@ onMounted(() => {
 watch(selectedColorOption, (newOption, oldOption) => {
   if (newOption.name === '_custom') {
     // Inherit the color from previous selection
-    customColorValue.value = oldOption.value
+    customColorValue.value = oldOption.value.replace('#', '')
   } else {
     emit('update:modelValue', newOption.value)
   }
@@ -83,7 +82,7 @@ watch(selectedColorOption, (newOption, oldOption) => {
 
 watch(customColorValue, (newValue) => {
   if (selectedColorOption.value.name === '_custom') {
-    emit('update:modelValue', newValue || null)
+    emit('update:modelValue', newValue ? `#${newValue}` : null)
   }
 })
 </script>

src/components/common/CustomizationDialog.vue

@@ -2,7 +2,11 @@
   <Dialog v-model:open="visible" :modal="false">
     <DialogPortal>
       <DialogOverlay />
-      <DialogContent size="md" :aria-labelledby="titleId">
+      <DialogContent
+        size="md"
+        :aria-labelledby="titleId"
+        @pointer-down-outside="onPointerDownOutside"
+      >
         <DialogHeader>
           <DialogTitle :id="titleId">
             {{ $t('g.customizeFolder') }}
@@ -88,6 +92,21 @@ const emit = defineEmits<{
 
 const titleId = useId()
 
+// PrimeVue ColorPicker overlay teleports to body. Reka treats clicks on it as
+// outside and would dismiss the dialog mid-color-pick. Treat any PrimeVue
+// overlay click as inside.
+const PRIMEVUE_OVERLAY_SELECTORS =
+  '.p-colorpicker-panel, .p-overlay, .p-overlay-mask'
+
+function onPointerDownOutside(
+  event: CustomEvent<{ originalEvent: PointerEvent }>
+) {
+  const target = event.detail.originalEvent.target
+  if (target instanceof Element && target.closest(PRIMEVUE_OVERLAY_SELECTORS)) {
+    event.preventDefault()
+  }
+}
+
 const nodeBookmarkStore = useNodeBookmarkStore()
 
 const iconOptions = [

src/components/common/FormColorPicker.test.ts

@@ -1,110 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import FormColorPicker from './FormColorPicker.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      color: {
-        hex: 'Hex',
-        rgba: 'RGBA',
-        saturationBrightness: 'Color saturation and brightness',
-        hue: 'Hue',
-        alpha: 'Alpha'
-      }
-    }
-  }
-})
-
-function renderForm(props: Record<string, unknown> = {}) {
-  const user = userEvent.setup()
-  const result = render(FormColorPicker, {
-    global: { plugins: [i18n] },
-    props: { modelValue: '000000', ...props }
-  })
-  return { ...result, user }
-}
-
-describe('FormColorPicker', () => {
-  it('preserves the legacy no-# storage contract on commit', async () => {
-    const onUpdate = vi.fn()
-    const { user } = renderForm({
-      modelValue: '000000',
-      label: 'Color',
-      'onUpdate:modelValue': onUpdate
-    })
-    const input = screen.getByPlaceholderText('Color') as HTMLInputElement
-
-    await user.clear(input)
-    await user.type(input, '#abcdef{enter}')
-
-    expect(onUpdate).toHaveBeenLastCalledWith('abcdef')
-  })
-
-  it('does not commit incomplete hex while typing', async () => {
-    const onUpdate = vi.fn()
-    const { user } = renderForm({
-      modelValue: '000000',
-      label: 'Color',
-      'onUpdate:modelValue': onUpdate
-    })
-    const input = screen.getByPlaceholderText('Color') as HTMLInputElement
-
-    await user.clear(input)
-    await user.type(input, '#ab')
-    expect(onUpdate).not.toHaveBeenCalled()
-  })
-
-  it('reverts to current value when partial entry is committed', async () => {
-    const onUpdate = vi.fn()
-    const { user } = renderForm({
-      modelValue: '282828',
-      label: 'Color',
-      'onUpdate:modelValue': onUpdate
-    })
-    const input = screen.getByPlaceholderText('Color') as HTMLInputElement
-
-    await user.clear(input)
-    await user.type(input, '#ab{enter}')
-
-    expect(onUpdate).not.toHaveBeenCalled()
-    expect(input.value).toBe('282828')
-  })
-
-  it('accepts 8-digit hex (with alpha) on commit', async () => {
-    const onUpdate = vi.fn()
-    const { user } = renderForm({
-      modelValue: '000000',
-      label: 'Color',
-      'onUpdate:modelValue': onUpdate
-    })
-    const input = screen.getByPlaceholderText('Color') as HTMLInputElement
-
-    await user.clear(input)
-    await user.type(input, '#11223344{enter}')
-
-    expect(onUpdate).toHaveBeenLastCalledWith('11223344')
-  })
-
-  it('disables both inputs when disabled prop is set', () => {
-    const { container } = renderForm({
-      modelValue: '000000',
-      label: 'Color',
-      disabled: true
-    })
-    const textInput = screen.getByPlaceholderText('Color') as HTMLInputElement
-    expect(textInput.disabled).toBe(true)
-
-    // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container -- the picker trigger has no stable accessible name
-    const trigger = container.querySelector(
-      '.color-picker-wrapper > button'
-    ) as HTMLButtonElement | null
-    expect(trigger).not.toBeNull()
-    expect(trigger?.disabled).toBe(true)
-  })
-})

src/components/common/FormColorPicker.vue

@@ -1,76 +1,20 @@
 <template>
   <div class="color-picker-wrapper flex items-center gap-2">
-    <ColorPicker
-      :id="id"
-      v-model="hexValue"
-      :disabled="disabled"
-      :aria-labelledby="ariaLabelledby"
-    />
-    <Input
-      v-model="draftText"
-      class="w-28"
-      :placeholder="label"
-      :disabled="disabled"
-      @blur="commitDraft"
-      @keydown.enter="commitDraft"
-    />
+    <ColorPicker v-model="modelValue" v-bind="$attrs" />
+    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
-import Input from '@/components/ui/input/Input.vue'
+import ColorPicker from 'primevue/colorpicker'
+import InputText from 'primevue/inputtext'
 
 const modelValue = defineModel<string>('modelValue')
-const {
-  disabled = false,
-  id,
-  ariaLabelledby
-} = defineProps<{
+defineProps<{
   label?: string
-  disabled?: boolean
-  id?: string
-  ariaLabelledby?: string
 }>()
 
 defineOptions({
   inheritAttrs: false
 })
-
-// Preserve the PrimeVue ColorPicker storage contract (hex without `#`); the
-// underlying picker uses `#`-prefixed hex, so normalize on read/write.
-const hexValue = computed<string>({
-  get: () =>
-    modelValue.value?.startsWith('#')
-      ? modelValue.value
-      : `#${modelValue.value ?? '000000'}`,
-  set: (next) => {
-    modelValue.value = next.replace(/^#/, '')
-  }
-})
-
-// Free-text draft so partial typing (e.g. "#f") doesn't roundtrip through
-// the picker and snap back to black. Only commit on blur or Enter when the
-// input fully parses as 6- or 8-digit hex.
-const draftText = ref(modelValue.value ?? '')
-watch(modelValue, (next) => {
-  draftText.value = next ?? ''
-})
-
-const FULL_HEX = /^#?([0-9a-f]{6}|[0-9a-f]{8})$/i
-
-function commitDraft() {
-  const raw = draftText.value.trim()
-  if (raw === '') {
-    draftText.value = modelValue.value ?? ''
-    return
-  }
-  if (FULL_HEX.test(raw)) {
-    modelValue.value = raw.replace(/^#/, '').toLowerCase()
-  } else {
-    draftText.value = modelValue.value ?? ''
-  }
-}
 </script>

src/components/error/ErrorOverlay.test.ts

@@ -1,180 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import ErrorOverlay from './ErrorOverlay.vue'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import type { NodeError } from '@/schemas/apiSchema'
-import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
-
-const mockAllErrorGroups = vi.hoisted(() => ({ value: [] as ErrorGroup[] }))
-
-vi.mock('@/components/rightSidePanel/errors/useErrorGroups', () => ({
-  useErrorGroups: () => ({ allErrorGroups: mockAllErrorGroups })
-}))
-
-vi.mock('@/composables/graph/useNodeErrorFlagSync', () => ({
-  useNodeErrorFlagSync: vi.fn()
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    isGraphReady: false,
-    rootGraph: {
-      serialize: vi.fn(() => ({})),
-      getNodeById: vi.fn()
-    }
-  }
-}))
-
-vi.mock('@/utils/graphTraversalUtil', () => ({
-  executionIdToNodeLocatorId: vi.fn((id: string) => id),
-  getActiveGraphNodeIds: vi.fn(() => new Set()),
-  getExecutionIdByNode: vi.fn(),
-  getNodeByExecutionId: vi.fn()
-}))
-
-const mockOpenPanel = vi.hoisted(() => vi.fn())
-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({ openPanel: mockOpenPanel })
-}))
-
-const mockCanvasStore = vi.hoisted(() => ({
-  linearMode: false,
-  canvas: null,
-  currentGraph: null,
-  updateSelectedItems: vi.fn()
-}))
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => mockCanvasStore
-}))
-
-function createTestI18n() {
-  return createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        g: {
-          close: 'Close',
-          dismiss: 'Dismiss'
-        },
-        errorOverlay: {
-          errorCount: '{count} ERROR | {count} ERRORS',
-          multipleErrorCount: '{count} error found | {count} errors found',
-          multipleErrorsMessage: 'Resolve them before running the workflow.',
-          viewDetails: 'View details'
-        },
-        linearMode: {
-          error: {
-            goto: 'Show errors in graph'
-          }
-        }
-      }
-    }
-  })
-}
-
-function makeNodeError(messages: string[]): NodeError {
-  return {
-    class_type: 'KSampler',
-    dependent_outputs: [],
-    errors: messages.map((message) => ({
-      type: 'execution_error',
-      message,
-      details: 'details'
-    }))
-  }
-}
-
-function renderOverlay(props: { appMode?: boolean } = {}) {
-  const pinia = createPinia()
-  setActivePinia(pinia)
-  return render(ErrorOverlay, {
-    props,
-    global: {
-      plugins: [pinia, createTestI18n()],
-      stubs: {
-        Button: {
-          template: '<button v-bind="$attrs"><slot /></button>'
-        }
-      }
-    }
-  })
-}
-
-describe('ErrorOverlay', () => {
-  beforeEach(() => {
-    mockAllErrorGroups.value = []
-    mockOpenPanel.mockClear()
-    mockCanvasStore.linearMode = false
-    mockCanvasStore.canvas = null
-    mockCanvasStore.currentGraph = null
-    mockCanvasStore.updateSelectedItems.mockClear()
-  })
-
-  it('renders a single overlay message without list markup', async () => {
-    renderOverlay()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Execution failed',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [{ message: 'Only error' }]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByRole('status')).toHaveTextContent('Only error')
-    expect(screen.getByRole('status')).not.toHaveTextContent('1 ERROR')
-    expect(screen.getByTestId('error-overlay-see-errors')).toHaveTextContent(
-      'View details'
-    )
-    expect(screen.queryByRole('list')).not.toBeInTheDocument()
-  })
-
-  it('keeps the app mode button label', async () => {
-    renderOverlay({ appMode: true })
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Execution failed',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [{ message: 'Only error' }]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('error-overlay-see-errors')).toHaveTextContent(
-      'Show errors in graph'
-    )
-  })
-})

src/components/error/ErrorOverlay.vue

@@ -6,15 +6,15 @@
   >
     <div v-if="isVisible" class="pointer-events-none flex w-full justify-end">
       <div
-        role="status"
-        aria-live="polite"
+        role="alert"
+        aria-live="assertive"
         data-testid="error-overlay"
-        class="pointer-events-auto flex w-fit max-w-120 min-w-80 flex-col overflow-hidden rounded-lg border border-destructive-background bg-comfy-menu-bg shadow-interface transition-colors duration-200 ease-in-out"
+        class="pointer-events-auto flex w-80 min-w-72 flex-col overflow-hidden rounded-lg border border-destructive-background bg-comfy-menu-bg shadow-interface transition-colors duration-200 ease-in-out"
       >
         <!-- Header -->
         <div class="flex h-12 items-center gap-2 px-4">
           <span class="flex-1 text-sm font-bold text-destructive-background">
-            {{ overlayTitle }}
+            {{ errorCountLabel }}
           </span>
           <Button
             variant="muted-textonly"
@@ -28,11 +28,20 @@
 
         <!-- Body -->
         <div class="px-4 pb-3" data-testid="error-overlay-messages">
-          <p
-            class="m-0 line-clamp-3 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
-          >
-            {{ overlayMessage }}
-          </p>
+          <ul class="m-0 flex list-none flex-col gap-1.5 p-0">
+            <li
+              v-for="(message, idx) in overlayMessages"
+              :key="idx"
+              class="flex min-w-0 items-baseline gap-2 text-sm/snug text-muted-foreground"
+            >
+              <span
+                class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground"
+              />
+              <span class="line-clamp-3 wrap-break-word whitespace-pre-wrap">{{
+                message
+              }}</span>
+            </li>
+          </ul>
         </div>
 
         <!-- Footer -->
@@ -51,11 +60,7 @@
             data-testid="error-overlay-see-errors"
             @click="seeErrors"
           >
-            {{
-              appMode
-                ? t('linearMode.error.goto')
-                : t('errorOverlay.viewDetails')
-            }}
+            {{ appMode ? t('linearMode.error.goto') : seeErrorsLabel }}
           </Button>
         </div>
       </div>
@@ -64,22 +69,73 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { storeToRefs } from 'pinia'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
+import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-const { appMode = false } = defineProps<{ appMode?: boolean }>()
+defineProps<{ appMode?: boolean }>()
 
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()
 
-const { isVisible, overlayMessage, overlayTitle } = useErrorOverlayState()
+const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
+const { allErrorGroups } = useErrorGroups(ref(''))
+
+const singleErrorType = computed(() => {
+  const types = new Set(allErrorGroups.value.map((g) => g.type))
+  return types.size === 1 ? [...types][0] : null
+})
+
+const overlayMessages = computed<string[]>(() => {
+  const messages = new Set<string>()
+  for (const group of allErrorGroups.value) {
+    if (group.type === 'execution') {
+      // TODO(FE-816 overlay-redesign): Keep runtime overlay copy raw until the
+      // overlay redesign decides how to use catalog toast fields.
+      for (const card of group.cards) {
+        for (const err of card.errors) {
+          messages.add(err.message)
+        }
+      }
+    } else {
+      messages.add(group.displayMessage ?? group.displayTitle)
+    }
+  }
+  return Array.from(messages)
+})
+
+const seeErrorsLabel = computed(() => {
+  const labelMap: Record<string, string> = {
+    missing_node: t('errorOverlay.showMissingNodes'),
+    missing_model: t('errorOverlay.showMissingModels'),
+    swap_nodes: t('errorOverlay.showSwapNodes'),
+    missing_media: t('errorOverlay.showMissingMedia')
+  }
+  if (singleErrorType.value) {
+    return labelMap[singleErrorType.value] ?? t('errorOverlay.seeErrors')
+  }
+  return t('errorOverlay.seeErrors')
+})
+
+const errorCountLabel = computed(() =>
+  t(
+    'errorOverlay.errorCount',
+    { count: totalErrorCount.value },
+    totalErrorCount.value
+  )
+)
+
+const isVisible = computed(
+  () => isErrorOverlayOpen.value && totalErrorCount.value > 0
+)
 
 function dismiss() {
   executionErrorStore.dismissErrorOverlay()

src/components/error/useErrorOverlayState.test.ts

@@ -1,337 +0,0 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import { useErrorOverlayState } from './useErrorOverlayState'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
-import type { NodeError } from '@/schemas/apiSchema'
-import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
-
-const mockAllErrorGroups = vi.hoisted(() => ({ value: [] as ErrorGroup[] }))
-
-vi.mock('@/components/rightSidePanel/errors/useErrorGroups', () => ({
-  useErrorGroups: () => ({ allErrorGroups: mockAllErrorGroups })
-}))
-
-vi.mock('@/composables/graph/useNodeErrorFlagSync', () => ({
-  useNodeErrorFlagSync: vi.fn()
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    isGraphReady: false,
-    rootGraph: {
-      serialize: vi.fn(() => ({})),
-      getNodeById: vi.fn()
-    }
-  }
-}))
-
-vi.mock('@/utils/graphTraversalUtil', () => ({
-  executionIdToNodeLocatorId: vi.fn((id: string) => id),
-  getActiveGraphNodeIds: vi.fn(() => new Set()),
-  getExecutionIdByNode: vi.fn(),
-  getNodeByExecutionId: vi.fn()
-}))
-
-function createTestI18n() {
-  return createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        errorOverlay: {
-          errorCount: '{count} ERROR | {count} ERRORS',
-          multipleErrorCount: '{count} error found | {count} errors found',
-          multipleErrorsMessage: 'Resolve them before running the workflow.'
-        }
-      }
-    }
-  })
-}
-
-function makeNodeError(messages: string[]): NodeError {
-  return {
-    class_type: 'KSampler',
-    dependent_outputs: [],
-    errors: messages.map((message) => ({
-      type: 'execution_error',
-      message,
-      details: 'details'
-    }))
-  }
-}
-
-function mountOverlayState() {
-  const pinia = createPinia()
-  setActivePinia(pinia)
-
-  const Harness = defineComponent({
-    setup() {
-      return useErrorOverlayState()
-    },
-    template: `
-      <section>
-        <span data-testid="visible">{{ isVisible }}</span>
-        <span data-testid="title">{{ overlayTitle }}</span>
-        <span data-testid="message">{{ overlayMessage }}</span>
-      </section>
-    `
-  })
-
-  return render(Harness, {
-    global: {
-      plugins: [pinia, createTestI18n()]
-    }
-  })
-}
-
-describe('useErrorOverlayState', () => {
-  beforeEach(() => {
-    mockAllErrorGroups.value = []
-  })
-
-  it('uses the raw message for a single uncataloged execution error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Execution failed',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [{ message: 'Only error' }]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('visible')).toHaveTextContent('true')
-    expect(screen.getByTestId('title')).toHaveTextContent('Execution failed')
-    expect(screen.getByTestId('message')).toHaveTextContent('Only error')
-  })
-
-  it('uses toast copy for a single validation error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Required input is missing'])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Required input is missing',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [
-              {
-                message: 'Required input is missing',
-                toastTitle: 'Required input missing',
-                toastMessage: 'KSampler is missing a required input: model'
-              }
-            ]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('title')).toHaveTextContent(
-      'Required input missing'
-    )
-    expect(screen.getByTestId('message')).toHaveTextContent(
-      'KSampler is missing a required input: model'
-    )
-  })
-
-  it('uses display copy before raw copy when toast copy is absent', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Raw validation error'])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Friendly validation title',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [
-              {
-                message: 'Raw validation error',
-                displayMessage: 'Friendly validation message'
-              }
-            ]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('title')).toHaveTextContent(
-      'Friendly validation title'
-    )
-    expect(screen.getByTestId('message')).toHaveTextContent(
-      'Friendly validation message'
-    )
-  })
-
-  it('uses toast copy for a single runtime error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastExecutionError = {
-      prompt_id: 'prompt',
-      node_id: 1,
-      node_type: 'KSampler',
-      executed: [],
-      exception_message: 'CUDA out of memory',
-      exception_type: 'torch.OutOfMemoryError',
-      traceback: [],
-      timestamp: Date.now()
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Generation failed',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [
-              {
-                message: 'torch.OutOfMemoryError: CUDA out of memory',
-                toastTitle: 'Generation failed',
-                toastMessage:
-                  'Not enough GPU memory. Try reducing image resolution or batch size and run again.'
-              }
-            ]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('title')).toHaveTextContent('Generation failed')
-    expect(screen.getByTestId('message')).toHaveTextContent(
-      'Not enough GPU memory. Try reducing image resolution or batch size and run again.'
-    )
-  })
-
-  it('uses group toast copy for a single missing media error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    const missingMediaStore = useMissingMediaStore()
-    missingMediaStore.setMissingMedia([
-      {
-        nodeId: '1',
-        nodeType: 'LoadImage',
-        widgetName: 'image',
-        mediaType: 'image',
-        name: 'image.png',
-        isMissing: true
-      }
-    ])
-    mockAllErrorGroups.value = [
-      {
-        type: 'missing_media',
-        groupKey: 'missing_media',
-        displayTitle: 'Media input missing',
-        displayMessage: 'A required media input has no file selected.',
-        toastTitle: 'Media input missing',
-        toastMessage: 'Load Image is missing a required media file.',
-        priority: 3
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('title')).toHaveTextContent('Media input missing')
-    expect(screen.getByTestId('message')).toHaveTextContent(
-      'Load Image is missing a required media file.'
-    )
-  })
-
-  it('does not show when a raw error has no resolved overlay message', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('visible')).toHaveTextContent('false')
-    expect(screen.getByTestId('message')).toBeEmptyDOMElement()
-  })
-
-  it('uses aggregate copy for multiple errors', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError([
-        'First error',
-        'Second error',
-        'Third error',
-        'Fourth error',
-        'Fifth error',
-        'Sixth error',
-        'Seventh error'
-      ])
-    }
-    mockAllErrorGroups.value = [
-      {
-        type: 'execution',
-        groupKey: 'execution:KSampler',
-        displayTitle: 'Execution failed',
-        priority: 0,
-        cards: [
-          {
-            id: '1',
-            title: 'KSampler',
-            errors: [{ message: 'First error' }]
-          }
-        ]
-      }
-    ]
-    executionErrorStore.showErrorOverlay()
-    await nextTick()
-
-    expect(screen.getByTestId('visible')).toHaveTextContent('true')
-    expect(screen.getByTestId('title')).toHaveTextContent('7 errors found')
-    expect(screen.getByTestId('message')).toHaveTextContent(
-      'Resolve them before running the workflow.'
-    )
-  })
-})

src/components/error/useErrorOverlayState.ts

@@ -1,103 +0,0 @@
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { storeToRefs } from 'pinia'
-
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
-import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
-
-function resolveSingleOverlayCopy(
-  group: ErrorGroup
-): { title?: string; message: string } | undefined {
-  if (group.type === 'execution') {
-    const [card] = group.cards
-    const [error] = card?.errors ?? []
-    const message =
-      error?.toastMessage ??
-      error?.displayMessage ??
-      error?.message ??
-      group.displayMessage ??
-      group.displayTitle
-
-    if (!message) return undefined
-
-    return {
-      title: error?.toastTitle ?? error?.displayTitle ?? group.displayTitle,
-      message
-    }
-  }
-
-  const message =
-    group.toastMessage ?? group.displayMessage ?? group.displayTitle
-  if (!message) return undefined
-
-  return {
-    title: group.toastTitle ?? group.displayTitle,
-    message
-  }
-}
-
-export function useErrorOverlayState() {
-  const { t } = useI18n()
-  const executionErrorStore = useExecutionErrorStore()
-  const { totalErrorCount, isErrorOverlayOpen } =
-    storeToRefs(executionErrorStore)
-  const { allErrorGroups } = useErrorGroups('')
-
-  const hasExactlyOneError = computed(() => totalErrorCount.value === 1)
-  const hasMultipleErrors = computed(() => totalErrorCount.value > 1)
-  const singleErrorGroup = computed(() =>
-    hasExactlyOneError.value && allErrorGroups.value.length === 1
-      ? allErrorGroups.value[0]
-      : undefined
-  )
-
-  const errorCountLabel = computed(() =>
-    t(
-      'errorOverlay.errorCount',
-      { count: totalErrorCount.value },
-      totalErrorCount.value
-    )
-  )
-
-  const multipleErrorCountLabel = computed(() =>
-    t(
-      'errorOverlay.multipleErrorCount',
-      { count: totalErrorCount.value },
-      totalErrorCount.value
-    )
-  )
-
-  const singleOverlayCopy = computed(() =>
-    singleErrorGroup.value
-      ? resolveSingleOverlayCopy(singleErrorGroup.value)
-      : undefined
-  )
-
-  const overlayMessage = computed(() => {
-    if (hasMultipleErrors.value) {
-      return t('errorOverlay.multipleErrorsMessage')
-    }
-
-    return singleOverlayCopy.value?.message ?? ''
-  })
-
-  const overlayTitle = computed(() =>
-    hasMultipleErrors.value
-      ? multipleErrorCountLabel.value
-      : (singleOverlayCopy.value?.title ?? errorCountLabel.value)
-  )
-
-  const isVisible = computed(
-    () =>
-      isErrorOverlayOpen.value &&
-      totalErrorCount.value > 0 &&
-      overlayMessage.value.trim().length > 0
-  )
-
-  return {
-    isVisible,
-    overlayMessage,
-    overlayTitle
-  }
-}

src/components/graph/SelectionToolbox.vue

@@ -20,7 +20,6 @@
         <InfoButton v-if="canOpenNodeInfo" />
 
         <ColorPickerButton v-if="showColorPicker" />
-        <ArrangeButton v-if="showArrange" />
         <FrameNodes v-if="showFrameNodes" />
         <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
         <ConfigureSubgraph v-if="showSubgraphButtons" />
@@ -50,7 +49,6 @@
 import Panel from 'primevue/panel'
 import { computed, ref } from 'vue'
 
-import ArrangeButton from '@/components/graph/selectionToolbox/ArrangeButton.vue'
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
 import ConfigureSubgraph from '@/components/graph/selectionToolbox/ConfigureSubgraph.vue'
@@ -112,7 +110,6 @@ const {
 
 const showColorPicker = computed(() => hasAnySelection.value)
 const showConvertToSubgraph = computed(() => hasAnySelection.value)
-const showArrange = computed(() => hasMultipleSelection.value)
 const showFrameNodes = computed(() => hasMultipleSelection.value)
 const showSubgraphButtons = computed(() => isSingleSubgraph.value)
 
@@ -131,7 +128,6 @@ const showAnyPrimaryActions = computed(
   () =>
     showColorPicker.value ||
     showConvertToSubgraph.value ||
-    showArrange.value ||
     showFrameNodes.value ||
     showSubgraphButtons.value
 )

src/components/graph/selectionToolbox/ArrangeButton.vue

@@ -1,115 +0,0 @@
-<template>
-  <PopoverRoot v-model:open="isOpen">
-    <PopoverTrigger as-child>
-      <Button
-        v-tooltip.top="{ value: t('g.arrange'), showDelay: 1000 }"
-        variant="muted-textonly"
-        :aria-label="t('g.arrange')"
-      >
-        <div class="flex items-center gap-1 px-0">
-          <i class="icon-[lucide--layout-grid]" />
-          <i class="icon-[lucide--chevron-down]" />
-        </div>
-      </Button>
-    </PopoverTrigger>
-    <PopoverPortal>
-      <PopoverContent
-        side="bottom"
-        :side-offset="5"
-        :collision-padding="10"
-        class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade z-1700 rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
-      >
-        <div
-          v-if="activeLayout"
-          class="flex w-32 flex-row items-center px-2 py-1"
-        >
-          <Slider
-            :model-value="[gap]"
-            :min="MIN_ARRANGE_GAP"
-            :max="MAX_ARRANGE_GAP"
-            :step="1"
-            :aria-label="t('g.arrangeSpacing')"
-            @update:model-value="onSliderUpdate"
-            @value-commit="onSliderCommit"
-          />
-        </div>
-        <div v-else class="flex flex-row gap-1">
-          <Button
-            v-tooltip.top="{
-              value: t('g.arrangeVertically'),
-              showDelay: 1000
-            }"
-            variant="muted-textonly"
-            :aria-label="t('g.arrangeVertically')"
-            @click="start('vertical')"
-          >
-            <i class="icon-[lucide--stretch-horizontal]" />
-          </Button>
-          <Button
-            v-tooltip.top="{
-              value: t('g.arrangeHorizontally'),
-              showDelay: 1000
-            }"
-            variant="muted-textonly"
-            :aria-label="t('g.arrangeHorizontally')"
-            @click="start('horizontal')"
-          >
-            <i class="icon-[lucide--stretch-vertical]" />
-          </Button>
-          <Button
-            v-tooltip.top="{ value: t('g.arrangeAsGrid'), showDelay: 1000 }"
-            variant="muted-textonly"
-            :aria-label="t('g.arrangeAsGrid')"
-            @click="start('grid')"
-          >
-            <i class="icon-[lucide--grid-3x3]" />
-          </Button>
-        </div>
-        <PopoverArrow class="fill-base-background stroke-border-subtle" />
-      </PopoverContent>
-    </PopoverPortal>
-  </PopoverRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  PopoverArrow,
-  PopoverContent,
-  PopoverPortal,
-  PopoverRoot,
-  PopoverTrigger
-} from 'reka-ui'
-import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import Slider from '@/components/ui/slider/Slider.vue'
-import {
-  MAX_ARRANGE_GAP,
-  MIN_ARRANGE_GAP
-} from '@/composables/graph/useArrangeNodes'
-import { useArrangeSession } from '@/composables/graph/useArrangeSession'
-
-const { t } = useI18n()
-const { activeLayout, gap, start, previewGap, commitGap, reset } =
-  useArrangeSession()
-
-const isOpen = ref(false)
-
-watch(isOpen, (open) => {
-  if (!open) reset()
-})
-
-const firstValue = (value: number[] | undefined): number | undefined =>
-  value?.[0]
-
-const onSliderUpdate = (value: number[] | undefined) => {
-  const next = firstValue(value)
-  if (next !== undefined) previewGap(next)
-}
-
-const onSliderCommit = (value: number[]) => {
-  const next = firstValue(value)
-  if (next !== undefined) commitGap(next)
-}
-</script>

src/components/load3d/Load3DControls.vue

@@ -71,6 +71,7 @@
         v-if="showCameraControls"
         v-model:camera-type="cameraConfig!.cameraType"
         v-model:fov="cameraConfig!.fov"
+        v-model:retain-view-on-reload="cameraConfig!.retainViewOnReload"
       />
 
       <div v-if="showLightControls" class="flex flex-col">

src/components/load3d/controls/CameraControls.vue

@@ -18,10 +18,32 @@
       v-model="fov"
       :tooltip-text="$t('load3d.fov')"
     />
+    <Button
+      v-tooltip.right="{
+        value: $t('load3d.retainViewOnReload'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('load3d.retainViewOnReload')"
+      :aria-pressed="retainViewOnReload"
+      @click="retainViewOnReload = !retainViewOnReload"
+    >
+      <i
+        :class="
+          cn(
+            'pi text-lg text-base-foreground',
+            retainViewOnReload ? 'pi-lock' : 'pi-lock-open'
+          )
+        "
+      />
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { computed } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
@@ -30,6 +52,9 @@ import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
 const cameraType = defineModel<CameraType>('cameraType')
 const fov = defineModel<number>('fov')
+const retainViewOnReload = defineModel<boolean>('retainViewOnReload', {
+  default: false
+})
 const showFOVButton = computed(() => cameraType.value === 'perspective')
 
 const switchCamera = () => {

src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts

@@ -2,12 +2,20 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'
 
+/**
+ * ErrorNodeCard displays a single error card inside the error tab.
+ * It shows the node header (ID badge, title, action buttons)
+ * and the list of error items (message, traceback, copy button).
+ */
 const meta: Meta<typeof ErrorNodeCard> = {
   title: 'RightSidePanel/Errors/ErrorNodeCard',
   component: ErrorNodeCard,
   parameters: {
     layout: 'centered'
   },
+  argTypes: {
+    showNodeIdBadge: { control: 'boolean' }
+  },
   decorators: [
     (story) => ({
       components: { story },
@@ -97,36 +105,58 @@ const promptOnlyCard: ErrorCardData = {
   ]
 }
 
-export const SingleValidationError: Story = {
+/** Single validation error with node ID badge visible */
+export const WithNodeIdBadge: Story = {
   args: {
-    card: singleErrorCard
+    card: singleErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Single validation error without node ID badge */
+export const WithoutNodeIdBadge: Story = {
+  args: {
+    card: singleErrorCard,
+    showNodeIdBadge: false
   }
 }
 
 /** Subgraph node error — shows "Enter subgraph" button */
 export const WithEnterSubgraphButton: Story = {
   args: {
-    card: subgraphErrorCard
+    card: subgraphErrorCard,
+    showNodeIdBadge: true
+  }
+}
+
+/** Regular node error — no "Enter subgraph" button */
+export const WithoutEnterSubgraphButton: Story = {
+  args: {
+    card: singleErrorCard,
+    showNodeIdBadge: true
   }
 }
 
 /** Multiple validation errors on one node */
 export const MultipleErrors: Story = {
   args: {
-    card: multipleErrorsCard
+    card: multipleErrorsCard,
+    showNodeIdBadge: true
   }
 }
 
 /** Runtime execution error with full traceback */
 export const RuntimeError: Story = {
   args: {
-    card: runtimeErrorCard
+    card: runtimeErrorCard,
+    showNodeIdBadge: true
   }
 }
 
 /** Prompt-level error (no node header) */
 export const PromptError: Story = {
   args: {
-    card: promptOnlyCard
+    card: promptOnlyCard,
+    showNodeIdBadge: false
   }
 }

src/components/rightSidePanel/errors/ErrorNodeCard.test.ts

@@ -71,7 +71,6 @@ describe('ErrorNodeCard.vue', () => {
         en: {
           g: {
             copy: 'Copy',
-            details: 'Details',
             findIssues: 'Find Issues',
             findOnGithub: 'Find on GitHub',
             getHelpAction: 'Get Help'
@@ -79,7 +78,6 @@ describe('ErrorNodeCard.vue', () => {
           rightSidePanel: {
             locateNode: 'Locate Node',
             enterSubgraph: 'Enter Subgraph',
-            errorLog: 'Error log',
             findOnGithubTooltip: 'Search GitHub issues for related problems',
             getHelpTooltip:
               'Report this error and we\u0027ll help you resolve it'
@@ -98,9 +96,8 @@ describe('ErrorNodeCard.vue', () => {
   ) {
     const user = userEvent.setup()
     const onCopyToClipboard = vi.fn()
-    const onLocateNode = vi.fn()
     render(ErrorNodeCard, {
-      props: { card, onCopyToClipboard, onLocateNode },
+      props: { card, onCopyToClipboard },
       global: {
         plugins: [
           PrimeVue,
@@ -134,20 +131,14 @@ describe('ErrorNodeCard.vue', () => {
           })
         ],
         stubs: {
-          TransitionCollapse: { template: '<div><slot /></div>' },
           Button: {
-            template: '<button v-bind="$attrs"><slot /></button>'
+            template:
+              '<button :aria-label="$attrs[\'aria-label\']"><slot /></button>'
           }
         }
       }
     })
-    return { user, onCopyToClipboard, onLocateNode }
-  }
-
-  async function toggleRuntimeDetails(
-    user: ReturnType<typeof userEvent.setup>
-  ) {
-    await user.click(screen.getByRole('button', { name: /Details/ }))
+    return { user, onCopyToClipboard }
   }
 
   let cardIdCounter = 0
@@ -169,67 +160,40 @@ describe('ErrorNodeCard.vue', () => {
     }
   }
 
-  function makePromptErrorCard(): ErrorCardData {
+  function makeValidationErrorCard(): ErrorCardData {
     return {
-      id: '__prompt__',
-      title: 'Prompt has no outputs',
+      id: `node-${++cardIdCounter}`,
+      title: 'CLIPTextEncode',
+      nodeId: '6',
+      nodeTitle: 'CLIP Text Encode',
       errors: [
         {
-          message: 'Server Error: No outputs',
-          details: 'Error details',
-          displayMessage:
-            'The workflow does not contain any output nodes to produce a result.'
+          message: 'Required input is missing',
+          details: 'Input: text'
         }
       ]
     }
   }
 
-  it('shows runtime details by default and can collapse them', async () => {
+  it('displays enriched report for runtime errors on mount', async () => {
     const reportText =
       '# ComfyUI Error Report\n## System Information\n- OS: Linux'
     mockGenerateErrorReport.mockReturnValue(reportText)
 
-    const { user } = renderCard(makeRuntimeErrorCard())
+    renderCard(makeRuntimeErrorCard())
 
     await waitFor(() => {
-      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+      expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
     })
-    expect(screen.queryByRole('listitem')).not.toBeInTheDocument()
-    expect(screen.getByText('Error log')).toBeInTheDocument()
-    const detailsButton = screen.getByRole('button', { name: /Details/ })
-    const detailsRegion = screen.getByRole('region', { name: 'Error log' })
-    expect(detailsButton).toHaveAttribute(
-      'aria-controls',
-      detailsRegion.getAttribute('id')
-    )
-    expect(screen.getByText(/ComfyUI Error Report/)).toBeInTheDocument()
     expect(screen.getByText(/System Information/)).toBeInTheDocument()
     expect(screen.getByText(/OS: Linux/)).toBeInTheDocument()
-    expect(
-      screen.getByRole('button', { name: /Find on GitHub/ })
-    ).toBeInTheDocument()
-
-    await toggleRuntimeDetails(user)
-
-    expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: /Find on GitHub/ })
-    ).not.toBeInTheDocument()
-  })
-
-  it('locates the node when the runtime node title is clicked', async () => {
-    const { user, onLocateNode } = renderCard(makeRuntimeErrorCard())
-
-    await user.click(screen.getByRole('button', { name: 'KSampler' }))
-
-    expect(onLocateNode).toHaveBeenCalledWith('10')
   })
 
   it('does not generate report for non-runtime errors', async () => {
-    renderCard(makePromptErrorCard())
+    renderCard(makeValidationErrorCard())
 
     await waitFor(() => {
-      expect(screen.getByText('Error details')).toBeInTheDocument()
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
     })
 
     expect(mockGetLogs).not.toHaveBeenCalled()
@@ -237,15 +201,15 @@ describe('ErrorNodeCard.vue', () => {
   })
 
   it('displays original details for non-runtime errors', async () => {
-    renderCard(makePromptErrorCard())
+    renderCard(makeValidationErrorCard())
 
     await waitFor(() => {
-      expect(screen.getByText('Error details')).toBeInTheDocument()
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
     })
     expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
   })
 
-  it('hides grouped catalog copy and shows the item label as a list item', async () => {
+  it('displays catalog-resolved copy when available', async () => {
     renderCard({
       id: `node-${++cardIdCounter}`,
       title: 'KSampler',
@@ -265,17 +229,17 @@ describe('ErrorNodeCard.vue', () => {
     })
 
     await waitFor(() => {
-      expect(screen.getByText('KSampler - model')).toBeInTheDocument()
+      expect(screen.getByText('Missing connection')).toBeInTheDocument()
     })
-    expect(screen.getByRole('listitem')).toHaveTextContent('KSampler - model')
-    expect(screen.queryByText('Missing connection')).not.toBeInTheDocument()
     expect(
-      screen.queryByText(
-        'Required input slots have no connection feeding them.'
-      )
-    ).not.toBeInTheDocument()
+      screen.getByText('Required input slots have no connection feeding them.')
+    ).toBeInTheDocument()
     expect(
-      screen.queryByText('KSampler is missing a required input: model')
+      screen.getByText('KSampler is missing a required input: model')
+    ).toBeInTheDocument()
+    expect(screen.queryByText('KSampler - model')).not.toBeInTheDocument()
+    expect(
+      screen.queryByText('Required input is missing')
     ).not.toBeInTheDocument()
   })
 
@@ -286,9 +250,8 @@ describe('ErrorNodeCard.vue', () => {
     const { user, onCopyToClipboard } = renderCard(makeRuntimeErrorCard())
 
     await waitFor(() => {
-      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+      expect(screen.getByText(/Full Report Content/)).toBeInTheDocument()
     })
-    expect(screen.getByText(/Full Report Content/)).toBeInTheDocument()
 
     await user.click(screen.getByRole('button', { name: /Copy/ }))
 
@@ -298,6 +261,21 @@ describe('ErrorNodeCard.vue', () => {
     )
   })
 
+  it('copies original details when copy button is clicked for validation error', async () => {
+    const { user, onCopyToClipboard } = renderCard(makeValidationErrorCard())
+
+    await waitFor(() => {
+      expect(screen.getByText('Input: text')).toBeInTheDocument()
+    })
+
+    await user.click(screen.getByRole('button', { name: /Copy/ }))
+
+    expect(onCopyToClipboard).toHaveBeenCalledTimes(1)
+    expect(onCopyToClipboard.mock.calls[0][0]).toBe(
+      'Required input is missing\n\nInput: text'
+    )
+  })
+
   it('generates report with fallback logs when getLogs fails', async () => {
     mockGetLogs.mockRejectedValue(new Error('Network error'))
 
@@ -322,9 +300,8 @@ describe('ErrorNodeCard.vue', () => {
     renderCard(makeRuntimeErrorCard())
 
     await waitFor(() => {
-      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
     })
-    expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
   })
 
   it('opens GitHub issues search when Find Issue button is clicked', async () => {
@@ -333,7 +310,9 @@ describe('ErrorNodeCard.vue', () => {
     const { user } = renderCard(makeRuntimeErrorCard())
 
     await waitFor(() => {
-      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+      expect(
+        screen.getByRole('button', { name: /Find on GitHub/ })
+      ).toBeInTheDocument()
     })
 
     await user.click(screen.getByRole('button', { name: /Find on GitHub/ }))
@@ -356,7 +335,9 @@ describe('ErrorNodeCard.vue', () => {
     const { user } = renderCard(makeRuntimeErrorCard())
 
     await waitFor(() => {
-      expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+      expect(
+        screen.getByRole('button', { name: /Get Help/ })
+      ).toBeInTheDocument()
     })
 
     await user.click(screen.getByRole('button', { name: /Get Help/ }))
@@ -417,7 +398,9 @@ describe('ErrorNodeCard.vue', () => {
       }
     })
 
-    expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText(/Traceback line 1/)).toBeInTheDocument()
+    })
 
     expect(mockGenerateErrorReport).not.toHaveBeenCalled()
   })

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+    <!-- Card Header -->
     <div
       v-if="card.nodeId && !compact"
       class="flex flex-wrap items-center gap-2 py-2"
     >
-      <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"
+        v-if="showNodeIdBadge"
+        class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+      >
+        #{{ card.nodeId }}
+      </span>
+      <span
+        v-if="card.nodeTitle || card.title"
         class="flex-1 truncate text-sm font-medium text-muted-foreground"
       >
         {{ card.nodeTitle || card.title }}
@@ -28,24 +27,6 @@
         >
           {{ t('rightSidePanel.enterSubgraph') }}
         </Button>
-        <Button
-          v-if="hasRuntimeError"
-          variant="textonly"
-          size="icon-sm"
-          :class="
-            cn(
-              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground',
-              runtimeDetailsExpanded &&
-                'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
-            )
-          "
-          :aria-label="t('g.details')"
-          :aria-controls="runtimeDetailsControlIds || undefined"
-          :aria-expanded="runtimeDetailsExpanded"
-          @click.stop="toggleRuntimeDetails"
-        >
-          <i class="icon-[lucide--monitor-x] size-4" />
-        </Button>
         <Button
           variant="textonly"
           size="icon-sm"
@@ -58,143 +39,120 @@
       </div>
     </div>
 
+    <!-- Multiple Errors within one Card -->
     <div
       class="flex min-h-0 flex-1 flex-col space-y-4 divide-y divide-interface-stroke/20"
     >
+      <!-- Card Content -->
       <div
         v-for="(error, idx) in card.errors"
         :key="idx"
-        class="flex min-h-0 flex-col gap-3"
+        :class="
+          cn(
+            'flex min-h-0 flex-col gap-3',
+            fullHeight && error.isRuntimeError && 'flex-1'
+          )
+        "
       >
+        <!-- Human-friendly category/title when resolved by the error catalog. -->
         <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"
+          v-if="error.displayTitle"
+          class="m-0 px-0.5 text-sm font-semibold text-destructive-background-hover"
         >
-          {{ getInlineMessage(error) }}
+          {{ error.displayTitle }}
         </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"
+        <!-- Error Message -->
+        <p
+          v-if="getDisplayMessage(error)"
+          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
         >
-          <li class="min-w-0 wrap-break-word">
-            <button
-              v-if="card.nodeId"
-              type="button"
-              class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
-              @click="handleLocateNode"
-            >
-              {{ getInlineItemLabel(error) }}
-            </button>
-            <span v-else>
-              {{ getInlineItemLabel(error) }}
-            </span>
-          </li>
-        </ul>
+          {{ getDisplayMessage(error) }}
+        </p>
 
+        <!-- Traceback / Details (enriched with full report for runtime errors) -->
         <div
-          v-if="!error.isRuntimeError && getInlineDetails(error, idx)"
+          v-if="displayedDetailsMap[idx]"
           :class="
             cn(
-              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background p-2.5',
-              'max-h-[6lh]'
+              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background-hover p-2.5',
+              error.isRuntimeError
+                ? fullHeight
+                  ? 'min-h-0 flex-1'
+                  : 'max-h-[15lh]'
+                : 'max-h-[6lh]'
             )
           "
         >
           <p
             class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
           >
-            {{ getInlineDetails(error, idx) }}
+            {{ displayedDetailsMap[idx] }}
           </p>
         </div>
 
-        <TransitionCollapse>
-          <div
-            v-if="error.isRuntimeError && isRuntimeDisclosureExpanded"
-            :id="getRuntimeDetailsId(idx)"
-            role="region"
-            data-testid="runtime-error-panel"
-            :aria-label="t('rightSidePanel.errorLog')"
-            class="flex min-h-0 flex-col gap-3"
-          >
-            <div
-              v-if="getInlineDetails(error, idx)"
-              class="overflow-hidden rounded-lg border border-interface-stroke/30 bg-secondary-background"
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2">
+            <Button
+              v-tooltip.top="t('rightSidePanel.findOnGithubTooltip')"
+              variant="secondary"
+              size="sm"
+              class="h-8 w-2/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-find-on-github"
+              @click="handleCheckGithub(error)"
             >
-              <div
-                class="flex items-center justify-between gap-2 px-3 pt-3 pb-2"
-              >
-                <span
-                  class="text-xs font-semibold tracking-wide text-base-foreground uppercase"
-                >
-                  {{ t('rightSidePanel.errorLog') }}
-                </span>
-                <Button
-                  variant="textonly"
-                  size="icon-sm"
-                  class="size-7 shrink-0 text-muted-foreground hover:text-base-foreground"
-                  :aria-label="t('g.copy')"
-                  data-testid="error-card-copy"
-                  @click="handleCopyError(idx)"
-                >
-                  <i class="icon-[lucide--copy] size-4" />
-                </Button>
-              </div>
-              <div class="max-h-[15lh] overflow-y-auto px-3 pb-3">
-                <p
-                  class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
-                >
-                  {{ getInlineDetails(error, idx) }}
-                </p>
-              </div>
-
-              <div class="mx-3 mt-1 h-px bg-base-foreground/20" />
-              <div class="mx-3 flex items-center justify-between gap-2 py-2">
-                <Button
-                  v-tooltip.top="t('rightSidePanel.getHelpTooltip')"
-                  variant="textonly"
-                  size="sm"
-                  class="h-8 justify-start gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
-                  @click="handleGetHelp"
-                >
-                  <i class="icon-[lucide--external-link] size-3.5" />
-                  {{ t('g.getHelpAction') }}
-                </Button>
-                <Button
-                  v-tooltip.top="t('rightSidePanel.findOnGithubTooltip')"
-                  variant="textonly"
-                  size="sm"
-                  class="h-8 justify-end gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
-                  data-testid="error-card-find-on-github"
-                  @click="handleCheckGithub(error)"
-                >
-                  <i class="icon-[lucide--github] size-3.5" />
-                  {{ t('g.findOnGithub') }}
-                </Button>
-              </div>
-            </div>
+              {{ t('g.findOnGithub') }}
+              <i class="icon-[lucide--github] size-3.5" />
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              class="h-8 w-1/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-copy"
+              @click="handleCopyError(idx)"
+            >
+              {{ t('g.copy') }}
+              <i class="icon-[lucide--copy] size-3.5" />
+            </Button>
           </div>
-        </TransitionCollapse>
+          <Button
+            v-tooltip.top="t('rightSidePanel.getHelpTooltip')"
+            variant="secondary"
+            size="sm"
+            class="h-8 w-full justify-center gap-1 rounded-lg text-xs"
+            @click="handleGetHelp"
+          >
+            {{ t('g.getHelpAction') }}
+            <i class="icon-[lucide--external-link] size-3.5" />
+          </Button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@comfyorg/tailwind-utils'
-import TransitionCollapse from '../layout/TransitionCollapse.vue'
 
 import type { ErrorCardData, ErrorItem } from './types'
 import { useErrorActions } from './useErrorActions'
 import { useErrorReport } from './useErrorReport'
 
-const { card, compact = false } = defineProps<{
+const {
+  card,
+  showNodeIdBadge = false,
+  compact = false,
+  fullHeight = false
+} = defineProps<{
   card: ErrorCardData
+  showNodeIdBadge?: boolean
+  /** Hide card header and error message (used in single-node selection mode) */
   compact?: boolean
+  /** Allow runtime error details to fill available height (used in dedicated panel) */
+  fullHeight?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -206,23 +164,6 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const { displayedDetailsMap } = useErrorReport(() => card)
 const { findOnGitHub, contactSupport: handleGetHelp } = useErrorActions()
-const runtimeDetailsExpanded = ref(true)
-const hasRuntimeError = computed(() =>
-  card.errors.some((error) => error.isRuntimeError)
-)
-const isRuntimeDisclosureExpanded = computed(
-  () => compact || runtimeDetailsExpanded.value
-)
-const runtimeDetailsControlIds = computed(() =>
-  card.errors
-    .map((error, idx) => (error.isRuntimeError ? getRuntimeDetailsId(idx) : ''))
-    .filter(Boolean)
-    .join(' ')
-)
-
-function toggleRuntimeDetails() {
-  runtimeDetailsExpanded.value = !runtimeDetailsExpanded.value
-}
 
 function handleLocateNode() {
   if (card.nodeId) {
@@ -238,7 +179,7 @@ function handleEnterSubgraph() {
 
 function handleCopyError(idx: number) {
   const details = displayedDetailsMap.value[idx]
-  const message = getCopyMessage(card.errors[idx])
+  const message = getDisplayMessage(card.errors[idx])
   emit('copyToClipboard', [message, details].filter(Boolean).join('\n\n'))
 }
 
@@ -246,26 +187,7 @@ function handleCheckGithub(error: ErrorItem) {
   findOnGitHub(error.message)
 }
 
-function getCopyMessage(error: ErrorItem | undefined) {
+function getDisplayMessage(error: ErrorItem | undefined) {
   return error?.displayMessage ?? error?.message
 }
-
-function getInlineMessage(error: ErrorItem | undefined) {
-  if (!error || error.displayMessage) return undefined
-  return error.message
-}
-
-function getInlineItemLabel(error: ErrorItem | undefined) {
-  if (!error || error.isRuntimeError) return undefined
-  return error.displayItemLabel
-}
-
-function getInlineDetails(error: ErrorItem | undefined, idx: number) {
-  if (getInlineItemLabel(error)) return undefined
-  return displayedDetailsMap.value[idx]
-}
-
-function getRuntimeDetailsId(idx: number) {
-  return `${card.id}-runtime-details-${idx}`
-}
 </script>

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -90,6 +90,8 @@ const i18n = createI18n({
     en: {
       rightSidePanel: {
         missingNodePacks: {
+          ossMessage: 'Missing node packs detected. Install them.',
+          cloudMessage: 'Unsupported node packs detected.',
           ossManagerDisabledHint:
             'To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.',
           applyChanges: 'Apply Changes'
@@ -157,6 +159,21 @@ describe('MissingNodeCard', () => {
   })
 
   describe('Rendering & Props', () => {
+    it('renders cloud message when isCloud is true', () => {
+      mockIsCloud.value = true
+      renderCard()
+      expect(
+        screen.getByText('Unsupported node packs detected.')
+      ).toBeInTheDocument()
+    })
+
+    it('renders OSS message when isCloud is false', () => {
+      renderCard()
+      expect(
+        screen.getByText('Missing node packs detected. Install them.')
+      ).toBeInTheDocument()
+    })
+
     it('renders correct number of MissingPackGroupRow components', () => {
       renderCard({ missingPackGroups: makePackGroups(3) })
       expect(screen.getAllByTestId('pack-row')).toHaveLength(3)

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -36,6 +36,19 @@
         </div>
       </div>
     </div>
+
+    <!-- Sub-label: cloud or OSS message shown above all pack groups -->
+    <p
+      class="m-0 text-sm/relaxed text-muted-foreground"
+      :class="showManagerHint ? 'pb-3' : 'pb-5'"
+    >
+      {{
+        isCloud
+          ? t('rightSidePanel.missingNodePacks.cloudMessage')
+          : t('rightSidePanel.missingNodePacks.ossMessage')
+      }}
+    </p>
+
     <!-- Manager disabled hint: shown on OSS when manager is not active -->
     <i18n-t
       v-if="showManagerHint"

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -1,17 +1,12 @@
 import { createTestingPinia } from '@pinia/testing'
-import { render, screen, within } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import TabErrors from './TabErrors.vue'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
-import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
-import type { MissingNodeType } from '@/types/comfy'
-
-const mockFocusNode = vi.hoisted(() => vi.fn())
-const mockEnterSubgraph = vi.hoisted(() => vi.fn())
 
 vi.mock('@/scripts/app', () => ({
   app: {
@@ -41,28 +36,10 @@ vi.mock('@/services/litegraphService', () => ({
   }))
 }))
 
-vi.mock('@/composables/canvas/useFocusNode', () => ({
-  useFocusNode: vi.fn(() => ({
-    focusNode: mockFocusNode,
-    enterSubgraph: mockEnterSubgraph
-  }))
-}))
-
-vi.mock('@/platform/missingModel/missingModelDownload', () => ({
-  downloadModel: vi.fn(),
-  fetchModelMetadata: vi.fn().mockResolvedValue({
-    fileSize: null,
-    gatedRepoUrl: null
-  }),
-  isModelDownloadable: vi.fn(() => true),
-  toBrowsableUrl: vi.fn((url: string) => url)
-}))
-
 describe('TabErrors.vue', () => {
   let i18n: ReturnType<typeof createI18n>
 
   beforeEach(() => {
-    vi.clearAllMocks()
     i18n = createI18n({
       legacy: false,
       locale: 'en',
@@ -70,39 +47,16 @@ describe('TabErrors.vue', () => {
         en: {
           g: {
             workflow: 'Workflow',
-            copy: 'Copy',
-            details: 'Details',
-            findOnGithub: 'Find on GitHub',
-            getHelpAction: 'Get Help'
+            copy: 'Copy'
           },
           rightSidePanel: {
             noErrors: 'No errors',
             noneSearchDesc: 'No results found',
-            errorHelp: 'Error help',
-            errorLog: 'Error log',
-            findOnGithubTooltip: 'Search GitHub issues',
-            getHelpTooltip: 'Get help',
-            info: 'Info',
-            infoFor: 'Info for {item}',
-            locateNode: 'Locate node',
-            locateNodeFor: 'Locate {item}',
             missingModels: {
               missingModelsTitle: 'Missing Models',
               downloadAll: 'Download all',
               refresh: 'Refresh',
               refreshing: 'Refreshing missing models.'
-            },
-            missingMedia: {
-              missingMediaTitle: 'Missing Inputs',
-              image: 'Images',
-              uploadFile: 'Upload {type}',
-              useFromLibrary: 'Use from Library',
-              confirmSelection: 'Confirm selection',
-              locateNode: 'Locate node',
-              expandNodes: 'Show referencing nodes',
-              collapseNodes: 'Hide referencing nodes',
-              cancelSelection: 'Cancel selection',
-              or: 'OR'
             }
           }
         }
@@ -166,111 +120,29 @@ describe('TabErrors.vue', () => {
     expect(screen.queryByText('Error details')).not.toBeInTheDocument()
   })
 
-  it('renders node validation errors grouped by catalog copy', async () => {
+  it('renders node validation errors grouped by class_type', async () => {
     const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
-    vi.mocked(getNodeByExecutionId).mockImplementation((_, nodeId) => {
-      const titles: Record<string, string> = {
-        '1': 'KSampler',
-        '2': 'CLIP Text Encode'
-      }
-      return {
-        title: titles[String(nodeId)] ?? ''
-      } as ReturnType<typeof getNodeByExecutionId>
-    })
+    vi.mocked(getNodeByExecutionId).mockReturnValue({
+      title: 'CLIP Text Encode'
+    } as ReturnType<typeof getNodeByExecutionId>)
 
-    const { user } = renderComponent({
+    renderComponent({
       executionError: {
         lastNodeErrors: {
-          '2': {
+          '6': {
             class_type: 'CLIPTextEncode',
             errors: [
-              {
-                type: 'required_input_missing',
-                message: 'Required input is missing',
-                details: 'Input: clip',
-                extra_info: {
-                  input_name: 'clip'
-                }
-              }
-            ]
-          },
-          '1': {
-            class_type: 'KSampler',
-            errors: [
-              {
-                type: 'required_input_missing',
-                message: 'Required input is missing',
-                details: 'Input: positive',
-                extra_info: {
-                  input_name: 'positive'
-                }
-              },
-              {
-                type: 'required_input_missing',
-                message: 'Required input is missing',
-                details: 'Input: model',
-                extra_info: {
-                  input_name: 'model'
-                }
-              }
+              { message: 'Required input is missing', details: 'Input: text' }
             ]
           }
         }
       }
     })
 
-    expect(screen.getByText('Missing connection')).toBeInTheDocument()
-    expect(screen.getByText('(3)')).toBeInTheDocument()
-    expect(
-      screen.getAllByText(
-        'Required input slots have no connection feeding them.'
-      )
-    ).toHaveLength(1)
-    expect(screen.queryByText('#1')).not.toBeInTheDocument()
-    expect(screen.queryByText('#2')).not.toBeInTheDocument()
-    expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
-    expect(screen.queryByText('CLIP Text Encode')).not.toBeInTheDocument()
-
-    const itemRows = screen.getAllByRole('listitem')
-    expect(itemRows).toHaveLength(3)
-    expect(itemRows[0]).toHaveTextContent('KSampler - model')
-    expect(itemRows[1]).toHaveTextContent('KSampler - positive')
-    expect(itemRows[2]).toHaveTextContent('CLIP Text Encode - clip')
-
-    const infoButton = within(itemRows[1]).getByRole('button', {
-      name: 'Info for KSampler - positive'
-    })
-
-    await user.click(infoButton)
-
-    const itemDetail = screen.getByText(
-      'KSampler is missing a required input: positive'
-    )
-    expect(infoButton).toHaveAttribute(
-      'aria-controls',
-      itemDetail.getAttribute('id')
-    )
-
-    const labelLocateButton = within(itemRows[1]).getByRole('button', {
-      name: 'KSampler - positive'
-    })
-
-    await user.click(labelLocateButton)
-    expect(mockFocusNode.mock.calls.at(-1)?.[0]).toBe('1')
-
-    const iconLocateButton = within(itemRows[2]).getByRole('button', {
-      name: 'Locate CLIP Text Encode - clip'
-    })
-
-    await user.click(iconLocateButton)
-    expect(mockFocusNode.mock.calls.at(-1)?.[0]).toBe('2')
-
-    expect(
-      screen.queryByText('Required input is missing')
-    ).not.toBeInTheDocument()
-    expect(screen.queryByText('Input: model')).not.toBeInTheDocument()
-    expect(screen.queryByText('Input: positive')).not.toBeInTheDocument()
-    expect(screen.queryByText('Input: clip')).not.toBeInTheDocument()
+    expect(screen.getByText('CLIPTextEncode')).toBeInTheDocument()
+    expect(screen.getByText('#6')).toBeInTheDocument()
+    expect(screen.getByText('CLIP Text Encode')).toBeInTheDocument()
+    expect(screen.getByText('Required input is missing')).toBeInTheDocument()
   })
 
   it('renders runtime execution errors from WebSocket', async () => {
@@ -279,7 +151,7 @@ describe('TabErrors.vue', () => {
       title: 'KSampler'
     } as ReturnType<typeof getNodeByExecutionId>)
 
-    const { user } = renderComponent({
+    renderComponent({
       executionError: {
         lastExecutionError: {
           prompt_id: 'abc',
@@ -294,16 +166,12 @@ describe('TabErrors.vue', () => {
     })
 
     expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('#10')).toBeInTheDocument()
     expect(screen.getByText('Execution failed')).toBeInTheDocument()
     expect(
       screen.getByText('Node threw an error during execution.')
     ).toBeInTheDocument()
-    expect(screen.getByText('Error log')).toBeInTheDocument()
     expect(screen.getByText(/Line 1/)).toBeInTheDocument()
-
-    await user.click(screen.getByRole('button', { name: 'Details' }))
-
-    expect(screen.queryByText(/Line 1/)).not.toBeInTheDocument()
   })
 
   it('filters errors based on search query', async () => {
@@ -338,7 +206,7 @@ describe('TabErrors.vue', () => {
     expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
   })
 
-  it('calls copyToClipboard when a runtime error copy button is clicked', async () => {
+  it('calls copyToClipboard when copy button is clicked', async () => {
     const { useCopyToClipboard } =
       await import('@/composables/useCopyToClipboard')
     const mockCopy = vi.fn()
@@ -346,26 +214,21 @@ describe('TabErrors.vue', () => {
 
     const { user } = renderComponent({
       executionError: {
-        lastExecutionError: {
-          prompt_id: 'abc',
-          node_id: '1',
-          node_type: 'TestNode',
-          exception_message: 'Test message',
-          exception_type: 'RuntimeError',
-          traceback: ['Test details'],
-          timestamp: Date.now()
+        lastNodeErrors: {
+          '1': {
+            class_type: 'TestNode',
+            errors: [{ message: 'Test message', details: 'Test details' }]
+          }
         }
       }
     })
 
     await user.click(screen.getByTestId('error-card-copy'))
 
-    expect(mockCopy).toHaveBeenCalledWith(
-      'Node threw an error during execution.\n\nTest details'
-    )
+    expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
   })
 
-  it('renders a single runtime error in the normal execution group', async () => {
+  it('renders single runtime error outside accordion in full-height panel', async () => {
     const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
     vi.mocked(getNodeByExecutionId).mockReturnValue({
       title: 'KSampler'
@@ -387,11 +250,7 @@ describe('TabErrors.vue', () => {
 
     expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
     expect(screen.getByText('Execution failed')).toBeInTheDocument()
-    expect(
-      within(screen.getByTestId('error-group-execution')).getByTestId(
-        'runtime-error-panel'
-      )
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('runtime-error-panel')).toBeInTheDocument()
     expect(screen.getAllByText('Execution failed')).toHaveLength(1)
   })
 
@@ -423,85 +282,6 @@ describe('TabErrors.vue', () => {
     expect(missingModelStore.refreshMissingModels).toHaveBeenCalled()
   })
 
-  it('renders missing model display message below the section title', () => {
-    const missingModel = {
-      nodeId: '1',
-      nodeType: 'CheckpointLoaderSimple',
-      widgetName: 'ckpt_name',
-      name: 'local-only.safetensors',
-      directory: 'checkpoints',
-      isMissing: true,
-      isAssetSupported: true
-    } satisfies MissingModelCandidate
-
-    renderComponent({
-      missingModel: {
-        missingModelCandidates: [missingModel]
-      }
-    })
-
-    expect(screen.getByText('Missing Models (1)')).toBeInTheDocument()
-    expect(
-      screen.getByText('Download a model, or open the node to replace it.')
-    ).toBeInTheDocument()
-  })
-
-  it('renders missing media display message below the section title', () => {
-    const missingMedia = {
-      nodeId: '3',
-      nodeType: 'LoadImage',
-      widgetName: 'image',
-      mediaType: 'image',
-      name: 'portrait.png',
-      isMissing: true
-    } satisfies MissingMediaCandidate
-
-    renderComponent({
-      missingMedia: {
-        missingMediaCandidates: [missingMedia]
-      }
-    })
-
-    expect(screen.getByText('Missing Inputs (1)')).toBeInTheDocument()
-    expect(
-      screen.getByText('A required media input has no file selected.')
-    ).toBeInTheDocument()
-  })
-
-  it('renders swap node rows below the section display message', () => {
-    const swapNode = {
-      type: 'OldSampler',
-      nodeId: '1',
-      isReplaceable: true,
-      replacement: {
-        old_node_id: 'OldSampler',
-        new_node_id: 'KSampler',
-        old_widget_ids: null,
-        input_mapping: null,
-        output_mapping: null
-      }
-    } satisfies MissingNodeType
-
-    renderComponent({
-      missingNodesError: {
-        missingNodesError: {
-          message: 'Missing Node Packs',
-          nodeTypes: [swapNode]
-        }
-      }
-    })
-
-    expect(screen.getByText('Swap Nodes (1)')).toBeInTheDocument()
-    expect(
-      screen.getByText('Some nodes can be replaced with alternatives')
-    ).toBeInTheDocument()
-    expect(screen.getByText('OldSampler (1)')).toBeInTheDocument()
-    expect(screen.getByText('KSampler')).toBeInTheDocument()
-    expect(
-      screen.getByRole('button', { name: /Replace Node/ })
-    ).toBeInTheDocument()
-  })
-
   it('keeps missing model Refresh in the card actions when models are downloadable', () => {
     const missingModel = {
       nodeId: '1',

src/components/rightSidePanel/errors/TabErrors.vue

@@ -11,7 +11,32 @@
       />
     </div>
 
-    <div class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
+    <!-- Runtime error: full-height panel outside accordion -->
+    <div
+      v-if="singleRuntimeErrorCard"
+      data-testid="runtime-error-panel"
+      aria-live="polite"
+      class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-3"
+    >
+      <div
+        class="shrink-0 pb-2 text-sm font-semibold text-destructive-background-hover"
+      >
+        {{ singleRuntimeErrorGroup?.displayTitle }}
+      </div>
+      <ErrorNodeCard
+        :key="singleRuntimeErrorCard.id"
+        :card="singleRuntimeErrorCard"
+        :show-node-id-badge="showNodeIdBadge"
+        full-height
+        class="min-h-0 flex-1"
+        @locate-node="handleLocateNode"
+        @enter-subgraph="handleEnterSubgraph"
+        @copy-to-clipboard="copyToClipboard"
+      />
+    </div>
+
+    <!-- Scrollable content (non-runtime or mixed errors) -->
+    <div v-else class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
       <TransitionGroup tag="div" name="list-scale" class="relative">
         <div
           v-if="filteredGroups.length === 0"
@@ -45,13 +70,10 @@
                   {{ group.displayTitle }}
                 </span>
                 <span
-                  v-if="
-                    group.type === 'execution' &&
-                    getExecutionGroupCount(group) > 1
-                  "
+                  v-if="group.type === 'execution' && group.cards.length > 1"
                   class="text-destructive-background-hover"
                 >
-                  ({{ getExecutionGroupCount(group) }})
+                  ({{ group.cards.length }})
                 </span>
               </span>
               <Button
@@ -132,18 +154,6 @@
             </div>
           </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"
-            >
-              {{ group.displayMessage }}
-            </p>
-          </div>
-
           <!-- Missing Node Packs -->
           <MissingNodeCard
             v-if="group.type === 'missing_node'"
@@ -156,7 +166,7 @@
 
           <!-- Swap Nodes -->
           <SwapNodesCard
-            v-if="group.type === 'swap_nodes'"
+            v-else-if="group.type === 'swap_nodes'"
             :swap-node-groups="swapNodeGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-node="handleLocateMissingNode"
@@ -164,79 +174,12 @@
           />
 
           <!-- 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"
-              >
-                <div class="flex min-w-0 items-center gap-2">
-                  <span class="flex min-w-0 flex-1 items-center gap-1">
-                    <button
-                      v-tooltip.top="{
-                        value: item.displayDetails || undefined,
-                        showDelay: 300
-                      }"
-                      type="button"
-                      class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
-                      @click="handleLocateNode(item.nodeId)"
-                    >
-                      {{ item.label }}
-                    </button>
-                    <Button
-                      v-if="item.displayDetails"
-                      variant="textonly"
-                      size="icon-sm"
-                      :class="
-                        cn(
-                          'size-6 shrink-0 text-muted-foreground hover:text-base-foreground',
-                          isExecutionItemDetailExpanded(item.key) &&
-                            'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
-                        )
-                      "
-                      :aria-label="
-                        t('rightSidePanel.infoFor', { item: item.label })
-                      "
-                      :aria-controls="getExecutionItemDetailId(item.key)"
-                      :aria-expanded="isExecutionItemDetailExpanded(item.key)"
-                      @click.stop="toggleExecutionItemDetail(item.key)"
-                    >
-                      <i class="icon-[lucide--info] size-3.5" />
-                    </Button>
-                  </span>
-                  <Button
-                    variant="textonly"
-                    size="icon-sm"
-                    class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-                    :aria-label="
-                      t('rightSidePanel.locateNodeFor', { item: item.label })
-                    "
-                    @click.stop="handleLocateNode(item.nodeId)"
-                  >
-                    <i class="icon-[lucide--locate] size-4" />
-                  </Button>
-                </div>
-                <TransitionCollapse>
-                  <p
-                    v-if="
-                      item.displayDetails &&
-                      isExecutionItemDetailExpanded(item.key)
-                    "
-                    :id="getExecutionItemDetailId(item.key)"
-                    class="m-0 mt-0.5 pr-10 text-2xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
-                  >
-                    {{ item.displayDetails }}
-                  </p>
-                </TransitionCollapse>
-              </li>
-            </ul>
-          </div>
           <div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
             <ErrorNodeCard
               v-for="card in group.cards"
               :key="card.id"
               :card="card"
+              :show-node-id-badge="showNodeIdBadge"
               :compact="isSingleNodeSelected"
               @locate-node="handleLocateNode"
               @enter-subgraph="handleEnterSubgraph"
@@ -246,7 +189,7 @@
 
           <!-- Missing Models -->
           <MissingModelCard
-            v-if="group.type === 'missing_model'"
+            v-else-if="group.type === 'missing_model'"
             :missing-model-groups="missingModelGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-model="handleLocateAssetNode"
@@ -254,7 +197,7 @@
 
           <!-- Missing Media -->
           <MissingMediaCard
-            v-if="group.type === 'missing_media'"
+            v-else-if="group.type === 'missing_media'"
             :missing-media-groups="missingMediaGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-node="handleLocateAssetNode"
@@ -300,7 +243,6 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { cn } from '@comfyorg/tailwind-utils'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
@@ -312,7 +254,6 @@ import { NodeBadgeMode } from '@/types/nodeSource'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import CollapseToggleButton from '../layout/CollapseToggleButton.vue'
-import TransitionCollapse from '../layout/TransitionCollapse.vue'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
@@ -332,13 +273,6 @@ import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 
-interface ExecutionItemListEntry {
-  key: string
-  nodeId: string
-  label: string
-  displayDetails?: string
-}
-
 const ErrorPanelSurveyCta =
   isNightly && !isCloud && !isDesktop
     ? defineAsyncComponent(
@@ -361,7 +295,6 @@ const { isInstalling: isInstallingAll, installAllPacks: installAll } =
 const { replaceGroup, replaceAllGroups } = useNodeReplacement()
 
 const searchQuery = ref('')
-const expandedExecutionItemDetailKeys = ref(new Set<string>())
 const isSearching = computed(() => searchQuery.value.trim() !== '')
 
 const fullSizeGroupTypes = new Set([
@@ -380,78 +313,6 @@ const showNodeIdBadge = computed(
     NodeBadgeMode.None
 )
 
-function isExecutionItemListGroup(group: ErrorGroup) {
-  return (
-    group.type === 'execution' &&
-    group.cards.length > 0 &&
-    group.cards.every(
-      (card) =>
-        card.nodeId &&
-        card.errors.length > 0 &&
-        card.errors.every(
-          (error) => !error.isRuntimeError && Boolean(error.displayItemLabel)
-        )
-    )
-  )
-}
-
-function getExecutionItemList(group: ErrorGroup): ExecutionItemListEntry[] {
-  if (group.type !== 'execution') return []
-
-  const items: ExecutionItemListEntry[] = []
-  for (const card of group.cards) {
-    if (!card.nodeId) continue
-    for (let idx = 0; idx < card.errors.length; idx++) {
-      const error = card.errors[idx]
-      const label = error.displayItemLabel
-      if (!label) continue
-      items.push({
-        key: `${card.id}:${idx}`,
-        nodeId: card.nodeId,
-        label,
-        displayDetails: error.displayDetails
-      })
-    }
-  }
-  return items.sort(compareExecutionItemListEntry)
-}
-
-function compareExecutionItemListEntry(
-  a: ExecutionItemListEntry,
-  b: ExecutionItemListEntry
-) {
-  return (
-    a.nodeId.localeCompare(b.nodeId, undefined, { numeric: true }) ||
-    a.label.localeCompare(b.label)
-  )
-}
-
-function getExecutionGroupCount(group: ErrorGroup) {
-  if (group.type !== 'execution') return 0
-  if (isExecutionItemListGroup(group)) {
-    return group.cards.reduce((count, card) => count + card.errors.length, 0)
-  }
-  return group.cards.length
-}
-
-function isExecutionItemDetailExpanded(key: string) {
-  return expandedExecutionItemDetailKeys.value.has(key)
-}
-
-function toggleExecutionItemDetail(key: string) {
-  const nextKeys = new Set(expandedExecutionItemDetailKeys.value)
-  if (nextKeys.has(key)) {
-    nextKeys.delete(key)
-  } else {
-    nextKeys.add(key)
-  }
-  expandedExecutionItemDetailKeys.value = nextKeys
-}
-
-function getExecutionItemDetailId(key: string) {
-  return `execution-item-detail-${key}`
-}
-
 const {
   allErrorGroups,
   tabErrorGroups,
@@ -483,6 +344,20 @@ function handleMissingModelRefresh() {
   void missingModelStore.refreshMissingModels()
 }
 
+const singleRuntimeErrorGroup = computed(() => {
+  if (filteredGroups.value.length !== 1) return null
+  const group = filteredGroups.value[0]
+  const isSoleRuntimeError =
+    group.type === 'execution' &&
+    group.cards.length === 1 &&
+    group.cards[0].errors.every((e) => e.isRuntimeError)
+  return isSoleRuntimeError ? group : null
+})
+
+const singleRuntimeErrorCard = computed(
+  () => singleRuntimeErrorGroup.value?.cards[0] ?? null
+)
+
 const isAllCollapsed = computed({
   get() {
     return filteredGroups.value.every((g) => isSectionCollapsed(g.groupKey))

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -23,9 +23,6 @@ vi.mock('@/utils/graphTraversalUtil', () => ({
 }))
 
 const mockIsCloud = vi.hoisted(() => ({ value: false }))
-const unknownValidationMessage = vi.hoisted(
-  () => 'A node returned a validation error ComfyUI does not recognize.'
-)
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
     return mockIsCloud.value
@@ -46,18 +43,6 @@ vi.mock('@/i18n', () => {
       'Required input missing',
     'errorCatalog.validationErrors.required_input_missing.toastMessage':
       '{nodeName} is missing a required input: {inputName}',
-    'errorCatalog.validationErrors.unknown_validation_error.title':
-      'Validation failed',
-    'errorCatalog.validationErrors.unknown_validation_error.message':
-      unknownValidationMessage,
-    'errorCatalog.validationErrors.unknown_validation_error.detailsWithRawDetails':
-      '{nodeName} returned an unrecognized validation error ({errorType}): {rawDetails}',
-    'errorCatalog.validationErrors.unknown_validation_error.itemLabel':
-      '{nodeName}',
-    'errorCatalog.validationErrors.unknown_validation_error.toastTitle':
-      'Validation failed',
-    'errorCatalog.validationErrors.unknown_validation_error.toastMessage':
-      '{nodeName} returned an unrecognized validation error.',
     'errorCatalog.promptErrors.prompt_no_outputs.title':
       'Prompt has no outputs',
     'errorCatalog.promptErrors.prompt_no_outputs.desc':
@@ -189,7 +174,6 @@ describe('useErrorGroups', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     mockIsCloud.value = false
-    vi.mocked(isLGraphNode).mockReturnValue(false)
   })
 
   describe('missingPackGroups', () => {
@@ -317,24 +301,7 @@ describe('useErrorGroups', () => {
       expect(missingGroup?.groupKey).toBe('missing_node')
       expect(missingGroup?.displayTitle).toBe('Missing Node Packs (1)')
       expect(missingGroup?.displayMessage).toBe(
-        'Install missing packs to use this workflow.'
-      )
-    })
-
-    it('uses Cloud copy for missing_node group in Cloud', async () => {
-      mockIsCloud.value = true
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
-        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
-      ])
-      await nextTick()
-
-      const missingGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'missing_node'
-      )
-      expect(missingGroup?.displayMessage).toBe(
-        "Required custom nodes aren't supported on Cloud. Replace them with supported nodes."
+        'Some nodes are missing and need to be installed'
       )
     })
 
@@ -399,7 +366,7 @@ describe('useErrorGroups', () => {
       expect(swapIdx).toBeLessThan(missingIdx)
     })
 
-    it('uses fallback catalog grouping for unknown node validation errors', async () => {
+    it('includes execution error groups from node errors', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {
         '1': {
@@ -420,8 +387,8 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'execution'
       )
       expect(execGroups.length).toBeGreaterThan(0)
-      expect(execGroups[0].groupKey).toBe('execution:unknown_validation_error')
-      expect(execGroups[0].displayTitle).toBe('Validation failed')
+      expect(execGroups[0].groupKey).toBe('execution:KSampler')
+      expect(execGroups[0].displayTitle).toBe('KSampler')
     })
 
     it('resolves required_input_missing item display copy', async () => {
@@ -470,55 +437,6 @@ describe('useErrorGroups', () => {
       )
     })
 
-    it('groups node validation errors by catalog id across node types', async () => {
-      const { store, groups } = createErrorGroups()
-      store.lastNodeErrors = {
-        '1': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [
-            {
-              type: 'required_input_missing',
-              message: 'Required input is missing',
-              details: 'model',
-              extra_info: {
-                input_name: 'model'
-              }
-            }
-          ]
-        },
-        '2': {
-          class_type: 'CLIPLoader',
-          dependent_outputs: [],
-          errors: [
-            {
-              type: 'required_input_missing',
-              message: 'Required input is missing',
-              details: 'clip',
-              extra_info: {
-                input_name: 'clip'
-              }
-            }
-          ]
-        }
-      }
-      await nextTick()
-
-      const execGroups = groups.allErrorGroups.value.filter(
-        (g) => g.type === 'execution'
-      )
-      expect(execGroups).toHaveLength(1)
-
-      const [group] = execGroups
-      expect(group.groupKey).toBe('execution:missing_connection')
-      expect(group.displayTitle).toBe('Missing connection')
-      expect(group.cards.map((card) => card.title)).toEqual([
-        'KSampler',
-        'CLIPLoader'
-      ])
-      expect(group.cards.flatMap((card) => card.errors)).toHaveLength(2)
-    })
-
     it('uses general execution_failed display fields for unrecognized runtime execution errors', async () => {
       mockIsCloud.value = true
       const { store, groups } = createErrorGroups()
@@ -606,28 +524,6 @@ describe('useErrorGroups', () => {
       expect(promptGroup).toBeDefined()
     })
 
-    it('includes prompt error when a node is selected', async () => {
-      const { store, groups } = createErrorGroups()
-      const canvasStore = useCanvasStore()
-      vi.mocked(isLGraphNode).mockReturnValue(true)
-      canvasStore.selectedItems = fromAny<
-        typeof canvasStore.selectedItems,
-        unknown
-      >([{ id: '1' }])
-      store.lastPromptError = {
-        type: 'prompt_no_outputs',
-        message: 'No outputs',
-        details: ''
-      }
-      await nextTick()
-
-      const promptGroup = groups.allErrorGroups.value.find(
-        (g) =>
-          g.type === 'execution' && g.displayTitle === 'Prompt has no outputs'
-      )
-      expect(promptGroup).toBeDefined()
-    })
-
     it('sorts cards within an execution group by nodeId numerically', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {
@@ -780,7 +676,7 @@ describe('useErrorGroups', () => {
       expect(groups.groupedErrorMessages.value).toEqual([])
     })
 
-    it('collects unique display messages from node errors', async () => {
+    it('collects unique error messages from node errors', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {
         '1': {
@@ -800,7 +696,10 @@ describe('useErrorGroups', () => {
       await nextTick()
 
       const messages = groups.groupedErrorMessages.value
-      expect(messages).toEqual([unknownValidationMessage])
+      expect(messages).toContain('Error A')
+      expect(messages).toContain('Error B')
+      // Deduplication: Error A appears twice but should only be listed once
+      expect(messages.filter((m) => m === 'Error A')).toHaveLength(1)
     })
 
     it('includes missing node group display message', async () => {
@@ -1061,28 +960,4 @@ describe('useErrorGroups', () => {
       )
     })
   })
-
-  describe('tabErrorGroups', () => {
-    it('filters prompt error when a node is selected', async () => {
-      const { store, groups } = createErrorGroups()
-      const canvasStore = useCanvasStore()
-      vi.mocked(isLGraphNode).mockReturnValue(true)
-      canvasStore.selectedItems = fromAny<
-        typeof canvasStore.selectedItems,
-        unknown
-      >([{ id: '1' }])
-      store.lastPromptError = {
-        type: 'prompt_no_outputs',
-        message: 'No outputs',
-        details: ''
-      }
-      await nextTick()
-
-      const promptGroup = groups.tabErrorGroups.value.find(
-        (g) =>
-          g.type === 'execution' && g.displayTitle === 'Prompt has no outputs'
-      )
-      expect(promptGroup).toBeUndefined()
-    })
-  })
 })

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -30,7 +30,6 @@ import type {
   MissingModelCandidate,
   MissingModelGroup
 } from '@/platform/missingModel/types'
-import type { ResolvedCatalogErrorMessage } from '@/platform/errorCatalog/types'
 import type { MissingMediaGroup } from '@/platform/missingMedia/types'
 import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
 import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
@@ -44,6 +43,7 @@ import {
 } from '@/types/nodeIdentification'
 
 const PROMPT_CARD_ID = '__prompt__'
+const SINGLE_GROUP_KEY = '__single__'
 
 /** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
 const RESOLVING = '__RESOLVING__'
@@ -66,7 +66,6 @@ export interface SwapNodeGroup {
 interface GroupEntry {
   type: 'execution'
   displayTitle: string
-  displayMessage?: string
   priority: number
   cards: Map<string, ErrorCardData>
 }
@@ -76,14 +75,10 @@ interface ErrorSearchItem {
   cardIndex: number
   searchableNodeId: string
   searchableNodeTitle: string
-  searchableRawMessage: string
-  searchableRawDetails: string
   searchableMessage: string
   searchableDetails: string
 }
 
-type CataloguedErrorItem = ErrorItem & ResolvedCatalogErrorMessage
-
 /**
  * Resolve display info for a node by its execution ID.
  * For group node internals, resolves the parent group node's title instead.
@@ -111,21 +106,17 @@ function getOrCreateGroup(
   groupsMap: Map<string, GroupEntry>,
   groupKey: string,
   displayTitle = groupKey,
-  priority = 1,
-  displayMessage?: string
+  priority = 1
 ): Map<string, ErrorCardData> {
   let entry = groupsMap.get(groupKey)
   if (!entry) {
     entry = {
       type: 'execution',
       displayTitle,
-      displayMessage,
       priority,
       cards: new Map()
     }
     groupsMap.set(groupKey, entry)
-  } else if (!entry.displayMessage && displayMessage) {
-    entry.displayMessage = displayMessage
   }
   return entry.cards
 }
@@ -147,6 +138,44 @@ function createErrorCard(
   }
 }
 
+/**
+ * In single-node mode, regroup cards by error message instead of class_type.
+ * This lets the user see "what kinds of errors this node has" at a glance.
+ */
+function regroupByErrorMessage(
+  groupsMap: Map<string, GroupEntry>
+): Map<string, GroupEntry> {
+  const allCards = Array.from(groupsMap.values()).flatMap((g) =>
+    Array.from(g.cards.values())
+  )
+
+  const cardErrorPairs = allCards.flatMap((card) =>
+    card.errors.map((error) => ({ card, error }))
+  )
+
+  const messageMap = new Map<string, GroupEntry>()
+  for (const { card, error } of cardErrorPairs) {
+    addCardErrorToGroup(messageMap, card, error)
+  }
+
+  return messageMap
+}
+
+function addCardErrorToGroup(
+  messageMap: Map<string, GroupEntry>,
+  card: ErrorCardData,
+  error: ErrorItem
+) {
+  const displayTitle =
+    error.displayTitle ?? error.displayMessage ?? error.message
+  const groupKey = error.catalogId ?? displayTitle
+  const group = getOrCreateGroup(messageMap, groupKey, displayTitle, 1)
+  if (!group.has(card.id)) {
+    group.set(card.id, { ...card, errors: [] })
+  }
+  group.get(card.id)?.errors.push(error)
+}
+
 function compareNodeId(a: ErrorCardData, b: ErrorCardData): number {
   return compareExecutionId(a.nodeId, b.nodeId)
 }
@@ -157,7 +186,6 @@ function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
       type: 'execution' as const,
       groupKey: `execution:${rawGroupKey}`,
       displayTitle: groupData.displayTitle,
-      displayMessage: groupData.displayMessage,
       cards: Array.from(groupData.cards.values()).sort(compareNodeId),
       priority: groupData.priority
     }))
@@ -181,8 +209,6 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
         cardIndex: ci,
         searchableNodeId: card.nodeId ?? '',
         searchableNodeTitle: card.nodeTitle ?? '',
-        searchableRawMessage: card.errors.map((e) => e.message).join(' '),
-        searchableRawDetails: card.errors.map((e) => e.details).join(' '),
         searchableMessage: card.errors
           .map((e) =>
             [e.displayTitle, e.displayMessage, e.message]
@@ -199,11 +225,9 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
 
   const fuseOptions: IFuseOptions<ErrorSearchItem> = {
     keys: [
-      { name: 'searchableRawMessage', weight: 0.3 },
-      { name: 'searchableNodeId', weight: 0.2 },
-      { name: 'searchableNodeTitle', weight: 0.2 },
-      { name: 'searchableMessage', weight: 0.2 },
-      { name: 'searchableRawDetails', weight: 0.1 },
+      { name: 'searchableNodeId', weight: 0.3 },
+      { name: 'searchableNodeTitle', weight: 0.3 },
+      { name: 'searchableMessage', weight: 0.3 },
       { name: 'searchableDetails', weight: 0.1 }
     ],
     threshold: 0.3
@@ -309,33 +333,22 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     nodeId: string,
     classType: string,
     idPrefix: string,
-    error: CataloguedErrorItem,
+    errors: ErrorItem[],
     filterBySelection = false
   ) {
     if (filterBySelection && !isErrorInSelection(nodeId)) return
-    const cards = getOrCreateGroup(
-      groupsMap,
-      error.catalogId,
-      error.displayTitle ?? classType,
-      1,
-      error.displayMessage
-    )
+    const groupKey = isSingleNodeSelected.value ? SINGLE_GROUP_KEY : classType
+    const cards = getOrCreateGroup(groupsMap, groupKey, classType, 1)
     if (!cards.has(nodeId)) {
       cards.set(nodeId, createErrorCard(nodeId, classType, idPrefix))
     }
     const card = cards.get(nodeId)
     if (!card) return
-    card.errors.push(error)
+    card.errors.push(...errors)
   }
 
-  function processPromptError(
-    groupsMap: Map<string, GroupEntry>,
-    filterBySelection = false
-  ) {
-    if (
-      (filterBySelection && selectedNodeInfo.value.nodeIds) ||
-      !executionErrorStore.lastPromptError
-    )
+  function processPromptError(groupsMap: Map<string, GroupEntry>) {
+    if (selectedNodeInfo.value.nodeIds || !executionErrorStore.lastPromptError)
       return
 
     const error = executionErrorStore.lastPromptError
@@ -349,8 +362,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       groupsMap,
       `prompt:${error.type}`,
       groupDisplayTitle,
-      0,
-      resolvedDisplay.displayMessage
+      0
     )
 
     // Prompt errors are not tied to a node, so they bypass addNodeErrorToGroup.
@@ -377,13 +389,13 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     )) {
       const nodeDisplayName =
         resolveNodeInfo(nodeId).title || nodeError.class_type
-      for (const e of nodeError.errors) {
-        addNodeErrorToGroup(
-          groupsMap,
-          nodeId,
-          nodeError.class_type,
-          'node',
-          {
+      addNodeErrorToGroup(
+        groupsMap,
+        nodeId,
+        nodeError.class_type,
+        'node',
+        nodeError.errors.map((e) => {
+          return {
             message: e.message,
             details: e.details ?? undefined,
             ...resolveRunErrorMessage({
@@ -391,10 +403,10 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
               error: e,
               nodeDisplayName
             })
-          },
-          filterBySelection
-        )
-      }
+          }
+        }),
+        filterBySelection
+      )
     }
   }
 
@@ -410,18 +422,20 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       String(e.node_id),
       e.node_type,
       'exec',
-      {
-        message: `${e.exception_type}: ${e.exception_message}`,
-        details: e.traceback.join('\n'),
-        isRuntimeError: true,
-        exceptionType: e.exception_type,
-        ...resolveRunErrorMessage({
-          kind: 'execution',
-          error: e,
-          nodeDisplayName:
-            resolveNodeInfo(String(e.node_id)).title || e.node_type
-        })
-      },
+      [
+        {
+          message: `${e.exception_type}: ${e.exception_message}`,
+          details: e.traceback.join('\n'),
+          isRuntimeError: true,
+          exceptionType: e.exception_type,
+          ...resolveRunErrorMessage({
+            kind: 'execution',
+            error: e,
+            nodeDisplayName:
+              resolveNodeInfo(String(e.node_id)).title || e.node_type
+          })
+        }
+      ],
       filterBySelection
     )
   }
@@ -703,6 +717,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
           kind: 'missing_media',
           groups: missingMediaGroups.value,
           count: totalItems,
+          mediaTypes: missingMediaGroups.value.map((group) => group.mediaType),
           isCloud
         })
       }
@@ -819,6 +834,9 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
           kind: 'missing_media',
           groups: filteredMissingMediaGroups.value,
           count: totalItems,
+          mediaTypes: filteredMissingMediaGroups.value.map(
+            (group) => group.mediaType
+          ),
           isCloud
         })
       }
@@ -843,10 +861,14 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
   const tabErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
-    processPromptError(groupsMap, true)
+    processPromptError(groupsMap)
     processNodeErrors(groupsMap, true)
     processExecutionError(groupsMap, true)
 
+    const executionGroups = isSingleNodeSelected.value
+      ? toSortedGroups(regroupByErrorMessage(groupsMap))
+      : toSortedGroups(groupsMap)
+
     const filterByNode = selectedNodeInfo.value.nodeIds !== null
 
     // Missing nodes are intentionally unfiltered — they represent
@@ -859,7 +881,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       ...(filterByNode
         ? buildMissingMediaGroupsFiltered()
         : buildMissingMediaGroups()),
-      ...toSortedGroups(groupsMap)
+      ...executionGroups
     ]
   })
 

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -67,7 +67,6 @@ import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -141,12 +140,10 @@ function closeDialog() {
 
 function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
   const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
-  const node = withNodeAddSource('search_modal', () =>
-    litegraphService.addNodeOnGraph(
-      nodeDef,
-      { pos: getNewNodeLocation() },
-      { ghost: useSearchBoxV2.value && followCursor, dragEvent }
-    )
+  const node = litegraphService.addNodeOnGraph(
+    nodeDef,
+    { pos: getNewNodeLocation() },
+    { ghost: useSearchBoxV2.value && followCursor, dragEvent }
   )
   if (!node) return
 

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -65,7 +65,6 @@ import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.
 import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
@@ -156,8 +155,8 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
         if (this.leaf && model) {
           const provider = modelToNodeStore.getNodeProvider(model.directory)
           if (provider) {
-            const graphNode = withNodeAddSource('sidebar_drag', () =>
-              useLitegraphService().addNodeOnGraph(provider.nodeDef)
+            const graphNode = useLitegraphService().addNodeOnGraph(
+              provider.nodeDef
             )
             const widget = graphNode?.widgets?.find(
               (widget) => widget.name === provider.key

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -189,7 +189,6 @@ import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useLitegraphService } from '@/services/litegraphService'
 import {
   DEFAULT_GROUPING_ID,
@@ -322,11 +321,8 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
         }
       },
       handleClick(e: MouseEvent) {
-        const nodeDef = this.data
-        if (this.leaf && nodeDef) {
-          withNodeAddSource('sidebar_drag', () =>
-            useLitegraphService().addNodeOnGraph(nodeDef)
-          )
+        if (this.leaf && this.data) {
+          useLitegraphService().addNodeOnGraph(this.data)
         } else {
           toggleNodeOnEvent(e, this)
         }

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -39,7 +39,6 @@ import NodePreview from '@/components/node/NodePreview.vue'
 import NodeTreeFolder from '@/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue'
 import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -184,11 +183,8 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
           await nodeBookmarkStore.addBookmark(nodePath)
         },
         handleClick(e: MouseEvent) {
-          const nodeDef = this.data
-          if (this.leaf && nodeDef) {
-            withNodeAddSource('sidebar_drag', () =>
-              useLitegraphService().addNodeOnGraph(nodeDef)
-            )
+          if (this.leaf && this.data) {
+            useLitegraphService().addNodeOnGraph(this.data)
           } else {
             toggleNodeOnEvent(e, node)
           }

src/components/ui/color-picker/ColorPicker.vue

@@ -15,7 +15,6 @@ import ColorPickerPanel from './ColorPickerPanel.vue'
 
 defineProps<{
   class?: string
-  disabled?: boolean
 }>()
 
 const modelValue = defineModel<string>({ default: '#000000' })
@@ -67,10 +66,9 @@ const isOpen = ref(false)
     <PopoverTrigger as-child>
       <button
         type="button"
-        :disabled="$props.disabled"
         :class="
           cn(
-            'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
+            'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered',
             isOpen && 'border-node-stroke',
             $props.class
           )

src/composables/graph/contextMenuConverter.test.ts

@@ -204,90 +204,6 @@ describe('contextMenuConverter', () => {
     })
   })
 
-  describe('media node ordering (FE-839)', () => {
-    const IMAGE_GROUP = [
-      'Open Image',
-      'Open in Mask Editor',
-      'Copy Image',
-      'Paste Image',
-      'Save Image'
-    ]
-
-    // Input order is intentionally scrambled to prove the rendered order is
-    // governed by MENU_ORDER, not by the order options are passed in.
-    const mediaNodeOptions = (): MenuOption[] => [
-      { label: 'Rename', source: 'vue' },
-      { label: 'Copy', source: 'vue' },
-      { label: 'Pin', source: 'vue' },
-      { label: 'Node Info', source: 'vue' },
-      { label: 'Open in Mask Editor', source: 'vue' },
-      { label: 'Open Image', source: 'vue' },
-      { label: 'Copy Image', source: 'vue' },
-      { label: 'Paste Image', source: 'vue' },
-      { label: 'Save Image', source: 'vue' }
-    ]
-
-    const firstActionLabel = (result: MenuOption[]) =>
-      result.find((opt) => opt.type !== 'divider' && opt.type !== 'category')
-        ?.label
-    const indexOfLabel = (result: MenuOption[], label: string) =>
-      result.findIndex((opt) => opt.label === label)
-
-    it('places Open Image as the first item for media nodes', () => {
-      expect(firstActionLabel(buildStructuredMenu(mediaNodeOptions()))).toBe(
-        'Open Image'
-      )
-    })
-
-    it('surfaces the whole image action group above generic node actions', () => {
-      const result = buildStructuredMenu(mediaNodeOptions())
-      const renameIndex = indexOfLabel(result, 'Rename')
-      for (const label of IMAGE_GROUP) {
-        expect(indexOfLabel(result, label)).toBeLessThan(renameIndex)
-      }
-    })
-
-    it('keeps Copy Image, Paste Image, Save Image in that relative order', () => {
-      const result = buildStructuredMenu(mediaNodeOptions())
-      expect(indexOfLabel(result, 'Copy Image')).toBeLessThan(
-        indexOfLabel(result, 'Paste Image')
-      )
-      expect(indexOfLabel(result, 'Paste Image')).toBeLessThan(
-        indexOfLabel(result, 'Save Image')
-      )
-    })
-
-    it('separates the image group from core actions with a divider', () => {
-      const result = buildStructuredMenu(mediaNodeOptions())
-      const saveIndex = indexOfLabel(result, 'Save Image')
-      const renameIndex = indexOfLabel(result, 'Rename')
-      const hasDividerBetween = result
-        .slice(saveIndex + 1, renameIndex)
-        .some((opt) => opt.type === 'divider')
-      expect(hasDividerBetween).toBe(true)
-    })
-
-    it('preserves the relative order of core actions below the image group', () => {
-      const result = buildStructuredMenu(mediaNodeOptions())
-      expect(indexOfLabel(result, 'Rename')).toBeLessThan(
-        indexOfLabel(result, 'Pin')
-      )
-      expect(indexOfLabel(result, 'Pin')).toBeLessThan(
-        indexOfLabel(result, 'Node Info')
-      )
-    })
-
-    it('leaves non-media node menus starting with Rename', () => {
-      const result = buildStructuredMenu([
-        { label: 'Node Info', source: 'vue' },
-        { label: 'Pin', source: 'vue' },
-        { label: 'Rename', source: 'vue' },
-        { label: 'Copy', source: 'vue' }
-      ])
-      expect(firstActionLabel(result)).toBe('Rename')
-    })
-  })
-
   describe('convertContextMenuToOptions', () => {
     it('should convert empty array to empty result', () => {
       const result = convertContextMenuToOptions([])

src/composables/graph/contextMenuConverter.ts

@@ -227,12 +227,6 @@ function removeDuplicateMenuOptions(options: MenuOption[]): MenuOption[] {
  * Order groups for menu items - defines the display order of sections
  */
 const MENU_ORDER: string[] = [
-  // Section 0: Media operations (surfaced at the top for media nodes)
-  'Open Image',
-  'Open in Mask Editor',
-  'Copy Image',
-  'Paste Image',
-  'Save Image',
   // Section 1: Basic operations
   'Rename',
   'Copy',
@@ -254,7 +248,12 @@ const MENU_ORDER: string[] = [
   // Section 4: Node properties
   'Node Info',
   'Color',
-  // Section 5: Clipspace operations
+  // Section 5: Node-specific operations
+  'Open in Mask Editor',
+  'Open Image',
+  'Copy Image',
+  'Paste Image',
+  'Save Image',
   'Copy (Clipspace)',
   'Paste (Clipspace)'
 ]
@@ -310,29 +309,27 @@ export function buildStructuredMenu(options: MenuOption[]): MenuOption[] {
   coreLabels.sort((a, b) => getMenuItemOrder(a) - getMenuItemOrder(b))
 
   // Section boundaries based on MENU_ORDER indices
-  // Section 0: 0-4 (Open Image, Open in Mask Editor, Copy Image, Paste Image, Save Image)
-  // Section 1: 5-7 (Rename, Copy, Duplicate)
-  // Section 2: 8-13 (Run Branch, Pin, Unpin, Bypass, Remove Bypass, Mute)
-  // Section 3: 14-19 (Convert to Subgraph, Frame selection, Frame Nodes, Minimize Node, Expand Node, Clone)
-  // Section 4: 20-21 (Node Info, Color)
-  // Section 5: 22+ (Clipspace and fallback items)
+  // Section 1: 0-2 (Rename, Copy, Duplicate)
+  // Section 2: 3-8 (Run Branch, Pin, Unpin, Bypass, Remove Bypass, Mute)
+  // Section 3: 9-14 (Convert to Subgraph, Frame selection, Frame Nodes, Minimize Node, Expand Node, Clone)
+  // Section 4: 15-16 (Node Info, Color)
+  // Section 5: 17+ (Image operations and fallback items)
   const getSectionNumber = (index: number): number => {
-    if (index <= 4) return 0
-    if (index <= 7) return 1
-    if (index <= 13) return 2
-    if (index <= 19) return 3
-    if (index <= 21) return 4
+    if (index <= 2) return 1
+    if (index <= 8) return 2
+    if (index <= 14) return 3
+    if (index <= 16) return 4
     return 5
   }
 
-  let lastSection = -1
+  let lastSection = 0
   for (const label of coreLabels) {
     const item = coreItemsMap.get(label)!
     const itemIndex = getMenuItemOrder(label)
     const currentSection = getSectionNumber(itemIndex)
 
     // Add divider when moving to a new section
-    if (lastSection !== -1 && currentSection !== lastSection) {
+    if (lastSection > 0 && currentSection !== lastSection) {
       orderedCoreItems.push({ type: 'divider' })
     }
 

src/composables/graph/useArrangeNodes.test.ts

@@ -1,182 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { computeArrangement } from '@/composables/graph/useArrangeNodes'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
-
-interface MockNodeSpec {
-  id: number | string
-  pos: [number, number]
-  size: [number, number]
-  title_mode?: TitleMode
-}
-
-const makeNode = (spec: MockNodeSpec): LGraphNode =>
-  ({
-    id: spec.id,
-    pos: spec.pos,
-    size: spec.size,
-    title_mode: spec.title_mode
-  }) as unknown as LGraphNode
-
-const GAP = 12
-const TITLE = 30 // LiteGraph.NODE_TITLE_HEIGHT default
-
-describe('computeArrangement', () => {
-  it('returns no updates when fewer than 2 nodes are selected', () => {
-    expect(computeArrangement([], 'vertical')).toEqual([])
-    expect(
-      computeArrangement(
-        [makeNode({ id: 1, pos: [0, 0], size: [100, 50] })],
-        'grid'
-      )
-    ).toEqual([])
-  })
-
-  describe('vertical', () => {
-    it('left-aligns to anchor x and stacks downward sorted by current y', () => {
-      const nodes = [
-        makeNode({ id: 'a', pos: [10, 100], size: [100, 50] }),
-        makeNode({ id: 'b', pos: [200, 0], size: [80, 30] }),
-        makeNode({ id: 'c', pos: [50, 200], size: [120, 40] })
-      ]
-      // Anchor: 'a' has smallest x+y (110). Sort by Y: b(0), a(100), c(200).
-      // Visual top of layout = anchor.posY - TITLE = 100 - 30 = 70.
-      // Each node's pos.y = visualTop + its titleHeight (30).
-      // b: pos.y = 70+30 = 100; visualTop += (30+30)+12 = 142
-      // a: pos.y = 142+30 = 172; visualTop += (50+30)+12 = 234
-      // c: pos.y = 234+30 = 264
-      const result = computeArrangement(nodes, 'vertical')
-      expect(result).toEqual([
-        { nodeId: 'b', position: { x: 10, y: 100 } },
-        { nodeId: 'a', position: { x: 10, y: 172 } },
-        { nodeId: 'c', position: { x: 10, y: 264 } }
-      ])
-    })
-
-    it('omits the title-height contribution for NO_TITLE nodes', () => {
-      const nodes = [
-        makeNode({
-          id: 1,
-          pos: [0, 0],
-          size: [100, 100],
-          title_mode: TitleMode.NO_TITLE
-        }),
-        makeNode({
-          id: 2,
-          pos: [0, 200],
-          size: [100, 100],
-          title_mode: TitleMode.NO_TITLE
-        })
-      ]
-      // No titles: visualHeight = size[1] = 100. visualTop = 0. Gap = 12.
-      // 1: pos.y = 0; visualTop = 0 + 100 + 12 = 112.
-      // 2: pos.y = 112.
-      const result = computeArrangement(nodes, 'vertical')
-      expect(result).toEqual([
-        { nodeId: 1, position: { x: 0, y: 0 } },
-        { nodeId: 2, position: { x: 0, y: 100 + GAP } }
-      ])
-    })
-
-    it('preserves heterogeneous heights when computing gaps', () => {
-      const nodes = [
-        makeNode({ id: 1, pos: [0, 0], size: [100, 200] }),
-        makeNode({ id: 2, pos: [0, 50], size: [100, 50] })
-      ]
-      // visualTop=-30. 1: pos.y=0; visualTop += (200+30)+12 = 212.
-      // 2: pos.y = 212+30 = 242.
-      const result = computeArrangement(nodes, 'vertical')
-      expect(result).toEqual([
-        { nodeId: 1, position: { x: 0, y: 0 } },
-        { nodeId: 2, position: { x: 0, y: 200 + TITLE + GAP } }
-      ])
-    })
-  })
-
-  describe('horizontal', () => {
-    it('top-aligns to anchor y and lays out rightward sorted by current x', () => {
-      const nodes = [
-        makeNode({ id: 'a', pos: [100, 50], size: [80, 40] }),
-        makeNode({ id: 'b', pos: [0, 200], size: [60, 30] }),
-        makeNode({ id: 'c', pos: [300, 80], size: [50, 50] })
-      ]
-      // Anchor: smallest x+y → a(150), b(200), c(380) → anchor 'a' at (100, 50).
-      // Sort by X: b(0), a(100), c(300)
-      // Lay out from (100, 50):
-      //   b at (100, 50)
-      //   a at (100 + 60 + 12, 50) = (172, 50)
-      //   c at (172 + 80 + 12, 50) = (264, 50)
-      const result = computeArrangement(nodes, 'horizontal')
-      expect(result).toEqual([
-        { nodeId: 'b', position: { x: 100, y: 50 } },
-        { nodeId: 'a', position: { x: 172, y: 50 } },
-        { nodeId: 'c', position: { x: 264, y: 50 } }
-      ])
-    })
-  })
-
-  describe('grid', () => {
-    it('lays out 4 nodes as 2x2 with column/row sizes from max width/height', () => {
-      const nodes = [
-        makeNode({ id: 1, pos: [0, 0], size: [100, 50] }),
-        makeNode({ id: 2, pos: [200, 0], size: [80, 60] }),
-        makeNode({ id: 3, pos: [0, 100], size: [120, 40] }),
-        makeNode({ id: 4, pos: [200, 100], size: [90, 30] })
-      ]
-      // Anchor: 1 at (0,0). Sort by Y then X: 1, 2, 3, 4. cols=2, rows=2.
-      // Col widths: col0=max(100,120)=120; col1=max(80,90)=90.
-      // Row visual heights: row0=max(50+30,60+30)=90; row1=max(40+30,30+30)=70.
-      // colX=[0, 132]. rowVisualTop=[-30, -30+90+12=72].
-      // pos.y = rowVisualTop + 30 (titleHeight).
-      const result = computeArrangement(nodes, 'grid')
-      expect(result).toEqual([
-        { nodeId: 1, position: { x: 0, y: 0 } },
-        { nodeId: 2, position: { x: 132, y: 0 } },
-        { nodeId: 3, position: { x: 0, y: 102 } },
-        { nodeId: 4, position: { x: 132, y: 102 } }
-      ])
-    })
-
-    it('uses ceil(sqrt(n)) columns for non-square counts', () => {
-      // 5 nodes → ceil(sqrt(5))=3 cols, 2 rows. Last cell empty.
-      const nodes = Array.from({ length: 5 }, (_, i) =>
-        makeNode({
-          id: i + 1,
-          pos: [i * 50, i * 50],
-          size: [40, 40]
-        })
-      )
-      const result = computeArrangement(nodes, 'grid')
-      expect(result).toHaveLength(5)
-      // Sorted by Y then X = original order. Anchor = node 1 at (0,0).
-      // colWidths=[40,40,40]. rowVisualHeight = 40+30 = 70 each.
-      // colX=[0,52,104]. rowVisualTop=[-30, -30+70+12=52]. pos.y = visualTop+30.
-      expect(result[0].position).toEqual({ x: 0, y: 0 })
-      expect(result[1].position).toEqual({ x: 52, y: 0 })
-      expect(result[2].position).toEqual({ x: 104, y: 0 })
-      expect(result[3].position).toEqual({ x: 0, y: 82 })
-      expect(result[4].position).toEqual({ x: 52, y: 82 })
-    })
-  })
-
-  describe('anchor selection', () => {
-    it('picks the node with smallest x+y, not min-x or min-y alone', () => {
-      const nodes = [
-        // min y but large x: x+y = 1000
-        makeNode({ id: 'minY', pos: [1000, 0], size: [50, 50] }),
-        // min x but large y: x+y = 1000
-        makeNode({ id: 'minX', pos: [0, 1000], size: [50, 50] }),
-        // smallest x+y: 600
-        makeNode({ id: 'anchor', pos: [300, 300], size: [50, 50] })
-      ]
-      const result = computeArrangement(nodes, 'vertical')
-      // All updates left-align to anchor.x = 300. First in sort = minY (y=0).
-      expect(result[0]).toEqual({
-        nodeId: 'minY',
-        position: { x: 300, y: 300 }
-      })
-      expect(result.every((u) => u.position.x === 300)).toBe(true)
-    })
-  })
-})

src/composables/graph/useArrangeNodes.ts

@@ -1,186 +0,0 @@
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
-import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
-import { LayoutSource } from '@/renderer/core/layout/types'
-import type { Point } from '@/renderer/core/layout/types'
-import { app } from '@/scripts/app'
-
-export type ArrangeLayout = 'vertical' | 'horizontal' | 'grid'
-
-export const DEFAULT_ARRANGE_GAP = 12
-export const MIN_ARRANGE_GAP = 0
-export const MAX_ARRANGE_GAP = 48
-
-interface NodeBox {
-  id: NodeId
-  posX: number
-  posY: number
-  visualWidth: number
-  visualHeight: number
-  titleHeight: number
-}
-
-interface ArrangeUpdate {
-  nodeId: NodeId
-  position: Point
-}
-
-const titleHeightOf = (node: LGraphNode): number => {
-  const mode = node.title_mode
-  if (mode === TitleMode.TRANSPARENT_TITLE || mode === TitleMode.NO_TITLE) {
-    return 0
-  }
-  return LiteGraph.NODE_TITLE_HEIGHT
-}
-
-const toBox = (node: LGraphNode): NodeBox => {
-  const titleHeight = titleHeightOf(node)
-  return {
-    id: node.id,
-    posX: node.pos[0],
-    posY: node.pos[1],
-    visualWidth: node.size[0],
-    visualHeight: node.size[1] + titleHeight,
-    titleHeight
-  }
-}
-
-const byTopDown = (a: NodeBox, b: NodeBox) => a.posY - b.posY || a.posX - b.posX
-
-const byLeftRight = (a: NodeBox, b: NodeBox) =>
-  a.posX - b.posX || a.posY - b.posY
-
-const findAnchor = (boxes: NodeBox[]): NodeBox =>
-  boxes.reduce((best, box) =>
-    box.posX + box.posY < best.posX + best.posY ? box : best
-  )
-
-const cumulativeOffsets = (
-  sizes: number[],
-  origin: number,
-  gap: number
-): number[] => {
-  const offsets: number[] = [origin]
-  for (let i = 1; i < sizes.length; i++) {
-    offsets.push(offsets[i - 1] + sizes[i - 1] + gap)
-  }
-  return offsets
-}
-
-const arrangeVertical = (
-  boxes: NodeBox[],
-  anchor: NodeBox,
-  gap: number
-): ArrangeUpdate[] => {
-  const sorted = [...boxes].sort(byTopDown)
-  let visualTop = anchor.posY - anchor.titleHeight
-  return sorted.map((box) => {
-    const update: ArrangeUpdate = {
-      nodeId: box.id,
-      position: { x: anchor.posX, y: visualTop + box.titleHeight }
-    }
-    visualTop += box.visualHeight + gap
-    return update
-  })
-}
-
-const arrangeHorizontal = (
-  boxes: NodeBox[],
-  anchor: NodeBox,
-  gap: number
-): ArrangeUpdate[] => {
-  const sorted = [...boxes].sort(byLeftRight)
-  const visualTop = anchor.posY - anchor.titleHeight
-  let cursorX = anchor.posX
-  return sorted.map((box) => {
-    const update: ArrangeUpdate = {
-      nodeId: box.id,
-      position: { x: cursorX, y: visualTop + box.titleHeight }
-    }
-    cursorX += box.visualWidth + gap
-    return update
-  })
-}
-
-const arrangeGrid = (
-  boxes: NodeBox[],
-  anchor: NodeBox,
-  gap: number
-): ArrangeUpdate[] => {
-  const sorted = [...boxes].sort(byTopDown)
-  const cols = Math.ceil(Math.sqrt(sorted.length))
-  const rows = Math.ceil(sorted.length / cols)
-
-  const colWidths = new Array<number>(cols).fill(0)
-  const rowHeights = new Array<number>(rows).fill(0)
-  sorted.forEach((box, i) => {
-    const col = i % cols
-    const row = Math.floor(i / cols)
-    if (box.visualWidth > colWidths[col]) colWidths[col] = box.visualWidth
-    if (box.visualHeight > rowHeights[row]) rowHeights[row] = box.visualHeight
-  })
-
-  const colX = cumulativeOffsets(colWidths, anchor.posX, gap)
-  const rowVisualTop = cumulativeOffsets(
-    rowHeights,
-    anchor.posY - anchor.titleHeight,
-    gap
-  )
-
-  return sorted.map((box, i) => {
-    const col = i % cols
-    const row = Math.floor(i / cols)
-    return {
-      nodeId: box.id,
-      position: {
-        x: colX[col],
-        y: rowVisualTop[row] + box.titleHeight
-      }
-    }
-  })
-}
-
-export function computeArrangement(
-  nodes: LGraphNode[],
-  layout: ArrangeLayout,
-  gap: number = DEFAULT_ARRANGE_GAP
-): ArrangeUpdate[] {
-  if (nodes.length < 2) return []
-  const boxes = nodes.map(toBox)
-  const anchor = findAnchor(boxes)
-  if (layout === 'vertical') return arrangeVertical(boxes, anchor, gap)
-  if (layout === 'horizontal') return arrangeHorizontal(boxes, anchor, gap)
-  return arrangeGrid(boxes, anchor, gap)
-}
-
-interface ArrangeOptions {
-  gap?: number
-  captureUndo?: boolean
-}
-
-export function useArrangeNodes() {
-  const { selectedNodes, hasMultipleSelection } = useSelectionState()
-  const mutations = useLayoutMutations()
-  const workflowStore = useWorkflowStore()
-
-  const arrangeNodes = (
-    layout: ArrangeLayout,
-    { gap = DEFAULT_ARRANGE_GAP, captureUndo = true }: ArrangeOptions = {}
-  ) => {
-    if (!hasMultipleSelection.value) return
-    const updates = computeArrangement(selectedNodes.value, layout, gap)
-    if (updates.length === 0) return
-
-    mutations.setSource(LayoutSource.Canvas)
-    mutations.batchMoveNodes(updates)
-    app.canvas?.setDirty(true, true)
-    if (captureUndo) {
-      workflowStore.activeWorkflow?.changeTracker?.captureCanvasState()
-    }
-  }
-
-  return { arrangeNodes, canArrange: hasMultipleSelection }
-}

src/composables/graph/useArrangeSession.test.ts

@@ -1,115 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type * as ArrangeNodesModule from '@/composables/graph/useArrangeNodes'
-import { useArrangeSession } from '@/composables/graph/useArrangeSession'
-
-const mockArrangeNodes = vi.fn()
-
-vi.mock('@/composables/graph/useArrangeNodes', async () => {
-  const actual = await vi.importActual<typeof ArrangeNodesModule>(
-    '@/composables/graph/useArrangeNodes'
-  )
-  return {
-    ...actual,
-    useArrangeNodes: () => ({ arrangeNodes: mockArrangeNodes })
-  }
-})
-
-describe('useArrangeSession', () => {
-  let frameCallbacks: Array<FrameRequestCallback>
-  let nextHandle: number
-
-  beforeEach(() => {
-    mockArrangeNodes.mockReset()
-    frameCallbacks = []
-    nextHandle = 1
-    vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation(
-      (cb: FrameRequestCallback) => {
-        frameCallbacks.push(cb)
-        return nextHandle++
-      }
-    )
-    vi.spyOn(globalThis, 'cancelAnimationFrame').mockImplementation((id) => {
-      frameCallbacks[id - 1] = () => {}
-    })
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  const flushFrames = () => {
-    const callbacks = frameCallbacks
-    frameCallbacks = []
-    callbacks.forEach((cb) => cb(performance.now()))
-  }
-
-  it('start() applies layout immediately and captures undo', () => {
-    const session = useArrangeSession()
-    session.start('vertical')
-
-    expect(mockArrangeNodes).toHaveBeenCalledTimes(1)
-    expect(mockArrangeNodes).toHaveBeenCalledWith('vertical', {
-      gap: 12,
-      captureUndo: true
-    })
-    expect(session.activeLayout.value).toBe('vertical')
-    expect(session.gap.value).toBe(12)
-  })
-
-  it('previewGap() throttles repeated calls into a single frame', () => {
-    const session = useArrangeSession()
-    session.start('grid')
-    mockArrangeNodes.mockClear()
-
-    session.previewGap(20)
-    session.previewGap(30)
-    session.previewGap(40)
-
-    expect(mockArrangeNodes).not.toHaveBeenCalled()
-    flushFrames()
-
-    expect(mockArrangeNodes).toHaveBeenCalledTimes(1)
-    expect(mockArrangeNodes).toHaveBeenCalledWith('grid', {
-      gap: 40,
-      captureUndo: false
-    })
-  })
-
-  it('previewGap() is a no-op outside an active session', () => {
-    const session = useArrangeSession()
-    session.previewGap(20)
-    flushFrames()
-    expect(mockArrangeNodes).not.toHaveBeenCalled()
-  })
-
-  it('commitGap() cancels any pending preview frame', () => {
-    const session = useArrangeSession()
-    session.start('horizontal')
-    mockArrangeNodes.mockClear()
-
-    session.previewGap(25)
-    session.commitGap(36)
-    flushFrames()
-
-    expect(mockArrangeNodes).toHaveBeenCalledTimes(1)
-    expect(mockArrangeNodes).toHaveBeenCalledWith('horizontal', {
-      gap: 36,
-      captureUndo: true
-    })
-  })
-
-  it('reset() ends the session and prevents pending frames from arranging', () => {
-    const session = useArrangeSession()
-    session.start('vertical')
-    mockArrangeNodes.mockClear()
-
-    session.previewGap(40)
-    session.reset()
-    flushFrames()
-
-    expect(mockArrangeNodes).not.toHaveBeenCalled()
-    expect(session.activeLayout.value).toBeNull()
-    expect(session.gap.value).toBe(12)
-  })
-})

src/composables/graph/useArrangeSession.ts

@@ -1,60 +0,0 @@
-import { readonly, ref } from 'vue'
-
-import {
-  DEFAULT_ARRANGE_GAP,
-  useArrangeNodes
-} from '@/composables/graph/useArrangeNodes'
-import type { ArrangeLayout } from '@/composables/graph/useArrangeNodes'
-
-export function useArrangeSession() {
-  const { arrangeNodes } = useArrangeNodes()
-
-  const activeLayout = ref<ArrangeLayout | null>(null)
-  const gap = ref(DEFAULT_ARRANGE_GAP)
-  let pendingFrame: number | null = null
-
-  const cancelPendingFrame = () => {
-    if (pendingFrame === null) return
-    cancelAnimationFrame(pendingFrame)
-    pendingFrame = null
-  }
-
-  const reset = () => {
-    cancelPendingFrame()
-    activeLayout.value = null
-    gap.value = DEFAULT_ARRANGE_GAP
-  }
-
-  const start = (layout: ArrangeLayout) => {
-    gap.value = DEFAULT_ARRANGE_GAP
-    activeLayout.value = layout
-    arrangeNodes(layout, { gap: gap.value, captureUndo: true })
-  }
-
-  const previewGap = (nextGap: number) => {
-    if (activeLayout.value === null) return
-    gap.value = nextGap
-    cancelPendingFrame()
-    pendingFrame = requestAnimationFrame(() => {
-      pendingFrame = null
-      if (activeLayout.value === null) return
-      arrangeNodes(activeLayout.value, { gap: nextGap, captureUndo: false })
-    })
-  }
-
-  const commitGap = (nextGap: number) => {
-    if (activeLayout.value === null) return
-    cancelPendingFrame()
-    gap.value = nextGap
-    arrangeNodes(activeLayout.value, { gap: nextGap, captureUndo: true })
-  }
-
-  return {
-    activeLayout: readonly(activeLayout),
-    gap: readonly(gap),
-    start,
-    previewGap,
-    commitGap,
-    reset
-  }
-}

src/composables/graph/useImageMenuOptions.test.ts

@@ -101,23 +101,6 @@ describe('useImageMenuOptions', () => {
       expect(copyIdx).toBeLessThan(pasteIdx)
       expect(pasteIdx).toBeLessThan(saveIdx)
     })
-
-    it('gives the Open in Mask Editor option the mask icon', () => {
-      const node = createImageNode()
-      const { getImageMenuOptions } = useImageMenuOptions()
-      const options = getImageMenuOptions(node)
-      const maskOption = options.find((o) => o.label === 'Open in Mask Editor')
-
-      expect(maskOption?.icon).toBe('icon-[comfy--mask]')
-    })
-
-    it('gives every image action option an icon so labels stay aligned', () => {
-      const node = createImageNode()
-      const { getImageMenuOptions } = useImageMenuOptions()
-      const options = getImageMenuOptions(node)
-
-      expect(options.every((o) => !!o.icon)).toBe(true)
-    })
   })
 
   describe('pasteImage action', () => {

src/composables/graph/useImageMenuOptions.ts

@@ -116,16 +116,15 @@ export function useImageMenuOptions() {
 
     if (hasImages) {
       options.push(
+        {
+          label: t('contextMenu.Open in Mask Editor'),
+          action: () => openMaskEditor()
+        },
         {
           label: t('contextMenu.Open Image'),
           icon: 'icon-[lucide--external-link]',
           action: () => openImage(node)
         },
-        {
-          label: t('contextMenu.Open in Mask Editor'),
-          icon: 'icon-[comfy--mask]',
-          action: () => openMaskEditor()
-        },
         {
           label: t('contextMenu.Copy Image'),
           icon: 'icon-[lucide--copy]',

src/composables/node/useNodeDragToCanvas.test.ts

@@ -456,105 +456,4 @@ describe('useNodeDragToCanvas', () => {
       expect(dispatchPointerDown(600, 250)).not.toHaveBeenCalled()
     })
   })
-
-  describe('native drag position tracking', () => {
-    beforeEach(() => {
-      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
-        left: 0,
-        right: 500,
-        top: 0,
-        bottom: 500
-      })
-      mockConvertEventToCanvasOffset.mockReturnValue([300, 300])
-    })
-
-    // happy-dom has no DragEvent constructor; MouseEvent works since the
-    // handler only reads clientX/clientY.
-    function fireDrag(x: number, y: number) {
-      document.dispatchEvent(
-        new MouseEvent('dragover', { clientX: x, clientY: y, bubbles: true })
-      )
-    }
-
-    it('should prefer tracked drag position over dragend coordinates', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
-
-      fireDrag(250, 250)
-      // dragend supplies a bad position (the Firefox bug); the tracked one
-      // from the last drag event should win.
-      handleNativeDrop(1505, 102)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenCalledWith({
-        clientX: 250,
-        clientY: 250
-      })
-    })
-
-    it('should ignore drag events with (0, 0)', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
-
-      fireDrag(250, 250)
-      fireDrag(0, 0)
-      handleNativeDrop(1505, 102)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenCalledWith({
-        clientX: 250,
-        clientY: 250
-      })
-    })
-
-    it('should fall back to dragend coordinates when no drag fired', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
-
-      handleNativeDrop(250, 250)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenCalledWith({
-        clientX: 250,
-        clientY: 250
-      })
-    })
-
-    it('should ignore dragover events fired before startDrag', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-
-      fireDrag(250, 250)
-      startDrag(mockNodeDef, 'native')
-      handleNativeDrop(300, 300)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenCalledWith({
-        clientX: 300,
-        clientY: 300
-      })
-    })
-
-    it('should clear tracked position between drags', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-
-      startDrag(mockNodeDef, 'native')
-      fireDrag(250, 250)
-      handleNativeDrop(1505, 102)
-
-      // Second drag - no drag events, so we should fall back to args.
-      startDrag(mockNodeDef, 'native')
-      handleNativeDrop(300, 300)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenLastCalledWith({
-        clientX: 300,
-        clientY: 300
-      })
-    })
-  })
 })

src/composables/node/useNodeDragToCanvas.ts

@@ -1,6 +1,5 @@
 import { ref, shallowRef } from 'vue'
 
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -11,27 +10,16 @@ const isDragging = ref(false)
 const draggedNode = shallowRef<ComfyNodeDefImpl | null>(null)
 const cursorPosition = ref({ x: 0, y: 0 })
 const dragMode = ref<DragMode>('click')
-const lastNativeDragPosition = shallowRef<{ x: number; y: number }>()
 let listenersSetup = false
 
 function updatePosition(e: PointerEvent) {
   cursorPosition.value = { x: e.clientX, y: e.clientY }
 }
 
-// Firefox dragend can report stale clientX/Y and `drag` can fire with
-// (0, 0). dragover on the target reliably reports real client coords.
-// https://bugzilla.mozilla.org/show_bug.cgi?id=1773886
-function trackNativeDragPosition(e: DragEvent) {
-  if (dragMode.value !== 'native') return
-  if (e.clientX === 0 && e.clientY === 0) return
-  lastNativeDragPosition.value = { x: e.clientX, y: e.clientY }
-}
-
 function cancelDrag() {
   isDragging.value = false
   draggedNode.value = null
   dragMode.value = 'click'
-  lastNativeDragPosition.value = undefined
 }
 
 function isOverCanvas(clientX: number, clientY: number): boolean {
@@ -49,8 +37,7 @@ function isOverCanvas(clientX: number, clientY: number): boolean {
 }
 
 function addNodeAtPosition(clientX: number, clientY: number): boolean {
-  const nodeDef = draggedNode.value
-  if (!nodeDef) return false
+  if (!draggedNode.value) return false
   const canvas = useCanvasStore().canvas
   if (!canvas) return false
   if (!isOverCanvas(clientX, clientY)) return false
@@ -59,9 +46,7 @@ function addNodeAtPosition(clientX: number, clientY: number): boolean {
     clientX,
     clientY
   } as PointerEvent)
-  const node = withNodeAddSource('sidebar_drag', () =>
-    useLitegraphService().addNodeOnGraph(nodeDef, { pos })
-  )
+  const node = useLitegraphService().addNodeOnGraph(draggedNode.value, { pos })
   if (node) canvas.selectItems([node])
   return true
 }
@@ -96,7 +81,6 @@ function setupGlobalListeners() {
   document.addEventListener('pointerdown', blockCommitPointerDown, true)
   document.addEventListener('pointerup', endDrag, true)
   document.addEventListener('keydown', handleKeydown)
-  document.addEventListener('dragover', trackNativeDragPosition)
 }
 
 function cleanupGlobalListeners() {
@@ -107,7 +91,6 @@ function cleanupGlobalListeners() {
   document.removeEventListener('pointerdown', blockCommitPointerDown, true)
   document.removeEventListener('pointerup', endDrag, true)
   document.removeEventListener('keydown', handleKeydown)
-  document.removeEventListener('dragover', trackNativeDragPosition)
 
   if (isDragging.value && dragMode.value === 'click') {
     cancelDrag()
@@ -123,9 +106,8 @@ export function useNodeDragToCanvas() {
 
   function handleNativeDrop(clientX: number, clientY: number) {
     if (dragMode.value !== 'native') return
-    const tracked = lastNativeDragPosition.value
     try {
-      addNodeAtPosition(tracked?.x ?? clientX, tracked?.y ?? clientY)
+      addNodeAtPosition(clientX, clientY)
     } finally {
       cancelDrag()
     }

src/composables/queue/useJobMenu.ts

@@ -8,7 +8,6 @@ import { mapTaskOutputToAssetItem } from '@/platform/assets/composables/media/as
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { ResultItem, ResultItemType } from '@/schemas/apiSchema'
@@ -147,11 +146,9 @@ export function useJobMenu(
 
     const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
     if (!nodeDef) return
-    const node = withNodeAddSource('programmatic', () =>
-      litegraphService.addNodeOnGraph(nodeDef, {
-        pos: litegraphService.getCanvasCenter()
-      })
-    )
+    const node = litegraphService.addNodeOnGraph(nodeDef, {
+      pos: litegraphService.getCanvasCenter()
+    })
 
     if (!node) return
 

src/composables/useCanvasDrop.ts

@@ -4,7 +4,6 @@ import { useSharedCanvasPositionConversion } from '@/composables/element/useCanv
 import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
 import type { LGraphNode, Point } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { app as comfyApp } from '@/scripts/app'
@@ -38,9 +37,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
           // Add an offset on y to make sure after adding the node, the cursor
           // is on the node (top left corner)
           pos[1] += LiteGraph.NODE_TITLE_HEIGHT
-          withNodeAddSource('sidebar_drag', () =>
-            litegraphService.addNodeOnGraph(nodeDef, { pos })
-          )
+          litegraphService.addNodeOnGraph(nodeDef, { pos })
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
           const pos = basePos
@@ -61,8 +58,11 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
           if (!targetGraphNode) {
             const provider = modelToNodeStore.getNodeProvider(model.directory)
             if (provider) {
-              targetGraphNode = withNodeAddSource('sidebar_drag', () =>
-                litegraphService.addNodeOnGraph(provider.nodeDef, { pos })
+              targetGraphNode = litegraphService.addNodeOnGraph(
+                provider.nodeDef,
+                {
+                  pos
+                }
               )
               targetProvider = provider
             }

src/composables/useLoad3d.test.ts

@@ -3,14 +3,7 @@ import { nextTick, reactive, ref, shallowRef } from 'vue'
 import type { Pinia } from 'pinia'
 import { getActivePinia } from 'pinia'
 
-import {
-  getLoad3dOutputCache,
-  isLoad3dSceneDirty,
-  markLoad3dSceneDirty,
-  nodeToLoad3dMap,
-  setLoad3dOutputCache,
-  useLoad3d
-} from '@/composables/useLoad3d'
+import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
@@ -151,6 +144,7 @@ describe('useLoad3d', () => {
       setMaterialMode: vi.fn(),
       toggleCamera: vi.fn(),
       setFOV: vi.fn(),
+      setRetainViewOnReload: vi.fn(),
       setLightIntensity: vi.fn(),
       setCameraState: vi.fn(),
       loadModel: vi.fn().mockResolvedValue(undefined),
@@ -193,7 +187,6 @@ describe('useLoad3d', () => {
       resetGizmoTransform: vi.fn(),
       applyGizmoTransform: vi.fn(),
       fitToViewer: vi.fn(),
-      centerCameraOnModel: vi.fn(),
       getGizmoTransform: vi.fn().mockReturnValue({
         position: { x: 0, y: 0, z: 0 },
         rotation: { x: 0, y: 0, z: 0 },
@@ -341,20 +334,6 @@ describe('useLoad3d', () => {
       expect(composable.isPreview.value).toBe(true)
     })
 
-    it('should set preview mode when comfyClass starts with Preview, even with width/height widgets', async () => {
-      Object.defineProperty(mockNode, 'constructor', {
-        value: { comfyClass: 'Preview3DAdvanced' },
-        configurable: true
-      })
-
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-
-      await composable.initializeLoad3d(containerRef)
-
-      expect(composable.isPreview.value).toBe(true)
-    })
-
     it('should handle initialization errors', async () => {
       vi.mocked(createLoad3d).mockImplementationOnce(() => {
         throw new Error('Load3d creation failed')
@@ -591,17 +570,21 @@ describe('useLoad3d', () => {
 
       vi.mocked(mockLoad3d.toggleCamera!).mockClear()
       vi.mocked(mockLoad3d.setFOV!).mockClear()
+      vi.mocked(mockLoad3d.setRetainViewOnReload!).mockClear()
 
       composable.cameraConfig.value.cameraType = 'orthographic'
       composable.cameraConfig.value.fov = 90
+      composable.cameraConfig.value.retainViewOnReload = true
       await nextTick()
 
       expect(mockLoad3d.toggleCamera).toHaveBeenCalledWith('orthographic')
       expect(mockLoad3d.setFOV).toHaveBeenCalledWith(90)
+      expect(mockLoad3d.setRetainViewOnReload).toHaveBeenCalledWith(true)
       expect(mockNode.properties['Camera Config']).toEqual({
         cameraType: 'orthographic',
         fov: 90,
-        state: null
+        state: null,
+        retainViewOnReload: true
       })
     })
 
@@ -1750,184 +1733,4 @@ describe('useLoad3d', () => {
       expect(originalOnRemoved).toHaveBeenCalledTimes(1)
     })
   })
-
-  describe('scene dirty tracking', () => {
-    const fakeCache = {
-      image: 'threed/scene-1.png [temp]',
-      mask: 'threed/scene_mask-1.png [temp]',
-      normal: 'threed/scene_normal-1.png [temp]',
-      camera_info: null,
-      recording: '',
-      model_3d_info: []
-    }
-
-    it('treats an unseen node as dirty by default', () => {
-      const fresh = createMockLGraphNode({ properties: {} })
-      expect(isLoad3dSceneDirty(fresh)).toBe(true)
-    })
-
-    it('markLoad3dSceneDirty sets the node dirty', () => {
-      const fresh = createMockLGraphNode({ properties: {} })
-      setLoad3dOutputCache(fresh, fakeCache)
-      expect(isLoad3dSceneDirty(fresh)).toBe(false)
-
-      markLoad3dSceneDirty(fresh)
-      expect(isLoad3dSceneDirty(fresh)).toBe(true)
-    })
-
-    it('setLoad3dOutputCache stores the output and clears dirty', () => {
-      const fresh = createMockLGraphNode({ properties: {} })
-      setLoad3dOutputCache(fresh, fakeCache)
-
-      expect(getLoad3dOutputCache(fresh)).toBe(fakeCache)
-      expect(isLoad3dSceneDirty(fresh)).toBe(false)
-    })
-
-    it('two nodes keep independent dirty state', () => {
-      const a = createMockLGraphNode({ properties: {} })
-      const b = createMockLGraphNode({ properties: {} })
-
-      setLoad3dOutputCache(a, fakeCache)
-      expect(isLoad3dSceneDirty(a)).toBe(false)
-      expect(isLoad3dSceneDirty(b)).toBe(true)
-
-      markLoad3dSceneDirty(a)
-      expect(isLoad3dSceneDirty(a)).toBe(true)
-      expect(isLoad3dSceneDirty(b)).toBe(true)
-    })
-
-    it('markLoad3dSceneDirty on null is a no-op', () => {
-      expect(() => markLoad3dSceneDirty(null)).not.toThrow()
-    })
-
-    it('sceneConfig changes flip the node dirty', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
-
-      composable.sceneConfig.value.backgroundColor = '#ffffff'
-      await nextTick()
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('cameraChanged event marks the node dirty', async () => {
-      let cameraChangedHandler: ((state: unknown) => void) | undefined
-      vi.mocked(mockLoad3d.addEventListener!).mockImplementation(
-        (event: string, handler: unknown) => {
-          if (event === 'cameraChanged') {
-            cameraChangedHandler = handler as (state: unknown) => void
-          }
-        }
-      )
-
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
-
-      cameraChangedHandler!({ position: { x: 1, y: 2, z: 3 } })
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('handleStopRecording marks dirty when a recording was produced', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-
-      vi.mocked(mockLoad3d.getRecordingDuration!).mockReturnValue(5)
-      composable.handleStopRecording()
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('handleStopRecording leaves dirty alone when no recording was produced', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-
-      vi.mocked(mockLoad3d.getRecordingDuration!).mockReturnValue(0)
-      composable.handleStopRecording()
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
-    })
-
-    it('handleClearRecording marks dirty', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-      composable.handleClearRecording()
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('handleStartRecording marks dirty so an in-progress recording forces a re-capture', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
-
-      await composable.handleStartRecording()
-
-      expect(mockLoad3d.startRecording).toHaveBeenCalledTimes(1)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('handleCenterCameraOnModel marks dirty', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      setLoad3dOutputCache(mockNode, fakeCache)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(false)
-
-      composable.handleCenterCameraOnModel()
-
-      expect(mockLoad3d.centerCameraOnModel).toHaveBeenCalledTimes(1)
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-
-    it('handleSeek marks dirty when the animation has a duration', async () => {
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-      await composable.initializeLoad3d(containerRef)
-      await nextTick()
-
-      const calls = vi.mocked(mockLoad3d.addEventListener!).mock.calls
-      const match = calls.find(([event]) => event === 'animationProgressChange')
-      const animationProgressHandler = match![1] as (d: {
-        progress: number
-        currentTime: number
-        duration: number
-      }) => void
-
-      animationProgressHandler({ progress: 0, currentTime: 0, duration: 10 })
-      setLoad3dOutputCache(mockNode, fakeCache)
-
-      composable.handleSeek(50)
-
-      expect(isLoad3dSceneDirty(mockNode)).toBe(true)
-    })
-  })
 })