Merge branch 'main' into test/fe-741-grid-thumbnail-e2e

## Summary

Adds an Arrange popover to the multi-select toolbox that repositions
selected nodes into vertical, horizontal, or grid layouts, with a
follow-up slider to tune the spacing.



https://github.com/user-attachments/assets/f9a55ef9-2619-462b-a83f-2b86eb076fe3


## Changes

- **What**: New `ArrangeButton` placed between the color picker and
frame icons. Three layouts (vertical, horizontal, grid) sort selected
nodes by current position and lay them out from the smallest-`x+y`
anchor with a 12-unit gap. Visual bounds account for
`LiteGraph.NODE_TITLE_HEIGHT` so titles don't overlap stacked bodies.
After picking a layout, the popover swaps to a 0–48 spacing slider —
drag previews live (rAF-throttled, no undo capture), release commits one
undo entry. Closing the popover ends the session.
- **Breaking**: none
- **Dependencies**: none

## Review Focus

- `useArrangeNodes.computeArrangement` — pure layout math separated from
side effects; covered by 8 unit tests including the title-height
handling and `TitleMode.NO_TITLE` case.
- `useArrangeSession` — owns the slider's state machine. rAF-throttled
`previewGap` collapses rapid drag events into one frame; `commitGap`
cancels any pending preview before capturing undo. Covered by 5 unit
tests.
- Position mutations go through `useLayoutMutations().batchMoveNodes`
(single batched layout-store transaction) followed by
`changeTracker.captureCanvasState()` for undo — same pattern as drag and
other selection-toolbox actions.
- Anchor selection uses smallest `pos.x + pos.y` rather than min-x or
min-y alone, to keep the layout origin stable across re-runs (slider
drags).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12068-feat-add-Arrange-action-to-multi-select-toolbox-3596d73d365081e58c25ffac41dc0b2a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: AustinMroz <austin@comfy.org>

.github/workflows/pr-report.yaml

@@ -5,6 +5,8 @@ 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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,102 @@
+<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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,84 @@
+<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,6 +43,7 @@ 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,6 +52,7 @@ 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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,67 @@
+<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

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,96 @@
+<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

@@ -0,0 +1,120 @@
+<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,6 +12,7 @@ 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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,84 @@
+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,6 +1,22 @@
 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',
@@ -1435,6 +1451,62 @@ 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': {
@@ -1471,9 +1543,13 @@ 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 背后的团队规模虽小，但充满热情，致力于打造我们毕生的事业。'
+    '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'
   },
-  'about.hero.cta': { en: 'SEE OPEN ROLES', 'zh-CN': '查看开放职位' },
 
   // AboutStorySection
   'about.story.label': { en: 'OUR STORY', 'zh-CN': '我们的故事' },
@@ -1743,6 +1819,7 @@ 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' },
@@ -4736,6 +4813,8 @@ 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
 }
@@ -4746,4 +4825,4 @@ export function hasKey(key: string): boolean {
   return key in translations
 }
 
-export type { Locale, TranslationKey }
+export type { Locale, LocalizedText, TranslationKey }

apps/website/src/pages/learning.astro

@@ -0,0 +1,27 @@
+---
+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

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

browser_tests/fixtures/selectors.ts

@@ -54,6 +54,7 @@ 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 = {
+const defaultInputAsset: Asset & { hash?: string } = {
   id: 'default-input-asset',
   name: defaultInputFileName,
-  asset_hash: defaultInputFileName,
+  hash: defaultInputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],
@@ -55,10 +55,10 @@ const defaultInputAsset: Asset = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const importedInputAsset: Asset = {
+const importedInputAsset: Asset & { hash?: string } = {
   id: 'imported-input-asset',
   name: sharedWorkflowImportScenario.inputFileName,
-  asset_hash: sharedWorkflowImportScenario.inputFileName,
+  hash: sharedWorkflowImportScenario.inputFileName,
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],

browser_tests/fixtures/utils/boundsUtils.ts

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 import { SELECTION_BOUNDS_PADDING } from '@/base/common/selectionBounds'
 import type { CanvasRect } from '@/base/common/selectionBounds'
@@ -91,3 +91,21 @@ 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,63 +19,24 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     return page.getByTestId(TestIds.dialogs.errorOverlay)
   }
 
-  function getSeeErrorsButton(page: Page) {
+  function getDetailsButton(page: Page) {
     return getOverlay(page).getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
   }
 
   test.describe('Labels', () => {
-    test('Should display singular error count label for single error', async ({
+    test('Should display single error copy and View details action', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-      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
+      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
       )
     })
   })
@@ -137,7 +98,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     })
   })
 
-  test.describe('See Errors flow', () => {
+  test.describe('View details flow', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.setup()
     })
@@ -166,7 +127,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(overlay).toHaveText(/\S/)
     })
 
-    test('"See Errors" opens right side panel', async ({ comfyPage }) => {
+    test('"View details" opens right side panel', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -178,7 +139,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 
-    test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
+    test('"View details" dismisses the overlay', async ({ comfyPage }) => {
       await triggerExecutionError(comfyPage)
 
       const overlay = getOverlay(comfyPage.page)
@@ -229,19 +190,24 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     }) => {
       // Regression: ErrorOverlay previously read the selection-filtered
       // missingModelGroups from useErrorGroups, so selecting one of two
-      // 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.
+      // missing-model nodes could shrink the overlay count. 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 required models are missing/i)
+      await expect(overlay).toContainText(/2 errors found/i)
+      await expect(
+        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
+      ).toHaveText(/Resolve them before running the workflow\./i)
 
       const node = await comfyPage.nodeOps.getNodeRefById('1')
       await node.click('title')
 
-      await expect(overlay).toContainText(/2 required models are missing/i)
+      await expect(overlay).toContainText(/2 errors found/i)
+      await expect(
+        overlay.getByTestId(TestIds.dialogs.errorOverlayMessages)
+      ).toHaveText(/Resolve them before running the workflow\./i)
     })
   })
 })

browser_tests/tests/extensionAPI.spec.ts

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

browser_tests/tests/nodeReplacement.spec.ts

@@ -11,6 +11,7 @@ import {
   getSwapNodesGroup,
   setupNodeReplacement
 } from '@e2e/fixtures/helpers/NodeReplacementHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 const renderModes = [
   { name: 'vue nodes', vueNodesEnabled: true },
@@ -38,6 +39,9 @@ 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/errorsTabCloudMissingModels.spec.ts

