1.36.12 (#7763)

Patch version increment to 1.36.12

**Base branch:** `main`

---------

Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

.env_example

@@ -14,25 +14,25 @@ DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 # Allow dev server access from remote IP addresses.
 # If true, the vite dev server will listen on all addresses, including LAN
 # and public addresses.
-VITE_REMOTE_DEV=false
+# VITE_REMOTE_DEV=true
 
 # The directory containing the ComfyUI installation used to run Playwright tests.
 # If you aren't using a separate install for testing, point this to your regular install.
 TEST_COMFYUI_DIR=/home/ComfyUI
 
 # Whether to enable minification of the frontend code.
-ENABLE_MINIFY=true
+# ENABLE_MINIFY=true
 
 # Whether to disable proxying the `/templates` route. If true, allows you to
 # serve templates from the ComfyUI_frontend/public/templates folder (for
 # locally testing changes to templates). When false or nonexistent, the
 # templates are served via the normal method from the server's python site
 # packages.
-DISABLE_TEMPLATES_PROXY=false
+# DISABLE_TEMPLATES_PROXY=true
 
 # If playwright tests are being run via vite dev server, Vue plugins will
 # invalidate screenshots.  When `true`, vite plugins will not be loaded.
-DISABLE_VUE_PLUGINS=false
+# DISABLE_VUE_PLUGINS=true
 
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8

.github/workflows/ci-shell-validation.yaml

@@ -0,0 +1,26 @@
+# Description: Runs shellcheck on tracked shell scripts when they change
+name: "CI: Shell Validation"
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**/*.sh'
+  pull_request:
+    paths:
+      - '**/*.sh'
+
+jobs:
+  shell-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install shellcheck
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y shellcheck
+
+      - name: Run shellcheck
+        run: bash ./scripts/cicd/check-shell.sh

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

@@ -45,6 +45,7 @@ jobs:
   playwright-tests-chromium-sharded:
     needs: setup
     runs-on: ubuntu-latest
+    timeout-minutes: 60
     permissions:
       contents: read
     strategy:

.github/workflows/pr-backport.yaml

@@ -16,6 +16,10 @@ on:
         type: boolean
         default: false
 
+concurrency:
+  group: backport-${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+  cancel-in-progress: false
+
 jobs:
   backport:
     if: >
@@ -357,6 +361,42 @@ jobs:
         if: steps.filter-targets.outputs.skip != 'true' && failure() && steps.backport.outputs.failed
         env:
           GH_TOKEN: ${{ github.token }}
+          BACKPORT_AGENT_PROMPT_TEMPLATE: |
+            Backport PR #${PR_NUMBER} (${PR_URL}) to ${target}.
+            Cherry-pick merge commit ${MERGE_COMMIT} onto new branch
+            ${BACKPORT_BRANCH} from origin/${target}.
+            Resolve conflicts in: ${CONFLICTS_INLINE}.
+            For test snapshots (browser_tests/**/*-snapshots/), accept PR version if
+            changed in original PR, else keep target. For package.json versions, keep
+            target branch. For pnpm-lock.yaml, regenerate with pnpm install.
+            Ask user for non-obvious conflicts.
+            Create PR titled "[backport ${target}] <original title>" with label "backport".
+            See .github/workflows/pr-backport.yaml for workflow details.
+          COMMENT_BODY_TEMPLATE: |
+            ### ⚠️ Backport to `${target}` failed
+
+            **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
+
+            <details>
+            <summary>📄 Conflicting files</summary>
+
+            ```
+            ${CONFLICTS_BLOCK}
+            ```
+
+            </details>
+
+            <details>
+            <summary>🤖 Prompt for AI Agents</summary>
+
+            ```
+            ${AGENT_PROMPT}
+            ```
+
+            </details>
+
+            ---
+            cc @${PR_AUTHOR}
         run: |
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
@@ -379,10 +419,27 @@ jobs:
               gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
 
             elif [ "${reason}" = "conflicts" ]; then
-              # Convert comma-separated conflicts back to newlines for display
-              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
+              CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
+              SAFE_TARGET=$(echo "$target" | tr '/' '-')
+              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
+              PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
+
+              export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
+
+              # envsubst is provided by gettext-base
+              if ! command -v envsubst >/dev/null 2>&1; then
+                sudo apt-get update && sudo apt-get install -y gettext-base
+              fi
+
+              AGENT_PROMPT=$(envsubst '${PR_NUMBER} ${PR_URL} ${target} ${MERGE_COMMIT} ${BACKPORT_BRANCH} ${CONFLICTS_INLINE}' <<<"$BACKPORT_AGENT_PROMPT_TEMPLATE")
+
+              # Use fenced code block for conflicts to handle special chars in filenames
+              CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
+              MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
+
+              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
+              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
 
-              COMMENT_BODY="@${PR_AUTHOR} Backport to \`${target}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`${target}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
               gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
             fi
           done

.github/workflows/pr-update-playwright-expectations.yaml

@@ -124,12 +124,16 @@ jobs:
       - name: Stage changed snapshot files
         id: changed-snapshots
         run: |
+          set -euo pipefail
           echo "=========================================="
           echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
           echo "=========================================="
 
-          # Get list of changed snapshot files
-          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
+          # Get list of changed snapshot files (including untracked/new files)
+          changed_files=$( (
+            git diff --name-only browser_tests/ 2>/dev/null || true
+            git ls-files --others --exclude-standard browser_tests/ 2>/dev/null || true
+          ) | sort -u | grep -E '\-snapshots/' || true )
 
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
@@ -151,6 +155,11 @@ jobs:
           # Strip 'browser_tests/' prefix to avoid double nesting
           echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
+            # Skip paths that no longer exist (e.g. deletions)
+            if [ ! -f "$file" ]; then
+              echo "  → (skipped; not a file) $file"
+              continue
+            fi
             # Remove 'browser_tests/' prefix
             file_without_prefix="${file#browser_tests/}"
             # Create parent directories
@@ -261,11 +270,19 @@ jobs:
           echo "CHANGES SUMMARY"
           echo "=========================================="
           echo ""
-          echo "Changed files in browser_tests:"
-          git diff --name-only browser_tests/ | head -20 || echo "No changes"
-          echo ""
-          echo "Total changes:"
-          git diff --name-only browser_tests/ | wc -l || echo "0"
+          echo "Changed files in browser_tests (including untracked):"
+          CHANGES=$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)
+          if [ -z "$CHANGES" ]; then
+            echo "No changes"
+            echo ""
+            echo "Total changes:"
+            echo "0"
+          else
+            echo "$CHANGES" | head -50
+            echo ""
+            echo "Total changes:"
+            echo "$CHANGES" | wc -l
+          fi
 
       - name: Commit updated expectations
         id: commit
@@ -273,7 +290,7 @@ jobs:
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
 
-          if git diff --quiet browser_tests/; then
+          if [ -z "$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)" ]; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0

.github/workflows/release-biweekly-comfyui.yaml

@@ -1,12 +1,12 @@
-# Automated weekly workflow to bump ComfyUI frontend RC releases
-name: "Release: Weekly ComfyUI"
+# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
+name: "Release: Bi-weekly ComfyUI"
 
 on:
   # Schedule for Monday at 12:00 PM PST (20:00 UTC)
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering
+  # Allow manual triggering (bypasses bi-weekly check)
   workflow_dispatch:
     inputs:
       comfyui_fork:
@@ -16,7 +16,39 @@ on:
         type: string
 
 jobs:
+  check-release-week:
+    runs-on: ubuntu-latest
+    outputs:
+      is_release_week: ${{ steps.check.outputs.is_release_week }}
+    steps:
+      - name: Check if release week
+        id: check
+        run: |
+          # Anchor date: first bi-weekly release Monday
+          ANCHOR="2025-12-22"
+
+          ANCHOR_EPOCH=$(date -d "$ANCHOR" +%s)
+          NOW_EPOCH=$(date +%s)
+          WEEKS_SINCE=$(( (NOW_EPOCH - ANCHOR_EPOCH) / 604800 ))
+
+          if [ $((WEEKS_SINCE % 2)) -eq 0 ]; then
+            echo "Release week (week $WEEKS_SINCE since anchor $ANCHOR)"
+            echo "is_release_week=true" >> $GITHUB_OUTPUT
+          else
+            echo "Not a release week (week $WEEKS_SINCE since anchor $ANCHOR)"
+            echo "is_release_week=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Summary
+        run: |
+          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
+
   resolve-version:
+    needs: check-release-week
+    if: needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     outputs:
       current_version: ${{ steps.resolve.outputs.current_version }}
@@ -131,8 +163,8 @@ jobs:
           echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
 
   create-comfyui-pr:
-    needs: [resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success'
+    needs: [check-release-week, resolve-version, trigger-release-if-needed]
+    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
     runs-on: ubuntu-latest
 
     steps:
@@ -231,7 +263,7 @@ jobs:
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
 
-          # Create/update branch (reuse same branch name each week)
+          # Create/update branch (reuse same branch name each release cycle)
           BRANCH="automation/comfyui-frontend-bump"
           git checkout -B "$BRANCH"
           git add requirements.txt
@@ -243,7 +275,7 @@ jobs:
             exit 0
           fi
 
-          # Force push to fork (overwrites previous week's branch)
+          # Force push to fork (overwrites previous release cycle's branch)
           # Note: This intentionally destroys branch history to maintain a single PR
           # Any review comments or manual commits will need to be re-applied
           if ! git push -f origin "$BRANCH"; then

.github/workflows/release-version-bump.yaml

@@ -20,6 +20,13 @@ on:
         required: true
         default: 'main'
         type: string
+  schedule:
+    # 00:00 UTC ≈ 4:00 PM PST / 5:00 PM PDT on the previous calendar day
+    - cron: '0 0 * * *'
+
+concurrency:
+  group: release-version-bump
+  cancel-in-progress: true
 
 jobs:
   bump-version:
@@ -29,15 +36,99 @@ jobs:
       pull-requests: write
 
     steps:
+      - name: Prepare inputs
+        id: prepared-inputs
+        shell: bash
+        env:
+          RAW_VERSION_TYPE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version_type || '' }}
+          RAW_PRE_RELEASE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.pre_release || '' }}
+          RAW_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || '' }}
+        run: |
+          set -euo pipefail
+          VERSION_TYPE="$RAW_VERSION_TYPE"
+          PRE_RELEASE="$RAW_PRE_RELEASE"
+          TARGET_BRANCH="$RAW_BRANCH"
+
+          if [[ -z "$VERSION_TYPE" ]]; then
+            VERSION_TYPE='patch'
+          fi
+
+          if [[ -z "$TARGET_BRANCH" ]]; then
+            TARGET_BRANCH='main'
+          fi
+
+          {
+            echo "version_type=$VERSION_TYPE"
+            echo "pre_release=$PRE_RELEASE"
+            echo "branch=$TARGET_BRANCH"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: Close stale nightly version bump PRs
+        if: github.event_name == 'schedule'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ github.token }}
+          script: |
+            const prefix = 'version-bump-'
+            const closed = []
+            const prs = await github.paginate(github.rest.pulls.list, {
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              per_page: 100
+            })
+
+            for (const pr of prs) {
+              if (!pr.head?.ref?.startsWith(prefix)) {
+                continue
+              }
+
+              if (pr.user?.login !== 'github-actions[bot]') {
+                continue
+              }
+
+              // Only clean up stale nightly PRs targeting main.
+              // Adjust here if other target branches should be cleaned.
+              if (pr.base?.ref !== 'main') {
+                continue
+              }
+
+              await github.rest.pulls.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                pull_number: pr.number,
+                state: 'closed'
+              })
+
+              try {
+                await github.rest.git.deleteRef({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  ref: `heads/${pr.head.ref}`
+                })
+              } catch (error) {
+                if (![404, 422].includes(error.status)) {
+                  throw error
+                }
+              }
+
+              closed.push(pr.number)
+            }
+
+            core.info(`Closed ${closed.length} stale PR(s).`)
+
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
-          ref: ${{ github.event.inputs.branch }}
+          ref: ${{ steps.prepared-inputs.outputs.branch }}
           fetch-depth: 0
