chore(website): refresh Ashby and cloud nodes snapshots

*PR Created by the Glary-Bot Agent*

---

## Summary

`Release: Website` only refreshed the Ashby snapshot, so the cloud-nodes
snapshot (`apps/website/src/data/cloud-nodes.snapshot.json`) was stale
on every release. `loadPacksForBuild()` then silently fell back to that
snapshot because `WEBSITE_CLOUD_API_KEY` was never plumbed through CI or
Vercel, leaving production at `/cloud/supported-nodes` with placeholder
data (e.g. `rgthree-comfy` listed as supported when it isn't — visible
at line 104 of the committed snapshot, last fetched 2026-05-04).

## Changes

- **New composite action `.github/actions/cloud-nodes-pull`** mirroring
`ashby-pull`: runs `pnpm --filter @comfyorg/website
cloud-nodes:refresh-snapshot` with `WEBSITE_CLOUD_API_KEY`. The script
already `process.exit(1)`s on any non-`fresh` outcome, so refresh
failures are loud.
- **`release-website.yaml`** now runs both refreshes and opens a single
PR with both updated snapshots. Renamed the job to `refresh-snapshots`,
updated branch/commit/title/body for the wider scope, and kept the
existing `Release:Website` label so downstream automation is unaffected.
- **`cloudNodes.build.ts`** throws when the outcome is `'stale'` **and**
`VERCEL_ENV === 'production'`. Preview / local builds keep the snapshot
fallback so contributors without key access are unaffected. The CI
reporter still runs first so the GitHub annotation explaining *why* it's
stale is visible in the failed job.
- **`ci-vercel-website-preview.yaml`**: passes `WEBSITE_CLOUD_API_KEY`
to `vercel build` in both preview and production jobs, and adds a
preflight step on `deploy-production` that hard-fails before `vercel
build --prod` if the secret is missing — surfacing config drift with a
maintainer-friendly error annotation instead of mid-build.
- **`apps/website/README.md`**: documents the production-strictness
behavior, the new required secret (GitHub Actions + Vercel env), and the
manual refresh path.
- **New unit tests** in `cloudNodes.build.test.ts` (6 cases): fresh,
stale-no-VERCEL_ENV, stale-on-preview, stale-on-production,
failed-regardless, and "still reports on stale-in-production before
throwing".

## Manual / one-time steps required before merging

This PR cannot finish the job alone. A maintainer must also:

1. Add `WEBSITE_CLOUD_API_KEY` as a **GitHub Actions repo secret** in
`Comfy-Org/ComfyUI_frontend`.
2. Add `WEBSITE_CLOUD_API_KEY` to the **Vercel project environment**
(`production` env at minimum; `preview` recommended).
3. Investigate why `rgthree-comfy` is in the current snapshot — either
the Cloud API was actually returning it on 2026-05-04, the snapshot was
generated against a non-production environment, or it was hand-edited.
The first manual run of `Release: Website` after this PR merges will
confirm.

Without step 1, the new `Release: Website` job will fail loudly (the
refresh script exits 1 with `missing WEBSITE_CLOUD_API_KEY`). Without
step 2, the new preflight will fail the production deploy with a clear
error annotation pointing at `apps/website/README.md`. Both failure
modes are intentional — they replace today's silent stale snapshot.

## Related (out of scope for this PR)

The other half of the original report — production 404s on
`/p/supported-models/*`, `/cloud/supported-nodes/*`,
`/demos/community-workflows` from PRs #11892 / #11903 / #11942 — is a
`comfy-router` allow-list gap (those paths exist in the Vercel build as
pre-rendered static HTML). That fix needs to land in
`Comfy-Org/comfy-router` and is being handled separately since glary
doesn't have access to that repo.

## Verification

- `pnpm --filter @comfyorg/website test:unit` — 75/75 pass (6 new in
`cloudNodes.build.test.ts`)
- `pnpm --filter @comfyorg/website typecheck` — 0 errors, 0 warnings (2
pre-existing hints unrelated to this PR)
- `pnpm format` + `pnpm exec eslint` on changed files — clean
- `js-yaml` validates `release-website.yaml`,
`cloud-nodes-pull/action.yaml`, `ci-vercel-website-preview.yaml`
- Oracle code review (round 1) raised 1 warning + 1 suggestion; both
addressed in commit 2.

**Manual verification not applicable**: the runtime changes are GitHub
Actions workflows and a Vercel-env-gated branch in a build-time module —
they cannot meaningfully run outside of GitHub Actions / Vercel, and the
strict-on-stale path is exhaustively covered by the 6 unit tests
(including the exact assertions a manual run would check: throws on
`VERCEL_ENV=production` + stale, passes on preview, reports
observability annotation before throwing). The end-to-end behavior will
be verified by the first `Release: Website` dispatch and the next
production deploy after the maintainer adds the secret.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12219-fix-website-refresh-cloud-nodes-snapshot-in-release-workflow-strict-production-build-35f6d73d3650816d8f32d403cb39d733)
by [Unito](https://www.unito.io)

---------

Co-authored-by: glary <bot@glary.dev>

.claude/skills/add-model-page/SKILL.md

@@ -0,0 +1,173 @@
+---
+name: add-model-page
+description: 'add, update, or remove a model page entry on the comfy org website. creates a PR to Comfy-Org/ComfyUI_frontend apps/website folder with the change and posts a Vercel preview link back to Slack.'
+---
+
+# add-model-page
+
+add, update, or remove model pages in the ComfyUI website.
+
+## Trigger phrases
+
+- `Add a model page for <model-name>`
+- `Update the model page for <model-name>`
+- `Remove <model-name> from model pages`
+
+## Phase 1 — Parse the request
+
+Extract:
+
+- **action**: `add` | `update` | `remove`
+- **model-name**: raw string (e.g. `flux1-schnell`, `flux1_dev.safetensors`)
+
+Normalize to a slug: lowercase, replace `_` and `.` with `-`, strip file extensions.
+Example: `flux1_dev.safetensors` → `flux1-dev`
+
+## Architecture overview
+
+Models come from two sources merged at build time:
+
+| File                                            | Purpose                                                                                                                           |
+| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `apps/website/src/config/generated-models.json` | Auto-generated from workflow_templates (slug, name, directory, huggingFaceUrl, workflowCount, displayName, thumbnailUrl, docsUrl) |
+| `apps/website/src/config/model-metadata.ts`     | Hand-curated overrides (docsUrl, blogUrl, featured) — only add entries that need overrides                                        |
+| `apps/website/src/config/models.ts`             | Merges the two above; exports typed `Model[]`                                                                                     |
+
+To regenerate the JSON from workflow_templates:
+
+```bash
+pnpm tsx apps/website/scripts/generate-models.ts
+```
+
+This writes `apps/website/src/config/generated-models.json` directly.
+Thumbnails are populated from local `.webp` files in `workflow_templates/templates/` — no network access needed.
+
+---
+
+## Phase 2 — Gather model data (ADD / UPDATE)
+
+Run the generator to get fresh data, then find the model:
+
+```bash
+pnpm tsx apps/website/scripts/generate-models.ts
+jq '.[] | select(.slug | contains("MODEL_SLUG"))' \
+  apps/website/src/config/generated-models.json
+```
+
+The JSON fields are:
+
+- `slug` — URL slug
+- `name` — exact filename or display name for partner nodes
+- `huggingFaceUrl` — download URL (empty for partner nodes)
+- `directory` — `diffusion_models` | `loras` | … | `partner_nodes`
+- `workflowCount` — integer
+- `displayName` — human-readable name
+
+If no match and it is a known API/partner model, add it to `API_PROVIDER_MAP` in
+`generate-models.ts` and re-run. Otherwise tell the user.
+
+---
+
+## Phase 3 — Check for existing entry
+
+```bash
+jq --arg slug "${SLUG}" '.[] | select(.slug == $slug)' \
+  apps/website/src/config/generated-models.json
+```
+
+- Match found + action is `add` → switch to UPDATE flow automatically
+- No match + action is `update` → stop and tell the user
+
+---
+
+## Phase 4A — ADD: new partner/API model not in workflow_templates
+
+For partner nodes (no local file), add an entry to `API_PROVIDER_MAP` in
+`apps/website/scripts/generate-models.ts`:
+
+```typescript
+mymodel: { name: 'My Model', slug: 'my-model' },
+```
+
+Then re-run `pnpm tsx apps/website/scripts/generate-models.ts` — it will appear
+in `generated-models.json` automatically.
+
+If you also want a `docsUrl`, `blogUrl`, or a link to the hub model page, add an entry to `model-metadata.ts`:
+
+```typescript
+'my-model': {
+  docsUrl: 'https://docs.comfy.org/tutorials/...',
+  blogUrl: 'https://blog.comfy.org/...',
+  hubSlug: 'my-model',   // slug at comfy.org/workflows/model/{hubSlug} — only set if the page exists (returns 200)
+  featured: true
+}
+```
+
+No changes to `models.ts` or `translations.ts` are needed.
+
+---
+
+## Phase 4B — UPDATE: edit existing entry
+
+Only `model-metadata.ts` needs editing for most updates (docsUrl, blogUrl,
+featured). For `displayName` or `directory` changes, edit the entry directly in
+`generated-models.json` (until the next generator run would overwrite it — then
+fix the source in `generate-models.ts`).
+
+---
+
+## Phase 4C — REMOVE: delete entry
+
+Remove the entry from `generated-models.json` (or mark it with `canonicalSlug`
+pointing to the replacement). No translation file changes needed.
+
+---
+
+## Phase 5 — Verify TypeScript
+
+```bash
+pnpm typecheck 2>&1 | grep -E "error|warning" | head -20
+```
+
+Fix any type errors before proceeding. Common issues:
+
+- `ModelDirectory` type not matching a new `directory` value — add it to the union
+- JSON import shape mismatch — `generated-models.json` must match `OutputModel`
+
+---
+
+## Phase 6 — Create PR
+
+```bash
+BRANCH="add-model-page-MODEL-SLUG"   # or update- / remove-
+git checkout -b $BRANCH
+git add apps/website/src/config/generated-models.json \
+        apps/website/scripts/generate-models.ts \
+        apps/website/src/config/model-metadata.ts
+git commit -m "feat(models): add model page for MODEL-SLUG"
+git push -u origin $BRANCH
+gh pr create \
+  --title "Add model page: MODEL-SLUG" \
+  --body "$(cat <<'EOF'
+Adds a new model page entry for MODEL-SLUG.
+
+## Changes
+- `generated-models.json`: regenerated with new entry (workflowCount N, directory DIRECTORY)
+- `model-metadata.ts`: editorial overrides (docsUrl, featured) if needed
+EOF
+)"
+```
+
+For UPDATE use branch `update-model-page-MODEL-SLUG`.
+For REMOVE use `remove-model-page-MODEL-SLUG`.
+
+---
+
+## Error states
+
+| Situation                       | Response                                                         |
+| ------------------------------- | ---------------------------------------------------------------- |
+| Model not in workflow templates | Ask user to verify spelling or add it manually as a partner node |
+| Slug already exists (add)       | Switch to update flow automatically                              |
+| Slug not found (update/remove)  | Stop and ask user to confirm                                     |
+| Typecheck fails                 | Fix the error before pushing                                     |

.coderabbit.yaml

@@ -19,15 +19,26 @@ reviews:
       - name: End-to-end regression coverage for fixes
         mode: error
         instructions: |
-          Use only PR metadata already available in the review context: the PR title, commit subjects in this PR, the files changed in this PR relative to the PR base (equivalent to `base...head`), and the PR description.
-          Do not rely on shell commands. Do not inspect reverse diffs, files changed only on the base branch, or files outside this PR. If the changed-file list or commit subjects are unavailable, mark the check inconclusive instead of guessing.
+          Use only PR metadata already available in the review context:
+            - the PR title
+            - commit subjects in this PR
+            - The files changed in this PR relative to the PR base (equivalent to `base...head`)
+            - the PR description.
+          Do not rely on shell commands.
+          Do not inspect reverse diffs, files changed only on the base branch, or files outside this PR.
+          If the changed-file list or commit subjects are unavailable, mark the check inconclusive instead of guessing.
 
-          Pass if at least one of the following is true:
-          1. Neither the PR title nor any commit subject in the PR uses bug-fix language such as `fix`, `fixed`, `fixes`, `fixing`, `bugfix`, or `hotfix`.
-          2. The PR changes at least one file under `browser_tests/`.
-          3. The PR description includes a concrete, non-placeholder explanation of why an end-to-end regression test was not added.
+          Fail if all of the following are true:
+          1. The PR title and/or any commit subject in the PR uses bug-fix language such as `fix`, `fixed`, `fixes`, `fixing`, `bugfix`, or `hotfix`.
+          2. The PR changes files under `src/` or `packages/` related to the main frontend application but the PR does not change at least one file under `browser_tests/`.
+          3. The PR description lacks a concrete explanation of why an end-to-end regression test was not added.
+
+          Do not fail if the changes are exclusively in `apps/website`, just documentation changes, or changes related to CI processes.
+          The goal is to make sure that fixes include End-to-End regression tests. Do not insist on tests when the PR is not fixing a bug.
+
+          Pass otherwise.
+          When failing, mention which bug-fix signal you found and ask the author to either add or update a Playwright regression test under `browser_tests/` or add a concrete explanation in the PR description of why an end-to-end regression test is not practical.
 
-          Fail otherwise. When failing, mention which bug-fix signal you found and ask the author to either add or update a Playwright regression test under `browser_tests/` or add a concrete explanation in the PR description of why an end-to-end regression test is not practical.
       - name: ADR compliance for entity/litegraph changes
         mode: warning
         instructions: |

.github/actions/cloud-nodes-pull/action.yaml

@@ -0,0 +1,19 @@
+name: Cloud Nodes Pull
+description: 'Refresh the apps/website cloud nodes snapshot from the Comfy Cloud /api/object_info endpoint'
+inputs:
+  api_key:
+    description: 'Comfy Cloud API key (WEBSITE_CLOUD_API_KEY).'
+    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 cloud nodes snapshot
+      shell: bash
+      env:
+        WEBSITE_CLOUD_API_KEY: ${{ inputs.api_key }}
+      run: pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot

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

@@ -109,14 +109,16 @@ jobs:
           if [ ! -s coverage/playwright/coverage.lcov ]; then
             echo "No coverage data; generating placeholder report."
             mkdir -p coverage/html
-            echo '<html><body><h1>No E2E coverage data available for this run.</h1></body></html>' > coverage/html/index.html
+            WORKFLOW_URL="https://github.com/${{ github.repository }}/actions/runs/${{ github.event.workflow_run.id }}"
+            echo "<html><body><h1>No E2E coverage data available for this run.</h1><p><a href=\"${WORKFLOW_URL}\">View workflow run</a></p></body></html>" > coverage/html/index.html
             exit 0
           fi
           genhtml coverage/playwright/coverage.lcov \
             -o coverage/html \
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
-            --precision 1
+            --precision 1 \
+            --ignore-errors source
 
       - name: Upload HTML report artifact
         if: steps.coverage-shards.outputs.has-coverage == 'true'
@@ -130,7 +132,8 @@ jobs:
     needs: merge
     if: >
       github.event.workflow_run.head_branch == 'main' &&
-      needs.merge.outputs.has-coverage == 'true'
+      needs.merge.outputs.has-coverage == 'true' &&
+      github.event.workflow_run.event == 'push'
     runs-on: ubuntu-latest
     permissions:
       pages: write

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

@@ -58,6 +58,7 @@ jobs:
         env:
           WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
         run: vercel build
 
       - name: Fetch head commit metadata
@@ -151,10 +152,20 @@ jobs:
       - name: Pull Vercel environment information
         run: vercel pull --yes --environment=production
 
+      - name: Verify WEBSITE_CLOUD_API_KEY is present for production build
+        env:
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
+        run: |
+          if [ -z "${WEBSITE_CLOUD_API_KEY:-}" ]; then
+            echo "::error title=Missing WEBSITE_CLOUD_API_KEY::Production builds require WEBSITE_CLOUD_API_KEY so /cloud/supported-nodes is generated from fresh Cloud API data. Add it as a GitHub Actions repo secret and to the Vercel project environment. See apps/website/README.md."
+            exit 1
+          fi
+
       - 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 }}
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
         run: vercel build --prod
 
       - name: Deploy project artifacts to Vercel

.github/workflows/model-page-discovery.yaml

