chore(website): restore drops livestream window to 2026-06-29

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.coderabbit.yaml

@@ -15,11 +15,6 @@ reviews:
       - github-actions[bot]
   pre_merge_checks:
     override_requested_reviewers_only: true
-    # Explicitly disable the built-in docstring coverage check, which is
-    # enabled via organization-level settings. This repo opts out at the
-    # repo level without affecting other org repos.
-    docstrings:
-      mode: 'off'
     custom_checks:
       - name: End-to-end regression coverage for fixes
         mode: error

.github/workflows/ci-tests-e2e-coverage.yaml

@@ -85,16 +85,6 @@ jobs:
             fi
           done
 
-      - name: Strip non-source entries from coverage
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
-        run: |
-          lcov --remove coverage/playwright/coverage.lcov \
-            '*localhost-8188*' \
-            'assets/images/*' \
-            -o coverage/playwright/coverage.lcov \
-            --ignore-errors unused
-          wc -l coverage/playwright/coverage.lcov
-
       - name: Upload merged coverage data
         if: steps.coverage-shards.outputs.has-coverage == 'true'
         uses: actions/upload-artifact@v6
@@ -121,8 +111,7 @@ jobs:
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
             --precision 1 \
-            --ignore-errors source,unmapped,range \
-            --synthesize-missing
+            --ignore-errors source,unmapped
 
       - name: Upload HTML report artifact
         if: steps.coverage-shards.outputs.has-coverage == 'true'

.github/workflows/cla.yml

@@ -1,63 +0,0 @@
-name: CLA Assistant
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_target:
-    types: [opened, synchronize, closed]
-  merge_group:
-
-permissions:
-  actions: write
-  contents: read # 'read' is enough because signatures live in a REMOTE repo
-  pull-requests: write
-  statuses: write
-
-jobs:
-  cla-assistant:
-    runs-on: ubuntu-latest
-    steps:
-      - name: CLA Assistant
-        # Run on PR events, on "recheck" comment, or when someone posts the exact signing phrase.
-        # IMPORTANT: this phrase must match `custom-pr-sign-comment` below.
-        if: >
-          github.event_name == 'pull_request_target' ||
-          github.event.comment.body == 'recheck' ||
-          github.event.comment.body == 'I have read and agree to the Contributor License Agreement'
-        uses: contributor-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # PAT required to write to the centralized signatures repo.
-          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
-        with:
-          # Where the CLA document lives (shown to contributors)
-          path-to-document: https://github.com/Comfy-Org/comfy-cla/blob/main/comfyui_icla.md
-
-          # Centralized signature storage
-          remote-organization-name: comfy-org
-          remote-repository-name: comfy-cla
-          path-to-signatures: signatures/cla.json
-          branch: main
-
-          # Allowlist bots so they don't need to sign (optional, comma-separated).
-          # *[bot] is a catch-all for any GitHub App bot account.
-          allowlist: actions-user,ampagent,claude,coderabbitai[bot],comfy-pr-bot,dependabot[bot],github-actions[bot],copilot-swe-agent[bot],devin-ai-integration[bot],*[bot]
-
-          # Custom PR comment messages
-          custom-notsigned-prcomment: |
-            🎉 Thank you for your contribution, we really appreciate it! 🎉
-
-            Like many open source projects, we require contributors to sign our [Contributor License Agreement (CLA)](https://github.com/Comfy-Org/comfy-cla/blob/main/comfyui_icla.md). A CLA makes the ownership of contributions explicit, so contributors and the project share a clear understanding of how the code can be used. By signing, you:
-
-            - Confirm that you own your contribution.
-            - Keep the right to reuse your own code.
-            - Grant us a copyright license to include and share it within our projects.
-
-            CLAs are standard practice across major open source projects including those under the Apache Software Foundation and the Linux Foundation. Ours is based on the Apache Software Foundation's CLA. Most importantly, it would enable us to relicense the project under a more permissive license in the future, giving the project and its community greater flexibility.
-
-            ✍ **To sign, please post a new comment on this PR with exactly the following text:** ✍
-
-          custom-pr-sign-comment: I have read and agree to the Contributor License Agreement
-
-          custom-allsigned-prcomment: |
-            ✅ All contributors have signed the CLA. Thank you! This PR is ready to be merged.

.github/workflows/release-draft-create.yaml

@@ -92,7 +92,9 @@ jobs:
           make_latest: >-
             ${{ github.event.pull_request.base.ref == 'main' &&
                 needs.build.outputs.is_prerelease == 'false' }}
-          draft: ${{ needs.build.outputs.is_prerelease == 'true' }}
+          draft: >-
+            ${{ github.event.pull_request.base.ref != 'main' ||
+                needs.build.outputs.is_prerelease == 'true' }}
           prerelease: >-
             ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true

.storybook/main.ts

@@ -78,11 +78,6 @@ const config: StorybookConfig = {
             find: '@/composables/queue/useJobActions',
             replacement: process.cwd() + '/src/storybook/mocks/useJobActions.ts'
           },
-          {
-            find: '@/composables/billing/useBillingContext',
-            replacement:
-              process.cwd() + '/src/storybook/mocks/useBillingContext.ts'
-          },
           {
             find: '@/utils/formatUtil',
             replacement:

.storybook/preview.ts

@@ -5,6 +5,7 @@ import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
@@ -41,6 +42,7 @@ setup((app) => {
       }
     }
   })
+  app.use(ConfirmationService)
   app.use(ToastService)
 })
 

apps/website/e2e/download.spec.ts

