test: add explicit coverage for null nodeDef in showNodeHelp

Match the right side panel's exact visibility rule (single, non-subgraph
node) so the context menu entry never appears when the panel cannot
render the Info tab.

.claude/skills/writing-playwright-tests/SKILL.md

@@ -114,7 +114,7 @@ await expect(async () => {
 ## CI Debugging
 
 1. Download artifacts from failed CI run
-2. Extract and view trace: `npx playwright show-trace trace.zip`
+2. Extract and view trace: `pnpm dlx playwright show-trace trace.zip`
 3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
 4. Reproduce CI: `CI=true pnpm test:browser`
 5. Local runs: `pnpm test:browser:local`

.github/workflows/ci-vercel-website-preview.yaml

@@ -4,6 +4,9 @@ name: 'CI: Vercel Website Preview'
 on:
   pull_request:
     types: [opened, synchronize, reopened]
+    branches-ignore:
+      - 'core/**'
+      - 'cloud/**'
     paths:
       - 'apps/website/**'
       - 'packages/design-system/**'

apps/website/e2e/demos.spec.ts

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Demo pages @smoke', () => {
+  test('demo detail page renders hero and embed', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      'Create a Video from an Image'
+    )
+    const iframe = page.locator('iframe[title*="Interactive demo"]')
+    await expect(iframe).toBeAttached()
+  })
+
+  test('demo detail page has transcript section', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(
+      page.getByRole('button', { name: /demo transcript/i })
+    ).toBeVisible()
+  })
+
+  test('demo detail page has next demo navigation', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(page.getByText(/what's next/i)).toBeVisible()
+  })
+
+  test('demo library page renders', async ({ page }) => {
+    await page.goto('/demos')
+    await expect(page.getByText('Coming Soon')).toBeVisible()
+  })
+
+  test('non-existent demo returns 404', async ({ page }) => {
+    const response = await page.goto('/demos/nonexistent')
+    expect(response?.status()).toBe(404)
+  })
+
+  test('zh-CN demo page renders localized content', async ({ page }) => {
+    await page.goto('/zh-CN/demos/image-to-video')
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      '从图片创建视频'
+    )
+    const nextDemoLink = page.locator('a[href*="/zh-CN/demos/"]').first()
+    await expect(nextDemoLink).toBeAttached()
+  })
+})

apps/website/e2e/payment.spec.ts