@@ -0,0 +1,123 @@
+name: Model Page Discovery
+
+on:
+  schedule:
+    - cron: '0 9 * * 1'
+  workflow_dispatch:
+
+jobs:
+  discover:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      issues: write
+
+    steps:
+      - name: Fetch model labels from hub API
+        id: hub
+        shell: bash
+        run: |
+          set -euo pipefail
+          curl -fsSL 'https://comfy.org/api/hub/labels?type=model' -o hub-labels.json
+          echo "Fetched $(jq '.labels | length' hub-labels.json) model labels from hub"
+
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v6
+        with:
+          sparse-checkout: apps/website/src/config/generated-models.json
+
+      - name: Compare against existing models
+        id: compare
+        shell: bash
+        run: |
+          set -euo pipefail
+
+          HUB_SLUGS=$(jq -r '[.labels[].name]' hub-labels.json)
+
+          EXISTING_SLUGS=$(node -e "
+            const fs = require('fs');
+            const models = JSON.parse(
+              fs.readFileSync(
+                'apps/website/src/config/generated-models.json',
+                'utf8'
+              )
+            );
+            console.log(JSON.stringify(models.map(m => m.slug)));
+          " 2>/dev/null || echo '[]')
+
+          ADDED_SLUGS=$(node -e "
+            const hub = $HUB_SLUGS;
+            const existing = new Set($EXISTING_SLUGS);
+            console.log(JSON.stringify(hub.filter(s => !existing.has(s))));
+          ")
+
+          COUNT=$(node -e "console.log($ADDED_SLUGS.length)")
+          echo "new_count=$COUNT" >> \$GITHUB_OUTPUT
+          echo "new_slugs=$ADDED_SLUGS" >> \$GITHUB_OUTPUT
+
+          if [ "\$COUNT" -eq 0 ]; then
+            echo "No new models found."
+          else
+            echo "Found \$COUNT new model(s)"
+          fi
+
+      - name: Check for existing open discovery issue
+        id: existing_issue
+        if: steps.compare.outputs.new_count != '0'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          COUNT=$(gh issue list \
+            --repo "$GITHUB_REPOSITORY" \
+            --state open \
+            --search 'in:title "New models detected"' \
+            --json number \
+            --jq 'length')
+          echo "open_count=$COUNT" >> $GITHUB_OUTPUT
+
+      - name: Open GitHub issue for new models
+        if: |
+          steps.compare.outputs.new_count != '0' &&
+          steps.existing_issue.outputs.open_count == '0'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NEW_SLUGS: ${{ steps.compare.outputs.new_slugs }}
+          NEW_COUNT: ${{ steps.compare.outputs.new_count }}
+        shell: bash
+        run: |
+          SLUG_LIST=$(node -e "
+            const slugs = $NEW_SLUGS;
+            console.log(slugs.map(s => '- \`' + s + '\`').join('\n'));
+          ")
+
+          gh issue create \
+            --repo "$GITHUB_REPOSITORY" \
+            --title "New models detected — add to model pages" \
+            --body "## $NEW_COUNT new model(s) found in hub
+
+          The weekly model discovery scan found model labels on the hub not yet in
+          \`apps/website/src/config/generated-models.json\`.
+
+          ### New slugs ($NEW_COUNT)
+
+          $SLUG_LIST
+
+          ### Next steps
+
+          1. Review which of these warrant an SEO model page
+          2. For local models: run \`SKIP_THUMBNAILS=1 pnpm generate:models\` and commit the result
+          3. For partner/API models: add to \`API_PROVIDER_MAP\` in \`generate-models.ts\`, regenerate, commit
+
+          ---
+          *Generated by the [model-page-discovery workflow](https://github.com/$GITHUB_REPOSITORY/actions/workflows/model-page-discovery.yaml)*"
+
+      - name: Skip — open issue already exists
+        if: |
+          steps.compare.outputs.new_count != '0' &&
+          steps.existing_issue.outputs.open_count != '0'
+        run: echo "An open discovery issue already exists — skipping creation."
+
+      - name: No new models found
+        if: steps.compare.outputs.new_count == '0'
+        run: echo "No new models found — nothing to do."

.github/workflows/release-website.yaml

@@ -1,6 +1,6 @@
-# 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.
+# Description: Manual workflow to refresh the apps/website Ashby roles and
+# cloud nodes snapshots and open a PR. Merging the PR triggers the existing
+# Vercel website production deploy via ci-vercel-website-preview.yaml.
 name: 'Release: Website'
 
 on:
@@ -11,7 +11,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  refresh-snapshot:
+  refresh-snapshots:
     if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     permissions:
@@ -31,28 +31,39 @@ jobs:
           api_key: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           job_board_name: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
 
+      - name: Refresh cloud nodes snapshot
+        uses: ./.github/actions/cloud-nodes-pull
+        with:
+          api_key: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
+
       - 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'
+          commit-message: 'chore(website): refresh Ashby and cloud nodes snapshots'
+          title: 'chore(website): refresh Ashby and cloud nodes snapshots'
           body: |
-            Automated refresh of `apps/website/src/data/ashby-roles.snapshot.json`
-            from the Ashby job board API.
+            Automated refresh of remote-data snapshots used by the website
+            build:
+
+            - `apps/website/src/data/ashby-roles.snapshot.json` — Ashby job
+              board API
+            - `apps/website/src/data/cloud-nodes.snapshot.json` — Comfy Cloud
+              `/api/object_info`
 
             **Flow:**
             1. `Release: Website` workflow ran (manual trigger).
-            2. This PR opens with the regenerated snapshot.
+            2. This PR opens with the regenerated snapshots.
             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.
+            The snapshot fallback in `apps/website/src/utils/ashby.ts` and
+            `apps/website/src/utils/cloudNodes.ts` remains intact: builds
+            without the respective API keys continue to use the committed
+            snapshot (with a warning annotation in CI).
 
             Triggered by workflow run `${{ github.run_id }}`.
-          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
+          branch: chore/refresh-website-snapshots-${{ github.run_id }}
           base: main
           labels: |
             Release:Website

.oxlintrc.json

@@ -85,6 +85,15 @@
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
     "vitest/require-mock-type-parameters": "off",
+    "vitest/consistent-each-for": [
+      "error",
+      {
+        "test": "for",
+        "it": "for",
+        "describe": "for",
+        "suite": "for"
+      }
+    ],
     "unicorn/no-new-array": "off",
     "unicorn/no-single-promise-in-promise-methods": "off",
     "unicorn/no-useless-fallback-in-spread": "off",

apps/desktop-ui/src/i18n.ts

@@ -9,6 +9,7 @@ import en from '@frontend-locales/en/main.json' with { type: 'json' }
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
 
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
+import { getDefaultLocale } from '@frontend-locales/localeConfig'
 import { createI18n } from 'vue-i18n'
 
 function buildLocale<
@@ -167,7 +168,7 @@ const messages: Record<string, LocaleMessages> = {
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,
-  locale: navigator.language.split('-')[0] || 'en',
+  locale: getDefaultLocale(),
   fallbackLocale: 'en',
   messages,
   // Ignore warnings for locale options as each option is in its own language.

apps/website/README.md

@@ -113,6 +113,50 @@ git commit apps/website/src/data/ashby-roles.snapshot.json
 The script exits non-zero on any non-fresh outcome so stale/empty
 snapshots can't be accidentally committed.
 
+## Cloud nodes integration
+
+`/cloud/supported-nodes` (and `/zh-CN/`) lists custom-node packs preinstalled on Comfy Cloud, joined with public metadata from the [ComfyUI Custom Node Registry](https://registry.comfy.org) ([`api.comfy.org`](https://api.comfy.org)). See [`src/pages/cloud/supported-nodes/AGENTS.md`](src/pages/cloud/supported-nodes/AGENTS.md) for the build pipeline, source-file map, and key invariants.
+
+Build-time env var: `WEBSITE_CLOUD_API_KEY` (Cloud `/api/object_info` auth; the build falls back to the committed snapshot when unset). Must also be set in the Vercel project environment.
+
+### Production strictness
+
+`src/utils/cloudNodes.build.ts` throws when `fetchCloudNodesForBuild()` returns
+`{ status: 'stale' }` **and** `process.env.VERCEL_ENV === 'production'`. This
+prevents the production deploy from silently shipping an out-of-date snapshot
+when the Cloud API is unreachable or `WEBSITE_CLOUD_API_KEY` is missing. Preview
+and local builds continue to use the committed snapshot with a warning
+annotation.
+
+### Required GitHub Actions / Vercel secrets
+
+| Name                    | Where                                           | Purpose                                                                |
+| ----------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| `WEBSITE_CLOUD_API_KEY` | GitHub Actions repo secret + Vercel project env | Auth for Cloud `/api/object_info`. Required for fresh production data. |
+
+The `Release: Website` workflow uses the GitHub Actions secret to regenerate
+`apps/website/src/data/cloud-nodes.snapshot.json` via
+`.github/actions/cloud-nodes-pull/action.yaml`. The Vercel environment value is
+read at build time by `vercel build` in `ci-vercel-website-preview.yaml`; the
+`deploy-production` job hard-fails before `vercel build --prod` if the secret
+is missing.
+
+### Refreshing the snapshot
+
+To update the committed snapshot manually (e.g. after onboarding new packs
+to Comfy Cloud):
+
+```bash
+WEBSITE_CLOUD_API_KEY=… \
+  pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot
+git commit apps/website/src/data/cloud-nodes.snapshot.json
+```
+
+The script exits non-zero on any non-fresh outcome so stale/empty snapshots
+can't be accidentally committed. Otherwise the `Release: Website` GitHub
+Actions workflow runs the same step on every manual dispatch and opens a PR
+with the refreshed snapshot.
+
 ## HubSpot contact form
 
 The contact page uses HubSpot's hosted form embed for the interest form:
@@ -146,3 +190,4 @@ renders the documented embed container.
 - `pnpm test:unit` — Vitest unit tests
 - `pnpm test:e2e` — Playwright E2E tests (requires `pnpm build` first)
 - `pnpm ashby:refresh-snapshot` — refresh the committed careers snapshot
+- `pnpm cloud-nodes:refresh-snapshot` — refresh the committed cloud nodes snapshot

apps/website/e2e/careers.spec.ts

@@ -23,15 +23,6 @@ test.describe('Careers page @smoke', () => {
     expect(await roles.count()).toBeGreaterThan(0)
   })
 
-  test('each role links to jobs.ashbyhq.com', async ({ page }) => {
-    const roles = page.getByTestId('careers-role-link')
-    const count = await roles.count()
-    for (let i = 0; i < count; i++) {
-      const href = await roles.nth(i).getAttribute('href')
-      expect(href).toMatch(/^https:\/\/jobs\.ashbyhq\.com\//)
-    }
-  })
-
   test('clicking a department button scrolls to and activates that section', async ({
     page
   }) => {
@@ -63,6 +54,21 @@ test.describe('Careers page @smoke', () => {
   })
 })
 
+test.describe('Careers page role links', () => {
+  test('each role links to the Ashby job description page, not the application form', async ({
+    page
+  }) => {
+    await page.goto('/careers')
+    const roles = page.getByTestId('careers-role-link')
+    const count = await roles.count()
+    for (let i = 0; i < count; i++) {
+      const href = await roles.nth(i).getAttribute('href')
+      expect(href).toMatch(/^https:\/\/jobs\.ashbyhq\.com\//)
+      expect(href).not.toMatch(/\/application\/?$/)
+    }
+  })
+})
+
 test.describe('Careers page (zh-CN) @smoke', () => {
   test('renders localized heading and roles', async ({ page }) => {
     await page.goto('/zh-CN/careers')

apps/website/e2e/cloud-nodes.spec.ts

@@ -0,0 +1,169 @@
+import { expect } from '@playwright/test'
+
+import { test } from './fixtures/blockExternalMedia'
+
+test.describe('Cloud nodes page @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/cloud/supported-nodes')
+  })
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(
+      'Custom-node packs on Comfy Cloud — supported by default'
+    )
+  })
+
+  test('renders at least one pack card', async ({ page }) => {
+    const cards = page.getByTestId('cloud-node-pack-card')
+    await expect(cards.first()).toBeVisible()
+    expect(await cards.count()).toBeGreaterThan(0)
+  })
+
+  test('search input filters cards down', async ({ page }) => {
+    const cards = page.getByTestId('cloud-node-pack-card')
+    const initialCount = await cards.count()
+
+    await page.getByTestId('cloud-nodes-search').fill('impact')
+    const filteredCards = page.getByTestId('cloud-node-pack-card')
+    await expect(filteredCards.first()).toBeVisible()
+    const filteredCount = await filteredCards.count()
+
+    expect(filteredCount).toBeGreaterThan(0)
+    expect(filteredCount).toBeLessThanOrEqual(initialCount)
+  })
+
+  test('renders banner image or fallback element', async ({ page }) => {
+    const banners = page.getByTestId('cloud-node-pack-banner')
+    await expect(banners.first()).toBeVisible()
+  })
+
+  test('opens pack detail page from first card', async ({ page }) => {
+    const firstCard = page.getByTestId('cloud-node-pack-card').first()
+    await expect(firstCard).toBeVisible()
+
+    await firstCard.locator('a').first().click()
+
+    await expect(page).toHaveURL(/\/cloud\/supported-nodes\/[a-z0-9-]+$/)
+    await expect(page.getByTestId('cloud-node-pack-detail')).toBeVisible()
+  })
+
+  test('direct pack detail route renders node entries', async ({ page }) => {
+    await page.goto('/cloud/supported-nodes/comfyui-impact-pack')
+    await expect(page.getByTestId('cloud-node-pack-detail')).toBeVisible()
+    await expect(
+      page.getByTestId('cloud-node-pack-detail-node').first()
+    ).toBeVisible()
+  })
+
+  test('search with no matches shows empty state', async ({ page }) => {
+    await page
+      .getByTestId('cloud-nodes-search')
+      .fill('zzzz-this-pack-does-not-exist')
+    await expect(page.getByTestId('cloud-node-pack-card')).toHaveCount(0)
+    await expect(page.getByText('No matching packs')).toBeVisible()
+  })
+
+  test('clearing search restores the full list', async ({ page }) => {
+    const cards = page.getByTestId('cloud-node-pack-card')
+    const initialCount = await cards.count()
+
+    await page.getByTestId('cloud-nodes-search').fill('impact')
+    await expect(cards.first()).toBeVisible()
+
+    await page.getByTestId('cloud-nodes-search').fill('')
+    await expect(cards).toHaveCount(initialCount)
+  })
+
+  test('search matches against node display names, not just pack names', async ({
+    page
+  }) => {
+    await page.getByTestId('cloud-nodes-search').fill('FaceDetailer')
+    await expect(page.getByTestId('cloud-node-pack-card')).toHaveCount(1)
+    await expect(
+      page.getByTestId('cloud-node-pack-card-link').first()
+    ).toContainText('Impact Pack')
+  })
+
+  test('switching sort to A → Z reorders cards alphabetically', async ({
+    page
+  }) => {
+    await page.locator('#cloud-nodes-sort').selectOption('az')
+    const firstName = await page
+      .getByTestId('cloud-node-pack-card-link')
+      .first()
+      .textContent()
+    expect(firstName?.trim().toLowerCase().charAt(0)).toMatch(/^[a-c]/)
+  })
+
+  test('list grid carries a localized aria-label', async ({ page }) => {
+    await expect(
+      page.getByRole('list', {
+        name: 'Custom-node packs supported on Comfy Cloud'
+      })
+    ).toBeVisible()
+  })
+
+  test('clicking the back link returns to the index from a detail page', async ({
+    page
+  }) => {
+    await page.goto('/cloud/supported-nodes/comfyui-impact-pack')
+    await page.getByRole('link', { name: 'Back to all packs' }).click()
+    await expect(page).toHaveURL(/\/cloud\/supported-nodes\/?$/)
+    await expect(page.getByTestId('cloud-node-pack-card').first()).toBeVisible()
+  })
+
+  test('detail page renders publisher and external repo link', async ({
+    page
+  }) => {
+    await page.goto('/cloud/supported-nodes/comfyui-impact-pack')
+    const repoLink = page.getByRole('link', {
+      name: /github\.com\/ltdrdata\/ComfyUI-Impact-Pack/
+    })
+    await expect(repoLink).toBeVisible()
+    await expect(repoLink).toHaveAttribute('rel', /noopener/)
+  })
+
+  test('unknown pack slug 404s', async ({ page }) => {
+    const response = await page.goto(
+      '/cloud/supported-nodes/this-pack-does-not-exist'
+    )
+    expect(response?.status()).toBe(404)
+  })
+
+  test('JSON-LD ItemList is emitted on the index page', async ({ page }) => {
+    const jsonLd = page.locator('script[type="application/ld+json"]')
+    const ldBlocks = await jsonLd.allTextContents()
+    expect(ldBlocks.some((b) => b.includes('"@type":"ItemList"'))).toBeTruthy()
+  })
+
+  test('JSON-LD payload escapes <-sequences', async ({ page }) => {
+    const ldBlocks = await page
+      .locator('script[type="application/ld+json"]')
+      .allTextContents()
+    for (const block of ldBlocks) {
+      expect(block).not.toContain('</script')
+    }
+  })
+})
+
+test.describe('Cloud nodes page (zh-CN) @smoke', () => {
+  test('renders localized title and packs', async ({ page }) => {
+    await page.goto('/zh-CN/cloud/supported-nodes')
+    await expect(page).toHaveTitle('Comfy Cloud 自定义节点包合集——开箱即用')
+    await expect(page.getByTestId('cloud-node-pack-card').first()).toBeVisible()
+    await expect(
+      page.getByTestId('cloud-node-pack-banner').first()
+    ).toBeVisible()
+  })
+
+  test('opens pack detail page from first card', async ({ page }) => {
+    await page.goto('/zh-CN/cloud/supported-nodes')
+    const firstCard = page.getByTestId('cloud-node-pack-card').first()
+    await expect(firstCard).toBeVisible()
+
+    await firstCard.locator('a').first().click()
+
+    await expect(page).toHaveURL(/\/zh-CN\/cloud\/supported-nodes\/[a-z0-9-]+$/)
+    await expect(page.getByTestId('cloud-node-pack-detail')).toBeVisible()
+  })
+})

apps/website/e2e/pricing.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test'
+
+import { test } from './fixtures/blockExternalMedia'
+
+test.describe('Pricing page @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/cloud/pricing')
+  })
+
+  test('shows the three paid tiers and Enterprise', async ({ page }) => {
+    const pricingGrid = page
+      .locator('section', {
+        has: page.getByRole('heading', { name: /Pricing/i })
+      })
+      .locator('.lg\\:grid')
+
+    for (const label of ['STANDARD', 'CREATOR', 'PRO']) {
+      await expect(
+        pricingGrid.locator('span', { hasText: new RegExp(`^${label}$`) })
+      ).toBeVisible()
+    }
+
+    await expect(
+      page.getByRole('heading', { name: /Looking for Enterprise Solutions/i })
+    ).toBeVisible()
+  })
+
+  test('does not show the Free tier when SHOW_FREE_TIER is disabled', async ({
+    page
+  }) => {
+    const pricingGrid = page
+      .locator('section', {
+        has: page.getByRole('heading', { name: /Pricing/i })
+      })
+      .locator('.lg\\:grid')
+
+    await expect(
+      pricingGrid.locator('span', { hasText: /^FREE$/ })
+    ).toHaveCount(0)
+    await expect(page.getByRole('link', { name: /^START FREE$/ })).toHaveCount(
+      0
+    )
+    await expect(page.getByText(/Everything in Free, plus:/i)).toHaveCount(0)
+  })
+})
+
+test.describe('Cloud pricing teaser @smoke', () => {
+  test('does not show the "Start free" tagline when SHOW_FREE_TIER is disabled', async ({
+    page
+  }) => {
+    await page.goto('/cloud')
+    await expect(
+      page.getByText(/Start free\.\s*Upgrade when you're ready\./i)
+    ).toHaveCount(0)
+  })
+})

apps/website/package.json

@@ -15,11 +15,15 @@
     "test:e2e:local": "cross-env PLAYWRIGHT_LOCAL=1 playwright test",
     "test:visual": "playwright test --project visual",
     "test:visual:update": "playwright test --project visual --update-snapshots",
-    "ashby:refresh-snapshot": "tsx ./scripts/refresh-ashby-snapshot.ts"
+    "ashby:refresh-snapshot": "tsx ./scripts/refresh-ashby-snapshot.ts",
+    "cloud-nodes:refresh-snapshot": "tsx ./scripts/refresh-cloud-nodes-snapshot.ts",
+    "generate:models": "tsx ./scripts/generate-models.ts"
   },
   "dependencies": {
     "@astrojs/sitemap": "catalog:",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/object-info-parser": "workspace:*",
+    "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
     "@vercel/analytics": "catalog:",
     "@vueuse/core": "catalog:",

apps/website/scripts/generate-models.ts

@@ -0,0 +1,396 @@
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const WORKFLOW_TEMPLATES_BASE =
+  'https://raw.githubusercontent.com/Comfy-Org/workflow_templates/main/templates'
+
+const TEMPLATES_DIR = fileURLToPath(
+  new URL('../../../../workflow_templates/templates', import.meta.url)
+)
+
+const QUANT_SUFFIXES = [
+  '_fp8_e4m3fn_scaled',
+  '_fp8_e4m3fn',
+  '_fp8_scaled',
+  '_fp4_mixed',
+  '_fp8mixed',
+  '_fp8',
+  '_fp16',
+  '_fp4',
+  '_bf16',
+  '_int8'
+]
+
+interface RawModel {
+  name: string
+  url: string
+  directory: string
+}
+
+interface ModelData {
+  url: string
+  directory: string
+  templates: Set<string>
+  firstTemplate?: string
+}
+
+interface OutputModel {
+  slug: string
+  name: string
+  huggingFaceUrl: string
+  directory: string
+  workflowCount: number
+  displayName: string
+  docsUrl?: string
+  thumbnailUrl?: string
+  canonicalSlug?: string
+}
+
+// Maps api_*.json filename prefix to a canonical display name and slug.
+// Add entries here as new partner integrations land in workflow_templates.
+const API_PROVIDER_MAP: Record<string, { name: string; slug: string }> = {
+  nano: { name: 'Nano Banana', slug: 'nano-banana' },
+  kling: { name: 'Kling AI', slug: 'kling-ai' },
+  kling2: { name: 'Kling AI', slug: 'kling-ai' },
+  meshy: { name: 'Meshy AI', slug: 'meshy-ai' },
+  luma: { name: 'Luma Dream Machine', slug: 'luma-dream-machine' },
+  runway: { name: 'Runway', slug: 'runway' },
+  vidu: { name: 'Vidu', slug: 'vidu' },
+  bfl: { name: 'Flux (API)', slug: 'flux-api' },
+  grok: { name: 'Grok Image', slug: 'grok-image' },
+  stability: { name: 'Stability AI', slug: 'stability-ai' },
+  bytedance: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
+  bytedace: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
+  google: { name: 'Gemini Image', slug: 'gemini-image' },
+  hailuo: { name: 'Hailuo MiniMax', slug: 'hailuo-minimax' },
+  ideogram: { name: 'Ideogram', slug: 'ideogram' },
+  pixverse: { name: 'Pixverse', slug: 'pixverse' },
+  rodin: { name: 'Rodin 3D', slug: 'rodin-3d' },
+  magnific: { name: 'Magnific AI', slug: 'magnific-ai' },
+  bria: { name: 'Bria AI', slug: 'bria-ai' },
+  tripo: { name: 'Tripo 3D', slug: 'tripo-3d' },
+  tripo3: { name: 'Tripo 3D', slug: 'tripo-3d' },
+  hunyuan3d: { name: 'Hunyuan 3D', slug: 'hunyuan-3d' },
+  recraft: { name: 'Recraft', slug: 'recraft' },
+  topaz: { name: 'Topaz Labs', slug: 'topaz-labs' },
+  moonvalley: { name: 'Moonvalley', slug: 'moonvalley' },
+  ltxv: { name: 'LTX Video (API)', slug: 'ltxv-api' },
+  openai: { name: 'OpenAI DALL-E', slug: 'openai-dall-e' },
+  wan: { name: 'Wan (API)', slug: 'wan-api' },
+  wan2: { name: 'Wan (API)', slug: 'wan-api' },
+  veo2: { name: 'Veo 2', slug: 'veo-2' },
+  veo3: { name: 'Veo 3', slug: 'veo-3' },
+  flux2: { name: 'Flux 2 (API)', slug: 'flux-2-api' },
+  wavespeed: { name: 'Wavespeed', slug: 'wavespeed' },
+  wavespped: { name: 'Wavespeed', slug: 'wavespeed' }
+}
+
+function stripExt(name: string): string {
+  return name.replace(/\.(safetensors|ckpt|pt|bin)$/, '')
+}
+
+function stripQuant(base: string): string {
+  for (const suffix of QUANT_SUFFIXES) {
+    if (base.endsWith(suffix)) return base.slice(0, -suffix.length)
+  }
+  return base
+}
+
+function makeSlug(name: string): string {
+  const base = stripExt(name)
+  return base
+    .toLowerCase()
+    .replace(/[_.]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+function makeDisplayName(name: string): string {
+  const base = stripExt(name)
+  return base
+    .split(/[_-]/)
+    .map((part) => {
+      if (/^(fp\d+|bf\d+|int\d+)$/i.test(part)) return part.toUpperCase()
+      if (/^(e4m3fn|scaled|mixed|fp8mixed)$/i.test(part)) return part
+      if (/^\d+(\.\d+)?[bBkKmM]?$/.test(part)) return part
+      return part.charAt(0).toUpperCase() + part.slice(1)
+    })
+    .join(' ')
+}
+
+function extractModels(
+  obj: unknown,
+  templateName: string,
+  models: Map<string, ModelData>
+): void {
+  if (obj === null || typeof obj !== 'object') return
+
+  if (Array.isArray(obj)) {
+    for (const item of obj) extractModels(item, templateName, models)
+    return
+  }
+
+  const record = obj as Record<string, unknown>
+
+  if (Array.isArray(record['models'])) {
+    for (const m of record['models'] as unknown[]) {
+      if (m === null || typeof m !== 'object' || Array.isArray(m)) continue
+      const model = m as Record<string, unknown>
+      if (typeof model['name'] !== 'string') continue
+
+      const name = model['name']
+      const url = typeof model['url'] === 'string' ? model['url'] : ''
+      const directory =
+        typeof model['directory'] === 'string' ? model['directory'] : ''
+
+      if (!models.has(name)) {
+        models.set(name, {
+          url,
+          directory,
+          templates: new Set(),
+          firstTemplate: templateName
+        })
+      }
+      models.get(name)!.templates.add(templateName)
+    }
+  }
+
+  for (const value of Object.values(record)) {
+    extractModels(value, templateName, models)
+  }
+}
+
+interface ApiModelData {
+  slug: string
+  name: string
+  directory: 'partner_nodes'
+  templateCount: number
+}
+
+function extractApiModels(files: string[]): ApiModelData[] {
+  const counts = new Map<string, number>()
+  for (const file of files) {
+    if (!file.startsWith('api_')) continue
+    const prefix = file.slice(4).split('_')[0]
+    const entry = API_PROVIDER_MAP[prefix]
+    if (!entry) continue
+    counts.set(entry.slug, (counts.get(entry.slug) ?? 0) + 1)
+  }
+  return [...counts.entries()].map(([slug, count]) => {
+    const found = Object.values(API_PROVIDER_MAP).find((e) => e.slug === slug)!
+    return {
+      slug,
+      name: found.name,
+      directory: 'partner_nodes' as const,
+      templateCount: count
+    }
+  })
+}
+
+// Reads all locale index.json files to build a map of
+// raw model filename → tutorialUrl. Index entries name the template file;
+// that file's embedded model objects give the actual filenames.
+function buildTutorialUrlMap(templatesDir: string): Map<string, string> {
+  const map = new Map<string, string>()
+  const indexFiles = readdirSync(templatesDir).filter(
+    (f) =>
+      f.startsWith('index') &&
+      f.endsWith('.json') &&
+      !f.includes('schema') &&
+      !f.includes('logo')
+  )
+  // Collect template-name → tutorialUrl from all locale indexes (first wins)
+  const templateTutorialMap = new Map<string, string>()
+  const sorted = ['index.json', ...indexFiles.filter((f) => f !== 'index.json')]
+  for (const file of sorted) {
+    let data: unknown
+    try {
+      data = JSON.parse(readFileSync(join(templatesDir, file), 'utf8'))
+    } catch {
+      continue
+    }
+    if (!Array.isArray(data)) continue
+    for (const cat of data as unknown[]) {
+      if (typeof cat !== 'object' || cat === null) continue
+      const templates = (cat as Record<string, unknown>)['templates']
+      if (!Array.isArray(templates)) continue
+      for (const t of templates) {
+        if (typeof t !== 'object' || t === null) continue
+        const entry = t as Record<string, unknown>
+        const tutorialUrl =
+          typeof entry['tutorialUrl'] === 'string'
+            ? entry['tutorialUrl']
+            : undefined
+        const templateName =
+          typeof entry['name'] === 'string' ? entry['name'] : undefined
+        if (
+          tutorialUrl &&
+          templateName &&
+          !templateTutorialMap.has(templateName)
+        ) {
+          templateTutorialMap.set(templateName, tutorialUrl)
+        }
+      }
+    }
+  }
+
+  // For each template with a tutorialUrl, open the template file and map
+  // every embedded model filename to that tutorialUrl
+  for (const [templateName, tutorialUrl] of templateTutorialMap) {
+    const filePath = join(templatesDir, `${templateName}.json`)
+    let data: unknown
+    try {
+      data = JSON.parse(readFileSync(filePath, 'utf8'))
+    } catch {
+      continue
+    }
+
+    function extractModelNames(obj: unknown): void {
+      if (obj === null || typeof obj !== 'object') return
+      if (Array.isArray(obj)) {
+        for (const item of obj) extractModelNames(item)
+        return
+      }
+      const record = obj as Record<string, unknown>
+      if (Array.isArray(record['models'])) {
+        for (const m of record['models'] as unknown[]) {
+          if (m === null || typeof m !== 'object' || Array.isArray(m)) continue
+          const model = m as Record<string, unknown>
+          if (typeof model['name'] === 'string' && !map.has(model['name'])) {
+            map.set(model['name'], tutorialUrl)
+          }
+        }
+      }
+      for (const value of Object.values(record)) {
+        extractModelNames(value)
+      }
+    }
+
+    extractModelNames(data)
+  }
+
+  return map
+}
+
+function templateThumbnailUrl(
+  firstTemplate: string | undefined,
+  templatesDir: string
+): string | undefined {
+  if (!firstTemplate) return undefined
+  const base = firstTemplate.replace(/\.json$/, '')
+  const localPath = join(templatesDir, `${base}-1.webp`)
+  if (!existsSync(localPath)) return undefined
+  return `${WORKFLOW_TEMPLATES_BASE}/${encodeURIComponent(base)}-1.webp`
+}
+
+function run(): void {
+  const models = new Map<string, ModelData>()
+
+  const files = readdirSync(TEMPLATES_DIR).filter((f) => f.endsWith('.json'))
+
+  for (const file of files) {
+    const filePath = join(TEMPLATES_DIR, file)
+    try {
+      const raw = readFileSync(filePath, 'utf8')
+      const data: unknown = JSON.parse(raw)
+      extractModels(data, file, models)
+    } catch (error) {
+      throw new Error(
+        `Failed to parse ${file}: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      )
+    }
+  }
+
+  const apiModels = extractApiModels(files)
+  const tutorialUrlMap = buildTutorialUrlMap(TEMPLATES_DIR)
+
+  const sorted = [...models.entries()].sort(
+    ([, a], [, b]) => b.templates.size - a.templates.size
+  )
+
+  // Build quant convergence map
+  const groups = new Map<string, Array<[string, ModelData]>>()
+  for (const [name, data] of sorted) {
+    const base = stripExt(name)
+    const canonicalBase = stripQuant(base)
+    if (!groups.has(canonicalBase)) groups.set(canonicalBase, [])
+    groups.get(canonicalBase)!.push([name, data])
+  }
+
+  const canonicalMap = new Map<string, string | null>()
+  for (const members of groups.values()) {
+    if (members.length > 1) {
+      const membersSorted = [...members].sort(
+        ([, a], [, b]) => b.templates.size - a.templates.size
+      )
+      const canonicalName = membersSorted[0][0]
+      canonicalMap.set(canonicalName, null)
+      for (const [name] of membersSorted.slice(1)) {
+        canonicalMap.set(name, canonicalName)
+      }
+    } else {
+      canonicalMap.set(members[0][0], null)
+    }
+  }
+
+  const output: OutputModel[] = sorted.map(([name, data]) => {
+    const canonicalRaw = canonicalMap.get(name) ?? null
+    const result: OutputModel = {
+      slug: makeSlug(name),
+      name,
+      huggingFaceUrl: data.url,
+      directory: data.directory,
+      workflowCount: data.templates.size,
+      displayName: makeDisplayName(name)
+    }
+    const docsUrl = tutorialUrlMap.get(name)
+    if (docsUrl) result.docsUrl = docsUrl
+    const thumb = templateThumbnailUrl(data.firstTemplate, TEMPLATES_DIR)
+    if (thumb) result.thumbnailUrl = thumb
+    if (canonicalRaw !== null) {
+      result.canonicalSlug = makeSlug(canonicalRaw)
+    }
+    return result
+  })
+
+  const apiOutput: OutputModel[] = apiModels
+    .sort((a, b) => b.templateCount - a.templateCount)
+    .map((m) => ({
+      slug: m.slug,
+      name: m.name,
+      huggingFaceUrl: '',
+      directory: m.directory,
+      workflowCount: m.templateCount,
+      displayName: m.name
+    }))
+
+  const combined = [...apiOutput, ...output]
+
+  const withThumbs = combined.filter((m) => m.thumbnailUrl).length
+  process.stdout.write(
+    `  ${withThumbs}/${combined.length} models have thumbnails\n`
+  )
+
+  const defaultOut = join(
+    fileURLToPath(new URL('.', import.meta.url)),
+    '../src/config/generated-models.json'
+  )
+  const outputArg = process.argv[2] ?? defaultOut
+  const json = JSON.stringify(combined, null, 2) + '\n'
+
+  writeFileSync(outputArg, json, 'utf8')
+  process.stdout.write(
+    `Written ${combined.length} models ` +
+      `(${apiOutput.length} partner, ${output.length} local) to ${outputArg}\n`
+  )
+}
+
+try {
+  run()
+} catch (err) {
+  process.stderr.write(`${err instanceof Error ? err.message : String(err)}\n`)
+  process.exit(1)
+}

apps/website/scripts/refresh-cloud-nodes-snapshot.ts

@@ -0,0 +1,32 @@
+import { renameSync, writeFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { fetchCloudNodesForBuild } from '../src/utils/cloudNodes'
+
+const snapshotPath = fileURLToPath(
+  new URL('../src/data/cloud-nodes.snapshot.json', import.meta.url)
+)
+const tempPath = `${snapshotPath}.tmp`
+
+const outcome = await fetchCloudNodesForBuild()
+
+if (outcome.status !== 'fresh') {
+  const reason = 'reason' in outcome ? outcome.reason : '(none)'
+  console.error(
+    `Snapshot refresh aborted. Outcome: ${outcome.status}; reason: ${reason}`
+  )
+  process.exit(1)
+}
+
+const serialized = JSON.stringify(outcome.snapshot, null, 2) + '\n'
+
+writeFileSync(tempPath, serialized, 'utf8')
+renameSync(tempPath, snapshotPath)
+
+const totalNodes = outcome.snapshot.packs.reduce(
+  (n, pack) => n + pack.nodes.length,
+  0
+)
+process.stdout.write(
+  `Wrote snapshot with ${outcome.snapshot.packs.length} pack(s) and ${totalNodes} node(s) to ${snapshotPath}\n`
+)

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

@@ -130,7 +130,7 @@ function scrollToDepartment(deptKey: string) {
             <a
               v-for="role in dept.roles"
               :key="role.id"
-              :href="role.applyUrl"
+              :href="role.jobUrl"
               target="_blank"
               rel="noopener noreferrer"
               class="border-primary-warm-gray/20 group flex items-center justify-between border-b py-5"

apps/website/src/components/cloud-nodes/HeroSection.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import SectionLabel from '../common/SectionLabel.vue'
+
+const { locale = 'en' } = defineProps<{
+  locale?: Locale
+}>()
+</script>
+
+<template>
+  <section class="px-6 pt-24 pb-14 md:px-20 md:pt-32 md:pb-20">
+    <div class="mx-auto flex w-full max-w-6xl flex-col gap-7">
+      <SectionLabel>
+        {{ t('cloudNodes.hero.label', locale) }}
+      </SectionLabel>
+
+      <h1
+        class="text-primary-comfy-canvas max-w-4xl text-4xl/tight md:text-6xl"
+      >
+        {{ t('cloudNodes.hero.heading', locale) }}
+      </h1>
+
+      <p class="text-primary-warm-gray max-w-3xl text-base/relaxed md:text-lg">
+        {{ t('cloudNodes.hero.body', locale) }}
+      </p>
+    </div>
+  </section>
+</template>

apps/website/src/components/cloud-nodes/NodeList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PackNode } from '../../data/cloudNodes'
+import type { Locale } from '../../i18n/translations'
+
+import { useNodesByCategory } from '../../composables/useNodesByCategory'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en', nodes } = defineProps<{
+  locale?: Locale
+  nodes: readonly PackNode[]
+}>()
+
+const { groupedNodes } = useNodesByCategory(() => nodes)
+</script>
+
+<template>
+  <details
+    class="group border-primary-warm-gray/20 rounded-2xl border px-4 py-3"
+  >
+    <summary
+      class="text-primary-comfy-canvas cursor-pointer list-none text-sm font-semibold"
+    >
+      {{ t('cloudNodes.card.nodesHeading', locale) }}
+    </summary>
+
+    <div class="mt-4 flex flex-col gap-5">
+      <div
+        v-for="group in groupedNodes"
+        :key="group.category"
+        class="flex flex-col gap-2"
+      >
+        <h4
+          class="text-primary-warm-gray text-xs font-semibold tracking-widest uppercase"
+        >
+          {{ group.category }}
+        </h4>
+        <ul class="flex flex-col gap-1">
+          <li
+            v-for="node in group.nodes"
+            :key="node.name"
+            class="text-primary-comfy-canvas text-sm/relaxed"
+          >
+            {{ node.displayName }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </details>
+</template>

apps/website/src/components/cloud-nodes/PackBanner.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useBannerImage } from '../../composables/useBannerImage'
+
+const { bannerUrl, iconUrl, name } = defineProps<{
+  bannerUrl?: string
+  iconUrl?: string
+  name: string
+}>()
+
+const {
+  DEFAULT_BANNER,
+  isImageError,
+  showDefaultBanner,
+  imgSrc,
+  onImageError
+} = useBannerImage({
+  bannerUrl: () => bannerUrl,
+  iconUrl: () => iconUrl
+})
+</script>
+
+<template>
+  <div
+    class="z-0 aspect-7/3 w-full overflow-hidden"
+    data-testid="cloud-node-pack-banner"
+  >
+    <div v-if="showDefaultBanner" class="size-full">
+      <img
+        :src="DEFAULT_BANNER"
+        :alt="`${name} banner`"
+        class="size-full object-cover"
+      />
+    </div>
+    <div v-else class="relative size-full">
+      <div
+        v-if="imgSrc && !isImageError"
+        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+        :style="{ backgroundImage: `url(${imgSrc})`, filter: 'blur(10px)' }"
+      />
+      <img
+        :src="isImageError ? DEFAULT_BANNER : imgSrc"
+        :alt="`${name} banner`"
+        :class="
+          isImageError
+            ? 'relative z-10 size-full object-cover'
+            : 'relative z-10 size-full object-contain'
+        "
+        @error="onImageError"
+      />
+    </div>
+  </div>
+</template>

apps/website/src/components/cloud-nodes/PackCard.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { Pack } from '../../data/cloudNodes'
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import NodeList from './NodeList.vue'
+import PackBanner from './PackBanner.vue'
+
+const { locale = 'en', pack } = defineProps<{
+  locale?: Locale
+  pack: Pack
+}>()
+
+const detailHref =
+  locale === 'zh-CN'
+    ? `/zh-CN/cloud/supported-nodes/${pack.id}`
+    : `/cloud/supported-nodes/${pack.id}`
+
+function nodeCountLabel(nodeCount: number): string {
+  const key =
+    new Intl.PluralRules(locale).select(nodeCount) === 'one'
+      ? 'cloudNodes.card.nodeCountOne'
+      : 'cloudNodes.card.nodeCountOther'
+  return t(key, locale).replace('{count}', String(nodeCount))
+}
+</script>
+
+<template>
+  <article
+    class="bg-transparency-white-t5 border-primary-warm-gray/20 flex h-full flex-col overflow-hidden rounded-3xl border"
+    data-testid="cloud-node-pack-card"
+  >
+    <PackBanner
+      :banner-url="pack.bannerUrl"
+      :icon-url="pack.iconUrl"
+      :name="pack.displayName"
+    />
+
+    <div class="flex flex-1 flex-col gap-5 p-5 md:p-6">
+      <div class="flex flex-col gap-2">
+        <h3 class="text-primary-comfy-canvas text-2xl/tight font-semibold">
+          <a
+            :href="detailHref"
+            class="hover:text-primary-comfy-yellow"
+            data-testid="cloud-node-pack-card-link"
+          >
+            {{ pack.displayName }}
+          </a>
+        </h3>
+        <p class="text-primary-warm-gray text-sm/relaxed">
+          {{
+            pack.description ||
+            t('cloudNodes.card.unavailableDescription', locale)
+          }}
+        </p>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3 text-sm">
+        <a
+          v-if="pack.repoUrl"
+          :href="pack.repoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-primary-comfy-yellow hover:text-primary-comfy-yellow/85 font-semibold underline"
+        >
+          {{ t('cloudNodes.card.viewRepo', locale) }}
+        </a>
+        <span v-else class="text-primary-warm-gray">
+          {{ t('cloudNodes.card.viewRepo', locale) }}
+        </span>
+        <span class="text-primary-warm-gray">•</span>
+        <span class="text-primary-comfy-canvas">{{
+          nodeCountLabel(pack.nodes.length)
+        }}</span>
+      </div>
+
+      <NodeList :locale="locale" :nodes="pack.nodes" class="mt-auto" />
+    </div>
+  </article>
+</template>