@@ -12,11 +12,10 @@ 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 = {
+const LOTUS_DIFFUSION_MODEL: Asset & { hash?: string } = {
   id: 'test-lotus-depth-d-v1-1',
   name: LOTUS_MODEL_NAME,
-  asset_hash:
-    'blake3:0000000000000000000000000000000000000000000000000000000000000203',
+  hash: 'blake3:0000000000000000000000000000000000000000000000000000000000000203',
   size: 1_024,
   mime_type: 'application/octet-stream',
   tags: ['models', 'diffusion_models'],

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -36,6 +36,10 @@ 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(
@@ -46,14 +50,24 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
   test.describe('Detection', () => {
     test('Shows missing media group in errors tab', async ({ comfyPage }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_single')
 
+      const overlay = getErrorOverlay(comfyPage)
+      await expect(overlay).toBeVisible()
       await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
-      ).toBeVisible()
+        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 expect(missingMediaGroup).toBeVisible()
+      await expect(
+        missingMediaGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
+      ).toHaveText(/\S/)
     })
 
     test('Shows correct number of missing media rows', async ({

browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts

@@ -23,11 +23,31 @@ 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 = {
+const cloudOutputAsset: Asset & { hash?: string } = {
   id: 'test-output-hash-001',
   name: 'ComfyUI_00001_.png',
-  asset_hash: outputHash,
+  hash: outputHash,
   size: 4_194_304,
   mime_type: 'image/png',
   tags: ['output'],
@@ -36,10 +56,10 @@ const cloudOutputAsset: Asset = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const cloudUploadedVideoAsset: Asset = {
+const cloudUploadedVideoAsset: Asset & { hash?: string } = {
   id: 'test-uploaded-video-001',
   name: plainVideoFileName,
-  asset_hash: plainVideoFileName,
+  hash: plainVideoFileName,
   size: 1_024,
   mime_type: 'video/mp4',
   tags: ['input'],
@@ -50,10 +70,10 @@ const cloudUploadedVideoAsset: Asset = {
 
 // 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 = {
+const cloudDefaultGraphInputAsset: Asset & { hash?: string } = {
   id: 'test-default-input-001',
   name: '00000000000000000000000Aexample.png',
-  asset_hash: '00000000000000000000000Aexample.png',
+  hash: '00000000000000000000000Aexample.png',
   size: 1_024,
   mime_type: 'image/png',
   tags: ['input'],
@@ -66,12 +86,168 @@ interface CloudUploadAssetState {
   isUploadedAssetAvailable: boolean
 }
 
-const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset])
+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 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
     }
@@ -106,9 +282,13 @@ const cloudUploadRaceTest = comfyPageFixture.extend<{
     }
 
     await page.route(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-    await use(page)
-    await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-    cloudUploadAssetStateByPage.delete(page)
+    try {
+      await use(page)
+    } finally {
+      await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+      await unrouteObjectInfo()
+      cloudUploadAssetStateByPage.delete(page)
+    }
   },
   markUploadedCloudAssetAvailable: async ({ page }, use) => {
     await use(() => {
@@ -139,7 +319,41 @@ async function expectNoErrorsTab(comfyPage: ComfyPage) {
   ).toBeHidden()
 }
 
-async function delayNextUpload(comfyPage: ComfyPage) {
+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' }
+) {
   let releaseUpload!: () => void
   let resolveUploadStarted!: () => void
   const uploadStarted = new Promise<void>((resolve) => {
@@ -152,6 +366,14 @@ async function delayNextUpload(comfyPage: ComfyPage) {
   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()
   }
 
@@ -295,12 +517,51 @@ 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(
@@ -329,13 +590,18 @@ 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)
+        const delayedUpload = await delayNextUpload(comfyPage, {
+          name: plainVideoFileName,
+          subfolder: '',
+          type: 'input'
+        })
 
         await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
           dropPosition: graphDropPosition

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -25,9 +25,13 @@ 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(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
-    ).toBeVisible()
+      missingModelsGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
+    ).toHaveText(/\S/)
   })
 
   test('Should display model name with referencing node count', async ({

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -23,9 +23,13 @@ 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(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
-    ).toBeVisible()
+      missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
+    ).toHaveText(/\S/)
   })
 
   test('Should expand pack group to reveal node type names', async ({

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

@@ -0,0 +1,101 @@
+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/vueNodes/interactions/node/imagePreview.spec.ts

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

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

@@ -54,6 +54,35 @@ 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, {
@@ -123,7 +152,7 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.vueNodes.waitForNodes()
 
     const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
-    const showButton = node.getByText('Show advanced inputs')
+    const showButton = getAdvancedInputsButton(node)
     const widgets = node.locator('.lg-node-widget')
 
     await expect(showButton).toBeVisible()
@@ -143,6 +172,83 @@ 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,6 +6,7 @@ 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 }) => {
@@ -32,6 +33,20 @@ 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)
@@ -72,6 +87,47 @@ 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,10 +1,12 @@
+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 type { Locator } from '@playwright/test'
+import { intersection } from '@e2e/fixtures/utils/boundsUtils'
 
 test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {
   async function openSamplerDropdown(comfyPage: ComfyPage) {
@@ -278,4 +280,31 @@ 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,9 +5,16 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "/assets/images/comfy-logo-single.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
+      "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"
     }
   ],
   "display": "standalone"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.46.8",
+  "version": "1.46.9",
   "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 NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.config.mts",
+    "build:cloud": "cross-env DISTRIBUTION=cloud vite build --config vite.config.mts",
     "build:desktop": "pnpm --filter @comfyorg/desktop-ui run build",
     "build-storybook": "storybook build",
-    "build:types": "cross-env NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
-    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && vite build --config vite.config.mts",
+    "build": "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",

pnpm-workspace.yaml

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

src/components/builder/AppModeWidgetList.vue

@@ -8,7 +8,6 @@ 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'
@@ -50,7 +49,6 @@ 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,6 +14,12 @@ 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)
@@ -27,8 +33,8 @@ describe('ColorCustomizationSelector', () => {
 
     const result = render(ColorCustomizationSelector, {
       global: {
-        plugins: [PrimeVue],
-        components: { SelectButton, ColorPicker }
+        plugins: [PrimeVue, i18n],
+        components: { SelectButton }
       },
       props: {
         modelValue: null,
@@ -68,24 +74,21 @@ 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()
+    const { container, user } = renderComponent({ modelValue: '#0d6efd' })
+    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 initialButtonCount = container.querySelectorAll('button').length
+    const toggleButtons = getToggleButtons(container)
+    await user.click(toggleButtons[toggleButtons.length - 1])
+    await nextTick()
 
-    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()
+    // 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)
   })
 
   it('emits update when predefined color is selected', async () => {
@@ -117,7 +120,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 ('0d6efd')
+    // When switching to custom, the custom color value inherits from Blue
     // and the watcher on customColorValue emits the update
     expect(onUpdate).toHaveBeenCalledWith('#0d6efd')
   })

src/components/common/ColorCustomizationSelector.vue

@@ -30,10 +30,11 @@
 </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,
@@ -65,7 +66,7 @@ onMounted(() => {
       selectedColorOption.value = predefinedColor
     } else {
       selectedColorOption.value = customColorOption
-      customColorValue.value = modelValue.replace('#', '')
+      customColorValue.value = modelValue
     }
   }
 })
@@ -74,7 +75,7 @@ onMounted(() => {
 watch(selectedColorOption, (newOption, oldOption) => {
   if (newOption.name === '_custom') {
     // Inherit the color from previous selection
-    customColorValue.value = oldOption.value.replace('#', '')
+    customColorValue.value = oldOption.value
   } else {
     emit('update:modelValue', newOption.value)
   }
@@ -82,7 +83,7 @@ watch(selectedColorOption, (newOption, oldOption) => {
 
 watch(customColorValue, (newValue) => {
   if (selectedColorOption.value.name === '_custom') {
-    emit('update:modelValue', newValue ? `#${newValue}` : null)
+    emit('update:modelValue', newValue || null)
   }
 })
 </script>

src/components/common/CustomizationDialog.vue

@@ -2,11 +2,7 @@
   <Dialog v-model:open="visible" :modal="false">
     <DialogPortal>
       <DialogOverlay />
-      <DialogContent
-        size="md"
-        :aria-labelledby="titleId"
-        @pointer-down-outside="onPointerDownOutside"
-      >
+      <DialogContent size="md" :aria-labelledby="titleId">
         <DialogHeader>
           <DialogTitle :id="titleId">
             {{ $t('g.customizeFolder') }}
@@ -92,21 +88,6 @@ 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

@@ -0,0 +1,110 @@
+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,20 +1,76 @@
 <template>
   <div class="color-picker-wrapper flex items-center gap-2">
-    <ColorPicker v-model="modelValue" v-bind="$attrs" />
-    <InputText v-model="modelValue" class="w-28" :placeholder="label" />
+    <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"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import ColorPicker from 'primevue/colorpicker'
-import InputText from 'primevue/inputtext'
+import { computed, ref, watch } from 'vue'
+
+import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
+import Input from '@/components/ui/input/Input.vue'
 
 const modelValue = defineModel<string>('modelValue')
-defineProps<{
+const {
+  disabled = false,
+  id,
+  ariaLabelledby
+} = 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

@@ -0,0 +1,180 @@
+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="alert"
-        aria-live="assertive"
+        role="status"
+        aria-live="polite"
         data-testid="error-overlay"
-        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"
+        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"
       >
         <!-- Header -->
         <div class="flex h-12 items-center gap-2 px-4">
           <span class="flex-1 text-sm font-bold text-destructive-background">
-            {{ errorCountLabel }}
+            {{ overlayTitle }}
           </span>
           <Button
             variant="muted-textonly"
@@ -28,20 +28,11 @@
 
         <!-- Body -->
         <div class="px-4 pb-3" data-testid="error-overlay-messages">
-          <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>
+          <p
+            class="m-0 line-clamp-3 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
+          >
+            {{ overlayMessage }}
+          </p>
         </div>
 
         <!-- Footer -->
@@ -60,7 +51,11 @@
             data-testid="error-overlay-see-errors"
             @click="seeErrors"
           >
-            {{ appMode ? t('linearMode.error.goto') : seeErrorsLabel }}
+            {{
+              appMode
+                ? t('linearMode.error.goto')
+                : t('errorOverlay.viewDetails')
+            }}
           </Button>
         </div>
       </div>
@@ -69,73 +64,22 @@
 </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 { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
+import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
 
-defineProps<{ appMode?: boolean }>()
+const { appMode = false } = defineProps<{ appMode?: boolean }>()
 
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()
 
-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
-)
+const { isVisible, overlayMessage, overlayTitle } = useErrorOverlayState()
 
 function dismiss() {
   executionErrorStore.dismissErrorOverlay()

src/components/error/useErrorOverlayState.test.ts

@@ -0,0 +1,337 @@
+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

@@ -0,0 +1,103 @@
+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,6 +20,7 @@
         <InfoButton v-if="canOpenNodeInfo" />
 
         <ColorPickerButton v-if="showColorPicker" />
+        <ArrangeButton v-if="showArrange" />
         <FrameNodes v-if="showFrameNodes" />
         <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
         <ConfigureSubgraph v-if="showSubgraphButtons" />
@@ -49,6 +50,7 @@
 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'
@@ -110,6 +112,7 @@ 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)
 
@@ -128,6 +131,7 @@ const showAnyPrimaryActions = computed(
   () =>
     showColorPicker.value ||
     showConvertToSubgraph.value ||
+    showArrange.value ||
     showFrameNodes.value ||
     showSubgraphButtons.value
 )

src/components/graph/selectionToolbox/ArrangeButton.vue

@@ -0,0 +1,115 @@
+<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,7 +71,6 @@
         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,32 +18,10 @@
       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'
@@ -52,9 +30,6 @@ 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/MissingNodeCard.test.ts

@@ -90,8 +90,6 @@ 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'
@@ -159,21 +157,6 @@ 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,19 +36,6 @@
         </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

@@ -7,6 +7,8 @@ import { createI18n } from 'vue-i18n'
 import TabErrors from './TabErrors.vue'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
+import type { MissingNodeType } from '@/types/comfy'
 
 vi.mock('@/scripts/app', () => ({
   app: {
@@ -36,6 +38,16 @@ vi.mock('@/services/litegraphService', () => ({
   }))
 }))
 
+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>
 
@@ -57,6 +69,18 @@ describe('TabErrors.vue', () => {
               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'
             }
           }
         }
@@ -282,6 +306,85 @@ 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

@@ -154,6 +154,18 @@
             </div>
           </template>
 
+          <div
+            v-if="group.type !== 'execution' && 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'"
@@ -166,7 +178,7 @@
 
           <!-- Swap Nodes -->
           <SwapNodesCard
-            v-else-if="group.type === 'swap_nodes'"
+            v-if="group.type === 'swap_nodes'"
             :swap-node-groups="swapNodeGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-node="handleLocateMissingNode"
@@ -174,7 +186,7 @@
           />
 
           <!-- Execution Errors -->
-          <div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
+          <div v-if="group.type === 'execution'" class="space-y-3 px-4">
             <ErrorNodeCard
               v-for="card in group.cards"
               :key="card.id"
@@ -189,7 +201,7 @@
 
           <!-- Missing Models -->
           <MissingModelCard
-            v-else-if="group.type === 'missing_model'"
+            v-if="group.type === 'missing_model'"
             :missing-model-groups="missingModelGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-model="handleLocateAssetNode"
@@ -197,7 +209,7 @@
 
           <!-- Missing Media -->
           <MissingMediaCard
-            v-else-if="group.type === 'missing_media'"
+            v-if="group.type === 'missing_media'"
             :missing-media-groups="missingMediaGroups"
             :show-node-id-badge="showNodeIdBadge"
             @locate-node="handleLocateAssetNode"

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

@@ -174,6 +174,7 @@ describe('useErrorGroups', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     mockIsCloud.value = false
+    vi.mocked(isLGraphNode).mockReturnValue(false)
   })
 
   describe('missingPackGroups', () => {
@@ -301,7 +302,24 @@ describe('useErrorGroups', () => {
       expect(missingGroup?.groupKey).toBe('missing_node')
       expect(missingGroup?.displayTitle).toBe('Missing Node Packs (1)')
       expect(missingGroup?.displayMessage).toBe(
-        'Some nodes are missing and need to be installed'
+        '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."
       )
     })
 
@@ -524,6 +542,28 @@ 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 = {
@@ -960,4 +1000,28 @@ 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

@@ -347,8 +347,14 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     card.errors.push(...errors)
   }
 
-  function processPromptError(groupsMap: Map<string, GroupEntry>) {
-    if (selectedNodeInfo.value.nodeIds || !executionErrorStore.lastPromptError)
+  function processPromptError(
+    groupsMap: Map<string, GroupEntry>,
+    filterBySelection = false
+  ) {
+    if (
+      (filterBySelection && selectedNodeInfo.value.nodeIds) ||
+      !executionErrorStore.lastPromptError
+    )
       return
 
     const error = executionErrorStore.lastPromptError
@@ -717,7 +723,6 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
           kind: 'missing_media',
           groups: missingMediaGroups.value,
           count: totalItems,
-          mediaTypes: missingMediaGroups.value.map((group) => group.mediaType),
           isCloud
         })
       }
@@ -834,9 +839,6 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
           kind: 'missing_media',
           groups: filteredMissingMediaGroups.value,
           count: totalItems,
-          mediaTypes: filteredMissingMediaGroups.value.map(
-            (group) => group.mediaType
-          ),
           isCloud
         })
       }
@@ -861,7 +863,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
   const tabErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
-    processPromptError(groupsMap)
+    processPromptError(groupsMap, true)
     processNodeErrors(groupsMap, true)
     processExecutionError(groupsMap, true)
 

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -67,6 +67,7 @@ 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'
@@ -140,10 +141,12 @@ function closeDialog() {
 
 function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
   const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
-  const node = litegraphService.addNodeOnGraph(
-    nodeDef,
-    { pos: getNewNodeLocation() },
-    { ghost: useSearchBoxV2.value && followCursor, dragEvent }
+  const node = withNodeAddSource('search_modal', () =>
+    litegraphService.addNodeOnGraph(
+      nodeDef,
+      { pos: getNewNodeLocation() },
+      { ghost: useSearchBoxV2.value && followCursor, dragEvent }
+    )
   )
   if (!node) return
 

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -65,6 +65,7 @@ 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'
@@ -155,8 +156,8 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
         if (this.leaf && model) {
           const provider = modelToNodeStore.getNodeProvider(model.directory)
           if (provider) {
-            const graphNode = useLitegraphService().addNodeOnGraph(
-              provider.nodeDef
+            const graphNode = withNodeAddSource('sidebar_drag', () =>
+              useLitegraphService().addNodeOnGraph(provider.nodeDef)
             )
             const widget = graphNode?.widgets?.find(
               (widget) => widget.name === provider.key

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -189,6 +189,7 @@ 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,
@@ -321,8 +322,11 @@ const renderedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(() => {
         }
       },
       handleClick(e: MouseEvent) {
-        if (this.leaf && this.data) {
-          useLitegraphService().addNodeOnGraph(this.data)
+        const nodeDef = this.data
+        if (this.leaf && nodeDef) {
+          withNodeAddSource('sidebar_drag', () =>
+            useLitegraphService().addNodeOnGraph(nodeDef)
+          )
         } else {
           toggleNodeOnEvent(e, this)
         }

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

@@ -39,6 +39,7 @@ 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'
@@ -183,8 +184,11 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
           await nodeBookmarkStore.addBookmark(nodePath)
         },
         handleClick(e: MouseEvent) {
-          if (this.leaf && this.data) {
-            useLitegraphService().addNodeOnGraph(this.data)
+          const nodeDef = this.data
+          if (this.leaf && nodeDef) {
+            withNodeAddSource('sidebar_drag', () =>
+              useLitegraphService().addNodeOnGraph(nodeDef)
+            )
           } else {
             toggleNodeOnEvent(e, node)
           }

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

@@ -15,6 +15,7 @@ import ColorPickerPanel from './ColorPickerPanel.vue'
 
 defineProps<{
   class?: string
+  disabled?: boolean
 }>()
 
 const modelValue = defineModel<string>({ default: '#000000' })
@@ -66,9 +67,10 @@ 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',
+            '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',
             isOpen && 'border-node-stroke',
             $props.class
           )

src/composables/graph/contextMenuConverter.test.ts

@@ -204,6 +204,90 @@ 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,6 +227,12 @@ 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',
@@ -248,12 +254,7 @@ const MENU_ORDER: string[] = [
   // Section 4: Node properties
   'Node Info',
   'Color',
-  // Section 5: Node-specific operations
-  'Open in Mask Editor',
-  'Open Image',
-  'Copy Image',
-  'Paste Image',
-  'Save Image',
+  // Section 5: Clipspace operations
   'Copy (Clipspace)',
   'Paste (Clipspace)'
 ]
@@ -309,27 +310,29 @@ export function buildStructuredMenu(options: MenuOption[]): MenuOption[] {
   coreLabels.sort((a, b) => getMenuItemOrder(a) - getMenuItemOrder(b))
 
   // Section boundaries based on MENU_ORDER indices
-  // 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)
+  // 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)
   const getSectionNumber = (index: number): number => {
-    if (index <= 2) return 1
-    if (index <= 8) return 2
-    if (index <= 14) return 3
-    if (index <= 16) return 4
+    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
     return 5
   }
 
-  let lastSection = 0
+  let lastSection = -1
   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 > 0 && currentSection !== lastSection) {
+    if (lastSection !== -1 && currentSection !== lastSection) {
       orderedCoreItems.push({ type: 'divider' })
     }
 

src/composables/graph/useArrangeNodes.test.ts

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,186 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,60 @@
+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,6 +101,23 @@ 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,15 +116,16 @@ 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,4 +456,105 @@ 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,5 +1,6 @@
 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'
@@ -10,16 +11,27 @@ 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 {
@@ -37,7 +49,8 @@ function isOverCanvas(clientX: number, clientY: number): boolean {
 }
 
 function addNodeAtPosition(clientX: number, clientY: number): boolean {
-  if (!draggedNode.value) return false
+  const nodeDef = draggedNode.value
+  if (!nodeDef) return false
   const canvas = useCanvasStore().canvas
   if (!canvas) return false
   if (!isOverCanvas(clientX, clientY)) return false
@@ -46,7 +59,9 @@ function addNodeAtPosition(clientX: number, clientY: number): boolean {
     clientX,
     clientY
   } as PointerEvent)
-  const node = useLitegraphService().addNodeOnGraph(draggedNode.value, { pos })
+  const node = withNodeAddSource('sidebar_drag', () =>
+    useLitegraphService().addNodeOnGraph(nodeDef, { pos })
+  )
   if (node) canvas.selectItems([node])
   return true
 }
@@ -81,6 +96,7 @@ function setupGlobalListeners() {
   document.addEventListener('pointerdown', blockCommitPointerDown, true)
   document.addEventListener('pointerup', endDrag, true)
   document.addEventListener('keydown', handleKeydown)
+  document.addEventListener('dragover', trackNativeDragPosition)
 }
 
 function cleanupGlobalListeners() {
@@ -91,6 +107,7 @@ 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()
@@ -106,8 +123,9 @@ export function useNodeDragToCanvas() {
 
   function handleNativeDrop(clientX: number, clientY: number) {
     if (dragMode.value !== 'native') return
+    const tracked = lastNativeDragPosition.value
     try {
-      addNodeAtPosition(clientX, clientY)
+      addNodeAtPosition(tracked?.x ?? clientX, tracked?.y ?? clientY)
     } finally {
       cancelDrag()
     }

src/composables/queue/useJobMenu.ts

@@ -8,6 +8,7 @@ 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'
@@ -146,9 +147,11 @@ export function useJobMenu(
 
     const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
     if (!nodeDef) return
-    const node = litegraphService.addNodeOnGraph(nodeDef, {
-      pos: litegraphService.getCanvasCenter()
-    })
+    const node = withNodeAddSource('programmatic', () =>
+      litegraphService.addNodeOnGraph(nodeDef, {
+        pos: litegraphService.getCanvasCenter()
+      })
+    )
 
     if (!node) return
 

src/composables/useCanvasDrop.ts

@@ -4,6 +4,7 @@ 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'
@@ -37,7 +38,9 @@ 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
-          litegraphService.addNodeOnGraph(nodeDef, { pos })
+          withNodeAddSource('sidebar_drag', () =>
+            litegraphService.addNodeOnGraph(nodeDef, { pos })
+          )
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
           const pos = basePos
@@ -58,11 +61,8 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
           if (!targetGraphNode) {
             const provider = modelToNodeStore.getNodeProvider(model.directory)
             if (provider) {
-              targetGraphNode = litegraphService.addNodeOnGraph(
-                provider.nodeDef,
-                {
-                  pos
-                }
+              targetGraphNode = withNodeAddSource('sidebar_drag', () =>
+                litegraphService.addNodeOnGraph(provider.nodeDef, { pos })
               )
               targetProvider = provider
             }

src/composables/useLoad3d.test.ts

@@ -144,7 +144,6 @@ 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),
@@ -334,6 +333,20 @@ 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')
@@ -570,21 +583,17 @@ 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,
-        retainViewOnReload: true
+        state: null
       })
     })
 

src/composables/useLoad3d.ts

@@ -152,7 +152,10 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       const widthWidget = node.widgets?.find((w) => w.name === 'width')
       const heightWidget = node.widgets?.find((w) => w.name === 'height')
 
-      if (!(widthWidget && heightWidget)) {
+      if (
+        node.constructor.comfyClass?.startsWith('Preview') ||
+        !(widthWidget && heightWidget)
+      ) {
         isPreview.value = true
       }
 
@@ -484,7 +487,6 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
         nodeRef.value.properties['Camera Config'] = newValue
         load3d.toggleCamera(newValue.cameraType)
         load3d.setFOV(newValue.fov)
-        load3d.setRetainViewOnReload(newValue.retainViewOnReload ?? false)
       }
     },
     { deep: true }

src/composables/useTransformCompatOverlayProps.ts

@@ -1,55 +0,0 @@
-import type { HintedString } from '@primevue/core'
-import type { InjectionKey } from 'vue'
-import { computed, inject } from 'vue'
-
-/**
- * Options for configuring transform-compatible overlay props
- */
-interface TransformCompatOverlayOptions {
-  /**
-   * Where to append the overlay. 'self' keeps overlay within component
-   * for proper transform inheritance, 'body' teleports to document body
-   */
-  appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement
-  // Future: other props needed for transform compatibility
-  // scrollTarget?: string | HTMLElement
-  // autoZIndex?: boolean
-}
-
-export const OverlayAppendToKey: InjectionKey<
-  HintedString<'body' | 'self'> | undefined | HTMLElement
-> = Symbol('OverlayAppendTo')
-
-/**
- * Composable that provides props to make PrimeVue overlay components
- * compatible with CSS-transformed parent elements.
- *
- * Vue nodes use CSS transforms for positioning/scaling. PrimeVue overlay
- * components (Select, MultiSelect, TreeSelect, etc.) teleport to document
- * body by default, breaking transform inheritance. This composable provides
- * the necessary props to keep overlays within their component elements.
- *
- * @param overrides - Optional overrides for specific use cases
- * @returns Computed props object to spread on PrimeVue overlay components
- *
- * @example
- * ```vue
- * <template>
- *   <Select v-bind="overlayProps" />
- * </template>
- *
- * <script setup>
- * const overlayProps = useTransformCompatOverlayProps()
- * </script>
- * ```
- */
-export function useTransformCompatOverlayProps(
-  overrides: TransformCompatOverlayOptions = {}
-) {
-  const injectedAppendTo = inject(OverlayAppendToKey, undefined)
-
-  return computed(() => ({
-    appendTo: injectedAppendTo ?? ('self' as const),
-    ...overrides
-  }))
-}

src/extensions/core/load3d.test.ts

@@ -1,5 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type { CameraState } from '@/extensions/core/load3d/interfaces'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { ComfyExtension } from '@/types/comfy'
@@ -9,17 +10,21 @@ const {
   waitForLoad3dMock,
   onLoad3dReadyMock,
   configureMock,
+  configureForSaveMeshMock,
   getLoad3dMock,
   toastAddAlertMock,
-  getNodeByLocatorIdMock
+  getNodeByLocatorIdMock,
+  nodeToLoad3dMap
 } = vi.hoisted(() => ({
   registerExtensionMock: vi.fn(),
   waitForLoad3dMock: vi.fn(),
   onLoad3dReadyMock: vi.fn(),
   configureMock: vi.fn(),
+  configureForSaveMeshMock: vi.fn(),
   getLoad3dMock: vi.fn(),
   toastAddAlertMock: vi.fn(),
-  getNodeByLocatorIdMock: vi.fn()
+  getNodeByLocatorIdMock: vi.fn(),
+  nodeToLoad3dMap: new Map<object, unknown>()
 }))
 
 vi.mock('@/services/extensionService', () => ({
@@ -38,12 +43,13 @@ vi.mock('@/composables/useLoad3d', () => ({
     waitForLoad3d: waitForLoad3dMock,
     onLoad3dReady: onLoad3dReadyMock
   }),
-  nodeToLoad3dMap: new Map()
+  nodeToLoad3dMap
 }))
 
 vi.mock('@/extensions/core/load3d/Load3DConfiguration', () => ({
   default: class {
     configure = configureMock
+    configureForSaveMesh = configureForSaveMeshMock
   }
 }))
 
@@ -116,18 +122,21 @@ type ExtCreated = ComfyExtension & {
   onNodeOutputsUpdated: (
     nodeOutputs: Record<string, Record<string, unknown>>
   ) => void
+  getCustomWidgets: () => Record<string, (node: LGraphNode) => unknown>
 }
 
 async function loadExtensionsFresh(): Promise<{
   load3DExt: ExtCreated
   preview3DExt: ExtCreated
+  preview3DAdvancedExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3d')
   return {
     load3DExt: registerExtensionMock.mock.calls[0][0] as ExtCreated,
-    preview3DExt: registerExtensionMock.mock.calls[1][0] as ExtCreated
+    preview3DExt: registerExtensionMock.mock.calls[1][0] as ExtCreated,
+    preview3DAdvancedExt: registerExtensionMock.mock.calls[2][0] as ExtCreated
   }
 }
 
@@ -153,6 +162,22 @@ function makePreview3DNode(
   } as unknown as LGraphNode
 }
 
+function makePreview3DAdvancedNode(
+  overrides: Partial<{
+    comfyClass: string
+    properties: Record<string, unknown>
+    widgets: FakeWidget[]
+  }> = {}
+): LGraphNode {
+  return {
+    constructor: { comfyClass: overrides.comfyClass ?? 'Preview3DAdvanced' },
+    size: [400, 550],
+    setSize: vi.fn(),
+    widgets: overrides.widgets ?? [{ name: 'image', value: '' }],
+    properties: overrides.properties ?? {}
+  } as unknown as LGraphNode
+}
+
 function makeLoad3DNode(
   overrides: Partial<{
     comfyClass: string
@@ -179,7 +204,14 @@ interface FakeLoad3d {
   whenLoadIdle: () => Promise<void>
   setCameraFromMatrices: ReturnType<typeof vi.fn>
   setBackgroundImage: ReturnType<typeof vi.fn>
+  setCameraState: ReturnType<typeof vi.fn>
+  getCameraState: ReturnType<typeof vi.fn>
+  getCurrentCameraType: ReturnType<typeof vi.fn>
+  getModelInfo: ReturnType<typeof vi.fn>
+  applyModelTransform: ReturnType<typeof vi.fn>
   isSplatModel: ReturnType<typeof vi.fn>
+  forceRender: ReturnType<typeof vi.fn>
+  cameraManager: { perspectiveCamera: { fov: number } }
   currentLoadGeneration: number
 }
 
@@ -188,7 +220,14 @@ function makeLoad3dMock(): FakeLoad3d {
     whenLoadIdle: vi.fn().mockResolvedValue(undefined),
     setCameraFromMatrices: vi.fn(),
     setBackgroundImage: vi.fn(),
+    setCameraState: vi.fn(),
+    getCameraState: vi.fn(() => ({ position: [0, 0, 5], target: [0, 0, 0] })),
+    getCurrentCameraType: vi.fn(() => 'perspective'),
+    getModelInfo: vi.fn(() => null),
+    applyModelTransform: vi.fn(),
     isSplatModel: vi.fn(() => false),
+    forceRender: vi.fn(),
+    cameraManager: { perspectiveCamera: { fov: 35 } },
     currentLoadGeneration: 0
   }
 }
@@ -199,6 +238,7 @@ async function flush() {
 
 function setupBaseMocks() {
   vi.clearAllMocks()
+  nodeToLoad3dMap.clear()
   waitForLoad3dMock.mockImplementation((cb: (load3d: FakeLoad3d) => void) => {
     cb(makeLoad3dMock())
   })
@@ -210,12 +250,14 @@ function setupBaseMocks() {
 describe('load3d module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers Comfy.Load3D and Comfy.Preview3D extensions on import', async () => {
-    const { load3DExt, preview3DExt } = await loadExtensionsFresh()
+  it('registers Comfy.Load3D, Comfy.Preview3D, and Comfy.Preview3DAdvanced extensions on import', async () => {
+    const { load3DExt, preview3DExt, preview3DAdvancedExt } =
+      await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(2)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(3)
     expect(load3DExt.name).toBe('Comfy.Load3D')
     expect(preview3DExt.name).toBe('Comfy.Preview3D')
+    expect(preview3DAdvancedExt.name).toBe('Comfy.Preview3DAdvanced')
   })
 })
 
@@ -476,6 +518,47 @@ describe('Comfy.Load3D.nodeCreated', () => {
   })
 })
 
+describe('Comfy.Load3D.getCustomWidgets LOAD_3D', () => {
+  beforeEach(setupBaseMocks)
+
+  it('adds upload and clear buttons when the node has a model_file widget', async () => {
+    const { load3DExt } = await loadExtensionsFresh()
+    const node = makeLoad3DNode()
+    const addWidget = node.addWidget as ReturnType<typeof vi.fn>
+
+    load3DExt.getCustomWidgets().LOAD_3D(node)
+
+    const buttonNames = addWidget.mock.calls
+      .filter(([type]) => type === 'button')
+      .map(([, name]) => name)
+    expect(buttonNames).toEqual([
+      'upload 3d model',
+      'upload extra resources',
+      'clear'
+    ])
+  })
+
+  it('skips upload and clear buttons when the node has no model_file widget (e.g. Preview3DAdvanced)', async () => {
+    const { load3DExt } = await loadExtensionsFresh()
+    const node = makeLoad3DNode({
+      comfyClass: 'Preview3DAdvanced',
+      widgets: [
+        { name: 'width', value: 512 },
+        { name: 'height', value: 512 },
+        { name: 'image', value: '' }
+      ]
+    })
+    const addWidget = node.addWidget as ReturnType<typeof vi.fn>
+
+    load3DExt.getCustomWidgets().LOAD_3D(node)
+
+    const buttonCalls = addWidget.mock.calls.filter(
+      ([type]) => type === 'button'
+    )
+    expect(buttonCalls).toEqual([])
+  })
+})
+
 describe('getNodeMenuItems', () => {
   beforeEach(setupBaseMocks)
 
@@ -610,3 +693,324 @@ describe('Comfy.Preview3D.onNodeOutputsUpdated', () => {
     )
   })
 })
+
+describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
+  beforeEach(setupBaseMocks)
+
+  it('skips nodes whose comfyClass is not Preview3DAdvanced', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'OtherNode' })
+
+    await preview3DAdvancedExt.nodeCreated(node)
+
+    expect(waitForLoad3dMock).not.toHaveBeenCalled()
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+
+  it('does not call configureForSaveMesh on creation when no Last Time Model File is persisted', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+
+  it('restores via configureForSaveMesh when Last Time Model File is persisted', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({
+      properties: { 'Last Time Model File': 'prev/model.glb' }
+    })
+
+    await preview3DAdvancedExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'temp',
+      'prev/model.glb',
+      { silentOnNotFound: true }
+    )
+  })
+
+  it('restores the saved camera state after model load when reloading the page', async () => {
+    const persistedCameraState = {
+      position: [1, 2, 3],
+      target: [0, 0, 0]
+    } as unknown as CameraState
+    const load3dInstance = makeLoad3dMock()
+    onLoad3dReadyMock.mockImplementationOnce(
+      (cb: (load3d: FakeLoad3d) => void) => {
+        cb(load3dInstance)
+      }
+    )
+
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({
+      properties: {
+        'Last Time Model File': 'prev/model.glb',
+        'Camera Config': {
+          cameraType: 'perspective',
+          fov: 35,
+          state: persistedCameraState
+        }
+      }
+    })
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    await flush()
+
+    expect(load3dInstance.setCameraState).toHaveBeenCalledWith(
+      persistedCameraState
+    )
+    expect(load3dInstance.forceRender).toHaveBeenCalled()
+  })
+
+  it('does not call setCameraState when no Camera Config state is persisted', async () => {
+    const load3dInstance = makeLoad3dMock()
+    onLoad3dReadyMock.mockImplementationOnce(
+      (cb: (load3d: FakeLoad3d) => void) => {
+        cb(load3dInstance)
+      }
+    )
+
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({
+      properties: { 'Last Time Model File': 'prev/model.glb' }
+    })
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    await flush()
+
+    expect(load3dInstance.setCameraState).not.toHaveBeenCalled()
+  })
+
+  it('attaches a camera-only serializeValue to the image widget', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
+    const node = makePreview3DAdvancedNode({ widgets })
+
+    await preview3DAdvancedExt.nodeCreated(node)
+
+    expect(typeof widgets[0].serializeValue).toBe('function')
+  })
+
+  it('serializeValue returns live camera_info plus empty media fields, omitting model_3d_info when none', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
+    const node = makePreview3DAdvancedNode({ widgets })
+
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    nodeToLoad3dMap.set(node, load3d)
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    const payload = await widgets[0].serializeValue!()
+
+    expect(payload).toEqual({
+      image: '',
+      mask: '',
+      normal: '',
+      camera_info: { position: [0, 0, 5], target: [0, 0, 0] },
+      recording: '',
+      model_3d_info: []
+    })
+  })
+
+  it('serializeValue wraps a present getModelInfo result in a single-element list', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
+    const node = makePreview3DAdvancedNode({ widgets })
+
+    const load3d = makeLoad3dMock()
+    const modelInfo = {
+      position: { x: 1, y: 2, z: 3 },
+      quaternion: { x: 0, y: 0, z: 0, w: 1 },
+      scale: { x: 1, y: 1, z: 1 }
+    }
+    load3d.getModelInfo = vi.fn(() => modelInfo)
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    nodeToLoad3dMap.set(node, load3d)
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    const payload = (await widgets[0].serializeValue!()) as {
+      model_3d_info: unknown[]
+    }
+
+    expect(payload.model_3d_info).toEqual([modelInfo])
+  })
+
+  it('onExecuted persists Last Time Model File with normalized slashes and calls configureForSaveMesh', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['sub\\nested\\mesh.glb'] })
+
+    expect(node.properties['Last Time Model File']).toBe('sub/nested/mesh.glb')
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'temp',
+      'sub/nested/mesh.glb',
+      { silentOnNotFound: true }
+    )
+  })
+
+  it('onExecuted applies the input cameraState when one is forwarded via PreviewUI3D', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    load3d.currentLoadGeneration = 5
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const cameraState = { position: [1, 2, 3] }
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['mesh.glb', cameraState] })
+    await flush()
+
+    expect(load3d.setCameraState).toHaveBeenCalledWith(cameraState)
+  })
+
+  it('onExecuted applies the first model_3d_info entry to the viewport when present', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    load3d.currentLoadGeneration = 5
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const transform = {
+      position: { x: 1, y: 2, z: 3 },
+      quaternion: { x: 0, y: 0, z: 0, w: 1 },
+      scale: { x: 2, y: 2, z: 2 }
+    }
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({
+      result: ['mesh.glb', undefined, [transform]]
+    })
+    await flush()
+
+    expect(load3d.applyModelTransform).toHaveBeenCalledWith(transform)
+  })
+
+  it('onExecuted does not call applyModelTransform when model_3d_info is empty', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({
+      result: ['mesh.glb', undefined, []]
+    })
+    await flush()
+
+    expect(load3d.applyModelTransform).not.toHaveBeenCalled()
+  })
+
+  it('onExecuted defensively skips cameraState apply when result[1] is missing', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['mesh.glb'] })
+    await flush()
+
+    expect(load3d.setCameraState).not.toHaveBeenCalled()
+  })
+
+  it('onExecuted skips cameraState apply when load3d generation changes before whenLoadIdle resolves', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    load3d.currentLoadGeneration = 5
+    let resolveIdle: () => void = () => {}
+    load3d.whenLoadIdle = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveIdle = resolve
+        })
+    )
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['mesh.glb', { position: [1, 2, 3] }] })
+
+    load3d.currentLoadGeneration = 6
+    resolveIdle()
+    await flush()
+
+    expect(load3d.setCameraState).not.toHaveBeenCalled()
+  })
+
+  it('onExecuted shows an error toast when no file path is returned', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode()
+
+    await preview3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: [] })
+
+    expect(toastAddAlertMock).toHaveBeenCalledWith(
+      'toastMessages.unableToGetModelFilePath'
+    )
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+})
+
+describe('Comfy.Preview3DAdvanced.getNodeMenuItems', () => {
+  beforeEach(setupBaseMocks)
+
+  it('returns [] for non-Preview3DAdvanced nodes', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    const node = {
+      constructor: { comfyClass: 'OtherNode' }
+    } as unknown as LGraphNode
+
+    expect(preview3DAdvancedExt.getNodeMenuItems(node)).toEqual([])
+  })
+
+  it('returns [] when no load3d instance exists for the node', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    getLoad3dMock.mockReturnValue(null)
+    const node = {
+      constructor: { comfyClass: 'Preview3DAdvanced' }
+    } as unknown as LGraphNode
+
+    expect(preview3DAdvancedExt.getNodeMenuItems(node)).toEqual([])
+  })
+
+  it('returns [] for splat models', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    getLoad3dMock.mockReturnValue({ isSplatModel: () => true })
+    const node = {
+      constructor: { comfyClass: 'Preview3DAdvanced' }
+    } as unknown as LGraphNode
+
+    expect(preview3DAdvancedExt.getNodeMenuItems(node)).toEqual([])
+  })
+
+  it('returns export menu items for non-splat models', async () => {
+    const { preview3DAdvancedExt } = await loadExtensionsFresh()
+    getLoad3dMock.mockReturnValue({ isSplatModel: () => false })
+    const node = {
+      constructor: { comfyClass: 'Preview3DAdvanced' }
+    } as unknown as LGraphNode
+
+    expect(preview3DAdvancedExt.getNodeMenuItems(node)).toEqual([
+      { content: 'Export' }
+    ])
+  })
+})