@@ -47,11 +47,6 @@ test.describe('Download page @smoke', () => {
     const downloadBtn = hero.getByRole('link', { name: /DOWNLOAD DESKTOP/i })
     await expect(downloadBtn).toBeVisible()
     await expect(downloadBtn).toHaveAttribute('target', '_blank')
-    await expect(downloadBtn).toHaveAttribute(
-      'href',
-      'https://comfy.org/download/windows/nsis/x64'
-    )
-    await expect(downloadBtn).toHaveAttribute('data-astro-prefetch', 'false')
 
     const githubBtn = hero.getByRole('link', { name: /INSTALL FROM GITHUB/i })
     await expect(githubBtn).toBeVisible()
@@ -78,7 +73,7 @@ test.describe('Download page @smoke', () => {
     })
 
     const windowsBtn = hero.locator(
-      'a[href="https://comfy.org/download/windows/nsis/x64"]'
+      'a[href="https://download.comfy.org/windows/nsis/x64"]'
     )
     await expect(windowsBtn).toBeVisible()
     await expect(windowsBtn).toHaveText(/DOWNLOAD DESKTOP/i)

apps/website/e2e/drops.spec.ts

@@ -0,0 +1,220 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { externalLinks } from '../src/config/routes'
+import { drops } from '../src/data/drops'
+import type { Locale } from '../src/i18n/translations'
+import { t } from '../src/i18n/translations'
+import { test } from './fixtures/blockExternalMedia'
+
+const PATH_EN = '/drops'
+const PATH_ZH = '/zh-CN/drops'
+const CLOUD_URL = 'https://cloud.comfy.org'
+
+const LOCALES: ReadonlyArray<readonly [string, Locale]> = [
+  [PATH_EN, 'en'],
+  [PATH_ZH, 'zh-CN']
+]
+
+function heroSection(page: Page, locale: Locale) {
+  return page.locator('section').filter({
+    has: page.getByRole('heading', {
+      level: 1,
+      name: t('drops.hero.title', locale)
+    })
+  })
+}
+
+function ctaSection(page: Page, locale: Locale) {
+  return page.locator('section').filter({
+    has: page.getByRole('heading', {
+      level: 2,
+      name: t('drops.cta.heading', locale)
+    })
+  })
+}
+
+function dropsSection(page: Page, locale: Locale) {
+  return page.locator('section').filter({
+    has: page.getByRole('heading', {
+      level: 2,
+      name: t('drops.section.title', locale)
+    })
+  })
+}
+
+test.describe('Drops landing — desktop @smoke', () => {
+  test('renders the configured title at /drops', async ({ page }) => {
+    await page.goto(PATH_EN)
+    await expect(page).toHaveTitle(t('drops.page.title', 'en'))
+  })
+
+  test('renders the localized title at /zh-CN/drops', async ({ page }) => {
+    await page.goto(PATH_ZH)
+    await expect(page).toHaveTitle(t('drops.page.title', 'zh-CN'))
+  })
+
+  test('is indexable at both locales', async ({ page }) => {
+    await page.goto(PATH_EN)
+    await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
+
+    await page.goto(PATH_ZH)
+    await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
+  })
+
+  test('hero h1 renders the localized title in both locales', async ({
+    page
+  }) => {
+    await page.goto(PATH_EN)
+    await expect(
+      page.getByRole('heading', {
+        level: 1,
+        name: t('drops.hero.title', 'en')
+      })
+    ).toBeVisible()
+
+    await page.goto(PATH_ZH)
+    await expect(
+      page.getByRole('heading', {
+        level: 1,
+        name: t('drops.hero.title', 'zh-CN')
+      })
+    ).toBeVisible()
+  })
+
+  test('hero primary CTA links to /download per locale', async ({ page }) => {
+    for (const [path, locale, expectedHref] of [
+      [PATH_EN, 'en', '/download'],
+      [PATH_ZH, 'zh-CN', '/zh-CN/download']
+    ] as const) {
+      await page.goto(path)
+      const primary = heroSection(page, locale).getByRole('link', {
+        name: t('drops.hero.primary', locale)
+      })
+      await expect(primary).toBeVisible()
+      await expect(primary).toHaveAttribute('href', expectedHref)
+    }
+  })
+
+  test('hero secondary CTA opens external Cloud in a new tab on both locales', async ({
+    page
+  }) => {
+    for (const [path, locale] of LOCALES) {
+      await page.goto(path)
+      const secondary = heroSection(page, locale).getByRole('link', {
+        name: t('drops.hero.secondary', locale)
+      })
+      await expect(secondary).toBeVisible()
+      await expect(secondary).toHaveAttribute('href', CLOUD_URL)
+      await expect(secondary).toHaveAttribute('target', '_blank')
+      await expect(secondary).toHaveAttribute('rel', 'noopener noreferrer')
+    }
+  })
+
+  test('closing CTA shows heading and both action buttons in both locales', async ({
+    page
+  }) => {
+    for (const [path, locale] of LOCALES) {
+      await page.goto(path)
+      const section = ctaSection(page, locale)
+      await expect(
+        section.getByRole('heading', {
+          level: 2,
+          name: t('drops.cta.heading', locale)
+        })
+      ).toBeVisible()
+
+      const primary = section.getByRole('link', {
+        name: t('drops.cta.primary', locale)
+      })
+      await expect(primary).toBeVisible()
+      await expect(primary).toHaveAttribute('href', externalLinks.cloud)
+      await expect(primary).toHaveAttribute('target', '_blank')
+      await expect(primary).toHaveAttribute('rel', 'noopener noreferrer')
+
+      const secondary = section.getByRole('link', {
+        name: t('drops.cta.secondary', locale)
+      })
+      await expect(secondary).toBeVisible()
+      await expect(secondary).toHaveAttribute('href', externalLinks.workflows)
+      await expect(secondary).toHaveAttribute('target', '_blank')
+      await expect(secondary).toHaveAttribute('rel', 'noopener noreferrer')
+    }
+  })
+
+  test('drops section renders one card per data entry with the correct localized href in both locales', async ({
+    page
+  }) => {
+    for (const [path, locale] of LOCALES) {
+      await page.goto(path)
+      const section = dropsSection(page, locale)
+
+      await expect(
+        section.getByRole('heading', {
+          level: 2,
+          name: t('drops.section.title', locale)
+        })
+      ).toBeVisible()
+
+      const cards = section.locator('[data-slot="card"]')
+      await expect(cards).toHaveCount(drops.length)
+
+      for (const [i, drop] of drops.entries()) {
+        const card = cards.nth(i)
+        await expect(card).toContainText(drop.title[locale])
+        const explore = card.getByRole('link', {
+          name: drop.cta.label[locale]
+        })
+        await expect(explore).toBeVisible()
+        await expect(explore).toHaveAttribute('href', drop.cta.href[locale])
+      }
+    }
+  })
+
+  test('desktop: first 4 drop cards are wider than cards 5+', async ({
+    page
+  }) => {
+    await page.goto(PATH_EN)
+    const cards = dropsSection(page, 'en').locator('[data-slot="card"]')
+    await expect(cards).toHaveCount(drops.length)
+
+    const firstWidth = (await cards.nth(0).boundingBox())?.width ?? 0
+    const fifthWidth = (await cards.nth(4).boundingBox())?.width ?? 0
+    expect(firstWidth).toBeGreaterThan(fifthWidth)
+  })
+})
+
+test.describe('Drops landing — mobile @mobile', () => {
+  test('drops grid stacks in a single column at mobile width', async ({
+    page
+  }) => {
+    await page.goto(PATH_EN)
+    const cards = dropsSection(page, 'en').locator('[data-slot="card"]')
+    await expect(cards).toHaveCount(drops.length)
+
+    const viewport = page.viewportSize()
+    expect(viewport, 'viewport size').not.toBeNull()
+    const firstBox = await cards.nth(0).boundingBox()
+    const secondBox = await cards.nth(1).boundingBox()
+    expect(firstBox, 'first card bounding box').not.toBeNull()
+    expect(secondBox, 'second card bounding box').not.toBeNull()
+    expect(firstBox!.width).toBeGreaterThanOrEqual(viewport!.width * 0.7)
+    expect(secondBox!.y).toBeGreaterThanOrEqual(firstBox!.y + firstBox!.height)
+  })
+
+  test('closing CTA heading stays within viewport width', async ({ page }) => {
+    await page.goto(PATH_EN)
+    const heading = page.getByRole('heading', {
+      level: 2,
+      name: t('drops.cta.heading', 'en')
+    })
+    await heading.scrollIntoViewIfNeeded()
+    await expect(heading).toBeVisible()
+
+    const box = await heading.boundingBox()
+    expect(box, 'CTA heading bounding box').not.toBeNull()
+    const viewport = page.viewportSize()
+    expect(viewport, 'viewport size').not.toBeNull()
+    expect(box!.x + box!.width).toBeLessThanOrEqual(viewport!.width + 1)
+  })
+})

apps/website/src/components/blocks/CtaCenter01.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import BrandButton from '../common/BrandButton.vue'
+import type { AnchorHTMLAttributes } from 'vue'
+
+import Button from '../ui/button/Button.vue'
+import { resolveRel } from '../../utils/cta'
 
 type Cta = {
   label: string
   href: string
-  target?: '_blank' | '_self' | '_parent' | '_top'
+  target?: AnchorHTMLAttributes['target']
+  rel?: AnchorHTMLAttributes['rel']
 }
 
 type TermsLink = {
@@ -12,10 +16,11 @@ type TermsLink = {
   href: string
 }
 
-defineProps<{
+const { heading, primaryCta, secondaryCta, termsLink } = defineProps<{
   heading: string
   primaryCta: Cta
-  termsLink: TermsLink
+  secondaryCta?: Cta
+  termsLink?: TermsLink
 }>()
 </script>
 
@@ -24,23 +29,37 @@ defineProps<{
     class="max-w-9xl mx-auto flex flex-col items-center px-6 py-16 text-center lg:py-24"
   >
     <h2
-      class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+      class="max-w-3xl text-4xl/snug font-light tracking-tight text-pretty text-primary-comfy-canvas lg:text-6xl/snug"
     >
       {{ heading }}
     </h2>
 
-    <BrandButton
-      :href="primaryCta.href"
-      :target="primaryCta.target"
-      :rel="primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined"
-      variant="outline"
-      size="lg"
-      class="mt-10 px-20 py-4 text-base uppercase lg:mt-12"
-    >
-      {{ primaryCta.label }}
-    </BrandButton>
+    <div class="mt-10 flex flex-col gap-4 sm:flex-row lg:mt-12">
+      <Button
+        as="a"
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        :rel="resolveRel(primaryCta)"
+        variant="default"
+        size="lg"
+      >
+        {{ primaryCta.label }}
+      </Button>
+      <Button
+        v-if="secondaryCta"
+        as="a"
+        :href="secondaryCta.href"
+        :target="secondaryCta.target"
+        :rel="resolveRel(secondaryCta)"
+        variant="outline"
+        size="lg"
+      >
+        {{ secondaryCta.label }}
+      </Button>
+    </div>
 
     <a
+      v-if="termsLink"
       :href="termsLink.href"
       class="mt-8 text-sm text-primary-comfy-canvas/70 underline underline-offset-4 transition-colors hover:text-primary-comfy-canvas"
     >

apps/website/src/components/blocks/FAQSplit01.vue

@@ -30,9 +30,9 @@ function toggle(index: number) {
     <div class="flex flex-col gap-6 md:flex-row md:gap-16">
       <!-- Left heading -->
       <div
-        class="sticky top-20 z-10 w-full shrink-0 self-start bg-primary-comfy-ink py-4 md:top-28 md:w-80 md:py-0"
+        class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-80 md:py-0"
       >
-        <h2 class="text-4xl font-light text-primary-comfy-canvas md:text-5xl">
+        <h2 class="text-primary-comfy-canvas text-4xl font-light md:text-5xl">
           {{ heading }}
         </h2>
       </div>
@@ -42,7 +42,7 @@ function toggle(index: number) {
         <div
           v-for="(faq, index) in faqs"
           :key="faq.id"
-          class="border-b border-primary-comfy-canvas/20"
+          class="border-primary-comfy-canvas/20 border-b"
         >
           <button
             :id="`faq-trigger-${faq.id}`"
@@ -83,7 +83,7 @@ function toggle(index: number) {
             :aria-labelledby="`faq-trigger-${faq.id}`"
             class="pb-6"
           >
-            <p class="text-sm whitespace-pre-line text-primary-comfy-canvas/70">
+            <p class="text-primary-comfy-canvas/70 text-sm whitespace-pre-line">
               {{ faq.answer }}
             </p>
           </section>

apps/website/src/components/blocks/HeroLivestream01.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { AnchorHTMLAttributes } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useNow } from '@vueuse/core'
+
+import Button from '../ui/button/Button.vue'
+import { resolveRel } from '../../utils/cta'
+
+type Cta = {
+  label: string
+  href: string
+  target?: AnchorHTMLAttributes['target']
+  rel?: AnchorHTMLAttributes['rel']
+}
+
+type Visual =
+  | {
+      type: 'image'
+      src: string
+      alt: string
+      width?: number
+      height?: number
+    }
+  | {
+      type: 'video'
+      src: string
+      alt: string
+      poster?: string
+      width?: number
+      height?: number
+    }
+
+const {
+  visual,
+  eyebrow,
+  title,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  youtubeVideoId,
+  startDateTime,
+  endDateTime
+} = defineProps<{
+  visual?: Visual
+  eyebrow?: string
+  title: string
+  subtitle?: string
+  primaryCta: Cta
+  secondaryCta?: Cta
+  youtubeVideoId: string
+  startDateTime: string
+  endDateTime: string
+}>()
+
+const embedUrl = computed(
+  () =>
+    `https://www.youtube-nocookie.com/embed/${youtubeVideoId}?autoplay=1&mute=1&rel=0`
+)
+
+// Keep SSR/initial paint deterministic on the logo and only flip to the embed
+// after client hydration — avoids a build-time `now` leaking into the markup.
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
+
+const now = useNow({ interval: 30_000 })
+const startMs = computed(() => new Date(startDateTime).getTime())
+const endMs = computed(() => new Date(endDateTime).getTime())
+
+const isLive = computed(
+  () =>
+    mounted.value &&
+    now.value.getTime() >= startMs.value &&
+    now.value.getTime() < endMs.value
+)
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 py-16 text-center lg:py-24"
+  >
+    <div
+      v-if="isLive"
+      class="mb-10 aspect-video w-full overflow-hidden rounded-2xl lg:mb-12"
+    >
+      <iframe
+        :src="embedUrl"
+        :title="title"
+        class="size-full"
+        loading="lazy"
+        allow="autoplay; encrypted-media; picture-in-picture"
+        allowfullscreen
+      />
+    </div>
+    <img
+      v-else-if="visual?.type === 'image'"
+      :src="visual.src"
+      :alt="visual.alt"
+      :width="visual.width"
+      :height="visual.height"
+      fetchpriority="high"
+      decoding="async"
+      class="mb-10 h-auto w-full max-w-md lg:mb-12 lg:max-w-lg"
+    />
+    <video
+      v-else-if="visual?.type === 'video'"
+      :src="visual.src"
+      :poster="visual.poster"
+      :aria-label="visual.alt"
+      :width="visual.width"
+      :height="visual.height"
+      autoplay
+      loop
+      muted
+      playsinline
+      preload="metadata"
+      class="mb-10 h-auto w-full max-w-md lg:mb-12 lg:max-w-2xl"
+    />
+
+    <p
+      v-if="eyebrow"
+      class="mb-4 text-sm font-medium tracking-wide text-primary-comfy-canvas/70 uppercase"
+    >
+      {{ eyebrow }}
+    </p>
+
+    <h1
+      class="max-w-3xl text-4xl/snug font-light tracking-tight text-pretty text-primary-comfy-canvas lg:text-6xl/snug"
+    >
+      {{ title }}
+    </h1>
+
+    <p
+      v-if="subtitle"
+      class="mt-6 max-w-2xl text-base text-primary-comfy-canvas/70 lg:text-lg"
+    >
+      {{ subtitle }}
+    </p>
+
+    <div class="mt-10 flex flex-col gap-4 sm:flex-row lg:mt-12">
+      <Button
+        as="a"
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        :rel="resolveRel(primaryCta)"
+        size="lg"
+      >
+        {{ primaryCta.label }}
+      </Button>
+      <Button
+        v-if="secondaryCta"
+        as="a"
+        :href="secondaryCta.href"
+        :target="secondaryCta.target"
+        :rel="resolveRel(secondaryCta)"
+        variant="outline"
+        size="lg"
+      >
+        {{ secondaryCta.label }}
+      </Button>
+    </div>
+  </section>
+</template>

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

@@ -25,7 +25,7 @@ const {
   <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
     <div class="flex flex-col items-center text-center">
       <h2
-        class="max-w-5xl text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+        class="text-primary-comfy-canvas max-w-5xl text-3xl font-light tracking-tight lg:text-5xl"
       >
         {{ t(headingKey, locale) }}
       </h2>

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { Drop } from '../../data/drops'
+import type { Locale } from '../../i18n/translations'
+import Badge from '../ui/badge/Badge.vue'
+
+import ButtonPill from '../ui/button-pill/ButtonPill.vue'
+import Card from '../ui/card/Card.vue'
+import CardContent from '../ui/card/CardContent.vue'
+import CardDescription from '../ui/card/CardDescription.vue'
+import CardFooter from '../ui/card/CardFooter.vue'
+import CardHeader from '../ui/card/CardHeader.vue'
+import CardTitle from '../ui/card/CardTitle.vue'
+
+const { drop, locale } = defineProps<{
+  drop: Drop
+  locale: Locale
+}>()
+</script>
+
+<template>
+  <Card class="group/pill-trigger relative h-full overflow-hidden">
+    <a
+      :href="drop.cta.href[locale]"
+      :aria-label="`${drop.title[locale]} — ${drop.cta.label[locale]}`"
+      class="rounded-4.5xl focus-visible:ring-primary-comfy-yellow absolute inset-0 z-10 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+    />
+
+    <div class="flex flex-col-reverse">
+      <CardHeader class="gap-2 px-6">
+        <Badge variant="ghost">
+          {{ drop.category[locale] }}
+        </Badge>
+        <CardTitle class="pt-4">
+          {{ drop.title[locale] }}
+        </CardTitle>
+        <CardDescription>
+          {{ drop.description[locale] }}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="relative p-2">
+        <div class="aspect-video w-full overflow-hidden rounded-4xl">
+          <img
+            v-if="drop.media.type === 'image'"
+            :src="drop.media.src"
+            :alt="drop.media.alt[locale]"
+            loading="lazy"
+            decoding="async"
+            class="size-full object-cover object-center transition-transform duration-500 ease-out group-hover/pill-trigger:scale-105"
+          />
+          <video
+            v-else
+            :src="drop.media.src"
+            :poster="drop.media.poster"
+            :aria-label="drop.media.alt[locale]"
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="metadata"
+            class="size-full object-cover object-center transition-transform duration-500 ease-out group-hover/pill-trigger:scale-105"
+          />
+        </div>
+        <Badge v-if="drop.badge" variant="accent" class="absolute top-6 left-8">
+          {{ drop.badge[locale] }}
+        </Badge>
+      </CardContent>
+    </div>
+
+    <CardFooter class="mt-auto px-6 pb-6">
+      <ButtonPill as="span" variant="ghost" icon-position="left">
+        {{ drop.cta.label[locale] }}
+      </ButtonPill>
+    </CardFooter>
+  </Card>
+</template>

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

@@ -40,12 +40,12 @@ const {
       <div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
         <div class="flex flex-col gap-8">
           <h2
-            class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
           >
             {{ t(headingKey, locale) }}
           </h2>
           <p
-            class="max-w-sm text-sm/relaxed text-primary-comfy-canvas lg:text-base"
+            class="text-primary-comfy-canvas max-w-sm text-sm/relaxed lg:text-base"
           >
             {{ t(descriptionKey, locale) }}
           </p>
@@ -66,10 +66,10 @@ const {
             v-for="(event, i) in events"
             :key="i"
             :href="event.href"
-            class="group flex items-center gap-4 border-b border-primary-comfy-canvas/15 py-6 lg:gap-8"
+            class="group border-primary-comfy-canvas/15 flex items-center gap-4 border-b py-6 lg:gap-8"
           >
             <span
-              class="shrink-0 text-sm font-medium text-primary-comfy-canvas"
+              class="text-primary-comfy-canvas shrink-0 text-sm font-medium"
             >
               {{ event.label[locale] }}
             </span>

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

@@ -109,7 +109,7 @@ const contactColumn: { title: string; links: FooterLink[] } = {
 <template>
   <footer
     ref="footerRef"
-    class="bg-primary-comfy-ink px-6 py-8 text-primary-comfy-canvas lg:px-20"
+    class="bg-primary-comfy-ink text-primary-comfy-canvas px-6 py-8 lg:px-20"
   >
     <div
       class="border-primary-warm-gray grid gap-12 border-t pt-16 lg:grid-cols-2 lg:gap-4"

apps/website/src/components/gallery/GalleryCard.vue

@@ -53,7 +53,7 @@ defineEmits<{ click: [] }>()
         <div class="flex w-full items-end justify-between p-4">
           <div class="gap-2">
             <p class="text-sm font-bold text-white">{{ item.title }}</p>
-            <p class="text-xs text-primary-comfy-canvas">
+            <p class="text-primary-comfy-canvas text-xs">
               <GalleryItemAttribution :item :locale />
             </p>
           </div>
@@ -82,7 +82,7 @@ defineEmits<{ click: [] }>()
     <!-- Mobile metadata -->
     <div v-if="mobile" class="mt-2 gap-2">
       <p class="text-sm font-bold text-white">{{ item.title }}</p>
-      <p class="text-xs text-primary-comfy-canvas">
+      <p class="text-primary-comfy-canvas text-xs">
         <GalleryItemAttribution :item :locale />
       </p>
     </div>

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

@@ -11,7 +11,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
     class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-24 pb-12 text-center"
   >
     <h1
-      class="max-w-4xl text-3xl leading-[110%] font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+      class="text-primary-comfy-canvas max-w-4xl text-3xl leading-[110%] font-light tracking-tight lg:text-5xl"
     >
       {{ t('learning.heroTitle.before', locale) }}
       <span class="text-primary-comfy-yellow">ComfyUI</span

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -72,7 +72,6 @@ const buttons = computed<ButtonSpec[]>(() => {
     size="lg"
     :class="customClass"
     :aria-label="btn.ariaLabel"
-    :data-astro-prefetch="btn.key === 'windows' ? 'false' : undefined"
     @click="captureDownloadClick(btn.key)"
   >
     <span class="inline-flex items-center gap-2">

apps/website/src/components/ui/badge/Badge.vue

@@ -25,7 +25,7 @@ const {
     data-slot="badge"
     :data-variant="variant"
     :data-size="size"
-    :class="cn(badgeVariants({ variant, size }), className)"
+    :class="cn(badgeVariants({ size, variant }), className)"
   >
     <slot name="prepend">
       <component :is="prependIcon" v-if="prependIcon" />

apps/website/src/components/ui/badge/index.ts

@@ -4,15 +4,16 @@ import { cva } from 'cva'
 export const badgeVariants = cva({
   base: 'text-primary-warm-gray font-formula leading-none focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
   variants: {
-    variant: {
-      default: 'bg-transparency-ink-t80',
-      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
-      accent:
-        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
-    },
     size: {
       md: 'px-4 py-1 text-xs',
       xs: 'px-2 py-0.5 text-[9px]'
+    },
+    variant: {
+      default: 'bg-transparency-ink-t80',
+      subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
+      ghost: 'text-primary-comfy-yellow px-0 font-semibold uppercase',
+      accent:
+        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
     }
   },
   defaultVariants: {

apps/website/src/components/ui/button/index.ts

@@ -8,7 +8,8 @@ export const buttonVariants = cva(
   {
     variants: {
       size: {
-        default: 'h-10 px-6 py-2.5',
+        sm: 'h-8 px-4 py-2 text-xs md:text-sm',
+        default: 'h-10 px-6 py-2.5 text-xs md:text-sm',
         lg: 'h-14 px-8 py-4 text-base'
       },
       variant: {
@@ -16,7 +17,7 @@ export const buttonVariants = cva(
           'bg-primary-comfy-yellow hover:bg-primary-comfy-yellow/90 text-primary-comfy-ink uppercase',
         outline:
           'text-primary-comfy-yellow hover:bg-primary-comfy-yellow border uppercase hover:text-primary-comfy-ink',
-        link: "text-primary-comfy-yellow h-auto justify-start px-0 py-1 text-base uppercase hover:opacity-90 [&_svg:not([class*='size-'])]:size-6",
+        link: "text-primary-comfy-yellow relative h-auto justify-start px-0 py-1 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-current after:transition-transform after:duration-200 hover:opacity-90 hover:after:scale-x-100 [&_svg:not([class*='size-'])]:size-6",
         nav: 'text-primary-warm-white hover:text-primary-comfy-yellow h-auto justify-between px-0 py-1 text-start text-2xl font-medium',
         navMuted:
           'hover:text-primary-comfy-yellow h-auto w-full justify-between px-0 py-1 text-start text-2xl font-medium text-primary-comfy-canvas uppercase'

apps/website/src/components/ui/card/Card.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-transparency-white-t4 text-primary-warm-white rounded-4.5xl flex flex-col gap-6 shadow-sm',
+        className
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

apps/website/src/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="card-content" :class="cn(className)">
+    <slot />
+  </div>
+</template>

apps/website/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-description"
+    :class="
+      cn('line-clamp-3 text-base text-primary-comfy-canvas/70', className)
+    "
+  >
+    <slot />
+  </div>
+</template>

apps/website/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="card-footer" :class="cn('flex items-center', className)">
+    <slot />
+  </div>
+</template>

apps/website/src/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="card-header" :class="cn('flex flex-col gap-1.5', className)">
+    <slot />
+  </div>
+</template>

apps/website/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const { class: className } = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-title"
+    :class="
+      cn(
+        'text-xl leading-none font-medium text-primary-comfy-canvas md:text-2xl',
+        className
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

apps/website/src/composables/useDownloadUrl.ts

@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { externalLinks } from '@/config/routes'
 
 export const downloadUrls = {
-  windows: 'https://comfy.org/download/windows/nsis/x64',
+  windows: 'https://download.comfy.org/windows/nsis/x64',
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
 

apps/website/src/config/routes.ts

@@ -8,6 +8,7 @@ const baseRoutes = {
   cloudEnterprise: '/cloud/enterprise',
   api: '/api',
   gallery: '/gallery',
+  drops: '/drops',
   about: '/about',
   careers: '/careers',
   customers: '/customers',

apps/website/src/data/drops.ts

@@ -0,0 +1,249 @@
+// Image URLs are placeholders at media.comfy.org/website/drops/<id>.png —
+// asset uploads and native zh-CN review are pending follow-ups (see
+// apps/website/.scratch/drops-page/PRD.md).
+import { externalLinks } from '../config/routes'
+import type { LocalizedText } from '../i18n/translations'
+
+type DropMedia =
+  | { type: 'image'; src: string; alt: LocalizedText }
+  | { type: 'video'; src: string; alt: LocalizedText; poster?: string }
+
+export type Drop = {
+  id: string
+  badge?: LocalizedText
+  category: LocalizedText
+  media: DropMedia
+  title: LocalizedText
+  description: LocalizedText
+  cta: { label: LocalizedText; href: LocalizedText }
+}
+
+const EXPLORE: LocalizedText = { en: 'EXPLORE', 'zh-CN': '探索' }
+const PLATFORM: LocalizedText = { en: 'Platform', 'zh-CN': '平台' }
+const CLOUD: LocalizedText = { en: 'Cloud', 'zh-CN': '云端' }
+const COMMUNITY: LocalizedText = { en: 'Community', 'zh-CN': '社区' }
+const DEVELOPER: LocalizedText = { en: 'Developer', 'zh-CN': '开发者' }
+const MODELS_AND_NODES: LocalizedText = {
+  en: 'Models & Nodes',
+  'zh-CN': '模型与节点'
+}
+const NEW_BADGE: LocalizedText = { en: 'NEW', 'zh-CN': '新' }
+const FEATURED_BADGE: LocalizedText = { en: 'FEATURED', 'zh-CN': '精选' }
+
+function imageFor(fileName: string, alt: LocalizedText): DropMedia {
+  return {
+    type: 'image',
+    src: `https://media.comfy.org/website/drops/${fileName}`,
+    alt
+  }
+}
+
+function videoFor(
+  fileName: string,
+  alt: LocalizedText,
+  poster?: string
+): DropMedia {
+  return {
+    type: 'video',
+    src: `https://media.comfy.org/website/drops/${fileName}`,
+    alt,
+    ...(poster && {
+      poster: `https://media.comfy.org/website/drops/${poster}`
+    })
+  }
+}
+
+export const drops: readonly Drop[] = [
+  {
+    id: 'desktop-client',
+    badge: NEW_BADGE,
+    category: PLATFORM,
+    media: imageFor('Drops_2x2card_Desktop.jpg', {
+      en: 'New Desktop Client',
+      'zh-CN': '新桌面客户端'
+    }),
+    title: { en: 'New Desktop Client', 'zh-CN': '新桌面客户端' },
+    description: {
+      en: 'A faster, redesigned desktop app for ComfyUI — one-click install and managed updates.',
+      'zh-CN': '更快、重新设计的 ComfyUI 桌面应用程序 — 一键安装与受管更新。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/download', 'zh-CN': '/zh-CN/download' }
+    }
+  },
+  {
+    id: 'app-mode',
+    badge: NEW_BADGE,
+    category: PLATFORM,
+    media: videoFor('Drops_2x2card_APP.mp4', {
+      en: 'App Mode',
+      'zh-CN': 'App 模式'
+    }),
+    title: { en: 'App Mode', 'zh-CN': 'App 模式' },
+    description: {
+      en: 'A simplified view of your workflows. Flip back to the node graph anytime to go deeper.',
+      'zh-CN': '工作流的简化视图。随时切换回节点图视图以深入了解。'
+    },
+    // TODO: no destination page yet — link out when App Mode lands.
+    cta: {
+      label: EXPLORE,
+      href: {
+        en: 'https://docs.comfy.org/interface/app-mode',
+        'zh-CN': 'https://docs.comfy.org/zh/interface/app-mode'
+      }
+    }
+  },
+  {
+    id: 'comfy-api',
+    badge: NEW_BADGE,
+    category: DEVELOPER,
+    media: imageFor('Drops_2x2card_API.jpg', {
+      en: 'Comfy API',
+      'zh-CN': 'Comfy API'
+    }),
+    title: { en: 'Comfy API', 'zh-CN': 'Comfy API' },
+    description: {
+      en: 'Turn any workflow into a production endpoint. Automate generation and scale to thousands of outputs.',
+      'zh-CN': '将任意工作流变成生产端点。自动化生成并扩展到数千个输出。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/api', 'zh-CN': '/zh-CN/api' }
+    }
+  },
+  {
+    id: 'comfy-mcp',
+    badge: NEW_BADGE,
+    category: CLOUD,
+    media: imageFor('Drops_2x2card_MCP.jpg', {
+      en: 'Comfy MCP',
+      'zh-CN': 'Comfy MCP'
+    }),
+    title: { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
+    // TODO: production MCP copy + destination page pending.
+    description: {
+      en: 'The full power of ComfyUI from anywhere — no setup, no GPU required.',
+      'zh-CN': '随时随地体验 ComfyUI 的全部能力 — 无需配置，无需 GPU。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/mcp', 'zh-CN': '/zh-CN/mcp' }
+    }
+  },
+  {
+    id: 'community-workflows',
+    category: COMMUNITY,
+    media: imageFor('Drops_3x3card_Comm Workflows.jpg', {
+      en: 'Community Workflows',
+      'zh-CN': '社区工作流'
+    }),
+    title: {
+      en: 'Community Workflows',
+      'zh-CN': '社区工作流'
+    },
+    description: {
+      en: 'Browse and remix thousands of community-shared workflows. Start from a proven template.',
+      'zh-CN': '浏览和混搭数千个社区共享的工作流。从经过验证的模板开始。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: externalLinks.workflows, 'zh-CN': externalLinks.workflows }
+    }
+  },
+  {
+    id: 'supported-models',
+    category: MODELS_AND_NODES,
+    media: imageFor('Drops_Supported models.jpg', {
+      en: 'Supported Models',
+      'zh-CN': '支持的模型'
+    }),
+    title: { en: 'Supported Models', 'zh-CN': '支持的模型' },
+    description: {
+      en: 'Run the latest open and partner models — every checkpoint, LoRA, and ControlNet, ready to use in your graph.',
+      'zh-CN':
+        '运行最新的开源和合作伙伴模型 — 每个 checkpoint、LoRA 和 ControlNet 都可直接在工作流中使用。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/p/supported-models', 'zh-CN': '/zh-CN/p/supported-models' }
+    }
+  },
+  {
+    id: 'supported-nodes',
+    category: MODELS_AND_NODES,
+    media: videoFor('Drops_3x3card_supported nodes.mp4', {
+      en: 'Supported Nodes',
+      'zh-CN': '支持的节点'
+    }),
+    title: { en: 'Supported Nodes', 'zh-CN': '支持的节点' },
+    description: {
+      en: 'Thousands of community and partner nodes, curated and verified to run on Comfy Cloud.',
+      'zh-CN':
+        '数千个社区与合作伙伴节点，经过精选与验证，可在 Comfy Cloud 上运行。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: {
+        en: '/cloud/supported-nodes',
+        'zh-CN': '/zh-CN/cloud/supported-nodes'
+      }
+    }
+  },
+  {
+    id: 'comfy-enterprise',
+    category: CLOUD,
+    media: imageFor('Drops_3x3card_enterprise.png', {
+      en: 'Comfy Enterprise',
+      'zh-CN': 'Comfy 企业版'
+    }),
+    title: { en: 'Comfy Enterprise', 'zh-CN': 'Comfy 企业版' },
+    description: {
+      en: 'Enterprise-grade infrastructure for the creative engine inside your organization.',
+      'zh-CN': '为您组织内创意引擎提供的企业级基础设施。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/cloud/enterprise', 'zh-CN': '/zh-CN/cloud/enterprise' }
+    }
+  },
+  {
+    id: 'learning-hub',
+    category: COMMUNITY,
+    media: imageFor('Drops_3x3_Learninghub.jpg', {
+      en: 'Learning Hub',
+      'zh-CN': '学习中心'
+    }),
+    title: { en: 'Learning Hub', 'zh-CN': '学习中心' },
+    description: {
+      en: 'Walkthroughs and ready-to-run workflows to take you from first render to production pipeline.',
+      'zh-CN': '配套教程与开箱即用的工作流，带您从第一次渲染走向生产管线。'
+    },
+    cta: {
+      label: { en: 'START LEARNING', 'zh-CN': '开始学习' },
+      href: { en: '/learning', 'zh-CN': '/zh-CN/learning' }
+    }
+  },
+  {
+    id: 'share-comfy',
+    badge: NEW_BADGE,
+    category: COMMUNITY,
+    media: videoFor('Drops_3x3card_Affilliate.mp4', {
+      en: 'Comfy Affiliate',
+      'zh-CN': 'Comfy Affiliate'
+    }),
+    title: {
+      en: 'Comfy Affiliate',
+      'zh-CN': 'Comfy Affiliate'
+    },
+    description: {
+      en: 'Share Comfy with your audience and earn for every creator you bring on board.',
+      'zh-CN': '与您的受众分享 Comfy，为您带来的每一位创作者获得回报。'
+    },
+    // /affiliates is locale-invariant: same URL in both locales.
+    cta: {
+      label: { en: 'LEARN MORE', 'zh-CN': '了解更多' },
+      href: { en: '/affiliates', 'zh-CN': '/affiliates' }
+    }
+  }
+]

apps/website/src/i18n/translations.ts

@@ -4928,6 +4928,70 @@ const translations = {
   'affiliate.cta.termsLabel': {
     en: 'Read the affiliate program terms',
     'zh-CN': '阅读联盟计划条款'
+  },
+
+  // Drops page (/drops) — head metadata
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'drops.page.title': {
+    en: 'Drops — Everything new in ComfyUI',
+    'zh-CN': 'Drops — ComfyUI 最新动态'
+  },
+  'drops.page.description': {
+    en: 'Explore everything new in Comfy — releases, features, models, and resources across platform, cloud, community, and developer tools.',
+    'zh-CN':
+      '探索 Comfy 的最新动态 — 涵盖平台、云端、社区和开发者工具的发布、功能、模型和资源。'
+  },
+
+  // Drops page (/drops) — hero section
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'drops.hero.title': {
+    en: 'Everything new in ComfyUI',
+    'zh-CN': 'ComfyUI 全新内容'
+  },
+  'drops.hero.primary': {
+    en: 'Download Desktop',
+    'zh-CN': '下载桌面版'
+  },
+  'drops.hero.secondary': {
+    en: 'Launch Cloud',
+    'zh-CN': '启动云端'
+  },
+  'drops.hero.visualAlt': {
+    en: 'Comfy',
+    'zh-CN': 'Comfy'
+  },
+
+  // Drops page (/drops) — subscribe banner
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'drops.banner.text': {
+    en: 'Join the live stream. Get answers in real time.',
+    'zh-CN': '加入直播，实时获得解答。'
+  },
+  'drops.banner.cta': {
+    en: 'Sign up now',
+    'zh-CN': '立即注册'
+  },
+
+  // Drops page (/drops) — closing CTA
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'drops.cta.heading': {
+    en: 'Everything Comfy ships. All in one place.',
+    'zh-CN': 'Comfy 的全部内容，一处尽享。'
+  },
+  'drops.cta.primary': {
+    en: 'Open Comfy Cloud',
+    'zh-CN': '打开 Comfy Cloud'
+  },
+  'drops.cta.secondary': {
+    en: 'Try Workflow',
+    'zh-CN': '试用工作流'
+  },
+
+  // Drops page (/drops) — drops grid
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'drops.section.title': {
+    en: 'Latest Drops',
+    'zh-CN': '最新发布'
   }
 } as const satisfies Record<string, Record<Locale, string>>
 

apps/website/src/pages/drops.astro

@@ -0,0 +1,20 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import CtaSection from '../templates/drops/CtaSection.vue'
+import DropsSection from '../templates/drops/DropsSection.vue'
+import HeroSection from '../templates/drops/HeroSection.vue'
+import SubscribeBanner from '../templates/drops/SubscribeBanner.vue'
+import { t } from '../i18n/translations'
+
+const locale = 'en' as const
+---
+
+<BaseLayout
+  title={t('drops.page.title', locale)}
+  description={t('drops.page.description', locale)}
+>
+  <SubscribeBanner locale={locale} client:idle />
+  <HeroSection locale={locale} client:load />
+  <DropsSection locale={locale} />
+  <CtaSection locale={locale} />
+</BaseLayout>

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

@@ -0,0 +1,20 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import CtaSection from '../../templates/drops/CtaSection.vue'
+import DropsSection from '../../templates/drops/DropsSection.vue'
+import HeroSection from '../../templates/drops/HeroSection.vue'
+import SubscribeBanner from '../../templates/drops/SubscribeBanner.vue'
+import { t } from '../../i18n/translations'
+
+const locale = 'zh-CN' as const
+---
+
+<BaseLayout
+  title={t('drops.page.title', locale)}
+  description={t('drops.page.description', locale)}
+>
+  <SubscribeBanner locale={locale} client:idle />
+  <HeroSection locale={locale} client:load />
+  <DropsSection locale={locale} />
+  <CtaSection locale={locale} />
+</BaseLayout>

apps/website/src/templates/drops/CtaSection.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import CtaCenter01 from '../../components/blocks/CtaCenter01.vue'
+import { externalLinks } from '../../config/routes'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <CtaCenter01
+    :heading="t('drops.cta.heading', locale)"
+    :primary-cta="{
+      label: t('drops.cta.primary', locale),
+      href: externalLinks.cloud,
+      target: '_blank'
+    }"
+    :secondary-cta="{
+      label: t('drops.cta.secondary', locale),
+      href: externalLinks.workflows,
+      target: '_blank'
+    }"
+  />
+</template>

apps/website/src/templates/drops/DropsSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import DropCard from '../../components/common/DropCard.vue'
+import { drops } from '../../data/drops'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="text-primary-warm-white text-3xl font-light tracking-tight lg:text-5xl"
+    >
+      {{ t('drops.section.title', locale) }}
+    </h2>
+
+    <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-6 lg:mt-12">
+      <div
+        v-for="(drop, index) in drops"
+        :key="drop.id"
+        :class="index < 4 ? 'md:col-span-3' : 'md:col-span-2'"
+      >
+        <DropCard :drop :locale />
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/templates/drops/HeroSection.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import HeroLivestream01 from '../../components/blocks/HeroLivestream01.vue'
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import { livestream } from './livestream'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <HeroLivestream01
+    :visual="{
+      type: 'video',
+      src: 'https://media.comfy.org/website/drops/Drops_hero_rotatinglogo.webm',
+      alt: t('drops.hero.visualAlt', locale),
+      width: 1760,
+      height: 528
+    }"
+    :title="t('drops.hero.title', locale)"
+    :primary-cta="{
+      label: t('drops.hero.primary', locale),
+      href: routes.download
+    }"
+    :secondary-cta="{
+      label: t('drops.hero.secondary', locale),
+      href: externalLinks.cloud,
+      target: '_blank'
+    }"
+    :youtube-video-id="livestream.youtubeVideoId"
+    :start-date-time="livestream.startDateTime"
+    :end-date-time="livestream.endDateTime"
+  />
+</template>

apps/website/src/templates/drops/SubscribeBanner.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import Button from '@/components/ui/button/Button.vue'
+import { livestream } from './livestream'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const signUpHref = 'https://luma.com/l7c5z4gp'
+
+// Hide once the livestream window closes — both for visitors arriving after
+// the event and for visitors whose tab is open when it ends.
+const visible = ref(true)
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+
+onMounted(() => {
+  const msUntilEnd = new Date(livestream.endDateTime).getTime() - Date.now()
+  if (msUntilEnd <= 0) {
+    visible.value = false
+    return
+  }
+  hideTimer = setTimeout(() => {
+    visible.value = false
+  }, msUntilEnd)
+})
+
+onUnmounted(() => {
+  if (hideTimer !== undefined) clearTimeout(hideTimer)
+})
+</script>
+
+<template>
+  <div v-if="visible" class="px-4">
+    <div
+      class="bg-primary-comfy-plum max-w-8xl rounded-5xl text-primary-warm-white mx-auto flex w-full flex-col items-center justify-center gap-2 px-6 py-5 text-center text-sm sm:flex-row sm:gap-4"
+    >
+      <p class="ppformula-text-center">{{ t('drops.banner.text', locale) }}</p>
+      <Button
+        :href="signUpHref"
+        as="a"
+        variant="link"
+        size="sm"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ t('drops.banner.cta', locale) }}
+      </Button>
+    </div>
+  </div>
+</template>

apps/website/src/templates/drops/livestream.ts

@@ -0,0 +1,6 @@
+// TODO(drops-livestream): replace with the production stream ID + window.
+export const livestream = {
+  youtubeVideoId: 'yo7b_zHd20g',
+  startDateTime: '2026-06-29T15:00:00Z',
+  endDateTime: '2026-06-29T17:15:00Z'
+} as const

apps/website/src/utils/cta.ts

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes } from 'vue'
+
+export function resolveRel(cta: {
+  rel?: AnchorHTMLAttributes['rel']
+  target?: AnchorHTMLAttributes['target']
+}): AnchorHTMLAttributes['rel'] {
+  return (
+    cta.rel ?? (cta.target === '_blank' ? 'noopener noreferrer' : undefined)
+  )
+}

browser_tests/fixtures/ComfyPage.ts

@@ -56,16 +56,12 @@ class ComfyPropertiesPanel {
   readonly panelTitle: Locator
   readonly searchBox: Locator
   readonly titleEditor: TitleEditor
-  readonly toggleButton: Locator
 
   constructor(readonly page: Page) {
     this.root = page.getByTestId(TestIds.propertiesPanel.root)
     this.panelTitle = this.root.locator('h3')
     this.searchBox = this.root.getByPlaceholder(/^Search/)
     this.titleEditor = new TitleEditor(this.root)
-    this.toggleButton = page.getByRole('button', {
-      name: 'Toggle properties panel'
-    })
   }
 }
 

browser_tests/fixtures/components/BaseDialog.ts

@@ -8,7 +8,7 @@ export class BaseDialog {
     public readonly page: Page,
     testId?: string
   ) {
-    this.root = testId ? page.getByTestId(testId) : page.getByRole('dialog')
+    this.root = testId ? page.getByTestId(testId) : page.locator('.p-dialog')
     this.closeButton = this.root.getByRole('button', { name: 'Close' })
   }
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -352,11 +352,20 @@ export class AssetsSidebarTab extends SidebarTab {
     this.listViewItems = page.locator(
       '.sidebar-content-container [role="button"][tabindex="0"]'
     )
-    this.selectionFooter = page.getByTestId('assets-selection-bar')
-    this.selectionCountButton = page.getByText(/\d+ selected/)
-    this.deselectAllButton = page.getByTestId('assets-deselect-selected')
-    this.deleteSelectedButton = page.getByTestId('assets-delete-selected')
-    this.downloadSelectedButton = page.getByTestId('assets-download-selected')
+    this.selectionFooter = page
+      .locator('.sidebar-content-container')
+      .locator('..')
+      .locator('[class*="h-18"]')
+    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
+    this.deselectAllButton = page.getByText('Deselect all')
+    this.deleteSelectedButton = page
+      .getByTestId('assets-delete-selected')
+      .or(page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
+      .first()
+    this.downloadSelectedButton = page
+      .getByTestId('assets-download-selected')
+      .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
+      .first()
     this.backToAssetsButton = page.getByText('Back to all assets')
     this.skeletonLoaders = page.locator(
       '.sidebar-content-container .animate-pulse'

browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts

@@ -36,11 +36,9 @@ export class BuilderSaveAsHelper {
     this.closeButton = this.successDialog
       .getByRole('button', { name: 'Close', exact: true })
       .filter({ hasText: 'Close' })
-    // The icon-only X carries an aria-label, while the footer Close button
-    // is named by its text — getByLabel only matches the former.
-    this.dismissButton = this.successDialog.getByLabel('Close', {
-      exact: true
-    })
+    this.dismissButton = this.successDialog.locator(
+      'button.p-dialog-close-button'
+    )
     this.exitBuilderButton = this.successDialog.getByRole('button', {
       name: 'Exit builder'
     })

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -231,22 +231,6 @@ export class ExecutionHelper {
     )
   }
 
-  /** Send `execution_interrupted` WS event (user-initiated stop). */
-  executionInterrupted(jobId: string, nodeId: string): void {
-    this.requireWs().send(
-      JSON.stringify({
-        type: 'execution_interrupted',
-        data: {
-          prompt_id: jobId,
-          timestamp: Date.now(),
-          node_id: nodeId,
-          node_type: 'Unknown',
-          executed: []
-        }
-      })
-    )
-  }
-
   /** Send `progress` WS event. */
   progress(jobId: string, nodeId: string, value: number, max: number): void {
     this.requireWs().send(

browser_tests/fixtures/helpers/TemplateHelper.ts

@@ -69,24 +69,6 @@ export class TemplateHelper {
   }
 
   async mockIndex(): Promise<void> {
-    const customTemplatesHandler = async (route: Route) => {
-      const customTemplates: Record<string, string[]> = {}
-      await route.fulfill({
-        status: 200,
-        body: JSON.stringify(customTemplates),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
-      })
-    }
-    const customTemplatesPattern = '**/api/workflow_templates'
-    this.routeHandlers.push({
-      pattern: customTemplatesPattern,
-      handler: customTemplatesHandler
-    })
-    await this.page.route(customTemplatesPattern, customTemplatesHandler)
-
     const indexHandler = async (route: Route) => {
       const payload = this.index ?? mockTemplateIndex(this.templates)
       await route.fulfill({

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -2,7 +2,7 @@ import { readFileSync } from 'fs'
 
 import { test } from '@playwright/test'
 
-import type { AppMode } from '@/utils/appMode'
+import type { AppMode } from '@/composables/useAppMode'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON

browser_tests/fixtures/selectors.ts

@@ -38,6 +38,7 @@ export const TestIds = {
     settings: 'settings-dialog',
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
+    confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
     errorOverlaySeeErrors: 'error-overlay-see-errors',
     errorOverlayDismiss: 'error-overlay-dismiss',
@@ -112,10 +113,6 @@ export const TestIds = {
     root: 'properties-panel',
     errorsTab: 'panel-tab-errors'
   },
-  assets: {
-    browserModal: 'asset-browser-modal',
-    card: 'asset-card'
-  },
   subgraphEditor: {
     hiddenSection: 'subgraph-editor-hidden-section',
     iconEye: 'icon-eye',

browser_tests/tests/billingFacadeConsumers.spec.ts

@@ -1,165 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-import type { CloudSubscriptionStatusResponse } from '@/platform/cloud/subscription/composables/useSubscription'
-import type { RemoteConfig } from '@/platform/remoteConfig/types'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
-import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
-
-/**
- * Billing facade consumers — FE-933 (B3) regression.
- *
- * The repointed surfaces (avatar popover tier badge / balance, free-tier
- * dialog renewal date) must keep rendering from `useBillingContext`, which in
- * a personal workspace routes through the legacy `/customers/*` endpoints
- * (mocked here). Drives a raw `page` (not the `comfyPage` fixture) so the
- * cloud app boots against fully mocked endpoints — same pattern as
- * creditsTile.spec.ts. `team_workspaces_enabled: false` keeps the topbar on
- * the legacy popover variant that FE-933 repointed.
- */
-const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
-
-const jsonRoute = (body: unknown) => ({
-  status: 200,
-  contentType: 'application/json',
-  body: JSON.stringify(body)
-})
-
-async function mockCloudBoot(
-  page: Page,
-  subscriptionStatus: CloudSubscriptionStatusResponse,
-  remoteConfig: RemoteConfig = { team_workspaces_enabled: false }
-) {
-  await page.route('**/api/features', (r) => r.fulfill(jsonRoute(remoteConfig)))
-  await page.route('**/api/system_stats', (r) =>
-    r.fulfill(jsonRoute(mockSystemStats))
-  )
-  await page.route('**/api/users', (r) =>
-    r.fulfill(
-      jsonRoute({
-        storage: 'server',
-        migrated: true,
-        users: { 'test-user-e2e': 'E2E Test User' }
-      })
-    )
-  )
-  // TutorialCompleted suppresses the new-user template browser, whose modal
-  // overlay would otherwise intercept clicks on the topbar.
-  await page.route('**/api/settings', (r) =>
-    r.fulfill(jsonRoute({ 'Comfy.TutorialCompleted': true }))
-  )
-  await page.route('**/api/userdata**', (r) => r.fulfill(jsonRoute([])))
-  await page.route('**/api/extensions', (r) => r.fulfill(jsonRoute([])))
-  await page.route('**/api/object_info', (r) => r.fulfill(jsonRoute({})))
-  await page.route('**/api/global_subgraphs', (r) => r.fulfill(jsonRoute({})))
-  await page.route('**/api/i18n', (r) => r.fulfill(jsonRoute({})))
-  await page.route('**/api/auth/session', (r) =>
-    r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
-  )
-  await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
-
-  // Single personal workspace: keeps the billing facade on the legacy
-  // `/customers/*` path when team workspaces are enabled.
-  await page.route('**/api/workspaces', (r) =>
-    r.fulfill(
-      jsonRoute({
-        workspaces: [
-          {
-            id: 'ws-personal',
-            name: 'Personal Workspace',
-            type: 'personal',
-            role: 'owner'
-          }
-        ]
-      })
-    )
-  )
-
-  await page.route('**/customers/cloud-subscription-status', (r) =>
-    r.fulfill(jsonRoute(subscriptionStatus))
-  )
-  await page.route('**/customers/balance', (r) =>
-    r.fulfill(
-      jsonRoute({
-        amount_micros: 6000, // -> 12,660 credits
-        currency: 'usd',
-        effective_balance_micros: 6000
-      })
-    )
-  )
-}
-
-async function bootApp(page: Page) {
-  const auth = new CloudAuthHelper(page)
-  await auth.mockAuth()
-
-  await page.addInitScript(() => {
-    localStorage.setItem('Comfy.userId', 'test-user-e2e')
-  })
-
-  await page.goto(APP_URL)
-  await page.waitForFunction(() => !!window.app?.extensionManager, null, {
-    timeout: 45_000
-  })
-}
-
-test.describe('Billing facade consumers (FE-933)', { tag: '@cloud' }, () => {
-  test('avatar popover renders tier badge and balance from the facade', async ({
-    page
-  }) => {
-    test.setTimeout(60_000)
-
-    await mockCloudBoot(page, {
-      is_active: true,
-      subscription_tier: 'PRO',
-      subscription_duration: 'MONTHLY',
-      renewal_date: '2099-02-20T10:00:00Z',
-      end_date: null
-    })
-    await bootApp(page)
-
-    await page.getByRole('button', { name: 'Current user' }).click()
-    const popover = page.locator('.current-user-popover')
-    await expect(popover).toBeVisible()
-
-    await expect(popover.getByText('Pro', { exact: true })).toBeVisible()
-    await expect(popover.getByText('12,660')).toBeVisible()
-    await expect(popover.getByTestId('add-credits-button')).toBeVisible()
-  })
-
-  test('free-tier dialog shows the renewal date from the facade', async ({
-    page
-  }) => {
-    test.setTimeout(60_000)
-
-    // Boots with team workspaces enabled (production shape); the facade still
-    // routes a personal workspace through `/customers/*`. With subscription
-    // gating on, an inactive FREE user gets the "Subscribe to run" button,
-    // which opens the free-tier dialog on click. (refreshRemoteConfig
-    // overwrites window.__CONFIG__ from /api/features, so the flags must come
-    // from the features mock, not an init script.)
-    await mockCloudBoot(
-      page,
-      {
-        is_active: false,
-        subscription_tier: 'FREE',
-        subscription_duration: 'MONTHLY',
-        // 10:00Z keeps the en-US calendar date stable across CI timezones.
-        renewal_date: '2099-02-20T10:00:00Z',
-        end_date: null
-      },
-      { team_workspaces_enabled: true, subscription_required: true }
-    )
-    await bootApp(page)
-
-    await page.getByTestId('subscribe-to-run-button').click()
-
-    // T5: the dialog must source the date from facade renewalDate — when this
-    // line read the legacy store it silently vanished for team users.
-    await expect(
-      page.getByText('Your credits refresh on Feb 20, 2099.')
-    ).toBeVisible()
-  })
-})

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -223,23 +223,4 @@ test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
     await expect(comfyPage.settingDialog.root).toBeVisible()
     await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
   })
-
-  test('should focus keybindings search when opening manage shortcuts', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.keyboardShortcutsButton.click()
-    await bottomPanel.shortcuts.manageButton.click()
-
-    await expect(comfyPage.settingDialog.root).toBeVisible()
-    await expect(comfyPage.settingDialog.category('Keybinding')).toBeVisible()
-
-    await expect(
-      comfyPage.page.getByPlaceholder('Search Keybindings...')
-    ).toBeFocused()
-    await expect(
-      comfyPage.page.getByPlaceholder('Search Settings...')
-    ).not.toBeFocused()
-  })
 })

browser_tests/tests/browseModelAssets.spec.ts

@@ -1,61 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { Asset } from '@comfyorg/ingest-types'
-import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
-import { STABLE_CHECKPOINT } from '@e2e/fixtures/data/assetFixtures'
-
-const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT]
-
-const test = createCloudAssetsFixture(CLOUD_ASSETS)
-
-test.describe('Browse Model Assets - Use button', { tag: '@cloud' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Assets.UseAssetAPI', true)
-    await comfyPage.nodeOps.clearGraph()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.nodeOps.clearGraph()
-  })
-
-  test('Use button ghost-places a loader populated with the model', async ({
-    comfyPage
-  }) => {
-    await comfyPage.command.executeCommand('Comfy.BrowseModelAssets')
-
-    const modal = comfyPage.page.locator(
-      '[data-component-id="AssetBrowserModal"]'
-    )
-    await expect(modal).toBeVisible()
-
-    const card = comfyPage.page.locator(
-      `[data-component-id="AssetCard"][data-asset-id="${STABLE_CHECKPOINT.id}"]`
-    )
-    await expect(card).toBeVisible()
-    await card.getByRole('button', { name: 'Use' }).click()
-
-    // Dialog closes and the ghost is armed; the node is not placed until the
-    // user clicks the canvas.
-    await expect(modal).toBeHidden()
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 1000 })
-      .toBe(0)
-
-    const canvasBox = (await comfyPage.canvas.boundingBox())!
-    await comfyPage.canvas.click({
-      position: { x: canvasBox.width / 2, y: canvasBox.height / 2 }
-    })
-
-    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-    await expect
-      .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
-      .toBe(1)
-
-    const [loader] = await comfyPage.nodeOps.getNodeRefsByType(
-      'CheckpointLoaderSimple'
-    )
-    expect(loader).toBeDefined()
-    const widget = await loader.getWidgetByName('ckpt_name')
-    expect(await widget.getValue()).toBe(STABLE_CHECKPOINT.name)
-  })
-})

browser_tests/tests/cloud-asset-promoted-widget.spec.ts

@@ -1,99 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-import {
-  assetRequestIncludesTag,
-  createCloudAssetsFixture
-} from '@e2e/fixtures/assetApiFixture'
-import {
-  STABLE_CHECKPOINT,
-  STABLE_CHECKPOINT_2
-} from '@e2e/fixtures/data/assetFixtures'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-const WORKFLOW = 'missing/missing_model_promoted_widget'
-const HOST_NODE_ID = 2
-const WIDGET_NAME = 'ckpt_name'
-const SELECTED_MODEL = STABLE_CHECKPOINT_2.name
-
-const test = createCloudAssetsFixture([STABLE_CHECKPOINT, STABLE_CHECKPOINT_2])
-
-interface WidgetSnapshot {
-  type: string
-  value: string
-  hasLayout: boolean
-}
-
-async function getHostWidgetSnapshot(page: Page): Promise<WidgetSnapshot> {
-  return await page.evaluate(
-    ({ nodeId, widgetName }) => {
-      const node = window.app!.graph.getNodeById(nodeId)
-      const widget = node?.widgets?.find((widget) => widget.name === widgetName)
-
-      return {
-        type: widget?.type ?? '',
-        value: String(widget?.value ?? ''),
-        hasLayout: widget?.last_y != null
-      }
-    },
-    { nodeId: HOST_NODE_ID, widgetName: WIDGET_NAME }
-  )
-}
-
-test.describe(
-  'Promoted subgraph asset widgets',
-  { tag: ['@cloud', '@canvas', '@widget'] },
-  () => {
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.nodeOps.clearGraph()
-    })
-
-    test('legacy asset browser selection updates the promoted host widget value', async ({
-      cloudAssetRequests,
-      comfyPage
-    }) => {
-      await comfyPage.settings.setSetting('Comfy.Assets.UseAssetAPI', true)
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-      await expect
-        .poll(
-          () =>
-            cloudAssetRequests.some((url) =>
-              assetRequestIncludesTag(url, 'checkpoints')
-            ),
-          { timeout: 10_000 }
-        )
-        .toBe(true)
-      await expect
-        .poll(() => getHostWidgetSnapshot(comfyPage.page))
-        .toMatchObject({
-          type: 'asset',
-          hasLayout: true
-        })
-      const initialWidget = await getHostWidgetSnapshot(comfyPage.page)
-      expect(initialWidget.value).not.toBe(SELECTED_MODEL)
-
-      const hostNode = await comfyPage.nodeOps.getNodeRefById(HOST_NODE_ID)
-      await hostNode.centerOnNode()
-      const promotedWidget = await hostNode.getWidgetByName(WIDGET_NAME)
-      await promotedWidget.click()
-
-      const modal = comfyPage.page.getByTestId(TestIds.assets.browserModal)
-      await expect(modal).toBeVisible()
-
-      const assetCard = modal
-        .getByTestId(TestIds.assets.card)
-        .filter({ hasText: SELECTED_MODEL })
-        .first()
-      await expect(assetCard).toBeVisible()
-      await assetCard.getByRole('button', { name: 'Use' }).click()
-
-      await expect(modal).toBeHidden()
-      await expect
-        .poll(() =>
-          getHostWidgetSnapshot(comfyPage.page).then((widget) => widget.value)
-        )
-        .toBe(SELECTED_MODEL)
-    })
-  }
-)

browser_tests/tests/cloud.spec.ts

@@ -1,9 +1,6 @@
 import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
-const SHARE_AUTH_STORAGE_KEY = 'Comfy.PreservedQuery.share_auth'
-
 /**
  * Cloud distribution E2E tests.
  *
@@ -17,31 +14,15 @@ test.describe('Cloud distribution UI', { tag: '@cloud' }, () => {
   test('cloud build redirects unauthenticated users to login', async ({
     page
   }) => {
-    await page.goto(APP_URL)
+    await page.goto('http://localhost:8188')
     // Cloud build has an auth guard that redirects to /cloud/login.
     // This route only exists in the cloud distribution — it's tree-shaken
     // in the OSS build. Its presence confirms the cloud build is active.
     await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
   })
 
-  test('preserves share auth attribution before redirecting logged-out users', async ({
-    page
-  }) => {
-    await page.goto(new URL('/?share=abc', APP_URL).toString())
-
-    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
-    await expect
-      .poll(() =>
-        page.evaluate(
-          (key) => sessionStorage.getItem(key),
-          SHARE_AUTH_STORAGE_KEY
-        )
-      )
-      .toBe(JSON.stringify({ share: 'abc' }))
-  })
-
   test('cloud login page renders sign-in options', async ({ page }) => {
-    await page.goto(APP_URL)
+    await page.goto('http://localhost:8188')
     await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
     // Verify cloud-specific login UI is rendered
     await expect(page.getByRole('button', { name: /google/i })).toBeVisible()

browser_tests/tests/currentUserPopoverCredits.spec.ts

@@ -1,138 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { CloudSubscriptionStatusResponse } from '@/platform/cloud/subscription/composables/useSubscription'
-import type { RemoteConfig } from '@/platform/remoteConfig/types'
-import type { WorkspaceWithRole } from '@/platform/workspace/api/workspaceApi'
-import type { WorkspaceTokenResponse } from '@/platform/workspace/stores/workspaceAuthStore'
-import type { operations } from '@/types/comfyRegistryTypes'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-
-type CustomerBalanceResponse = NonNullable<
-  operations['GetCustomerBalance']['responses']['200']['content']['application/json']
->
-
-const PERSONAL_WORKSPACE_NAME = 'Personal Workspace'
-const FUTURE_DATE = '2099-01-01T00:00:00Z'
-
-const mockRemoteConfig: RemoteConfig = { team_workspaces_enabled: true }
-
-const mockListWorkspacesResponse: { workspaces: WorkspaceWithRole[] } = {
-  workspaces: [
-    {
-      id: 'ws-personal',
-      name: PERSONAL_WORKSPACE_NAME,
-      type: 'personal',
-      created_at: '2026-01-01T00:00:00Z',
-      joined_at: '2026-01-01T00:00:00Z',
-      role: 'owner'
-    }
-  ]
-}
-
-const mockTokenResponse: WorkspaceTokenResponse = {
-  token: 'mock-workspace-token',
-  expires_at: FUTURE_DATE,
-  workspace: {
-    id: 'ws-personal',
-    name: PERSONAL_WORKSPACE_NAME,
-    type: 'personal'
-  },
-  role: 'owner',
-  permissions: []
-}
-
-// Cancelled but still active: `end_date` set (cancelled) while `is_active` is
-// true. A personal owner in this state sees BOTH "Add credits" and "Resubscribe"
-// in the credits row.
-const mockSubscriptionStatus: CloudSubscriptionStatusResponse = {
-  is_active: true,
-  subscription_id: 'sub_e2e',
-  renewal_date: FUTURE_DATE,
-  end_date: FUTURE_DATE
-}
-
-// ~6.3M credits — a 7-digit balance is what pushes the second action button out
-// of the popover before the fix.
-const mockBalance: CustomerBalanceResponse = {
-  amount_micros: 3_000_000,
-  effective_balance_micros: 3_000_000,
-  currency: 'usd'
-}
-
-const test = comfyPageFixture.extend({
-  page: async ({ page }, use) => {
-    await page.route('**/api/features', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(mockRemoteConfig)
-      })
-    )
-
-    await page.route('**/api/workspaces', async (route) => {
-      if (route.request().method() !== 'GET') {
-        await route.fallback()
-        return
-      }
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(mockListWorkspacesResponse)
-      })
-    })
-
-    await page.route('**/api/auth/token', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(mockTokenResponse)
-      })
-    )
-
-    await page.route('**/customers/cloud-subscription-status', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(mockSubscriptionStatus)
-      })
-    )
-
-    await page.route('**/customers/balance', (route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(mockBalance)
-      })
-    )
-
-    await use(page)
-  }
-})
-
-test.describe('Current user popover credits row', { tag: '@cloud' }, () => {
-  test('keeps both action buttons inside the popover when cancelled but active', async ({
-    comfyPage
-  }) => {
-    const page = comfyPage.page
-
-    await comfyPage.toast.closeToasts()
-    await page.getByRole('button', { name: 'Current user' }).click()
-
-    const popover = page.locator('.current-user-popover')
-    await expect(popover).toBeVisible()
-
-    const addCredits = page.getByTestId('add-credits-button')
-    const resubscribe = page.getByRole('button', { name: 'Resubscribe' })
-    await expect(addCredits).toBeVisible()
-    await expect(resubscribe).toBeVisible()
-
-    const popoverBox = await popover.boundingBox()
-    const resubscribeBox = await resubscribe.boundingBox()
-    expect(popoverBox).not.toBeNull()
-    expect(resubscribeBox).not.toBeNull()
-
-    const popoverRight = popoverBox!.x + popoverBox!.width
-    const resubscribeRight = resubscribeBox!.x + resubscribeBox!.width
-    expect(resubscribeRight).toBeLessThanOrEqual(popoverRight)
-  })
-})

