[backport cloud/1.41] feat: App mode - allow resizing of textarea and image previews (#10345)

Backport of #9792 to `cloud/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10345-backport-cloud-1-41-feat-App-mode-allow-resizing-of-textarea-and-image-previews-3296d73d36508173be60e0fc10292292)
by [Unito](https://www.unito.io)

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

.claude/settings.json

@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(pnpx vitest run --testPathPattern=\"draftCacheV2.property\")",
-      "Bash(pnpx vitest run \"draftCacheV2.property\")",
-      "Bash(node -e \"const fc = require\\(''fast-check''\\); console.log\\(Object.keys\\(fc\\).filter\\(k => k.includes\\(''string''\\)\\).join\\('', ''\\)\\)\")"
-    ]
-  }
-}

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

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

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

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

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

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

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

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

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

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

.claude/skills/layer-audit/SKILL.md

@@ -1,82 +0,0 @@
----
-name: layer-audit
-description: 'Detect violations of the layered architecture import rules (base -> platform -> workbench -> renderer). Runs ESLint with the import-x/no-restricted-paths rule and generates a grouped report.'
----
-
-# Layer Architecture Audit
-
-Finds imports that violate the layered architecture boundary rules enforced by `import-x/no-restricted-paths` in `eslint.config.ts`.
-
-## Layer Hierarchy (bottom to top)
-
-```
-renderer  (top -- can import from all lower layers)
-   ^
-workbench
-   ^
-platform
-   ^
-  base    (bottom -- cannot import from any upper layer)
-```
-
-Each layer may only import from layers below it.
-
-## How to Run
-
-```bash
-# Run ESLint filtering for just the layer boundary rule violations
-pnpm lint 2>&1 | grep 'import-x/no-restricted-paths' -B1 | head -200
-```
-
-To get a full structured report, run:
-
-```bash
-# Collect all violations from base/, platform/, workbench/ layers
-pnpm eslint src/base/ src/platform/ src/workbench/ --no-error-on-unmatched-pattern --rule '{"import-x/no-restricted-paths": "warn"}' --format compact 2>&1 | grep 'no-restricted-paths' | sort
-```
-
-## How to Read Results
-
-Each violation line shows:
-
-- The **file** containing the bad import
-- The **import path** crossing the boundary
-- The **message** identifying which layer pair is violated
-
-### Grouping by Layer Pair
-
-After collecting violations, group them by the layer pair pattern:
-
-| Layer pair            | Meaning                             |
-| --------------------- | ----------------------------------- |
-| base -> platform      | base/ importing from platform/      |
-| base -> workbench     | base/ importing from workbench/     |
-| base -> renderer      | base/ importing from renderer/      |
-| platform -> workbench | platform/ importing from workbench/ |
-| platform -> renderer  | platform/ importing from renderer/  |
-| workbench -> renderer | workbench/ importing from renderer/ |
-
-## When to Use
-
-- Before creating a PR that adds imports between `src/base/`, `src/platform/`, `src/workbench/`, or `src/renderer/`
-- When auditing the codebase to find and plan migration of existing violations
-- After moving files between layers to verify no new violations were introduced
-
-## Fixing Violations
-
-Common strategies to resolve a layer violation:
-
-1. **Move the import target down** -- if the imported module doesn't depend on upper-layer concepts, move it to a lower layer
-2. **Introduce an interface** -- define an interface/type in the lower layer and implement it in the upper layer via dependency injection or a registration pattern
-3. **Move the importing file up** -- if the file logically belongs in a higher layer, relocate it
-4. **Extract shared logic** -- pull the shared functionality into `base/` or a shared utility
-
-## Reference
-
-| Resource                        | Path               |
-| ------------------------------- | ------------------ |
-| ESLint config (rule definition) | `eslint.config.ts` |
-| Base layer                      | `src/base/`        |
-| Platform layer                  | `src/platform/`    |
-| Workbench layer                 | `src/workbench/`   |
-| Renderer layer                  | `src/renderer/`    |

.claude/skills/perf-fix-with-proof/SKILL.md