@@ -61,7 +61,7 @@ test.describe('Payment failed page @smoke', () => {
   test('shows failure heading and subtitle', async ({ page }) => {
     await expect(
       page.getByRole('heading', {
-        name: /Payment was not completed/i,
+        name: /Unable to complete payment/i,
         level: 1
       })
     ).toBeVisible()
@@ -102,7 +102,7 @@ test.describe('Payment pages zh-CN @smoke', () => {
     await expect(page).toHaveTitle('支付失败 — Comfy')
     await expectNoIndex(page)
     await expect(
-      page.getByRole('heading', { name: '支付未完成', level: 1 })
+      page.getByRole('heading', { name: '无法完成支付', level: 1 })
     ).toBeVisible()
     await expect(page.getByRole('link', { name: '联系支持' })).toHaveAttribute(
       'href',

apps/website/e2e/visual-responsive.spec.ts

@@ -126,6 +126,7 @@ test.describe('Overflow guards', { tag: '@visual' }, () => {
   const pages = [
     '/',
     '/cloud',
+    '/cloud/enterprise',
     '/cloud/pricing',
     '/contact',
     '/download',

apps/website/package.json

@@ -27,6 +27,7 @@
     "gsap": "catalog:",
     "lenis": "catalog:",
     "posthog-js": "catalog:",
+    "three": "catalog:",
     "vue": "catalog:",
     "zod": "catalog:"
   },

apps/website/public/robots.txt

@@ -31,4 +31,28 @@ Disallow: /_website/
 Disallow: /_vercel/
 Disallow: /payment/
 
+User-agent: GPTBot
+Allow: /
+
+User-agent: OAI-SearchBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: ClaudeBot
+Allow: /
+
+User-agent: Claude-User
+Allow: /
+
+User-agent: Claude-SearchBot
+Allow: /
+
+User-agent: PerplexityBot
+Allow: /
+
+User-agent: Google-Extended
+Allow: /
+
 Sitemap: https://comfy.org/sitemap-index.xml

apps/website/src/components/careers/TeamPhotosSection.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-
 const photos = [
   {
     src: 'https://media.comfy.org/website/careers/team0.webp',
@@ -17,45 +15,34 @@ const photos = [
   {
     src: 'https://media.comfy.org/website/careers/team3.webp',
     alt: 'Team on a boat'
+  },
+  {
+    src: 'https://media.comfy.org/website/careers/team4.webp',
+    alt: 'Teammates posing at a restaurant'
+  },
+  {
+    src: 'https://media.comfy.org/website/careers/team5.webp',
+    alt: 'Teammates at a social gathering'
+  },
+  {
+    src: 'https://media.comfy.org/website/careers/team6.webp',
+    alt: 'Team sailing at golden hour'
+  },
+  {
+    src: 'https://media.comfy.org/website/careers/team7.webp',
+    alt: 'Team on a sailboat at sunset'
   }
 ]
-
-const loopedPhotos = [...photos, ...photos, ...photos]
-
-const scrollRef = ref<HTMLElement>()
-
-function onScroll() {
-  const el = scrollRef.value
-  if (!el) return
-
-  const third = el.scrollWidth / 3
-  const maxScroll = el.scrollWidth - el.clientWidth
-
-  if (el.scrollLeft >= maxScroll - 1) {
-    el.scrollLeft -= third
-  } else if (el.scrollLeft <= 1) {
-    el.scrollLeft += third
-  }
-}
-
-onMounted(() => {
-  const el = scrollRef.value
-  if (el) {
-    el.scrollLeft = el.scrollWidth / 3
-  }
-})
 </script>
 
 <template>
   <section class="py-12 md:py-24">
     <div
-      ref="scrollRef"
       class="flex gap-4 overflow-x-auto px-6 md:gap-6 md:px-20"
       style="scrollbar-width: none"
-      @scroll="onScroll"
     >
       <div
-        v-for="(photo, i) in loopedPhotos"
+        v-for="(photo, i) in photos"
         :key="i"
         class="aspect-3/4 h-64 shrink-0 md:h-96"
       >

apps/website/src/components/demos/ArcadeEmbed.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { ref } from 'vue'
+
+import { t } from '../../i18n/translations'
+
+const {
+  arcadeId,
+  title,
+  locale = 'en'
+} = defineProps<{
+  arcadeId: string
+  title: string
+  locale?: Locale
+}>()
+
+const loaded = ref(false)
+</script>
+
+<template>
+  <section
+    class="px-4 py-8 lg:px-20 lg:py-16"
+    :aria-label="t('demos.embed.label', locale)"
+  >
+    <div
+      class="relative mx-auto aspect-video max-w-6xl overflow-hidden rounded-4xl border border-white/10"
+    >
+      <div
+        v-if="!loaded"
+        aria-hidden="true"
+        class="absolute inset-0 flex flex-col items-center justify-center bg-black/50"
+      >
+        <div
+          class="border-primary-comfy-canvas/60 mb-4 size-10 animate-pulse rounded-full border-2"
+        />
+        <p class="text-primary-warm-gray text-sm">
+          {{ t('demos.loading', locale) }}
+        </p>
+      </div>
+
+      <iframe
+        class="size-full"
+        :src="`https://demo.arcade.software/${arcadeId}?embed&show_title=0`"
+        :title="`${t('demos.embed.label', locale)}: ${title}`"
+        loading="lazy"
+        allow="clipboard-write"
+        referrerpolicy="strict-origin-when-cross-origin"
+        @load="loaded = true"
+      />
+    </div>
+
+    <noscript>
+      <p class="text-primary-warm-gray mt-4 text-sm">
+        {{ t('demos.noscript', locale) }}
+        <a
+          class="text-primary-comfy-yellow ml-2 underline"
+          :href="`https://demo.arcade.software/${arcadeId}`"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {{ t('demos.noscript.link', locale) }}
+        </a>
+      </p>
+    </noscript>
+  </section>
+</template>

apps/website/src/components/demos/DemoHeroSection.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const {
+  label,
+  title,
+  description,
+  difficulty,
+  estimatedTime,
+  locale = 'en'
+} = defineProps<{
+  label: string
+  title: string
+  description: string
+  difficulty: 'beginner' | 'intermediate' | 'advanced'
+  estimatedTime: string
+  locale?: Locale
+}>()
+
+const difficultyKey = `demos.difficulty.${difficulty}` as TranslationKey
+</script>
+
+<template>
+  <section class="pt-16 lg:px-20 lg:pt-40 lg:pb-8">
+    <div class="mx-auto flex max-w-4xl flex-col items-center text-center">
+      <span
+        class="text-primary-comfy-yellow text-xs font-semibold tracking-widest uppercase"
+      >
+        {{ label }}
+      </span>
+
+      <h1
+        class="text-primary-comfy-canvas mt-4 text-3xl/tight font-light lg:text-5xl/tight"
+      >
+        {{ title }}
+      </h1>
+
+      <p
+        class="text-primary-warm-gray mt-6 max-w-xl text-sm/relaxed lg:text-base/relaxed"
+      >
+        {{ description }}
+      </p>
+
+      <div class="mt-6 flex flex-wrap justify-center gap-3">
+        <span
+          class="bg-transparency-white-t4 text-primary-comfy-canvas rounded-full px-3 py-1 text-xs font-semibold tracking-wide uppercase"
+        >
+          {{ t(difficultyKey, locale) }}
+        </span>
+        <span
+          class="bg-transparency-white-t4 text-primary-comfy-canvas rounded-full px-3 py-1 text-xs font-semibold"
+        >
+          {{ t(estimatedTime as TranslationKey, locale) }}
+        </span>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/demos/DemoNavSection.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const {
+  nextTitle,
+  nextSlug,
+  nextThumbnail,
+  locale = 'en'
+} = defineProps<{
+  nextTitle: string
+  nextSlug: string
+  nextThumbnail: string
+  locale?: Locale
+}>()
+
+const localePrefix = locale === 'en' ? '' : `/${locale}`
+const nextHref = `${localePrefix}/demos/${nextSlug}`
+</script>
+
+<template>
+  <section class="px-4 py-16 lg:px-20 lg:py-24">
+    <h2 class="text-primary-comfy-canvas mb-10 text-2xl font-light lg:text-3xl">
+      {{ t('demos.nav.nextDemo' as TranslationKey, locale) }}
+    </h2>
+
+    <div
+      class="bg-transparency-white-t4 rounded-5xl mx-auto flex flex-col gap-8 p-2 lg:max-w-237.5 lg:flex-row lg:items-center"
+    >
+      <a :href="nextHref" class="shrink-0 lg:w-1/2">
+        <img
+          :src="nextThumbnail"
+          :alt="nextTitle"
+          class="w-full rounded-4xl object-cover"
+        />
+      </a>
+
+      <div class="flex flex-col gap-6">
+        <h3 class="text-primary-comfy-canvas text-xl font-light lg:text-2xl">
+          {{ nextTitle }}
+        </h3>
+
+        <a :href="nextHref" class="flex items-center gap-3">
+          <span
+            class="bg-primary-comfy-yellow text-primary-comfy-ink flex size-10 items-center justify-center rounded-full"
+          >
+            <span class="text-lg font-bold">›</span>
+          </span>
+          <span
+            class="text-primary-comfy-canvas ppformula-text-center text-sm font-semibold tracking-wider uppercase"
+          >
+            {{ t('demos.nav.viewDemo' as TranslationKey, locale) }}
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/demos/DemoTranscript.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { cn } from '@comfyorg/tailwind-utils'
+import { ref } from 'vue'
+
+import { t } from '../../i18n/translations'
+
+const { transcript, locale = 'en' } = defineProps<{
+  transcript: string
+  locale?: Locale
+}>()
+
+const expanded = ref(false)
+</script>
+
+<template>
+  <section
+    class="px-4 py-8 lg:px-20 lg:py-12"
+    :aria-label="t('demos.transcript.label', locale)"
+  >
+    <div class="mx-auto max-w-4xl">
+      <button
+        type="button"
+        class="text-primary-comfy-canvas text-left"
+        :aria-expanded="expanded"
+        @click="expanded = !expanded"
+      >
+        <span class="text-sm font-semibold tracking-wide uppercase">
+          {{ t('demos.transcript.label', locale) }}
+        </span>
+        <span class="text-primary-warm-gray ml-2 text-xs">
+          {{ t('demos.transcript.note', locale) }}
+        </span>
+      </button>
+
+      <div
+        role="region"
+        :aria-label="t('demos.transcript.label', locale)"
+        :class="
+          cn(
+            expanded ? 'mt-4' : 'sr-only',
+            'text-primary-warm-gray text-sm/relaxed'
+          )
+        "
+        v-html="transcript"
+      />
+    </div>
+  </section>
+</template>

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

@@ -1,24 +1,31 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import type { Locale } from '../../i18n/translations'
 import { externalLinks } from '../../config/routes'
+import { useHeroLogo } from '../../composables/useHeroLogo'
 import { t } from '../../i18n/translations'
 import BrandButton from '../common/BrandButton.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const logoContainer = ref<HTMLElement>()
+const { loaded: logoLoaded } = useHeroLogo(logoContainer)
 </script>
 
 <template>
   <section
     class="relative flex min-h-auto flex-col lg:flex-row lg:items-center"
   >
-    <div class="relative flex-1">
-      <video
-        src="https://media.comfy.org/website/homepage/hero-logo-seq.webm"
-        autoplay
-        loop
-        muted
-        playsinline
-        class="w-full"
+    <div
+      ref="logoContainer"
+      class="relative flex aspect-square w-full flex-1 items-center justify-center"
+    >
+      <img
+        v-show="!logoLoaded"
+        src="https://media.comfy.org/website/homepage/hero-logo-seq/Logo00.webp"
+        alt="Comfy logo"
+        class="w-3/5"
       />
     </div>
 

apps/website/src/components/product/enterprise/HeroSection.vue

@@ -35,20 +35,20 @@ onMounted(() => {
 
 <template>
   <section
-    class="max-w-9xl relative mx-auto flex flex-col items-center overflow-hidden lg:flex-row-reverse lg:items-center lg:overflow-x-visible lg:overflow-y-clip lg:pb-[min(8vw,10rem)]"
+    class="max-w-9xl relative mx-auto flex flex-col items-center overflow-hidden pt-16 lg:flex-row-reverse lg:items-center lg:overflow-x-visible lg:overflow-y-clip lg:pt-[min(8vw,10rem)] lg:pb-[min(8vw,10rem)]"
   >
     <!-- Illustration (overlaps text slightly; stacks above on mobile, right on lg) -->
     <div
-      class="aspect-square w-4/5 max-w-md scale-150 self-center md:max-w-2xl lg:pointer-events-none lg:z-1 lg:-ml-12 lg:-translate-x-[10%] lg:translate-y-[40px] lg:self-center xl:size-[clamp(32rem,max(40vh,32vw),36rem)] xl:min-h-[min(32vw,24rem)] xl:min-w-[min(24vw,20rem)]"
+      class="aspect-square w-4/5 max-w-md scale-150 self-center md:max-w-2xl lg:pointer-events-none lg:z-1 lg:-ml-12 lg:-translate-x-[10%] lg:self-center xl:size-[clamp(32rem,max(40vh,32vw),36rem)] xl:min-h-[min(32vw,24rem)] xl:min-w-[min(24vw,20rem)]"
     >
       <svg
         ref="svgRef"
-        class="block size-full"
+        class="block size-full overflow-visible"
         viewBox="0 0 1600 1046"
         fill="none"
         aria-hidden="true"
       >
-        <g clip-path="url(#enterpriseHeroClip)">
+        <g>
           <rect width="1600" height="1046" fill="#211927" />
           <rect
             width="800"
@@ -84,7 +84,7 @@ onMounted(() => {
           />
 
           <!-- Exploding block cluster -->
-          <g class="block-cluster">
+          <g class="block-cluster" clip-path="url(#enterpriseHeroBlockClip)">
             <path
               class="block-piece"
               d="M1018.44 635.715L1018.45 581.73C1018.46 574.554 1013.42 565.829 1007.21 562.242L960.479 535.262C956.544 532.99 949.469 533.096 945.535 535.368L898.79 562.373C892.576 565.963 887.537 574.691 887.535 581.867L887.52 635.852C887.519 640.395 890.967 646.574 894.902 648.845L941.632 675.825C947.845 679.412 957.918 679.409 964.132 675.819L1010.88 648.815C1014.82 646.538 1018.44 640.267 1018.44 635.715Z"
@@ -353,7 +353,7 @@ onMounted(() => {
             <stop stop-color="#211927" stop-opacity="0" />
             <stop offset="1" stop-color="#211927" />
           </linearGradient>
-          <clipPath id="enterpriseHeroClip">
+          <clipPath id="enterpriseHeroBlockClip">
             <rect width="1600" height="1046" fill="white" />
           </clipPath>
         </defs>

apps/website/src/components/product/shared/CloudBannerSection.vue

@@ -8,7 +8,9 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="bg-transparency-white-t4 p-4 text-center lg:px-20 lg:py-8">
+  <section
+    class="bg-transparency-white-t4 relative z-20 p-4 text-center lg:px-20 lg:py-8"
+  >
     <p
       class="text-primary-comfy-canvas relative z-10 text-lg font-semibold lg:text-sm lg:font-normal"
     >

apps/website/src/composables/useHeroLogo.ts

@@ -0,0 +1,328 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import * as THREE from 'three'
+import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'
+
+import { prefersReducedMotion } from './useReducedMotion'
+
+const IMAGE_COUNT = 16
+const BASE_URL = 'https://media.comfy.org/website/homepage/hero-logo-seq'
+
+const SVG_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 404"><path fill="#000000" d="M296.597 302.576C297.299 300.205 297.682 297.705 297.682 295.078C297.682 280.529 285.938 268.736 271.45 268.736H153.883C147.564 268.8 142.395 263.673 142.395 257.328C142.395 256.174 142.586 255.084 142.841 254.059L174.499 143.309C175.839 138.438 180.307 134.849 185.541 134.849L303.554 134.72C328.446 134.72 349.444 117.864 355.763 94.8555L373.506 33.1353C374.081 30.9562 374.4 28.5848 374.4 26.2134C374.4 11.7288 362.72 0 348.295 0H205.518C180.754 0 159.819 16.7279 153.373 39.4804L141.373 81.5886C139.969 86.3954 135.565 89.9205 130.332 89.9205H96.0573C71.4845 89.9205 50.7412 106.328 44.1034 128.824L0.957382 280.144C0.319127 282.387 0 284.823 0 287.258C0 301.807 11.7439 313.6 26.2323 313.6H59.9321C66.2508 313.6 71.4207 318.727 71.4207 325.137C71.4207 326.226 71.293 327.316 70.9739 328.341L59.0385 370.065C58.4641 372.308 58.0811 374.615 58.0811 376.987C58.0811 391.471 69.7612 403.2 84.1857 403.2L227.027 403.072C251.855 403.072 272.79 386.28 279.172 363.399L296.533 302.64L296.597 302.576Z"/></svg>`
+
+interface HeroLogoConfig {
+  speed: number
+  tiltX: number
+  tiltZ: number
+  zoom: number
+  fov: number
+  logoColor: string
+  extrudeDepth: number
+  cursorTiltStrength: number
+  bgScale: number
+  slideDuration: number
+}
+
+const DEFAULTS: HeroLogoConfig = {
+  speed: 1,
+  tiltX: -0.1,
+  tiltZ: -0.1,
+  zoom: 7,
+  fov: 50,
+  logoColor: '#F2FF59',
+  extrudeDepth: 200,
+  cursorTiltStrength: 0.5,
+  bgScale: 0.8,
+  slideDuration: 0.4
+}
+
+function buildImageUrls(): string[] {
+  return Array.from({ length: IMAGE_COUNT }, (_, i) => {
+    const index = String(i).padStart(5, '0')
+    return `${BASE_URL}/image_sequence_${index}.webp`
+  })
+}
+
+function parseShapes(): THREE.Shape[] {
+  const loader = new SVGLoader()
+  const svgData = loader.parse(SVG_MARKUP)
+  const shapes: THREE.Shape[] = []
+  svgData.paths.forEach((path) => {
+    shapes.push(...SVGLoader.createShapes(path))
+  })
+  return shapes
+}
+
+function loadTextures(urls: string[]): Promise<THREE.Texture[]> {
+  return Promise.all(
+    urls.map(
+      (url) =>
+        new Promise<THREE.Texture | null>((resolve) => {
+          const img = new Image()
+          img.crossOrigin = 'anonymous'
+          img.onload = () => {
+            const tex = new THREE.Texture(img)
+            tex.needsUpdate = true
+            tex.colorSpace = THREE.SRGBColorSpace
+            resolve(tex)
+          }
+          img.onerror = () => resolve(null)
+          img.src = url
+        })
+    )
+  ).then((results) => results.filter((t): t is THREE.Texture => t !== null))
+}
+
+export function useHeroLogo(
+  containerRef: Ref<HTMLElement | undefined>,
+  config: Partial<HeroLogoConfig> = {}
+) {
+  const cfg = { ...DEFAULTS, ...config }
+  const loaded = ref(false)
+  let cleanup: (() => void) | undefined
+
+  onMounted(async () => {
+    try {
+      const container = containerRef.value
+      if (!container || prefersReducedMotion()) return
+
+      const { width, height } = container.getBoundingClientRect()
+
+      const renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        stencil: true,
+        alpha: true
+      })
+      renderer.setSize(width, height)
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+      renderer.outputColorSpace = THREE.SRGBColorSpace
+      renderer.domElement.style.position = 'absolute'
+      renderer.domElement.style.inset = '0'
+      renderer.domElement.style.width = '100%'
+      renderer.domElement.style.height = '100%'
+      renderer.domElement.style.opacity = '0'
+      renderer.domElement.setAttribute('aria-hidden', 'true')
+      container.appendChild(renderer.domElement)
+
+      let disposed = false
+      const teardowns: Array<() => void> = []
+      cleanup = () => {
+        disposed = true
+        teardowns.forEach((fn) => fn())
+      }
+      teardowns.push(() => {
+        renderer.dispose()
+        renderer.domElement.remove()
+      })
+
+      const scene = new THREE.Scene()
+      const camera = new THREE.PerspectiveCamera(
+        cfg.fov,
+        width / height,
+        0.1,
+        1000
+      )
+      camera.position.z = cfg.zoom
+
+      // SVG shape
+      const shapes = parseShapes()
+      const tempGeo = new THREE.ShapeGeometry(shapes)
+      tempGeo.computeBoundingBox()
+      const bb = tempGeo.boundingBox!
+      const cx = (bb.max.x + bb.min.x) / 2
+      const cy = (bb.max.y + bb.min.y) / 2
+      const scaleFactor = 3 / (bb.max.y - bb.min.y)
+      tempGeo.dispose()
+
+      // Image sequence textures — load first frame eagerly, rest lazily
+      const urls = buildImageUrls()
+      const textures = await loadTextures(urls.slice(0, 1))
+      if (disposed) return
+
+      renderer.domElement.style.opacity = '1'
+      loaded.value = true
+
+      loadTextures(urls.slice(1)).then((rest) => {
+        if (!disposed) textures.push(...rest)
+      })
+
+      // Background plane (stencil read)
+      const bgPlaneGeo = new THREE.PlaneGeometry(14, 14)
+      const bgPlaneMat = new THREE.MeshBasicMaterial({
+        transparent: true,
+        opacity: 1,
+        map: textures[0] ?? null,
+        depthTest: false,
+        depthWrite: false,
+        stencilWrite: true,
+        stencilFunc: THREE.EqualStencilFunc,
+        stencilRef: 1,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        stencilZPass: THREE.KeepStencilOp
+      })
+      const bgPlane = new THREE.Mesh(bgPlaneGeo, bgPlaneMat)
+      bgPlane.renderOrder = 1
+      bgPlane.scale.set(cfg.bgScale, cfg.bgScale, 1)
+      scene.add(bgPlane)
+
+      // Logo group
+      const group = new THREE.Group()
+      scene.add(group)
+
+      const s = scaleFactor
+      const depth = cfg.extrudeDepth
+
+      // Front face
+      const shapeGeo = new THREE.ShapeGeometry(shapes)
+      shapeGeo.translate(-cx, -cy, 0)
+      shapeGeo.scale(s, -s, s)
+      const shapeMat = new THREE.MeshBasicMaterial({
+        color: cfg.logoColor,
+        side: THREE.DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true
+      })
+      const logoMesh = new THREE.Mesh(shapeGeo, shapeMat)
+      logoMesh.renderOrder = 2
+      group.add(logoMesh)
+
+      // Extrusion stencil mask
+      const extrudeGeo = new THREE.ExtrudeGeometry(shapes, {
+        depth,
+        bevelEnabled: false
+      })
+      extrudeGeo.translate(-cx, -cy, -depth)
+      extrudeGeo.scale(s, -s, s)
+      const extrudeMat = new THREE.MeshBasicMaterial({
+        colorWrite: false,
+        depthWrite: true,
+        depthTest: true,
+        stencilWrite: true,
+        stencilRef: 1,
+        stencilFunc: THREE.AlwaysStencilFunc,
+        stencilZPass: THREE.ReplaceStencilOp,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        side: THREE.DoubleSide
+      })
+      const extrudeMesh = new THREE.Mesh(extrudeGeo, extrudeMat)
+      extrudeMesh.renderOrder = 0
+      group.add(extrudeMesh)
+
+      // Interaction
+      let isDragging = false
+      let previousX = 0
+      let dragVelocity = 0
+      let currentTiltX = 0
+      let currentTiltY = 0
+      let pointerX = 0
+      let pointerY = 0
+      let rotationT = 0
+      let currentSlide = 0
+      let slideTimer = 0
+      let animationId = 0
+
+      function onMouseMove(e: MouseEvent) {
+        pointerX = (e.clientX / window.innerWidth) * 2 - 1
+        pointerY = (e.clientY / window.innerHeight) * 2 - 1
+      }
+
+      function onPointerDown(e: PointerEvent) {
+        isDragging = true
+        dragVelocity = 0
+        previousX = e.clientX
+      }
+
+      function onPointerMove(e: PointerEvent) {
+        if (!isDragging) return
+        dragVelocity = (e.clientX - previousX) * 0.005
+        rotationT += dragVelocity
+        previousX = e.clientX
+      }
+
+      function onPointerUp() {
+        isDragging = false
+      }
+
+      function onResize() {
+        const rect = container!.getBoundingClientRect()
+        camera.aspect = rect.width / rect.height
+        camera.updateProjectionMatrix()
+        renderer.setSize(rect.width, rect.height)
+      }
+
+      window.addEventListener('mousemove', onMouseMove)
+      renderer.domElement.addEventListener('pointerdown', onPointerDown)
+      window.addEventListener('pointermove', onPointerMove)
+      window.addEventListener('pointerup', onPointerUp)
+      window.addEventListener('resize', onResize)
+
+      const clock = new THREE.Clock()
+
+      function animate() {
+        if (disposed) return
+        animationId = requestAnimationFrame(animate)
+        const dt = clock.getDelta()
+
+        if (!isDragging && Math.abs(dragVelocity) > 0.0001) {
+          dragVelocity *= 0.95
+          rotationT += dragVelocity
+        } else if (!isDragging) {
+          dragVelocity = 0
+        }
+
+        rotationT += cfg.speed * dt
+
+        currentTiltX += (pointerY - currentTiltX) * 0.08
+        currentTiltY += (pointerX - currentTiltY) * 0.08
+
+        group.rotation.y = rotationT % (Math.PI * 2)
+        group.rotation.x = cfg.tiltX - currentTiltX * cfg.cursorTiltStrength
+        group.rotation.z = cfg.tiltZ
+
+        if (textures.length > 1) {
+          slideTimer += dt
+          if (slideTimer >= cfg.slideDuration) {
+            slideTimer = 0
+            currentSlide = (currentSlide + 1) % textures.length
+            bgPlaneMat.map = textures[currentSlide]
+            bgPlaneMat.needsUpdate = true
+          }
+        }
+
+        renderer.render(scene, camera)
+      }
+
+      animate()
+
+      teardowns.push(
+        () => cancelAnimationFrame(animationId),
+        () => window.removeEventListener('mousemove', onMouseMove),
+        () =>
+          renderer.domElement.removeEventListener('pointerdown', onPointerDown),
+        () => window.removeEventListener('pointermove', onPointerMove),
+        () => window.removeEventListener('pointerup', onPointerUp),
+        () => window.removeEventListener('resize', onResize),
+        () => bgPlaneGeo.dispose(),
+        () => bgPlaneMat.dispose(),
+        () => shapeGeo.dispose(),
+        () => shapeMat.dispose(),
+        () => extrudeGeo.dispose(),
+        () => extrudeMat.dispose(),
+        () => textures.forEach((tex) => tex.dispose())
+      )
+    } catch (err) {
+      console.error('[useHeroLogo] initialization failed:', err)
+      cleanup?.()
+    }
+  })
+
+  onUnmounted(() => {
+    cleanup?.()
+  })
+
+  return { loaded }
+}

apps/website/src/config/demos.ts

@@ -0,0 +1,68 @@
+import type { TranslationKey } from '../i18n/translations'
+
+interface Demo {
+  readonly slug: string
+  readonly arcadeId: string
+  readonly category: TranslationKey
+  readonly title: TranslationKey
+  readonly description: TranslationKey
+  readonly ogImage: string
+  readonly thumbnail: string
+  readonly estimatedTime: TranslationKey
+  readonly durationIso: string
+  readonly difficulty: 'beginner' | 'intermediate' | 'advanced'
+  readonly tags: readonly string[]
+  readonly transcript?: TranslationKey
+  readonly publishedDate: string
+  readonly modifiedDate: string
+}
+
+export const demos: readonly Demo[] = [
+  {
+    slug: 'image-to-video',
+    arcadeId: 'F3CTalnGnR4R0qJIVMNX',
+    category: 'demos.category.templates',
+    title: 'demos.image-to-video.title',
+    description: 'demos.image-to-video.description',
+    transcript: 'demos.image-to-video.transcript',
+    ogImage: '/images/demos/image-to-video-og.png',
+    thumbnail: '/images/demos/image-to-video-thumb.webp',
+    estimatedTime: 'demos.duration.2min',
+    durationIso: 'PT2M',
+    difficulty: 'beginner',
+    tags: ['templates', 'image', 'video'],
+    publishedDate: '2026-04-19',
+    modifiedDate: '2026-04-19'
+  },
+  {
+    slug: 'workflow-templates',
+    arcadeId: 'KhqcXDElnFWklo7ACBqE',
+    category: 'demos.category.gettingStarted',
+    title: 'demos.workflow-templates.title',
+    description: 'demos.workflow-templates.description',
+    transcript: 'demos.workflow-templates.transcript',
+    ogImage: '/images/demos/workflow-templates-og.png',
+    thumbnail: '/images/demos/workflow-templates-thumb.webp',
+    estimatedTime: 'demos.duration.2min',
+    durationIso: 'PT2M',
+    difficulty: 'beginner',
+    tags: ['getting-started', 'templates', 'workflow'],
+    publishedDate: '2026-04-19',
+    modifiedDate: '2026-04-19'
+  }
+]
+
+export function getDemoBySlug(slug: string): Demo | undefined {
+  return demos.find((demo) => demo.slug === slug)
+}
+
+export function getNextDemo(slug: string): Demo {
+  if (demos.length === 0) {
+    throw new Error('No demos configured')
+  }
+  const index = demos.findIndex((demo) => demo.slug === slug)
+  if (index === -1) {
+    throw new Error(`Unknown demo slug: ${slug}`)
+  }
+  return demos[(index + 1) % demos.length]
+}

apps/website/src/config/routes.ts

@@ -11,6 +11,7 @@ const baseRoutes = {
   about: '/about',
   careers: '/careers',
   customers: '/customers',
+  demos: '/demos',
   termsOfService: '/terms-of-service',
   privacyPolicy: '/privacy-policy',
   contact: '/contact'

apps/website/src/i18n/translations.ts

@@ -1599,7 +1599,7 @@ const translations = {
   },
   'nav.comfyHub': { en: 'Comfy Hub', 'zh-CN': 'Comfy Hub' },
   'nav.gallery': { en: 'Gallery', 'zh-CN': '画廊' },
-  'nav.blogs': { en: 'Blogs', 'zh-CN': '博客' },
+  'nav.blogs': { en: 'Blog', 'zh-CN': '博客' },
   'nav.github': { en: 'GitHub', 'zh-CN': 'GitHub' },
   'nav.discord': { en: 'Discord', 'zh-CN': 'Discord' },
   'nav.docs': { en: 'Docs', 'zh-CN': '文档' },
@@ -3498,18 +3498,6 @@ const translations = {
     en: 'Dale Carman | Co-founder @ Groove Jones',
     'zh-CN': 'Dale Carman | Groove Jones 联合创始人'
   },
-  'customers.detail.groove-jones.topic-10.block.2.label': {
-    en: 'GROOVE JONES CONTRIBUTORS',
-    'zh-CN': 'GROOVE JONES 贡献者'
-  },
-  'customers.detail.groove-jones.topic-10.block.2.name': {
-    en: 'TBD',
-    'zh-CN': '待补充'
-  },
-  'customers.detail.groove-jones.topic-10.block.2.role': {
-    en: 'TBD',
-    'zh-CN': '待补充'
-  },
 
   // Contact – FormSection
   'contact.form.badge': {
@@ -3542,6 +3530,80 @@ const translations = {
     'zh-CN': '我们会为您处理请求。'
   },
 
+  'demos.category.templates': { en: 'TEMPLATES', 'zh-CN': '模板' },
+  'demos.category.gettingStarted': { en: 'GETTING STARTED', 'zh-CN': '入门' },
+
+  'demos.image-to-video.title': {
+    en: 'Create a Video from an Image',
+    'zh-CN': '从图片创建视频'
+  },
+  'demos.image-to-video.description': {
+    en: 'Learn how to use the Image to Video workflow template in ComfyUI to generate short video clips from a single image.',
+    'zh-CN':
+      '了解如何使用 ComfyUI 中的图片转视频工作流模板，从单张图片生成短视频。'
+  },
+  'demos.image-to-video.transcript': {
+    en: '<ol><li><strong>Open ComfyUI</strong> — Launch the application and you\'ll see the node-based workflow canvas where all your AI pipelines are built.</li><li><strong>Browse templates</strong> — Click the workflow templates button in the sidebar to browse available starting points.</li><li><strong>Select Image to Video</strong> — Find and select the "Image to Video" template from the list to load it onto your canvas.</li><li><strong>Upload your image</strong> — Click the image upload node and select the source image you want to animate.</li><li><strong>Run the workflow</strong> — Click the "Queue" button to execute the workflow and generate your video output.</li></ol>',
+    'zh-CN':
+      '<ol><li><strong>打开 ComfyUI</strong> — 启动应用程序，您将看到基于节点的工作流画布。</li><li><strong>浏览模板</strong> — 点击侧栏中的工作流模板按钮，浏览可用模板。</li><li><strong>选择图片转视频</strong> — 从列表中找到并选择"图片转视频"模板。</li><li><strong>上传图片</strong> — 点击图片上传节点，选择要动画化的源图片。</li><li><strong>运行工作流</strong> — 点击"排队"按钮执行工作流并生成视频输出。</li></ol>'
+  },
+
+  'demos.workflow-templates.title': {
+    en: 'Browse Workflow Templates',
+    'zh-CN': '浏览工作流模板'
+  },
+  'demos.workflow-templates.description': {
+    en: "Explore ComfyUI's built-in workflow templates to quickly get started with common AI generation tasks.",
+    'zh-CN': '探索 ComfyUI 内置的工作流模板，快速开始常见的 AI 生成任务。'
+  },
+  'demos.workflow-templates.transcript': {
+    en: '<ol><li><strong>Open the template browser</strong> — Click the templates icon in the ComfyUI sidebar to open the template library.</li><li><strong>Browse categories</strong> — Templates are organized by task: image generation, video, upscaling, and more.</li><li><strong>Preview a template</strong> — Hover over any template to see a preview of its workflow and expected output.</li><li><strong>Load and customize</strong> — Click to load a template, then modify parameters to fit your needs.</li></ol>',
+    'zh-CN':
+      '<ol><li><strong>打开模板浏览器</strong> — 点击 ComfyUI 侧栏中的模板图标。</li><li><strong>浏览分类</strong> — 模板按任务分类：图像生成、视频、放大等。</li><li><strong>预览模板</strong> — 将鼠标悬停在模板上查看预览。</li><li><strong>加载并自定义</strong> — 点击加载模板，然后修改参数。</li></ol>'
+  },
+
+  'demos.nav.nextDemo': { en: "What's Next", 'zh-CN': '下一个演示' },
+  'demos.nav.viewDemo': { en: 'View Demo', 'zh-CN': '查看演示' },
+  'demos.nav.allDemos': { en: 'All Demos', 'zh-CN': '所有演示' },
+  'demos.transcript.label': { en: 'Demo transcript', 'zh-CN': '演示文字记录' },
+  'demos.transcript.note': {
+    en: '(for accessibility & search)',
+    'zh-CN': '（无障碍和搜索）'
+  },
+  'demos.loading': {
+    en: 'Loading interactive demo…',
+    'zh-CN': '正在加载互动演示…'
+  },
+  'demos.noscript': {
+    en: 'This interactive demo requires JavaScript.',
+    'zh-CN': '此互动演示需要 JavaScript。'
+  },
+  'demos.noscript.link': {
+    en: 'View on Arcade →',
+    'zh-CN': '在 Arcade 上查看 →'
+  },
+  'demos.duration.2min': { en: '~2 min', 'zh-CN': '~2 分钟' },
+  'demos.difficulty.beginner': { en: 'Beginner', 'zh-CN': '入门' },
+  'demos.difficulty.intermediate': {
+    en: 'Intermediate',
+    'zh-CN': '中级'
+  },
+  'demos.difficulty.advanced': { en: 'Advanced', 'zh-CN': '高级' },
+  'demos.embed.label': {
+    en: 'Interactive demo',
+    'zh-CN': '互动演示'
+  },
+  'demos.comingSoon.title': {
+    en: 'Coming Soon',
+    'zh-CN': '即将推出'
+  },
+  'demos.comingSoon.body': {
+    en: 'This page is being redesigned. Check back soon.',
+    'zh-CN': '此页面正在重新设计中，请稍后再来。'
+  },
+  'demos.breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
+  'demos.breadcrumb.demos': { en: 'Demos', 'zh-CN': '演示' },
+
   'customers.story.whatsNext': {
     en: "What's next?",
     'zh-CN': '接下来看什么？'
@@ -3620,8 +3682,8 @@ const translations = {
     'zh-CN': '支付'
   },
   'payment.failed.title': {
-    en: 'Payment was not completed',
-    'zh-CN': '支付未完成'
+    en: 'Unable to complete payment',
+    'zh-CN': '无法完成支付'
   },
   'payment.failed.subtitle': {
     en: "Your payment didn't go through and you have not been charged. Reach out to support or read the subscription docs if you need help.",

apps/website/src/layouts/BaseLayout.astro

@@ -10,6 +10,7 @@ import { fetchGitHubStars, formatStarCount } from '../utils/github'
 interface Props {
   title: string
   description?: string
+  keywords?: string[]
   ogImage?: string
   noindex?: boolean
 }
@@ -17,10 +18,13 @@ interface Props {
 const {
   title,
   description = 'Comfy is the AI creation engine for visual professionals who demand control.',
+  keywords,
   ogImage = 'https://media.comfy.org/website/comfy.webp',
   noindex = false,
 } = Astro.props
 
+const keywordsContent = keywords && keywords.length > 0 ? keywords.join(', ') : undefined
+
 const siteBase = Astro.site ?? 'https://comfy.org'
 const canonicalURL = new URL(Astro.url.pathname, siteBase)
 const ogImageURL = new URL(ogImage, siteBase)
@@ -62,6 +66,7 @@ const websiteJsonLd = {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content={description} />
+    {keywordsContent && <meta name="keywords" content={keywordsContent} />}
     {noindex && <meta name="robots" content="noindex, nofollow" />}
     <title>{title}</title>
 
@@ -109,6 +114,7 @@ const websiteJsonLd = {
     )}
 
     <ClientRouter />
+    <slot name="head" />
   </head>
   <body class="bg-primary-comfy-ink text-white font-formula antialiased overflow-x-clip">
     {gtmEnabled && (

apps/website/src/pages/cloud/index.astro

@@ -7,9 +7,14 @@ import AudienceSection from '../../components/product/cloud/AudienceSection.vue'
 import PricingSection from '../../components/product/cloud/PricingSection.vue'
 import ProductCardsSection from '../../components/product/cloud/ProductCardsSection.vue'
 import FAQSection from '../../components/product/cloud/FAQSection.vue'
+import { t } from '../../i18n/translations'
 ---
 
-<BaseLayout title="Comfy Cloud — AI in the Cloud">
+<BaseLayout
+  title="Comfy Cloud — AI in the Cloud"
+  description={t('cloud.hero.subtitle', 'en')}
+  keywords={['comfyui web app', 'comfyui app', 'comfyui online', 'comfyui cloud', 'comfy cloud', 'comfy ui application', 'comfyui browser', 'cloud comfyui', 'managed comfyui']}
+>
   <HeroSection />
   <ReasonSection />
   <AIModelsSection />

apps/website/src/pages/demos/[slug].astro

@@ -0,0 +1,139 @@
+---
+import type { GetStaticPaths } from 'astro'
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import DemoHeroSection from '../../components/demos/DemoHeroSection.vue'
+import ArcadeEmbed from '../../components/demos/ArcadeEmbed.vue'
+import DemoTranscript from '../../components/demos/DemoTranscript.vue'
+import DemoNavSection from '../../components/demos/DemoNavSection.vue'
+import { demos, getDemoBySlug, getNextDemo } from '../../config/demos'
+import { t } from '../../i18n/translations'
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return demos.map((demo) => ({
+    params: { slug: demo.slug }
+  }))
+}
+
+const { slug } = Astro.params
+const demo = getDemoBySlug(slug as string)!
+const nextDemo = getNextDemo(slug as string)
+const title = t(demo.title)
+const description = t(demo.description)
+const canonicalURL = new URL(`/demos/${demo.slug}`, Astro.site)
+
+const howToJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  image: new URL(demo.ogImage, Astro.site).href,
+  totalTime: demo.durationIso,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const learningResourceJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'LearningResource',
+  name: title,
+  description,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel: demo.difficulty === 'beginner'
+    ? 'Beginner'
+    : demo.difficulty === 'intermediate'
+      ? 'Intermediate'
+      : 'Advanced',
+  url: canonicalURL.href,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('demos.breadcrumb.home'),
+      item: 'https://comfy.org'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('demos.breadcrumb.demos'),
+      item: 'https://comfy.org/demos'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: title
+    }
+  ]
+}
+---
+
+<BaseLayout
+  title={`${title} — Comfy`}
+  description={description}
+  ogImage={demo.ogImage}
+>
+  <Fragment slot="head">
+    <meta property="article:published_time" content={demo.publishedDate} />
+    <meta property="article:modified_time" content={demo.modifiedDate} />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(howToJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(learningResourceJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
+    <link rel="preconnect" href="https://demo.arcade.software" />
+  </Fragment>
+
+  <DemoHeroSection
+    label={t(demo.category)}
+    title={title}
+    description={description}
+    difficulty={demo.difficulty}
+    estimatedTime={demo.estimatedTime}
+  />
+
+  <ArcadeEmbed
+    arcadeId={demo.arcadeId}
+    title={title}
+    client:load
+  />
+
+  {demo.transcript && (
+    <DemoTranscript
+      transcript={t(demo.transcript)}
+      client:visible
+    />
+  )}
+
+  <DemoNavSection
+    nextTitle={t(nextDemo.title)}
+    nextSlug={nextDemo.slug}
+    nextThumbnail={nextDemo.thumbnail}
+  />
+</BaseLayout>

apps/website/src/pages/demos/index.astro

@@ -0,0 +1,8 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ComingSoon from '../../components/common/ComingSoon.astro'
+---
+
+<BaseLayout title="Demos — Comfy" description="Interactive demos and tutorials for ComfyUI.">
+  <ComingSoon />
+</BaseLayout>

apps/website/src/pages/download.astro

@@ -7,9 +7,14 @@ import ReasonSection from '../components/product/local/ReasonSection.vue'
 import EcoSystemSection from '../components/product/local/EcoSystemSection.vue'
 import ProductCardsSection from '../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../components/product/local/FAQSection.vue'
+import { t } from '../i18n/translations'
 ---
 
-<BaseLayout title="Download Comfy — Run AI Locally">
+<BaseLayout
+  title="Download Comfy — Run AI Locally"
+  description={t('download.hero.subtitle', 'en')}
+  keywords={['comfyui app', 'comfyui desktop app', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux', 'comfyui local']}
+>
   <CloudBannerSection />
   <HeroSection client:load />
   <ReasonSection />

apps/website/src/pages/index.astro

@@ -8,9 +8,14 @@ import UseCaseSection from '../components/home/UseCaseSection.vue'
 import CaseStudySpotlightSection from '../components/home/CaseStudySpotlightSection.vue'
 import GetStartedSection from '../components/home/GetStartedSection.vue'
 import BuildWhatSection from '../components/home/BuildWhatSection.vue'
+import { t } from '../i18n/translations'
 ---
 
-<BaseLayout title="Comfy — Professional Control of Visual AI">
+<BaseLayout
+  title="Comfy — Professional Control of Visual AI"
+  description={t('hero.subtitle', 'en')}
+  keywords={['comfyui app', 'comfyui web app', 'comfy ui application', 'comfyui application', 'comfy app', 'comfyui', 'visual ai app', 'node-based ai', 'generative ai workflows']}
+>
   <HeroSection client:load />
   <SocialProofBarSection />
   <ProductShowcaseSection client:load />

apps/website/src/pages/zh-CN/cloud/index.astro

@@ -7,9 +7,14 @@ import AudienceSection from '../../../components/product/cloud/AudienceSection.v
 import PricingSection from '../../../components/product/cloud/PricingSection.vue'
 import ProductCardsSection from '../../../components/product/cloud/ProductCardsSection.vue'
 import FAQSection from '../../../components/product/cloud/FAQSection.vue'
+import { t } from '../../../i18n/translations'
 ---
 
-<BaseLayout title="Comfy Cloud — 云端 AI">
+<BaseLayout
+  title="Comfy Cloud — 云端 AI"
+  description={t('cloud.hero.subtitle', 'zh-CN')}
+  keywords={['comfyui web app', 'comfyui app', 'comfyui online', 'comfyui cloud', 'ComfyUI 网页版', 'ComfyUI 云端', 'ComfyUI 应用', 'Comfy Cloud', '云端 ComfyUI']}
+>
   <HeroSection locale="zh-CN" />
   <ReasonSection locale="zh-CN" />
   <AIModelsSection locale="zh-CN" />

apps/website/src/pages/zh-CN/demos/[slug].astro

@@ -0,0 +1,143 @@
+---
+import type { GetStaticPaths } from 'astro'
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import DemoHeroSection from '../../../components/demos/DemoHeroSection.vue'
+import ArcadeEmbed from '../../../components/demos/ArcadeEmbed.vue'
+import DemoTranscript from '../../../components/demos/DemoTranscript.vue'
+import DemoNavSection from '../../../components/demos/DemoNavSection.vue'
+import { demos, getDemoBySlug, getNextDemo } from '../../../config/demos'
+import { t } from '../../../i18n/translations'
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return demos.map((demo) => ({
+    params: { slug: demo.slug }
+  }))
+}
+
+const { slug } = Astro.params
+const demo = getDemoBySlug(slug as string)!
+const nextDemo = getNextDemo(slug as string)
+const title = t(demo.title, 'zh-CN')
+const description = t(demo.description, 'zh-CN')
+const canonicalURL = new URL(`/zh-CN/demos/${demo.slug}`, Astro.site)
+
+const howToJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  image: new URL(demo.ogImage, Astro.site).href,
+  totalTime: demo.durationIso,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const learningResourceJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'LearningResource',
+  name: title,
+  description,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel: demo.difficulty === 'beginner'
+    ? 'Beginner'
+    : demo.difficulty === 'intermediate'
+      ? 'Intermediate'
+      : 'Advanced',
+  url: canonicalURL.href,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('demos.breadcrumb.home', 'zh-CN'),
+      item: 'https://comfy.org/zh-CN'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('demos.breadcrumb.demos', 'zh-CN'),
+      item: 'https://comfy.org/zh-CN/demos'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: title
+    }
+  ]
+}
+---
+
+<BaseLayout
+  title={`${title} — Comfy`}
+  description={description}
+  ogImage={demo.ogImage}
+>
+  <Fragment slot="head">
+    <meta property="article:published_time" content={demo.publishedDate} />
+    <meta property="article:modified_time" content={demo.modifiedDate} />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(howToJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(learningResourceJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
+    <link rel="preconnect" href="https://demo.arcade.software" />
+  </Fragment>
+
+  <DemoHeroSection
+    label={t(demo.category, 'zh-CN')}
+    title={title}
+    description={description}
+    difficulty={demo.difficulty}
+    estimatedTime={demo.estimatedTime}
+    locale="zh-CN"
+  />
+
+  <ArcadeEmbed
+    arcadeId={demo.arcadeId}
+    title={title}
+    locale="zh-CN"
+    client:load
+  />
+
+  {demo.transcript && (
+    <DemoTranscript
+      transcript={t(demo.transcript, 'zh-CN')}
+      locale="zh-CN"
+      client:visible
+    />
+  )}
+
+  <DemoNavSection
+    nextTitle={t(nextDemo.title, 'zh-CN')}
+    nextSlug={nextDemo.slug}
+    nextThumbnail={nextDemo.thumbnail}
+    locale="zh-CN"
+  />
+</BaseLayout>

apps/website/src/pages/zh-CN/demos/index.astro

@@ -0,0 +1,17 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import { t } from '../../../i18n/translations'
+---
+
+<BaseLayout title="演示 — Comfy" description="ComfyUI 的互动演示和教程。">
+  <section class="flex min-h-[60vh] items-center justify-center px-6">
+    <div class="text-center">
+      <h1 class="text-primary-comfy-canvas text-4xl font-light">
+        {t('demos.comingSoon.title', 'zh-CN')}
+      </h1>
+      <p class="text-primary-warm-gray mt-4 text-sm">
+        {t('demos.comingSoon.body', 'zh-CN')}
+      </p>
+    </div>
+  </section>
+</BaseLayout>

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

@@ -7,9 +7,14 @@ import ReasonSection from '../../components/product/local/ReasonSection.vue'
 import EcoSystemSection from '../../components/product/local/EcoSystemSection.vue'
 import ProductCardsSection from '../../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../../components/product/local/FAQSection.vue'
+import { t } from '../../i18n/translations'
 ---
 
-<BaseLayout title="下载 — Comfy">
+<BaseLayout
+  title="下载 — Comfy"
+  description={t('download.hero.subtitle', 'zh-CN')}
+  keywords={['comfyui app', 'comfyui desktop app', 'comfyui download', 'ComfyUI 下载', 'ComfyUI 桌面应用', 'ComfyUI 应用', 'ComfyUI Windows', 'ComfyUI macOS', 'ComfyUI Linux']}
+>
   <CloudBannerSection locale="zh-CN" />
   <HeroSection locale="zh-CN" client:load />
   <ReasonSection locale="zh-CN" />

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

@@ -8,9 +8,14 @@ import UseCaseSection from '../../components/home/UseCaseSection.vue'
 import CaseStudySpotlightSection from '../../components/home/CaseStudySpotlightSection.vue'
 import GetStartedSection from '../../components/home/GetStartedSection.vue'
 import BuildWhatSection from '../../components/home/BuildWhatSection.vue'
+import { t } from '../../i18n/translations'
 ---
 
-<BaseLayout title="Comfy — 视觉 AI 的最强可控性">
+<BaseLayout
+  title="Comfy — 视觉 AI 的最强可控性"
+  description={t('hero.subtitle', 'zh-CN')}
+  keywords={['comfyui app', 'comfyui web app', 'comfyui application', 'ComfyUI 应用', 'ComfyUI 网页版', 'ComfyUI 桌面应用', 'ComfyUI 下载', '可视化 AI', '节点式 AI', '生成式 AI 工作流']}
+>
   <HeroSection locale="zh-CN" client:load />
   <SocialProofBarSection />
   <ProductShowcaseSection locale="zh-CN" client:load />

browser_tests/assets/missing/nested_subgraph_installed_model.json

@@ -0,0 +1,232 @@
+{
+  "id": "14af6003-d4ee-4dee-8e3d-cbff2e5519b3",
+  "revision": 0,
+  "last_node_id": 205,
+  "last_link_id": 383,
+  "nodes": [
+    {
+      "id": 205,
+      "type": "821645cc-a5d2-468f-990c-17d9de2e0d1b",
+      "pos": [4720, 5820],
+      "size": [400, 470],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "lotus_model",
+          "name": "unet_name_1",
+          "type": "COMBO",
+          "widget": {
+            "name": "unet_name_1"
+          },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [["76", "unet_name"]]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "821645cc-a5d2-468f-990c-17d9de2e0d1b",
+        "version": 1,
+        "state": {
+          "lastGroupId": 8,
+          "lastNodeId": 205,
+          "lastLinkId": 383,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Depth to Image (Z-Image-Turbo)",
+        "inputNode": {
+          "id": -10,
+          "bounding": [28, 4936, 128, 68]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1599, 4936, 128, 68]
+        },
+        "inputs": [
+          {
+            "id": "80e6915f-5d59-4d6b-a197-d8c565ad2922",
+            "name": "unet_name_1",
+            "type": "COMBO",
+            "linkIds": [258],
+            "pos": [132, 4960]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "47f9a22d-6619-4917-9447-a7d5d08dceb5",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [],
+            "pos": [1623, 4960]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 76,
+            "type": "a1134394-29e4-48dc-9b1e-e601a14d6fb8",
+            "pos": [250, 4910],
+            "size": [400, 210],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "unet_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "unet_name"
+                },
+                "link": 258
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": []
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [["203", "unet_name"]]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 258,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 76,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ],
+        "extra": {
+          "workflowRendererVersion": "LG",
+          "ds": {
+            "scale": 1,
+            "offset": [-30, -4760]
+          }
+        }
+      },
+      {
+        "id": "a1134394-29e4-48dc-9b1e-e601a14d6fb8",
+        "version": 1,
+        "state": {
+          "lastGroupId": 8,
+          "lastNodeId": 205,
+          "lastLinkId": 383,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Image to Depth Map (Lotus)",
+        "inputNode": {
+          "id": -10,
+          "bounding": [-60, -173, 128, 68]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1650, -173, 128, 68]
+        },
+        "inputs": [
+          {
+            "id": "d721b249-fd2a-441b-9a78-2805f04e2644",
+            "name": "unet_name",
+            "type": "COMBO",
+            "linkIds": [256],
+            "pos": [44, -149]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "2ec278bd-0b66-4b30-9c5b-994d5f638214",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [],
+            "pos": [1674, -149]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 203,
+            "type": "UNETLoader",
+            "pos": [180, -200],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "unet_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "unet_name"
+                },
+                "link": 256
+              }
+            ],
+            "outputs": [
+              {
+                "name": "MODEL",
+                "type": "MODEL",
+                "links": []
+              }
+            ],
+            "properties": {},
+            "widgets_values": ["lotus-depth-d-v1-1.safetensors", "default"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 256,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 203,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ],
+        "extra": {
+          "workflowRendererVersion": "LG",
+          "ds": {
+            "scale": 1,
+            "offset": [40, 350]
+          }
+        }
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "workflowRendererVersion": "LG",
+    "ds": {
+      "scale": 1,
+      "offset": [-4500, -5670]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/node_replacement_multi.json

@@ -0,0 +1,68 @@
+{
+  "last_node_id": 4,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "E2E_OldSampler",
+      "pos": [100, 100],
+      "size": [400, 262],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "E2E_OldSampler" },
+      "widgets_values": [42, 20, 7, "euler", "normal"]
+    },
+    {
+      "id": 2,
+      "type": "E2E_OldUpscaler",
+      "pos": [500, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [{ "name": "image", "type": "IMAGE", "link": null }],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "E2E_OldUpscaler" },
+      "widgets_values": ["lanczos", 1.5]
+    },
+    {
+      "id": 3,
+      "type": "SaveImage",
+      "pos": [900, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 2 }],
+      "properties": { "Node name for S&R": "SaveImage" },
+      "widgets_values": ["ComfyUI"]
+    }
+  ],
+  "links": [[2, 2, 0, 3, 0, "IMAGE"]],
+  "groups": [],
+  "config": {},
+  "extra": { "ds": { "scale": 1, "offset": [0, 0] } },
+  "version": 0.4
+}

browser_tests/assets/missing/node_replacement_simple.json

@@ -0,0 +1,59 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "E2E_OldSampler",
+      "pos": [100, 100],
+      "size": [400, 262],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "E2E_OldSampler" },
+      "widgets_values": [42, 20, 7, "euler", "normal"]
+    },
+    {
+      "id": 2,
+      "type": "VAEDecode",
+      "pos": [500, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 1 },
+        { "name": "vae", "type": "VAE", "link": null }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "VAEDecode" },
+      "widgets_values": []
+    }
+  ],
+  "links": [[1, 1, 0, 2, 0, "LATENT"]],
+  "groups": [],
+  "config": {},
+  "extra": { "ds": { "scale": 1, "offset": [0, 0] } },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-link-and-proxied-primitive.json

@@ -0,0 +1,179 @@
+{
+  "id": "5c4a1450-26b8-4b34-b5ea-e3465273441e",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "16aadaf6-aa66-4041-843e-589a6572a3ac",
+      "pos": [602, 409],
+      "size": [225, 144],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          ["1", "value"],
+          ["4", "value"]
+        ]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "16aadaf6-aa66-4041-843e-589a6572a3ac",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [349, 383, 128, 68]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [867, 383, 128, 48]
+        },
+        "inputs": [
+          {
+            "id": "50fd1af4-4f20-434f-9828-6971210be4e9",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [1],
+            "pos": [453, 407]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "PrimitiveString",
+            "pos": [537, 368],
+            "size": [270, 108],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveString"
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 3,
+            "type": "PrimitiveInt",
+            "pos": [534.9899497487436, 515.4924623115581],
+            "size": [270, 104],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "INT",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "INT",
+                "name": "INT",
+                "type": "INT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveInt"
+            },
+            "widgets_values": [0, "randomize"]
+          },
+          {
+            "id": 4,
+            "type": "PrimitiveNode",
+            "pos": [258.4381232333541, 549.1608040200999],
+            "size": [225, 104],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "INT",
+                "type": "INT",
+                "widget": {
+                  "name": "value"
+                },
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Run widget replace on values": false
+            },
+            "widgets_values": [0, "randomize"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "INT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.44.17"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -460,10 +460,15 @@ export const testComfySnapToGridGridSize = 50
 const COLLECT_COVERAGE = process.env.COLLECT_COVERAGE === 'true'
 
 export const comfyPageFixture = base.extend<{
+  initialFeatureFlags: Record<string, unknown>
   comfyPage: ComfyPage
   comfyMouse: ComfyMouse
   comfyFiles: ComfyFiles
 }>({
+  // Allows configuring feature flags for tests with before initial setup:
+  // `test.use({ initialFeatureFlags: { my_flag: true } })`.
+  initialFeatureFlags: [{}, { option: true }],
+
   page: async ({ page, browserName }, use) => {
     if (browserName !== 'chromium' || !COLLECT_COVERAGE) {
       return use(page)
@@ -480,7 +485,7 @@ export const comfyPageFixture = base.extend<{
     await mcr.add(coverage)
   },
 
-  comfyPage: async ({ page, request }, use, testInfo) => {
+  comfyPage: async ({ page, request, initialFeatureFlags }, use, testInfo) => {
     const comfyPage = new ComfyPage(page, request)
 
     const { parallelIndex } = testInfo
@@ -505,6 +510,7 @@ export const comfyPageFixture = base.extend<{
         'Comfy.userId': userId,
         // Set tutorial completed to true to avoid loading the tutorial workflow.
         'Comfy.TutorialCompleted': true,
+        'Comfy.Queue.MaxHistoryItems': 64,
         'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
         'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
@@ -523,6 +529,10 @@ export const comfyPageFixture = base.extend<{
       await comfyPage.cloudAuth.mockAuth()
     }
 
+    if (Object.keys(initialFeatureFlags).length > 0) {
+      await comfyPage.featureFlags.seedFlags(initialFeatureFlags)
+    }
+
     await comfyPage.setup()
 
     if (isVueNodes) {

browser_tests/fixtures/VueNodeHelpers.ts

@@ -5,6 +5,7 @@ import type { Locator, Page } from '@playwright/test'
 
 import { TestIds } from '@e2e/fixtures/selectors'
 import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
 
 export class VueNodeHelpers {
   /**
@@ -37,6 +38,22 @@ export class VueNodeHelpers {
     return this.getNodeLocator(nodeId).getByTestId(TestIds.node.innerWrapper)
   }
 
+  getInputSlotRow(nodeId: string, slotIndex: number): Locator {
+    return this.getNodeLocator(nodeId)
+      .locator('.lg-slot--input')
+      .filter({
+        has: this.page.locator(
+          `[data-slot-key="${getSlotKey(nodeId, slotIndex, true)}"]`
+        )
+      })
+  }
+
+  getInputSlotConnectionDot(nodeId: string, slotIndex: number): Locator {
+    return this.getInputSlotRow(nodeId, slotIndex).getByTestId(
+      TestIds.node.slotConnectionDot
+    )
+  }
+
   /**
    * Get locator for Vue nodes by the node's title (displayed name in the header).
    * Matches against the actual title element, not the full node body.

browser_tests/fixtures/assetApiFixture.ts

@@ -1,8 +1,34 @@
 import { test as base } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
 
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import type { AssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
 import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
 
+const ASSETS_ROUTE_PATTERN = /\/api\/assets(?:\?.*)?$/
+const cloudAssetRequestsByPage = new WeakMap<Page, string[]>()
+
+function makeAssetsResponse(assets: ReadonlyArray<Asset>): ListAssetsResponse {
+  return { assets: [...assets], total: assets.length, has_more: false }
+}
+
+export function assetRequestIncludesTag(url: string, tag: string): boolean {
+  const includeTags = new URL(url).searchParams.get('include_tags') ?? ''
+  return includeTags
+    .split(',')
+    .map((value) => value.trim())
+    .filter(Boolean)
+    .includes(tag)
+}
+
+export function countAssetRequestsByTag(
+  requests: string[],
+  tag: string
+): number {
+  return requests.filter((url) => assetRequestIncludesTag(url, tag)).length
+}
+
 export const assetApiFixture = base.extend<{
   assetApi: AssetHelper
 }>({
@@ -14,3 +40,31 @@ export const assetApiFixture = base.extend<{
     await assetApi.clearMocks()
   }
 })
+
+export function createCloudAssetsFixture(assets: ReadonlyArray<Asset>) {
+  return comfyPageFixture.extend<{
+    cloudAssetRequests: string[]
+  }>({
+    page: async ({ page }, use) => {
+      const cloudAssetRequests: string[] = []
+      cloudAssetRequestsByPage.set(page, cloudAssetRequests)
+
+      async function assetsRouteHandler(route: Route) {
+        cloudAssetRequests.push(route.request().url())
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(makeAssetsResponse(assets))
+        })
+      }
+
+      await page.route(ASSETS_ROUTE_PATTERN, assetsRouteHandler)
+      await use(page)
+      await page.unroute(ASSETS_ROUTE_PATTERN, assetsRouteHandler)
+      cloudAssetRequestsByPage.delete(page)
+    },
+    cloudAssetRequests: async ({ page }, use) => {
+      await use(cloudAssetRequestsByPage.get(page) ?? [])
+    }
+  })
+}

browser_tests/fixtures/components/Topbar.ts

@@ -1,16 +1,23 @@
 import type { Locator, Page } from '@playwright/test'
 
 import type { WorkspaceStore } from '@e2e/types/globals'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 export class Topbar {
   private readonly menuLocator: Locator
   private readonly menuTrigger: Locator
   readonly newWorkflowButton: Locator
+  readonly workflowTabs: Locator
+  readonly integratedTabBarActions: Locator
 
   constructor(public readonly page: Page) {
     this.menuLocator = page.locator('.comfy-command-menu')
     this.menuTrigger = page.locator('.comfy-menu-button-wrapper')
     this.newWorkflowButton = page.locator('.new-blank-workflow-button')
+    this.workflowTabs = page.getByTestId(TestIds.topbar.workflowTabs)
+    this.integratedTabBarActions = this.workflowTabs.getByTestId(
+      TestIds.topbar.integratedTabBarActions
+    )
   }
 
   async getTabNames(): Promise<string[]> {

browser_tests/fixtures/data/nodeReplacements.ts

@@ -0,0 +1,47 @@
+import type { NodeReplacementResponse } from '@/platform/nodeReplacement/types'
+
+/**
+ * Mock node replacement mappings for e2e tests.
+ *
+ * Maps fake "missing" node types (E2E_OldSampler, E2E_OldUpscaler) to real
+ * core node types that are always available in the test server.
+ */
+export const mockNodeReplacements: NodeReplacementResponse = {
+  E2E_OldSampler: [
+    {
+      new_node_id: 'KSampler',
+      old_node_id: 'E2E_OldSampler',
+      old_widget_ids: ['seed', 'steps', 'cfg', 'sampler_name', 'scheduler'],
+      input_mapping: [
+        { new_id: 'model', old_id: 'model' },
+        { new_id: 'positive', old_id: 'positive' },
+        { new_id: 'negative', old_id: 'negative' },
+        { new_id: 'latent_image', old_id: 'latent_image' },
+        { new_id: 'seed', old_id: 'seed' },
+        { new_id: 'steps', old_id: 'steps' },
+        { new_id: 'cfg', old_id: 'cfg' },
+        { new_id: 'sampler_name', old_id: 'sampler_name' },
+        { new_id: 'scheduler', old_id: 'scheduler' }
+      ],
+      output_mapping: [{ new_idx: 0, old_idx: 0 }]
+    }
+  ],
+  E2E_OldUpscaler: [
+    {
+      new_node_id: 'ImageScaleBy',
+      old_node_id: 'E2E_OldUpscaler',
+      old_widget_ids: ['upscale_method', 'scale_by'],
+      input_mapping: [
+        { new_id: 'image', old_id: 'image' },
+        { new_id: 'upscale_method', old_id: 'upscale_method' },
+        { new_id: 'scale_by', old_id: 'scale_by' }
+      ],
+      output_mapping: [{ new_idx: 0, old_idx: 0 }]
+    }
+  ]
+}
+
+/** Subset containing only the E2E_OldSampler replacement. */
+export const mockNodeReplacementsSingle: NodeReplacementResponse = {
+  E2E_OldSampler: mockNodeReplacements.E2E_OldSampler
+}

browser_tests/fixtures/helpers/JobsApiMock.ts

@@ -0,0 +1,176 @@
+import type { Page, Route } from '@playwright/test'
+import type {
+  JobDetailResponse,
+  JobEntry,
+  JobsListResponse
+} from '@comfyorg/ingest-types'
+
+const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
+const jobDetailRoutePattern = /\/api\/jobs\/[^/?#]+(?:\?.*)?$/
+const historyRoutePattern = /\/api\/history(?:\?.*)?$/
+const defaultJobsListLimit = 100
+
+export type MockJobRecord = {
+  listItem: JobEntry
+  detail: JobDetailResponse
+}
+
+function parsePositiveIntegerParam(url: URL, name: string): number | undefined {
+  const value = Number(url.searchParams.get(name))
+
+  return Number.isInteger(value) && value > 0 ? value : undefined
+}
+
+function getJobIdFromRequest(route: Route): string | null {
+  const url = new URL(route.request().url())
+  const jobId = url.pathname.split('/').at(-1)
+
+  return jobId ? decodeURIComponent(jobId) : null
+}
+
+export class JobsApiMock {
+  private listRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private detailRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private historyRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private jobsById = new Map<string, MockJobRecord>()
+
+  constructor(private readonly page: Page) {}
+
+  async mockJobs(jobs: MockJobRecord[]): Promise<void> {
+    this.jobsById = new Map(
+      jobs.map(
+        (job) => [job.listItem.id, job] satisfies [string, MockJobRecord]
+      )
+    )
+    await this.ensureRoutesRegistered()
+  }
+
+  async clear(): Promise<void> {
+    this.jobsById.clear()
+
+    if (this.listRouteHandler) {
+      await this.page.unroute(jobsListRoutePattern, this.listRouteHandler)
+      this.listRouteHandler = null
+    }
+
+    if (this.detailRouteHandler) {
+      await this.page.unroute(jobDetailRoutePattern, this.detailRouteHandler)
+      this.detailRouteHandler = null
+    }
+
+    if (this.historyRouteHandler) {
+      await this.page.unroute(historyRoutePattern, this.historyRouteHandler)
+      this.historyRouteHandler = null
+    }
+  }
+
+  private async ensureRoutesRegistered(): Promise<void> {
+    if (!this.listRouteHandler) {
+      this.listRouteHandler = async (route: Route) => {
+        const url = new URL(route.request().url())
+        const statuses = url.searchParams
+          .get('status')
+          ?.split(',')
+          .map((status) => status.trim())
+          .filter(Boolean)
+
+        let filteredJobs = Array.from(
+          this.jobsById.values(),
+          ({ listItem }) => listItem
+        )
+
+        if (statuses?.length) {
+          filteredJobs = filteredJobs.filter((job) =>
+            statuses.includes(job.status)
+          )
+        }
+
+        const offset = parsePositiveIntegerParam(url, 'offset') ?? 0
+        const limit =
+          parsePositiveIntegerParam(url, 'limit') ?? defaultJobsListLimit
+        const total = filteredJobs.length
+        const visibleJobs = filteredJobs.slice(offset, offset + limit)
+
+        const response = {
+          jobs: visibleJobs,
+          pagination: {
+            offset,
+            limit,
+            total,
+            has_more: offset + visibleJobs.length < total
+          }
+        } satisfies JobsListResponse
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      }
+
+      await this.page.route(jobsListRoutePattern, this.listRouteHandler)
+    }
+
+    if (!this.detailRouteHandler) {
+      this.detailRouteHandler = async (route: Route) => {
+        const jobId = getJobIdFromRequest(route)
+        const job = jobId ? this.jobsById.get(jobId) : undefined
+
+        if (!job) {
+          await route.fulfill({
+            status: 404,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: 'Job not found' })
+          })
+          return
+        }
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(job.detail)
+        })
+      }
+
+      await this.page.route(jobDetailRoutePattern, this.detailRouteHandler)
+    }
+
+    if (!this.historyRouteHandler) {
+      this.historyRouteHandler = async (route: Route) => {
+        const request = route.request()
+        if (request.method() !== 'POST') {
+          await route.continue()
+          return
+        }
+
+        const requestBody = request.postDataJSON() as
+          | { delete?: string[]; clear?: boolean }
+          | undefined
+
+        if (requestBody?.clear) {
+          this.jobsById = new Map(
+            Array.from(this.jobsById).filter(([, job]) => {
+              const status = job.listItem.status
+
+              return status === 'pending' || status === 'in_progress'
+            })
+          )
+        }
+
+        if (requestBody?.delete?.length) {
+          for (const jobId of requestBody.delete) {
+            this.jobsById.delete(jobId)
+          }
+        }
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({})
+        })
+      }
+
+      await this.page.route(historyRoutePattern, this.historyRouteHandler)
+    }
+  }
+}

browser_tests/fixtures/helpers/MaskEditorHelper.ts

@@ -0,0 +1,136 @@
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+const MASK_CANVAS_INDEX = 2
+const RGB_CANVAS_INDEX = 1
+
+export type BrushSliderLabel = 'thickness'
+
+export class MaskEditorHelper {
+  constructor(private comfyPage: ComfyPage) {}
+
+  private get page() {
+    return this.comfyPage.page
+  }
+
+  async loadImageOnNode() {
+    await this.comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+
+    const loadImageNode = (
+      await this.comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+    const { x, y } = await loadImageNode.getPosition()
+
+    await this.comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+      dropPosition: { x, y }
+    })
+
+    const imagePreview = this.page.locator('.image-preview')
+    await expect(imagePreview).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview).toContainText('x')
+
+    return {
+      imagePreview,
+      nodeId: String(loadImageNode.id)
+    }
+  }
+
+  async openDialog(): Promise<Locator> {
+    const { imagePreview } = await this.loadImageOnNode()
+
+    await imagePreview.getByRole('region').hover()
+    await this.page.getByLabel('Edit or mask image').click()
+
+    const dialog = this.page.locator('.mask-editor-dialog')
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('heading', { name: 'Mask Editor' })
+    ).toBeVisible()
+
+    const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
+    await expect(canvasContainer).toBeVisible()
+    await expect(canvasContainer.locator('canvas')).toHaveCount(4)
+
+    return dialog
+  }
+
+  async drawStrokeOnPointerZone(dialog: Locator) {
+    const pointerZone = dialog.getByTestId('pointer-zone')
+    await expect(pointerZone).toBeVisible()
+
+    const box = await pointerZone.boundingBox()
+    if (!box) throw new Error('Pointer zone bounding box not found')
+
+    const startX = box.x + box.width * 0.3
+    const startY = box.y + box.height * 0.5
+    const endX = box.x + box.width * 0.7
+    const endY = box.y + box.height * 0.5
+
+    await this.page.mouse.move(startX, startY)
+    await this.page.mouse.down()
+    await this.page.mouse.move(endX, endY, { steps: 10 })
+    await this.page.mouse.up()
+
+    return { startX, startY, endX, endY, box }
+  }
+
+  async drawStrokeAndExpectPixels(dialog: Locator) {
+    await this.drawStrokeOnPointerZone(dialog)
+    await expect.poll(() => this.pollMaskPixelCount()).toBeGreaterThan(0)
+  }
+
+  getCanvasPixelData(canvasIndex: number) {
+    return this.page.evaluate((idx) => {
+      const canvases = document.querySelectorAll(
+        '#maskEditorCanvasContainer canvas'
+      )
+      const canvas = canvases[idx] as HTMLCanvasElement | undefined
+      if (!canvas) return null
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return null
+      const data = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      let nonTransparentPixels = 0
+      for (let i = 3; i < data.data.length; i += 4) {
+        if (data.data[i] > 0) nonTransparentPixels++
+      }
+      return { nonTransparentPixels, totalPixels: data.data.length / 4 }
+    }, canvasIndex)
+  }
+
+  pollMaskPixelCount(): Promise<number> {
+    return this.getCanvasPixelData(MASK_CANVAS_INDEX).then(
+      (d) => d?.nonTransparentPixels ?? 0
+    )
+  }
+
+  pollRgbPixelCount(): Promise<number> {
+    return this.getCanvasPixelData(RGB_CANVAS_INDEX).then(
+      (d) => d?.nonTransparentPixels ?? 0
+    )
+  }
+
+  getCanvasSnapshot(canvasIndex: number): Promise<string> {
+    return this.page.evaluate((idx) => {
+      const canvas = document.querySelectorAll(
+        '#maskEditorCanvasContainer canvas'
+      )[idx] as HTMLCanvasElement | undefined
+      return canvas?.toDataURL() ?? ''
+    }, canvasIndex)
+  }
+
+  brushInput(dialog: Locator, label: BrushSliderLabel): Locator {
+    return dialog.getByTestId(`brush-${label}-input`)
+  }
+}
+
+export const maskEditorTest = comfyPageFixture.extend<{
+  maskEditor: MaskEditorHelper
+}>({
+  maskEditor: async ({ comfyPage }, use) => {
+    await use(new MaskEditorHelper(comfyPage))
+  }
+})

browser_tests/fixtures/helpers/NodeReplacementHelper.ts

@@ -0,0 +1,93 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import type { NodeReplacementResponse } from '@/platform/nodeReplacement/types'
+
+/**
+ * Mock `/api/node_replacements` and enable the node replacement feature.
+ *
+ * Unlike features that only consult settings (e.g. shareWorkflowDialog,
+ * managerDialog), node replacement gates on `api.serverFeatureFlags`. The
+ * server sends a `feature_flags` WS message that wholesale replaces
+ * `serverFeatureFlags`, racing with any test-side override done via
+ * `page.evaluate`. To make the flow deterministic across CI shards, this
+ * helper patches `WebSocket.prototype` so every incoming `feature_flags`
+ * message has `node_replacements: true` injected before the api's WS
+ * handler sees it. Reload the page so the patched WebSocket and persisted
+ * settings apply to a fresh app boot, then wait for the resulting
+ * `/api/node_replacements` fetch before returning.
+ */
+export async function setupNodeReplacement(
+  comfyPage: ComfyPage,
+  replacements: NodeReplacementResponse
+): Promise<void> {
+  await comfyPage.page.route('**/api/node_replacements', (route) =>
+    route.fulfill({ json: replacements })
+  )
+
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
+  )
+  await comfyPage.settings.setSetting('Comfy.NodeReplacement.Enabled', true)
+
+  await comfyPage.page.addInitScript(() => {
+    const proto = window.WebSocket.prototype
+    const originalAdd = proto.addEventListener
+    proto.addEventListener = function patchedAdd(
+      this: WebSocket,
+      type: string,
+      listener: EventListenerOrEventListenerObject | null,
+      options?: AddEventListenerOptions | boolean
+    ) {
+      if (type === 'message' && typeof listener === 'function') {
+        const wrapped = function (this: WebSocket, event: Event) {
+          const msgEvent = event as MessageEvent
+          if (typeof msgEvent.data === 'string') {
+            try {
+              const msg = JSON.parse(msgEvent.data)
+              if (
+                msg &&
+                msg.type === 'feature_flags' &&
+                msg.data &&
+                typeof msg.data === 'object'
+              ) {
+                msg.data.node_replacements = true
+                const patched = new MessageEvent('message', {
+                  data: JSON.stringify(msg),
+                  origin: msgEvent.origin,
+                  lastEventId: msgEvent.lastEventId
+                })
+                return (listener as EventListener).call(this, patched)
+              }
+            } catch {
+              // not JSON or not a feature_flags message - pass through
+            }
+          }
+          return (listener as EventListener).call(this, event)
+        }
+        return originalAdd.call(this, type, wrapped as EventListener, options)
+      }
+      return originalAdd.call(
+        this,
+        type,
+        listener as EventListenerOrEventListenerObject,
+        options
+      )
+    }
+  })
+
+  const fetchPromise = comfyPage.page.waitForResponse(
+    (response) =>
+      response.url().includes('/api/node_replacements') && response.ok(),
+    { timeout: 10000 }
+  )
+
+  await comfyPage.workflow.reloadAndWaitForApp()
+  await fetchPromise
+}
+
+export function getSwapNodesGroup(page: Page): Locator {
+  return page.getByTestId(TestIds.dialogs.swapNodesGroup)
+}

browser_tests/fixtures/jobsApiMockFixture.ts

@@ -0,0 +1,15 @@
+import { test as base } from '@playwright/test'
+
+import { JobsApiMock } from '@e2e/fixtures/helpers/JobsApiMock'
+
+export const jobsApiMockFixture = base.extend<{
+  jobsApi: JobsApiMock
+}>({
+  jobsApi: async ({ page }, use) => {
+    const jobsApi = new JobsApiMock(page)
+
+    await use(jobsApi)
+
+    await jobsApi.clear()
+  }
+})

browser_tests/fixtures/selectors.ts

@@ -64,6 +64,7 @@ export const TestIds = {
     missingModelRefresh: 'missing-model-refresh',
     missingModelImportUnsupported: 'missing-model-import-unsupported',
     missingMediaGroup: 'error-group-missing-media',
+    swapNodesGroup: 'error-group-swap-nodes',
     missingMediaRow: 'missing-media-row',
     missingMediaUploadDropzone: 'missing-media-upload-dropzone',
     missingMediaLibrarySelect: 'missing-media-library-select',
@@ -90,6 +91,8 @@ export const TestIds = {
     loginButton: 'login-button',
     loginButtonPopover: 'login-button-popover',
     loginButtonPopoverLearnMore: 'login-button-popover-learn-more',
+    workflowTabs: 'topbar-workflow-tabs',
+    integratedTabBarActions: 'integrated-tab-bar-actions',
     actionBarButtons: 'action-bar-buttons'
   },
   nodeLibrary: {
@@ -113,7 +116,8 @@ export const TestIds = {
     titleInput: 'node-title-input',
     pinIndicator: 'node-pin-indicator',
     innerWrapper: 'node-inner-wrapper',
-    mainImage: 'main-image'
+    mainImage: 'main-image',
+    slotConnectionDot: 'slot-connection-dot'
   },
   selectionToolbox: {
     root: 'selection-toolbox',
@@ -210,6 +214,7 @@ export const TestIds = {
   },
   queue: {
     overlayToggle: 'queue-overlay-toggle',
+    jobDetailsPopover: 'queue-job-details-popover',
     clearHistoryAction: 'clear-history-action',
     jobAssetsList: 'job-assets-list',
     notificationBanner: 'queue-notification-banner'

browser_tests/fixtures/utils/jobFixtures.ts

@@ -0,0 +1,52 @@
+import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
+
+import type { MockJobRecord } from '@e2e/fixtures/helpers/JobsApiMock'
+
+export function createMockJob(
+  overrides: Partial<JobEntry> & { id: string }
+): JobEntry {
+  const now = Date.now()
+
+  return {
+    status: 'completed',
+    create_time: now,
+    execution_start_time: now,
+    execution_end_time: now + 5_000,
+    preview_output: {
+      filename: `output_${overrides.id}.png`,
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1,
+    ...overrides
+  }
+}
+
+function isTerminalStatus(status: JobEntry['status']) {
+  return status === 'completed' || status === 'failed' || status === 'cancelled'
+}
+
+function createMockJobRecord(listItem: JobEntry): MockJobRecord {
+  const updateTime =
+    listItem.execution_end_time ??
+    listItem.execution_start_time ??
+    listItem.create_time
+  const detail: JobDetailResponse = {
+    ...listItem,
+    update_time: updateTime,
+    ...(isTerminalStatus(listItem.status) ? { outputs: {} } : {})
+  }
+
+  return {
+    listItem,
+    detail
+  }
+}
+
+export function createMockJobRecords(
+  listItems: readonly JobEntry[]
+): MockJobRecord[] {
+  return listItems.map(createMockJobRecord)
+}

browser_tests/tests/cloud-asset-default.spec.ts

@@ -1,51 +1,20 @@
 import { expect } from '@playwright/test'
-import type { Route } from '@playwright/test'
 
-import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { Asset } from '@comfyorg/ingest-types'
+import {
+  assetRequestIncludesTag,
+  createCloudAssetsFixture
+} from '@e2e/fixtures/assetApiFixture'
 import {
   STABLE_CHECKPOINT,
   STABLE_CHECKPOINT_2
 } from '@e2e/fixtures/data/assetFixtures'
 
-function makeAssetsResponse(assets: Asset[]): ListAssetsResponse {
-  return { assets, total: assets.length, has_more: false }
-}
-
 const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT, STABLE_CHECKPOINT_2]
 const WAITING_FOR_WIDGET_TYPE = 'waiting:type'
 const WAITING_FOR_WIDGET_VALUE = 'waiting:value'
 
-// Stub /api/assets before the app loads. The local ComfyUI backend has no
-// /api/assets endpoint (returns 503), which poisons the assets store on
-// first load. Narrow pattern avoids intercepting static /assets/*.js bundles.
-//
-// TODO: Consider moving this stub into ComfyPage fixture for all @cloud tests.
-const test = comfyPageFixture.extend<{
-  cloudAssetRequests: string[]
-  stubCloudAssets: void
-}>({
-  cloudAssetRequests: async ({ page: _page }, use) => {
-    await use([])
-  },
-  stubCloudAssets: [
-    async ({ cloudAssetRequests, page }, use) => {
-      const pattern = /\/api\/assets(?:\?.*)?$/
-      const assetsRouteHandler = (route: Route) => {
-        cloudAssetRequests.push(route.request().url())
-        return route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(makeAssetsResponse(CLOUD_ASSETS))
-        })
-      }
-      await page.route(pattern, assetsRouteHandler)
-      await use()
-      await page.unroute(pattern, assetsRouteHandler)
-    },
-    { auto: true }
-  ]
-})
+const test = createCloudAssetsFixture(CLOUD_ASSETS)
 
 test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
   test.afterEach(async ({ comfyPage }) => {
@@ -62,11 +31,9 @@ test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
     // new nodes resolve against the cloud asset list after the fetch.
     await expect
       .poll(() =>
-        cloudAssetRequests.some((url) => {
-          const includeTags =
-            new URL(url).searchParams.get('include_tags') ?? ''
-          return includeTags.split(',').includes('checkpoints')
-        })
+        cloudAssetRequests.some((url) =>
+          assetRequestIncludesTag(url, 'checkpoints')
+        )
       )
       .toBe(true)
 

browser_tests/tests/layoutSidebarSettings.spec.ts

@@ -0,0 +1,127 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('Layout & sidebar settings', { tag: ['@settings'] }, () => {
+  test.describe('Comfy.Sidebar.Size', () => {
+    test('"small" applies small-sidebar class', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'small')
+      await expect(comfyPage.menu.sideToolbar).toContainClass('small-sidebar')
+    })
+
+    test('"normal" does not apply small-sidebar class', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+      await expect(comfyPage.menu.sideToolbar).not.toContainClass(
+        'small-sidebar'
+      )
+    })
+  })
+
+  test.describe('Comfy.Sidebar.Style', () => {
+    // `isConnected` overrides the Style setting when the toolbar overflows;
+    // small (48px) items keep content under the default viewport so Style
+    // actually drives rendering.
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'small')
+    })
+
+    test('"connected" applies connected-sidebar class', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Style', 'connected')
+      await expect(comfyPage.menu.sideToolbar).toContainClass(
+        'connected-sidebar'
+      )
+      await expect(comfyPage.menu.sideToolbar).not.toContainClass(
+        'floating-sidebar'
+      )
+    })
+
+    test('"floating" applies floating-sidebar class', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Style', 'floating')
+      await expect(comfyPage.menu.sideToolbar).toContainClass(
+        'floating-sidebar'
+      )
+      await expect(comfyPage.menu.sideToolbar).not.toContainClass(
+        'connected-sidebar'
+      )
+    })
+
+    test('"floating" + Size "normal" is overridden to connected by overflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Style', 'floating')
+      await expect(comfyPage.menu.sideToolbar).toContainClass(
+        'connected-sidebar'
+      )
+      await expect(comfyPage.menu.sideToolbar).toContainClass(
+        'overflowing-sidebar'
+      )
+    })
+
+    test('"floating" + Size "normal" renders floating in a viewport tall enough to fit', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+      await comfyPage.settings.setSetting('Comfy.Sidebar.Style', 'floating')
+      await comfyPage.page.setViewportSize({ width: 1280, height: 1500 })
+      await expect(comfyPage.menu.sideToolbar).toContainClass(
+        'floating-sidebar'
+      )
+      await expect(comfyPage.menu.sideToolbar).not.toContainClass(
+        'overflowing-sidebar'
+      )
+    })
+  })
+
+  test.describe('Comfy.UI.TabBarLayout', () => {
+    test('"Default" renders integrated tab bar actions container', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.UI.TabBarLayout', 'Default')
+      await expect(comfyPage.menu.topbar.integratedTabBarActions).toBeAttached()
+    })
+
+    test('"Legacy" does not render integrated tab bar actions container', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.UI.TabBarLayout', 'Legacy')
+      await expect(comfyPage.menu.topbar.integratedTabBarActions).toHaveCount(0)
+    })
+  })
+
+  test.describe('Comfy.TreeExplorer.ItemPadding', () => {
+    // The setting writes a CSS var consumed by .p-tree-node-content,
+    // which only renders in the legacy PrimeVue Tree.
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+      await comfyPage.menu.nodeLibraryTab.open()
+    })
+
+    test('low padding (0px) is applied to tree node content', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.TreeExplorer.ItemPadding', 0)
+      await expect(
+        comfyPage.menu.nodeLibraryTab.nodeLibraryTree
+          .locator('.p-tree-node-content')
+          .first()
+      ).toHaveCSS('padding', '0px')
+    })
+
+    test('high padding (8px) is applied to tree node content', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.TreeExplorer.ItemPadding', 8)
+      await expect(
+        comfyPage.menu.nodeLibraryTab.nodeLibraryTree
+          .locator('.p-tree-node-content')
+          .first()
+      ).toHaveCSS('padding', '8px')
+    })
+  })
+})

browser_tests/tests/load3d/load3dLod.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { load3dTest as test } from '@e2e/fixtures/helpers/Load3DFixtures'
+
+test.describe('Load3D LOD', () => {
+  test(
+    'canvas pixel dimensions scale with ComfyUI canvas zoom level',
+    { tag: '@smoke' },
+    async ({ comfyPage, load3d }) => {
+      await expect(load3d.canvas).toBeVisible()
+
+      await expect
+        .poll(() => load3d.canvas.evaluate((el: HTMLCanvasElement) => el.width))
+        .toBeGreaterThan(0)
+
+      const initialWidth = await load3d.canvas.evaluate(
+        (el: HTMLCanvasElement) => el.width
+      )
+
+      await comfyPage.page.evaluate(() => {
+        const node = window.app!.graph!.nodes[0]
+        window.app!.canvas.ds.scale = 2.0
+        node.onResize?.(node.size)
+      })
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(() => load3d.canvas.evaluate((el: HTMLCanvasElement) => el.width))
+        .toBeGreaterThan(initialWidth)
+    }
+  )
+})

browser_tests/tests/maskEditor.spec.ts

@@ -1,117 +1,13 @@
-import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
 
 test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
-  async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
-    const { x, y } = await loadImageNode.getPosition()
-
-    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
-      dropPosition: { x, y }
-    })
-
-    const imagePreview = comfyPage.page.locator('.image-preview')
-    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible()
-    await expect(imagePreview).toContainText('x')
-
-    return {
-      imagePreview,
-      nodeId: String(loadImageNode.id)
-    }
-  }
-
-  async function openMaskEditorDialog(comfyPage: ComfyPage) {
-    const { imagePreview } = await loadImageOnNode(comfyPage)
-
-    await imagePreview.getByRole('region').hover()
-    await comfyPage.page.getByLabel('Edit or mask image').click()
-
-    const dialog = comfyPage.page.locator('.mask-editor-dialog')
-    await expect(dialog).toBeVisible()
-    await expect(
-      dialog.getByRole('heading', { name: 'Mask Editor' })
-    ).toBeVisible()
-
-    const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
-    await expect(canvasContainer).toBeVisible()
-    await expect(canvasContainer.locator('canvas')).toHaveCount(4)
-
-    return dialog
-  }
-
-  async function getMaskCanvasPixelData(page: Page) {
-    return page.evaluate(() => {
-      const canvases = document.querySelectorAll(
-        '#maskEditorCanvasContainer canvas'
-      )
-      // The mask canvas is the 3rd canvas (index 2, z-30)
-      const maskCanvas = canvases[2] as HTMLCanvasElement
-      if (!maskCanvas) return null
-      const ctx = maskCanvas.getContext('2d')
-      if (!ctx) return null
-      const data = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
-      let nonTransparentPixels = 0
-      for (let i = 3; i < data.data.length; i += 4) {
-        if (data.data[i] > 0) nonTransparentPixels++
-      }
-      return { nonTransparentPixels, totalPixels: data.data.length / 4 }
-    })
-  }
-
-  function pollMaskPixelCount(page: Page): Promise<number> {
-    return getMaskCanvasPixelData(page).then(
-      (d) => d?.nonTransparentPixels ?? 0
-    )
-  }
-
-  async function drawStrokeOnPointerZone(
-    page: Page,
-    dialog: ReturnType<typeof page.locator>
-  ) {
-    const pointerZone = dialog.locator(
-      '.maskEditor-ui-container [class*="w-[calc"]'
-    )
-    await expect(pointerZone).toBeVisible()
-
-    const box = await pointerZone.boundingBox()
-    if (!box) throw new Error('Pointer zone bounding box not found')
-
-    const startX = box.x + box.width * 0.3
-    const startY = box.y + box.height * 0.5
-    const endX = box.x + box.width * 0.7
-    const endY = box.y + box.height * 0.5
-
-    await page.mouse.move(startX, startY)
-    await page.mouse.down()
-    await page.mouse.move(endX, endY, { steps: 10 })
-    await page.mouse.up()
-
-    return { startX, startY, endX, endY, box }
-  }
-
-  async function drawStrokeAndExpectPixels(
-    comfyPage: ComfyPage,
-    dialog: ReturnType<typeof comfyPage.page.locator>
-  ) {
-    await drawStrokeOnPointerZone(comfyPage.page, dialog)
-    await expect
-      .poll(() => pollMaskPixelCount(comfyPage.page))
-      .toBeGreaterThan(0)
-  }
-
   test(
     'opens mask editor from image preview button',
     { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { imagePreview } = await loadImageOnNode(comfyPage)
+    async ({ comfyPage, maskEditor }) => {
+      const { imagePreview } = await maskEditor.loadImageOnNode()
 
       // Hover over the image panel to reveal action buttons
       await imagePreview.getByRole('region').hover()
@@ -139,8 +35,8 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   test(
     'opens mask editor from context menu',
     { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { nodeId } = await loadImageOnNode(comfyPage)
+    async ({ comfyPage, maskEditor }) => {
+      const { nodeId } = await maskEditor.loadImageOnNode()
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)
@@ -166,63 +62,61 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     }
   )
 
-  test('draws a brush stroke on the mask canvas', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('draws a brush stroke on the mask canvas', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    const dataBefore = await maskEditor.getCanvasPixelData(2)
     expect(dataBefore).not.toBeNull()
     expect(dataBefore!.nonTransparentPixels).toBe(0)
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
   })
 
-  test('undo reverts a brush stroke', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('undo reverts a brush stroke', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
 
     const undoButton = dialog.locator('button[title="Undo"]')
     await expect(undoButton).toBeVisible()
     await undoButton.click()
 
-    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+    await expect.poll(() => maskEditor.pollMaskPixelCount()).toBe(0)
   })
 
-  test('redo restores an undone stroke', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('redo restores an undone stroke', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
 
     const undoButton = dialog.locator('button[title="Undo"]')
     await undoButton.click()
 
-    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+    await expect.poll(() => maskEditor.pollMaskPixelCount()).toBe(0)
 
     const redoButton = dialog.locator('button[title="Redo"]')
     await expect(redoButton).toBeVisible()
     await redoButton.click()
 
-    await expect
-      .poll(() => pollMaskPixelCount(comfyPage.page))
-      .toBeGreaterThan(0)
+    await expect.poll(() => maskEditor.pollMaskPixelCount()).toBeGreaterThan(0)
   })
 
-  test('clear button removes all mask content', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('clear button removes all mask content', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
 
     const clearButton = dialog.getByRole('button', { name: 'Clear' })
     await expect(clearButton).toBeVisible()
     await clearButton.click()
 
-    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+    await expect.poll(() => maskEditor.pollMaskPixelCount()).toBe(0)
   })
 
-  test('cancel closes the dialog without saving', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('cancel closes the dialog without saving', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
 
     const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
     await cancelButton.click()
@@ -230,10 +124,10 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     await expect(dialog).toBeHidden()
   })
 
-  test('invert button inverts the mask', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('invert button inverts the mask', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
-    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    const dataBefore = await maskEditor.getCanvasPixelData(2)
     expect(dataBefore).not.toBeNull()
     const pixelsBefore = dataBefore!.nonTransparentPixels
 
@@ -242,26 +136,29 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     await invertButton.click()
 
     await expect
-      .poll(() => pollMaskPixelCount(comfyPage.page))
+      .poll(() => maskEditor.pollMaskPixelCount())
       .toBeGreaterThan(pixelsBefore)
   })
 
-  test('keyboard shortcut Ctrl+Z triggers undo', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('keyboard shortcut Ctrl+Z triggers undo', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
 
-    await drawStrokeAndExpectPixels(comfyPage, dialog)
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
 
     const modifier = process.platform === 'darwin' ? 'Meta+z' : 'Control+z'
     await comfyPage.page.keyboard.press(modifier)
 
-    await expect.poll(() => pollMaskPixelCount(comfyPage.page)).toBe(0)
+    await expect.poll(() => maskEditor.pollMaskPixelCount()).toBe(0)
   })
 
   test(
     'tool panel shows all five tools',
     { tag: ['@smoke'] },
-    async ({ comfyPage }) => {
-      const dialog = await openMaskEditorDialog(comfyPage)
+    async ({ maskEditor }) => {
+      const dialog = await maskEditor.openDialog()
 
       const toolPanel = dialog.locator('.maskEditor-ui-container')
       await expect(toolPanel).toBeVisible()
@@ -279,9 +176,9 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   )
 
   test('switching tools updates the selected indicator', async ({
-    comfyPage
+    maskEditor
   }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+    const dialog = await maskEditor.openDialog()
 
     const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
     await expect(toolEntries).toHaveCount(5)
@@ -300,9 +197,9 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   })
 
   test('brush settings panel is visible with thickness controls', async ({
-    comfyPage
+    maskEditor
   }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+    const dialog = await maskEditor.openDialog()
 
     // The side panel should show brush settings by default
     const thicknessLabel = dialog.getByText('Thickness')
@@ -315,8 +212,11 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     await expect(hardnessLabel).toBeVisible()
   })
 
-  test('save uploads all layers and closes dialog', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('save uploads all layers and closes dialog', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
 
     let maskUploadCount = 0
     let imageUploadCount = 0
@@ -359,8 +259,8 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     ).toBeGreaterThan(0)
   })
 
-  test('save failure keeps dialog open', async ({ comfyPage }) => {
-    const dialog = await openMaskEditorDialog(comfyPage)
+  test('save failure keeps dialog open', async ({ comfyPage, maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
 
     // Fail all upload routes
     await comfyPage.page.route('**/upload/mask', (route) =>
@@ -380,23 +280,23 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   test(
     'eraser tool removes mask content',
     { tag: ['@screenshot'] },
-    async ({ comfyPage }) => {
-      const dialog = await openMaskEditorDialog(comfyPage)
+    async ({ maskEditor }) => {
+      const dialog = await maskEditor.openDialog()
 
       // Draw a stroke with the mask pen (default tool)
-      await drawStrokeAndExpectPixels(comfyPage, dialog)
+      await maskEditor.drawStrokeAndExpectPixels(dialog)
 
-      const pixelsAfterDraw = await getMaskCanvasPixelData(comfyPage.page)
+      const pixelsAfterDraw = await maskEditor.getCanvasPixelData(2)
 
       // Switch to eraser tool (3rd tool, index 2)
       const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
       await toolEntries.nth(2).click()
 
       // Draw over the same area with the eraser
-      await drawStrokeOnPointerZone(comfyPage.page, dialog)
+      await maskEditor.drawStrokeOnPointerZone(dialog)
 
       await expect
-        .poll(() => pollMaskPixelCount(comfyPage.page))
+        .poll(() => maskEditor.pollMaskPixelCount())
         .toBeLessThan(pixelsAfterDraw!.nonTransparentPixels)
     }
   )

browser_tests/tests/maskEditorBrushLayers.spec.ts

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test'
+
+import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
+
+const RGB_PAINT_TOOL_INDEX = 1 // RGB / color paint tool
+const ERASER_TOOL_INDEX = 2 // Eraser tool
+
+test.describe(
+  'Mask Editor brush adjustment and layer management',
+  { tag: '@vue-nodes' },
+  () => {
+    test.describe('Brush settings interaction', () => {
+      test('Adjusting brush thickness slider changes stroke output', async ({
+        comfyPage,
+        maskEditor
+      }) => {
+        const dialog = await maskEditor.openDialog()
+        const thicknessInput = maskEditor.brushInput(dialog, 'thickness')
+
+        // Thin brush
+        await thicknessInput.fill('2')
+        await expect(thicknessInput).toHaveValue('2')
+
+        await maskEditor.drawStrokeOnPointerZone(dialog)
+        await expect
+          .poll(() => maskEditor.pollMaskPixelCount())
+          .toBeGreaterThan(0)
+        const thinPixels = await maskEditor.pollMaskPixelCount()
+
+        await comfyPage.page.keyboard.press('Control+z')
+        await expect.poll(() => maskEditor.pollMaskPixelCount()).toBe(0)
+
+        // Thick brush
+        await thicknessInput.fill('200')
+        await expect(thicknessInput).toHaveValue('200')
+
+        await maskEditor.drawStrokeOnPointerZone(dialog)
+        await expect
+          .poll(() => maskEditor.pollMaskPixelCount())
+          .toBeGreaterThan(thinPixels)
+      })
+    })
+
+    test.describe('Layer management', () => {
+      test('Drawing on different tools produces independent mask data', async ({
+        maskEditor
+      }) => {
+        const dialog = await maskEditor.openDialog()
+
+        await maskEditor.drawStrokeOnPointerZone(dialog)
+        await expect
+          .poll(() => maskEditor.pollMaskPixelCount())
+          .toBeGreaterThan(0)
+        const maskSnapshotAfterPen = await maskEditor.getCanvasSnapshot(2)
+
+        const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+        await expect(toolEntries).toHaveCount(5)
+        await toolEntries.nth(RGB_PAINT_TOOL_INDEX).click()
+        await expect(toolEntries.nth(RGB_PAINT_TOOL_INDEX)).toHaveClass(
+          /Selected/
+        )
+
+        await maskEditor.drawStrokeOnPointerZone(dialog)
+        await expect
+          .poll(() => maskEditor.pollRgbPixelCount())
+          .toBeGreaterThan(0)
+
+        await expect
+          .poll(() => maskEditor.getCanvasSnapshot(2))
+          .toBe(maskSnapshotAfterPen)
+      })
+
+      test("Switching between tools preserves previous tool's mask data", async ({
+        maskEditor
+      }) => {
+        const dialog = await maskEditor.openDialog()
+
+        await maskEditor.drawStrokeOnPointerZone(dialog)
+        await expect
+          .poll(() => maskEditor.pollMaskPixelCount())
+          .toBeGreaterThan(0)
+
+        const maskSnapshot = await maskEditor.getCanvasSnapshot(2)
+
+        const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+        await expect(toolEntries).toHaveCount(5)
+
+        await toolEntries.nth(ERASER_TOOL_INDEX).click()
+        await expect(toolEntries.nth(ERASER_TOOL_INDEX)).toHaveClass(/Selected/)
+
+        await toolEntries.nth(0).click()
+        await expect(toolEntries.nth(0)).toHaveClass(/Selected/)
+
+        await expect
+          .poll(() => maskEditor.getCanvasSnapshot(2))
+          .toBe(maskSnapshot)
+      })
+    })
+  }
+)

browser_tests/tests/nodeReplacement.spec.ts

@@ -0,0 +1,168 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import {
+  mockNodeReplacements,
+  mockNodeReplacementsSingle
+} from '@e2e/fixtures/data/nodeReplacements'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
+import {
+  getSwapNodesGroup,
+  setupNodeReplacement
+} from '@e2e/fixtures/helpers/NodeReplacementHelper'
+
+const renderModes = [
+  { name: 'vue nodes', vueNodesEnabled: true },
+  { name: 'litegraph', vueNodesEnabled: false }
+] as const
+
+test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
+  for (const mode of renderModes) {
+    test.describe(`(${mode.name})`, () => {
+      test.describe('Single replacement', () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.settings.setSetting(
+            'Comfy.VueNodes.Enabled',
+            mode.vueNodesEnabled
+          )
+          await setupNodeReplacement(comfyPage, mockNodeReplacementsSingle)
+          await loadWorkflowAndOpenErrorsTab(
+            comfyPage,
+            'missing/node_replacement_simple'
+          )
+        })
+
+        test('Swap Nodes group appears in errors tab for replaceable nodes', async ({
+          comfyPage
+        }) => {
+          const swapGroup = getSwapNodesGroup(comfyPage.page)
+          await expect(swapGroup).toBeVisible()
+          await expect(swapGroup).toContainText('E2E_OldSampler')
+          await expect(
+            swapGroup.getByRole('button', { name: 'Replace All', exact: true })
+          ).toBeVisible()
+        })
+
+        test('Replace Node replaces a single group in-place', async ({
+          comfyPage
+        }) => {
+          const swapGroup = getSwapNodesGroup(comfyPage.page)
+          await swapGroup.getByRole('button', { name: /replace node/i }).click()
+          await expect(swapGroup).toBeHidden()
+
+          const workflow = await comfyPage.workflow.getExportedWorkflow()
+          expect(
+            workflow.nodes,
+            'Node count should be unchanged after in-place replacement'
+          ).toHaveLength(2)
+
+          const nodeTypes = workflow.nodes.map((n) => n.type)
+          expect(nodeTypes).not.toContain('E2E_OldSampler')
+          expect(nodeTypes).toContain('KSampler')
+
+          const ksampler = workflow.nodes.find((n) => n.type === 'KSampler')
+          expect(
+            ksampler?.id,
+            'Replaced node should keep the original id'
+          ).toBe(1)
+
+          const linkFromReplacedToDecode = workflow.links?.find(
+            (l) => l[1] === 1 && l[3] === 2
+          )
+          expect(
+            linkFromReplacedToDecode,
+            'Output link from replaced node to VAEDecode should be preserved'
+          ).toBeDefined()
+        })
+
+        test('Widget values are preserved after replacement', async ({
+          comfyPage
+        }) => {
+          await getSwapNodesGroup(comfyPage.page)
+            .getByRole('button', { name: /replace node/i })
+            .click()
+
+          const workflow = await comfyPage.workflow.getExportedWorkflow()
+          const ksampler = workflow.nodes.find((n) => n.type === 'KSampler')
+
+          expect(ksampler?.widgets_values).toBeDefined()
+          const widgetValues = ksampler!.widgets_values as unknown[]
+          expect(widgetValues).toEqual([
+            42,
+            'randomize',
+            20,
+            7,
+            'euler',
+            'normal',
+            1
+          ])
+        })
+
+        test('Success toast is shown after replacement', async ({
+          comfyPage
+        }) => {
+          await getSwapNodesGroup(comfyPage.page)
+            .getByRole('button', { name: /replace node/i })
+            .click()
+
+          await expect(comfyPage.visibleToasts.first()).toContainText(
+            /replaced|swapped/i
+          )
+        })
+      })
+
+      test.describe('Multi-type replacement', () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.settings.setSetting(
+            'Comfy.VueNodes.Enabled',
+            mode.vueNodesEnabled
+          )
+          await setupNodeReplacement(comfyPage, mockNodeReplacements)
+          await loadWorkflowAndOpenErrorsTab(
+            comfyPage,
+            'missing/node_replacement_multi'
+          )
+        })
+
+        test('Replace All replaces all groups across multiple types', async ({
+          comfyPage
+        }) => {
+          const swapGroup = getSwapNodesGroup(comfyPage.page)
+          await expect(swapGroup).toBeVisible()
+          await expect(swapGroup).toContainText('E2E_OldSampler')
+          await expect(swapGroup).toContainText('E2E_OldUpscaler')
+
+          await swapGroup
+            .getByRole('button', { name: 'Replace All', exact: true })
+            .click()
+          await expect(swapGroup).toBeHidden()
+
+          const workflow = await comfyPage.workflow.getExportedWorkflow()
+          const nodeTypes = workflow.nodes.map((n) => n.type)
+          expect(nodeTypes).not.toContain('E2E_OldSampler')
+          expect(nodeTypes).not.toContain('E2E_OldUpscaler')
+          expect(nodeTypes).toContain('KSampler')
+          expect(nodeTypes).toContain('ImageScaleBy')
+        })
+
+        test('Output connections are preserved across replacement with output mapping', async ({
+          comfyPage
+        }) => {
+          await getSwapNodesGroup(comfyPage.page)
+            .getByRole('button', { name: 'Replace All', exact: true })
+            .click()
+
+          const replacedNodeOutputLinkCount = await comfyPage.page.evaluate(
+            () =>
+              window.app!.graph!.getNodeById(2)?.outputs[0]?.links?.length ?? 0
+          )
+          expect(
+            replacedNodeOutputLinkCount,
+            'Replaced upscaler should still drive its downstream consumer'
+          ).toBeGreaterThan(0)
+        })
+      })
+    })
+  }
+})

browser_tests/tests/propertiesPanel/contextMenuNodeInfo.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+test.describe(
+  'Properties panel - Node Info via context menu',
+  { tag: '@vue-nodes' },
+  () => {
+    let panel: PropertiesPanelHelper
+
+    test.beforeEach(async ({ comfyPage }) => {
+      panel = new PropertiesPanelHelper(comfyPage.page)
+    })
+
+    test('opens the right side panel Info tab when clicked from the node context menu', async ({
+      comfyPage
+    }) => {
+      await expect(panel.root).toBeHidden()
+
+      const fixture = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+      await comfyPage.contextMenu.openForVueNode(fixture.header)
+      await comfyPage.contextMenu.clickMenuItemExact('Node Info')
+
+      await expect(panel.root).toBeVisible()
+      await expect(panel.getTab('Info')).toBeVisible()
+      await expect(
+        panel.contentArea.getByRole('heading', { name: 'Inputs' })
+      ).toBeVisible()
+    })
+  }
+)

browser_tests/tests/propertiesPanel/errorsTabCloudMissingModels.spec.ts

@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test'
+
+import type { Asset } from '@comfyorg/ingest-types'
+import {
+  countAssetRequestsByTag,
+  createCloudAssetsFixture
+} from '@e2e/fixtures/assetApiFixture'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+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 = {
+  id: 'test-lotus-depth-d-v1-1',
+  name: LOTUS_MODEL_NAME,
+  asset_hash:
+    'blake3:0000000000000000000000000000000000000000000000000000000000000203',
+  size: 1_024,
+  mime_type: 'application/octet-stream',
+  tags: ['models', 'diffusion_models'],
+  created_at: '2026-05-05T00:00:00Z',
+  updated_at: '2026-05-05T00:00:00Z',
+  last_access_time: '2026-05-05T00:00:00Z',
+  user_metadata: {
+    filename: LOTUS_MODEL_NAME
+  }
+}
+
+const test = createCloudAssetsFixture([LOTUS_DIFFUSION_MODEL])
+
+test.describe(
+  'Errors tab - Cloud missing models',
+  { tag: ['@cloud', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.RightSidePanel.ShowErrorsTab',
+        true
+      )
+    })
+
+    test('keeps installed models resolved after returning from a nested subgraph', async ({
+      cloudAssetRequests,
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      const panel = new PropertiesPanelHelper(comfyPage.page)
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      const errorsTab = panel.root.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+
+      await expect
+        .poll(
+          () => countAssetRequestsByTag(cloudAssetRequests, 'diffusion_models'),
+          { timeout: 10_000 }
+        )
+        .toBeGreaterThan(0)
+      await expect(errorOverlay).toBeHidden()
+      await panel.open(comfyPage.actionbar.propertiesButton)
+      await expect(errorsTab).toBeHidden()
+      await panel.close()
+
+      await comfyPage.vueNodes.enterSubgraph(OUTER_SUBGRAPH_NODE_ID)
+      await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+      await expect(errorOverlay).toBeHidden()
+
+      const requestCountBeforeRootReturn = countAssetRequestsByTag(
+        cloudAssetRequests,
+        'diffusion_models'
+      )
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await panel.open(comfyPage.actionbar.propertiesButton)
+
+      await expect
+        .poll(
+          () =>
+            countAssetRequestsByTag(cloudAssetRequests, 'diffusion_models') >
+            requestCountBeforeRootReturn,
+          { timeout: 10_000 }
+        )
+        .toBe(true)
+
+      await expect(errorsTab).toBeHidden()
+    })
+  }
+)

browser_tests/tests/queue/queueOverlay.spec.ts

@@ -1,13 +1,19 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
 
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
+import {
+  createMockJob,
+  createMockJobRecords
+} from '@e2e/fixtures/utils/jobFixtures'
 import { TestIds } from '@e2e/fixtures/selectors'
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+
+const test = mergeTests(comfyPageFixture, jobsApiMockFixture)
 
 const now = Date.now()
 
-const MOCK_JOBS: RawJobListItem[] = [
+const MOCK_JOBS: JobEntry[] = [
   createMockJob({
     id: 'job-completed-1',
     status: 'completed',
@@ -31,20 +37,25 @@ const MOCK_JOBS: RawJobListItem[] = [
     execution_start_time: now - 30_000,
     execution_end_time: now - 28_000,
     outputs_count: 0
+  }),
+  createMockJob({
+    id: 'job-failed-bottom',
+    status: 'failed',
+    create_time: now - 180_000,
+    execution_start_time: now - 180_000,
+    execution_end_time: now - 178_000,
+    outputs_count: 0
   })
 ]
 
 test.describe('Queue overlay', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(MOCK_JOBS)
+  test.beforeEach(async ({ comfyPage, jobsApi }) => {
+    await jobsApi.mockJobs(createMockJobRecords(MOCK_JOBS))
+    await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
     await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', false)
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Toggle button opens expanded queue overlay', async ({ comfyPage }) => {
     const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
     await toggle.click()
@@ -106,4 +117,64 @@ test.describe('Queue overlay', () => {
 
     await expect(comfyPage.page.locator('[data-job-id]').first()).toBeHidden()
   })
+
+  test('Job details popover stays inside the viewport for bottom rows', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.setViewportSize({ width: 1280, height: 420 })
+
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
+
+    const bottomJob = comfyPage.page.locator(
+      '[data-job-id="job-failed-bottom"]'
+    )
+    await expect(bottomJob).toBeVisible()
+    await bottomJob.scrollIntoViewIfNeeded()
+    await expect(bottomJob).toBeVisible()
+
+    const viewportSize = comfyPage.page.viewportSize()
+    if (!viewportSize) throw new Error('Viewport must be available')
+
+    const rowBox = await bottomJob.boundingBox()
+    if (!rowBox) throw new Error('Bottom job row should be measurable')
+    expect(
+      rowBox.y + rowBox.height,
+      'Test row should be low enough to exercise bottom-edge collision handling'
+    ).toBeGreaterThan(viewportSize.height * 0.55)
+    await expect
+      .poll(async () =>
+        bottomJob.evaluate((element) => {
+          const rect = element.getBoundingClientRect()
+          const hitTarget = document.elementFromPoint(
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2
+          )
+          return hitTarget ? element.contains(hitTarget) : false
+        })
+      )
+      .toBe(true)
+
+    await comfyPage.page.mouse.move(0, 0)
+    await comfyPage.page.mouse.move(
+      rowBox.x + rowBox.width / 2,
+      rowBox.y + rowBox.height / 2,
+      { steps: 5 }
+    )
+
+    const popover = comfyPage.page.getByTestId(TestIds.queue.jobDetailsPopover)
+    await expect(popover).toBeVisible()
+
+    await expect
+      .poll(async () => {
+        const popoverBox = await popover.boundingBox()
+        if (!popoverBox) return false
+
+        return (
+          popoverBox.y >= 0 &&
+          popoverBox.y + popoverBox.height <= viewportSize.height
+        )
+      })
+      .toBe(true)
+  })
 })

browser_tests/tests/queue/queueSettings.spec.ts

@@ -15,6 +15,7 @@ import { webSocketFixture } from '@e2e/fixtures/ws'
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 const TOTAL_MOCK_JOBS = 20
+const MAX_HISTORY_ITEMS_SETTING = 'Comfy.Queue.MaxHistoryItems'
 const overflowJobsListRoutePattern = '**/api/jobs?*'
 
 function isHistoryJobsRequest(url: string): boolean {
@@ -59,7 +60,7 @@ test.describe('Queue settings', { tag: '@canvas' }, () => {
       }) => {
         const TARGET_LIMIT = 6
         await comfyPage.settings.setSetting(
-          'Comfy.Queue.MaxHistoryItems',
+          MAX_HISTORY_ITEMS_SETTING,
           TARGET_LIMIT
         )
 
@@ -106,7 +107,7 @@ test.describe('Queue settings', { tag: '@canvas' }, () => {
 
       const VISIBLE_LIMIT = 6
       await comfyPage.settings.setSetting(
-        'Comfy.Queue.MaxHistoryItems',
+        MAX_HISTORY_ITEMS_SETTING,
         VISIBLE_LIMIT
       )
       const exec = new ExecutionHelper(comfyPage, await getWebSocket())

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -535,6 +535,28 @@ test.describe(
           .poll(() => getPromotedWidgetCount(comfyPage, '11'))
           .toBeLessThan(initialWidgetCount)
       })
+
+      test('Does not cleanup unconfigured Primitive', async ({ comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-link-and-proxied-primitive'
+        )
+        await expect
+          .poll(
+            () => getPromotedWidgetCount(comfyPage, '2'),
+            'Primitive widget is restored on load'
+          )
+          .toBe(2)
+
+        await comfyPage.page.evaluate(() => app!.canvas.setDirty(true))
+        const subgraphNode = await comfyPage.nodeOps.getFirstNodeRef()
+        const promotedPrimitive = await subgraphNode!.getWidget(1)
+        await expect
+          .poll(
+            () => promotedPrimitive.getValue(),
+            'Primitive widget is not in a disconnected state'
+          )
+          .toBe(0)
+      })
     })
   }
 )

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -125,6 +125,48 @@ test.describe('Workflow tabs', () => {
     await expect(activeTab.locator('text=•')).toBeVisible()
   })
 
+  test('Can drag tab to end', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
+    const [a, b, c] = await topbar.getTabNames()
+
+    await topbar.getTab(0).dragTo(topbar.getTab(2))
+
+    await expect.poll(() => topbar.getTabNames()).toEqual([b, c, a])
+  })
+
+  test('Can drag tab to start', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
+    const [a, b, c] = await topbar.getTabNames()
+
+    await topbar.getTab(2).dragTo(topbar.getTab(0))
+
+    await expect.poll(() => topbar.getTabNames()).toEqual([c, a, b])
+  })
+
+  test('Drag preserves active tab', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+
+    await topbar.newWorkflowButton.click()
+    await topbar.newWorkflowButton.click()
+    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
+
+    const [, b] = await topbar.getTabNames()
+    await topbar.getTab(1).click()
+    await expect.poll(() => topbar.getActiveTabName()).toContain(b)
+
+    await topbar.getTab(0).dragTo(topbar.getTab(2))
+
+    await expect.poll(() => topbar.getActiveTabName()).toContain(b)
+  })
+
   test('Multiple tabs can be created, switched, and closed', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -13,6 +13,7 @@ import {
   ExecutionHelper,
   buildKSamplerError
 } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
@@ -20,6 +21,7 @@ const test = mergeTests(comfyPageFixture, webSocketFixture)
 const ERROR_CLASS = /ring-destructive-background/
 const UNKNOWN_NODE_ID = '1'
 const INNER_EXECUTION_ID = '2:1'
+const KSAMPLER_MODEL_INPUT_NAME = 'model'
 
 test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   test('should display error state when node is missing (node from workflow is not installed)', async ({
@@ -71,6 +73,59 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
       ).toHaveClass(ERROR_CLASS)
     })
 
+    test(
+      'highlights the missing required input slot',
+      { tag: ['@screenshot', '@node'] },
+      async ({ comfyPage }) => {
+        const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
+        const ksamplerNode = comfyPage.vueNodes.getNodeLocator(ksamplerId)
+        const modelInputIndex = await comfyPage.page.evaluate(
+          ({ nodeId, inputName }) => {
+            const node = window.app!.graph.getNodeById(nodeId)
+            const index =
+              node?.inputs?.findIndex((input) => input.name === inputName) ?? -1
+            if (index < 0) {
+              throw new Error(`Input slot "${inputName}" not found`)
+            }
+            return index
+          },
+          { nodeId: ksamplerId, inputName: KSAMPLER_MODEL_INPUT_NAME }
+        )
+        const modelInputSlotRow = comfyPage.vueNodes.getInputSlotRow(
+          ksamplerId,
+          modelInputIndex
+        )
+        const modelInputSlotHighlight =
+          comfyPage.vueNodes.getInputSlotConnectionDot(
+            ksamplerId,
+            modelInputIndex
+          )
+        const exec = new ExecutionHelper(comfyPage)
+        await exec.mockValidationFailure({
+          [ksamplerId]: buildKSamplerError(
+            'required_input_missing',
+            KSAMPLER_MODEL_INPUT_NAME,
+            `Required input is missing: ${KSAMPLER_MODEL_INPUT_NAME}`
+          )
+        })
+
+        await comfyPage.runButton.click()
+        await dismissErrorOverlay(comfyPage)
+        await fitToViewInstant(comfyPage)
+
+        await expect(modelInputSlotRow).toBeVisible()
+        await expect(modelInputSlotRow).toBeInViewport()
+        await expect(modelInputSlotHighlight).toHaveClass(/before:ring-error/)
+        await expect(
+          comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
+        ).toHaveClass(ERROR_CLASS)
+        await comfyPage.expectScreenshot(
+          ksamplerNode,
+          'vue-node-required-input-missing-slot-error.png'
+        )
+      }
+    )
+
     test('clears error ring when user edits an out-of-range number widget back into range', async ({
       comfyPage
     }) => {

browser_tests/tests/workflowDeleteSettings.spec.ts

@@ -0,0 +1,49 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+const WORKFLOW_NAME = 'test-confirm-delete'
+
+async function startDeletingFromSidebar(comfyPage: ComfyPage) {
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(WORKFLOW_NAME).click({ button: 'right' })
+  await comfyPage.contextMenu.clickMenuItem('Delete')
+}
+
+test.describe('Comfy.Workflow.ConfirmDelete', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.menu.topbar.saveWorkflowAs(WORKFLOW_NAME)
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.workflow.setupWorkflowsDirectory({})
+  })
+
+  test('on (default): right-click → Delete prompts the confirm dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.Workflow.ConfirmDelete', true)
+
+    await startDeletingFromSidebar(comfyPage)
+
+    await expect(comfyPage.confirmDialog.root).toBeVisible()
+    await expect(comfyPage.confirmDialog.delete).toBeVisible()
+  })
+
+  test('off: right-click → Delete bypasses the confirm dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.Workflow.ConfirmDelete', false)
+
+    await startDeletingFromSidebar(comfyPage)
+
+    const { workflowsTab } = comfyPage.menu
+    await expect(comfyPage.confirmDialog.root).toBeHidden()
+    await expect
+      .poll(() => workflowsTab.getTopLevelSavedWorkflowNames())
+      .not.toContain(WORKFLOW_NAME)
+  })
+})

