fix: followup: add once option to subscription tier watcher in PostHogTelemetryProvider (#9835)

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

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

@@ -0,0 +1,150 @@
+---
+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

@@ -0,0 +1,68 @@
+# 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

@@ -0,0 +1,42 @@
+# 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

@@ -0,0 +1,150 @@
+# 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

@@ -0,0 +1,96 @@
+# 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,6 +38,9 @@ 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: lts/*
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -4,6 +4,8 @@ name: 'CI: Tests Storybook'
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
+  push:
+    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -138,6 +140,29 @@ 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,6 +13,8 @@ on:
     branches:
       - 'cloud/*'
       - 'main'
+  pull_request:
+    types: [labeled, synchronize]
   workflow_dispatch:
 
 permissions: {}
@@ -23,17 +25,51 @@ concurrency:
 
 jobs:
   dispatch:
-    # Fork guard: prevent forks from dispatching to the cloud repo
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    # 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'))))
     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 "${GITHUB_SHA}" \
-            --arg branch "${GITHUB_REF_NAME}" \
-            '{ref: $ref, branch: $branch}')"
+            --arg ref "${REF}" \
+            --arg branch "${BRANCH}" \
+            --arg pr_number "${PR_NUMBER}" \
+            --arg variant "${VARIANT}" \
+            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

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

@@ -0,0 +1,39 @@
+---
+# 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: '20'
+          node-version-file: '.nvmrc'
           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: 22
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: 'frontend/.nvmrc'
 
       - 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: 'lts/*'
+          node-version-file: '.nvmrc'
 
       - 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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: 'lts/*'