+          persist-credentials: false
 
       - name: Validate branch exists
+        env:
+          TARGET_BRANCH: ${{ steps.prepared-inputs.outputs.branch }}
         run: |
-          BRANCH="${{ github.event.inputs.branch }}"
+          BRANCH="$TARGET_BRANCH"
           if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
             echo "❌ Branch '$BRANCH' does not exist"
             echo ""
@@ -51,7 +142,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
         with:
           version: 10
 
@@ -62,16 +153,31 @@ jobs:
 
       - name: Bump version
         id: bump-version
+        env:
+          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
+          PRE_RELEASE: ${{ steps.prepared-inputs.outputs.pre_release }}
         run: |
-          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
+          set -euo pipefail
+          if [[ -n "$PRE_RELEASE" && ! "$VERSION_TYPE" =~ ^pre(major|minor|patch)$ && "$VERSION_TYPE" != "prerelease" ]]; then
+            echo "❌ pre_release was provided but version_type='$VERSION_TYPE' does not support --preid"
+            exit 1
+          fi
+          if [[ -n "$PRE_RELEASE" ]]; then
+            pnpm version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
+          else
+            pnpm version "$VERSION_TYPE" --no-git-tag-version
+          fi
+
           NEW_VERSION=$(node -p "require('./package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
 
       - name: Format PR string
         id: capitalised
+        env:
+          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
         run: |
-          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
-          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
+          CAPITALISED_TYPE="$VERSION_TYPE"
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
@@ -82,8 +188,8 @@ jobs:
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
 
-            **Base branch:** `${{ github.event.inputs.branch }}`
+            **Base branch:** `${{ steps.prepared-inputs.outputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ github.event.inputs.branch }}
+          base: ${{ steps.prepared-inputs.outputs.branch }}
           labels: |
             Release

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.npmrc

@@ -1,2 +1,3 @@
 ignore-workspace-root-check=true
 catalog-mode=prefer
+public-hoist-pattern[]=@parcel/watcher

.oxlintrc.json

@@ -2,25 +2,98 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    "components.d.ts",
-    "lint-staged.config.js",
-    "vitest.setup.ts",
+    ".nx/*",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
+    "components.d.ts",
+    "coverage/*",
+    "dist/*",
     "packages/registry-types/src/comfyRegistryTypes.ts",
+    "playwright-report/*",
     "src/extensions/core/*",
     "src/scripts/*",
     "src/types/generatedManagerTypes.ts",
-    "src/types/vue-shim.d.ts"
+    "src/types/vue-shim.d.ts",
+    "test-results/*",
+    "vitest.setup.ts"
+  ],
+  "plugins": [
+    "eslint",
+    "import",
+    "oxc",
+    "typescript",
+    "unicorn",
+    "vitest",
+    "vue"
   ],
   "rules": {
     "no-async-promise-executor": "off",
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
     "no-control-regex": "off",
     "no-eval": "off",
+    "no-redeclare": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "primevue/calendar",
+            "message": "Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from 'primevue/datepicker'"
+          },
+          {
+            "name": "primevue/dropdown",
+            "message": "Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from 'primevue/select'"
+          },
+          {
+            "name": "primevue/inputswitch",
+            "message": "InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from 'primevue/toggleswitch'"
+          },
+          {
+            "name": "primevue/overlaypanel",
+            "message": "OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from 'primevue/popover'"
+          },
+          {
+            "name": "primevue/sidebar",
+            "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
+          },
+          {
+            "name": "@/i18n--to-enable",
+            "importNames": [
+              "st",
+              "t",
+              "te",
+              "d"
+            ],
+            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
+          }
+        ]
+      }
+    ],
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
+    "import/default": "error",
+    "import/export": "error",
+    "import/namespace": "error",
+    "import/no-duplicates": "error",
+    "import/consistent-type-specifier-style": [
+      "error",
+      "prefer-top-level"
+    ],
+    "jest/expect-expect": "off",
+    "jest/no-conditional-expect": "off",
+    "jest/no-disabled-tests": "off",
+    "jest/no-standalone-expect": "off",
+    "jest/valid-title": "off",
     "typescript/no-this-alias": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
@@ -39,6 +112,18 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    "vue/no-import-compiler-macros": "error"
-  }
+    "vue/no-import-compiler-macros": "error",
+    "vue/no-dupe-keys": "error"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.{stories,test,spec}.ts",
+        "**/*.stories.vue"
+      ],
+      "rules": {
+        "no-console": "allow"
+      }
+    }
+  ]
 }

.storybook/preview.ts

@@ -9,9 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
-import '@/assets/css/style.css'
 import { i18n } from '@/i18n'
 import '@/lib/litegraph/public/css/litegraph.css'
+import '@/assets/css/style.css'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -58,6 +58,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList.remove('dark-theme')
     document.body.classList.remove('dark-theme')
   }
+  document.body.classList.add('[&_*]:!font-inter')
 
   return Story(context.args, context)
 }

.stylelintrc.json

@@ -12,6 +12,9 @@
     "declaration-property-value-no-unknown": [
       true,
       {
+        "typesSyntax": {
+          "radial-gradient()": "| <any-value>"
+        },
         "ignoreProperties": {
           "speak": ["none"],
           "app-region": ["drag", "no-drag"],
@@ -56,10 +59,7 @@
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": [
-          "theme",
-          "v-bind"
-        ]
+        "ignoreFunctions": ["theme", "v-bind"]
       }
     ]
   },

AGENTS.md

@@ -73,24 +73,6 @@ The project uses **Nx** for build orchestration and task management
   - composables `useXyz.ts`
   - Pinia stores `*Store.ts`
 
-## Testing Guidelines
-
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-- Coverage: text/json/html reporters enabled
-  - aim to cover critical logic and new features
-- Playwright:
-  - optional tags like `@mobile`, `@2x` are respected by config
-- Tests to avoid
-  - Change detector tests
-    - e.g. a test that just asserts that the defaults are certain values
-  - Tests that are dependent on non-behavioral features like utility classes or styles
-  - Redundant tests
 
 ## Commit & Pull Request Guidelines
 
@@ -161,14 +143,51 @@ The project uses **Nx** for build orchestration and task management
 14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
 15. Do not add or retain redundant comments, clean as you go
 16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. Refactoring should be used to make complex code simpler
+17. [Refactoring](https://refactoring.com/catalog/) should be used to make complex code simpler
 18. Try to minimize the surface area (exported values) of each module and composable
 19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
 20. Keep functions short and functional
 21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
 22. Avoid mutable state, prefer immutability and assignment at point of declaration
 23. Favor pure functions (especially testable ones)
-24. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+24. Do not use function expressions if it's possible to use function declarations instead
+25. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
+
+## Testing Guidelines
+
+- Frameworks:
+  - Vitest (unit/component, happy-dom)
+  - Playwright (E2E)
+- Test files:
+  - Unit/Component: `**/*.test.ts`
+  - E2E: `browser_tests/**/*.spec.ts`
+  - Litegraph Specific: `src/lib/litegraph/test/`
+
+### General
+
+1. Do not write change detector tests  
+   e.g. a test that just asserts that the defaults are certain values
+2. Do not write tests that are dependent on non-behavioral features like utility classes or styles
+3. Be parsimonious in testing, do not write redundant tests  
+   See <https://tidyfirst.substack.com/p/composable-tests>
+4. [Don’t Mock What You Don’t Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
+
+### Vitest / Unit Tests
+
+1. Do not write tests that just test the mocks  
+   Ensure that the tests fail when the code itself would behave in a way that was not expected or desired
+2. For mocking, leverage [Vitest's utilities](https://vitest.dev/guide/mocking.html) where possible
+3. Keep your module mocks contained  
+   Do not use global mutable state within the test file  
+   Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
+4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
+5. Aim for behavioral coverage of critical and new features
+
+### Playwright / Browser / E2E Tests
+
+1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
+2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
+3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
 
 ## External Resources
 
@@ -182,6 +201,7 @@ The project uses **Nx** for build orchestration and task management
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
 - Nx: <https://nx.dev/docs/reference/nx-commands>
+- [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
 ## Project Philosophy
 
@@ -195,6 +215,29 @@ The project uses **Nx** for build orchestration and task management
 - Thousands of users and extensions
 - Prioritize clean interfaces that restrict extension access
 
+### Code Review
+
+In doing a code review, you should make sure that:
+
+- The code is well-designed.
+- The functionality is good for the users of the code.
+- Any UI changes are sensible and look good.
+- Any parallel programming is done safely.
+- The code isn’t more complex than it needs to be.
+- The developer isn’t implementing things they might need in the future but don’t know they need now.
+- Code has appropriate unit tests.
+- Tests are well-designed.
+- The developer used clear names for everything.
+- Comments are clear and useful, and mostly explain why instead of what.
+- Code is appropriately documented (generally in g3doc).
+- The code conforms to our style guides.
+
+#### [Complexity](https://google.github.io/eng-practices/review/reviewer/looking-for.html#complexity)
+
+Is the CL more complex than it should be? Check this at every level of the CL—are individual lines too complex? Are functions too complex? Are classes too complex? “Too complex” usually means “can’t be understood quickly by code readers.” It can also mean “developers are likely to introduce bugs when they try to call or modify this code.”
+
+A particular type of complexity is over-engineering, where developers have made the code more generic than it needs to be, or added functionality that isn’t presently needed by the system. Reviewers should be especially vigilant about over-engineering. Encourage developers to solve the problem they know needs to be solved now, not the problem that the developer speculates might need to be solved in the future. The future problem should be solved once it arrives and you can see its actual shape and requirements in the physical universe.
+
 ## Repository Navigation
 
 - Check README files in key folders (tests-ui, browser_tests, composables, etc.)
@@ -223,3 +266,16 @@ When referencing Comfy-Org repos:
   - Always use `import { cn } from '@/utils/tailwindUtil'`
     - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
   - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value
+- NEVER use `!important` or the `!` important prefix for tailwind classes
+  - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
+
+## Agent-only rules
+
+Rules for agent-based coding tasks.
+
+### Temporary Files
+
+- Put planning documents under `/temp/plans/`
+- Put scripts used under `/temp/scripts/`
+- Put summaries of work performed under `/temp/summaries/`
+- Put TODOs and status updates under `/temp/in_progress/`

CLAUDE.md

@@ -12,7 +12,7 @@ For first-time setup, use the Claude command:
 
 This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
 
-**Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
+**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.
 
 ## Development Workflow
 

CODEOWNERS

@@ -25,6 +25,9 @@
 # Link rendering
 /src/renderer/core/canvas/links/                  @benceruleanlu
 
+# Partner Nodes
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
+
 # Node help system
 /src/utils/nodeHelpUtil.ts                        @benceruleanlu
 /src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
@@ -43,7 +46,6 @@
 # Mask Editor
 /src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
 /src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88

CONTRIBUTING.md

@@ -17,17 +17,9 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (v18 or later to build; v24 for vite dev server) and pnpm
+  - Node.js (v24) and pnpm
   - Git for version control
-  - A running ComfyUI backend instance
-  
-- **Tech Stack**:
-  - [Vue 3.5 Composition API](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
-  - [Pinia](https://pinia.vuejs.org/) for state management
-  - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
-  - litegraph.js (integrated in src/lib) for node editor
-  - [zod](https://zod.dev/) for schema validation
-  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
+  - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 
 ### Initial Setup
 
@@ -55,15 +47,18 @@ To launch ComfyUI and have it connect to your development server:
 python main.py --port 8188
 ```
 
-### Git pre-commit hooks
+If you are on Mac or a low-spec machine, you can run the server in CPU mode
 
-Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
+```bash
+python main.py --port 8188 --cpu
+```
 
 ### Dev Server
 
 - Start local ComfyUI backend at `localhost:8188`
 - Run `pnpm dev` to start the dev server
 - Run `pnpm dev:electron` to start the dev server with electron API mocked
+- Run `pnpm dev:cloud` to start the dev server against the cloud backend (instead of local ComfyUI server)
 
 #### Access dev server on touch devices
 
@@ -113,7 +108,7 @@ When you fix a bug that affects a version in feature freeze, we use an automated
 1. Create your PR fixing the bug on `main` branch as usual
 2. Before merging, add these labels to your PR:
    - `needs-backport` - triggers the automated backport workflow
-   - `1.24` - targets the `core/1.24` release candidate branch
+   - `core/1.24` - targets the `core/1.24` release candidate branch
    
 3. Merge your PR normally
 4. The automated workflow will:
@@ -145,67 +140,6 @@ This project includes `.vscode/launch.json.default` and `.vscode/settings.json.d
 
 We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
 
-### MCP Integrations
-
-#### Playwright Browser Automation
-
-The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
-
-For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
-
-##### Setup for Claude Code
-
-After installing dependencies with `pnpm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
-
-Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
-
-```
-> navigate to localhost:5173 and take a screenshot.
-   tell me the items in the menubar
-
-● I'll navigate to localhost:5173 and take a
-  screenshot to see the menubar items.
-
-● playwright:playwright_navigate (MCP)(url:       …
-                                      "http://local
-                                      host:5173")
-  ⎿  Navigated to http://localhost:5173
-
-● playwright:playwright_screenshot (MCP)(name: "lo…
-                                        alhost_5173
-                                        _menubar")
-
-  ⎿ Screenshot saved to: ../../../Downloads/localho
-    st_5173_menubar-2025-05-30T17-23-00-942Z.png
-  ⎿  Screenshot also stored in memory with name:
-     'localhost_5173_menubar'
-
-● Read(../../../Downloads/localhost_5173_menubar-2…
-      25-05-30T17-23-00-942Z.png)
-  ⎿  Read image (94.3KB)
-
-● Based on the screenshot, I can see the menubar at
-   the top of the ComfyUI interface contains the
-  following items:
-
-  Main Menubar Items:
-  - Workflow - Menu for workflow-related actions
-  - Edit - Menu for editing operations
-  - Help - Menu for help and documentation
-
-  Additional UI Elements:
-  - ComfyUI Logo - On the far left
-  - Workflow Tab - Shows "Unsaved Workflow" with a
-  dropdown and close button
-  - Layout Controls - On the far right (grid view
-  and hamburger menu icons)
-
-  The interface shows a typical ComfyUI workflow
-  graph with nodes like "Load Checkpoint", "CLIP
-  Text Encode (Prompt)", "KSampler", and "Empty
-  Latent Image" connected with colored cables.
-```
-
 ## Testing
 
 ### Unit Tests
@@ -215,7 +149,7 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
 
 ### Playwright Tests
 
-Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
+Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details. The snapshots are generated in the GH actions runner, not locally.
 
 ### Running All Tests
 
@@ -223,7 +157,6 @@ Before submitting a PR, ensure all tests pass:
 
 ```bash
 pnpm test:unit
-pnpm test:browser
 pnpm typecheck
 pnpm lint
 pnpm format
@@ -232,23 +165,32 @@ pnpm format
 ## Code Style Guidelines
 
 ### TypeScript
+
 - Use TypeScript for all new code
 - Avoid `any` types - use proper type definitions
 - Never use `@ts-expect-error` - fix the underlying type issue
 
 ### Vue 3 Patterns
+
 - Use Composition API for all components
 - Follow Vue 3.5+ patterns (props destructuring is reactive)
 - Use `<script setup>` syntax
 
 ### Styling
+
 - Use Tailwind CSS classes instead of custom CSS
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
+- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the [style.css](packages/design-system/src/css/style.css) like `bg-node-component-surface`
+
+## Design Team Approval (Required for Notable UI Changes)
+
+Changes that materially affect the default UI must be approved or requested by our design team before they can be merged. This is generally a blocking requirement and applies to internal contributors and OSS contributors alike.
 
 ### Internationalization
+
 - All user-facing strings must use vue-i18n
-- Add translations to `src/locales/en/main.json`
+- Add translations to [src/locales/en/main.json](src/locales/en/main.json)
 - Use translation keys: `const { t } = useI18n(); t('key.path')`
+- The corresponding values in other locales is generated automatically on releases, PR authors only need to edit [src/locales/en/main.json](src/locales/en/main.json)
 
 ## Icons
 
@@ -282,34 +224,12 @@ The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is
 2. Run all tests and ensure they pass
 3. Create a pull request with a clear title and description
 4. Use conventional commit format for PR titles:
-   - `[feat]` for new features
-   - `[fix]` for bug fixes
-   - `[docs]` for documentation
-   - `[refactor]` for code refactoring
-   - `[test]` for test additions/changes
-   - `[chore]` for maintenance tasks
-
-### PR Description Template
-
-```
-## Description
-Brief description of the changes
-
-## Type of Change
-- [ ] Bug fix
-- [ ] New feature
-- [ ] Breaking change
-- [ ] Documentation update
-
-## Testing
-- [ ] Unit tests pass
-- [ ] Component tests pass
-- [ ] Browser tests pass (if applicable)
-- [ ] Manual testing completed
-
-## Screenshots (if applicable)
-Add screenshots for UI changes
-```
+   - `feat:` for new features
+   - `fix:` for bug fixes
+   - `docs:` for documentation
+   - `refactor:` for code refactoring
+   - `test:` for test additions/changes
+   - `chore:` for maintenance tasks
 
 ### Review Process
 
@@ -325,4 +245,4 @@ If you have questions about contributing:
 - Ask in our [Discord](https://discord.com/invite/comfyorg)
 - Open a new issue for clarification
 
-Thank you for contributing to ComfyUI Frontend!
+Thank you for contributing to the ComfyUI Frontend!

README.md

@@ -33,11 +33,11 @@
 
 The project follows a structured release process for each minor version, consisting of three distinct phases:
 
-1. **Development Phase** - 1 week
+1. **Development Phase** - 2 weeks
    - Active development of new features
    - Code changes merged to the development branch
 
-2. **Feature Freeze** - 1 week
+2. **Feature Freeze** - 2 weeks
    - No new features accepted
    - Only bug fixes are cherry-picked to the release branch
    - Testing and stabilization of the codebase
@@ -56,16 +56,16 @@ To use the latest nightly release, add the following command line argument to yo
 ```
 
 ## Overlapping Release Cycles
-The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.
+The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously. Each feature has approximately 4 weeks from merge to ComfyUI stable release (2 weeks on main, 2 weeks frozen on RC).
 
 ### Example Release Cycle
 
 | Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
 |------|------------|-------------|-------------|-------------|----------------|
-| 1 | Mar 1-7 | Development | - | - | - |
-| 2 | Mar 8-14 | Feature Freeze | Development | - | 1.1.0 through 1.1.6 (daily) |
-| 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
-| 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
+| 1-2 | Mar 1-14 | Development | - | - | - |
+| 3-4 | Mar 15-28 | Feature Freeze | Development | - | 1.1.0 through 1.1.13 (daily) |
+| 5-6 | Mar 29-Apr 11 | Released | Feature Freeze | Development | 1.1.14+ (daily)<br>1.2.0 through 1.2.13 (daily) |
+| 7-8 | Apr 12-25 | - | Released | Feature Freeze | 1.2.14+ (daily)<br>1.3.0 through 1.3.13 (daily) |
 
 ## Release Summary
 

apps/desktop-ui/package.json

@@ -87,6 +87,8 @@
     }
   },
   "scripts": {
+    "lint": "nx run @comfyorg/desktop-ui:lint",
+    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
   },

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -40,7 +40,8 @@
 <script setup lang="ts">
 import type { PassThrough } from '@primevue/core'
 import Button from 'primevue/button'
