refactor(load3d): split menu bar into per-responsibility group components

Replace the floating viewer controls with a framed chrome: a black top bar
holding a category dropdown (Scene/3D Model/Camera/Lighting) plus the active
category's actions (labels collapse to icons on narrow nodes), and a black
bottom bar with Record and fit/export. Move export out of the menu into a
bottom-right button.

Add a 'Clay' material mode that renders meshes with a flat grey material so
geometry is visible without textures.

Proof-of-concept for design exploration; not intended to merge as-is.

.agents/checks/adr-compliance.md

@@ -33,15 +33,15 @@ Flag:
 - **New circular entity dependencies** — New circular imports between `LGraph` ↔ `Subgraph`, `LGraphNode` ↔ `LGraphCanvas`, or similar entity classes.
 - **Direct `graph._version++`** — Mutating the private version counter directly instead of through a public API. Extensions already depend on this side-channel; it must become a proper API.
 
-### Centralized Registries and ECS-Style Access
+### Dedicated Stores and Data/Behavior Separation
 
-All entity data access should move toward centralized query patterns, not instance property access.
+Entity data lives in dedicated Pinia stores keyed by string IDs (`widgetValueStore`, `domWidgetStore`, `layoutStore`, `nodeOutputStore`, `subgraphNavigationStore`, `previewExposureStore`), not on entity instances.
 
 Flag:
 
-- **New instance method/property patterns** — Adding `node.someProperty` or `node.someMethod()` for data that should be a component in the World, queried via `world.getComponent(entityId, ComponentType)`.
+- **New instance method/property patterns** — Adding `node.someProperty` or `node.someMethod()` for data that belongs in a dedicated store (e.g. widget values → `widgetValueStore` keyed by `WidgetId`).
 - **OOP inheritance for entity modeling** — Extending entity classes with new subclasses instead of composing behavior through components and systems.
-- **Scattered state** — New entity state stored in multiple locations (class properties, stores, local variables) instead of being consolidated in the World or in a single store.
+- **Duplicated authority** — Storing the same entity state in both a class property and a store, or across two stores, so ownership becomes ambiguous. Each piece of state should have one owning store.
 
 ### Extension Ecosystem Impact
 

.coderabbit.yaml

@@ -2,6 +2,7 @@ issue_enrichment:
   auto_enrich:
     enabled: true
 reviews:
+  profile: assertive
   high_level_summary: false
   request_changes_workflow: true
   auto_review:

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -133,3 +133,24 @@ jobs:
             exit 1
           fi
           echo '✅ No Customer.io references found'
+
+      - name: Scan dist for Cloudflare Turnstile sitekey references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Cloudflare Turnstile sitekeys...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '0x4AAAAAADnYZPVOpFCL_zeo' \
+            -e '0x4AAAAAADnYY4_Q0qxHZ5a7' \
+            -e '1x00000000000000000000AA' \
+            dist; then
+            echo '❌ ERROR: Cloudflare Turnstile sitekey found in dist assets!'
+            echo 'The per-env Turnstile sitekeys are cloud-only and must be tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Gate sitekey selection on the __DISTRIBUTION__ build define, not the runtime isCloud const'
+            echo '2. See getTurnstileSiteKey() in src/config/turnstile.ts'
+            exit 1
+          fi
+          echo '✅ No Turnstile sitekey references found'

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

@@ -88,9 +88,9 @@ jobs:
       - name: Strip non-source entries from coverage
         if: steps.coverage-shards.outputs.has-coverage == 'true'
         run: |
-          # Drop served bundle scripts (localhost-8188/assets/*.js) that V8 records but have no source file on disk, which would abort genhtml.
           lcov --remove coverage/playwright/coverage.lcov \
             '*localhost-8188*' \
+            'assets/images/*' \
             -o coverage/playwright/coverage.lcov \
             --ignore-errors unused
           wc -l coverage/playwright/coverage.lcov
@@ -121,7 +121,8 @@ jobs:
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
             --precision 1 \
-            --ignore-errors source,unmapped
+            --ignore-errors source,unmapped,range \
+            --synthesize-missing
 
       - name: Upload HTML report artifact
         if: steps.coverage-shards.outputs.has-coverage == 'true'

.github/workflows/cla.yml

@@ -41,7 +41,7 @@ jobs:
 
           # 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]
+          allowlist: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,Glary Bot,Glary-Bot,*[bot]
 
           # Custom PR comment messages
           custom-notsigned-prcomment: |

.github/workflows/pr-backport.yaml

@@ -67,6 +67,11 @@ jobs:
         uses: actions/checkout@v6
         with:
           fetch-depth: 0
+          # Persist a token with `workflow` scope so the backport push can
+          # include changes to .github/workflows/**. The default GITHUB_TOKEN
+          # is refused by GitHub when a push creates/updates workflow files,
+          # which silently aborted the whole job (see PR #12804 backport).
+          token: ${{ secrets.PR_GH_TOKEN }}
 
       - name: Configure git
         run: |

.i18nrc.cjs