@@ -1,179 +0,0 @@
----
-name: perf-fix-with-proof
-description: 'Ships performance fixes with CI-proven improvement using stacked PRs. PR1 adds a @perf test (establishes baseline on main), PR2 adds the fix (CI shows delta). Use when implementing a perf optimization and wanting to prove it in CI.'
----
-
-# Performance Fix with Proof
-
-Ships perf fixes as two stacked PRs so CI automatically proves the improvement.
-
-## Why Two PRs
-
-The `ci-perf-report.yaml` workflow compares PR metrics against the **base branch baseline**. If you add a new `@perf` test in the same PR as the fix, that test doesn't exist on main yet — no baseline, no delta, no proof. Stacking solves this:
-
-1. **PR1 (test-only)** — adds the `@perf` test that exercises the bottleneck. Merges to main. CI runs it on main → baseline established.
-2. **PR2 (fix)** — adds the optimization. CI runs the same test → compares against PR1's baseline → delta shows improvement.
-
-## Workflow
-
-### Step 1: Create the test branch
-
-```bash
-git worktree add <worktree-path> -b perf/test-<name> origin/main
-```
-
-### Step 2: Write the `@perf` test
-
-Add a test to `browser_tests/tests/performance.spec.ts` (or a new file with `@perf` tag). The test should stress the specific bottleneck.
-
-**Test structure:**
-
-```typescript
-test('<descriptive name>', async ({ comfyPage }) => {
-  // 1. Load a workflow that exercises the bottleneck
-  await comfyPage.workflow.loadWorkflow('<workflow>')
-
-  // 2. Start measuring
-  await comfyPage.perf.startMeasuring()
-
-  // 3. Perform the action that triggers the bottleneck (at scale)
-  for (let i = 0; i < N; i++) {
-    // ... stress the hot path ...
-    await comfyPage.nextFrame()
-  }
-
-  // 4. Stop measuring and record
-  const m = await comfyPage.perf.stopMeasuring('<metric-name>')
-  recordMeasurement(m)
-  console.log(`<name>: ${m.styleRecalcs} recalcs, ${m.layouts} layouts`)
-})
-```
-
-**Available metrics** (from `PerformanceHelper`):
-
-- `m.styleRecalcs` / `m.styleRecalcDurationMs` — style recalculation count and time
-- `m.layouts` / `m.layoutDurationMs` — forced layout count and time
-- `m.taskDurationMs` — total main-thread JS execution time
-- `m.heapDeltaBytes` — memory pressure delta
-
-**Key helpers** (from `ComfyPage`):
-
-- `comfyPage.perf.startMeasuring()` / `.stopMeasuring(name)` — CDP metrics capture
-- `comfyPage.nextFrame()` — wait one animation frame
-- `comfyPage.workflow.loadWorkflow(name)` — load a test workflow from `browser_tests/assets/`
-- `comfyPage.canvas` — the canvas locator
-- `comfyPage.page.mouse.move(x, y)` — mouse interaction
-
-### Step 3: Add test workflow asset (if needed)
-
-If the bottleneck needs a specific workflow (e.g., 50+ nodes, many DOM widgets), add it to `browser_tests/assets/`. Keep it minimal — only the structure needed to trigger the bottleneck.
-
-### Step 4: Verify locally
-
-```bash
-pnpm exec playwright test --project=performance --grep "<test name>"
-```
-
-Confirm the test runs and produces reasonable metric values.
-
-### Step 5: Create PR1 (test-only)
-
-```bash
-pnpm typecheck:browser
-pnpm lint
-git add browser_tests/
-git commit -m "test: add perf test for <bottleneck description>"
-git push -u origin perf/test-<name>
-gh pr create --title "test: add perf test for <bottleneck>" \
-  --body "Adds a @perf test to establish a baseline for <bottleneck>.
-
-This is PR 1 of 2. The fix will follow in a separate PR once this baseline is established on main.
-
-## What
-Adds \`<test-name>\` to the performance test suite measuring <metric> during <action>.
-
-## Why
-Needed to prove the improvement from the upcoming fix for backlog item #<N>." \
-  --base main
-```
-
-### Step 6: Get PR1 merged
-
-Once PR1 merges, CI runs the test on main → baseline artifact saved.
-
-### Step 7: Create PR2 (fix) on top of main
-
-```bash
-git worktree add <worktree-path> -b perf/fix-<name> origin/main
-```
-
-Implement the fix. The `@perf` test from PR1 is now on main and will run automatically. CI will:
-
-1. Run the test on the PR branch
-2. Download the baseline from main (which includes PR1's test results)
-3. Post a PR comment showing the delta
-
-### Step 8: Verify the improvement shows in CI
-
-The `ci-perf-report.yaml` posts a comment like:
-
-```markdown
-## ⚡ Performance Report
-
-| Metric                | Baseline | PR (n=3) | Δ    | Sig |
-| --------------------- | -------- | -------- | ---- | --- |
-| <name>: style recalcs | 450      | 12       | -97% | 🟢  |
-```
-
-If Δ is negative for the target metric, the fix is proven.
-
-## Test Design Guidelines
-
-1. **Stress the specific bottleneck** — don't measure everything, isolate the hot path
-2. **Use enough iterations** — the test should run long enough that the metric difference is clear (100+ frames for idle tests, 50+ interactions for event tests)
-3. **Keep it deterministic** — avoid timing-dependent assertions; measure counts not durations when possible
-4. **Match the backlog entry** — reference the backlog item number in the test name or PR description
-
-## Examples
-
-**Testing DOM widget reactive mutations (backlog #8):**
-
-```typescript
-test('DOM widget positioning recalculations', async ({ comfyPage }) => {
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.perf.startMeasuring()
-  // Idle for 120 frames — DOM widgets update position every frame
-  for (let i = 0; i < 120; i++) {
-    await comfyPage.nextFrame()
-  }
-  const m = await comfyPage.perf.stopMeasuring('dom-widget-idle')
-  recordMeasurement(m)
-})
-```
-
-**Testing measureText caching (backlog #4):**
-
-```typescript
-test('canvas text rendering with many nodes', async ({ comfyPage }) => {
-  await comfyPage.workflow.loadWorkflow('large-workflow-50-nodes')
-  await comfyPage.perf.startMeasuring()
-  for (let i = 0; i < 60; i++) {
-    await comfyPage.nextFrame()
-  }
-  const m = await comfyPage.perf.stopMeasuring('text-rendering-50-nodes')
-  recordMeasurement(m)
-})
-```
-
-## Reference
-
-| Resource          | Path                                                  |
-| ----------------- | ----------------------------------------------------- |
-| Perf test file    | `browser_tests/tests/performance.spec.ts`             |
-| PerformanceHelper | `browser_tests/fixtures/helpers/PerformanceHelper.ts` |
-| Perf reporter     | `browser_tests/helpers/perfReporter.ts`               |
-| CI workflow       | `.github/workflows/ci-perf-report.yaml`               |
-| Report generator  | `scripts/perf-report.ts`                              |
-| Stats utilities   | `scripts/perf-stats.ts`                               |
-| Backlog           | `docs/perf/BACKLOG.md` (local only, not committed)    |
-| Playbook          | `docs/perf/PLAYBOOK.md` (local only, not committed)   |

.claude/skills/red-green-fix/SKILL.md

@@ -1,221 +0,0 @@
----
-name: red-green-fix
-description: 'Bug fix workflow that proves test validity with a red-then-green CI sequence. Commits a failing test first (CI red), then the minimal fix (CI green). Use when fixing a bug, writing a regression test, or when asked to prove a fix works.'
----
-
-# Red-Green Fix
-
-Fixes bugs as two commits so CI automatically proves the test catches the bug.
-
-## Why Two Commits
-
-If you commit the test and fix together, the test always passes — reviewers cannot tell whether the test actually detects the bug or is a no-op. Splitting into two commits creates a verifiable CI trail:
-
-1. **Commit 1 (test-only)** — adds a test that exercises the bug. CI runs it → test fails → red X.
-2. **Commit 2 (fix)** — adds the minimal fix. CI runs the same test → test passes → green check.
-
-The red-then-green sequence in the commit history proves the test is valid.
-
-## Input
-
-The user provides a bug description as an argument. If no description is given, ask the user to describe the bug before proceeding.
-
-Bug description: $ARGUMENTS
-
-## Step 0 — Setup
-
-Create an isolated branch from main:
-
-```bash
-git fetch origin main
-git checkout -b fix/<bug-name> origin/main
-```
-
-## Step 1 — Red: Failing Test Only
-
-Write a test that reproduces the bug. **Do NOT write any fix code.**
-
-### Choosing the Test Framework
-
-| Bug type                          | Framework  | File location                   |
-| --------------------------------- | ---------- | ------------------------------- |
-| Logic, utils, stores, composables | Vitest     | `src/**/*.test.ts` (colocated)  |
-| UI interaction, canvas, workflows | Playwright | `browser_tests/tests/*.spec.ts` |
-
-For Playwright tests, follow the `/writing-playwright-tests` skill for patterns, fixtures, and tags.
-
-### Rules
-
-- The test MUST fail against the current codebase (this is the whole point)
-- Do NOT modify any source code outside of test files
-- Do NOT include any fix, workaround, or behavioral change
-- Do NOT add unrelated tests or refactor existing tests
-- Keep the test minimal — only what is needed to reproduce the bug
-- Avoid common anti-patterns — see `reference/testing-anti-patterns.md`
-
-### Vitest Example
-
-```typescript
-// src/utils/pathUtil.test.ts
-import { describe, expect, it } from 'vitest'
-import { resolveModelPath } from './pathUtil'
-
-describe('resolveModelPath', () => {
-  it('handles absolute paths from folder_paths API', () => {
-    const result = resolveModelPath(
-      '/absolute/models',
-      '/absolute/models/checkpoints'
-    )
-    expect(result).toBe('/absolute/models/checkpoints')
-  })
-})
-```
-
-### Playwright Example
-
-```typescript
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Model Download', { tag: ['@smoke'] }, () => {
-  test('downloads model when path is absolute', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('missing-model')
-    const downloadBtn = comfyPage.page.getByTestId('download-model-button')
-    await downloadBtn.click()
-    await expect(comfyPage.page.getByText('Download complete')).toBeVisible()
-  })
-})
-```
-
-### Verify Locally First
-
-Run the test locally before pushing to confirm it fails for the right reason:
-
-```bash
-# Vitest
-pnpm test:unit -- <test-file>
-
-# Playwright
-pnpm test:browser:local -- --grep "<test name>"
-```
-
-If the test passes locally, it does not reproduce the bug — revisit your test before pushing.
-
-### Quality Checks and Commit
-
-```bash
-pnpm typecheck
-pnpm lint
-pnpm format:check
-
-git add <test-files-only>
-git commit -m "test: add failing test for <concise bug description>"
-git push -u origin HEAD
-```
-
-### Verify CI Failure
-
-```bash
-gh run list --branch $(git branch --show-current) --limit 1
-```
-
-**STOP HERE.** Inform the user of the CI status and wait for confirmation before proceeding to Step 2.
-
-- If CI passes: the test does not catch the bug. Revisit the test.
-- If CI fails for unrelated reasons: investigate and fix the test setup, not the bug.
-- If CI fails because the test correctly catches the bug: proceed to Step 2.
-
-## Step 2 — Green: Minimal Fix
-
-Write the minimum code change needed to make the failing test pass.
-
-### Rules
-
-- Do NOT modify, weaken, or delete the test from Step 1 — it is immutable. If the test needs changes, restart from Step 1 and re-prove the red.
-- Do NOT add new tests (tests were finalized in Step 1)
-- Do NOT refactor, clean up, or make "drive-by" improvements
-- Do NOT modify code unrelated to the bug
-- The fix should be the smallest correct change
-
-### Quality Checks and Commit
-
-```bash
-pnpm typecheck
-pnpm lint
-pnpm format
-
-git add <fix-files-only>
-git commit -m "fix: <concise bug description>"
-git push
-```
-
-### Verify CI Pass
-
-```bash
-gh run list --branch $(git branch --show-current) --limit 1
-```
-
-- If CI passes: the fix is verified. Proceed to PR creation.
-- If CI fails: investigate and fix. Do NOT change the test from Step 1.
-
-## Step 3 — Open Pull Request
-
-```bash
-gh pr create --title "fix: <description>" --body "$(cat <<'EOF'
-## Summary
-
-<Brief explanation of the bug and root cause>
-
-- Fixes #<issue-number>
-
-## Red-Green Verification
-
-| Commit | CI Status | Purpose |
-|--------|-----------|---------|
-| `test: ...` | :red_circle: Red | Proves the test catches the bug |
-| `fix: ...` | :green_circle: Green | Proves the fix resolves the bug |
-
-## Test Plan
-
-- [ ] CI red on test-only commit
-- [ ] CI green on fix commit
-- [ ] Added/updated E2E regression under `browser_tests/` or explained why not applicable
-- [ ] Manual verification (if applicable)
-EOF
-)"
-```
-
-## Gotchas
-
-### CI fails on test commit for unrelated reasons
-
-Lint, typecheck, or other tests may fail — not just your new test. Check the CI logs carefully. If the failure is unrelated, fix it in a separate commit before the `test:` commit so the red X is clearly attributable to your test.
-
-### Test passes when it should fail
-
-The bug may only manifest under specific conditions (e.g., Windows paths, external model directories, certain workflow structures). Make sure your test setup matches the actual bug scenario. Check that you're not accidentally testing the happy path.
-
-### Flaky Playwright tests
-
-If your e2e test is intermittent, it doesn't prove anything. Use retrying assertions (`toBeVisible`, `toHaveText`) instead of `waitForTimeout`. See the `/writing-playwright-tests` skill for anti-patterns.
-
-### Pre-existing CI failures on main
-
-If main itself is red, branch from the last green commit or fix the pre-existing failure first. A red-green proof is meaningless if the baseline is already red.
-
-## Reference
-
-| Resource              | Path                                               |
-| --------------------- | -------------------------------------------------- |
-| Unit test framework   | Vitest (`src/**/*.test.ts`)                        |
-| E2E test framework    | Playwright (`browser_tests/tests/*.spec.ts`)       |
-| E2E fixtures          | `browser_tests/fixtures/`                          |
-| E2E assets            | `browser_tests/assets/`                            |
-| Playwright skill      | `.claude/skills/writing-playwright-tests/SKILL.md` |
-| Unit CI               | `.github/workflows/ci-tests-unit.yaml`             |
-| E2E CI                | `.github/workflows/ci-tests-e2e.yaml`              |
-| Lint CI               | `.github/workflows/ci-lint-format.yaml`            |
-| Testing anti-patterns | `reference/testing-anti-patterns.md`               |
-| Related skill         | `.claude/skills/perf-fix-with-proof/SKILL.md`      |

.claude/skills/red-green-fix/reference/testing-anti-patterns.md

@@ -1,214 +0,0 @@
-# Testing Anti-Patterns for Red-Green Fixes
-
-Common mistakes that undermine the red-green proof. Avoid these when writing the test commit (Step 1).
-
-## Testing Implementation Details
-
-Test observable behavior, not internal state.
-
-**Bad** — coupling to internals:
-
-```typescript
-it('uses cache internally', () => {
-  const service = new UserService()
-  service.getUser(1)
-  expect(service._cache.has(1)).toBe(true) // Implementation detail
-})
-```
-
-**Good** — testing through the public interface:
-
-```typescript
-it('returns same user on repeated calls', async () => {
-  const service = new UserService()
-  const user1 = await service.getUser(1)
-  const user2 = await service.getUser(1)
-  expect(user1).toBe(user2) // Behavior, not implementation
-})
-```
-
-Why this matters for red-green: if your test is coupled to internals, a valid fix that changes the implementation may break the test — even though the bug is fixed. The green commit should only require changing source code, not rewriting the test.
-
-## Assertion-Free Tests
-
-Every test must assert something meaningful. A test without assertions always passes — it cannot produce the red X needed in Step 1.
-
-**Bad**:
-
-```typescript
-it('processes the download', () => {
-  processDownload('/models/checkpoints', 'model.safetensors')
-  // No expect()!
-})
-```
-
-**Good**:
-
-```typescript
-it('processes the download to correct path', () => {
-  const result = processDownload('/models/checkpoints', 'model.safetensors')
-  expect(result.savePath).toBe('/models/checkpoints/model.safetensors')
-})
-```
-
-## Over-Mocking
-
-Mock only system boundaries (network, filesystem, Electron APIs). If you mock the module under test, you are testing your mocks — the test will not detect the real bug.
-
-**Bad** — mocking everything:
-
-```typescript
-vi.mock('./pathResolver')
-vi.mock('./validator')
-vi.mock('./downloader')
-
-it('downloads model', () => {
-  // This only tests that mocks were called, not that the bug exists
-})
-```
-
-**Good** — mock only the boundary:
-
-```typescript
-vi.mock('./electronAPI') // Boundary: Electron IPC
-
-it('resolves absolute path correctly', () => {
-  const result = resolveModelPath('/root/models', '/root/models/checkpoints')
-  expect(result).toBe('/root/models/checkpoints')
-})
-```
-
-See also: [Don't Mock What You Don't Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
-
-## Giant Tests
-
-A test that covers the entire flow makes it hard to pinpoint which part catches the bug. Keep it focused — one concept per test.
-
-**Bad**:
-
-```typescript
-it('full model download flow', async () => {
-  // 80 lines: load workflow, open dialog, select model,
-  // click download, verify path, check progress, confirm completion
-})
-```
-
-**Good**:
-
-```typescript
-it('resolves absolute savePath without nesting under modelsDirectory', () => {
-  const result = getLocalSavePath(
-    '/models',
-    '/models/checkpoints',
-    'file.safetensors'
-  )
-  expect(result).toBe('/models/checkpoints/file.safetensors')
-})
-```
-
-If the bug is in path resolution, test path resolution — not the entire download flow.
-
-## Test Duplication
-
-Duplicated test code hides what actually differs between cases. Use parameterized tests.
-
-**Bad**:
-
-```typescript
-it('resolves checkpoints path', () => {
-  expect(resolve('/models', '/models/checkpoints', 'a.safetensors')).toBe(
-    '/models/checkpoints/a.safetensors'
-  )
-})
-it('resolves loras path', () => {
-  expect(resolve('/models', '/models/loras', 'b.safetensors')).toBe(
-    '/models/loras/b.safetensors'
-  )
-})
-```
-
-**Good**:
-
-```typescript
-it.each([
-  ['/models/checkpoints', 'a.safetensors', '/models/checkpoints/a.safetensors'],
-  ['/models/loras', 'b.safetensors', '/models/loras/b.safetensors']
-])('resolves %s/%s to %s', (dir, file, expected) => {
-  expect(resolve('/models', dir, file)).toBe(expected)
-})
-```
-
-## Flaky Tests
-
-A flaky test cannot prove anything — it may show red for reasons unrelated to the bug, or green despite the bug still existing.
-
-**Common causes in this codebase:**
-
-| Cause                                  | Fix                                     |
-| -------------------------------------- | --------------------------------------- |
-| Missing `nextFrame()` after canvas ops | Add `await comfyPage.nextFrame()`       |
-| `waitForTimeout` instead of assertions | Use `toBeVisible()`, `toHaveText()`     |
-| Shared state between tests             | Isolate with `afterEach` / `beforeEach` |
-| Timing-dependent logic                 | Use `expect.poll()` or `toPass()`       |
-
-## Gaming the Red-Green Process
-
-These are ways the red-green proof gets invalidated during Step 2 (the fix commit). The test from Step 1 is immutable — if any of these happen, restart from Step 1.
-
-**Weakening the assertion to make it pass:**
-
-```typescript
-// Step 1 (red) — strict assertion
-expect(result).toBe('/external/drive/models/checkpoints/file.safetensors')
-
-// Step 2 (green) — weakened to pass without a real fix
-expect(result).toBeDefined() // This proves nothing
-```
-
-**Updating snapshots to bless the bug:**
-
-```bash
-# Instead of fixing the code, just updating the snapshot to match buggy output
-pnpm test:unit -- --update
-```
-
-If a snapshot needs updating, the fix should change the code behavior, not the expected output.
-
-**Adding mocks in Step 2 that hide the failure:**
-
-```typescript
-// Step 2 adds a mock that didn't exist in Step 1
-vi.mock('./pathResolver', () => ({
-  resolve: () => '/expected/path' // Hardcoded to pass
-}))
-```
-
-Step 2 should only change source code — not test infrastructure.
-
-## Testing the Happy Path Only
-
-The red-green pattern specifically requires the test to exercise the **broken path**. If you only test the case that already works, the test will pass (green) on Step 1 — defeating the purpose.
-
-**Bad** — testing the default case that works:
-
-```typescript
-it('downloads to default models directory', () => {
-  // This already works — it won't produce a red X
-  const result = resolve('/models', 'checkpoints', 'file.safetensors')
-  expect(result).toBe('/models/checkpoints/file.safetensors')
-})
-```
-
-**Good** — testing the case that is actually broken:
-
-```typescript
-it('downloads to external models directory configured via extra_model_paths', () => {
-  // This is the broken case — absolute path from folder_paths API
-  const result = resolve(
-    '/models',
-    '/external/drive/models/checkpoints',
-    'file.safetensors'
-  )
-  expect(result).toBe('/external/drive/models/checkpoints/file.safetensors')
-})
-```

.claude/skills/ticket-intake/SKILL.md

@@ -1,361 +0,0 @@
----
-name: ticket-intake
-description: 'Parse ticket URL (Notion or GitHub), extract all data, initialize pipeline run. Use when starting work on a new ticket or when asked to pick up a ticket.'
----
-
-# Ticket Intake
-
-Parses a ticket URL from supported sources (Notion or GitHub), extracts all relevant information, and creates a ticket in the pipeline API.
-
-> **🚨 CRITICAL REQUIREMENT**: This skill MUST register the ticket in the Pipeline API and update the source (Notion/GitHub). If these steps are skipped, the entire pipeline breaks. See [Mandatory API Calls](#mandatory-api-calls-execute-all-three) below.
-
-## Supported Sources
-
-| Source | URL Pattern                                         | Provider File         |
-| ------ | --------------------------------------------------- | --------------------- |
-| Notion | `https://notion.so/...` `https://www.notion.so/...` | `providers/notion.md` |
-| GitHub | `https://github.com/{owner}/{repo}/issues/{n}`      | `providers/github.md` |
-
-## Quick Start
-
-When given a ticket URL:
-
-1. **Detect source type** from URL pattern
-2. **Load provider-specific logic** from `providers/` directory
-3. Fetch ticket content via appropriate API
-4. Extract and normalize properties to common schema
-5. **Register ticket in pipeline API** ← MANDATORY
-6. **Update source** (Notion status / GitHub comment) ← MANDATORY
-7. **Run verification script** to confirm API registration
-8. Output summary and handoff to `research-orchestrator`
-
-## Configuration
-
-Uses the **production API** by default. No configuration needed for read operations.
-
-**Defaults (no setup required):**
-
-- API URL: `https://api-gateway-856475788601.us-central1.run.app`
-- Read-only endpoints at `/public/*` require no authentication
-
-**For write operations** (transitions, creating tickets), set:
-
-```bash
-export PIPELINE_API_KEY="..."  # Get from GCP Secret Manager or ask admin
-```
-
-**Optional (for local working artifacts):**
-
-```bash
-PIPELINE_DIR="${PIPELINE_DIR:-$HOME/repos/ticket-to-pr-pipeline}"
-```
-
-## Mandatory API Calls (Execute ALL Three)
-
-**⚠️ These three API calls are the ENTIRE POINT of this skill. Without them, the ticket is invisible to the pipeline, downstream skills will fail, and Notion status won't update.**
-
-**You MUST make these HTTP requests.** Use `curl` from bash — do not just read this as documentation.
-
-### Call 1: Create Ticket
-
-```bash
-API_URL="${PIPELINE_API_URL:-https://api-gateway-856475788601.us-central1.run.app}"
-API_KEY="${PIPELINE_API_KEY}"
-
-curl -s -X POST "${API_URL}/v1/tickets" \
-  -H "Authorization: Bearer ${API_KEY}" \
-  -H "Content-Type: application/json" \
-  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
-  -d '{
-    "notion_page_id": "NOTION_PAGE_UUID_HERE",
-    "title": "TICKET_TITLE_HERE",
-    "source": "notion",
-    "metadata": {
-      "description": "DESCRIPTION_HERE",
-      "priority": "High",
-      "labels": [],
-      "acceptanceCriteria": []
-    }
-  }'
-```
-
-Save the returned `id` — you need it for the next two calls.
-
-### Call 2: Transition to RESEARCH
-
-```bash
-TICKET_ID="id-from-step-1"
-
-curl -s -X POST "${API_URL}/v1/tickets/${TICKET_ID}/transition" \
-  -H "Authorization: Bearer ${API_KEY}" \
-  -H "Content-Type: application/json" \
-  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
-  -d '{
-    "to_state": "RESEARCH",
-    "reason": "Intake complete, starting research"
-  }'
-```
-
-### Call 3: Queue Source Update
-
-```bash
-curl -s -X POST "${API_URL}/v1/sync/queue" \
-  -H "Authorization: Bearer ${API_KEY}" \
-  -H "Content-Type: application/json" \
-  -H "X-Agent-ID: ${AGENT_ID:-amp-agent}" \
-  -d '{
-    "ticket_id": "TICKET_ID_HERE",
-    "action": "update_status",
-    "payload": { "status": "In Progress" },
-    "priority": "normal"
-  }'
-```
-
-> **Note:** The action MUST be `"update_status"` (not `"UPDATE_NOTION_STATUS"`). Valid actions: `update_status`, `update_pr_url`, `mark_done`.
-
-### TypeScript Equivalent (if using pipeline client)
-
-```typescript
-import { PipelineClient } from '@pipeline/client'
-
-const client = new PipelineClient({
-  apiUrl:
-    process.env.PIPELINE_API_URL ||
-    'https://api-gateway-856475788601.us-central1.run.app',
-  agentId: process.env.AGENT_ID!
-})
-
-const ticket = await client.createTicket({
-  notion_page_id: pageId,
-  title: ticketTitle,
-  source: 'notion',
-  metadata: { description, priority, labels, acceptanceCriteria }
-})
-
-await client.transitionState(
-  ticket.id,
-  'RESEARCH',
-  'Intake complete, starting research'
-)
-
-await client.queueSync(ticket.id, 'update_status', { status: 'In Progress' })
-```
-
-## Workflow
-
-### Step 1: Detect Source Type
-
-Parse the URL to determine source:
-
-```javascript
-if (url.includes('notion.so')) {
-  source = 'notion'
-  // Load providers/notion.md
-} else if (url.match(/github\.com\/[^\/]+\/[^\/]+\/issues\/\d+/)) {
-  source = 'github'
-  // Load providers/github.md
-} else {
-  // Error: Unsupported URL format
-}
-```
-
-### Step 2: Load Provider and Fetch Data
-
-Read the appropriate provider file for source-specific instructions:
-
-- **Notion**: `providers/notion.md` - Uses Notion MCP, handles Slack links
-- **GitHub**: `providers/github.md` - Uses `gh` CLI, handles Dosu comments
-
-Follow the provider's instructions for:
-
-- Fetching content
-- Extracting properties
-- **Updating the source** (Notion status → "In Progress", Assignee → pipeline owner)
-
-### Step 3: Normalize to Common Schema
-
-All providers must extract normalized ticket data following `schema.md`:
-
-```json
-{
-  "id": "abc12345",
-  "url": "https://...",
-  "source": "notion | github",
-  "title": "Ticket title",
-  "description": "Full description",
-  "status": "Not Started",
-  "assignee": "username",
-  "priority": "High",
-  "area": "UI",
-  "labels": ["bug", "frontend"],
-  "acceptanceCriteria": ["Criterion 1", "Criterion 2"],
-  "fetchedAt": "2024-01-15T10:30:00Z"
-}
-```
-
-### Step 4: Register Ticket in Pipeline API (MANDATORY — DO NOT SKIP)
-
-**Execute all three API calls from [Mandatory API Calls](#mandatory-api-calls-execute-all-three) above.**
-
-This is not optional. This is not documentation. You MUST make these HTTP requests right now.
-
-1. `createTicket()` → save the returned ticket ID
-2. `transitionState(id, 'RESEARCH')` → confirm state changed
-3. `queueSync(id, 'update_status', { status: 'In Progress' })` → confirm queued
-
-**If any call fails**, retry once. If it still fails, report the error prominently — do NOT silently continue.
-
-### Step 5: Run Verification Script
-
-After making the API calls, run the verification script to confirm everything worked:
-
-```bash
-bash scripts/verify-intake.sh TICKET_ID_OR_NOTION_PAGE_ID
-```
-
-**If the script is not available locally**, verify manually via the public API:
-
-```bash
-curl -s "${API_URL}/public/tickets/${TICKET_ID}" | jq '{id, state, title, notion_page_id}'
-```
-
-Expected output:
-
-```json
-{
-  "id": "...",
-  "state": "RESEARCH",
-  "title": "...",
-  "notion_page_id": "..."
-}
-```
-
-**If `state` is not `RESEARCH`, go back to Step 4 and complete the missing calls.**
-
-### Step 6: Output Summary and Handoff
-
-Print a clear summary:
-
-```markdown
-## Ticket Intake Complete
-
-**Source:** Notion | GitHub
-**Title:** [Ticket title]
-**ID:** abc12345
-**Status:** In Progress (queued)
-**Priority:** High
-**Area:** UI
-
-### Description
-
-[Brief description or first 200 chars]
-
-### Acceptance Criteria
-
-- [ ] Criterion 1
-- [ ] Criterion 2
-
-### Links
-
-- **Ticket:** [Original URL]
-- **Slack:** [Slack thread content fetched via slackdump] (Notion only)
-
-### Pipeline
-
-- **API Ticket ID:** abc12345
-- **State:** RESEARCH
-- **Verified:** ✅ (via verify-intake.sh or public API)
-```
-
-**After printing the summary, immediately handoff** to continue the pipeline. Use the `handoff` tool with all necessary context (ticket ID, source, title, description, slack context if any):
-
-> **Handoff goal:** "Continue pipeline for ticket {ID} ({title}). Ticket is in RESEARCH state. Load skill: `research-orchestrator` to begin research phase. Ticket data: source={source}, notion_page_id={pageId}, priority={priority}. {slack context summary if available}"
-
-**Do NOT wait for human approval to proceed.** The intake phase is complete — handoff immediately.
-
-## Error Handling
-
-### Unsupported URL
-
-```
-❌ Unsupported ticket URL format.
-
-Supported formats:
-- Notion: https://notion.so/... or https://www.notion.so/...
-- GitHub: https://github.com/{owner}/{repo}/issues/{number}
-
-Received: [provided URL]
-```
-
-### Provider-Specific Errors
-
-See individual provider files for source-specific error handling:
-
-- `providers/notion.md` - Authentication, page not found
-- `providers/github.md` - Auth, rate limits, issue not found
-
-### Missing Properties
-
-Continue with available data and note what's missing:
-
-```
-⚠️ Some properties unavailable:
-- Priority: not found (using default: Medium)
-- Area: not found
-
-Proceeding with available data...
-```
-
-### API Call Failures
-
-```
-❌ Pipeline API call failed: {method} {endpoint}
-   Status: {status}
-   Error: {message}
-
-Retrying once...
-
-❌ Retry also failed. INTAKE IS INCOMPLETE.
-   The ticket was NOT registered in the pipeline.
-   Downstream skills will not work until this is fixed.
-```
-
-## Notes
-
-- This skill focuses ONLY on intake — it does not do research
-- Slack thread content is fetched automatically via the `slackdump` skill — no manual copy-paste needed
-- ALL API calls (createTicket, transitionState, queueSync) are MANDATORY — never skip them
-- The `queueSync` action must be `"update_status"`, NOT `"UPDATE_NOTION_STATUS"`
-- Pipeline state is tracked via the API, not local files
-- Working artifacts (research-report.md, plan.md) can be saved locally to `$PIPELINE_DIR/runs/{ticket-id}/`
-- The `source` field in the ticket determines which research strategies to use
-
-## API Client Reference
-
-### Available Methods
-
-| Method                                                      | Description                                                         |
-| ----------------------------------------------------------- | ------------------------------------------------------------------- |
-| `createTicket({ notion_page_id, title, source, metadata })` | Create a new ticket in the API                                      |
-| `getTicket(id)`                                             | Retrieve a ticket by ID                                             |
-| `findByNotionId(notionPageId)`                              | Look up a ticket by its Notion page ID                              |
-| `listTickets({ state, agent_id, limit, offset })`           | List tickets with optional filters                                  |
-| `transitionState(id, state, reason)`                        | Move ticket to a new state (e.g., `'RESEARCH'`)                     |
-| `setPRCreated(id, prUrl)`                                   | Mark ticket as having a PR created                                  |
-| `queueSync(id, action, payload)`                            | Queue a sync action (`update_status`, `update_pr_url`, `mark_done`) |
-| `registerBranch(id, branch, repo)`                          | Register working branch for automatic PR detection                  |
-
-### Error Handling
-
-```typescript
-import { PipelineClient, PipelineAPIError } from '@pipeline/client';
-
-try {
-  await client.createTicket({ ... });
-} catch (error) {
-  if (error instanceof PipelineAPIError) {
-    console.error(`API Error ${error.status}: ${error.message}`);
-  }
-  throw error;
-}
-```

.claude/skills/ticket-intake/providers/github.md

@@ -1,194 +0,0 @@
-# GitHub Provider - Ticket Intake
-
-Provider-specific logic for ingesting tickets from GitHub Issues.
-
-## URL Pattern
-
-```
-https://github.com/{owner}/{repo}/issues/{number}
-https://www.github.com/{owner}/{repo}/issues/{number}
-```
-
-Extract: `owner`, `repo`, `issue_number` from URL.
-
-## Prerequisites
-
-- `gh` CLI authenticated (`gh auth status`)
-- Access to the repository
-
-## Fetch Issue Content
-
-Use `gh` CLI to fetch issue details:
-
-```bash
-# Get issue details in JSON
-gh issue view {number} --repo {owner}/{repo} --json title,body,state,labels,assignees,milestone,author,createdAt,comments,linkedPRs
-
-# Get comments separately if needed
-gh issue view {number} --repo {owner}/{repo} --comments
-```
-
-## Extract Ticket Data
-
-Map GitHub issue fields to normalized ticket data (stored via API):
-
-| GitHub Field | ticket.json Field | Notes                      |
-| ------------ | ----------------- | -------------------------- |
-| title        | title             | Direct mapping             |
-| body         | description       | Issue body/description     |
-| state        | status            | Map: open → "Not Started"  |
-| labels       | labels            | Array of label names       |
-| assignees    | assignee          | First assignee login       |
-| author       | author            | Issue author login         |
-| milestone    | milestone         | Milestone title if present |
-| comments     | comments          | Array of comment objects   |
-| linkedPRs    | linkedPRs         | PRs linked to this issue   |
-
-### Priority Mapping
-
-Infer priority from labels:
-
-- `priority:critical`, `P0` → "Critical"
-- `priority:high`, `P1` → "High"
-- `priority:medium`, `P2` → "Medium"
-- `priority:low`, `P3` → "Low"
-- No priority label → "Medium" (default)
-
-### Area Mapping
-
-Infer area from labels:
-
-- `area:ui`, `frontend`, `component:*` → "UI"
-- `area:api`, `backend` → "API"
-- `area:docs`, `documentation` → "Docs"
-- `bug`, `fix` → "Bug"
-- `enhancement`, `feature` → "Feature"
-
-## Update Source
-
-**For GitHub issues, update is optional but recommended.**
-
-Add a comment to indicate work has started:
-
-```bash
-gh issue comment {number} --repo {owner}/{repo} --body "🤖 Pipeline started processing this issue."
-```
-
-Optionally assign to self:
-
-```bash
-gh issue edit {number} --repo {owner}/{repo} --add-assignee @me
-```
-
-Log any updates via the Pipeline API:
-
-```typescript
-await client.updateTicket(ticketId, {
-  metadata: {
-    ...ticket.metadata,
-    githubWrites: [
-      ...(ticket.metadata?.githubWrites || []),
-      {
-        action: 'comment',
-        issueNumber: 123,
-        at: new Date().toISOString(),
-        skill: 'ticket-intake',
-        success: true
-      }
-    ]
-  }
-})
-```
-
-## GitHub-Specific Ticket Fields
-
-Store via API using `client.createTicket()`:
-
-```json
-{
-  "source": "github",
-  "githubOwner": "Comfy-Org",
-  "githubRepo": "ComfyUI_frontend",
-  "githubIssueNumber": 123,
-  "githubIssueUrl": "https://github.com/Comfy-Org/ComfyUI_frontend/issues/123",
-  "labels": ["bug", "area:ui", "priority:high"],
-  "linkedPRs": [456, 789],
-  "dosuComment": "..." // Extracted Dosu bot analysis if present
-}
-```
-
-## Dosu Bot Detection
-
-Many repositories use Dosu bot for automated issue analysis. Check comments for Dosu:
-
-```bash
-gh issue view {number} --repo {owner}/{repo} --comments | grep -A 100 "dosu"
-```
-
-Look for comments from:
-
-- `dosu[bot]`
-- `dosu-bot`
-
-Extract Dosu analysis which typically includes:
-
-- Root cause analysis
-- Suggested files to modify
-- Related issues/PRs
-- Potential solutions
-
-Store in ticket data via API:
-
-```json
-{
-  "dosuComment": {
-    "found": true,
-    "analysis": "...",
-    "suggestedFiles": ["src/file1.ts", "src/file2.ts"],
-    "relatedIssues": [100, 101]
-  }
-}
-```
-
-## Extract Linked Issues/PRs
-
-Parse issue body and comments for references:
-
-- `#123` → Issue or PR reference
-- `fixes #123`, `closes #123` → Linked issue
-- `https://github.com/.../issues/123` → Full URL reference
-
-Store in ticket data via API for research phase:
-
-```json
-{
-  "referencedIssues": [100, 101, 102],
-  "referencedPRs": [200, 201]
-}
-```
-
-## Error Handling
-
-### Authentication Error
-
-```
-⚠️ GitHub CLI not authenticated.
-Run: gh auth login
-```
-
-### Issue Not Found
-
-```
-❌ GitHub issue not found or inaccessible.
-- Check the URL is correct
-- Ensure you have access to this repository
-- Run: gh auth status
-```
-
-### Rate Limiting
-
-```
-⚠️ GitHub API rate limited.
-Wait a few minutes and try again.
-Check status: gh api rate_limit
-```

.claude/skills/ticket-intake/providers/notion.md

@@ -1,202 +0,0 @@
-# Notion Provider - Ticket Intake
-
-Provider-specific logic for ingesting tickets from Notion.
-
-## URL Pattern
-
-```
-https://www.notion.so/workspace/Page-Title-abc123def456...
-https://notion.so/Page-Title-abc123def456...
-https://www.notion.so/abc123def456...
-```
-
-Page ID is the 32-character hex string (with or without hyphens).
-
-## Prerequisites
-
-- Notion MCP connected and authenticated
-- If not setup: `claude mcp add --transport http notion https://mcp.notion.com/mcp`
-- Authenticate via `/mcp` command if prompted
-
-## Fetch Ticket Content
-
-Use `Notion:notion-fetch` with the page URL or ID:
-
-```
-Fetch the full page content including all properties
-```
-
-## Extract Ticket Data
-
-Extract these properties (names may vary):
-
-| Property      | Expected Name             | Type         |
-| ------------- | ------------------------- | ------------ |
-| Title         | Name / Title              | Title        |
-| Status        | Status                    | Select       |
-| Assignee      | Assignee / Assigned To    | Person       |
-| Description   | -                         | Page content |
-| Slack Link    | Slack Link / Slack Thread | URL          |
-| GitHub PR     | GitHub PR / PR Link       | URL          |
-| Priority      | Priority                  | Select       |
-| Area          | Area / Category           | Select       |
-| Related Tasks | Related Tasks             | Relation     |
-
-**If properties are missing**: Note what's unavailable and continue with available data.
-
-## Update Source (REQUIRED)
-
-**⚠️ DO NOT SKIP THIS STEP. This is a required action, not optional.**
-
-**⚠️ Notion Write Safety rules apply (see `$PIPELINE_DIR/docs/notion-write-safety.md` for full reference):**
-
-- **Whitelist**: Only `Status`, `GitHub PR`, and `Assignee` fields may be written
-- **Valid transitions**: Not Started → In Progress, In Progress → In Review, In Review → Done
-- **Logging**: Every write attempt MUST be logged with timestamp, field, value, previous value, skill name, and success status
-
-Use `Notion:notion-update-page` to update the ticket:
-
-1. **Status**: Set to "In Progress" (only valid from "Not Started")
-2. **Assignee**: Assign to pipeline owner (Notion ID: `175d872b-594c-81d4-ba5a-0002911c5966`)
-
-```json
-{
-  "page_id": "{page_id_from_ticket}",
-  "command": "update_properties",
-  "properties": {
-    "Status": "In Progress",
-    "Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"
-  }
-}
-```
-
-**After the update succeeds**, log the write via the Pipeline API:
-
-```typescript
-await client.updateTicket(ticketId, {
-  metadata: {
-    ...ticket.metadata,
-    notionWrites: [
-      ...(ticket.metadata?.notionWrites || []),
-      {
-        field: 'Status',
-        value: 'In Progress',
-        previousValue: 'Not Started',
-        at: new Date().toISOString(),
-        skill: 'ticket-intake',
-        success: true
-      }
-    ]
-  }
-})
-```
-
-If update fails, log with `success: false` and continue.
-
-## Notion-Specific Ticket Fields
-
-Store via API using `client.createTicket()`:
-
-```json
-{
-  "source": "notion",
-  "notionPageId": "abc123def456...",
-  "slackLink": "https://slack.com/...",
-  "relatedTasks": ["page-id-1", "page-id-2"]
-}
-```
-
-## Slack Thread Handling
-
-If a Slack link exists, use the `slackdump` skill to fetch the thread content programmatically.
-
-### Slack URL Conversion
-
-Notion stores Slack links in `slackMessage://` format:
-
-```
-slackMessage://comfy-organization.slack.com/CHANNEL_ID/THREAD_TS/MESSAGE_TS
-```
-
-Convert to browser-clickable format:
-
-```
-https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS_NO_DOT
-```
-
-**Example:**
-
-- Input: `slackMessage://comfy-organization.slack.com/C075ANWQ8KS/1766022478.450909/1764772881.854829`
-- Output: `https://comfy-organization.slack.com/archives/C075ANWQ8KS/p1764772881854829`
-
-(Remove the dot from the last timestamp and prefix with `p`)
-
-### Fetching Thread Content
-
-Load the `slackdump` skill and use the **export-thread** workflow:
-
-```bash
-# Export thread by URL
-slackdump dump "https://comfy-organization.slack.com/archives/CHANNEL_ID/pMESSAGE_TS"
-
-# Or by colon notation (channel_id:thread_ts)
-slackdump dump CHANNEL_ID:THREAD_TS
-```
-
-Save the thread content to `$RUN_DIR/slack-context.md` and include it in the ticket metadata.
-
-> **No manual action required.** The slackdump CLI handles authentication via stored credentials at `~/.cache/slackdump/comfy-organization.bin`.
-
-## Database Reference: Comfy Tasks
-
-The "Comfy Tasks" database has these properties (verify via `notion-search`):
-
-- **Status values**: Not Started, In Progress, In Review, Done
-- **Team assignment**: "Frontend Team" for unassigned tickets
-- **Filtering note**: Team filtering in Notion may have quirks - handle gracefully
-
-### Pipeline Owner Details
-
-When assigning tickets, use these identifiers:
-
-| Platform        | Identifier                             |
-| --------------- | -------------------------------------- |
-| Notion User ID  | `175d872b-594c-81d4-ba5a-0002911c5966` |
-| Notion Name     | Christian Byrne                        |
-| Notion Email    | cbyrne@comfy.org                       |
-| Slack User ID   | U087MJCDHHC                            |
-| GitHub Username | christian-byrne                        |
-
-**To update Assignee**, use the Notion User ID (not name):
-
-```
-properties: {"Assignee": "175d872b-594c-81d4-ba5a-0002911c5966"}
-```
-
-### Finding Active Tickets
-
-To list your active tickets:
-
-```
-Use Notion:notion-search for "Comfy Tasks"
-Filter by Assignee = current user OR Team = "Frontend Team"
-```
-
-## Error Handling
-
-### Authentication Error
-
-```
-⚠️ Notion authentication required.
-Run: claude mcp add --transport http notion https://mcp.notion.com/mcp
-Then authenticate via /mcp command.
-```
-
-### Page Not Found
-
-```
-❌ Notion page not found or inaccessible.
-- Check the URL is correct
-- Ensure you have access to this page
-- Try re-authenticating via /mcp
-```

.claude/skills/ticket-intake/schema.md

@@ -1,81 +0,0 @@
-# Ticket Schema
-
-Common schema for normalized ticket data across all sources. This data is stored and retrieved via the Pipeline API, not local files.
-
-## Ticket Data Schema
-
-```json
-{
-  // Required fields (all sources)
-  "id": "string", // Unique identifier (short form)
-  "url": "string", // Original URL
-  "source": "notion | github", // Source type
-  "title": "string", // Ticket title
-  "description": "string", // Full description/body
-  "fetchedAt": "ISO8601", // When ticket was fetched
-
-  // Common optional fields
-  "status": "string", // Current status
-  "assignee": "string", // Assigned user
-  "priority": "string", // Priority level
-  "area": "string", // Category/area
-  "labels": ["string"], // Tags/labels
-  "acceptanceCriteria": ["string"] // List of AC items
-
-  // Source-specific fields (see providers)
-  // Notion: notionPageId, slackLink, relatedTasks, notionWrites
-  // GitHub: githubOwner, githubRepo, githubIssueNumber, linkedPRs, dosuComment, referencedIssues
-}
-```
-
-## Ticket State Schema (via API)
-
-State is managed via the Pipeline API using `client.transitionState()`:
-
-```json
-{
-  "ticketId": "string",
-  "state": "intake | research | planning | implementation | pr_created | done | failed",
-  "stateChangedAt": "ISO8601",
-
-  // Timestamps tracked by API
-  "createdAt": "ISO8601",
-  "updatedAt": "ISO8601"
-}
-```
-
-## Priority Normalization
-
-All sources should normalize to these values:
-
-| Normalized | Description               |
-| ---------- | ------------------------- |
-| Critical   | Production down, security |
-| High       | Blocking work, urgent     |
-| Medium     | Normal priority (default) |
-| Low        | Nice to have, backlog     |
-
-## Status Normalization
-
-Pipeline tracks these statuses internally:
-
-| Status         | Description                  |
-| -------------- | ---------------------------- |
-| research       | Gathering context            |
-| planning       | Creating implementation plan |
-| implementation | Writing code                 |
-| review         | Code review in progress      |
-| qa             | Quality assurance            |
-| done           | PR merged or completed       |
-
-## ID Generation
-
-IDs are generated by the API when creating tickets. For reference:
-
-- **Notion**: First 8 characters of page ID
-- **GitHub**: `gh-{owner}-{repo}-{issue_number}` (sanitized)
-
-Examples:
-
-- Notion: `abc12345`
-- GitHub: `gh-comfy-org-frontend-123`

.claude/skills/writing-playwright-tests/SKILL.md

@@ -44,18 +44,15 @@ await expect(node).toHaveClass(BYPASS_CLASS)
 
 These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
 
-| Symptom                             | Common Cause              | Typical Fix                                                                            |
-| ----------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
-| Test passes locally, fails in CI    | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
-| Keyboard shortcuts don't work       | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
-| Double-click doesn't trigger        | Timing too fast           | Add `{ delay: 5 }` option                                                              |
-| Elements end up in wrong position   | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
-| Widget value wrong after drag-drop  | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
-| Test fails when run with others     | Test pollution            | Add `afterEach` with `resetView()`                                                     |
-| Local screenshots don't match CI    | Platform differences      | Screenshots are Linux-only, use PR label                                               |
-| `subtree intercepts pointer events` | Canvas overlay (z-999)    | Use `dispatchEvent` on the DOM element to bypass overlay                               |
-| Context menu empty / wrong items    | Node not selected         | Select node first: `vueNodes.selectNode()` or `nodeRef.click('title')`                 |
-| `navigateIntoSubgraph` timeout      | Node too small in asset   | Use node size `[400, 200]` minimum in test asset JSON                                  |
+| Symptom                            | Common Cause              | Typical Fix                                                                            |
+| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
+| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
+| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
+| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
+| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
+| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
+| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
+| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
 
 ## Test Tags
 

.claude/skills/writing-storybook-stories/SKILL.md

@@ -1,143 +0,0 @@
----
-name: writing-storybook-stories
-description: 'Write or update Storybook stories for Vue components in ComfyUI_frontend. Use when adding, modifying, reviewing, or debugging `.stories.ts` files, Storybook docs, component demos, or visual catalog entries in `src/` or `apps/desktop-ui/`.'
----
-
-# Write Storybook Stories for ComfyUI_frontend
-
-## Workflow
-
-1. !!!!IMPORTANT Confirm the worktree is on a `feat/*` or `fix/*` branch. Base PRs on the local `main`, not a fork branch.
-2. Read the component source first. Understand props, emits, slots, exposed methods, and any supporting types or composables.
-3. Read nearby stories before writing anything.
-   - Search stories: `rg --files src apps | rg '\.stories\.ts$'`
-   - Inspect title patterns: `rg -n "title:\\s*'" src apps --glob '*.stories.ts'`
-4. If a Figma link is provided, list the states you need to cover before writing stories.
-5. Co-locate the story file with the component: `ComponentName.stories.ts`.
-6. Add each variation on separate stories, except hover state. this should be automatically applied by the implementation and not require a separate story.
-7. Run Storybook and validation checks before handing off.
-
-## Match Local Conventions
-
-- Copy the closest neighboring story instead of forcing one universal template.
-- Most repo stories use `@storybook/vue3-vite`. Some stories under `apps/desktop-ui` still use `@storybook/vue3`; keep the local convention for that area.
-- Add `tags: ['autodocs']` unless the surrounding stories in that area intentionally omit it.
-- Use `ComponentPropsAndSlots<typeof Component>` when it helps with prop and slot typing.
-- Keep `render` functions stateful when needed. Use `ref()`, `computed()`, and `toRefs(args)` instead of mutating Storybook args directly.
-- Use `args.default` or other slot-shaped args when the component content is provided through slots.
-- Use `ComponentExposed` only when a component's exposed API breaks the normal Storybook typing.
-- Add decorators for realistic width or background context when the component needs it.
-
-## Title Patterns
-
-Do not invent titles from scratch when a close sibling story already exists. Match the nearest domain pattern.
-
-| Component area                                          | Typical title pattern                |
-| ------------------------------------------------------- | ------------------------------------ |
-| `src/components/ui/button/Button.vue`                   | `Components/Button/Button`           |
-| `src/components/ui/input/Input.vue`                     | `Components/Input`                   |
-| `src/components/ui/search-input/SearchInput.vue`        | `Components/Input/SearchInput`       |
-| `src/components/common/SearchBox.vue`                   | `Components/Input/SearchBox`         |
-| `src/renderer/extensions/vueNodes/widgets/components/*` | `Widgets/<WidgetName>`               |
-| `src/platform/assets/components/*`                      | `Platform/Assets/<ComponentName>`    |
-| `apps/desktop-ui/src/components/*`                      | `Desktop/Components/<ComponentName>` |
-| `apps/desktop-ui/src/views/*`                           | `Desktop/Views/<ViewName>`           |
-
-If multiple patterns seem plausible, follow the closest sibling story in the same folder tree.
-
-## Common Story Shapes
-
-### Stateful input or `v-model`
-
-```typescript
-export const Default: Story = {
-  render: (args) => ({
-    components: { MyComponent },
-    setup() {
-      const { disabled, size } = toRefs(args)
-      const value = ref('Hello world')
-      return { value, disabled, size }
-    },
-    template:
-      '<MyComponent v-model="value" :disabled="disabled" :size="size" />'
-  })
-}
-```
-
-### Slot-driven content
-
-```typescript
-const meta: Meta<ComponentPropsAndSlots<typeof Button>> = {
-  argTypes: {
-    default: { control: 'text' }
-  },
-  args: {
-    default: 'Button'
-  }
-}
-
-export const SingleButton: Story = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args }
-    },
-    template: '<Button v-bind="args">{{ args.default }}</Button>'
-  })
-}
-```
-
-### Variants or edge cases grid
-
-```typescript
-export const AllVariants: Story = {
-  render: () => ({
-    components: { MyComponent },
-    template: `
-      <div class="grid gap-4 sm:grid-cols-2">
-        <MyComponent />
-        <MyComponent disabled />
-        <MyComponent loading />
-        <MyComponent invalid />
-      </div>
-    `
-  })
-}
-```
-
-## Figma Mapping
-
-- Extract the named states from the design first.
-- Prefer explicit prop-driven stories such as `Disabled`, `Loading`, `Invalid`, `WithPlaceholder`, `AllSizes`, or `EdgeCases`.
-- Add an aggregate story such as `AllVariants`, `AllSizes`, or `EdgeCases` when side-by-side comparison is useful.
-- Use pseudo-state parameters only if the addon is already configured in this repo.
-- If a Figma state cannot be represented exactly, capture the closest prop-driven version and explain the gap in the story docs.
-
-## Component-Specific Notes
-
-- Widget components often need a minimal `SimplifiedWidget` object. Build it in `setup()` and use `computed()` when `args` change `widget.options`.
-- Input and search components often need a width-constrained wrapper so they render at realistic sizes.
-- Asset and platform cards often need background decorators such as `bg-base-background` and fixed-width containers.
-- Desktop installer stories may need custom `backgrounds` parameters and may intentionally keep the older Storybook import style used by neighboring files.
-- Use semantic tokens such as `bg-base-background` and `bg-node-component-surface` instead of `dark:` variants or hardcoded theme assumptions.
-
-## Checklist
-
-- [ ] Read the component source and any supporting types or composables
-- [ ] Match the nearest local title pattern and story style
-- [ ] Include a baseline story; name it `Default` only when that matches nearby conventions
-- [ ] Add focused stories for meaningful states
-- [ ] Add `tags: ['autodocs']`
-- [ ] Keep the story co-located with the component
-- [ ] Run `pnpm storybook`
-- [ ] Run `pnpm typecheck`
-- [ ] Run `pnpm lint`
-
-## Avoid
-
-- Do not guess props, emits, slots, or exposed methods.
-- Do not force one generic title convention across the repo.
-- Do not mutate Storybook args directly for `v-model` components.
-- Do not introduce `dark:` Tailwind variants in story wrappers.
-- Do not create barrel files.
-- Do not assume every story needs `layout: 'centered'` or a `Default` export; follow the nearest existing pattern.

.claude/skills/writing-storybook-stories/agents/openai.yaml

@@ -1,4 +0,0 @@
-interface:
-  display_name: 'ComfyUI Storybook Stories'
-  short_description: 'Write Vue Storybook stories for ComfyUI'
-  default_prompt: 'Use $writing-storybook-stories to add or update a Storybook story for this ComfyUI_frontend component.'

.coderabbit.yaml

@@ -3,7 +3,6 @@ issue_enrichment:
     enabled: true
 reviews:
   high_level_summary: false
-  request_changes_workflow: true
   auto_review:
     drafts: true
     ignore_title_keywords:
@@ -13,18 +12,3 @@ reviews:
       - comfy-pr-bot
       - github-actions
       - github-actions[bot]
-  pre_merge_checks:
-    override_requested_reviewers_only: true
-    custom_checks:
-      - name: End-to-end regression coverage for fixes
-        mode: error
-        instructions: |
-          Use only PR metadata already available in the review context: the PR title, commit subjects in this PR, the files changed in this PR relative to the PR base (equivalent to `base...head`), and the PR description.
-          Do not rely on shell commands. Do not inspect reverse diffs, files changed only on the base branch, or files outside this PR. If the changed-file list or commit subjects are unavailable, mark the check inconclusive instead of guessing.
-
-          Pass if at least one of the following is true:
-          1. Neither the PR title nor any commit subject in the PR uses bug-fix language such as `fix`, `fixed`, `fixes`, `fixing`, `bugfix`, or `hotfix`.
-          2. The PR changes at least one file under `browser_tests/`.
-          3. The PR description includes a concrete, non-placeholder explanation of why an end-to-end regression test was not added.
-
-          Fail otherwise. When failing, mention which bug-fix signal you found and ask the author to either add or update a Playwright regression test under `browser_tests/` or add a concrete explanation in the PR description of why an end-to-end regression test is not practical.

.env_example

@@ -45,4 +45,3 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
-# SENTRY_PROJECT_PROD= # prod project slug for sourcemap uploads

.gitattributes

@@ -3,6 +3,4 @@
 
 # Generated files
 packages/registry-types/src/comfyRegistryTypes.ts linguist-generated=true
-packages/ingest-types/src/types.gen.ts linguist-generated=true
-packages/ingest-types/src/zod.gen.ts linguist-generated=true
 src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true

.github/actions/setup-frontend/action.yaml

@@ -12,14 +12,14 @@ runs:
 
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
-      uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
       with:
         version: 10
 
     - name: Setup Node.js
       uses: actions/setup-node@v6
       with:
-        node-version-file: '.nvmrc'
+        node-version: 'lts/*'
         cache: 'pnpm'
         cache-dependency-path: './pnpm-lock.yaml'
 

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

@@ -16,14 +16,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Update electron types

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

@@ -21,14 +21,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -20,14 +20,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -19,14 +19,14 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/ci-lint-format.yaml

@@ -61,22 +61,6 @@ jobs:
           git commit -m "[automated] Apply ESLint and Oxfmt fixes"
           git push
 
-      - name: Fail for fork PRs with unfixed lint/format issues
-        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
-        run: |
-          echo "::error::Linting/formatting issues found. Since this PR is from a fork, auto-fix cannot be applied automatically."
-          echo ""
-          echo "Please run these commands locally and push the changes:"
-          echo "  pnpm lint:fix"
-          echo "  pnpm stylelint:fix"
-          echo "  pnpm format"
-          echo ""
-          echo "Or set up pre-commit hooks to automatically format on every commit:"
-          echo "  pnpm prepare"
-          echo ""
-          echo "See CONTRIBUTING.md for more details."
-          exit 1
-
       - name: Final validation
         run: |
           pnpm lint
@@ -100,3 +84,16 @@ jobs:
               repo: context.repo.repo,
               body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting'
             })
+
+      - name: Comment on PR about manual fix needed
+        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
+        continue-on-error: true
+        uses: actions/github-script@v8
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\npnpm prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\npnpm lint:fix\npnpm format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
+            })

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

@@ -20,14 +20,14 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
         with:
           version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -75,14 +75,14 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
         with:
           version: 10
 
       - name: Use Node.js
         uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -10,7 +10,7 @@ on:
 
 concurrency:
   group: perf-${{ github.ref }}
-  cancel-in-progress: false
+  cancel-in-progress: true
 
 permissions:
   contents: read
@@ -26,15 +26,12 @@ jobs:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
     permissions:
-      contents: write
+      contents: read
       packages: read
-      actions: read
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
-        with:
-          persist-credentials: false
 
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
@@ -64,7 +61,6 @@ jobs:
           mkdir -p temp/perf-meta
           echo "${{ github.event.number }}" > temp/perf-meta/number.txt
           echo "${{ github.event.pull_request.base.ref }}" > temp/perf-meta/base.txt
-          echo "${{ github.event.pull_request.head.sha }}" > temp/perf-meta/head-sha.txt
 
       - name: Upload PR metadata
         if: github.event_name == 'pull_request'
@@ -72,44 +68,3 @@ jobs:
         with:
           name: perf-meta
           path: temp/perf-meta/
-
-      - name: Save perf baseline to perf-data branch
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main' && steps.perf.outcome == 'success'
-        continue-on-error: true
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-          git config url."https://x-access-token:${GH_TOKEN}@github.com/".insteadOf "https://github.com/"
-
-          cp test-results/perf-metrics.json /tmp/perf-metrics.json
-
-          git fetch origin perf-data || {
-            echo "Creating perf-data branch"
-            git checkout --orphan perf-data
-            git rm -rf . 2>/dev/null || true
-            echo "# Performance Baselines" > README.md
-            mkdir -p baselines
-            git add README.md baselines
-            git commit -m "Initialize perf-data branch"
-            git push origin perf-data
-            git fetch origin perf-data
-          }
-
-          git worktree add /tmp/perf-data origin/perf-data
-
-          TIMESTAMP=$(date -u +%Y%m%dT%H%M%SZ)
-          SHA=$(echo "${{ github.sha }}" | cut -c1-8)
-          mkdir -p /tmp/perf-data/baselines
-          cp /tmp/perf-metrics.json "/tmp/perf-data/baselines/perf-${TIMESTAMP}-${SHA}.json"
-
-          # Keep only last 20 baselines
-          cd /tmp/perf-data
-          ls -t baselines/perf-*.json 2>/dev/null | tail -n +21 | xargs -r rm
-
-          git -C /tmp/perf-data add baselines/
-          git -C /tmp/perf-data commit -m "perf: add baseline for ${SHA}" || echo "No changes to commit"
-          git -C /tmp/perf-data push origin HEAD:perf-data
-
-          git worktree remove /tmp/perf-data --force 2>/dev/null || true
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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

@@ -8,10 +8,6 @@ on:
     branches:
       - main
 
-concurrency:
-  group: size-${{ github.ref }}
-  cancel-in-progress: true
-
 permissions:
   contents: read
 
@@ -32,12 +28,11 @@ jobs:
       - name: Collect size data
         run: node scripts/size-collect.js
 
-      - name: Save PR metadata
+      - name: Save PR number & base branch
         if: ${{ github.event_name == 'pull_request' }}
         run: |
           echo ${{ github.event.number }} > ./temp/size/number.txt
           echo ${{ github.base_ref }} > ./temp/size/base.txt
-          echo ${{ github.event.pull_request.head.sha }} > ./temp/size/head-sha.txt
 
       - name: Upload size data
         uses: actions/upload-artifact@v6

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

@@ -144,7 +144,7 @@ jobs:
     if: ${{ !cancelled() }}
     steps:
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 

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

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

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

@@ -14,7 +14,7 @@ on:
       - 'cloud/*'
       - 'main'
   pull_request:
-    types: [labeled, synchronize]
+    types: [labeled]
   workflow_dispatch:
 
 permissions: {}
@@ -26,18 +26,11 @@ concurrency:
 jobs:
   dispatch:
     # Fork guard: prevent forks from dispatching to the cloud repo.
-    # For pull_request events, only dispatch for preview labels.
-    # - labeled: fires when a label is added; check the added label name.
-    # - synchronize: fires on push; check existing labels on the PR.
+    # For pull_request events, only dispatch when the 'preview' label is added.
     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'))))
+       github.event.label.name == 'preview')
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload
@@ -46,10 +39,6 @@ jobs:
           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}"