+          node-version-file: '.nvmrc'
           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: lts/*
+          node-version-file: '.nvmrc'
 
       - 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: '24.x'
+          node-version-file: '.nvmrc'
           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: '20'
+          node-version-file: '.nvmrc'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.gitignore

@@ -26,6 +26,7 @@ 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 (v24) and pnpm
+  - Node.js (see `.nvmrc` for the required version) and pnpm
   - Git for version control
   - A running ComfyUI backend instance (otherwise, you can use `pnpm dev:cloud`)
 
@@ -87,6 +87,10 @@ navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to
 > ⚠️ IMPORTANT:
 > The dev server will NOT load JavaScript extensions from custom nodes. Only core extensions (built into the frontend) will be loaded. This is because the shim system that allows custom node JavaScript to import frontend modules only works in production builds. Python custom nodes still function normally. See [Extension Development Guide](docs/extensions/development.md) for details and workarounds. And See [Extension Overview](docs/extensions/README.md) for extensions overview.
 
+## Troubleshooting
+
+If you run into issues during development (e.g. `pnpm dev` hanging, TypeScript errors after pulling, lock file conflicts), see [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for common fixes.
+
 ## Development Workflow
 
 ### Architecture Decision Records

TROUBLESHOOTING.md

@@ -0,0 +1,368 @@
+# Troubleshooting Guide
+
+This guide helps you resolve common issues when developing ComfyUI Frontend.
+
+## Quick Diagnostic Flowchart
+
+```mermaid
+flowchart TD
+    A[Having Issues?] --> B{What's the problem?}
+    B -->|Dev server stuck| C[nx serve hangs]
+    B -->|Build errors| D[Check build issues]
+    B -->|Lint errors| Q[Check linting issues]
+    B -->|Dependency issues| E[Package problems]
+    B -->|Other| F[See FAQ below]
+
+    Q --> R{oxlint or ESLint?}
+    R -->|oxlint| S[Check .oxlintrc.json<br/>and run pnpm lint:fix]
+    R -->|ESLint| T[Check eslint.config.ts<br/>and run pnpm lint:fix]
+    S --> L
+    T --> L
+
+    C --> G{Tried quick fixes?}
+    G -->|No| H[Run: pnpm i]
+    G -->|Still stuck| I[Run: pnpm clean]
+    I --> J{Still stuck?}
+    J -->|Yes| K[Nuclear option:<br/>pnpm dlx rimraf node_modules<br/>&& pnpm i]
+    J -->|No| L[Fixed!]
+    H --> L
+
+    D --> M[Run: pnpm build]
+    M --> N{Build succeeds?}
+    N -->|No| O[Check error messages<br/>in FAQ]
+    N -->|Yes| L
+
+    E --> H
+
+    F --> P[Search FAQ or<br/>ask in Discord]
+```
+
+## Frequently Asked Questions
+
+### Development Server Issues
+
+#### Q: `pnpm dev` or `nx serve` gets stuck and won't start
+
+**Symptoms:**
+
+- Command hangs on "nx serve"
+- Dev server doesn't respond
+- Terminal appears frozen
+
+**Solutions (try in order):**
+
+1. **First attempt - Reinstall dependencies:**
+
+   ```bash
+   pnpm i
+   ```
+
+2. **Second attempt - Clean build cache:**
+
+   ```bash
+   pnpm clean
+   ```
+
+3. **Last resort - Full node_modules reset:**
+   ```bash
+   pnpm dlx rimraf node_modules && pnpm i
+   ```
+
+**Why this happens:**
+
+- Corrupted dependency cache
+- Outdated lock files after branch switching
+- Incomplete previous installations
+- NX cache corruption
+
+---
+
+#### Q: Port conflicts - "Address already in use"
+
+**Symptoms:**
+
+- Error: `EADDRINUSE` or "port already in use"
+- Dev server fails to start
+
+**Solutions:**
+
+1. **Find and kill the process using the port:**
+
+   ```bash
+   # On Linux/Mac
+   lsof -ti:5173 | xargs kill -9
+
+   # On Windows
+   netstat -ano | findstr :5173
+   taskkill /PID <PID> /F
+   ```
+
+2. **Use a different port** by adding a `port` option to the `server` block in `vite.config.mts`:
+   ```ts
+   server: {
+     port: 3000,
+     // ...existing config
+   }
+   ```
+
+---
+
+### Build and Type Issues
+
+#### Q: TypeScript errors after pulling latest changes
+
+**Symptoms:**
+
+- Type errors in files you didn't modify
+- "Cannot find module" errors
+
+**Solutions:**
+
+1. **Rebuild TypeScript references:**
+
+   ```bash
+   pnpm build
+   ```
+
+2. **Clean and reinstall:**
+
+   ```bash
+   pnpm clean && pnpm i
+   ```
+
+3. **Restart your IDE's TypeScript server**
+   - VS Code: `Cmd/Ctrl + Shift + P` → "TypeScript: Restart TS Server"
+
+---
+
+#### Q: "Workspace not found" or monorepo errors
+
+**Symptoms:**
+
+- pnpm can't find workspace packages
+- Import errors between packages
+
+**Solutions:**
+
+1. **Verify you're in the project root:**
+
+   ```bash
+   pwd  # Should be in ComfyUI_frontend/
+   ```
+
+2. **Rebuild workspace:**
+   ```bash
+   pnpm install
+   pnpm build
+   ```
+
+---
+
+### Linting Issues (oxlint)
+
+#### Q: `eslint-disable` comment isn't suppressing an oxlint rule
+
+**Symptoms:**
+
+- `// eslint-disable-next-line rule-name` has no effect
+- Lint error persists despite the disable comment
+
+**Solution:**
+
+oxlint has its own disable syntax. Use `oxlint-disable` instead:
+
+```ts
+// oxlint-disable-next-line no-console
+console.log('debug')
+```
+
+Check whether the rule is enforced by oxlint (in `.oxlintrc.json`) or ESLint (in `eslint.config.ts`) to pick the right disable comment.
+
+---
+
+#### Q: New lint errors after pulling/upgrading oxlint
+
+**Symptoms:**
+
+- Lint errors in files you didn't change
+- Rules you haven't seen before (e.g. `no-immediate-mutation`, `prefer-optional-chain`)
+
+**Solutions:**
+
+1. **Run the auto-fixer first:**
+
+   ```bash
+   pnpm lint:fix
+   ```
+
+2. **Review changes carefully** — some oxlint auto-fixes can produce incorrect code. Check the diff before committing.
+
+3. **If a rule seems wrong**, check `.oxlintrc.json` to see if it should be disabled or configured differently.
+
+**Why this happens:** oxlint version bumps often enable new rules by default.
+
+---
+
+#### Q: oxlint fails with TypeScript errors
+
+**Symptoms:**
+
+- `pnpm oxlint` or `pnpm lint` fails with type-related errors
+- Errors mention type resolution or missing type information
+
+**Solution:**
+
+oxlint runs with `--type-aware` in this project, which requires valid TypeScript compilation. Fix the TS errors first:
+
+```bash
+pnpm typecheck   # Identify TS errors
+pnpm build       # Or do a full build
+pnpm lint        # Then re-run lint
+```
+
+---
+
+#### Q: Duplicate lint errors from both oxlint and ESLint
+
+**Symptoms:**
+
+- Same violation reported twice
+- Conflicting auto-fix suggestions
+
+**Solution:**
+
+The project uses `eslint-plugin-oxlint` to automatically disable ESLint rules that oxlint already covers (see `eslint.config.ts`). If you see duplicates:
+
+1. Ensure `.oxlintrc.json` is up to date after adding new oxlint rules
+2. Run `pnpm lint` (which runs oxlint then ESLint in sequence) rather than running them individually
+
+---
+
+### Dependency and Package Issues
+
+#### Q: "Package not found" after adding a dependency
+
+**Symptoms:**
+
+- Module not found after `pnpm add`
+- Import errors for newly installed packages
+
+**Solutions:**
+
+1. **Ensure you installed in the correct workspace** (see `pnpm-workspace.yaml` for available workspaces):
+
+   ```bash
+   # Example: install in a specific workspace
+   pnpm --filter <workspace-name> add <package>
+   ```
+
+2. **Clear pnpm cache:**
+   ```bash
+   pnpm store prune
+   pnpm install
+   ```
+
+---
+
+#### Q: Lock file conflicts after merge/rebase
+
+**Symptoms:**
+
+- Git conflicts in `pnpm-lock.yaml`
+- Dependency resolution errors
+
+**Solutions:**
+
+1. **Regenerate lock file:**
+
+   ```bash
+   rm pnpm-lock.yaml
+   pnpm install
+   ```
+
+2. **Or accept upstream lock file:**
+   ```bash
+   git checkout --theirs pnpm-lock.yaml
+   pnpm install
+   ```
+
+---
+
+### Testing Issues
+
+#### Q: Tests fail locally but pass in CI
+
+**Symptoms:**
+
+- Flaky tests
+- Different results between local and CI
+
+**Solutions:**
+
+1. **Run tests in CI mode:**
+
+   ```bash
+   CI=true pnpm test:unit
+   ```
+
+2. **Clear test cache:**
+
+   ```bash
+   pnpm test:unit --no-cache
+   ```
+
+3. **Check Node version matches CI** (see `.nvmrc` for the required version):
+   ```bash
+   node --version
+   nvm use          # If using nvm — reads .nvmrc automatically
+   ```
+
+---
+
+### Git and Branch Issues
+
+#### Q: Changes from another branch appearing in my branch
+
+**Symptoms:**
+
+- Uncommitted changes not related to your work
+- Dirty working directory
+
+**Solutions:**
+
+1. **Stash and reinstall:**
+
+   ```bash
+   git stash
+   pnpm install
+   ```
+
+2. **Check for untracked files:**
+   ```bash
+   git status
+   git clean -fd  # Careful: removes untracked files!
+   ```
+
+---
+
+## Still Having Issues?
+
+1. **Search existing issues:** [GitHub Issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues)
+2. **Ask the community:** [Discord](https://discord.com/invite/comfyorg) (navigate to the `#dev-frontend` channel)
+3. **Create a new issue:** Include:
+   - Your OS and Node version (`node --version`)
+   - Steps to reproduce
+   - Full error message
+   - What you've already tried
+
+## Contributing to This Guide
+
+Found a solution to a common problem? Please:
+
+1. Open a PR to add it to this guide
+2. Follow the FAQ format above
+3. Include the symptoms, solutions, and why it happens
+
+---
+
+**Last Updated:** 2026-03-10

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

@@ -1,10 +1,7 @@
 <template>
-  <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 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>
     <Button
       v-tooltip.left="{
@@ -16,7 +13,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"

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

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

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

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

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

@@ -1,6 +1,6 @@
 <template>
-  <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">
+  <div class="flex size-full flex-col justify-between rounded-lg p-6">
+    <h1 class="m-0 font-inter text-xl font-semibold 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="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen 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 w-48 h-48" />
+        <ProgressSpinner class="m-8 size-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="w-full h-full flex flex-col">
+    <div class="flex size-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"

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

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

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

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <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 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,8 +72,7 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
-      life: 3000
+      detail: t('install.settings.errorUpdatingConsentDetail')
     })
   } 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 flex-col gap-8 p-8 min-w-110">
+        <div class="flex min-w-110 flex-col gap-8 p-8">
           <!-- 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-disc list-inside space-y-1 text-neutral-800">
+            <ul class="list-inside list-disc 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 overflow-hidden z-0">
-        <div class="h-full w-full">
+      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
+        <div class="size-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <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 bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>

browser_tests/README.md

@@ -27,7 +27,8 @@ cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
 
 ### Node.js & Playwright Prerequisites
 
-Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
+Ensure you have the Node.js version specified in `.nvmrc` 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

@@ -0,0 +1,47 @@
+{
+  "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,14 +36,7 @@
       "properties": {
         "Node name for S&R": "CheckpointLoaderSimple",
         "cnr_id": "comfy-core",
-        "ver": "0.3.65",
-        "models": [
-          {
-            "name": "v1-5-pruned-emaonly-fp16.safetensors",
-            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
-            "directory": "checkpoints"
-          }
-        ]
+        "ver": "0.3.65"
       },
       "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     },

browser_tests/fixtures/ComfyPage.ts

@@ -206,9 +206,7 @@ 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)
-      .getByRole('button', { name: 'Run' })
+    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
@@ -432,7 +430,10 @@ 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
+        '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
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -172,6 +172,19 @@ export class VueNodeHelpers {
   async enterSubgraph(nodeId?: string): Promise<void> {
     const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
     const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
-    await editButton.click()
+
+    // 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 }
+    })
   }
 }

browser_tests/fixtures/selectors.ts

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

browser_tests/helpers/actionbar.ts

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

browser_tests/tests/dialog.spec.ts

@@ -89,6 +89,17 @@ 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',
@@ -322,7 +333,7 @@ test.describe('Settings', () => {
     await editKeybindingButton.click()
 
     // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    const input = comfyPage.page.getByPlaceholder('Enter your keybind')
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
@@ -334,7 +345,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('New Blank Workflow')
+      .getByLabel('Modify keybinding')
       .getByText('Save')
     await saveButton.click()
 

browser_tests/tests/imagePastePriority.spec.ts

@@ -0,0 +1,58 @@
+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,16 +819,13 @@ 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([workflowPathA, workflowPathB])
+        expect.arrayContaining([workflowA, workflowB])
       )
-      expect(openWorkflows.indexOf(workflowPathA)).toBeLessThan(
-        openWorkflows.indexOf(workflowPathB)
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
       )
-      expect(activeWorkflowName).toEqual(workflowPathB)
+      expect(activeWorkflowName).toEqual(workflowB)
     })
   })
 

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -35,18 +35,21 @@ test.describe(
       test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
         comfyPage
       }) => {
-        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 }
-          )
+        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`)
         }
-        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.json'
+    const workflowName = 'single_connected_reroute_node'
     await comfyPage.workflow.setupWorkflowsDirectory({
-      [workflowName]: 'links/single_connected_reroute_node.json'
+      [`${workflowName}.json`]: `links/${workflowName}.json`
     })
     await comfyPage.setup()
     await comfyPage.menu.topbar.triggerTopbarCommand(['New'])

browser_tests/tests/sidebar/workflows.spec.ts

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

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

@@ -22,8 +22,10 @@ test.describe('Vue Node Bypass', () => {
       await comfyPage.page.getByText('Load Checkpoint').click()
       await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
 
-      const checkpointNode =
-        comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+      const checkpointNode = comfyPage.page
+        .locator('[data-node-id]')
+        .filter({ hasText: 'Load Checkpoint' })
+        .getByTestId('node-inner-wrapper')
       await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(
@@ -41,8 +43,14 @@ test.describe('Vue Node Bypass', () => {
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
 
-    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+    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')
 
     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 = /border-node-stroke-error/
+const ERROR_CLASS = /ring-destructive-background/
 
 test.describe('Vue Node Error', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -18,9 +18,10 @@ 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'
-    })
+    const unknownNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'UNKNOWN NODE' })
+      .getByTestId('node-inner-wrapper')
     await expect(unknownNode).toHaveClass(ERROR_CLASS)
   })
 
@@ -31,7 +32,10 @@ test.describe('Vue Node Error', () => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
     await comfyPage.runButton.click()
 
-    const raiseErrorNode = comfyPage.vueNodes.getNodeByTitle('Raise Error')
+    const raiseErrorNode = comfyPage.page
+      .locator('[data-node-id]')
+      .filter({ hasText: 'Raise Error' })
+      .getByTestId('node-inner-wrapper')
     await expect(raiseErrorNode).toHaveClass(ERROR_CLASS)
   })
 })

docs/architecture/change-tracker.md

@@ -0,0 +1,91 @@
+# 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

@@ -0,0 +1,62 @@
+# 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,6 +35,7 @@ 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,6 +20,10 @@ 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}']
     }
@@ -32,7 +36,9 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Used by lucideStrokePlugin.js (CSS @plugin)
+    '@iconify/utils'
   ],
   ignore: [
     // Auto generated manager types
@@ -47,7 +53,9 @@ 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'
+    '.agents/checks/eslint.strict.config.js',
+    // Loaded via @plugin directive in CSS, not detected by knip
+    'packages/design-system/src/css/lucideStrokePlugin.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

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

packages/design-system/src/css/style.css

@@ -1420,15 +1420,6 @@ audio.comfy-audio.empty-audio-widget {
     font-size 0.1s ease;
 }
 
-/* Performance optimization during canvas interaction */
-.transform-pane--interacting .lg-node * {
-  transition: none !important;
-}
-
-.transform-pane--interacting .lg-node {
-  will-change: transform;
-}
-
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
 #maskEditor_brush {