@@ -21,7 +21,8 @@ module.exports = defineConfig({
     'ar',
     'tr',
     'pt-BR',
-    'fa'
+    'fa',
+    'he'
   ],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
@@ -37,5 +38,11 @@ module.exports = defineConfig({
   - Keep commonly used technical terms in English when they are standard in Persian software (e.g., node, workflow).
   - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate.
   - Maintain consistency with terminology used in Persian software and design applications.
+
+  IMPORTANT Hebrew Translation Guidelines:
+  - For 'he' locale: Use modern, formal Hebrew (עברית תקנית) for a professional tone throughout the UI.
+  - Hebrew is a right-to-left (RTL) language. Keep all interpolation placeholders ({name}, {count}), pipe-separated plural forms, and English technical terms intact and in their original positions.
+  - Preferred glossary: node = צומת (plural צמתים), workflow = תהליך עבודה, queue = תור, canvas = קנבס, widget = פקד, subgraph = תת-גרף, prompt = פרומפט/הנחיה (per context), bypass = עקיפה, mute = השתקה.
+  - Keep widely-recognized technical terms in English (Latin script): API, GPU, CUDA, VAE, CLIP, LoRA, ControlNet, Civitai, Hugging Face, Nodes 2.0, etc.
   `
 })

.storybook/main.ts

@@ -83,6 +83,16 @@ const config: StorybookConfig = {
             replacement:
               process.cwd() + '/src/storybook/mocks/useBillingContext.ts'
           },
+          {
+            find: '@/composables/useFeatureFlags',
+            replacement:
+              process.cwd() + '/src/storybook/mocks/useFeatureFlags.ts'
+          },
+          {
+            find: '@/platform/workspace/stores/teamWorkspaceStore',
+            replacement:
+              process.cwd() + '/src/storybook/mocks/teamWorkspaceStore.ts'
+          },
           {
             find: '@/utils/formatUtil',
             replacement:

AGENTS.md

@@ -179,6 +179,9 @@ This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g
 23. Favor pure functions (especially testable ones)
 24. Do not use function expressions if it's possible to use function declarations instead
 25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+26. Do not add alias helpers whose implementation is just a single-line call to another function
+    - Bad: `function id(value) { return nodeId(value) }`
+    - Use the real function directly, or introduce a named helper only when it adds validation, branching, domain meaning, or shared behavior beyond renaming
 
 ## Design Standards
 
@@ -246,7 +249,7 @@ All architectural decisions are documented in `docs/adr/`. Code changes must be
 ### Entity Architecture Constraints (ADR 0003 + ADR 0008)
 
 1. **Command pattern for all mutations**: Every entity state change must be a serializable, idempotent, deterministic command — replayable, undoable, and transmittable over CRDT. No imperative fire-and-forget mutation APIs. Systems produce command batches, not direct side effects.
-2. **Centralized registries and ECS-style access**: Entity data lives in the World (centralized registry), queried via `world.getComponent(entityId, ComponentType)`. Do not add new instance properties/methods to entity classes. Do not use OOP inheritance for entity modeling.
+2. **Dedicated stores over instance state**: Entity data lives in dedicated Pinia stores keyed by string IDs — widget values in `widgetValueStore` keyed by `WidgetId` (`graphId:nodeId:name`, see `src/types/widgetId.ts`), plus `domWidgetStore`, `layoutStore`, `nodeOutputStore`, `subgraphNavigationStore`, and `previewExposureStore`. Prefer a focused store to a single unified registry. Do not add new instance properties/methods to entity classes for data that belongs in a store. Do not use OOP inheritance for entity modeling.
 3. **No god-object growth**: Do not add methods to `LGraphNode`, `LGraphCanvas`, `LGraph`, or `Subgraph`. Extract to systems, stores, or composables.
 4. **Plain data components**: ECS components are plain data objects — no methods, no back-references to parent entities. Behavior belongs in systems (pure functions).
 5. **Extension ecosystem impact**: Changes to entity callbacks (`onConnectionsChange`, `onRemoved`, `onAdded`, `onConnectInput/Output`, `onConfigure`, `onWidgetChanged`), `node.widgets` access, `node.serialize`, or `graph._version++` affect 40+ custom node repos and require migration guidance.

apps/website/e2e/download.spec.ts

@@ -47,6 +47,11 @@ 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()
@@ -73,7 +78,7 @@ test.describe('Download page @smoke', () => {
     })
 
     const windowsBtn = hero.locator(
-      'a[href="https://download.comfy.org/windows/nsis/x64"]'
+      'a[href="https://comfy.org/download/windows/nsis/x64"]'
     )
     await expect(windowsBtn).toBeVisible()
     await expect(windowsBtn).toHaveText(/DOWNLOAD DESKTOP/i)

apps/website/e2e/launches.spec.ts

@@ -0,0 +1,231 @@
+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 = '/launches'
+const PATH_ZH = '/zh-CN/launches'
+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('launches.hero.title', locale)
+    })
+  })
+}
+
+function ctaSection(page: Page, locale: Locale) {
+  return page.locator('section').filter({
+    has: page.getByRole('heading', {
+      level: 2,
+      name: t('launches.cta.heading', locale)
+    })
+  })
+}
+
+function dropsSection(page: Page, locale: Locale) {
+  return page.locator('section').filter({
+    has: page.getByRole('heading', {
+      level: 2,
+      name: t('launches.section.title', locale)
+    })
+  })
+}
+
+test.describe('Launches landing — desktop @smoke', () => {
+  test('renders the configured title at /launches', async ({ page }) => {
+    await page.goto(PATH_EN)
+    await expect(page).toHaveTitle(t('launches.page.title', 'en'))
+  })
+
+  test('renders the localized title at /zh-CN/launches', async ({ page }) => {
+    await page.goto(PATH_ZH)
+    await expect(page).toHaveTitle(t('launches.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('launches.hero.title', 'en')
+      })
+    ).toBeVisible()
+
+    await page.goto(PATH_ZH)
+    await expect(
+      page.getByRole('heading', {
+        level: 1,
+        name: t('launches.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('launches.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('launches.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('launches.cta.heading', locale)
+        })
+      ).toBeVisible()
+
+      const primary = section.getByRole('link', {
+        name: t('launches.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('launches.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('launches.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)
+
+    await expect
+      .poll(async () => {
+        const firstWidth = (await cards.nth(0).boundingBox())?.width ?? 0
+        const fifthWidth = (await cards.nth(4).boundingBox())?.width ?? 0
+        return firstWidth - fifthWidth
+      })
+      .toBeGreaterThan(0)
+  })
+})
+
+test.describe('Launches 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()
+
+    await expect
+      .poll(async () => (await cards.nth(0).boundingBox())?.width ?? 0)
+      .toBeGreaterThanOrEqual(viewport!.width * 0.7)
+
+    await expect
+      .poll(async () => {
+        const firstBox = await cards.nth(0).boundingBox()
+        const secondBox = await cards.nth(1).boundingBox()
+        if (!firstBox || !secondBox) return false
+        return secondBox.y >= firstBox.y + firstBox.height
+      })
+      .toBe(true)
+  })
+
+  test('closing CTA heading stays within viewport width', async ({ page }) => {
+    await page.goto(PATH_EN)
+    const heading = page.getByRole('heading', {
+      level: 2,
+      name: t('launches.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/public/icons/node-link.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="var(--fill-0, #F2FF59)"/>
 </svg>

apps/website/public/robots.txt

@@ -29,6 +29,5 @@ Allow: /
 Disallow: /_astro/
 Disallow: /_website/
 Disallow: /_vercel/
-Disallow: /payment/
 
 Sitemap: https://comfy.org/sitemap-index.xml

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

@@ -26,7 +26,7 @@ function toggle(index: number) {
 </script>
 
 <template>
-  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
     <div class="flex flex-col gap-6 md:flex-row md:gap-16">
       <!-- Left heading -->
       <div

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Component } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import CopyableField from '@/components/ui/copyable-field/CopyableField.vue'
+
+import SectionHeader from '../common/SectionHeader.vue'
+
+type CardAction =
+  | {
+      type: 'link'
+      label: string
+      href: string
+      target?: '_blank'
+      icon?: Component
+      variant?: 'default' | 'outline'
+    }
+  | { type: 'code'; value: string }
+
+export interface FeatureCard {
+  id: string
+  label?: string
+  title: string
+  description: string
+  action?: CardAction
+}
+
+type ColumnCount = 2 | 3 | 4
+
+const {
+  cards,
+  columns = 3,
+  copiedLabel,
+  copyLabel,
+  eyebrow,
+  heading,
+  subtitle
+} = defineProps<{
+  cards: readonly FeatureCard[]
+  columns?: ColumnCount
+  copiedLabel?: string
+  copyLabel?: string
+  eyebrow?: string
+  heading: string
+  subtitle?: string
+}>()
+
+const columnClass: Record<ColumnCount, string> = {
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4'
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader :label="eyebrow" align="start">
+      {{ heading }}
+      <template v-if="subtitle" #subtitle>
+        <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">
+          {{ subtitle }}
+        </p>
+      </template>
+    </SectionHeader>
+
+    <div :class="cn('mt-16 grid grid-cols-1 gap-6', columnClass[columns])">
+      <div
+        v-for="card in cards"
+        :key="card.id"
+        class="bg-transparency-white-t4 flex flex-col rounded-3xl p-6 lg:p-8"
+      >
+        <p
+          v-if="card.label"
+          class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+        >
+          {{ card.label }}
+        </p>
+        <h3
+          :class="
+            cn(
+              'text-xl font-light text-primary-comfy-canvas lg:text-2xl',
+              card.label && 'mt-3'
+            )
+          "
+        >
+          {{ card.title }}
+        </h3>
+        <p class="mt-3 text-sm text-smoke-700">
+          {{ card.description }}
+        </p>
+
+        <div v-if="card.action" class="mt-6">
+          <Button
+            v-if="card.action.type === 'link'"
+            as="a"
+            :href="card.action.href"
+            :target="card.action.target"
+            :rel="
+              card.action.target === '_blank'
+                ? 'noopener noreferrer'
+                : undefined
+            "
+            :variant="card.action.variant ?? 'outline'"
+            :append-icon="card.action.icon"
+          >
+            {{ card.action.label }}
+          </Button>
+          <CopyableField
+            v-else
+            :value="card.action.value"
+            :copy-label="copyLabel"
+            :copied-label="copiedLabel"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import SectionHeader from '../common/SectionHeader.vue'
+import NodeUnionIcon from '../icons/NodeUnionIcon.vue'
+
+type Cta = { label: string; href: string; target?: '_blank' }
+
+export interface FeatureStep {
+  id: string
+  number: string
+  title: string
+  description: string
+}
+
+defineProps<{
+  heading: string
+  steps: readonly FeatureStep[]
+  primaryCta?: Cta
+  secondaryCta?: Cta
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader>{{ heading }}</SectionHeader>
+
+    <!-- Step cards in a row, joined by node-union connectors on desktop -->
+    <div
+      class="mt-12 flex flex-col gap-4 lg:flex-row lg:items-stretch lg:gap-0"
+    >
+      <template v-for="(step, i) in steps" :key="step.id">
+        <div
+          v-if="i > 0"
+          class="relative z-10 -mx-px hidden shrink-0 items-center justify-center self-stretch lg:flex"
+          aria-hidden="true"
+        >
+          <NodeUnionIcon
+            class="text-primary-comfy-yellow size-4 scale-x-150 rotate-90"
+          />
+        </div>
+
+        <div
+          class="border-primary-comfy-yellow flex flex-1 flex-col rounded-[40px] border-2 bg-primary-comfy-ink p-2"
+        >
+          <div class="flex flex-1 flex-col gap-4 p-8">
+            <div>
+              <p
+                class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+              >
+                {{ step.number }}
+              </p>
+              <h3
+                class="mt-1 text-2xl font-medium tracking-widest text-primary-comfy-canvas uppercase"
+              >
+                {{ step.title }}
+              </h3>
+            </div>
+            <p class="text-primary-comfy-canvas">
+              {{ step.description }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="primaryCta || secondaryCta"
+      class="mt-12 flex flex-col items-center gap-4 lg:flex-row lg:justify-center"
+    >
+      <Button
+        v-if="primaryCta"
+        as="a"
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        :rel="
+          primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined
+        "
+        size="lg"
+        class="w-full lg:w-auto lg:min-w-48"
+      >
+        {{ primaryCta.label }}
+      </Button>
+      <Button
+        v-if="secondaryCta"
+        as="a"
+        :href="secondaryCta.href"
+        :target="secondaryCta.target"
+        :rel="
+          secondaryCta.target === '_blank' ? 'noopener noreferrer' : undefined
+        "
+        variant="outline"
+        size="lg"
+        class="w-full lg:w-auto lg:min-w-48"
+      >
+        {{ secondaryCta.label }}
+      </Button>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Locale } from '../../i18n/translations'
+import GlassCard from '../common/GlassCard.vue'
+import SectionHeader from '../common/SectionHeader.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+import type { VideoTrack } from '../common/VideoPlayer.vue'
+
+type RowMedia =
+  | { type: 'image'; src: string; alt?: string }
+  | {
+      type: 'video'
+      src: string
+      // <video> has no native alt; used as the player's accessible label.
+      alt?: string
+      poster?: string
+      tracks?: readonly VideoTrack[]
+      autoplay?: boolean
+      loop?: boolean
+      minimal?: boolean
+      hideControls?: boolean
+    }
+
+export interface FeatureRow {
+  id: string
+  title: string
+  description: string
+  media: RowMedia
+}
+
+const {
+  heading,
+  eyebrow,
+  locale = 'en',
+  rows
+} = defineProps<{
+  heading: string
+  eyebrow?: string
+  locale?: Locale
+  rows: readonly FeatureRow[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader :label="eyebrow" max-width="xl">
+      {{ heading }}
+    </SectionHeader>
+
+    <div class="mt-16 flex flex-col gap-4 lg:gap-6">
+      <GlassCard
+        v-for="(row, i) in rows"
+        :key="row.id"
+        class="flex flex-col gap-8 lg:flex-row lg:items-stretch lg:gap-0"
+      >
+        <!-- Text -->
+        <div
+          :class="
+            cn(
+              'order-2 flex flex-col justify-center gap-4 p-6 lg:w-1/2 lg:p-12',
+              i % 2 === 0 ? 'lg:order-1' : 'lg:order-2'
+            )
+          "
+        >
+          <h3 class="text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
+            {{ row.title }}
+          </h3>
+          <p class="text-sm text-smoke-700 lg:text-base">
+            {{ row.description }}
+          </p>
+        </div>
+
+        <!-- Media: image or video -->
+        <div
+          :class="
+            cn(
+              'order-1 flex lg:w-1/2',
+              i % 2 === 0 ? 'lg:order-2' : 'lg:order-1'
+            )
+          "
+        >
+          <img
+            v-if="row.media.type === 'image'"
+            :src="row.media.src"
+            :alt="row.media.alt ?? row.title"
+            loading="lazy"
+            decoding="async"
+            class="aspect-4/3 w-full rounded-4xl object-cover"
+          />
+          <VideoPlayer
+            v-else
+            :locale="locale"
+            :aria-label="row.media.alt ?? row.title"
+            :src="row.media.src"
+            :poster="row.media.poster"
+            :tracks="row.media.tracks"
+            :autoplay="row.media.autoplay"
+            :loop="row.media.loop"
+            :minimal="row.media.minimal"
+            :hide-controls="row.media.hideControls"
+            class="w-full"
+          />
+        </div>
+      </GlassCard>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,166 @@
+<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>
+    <slot v-else name="visual">
+      <img
+        v-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"
+      />
+    </slot>
+
+    <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/blocks/HeroSplit01.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
+import type { HTMLAttributes } from 'vue'
+
 import type { Locale } from '../../i18n/translations'
 import BrandButton from '../common/BrandButton.vue'
 import ProductHeroBadge from '../common/ProductHeroBadge.vue'
@@ -27,6 +29,7 @@ const {
   badgeLogoAlt,
   title,
   titleHighlight,
+  subtitle,
   features = [],
   primaryCta,
   secondaryCta,
@@ -41,14 +44,17 @@ const {
   videoAutoplay = false,
   videoLoop = false,
   videoMinimal = false,
-  videoHideControls = false
+  videoHideControls = false,
+  class: className
 } = defineProps<{
   locale?: Locale
+  class?: HTMLAttributes['class']
   badgeText: string
   badgeLogoSrc?: string
   badgeLogoAlt?: string
   title: string
   titleHighlight?: string
+  subtitle?: string
   features?: string[]
   primaryCta: Cta
   secondaryCta?: Cta
@@ -72,7 +78,8 @@ const {
     :class="
       cn(
         'max-w-9xl relative mx-auto flex flex-col items-center gap-12 px-6 pt-20 pb-16 md:pt-28 md:pb-24 lg:items-center lg:gap-16 lg:px-16',
-        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse',
+        className
       )
     "
   >
@@ -84,7 +91,7 @@ const {
       />
 
       <h1
-        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] text-primary-comfy-canvas md:text-4xl lg:text-5xl"
+        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] whitespace-pre-line text-primary-comfy-canvas md:text-4xl lg:text-5xl"
       >
         <template v-if="titleHighlight">
           <span class="text-primary-warm-white">{{ titleHighlight }}</span>
@@ -93,6 +100,13 @@ const {
         <template v-else>{{ title }}</template>
       </h1>
 
+      <p
+        v-if="subtitle"
+        class="mt-6 max-w-xl text-base text-primary-comfy-canvas/80"
+      >
+        {{ subtitle }}
+      </p>
+
       <ul v-if="features.length" class="mt-8 space-y-3">
         <li
           v-for="feature in features"
@@ -127,27 +141,29 @@ const {
     </div>
 
     <div class="order-first w-full lg:order-last lg:flex-1">
-      <VideoPlayer
-        v-if="videoSrc"
-        :locale
-        :src="videoSrc"
-        :poster="videoPoster"
-        :tracks="videoTracks"
-        :autoplay="videoAutoplay"
-        :loop="videoLoop"
-        :minimal="videoMinimal"
-        :hide-controls="videoHideControls"
-      />
-      <img
-        v-else-if="imageSrc"
-        :src="imageSrc"
-        :alt="imageAlt"
-        :width="imageWidth"
-        :height="imageHeight"
-        fetchpriority="high"
-        decoding="async"
-        class="aspect-4/3 w-full rounded-3xl object-cover"
-      />
+      <slot name="media">
+        <VideoPlayer
+          v-if="videoSrc"
+          :locale
+          :src="videoSrc"
+          :poster="videoPoster"
+          :tracks="videoTracks"
+          :autoplay="videoAutoplay"
+          :loop="videoLoop"
+          :minimal="videoMinimal"
+          :hide-controls="videoHideControls"
+        />
+        <img
+          v-else-if="imageSrc"
+          :src="imageSrc"
+          :alt="imageAlt"
+          :width="imageWidth"
+          :height="imageHeight"
+          fetchpriority="high"
+          decoding="async"
+          class="aspect-4/3 w-full rounded-3xl object-cover"
+        />
+      </slot>
     </div>
   </section>
 </template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+export interface Reason {
+  id: string
+  title: string
+  description: string
+}
+
+const { highlightClass = 'text-white' } = defineProps<{
+  heading: string
+  headingHighlight?: string
+  highlightClass?: string
+  subtitle?: string
+  reasons: readonly Reason[]
+}>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col gap-4 px-6 py-16 lg:flex-row lg:gap-16 lg:py-24"
+  >
+    <!-- Left heading -->
+    <div
+      class="sticky top-20 z-10 w-full shrink-0 self-start bg-primary-comfy-ink py-4 lg:top-28 lg:w-115 lg:py-0"
+    >
+      <h2
+        class="text-4xl/16 font-light whitespace-pre-line text-primary-comfy-canvas lg:text-5xl/16"
+      >
+        {{ heading
+        }}<span v-if="headingHighlight" :class="highlightClass">{{
+          headingHighlight
+        }}</span>
+      </h2>
+      <p v-if="subtitle" class="mt-6 text-sm text-primary-comfy-canvas/70">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- Right reasons list -->
+    <div class="flex-1">
+      <div
+        v-for="reason in reasons"
+        :key="reason.id"
+        class="flex flex-col gap-4 border-b border-primary-comfy-canvas/20 py-10 first:pt-0 lg:gap-12 xl:flex-row"
+      >
+        <div class="shrink-0 xl:w-84">
+          <h3
+            class="text-2xl font-light whitespace-pre-line text-primary-comfy-canvas"
+          >
+            {{ reason.title }}
+          </h3>
+          <slot name="reason-extra" :reason="reason" />
+        </div>
+        <p class="flex-1 text-sm text-primary-comfy-canvas/70">
+          {{ reason.description }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -6,6 +6,7 @@ import type { HTMLAttributes } from 'vue'
 
 import type { BrandButtonVariants } from './brandButton.variants'
 import { brandButtonVariants } from './brandButton.variants'
+import { resolveRel } from '../../utils/cta'
 
 const props = defineProps<{
   href?: string
@@ -16,9 +17,8 @@ const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-const resolvedRel = computed(
-  () =>
-    props.rel ?? (props.target === '_blank' ? 'noopener noreferrer' : undefined)
+const resolvedRel = computed(() =>
+  resolveRel({ rel: props.rel, target: props.target })
 )
 </script>
 

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

@@ -7,12 +7,14 @@ const {
   label,
   headingTag = 'h2',
   maxWidth = 'lg',
-  headingSize = 'section'
+  headingSize = 'section',
+  align = 'center'
 } = defineProps<{
   label?: string
   headingTag?: 'h1' | 'h2' | 'h3'
   maxWidth?: 'md' | 'lg' | 'xl'
   headingSize?: 'section' | 'hero'
+  align?: 'center' | 'start'
 }>()
 
 const maxWidthClass = {
@@ -28,7 +30,14 @@ const headingSizeClass = {
 </script>
 
 <template>
-  <div :class="cn('mx-auto text-center', maxWidthClass[maxWidth])">
+  <div
+    :class="
+      cn(
+        maxWidthClass[maxWidth],
+        align === 'center' ? 'mx-auto text-center' : 'text-left'
+      )
+    "
+  >
     <SectionLabel v-if="label">{{ label }}</SectionLabel>
     <component
       :is="headingTag"

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

@@ -37,13 +37,15 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
       { label: t('nav.comfyLocal', locale), href: routes.download },
       { label: t('nav.comfyCloud', locale), href: routes.cloud },
       { label: t('nav.comfyApi', locale), href: routes.api },
-      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
+      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise },
+      { label: t('nav.mcpServer', locale), href: routes.mcp }
     ]
   },
   {
     title: t('footer.resources', locale),
     links: [
       { label: t('nav.learning', locale), href: routes.learning },
+      { label: t('nav.launches', locale), href: routes.launches },
       {
         label: t('footer.blog', locale),
         href: externalLinks.blog,

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

@@ -72,6 +72,7 @@ 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',
+      category: '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: {
@@ -17,6 +18,8 @@ export const buttonVariants = cva(
         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",
+        underlineLink:
+          "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('px-6', 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/components/ui/copyable-field/CopyableField.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Check, Copy } from '@lucide/vue'
+import { useClipboard } from '@vueuse/core'
+
+// Interactive: the copy button is inert until its host island is hydrated.
+// Render under a `client:*` directive (e.g. `client:visible`) when the page
+// needs it to work.
+const {
+  value,
+  copyLabel = 'Copy',
+  copiedLabel = 'Copied'
+} = defineProps<{ value: string; copyLabel?: string; copiedLabel?: string }>()
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+
+function handleCopy() {
+  void copy(value)
+}
+</script>
+
+<template>
+  <div
+    class="bg-transparency-white-t4 border-primary-warm-gray flex items-center gap-2 rounded-xl border px-4 py-3"
+  >
+    <span class="flex-1 truncate font-mono text-xs text-primary-comfy-canvas">
+      {{ value }}
+    </span>
+    <button
+      type="button"
+      :aria-label="copied ? copiedLabel : copyLabel"
+      class="text-primary-warm-gray shrink-0 cursor-pointer transition-colors hover:text-primary-comfy-canvas"
+      @click="handleCopy"
+    >
+      <component :is="copied ? Check : Copy" class="size-4" />
+    </button>
+  </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://download.comfy.org/windows/nsis/x64',
+  windows: 'https://comfy.org/download/windows/nsis/x64',
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
 

apps/website/src/composables/useHeroLogo.ts

@@ -22,6 +22,12 @@ interface HeroLogoConfig {
   cursorTiltStrength: number
   bgScale: number
   slideDuration: number
+  svgMarkup: string
+  fitAxis: 'width' | 'height'
+  targetSize: number
+  respectReducedMotion: boolean
+  baseUrl: string
+  fadeInDurationMs: number
 }
 
 const DEFAULTS: HeroLogoConfig = {
@@ -34,19 +40,25 @@ const DEFAULTS: HeroLogoConfig = {
   extrudeDepth: 200,
   cursorTiltStrength: 0.5,
   bgScale: 0.8,
-  slideDuration: 0.4
+  slideDuration: 0.4,
+  svgMarkup: SVG_MARKUP,
+  fitAxis: 'height',
+  targetSize: 3,
+  respectReducedMotion: true,
+  baseUrl: BASE_URL,
+  fadeInDurationMs: 0
 }
 
-function buildImageUrls(): string[] {
+function buildImageUrls(baseUrl: string): string[] {
   return Array.from({ length: IMAGE_COUNT }, (_, i) => {
     const index = String(i).padStart(5, '0')
-    return `${BASE_URL}/image_sequence_${index}.webp`
+    return `${baseUrl}/image_sequence_${index}.webp`
   })
 }
 
-function parseShapes(): THREE.Shape[] {
+function parseShapes(markup: string): THREE.Shape[] {
   const loader = new SVGLoader()
-  const svgData = loader.parse(SVG_MARKUP)
+  const svgData = loader.parse(markup)
   const shapes: THREE.Shape[] = []
   svgData.paths.forEach((path) => {
     shapes.push(...SVGLoader.createShapes(path))
@@ -85,7 +97,8 @@ export function useHeroLogo(
   onMounted(async () => {
     try {
       const container = containerRef.value
-      if (!container || prefersReducedMotion()) return
+      if (!container || (cfg.respectReducedMotion && prefersReducedMotion()))
+        return
 
       const { width, height } = container.getBoundingClientRect()
 
@@ -102,6 +115,9 @@ export function useHeroLogo(
       renderer.domElement.style.width = '100%'
       renderer.domElement.style.height = '100%'
       renderer.domElement.style.opacity = '0'
+      if (cfg.fadeInDurationMs > 0) {
+        renderer.domElement.style.transition = `opacity ${cfg.fadeInDurationMs}ms ease`
+      }
       renderer.domElement.setAttribute('aria-hidden', 'true')
       container.appendChild(renderer.domElement)
 
@@ -126,24 +142,36 @@ export function useHeroLogo(
       camera.position.z = cfg.zoom
 
       // SVG shape
-      const shapes = parseShapes()
+      const shapes = parseShapes(cfg.svgMarkup)
       const tempGeo = new THREE.ShapeGeometry(shapes)
       tempGeo.computeBoundingBox()
-      const bb = tempGeo.boundingBox!
+      const bb = tempGeo.boundingBox
+      if (!bb) {
+        tempGeo.dispose()
+        cleanup?.()
+        return
+      }
       const cx = (bb.max.x + bb.min.x) / 2
       const cy = (bb.max.y + bb.min.y) / 2
-      const scaleFactor = 3 / (bb.max.y - bb.min.y)
+      const fitExtent =
+        cfg.fitAxis === 'width' ? bb.max.x - bb.min.x : bb.max.y - bb.min.y
+      if (fitExtent <= 0) {
+        tempGeo.dispose()
+        cleanup?.()
+        return
+      }
+      const scaleFactor = cfg.targetSize / fitExtent
       tempGeo.dispose()
 
       // Image sequence textures — load first frame eagerly, rest lazily
-      const urls = buildImageUrls()
+      const urls = buildImageUrls(cfg.baseUrl)
       const textures = await loadTextures(urls.slice(0, 1))
       if (disposed) return
 
       renderer.domElement.style.opacity = '1'
       loaded.value = true
 
-      loadTextures(urls.slice(1)).then((rest) => {
+      void loadTextures(urls.slice(1)).then((rest) => {
         if (!disposed) textures.push(...rest)
       })
 

apps/website/src/config/routes.ts

@@ -8,6 +8,7 @@ const baseRoutes = {
   cloudEnterprise: '/cloud/enterprise',
   api: '/api',
   gallery: '/gallery',
+  launches: '/launches',
   about: '/about',
   careers: '/careers',
   customers: '/customers',
@@ -18,7 +19,8 @@ const baseRoutes = {
   affiliates: '/affiliates',
   affiliateTerms: '/affiliates/terms',
   contact: '/contact',
-  models: '/p/supported-models'
+  models: '/p/supported-models',
+  mcp: '/mcp'
 } as const
 
 type Routes = typeof baseRoutes
@@ -59,10 +61,13 @@ export const externalLinks = {
   discord: 'https://discord.com/invite/comfyorg',
   docs: 'https://docs.comfy.org/',
   docsApi: 'https://docs.comfy.org/api-reference/cloud',
+  docsMcp: 'https://docs.comfy.org/agent-tools/cloud',
   docsSubscription: 'https://docs.comfy.org/support/subscription/subscribing',
   github: 'https://github.com/Comfy-Org/ComfyUI',
   githubInstall: 'https://github.com/Comfy-Org/ComfyUI#installing',
   instagram: 'https://www.instagram.com/comfyui/',
+  mcpServer: 'https://cloud.comfy.org/mcp',
+  mcpSkills: 'https://github.com/Comfy-Org/comfy-skills',
   platform: 'https://platform.comfy.org',
   platformUsage: 'https://platform.comfy.org/profile/usage',
   reddit: 'https://www.reddit.com/r/comfyui/',

apps/website/src/data/drops.ts

@@ -0,0 +1,248 @@
+// 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' },
+    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/data/learningTutorials.ts

@@ -38,7 +38,7 @@ export const learningTutorials: readonly LearningTutorial[] = [
         label: 'English'
       }
     ],
-    // href: '#',
+    href: 'https://comfy.org/workflows/8f2cf0df5da6-8f2cf0df5da6/',
     tags: [partnerNodesTag, imageToVideoTag]
   },
   {

apps/website/src/data/mainNavigation.ts

@@ -69,10 +69,19 @@ export function getMainNavigation(locale: Locale): NavItem[] {
         {
           header: t('nav.colFeatures', locale),
           items: [
+            {
+              label: t('nav.mcpServer', locale),
+              href: routes.mcp,
+              badge: 'new'
+            },
             // TODO: no page yet — re-enable when landing pages ship
-            // { label: t('nav.mcpServer', locale), href: '#', badge: 'new' },
             // { label: t('nav.appMode', locale), href: '#' },
             // { label: t('nav.agentSkills', locale), href: '#' },
+            {
+              label: t('nav.launches', locale),
+              href: routes.launches,
+              badge: 'new'
+            },
             {
               label: t('nav.docs', locale),
               href: externalLinks.docs,

apps/website/src/i18n/translations.ts

@@ -11,6 +11,16 @@ const translations = {
     'zh-CN': '图像生成视频'
   },
 
+  // UI (global, reusable across sections)
+  'ui.copy': {
+    en: 'Copy',
+    'zh-CN': '复制'
+  },
+  'ui.copied': {
+    en: 'Copied',
+    'zh-CN': '已复制'
+  },
+
   // CTAs (global, reusable across sections)
   'cta.tryWorkflow': {
     en: 'Try Workflow',
@@ -1825,6 +1835,311 @@ const translations = {
       '我们尽力为经历面试流程的候选人提供有意义的反馈。由于申请量较大，在简历筛选阶段可能无法提供详细反馈。'
   },
 
+  // MCP – Meta
+  'mcp.meta.title': {
+    en: 'Comfy MCP — Drive ComfyUI from any AI agent',
+    'zh-CN': 'Comfy MCP — 让任何 AI 智能体驱动 ComfyUI'
+  },
+  'mcp.meta.description': {
+    en: 'Comfy MCP exposes the full ComfyUI engine over the Model Context Protocol. Generate images, video, audio, and 3D from Claude Code, Claude Desktop, and any MCP-compatible client.',
+    'zh-CN':
+      'Comfy MCP 通过模型上下文协议暴露完整的 ComfyUI 引擎，可在 Claude Code、Claude Desktop 及任何兼容 MCP 的客户端中生成图像、视频、音频和 3D 内容。'
+  },
+
+  // MCP – HeroSection
+  'mcp.hero.heading': {
+    en: 'Drive ComfyUI from\nany AI agent.',
+    'zh-CN': '让任何 AI 智能体\n驱动 ComfyUI。'
+  },
+  'mcp.hero.subtitle': {
+    en: 'Comfy MCP exposes the full ComfyUI engine over the Model Context Protocol — so your assistant can access the ecosystem, build workflows, and generate images, video, audio, or 3D.',
+    'zh-CN':
+      'Comfy MCP 通过模型上下文协议暴露完整的 ComfyUI 引擎——让你的助手能够接入生态系统、构建工作流，并生成图像、视频、音频或 3D 内容。'
+  },
+  'mcp.hero.demoPrompt': {
+    en: "match this frame's palette, make the hero key art",
+    'zh-CN': '匹配这一帧的配色，生成主视觉关键画面'
+  },
+  'mcp.hero.viewDocs': {
+    en: 'VIEW DOCS',
+    'zh-CN': '查看文档'
+  },
+  'mcp.hero.runWorkflow': {
+    en: 'RUN A WORKFLOW',
+    'zh-CN': '运行工作流'
+  },
+  'mcp.hero.demoGenerate': {
+    en: 'GENERATE',
+    'zh-CN': '生成'
+  },
+  'mcp.hero.demoActionGenerateImage': {
+    en: 'GENERATE-IMAGE',
+    'zh-CN': '生成图像'
+  },
+  'mcp.hero.demoActionGenerate3d': {
+    en: 'GENERATE-3D ASSET',
+    'zh-CN': '生成 3D 资产'
+  },
+  'mcp.hero.demoActionUpscale': {
+    en: 'UPSCALE-IMAGE',
+    'zh-CN': '放大图像'
+  },
+
+  // MCP – SetupStepsSection
+  'mcp.setup.label': {
+    en: 'GET STARTED',
+    'zh-CN': '快速开始'
+  },
+  'mcp.setup.heading': {
+    en: 'Set up Comfy MCP in three steps',
+    'zh-CN': '三步完成 Comfy MCP 配置'
+  },
+  'mcp.setup.subtitle': {
+    en: 'Add Comfy Cloud as a custom connector in Claude, Cursor, Codex, or any MCP-compatible client. Sign in once, and the full ComfyUI toolset is available right in your chat.',
+    'zh-CN':
+      '将 Comfy Cloud 添加为 Claude、Cursor、Codex 或任意兼容 MCP 客户端的自定义连接器。登录一次，ComfyUI 全套工具即可直接在对话中使用。'
+  },
+  'mcp.setup.step1.label': { en: 'STEP 1', 'zh-CN': '第 1 步' },
+  'mcp.setup.step1.title': {
+    en: 'Copy the MCP URL',
+    'zh-CN': '复制 MCP URL'
+  },
+  'mcp.setup.step1.description': {
+    en: "Click the copy button below. You'll paste it into your client in the next step.",
+    'zh-CN': '点击下方的复制按钮，下一步将其粘贴到你的客户端中。'
+  },
+  'mcp.setup.step2.label': { en: 'STEP 2', 'zh-CN': '第 2 步' },
+  'mcp.setup.step2.title': {
+    en: 'Add the connector',
+    'zh-CN': '添加连接器'
+  },
+  'mcp.setup.step2.description': {
+    en: 'Name it Comfy Cloud and paste the URL. The docs below cover every client.',
+    'zh-CN': '将其命名为 Comfy Cloud 并粘贴 URL。下方文档涵盖各类客户端。'
+  },
+  'mcp.setup.step2.cta': {
+    en: 'COMFY CLOUD MCP DOCS',
+    'zh-CN': 'COMFY CLOUD MCP 文档'
+  },
+  'mcp.setup.step3.label': { en: 'STEP 3', 'zh-CN': '第 3 步' },
+  'mcp.setup.step3.title': {
+    en: 'Connect and sign in',
+    'zh-CN': '连接并登录'
+  },
+  'mcp.setup.step3.description': {
+    en: 'Click Connect, sign in, and every Comfy Cloud skill is ready in your client.',
+    'zh-CN': '点击"连接"并登录，所有 Comfy Cloud 技能即可在你的客户端中使用。'
+  },
+  'mcp.setup.step3.cta': {
+    en: 'COMFY CLOUD SKILLS',
+    'zh-CN': 'COMFY CLOUD 技能'
+  },
+
+  // MCP – WhyBuildSection
+  'mcp.why.heading': {
+    en: 'Why build on\n',
+    'zh-CN': '为什么选择\n'
+  },
+  'mcp.why.headingHighlight': {
+    en: 'Comfy MCP?',
+    'zh-CN': 'Comfy MCP？'
+  },
+  'mcp.why.subtitle': {
+    en: 'A trusted infrastructure that lets engineers and professionals ship faster.',
+    'zh-CN': '一套值得信赖的基础设施，让工程师和专业人士交付更快。'
+  },
+  'mcp.why.1.title': {
+    en: 'Open protocol,\nany client.',
+    'zh-CN': '开放协议，\n任意客户端。'
+  },
+  'mcp.why.1.description': {
+    en: 'MCP is an open standard, so any MCP-compatible client can connect. Today Comfy supports Claude Code and Claude Desktop, with more clients coming.',
+    'zh-CN':
+      'MCP 是开放标准，因此任何兼容 MCP 的客户端都能接入。目前 Comfy 支持 Claude Code 和 Claude Desktop，更多客户端即将推出。'
+  },
+  'mcp.why.2.title': {
+    en: 'The full engine,\nnot a sandbox.',
+    'zh-CN': '完整引擎，\n非沙箱环境。'
+  },
+  'mcp.why.2.description': {
+    en: 'Same tool your team uses. Fully connected multi-step, multi-GPU workflows. Everything available now and in the future.',
+    'zh-CN':
+      '与你团队使用的相同工具。完整连接的多步骤、多 GPU 工作流。当前及未来的所有功能均可使用。'
+  },
+  'mcp.why.3.title': {
+    en: 'Outputs you keep.',
+    'zh-CN': '输出归你所有。'
+  },
+  'mcp.why.3.description': {
+    en: 'Downloads go to your Comfy library — store, reuse, remix, and share without leaving the ecosystem.',
+    'zh-CN':
+      '下载内容保存到你的 Comfy 库——在生态系统内存储、复用、二次创作和分享。'
+  },
+  'mcp.why.4.title': {
+    en: 'Powered by\nComfy Cloud.',
+    'zh-CN': '由 Comfy Cloud\n提供支持。'
+  },
+  'mcp.why.4.description': {
+    en: 'Run without a local GPU through the same infrastructure your team already trusts.',
+    'zh-CN': '无需本地 GPU，通过你团队信赖的相同基础设施运行。'
+  },
+
+  // MCP – ToolsSection
+  'mcp.tools.heading': {
+    en: 'Everything ComfyUI can do,\nnow available as tools.',
+    'zh-CN': 'ComfyUI 能做的一切，\n现在都可作为工具调用。'
+  },
+  'mcp.tools.1.title': {
+    en: 'Generate anything',
+    'zh-CN': '生成任意内容'
+  },
+  'mcp.tools.1.description': {
+    en: 'Generate images, video, audio, 3D, upscale, or remove backgrounds. Add or remove elements in images, create or modify any visual, audio, or 3D asset at any scale.',
+    'zh-CN':
+      '生成图像、视频、音频、3D 内容，放大分辨率或移除背景。添加或删除图像元素，以任意规模创建或修改任何视觉、音频或 3D 资产。'
+  },
+  'mcp.tools.1.alt': {
+    en: 'Comfy MCP generating images, video, audio, and 3D assets from a single prompt',
+    'zh-CN': 'Comfy MCP 通过单个提示生成图像、视频、音频和 3D 资产'
+  },
+  'mcp.tools.2.title': {
+    en: 'Search the ecosystem',
+    'zh-CN': '搜索生态系统'
+  },
+  'mcp.tools.2.description': {
+    en: 'Query thousands of models, browse rankings, and choose workflow templates straight from your response.',
+    'zh-CN': '查询数千个模型，浏览排名，直接在对话中选择工作流模板。'
+  },
+  'mcp.tools.2.alt': {
+    en: 'Comfy MCP searching the ecosystem of models, rankings, and workflow templates',
+    'zh-CN': 'Comfy MCP 搜索模型、排名和工作流模板的生态系统'
+  },
+  'mcp.tools.3.title': {
+    en: 'Run real workflows',
+    'zh-CN': '运行真实工作流'
+  },
+  'mcp.tools.3.description': {
+    en: 'Turn any ComfyUI workflow into a callable tool. The full power of the engine, driven by your agent.',
+    'zh-CN':
+      '将任何 ComfyUI 工作流转换为可调用的工具。由你的智能体驱动完整的引擎能力。'
+  },
+  'mcp.tools.3.alt': {
+    en: 'Comfy MCP running a ComfyUI workflow as a callable tool from a chat',
+    'zh-CN': 'Comfy MCP 在对话中将 ComfyUI 工作流作为可调用工具运行'
+  },
+
+  // MCP – HowItWorksSection
+  'mcp.howItWorks.heading': {
+    en: 'How it works',
+    'zh-CN': '工作原理'
+  },
+  'mcp.howItWorks.step1.number': { en: '01', 'zh-CN': '01' },
+  'mcp.howItWorks.step1.title': {
+    en: 'CONNECT',
+    'zh-CN': '连接'
+  },
+  'mcp.howItWorks.step1.description': {
+    en: 'Add the Comfy Cloud MCP server to Claude Code or Claude Desktop and sign in once with OAuth. No API keys to manage.',
+    'zh-CN':
+      '将 Comfy Cloud MCP 服务器添加到 Claude Code 或 Claude Desktop，通过 OAuth 一次性登录。无需管理 API 密钥。'
+  },
+  'mcp.howItWorks.step2.number': { en: '02', 'zh-CN': '02' },
+  'mcp.howItWorks.step2.title': {
+    en: 'DISCOVER',
+    'zh-CN': '发现'
+  },
+  'mcp.howItWorks.step2.description': {
+    en: "Your agent gets Comfy's tools: search, generate, submit, and retrieve — everything it needs to create.",
+    'zh-CN':
+      '你的智能体获得 Comfy 的工具：搜索、生成、提交和获取——一切所需，应有尽有。'
+  },
+  'mcp.howItWorks.step3.number': { en: '03', 'zh-CN': '03' },
+  'mcp.howItWorks.step3.title': {
+    en: 'CREATE',
+    'zh-CN': '创作'
+  },
+  'mcp.howItWorks.step3.description': {
+    en: 'Request what you want, the agent queues and runs the workflow, and returns the finished result.',
+    'zh-CN': '描述你的需求，智能体排队执行工作流，并返回最终结果。'
+  },
+
+  // MCP – FAQSection
+  'mcp.faq.heading': {
+    en: 'Q&As',
+    'zh-CN': '常见问答'
+  },
+  'mcp.faq.1.q': {
+    en: 'Which clients are supported?',
+    'zh-CN': '支持哪些客户端？'
+  },
+  'mcp.faq.1.a': {
+    en: 'Claude Code and Claude Desktop today, both signing in with OAuth. Support for more clients is coming.',
+    'zh-CN':
+      '目前支持 Claude Code 和 Claude Desktop，均通过 OAuth 登录。更多客户端的支持即将推出。'
+  },
+  'mcp.faq.2.q': {
+    en: 'Do I need an API key?',
+    'zh-CN': '我需要 API 密钥吗？'
+  },
+  'mcp.faq.2.a': {
+    en: 'Not for Claude Code or Claude Desktop. They use OAuth. An API key is only needed for headless or CI setups with no browser.',
+    'zh-CN':
+      'Claude Code 和 Claude Desktop 不需要，它们使用 OAuth。仅在没有浏览器的无头或 CI 环境中才需要 API 密钥。'
+  },
+  'mcp.faq.3.q': {
+    en: 'Do the slash commands work in Claude Desktop?',
+    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
+  },
+  'mcp.faq.3.a': {
+    en: 'No. They ship in the Claude Code plugin. Desktop connects to the same MCP server, so the tools work; just ask in plain language.',
+    'zh-CN':
+      '不可以。斜杠命令包含在 Claude Code 插件中。Claude Desktop 连接的是同一个 MCP 服务器，因此工具可以正常使用；直接用自然语言提问即可。'
+  },
+  'mcp.faq.4.q': {
+    en: "The sign-in didn't open a browser.",
+    'zh-CN': '登录时没有打开浏览器。'
+  },
+  'mcp.faq.4.a': {
+    en: 'In Claude Code, run /mcp, select comfy-cloud, and choose Authenticate. In Claude Desktop, reopen the connector from Customize → Connectors.',
+    'zh-CN':
+      '在 Claude Code 中，运行 /mcp，选择 comfy-cloud，然后选择 Authenticate（授权）。在 Claude Desktop 中，从“自定义 → 连接器”重新打开该连接器。'
+  },
+  'mcp.faq.5.q': {
+    en: 'How do I connect in Claude Code?',
+    'zh-CN': '如何在 Claude Code 中连接？'
+  },
+  'mcp.faq.5.a': {
+    en: 'Add the marketplace and install the comfy-cloud plugin, then run /mcp → comfy-cloud → Authenticate. It adds the connection and slash commands in one step.',
+    'zh-CN':
+      '添加插件市场并安装 comfy-cloud 插件，然后运行 /mcp → comfy-cloud → Authenticate（授权）。一步即可添加连接和斜杠命令。'
+  },
+  'mcp.faq.6.q': {
+    en: "What's the server URL for Claude Desktop?",
+    'zh-CN': 'Claude Desktop 的服务器 URL 是什么？'
+  },
+  'mcp.faq.6.a': {
+    en: 'Add a custom connector in Customize → Connectors pointing to https://cloud.comfy.org/mcp, then sign in when prompted.',
+    'zh-CN':
+      '在“自定义 → 连接器”中添加一个指向 https://cloud.comfy.org/mcp 的自定义连接器，然后在提示时登录。'
+  },
+  'mcp.faq.7.q': {
+    en: 'What can my agent do once connected?',
+    'zh-CN': '连接后我的智能体能做什么？'
+  },
+  'mcp.faq.7.a': {
+    en: 'Generate images, video, audio, and 3D; search models, nodes, and templates; and run ComfyUI workflows, all from a chat.',
+    'zh-CN':
+      '生成图像、视频、音频和 3D；搜索模型、节点和模板；并运行 ComfyUI 工作流——全部在对话中完成。'
+  },
+  'mcp.faq.8.q': {
+    en: 'Is it generally available?',
+    'zh-CN': '现已正式发布了吗？'
+  },
+  'mcp.faq.8.a': {
+    en: 'Comfy Cloud MCP is in open beta and available to everyone.',
+    'zh-CN': 'Comfy Cloud MCP 目前处于公开测试阶段，所有人均可使用。'
+  },
+
   // SiteNav
   'nav.products': { en: 'Products', 'zh-CN': '产品' },
   'nav.pricing': { en: 'Pricing', 'zh-CN': '价格' },
@@ -1849,6 +2164,7 @@ const translations = {
   'nav.aboutUs': { en: 'About Us', 'zh-CN': '关于我们' },
   'nav.careers': { en: 'Careers', 'zh-CN': '招聘' },
   'nav.customerStories': { en: 'Customer Stories', 'zh-CN': '客户故事' },
+  'nav.launches': { en: 'Launches', 'zh-CN': '发布' },
   'nav.downloadLocal': { en: 'DOWNLOAD DESKTOP', 'zh-CN': '下载桌面版' },
   'nav.launchCloud': { en: 'LAUNCH CLOUD', 'zh-CN': '启动云端' },
   'nav.ctaDesktopPrefix': { en: 'DOWNLOAD', 'zh-CN': '下载' },
@@ -1866,6 +2182,7 @@ const translations = {
   'nav.back': { en: 'BACK', 'zh-CN': '返回' },
   'nav.badgeNew': { en: 'NEW', 'zh-CN': '新' },
   // Column headers used in HeaderMainDesktop dropdowns
+  'nav.mcpServer': { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
   'nav.colFeatures': { en: 'Features', 'zh-CN': '功能' },
   'nav.colPrograms': { en: 'Programs', 'zh-CN': '项目' },
   'nav.colConnect': { en: 'Connect', 'zh-CN': '联系' },
@@ -4928,6 +5245,70 @@ const translations = {
   'affiliate.cta.termsLabel': {
     en: 'Read the affiliate program terms',
     'zh-CN': '阅读联盟计划条款'
+  },
+
+  // Launches page (/launches) — head metadata
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'launches.page.title': {
+    en: 'ComfyUI Live Demo & Q&A — June 29 Launch Livestream',
+    'zh-CN': 'ComfyUI 直播演示与问答 — 6 月 29 日发布直播'
+  },
+  'launches.page.description': {
+    en: 'Join the ComfyUI livestream on June 29 for a hands-on product demo and live Q&A. See what’s new across desktop, cloud, and community, and get your questions answered.',
+    'zh-CN':
+      '6 月 29 日加入 ComfyUI 直播，观看实操产品演示并参与实时问答。了解桌面、云端和社区的最新内容，并获得解答。'
+  },
+
+  // Launches page (/launches) — hero section
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'launches.hero.title': {
+    en: 'Everything new in ComfyUI',
+    'zh-CN': 'ComfyUI 全新内容'
+  },
+  'launches.hero.primary': {
+    en: 'Download Desktop',
+    'zh-CN': '下载桌面版'
+  },
+  'launches.hero.secondary': {
+    en: 'Launch Cloud',
+    'zh-CN': '启动云端'
+  },
+  'launches.hero.visualAlt': {
+    en: 'Comfy',
+    'zh-CN': 'Comfy'
+  },
+
+  // Launches page (/launches) — subscribe banner
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'launches.banner.text': {
+    en: 'Join the live stream. Get answers in real time.',
+    'zh-CN': '加入直播，实时获得解答。'
+  },
+  'launches.banner.cta': {
+    en: 'Join livestream',
+    'zh-CN': '加入直播'
+  },
+
+  // Launches page (/launches) — closing CTA
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'launches.cta.heading': {
+    en: 'Everything Comfy ships. All in one place.',
+    'zh-CN': 'Comfy 的全部内容，一处尽享。'
+  },
+  'launches.cta.primary': {
+    en: 'Open Comfy Cloud',
+    'zh-CN': '打开 Comfy Cloud'
+  },
+  'launches.cta.secondary': {
+    en: 'Try Workflow',
+    'zh-CN': '试用工作流'
+  },
+
+  // Launches page (/launches) — launches grid
+  // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
+  'launches.section.title': {
+    en: 'Latest Launches',
+    'zh-CN': '最新发布'
   }
 } as const satisfies Record<string, Record<Locale, string>>
 

apps/website/src/pages/launches.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('launches.page.title', locale)}
+  description={t('launches.page.description', locale)}
+>
+  <SubscribeBanner locale={locale} client:load />
+  <HeroSection locale={locale} client:load />
+  <DropsSection locale={locale} />
+  <CtaSection locale={locale} />
+</BaseLayout>

apps/website/src/pages/mcp.astro

@@ -0,0 +1,24 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ProductCardsSection from '../components/common/ProductCardsSection.vue'
+import HeroSection from '../templates/mcp/HeroSection.vue'
+import SetupSection from '../templates/mcp/SetupSection.vue'
+import WhySection from '../templates/mcp/WhySection.vue'
+import ToolsSection from '../templates/mcp/ToolsSection.vue'
+import HowItWorksSection from '../templates/mcp/HowItWorksSection.vue'
+import FAQSection from '../templates/mcp/FAQSection.vue'
+import { t } from '../i18n/translations'
+---
+
+<BaseLayout
+  title={t('mcp.meta.title', 'en')}
+  description={t('mcp.meta.description', 'en')}
+>
+  <HeroSection locale="en" client:load />
+  <SetupSection locale="en" client:visible />
+  <WhySection locale="en" />
+  <ToolsSection locale="en" />
+  <HowItWorksSection locale="en" />
+  <ProductCardsSection locale="en" label-key="products.labelProducts" />
+  <FAQSection client:visible locale="en" />
+</BaseLayout>

apps/website/src/pages/zh-CN/launches.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('launches.page.title', locale)}
+  description={t('launches.page.description', locale)}
+>
+  <SubscribeBanner locale={locale} client:load />
+  <HeroSection locale={locale} client:load />
+  <DropsSection locale={locale} />
+  <CtaSection locale={locale} />
+</BaseLayout>

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

@@ -0,0 +1,24 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ProductCardsSection from '../../components/common/ProductCardsSection.vue'
+import HeroSection from '../../templates/mcp/HeroSection.vue'
+import SetupSection from '../../templates/mcp/SetupSection.vue'
+import WhySection from '../../templates/mcp/WhySection.vue'
+import ToolsSection from '../../templates/mcp/ToolsSection.vue'
+import HowItWorksSection from '../../templates/mcp/HowItWorksSection.vue'
+import FAQSection from '../../templates/mcp/FAQSection.vue'
+import { t } from '../../i18n/translations'
+---
+
+<BaseLayout
+  title={t('mcp.meta.title', 'zh-CN')}
+  description={t('mcp.meta.description', 'zh-CN')}
+>
+  <HeroSection locale="zh-CN" client:load />
+  <SetupSection locale="zh-CN" client:visible />
+  <WhySection locale="zh-CN" />
+  <ToolsSection locale="zh-CN" />
+  <HowItWorksSection locale="zh-CN" />
+  <ProductCardsSection locale="zh-CN" label-key="products.labelProducts" />
+  <FAQSection client:visible locale="zh-CN" />
+</BaseLayout>

apps/website/src/styles/global.css

@@ -162,6 +162,45 @@
   animation: ripple-effect 4s linear infinite;
 }
 
+@keyframes cursor-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
+@utility animate-cursor-blink {
+  animation: cursor-blink 1s step-end infinite;
+}
+
+.card-slide-enter-active {
+  transition:
+    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.4s ease;
+}
+
+.card-slide-enter-from {
+  transform: translateX(56px);
+  opacity: 0;
+}
+
+/* Existing cards slide down smoothly when a new card is prepended. */
+.card-slide-move {
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.card-slide-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.card-slide-leave-to {
+  opacity: 0;
+}
+
 @utility animate-delay-* {
   animation-delay: --value([*]);
 }

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('launches.cta.heading', locale)"
+    :primary-cta="{
+      label: t('launches.cta.primary', locale),
+      href: externalLinks.cloud,
+      target: '_blank'
+    }"
+    :secondary-cta="{
+      label: t('launches.cta.secondary', locale),
+      href: externalLinks.workflows,
+      target: '_blank'
+    }"
+  />
+</template>

apps/website/src/templates/drops/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 '../../components/ui/badge/Badge.vue'
+
+import ButtonPill from '../../components/ui/button-pill/ButtonPill.vue'
+import Card from '../../components/ui/card/Card.vue'
+import CardContent from '../../components/ui/card/CardContent.vue'
+import CardDescription from '../../components/ui/card/CardDescription.vue'
+import CardFooter from '../../components/ui/card/CardFooter.vue'
+import CardHeader from '../../components/ui/card/CardHeader.vue'
+import CardTitle from '../../components/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="category">
+          {{ 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/templates/drops/DropsSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import DropCard from './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('launches.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,35 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import HeroLivestream01 from '../../components/blocks/HeroLivestream01.vue'
+import LaunchesHeroLogo from './LaunchesHeroLogo.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
+    :title="t('launches.hero.title', locale)"
+    :primary-cta="{
+      label: t('launches.hero.primary', locale),
+      href: routes.download
+    }"
+    :secondary-cta="{
+      label: t('launches.hero.secondary', locale),
+      href: externalLinks.cloud,
+      target: '_blank'
+    }"
+    :youtube-video-id="livestream.youtubeVideoId"
+    :start-date-time="livestream.startDateTime"
+    :end-date-time="livestream.endDateTime"
+  >
+    <template #visual>
+      <LaunchesHeroLogo :label="t('launches.hero.visualAlt', locale)" />
+    </template>
+  </HeroLivestream01>
+</template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import Button from '@/components/ui/button/Button.vue'
+import { resolveRel } from '../../utils/cta'
+import { livestream } from './livestream'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const signUpHref = `https://www.youtube.com/watch?v=${livestream.youtubeVideoId}`
+const signUpRel = resolveRel({ target: '_blank' })
+
+// Hide once the livestream window closes — both for visitors arriving after
+// the event and for visitors whose tab is open when it ends.
+const endMs = new Date(livestream.endDateTime).getTime()
+const visible = ref(true)
+
+// useTimeoutFn auto-clears on unmount. Arm it client-side only so SSR never
+// schedules a long-lived server timer.
+const { start } = useTimeoutFn(
+  () => {
+    visible.value = false
+  },
+  () => Math.max(0, endMs - Date.now()),
+  { immediate: false }
+)
+
+onMounted(() => {
+  if (endMs - Date.now() <= 0) {
+    visible.value = false
+  } else {
+    start()
+  }
+})
+</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('launches.banner.text', locale) }}
+      </p>
+      <Button
+        :href="signUpHref"
+        as="a"
+        variant="underlineLink"
+        size="sm"
+        target="_blank"
+        :rel="signUpRel"
+      >
+        {{ t('launches.banner.cta', locale) }}
+      </Button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+export const livestream = {
+  youtubeVideoId: 'yo7b_zHd20g',
+  startDateTime: '2026-06-29T15:00:00Z',
+  endDateTime: '2026-07-02T17:15:00Z'
+} as const

apps/website/src/templates/mcp/ComfyMcpDemo.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { Check } from '@lucide/vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const PROMPT = t('mcp.hero.demoPrompt', locale)
+const generateLabel = t('mcp.hero.demoGenerate', locale)
+
+const cards = [
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'moodboard_v1.png · 6-up',
+    tag: 'Gmail',
+    thumb: '/images/mcp/mcp-thumb-moodboard.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'concepts_01–03.png',
+    tag: 'Notion',
+    thumb: '/images/mcp/mcp-thumb-concepts.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'hero_keyart.png',
+    tag: 'Figma',
+    thumb: '/images/mcp/mcp-thumb-keyart.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerate3d',
+    file: 'asphalt_pbr/ · 5 maps',
+    tag: 'Blender',
+    thumb: '/images/mcp/mcp-thumb-asphalt.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionUpscale',
+    file: 'kaiju_neon_4k.png · 4096',
+    tag: null,
+    thumb: '/images/mcp/mcp-thumb-kaiju.webp'
+  }
+] as const
+
+const visibleCount = ref(0)
+const displayedPrompt = ref('')
+const promptDone = ref(false)
+
+const displayedCards = computed(() =>
+  cards
+    .slice(0, visibleCount.value)
+    .map((card) => ({ ...card, action: t(card.actionKey, locale) }))
+    // Newest card first — it slides in right below the prompt box and pushes
+    // the rest down.
+    .reverse()
+)
+
+let timer: ReturnType<typeof setTimeout> | null = null
+let active = false
+
+function schedule(fn: () => void, ms: number) {
+  timer = setTimeout(() => {
+    if (active) fn()
+  }, ms)
+}
+
+function typePrompt(onDone: () => void) {
+  displayedPrompt.value = ''
+  promptDone.value = false
+  let i = 0
+
+  function step() {
+    i++
+    displayedPrompt.value = PROMPT.slice(0, i)
+    if (i < PROMPT.length) {
+      schedule(step, 35)
+    } else {
+      promptDone.value = true
+      schedule(onDone, 350)
+    }
+  }
+
+  schedule(step, 50)
+}
+
+function revealNextCard() {
+  if (visibleCount.value >= cards.length) {
+    // All done — pause then reset
+    schedule(() => {
+      visibleCount.value = 0
+      schedule(revealNextCard, 500)
+    }, 2500)
+    return
+  }
+
+  // Type the prompt, then slide in the next card
+  typePrompt(() => {
+    visibleCount.value++
+    schedule(revealNextCard, 400)
+  })
+}
+
+onMounted(() => {
+  active = true
+  schedule(revealNextCard, 600)
+})
+
+onUnmounted(() => {
+  active = false
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 max-lg:h-[50vh]">
+    <!-- Prompt panel -->
+    <div
+      class="rounded-5xl flex flex-col justify-between gap-8 overflow-hidden bg-white/4 p-8"
+    >
+      <p
+        class="font-formula text-[17px] leading-relaxed font-light text-primary-comfy-canvas"
+      >
+        {{ displayedPrompt
+        }}<span
+          class="bg-primary-comfy-yellow ml-0.5 inline-block h-5.5 w-2 translate-y-0.5"
+          :class="promptDone ? 'animate-cursor-blink' : ''"
+        />
+      </p>
+
+      <div class="flex items-center gap-3">
+        <div class="h-px flex-1 bg-white/10" />
+        <div
+          class="bg-primary-comfy-yellow font-formula rounded-2xl px-4 py-3 text-sm font-extrabold tracking-[0.7px] text-primary-comfy-ink uppercase"
+        >
+          {{ generateLabel }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Cards accumulate — each slides in from the right after its prompt cycle -->
+    <div class="relative overflow-hidden max-lg:min-h-0 max-lg:flex-1">
+      <TransitionGroup
+        name="card-slide"
+        tag="div"
+        class="flex flex-col gap-2.5 max-lg:absolute max-lg:inset-x-0 max-lg:top-0"
+      >
+        <div
+          v-for="(card, i) in displayedCards"
+          :key="card.file"
+          class="flex items-center gap-3.5 overflow-hidden rounded-3xl px-4 py-3.5"
+          :class="i === 0 ? 'bg-white/8' : 'bg-white/4'"
+        >
+          <img
+            :src="card.thumb"
+            :alt="card.action"
+            class="size-13.5 shrink-0 rounded-[14px] object-cover"
+          />
+
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
+            <p
+              class="font-formula text-primary-comfy-yellow text-xs font-extrabold tracking-[0.7px] uppercase"
+            >
+              {{ card.action }}
+            </p>
+            <p
+              class="font-formula truncate text-sm font-light text-primary-comfy-canvas"
+            >
+              {{ card.file }}
+            </p>
+          </div>
+
+          <span
+            v-if="card.tag"
+            class="font-formula relative isolate inline-flex h-8 shrink-0 items-center justify-center overflow-visible bg-transparent px-5 text-sm font-extrabold tracking-[0.7px] text-white/60 uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm before:bg-white/20"
+          >
+            <span class="ppformula-text-center">
+              {{ card.tag }}
+            </span>
+          </span>
+
+          <Check
+            class="size-4 shrink-0 text-primary-comfy-canvas/60"
+            :stroke-width="1.5"
+          />
+        </div>
+      </TransitionGroup>
+
+      <!-- Bottom fade so accumulating cards dissolve into the page background -->
+      <div
+        class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-32 bg-linear-to-t from-primary-comfy-ink to-transparent lg:hidden"
+      />
+    </div>
+  </div>
+</template>

apps/website/src/templates/mcp/FAQSection.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import FAQSplit01 from '../../components/blocks/FAQSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8] as const
+
+const faqs = faqNumbers.map((n) => ({
+  id: String(n),
+  question: t(`mcp.faq.${n}.q`, locale),
+  answer: t(`mcp.faq.${n}.a`, locale)
+}))
+</script>
+
+<template>
+  <FAQSplit01 :heading="t('mcp.faq.heading', locale)" :faqs="faqs" />
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import HeroSplit01 from '../../components/blocks/HeroSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import ComfyMcpDemo from './ComfyMcpDemo.vue'
+import { mcpCtas } from './ctas'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctas = mcpCtas(locale)
+</script>
+
+<template>
+  <HeroSplit01
+    :locale="locale"
+    class="min-h-screen"
+    badge-text="MCP"
+    :title="t('mcp.hero.heading', locale)"
+    :subtitle="t('mcp.hero.subtitle', locale)"
+    :primary-cta="ctas.runWorkflow"
+    :secondary-cta="ctas.docs"
+  >
+    <template #media>
+      <ComfyMcpDemo :locale="locale" />
+    </template>
+  </HeroSplit01>
+</template>

apps/website/src/templates/mcp/HowItWorksSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import FeatureGrid02 from '../../components/blocks/FeatureGrid02.vue'
+import type { FeatureStep } from '../../components/blocks/FeatureGrid02.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import { mcpCtas } from './ctas'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctas = mcpCtas(locale)
+
+const stepNumbers = [1, 2, 3] as const
+
+const steps: FeatureStep[] = stepNumbers.map((n) => ({
+  id: String(n),
+  number: t(`mcp.howItWorks.step${n}.number`, locale),
+  title: t(`mcp.howItWorks.step${n}.title`, locale),
+  description: t(`mcp.howItWorks.step${n}.description`, locale)
+}))
+</script>
+
+<template>
+  <FeatureGrid02
+    :heading="t('mcp.howItWorks.heading', locale)"
+    :steps="steps"
+    :primary-cta="ctas.runWorkflow"
+    :secondary-cta="ctas.docs"
+  />
+</template>

apps/website/src/templates/mcp/SetupSection.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ArrowUpRight } from '@lucide/vue'
+
+import FeatureGrid01 from '../../components/blocks/FeatureGrid01.vue'
+import type { FeatureCard } from '../../components/blocks/FeatureGrid01.vue'
+import { externalLinks } from '../../config/routes'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const cards: FeatureCard[] = [
+  {
+    id: 'step1',
+    label: t('mcp.setup.step1.label', locale),
+    title: t('mcp.setup.step1.title', locale),
+    description: t('mcp.setup.step1.description', locale),
+    action: {
+      type: 'code',
+      value: externalLinks.mcpServer
+    }
+  },
+  {
+    id: 'step2',
+    label: t('mcp.setup.step2.label', locale),
+    title: t('mcp.setup.step2.title', locale),
+    description: t('mcp.setup.step2.description', locale),
+    action: {
+      type: 'link',
+      label: t('mcp.setup.step2.cta', locale),
+      href: externalLinks.docsMcp,
+      target: '_blank',
+      icon: ArrowUpRight,
+      variant: 'default'
+    }
+  },
+  {
+    id: 'step3',
+    label: t('mcp.setup.step3.label', locale),
+    title: t('mcp.setup.step3.title', locale),
+    description: t('mcp.setup.step3.description', locale),
+    action: {
+      type: 'link',
+      label: t('mcp.setup.step3.cta', locale),
+      href: externalLinks.mcpSkills,
+      target: '_blank',
+      icon: ArrowUpRight,
+      variant: 'default'
+    }
+  }
+]
+</script>
+
+<template>
+  <FeatureGrid01
+    :eyebrow="t('mcp.setup.label', locale)"
+    :heading="t('mcp.setup.heading', locale)"
+    :subtitle="t('mcp.setup.subtitle', locale)"
+    :columns="3"
+    :cards="cards"
+    :copy-label="t('ui.copy', locale)"
+    :copied-label="t('ui.copied', locale)"
+  />
+</template>

apps/website/src/templates/mcp/ToolsSection.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import FeatureRows01 from '../../components/blocks/FeatureRows01.vue'
+import type { FeatureRow } from '../../components/blocks/FeatureRows01.vue'
+import type { Locale, TranslationKey } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+type ToolMedia =
+  | { type: 'image'; src: string }
+  | {
+      type: 'video'
+      src: string
+      autoplay?: boolean
+      loop?: boolean
+      hideControls?: boolean
+    }
+
+const tools: { n: 1 | 2 | 3; media: ToolMedia; altKey?: TranslationKey }[] = [
+  {
+    n: 1,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/generate-everything.gif'
+    },
+    altKey: 'mcp.tools.1.alt'
+  },
+  {
+    n: 2,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/search-ecosystem.png'
+    },
+    altKey: 'mcp.tools.2.alt'
+  },
+  {
+    n: 3,
+    media: {
+      type: 'video',
+      src: 'https://media.comfy.org/website/mcp/run-real-workflows.mp4',
+      autoplay: true,
+      loop: true,
+      hideControls: true
+    },
+    altKey: 'mcp.tools.3.alt'
+  }
+]
+
+const rows: FeatureRow[] = tools.map(({ n, media, altKey }) => {
+  const alt = altKey ? t(altKey, locale) : undefined
+  return {
+    id: String(n),
+    title: t(`mcp.tools.${n}.title`, locale),
+    description: t(`mcp.tools.${n}.description`, locale),
+    media: { ...media, alt }
+  }
+})
+</script>
+
+<template>
+  <FeatureRows01
+    :locale="locale"
+    :heading="t('mcp.tools.heading', locale)"
+    :rows="rows"
+  />
+</template>

