fix: Add tests for nested promoted widget resolution paths in safeWidgetMapper (#9292)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/skills/backport-management/SKILL.md

@@ -1,150 +0,0 @@
----
-name: backport-management
-description: Manages cherry-pick backports across stable release branches. Discovers candidates from Slack/git, analyzes dependencies, resolves conflicts via worktree, and logs results. Use when asked to backport, cherry-pick to stable, manage release branches, do stable branch maintenance, or run a backport session.
----
-
-# Backport Management
-
-Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release branches.
-
-## Quick Start
-
-1. **Discover** — Collect candidates from Slack bot + git log gap (`reference/discovery.md`)
-2. **Analyze** — Categorize MUST/SHOULD/SKIP, check deps (`reference/analysis.md`)
-3. **Plan** — Order by dependency (leaf fixes first), group into waves per branch
-4. **Execute** — Label-driven automation → worktree fallback for conflicts (`reference/execution.md`)
-5. **Verify** — After each wave, verify branch integrity before proceeding
-6. **Log & Report** — Generate session report with mermaid diagram (`reference/logging.md`)
-
-## System Context
-
-| Item           | Value                                             |
-| -------------- | ------------------------------------------------- |
-| Repo           | `~/ComfyUI_frontend` (Comfy-Org/ComfyUI_frontend) |
-| Merge strategy | Squash merge (`gh pr merge --squash --admin`)     |
-| Automation     | `pr-backport.yaml` GitHub Action (label-driven)   |
-| Tracking dir   | `~/temp/backport-session/`                        |
-
-## Branch Scope Rules
-
-**Critical: Match PRs to the correct target branches.**
-
-| Branch prefix | Scope                          | Example                                   |
-| ------------- | ------------------------------ | ----------------------------------------- |
-| `cloud/*`     | Cloud-hosted ComfyUI only      | App mode, cloud auth, cloud-specific UI   |
-| `core/*`      | Local/self-hosted ComfyUI only | Core editor, local workflows, node system |
-
-**⚠️ NEVER backport cloud-only PRs to `core/*` branches.** Cloud-only changes (app mode, cloud auth, cloud billing UI, cloud-specific API calls) are irrelevant to local users and waste effort. Before backporting any PR to a `core/*` branch, check:
-
-- Does the PR title/description mention "app mode", "cloud", or cloud-specific features?
-- Does the PR only touch files like `appModeStore.ts`, cloud auth, or cloud-specific components?
-- If yes → skip for `core/*` branches (may still apply to `cloud/*` branches)
-
-## ⚠️ Gotchas (Learn from Past Sessions)
-
-### Use `gh api` for Labels — NOT `gh pr edit`
-
-`gh pr edit --add-label` triggers Projects Classic deprecation errors. Always use:
-
-```bash
-gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
-  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
-```
-
-### Automation Over-Reports Conflicts
-
-The `pr-backport.yaml` action reports more conflicts than reality. `git cherry-pick -m 1` with git auto-merge handles many cases the automation can't. Always attempt manual cherry-pick before skipping.
-
-### Never Skip Based on Conflict File Count
-
-12 or 27 conflicting files can be trivial (snapshots, new files). **Categorize conflicts first**, then decide. See Conflict Triage below.
-
-## Conflict Triage
-
-**Always categorize before deciding to skip. High conflict count ≠ hard conflicts.**
-
-| Type                         | Symptom                              | Resolution                                                      |
-| ---------------------------- | ------------------------------------ | --------------------------------------------------------------- |
-| **Binary snapshots (PNGs)**  | `.png` files in conflict list        | `git checkout --theirs $FILE && git add $FILE` — always trivial |
-| **Modify/delete (new file)** | PR introduces files not on target    | `git add $FILE` — keep the new file                             |
-| **Modify/delete (removed)**  | Target removed files the PR modifies | `git rm $FILE` — file no longer relevant                        |
-| **Content conflicts**        | Marker-based (`<<<<<<<`)             | Accept theirs via python regex (see below)                      |
-| **Add/add**                  | Both sides added same file           | Accept theirs, verify no logic conflict                         |
-| **Locale/JSON files**        | i18n key additions                   | Accept theirs, validate JSON after                              |
-
-```python
-# Accept theirs for content conflicts
-import re
-pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
-content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
-```
-
-### Escalation Triggers (Flag for Human)
-
-- **Package.json/lockfile changes** → skip on stable (transitive dep regression risk)
-- **Core type definition changes** → requires human judgment
-- **Business logic conflicts** (not just imports/exports) → requires domain knowledge
-- **Admin-merged conflict resolutions** → get human review of the resolution before continuing the wave
-
-## Auto-Skip Categories
-
-Skip these without discussion:
-
-- **Dep refresh PRs** — Risk of transitive dep regressions on stable. Cherry-pick individual CVE fixes instead.
-- **CI/tooling changes** — Not user-facing
-- **Test-only / lint rule changes** — Not user-facing
-- **Revert pairs** — If PR A reverted by PR B, skip both. If fixed version (PR C) exists, backport only C.
-- **Features not on target branch** — e.g., Painter, GLSLShader, appModeStore on core/1.40
-- **Cloud-only PRs on core/\* branches** — App mode, cloud auth, cloud billing. These only affect cloud-hosted ComfyUI.
-
-## Wave Verification
-
-After merging each wave of PRs to a target branch, verify branch integrity before proceeding:
-
-```bash
-# Fetch latest state of target branch
-git fetch origin TARGET_BRANCH
-
-# Quick smoke check: does the branch build?
-git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
-cd /tmp/verify-TARGET
-source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
-git worktree remove /tmp/verify-TARGET --force
-```
-
-If typecheck fails, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
-
-## Continuous Backporting Recommendation
-
-Large backport sessions (50+ PRs) are expensive and error-prone. Prefer continuous backporting:
-
-- Backport bug fixes as they merge to main (same day or next day)
-- Use the automation labels immediately after merge
-- Reserve session-style bulk backporting for catching up after gaps
-- When a release branch is created, immediately start the continuous process
-
-## Quick Reference
-
-### Label-Driven Automation (default path)
-
-```bash
-gh api repos/Comfy-Org/ComfyUI_frontend/issues/$PR/labels \
-  -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH"
-# Wait 3 min, check: gh pr list --base TARGET_BRANCH --state open
-```
-
-### Manual Worktree Cherry-Pick (conflict fallback)
-
-```bash
-git worktree add /tmp/backport-$BRANCH origin/$BRANCH
-cd /tmp/backport-$BRANCH
-git checkout -b backport-$PR-to-$BRANCH origin/$BRANCH
-git cherry-pick -m 1 $MERGE_SHA
-# Resolve conflicts, push, create PR, merge
-```
-
-### PR Title Convention
-
-```
-[backport TARGET_BRANCH] Original Title (#ORIGINAL_PR)
-```

.claude/skills/backport-management/reference/analysis.md

@@ -1,68 +0,0 @@
-# Analysis & Decision Framework
-
-## Categorization
-
-| Category             | Criteria                                                                                                  | Action                                                                     |
-| -------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| **MUST**             | User-facing bug, crash, data corruption, security. Clear breakage that users will hit.                    | Backport (with deps if needed)                                             |
-| **SHOULD**           | UX improvement, minor bug, small dep chain. No user-visible breakage if skipped, but improves experience. | Backport if clean cherry-pick; defer if conflict resolution is non-trivial |
-| **SKIP**             | CI/tooling, test-only, lint rules, cosmetic, dep refresh                                                  | Skip with documented reason                                                |
-| **NEEDS DISCUSSION** | Large dep chain, unclear risk/benefit, touches core types                                                 | Flag for human                                                             |
-
-### MUST vs SHOULD Decision Guide
-
-When unsure, ask: "If a user on this stable branch reports this issue, would we consider it a bug?"
-
-- **Yes** → MUST. The fix addresses broken behavior.
-- **No, but it's noticeably better** → SHOULD. The fix is a quality-of-life improvement.
-- **No, and it's cosmetic or internal** → SKIP.
-
-For SHOULD items with conflicts: if conflict resolution requires more than trivial accept-theirs patterns (content conflicts in business logic, not just imports), downgrade to SKIP or escalate to NEEDS DISCUSSION.
-
-## Branch Scope Filtering
-
-**Before categorizing, filter by branch scope:**
-
-| Target branch | Skip if PR is...                                                    |
-| ------------- | ------------------------------------------------------------------- |
-| `core/*`      | Cloud-only (app mode, cloud auth, cloud billing, cloud-specific UI) |
-| `cloud/*`     | Local-only features not present on cloud branch                     |
-
-Cloud-only PRs backported to `core/*` are wasted effort — `core/*` branches serve local/self-hosted users who never see cloud features. Check PR titles, descriptions, and files changed for cloud-specific indicators.
-
-## Features Not on Stable Branches
-
-Check before backporting — these don't exist on older branches:
-
-- **Painter** (`src/extensions/core/painter.ts`) — not on core/1.40
-- **GLSLShader** — not on core/1.40
-- **App builder** — check per branch
-- **appModeStore.ts** — not on core/1.40
-
-## Dep Refresh PRs
-
-Always SKIP on stable branches. Risk of transitive dependency regressions outweighs audit cleanup benefit. If a specific CVE fix is needed, cherry-pick that individual fix instead.
-
-## Revert Pairs
-
-If PR A is reverted by PR B:
-
-- Skip BOTH A and B
-- If a fixed version exists (PR C), backport only C
-
-## Dependency Analysis
-
-```bash
-# Find other PRs that touched the same files
-gh pr view $PR --json files --jq '.files[].path' | while read f; do
-  git log --oneline origin/TARGET..$MERGE_SHA -- "$f"
-done
-```
-
-## Human Review Checkpoint
-
-Present decisions.md before execution. Include:
-
-1. All MUST/SHOULD/SKIP categorizations with rationale
-2. Questions for human (feature existence, scope, deps)
-3. Estimated effort per branch

.claude/skills/backport-management/reference/discovery.md

@@ -1,42 +0,0 @@
-# Discovery — Candidate Collection
-
-## Source 1: Slack Backport-Checker Bot
-
-Use `slackdump` skill to export `#frontend-releases` channel (C09K9TPU2G7):
-
-```bash
-slackdump export -o ~/slack-exports/frontend-releases.zip C09K9TPU2G7
-```
-
-Parse bot messages for PRs flagged "Might need backport" per release version.
-
-## Source 2: Git Log Gap Analysis
-
-```bash
-# Count gap
-git log --oneline origin/TARGET..origin/main | wc -l
-
-# List gap commits
-git log --oneline origin/TARGET..origin/main
-
-# Check if a PR is already on target
-git log --oneline origin/TARGET --grep="#PR_NUMBER"
-
-# Check for existing backport PRs
-gh pr list --base TARGET --state all --search "backport PR_NUMBER"
-```
-
-## Source 3: GitHub PR Details
-
-```bash
-# Get merge commit SHA
-gh pr view $PR --json mergeCommit,title --jq '"Title: \(.title)\nMerge: \(.mergeCommit.oid)"'
-
-# Get files changed
-gh pr view $PR --json files --jq '.files[].path'
-```
-
-## Output: candidate_list.md
-
-Table per target branch:
-| PR# | Title | Category | Flagged by Bot? | Decision |

.claude/skills/backport-management/reference/execution.md

@@ -1,150 +0,0 @@
-# Execution Workflow
-
-## Per-Branch Execution Order
-
-1. Smallest gap first (validation run)
-2. Medium gap next (quick win)
-3. Largest gap last (main effort)
-
-## Step 1: Label-Driven Automation (Batch)
-
-```bash
-# Add labels to all candidates for a target branch
-for pr in $PR_LIST; do
-  gh api repos/Comfy-Org/ComfyUI_frontend/issues/$pr/labels \
-    -f "labels[]=needs-backport" -f "labels[]=TARGET_BRANCH" --silent
-  sleep 2
-done
-
-# Wait 3 minutes for automation
-sleep 180
-
-# Check which got auto-PRs
-gh pr list --base TARGET_BRANCH --state open --limit 50 --json number,title
-```
-
-## Step 2: Review & Merge Clean Auto-PRs
-
-```bash
-for pr in $AUTO_PRS; do
-  # Check size
-  gh pr view $pr --json title,additions,deletions,changedFiles \
-    --jq '"Files: \(.changedFiles), +\(.additions)/-\(.deletions)"'
-  # Admin merge
-  gh pr merge $pr --squash --admin
-  sleep 3
-done
-```
-
-## Step 3: Manual Worktree for Conflicts
-
-```bash
-git fetch origin TARGET_BRANCH
-git worktree add /tmp/backport-TARGET origin/TARGET_BRANCH
-cd /tmp/backport-TARGET
-
-for PR in ${CONFLICT_PRS[@]}; do
-  # Refresh target ref so each branch is based on current HEAD
-  git fetch origin TARGET_BRANCH
-  git checkout origin/TARGET_BRANCH
-
-  git checkout -b backport-$PR-to-TARGET origin/TARGET_BRANCH
-  git cherry-pick -m 1 $MERGE_SHA
-
-  # If conflict — NEVER skip based on file count alone!
-  # Categorize conflicts first: binary PNGs, modify/delete, content, add/add
-  # See SKILL.md Conflict Triage table for resolution per type.
-
-  # Resolve all conflicts, then:
-  git add .
-  GIT_EDITOR=true git cherry-pick --continue
-
-  git push origin backport-$PR-to-TARGET
-  NEW_PR=$(gh pr create --base TARGET_BRANCH --head backport-$PR-to-TARGET \
-    --title "[backport TARGET] TITLE (#$PR)" \
-    --body "Backport of #$PR..." | grep -oP '\d+$')
-  gh pr merge $NEW_PR --squash --admin
-  sleep 3
-done
-
-# Cleanup
-cd -
-git worktree remove /tmp/backport-TARGET --force
-```
-
-**⚠️ Human review for conflict resolutions:** When admin-merging a PR where you manually resolved conflicts (especially content conflicts beyond trivial accept-theirs), pause and present the resolution diff to the human for review before merging. Trivial resolutions (binary snapshots, modify/delete, locale key additions) can proceed without review.
-
-## Step 4: Wave Verification
-
-After completing all PRs in a wave for a target branch:
-
-```bash
-git fetch origin TARGET_BRANCH
-git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
-cd /tmp/verify-TARGET
-source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
-git worktree remove /tmp/verify-TARGET --force
-```
-
-If verification fails, stop and fix before proceeding to the next wave. Do not compound problems across waves.
-
-## Conflict Resolution Patterns
-
-### 1. Content Conflicts (accept theirs)
-
-```python
-import re
-pattern = r'<<<<<<< HEAD\n(.*?)=======\n(.*?)>>>>>>> [^\n]+\n?'
-content = re.sub(pattern, r'\2', content, flags=re.DOTALL)
-```
-
-### 2. Modify/Delete (two cases!)
-
-```bash
-# Case A: PR introduces NEW files not on target → keep them
-git add $FILE
-
-# Case B: Target REMOVED files the PR modifies → drop them
-git rm $FILE
-```
-
-### 3. Binary Files (snapshots)
-
-```bash
-git checkout --theirs $FILE && git add $FILE
-```
-
-### 4. Locale Files
-
-Usually adding new i18n keys — accept theirs, validate JSON:
-
-```bash
-python3 -c "import json; json.load(open('src/locales/en/main.json'))" && echo "Valid"
-```
-
-## Merge Conflicts After Other Merges
-
-When merging multiple PRs to the same branch, later PRs may conflict with earlier merges:
-
-```bash
-git fetch origin TARGET_BRANCH
-git rebase origin/TARGET_BRANCH
-# Resolve new conflicts
-git push --force origin backport-$PR-to-TARGET
-sleep 20  # Wait for GitHub to recompute merge state
-gh pr merge $PR --squash --admin
-```
-
-## Lessons Learned
-
-1. **Automation reports more conflicts than reality** — `cherry-pick -m 1` with git auto-merge handles many "conflicts" the automation can't
-2. **Never skip based on conflict file count** — 12 or 27 conflicts can be trivial (snapshots, new files). Categorize first: binary PNGs, modify/delete, content, add/add.
-3. **Modify/delete goes BOTH ways** — if the PR introduces new files (not on target), `git add` them. If target deleted files the PR modifies, `git rm`.
-4. **Binary snapshot PNGs** — always `git checkout --theirs && git add`. Never skip a PR just because it has many snapshot conflicts.
-5. **Batch label additions need 2s delay** between API calls to avoid rate limits
-6. **Merging 6+ PRs rapidly** can cause later PRs to become unmergeable — wait 20-30s for GitHub to recompute merge state
-7. **appModeStore.ts, painter files, GLSLShader files** don't exist on core/1.40 — `git rm` these
-8. **Always validate JSON** after resolving locale file conflicts
-9. **Dep refresh PRs** — skip on stable branches. Risk of transitive dep regressions outweighs audit cleanup. Cherry-pick individual CVE fixes instead.
-10. **Verify after each wave** — run `pnpm typecheck` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
-11. **Cloud-only PRs don't belong on core/\* branches** — app mode, cloud auth, and cloud-specific UI changes are irrelevant to local users. Always check PR scope against branch scope before backporting.

.claude/skills/backport-management/reference/logging.md

@@ -1,96 +0,0 @@
-# Logging & Session Reports
-
-## During Execution
-
-Maintain `execution-log.md` with per-branch tables:
-
-```markdown
-| PR#   | Title | Status                            | Backport PR | Notes   |
-| ----- | ----- | --------------------------------- | ----------- | ------- |
-| #XXXX | Title | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
-```
-
-## Wave Verification Log
-
-Track verification results per wave:
-
-```markdown
-## Wave N Verification — TARGET_BRANCH
-
-- PRs merged: #A, #B, #C
-- Typecheck: ✅ Pass / ❌ Fail
-- Issues found: (if any)
-- Human review needed: (list any non-trivial conflict resolutions)
-```
-
-## Session Report Template
-
-```markdown
-# Backport Session Report
-
-## Summary
-
-| Branch | Candidates | Merged | Skipped | Deferred | Rate |
-| ------ | ---------- | ------ | ------- | -------- | ---- |
-
-## Deferred Items (Needs Human)
-
-| PR# | Title | Branch | Issue |
-
-## Conflict Resolutions Requiring Review
-
-| PR# | Branch | Conflict Type | Resolution Summary |
-
-## Automation Performance
-
-| Metric                      | Value |
-| --------------------------- | ----- |
-| Auto success rate           | X%    |
-| Manual resolution rate      | X%    |
-| Overall clean rate          | X%    |
-| Wave verification pass rate | X%    |
-
-## Process Recommendations
-
-- Were there clusters of related PRs that should have been backported together?
-- Any PRs that should have been backported sooner (continuous backporting candidates)?
-- Feature branches that need tracking for future sessions?
-```
-
-## Final Deliverable: Visual Summary
-
-At session end, generate a **mermaid diagram** showing all backported PRs organized by target branch and category (MUST/SHOULD), plus a summary table. Present this to the user as the final output.
-
-```mermaid
-graph TD
-    subgraph branch1["☁️ cloud/X.XX — N PRs"]
-        C1["#XXXX title"]
-        C2["#XXXX title"]
-    end
-
-    subgraph branch2must["🔴 core/X.XX MUST — N PRs"]
-        M1["#XXXX title"]
-    end
-
-    subgraph branch2should["🟡 core/X.XX SHOULD — N PRs"]
-        S1["#XXXX-#XXXX N auto-merged"]
-        S2["#XXXX-#XXXX N manual picks"]
-    end
-
-    classDef cloudStyle fill:#1a3a5c,stroke:#4da6ff,color:#e0f0ff
-    classDef coreStyle fill:#1a4a2e,stroke:#4dff88,color:#e0ffe8
-    classDef mustStyle fill:#5c1a1a,stroke:#ff4d4d,color:#ffe0e0
-    classDef shouldStyle fill:#4a3a1a,stroke:#ffcc4d,color:#fff5e0
-```
-
-Use the `mermaid` tool to render this diagram and present it alongside the summary table as the session's final deliverable.
-
-## Files to Track
-
-- `candidate_list.md` — all candidates per branch
-- `decisions.md` — MUST/SHOULD/SKIP with rationale
-- `wave-plan.md` — execution order
-- `execution-log.md` — real-time status
-- `backport-session-report.md` — final summary
-
-All in `~/temp/backport-session/`.

.env_example

@@ -38,9 +38,6 @@ TEST_COMFYUI_DIR=/home/ComfyUI
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 
-# Enable PostHog debug logging in the browser console.
-# VITE_POSTHOG_DEBUG=true
-
 # Sentry ENV vars replace with real ones for debugging
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org

.github/workflows/api-update-electron-api-types.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Update electron types

.github/workflows/api-update-manager-api-types.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/api-update-registry-api-types.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -27,7 +27,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -82,7 +82,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -4,8 +4,6 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
-  push:
-    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -140,29 +138,6 @@ jobs:
             "${{ github.head_ref }}" \
             "completed"
 
-  # Deploy Storybook to production URL on main branch push
-  deploy-production:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Build Storybook
-        run: pnpm build-storybook
-
-      - name: Deploy to Cloudflare Pages (production)
-        env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-        run: |
-          npx wrangler@^4.0.0 pages deploy storybook-static \
-            --project-name=comfy-storybook \
-            --branch=main
-
   # Update comment with Chromatic URLs for version-bump branches
   update-comment-with-chromatic:
     needs: [chromatic-deployment, deploy-and-comment]

.github/workflows/cloud-dispatch-build.yaml

@@ -13,8 +13,6 @@ on:
     branches:
       - 'cloud/*'
       - 'main'
-  pull_request:
-    types: [labeled, synchronize]
   workflow_dispatch:
 
 permissions: {}
@@ -25,51 +23,17 @@ concurrency:
 
 jobs:
   dispatch:
-    # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      (github.event_name != 'pull_request' ||
-       (github.event.action == 'labeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-       (github.event.action == 'synchronize' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
+    # Fork guard: prevent forks from dispatching to the cloud repo
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
         id: payload
-        env:
-          EVENT_NAME: ${{ github.event_name }}
-          PR_HEAD_SHA: ${{ github.event.pull_request.head.sha }}
-          PR_HEAD_REF: ${{ github.event.pull_request.head.ref }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          ACTION: ${{ github.event.action }}
-          LABEL_NAME: ${{ github.event.label.name }}
-          PR_LABELS: ${{ toJson(github.event.pull_request.labels.*.name) }}
         run: |
-          if [ "${EVENT_NAME}" = "pull_request" ]; then
-            REF="${PR_HEAD_SHA}"
-            BRANCH="${PR_HEAD_REF}"
-
-            # Derive variant from all PR labels (default to cpu for frontend-only previews)
-            VARIANT="cpu"
-            echo "${PR_LABELS}" | grep -q '"preview-gpu"' && VARIANT="gpu"
-          else
-            REF="${GITHUB_SHA}"
-            BRANCH="${GITHUB_REF_NAME}"
-            PR_NUMBER=""
-            VARIANT=""
-          fi
           payload="$(jq -nc \
-            --arg ref "${REF}" \
-            --arg branch "${BRANCH}" \
-            --arg pr_number "${PR_NUMBER}" \
-            --arg variant "${VARIANT}" \
-            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
+            --arg ref "${GITHUB_SHA}" \
+            --arg branch "${GITHUB_REF_NAME}" \
+            '{ref: $ref, branch: $branch}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

.github/workflows/cloud-dispatch-cleanup.yaml

@@ -1,39 +0,0 @@
----
-# Dispatches a frontend-preview-cleanup event to the cloud repo when a
-# frontend PR with a preview label is closed or has its preview label
-# removed. The cloud repo handles the actual environment teardown.
-#
-# This is fire-and-forget — it does NOT wait for the cloud workflow to
-# complete. Status is visible in the cloud repo's Actions tab.
-
-name: Cloud Frontend Preview Cleanup Dispatch
-
-on:
-  pull_request:
-    types: [closed, unlabeled]
-
-permissions: {}
-
-jobs:
-  dispatch:
-    # Only dispatch when:
-    # - PR closed AND had a preview label
-    # - Preview label specifically removed
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      ((github.event.action == 'closed' &&
-        (contains(github.event.pull_request.labels.*.name, 'preview') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))) ||
-       (github.event.action == 'unlabeled' &&
-        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)))
-    runs-on: ubuntu-latest
-    steps:
-      - name: Dispatch to cloud repo
-        uses: peter-evans/repository-dispatch@28959ce8df70de7be546dd1250a005dd32156697 # v4.0.1
-        with:
-          token: ${{ secrets.CLOUD_DISPATCH_TOKEN }}
-          repository: Comfy-Org/cloud
-          event-type: frontend-preview-cleanup
-          client-payload: >-
-            {"pr_number": "${{ github.event.pull_request.number }}"}

.github/workflows/pr-claude-review.yaml

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

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

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 22
 
       - name: Download PR metadata
         uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12

.github/workflows/publish-desktop-ui-on-merge.yaml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
 
       - name: Read desktop-ui version
         id: get_version

.github/workflows/publish-desktop-ui.yaml

@@ -91,7 +91,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

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

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: 'frontend/.nvmrc'
+          node-version: lts/*
 
       - name: Install dependencies
         working-directory: frontend

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

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
 
       - name: Check version bump type
         id: check_version

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

@@ -26,7 +26,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version

.github/workflows/release-npm-types.yaml

@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

.github/workflows/release-pypi-dev.yaml

@@ -22,7 +22,7 @@ jobs:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version

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

@@ -149,7 +149,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
 
       - name: Bump version
         id: bump-version

.github/workflows/version-bump-desktop-ui.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

.github/workflows/weekly-docs-check.yaml

@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,7 +26,6 @@ dist-ssr
 .claude/*.local.json
 .claude/*.local.md
 .claude/*.local.txt
-.claude/worktrees
 CLAUDE.local.md
 
 # Editor directories and files

.storybook/preview.ts

@@ -58,7 +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')
+  document.body.classList.add('[&_*]:!font-inter')
 
   return Story(context.args, context)
 }

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 ### Prerequisites & Technology Stack
 
 - **Required Software**:
-  - Node.js (see `.nvmrc`, currently v24) and pnpm
+  - Node.js (v24) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,7 +1,10 @@
 <template>
-  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
-    <div class="p-terminal size-full rounded-none p-2">
-      <div ref="terminalEl" class="terminal-host h-full" />
+  <div
+    ref="rootEl"
+    class="relative overflow-hidden h-full w-full bg-neutral-900"
+  >
+    <div class="p-terminal rounded-none h-full w-full p-2">
+      <div ref="terminalEl" class="h-full terminal-host" />
     </div>
     <Button
       v-tooltip.left="{
@@ -13,7 +16,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'pointer-events-none opacity-0 select-none': !isHovered
+          'opacity-0 pointer-events-none select-none': !isHovered
         })
       "
       :aria-label="tooltipText"

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
     <!-- Installation Path Section -->
-    <div class="flex grow flex-col gap-6 text-neutral-300">
-      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
+    <div class="grow flex flex-col gap-6 text-neutral-300">
+      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="px-12 text-center text-neutral-400">
+      <p class="text-center text-neutral-400 px-12">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <InputText
           v-model="installPath"
           :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
+          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,7 +23,7 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="border-0 bg-neutral-700 hover:bg-neutral-600"
+          class="bg-neutral-700 hover:bg-neutral-600 border-0"
           @click="browsePath"
         />
       </div>
@@ -33,7 +33,7 @@
         <Message
           v-if="pathError"
           severity="error"
-          class="w-full whitespace-pre-line"
+          class="whitespace-pre-line w-full"
         >
           {{ pathError }}
         </Message>

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -26,7 +26,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="size-full object-contain px-4 pt-4 opacity-25"
+          class="h-full w-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -52,7 +52,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 z-10 col-span-full row-span-full text-[4rem] text-green-500 opacity-100 transition-opacity [text-shadow:0.25rem_0_0.5rem_black] group-hover/task-card:opacity-20"
+      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
     />
   </div>
 </template>

apps/desktop-ui/src/components/maintenance/TaskListPanel.vue

@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="w-full text-center text-neutral-400">
+      <p class="text-neutral-400 w-full text-center">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
+        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,8 +45,7 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { useI18n } from 'vue-i18n'
-
+import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -56,7 +55,6 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
-const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -82,7 +80,8 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription')
+    detail: message ?? t('maintenance.error.defaultDescription'),
+    life: 10_000
   })
 }
 

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex size-full flex-col justify-between rounded-lg p-6">
-    <h1 class="m-0 font-inter text-xl font-semibold italic">
+  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
+    <h1 class="font-inter font-semibold text-xl m-0 italic">
       {{ $t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">

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

@@ -1,7 +1,7 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
+      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
     >
       <div class="relative m-8 text-center">
         <!-- Header -->
@@ -13,7 +13,7 @@
           <span>{{ $t('desktopUpdate.description') }}</span>
         </div>
 
-        <ProgressSpinner class="m-8 size-48" />
+        <ProgressSpinner class="m-8 w-48 h-48" />
 
         <!-- Console button -->
         <Button

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

@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="flex size-full flex-col">
+    <div class="w-full h-full flex flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex h-full flex-col"
+        class="flex flex-col h-full"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="mx-auto my-6 w-full max-w-2xl"
+          class="w-full max-w-2xl my-6 mx-auto"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"

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

@@ -1,21 +1,21 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
+      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
     >
-      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
+      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="flex w-full flex-wrap items-center gap-4">
+        <div class="w-full flex flex-wrap gap-4 items-center">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex items-center gap-4">
+          <div class="flex gap-4 items-center">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="mb-1 block">
+              <strong class="block mb-1">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="mb-1 block">
+              <span class="block mb-1">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-x-0 border-y border-solid border-neutral-700"
+          class="border-neutral-700 border-solid border-x-0 border-y"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex flex-row justify-between gap-4">
+        <div class="flex justify-between gap-4 flex-row">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"
@@ -189,7 +189,8 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue')
+      detail: t('maintenance.error.cannotContinue'),
+      life: 5_000
     })
   }
 }

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

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
+    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
       <div
-        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
+        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,7 +15,7 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 underline hover:text-blue-300"
+            class="text-blue-400 hover:text-blue-300 underline"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex justify-end pt-6">
+        <div class="flex pt-6 justify-end">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,7 +72,8 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail')
+      detail: t('install.settings.errorUpdatingConsentDetail'),
+      life: 3000
     })
   } finally {
     isUpdating.value = false

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

@@ -9,7 +9,7 @@
       />
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex min-w-110 flex-col gap-8 p-8">
+        <div class="flex flex-col gap-8 p-8 min-w-110">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-inside list-disc space-y-1 text-neutral-800">
+            <ul class="list-disc list-inside space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>

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

@@ -2,14 +2,14 @@
   <BaseViewTemplate dark>
     <div class="relative min-h-screen">
       <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
-        <div class="size-full">
+      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
+        <div class="h-full w-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
+      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
+          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
         >
-          <div class="flex justify-center gap-4">
+          <div class="flex gap-4 justify-center">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +71,10 @@
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
         <div
           v-if="terminalVisible && isError"
-          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
+          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
         >
           <div
-            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
+            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>

browser_tests/README.md

@@ -27,8 +27,7 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have the Node.js version from `.nvmrc` installed (currently v24).
-Then, set up the Chromium test driver:
+Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
 
 ```bash
 pnpm exec playwright install chromium --with-deps

browser_tests/assets/nodes/load_image_with_ksampler.json

@@ -1,47 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        { "name": "IMAGE", "type": "IMAGE", "links": null },
-        { "name": "MASK", "type": "MASK", "links": null }
-      ],
-      "properties": { "Node name for S&R": "LoadImage" },
-      "widgets_values": ["example.png", "image"]
-    },
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": [500, 50],
-      "size": [315, 262],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": null }],
-      "properties": { "Node name for S&R": "KSampler" },
-      "widgets_values": [0, "randomize", 20, 8, "euler", "normal", 1]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": { "offset": [0, 0], "scale": 1 }
-  },
-  "version": 0.4
-}

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

@@ -36,7 +36,14 @@
       "properties": {
         "Node name for S&R": "CheckpointLoaderSimple",
         "cnr_id": "comfy-core",
-        "ver": "0.3.65"
+        "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"]
     },

browser_tests/fixtures/ComfyPage.ts

@@ -206,7 +206,9 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
+    this.runButton = page
+      .getByTestId(TestIds.topbar.queueButton)
+      .getByRole('button', { name: 'Run' })
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
@@ -430,10 +432,7 @@ export const comfyPageFixture = base.extend<{
         'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
-        'Comfy.VersionCompatibility.DisableWarnings': true,
-        // Browser tests should opt into missing-model warnings explicitly so
-        // workflows do not render differently based on models present on disk.
-        'Comfy.Workflow.ShowMissingModelsWarning': false
+        'Comfy.VersionCompatibility.DisableWarnings': true
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -172,19 +172,6 @@ export class VueNodeHelpers {
   async enterSubgraph(nodeId?: string): Promise<void> {
     const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
     const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
-
-    // The footer tab button extends below the node body (visible area),
-    // but its bounding box center overlaps the node body div.
-    // Click at the bottom 25% of the button which is the genuinely visible
-    // and unobstructed area outside the node body boundary.
-    const box = await editButton.boundingBox()
-    if (!box) {
-      throw new Error(
-        'subgraph-enter-button has no bounding box: element may be hidden or not in DOM'
-      )
-    }
-    await editButton.click({
-      position: { x: box.width / 2, y: box.height * 0.75 }
-    })
+    await editButton.click()
   }
 }

browser_tests/fixtures/selectors.ts

@@ -33,7 +33,6 @@ export const TestIds = {
   },
   topbar: {
     queueButton: 'queue-button',
-    queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button'
   },
   nodeLibrary: {

browser_tests/helpers/actionbar.ts

@@ -29,10 +29,8 @@ class ComfyQueueButton {
   public readonly dropdownButton: Locator
   constructor(public readonly actionbar: ComfyActionbar) {
     this.root = actionbar.root.getByTestId(TestIds.topbar.queueButton)
-    this.primaryButton = this.root
-    this.dropdownButton = actionbar.root.getByTestId(
-      TestIds.topbar.queueModeMenuTrigger
-    )
+    this.primaryButton = this.root.locator('.p-splitbutton-button')
+    this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
   }
 
   public async toggleOptions() {

browser_tests/tests/dialog.spec.ts

@@ -89,17 +89,6 @@ test.describe('Execution error', () => {
 })
 
 test.describe('Missing models warning', () => {
-  test('Should be disabled by default in browser tests', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_models')
-
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).not.toBeVisible()
-  })
-
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.ShowMissingModelsWarning',
@@ -333,7 +322,7 @@ test.describe('Settings', () => {
     await editKeybindingButton.click()
 
     // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Enter your keybind')
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
@@ -345,7 +334,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('Modify keybinding')
+      .getByLabel('New Blank Workflow')
       .getByText('Save')
     await saveButton.click()
 

browser_tests/tests/imagePastePriority.spec.ts

@@ -1,58 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Image paste priority over stale node metadata',
-  { tag: ['@node'] },
-  () => {
-    test('Should not paste copied node when a LoadImage node is selected and clipboard has stale node metadata', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
-
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(initialCount).toBe(2)
-
-      // Copy the KSampler node (puts data-metadata in clipboard)
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      await ksamplerNodes[0].copy()
-
-      // Select the LoadImage node
-      const loadImageNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      await loadImageNodes[0].click('title')
-
-      // Simulate pasting when clipboard has stale node metadata (text/html
-      // with data-metadata) but no image file items. This replicates the bug
-      // scenario: user copied a node, then copied a web image (which replaces
-      // clipboard files but may leave stale text/html with node metadata).
-      await comfyPage.page.evaluate(() => {
-        const nodeData = { nodes: [{ type: 'KSampler', id: 99 }] }
-        const base64 = btoa(JSON.stringify(nodeData))
-        const html =
-          '<meta charset="utf-8"><div><span data-metadata="' +
-          base64 +
-          '"></span></div><span style="white-space:pre-wrap;">Text</span>'
-
-        const dataTransfer = new DataTransfer()
-        dataTransfer.setData('text/html', html)
-
-        const event = new ClipboardEvent('paste', {
-          clipboardData: dataTransfer,
-          bubbles: true,
-          cancelable: true
-        })
-        document.dispatchEvent(event)
-      })
-
-      await comfyPage.nextFrame()
-
-      // Node count should remain the same — stale node metadata should NOT
-      // be deserialized when a media node is selected.
-      const finalCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(finalCount).toBe(initialCount)
-    })
-  }
-)

browser_tests/tests/interaction.spec.ts

@@ -819,13 +819,16 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
       const activeWorkflowName =
         await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      const workflowPathA = `${workflowA}.json`
+      const workflowPathB = `${workflowB}.json`
+
       expect(openWorkflows).toEqual(
-        expect.arrayContaining([workflowA, workflowB])
+        expect.arrayContaining([workflowPathA, workflowPathB])
       )
-      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
-        openWorkflows.indexOf(workflowB)
+      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
+        openWorkflows.indexOf(workflowPathB)
       )
-      expect(activeWorkflowName).toEqual(workflowB)
+      expect(activeWorkflowName).toEqual(workflowPathB)
     })
   })
 

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -35,21 +35,18 @@ test.describe(
       test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
         comfyPage
       }) => {
-        const shouldUpload = filesWithUpload.has(fileName)
-        const uploadRequestPromise = shouldUpload
-          ? comfyPage.page.waitForRequest((req) =>
-              req.url().includes('/upload/')
-            )
-          : null
-
-        await comfyPage.dragDrop.dragAndDropFile(`workflowInMedia/${fileName}`)
-
-        if (uploadRequestPromise) {
-          const request = await uploadRequestPromise
-          expect(request.url()).toContain('/upload/')
-        } else {
-          await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+        const waitForUpload = filesWithUpload.has(fileName)
+        await comfyPage.dragDrop.dragAndDropFile(
+          `workflowInMedia/${fileName}`,
+          { waitForUpload }
+        )
+        if (waitForUpload) {
+          await comfyPage.page.waitForResponse(
+            (resp) => resp.url().includes('/view') && resp.status() !== 0,
+            { timeout: 10000 }
+          )
         }
+        await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
       })
     })
 

browser_tests/tests/rerouteNode.spec.ts

@@ -13,9 +13,9 @@ test.describe('Reroute Node', { tag: ['@screenshot', '@node'] }, () => {
   })
 
   test('loads from inserted workflow', async ({ comfyPage }) => {
-    const workflowName = 'single_connected_reroute_node'
+    const workflowName = 'single_connected_reroute_node.json'
     await comfyPage.workflow.setupWorkflowsDirectory({
-      [`${workflowName}.json`]: `links/${workflowName}.json`
+      [workflowName]: 'links/single_connected_reroute_node.json'
     })
     await comfyPage.setup()
     await comfyPage.menu.topbar.triggerTopbarCommand(['New'])

browser_tests/tests/sidebar/workflows.spec.ts

@@ -21,12 +21,14 @@ test.describe('Workflows sidebar', () => {
 
   test('Can create new blank workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
 
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      '*Unsaved Workflow (2)'
+      '*Unsaved Workflow.json',
+      '*Unsaved Workflow (2).json'
     ])
   })
 
@@ -39,37 +41,37 @@ test.describe('Workflows sidebar', () => {
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1', 'workflow2'])
+      expect.arrayContaining(['workflow1.json', 'workflow2.json'])
     )
   })
 
   test('Can duplicate workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
 
     expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
-      expect.arrayContaining(['workflow1'])
+      expect.arrayContaining(['workflow1.json'])
     )
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)'
+      'workflow1.json',
+      '*workflow1 (Copy).json'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)'
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json'
     ])
 
     await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      'workflow1',
-      '*workflow1 (Copy)',
-      '*workflow1 (Copy) (2)',
-      '*workflow1 (Copy) (3)'
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json',
+      '*workflow1 (Copy) (3).json'
     ])
   })
 
@@ -83,12 +85,12 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
     const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
 
-    await tab.insertWorkflow(tab.getPersistedItem('workflow1'))
+    await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
     await expect
       .poll(() => comfyPage.nodeOps.getNodeCount())
       .toEqual(originalNodeCount + 1)
 
-    await tab.getPersistedItem('workflow1').click()
+    await tab.getPersistedItem('workflow1.json').click()
     await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
   })
 
@@ -111,22 +113,22 @@ test.describe('Workflows sidebar', () => {
     const openedWorkflow = tab.getOpenedItem('foo/bar')
     await tab.renameWorkflow(openedWorkflow, 'foo/baz')
     expect(await tab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow',
-      'foo/baz'
+      '*Unsaved Workflow.json',
+      'foo/baz.json'
     ])
   })
 
   test('Can save workflow as', async ({ comfyPage }) => {
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow3')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', 'workflow3'])
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow4')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', 'workflow3', 'workflow4'])
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
   })
 
   test('Exported workflow does not contain localized slot names', async ({
@@ -182,15 +184,15 @@ test.describe('Workflows sidebar', () => {
   })
 
   test('Can save workflow as with same name', async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.saveWorkflow('workflow5')
+    await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
+      'workflow5.json'
     ])
 
-    await comfyPage.menu.topbar.saveWorkflowAs('workflow5')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
     await comfyPage.confirmDialog.click('overwrite')
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow5'
+      'workflow5.json'
     ])
   })
 
@@ -210,25 +212,25 @@ test.describe('Workflows sidebar', () => {
 
   test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
     const topbar = comfyPage.menu.topbar
-    await topbar.saveWorkflow('workflow1')
-    await topbar.saveWorkflowAs('workflow2')
+    await topbar.saveWorkflow('workflow1.json')
+    await topbar.saveWorkflowAs('workflow2.json')
     await comfyPage.nextFrame()
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow1', 'workflow2'])
+      .toEqual(['workflow1.json', 'workflow2.json'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow2')
+      .toEqual('workflow2.json')
 
-    await topbar.saveWorkflowAs('workflow1')
+    await topbar.saveWorkflowAs('workflow1.json')
     await comfyPage.confirmDialog.click('overwrite')
-    // The old workflow1 should be deleted and the new one should be saved.
+    // The old workflow1.json should be deleted and the new one should be saved.
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['workflow2', 'workflow1'])
+      .toEqual(['workflow2.json', 'workflow1.json'])
     await expect
       .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
-      .toEqual('workflow1')
+      .toEqual('workflow1.json')
   })
 
   test('Does not report warning when switching between opened workflows', async ({
@@ -264,15 +266,17 @@ test.describe('Workflows sidebar', () => {
     )
     await closeButton.click()
     expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
   test('Can close saved workflow with command', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await comfyPage.menu.topbar.saveWorkflow('workflow1')
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
     await comfyPage.command.executeCommand('Workspace.CloseWorkflow')
-    expect(await tab.getOpenedWorkflowNames()).toEqual(['*Unsaved Workflow'])
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
   })
 
   test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
@@ -280,7 +284,7 @@ test.describe('Workflows sidebar', () => {
 
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18'
+    const filename = 'workflow18.json'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -291,14 +295,14 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
   test('Can delete workflows', async ({ comfyPage }) => {
     const { topbar, workflowsTab } = comfyPage.menu
 
-    const filename = 'workflow18'
+    const filename = 'workflow18.json'
     await topbar.saveWorkflow(filename)
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
 
@@ -310,7 +314,7 @@ test.describe('Workflows sidebar', () => {
 
     await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
     expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
+      '*Unsaved Workflow.json'
     ])
   })
 
@@ -322,11 +326,13 @@ test.describe('Workflows sidebar', () => {
     const { workflowsTab } = comfyPage.menu
     await workflowsTab.open()
 
-    await workflowsTab.getPersistedItem('workflow1').click({ button: 'right' })
+    await workflowsTab
+      .getPersistedItem('workflow1.json')
+      .click({ button: 'right' })
     await comfyPage.contextMenu.clickMenuItem('Duplicate')
     await expect
       .poll(() => workflowsTab.getOpenedWorkflowNames())
-      .toEqual(['*Unsaved Workflow', '*workflow1 (Copy)'])
+      .toEqual(['*Unsaved Workflow.json', '*workflow1 (Copy).json'])
   })
 
   test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
@@ -338,7 +344,7 @@ test.describe('Workflows sidebar', () => {
 
     // Wait for workflow to appear in Browse section after sync
     const workflowItem =
-      comfyPage.menu.workflowsTab.getPersistedItem('workflow1')
+      comfyPage.menu.workflowsTab.getPersistedItem('workflow1.json')
     await expect(workflowItem).toBeVisible({ timeout: 3000 })
 
     const nodeCount = await comfyPage.nodeOps.getGraphNodesCount()
@@ -355,7 +361,7 @@ test.describe('Workflows sidebar', () => {
     }
 
     await comfyPage.page.dragAndDrop(
-      '.comfyui-workflows-browse .node-label:has-text("workflow1")',
+      '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
       '#graph-canvas',
       { targetPosition }
     )

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

@@ -22,10 +22,8 @@ test.describe('Vue Node Bypass', () => {
       await comfyPage.page.getByText('Load Checkpoint').click()
       await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
 
-      const checkpointNode = comfyPage.page
-        .locator('[data-node-id]')
-        .filter({ hasText: 'Load Checkpoint' })
-        .getByTestId('node-inner-wrapper')
+      const checkpointNode =
+        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
       await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
@@ -43,14 +41,8 @@ test.describe('Vue Node Bypass', () => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
 
-    const checkpointNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'Load Checkpoint' })
-      .getByTestId('node-inner-wrapper')
-    const ksamplerNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'KSampler' })
-      .getByTestId('node-inner-wrapper')
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)

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

@@ -3,7 +3,7 @@ import {
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
 
-const ERROR_CLASS = /ring-destructive-background/
+const ERROR_CLASS = /border-node-stroke-error/
 
 test.describe('Vue Node Error', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -18,10 +18,9 @@ test.describe('Vue Node Error', () => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
     // Expect error state on missing unknown node
-    const unknownNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'UNKNOWN NODE' })
-      .getByTestId('node-inner-wrapper')
+    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'UNKNOWN NODE'
+    })
     await expect(unknownNode).toHaveClass(ERROR_CLASS)
   })
 
@@ -32,10 +31,7 @@ test.describe('Vue Node Error', () => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
     await comfyPage.runButton.click()
 
-    const raiseErrorNode = comfyPage.page
-      .locator('[data-node-id]')
-      .filter({ hasText: 'Raise Error' })
-      .getByTestId('node-inner-wrapper')
+    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
     await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
   })
 })

docs/architecture/change-tracker.md

@@ -1,91 +0,0 @@
-# Change Tracker (Undo/Redo System)
-
-The `ChangeTracker` class (`src/scripts/changeTracker.ts`) manages undo/redo
-history by comparing serialized graph snapshots.
-
-## How It Works
-
-`checkState()` is the core method. It:
-
-1. Serializes the current graph via `app.rootGraph.serialize()`
-2. Deep-compares the result against the last known `activeState`
-3. If different, pushes `activeState` onto `undoQueue` and replaces it
-
-**It is not reactive.** Changes to the graph (widget values, node positions,
-links, etc.) are only captured when `checkState()` is explicitly triggered.
-
-## Automatic Triggers
-
-These are set up once in `ChangeTracker.init()`:
-
-| Trigger                             | Event / Hook                                       | What It Catches                                     |
-| ----------------------------------- | -------------------------------------------------- | --------------------------------------------------- |
-| Keyboard (non-modifier, non-repeat) | `window` `keydown`                                 | Shortcuts, typing in canvas                         |
-| Modifier key release                | `window` `keyup`                                   | Releasing Ctrl/Shift/Alt/Meta                       |
-| Mouse click                         | `window` `mouseup`                                 | General clicks on native DOM                        |
-| Canvas mouse up                     | `LGraphCanvas.processMouseUp` override             | LiteGraph canvas interactions                       |
-| Number/string dialog                | `LGraphCanvas.prompt` override                     | Dialog popups for editing widgets                   |
-| Context menu close                  | `LiteGraph.ContextMenu.close` override             | COMBO widget menus in LiteGraph                     |
-| Active input element                | `bindInput` (change/input/blur on focused element) | Native HTML input edits                             |
-| Prompt queued                       | `api` `promptQueued` event                         | Dynamic widget changes on queue                     |
-| Graph cleared                       | `api` `graphCleared` event                         | Full graph clear                                    |
-| Transaction end                     | `litegraph:canvas` `after-change` event            | Batched operations via `beforeChange`/`afterChange` |
-
-## When You Must Call `checkState()` Manually
-
-The automatic triggers above are designed around LiteGraph's native DOM
-rendering. They **do not cover**:
-
-- **Vue-rendered widgets** — Vue handles events internally without triggering
-  native DOM events that the tracker listens to (e.g., `mouseup` on a Vue
-  dropdown doesn't bubble the same way as a native LiteGraph widget click)
-- **Programmatic graph mutations** — Any code that modifies the graph outside
-  of user interaction (e.g., applying a template, pasting nodes, aligning)
-- **Async operations** — File uploads, API calls that change widget values
-  after the initial user gesture
-
-### Pattern for Manual Calls
-
-```typescript
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-
-// After mutating the graph:
-useWorkflowStore().activeWorkflow?.changeTracker?.checkState()
-```
-
-### Existing Manual Call Sites
-
-These locations already call `checkState()` explicitly:
-
-- `WidgetSelectDropdown.vue` — After dropdown selection and file upload
-- `ColorPickerButton.vue` — After changing node colors
-- `NodeSearchBoxPopover.vue` — After adding a node from search
-- `useAppSetDefaultView.ts` — After setting default view
-- `useSelectionOperations.ts` — After align, copy, paste, duplicate, group
-- `useSelectedNodeActions.ts` — After pin, bypass, collapse
-- `useGroupMenuOptions.ts` — After group operations
-- `useSubgraphOperations.ts` — After subgraph enter/exit
-- `useCanvasRefresh.ts` — After canvas refresh
-- `useCoreCommands.ts` — After metadata/subgraph commands
-- `workflowService.ts` — After workflow service operations
-
-## Transaction Guards
-
-For operations that make multiple changes that should be a single undo entry:
-
-```typescript
-changeTracker.beforeChange()
-// ... multiple graph mutations ...
-changeTracker.afterChange() // calls checkState() when nesting count hits 0
-```
-
-The `litegraph:canvas` custom event also supports this with `before-change` /
-`after-change` sub-types.
-
-## Key Invariants
-
-- `checkState()` is a no-op during `loadGraphData` (guarded by
-  `isLoadingGraph`) to prevent cross-workflow corruption
-- `checkState()` is a no-op when `changeCount > 0` (inside a transaction)
-- `undoQueue` is capped at 50 entries (`MAX_HISTORY`)
-- `graphEqual` ignores node order and `ds` (pan/zoom) when comparing

docs/release-process.md

@@ -1,62 +0,0 @@
-# Release Process
-
-## Bump Types
-
-All releases use `release-version-bump.yaml`. Effects differ by bump type:
-
-| Bump       | Target     | Creates branches?                     | GitHub release               |
-| ---------- | ---------- | ------------------------------------- | ---------------------------- |
-| Minor      | `main`     | `core/` + `cloud/` for previous minor | Published, "latest"          |
-| Patch      | `main`     | No                                    | Published, "latest"          |
-| Patch      | `core/X.Y` | No                                    | **Draft** (uncheck "latest") |
-| Prerelease | any        | No                                    | Draft + prerelease           |
-
-**Minor bump** (e.g. 1.41→1.42): freezes the previous minor into `core/1.41`
-and `cloud/1.41`, branched from the commit _before_ the bump. Nightly patch
-bumps on `main` are convenience snapshots — no branches created.
-
-**Patch on `core/X.Y`**: publishes a hotfix draft release. Must not be marked
-"latest" so `main` stays current.
-
-### Dual-homed commits
-
-When a minor bump happens, unreleased commits appear in both places:
-
-```
-v1.40.1 ── A ── B ── C ── [bump to 1.41.0]
-                │
-                └── core/1.40
-```
-
-A, B, C become v1.41.0 on `main` AND sit on `core/1.40` (where they could
-later ship as v1.40.2). Same commits, no divergence — the branch just prevents
-1.41+ features from mixing in so ComfyUI can stay on 1.40.x.
-
-## Backporting
-
-1. Add `needs-backport` + version label to the merged PR
-2. `pr-backport.yaml` cherry-picks and creates a backport PR
-3. Conflicts produce a comment with details and an agent prompt
-
-## Publishing
-
-Merged PRs with the `Release` label trigger `release-draft-create.yaml`,
-publishing to GitHub Releases (`dist.zip`), PyPI (`comfyui-frontend-package`),
-and npm (`@comfyorg/comfyui-frontend-types`).
-
-## Bi-weekly ComfyUI Integration
-
-`release-biweekly-comfyui.yaml` runs every other Monday — if the next `core/`
-branch has unreleased commits, it triggers a patch bump and drafts a PR to
-`Comfy-Org/ComfyUI` updating `requirements.txt`.
-
-## Workflows
-
-| Workflow                        | Purpose                                          |
-| ------------------------------- | ------------------------------------------------ |
-| `release-version-bump.yaml`     | Bump version, create Release PR                  |
-| `release-draft-create.yaml`     | Build + publish to GitHub/PyPI/npm               |
-| `release-branch-create.yaml`    | Create `core/` + `cloud/` branches (minor/major) |
-| `release-biweekly-comfyui.yaml` | Auto-patch + ComfyUI requirements PR             |
-| `pr-backport.yaml`              | Cherry-pick fixes to stable branches             |
-| `cloud-backport-tag.yaml`       | Tag cloud branch merges                          |

global.d.ts

@@ -35,7 +35,6 @@ interface Window {
     mixpanel_token?: string
     posthog_project_token?: string
     posthog_api_host?: string
-    posthog_config?: Record<string, unknown>
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

knip.config.ts

@@ -20,10 +20,6 @@ const config: KnipConfig = {
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
-    'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
-    },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     }
@@ -36,9 +32,7 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated manager types
@@ -53,9 +47,7 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.3",
+  "version": "1.41.13",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -195,9 +195,6 @@
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "catalog:"
   },
-  "engines": {
-    "node": "24.x"
-  },
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

public/splash.css

@@ -1,51 +0,0 @@
-/* Pre-Vue splash loader — colors set by inline script */
-#splash-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  contain: strict;
-}
-#splash-loader svg {
-  width: min(200px, 50vw);
-  height: auto;
-  transform: translateZ(0);
-}
-#splash-loader .wave-group {
-  animation: splash-rise 4s ease-in-out infinite alternate;
-  will-change: transform;
-  transform: translateZ(0);
-}
-#splash-loader .wave-path {
-  animation: splash-wave 1.2s linear infinite;
-  will-change: transform;
-  transform: translateZ(0);
-}
-@keyframes splash-rise {
-  from {
-    transform: translateY(280px);
-  }
-  to {
-    transform: translateY(-80px);
-  }
-}
-@keyframes splash-wave {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-880px);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  #splash-loader .wave-group,
-  #splash-loader .wave-path {
-    animation: none;
-  }
-  #splash-loader .wave-group {
-    transform: translateY(-80px);
-  }
-}