-import Step, { type StepPassThroughOptions } from 'primevue/step'
+import Step from 'primevue/step'
+import type { StepPassThroughOptions } from 'primevue/step'
 import StepList from 'primevue/steplist'
 
 defineProps<{
@@ -50,8 +51,6 @@ defineProps<{
   canProceed: boolean
   /** Whether the location step should be disabled */
   disableLocationStep: boolean
-  /** Whether the migration step should be disabled */
-  disableMigrationStep: boolean
   /** Whether the settings step should be disabled */
   disableSettingsStep: boolean
 }>()

apps/desktop-ui/src/i18n.ts

@@ -155,12 +155,14 @@ export async function loadLocale(locale: string): Promise<void> {
 }
 
 // Only include English in the initial bundle
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
-}
+const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
 
 // Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
+type LocaleMessages = typeof enMessages
+
+const messages: Record<string, LocaleMessages> = {
+  en: enMessages
+}
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2

apps/desktop-ui/src/utils/refUtil.ts

@@ -1,5 +1,6 @@
 import { useTimeout } from '@vueuse/core'
-import { type Ref, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Vue boolean ref (writable computed) with one difference: when set to `true` it stays that way for at least {@link minDuration}.

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -29,7 +29,8 @@ import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { useRoute } from 'vue-router'
 
-import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { getDialog } from '@/constants/desktopDialogs'
+import type { DialogAction } from '@/constants/desktopDialogs'
 import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -5,7 +5,7 @@
       <img
         class="sad-girl"
         src="/assets/images/sad_girl.png"
-        alt="Sad girl illustration"
+        :alt="$t('notSupported.illustrationAlt')"
       />
 
       <div class="no-drag sad-text flex items-center">

browser_tests/assets/groups/nested-groups-1-inner-node.json

@@ -0,0 +1,92 @@
+{
+  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
+  "revision": 0,
+  "last_node_id": 17,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 17,
+      "type": "VAEDecode",
+      "pos": [
+        318.8446183157076,
+        355.3961392345528
+      ],
+      "size": [
+        225,
+        102
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 4,
+      "title": "Outer Group",
+      "bounding": [
+        -46.25245366331014,
+        -150.82497138023245,
+        1034.4034361963616,
+        1007.338460439933
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 3,
+      "title": "Inner Group",
+      "bounding": [
+        80.96059074101554,
+        28.123757436778178,
+        718.286373661183,
+        691.2397164539732
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7121393732101533,
+      "offset": [
+        289.18242848011835,
+        367.0747755524199
+      ]
+    },
+    "frontendVersion": "1.35.5",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true,
+    "workflowRendererVersion": "Vue"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json

@@ -0,0 +1,150 @@
+{
+  "id": "e0cb1d7e-5437-4911-b574-c9603dfbeaee",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "8bfe4227-f272-49e1-a892-0a972a86867c",
+      "pos": [
+        -317,
+        -336
+      ],
+      "size": [
+        210,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          [
+            "-1",
+            "batch_size"
+          ]
+        ]
+      },
+      "widgets_values": [
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "8bfe4227-f272-49e1-a892-0a972a86867c",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [
+            -562,
+            -358,
+            120,
+            60
+          ]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [
+            -52,
+            -358,
+            120,
+            40
+          ]
+        },
+        "inputs": [
+          {
+            "id": "b4a8bc2a-8e9f-41aa-938d-c567a11d2c00",
+            "name": "batch_size",
+            "type": "INT",
+            "linkIds": [
+              1
+            ],
+            "pos": [
+              -462,
+              -338
+            ]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "EmptyLatentImage",
+            "pos": [
+              -382,
+              -376
+            ],
+            "size": [
+              270,
+              106
+            ],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "batch_size",
+                "name": "batch_size",
+                "type": "INT",
+                "widget": {
+                  "name": "batch_size"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [
+              512,
+              512,
+              1
+            ]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "INT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.35.1"
+  },
+  "version": 0.4
+}

browser_tests/assets/viewport/default-viewport-saved-offscreen.json

@@ -0,0 +1,412 @@
+{
+  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
+  "revision": 0,
+  "last_node_id": 16,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [
+        60,
+        200
+      ],
+      "size": [
+        315,
+        98
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "slot_index": 0,
+          "links": [
+            1
+          ]
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "slot_index": 1,
+          "links": [
+            3,
+            5
+          ]
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "slot_index": 2,
+          "links": [
+            8
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65",
+        "models": [
+          {
+            "name": "v1-5-pruned-emaonly-fp16.safetensors",
+            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
+            "directory": "checkpoints"
+          }
+        ]
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly-fp16.safetensors"
+      ]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        870,
+        170
+      ],
+      "size": [
+        315,
+        474
+      ],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 1
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 4
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": 6
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "slot_index": 0,
+          "links": [
+            7
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65"
+      },
+      "widgets_values": [
+        685468484323813,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [
+        975,
+        700
+      ],
+      "size": [
+        210,
+        46
+      ],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": 7
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 8
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "slot_index": 0,
+          "links": []
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [
+        410,
+        410
+      ],
+      "size": [
+        425.27801513671875,
+        180.6060791015625
+      ],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 5
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "slot_index": 0,
+          "links": [
+            6
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65"
+      },
+      "widgets_values": [
+        "text, watermark"
+      ],
+      "color": "#223",
+      "bgcolor": "#335"
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [
+        520,
+        690
+      ],
+      "size": [
+        315,
+        106
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "slot_index": 0,
+          "links": [
+            2
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [
+        411.21649169921875,
+        203.68695068359375
+      ],
+      "size": [
+        422.84503173828125,
+        164.31304931640625
+      ],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 3
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "slot_index": 0,
+          "links": [
+            4
+          ]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.65"
+      },
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, purple galaxy bottle,"
+      ],
+      "color": "#232",
+      "bgcolor": "#353"
+    }
+  ],
+  "links": [
+    [
+      1,
+      4,
+      0,
+      3,
+      0,
+      "MODEL"
+    ],
+    [
+      2,
+      5,
+      0,
+      3,
+      3,
+      "LATENT"
+    ],
+    [
+      3,
+      4,
+      1,
+      6,
+      0,
+      "CLIP"
+    ],
+    [
+      4,
+      6,
+      0,
+      3,
+      1,
+      "CONDITIONING"
+    ],
+    [
+      5,
+      4,
+      1,
+      7,
+      0,
+      "CLIP"
+    ],
+    [
+      6,
+      7,
+      0,
+      3,
+      2,
+      "CONDITIONING"
+    ],
+    [
+      7,
+      3,
+      0,
+      8,
+      0,
+      "LATENT"
+    ],
+    [
+      8,
+      4,
+      2,
+      8,
+      1,
+      "VAE"
+    ]
+  ],
+  "groups": [
+    {
+      "id": 1,
+      "title": "Step 1 - Load model",
+      "bounding": [
+        50,
+        130,
+        335,
+        181.60000610351562
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 2,
+      "title": "Step 3 - Image size",
+      "bounding": [
+        510,
+        620,
+        335,
+        189.60000610351562
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 3,
+      "title": "Step 2 - Prompt",
+      "bounding": [
+        400,
+        130,
+        445.27801513671875,
+        467.2060852050781
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.44218252181616574,
+      "offset": [
+        -666.5670907104311,
+        -2227.894644048147
+      ]
+    },
+    "frontendVersion": "1.35.3",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true,
+    "workflowRendererVersion": "LG"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -13,7 +13,6 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { QueueList } from './components/QueueList'
 import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
@@ -127,6 +126,20 @@ class ConfirmDialog {
     const loc = this[locator]
     await expect(loc).toBeVisible()
     await loc.click()
+
+    // Wait for the dialog mask to disappear after confirming
+    const mask = this.page.locator('.p-dialog-mask')
+    const count = await mask.count()
+    if (count > 0) {
+      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
+    }
+
+    // Wait for workflow service to finish if it's busy
+    await this.page.waitForFunction(
+      () => window['app']?.extensionManager?.workflow?.isBusy === false,
+      undefined,
+      { timeout: 3000 }
+    )
   }
 }
 
@@ -152,7 +165,6 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
-  public readonly queueList: QueueList
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
@@ -185,7 +197,6 @@ export class ComfyPage {
     this.visibleToasts = page.locator('.p-toast-message:visible')
 
     this.searchBox = new ComfyNodeSearchBox(page)
-    this.queueList = new QueueList(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
@@ -245,6 +256,9 @@ export class ComfyPage {
     await this.page.evaluate(async () => {
       await window['app'].extensionManager.workflow.syncWorkflows()
     })
+
+    // Wait for Vue to re-render the workflow list
+    await this.nextFrame()
   }
 
   async setupUser(username: string) {
@@ -571,9 +585,15 @@ export class ComfyPage {
       fileName?: string
       url?: string
       dropPosition?: Position
+      waitForUpload?: boolean
     } = {}
   ) {
-    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
+    const {
+      dropPosition = { x: 100, y: 100 },
+      fileName,
+      url,
+      waitForUpload = false
+    } = options
 
     if (!fileName && !url)
       throw new Error('Must provide either fileName or url')
@@ -610,6 +630,14 @@ export class ComfyPage {
     // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
     if (url) evaluateParams.url = url
 
+    // Set up response waiter for file uploads before triggering the drop
+    const uploadResponsePromise = waitForUpload
+      ? this.page.waitForResponse(
+          (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+          { timeout: 10000 }
+        )
+      : null
+
     // Execute the drag and drop in the browser
     await this.page.evaluate(async (params) => {
       const dataTransfer = new DataTransfer()
@@ -676,12 +704,17 @@ export class ComfyPage {
       }
     }, evaluateParams)
 
+    // Wait for file upload to complete
+    if (uploadResponsePromise) {
+      await uploadResponsePromise
+    }
+
     await this.nextFrame()
   }
 
   async dragAndDropFile(
     fileName: string,
-    options: { dropPosition?: Position } = {}
+    options: { dropPosition?: Position; waitForUpload?: boolean } = {}
   ) {
     return this.dragAndDropExternalResource({ fileName, ...options })
   }
@@ -1620,6 +1653,55 @@ export class ComfyPage {
     }, focusMode)
     await this.nextFrame()
   }
+
+  /**
+   * Get the position of a group by title.
+   * @param title The title of the group to find
+   * @returns The group's canvas position
+   * @throws Error if group not found
+   */
+  async getGroupPosition(title: string): Promise<Position> {
+    const pos = await this.page.evaluate((title) => {
+      const groups = window['app'].graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      return { x: group.pos[0], y: group.pos[1] }
+    }, title)
+    if (!pos) throw new Error(`Group "${title}" not found`)
+    return pos
+  }
+
+  /**
+   * Drag a group by its title.
+   * @param options.name The title of the group to drag
+   * @param options.deltaX Horizontal drag distance in screen pixels
+   * @param options.deltaY Vertical drag distance in screen pixels
+   */
+  async dragGroup(options: {
+    name: string
+    deltaX: number
+    deltaY: number
+  }): Promise<void> {
+    const { name, deltaX, deltaY } = options
+    const screenPos = await this.page.evaluate((title) => {
+      const app = window['app']
+      const groups = app.graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      // Position in the title area of the group
+      const clientPos = app.canvasPosToClientPos([
+        group.pos[0] + 50,
+        group.pos[1] + 15
+      ])
+      return { x: clientPos[0], y: clientPos[1] }
+    }, name)
+    if (!screenPos) throw new Error(`Group "${name}" not found`)
+
+    await this.dragAndDrop(screenPos, {
+      x: screenPos.x + deltaX,
+      y: screenPos.y + deltaY
+    })
+  }
 }
 
 export const testComfySnapToGridGridSize = 50

browser_tests/fixtures/VueNodeHelpers.ts

@@ -160,7 +160,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').last()
+      decrementButton: widget.locator('button').nth(1)
     }
   }
 }

browser_tests/fixtures/components/QueueList.ts

@@ -1,57 +0,0 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-export class QueueList {
-  constructor(public readonly page: Page) {}
-
-  get toggleButton() {
-    return this.page.getByTestId('queue-toggle-button')
-  }
-
-  get inlineProgress() {
-    return this.page.getByTestId('queue-inline-progress')
-  }
-
-  get overlay() {
-    return this.page.getByTestId('queue-overlay')
-  }
-
-  get closeButton() {
-    return this.page.getByTestId('queue-overlay-close-button')
-  }
-
-  get jobItems() {
-    return this.page.getByTestId('queue-job-item')
-  }
-
-  get clearHistoryButton() {
-    return this.page.getByRole('button', { name: /Clear History/i })
-  }
-
-  async open() {
-    if (!(await this.overlay.isVisible())) {
-      await this.toggleButton.click()
-      await expect(this.overlay).toBeVisible()
-    }
-  }
-
-  async close() {
-    if (await this.overlay.isVisible()) {
-      await this.closeButton.click()
-      await expect(this.overlay).not.toBeVisible()
-    }
-  }
-
-  async getJobCount(state?: string) {
-    if (state) {
-      return await this.page
-        .locator(`[data-testid="queue-job-item"][data-job-state="${state}"]`)
-        .count()
-    }
-    return await this.jobItems.count()
-  }
-
-  getJobAction(actionKey: string) {
-    return this.page.getByTestId(`job-action-${actionKey}`)
-  }
-}

browser_tests/fixtures/components/SidebarTab.ts

@@ -137,6 +137,13 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
     await this.page.keyboard.type(newName)
     await this.page.keyboard.press('Enter')
+
+    // Wait for workflow service to finish renaming
+    await this.page.waitForFunction(
+      () => !window['app']?.extensionManager?.workflow?.isBusy,
+      undefined,
+      { timeout: 3000 }
+    )
   }
 
   async insertWorkflow(locator: Locator) {

browser_tests/fixtures/components/Topbar.ts

@@ -92,9 +92,26 @@ export class Topbar {
     )
     // Wait for the dialog to close.
     await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
+
+    // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
+    // If so, return early to let the test handle the confirmation
+    const confirmationDialog = this.page.locator(
+      '.p-dialog:has-text("Overwrite")'
+    )
+    if (await confirmationDialog.isVisible()) {
+      return
+    }
   }
 
   async openTopbarMenu() {
+    // If menu is already open, close it first to reset state
+    const isAlreadyOpen = await this.menuLocator.isVisible()
+    if (isAlreadyOpen) {
+      // Click outside the menu to close it properly
+      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
+      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
+    }
+
     await this.menuTrigger.click()
     await this.menuLocator.waitFor({ state: 'visible' })
     return this.menuLocator
@@ -162,15 +179,36 @@ export class Topbar {
 
     await topLevelMenu.hover()
 
+    // Hover over top-level menu with retry logic for flaky submenu appearance
+    const submenu = this.getVisibleSubmenu()
+    try {
+      await submenu.waitFor({ state: 'visible', timeout: 1000 })
+    } catch {
+      // Click outside to reset, then reopen menu
+      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
+      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
+      await this.menuTrigger.click()
+      await this.menuLocator.waitFor({ state: 'visible' })
+      // Re-hover on top-level menu to trigger submenu
+      await topLevelMenu.hover()
+      await submenu.waitFor({ state: 'visible', timeout: 1000 })
+    }
+
     let currentMenu = topLevelMenu
     for (let i = 1; i < path.length; i++) {
       const commandName = path[i]
-      const menuItem = currentMenu
-        .locator(
-          `.p-tieredmenu-submenu .p-tieredmenu-item:has-text("${commandName}")`
-        )
+      const menuItem = submenu
+        .locator(`.p-tieredmenu-item:has-text("${commandName}")`)
         .first()
       await menuItem.waitFor({ state: 'visible' })
+
+      // For the last item, click it
+      if (i === path.length - 1) {
+        await menuItem.click()
+        return
+      }
+
+      // Otherwise, hover to open nested submenu
       await menuItem.hover()
       currentMenu = menuItem
     }

browser_tests/fixtures/ws.ts

@@ -1,11 +1,7 @@
 import { test as base } from '@playwright/test'
 
-import type { StatusWsMessage } from '../../src/schemas/apiSchema'
-
-export type WsMessage = { type: 'status'; data: StatusWsMessage }
-
 export const webSocketFixture = base.extend<{
-  ws: { trigger(data: WsMessage, url?: string): Promise<void> }
+  ws: { trigger(data: any, url?: string): Promise<void> }
 }>({
   ws: [
     async ({ page }, use) => {

browser_tests/helpers/templates.ts

@@ -1,4 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 import path from 'path'
 
 import type {
@@ -8,16 +9,26 @@ import type {
 
 export class ComfyTemplates {
   readonly content: Locator
+  readonly allTemplateCards: Locator
 
   constructor(readonly page: Page) {
     this.content = page.getByTestId('template-workflows-content')
+    this.allTemplateCards = page.locator('[data-testid^="template-workflow-"]')
+  }
+
+  async waitForMinimumCardCount(count: number) {
+    return await expect(async () => {
+      const cardCount = await this.allTemplateCards.count()
+      expect(cardCount).toBeGreaterThanOrEqual(count)
+    }).toPass({
+      timeout: 1_000
+    })
   }
 
   async loadTemplate(id: string) {
-    await this.content
-      .getByTestId(`template-workflow-${id}`)
-      .getByRole('img')
-      .click()
+    const templateCard = this.content.getByTestId(`template-workflow-${id}`)
+    await templateCard.scrollIntoViewIfNeeded()
+    await templateCard.getByRole('img').click()
   }
 
   async getAllTemplates(): Promise<TemplateInfo[]> {

browser_tests/tests/actionbar.spec.ts

@@ -1,9 +1,9 @@
 import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
-import type { WsMessage } from '../fixtures/ws'
+import type { StatusWsMessage } from '../../src/schemas/apiSchema.ts'
+import { comfyPageFixture } from '../fixtures/ComfyPage.ts'
+import { webSocketFixture } from '../fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -61,7 +61,7 @@ test.describe('Actionbar', () => {
 
     // Trigger a status websocket message
     const triggerStatus = async (queueSize: number) => {
-      const message = {
+      await ws.trigger({
         type: 'status',
         data: {
           status: {
@@ -70,9 +70,7 @@ test.describe('Actionbar', () => {
             }
           }
         }
-      } satisfies WsMessage
-
-      await ws.trigger(message)
+      } as StatusWsMessage)
     }
 
     // Extract the width from the queue response

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -77,8 +77,7 @@ test.describe('Background Image Upload', () => {
 
     // Verify the URL input now has an API URL
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
-    const inputValue = await urlInput.inputValue()
-    expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
+    await expect(urlInput).toHaveValue(/^\/api\/view\?.*subfolder=backgrounds/)
 
     // Verify clear button is now enabled
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')

browser_tests/tests/execution.spec.ts

@@ -36,9 +36,10 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
-
-    expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-    expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
-    expect(await (await output2.getWidget(0)).getValue()).toBe('')
+    await expect(async () => {
+      expect(await (await input.getWidget(0)).getValue()).toBe('foo')
+      expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
+      expect(await (await output2.getWidget(0)).getValue()).toBe('')
+    }).toPass({ timeout: 2_000 })
   })
 })

browser_tests/tests/interaction.spec.ts

@@ -306,14 +306,16 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: numberWidgetPos
     })
-    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
+    const legacyPrompt = comfyPage.page.locator('.graphdialog')
+    await expect(legacyPrompt).toBeVisible()
+    await comfyPage.delay(300)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
+    await expect(legacyPrompt).toBeHidden()
   })
 
   test('Can close prompt dialog with canvas click (text widget)', async ({
@@ -327,18 +329,16 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: textWidgetPos
     })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'prompt-dialog-opened-text.png'
-    )
+    const legacyPrompt = comfyPage.page.locator('.graphdialog')
+    await expect(legacyPrompt).toBeVisible()
+    await comfyPage.delay(300)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'prompt-dialog-closed-text.png'
-    )
+    await expect(legacyPrompt).toBeHidden()
   })
 
   test('Can double click node title to edit', async ({ comfyPage }) => {

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -12,6 +12,7 @@ test.describe('Load Workflow in Media', () => {
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
+    'workflow_prompt_parameters.png',
     'workflow.webm',
     // Skipped due to 3d widget unstable visual result.
     // 3d widget shows grid after fully loaded.

browser_tests/tests/mobileBaseline.spec.ts

@@ -0,0 +1,29 @@
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { expect } from '@playwright/test'
+
+test.describe('Mobile Baseline Snapshots', () => {
+  test('@mobile empty canvas', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.ConfirmClear', false)
+    await comfyPage.executeCommand('Comfy.ClearWorkflow')
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 256 })
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
+  })
+
+  test('@mobile default workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'mobile-default-workflow.png'
+    )
+  })
+
+  test('@mobile settings dialog', async ({ comfyPage }) => {
+    await comfyPage.settingDialog.open()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.settingDialog.root).toHaveScreenshot(
+      'mobile-settings-dialog.png'
+    )
+  })
+})

browser_tests/tests/nodeHelp.spec.ts

@@ -553,12 +553,6 @@ This is English documentation.
       )
       await selectNodeWithPan(comfyPage, checkpointNodes[0])
 
-      // Click help button again
-      const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
-      )
-      await helpButton2.click()
-
       // Content should update
       await expect(helpPage).toContainText('Checkpoint Loader Help')
       await expect(helpPage).toContainText(

browser_tests/tests/nodeSearchBox.spec.ts

@@ -260,6 +260,12 @@ test.describe('Release context menu', () => {
 
   test('Can trigger on link release', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
+    const contextMenu = comfyPage.page.locator('.litecontextmenu')
+    // Wait for context menu with correct title (slot name | slot type)
+    // The title shows the output slot name and type from the disconnected link
+    await expect(contextMenu.locator('.litemenu-title')).toContainText(
+      'CLIP | CLIP'
+    )
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(

browser_tests/tests/queue/queueList.spec.ts

@@ -1,157 +0,0 @@
-import { expect, mergeTests } from '@playwright/test'
-
-import type { ComfyPage } from '../../fixtures/ComfyPage'
-import { comfyPageFixture } from '../../fixtures/ComfyPage'
-import { webSocketFixture } from '../../fixtures/ws'
-import type { WsMessage } from '../../fixtures/ws'
-
-const test = mergeTests(comfyPageFixture, webSocketFixture)
-
-type QueueState = {
-  running: QueueJob[]
-  pending: QueueJob[]
-}
-
-type QueueJob = [
-  string,
-  string,
-  Record<string, unknown>,
-  Record<string, unknown>,
-  string[]
-]
-
-type QueueController = {
-  state: QueueState
-  sync: (
-    ws: { trigger(data: WsMessage, url?: string): Promise<void> },
-    nextState: Partial<QueueState>
-  ) => Promise<void>
-}
-
-test.describe('Queue UI', () => {
-  let queue: QueueController
-
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.route('**/api/prompt', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          prompt_id: 'mock-prompt-id',
-          number: 1,
-          node_errors: {}
-        })
-      })
-    })
-
-    // Mock history to avoid pulling real data
-    await comfyPage.page.route('**/api/history**', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({ History: [] })
-      })
-    })
-
-    queue = await createQueueController(comfyPage)
-  })
-
-  test('toggles overlay and updates count from status events', async ({
-    comfyPage,
-    ws
-  }) => {
-    await queue.sync(ws, { running: [], pending: [] })
-
-    await expect(comfyPage.queueList.toggleButton).toContainText('0')
-    await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i)
-    await expect(comfyPage.queueList.overlay).toBeHidden()
-
-    await queue.sync(ws, {
-      pending: [queueJob('1', 'mock-pending', 'client-a')]
-    })
-
-    await expect(comfyPage.queueList.toggleButton).toContainText('1')
-    await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i)
-
-    await comfyPage.queueList.open()
-    await expect(comfyPage.queueList.overlay).toBeVisible()
-    await expect(comfyPage.queueList.jobItems).toHaveCount(1)
-
-    await comfyPage.queueList.close()
-    await expect(comfyPage.queueList.overlay).toBeHidden()
-  })
-
-  test('displays running and pending jobs via status updates', async ({
-    comfyPage,
-    ws
-  }) => {
-    await queue.sync(ws, {
-      running: [queueJob('2', 'mock-running', 'client-b')],
-      pending: [queueJob('3', 'mock-pending', 'client-c')]
-    })
-
-    await comfyPage.queueList.open()
-    await expect(comfyPage.queueList.jobItems).toHaveCount(2)
-
-    const firstJob = comfyPage.queueList.jobItems.first()
-    await firstJob.hover()
-
-    const cancelAction = firstJob
-      .getByTestId('job-action-cancel-running')
-      .or(firstJob.getByTestId('job-action-cancel-hover'))
-
-    await expect(cancelAction).toBeVisible()
-  })
-})
-
-const queueJob = (
-  queueIndex: string,
-  promptId: string,
-  clientId: string
-): QueueJob => [
-  queueIndex,
-  promptId,
-  { client_id: clientId },
-  { class_type: 'Note' },
-  ['output']
-]
-
-const createQueueController = async (
-  comfyPage: ComfyPage
-): Promise<QueueController> => {
-  const state: QueueState = { running: [], pending: [] }
-
-  // Single queue handler reads the latest in-memory state
-  await comfyPage.page.route('**/api/queue', async (route) => {
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify({
-        queue_running: state.running,
-        queue_pending: state.pending
-      })
-    })
-  })
-
-  const sync = async (
-    ws: { trigger(data: WsMessage, url?: string): Promise<void> },
-    nextState: Partial<QueueState>
-  ) => {
-    if (nextState.running) state.running = nextState.running
-    if (nextState.pending) state.pending = nextState.pending
-
-    const total = state.running.length + state.pending.length
-    const queueResponse = comfyPage.page.waitForResponse('**/api/queue')
-
-    await ws.trigger({
-      type: 'status',
-      data: {
-        status: { exec_info: { queue_remaining: total } }
-      }
-    })
-
-    await queueResponse
-  }
-
-  return { state, sync }
-}