apps/website/src/templates/mcp/WhySection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import ReasonsSplit01 from '../../components/blocks/ReasonsSplit01.vue'
+import type { Reason } from '../../components/blocks/ReasonsSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const reasonNumbers = [1, 2, 3, 4] as const
+
+const reasons: Reason[] = reasonNumbers.map((n) => ({
+  id: String(n),
+  title: t(`mcp.why.${n}.title`, locale),
+  description: t(`mcp.why.${n}.description`, locale)
+}))
+</script>
+
+<template>
+  <ReasonsSplit01
+    :heading="t('mcp.why.heading', locale)"
+    :heading-highlight="t('mcp.why.headingHighlight', locale)"
+    highlight-class="text-primary-comfy-yellow"
+    :subtitle="t('mcp.why.subtitle', locale)"
+    :reasons="reasons"
+  />
+</template>

apps/website/src/templates/mcp/ctas.ts

@@ -0,0 +1,27 @@
+import { externalLinks, getRoutes } from '../../config/routes'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+export interface McpCta {
+  label: string
+  href: string
+  target?: '_blank'
+}
+
+/**
+ * The two calls-to-action shared by the MCP hero and "how it works" sections:
+ * view the docs, or run a workflow in the cloud.
+ */
+export function mcpCtas(locale: Locale): { docs: McpCta; runWorkflow: McpCta } {
+  return {
+    docs: {
+      label: t('mcp.hero.viewDocs', locale),
+      href: externalLinks.docsMcp,
+      target: '_blank'
+    },
+    runWorkflow: {
+      label: t('mcp.hero.runWorkflow', locale),
+      href: getRoutes(locale).cloud
+    }
+  }
+}