browser_tests/tests/dialogs/shareWorkflowDialog.spec.ts

@@ -99,15 +99,15 @@ async function mockShareableAssets(
 }
 
 /**
- * Dismiss stale dialogs left by cloud-mode's onboarding flow or
- * auth-triggered modals by pressing Escape until they clear.
+ * Dismiss stale PrimeVue dialog masks left by cloud-mode's onboarding flow
+ * or auth-triggered modals by pressing Escape until they clear.
  */
 async function dismissOverlays(page: Page): Promise<void> {
-  const dialogs = page.getByRole('dialog')
+  const mask = page.locator('.p-dialog-mask')
   for (let attempt = 0; attempt < 3; attempt++) {
-    if ((await dialogs.count()) === 0) break
+    if ((await mask.count()) === 0) break
     await page.keyboard.press('Escape')
-    await dialogs
+    await mask
       .first()
       .waitFor({ state: 'hidden', timeout: 2000 })
       .catch(() => {})

browser_tests/tests/interaction.spec.ts

@@ -612,23 +612,18 @@ test.describe('Canvas Interaction', { tag: '@screenshot' }, () => {
   test('Can zoom in/out with ctrl+shift+vertical-drag', async ({
     comfyPage
   }) => {
-    // Use ctrlShiftDrag so the Control+Shift modifiers are pressed and released
-    // around each individual gesture. Holding the modifiers down across all
-    // three drags plus the intervening screenshot assertions could saturate the
-    // main thread and stall a single mouse.move step past the test timeout, and
-    // a mid-test failure would leave the modifiers stuck down. Releasing per
-    // gesture matches the robust pattern used in canvasSettings.spec.ts.
-    await comfyPage.canvasOps.ctrlShiftDrag({ x: 10, y: 100 }, { x: 10, y: 40 })
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('Shift')
+    await comfyPage.canvasOps.dragAndDrop({ x: 10, y: 100 }, { x: 10, y: 40 })
     await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
-    await comfyPage.canvasOps.ctrlShiftDrag({ x: 10, y: 40 }, { x: 10, y: 160 })
+    await comfyPage.canvasOps.dragAndDrop({ x: 10, y: 40 }, { x: 10, y: 160 })
     await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out-ctrl-shift.png')
-    await comfyPage.canvasOps.ctrlShiftDrag(
-      { x: 10, y: 280 },
-      { x: 10, y: 220 }
-    )
+    await comfyPage.canvasOps.dragAndDrop({ x: 10, y: 280 }, { x: 10, y: 220 })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'zoomed-default-ctrl-shift.png'
     )
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.page.keyboard.up('Shift')
   })
 
   test('Can zoom in/out after decreasing canvas zoom speed setting', async ({

browser_tests/tests/maskEditor.spec.ts

@@ -32,10 +32,6 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
       await expect(dialog.getByText('Save')).toBeVisible()
       await expect(dialog.getByText('Cancel')).toBeVisible()
 
-      await dialog.getByTestId('pointer-zone').hover()
-      await dialog.getByText('Brush Settings').hover()
-      await expect(dialog.getByTestId('brush-cursor')).toHaveCSS('opacity', '0')
-
       await comfyPage.expectScreenshot(dialog, 'mask-editor-dialog-open.png')
     }
   )
@@ -254,8 +250,21 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   }) => {
     const dialog = await maskEditor.openDialog()
 
+    let maskUploadCount = 0
     let imageUploadCount = 0
 
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-mask-${maskUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
     await comfyPage.page.route('**/upload/image', (route) => {
       imageUploadCount++
       return route.fulfill({
@@ -275,17 +284,20 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
 
     await expect(dialog).toBeHidden()
 
-    // The save pipeline uploads four layers (masked, paint, painted, paintedMasked)
-    // through the unified /upload/image endpoint.
+    // The save pipeline uploads multiple layers (mask + image variants)
     expect(
-      imageUploadCount,
-      'save should upload all four layers via /upload/image'
-    ).toBe(4)
+      maskUploadCount + imageUploadCount,
+      'save should trigger upload calls'
+    ).toBeGreaterThan(0)
   })
 
   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) =>
+      route.fulfill({ status: 500 })
+    )
     await comfyPage.page.route('**/upload/image', (route) =>
       route.fulfill({ status: 500 })
     )

browser_tests/tests/maskEditorLoadSave.spec.ts

@@ -34,17 +34,19 @@ test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
     let observedContentType = ''
     let observedBodyLength = 0
 
-    await comfyPage.page.route('**/upload/image', async (route) => {
+    await comfyPage.page.route('**/upload/mask', async (route) => {
       const request = route.request()
-      if (!observedContentType) {
-        observedContentType = (await request.headerValue('content-type')) ?? ''
-        observedBodyLength = request.postDataBuffer()?.byteLength ?? 0
-      }
+      observedContentType = (await request.headerValue('content-type')) ?? ''
+      observedBodyLength = request.postDataBuffer()?.byteLength ?? 0
       await route.fulfill(
         fulfillJson(successResponse('clipspace-mask-123.png'))
       )
     })
 
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill(fulfillJson(successResponse('clipspace-painted-123.png')))
+    )
+
     await dialog.getByRole('button', { name: 'Save' }).click()
     await expect(dialog).toBeHidden()
     expect(observedContentType).toContain('multipart/form-data')
@@ -67,11 +69,24 @@ test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
     await expect(dialog).toBeVisible()
   })
 
-  test('Save failure keeps dialog open', async ({ comfyPage, maskEditor }) => {
+  test('Save failure on partial upload keeps dialog open', async ({
+    comfyPage,
+    maskEditor
+  }) => {
     const dialog = await maskEditor.openDialog()
     await maskEditor.drawStrokeAndExpectPixels(dialog)
 
+    // The saver uploads sequentially: mask layer first, then image layers.
+    // Let the mask upload succeed and the image upload fail to exercise both
+    // endpoints and verify the dialog stays open after a partial failure.
+    let maskUploadHit = false
     let imageUploadHit = false
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadHit = true
+      return route.fulfill(
+        fulfillJson(successResponse('clipspace-mask-999.png'))
+      )
+    })
     await comfyPage.page.route('**/upload/image', (route) => {
       imageUploadHit = true
       return route.fulfill({ status: 500 })
@@ -80,6 +95,7 @@ test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
     const saveButton = dialog.getByRole('button', { name: 'Save' })
     await saveButton.click()
 
+    await expect.poll(() => maskUploadHit).toBe(true)
     await expect.poll(() => imageUploadHit).toBe(true)
     await expect(dialog).toBeVisible()
     await expect(saveButton).toBeVisible()

browser_tests/tests/nodeHelp.spec.ts

@@ -4,6 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
+import type { WorkspaceStore } from '@e2e/types/globals'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
@@ -34,6 +35,56 @@ async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId('properties-panel')
 }
 
+async function setLocaleAndWaitForWorkflowReload(
+  comfyPage: ComfyPage,
+  locale: string
+) {
+  await comfyPage.page.evaluate(async (targetLocale) => {
+    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
+      .activeWorkflow
+
+    if (!workflow) {
+      throw new Error('No active workflow while waiting for locale reload')
+    }
+
+    const changeTracker = workflow.changeTracker.constructor as unknown as {
+      isLoadingGraph: boolean
+    }
+
+    let sawLoading = false
+    const waitForReload = new Promise<void>((resolve, reject) => {
+      const timeoutAt = performance.now() + 5000
+
+      const tick = () => {
+        if (changeTracker.isLoadingGraph) {
+          sawLoading = true
+        }
+
+        if (sawLoading && !changeTracker.isLoadingGraph) {
+          resolve()
+          return
+        }
+
+        if (performance.now() > timeoutAt) {
+          reject(
+            new Error(
+              `Timed out waiting for workflow reload after setting locale to ${targetLocale}`
+            )
+          )
+          return
+        }
+
+        requestAnimationFrame(tick)
+      }
+
+      tick()
+    })
+
+    await window.app!.extensionManager.setting.set('Comfy.Locale', targetLocale)
+    await waitForReload
+  }, locale)
+}
+
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -347,33 +398,34 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
       await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
     })
 
-    test.describe('Locale-specific documentation', () => {
-      test.use({ initialSettings: { 'Comfy.Locale': 'ja' } })
-
-      test('Should handle locale-specific documentation', async ({
-        comfyPage
-      }) => {
-        // Mock different responses for different locales
-        await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
-          await route.fulfill({
-            status: 200,
-            body: `# KSamplerノード
+    test('Should handle locale-specific documentation', async ({
+      comfyPage
+    }) => {
+      // Mock different responses for different locales
+      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSamplerノード
 
 これは日本語のドキュメントです。
 `
-          })
         })
+      })
 
-        await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
-          await route.fulfill({
-            status: 200,
-            body: `# KSampler Node
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Node
 
 This is English documentation.
 `
-          })
         })
+      })
 