browser_tests/tests/remoteWidgets.spec.ts

@@ -212,8 +212,12 @@ test.describe('Remote COMBO Widget', () => {
       // Click on the canvas to trigger widget refresh
       await comfyPage.page.mouse.click(400, 300)
 
-      const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(refreshedOptions).not.toEqual(initialOptions)
+      await expect(async () => {
+        const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
+        expect(refreshedOptions).not.toEqual(initialOptions)
+      }).toPass({
+        timeout: 2_000
+      })
     })
 
     test('does not refresh when TTL is not set', async ({ comfyPage }) => {
@@ -321,8 +325,12 @@ test.describe('Remote COMBO Widget', () => {
       await clickRefreshButton(comfyPage, nodeName)
 
       // Verify the selected value of the widget is the first option in the refreshed list
-      const refreshedValue = await getWidgetValue(comfyPage, nodeName)
-      expect(refreshedValue).toEqual('new first option')
+      await expect(async () => {
+        const refreshedValue = await getWidgetValue(comfyPage, nodeName)
+        expect(refreshedValue).toEqual('new first option')
+      }).toPass({
+        timeout: 2_000
+      })
     })
   })
 

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -85,7 +85,7 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     const initialShape = await nodeRef.getProperty<number>('shape')
 
     await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Shape', { exact: true }).click()