apps/website/src/utils/cta.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveRel } from './cta'
+
+describe('resolveRel', () => {
+  it('prefers an explicit rel over the target-derived default', () => {
+    expect(resolveRel({ rel: 'nofollow', target: '_blank' })).toBe('nofollow')
+  })
+
+  it('adds noopener noreferrer for _blank targets', () => {
+    expect(resolveRel({ target: '_blank' })).toBe('noopener noreferrer')
+  })
+
+  it('returns undefined for non-blank targets', () => {
+    expect(resolveRel({ target: '_self' })).toBeUndefined()
+    expect(resolveRel({})).toBeUndefined()
+  })
+})

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)
+  )
+}

apps/website/src/utils/video.ts

@@ -1,7 +1,7 @@
 /** @knipIgnoreUsedByStackedPR */
 export type VideoFormat = 'webm' | 'mp4'
 
-export type VideoSource = {
+type VideoSource = {
   src: string
   type: `video/${VideoFormat}`
   format: VideoFormat

apps/website/vercel.json

@@ -14,6 +14,24 @@
         { "type": "host", "value": "website-frontend-comfyui.vercel.app" }
       ],
       "headers": [{ "key": "X-Robots-Tag", "value": "index, follow" }]
+    },
+    {
+      "source": "/payment/(.*)",
+      "headers": [
+        {
+          "key": "X-Robots-Tag",
+          "value": "noindex"
+        }
+      ]
+    },
+    {
+      "source": "/:locale/payment/(.*)",
+      "headers": [
+        {
+          "key": "X-Robots-Tag",
+          "value": "noindex"
+        }
+      ]
     }
   ],
   "redirects": [

browser_tests/assets/missing/missing_model_nested_promoted_widget.json

@@ -0,0 +1,197 @@
+{
+  "id": "test-missing-model-nested-promoted-widget",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "outer-subgraph-with-promoted-missing-model",
+      "pos": [10, 250],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "title": "Resolved Shared Outer Subgraph",
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["resolved_model.safetensors"]
+    },
+    {
+      "id": 4,
+      "type": "outer-subgraph-with-promoted-missing-model",
+      "pos": [450, 250],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "title": "Outer Subgraph with Promoted Missing Model",
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "outer-subgraph-with-promoted-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Outer Subgraph with Promoted Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [600, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "outer-ckpt-name-input-id",
+            "name": "ckpt_name",
+            "type": "COMBO",
+            "linkIds": [2],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 2,
+            "type": "inner-subgraph-with-promoted-missing-model",
+            "pos": [250, 180],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "ckpt_name",
+                "name": "ckpt_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "ckpt_name"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [],
+            "properties": {},
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 2,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ]
+      },
+      {
+        "id": "inner-subgraph-with-promoted-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Inner Subgraph with Promoted Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "inner-ckpt-name-input-id",
+            "name": "ckpt_name",
+            "type": "COMBO",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "ckpt_name",
+                "name": "ckpt_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "ckpt_name"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": null },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "COMBO"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/fixtures/VueNodeHelpers.ts