+      // Set locale to Japanese
+      await setLocaleAndWaitForWorkflowReload(comfyPage, 'ja')
+
+      try {
         await comfyPage.workflow.loadWorkflow('default')
         const ksamplerNodes =
           await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -382,7 +434,9 @@ This is English documentation.
         const helpPage = await openSelectionToolboxHelp(comfyPage)
         await expect(helpPage).toContainText('KSamplerノード')
         await expect(helpPage).toContainText('これは日本語のドキュメントです')
-      })
+      } finally {
+        await setLocaleAndWaitForWorkflowReload(comfyPage, 'en')
+      }
     })
 
     test('Should handle network errors gracefully', async ({ comfyPage }) => {

browser_tests/tests/painter.spec.ts

@@ -10,16 +10,13 @@ import {
 } from '@e2e/fixtures/utils/painter'
 import type { TestGraphAccess } from '@e2e/types/globals'
 
-const HIDDEN_PAINTER_WIDGET_NAMES = ['width', 'height', 'bg_color'] as const
-const HIDDEN_PAINTER_NUMBER_WIDGET_NAMES = ['width', 'height'] as const
-
 test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => window.app?.graph?.clear())
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
   })
 
-  test.describe('Widget rendering', () => {
+  test.describe('Widget rendering', { tag: ['@widget'] }, () => {
     test('Node enforces minimum size', async ({ comfyPage }) => {
       const size = await comfyPage.page.evaluate(() => {
         const graph = window.graph as TestGraphAccess | undefined
@@ -31,15 +28,17 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       expect(size![1]).toBeGreaterThanOrEqual(550)
     })
 
-    test('Does not render hidden standard widgets in Vue mode', async ({
+    test('Width, height, and bg_color standard widgets are hidden', async ({
       comfyPage
     }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      for (const widgetName of HIDDEN_PAINTER_WIDGET_NAMES) {
-        await expect(node.getByLabel(widgetName, { exact: true })).toBeHidden()
-      }
+      const hiddenFlags = await comfyPage.page.evaluate(() => {
+        const graph = window.graph as TestGraphAccess | undefined
+        const node = graph?._nodes_by_id?.['1']
+        return (node?.widgets ?? [])
+          .filter((w) => ['width', 'height', 'bg_color'].includes(w.name))
+          .map((w) => w.options.hidden ?? false)
+      })
+      expect(hiddenFlags).toEqual([true, true, true])
     })
   })
 
@@ -789,49 +788,6 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   })
 })
 
-test.describe(
-  'Painter legacy LiteGraph rendering',
-  { tag: ['@widget', '@canvas'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.page.evaluate(() => window.app?.graph?.clear())
-      await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
-    })
-
-    test('Does not open editors for backend-hidden number widget rows in legacy LiteGraph', async ({
-      comfyPage
-    }) => {
-      const painterNodes = await comfyPage.nodeOps.getNodeRefsByType('Painter')
-      expect(painterNodes).toHaveLength(1)
-      const painterNode = painterNodes[0]!
-      const maskWidget = await painterNode.getWidgetByName('mask')
-      const maskWidgetClientPosition = await maskWidget.getPosition()
-      const widgetRowClientHeight = await comfyPage.page.evaluate(
-        () =>
-          (window.LiteGraph!.NODE_WIDGET_HEIGHT + 4) *
-          window.app!.canvas.ds.scale
-      )
-      const legacyPrompt = comfyPage.page.locator('.graphdialog')
-      await expect(legacyPrompt).toBeHidden()
-
-      for (const [
-        index,
-        widgetName
-      ] of HIDDEN_PAINTER_NUMBER_WIDGET_NAMES.entries()) {
-        await test.step(`Click ${widgetName} row`, async () => {
-          await comfyPage.page.mouse.click(
-            maskWidgetClientPosition.x,
-            maskWidgetClientPosition.y + widgetRowClientHeight * (index + 1)
-          )
-          await comfyPage.nextFrame()
-          await expect(legacyPrompt).toBeHidden()
-        })
-      }
-    })
-  }
-)
-
 test.describe(
   'Painter — input image connection',
   { tag: ['@widget', '@vue-nodes', '@slow'] },

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -143,7 +143,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const objectInfo = await response.json()
         const ckptName =
           objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
-        ckptName[0] = [...ckptName[0], FAKE_MODEL_NAME]
+        ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
         await route.fulfill({ response, json: objectInfo })
       })
 
@@ -151,11 +151,21 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const url = new URL(response.url())
         return url.pathname.endsWith('/object_info') && response.ok()
       })
+      const modelFoldersResponse = comfyPage.page.waitForResponse(
+        (response) => {
+          const url = new URL(response.url())
+          return url.pathname.endsWith('/experiment/models') && response.ok()
+        }
+      )
       const refreshButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelRefresh
       )
 
-      await Promise.all([objectInfoResponse, refreshButton.click()])
+      await Promise.all([
+        objectInfoResponse,
+        modelFoldersResponse,
+        refreshButton.click()
+      ])
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
       ).toBeHidden()

browser_tests/tests/sidebar/assets.spec.ts