@@ -61,15 +50,11 @@ jobs:
           else
             REF="${GITHUB_SHA}"
             BRANCH="${GITHUB_REF_NAME}"
-            PR_NUMBER=""
-            VARIANT=""
           fi
           payload="$(jq -nc \
             --arg ref "${REF}" \
             --arg branch "${BRANCH}" \
-            --arg pr_number "${PR_NUMBER}" \
-            --arg variant "${VARIANT}" \
-            '{ref: $ref, branch: $branch, pr_number: $pr_number, variant: $variant}')"
+            '{ref: $ref, branch: $branch}')"
           echo "json=${payload}" >> "${GITHUB_OUTPUT}"
 
       - name: Dispatch to cloud repo

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

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

.github/workflows/pr-backport.yaml

@@ -348,8 +348,6 @@ jobs:
               PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
 
               if [ -n "${PR_NUM}" ]; then
-                gh pr merge "${PR_NUM}" --auto --squash --repo "${{ github.repository }}" \
-                  || echo "::warning::Failed to enable auto-merge for PR #${PR_NUM}"
                 gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
               fi
             else

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

@@ -29,14 +29,14 @@ jobs:
           ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

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

@@ -0,0 +1,102 @@
+name: 'PR: Performance Report'
+
+on:
+  workflow_run:
+    workflows: ['CI: Performance Report']
+    types:
+      - completed
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+
+      - name: Download PR metadata
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          name: perf-meta
+          run_id: ${{ github.event.workflow_run.id }}
+          path: temp/perf-meta/
+
+      - name: Resolve and validate PR metadata
+        id: pr-meta
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+            const artifactPr = Number(fs.readFileSync('temp/perf-meta/number.txt', 'utf8').trim());
+            const artifactBase = fs.readFileSync('temp/perf-meta/base.txt', 'utf8').trim();
+
+            // Resolve PR from trusted workflow context
+            let pr = context.payload.workflow_run.pull_requests?.[0];
+            if (!pr) {
+              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                commit_sha: context.payload.workflow_run.head_sha,
+              });
+              pr = prs.find(p => p.state === 'open');
+            }
+
+            if (!pr) {
+              core.setFailed('Unable to resolve PR from workflow_run context.');
+              return;
+            }
+
+            if (Number(pr.number) !== artifactPr) {
+              core.setFailed(`Artifact PR number (${artifactPr}) does not match trusted context (${pr.number}).`);
+              return;
+            }
+
+            const trustedBase = pr.base?.ref;
+            if (!trustedBase || artifactBase !== trustedBase) {
+              core.setFailed(`Artifact base (${artifactBase}) does not match trusted context (${trustedBase}).`);
+              return;
+            }
+
+            core.setOutput('number', String(pr.number));
+            core.setOutput('base', trustedBase);
+
+      - name: Download PR perf metrics
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          name: perf-metrics
+          run_id: ${{ github.event.workflow_run.id }}
+          path: test-results/
+
+      - name: Download baseline perf metrics
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: ${{ steps.pr-meta.outputs.base }}
+          workflow: ci-perf-report.yaml
+          event: push
+          name: perf-metrics
+          path: temp/perf-baseline/
+          if_no_artifact_found: warn
+
+      - name: Generate perf report
+        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
+
+      - name: Post PR comment
+        uses: ./.github/actions/post-pr-report-comment
+        with:
+          pr-number: ${{ steps.pr-meta.outputs.number }}
+          report-file: ./perf-report.md
+          comment-marker: '<!-- COMFYUI_FRONTEND_PERF -->'
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-report.yaml