@@ -4,8 +4,9 @@
 import type { Locator, Page } from '@playwright/test'
 
 import { TestIds } from '@e2e/fixtures/selectors'
-import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { toNodeId } from '@/types/nodeId'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 
 export class VueNodeHelpers {
   /**
@@ -43,7 +44,7 @@ export class VueNodeHelpers {
       .locator('.lg-slot--input')
       .filter({
         has: this.page.locator(
-          `[data-slot-key="${getSlotKey(nodeId, slotIndex, true)}"]`
+          `[data-slot-key="${getSlotKey(toNodeId(nodeId), slotIndex, true)}"]`
         )
       })
   }
@@ -251,14 +252,18 @@ export class VueNodeHelpers {
     const key = await slot.getByTestId('slot-dot').getAttribute('data-slot-key')
     if (!key) return false
 
-    return await this.page.evaluate((key) => {
-      const [nodeId, type, slotId] = key.split('-')
-      const node = app?.canvas?.graph?.getNodeById(nodeId)
-      if (!node) return false
+    const [rawNodeId, type, slotId] = key.split('-')
+    const nodeId = toNodeId(rawNodeId)
+    return await this.page.evaluate(
+      ([nodeId, type, slotId]) => {
+        const node = app?.canvas?.graph?.getNodeById(nodeId)
+        if (!node) return false
 
-      return type === 'in'
-        ? node.inputs[Number(slotId)]?.link !== null
-        : !!node.outputs[Number(slotId)].links?.length
-    }, key)
+        return type === 'in'
+          ? node.inputs[Number(slotId)]?.link !== null
+          : !!node.outputs[Number(slotId)]?.links?.length
+      },
+      [nodeId, type, slotId] as const
+    )
   }
 }

browser_tests/fixtures/components/SidebarTab.ts

@@ -93,7 +93,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
   public readonly searchInput: Locator
   public readonly sidebarContent: Locator
   public readonly allTab: Locator
-  public readonly blueprintsTab: Locator
+  public readonly essentialsTab: Locator
   public readonly sortButton: Locator
   public readonly nodePreview: Locator
 
@@ -101,8 +101,8 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
     super(page, 'node-library')
     this.searchInput = page.getByPlaceholder('Search...')
     this.sidebarContent = page.locator('.sidebar-content-container')
-    this.allTab = this.getTab('All')
-    this.blueprintsTab = this.getTab('Blueprints')
+    this.allTab = this.getTab('All nodes')
+    this.essentialsTab = this.getTab('Essentials')
     this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
     this.nodePreview = page.getByTestId(TestIds.sidebar.nodePreviewCard)
   }

browser_tests/fixtures/data/cloudWorkspace.ts

@@ -0,0 +1,96 @@
+import type {
+  BillingStatusResponse,
+  Member,
+  Plan,
+  WorkspaceWithRole
+} from '@/platform/workspace/api/workspaceApi'
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+
+// `/api/features` is the remote-config source: production builds resolve the
+// workspaces flag from it (the `ff:` localStorage override is dev-only).
+export const WORKSPACE_FEATURE_FLAG: RemoteConfig = {
+  team_workspaces_enabled: true
+}
+
+export const TEAM_WORKSPACE: WorkspaceWithRole = {
+  id: 'ws-team',
+  name: 'Team Comfy',
+  type: 'team',
+  created_at: '2025-01-01T00:00:00Z',
+  joined_at: '2025-01-02T00:00:00Z',
+  role: 'owner',
+  subscription_tier: 'PRO'
+}
+
+export const CREATOR: Member = {
+  id: 'u-liz',
+  name: 'Liz',
+  email: 'liz@test.comfy.org',
+  joined_at: '2025-01-01T00:00:00Z',
+  role: 'owner',
+  is_original_owner: true
+}
+
+// Identity must match the CloudAuthHelper mock user so this row counts as
+// "(You)".
+export const VIEWER: Member = {
+  id: 'u-me',
+  name: 'E2E Test User',
+  email: 'e2e@test.comfy.org',
+  joined_at: '2025-01-02T00:00:00Z',
+  role: 'owner',
+  is_original_owner: false
+}
+
+export const MEMBER_JANE: Member = {
+  id: 'u-jane',
+  name: 'Jane',
+  email: 'jane@test.comfy.org',
+  joined_at: '2025-01-03T00:00:00Z',
+  role: 'member',
+  is_original_owner: false
+}
+
+export const MEMBER_JOHN: Member = {
+  id: 'u-john',
+  name: 'John',
+  email: 'john@test.comfy.org',
+  joined_at: '2025-01-04T00:00:00Z',
+  role: 'member',
+  is_original_owner: false
+}
+
+export const DEFAULT_TEAM_MEMBERS: Member[] = [
+  CREATOR,
+  VIEWER,
+  MEMBER_JANE,
+  MEMBER_JOHN
+]
+
+export const TEAM_BILLING_STATUS: BillingStatusResponse = {
+  is_active: true,
+  subscription_status: 'active',
+  subscription_tier: 'PRO',
+  subscription_duration: 'MONTHLY',
+  plan_slug: 'pro-monthly',
+  billing_status: 'paid',
+  has_funds: true,
+  renewal_date: '2099-02-20T00:00:00Z'
+}
+
+// `max_seats > 1` on the current plan is what flips `isOnTeamPlan`, which gates
+// the whole role-management UI.
+export const TEAM_PRO_PLAN: Plan = {
+  slug: 'pro-monthly',
+  tier: 'PRO',
+  duration: 'MONTHLY',
+  price_cents: 10000,
+  credits_cents: 21100,
+  max_seats: 30,
+  availability: { available: true },
+  seat_summary: {
+    seat_count: 4,
+    total_cost_cents: 40000,
+    total_credits_cents: 0
+  }
+}

browser_tests/fixtures/helpers/CloudWorkspaceMockHelper.ts

@@ -0,0 +1,150 @@
+import type { Page, Route } from '@playwright/test'
+
+import type { Member } from '@/platform/workspace/api/workspaceApi'
+
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+import {
+  DEFAULT_TEAM_MEMBERS,
+  TEAM_BILLING_STATUS,
+  TEAM_PRO_PLAN,
+  TEAM_WORKSPACE,
+  WORKSPACE_FEATURE_FLAG
+} from '@e2e/fixtures/data/cloudWorkspace'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+
+interface RoleChangeRequest {
+  url: string
+  role: string
+}
+
+interface MemberMockState {
+  members: Member[]
+  patches: RoleChangeRequest[]
+}
+
+const jsonRoute = (body: unknown) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+/**
+ * Boots the cloud app against fully mocked workspace + billing endpoints so
+ * member/role specs can drive a raw `page` (the `comfyPage` fixture would try
+ * to reach the OSS devtools backend during setup).
+ *
+ * Returns the mutable mock state: `members` reflects PATCH-applied roles and
+ * `patches` records every role-change request for assertion.
+ */
+export class CloudWorkspaceMockHelper {
+  constructor(private readonly page: Page) {}
+
+  async setup(
+    members: Member[] = DEFAULT_TEAM_MEMBERS
+  ): Promise<MemberMockState> {
+    const state = await this.mockBoot(members)
+    await new CloudAuthHelper(this.page).mockAuth()
+    await this.page.addInitScript(() => {
+      localStorage.setItem('Comfy.userId', 'test-user-e2e')
+      localStorage.setItem('Comfy.Workspace.LastWorkspaceId', 'ws-team')
+    })
+    return state
+  }
+
+  private async mockBoot(members: Member[]): Promise<MemberMockState> {
+    const state: MemberMockState = {
+      members: members.map((m) => ({ ...m })),
+      patches: []
+    }
+    const { page } = this
+
+    await page.route('**/api/features', (r) =>
+      r.fulfill(jsonRoute(WORKSPACE_FEATURE_FLAG))
+    )
+    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' }
+        })
+      )
+    )
+    // A non-empty settings payload with TutorialCompleted marks the user as
+    // returning, so the new-user Templates dialog never auto-opens to block the
+    // Settings button. Errors tab off suppresses the model-folder 401 toast.
+    await page.route('**/api/settings', (r) =>
+      r.fulfill(
+        jsonRoute({
+          'Comfy.TutorialCompleted': true,
+          'Comfy.RightSidePanel.ShowErrorsTab': false
+        })
+      )
+    )
+    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('**/api/auth/token', (r) =>
+      r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+    )
+    await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
+
+    await page.route('**/api/workspaces', (r) =>
+      r.fulfill(jsonRoute({ workspaces: [TEAM_WORKSPACE] }))
+    )
+
+    await page.route('**/api/workspace/members**', (route: Route) => {
+      const request = route.request()
+      if (request.method() === 'PATCH') {
+        const url = request.url()
+        const id = url.match(/\/api\/workspace\/members\/([^/?]+)/)?.[1]
+        const { role } = request.postDataJSON() as { role: Member['role'] }
+        state.patches.push({ url, role })
+        const member = state.members.find((m) => m.id === id)
+        if (member) member.role = role
+        // Echo the updated row like the real BE; the store merges only the role
+        // locally, so the response body shape is not load-bearing.
+        return route.fulfill(jsonRoute(member))
+      }
+      return route.fulfill(
+        jsonRoute({
+          members: state.members,
+          pagination: { offset: 0, limit: 50, total: state.members.length }
+        })
+      )
+    })
+    await page.route('**/api/workspace/invites', (r) =>
+      r.fulfill(jsonRoute({ invites: [] }))
+    )
+
+    await page.route('**/api/billing/status', (r) =>
+      r.fulfill(jsonRoute(TEAM_BILLING_STATUS))
+    )
+    await page.route('**/api/billing/balance', (r) =>
+      r.fulfill(
+        jsonRoute({
+          amount_micros: 6000,
+          currency: 'usd',
+          effective_balance_micros: 6000,
+          cloud_credit_balance_micros: 5000,
+          prepaid_balance_micros: 1000
+        })
+      )
+    )
+    await page.route('**/api/billing/plans', (r) =>
+      r.fulfill(
+        jsonRoute({ current_plan_slug: 'pro-monthly', plans: [TEAM_PRO_PLAN] })
+      )
+    )
+
+    return state
+  }
+}

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -5,10 +5,9 @@ import type {
   LGraph,
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
-import type {
-  ComfyWorkflowJSON,
-  NodeId
-} from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { toNodeId } from '@/types/nodeId'
+import type { NodeId, SerializedNodeId } from '@/types/nodeId'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 import type { Position, Size } from '@e2e/fixtures/types'
@@ -42,11 +41,12 @@ export class NodeOperationsHelper {
   }
 
   async getSelectedNodeIds(): Promise<NodeId[]> {
-    return await this.page.evaluate(() => {
+    const selectedNodeIds = await this.page.evaluate(() => {
       const selected = window.app?.canvas?.selected_nodes
       if (!selected) return []
-      return Object.keys(selected).map(Number)
+      return Object.keys(selected)
     })
+    return selectedNodeIds.map(toNodeId)
   }
 
   /**
@@ -114,8 +114,8 @@ export class NodeOperationsHelper {
     return this.getNodeRefById(id)
   }
 
-  async getNodeRefById(id: NodeId): Promise<NodeReference> {
-    return new NodeReference(id, this.comfyPage)
+  async getNodeRefById(id: SerializedNodeId): Promise<NodeReference> {
+    return new NodeReference(toNodeId(id), this.comfyPage)
   }
 
   async getNodeRefsByType(
@@ -136,7 +136,7 @@ export class NodeOperationsHelper {
           },
           { type, includeSubgraph }
         )
-      ).map((id: NodeId) => this.getNodeRefById(id))
+      ).map((id: SerializedNodeId) => this.getNodeRefById(id))
     )
   }
 
@@ -148,7 +148,7 @@ export class NodeOperationsHelper {
             .app!.graph.nodes.filter((n: LGraphNode) => n.title === title)
             .map((n: LGraphNode) => n.id)
         }, title)
-      ).map((id: NodeId) => this.getNodeRefById(id))
+      ).map((id: SerializedNodeId) => this.getNodeRefById(id))
     )
   }
 

browser_tests/fixtures/helpers/Preview3DPipelineFixture.ts

@@ -1,6 +1,9 @@
 import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
 
+import { toNodeId } from '@/types/nodeId'
+import type { NodeId } from '@/types/nodeId'
+
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { assetPath } from '@e2e/fixtures/utils/paths'
@@ -45,9 +48,9 @@ async function orbitDragFromCanvasCenter(
 
 export class Preview3DPipelineContext {
   /** Matches node ids in `browser_tests/assets/3d/preview3d_pipeline.json`. */
-  static readonly loadNodeId = '1'
+  static readonly loadNodeId = toNodeId(1)
   /** Matches node ids in `browser_tests/assets/3d/preview3d_pipeline.json`. */
-  static readonly previewNodeId = '2'
+  static readonly previewNodeId = toNodeId(2)
 
   readonly load3d: Load3DHelper
   readonly preview3d: Load3DHelper
@@ -61,9 +64,9 @@ export class Preview3DPipelineContext {
     )
   }
 
-  async getModelFileWidgetValue(nodeId: string): Promise<string> {
+  async getModelFileWidgetValue(nodeId: NodeId): Promise<string> {
     return this.comfyPage.page.evaluate((id) => {
-      const node = window.app!.graph.getNodeById(Number(id))
+      const node = window.app!.graph.getNodeById(id)
       if (!node?.widgets) return ''
       const w = node.widgets.find((x) => x.name === 'model_file')
       const v = w?.value
@@ -71,9 +74,9 @@ export class Preview3DPipelineContext {
     }, nodeId)
   }
 
-  async getLastTimeModelFile(nodeId: string): Promise<string> {
+  async getLastTimeModelFile(nodeId: NodeId): Promise<string> {
     return this.comfyPage.page.evaluate((id) => {
-      const node = window.app!.graph.getNodeById(Number(id))
+      const node = window.app!.graph.getNodeById(id)
       if (!node?.properties) return ''
       const v = (node.properties as Record<string, unknown>)[
         'Last Time Model File'
@@ -82,9 +85,9 @@ export class Preview3DPipelineContext {
     }, nodeId)
   }
 
-  async getCameraStateFromProperties(nodeId: string): Promise<unknown> {
+  async getCameraStateFromProperties(nodeId: NodeId): Promise<unknown> {
     return this.comfyPage.page.evaluate((id) => {
-      const node = window.app!.graph.getNodeById(Number(id))
+      const node = window.app!.graph.getNodeById(id)
       if (!node?.properties) return null
       const cfg = (node.properties as Record<string, unknown>)['Camera Config']
       if (cfg === null || typeof cfg !== 'object') return null

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -7,6 +7,7 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { toNodeId } from '@/types/nodeId'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { SubgraphEditor } from '@e2e/fixtures/components/SubgraphEditor'
@@ -549,6 +550,7 @@ export class SubgraphHelper {
   }
 
   static getTextSlotPosition(page: Page, nodeId: string) {
+    const localNodeId = toNodeId(nodeId)
     return page.evaluate((id) => {
       const node = window.app!.canvas.graph!.getNodeById(id)
       if (!node) return null
@@ -565,7 +567,7 @@ export class SubgraphHelper {
         }
       }
       return null
-    }, nodeId)
+    }, localNodeId)
   }
 
   static async expectWidgetBelowHeader(

browser_tests/fixtures/utils/cloudBillingMocks.ts

@@ -0,0 +1,34 @@
+import type { Page } from '@playwright/test'
+
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+
+/**
+ * Minimal valid billing shapes so the billing facade resolves while a
+ * subscription dialog mounts. Active personal sub with zero balance.
+ */
+export async function mockBilling(page: Page) {
+  await page.route('**/api/billing/status', (r) =>
+    r.fulfill(
+      jsonRoute({
+        is_active: true,
+        has_funds: true,
+        subscription_status: 'active',
+        subscription_tier: 'pro',
+        subscription_duration: 'MONTHLY',
+        billing_status: 'paid'
+      })
+    )
+  )
+  await page.route('**/api/billing/balance', (r) =>
+    r.fulfill(jsonRoute({ amount_micros: 0, currency: 'usd' }))
+  )
+  await page.route('**/api/billing/plans', (r) =>
+    r.fulfill(jsonRoute({ plans: [] }))
+  )
+  await page.route('**/customers/cloud-subscription-status', (r) =>
+    r.fulfill(jsonRoute({ is_active: false }))
+  )
+  await page.route('**/customers/balance', (r) =>
+    r.fulfill(jsonRoute({ amount_micros: 0, currency: 'usd' }))
+  )
+}

browser_tests/fixtures/utils/cloudBootMocks.ts

@@ -0,0 +1,64 @@
+import type { Page } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+
+interface CloudBootOptions {
+  /** Remote-config payload for `/api/features` (enables the flags under test). */
+  features: RemoteConfig
+  /** Body for `/api/settings` (defaults to `{}`). */
+  settings?: unknown
+}
+
+/**
+ * Stub the core endpoints the cloud app hits on boot so a raw `page` reaches the
+ * working app without falling through to the OSS devtools backend. Specs layer
+ * their own feature- or flow-specific routes on top.
+ */
+export async function mockCloudBoot(
+  page: Page,
+  { features, settings = {} }: CloudBootOptions
+) {
+  await page.route('**/api/features', (r) => r.fulfill(jsonRoute(features)))
+  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' }
+      })
+    )
+  )
+  await page.route('**/api/user', (r) =>
+    r.fulfill(jsonRoute({ status: 'active' }))
+  )
+  await page.route('**/api/settings', (r) => r.fulfill(jsonRoute(settings)))
+  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([])))
+}
+
+/**
+ * Mock Firebase auth and pre-select the e2e user so the cloud app boots
+ * signed-in. The signed-in email (`e2e@test.comfy.org`) is what the
+ * original-owner gate matches against the members self-row.
+ */
+export async function bootCloud(page: Page) {
+  const auth = new CloudAuthHelper(page)
+  await auth.mockAuth()
+  await page.addInitScript(() => {
+    localStorage.setItem('Comfy.userId', 'test-user-e2e')
+  })
+}

browser_tests/fixtures/utils/jsonRoute.ts

@@ -0,0 +1,12 @@
+/**
+ * Build a 200 JSON body for `route.fulfill()`. Generic so callers can type the
+ * payload (e.g. `jsonRoute({ ... } satisfies RemoteConfig)`) and catch contract
+ * drift against the real API shape.
+ */
+export function jsonRoute<T>(body: T) {
+  return {
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify(body)
+  }
+}

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
 import type { SerialisableLLink } from '@/lib/litegraph/src/types/serialisation'
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { NodeId } from '@/types/nodeId'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { Position, Size } from '@e2e/fixtures/types'
 import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'

browser_tests/fixtures/utils/objectInfo.ts

@@ -0,0 +1,136 @@
+import type { Page, Route } from '@playwright/test'
+
+import {
+  getComboSpecComboOptions,
+  isComboInputSpec,
+  isComboInputSpecV1
+} from '@/schemas/nodeDefSchema'
+import type {
+  ComboInputSpec,
+  ComboInputSpecV2,
+  ComfyNodeDef,
+  InputSpec
+} from '@/schemas/nodeDefSchema'
+
+type ObjectInfoResponse = Record<string, ComfyNodeDef>
+
+type ComboInput = ComboInputSpec | ComboInputSpecV2
+
+const OBJECT_INFO_ROUTE = '**/object_info'
+
+function getRequiredInput(
+  objectInfo: ObjectInfoResponse,
+  nodeType: string,
+  inputName: string
+): InputSpec {
+  const nodeInfo = objectInfo[nodeType]
+  if (!nodeInfo) {
+    throw new Error(`Missing object_info entry for ${nodeType}`)
+  }
+
+  const requiredInputs = nodeInfo.input?.required
+  if (!requiredInputs) {
+    throw new Error(`Missing required inputs for ${nodeType}`)
+  }
+
+  const input = requiredInputs[inputName]
+  if (!input) {
+    throw new Error(`Missing input ${nodeType}.${inputName}`)
+  }
+
+  return input
+}
+
+function getComboInput(
+  objectInfo: ObjectInfoResponse,
+  nodeType: string,
+  inputName: string
+): ComboInput {
+  const input = getRequiredInput(objectInfo, nodeType, inputName)
+  if (isComboInputSpec(input)) {
+    return input
+  }
+
+  throw new Error(`Expected ${nodeType}.${inputName} to be a combo input`)
+}
+
+export function setComboInputOptions(
+  objectInfo: ObjectInfoResponse,
+  nodeType: string,
+  inputName: string,
+  values: ReadonlyArray<string | number>
+): void {
+  const input = getComboInput(objectInfo, nodeType, inputName)
+  const nextValues = [...values]
+
+  if (isComboInputSpecV1(input)) {
+    input[0] = nextValues
+    return
+  }
+
+  input[1] = { ...input[1], options: nextValues }
+}
+
+export function appendComboInputOptions(
+  objectInfo: ObjectInfoResponse,
+  nodeType: string,
+  inputName: string,
+  values: ReadonlyArray<string | number>
+): void {
+  const input = getComboInput(objectInfo, nodeType, inputName)
+  setComboInputOptions(objectInfo, nodeType, inputName, [
+    ...getComboSpecComboOptions(input),
+    ...values
+  ])
+}
+
+export async function routeObjectInfoFromSetupApi(
+  page: Page,
+  customize?: (objectInfo: ObjectInfoResponse) => void | Promise<void>
+): Promise<() => Promise<void>> {
+  const setupApiUrl =
+    process.env.PLAYWRIGHT_SETUP_API_URL ?? 'http://127.0.0.1:8188'
+  const objectInfoUrl = new URL('/object_info', setupApiUrl).toString()
+
+  const objectInfoRouteHandler = async (route: Route) => {
+    let objectInfo: ObjectInfoResponse
+    try {
+      const response = await fetch(objectInfoUrl, {
+        signal: AbortSignal.timeout(5_000)
+      })
+      if (!response.ok) {
+        await route.fulfill({
+          status: response.status,
+          contentType: response.headers.get('content-type') ?? 'text/plain',
+          body: await response.text()
+        })
+        return
+      }
+
+      objectInfo = (await response.json()) as ObjectInfoResponse
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      await route.fulfill({
+        status: 502,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          error: `Failed to fetch setup object_info from ${objectInfoUrl}: ${message}`
+        })
+      })
+      return
+    }
+
+    await customize?.(objectInfo)
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(objectInfo)
+    })
+  }
+
+  await page.route(OBJECT_INFO_ROUTE, objectInfoRouteHandler)
+  return async () => {
+    if (page.isClosed()) return
+    await page.unroute(OBJECT_INFO_ROUTE, objectInfoRouteHandler)
+  }
+}