@@ -13,6 +13,10 @@ import type {
 // Legacy coverage backed by AssetsHelper's shadow backend. New assets-sidebar
 // browser coverage should use typed route mocks in assetsSidebarTab.spec.ts.
 
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
 const SAMPLE_JOBS: RawJobListItem[] = [
   createMockJob({
     id: 'job-alpha',
@@ -176,10 +180,12 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Switch to Imported
     await tab.switchToImported()
     await expect(tab.importedTab).toHaveAttribute('aria-selected', 'true')
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'false')
 
+    // Switch back to Generated
     await tab.switchToGenerated()
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
   })
@@ -188,9 +194,11 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Type search in Generated tab
     await tab.searchInput.fill('landscape')
     await expect(tab.searchInput).toHaveValue('landscape')
 
+    // Switch to Imported tab
     await tab.switchToImported()
     await expect(tab.searchInput).toHaveValue('')
   })
@@ -227,8 +235,10 @@ test.describe('Assets sidebar - grid view display', () => {
     await tab.open()
     await tab.switchToImported()
 
+    // Wait for imported assets to render
     await expect(tab.assetCards.first()).toBeVisible()
 
+    // Imported tab should show the mocked files
     await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
   })
 
@@ -276,9 +286,11 @@ test.describe('Assets sidebar - view mode toggle', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Open settings menu and select list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
 
+    // List view items should now be visible
     await expect(tab.listViewItems.first()).toBeVisible()
   })
 
@@ -286,13 +298,16 @@ test.describe('Assets sidebar - view mode toggle', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Switch to list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
     await expect(tab.listViewItems.first()).toBeVisible()
 
+    // Switch back to grid view (settings popover is still open)
     await tab.gridViewOption.click()
     await tab.waitForAssets()
 
+    // Grid cards (with data-selected attribute) should be visible again
     await expect(tab.assetCards.first()).toBeVisible()
   })
 })
@@ -327,8 +342,10 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
+    // Search for a specific filename that matches only one asset
     await tab.searchInput.fill('landscape')
 
+    // Wait for filter to reduce the count
     await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
   })
 
@@ -338,6 +355,7 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
+    // Filter then clear
     await tab.searchInput.fill('landscape')
     await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
 
@@ -373,8 +391,10 @@ test.describe('Assets sidebar - selection', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Click first asset card
     await tab.assetCards.first().click()
 
+    // Should have data-selected="true"
     await expect(tab.selectedCards).toHaveCount(1)
   })
 
@@ -385,9 +405,11 @@ test.describe('Assets sidebar - selection', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
+    // Click first card
     await cards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Ctrl+click second card
     await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
     await expect(tab.selectedCards).toHaveCount(2)
   })
@@ -398,8 +420,10 @@ test.describe('Assets sidebar - selection', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Select an asset
     await tab.assetCards.first().click()
 
+    // Footer should show selection count
     await expect(tab.selectionCountButton).toBeVisible()
   })
 
@@ -407,10 +431,15 @@ test.describe('Assets sidebar - selection', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Hover over the selection count button to reveal "Deselect all"
+    await tab.selectionCountButton.hover()
     await expect(tab.deselectAllButton).toBeVisible()
+
+    // Click "Deselect all"
     await tab.deselectAllButton.click()
     await expect(tab.selectedCards).toHaveCount(0)
   })
@@ -419,11 +448,14 @@ test.describe('Assets sidebar - selection', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
+    // Switch to Imported tab
     await tab.switchToImported()
 
+    // Switch back - selection should be cleared
     await tab.switchToGenerated()
     await tab.waitForAssets()
     await expect(tab.selectedCards).toHaveCount(0)
@@ -449,8 +481,10 @@ test.describe('Assets sidebar - context menu', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Right-click first asset
     await tab.assetCards.first().click({ button: 'right' })
 
+    // Context menu should appear with standard items
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await expect(contextMenu).toBeVisible()
   })
@@ -531,6 +565,8 @@ test.describe('Assets sidebar - context menu', () => {
   test('Cancelling export-workflow filename prompt does not show an error toast', async ({
     comfyPage
   }) => {
+    // job-gamma is the first card; its detail carries a valid workflow so
+    // extraction succeeds and the filename prompt opens.
     await comfyPage.assets.mockJobDetail('job-gamma', JOB_GAMMA_DETAIL)
 
     const tab = comfyPage.menu.assetsTab
@@ -578,6 +614,8 @@ test.describe('Assets sidebar - context menu', () => {
   test('Export-workflow shows a warning toast when the asset has no workflow', async ({
     comfyPage
   }) => {
+    // Strip the workflow field so extraction yields null and the export
+    // action returns { success: false, error: 'No workflow…' }.
     const { workflow: _, ...detailWithoutWorkflow } = JOB_GAMMA_DETAIL
     await comfyPage.assets.mockJobDetail('job-gamma', detailWithoutWorkflow)
 
@@ -587,6 +625,7 @@ test.describe('Assets sidebar - context menu', () => {
     await tab.assetCards.first().click({ button: 'right' })
     await tab.contextMenuItem('Export workflow').click()
 
+    // Filename prompt should be skipped: extraction fails before the prompt.
     await expect(comfyPage.toast.toastWarnings).toBeVisible()
     await expect(comfyPage.toast.toastSuccesses).toBeHidden({ timeout: 1500 })
   })
@@ -600,18 +639,23 @@ test.describe('Assets sidebar - context menu', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
+    // Dismiss any toasts that appeared after asset loading
     await tab.dismissToasts()
 
-    // useKeyModifier('Control') needs keyboard events, not click modifiers.
+    // Multi-select: use keyboard.down/up so useKeyModifier('Control') detects
+    // the modifier — click({ modifiers }) only sets the mouse event flag and
+    // does not fire a keydown event that VueUse tracks.
     await cards.first().click()
     await comfyPage.page.keyboard.down('Control')
     await cards.nth(1).click()
     await comfyPage.page.keyboard.up('Control')
 
+    // Verify multi-selection took effect and footer is stable before right-clicking
     await expect(tab.selectedCards).toHaveCount(2)
     await expect(tab.selectionFooter).toBeVisible()
 
-    // dispatchEvent avoids the selection footer intercepting a right click.
+    // Use dispatchEvent instead of click({ button: 'right' }) to avoid any
+    // overlay intercepting the event, and assert directly without toPass.
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await cards.first().dispatchEvent('contextmenu', {
       bubbles: true,
@@ -620,6 +664,7 @@ test.describe('Assets sidebar - context menu', () => {
     })
     await expect(contextMenu).toBeVisible()
 
+    // Bulk menu should show bulk download action
     await expect(tab.contextMenuItem('Download all')).toBeVisible()
   })
 })
@@ -647,6 +692,7 @@ test.describe('Assets sidebar - bulk actions', () => {
 
     await tab.assetCards.first().click()
 
+    // Download button in footer should be visible
     await expect(tab.downloadSelectedButton).toBeVisible()
   })
 
@@ -658,6 +704,7 @@ test.describe('Assets sidebar - bulk actions', () => {
 
     await tab.assetCards.first().click()
 
+    // Delete button in footer should be visible
     await expect(tab.deleteSelectedButton).toBeVisible()
   })
 
@@ -665,67 +712,21 @@ test.describe('Assets sidebar - bulk actions', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
+    // Select the two single-output assets (job-alpha, job-beta).
+    // The count reflects total outputs, not cards — job-gamma has
+    // outputs_count: 2 which would inflate the total.
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(3)
 
+    // Cards are sorted newest-first: gamma (idx 0), beta (1), alpha (2)
     await cards.nth(1).click()
     await comfyPage.page.keyboard.down('Control')
     await cards.nth(2).click()
     await comfyPage.page.keyboard.up('Control')
 
+    // Selection count should show the count
     await expect(tab.selectionCountButton).toBeVisible()
-    await expect(tab.selectionCountButton).toHaveText(/\b2 selected\b/)
-  })
-
-  test('Selection count sums the outputs of a stacked asset', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await tab.assetCards.first().click()
-
-    await expect(tab.selectionCountButton).toBeVisible()
-    await expect(tab.selectionCountButton).toHaveText(/\b2 selected\b/)
-  })
-
-  test('Selection bar stays capped, not stretched, on a wide panel', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.setViewportSize({ width: 1600, height: 900 })
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    const gutter = comfyPage.page.locator('.p-splitter-gutter').first()
-    await expect(gutter).toBeVisible()
-    const gutterBox = await gutter.boundingBox()
-    if (!gutterBox) {
-      throw new Error('sidebar splitter gutter has no bounding box')
-    }
-    await comfyPage.page.mouse.move(
-      gutterBox.x + gutterBox.width / 2,
-      gutterBox.y + gutterBox.height / 2
-    )
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(900, gutterBox.y + gutterBox.height / 2, {
-      steps: 12
-    })
-    await comfyPage.page.mouse.up()
-
-    await tab.assetCards.first().click()
-    await expect(tab.selectionFooter).toBeVisible()
-
-    const sidebar = comfyPage.page.locator('.side-bar-panel').first()
-    await expect
-      .poll(async () => (await sidebar.boundingBox())?.width ?? 0)
-      .toBeGreaterThan(520)
-    await expect
-      .poll(async () => {
-        const bar = await tab.selectionFooter.boundingBox()
-        const side = await sidebar.boundingBox()
-        return bar && side ? side.width - bar.width : 0
-      })
-      .toBeGreaterThan(100)
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
   })
 })
 
@@ -832,7 +833,8 @@ test.describe('Assets sidebar - pagination', () => {
     await comfyPage.assets.mockOutputHistory(manyJobs)
     await comfyPage.setup()
 
-    // Queue polling also calls /jobs, so wait for completed history only.
+    // Capture the first history fetch (terminal statuses only).
+    // Queue polling also hits /jobs but with status=in_progress,pending.
     const firstRequest = comfyPage.page.waitForRequest((req) => {
       if (!/\/api\/jobs\?/.test(req.url())) return false
       const url = new URL(req.url())
@@ -1000,7 +1002,9 @@ const MIXED_MEDIA_JOBS: RawJobListItem[] = [
   })
 ]
 
-// Filter button is guarded by isCloud; cloud CI needs authenticated setup.
+// Filter button is guarded by isCloud (compile-time). The cloud CI project
+// cannot use comfyPageFixture (auth required). Enable once cloud E2E infra
+// supports authenticated comfyPage setup.
 test.describe('Assets sidebar - media type filter', () => {
   test.fixme(true, 'Requires DISTRIBUTION=cloud build with auth bypass')
 
@@ -1036,9 +1040,12 @@ test.describe('Assets sidebar - media type filter', () => {
       'All three mixed-media jobs should render'
     ).toHaveCount(3)
 
+    // Open filter menu and enable only image filter (selecting a filter
+    // restricts to that type only, hiding unselected types)
     await tab.openFilterMenu()
     await tab.filterCheckbox('Image').click()
 
+    // Only the image asset should remain
     await expect(tab.assetCards).toHaveCount(1, { timeout: 5000 })
     await expect(tab.getAssetCardByName('photo.png')).toBeVisible()
   })
@@ -1049,10 +1056,12 @@ test.describe('Assets sidebar - media type filter', () => {
 
     const initialCount = await tab.assetCards.count()
 
+    // Enable image filter to restrict to images only
     await tab.openFilterMenu()
     await tab.filterCheckbox('Image').click()
     await expect(tab.assetCards).toHaveCount(1, { timeout: 5000 })
 
+    // Uncheck image filter to remove all filters (restores all assets)
     await tab.filterCheckbox('Image').click()
     await expect(tab.assetCards).toHaveCount(initialCount, { timeout: 5000 })
   })

browser_tests/tests/sidebar/assetsSidebarTab.spec.ts

@@ -214,7 +214,7 @@ test.describe('FE-130 assets sidebar route mocks', () => {
     await tab.open()
 
     await tab.getAssetCardByName('alpha').click()
-    await expect(tab.selectionCountButton).toHaveText(/\b1 selected\b/)
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*1\b/)
     await expect(tab.deleteSelectedButton).toBeVisible()
     await expect(tab.downloadSelectedButton).toBeVisible()
 
@@ -222,7 +222,7 @@ test.describe('FE-130 assets sidebar route mocks', () => {
     await tab.getAssetCardByName('beta').click()
     await comfyPage.page.keyboard.up('Control')
 
-    await expect(tab.selectionCountButton).toHaveText(/\b2 selected\b/)
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
     await expect(tab.deleteSelectedButton).toBeVisible()
     await expect(tab.downloadSelectedButton).toBeVisible()
   })

browser_tests/tests/sidebar/modelLibrary.spec.ts

@@ -233,64 +233,4 @@ test.describe('Model library sidebar - empty state', () => {
     await expect(tab.folderNodes).toHaveCount(0)
     await expect(tab.leafNodes).toHaveCount(0)
   })
-
-  test.describe('Model library sidebar - add node', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-      await comfyPage.setup()
-      await comfyPage.nodeOps.clearGraph()
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.modelLibrary.clearMocks()
-    })
-
-    test('Clicking a model defers creation until placed on the canvas', async ({
-      comfyPage
-    }) => {
-      const tab = comfyPage.menu.modelLibraryTab
-      await tab.open()
-      await tab.getFolderByLabel('checkpoints').click()
-      await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
-
-      await tab.getLeafByLabel('sd_xl_base_1.0').click()
-
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 1000 })
-        .toBe(0)
-
-      const canvasBox = (await comfyPage.canvas.boundingBox())!
-      await comfyPage.canvas.click({
-        position: { x: canvasBox.width / 2, y: canvasBox.height / 2 }
-      })
-
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect
-        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
-        .toBe(1)
-
-      const [loader] = await comfyPage.nodeOps.getNodeRefsByType(
-        'CheckpointLoaderSimple'
-      )
-      expect(loader).toBeDefined()
-      const widget = await loader.getWidgetByName('ckpt_name')
-      expect(await widget.getValue()).toBe('sd_xl_base_1.0.safetensors')
-    })
-
-    test('Ghost preview shows the model in the loader widget before placing', async ({
-      comfyPage
-    }) => {
-      const tab = comfyPage.menu.modelLibraryTab
-      await tab.open()
-      await tab.getFolderByLabel('checkpoints').click()
-      await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
-
-      await tab.getLeafByLabel('sd_xl_base_1.0').click()
-
-      const ghost = comfyPage.page.locator(
-        '[data-node-id="preview-CheckpointLoaderSimple"]'
-      )
-      await expect(ghost).toContainText('sd_xl_base_1.0.safetensors')
-    })
-  })
 })

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

@@ -1,9 +1,6 @@
-import type { ConsoleMessage } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 import { getPseudoPreviewWidgets } from '@e2e/fixtures/utils/promotedWidgets'
 
 const domPreviewSelector = '.image-preview'
@@ -98,225 +95,4 @@ test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
       await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
     })
   })
-
-  test.describe('Detach Race Repro', { tag: ['@vue-nodes'] }, () => {
-    const SUBGRAPH_NODE_TITLE = 'New Subgraph'
-
-    // Queues legacy onNodeRemoved/onSelectionChange so unpack completes first,
-    // widening the race window so a guard regression deterministically surfaces.
-    async function deferLegacyHandlers(comfyPage: ComfyPage) {
-      return await comfyPage.page.evaluateHandle(() => {
-        const graph = window.app!.graph!
-        const canvas = window.app!.canvas!
-        const queue: Array<() => void> = []
-        const originalNodeRemoved = graph.onNodeRemoved
-        const originalSelectionChange = canvas.onSelectionChange
-        graph.onNodeRemoved = function (node) {
-          queue.push(() => originalNodeRemoved?.call(this, node))
-        }
-        canvas.onSelectionChange = function (selected) {
-          queue.push(() => originalSelectionChange?.call(this, selected))
-        }
-        return {
-          drain: () => {
-            for (const fn of queue.splice(0)) fn()
-          },
-          restore: () => {
-            graph.onNodeRemoved = originalNodeRemoved
-            canvas.onSelectionChange = originalSelectionChange
-          }
-        }
-      })
-    }
-
-    type DeferredHandlers = Awaited<ReturnType<typeof deferLegacyHandlers>>
-
-    // Defers only the legacy selection-change callback, so the detached host
-    // node lingers in the reactive selection while onNodeRemoved still runs
-    // normally and clears it from the canvas. This isolates the panel render
-    // path: a panel mounted during this window reads the stale selection.
-    async function deferSelectionChange(
-      comfyPage: ComfyPage
-    ): Promise<DeferredHandlers> {
-      return await comfyPage.page.evaluateHandle(() => {
-        const canvas = window.app!.canvas!
-        const queue: Array<() => void> = []
-        const original = canvas.onSelectionChange
-        canvas.onSelectionChange = function (selected) {
-          queue.push(() => original?.call(this, selected))
-        }
-        return {
-          drain: () => {
-            for (const fn of queue.splice(0)) fn()
-          },
-          restore: () => {
-            canvas.onSelectionChange = original
-          }
-        }
-      })
-    }
-
-    function isNullGraphErrorText(text: string): boolean {
-      return text.includes('NullGraphError') || text.endsWith('has no graph')
-    }
-
-    // Vue's default errorHandler routes render throws to console.error,
-    // not pageerror - listen to both.
-    function captureNullGraphErrors(comfyPage: ComfyPage) {
-      const captured: string[] = []
-      const onPageError = (err: Error) => {
-        if (
-          err.name === 'NullGraphError' ||
-          isNullGraphErrorText(err.message ?? '')
-        ) {
-          captured.push(`pageerror ${err.name}: ${err.message}`)
-        }
-      }
-      const onConsoleMessage = (msg: ConsoleMessage) => {
-        if (msg.type() !== 'error') return
-        const text = msg.text()
-        if (isNullGraphErrorText(text)) {
-          captured.push(`console.error: ${text}`)
-        }
-      }
-      comfyPage.page.on('pageerror', onPageError)
-      comfyPage.page.on('console', onConsoleMessage)
-      return {
-        getErrors: () => [...captured],
-        stop: () => {
-          comfyPage.page.off('pageerror', onPageError)
-          comfyPage.page.off('console', onConsoleMessage)
-        }
-      }
-    }
-
-    async function unpackViaContextMenu(comfyPage: ComfyPage, title: string) {
-      const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-      await comfyPage.contextMenu.openForVueNode(fixture.header)
-      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
-    }
-
-    async function reopenRightSidePanel(comfyPage: ComfyPage) {
-      const { propertiesPanel } = comfyPage.menu
-      await propertiesPanel.toggleButton.click()
-      await expect(propertiesPanel.root).toBeHidden()
-      await propertiesPanel.toggleButton.click()
-      await comfyPage.nextFrame()
-    }
-
-    // Unpacks the subgraph behind deferred teardown, runs an optional
-    // interaction while the node is detached but not yet cleaned up, then
-    // drains the deferred handlers and reports any NullGraphErrors seen.
-    async function unpackAndCaptureNullGraphErrors(
-      comfyPage: ComfyPage,
-      options: {
-        defer: (comfyPage: ComfyPage) => Promise<DeferredHandlers>
-        duringWindow?: (comfyPage: ComfyPage) => Promise<void>
-      }
-    ): Promise<string[]> {
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      const errors = captureNullGraphErrors(comfyPage)
-      const deferred = await options.defer(comfyPage)
-      try {
-        await unpackViaContextMenu(comfyPage, SUBGRAPH_NODE_TITLE)
-        await expect(subgraphNode).toHaveCount(0)
-        await options.duringWindow?.(comfyPage)
-        await deferred.evaluate((handlers) => handlers.drain())
-        // Let drained-handler reactive flushes settle before stop().
-        await comfyPage.nextFrame()
-        return errors.getErrors()
-      } finally {
-        await deferred.evaluate((handlers) => handlers.restore())
-        await deferred.dispose()
-        errors.stop()
-      }
-    }
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', true)
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      await expect(subgraphNode).toBeVisible()
-
-      const fixture =
-        await comfyPage.vueNodes.getFixtureByTitle(SUBGRAPH_NODE_TITLE)
-      await fixture.header.click()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
-      ).toBeVisible()
-      await comfyPage.nextFrame()
-    })
-
-    test('unpack does not surface NullGraphError on the LGraphNode render path', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'LGraphNode render path: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack does not surface NullGraphError from the TabSubgraphInputs panel', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'TabSubgraphInputs panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack with subgraph editor open does not surface NullGraphError from the SubgraphEditor panel', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle).click()
-      await comfyPage.nextFrame()
-
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferLegacyHandlers
-      })
-      expect(
-        nullGraphErrors,
-        'SubgraphEditor panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('reopening the right side panel after unpack does not surface NullGraphError', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferSelectionChange,
-        duringWindow: reopenRightSidePanel
-      })
-      expect(
-        nullGraphErrors,
-        'TabSubgraphInputs remount: stale selection must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('reopening the right side panel with the subgraph editor open does not surface NullGraphError', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle).click()
-      await comfyPage.nextFrame()
-
-      const nullGraphErrors = await unpackAndCaptureNullGraphErrors(comfyPage, {
-        defer: deferSelectionChange,
-        duringWindow: reopenRightSidePanel
-      })
-      expect(
-        nullGraphErrors,
-        'SubgraphEditor remount: stale selection must not surface NullGraphError'
-      ).toEqual([])
-    })
-  })
 })

browser_tests/tests/templateFilteringCount.spec.ts

@@ -1,13 +1,13 @@
 import { expect, mergeTests } from '@playwright/test'
 
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
 import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
 
-const test = mergeTests(createCloudAssetsFixture([]), templateApiFixture)
+const test = mergeTests(comfyPageFixture, templateApiFixture)
 
 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop

browser_tests/tests/topbar/workflowTabStatus.spec.ts