apps/website/src/components/cloud-nodes/PackDetail.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Pack } from '../../data/cloudNodes'
+import type { Locale } from '../../i18n/translations'
+
+import {
+  formatLocalizedMediumDate,
+  formatLocalizedNumber
+} from '@comfyorg/shared-frontend-utils/formatUtil'
+
+import { useNodesByCategory } from '../../composables/useNodesByCategory'
+import { t } from '../../i18n/translations'
+import PackBanner from './PackBanner.vue'
+
+const { pack, locale = 'en' } = defineProps<{
+  pack: Pack
+  locale?: Locale
+}>()
+
+const backHref =
+  locale === 'zh-CN' ? '/zh-CN/cloud/supported-nodes' : '/cloud/supported-nodes'
+
+const { groupedNodes } = useNodesByCategory(() => pack.nodes)
+</script>
+
+<template>
+  <article
+    class="px-6 pb-20 md:px-20 md:pb-28"
+    data-testid="cloud-node-pack-detail"
+  >
+    <div class="mx-auto flex w-full max-w-6xl flex-col gap-8">
+      <a
+        :href="backHref"
+        class="text-primary-comfy-yellow hover:text-primary-comfy-yellow/85 w-fit text-sm font-semibold underline"
+      >
+        {{ t('cloudNodes.detail.back', locale) }}
+      </a>
+
+      <div
+        class="bg-transparency-white-t5 border-primary-warm-gray/20 overflow-hidden rounded-3xl border"
+      >
+        <PackBanner
+          :banner-url="pack.bannerUrl"
+          :icon-url="pack.iconUrl"
+          :name="pack.displayName"
+        />
+
+        <div class="flex flex-col gap-7 p-5 md:p-6">
+          <header class="flex flex-col gap-2">
+            <h1
+              class="text-primary-comfy-canvas text-3xl/tight font-semibold md:text-4xl"
+            >
+              {{ pack.displayName }}
+            </h1>
+            <p
+              class="text-primary-warm-gray text-sm/relaxed md:text-base/relaxed"
+            >
+              {{
+                pack.description ||
+                t('cloudNodes.card.unavailableDescription', locale)
+              }}
+            </p>
+          </header>
+
+          <dl class="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.card.viewRepo', locale) }}
+              </dt>
+              <dd>
+                <a
+                  v-if="pack.repoUrl"
+                  :href="pack.repoUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-primary-comfy-yellow hover:text-primary-comfy-yellow/85 font-semibold underline"
+                >
+                  {{ pack.repoUrl }}
+                </a>
+                <span v-else class="text-primary-comfy-canvas">—</span>
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.publisher', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ pack.publisher?.name || pack.publisher?.id || '—' }}
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.downloads', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ formatLocalizedNumber(pack.downloads, locale) }}
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.stars', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ formatLocalizedNumber(pack.githubStars, locale) }}
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.latestVersion', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ pack.latestVersion || '—' }}
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.license', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ pack.license || '—' }}
+              </dd>
+            </div>
+
+            <div class="flex flex-col gap-1">
+              <dt class="text-primary-warm-gray">
+                {{ t('cloudNodes.detail.lastUpdated', locale) }}
+              </dt>
+              <dd class="text-primary-comfy-canvas">
+                {{ formatLocalizedMediumDate(pack.lastUpdated, locale) }}
+              </dd>
+            </div>
+          </dl>
+
+          <section class="flex flex-col gap-4">
+            <h2
+              class="text-primary-comfy-canvas text-xl font-semibold md:text-2xl"
+            >
+              {{ t('cloudNodes.detail.nodesHeading', locale) }}
+            </h2>
+
+            <section
+              v-for="group in groupedNodes"
+              :key="group.category"
+              class="border-primary-warm-gray/20 rounded-2xl border p-4"
+            >
+              <h3 class="text-primary-comfy-canvas text-base font-semibold">
+                {{ group.category }}
+              </h3>
+              <ul class="mt-3 flex flex-col gap-3">
+                <li
+                  v-for="node in group.nodes"
+                  :key="node.name"
+                  class="border-primary-warm-gray/20 rounded-xl border p-3"
+                  data-testid="cloud-node-pack-detail-node"
+                >
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span
+                      class="text-primary-comfy-canvas text-sm font-semibold"
+                    >
+                      {{ node.displayName }}
+                    </span>
+                    <span
+                      v-if="node.experimental"
+                      :class="
+                        cn(
+                          'bg-primary-comfy-yellow/20 text-primary-comfy-canvas rounded-full px-2 py-0.5 text-xs font-semibold'
+                        )
+                      "
+                    >
+                      {{ t('cloudNodes.detail.experimental', locale) }}
+                    </span>
+                    <span
+                      v-if="node.deprecated"
+                      :class="
+                        cn(
+                          'text-primary-comfy-canvas rounded-full bg-red-500/15 px-2 py-0.5 text-xs font-semibold'
+                        )
+                      "
+                    >
+                      {{ t('cloudNodes.detail.deprecated', locale) }}
+                    </span>
+                  </div>
+                  <p
+                    v-if="node.description"
+                    class="text-primary-warm-gray mt-2 text-sm/relaxed"
+                  >
+                    {{ node.description }}
+                  </p>
+                </li>
+              </ul>
+            </section>
+          </section>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>

apps/website/src/components/cloud-nodes/PackGridSection.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Pack } from '../../data/cloudNodes'
+import type { Locale } from '../../i18n/translations'
+
+import { useFilteredPacks } from '../../composables/useFilteredPacks'
+import type { PackSortMode } from '../../composables/useFilteredPacks'
+import { t } from '../../i18n/translations'
+import SectionLabel from '../common/SectionLabel.vue'
+import PackCard from './PackCard.vue'
+
+const { locale = 'en', packs } = defineProps<{
+  locale?: Locale
+  packs: readonly Pack[]
+}>()
+
+const query = defineModel<string>('query', { default: '' })
+const sortMode = ref<PackSortMode>('downloads')
+
+const { filteredPacks } = useFilteredPacks({
+  packs: () => packs,
+  query,
+  sortMode
+})
+</script>
+
+<template>
+  <section class="px-6 pb-20 md:px-20 md:pb-32">
+    <div class="mx-auto flex w-full max-w-6xl flex-col gap-8">
+      <div class="flex flex-col gap-3">
+        <SectionLabel>
+          {{ t('cloudNodes.hero.label', locale) }}
+        </SectionLabel>
+        <h2
+          class="text-primary-comfy-canvas text-3xl/tight font-medium md:text-4xl"
+        >
+          {{ t('cloudNodes.section.heading', locale) }}
+        </h2>
+      </div>
+
+      <div
+        class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
+      >
+        <label for="cloud-nodes-search" class="sr-only">
+          {{ t('cloudNodes.search.label', locale) }}
+        </label>
+        <input
+          id="cloud-nodes-search"
+          v-model="query"
+          :placeholder="t('cloudNodes.search.placeholder', locale)"
+          :class="
+            cn(
+              'bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas placeholder:text-primary-warm-gray/80 w-full rounded-2xl border px-4 py-3 text-sm md:max-w-md'
+            )
+          "
+          data-testid="cloud-nodes-search"
+        />
+
+        <label for="cloud-nodes-sort" class="sr-only">
+          {{ t('cloudNodes.sort.label', locale) }}
+        </label>
+        <select
+          id="cloud-nodes-sort"
+          v-model="sortMode"
+          class="bg-transparency-white-t5 border-primary-warm-gray/30 text-primary-comfy-canvas w-full appearance-none rounded-2xl border bg-size-[0.65rem_0.65rem] bg-position-[right_1rem_center] bg-no-repeat py-3 pr-12 pl-4 text-sm md:w-64"
+          :style="{
+            backgroundImage:
+              'url(\'data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 12%22 fill=%22%23a39b8d%22><path d=%22M6 9.2L1.4 4.6 2.8 3.2 6 6.4l3.2-3.2 1.4 1.4z%22/></svg>\')'
+          }"
+        >
+          <option value="downloads">
+            {{ t('cloudNodes.sort.downloads', locale) }}
+          </option>
+          <option value="mostNodes">
+            {{ t('cloudNodes.sort.mostNodes', locale) }}
+          </option>
+          <option value="az">{{ t('cloudNodes.sort.az', locale) }}</option>
+          <option value="recentlyUpdated">
+            {{ t('cloudNodes.sort.recentlyUpdated', locale) }}
+          </option>
+        </select>
+      </div>
+
+      <p
+        v-if="filteredPacks.length === 0"
+        class="text-primary-warm-gray rounded-2xl border border-dashed border-current/30 px-5 py-6 text-sm"
+      >
+        <span class="text-primary-comfy-canvas block text-base font-semibold">
+          {{ t('cloudNodes.empty.heading', locale) }}
+        </span>
+        <span class="mt-2 block">{{ t('cloudNodes.empty.body', locale) }}</span>
+      </p>
+
+      <div
+        v-else
+        class="grid grid-cols-1 gap-5 md:grid-cols-2"
+        role="list"
+        :aria-label="t('cloudNodes.list.ariaLabel', locale)"
+      >
+        <PackCard
+          v-for="pack in filteredPacks"
+          :key="pack.id"
+          :pack="pack"
+          :locale="locale"
+          role="listitem"
+        />
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -26,7 +26,7 @@ const {
     <img
       src="/icons/node-left.svg"
       alt=""
-      class="-mx-px self-stretch"
+      class="-mx-px h-full w-auto self-stretch"
       aria-hidden="true"
     />
 
@@ -38,7 +38,7 @@ const {
         v-if="i > 0"
         src="/icons/node-union.svg"
         alt=""
-        class="-mx-px self-stretch"
+        class="-mx-px h-full w-auto self-stretch"
         aria-hidden="true"
       />
       <span
@@ -72,7 +72,7 @@ const {
     <img
       src="/icons/node-right.svg"
       alt=""
-      class="-mx-px self-stretch"
+      class="-mx-px h-full w-auto self-stretch"
       aria-hidden="true"
     />
   </div>

apps/website/src/components/models/ModelHeroSection.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import BrandButton from '../common/BrandButton.vue'
+import { t } from '../../i18n/translations'
+
+const {
+  displayName,
+  huggingFaceUrl,
+  docsUrl,
+  blogUrl,
+  hubSlug,
+  workflowCount,
+  directory
+} = defineProps<{
+  displayName: string
+  huggingFaceUrl: string
+  docsUrl?: string
+  blogUrl?: string
+  hubSlug?: string
+  workflowCount: number
+  directory: string
+}>()
+
+const workflowsUrl = hubSlug
+  ? `https://www.comfy.org/workflows/model/${hubSlug}`
+  : null
+
+const dirDisplayMap: Record<string, string> = {
+  diffusion_models: 'Diffusion Model',
+  checkpoints: 'Checkpoint',
+  loras: 'LoRA',
+  controlnet: 'ControlNet',
+  clip_vision: 'CLIP Vision',
+  model_patches: 'Model Patch',
+  vae: 'VAE',
+  text_encoders: 'Text Encoder',
+  audio_encoders: 'Audio Encoder',
+  latent_upscale_models: 'Latent Upscale Model',
+  upscale_models: 'Upscale Model',
+  style_models: 'Style Model',
+  partner_nodes: 'Partner Node'
+}
+
+const eyebrow = dirDisplayMap[directory] ?? directory
+const isPartnerNode = directory === 'partner_nodes'
+</script>
+
+<template>
+  <section
+    :class="
+      cn(
+        'mx-auto flex max-w-7xl flex-col gap-8 px-6 py-16',
+        'lg:flex-row lg:items-center lg:gap-16 lg:px-8 lg:py-24'
+      )
+    "
+  >
+    <div class="flex max-w-2xl flex-1 flex-col gap-6">
+      <p
+        class="text-sm font-medium uppercase tracking-widest text-primary-comfy-yellow"
+      >
+        {{ eyebrow }}
+      </p>
+
+      <h1 class="text-4xl font-bold text-primary-comfy-canvas lg:text-6xl">
+        {{ displayName }} in ComfyUI
+      </h1>
+
+      <p class="text-sm text-primary-comfy-canvas/60">
+        {{
+          t('models.hero.workflowCount').replace(
+            '{count}',
+            String(workflowCount)
+          )
+        }}
+      </p>
+
+      <div class="flex flex-col gap-3 sm:flex-row">
+        <BrandButton
+          v-if="workflowsUrl"
+          :href="workflowsUrl"
+          variant="solid"
+          size="lg"
+          class="w-full uppercase sm:w-auto sm:min-w-48"
+        >
+          {{ t('models.hero.primaryCta') }}
+        </BrandButton>
+
+        <BrandButton
+          v-if="!isPartnerNode && huggingFaceUrl"
+          :href="huggingFaceUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          :variant="workflowsUrl ? 'outline' : 'solid'"
+          size="lg"
+          class="w-full uppercase sm:w-auto sm:min-w-48"
+        >
+          {{ t('models.hero.secondaryCta') }}
+        </BrandButton>
+
+        <BrandButton
+          v-if="!workflowsUrl"
+          href="https://www.comfy.org/cloud"
+          target="_blank"
+          rel="noopener noreferrer"
+          :variant="huggingFaceUrl && !isPartnerNode ? 'outline' : 'solid'"
+          size="lg"
+          class="w-full uppercase sm:w-auto sm:min-w-48"
+        >
+          {{ t('models.hero.cloudCta') }}
+        </BrandButton>
+
+        <BrandButton
+          v-if="docsUrl"
+          :href="docsUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          variant="outline"
+          size="lg"
+          class="w-full uppercase sm:w-auto sm:min-w-48"
+        >
+          {{ t('models.hero.tutorialCta') }}
+        </BrandButton>
+      </div>
+
+      <div v-if="blogUrl" class="text-sm text-primary-comfy-canvas/60">
+        <a
+          :href="blogUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="hover:text-primary-comfy-canvas underline"
+        >
+          {{ t('models.hero.blogLink') }}
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/pricing/PriceSection.vue

@@ -7,6 +7,7 @@ import { ref } from 'vue'
 import BrandButton from '../common/BrandButton.vue'
 import PricingPlanFeatureList from './PricingPlanFeatureList.vue'
 import PricingTierCard from './PricingTierCard.vue'
+import { SHOW_FREE_TIER } from '../../config/features'
 import { externalLinks, getRoutes } from '../../config/routes'
 import { t } from '../../i18n/translations'
 
@@ -37,21 +38,23 @@ interface PricingPlan {
   isEnterprise?: boolean
 }
 
+const freePlan: PricingPlan = {
+  id: 'free',
+  labelKey: 'pricing.plan.free.label',
+  summaryKey: 'pricing.plan.free.summary',
+  priceKey: 'pricing.plan.free.price',
+  creditsKey: 'pricing.plan.free.credits',
+  estimateKey: 'pricing.plan.free.estimate',
+  ctaKey: 'pricing.plan.free.cta',
+  ctaHref: externalLinks.cloud,
+  features: [
+    { text: 'pricing.plan.free.feature1' },
+    { text: 'pricing.plan.free.feature2' }
+  ]
+}
+
 const plans: PricingPlan[] = [
-  {
-    id: 'free',
-    labelKey: 'pricing.plan.free.label',
-    summaryKey: 'pricing.plan.free.summary',
-    priceKey: 'pricing.plan.free.price',
-    creditsKey: 'pricing.plan.free.credits',
-    estimateKey: 'pricing.plan.free.estimate',
-    ctaKey: 'pricing.plan.free.cta',
-    ctaHref: externalLinks.cloud,
-    features: [
-      { text: 'pricing.plan.free.feature1' },
-      { text: 'pricing.plan.free.feature2' }
-    ]
-  },
+  ...(SHOW_FREE_TIER ? [freePlan] : []),
   {
     id: 'standard',
     labelKey: 'pricing.plan.standard.label',
@@ -61,7 +64,9 @@ const plans: PricingPlan[] = [
     estimateKey: 'pricing.plan.standard.estimate',
     ctaKey: 'pricing.plan.standard.cta',
     ctaHref: subscribeUrl('standard'),
-    featureIntroKey: 'pricing.plan.standard.featureIntro',
+    featureIntroKey: SHOW_FREE_TIER
+      ? 'pricing.plan.standard.featureIntro'
+      : undefined,
     features: [
       { text: 'pricing.plan.standard.feature1' },
       { text: 'pricing.plan.standard.feature2' }
@@ -150,9 +155,14 @@ const activePlanIndex = ref(0)
       </button>
     </div>
 
-    <!-- Desktop: 4-column grid / Mobile: single card -->
+    <!-- Desktop: dynamic grid (3 or 4 columns) / Mobile: single card -->
     <div
-      class="rounded-5xl bg-transparency-white-t4 hidden p-2 lg:grid lg:grid-cols-4 lg:gap-2"
+      :class="
+        cn(
+          'rounded-5xl bg-transparency-white-t4 hidden p-2 lg:grid lg:gap-2',
+          standardPlans.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
+        )
+      "
     >
       <PricingTierCard v-for="plan in standardPlans" :key="plan.id">
         <!-- Label + badge -->
@@ -223,10 +233,18 @@ const activePlanIndex = ref(0)
 
         <!-- Features -->
         <div v-if="plan.features.length" class="px-6 py-3">
-          <p class="text-primary-comfy-canvas mb-2 text-sm font-semibold">
-            {{
-              plan.featureIntroKey ? t(plan.featureIntroKey, locale) : '&nbsp;'
-            }}
+          <p
+            v-if="plan.featureIntroKey"
+            class="text-primary-comfy-canvas mb-2 text-sm font-semibold"
+          >
+            {{ t(plan.featureIntroKey, locale) }}
+          </p>
+          <p
+            v-else
+            class="text-primary-comfy-canvas mb-2 text-sm font-semibold"
+            aria-hidden="true"
+          >
+            &nbsp;
           </p>
           <ul class="space-y-2">
             <li

apps/website/src/components/product/cloud/PricingSection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Locale } from '../../../i18n/translations'
 
+import { SHOW_FREE_TIER } from '../../../config/features'
 import { getRoutes } from '../../../config/routes'
 import { t } from '../../../i18n/translations'
 
@@ -25,7 +26,10 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
           {{ t('cloud.pricing.description', locale) }}
         </p>
 
-        <p class="text-primary-comfy-ink mt-4 text-base font-bold">
+        <p
+          v-if="SHOW_FREE_TIER"
+          class="text-primary-comfy-ink mt-4 text-base font-bold"
+        >
           {{ t('cloud.pricing.tagline', locale) }}
         </p>
       </div>

apps/website/src/composables/useBannerImage.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import { useBannerImage } from './useBannerImage'
+
+describe('useBannerImage', () => {
+  it('shows the default banner when neither url is provided', () => {
+    const { showDefaultBanner, imgSrc } = useBannerImage({})
+    expect(showDefaultBanner.value).toBe(true)
+    expect(imgSrc.value).toBeUndefined()
+  })
+
+  it('prefers bannerUrl over iconUrl when both are provided', () => {
+    const { showDefaultBanner, imgSrc } = useBannerImage({
+      bannerUrl: 'https://example.com/banner.png',
+      iconUrl: 'https://example.com/icon.png'
+    })
+    expect(showDefaultBanner.value).toBe(false)
+    expect(imgSrc.value).toBe('https://example.com/banner.png')
+  })
+
+  it('falls back to iconUrl when bannerUrl is missing', () => {
+    const { imgSrc } = useBannerImage({
+      iconUrl: 'https://example.com/icon.png'
+    })
+    expect(imgSrc.value).toBe('https://example.com/icon.png')
+  })
+
+  it('reactively updates when sources change', () => {
+    const banner = ref<string | undefined>(undefined)
+    const { showDefaultBanner, imgSrc } = useBannerImage({ bannerUrl: banner })
+
+    expect(showDefaultBanner.value).toBe(true)
+    banner.value = 'https://example.com/new.png'
+    expect(showDefaultBanner.value).toBe(false)
+    expect(imgSrc.value).toBe('https://example.com/new.png')
+  })
+
+  it('flips isImageError when onImageError is called', () => {
+    const { isImageError, onImageError } = useBannerImage({
+      bannerUrl: 'x'
+    })
+    expect(isImageError.value).toBe(false)
+    onImageError()
+    expect(isImageError.value).toBe(true)
+  })
+
+  it('exposes the default banner constant for consumers', () => {
+    const { DEFAULT_BANNER } = useBannerImage({})
+    expect(DEFAULT_BANNER).toBe('/assets/images/fallback-gradient-avatar.svg')
+  })
+})

apps/website/src/composables/useBannerImage.ts

@@ -0,0 +1,30 @@
+import { computed, ref, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
+
+interface UseBannerImageInput {
+  bannerUrl?: MaybeRefOrGetter<string | undefined>
+  iconUrl?: MaybeRefOrGetter<string | undefined>
+}
+
+export function useBannerImage({ bannerUrl, iconUrl }: UseBannerImageInput) {
+  const isImageError = ref(false)
+
+  const showDefaultBanner = computed(
+    () => !toValue(bannerUrl) && !toValue(iconUrl)
+  )
+  const imgSrc = computed(() => toValue(bannerUrl) || toValue(iconUrl))
+
+  function onImageError() {
+    isImageError.value = true
+  }
+
+  return {
+    DEFAULT_BANNER,
+    isImageError,
+    showDefaultBanner,
+    imgSrc,
+    onImageError
+  }
+}

apps/website/src/composables/useFilteredPacks.test.ts

@@ -0,0 +1,144 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import type { Pack, PackNode } from '../data/cloudNodes'
+
+import { useFilteredPacks } from './useFilteredPacks'
+import type { PackSortMode } from './useFilteredPacks'
+
+function pack(overrides: Partial<Pack> = {}): Pack {
+  return {
+    id: overrides.id ?? 'pack',
+    displayName: overrides.displayName ?? 'Pack',
+    nodes: overrides.nodes ?? [],
+    downloads: overrides.downloads,
+    lastUpdated: overrides.lastUpdated,
+    ...overrides
+  }
+}
+
+function node(name: string, displayName: string): PackNode {
+  return { name, displayName, category: 'x' }
+}
+
+describe('useFilteredPacks', () => {
+  const packs: readonly Pack[] = [
+    pack({
+      id: 'a',
+      displayName: 'Alpha',
+      downloads: 100,
+      lastUpdated: '2025-01-01T00:00:00Z',
+      nodes: [node('aa', 'Aardvark')]
+    }),
+    pack({
+      id: 'b',
+      displayName: 'Beta',
+      downloads: 300,
+      lastUpdated: '2025-06-01T00:00:00Z',
+      nodes: [node('bb', 'Beaver'), node('bb2', 'Bumblebee')]
+    }),
+    pack({
+      id: 'c',
+      displayName: 'Gamma',
+      downloads: 200,
+      lastUpdated: '2025-03-01T00:00:00Z',
+      nodes: [
+        node('cc', 'Cat'),
+        node('cc2', 'Crocodile'),
+        node('cc3', 'Capybara')
+      ]
+    })
+  ]
+
+  it('sorts by downloads desc by default', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: '',
+      sortMode: 'downloads' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.id)).toEqual(['b', 'c', 'a'])
+  })
+
+  it('sorts most-nodes places highest count first', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: '',
+      sortMode: 'mostNodes' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.id)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('sorts A → Z by display name', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: '',
+      sortMode: 'az' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.displayName)).toEqual([
+      'Alpha',
+      'Beta',
+      'Gamma'
+    ])
+  })
+
+  it('sorts recently updated newest first', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: '',
+      sortMode: 'recentlyUpdated' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.id)).toEqual(['b', 'c', 'a'])
+  })
+
+  it('treats invalid lastUpdated as 0', () => {
+    const broken = [
+      pack({ id: 'x', lastUpdated: 'nonsense' }),
+      pack({ id: 'y', lastUpdated: '2025-01-01T00:00:00Z' })
+    ]
+    const { filteredPacks } = useFilteredPacks({
+      packs: broken,
+      query: '',
+      sortMode: 'recentlyUpdated' as PackSortMode
+    })
+    expect(filteredPacks.value[0].id).toBe('y')
+  })
+
+  it('matches the search query against pack display names', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: 'beta',
+      sortMode: 'az' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.id)).toEqual(['b'])
+  })
+
+  it('matches the search query against node display names', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: 'CAPYBARA',
+      sortMode: 'az' as PackSortMode
+    })
+    expect(filteredPacks.value.map((p) => p.id)).toEqual(['c'])
+  })
+
+  it('returns empty when nothing matches', () => {
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query: 'zzz-no-such-thing',
+      sortMode: 'az' as PackSortMode
+    })
+    expect(filteredPacks.value).toHaveLength(0)
+  })
+
+  it('reacts when the query ref changes', () => {
+    const query = ref('beta')
+    const { filteredPacks } = useFilteredPacks({
+      packs,
+      query,
+      sortMode: 'az' as PackSortMode
+    })
+    expect(filteredPacks.value).toHaveLength(1)
+    query.value = ''
+    expect(filteredPacks.value).toHaveLength(3)
+  })
+})

apps/website/src/composables/useFilteredPacks.ts

@@ -0,0 +1,53 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import type { Pack } from '../data/cloudNodes'
+
+export type PackSortMode = 'downloads' | 'mostNodes' | 'az' | 'recentlyUpdated'
+
+interface UseFilteredPacksInput {
+  packs: MaybeRefOrGetter<readonly Pack[]>
+  query: MaybeRefOrGetter<string>
+  sortMode: MaybeRefOrGetter<PackSortMode>
+}
+
+function matchesQuery(pack: Pack, normalizedQuery: string): boolean {
+  if (pack.displayName.toLowerCase().includes(normalizedQuery)) return true
+  return pack.nodes.some((node) =>
+    node.displayName.toLowerCase().includes(normalizedQuery)
+  )
+}
+
+function safeTimestamp(value: string | undefined): number {
+  if (!value) return 0
+  const ts = Date.parse(value)
+  return Number.isNaN(ts) ? 0 : ts
+}
+
+export function useFilteredPacks(input: UseFilteredPacksInput) {
+  const filteredPacks = computed<Pack[]>(() => {
+    const allPacks = toValue(input.packs)
+    const normalizedQuery = toValue(input.query).trim().toLowerCase()
+
+    const matching =
+      normalizedQuery.length === 0
+        ? [...allPacks]
+        : allPacks.filter((pack) => matchesQuery(pack, normalizedQuery))
+
+    const mode = toValue(input.sortMode)
+    if (mode === 'az') {
+      return matching.sort((a, b) => a.displayName.localeCompare(b.displayName))
+    }
+    if (mode === 'recentlyUpdated') {
+      return matching.sort(
+        (a, b) => safeTimestamp(b.lastUpdated) - safeTimestamp(a.lastUpdated)
+      )
+    }
+    if (mode === 'mostNodes') {
+      return matching.sort((a, b) => b.nodes.length - a.nodes.length)
+    }
+    return matching.sort((a, b) => (b.downloads ?? 0) - (a.downloads ?? 0))
+  })
+
+  return { filteredPacks }
+}

apps/website/src/composables/useNodesByCategory.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import type { PackNode } from '../data/cloudNodes'
+
+import { useNodesByCategory } from './useNodesByCategory'
+
+function node(name: string, displayName: string, category: string): PackNode {
+  return { name, displayName, category }
+}
+
+describe('useNodesByCategory', () => {
+  it('groups nodes by category', () => {
+    const { groupedNodes } = useNodesByCategory(() => [
+      node('A', 'A', 'cat-1'),
+      node('B', 'B', 'cat-2'),
+      node('C', 'C', 'cat-1')
+    ])
+    expect(groupedNodes.value).toHaveLength(2)
+    expect(groupedNodes.value[0]).toMatchObject({
+      category: 'cat-1',
+      nodes: [
+        expect.objectContaining({ name: 'A' }),
+        expect.objectContaining({ name: 'C' })
+      ]
+    })
+  })
+
+  it('sorts nodes alphabetically by display name within a category', () => {
+    const { groupedNodes } = useNodesByCategory(() => [
+      node('z', 'Zulu', 'x'),
+      node('a', 'Alpha', 'x'),
+      node('m', 'Mike', 'x')
+    ])
+    expect(groupedNodes.value[0].nodes.map((n) => n.displayName)).toEqual([
+      'Alpha',
+      'Mike',
+      'Zulu'
+    ])
+  })
+
+  it('sorts categories alphabetically', () => {
+    const { groupedNodes } = useNodesByCategory(() => [
+      node('a', 'A', 'beta'),
+      node('b', 'B', 'alpha'),
+      node('c', 'C', 'gamma')
+    ])
+    expect(groupedNodes.value.map((g) => g.category)).toEqual([
+      'alpha',
+      'beta',
+      'gamma'
+    ])
+  })
+
+  it('falls back to a placeholder for missing categories', () => {
+    const { groupedNodes } = useNodesByCategory(() => [node('a', 'A', '')])
+    expect(groupedNodes.value[0].category).toBe('—')
+  })
+
+  it('reacts to ref changes', () => {
+    const nodes = ref<PackNode[]>([node('a', 'A', 'x')])
+    const { groupedNodes } = useNodesByCategory(nodes)
+    expect(groupedNodes.value).toHaveLength(1)
+
+    nodes.value = [node('a', 'A', 'x'), node('b', 'B', 'y')]
+    expect(groupedNodes.value).toHaveLength(2)
+  })
+})

apps/website/src/composables/useNodesByCategory.ts

@@ -0,0 +1,40 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+import type { PackNode } from '../data/cloudNodes'
+
+const UNCATEGORIZED = '—'
+
+interface NodeCategoryGroup {
+  category: string
+  nodes: PackNode[]
+}
+
+export function useNodesByCategory(
+  nodes: MaybeRefOrGetter<readonly PackNode[]>
+) {
+  const groupedNodes = computed<NodeCategoryGroup[]>(() => {
+    const byCategory = new Map<string, PackNode[]>()
+
+    for (const node of toValue(nodes)) {
+      const category = node.category || UNCATEGORIZED
+      const existing = byCategory.get(category)
+      if (existing) {
+        existing.push(node)
+        continue
+      }
+      byCategory.set(category, [node])
+    }
+
+    return [...byCategory.entries()]
+      .map(([category, items]) => ({
+        category,
+        nodes: [...items].sort((a, b) =>
+          a.displayName.localeCompare(b.displayName)
+        )
+      }))
+      .sort((a, b) => a.category.localeCompare(b.category))
+  })
+
+  return { groupedNodes }
+}

apps/website/src/config/features.ts

@@ -0,0 +1 @@
+export const SHOW_FREE_TIER = false

apps/website/src/config/model-metadata.ts