+    await comfyPage.page.getByText('Shape', { exact: true }).hover()
     await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
       timeout: 5000
     })
@@ -136,13 +136,18 @@ test.describe('Selection Toolbox - More Options Submenus', () => {
     comfyPage
   }) => {
     await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
+    const renameItem = comfyPage.page.getByText('Rename', { exact: true })
+    await expect(renameItem).toBeVisible({ timeout: 5000 })
+
+    // Wait for multiple frames to allow PrimeVue's outside click handler to initialize
+    for (let i = 0; i < 30; i++) {
+      await comfyPage.nextFrame()
+    }
 
     await comfyPage.page
       .locator('#graph-canvas')
       .click({ position: { x: 0, y: 50 }, force: true })
+
     await comfyPage.nextFrame()
     await expect(
       comfyPage.page.getByText('Rename', { exact: true })

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -290,16 +290,20 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page.keyboard.insertText('bar')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.nextFrame()
-    expect(
-      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['bar/'])
-    expect(
-      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
-    ).toEqual({
-      'bar/': {
-        icon: 'pi-folder',
-        color: '#007bff'
-      }
+    await expect(async () => {
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['bar/'])
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+      ).toEqual({
+        'bar/': {
+          icon: 'pi-folder',
+          color: '#007bff'
+        }
+      })
+    }).toPass({
+      timeout: 2_000
     })
   })
 