@@ -1,233 +0,0 @@
-name: 'PR: Unified Report'
-
-on:
-  workflow_run:
-    workflows: ['CI: Size Data', 'CI: Performance Report']
-    types:
-      - completed
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-  actions: read
-
-concurrency:
-  group: pr-report-${{ github.event.workflow_run.head_sha }}
-  cancel-in-progress: true
-
-jobs:
-  comment:
-    runs-on: ubuntu-latest
-    if: >
-      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      github.event.workflow_run.event == 'pull_request'
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Resolve PR from workflow_run context
-        id: pr-meta
-        uses: actions/github-script@v8
-        with:
-          script: |
-            let pr = context.payload.workflow_run.pull_requests?.[0];
-            if (!pr) {
-              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                commit_sha: context.payload.workflow_run.head_sha,
-              });
-              pr = prs.find(p => p.state === 'open');
-            }
-
-            if (!pr) {
-              core.info('No open PR found for this workflow run — skipping.');
-              core.setOutput('skip', 'true');
-              return;
-            }
-
-            // Verify the workflow_run head SHA matches the current PR head
-            const { data: livePr } = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: pr.number,
-            });
-
-            if (livePr.head.sha !== context.payload.workflow_run.head_sha) {
-              core.info(`Stale run: workflow SHA ${context.payload.workflow_run.head_sha} != PR head ${livePr.head.sha}`);
-              core.setOutput('skip', 'true');
-              return;
-            }
-
-            core.setOutput('skip', 'false');
-            core.setOutput('number', String(pr.number));
-            core.setOutput('base', livePr.base.ref);
-            core.setOutput('head-sha', livePr.head.sha);
-
-      - name: Find size workflow run for this commit
-        if: steps.pr-meta.outputs.skip != 'true'
-        id: find-size
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
-            const { data: runs } = await github.rest.actions.listWorkflowRuns({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              workflow_id: 'ci-size-data.yaml',
-              head_sha: headSha,
-              per_page: 1,
-            });
-
-            const run = runs.workflow_runs[0];
-            if (!run) {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.status !== 'completed') {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.conclusion !== 'success') {
-              core.setOutput('status', 'failed');
-              return;
-            }
-
-            core.setOutput('status', 'ready');
-            core.setOutput('run-id', String(run.id));
-
-      - name: Find perf workflow run for this commit
-        if: steps.pr-meta.outputs.skip != 'true'
-        id: find-perf
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const headSha = '${{ steps.pr-meta.outputs.head-sha }}';
-            const { data: runs } = await github.rest.actions.listWorkflowRuns({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              workflow_id: 'ci-perf-report.yaml',
-              head_sha: headSha,
-              per_page: 1,
-            });
-
-            const run = runs.workflow_runs[0];
-            if (!run) {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.status !== 'completed') {
-              core.setOutput('status', 'pending');
-              return;
-            }
-
-            if (run.conclusion !== 'success') {
-              core.setOutput('status', 'failed');
-              return;
-            }
-
-            core.setOutput('status', 'ready');
-            core.setOutput('run-id', String(run.id));
-
-      - name: Download size data (current)
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-size.outputs.status == 'ready'
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          name: size-data
-          run_id: ${{ steps.find-size.outputs.run-id }}
-          path: temp/size
-
-      - name: Download size baseline
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-size.outputs.status == 'ready'
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: ${{ steps.pr-meta.outputs.base }}
-          workflow: ci-size-data.yaml
-          event: push
-          name: size-data
-          path: temp/size-prev
-          if_no_artifact_found: warn
-
-      - name: Download perf metrics (current)
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-perf.outputs.status == 'ready'
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          name: perf-metrics
-          run_id: ${{ steps.find-perf.outputs.run-id }}
-          path: test-results/
-
-      - name: Download perf baseline
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-perf.outputs.status == 'ready'
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: ${{ steps.pr-meta.outputs.base }}
-          workflow: ci-perf-report.yaml
-          event: push
-          name: perf-metrics
-          path: temp/perf-baseline/
-          if_no_artifact_found: warn
-
-      - name: Download perf history from perf-data branch
-        if: steps.pr-meta.outputs.skip != 'true' && steps.find-perf.outputs.status == 'ready'
-        continue-on-error: true
-        run: |
-          if git ls-remote --exit-code origin perf-data >/dev/null 2>&1; then
-            git fetch origin perf-data --depth=1
-            mkdir -p temp/perf-history
-            for file in $(git ls-tree --name-only origin/perf-data baselines/ 2>/dev/null | sort -r | head -10); do
-              git show "origin/perf-data:${file}" > "temp/perf-history/$(basename "$file")" 2>/dev/null || true
-            done
-            echo "Loaded $(ls temp/perf-history/*.json 2>/dev/null | wc -l) historical baselines"
-          fi
-
-      - name: Generate unified report
-        if: steps.pr-meta.outputs.skip != 'true'
-        run: >
-          node scripts/unified-report.js
-          --size-status=${{ steps.find-size.outputs.status }}
-          --perf-status=${{ steps.find-perf.outputs.status }}
-          > pr-report.md
-
-      - name: Remove legacy separate comments
-        if: steps.pr-meta.outputs.skip != 'true'
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const prNumber = Number('${{ steps.pr-meta.outputs.number }}');
-            const legacyMarkers = [
-              '<!-- COMFYUI_FRONTEND_SIZE -->',
-              '<!-- COMFYUI_FRONTEND_PERF -->',
-            ];
-
-            const comments = await github.paginate(github.rest.issues.listComments, {
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: prNumber,
-              per_page: 100,
-            });
-
-            for (const comment of comments) {
-              if (legacyMarkers.some(m => comment.body?.includes(m))) {
-                await github.rest.issues.deleteComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  comment_id: comment.id,
-                });
-                core.info(`Deleted legacy comment ${comment.id}`);
-              }
-            }
-
-      - name: Post PR comment
-        if: steps.pr-meta.outputs.skip != 'true'
-        uses: ./.github/actions/post-pr-report-comment
-        with:
-          pr-number: ${{ steps.pr-meta.outputs.number }}
-          report-file: ./pr-report.md
-          comment-marker: '<!-- COMFYUI_FRONTEND_PR_REPORT -->'
-          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-request-team-review.yaml