@@ -0,0 +1,208 @@
+interface ModelOverride {
+  docsUrl?: string
+  blogUrl?: string
+  featured?: boolean
+  // Slug used on comfy.org/workflows/model/{hubSlug}. Only set when the page exists.
+  hubSlug?: string
+}
+
+export const modelMetadata: Record<string, ModelOverride> = {
+  'nano-banana': {
+    docsUrl:
+      'https://docs.comfy.org/tutorials/partner-nodes/google/nano-banana-pro',
+    hubSlug: 'nano-banana',
+    featured: true
+  },
+  'kling-ai': {
+    docsUrl:
+      'https://docs.comfy.org/tutorials/partner-nodes/kling/kling-motion-control',
+    hubSlug: 'kling',
+    featured: true
+  },
+  'meshy-ai': {
+    docsUrl: 'https://docs.comfy.org/tutorials/partner-nodes/meshy/meshy-6',
+    hubSlug: 'meshy',
+    featured: true
+  },
+  'openai-dall-e': {
+    docsUrl: 'https://docs.comfy.org/tutorials/partner-nodes/openai/dall-e-3',
+    hubSlug: 'openai',
+    featured: true
+  },
+  'ltxv-api': {
+    docsUrl: 'https://docs.comfy.org/tutorials/video/ltxv',
+    hubSlug: 'ltx-2-3',
+    featured: true
+  },
+  'wan-api': {
+    docsUrl: 'https://docs.comfy.org/tutorials/video/wan/wan2_2',
+    hubSlug: 'wan',
+    featured: true
+  },
+  'wan-2-2': {
+    docsUrl: 'https://docs.comfy.org/tutorials/video/wan/wan2_2',
+    hubSlug: 'wan',
+    featured: true
+  },
+  'wan-2-1': {
+    docsUrl: 'https://docs.comfy.org/tutorials/video/wan/wan-video',
+    hubSlug: 'wan',
+    featured: true
+  },
+  'flux-1-kontext-dev': {
+    docsUrl:
+      'https://docs.comfy.org/tutorials/partner-nodes/black-forest-labs/flux-1-kontext',
+    hubSlug: 'flux-1-kontext',
+    featured: true
+  },
+  'flux1-dev': {
+    docsUrl: 'https://docs.comfy.org/tutorials/flux/flux-1-text-to-image',
+    hubSlug: 'flux-1',
+    featured: true
+  },
+  'flux1-schnell': {
+    hubSlug: 'flux-1',
+    featured: true
+  },
+  'hunyuan-video': {
+    docsUrl: 'https://docs.comfy.org/tutorials/video/hunyuan/hunyuan-video',
+    hubSlug: 'hunyuan-video',
+    featured: true
+  },
+  'hunyuan-3d': {
+    docsUrl: 'https://docs.comfy.org/tutorials/3d/hunyuan3D-2',
+    hubSlug: 'hunyuan-3d',
+    featured: true
+  },
+  vidu: {
+    hubSlug: 'vidu',
+    featured: true
+  },
+  runway: {
+    hubSlug: 'runway',
+    featured: true
+  },
+  'stability-ai': {
+    hubSlug: 'stability',
+    featured: true
+  },
+  'seedance-bytedance': {
+    hubSlug: 'seedance',
+    featured: true
+  },
+  'grok-image': {
+    hubSlug: 'grok',
+    featured: false
+  },
+  'luma-dream-machine': {
+    hubSlug: 'luma',
+    featured: false
+  },
+  moonvalley: {
+    hubSlug: 'moonvalley',
+    featured: false
+  },
+  'magnific-ai': {
+    hubSlug: 'magnific',
+    featured: false
+  },
+  pixverse: {
+    hubSlug: 'pixverse',
+    featured: false
+  },
+  'rodin-3d': {
+    hubSlug: 'rodin',
+    featured: false
+  },
+  recraft: {
+    hubSlug: 'recraft',
+    featured: false
+  },
+  'bria-ai': {
+    hubSlug: 'bria',
+    featured: false
+  },
+  'topaz-labs': {
+    hubSlug: 'topaz',
+    featured: false
+  },
+  wavespeed: {
+    hubSlug: 'wavespeed',
+    featured: false
+  },
+  ideogram: {
+    hubSlug: 'ideogram',
+    featured: false
+  },
+  'veo-2': {
+    hubSlug: 'veo',
+    featured: false
+  },
+  'veo-3': {
+    hubSlug: 'veo',
+    featured: false
+  },
+  'flux-2-api': {
+    hubSlug: 'flux-2',
+    featured: false
+  },
+  'ace-step-v1-3-5b': {
+    docsUrl: 'https://docs.comfy.org/tutorials/audio/ace-step/ace-step-v1',
+    hubSlug: 'ace-step',
+    featured: false
+  },
+  'hidream-i1-dev-fp8': {
+    docsUrl: 'https://docs.comfy.org/tutorials/image/hidream/hidream-i1',
+    hubSlug: 'hidream',
+    featured: false
+  },
+  'omnigen2-fp16': {
+    hubSlug: 'omnigen',
+    featured: false
+  },
+  'sd-xl-base-1-0': {
+    hubSlug: 'sdxl',
+    featured: false
+  },
+  'z-image-bf16': {
+    hubSlug: 'z-image',
+    featured: false
+  },
+  'z-image-turbo-bf16': {
+    hubSlug: 'z-image',
+    featured: false
+  },
+  'svd-xt': {
+    hubSlug: 'svd',
+    featured: false
+  },
+  'flux1-dev-kontext-fp8-scaled': {
+    docsUrl: 'https://docs.comfy.org/tutorials/flux/flux-1-kontext-dev',
+    hubSlug: 'flux-1-kontext',
+    featured: false
+  },
+  'ltx-2-19b-dev-fp8': {
+    hubSlug: 'ltx-2',
+    featured: false
+  },
+  'ltx-2-19b-distilled': {
+    hubSlug: 'ltx-2',
+    featured: false
+  },
+  'flux1-fill-dev': {
+    hubSlug: 'flux-1',
+    featured: false
+  },
+  'flux-2-klein-base-9b-fp8': {
+    hubSlug: 'flux-2',
+    featured: false
+  },
+  'qwen-image-fp8-e4m3fn': {
+    hubSlug: 'qwen',
+    featured: false
+  },
+  'qwen-image-edit-2509-fp8-e4m3fn': {
+    hubSlug: 'qwen',
+    featured: false
+  }
+}

apps/website/src/config/models.ts

@@ -0,0 +1,81 @@
+import generatedModels from './generated-models.json'
+import { modelMetadata } from './model-metadata'
+
+type ModelDirectory =
+  | 'diffusion_models'
+  | 'checkpoints'
+  | 'loras'
+  | 'controlnet'
+  | 'clip_vision'
+  | 'model_patches'
+  | 'vae'
+  | 'text_encoders'
+  | 'audio_encoders'
+  | 'latent_upscale_models'
+  | 'upscale_models'
+  | 'style_models'
+  | 'partner_nodes'
+
+interface Model {
+  readonly slug: string
+  readonly canonicalSlug?: string
+  readonly name: string
+  readonly displayName: string
+  readonly directory: ModelDirectory
+  readonly huggingFaceUrl: string
+  readonly thumbnailUrl?: string
+  readonly docsUrl?: string
+  readonly blogUrl?: string
+  readonly hubSlug?: string
+  readonly featured: boolean
+  readonly workflowCount: number
+}
+
+export const models: readonly Model[] = (
+  generatedModels as Array<{
+    slug: string
+    canonicalSlug?: string
+    name: string
+    displayName: string
+    directory: string
+    huggingFaceUrl: string
+    docsUrl?: string
+    thumbnailUrl?: string
+    workflowCount: number
+  }>
+).map((m) => ({
+  slug: m.slug,
+  ...(m.canonicalSlug ? { canonicalSlug: m.canonicalSlug } : {}),
+  name: m.name,
+  displayName: m.displayName,
+  directory: m.directory as ModelDirectory,
+  huggingFaceUrl: m.huggingFaceUrl,
+  ...(m.docsUrl ? { docsUrl: m.docsUrl } : {}),
+  ...(m.thumbnailUrl ? { thumbnailUrl: m.thumbnailUrl } : {}),
+  featured: false,
+  workflowCount: m.workflowCount,
+  ...modelMetadata[m.slug]
+}))
+
+const slugSet = new Set(models.map((m) => m.slug))
+if (slugSet.size !== models.length) {
+  for (const model of models) {
+    if (models.filter((m) => m.slug === model.slug).length > 1) {
+      throw new Error(`Duplicate model slug: ${model.slug}`)
+    }
+  }
+}
+for (const model of models) {
+  if (
+    model.canonicalSlug !== undefined &&
+    (!slugSet.has(model.canonicalSlug) || model.canonicalSlug === model.slug)
+  ) {
+    throw new Error(
+      `Invalid canonicalSlug "${model.canonicalSlug}" on "${model.slug}"`
+    )
+  }
+}
+
+export function getModelBySlug(slug: string): Model | undefined {
+  return models.find((m) => m.slug === slug)
+}

apps/website/src/config/routes.ts

@@ -14,7 +14,8 @@ const baseRoutes = {
   demos: '/demos',
   termsOfService: '/terms-of-service',
   privacyPolicy: '/privacy-policy',
-  contact: '/contact'
+  contact: '/contact',
+  models: '/p/supported-models'
 } as const
 
 type Routes = typeof baseRoutes

apps/website/src/data/ashby-roles.snapshot.json

@@ -1,37 +1,30 @@
 {
-  "fetchedAt": "2026-05-02T20:15:18.321Z",
+  "fetchedAt": "2026-05-14T14:47:42.884Z",
   "departments": [
     {
       "name": "DESIGN",
       "key": "design",
       "roles": [
         {
-          "id": "e915f2c78b17f93b",
+          "id": "18743530eb448c99",
           "title": "Senior Product Designer",
           "department": "Design",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/b2e864c6-4754-4e04-8f46-1022baa103c3/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/b2e864c6-4754-4e04-8f46-1022baa103c3"
         },
         {
-          "id": "b9f9a23219be7cd4",
-          "title": "Design Engineer",
-          "department": "Design",
-          "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/abc787b9-ad85-421c-8218-debd23bea096/application"
-        },
-        {
-          "id": "547b6ba622c800a5",
+          "id": "8718d17012f26fa2",
           "title": "Senior Product Designer - Craft",
           "department": "Design",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/a32c6769-b791-41f4-9225-50bbd8a1cf0f/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/a32c6769-b791-41f4-9225-50bbd8a1cf0f"
         },
         {
-          "id": "7bb02634a24763bc",
+          "id": "1e181b9ed8fb2e86",
           "title": "Staff Product Designer - Systems",
           "department": "Design",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/0bc8356b-615e-4f40-b632-fd3b2691be34/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/0bc8356b-615e-4f40-b632-fd3b2691be34"
         }
       ]
     },
@@ -40,67 +33,67 @@
       "key": "engineering",
       "roles": [
         {
-          "id": "102d58e35a8a9817",
+          "id": "6a6d865eeb3c10a8",
           "title": "Senior Software Engineer, Frontend",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/c3e0584d-5490-491f-aae4-b5922ef63fd2/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/c3e0584d-5490-491f-aae4-b5922ef63fd2"
         },
         {
-          "id": "d01d69fba7743905",
+          "id": "1b4f7f1da9616e14",
           "title": "Senior Software Engineer, Backend Generalist",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/732f8b39-076d-4847-afe3-f54d4451607e/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/732f8b39-076d-4847-afe3-f54d4451607e"
         },
         {
-          "id": "f36f60cfd5bb5910",
+          "id": "a6d8269c66e37c5c",
           "title": "Senior/Staff Applied Machine Learning Engineer",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/5cc4d0bc-97b0-463b-8466-3ec1d07f6ac0/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/5cc4d0bc-97b0-463b-8466-3ec1d07f6ac0"
         },
         {
-          "id": "9d8ec4c65e20b19e",
+          "id": "841da783e6e41928",
           "title": "Software Engineer, Frontend",
           "department": "Engineering",
           "location": "Remote",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/99dc26c7-51ca-43cd-a1ba-7d475a0f4a40/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/99dc26c7-51ca-43cd-a1ba-7d475a0f4a40"
         },
         {
-          "id": "be94b193d1f4d482",
+          "id": "5d01d58b03870d7a",
           "title": "Tech Lead Manager, Frontend",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/a0665088-3314-457a-aa7b-12ca5c3eb261/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/a0665088-3314-457a-aa7b-12ca5c3eb261"
         },
         {
-          "id": "ab48f5db6bd1783c",
+          "id": "91604c4182a1bc3c",
           "title": "Software Engineer, Core ComfyUI Contributor",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/7d4062d6-d500-445a-9a5f-014971af259f/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/7d4062d6-d500-445a-9a5f-014971af259f"
         },
         {
-          "id": "c5dff4ee628bdcd1",
+          "id": "a1dbc0576ab14034",
           "title": "Software Engineer, ComfyUI Desktop",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/ad2f76cb-a787-47d8-81c5-7e7f917747c0/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/ad2f76cb-a787-47d8-81c5-7e7f917747c0"
         },
         {
-          "id": "4302a7aaa87e16e3",
+          "id": "0b8f4fecd89c3b11",
           "title": "Product Manager, ComfyUI",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/9e4b9029-c3e9-436b-82c4-a1a9f1b8c16e/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/9e4b9029-c3e9-436b-82c4-a1a9f1b8c16e"
         },
         {
-          "id": "2eb53e8943cc9396",
+          "id": "2f6bac39d723dfef",
           "title": "Growth Engineer",
           "department": "Engineering",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/f1fdde76-84ae-48c1-b0f9-9654dd8e7de5/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/f1fdde76-84ae-48c1-b0f9-9654dd8e7de5"
         }
       ]
     },
@@ -109,39 +102,46 @@
       "key": "marketing",
       "roles": [
         {
-          "id": "4c5d6afb78652df7",
+          "id": "23dd98cab77ff459",
           "title": "Freelance Motion Designer",
           "department": "Marketing",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/a7ccc2b4-4d9d-4e04-b39c-28a711995b5b/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/a7ccc2b4-4d9d-4e04-b39c-28a711995b5b"
         },
         {
-          "id": "0f5256cf302e552b",
+          "id": "a998b9fc973ff3c0",
           "title": "Creative Artist",
           "department": "Marketing",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/19ba10aa-4961-45e8-8473-66a8a7a8079d/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/19ba10aa-4961-45e8-8473-66a8a7a8079d"
         },
         {
-          "id": "5746486d87874937",
+          "id": "3e730938026d6e70",
           "title": "Graphic Designer",
           "department": "Marketing",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/49fa0b07-3fa1-4a3a-b2c6-d2cc684ad63f/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/49fa0b07-3fa1-4a3a-b2c6-d2cc684ad63f"
         },
         {
-          "id": "b5803a0d4785d406",
+          "id": "6f771af6858283aa",
           "title": "Lifecycle Growth Marketer",
           "department": "Marketing",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/be74d210-3b50-408c-9f61-8fee8833ce64/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/be74d210-3b50-408c-9f61-8fee8833ce64"
         },
         {
-          "id": "130d7218d7895bdb",
+          "id": "527a47e82970afc1",
           "title": "Partnership & Events Marketing Manager",
           "department": "Marketing",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/89d3ff75-2055-4e92-9c69-81feff55627c/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/89d3ff75-2055-4e92-9c69-81feff55627c"
+        },
+        {
+          "id": "e11f8b9e58dbea81",
+          "title": "Creative Producer",
+          "department": "Marketing",
+          "location": "San Francisco",
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/7be2d690-7a2b-4ebf-b1c4-6907b273d3d9"
         }
       ]
     },
@@ -150,25 +150,18 @@
       "key": "operations",
       "roles": [
         {
-          "id": "ec68ae44dd5943c9",
-          "title": "Talent Lead",
+          "id": "0c6cc3685194ab7a",
+          "title": "Head of Talent",
           "department": "Operations",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/d5008532-c45d-46e6-ba2c-20489d364362/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/d5008532-c45d-46e6-ba2c-20489d364362"
         },
         {
-          "id": "16f556001ce1cef4",
-          "title": "BizOps Strategist",
-          "department": "Operations",
-          "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/145b8558-0ab4-43e8-8fac-b59059cf2537/application"
-        },
-        {
-          "id": "8e773a72c1b8e099",
+          "id": "82bd6ed26adab1c3",
           "title": "Founding Customer Success Manager",
           "department": "Operations",
           "location": "San Francisco",
-          "applyUrl": "https://jobs.ashbyhq.com/comfy-org/a1c5c5ed-62ac-4767-af57-a3ba4e0bf5e4/application"
+          "jobUrl": "https://jobs.ashbyhq.com/comfy-org/a1c5c5ed-62ac-4767-af57-a3ba4e0bf5e4"
         }
       ]
     }

apps/website/src/data/cloudNodes.ts

@@ -0,0 +1,52 @@
+export interface PackNode {
+  name: string
+  displayName: string
+  category: string
+  description?: string
+  deprecated?: boolean
+  experimental?: boolean
+}
+
+export interface Pack {
+  id: string
+  registryId?: string
+  displayName: string
+  description?: string
+  bannerUrl?: string
+  iconUrl?: string
+  repoUrl?: string
+  publisher?: {
+    id: string
+    name?: string
+  }
+  downloads?: number
+  githubStars?: number
+  latestVersion?: string
+  license?: string
+  lastUpdated?: string
+  supportedOs?: string[]
+  supportedAccelerators?: string[]
+  nodes: PackNode[]
+}
+
+export interface NodesSnapshot {
+  fetchedAt: string
+  packs: Pack[]
+}
+
+export function isNodesSnapshot(value: unknown): value is NodesSnapshot {
+  if (value === null || typeof value !== 'object') return false
+  const candidate = value as { fetchedAt?: unknown; packs?: unknown }
+  if (typeof candidate.fetchedAt !== 'string') return false
+  if (!Array.isArray(candidate.packs)) return false
+
+  return candidate.packs.every((pack) => {
+    if (pack === null || typeof pack !== 'object') return false
+    const p = pack as { id?: unknown; displayName?: unknown; nodes?: unknown }
+    return (
+      typeof p.id === 'string' &&
+      typeof p.displayName === 'string' &&
+      Array.isArray(p.nodes)
+    )
+  })
+}

apps/website/src/data/roles.ts

@@ -3,7 +3,7 @@ export interface Role {
   title: string
   department: string
   location: string
-  applyUrl: string
+  jobUrl: string
 }
 
 export interface Department {

apps/website/src/i18n/translations.ts

@@ -735,6 +735,142 @@ const translations = {
     'zh-CN': '免费试用 COMFY CLOUD'
   },
 
+  'cloudNodes.hero.label': {
+    en: 'CLOUD NODES',
+    'zh-CN': '云端节点目录'
+  },
+  'cloudNodes.hero.heading': {
+    en: 'Run your favorite ComfyUI custom nodes on the cloud',
+    'zh-CN': '在云端运行你喜爱的 ComfyUI 自定义节点'
+  },
+  'cloudNodes.hero.body': {
+    en: 'Spin up workflows with hundreds of community-built nodes — detailers, ControlNet preprocessors, animation tools, and quality-of-life utilities — preinstalled on Comfy Cloud and ready to run on managed GPUs.',
+    'zh-CN':
+      '在 Comfy Cloud 托管 GPU 上即开即用，预装数百个社区节点——细节修复、ControlNet 预处理、动画工具与日常便利组件，应有尽有。'
+  },
+  'cloudNodes.section.heading': {
+    en: 'Find a custom-node pack',
+    'zh-CN': '查找自定义节点包'
+  },
+  'cloudNodes.search.placeholder': {
+    en: 'Search packs or nodes',
+    'zh-CN': '搜索节点包或节点名称'
+  },
+  'cloudNodes.sort.downloads': {
+    en: 'Most installed',
+    'zh-CN': '按安装量'
+  },
+  'cloudNodes.sort.mostNodes': {
+    en: 'Most nodes',
+    'zh-CN': '按节点数量'
+  },
+  'cloudNodes.sort.az': {
+    en: 'A → Z',
+    'zh-CN': '按名称 A → Z'
+  },
+  'cloudNodes.sort.recentlyUpdated': {
+    en: 'Recently updated',
+    'zh-CN': '最近更新'
+  },
+  'cloudNodes.search.label': {
+    en: 'Search custom-node packs',
+    'zh-CN': '搜索自定义节点包'
+  },
+  'cloudNodes.sort.label': {
+    en: 'Sort packs',
+    'zh-CN': '排序节点包'
+  },
+  'cloudNodes.list.ariaLabel': {
+    en: 'Custom-node packs supported on Comfy Cloud',
+    'zh-CN': 'Comfy Cloud 支持的自定义节点包'
+  },
+  'cloudNodes.meta.title': {
+    en: 'Custom-node packs on Comfy Cloud — supported by default',
+    'zh-CN': 'Comfy Cloud 自定义节点包合集——开箱即用'
+  },
+  'cloudNodes.meta.description': {
+    en: 'Browse hundreds of ComfyUI custom-node packs preinstalled on Comfy Cloud. Detailers, ControlNet preprocessors, animation tools, samplers, and more — search by pack or by node name.',
+    'zh-CN':
+      '浏览 Comfy Cloud 预装的数百个 ComfyUI 自定义节点包：细节修复、ControlNet 预处理、动画工具、采样器等——按节点包或节点名搜索。'
+  },
+  'cloudNodes.detail.metaTitle': {
+    en: '{pack} on Comfy Cloud',
+    'zh-CN': '{pack}（Comfy Cloud）'
+  },
+  'cloudNodes.detail.metaDescription': {
+    en: '{pack} is preinstalled on Comfy Cloud — {nodeCount} nodes ready to run on managed GPUs. {description}',
+    'zh-CN':
+      '{pack} 已预装于 Comfy Cloud——{nodeCount} 个节点可在托管 GPU 上即时运行。{description}'
+  },
+  'cloudNodes.empty.heading': {
+    en: 'No matching packs',
+    'zh-CN': '未找到匹配的节点包'
+  },
+  'cloudNodes.empty.body': {
+    en: 'Try a different search term or clear your filters.',
+    'zh-CN': '试试其他关键词，或清空筛选条件。'
+  },
+  'cloudNodes.card.nodeCountOne': {
+    en: '{count} node',
+    'zh-CN': '{count} 个节点'
+  },
+  'cloudNodes.card.nodeCountOther': {
+    en: '{count} nodes',
+    'zh-CN': '{count} 个节点'
+  },
+  'cloudNodes.card.viewRepo': {
+    en: 'View repository',
+    'zh-CN': '查看仓库'
+  },
+  'cloudNodes.card.unavailableDescription': {
+    en: 'Description unavailable.',
+    'zh-CN': '暂无描述信息。'
+  },
+  'cloudNodes.card.nodesHeading': {
+    en: 'Included nodes',
+    'zh-CN': '包含节点'
+  },
+  'cloudNodes.detail.back': {
+    en: 'Back to all packs',
+    'zh-CN': '返回所有节点包'
+  },
+  'cloudNodes.detail.publisher': {
+    en: 'Publisher',
+    'zh-CN': '发布者'
+  },
+  'cloudNodes.detail.downloads': {
+    en: 'Downloads',
+    'zh-CN': '下载量'
+  },
+  'cloudNodes.detail.stars': {
+    en: 'GitHub stars',
+    'zh-CN': 'GitHub 星标'
+  },
+  'cloudNodes.detail.latestVersion': {
+    en: 'Latest version',
+    'zh-CN': '最新版本'
+  },
+  'cloudNodes.detail.license': {
+    en: 'License',
+    'zh-CN': '许可证'
+  },
+  'cloudNodes.detail.lastUpdated': {
+    en: 'Last updated',
+    'zh-CN': '最后更新'
+  },
+  'cloudNodes.detail.deprecated': {
+    en: 'Deprecated',
+    'zh-CN': '已弃用'
+  },
+  'cloudNodes.detail.experimental': {
+    en: 'Experimental',
+    'zh-CN': '实验性'
+  },
+  'cloudNodes.detail.nodesHeading': {
+    en: 'Nodes in this pack',
+    'zh-CN': '此节点包中的节点'
+  },
+
   // Cloud – ReasonSection
   'cloud.reason.heading': {
     en: 'Why\nprofessionals\nchoose ',
@@ -3678,6 +3814,60 @@ const translations = {
     'zh-CN': 'Creative Studios AI 负责人'
   },
 
+  // Models – UI keys
+  'models.hero.eyebrow': {
+    en: 'AI Model',
+    'zh-CN': 'AI 模型'
+  },
+  'models.hero.primaryCta': {
+    en: 'TRY IN COMFY',
+    'zh-CN': '在 Comfy 中试用'
+  },
+  'models.hero.secondaryCta': {
+    en: 'DOWNLOAD MODEL',
+    'zh-CN': '下载模型'
+  },
+  'models.hero.cloudCta': {
+    en: 'RUN ON CLOUD',
+    'zh-CN': '云端运行'
+  },
+  'models.hero.tutorialCta': {
+    en: 'VIEW TUTORIAL',
+    'zh-CN': '查看教程'
+  },
+  'models.hero.blogLink': {
+    en: 'Read blog post',
+    'zh-CN': '阅读博客文章'
+  },
+  'models.hero.workflowCount': {
+    en: '{count} workflows use this model',
+    'zh-CN': '{count} 个工作流使用此模型'
+  },
+  'models.whatIs.heading': {
+    en: 'What is {name}?',
+    'zh-CN': '什么是 {name}？'
+  },
+  'models.whatIs.tutorialLink': {
+    en: 'Read the full tutorial →',
+    'zh-CN': '阅读完整教程 →'
+  },
+  'models.index.title': {
+    en: 'Supported Models',
+    'zh-CN': '支持的模型'
+  },
+  'models.index.subtitle': {
+    en: "Run the world's leading AI models in ComfyUI",
+    'zh-CN': '在 ComfyUI 中运行世界领先的 AI 模型'
+  },
+  'models.breadcrumb.home': {
+    en: 'Home',
+    'zh-CN': '首页'
+  },
+  'models.breadcrumb.models': {
+    en: 'Supported Models',
+    'zh-CN': '支持的模型'
+  },
+
   // Payment status pages
   'payment.success.label': {
     en: 'PAYMENT',

apps/website/src/layouts/BaseLayout.astro

@@ -5,6 +5,7 @@ import '../styles/global.css'
 import type { Locale } from '../i18n/translations'
 import SiteFooter from '../components/common/SiteFooter.vue'
 import SiteNav from '../components/common/SiteNav.vue'
+import { escapeJsonLd } from '../utils/escapeJsonLd'
 import { fetchGitHubStars, formatStarCount } from '../utils/github'
 
 interface Props {
@@ -94,8 +95,11 @@ const websiteJsonLd = {
     <meta name="twitter:image" content={ogImageURL.href} />
 
     <!-- Structured Data -->
-    <script is:inline type="application/ld+json" set:html={JSON.stringify(organizationJsonLd)} />
-    <script is:inline type="application/ld+json" set:html={JSON.stringify(websiteJsonLd)} />
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(organizationJsonLd)} />
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(websiteJsonLd)} />
+    <slot name="head" />
+
+    <slot name="head" />
 
     <!-- Google Tag Manager -->
     {gtmEnabled && (

apps/website/src/pages/cloud/supported-nodes.astro

@@ -0,0 +1,42 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import HeroSection from '../../components/cloud-nodes/HeroSection.vue'
+import PackGridSection from '../../components/cloud-nodes/PackGridSection.vue'
+import { t } from '../../i18n/translations'
+import { loadPacksForBuild } from '../../utils/cloudNodes.build'
+import { escapeJsonLd } from '../../utils/escapeJsonLd'
+
+const packs = await loadPacksForBuild()
+
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL('/cloud/supported-nodes', siteBase).href
+
+const itemListJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  name: 'Custom-node packs supported on Comfy Cloud',
+  url: pageUrl,
+  numberOfItems: packs.length,
+  itemListElement: packs.map((pack, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    url: new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href,
+    name: pack.displayName,
+    image: pack.bannerUrl || pack.iconUrl
+  }))
+}
+---
+
+<BaseLayout
+  title={t('cloudNodes.meta.title', 'en')}
+  description={t('cloudNodes.meta.description', 'en')}
+>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(itemListJsonLd)}
+  />
+  <HeroSection client:visible />
+  <PackGridSection packs={packs} client:visible />
+</BaseLayout>

apps/website/src/pages/cloud/supported-nodes/AGENTS.md

@@ -0,0 +1,48 @@
+# Cloud Nodes Pages
+
+Build-time catalog of custom-node packs preinstalled on Comfy Cloud. Index at `/cloud/supported-nodes`, per-pack details at `/cloud/supported-nodes/[pack]`, both also under `/zh-CN/`.
+
+## Sources
+
+- **Cloud `/api/object_info`** — authoritative list of nodes available on Comfy Cloud (auth: `WEBSITE_CLOUD_API_KEY`)
+- **ComfyUI Custom Node Registry** ([dashboard](https://registry.comfy.org), API at `https://api.comfy.org/nodes`) — public pack metadata (banner, icon, description, downloads, stars, license, version, repo, publisher)
+
+The registry is the same one the in-app Manager dialog reads from. For reference and additional reading, see the existing client wrappers in `src/`:
+
+- [`src/services/comfyRegistryService.ts`](../../../../../../src/services/comfyRegistryService.ts) — typed wrappers around `/nodes`, `/nodes/search`, `/nodes/{id}`, `/nodes/{id}/versions/{version}/comfy-nodes`, etc.
+- [`src/stores/comfyRegistryStore.ts`](../../../../../../src/stores/comfyRegistryStore.ts) — cached store + `getPacksByIds` batch helper
+- [`packages/registry-types/src/comfyRegistryTypes.ts`](../../../../../../packages/registry-types/src/comfyRegistryTypes.ts) — generated OpenAPI types
+- Public docs: <https://docs.comfy.org/registry>
+
+## Build pipeline
+
+| File                                                                                                                    | Role                                                                    |
+| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| [`pages/cloud/supported-nodes.astro`](./supported-nodes.astro) and [`[pack].astro`](./supported-nodes/%5Bpack%5D.astro) | Page shells (and `zh-CN` twins)                                         |
+| [`utils/cloudNodes.build.ts`](../../../utils/cloudNodes.build.ts)                                                       | `loadPacksForBuild()` shared by index + detail routes                   |
+| [`utils/cloudNodes.ts`](../../../utils/cloudNodes.ts)                                                                   | Cloud `object_info` fetcher with retry, sanitization, snapshot fallback |
+| [`utils/cloudNodes.registry.ts`](../../../utils/cloudNodes.registry.ts)                                                 | Registry enrichment (batches of 50, soft-fail)                          |
+| [`utils/cloudNodes.ci.ts`](../../../utils/cloudNodes.ci.ts)                                                             | GitHub Actions annotations + step summary                               |
+| [`utils/escapeJsonLd.ts`](../../../utils/escapeJsonLd.ts)                                                               | XSS-safe `<script type="application/ld+json">` serializer               |
+| [`composables/useFilteredPacks.ts`](../../../composables/useFilteredPacks.ts)                                           | Search + sort logic for the index page                                  |
+| [`composables/useNodesByCategory.ts`](../../../composables/useNodesByCategory.ts)                                       | Group nodes by category, alphabetized                                   |
+| [`scripts/refresh-cloud-nodes-snapshot.ts`](../../../../scripts/refresh-cloud-nodes-snapshot.ts)                        | Manual `pnpm cloud-nodes:refresh-snapshot`                              |
+| [`packages/object-info-parser`](../../../../../../packages/object-info-parser)                                          | Shared Zod schemas, classifier, `sanitizeUserContent`                   |
+
+## Key invariants
+
+- **Sanitization is mandatory.** The cloud `/api/object_info` endpoint mixes the calling user's uploaded files into combo input lists; `sanitizeUserContent()` strips them before the snapshot is written. Tests in [`packages/object-info-parser/src/__tests__/sanitizeUserContent.test.ts`](../../../../../../packages/object-info-parser/src/__tests__/sanitizeUserContent.test.ts).
+- **All remote data is Zod-validated.** `cloudNodes.schema.ts` validates the cloud envelope; `@comfyorg/object-info-parser` validates each node def; `cloudNodes.registry.ts` validates the registry response shape with a passthrough Zod schema (defense-in-depth on top of the generated OpenAPI types). The fetcher never trusts a network response.
+- **JSON-LD must be escaped.** Pack metadata is registry-controlled; route every `<script type="application/ld+json">` payload through `escapeJsonLd()`.
+- **Index and detail share one fetch.** Both call `loadPacksForBuild()` so the static routes can never diverge from the rendered list.
+- **No `PUBLIC_` prefix on env vars.** Astro inlines `PUBLIC_*` into the client bundle; build-time secrets never start with that prefix.
+
+## Why `Pack` is a domain projection, not the raw registry `Node`
+
+`apps/website/src/data/cloudNodes.ts` defines its own `Pack` and `PackNode` types instead of re-exporting `components['schemas']['Node']` from `@comfyorg/registry-types`. That is intentional:
+
+- A `Pack` joins **two upstream sources** — the cloud `object_info` shape (which has `python_module`, `category`, `display_name`, etc.) and the registry `Node` shape (which has `banner_url`, `downloads`, `github_stars`, etc.). Neither shape on its own captures both.
+- A `Pack` is **post-sanitization**. Combo input lists, user-uploaded filenames, and any other build-time-stripped data are guaranteed gone by the time the type appears. The raw `Node` carries fields we never expose.
+- A `Pack` adds **safe-URL invariants** (banner / icon / repo all flow through `safeExternalUrl()` before becoming part of the type), which the registry's optional `string` fields don't encode.
+
+The `Pack`/`PackNode` types live next to the snapshot they describe; the validated build-time projections feed Astro's static routes directly. The OpenAPI-generated `Node` type is still consumed inside `cloudNodes.registry.ts` as `RegistryPack` for the upstream fetch.

apps/website/src/pages/cloud/supported-nodes/[pack].astro

@@ -0,0 +1,63 @@
+---
+import type { GetStaticPaths } from 'astro'
+
+import type { Pack } from '../../../data/cloudNodes'
+
+import PackDetail from '../../../components/cloud-nodes/PackDetail.vue'
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import { t } from '../../../i18n/translations'
+import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
+import { escapeJsonLd } from '../../../utils/escapeJsonLd'
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const packs = await loadPacksForBuild()
+  return packs.map((pack) => ({
+    params: { pack: pack.id },
+    props: { pack }
+  }))
+}
+
+const { pack } = Astro.props as { pack: Pack }
+const fallbackDescription = t('cloudNodes.card.unavailableDescription', 'en')
+const description = pack.description || fallbackDescription
+const title = t('cloudNodes.detail.metaTitle', 'en').replace(
+  '{pack}',
+  pack.displayName
+)
+const metaDescription = t('cloudNodes.detail.metaDescription', 'en')
+  .replace('{pack}', pack.displayName)
+  .replace('{nodeCount}', String(pack.nodes.length))
+  .replace('{description}', description)
+
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href
+
+const softwareJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: pack.displayName,
+  applicationCategory: 'DeveloperApplication',
+  applicationSubCategory: 'ComfyUI custom-node pack',
+  operatingSystem: 'Comfy Cloud (managed)',
+  url: pageUrl,
+  description,
+  image: pack.bannerUrl || pack.iconUrl,
+  softwareVersion: pack.latestVersion,
+  license: pack.license,
+  codeRepository: pack.repoUrl,
+  author: pack.publisher?.name
+    ? { '@type': 'Person', name: pack.publisher.name }
+    : undefined,
+  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
+}
+---
+
+<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(softwareJsonLd)}
+  />
+  <PackDetail pack={pack} />
+</BaseLayout>

apps/website/src/pages/p/supported-models/[slug].astro

@@ -0,0 +1,185 @@
+---
+import type { GetStaticPaths } from 'astro'
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import ModelHeroSection from '../../../components/models/ModelHeroSection.vue'
+import { models, getModelBySlug } from '../../../config/models'
+import { t } from '../../../i18n/translations'
+
+export const getStaticPaths: GetStaticPaths = () => {
+  return models.map((model) => ({
+    params: { slug: model.slug }
+  }))
+}
+
+const { slug } = Astro.params
+const model = getModelBySlug(slug as string)!
+
+if (model.canonicalSlug) {
+  return Astro.redirect(`/p/supported-models/${model.canonicalSlug}`, 301)
+}
+
+const { displayName } = model
+const canonicalURL = new URL(`/p/supported-models/${model.slug}`, Astro.site)
+
+const dirDescriptions: Record<string, string> = {
+  diffusion_models: 'a diffusion model that generates images or video from text and image prompts',
+  checkpoints: 'an all-in-one checkpoint model that bundles a diffusion model, text encoder, and VAE',
+  loras: 'a LoRA (Low-Rank Adaptation) that fine-tunes an existing model for a specific style or subject',
+  controlnet: 'a ControlNet that steers image generation using structural guides like depth maps, edges, or poses',
+  clip_vision: 'a CLIP Vision encoder that converts images into embeddings for conditioning or style transfer',
+  vae: 'a VAE (Variational Autoencoder) that encodes and decodes latent representations',
+  text_encoders: 'a text encoder that converts prompts into embeddings used to guide generation',
+  audio_encoders: 'an audio encoder that converts audio into embeddings for audio-conditioned generation',
+  upscale_models: 'an upscale model that increases image resolution while preserving or enhancing detail',
+  latent_upscale_models: 'a latent upscale model that refines latents at higher resolution before decoding',
+  style_models: 'a style model that transfers artistic style onto generated images',
+  model_patches: 'a model patch that modifies or extends the behavior of an existing base model',
+  partner_nodes: 'a cloud API model accessible through ComfyUI partner nodes without local hardware requirements'
+}
+
+const dirDesc = dirDescriptions[model.directory] ?? 'an AI model'
+const whatIsDescription = `${displayName} is ${dirDesc}. You can run it locally in ComfyUI with full control over every parameter, or access it through Comfy Cloud. ComfyUI's node-based workflow editor lets you connect ${displayName} with ControlNets, LoRAs, upscalers, and custom nodes to build any pipeline you need. There are ${model.workflowCount} community workflow templates using ${displayName} on Comfy Hub, ready to load and customize.`
+
+const softwareAppJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: displayName,
+  applicationCategory: 'MultimediaApplication',
+  operatingSystem: 'Any',
+  url: canonicalURL.href,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('models.breadcrumb.home'),
+      item: 'https://comfy.org'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('models.breadcrumb.models'),
+      item: 'https://comfy.org/p/supported-models'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: displayName
+    }
+  ]
+}
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: [
+    {
+      '@type': 'Question',
+      name: `What is ${displayName}?`,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: whatIsDescription
+      }
+    },
+    {
+      '@type': 'Question',
+      name: `How do I use ${displayName} in ComfyUI?`,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: model.docsUrl
+          ? `Follow the step-by-step tutorial at ${model.docsUrl}. You can also load any of the ${model.workflowCount} community workflow templates that use ${displayName} directly in ComfyUI.`
+          : `Open ComfyUI and browse the ${model.workflowCount} community workflow templates that use ${displayName}. Load one as a starting point, then customize the nodes and parameters to fit your use case.`
+      }
+    },
+    {
+      '@type': 'Question',
+      name: `How many ComfyUI workflows use ${displayName}?`,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: `There are ${model.workflowCount} community workflow templates that use ${displayName} on Comfy Hub. Each template is ready to run in ComfyUI and can be customized to suit your project.`
+      }
+    },
+    {
+      '@type': 'Question',
+      name: `Is ${displayName} free to use in ComfyUI?`,
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: `ComfyUI is free and open source. ${model.huggingFaceUrl ? `${displayName} weights are available to download from Hugging Face.` : `${displayName} is available as a cloud API through Comfy Cloud.`} You only pay for compute when running on Comfy Cloud; local inference on your own hardware is always free.`
+      }
+    }
+  ]
+}
+
+const pageTitle = `${displayName} in ComfyUI`
+const pageDescription = `Run ${displayName} in ComfyUI with full parameter control. ${model.workflowCount} community workflow templates, step-by-step tutorials, and free local inference.`
+---
+
+<BaseLayout
+  title={`${pageTitle} — Comfy`}
+  description={pageDescription}
+  ogImage={model.thumbnailUrl}
+>
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(softwareAppJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
+
+  <ModelHeroSection
+    displayName={displayName}
+    huggingFaceUrl={model.huggingFaceUrl}
+    docsUrl={model.docsUrl}
+    blogUrl={model.blogUrl}
+    hubSlug={model.hubSlug}
+    workflowCount={model.workflowCount}
+    directory={model.directory}
+  />
+
+  <section class="mx-auto max-w-7xl px-6 py-16 lg:px-8">
+    <h2 class="text-2xl font-bold text-primary-comfy-canvas lg:text-3xl">
+      {t('models.whatIs.heading').replace('{name}', displayName)}
+    </h2>
+    <p class="mt-4 max-w-3xl text-base/relaxed text-primary-comfy-canvas/70 lg:text-lg/relaxed">
+      {whatIsDescription}
+    </p>
+    {model.docsUrl && (
+      <a
+        href={model.docsUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mt-6 inline-block text-primary-comfy-yellow hover:underline"
+      >
+        {t('models.whatIs.tutorialLink')}
+      </a>
+    )}
+  </section>
+
+  <section>
+    {/* TODO: workflow gallery — pulls from hub API */}
+  </section>
+
+  <section>
+    {/* TODO: shared HowComfyWorks component */}
+  </section>
+</BaseLayout>

apps/website/src/pages/p/supported-models/index.astro

@@ -0,0 +1,68 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import { models } from '../../../config/models'
+import { t } from '../../../i18n/translations'
+
+const title = t('models.index.title')
+const subtitle = t('models.index.subtitle')
+
+const dirLabel: Record<string, string> = {
+  diffusion_models: 'Diffusion',
+  checkpoints: 'Checkpoint',
+  loras: 'LoRA',
+  controlnet: 'ControlNet',
+  clip_vision: 'CLIP Vision',
+  model_patches: 'Patch',
+  vae: 'VAE',
+  text_encoders: 'Text Encoder',
+  audio_encoders: 'Audio Encoder',
+  latent_upscale_models: 'Latent Upscale',
+  upscale_models: 'Upscale',
+  style_models: 'Style',
+  partner_nodes: 'Partner Node'
+}
+---
+
+<BaseLayout
+  title={`${title} — Comfy`}
+  description={subtitle}
+>
+  <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-24">
+    <header class="mb-12">
+      <p
+        class="mb-2 text-sm font-medium uppercase tracking-widest text-primary-comfy-yellow"
+      >
+        {t('models.hero.eyebrow')}
+      </p>
+      <h1 class="text-4xl font-bold text-primary-comfy-canvas lg:text-6xl">
+        {title}
+      </h1>
+      <p class="mt-4 max-w-2xl text-lg text-primary-comfy-canvas/70">
+        {subtitle}
+      </p>
+    </header>
+
+    <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      {models.map((model) => (
+        <li>
+          <a
+            href={`/p/supported-models/${model.slug}`}
+            class="flex h-full flex-col gap-3 rounded-xl border border-white/10 p-5 transition-colors hover:border-white/25 hover:bg-white/5"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <span class="text-base font-semibold leading-tight text-primary-comfy-canvas">
+                {model.displayName}
+              </span>
+              <span class="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-xs font-medium text-primary-comfy-canvas/70">
+                {dirLabel[model.directory] ?? model.directory}
+              </span>
+            </div>
+            <p class="mt-auto text-xs text-primary-comfy-canvas/50">
+              {model.workflowCount} workflows
+            </p>
+          </a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes.astro

@@ -0,0 +1,42 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import HeroSection from '../../../components/cloud-nodes/HeroSection.vue'
+import PackGridSection from '../../../components/cloud-nodes/PackGridSection.vue'
+import { t } from '../../../i18n/translations'
+import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
+import { escapeJsonLd } from '../../../utils/escapeJsonLd'
+
+const packs = await loadPacksForBuild()
+
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL('/zh-CN/cloud/supported-nodes', siteBase).href
+
+const itemListJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  name: 'Comfy Cloud 支持的自定义节点包',
+  url: pageUrl,
+  numberOfItems: packs.length,
+  itemListElement: packs.map((pack, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    url: new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href,
+    name: pack.displayName,
+    image: pack.bannerUrl || pack.iconUrl
+  }))
+}
+---
+
+<BaseLayout
+  title={t('cloudNodes.meta.title', 'zh-CN')}
+  description={t('cloudNodes.meta.description', 'zh-CN')}
+>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(itemListJsonLd)}
+  />
+  <HeroSection locale="zh-CN" client:visible />
+  <PackGridSection locale="zh-CN" packs={packs} client:visible />
+</BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes/[pack].astro

@@ -0,0 +1,63 @@
+---
+import type { GetStaticPaths } from 'astro'
+
+import type { Pack } from '../../../../data/cloudNodes'
+
+import PackDetail from '../../../../components/cloud-nodes/PackDetail.vue'
+import BaseLayout from '../../../../layouts/BaseLayout.astro'
+import { t } from '../../../../i18n/translations'
+import { loadPacksForBuild } from '../../../../utils/cloudNodes.build'
+import { escapeJsonLd } from '../../../../utils/escapeJsonLd'
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const packs = await loadPacksForBuild()
+  return packs.map((pack) => ({
+    params: { pack: pack.id },
+    props: { pack }
+  }))
+}
+
+const { pack } = Astro.props as { pack: Pack }
+const fallbackDescription = t('cloudNodes.card.unavailableDescription', 'zh-CN')
+const description = pack.description || fallbackDescription
+const title = t('cloudNodes.detail.metaTitle', 'zh-CN').replace(
+  '{pack}',
+  pack.displayName
+)
+const metaDescription = t('cloudNodes.detail.metaDescription', 'zh-CN')
+  .replace('{pack}', pack.displayName)
+  .replace('{nodeCount}', String(pack.nodes.length))
+  .replace('{description}', description)
+
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href
+
+const softwareJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: pack.displayName,
+  applicationCategory: 'DeveloperApplication',
+  applicationSubCategory: 'ComfyUI custom-node pack',
+  operatingSystem: 'Comfy Cloud (managed)',
+  url: pageUrl,
+  description,
+  image: pack.bannerUrl || pack.iconUrl,
+  softwareVersion: pack.latestVersion,
+  license: pack.license,
+  codeRepository: pack.repoUrl,
+  author: pack.publisher?.name
+    ? { '@type': 'Person', name: pack.publisher.name }
+    : undefined,
+  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
+}
+---
+
+<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(softwareJsonLd)}
+  />
+  <PackDetail pack={pack} locale="zh-CN" />
+</BaseLayout>