browser_tests/tests/sidebar/workflows.spec.ts

@@ -340,6 +340,11 @@ test.describe('Workflows sidebar', () => {
 
     await comfyPage.menu.workflowsTab.open()
 
+    // Wait for workflow to appear in Browse section after sync
+    const workflowItem =
+      comfyPage.menu.workflowsTab.getPersistedItem('workflow1.json')
+    await expect(workflowItem).toBeVisible({ timeout: 3000 })
+
     const nodeCount = await comfyPage.getGraphNodesCount()
 
     // Get the bounding box of the canvas element
@@ -358,6 +363,10 @@ test.describe('Workflows sidebar', () => {
       '#graph-canvas',
       { targetPosition }
     )
-    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
+
+    // Wait for nodes to be inserted after drag-drop with retryable assertion
+    await expect
+      .poll(() => comfyPage.getGraphNodesCount(), { timeout: 3000 })
+      .toBe(nodeCount * 2)
   })
 })

browser_tests/tests/subgraph.spec.ts

@@ -329,6 +329,15 @@ test.describe('Subgraph Operations', () => {
       expect(newInputName).toBe(labelClickRenamedName)
       expect(newInputName).not.toBe(initialInputLabel)
     })
+    test('Can create widget from link with compressed target_slot', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('subgraphs/subgraph-compressed-target-slot')
+      const step = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.nodes[0].widgets[0].options.step
+      })
+      expect(step).toBe(10)
+    })
   })
 
   test.describe('Subgraph Creation and Deletion', () => {

browser_tests/tests/templates.spec.ts

@@ -109,14 +109,14 @@ test.describe('Templates', () => {
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {
-    // Set locale to French before opening templates
-    await comfyPage.setSetting('Comfy.Locale', 'fr')
-
     // Load the templates dialog and wait for the French index file request
     const requestPromise = comfyPage.page.waitForRequest(
       '**/templates/index.fr.json'
     )
 
+    // Set locale to French before opening templates
+    await comfyPage.setSetting('Comfy.Locale', 'fr')
+
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
 
     const request = await requestPromise
@@ -188,22 +188,19 @@ test.describe('Templates', () => {
       .locator('header')
       .filter({ hasText: 'Templates' })
 
-    const cardCount = await comfyPage.page
-      .locator('[data-testid^="template-workflow-"]')
-      .count()
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).toBeVisible() // Nav should be visible at desktop size
 
     const mobileSize = { width: 640, height: 800 }
     await comfyPage.page.setViewportSize(mobileSize)
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })

browser_tests/tests/viewport.spec.ts

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Viewport', () => {
+  test('Fits view to nodes when saved viewport position is offscreen', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('viewport/default-viewport-saved-offscreen')
+
+    // Wait a few frames for rendering to stabilize
+    for (let i = 0; i < 5; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'viewport-fits-when-saved-offscreen.png'
+    )
+  })
+})

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

@@ -32,4 +32,42 @@ test.describe('Vue Node Groups', () => {
       'vue-groups-fit-to-contents.png'
     )
   })
