fix(browser-tests): deep-clone TemplateHelper state to preserve immutability

Replace shallow array spreads with structuredClone-based deep copies in
the constructor, configure(), and getTemplates(). Previously nested
TemplateInfo objects were shared between caller-supplied input, helper
internal state, and getTemplates() return values, which could leak
mutation across tests.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/11837#discussion_r3176283430

.github/actions/ashby-pull/action.yaml

@@ -0,0 +1,23 @@
+name: Ashby Pull
+description: 'Refresh the apps/website Ashby roles snapshot from the Ashby job board API'
+inputs:
+  api_key:
+    description: 'Ashby API key (WEBSITE_ASHBY_API_KEY).'
+    required: true
+  job_board_name:
+    description: 'Ashby job board name (WEBSITE_ASHBY_JOB_BOARD_NAME).'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    # Note: this action assumes the frontend repo is checked out at the workspace root.
+
+    - name: Setup frontend
+      uses: ./.github/actions/setup-frontend
+
+    - name: Refresh Ashby snapshot
+      shell: bash
+      env:
+        WEBSITE_ASHBY_API_KEY: ${{ inputs.api_key }}
+        WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ inputs.job_board_name }}
+      run: pnpm --filter @comfyorg/website ashby:refresh-snapshot

.github/actions/changes-filter/action.yaml

@@ -0,0 +1,87 @@
+# Outputs default to 'true' for non-pull_request events (push, merge_group):
+# granular path filtering is a PR-only optimization. This avoids the silent
+# skip footgun where a job gated on e.g. `app-website-changes == 'true'`
+# would never run on push.
+#
+# Shared dependency files (root package.json, pnpm-lock.yaml,
+# pnpm-workspace.yaml) are folded into every app-* and packages-changes
+# output so a lockfile bump correctly invalidates each granular gate. They
+# are NOT folded into docs-changes.
+#
+# Two paths-filter steps are needed because predicate-quantifier=every is
+# required for the negated globs in `should-run` but breaks multi-pattern
+# OR filters like `docs:` and `deps:`.
+#
+# Requires the caller to have checked out the repository.
+
+name: 'Detect Path Changes'
+description: >
+  Computes typed *-changes outputs and a back-compat should-run for
+  path-gated CI jobs.
+
+outputs:
+  should-run:
+    description: 'Any file outside `apps/`, `docs/`, `.storybook/`, or `**/*.md` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.relevant.outputs.relevant == 'true' }}
+  app-website-changes:
+    description: 'Shared deps or `apps/website/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_website == 'true' }}
+  app-desktop-changes:
+    description: 'Shared deps or `apps/desktop-ui/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_desktop == 'true' }}
+  app-frontend-changes:
+    description: 'Shared deps or `src/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_frontend == 'true' }}
+  packages-changes:
+    description: 'Shared deps or `packages/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.packages == 'true' }}
+  storybook-changes:
+    description: 'Shared deps or `.storybook/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.storybook == 'true' }}
+  docs-changes:
+    description: '`docs/**` or any `**/*.md` changed (deps NOT folded in).'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.docs == 'true' }}
+  dependency-changes:
+    description: 'Root `package.json`, `pnpm-lock.yaml`, or `pnpm-workspace.yaml` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' }}
+
+runs:
+  using: composite
+  steps:
+    - name: Filter typed changes
+      if: ${{ github.event_name == 'pull_request' }}
+      id: filter
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        filters: |
+          app_website:
+            - 'apps/website/**'
+          app_desktop:
+            - 'apps/desktop-ui/**'
+          app_frontend:
+            - 'src/**'
+          packages:
+            - 'packages/**'
+          storybook:
+            - '.storybook/**'
+          docs:
+            - 'docs/**'
+            - '**/*.md'
+          deps:
+            - 'package.json'
+            - 'pnpm-lock.yaml'
+            - 'pnpm-workspace.yaml'
+
+    - name: Filter relevant changes
+      if: ${{ github.event_name == 'pull_request' }}
+      id: relevant
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        predicate-quantifier: 'every'
+        filters: |
+          relevant:
+            - '**'
+            - '!apps/**'
+            - '!docs/**'
+            - '!.storybook/**'
+            - '!**/*.md'

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

@@ -12,17 +12,30 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   scan:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/ci-oss-assets-validation.yaml

@@ -14,16 +14,29 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   validate-fonts:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -68,15 +81,17 @@ jobs:
           echo '✅ No proprietary fonts found in dist'
 
   validate-licenses:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

.github/workflows/ci-perf-report.yaml