apps/website/src/utils/ashby.ci.test.ts

@@ -22,7 +22,7 @@ function baseSnapshot(): RolesSnapshot {
             title: 'Design Engineer',
             department: 'Engineering',
             location: 'San Francisco',
-            applyUrl: 'https://jobs.ashbyhq.com/comfy-org/x'
+            jobUrl: 'https://jobs.ashbyhq.com/comfy-org/x'
           }
         ]
       }
@@ -50,7 +50,7 @@ function freshOutcome(droppedCount = 0): FetchOutcome {
               title: 'Design Engineer',
               department: 'Engineering',
               location: 'San Francisco',
-              applyUrl: 'https://jobs.ashbyhq.com/comfy-org/x'
+              jobUrl: 'https://jobs.ashbyhq.com/comfy-org/x'
             }
           ]
         }

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

@@ -40,7 +40,7 @@ function makeSnapshot(roleCount = 2): RolesSnapshot {
     title: `Snapshot Role ${i}`,
     department: 'Engineering',
     location: 'San Francisco',
-    applyUrl: `https://jobs.ashbyhq.com/comfy-org/snapshot-${i}`
+    jobUrl: `https://jobs.ashbyhq.com/comfy-org/snapshot-${i}`
   }))
   return {
     fetchedAt: '2026-04-01T00:00:00.000Z',
@@ -85,26 +85,7 @@ describe('fetchRolesForBuild', () => {
     if (outcome.status !== 'fresh') return
     expect(outcome.droppedCount).toBe(0)
     expect(outcome.snapshot.departments).toHaveLength(1)
-    expect(outcome.snapshot.departments[0]!.roles[0]!.applyUrl).toMatch(
-      /design-engineer\/apply$/
-    )
-  })
-
-  it('falls back to jobUrl when applyUrl is missing and keeps the role', async () => {
-    const job = validJob()
-    delete (job as Record<string, unknown>).applyUrl
-    const fetchImpl = vi.fn(async () =>
-      response({ apiVersion: '1', jobs: [job] })
-    )
-    const outcome = await fetchRolesForBuild({
-      apiKey: KEY,
-      boardName: BOARD,
-      baseUrl: BASE_URL,
-      fetchImpl: fetchImpl as unknown as typeof fetch
-    })
-    expect(outcome.status).toBe('fresh')
-    if (outcome.status !== 'fresh') return
-    expect(outcome.snapshot.departments[0]!.roles[0]!.applyUrl).toBe(
+    expect(outcome.snapshot.departments[0]!.roles[0]!.jobUrl).toBe(
       'https://jobs.ashbyhq.com/comfy-org/design-engineer'
     )
   })

apps/website/src/utils/ashby.ts

@@ -243,13 +243,13 @@ function groupByDepartment(jobs: readonly AshbyJobPosting[]): Department[] {
 }
 
 function toDomainRole(job: AshbyJobPosting, department: string): Role {
-  const applyUrl = job.applyUrl ?? job.jobUrl
+  const jobUrl = job.jobUrl
   return {
-    id: createHash('sha1').update(applyUrl).digest('hex').slice(0, 16),
+    id: createHash('sha1').update(jobUrl).digest('hex').slice(0, 16),
     title: job.title,
     department: capitalize(department),
     location: (job.location ?? '').trim() || DEFAULT_LOCATION,
-    applyUrl
+    jobUrl
   }
 }
 

apps/website/src/utils/cloudNodes.build.test.ts

@@ -0,0 +1,128 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FetchOutcome } from './cloudNodes'
+import type { NodesSnapshot } from '../data/cloudNodes'
+
+const fetchCloudNodesMock = vi.hoisted(() =>
+  vi.fn<() => Promise<FetchOutcome>>()
+)
+const reportCloudNodesOutcomeMock = vi.hoisted(() => vi.fn())
+
+vi.mock('./cloudNodes', () => ({
+  fetchCloudNodesForBuild: fetchCloudNodesMock
+}))
+
+vi.mock('./cloudNodes.ci', () => ({
+  reportCloudNodesOutcome: reportCloudNodesOutcomeMock
+}))
+
+import { loadPacksForBuild } from './cloudNodes.build'
+
+const SNAPSHOT: NodesSnapshot = {
+  fetchedAt: '2026-04-01T00:00:00.000Z',
+  packs: [
+    {
+      id: 'snapshot-pack',
+      displayName: 'Snapshot Pack',
+      nodes: [
+        { name: 'SnapshotNode', displayName: 'Snapshot Node', category: 'x' }
+      ]
+    }
+  ]
+}
+
+describe('loadPacksForBuild', () => {
+  const savedVercelEnv = process.env.VERCEL_ENV
+
+  beforeEach(() => {
+    fetchCloudNodesMock.mockReset()
+    reportCloudNodesOutcomeMock.mockReset()
+    delete process.env.VERCEL_ENV
+  })
+
+  afterEach(() => {
+    if (savedVercelEnv === undefined) {
+      delete process.env.VERCEL_ENV
+      return
+    }
+    process.env.VERCEL_ENV = savedVercelEnv
+  })
+
+  it('returns packs when fetch is fresh', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'fresh',
+      snapshot: SNAPSHOT,
+      droppedCount: 0,
+      droppedNodes: []
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns snapshot packs when outcome is stale outside production', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'missing WEBSITE_CLOUD_API_KEY'
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns snapshot packs when outcome is stale on Vercel preview', async () => {
+    process.env.VERCEL_ENV = 'preview'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'HTTP 503'
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('throws when outcome is stale on Vercel production', async () => {
+    process.env.VERCEL_ENV = 'production'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'missing WEBSITE_CLOUD_API_KEY'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /stale data in a production build/
+    )
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /missing WEBSITE_CLOUD_API_KEY/
+    )
+  })
+
+  it('throws when outcome is failed regardless of environment', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'failed',
+      reason: 'network error: ECONNREFUSED'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /Cloud nodes fetch failed and no snapshot is available/
+    )
+    await expect(loadPacksForBuild()).rejects.toThrow(/ECONNREFUSED/)
+  })
+
+  it('still reports outcome before throwing on stale-in-production', async () => {
+    process.env.VERCEL_ENV = 'production'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'HTTP 503'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow()
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+})

apps/website/src/utils/cloudNodes.build.ts

@@ -0,0 +1,45 @@
+import type { Pack } from '../data/cloudNodes'
+
+import { fetchCloudNodesForBuild } from './cloudNodes'
+import { reportCloudNodesOutcome } from './cloudNodes.ci'
+
+const REFRESH_HINT =
+  'Run `pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot` locally and commit the snapshot, ' +
+  'or re-run the `Release: Website` workflow with a valid WEBSITE_CLOUD_API_KEY.'
+
+function isProductionBuild(): boolean {
+  return process.env.VERCEL_ENV === 'production'
+}
+
+/**
+ * Resolve the list of packs to render at build time.
+ *
+ * Used by both the index page and the per-pack detail pages so that the
+ * static index and the static detail routes are always derived from the
+ * same source. `fetchCloudNodesForBuild` is memoized on a module-level
+ * `inflight` promise, so repeated calls in the same build process share a
+ * single network round-trip and the same outcome.
+ *
+ * Production builds (VERCEL_ENV=production) fail hard on a stale outcome
+ * to prevent silently shipping out-of-date snapshot data. Preview and
+ * local builds continue to use the committed snapshot.
+ */
+export async function loadPacksForBuild(): Promise<Pack[]> {
+  const outcome = await fetchCloudNodesForBuild()
+  reportCloudNodesOutcome(outcome)
+
+  if (outcome.status === 'failed') {
+    throw new Error(
+      `Cloud nodes fetch failed and no snapshot is available. Reason: ${outcome.reason}. ${REFRESH_HINT}`
+    )
+  }
+
+  if (outcome.status === 'stale' && isProductionBuild()) {
+    throw new Error(
+      `Cloud nodes fetch returned stale data in a production build (VERCEL_ENV=production). ` +
+        `Reason: ${outcome.reason}. ${REFRESH_HINT}`
+    )
+  }
+
+  return outcome.snapshot.packs
+}

apps/website/src/utils/cloudNodes.ci.test.ts

@@ -0,0 +1,121 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FetchOutcome } from './cloudNodes'
+import type { NodesSnapshot } from '../data/cloudNodes'
+
+import {
+  reportCloudNodesOutcome,
+  resetCloudNodesReporterForTests
+} from './cloudNodes.ci'
+
+function baseSnapshot(): NodesSnapshot {
+  return {
+    fetchedAt: new Date().toISOString(),
+    packs: [
+      {
+        id: 'pack-id',
+        displayName: 'Pack',
+        nodes: [
+          {
+            name: 'NodeClass',
+            displayName: 'Node Class',
+            category: 'misc'
+          }
+        ]
+      }
+    ]
+  }
+}
+
+function freshOutcome(droppedCount = 0): FetchOutcome {
+  return {
+    status: 'fresh',
+    droppedCount,
+    droppedNodes:
+      droppedCount === 0
+        ? []
+        : [{ name: 'BadNode', reason: 'invalid display_name' }],
+    snapshot: baseSnapshot()
+  }
+}
+
+describe('reportCloudNodesOutcome', () => {
+  let writeSpy: ReturnType<typeof vi.spyOn>
+  let summaryDir: string
+  let summaryPath: string
+  const originalSummary = process.env.GITHUB_STEP_SUMMARY
+
+  beforeEach(() => {
+    resetCloudNodesReporterForTests()
+    writeSpy = vi.spyOn(process.stdout, 'write').mockImplementation(() => true)
+    summaryDir = mkdtempSync(join(tmpdir(), 'cloud-nodes-summary-'))
+    summaryPath = join(summaryDir, 'summary.md')
+    writeFileSync(summaryPath, '')
+    process.env.GITHUB_STEP_SUMMARY = summaryPath
+  })
+
+  afterEach(() => {
+    writeSpy.mockRestore()
+    rmSync(summaryDir, { recursive: true, force: true })
+    if (originalSummary === undefined) delete process.env.GITHUB_STEP_SUMMARY
+    else process.env.GITHUB_STEP_SUMMARY = originalSummary
+  })
+
+  it('emits nothing on a clean fresh outcome', () => {
+    reportCloudNodesOutcome(freshOutcome(0))
+    expect(writeSpy).not.toHaveBeenCalled()
+    expect(readFileSync(summaryPath, 'utf8')).toContain('Fresh')
+  })
+
+  it('emits exactly one set of annotations across repeated calls', () => {
+    reportCloudNodesOutcome(freshOutcome(1))
+    reportCloudNodesOutcome(freshOutcome(1))
+    expect(writeSpy).toHaveBeenCalledTimes(1)
+    const annotation = writeSpy.mock.calls[0]?.[0] as string
+    expect(annotation).toContain(
+      '::warning title=Cloud nodes: dropped 1 invalid'
+    )
+    expect(readFileSync(summaryPath, 'utf8')).toContain('Dropped')
+  })
+
+  it('emits ::error for auth failures in a stale outcome', () => {
+    reportCloudNodesOutcome({
+      status: 'stale',
+      reason: 'HTTP 401 Unauthorized',
+      snapshot: baseSnapshot()
+    })
+    const annotation = writeSpy.mock.calls[0]?.[0] as string
+    expect(annotation).toContain(
+      '::error title=Cloud nodes authentication failed'
+    )
+  })
+
+  it('emits ::warning for missing-env stale outcomes', () => {
+    reportCloudNodesOutcome({
+      status: 'stale',
+      reason: 'missing WEBSITE_CLOUD_API_KEY',
+      snapshot: baseSnapshot()
+    })
+    const annotation = writeSpy.mock.calls[0]?.[0] as string
+    expect(annotation).toContain('::warning title=Cloud nodes integration')
+  })
+
+  it('emits ::error for a failed outcome and writes no fresh-only sections', () => {
+    reportCloudNodesOutcome({
+      status: 'failed',
+      reason: 'HTTP 500 Server Error'
+    })
+    const annotation = writeSpy.mock.calls[0]?.[0] as string
+    expect(annotation).toContain('::error title=Cloud nodes fetch failed')
+    expect(readFileSync(summaryPath, 'utf8')).toContain('Failed')
+  })
+
+  it('does not throw when GITHUB_STEP_SUMMARY is not set', () => {
+    delete process.env.GITHUB_STEP_SUMMARY
+    expect(() => reportCloudNodesOutcome(freshOutcome(0))).not.toThrow()
+  })
+})

apps/website/src/utils/cloudNodes.ci.ts

@@ -0,0 +1,115 @@
+import { appendFileSync } from 'node:fs'
+
+import type { FetchOutcome } from './cloudNodes'
+
+let hasReported = false
+
+export function resetCloudNodesReporterForTests(): void {
+  hasReported = false
+}
+
+export function reportCloudNodesOutcome(outcome: FetchOutcome): void {
+  if (hasReported) return
+  hasReported = true
+
+  const lines = buildAnnotations(outcome)
+  for (const line of lines) {
+    process.stdout.write(`${line}\n`)
+  }
+
+  const summaryPath = process.env.GITHUB_STEP_SUMMARY
+  if (summaryPath) {
+    try {
+      appendFileSync(summaryPath, buildStepSummary(outcome))
+    } catch {
+      // Writing the summary is best-effort; do not fail the build if the
+      // runner's summary file is unavailable (e.g. local dev).
+    }
+  }
+}
+
+function buildAnnotations(outcome: FetchOutcome): string[] {
+  if (outcome.status === 'fresh') {
+    if (outcome.droppedCount === 0) return []
+    const nodeCount = outcome.droppedCount === 1 ? 'node' : 'nodes'
+    const drops = outcome.droppedNodes
+      .map((d) => {
+        const name = escapeAnnotation(d.name ? `"${d.name}"` : '(unnamed)')
+        const reason = escapeAnnotation(d.reason)
+        return `  - ${name}: ${reason}`
+      })
+      .join('%0A')
+    return [
+      `::warning title=Cloud nodes: dropped ${outcome.droppedCount} invalid ${nodeCount}::Dropped nodes:%0A${drops}%0A%0AAction items:%0A  1. Verify node definitions returned by cloud /api/object_info.%0A  2. If a valid node shape changed, update @comfyorg/object-info-parser/src/schemas/nodeDefSchema.ts and add tests.%0A  3. Dropped nodes are not shown on /cloud/supported-nodes until fixed.`
+    ]
+  }
+
+  if (outcome.status === 'stale') {
+    return [staleAnnotation(outcome.reason)]
+  }
+
+  return [
+    `::error title=Cloud nodes fetch failed and no snapshot is available::Cannot build cloud nodes page without data.%0A%0AReason: ${escapeAnnotation(outcome.reason)}%0A%0AAction items:%0A  1. Run \`pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot\` locally with a valid WEBSITE_CLOUD_API_KEY.%0A  2. Commit apps/website/src/data/cloud-nodes.snapshot.json.%0A  3. Push and re-run CI.`
+  ]
+}
+
+function staleAnnotation(reason: string): string {
+  const escaped = escapeAnnotation(reason)
+  if (reason.startsWith('missing ')) {
+    return `::warning title=Cloud nodes integration::${escaped}. Falling back to committed snapshot.%0A%0AAction items:%0A  1. If you're a contributor without key access, this is expected. The snapshot will be used.%0A  2. If this is CI, check that the \`WEBSITE_CLOUD_API_KEY\` secret exists in the repo and is referenced in .github/workflows/ci-website-build.yaml.`
+  }
+  if (reason.startsWith('HTTP 401') || reason.startsWith('HTTP 403')) {
+    return `::error title=Cloud nodes authentication failed::${escaped}. The WEBSITE_CLOUD_API_KEY is missing, invalid, or revoked. Build continues with the last-known-good snapshot.%0A%0AAction items:%0A  1. Verify the Cloud API key is active and scoped for /api/object_info.%0A  2. Update the \`WEBSITE_CLOUD_API_KEY\` secret in GitHub Actions and Vercel.%0A  3. Re-run this workflow.`
+  }
+  if (reason.startsWith('envelope')) {
+    return `::error title=Cloud nodes schema mismatch::${escaped}. The Cloud API contract likely changed. Build continues with the snapshot, but future updates will fail until schema is fixed.%0A%0AAction items:%0A  1. Check cloud/services/ingest/openapi.yaml for /api/object_info changes.%0A  2. Update apps/website/src/utils/cloudNodes.schema.ts and @comfyorg/object-info-parser schema as needed.`
+  }
+  return `::warning title=Cloud nodes API unavailable::${escaped}. Using last-known-good snapshot.%0A%0AAction items:%0A  1. Check cloud service health.%0A  2. Re-run this workflow once cloud.comfy.org is healthy.`
+}
+
+function escapeAnnotation(value: string): string {
+  return value.replace(/%/g, '%25').replace(/\r/g, '%0D').replace(/\n/g, '%0A')
+}
+
+function buildStepSummary(outcome: FetchOutcome): string {
+  const header = '## ☁️ Cloud nodes\n'
+  const rows: Array<[string, string]> = []
+
+  if (outcome.status === 'fresh') {
+    rows.push(['Status', '✅ Fresh (fetched from Cloud API)'])
+    rows.push(['Packs', String(outcome.snapshot.packs.length)])
+    rows.push([
+      'Nodes',
+      String(outcome.snapshot.packs.reduce((n, p) => n + p.nodes.length, 0))
+    ])
+    rows.push(['Dropped', String(outcome.droppedCount)])
+  } else if (outcome.status === 'stale') {
+    rows.push(['Status', '⚠️ Stale (using snapshot — Cloud fetch failed)'])
+    rows.push(['Packs', String(outcome.snapshot.packs.length)])
+    rows.push([
+      'Nodes',
+      String(outcome.snapshot.packs.reduce((n, p) => n + p.nodes.length, 0))
+    ])
+    rows.push(['Reason', outcome.reason])
+    rows.push(['Snapshot age', describeSnapshotAge(outcome.snapshot.fetchedAt)])
+  } else {
+    rows.push(['Status', '❌ Failed (no snapshot available)'])
+    rows.push(['Reason', outcome.reason])
+  }
+
+  const table =
+    '| | |\n|---|---|\n' +
+    rows.map(([k, v]) => `| **${k}** | ${v} |`).join('\n') +
+    '\n'
+
+  return `${header}${table}\n`
+}
+
+function describeSnapshotAge(fetchedAt: string): string {
+  const fetched = new Date(fetchedAt).getTime()
+  if (Number.isNaN(fetched)) return 'unknown'
+  const days = Math.floor((Date.now() - fetched) / 86_400_000)
+  if (days <= 0) return 'today'
+  if (days === 1) return '1 day'
+  return `${days} days`
+}