+
+  test('should move nested groups together when dragging outer group', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('groups/nested-groups-1-inner-node')
+
+    // Get initial positions with null guards
+    const outerInitial = await comfyPage.getGroupPosition('Outer Group')
+    const innerInitial = await comfyPage.getGroupPosition('Inner Group')
+
+    const initialOffsetX = innerInitial.x - outerInitial.x
+    const initialOffsetY = innerInitial.y - outerInitial.y
+
+    // Drag the outer group
+    const dragDelta = { x: 100, y: 80 }
+    await comfyPage.dragGroup({
+      name: 'Outer Group',
+      deltaX: dragDelta.x,
+      deltaY: dragDelta.y
+    })
+
+    // Use retrying assertion to wait for positions to update
+    await expect(async () => {
+      const outerFinal = await comfyPage.getGroupPosition('Outer Group')
+      const innerFinal = await comfyPage.getGroupPosition('Inner Group')
+
+      const finalOffsetX = innerFinal.x - outerFinal.x
+      const finalOffsetY = innerFinal.y - outerFinal.y
+
+      // Both groups should have moved
+      expect(outerFinal.x).not.toBe(outerInitial.x)
+      expect(innerFinal.x).not.toBe(innerInitial.x)
+
+      // The relative offset should be maintained (inner group moved with outer)
+      expect(finalOffsetX).toBeCloseTo(initialOffsetX, 0)
+      expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
+    }).toPass({ timeout: 5000 })
+  })
 })

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