src/App.vue

@@ -2,13 +2,20 @@
   <router-view />
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { computed, onMounted, watch } from 'vue'
+import { computed, onMounted } from 'vue'
 
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -24,16 +31,6 @@ app.extensionManager = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 
-watch(
-  isLoading,
-  (loading, prevLoading) => {
-    if (prevLoading && !loading) {
-      document.getElementById('splash-loader')?.remove()
-    }
-  },
-  { flush: 'post' }
-)
-
 const showContextMenu = (event: MouseEvent) => {
   const { target } = event
   switch (true) {

src/components/TopMenuSection.test.ts

@@ -166,22 +166,13 @@ describe('TopMenuSection', () => {
   })
 
   describe('authentication state', () => {
-    function createLegacyTabBarWrapper() {
-      const pinia = createTestingPinia({ createSpy: vi.fn })
-      const settingStore = useSettingStore(pinia)
-      vi.mocked(settingStore.get).mockImplementation((key) =>
-        key === 'Comfy.UI.TabBarLayout' ? 'Legacy' : undefined
-      )
-      return createWrapper({ pinia })
-    }
-
     describe('when user is logged in', () => {
       beforeEach(() => {
         mockData.isLoggedIn = true
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createLegacyTabBarWrapper()
+        const wrapper = createWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -195,7 +186,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createLegacyTabBarWrapper()
+          const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -203,7 +194,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createLegacyTabBarWrapper()
+          const wrapper = createWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })

src/components/TopMenuSection.vue

@@ -34,7 +34,17 @@
             </Button>
           </div>
 
-          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
+          <div
+            ref="actionbarContainerRef"
+            :class="
+              cn(
+                'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
+                hasAnyError
+                  ? 'border-destructive-background-hover'
+                  : 'border-interface-stroke'
+              )
+            "
+          >
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
@@ -45,7 +55,6 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
-              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -61,7 +70,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[comfy--send] size-4" />
+              <i class="icon-[lucide--share-2] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>
@@ -114,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLocalStorage, useMutationObserver } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -136,7 +145,6 @@ import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
 import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -160,7 +168,6 @@ const { isLoggedIn } = useCurrentUser()
 const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const executionErrorStore = useExecutionErrorStore()
-const actionBarButtonStore = useActionBarButtonStore()
 const queueUIStore = useQueueUIStore()
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
@@ -175,45 +182,8 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-/**
- * Whether the actionbar container has any visible docked buttons
- * (excluding ComfyActionbar, which uses position:fixed when floating
- * and does not contribute to the container's visual layout).
- */
-const hasDockedButtons = computed(() => {
-  if (actionBarButtonStore.buttons.length > 0) return true
-  if (hasLegacyContent.value) return true
-  if (isLoggedIn.value && !isIntegratedTabBar.value) return true
-  if (isDesktop && !isIntegratedTabBar.value) return true
-  if (isCloud && flags.workflowSharingEnabled) return true
-  if (!isRightSidePanelOpen.value) return true
-  return false
-})
-const isActionbarContainerEmpty = computed(
-  () => isActionbarFloating.value && !hasDockedButtons.value
-)
-const actionbarContainerClass = computed(() => {
-  const base =
-    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
-
-  if (isActionbarContainerEmpty.value) {
-    return cn(
-      base,
-      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
-      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
-      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-    )
-  }
-
-  const borderClass =
-    !isActionbarFloating.value && hasAnyError.value
-      ? 'border-destructive-background-hover'
-      : 'border-interface-stroke'
-
-  return cn(base, 'px-2', borderClass)
-})
 const isIntegratedTabBar = computed(
-  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
+  () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()
@@ -263,25 +233,6 @@ const rightSidePanelTooltipConfig = computed(() =>
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
-const hasLegacyContent = ref(false)
-
-function checkLegacyContent() {
-  const el = legacyCommandsContainerRef.value
-  if (!el) {
-    hasLegacyContent.value = false
-    return
-  }
-  // Mirror the CSS: [&:not(:has(*>*:not(:empty)))]:hidden
-  hasLegacyContent.value =
-    el.querySelector(':scope > * > *:not(:empty)') !== null
-}
-
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
-  childList: true,
-  subtree: true,
-  characterData: true
-})
-
 onMounted(() => {
   if (legacyCommandsContainerRef.value) {
     app.menu.element.style.width = 'fit-content'

src/components/actionbar/BatchCountEdit.test.ts

@@ -1,98 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import { useQueueSettingsStore } from '@/stores/queueStore'
-
-import BatchCountEdit from './BatchCountEdit.vue'
-
-const maxBatchCount = 16
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: (settingId: string) =>
-      settingId === 'Comfy.QueueButton.BatchCountLimit' ? maxBatchCount : 1
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: {
-        increment: 'Increment',
-        decrement: 'Decrement'
-      },
-      menu: {
-        batchCount: 'Batch Count'
-      }
-    }
-  }
-})
-
-function createWrapper(initialBatchCount = 1) {
-  const pinia = createTestingPinia({
-    createSpy: vi.fn,
-    stubActions: false,
-    initialState: {
-      queueSettingsStore: {
-        batchCount: initialBatchCount
-      }
-    }
-  })
-
-  const wrapper = mount(BatchCountEdit, {
-    global: {
-      plugins: [pinia, i18n],
-      directives: {
-        tooltip: () => {}
-      }
-    }
-  })
-
-  const queueSettingsStore = useQueueSettingsStore()
-
-  return { wrapper, queueSettingsStore }
-}
-
-describe('BatchCountEdit', () => {
-  it('doubles the current batch count when increment is clicked', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(3)
-
-    await wrapper.get('button[aria-label="Increment"]').trigger('click')
-
-    expect(queueSettingsStore.batchCount).toBe(6)
-  })
-
-  it('halves the current batch count when decrement is clicked', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(9)
-
-    await wrapper.get('button[aria-label="Decrement"]').trigger('click')
-
-    expect(queueSettingsStore.batchCount).toBe(4)
-  })
-
-  it('clamps typed values to queue limits on blur', async () => {
-    const { wrapper, queueSettingsStore } = createWrapper(2)
-    const input = wrapper.get('input')
-
-    await input.setValue('999')
-    await input.trigger('blur')
-    await nextTick()
-
-    expect(queueSettingsStore.batchCount).toBe(maxBatchCount)
-    expect((input.element as HTMLInputElement).value).toBe(
-      String(maxBatchCount)
-    )
-
-    await input.setValue('0')
-    await input.trigger('blur')
-    await nextTick()
-
-    expect(queueSettingsStore.batchCount).toBe(1)
-    expect((input.element as HTMLInputElement).value).toBe('1')
-  })
-})

src/components/actionbar/BatchCountEdit.vue

@@ -1,129 +1,71 @@
 <template>
   <div
     v-tooltip.bottom="{
-      value: t('menu.batchCount'),
+      value: $t('menu.batchCount'),
       showDelay: 600
     }"
-    class="batch-count h-full"
-    :aria-label="t('menu.batchCount')"
+    class="batch-count"
+    :aria-label="$t('menu.batchCount')"
   >
-    <div
-      class="flex h-full w-14 overflow-hidden rounded-l-lg bg-secondary-background"
-    >
-      <input
-        ref="batchCountInputRef"
-        v-model="batchCountInput"
-        type="text"
-        inputmode="numeric"
-        :aria-label="t('menu.batchCount')"
-        :class="inputClass"
-        @focus="onInputFocus"
-        @input="onInput"
-        @blur="onInputBlur"
-        @keydown.enter.prevent="onInputEnter"
-      />
-      <div class="flex h-full w-6 flex-col">
-        <Button
-          variant="secondary"
-          size="unset"
-          :aria-label="t('g.increment')"
-          :class="cn(stepButtonClass, incrementButtonClass)"
-          :disabled="isIncrementDisabled"
-          @click="incrementBatchCount"
-        >
-          <TinyChevronIcon rotate-up />
-        </Button>
-        <Button
-          variant="secondary"
-          size="unset"
-          :aria-label="t('g.decrement')"
-          :class="cn(stepButtonClass, decrementButtonClass)"
-          :disabled="isDecrementDisabled"
-          @click="decrementBatchCount"
-        >
-          <TinyChevronIcon />
-        </Button>
-      </div>
-    </div>
+    <InputNumber
+      v-model="batchCount"
+      class="w-14"
+      :min="minQueueCount"
+      :max="maxQueueCount"
+      fluid
+      show-buttons
+      :pt="{
+        incrementButton: {
+          class: 'w-6',
+          onmousedown: () => {
+            handleClick(true)
+          }
+        },
+        decrementButton: {
+          class: 'w-6',
+          onmousedown: () => {
+            handleClick(false)
+          }
+        }
+      }"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import InputNumber from 'primevue/inputnumber'
+import { computed } from 'vue'
 