apps/website/src/utils/cloudNodes.registry.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  DEFAULT_REGISTRY_BASE_URL,
+  fetchRegistryPacks
+} from './cloudNodes.registry'
+
+function jsonResponse(
+  body: unknown,
+  init: Partial<ResponseInit> = {}
+): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'content-type': 'application/json' },
+    ...init
+  })
+}
+
+describe('fetchRegistryPacks', () => {
+  it('requests node ids in batches of 50', async () => {
+    const ids = Array.from({ length: 120 }, (_, i) => `pack-${i}`)
+    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
+      const url = new URL(String(input))
+      const batchIds = url.searchParams.getAll('node_id')
+      return jsonResponse({
+        nodes: batchIds.map((id) => ({ id, name: id })),
+        total: batchIds.length,
+        page: 1,
+        limit: 50
+      })
+    })
+
+    const result = await fetchRegistryPacks(ids, {
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(fetchImpl).toHaveBeenCalledTimes(3)
+    expect(result.size).toBe(120)
+    const firstCallUrl = new URL(String(fetchImpl.mock.calls[0]?.[0]))
+    expect(firstCallUrl.origin).toBe(DEFAULT_REGISTRY_BASE_URL)
+    expect(firstCallUrl.pathname).toBe('/nodes')
+    expect(firstCallUrl.searchParams.getAll('node_id')).toHaveLength(50)
+  })
+
+  it('retries a failed batch once and then succeeds', async () => {
+    const fetchImpl = vi
+      .fn<(input: RequestInfo | URL, init?: RequestInit) => Promise<Response>>()
+      .mockResolvedValueOnce(new Response('{}', { status: 503 }))
+      .mockResolvedValueOnce(
+        jsonResponse({
+          nodes: [{ id: 'pack-1', name: 'Pack One' }],
+          total: 1,
+          page: 1,
+          limit: 50
+        })
+      )
+
+    const result = await fetchRegistryPacks(['pack-1'], {
+      fetchImpl: fetchImpl as unknown as typeof fetch
+    })
+
+    expect(fetchImpl).toHaveBeenCalledTimes(2)
+    expect(result.get('pack-1')?.name).toBe('Pack One')
+  })
+
+  it('returns an empty map when all batches fail (soft failure)', async () => {
+    const ids = ['pack-a', 'pack-b']
+    const fetchImpl = vi.fn(async () => new Response('{}', { status: 500 }))
+
+    const result = await fetchRegistryPacks(ids, {
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(fetchImpl).toHaveBeenCalledTimes(2)
+    expect(result.size).toBe(0)
+  })
+})

apps/website/src/utils/cloudNodes.registry.ts

@@ -0,0 +1,197 @@
+import { z } from 'zod'
+
+import type { components } from '@comfyorg/registry-types'
+
+export const DEFAULT_REGISTRY_BASE_URL = 'https://api.comfy.org'
+const DEFAULT_TIMEOUT_MS = 5_000
+const BATCH_SIZE = 50
+
+export type RegistryPack = components['schemas']['Node']
+
+const RegistryPackSchema = z
+  .object({
+    id: z.string().optional(),
+    name: z.string().optional(),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+    banner_url: z.string().optional(),
+    repository: z.string().optional(),
+    license: z.string().optional(),
+    downloads: z.number().optional(),
+    github_stars: z.number().optional(),
+    created_at: z.string().optional(),
+    supported_os: z.array(z.string()).optional(),
+    supported_accelerators: z.array(z.string()).optional(),
+    publisher: z
+      .object({
+        id: z.string().optional(),
+        name: z.string().optional()
+      })
+      .passthrough()
+      .optional(),
+    latest_version: z
+      .object({
+        version: z.string().optional(),
+        createdAt: z.string().optional()
+      })
+      .passthrough()
+      .optional()
+  })
+  .passthrough()
+
+const RegistryListResponseSchema = z
+  .object({
+    nodes: z.array(RegistryPackSchema)
+  })
+  .passthrough()
+
+interface FetchRegistryOptions {
+  baseUrl?: string
+  timeoutMs?: number
+  fetchImpl?: typeof fetch
+}
+
+export async function fetchRegistryPacks(
+  packIds: readonly string[],
+  options: FetchRegistryOptions = {}
+): Promise<Map<string, RegistryPack | null>> {
+  const uniquePackIds = [...new Set(packIds.filter((id) => id.length > 0))]
+  if (uniquePackIds.length === 0) {
+    return new Map()
+  }
+
+  const baseUrl = options.baseUrl ?? DEFAULT_REGISTRY_BASE_URL
+  const timeoutMs = clampTimeoutMs(options.timeoutMs)
+  const fetchImpl = options.fetchImpl ?? fetch
+
+  const batches = chunk(uniquePackIds, BATCH_SIZE)
+  const resolved = new Map<string, RegistryPack | null>()
+  let successCount = 0
+  let failureCount = 0
+
+  for (const batch of batches) {
+    const nodes = await fetchBatchWithRetry(
+      fetchImpl,
+      baseUrl,
+      batch,
+      timeoutMs
+    )
+    if (!nodes) {
+      failureCount += 1
+      for (const packId of batch) {
+        resolved.set(packId, null)
+      }
+      continue
+    }
+
+    successCount += 1
+    const nodesById = new Map(
+      nodes
+        .map((node) => [node.id, node] as const)
+        .filter(([id]) => typeof id === 'string' && id.length > 0)
+    )
+
+    for (const packId of batch) {
+      resolved.set(packId, nodesById.get(packId) ?? null)
+    }
+  }
+
+  if (failureCount > 0) {
+    console.warn(
+      `[cloud-nodes] registry enrichment: ${successCount}/${batches.length} batches succeeded, ${failureCount} failed`
+    )
+  }
+
+  if (successCount === 0) {
+    return new Map()
+  }
+
+  return resolved
+}
+
+async function fetchBatchWithRetry(
+  fetchImpl: typeof fetch,
+  baseUrl: string,
+  packIds: readonly string[],
+  timeoutMs: number
+): Promise<RegistryPack[] | null> {
+  const firstAttempt = await fetchBatch(fetchImpl, baseUrl, packIds, timeoutMs)
+  if (firstAttempt.kind === 'ok') {
+    return firstAttempt.nodes
+  }
+  if (!firstAttempt.retryable) {
+    return null
+  }
+
+  const secondAttempt = await fetchBatch(fetchImpl, baseUrl, packIds, timeoutMs)
+  if (secondAttempt.kind === 'ok') {
+    return secondAttempt.nodes
+  }
+  return null
+}
+
+type BatchResponse =
+  | { kind: 'ok'; nodes: RegistryPack[] }
+  | { kind: 'err'; retryable: boolean }
+
+async function fetchBatch(
+  fetchImpl: typeof fetch,
+  baseUrl: string,
+  packIds: readonly string[],
+  timeoutMs: number
+): Promise<BatchResponse> {
+  const params = new URLSearchParams()
+  for (const packId of packIds) {
+    params.append('node_id', packId)
+  }
+
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), timeoutMs)
+
+  try {
+    const res = await fetchImpl(`${baseUrl}/nodes?${params.toString()}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json'
+      },
+      signal: controller.signal
+    })
+
+    if (!res.ok) {
+      return {
+        kind: 'err',
+        retryable: res.status === 429 || (res.status >= 500 && res.status < 600)
+      }
+    }
+
+    const rawBody: unknown = await res.json()
+    const parsed = RegistryListResponseSchema.safeParse(rawBody)
+    if (!parsed.success) {
+      return { kind: 'err', retryable: false }
+    }
+    return { kind: 'ok', nodes: parsed.data.nodes as RegistryPack[] }
+  } catch {
+    return { kind: 'err', retryable: true }
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+function chunk<T>(values: readonly T[], size: number): T[][] {
+  const chunks: T[][] = []
+  for (let i = 0; i < values.length; i += size) {
+    chunks.push(values.slice(i, i + size))
+  }
+  return chunks
+}
+
+function clampTimeoutMs(candidate: number | undefined): number {
+  if (
+    typeof candidate !== 'number' ||
+    !Number.isFinite(candidate) ||
+    candidate <= 0
+  ) {
+    return DEFAULT_TIMEOUT_MS
+  }
+  return Math.floor(candidate)
+}

apps/website/src/utils/cloudNodes.schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod'
+
+export const CloudNodesEnvelopeSchema = z.record(z.unknown())

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

@@ -0,0 +1,309 @@
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { pathToFileURL } from 'node:url'
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { NodesSnapshot } from '../data/cloudNodes'
+import type * as ObjectInfoParser from '@comfyorg/object-info-parser'
+
+const fetchRegistryPacksMock = vi.hoisted(() => vi.fn(async () => new Map()))
+const sanitizeCallSpy = vi.hoisted(() => vi.fn())
+
+vi.mock('./cloudNodes.registry', () => ({
+  DEFAULT_REGISTRY_BASE_URL: 'https://api.comfy.org',
+  fetchRegistryPacks: fetchRegistryPacksMock
+}))
+
+vi.mock('@comfyorg/object-info-parser', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof ObjectInfoParser
+  return {
+    ...actual,
+    sanitizeUserContent: (
+      defs: Parameters<typeof actual.sanitizeUserContent>[0]
+    ) => {
+      sanitizeCallSpy(defs)
+      return actual.sanitizeUserContent(defs)
+    }
+  }
+})
+
+import {
+  fetchCloudNodesForBuild,
+  resetCloudNodesFetcherForTests
+} from './cloudNodes'
+
+const BASE_URL = 'https://cloud.test'
+const KEY = 'cloud-secret'
+
+function validNode(
+  overrides: Partial<Record<string, unknown>> = {}
+): Record<string, unknown> {
+  return {
+    name: 'ImpactNode',
+    display_name: 'Impact Node',
+    description: 'Node description',
+    category: 'impact/testing',
+    output_node: false,
+    python_module: 'custom_nodes.comfyui-impact-pack.nodes',
+    ...overrides
+  }
+}
+
+function response(body: unknown, init: Partial<ResponseInit> = {}): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'content-type': 'application/json' },
+    ...init
+  })
+}
+
+function makeSnapshot(packCount = 1): NodesSnapshot {
+  const packs = Array.from({ length: packCount }, (_, i) => ({
+    id: `snapshot-pack-${i}`,
+    displayName: `Snapshot Pack ${i}`,
+    nodes: [
+      {
+        name: `SnapshotNode${i}`,
+        displayName: `Snapshot Node ${i}`,
+        category: 'snapshot'
+      }
+    ]
+  }))
+
+  return {
+    fetchedAt: '2026-04-01T00:00:00.000Z',
+    packs
+  }
+}
+
+function withSnapshotDir(snapshot: NodesSnapshot | null): URL {
+  const dir = mkdtempSync(join(tmpdir(), 'cloud-nodes-test-'))
+  const file = join(dir, 'cloud-nodes.snapshot.json')
+  if (snapshot) writeFileSync(file, JSON.stringify(snapshot))
+  return pathToFileURL(file)
+}
+
+describe('fetchCloudNodesForBuild', () => {
+  const savedCloudApiKey = process.env.WEBSITE_CLOUD_API_KEY
+
+  beforeEach(() => {
+    resetCloudNodesFetcherForTests()
+    fetchRegistryPacksMock.mockReset()
+    fetchRegistryPacksMock.mockResolvedValue(new Map())
+    sanitizeCallSpy.mockReset()
+    delete process.env.WEBSITE_CLOUD_API_KEY
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    process.env.WEBSITE_CLOUD_API_KEY = savedCloudApiKey
+  })
+
+  it('returns fresh when API succeeds', async () => {
+    fetchRegistryPacksMock.mockResolvedValue(
+      new Map([
+        [
+          'comfyui-impact-pack',
+          {
+            id: 'comfyui-impact-pack',
+            name: 'ComfyUI Impact Pack',
+            repository: 'https://github.com/ltdrdata/ComfyUI-Impact-Pack'
+          }
+        ]
+      ])
+    )
+
+    const fetchImpl = vi.fn(async () => response({ ImpactNode: validNode() }))
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(outcome.status).toBe('fresh')
+    if (outcome.status !== 'fresh') return
+    expect(outcome.droppedCount).toBe(0)
+    expect(outcome.snapshot.packs).toHaveLength(1)
+    expect(outcome.snapshot.packs[0]?.repoUrl).toBe(
+      'https://github.com/ltdrdata/ComfyUI-Impact-Pack'
+    )
+  })
+
+  it('drops invalid nodes individually and keeps valid nodes', async () => {
+    const snapshotUrl = withSnapshotDir(makeSnapshot())
+    const fetchImpl = vi.fn(async () =>
+      response({
+        ValidNode: validNode({ name: 'ValidNode' }),
+        BrokenNode: {
+          name: 'BrokenNode',
+          python_module: 'custom_nodes.some-pack'
+        }
+      })
+    )
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      snapshotUrl,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(outcome.status).toBe('fresh')
+    if (outcome.status !== 'fresh') return
+    expect(outcome.droppedCount).toBe(1)
+    expect(outcome.droppedNodes[0]?.name).toBe('BrokenNode')
+    expect(outcome.snapshot.packs[0]?.nodes).toHaveLength(1)
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('applies sanitizer before grouping', async () => {
+    const fetchImpl = vi.fn(async () =>
+      response({
+        LoadImage: validNode({
+          name: 'LoadImage',
+          python_module: 'nodes',
+          input: {
+            required: {
+              image: [['private.png', 'public.webp'], {}]
+            }
+          }
+        }),
+        ImpactNode: validNode({
+          input: {
+            required: {
+              choice: [['safe', 'movie.mov'], {}]
+            }
+          }
+        })
+      })
+    )
+
+    await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(sanitizeCallSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns stale with missing env when snapshot is present', async () => {
+    const snapshot = makeSnapshot()
+    const snapshotUrl = withSnapshotDir(snapshot)
+    const fetchImpl = vi.fn()
+    const outcome = await fetchCloudNodesForBuild({
+      snapshotUrl,
+      fetchImpl: fetchImpl as unknown as typeof fetch
+    })
+    expect(outcome.status).toBe('stale')
+    if (outcome.status !== 'stale') return
+    expect(outcome.reason).toMatch(/^missing /)
+    expect(fetchImpl).not.toHaveBeenCalled()
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('returns failed when env and snapshot are missing', async () => {
+    const snapshotUrl = withSnapshotDir(null)
+    const outcome = await fetchCloudNodesForBuild({
+      snapshotUrl,
+      fetchImpl: vi.fn() as unknown as typeof fetch
+    })
+    expect(outcome.status).toBe('failed')
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('does not retry on HTTP 401', async () => {
+    const snapshotUrl = withSnapshotDir(makeSnapshot())
+    const fetchImpl = vi.fn(async () => response({}, { status: 401 }))
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      snapshotUrl,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+    expect(outcome.status).toBe('stale')
+    if (outcome.status !== 'stale') return
+    expect(outcome.reason).toMatch(/^HTTP 401/)
+    expect(fetchImpl).toHaveBeenCalledTimes(1)
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('retries 5xx then falls back to snapshot', async () => {
+    const snapshotUrl = withSnapshotDir(makeSnapshot())
+    const fetchImpl = vi.fn(async () => response({}, { status: 503 }))
+    const sleep = vi.fn(async () => undefined)
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      snapshotUrl,
+      retryDelaysMs: [1, 1, 1],
+      sleep,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+    expect(outcome.status).toBe('stale')
+    expect(fetchImpl).toHaveBeenCalledTimes(4)
+    expect(sleep).toHaveBeenCalledTimes(3)
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('falls back to snapshot on envelope schema mismatch', async () => {
+    const snapshotUrl = withSnapshotDir(makeSnapshot())
+    const fetchImpl = vi.fn(async () => response(['unexpected-array-envelope']))
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      snapshotUrl,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+    expect(outcome.status).toBe('stale')
+    if (outcome.status !== 'stale') return
+    expect(outcome.reason).toMatch(/^envelope schema/)
+    rmSync(new URL('.', snapshotUrl), { recursive: true, force: true })
+  })
+
+  it('memoizes within a single process', async () => {
+    const fetchImpl = vi.fn(async () => response({ ImpactNode: validNode() }))
+    const opts = {
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      fetchImpl: fetchImpl as typeof fetch
+    }
+
+    const [a, b] = await Promise.all([
+      fetchCloudNodesForBuild(opts),
+      fetchCloudNodesForBuild(opts)
+    ])
+
+    expect(a).toBe(b)
+    expect(fetchImpl).toHaveBeenCalledTimes(1)
+  })
+
+  it('throws when called twice with materially different options', async () => {
+    const fetchImpl = vi.fn(async () => response({ ImpactNode: validNode() }))
+    await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+
+    expect(() =>
+      fetchCloudNodesForBuild({
+        apiKey: 'different-key',
+        baseUrl: BASE_URL,
+        fetchImpl: fetchImpl as typeof fetch
+      })
+    ).toThrow(/called twice with different options/)
+  })
+
+  it('returns fresh even when registry enrichment fails', async () => {
+    fetchRegistryPacksMock.mockResolvedValue(new Map())
+    const fetchImpl = vi.fn(async () => response({ ImpactNode: validNode() }))
+    const outcome = await fetchCloudNodesForBuild({
+      apiKey: KEY,
+      baseUrl: BASE_URL,
+      fetchImpl: fetchImpl as typeof fetch
+    })
+    expect(outcome.status).toBe('fresh')
+  })
+})

apps/website/src/utils/cloudNodes.ts

@@ -0,0 +1,355 @@
+import { readFile } from 'node:fs/promises'
+
+import {
+  groupNodesByPack,
+  sanitizeUserContent,
+  validateComfyNodeDef
+} from '@comfyorg/object-info-parser'
+
+import type { RegistryPack } from './cloudNodes.registry'
+import type { NodesSnapshot, Pack, PackNode } from '../data/cloudNodes'
+
+import bundledSnapshot from '../data/cloud-nodes.snapshot.json' with { type: 'json' }
+import { isNodesSnapshot } from '../data/cloudNodes'
+import { fetchRegistryPacks } from './cloudNodes.registry'
+import { CloudNodesEnvelopeSchema } from './cloudNodes.schema'
+
+const DEFAULT_BASE_URL = 'https://cloud.comfy.org'
+const DEFAULT_TIMEOUT_MS = 10_000
+const RETRY_DELAYS_MS = [1_000, 2_000, 4_000]
+
+export interface DroppedNode {
+  name: string
+  reason: string
+}
+
+export type FetchOutcome =
+  | {
+      status: 'fresh'
+      snapshot: NodesSnapshot
+      droppedCount: number
+      droppedNodes: DroppedNode[]
+    }
+  | { status: 'stale'; snapshot: NodesSnapshot; reason: string }
+  | { status: 'failed'; reason: string }
+
+interface FetchCloudNodesOptions {
+  apiKey?: string
+  baseUrl?: string
+  timeoutMs?: number
+  retryDelaysMs?: readonly number[]
+  fetchImpl?: typeof fetch
+  snapshotUrl?: URL
+  sleep?: (ms: number) => Promise<void>
+}
+
+let inflight: Promise<FetchOutcome> | undefined
+let inflightOptions: FetchCloudNodesOptions | undefined
+
+export function resetCloudNodesFetcherForTests(): void {
+  inflight = undefined
+  inflightOptions = undefined
+}
+
+function optionsDifferMaterially(
+  a: FetchCloudNodesOptions,
+  b: FetchCloudNodesOptions
+): boolean {
+  return (
+    a.apiKey !== b.apiKey ||
+    a.baseUrl !== b.baseUrl ||
+    a.timeoutMs !== b.timeoutMs ||
+    a.snapshotUrl?.href !== b.snapshotUrl?.href
+  )
+}
+
+export function fetchCloudNodesForBuild(
+  options: FetchCloudNodesOptions = {}
+): Promise<FetchOutcome> {
+  if (inflight && inflightOptions) {
+    if (optionsDifferMaterially(inflightOptions, options)) {
+      throw new Error(
+        'fetchCloudNodesForBuild called twice with different options; call resetCloudNodesFetcherForTests() between distinct configurations'
+      )
+    }
+    return inflight
+  }
+  inflightOptions = options
+  inflight = doFetchCloudNodesForBuild(options)
+  return inflight
+}
+
+async function doFetchCloudNodesForBuild(
+  options: FetchCloudNodesOptions
+): Promise<FetchOutcome> {
+  const apiKey = options.apiKey ?? process.env.WEBSITE_CLOUD_API_KEY
+
+  if (!apiKey) {
+    return fallback('missing WEBSITE_CLOUD_API_KEY', options.snapshotUrl)
+  }
+
+  const result = await tryFetchAndParse(apiKey, options)
+  if (result.kind === 'ok') {
+    return {
+      status: 'fresh',
+      snapshot: {
+        fetchedAt: new Date().toISOString(),
+        packs: result.packs
+      },
+      droppedCount: result.droppedNodes.length,
+      droppedNodes: result.droppedNodes
+    }
+  }
+
+  return fallback(result.reason, options.snapshotUrl)
+}
+
+async function fallback(
+  reason: string,
+  snapshotUrl: URL | undefined
+): Promise<FetchOutcome> {
+  const snapshot = await readSnapshot(snapshotUrl)
+  if (snapshot) return { status: 'stale', snapshot, reason }
+  return { status: 'failed', reason }
+}
+
+interface FetchOk {
+  kind: 'ok'
+  packs: Pack[]
+  droppedNodes: DroppedNode[]
+}
+
+interface FetchErr {
+  kind: 'err'
+  reason: string
+}
+
+async function tryFetchAndParse(
+  apiKey: string,
+  options: FetchCloudNodesOptions
+): Promise<FetchOk | FetchErr> {
+  const baseUrl = options.baseUrl ?? DEFAULT_BASE_URL
+  const timeoutMs = options.timeoutMs ?? DEFAULT_TIMEOUT_MS
+  const retryDelaysMs = options.retryDelaysMs ?? RETRY_DELAYS_MS
+  const fetchImpl = options.fetchImpl ?? fetch
+  const sleep = options.sleep ?? defaultSleep
+
+  const url = `${baseUrl}/api/object_info`
+
+  let lastReason = 'unknown error'
+  for (let attempt = 0; attempt <= retryDelaysMs.length; attempt++) {
+    if (attempt > 0) await sleep(retryDelaysMs[attempt - 1])
+
+    const response = await callOnce(fetchImpl, url, apiKey, timeoutMs)
+    if (response.kind === 'err') {
+      lastReason = response.reason
+      if (!response.retryable) return response
+      continue
+    }
+
+    const envelope = CloudNodesEnvelopeSchema.safeParse(response.body)
+    if (!envelope.success) {
+      return {
+        kind: 'err',
+        reason: `envelope schema validation failed: ${envelope.error.issues
+          .map((i) => `${i.path.join('.') || '<root>'}: ${i.message}`)
+          .join('; ')}`
+      }
+    }
+
+    if (Object.keys(envelope.data).length === 0) {
+      return {
+        kind: 'err',
+        reason:
+          'envelope schema validation failed: <root>: expected non-empty object'
+      }
+    }
+
+    return parseCloudNodes(envelope.data, options)
+  }
+
+  return { kind: 'err', reason: lastReason }
+}
+
+type CallResponse =
+  | { kind: 'ok'; body: unknown }
+  | { kind: 'err'; reason: string; retryable: boolean }
+
+async function callOnce(
+  fetchImpl: typeof fetch,
+  url: string,
+  apiKey: string,
+  timeoutMs: number
+): Promise<CallResponse> {
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), timeoutMs)
+  try {
+    const res = await fetchImpl(url, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'X-API-Key': apiKey
+      },
+      signal: controller.signal
+    })
+    if (res.ok) {
+      return { kind: 'ok', body: await res.json() }
+    }
+    const retryable =
+      res.status === 429 || (res.status >= 500 && res.status < 600)
+    return {
+      kind: 'err',
+      reason: `HTTP ${res.status} ${res.statusText || ''}`.trim(),
+      retryable
+    }
+  } catch (error) {
+    const reason =
+      error instanceof Error
+        ? `network error: ${error.message}`
+        : 'network error'
+    return { kind: 'err', reason, retryable: true }
+  } finally {
+    clearTimeout(timer)
+  }
+}
+
+async function parseCloudNodes(
+  envelope: Record<string, unknown>,
+  options: FetchCloudNodesOptions
+): Promise<FetchOk> {
+  const validDefs: Record<string, ReturnType<typeof validateComfyNodeDef>> = {}
+  const droppedNodes: DroppedNode[] = []
+
+  for (const [name, rawDef] of Object.entries(envelope)) {
+    let validationError = 'unknown validation error'
+    const parsed = validateComfyNodeDef(rawDef, (error) => {
+      validationError = error
+    })
+    if (!parsed) {
+      droppedNodes.push({ name, reason: validationError })
+      continue
+    }
+    validDefs[name] = parsed
+  }
+
+  const sanitizedDefs = sanitizeUserContent(
+    validDefs as Record<string, NonNullable<(typeof validDefs)[string]>>
+  )
+  const grouped = groupNodesByPack(sanitizedDefs)
+
+  let registryMap = new Map<string, RegistryPack | null>()
+  try {
+    registryMap = await fetchRegistryPacks(
+      grouped.map((pack) => pack.id),
+      { fetchImpl: options.fetchImpl }
+    )
+  } catch {
+    registryMap = new Map()
+  }
+
+  const packs = grouped.map((pack) =>
+    toDomainPack(
+      pack.id,
+      pack.displayName,
+      pack.nodes,
+      registryMap.get(pack.id)
+    )
+  )
+
+  return { kind: 'ok', packs, droppedNodes }
+}
+
+function safeExternalUrl(value: string | undefined): string | undefined {
+  if (!value) return undefined
+  try {
+    const url = new URL(value)
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return undefined
+    if (!url.host) return undefined
+    return url.toString()
+  } catch {
+    return undefined
+  }
+}
+
+function toDomainPack(
+  packId: string,
+  fallbackDisplayName: string,
+  nodes: Array<{
+    className: string
+    def: {
+      display_name: string
+      category: string
+      description: string
+      deprecated?: boolean
+      experimental?: boolean
+    }
+  }>,
+  registryPack: RegistryPack | null | undefined
+): Pack {
+  return {
+    id: packId,
+    registryId: registryPack?.id,
+    displayName: registryPack?.name?.trim() || fallbackDisplayName || packId,
+    description: registryPack?.description?.trim() || undefined,
+    bannerUrl: safeExternalUrl(registryPack?.banner_url),
+    iconUrl: safeExternalUrl(registryPack?.icon),
+    repoUrl: safeExternalUrl(registryPack?.repository),
+    publisher: registryPack?.publisher?.id
+      ? {
+          id: registryPack.publisher.id,
+          name: registryPack.publisher.name
+        }
+      : undefined,
+    downloads: registryPack?.downloads,
+    githubStars: registryPack?.github_stars,
+    latestVersion: registryPack?.latest_version?.version,
+    license: registryPack?.license,
+    lastUpdated:
+      registryPack?.latest_version?.createdAt ?? registryPack?.created_at,
+    supportedOs: registryPack?.supported_os,
+    supportedAccelerators: registryPack?.supported_accelerators,
+    nodes: nodes
+      .map((node) => toDomainNode(node.className, node.def))
+      .sort((a, b) => a.displayName.localeCompare(b.displayName))
+  }
+}
+
+function toDomainNode(
+  className: string,
+  def: {
+    display_name: string
+    category: string
+    description: string
+    deprecated?: boolean
+    experimental?: boolean
+  }
+): PackNode {
+  return {
+    name: className,
+    displayName: def.display_name,
+    category: def.category,
+    description: def.description || undefined,
+    deprecated: def.deprecated,
+    experimental: def.experimental
+  }
+}
+
+async function readSnapshot(
+  snapshotUrl: URL | undefined
+): Promise<NodesSnapshot | null> {
+  if (!snapshotUrl) {
+    return isNodesSnapshot(bundledSnapshot) ? bundledSnapshot : null
+  }
+  try {
+    const text = await readFile(snapshotUrl, 'utf8')
+    const parsed: unknown = JSON.parse(text)
+    if (isNodesSnapshot(parsed)) return parsed
+    return null
+  } catch {
+    return null
+  }
+}
+
+function defaultSleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}

apps/website/src/utils/escapeJsonLd.ts

@@ -0,0 +1,24 @@
+/**
+ * Serialize an object to a JSON string safe to embed inside an inline
+ * `<script type="application/ld+json">` tag.
+ *
+ * Pack metadata flows in from the public ComfyUI registry, where any user
+ * can publish a pack with a `displayName`, `description`, or
+ * `publisher.name` that contains `</script>` or `<!--`. Without escaping,
+ * those sequences would close the surrounding `<script>` tag and allow
+ * stored XSS.
+ *
+ * Escapes:
+ * - Every `<` (covers `</script>`, `<script`, `<!--`)
+ * - U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR (which are
+ *   line terminators in HTML script context but valid characters
+ *   elsewhere in JSON, so `JSON.stringify` does not escape them)
+ *
+ * Reference: https://v8.dev/features/subsume-json
+ */
+export function escapeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029')
+}

browser_tests/assets/missing/missing_media_cloud_output_annotation.json

@@ -0,0 +1,45 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png[output]",
+        "image"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/missing_media_output_annotations.json

@@ -0,0 +1,84 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["ComfyUI_00001_.png [output]", "image"]
+    },
+    {
+      "id": 2,
+      "type": "LoadVideo",
+      "pos": [430, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "VIDEO",
+          "type": "VIDEO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadVideo"
+      },
+      "widgets_values": ["clip.mp4 [output]", "image"]
+    },
+    {
+      "id": 3,
+      "type": "LoadAudio",
+      "pos": [810, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": ["sound.wav [output]", null, ""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/vueNodes/ksampler-denoise-widget-link.json

@@ -0,0 +1,90 @@
+{
+  "id": "06e5b524-5a40-40b9-b561-199dfab18cf0",
+  "revision": 0,
+  "last_node_id": 12,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "KSampler",
+      "pos": [230, 110],
+      "size": [270, 317.5666809082031],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "denoise",
+          "type": "FLOAT",
+          "widget": {
+            "name": "denoise"
+          },
+          "link": 10
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 11,
+      "type": "PrimitiveFloat",
+      "pos": [-80.55032348632812, 375.2260443115233],
+      "size": [270, 80.23332977294922],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "FLOAT",
+          "type": "FLOAT",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveFloat"
+      },
+      "widgets_values": [0]
+    }
+  ],
+  "links": [[10, 11, 0, 10, 4, "FLOAT"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8264462809917354,
+      "offset": [1335.8909766107738, 692.7345403667316]
+    },
+    "frontendVersion": "1.45.4"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -285,10 +285,12 @@ export class ComfyPage {
 
   async setup({
     clearStorage = true,
-    mockReleases = true
+    mockReleases = true,
+    url
   }: {
     clearStorage?: boolean
     mockReleases?: boolean
+    url?: string
   } = {}) {
     // Mock release endpoint to prevent changelog popups (before navigation)
     if (mockReleases) {
@@ -320,7 +322,7 @@ export class ComfyPage {
       }, this.id)
     }
 
-    await this.goto()
+    await this.goto({ url })
 
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.waitForAppReady()
@@ -347,8 +349,8 @@ export class ComfyPage {
     return assetPath(fileName)
   }
 
-  async goto() {
-    await this.page.goto(this.url)
+  async goto({ url }: { url?: string } = {}) {
+    await this.page.goto(url ? new URL(url, this.url).toString() : this.url)
   }
 
   async nextFrame() {
@@ -470,6 +472,7 @@ const COLLECT_COVERAGE = process.env.COLLECT_COVERAGE === 'true'
 
 export const comfyPageFixture = base.extend<{
   initialFeatureFlags: Record<string, unknown>
+  initialSettings: Record<string, unknown>
   comfyPage: ComfyPage
   comfyMouse: ComfyMouse
   comfyFiles: ComfyFiles
@@ -477,6 +480,10 @@ export const comfyPageFixture = base.extend<{
   // Allows configuring feature flags for tests with before initial setup:
   // `test.use({ initialFeatureFlags: { my_flag: true } })`.
   initialFeatureFlags: [{}, { option: true }],
+  // Allows seeding user settings before initial page load:
+  // `test.use({ initialSettings: { 'Comfy.Locale': 'zh' } })`. Merged on top of
+  // the fixture's defaults so per-test values win.
+  initialSettings: [{}, { option: true }],
 
   page: async ({ page, browserName }, use) => {
     if (browserName !== 'chromium' || !COLLECT_COVERAGE) {
@@ -494,7 +501,11 @@ export const comfyPageFixture = base.extend<{
     await mcr.add(coverage)
   },
 
-  comfyPage: async ({ page, request, initialFeatureFlags }, use, testInfo) => {
+  comfyPage: async (
+    { page, request, initialFeatureFlags, initialSettings },
+    use,
+    testInfo
+  ) => {
     const comfyPage = new ComfyPage(page, request)
 
     const { parallelIndex } = testInfo
@@ -529,7 +540,8 @@ export const comfyPageFixture = base.extend<{
         // Disable errors tab to prevent missing model detection from
         // rendering error indicators on nodes during unrelated tests.
         'Comfy.RightSidePanel.ShowErrorsTab': false,
-        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true })
+        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true }),
+        ...initialSettings
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -246,4 +246,18 @@ export class VueNodeHelpers {
       position: { x: box.width / 2, y: box.height * 0.75 }
     })
   }
+  async isSlotConnected(slot: Locator) {
+    const key = await slot.getByTestId('slot-dot').getAttribute('data-slot-key')
+    if (!key) return false
+
+    return await this.page.evaluate((key) => {
+      const [nodeId, type, slotId] = key.split('-')
+      const node = app?.canvas?.graph?.getNodeById(nodeId)
+      if (!node) return false
+
+      return type === 'in'
+        ? node.inputs[Number(slotId)]?.link !== null
+        : !!node.outputs[Number(slotId)].links?.length
+    }, key)
+  }
 }

browser_tests/fixtures/components/ContextMenu.ts

@@ -6,12 +6,16 @@ export class ContextMenu {
   public readonly litegraphMenu: Locator
   public readonly litegraphContextMenu: Locator
   public readonly menuItems: Locator
+  protected readonly anyMenu: Locator
 
   constructor(public readonly page: Page) {
     this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
     this.litegraphMenu = page.locator('.litemenu')
     this.litegraphContextMenu = page.locator('.litecontextmenu')
     this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
+    this.anyMenu = this.primeVueMenu
+      .or(this.litegraphMenu)
+      .or(this.litegraphContextMenu)
   }
 
   async clickMenuItem(name: string): Promise<void> {
@@ -36,16 +40,7 @@ export class ContextMenu {
   }
 
   async isVisible(): Promise<boolean> {
-    const primeVueVisible = await this.primeVueMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphVisible = await this.litegraphMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphContextVisible = await this.litegraphContextMenu
-      .isVisible()
-      .catch(() => false)
-    return primeVueVisible || litegraphVisible || litegraphContextVisible
+    return await this.anyMenu.isVisible()
   }
 
   async assertHasItems(items: string[]): Promise<void> {
@@ -58,7 +53,7 @@ export class ContextMenu {
 
   async openFor(locator: Locator): Promise<this> {
     await locator.click({ button: 'right' })
-    await expect.poll(() => this.isVisible()).toBe(true)
+    await expect(this.anyMenu).toBeVisible()
     return this
   }
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -95,6 +95,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
   public readonly allTab: Locator
   public readonly blueprintsTab: Locator
   public readonly sortButton: Locator
+  public readonly nodePreview: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'node-library')
@@ -103,6 +104,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
     this.allTab = this.getTab('All')
     this.blueprintsTab = this.getTab('Blueprints')
     this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
+    this.nodePreview = page.getByTestId(TestIds.sidebar.nodePreviewCard)
   }
 
   getTab(name: string) {
@@ -384,11 +386,14 @@ export class AssetsSidebarTab extends SidebarTab {
     return this.page.locator('.p-contextmenu').getByText(label)
   }
 
-  override async open() {
+  override async open({ waitForAssets = true } = {}) {
     // Remove any toast notifications that may overlay the sidebar button
     await this.dismissToasts()
     await super.open()
     await this.generatedTab.waitFor({ state: 'visible' })
+    if (waitForAssets) {
+      await this.waitForAssets()
+    }
   }
 
   /** Dismiss all visible toast notifications by clicking their close buttons. */

browser_tests/fixtures/components/SubgraphEditor.ts

@@ -0,0 +1,81 @@
+import type { Locator } from '@playwright/test'
+
+import { comfyExpect as expect } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
+
+export class SubgraphEditor {
+  public readonly root: Locator
+  public readonly promotionItems: Locator
+
+  constructor(protected readonly comfyPage: ComfyPage) {
+    this.root = this.comfyPage.menu.propertiesPanel.root
+    this.promotionItems = this.root.getByTestId(
+      TestIds.subgraphEditor.widgetItem
+    )
+  }
+
+  async open(subgraphNode: Locator) {
+    await new VueNodeFixture(subgraphNode).select()
+    const menu = await this.comfyPage.contextMenu.openFor(subgraphNode)
+    await menu.clickMenuItemExact('Edit Subgraph Widgets')
+    await expect(this.root, 'Open Properties Panel').toBeVisible()
+  }
+
+  resolveItem(options: {
+    nodeName?: string
+    nodeId?: string
+    widgetName: string
+  }): Locator {
+    const nodeItems =
+      options.nodeId !== undefined
+        ? this.comfyPage.page.locator(`[data-nodeid="${options.nodeId}"]`)
+        : options.nodeName !== undefined
+          ? this.promotionItems.filter({
+              has: this.comfyPage.page
+                .getByTestId(TestIds.subgraphEditor.nodeName)
+                .filter({ hasText: options.nodeName })
+            })
+          : this.promotionItems
+
+    return nodeItems.filter({
+      has: this.comfyPage.page
+        .getByTestId(TestIds.subgraphEditor.widgetLabel)
+        .filter({ hasText: options.widgetName })
+    })
+  }
+
+  getToggleButton(item: Locator) {
+    return item.getByTestId(TestIds.subgraphEditor.widgetToggle)
+  }
+
+  async togglePromotionOnItem(item: Locator, toState?: boolean) {
+    const toggleIcon = item.getByTestId(TestIds.subgraphEditor.iconEye)
+    if (toState !== undefined) {
+      const expectedIcon = `icon-[lucide--eye${toState ? '-off' : ''}]`
+      await expect(toggleIcon).toContainClass(expectedIcon)
+    }
+    await toggleIcon.click()
+  }
+
+  async togglePromotion(
+    subgraphNode: Locator,
+    options: {
+      nodeName?: string
+      nodeId?: string
+      widgetName: string
+      toState?: boolean
+    }
+  ) {
+    await this.open(subgraphNode)
+
+    const item = this.resolveItem(options)
+    await this.togglePromotionOnItem(item, options.toState)
+  }
+  async dragItem(fromIndex: number, toIndex: number) {
+    await dragByIndex(this.promotionItems, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -2,34 +2,7 @@ import type { Locator, Page } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-
-/**
- * Drag an element from one index to another within a list of locators.
- * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
- *
- * DraggableList toggles position when the dragged item's center crosses
- * past an idle item's center. To reliably land at the target position,
- * we overshoot slightly past the target's far edge.
- */
-async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
-  const fromBox = await items.nth(fromIndex).boundingBox()
-  const toBox = await items.nth(toIndex).boundingBox()
-  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
-
-  const draggingDown = toIndex > fromIndex
-  const targetY = draggingDown
-    ? toBox.y + toBox.height * 0.9
-    : toBox.y + toBox.height * 0.1
-
-  const page = items.page()
-  await page.mouse.move(
-    fromBox.x + fromBox.width / 2,
-    fromBox.y + fromBox.height / 2
-  )
-  await page.mouse.down()
-  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
-  await page.mouse.up()
-}
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'
 
 export class BuilderSelectHelper {
   /** All IoItem locators in the current step sidebar. */

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -6,6 +6,71 @@ import type { Locator, Page } from '@playwright/test'
 import type { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
 import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
 
+function readFilePayload(filePath: string) {
+  const buffer = readFileSync(filePath)
+  const bufferArray = [...new Uint8Array(buffer)]
+  const fileName = basename(filePath)
+  const fileType = getMimeType(fileName)
+
+  return { bufferArray, fileName, fileType }
+}
+
+async function dispatchFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    const file = new File([new Uint8Array(bufferArray)], fileName, {
+      type: fileType
+    })
+    const dataTransfer = new DataTransfer()
+    dataTransfer.items.add(file)
+
+    const target = document.activeElement ?? document
+    target.dispatchEvent(
+      new ClipboardEvent('paste', {
+        clipboardData: dataTransfer,
+        bubbles: true,
+        cancelable: true
+      })
+    )
+  }, payload)
+}
+
+async function interceptNextFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    document.addEventListener(
+      'paste',
+      (e: ClipboardEvent) => {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        const file = new File([new Uint8Array(bufferArray)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        document.dispatchEvent(
+          new ClipboardEvent('paste', {
+            clipboardData: dataTransfer,
+            bubbles: true,
+            cancelable: true
+          })
+        )
+      },
+      { capture: true, once: true }
+    )
+  }, payload)
+}
+
+type PasteFileOptions = {
+  mode?: 'keyboard' | 'direct'
+}
+
 export class ClipboardHelper {
   constructor(
     private readonly keyboard: KeyboardHelper,
@@ -20,43 +85,20 @@ export class ClipboardHelper {
     await this.keyboard.ctrlSend('KeyV', locator ?? null)
   }
 
-  async pasteFile(filePath: string): Promise<void> {
-    const buffer = readFileSync(filePath)
-    const bufferArray = [...new Uint8Array(buffer)]
-    const fileName = basename(filePath)
-    const fileType = getMimeType(fileName)
+  async pasteFile(
+    filePath: string,
+    { mode = 'keyboard' }: PasteFileOptions = {}
+  ): Promise<void> {
+    const payload = readFilePayload(filePath)
 
-    // Register a one-time capturing-phase listener that intercepts the next
-    // paste event and injects file data onto clipboardData.
-    await this.page.evaluate(
-      ({ bufferArray, fileName, fileType }) => {
-        document.addEventListener(
-          'paste',
-          (e: ClipboardEvent) => {
-            e.preventDefault()
-            e.stopImmediatePropagation()
+    if (mode === 'keyboard') {
+      await interceptNextFilePaste(this.page, payload)
+      await this.paste()
+      return
+    }
 
-            const file = new File([new Uint8Array(bufferArray)], fileName, {
-              type: fileType
-            })
-            const dataTransfer = new DataTransfer()
-            dataTransfer.items.add(file)
-
-            const syntheticEvent = new ClipboardEvent('paste', {
-              clipboardData: dataTransfer,
-              bubbles: true,
-              cancelable: true
-            })
-            document.dispatchEvent(syntheticEvent)
-          },
-          { capture: true, once: true }
-        )
-      },
-      { bufferArray, fileName, fileType }
-    )
-
-    // Trigger a real Ctrl+V keystroke — the capturing listener above will
-    // intercept it and re-dispatch with file data attached.
-    await this.paste()
+    // Browser clipboard APIs cannot reliably seed arbitrary files in tests.
+    // Dispatch the app-level paste event with file clipboardData directly.
+    await dispatchFilePaste(this.page, payload)
   }
 }

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -9,12 +9,17 @@ import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyW
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { SubgraphEditor } from '@e2e/fixtures/components/SubgraphEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 import { SubgraphSlotReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 export class SubgraphHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  public readonly editor: SubgraphEditor
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.editor = new SubgraphEditor(comfyPage)
+  }
 
   private get page(): Page {
     return this.comfyPage.page
@@ -327,6 +332,23 @@ export class SubgraphHelper {
     await this.comfyPage.nextFrame()
   }
 
+  async promoteWidget(nodeLocator: Locator, widgetName: string): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openFor(widget)
+      .then((m) => m.clickMenuItemExact(`Promote Widget: ${widgetName}`))
+  }
+
+  async unpromoteWidget(
+    nodeLocator: Locator,
+    widgetName: string
+  ): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openFor(widget)
+      .then((m) => m.clickMenuItemExact(`Un-Promote Widget: ${widgetName}`))
+  }
+
   async isInSubgraph(): Promise<boolean> {
     return this.page.evaluate(() => {
       const graph = window.app!.canvas.graph

browser_tests/fixtures/helpers/ToastHelper.ts

@@ -4,10 +4,16 @@ import type { Locator, Page } from '@playwright/test'
 export class ToastHelper {
   public readonly visibleToasts: Locator
   public readonly toastErrors: Locator
+  public readonly toastSuccesses: Locator
+  public readonly toastWarnings: Locator
 
   constructor(private readonly page: Page) {
     this.visibleToasts = page.locator('.p-toast-message:visible')
     this.toastErrors = page.locator('.p-toast-message.p-toast-message-error')
+    this.toastSuccesses = page.locator(
+      '.p-toast-message.p-toast-message-success'
+    )
+    this.toastWarnings = page.locator('.p-toast-message.p-toast-message-warn')
   }
 
   async closeToasts(requireCount = 0): Promise<void> {

browser_tests/fixtures/selectors.ts

@@ -8,6 +8,7 @@ export const TestIds = {
     toolbar: 'side-toolbar',
     nodeLibrary: 'node-library-tree',
     nodeLibrarySearch: 'node-library-search',
+    nodePreviewCard: 'node-preview-card',
     workflows: 'workflows-sidebar',
     modeToggle: 'mode-toggle'
   },
@@ -103,14 +104,16 @@ export const TestIds = {
     errorsTab: 'panel-tab-errors'
   },
   subgraphEditor: {
-    toggle: 'subgraph-editor-toggle',
-    shownSection: 'subgraph-editor-shown-section',
     hiddenSection: 'subgraph-editor-hidden-section',
-    widgetToggle: 'subgraph-widget-toggle',
-    widgetLabel: 'subgraph-widget-label',
-    iconLink: 'icon-link',
     iconEye: 'icon-eye',
-    widgetActionsMenuButton: 'widget-actions-menu-button'
+    iconLink: 'icon-link',
+    nodeName: 'subgraph-widget-node-name',
+    shownSection: 'subgraph-editor-shown-section',
+    toggle: 'subgraph-editor-toggle',
+    widgetActionsMenuButton: 'widget-actions-menu-button',
+    widgetItem: 'subgraph-widget-item',
+    widgetLabel: 'subgraph-widget-label',
+    widgetToggle: 'subgraph-widget-toggle'
   },
   node: {
     titleInput: 'node-title-input',

browser_tests/fixtures/utils/dragAndDrop.ts

@@ -0,0 +1,33 @@
+import type { Locator } from '@playwright/test'
+
+/**
+ * Drag an element from one index to another within a list of locators.
+ * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
+ *
+ * DraggableList toggles position when the dragged item's center crosses
+ * past an idle item's center. To reliably land at the target position,
+ * we overshoot slightly past the target's far edge.
+ */
+export async function dragByIndex(
+  items: Locator,
+  fromIndex: number,
+  toIndex: number
+) {
+  const fromBox = await items.nth(fromIndex).boundingBox()
+  const toBox = await items.nth(toIndex).boundingBox()
+  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
+
+  const draggingDown = toIndex > fromIndex
+  const targetY = draggingDown
+    ? toBox.y + toBox.height * 0.9
+    : toBox.y + toBox.height * 0.1
+
+  const page = items.page()
+  await page.mouse.move(
+    fromBox.x + fromBox.width / 2,
+    fromBox.y + fromBox.height / 2
+  )
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
+  await page.mouse.up()
+}

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -15,6 +15,7 @@ export class VueNodeFixture {
   public readonly root: Locator
   public readonly widgets: Locator
   public readonly imagePreview: Locator
+  public readonly content: Locator
 
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
@@ -27,6 +28,7 @@ export class VueNodeFixture {
     this.root = locator
     this.widgets = this.locator.locator('.lg-node-widget')
     this.imagePreview = locator.locator('.image-preview')
+    this.content = locator.locator('.lg-node-content')
   }
 
   async getTitle(): Promise<string> {
@@ -39,6 +41,10 @@ export class VueNodeFixture {
     await this.titleEditor.setTitle(value)
   }
 
+  async select() {
+    await this.header.click()
+  }
+
   async toggleCollapse(): Promise<void> {
     await this.collapseButton.click()
   }
@@ -60,4 +66,15 @@ export class VueNodeFixture {
   boundingBox(): ReturnType<Locator['boundingBox']> {
     return this.locator.boundingBox()
   }
+
+  getSlot(nameOrLocator: string | Locator) {
+    const slotLocators = this.root
+      .getByTestId('node-widget')
+      .or(this.root.locator('.lg-slot'))
+    const filteredLocator =
+      typeof nameOrLocator === 'string'
+        ? slotLocators.filter({ hasText: nameOrLocator })
+        : slotLocators.filter({ has: nameOrLocator })
+    return filteredLocator.getByTestId('slot-dot').locator('..')
+  }
 }

browser_tests/tests/assetDeleteClearsLoadImage.spec.ts

@@ -0,0 +1,199 @@
+/**
+ * FE-230: Deleting an asset must clear the Load Image node preview, widget
+ * value, and mark the workflow dirty.
+ *
+ * Local run (requires cloud build of the frontend):
+ *   pnpm build:cloud
+ *   pnpm exec playwright test --project=cloud \
+ *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
+ *
+ * The cloud project is required because input-asset deletion is gated on
+ * `isCloud === true` (see `useMediaAssetActions.deleteAssetApi`).
+ */
+import type { Page, Route } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_INPUT_IMAGE
+} from '@e2e/fixtures/data/assetFixtures'
+
+// The asset name must match the dropped file so that the deletion flow's
+// widget-value matching (name + `name [input]`) actually targets the same
+// value the drag-and-drop set on the Load Image widget.
+const DROPPED_FILE = 'image64x64.webp'
+const TARGET_ASSET: Asset = {
+  ...STABLE_INPUT_IMAGE,
+  name: DROPPED_FILE,
+  mime_type: 'image/webp'
+}
+const SEEDED_ASSETS: Asset[] = [STABLE_CHECKPOINT, TARGET_ASSET]
+// MediaAssetCard renders the basename without extension, so card-text
+// matching uses the stripped form.
+const TARGET_CARD_TEXT = TARGET_ASSET.name.replace(/\.[^.]+$/, '')
+
+type AssetMockApi = {
+  readonly deleteCalls: ReadonlyArray<string>
+}
+
+const assetMockByPage = new WeakMap<Page, { deleteCalls: string[] }>()
+
+function filterByTags(assets: Asset[], url: URL): Asset[] {
+  const includeTags = parseTagParam(url.searchParams.get('include_tags'))
+  const excludeTags = parseTagParam(url.searchParams.get('exclude_tags'))
+  return assets.filter(
+    (asset) =>
+      includeTags.every((tag) => (asset.tags ?? []).includes(tag)) &&
+      excludeTags.every((tag) => !(asset.tags ?? []).includes(tag))
+  )
+}
+
+function parseTagParam(value: string | null): string[] {
+  return (
+    value
+      ?.split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean) ?? []
+  )
+}
+
+// Narrow the route patterns to the cloud API endpoints we actually want to
+// intercept. Using a broader pattern (e.g. `**/assets**`) collides with the
+// cloud build's static bundle paths under `/assets/*.js` and starves the app
+// of its own JavaScript, leaving it stuck on the loading splash.
+async function registerAssetMocks(
+  page: Page,
+  assets: Asset[],
+  deleteCalls: string[]
+): Promise<void> {
+  await page.route(/\/api\/assets(?:\?.*)?$/, (route: Route) => {
+    if (route.request().method() !== 'GET') return route.fallback()
+    const url = new URL(route.request().url())
+    const filtered = filterByTags(assets, url)
+    const body: ListAssetsResponse = {
+      assets: filtered,
+      total: filtered.length,
+      has_more: false
+    }
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(body)
+    })
+  })
+
+  await page.route(/\/api\/assets\/([^/?#]+)$/, (route: Route) => {
+    const method = route.request().method()
+    const id = new URL(route.request().url()).pathname.split('/').pop() ?? ''
+    if (method === 'DELETE') {
+      deleteCalls.push(id)
+      return route.fulfill({ status: 204, body: '' })
+    }
+    if (method === 'GET') {
+      const found = assets.find((asset) => asset.id === id)
+      if (found) return route.fulfill({ status: 200, json: found })
+      return route.fulfill({ status: 404, json: { error: 'Not found' } })
+    }
+    return route.fallback()
+  })
+}
+
+const baseTest = comfyPageFixture.extend<{ assetMock: AssetMockApi }>({
+  page: async ({ page }, use) => {
+    const deleteCalls: string[] = []
+    await registerAssetMocks(page, SEEDED_ASSETS, deleteCalls)
+    assetMockByPage.set(page, { deleteCalls })
+    await use(page)
+    assetMockByPage.delete(page)
+  },
+  assetMock: async ({ page }, use) => {
+    const state = assetMockByPage.get(page)
+    if (!state) throw new Error('assetMock state missing for page')
+    await use({
+      get deleteCalls() {
+        return state.deleteCalls
+      }
+    })
+  }
+})
+
+baseTest.describe(
+  'FE-230 asset delete clears Load Image preview',
+  { tag: '@cloud' },
+  () => {
+    baseTest(
+      'deleting an input asset clears widget value, preview cache, and marks workflow modified',
+      async ({ comfyPage, assetMock }) => {
+        await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+
+        // Drive the production drag-and-drop flow to point the Load Image
+        // widget at the asset we are about to delete and populate the preview
+        // cache. FE-230 is asserting that the deletion tears these down.
+        const loadImageNode = (
+          await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+        )[0]
+        const { x, y } = await loadImageNode.getPosition()
+        await comfyPage.dragDrop.dragAndDropFile(DROPPED_FILE, {
+          dropPosition: { x, y },
+          waitForUpload: true
+        })
+        const imageWidget = await loadImageNode.getWidget(0)
+        await expect.poll(() => imageWidget.getValue()).toBe(DROPPED_FILE)
+
+        // Re-baseline the change tracker so the deletion-side mutation is the
+        // only thing that can flip `isModified` later.
+        await comfyPage.page.evaluate(() => {
+          const tracker =
+            window.app?.extensionManager?.workflow?.activeWorkflow
+              ?.changeTracker
+          tracker?.reset?.()
+        })
+        await expect
+          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+          .toBe(false)
+
+        // Drive the real production flow: assets sidebar → Imported tab →
+        // right-click asset card → Delete → confirm dialog.
+        const sidebar = comfyPage.menu.assetsTab
+        // The default `open()` waits for assets on the Generated tab; we seed
+        // only an input asset, so skip that wait and let `waitForAssets(1)`
+        // gate on the Imported tab instead.
+        await sidebar.open({ waitForAssets: false })
+        await sidebar.switchToImported()
+        await sidebar.waitForAssets(1)
+        await sidebar.rightClickAsset(TARGET_CARD_TEXT)
+
+        const deleteMenuItem = sidebar.contextMenuItem('Delete')
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+
+        await comfyPage.confirmDialog.click('delete')
+
+        // Mocked DELETE was issued.
+        await expect
+          .poll(() => assetMock.deleteCalls.includes(TARGET_ASSET.id))
+          .toBe(true)
+
+        // Widget value was cleared.
+        await expect.poll(() => imageWidget.getValue()).toBe('')
+
+        // Preview cache was cleared.
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate((nodeId) => {
+              const node = window.app!.graph.getNodeById(nodeId)
+              return node?.imgs?.length ?? 0
+            }, loadImageNode.id)
+          )
+          .toBe(0)
+
+        // Workflow was marked dirty by changeTracker.captureCanvasState().
+        await expect
+          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+          .toBe(true)
+      }
+    )
+  }
+)

browser_tests/tests/customNodeLocales.spec.ts

@@ -0,0 +1,101 @@
+import type { Page } from '@playwright/test'
+
+import type { CustomNodesI18n } from '@/schemas/apiSchema'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+
+const NODE_TYPE = 'DevToolsNodeWithStringInput'
+const LOCALIZED_ZH = '本地化字符串输入 (ZH)'
+const LOCALIZED_ZH_TW = '本地化字串輸入 (ZH-TW)'
+const LOCALIZED_EN = 'Localized String Input (EN)'
+
+async function routeCustomNodesI18n(page: Page, body: CustomNodesI18n) {
+  await page.route('**/api/i18n', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(body)
+    })
+  })
+}
+
+test.describe(
+  'Custom node locales loading',
+  { tag: ['@ui', '@vue-nodes'] },
+  () => {
+    test.describe('shipped base tag', () => {
+      test.use({ initialSettings: { 'Comfy.Locale': 'zh' } })
+
+      test.beforeEach(async ({ page }) => {
+        await routeCustomNodesI18n(page, {
+          zh: { nodeDefs: { [NODE_TYPE]: { display_name: LOCALIZED_ZH } } }
+        })
+      })
+
+      // Regression test for PR #7214 (issue #7025): custom-node i18n data was
+      // clobbered when a non-English locale was lazily loaded, so nodes from
+      // custom packs lost their translated display_name on locale switch.
+      test('preserves custom-node /api/i18n translation through lazy locale load', async ({
+        comfyPage
+      }) => {
+        await comfyPage.nodeOps.addNode(NODE_TYPE)
+
+        await expect(
+          comfyPage.vueNodes.getNodeByTitle(LOCALIZED_ZH)
+        ).toHaveCount(1)
+      })
+    })
+
+    test.describe('unsupported tag clamps to en', () => {
+      // Regression test for PR #11712 (issue #10563): when Comfy.Locale holds
+      // an unsupported tag, the boundary helper clamps it to 'en'. Custom-node
+      // 'en' translations must still merge into the active locale messages.
+      test.use({ initialSettings: { 'Comfy.Locale': 'de' } })
+
+      test.beforeEach(async ({ page }) => {
+        await routeCustomNodesI18n(page, {
+          en: { nodeDefs: { [NODE_TYPE]: { display_name: LOCALIZED_EN } } }
+        })
+      })
+
+      test('renders en custom-node translation when locale clamps to en', async ({
+        comfyPage
+      }) => {
+        await comfyPage.nodeOps.addNode(NODE_TYPE)
+
+        await expect(
+          comfyPage.vueNodes.getNodeByTitle(LOCALIZED_EN)
+        ).toHaveCount(1)
+      })
+    })
+
+    test.describe('regional tag preserved', () => {
+      // Regression test for PR #11712: full-tag match must beat base-tag
+      // fallback, so a shipped regional tag like 'zh-TW' is not collapsed to
+      // its base ('zh'). Both keys are present in the payload — the active
+      // locale must merge the regional variant.
+      test.use({ initialSettings: { 'Comfy.Locale': 'zh-TW' } })
+
+      test.beforeEach(async ({ page }) => {
+        await routeCustomNodesI18n(page, {
+          zh: { nodeDefs: { [NODE_TYPE]: { display_name: LOCALIZED_ZH } } },
+          'zh-TW': {
+            nodeDefs: { [NODE_TYPE]: { display_name: LOCALIZED_ZH_TW } }
+          }
+        })
+      })
+
+      test('uses zh-TW custom-node translation, not zh base-tag fallback', async ({
+        comfyPage
+      }) => {
+        await comfyPage.nodeOps.addNode(NODE_TYPE)
+
+        await expect(
+          comfyPage.vueNodes.getNodeByTitle(LOCALIZED_ZH_TW)
+        ).toHaveCount(1)
+      })
+    })
+  }
+)