src/extensions/core/load3d.ts

@@ -29,6 +29,9 @@ type Matrix = number[][]
 type Load3dPreviewOutput = NodeOutputWith<{
   result?: [string?, CameraState?, string?, Matrix?, Matrix?]
 }>
+type Preview3DAdvancedOutput = NodeOutputWith<{
+  result?: [string?, CameraState?, Model3DInfo?]
+}>
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { api } from '@/scripts/api'
 import { ComfyApp, app } from '@/scripts/app'
@@ -269,7 +272,10 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     return {
       LOAD_3D(node) {
-        if (node.constructor.comfyClass === 'Load3D') {
+        const hasModelFileWidget = node.widgets?.some(
+          (w) => w.name === 'model_file'
+        )
+        if (hasModelFileWidget) {
           const fileInput = createFileInput(SUPPORTED_EXTENSIONS_ACCEPT, false)
 
           node.properties['Resource Folder'] = ''
@@ -651,3 +657,156 @@ useExtensionService().registerExtension({
     })
   }
 })
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Preview3DAdvanced',
+
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    if (load3d.isSplatModel()) return []
+
+    return createExportMenuItems(load3d)
+  },
+
+  async nodeCreated(node: LGraphNode) {
+    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return
+
+    const [oldWidth, oldHeight] = node.size
+
+    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
+
+    await nextTick()
+
+    const onExecuted = node.onExecuted
+
+    useLoad3d(node).onLoad3dReady((load3d) => {
+      const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!lastTimeModelFile) return
+
+      const config = new Load3DConfiguration(load3d, node.properties)
+      config.configureForSaveMesh('temp', lastTimeModelFile as string, {
+        silentOnNotFound: true
+      })
+
+      const cameraConfig = node.properties['Camera Config'] as
+        | CameraConfig
+        | undefined
+      const cameraState = cameraConfig?.state
+      if (!cameraState) return
+
+      const targetGeneration = load3d.currentLoadGeneration
+      void load3d
+        .whenLoadIdle()
+        .then(() => {
+          if (load3d.currentLoadGeneration !== targetGeneration) return
+          load3d.setCameraState(cameraState)
+          load3d.forceRender()
+        })
+        .catch((error) => {
+          console.error(
+            'Failed to restore camera state for Preview3DAdvanced:',
+            error
+          )
+        })
+    })
+
+    useLoad3d(node).waitForLoad3d((load3d) => {
+      const sceneWidget = node.widgets?.find((w) => w.name === 'image')
+      if (!sceneWidget) return
+
+      const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
+      const widthWidget = node.widgets?.find((w) => w.name === 'width')
+      const heightWidget = node.widgets?.find((w) => w.name === 'height')
+      if (widthWidget && heightWidget) {
+        load3d.setTargetSize(
+          widthWidget.value as number,
+          heightWidget.value as number
+        )
+        widthWidget.callback = (value: number) => {
+          resolveLoad3d().setTargetSize(value, heightWidget.value as number)
+        }
+        heightWidget.callback = (value: number) => {
+          resolveLoad3d().setTargetSize(widthWidget.value as number, value)
+        }
+      }
+
+      sceneWidget.serializeValue = async () => {
+        const currentLoad3d = nodeToLoad3dMap.get(node)
+        if (!currentLoad3d) {
+          console.error('No load3d instance found for node')
+          return null
+        }
+
+        const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
+          | CameraConfig
+          | undefined) || {
+          cameraType: currentLoad3d.getCurrentCameraType(),
+          fov: currentLoad3d.cameraManager.perspectiveCamera.fov
+        }
+        cameraConfig.state = currentLoad3d.getCameraState()
+        node.properties['Camera Config'] = cameraConfig
+
+        const modelInfo = currentLoad3d.getModelInfo()
+        const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+
+        return {
+          image: '',
+          mask: '',
+          normal: '',
+          camera_info: cameraConfig.state || null,
+          recording: '',
+          model_3d_info
+        }
+      }
+
+      node.onExecuted = function (output: Preview3DAdvancedOutput) {
+        onExecuted?.call(this, output)
+
+        const result = output.result
+        const filePath = result?.[0]
+
+        if (!filePath) {
+          const msg = t('toastMessages.unableToGetModelFilePath')
+          console.error(msg)
+          useToastStore().addAlert(msg)
+          return
+        }
+
+        const normalizedPath = filePath.replaceAll('\\', '/')
+        node.properties['Last Time Model File'] = normalizedPath
+
+        const currentLoad3d = resolveLoad3d()
+        const config = new Load3DConfiguration(currentLoad3d, node.properties)
+        config.configureForSaveMesh('temp', normalizedPath, {
+          silentOnNotFound: true
+        })
+
+        const cameraState = result?.[1]
+        const modelTransform = result?.[2]?.[0]
+        if (cameraState || modelTransform) {
+          const targetGeneration = currentLoad3d.currentLoadGeneration
+          void currentLoad3d
+            .whenLoadIdle()
+            .then(() => {
+              if (currentLoad3d.currentLoadGeneration !== targetGeneration)
+                return
+              if (cameraState) currentLoad3d.setCameraState(cameraState)
+              if (modelTransform)
+                currentLoad3d.applyModelTransform(modelTransform)
+            })
+            .catch((error) => {
+              console.error(
+                'Failed to apply input camera_info / model_3d_info from Preview3DAdvanced:',
+                error
+              )
+            })
+        }
+      }
+    })
+  }
+})