docs/testing/unit-testing.md

@@ -147,7 +147,7 @@ it('should subscribe to logs API', () => {
 })
 ```
 
-## Mocking Lodash Functions
+## Mocking Utility Functions
 
 Mocking utility functions like debounce:
 

eslint.config.ts

@@ -36,6 +36,7 @@ const settings = {
       alwaysTryTypes: true,
       project: [
         './tsconfig.json',
+        './browser_tests/tsconfig.json',
         './apps/*/tsconfig.json',
         './packages/*/tsconfig.json'
       ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.44.15",
+  "version": "1.44.17",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

packages/ingest-types/src/index.ts

@@ -29,6 +29,17 @@ export type {
   BillingStatus,
   BillingStatusResponse,
   BindingErrorResponse,
+  BulkRevokeApiKeysResponse,
+  BulkRevokeWorkspaceMemberApiKeysData,
+  BulkRevokeWorkspaceMemberApiKeysError,
+  BulkRevokeWorkspaceMemberApiKeysErrors,
+  BulkRevokeWorkspaceMemberApiKeysResponse,
+  BulkRevokeWorkspaceMemberApiKeysResponses,
+  CancelJobData,
+  CancelJobError,
+  CancelJobErrors,
+  CancelJobResponse,
+  CancelJobResponses,
   CancelSubscriptionData,
   CancelSubscriptionError,
   CancelSubscriptionErrors,
@@ -307,6 +318,28 @@ export type {
   GetJwksData,
   GetJwksResponse,
   GetJwksResponses,
+  GetLegacyAssetContentData,
+  GetLegacyAssetContentErrors,
+  GetLegacyHistoryByIdData,
+  GetLegacyHistoryByIdErrors,
+  GetLegacyHistoryData,
+  GetLegacyHistoryErrors,
+  GetLegacyJobByIdData,
+  GetLegacyJobByIdErrors,
+  GetLegacyJobOutputsData,
+  GetLegacyJobOutputsErrors,
+  GetLegacyModelsByFolderData,
+  GetLegacyModelsByFolderErrors,
+  GetLegacyModelsData,
+  GetLegacyModelsErrors,
+  GetLegacyObjectInfoByNodeClassData,
+  GetLegacyObjectInfoByNodeClassErrors,
+  GetLegacyPromptByIdData,
+  GetLegacyPromptByIdErrors,
+  GetLegacyUserdataV2Data,
+  GetLegacyUserdataV2Errors,
+  GetLegacyViewMetadataData,
+  GetLegacyViewMetadataErrors,
   GetLogsData,
   GetLogsError,
   GetLogsErrors,
@@ -505,6 +538,7 @@ export type {
   InterruptJobError,
   InterruptJobErrors,
   InterruptJobResponses,
+  JobCancelResponse,
   JobDetailResponse,
   JobEntry,
   JobsListResponse,
@@ -719,6 +753,13 @@ export type {
   SubscribeResponses,
   SubscriptionDuration,
   SubscriptionTier,
+  SyncApiKeyData,
+  SyncApiKeyError,
+  SyncApiKeyErrors,
+  SyncApiKeyRequest,
+  SyncApiKeyResponse,
+  SyncApiKeyResponse2,
+  SyncApiKeyResponses,
   SystemStatsResponse,
   TagInfo,
   TagsModificationResponse,

packages/registry-types/src/comfyRegistryTypes.ts

@@ -2524,6 +2524,46 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/luma_2/generations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Create a Luma Agents generation
+         * @description Submit an image generation or edit job. Returns immediately with an opaque job ID to poll via GET /proxy/luma_2/generations/{id}.
+         */
+        post: operations["lumaAgentsCreateGeneration"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/luma_2/generations/{generation_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get a Luma Agents generation
+         * @description Poll for generation status and output. On completion, the response includes presigned URLs to download the generated images.
+         */
+        get: operations["lumaAgentsGetGeneration"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/pixverse/video/text/generate": {
         parameters: {
             query?: never;
@@ -10381,6 +10421,88 @@ export interface components {
             /** @description The request of the generation */
             request?: components["schemas"]["LumaGenerationRequest"] | components["schemas"]["LumaImageGenerationRequest"] | components["schemas"]["LumaUpscaleVideoGenerationRequest"] | components["schemas"]["LumaAudioGenerationRequest"];
         };
+        /**
+         * @description Output aspect ratio
+         * @enum {string}
+         */
+        LumaAgentsAspectRatio: "3:1" | "2:1" | "16:9" | "3:2" | "1:1" | "2:3" | "9:16" | "1:2" | "1:3";
+        /**
+         * @description Style preset
+         * @enum {string}
+         */
+        LumaAgentsStyle: "auto" | "manga";
+        /**
+         * @description Output image format
+         * @enum {string}
+         */
+        LumaAgentsOutputFormat: "png" | "jpeg";
+        /**
+         * @description The kind of generation to perform
+         * @enum {string}
+         */
+        LumaAgentsGenerationType: "image" | "image_edit";
+        /**
+         * @description Current state of the generation
+         * @enum {string}
+         */
+        LumaAgentsState: "queued" | "processing" | "completed" | "failed";
+        /**
+         * @description Machine-readable failure code for programmatic handling
+         * @enum {string}
+         */
+        LumaAgentsFailureCode: "content_moderated" | "generation_failed" | "budget_exhausted" | "output_not_found";
+        /** @description Reference image for style/content guidance or guided generation */
+        LumaAgentsImageRef: {
+            /** @description Base64-encoded image data */
+            data?: string;
+            /** @description MIME type (e.g. image/jpeg). Required with data. */
+            media_type?: string;
+            /** @description Publicly accessible image URL */
+            url?: string;
+        };
+        /** @description The Luma Agents generation request object */
+        LumaAgentsGenerationRequest: {
+            /** @description Text prompt */
+            prompt: string;
+            aspect_ratio?: components["schemas"]["LumaAgentsAspectRatio"];
+            /** @description Reference images for style/content guidance. Up to 9 for type 'image', up to 8 for type 'image_edit'. */
+            image_ref?: components["schemas"]["LumaAgentsImageRef"][];
+            /** @description Model to use */
+            model?: string;
+            output_format?: components["schemas"]["LumaAgentsOutputFormat"];
+            source?: components["schemas"]["LumaAgentsImageRef"];
+            style?: components["schemas"]["LumaAgentsStyle"];
+            type?: components["schemas"]["LumaAgentsGenerationType"];
+            /** @description Enable web search grounding */
+            web_search?: boolean;
+        };
+        /** @description A generated output entry */
+        LumaAgentsGenerationOutput: {
+            /** @description Media type (e.g. image) */
+            type?: string;
+            /** @description Presigned URL (1hr expiry) */
+            url?: string;
+        };
+        /** @description Generation status and output */
+        LumaAgentsGeneration: {
+            /** @description Generation identifier */
+            id?: string;
+            /** @description Creation timestamp */
+            created_at?: string;
+            /** @description Model used */
+            model?: string;
+            state?: components["schemas"]["LumaAgentsState"];
+            type?: components["schemas"]["LumaAgentsGenerationType"];
+            failure_code?: components["schemas"]["LumaAgentsFailureCode"];
+            /** @description Human-readable failure description */
+            failure_reason?: string;
+            output?: components["schemas"]["LumaAgentsGenerationOutput"][];
+        };
+        /** @description The error object */
+        LumaAgentsError: {
+            /** @description The error message */
+            detail?: string;
+        };
         PixverseTextVideoRequest: {
             /** @enum {string} */
             aspect_ratio: "16:9" | "4:3" | "1:1" | "3:4" | "9:16";
@@ -12453,12 +12575,16 @@ export interface components {
         Rodin3DGenerateRequest: {
             /** @description The reference images to generate 3D Assets. */
             images: string;
+            /** @description Text prompt used by the upstream Rodin API. Required by upstream for text-to-3D requests (no images uploaded); optional for image-to-3D requests where it acts as additional guidance. */
+            prompt?: string;
             /** @description Seed. */
             seed?: number;
             tier?: components["schemas"]["RodinTierType"];
             material?: components["schemas"]["RodinMaterialType"];
             quality?: components["schemas"]["RodinQualityType"];
             mesh_mode?: components["schemas"]["RodinMeshModeType"];
+            /** @description Optional list of upstream addon flags (e.g. "HighPack"). */
+            addons?: string[];
         };
         /**
          * @description Rodin Tier para options
@@ -26183,6 +26309,72 @@ export interface operations {
             };
         };
     };
+    lumaAgentsCreateGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description The generation request object */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["LumaAgentsGenerationRequest"];
+            };
+        };
+        responses: {
+            /** @description Generation accepted */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaAgentsGeneration"];
+                };
+            };
+            /** @description Error */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaAgentsError"];
+                };
+            };
+        };
+    };
+    lumaAgentsGetGeneration: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description The ID of the generation */
+                generation_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Generation found */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaAgentsGeneration"];
+                };
+            };
+            /** @description Error */
+            default: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LumaAgentsError"];
+                };
+            };
+        };
+    };
     PixverseGenerateTextVideo: {
         parameters: {
             query?: never;

pnpm-lock.yaml

@@ -160,8 +160,8 @@ catalogs:
       specifier: ^7.7.0
       version: 7.7.0
     '@types/three':
-      specifier: ^0.169.0
-      version: 0.169.0
+      specifier: ^0.170.0
+      version: 0.170.0
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
@@ -339,6 +339,9 @@ catalogs:
     tailwindcss-primeui:
       specifier: ^0.6.1
       version: 0.6.1
+    three:
+      specifier: ^0.170.0
+      version: 0.170.0
     tsx:
       specifier: ^4.15.6
       version: 4.19.4
@@ -698,7 +701,7 @@ importers:
         version: 7.7.0
       '@types/three':
         specifier: 'catalog:'
-        version: 0.169.0
+        version: 0.170.0
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
         version: 6.0.3(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
@@ -964,6 +967,9 @@ importers:
       posthog-js:
         specifier: 'catalog:'
         version: 1.358.1
+      three:
+        specifier: 'catalog:'
+        version: 0.170.0
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.3)
@@ -4508,8 +4514,8 @@ packages:
   '@types/stats.js@0.17.3':
     resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}
 
-  '@types/three@0.169.0':
-    resolution: {integrity: sha512-oan7qCgJBt03wIaK+4xPWclYRPG9wzcg7Z2f5T8xYTNEF95kh0t0lklxLLYBDo7gQiGLYzE6iF4ta7nXF2bcsw==}
+  '@types/three@0.170.0':
+    resolution: {integrity: sha512-CUm2uckq+zkCY7ZbFpviRttY+6f9fvwm6YqSqPfA5K22s9w7R4VnA3rzJse8kHVvuzLcTx+CjNCs2NYe0QFAyg==}
 
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
@@ -9883,8 +9889,8 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
-  vue-component-type-helpers@3.2.7:
-    resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
+  vue-component-type-helpers@3.2.8:
+    resolution: {integrity: sha512-9689efAXhN/EV86plgkL/XFiJSXhGtWPG6JDboZ+QnjlUWUUQrQ0ILKQtw4iQsuwIwu5k6Aw+JnehDe7161e7A==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -13405,7 +13411,7 @@ snapshots:
       storybook: 10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.7
+      vue-component-type-helpers: 3.2.8
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -13834,7 +13840,7 @@ snapshots:
 
   '@types/stats.js@0.17.3': {}
 
-  '@types/three@0.169.0':
+  '@types/three@0.170.0':
     dependencies:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
@@ -14189,7 +14195,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@25.0.3)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -20530,7 +20536,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
-  vue-component-type-helpers@3.2.7: {}
+  vue-component-type-helpers@3.2.8: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.3)):
     dependencies:

pnpm-workspace.yaml

@@ -54,7 +54,7 @@ catalog:
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
-  '@types/three': ^0.169.0
+  '@types/three': ^0.170.0
   '@vee-validate/zod': ^4.15.1
   '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
@@ -113,6 +113,7 @@ catalog:
   storybook: ^10.2.10
   stylelint: ^16.26.1
   tailwindcss: ^4.2.0
+  three: ^0.170.0
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8

src/components/common/CustomizationDialog.test.ts

@@ -0,0 +1,104 @@
+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 CustomizationDialog from './CustomizationDialog.vue'
+
+const DEFAULT_ICON = 'pi-bookmark-fill'
+const DEFAULT_COLOR = '#a1a1aa'
+
+vi.mock('@/stores/nodeBookmarkStore', () => ({
+  useNodeBookmarkStore: () => ({
+    defaultBookmarkIcon: DEFAULT_ICON,
+    defaultBookmarkColor: DEFAULT_COLOR,
+    bookmarksCustomization: {}
+  })
+}))
+
+vi.mock('primevue/dialog', () => ({
+  default: {
+    name: 'Dialog',
+    template: '<div v-if="visible"><slot /><slot name="footer" /></div>',
+    props: ['visible']
+  }
+}))
+
+vi.mock('primevue/selectbutton', () => ({
+  default: {
+    name: 'SelectButton',
+    template: '<div />',
+    props: ['modelValue', 'options']
+  }
+}))
+
+vi.mock('primevue/divider', () => ({
+  default: { name: 'Divider', template: '<hr />' }
+}))
+
+vi.mock('@/components/common/ColorCustomizationSelector.vue', () => ({
+  default: {
+    name: 'ColorCustomizationSelector',
+    template: '<div />',
+    props: ['modelValue', 'colorOptions']
+  }
+}))
+
+vi.mock('@/components/ui/button/Button.vue', () => ({
+  default: {
+    name: 'Button',
+    template: `<button @click="$emit('click')"><slot /></button>`,
+    emits: ['click']
+  }
+}))
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+function renderDialog(extraProps: Record<string, unknown> = {}) {
+  const onConfirm = vi.fn()
+  render(CustomizationDialog, {
+    global: { plugins: [i18n] },
+    props: { modelValue: true, onConfirm, ...extraProps }
+  })
+  return { onConfirm }
+}
+
+describe('CustomizationDialog', () => {
+  describe('confirmCustomization', () => {
+    it('emits confirm with default icon and color when no initial values provided', async () => {
+      const user = userEvent.setup()
+      const { onConfirm } = renderDialog()
+
+      await user.click(screen.getByText('g.confirm'))
+
+      expect(onConfirm).toHaveBeenCalledWith(DEFAULT_ICON, DEFAULT_COLOR)
+    })
+
+    it('emits confirm with matching initialIcon when provided', async () => {
+      const user = userEvent.setup()
+      const { onConfirm } = renderDialog({ initialIcon: 'pi-star' })
+
+      await user.click(screen.getByText('g.confirm'))
+
+      expect(onConfirm).toHaveBeenCalledWith('pi-star', DEFAULT_COLOR)
+    })
+
+    it('falls back to default icon when initialIcon does not match any option', async () => {
+      const user = userEvent.setup()
+      const { onConfirm } = renderDialog({ initialIcon: 'pi-nonexistent' })
+
+      await user.click(screen.getByText('g.confirm'))
+
+      expect(onConfirm).toHaveBeenCalledWith(DEFAULT_ICON, DEFAULT_COLOR)
+    })
+
+    it('emits confirm with initialColor when provided', async () => {
+      const user = userEvent.setup()
+      const { onConfirm } = renderDialog({ initialColor: '#007bff' })
+
+      await user.click(screen.getByText('g.confirm'))
+
+      expect(onConfirm).toHaveBeenCalledWith(DEFAULT_ICON, '#007bff')
+    })
+  })
+})

src/components/common/CustomizationDialog.vue

@@ -94,17 +94,15 @@ const defaultIcon = iconOptions.find(
   (option) => option.value === nodeBookmarkStore.defaultBookmarkIcon
 )
 
-// @ts-expect-error fixme ts strict error
-const selectedIcon = ref<{ name: string; value: string }>(defaultIcon)
+const selectedIcon = ref(defaultIcon ?? iconOptions[0])
 const finalColor = ref(
   props.initialColor || nodeBookmarkStore.defaultBookmarkColor
 )
 
 const resetCustomization = () => {
-  // @ts-expect-error fixme ts strict error
   selectedIcon.value =
-    iconOptions.find((option) => option.value === props.initialIcon) ||
-    defaultIcon
+    iconOptions.find((option) => option.value === props.initialIcon) ??
+    iconOptions[0]
   finalColor.value =
     props.initialColor || nodeBookmarkStore.defaultBookmarkColor
 }

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -2,7 +2,7 @@
   <span class="flex flex-row gap-0.5">
     <template v-for="(sequence, index) in keySequences" :key="index">
       <Tag
-        class="min-w-6 justify-center gap-1 bg-interface-menu-keybind-surface-default text-center font-normal text-base-foreground uppercase"
+        class="min-w-6 justify-center gap-1 bg-interface-menu-keybind-surface-default text-center font-normal text-base-foreground capitalize"
         :severity="isModified ? 'info' : 'secondary'"
       >
         {{ sequence }}

src/components/graph/GraphCanvas.vue

@@ -6,6 +6,7 @@
     <template v-if="showUI" #workflow-tabs>
       <div
         v-if="workflowTabsPosition === 'Topbar'"
+        data-testid="topbar-workflow-tabs"
         class="workflow-tabs-container pointer-events-auto relative h-(--workflow-tabs-height) w-full"
       >
         <div

src/components/graph/selectionToolbox/InfoButton.test.ts

@@ -9,13 +9,13 @@ import { createI18n } from 'vue-i18n'
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 
-const { openPanelMock } = vi.hoisted(() => ({
-  openPanelMock: vi.fn()
+const { showNodeHelpMock } = vi.hoisted(() => ({
+  showNodeHelpMock: vi.fn()
 }))
 
-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({
-    openPanel: openPanelMock
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: () => ({
+    showNodeHelp: showNodeHelpMock
   })
 }))
 
@@ -53,12 +53,12 @@ describe('InfoButton', () => {
     })
   }
 
-  it('should open the info panel on click', async () => {
+  it('should call showNodeHelp on click', async () => {
     const user = userEvent.setup()
     renderComponent()
 
     await user.click(screen.getByRole('button', { name: 'Node Info' }))
 
-    expect(openPanelMock).toHaveBeenCalledWith('info')
+    expect(showNodeHelpMock).toHaveBeenCalledTimes(1)
   })
 })

src/components/graph/selectionToolbox/InfoButton.vue

@@ -15,18 +15,15 @@
 
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useTelemetry } from '@/platform/telemetry'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
-const rightSidePanelStore = useRightSidePanelStore()
+const { showNodeHelp } = useSelectionState()
 
-/**
- * Track node info button click and toggle node help.
- */
 const onInfoClick = () => {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'selection_toolbox_node_info_opened'
   })
-  rightSidePanelStore.openPanel('info')
+  showNodeHelp()
 }
 </script>

src/components/maskeditor/BrushSettingsPanel.vue

@@ -64,6 +64,7 @@
         </span>
         <input
           v-model.number="brushSize"
+          data-testid="brush-thickness-input"
           type="number"
           class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
           :min="1"

src/components/queue/job/JobAssetsList.test.ts

@@ -4,6 +4,7 @@ import { fireEvent, render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
+import type * as RekaUi from 'reka-ui'
 
 import './testUtils/mockTanstackVirtualizer'
 
@@ -27,6 +28,85 @@ vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
   default: hoisted.jobDetailsPopoverStub
 }))
 
+vi.mock('reka-ui', async (importOriginal) => {
+  const actual = await importOriginal<typeof RekaUi>()
+  const { computed, defineComponent, h, inject, provide } = await import('vue')
+  const popoverOpenKey = Symbol('popoverOpen')
+
+  return {
+    ...actual,
+    PopoverContent: defineComponent({
+      name: 'PopoverContent',
+      props: {
+        align: { type: String, default: undefined },
+        avoidCollisions: { type: Boolean, default: undefined },
+        collisionPadding: { type: Number, default: undefined },
+        hideWhenDetached: { type: Boolean, default: undefined },
+        positionStrategy: { type: String, default: undefined },
+        reference: { type: null, default: undefined },
+        side: { type: String, default: undefined },
+        sideFlip: { type: Boolean, default: undefined },
+        sideOffset: { type: Number, default: undefined },
+        sticky: { type: String, default: undefined }
+      },
+      emits: ['mouseenter', 'mouseleave'],
+      setup(props, { attrs, emit, slots }) {
+        const isOpen = inject(
+          popoverOpenKey,
+          computed(() => false)
+        )
+        return () =>
+          isOpen.value
+            ? h(
+                'div',
+                {
+                  class: attrs.class,
+                  'data-align': props.align,
+                  'data-avoid-collisions': props.avoidCollisions,
+                  'data-collision-padding': props.collisionPadding,
+                  'data-hide-when-detached': props.hideWhenDetached,
+                  'data-position-strategy': props.positionStrategy,
+                  'data-reference-bound': props.reference ? 'true' : 'false',
+                  'data-side': props.side,
+                  'data-side-flip': props.sideFlip,
+                  'data-side-offset': props.sideOffset,
+                  'data-sticky': props.sticky,
+                  onMouseenter: () => emit('mouseenter'),
+                  onMouseleave: () => emit('mouseleave')
+                },
+                slots.default?.()
+              )
+            : null
+      }
+    }),
+    PopoverPortal: {
+      name: 'PopoverPortal',
+      template: '<div><slot /></div>'
+    },
+    PopoverRoot: defineComponent({
+      name: 'PopoverRoot',
+      props: {
+        open: { type: Boolean, default: false }
+      },
+      setup(props, { slots }) {
+        provide(
+          popoverOpenKey,
+          computed(() => props.open)
+        )
+
+        return () =>
+          h(
+            'div',
+            {
+              'data-open': props.open
+            },
+            slots.default?.()
+          )
+      }
+    })
+  }
+})
+
 const AssetsListItemStub = defineComponent({
   name: 'AssetsListItem',
   props: {
@@ -72,6 +152,7 @@ vi.mock('vue-i18n', () => {
 
 type TestPreviewOutput = {
   url: string
+  previewUrl: string
   isImage: boolean
   isVideo: boolean
 }
@@ -96,6 +177,7 @@ const createPreviewOutput = (
   const url = `/api/view/${filename}`
   return {
     url,
+    previewUrl: mediaType === 'images' ? `${url}?res=512` : url,
     isImage: mediaType === 'images',
     isVideo: mediaType === 'video'
   }
@@ -153,30 +235,6 @@ function renderJobAssetsList({
   return { ...result, user }
 }
 
-function createDomRect({
-  top,
-  left,
-  width,
-  height
-}: {
-  top: number
-  left: number
-  width: number
-  height: number
-}): DOMRect {
-  return {
-    x: left,
-    y: top,
-    top,
-    left,
-    width,
-    height,
-    right: left + width,
-    bottom: top + height,
-    toJSON: () => ''
-  } as DOMRect
-}
-
 afterEach(() => {
   vi.useRealTimers()
   vi.restoreAllMocks()
@@ -240,6 +298,18 @@ describe('JobAssetsList', () => {
     expect(onViewItem).toHaveBeenCalledWith(job)
   })
 
+  it('uses thumbnail preview URLs for completed image rows', () => {
+    const preview = createPreviewOutput('job-1.png')
+    const job = buildJob({
+      taskRef: createTaskRef(preview)
+    })
+    const { container } = renderJobAssetsList({ jobs: [job] })
+
+    const stubRoot = container.querySelector('.assets-list-item-stub')!
+    expect(stubRoot.getAttribute('data-preview-url')).toBe(preview.previewUrl)
+    expect(stubRoot.getAttribute('data-preview-url')).not.toBe(preview.url)
+  })
+
   it('emits viewItem on double-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
@@ -378,54 +448,24 @@ describe('JobAssetsList', () => {
     expect(container.querySelector('.job-details-popover-stub')).toBeNull()
   })
 
-  it('positions the popover to the right of rows near the left viewport edge', async () => {
+  it('anchors the popover to the active row through Reka', async () => {
     vi.useFakeTimers()
     const job = buildJob()
     const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
-    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280)
-    vi.spyOn(jobRow, 'getBoundingClientRect').mockReturnValue(
-      createDomRect({
-        top: 100,
-        left: 40,
-        width: 200,
-        height: 48
-      })
-    )
-
     await fireEvent.mouseEnter(jobRow)
     await vi.advanceTimersByTimeAsync(200)
     await nextTick()
 
     const popover = container.querySelector('.job-details-popover')!
-    expect(popover.getAttribute('style')).toContain('left: 248px;')
-  })
-
-  it('positions the popover to the left of rows near the right viewport edge', async () => {
-    vi.useFakeTimers()
-    const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
-
-    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
-
-    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280)
-    vi.spyOn(jobRow, 'getBoundingClientRect').mockReturnValue(
-      createDomRect({
-        top: 100,
-        left: 980,
-        width: 200,
-        height: 48
-      })
-    )
-
-    await fireEvent.mouseEnter(jobRow)
-    await vi.advanceTimersByTimeAsync(200)
-    await nextTick()
-
-    const popover = container.querySelector('.job-details-popover')!
-    expect(popover.getAttribute('style')).toContain('left: 672px;')
+    expect(popover.getAttribute('data-avoid-collisions')).toBe('true')
+    expect(popover.getAttribute('data-hide-when-detached')).toBe('true')
+    expect(popover.getAttribute('data-reference-bound')).toBe('true')
+    expect(popover.getAttribute('data-side')).toBe('right')
+    expect(popover.getAttribute('data-side-flip')).toBe('true')
+    expect(popover.getAttribute('data-position-strategy')).toBe('fixed')
   })
 
   it('clears the previous popover when hovering a new row briefly and leaving the list', async () => {
@@ -458,7 +498,7 @@ describe('JobAssetsList', () => {
     expect(container.querySelector('.job-details-popover-stub')).toBeNull()
   })
 
-  it('shows the new popover after the previous row hides while the next row stays hovered', async () => {
+  it('updates the visible popover without closing when hovering another row', async () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
@@ -479,17 +519,21 @@ describe('JobAssetsList', () => {
 
     await fireEvent.mouseLeave(firstRow)
     await fireEvent.mouseEnter(secondRow)
-
-    await vi.advanceTimersByTimeAsync(150)
-    await nextTick()
-    expect(container.querySelector('.job-details-popover-stub')).toBeNull()
-
-    await vi.advanceTimersByTimeAsync(50)
     await nextTick()
 
-    const popoverStub = container.querySelector('.job-details-popover-stub')!
-    expect(popoverStub).not.toBeNull()
-    expect(popoverStub.getAttribute('data-job-id')).toBe('job-2')
+    expect(
+      container
+        .querySelector('.job-details-popover-stub')
+        ?.getAttribute('data-job-id')
+    ).toBe('job-2')
+
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+    expect(
+      container
+        .querySelector('.job-details-popover-stub')
+        ?.getAttribute('data-job-id')
+    ).toBe('job-2')
   })
 
   it('does not show details if the hovered row disappears before the show delay ends', async () => {

src/components/queue/job/JobAssetsList.vue

@@ -90,23 +90,15 @@
     </div>
   </div>
 
-  <Teleport to="body">
-    <div
-      v-if="activeDetails && popoverPosition"
-      class="job-details-popover fixed z-50"
-      :style="{
-        top: `${popoverPosition.top}px`,
-        left: `${popoverPosition.left}px`
-      }"
-      @mouseenter="onPopoverEnter"
-      @mouseleave="onPopoverLeave"
-    >
-      <JobDetailsPopover
-        :job-id="activeDetails.jobId"
-        :workflow-id="activeDetails.workflowId"
-      />
-    </div>
-  </Teleport>
+  <JobDetailsHoverPopover
+    :open="isDetailsOpen && !!activeDetails && !!activeRowElement"
+    :job-id="activeDetails?.jobId"
+    :workflow-id="activeDetails?.workflowId"
+    :reference-element="activeRowElement"
+    @content-enter="onPopoverEnter"
+    @content-leave="onPopoverLeave"
+    @update:open="onPopoverOpenChange"
+  />
 </template>
 
 <script setup lang="ts">
@@ -114,13 +106,11 @@ import type { VirtualItem } from '@tanstack/vue-virtual'
 import type { CSSProperties } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import { computed, nextTick, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
-import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
-import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
+import JobDetailsHoverPopover from '@/components/queue/job/JobDetailsHoverPopover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-import { useJobDetailsHover } from '@/composables/queue/useJobDetailsHover'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import { cn } from '@comfyorg/tailwind-utils'
 import { iconForJobState } from '@/utils/queueDisplay'
@@ -132,6 +122,8 @@ import type { VirtualJobRow } from './buildVirtualJobRows'
 const HEADER_ROW_HEIGHT = 20
 const GROUP_ROW_GAP = 16
 const JOB_ROW_HEIGHT = 48
+const DETAILS_SHOW_DELAY_MS = 200
+const DETAILS_HIDE_DELAY_MS = 150
 
 defineOptions({
   inheritAttrs: false
@@ -150,7 +142,11 @@ const { t } = useI18n()
 const scrollContainer = ref<HTMLElement | null>(null)
 const hoveredJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
-const popoverPosition = ref<{ top: number; left: number } | null>(null)
+const activeDetails = ref<{ jobId: string; workflowId?: string } | null>(null)
+const isDetailsOpen = ref(false)
+const hideTimer = ref<number | null>(null)
+const hideTimerJobId = ref<string | null>(null)
+const showTimer = ref<number | null>(null)
 const flatRows = computed(() => buildVirtualJobRows(displayedJobGroups))
 const virtualizer = useVirtualizer({
   get count(): number {
@@ -184,18 +180,6 @@ const virtualWrapperStyle = computed<CSSProperties>(() => ({
     height: `${virtualizer.value.getTotalSize()}px`
   })
 }))
-const {
-  activeDetails,
-  clearHoverTimers,
-  resetActiveDetails,
-  scheduleDetailsHide,
-  scheduleDetailsShow
-} = useJobDetailsHover<{ jobId: string; workflowId?: string }>({
-  getActiveId: (details) => details.jobId,
-  getDisplayedJobGroups: () => displayedJobGroups,
-  onReset: clearPopoverAnchor
-})
-
 function getVirtualRowStyle(virtualItem: VirtualItem): CSSProperties {
   return {
     position: 'absolute',
@@ -229,22 +213,88 @@ function onListScroll() {
 
 function clearPopoverAnchor() {
   activeRowElement.value = null
-  popoverPosition.value = null
 }
 
-function updatePopoverPosition() {
-  const rowElement = activeRowElement.value
-  if (!rowElement) return
+function clearHideTimer() {
+  if (hideTimer.value !== null) {
+    clearTimeout(hideTimer.value)
+    hideTimer.value = null
+  }
+  hideTimerJobId.value = null
+}
 
-  const rect = rowElement.getBoundingClientRect()
-  popoverPosition.value = getHoverPopoverPosition(rect, window.innerWidth)
+function clearShowTimer() {
+  if (showTimer.value !== null) {
+    clearTimeout(showTimer.value)
+    showTimer.value = null
+  }
+}
+
+function clearHoverTimers() {
+  clearHideTimer()
+  clearShowTimer()
+}
+
+function resetActiveDetails() {
+  clearHoverTimers()
+  isDetailsOpen.value = false
+  activeDetails.value = null
+  clearPopoverAnchor()
+}
+
+function hasDisplayedJob(jobId: string) {
+  return displayedJobGroups.some((group) =>
+    group.items.some((item) => item.id === jobId)
+  )
+}
+
+function scheduleDetailsShow(nextActive: {
+  jobId: string
+  workflowId?: string
+}) {
+  clearShowTimer()
+  showTimer.value = window.setTimeout(() => {
+    showTimer.value = null
+    if (!hasDisplayedJob(nextActive.jobId)) return
+
+    activeDetails.value = nextActive
+    isDetailsOpen.value = true
+  }, DETAILS_SHOW_DELAY_MS)
+}
+
+function showDetailsNow(nextActive: { jobId: string; workflowId?: string }) {
+  clearHoverTimers()
+  if (!hasDisplayedJob(nextActive.jobId)) return
+
+  activeDetails.value = nextActive
+  isDetailsOpen.value = true
+}
+
+function scheduleDetailsHide(jobId?: string) {
+  if (!jobId) return
+
+  clearShowTimer()
+  if (hideTimerJobId.value && hideTimerJobId.value !== jobId) {
+    return
+  }
+
+  clearHideTimer()
+  hideTimerJobId.value = jobId
+  hideTimer.value = window.setTimeout(() => {
+    const currentActive = activeDetails.value
+    if (currentActive?.jobId === jobId) {
+      isDetailsOpen.value = false
+    }
+    hideTimer.value = null
+    hideTimerJobId.value = null
+  }, DETAILS_HIDE_DELAY_MS)
 }
 
 function onJobLeave(jobId: string) {
   if (hoveredJobId.value === jobId) {
     hoveredJobId.value = null
   }
-  scheduleDetailsHide(jobId, clearPopoverAnchor)
+  scheduleDetailsHide(jobId)
 }
 
 function onJobEnter(job: JobListItem, event: MouseEvent) {
@@ -254,22 +304,22 @@ function onJobEnter(job: JobListItem, event: MouseEvent) {
   if (!(rowElement instanceof HTMLElement)) return
 
   activeRowElement.value = rowElement
-  if (activeDetails.value?.jobId === job.id) {
+  const nextActive = {
+    jobId: job.id,
+    workflowId: job.taskRef?.workflowId
+  }
+
+  if (isDetailsOpen.value && activeDetails.value?.jobId === job.id) {
     clearHoverTimers()
-    void nextTick(updatePopoverPosition)
     return
   }
 
-  scheduleDetailsShow(
-    {
-      jobId: job.id,
-      workflowId: job.taskRef?.workflowId
-    },
-    () => {
-      activeRowElement.value = rowElement
-      void nextTick(updatePopoverPosition)
-    }
-  )
+  const isSwitchingVisibleDetails = isDetailsOpen.value
+  const showDetails = isSwitchingVisibleDetails
+    ? showDetailsNow
+    : scheduleDetailsShow
+
+  showDetails(nextActive)
 }
 
 function isCancelable(job: JobListItem) {
@@ -287,7 +337,7 @@ function getPreviewOutput(job: JobListItem) {
 function getJobPreviewUrl(job: JobListItem) {
   const preview = getPreviewOutput(job)
   if (preview?.isImage || preview?.isVideo) {
-    return preview.url
+    return preview.previewUrl
   }
   return job.iconImageUrl
 }
@@ -327,7 +377,13 @@ function onPopoverEnter() {
 }
 
 function onPopoverLeave() {
-  scheduleDetailsHide(activeDetails.value?.jobId, clearPopoverAnchor)
+  scheduleDetailsHide(activeDetails.value?.jobId)
+}
+
+function onPopoverOpenChange(open: boolean) {
+  if (!open) {
+    resetActiveDetails()
+  }
 }
 
 function getJobIconClass(job: JobListItem): string | undefined {
@@ -337,4 +393,18 @@ function getJobIconClass(job: JobListItem): string | undefined {
   }
   return undefined
 }
+
+watch(
+  () => displayedJobGroups,
+  () => {
+    const currentActive = activeDetails.value
+    if (!currentActive) return
+
+    if (!hasDisplayedJob(currentActive.jobId)) {
+      resetActiveDetails()
+    }
+  }
+)
+
+onBeforeUnmount(resetActiveDetails)
 </script>

src/components/queue/job/JobDetailsHoverPopover.vue

@@ -0,0 +1,62 @@
+<template>
+  <Popover :open="isOpen" @update:open="onOpenChange">
+    <PopoverContent
+      v-if="hasReference"
+      :reference="referenceElement ?? undefined"
+      data-testid="queue-job-details-popover"
+      side="right"
+      align="start"
+      :side-offset="8"
+      :collision-padding="8"
+      :avoid-collisions="true"
+      :side-flip="true"
+      :hide-when-detached="true"
+      position-strategy="fixed"
+      sticky="always"
+      class="job-details-popover z-1700 max-h-(--reka-popover-content-available-height) w-auto overflow-y-auto border-0 bg-transparent p-0 shadow-none will-change-transform"
+      @mouseenter="$emit('content-enter')"
+      @mouseleave="$emit('content-leave')"
+      @open-auto-focus.prevent
+      @close-auto-focus.prevent
+    >
+      <JobDetailsPopover
+        v-if="jobId"
+        :job-id="jobId"
+        :workflow-id="workflowId"
+      />
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+
+const {
+  open,
+  jobId = null,
+  workflowId,
+  referenceElement = null
+} = defineProps<{
+  open: boolean
+  jobId?: string | null
+  workflowId?: string
+  referenceElement?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'content-enter'): void
+  (e: 'content-leave'): void
+  (e: 'update:open', open: boolean): void
+}>()
+
+const isOpen = computed(() => open && !!jobId)
+const hasReference = computed(() => !!jobId && !!referenceElement)
+
+function onOpenChange(nextOpen: boolean) {
+  emit('update:open', nextOpen)
+}
+</script>

src/components/queue/job/getHoverPopoverPosition.test.ts

@@ -1,61 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { getHoverPopoverPosition } from './getHoverPopoverPosition'
-
-describe('getHoverPopoverPosition', () => {
-  it('places the popover to the right when space is available', () => {
-    const position = getHoverPopoverPosition(
-      { top: 100, left: 40, right: 240 },
-      1280
-    )
-    expect(position).toEqual({ top: 100, left: 248 })
-  })
-
-  it('places the popover to the left when right space is insufficient', () => {
-    const position = getHoverPopoverPosition(
-      { top: 100, left: 980, right: 1180 },
-      1280
-    )
-    expect(position).toEqual({ top: 100, left: 672 })
-  })
-
-  it('clamps the top to viewport padding when rect.top is near the top edge', () => {
-    const position = getHoverPopoverPosition(
-      { top: 2, left: 40, right: 240 },
-      1280
-    )
-    expect(position).toEqual({ top: 8, left: 248 })
-  })
-
-  it('clamps left to viewport padding when fallback would go off-screen', () => {
-    const position = getHoverPopoverPosition(
-      { top: 100, left: 100, right: 300 },
-      320
-    )
-    expect(position).toEqual({ top: 100, left: 8 })
-  })
-
-  it('prefers right when both sides have equal space', () => {
-    const position = getHoverPopoverPosition(
-      { top: 200, left: 340, right: 640 },
-      1280
-    )
-    expect(position).toEqual({ top: 200, left: 648 })
-  })
-
-  it('falls back to left when right space is less than popover width', () => {
-    const position = getHoverPopoverPosition(
-      { top: 100, left: 600, right: 1000 },
-      1280
-    )
-    expect(position).toEqual({ top: 100, left: 292 })
-  })
-
-  it('handles narrow viewport where popover barely fits', () => {
-    const position = getHoverPopoverPosition(
-      { top: 50, left: 8, right: 100 },
-      316
-    )
-    expect(position).toEqual({ top: 50, left: 8 })
-  })
-})

src/components/queue/job/getHoverPopoverPosition.ts

@@ -1,39 +0,0 @@
-const POPOVER_GAP = 8
-const POPOVER_WIDTH = 300
-const VIEWPORT_PADDING = 8
-
-type AnchorRect = Pick<DOMRect, 'top' | 'left' | 'right'>
-
-type HoverPopoverPosition = {
-  top: number
-  left: number
-}
-
-export function getHoverPopoverPosition(
-  rect: AnchorRect,
-  viewportWidth: number
-): HoverPopoverPosition {
-  const availableLeft = rect.left - POPOVER_GAP
-  const availableRight = viewportWidth - rect.right - POPOVER_GAP
-  const preferredLeft = rect.right + POPOVER_GAP
-  const fallbackLeft = rect.left - POPOVER_WIDTH - POPOVER_GAP
-  const maxLeft = Math.max(
-    VIEWPORT_PADDING,
-    viewportWidth - POPOVER_WIDTH - VIEWPORT_PADDING
-  )
-
-  if (
-    availableRight >= POPOVER_WIDTH &&
-    (availableRight >= availableLeft || availableLeft < POPOVER_WIDTH)
-  ) {
-    return {
-      top: Math.max(VIEWPORT_PADDING, rect.top),
-      left: Math.min(maxLeft, preferredLeft)
-    }
-  }
-
-  return {
-    top: Math.max(VIEWPORT_PADDING, rect.top),
-    left: Math.max(VIEWPORT_PADDING, Math.min(maxLeft, fallbackLeft))
-  }
-}

src/components/topbar/WorkflowTabs.vue

@@ -81,6 +81,7 @@
     </Button>
     <div
       v-if="isIntegratedTabBar"
+      data-testid="integrated-tab-bar-actions"
       class="ml-auto flex shrink-0 items-center gap-2 px-2"
     >
       <Button

src/components/ui/popover/Popover.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+// eslint-disable-next-line vue/no-unused-properties -- forwarded to Reka via useForwardPropsEmits
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  align = 'center',
+  sideOffset = 4,
+  class: className,
+  ...restProps
+} = defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => ({
+  align,
+  sideOffset,
+  ...restProps
+}))
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-base-background p-4 text-base-foreground shadow-md outline-none',
+          'data-[state=closed]:animate-out data-[state=open]:animate-in',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

src/composables/graph/useErrorClearingHooks.test.ts

@@ -20,27 +20,7 @@ import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-
-function seedSimpleError(
-  store: ReturnType<typeof useExecutionErrorStore>,
-  executionId: string,
-  inputName: string
-) {
-  store.lastNodeErrors = {
-    [executionId]: {
-      errors: [
-        {
-          type: 'required_input_missing',
-          message: 'Missing',
-          details: '',
-          extra_info: { input_name: inputName }
-        }
-      ],
-      dependent_outputs: [],
-      class_type: 'TestNode'
-    }
-  }
-}
+import { seedRequiredInputMissingNodeError } from '@/utils/__tests__/executionErrorTestUtils'
 
 describe('Connection error clearing via onConnectionsChange', () => {
   beforeEach(() => {
@@ -63,7 +43,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedSimpleError(store, String(node.id), 'clip')
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(NodeSlotType.INPUT, 0, true, null, node.inputs[0])
 
@@ -75,7 +55,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
     installErrorClearingHooks(graph)
 
     const store = useExecutionErrorStore()
-    seedSimpleError(store, String(node.id), 'clip')
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(
       NodeSlotType.INPUT,
@@ -94,7 +74,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
     installErrorClearingHooks(graph)
 
     const store = useExecutionErrorStore()
-    seedSimpleError(store, String(node.id), 'clip')
+    seedRequiredInputMissingNodeError(store, String(node.id), 'clip')
 
     node.onConnectionsChange!(
       NodeSlotType.OUTPUT,
@@ -116,7 +96,7 @@ describe('Connection error clearing via onConnectionsChange', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedSimpleError(store, String(node.id), 'model')
+    seedRequiredInputMissingNodeError(store, String(node.id), 'model')
 
     node.onConnectionsChange!(NodeSlotType.INPUT, 0, true, null, node.inputs[0])
 
@@ -261,7 +241,11 @@ describe('Widget change error clearing via onWidgetChanged', () => {
     // PromotedWidgetView.name returns displayName ("ckpt_input"), which is
     // passed as errorInputName to clearSimpleNodeErrors. Seed the error
     // with that name so the slot-name filter matches.
-    seedSimpleError(store, interiorExecId, promotedWidget!.name)
+    seedRequiredInputMissingNodeError(
+      store,
+      interiorExecId,
+      promotedWidget!.name
+    )
 
     subgraphNode.onWidgetChanged!.call(
       subgraphNode,
@@ -300,7 +284,7 @@ describe('installErrorClearingHooks lifecycle', () => {
     // Verify the hooks actually work
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
-    seedSimpleError(store, String(lateNode.id), 'value')
+    seedRequiredInputMissingNodeError(store, String(lateNode.id), 'value')
 
     lateNode.onConnectionsChange!(
       NodeSlotType.INPUT,
@@ -831,6 +815,58 @@ describe('scan skips interior of bypassed subgraph containers', () => {
 
     expect(useMissingModelStore().missingModelCandidates).toBeNull()
   })
+
+  it('skips nested subgraph containers during parent subgraph replay scan', async () => {
+    const rootGraph = new LGraph()
+    const outerSubgraph = createTestSubgraph({ rootGraph })
+    const innerSubgraph = createTestSubgraph({ rootGraph })
+    const leafNode = new LGraphNode('UNETLoader')
+    innerSubgraph.add(leafNode)
+
+    const innerSubgraphNode = createTestSubgraphNode(innerSubgraph, {
+      parentGraph: outerSubgraph,
+      id: 76
+    })
+    outerSubgraph.add(innerSubgraphNode)
+
+    const outerSubgraphNode = createTestSubgraphNode(outerSubgraph, {
+      parentGraph: rootGraph,
+      id: 205
+    })
+    rootGraph.add(outerSubgraphNode)
+
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(rootGraph)
+    const modelScanSpy = vi
+      .spyOn(missingModelScan, 'scanNodeModelCandidates')
+      .mockReturnValue([])
+    const mediaScanSpy = vi
+      .spyOn(missingMediaScan, 'scanNodeMediaCandidates')
+      .mockReturnValue([])
+
+    installErrorClearingHooks(rootGraph)
+
+    rootGraph.onNodeAdded?.(outerSubgraphNode)
+    await new Promise((r) => setTimeout(r, 0))
+
+    expect(modelScanSpy).toHaveBeenCalledWith(
+      rootGraph,
+      leafNode,
+      expect.any(Function),
+      expect.any(Function)
+    )
+    expect(modelScanSpy).not.toHaveBeenCalledWith(
+      rootGraph,
+      innerSubgraphNode,
+      expect.any(Function),
+      expect.any(Function)
+    )
+    expect(mediaScanSpy).toHaveBeenCalledWith(rootGraph, leafNode, false)
+    expect(mediaScanSpy).not.toHaveBeenCalledWith(
+      rootGraph,
+      innerSubgraphNode,
+      false
+    )
+  })
 })
 
 describe('clearWidgetRelatedErrors parameter routing', () => {

src/composables/graph/useErrorClearingHooks.ts

@@ -162,6 +162,7 @@ function scanAndAddNodeErrors(node: LGraphNode): void {
 
   if (node.isSubgraphNode?.() && node.subgraph) {
     for (const innerNode of collectAllNodes(node.subgraph)) {
+      if (innerNode.isSubgraphNode?.()) continue
       if (isNodeInactive(innerNode.mode)) continue
       scanSingleNodeErrors(innerNode)
     }

src/composables/graph/useMoreOptionsMenu.ts

@@ -126,6 +126,8 @@ export function useMoreOptionsMenu() {
     selectedNodes,
     nodeDef,
     showNodeHelp,
+    isSingleNode,
+    isSingleSubgraph,
     hasSubgraphs: hasSubgraphsComputed,
     hasImageNode,
     hasOutputNodesSelected,
@@ -243,7 +245,8 @@ export function useMoreOptionsMenu() {
     options.push({ type: 'divider' })
 
     // Section 4: Node properties (Node Info, Shape, Color)
-    if (nodeDef.value) {
+    // Match the right side panel's Info tab visibility: single non-subgraph node.
+    if (nodeDef.value && isSingleNode.value && !isSingleSubgraph.value) {
       options.push(getNodeInfoOption(showNodeHelp))
     }
     if (groupContext) {

src/composables/graph/useNodeMenuOptions.test.ts

@@ -0,0 +1,61 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { useNodeMenuOptions } from '@/composables/graph/useNodeMenuOptions'
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    useI18n: () => ({
+      t: (key: string) => key.split('.').pop() ?? key
+    })
+  }
+})
+
+vi.mock('@/composables/graph/useNodeCustomization', () => ({
+  useNodeCustomization: () => ({
+    shapeOptions: [],
+    applyShape: vi.fn(),
+    applyColor: vi.fn(),
+    colorOptions: [],
+    isLightTheme: { value: false }
+  })
+}))
+
+vi.mock('@/composables/graph/useSelectedNodeActions', () => ({
+  useSelectedNodeActions: () => ({
+    adjustNodeSize: vi.fn(),
+    toggleNodeCollapse: vi.fn(),
+    toggleNodePin: vi.fn(),
+    toggleNodeBypass: vi.fn(),
+    runBranch: vi.fn()
+  })
+}))
+
+describe('useNodeMenuOptions', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ createSpy: vi.fn }))
+  })
+
+  describe('getNodeInfoOption', () => {
+    test('builds a menu option labeled "Node Info"', () => {
+      const { getNodeInfoOption } = useNodeMenuOptions()
+      const option = getNodeInfoOption(vi.fn())
+
+      expect(option.label).toBe('Node Info')
+      expect(option.icon).toBe('icon-[lucide--info]')
+    })
+
+    test('invokes the supplied showNodeHelp callback when the option is activated', () => {
+      const showNodeHelp = vi.fn()
+      const { getNodeInfoOption } = useNodeMenuOptions()
+      const option = getNodeInfoOption(showNodeHelp)
+
+      option.action?.()
+
+      expect(showNodeHelp).toHaveBeenCalledTimes(1)
+    })
+  })
+})

src/composables/graph/useSelectionState.test.ts

@@ -3,9 +3,10 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 import {
@@ -13,14 +14,10 @@ import {
   createMockPositionable
 } from '@/utils/__tests__/litegraphTestUtils'
 
-// Mock composables
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: vi.fn()
-}))
-
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn(),
-  isImageNode: vi.fn()
+  isImageNode: vi.fn(),
+  isLoad3dNode: vi.fn(() => false)
 }))
 
 vi.mock('@/utils/nodeFilterUtil', () => ({
@@ -43,22 +40,13 @@ describe('useSelectionState', () => {
   beforeEach(() => {
     vi.clearAllMocks()
 
-    // Create testing Pinia instance
     setActivePinia(
       createTestingPinia({
-        createSpy: vi.fn
+        createSpy: vi.fn,
+        stubActions: false
       })
     )
 
-    // Setup mock composables
-    vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
-      id: 'node-library-tab',
-      title: 'Node Library',
-      type: 'custom',
-      render: () => null
-    } as ReturnType<typeof useNodeLibrarySidebarTab>)
-
-    // Setup mock utility functions
     vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
       const typedItem = item as { isNode?: boolean }
       return typedItem?.isNode !== false
@@ -187,4 +175,110 @@ describe('useSelectionState', () => {
       expect(newIsPinned).toBe(false)
     })
   })
+
+  describe('showNodeHelp', () => {
+    test('opens the right side panel Info tab when a single node is selected', () => {
+      const canvasStore = useCanvasStore()
+      const node = createMockLGraphNode({ id: 10, type: 'KSampler' })
+      canvasStore.$state.selectedItems = [node]
+
+      const nodeDefStore = useNodeDefStore()
+      vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue({
+        nodePath: 'KSampler'
+      } as ReturnType<typeof nodeDefStore.fromLGraphNode>)
+
+      const rightSidePanelStore = useRightSidePanelStore()
+      const openPanelSpy = vi
+        .spyOn(rightSidePanelStore, 'openPanel')
+        .mockImplementation(() => {})
+
+      const { showNodeHelp } = useSelectionState()
+      showNodeHelp()
+
+      expect(openPanelSpy).toHaveBeenCalledWith('info')
+    })
+
+    test('does nothing when no single node is selected', () => {
+      const canvasStore = useCanvasStore()
+      canvasStore.$state.selectedItems = []
+
+      const rightSidePanelStore = useRightSidePanelStore()
+      const openPanelSpy = vi
+        .spyOn(rightSidePanelStore, 'openPanel')
+        .mockImplementation(() => {})
+
+      const { showNodeHelp } = useSelectionState()
+      showNodeHelp()
+
+      expect(openPanelSpy).not.toHaveBeenCalled()
+    })
+
+    test('does nothing when selection includes more than one item', () => {
+      const canvasStore = useCanvasStore()
+      const node = createMockLGraphNode({ id: 11, type: 'KSampler' })
+      const otherItem = { id: 12, isNode: false } as unknown as Parameters<
+        typeof canvasStore.$state.selectedItems.push
+      >[0]
+      canvasStore.$state.selectedItems = [node, otherItem]
+
+      const nodeDefStore = useNodeDefStore()
+      vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue({
+        nodePath: 'KSampler'
+      } as ReturnType<typeof nodeDefStore.fromLGraphNode>)
+
+      const rightSidePanelStore = useRightSidePanelStore()
+      const openPanelSpy = vi
+        .spyOn(rightSidePanelStore, 'openPanel')
+        .mockImplementation(() => {})
+
+      const { showNodeHelp } = useSelectionState()
+      showNodeHelp()
+
+      expect(openPanelSpy).not.toHaveBeenCalled()
+    })
+
+    test('does nothing when the selected node is a subgraph node', () => {
+      const canvasStore = useCanvasStore()
+      const subgraphNode = createMockLGraphNode({
+        id: 13,
+        type: 'Subgraph'
+      })
+      Object.assign(subgraphNode, { isSubgraphNode: () => true })
+      canvasStore.$state.selectedItems = [subgraphNode]
+
+      const nodeDefStore = useNodeDefStore()
+      vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue({
+        nodePath: 'Subgraph'
+      } as ReturnType<typeof nodeDefStore.fromLGraphNode>)
+
+      const rightSidePanelStore = useRightSidePanelStore()
+      const openPanelSpy = vi
+        .spyOn(rightSidePanelStore, 'openPanel')
+        .mockImplementation(() => {})
+
+      const { showNodeHelp } = useSelectionState()
+      showNodeHelp()
+
+      expect(openPanelSpy).not.toHaveBeenCalled()
+    })
+
+    test('does nothing when no node definition is available', () => {
+      const canvasStore = useCanvasStore()
+      const node = createMockLGraphNode({ id: 14, type: 'UnknownType' })
+      canvasStore.$state.selectedItems = [node]
+
+      const nodeDefStore = useNodeDefStore()
+      vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(null)
+
+      const rightSidePanelStore = useRightSidePanelStore()
+      const openPanelSpy = vi
+        .spyOn(rightSidePanelStore, 'openPanel')
+        .mockImplementation(() => {})
+
+      const { showNodeHelp } = useSelectionState()
+      showNodeHelp()
+
+      expect(openPanelSpy).not.toHaveBeenCalled()
+    })
+  })
 })

src/composables/graph/useSelectionState.ts

@@ -1,14 +1,12 @@
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 
@@ -25,9 +23,7 @@ export interface NodeSelectionState {
 export function useSelectionState() {
   const canvasStore = useCanvasStore()
   const nodeDefStore = useNodeDefStore()
-  const sidebarTabStore = useSidebarTabStore()
-  const nodeHelpStore = useNodeHelpStore()
-  const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+  const rightSidePanelStore = useRightSidePanelStore()
 
   const { selectedItems } = storeToRefs(canvasStore)
 
@@ -98,27 +94,10 @@ export function useSelectionState() {
   const computeSelectionFlags = (): NodeSelectionState =>
     computeSelectionStatesFromNodes(selectedNodes.value)
 
-  /** Toggle node help sidebar/panel for the single selected node (if any). */
+  /** Open the right side panel Info tab for the selected node. */
   const showNodeHelp = () => {
-    const def = nodeDef.value
-    if (!def) return
-
-    const isSidebarActive =
-      sidebarTabStore.activeSidebarTabId === nodeLibraryTabId
-    const currentHelpNode = nodeHelpStore.currentHelpNode
-    const isSameNodeHelpOpen =
-      isSidebarActive &&
-      nodeHelpStore.isHelpOpen &&
-      currentHelpNode?.nodePath === def.nodePath
-
-    if (isSameNodeHelpOpen) {
-      nodeHelpStore.closeHelp()
-      sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-      return
-    }
-
-    if (!isSidebarActive) sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-    nodeHelpStore.openHelp(def)
+    if (!nodeDef.value || !isSingleNode.value || isSingleSubgraph.value) return
+    rightSidePanelStore.openPanel('info')
   }
 
   return {

src/composables/maskeditor/gpuUtils.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildStrokePoints, clampDirtyRect } from './gpuUtils'
+
+const uninit = {
+  minX: Infinity,
+  minY: Infinity,
+  maxX: -Infinity,
+  maxY: -Infinity
+}
+
+describe('clampDirtyRect', () => {
+  it('returns full canvas when dirty rect is uninitialised', () => {
+    expect(clampDirtyRect(uninit, 100, 200)).toEqual({
+      dx: 0,
+      dy: 0,
+      dw: 100,
+      dh: 200
+    })
+  })
+
+  it('returns the clamped rect when fully inside canvas bounds', () => {
+    const rect = { minX: 10, minY: 20, maxX: 60, maxY: 90 }
+    expect(clampDirtyRect(rect, 100, 200)).toEqual({
+      dx: 10,
+      dy: 20,
+      dw: 50,
+      dh: 70
+    })
+  })
+
+  it('clamps rect that extends beyond canvas edges', () => {
+    const rect = { minX: -5, minY: -10, maxX: 120, maxY: 250 }
+    expect(clampDirtyRect(rect, 100, 200)).toEqual({
+      dx: 0,
+      dy: 0,
+      dw: 100,
+      dh: 200
+    })
+  })
+
+  it('returns full canvas when the clamped area has zero width', () => {
+    const rect = { minX: 50, minY: 10, maxX: 50, maxY: 80 }
+    expect(clampDirtyRect(rect, 100, 200)).toEqual({
+      dx: 0,
+      dy: 0,
+      dw: 100,
+      dh: 200
+    })
+  })
+
+  it('returns full canvas when the clamped area has zero height', () => {
+    const rect = { minX: 10, minY: 50, maxX: 80, maxY: 50 }
+    expect(clampDirtyRect(rect, 100, 200)).toEqual({
+      dx: 0,
+      dy: 0,
+      dw: 100,
+      dh: 200
+    })
+  })
+
+  it('floors dx/dy and ceils the far edges', () => {
+    const rect = { minX: 10.7, minY: 20.3, maxX: 59.2, maxY: 89.9 }
+    const result = clampDirtyRect(rect, 100, 200)
+    expect(result.dx).toBe(10)
+    expect(result.dy).toBe(20)
+    expect(result.dw).toBe(60 - 10) // ceil(59.2)=60, dx=10
+    expect(result.dh).toBe(90 - 20) // ceil(89.9)=90, dy=20
+  })
+})
+
+describe('buildStrokePoints', () => {
+  it('returns input points as-is when skipResampling is true', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 100, y: 100 }
+    ]
+    const result = buildStrokePoints(points, true, 10)
+    expect(result).toHaveLength(2)
+    expect(result[0]).toEqual({ x: 0, y: 0, pressure: 1.0 })
+    expect(result[1]).toEqual({ x: 100, y: 100, pressure: 1.0 })
+  })
+
+  it('returns empty array for empty input', () => {
+    expect(buildStrokePoints([], false, 10)).toHaveLength(0)
+    expect(buildStrokePoints([], true, 10)).toHaveLength(0)
+  })
+
+  it('returns empty array for a single point (no segments to interpolate)', () => {
+    expect(buildStrokePoints([{ x: 5, y: 5 }], false, 10)).toHaveLength(0)
+  })
+
+  it('interpolates a horizontal segment into multiple evenly-spaced points', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 30, y: 0 }
+    ]
+    const result = buildStrokePoints(points, false, 10)
+    // 30px distance / 10 stepSize = 3 steps → 4 points (s=0,1,2,3)
+    expect(result).toHaveLength(4)
+    expect(result[0]).toMatchObject({ x: 0, y: 0 })
+    expect(result[3]).toMatchObject({ x: 30, y: 0 })
+    result.forEach((p) => expect(p.pressure).toBe(1.0))
+  })
+
+  it('uses at least one step when points are very close together', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0.1, y: 0 }
+    ]
+    // distance 0.1 < stepSize 10 → steps=1 → 2 points
+    const result = buildStrokePoints(points, false, 10)
+    expect(result).toHaveLength(2)
+  })
+
+  it('interpolates all pressure values to 1.0', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 50, y: 50 }
+    ]
+    const result = buildStrokePoints(points, false, 10)
+    result.forEach((p) => expect(p.pressure).toBe(1.0))
+  })
+})

src/composables/maskeditor/gpuUtils.ts

@@ -0,0 +1,60 @@
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+import type { DirtyRect } from './brushDrawingUtils'
+
+/**
+ * Computes the clamped dirty-rect coordinates for a putImageData call.
+ *
+ * Returns the full canvas dimensions when the dirty rect is uninitialised
+ * (Infinity sentinels) or the resulting area has zero/negative size.
+ */
+export function clampDirtyRect(
+  rect: DirtyRect,
+  canvasWidth: number,
+  canvasHeight: number
+): { dx: number; dy: number; dw: number; dh: number } {
+  const full = { dx: 0, dy: 0, dw: canvasWidth, dh: canvasHeight }
+  if (rect.minX === Infinity || rect.maxX === -Infinity) return full
+
+  const dx = Math.floor(Math.max(0, rect.minX))
+  const dy = Math.floor(Math.max(0, rect.minY))
+  const dw = Math.ceil(Math.min(canvasWidth, rect.maxX)) - dx
+  const dh = Math.ceil(Math.min(canvasHeight, rect.maxY)) - dy
+
+  return dw > 0 && dh > 0 ? { dx, dy, dw, dh } : full
+}
+
+/**
+ * Linearly interpolates a sequence of points at a fixed step size,
+ * returning GPU-ready stroke points with pressure=1.
+ *
+ * When skipResampling is true the input points are returned as-is (used
+ * during live preview where the caller has already handled spacing).
+ */
+export function buildStrokePoints(
+  points: Point[],
+  skipResampling: boolean,
+  stepSize: number
+): { x: number; y: number; pressure: number }[] {
+  if (skipResampling) {
+    return points.map((p) => ({ x: p.x, y: p.y, pressure: 1.0 }))
+  }
+  const result: { x: number; y: number; pressure: number }[] = []
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i]
+    const p2 = points[i + 1]
+    const steps = Math.max(
+      1,
+      Math.ceil(Math.hypot(p2.x - p1.x, p2.y - p1.y) / stepSize)
+    )
+    for (let s = 0; s <= steps; s++) {
+      const t = s / steps
+      result.push({
+        x: p1.x + (p2.x - p1.x) * t,
+        y: p1.y + (p2.y - p1.y) * t,
+        pressure: 1.0
+      })
+    }
+  }
+  return result
+}

src/composables/maskeditor/useBrushDrawing.test.ts

@@ -0,0 +1,295 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope, ref } from 'vue'
+import type { EffectScope } from 'vue'
+
+// vi.hoisted runs before imports — only vi.fn() is safe here (no Vue)
+const saveStateSpy = vi.hoisted(() => vi.fn())
+
+const mockStoreDef = vi.hoisted(() => ({
+  brushSettings: {
+    size: 20,
+    hardness: 0.9,
+    opacity: 1,
+    stepSize: 5,
+    type: 'arc' as string
+  },
+  currentTool: 'pen' as string,
+  activeLayer: 'mask' as string,
+  maskCanvas: null as HTMLCanvasElement | null,
+  maskCtx: null as CanvasRenderingContext2D | null,
+  rgbCanvas: null as HTMLCanvasElement | null,
+  rgbCtx: null as CanvasRenderingContext2D | null,
+  maskBlendMode: 'black',
+  maskOpacity: 0.8,
+  maskColor: { r: 0, g: 0, b: 0 },
+  rgbColor: '#FF0000',
+  canvasHistory: { saveState: saveStateSpy }
+}))
+
+// vi.mock factory runs after hoisting — ref/computed from Vue are available
+vi.mock('./useGPUResources', () => {
+  // Singletons shared across all calls to useGPUResources() in this test file
+  const isSavingHistory = ref(false)
+  const dirtyRect = ref({
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  })
+  const hasRenderer = ref(false)
+  const previewCanvas = ref<HTMLCanvasElement | null>(null)
+  const prepareStroke = vi.fn()
+  const clearPreview = vi.fn()
+  const compositeStroke = vi.fn()
+  const copyGpuToCanvas = vi
+    .fn()
+    .mockResolvedValue({ maskData: undefined, rgbData: undefined })
+  return {
+    useGPUResources: () => ({
+      isSavingHistory,
+      dirtyRect,
+      hasRenderer,
+      previewCanvas,
+      prepareStroke,
+      clearPreview,
+      compositeStroke,
+      copyGpuToCanvas,
+      gpuRender: vi.fn(),
+      gpuDrawPoint: vi.fn(),
+      clearGPU: vi.fn(),
+      destroy: vi.fn(),
+      initGPUResources: vi.fn().mockResolvedValue(undefined),
+      initPreviewCanvas: vi.fn()
+    })
+  }
+})
+
+vi.mock('./useCoordinateTransform', () => ({
+  useCoordinateTransform: () => ({
+    screenToCanvas: vi.fn(({ x, y }: { x: number; y: number }) => ({ x, y }))
+  })
+}))
+
+vi.mock('./useBrushPersistence', () => ({
+  useBrushPersistence: () => ({ loadAndApply: vi.fn(), save: vi.fn() })
+}))
+
+vi.mock('./useBrushAdjustment', () => ({
+  useBrushAdjustment: () => ({
+    startBrushAdjustment: vi.fn(),
+    handleBrushAdjustment: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/maskEditorStore', () => ({
+  useMaskEditorStore: vi.fn(() => mockStoreDef)
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: { registerExtension: vi.fn() }
+}))
+
+import { useGPUResources } from './useGPUResources'
+import { useBrushDrawing } from './useBrushDrawing'
+
+function makePointerEvent(
+  x: number,
+  y: number,
+  opts: { buttons?: number; shiftKey?: boolean } = {}
+): PointerEvent {
+  return {
+    offsetX: x,
+    offsetY: y,
+    buttons: opts.buttons ?? 1,
+    shiftKey: opts.shiftKey ?? false,
+    preventDefault: vi.fn()
+  } as unknown as PointerEvent
+}
+
+function makeMockCtx(): CanvasRenderingContext2D {
+  const gradient = { addColorStop: vi.fn() }
+  return {
+    beginPath: vi.fn(),
+    fill: vi.fn(),
+    rect: vi.fn(),
+    arc: vi.fn(),
+    fillStyle: '',
+    drawImage: vi.fn(),
+    createRadialGradient: vi.fn(() => gradient),
+    globalCompositeOperation: 'source-over'
+  } as unknown as CanvasRenderingContext2D
+}
+
+let scope: EffectScope | null = null
+
+function setup() {
+  scope = effectScope()
+  return scope.run(() => useBrushDrawing())!
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+
+  const mockCtx = makeMockCtx()
+  const mockCanvas = {
+    width: 200,
+    height: 200,
+    style: { opacity: '' }
+  } as unknown as HTMLCanvasElement
+
+  mockStoreDef.maskCanvas = mockCanvas
+  mockStoreDef.maskCtx = mockCtx
+  mockStoreDef.rgbCanvas = mockCanvas
+  mockStoreDef.rgbCtx = mockCtx
+  mockStoreDef.currentTool = 'pen'
+  mockStoreDef.activeLayer = 'mask'
+
+  const gpu = useGPUResources()
+  gpu.isSavingHistory.value = false
+  gpu.hasRenderer.value = false
+  gpu.previewCanvas.value = null
+  gpu.dirtyRect.value = {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  }
+})
+
+afterEach(() => {
+  scope?.stop()
+  scope = null
+})
+
+describe('startDrawing', () => {
+  it('calls prepareStroke on the GPU resources', async () => {
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    expect(useGPUResources().prepareStroke).toHaveBeenCalledOnce()
+  })
+
+  it('sets DestinationOut composition when tool is eraser', async () => {
+    mockStoreDef.currentTool = 'eraser'
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    expect(mockStoreDef.maskCtx!.globalCompositeOperation).toBe(
+      'destination-out'
+    )
+  })
+
+  it('sets SourceOver composition when tool is mask pen', async () => {
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    expect(mockStoreDef.maskCtx!.globalCompositeOperation).toBe('source-over')
+  })
+
+  it('sets DestinationOut composition when right mouse button is used', async () => {
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50, { buttons: 2 }))
+    expect(mockStoreDef.maskCtx!.globalCompositeOperation).toBe(
+      'destination-out'
+    )
+  })
+})
+
+describe('startDrawing error handling', () => {
+  it('catches initShape errors and resets drawing state', async () => {
+    mockStoreDef.maskCtx = null
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[useBrushDrawing] Failed to start drawing:',
+      expect.any(Error)
+    )
+    expect(mockStoreDef.maskCtx).toBeNull()
+    consoleSpy.mockRestore()
+  })
+})
+
+describe('startDrawing shift+click', () => {
+  it('draws a line from the previous point when shift is held', async () => {
+    const { startDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await startDrawing(makePointerEvent(100, 50, { shiftKey: true }))
+    expect(
+      (mockStoreDef.maskCtx as unknown as ReturnType<typeof makeMockCtx>)
+        .beginPath
+    ).toHaveBeenCalled()
+  })
+})
+
+describe('handleDrawing', () => {
+  it('updates smoothingLastDrawTime after each move event', async () => {
+    const rafSpy = vi
+      .spyOn(window, 'requestAnimationFrame')
+      .mockImplementation((cb) => {
+        cb(0)
+        return 0
+      })
+    const { startDrawing, handleDrawing } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await handleDrawing(makePointerEvent(55, 55))
+    expect(rafSpy).toHaveBeenCalled()
+    rafSpy.mockRestore()
+  })
+})
+
+describe('drawEnd canvas visibility', () => {
+  it('restores rgb canvas opacity when activeLayer is rgb', async () => {
+    mockStoreDef.activeLayer = 'rgb'
+    const mockRgbCanvas = {
+      width: 200,
+      height: 200,
+      style: { opacity: '' }
+    } as unknown as HTMLCanvasElement
+    mockStoreDef.rgbCanvas = mockRgbCanvas
+    const { startDrawing, drawEnd } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await drawEnd(makePointerEvent(60, 60))
+    expect(mockRgbCanvas.style.opacity).toBe('1')
+  })
+
+  it('restores preview canvas opacity to 1 after drawEnd', async () => {
+    const gpu = useGPUResources()
+    const mockPreviewCanvas = {
+      style: { opacity: '' }
+    } as unknown as HTMLCanvasElement
+    gpu.previewCanvas.value = mockPreviewCanvas
+    const { startDrawing, drawEnd } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await drawEnd(makePointerEvent(60, 60))
+    expect(mockPreviewCanvas.style.opacity).toBe('1')
+  })
+})
+
+describe('drawEnd', () => {
+  it('calls compositeStroke indicating the active layer and erasing state', async () => {
+    const { startDrawing, drawEnd } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await drawEnd(makePointerEvent(60, 60))
+    expect(useGPUResources().compositeStroke).toHaveBeenCalledOnce()
+    expect(useGPUResources().compositeStroke).toHaveBeenCalledWith(false, false)
+  })
+
+  it('calls clearPreview to clean up the GPU overlay', async () => {
+    const { startDrawing, drawEnd } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await drawEnd(makePointerEvent(60, 60))
+    expect(useGPUResources().clearPreview).toHaveBeenCalledOnce()
+  })
+
+  it('saves canvas history on stroke completion', async () => {
+    const { startDrawing, drawEnd } = setup()
+    await startDrawing(makePointerEvent(50, 50))
+    await drawEnd(makePointerEvent(60, 60))
+    expect(saveStateSpy).toHaveBeenCalledOnce()
+  })
+
+  it('is a no-op when drawing was never started', async () => {
+    const { drawEnd } = setup()
+    await drawEnd(makePointerEvent(60, 60))
+    expect(useGPUResources().compositeStroke).not.toHaveBeenCalled()
+    expect(saveStateSpy).not.toHaveBeenCalled()
+  })
+})

src/composables/maskeditor/useGPUResources.test.ts

@@ -0,0 +1,192 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope, nextTick, reactive } from 'vue'
+import type { EffectScope } from 'vue'
+
+vi.mock('typegpu', () => ({
+  tgpu: {
+    init: vi.fn().mockRejectedValue(new Error('WebGPU not supported'))
+  }
+}))
+
+vi.mock('./gpu/GPUBrushRenderer', () => ({
+  GPUBrushRenderer: vi.fn()
+}))
+
+const mockStore = reactive({
+  tgpuRoot: null as unknown,
+  maskCanvas: null as HTMLCanvasElement | null,
+  rgbCanvas: null as HTMLCanvasElement | null,
+  maskCtx: null as CanvasRenderingContext2D | null,
+  rgbCtx: null as CanvasRenderingContext2D | null,
+  clearTrigger: 0,
+  canvasHistory: { currentStateIndex: 0 },
+  gpuTexturesNeedRecreation: false,
+  gpuTextureWidth: 0,
+  gpuTextureHeight: 0,
+  pendingGPUMaskData: null as null,
+  pendingGPURgbData: null as null,
+  brushSettings: {
+    size: 20,
+    hardness: 0.9,
+    opacity: 1,
+    stepSize: 5,
+    type: 'arc'
+  },
+  activeLayer: 'mask',
+  currentTool: 'pen',
+  maskColor: { r: 0, g: 0, b: 0 },
+  rgbColor: '#FF0000'
+})
+
+vi.mock('@/stores/maskEditorStore', () => ({
+  useMaskEditorStore: vi.fn(() => mockStore)
+}))
+
+import { resetDirtyRect } from './brushDrawingUtils'
+import { useGPUResources } from './useGPUResources'
+
+let scope: EffectScope | null = null
+
+function setup() {
+  scope = effectScope()
+  return scope.run(() => useGPUResources())!
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mockStore.tgpuRoot = null
+  mockStore.maskCanvas = null
+  mockStore.rgbCanvas = null
+  mockStore.maskCtx = null
+  mockStore.rgbCtx = null
+  mockStore.clearTrigger = 0
+  mockStore.canvasHistory.currentStateIndex = 0
+  mockStore.gpuTexturesNeedRecreation = false
+})
+
+afterEach(() => {
+  scope?.stop()
+  scope = null
+})
+
+describe('initial reactive state', () => {
+  it('hasRenderer is false when no renderer exists', () => {
+    const { hasRenderer } = setup()
+    expect(hasRenderer.value).toBe(false)
+  })
+
+  it('isSavingHistory is false initially', () => {
+    const { isSavingHistory } = setup()
+    expect(isSavingHistory.value).toBe(false)
+  })
+
+  it('previewCanvas is null initially', () => {
+    const { previewCanvas } = setup()
+    expect(previewCanvas.value).toBeNull()
+  })
+
+  it('dirtyRect starts with uninitialised sentinel values', () => {
+    const { dirtyRect } = setup()
+    expect(dirtyRect.value).toEqual(resetDirtyRect())
+  })
+})
+
+describe('no-op when GPU is not initialised', () => {
+  it('prepareStroke does not throw', () => {
+    const { prepareStroke } = setup()
+    expect(() => prepareStroke()).not.toThrow()
+  })
+
+  it('clearPreview does not throw', () => {
+    const { clearPreview } = setup()
+    expect(() => clearPreview()).not.toThrow()
+  })
+
+  it('clearGPU does not throw', () => {
+    const { clearGPU } = setup()
+    expect(() => clearGPU()).not.toThrow()
+  })
+
+  it('destroy does not throw', () => {
+    const { destroy } = setup()
+    expect(() => destroy()).not.toThrow()
+  })
+
+  it('gpuRender does not throw with empty or non-empty point arrays', () => {
+    const { gpuRender } = setup()
+    expect(() => gpuRender([])).not.toThrow()
+    expect(() => gpuRender([{ x: 10, y: 20 }])).not.toThrow()
+  })
+
+  it('compositeStroke does not throw for any combination of flags', () => {
+    const { compositeStroke } = setup()
+    expect(() => compositeStroke(false, false)).not.toThrow()
+    expect(() => compositeStroke(true, true)).not.toThrow()
+  })
+})
+
+describe('initGPUResources', () => {
+  it('leaves hasRenderer false when TypeGPU initialisation fails', async () => {
+    const { initGPUResources, hasRenderer } = setup()
+    await initGPUResources()
+    expect(hasRenderer.value).toBe(false)
+  })
+})
+
+describe('copyGpuToCanvas', () => {
+  it('rejects with a descriptive error when GPU resources are not ready', async () => {
+    const { copyGpuToCanvas } = setup()
+    await expect(copyGpuToCanvas()).rejects.toThrow('GPU resources not ready')
+  })
+})
+
+describe('watchers', () => {
+  it('clearTrigger watcher calls clearGPU without throwing', async () => {
+    setup()
+    mockStore.clearTrigger++
+    await nextTick()
+  })
+
+  it('currentStateIndex watcher short-circuits when isSavingHistory is true', async () => {
+    const { isSavingHistory } = setup()
+    isSavingHistory.value = true
+    mockStore.canvasHistory.currentStateIndex++
+    await nextTick()
+  })
+
+  it('currentStateIndex watcher calls updateGPUFromCanvas when not saving history', async () => {
+    setup()
+    mockStore.canvasHistory.currentStateIndex++
+    await nextTick()
+  })
+
+  it('gpuTexturesNeedRecreation watcher returns early when device is not initialised', async () => {
+    setup()
+    mockStore.gpuTexturesNeedRecreation = true
+    await nextTick()
+  })
+})
+
+describe('initGPUResources with pre-existing tgpuRoot', () => {
+  it('returns early with a warning when canvas contexts are not ready', async () => {
+    const { initGPUResources, hasRenderer } = setup()
+    mockStore.tgpuRoot = { device: {} } as unknown
+    await initGPUResources()
+    expect(hasRenderer.value).toBe(false)
+  })
+})
+
+describe('initPreviewCanvas', () => {
+  it('returns early when device is not initialised', () => {
+    const { initPreviewCanvas } = setup()
+    const canvas = document.createElement('canvas')
+    expect(() => initPreviewCanvas(canvas)).not.toThrow()
+  })
+})
+
+describe('gpuDrawPoint', () => {
+  it('resolves immediately when renderer is not initialised', async () => {
+    const { gpuDrawPoint } = setup()
+    await expect(gpuDrawPoint({ x: 10, y: 20 })).resolves.toBeUndefined()
+  })
+})

src/composables/maskeditor/useGPUResources.ts

@@ -0,0 +1,624 @@
+/// <reference types="@webgpu/types" />
+import { onUnmounted, ref, watch } from 'vue'
+import { tgpu } from 'typegpu'
+
+import { BrushShape } from '@/extensions/core/maskeditor/types'
+import type { Point } from '@/extensions/core/maskeditor/types'
+import { useMaskEditorStore } from '@/stores/maskEditorStore'
+import { parseToRgb } from '@/utils/colorUtil'
+
+import type { DirtyRect } from './brushDrawingUtils'
+import {
+  premultiplyData,
+  resetDirtyRect,
+  updateDirtyRect
+} from './brushDrawingUtils'
+import { getEffectiveBrushSize, getEffectiveHardness } from './brushUtils'
+import { GPUBrushRenderer } from './gpu/GPUBrushRenderer'
+import { buildStrokePoints, clampDirtyRect } from './gpuUtils'
+
+export function useGPUResources() {
+  const store = useMaskEditorStore()
+
+  // GPU state — plain variables, not reactive, as Vue doesn't need to track them
+  let maskTexture: GPUTexture | null = null
+  let rgbTexture: GPUTexture | null = null
+  let device: GPUDevice | null = null
+  let renderer: GPUBrushRenderer | null = null
+  let previewContext: GPUCanvasContext | null = null
+
+  // Readback buffers
+  let readbackStorageMask: GPUBuffer | null = null
+  let readbackStorageRgb: GPUBuffer | null = null
+  let readbackStagingMask: GPUBuffer | null = null
+  let readbackStagingRgb: GPUBuffer | null = null
+  let currentBufferSize = 0
+
+  // Reactive state shared with useBrushDrawing
+  const previewCanvas = ref<HTMLCanvasElement | null>(null)
+  const isSavingHistory = ref(false)
+  const dirtyRect = ref<DirtyRect>(resetDirtyRect())
+
+  const hasRenderer = ref(false)
+
+  const isRecreatingTextures = ref(false)
+
+  // ── Watchers ────────────────────────────────────────────────────────────────
+
+  watch(
+    () => store.clearTrigger,
+    () => clearGPU()
+  )
+
+  watch(
+    () => store.canvasHistory.currentStateIndex,
+    async () => {
+      if (isSavingHistory.value) return
+      await updateGPUFromCanvas()
+      if (renderer && previewContext) renderer.clearPreview(previewContext)
+    }
+  )
+
+  watch(
+    () => store.gpuTexturesNeedRecreation,
+    async (needsRecreation) => {
+      if (
+        !needsRecreation ||
+        !device ||
+        !store.maskCanvas ||
+        isRecreatingTextures.value
+      )
+        return
+
+      /* c8 ignore start */
+      isRecreatingTextures.value = true
+
+      const width = store.gpuTextureWidth
+      const height = store.gpuTextureHeight
+
+      try {
+        maskTexture?.destroy()
+        maskTexture = null
+        rgbTexture?.destroy()
+        rgbTexture = null
+
+        maskTexture = createTexture(device, width, height)
+        rgbTexture = createTexture(device, width, height)
+
+        if (store.pendingGPUMaskData && store.pendingGPURgbData) {
+          device.queue.writeTexture(
+            { texture: maskTexture },
+            store.pendingGPUMaskData,
+            { bytesPerRow: width * 4 },
+            { width, height }
+          )
+          device.queue.writeTexture(
+            { texture: rgbTexture },
+            store.pendingGPURgbData,
+            { bytesPerRow: width * 4 },
+            { width, height }
+          )
+        } else {
+          await updateGPUFromCanvas()
+        }
+
+        if (previewCanvas.value && renderer) {
+          previewCanvas.value.width = width
+          previewCanvas.value.height = height
+        }
+
+        resizeReadbackBuffers(device, width, height)
+      } catch (error) {
+        console.error(
+          '[useGPUResources] Failed to recreate GPU textures:',
+          error
+        )
+      } finally {
+        store.gpuTexturesNeedRecreation = false
+        store.gpuTextureWidth = 0
+        store.gpuTextureHeight = 0
+        store.pendingGPUMaskData = null
+        store.pendingGPURgbData = null
+        isRecreatingTextures.value = false
+      }
+      /* c8 ignore stop */
+    }
+  )
+
+  onUnmounted(() => {
+    // c8 ignore start
+    renderer?.destroy()
+    renderer = null
+    hasRenderer.value = false
+    maskTexture?.destroy()
+    maskTexture = null
+    rgbTexture?.destroy()
+    rgbTexture = null
+    readbackStorageMask?.destroy()
+    readbackStorageMask = null
+    readbackStorageRgb?.destroy()
+    readbackStorageRgb = null
+    readbackStagingMask?.destroy()
+    readbackStagingMask = null
+    readbackStagingRgb?.destroy()
+    readbackStagingRgb = null
+    previewContext = null
+    previewCanvas.value = null
+    dirtyRect.value = resetDirtyRect()
+    // Device is managed by TGPU root; do not destroy it here
+    // c8 ignore stop
+  })
+
+  // ── Helpers ─────────────────────────────────────────────────────────────────
+
+  /* c8 ignore start — requires a live GPUDevice */
+  function createTexture(
+    gpuDevice: GPUDevice,
+    width: number,
+    height: number
+  ): GPUTexture {
+    return gpuDevice.createTexture({
+      size: [width, height],
+      format: 'rgba8unorm',
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.STORAGE_BINDING |
+        GPUTextureUsage.RENDER_ATTACHMENT |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.COPY_SRC
+    })
+  }
+
+  function resizeReadbackBuffers(
+    gpuDevice: GPUDevice,
+    width: number,
+    height: number
+  ): void {
+    const bufferSize = width * height * 4
+    if (currentBufferSize === bufferSize) return
+
+    readbackStorageMask?.destroy()
+    readbackStorageRgb?.destroy()
+    readbackStagingMask?.destroy()
+    readbackStagingRgb?.destroy()
+
+    readbackStorageMask = gpuDevice.createBuffer({
+      size: bufferSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    })
+    readbackStorageRgb = gpuDevice.createBuffer({
+      size: bufferSize,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    })
+    readbackStagingMask = gpuDevice.createBuffer({
+      size: bufferSize,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+    })
+    readbackStagingRgb = gpuDevice.createBuffer({
+      size: bufferSize,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+    })
+    currentBufferSize = bufferSize
+  }
+  /* c8 ignore stop */
+
+  // ── Internal functions ───────────────────────────────────────────────────────
+
+  async function initTypeGPU(): Promise<void> {
+    if (store.tgpuRoot) {
+      /* c8 ignore start */
+      device = store.tgpuRoot.device
+      return
+      /* c8 ignore stop */
+    }
+    try {
+      /* c8 ignore start — requires functional WebGPU hardware */
+      const root = await tgpu.init()
+      store.tgpuRoot = root
+      device = root.device
+      console.warn('✅ TypeGPU initialized! Root:', root)
+      console.warn('Device info:', root.device.limits)
+      /* c8 ignore stop */
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      console.warn('Failed to initialize TypeGPU:', message)
+    }
+  }
+
+  async function updateGPUFromCanvas(): Promise<void> {
+    if (
+      !device ||
+      !maskTexture ||
+      !rgbTexture ||
+      !store.maskCanvas ||
+      !store.maskCtx ||
+      !store.rgbCtx
+    )
+      return
+
+    /* c8 ignore start — requires live GPU device and textures */
+    const w = store.maskCanvas.width
+    const h = store.maskCanvas.height
+
+    const maskData = store.maskCtx.getImageData(0, 0, w, h)
+    premultiplyData(maskData.data)
+    device.queue.writeTexture(
+      { texture: maskTexture },
+      maskData.data,
+      { bytesPerRow: w * 4 },
+      { width: w, height: h }
+    )
+
+    const rgbData = store.rgbCtx.getImageData(0, 0, w, h)
+    premultiplyData(rgbData.data)
+    device.queue.writeTexture(
+      { texture: rgbTexture },
+      rgbData.data,
+      { bytesPerRow: w * 4 },
+      { width: w, height: h }
+    )
+    /* c8 ignore stop */
+  }
+
+  // ── Public API ───────────────────────────────────────────────────────────────
+
+  async function initGPUResources(): Promise<void> {
+    await initTypeGPU()
+
+    if (!store.tgpuRoot || !device) {
+      console.warn('TypeGPU not initialized, skipping GPU resource setup')
+      return
+    }
+    if (
+      !store.maskCanvas ||
+      !store.rgbCanvas ||
+      !store.maskCtx ||
+      !store.rgbCtx
+    ) {
+      console.warn('Canvas contexts not ready, skipping GPU resource setup')
+      return
+    }
+
+    const w = store.maskCanvas.width
+    const h = store.maskCanvas.height
+
+    /* c8 ignore start — requires functional WebGPU hardware */
+    try {
+      console.warn(`🎨 Initializing GPU resources for ${w}x${h} canvas`)
+      maskTexture = createTexture(device, w, h)
+      rgbTexture = createTexture(device, w, h)
+      await updateGPUFromCanvas()
+      console.warn('✅ GPU resources initialized successfully')
+      renderer = new GPUBrushRenderer(
+        device,
+        navigator.gpu.getPreferredCanvasFormat()
+      )
+      hasRenderer.value = true
+      console.warn('✅ Brush renderer initialized')
+    } catch (error) {
+      console.error('Failed to initialize GPU resources:', error)
+      maskTexture = null
+      rgbTexture = null
+    }
+    /* c8 ignore stop */
+  }
+
+  function initPreviewCanvas(canvas: HTMLCanvasElement): void {
+    if (!device) return
+    /* c8 ignore start — requires live GPUDevice and WebGPU canvas context */
+    const ctx = canvas.getContext('webgpu')
+    if (!ctx) return
+    ctx.configure({
+      device,
+      format: navigator.gpu.getPreferredCanvasFormat(),
+      alphaMode: 'premultiplied'
+    })
+    previewContext = ctx
+    previewCanvas.value = canvas
+    console.warn('✅ Preview Canvas Initialized')
+    /* c8 ignore stop */
+  }
+
+  function clearGPU(): void {
+    if (!device || !maskTexture || !rgbTexture || !store.maskCanvas) return
+    /* c8 ignore start — requires live GPUDevice and textures */
+    const w = store.maskCanvas.width
+    const h = store.maskCanvas.height
+    const zeros = new Uint8Array(w * h * 4)
+    device.queue.writeTexture(
+      { texture: maskTexture },
+      zeros,
+      { bytesPerRow: w * 4 },
+      { width: w, height: h }
+    )
+    device.queue.writeTexture(
+      { texture: rgbTexture },
+      zeros,
+      { bytesPerRow: w * 4 },
+      { width: w, height: h }
+    )
+    /* c8 ignore stop */
+  }
+
+  function destroy(): void {
+    renderer?.destroy()
+    maskTexture?.destroy()
+    rgbTexture?.destroy()
+    readbackStorageMask?.destroy()
+    readbackStorageRgb?.destroy()
+    readbackStagingMask?.destroy()
+    readbackStagingRgb?.destroy()
+    renderer = null
+    hasRenderer.value = false
+    maskTexture = null
+    rgbTexture = null
+    readbackStorageMask = null
+    readbackStorageRgb = null
+    readbackStagingMask = null
+    readbackStagingRgb = null
+    currentBufferSize = 0
+    previewContext = null
+    previewCanvas.value = null
+    dirtyRect.value = resetDirtyRect()
+    /* c8 ignore next — tgpuRoot only exists after successful GPU init */
+    if (store.tgpuRoot) {
+      store.tgpuRoot.destroy()
+      store.tgpuRoot = null
+    }
+    device = null
+  }
+
+  // ── Wrappers called by useBrushDrawing ──────────────────────────────────────
+
+  function prepareStroke(): void {
+    if (!renderer || !store.maskCanvas) return
+    /* c8 ignore next */
+    renderer.prepareStroke(store.maskCanvas.width, store.maskCanvas.height)
+  }
+
+  function clearPreview(): void {
+    if (!renderer || !previewContext) return
+    /* c8 ignore next */
+    renderer.clearPreview(previewContext)
+  }
+
+  function compositeStroke(isRgb: boolean, isErasing: boolean): void {
+    if (!renderer || !maskTexture || !rgbTexture || !store.maskCanvas) return
+    /* c8 ignore start — requires live renderer */
+    const targetTex = isRgb ? rgbTexture : maskTexture
+    const { size, hardness, opacity, type } = store.brushSettings
+    const effectiveSize = getEffectiveBrushSize(size, hardness)
+    const effectiveHardness = getEffectiveHardness(
+      size,
+      hardness,
+      effectiveSize
+    )
+    const brushShape = type === BrushShape.Rect ? 1 : 0
+    renderer.compositeStroke(targetTex.createView(), {
+      opacity,
+      color: [0, 0, 0],
+      hardness: effectiveHardness,
+      screenSize: [store.maskCanvas.width, store.maskCanvas.height],
+      brushShape,
+      isErasing
+    })
+    /* c8 ignore stop */
+  }
+
+  async function copyGpuToCanvas(): Promise<{
+    maskData: ImageData
+    rgbData: ImageData
+  }> {
+    if (
+      !device ||
+      !maskTexture ||
+      !rgbTexture ||
+      !store.maskCanvas ||
+      !store.rgbCanvas ||
+      !store.maskCtx ||
+      !store.rgbCtx ||
+      !renderer
+    )
+      throw new Error('GPU resources not ready')
+
+    /* c8 ignore start — requires live GPU device, textures and renderer */
+    const width = store.maskCanvas.width
+    const height = store.maskCanvas.height
+
+    resizeReadbackBuffers(device, width, height)
+
+    renderer.prepareReadback(maskTexture, readbackStorageMask!)
+    renderer.prepareReadback(rgbTexture, readbackStorageRgb!)
+
+    const encoder = device.createCommandEncoder()
+    encoder.copyBufferToBuffer(
+      readbackStorageMask!,
+      0,
+      readbackStagingMask!,
+      0,
+      currentBufferSize
+    )
+    encoder.copyBufferToBuffer(
+      readbackStorageRgb!,
+      0,
+      readbackStagingRgb!,
+      0,
+      currentBufferSize
+    )
+    device.queue.submit([encoder.finish()])
+
+    await Promise.all([
+      readbackStagingMask!.mapAsync(GPUMapMode.READ),
+      readbackStagingRgb!.mapAsync(GPUMapMode.READ)
+    ])
+
+    const maskDataArr = new Uint8ClampedArray(
+      readbackStagingMask!.getMappedRange().slice(0)
+    )
+    const rgbDataArr = new Uint8ClampedArray(
+      readbackStagingRgb!.getMappedRange().slice(0)
+    )
+    readbackStagingMask!.unmap()
+    readbackStagingRgb!.unmap()
+
+    const maskImageData = new ImageData(maskDataArr, width, height)
+    const rgbImageData = new ImageData(rgbDataArr, width, height)
+
+    const { dx, dy, dw, dh } = clampDirtyRect(dirtyRect.value, width, height)
+    store.maskCtx.putImageData(maskImageData, 0, 0, dx, dy, dw, dh)
+    store.rgbCtx.putImageData(rgbImageData, 0, 0, dx, dy, dw, dh)
+
+    return { maskData: maskImageData, rgbData: rgbImageData }
+    /* c8 ignore stop */
+  }
+
+  function gpuRender(points: Point[], skipResampling = false): void {
+    if (!renderer || !maskTexture || !rgbTexture) return
+
+    /* c8 ignore start — requires live renderer */
+    const isRgb = store.activeLayer === 'rgb'
+    const color = resolveColor(isRgb)
+    const stepPercentage =
+      Math.pow(100, store.brushSettings.stepSize / 100) / 100
+    const gpuStepSize = Math.max(1.0, store.brushSettings.size * stepPercentage)
+    const strokePoints = buildStrokePoints(points, skipResampling, gpuStepSize)
+
+    const { size, hardness } = store.brushSettings
+    const effectiveSize = getEffectiveBrushSize(size, hardness)
+    const effectiveHardness = getEffectiveHardness(
+      size,
+      hardness,
+      effectiveSize
+    )
+    const brushShape = store.brushSettings.type === BrushShape.Rect ? 1 : 0
+
+    renderer.renderStrokeToAccumulator(strokePoints, {
+      size: effectiveSize,
+      opacity: 0.5,
+      hardness: effectiveHardness,
+      color,
+      width: store.maskCanvas!.width,
+      height: store.maskCanvas!.height,
+      brushShape
+    })
+
+    for (const p of strokePoints) {
+      dirtyRect.value = updateDirtyRect(
+        dirtyRect.value,
+        p.x,
+        p.y,
+        effectiveSize
+      )
+    }
+
+    if (previewContext) {
+      const isErasing =
+        store.currentTool === 'eraser' ||
+        store.maskCtx?.globalCompositeOperation === 'destination-out'
+      const targetTex = isRgb ? rgbTexture : maskTexture
+      renderer.blitToCanvas(
+        previewContext,
+        {
+          opacity: store.brushSettings.opacity,
+          color,
+          hardness: effectiveHardness,
+          screenSize: [store.maskCanvas!.width, store.maskCanvas!.height],
+          brushShape,
+          isErasing
+        },
+        targetTex ?? undefined
+      )
+    }
+    /* c8 ignore stop */
+  }
+
+  async function gpuDrawPoint(point: Point, opacity = 1): Promise<void> {
+    if (!renderer) return
+
+    /* c8 ignore start — requires live renderer */
+    const width = store.maskCanvas!.width
+    const height = store.maskCanvas!.height
+    const { size, hardness } = store.brushSettings
+    const effectiveSize = getEffectiveBrushSize(size, hardness)
+    const effectiveHardness = getEffectiveHardness(
+      size,
+      hardness,
+      effectiveSize
+    )
+    const brushShape = store.brushSettings.type === BrushShape.Rect ? 1 : 0
+
+    dirtyRect.value = updateDirtyRect(
+      dirtyRect.value,
+      point.x,
+      point.y,
+      effectiveSize
+    )
+
+    renderer.renderStrokeToAccumulator(
+      [{ x: point.x, y: point.y, pressure: opacity }],
+      {
+        size: effectiveSize,
+        opacity: 0.5,
+        hardness: effectiveHardness,
+        color: [1, 1, 1],
+        width,
+        height,
+        brushShape
+      }
+    )
+
+    if (maskTexture && previewContext) {
+      const isRgb = store.activeLayer === 'rgb'
+      const isErasing =
+        store.currentTool === 'eraser' ||
+        store.maskCtx?.globalCompositeOperation === 'destination-out'
+      renderer.blitToCanvas(
+        previewContext,
+        {
+          opacity: store.brushSettings.opacity,
+          color: resolveColor(isRgb),
+          hardness: effectiveHardness,
+          screenSize: [width, height],
+          brushShape,
+          isErasing
+        },
+        undefined
+      )
+    }
+    /* c8 ignore stop */
+  }
+
+  // ── Private helpers ─────────────────────────────────────────────────────────
+
+  /* c8 ignore start — only reachable after successful GPU init */
+  function resolveColor(isRgb: boolean): [number, number, number] {
+    if (isRgb) {
+      const c = parseToRgb(store.rgbColor)
+      return [c.r / 255, c.g / 255, c.b / 255]
+    }
+    const c = store.maskColor as { r: number; g: number; b: number }
+    return [c.r / 255, c.g / 255, c.b / 255]
+  }
+  /* c8 ignore stop */
+
+  return {
+    // Lifecycle — spread into useBrushDrawing's public return
+    initGPUResources,
+    initPreviewCanvas,
+    clearGPU,
+    destroy,
+    // Rendering — called internally by useBrushDrawing
+    gpuRender,
+    gpuDrawPoint,
+    copyGpuToCanvas,
+    // Renderer wrappers — called internally by useBrushDrawing
+    prepareStroke,
+    clearPreview,
+    compositeStroke,
+    // Shared reactive state
+    hasRenderer,
+    previewCanvas,
+    isSavingHistory,
+    dirtyRect
+  }
+}