@@ -3,10 +3,8 @@ name: 'CI: Performance Report'
 on:
   push:
     branches: [main, core/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
 
 concurrency:
   group: perf-${{ github.ref }}
@@ -16,8 +14,20 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   perf-tests:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' && github.repository == 'Comfy-Org/ComfyUI_frontend' }}
     runs-on: ubuntu-latest
     timeout-minutes: 30
     container:

.github/workflows/ci-size-data.yaml

@@ -16,9 +16,22 @@ permissions:
   contents: read
 
 jobs:
-  collect:
+  changes:
     if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
+  collect:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v6

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

@@ -4,7 +4,6 @@ name: 'CI: Tests E2E'
 on:
   push:
     branches: [main, master, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
   merge_group:
@@ -15,36 +14,20 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  # Detect whether e2e-relevant files changed. Required checks see "skipped"
-  # (which counts as passing) when only docs/apps/storybook files are touched,
-  # avoiding the stall that paths-ignore would cause.
   changes:
     runs-on: ubuntu-latest
     permissions:
       contents: read
     outputs:
-      should_run: ${{ github.event_name != 'pull_request' || steps.filter.outputs.e2e }}
+      should-run: ${{ steps.changes.outputs.should-run }}
     steps:
-      - name: Checkout repository
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: actions/checkout@v6
-      - name: Check for e2e-relevant changes
-        if: ${{ github.event_name == 'pull_request' }}
-        id: filter
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        with:
-          predicate-quantifier: 'every'
-          filters: |
-            e2e:
-              - '**'
-              - '!apps/**'
-              - '!docs/**'
-              - '!.storybook/**'
-              - '!**/*.md'
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
 
   setup:
     needs: changes
-    if: ${{ needs.changes.outputs.should_run == 'true' }}
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -194,7 +177,7 @@ jobs:
   merge-reports:
     needs: [changes, playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() && needs.changes.outputs.should_run == 'true' }}
+    if: ${{ !cancelled() && needs.changes.outputs.should-run == 'true' }}
     steps:
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
@@ -233,7 +216,7 @@ jobs:
     steps:
       - name: Check E2E results
         env:
-          SHOULD_RUN: ${{ needs.changes.outputs.should_run }}
+          SHOULD_RUN: ${{ needs.changes.outputs.should-run }}
           SHARDED: ${{ needs.playwright-tests-chromium-sharded.result }}
           BROWSERS: ${{ needs.playwright-tests.result }}
         run: |
@@ -251,7 +234,7 @@ jobs:
     runs-on: ubuntu-latest
     if: >-
       ${{
-        needs.changes.outputs.should_run == 'true' &&
+        needs.changes.outputs.should-run == 'true' &&
         github.event_name == 'pull_request' &&
         github.event.pull_request.head.repo.fork == false
       }}
@@ -278,7 +261,7 @@ jobs:
     if: >-
       ${{
         always() &&
-        needs.changes.outputs.should_run == 'true' &&
+        needs.changes.outputs.should-run == 'true' &&
         github.event_name == 'pull_request' &&
         github.event.pull_request.head.repo.fork == false
       }}

.github/workflows/ci-tests-storybook.yaml

@@ -8,10 +8,29 @@ on:
     branches: [main]
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      storybook-changes: ${{ steps.changes.outputs.storybook-changes }}
+      app-frontend-changes: ${{ steps.changes.outputs.app-frontend-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   # Post starting comment for non-forked PRs
   comment-on-pr-start:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    if: |
+      github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     permissions:
       pull-requests: write
     steps:
@@ -30,8 +49,13 @@ jobs:
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
+    if: |
+      github.event_name == 'pull_request'
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     outputs:
       conclusion: ${{ steps.job-status.outputs.conclusion }}
       workflow-url: ${{ steps.workflow-url.outputs.url }}
@@ -67,8 +91,15 @@ jobs:
 
   # Chromatic deployment only for version-bump-* branches or manual triggers
   chromatic-deployment:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && startsWith(github.head_ref, 'version-bump-'))
+    if: |
+      github.event_name == 'workflow_dispatch'
+      || (github.event_name == 'pull_request'
+          && startsWith(github.head_ref, 'version-bump-')
+          && (needs.changes.outputs.storybook-changes == 'true'
+              || needs.changes.outputs.app-frontend-changes == 'true'
+              || needs.changes.outputs.packages-changes == 'true'))
     outputs:
       conclusion: ${{ steps.job-status.outputs.conclusion }}
       workflow-url: ${{ steps.workflow-url.outputs.url }}
@@ -107,9 +138,15 @@ jobs:
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
-    needs: [storybook-build]
+    needs: [changes, storybook-build]
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && always()
+    if: |
+      always()
+      && github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     permissions:
       pull-requests: write
       contents: read

.github/workflows/ci-tests-unit.yaml

@@ -4,10 +4,8 @@ name: 'CI: Tests Unit'
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
   merge_group:
 
 concurrency:
@@ -15,7 +13,20 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   test:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
 
     steps:

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

@@ -52,6 +52,9 @@ jobs:
         run: vercel pull --yes --environment=preview
 
       - name: Build project artifacts
+        env:
+          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: vercel build
 
       - name: Fetch head commit metadata
@@ -146,6 +149,9 @@ jobs:
         run: vercel pull --yes --environment=production
 
       - name: Build project artifacts
+        env:
+          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: vercel build --prod
 
       - name: Deploy project artifacts to Vercel

.github/workflows/ci-website-build.yaml

@@ -4,23 +4,29 @@ name: 'CI: Website Build'
 on:
   push:
     branches: [main, master, website/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'pnpm-lock.yaml'
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'pnpm-lock.yaml'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      app-website-changes: ${{ steps.changes.outputs.app-website-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   build:
+    needs: changes
+    if: ${{ needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
@@ -30,4 +36,7 @@ jobs:
         uses: ./.github/actions/setup-frontend
 
       - name: Build website
+        env:
+          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: pnpm --filter @comfyorg/website build

.github/workflows/ci-website-e2e.yaml

@@ -3,25 +3,29 @@ name: 'CI: Website E2E'
 on:
   push:
     branches: [main]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'packages/tailwind-utils/**'
-      - 'pnpm-lock.yaml'
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'packages/tailwind-utils/**'
-      - 'pnpm-lock.yaml'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.repository }}-${{ github.head_ref || github.ref }}
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      app-website-changes: ${{ steps.changes.outputs.app-website-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   website-e2e:
+    needs: changes
+    if: ${{ needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true' }}
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.58.1-noble
@@ -163,7 +167,11 @@ jobs:
   post-starting-comment:
     # Safe to comment from pull_request trigger: fork PRs are excluded by the guard below.
     # This avoids a ci-*/pr-* workflow_run split for a comment that must appear immediately.
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    needs: changes
+    if: |
+      github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true')
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write

.github/workflows/release-website.yaml

@@ -0,0 +1,59 @@
+# Description: Manual workflow to refresh the apps/website Ashby roles snapshot
+# and open a PR. Merging the PR triggers the existing Vercel website production
+# deploy via ci-vercel-website-preview.yaml.
+name: 'Release: Website'
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: release-website
+  cancel-in-progress: true
+
+jobs:
+  refresh-snapshot:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          ref: main
+          persist-credentials: false
+
+      - name: Refresh Ashby snapshot
+        uses: ./.github/actions/ashby-pull
+        with:
+          api_key: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          job_board_name: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: 'chore(website): refresh Ashby roles snapshot'
+          title: 'chore(website): refresh Ashby roles snapshot'
+          body: |
+            Automated refresh of `apps/website/src/data/ashby-roles.snapshot.json`
+            from the Ashby job board API.
+
+            **Flow:**
+            1. `Release: Website` workflow ran (manual trigger).
+            2. This PR opens with the regenerated snapshot.
+            3. `CI: Vercel Website Preview` deploys a preview for review.
+            4. Merging to `main` triggers the production Vercel deploy.
+
+            The snapshot fallback in `apps/website/src/utils/ashby.ts` remains
+            intact: builds without `WEBSITE_ASHBY_API_KEY` continue to use the
+            committed snapshot.
+
+            Triggered by workflow run `${{ github.run_id }}`.
+          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
+          base: main
+          labels: |
+            Release:Website
+          delete-branch: true

apps/website/public/robots.txt

@@ -1,4 +1,33 @@
+# robots.txt for comfy.org
+# Open to all crawlers — including AI/LLM bots — for maximum visibility
+# in AI-powered search, chat-based answer engines, and traditional search.
+# Granular UAs are listed explicitly to signal intent; rules are shared
+# via stacked user-agent records (RFC 9309 §2.2).
+
 User-agent: *
+User-agent: Googlebot
+User-agent: Bingbot
+User-agent: DuckDuckBot
+User-agent: GPTBot
+User-agent: ChatGPT-User
+User-agent: OAI-SearchBot
+User-agent: Google-Extended
+User-agent: ClaudeBot
+User-agent: Claude-Web
+User-agent: anthropic-ai
+User-agent: PerplexityBot
+User-agent: Perplexity-User
+User-agent: Applebot
+User-agent: Applebot-Extended
+User-agent: Bytespider
+User-agent: Amazonbot
+User-agent: CCBot
+User-agent: Meta-ExternalAgent
+User-agent: Meta-ExternalFetcher
+User-agent: Diffbot
 Allow: /
+Disallow: /_astro/
+Disallow: /_website/
+Disallow: /_vercel/
 
 Sitemap: https://comfy.org/sitemap-index.xml

apps/website/vercel.json

@@ -7,6 +7,15 @@
   "github": {
     "enabled": false
   },
+  "headers": [
+    {
+      "source": "/(.*)",
+      "has": [
+        { "type": "host", "value": "website-frontend-comfyui.vercel.app" }
+      ],
+      "headers": [{ "key": "X-Robots-Tag", "value": "index, follow" }]
+    }
+  ],
   "redirects": [
     {
       "source": "/pricing",

browser_tests/README.md

@@ -96,6 +96,17 @@ pnpm test:browser:local                    # Run all tests
 pnpm test:browser:local widget.spec.ts     # Run specific test file
 ```
 
+### Slowing the browser down for debugging
+
+When running with `--headed` (or `--ui`), set `SLOW_MO` to a millisecond delay
+to slow every Playwright action down so you can watch what is happening. The
+delay only applies when `PLAYWRIGHT_LOCAL` is set (the default for the
+`pnpm test:browser:local` script).
+
+```bash
+SLOW_MO=250 pnpm test:browser:local --headed widget.spec.ts
+```
+
 ## Test Structure
 
 Browser tests in this project follow a specific organization pattern:

browser_tests/assets/3d/load3d_missing_model.json

@@ -0,0 +1,27 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Preview3D",
+      "pos": [50, 50],
+      "size": [450, 600],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "Preview3D",
+        "Last Time Model File": "nonexistent_model.glb"
+      },
+      "widgets_values": ["nonexistent_model.glb"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": { "ds": { "offset": [0, 0], "scale": 1 } },
+  "version": 0.4
+}

browser_tests/assets/default.json

@@ -119,7 +119,15 @@
         { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
         { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
       ],
-      "properties": {},
+      "properties": {
+        "models": [
+          {
+            "name": "v1-5-pruned-emaonly-fp16.safetensors",
+            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors",
+            "directory": "checkpoints"
+          }
+        ]
+      },
       "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     }
   ],

browser_tests/fixtures/VueNodeHelpers.ts

@@ -30,6 +30,13 @@ export class VueNodeHelpers {
     return this.page.locator(`[data-node-id="${nodeId}"]`)
   }
 
+  /**
+   * Get the inner wrapper element of a Vue node.
+   */
+  getNodeInnerWrapper(nodeId: string): Locator {
+    return this.getNodeLocator(nodeId).getByTestId(TestIds.node.innerWrapper)
+  }
+
   /**
    * Get locator for Vue nodes by the node's title (displayed name in the header).
    * Matches against the actual title element, not the full node body.
@@ -119,10 +126,9 @@ export class VueNodeHelpers {
   }
 
   /**
-   * Return a DOM-focused VueNodeFixture for the first node matching the title.
-   * Resolves the node id up front so subsequent interactions survive title changes.
+   * Resolve the data-node-id of the first rendered node matching the title.
    */
-  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+  async getNodeIdByTitle(title: string): Promise<string> {
     const node = this.getNodeByTitle(title).first()
     await node.waitFor({ state: 'visible' })
 
@@ -133,6 +139,15 @@ export class VueNodeHelpers {
       )
     }
 
+    return nodeId
+  }
+
+  /**
+   * Return a DOM-focused VueNodeFixture for the first node matching the title.
+   * Resolves the node id up front so subsequent interactions survive title changes.
+   */
+  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+    const nodeId = await this.getNodeIdByTitle(title)
     return new VueNodeFixture(this.getNodeLocator(nodeId))
   }
 

browser_tests/fixtures/data/templateFixtures.ts

@@ -2,6 +2,11 @@ import type {
   TemplateInfo,
   WorkflowTemplates
 } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+
+const Cloud = TemplateIncludeOnDistributionEnum.Cloud
+const Desktop = TemplateIncludeOnDistributionEnum.Desktop
+const Local = TemplateIncludeOnDistributionEnum.Local
 
 export function makeTemplate(
   overrides: Partial<TemplateInfo> & Pick<TemplateInfo, 'name'>
@@ -26,3 +31,33 @@ export function mockTemplateIndex(
     }
   ]
 }
+
+export const STABLE_CLOUD_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'cloud-stable',
+  title: 'Cloud Stable',
+  includeOnDistributions: [Cloud]
+})
+
+export const STABLE_DESKTOP_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'desktop-stable',
+  title: 'Desktop Stable',
+  includeOnDistributions: [Desktop]
+})
+
+export const STABLE_LOCAL_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'local-stable',
+  title: 'Local Stable',
+  includeOnDistributions: [Local]
+})
+
+export const STABLE_UNRESTRICTED_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'unrestricted-stable',
+  title: 'Unrestricted Stable'
+})
+
+export const ALL_DISTRIBUTION_TEMPLATES: TemplateInfo[] = [
+  STABLE_CLOUD_TEMPLATE,
+  STABLE_DESKTOP_TEMPLATE,
+  STABLE_LOCAL_TEMPLATE,
+  STABLE_UNRESTRICTED_TEMPLATE
+]

browser_tests/fixtures/helpers/ErrorsTabHelper.ts

@@ -4,6 +4,21 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
 
+export async function enableErrorsOverlay(comfyPage: ComfyPage) {
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
+  )
+}
+
+/** Dismiss the error overlay (the floating dialog with the dismiss button). */
+export async function dismissErrorOverlay(comfyPage: ComfyPage): Promise<void> {
+  const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(overlay).toBeVisible()
+  await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+  await expect(overlay).toBeHidden()
+}
+
 export async function loadWorkflowAndOpenErrorsTab(
   comfyPage: ComfyPage,
   workflow: string

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,9 +1,35 @@
 import type { WebSocketRoute } from '@playwright/test'
 
+import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
 import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 
+const PROMPT_ROUTE_PATTERN = /\/api\/prompt$/
+
+/**
+ * Build a `NodeError` describing a single failed input on a KSampler node.
+ * Shared between specs that surface validation rings via 400 responses.
+ */
+export function buildKSamplerError(
+  type: NodeError['errors'][number]['type'],
+  inputName: string,
+  message: string
+): NodeError {
+  return {
+    class_type: 'KSampler',
+    dependent_outputs: [],
+    errors: [
+      {
+        type,
+        message,
+        details: '',
+        extra_info: { input_name: inputName }
+      }
+    ]
+  }
+}
+
 /**
  * Helper for simulating prompt execution in e2e tests.
  */
@@ -16,13 +42,23 @@ export class ExecutionHelper {
 
   constructor(
     comfyPage: ComfyPage,
-    private readonly ws: WebSocketRoute
+    private readonly ws?: WebSocketRoute
   ) {
     this.page = comfyPage.page
     this.command = comfyPage.command
     this.assets = comfyPage.assets
   }
 
+  private requireWs(): WebSocketRoute {
+    if (!this.ws) {
+      throw new Error(
+        'ExecutionHelper was constructed without a WebSocketRoute; ' +
+          'pass `ws` to use methods that send WS frames.'
+      )
+    }
+    return this.ws
+  }
+
   /**
    * Intercept POST /api/prompt, execute Comfy.QueuePrompt, and return
    * the synthetic job ID.
@@ -39,7 +75,7 @@ export class ExecutionHelper {
     })
 
     await this.page.route(
-      '**/api/prompt',
+      PROMPT_ROUTE_PATTERN,
       async (route) => {
         await route.fulfill({
           status: 200,
@@ -60,6 +96,31 @@ export class ExecutionHelper {
     return jobId
   }
 
+  async mockValidationFailure(
+    nodeErrors: Record<string, NodeError>
+  ): Promise<void> {
+    const response: PromptResponse = {
+      node_errors: nodeErrors,
+      error: {
+        type: 'prompt_outputs_failed_validation',
+        message: 'Prompt outputs failed validation',
+        details: ''
+      }
+    }
+
+    await this.page.route(
+      PROMPT_ROUTE_PATTERN,
+      async (route) => {
+        await route.fulfill({
+          status: 400,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      },
+      { times: 1 }
+    )
+  }
+
   /**
    * Send a binary `b_preview_with_metadata` WS message (type 4).
    * Encodes the metadata and a tiny 1x1 PNG so the app creates a blob URL.
@@ -89,12 +150,12 @@ export class ExecutionHelper {
     new Uint8Array(buf, 8, metadataBytes.length).set(metadataBytes)
     new Uint8Array(buf, 8 + metadataBytes.length).set(png)
 
-    this.ws.send(Buffer.from(buf))
+    this.requireWs().send(Buffer.from(buf))
   }
 
   /** Send `execution_start` WS event. */
   executionStart(jobId: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_start',
         data: { prompt_id: jobId, timestamp: Date.now() }
@@ -104,7 +165,7 @@ export class ExecutionHelper {
 
   /** Send `executing` WS event to signal which node is currently running. */
   executing(jobId: string, nodeId: string | null): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'executing',
         data: { prompt_id: jobId, node: nodeId }
@@ -118,7 +179,7 @@ export class ExecutionHelper {
     nodeId: string,
     output: Record<string, unknown>
   ): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'executed',
         data: {
@@ -133,7 +194,7 @@ export class ExecutionHelper {
 
   /** Send `execution_success` WS event. */
   executionSuccess(jobId: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_success',
         data: { prompt_id: jobId, timestamp: Date.now() }
@@ -143,7 +204,7 @@ export class ExecutionHelper {
 
   /** Send `execution_error` WS event. */
   executionError(jobId: string, nodeId: string, message: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_error',
         data: {
@@ -161,7 +222,7 @@ export class ExecutionHelper {
 
   /** Send `progress` WS event. */
   progress(jobId: string, nodeId: string, value: number, max: number): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'progress',
         data: { prompt_id: jobId, node: nodeId, value, max }
@@ -201,7 +262,7 @@ export class ExecutionHelper {
 
   /** Send `status` WS event to update queue count. */
   status(queueRemaining: number): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'status',
         data: { status: { exec_info: { queue_remaining: queueRemaining } } }

browser_tests/fixtures/helpers/TemplateHelper.ts

@@ -0,0 +1,198 @@
+import type { Page, Route } from '@playwright/test'
+
+import type {
+  TemplateInfo,
+  WorkflowTemplates
+} from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import {
+  makeTemplate,
+  mockTemplateIndex
+} from '@e2e/fixtures/data/templateFixtures'
+
+/**
+ * Generate N deterministic templates, optionally restricted to a distribution.
+ *
+ * Lives here (not in `fixtures/data/`) because `fixtures/data/` is reserved
+ * for static test data with no executable fixture logic.
+ */
+function generateTemplates(
+  count: number,
+  distribution?: TemplateIncludeOnDistributionEnum
+): TemplateInfo[] {
+  const slug = distribution ?? 'unrestricted'
+  return Array.from({ length: count }, (_, i) =>
+    makeTemplate({
+      name: `gen-${slug}-${String(i + 1).padStart(3, '0')}`,
+      title: `Generated ${slug} ${i + 1}`,
+      ...(distribution ? { includeOnDistributions: [distribution] } : {})
+    })
+  )
+}
+
+export interface TemplateConfig {
+  readonly templates: readonly TemplateInfo[]
+  readonly index: readonly WorkflowTemplates[] | null
+}
+
+function emptyConfig(): TemplateConfig {
+  return { templates: [], index: null }
+}
+
+export type TemplateOperator = (config: TemplateConfig) => TemplateConfig
+
+function cloneTemplates(templates: readonly TemplateInfo[]): TemplateInfo[] {
+  return templates.map((t) => structuredClone(t))
+}
+
+function cloneIndex(
+  index: readonly WorkflowTemplates[] | null
+): WorkflowTemplates[] | null {
+  return index ? index.map((m) => structuredClone(m)) : null
+}
+
+function addTemplates(
+  config: TemplateConfig,
+  templates: TemplateInfo[]
+): TemplateConfig {
+  return { ...config, templates: [...config.templates, ...templates] }
+}
+
+export function withTemplates(templates: TemplateInfo[]): TemplateOperator {
+  return (config) => addTemplates(config, templates)
+}
+
+export function withTemplate(template: TemplateInfo): TemplateOperator {
+  return (config) => addTemplates(config, [template])
+}
+
+export function withCloudTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Cloud)
+    )
+}
+
+export function withDesktopTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Desktop)
+    )
+}
+
+export function withLocalTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Local)
+    )
+}
+
+export function withUnrestrictedTemplates(count: number): TemplateOperator {
+  return (config) => addTemplates(config, generateTemplates(count))
+}
+
+/**
+ * Override the index payload entirely. Useful when a test needs a custom
+ * `WorkflowTemplates[]` shape (e.g. multiple modules).
+ */
+export function withRawIndex(index: WorkflowTemplates[]): TemplateOperator {
+  return (config) => ({ ...config, index })
+}
+
+export class TemplateHelper {
+  private templates: TemplateInfo[]
+  private index: WorkflowTemplates[] | null
+  private routeHandlers: Array<{
+    pattern: string
+    handler: (route: Route) => Promise<void>
+  }> = []
+
+  constructor(
+    private readonly page: Page,
+    config: TemplateConfig = emptyConfig()
+  ) {
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  configure(...operators: TemplateOperator[]): void {
+    const config = operators.reduce<TemplateConfig>(
+      (cfg, op) => op(cfg),
+      emptyConfig()
+    )
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  async mock(): Promise<void> {
+    await this.mockIndex()
+    await this.mockThumbnails()
+  }
+
+  async mockIndex(): Promise<void> {
+    const indexHandler = async (route: Route) => {
+      const payload = this.index ?? mockTemplateIndex(this.templates)
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(payload),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const indexPattern = '**/templates/index.json'
+    this.routeHandlers.push({ pattern: indexPattern, handler: indexHandler })
+    await this.page.route(indexPattern, indexHandler)
+  }
+
+  async mockThumbnails(): Promise<void> {
+    const thumbnailHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers: {
+          'Content-Type': 'image/webp',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const thumbnailPattern = '**/templates/**.webp'
+    this.routeHandlers.push({
+      pattern: thumbnailPattern,
+      handler: thumbnailHandler
+    })
+    await this.page.route(thumbnailPattern, thumbnailHandler)
+  }
+
+  getTemplates(): TemplateInfo[] {
+    return cloneTemplates(this.templates)
+  }
+
+  get templateCount(): number {
+    return this.templates.length
+  }
+
+  async clearMocks(): Promise<void> {
+    for (const { pattern, handler } of this.routeHandlers) {
+      await this.page.unroute(pattern, handler)
+    }
+    this.routeHandlers = []
+    this.templates = []
+    this.index = null
+  }
+}
+
+export function createTemplateHelper(
+  page: Page,
+  ...operators: TemplateOperator[]
+): TemplateHelper {
+  const config = operators.reduce<TemplateConfig>(
+    (cfg, op) => op(cfg),
+    emptyConfig()
+  )
+  return new TemplateHelper(page, config)
+}

browser_tests/fixtures/selectors.ts

@@ -211,7 +211,8 @@ export const TestIds = {
   queue: {
     overlayToggle: 'queue-overlay-toggle',
     clearHistoryAction: 'clear-history-action',
-    jobAssetsList: 'job-assets-list'
+    jobAssetsList: 'job-assets-list',
+    notificationBanner: 'queue-notification-banner'
   },
   errors: {
     imageLoadError: 'error-loading-image',

browser_tests/fixtures/templateApiFixture.ts

@@ -0,0 +1,16 @@
+import { test as base } from '@playwright/test'
+
+import type { TemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+import { createTemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+
+export const templateApiFixture = base.extend<{
+  templateApi: TemplateHelper
+}>({
+  templateApi: async ({ page }, use) => {
+    const templateApi = createTemplateHelper(page)
+
+    await use(templateApi)
+
+    await templateApi.clearMocks()
+  }
+})

browser_tests/tests/errorOverlay.spec.ts

@@ -5,7 +5,7 @@ import {
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { cleanupFakeModel } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { cleanupFakeModel } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Error overlay', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/load3d/load3d.spec.ts

@@ -282,6 +282,57 @@ test.describe('Load3D', () => {
   })
 })
 
+test.describe('Load3D silent 404 on missing output model', () => {
+  test('Does not show an error toast when the output model file is missing (404)', async ({
+    comfyPage
+  }) => {
+    // Intercept model fetch and return 404 to simulate a missing output file
+    // (e.g. shared workflow opened on a machine that never ran it)
+    await comfyPage.page.route('**/view?**', (route) =>
+      route.fulfill({ status: 404, body: 'Not Found' })
+    )
+
+    // This workflow has a Preview3D node with Last Time Model File set,
+    // triggering the loadFolder: 'output' + silentOnNotFound: true path.
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    // Wait for the 404 response before asserting — gives the load attempt time
+    // to complete without using waitForTimeout
+    const responsePromise = comfyPage.page.waitForResponse('**/view?**')
+    await comfyPage.workflow.loadWorkflow('3d/load3d_missing_model')
+    await responsePromise
+
+    await expect(
+      comfyPage.toast.visibleToasts.filter({ hasText: 'Error loading model' })
+    ).toHaveCount(0)
+  })
+
+  test('Shows an error toast when a non-404 error occurs loading the output model', async ({
+    comfyPage
+  }) => {
+    // Intercept with a 500 to simulate a real server error (not 404) — toast must appear
+    await comfyPage.page.route('**/view?**', (route) =>
+      route.fulfill({ status: 500, body: 'Internal Server Error' })
+    )
+
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    const responsePromise = comfyPage.page.waitForResponse('**/view?**')
+    await comfyPage.workflow.loadWorkflow('3d/load3d_missing_model')
+    await responsePromise
+
+    await expect
+      .poll(
+        () =>
+          comfyPage.toast.visibleToasts
+            .filter({ hasText: 'Error loading model' })
+            .count(),
+        { timeout: 10000 }
+      )
+      .toBeGreaterThan(0)
+  })
+})
+
 test.describe('Load3D initialization failure', () => {
   test('Surfaces a toast when the THREE.WebGLRenderer cannot be created', async ({
     comfyPage

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -3,7 +3,7 @@ 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 { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 async function uploadFileViaDropzone(comfyPage: ComfyPage) {
   const dropzone = comfyPage.page.getByTestId(

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -9,7 +9,7 @@ import {
 import {
   cleanupFakeModel,
   loadWorkflowAndOpenErrorsTab
-} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+} from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -6,7 +6,7 @@ import {
   cleanupFakeModel,
   openErrorsTab,
   loadWorkflowAndOpenErrorsTab
-} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+} from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/queueNotificationBanners.spec.ts

@@ -0,0 +1,164 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+// Mirrors BANNER_DISMISS_DELAY_MS in src/composables/queue/useQueueNotificationBanners.ts.
+// Duplicated here to avoid pulling production source (and its litegraph
+// transitive deps) into the Playwright TS loader.
+const BANNER_DISMISS_DELAY_MS = 4000
+const BANNER_ASSERT_TIMEOUT_MS = BANNER_DISMISS_DELAY_MS + 2000
+
+const REQUEST_ID_PRIMARY = 1
+const REQUEST_ID_SECONDARY = 2
+const REQUEST_ID_MISMATCH = 999
+
+let nextRequestId = 1000
+const newRequestId = () => nextRequestId++
+
+function bannerLocator(page: Page) {
+  return page.getByTestId(TestIds.queue.notificationBanner)
+}
+
+type DispatchOpts = { batchCount?: number; requestId?: number }
+
+function dispatchPromptQueueing(page: Page, opts: DispatchOpts = {}) {
+  return page.evaluate(
+    ([batchCount, requestId]) => {
+      window.app!.api.dispatchCustomEvent('promptQueueing', {
+        batchCount,
+        requestId
+      })
+    },
+    [opts.batchCount ?? 1, opts.requestId ?? newRequestId()]
+  )
+}
+
+function dispatchPromptQueued(page: Page, opts: DispatchOpts = {}) {
+  return page.evaluate(
+    ([batchCount, requestId]) => {
+      window.app!.api.dispatchCustomEvent('promptQueued', {
+        number: 0,
+        batchCount,
+        requestId
+      })
+    },
+    [opts.batchCount ?? 1, opts.requestId ?? newRequestId()]
+  )
+}
+
+test.describe('Queue notification banners', { tag: ['@ui'] }, () => {
+  test.describe('Queuing lifecycle', () => {
+    test('promptQueueing event shows a queueing banner', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page)
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('queuing')
+    })
+
+    test('promptQueued upgrades a pending banner to queued', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('queuing')
+
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      await expect(banner).toContainText('queued')
+    })
+
+    test('promptQueued with batch count > 1 shows plural text', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, { batchCount: 3 })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('3')
+      await expect(banner).toContainText('jobs added to queue')
+    })
+
+    test('promptQueued with mismatched requestId enqueues a separate queued banner', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('queuing')
+
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_MISMATCH
+      })
+
+      // Pending banner is not upgraded — still shows "queuing".
+      await expect(banner).toContainText('queuing')
+
+      // After the pending banner auto-dismisses, the queued banner appears.
+      await expect(banner).toContainText('queued', {
+        timeout: BANNER_ASSERT_TIMEOUT_MS
+      })
+    })
+  })
+
+  test.describe('Auto-dismiss', () => {
+    test('Banner auto-dismisses after timeout', async ({ comfyPage }) => {
+      await dispatchPromptQueued(comfyPage.page)
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toBeHidden({ timeout: BANNER_ASSERT_TIMEOUT_MS })
+    })
+  })
+
+  test.describe('Notification queue (FIFO)', () => {
+    test('Second notification shows after first auto-dismisses', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 2,
+        requestId: REQUEST_ID_SECONDARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('Job queued')
+      await expect(banner).toContainText('2 jobs added to queue', {
+        timeout: BANNER_ASSERT_TIMEOUT_MS
+      })
+    })
+  })
+
+  test.describe('Direct queued event (no pending predecessor)', () => {
+    test('promptQueued without prior queueing shows queued banner directly', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('queued')
+    })
+  })
+})

browser_tests/tests/sidebar/workflows.spec.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { openErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { openErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/templateFilteringCount.spec.ts

@@ -1,13 +1,13 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
 
-import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import {
-  makeTemplate,
-  mockTemplateIndex
-} from '@e2e/fixtures/data/templateFixtures'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
+import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
+
+const test = mergeTests(comfyPageFixture, templateApiFixture)
 
 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop
@@ -17,7 +17,7 @@ test.describe(
   'Template distribution filtering count',
   { tag: '@cloud' },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
+    test.beforeEach(async ({ comfyPage, templateApi }) => {
       await comfyPage.settings.setSetting('Comfy.Templates.SelectedModels', [])
       await comfyPage.settings.setSetting(
         'Comfy.Templates.SelectedUseCases',
@@ -26,53 +26,37 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Templates.SelectedRunsOn', [])
       await comfyPage.settings.setSetting('Comfy.Templates.SortBy', 'default')
 
-      await comfyPage.page.route('**/templates/**.webp', async (route) => {
-        await route.fulfill({
-          status: 200,
-          path: 'browser_tests/assets/example.webp',
-          headers: {
-            'Content-Type': 'image/webp',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      await templateApi.mockThumbnails()
     })
 
     test('displayed count matches visible cards when distribution filter excludes templates', async ({
-      comfyPage
+      comfyPage,
+      templateApi
     }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'cloud-1',
-          title: 'Cloud One',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'cloud-2',
-          title: 'Cloud Two',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'desktop-hidden',
-          title: 'Desktop Hidden',
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'universal',
-          title: 'Universal'
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'cloud-1',
+            title: 'Cloud One',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'cloud-2',
+            title: 'Cloud Two',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'desktop-hidden',
+            title: 'Desktop Hidden',
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'universal',
+            title: 'Universal'
+          })
+        ])
+      )
+      await templateApi.mockIndex()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -86,45 +70,38 @@ test.describe(
     })
 
     test('filtered count reflects distribution + model filter together', async ({
-      comfyPage
+      comfyPage,
+      templateApi
     }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'wan-cloud-1',
-          title: 'Wan Cloud 1',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-cloud-2',
-          title: 'Wan Cloud 2',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-desktop',
-          title: 'Wan Desktop',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'flux-cloud',
-          title: 'Flux Cloud',
-          models: ['Flux'],
-          includeOnDistributions: [Cloud]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'wan-cloud-1',
+            title: 'Wan Cloud 1',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-cloud-2',
+            title: 'Wan Cloud 2',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-desktop',
+            title: 'Wan Desktop',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'flux-cloud',
+            title: 'Flux Cloud',
+            models: ['Flux'],
+            includeOnDistributions: [Cloud]
+          })
+        ])
+      )
+      await templateApi.mockIndex()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -144,36 +121,29 @@ test.describe(
     })
 
     test('desktop-only templates never leak into DOM on cloud distribution', async ({
-      comfyPage
+      comfyPage,
+      templateApi
     }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'cloud-visible',
-          title: 'Cloud Visible',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'desktop-leak-check',
-          title: 'Desktop Leak Check',
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'local-leak-check',
-          title: 'Local Leak Check',
-          includeOnDistributions: [Local]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'cloud-visible',
+            title: 'Cloud Visible',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'desktop-leak-check',
+            title: 'Desktop Leak Check',
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'local-leak-check',
+            title: 'Local Leak Check',
+            includeOnDistributions: [Local]
+          })
+        ])
+      )
+      await templateApi.mockIndex()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -200,28 +170,21 @@ test.describe(
     })
 
     test('templates without includeOnDistributions are visible on cloud', async ({
-      comfyPage
+      comfyPage,
+      templateApi
     }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({ name: 'unrestricted-1', title: 'Unrestricted 1' }),
-        makeTemplate({ name: 'unrestricted-2', title: 'Unrestricted 2' }),
-        makeTemplate({
-          name: 'cloud-only',
-          title: 'Cloud Only',
-          includeOnDistributions: [Cloud]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({ name: 'unrestricted-1', title: 'Unrestricted 1' }),
+          makeTemplate({ name: 'unrestricted-2', title: 'Unrestricted 2' }),
+          makeTemplate({
+            name: 'cloud-only',
+            title: 'Cloud Only',
+            includeOnDistributions: [Cloud]
+          })
+        ])
+      )
+      await templateApi.mockIndex()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()
@@ -234,39 +197,32 @@ test.describe(
     })
 
     test('clear filters button resets to correct distribution-filtered total', async ({
-      comfyPage
+      comfyPage,
+      templateApi
     }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'wan-cloud',
-          title: 'Wan Cloud',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'flux-cloud',
-          title: 'Flux Cloud',
-          models: ['Flux'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-desktop',
-          title: 'Wan Desktop',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Desktop]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'wan-cloud',
+            title: 'Wan Cloud',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'flux-cloud',
+            title: 'Flux Cloud',
+            models: ['Flux'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-desktop',
+            title: 'Wan Desktop',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Desktop]
+          })
+        ])
+      )
+      await templateApi.mockIndex()
 
       await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
       await expect(comfyPage.templates.content).toBeVisible()

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

@@ -1,9 +1,25 @@
+import { mergeTests } from '@playwright/test'
+
 import {
   comfyExpect as expect,
-  comfyPageFixture as test
+  comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import {
+  cleanupFakeModel,
+  dismissErrorOverlay,
+  enableErrorsOverlay
+} from '@e2e/fixtures/helpers/ErrorsTabHelper'
+import {
+  ExecutionHelper,
+  buildKSamplerError
+} from '@e2e/fixtures/helpers/ExecutionHelper'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 const ERROR_CLASS = /ring-destructive-background/
+const UNKNOWN_NODE_ID = '1'
+const INNER_EXECUTION_ID = '2:1'
 
 test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   test('should display error state when node is missing (node from workflow is not installed)', async ({
@@ -11,24 +27,202 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    // Expect error state on missing unknown node
-    const unknownNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'UNKNOWN NODE' })
-      .getByTestId('node-inner-wrapper')
-    await expect(unknownNode).toHaveClass(ERROR_CLASS)
+    await expect(
+      comfyPage.vueNodes.getNodeInnerWrapper(UNKNOWN_NODE_ID)
+    ).toHaveClass(ERROR_CLASS)
   })
 
   test('should display error state when node causes execution error', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
+    const raiseErrorId =
+      await comfyPage.vueNodes.getNodeIdByTitle('Raise Error')
     await comfyPage.runButton.click()
 
-    const raiseErrorNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'Raise Error' })
-      .getByTestId('node-inner-wrapper')
-    await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
+    await expect(
+      comfyPage.vueNodes.getNodeInnerWrapper(raiseErrorId)
+    ).toHaveClass(ERROR_CLASS)
+  })
+
+  test.describe('validation errors', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsOverlay(comfyPage)
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    })
+
+    test('shows error ring when a validation error is returned for a node', async ({
+      comfyPage
+    }) => {
+      const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [ksamplerId]: buildKSamplerError(
+          'value_bigger_than_max',
+          'steps',
+          'steps: 99999 is bigger than max 10000'
+        )
+      })
+
+      await comfyPage.runButton.click()
+
+      await expect(
+        comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
+      ).toHaveClass(ERROR_CLASS)
+    })
+
+    test('clears error ring when user edits an out-of-range number widget back into range', async ({
+      comfyPage
+    }) => {
+      const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
+      const innerWrapper = comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
+      const exec = new ExecutionHelper(comfyPage)
+
+      await test.step('queue with out-of-range steps to surface the error', async () => {
+        await exec.mockValidationFailure({
+          [ksamplerId]: buildKSamplerError(
+            'value_bigger_than_max',
+            'steps',
+            'steps: 99999 is bigger than max 10000'
+          )
+        })
+        await comfyPage.runButton.click()
+        await dismissErrorOverlay(comfyPage)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('edit steps widget so the new value is within range', async () => {
+        const stepsWidget = comfyPage.vueNodes.getWidgetByName(
+          'KSampler',
+          'steps'
+        )
+        const controls = comfyPage.vueNodes.getInputNumberControls(stepsWidget)
+        // ScrubableNumberInput commits on blur — explicit blur avoids a race
+        // with the keyup-Enter handler in case Enter is consumed elsewhere.
+        await controls.input.fill('25')
+        await controls.input.blur()
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
+
+    test('clears error ring when user picks a different combo option', async ({
+      comfyPage
+    }) => {
+      const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
+      const innerWrapper = comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
+      const exec = new ExecutionHelper(comfyPage)
+
+      await test.step('queue with invalid sampler to surface the error', async () => {
+        await exec.mockValidationFailure({
+          [ksamplerId]: buildKSamplerError(
+            'value_not_in_list',
+            'sampler_name',
+            'sampler_name: bogus_sampler is not in list'
+          )
+        })
+        await comfyPage.runButton.click()
+        await dismissErrorOverlay(comfyPage)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('select a different sampler option', async () => {
+        await comfyPage.vueNodes.selectComboOption(
+          'KSampler',
+          'sampler_name',
+          'dpmpp_2m'
+        )
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
+  })
+
+  test.describe('subgraph propagation', { tag: '@subgraph' }, () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsOverlay(comfyPage)
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('parent subgraph node shows error ring when an interior node is missing', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
+      const subgraphParentId = await comfyPage.vueNodes.getNodeIdByTitle(
+        'Subgraph with Missing Node'
+      )
+
+      await expect(
+        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
+      ).toHaveClass(ERROR_CLASS)
+    })
+
+    test('parent subgraph node shows error ring when an interior node has a missing model', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+      const subgraphParentId = await comfyPage.vueNodes.getNodeIdByTitle(
+        'Subgraph with Missing Model'
+      )
+
+      await expect(
+        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
+      ).toHaveClass(ERROR_CLASS)
+    })
+
+    test('parent subgraph node shows error ring when an interior node fails execution', async ({
+      comfyPage,
+      getWebSocket
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      const subgraphParentId =
+        await comfyPage.vueNodes.getNodeIdByTitle('New Subgraph')
+      const innerWrapper =
+        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
+      await expect(
+        innerWrapper,
+        'subgraph parent must mount before injecting WS execution_error'
+      ).toBeVisible()
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+
+      const ws = await getWebSocket()
+      const exec = new ExecutionHelper(comfyPage, ws)
+      exec.executionError(
+        'mocked-prompt',
+        INNER_EXECUTION_ID,
+        'boom inside the subgraph'
+      )
+
+      await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+    })
+
+    test('parent subgraph node shows error ring when interior node has a validation error', async ({
+      comfyPage
+    }) => {
+      // Validation errors are keyed by execution id, so an interior error
+      // ("2:1") must propagate the ring up to the root-level subgraph
+      // container ("2") via errorAncestorExecutionIds.
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      const subgraphParentId =
+        await comfyPage.vueNodes.getNodeIdByTitle('New Subgraph')
+      const innerWrapper =
+        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
+      await expect(innerWrapper).toBeVisible()
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+
+      const exec = new ExecutionHelper(comfyPage)
+      await exec.mockValidationFailure({
+        [INNER_EXECUTION_ID]: buildKSamplerError(
+          'value_bigger_than_max',
+          'steps',
+          'steps: 99999 is bigger than max 10000'
+        )
+      })
+      await comfyPage.runButton.click()
+
+      await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+    })
   })
 })

browser_tests/tests/workflowSettings.spec.ts

@@ -0,0 +1,205 @@
+import type { Page, Request } from '@playwright/test'
+
+import type {
+  ComfyApiWorkflow,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+
+function isUserdataWorkflowSave(request: Request): boolean {
+  return (
+    request.method() === 'POST' &&
+    /\/api\/userdata\/workflows%2F[^?]+\.json/.test(request.url())
+  )
+}
+
+function collectSaves(page: Page): Disposable & { readonly saves: string[] } {
+  const saves: string[] = []
+  function onRequest(request: Request) {
+    if (isUserdataWorkflowSave(request)) saves.push(request.url())
+  }
+  page.on('request', onRequest)
+  return {
+    saves,
+    [Symbol.dispose]() {
+      page.off('request', onRequest)
+    }
+  }
+}
+
+async function waitForSave(page: Page, timeout: number): Promise<boolean> {
+  return page
+    .waitForRequest(isUserdataWorkflowSave, { timeout })
+    .then(() => true)
+    .catch(() => false)
+}
+
+/**
+ * Drag the first node so the change tracker dispatches `graphChanged`.
+ */
+async function triggerGraphChange(comfyPage: ComfyPage): Promise<void> {
+  const node = await comfyPage.nodeOps.getFirstNodeRef()
+  if (!node) throw new Error('Default workflow expected to have a first node')
+  const titlePos = await node.getTitlePosition()
+  const absFrom = await comfyPage.canvasOps.toAbsolute(titlePos)
+  const absTo = { x: absFrom.x + 120, y: absFrom.y + 120 }
+  await comfyPage.canvasOps.dragAndDrop(absFrom, absTo)
+  await expect
+    .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+    .toBe(true)
+}
+
+async function setupAutoSaveAfterDelay(
+  comfyPage: ComfyPage,
+  delayMs: number
+): Promise<void> {
+  await comfyPage.menu.topbar.saveWorkflow('autosave')
+  await comfyPage.settings.setSetting('Comfy.Workflow.AutoSaveDelay', delayMs)
+  await comfyPage.settings.setSetting('Comfy.Workflow.AutoSave', 'after delay')
+}
+
+test.describe('Workflow settings', { tag: '@canvas' }, () => {
+  test.describe('Comfy.Workflow.AutoSave', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.setupWorkflowsDirectory({})
+      await comfyPage.settings.setSetting('Comfy.Workflow.AutoSave', 'off')
+    })
+
+    test("'off' does not save modified workflow after delay", async ({
+      comfyPage
+    }) => {
+      await comfyPage.menu.topbar.saveWorkflow('autosave')
+      await comfyPage.settings.setSetting('Comfy.Workflow.AutoSaveDelay', 50)
+
+      await triggerGraphChange(comfyPage)
+
+      // Within a window an order of magnitude longer than AutoSaveDelay, the
+      // off watcher must not write back.
+      const sawSave = await waitForSave(comfyPage.page, 500)
+      expect(
+        sawSave,
+        'AutoSave=off must not write back after a graph change'
+      ).toBe(false)
+    })
+
+    test("'after delay' saves the workflow after a graph change", async ({
+      comfyPage
+    }) => {
+      await setupAutoSaveAfterDelay(comfyPage, 100)
+
+      const savePromise = comfyPage.page.waitForRequest(
+        isUserdataWorkflowSave,
+        { timeout: 4000 }
+      )
+      await triggerGraphChange(comfyPage)
+      await savePromise
+
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(false)
+    })
+  })
+
+  test.describe('Comfy.Workflow.AutoSaveDelay', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.setupWorkflowsDirectory({})
+      await comfyPage.settings.setSetting('Comfy.Workflow.AutoSave', 'off')
+    })
+
+    test('long delay defers save until at least the configured duration has elapsed', async ({
+      comfyPage
+    }) => {
+      const LONG_DELAY_MS = 1000
+      const EARLY_WINDOW_MS = 500
+
+      await setupAutoSaveAfterDelay(comfyPage, LONG_DELAY_MS)
+
+      using tracker = collectSaves(comfyPage.page)
+
+      await triggerGraphChange(comfyPage)
+
+      // No save fires within a window comfortably shorter than the delay.
+      const sawEarlySave = await waitForSave(comfyPage.page, EARLY_WINDOW_MS)
+      expect(
+        sawEarlySave,
+        `No save should fire within ${EARLY_WINDOW_MS}ms when the configured delay is ${LONG_DELAY_MS}ms`
+      ).toBe(false)
+
+      // Eventually the save does fire.
+      await comfyPage.page.waitForRequest(isUserdataWorkflowSave, {
+        timeout: 3000
+      })
+      expect(tracker.saves).toHaveLength(1)
+    })
+  })
+
+  test.describe('Comfy.Workflow.SortNodeIdOnSave', () => {
+    async function getSerializedNodeIds(
+      comfyPage: ComfyPage
+    ): Promise<NodeId[]> {
+      return (await comfyPage.workflow.getExportedWorkflow()).nodes.map(
+        (n) => n.id
+      )
+    }
+
+    function ascendingById(ids: NodeId[]): NodeId[] {
+      return [...ids].sort((a, b) => Number(a) - Number(b))
+    }
+
+    test('false preserves the graph insertion order', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.SortNodeIdOnSave',
+        false
+      )
+      const ids = await getSerializedNodeIds(comfyPage)
+
+      expect(ids, 'default workflow nodes already sorted').not.toEqual(
+        ascendingById(ids)
+      )
+    })
+
+    test('true sorts nodes by id ascending', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.SortNodeIdOnSave',
+        true
+      )
+      const ids = await getSerializedNodeIds(comfyPage)
+      expect(ids).toEqual(ascendingById(ids))
+    })
+
+    test('toggling sort preserves node set in both workflow JSON and API prompt', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.SortNodeIdOnSave',
+        false
+      )
+      const expectedIds = ascendingById(await getSerializedNodeIds(comfyPage))
+
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.SortNodeIdOnSave',
+        true
+      )
+
+      // Workflow JSON nodes (the surface controlled by SortNodeIdOnSave) must
+      // still contain the same set of ids — sort changes order, not membership.
+      expect(ascendingById(await getSerializedNodeIds(comfyPage))).toEqual(
+        expectedIds
+      )
+
+      // The API prompt is independently derived from execution order, but it
+      // must enumerate the same node set regardless of the sort flag.
+      const apiPrompt: ComfyApiWorkflow =
+        await comfyPage.workflow.getExportedWorkflow({ api: true })
+      expect(ascendingById(Object.keys(apiPrompt).map(Number))).toEqual(
+        expectedIds
+      )
+    })
+  })
+})

package.json

@@ -83,6 +83,7 @@
     "@tiptap/extension-table-row": "catalog:",
     "@tiptap/pm": "catalog:",
     "@tiptap/starter-kit": "catalog:",
+    "@vee-validate/zod": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@vueuse/router": "^14.2.0",
@@ -113,6 +114,7 @@
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "typegpu": "catalog:",
+    "vee-validate": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",

playwright.config.ts

@@ -8,7 +8,10 @@ const maybeLocalOptions: PlaywrightTestConfig = process.env.PLAYWRIGHT_LOCAL
       workers: 1,
       use: {
         trace: 'on',
-        video: 'on'
+        video: 'on',
+        launchOptions: {
+          slowMo: Number(process.env.SLOW_MO) || 0
+        }
       }
     }
   : {

pnpm-lock.yaml

@@ -162,6 +162,9 @@ catalogs:
     '@types/three':
       specifier: ^0.169.0
       version: 0.169.0
+    '@vee-validate/zod':
+      specifier: ^4.15.1
+      version: 4.15.1
     '@vercel/analytics':
       specifier: ^2.0.1
       version: 2.0.1
@@ -360,6 +363,9 @@ catalogs:
     unplugin-vue-components:
       specifier: ^30.0.0
       version: 30.0.0
+    vee-validate:
+      specifier: ^4.15.1
+      version: 4.15.1
     vite-plugin-dts:
       specifier: ^4.5.4
       version: 4.5.4
@@ -497,6 +503,9 @@ importers:
       '@tiptap/starter-kit':
         specifier: 'catalog:'
         version: 2.27.2
+      '@vee-validate/zod':
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.13(typescript@5.9.3))(zod@3.25.76)
       '@vueuse/core':
         specifier: 'catalog:'
         version: 14.2.0(vue@3.5.13(typescript@5.9.3))
@@ -587,6 +596,9 @@ importers:
       typegpu:
         specifier: 'catalog:'
         version: 0.8.2
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.13(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.3)
@@ -4724,6 +4736,11 @@ packages:
     peerDependencies:
       valibot: ^1.2.0
 
+  '@vee-validate/zod@4.15.1':
+    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
+    peerDependencies:
+      zod: ^3.24.0
+
   '@vercel/analytics@2.0.1':
     resolution: {integrity: sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==}
     peerDependencies:
@@ -9596,6 +9613,11 @@ packages:
       typescript:
         optional: true
 
+  vee-validate@4.15.1:
+    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
+    peerDependencies:
+      vue: ^3.4.26
+
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -14041,6 +14063,14 @@ snapshots:
     dependencies:
       valibot: 1.2.0(typescript@5.9.3)
 
+  '@vee-validate/zod@4.15.1(vue@3.5.13(typescript@5.9.3))(zod@3.25.76)':
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.13(typescript@5.9.3))
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - vue
+
   '@vercel/analytics@2.0.1(react@19.2.4)(vue-router@4.4.3(vue@3.5.13(typescript@5.9.3)))(vue@3.5.13(typescript@5.9.3))':
     optionalDependencies:
       react: 19.2.4
@@ -14159,7 +14189,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@25.0.3)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
+      vitest: 4.0.16(@opentelemetry/api@1.9.0)(@types/node@24.10.4)(@vitest/ui@4.0.16)(esbuild@0.27.3)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.4.0)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -20054,6 +20084,12 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  vee-validate@4.15.1(vue@3.5.13(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      type-fest: 4.41.0
+      vue: 3.5.13(typescript@5.9.3)
+
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3

pnpm-workspace.yaml

@@ -55,6 +55,7 @@ catalog:
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
+  '@vee-validate/zod': ^4.15.1
   '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
@@ -121,6 +122,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
+  vee-validate: ^4.15.1
   vite: ^8.0.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2

src/components/queue/QueueNotificationBannerHost.vue

@@ -5,6 +5,7 @@
     role="status"
     aria-live="polite"
     aria-atomic="true"
+    data-testid="queue-notification-banner"
   >
     <QueueNotificationBanner :notification="currentNotification" />
   </div>

src/extensions/core/load3d.ts

@@ -497,7 +497,8 @@ useExtensionService().registerExtension({
           const settings = {
             loadFolder: 'output',
             modelWidget: modelWidget,
-            cameraState: cameraState
+            cameraState: cameraState,
+            silentOnNotFound: true
           }
 
           config.configure(settings)
@@ -528,7 +529,8 @@ useExtensionService().registerExtension({
             loadFolder: 'output',
             modelWidget: modelWidget,
             cameraState: cameraState,
-            bgImagePath: bgImagePath
+            bgImagePath: bgImagePath,
+            silentOnNotFound: true
           }
 
           config.configure(settings)

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

@@ -1,11 +1,13 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
+import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type {
   GizmoConfig,
   ModelConfig
 } from '@/extensions/core/load3d/interfaces'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { Dictionary } from '@/lib/litegraph/src/interfaces'
 import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
 
@@ -162,3 +164,88 @@ describe('Load3DConfiguration.loadModelConfig', () => {
     expect(result.gizmo).toEqual(fullGizmo)
   })
 })
+
+describe('Load3DConfiguration.silentOnNotFound propagation', () => {
+  let loadModelSpy: ReturnType<typeof vi.fn>
+
+  function makeLoad3dMock(): Load3d {
+    loadModelSpy = vi.fn().mockResolvedValue(undefined)
+    return {
+      loadModel: loadModelSpy,
+      setUpDirection: vi.fn(),
+      setMaterialMode: vi.fn(),
+      setTargetSize: vi.fn(),
+      setCameraState: vi.fn(),
+      toggleGrid: vi.fn(),
+      setBackgroundColor: vi.fn(),
+      setBackgroundImage: vi.fn().mockResolvedValue(undefined),
+      setBackgroundRenderMode: vi.fn(),
+      toggleCamera: vi.fn(),
+      setFOV: vi.fn(),
+      setLightIntensity: vi.fn(),
+      setHDRIIntensity: vi.fn(),
+      setHDRIAsBackground: vi.fn(),
+      setHDRIEnabled: vi.fn()
+    } as unknown as Load3d
+  }
+
+  async function flush() {
+    await new Promise<void>((resolve) => setTimeout(resolve, 0))
+  }
+
+  beforeEach(() => {
+    vi.mocked(Load3dUtils.splitFilePath).mockReturnValue(['', 'model.glb'])
+    vi.mocked(Load3dUtils.getResourceURL).mockReturnValue(
+      '/view?filename=model.glb'
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('configureForSaveMesh forwards silentOnNotFound: true to loadModel', async () => {
+    const config = new Load3DConfiguration(makeLoad3dMock())
+    config.configureForSaveMesh('output', 'model.glb', {
+      silentOnNotFound: true
+    })
+    await flush()
+    expect(loadModelSpy).toHaveBeenCalledWith(expect.any(String), 'model.glb', {
+      silentOnNotFound: true
+    })
+  })
+
+  it('configureForSaveMesh uses silentOnNotFound: false when option is omitted', async () => {
+    const config = new Load3DConfiguration(makeLoad3dMock())
+    config.configureForSaveMesh('output', 'model.glb')
+    await flush()
+    expect(loadModelSpy).toHaveBeenCalledWith(expect.any(String), 'model.glb', {
+      silentOnNotFound: false
+    })
+  })
+
+  it('configure forwards silentOnNotFound: true from settings to loadModel', async () => {
+    const config = new Load3DConfiguration(makeLoad3dMock())
+    config.configure({
+      modelWidget: { value: 'model.glb' } as unknown as IBaseWidget,
+      loadFolder: 'output',
+      silentOnNotFound: true
+    })
+    await flush()
+    expect(loadModelSpy).toHaveBeenCalledWith(expect.any(String), 'model.glb', {
+      silentOnNotFound: true
+    })
+  })
+
+  it('configure uses silentOnNotFound: false when setting is omitted', async () => {
+    const config = new Load3DConfiguration(makeLoad3dMock())
+    config.configure({
+      modelWidget: { value: 'model.glb' } as unknown as IBaseWidget,
+      loadFolder: 'output'
+    })
+    await flush()
+    expect(loadModelSpy).toHaveBeenCalledWith(expect.any(String), 'model.glb', {
+      silentOnNotFound: false
+    })
+  })
+})

src/extensions/core/load3d/Load3DConfiguration.ts

@@ -21,6 +21,7 @@ type Load3DConfigurationSettings = {
   width?: IBaseWidget
   height?: IBaseWidget
   bgImagePath?: string
+  silentOnNotFound?: boolean
 }
 
 class Load3DConfiguration {
@@ -29,8 +30,16 @@ class Load3DConfiguration {
     private properties?: Dictionary<NodeProperty | undefined>
   ) {}
 
-  configureForSaveMesh(loadFolder: 'input' | 'output', filePath: string) {
-    this.setupModelHandlingForSaveMesh(filePath, loadFolder)
+  configureForSaveMesh(
+    loadFolder: 'input' | 'output',
+    filePath: string,
+    options?: { silentOnNotFound?: boolean }
+  ) {
+    this.setupModelHandlingForSaveMesh(
+      filePath,
+      loadFolder,
+      options?.silentOnNotFound ?? false
+    )
     this.setupDefaultProperties()
   }
 
@@ -38,7 +47,8 @@ class Load3DConfiguration {
     this.setupModelHandling(
       setting.modelWidget,
       setting.loadFolder,
-      setting.cameraState
+      setting.cameraState,
+      setting.silentOnNotFound ?? false
     )
     this.setupTargetSize(setting.width, setting.height)
     this.setupDefaultProperties(setting.bgImagePath)
@@ -58,8 +68,16 @@ class Load3DConfiguration {
     }
   }
 
-  private setupModelHandlingForSaveMesh(filePath: string, loadFolder: string) {
-    const onModelWidgetUpdate = this.createModelUpdateHandler(loadFolder)
+  private setupModelHandlingForSaveMesh(
+    filePath: string,
+    loadFolder: string,
+    silentOnNotFound: boolean
+  ) {
+    const onModelWidgetUpdate = this.createModelUpdateHandler(
+      loadFolder,
+      undefined,
+      silentOnNotFound
+    )
 
     if (filePath) {
       onModelWidgetUpdate(filePath)
@@ -69,11 +87,13 @@ class Load3DConfiguration {
   private setupModelHandling(
     modelWidget: IBaseWidget,
     loadFolder: string,
-    cameraState?: CameraState
+    cameraState?: CameraState,
+    silentOnNotFound: boolean = false
   ) {
     const onModelWidgetUpdate = this.createModelUpdateHandler(
       loadFolder,
-      cameraState
+      cameraState,
+      silentOnNotFound
     )
     if (modelWidget.value) {
       onModelWidgetUpdate(modelWidget.value)
@@ -241,7 +261,8 @@ class Load3DConfiguration {
 
   private createModelUpdateHandler(
     loadFolder: string,
-    cameraState?: CameraState
+    cameraState?: CameraState,
+    silentOnNotFound: boolean = false
   ) {
     let isFirstLoad = true
     return async (value: string | number | boolean | object) => {
@@ -258,7 +279,7 @@ class Load3DConfiguration {
         )
       )
 
-      await this.load3d.loadModel(modelUrl, filename)
+      await this.load3d.loadModel(modelUrl, filename, { silentOnNotFound })
 
       const modelConfig = this.loadModelConfig()
       this.applyModelConfig(modelConfig)

src/extensions/core/load3d/Load3d.ts

@@ -22,6 +22,7 @@ import type {
   EventCallback,
   GizmoMode,
   Load3DOptions,
+  LoadModelOptions,
   MaterialMode,
   UpDirection
 } from './interfaces'
@@ -500,7 +501,11 @@ class Load3d {
     return this._loadGeneration
   }
 
-  async loadModel(url: string, originalFileName?: string): Promise<void> {
+  async loadModel(
+    url: string,
+    originalFileName?: string,
+    options?: LoadModelOptions
+  ): Promise<void> {
     this._loadGeneration += 1
 
     if (this.loadingPromise) {
@@ -509,7 +514,11 @@ class Load3d {
       } catch (e) {}
     }
 
-    this.loadingPromise = this._loadModelInternal(url, originalFileName)
+    this.loadingPromise = this._loadModelInternal(
+      url,
+      originalFileName,
+      options
+    )
     return this.loadingPromise
   }
 
@@ -525,7 +534,8 @@ class Load3d {
 
   private async _loadModelInternal(
     url: string,
-    originalFileName?: string
+    originalFileName?: string,
+    options?: LoadModelOptions
   ): Promise<void> {
     this.cameraManager.reset()
     this.controlsManager.reset()
@@ -533,7 +543,7 @@ class Load3d {
     this.modelManager.clearModel()
     this.animationManager.dispose()
 
-    await this.loaderManager.loadModel(url, originalFileName)
+    await this.loaderManager.loadModel(url, originalFileName, options)
 
     // Auto-detect and setup animations if present
     if (this.modelManager.currentModel) {

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

@@ -436,6 +436,55 @@ describe('LoaderManager', () => {
       expect(consoleError).toHaveBeenCalled()
     })
 
+    it('suppresses the alert on a 404 when silentOnNotFound is set', async () => {
+      const { lm } = makeLoaderManager()
+      const notFound = new Error(
+        'fetch for "..." responded with 404: Not Found'
+      )
+      meshLoad.mockRejectedValueOnce(notFound)
+      const consoleError = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+
+      await lm.loadModel('api/view?filename=cube.glb', undefined, {
+        silentOnNotFound: true
+      })
+
+      expect(consoleError).toHaveBeenCalled()
+      expect(addAlert).not.toHaveBeenCalledWith(
+        'toastMessages.errorLoadingModel'
+      )
+    })
+
+    it('detects a 404 from the response status field on three.js HttpError', async () => {
+      const { lm } = makeLoaderManager()
+      const httpError = Object.assign(new Error('not found'), {
+        response: { status: 404 }
+      })
+      meshLoad.mockRejectedValueOnce(httpError)
+      vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      await lm.loadModel('api/view?filename=cube.glb', undefined, {
+        silentOnNotFound: true
+      })
+
+      expect(addAlert).not.toHaveBeenCalledWith(
+        'toastMessages.errorLoadingModel'
+      )
+    })
+
+    it('still alerts on non-404 errors when silentOnNotFound is set', async () => {
+      const { lm } = makeLoaderManager()
+      meshLoad.mockRejectedValueOnce(new Error('parse failure: bad header'))
+      vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      await lm.loadModel('api/view?filename=cube.glb', undefined, {
+        silentOnNotFound: true
+      })
+
+      expect(addAlert).toHaveBeenCalledWith('toastMessages.errorLoadingModel')
+    })
+
     it('discards the result of a stale load when a newer one has started', async () => {
       const { lm, modelManager, eventManager } = makeLoaderManager()
 

src/extensions/core/load3d/LoaderManager.ts

@@ -10,10 +10,24 @@ import { PointCloudModelAdapter, getPLYEngine } from './PointCloudModelAdapter'
 import { SplatModelAdapter } from './SplatModelAdapter'
 import type {
   EventManagerInterface,
+  LoadModelOptions,
   LoaderManagerInterface,
   ModelManagerInterface
 } from './interfaces'
 
+/**
+ * three.js's HttpError attaches the failed `Response` to the thrown Error.
+ * fetchModelData throws a plain Error whose message embeds the status code.
+ * Detect both forms so we can keep the toast for parse / network failures
+ * but stay silent on 404 when the caller opted in.
+ */
+function isNotFoundError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+  const withResponse = error as Error & { response?: { status?: number } }
+  if (withResponse.response?.status === 404) return true
+  return /\b404\b/.test(error.message)
+}
+
 /**
  * Default adapter set: mesh + pointCloud + splat. Each adapter declares the
  * file extensions it owns; LoaderManager picks one by extension.
@@ -53,7 +67,11 @@ export class LoaderManager implements LoaderManagerInterface {
 
   dispose(): void {}
 
-  async loadModel(url: string, originalFileName?: string): Promise<void> {
+  async loadModel(
+    url: string,
+    originalFileName?: string,
+    options?: LoadModelOptions
+  ): Promise<void> {
     const loadId = ++this.currentLoadId
 
     try {
@@ -105,7 +123,9 @@ export class LoaderManager implements LoaderManagerInterface {
       if (loadId === this.currentLoadId) {
         this.eventManager.emitEvent('modelLoadingEnd', null)
         console.error('Error loading model:', error)
-        useToastStore().addAlert(t('toastMessages.errorLoadingModel'))
+        if (!(options?.silentOnNotFound && isNotFoundError(error))) {
+          useToastStore().addAlert(t('toastMessages.errorLoadingModel'))
+        }
       }
     }
   }

src/extensions/core/load3d/interfaces.ts

@@ -198,8 +198,23 @@ export interface ModelManagerInterface {
   setupModelMaterials(model: THREE.Object3D): void
 }
 
+export interface LoadModelOptions {
+  /**
+   * When true, suppress the user-facing toast for file-not-found
+   * (HTTP 404) errors. Other errors (parse failures, network drops)
+   * still surface a toast. Use for "preview" surfaces whose model
+   * file is server-produced and may legitimately be absent locally
+   * (e.g. shared workflows on a fresh machine).
+   */
+  silentOnNotFound?: boolean
+}
+
 export interface LoaderManagerInterface {
   init(): void
   dispose(): void
-  loadModel(url: string, originalFileName?: string): Promise<void>
+  loadModel(
+    url: string,
+    originalFileName?: string,
+    options?: LoadModelOptions
+  ): Promise<void>
 }

src/extensions/core/saveMesh.ts

@@ -103,7 +103,9 @@ useExtensionService().registerExtension({
 
           const loadFolder = fileInfo.type as 'input' | 'output'
 
-          config.configureForSaveMesh(loadFolder, filePath)
+          config.configureForSaveMesh(loadFolder, filePath, {
+            silentOnNotFound: true
+          })
 
           if (isAssetPreviewSupported()) {
             const filename = fileInfo.filename ?? ''

src/locales/en/main.json

@@ -2795,51 +2795,55 @@
     "survey": {
       "title": "Cloud Survey",
       "placeholder": "Survey questions placeholder",
-      "steps": {
-        "familiarity": "How familiar are you with ComfyUI?",
-        "purpose": "What will you primarily use ComfyUI for?",
-        "industry": "What's your primary industry?",
-        "making": "What do you plan on making?"
+      "intro": "Help us tailor your ComfyUI experience.",
+      "errors": {
+        "chooseAnOption": "Please choose an option.",
+        "selectAtLeastOne": "Please select at least one option.",
+        "describeAnswer": "Please describe your answer."
       },
-      "questions": {
+      "steps": {
+        "usage": "How do you plan to use ComfyUI?",
         "familiarity": "How familiar are you with ComfyUI?",
-        "purpose": "What will you primarily use ComfyUI for?",
-        "industry": "What's your primary industry?",
-        "making": "What do you plan on making?"
+        "intent": "What do you want to create with ComfyUI?",
+        "source": "Where did you hear about ComfyUI?"
       },
       "options": {
+        "usage": {
+          "personal": "Personal use",
+          "work": "Work",
+          "education": "Education (student or educator)"
+        },
         "familiarity": {
-          "new": "New to ComfyUI (never used it before)",
-          "starting": "Just getting started (following tutorials)",
-          "basics": "Comfortable with basics",
-          "advanced": "Advanced user (custom workflows)",
-          "expert": "Expert (help others)"
+          "new": "New — never used it",
+          "starting": "Beginner — following tutorials",
+          "basics": "Intermediate — comfortable with basics",
+          "advanced": "Advanced — build and edit workflows",
+          "expert": "Expert — I help others"
         },
-        "purpose": {
-          "personal": "Personal projects / hobby",
-          "community": "Community contributions (nodes, workflows, etc.)",
-          "client": "Client work (freelance)",
-          "inhouse": "My own workplace (in-house)",
-          "research": "Academic research"
-        },
-        "industry": {
-          "film_tv_animation": "Film, TV, & animation",
-          "gaming": "Gaming",
-          "marketing": "Marketing & advertising",
-          "architecture": "Architecture",
-          "product_design": "Product & graphic design",
-          "fine_art": "Fine art & illustration",
-          "software": "Software & technology",
-          "education": "Education",
-          "other": "Other",
-          "otherPlaceholder": "Please specify"
-        },
-        "making": {
+        "intent": {
+          "workflows": "Custom workflows or pipelines",
+          "custom_nodes": "Custom nodes",
+          "videos": "Videos",
           "images": "Images",
-          "video": "Video & animation",
-          "3d": "3D assets",
+          "3d_game": "3D assets / game assets",
           "audio": "Audio / music",
-          "custom_nodes": "Custom nodes & workflows"
+          "apps": "Simplified Apps from workflows",
+          "api": "API endpoints to run workflows",
+          "not_sure": "Not sure"
+        },
+        "source": {
+          "youtube": "YouTube",
+          "reddit": "Reddit",
+          "twitter": "Twitter / X",
+          "instagram": "Instagram",
+          "linkedin": "LinkedIn",
+          "friend": "Friend or colleague",
+          "search": "Google / search",
+          "newsletter": "Newsletter or blog",
+          "conference": "Conference or event",
+          "discord": "Discord / community",
+          "github": "GitHub",
+          "other": "Other"
         }
       }
     },
@@ -2909,10 +2913,10 @@
   "cloudForgotPassword_emailRequired": "Email is required",
   "cloudForgotPassword_passwordResetSent": "Password reset sent",
   "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
+  "cloudSurvey_steps_usage": "How do you plan to use ComfyUI?",
   "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
-  "cloudSurvey_steps_purpose": "What will you primarily use ComfyUI for?",
-  "cloudSurvey_steps_industry": "What's your primary industry?",
-  "cloudSurvey_steps_making": "What do you plan on making?",
+  "cloudSurvey_steps_intent": "What do you want to create with ComfyUI?",
+  "cloudSurvey_steps_source": "Where did you hear about ComfyUI?",
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",

src/platform/assets/composables/useAssetSelection.ts

@@ -3,6 +3,10 @@ import { computed, ref } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
+import {
+  getAssetOutputCount,
+  getTotalAssetOutputCount
+} from '@/platform/assets/utils/outputAssetUtil'
 
 export function useAssetSelection() {
   const selectionStore = useAssetSelectionStore()
@@ -142,15 +146,14 @@ export function useAssetSelection() {
    * Same logic as in AssetsSidebarTab.vue
    */
   function getOutputCount(item: AssetItem): number {
-    const count = item.user_metadata?.outputCount
-    return typeof count === 'number' && count > 0 ? count : 1
+    return getAssetOutputCount(item)
   }
 
   /**
    * Get the total output count for given assets
    */
   function getTotalOutputCount(assets: AssetItem[]): number {
-    return assets.reduce((sum, asset) => sum + getOutputCount(asset), 0)
+    return getTotalAssetOutputCount(assets)
   }
 
   /**

src/platform/assets/composables/useMediaAssetActions.test.ts

@@ -1,8 +1,10 @@
 import { createTestingPinia } from '@pinia/testing'
 import { fromAny } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
+import { useToast } from 'primevue/usetoast'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, defineComponent, h, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { MediaAssetKey } from '@/platform/assets/schemas/mediaAssetSchema'
@@ -27,22 +29,22 @@ vi.mock('@/platform/distribution/types', () => ({
   }
 }))
 
-vi.mock('primevue/usetoast', () => ({
-  useToast: () => ({
-    add: vi.fn()
-  })
-}))
+vi.mock('primevue/usetoast', () => {
+  const add = vi.fn()
+  return {
+    useToast: () => ({ add })
+  }
+})
 
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key: string) => key
-  }),
-  createI18n: () => ({
-    global: {
-      t: (key: string) => key
-    }
-  })
-}))
+vi.mock('vue-i18n', () => {
+  const t = vi.fn((key: string) => key)
+  return {
+    useI18n: () => ({ t }),
+    createI18n: () => ({
+      global: { t }
+    })
+  }
+})
 
 const mockShowDialog = vi.hoisted(() => vi.fn())
 vi.mock('@/stores/dialogStore', () => ({
@@ -542,6 +544,94 @@ describe('useMediaAssetActions', () => {
     })
   })
 
+  describe('downloadAssets - export toast file count', () => {
+    beforeEach(() => {
+      mockIsCloud.value = true
+      mockCreateAssetExport.mockClear()
+      mockGetAssetType.mockReturnValue('output')
+      mockGetOutputAssetMetadata.mockImplementation(
+        (meta: Record<string, unknown> | undefined) =>
+          meta && 'jobId' in meta ? meta : null
+      )
+    })
+
+    function createOutputAsset(
+      id: string,
+      name: string,
+      jobId: string,
+      outputCount?: number
+    ): AssetItem {
+      return createMockAsset({
+        id,
+        name,
+        tags: ['output'],
+        user_metadata: { jobId, nodeId: '1', subfolder: '', outputCount }
+      })
+    }
+
+    async function expectExportToastFileCount(count: number) {
+      await vi.waitFor(() => {
+        expect(mockCreateAssetExport).toHaveBeenCalledTimes(1)
+      })
+
+      const { add } = useToast()
+      await vi.waitFor(() => {
+        expect(add).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: 'mediaAsset.selection.exportStarted'
+          })
+        )
+      })
+
+      const { t } = useI18n()
+      expect(t).toHaveBeenCalledWith(
+        'mediaAsset.selection.exportStarted',
+        { count },
+        count
+      )
+    }
+
+    it('should report total file count, not job count, for multi-output jobs', async () => {
+      const j1 = createOutputAsset('a1', 'img1.png', 'job1', 2)
+      const j2 = createOutputAsset('a2', 'img2.png', 'job2', 4)
+
+      const actions = useMediaAssetActions()
+      actions.downloadAssets([j1, j2])
+
+      await expectExportToastFileCount(6)
+    })
+
+    it('should treat assets without outputCount as a single file', async () => {
+      const a1 = createOutputAsset('a1', 'img1.png', 'job1')
+      const a2 = createOutputAsset('a2', 'img2.png', 'job2')
+
+      const actions = useMediaAssetActions()
+      actions.downloadAssets([a1, a2])
+
+      await expectExportToastFileCount(2)
+    })
+
+    it('should mix multi-output and single-output assets correctly', async () => {
+      const j1 = createOutputAsset('a1', 'img1.png', 'job1', 3)
+      const a2 = createOutputAsset('a2', 'img2.png', 'job2')
+
+      const actions = useMediaAssetActions()
+      actions.downloadAssets([j1, a2])
+
+      await expectExportToastFileCount(4)
+    })
+
+    it('should only count duplicate job-level output selections once', async () => {
+      const j1 = createOutputAsset('a1', 'img1.png', 'job1', 3)
+      const j1Duplicate = createOutputAsset('a2', 'img2.png', 'job1', 3)
+
+      const actions = useMediaAssetActions()
+      actions.downloadAssets([j1, j1Duplicate])
+
+      await expectExportToastFileCount(3)
+    })
+  })
+
   describe('deleteAssets - model cache invalidation', () => {
     beforeEach(() => {
       mockIsCloud.value = true

src/platform/assets/composables/useMediaAssetActions.ts

@@ -17,6 +17,7 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { getAssetDisplayName } from '../utils/assetMetadataUtils'
 import { getAssetType } from '../utils/assetTypeUtil'
 import { getAssetUrl } from '../utils/assetUrlUtil'
+import { getAssetOutputCount } from '../utils/outputAssetUtil'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { detectNodeTypeFromFilename } from '@/utils/loaderNodeUtil'
 import { isResultItemType } from '@/utils/typeGuardUtil'
@@ -116,6 +117,8 @@ export function useMediaAssetActions() {
       const jobIds: string[] = []
       const assetIds: string[] = []
       const jobAssetNameFilters: Record<string, string[]> = {}
+      const countedOutputJobIds = new Set<string>()
+      let fileCount = 0
 
       for (const asset of assets) {
         if (getAssetType(asset) === 'output') {
@@ -127,6 +130,15 @@ export function useMediaAssetActions() {
           // Only add name filters when outputCount is unknown.
           // When outputCount is set, the asset is a job-level selection
           // from the gallery and the user wants all outputs for that job.
+          if (metadata?.outputCount != null) {
+            if (!countedOutputJobIds.has(jobId)) {
+              countedOutputJobIds.add(jobId)
+              fileCount += getAssetOutputCount(asset)
+            }
+          } else {
+            fileCount += 1
+          }
+
           if (metadata?.jobId && asset.name && metadata.outputCount == null) {
             if (!jobAssetNameFilters[metadata.jobId]) {
               jobAssetNameFilters[metadata.jobId] = []
@@ -137,6 +149,7 @@ export function useMediaAssetActions() {
           }
         } else {
           assetIds.push(asset.id)
+          fileCount += 1
         }
       }
 
@@ -159,7 +172,11 @@ export function useMediaAssetActions() {
       toast.add({
         severity: 'info',
         summary: t('exportToast.exportStarted'),
-        detail: t('mediaAsset.selection.exportStarted', assets.length),
+        detail: t(
+          'mediaAsset.selection.exportStarted',
+          { count: fileCount },
+          fileCount
+        ),
         life: 3000
       })
     } catch (error) {

src/platform/assets/utils/outputAssetUtil.ts

@@ -38,6 +38,19 @@ function shouldLoadFullOutputs(
   )
 }
 
+export function getAssetOutputCount(
+  asset: Pick<AssetItem, 'user_metadata'>
+): number {
+  const count = asset.user_metadata?.outputCount
+  return typeof count === 'number' && count > 0 ? count : 1
+}
+
+export function getTotalAssetOutputCount(
+  assets: Pick<AssetItem, 'user_metadata'>[]
+): number {
+  return assets.reduce((sum, asset) => sum + getAssetOutputCount(asset), 0)
+}
+
 export function getOutputKey({
   nodeId,
   subfolder,

src/platform/cloud/onboarding/CloudSurveyView.vue

@@ -1,251 +1,40 @@
 <template>
-  <div>
-    <Stepper
-      value="1"
-      class="flex h-[638px] max-h-[80vh] w-[320px] max-w-[90vw] flex-col"
-    >
-      <ProgressBar
-        :value="progressPercent"
-        :show-value="false"
-        class="mb-8 h-2"
-      />
-
-      <StepPanels class="flex flex-1 flex-col p-0">
-        <StepPanel
-          v-slot="{ activateCallback }"
-          value="1"
-          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
-        >
-          <div>
-            <label class="mb-8 block text-lg font-medium">{{
-              t('cloudSurvey_steps_familiarity')
-            }}</label>
-            <div class="flex flex-col gap-6">
-              <div
-                v-for="opt in familiarityOptions"
-                :key="opt.value"
-                class="flex items-center gap-3"
-              >
-                <RadioButton
-                  v-model="surveyData.familiarity"
-                  :input-id="`fam-${opt.value}`"
-                  name="familiarity"
-                  :value="opt.value"
-                />
-                <label
-                  :for="`fam-${opt.value}`"
-                  class="cursor-pointer text-sm"
-                  >{{ opt.label }}</label
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="flex justify-between pt-4">
-            <span />
-            <Button
-              :disabled="!validStep1"
-              class="h-10 w-full border-none text-white"
-              @click="goTo(2, activateCallback)"
-            >
-              {{ $t('g.next') }}
-            </Button>
-          </div>
-        </StepPanel>
-
-        <StepPanel
-          v-slot="{ activateCallback }"
-          value="2"
-          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
-        >
-          <div>
-            <label class="mb-8 block text-lg font-medium">{{
-              t('cloudSurvey_steps_purpose')
-            }}</label>
-            <div class="flex flex-col gap-6">
-              <div
-                v-for="opt in purposeOptions"
-                :key="opt.value"
-                class="flex items-center gap-3"
-              >
-                <RadioButton
-                  v-model="surveyData.useCase"
-                  :input-id="`purpose-${opt.value}`"
-                  name="purpose"
-                  :value="opt.value"
-                />
-                <label
-                  :for="`purpose-${opt.value}`"
-                  class="cursor-pointer text-sm"
-                  >{{ opt.label }}</label
-                >
-              </div>
-            </div>
-            <div v-if="surveyData.useCase === 'other'" class="mt-4 ml-8">
-              <InputText
-                v-model="surveyData.useCaseOther"
-                class="w-full"
-                :placeholder="
-                  $t('cloudOnboarding.survey.options.industry.otherPlaceholder')
-                "
-              />
-            </div>
-          </div>
-
-          <div class="flex gap-6 pt-4">
-            <Button
-              variant="secondary"
-              class="flex-1 text-white"
-              @click="goTo(1, activateCallback)"
-            >
-              {{ $t('g.back') }}
-            </Button>
-            <Button
-              :disabled="!validStep2"
-              class="h-10 flex-1 text-white"
-              @click="goTo(3, activateCallback)"
-            >
-              {{ $t('g.next') }}
-            </Button>
-          </div>
-        </StepPanel>
-
-        <StepPanel
-          v-slot="{ activateCallback }"
-          value="3"
-          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
-        >
-          <div>
-            <label class="mb-8 block text-lg font-medium">{{
-              t('cloudSurvey_steps_industry')
-            }}</label>
-            <div class="flex flex-col gap-6">
-              <div
-                v-for="opt in industryOptions"
-                :key="opt.value"
-                class="flex items-center gap-3"
-              >
-                <RadioButton
-                  v-model="surveyData.industry"
-                  :input-id="`industry-${opt.value}`"
-                  name="industry"
-                  :value="opt.value"
-                />
-                <label
-                  :for="`industry-${opt.value}`"
-                  class="cursor-pointer text-sm"
-                  >{{ opt.label }}</label
-                >
-              </div>
-            </div>
-            <div v-if="surveyData.industry === 'other'" class="mt-4 ml-8">
-              <InputText
-                v-model="surveyData.industryOther"
-                class="w-full"
-                :placeholder="
-                  $t('cloudOnboarding.survey.options.industry.otherPlaceholder')
-                "
-              />
-            </div>
-          </div>
-
-          <div class="flex gap-6 pt-4">
-            <Button
-              variant="secondary"
-              class="flex-1 text-white"
-              @click="goTo(2, activateCallback)"
-            >
-              {{ $t('g.back') }}
-            </Button>
-            <Button
-              :disabled="!validStep3"
-              class="h-10 flex-1 border-none text-white"
-              @click="goTo(4, activateCallback)"
-            >
-              {{ $t('g.next') }}
-            </Button>
-          </div>
-        </StepPanel>
-
-        <StepPanel
-          v-slot="{ activateCallback }"
-          value="4"
-          class="flex min-h-full flex-1 flex-col justify-between bg-transparent"
-        >
-          <div>
-            <label class="mb-8 block text-lg font-medium">{{
-              t('cloudSurvey_steps_making')
-            }}</label>
-            <div class="flex flex-col gap-6">
-              <div
-                v-for="opt in makingOptions"
-                :key="opt.value"
-                class="flex items-center gap-3"
-              >
-                <Checkbox
-                  v-model="surveyData.making"
-                  :input-id="`making-${opt.value}`"
-                  :value="opt.value"
-                />
-                <label
-                  :for="`making-${opt.value}`"
-                  class="cursor-pointer text-sm"
-                  >{{ opt.label }}</label
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="flex gap-6 pt-4">
-            <Button
-              variant="secondary"
-              class="flex-1 text-white"
-              @click="goTo(3, activateCallback)"
-            >
-              {{ $t('g.back') }}
-            </Button>
-            <Button
-              :disabled="!validStep4 || isSubmitting"
-              :loading="isSubmitting"
-              class="h-10 flex-1 border-none text-white"
-              @click="onSubmitSurvey"
-            >
-              {{ $t('g.submit') }}
-            </Button>
-          </div>
-        </StepPanel>
-      </StepPanels>
-    </Stepper>
+  <div class="flex h-[700px] max-h-[85vh] w-[320px] max-w-[90vw] flex-col">
+    <DynamicSurveyForm
+      :key="activeSurvey.version"
+      :survey="activeSurvey"
+      :is-submitting="isSubmitting"
+      @submit="onSubmitSurvey"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
-import InputText from 'primevue/inputtext'
-import ProgressBar from 'primevue/progressbar'
-import RadioButton from 'primevue/radiobutton'
-import StepPanel from 'primevue/steppanel'
-import StepPanels from 'primevue/steppanels'
-import Stepper from 'primevue/stepper'
 import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import {
   getSurveyCompletedStatus,
   submitSurvey
 } from '@/platform/cloud/onboarding/auth'
 import { isCloud } from '@/platform/distribution/types'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { useTelemetry } from '@/platform/telemetry'
 
-const { t } = useI18n()
+import DynamicSurveyForm from './survey/DynamicSurveyForm.vue'
+import { defaultOnboardingSurvey } from './survey/defaultSurveySchema'
+
 const router = useRouter()
 const { flags } = useFeatureFlags()
 const onboardingSurveyEnabled = computed(() => flags.onboardingSurveyEnabled)
 
-// Check if survey is already completed on mount
+const activeSurvey = computed(
+  () => remoteConfig.value.onboarding_survey ?? defaultOnboardingSurvey
+)
+
+const isSubmitting = ref(false)
+
 onMounted(async () => {
   if (!onboardingSurveyEnabled.value) {
     await router.replace({ name: 'cloud-user-check' })
@@ -254,156 +43,31 @@ onMounted(async () => {
   try {
     const surveyCompleted = await getSurveyCompletedStatus()
     if (surveyCompleted) {
-      // User already completed survey, return to onboarding flow
       await router.replace({ name: 'cloud-user-check' })
-    } else {
-      // Track survey opened event
-      if (isCloud) {
-        useTelemetry()?.trackSurvey('opened')
-      }
+      return
+    }
+    if (isCloud) {
+      useTelemetry()?.trackSurvey('opened')
     }
   } catch (error) {
     console.error('Failed to check survey status:', error)
   }
 })
 
-const activeStep = ref(1)
-const totalSteps = 4
-const progressPercent = computed(() =>
-  Math.max(20, Math.min(100, ((activeStep.value - 1) / (totalSteps - 1)) * 100))
-)
-
-const isSubmitting = ref(false)
-
-const surveyData = ref({
-  familiarity: '',
-  useCase: '',
-  useCaseOther: '',
-  industry: '',
-  industryOther: '',
-  making: [] as string[]
-})
-
-// Options
-const familiarityOptions = [
-  { label: 'New to ComfyUI (never used it before)', value: 'new' },
-  { label: 'Just getting started (following tutorials)', value: 'starting' },
-  { label: 'Comfortable with basics', value: 'basics' },
-  { label: 'Advanced user (custom workflows)', value: 'advanced' },
-  { label: 'Expert (help others)', value: 'expert' }
-]
-
-const purposeOptions = [
-  { label: 'Personal projects/hobby', value: 'personal' },
-  {
-    label: 'Community contributions (nodes, workflows, etc.)',
-    value: 'community'
-  },
-  { label: 'Client work (freelance)', value: 'client' },
-  { label: 'My own workplace (in-house)', value: 'inhouse' },
-  { label: 'Academic research', value: 'research' },
-  { label: 'Other', value: 'other' }
-]
-
-const industryOptions = [
-  { label: 'Film, TV, & animation', value: 'film_tv_animation' },
-  { label: 'Gaming', value: 'gaming' },
-  { label: 'Marketing & advertising', value: 'marketing' },
-  { label: 'Architecture', value: 'architecture' },
-  { label: 'Product & graphic design', value: 'product_design' },
-  { label: 'Fine art & illustration', value: 'fine_art' },
-  { label: 'Software & technology', value: 'software' },
-  { label: 'Education', value: 'education' },
-  { label: 'Other', value: 'other' }
-]
-
-const makingOptions = [
-  { label: 'Images', value: 'images' },
-  { label: 'Video & animation', value: 'video' },
-  { label: '3D assets', value: '3d' },
-  { label: 'Audio/music', value: 'audio' },
-  { label: 'Custom nodes & workflows', value: 'custom_nodes' }
-]
-
-// Validation per step
-const validStep1 = computed(() => !!surveyData.value.familiarity)
-const validStep2 = computed(() => {
-  if (!surveyData.value.useCase) return false
-  if (surveyData.value.useCase === 'other') {
-    return !!surveyData.value.useCaseOther?.trim()
+const onSubmitSurvey = async (payload: Record<string, unknown>) => {
+  if (!onboardingSurveyEnabled.value) {
+    await router.replace({ name: 'cloud-user-check' })
+    return
   }
-  return true
-})
-const validStep3 = computed(() => {
-  if (!surveyData.value.industry) return false
-  if (surveyData.value.industry === 'other') {
-    return !!surveyData.value.industryOther?.trim()
-  }
-  return true
-})
-const validStep4 = computed(() => surveyData.value.making.length > 0)
-
-const changeActiveStep = (step: number) => {
-  activeStep.value = step
-}
-
-const goTo = (step: number, activate: (val: string | number) => void) => {
-  // keep Stepper panel and progress bar in sync; Stepper values are strings
-  changeActiveStep(step)
-  activate(String(step))
-}
-
-// Submit
-const onSubmitSurvey = async () => {
+  isSubmitting.value = true
   try {
-    if (!onboardingSurveyEnabled.value) {
-      await router.replace({ name: 'cloud-user-check' })
-      return
-    }
-    isSubmitting.value = true
-    // prepare payload with consistent structure
-    const payload = {
-      familiarity: surveyData.value.familiarity,
-      useCase:
-        surveyData.value.useCase === 'other'
-          ? surveyData.value.useCaseOther?.trim() || 'other'
-          : surveyData.value.useCase,
-      industry:
-        surveyData.value.industry === 'other'
-          ? surveyData.value.industryOther?.trim() || 'other'
-          : surveyData.value.industry,
-      making: surveyData.value.making
-    }
-
     await submitSurvey(payload)
-
-    // Track survey submitted event with responses
     if (isCloud) {
-      useTelemetry()?.trackSurvey('submitted', {
-        industry: payload.industry,
-        useCase: payload.useCase,
-        familiarity: payload.familiarity,
-        making: payload.making
-      })
+      useTelemetry()?.trackSurvey('submitted', payload)
     }
-
     await router.push({ name: 'cloud-user-check' })
   } finally {
     isSubmitting.value = false
   }
 }
 </script>
-
-<style scoped>
-:deep(.p-progressbar .p-progressbar-value) {
-  background-color: #f0ff41 !important;
-}
-:deep(.p-radiobutton-checked .p-radiobutton-box) {
-  background-color: #f0ff41 !important;
-  border-color: #f0ff41 !important;
-}
-:deep(.p-checkbox-checked .p-checkbox-box) {
-  background-color: #f0ff41 !important;
-  border-color: #f0ff41 !important;
-}
-</style>

src/platform/cloud/onboarding/survey/DynamicSurveyField.vue

@@ -0,0 +1,161 @@
+<template>
+  <fieldset
+    v-if="field.type !== 'text'"
+    :aria-invalid="Boolean(errorMessage)"
+    class="flex flex-col gap-4 border-0 p-0"
+  >
+    <legend class="mb-2 block text-lg font-medium text-base-foreground">
+      {{ resolvedLabel }}
+    </legend>
+    <template v-if="field.type === 'single'">
+      <div
+        v-for="option in field.options"
+        :key="option.value"
+        class="flex items-center gap-3"
+      >
+        <RadioButton
+          :model-value="(modelValue as string) ?? ''"
+          :input-id="`${field.id}-${option.value}`"
+          :name="field.id"
+          :value="option.value"
+          :dt="checkedTokens"
+          @update:model-value="onSingleChange"
+        />
+        <label
+          :for="`${field.id}-${option.value}`"
+          class="cursor-pointer text-sm"
+          >{{ resolveOptionLabel(option) }}</label
+        >
+      </div>
+    </template>
+    <template v-else>
+      <div
+        v-for="option in field.options"
+        :key="option.value"
+        class="flex items-center gap-3"
+      >
+        <Checkbox
+          :model-value="(modelValue as string[]) ?? []"
+          :input-id="`${field.id}-${option.value}`"
+          :value="option.value"
+          :dt="checkedTokens"
+          @update:model-value="onMultiChange"
+        />
+        <label
+          :for="`${field.id}-${option.value}`"
+          class="cursor-pointer text-sm"
+          >{{ resolveOptionLabel(option) }}</label
+        >
+      </div>
+    </template>
+    <Input
+      v-if="field.allowOther && field.otherFieldId && modelValue === 'other'"
+      :model-value="(otherValue as string) ?? ''"
+      :placeholder="
+        $t(
+          `cloudOnboarding.survey.options.${field.id}.otherPlaceholder`,
+          $t('cloudOnboarding.survey.otherPlaceholder')
+        )
+      "
+      class="ml-1"
+      @update:model-value="onOtherChange"
+    />
+    <p v-if="errorMessage" class="text-danger text-xs">{{ errorMessage }}</p>
+  </fieldset>
+  <div v-else class="flex flex-col gap-3">
+    <label
+      :for="controlId"
+      class="block text-lg font-medium text-base-foreground"
+    >
+      {{ resolvedLabel }}
+    </label>
+    <Input
+      :id="controlId"
+      :model-value="(modelValue as string) ?? ''"
+      :placeholder="field.placeholder"
+      :aria-invalid="Boolean(errorMessage)"
+      @update:model-value="onTextChange"
+    />
+    <p v-if="errorMessage" class="text-danger text-xs">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
+import RadioButton from 'primevue/radiobutton'
+import { useId } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Input from '@/components/ui/input/Input.vue'
+import type {
+  LocalizedString,
+  OnboardingSurveyField,
+  OnboardingSurveyOption
+} from '@/platform/remoteConfig/types'
+
+const {
+  field,
+  modelValue,
+  otherValue,
+  errorMessage = ''
+} = defineProps<{
+  field: OnboardingSurveyField
+  modelValue: string | string[] | undefined
+  otherValue?: string
+  errorMessage?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[]]
+  'update:otherValue': [value: string]
+}>()
+
+const { t, te, locale } = useI18n()
+const controlId = useId()
+
+const resolveLocalized = (value: LocalizedString): string => {
+  if (typeof value === 'string') return value
+  return value[locale.value] ?? value.en ?? Object.values(value)[0] ?? ''
+}
+
+const checkedTokens = {
+  checked: {
+    background: 'var(--color-electric-400)',
+    borderColor: 'var(--color-electric-400)',
+    hoverBackground: 'var(--color-electric-400)',
+    hoverBorderColor: 'var(--color-electric-400)'
+  }
+}
+
+const resolvedLabel = (() => {
+  if (field.labelKey && te(field.labelKey)) return t(field.labelKey)
+  if (field.label != null) return resolveLocalized(field.label)
+  return field.id
+})()
+
+const resolveOptionLabel = (option: OnboardingSurveyOption): string => {
+  if (option.labelKey && te(option.labelKey)) return t(option.labelKey)
+  if (option.label != null) return resolveLocalized(option.label)
+  return option.value
+}
+
+const onSingleChange = (value: unknown) => {
+  emit('update:modelValue', typeof value === 'string' ? value : '')
+}
+const onMultiChange = (value: unknown) => {
+  if (!Array.isArray(value)) {
+    emit('update:modelValue', [])
+    return
+  }
+  emit(
+    'update:modelValue',
+    value.filter((v): v is string => typeof v === 'string')
+  )
+}
+const onTextChange = (value: string | number | undefined) => {
+  emit('update:modelValue', String(value ?? ''))
+}
+const onOtherChange = (value: string | number | undefined) => {
+  emit('update:otherValue', String(value ?? ''))
+}
+</script>

src/platform/cloud/onboarding/survey/DynamicSurveyForm.test.ts

@@ -0,0 +1,320 @@
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/vue'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+
+import DynamicSurveyForm from './DynamicSurveyForm.vue'
+
+const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { back: 'Back', next: 'Next', submit: 'Submit' },
+      cloudOnboarding: {
+        survey: {
+          intro: 'Help us tailor your ComfyUI experience.',
+          errors: {
+            chooseAnOption: 'Please choose an option.',
+            selectAtLeastOne: 'Please select at least one option.',
+            describeAnswer: 'Please describe your answer.'
+          }
+        }
+      }
+    }
+  }
+})
+
+const renderForm = (survey: OnboardingSurvey) =>
+  render(DynamicSurveyForm, {
+    global: { plugins: [PrimeVue, i18n] },
+    props: { survey }
+  })
+
+const twoStepSurvey: OnboardingSurvey = {
+  version: 1,
+  introKey: 'cloudOnboarding.survey.intro',
+  fields: [
+    {
+      id: 'usage',
+      type: 'single',
+      label: 'How do you plan to use ComfyUI?',
+      required: true,
+      options: [
+        { value: 'personal', label: 'Personal use' },
+        { value: 'work', label: 'Work' }
+      ]
+    },
+    {
+      id: 'intent',
+      type: 'multi',
+      label: 'What do you want to create with ComfyUI?',
+      required: true,
+      options: [
+        { value: 'images', label: 'Images' },
+        { value: 'videos', label: 'Videos' }
+      ]
+    }
+  ]
+}
+
+describe('DynamicSurveyForm', () => {
+  it('renders the intro text and the first field options', () => {
+    renderForm(twoStepSurvey)
+
+    expect(
+      screen.getByText('Help us tailor your ComfyUI experience.')
+    ).toBeInTheDocument()
+    expect(screen.getByText('How do you plan to use ComfyUI?')).toBeVisible()
+    expect(screen.getByLabelText('Personal use')).toBeInTheDocument()
+    expect(screen.getByLabelText('Work')).toBeInTheDocument()
+  })
+
+  it('disables Next until the user selects an option, then advances', async () => {
+    const user = userEvent.setup()
+    renderForm(twoStepSurvey)
+
+    const next = screen.getByRole('button', { name: 'Next' })
+    expect(next).toBeDisabled()
+
+    await user.click(screen.getByLabelText('Personal use'))
+    expect(next).toBeEnabled()
+
+    await user.click(next)
+    await flushPromises()
+
+    expect(
+      screen.getByText('What do you want to create with ComfyUI?')
+    ).toBeVisible()
+    expect(screen.getByLabelText('Images')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument()
+  })
+
+  it('navigates back to the previous step', async () => {
+    const user = userEvent.setup()
+    renderForm(twoStepSurvey)
+
+    await user.click(screen.getByLabelText('Personal use'))
+    await user.click(screen.getByRole('button', { name: 'Next' }))
+    await flushPromises()
+    expect(
+      screen.getByText('What do you want to create with ComfyUI?')
+    ).toBeVisible()
+
+    await user.click(screen.getByRole('button', { name: 'Back' }))
+    await flushPromises()
+    expect(screen.getByText('How do you plan to use ComfyUI?')).toBeVisible()
+  })
+
+  it('resolves option and field labels via labelKey when provided', () => {
+    const localizedI18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          g: { back: 'Back', next: 'Next', submit: 'Submit' },
+          cloudOnboarding: {
+            survey: {
+              intro: 'Help us tailor your ComfyUI experience.',
+              errors: {
+                chooseAnOption: '',
+                selectAtLeastOne: '',
+                describeAnswer: ''
+              }
+            }
+          },
+          survey_label: 'Localized question?',
+          survey_a: 'Localized A',
+          survey_b: 'Localized B'
+        }
+      }
+    })
+
+    render(DynamicSurveyForm, {
+      global: { plugins: [PrimeVue, localizedI18n] },
+      props: {
+        survey: {
+          version: 1,
+          fields: [
+            {
+              id: 'q',
+              type: 'single',
+              labelKey: 'survey_label',
+              required: true,
+              options: [
+                { value: 'a', labelKey: 'survey_a' },
+                { value: 'b', labelKey: 'survey_b' }
+              ]
+            }
+          ]
+        }
+      }
+    })
+
+    expect(screen.getByText('Localized question?')).toBeVisible()
+    expect(screen.getByLabelText('Localized A')).toBeInTheDocument()
+    expect(screen.getByLabelText('Localized B')).toBeInTheDocument()
+  })
+
+  it('renders server-supplied translations from a label locale map', () => {
+    const koreanI18n = createI18n({
+      legacy: false,
+      locale: 'ko',
+      fallbackLocale: 'en',
+      messages: {
+        en: {
+          g: { back: 'Back', next: 'Next', submit: 'Submit' },
+          cloudOnboarding: {
+            survey: {
+              intro: '',
+              errors: {
+                chooseAnOption: '',
+                selectAtLeastOne: '',
+                describeAnswer: ''
+              }
+            }
+          }
+        },
+        ko: { g: { back: '뒤로', next: '다음', submit: '제출' } }
+      }
+    })
+
+    render(DynamicSurveyForm, {
+      global: { plugins: [PrimeVue, koreanI18n] },
+      props: {
+        survey: {
+          version: 1,
+          fields: [
+            {
+              id: 'usage',
+              type: 'single',
+              label: {
+                en: 'How will you use it?',
+                ko: '어떻게 사용하시겠어요?'
+              },
+              required: true,
+              options: [
+                {
+                  value: 'personal',
+                  label: { en: 'Personal use', ko: '개인 용도' }
+                },
+                { value: 'work', label: { en: 'Work', ko: '업무' } }
+              ]
+            }
+          ]
+        }
+      }
+    })
+
+    expect(screen.getByText('어떻게 사용하시겠어요?')).toBeVisible()
+    expect(screen.getByLabelText('개인 용도')).toBeInTheDocument()
+    expect(screen.getByLabelText('업무')).toBeInTheDocument()
+  })
+
+  it('falls back to English when current locale missing from label map', () => {
+    const fallbackI18n = createI18n({
+      legacy: false,
+      locale: 'fr',
+      fallbackLocale: 'en',
+      messages: {
+        en: {
+          g: { back: 'Back', next: 'Next', submit: 'Submit' },
+          cloudOnboarding: {
+            survey: {
+              intro: '',
+              errors: {
+                chooseAnOption: '',
+                selectAtLeastOne: '',
+                describeAnswer: ''
+              }
+            }
+          }
+        },
+        fr: {}
+      }
+    })
+
+    render(DynamicSurveyForm, {
+      global: { plugins: [PrimeVue, fallbackI18n] },
+      props: {
+        survey: {
+          version: 1,
+          fields: [
+            {
+              id: 'q',
+              type: 'single',
+              label: { en: 'English question', ko: '한국어' },
+              required: true,
+              options: [
+                { value: 'a', label: { en: 'English A', ko: '한국어 A' } }
+              ]
+            }
+          ]
+        }
+      }
+    })
+
+    // fr is not in the map → falls back to en
+    expect(screen.getByText('English question')).toBeVisible()
+    expect(screen.getByLabelText('English A')).toBeInTheDocument()
+  })
+
+  it('allows advancing past an optional field while still empty', async () => {
+    const user = userEvent.setup()
+    render(DynamicSurveyForm, {
+      global: { plugins: [PrimeVue, i18n] },
+      props: {
+        survey: {
+          version: 1,
+          fields: [
+            {
+              id: 'q1',
+              type: 'single',
+              label: 'Optional question?',
+              options: [
+                { value: 'a', label: 'A' },
+                { value: 'b', label: 'B' }
+              ]
+              // no required: true — should be skippable
+            },
+            {
+              id: 'q2',
+              type: 'single',
+              label: 'Required question?',
+              required: true,
+              options: [{ value: 'c', label: 'C' }]
+            }
+          ]
+        }
+      }
+    })
+
+    const next = screen.getByRole('button', { name: 'Next' })
+    expect(next).toBeEnabled()
+
+    await user.click(next)
+    await flushPromises()
+    expect(screen.getByText('Required question?')).toBeVisible()
+  })
+
+  it('enables Submit only after the multi-select field has at least one choice', async () => {
+    const user = userEvent.setup()
+    renderForm(twoStepSurvey)
+
+    await user.click(screen.getByLabelText('Work'))
+    await user.click(screen.getByRole('button', { name: 'Next' }))
+    await flushPromises()
+
+    const submitBtn = screen.getByRole('button', { name: 'Submit' })
+    expect(submitBtn).toBeDisabled()
+
+    await user.click(screen.getByRole('checkbox', { name: /Images/i }))
+    await flushPromises()
+    expect(submitBtn).toBeEnabled()
+  })
+})

src/platform/cloud/onboarding/survey/DynamicSurveyForm.vue

@@ -0,0 +1,212 @@
+<template>
+  <form class="flex size-full flex-col" @submit.prevent="onSubmit">
+    <p v-if="introText" class="mb-4 text-sm text-muted">
+      {{ introText }}
+    </p>
+    <div
+      class="mb-8 h-2 w-full overflow-hidden rounded-full bg-secondary-background"
+    >
+      <div
+        class="h-full bg-electric-400 transition-[width] duration-300 ease-out"
+        :style="{ width: `${progressPercent}%` }"
+      />
+    </div>
+
+    <div class="flex flex-1 flex-col overflow-hidden">
+      <div
+        v-if="currentField"
+        :key="currentField.id"
+        class="flex flex-1 flex-col gap-4 overflow-y-auto pr-1"
+      >
+        <DynamicSurveyField
+          :field="currentField"
+          :model-value="values[currentField.id]"
+          :other-value="
+            currentField.otherFieldId
+              ? (values[currentField.otherFieldId] as string)
+              : undefined
+          "
+          :error-message="
+            errors[currentField.id] ??
+            (currentField.otherFieldId
+              ? errors[currentField.otherFieldId]
+              : undefined)
+          "
+          @update:model-value="(value) => onFieldChange(currentField.id, value)"
+          @update:other-value="
+            (value) =>
+              currentField.otherFieldId &&
+              onFieldChange(currentField.otherFieldId, value)
+          "
+        />
+      </div>
+    </div>
+
+    <div class="flex gap-6 pt-4">
+      <Button
+        v-if="!isFirst"
+        type="button"
+        variant="secondary"
+        class="h-10 flex-1 text-white"
+        @click="goPrevious"
+      >
+        {{ $t('g.back') }}
+      </Button>
+      <span v-else class="flex-1" />
+      <Button
+        v-if="!isLast"
+        type="button"
+        :disabled="!isCurrentValid"
+        :class="
+          cn(
+            'h-10 flex-1 border-none',
+            isCurrentValid
+              ? 'bg-electric-400 text-black hover:bg-electric-400/85'
+              : 'bg-zinc-800 text-zinc-500'
+          )
+        "
+        @click="goNext"
+      >
+        {{ $t('g.next') }}
+      </Button>
+      <Button
+        v-else
+        type="submit"
+        :disabled="!isCurrentValid || isSubmitting"
+        :loading="isSubmitting"
+        :class="
+          cn(
+            'h-10 flex-1 border-none',
+            isCurrentValid && !isSubmitting
+              ? 'bg-electric-400 text-black hover:bg-electric-400/85'
+              : 'bg-zinc-800 text-zinc-500'
+          )
+        "
+      >
+        {{ $t('g.submit') }}
+      </Button>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+
+import DynamicSurveyField from './DynamicSurveyField.vue'
+import {
+  buildInitialValues,
+  buildSubmissionPayload,
+  buildZodSchema,
+  prepareSurvey,
+  visibleFields
+} from './surveySchema'
+import type { SurveyValues } from './surveySchema'
+
+const { survey } = defineProps<{
+  survey: OnboardingSurvey
+  isSubmitting?: boolean
+}>()
+
+const emit = defineEmits<{
+  submit: [payload: Record<string, unknown>]
+}>()
+
+const { t, te } = useI18n()
+
+const preparedSurvey = computed(() => prepareSurvey(survey))
+
+const introText = computed(() => {
+  const key = preparedSurvey.value.introKey
+  if (!key) return ''
+  return te(key) ? t(key) : ''
+})
+
+const liveValues = ref<SurveyValues>(buildInitialValues(preparedSurvey.value))
+
+const validationSchema = computed(() =>
+  toTypedSchema(buildZodSchema(preparedSurvey.value, liveValues.value, t))
+)
+
+const { values, errors, setFieldValue, validate, resetForm } =
+  useForm<SurveyValues>({
+    initialValues: liveValues.value,
+    validationSchema
+  })
+
+watch(
+  () => survey,
+  () => {
+    const fresh = buildInitialValues(preparedSurvey.value)
+    liveValues.value = { ...fresh }
+    resetForm({ values: fresh })
+    stepIndex.value = 0
+  }
+)
+
+const visible = computed(() =>
+  visibleFields(preparedSurvey.value, values as SurveyValues)
+)
+const stepIndex = ref(0)
+
+const currentField = computed(() => visible.value[stepIndex.value])
+const isFirst = computed(() => stepIndex.value === 0)
+const isLast = computed(() => stepIndex.value === visible.value.length - 1)
+
+const totalSteps = computed(() => Math.max(visible.value.length, 1))
+const progressPercent = computed(() =>
+  Math.max(
+    100 / totalSteps.value,
+    ((stepIndex.value + 1) / totalSteps.value) * 100
+  )
+)
+
+const isCurrentValid = computed(() => {
+  const field = currentField.value
+  if (!field) return false
+
+  const value = values[field.id]
+  const isEmpty =
+    field.type === 'multi'
+      ? !Array.isArray(value) || value.length === 0
+      : typeof value !== 'string' || value.length === 0
+
+  if (isEmpty) return !field.required
+
+  if (field.allowOther && field.otherFieldId && value === 'other') {
+    const other = values[field.otherFieldId]
+    return typeof other === 'string' && other.trim().length > 0
+  }
+  return true
+})
+
+const onFieldChange = (id: string, value: string | string[]) => {
+  setFieldValue(id, value)
+  liveValues.value = { ...liveValues.value, [id]: value }
+  if (stepIndex.value > visible.value.length - 1) {
+    stepIndex.value = Math.max(0, visible.value.length - 1)
+  }
+}
+
+const goNext = () => {
+  if (stepIndex.value < visible.value.length - 1) stepIndex.value += 1
+}
+const goPrevious = () => {
+  if (stepIndex.value > 0) stepIndex.value -= 1
+}
+
+const onSubmit = async () => {
+  const result = await validate()
+  if (!result.valid) return
+  emit(
+    'submit',
+    buildSubmissionPayload(preparedSurvey.value, values as SurveyValues)
+  )
+}
+</script>

src/platform/cloud/onboarding/survey/defaultSurveySchema.ts

@@ -0,0 +1,76 @@
+import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+
+const optionsFor = (
+  fieldId: string,
+  values: string[]
+): { value: string; labelKey: string }[] =>
+  values.map((value) => ({
+    value,
+    labelKey: `cloudOnboarding.survey.options.${fieldId}.${value}`
+  }))
+
+export const defaultOnboardingSurvey: OnboardingSurvey = {
+  version: 2,
+  introKey: 'cloudOnboarding.survey.intro',
+  fields: [
+    {
+      id: 'usage',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_usage',
+      required: true,
+      options: optionsFor('usage', ['personal', 'work', 'education'])
+    },
+    {
+      id: 'familiarity',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_familiarity',
+      required: true,
+      options: optionsFor('familiarity', [
+        'new',
+        'starting',
+        'basics',
+        'advanced',
+        'expert'
+      ])
+    },
+    {
+      id: 'intent',
+      type: 'multi',
+      labelKey: 'cloudSurvey_steps_intent',
+      required: true,
+      randomize: true,
+      options: optionsFor('intent', [
+        'workflows',
+        'custom_nodes',
+        'videos',
+        'images',
+        '3d_game',
+        'audio',
+        'apps',
+        'api',
+        'not_sure'
+      ])
+    },
+    {
+      id: 'source',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_source',
+      required: true,
+      randomize: true,
+      options: optionsFor('source', [
+        'youtube',
+        'reddit',
+        'twitter',
+        'instagram',
+        'linkedin',
+        'friend',
+        'search',
+        'newsletter',
+        'conference',
+        'discord',
+        'github',
+        'other'
+      ])
+    }
+  ]
+}

src/platform/cloud/onboarding/survey/surveySchema.test.ts

@@ -0,0 +1,248 @@
+import { describe, expect, it } from 'vitest'
+
+import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+
+import {
+  buildInitialValues,
+  buildSubmissionPayload,
+  buildZodSchema,
+  prepareSurvey,
+  visibleFields
+} from './surveySchema'
+
+const baseSurvey: OnboardingSurvey = {
+  version: 1,
+  fields: [
+    {
+      id: 'usage',
+      type: 'single',
+      required: true,
+      options: [
+        { value: 'work', label: 'Work' },
+        { value: 'personal', label: 'Personal' }
+      ]
+    },
+    {
+      id: 'role',
+      type: 'single',
+      required: true,
+      showWhen: { field: 'usage', equals: 'work' },
+      options: [{ value: 'engineer', label: 'Engineer' }]
+    },
+    {
+      id: 'industry',
+      type: 'single',
+      required: true,
+      allowOther: true,
+      otherFieldId: 'industryOther',
+      showWhen: { field: 'usage', equals: 'work' },
+      options: [
+        { value: 'tech', label: 'Tech' },
+        { value: 'other', label: 'Other' }
+      ]
+    },
+    {
+      id: 'making',
+      type: 'multi',
+      required: true,
+      options: [
+        { value: 'video', label: 'Video' },
+        { value: 'images', label: 'Images' }
+      ]
+    }
+  ]
+}
+
+describe('visibleFields', () => {
+  it('hides fields when showWhen does not match', () => {
+    const visible = visibleFields(baseSurvey, { usage: 'personal' })
+    expect(visible.map((f) => f.id)).toEqual(['usage', 'making'])
+  })
+
+  it('shows gated fields when showWhen matches', () => {
+    const visible = visibleFields(baseSurvey, { usage: 'work' })
+    expect(visible.map((f) => f.id)).toEqual([
+      'usage',
+      'role',
+      'industry',
+      'making'
+    ])
+  })
+
+  it('treats array equals as membership', () => {
+    const survey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'role',
+          type: 'single',
+          showWhen: { field: 'usage', equals: ['work', 'education'] }
+        }
+      ]
+    }
+    expect(visibleFields(survey, { usage: 'education' })).toHaveLength(1)
+    expect(visibleFields(survey, { usage: 'personal' })).toHaveLength(0)
+  })
+
+  it('intersects multi-select source values with expected set', () => {
+    const survey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'follow_up',
+          type: 'single',
+          showWhen: { field: 'making', equals: ['video', '3d'] }
+        }
+      ]
+    }
+    expect(visibleFields(survey, { making: [] })).toHaveLength(0)
+    expect(visibleFields(survey, { making: ['images'] })).toHaveLength(0)
+    expect(visibleFields(survey, { making: ['images', 'video'] })).toHaveLength(
+      1
+    )
+  })
+})
+
+describe('buildInitialValues', () => {
+  it('initializes single fields to empty string and multi to empty array', () => {
+    expect(buildInitialValues(baseSurvey)).toMatchObject({
+      usage: '',
+      role: '',
+      industry: '',
+      industryOther: '',
+      making: []
+    })
+  })
+})
+
+describe('buildZodSchema', () => {
+  it('omits hidden fields from validation', () => {
+    const schema = buildZodSchema(baseSurvey, { usage: 'personal' })
+    const result = schema.safeParse({ usage: 'personal', making: ['video'] })
+    expect(result.success).toBe(true)
+  })
+
+  it('requires gated fields once visible', () => {
+    const schema = buildZodSchema(baseSurvey, { usage: 'work' })
+    const result = schema.safeParse({ usage: 'work', making: ['video'] })
+    expect(result.success).toBe(false)
+  })
+
+  it('requires "other" detail when option is selected', () => {
+    const schema = buildZodSchema(baseSurvey, {
+      usage: 'work',
+      role: 'engineer',
+      industry: 'other',
+      making: ['video']
+    })
+    expect(
+      schema.safeParse({
+        usage: 'work',
+        role: 'engineer',
+        industry: 'other',
+        industryOther: '',
+        making: ['video']
+      }).success
+    ).toBe(false)
+    expect(
+      schema.safeParse({
+        usage: 'work',
+        role: 'engineer',
+        industry: 'other',
+        industryOther: 'Aerospace',
+        making: ['video']
+      }).success
+    ).toBe(true)
+  })
+})
+
+describe('buildSubmissionPayload', () => {
+  it('clears hidden fields and prefers free-text "other" detail', () => {
+    const payload = buildSubmissionPayload(baseSurvey, {
+      usage: 'work',
+      role: 'engineer',
+      industry: 'other',
+      industryOther: '  Aerospace ',
+      making: ['video']
+    })
+    expect(payload).toEqual({
+      usage: 'work',
+      role: 'engineer',
+      industry: 'Aerospace',
+      making: ['video']
+    })
+  })
+
+  it('falls back to "other" when free-text is empty', () => {
+    const payload = buildSubmissionPayload(baseSurvey, {
+      usage: 'work',
+      role: 'engineer',
+      industry: 'other',
+      industryOther: '',
+      making: ['video']
+    })
+    expect(payload.industry).toBe('other')
+  })
+
+  it('zeroes out fields hidden by showWhen', () => {
+    const payload = buildSubmissionPayload(baseSurvey, {
+      usage: 'personal',
+      role: 'engineer',
+      making: ['video']
+    })
+    expect(payload).toMatchObject({
+      usage: 'personal',
+      role: '',
+      industry: '',
+      making: ['video']
+    })
+  })
+})
+
+describe('prepareSurvey', () => {
+  it('preserves option contents but may reorder when randomize=true', () => {
+    const survey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'making',
+          type: 'multi',
+          randomize: true,
+          options: [
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+            { value: 'other', label: 'Other' }
+          ]
+        }
+      ]
+    }
+    const prepared = prepareSurvey(survey)
+    const values = prepared.fields[0]!.options!.map((o) => o.value)
+    expect(values).toContain('a')
+    expect(values).toContain('b')
+    expect(values[values.length - 1]).toBe('other')
+  })
+
+  it('pins both "other" and "not_sure" at the end while randomizing the rest', () => {
+    const survey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'intent',
+          type: 'multi',
+          randomize: true,
+          options: [
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+            { value: 'other', label: 'Other' },
+            { value: 'not_sure', label: 'Not sure' }
+          ]
+        }
+      ]
+    }
+    const prepared = prepareSurvey(survey)
+    const values = prepared.fields[0]!.options!.map((o) => o.value)
+    expect(values.slice(-2).sort()).toEqual(['not_sure', 'other'])
+    expect(values.slice(0, -2).sort()).toEqual(['a', 'b'])
+  })
+})

src/platform/cloud/onboarding/survey/surveySchema.ts

@@ -0,0 +1,137 @@
+import { shuffle } from 'es-toolkit'
+import { z } from 'zod'
+
+import type {
+  OnboardingSurvey,
+  OnboardingSurveyField,
+  OnboardingSurveyFieldCondition
+} from '@/platform/remoteConfig/types'
+
+export type SurveyValues = Record<string, string | string[] | undefined>
+
+const hasNonEmptyValue = (current: string | string[] | undefined): boolean => {
+  if (current === undefined || current === '') return false
+  if (Array.isArray(current)) return current.length > 0
+  return true
+}
+
+const conditionMatches = (
+  condition: OnboardingSurveyFieldCondition | undefined,
+  values: SurveyValues
+): boolean => {
+  if (!condition) return true
+  const current = values[condition.field]
+  if (!hasNonEmptyValue(current)) return false
+  const expected = condition.equals
+  if (expected === undefined) return true
+  const expectedSet = Array.isArray(expected) ? expected : [expected]
+  if (Array.isArray(current)) {
+    return current.some((v) => expectedSet.includes(v))
+  }
+  return typeof current === 'string' && expectedSet.includes(current)
+}
+
+export const visibleFields = (
+  survey: OnboardingSurvey,
+  values: SurveyValues
+): OnboardingSurveyField[] =>
+  survey.fields.filter((field) => conditionMatches(field.showWhen, values))
+
+const PIN_LAST_VALUES = new Set(['other', 'not_sure'])
+
+const randomizeOptions = (field: OnboardingSurveyField) => {
+  if (!field.randomize || !field.options) return field
+  const pinned = field.options.filter((opt) => PIN_LAST_VALUES.has(opt.value))
+  const rest = field.options.filter((opt) => !PIN_LAST_VALUES.has(opt.value))
+  return {
+    ...field,
+    options: [...shuffle(rest), ...pinned]
+  }
+}
+
+export const prepareSurvey = (survey: OnboardingSurvey): OnboardingSurvey => ({
+  ...survey,
+  fields: survey.fields.map(randomizeOptions)
+})
+
+type Translator = (key: string) => string
+
+const identityTranslator: Translator = (key) => key
+
+const fieldSchema = (field: OnboardingSurveyField, t: Translator) => {
+  if (field.type === 'multi') {
+    const arr = z.array(z.string())
+    return field.required
+      ? arr.min(1, {
+          message: t('cloudOnboarding.survey.errors.selectAtLeastOne')
+        })
+      : arr.optional()
+  }
+  if (field.required) {
+    return z.string().min(1, {
+      message: t('cloudOnboarding.survey.errors.chooseAnOption')
+    })
+  }
+  return z.string().optional()
+}
+
+export const buildZodSchema = (
+  survey: OnboardingSurvey,
+  values: SurveyValues,
+  t: Translator = identityTranslator
+) => {
+  const shape: Record<string, z.ZodTypeAny> = {}
+  for (const field of survey.fields) {
+    if (!conditionMatches(field.showWhen, values)) continue
+    shape[field.id] = fieldSchema(field, t)
+    if (
+      field.allowOther &&
+      field.otherFieldId &&
+      values[field.id] === 'other'
+    ) {
+      shape[field.otherFieldId] = z.string().min(1, {
+        message: t('cloudOnboarding.survey.errors.describeAnswer')
+      })
+    } else if (field.otherFieldId) {
+      shape[field.otherFieldId] = z.string().optional()
+    }
+  }
+  return z.object(shape)
+}
+
+export const buildInitialValues = (survey: OnboardingSurvey): SurveyValues => {
+  const initial: SurveyValues = {}
+  for (const field of survey.fields) {
+    initial[field.id] = field.type === 'multi' ? [] : ''
+    if (field.otherFieldId) initial[field.otherFieldId] = ''
+  }
+  return initial
+}
+
+export const buildSubmissionPayload = (
+  survey: OnboardingSurvey,
+  values: SurveyValues
+): Record<string, unknown> => {
+  const payload: Record<string, unknown> = {}
+  for (const field of survey.fields) {
+    const visible = conditionMatches(field.showWhen, values)
+    if (!visible) {
+      payload[field.id] = field.type === 'multi' ? [] : ''
+      continue
+    }
+    const value = values[field.id]
+    const otherRaw = field.otherFieldId ? values[field.otherFieldId] : undefined
+    if (
+      field.allowOther &&
+      field.otherFieldId &&
+      value === 'other' &&
+      typeof otherRaw === 'string'
+    ) {
+      const other = otherRaw.trim()
+      payload[field.id] = other || 'other'
+    } else {
+      payload[field.id] = field.type === 'multi' ? (value ?? []) : (value ?? '')
+    }
+  }
+  return payload
+}

src/platform/remoteConfig/types.ts

@@ -23,6 +23,54 @@ type FirebaseRuntimeConfig = {
   measurementId?: string
 }
 
+/**
+ * Server-driven onboarding survey schema.
+ *
+ * The backend ships the entire form definition so onboarding questions can
+ * be tweaked without a frontend release. Field types map 1:1 to a component
+ * in our internal UI library — see `DynamicSurveyField.vue`.
+ */
+export type OnboardingSurveyFieldType = 'single' | 'multi' | 'text'
+
+/**
+ * A translatable string. Either:
+ * - a single literal (treated as the fallback in any locale), or
+ * - a locale → text map, e.g. `{ en: 'Personal use', ko: '개인 용도' }`,
+ *   so the backend can ship translations without a frontend release.
+ */
+export type LocalizedString = string | Record<string, string>
+
+export type OnboardingSurveyOption = {
+  value: string
+  label?: LocalizedString
+  labelKey?: string
+}
+
+export type OnboardingSurveyFieldCondition = {
+  field: string
+  equals?: string | string[]
+}
+
+export type OnboardingSurveyField = {
+  id: string
+  type: OnboardingSurveyFieldType
+  labelKey?: string
+  label?: LocalizedString
+  options?: OnboardingSurveyOption[]
+  required?: boolean
+  randomize?: boolean
+  allowOther?: boolean
+  otherFieldId?: string
+  placeholder?: string
+  showWhen?: OnboardingSurveyFieldCondition
+}
+
+export type OnboardingSurvey = {
+  version: number
+  introKey?: string
+  fields: OnboardingSurveyField[]
+}
+
 /**
  * Remote configuration type
  * Configuration fetched from the server at runtime
@@ -45,6 +93,7 @@ export type RemoteConfig = {
   asset_rename_enabled?: boolean
   private_models_enabled?: boolean
   onboarding_survey_enabled?: boolean
+  onboarding_survey?: OnboardingSurvey
   linear_toggle_enabled?: boolean
   team_workspaces_enabled?: boolean
   user_secrets_enabled?: boolean

src/platform/telemetry/types.ts

@@ -40,6 +40,11 @@ export interface SurveyResponses {
   industry?: string
   useCase?: string
   making?: string[]
+  role?: string
+  teamSize?: string
+  source?: string
+  usage?: string
+  intent?: string[]
 }
 
 export interface SurveyResponsesNormalized extends SurveyResponses {

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.test.ts

@@ -0,0 +1,198 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+
+import SubscriptionRequiredDialogContentWorkspace from './SubscriptionRequiredDialogContentWorkspace.vue'
+
+const mockHandleSubscribeClick = vi.fn()
+const mockHandleBackToPricing = vi.fn()
+const mockHandleAddCreditCard = vi.fn()
+const mockHandleConfirmTransition = vi.fn()
+const mockHandleResubscribe = vi.fn()
+const mockCheckoutStep = ref<'pricing' | 'preview'>('pricing')
+const mockPreviewData = ref<{ transition_type: string } | null>(null)
+
+vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
+  useSubscriptionCheckout: () => ({
+    checkoutStep: mockCheckoutStep,
+    isLoadingPreview: ref(false),
+    loadingTier: ref(null),
+    isSubscribing: ref(false),
+    isResubscribing: ref(false),
+    previewData: mockPreviewData,
+    selectedTierKey: ref('standard'),
+    selectedBillingCycle: ref('yearly'),
+    isPolling: ref(false),
+    handleSubscribeClick: mockHandleSubscribeClick,
+    handleBackToPricing: mockHandleBackToPricing,
+    handleAddCreditCard: mockHandleAddCreditCard,
+    handleConfirmTransition: mockHandleConfirmTransition,
+    handleResubscribe: mockHandleResubscribe
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { back: 'Back', close: 'Close' },
+      subscription: {
+        plansForWorkspace: 'Plans for {workspace}',
+        teamWorkspace: 'Team'
+      },
+      credits: {
+        topUp: {
+          insufficientTitle: 'Insufficient Credits',
+          insufficientMessage: 'You have run out of credits.'
+        }
+      }
+    }
+  }
+})
+
+const PricingTableStub = {
+  name: 'PricingTableWorkspace',
+  template: `<div data-testid="pricing-table">
+    <button data-testid="subscribe-btn" @click="$emit('subscribe', { tierKey: 'standard', billingCycle: 'yearly' })">Subscribe</button>
+    <button data-testid="resubscribe-btn" @click="$emit('resubscribe')">Resubscribe</button>
+  </div>`
+}
+
+const AddPaymentPreviewStub = {
+  name: 'SubscriptionAddPaymentPreviewWorkspace',
+  template: `<div data-testid="add-payment-preview">
+    <button data-testid="add-card-btn" @click="$emit('addCreditCard')">Add Card</button>
+  </div>`
+}
+
+const TransitionPreviewStub = {
+  name: 'SubscriptionTransitionPreviewWorkspace',
+  template: `<div data-testid="transition-preview">
+    <button data-testid="confirm-btn" @click="$emit('confirm')">Confirm</button>
+  </div>`
+}
+
+function renderComponent(
+  props: { onClose?: () => void; reason?: SubscriptionDialogReason } = {}
+) {
+  return render(SubscriptionRequiredDialogContentWorkspace, {
+    props: {
+      onClose: props.onClose ?? vi.fn(),
+      ...(props.reason ? { reason: props.reason } : {})
+    },
+    global: {
+      plugins: [
+        createTestingPinia({ createSpy: vi.fn, stubActions: false }),
+        i18n
+      ],
+      stubs: {
+        PricingTableWorkspace: PricingTableStub,
+        SubscriptionAddPaymentPreviewWorkspace: AddPaymentPreviewStub,
+        SubscriptionTransitionPreviewWorkspace: TransitionPreviewStub
+      }
+    }
+  })
+}
+
+describe('SubscriptionRequiredDialogContentWorkspace', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCheckoutStep.value = 'pricing'
+    mockPreviewData.value = null
+  })
+
+  it('shows pricing table on pricing step', () => {
+    renderComponent()
+    expect(screen.getByTestId('pricing-table')).toBeInTheDocument()
+    expect(screen.queryByTestId('add-payment-preview')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('transition-preview')).not.toBeInTheDocument()
+  })
+
+  it('shows close button and hides back button on pricing step', () => {
+    renderComponent()
+    expect(screen.getByLabelText('Close')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Back')).not.toBeInTheDocument()
+  })
+
+  it('calls onClose when close button is clicked', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    renderComponent({ onClose })
+
+    await user.click(screen.getByLabelText('Close'))
+
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+
+  it('shows back button on preview step', () => {
+    mockCheckoutStep.value = 'preview'
+    mockPreviewData.value = { transition_type: 'new_subscription' }
+    renderComponent()
+    expect(screen.getByLabelText('Back')).toBeInTheDocument()
+  })
+
+  it('shows insufficient credits message when reason is out_of_credits', () => {
+    renderComponent({ reason: 'out_of_credits' })
+    expect(screen.getByText('Insufficient Credits')).toBeInTheDocument()
+    expect(screen.getByText('You have run out of credits.')).toBeInTheDocument()
+  })
+
+  it('does not show insufficient credits message without reason', () => {
+    renderComponent()
+    expect(screen.queryByText('Insufficient Credits')).not.toBeInTheDocument()
+  })
+
+  it('shows new subscription preview when transition_type is new_subscription', () => {
+    mockCheckoutStep.value = 'preview'
+    mockPreviewData.value = { transition_type: 'new_subscription' }
+    renderComponent()
+    expect(screen.getByTestId('add-payment-preview')).toBeInTheDocument()
+    expect(screen.queryByTestId('transition-preview')).not.toBeInTheDocument()
+  })
+
+  it('shows transition preview when transition_type is upgrade', () => {
+    mockCheckoutStep.value = 'preview'
+    mockPreviewData.value = { transition_type: 'upgrade' }
+    renderComponent()
+    expect(screen.getByTestId('transition-preview')).toBeInTheDocument()
+    expect(screen.queryByTestId('add-payment-preview')).not.toBeInTheDocument()
+  })
+
+  it('wires subscribe event to handleSubscribeClick', async () => {
+    const user = userEvent.setup()
+    renderComponent()
+
+    await user.click(screen.getByTestId('subscribe-btn'))
+
+    expect(mockHandleSubscribeClick).toHaveBeenCalledWith({
+      tierKey: 'standard',
+      billingCycle: 'yearly'
+    })
+  })
+
+  it('wires resubscribe event to handleResubscribe', async () => {
+    const user = userEvent.setup()
+    renderComponent()
+
+    await user.click(screen.getByTestId('resubscribe-btn'))
+
+    expect(mockHandleResubscribe).toHaveBeenCalled()
+  })
+
+  it('wires back button to handleBackToPricing', async () => {
+    const user = userEvent.setup()
+    mockCheckoutStep.value = 'preview'
+    mockPreviewData.value = { transition_type: 'new_subscription' }
+    renderComponent()
+
+    await user.click(screen.getByLabelText('Back'))
+
+    expect(mockHandleBackToPricing).toHaveBeenCalled()
+  })
+})

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue

@@ -18,7 +18,7 @@
       variant="muted-textonly"
       class="absolute top-2.5 right-2.5 shrink-0 rounded-full text-text-secondary hover:bg-white/10"
       :aria-label="$t('g.close')"
-      @click="handleClose"
+      @click="onClose"
     >
       <i class="pi pi-times text-xl" />
     </Button>
@@ -94,28 +94,14 @@
 </template>
 
 <script setup lang="ts">
-import { useToast } from 'primevue/usetoast'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
 import Button from '@/components/ui/button/Button.vue'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
-import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
-import { useTelemetry } from '@/platform/telemetry'
-import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
-import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
-import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
-import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
 import type { SubscriptionDialogReason } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
 
 import PricingTableWorkspace from './PricingTableWorkspace.vue'
 import SubscriptionAddPaymentPreviewWorkspace from './SubscriptionAddPaymentPreviewWorkspace.vue'
 import SubscriptionTransitionPreviewWorkspace from './SubscriptionTransitionPreviewWorkspace.vue'
 
-type CheckoutStep = 'pricing' | 'preview'
-type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
-
 const { onClose, reason } = defineProps<{
   onClose: () => void
   reason?: SubscriptionDialogReason
@@ -125,227 +111,22 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { t } = useI18n()
-const toast = useToast()
-const { subscribe, previewSubscribe, plans, fetchStatus, fetchBalance } =
-  useBillingContext()
-const telemetry = useTelemetry()
-const billingOperationStore = useBillingOperationStore()
-const isPolling = computed(() => billingOperationStore.hasPendingOperations)
-
-const checkoutStep = ref<CheckoutStep>('pricing')
-const isLoadingPreview = ref(false)
-const loadingTier = ref<CheckoutTierKey | null>(null)
-const isSubscribing = ref(false)
-const isResubscribing = ref(false)
-const previewData = ref<PreviewSubscribeResponse | null>(null)
-const selectedTierKey = ref<CheckoutTierKey | null>(null)
-const selectedBillingCycle = ref<BillingCycle>('yearly')
-
-function getApiPlanSlug(
-  tierKey: CheckoutTierKey,
-  billingCycle: BillingCycle
-): string | null {
-  const apiDuration = billingCycle === 'yearly' ? 'ANNUAL' : 'MONTHLY'
-  const apiTier = tierKey.toUpperCase()
-  const plan = plans.value.find(
-    (p) => p.tier === apiTier && p.duration === apiDuration
-  )
-  return plan?.slug ?? null
-}
-
-async function handleSubscribeClick(payload: {
-  tierKey: CheckoutTierKey
-  billingCycle: BillingCycle
-}) {
-  const { tierKey, billingCycle } = payload
-
-  isLoadingPreview.value = true
-  loadingTier.value = tierKey
-  selectedTierKey.value = tierKey
-  selectedBillingCycle.value = billingCycle
-
-  try {
-    const planSlug = getApiPlanSlug(tierKey, billingCycle)
-    if (!planSlug) {
-      toast.add({
-        severity: 'error',
-        summary: 'Unable to subscribe',
-        detail: 'This plan is not available'
-      })
-      return
-    }
-    const response = await previewSubscribe(planSlug)
-
-    if (!response || !response.allowed) {
-      toast.add({
-        severity: 'error',
-        summary: 'Unable to subscribe',
-        detail: response?.reason || 'This plan is not available'
-      })
-      return
-    }
-
-    previewData.value = response
-    checkoutStep.value = 'preview'
-  } catch (error) {
-    const message =
-      error instanceof Error
-        ? error.message
-        : 'Failed to load subscription preview'
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: message
-    })
-  } finally {
-    isLoadingPreview.value = false
-    loadingTier.value = null
-  }
-}
-
-function handleBackToPricing() {
-  checkoutStep.value = 'pricing'
-  previewData.value = null
-}
-
-async function handleAddCreditCard() {
-  if (!selectedTierKey.value) return
-
-  isSubscribing.value = true
-  try {
-    const planSlug = getApiPlanSlug(
-      selectedTierKey.value,
-      selectedBillingCycle.value
-    )
-    if (!planSlug) return
-    const response = await subscribe(
-      planSlug,
-      `${getComfyPlatformBaseUrl()}/payment/success`,
-      `${getComfyPlatformBaseUrl()}/payment/failed`
-    )
-
-    if (!response) return
-
-    if (response.status === 'subscribed') {
-      telemetry?.trackMonthlySubscriptionSucceeded()
-      toast.add({
-        severity: 'success',
-        summary: t('subscription.required.pollingSuccess'),
-        life: 5000
-      })
-      await Promise.all([fetchStatus(), fetchBalance()])
-      emit('close', true)
-    } else if (
-      response.status === 'needs_payment_method' &&
-      response.payment_method_url
-    ) {
-      window.open(response.payment_method_url, '_blank')
-      billingOperationStore.startOperation(
-        response.billing_op_id,
-        'subscription'
-      )
-    } else if (response.status === 'pending_payment') {
-      billingOperationStore.startOperation(
-        response.billing_op_id,
-        'subscription'
-      )
-    }
-  } catch (error) {
-    const message =
-      error instanceof Error ? error.message : 'Failed to subscribe'
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: message
-    })
-  } finally {
-    isSubscribing.value = false
-  }
-}
-
-async function handleConfirmTransition() {
-  if (!selectedTierKey.value) return
-
-  isSubscribing.value = true
-  try {
-    const planSlug = getApiPlanSlug(
-      selectedTierKey.value,
-      selectedBillingCycle.value
-    )
-    if (!planSlug) return
-    const response = await subscribe(
-      planSlug,
-      `${getComfyPlatformBaseUrl()}/payment/success`,
-      `${getComfyPlatformBaseUrl()}/payment/failed`
-    )
-
-    if (!response) return
-
-    if (response.status === 'subscribed') {
-      telemetry?.trackMonthlySubscriptionSucceeded()
-      toast.add({
-        severity: 'success',
-        summary: t('subscription.required.pollingSuccess'),
-        life: 5000
-      })
-      await Promise.all([fetchStatus(), fetchBalance()])
-      emit('close', true)
-    } else if (
-      response.status === 'needs_payment_method' &&
-      response.payment_method_url
-    ) {
-      window.open(response.payment_method_url, '_blank')
-      billingOperationStore.startOperation(
-        response.billing_op_id,
-        'subscription'
-      )
-    } else if (response.status === 'pending_payment') {
-      billingOperationStore.startOperation(
-        response.billing_op_id,
-        'subscription'
-      )
-    }
-  } catch (error) {
-    const message =
-      error instanceof Error ? error.message : 'Failed to update subscription'
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: message
-    })
-  } finally {
-    isSubscribing.value = false
-  }
-}
-
-async function handleResubscribe() {
-  isResubscribing.value = true
-  try {
-    await workspaceApi.resubscribe()
-    toast.add({
-      severity: 'success',
-      summary: t('subscription.resubscribeSuccess'),
-      life: 5000
-    })
-    await Promise.all([fetchStatus(), fetchBalance()])
-    emit('close', true)
-  } catch (error) {
-    const message =
-      error instanceof Error ? error.message : 'Failed to resubscribe'
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: message
-    })
-  } finally {
-    isResubscribing.value = false
-  }
-}
-
-function handleClose() {
-  onClose()
-}
+const {
+  checkoutStep,
+  isLoadingPreview,
+  loadingTier,
+  isSubscribing,
+  isResubscribing,
+  previewData,
+  selectedTierKey,
+  selectedBillingCycle,
+  isPolling,
+  handleSubscribeClick,
+  handleBackToPricing,
+  handleAddCreditCard,
+  handleConfirmTransition,
+  handleResubscribe
+} = useSubscriptionCheckout(emit)
 </script>
 
 <style scoped>

src/platform/workspace/composables/useSubscriptionCheckout.test.ts

@@ -0,0 +1,369 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+
+import type { Plan } from '@/platform/workspace/api/workspaceApi'
+
+import { findPlanSlug } from './useSubscriptionCheckout'
+
+function makeStandardYearly(): Plan {
+  return {
+    slug: 'standard-yearly',
+    tier: 'STANDARD',
+    duration: 'ANNUAL',
+    price_cents: 1600,
+    credits_cents: 4200,
+    max_seats: 1,
+    availability: { available: true },
+    seat_summary: {
+      seat_count: 1,
+      total_cost_cents: 1600,
+      total_credits_cents: 4200
+    }
+  }
+}
+
+function makeCreatorMonthly(): Plan {
+  return {
+    slug: 'creator-monthly',
+    tier: 'CREATOR',
+    duration: 'MONTHLY',
+    price_cents: 3500,
+    credits_cents: 7400,
+    max_seats: 5,
+    availability: { available: true },
+    seat_summary: {
+      seat_count: 1,
+      total_cost_cents: 3500,
+      total_credits_cents: 7400
+    }
+  }
+}
+
+function allPlans(): Plan[] {
+  return [makeStandardYearly(), makeCreatorMonthly()]
+}
+
+describe('findPlanSlug', () => {
+  it('finds an annual plan by tier key and yearly billing cycle', () => {
+    expect(findPlanSlug(allPlans(), 'standard', 'yearly')).toBe(
+      'standard-yearly'
+    )
+  })
+
+  it('finds a monthly plan by tier key and monthly billing cycle', () => {
+    expect(findPlanSlug(allPlans(), 'creator', 'monthly')).toBe(
+      'creator-monthly'
+    )
+  })
+
+  it('returns null when no plan matches', () => {
+    expect(findPlanSlug(allPlans(), 'standard', 'monthly')).toBeNull()
+  })
+
+  it('returns null for empty plans', () => {
+    expect(findPlanSlug([], 'standard', 'yearly')).toBeNull()
+  })
+})
+
+const {
+  mockSubscribe,
+  mockPreviewSubscribe,
+  mockFetchStatus,
+  mockFetchBalance,
+  mockPlans,
+  mockResubscribe,
+  mockToastAdd
+} = vi.hoisted(() => ({
+  mockSubscribe: vi.fn(),
+  mockPreviewSubscribe: vi.fn(),
+  mockFetchStatus: vi.fn(),
+  mockFetchBalance: vi.fn(),
+  mockPlans: { value: [] as Plan[] },
+  mockResubscribe: vi.fn(),
+  mockToastAdd: vi.fn()
+}))
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    subscribe: mockSubscribe,
+    previewSubscribe: mockPreviewSubscribe,
+    plans: computed(() => mockPlans.value),
+    fetchStatus: mockFetchStatus,
+    fetchBalance: mockFetchBalance
+  })
+}))
+
+vi.mock('@/platform/workspace/api/workspaceApi', () => ({
+  workspaceApi: { resubscribe: mockResubscribe }
+}))
+
+vi.mock('@/config/comfyApi', () => ({
+  getComfyPlatformBaseUrl: () => 'https://platform.comfy.org'
+}))
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({ add: mockToastAdd })
+}))
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({ trackMonthlySubscriptionSucceeded: vi.fn() })
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as Record<string, unknown>),
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+describe('useSubscriptionCheckout', () => {
+  let emit: ReturnType<typeof vi.fn>
+
+  async function setup() {
+    const { useSubscriptionCheckout } =
+      await import('./useSubscriptionCheckout')
+    return useSubscriptionCheckout(emit as never)
+  }
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+    mockPlans.value = allPlans()
+    emit = vi.fn()
+  })
+
+  describe('handleSubscribeClick', () => {
+    it('transitions to preview on successful preview', async () => {
+      const checkout = await setup()
+      const preview = {
+        allowed: true,
+        transition_type: 'new_subscription' as const,
+        effective_at: '2025-01-01',
+        is_immediate: true,
+        cost_today_cents: 1600,
+        cost_next_period_cents: 1600,
+        credits_today_cents: 4200,
+        credits_next_period_cents: 4200,
+        new_plan: makeStandardYearly().seat_summary
+      }
+      mockPreviewSubscribe.mockResolvedValueOnce(preview)
+
+      await checkout.handleSubscribeClick({
+        tierKey: 'standard',
+        billingCycle: 'yearly'
+      })
+
+      expect(checkout.checkoutStep.value).toBe('preview')
+      expect(checkout.previewData.value).toStrictEqual(preview)
+    })
+
+    it('shows error toast when preview is disallowed', async () => {
+      const checkout = await setup()
+      mockPreviewSubscribe.mockResolvedValueOnce({
+        allowed: false,
+        reason: 'Not allowed'
+      })
+
+      await checkout.handleSubscribeClick({
+        tierKey: 'standard',
+        billingCycle: 'yearly'
+      })
+
+      expect(checkout.checkoutStep.value).toBe('pricing')
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'Not allowed'
+        })
+      )
+    })
+
+    it('shows error toast when plan slug is not found', async () => {
+      const checkout = await setup()
+      mockPlans.value = []
+
+      await checkout.handleSubscribeClick({
+        tierKey: 'standard',
+        billingCycle: 'yearly'
+      })
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'This plan is not available'
+        })
+      )
+    })
+
+    it('shows error toast on network failure', async () => {
+      const checkout = await setup()
+      mockPreviewSubscribe.mockRejectedValueOnce(new Error('Network error'))
+
+      await checkout.handleSubscribeClick({
+        tierKey: 'standard',
+        billingCycle: 'yearly'
+      })
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'Network error'
+        })
+      )
+    })
+
+    it('resolves monthly billing cycle to correct plan slug', async () => {
+      const checkout = await setup()
+      mockPreviewSubscribe.mockResolvedValueOnce({
+        allowed: true,
+        transition_type: 'new_subscription'
+      })
+
+      await checkout.handleSubscribeClick({
+        tierKey: 'creator',
+        billingCycle: 'monthly'
+      })
+
+      expect(mockPreviewSubscribe).toHaveBeenCalledWith('creator-monthly')
+    })
+  })
+
+  describe('handleBackToPricing', () => {
+    it('resets to pricing step and clears preview data', async () => {
+      const checkout = await setup()
+      checkout.checkoutStep.value = 'preview'
+      checkout.previewData.value = {} as never
+
+      checkout.handleBackToPricing()
+
+      expect(checkout.checkoutStep.value).toBe('pricing')
+      expect(checkout.previewData.value).toBeNull()
+    })
+  })
+
+  describe('handleAddCreditCard', () => {
+    it('emits close on subscribed status', async () => {
+      const checkout = await setup()
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'subscribed',
+        billing_op_id: 'op-1'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleAddCreditCard()
+
+      expect(mockSubscribe).toHaveBeenCalledWith(
+        'standard-yearly',
+        'https://platform.comfy.org/payment/success',
+        'https://platform.comfy.org/payment/failed'
+      )
+      expect(emit).toHaveBeenCalledWith('close', true)
+    })
+
+    it('opens payment URL when needs_payment_method', async () => {
+      const checkout = await setup()
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'needs_payment_method',
+        billing_op_id: 'op-2',
+        payment_method_url: 'https://stripe.com/pay'
+      })
+
+      const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+      await checkout.handleAddCreditCard()
+
+      expect(openSpy).toHaveBeenCalledWith('https://stripe.com/pay', '_blank')
+      openSpy.mockRestore()
+    })
+
+    it('shows error toast on subscribe failure', async () => {
+      const checkout = await setup()
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockRejectedValueOnce(new Error('Payment failed'))
+
+      await checkout.handleAddCreditCard()
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'Payment failed'
+        })
+      )
+    })
+  })
+
+  describe('handleConfirmTransition', () => {
+    it('emits close on subscribed status', async () => {
+      const checkout = await setup()
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockResolvedValueOnce({
+        status: 'subscribed',
+        billing_op_id: 'op-3'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleConfirmTransition()
+
+      expect(emit).toHaveBeenCalledWith('close', true)
+    })
+
+    it('shows error toast on failure', async () => {
+      const checkout = await setup()
+      checkout.selectedTierKey.value = 'standard'
+      checkout.selectedBillingCycle.value = 'yearly'
+      mockSubscribe.mockRejectedValueOnce(new Error('Transition error'))
+
+      await checkout.handleConfirmTransition()
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'Transition error'
+        })
+      )
+    })
+  })
+
+  describe('handleResubscribe', () => {
+    it('emits close on success', async () => {
+      const checkout = await setup()
+      mockResubscribe.mockResolvedValueOnce({
+        billing_op_id: 'op-4',
+        status: 'active'
+      })
+      mockFetchStatus.mockResolvedValueOnce(undefined)
+      mockFetchBalance.mockResolvedValueOnce(undefined)
+
+      await checkout.handleResubscribe()
+
+      expect(mockResubscribe).toHaveBeenCalled()
+      expect(emit).toHaveBeenCalledWith('close', true)
+    })
+
+    it('shows error toast on failure', async () => {
+      const checkout = await setup()
+      mockResubscribe.mockRejectedValueOnce(new Error('Resubscribe failed'))
+
+      await checkout.handleResubscribe()
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'Resubscribe failed'
+        })
+      )
+    })
+  })
+})

src/platform/workspace/composables/useSubscriptionCheckout.ts

@@ -0,0 +1,210 @@
+import { useToast } from 'primevue/usetoast'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
+import { useTelemetry } from '@/platform/telemetry'
+import type {
+  Plan,
+  PreviewSubscribeResponse
+} from '@/platform/workspace/api/workspaceApi'
+import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
+import { useBillingOperationStore } from '@/platform/workspace/stores/billingOperationStore'
+
+type CheckoutStep = 'pricing' | 'preview'
+type CheckoutTierKey = Exclude<TierKey, 'free' | 'founder'>
+
+export function findPlanSlug(
+  plans: Plan[],
+  tierKey: CheckoutTierKey,
+  billingCycle: BillingCycle
+): string | null {
+  const apiDuration = billingCycle === 'yearly' ? 'ANNUAL' : 'MONTHLY'
+  const apiTier = tierKey.toUpperCase()
+  const plan = plans.find(
+    (p) => p.tier === apiTier && p.duration === apiDuration
+  )
+  return plan?.slug ?? null
+}
+
+export function useSubscriptionCheckout(emit: {
+  (e: 'close', subscribed: boolean): void
+}) {
+  const { t } = useI18n()
+  const toast = useToast()
+  const { subscribe, previewSubscribe, plans, fetchStatus, fetchBalance } =
+    useBillingContext()
+  const telemetry = useTelemetry()
+  const billingOperationStore = useBillingOperationStore()
+
+  const checkoutStep = ref<CheckoutStep>('pricing')
+  const isLoadingPreview = ref(false)
+  const loadingTier = ref<CheckoutTierKey | null>(null)
+  const isSubscribing = ref(false)
+  const isResubscribing = ref(false)
+  const previewData = ref<PreviewSubscribeResponse | null>(null)
+  const selectedTierKey = ref<CheckoutTierKey | null>(null)
+  const selectedBillingCycle = ref<BillingCycle>('yearly')
+  const isPolling = computed(() => billingOperationStore.hasPendingOperations)
+
+  function getApiPlanSlug(
+    tierKey: CheckoutTierKey,
+    billingCycle: BillingCycle
+  ): string | null {
+    return findPlanSlug(plans.value, tierKey, billingCycle)
+  }
+
+  async function handleSubscribeClick(payload: {
+    tierKey: CheckoutTierKey
+    billingCycle: BillingCycle
+  }) {
+    const { tierKey, billingCycle } = payload
+
+    isLoadingPreview.value = true
+    loadingTier.value = tierKey
+    selectedTierKey.value = tierKey
+    selectedBillingCycle.value = billingCycle
+
+    try {
+      const planSlug = getApiPlanSlug(tierKey, billingCycle)
+      if (!planSlug) {
+        toast.add({
+          severity: 'error',
+          summary: 'Unable to subscribe',
+          detail: 'This plan is not available'
+        })
+        return
+      }
+      const response = await previewSubscribe(planSlug)
+
+      if (!response || !response.allowed) {
+        toast.add({
+          severity: 'error',
+          summary: 'Unable to subscribe',
+          detail: response?.reason || 'This plan is not available'
+        })
+        return
+      }
+
+      previewData.value = response
+      checkoutStep.value = 'preview'
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : 'Failed to load subscription preview'
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: message
+      })
+    } finally {
+      isLoadingPreview.value = false
+      loadingTier.value = null
+    }
+  }
+
+  function handleBackToPricing() {
+    checkoutStep.value = 'pricing'
+    previewData.value = null
+  }
+
+  async function handleSubscription() {
+    if (!selectedTierKey.value) return
+
+    isSubscribing.value = true
+    try {
+      const planSlug = getApiPlanSlug(
+        selectedTierKey.value,
+        selectedBillingCycle.value
+      )
+      if (!planSlug) return
+      const response = await subscribe(
+        planSlug,
+        `${getComfyPlatformBaseUrl()}/payment/success`,
+        `${getComfyPlatformBaseUrl()}/payment/failed`
+      )
+
+      if (!response) return
+
+      if (response.status === 'subscribed') {
+        telemetry?.trackMonthlySubscriptionSucceeded()
+        toast.add({
+          severity: 'success',
+          summary: t('subscription.required.pollingSuccess'),
+          life: 5000
+        })
+        await Promise.all([fetchStatus(), fetchBalance()])
+        emit('close', true)
+      } else if (
+        response.status === 'needs_payment_method' &&
+        response.payment_method_url
+      ) {
+        window.open(response.payment_method_url, '_blank')
+        billingOperationStore.startOperation(
+          response.billing_op_id,
+          'subscription'
+        )
+      } else if (response.status === 'pending_payment') {
+        billingOperationStore.startOperation(
+          response.billing_op_id,
+          'subscription'
+        )
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to subscribe'
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: message
+      })
+    } finally {
+      isSubscribing.value = false
+    }
+  }
+
+  async function handleResubscribe() {
+    isResubscribing.value = true
+    try {
+      await workspaceApi.resubscribe()
+      toast.add({
+        severity: 'success',
+        summary: t('subscription.resubscribeSuccess'),
+        life: 5000
+      })
+      await Promise.all([fetchStatus(), fetchBalance()])
+      emit('close', true)
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Failed to resubscribe'
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: message
+      })
+    } finally {
+      isResubscribing.value = false
+    }
+  }
+
+  return {
+    checkoutStep,
+    isLoadingPreview,
+    loadingTier,
+    isSubscribing,
+    isResubscribing,
+    previewData,
+    selectedTierKey,
+    selectedBillingCycle,
+    isPolling,
+    handleSubscribeClick,
+    handleBackToPricing,
+    handleAddCreditCard: handleSubscription,
+    handleConfirmTransition: handleSubscription,
+    handleResubscribe
+  }
+}

src/scripts/defaultGraph.ts

@@ -115,7 +115,15 @@ export const defaultGraph: ComfyWorkflowJSON = {
         { name: 'CLIP', type: 'CLIP', links: [3, 5], slot_index: 1 },
         { name: 'VAE', type: 'VAE', links: [8], slot_index: 2 }
       ],
-      properties: {},
+      properties: {
+        models: [
+          {
+            name: 'v1-5-pruned-emaonly-fp16.safetensors',
+            url: 'https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors',
+            directory: 'checkpoints'
+          }
+        ]
+      },
       widgets_values: ['v1-5-pruned-emaonly-fp16.safetensors']
     }
   ],