src/extensions/core/load3d/GizmoManager.test.ts

@@ -287,6 +287,41 @@ describe('GizmoManager', () => {
     })
   })
 
+  describe('applyModelTransform', () => {
+    it('sets position, quaternion, and scale on target and notifies', () => {
+      manager.init()
+      const model = new THREE.Object3D()
+      manager.setupForModel(model)
+
+      manager.applyModelTransform({
+        position: { x: 1, y: 2, z: 3 },
+        quaternion: { x: 0.1, y: 0.2, z: 0.3, w: 0.92 },
+        scale: { x: 2, y: 2, z: 2 }
+      })
+
+      expect(model.position.x).toBeCloseTo(1)
+      expect(model.position.y).toBeCloseTo(2)
+      expect(model.position.z).toBeCloseTo(3)
+      expect(model.quaternion.x).toBeCloseTo(0.1)
+      expect(model.quaternion.y).toBeCloseTo(0.2)
+      expect(model.quaternion.z).toBeCloseTo(0.3)
+      expect(model.quaternion.w).toBeCloseTo(0.92)
+      expect(model.scale.x).toBeCloseTo(2)
+      expect(onTransformChange).toHaveBeenCalledOnce()
+    })
+
+    it('does nothing without a target', () => {
+      manager.init()
+      expect(() =>
+        manager.applyModelTransform({
+          position: { x: 0, y: 0, z: 0 },
+          quaternion: { x: 0, y: 0, z: 0, w: 1 },
+          scale: { x: 1, y: 1, z: 1 }
+        })
+      ).not.toThrow()
+    })
+  })
+
   describe('getTransform', () => {
     it('returns current target transform', () => {
       manager.init()

src/extensions/core/load3d/GizmoManager.ts

@@ -159,6 +159,27 @@ export class GizmoManager {
     }
   }
 
+  applyModelTransform(transform: Model3DTransform): void {
+    if (!this.targetObject) return
+    this.targetObject.position.set(
+      transform.position.x,
+      transform.position.y,
+      transform.position.z
+    )
+    this.targetObject.quaternion.set(
+      transform.quaternion.x,
+      transform.quaternion.y,
+      transform.quaternion.z,
+      transform.quaternion.w
+    )
+    this.targetObject.scale.set(
+      transform.scale.x,
+      transform.scale.y,
+      transform.scale.z
+    )
+    this.onTransformChange?.()
+  }
+
   getInitialTransform(): {
     position: { x: number; y: number; z: number }
     rotation: { x: number; y: number; z: number }

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -46,7 +46,7 @@ class Load3DConfiguration {
   ) {}
 
   configureForSaveMesh(
-    loadFolder: 'input' | 'output',
+    loadFolder: 'input' | 'output' | 'temp',
     filePath: string,
     options?: { silentOnNotFound?: boolean }
   ) {

src/extensions/core/load3d/Load3d.test.ts

@@ -39,6 +39,7 @@ type GizmoStub = {
   setMode: ReturnType<typeof vi.fn>
   reset: ReturnType<typeof vi.fn>
   applyTransform: ReturnType<typeof vi.fn>
+  applyModelTransform: ReturnType<typeof vi.fn>
   getTransform: ReturnType<typeof vi.fn>
   setupForModel: ReturnType<typeof vi.fn>
   updateCamera: ReturnType<typeof vi.fn>
@@ -73,6 +74,7 @@ function makeGizmoStub(): GizmoStub {
     setMode: vi.fn(),
     reset: vi.fn(),
     applyTransform: vi.fn(),
+    applyModelTransform: vi.fn(),
     getTransform: vi.fn(() => ({
       position: { x: 0, y: 0, z: 0 },
       rotation: { x: 0, y: 0, z: 0 },
@@ -203,6 +205,19 @@ describe('Load3d', () => {
       expect(ctx.gizmo.applyTransform).toHaveBeenCalledWith(pos, rot, undefined)
     })
 
+    it('applyModelTransform forwards the full position/quaternion/scale payload', () => {
+      const transform = {
+        position: { x: 1, y: 2, z: 3 },
+        quaternion: { x: 0.1, y: 0.2, z: 0.3, w: 0.4 },
+        scale: { x: 2, y: 2, z: 2 }
+      }
+
+      ctx.load3d.applyModelTransform(transform)
+
+      expect(ctx.gizmo.applyModelTransform).toHaveBeenCalledWith(transform)
+      expect(ctx.forceRender).toHaveBeenCalledOnce()
+    })
+
     it('getGizmoTransform returns the gizmoManager transform', () => {
       const transform = {
         position: { x: 5, y: 6, z: 7 },
@@ -772,8 +787,8 @@ describe('Load3d', () => {
     })
   })
 
-  describe('retainViewOnReload', () => {
-    function setupLoadInternal(initialFlag: boolean) {
+  describe('camera framing across reloads', () => {
+    function setupLoadInternal() {
       const getCameraState = vi.fn<() => CameraState>(() => ({
         position: new THREE.Vector3(1, 2, 3),
         target: new THREE.Vector3(),
@@ -802,25 +817,23 @@ describe('Load3d', () => {
           setupModelAnimations: vi.fn()
         },
         handleResize: vi.fn(),
-        retainViewOnReload: initialFlag,
         hasLoadedModel: false
       })
       return { getCameraState, setCameraState, getCurrentCameraType }
     }
 
-    it('first load uses default framing even with retain enabled', async () => {
-      const mocks = setupLoadInternal(true)
+    it('first load uses default framing', async () => {
+      const mocks = setupLoadInternal()
 
       await ctx.load3d.loadModel('a.glb')
 
-      // hasLoadedModel started false, so retain shouldn't kick in yet.
       expect(ctx.cameraManager.reset).toHaveBeenCalledOnce()
       expect(mocks.getCameraState).not.toHaveBeenCalled()
       expect(mocks.setCameraState).not.toHaveBeenCalled()
     })
 
-    it('subsequent load captures camera state, skips reset, and restores it', async () => {
-      const mocks = setupLoadInternal(true)
+    it('subsequent load preserves the user-adjusted camera framing', async () => {
+      const mocks = setupLoadInternal()
 
       await ctx.load3d.loadModel('a.glb')
       ;(ctx.cameraManager.reset as ReturnType<typeof vi.fn>).mockClear()
@@ -834,23 +847,8 @@ describe('Load3d', () => {
       expect(mocks.setCameraState).toHaveBeenCalledOnce()
     })
 
-    it('does not retain when the flag is off, even after a prior load', async () => {
-      const mocks = setupLoadInternal(false)
-
-      await ctx.load3d.loadModel('a.glb')
-      ;(ctx.cameraManager.reset as ReturnType<typeof vi.fn>).mockClear()
-      mocks.getCameraState.mockClear()
-      mocks.setCameraState.mockClear()
-
-      await ctx.load3d.loadModel('b.glb')
-
-      expect(ctx.cameraManager.reset).toHaveBeenCalledOnce()
-      expect(mocks.getCameraState).not.toHaveBeenCalled()
-      expect(mocks.setCameraState).not.toHaveBeenCalled()
-    })
-
     it('toggles to the saved camera type before restoring state when types differ', async () => {
-      const mocks = setupLoadInternal(true)
+      const mocks = setupLoadInternal()
       mocks.getCameraState.mockImplementation(() => ({
         position: new THREE.Vector3(0, 0, 5),
         target: new THREE.Vector3(),
@@ -870,7 +868,7 @@ describe('Load3d', () => {
     })
 
     it('resets hasLoadedModel on clearModel so the next load uses default framing', async () => {
-      const mocks = setupLoadInternal(true)
+      const mocks = setupLoadInternal()
       await ctx.load3d.loadModel('a.glb')
       ctx.load3d.clearModel()
       ;(ctx.cameraManager.reset as ReturnType<typeof vi.fn>).mockClear()
@@ -881,22 +879,6 @@ describe('Load3d', () => {
       expect(ctx.cameraManager.reset).toHaveBeenCalledOnce()
       expect(mocks.getCameraState).not.toHaveBeenCalled()
     })
-
-    it('setRetainViewOnReload flips the runtime behavior between loads', async () => {
-      const mocks = setupLoadInternal(false)
-
-      await ctx.load3d.loadModel('a.glb')
-      ctx.load3d.setRetainViewOnReload(true)
-      ;(ctx.cameraManager.reset as ReturnType<typeof vi.fn>).mockClear()
-      mocks.getCameraState.mockClear()
-      mocks.setCameraState.mockClear()
-
-      await ctx.load3d.loadModel('b.glb')
-
-      expect(ctx.cameraManager.reset).not.toHaveBeenCalled()
-      expect(mocks.getCameraState).toHaveBeenCalledOnce()
-      expect(mocks.setCameraState).toHaveBeenCalledOnce()
-    })
   })
 
   describe('captureScene', () => {

src/extensions/core/load3d/Load3d.ts

@@ -105,7 +105,6 @@ class Load3d {
   private disposeContextMenuGuard: (() => void) | null = null
   private resizeObserver: ResizeObserver | null = null
   private getZoomScaleCallback: (() => number) | undefined
-  private retainViewOnReload: boolean = false
   private hasLoadedModel: boolean = false
 
   constructor(
@@ -579,17 +578,14 @@ class Load3d {
     }
   }
 
-  public setRetainViewOnReload(value: boolean): void {
-    this.retainViewOnReload = value
-  }
-
   private async _loadModelInternal(
     url: string,
     originalFileName?: string,
     options?: LoadModelOptions
   ): Promise<void> {
-    // First load always uses default framing; retain only applies on reload.
-    const shouldRetainView = this.retainViewOnReload && this.hasLoadedModel
+    // First load always uses default framing; subsequent reloads preserve
+    // the user's framing.
+    const shouldRetainView = this.hasLoadedModel
     const savedCameraState = shouldRetainView
       ? this.cameraManager.getCameraState()
       : null
@@ -919,6 +915,12 @@ class Load3d {
     this.forceRender()
   }
 
+  public applyModelTransform(transform: Model3DTransform): void {
+    if (!this.getCurrentModelCapabilities().gizmoTransform) return
+    this.gizmoManager.applyModelTransform(transform)
+    this.forceRender()
+  }
+
   public getGizmoTransform(): {
     position: { x: number; y: number; z: number }
     rotation: { x: number; y: number; z: number }

src/extensions/core/load3d/LoaderManager.ts

@@ -191,7 +191,11 @@ export class LoaderManager implements LoaderManagerInterface {
       return null
     }
 
-    const loadRootFolder = params.get('type') === 'output' ? 'output' : 'input'
+    const requestedType = params.get('type')
+    const loadRootFolder =
+      requestedType === 'output' || requestedType === 'temp'
+        ? requestedType
+        : 'input'
     const subfolder = params.get('subfolder') ?? ''
     const path =
       'api/view?type=' +

src/extensions/core/load3d/interfaces.ts

@@ -80,7 +80,6 @@ export interface CameraConfig {
   cameraType: CameraType
   fov: number
   state?: CameraState
-  retainViewOnReload?: boolean
 }
 
 export interface LightConfig {

src/locales/ar/main.json

@@ -2077,7 +2077,6 @@
     "reloadingModel": "جاري إعادة تحميل النموذج...",
     "removeBackgroundImage": "إزالة صورة الخلفية",
     "resizeNodeMatchOutput": "تغيير حجم العقدة لتتناسب مع المخرج",
-    "retainViewOnReload": "تثبيت عرض الكاميرا عند إعادة تحميل النموذج",
     "scene": "المشهد",
     "showGrid": "عرض الشبكة",
     "showSkeleton": "إظهار الهيكل العظمي",

src/locales/ar/nodeDefs.json

@@ -593,6 +593,32 @@
       }
     }
   },
+  "BriaTransparentVideoBackground": {
+    "description": "إزالة الخلفية من الفيديو باستخدام Bria وإرجاع الإطارات المقطوعة بالإضافة إلى قناع ألفا. قم بتوصيلهما مع عقدة تركيب، أو مررهما إلى حفظ WEBM لكتابة فيديو شفاف.",
+    "display_name": "Bria إزالة خلفية الفيديو (شفافة)",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "seed": {
+        "name": "البذرة",
+        "tooltip": "تتحكم البذرة فيما إذا كان يجب إعادة تشغيل العقدة؛ النتائج غير حتمية بغض النظر عن البذرة."
+      },
+      "video": {
+        "name": "فيديو"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "صور",
+        "tooltip": null
+      },
+      "1": {
+        "name": "قناع",
+        "tooltip": null
+      }
+    }
+  },
   "ByteDance2FirstLastFrameNode": {
     "description": "إنشاء فيديو باستخدام Seedance 2.0 من صورة الإطار الأول وصورة الإطار الأخير (اختياري).",
     "display_name": "ByteDance Seedance 2.0 من الإطار الأول/الأخير إلى فيديو",
@@ -1212,6 +1238,29 @@
       }
     }
   },
+  "CFGOverride": {
+    "description": "تجاوز قيمة cfg إلى قيمة ثابتة خلال شريحة [بداية، نهاية] مئوية من الخطوات. مع وجود عدة تجاوزات، يتم اختيار الأقرب إلى العينة في حالة التداخل.",
+    "display_name": "تجاوز cfg",
+    "inputs": {
+      "cfg": {
+        "name": "cfg"
+      },
+      "end_percent": {
+        "name": "النسبة المئوية للنهاية"
+      },
+      "model": {
+        "name": "نموذج"
+      },
+      "start_percent": {
+        "name": "النسبة المئوية للبداية"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "CFGZeroStar": {
     "display_name": "CFGZeroStar",
     "inputs": {
@@ -2957,6 +3006,34 @@
       }
     }
   },
+  "DualModelGuider": {
+    "display_name": "موجه نموذج مزدوج CFG",
+    "inputs": {
+      "cfg": {
+        "name": "cfg"
+      },
+      "model": {
+        "name": "نموذج",
+        "tooltip": "النموذج المستخدم للتمرير الإيجابي (الشرطي)."
+      },
+      "model_negative": {
+        "name": "نموذج سلبي",
+        "tooltip": "النموذج المستخدم للتمرير السلبي (غير الشرطي). استخدم نفس النموذج لـ CFG العادي."
+      },
+      "negative": {
+        "name": "سلبي",
+        "tooltip": "تشغيل التكييف السلبي على النموذج السلبي. اتركه غير متصل للحصول على تمرير غير شرطي بدون نص (صور فقط)."
+      },
+      "positive": {
+        "name": "إيجابي"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "EasyCache": {
     "description": "تنفيذ أصلي لذاكرة التخزين المؤقت السهلة.",
     "display_name": "ذاكرة التخزين المؤقت السهلة",
@@ -5679,6 +5756,31 @@
       }
     }
   },
+  "Ideogram4Scheduler": {
+    "display_name": "مجدول Ideogram 4",
+    "inputs": {
+      "height": {
+        "name": "الارتفاع"
+      },
+      "mu": {
+        "name": "mu"
+      },
+      "std": {
+        "name": "std"
+      },
+      "steps": {
+        "name": "خطوات"
+      },
+      "width": {
+        "name": "العرض"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "IdeogramV1": {
     "description": "ينشئ صورًا تزامنيًا باستخدام نموذج Ideogram V1.\n\nروابط الصور متاحة لفترة محدودة؛ إذا أردت الاحتفاظ بالصورة، يجب تنزيلها.",
     "display_name": "Ideogram V1",
@@ -5823,6 +5925,34 @@
       }
     }
   },
+  "IdeogramV4": {
+    "description": "ينتج صورًا باستخدام نموذج Ideogram 4.0 من خلال موجه نصي.",
+    "display_name": "Ideogram V4",
+    "inputs": {
+      "control_after_generate": {
+        "name": "التحكم بعد التوليد"
+      },
+      "prompt": {
+        "name": "موجه",
+        "tooltip": "موجه نصي لتوليد الصورة."
+      },
+      "rendering_speed": {
+        "name": "سرعة العرض",
+        "tooltip": "يتحكم في التوازن بين سرعة التوليد والجودة."
+      },
+      "resolution": {
+        "name": "الدقة"
+      },
+      "seed": {
+        "name": "البذرة"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "ImageAddNoise": {
     "display_name": "ImageAddNoise",
     "inputs": {
@@ -16564,7 +16694,8 @@
         "name": "معدل الإطارات في الثانية"
       },
       "images": {
-        "name": "الصور"
+        "name": "الصور",
+        "tooltip": "يتم حفظ صور RGBA مع قناة ألفا الخاصة بها كشفافية (ترميز vp9 فقط)."
       }
     }
   },

src/locales/en/main.json

@@ -350,6 +350,11 @@
     "nodeSlotsError": "Node Slots Error",
     "nodeWidgetsError": "Node Widgets Error",
     "frameNodes": "Frame Nodes",
+    "arrange": "Arrange",
+    "arrangeVertically": "Arrange vertically",
+    "arrangeHorizontally": "Arrange horizontally",
+    "arrangeAsGrid": "Arrange as grid",
+    "arrangeSpacing": "Arrangement spacing",
     "listening": "Listening...",
     "ready": "Ready",
     "play": "Play",
@@ -1963,7 +1968,6 @@
   },
   "load3d": {
     "switchCamera": "Switch Camera",
-    "retainViewOnReload": "Lock camera view across model reloads",
     "showGrid": "Show Grid",
     "backgroundColor": "Background Color",
     "lightIntensity": "Light Intensity",
@@ -3533,7 +3537,6 @@
     "skipForNow": "Skip for Now",
     "installMissingNodes": "Install Missing Nodes",
     "replaceWarning": "This will permanently modify the workflow. Save a copy first if unsure.",
-    "swapNodesGuide": "The following nodes can be automatically replaced with compatible alternatives.",
     "willBeReplacedBy": "This node will be replaced by:",
     "replaceNode": "Replace Node",
     "replaceAll": "Replace All",
@@ -3615,8 +3618,6 @@
     "missingNodePacks": {
       "title": "Missing Node Packs",
       "unsupportedTitle": "Unsupported Node Packs",
-      "cloudMessage": "This workflow requires custom nodes not yet available on Comfy Cloud.",
-      "ossMessage": "This workflow uses custom nodes you haven't installed yet.",
       "ossManagerDisabledHint": "To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.",
       "installAll": "Install All",
       "installNodePack": "Install node pack",
@@ -3681,14 +3682,11 @@
   },
   "errorOverlay": {
     "errorCount": "{count} ERROR | {count} ERRORS",
-    "seeErrors": "See Errors",
-    "showMissingNodes": "Show missing nodes",
-    "showMissingModels": "Show missing models",
-    "showSwapNodes": "Show swap nodes",
-    "showMissingMedia": "Show missing inputs",
+    "multipleErrorCount": "{count} error found | {count} errors found",
+    "multipleErrorsMessage": "Resolve them before running the workflow.",
+    "viewDetails": "View details",
     "missingNodes": "Some nodes are missing and need to be installed",
     "missingModels": "{count} required model is missing | {count} required models are missing",
-    "swapNodes": "Some nodes can be replaced with alternatives",
     "missingMedia": "Some nodes are missing required inputs"
   },
   "errorCatalog": {
@@ -3696,6 +3694,46 @@
       "nodeName": "This node",
       "inputName": "unknown input"
     },
+    "missingErrors": {
+      "missing_node": {
+        "displayMessageCloud": "Required custom nodes aren't supported on Cloud. Replace them with supported nodes.",
+        "displayMessageOss": "Install missing packs to use this workflow.",
+        "toastTitleOneCloud": "{nodeType} isn't available on Cloud",
+        "toastTitleOneOss": "Missing node: {nodeType}",
+        "toastTitleManyCloud": "Nodes aren't available on Cloud",
+        "toastTitleManyOss": "Missing nodes",
+        "toastMessageOneCloud": "This node isn't supported on Cloud.",
+        "toastMessageOneOss": "This workflow uses a custom node that isn't installed. Install it from the registry or replace the node.",
+        "toastMessageManyCloud": "This workflow uses nodes that aren't supported on Cloud.",
+        "toastMessageManyOss": "{count} nodes require missing node packs."
+      },
+      "swap_nodes": {
+        "displayMessage": "Some nodes can be replaced with alternatives",
+        "toastTitleOne": "{nodeType} can be replaced",
+        "toastTitleMany": "Nodes can be replaced",
+        "toastMessageOne": "Replace it with {replacementNodeType} from the error panel.",
+        "toastMessageMany": "{count} node types can be replaced with compatible alternatives."
+      },
+      "missing_model": {
+        "displayMessageCloud": "Import a model, or open the node to replace it.",
+        "displayMessageOss": "Download a model, or open the node to replace it.",
+        "toastTitleOneCloud": "{modelName} isn't available on Cloud",
+        "toastTitleOneOss": "{modelName} is missing",
+        "toastTitleMany": "Missing models",
+        "toastTitleManyCloud": "Models aren't available on Cloud",
+        "toastMessageOneCloud": "This model isn't supported. Choose a different one.",
+        "toastMessageOneOss": "{nodeName} is missing a required model file.",
+        "toastMessageManyCloud": "Some models aren't supported. Choose different ones.",
+        "toastMessageManyOss": "{count} model files are missing."
+      },
+      "missing_media": {
+        "displayMessage": "A required media input has no file selected.",
+        "toastTitleOne": "Media input missing",
+        "toastTitleMany": "Missing media inputs",
+        "toastMessageWithNode": "{nodeName} is missing a required media file.",
+        "toastMessageMany": "Please select the missing media inputs before running this workflow."
+      }
+    },
     "validationErrors": {
       "required_input_missing": {
         "title": "Missing connection",