public/splash.css

@@ -0,0 +1,51 @@
+/* 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,20 +2,13 @@
   <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 } from 'vue'
+import { computed, onMounted, watch } 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'
@@ -31,6 +24,16 @@ 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,13 +166,22 @@ 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 = createWrapper()
+        const wrapper = createLegacyTabBarWrapper()
         expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
         expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
       })
@@ -186,7 +195,7 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
         })
@@ -194,7 +203,7 @@ describe('TopMenuSection', () => {
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createWrapper()
+          const wrapper = createLegacyTabBarWrapper()
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
           expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
         })

src/components/TopMenuSection.vue

@@ -34,17 +34,7 @@
             </Button>
           </div>
 
-          <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'
-              )
-            "
-          >
+          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
             <ActionBarButtons />
             <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
@@ -55,6 +45,7 @@
             <ComfyActionbar
               :top-menu-container="actionbarContainerRef"
               :queue-overlay-expanded="isQueueOverlayExpanded"
+              :has-any-error="hasAnyError"
               @update:progress-target="updateProgressTarget"
             />
             <CurrentUserButton
@@ -70,7 +61,7 @@
               @click="() => openShareDialog().catch(toastErrorHandler)"
               @pointerenter="prefetchShareDialog"
             >
-              <i class="icon-[lucide--share-2] size-4" />
+              <i class="icon-[comfy--send] size-4" />
               <span class="not-md:hidden">
                 {{ t('actionbar.share') }}
               </span>
@@ -123,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { useLocalStorage } from '@vueuse/core'
+import { useLocalStorage, useMutationObserver } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -145,6 +136,7 @@ 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'
@@ -168,6 +160,7 @@ 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 } =
@@ -182,8 +175,45 @@ 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') === 'Integrated'
+  () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )
 const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
   useQueueFeatureFlags()
@@ -233,6 +263,25 @@ 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

@@ -0,0 +1,98 @@
+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,71 +1,129 @@
 <template>
   <div
     v-tooltip.bottom="{
-      value: $t('menu.batchCount'),
+      value: t('menu.batchCount'),
       showDelay: 600
     }"
-    class="batch-count"
-    :aria-label="$t('menu.batchCount')"
+    class="batch-count h-full"
+    :aria-label="t('menu.batchCount')"
   >
-    <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
+      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>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
-import InputNumber from 'primevue/inputnumber'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+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 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 batchCountInputRef = ref<HTMLInputElement | null>(null)
+const batchCountInput = ref(String(batchCount.value))
+const isEditing = ref(false)
 
-  batchCount.value = newCount
+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 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()
 }
 </script>
-
-<style scoped>
-:deep(.p-inputtext) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-</style>