browser_tests/fixtures/utils/promotedMissingModel.ts

@@ -0,0 +1,425 @@
+import { readFileSync } from 'fs'
+
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { toNodeId } from '@/types/nodeId'
+
+const PROMOTED_MODEL_WIDGET_NAME = 'ckpt_name'
+
+interface PromotedMissingModelWorkflow {
+  workflowName: string
+  hostNodeId: number
+  hostNodeTitle: string
+  sharedDefinitionSiblingHostNodeId?: number
+  sharedDefinitionSiblingHostNodeTitle?: string
+}
+
+type RootWorkflowNode = {
+  id: number | string
+  widgets_values?: unknown[] | Record<string, unknown>
+}
+
+type RootWorkflowData = ComfyWorkflowJSON & {
+  nodes?: RootWorkflowNode[]
+}
+
+export const NESTED_PROMOTED_MISSING_MODEL_WORKFLOW: PromotedMissingModelWorkflow =
+  {
+    workflowName: 'missing/missing_model_nested_promoted_widget',
+    hostNodeId: 4,
+    hostNodeTitle: 'Outer Subgraph with Promoted Missing Model',
+    sharedDefinitionSiblingHostNodeId: 3,
+    sharedDefinitionSiblingHostNodeTitle: 'Resolved Shared Outer Subgraph'
+  }
+
+export function getMissingModelLabel(group: Locator, modelName: string) {
+  return group.getByRole('button', { name: modelName, exact: true })
+}
+
+export async function expectSingleMissingModelReference(
+  group: Locator,
+  modelName: string
+) {
+  await expectMissingModelReferenceCount(group, modelName, 1)
+}
+
+export async function expectMissingModelReferenceCount(
+  group: Locator,
+  modelName: string,
+  count: number
+) {
+  await expect(getMissingModelLabel(group, modelName)).toHaveCount(1)
+  const badge = group.getByTestId(TestIds.dialogs.missingModelReferenceCount)
+  if (count === 1) {
+    await expect(badge).toBeHidden()
+    return
+  }
+  await expect(badge).toBeVisible()
+  await expect(badge).toHaveText(String(count))
+}
+
+export async function loadPromotedMissingModelAndOpenErrorsTab(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  modelName: string
+): Promise<Locator> {
+  await loadWorkflowAndOpenErrorsTab(comfyPage, workflow.workflowName)
+
+  const missingModelGroup = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingModelsGroup
+  )
+  await expectSingleMissingModelReference(missingModelGroup, modelName)
+  return missingModelGroup
+}
+
+export async function loadPromotedMissingModelWithHostValuesAndOpenErrorsTab(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  hostValues: Record<number, string>,
+  modelName: string,
+  expectedReferenceCount: number
+): Promise<Locator> {
+  await loadPromotedMissingModelWithHostValues(comfyPage, workflow, hostValues)
+
+  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeVisible()
+  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+  await expect(errorOverlay).toBeHidden()
+
+  const missingModelGroup = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingModelsGroup
+  )
+  await expectMissingModelReferenceCount(
+    missingModelGroup,
+    modelName,
+    expectedReferenceCount
+  )
+  return missingModelGroup
+}
+
+export async function expectNoMissingModelUi(comfyPage: ComfyPage) {
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await expect(
+    comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  ).toBeHidden()
+  await panel.open(comfyPage.actionbar.propertiesButton)
+  await expect(
+    panel.root.getByTestId(TestIds.propertiesPanel.errorsTab)
+  ).toBeHidden()
+  await expect(
+    comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
+  ).toBeHidden()
+}
+
+export async function selectVueComboPromotedModelByTitle(
+  comfyPage: ComfyPage,
+  nodeTitle: string,
+  modelName: string
+) {
+  await comfyPage.vueNodes.selectComboOption(
+    nodeTitle,
+    PROMOTED_MODEL_WIDGET_NAME,
+    modelName
+  )
+}
+
+export async function selectVueAssetPromotedModel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  currentModelName: string,
+  modelName: string
+) {
+  await selectModelFromFormDropdown(
+    comfyPage,
+    comfyPage.vueNodes.getNodeByTitle(workflow.hostNodeTitle),
+    currentModelName,
+    modelName
+  )
+}
+
+export async function selectSectionComboPromotedModel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  modelName: string
+) {
+  const panel = await openHostNodeParametersPanel(comfyPage, workflow)
+  const combo = panel.contentArea.getByRole('combobox', {
+    name: PROMOTED_MODEL_WIDGET_NAME,
+    exact: true
+  })
+  await combo.click()
+  await comfyPage.page
+    .getByRole('option', { name: modelName, exact: true })
+    .click()
+}
+
+export async function selectSectionAssetPromotedModel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  currentModelName: string,
+  modelName: string
+) {
+  const panel = await openHostNodeParametersPanel(comfyPage, workflow)
+  await selectModelFromFormDropdown(
+    comfyPage,
+    panel.contentArea,
+    currentModelName,
+    modelName
+  )
+}
+
+export async function setLegacyPromotedComboModel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  modelName: string
+) {
+  await comfyPage.page.evaluate(
+    ({ hostNodeId, widgetName, value }) => {
+      type LegacyPromotedWidget = {
+        name?: string
+        value?: unknown
+        callback?: (value: string) => void
+        setValue?: (
+          value: string,
+          options: {
+            e: PointerEvent
+            node: unknown
+            canvas: unknown
+          }
+        ) => void
+      }
+      type LegacyPromotedNode = {
+        onWidgetChanged?: (
+          name: string,
+          newValue: string,
+          oldValue: unknown,
+          widget: LegacyPromotedWidget
+        ) => void
+        widgets?: LegacyPromotedWidget[]
+      }
+      type LegacyPromotedGraph = {
+        getNodeById: (nodeId: number) => LegacyPromotedNode | undefined
+      }
+
+      const currentGraph = window.app?.graph as LegacyPromotedGraph | undefined
+      const hostNode: LegacyPromotedNode | undefined =
+        currentGraph?.getNodeById(hostNodeId)
+      if (!hostNode) {
+        throw new Error(`Expected subgraph host node ${hostNodeId}`)
+      }
+
+      const widget = hostNode.widgets?.find(
+        (entry) => entry.name === widgetName
+      ) as LegacyPromotedWidget | undefined
+      if (!widget) {
+        throw new Error(`Expected host ${widgetName} widget`)
+      }
+
+      const oldValue = widget.value
+      if (widget.setValue) {
+        widget.setValue(value, {
+          e: new PointerEvent('pointerup'),
+          node: hostNode,
+          canvas: window.app!.canvas
+        })
+        return
+      }
+
+      widget.value = value
+      widget.callback?.(value)
+      hostNode.onWidgetChanged?.(
+        widget.name ?? widgetName,
+        value,
+        oldValue,
+        widget
+      )
+    },
+    {
+      hostNodeId: workflow.hostNodeId,
+      widgetName: PROMOTED_MODEL_WIDGET_NAME,
+      value: modelName
+    }
+  )
+}
+
+export async function selectLegacyPromotedAssetModel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  assetId: string
+) {
+  await clickLegacyHostPromotedWidget(comfyPage, workflow)
+
+  const modal = comfyPage.page.locator(
+    '[data-component-id="AssetBrowserModal"]'
+  )
+  await expect(modal).toBeVisible()
+  const assetCard = modal.locator(`[data-asset-id="${assetId}"]`)
+  await expect(assetCard).toBeVisible()
+  await assetCard.getByRole('button', { name: 'Use', exact: true }).click()
+  await expect(modal).toBeHidden()
+}
+
+export async function expectResolvedPromotedModelSuppressesStaleInteriorErrors(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  expectedStaleInteriorWidgets: Array<{
+    subgraphNodeIdToEnter: string
+    nodeTitle: string
+  }>,
+  resolvedModelName: string,
+  staleModelName: string
+) {
+  await loadPromotedMissingModelWithHostValues(comfyPage, workflow, {
+    [workflow.hostNodeId]: resolvedModelName
+  })
+
+  const promotedModelCombo = comfyPage.vueNodes
+    .getNodeByTitle(workflow.hostNodeTitle)
+    .getByRole('combobox', { name: PROMOTED_MODEL_WIDGET_NAME, exact: true })
+  await expect(promotedModelCombo).toContainText(resolvedModelName)
+  await expectNoMissingModelUi(comfyPage)
+
+  for (const step of expectedStaleInteriorWidgets) {
+    await enterSubgraphForStaleInteriorCheck(
+      comfyPage,
+      step.subgraphNodeIdToEnter
+    )
+    await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+    await comfyPage.nextFrame()
+
+    const node = comfyPage.vueNodes.getNodeByTitle(step.nodeTitle)
+    await expect(node).toBeVisible()
+
+    const staleCombo = node.getByRole('combobox', {
+      name: PROMOTED_MODEL_WIDGET_NAME,
+      exact: true
+    })
+    await expect(
+      staleCombo,
+      `${step.nodeTitle} should expose the stale linked interior widget`
+    ).toBeDisabled()
+    await expect(
+      staleCombo,
+      `${step.nodeTitle} should keep the stale interior value`
+    ).toContainText(staleModelName)
+    await expectNoMissingModelUi(comfyPage)
+  }
+}
+
+async function openHostNodeParametersPanel(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow
+): Promise<PropertiesPanelHelper> {
+  await comfyPage.vueNodes.selectNode(String(workflow.hostNodeId))
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+  await expect(panel.getTab('Parameters')).toBeVisible()
+  await panel.switchToTab('Parameters')
+  return panel
+}
+
+async function loadPromotedMissingModelWithHostValues(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow,
+  hostValues: Record<number, string>
+) {
+  const graphData = readPromotedMissingModelWorkflow(workflow.workflowName)
+  for (const [hostNodeId, value] of Object.entries(hostValues)) {
+    setRootHostWidgetValue(graphData, Number(hostNodeId), value)
+  }
+
+  await comfyPage.workflow.loadGraphData(graphData)
+  await comfyPage.vueNodes.waitForNodes()
+}
+
+function readPromotedMissingModelWorkflow(workflowName: string) {
+  return JSON.parse(
+    readFileSync(assetPath(`${workflowName}.json`), 'utf-8')
+  ) as RootWorkflowData
+}
+
+function setRootHostWidgetValue(
+  graphData: RootWorkflowData,
+  hostNodeId: number,
+  value: string
+) {
+  const hostNode = graphData.nodes?.find(
+    (node) => Number(node.id) === hostNodeId
+  )
+  if (!hostNode) throw new Error(`Expected host node ${hostNodeId}`)
+
+  if (Array.isArray(hostNode.widgets_values)) {
+    hostNode.widgets_values[0] = value
+    return
+  }
+
+  hostNode.widgets_values = {
+    ...(hostNode.widgets_values ?? {}),
+    [PROMOTED_MODEL_WIDGET_NAME]: value
+  }
+}
+
+async function selectModelFromFormDropdown(
+  comfyPage: ComfyPage,
+  root: Locator,
+  currentModelName: string,
+  nextModelName: string
+) {
+  const trigger = root
+    .getByRole('button', { name: currentModelName, exact: true })
+    .first()
+  await expect(trigger).toBeVisible()
+  await trigger.click()
+
+  const menu = comfyPage.page.getByTestId('form-dropdown-menu')
+  await expect(menu).toBeVisible()
+  await menu.getByText(nextModelName, { exact: true }).click()
+  await expect(menu).toBeHidden()
+}
+
+async function clickLegacyHostPromotedWidget(
+  comfyPage: ComfyPage,
+  workflow: PromotedMissingModelWorkflow
+) {
+  const hostNode = await comfyPage.nodeOps.getNodeRefById(workflow.hostNodeId)
+  await hostNode.centerOnNode()
+  const widget = await hostNode.getWidgetByName(PROMOTED_MODEL_WIDGET_NAME)
+  await widget.click()
+}
+
+async function enterSubgraphForStaleInteriorCheck(
+  comfyPage: ComfyPage,
+  nodeId: string
+) {
+  const numericNodeId = Number(nodeId)
+  if (Number.isNaN(numericNodeId)) {
+    throw new Error(`Expected numeric subgraph node id, got ${nodeId}`)
+  }
+
+  const normalizedNodeId = String(numericNodeId)
+  const enterButton =
+    comfyPage.vueNodes.getSubgraphEnterButton(normalizedNodeId)
+  if ((await enterButton.count()) > 0) {
+    await comfyPage.vueNodes.enterSubgraph(normalizedNodeId)
+    return
+  }
+
+  await comfyPage.page.evaluate((targetNodeId) => {
+    const graph = window.app?.canvas.graph
+    const node = graph?.getNodeById(targetNodeId)
+    if (!node?.isSubgraphNode()) {
+      throw new Error(`Expected visible subgraph node ${targetNodeId}`)
+    }
+    window.app!.canvas.setGraph(node.subgraph)
+  }, toNodeId(normalizedNodeId))
+  await comfyPage.nextFrame()
+  await comfyPage.vueNodes.waitForNodes()
+}