@@ -0,0 +1,144 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
+
+test.describe('Vue Node Bring to Front', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.loadWorkflow('vueNodes/simple-triple')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  /**
+   * Helper to get the z-index of a node by its title
+   */
+  async function getNodeZIndex(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<number> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const style = await node.getAttribute('style')
+    if (!style) {
+      throw new Error(
+        `Node "${title}" has no style attribute (observed: ${style})`
+      )
+    }
+    const match = style.match(/z-index:\s*(\d+)/)
+    if (!match) {
+      throw new Error(
+        `Node "${title}" has no z-index in style (observed: "${style}")`
+      )
+    }
+    return parseInt(match[1], 10)
+  }
+
+  /**
+   * Helper to get the bounding box center of a node
+   */
+  async function getNodeCenter(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<{ x: number; y: number }> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const box = await node.boundingBox()
+    if (!box) throw new Error(`Node "${title}" not found`)
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+  }
+
+  test('should bring overlapped node to front when clicking on it', async ({
+    comfyPage
+  }) => {
+    // Get initial positions
+    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+    const ksamplerHeader = await comfyPage.page
+      .getByText('KSampler')
+      .boundingBox()
+    if (!ksamplerHeader) throw new Error('KSampler header not found')
+
+    // Drag KSampler on top of CLIP Text Encode
+    await comfyPage.dragAndDrop(
+      { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
+      clipCenter
+    )
+    await comfyPage.nextFrame()
+
+    // Screenshot showing KSampler on top of CLIP
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-before.png'
+    )
+
+    // KSampler should be on top (higher z-index) after being dragged
+    const ksamplerZIndexBefore = await getNodeZIndex(comfyPage, 'KSampler')
+    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    expect(ksamplerZIndexBefore).toBeGreaterThan(clipZIndexBefore)
+
+    // Click on CLIP Text Encode (underneath) - need to click on a visible part
+    // Since KSampler is on top, we click on the edge of CLIP that should still be visible
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+
+    // Click on a visible edge of CLIP
+    await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    const ksamplerZIndexAfter = await getNodeZIndex(comfyPage, 'KSampler')
+    expect(clipZIndexAfter).toBeGreaterThan(ksamplerZIndexAfter)
+
+    // Screenshot showing CLIP now on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-after.png'
+    )
+  })
+
+  test('should bring overlapped node to front when clicking on its widget', async ({
+    comfyPage
+  }) => {
+    // Get CLIP Text Encode position (it has a text widget)
+    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+
+    // Get VAE Decode position and drag it on top of CLIP
+    const vaeHeader = await comfyPage.page.getByText('VAE Decode').boundingBox()
+    if (!vaeHeader) throw new Error('VAE Decode header not found')
+
+    await comfyPage.dragAndDrop(
+      { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
+      { x: clipCenter.x - 50, y: clipCenter.y }
+    )
+    await comfyPage.nextFrame()
+
+    // VAE should be on top after drag
+    const vaeZIndexBefore = await getNodeZIndex(comfyPage, 'VAE Decode')
+    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    expect(vaeZIndexBefore).toBeGreaterThan(clipZIndexBefore)
+
+    // Screenshot showing VAE on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-before.png'
+    )
+
+    // Click on the text widget of CLIP Text Encode
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+    await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    const vaeZIndexAfter = await getNodeZIndex(comfyPage, 'VAE Decode')
+    expect(clipZIndexAfter).toBeGreaterThan(vaeZIndexAfter)
+
+    // Screenshot showing CLIP now on top after widget click
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-after.png'
+    )
+  })
+})