@@ -1,24 +0,0 @@
-# Request team review for PRs from external contributors.
-name: PR:Request Team Review
-
-on:
-  pull_request_target:
-    types: [opened, reopened]
-
-permissions:
-  pull-requests: write
-
-jobs:
-  request-review:
-    if: >-
-      !contains(fromJson('["OWNER","MEMBER","COLLABORATOR"]'),
-                github.event.pull_request.author_association)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Request team review
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh pr edit ${{ github.event.pull_request.number }} \
-            --repo ${{ github.repository }} \
-            --add-reviewer Comfy-org/comfy_frontend_devs

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

@@ -0,0 +1,133 @@
+name: 'PR: Size Report'
+
+on:
+  workflow_run:
+    workflows: ['CI: Size Data']
+    types:
+      - completed
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to report on'
+        required: true
+        type: number
+      run_id:
+        description: 'Size data workflow run ID'
+        required: true
+        type: string
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      (
+        (github.event_name == 'workflow_run' &&
+         github.event.workflow_run.event == 'pull_request' &&
+         github.event.workflow_run.conclusion == 'success') ||
+        github.event_name == 'workflow_dispatch'
+      )
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup frontend
+        uses: ./.github/actions/setup-frontend
+
+      - name: Download size data
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          name: size-data
+          run_id: ${{ github.event_name == 'workflow_dispatch' && inputs.run_id || github.event.workflow_run.id }}
+          path: temp/size
+
+      - name: Resolve and validate PR metadata
+        id: pr-meta
+        uses: actions/github-script@v8
+        with:
+          script: |
+            const fs = require('fs');
+
+            // workflow_dispatch: validate artifact metadata against API-resolved PR
+            if (context.eventName === 'workflow_dispatch') {
+              const pullNumber = Number('${{ inputs.pr_number }}');
+              const { data: dispatchPr } = await github.rest.pulls.get({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                pull_number: pullNumber,
+              });
+
+              const artifactPr = Number(fs.readFileSync('temp/size/number.txt', 'utf8').trim());
+              const artifactBase = fs.readFileSync('temp/size/base.txt', 'utf8').trim();
+
+              if (artifactPr !== dispatchPr.number) {
+                core.setFailed(`Artifact PR number (${artifactPr}) does not match dispatch PR (${dispatchPr.number}).`);
+                return;
+              }
+              if (artifactBase !== dispatchPr.base.ref) {
+                core.setFailed(`Artifact base (${artifactBase}) does not match dispatch PR base (${dispatchPr.base.ref}).`);
+                return;
+              }
+
+              core.setOutput('number', String(dispatchPr.number));
+              core.setOutput('base', dispatchPr.base.ref);
+              return;
+            }
+
+            // workflow_run: validate artifact metadata against trusted context
+            const artifactPr = Number(fs.readFileSync('temp/size/number.txt', 'utf8').trim());
+            const artifactBase = fs.readFileSync('temp/size/base.txt', 'utf8').trim();
+
+            let pr = context.payload.workflow_run.pull_requests?.[0];
+            if (!pr) {
+              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                commit_sha: context.payload.workflow_run.head_sha,
+              });
+              pr = prs.find(p => p.state === 'open');
+            }
+
+            if (!pr) {
+              core.setFailed('Unable to resolve PR from workflow_run context.');
+              return;
+            }
+
+            if (Number(pr.number) !== artifactPr) {
+              core.setFailed(`Artifact PR number (${artifactPr}) does not match trusted context (${pr.number}).`);
+              return;
+            }
+
+            const trustedBase = pr.base?.ref;
+            if (!trustedBase || artifactBase !== trustedBase) {
+              core.setFailed(`Artifact base (${artifactBase}) does not match trusted context (${trustedBase}).`);
+              return;
+            }
+
+            core.setOutput('number', String(pr.number));
+            core.setOutput('base', trustedBase);
+
+      - name: Download previous size data
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          branch: ${{ steps.pr-meta.outputs.base }}
+          workflow: ci-size-data.yaml
+          event: push
+          name: size-data
+          path: temp/size-prev
+          if_no_artifact_found: warn
+
+      - name: Generate size report
+        run: node scripts/size-report.js > size-report.md
+
+      - name: Post PR comment
+        uses: ./.github/actions/post-pr-report-comment
+        with:
+          pr-number: ${{ steps.pr-meta.outputs.number }}
+          report-file: ./size-report.md
+          comment-marker: '<!-- COMFYUI_FRONTEND_SIZE -->'
+          token: ${{ secrets.GITHUB_TOKEN }}

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

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

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

@@ -84,14 +84,14 @@ jobs:
           persist-credentials: false
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

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

@@ -75,14 +75,14 @@ jobs:
           path: comfyui
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: 'frontend/.nvmrc'
+          node-version: lts/*
 
       - name: Install dependencies
         working-directory: frontend
@@ -162,132 +162,9 @@ jobs:
           echo "- Target version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
           echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
 
-  publish-pypi:
-    needs: [resolve-version, trigger-release-if-needed]
-    if: >
-      always() &&
-      needs.resolve-version.result == 'success' &&
-      (needs.trigger-release-if-needed.result == 'success' ||
-       needs.trigger-release-if-needed.result == 'skipped')
-    runs-on: ubuntu-latest
-    steps:
-      - name: Wait for release PR to be created and merged
-        if: needs.trigger-release-if-needed.result == 'success'
-        env:
-          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-        run: |
-          set -euo pipefail
-
-          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
-          TARGET_BRANCH="${{ needs.resolve-version.outputs.target_branch }}"
-          echo "Waiting for version bump PR for v${TARGET_VERSION} on ${TARGET_BRANCH} to be merged..."
-
-          # Poll for up to 30 minutes (a human or automation needs to merge the version bump PR)
-          for i in $(seq 1 60); do
-            # Check if the tag exists (release-draft-create creates a tag on merge)
-            if gh api "repos/Comfy-Org/ComfyUI_frontend/git/ref/tags/v${TARGET_VERSION}" --silent 2>/dev/null; then
-              echo "✅ Tag v${TARGET_VERSION} found — release PR has been merged"
-              exit 0
-            fi
-            echo "Attempt $i/60: Tag v${TARGET_VERSION} not found yet, waiting 30s..."
-            sleep 30
-          done
-
-          echo "❌ Timed out waiting for tag v${TARGET_VERSION}"
-          exit 1
-
-      - name: Checkout code at target version
-        uses: actions/checkout@v6
-        with:
-          ref: v${{ needs.resolve-version.outputs.target_version }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'pnpm'
-
-      - name: Build project
-        env:
-          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
-          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
-          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          ENABLE_MINIFY: 'true'
-          USE_PROD_CONFIG: 'true'
-        run: |
-          pnpm install --frozen-lockfile
-          pnpm build
-
-      - name: Set up Python
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.x'
-
-      - name: Install build dependencies
-        run: python -m pip install build
-
-      - name: Build and publish PyPI package
-        run: |
-          set -euo pipefail
-          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
-          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
-
-      - name: Build pypi package
-        run: python -m build
-        working-directory: comfyui_frontend_package
-        env:
-          COMFYUI_FRONTEND_VERSION: ${{ needs.resolve-version.outputs.target_version }}
-
-      - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
-        with:
-          skip-existing: true
-          password: ${{ secrets.PYPI_TOKEN }}
-          packages-dir: comfyui_frontend_package/dist
-
-      - name: Wait for PyPI propagation
-        run: |
-          set -euo pipefail
-
-          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
-          PACKAGE="comfyui-frontend-package"
-          echo "Waiting for ${PACKAGE}==${TARGET_VERSION} to be available on PyPI..."
-
-          # Wait up to 15 minutes (polling every 30 seconds)
-          for i in $(seq 1 30); do
-            HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/${PACKAGE}/${TARGET_VERSION}/json")
-            if [ "$HTTP_CODE" = "200" ]; then
-              echo "✅ ${PACKAGE}==${TARGET_VERSION} is available on PyPI"
-              exit 0
-            fi
-            echo "Attempt $i/30: PyPI returned HTTP ${HTTP_CODE}, waiting 30s..."
-            sleep 30
-          done
-
-          echo "❌ Timed out waiting for ${PACKAGE}==${TARGET_VERSION} on PyPI"
-          exit 1
-
-      - name: Summary
-        run: |
-          echo "## PyPI Publishing" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "- Package: comfyui-frontend-package" >> $GITHUB_STEP_SUMMARY
-          echo "- Version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
-          echo "- Status: ✅ Published and confirmed available" >> $GITHUB_STEP_SUMMARY
-
   create-comfyui-pr:
-    needs:
-      [
-        check-release-week,
-        resolve-version,
-        trigger-release-if-needed,
-        publish-pypi
-      ]
-    if: always() && needs.resolve-version.result == 'success' && needs.publish-pypi.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
+    needs: [check-release-week, resolve-version, trigger-release-if-needed]
+    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
     runs-on: ubuntu-latest
 
     steps:
@@ -359,8 +236,11 @@ jobs:
           EOF
           )
 
-          PYPI_NOTE="✅ **PyPI package confirmed available** — \`comfyui-frontend-package==${{ needs.resolve-version.outputs.target_version }}\` has been published and verified."
-          BODY=$''"${PYPI_NOTE}"$'\n\n'"${BODY}"
+          # Add release PR note if release was triggered
+          if [ "${{ needs.resolve-version.outputs.needs_release }}" = "true" ]; then
+            RELEASE_NOTE="⚠️ **Release PR must be merged first** - check [release workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)"
+            BODY=$''"${RELEASE_NOTE}"$'\n\n'"${BODY}"
+          fi
 
           # Save to file for later use
           printf '%s\n' "$BODY" > pr-body.txt
@@ -427,11 +307,7 @@ jobs:
             fi
 
             if [ -n "$EXISTING_PR" ] && [ "$EXISTING_PR" != "null" ]; then
-              echo "PR already exists (#${EXISTING_PR}), refreshing title/body"
-              gh pr edit "$EXISTING_PR" \
-                --repo Comfy-Org/ComfyUI \
-                --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
-                --body-file ../pr-body.txt
+              echo "PR already exists (#${EXISTING_PR}), updating branch will update the PR"
             else
               echo "Failed to create PR and no existing PR found"
               exit 1

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

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

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

@@ -21,12 +21,12 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version
@@ -99,6 +99,37 @@ jobs:
             ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true
 
+  publish_pypi:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+      - name: Download dist artifact
+        uses: actions/download-artifact@v7
+        with:
+          name: dist-files
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.x'
+      - name: Install build dependencies
+        run: python -m pip install build
+      - name: Setup pypi package
+        run: |
+          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
+          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
+      - name: Build pypi package
+        run: python -m build
+        working-directory: comfyui_frontend_package
+        env:
+          COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
+      - name: Publish pypi package
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        with:
+          password: ${{ secrets.PYPI_TOKEN }}
+          packages-dir: comfyui_frontend_package/dist
+
   publish_types:
     needs: build
     uses: ./.github/workflows/release-npm-types.yaml
@@ -111,6 +142,7 @@ jobs:
     name: Comment Release Summary
     needs:
       - draft_release
+      - publish_pypi
       - publish_types
     if: success()
     runs-on: ubuntu-latest

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

@@ -75,14 +75,14 @@ jobs:
           fetch-depth: 1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org
 

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

@@ -17,12 +17,12 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
       - uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: 'lts/*'
           cache: 'pnpm'
 
       - name: Get current version

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

@@ -142,14 +142,14 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: lts/*
 
       - name: Bump version
         id: bump-version

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

@@ -51,14 +51,14 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '24.x'
           cache: 'pnpm'
 
       - name: Bump desktop-ui version

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

@@ -28,14 +28,14 @@ jobs:
           ref: main
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
         with:
           version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version-file: '.nvmrc'
+          node-version: '20'
           cache: 'pnpm'
 
       - name: Install dependencies for analysis tools

.nxignore

@@ -1 +0,0 @@
-.claude/worktrees

.oxlintrc.json

@@ -97,13 +97,6 @@
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
     "typescript/no-explicit-any": "error",
-    "typescript/no-import-type-side-effects": "error",
-    "typescript/no-empty-object-type": [
-      "error",
-      {
-        "allowInterfaces": "always"
-      }
-    ],
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },

.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)
 }

CODEOWNERS

@@ -1,55 +1,61 @@
+# Global Ownership
+*                                                 @Comfy-org/comfy_frontend_devs
+
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu
-/src/stores/electronDownloadStore.ts              @benceruleanlu
-/src/extensions/core/electronAdapter.ts           @benceruleanlu
-/vite.electron.config.mts                         @benceruleanlu
+/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
+/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi
-/src/components/card/                             @viva-jinyi
-/src/components/button/                           @viva-jinyi
-/src/components/input/                            @viva-jinyi
+/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
 
 # Topbar
-/src/components/topbar/                           @pythongosssss
+/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss
+/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss
+/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu
+/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
-/src/services/nodeHelpService.ts                  @benceruleanlu
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery
+/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88
-/src/components/load3d/                           @jtydhr88
+/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
+
+# Translations
+/src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

CONTRIBUTING.md

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

@@ -1,368 +0,0 @@
-# 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/stores/maintenanceTaskStore.ts

@@ -15,7 +15,7 @@ type ValidationState = InstallValidation['basePath']
 type IndexedUpdate = InstallValidation & Record<string, ValidationState>
 
 /** State of a maintenance task, managed by the maintenance task store. */