browser_tests/fixtures/utils/promotedWidgets.ts

@@ -1,4 +1,5 @@
 import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
+import { toNodeId } from '@/types/nodeId'
 
 import { parsePreviewExposures } from '@/core/schemas/previewExposureSchema'
 import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
@@ -44,6 +45,7 @@ export async function getPromotedWidgets(
   comfyPage: ComfyPage,
   nodeId: string
 ): Promise<PromotedWidgetEntry[]> {
+  const localNodeId = toNodeId(nodeId)
   const { widgetSources, previewExposures } = await comfyPage.page.evaluate(
     (id) => {
       const node = window.app!.canvas.graph!.getNodeById(id)
@@ -91,7 +93,7 @@ export async function getPromotedWidgets(
       })
       return { widgetSources, previewExposures }
     },
-    nodeId
+    localNodeId
   )
 
   const exposures = isNodeProperty(previewExposures)

browser_tests/fixtures/utils/workspaceMocks.ts

@@ -0,0 +1,68 @@
+import type { Page } from '@playwright/test'
+
+import type {
+  Member,
+  WorkspaceWithRole
+} from '@/platform/workspace/api/workspaceApi'
+
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+
+export function workspace(
+  type: 'personal' | 'team',
+  role: 'owner' | 'member'
+): WorkspaceWithRole {
+  return {
+    id: `ws-${type}`,
+    name: type === 'team' ? 'My Team' : 'Personal Workspace',
+    type,
+    role,
+    created_at: '2026-01-01T00:00:00Z',
+    joined_at: '2026-01-01T00:00:00Z'
+  }
+}
+
+export function member(
+  overrides: Partial<Member> & Pick<Member, 'email' | 'role'>
+): Member {
+  return {
+    id: `user-${overrides.email}`,
+    name: overrides.email,
+    joined_at: '2026-01-01T00:00:00Z',
+    is_original_owner: false,
+    ...overrides
+  }
+}
+
+/**
+ * Stub the workspace resolution + members list so the cloud app boots into the
+ * given workspace with the given roster (drives the original-owner gate).
+ */
+export async function mockWorkspace(
+  page: Page,
+  ws: WorkspaceWithRole,
+  members: Member[]
+) {
+  await page.route('**/api/workspaces', async (route) => {
+    if (route.request().method() !== 'GET') return route.fallback()
+    await route.fulfill(jsonRoute({ workspaces: [ws] }))
+  })
+  await page.route('**/api/auth/token', (r) =>
+    r.fulfill(
+      jsonRoute({
+        token: 'mock-workspace-token',
+        expires_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+        workspace: { id: ws.id, name: ws.name, type: ws.type },
+        role: ws.role,
+        permissions: []
+      })
+    )
+  )
+  await page.route('**/api/workspace/members**', (r) =>
+    r.fulfill(
+      jsonRoute({
+        members,
+        pagination: { offset: 0, limit: 50, total: members.length }
+      })
+    )
+  )
+}

browser_tests/tests/billingFacadeConsumers.spec.ts

@@ -0,0 +1,194 @@
+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 type {
+  BillingBalanceResponse,
+  BillingStatusResponse
+} from '@/platform/workspace/api/workspaceApi'
+
+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`. The facade
+ * selects its backend by flag: `team_workspaces_enabled: false` routes through
+ * the legacy `/customers/*` endpoints, while `true` routes a personal workspace
+ * through the workspace `/api/billing/*` endpoints. Both shapes are 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.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+const jsonRoute = (body: unknown) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+// The workspace `/api/billing/status` shape mirrors the legacy subscription
+// status; map the fields so a single test fixture drives both backends.
+const toWorkspaceStatus = (
+  s: CloudSubscriptionStatusResponse
+): BillingStatusResponse => ({
+  is_active: s.is_active ?? false,
+  subscription_tier: s.subscription_tier ?? undefined,
+  subscription_duration: s.subscription_duration ?? undefined,
+  renewal_date: s.renewal_date ?? undefined,
+  cancel_at: s.end_date ?? undefined,
+  has_funds: s.has_fund ?? true
+})
+
+const mockBalance: BillingBalanceResponse = {
+  amount_micros: 6000, // -> 12,660 credits
+  currency: 'usd',
+  effective_balance_micros: 6000
+}
+
+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.
+  await page.route('**/api/workspaces', (r) =>
+    r.fulfill(
+      jsonRoute({
+        workspaces: [
+          {
+            id: 'ws-personal',
+            name: 'Personal Workspace',
+            type: 'personal',
+            role: 'owner'
+          }
+        ]
+      })
+    )
+  )
+
+  // Legacy backend (team_workspaces_enabled: false).
+  await page.route('**/customers/cloud-subscription-status', (r) =>
+    r.fulfill(jsonRoute(subscriptionStatus))
+  )
+  await page.route('**/customers/balance', (r) =>
+    r.fulfill(jsonRoute(mockBalance))
+  )
+
+  // Workspace backend (team_workspaces_enabled: true) — a personal workspace
+  // now routes through `/api/billing/*`.
+  await page.route('**/api/billing/status', (r) =>
+    r.fulfill(jsonRoute(toWorkspaceStatus(subscriptionStatus)))
+  )
+  await page.route('**/api/billing/balance', (r) =>
+    r.fulfill(jsonRoute(mockBalance))
+  )
+  await page.route('**/api/billing/plans', (r) =>
+    r.fulfill(jsonRoute({ plans: [] }))
+  )
+}
+
+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 routes a
+    // personal workspace through the workspace `/api/billing/*` endpoints. 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/cloud-asset-promoted-widget.spec.ts

@@ -10,9 +10,10 @@ import {
   STABLE_CHECKPOINT_2
 } from '@e2e/fixtures/data/assetFixtures'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { toNodeId } from '@/types/nodeId'
 
 const WORKFLOW = 'missing/missing_model_promoted_widget'
-const HOST_NODE_ID = 2
+const HOST_NODE_ID = toNodeId(2)
 const WIDGET_NAME = 'ckpt_name'
 const SELECTED_MODEL = STABLE_CHECKPOINT_2.name
 

browser_tests/tests/cloudSurveyGate.spec.ts

@@ -4,8 +4,7 @@ import type { Page } from '@playwright/test'
 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'
+import { bootCloud, mockCloudBoot } from '@e2e/fixtures/utils/cloudBootMocks'
 
 /**
  * getSurveyCompletedStatus fails safe: a transient 401 on `/` must not bounce a
@@ -16,51 +15,12 @@ import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
  */
 const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
 
-function jsonRoute(body: unknown) {
-  return {
-    status: 200,
-    contentType: 'application/json',
-    body: JSON.stringify(body)
-  }
-}
-
-async function mockCloudBoot(page: Page) {
-  // `/api/features` is the remote-config source: production builds resolve
-  // `onboardingSurveyEnabled` from it (the `ff:` localStorage override is
-  // dev-only). Enable the survey so the gate is actually live.
-  await page.route('**/api/features', (r) =>
-    r.fulfill(
-      jsonRoute({ onboarding_survey_enabled: true } satisfies 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' }
-      })
-    )
-  )
-  // Cloud user status (getUserCloudStatus) — an active account so the gate
-  // proceeds to the survey check instead of bouncing back to login.
-  await page.route('**/api/user', (r) =>
-    r.fulfill(jsonRoute({ status: 'active' }))
-  )
-  await page.route('**/api/settings', (r) => r.fulfill(jsonRoute({})))
-  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([])))
-}
+// `/api/features` is the remote-config source: production builds resolve
+// `onboardingSurveyEnabled` from it (the `ff:` localStorage override is
+// dev-only). Enable the survey so the gate is actually live.
+const BOOT_FEATURES = {
+  onboarding_survey_enabled: true
+} satisfies RemoteConfig
 
 // Genuine "not completed": the cloud backend returns 404 for a survey key that
 // was never stored. This is the response that must still route to the survey.
@@ -89,22 +49,13 @@ async function mockSurveyTransient401(page: Page) {
   )
 }
 
-async function bootCloud(page: Page) {
-  const auth = new CloudAuthHelper(page)
-  await auth.mockAuth()
-  // Pre-select the mock user to skip the user-select screen.
-  await page.addInitScript(() => {
-    localStorage.setItem('Comfy.userId', 'test-user-e2e')
-  })
-}
-
 test.describe('Cloud onboarding survey gate', { tag: '@cloud' }, () => {
   test('a transient 401 on the survey check does not bounce a working user to the survey', async ({
     page
   }) => {
-    test.setTimeout(60_000)
+    test.slow()
 
-    await mockCloudBoot(page)
+    await mockCloudBoot(page, { features: BOOT_FEATURES })
     await mockSurveyTransient401(page)
     await bootCloud(page)
 
@@ -122,9 +73,9 @@ test.describe('Cloud onboarding survey gate', { tag: '@cloud' }, () => {
   test('a not-completed (404) user landing on / is routed to the survey', async ({
     page
   }) => {
-    test.setTimeout(60_000)
+    test.slow()
 
-    await mockCloudBoot(page)
+    await mockCloudBoot(page, { features: BOOT_FEATURES })
     await mockSurveyNotCompleted(page)
     await bootCloud(page)
 

browser_tests/tests/currentUserPopoverCredits.spec.ts

@@ -2,7 +2,10 @@ 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 {
+  BillingStatusResponse,
+  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'
@@ -51,6 +54,20 @@ const mockSubscriptionStatus: CloudSubscriptionStatusResponse = {
   end_date: FUTURE_DATE
 }
 
+// With team workspaces enabled, the facade routes a personal workspace through
+// `/api/billing/*`. The cancelled-but-active state maps to `is_active: true`
+// with `subscription_status: 'canceled'`; a paid tier keeps "Add credits"
+// visible (free tier would swap it for "Upgrade to add credits").
+const mockBillingStatus: BillingStatusResponse = {
+  is_active: true,
+  subscription_status: 'canceled',
+  subscription_tier: 'PRO',
+  subscription_duration: 'MONTHLY',
+  has_funds: true,
+  cancel_at: FUTURE_DATE,
+  renewal_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 = {
@@ -105,6 +122,32 @@ const test = comfyPageFixture.extend({
       })
     )
 
+    // Flag-on (team workspaces enabled) routes a personal workspace through the
+    // workspace billing endpoints, so the popover sources its data from here.
+    await page.route('**/api/billing/status', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockBillingStatus)
+      })
+    )
+
+    await page.route('**/api/billing/balance', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockBalance)
+      })
+    )
+
+    await page.route('**/api/billing/plans', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ plans: [] })
+      })
+    )
+
     await use(page)
   }
 })

browser_tests/tests/dialogs/creditsTile.spec.ts

@@ -0,0 +1,264 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+import type { BillingStatusResponse } from '@/platform/workspace/api/workspaceApi'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+
+// Drives a raw `page` (not the `comfyPage` fixture) so the cloud app boots
+// against fully mocked endpoints; `comfyPage` would try to reach the OSS
+// devtools backend during setup.
+
+/**
+ * Credits tile (Settings ▸ Workspace ▸ Plan & Credits) — DES-247 / FE-964.
+ *
+ * The credits tile only lives inside the authenticated cloud app, which the
+ * shared `comfyPage` fixture can't boot (it expects the OSS devtools backend).
+ * Instead this drives a raw page: mock Firebase auth + every boot endpoint so
+ * the cloud app initializes against fully stubbed data. With team workspaces
+ * enabled the facade routes a personal workspace through the workspace
+ * `/api/billing/*` endpoints (mocked with an active Pro subscription); the
+ * legacy `/customers/*` shapes are mocked too for the flag-off path. The tile
+ * should then render its total / progress bar / monthly+additional breakdown /
+ * add-credits.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+const jsonRoute = (body: unknown) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+// Legacy `/customers/balance` and workspace `/api/billing/balance` share the
+// same response shape, so one body fulfills both endpoints.
+const balanceRoute = (balance: {
+  amount: number
+  monthly: number
+  prepaid: number
+}) =>
+  jsonRoute({
+    amount_micros: balance.amount,
+    currency: 'usd',
+    effective_balance_micros: balance.amount,
+    cloud_credit_balance_micros: balance.monthly,
+    prepaid_balance_micros: balance.prepaid
+  })
+
+// 6000 -> 12,660 total; 5000 -> 10,550 monthly remaining; 1000 -> 2,110 extra.
+const DEFAULT_BALANCE = { amount: 6000, monthly: 5000, prepaid: 1000 }
+
+const mockBillingStatus: BillingStatusResponse = {
+  is_active: true,
+  subscription_tier: 'PRO',
+  subscription_duration: 'MONTHLY',
+  renewal_date: '2099-02-20T12:00:00Z',
+  has_funds: true
+}
+
+async function mockCloudBoot(page: Page) {
+  // Frontend-origin boot endpoints (proxied to the backend in production).
+  // `/api/features` is the remote-config source: production builds resolve
+  // `teamWorkspacesEnabled` from it (the `ff:` localStorage override is
+  // dev-only), and the flag gates the Workspace settings panel.
+  await page.route('**/api/features', (r) =>
+    r.fulfill(
+      jsonRoute({ team_workspaces_enabled: true } satisfies RemoteConfig)
+    )
+  )
+  await page.route('**/api/system_stats', (r) =>
+    r.fulfill(jsonRoute(mockSystemStats))
+  )
+  // Include the mock user so the multi-user select screen auto-selects it
+  // (paired with the `Comfy.userId` localStorage seed below).
+  await page.route('**/api/users', (r) =>
+    r.fulfill(
+      jsonRoute({
+        storage: 'server',
+        migrated: true,
+        users: { 'test-user-e2e': 'E2E Test User' }
+      })
+    )
+  )
+  // Non-empty settings with a completed tutorial keep the cloud app from
+  // booting as a new user, whose Workflow Templates dialog would otherwise
+  // auto-open and intercept the Settings click behind its modal backdrop.
+  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.
+  await page.route('**/api/workspaces', (r) =>
+    r.fulfill(
+      jsonRoute({
+        workspaces: [
+          {
+            id: 'ws-personal',
+            name: 'Personal Workspace',
+            type: 'personal',
+            role: 'owner'
+          }
+        ]
+      })
+    )
+  )
+
+  // Legacy billing (flag-off path, api.comfy.org/customers/*).
+  await page.route('**/customers/cloud-subscription-status', (r) =>
+    r.fulfill(
+      jsonRoute({
+        is_active: true,
+        subscription_tier: 'PRO',
+        subscription_duration: 'MONTHLY',
+        renewal_date: '2099-02-20T12:00:00Z',
+        end_date: null
+      })
+    )
+  )
+  await page.route('**/customers/balance', (r) =>
+    r.fulfill(balanceRoute(DEFAULT_BALANCE))
+  )
+
+  // Workspace billing (flag-on path) — a personal workspace now routes through
+  // `/api/billing/*`.
+  await page.route('**/api/billing/status', (r) =>
+    r.fulfill(jsonRoute(mockBillingStatus))
+  )
+  await page.route('**/api/billing/balance', (r) =>
+    r.fulfill(balanceRoute(DEFAULT_BALANCE))
+  )
+  await page.route('**/api/billing/plans', (r) =>
+    r.fulfill(jsonRoute({ plans: [] }))
+  )
+}
+
+async function mockBalance(
+  page: Page,
+  balance: { amount: number; monthly: number; prepaid: number }
+) {
+  await page.unroute('**/customers/balance')
+  await page.unroute('**/api/billing/balance')
+  await page.route('**/customers/balance', (r) =>
+    r.fulfill(balanceRoute(balance))
+  )
+  await page.route('**/api/billing/balance', (r) =>
+    r.fulfill(balanceRoute(balance))
+  )
+}
+
+/** Boots the mocked cloud app and opens Settings ▸ Workspace ▸ Plan & Credits. */
+async function openPlanAndCredits(page: Page) {
+  const auth = new CloudAuthHelper(page)
+  await auth.mockAuth()
+
+  // Pre-select the mock user to skip the user-select screen.
+  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
+  })
+
+  // Open Settings ▸ Workspace.
+  await page
+    .getByRole('button', { name: /^Settings/ })
+    .first()
+    .click()
+  const dialog = page.getByTestId('settings-dialog')
+  await expect(dialog).toBeVisible()
+  await dialog.locator('nav').getByRole('button', { name: 'Workspace' }).click()
+
+  return dialog.getByRole('main')
+}
+
+test.describe('Credits tile (Plan & Credits)', { tag: '@cloud' }, () => {
+  test('renders the unified tile with breakdown and add-credits', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page)
+
+    const content = await openPlanAndCredits(page)
+
+    // Total + remaining suffix (Pro monthly allowance = 21,100; remaining
+    // 10,550 -> used 10,550).
+    await expect(content.getByText('Total credits')).toBeVisible()
+    await expect(content.getByText('12,660')).toBeVisible()
+
+    // Monthly usage bar header + used / left-of-total labels.
+    await expect(content.getByText('Monthly', { exact: true })).toBeVisible()
+    await expect(content.getByText(/Refills Feb/)).toBeVisible()
+    await expect(content.getByText('10,550 used')).toBeVisible()
+    await expect(content.getByText('10,550 left of 21,100')).toBeVisible()
+
+    // Additional credits row + subtitle.
+    await expect(content.getByText('Additional credits')).toBeVisible()
+    await expect(content.getByText('2,110')).toBeVisible()
+    await expect(content.getByText('Used after monthly runs out')).toBeVisible()
+
+    // Permission-gated add-credits action (personal owner can top up).
+    await expect(
+      content.getByRole('button', { name: 'Add credits' })
+    ).toBeVisible()
+
+    // Narrow container (DES-247 responsive variants): drop the used/remaining
+    // labels and the breakdown subtitle, compact the monthly summary numbers.
+    await page.setViewportSize({ width: 360, height: 800 })
+    await expect(content.getByText('10,550 used')).toBeHidden()
+    await expect(content.getByText('remaining', { exact: true })).toBeHidden()
+    await expect(content.getByText('Used after monthly runs out')).toBeHidden()
+    await expect(content.getByText('10,550 left of 21,100')).toBeHidden()
+    await expect(content.getByText('11K left of 21K')).toBeVisible()
+  })
+
+  test('renders the depleted-credit empty states', async ({ page }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page)
+    // Monthly allowance fully spent; additional credits keep generation going.
+    await mockBalance(page, { amount: 1000, monthly: 0, prepaid: 1000 })
+
+    const content = await openPlanAndCredits(page)
+
+    // 0-monthly state: depletion notice + IN USE badge on additional credits.
+    await expect(
+      content.getByText('Monthly credits are used up. Refills Feb 20')
+    ).toBeVisible()
+    await expect(
+      content.getByText("You're now spending additional credits.")
+    ).toBeVisible()
+    await expect(content.getByText('In use')).toBeVisible()
+    await expect(content.getByText('0 left of 21,100')).toBeVisible()
+
+    // Drain the remaining additional credits and refresh the tile: the
+    // out-of-credits notice takes over and the badge drops.
+    await mockBalance(page, { amount: 0, monthly: 0, prepaid: 0 })
+    await content.getByRole('button', { name: 'Refresh credits' }).click()
+
+    await expect(
+      content.getByText("You're out of credits. Credits refill Feb 20")
+    ).toBeVisible()
+    await expect(
+      content.getByText('Add more credits to continue generating.')
+    ).toBeVisible()
+    await expect(content.getByText('In use')).toBeHidden()
+    await expect(
+      content.getByRole('button', { name: 'Add credits' })
+    ).toBeVisible()
+  })
+})