@@ -1,139 +0,0 @@
-import type { Locator, WebSocketRoute } from '@playwright/test'
-import { mergeTests } from '@playwright/test'
-
-import {
-  comfyPageFixture,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-const test = mergeTests(comfyPageFixture, webSocketFixture)
-
-const KSAMPLER_NODE = '3'
-
-async function runOnBackgroundTab(
-  comfyPage: ComfyPage,
-  ws: WebSocketRoute
-): Promise<{ exec: ExecutionHelper; jobId: string; backgroundTab: Locator }> {
-  const topbar = comfyPage.menu.topbar
-
-  await comfyPage.workflow.waitForActiveWorkflow()
-  await comfyPage.workflow.waitForWorkflowIdle()
-
-  const exec = new ExecutionHelper(comfyPage, ws)
-  const jobId = await exec.run()
-  await comfyPage.nextFrame()
-
-  await topbar.newWorkflowButton.click()
-  await comfyPage.workflow.waitForWorkflowIdle()
-  await expect(topbar.getActiveTab()).toContainText('(2)')
-
-  const backgroundTab = topbar.getTab(0)
-  exec.executionStart(jobId)
-  await expect(
-    backgroundTab.getByRole('img', { name: 'Running' })
-  ).toBeVisible()
-
-  return { exec, jobId, backgroundTab }
-}
-
-test.describe('Workflow tab status indicator', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.Workflow.WorkflowTabsPosition',
-      'Topbar'
-    )
-    await comfyPage.setup()
-  })
-
-  test('replaces the running indicator with completed when the job finishes', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId, backgroundTab } = await runOnBackgroundTab(
-      comfyPage,
-      ws
-    )
-
-    exec.executionSuccess(jobId)
-
-    await expect(
-      backgroundTab.getByRole('img', { name: 'Completed' })
-    ).toBeVisible()
-    await expect(
-      backgroundTab.getByRole('img', { name: 'Running' })
-    ).toHaveCount(0)
-  })
-
-  test('shows failed when the background job errors', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId, backgroundTab } = await runOnBackgroundTab(
-      comfyPage,
-      ws
-    )
-
-    exec.executionError(jobId, KSAMPLER_NODE, 'boom')
-
-    // The error opens a modal dialog that aria-hides the rest of the app
-    // (focus trap), taking the tab out of the accessibility tree. Dismiss it
-    // so the badge is reachable by role.
-    const errorDialog = comfyPage.page.getByTestId(TestIds.dialogs.errorDialog)
-    await expect(errorDialog).toBeVisible()
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(errorDialog).toBeHidden()
-
-    await expect(
-      backgroundTab.getByRole('img', { name: 'Failed' })
-    ).toBeVisible()
-  })
-
-  test('drops the indicator on user interrupt rather than showing an error', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId, backgroundTab } = await runOnBackgroundTab(
-      comfyPage,
-      ws
-    )
-
-    exec.executionInterrupted(jobId, KSAMPLER_NODE)
-
-    await expect(backgroundTab.getByRole('img')).toHaveCount(0)
-  })
-
-  test('clears the indicator once the tab is activated', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    const ws = await getWebSocket()
-    const { exec, jobId, backgroundTab } = await runOnBackgroundTab(
-      comfyPage,
-      ws
-    )
-
-    exec.executionSuccess(jobId)
-    await expect(
-      backgroundTab.getByRole('img', { name: 'Completed' })
-    ).toBeVisible()
-
-    const currentTab = comfyPage.menu.topbar.getActiveTab()
-
-    await expect(
-      backgroundTab.getByRole('img', { name: 'Completed' })
-    ).toBeVisible()
-    await backgroundTab.click()
-    await expect(backgroundTab.getByRole('img')).toHaveCount(0)
-
-    await currentTab.click()
-    await comfyPage.workflow.waitForWorkflowIdle()
-    await expect(backgroundTab.getByRole('img')).toHaveCount(0)
-  })
-})

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -280,36 +280,3 @@ test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
     await expect.poll(bypassCount, "won't toggle double selected node").toBe(7)
   })
 })
-
-test.describe(
-  'Vue Node Group Context Menu',
-  { tag: ['@vue-nodes', '@canvas'] },
-  () => {
-    test('right-clicking a group opens the Vue context menu instead of the legacy menu', async ({
-      comfyPage
-    }) => {
-      // Deselect so the right-click selects the group itself.
-      await comfyPage.keyboard.selectAll()
-      await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
-      await expect
-        .poll(() => comfyPage.page.evaluate(() => graph!.groups.length))
-        .toBe(1)
-      await comfyPage.page.mouse.click(100, 100)
-      await comfyPage.nextFrame()
-
-      const groupPos = await getGroupTitlePosition(comfyPage, 'Group')
-      await comfyPage.page.mouse.click(groupPos.x, groupPos.y, {
-        button: 'right'
-      })
-
-      await expect(comfyPage.contextMenu.primeVueMenu).toBeVisible()
-      await expect(comfyPage.contextMenu.litegraphContextMenu).toBeHidden()
-      await expect(comfyPage.contextMenu.litegraphMenu).toBeHidden()
-
-      // Group-only action confirms it is the group menu.
-      await expect(
-        comfyPage.contextMenu.primeVueMenu.getByText('Fit Group To Nodes')
-      ).toBeVisible()
-    })
-  }
-)

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

@@ -335,30 +335,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.canvasOps.moveMouseToEmptyArea()
   })
 
-  test('pointerCancel stops autopan', async ({ comfyPage }) => {
-    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    await ksampler.header.click({ trial: true })
-    await comfyPage.page.mouse.down()
-
-    const getOffset = () => comfyPage.canvasOps.getOffset()
-    const initialOffset = await getOffset()
-    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
-    await expect.poll(getOffset, 'drag with autopan').not.toEqual(initialOffset)
-
-    await test.step('move outside pan range and cancel drag', async () => {
-      await comfyPage.page.mouse.move(400, 400, { steps: 20 })
-      await ksampler.header.evaluate((node) =>
-        node.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
-      )
-    })
-
-    const secondaryOffset = await getOffset()
-
-    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
-    await comfyPage.nextFrame()
-    expect(await getOffset(), 'drag canceled').toEqual(secondaryOffset)
-  })
-
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.47.3",
+  "version": "1.47.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -19,10 +19,7 @@
     "size:collect": "node scripts/size-collect.js",
     "size:report": "node scripts/size-report.js",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
-    "dev:cloud": "pnpm dev:cloud:test",
-    "dev:cloud:test": "cross-env DEV_SERVER_COMFYUI_URL=https://testcloud.comfy.org/ vite --config vite.config.mts",
-    "dev:cloud:staging": "cross-env DEV_SERVER_COMFYUI_URL=https://stagingcloud.comfy.org/ vite --config vite.config.mts",
-    "dev:cloud:prod": "cross-env DEV_SERVER_COMFYUI_URL=https://cloud.comfy.org/ vite --config vite.config.mts",
+    "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' vite --config vite.config.mts",
     "dev:desktop": "pnpm --filter @comfyorg/desktop-ui run dev",
     "dev:electron": "cross-env DISTRIBUTION=desktop vite --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true vite --config vite.config.mts",

src/components/boundingBoxes/WidgetBoundingBoxes.test.ts

@@ -1,224 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createPinia, setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import WidgetBoundingBoxes from './WidgetBoundingBoxes.vue'
-import boundingBoxes from '@/locales/en/main.json'
-import type { BoundingBox } from '@/types/boundingBoxes'
-
-const { appState } = vi.hoisted(() => ({ appState: { node: null as unknown } }))
-
-vi.mock('@/scripts/app', () => ({
-  app: { canvas: { graph: { getNodeById: () => appState.node } } }
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      boundingBoxes: boundingBoxes.boundingBoxes,
-      palette: { swatchTitle: 'Edit', addColor: 'Add' }
-    }
-  }
-})
-
-const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
-  x: 51,
-  y: 51,
-  width: 256,
-  height: 256,
-  metadata: { type: 'obj', text: '', desc: '', palette: ['#ff0000'] },
-  ...over
-})
-
-const fakeCtx = {
-  measureText: (s: string) => ({ width: s.length * 7 }),
-  setTransform: () => {},
-  clearRect: () => {},
-  fillRect: () => {},
-  strokeRect: () => {},
-  fillText: () => {},
-  drawImage: () => {},
-  save: () => {},
-  restore: () => {},
-  beginPath: () => {},
-  rect: () => {},
-  clip: () => {},
-  font: '',
-  fillStyle: '',
-  strokeStyle: '',
-  lineWidth: 0
-} as unknown as CanvasRenderingContext2D
-
-function prepCanvas(canvas: HTMLCanvasElement) {
-  Object.defineProperty(canvas, 'clientWidth', {
-    value: 100,
-    configurable: true
-  })
-  Object.defineProperty(canvas, 'clientHeight', {
-    value: 100,
-    configurable: true
-  })
-  canvas.getContext = (() =>
-    fakeCtx) as unknown as HTMLCanvasElement['getContext']
-  canvas.getBoundingClientRect = () =>
-    ({
-      left: 0,
-      top: 0,
-      right: 100,
-      bottom: 100,
-      width: 100,
-      height: 100,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    }) as DOMRect
-  canvas.setPointerCapture = () => {}
-  canvas.releasePointerCapture = () => {}
-}
-
-function renderWidget(modelValue: BoundingBox[]) {
-  const result = render(WidgetBoundingBoxes, {
-    props: { nodeId: '1', modelValue },
-    global: { plugins: [i18n] }
-  })
-  const canvas = screen.getByTestId('bounding-boxes').querySelector('canvas')!
-  prepCanvas(canvas)
-  return { ...result, canvas }
-}
-
-const lastBoxes = (emitted: () => Record<string, unknown[][]>) => {
-  const calls = emitted()['update:modelValue']
-  return calls[calls.length - 1][0] as BoundingBox[]
-}
-
-beforeEach(() => {
-  setActivePinia(createPinia())
-  appState.node = {
-    widgets: [
-      { name: 'width', value: 512 },
-      { name: 'height', value: 512 }
-    ],
-    findInputSlot: () => -1,
-    getInputNode: () => null
-  }
-  vi.stubGlobal('requestAnimationFrame', () => 1)
-  vi.stubGlobal('cancelAnimationFrame', () => {})
-})
-
-afterEach(() => {
-  vi.unstubAllGlobals()
-})
-
-describe('WidgetBoundingBoxes', () => {
-  it('renders the canvas and editor shell', () => {
-    renderWidget([])
-    expect(
-      screen.getByTestId('bounding-boxes').querySelector('canvas')
-    ).not.toBeNull()
-  })
-
-  it('shows the region editor panel when a region is active', () => {
-    renderWidget([box()])
-    expect(screen.getByText('obj')).toBeTruthy()
-    expect(screen.getByText('text')).toBeTruthy()
-  })
-
-  it('reveals the text field after switching the region to text', async () => {
-    renderWidget([box()])
-    expect(
-      screen.queryByPlaceholderText('text to render (verbatim)')
-    ).toBeNull()
-    await userEvent.click(screen.getByText('text'))
-    expect(
-      screen.getByPlaceholderText('text to render (verbatim)')
-    ).toBeTruthy()
-  })
-
-  it('clears all regions via the clear button', async () => {
-    const { emitted } = renderWidget([box()])
-    await userEvent.click(screen.getByText('Clear all'))
-    expect(lastBoxes(emitted)).toEqual([])
-  })
-
-  it('draws a region through canvas pointer events', async () => {
-    const { canvas, emitted } = renderWidget([])
-    await fireEvent.pointerDown(canvas, {
-      button: 0,
-      clientX: 10,
-      clientY: 10,
-      pointerId: 1
-    })
-    await fireEvent.pointerMove(canvas, {
-      clientX: 60,
-      clientY: 60,
-      pointerId: 1
-    })
-    await fireEvent.pointerUp(canvas, {
-      clientX: 60,
-      clientY: 60,
-      pointerId: 1
-    })
-    expect(lastBoxes(emitted)).toHaveLength(1)
-  })
-
-  it('tracks focus and blur on the canvas', async () => {
-    const { canvas } = renderWidget([box()])
-    await fireEvent.focus(canvas)
-    await fireEvent.blur(canvas)
-    expect(canvas).toBeTruthy()
-  })
-
-  it('opens an inline editor on double click', async () => {
-    const { canvas, container } = renderWidget([box()])
-    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
-    expect(container.querySelector('textarea')).not.toBeNull()
-  })
-
-  it('syncs description edits back to the model', async () => {
-    const { emitted } = renderWidget([box()])
-    await fireEvent.update(
-      screen.getByPlaceholderText('description of this region'),
-      'a caption'
-    )
-    expect(lastBoxes(emitted)[0].metadata.desc).toBe('a caption')
-  })
-
-  it('edits the text field once the region is a text region', async () => {
-    const { emitted } = renderWidget([box()])
-    await userEvent.click(screen.getByText('text'))
-    await fireEvent.update(
-      screen.getByPlaceholderText('text to render (verbatim)'),
-      'hello'
-    )
-    expect(lastBoxes(emitted)[0].metadata.text).toBe('hello')
-  })
-
-  it('deletes the active region with the Delete key', async () => {
-    const { canvas, emitted } = renderWidget([box()])
-    await fireEvent.keyDown(canvas, { key: 'Delete' })
-    expect(lastBoxes(emitted)).toEqual([])
-  })
-
-  it('clears hover state on pointer leave', async () => {
-    const { canvas } = renderWidget([
-      box({ x: 10, y: 10, width: 256, height: 256 })
-    ])
-    await fireEvent.pointerMove(canvas, { clientX: 15, clientY: 15 })
-    await fireEvent.pointerLeave(canvas)
-    expect(canvas).toBeTruthy()
-  })
-
-  it('commits the inline editor on blur', async () => {
-    const { canvas, container, emitted } = renderWidget([box()])
-    await fireEvent.dblClick(canvas, { clientX: 30, clientY: 30 })
-    const editor = container.querySelector('textarea')!
-    await fireEvent.update(editor, 'committed')
-    await fireEvent.blur(editor)
-    expect(lastBoxes(emitted)[0].metadata.desc).toBe('committed')
-  })
-})

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -1,181 +0,0 @@
-<template>
-  <div
-    class="widget-expands flex size-full flex-col gap-1 select-none"
-    data-testid="bounding-boxes"
-    @pointerdown.stop
-  >
-    <div
-      ref="canvasContainer"
-      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
-      :style="canvasStyle"
-    >
-      <canvas
-        ref="canvasEl"
-        tabindex="0"
-        class="absolute inset-0 size-full rounded-sm outline-none"
-        :style="{ cursor: canvasCursor }"
-        @pointerdown="onPointerDown"
-        @pointermove="onCanvasPointerMove"
-        @pointerup="onDocPointerUp"
-        @pointercancel="onDocPointerUp"
-        @pointerleave="onPointerLeave"
-        @lostpointercapture="onDocPointerUp"
-        @dblclick="onDoubleClick"
-        @keydown="onCanvasKeyDown"
-        @focus="focused = true"
-        @blur="focused = false"
-      />
-      <textarea
-        v-if="inlineEditor"
-        ref="inlineEditorEl"
-        v-model="inlineEditor.value"
-        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-        :style="inlineEditor.style"
-        data-capture-wheel="true"
-        @keydown.stop="onInlineKeyDown"
-        @blur="commitInlineEditor"
-      />
-    </div>
-
-    <div
-      v-if="activeRegion"
-      class="flex flex-col gap-2 rounded-sm bg-node-component-surface p-2 text-xs"
-    >
-      <div
-        class="flex h-8 items-center gap-1 rounded-sm bg-component-node-widget-background p-1"
-      >
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              activeRegion.type === 'obj'
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="setActiveType('obj')"
-        >
-          {{ $t('boundingBoxes.typeObj') }}
-        </Button>
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              activeRegion.type === 'text'
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="setActiveType('text')"
-        >
-          {{ $t('boundingBoxes.typeText') }}
-        </Button>
-      </div>
-      <div
-        v-if="activeRegion.type === 'text'"
-        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
-      >
-        <span
-          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
-        >
-          {{ $t('boundingBoxes.textLabel') }}
-        </span>
-        <Textarea
-          v-model="activeRegion.text"
-          :placeholder="$t('boundingBoxes.textPlaceholder')"
-          class="min-h-14 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
-          data-capture-wheel="true"
-          @update:model-value="syncState"
-        />
-      </div>
-      <div
-        class="group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered"
-      >
-        <span
-          class="pointer-events-none absolute top-1.5 left-3 z-10 text-2xs text-muted-foreground"
-        >
-          {{ $t('boundingBoxes.descLabel') }}
-        </span>
-        <Textarea
-          v-model="activeRegion.desc"
-          :placeholder="$t('boundingBoxes.descPlaceholder')"
-          class="min-h-20 resize-none overflow-hidden pt-5 text-(length:--comfy-textarea-font-size) leading-normal not-disabled:bg-component-node-widget-background not-disabled:text-component-node-foreground hover:overflow-auto focus:overflow-auto"
-          data-capture-wheel="true"
-          @update:model-value="syncState"
-        />
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="shrink-0 truncate text-sm text-muted-foreground">
-          {{ $t('boundingBoxes.colors') }}
-        </span>
-        <PaletteSwatchRow
-          v-model="activeRegion.palette"
-          :max="maxColors"
-          @update:model-value="syncState"
-        />
-      </div>
-    </div>
-    <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
-      {{ $t('boundingBoxes.clickRegionToEdit') }}
-    </div>
-
-    <Button
-      variant="secondary"
-      size="md"
-      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
-      @click="clearAll"
-    >
-      <i class="icon-[lucide--undo-2]" />
-      {{ $t('boundingBoxes.clearAll') }}
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-import PaletteSwatchRow from '@/components/palette/PaletteSwatchRow.vue'
-import Button from '@/components/ui/button/Button.vue'
-import Textarea from '@/components/ui/textarea/Textarea.vue'
-import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
-import type { BoundingBox } from '@/types/boundingBoxes'
-
-const { nodeId } = defineProps<{ nodeId: string }>()
-const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
-
-const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
-const canvasContainer = useTemplateRef<HTMLDivElement>('canvasContainer')
-const inlineEditorEl = useTemplateRef<HTMLTextAreaElement>('inlineEditorEl')
-
-const {
-  canvasStyle,
-  canvasCursor,
-  focused,
-  activeRegion,
-  hasRegions,
-  inlineEditor,
-  maxColors,
-  onPointerDown,
-  onCanvasPointerMove,
-  onDocPointerUp,
-  onPointerLeave,
-  onDoubleClick,
-  onCanvasKeyDown,
-  onInlineKeyDown,
-  commitInlineEditor,
-  setActiveType,
-  clearAll,
-  syncState
-} = useBoundingBoxes(nodeId, {
-  canvasEl,
-  canvasContainer,
-  inlineEditorEl,
-  modelValue
-})
-</script>

src/components/common/TreeExplorerV2Node.test.ts