browser_tests/tests/dialog.spec.ts

@@ -247,6 +247,14 @@ test.describe('Cloud notification dialog', () => {
     await dialog.back.click()
     await expect(dialog.root).toBeHidden()
   })
+
+  test('Should not advertise free monthly credits', async ({ comfyPage }) => {
+    const dialog = new CloudNotification(comfyPage.page)
+    await dialog.open()
+
+    await expect(dialog.root.getByText(/Free Credits/i)).toHaveCount(0)
+    await expect(dialog.root.getByText(/400/)).toHaveCount(0)
+  })
 })
 
 test('Blueprint overwrite', { tag: ['@subgraph'] }, async ({ comfyPage }) => {

browser_tests/tests/i18nLocaleFallback.spec.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+// Regression test for https://github.com/Comfy-Org/ComfyUI_frontend/issues/10563
+//
+// Pins the end-to-end cascade through createI18n + coreSettings defaultValue +
+// GraphView watchEffect: when navigator.language base tag is unsupported (e.g.
+// 'de-DE') and Comfy.Locale is unset (fresh-install state), sidebar labels
+// must render translated strings, not literal i18n keys like
+// 'sideToolbar.labels.assets'.
+test.describe('i18n locale fallback', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.page.addInitScript(() => {
+      Object.defineProperty(navigator, 'language', {
+        value: 'de-DE',
+        configurable: true
+      })
+      Object.defineProperty(navigator, 'languages', {
+        value: ['de-DE', 'de'],
+        configurable: true
+      })
+    })
+    // Default sidebar size on small viewports hides labels; force normal so
+    // .side-bar-button-label is rendered for the assertion.
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+    await comfyPage.page.reload()
+    await comfyPage.waitForAppReady()
+  })
+
+  test('sidebar labels render translated strings, not raw i18n keys', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+    await page.setViewportSize({ width: 1920, height: 1080 })
+
+    const labelTexts = await page
+      .getByTestId('side-toolbar')
+      .locator('.side-bar-button-label')
+      .allTextContents()
+
+    expect(labelTexts.length).toBeGreaterThan(0)
+    for (const text of labelTexts) {
+      expect(text).not.toContain('sideToolbar.labels')
+    }
+  })
+})

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -74,6 +74,90 @@ test.describe(
       })
     })
 