-import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
-import { cn } from '@/utils/tailwindUtil'
-
-import TinyChevronIcon from './TinyChevronIcon.vue'
-
-const { t } = useI18n()
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)
+const minQueueCount = 1
 
 const settingStore = useSettingStore()
-const minQueueCount = 1
 const maxQueueCount = computed(() =>
   settingStore.get('Comfy.QueueButton.BatchCountLimit')
 )
 
-const batchCountInputRef = ref<HTMLInputElement | null>(null)
-const batchCountInput = ref(String(batchCount.value))
-const isEditing = ref(false)
-
-const isIncrementDisabled = computed(
-  () => batchCount.value >= maxQueueCount.value
-)
-const isDecrementDisabled = computed(() => batchCount.value <= minQueueCount)
-const inputClass =
-  'h-full min-w-0 flex-1 border-none bg-secondary-background pl-1 pr-0 text-center text-sm font-normal tabular-nums text-base-foreground outline-none'
-const stepButtonClass =
-  'h-1/2 w-full rounded-none border-none p-0 text-muted-foreground hover:bg-secondary-background-hover disabled:cursor-not-allowed disabled:opacity-50'
-const incrementButtonClass = 'rounded-tr-none border-b border-border-subtle'
-const decrementButtonClass = 'rounded-br-none'
-
-watch(batchCount, (nextBatchCount) => {
-  if (!isEditing.value) {
-    batchCountInput.value = String(nextBatchCount)
+const handleClick = (increment: boolean) => {
+  let newCount: number
+  if (increment) {
+    const originalCount = batchCount.value - 1
+    newCount = Math.min(originalCount * 2, maxQueueCount.value)
+  } else {
+    const originalCount = batchCount.value + 1
+    newCount = Math.floor(originalCount / 2)
   }
-})
 
-const clampBatchCount = (nextBatchCount: number): number =>
-  Math.min(Math.max(nextBatchCount, minQueueCount), maxQueueCount.value)
-
-const setBatchCount = (nextBatchCount: number) => {
-  batchCount.value = clampBatchCount(nextBatchCount)
-  batchCountInput.value = String(batchCount.value)
-}
-
-const incrementBatchCount = () => {
-  setBatchCount(batchCount.value * 2)
-}
-
-const decrementBatchCount = () => {
-  setBatchCount(Math.floor(batchCount.value / 2))
-}
-
-const onInputFocus = () => {
-  isEditing.value = true
-}
-
-const onInput = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  batchCountInput.value = input.value.replace(/[^0-9]/g, '')
-}
-
-const onInputBlur = () => {
-  isEditing.value = false
-  const parsedInput = Number.parseInt(batchCountInput.value, 10)
-  setBatchCount(Number.isNaN(parsedInput) ? minQueueCount : parsedInput)
-}
-
-const onInputEnter = () => {
-  batchCountInputRef.value?.blur()
+  batchCount.value = newCount
 }
 </script>
+
+<style scoped>
+:deep(.p-inputtext) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+</style>

src/components/actionbar/ComfyActionbar.vue

@@ -119,14 +119,9 @@ import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
 
-const {
-  topMenuContainer,
-  queueOverlayExpanded = false,
-  hasAnyError = false
-} = defineProps<{
+const { topMenuContainer, queueOverlayExpanded = false } = defineProps<{
   topMenuContainer?: HTMLElement | null
   queueOverlayExpanded?: boolean
-  hasAnyError?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -440,12 +435,7 @@ const panelClass = computed(() =>
     isDragging.value && 'pointer-events-none select-none',
     isDocked.value
       ? 'static border-none bg-transparent p-0'
-      : [
-          'fixed shadow-interface',
-          hasAnyError
-            ? 'border-destructive-background-hover'
-            : 'border-interface-stroke'
-        ]
+      : 'fixed shadow-interface'
   )
 )
 </script>

src/components/actionbar/ComfyRunButton/ComfyQueueButton.test.ts

@@ -1,7 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type {
@@ -41,9 +41,28 @@ vi.mock('@/stores/workspaceStore', () => ({
   })
 }))
 
-const BatchCountEditStub = {
-  template: '<div data-testid="batch-count-edit" />'
-}
+const SplitButtonStub = defineComponent({
+  name: 'SplitButton',
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    severity: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  template: `
+    <button
+      data-testid="split-button"
+      :data-label="label"
+      :data-severity="severity"
+    >
+      <slot name="icon" />
+    </button>
+  `
+})
 
 const i18n = createI18n({
   legacy: false,
@@ -88,26 +107,14 @@ function createWrapper() {
         tooltip: () => {}
       },
       stubs: {
-        BatchCountEdit: BatchCountEditStub,
-        DropdownMenuRoot: { template: '<div><slot /></div>' },
-        DropdownMenuTrigger: { template: '<div><slot /></div>' },
-        DropdownMenuPortal: { template: '<div><slot /></div>' },
-        DropdownMenuContent: { template: '<div><slot /></div>' },
-        DropdownMenuItem: { template: '<div><slot /></div>' }
+        SplitButton: SplitButtonStub,
+        BatchCountEdit: true
       }
     }
   })
 }
 
 describe('ComfyQueueButton', () => {
-  it('renders the batch count control before the run button', () => {
-    const wrapper = createWrapper()
-    const controls = wrapper.get('.queue-button-group').element.children
-
-    expect(controls[0]?.getAttribute('data-testid')).toBe('batch-count-edit')
-    expect(controls[1]?.getAttribute('data-testid')).toBe('queue-button')
-  })
-
   it('keeps the run instant presentation while idle even with active jobs', async () => {
     const wrapper = createWrapper()
     const queueSettingsStore = useQueueSettingsStore()
@@ -117,10 +124,10 @@ describe('ComfyQueueButton', () => {
     queueStore.runningTasks = [createTask('run-1', 'in_progress')]
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const splitButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
+    expect(splitButton.attributes('data-label')).toBe('Run (Instant)')
+    expect(splitButton.attributes('data-severity')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })
 
@@ -131,10 +138,10 @@ describe('ComfyQueueButton', () => {
     queueSettingsStore.mode = 'instant-running'
     await nextTick()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const splitButton = wrapper.get('[data-testid="queue-button"]')
 
-    expect(queueButton.text()).toContain('Stop Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('destructive')
+    expect(splitButton.attributes('data-label')).toBe('Stop Run (Instant)')
+    expect(splitButton.attributes('data-severity')).toBe('danger')
     expect(wrapper.find('.icon-\\[lucide--square\\]').exists()).toBe(true)
   })
 
@@ -152,17 +159,19 @@ describe('ComfyQueueButton', () => {
     await nextTick()
 
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    const queueButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
-    expect(queueButtonWhileStopping.text()).toContain('Run (Instant)')
-    expect(queueButtonWhileStopping.attributes('data-variant')).toBe('primary')
+    const splitButtonWhileStopping = wrapper.get('[data-testid="queue-button"]')
+    expect(splitButtonWhileStopping.attributes('data-label')).toBe(
+      'Run (Instant)'
+    )
+    expect(splitButtonWhileStopping.attributes('data-severity')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
 
     expect(commandStore.execute).not.toHaveBeenCalled()
 
-    const queueButton = wrapper.get('[data-testid="queue-button"]')
+    const splitButton = wrapper.get('[data-testid="queue-button"]')
     expect(queueSettingsStore.mode).toBe('instant-idle')
-    expect(queueButton.text()).toContain('Run (Instant)')
-    expect(queueButton.attributes('data-variant')).toBe('primary')
+    expect(splitButton.attributes('data-label')).toBe('Run (Instant)')
+    expect(splitButton.attributes('data-severity')).toBe('primary')
     expect(wrapper.find('.icon-\\[lucide--fast-forward\\]').exists()).toBe(true)
   })