-class MaintenanceTaskRunner {
+export class MaintenanceTaskRunner {
   constructor(readonly task: MaintenanceTask) {}
 
   private _state?: MaintenanceTaskState

browser_tests/AGENTS.md

@@ -30,14 +30,6 @@ browser_tests/
 └── tests/            - Test files (*.spec.ts)
 ```
 
-## Gotchas
-
-| Symptom                                            | Cause                                       | Fix                                                                                                     |
-| -------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `subtree intercepts pointer events` on DOM widgets | Canvas `z-999` overlay intercepts `click()` | Use Playwright's `locator.dispatchEvent('contextmenu', { bubbles: true, cancelable: true, button: 2 })` |
-| Context menu empty or wrong items                  | Node not selected                           | Select node first: `vueNodes.selectNode()` or `nodeRef.click('title')`                                  |
-| `navigateIntoSubgraph` timeout                     | Node too small in test asset JSON           | Use node size `[400, 200]` minimum                                                                      |
-
 ## After Making Changes
 
 - Run `pnpm typecheck:browser` after modifying TypeScript files in this directory

browser_tests/README.md

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

browser_tests/assets/links/duplicate_links_slot_drift.json

@@ -1,169 +0,0 @@
-{
-  "id": "f1a2b3c4-d5e6-7890-abcd-ef1234567890",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
-      "pos": [400, 300],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "b2c3d4e5-f6a7-8901-bcde-f12345678901",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 120,
-          "lastLinkId": 276,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Slot Drift Duplicate Links",
-        "inputNode": {
-          "id": -10,
-          "bounding": [0, 300, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [900, 300, 120, 60]
-        },
-        "inputs": [],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 120,
-            "type": "ComfySwitchNode",
-            "title": "Switch (CFG)",
-            "pos": [100, 100],
-            "size": [200, 80],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [{ "name": "value", "type": "FLOAT", "link": null }],
-            "outputs": [
-              {
-                "name": "FLOAT",
-                "type": "FLOAT",
-                "links": [257, 271, 276]
-              }
-            ],
-            "properties": { "Node name for S&R": "ComfySwitchNode" },
-            "widgets_values": []
-          },
-          {
-            "id": 85,
-            "type": "KSamplerAdvanced",
-            "pos": [400, 50],
-            "size": [270, 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 },
-              { "name": "steps", "type": "INT", "link": null },
-              { "name": "cfg", "type": "FLOAT", "link": 276 }
-            ],
-            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
-            "properties": { "Node name for S&R": "KSamplerAdvanced" },
-            "widgets_values": [
-              false,
-              0,
-              "randomize",
-              20,
-              8,
-              "euler",
-              "normal",
-              0,
-              10000,
-              false
-            ]
-          },
-          {
-            "id": 86,
-            "type": "KSamplerAdvanced",
-            "pos": [400, 350],
-            "size": [270, 262],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              { "name": "model", "type": "MODEL", "link": null },
-              { "name": "positive", "type": "CONDITIONING", "link": null },
-              { "name": "negative", "type": "CONDITIONING", "link": null },
-              { "name": "latent_image", "type": "LATENT", "link": null },
-              { "name": "steps", "type": "INT", "link": null },
-              { "name": "cfg", "type": "FLOAT", "link": 271 }
-            ],
-            "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
-            "properties": { "Node name for S&R": "KSamplerAdvanced" },
-            "widgets_values": [
-              false,
-              0,
-              "randomize",
-              20,
-              8,
-              "euler",
-              "normal",
-              0,
-              10000,
-              false
-            ]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 257,
-            "origin_id": 120,
-            "origin_slot": 0,
-            "target_id": 85,
-            "target_slot": 5,
-            "type": "FLOAT"
-          },
-          {
-            "id": 271,
-            "origin_id": 120,
-            "origin_slot": 0,
-            "target_id": 86,
-            "target_slot": 5,
-            "type": "FLOAT"
-          },
-          {
-            "id": 276,
-            "origin_id": 120,
-            "origin_slot": 0,
-            "target_id": 85,
-            "target_slot": 5,
-            "type": "FLOAT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": { "scale": 1, "offset": [0, 0] },
-    "frontendVersion": "1.43.2"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/subgraph-with-text-widget.json

@@ -8,7 +8,7 @@
       "id": 11,
       "type": "422723e8-4bf6-438c-823f-881ca81acead",
       "pos": [791.59912109375, 386.13336181640625],
-      "size": [400, 200],
+      "size": [140, 26],
       "flags": {},
       "order": 0,
       "mode": 0,

browser_tests/fixtures/ComfyPage.ts

@@ -25,15 +25,12 @@ import {
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
-import { QueueHelper } from './helpers/QueueHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
-import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
 import { SettingsHelper } from './helpers/SettingsHelper'
-import { AppModeHelper } from './helpers/AppModeHelper'
 import { SubgraphHelper } from './helpers/SubgraphHelper'
 import { ToastHelper } from './helpers/ToastHelper'
 import { WorkflowHelper } from './helpers/WorkflowHelper'
@@ -177,7 +174,6 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
-  public readonly appMode: AppModeHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -188,11 +184,9 @@ export class ComfyPage {
   public readonly contextMenu: ContextMenu
   public readonly toast: ToastHelper
   public readonly dragDrop: DragDropHelper
-  public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
-  public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -223,22 +217,19 @@ export class ComfyPage {
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
-    this.appMode = new AppModeHelper(this)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)
     this.settings = new SettingsHelper(page)
     this.keyboard = new KeyboardHelper(page, this.canvas)
-    this.clipboard = new ClipboardHelper(this.keyboard, page)
+    this.clipboard = new ClipboardHelper(this.keyboard)
     this.workflow = new WorkflowHelper(this)
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
-    this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
-    this.queue = new QueueHelper(page)
   }
 
   get visibleToasts() {
@@ -290,7 +281,9 @@ export class ComfyPage {
     clearStorage?: boolean
     mockReleases?: boolean
   } = {}) {
-    // Mock release endpoint to prevent changelog popups (before navigation)
+    await this.goto()
+
+    // Mock release endpoint to prevent changelog popups
     if (mockReleases) {
       await this.page.route('**/releases**', async (route) => {
         const url = route.request().url()
@@ -310,16 +303,12 @@ export class ComfyPage {
     }
 
     if (clearStorage) {
-      // Navigate to a lightweight same-origin endpoint to obtain a page
-      // context for clearing storage without loading the full frontend app.
-      await this.page.goto(`${this.url}/api/users`)
       await this.page.evaluate((id) => {
         localStorage.clear()
         sessionStorage.clear()
         localStorage.setItem('Comfy.userId', id)
       }, this.id)
     }
-
     await this.goto()
 
     await this.page.waitForFunction(() => document.fonts.ready)
@@ -442,9 +431,9 @@ export const comfyPageFixture = base.extend<{
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
         'Comfy.VersionCompatibility.DisableWarnings': true,
-        // Disable errors tab to prevent missing model detection from
-        // rendering error indicators on nodes during unrelated tests.
-        'Comfy.RightSidePanel.ShowErrorsTab': false
+        // 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/helpers/AppModeHelper.ts

@@ -1,201 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
-
-export class AppModeHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  private get builderToolbar(): Locator {
-    return this.page.getByRole('navigation', { name: 'App Builder' })
-  }
-
-  /** Enter builder mode via the "Workflow actions" dropdown → "Build app". */
-  async enterBuilder() {
-    await this.page
-      .getByRole('button', { name: 'Workflow actions' })
-      .first()
-      .click()
-    await this.page.getByRole('menuitem', { name: 'Build app' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Exit builder mode via the footer "Exit app builder" button. */
-  async exitBuilder() {
-    await this.page.getByRole('button', { name: 'Exit app builder' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Inputs" step in the builder toolbar. */
-  async goToInputs() {
-    await this.builderToolbar.getByRole('button', { name: 'Inputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Outputs" step in the builder toolbar. */
-  async goToOutputs() {
-    await this.builderToolbar.getByRole('button', { name: 'Outputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Preview" step in the builder toolbar. */
-  async goToPreview() {
-    await this.builderToolbar.getByRole('button', { name: 'Preview' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Next" button in the builder footer. */
-  async next() {
-    await this.page.getByRole('button', { name: 'Next' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the "Back" button in the builder footer. */
-  async back() {
-    await this.page.getByRole('button', { name: 'Back' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Toggle app mode (linear view) on/off. */
-  async toggleAppMode() {
-    await this.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Inject linearData into the current graph and enter app mode.
-   *
-   * Serializes the graph, injects linearData with the given inputs and
-   * auto-detected output node IDs, then reloads so the appModeStore
-   * picks up the data via its activeWorkflow watcher.
-   *
-   * @param inputs - Widget selections as [nodeId, widgetName] tuples
-   */
-  async enterAppModeWithInputs(inputs: [string, string][]) {
-    await this.page.evaluate(async (inputTuples) => {
-      const graph = window.app!.graph
-      if (!graph) return
-
-      const outputNodeIds = graph.nodes
-        .filter(
-          (n: { type?: string }) =>
-            n.type === 'SaveImage' || n.type === 'PreviewImage'
-        )
-        .map((n: { id: number | string }) => String(n.id))
-
-      const workflow = graph.serialize() as unknown as Record<string, unknown>
-      const extra = (workflow.extra ?? {}) as Record<string, unknown>
-      extra.linearData = { inputs: inputTuples, outputs: outputNodeIds }
-      workflow.extra = extra
-      await window.app!.loadGraphData(
-        workflow as unknown as Parameters<
-          NonNullable<typeof window.app>['loadGraphData']
-        >[0]
-      )
-    }, inputs)
-    await this.comfyPage.nextFrame()
-    await this.toggleAppMode()
-  }
-
-  /** The linear-mode widget list container (visible in app mode). */
-  get linearWidgets(): Locator {
-    return this.page.locator('[data-testid="linear-widgets"]')
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the app mode widget list.
-   * @param widgetName Text shown in the widget label (e.g. "seed").
-   */
-  getAppModeWidgetMenu(widgetName: string): Locator {
-    return this.linearWidgets
-      .locator(`div:has(> div > span:text-is("${widgetName}"))`)
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-      .first()
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder input-select
-   * sidebar (IoItem).
-   * @param title The widget title shown in the IoItem.
-   */
-  getBuilderInputItemMenu(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
-      .filter({ hasText: title })
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder preview/arrange
-   * sidebar (AppModeWidgetList with builderMode).
-   * @param ariaLabel The aria-label on the widget row, e.g. "seed — KSampler".
-   */
-  getBuilderPreviewWidgetMenu(ariaLabel: string): Locator {
-    return this.page
-      .locator(`[aria-label="${ariaLabel}"]`)
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /**
-   * Rename a widget by clicking its popover trigger, selecting "Rename",
-   * and filling in the dialog.
-   * @param popoverTrigger The button that opens the widget's actions popover.
-   * @param newName The new name to assign.
-   */
-  async renameWidget(popoverTrigger: Locator, newName: string) {
-    await popoverTrigger.click()
-    await this.page.getByText('Rename', { exact: true }).click()
-
-    const dialogInput = this.page.locator(
-      '.p-dialog-content input[type="text"]'
-    )
-    await dialogInput.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await dialogInput.waitFor({ state: 'hidden' })
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Rename a builder IoItem via the popover menu "Rename" action.
-   * @param title The current widget title shown in the IoItem.
-   * @param newName The new name to assign.
-   */
-  async renameBuilderInputViaMenu(title: string, newName: string) {
-    const menu = this.getBuilderInputItemMenu(title)
-    await menu.click()
-    await this.page.getByText('Rename', { exact: true }).click()
-
-    const input = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .getByRole('textbox')
-    await input.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Rename a builder IoItem by double-clicking its title to trigger
-   * inline editing.
-   * @param title The current widget title shown in the IoItem.
-   * @param newName The new name to assign.
-   */
-  async renameBuilderInput(title: string, newName: string) {
-    const titleEl = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .filter({ hasText: title })
-    await titleEl.dblclick()
-
-    const input = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .getByRole('textbox')
-    await input.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await this.comfyPage.nextFrame()
-  }
-}

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -1,16 +1,9 @@
-import { readFileSync } from 'fs'
-import { basename } from 'path'
-
-import type { Locator, Page } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
 import type { KeyboardHelper } from './KeyboardHelper'
-import { getMimeType } from './mimeTypeUtil'
 
 export class ClipboardHelper {
-  constructor(
-    private readonly keyboard: KeyboardHelper,
-    private readonly page: Page
-  ) {}
+  constructor(private readonly keyboard: KeyboardHelper) {}
 
   async copy(locator?: Locator | null): Promise<void> {
     await this.keyboard.ctrlSend('KeyC', locator ?? null)
@@ -19,44 +12,4 @@ export class ClipboardHelper {
   async paste(locator?: Locator | null): Promise<void> {
     await this.keyboard.ctrlSend('KeyV', locator ?? null)
   }
-
-  async pasteFile(filePath: string): Promise<void> {
-    const buffer = readFileSync(filePath)
-    const bufferArray = [...new Uint8Array(buffer)]
-    const fileName = basename(filePath)
-    const fileType = getMimeType(fileName)
-
-    // Register a one-time capturing-phase listener that intercepts the next
-    // paste event and injects file data onto clipboardData.
-    await this.page.evaluate(
-      ({ bufferArray, fileName, fileType }) => {
-        document.addEventListener(
-          'paste',
-          (e: ClipboardEvent) => {
-            e.preventDefault()
-            e.stopImmediatePropagation()
-
-            const file = new File([new Uint8Array(bufferArray)], fileName, {
-              type: fileType
-            })
-            const dataTransfer = new DataTransfer()
-            dataTransfer.items.add(file)
-
-            const syntheticEvent = new ClipboardEvent('paste', {
-              clipboardData: dataTransfer,
-              bubbles: true,
-              cancelable: true
-            })
-            document.dispatchEvent(syntheticEvent)
-          },
-          { capture: true, once: true }
-        )
-      },
-      { bufferArray, fileName, fileType }
-    )
-
-    // Trigger a real Ctrl+V keystroke — the capturing listener above will
-    // intercept it and re-dispatch with file data attached.
-    await this.paste()
-  }
 }

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -3,7 +3,6 @@ import { readFileSync } from 'fs'
 import type { Page } from '@playwright/test'
 
 import type { Position } from '../types'
-import { getMimeType } from './mimeTypeUtil'
 
 export class DragDropHelper {
   constructor(
@@ -49,8 +48,19 @@ export class DragDropHelper {
       const filePath = this.assetPath(fileName)
       const buffer = readFileSync(filePath)
 
+      const getFileType = (fileName: string) => {
+        if (fileName.endsWith('.png')) return 'image/png'
+        if (fileName.endsWith('.svg')) return 'image/svg+xml'
+        if (fileName.endsWith('.webp')) return 'image/webp'
+        if (fileName.endsWith('.webm')) return 'video/webm'
+        if (fileName.endsWith('.json')) return 'application/json'
+        if (fileName.endsWith('.glb')) return 'model/gltf-binary'
+        if (fileName.endsWith('.avif')) return 'image/avif'
+        return 'application/octet-stream'
+      }
+
       evaluateParams.fileName = fileName
-      evaluateParams.fileType = getMimeType(fileName)
+      evaluateParams.fileType = getFileType(fileName)
       evaluateParams.buffer = [...new Uint8Array(buffer)]
     }
 

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

@@ -1,73 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-export class FeatureFlagHelper {
-  private featuresRouteHandler: ((route: Route) => void) | null = null
-
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Seed feature flags via `addInitScript` so they are available in
-   * localStorage before the app JS executes on first load.
-   * Must be called before `comfyPage.setup()` / `page.goto()`.
-   *
-   * Note: Playwright init scripts persist for the page lifetime and
-   * cannot be removed. Call this once per test, before navigation.
-   */
-  async seedFlags(flags: Record<string, unknown>): Promise<void> {
-    await this.page.addInitScript((flagMap: Record<string, unknown>) => {
-      for (const [key, value] of Object.entries(flagMap)) {
-        localStorage.setItem(`ff:${key}`, JSON.stringify(value))
-      }
-    }, flags)
-  }
-
-  /**
-   * Set feature flags at runtime via localStorage. Uses the `ff:` prefix
-   * that devFeatureFlagOverride.ts reads in dev mode.
-   * For flags needed before page init, use `seedFlags()` instead.
-   */
-  async setFlags(flags: Record<string, unknown>): Promise<void> {
-    await this.page.evaluate((flagMap: Record<string, unknown>) => {
-      for (const [key, value] of Object.entries(flagMap)) {
-        localStorage.setItem(`ff:${key}`, JSON.stringify(value))
-      }
-    }, flags)
-  }
-
-  async setFlag(name: string, value: unknown): Promise<void> {
-    await this.setFlags({ [name]: value })
-  }
-
-  async clearFlags(): Promise<void> {
-    await this.page.evaluate(() => {
-      const keysToRemove: string[] = []
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i)
-        if (key?.startsWith('ff:')) keysToRemove.push(key)
-      }
-      keysToRemove.forEach((k) => {
-        localStorage.removeItem(k)
-      })
-    })
-  }
-
-  /**
-   * Mock server feature flags via route interception on /api/features.
-   */
-  async mockServerFeatures(features: Record<string, unknown>): Promise<void> {
-    this.featuresRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(features)
-      })
-    await this.page.route('**/api/features', this.featuresRouteHandler)
-  }
-
-  async clearMocks(): Promise<void> {
-    if (this.featuresRouteHandler) {
-      await this.page.unroute('**/api/features', this.featuresRouteHandler)
-      this.featuresRouteHandler = null
-    }
-  }
-}

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -8,10 +8,6 @@ interface PerfSnapshot {
   TaskDuration: number
   JSHeapUsedSize: number
   Timestamp: number
-  Nodes: number
-  JSHeapTotalSize: number
-  ScriptDuration: number
-  JSEventListeners: number
 }
 
 export interface PerfMeasurement {
@@ -23,12 +19,6 @@ export interface PerfMeasurement {
   layoutDurationMs: number
   taskDurationMs: number
   heapDeltaBytes: number
-  domNodes: number
-  jsHeapTotalBytes: number
-  scriptDurationMs: number
-  eventListeners: number
-  totalBlockingTimeMs: number
-  frameDurationMs: number
 }
 
 export class PerformanceHelper {
@@ -69,100 +59,16 @@ export class PerformanceHelper {
       LayoutDuration: get('LayoutDuration'),
       TaskDuration: get('TaskDuration'),
       JSHeapUsedSize: get('JSHeapUsedSize'),
-      Timestamp: get('Timestamp'),
-      Nodes: get('Nodes'),
-      JSHeapTotalSize: get('JSHeapTotalSize'),
-      ScriptDuration: get('ScriptDuration'),
-      JSEventListeners: get('JSEventListeners')
+      Timestamp: get('Timestamp')
     }
   }
 
-  /**
-   * Collect longtask entries from PerformanceObserver and compute TBT.
-   * TBT = sum of (duration - 50ms) for every task longer than 50ms.
-   */
-  private async collectTBT(): Promise<number> {
-    return this.page.evaluate(() => {
-      const state = (window as unknown as Record<string, unknown>)
-        .__perfLongtaskState as
-        | { observer: PerformanceObserver; tbtMs: number }
-        | undefined
-      if (!state) return 0
-
-      // Flush any queued-but-undelivered entries into our accumulator
-      for (const entry of state.observer.takeRecords()) {
-        if (entry.duration > 50) state.tbtMs += entry.duration - 50
-      }
-      const result = state.tbtMs
-      state.tbtMs = 0
-      return result
-    })
-  }
-
-  /**
-   * Measure average frame duration via rAF timing over a sample window.
-   * Returns average ms per frame (lower = better, 16.67 = 60fps).
-   */
-  private async measureFrameDuration(sampleFrames = 10): Promise<number> {
-    return this.page.evaluate((frames) => {
-      return new Promise<number>((resolve) => {
-        const timeout = setTimeout(() => resolve(0), 5000)
-        const timestamps: number[] = []
-        let count = 0
-        function tick(ts: number) {
-          timestamps.push(ts)
-          count++
-          if (count <= frames) {
-            requestAnimationFrame(tick)
-          } else {
-            clearTimeout(timeout)
-            if (timestamps.length < 2) {
-              resolve(0)
-              return
-            }
-            const total = timestamps[timestamps.length - 1] - timestamps[0]
-            resolve(total / (timestamps.length - 1))
-          }
-        }
-        requestAnimationFrame(tick)
-      })
-    }, sampleFrames)
-  }
-
   async startMeasuring(): Promise<void> {
     if (this.snapshot) {
       throw new Error(
         'Measurement already in progress — call stopMeasuring() first'
       )
     }
-    // Install longtask observer if not already present, then reset the
-    // accumulator so old longtasks don't bleed into the new measurement window.
-    await this.page.evaluate(() => {
-      const win = window as unknown as Record<string, unknown>
-      if (!win.__perfLongtaskState) {
-        const state: { observer: PerformanceObserver; tbtMs: number } = {
-          observer: new PerformanceObserver((list) => {
-            const self = (window as unknown as Record<string, unknown>)
-              .__perfLongtaskState as {
-              observer: PerformanceObserver
-              tbtMs: number
-            }
-            for (const entry of list.getEntries()) {
-              if (entry.duration > 50) self.tbtMs += entry.duration - 50
-            }
-          }),
-          tbtMs: 0
-        }
-        state.observer.observe({ type: 'longtask', buffered: true })
-        win.__perfLongtaskState = state
-      }
-      const state = win.__perfLongtaskState as {
-        observer: PerformanceObserver
-        tbtMs: number
-      }
-      state.tbtMs = 0
-      state.observer.takeRecords()
-    })
     this.snapshot = await this.getSnapshot()
   }
 
@@ -176,11 +82,6 @@ export class PerformanceHelper {
       return after[key] - before[key]
     }
 
-    const [totalBlockingTimeMs, frameDurationMs] = await Promise.all([
-      this.collectTBT(),
-      this.measureFrameDuration()
-    ])
-
     return {
       name,
       durationMs: delta('Timestamp') * 1000,
@@ -189,13 +90,7 @@ export class PerformanceHelper {
       layouts: delta('LayoutCount'),
       layoutDurationMs: delta('LayoutDuration') * 1000,
       taskDurationMs: delta('TaskDuration') * 1000,
-      heapDeltaBytes: delta('JSHeapUsedSize'),
-      domNodes: delta('Nodes'),
-      jsHeapTotalBytes: delta('JSHeapTotalSize'),
-      scriptDurationMs: delta('ScriptDuration') * 1000,
-      eventListeners: delta('JSEventListeners'),
-      totalBlockingTimeMs,
-      frameDurationMs
+      heapDeltaBytes: delta('JSHeapUsedSize')
     }
   }
 }

browser_tests/fixtures/helpers/QueueHelper.ts

@@ -1,79 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-export class QueueHelper {
-  private queueRouteHandler: ((route: Route) => void) | null = null
-  private historyRouteHandler: ((route: Route) => void) | null = null
-
-  constructor(private readonly page: Page) {}
-
-  /**
-   * Mock the /api/queue endpoint to return specific queue state.
-   */
-  async mockQueueState(
-    running: number = 0,
-    pending: number = 0
-  ): Promise<void> {
-    this.queueRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queue_running: Array.from({ length: running }, (_, i) => [
-            i,
-            `running-${i}`,
-            {},
-            {},
-            []
-          ]),
-          queue_pending: Array.from({ length: pending }, (_, i) => [
-            i,
-            `pending-${i}`,
-            {},
-            {},
-            []
-          ])
-        })
-      })
-    await this.page.route('**/api/queue', this.queueRouteHandler)
-  }
-
-  /**
-   * Mock the /api/history endpoint with completed/failed job entries.
-   */
-  async mockHistory(
-    jobs: Array<{ promptId: string; status: 'success' | 'error' }>
-  ): Promise<void> {
-    const history: Record<string, unknown> = {}
-    for (const job of jobs) {
-      history[job.promptId] = {
-        prompt: [0, job.promptId, {}, {}, []],
-        outputs: {},
-        status: {
-          status_str: job.status === 'success' ? 'success' : 'error',
-          completed: true
-        }
-      }
-    }
-    this.historyRouteHandler = (route: Route) =>
-      route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(history)
-      })
-    await this.page.route('**/api/history**', this.historyRouteHandler)
-  }
-
-  /**
-   * Clear all route mocks set by this helper.
-   */
-  async clearMocks(): Promise<void> {
-    if (this.queueRouteHandler) {
-      await this.page.unroute('**/api/queue', this.queueRouteHandler)
-      this.queueRouteHandler = null
-    }
-    if (this.historyRouteHandler) {
-      await this.page.unroute('**/api/history**', this.historyRouteHandler)
-      this.historyRouteHandler = null
-    }
-  }
-}

browser_tests/fixtures/helpers/mimeTypeUtil.ts

@@ -1,13 +0,0 @@
-export function getMimeType(fileName: string): string {
-  const name = fileName.toLowerCase()
-  if (name.endsWith('.png')) return 'image/png'
-  if (name.endsWith('.jpg') || name.endsWith('.jpeg')) return 'image/jpeg'
-  if (name.endsWith('.webp')) return 'image/webp'
-  if (name.endsWith('.svg')) return 'image/svg+xml'
-  if (name.endsWith('.avif')) return 'image/avif'
-  if (name.endsWith('.webm')) return 'video/webm'
-  if (name.endsWith('.mp4')) return 'video/mp4'
-  if (name.endsWith('.json')) return 'application/json'
-  if (name.endsWith('.glb')) return 'model/gltf-binary'
-  return 'application/octet-stream'
-}

browser_tests/fixtures/selectors.ts

@@ -27,15 +27,10 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    errorOverlay: 'error-overlay',
-    runtimeErrorPanel: 'runtime-error-panel',
-    missingNodeCard: 'missing-node-card',
+    missingNodes: 'missing-nodes-warning',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
-  keybindings: {
-    presetMenu: 'keybinding-preset-menu'
-  },
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
@@ -62,11 +57,6 @@ export const TestIds = {
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
-  builder: {
-    ioItem: 'builder-io-item',
-    ioItemTitle: 'builder-io-item-title',
-    widgetActionsMenu: 'widget-actions-menu'
-  },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
   },
@@ -87,14 +77,12 @@ export type TestIdValue =
   | (typeof TestIds.tree)[keyof typeof TestIds.tree]
   | (typeof TestIds.canvas)[keyof typeof TestIds.canvas]
   | (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs]
-  | (typeof TestIds.keybindings)[keyof typeof TestIds.keybindings]
   | (typeof TestIds.topbar)[keyof typeof TestIds.topbar]
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
   | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
-  | (typeof TestIds.builder)[keyof typeof TestIds.builder]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -281,14 +281,6 @@ export class NodeReference {
   getType(): Promise<string> {
     return this.getProperty('type')
   }
-  async centerOnNode(): Promise<void> {
-    await this.comfyPage.page.evaluate((id) => {
-      const node = window.app!.canvas.graph!.getNodeById(id)
-      if (!node) throw new Error(`Node ${id} not found`)
-      window.app!.canvas.centerOnNode(node)
-    }, this.id)
-    await this.comfyPage.nextFrame()
-  }
   async getPosition(): Promise<Position> {
     const pos = await this.comfyPage.canvasOps.convertOffsetToCanvas(
       await this.getProperty<[number, number]>('pos')

browser_tests/fixtures/ws.ts

@@ -29,8 +29,7 @@ export const webSocketFixture = base.extend<{
             function ([data, url]) {
               if (!url) {
                 // If no URL specified, use page URL
-                const u = new URL(window.location.href)
-                u.hash = ''
+                const u = new URL(window.location.toString())
                 u.protocol = 'ws:'
                 u.pathname = '/'
                 url = u.toString() + 'ws'

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -1,168 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-/**
- * Default workflow widget inputs as [nodeId, widgetName] tuples.
- * All widgets from the default graph are selected so the panel scrolls,
- * pushing the last widget's dropdown to the clipping boundary.
- */
-const DEFAULT_INPUTS: [string, string][] = [
-  ['4', 'ckpt_name'],
-  ['6', 'text'],
-  ['7', 'text'],
-  ['5', 'width'],
-  ['5', 'height'],
-  ['5', 'batch_size'],
-  ['3', 'seed'],
-  ['3', 'steps'],
-  ['3', 'cfg'],
-  ['3', 'sampler_name'],
-  ['3', 'scheduler'],
-  ['3', 'denoise'],
-  ['9', 'filename_prefix']
-]
-
-function isClippedByAnyAncestor(el: Element): boolean {
-  const child = el.getBoundingClientRect()
-  let parent = el.parentElement
-
-  while (parent) {
-    const overflow = getComputedStyle(parent).overflow
-    if (overflow !== 'visible') {
-      const p = parent.getBoundingClientRect()
-      if (
-        child.top < p.top ||
-        child.bottom > p.bottom ||
-        child.left < p.left ||
-        child.right > p.right
-      ) {
-        return true
-      }
-    }
-    parent = parent.parentElement
-  }
-  return false
-}
-
-/** Add a node to the graph by type and return its ID. */
-async function addNode(page: Page, nodeType: string): Promise<string> {
-  return page.evaluate((type) => {
-    const node = window.app!.graph.add(
-      window.LiteGraph!.createNode(type, undefined, {})
-    )
-    return String(node!.id)
-  }, nodeType)
-}
-
-test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('Select dropdown is not clipped in app mode panel', async ({
-    comfyPage
-  }) => {
-    const saveVideoId = await addNode(comfyPage.page, 'SaveVideo')
-    await comfyPage.nextFrame()
-
-    const inputs: [string, string][] = [
-      ...DEFAULT_INPUTS,
-      [saveVideoId, 'codec']
-    ]
-    await comfyPage.appMode.enterAppModeWithInputs(inputs)
-
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
-
-    // Scroll to bottom so the codec widget is at the clipping edge
-    const widgetList = comfyPage.appMode.linearWidgets
-    await widgetList.evaluate((el) =>
-      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
-    )
-
-    // Click the codec select (combobox role with aria-label from WidgetSelectDefault)
-    const codecSelect = widgetList.getByRole('combobox', { name: 'codec' })
-    await codecSelect.click()
-
-    const overlay = comfyPage.page.locator('.p-select-overlay').first()
-    await expect(overlay).toBeVisible({ timeout: 5000 })
-
-    const isInViewport = await overlay.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
-      )
-    })
-    expect(isInViewport).toBe(true)
-
-    const isClipped = await overlay.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
-  })
-
-  test('FormDropdown popup is not clipped in app mode panel', async ({
-    comfyPage
-  }) => {
-    const loadImageId = await addNode(comfyPage.page, 'LoadImage')
-    await comfyPage.nextFrame()
-
-    const inputs: [string, string][] = [
-      ...DEFAULT_INPUTS,
-      [loadImageId, 'image']
-    ]
-    await comfyPage.appMode.enterAppModeWithInputs(inputs)
-
-    await expect(comfyPage.appMode.linearWidgets).toBeVisible({
-      timeout: 5000
-    })
-
-    // Scroll to bottom so the image widget is at the clipping edge
-    const widgetList = comfyPage.appMode.linearWidgets
-    await widgetList.evaluate((el) =>
-      el.scrollTo({ top: el.scrollHeight, behavior: 'instant' })
-    )
-
-    // Click the FormDropdown trigger button for the image widget.
-    // The button emits 'select-click' which toggles the Popover.
-    const imageRow = widgetList.locator(
-      'div:has(> div > span:text-is("image"))'
-    )
-    const dropdownButton = imageRow.locator('button:has(> span)').first()
-    await dropdownButton.click()
-
-    // The unstyled PrimeVue Popover renders with role="dialog".
-    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
-    const popover = comfyPage.page
-      .getByRole('dialog')
-      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
-      .first()
-    await expect(popover).toBeVisible({ timeout: 5000 })
-
-    const isInViewport = await popover.evaluate((el) => {
-      const rect = el.getBoundingClientRect()
-      return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= window.innerHeight &&
-        rect.right <= window.innerWidth
-      )
-    })
-    expect(isInViewport).toBe(true)
-
-    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
-    expect(isClipped).toBe(false)
-  })
-})

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -1,187 +0,0 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { fitToViewInstant } from '../helpers/fitToView'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-/**
- * Convert the KSampler (id 3) in the default workflow to a subgraph,
- * enter builder, select the promoted seed widget as input and
- * SaveImage/PreviewImage as output.
- *
- * Returns the subgraph node reference for further interaction.
- */
-async function setupSubgraphBuilder(comfyPage: ComfyPage) {
-  const { page, appMode } = comfyPage
-  await comfyPage.workflow.loadWorkflow('default')
-
-  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  await ksampler.click('title')
-  const subgraphNode = await ksampler.convertToSubgraph()
-  await comfyPage.nextFrame()
-
-  const subgraphNodeId = String(subgraphNode.id)
-  const promotedNames = await getPromotedWidgetNames(comfyPage, subgraphNodeId)
-  expect(promotedNames).toContain('seed')
-
-  await fitToViewInstant(comfyPage)
-  await appMode.enterBuilder()
-  await appMode.goToInputs()
-
-  // Reset zoom to 1 and center on the subgraph node so click coords are accurate
-  await comfyPage.canvasOps.setScale(1)
-  await subgraphNode.centerOnNode()
-
-  // Click the promoted seed widget on the canvas to select it
-  const seedWidgetRef = await subgraphNode.getWidget(0)
-  const seedPos = await seedWidgetRef.getPosition()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-
-  await page.mouse.click(seedPos.x, seedPos.y + titleHeight)
-  await comfyPage.nextFrame()
-
-  // Select an output node
-  await appMode.goToOutputs()
-
-  const saveImageNodeId = await page.evaluate(() =>
-    String(
-      window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )?.id
-    )
-  )
-  const saveImageRef = await comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-  await saveImageRef.centerOnNode()
-
-  // Node is centered on screen, so click the canvas center
-  const canvasBox = await page.locator('#graph-canvas').boundingBox()
-  if (!canvasBox) throw new Error('Canvas not found')
-  await page.mouse.click(
-    canvasBox.x + canvasBox.width / 2,
-    canvasBox.y + canvasBox.height / 2
-  )
-  await comfyPage.nextFrame()
-
-  return subgraphNode
-}
-
-/** Save the workflow, reopen it, and enter app mode. */
-async function saveAndReopenInAppMode(
-  comfyPage: ComfyPage,
-  workflowName: string
-) {
-  await comfyPage.menu.topbar.saveWorkflow(workflowName)
-
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(workflowName).dblclick()
-  await comfyPage.nextFrame()
-
-  await comfyPage.appMode.toggleAppMode()
-}
-
-test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.AppBuilder.VueNodeSwitchDismissed',
-      true
-    )
-  })
-
-  test('Rename from builder input-select sidebar via menu', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-
-    // Go back to inputs step where IoItems are shown
-    await appMode.goToInputs()
-
-    const menu = appMode.getBuilderInputItemMenu('seed')
-    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
-
-    // Verify in app mode after save/reload
-    await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input-menu`
-    await saveAndReopenInAppMode(comfyPage, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(
-      appMode.linearWidgets.getByText('Builder Input Seed')
-    ).toBeVisible()
-  })
-
-  test('Rename from builder input-select sidebar via double-click', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-
-    await appMode.goToInputs()
-
-    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
-
-    await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input-dblclick`
-    await saveAndReopenInAppMode(comfyPage, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
-  })
-
-  test('Rename from builder preview sidebar', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-
-    await appMode.goToPreview()
-
-    const menu = appMode.getBuilderPreviewWidgetMenu('seed — New Subgraph')
-    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Preview Seed')
-
-    // Verify in app mode after save/reload
-    await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-preview`
-    await saveAndReopenInAppMode(comfyPage, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(appMode.linearWidgets.getByText('Preview Seed')).toBeVisible()
-  })
-
-  test('Rename from app mode', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-
-    // Enter app mode from builder
-    await appMode.exitBuilder()
-    await appMode.toggleAppMode()
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-
-    const menu = appMode.getAppModeWidgetMenu('seed')
-    await appMode.renameWidget(menu, 'App Mode Seed')
-
-    await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
-
-    // Verify persistence after save/reload
-    await appMode.toggleAppMode()
-    const workflowName = `${new Date().getTime()} app-mode`
-    await saveAndReopenInAppMode(comfyPage, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
-  })
-})

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -1,102 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
-  test('should open bottom panel via toggle button', async ({ comfyPage }) => {
-    const { bottomPanel } = comfyPage
-
-    await expect(bottomPanel.root).not.toBeVisible()
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-  })
-
-  test('should show Logs tab when terminal panel opens', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    await expect(logsTab).toBeVisible()
-  })
-
-  test('should close bottom panel via toggle button', async ({ comfyPage }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).not.toBeVisible()
-  })
-
-  test('should switch between shortcuts and terminal panels', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.keyboardShortcutsButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-    await expect(
-      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).toBeVisible()
-
-    await bottomPanel.toggleButton.click()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    await expect(logsTab).toBeVisible()
-    await expect(
-      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
-    ).not.toBeVisible()
-  })
-
-  test('should persist Logs tab content in bottom panel', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    await expect(logsTab).toBeVisible()
-
-    const isAlreadyActive =
-      (await logsTab.getAttribute('aria-selected')) === 'true'
-    if (!isAlreadyActive) {
-      await logsTab.click()
-    }
-
-    const xtermContainer = bottomPanel.root.locator('.xterm')
-    await expect(xtermContainer).toBeVisible()
-  })
-
-  test('should render xterm container in terminal panel', async ({
-    comfyPage
-  }) => {
-    const { bottomPanel } = comfyPage
-
-    await bottomPanel.toggleButton.click()
-    await expect(bottomPanel.root).toBeVisible()
-
-    const logsTab = comfyPage.page.getByRole('tab', { name: /Logs/i })
-    await expect(logsTab).toBeVisible()
-
-    const isAlreadyActive =
-      (await logsTab.getAttribute('aria-selected')) === 'true'
-    if (!isAlreadyActive) {
-      await logsTab.click()
-    }
-
-    const xtermScreen = bottomPanel.root.locator('.xterm, .xterm-screen')
-    await expect(xtermScreen.first()).toBeVisible()
-  })
-})