browser_tests/tests/dialogs/memberRoleChange.spec.ts

@@ -0,0 +1,264 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+import type { Member } from '@/platform/workspace/api/workspaceApi'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  CREATOR,
+  MEMBER_JANE,
+  MEMBER_JOHN,
+  VIEWER
+} from '@e2e/fixtures/data/cloudWorkspace'
+import { CloudWorkspaceMockHelper } from '@e2e/fixtures/helpers/CloudWorkspaceMockHelper'
+
+// Drives a raw `page` (not the `comfyPage` fixture) so the cloud app boots
+// against fully mocked endpoints; `comfyPage` would try to reach the OSS
+// devtools backend during setup.
+
+/**
+ * Member role change (Settings ▸ Workspace ▸ Members) — Figma 2993-15512.
+ *
+ * The viewer is a promoted owner (not the workspace creator), so the spec can
+ * distinguish the creator guard from the self guard: the creator row and the
+ * viewer's own row hide the row menu, every other row exposes
+ * "Change role ›" (Owner / Member) plus "Remove member". Promoting a member
+ * sends PATCH /api/workspace/members/:id {role}, flips the Role column,
+ * re-sorts the row under the creator, and the promoted owner stays demotable.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+async function openMembersTab(page: Page): Promise<Locator> {
+  await page.goto(APP_URL)
+  await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+    timeout: 45_000
+  })
+
+  await page
+    .getByRole('button', { name: /^Settings/ })
+    .first()
+    .click()
+  const dialog = page.getByTestId('settings-dialog')
+  await expect(dialog).toBeVisible()
+  await dialog.locator('nav').getByRole('button', { name: 'Workspace' }).click()
+
+  const content = dialog.getByRole('main')
+  await content.getByRole('tab', { name: /Members/ }).click()
+  await expect(content.getByText('4 of 30 members')).toBeVisible()
+  return content
+}
+
+function memberRow(content: Locator, email: string): Locator {
+  return content
+    .locator('div.grid')
+    .filter({ has: content.page().getByText(email, { exact: true }) })
+}
+
+function menuButton(row: Locator): Locator {
+  return row.getByRole('button', { name: 'More Options' })
+}
+
+// Reka submenus open on real pointer travel or keyboard; Playwright's
+// synthetic hover doesn't trigger the pointermove handler, so drive the
+// subtrigger with ArrowRight instead.
+async function openChangeRoleSubmenu(page: Page) {
+  const trigger = page.getByRole('menuitem', { name: 'Change role' })
+  await expect(trigger).toBeVisible()
+  await trigger.press('ArrowRight')
+  await expect(
+    page.getByRole('menuitemradio', { name: 'Owner', exact: true })
+  ).toBeVisible()
+}
+
+test.describe('Member role change (Members tab)', { tag: '@cloud' }, () => {
+  test.describe.configure({ timeout: 60_000 })
+
+  test('row menus respect creator and self guards', async ({ page }) => {
+    await new CloudWorkspaceMockHelper(page).setup()
+    const content = await openMembersTab(page)
+
+    // US8/US9 — no row actions on the creator row (Liz) nor on the viewer's
+    // own row; the two plain members each expose a menu.
+    await expect(
+      menuButton(memberRow(content, MEMBER_JOHN.email))
+    ).toBeVisible()
+    await expect(
+      menuButton(memberRow(content, MEMBER_JANE.email))
+    ).toBeVisible()
+    await expect(menuButton(memberRow(content, CREATOR.email))).toHaveCount(0)
+    await expect(menuButton(memberRow(content, VIEWER.email))).toHaveCount(0)
+
+    // US1/US12 — the row menu exposes Change role and the FE-768 remove flow.
+    await menuButton(memberRow(content, MEMBER_JANE.email)).click()
+    await expect(
+      page.getByRole('menuitem', { name: 'Change role' })
+    ).toBeVisible()
+    await page.getByRole('menuitem', { name: 'Remove member' }).click()
+    await expect(page.getByText('Remove this member?')).toBeVisible()
+  })
+
+  test('selecting the current role is a no-op', async ({ page }) => {
+    const state = await new CloudWorkspaceMockHelper(page).setup()
+    const content = await openMembersTab(page)
+
+    const janeRow = memberRow(content, MEMBER_JANE.email)
+    await menuButton(janeRow).click()
+    await openChangeRoleSubmenu(page)
+
+    // The current role is a checked radio item so assistive tech can announce
+    // which role is active.
+    await expect(
+      page.getByRole('menuitemradio', { name: 'Member', exact: true })
+    ).toHaveAttribute('aria-checked', 'true')
+    await expect(
+      page.getByRole('menuitemradio', { name: 'Owner', exact: true })
+    ).toHaveAttribute('aria-checked', 'false')
+
+    await page
+      .getByRole('menuitemradio', { name: 'Member', exact: true })
+      .click()
+
+    await expect(page.getByRole('heading', { name: /an owner\?/ })).toHaveCount(
+      0
+    )
+    expect(state.patches).toHaveLength(0)
+  })
+
+  test('promote dialog shows the Figma copy and cancelling keeps the role', async ({
+    page
+  }) => {
+    const state = await new CloudWorkspaceMockHelper(page).setup()
+    const content = await openMembersTab(page)
+
+    const janeRow = memberRow(content, MEMBER_JANE.email)
+    await menuButton(janeRow).click()
+    await openChangeRoleSubmenu(page)
+    await page
+      .getByRole('menuitemradio', { name: 'Owner', exact: true })
+      .click()
+
+    await expect(
+      page.getByRole('heading', { name: 'Make Jane an owner?' })
+    ).toBeVisible()
+    await expect(page.getByText("They'll be able to:")).toBeVisible()
+    await expect(page.getByText('Add additional credits')).toBeVisible()
+    await expect(
+      page.getByText('Manage members, payment methods, and workspace settings')
+    ).toBeVisible()
+    await expect(
+      page.getByText(
+        'Promote and demote other owners (except the workspace creator).'
+      )
+    ).toBeVisible()
+
+    await page.getByRole('button', { name: 'Cancel', exact: true }).click()
+    await expect(
+      page.getByRole('heading', { name: 'Make Jane an owner?' })
+    ).toHaveCount(0)
+    await expect(janeRow.getByText('Member', { exact: true })).toBeVisible()
+    expect(state.patches).toHaveLength(0)
+  })
+
+  test('promoting a member re-sorts the row under the creator and stays demotable', async ({
+    page
+  }) => {
+    const state = await new CloudWorkspaceMockHelper(page).setup()
+    const content = await openMembersTab(page)
+
+    const emails = content.getByText(/@test\.comfy\.org/)
+    await expect(emails).toHaveText([
+      CREATOR.email,
+      VIEWER.email,
+      MEMBER_JOHN.email,
+      MEMBER_JANE.email
+    ])
+
+    const janeRow = memberRow(content, MEMBER_JANE.email)
+    await menuButton(janeRow).click()
+    await openChangeRoleSubmenu(page)
+    await page
+      .getByRole('menuitemradio', { name: 'Owner', exact: true })
+      .click()
+    await page.getByRole('button', { name: 'Make owner' }).click()
+
+    await expect(page.getByText('Role updated')).toBeVisible()
+    await expect(janeRow.getByText('Owner', { exact: true })).toBeVisible()
+    await expect(emails).toHaveText([
+      CREATOR.email,
+      VIEWER.email,
+      MEMBER_JANE.email,
+      MEMBER_JOHN.email
+    ])
+    expect(state.patches).toEqual([
+      {
+        url: expect.stringContaining('/api/workspace/members/u-jane'),
+        role: 'owner'
+      }
+    ])
+
+    // The promoted owner keeps its row menu (still demotable).
+    await expect(menuButton(janeRow)).toBeVisible()
+  })
+
+  test('demoting an owner returns them to member', async ({ page }) => {
+    const ownerJane: Member = { ...MEMBER_JANE, role: 'owner' }
+    const state = await new CloudWorkspaceMockHelper(page).setup([
+      CREATOR,
+      VIEWER,
+      ownerJane,
+      MEMBER_JOHN
+    ])
+    const content = await openMembersTab(page)
+
+    const janeRow = memberRow(content, MEMBER_JANE.email)
+    await expect(janeRow.getByText('Owner', { exact: true })).toBeVisible()
+
+    await menuButton(janeRow).click()
+    await openChangeRoleSubmenu(page)
+    await page
+      .getByRole('menuitemradio', { name: 'Member', exact: true })
+      .click()
+    await expect(
+      page.getByRole('heading', { name: 'Demote Jane to member?' })
+    ).toBeVisible()
+    await expect(page.getByText("They'll lose admin access.")).toBeVisible()
+    await page.getByRole('button', { name: 'Demote to member' }).click()
+
+    await expect(janeRow.getByText('Member', { exact: true })).toBeVisible()
+    expect(state.patches).toEqual([
+      {
+        url: expect.stringContaining('/api/workspace/members/u-jane'),
+        role: 'member'
+      }
+    ])
+  })
+
+  test('failed role change keeps the dialog open with an error toast', async ({
+    page
+  }) => {
+    await new CloudWorkspaceMockHelper(page).setup()
+    // Override the member route so PATCH fails after boot succeeds.
+    await page.route('**/api/workspace/members/**', (route) =>
+      route.request().method() === 'PATCH'
+        ? route.fulfill({ status: 500, body: '{}' })
+        : route.fallback()
+    )
+    const content = await openMembersTab(page)
+
+    const janeRow = memberRow(content, MEMBER_JANE.email)
+    await menuButton(janeRow).click()
+    await openChangeRoleSubmenu(page)
+    await page
+      .getByRole('menuitemradio', { name: 'Owner', exact: true })
+      .click()
+    await page.getByRole('button', { name: 'Make owner' }).click()
+
+    // US10 — error toast, dialog stays open, role unchanged.
+    await expect(page.getByText('Failed to update role')).toBeVisible()
+    await expect(
+      page.getByRole('heading', { name: 'Make Jane an owner?' })
+    ).toBeVisible()
+    await page.getByRole('button', { name: 'Cancel', exact: true }).click()
+    await expect(janeRow.getByText('Member', { exact: true })).toBeVisible()
+  })
+})

browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts

@@ -0,0 +1,128 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+import type {
+  Member,
+  WorkspaceWithRole
+} from '@/platform/workspace/api/workspaceApi'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockBilling } from '@e2e/fixtures/utils/cloudBillingMocks'
+import { bootCloud, mockCloudBoot } from '@e2e/fixtures/utils/cloudBootMocks'
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+import {
+  member,
+  mockWorkspace,
+  workspace
+} from '@e2e/fixtures/utils/workspaceMocks'
+
+/**
+ * The `?pricing=` deep link opens the pricing table on app load, gated to the
+ * original owner (canManageSubscriptionLifecycle). Drives a raw `page` so the
+ * cloud app boots against fully mocked endpoints, like the survey-gate spec.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+// CloudAuthHelper.mockAuth() signs in as this email; the original-owner gate
+// matches it against the members self-row.
+const SELF_EMAIL = 'e2e@test.comfy.org'
+
+const BOOT_FEATURES = { team_workspaces_enabled: true } satisfies RemoteConfig
+// Disable the experimental Asset API: with it on (cloud default) the unmocked
+// asset endpoints 403 and workflow restore throws uncaught, aborting the
+// GraphCanvas onMounted chain before the deep-link loader.
+const BOOT_SETTINGS = { 'Comfy.Assets.UseAssetAPI': false }
+
+// The deep-link loader runs at the tail of GraphCanvas onMounted, so the boot
+// chain must not throw before it: a missing settings subpath, prompt exec_info,
+// or queue status each abort that chain.
+async function mockGraphBootExtras(page: Page) {
+  // Boot only reads these; fall back on any write so an unexpected POST/PUT
+  // surfaces instead of being masked by a blanket 200.
+  await page.route('**/api/settings/**', (route) => {
+    if (route.request().method() !== 'GET') return route.fallback()
+    return route.fulfill(jsonRoute({}))
+  })
+  await page.route('**/api/prompt', (route) => {
+    if (route.request().method() !== 'GET') return route.fallback()
+    return route.fulfill(jsonRoute({ exec_info: { queue_remaining: 0 } }))
+  })
+  await page.route('**/api/queue', (route) => {
+    if (route.request().method() !== 'GET') return route.fallback()
+    return route.fulfill(jsonRoute({ queue_running: [], queue_pending: [] }))
+  })
+}
+
+async function setupCloudApp(
+  page: Page,
+  ws: WorkspaceWithRole,
+  members: Member[]
+) {
+  await mockCloudBoot(page, {
+    features: BOOT_FEATURES,
+    settings: BOOT_SETTINGS
+  })
+  await mockGraphBootExtras(page)
+  await mockBilling(page)
+  await mockWorkspace(page, ws, members)
+  await bootCloud(page)
+}
+
+const pricingHeading = (page: Page) =>
+  page.getByRole('heading', { name: 'Choose a Plan' })
+
+test.describe('Pricing table deep link', { tag: '@cloud' }, () => {
+  test('opens the pricing table for a personal owner', async ({ page }) => {
+    test.slow()
+    await setupCloudApp(page, workspace('personal', 'owner'), [])
+
+    await page.goto(`${APP_URL}/?pricing=1`)
+
+    await expect(pricingHeading(page)).toBeVisible({ timeout: 45_000 })
+    await expect(page).not.toHaveURL(/[?&]pricing=/)
+  })
+
+  test('opens on the Team tab for ?pricing=team', async ({ page }) => {
+    test.slow()
+    await setupCloudApp(page, workspace('personal', 'owner'), [])
+
+    await page.goto(`${APP_URL}/?pricing=team`)
+
+    await expect(pricingHeading(page)).toBeVisible({ timeout: 45_000 })
+    await expect(
+      page.getByRole('button', { name: 'For Teams' })
+    ).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  test('opens for a team original owner', async ({ page }) => {
+    test.slow()
+    await setupCloudApp(page, workspace('team', 'owner'), [
+      member({ email: SELF_EMAIL, role: 'owner', is_original_owner: true })
+    ])
+
+    await page.goto(`${APP_URL}/?pricing=1`)
+
+    await expect(pricingHeading(page)).toBeVisible({ timeout: 45_000 })
+  })
+
+  test('is a silent no-op for a team member', async ({ page }) => {
+    test.slow()
+    await setupCloudApp(page, workspace('team', 'member'), [
+      member({
+        email: 'creator@test.comfy.org',
+        role: 'owner',
+        is_original_owner: true
+      }),
+      member({ email: SELF_EMAIL, role: 'member' })
+    ])
+
+    await page.goto(`${APP_URL}/?pricing=1`)
+
+    await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+      timeout: 45_000
+    })
+    await expect(page).not.toHaveURL(/[?&]pricing=/)
+    await expect(pricingHeading(page)).toBeHidden()
+  })
+})

browser_tests/tests/graph.spec.ts

@@ -1,5 +1,7 @@
 import { expect } from '@playwright/test'
 
+import { toNodeId } from '@/types/nodeId'
+
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -39,16 +41,22 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
 
     function evaluateGraph() {
-      return comfyPage.page.evaluate(() => {
+      const nodeIds = {
+        switchCfg: toNodeId(120),
+        ksampler85: toNodeId(85),
+        ksampler86: toNodeId(86)
+      }
+
+      return comfyPage.page.evaluate((nodeIds) => {
         const graph = window.app!.graph!
 
         const subgraph = graph.subgraphs.values().next().value
         if (!subgraph) return { error: 'No subgraph found' }
 
         // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
-        const switchCfg = subgraph.getNodeById(120)
-        const ksampler85 = subgraph.getNodeById(85)
-        const ksampler86 = subgraph.getNodeById(86)
+        const switchCfg = subgraph.getNodeById(nodeIds.switchCfg)
+        const ksampler85 = subgraph.getNodeById(nodeIds.ksampler85)
+        const ksampler86 = subgraph.getNodeById(nodeIds.ksampler86)
         if (!switchCfg || !ksampler85 || !ksampler86)
           return { error: 'Required nodes not found' }
 
@@ -74,7 +82,10 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
         // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
         let cfgLinkToNode85Count = 0
         for (const link of subgraph.links.values()) {
-          if (link.origin_id === 120 && link.target_id === 85)
+          if (
+            String(link.origin_id) === '120' &&
+            String(link.target_id) === '85'
+          )
             cfgLinkToNode85Count++
         }
 
@@ -89,7 +100,7 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
           switchOutputLinkCount,
           cfgLinkToNode85Count
         }
-      })
+      }, nodeIds)
     }
 
     // Poll graph state once, then assert all properties

browser_tests/tests/imageCompare.spec.ts

@@ -4,6 +4,9 @@ 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 { toNodeId } from '@/types/nodeId'
+
+const IMAGE_COMPARE_NODE_ID = toNodeId(1)
 
 test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -29,15 +32,15 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     }
   ) {
     await comfyPage.page.evaluate(
-      ({ value }) => {
-        const node = window.app!.graph.getNodeById(1)
+      ({ nodeId, value }) => {
+        const node = window.app!.graph.getNodeById(nodeId)
         const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
         if (widget) {
           widget.value = value
           widget.callback?.(value)
         }
       },
-      { value }
+      { nodeId: IMAGE_COMPARE_NODE_ID, value }
     )
     await comfyPage.nextFrame()
   }
@@ -450,11 +453,11 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test('ImageCompare node enforces minimum size', async ({ comfyPage }) => {
     const minWidth = 400
     const minHeight = 350
-    const size = await comfyPage.page.evaluate(() => {
-      const graphNode = window.app!.graph.getNodeById(1)
+    const size = await comfyPage.page.evaluate((nodeId) => {
+      const graphNode = window.app!.graph.getNodeById(nodeId)
       if (!graphNode?.size) return null
       return { width: graphNode.size[0], height: graphNode.size[1] }
-    })
+    }, IMAGE_COMPARE_NODE_ID)
     expect(
       size,
       'ImageCompare node id 1 must exist in loaded workflow graph'
@@ -600,15 +603,15 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   }) => {
     const url = createTestImageDataUrl('Legacy', '#c00')
     await comfyPage.page.evaluate(
-      ({ url }) => {
-        const node = window.app!.graph.getNodeById(1)
+      ({ nodeId, url }) => {
+        const node = window.app!.graph.getNodeById(nodeId)
         const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
         if (widget) {
           widget.value = url
           widget.callback?.(url)
         }
       },
-      { url }
+      { nodeId: IMAGE_COMPARE_NODE_ID, url }
     )
     await comfyPage.nextFrame()