+    test.describe('Image without workflow', () => {
+      test('places LoadImage at the drop cursor when graph_mouse is stale', async ({
+        comfyPage
+      }) => {
+        await comfyPage.nodeOps.clearGraph()
+        await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+        await comfyPage.page.evaluate(() => {
+          window.app!.canvas.graph_mouse[0] = -9999
+          window.app!.canvas.graph_mouse[1] = -9999
+        })
+
+        const dropPosition = { x: 480, y: 320 }
+        await comfyPage.dragDrop.dragAndDropFile('image32x32.webp', {
+          dropPosition,
+          waitForUpload: true
+        })
+
+        await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+
+        const { nodePos, expectedPos } = await comfyPage.page.evaluate(
+          (drop) => {
+            const canvas = window.app!.canvas
+            const expected = canvas.convertEventToCanvasOffset(
+              new MouseEvent('drop', {
+                clientX: drop.x,
+                clientY: drop.y
+              })
+            ) as [number, number]
+            const node = window.app!.graph.nodes[0]
+            return {
+              nodePos: [node.pos[0], node.pos[1]] as [number, number],
+              expectedPos: expected
+            }
+          },
+          dropPosition
+        )
+
+        expect(nodePos[0]).toBeCloseTo(expectedPos[0], 0)
+        expect(nodePos[1]).toBeCloseTo(expectedPos[1], 0)
+        expect(nodePos[0]).not.toBe(-9999)
+        expect(nodePos[1]).not.toBe(-9999)
+      })
+
+      test('places LoadImage above existing nodes (zIndex)', async ({
+        comfyPage
+      }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const initialNodeIds = await comfyPage.vueNodes.getNodeIds()
+        expect(initialNodeIds.length).toBeGreaterThan(0)
+
+        await comfyPage.dragDrop.dragAndDropFile('image32x32.webp', {
+          dropPosition: { x: 540, y: 380 },
+          waitForUpload: true
+        })
+
+        await expect
+          .poll(() => comfyPage.vueNodes.getNodeCount())
+          .toBe(initialNodeIds.length + 1)
+
+        const newNodeIds = await comfyPage.vueNodes.getNodeIds()
+        const addedNodeId = newNodeIds.find(
+          (id) => !initialNodeIds.includes(id)
+        )
+        expect(addedNodeId).toBeDefined()
+
+        const newNodeZ = await comfyPage.vueNodes
+          .getNodeLocator(addedNodeId!)
+          .evaluate((el) => Number((el as HTMLElement).style.zIndex))
+
+        const existingZIndexes = await comfyPage.vueNodes.nodes.evaluateAll(
+          (els, id) =>
+            els
+              .filter((el) => el.getAttribute('data-node-id') !== id)
+              .map((el) => Number((el as HTMLElement).style.zIndex)),
+          addedNodeId!
+        )
+
+        expect(newNodeZ).toBeGreaterThan(Math.max(0, ...existingZIndexes))
+      })
+    })
+
     test('Load workflow from URL dropped onto Vue node', async ({
       comfyPage
     }) => {

browser_tests/tests/metadataWorkflowImport.spec.ts

@@ -25,6 +25,21 @@ const FIXTURES: readonly MetadataFixture[] = [
   { fileName: 'with_metadata.webm', parser: 'ebml (webm)' }
 ] as const
 
+// NaN-variant fixtures embed only an API-format prompt containing bare
+// `NaN`/`Infinity` tokens (Python's `json.dumps` default). The loader must
+// tolerate Python generated JSON for these to import successfully.
+const NAN_FIXTURES: readonly MetadataFixture[] = [
+  { fileName: 'with_nan_metadata.json', parser: 'json' },
+  { fileName: 'with_nan_metadata.png', parser: 'png' },
+  { fileName: 'with_nan_metadata.avif', parser: 'avif' },
+  { fileName: 'with_nan_metadata.webp', parser: 'webp' },
+  { fileName: 'with_nan_metadata.flac', parser: 'flac' },
+  { fileName: 'with_nan_metadata.mp3', parser: 'mp3' },
+  { fileName: 'with_nan_metadata.opus', parser: 'ogg' },
+  { fileName: 'with_nan_metadata.mp4', parser: 'isobmff' },
+  { fileName: 'with_nan_metadata.webm', parser: 'ebml (webm)' }
+] as const
+
 test.describe(
   'Metadata drop-to-load workflow import',
   { tag: ['@workflow'] },
@@ -58,5 +73,42 @@ test.describe(
         })
       })
     }
+
+    for (const { fileName, parser } of NAN_FIXTURES) {
+      test(`loads Python JSON prompt with NaN/Infinity from ${fileName} (${parser})`, async ({
+        comfyPage
+      }) => {
+        await test.step(`drop ${fileName} on canvas`, async () => {
+          await comfyPage.dragDrop.dragAndDropFilePath(
+            metadataFixturePath(fileName)
+          )
+        })
+
+        await test.step('graph contains only the embedded KSampler', async () => {
+          await expect
+            .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+            .toBe(1)
+
+          const ksamplers =
+            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+          expect(
+            ksamplers,
+            'exactly one KSampler should have been loaded from the NaN-laden prompt'
+          ).toHaveLength(1)
+        })
+
+        await test.step('NaN-coerced widget values are 0', async () => {
+          const [ksampler] =
+            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+          for (const widgetName of ['cfg', 'denoise']) {
+            const widget = await ksampler.getWidgetByName(widgetName)
+            expect(
+              await widget.getValue(),
+              `${widgetName} should be 0 after NaN coercion to null`
+            ).toBe(0)
+          }
+        })
+      })
+    }
   }
 )

browser_tests/tests/painter.spec.ts

@@ -549,7 +549,7 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       expect(uploadCount, 'should upload exactly once').toBe(1)
     })
 
-    test('Empty canvas does not upload on serialization', async ({
+    test('Empty canvas uploads a transparent placeholder on serialization', async ({
       comfyPage
     }) => {
       let uploadCount = 0
@@ -566,7 +566,10 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
 
       await triggerSerialization(comfyPage.page)
 
-      expect(uploadCount, 'empty canvas should not upload').toBe(0)
+      expect(
+        uploadCount,
+        'empty canvas should upload a transparent PNG so the backend receives a valid asset reference (Painter.execute treats painter_alpha=0 as no-mask)'
+      ).toBe(1)
     })
 
     test('Upload failure shows error toast', async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts

@@ -0,0 +1,357 @@
+import { expect, mergeTests } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+
+import {
+  assetRequestIncludesTag,
+  createCloudAssetsFixture
+} from '@e2e/fixtures/assetApiFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  createMockJob,
+  createMockJobRecords
+} from '@e2e/fixtures/utils/jobFixtures'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+
+const ossTest = mergeTests(comfyPageFixture, jobsApiMockFixture)
+const outputHash =
+  '147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png'
+const plainVideoFileName = 'plain_video.mp4'
+const graphDropPosition = { x: 500, y: 300 }
+const missingMediaUploadObservationMs = 1_000
+const missingMediaUploadPollMs = 100
+
+const cloudOutputAsset: Asset = {
+  id: 'test-output-hash-001',
+  name: 'ComfyUI_00001_.png',
+  asset_hash: outputHash,
+  size: 4_194_304,
+  mime_type: 'image/png',
+  tags: ['output'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+const cloudUploadedVideoAsset: Asset = {
+  id: 'test-uploaded-video-001',
+  name: plainVideoFileName,
+  asset_hash: plainVideoFileName,
+  size: 1_024,
+  mime_type: 'video/mp4',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+// The Cloud test app starts with a default LoadImage node. Keep that baseline
+// input resolvable so this spec only observes the media it creates.
+const cloudDefaultGraphInputAsset: Asset = {
+  id: 'test-default-input-001',
+  name: '00000000000000000000000Aexample.png',
+  asset_hash: '00000000000000000000000Aexample.png',
+  size: 1_024,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+interface CloudUploadAssetState {
+  isUploadedAssetAvailable: boolean
+}
+
+const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset])
+const cloudUploadAssetStateByPage = new WeakMap<Page, CloudUploadAssetState>()
+const cloudUploadRaceTest = comfyPageFixture.extend<{
+  markUploadedCloudAssetAvailable: () => void
+}>({
+  page: async ({ page }, use) => {
+    const state: CloudUploadAssetState = {
+      isUploadedAssetAvailable: false
+    }
+    cloudUploadAssetStateByPage.set(page, state)
+
+    const assetsRouteHandler = async (route: Route) => {
+      const allAssets = [
+        cloudDefaultGraphInputAsset,
+        ...(state.isUploadedAssetAvailable ? [cloudUploadedVideoAsset] : [])
+      ]
+      const includeTags =
+        new URL(route.request().url()).searchParams
+          .get('include_tags')
+          ?.split(',')
+          .filter(Boolean) ?? []
+      const assets = includeTags.length
+        ? allAssets.filter((asset) =>
+            asset.tags?.some((tag) => includeTags.includes(tag))
+          )
+        : allAssets
+      const response: ListAssetsResponse = {
+        assets,
+        total: assets.length,
+        has_more: false
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(response)
+      })
+    }
+
+    await page.route(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+    await use(page)
+    await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+    cloudUploadAssetStateByPage.delete(page)
+  },
+  markUploadedCloudAssetAvailable: async ({ page }, use) => {
+    await use(() => {
+      const state = cloudUploadAssetStateByPage.get(page)
+      if (state) state.isUploadedAssetAvailable = true
+    })
+  }
+})
+
+async function enableErrorsTab(comfyPage: ComfyPage) {
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
+  )
+}
+
+function getErrorOverlay(comfyPage: ComfyPage) {
+  return comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+}
+
+async function expectNoErrorsTab(comfyPage: ComfyPage) {
+  await expect(getErrorOverlay(comfyPage)).toBeHidden()
+
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+  await expect(
+    panel.root.getByTestId(TestIds.propertiesPanel.errorsTab)
+  ).toBeHidden()
+}
+
+async function delayNextUpload(comfyPage: ComfyPage) {
+  let releaseUpload!: () => void
+  let resolveUploadStarted!: () => void
+  const uploadStarted = new Promise<void>((resolve) => {
+    resolveUploadStarted = resolve
+  })
+  const release = new Promise<void>((resolve) => {
+    releaseUpload = resolve
+  })
+
+  const uploadRouteHandler = async (route: Route) => {
+    resolveUploadStarted()
+    await release
+    await route.continue()
+  }
+
+  await comfyPage.page.route('**/upload/image', uploadRouteHandler)
+
+  return {
+    waitForUploadStarted: () => uploadStarted,
+    finishUpload: async () => {
+      const uploadResponse = comfyPage.page.waitForResponse(
+        (response) =>
+          response.url().includes('/upload/image') && response.status() === 200,
+        { timeout: 10_000 }
+      )
+      releaseUpload()
+      try {
+        await uploadResponse
+      } finally {
+        await comfyPage.page.unroute('**/upload/image', uploadRouteHandler)
+      }
+    }
+  }
+}
+
+async function expectLoadVideoUploading(comfyPage: ComfyPage) {
+  await expect
+    .poll(
+      () =>
+        comfyPage.page.evaluate(() =>
+          window.app!.graph.nodes.some(
+            (node) => node.type === 'LoadVideo' && node.isUploading
+          )
+        ),
+      { timeout: 5_000 }
+    )
+    .toBe(true)
+}
+
+async function expectNoMissingMediaDuringUpload(comfyPage: ComfyPage) {
+  await comfyPage.nextFrame()
+  await comfyPage.nextFrame()
+
+  let sawErrorOverlay = false
+  const startedAt = Date.now()
+  await expect
+    .poll(
+      async () => {
+        sawErrorOverlay =
+          sawErrorOverlay || (await getErrorOverlay(comfyPage).isVisible())
+        return (
+          !sawErrorOverlay &&
+          Date.now() - startedAt >= missingMediaUploadObservationMs
+        )
+      },
+      {
+        timeout: missingMediaUploadObservationMs + missingMediaUploadPollMs * 5,
+        intervals: [missingMediaUploadPollMs]
+      }
+    )
+    .toBe(true)
+}
+
+function outputHistoryJobs() {
+  return createMockJobRecords([
+    createMockJob({
+      id: 'history-output-image',
+      preview_output: {
+        filename: 'ComfyUI_00001_.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'history-output-video',
+      preview_output: {
+        filename: 'clip.mp4',
+        subfolder: '',
+        type: 'output',
+        nodeId: '2',
+        mediaType: 'video'
+      }
+    }),
+    createMockJob({
+      id: 'history-output-audio',
+      preview_output: {
+        filename: 'sound.wav',
+        subfolder: '',
+        type: 'output',
+        nodeId: '3',
+        mediaType: 'audio'
+      }
+    })
+  ])
+}
+
+ossTest.describe(
+  'Errors tab - OSS missing media runtime sources',
+  { tag: '@ui' },
+  () => {
+    ossTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    ossTest(
+      'resolves annotated output media from job history',
+      async ({ comfyPage, jobsApi }) => {
+        await jobsApi.mockJobs(outputHistoryJobs())
+
+        await comfyPage.workflow.loadWorkflow(
+          'missing/missing_media_output_annotations'
+        )
+
+        await expectNoErrorsTab(comfyPage)
+      }
+    )
+
+    ossTest(
+      'does not surface missing media while dropped video upload is in progress',
+      async ({ comfyFiles, comfyPage }) => {
+        await comfyPage.nodeOps.clearGraph()
+        const delayedUpload = await delayNextUpload(comfyPage)
+
+        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
+          dropPosition: graphDropPosition
+        })
+        await delayedUpload.waitForUploadStarted()
+        comfyFiles.deleteAfterTest({
+          filename: plainVideoFileName,
+          type: 'input'
+        })
+
+        await expectLoadVideoUploading(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
+
+        await delayedUpload.finishUpload()
+        await expect(getErrorOverlay(comfyPage)).toBeHidden()
+      }
+    )
+  }
+)
+
+cloudOutputTest.describe(
+  'Errors tab - Cloud missing media runtime sources',
+  { tag: '@cloud' },
+  () => {
+    cloudOutputTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    cloudOutputTest(
+      'resolves compact annotated output media from output assets',
+      async ({ cloudAssetRequests, comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'missing/missing_media_cloud_output_annotation'
+        )
+
+        await expect
+          .poll(() =>
+            cloudAssetRequests.some((url) =>
+              assetRequestIncludesTag(url, 'output')
+            )
+          )
+          .toBe(true)
+        await expectNoErrorsTab(comfyPage)
+      }
+    )
+  }
+)
+
+cloudUploadRaceTest.describe(
+  'Errors tab - Cloud missing media upload race',
+  { tag: '@cloud' },
+  () => {
+    cloudUploadRaceTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    cloudUploadRaceTest(
+      'does not surface missing media while dropped video upload is in progress',
+      async ({ comfyFiles, comfyPage, markUploadedCloudAssetAvailable }) => {
+        await comfyPage.nodeOps.clearGraph()
+        const delayedUpload = await delayNextUpload(comfyPage)
+
+        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
+          dropPosition: graphDropPosition
+        })
+        await delayedUpload.waitForUploadStarted()
+        comfyFiles.deleteAfterTest({
+          filename: plainVideoFileName,
+          type: 'input'
+        })
+
+        await expectLoadVideoUploading(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
+
+        markUploadedCloudAssetAvailable()
+        await delayedUpload.finishUpload()
+        await expect(getErrorOverlay(comfyPage)).toBeHidden()
+      }
+    )
+  }
+)

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -54,14 +54,44 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       .toBe(initialCount - 1)
   })
 
-  test('info button opens properties panel', async ({ comfyPage }) => {
+  test('info button opens the right-side info tab in new menu mode', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
+    await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', false)
+
     const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
     await selectNodeWithPan(comfyPage, nodeRef)
+    await expect(comfyPage.menu.propertiesPanel.root).toBeHidden()
 
     const infoButton = comfyPage.page.getByTestId('info-button')
     await expect(infoButton).toBeVisible()
     await infoButton.click()
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+
+    const panel = comfyPage.menu.propertiesPanel.root
+    await expect(panel).toBeVisible()
+    await expect(panel.getByTestId('panel-tab-info')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+    await expect(panel).toContainText('KSampler')
+    await expect(comfyPage.menu.nodeLibraryTab.selectedTabButton).toBeHidden()
+  })
+
+  test('info button is hidden when the new menu is disabled', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    await expect(
+      comfyPage.selectionToolbox.getByTestId('info-button')
+    ).toBeHidden()
   })
 
   test('convert-to-subgraph button visible with multi-select', async ({

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -74,14 +74,16 @@ test.describe(
       throw new Error('Could not open More Options menu - popover not showing')
     }
 
-    test('opens Node Info from More Options menu', async ({ comfyPage }) => {
+    test('hides Node Info from More Options menu when the new menu is disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+
       await openMoreOptions(comfyPage)
-      const nodeInfoButton = comfyPage.page.getByText('Node Info', {
-        exact: true
+      const nodeInfoButton = comfyPage.page.getByRole('menuitem', {
+        name: 'Node Info'
       })
-      await expect(nodeInfoButton).toBeVisible()
-      await nodeInfoButton.click()
-      await comfyPage.nextFrame()
+      await expect(nodeInfoButton).toBeHidden()
     })
 
     test('changes node shape via Shape submenu', async ({ comfyPage }) => {

browser_tests/tests/sidebar/assets.spec.ts

@@ -82,6 +82,19 @@ const JOB_GAMMA_DETAIL: JobDetail = {
         }
       ]
     }
+  },
+  workflow: {
+    extra_data: {
+      extra_pnginfo: {
+        workflow: {
+          version: 0.4,
+          last_node_id: 0,
+          last_link_id: 0,
+          nodes: [],
+          links: []
+        }
+      }
+    }
   }
 }
 
@@ -112,7 +125,7 @@ test.describe('Assets sidebar - empty states', () => {
 
   test('Shows empty-state copy for generated tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
-    await tab.open()
+    await tab.open({ waitForAssets: false })
 
     await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
@@ -120,7 +133,7 @@ test.describe('Assets sidebar - empty states', () => {
 
   test('Shows empty-state copy for imported tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
-    await tab.open()
+    await tab.open({ waitForAssets: false })
     await tab.switchToImported()
 
     await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
@@ -129,7 +142,7 @@ test.describe('Assets sidebar - empty states', () => {
 
   test('No asset cards are rendered when empty', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
-    await tab.open()
+    await tab.open({ waitForAssets: false })
 
     await expect(tab.assetCards).toHaveCount(0)
   })
@@ -209,7 +222,6 @@ test.describe('Assets sidebar - grid view display', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
-    await tab.waitForAssets()
     await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
   })
 
@@ -270,7 +282,6 @@ test.describe('Assets sidebar - view mode toggle', () => {
   test('Can switch to list view via settings menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Open settings menu and select list view
     await tab.openSettingsMenu()
@@ -283,7 +294,6 @@ test.describe('Assets sidebar - view mode toggle', () => {
   test('Can switch back to grid view', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Switch to list view
     await tab.openSettingsMenu()
@@ -326,7 +336,6 @@ test.describe('Assets sidebar - search', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = await tab.assetCards.count()
 
@@ -340,7 +349,6 @@ test.describe('Assets sidebar - search', () => {
   test('Clearing search restores all assets', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = await tab.assetCards.count()
 
@@ -355,7 +363,6 @@ test.describe('Assets sidebar - search', () => {
   test('Search with no matches shows empty state', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.searchInput.fill('nonexistent_file_xyz')
     await expect(tab.assetCards).toHaveCount(0)
@@ -380,7 +387,6 @@ test.describe('Assets sidebar - selection', () => {
   test('Clicking an asset card selects it', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Click first asset card
     await tab.assetCards.first().click()
@@ -392,7 +398,6 @@ test.describe('Assets sidebar - selection', () => {
   test('Ctrl+click adds to selection', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
@@ -411,7 +416,6 @@ test.describe('Assets sidebar - selection', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Select an asset
     await tab.assetCards.first().click()
@@ -423,7 +427,6 @@ test.describe('Assets sidebar - selection', () => {
   test('Deselect all clears selection', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Select an asset
     await tab.assetCards.first().click()
@@ -441,7 +444,6 @@ test.describe('Assets sidebar - selection', () => {
   test('Selection is cleared when switching tabs', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Select an asset
     await tab.assetCards.first().click()
@@ -475,7 +477,6 @@ test.describe('Assets sidebar - context menu', () => {
   test('Right-clicking an asset shows context menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Right-click first asset
     await tab.assetCards.first().click({ button: 'right' })
@@ -490,7 +491,6 @@ test.describe('Assets sidebar - context menu', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
     await comfyPage.page
@@ -505,7 +505,6 @@ test.describe('Assets sidebar - context menu', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
     await comfyPage.page
@@ -520,7 +519,6 @@ test.describe('Assets sidebar - context menu', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
     await comfyPage.page
@@ -535,7 +533,6 @@ test.describe('Assets sidebar - context menu', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
     await comfyPage.page
@@ -550,7 +547,6 @@ test.describe('Assets sidebar - context menu', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
 
@@ -563,12 +559,79 @@ test.describe('Assets sidebar - context menu', () => {
     await expect(tab.contextMenuItem('Export workflow')).toBeVisible()
   })
 
+  test('Cancelling export-workflow filename prompt does not show an error toast', async ({
+    comfyPage
+  }) => {
+    // job-gamma is the first card; its detail carries a valid workflow so
+    // extraction succeeds and the filename prompt opens.
+    await comfyPage.assets.mockJobDetail('job-gamma', JOB_GAMMA_DETAIL)
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Export workflow').click()
+
+    const promptDialog = comfyPage.page.getByRole('dialog', {
+      name: 'Export Workflow'
+    })
+    await expect(promptDialog).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(promptDialog).toBeHidden()
+
+    await expect(comfyPage.toast.toastErrors).toBeHidden({ timeout: 1500 })
+  })
+
+  test('Confirming export-workflow prompt downloads the file and shows a success toast', async ({
+    comfyPage
+  }) => {
+    await comfyPage.assets.mockJobDetail('job-gamma', JOB_GAMMA_DETAIL)
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Export workflow').click()
+
+    const promptDialog = comfyPage.page.getByRole('dialog', {
+      name: 'Export Workflow'
+    })
+    await expect(promptDialog).toBeVisible()
+
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await promptDialog.getByRole('button', { name: 'Confirm' }).click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('abstract_art.json')
+
+    await expect(comfyPage.toast.toastSuccesses).toBeVisible()
+  })
+
+  test('Export-workflow shows a warning toast when the asset has no workflow', async ({
+    comfyPage
+  }) => {
+    // Strip the workflow field so extraction yields null and the export
+    // action returns { success: false, error: 'No workflow…' }.
+    const { workflow: _, ...detailWithoutWorkflow } = JOB_GAMMA_DETAIL
+    await comfyPage.assets.mockJobDetail('job-gamma', detailWithoutWorkflow)
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await tab.contextMenuItem('Export workflow').click()
+
+    // Filename prompt should be skipped: extraction fails before the prompt.
+    await expect(comfyPage.toast.toastWarnings).toBeVisible()
+    await expect(comfyPage.toast.toastSuccesses).toBeHidden({ timeout: 1500 })
+  })
+
   test('Bulk context menu shows when multiple assets selected', async ({
     comfyPage
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
@@ -623,7 +686,6 @@ test.describe('Assets sidebar - bulk actions', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click()
 
@@ -636,7 +698,6 @@ test.describe('Assets sidebar - bulk actions', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click()
 
@@ -647,7 +708,6 @@ test.describe('Assets sidebar - bulk actions', () => {
   test('Selection count displays correct number', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     // Select the two single-output assets (job-alpha, job-beta).
     // The count reflects total outputs, not cards — job-gamma has
@@ -676,7 +736,6 @@ cloudTest.describe('Assets sidebar - cloud exports', { tag: '@cloud' }, () => {
 
       const tab = comfyPage.menu.assetsTab
       await tab.open()
-      await tab.waitForAssets()
 
       await tab.assetCards.first().click()
       await expect(tab.downloadSelectedButton).toBeVisible()
@@ -701,7 +760,6 @@ cloudTest.describe('Assets sidebar - cloud exports', { tag: '@cloud' }, () => {
 
       const tab = comfyPage.menu.assetsTab
       await tab.open()
-      await tab.waitForAssets()
 
       await tab.assetCards
         .first()
@@ -737,7 +795,6 @@ cloudTest.describe('Assets sidebar - cloud exports', { tag: '@cloud' }, () => {
 
       const tab = comfyPage.menu.assetsTab
       await tab.open()
-      await tab.waitForAssets()
 
       await tab.assetCards.nth(1).click()
       await comfyPage.page.keyboard.down('Control')
@@ -784,7 +841,6 @@ test.describe('Assets sidebar - pagination', () => {
 
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const req = await firstRequest
     const url = new URL(req.url())
@@ -840,7 +896,6 @@ test.describe('Assets sidebar - delete confirmation', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     await tab.assetCards.first().click({ button: 'right' })
     await tab.contextMenuItem('Delete').click()
@@ -858,7 +913,6 @@ test.describe('Assets sidebar - delete confirmation', () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = await tab.assetCards.count()
 
@@ -880,7 +934,6 @@ test.describe('Assets sidebar - delete confirmation', () => {
   test('Cancelling delete preserves asset', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = await tab.assetCards.count()
 
@@ -977,7 +1030,6 @@ test.describe('Assets sidebar - media type filter', () => {
   test('Unchecking image filter hides image assets', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = tab.assetCards
     await expect(
@@ -998,7 +1050,6 @@ test.describe('Assets sidebar - media type filter', () => {
   test('Re-enabling filter restores hidden assets', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets()
 
     const initialCount = await tab.assetCards.count()
 

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -120,4 +120,13 @@ test.describe('Node library sidebar V2', () => {
     await expect(options.first()).toBeVisible()
     await expect.poll(() => options.count()).toBeGreaterThanOrEqual(2)
   })
+
+  test('Blueprint previews include description', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.blueprintsTab.click()
+
+    await tab.getNode('test blueprint').hover()
+    await expect(tab.nodePreview, 'Preview displays on hover').toBeVisible()
+    await expect(tab.nodePreview).toContainText('Inverts the image')
+  })
 })

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -607,3 +607,218 @@ test.describe(
     )
   }
 )
+
+test('Promote/Demote by Context Menu @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const ksampler = comfyPage.vueNodes.getNodeLocator('1')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.promoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(steps).toBeVisible()
+  })
+
+  await test.step('Un-promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.unpromoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(subgraphNode).toBeVisible()
+    await expect(steps).toBeHidden()
+  })
+})
+
+test('Properties panel operations @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const cfg = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'cfg')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'cfg',
+    toState: true
+  })
+  await expect(cfg, 'Promote widget').toBeVisible()
+
+  await test.step('widgets display in order promoted', async () => {
+    await expect(editor.promotionItems.first()).toContainText('steps')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'steps'
+    )
+  })
+
+  await test.step('Reorder widgets', async () => {
+    await editor.dragItem(0, 1)
+    await expect(editor.promotionItems.first()).toContainText('cfg')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'cfg'
+    )
+  })
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: false
+  })
+  await expect(steps, 'Un-promote widget').toBeHidden()
+})
+
+test('Can intermix linked and proxy @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await comfyPage.subgraph.promoteWidget(ksampler.root, 'cfg')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'linked widgets are first by default'
+  ).toHaveText('steps')
+
+  await editor.open(subgraphNode)
+
+  await editor.dragItem(0, 1)
+  await expect(
+    editor.promotionItems.first(),
+    'Swap widget order'
+  ).toContainText('cfg')
+
+  // FIXME: solve actual bug and remove the not
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'Linked widget is first on node'
+  ).not.toHaveText('cfg')
+})
+
+test('Link already promoted widget @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(steps).toHaveCount(1)
+})
+
+test('Can promote multiple previews @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
+
+  await test.step('Add and rename a Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(300, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+    const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    await loadImage.setTitle('Character Reference')
+  })
+
+  await test.step('Add a second Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(600, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+  })
+
+  await test.step('Convert both nodes to subgraph', async () => {
+    await comfyPage.canvas.focus()
+    await comfyPage.page.keyboard.press('Control+a')
+    await comfyPage.contextMenu
+      .openFor(comfyPage.vueNodes.getNodeLocator('1'))
+      .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
+  })
+
+  const { editor } = comfyPage.subgraph
+  const subgraph = await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+
+  await test.step('Promote both image previews', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+    await expect(subgraph.content).toHaveCount(1)
+
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '2',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+
+    await expect(subgraph.content).toHaveCount(2)
+  })
+  // FUTURE: Add test for re-ordering previews?
+
+  await test.step('Demote image', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: false
+    })
+    await expect(subgraph.content).toHaveCount(1)
+  })
+})
+
+test('Linked widgets can not be demoted @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await editor.open(subgraphNode)
+  const stepsItem = await editor.resolveItem({ widgetName: 'steps' })
+  await expect(editor.getToggleButton(stepsItem)).toBeDisabled()
+})