browser_tests/tests/copyPaste.spec.ts

@@ -129,74 +129,4 @@ test.describe('Copy Paste', { tag: ['@screenshot', '@workflow'] }, () => {
     const undoCount = await comfyPage.nodeOps.getGraphNodesCount()
     expect(undoCount).toBe(initialCount)
   })
-
-  test(
-    'Copy paste node, image paste onto LoadImage, image paste on empty canvas',
-    { tag: ['@node'] },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
-
-      // Step 1: Copy a KSampler node with Ctrl+C and paste with Ctrl+V
-      const ksamplerNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-      await ksamplerNodes[0].copy()
-      await comfyPage.canvas.click({ position: { x: 50, y: 500 } })
-      await comfyPage.nextFrame()
-      await comfyPage.clipboard.paste()
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(3)
-
-      // Step 2: Paste image onto selected LoadImage node
-      const loadImageNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      await loadImageNodes[0].click('title')
-      await comfyPage.nextFrame()
-
-      const uploadPromise = comfyPage.page.waitForResponse(
-        (resp) => resp.url().includes('/upload/') && resp.status() === 200,
-        { timeout: 10_000 }
-      )
-      await comfyPage.clipboard.pasteFile(
-        comfyPage.assetPath('image32x32.webp')
-      )
-      await uploadPromise
-
-      await expect
-        .poll(
-          async () => {
-            const fileWidget = await loadImageNodes[0].getWidget(0)
-            return fileWidget.getValue()
-          },
-          { timeout: 5_000 }
-        )
-        .toContain('image32x32')
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(3)
-
-      // Step 3: Click empty canvas area, paste image → creates new LoadImage
-      await comfyPage.canvas.click({ position: { x: 50, y: 500 } })
-      await comfyPage.nextFrame()
-
-      const uploadPromise2 = comfyPage.page.waitForResponse(
-        (resp) => resp.url().includes('/upload/') && resp.status() === 200,
-        { timeout: 10_000 }
-      )
-      await comfyPage.clipboard.pasteFile(
-        comfyPage.assetPath('image32x32.webp')
-      )
-      await uploadPromise2
-
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
-          timeout: 5_000
-        })
-        .toBe(4)
-      const allLoadImageNodes =
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      expect(allLoadImageNodes).toHaveLength(2)
-    }
-  )
 })