@@ -355,7 +355,7 @@ describe('TreeExplorerV2Node', () => {
       const nodeDiv = getTreeNode(container)
       await fireEvent.dragStart(nodeDiv)
 
-      expect(mockStartDrag).toHaveBeenCalledWith(mockData, { mode: 'native' })
+      expect(mockStartDrag).toHaveBeenCalledWith(mockData, 'native')
     })
 
     it('does not call startDrag for folder items on dragstart', async () => {

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -427,6 +427,7 @@ import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { usePrimeVueOverlayChildStyle } from '@/composables/usePopoverSizing'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -452,14 +453,16 @@ onMounted(() => {
 
 // Wrap onClose to track session end
 const onClose = () => {
-  const timeSpentSeconds = Math.floor(
-    (Date.now() - sessionStartTime.value) / 1000
-  )
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
 
-  useTelemetry()?.trackTemplateLibraryClosed({
-    template_selected: templateWasSelected.value,
-    time_spent_seconds: timeSpentSeconds
-  })
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
 
   originalOnClose()
 }

src/components/dialog/GlobalDialog.test.ts

@@ -44,30 +44,14 @@ describe('GlobalDialog renderer branching', () => {
     cleanup()
   })
 
-  it('renders the Reka branch when renderer is omitted (default)', async () => {
+  it('renders the PrimeVue branch when renderer is omitted', async () => {
     mountDialog()
     const store = useDialogStore()
 
     store.showDialog({
-      key: 'renderer-default',
-      title: 'Default renderer dialog',
-      component: Body
-    })
-
-    const dialogs = await screen.findAllByRole('dialog')
-    expect(dialogs.length).toBeGreaterThan(0)
-    expect(dialogs.some((el) => el.classList.contains('p-dialog'))).toBe(false)
-  })
-
-  it("renders the legacy PrimeVue branch when renderer is 'primevue'", async () => {
-    mountDialog()
-    const store = useDialogStore()
-
-    store.showDialog({
-      key: 'primevue-escape-hatch',
+      key: 'primevue-default',
       title: 'PrimeVue dialog',
-      component: Body,
-      dialogComponentProps: { renderer: 'primevue' }
+      component: Body
     })
 
     const dialogs = await screen.findAllByRole('dialog')

src/components/dialog/confirm/confirmDialog.test.ts

@@ -1,54 +0,0 @@
-/**
- * Dialog migration regression net: the showConfirmDialog helper must open
- * its dialog through the Reka renderer with zeroed section padding (the
- * Confirm* sections carry their own). Catches accidental reverts of the
- * Phase 6 renderer flip.
- */
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const showDialog = vi.hoisted(() => vi.fn())
-
-vi.mock('@/stores/dialogStore', () => ({
-  useDialogStore: () => ({ showDialog })
-}))
-
-import ConfirmBody from '@/components/dialog/confirm/ConfirmBody.vue'
-import ConfirmFooter from '@/components/dialog/confirm/ConfirmFooter.vue'
-import ConfirmHeader from '@/components/dialog/confirm/ConfirmHeader.vue'
-import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
-
-describe('showConfirmDialog Reka renderer opt-in', () => {
-  beforeEach(() => {
-    showDialog.mockReset()
-  })
-
-  it("sets renderer 'reka' with size 'md' and zeroed section padding", () => {
-    showConfirmDialog()
-
-    const [args] = showDialog.mock.calls[0]
-    expect(args.dialogComponentProps.renderer).toBe('reka')
-    expect(args.dialogComponentProps.size).toBe('md')
-    expect(args.dialogComponentProps.headerClass).toBe('p-0')
-    expect(args.dialogComponentProps.bodyClass).toBe('p-0')
-    expect(args.dialogComponentProps.footerClass).toBe('p-0')
-    expect(args.dialogComponentProps.pt).toBeUndefined()
-  })
-
-  it('forwards the confirm section components and caller props', () => {
-    showConfirmDialog({
-      key: 'confirm-test',
-      headerProps: { title: 'Title' },
-      props: { promptText: 'Prompt' },
-      footerProps: { confirmText: 'Delete' }
-    })
-
-    const [args] = showDialog.mock.calls[0]
-    expect(args.key).toBe('confirm-test')
-    expect(args.headerComponent).toBe(ConfirmHeader)
-    expect(args.component).toBe(ConfirmBody)
-    expect(args.footerComponent).toBe(ConfirmFooter)
-    expect(args.headerProps).toEqual({ title: 'Title' })
-    expect(args.props).toEqual({ promptText: 'Prompt' })
-    expect(args.footerProps).toEqual({ confirmText: 'Delete' })
-  })
-})

src/components/dialog/confirm/confirmDialog.ts

@@ -1,7 +1,6 @@
 import ConfirmBody from '@/components/dialog/confirm/ConfirmBody.vue'
 import ConfirmFooter from '@/components/dialog/confirm/ConfirmFooter.vue'
 import ConfirmHeader from '@/components/dialog/confirm/ConfirmHeader.vue'
-import type { DialogInstance } from '@/stores/dialogStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import type { ComponentAttrs } from 'vue-component-type-helpers'
 
@@ -12,9 +11,7 @@ interface ConfirmDialogOptions {
   footerProps?: ComponentAttrs<typeof ConfirmFooter>
 }
 
-export function showConfirmDialog(
-  options: ConfirmDialogOptions = {}
-): DialogInstance {
+export function showConfirmDialog(options: ConfirmDialogOptions = {}) {
   const dialogStore = useDialogStore()
   const { key, headerProps, props, footerProps } = options
   return dialogStore.showDialog({
@@ -26,13 +23,11 @@ export function showConfirmDialog(
     props,
     footerProps,
     dialogComponentProps: {
-      renderer: 'reka',
-      size: 'md',
-      // Confirm sections carry their own padding — zero out the dialog
-      // chrome padding, like the PrimeVue `pt` overrides did.
-      headerClass: 'p-0',
-      bodyClass: 'p-0',
-      footerClass: 'p-0'
+      pt: {
+        header: 'py-0! px-0!',
+        content: 'p-0!',
+        footer: 'p-0!'
+      }
     }
   })
 }

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -8,7 +8,6 @@
         v-model="filters['global'].value"
         class="max-w-96"
         size="lg"
-        autofocus
         :placeholder="
           $t('g.searchPlaceholder', { subject: $t('g.keybindings') })
         "

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -7,7 +7,6 @@ import { createI18n } from 'vue-i18n'
 
 import { render, screen, waitFor } from '@testing-library/vue'
 
-import type * as DistributionTypes from '@/platform/distribution/types'
 import type { AuditLog } from '@/services/customerEventsService'
 import { EventType } from '@/services/customerEventsService'
 
@@ -39,23 +38,6 @@ vi.mock('@/platform/telemetry', () => ({
   useTelemetry: () => null
 }))
 
-const mockFlags = vi.hoisted(() => ({ teamWorkspacesEnabled: false }))
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: () => ({ flags: mockFlags })
-}))
-
-vi.mock('@/platform/distribution/types', async (importOriginal) => ({
-  ...(await importOriginal<typeof DistributionTypes>()),
-  isCloud: true
-}))
-
-const mockWorkspaceApi = vi.hoisted(() => ({
-  getBillingEvents: vi.fn()
-}))
-vi.mock('@/platform/workspace/api/workspaceApi', () => ({
-  workspaceApi: mockWorkspaceApi
-}))
-
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -136,8 +118,6 @@ describe('UsageLogsTable', () => {
     vi.clearAllMocks()
 
     mockCustomerEventsService.getMyEvents.mockResolvedValue(mockEventsResponse)
-    mockWorkspaceApi.getBillingEvents.mockResolvedValue(mockEventsResponse)
-    mockFlags.teamWorkspacesEnabled = false
     mockCustomerEventsService.formatEventType.mockImplementation(
       (type: string) => {
         switch (type) {
@@ -340,20 +320,6 @@ describe('UsageLogsTable', () => {
     })
   })
 
-  describe('billing events source', () => {
-    it('uses workspaceApi.getBillingEvents when teamWorkspacesEnabled is on', async () => {
-      mockFlags.teamWorkspacesEnabled = true
-
-      await renderLoaded()
-
-      expect(mockWorkspaceApi.getBillingEvents).toHaveBeenCalledWith({
-        page: 1,
-        limit: 7
-      })
-      expect(mockCustomerEventsService.getMyEvents).not.toHaveBeenCalled()
-    })
-  })
-
   describe('EventType integration', () => {
     it('renders credit_added event with correct detail template', async () => {
       mockCustomerEventsService.getMyEvents.mockResolvedValue(

src/components/dialog/content/setting/UsageLogsTable.vue

@@ -99,10 +99,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
 import type { AuditLog } from '@/services/customerEventsService'
 import {
   EventType,
@@ -115,9 +112,6 @@ const error = ref<string | null>(null)
 
 const customerEventService = useCustomerEventsService()
 
-const { flags } = useFeatureFlags()
-const useBillingApi = computed(() => isCloud && flags.teamWorkspacesEnabled)
-
 const pagination = ref({
   page: 1,
   limit: 7,
@@ -144,13 +138,10 @@ const loadEvents = async () => {
   error.value = null
 
   try {
-    const params = {
+    const response = await customerEventService.getMyEvents({
       page: pagination.value.page,
       limit: pagination.value.limit
-    }
-    const response = useBillingApi.value
-      ? await workspaceApi.getBillingEvents(params)
-      : await customerEventService.getMyEvents(params)
+    })
 
     if (response) {
       if (response.events) {

src/components/graph/GraphCanvas.vue

@@ -93,7 +93,6 @@
 
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
-  <NodeDragPreview />
   <VueNodeSwitchPopup />
 
   <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
@@ -137,7 +136,6 @@ import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import LinkOverlayCanvas from '@/components/graph/LinkOverlayCanvas.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import NodeContextMenu from '@/components/graph/NodeContextMenu.vue'
-import NodeDragPreview from '@/components/graph/NodeDragPreview.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
@@ -147,7 +145,6 @@ import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useGroupContextMenu } from '@/composables/graph/useGroupContextMenu'
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
@@ -467,7 +464,6 @@ useNodeBadge()
 
 useGlobalLitegraph()
 useContextMenuTranslation()
-useGroupContextMenu()
 useCopy()
 usePaste()
 useWorkflowAutoSave()

src/components/graph/NodeDragPreview.test.ts

@@ -1,97 +0,0 @@
-import { render } from '@testing-library/vue'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import NodeDragPreview from '@/components/graph/NodeDragPreview.vue'
-import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { fromPartial } from '@total-typescript/shoehorn'
-
-vi.mock(
-  '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue',
-  () => ({
-    default: { template: '<div data-testid="node-preview" />' }
-  })
-)
-
-const nodeDef = fromPartial<ComfyNodeDefImpl>({ name: 'TestNode' })
-
-function moveMouse(clientX: number, clientY: number) {
-  window.dispatchEvent(new MouseEvent('mousemove', { clientX, clientY }))
-}
-
-function ghostElement() {
-  return document.querySelector('[data-testid="node-preview"]')?.parentElement
-    ?.parentElement
-}
-
-describe('NodeDragPreview', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    useNodeDragToCanvas().cancelDrag()
-    vi.useRealTimers()
-  })
-
-  it('shows no ghost when nothing is being dragged', async () => {
-    render(NodeDragPreview)
-
-    moveMouse(100, 200)
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    expect(ghostElement()).toBeFalsy()
-  })
-
-  it('keeps the ghost hidden until the mouse position is known', async () => {
-    render(NodeDragPreview)
-
-    useNodeDragToCanvas().startDrag(nodeDef)
-    await nextTick()
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    expect(ghostElement()).toBeFalsy()
-  })
-
-  it('follows the mouse with an offset while dragging', async () => {
-    render(NodeDragPreview)
-
-    useNodeDragToCanvas().startDrag(nodeDef)
-    await nextTick()
-    moveMouse(100, 200)
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    expect(ghostElement()?.style.transform).toBe('translate(112px, 212px)')
-
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    expect(ghostElement()?.style.transform).toBe('translate(112px, 212px)')
-
-    moveMouse(300, 400)
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    expect(ghostElement()?.style.transform).toBe('translate(312px, 412px)')
-  })
-
-  it('removes the ghost when the drag is cancelled', async () => {
-    render(NodeDragPreview)
-
-    useNodeDragToCanvas().startDrag(nodeDef)
-    await nextTick()
-    moveMouse(100, 200)
-    vi.advanceTimersByTime(16)
-    await nextTick()
-    expect(ghostElement()).toBeTruthy()
-
-    useNodeDragToCanvas().cancelDrag()
-    await nextTick()
-
-    expect(ghostElement()).toBeFalsy()
-  })
-})

src/components/graph/NodeDragPreview.vue

@@ -1,57 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      v-if="showGhost && rafPosition"
-      class="pointer-events-none fixed top-0 left-0 z-10000 will-change-transform"
-      :style="{
-        transform: `translate(${rafPosition.x + 12}px, ${rafPosition.y + 12}px)`
-      }"
-    >
-      <div class="origin-top-left scale-50 opacity-80">
-        <LGraphNodePreview
-          :node-def="draggedNode!"
-          :widget-values="pendingWidgetValues"
-          position="relative"
-        />
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { useMouse, useRafFn } from '@vueuse/core'
-import { computed, shallowRef, watch } from 'vue'
-
-import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
-import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
-
-const { isDragging, draggedNode, pendingWidgetValues } = useNodeDragToCanvas()
-
-const { x, y, sourceType } = useMouse({ type: 'client' })
-
-const showGhost = computed(() => Boolean(isDragging.value && draggedNode.value))
-const rafPosition = shallowRef<{ x: number; y: number }>()
-
-const { pause, resume } = useRafFn(
-  () => {
-    if (sourceType.value === null) return
-    const pos = rafPosition.value
-    if (pos && pos.x === x.value && pos.y === y.value) return
-    rafPosition.value = { x: x.value, y: y.value }
-  },
-  { immediate: false }
-)
-
-watch(
-  showGhost,
-  (show) => {
-    if (show) {
-      resume()
-    } else {
-      pause()
-      rafPosition.value = undefined
-    }
-  },
-  { immediate: true }
-)
-</script>

src/components/hdr/HdrViewerContent.test.ts

@@ -1,126 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access */
-import { render, screen } from '@testing-library/vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import HdrViewerContent from './HdrViewerContent.vue'
-
-vi.mock('@/base/common/downloadUtil', () => ({ downloadFile: vi.fn() }))
-
-const holder = vi.hoisted(() => ({ viewer: undefined as unknown }))
-vi.mock('@/composables/useHdrViewer', () => ({
-  useHdrViewer: () => holder.viewer,
-  CHANNEL_MODES: ['rgb', 'r', 'g', 'b', 'a', 'luminance']
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { loading: 'Loading', downloadImage: 'Download' },
-      hdrViewer: {
-        failedToLoad: 'Failed',
-        exposure: 'Exposure',
-        normalizeExposure: 'Auto exposure',
-        channel: 'Channel',
-        channels: {
-          rgb: 'RGB',
-          r: 'R',
-          g: 'G',
-          b: 'B',
-          a: 'Alpha',
-          luminance: 'Luminance'
-        },
-        sourceGamut: 'Source gamut',
-        dither: 'Dither',
-        clipWarnings: 'Clip warnings',
-        fitView: 'Fit',
-        histogram: 'Histogram',
-        resolution: 'Resolution',
-        min: 'Min',
-        max: 'Max',
-        mean: 'Mean',
-        stdDev: 'Std dev',
-        nan: 'NaN',
-        inf: 'Inf'
-      }
-    }
-  }
-})
-
-function makeViewer(overrides: Record<string, unknown> = {}) {
-  return {
-    exposureStops: ref(0),
-    dither: ref(true),
-    clipWarnings: ref(false),
-    gamut: ref('sRGB'),
-    channel: ref('r'),
-    loading: ref(false),
-    error: ref(null),
-    dimensions: ref('512 x 512'),
-    stats: ref({
-      min: 0,
-      max: 4,
-      mean: 0.5,
-      stdDev: 0.2,
-      nanCount: 2,
-      infCount: 1
-    }),
-    histogram: ref(new Uint32Array([1, 2, 3, 4])),
-    pixel: ref({ x: 1, y: 2, r: 0.1, g: 0.2, b: 0.3, a: 1 }),
-    mount: vi.fn(),
-    dispose: vi.fn(),
-    fitView: vi.fn(),
-    normalizeExposure: vi.fn(),
-    ...overrides
-  }
-}
-
-function renderViewer() {
-  return render(HdrViewerContent, {
-    props: { imageUrl: '/api/view?filename=out.exr' },
-    global: { plugins: [i18n], stubs: { Button: true } }
-  })
-}
-
-describe('HdrViewerContent', () => {
-  beforeEach(() => {
-    holder.viewer = makeViewer()
-  })
-
-  it('renders the full statistics set including NaN/Inf', () => {
-    renderViewer()
-    for (const label of [
-      'Resolution',
-      'Min',
-      'Max',
-      'Mean',
-      'Std dev',
-      'NaN',
-      'Inf'
-    ]) {
-      screen.getByText(label)
-    }
-  })
-
-  it('shows the pixel readout when a pixel is hovered', () => {
-    renderViewer()
-    expect(screen.getByTestId('hdr-pixel-readout')).toBeInTheDocument()
-  })
-
-  it('colors the histogram according to the selected channel', () => {
-    holder.viewer = makeViewer({ channel: ref('g') })
-    const { container } = renderViewer()
-    const path = container.querySelector('svg path')
-    expect(path?.getAttribute('class')).toContain('text-green-500')
-  })
-
-  it('renders an option for each channel mode', () => {
-    renderViewer()
-    expect(
-      screen.getByRole('option', { name: 'Luminance' })
-    ).toBeInTheDocument()
-  })
-})

src/components/hdr/HdrViewerContent.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="flex size-full bg-base-background">
-    <div class="relative flex-1">
-      <div
-        ref="containerRef"
-        class="absolute size-full"
-        data-testid="hdr-viewer-canvas"
-      />
-
-      <div
-        v-if="viewer.loading.value"
-        class="absolute inset-0 flex items-center justify-center text-base-foreground"
-      >
-        {{ $t('g.loading') }}...
-      </div>
-      <div
-        v-else-if="viewer.error.value"
-        role="alert"
-        class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-base-foreground"
-      >
-        <i class="icon-[lucide--image-off] size-12" />
-        <p class="text-sm">{{ $t('hdrViewer.failedToLoad') }}</p>
-      </div>
-
-      <div
-        v-if="viewer.pixel.value"
-        class="absolute top-2 left-2 rounded-sm bg-base-background/80 px-2 py-1 font-mono text-xs text-base-foreground"
-        data-testid="hdr-pixel-readout"
-      >
-        <div>{{ viewer.pixel.value.x }}, {{ viewer.pixel.value.y }}</div>
-        <div>
-          {{ formatNum(viewer.pixel.value.r) }}
-          {{ formatNum(viewer.pixel.value.g) }}
-          {{ formatNum(viewer.pixel.value.b) }}
-          <template v-if="viewer.pixel.value.a !== null">
-            {{ formatNum(viewer.pixel.value.a) }}
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex w-72 flex-col" data-testid="hdr-viewer-sidebar">
-      <div class="flex-1 overflow-y-auto p-4">
-        <div class="space-y-2">
-          <div class="space-y-4 p-2">
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.exposure') }}: {{ exposureLabel }}</label>
-              <input
-                v-model.number="viewer.exposureStops.value"
-                type="range"
-                min="-10"
-                max="10"
-                step="0.1"
-                class="w-full"
-                :aria-label="$t('hdrViewer.exposure')"
-              />
-            </div>
-            <Button
-              variant="secondary"
-              class="w-full"
-              @click="viewer.normalizeExposure"
-            >
-              {{ $t('hdrViewer.normalizeExposure') }}
-            </Button>
-          </div>
-
-          <div class="space-y-4 p-2">
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.channel') }}</label>
-              <select
-                v-model="viewer.channel.value"
-                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
-                :aria-label="$t('hdrViewer.channel')"
-              >
-                <option v-for="mode in channelModes" :key="mode" :value="mode">
-                  {{ channelLabels[mode] }}
-                </option>
-              </select>
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <label>{{ $t('hdrViewer.sourceGamut') }}</label>
-              <select
-                v-model="viewer.gamut.value"
-                class="bg-base-component-surface w-full rounded-sm px-2 py-1"
-                :aria-label="$t('hdrViewer.sourceGamut')"
-              >
-                <option v-for="name in gamutNames" :key="name" :value="name">
-                  {{ name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="space-y-4 p-2">
-            <div class="flex items-center gap-2">
-              <input
-                id="hdr-dither"
-                v-model="viewer.dither.value"
-                type="checkbox"
-                class="size-4 cursor-pointer accent-node-component-surface-highlight"
-              />
-              <label for="hdr-dither" class="cursor-pointer">
-                {{ $t('hdrViewer.dither') }}
-              </label>
-            </div>
-            <div class="flex items-center gap-2">
-              <input
-                id="hdr-clip"
-                v-model="viewer.clipWarnings.value"
-                type="checkbox"
-                class="size-4 cursor-pointer accent-node-component-surface-highlight"
-              />
-              <label for="hdr-clip" class="cursor-pointer">
-                {{ $t('hdrViewer.clipWarnings') }}
-              </label>
-            </div>
-          </div>
-
-          <div v-if="histogramPath" class="space-y-2 p-2">
-            <label>{{ $t('hdrViewer.histogram') }}</label>
-            <svg
-              viewBox="0 0 1 1"
-              preserveAspectRatio="none"
-              class="bg-base-component-surface aspect-3/2 w-full rounded-sm"
-            >
-              <path
-                :d="histogramPath"
-                :class="histogramColorClass"
-                fill="currentColor"
-                fill-opacity="0.5"
-                stroke="none"
-              />
-            </svg>
-          </div>
-
-          <div
-            v-if="viewer.stats.value"
-            class="space-y-1 p-2 text-xs tabular-nums"
-          >
-            <div v-if="viewer.dimensions.value" class="flex justify-between">
-              <span>{{ $t('hdrViewer.resolution') }}</span>
-              <span>{{ viewer.dimensions.value }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.min') }}</span>
-              <span>{{ formatNum(viewer.stats.value.min) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.max') }}</span>
-              <span>{{ formatNum(viewer.stats.value.max) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.mean') }}</span>
-              <span>{{ formatNum(viewer.stats.value.mean) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span>{{ $t('hdrViewer.stdDev') }}</span>
-              <span>{{ formatNum(viewer.stats.value.stdDev) }}</span>
-            </div>
-            <div
-              v-if="viewer.stats.value.nanCount"
-              class="flex justify-between text-error"
-            >
-              <span>{{ $t('hdrViewer.nan') }}</span>
-              <span>{{ viewer.stats.value.nanCount }}</span>
-            </div>
-            <div
-              v-if="viewer.stats.value.infCount"
-              class="flex justify-between text-error"
-            >
-              <span>{{ $t('hdrViewer.inf') }}</span>
-              <span>{{ viewer.stats.value.infCount }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="p-4">
-        <div class="flex gap-2">
-          <Button variant="secondary" class="flex-1" @click="viewer.fitView">
-            {{ $t('hdrViewer.fitView') }}
-          </Button>
-          <Button variant="secondary" class="flex-1" @click="handleDownload">
-            {{ $t('g.downloadImage') }}
-          </Button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { downloadFile } from '@/base/common/downloadUtil'
-import Button from '@/components/ui/button/Button.vue'
-import type { ChannelMode } from '@/composables/useHdrViewer'
-import { CHANNEL_MODES, useHdrViewer } from '@/composables/useHdrViewer'
-import { GAMUT_NAMES } from '@/renderer/hdr/colorGamut'
-import { toFullResolutionUrl } from '@/utils/hdrFormatUtil'
-import { histogramToPath } from '@/utils/histogramUtil'
-
-const { imageUrl } = defineProps<{ imageUrl: string }>()
-
-const { t } = useI18n()
-const viewer = useHdrViewer()
-const gamutNames = GAMUT_NAMES
-const channelModes = CHANNEL_MODES
-const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
-
-const exposureLabel = computed(() => {
-  const value = viewer.exposureStops.value
-  return `${value > 0 ? '+' : ''}${value.toFixed(1)}`
-})
-
-const histogramPath = computed(() =>
-  viewer.histogram.value ? histogramToPath(viewer.histogram.value) : ''
-)
-
-const histogramColorClass = computed(() => {
-  switch (viewer.channel.value) {
-    case 'r':
-      return 'text-red-500'
-    case 'g':
-      return 'text-green-500'
-    case 'b':
-      return 'text-blue-500'
-    default:
-      return 'text-base-foreground'
-  }
-})
-
-const channelLabels = computed<Record<ChannelMode, string>>(() => ({
-  rgb: t('hdrViewer.channels.rgb'),
-  r: t('hdrViewer.channels.r'),
-  g: t('hdrViewer.channels.g'),
-  b: t('hdrViewer.channels.b'),
-  a: t('hdrViewer.channels.a'),
-  luminance: t('hdrViewer.channels.luminance')
-}))
-
-function formatNum(value: number): string {
-  if (!Number.isFinite(value)) return String(value)
-  return Math.abs(value) >= 1000 || (value !== 0 && Math.abs(value) < 0.001)
-    ? value.toExponential(3)
-    : value.toFixed(4)
-}
-
-function handleDownload() {
-  downloadFile(toFullResolutionUrl(imageUrl))
-}
-
-onMounted(() => {
-  if (containerRef.value) void viewer.mount(containerRef.value, imageUrl)
-})
-</script>

src/components/palette/PaletteSwatchRow.test.ts

@@ -1,70 +0,0 @@
-/* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import PaletteSwatchRow from './PaletteSwatchRow.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
-})
-
-function renderRow(modelValue: string[], max = 5) {
-  return render(PaletteSwatchRow, {
-    props: { modelValue, max },
-    global: { plugins: [i18n] }
-  })
-}
-
-const lastEmit = (emitted: () => Record<string, unknown[][]>) => {
-  const calls = emitted()['update:modelValue']
-  return calls[calls.length - 1][0]
-}
-
-describe('PaletteSwatchRow', () => {
-  it('renders one swatch per color', () => {
-    const { container } = renderRow(['#ff0000', '#00ff00'])
-    expect(container.querySelectorAll('[data-index]')).toHaveLength(2)
-  })
-
-  it('appends a color when the add button is clicked', async () => {
-    const { emitted } = renderRow(['#ff0000'])
-    await userEvent.click(screen.getByRole('button'))
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
-  })
-
-  it('removes a color on right click', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.contextMenu(container.querySelector('[data-index="0"]')!)
-    expect(lastEmit(emitted)).toEqual(['#00ff00'])
-  })
-
-  it('hides the add button once the max is reached', () => {
-    renderRow(['#a', '#b'], 2)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-
-  it('writes a picked color back through the hidden color input', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.click(container.querySelector('[data-index="1"]')!)
-    const input = container.querySelector(
-      'input[type="color"]'
-    ) as HTMLInputElement
-    input.value = '#0000ff'
-    await fireEvent.input(input)
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
-  })
-
-  it('starts a drag on pointer down without emitting', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.pointerDown(container.querySelector('[data-index="0"]')!, {
-      button: 0,
-      clientX: 5,
-      clientY: 5
-    })
-    expect(emitted()['update:modelValue']).toBeUndefined()
-  })
-})

src/components/palette/PaletteSwatchRow.vue

@@ -1,48 +0,0 @@
-<template>
-  <div ref="container" class="flex flex-wrap items-center gap-1">
-    <div
-      v-for="(hex, i) in modelValue"
-      :key="`${i}-${hex}`"
-      :data-index="i"
-      :data-hex="hex"
-      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
-      :style="{ background: hex }"
-      :title="t('palette.swatchTitle')"
-      @click="openPicker(i, $event)"
-      @contextmenu.prevent.stop="remove(i)"
-      @pointerdown="onPointerDown(i, $event)"
-    />
-    <button
-      v-if="modelValue.length < max"
-      type="button"
-      class="h-5 rounded-sm border border-component-node-border bg-component-node-widget-background px-2 text-xs leading-none"
-      :title="t('palette.addColor')"
-      @click="addColor"
-    >
-      +
-    </button>
-    <input
-      ref="picker"
-      type="color"
-      class="pointer-events-none absolute size-0 opacity-0"
-      @input="onPickerInput"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
-
-const { max = 5 } = defineProps<{ max?: number }>()
-const modelValue = defineModel<string[]>({ required: true })
-const { t } = useI18n()
-
-const container = useTemplateRef<HTMLDivElement>('container')
-const picker = useTemplateRef<HTMLInputElement>('picker')
-
-const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
-  usePaletteSwatchRow({ modelValue, container, picker })
-</script>

src/components/palette/WidgetColors.test.ts

@@ -1,54 +0,0 @@
-/* eslint-disable testing-library/no-node-access, testing-library/no-container, testing-library/prefer-user-event */
-import { fireEvent, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import WidgetColors from './WidgetColors.vue'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: { palette: { swatchTitle: 'Edit', addColor: 'Add' } } }
-})
-
-function renderWidget(modelValue: string[], widget?: { name: string }) {
-  return render(WidgetColors, {
-    props: { modelValue, widget },
-    global: { plugins: [i18n] }
-  })
-}
-
-const cleanups: Array<() => void> = []
-afterEach(() => {
-  while (cleanups.length) cleanups.pop()?.()
-})
-
-describe('WidgetColors', () => {
-  it('renders the palette swatch row for each color', () => {
-    renderWidget(['#ff0000', '#00ff00'])
-    const root = screen.getByTestId('colors')
-    expect(root.querySelectorAll('[data-index]')).toHaveLength(2)
-  })
-
-  it('shows the widget name as an inline label', () => {
-    renderWidget(['#ff0000'], { name: 'color_palette' })
-    expect(screen.getByText('color_palette')).toBeInTheDocument()
-  })
-
-  it('emits an updated palette when a color is added', async () => {
-    const { emitted } = renderWidget([])
-    await userEvent.click(screen.getByRole('button'))
-    const calls = emitted()['update:modelValue'] as unknown[][]
-    expect(calls[calls.length - 1][0]).toEqual(['#ffffff'])
-  })
-
-  it('does not stop swatch pointer moves from reaching document drag handlers', async () => {
-    const { container } = renderWidget(['#ff0000'])
-    const onDocMove = vi.fn()
-    document.addEventListener('pointermove', onDocMove)
-    cleanups.push(() => document.removeEventListener('pointermove', onDocMove))
-    await fireEvent.pointerMove(container.querySelector('[data-index="0"]')!)
-    expect(onDocMove).toHaveBeenCalled()
-  })
-})

src/components/palette/WidgetColors.vue

@@ -1,29 +0,0 @@
-<template>
-  <div
-    class="flex size-full items-center gap-2"
-    data-testid="colors"
-    @pointerdown.stop
-  >
-    <span
-      v-if="widget?.name"
-      class="shrink-0 truncate text-node-component-slot-text"
-    >
-      {{ widget.label || widget.name }}
-    </span>
-    <PaletteSwatchRow v-model="modelValue" :max="MAX_COLORS" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import PaletteSwatchRow from './PaletteSwatchRow.vue'
-
-const MAX_COLORS = 16
-
-const { widget } = defineProps<{
-  widget?: Pick<SimplifiedWidget<string[]>, 'name' | 'label'>
-}>()
-
-const modelValue = defineModel<string[]>({ default: () => [] })
-</script>

src/components/queue/QueueProgressOverlay.vue

@@ -66,6 +66,7 @@ import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
+import { isCloud } from '@/platform/distribution/types'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
@@ -194,15 +195,20 @@ const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   const jobId = item.taskRef?.jobId
   if (!jobId) return
 
-  if (
-    item.state === 'running' ||
-    item.state === 'initialization' ||
-    item.state === 'pending'
-  ) {
-    // State-agnostic cancel (see api.ts cancelJob for the runtime-parity caveat).
-    await api.cancelJob(jobId)
+  if (item.state === 'running' || item.state === 'initialization') {
+    // Running/initializing jobs: interrupt execution
+    // Cloud backend uses deleteItem, local uses interrupt
+    if (isCloud) {
+      await api.deleteItem('queue', jobId)
+    } else {
+      await api.interrupt(jobId)
+    }
     executionStore.clearInitializationByJobId(jobId)
     await queueStore.update()
+  } else if (item.state === 'pending') {
+    // Pending jobs: remove from queue
+    await api.deleteItem('queue', jobId)
+    await queueStore.update()
   }
 })
 
@@ -286,8 +292,17 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
 
   if (!jobIds.length) return
 
-  // State-agnostic batch cancel (see api.ts cancelJobs for the runtime-parity caveat).
-  await api.cancelJobs(jobIds)
+  // Cloud backend supports cancelling specific jobs via /queue delete,
+  // while /interrupt always targets the "first" job. Use the targeted API
+  // on cloud to ensure we cancel the workflow the user clicked.
+  if (isCloud) {
+    await Promise.all(jobIds.map((id) => api.deleteItem('queue', id)))
+    executionStore.clearInitializationByJobIds(jobIds)
+    await queueStore.update()
+    return
+  }
+
+  await Promise.all(jobIds.map((id) => api.interrupt(id)))
   executionStore.clearInitializationByJobIds(jobIds)
   await queueStore.update()
 })

src/components/range/WidgetRange.test.ts

@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/vue'
-import { createNodeLocatorId } from '@/types/nodeIdentification'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, ref } from 'vue'
@@ -166,9 +165,7 @@ describe('WidgetRange', () => {
       outputsHolder.nodeOutputs = {
         loc1: { histogram_range_w: [1, 2, 3, 4] }
       }
-      renderWidget(
-        makeWidget({}, { nodeLocatorId: createNodeLocatorId(null, 'loc1') })
-      )
+      renderWidget(makeWidget({}, { nodeLocatorId: 'loc1' }))
       expect(screen.getByTestId('range-editor').dataset.hasHistogram).toBe(
         'true'
       )
@@ -178,9 +175,7 @@ describe('WidgetRange', () => {
       outputsHolder.nodeOutputs = {
         loc1: { histogram_range_w: [] }
       }
-      renderWidget(
-        makeWidget({}, { nodeLocatorId: createNodeLocatorId(null, 'loc1') })
-      )
+      renderWidget(makeWidget({}, { nodeLocatorId: 'loc1' }))
       expect(screen.getByTestId('range-editor').dataset.hasHistogram).toBe(
         'false'
       )

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

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 
 const meta: Meta<typeof ErrorNodeCard> = {
   title: 'RightSidePanel/Errors/ErrorNodeCard',
@@ -24,7 +23,7 @@ type Story = StoryObj<typeof meta>
 const singleErrorCard: ErrorCardData = {
   id: 'node-10',
   title: 'CLIPTextEncode',
-  nodeId: createNodeExecutionId([10]),
+  nodeId: '10',
   nodeTitle: 'CLIP Text Encode (Prompt)',
   isSubgraphNode: false,
   errors: [
@@ -38,7 +37,7 @@ const singleErrorCard: ErrorCardData = {
 const multipleErrorsCard: ErrorCardData = {
   id: 'node-24',
   title: 'VAEDecode',
-  nodeId: createNodeExecutionId([24]),
+  nodeId: '24',
   nodeTitle: 'VAE Decode',
   isSubgraphNode: false,
   errors: [
@@ -56,7 +55,7 @@ const multipleErrorsCard: ErrorCardData = {
 const runtimeErrorCard: ErrorCardData = {
   id: 'exec-45',
   title: 'KSampler',
-  nodeId: createNodeExecutionId([45]),
+  nodeId: '45',
   nodeTitle: 'KSampler',
   isSubgraphNode: false,
   errors: [
@@ -76,7 +75,7 @@ const runtimeErrorCard: ErrorCardData = {
 const subgraphErrorCard: ErrorCardData = {
   id: 'node-3:15',
   title: 'KSampler',
-  nodeId: createNodeExecutionId([3, 15]),
+  nodeId: '3:15',
   nodeTitle: 'Nested KSampler',
   isSubgraphNode: true,
   errors: [

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

@@ -6,7 +6,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 
 const mockGetLogs = vi.fn(() => Promise.resolve('mock server logs'))
 const mockSerialize = vi.fn(() => ({ nodes: [] }))
@@ -157,7 +156,7 @@ describe('ErrorNodeCard.vue', () => {
     return {
       id: `exec-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {
@@ -250,7 +249,7 @@ describe('ErrorNodeCard.vue', () => {
     renderCard({
       id: `node-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {
@@ -388,7 +387,7 @@ describe('ErrorNodeCard.vue', () => {
     const card: ErrorCardData = {
       id: `exec-${++cardIdCounter}`,
       title: 'KSampler',
-      nodeId: createNodeExecutionId([10]),
+      nodeId: '10',
       nodeTitle: 'KSampler',
       errors: [
         {

src/components/rightSidePanel/errors/types.ts

@@ -1,5 +1,4 @@
 import type { ResolvedErrorMessage } from '@/platform/errorCatalog/types'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
 
 export interface ErrorItem extends ResolvedErrorMessage {
   /** Raw source/API-compatible message. */
@@ -13,7 +12,7 @@ export interface ErrorItem extends ResolvedErrorMessage {
 export interface ErrorCardData {
   id: string
   title: string
-  nodeId?: NodeExecutionId
+  nodeId?: string
   nodeTitle?: string
   graphNodeId?: string
   isSubgraphNode?: boolean

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

@@ -671,30 +671,6 @@ describe('useErrorGroups', () => {
       expect(nodeIds).toEqual(['1', '2', '10'])
     })
 
-    it('marks only nested execution paths as subgraph node cards', async () => {
-      const { store, groups } = createErrorGroups()
-      store.lastNodeErrors = {
-        '1': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [{ type: 'err', message: 'Error', details: '' }]
-        },
-        '1:20': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [{ type: 'err', message: 'Error', details: '' }]
-        }
-      }
-      await nextTick()
-
-      const execGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'execution'
-      )
-      expect(execGroup?.cards).toMatchObject([
-        { nodeId: '1', isSubgraphNode: false },
-        { nodeId: '1:20', isSubgraphNode: true }
-      ])
-    })
     it('sorts cards with subpath nodeIds before higher root IDs', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -39,8 +39,8 @@ import {
   resolveRunErrorMessage
 } from '@/platform/errorCatalog/errorMessageResolver'
 import {
-  compareExecutionId,
-  tryNormalizeNodeExecutionId
+  isNodeExecutionId,
+  compareExecutionId
 } from '@/types/nodeIdentification'
 
 const PROMPT_CARD_ID = '__prompt__'
@@ -82,7 +82,7 @@ interface ErrorSearchItem {
 type CataloguedErrorItem = ErrorItem & ResolvedCatalogErrorMessage
 
 /** Resolve display info for a node by its execution ID. */
-function resolveNodeInfo(nodeId: NodeExecutionId) {
+function resolveNodeInfo(nodeId: string) {
   const graphNode = getNodeByExecutionId(app.rootGraph, nodeId)
 
   return {
@@ -119,7 +119,7 @@ function getOrCreateGroup(
 }
 
 function createErrorCard(
-  nodeId: NodeExecutionId,
+  nodeId: string,
   classType: string,
   idPrefix: string
 ): ErrorCardData {
@@ -130,7 +130,7 @@ function createErrorCard(
     nodeId,
     nodeTitle: nodeInfo.title,
     graphNodeId: nodeInfo.graphNodeId,
-    isSubgraphNode: nodeId.includes(':'),
+    isSubgraphNode: isNodeExecutionId(nodeId),
     errors: []
   }
 }
@@ -288,7 +288,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return map
   })
 
-  function isErrorInSelection(executionNodeId: NodeExecutionId): boolean {
+  function isErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
 
@@ -305,7 +305,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
 
   function addNodeErrorToGroup(
     groupsMap: Map<string, GroupEntry>,
-    nodeId: NodeExecutionId,
+    nodeId: string,
     classType: string,
     idPrefix: string,
     error: CataloguedErrorItem,
@@ -371,11 +371,9 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
   ) {
     if (!executionErrorStore.lastNodeErrors) return
 
-    for (const [rawNodeId, nodeError] of Object.entries(
+    for (const [nodeId, nodeError] of Object.entries(
       executionErrorStore.lastNodeErrors
     )) {
-      const nodeId = tryNormalizeNodeExecutionId(rawNodeId)
-      if (!nodeId) continue
       const nodeDisplayName =
         resolveNodeInfo(nodeId).title || nodeError.class_type
       for (const e of nodeError.errors) {
@@ -406,12 +404,9 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     if (!executionErrorStore.lastExecutionError) return
 
     const e = executionErrorStore.lastExecutionError
-    const nodeId = tryNormalizeNodeExecutionId(e.node_id)
-    if (!nodeId) return
-
     addNodeErrorToGroup(
       groupsMap,
-      nodeId,
+      String(e.node_id),
       e.node_type,
       'exec',
       {
@@ -422,7 +417,8 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
         ...resolveRunErrorMessage({
           kind: 'execution',
           error: e,
-          nodeDisplayName: resolveNodeInfo(nodeId).title || e.node_type
+          nodeDisplayName:
+            resolveNodeInfo(String(e.node_id)).title || e.node_type
         })
       },
       filterBySelection
@@ -673,7 +669,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     ]
   }
 
-  function isAssetErrorInSelection(executionNodeId: NodeExecutionId): boolean {
+  function isAssetErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
 
@@ -695,17 +691,12 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return false
   }
 
-  function isAssetCandidateInSelection(nodeId: string | number): boolean {
-    const executionNodeId = tryNormalizeNodeExecutionId(nodeId)
-    return executionNodeId ? isAssetErrorInSelection(executionNodeId) : false
-  }
-
   const filteredMissingModelGroups = computed(() => {
     if (!selectedNodeInfo.value.nodeIds) return missingModelGroups.value
     const candidates = missingModelStore.missingModelCandidates
     if (!candidates?.length) return []
     const filtered = candidates.filter(
-      (c) => c.nodeId != null && isAssetCandidateInSelection(c.nodeId)
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
     )
     if (!filtered.length) return []
     return groupMissingModelCandidates(filtered, isCloud)
@@ -716,7 +707,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     const candidates = missingMediaStore.missingMediaCandidates
     if (!candidates?.length) return []
     const filtered = candidates.filter(
-      (c) => c.nodeId != null && isAssetCandidateInSelection(c.nodeId)
+      (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
     )
     if (!filtered.length) return []
     return groupCandidatesByMediaType(filtered)

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

@@ -4,7 +4,6 @@ import { nextTick, ref } from 'vue'
 import type { useSystemStatsStore } from '@/stores/systemStatsStore'
 
 import type { ErrorCardData } from './types'
-import { createNodeExecutionId } from '@/types/nodeIdentification'
 import { useErrorReport } from './useErrorReport'
 
 async function flushPromises() {
@@ -104,7 +103,7 @@ function makeCard(overrides: Partial<ErrorCardData> = {}): ErrorCardData {
   return {
     id: 'card-1',
     title: 'KSampler',
-    nodeId: createNodeExecutionId([42]),
+    nodeId: '42',
     errors: [],
     ...overrides
   }
@@ -182,7 +181,7 @@ describe('useErrorReport', () => {
       exceptionType: 'RuntimeError',
       exceptionMessage: 'CUDA oom',
       traceback: 'trace-0',
-      nodeId: createNodeExecutionId([42]),
+      nodeId: '42',
       nodeType: 'KSampler',
       systemStats: sampleSystemStats,
       serverLogs: 'server logs',

src/components/sidebar/SidebarIcon.test.ts

@@ -3,12 +3,17 @@ import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { describe, expect, it } from 'vitest'
-import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import SidebarIcon from './SidebarIcon.vue'
 
-type SidebarIconProps = ComponentProps<typeof SidebarIcon>
+type SidebarIconProps = {
+  icon: string
+  selected: boolean
+  tooltip?: string
+  class?: string
+  iconBadge?: string | (() => string | null)
+}
 
 const i18n = createI18n({
   legacy: false,
@@ -79,20 +84,4 @@ describe('SidebarIcon', () => {
       tooltipText
     )
   })
-
-  it('falls back to label for tooltip when no tooltip is provided', async () => {
-    const labelText = 'WASNodeSuitePreprocessors'
-    const { user } = renderSidebarIcon({ label: labelText })
-
-    expect(screen.getByRole('button')).toHaveAttribute('aria-label', labelText)
-
-    await user.hover(screen.getByRole('button'))
-
-    await waitFor(
-      () => {
-        expect(screen.getByRole('tooltip')).toHaveTextContent(labelText)
-      },
-      { timeout: 1000 }
-    )
-  })
 })

src/components/sidebar/SidebarIcon.vue

@@ -40,11 +40,9 @@
           </span>
         </div>
       </slot>
-      <!-- w-max sizes the label to the rail instead of the padding-inset
-           button content box, which is too narrow for one-line labels -->
       <span
         v-if="label && !isSmall"
-        class="side-bar-button-label line-clamp-2 w-max max-w-[calc(var(--sidebar-width)-var(--sidebar-padding))] text-center text-2xs wrap-break-word whitespace-normal"
+        class="side-bar-button-label text-center text-2xs"
         >{{ st(label, label) }}</span
       >
     </div>
@@ -85,14 +83,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? (iconBadge() ?? '') : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
-/**
- * Falls back to the label when no tooltip is provided, so labels clamped
- * to two lines can always be recovered in full on hover.
- */
-const computedTooltip = computed(() => {
-  const text = tooltip || label
-  return st(text, text) + tooltipSuffix
-})
+const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
 </script>
 
 <style>