browser_tests/tests/dialog.spec.ts

@@ -1,3 +1,4 @@
+import type { Locator } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import type { Keybinding } from '../../src/platform/keybindings/types'
@@ -9,123 +10,68 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-  })
-
-  test('Should show error overlay when loading a workflow with missing nodes', async ({
+test.describe('Load workflow warning', { tag: '@ui' }, () => {
+  test('Should display a warning when loading a workflow with missing nodes', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    const missingNodesWarning = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodes
     )
-    await expect(errorOverlay).toBeVisible()
-
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
-    await expect(missingNodesTitle).toBeVisible()
+    await expect(missingNodesWarning).toBeVisible()
   })
 
-  test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
+  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    const missingNodesWarning = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodes
     )
-    await expect(errorOverlay).toBeVisible()
+    await expect(missingNodesWarning).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
-    await expect(missingNodesTitle).toBeVisible()
-
-    // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await expect(missingNodeCard).toBeVisible()
-
-    // Expand the pack group row to reveal node type names
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
-  })
-
-  test('Should show MissingNodeCard in errors tab when clicking See Errors', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    // Verify MissingNodeCard is rendered in the errors tab
-    const missingNodeCard = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodeCard
-    )
-    await expect(missingNodeCard).toBeVisible()
+    // Verify the missing node text includes subgraph context
+    const warningText = await missingNodesWarning.textContent()
+    expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    expect(warningText).toContain('in subgraph')
   })
 })
 
-test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  await comfyPage.settings.setSetting(
-    'Comfy.RightSidePanel.ShowErrorsTab',
-    true
+test('Does not report warning on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
+  const missingNodesWarning = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingNodes
   )
+
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+  await expect(missingNodesWarning).toBeVisible()
+  await comfyPage.page.keyboard.press('Escape')
+  await expect(missingNodesWarning).not.toBeVisible()
 
-  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-  await expect(errorOverlay).toBeVisible()
-
-  // Dismiss the error overlay
-  await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
-  await expect(errorOverlay).not.toBeVisible()
-
-  // Make a change to the graph by moving a node
-  await comfyPage.canvas.click()
-  await comfyPage.nextFrame()
-  await comfyPage.page.keyboard.press('Control+a')
-  await comfyPage.page.mouse.move(400, 300)
-  await comfyPage.page.mouse.down()
-  await comfyPage.page.mouse.move(450, 350, { steps: 5 })
-  await comfyPage.page.mouse.up()
+  // Wait for any async operations to complete after dialog closes
   await comfyPage.nextFrame()
 
-  // Undo and redo should not resurface the error overlay
+  // Make a change to the graph
+  await comfyPage.canvasOps.doubleClick()
+  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+
+  // Undo and redo the change
   await comfyPage.keyboard.undo()
-  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+  await expect(async () => {
+    await expect(missingNodesWarning).not.toBeVisible()
+  }).toPass({ timeout: 5000 })
 
   await comfyPage.keyboard.redo()
-  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+  await expect(async () => {
+    await expect(missingNodesWarning).not.toBeVisible()
+  }).toPass({ timeout: 5000 })
 })
 
 test.describe('Execution error', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
     await comfyPage.setup()
   })
 
@@ -137,107 +83,122 @@ test.describe('Execution error', () => {
     await comfyPage.nextFrame()
 
     // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
+    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(errorOverlay).toBeVisible()
   })
 })
 
-test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-  })
-
-  test('Should show Find on GitHub and Copy buttons in error card after execution error', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-    await comfyPage.nextFrame()
-
-    // Wait for error overlay and click "See Errors"
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
-    await expect(errorOverlay).not.toBeVisible()
-
-    // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByRole('button', {
-      name: 'Find on GitHub'
-    })
-    await expect(findOnGithubButton).toBeVisible()
-
-    // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByRole('button', { name: 'Copy' })
-    await expect(copyButton).toBeVisible()
-  })
-})
-
-test.describe('Missing models in Error Tab', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    const cleanupOk = await comfyPage.page.evaluate(async (url: string) => {
-      const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-      return response.ok
-    }, comfyPage.url)
-    expect(cleanupOk).toBeTruthy()
-  })
-
-  test('Should show error overlay with missing models when workflow has missing models', async ({
+test.describe('Missing models warning', () => {
+  test('Should be disabled by default in browser tests', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
     )
-    await expect(errorOverlay).toBeVisible()
-
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    await expect(dialogTitle).not.toBeVisible()
   })
 
-  test('Should show missing models from node properties', async ({
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.ShowMissingModelsWarning',
+      true
+    )
+    await comfyPage.page.evaluate((url: string) => {
+      return fetch(`${url}/api/devtools/cleanup_fake_model`)
+    }, comfyPage.url)
+  })
+
+  test('Should display a warning when missing models are found', async ({
     comfyPage
   }) => {
+    await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
+    )
+    await expect(dialogTitle).toBeVisible()
+
+    const downloadAllButton = comfyPage.page.getByText('Download all')
+    await expect(downloadAllButton).toBeVisible()
+  })
+
+  test('Should display a warning when missing models are found in node properties', async ({
+    comfyPage
+  }) => {
+    // Load workflow that has a node with models metadata at the node level
     await comfyPage.workflow.loadWorkflow(
       'missing/missing_models_from_node_properties'
     )
 
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
     )
-    await expect(errorOverlay).toBeVisible()
+    await expect(dialogTitle).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    const downloadAllButton = comfyPage.page.getByText('Download all')
+    await expect(downloadAllButton).toBeVisible()
   })
 
-  test('Should not show missing models when widget values have changed', async ({
+  test('Should not display a warning when no missing models are found', async ({
     comfyPage
   }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'text_encoders',
+          folders: ['ComfyUI/models/text_encoders']
+        }
+      ])
+    }
+    await comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    await comfyPage.page.route(
+      '**/api/experiment/models/text_encoders',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
+    )
+    await expect(dialogTitle).not.toBeVisible()
+  })
+
+  test('Should not display warning when model metadata exists but widget values have changed', async ({
+    comfyPage
+  }) => {
+    // This tests the scenario where outdated model metadata exists in the workflow
+    // but the actual selected models (widget values) have changed
     await comfyPage.workflow.loadWorkflow(
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    // The missing models warning should NOT appear
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
     )
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(dialogTitle).not.toBeVisible()
   })
 
   // Flaky test after parallelization
@@ -245,12 +206,14 @@ test.describe('Missing models in Error Tab', () => {
   test.skip('Should download missing model when clicking download button', async ({
     comfyPage
   }) => {
+    // The fake_model.safetensors is served by
+    // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
+    const dialogTitle = comfyPage.page.getByText(
+      'This workflow is missing models'
     )
-    await expect(errorOverlay).toBeVisible()
+    await expect(dialogTitle).toBeVisible()
 
     const downloadAllButton = comfyPage.page.getByText('Download all')
     await expect(downloadAllButton).toBeVisible()
@@ -260,6 +223,50 @@ test.describe('Missing models in Error Tab', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await checkbox.click()
+      await changeSettingPromise
+
+      await closeButton.click()
+
+      const settingValue = await comfyPage.settings.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.settings.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
 })
 
 test.describe('Settings', () => {
@@ -321,14 +328,12 @@ test.describe('Settings', () => {
     })
     await newBlankWorkflowRow.click()
 
-    // Click add keybinding button (New Blank Workflow has no default keybinding)
-    const addKeybindingButton = newBlankWorkflowRow.locator(
-      '.icon-\\[lucide--plus\\]'
-    )
-    await addKeybindingButton.click()
+    // Click edit button
+    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
+    await editKeybindingButton.click()
 
     // Set new keybinding
-    const input = comfyPage.page.getByPlaceholder('Enter your keybind')
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
@@ -340,7 +345,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('Modify keybinding')
+      .getByLabel('New Blank Workflow')
       .getByText('Save')
     await saveButton.click()
 

browser_tests/tests/errorOverlaySeeErrors.spec.ts

@@ -1,92 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-  })
-
-  async function triggerExecutionError(comfyPage: {
-    canvasOps: { disconnectEdge: () => Promise<void> }
-    page: Page
-    command: { executeCommand: (cmd: string) => Promise<void> }
-  }) {
-    await comfyPage.canvasOps.disconnectEdge()
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-  }
-
-  test('Error overlay appears on execution error', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    await expect(
-      comfyPage.page.locator('[data-testid="error-overlay"]')
-    ).toBeVisible()
-  })
-
-  test('Error overlay shows error message', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await expect(overlay).toHaveText(/\S/)
-  })
-
-  test('"See Errors" opens right side panel', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
-  })
-
-  test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /See Errors/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-
-  test('"Dismiss" closes overlay without opening panel', async ({
-    comfyPage
-  }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /Dismiss/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-    await expect(
-      comfyPage.page.getByTestId('properties-panel')
-    ).not.toBeVisible()
-  })
-
-  test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-
-    await overlay.getByRole('button', { name: /close/i }).click()
-
-    await expect(overlay).not.toBeVisible()
-  })
-})

browser_tests/tests/execution.spec.ts

@@ -9,10 +9,6 @@ test.beforeEach(async ({ comfyPage }) => {
 test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
     await comfyPage.setup()
   })
 

browser_tests/tests/focusMode.spec.ts

@@ -1,65 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Focus Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
-  test('Focus mode hides UI chrome', async ({ comfyPage }) => {
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-  })
-
-  test('Focus mode restores UI chrome', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.setFocusMode(false)
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-  })
-
-  test('Toggle focus mode command works', async ({ comfyPage }) => {
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-  })
-
-  test('Focus mode hides topbar', async ({ comfyPage }) => {
-    const topMenu = comfyPage.page.locator('.comfy-menu-button-wrapper')
-    await expect(topMenu).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-
-    await expect(topMenu).not.toBeVisible()
-  })
-
-  test('Canvas remains visible in focus mode', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-
-    await expect(comfyPage.canvas).toBeVisible()
-  })
-
-  test('Focus mode can be toggled multiple times', async ({ comfyPage }) => {
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-
-    await comfyPage.setFocusMode(false)
-    await expect(comfyPage.menu.sideToolbar).toBeVisible()
-
-    await comfyPage.setFocusMode(true)
-    await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
-  })
-})

browser_tests/tests/graph.spec.ts

@@ -23,85 +23,4 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('links/bad_link')
     await expect.poll(() => comfyPage.toast.getVisibleToastCount()).toBe(2)
   })
-
-  // Regression: duplicate links with shifted target_slot (widget-to-input
-  // conversion) caused the wrong link to survive during deduplication.
-  // Switch(CFG) node 120 connects to both KSamplerAdvanced 85 and 86 (2 links).
-  // Links 257 and 276 shared the same tuple (origin=120 → target=85 slot=5).
-  // Node 85's input.link was 276 (valid), but the bug kept 257 (stale) and
-  // removed 276, breaking the cfg connection on KSamplerAdvanced 85.
-  // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/10291
-  test('Deduplicates links without breaking connections on slot-drift workflow', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('links/duplicate_links_slot_drift')
-
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.graph!
-
-      const subgraph = graph.subgraphs.values().next().value
-      if (!subgraph) return { error: 'No subgraph found' }
-
-      // Node 120 = Switch (CFG), connects to both KSamplerAdvanced 85 and 86
-      const switchCfg = subgraph.getNodeById(120)
-      const ksampler85 = subgraph.getNodeById(85)
-      const ksampler86 = subgraph.getNodeById(86)
-      if (!switchCfg || !ksampler85 || !ksampler86)
-        return { error: 'Required nodes not found' }
-
-      // Find cfg inputs by name (slot indices shift due to widget-to-input)
-      const cfgInput85 = ksampler85.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
-      )
-      const cfgInput86 = ksampler86.inputs.find(
-        (i: { name: string }) => i.name === 'cfg'
-      )
-      const cfg85Linked = cfgInput85?.link != null
-      const cfg86Linked = cfgInput86?.link != null
-
-      // Verify the surviving links exist in the subgraph link map
-      const cfg85LinkValid =
-        cfg85Linked && subgraph.links.has(cfgInput85!.link!)
-      const cfg86LinkValid =
-        cfg86Linked && subgraph.links.has(cfgInput86!.link!)
-
-      // Switch(CFG) output should have exactly 2 links (one to each KSampler)
-      const switchOutputLinkCount = switchCfg.outputs[0]?.links?.length ?? 0
-
-      // Count links from Switch(CFG) to node 85 cfg (should be 1, not 2)
-      let cfgLinkToNode85Count = 0
-      for (const link of subgraph.links.values()) {
-        if (link.origin_id === 120 && link.target_id === 85)
-          cfgLinkToNode85Count++
-      }
-
-      return {
-        cfg85Linked,
-        cfg86Linked,
-        cfg85LinkValid,
-        cfg86LinkValid,
-        cfg85LinkId: cfgInput85?.link ?? null,
-        cfg86LinkId: cfgInput86?.link ?? null,
-        switchOutputLinkIds: [...(switchCfg.outputs[0]?.links ?? [])],
-        switchOutputLinkCount,
-        cfgLinkToNode85Count
-      }
-    })
-
-    expect(result).not.toHaveProperty('error')
-    // Both KSamplerAdvanced nodes must have their cfg input connected
-    expect(result.cfg85Linked).toBe(true)
-    expect(result.cfg86Linked).toBe(true)
-    // Links must exist in the subgraph link map
-    expect(result.cfg85LinkValid).toBe(true)
-    expect(result.cfg86LinkValid).toBe(true)
-    // Switch(CFG) output has exactly 2 links (one per KSamplerAdvanced)
-    expect(result.switchOutputLinkCount).toBe(2)
-    // Only 1 link from Switch(CFG) to node 85 (duplicate removed)
-    expect(result.cfgLinkToNode85Count).toBe(1)
-    // Output link IDs must match the input link IDs (source/target integrity)
-    expect(result.switchOutputLinkIds).toEqual(
-      expect.arrayContaining([result.cfg85LinkId, result.cfg86LinkId])
-    )
-  })
 })

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -60,15 +60,6 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
     await comfyPage.nextFrame()
   })
 
-  test('Fit view button is present and clickable', async ({ comfyPage }) => {
-    const fitViewButton = comfyPage.page
-      .locator('button')
-      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--focus\\]') })
-    await expect(fitViewButton).toBeVisible()
-    await fitViewButton.click()
-    await comfyPage.nextFrame()
-  })
-
   test('Zoom controls popup opens and closes', async ({ comfyPage }) => {
     // Find the zoom button by its percentage text content
     const zoomButton = comfyPage.page.locator('button').filter({