Merge branch 'main' into fix/dropdown-position

When neither upward nor downward direction has enough space for the
full menu height, clamp the position so the menu stays within the
viewport instead of overflowing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.agents/checks/adr-compliance.md

@@ -0,0 +1,118 @@
+---
+name: adr-compliance
+description: Checks code changes against Architecture Decision Records, with emphasis on ECS (ADR 0008) and command-pattern (ADR 0003) compliance
+severity-default: medium
+tools: [Read, Grep, glob]
+---
+
+Check that code changes are consistent with the project's Architecture Decision Records in `docs/adr/`.
+
+## Priority 1: ECS and Command-Pattern Compliance (ADR 0008 + ADR 0003)
+
+These are the primary architectural guardrails. Every entity/litegraph change must be checked against them.
+
+### Command Pattern (ADR 0003)
+
+All entity state mutations MUST be expressible as **serializable, idempotent, deterministic commands**. This is required for CRDT sync, undo/redo, cross-environment portability, and gateway backends.
+
+Flag:
+
+- **Direct spatial mutation** — `node.pos = ...`, `node.size = ...`, `group.pos = ...` outside of a store or command. All spatial data flows through `layoutStore` commands.
+- **Imperative fire-and-forget mutation** — Any new API that mutates entity state as a side effect rather than producing a serializable command object. Systems should produce command batches, not execute mutations directly.
+- **Void-returning mutation APIs** — New entity mutation functions that return `void` instead of a result type (`{ status: 'applied' | 'rejected' | 'no-op' }`). Commands need error/rejection semantics.
+- **Auto-incrementing IDs in new entity code** — New entity creation using auto-increment counters without acknowledging the CRDT collision problem. Concurrent environments need globally unique, stable identifiers.
+
+### ECS Architecture (ADR 0008)
+
+The graph domain model is migrating to ECS. New code must not make the migration harder.
+
+Flag:
+
+- **God-object growth** — New methods/properties added to `LGraphNode` (~4k lines), `LGraphCanvas` (~9k lines), `LGraph` (~3k lines), or `Subgraph`. Extract to systems, stores, or composables instead.
+- **Mixed data and behavior** — New component-like data structures that contain methods or back-references to parent entities. ECS components are plain data objects.
+- **New circular entity dependencies** — New circular imports between `LGraph` ↔ `Subgraph`, `LGraphNode` ↔ `LGraphCanvas`, or similar entity classes.
+- **Direct `graph._version++`** — Mutating the private version counter directly instead of through a public API. Extensions already depend on this side-channel; it must become a proper API.
+
+### Centralized Registries and ECS-Style Access
+
+All entity data access should move toward centralized query patterns, not instance property access.
+
+Flag:
+
+- **New instance method/property patterns** — Adding `node.someProperty` or `node.someMethod()` for data that should be a component in the World, queried via `world.getComponent(entityId, ComponentType)`.
+- **OOP inheritance for entity modeling** — Extending entity classes with new subclasses instead of composing behavior through components and systems.
+- **Scattered state** — New entity state stored in multiple locations (class properties, stores, local variables) instead of being consolidated in the World or in a single store.
+
+### Extension Ecosystem Impact
+
+Entity API changes affect 40+ custom node repos. Changes to these patterns require an extension migration path.
+
+Flag when changed without migration guidance:
+
+- `onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure` callbacks
+- `onConnectInput` / `onConnectOutput` validation hooks
+- `onWidgetChanged` handlers
+- `node.widgets.find(w => w.name === ...)` patterns
+- `node.serialize` overrides
+- `graph._version++` direct mutation
+- `getNodeById` usage patterns
+
+## Priority 2: General ADR Compliance
+
+For all other ADRs, iterate through each file in `docs/adr/` and extract the core lesson. Ensure changed code does not contradict accepted ADRs. Flag contradictions with proposed ADRs as directional guidance.
+
+### How to Apply
+
+1. Read `docs/adr/README.md` to get the full ADR index
+2. For each ADR, read the Decision and Consequences sections
+3. Check the diff against each ADR's constraints
+4. Only flag ACTUAL violations in changed code, not pre-existing patterns
+
+### Skip List
+
+These ADRs can be skipped for most reviews (they cover completed or narrow-scope decisions):
+
+- **ADR 0004** (Rejected — Fork PrimeVue) — only relevant if someone proposes forking PrimeVue again
+
+## How to Check
+
+1. Identify changed files in the entity/litegraph layer: `src/lib/litegraph/`, `src/ecs/`, `src/platform/`, entity-related stores
+2. For Priority 1 patterns, use targeted searches:
+
+   ```
+   # Direct position mutation
+   Grep: pattern="\.pos\s*=" path="src/lib/litegraph"
+   Grep: pattern="\.size\s*=" path="src/lib/litegraph"
+
+   # God object growth (new methods)
+   Grep: pattern="(class LGraphNode|class LGraphCanvas|class LGraph\b)" path="src/lib/litegraph"
+
+   # Version mutation
+   Grep: pattern="_version\+\+" path="src/lib/litegraph"
+
+   # Extension callback changes
+   Grep: pattern="on(ConnectionsChange|Removed|Added|Configure|ConnectInput|ConnectOutput|WidgetChanged)" path="src/lib/litegraph"
+   ```
+
+3. For Priority 2, read `docs/adr/` files and check for contradictions
+
+## Severity Guidelines
+
+| Issue                                                    | Severity |
+| -------------------------------------------------------- | -------- |
+| Imperative mutation API without command-pattern wrapper  | high     |
+| New god-object method on LGraphNode/LGraphCanvas/LGraph  | high     |
+| Breaking extension callback without migration path       | high     |
+| New circular entity dependency                           | high     |
+| Direct spatial mutation bypassing command pattern        | medium   |
+| Mixed data/behavior in component-like structures         | medium   |
+| New OOP inheritance pattern for entities                 | medium   |
+| Contradicts accepted ADR direction                       | medium   |
+| Contradicts proposed ADR direction without justification | low      |
+
+## Rules
+
+- Only flag ACTUAL violations in changed code, not pre-existing patterns
+- If a change explicitly acknowledges an ADR tradeoff in comments or PR description, lower severity
+- Proposed ADRs carry less weight than accepted ones — flag as directional guidance
+- Reference the specific ADR number in every finding

.claude/commands/adr-compliance-audit.md

@@ -0,0 +1,94 @@
+# ADR Compliance Audit
+
+Audit the current changes (or a specified PR) for compliance with Architecture Decision Records.
+
+## Step 1: Gather the Diff
+
+- If a PR number is provided, run: `gh pr diff $PR_NUMBER`
+- Otherwise, run: `git diff origin/main...HEAD` (or `git diff --cached` for staged changes)
+
+## Step 2: Priority 1 — ECS and Command-Pattern Compliance
+
+Read these documents for context:
+
+```
+docs/adr/0003-crdt-based-layout-system.md
+docs/adr/0008-entity-component-system.md
+docs/architecture/ecs-target-architecture.md
+docs/architecture/ecs-migration-plan.md
+docs/architecture/appendix-critical-analysis.md
+```
+
+### Check A: Command Pattern (ADR 0003)
+
+Every entity state mutation must be a **serializable, idempotent, deterministic command** — replayable, undoable, transmittable over CRDT.
+
+Flag:
+
+1. **Direct spatial mutation** — `node.pos = ...`, `node.size = ...`, `group.pos = ...` outside a store/command
+2. **Imperative fire-and-forget APIs** — Functions that mutate entity state as side effects rather than producing serializable command objects. Systems should produce command batches, not execute mutations directly.
+3. **Void-returning mutation APIs** — Entity mutations returning `void` instead of `{ status: 'applied' | 'rejected' | 'no-op' }`
+4. **Auto-increment IDs** — New entity creation via counters without addressing CRDT collision. Concurrent environments need globally unique identifiers.
+5. **Missing transaction semantics** — Multi-entity operations without atomic grouping (e.g., node removal = 10+ deletes with no rollback on failure)
+
+### Check B: ECS Architecture (ADR 0008)
+
+Flag:
+
+1. **God-object growth** — New methods/properties on `LGraphNode`, `LGraphCanvas`, `LGraph`, `Subgraph`
+2. **Mixed data/behavior** — Component-like structures with methods or back-references
+3. **OOP instance patterns** — New `node.someProperty` or `node.someMethod()` for data that should be a World component
+4. **OOP inheritance** — New entity subclasses instead of component composition
+5. **Circular entity deps** — New `LGraph` ↔ `Subgraph`, `LGraphNode` ↔ `LGraphCanvas` circular imports
+6. **Direct `_version++`** — Mutating private version counter instead of through public API
+
+### Check C: Extension Ecosystem Impact
+
+If any of these patterns are changed, flag and require migration guidance:
+
+- `onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure` callbacks
+- `onConnectInput` / `onConnectOutput` validation hooks
+- `onWidgetChanged` handlers
+- `node.widgets.find(w => w.name === ...)` access patterns
+- `node.serialize` overrides
+- `graph._version++` direct mutation
+
+Reference: 40+ custom node repos depend on these (rgthree-comfy, ComfyUI-Impact-Pack, cg-use-everywhere, etc.)
+
+## Step 3: Priority 2 — General ADR Compliance
+
+1. Read `docs/adr/README.md` for the full ADR index
+2. For each ADR (except skip list), read the Decision section
+3. Check the diff for contradictions
+4. Only flag ACTUAL violations in changed code
+
+**Skip list**: ADR 0004 (Rejected — Fork PrimeVue)
+
+## Step 4: Generate Report
+
+```
+## ADR Compliance Audit Report
+
+### Summary
+- Files audited: N
+- Priority 1 findings: N (command-pattern: N, ECS: N, ecosystem: N)
+- Priority 2 findings: N
+
+### Priority 1: Command Pattern & ECS
+(List each with ADR reference, file, line, description)
+
+### Priority 1: Extension Ecosystem Impact
+(List each changed callback/API with affected custom node repos)
+
+### Priority 2: General ADR Compliance
+(List each with ADR reference, file, line, description)
+
+### Compliant Patterns
+(Note changes that positively align with ADR direction)
+```
+
+## Severity
+
+- **Must fix**: Contradicts accepted ADR, or introduces imperative mutation API without command-pattern wrapper, or breaks extension callback without migration path
+- **Should discuss**: Contradicts proposed ADR direction — either align or propose ADR amendment
+- **Note**: Surfaces open architectural question not yet addressed by ADRs

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

@@ -18,12 +18,20 @@ Cherry-pick backport management for Comfy-Org/ComfyUI_frontend stable release br
 
 ## 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/`                        |
+| Item           | Value                                                                       |
+| -------------- | --------------------------------------------------------------------------- |
+| Repo           | `~/ComfyUI_frontend` (Comfy-Org/ComfyUI_frontend)                           |
+| Merge strategy | Auto-merge via workflow (`--auto --squash`); `--admin` only after CI passes |
+| Automation     | `pr-backport.yaml` GitHub Action (label-driven, auto-merge enabled)         |
+| Tracking dir   | `~/temp/backport-session/`                                                  |
+
+## CI Safety Rules
+
+**NEVER merge a backport PR without all CI checks passing.** This applies to both automation-created and manual cherry-pick PRs.
+
+- **Automation PRs:** The `pr-backport.yaml` workflow now enables `gh pr merge --auto --squash`, so clean PRs auto-merge once CI passes. Monitor with polling (`gh pr list --base TARGET_BRANCH --state open`). Do not intervene unless CI fails.
+- **Manual cherry-pick PRs:** After `gh pr create`, wait for CI before merging. Poll with `gh pr checks $PR --watch` or use a sleep+check loop. Only merge after all checks pass.
+- **CI failures:** DO NOT use `--admin` to bypass failing CI. Analyze the failure, present it to the user with possible causes (test backported without implementation, missing dependency, flaky test), and let the user decide the next step.
 
 ## Branch Scope Rules
 
@@ -108,11 +116,15 @@ 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
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck && pnpm test:unit
 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.
+If typecheck or tests fail, stop and investigate before continuing. A broken branch after wave N means all subsequent waves will compound the problem.
+
+### Never Admin-Merge Without CI
+
+In a previous bulk session, all 69 backport PRs were merged with `gh pr merge --squash --admin`, bypassing required CI checks. This shipped 3 test failures to a release branch. **Lesson: `--admin` skips all branch protection, including required status checks.** Only use `--admin` after confirming CI has passed (e.g., `gh pr checks $PR` shows all green), or rely on auto-merge (`--auto --squash`) which waits for CI by design.
 
 ## Continuous Backporting Recommendation
 

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

@@ -19,23 +19,44 @@ done
 # Wait 3 minutes for automation
 sleep 180
 
-# Check which got auto-PRs
+# Check which got auto-PRs (auto-merge is enabled, so clean ones will self-merge after CI)
 gh pr list --base TARGET_BRANCH --state open --limit 50 --json number,title
 ```
 
-## Step 2: Review & Merge Clean Auto-PRs
+> **Note:** The `pr-backport.yaml` workflow now enables `gh pr merge --auto --squash` on automation-created PRs. Clean PRs will auto-merge once CI passes — no manual merge needed for those.
+
+## Step 2: Wait for CI & Merge Clean Auto-PRs
+
+Most automation PRs will auto-merge once CI passes (via `--auto --squash` in the workflow). Monitor and handle failures:
 
 ```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
+# Wait for CI to complete (~45 minutes for full suite)
+sleep 2700
+
+# Check which PRs are still open (CI may have failed, or auto-merge succeeded)
+STILL_OPEN_PRS=$(gh pr list --base TARGET_BRANCH --state open --limit 50 --json number --jq '.[].number')
+RECENTLY_MERGED=$(gh pr list --base TARGET_BRANCH --state merged --limit 50 --json number,title,mergedAt)
+
+# For PRs still open, check CI status
+for pr in $STILL_OPEN_PRS; do
+  CI_FAILED=$(gh pr checks $pr --json name,state --jq '[.[] | select(.state == "FAILURE")] | length')
+  CI_PENDING=$(gh pr checks $pr --json name,state --jq '[.[] | select(.state == "PENDING" or .state == "QUEUED")] | length')
+  if [ "$CI_FAILED" != "0" ]; then
+    # CI failed — collect details for triage
+    echo "PR #$pr — CI FAILED:"
+    gh pr checks $pr --json name,state,link --jq '.[] | select(.state == "FAILURE") | "\(.name): \(.state)"'
+  elif [ "$CI_PENDING" != "0" ]; then
+    echo "PR #$pr — CI still running ($CI_PENDING checks pending)"
+  else
+    # All checks passed but didn't auto-merge (race condition or label issue)
+    gh pr merge $pr --squash --admin
+    sleep 3
+  fi
 done
 ```
 
+**⚠️ If CI fails: DO NOT admin-merge to bypass.** See "CI Failure Triage" below.
+
 ## Step 3: Manual Worktree for Conflicts
 
 ```bash
@@ -63,6 +84,13 @@ for PR in ${CONFLICT_PRS[@]}; do
   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+$')
+
+  # Wait for CI before merging — NEVER admin-merge without CI passing
+  echo "Waiting for CI on PR #$NEW_PR..."
+  gh pr checks $NEW_PR --watch --fail-fast || {
+    echo "⚠️ CI failed on PR #$NEW_PR — skipping merge, needs triage"
+    continue
+  }
   gh pr merge $NEW_PR --squash --admin
   sleep 3
 done
@@ -82,7 +110,7 @@ After completing all PRs in a wave for a target branch:
 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
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck && pnpm test:unit
 git worktree remove /tmp/verify-TARGET --force
 ```
 
@@ -132,7 +160,8 @@ 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
+# Wait for CI after rebase before merging
+gh pr checks $PR --watch --fail-fast && gh pr merge $PR --squash --admin
 ```
 
 ## Lessons Learned
@@ -146,5 +175,31 @@ gh pr merge $PR --squash --admin
 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.
+10. **Verify after each wave** — run `pnpm typecheck && pnpm test:unit` 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.
+12. **Never admin-merge without CI** — `--admin` bypasses all branch protections including required status checks. A bulk session of 69 admin-merges shipped 3 test failures. Always wait for CI to pass first, or use `--auto --squash` which waits by design.
+
+## CI Failure Triage
+
+When CI fails on a backport PR, present failures to the user using this template:
+
+```markdown
+### PR #XXXX — CI Failed
+
+- **Failing check:** test / lint / typecheck
+- **Error:** (summary of the failure message)
+- **Likely cause:** test backported without implementation / missing dependency / flaky test / snapshot mismatch
+- **Recommendation:** backport PR #YYYY first / skip this PR / rerun CI after fixing prerequisites
+```
+
+Common failure categories:
+
+| Category                    | Example                                  | Resolution                                |
+| --------------------------- | ---------------------------------------- | ----------------------------------------- |
+| Test without implementation | Test references function not on branch   | Backport the implementation PR first      |
+| Missing dependency          | Import from module not on branch         | Backport the dependency PR first, or skip |
+| Snapshot mismatch           | Screenshot test differs                  | Usually safe — update snapshots on branch |
+| Flaky test                  | Passes on retry                          | Re-run CI, merge if green on retry        |
+| Type error                  | Interface changed on main but not branch | May need manual adaptation                |
+
+**Never assume a failure is safe to skip.** Present all failures to the user with analysis.

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

@@ -5,9 +5,9 @@
 Maintain `execution-log.md` with per-branch tables:
 
 ```markdown
-| PR#   | Title | Status                            | Backport PR | Notes   |
-| ----- | ----- | --------------------------------- | ----------- | ------- |
-| #XXXX | Title | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
+| PR#   | Title | CI Status                      | Status                            | Backport PR | Notes   |
+| ----- | ----- | ------------------------------ | --------------------------------- | ----------- | ------- |
+| #XXXX | Title | ✅ Pass / ❌ Fail / ⏳ Pending | ✅ Merged / ⏭️ Skip / ⏸️ Deferred | #YYYY       | Details |
 ```
 
 ## Wave Verification Log
@@ -19,6 +19,7 @@ Track verification results per wave:
 
 - PRs merged: #A, #B, #C
 - Typecheck: ✅ Pass / ❌ Fail
+- Unit tests: ✅ Pass / ❌ Fail
 - Issues found: (if any)
 - Human review needed: (list any non-trivial conflict resolutions)
 ```
@@ -41,6 +42,11 @@ Track verification results per wave:
 
 | PR# | Branch | Conflict Type | Resolution Summary |
 
+## CI Failure Report
+
+| PR# | Branch | Failing Check | Error Summary | Cause | Resolution |
+| --- | ------ | ------------- | ------------- | ----- | ---------- |
+
 ## Automation Performance
 
 | Metric                      | Value |

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

@@ -0,0 +1,99 @@
+---
+name: contain-audit
+description: 'Detect DOM elements where CSS contain:layout+style would improve rendering performance. Runs a Playwright-based audit on a large workflow, scores candidates by subtree size and sizing constraints, measures performance impact, and generates a ranked report.'
+---
+
+# CSS Containment Audit
+
+Automatically finds DOM elements where adding `contain: layout style` would reduce browser recalculation overhead.
+
+## What It Does
+
+1. Loads a large workflow (245 nodes) in a real browser
+2. Walks the DOM tree and scores every element as a containment candidate
+3. For each high-scoring candidate, applies `contain: layout style` via JavaScript
+4. Measures rendering performance (style recalcs, layouts, task duration) before and after
+5. Takes before/after screenshots to detect visual breakage
+6. Generates a ranked report with actionable recommendations
+
+## When to Use
+
+- After adding new Vue components to the node rendering pipeline
+- When investigating rendering performance on large workflows
+- Before and after refactoring node DOM structure
+- As part of periodic performance audits
+
+## How to Run
+
+```bash
+# Start the dev server first
+pnpm dev &
+
+# Run the audit (uses the @audit tag, not included in normal CI runs)
+pnpm exec playwright test browser_tests/tests/containAudit.spec.ts --project=audit
+
+# View the HTML report
+pnpm exec playwright show-report
+```
+
+## How to Read Results
+
+The audit outputs a table to the console:
+
+```text
+CSS Containment Audit Results
+=======================================================
+Rank | Selector                        | Subtree | Score | DRecalcs | DLayouts | Visual
+  1  | [data-testid="node-inner-wrap"] |     18  |  72   |    -34%  |    -12%  |   OK
+  2  | .node-body                      |     12  |  48   |     -8%  |     -3%  |   OK
+  3  | .node-header                    |      4  |  16   |     +1%  |      0%  |   OK
+```
+
+- **Subtree**: Number of descendant elements (higher = more to skip)
+- **Score**: Composite heuristic score (subtree size x sizing constraint bonus)
+- **DRecalcs / DLayouts**: Change in style recalcs / layout counts vs baseline (negative = improvement)
+- **Visual**: OK if no pixel change, DIFF if screenshot differs (may include subpixel noise — verify manually)
+
+## Candidate Scoring
+
+An element is a good containment candidate when:
+
+1. **Large subtree** -- many descendants that the browser can skip recalculating
+2. **Externally constrained size** -- width/height determined by CSS variables, flex, or explicit values (not by content)
+3. **No existing containment** -- `contain` is not already applied
+4. **Not a leaf** -- has at least a few child elements
+
+Elements that should NOT get containment:
+
+- Elements whose children overflow visually beyond bounds (e.g., absolute-positioned overlays with negative inset)
+- Elements whose height is determined by content and affects sibling layout
+- Very small subtrees (overhead of containment context outweighs benefit)
+
+## Limitations
+
+- Cannot fully guarantee `contain` safety -- visual review of screenshots is required
+- Performance measurements have natural variance; run multiple times for confidence
+- Only tests idle and pan scenarios; widget interactions may differ
+- The audit modifies styles at runtime via JS, which doesn't account for Tailwind purging or build-time optimizations
+
+## Example PR
+
+[#9946 — fix: add CSS contain:layout contain:style to node inner wrapper](https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946)
+
+This PR added `contain-layout contain-style` to the node inner wrapper div in `LGraphNode.vue`. The audit tool would have flagged this element as a high-scoring candidate because:
+
+- **Large subtree** (18+ descendants: header, slots, widgets, content, badges)
+- **Externally constrained size** (`w-(--node-width)`, `flex-1` — dimensions set by CSS variables and flex parent)
+- **Natural isolation boundary** between frequently-changing content (widgets) and infrequently-changing overlays (selection outlines, borders)
+
+The actual change was a single line: adding `'contain-layout contain-style'` to the inner wrapper's class list at `src/renderer/extensions/vueNodes/components/LGraphNode.vue:79`.
+
+## Reference
+
+| Resource          | Path                                                    |
+| ----------------- | ------------------------------------------------------- |
+| Audit test        | `browser_tests/tests/containAudit.spec.ts`              |
+| PerformanceHelper | `browser_tests/fixtures/helpers/PerformanceHelper.ts`   |
+| Perf tests        | `browser_tests/tests/performance.spec.ts`               |
+| Large workflow    | `browser_tests/assets/large-graph-workflow.json`        |
+| Example PR        | https://github.com/Comfy-Org/ComfyUI_frontend/pull/9946 |

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

@@ -0,0 +1,82 @@
+---
+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/writing-playwright-tests/SKILL.md

@@ -44,15 +44,18 @@ 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                                               |
+| 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                                  |
 
 ## Test Tags
 

.coderabbit.yaml

@@ -28,3 +28,21 @@ reviews:
           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.
+      - name: ADR compliance for entity/litegraph changes
+        mode: warning
+        instructions: |
+          Use only PR metadata already available in the review context: the changed-file list relative to the PR base, the PR description, and the diff content. Do not rely on shell commands.
+
+          This check applies ONLY when the PR modifies files under `src/lib/litegraph/`, `src/ecs/`, or files related to graph entities (nodes, links, widgets, slots, reroutes, groups, subgraphs).
+
+          If none of those paths appear in the changed files, pass immediately.
+
+          When applicable, check for:
+          1. **Command pattern (ADR 0003)**: Entity state mutations must be serializable, idempotent, deterministic commands — not imperative fire-and-forget side effects. Flag direct spatial mutation (`node.pos =`, `node.size =`, `group.pos =`) outside of a store or command, and any new void-returning mutation API that should produce a command object.
+          2. **God-object growth (ADR 0008)**: New methods/properties added to `LGraphNode`, `LGraphCanvas`, `LGraph`, or `Subgraph` that add responsibilities rather than extracting/migrating existing ones.
+          3. **ECS data/behavior separation (ADR 0008)**: Component-like data structures that contain methods or back-references to parent entities. ECS components must be plain data. New OOP instance patterns (`node.someProperty`, `node.someMethod()`) for data that should be a World component.
+          4. **Extension ecosystem (ADR 0008)**: Changes to extension-facing callbacks (`onConnectionsChange`, `onRemoved`, `onAdded`, `onConfigure`, `onConnectInput/Output`, `onWidgetChanged`), `node.widgets` access, `node.serialize` overrides, or `graph._version++` without migration guidance. These affect 40+ custom node repos.
+
+          Pass if none of these patterns are found in the diff.
+
+          When warning, reference the specific ADR by number and link to `docs/adr/` for context. Frame findings as directional guidance since ADR 0003 and 0008 are in Proposed status.

.env_example

@@ -45,3 +45,4 @@ 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

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

@@ -12,7 +12,7 @@ runs:
 
     # Install pnpm, Node.js, build frontend
     - name: Install pnpm
-      uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+      uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
       with:
         version: 10
 

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

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -21,7 +21,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 
@@ -75,7 +75,7 @@ jobs:
       - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -64,6 +64,7 @@ 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'

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

@@ -8,6 +8,10 @@ on:
     branches:
       - main
 
+concurrency:
+  group: size-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 
@@ -28,11 +32,12 @@ jobs:
       - name: Collect size data
         run: node scripts/size-collect.js
 
-      - name: Save PR number & base branch
+      - name: Save PR metadata
         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

@@ -39,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -87,7 +87,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -144,7 +144,7 @@ jobs:
     if: ${{ !cancelled() }}
     steps:
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

.github/workflows/pr-backport.yaml

@@ -348,6 +348,8 @@ 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,7 +29,7 @@ jobs:
           ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -1,148 +0,0 @@
-name: 'PR: Performance Report'
-
-on:
-  workflow_run:
-    workflows: ['CI: Performance Report']
-    types:
-      - completed
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-  actions: read
-
-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-file: '.nvmrc'
-
-      - 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: Check if results are still current
-        id: sha-check
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const prNumber = Number('${{ steps.pr-meta.outputs.number }}');
-            const { data: pr } = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-            const runSha = context.payload.workflow_run.head_sha;
-            const currentSha = pr.head.sha;
-            if (runSha !== currentSha) {
-              core.info(`Skipping stale report: run SHA ${runSha} != current PR SHA ${currentSha}`);
-              core.setOutput('stale', 'true');
-            } else {
-              core.setOutput('stale', 'false');
-            }
-
-      - name: Download PR perf metrics
-        if: steps.sha-check.outputs.stale != 'true'
-        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
-        if: steps.sha-check.outputs.stale != 'true'
-        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: Load historical baselines from perf-data branch
-        if: steps.sha-check.outputs.stale != 'true'
-        continue-on-error: true
-        run: |
-          mkdir -p temp/perf-history
-
-          git fetch origin perf-data 2>/dev/null || {
-            echo "perf-data branch not found, skipping historical data"
-            exit 0
-          }
-
-          INDEX=0
-          for file in $(git ls-tree --name-only origin/perf-data baselines/ 2>/dev/null | sort -r | head -5); do
-            DIR="temp/perf-history/$INDEX"
-            mkdir -p "$DIR"
-            git show "origin/perf-data:${file}" > "$DIR/perf-metrics.json" 2>/dev/null || true
-            INDEX=$((INDEX + 1))
-          done
-
-          echo "Loaded $INDEX historical baselines"
-
-      - name: Generate perf report
-        if: steps.sha-check.outputs.stale != 'true'
-        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
-
-      - name: Post PR comment
-        if: steps.sha-check.outputs.stale != 'true'
-        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

@@ -0,0 +1,233 @@
+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 -15); 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

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

@@ -1,133 +0,0 @@
-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/pr-update-playwright-expectations.yaml

@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.13
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

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

@@ -84,7 +84,7 @@ jobs:
           persist-credentials: false
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -75,7 +75,7 @@ jobs:
           path: comfyui
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 
@@ -162,9 +162,132 @@ 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]
-    if: always() && needs.resolve-version.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,
+        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')
     runs-on: ubuntu-latest
 
     steps:
@@ -236,11 +359,8 @@ jobs:
           EOF
           )
 
-          # 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
+          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}"
 
           # Save to file for later use
           printf '%s\n' "$BODY" > pr-body.txt
@@ -307,7 +427,11 @@ jobs:
             fi
 
             if [ -n "$EXISTING_PR" ] && [ "$EXISTING_PR" != "null" ]; then
-              echo "PR already exists (#${EXISTING_PR}), updating branch will update the PR"
+              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
             else
               echo "Failed to create PR and no existing PR found"
               exit 1

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

@@ -21,7 +21,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
       - uses: actions/setup-node@v6
@@ -99,37 +99,6 @@ 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
@@ -142,7 +111,6 @@ 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,7 +75,7 @@ jobs:
           fetch-depth: 1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -17,7 +17,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v6
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
       - uses: actions/setup-node@v6

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

@@ -30,6 +30,7 @@ concurrency:
 
 jobs:
   bump-version:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -142,7 +143,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -51,7 +51,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

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

@@ -18,6 +18,7 @@ concurrency:
 
 jobs:
   docs-check:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     timeout-minutes: 45
     steps:
@@ -28,7 +29,7 @@ jobs:
           ref: main
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
         with:
           version: 10
 

.oxlintrc.json

@@ -97,6 +97,13 @@
     "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"
   },

AGENTS.md

@@ -208,7 +208,7 @@ See @docs/testing/\*.md for detailed patterns.
 3. Keep your module mocks contained  
    Do not use global mutable state within the test file  
    Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
+4. For Component testing, prefer [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) with `@testing-library/user-event` for user-centric, behavioral tests. [Vue Test Utils](https://test-utils.vuejs.org/) is also accepted, especially for tests that need direct access to the component wrapper (e.g., `findComponent`, `emitted()`). Follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
 5. Aim for behavioral coverage of critical and new features
 
 ### Playwright / Browser / E2E Tests
@@ -231,6 +231,18 @@ See @docs/testing/\*.md for detailed patterns.
 - Nx: <https://nx.dev/docs/reference/nx-commands>
 - [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
+## Architecture Decision Records
+
+All architectural decisions are documented in `docs/adr/`. Code changes must be consistent with accepted ADRs. Proposed ADRs indicate design direction and should be treated as guidance. See `.agents/checks/adr-compliance.md` for automated validation rules.
+
+### Entity Architecture Constraints (ADR 0003 + ADR 0008)
+
+1. **Command pattern for all mutations**: Every entity state change must be a serializable, idempotent, deterministic command — replayable, undoable, and transmittable over CRDT. No imperative fire-and-forget mutation APIs. Systems produce command batches, not direct side effects.
+2. **Centralized registries and ECS-style access**: Entity data lives in the World (centralized registry), queried via `world.getComponent(entityId, ComponentType)`. Do not add new instance properties/methods to entity classes. Do not use OOP inheritance for entity modeling.
+3. **No god-object growth**: Do not add methods to `LGraphNode`, `LGraphCanvas`, `LGraph`, or `Subgraph`. Extract to systems, stores, or composables.
+4. **Plain data components**: ECS components are plain data objects — no methods, no back-references to parent entities. Behavior belongs in systems (pure functions).
+5. **Extension ecosystem impact**: Changes to entity callbacks (`onConnectionsChange`, `onRemoved`, `onAdded`, `onConnectInput/Output`, `onConfigure`, `onWidgetChanged`), `node.widgets` access, `node.serialize`, or `graph._version++` affect 40+ custom node repos and require migration guidance.
+
 ## Project Philosophy
 
 - Follow good software engineering principles

CODEOWNERS

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

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. */
-export class MaintenanceTaskRunner {
+class MaintenanceTaskRunner {
   constructor(readonly task: MaintenanceTask) {}
 
   private _state?: MaintenanceTaskState

apps/desktop-ui/vite.config.mts

@@ -1,6 +1,6 @@
 import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
@@ -11,7 +11,7 @@ import { defineConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-dotenv.config()
+dotenvConfig()
 
 const projectRoot = fileURLToPath(new URL('.', import.meta.url))
 

apps/website/.gitignore

@@ -0,0 +1,2 @@
+dist/
+.astro/

apps/website/astro.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  site: 'https://comfy.org',
+  output: 'static',
+  integrations: [vue()],
+  vite: {
+    plugins: [tailwindcss()]
+  },
+  build: {
+    assetsPrefix: process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}`
+      : undefined
+  },
+  i18n: {
+    locales: ['en', 'zh-CN'],
+    defaultLocale: 'en',
+    routing: {
+      prefixDefaultLocale: false
+    }
+  }
+})

apps/website/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@comfyorg/website",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@comfyorg/design-system": "workspace:*",
+    "@vercel/analytics": "catalog:",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@astrojs/vue": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "astro": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "nx": {
+    "tags": [
+      "scope:website",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro build"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro preview"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro check"
+        }
+      }
+    }
+  }
+}

apps/website/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

apps/website/src/styles/global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@comfyorg/design-system/css/base.css';

apps/website/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "astro.config.mjs"]
+}

browser_tests/AGENTS.md

@@ -30,6 +30,14 @@ 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

@@ -75,7 +75,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**
 
 ```bash
-pnpm exec playwright test --ui
+pnpm test:browser:local --ui
 ```
 
 UI mode features:
@@ -91,29 +91,8 @@ UI mode features:
 For CI or headless testing:
 
 ```bash
-pnpm exec playwright test                    # Run all tests
-pnpm exec playwright test widget.spec.ts     # Run specific test file
-```
-
-### Local Development Config
-
-For debugging, you can try adjusting these settings in `playwright.config.ts`:
-
-```typescript
-export default defineConfig({
-  // VERY HELPFUL: Skip screenshot tests locally
-  grep: process.env.CI ? undefined : /^(?!.*screenshot).*$/
-
-  retries: 0, // No retries while debugging. Increase if writing new tests. that may be flaky.
-  workers: 1, // Single worker for easier debugging. Increase to match CPU cores if you want to run a lot of tests in parallel.
-  timeout: 30000, // Longer timeout for breakpoints
-
-  use: {
-    trace: 'on', // Always capture traces (CI uses 'on-first-retry')
-    video: 'on' // Always record video (CI uses 'retain-on-failure')
-  },
-
-})
+pnpm test:browser:local                    # Run all tests
+pnpm test:browser:local widget.spec.ts     # Run specific test file
 ```
 
 ## Test Structure
@@ -385,7 +364,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:
 
 ```bash
-pnpm exec playwright test --update-snapshots
+pnpm test:browser:local --update-snapshots
 ```
 
 ### Creating New Screenshot Baselines

browser_tests/assets/links/duplicate_links_slot_drift.json

@@ -0,0 +1,169 @@
+{
+  "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/nested-duplicate-widget-names.json

@@ -0,0 +1,172 @@
+{
+  "id": "9efdcc44-6372-4b4a-b6f9-789c67f052e1",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "f5d6b5f0-64e3-4d3e-bb28-d25d8a6c182f",
+      "pos": [689.0083557128902, 467.9999999999997],
+      "size": [431.8999938964844, 206.60000610351562],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [["3", "text", "2"]]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "9a3f232c-da11-4725-8927-b11e46d0cee4",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Inner Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [330, 367, 120, 40]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [983, 367, 120, 40]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CLIPTextEncode",
+            "pos": [510, 166],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": ["11111111111"]
+          },
+          {
+            "id": 2,
+            "type": "CLIPTextEncode",
+            "pos": [523, 438],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": ["22222222222"]
+          }
+        ],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      },
+      {
+        "id": "f5d6b5f0-64e3-4d3e-bb28-d25d8a6c182f",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Outer Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [467, 446, 120, 40]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [932, 446, 120, 40]
+        },
+        "inputs": [],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 3,
+            "type": "9a3f232c-da11-4725-8927-b11e46d0cee4",
+            "pos": [647, 389],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [],
+            "properties": {
+              "proxyWidgets": [
+                ["1", "text"],
+                ["2", "text"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 2.0975,
+      "offset": [-581.4780189305006, -356.3000030517576]
+    },
+    "frontendVersion": "1.43.2"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/nested-pack-promoted-values.json

@@ -0,0 +1,817 @@
+{
+  "id": "9ae6082b-c7f4-433c-9971-7a8f65a3ea65",
+  "revision": 0,
+  "last_node_id": 61,
+  "last_link_id": 70,
+  "nodes": [
+    {
+      "id": 35,
+      "type": "MarkdownNote",
+      "pos": [-424.0076397768001, 199.99406275798367],
+      "size": [510, 774],
+      "flags": {
+        "collapsed": false
+      },
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "title": "Model link",
+      "properties": {},
+      "widgets_values": [
+        "## Report workflow issue\n\nIf you found any issues when running this workflow, [report template issue here](https://github.com/Comfy-Org/workflow_templates/issues)\n\n\n## Model links\n\n**text_encoders**\n\n- [qwen_3_4b.safetensors](https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/text_encoders/qwen_3_4b.safetensors)\n\n**loras**\n\n- [pixel_art_style_z_image_turbo.safetensors](https://huggingface.co/tarn59/pixel_art_style_lora_z_image_turbo/resolve/main/pixel_art_style_z_image_turbo.safetensors)\n\n**diffusion_models**\n\n- [z_image_turbo_bf16.safetensors](https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/diffusion_models/z_image_turbo_bf16.safetensors)\n\n**vae**\n\n- [ae.safetensors](https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors)\n\n\nModel Storage Location\n\n```\n📂 ComfyUI/\n├── 📂 models/\n│   ├── 📂 text_encoders/\n│   │      └── qwen_3_4b.safetensors\n│   ├── 📂 loras/\n│   │      └── pixel_art_style_z_image_turbo.safetensors\n│   ├── 📂 diffusion_models/\n│   │      └── z_image_turbo_bf16.safetensors\n│   └── 📂 vae/\n│          └── ae.safetensors\n```\n"
+      ],
+      "color": "#432",
+      "bgcolor": "#000"
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [569.9875743118757, 199.99406275798367],
+      "size": [780, 660],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 62
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "SaveImage",
+        "cnr_id": "comfy-core",
+        "ver": "0.3.64",
+        "enableTabs": false,
+        "tabWidth": 65,
+        "tabXOffset": 10,
+        "hasSecondTab": false,
+        "secondTabText": "Send Back",
+        "secondTabOffset": 80,
+        "secondTabWidth": 65
+      },
+      "widgets_values": ["z-image-turbo"]
+    },
+    {
+      "id": 57,
+      "type": "f2fdebf6-dfaf-43b6-9eb2-7f70613cfdc1",
+      "pos": [128.01215102992103, 199.99406275798367],
+      "size": [400, 470],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "prompt",
+          "name": "text",
+          "type": "STRING",
+          "widget": {
+            "name": "text"
+          },
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [62]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["27", "text"],
+          ["13", "width"],
+          ["13", "height"],
+          ["28", "unet_name"],
+          ["30", "clip_name"],
+          ["29", "vae_name"],
+          ["3", "steps"],
+          ["3", "control_after_generate"]
+        ],
+        "cnr_id": "comfy-core",
+        "ver": "0.3.73",
+        "enableTabs": false,
+        "tabWidth": 65,
+        "tabXOffset": 10,
+        "hasSecondTab": false,
+        "secondTabText": "Send Back",
+        "secondTabOffset": 80,
+        "secondTabWidth": 65
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [[62, 57, 0, 9, 0, "IMAGE"]],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "f2fdebf6-dfaf-43b6-9eb2-7f70613cfdc1",
+        "version": 1,
+        "state": {
+          "lastGroupId": 4,
+          "lastNodeId": 61,
+          "lastLinkId": 70,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Text to Image (Z-Image-Turbo)",
+        "inputNode": {
+          "id": -10,
+          "bounding": [-80, 425, 120, 180]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1490, 415, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "fb178669-e742-4a53-8a69-7df59834dfd8",
+            "name": "text",
+            "type": "STRING",
+            "linkIds": [34],
+            "label": "prompt",
+            "pos": [20, 445]
+          },
+          {
+            "id": "dd780b3c-23e9-46ff-8469-156008f42e5a",
+            "name": "width",
+            "type": "INT",
+            "linkIds": [35],
+            "pos": [20, 465]
+          },
+          {
+            "id": "7b08d546-6bb0-4ef9-82e9-ffae5e1ee6bc",
+            "name": "height",
+            "type": "INT",
+            "linkIds": [36],
+            "pos": [20, 485]
+          },
+          {
+            "id": "8ed4eb73-a2bf-4766-8bf4-c5890b560596",
+            "name": "unet_name",
+            "type": "COMBO",
+            "linkIds": [38],
+            "pos": [20, 505]
+          },
+          {
+            "id": "f362d639-d412-4b5d-8490-1e9995dc5f82",
+            "name": "clip_name",
+            "type": "COMBO",
+            "linkIds": [39],
+            "pos": [20, 525]
+          },
+          {
+            "id": "ee25ac16-de63-4b74-bbbb-5b29fdc1efcf",
+            "name": "vae_name",
+            "type": "COMBO",
+            "linkIds": [40],
+            "pos": [20, 545]
+          },
+          {
+            "id": "51cbcd61-9218-4bcb-89ac-ecdfb1ef8892",
+            "name": "steps",
+            "type": "INT",
+            "linkIds": [70],
+            "pos": [20, 565]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "1fa72a21-ce00-4952-814e-1f2ffbe87d1d",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [16],
+            "localized_name": "IMAGE",
+            "pos": [1510, 435]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 30,
+            "type": "CLIPLoader",
+            "pos": [110, 330],
+            "size": [270, 106],
+            "flags": {},
+            "order": 7,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip_name",
+                "name": "clip_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "clip_name"
+                },
+                "link": 39
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CLIP",
+                "name": "CLIP",
+                "type": "CLIP",
+                "links": [28]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPLoader",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.73",
+              "models": [
+                {
+                  "name": "qwen_3_4b.safetensors",
+                  "url": "https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/text_encoders/qwen_3_4b.safetensors",
+                  "directory": "text_encoders"
+                }
+              ],
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": ["qwen_3_4b.safetensors", "lumina2", "default"]
+          },
+          {
+            "id": 29,
+            "type": "VAELoader",
+            "pos": [110, 480],
+            "size": [270, 58],
+            "flags": {},
+            "order": 6,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "vae_name",
+                "name": "vae_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "vae_name"
+                },
+                "link": 40
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "VAE",
+                "name": "VAE",
+                "type": "VAE",
+                "links": [27]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAELoader",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.73",
+              "models": [
+                {
+                  "name": "ae.safetensors",
+                  "url": "https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors",
+                  "directory": "vae"
+                }
+              ],
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": ["ae.safetensors"]
+          },
+          {
+            "id": 33,
+            "type": "ConditioningZeroOut",
+            "pos": [640, 620],
+            "size": [204.134765625, 26],
+            "flags": {},
+            "order": 8,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "conditioning",
+                "name": "conditioning",
+                "type": "CONDITIONING",
+                "link": 32
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [33]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ConditioningZeroOut",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.73",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 8,
+            "type": "VAEDecode",
+            "pos": [1220, 160],
+            "size": [210, 46],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "samples",
+                "name": "samples",
+                "type": "LATENT",
+                "link": 14
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": 27
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "slot_index": 0,
+                "links": [16]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.64",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 28,
+            "type": "UNETLoader",
+            "pos": [110, 200],
+            "size": [270, 82],
+            "flags": {},
+            "order": 5,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "unet_name",
+                "name": "unet_name",
+                "type": "COMBO",
+                "widget": {
+                  "name": "unet_name"
+                },
+                "link": 38
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "MODEL",
+                "name": "MODEL",
+                "type": "MODEL",
+                "links": [26]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "UNETLoader",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.73",
+              "models": [
+                {
+                  "name": "z_image_turbo_bf16.safetensors",
+                  "url": "https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/diffusion_models/z_image_turbo_bf16.safetensors",
+                  "directory": "diffusion_models"
+                }
+              ],
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": ["z_image_turbo_bf16.safetensors", "default"]
+          },
+          {
+            "id": 27,
+            "type": "CLIPTextEncode",
+            "pos": [430, 200],
+            "size": [410, 370],
+            "flags": {},
+            "order": 4,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 28
+              },
+              {
+                "localized_name": "text",
+                "name": "text",
+                "type": "STRING",
+                "widget": {
+                  "name": "text"
+                },
+                "link": 34
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [30, 32]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.73",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": [
+              "Latina female with thick wavy hair, harbor boats and pastel houses behind. Breezy seaside light, warm tones, cinematic close-up. "
+            ]
+          },
+          {
+            "id": 13,
+            "type": "EmptySD3LatentImage",
+            "pos": [110, 630],
+            "size": [260, 110],
+            "flags": {},
+            "order": 3,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "width",
+                "name": "width",
+                "type": "INT",
+                "widget": {
+                  "name": "width"
+                },
+                "link": 35
+              },
+              {
+                "localized_name": "height",
+                "name": "height",
+                "type": "INT",
+                "widget": {
+                  "name": "height"
+                },
+                "link": 36
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "slot_index": 0,
+                "links": [17]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptySD3LatentImage",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.64",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": [1024, 1024, 1]
+          },
+          {
+            "id": 11,
+            "type": "ModelSamplingAuraFlow",
+            "pos": [880, 160],
+            "size": [310, 60],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": 26
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "MODEL",
+                "name": "MODEL",
+                "type": "MODEL",
+                "slot_index": 0,
+                "links": [13]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ModelSamplingAuraFlow",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.64",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": [3]
+          },
+          {
+            "id": 3,
+            "type": "KSampler",
+            "pos": [880, 270],
+            "size": [315, 262],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": 13
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 30
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": 33
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 17
+              },
+              {
+                "localized_name": "steps",
+                "name": "steps",
+                "type": "INT",
+                "widget": {
+                  "name": "steps"
+                },
+                "link": 70
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "slot_index": 0,
+                "links": [14]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler",
+              "cnr_id": "comfy-core",
+              "ver": "0.3.64",
+              "enableTabs": false,
+              "tabWidth": 65,
+              "tabXOffset": 10,
+              "hasSecondTab": false,
+              "secondTabText": "Send Back",
+              "secondTabOffset": 80,
+              "secondTabWidth": 65
+            },
+            "widgets_values": [
+              0,
+              "randomize",
+              8,
+              1,
+              "res_multistep",
+              "simple",
+              1
+            ]
+          }
+        ],
+        "groups": [
+          {
+            "id": 2,
+            "title": "Step2 - Image size",
+            "bounding": [100, 560, 290, 200],
+            "color": "#3f789e",
+            "flags": {}
+          },
+          {
+            "id": 3,
+            "title": "Step3 - Prompt",
+            "bounding": [410, 130, 450, 540],
+            "color": "#3f789e",
+            "flags": {}
+          },
+          {
+            "id": 4,
+            "title": "Step1 - Load models",
+            "bounding": [100, 130, 290, 413.6],
+            "color": "#3f789e",
+            "flags": {}
+          }
+        ],
+        "links": [
+          {
+            "id": 32,
+            "origin_id": 27,
+            "origin_slot": 0,
+            "target_id": 33,
+            "target_slot": 0,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 26,
+            "origin_id": 28,
+            "origin_slot": 0,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 14,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 8,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 27,
+            "origin_id": 29,
+            "origin_slot": 0,
+            "target_id": 8,
+            "target_slot": 1,
+            "type": "VAE"
+          },
+          {
+            "id": 13,
+            "origin_id": 11,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 30,
+            "origin_id": 27,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 33,
+            "origin_id": 33,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 2,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 17,
+            "origin_id": 13,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 28,
+            "origin_id": 30,
+            "origin_slot": 0,
+            "target_id": 27,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 16,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 34,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 27,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 35,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 13,
+            "target_slot": 0,
+            "type": "INT"
+          },
+          {
+            "id": 36,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 13,
+            "target_slot": 1,
+            "type": "INT"
+          },
+          {
+            "id": 38,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 28,
+            "target_slot": 0,
+            "type": "COMBO"
+          },
+          {
+            "id": 39,
+            "origin_id": -10,
+            "origin_slot": 4,
+            "target_id": 30,
+            "target_slot": 0,
+            "type": "COMBO"
+          },
+          {
+            "id": 40,
+            "origin_id": -10,
+            "origin_slot": 5,
+            "target_id": 29,
+            "target_slot": 0,
+            "type": "COMBO"
+          },
+          {
+            "id": 70,
+            "origin_id": -10,
+            "origin_slot": 6,
+            "target_id": 3,
+            "target_slot": 4,
+            "type": "INT"
+          }
+        ],
+        "extra": {
+          "workflowRendererVersion": "LG"
+        }
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.6488294314381271,
+      "offset": [733, 392.7886597938144]
+    },
+    "frontendVersion": "1.43.4",
+    "workflowRendererVersion": "LG",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets.json

@@ -0,0 +1,599 @@
+{
+  "id": "legacy-prefix-test-workflow",
+  "revision": 0,
+  "last_node_id": 5,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
+      "pos": [788, 433.5],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "string_a",
+          "type": "STRING",
+          "widget": {
+            "name": "string_a"
+          },
+          "link": 4
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [5]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [["6", "6: 3: string_a"]]
+      },
+      "widgets_values": [""]
+    },
+    {
+      "id": 2,
+      "type": "PreviewAny",
+      "pos": [1335, 429],
+      "size": [250, 145.5],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 5
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": [null, null, false]
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveStringMultiline",
+      "pos": [356, 450],
+      "size": [225, 121.5],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [4]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": ["Outer\n"]
+    }
+  ],
+  "links": [
+    [4, 1, 0, 5, 0, "STRING"],
+    [5, 5, 0, 2, 0, "STRING"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "1e38d8ea-45e1-48a5-aa20-966584201867",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 6,
+          "lastLinkId": 9,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Outer Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [351, 432.5, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1315, 432.5, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "7bf3e1d4-0521-4b5c-92f5-47ca598b7eb4",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [1],
+            "localized_name": "string_a",
+            "pos": [451, 452.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "STRING",
+            "pos": [1335, 452.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 3,
+            "type": "StringConcatenate",
+            "pos": [815, 373],
+            "size": [400, 200],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 1
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "9be42452-056b-4c99-9f9f-7381d11c4454",
+            "pos": [955, 775],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [["-1", "string_a"]]
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 4,
+            "type": "PrimitiveStringMultiline",
+            "pos": [313, 685],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 1\n"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 6,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 9,
+          "lastLinkId": 12,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Inner Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [680, 774, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1320, 774, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [4],
+            "localized_name": "string_a",
+            "pos": [780, 794]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [12],
+            "localized_name": "STRING",
+            "pos": [1340, 794]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 5,
+            "type": "StringConcatenate",
+            "pos": [860, 719],
+            "size": [400, 200],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 4
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [11]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "PrimitiveStringMultiline",
+            "pos": [401, 973],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 2\n"]
+          },
+          {
+            "id": 9,
+            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+            "pos": [1046, 985],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 11
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [12]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [["-1", "string_a"]]
+            },
+            "widgets_values": [""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": 5,
+            "origin_slot": 0,
+            "target_id": 9,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 12,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Innermost Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [262, 1222, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1330, 1222, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "string_a",
+            "pos": [362, 1242]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [10],
+            "localized_name": "STRING",
+            "pos": [1350, 1242]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 7,
+            "type": "StringConcatenate",
+            "pos": [870, 1038],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 9
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [10]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 8,
+            "type": "PrimitiveStringMultiline",
+            "pos": [442, 1296],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [8]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 3\n"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 8,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 7,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-7, 144]
+    },
+    "frontendVersion": "1.38.13"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/nested-subgraph-stale-proxy-widgets.json

@@ -0,0 +1,555 @@
+{
+  "id": "b04d981f-6857-48cc-ac6e-429ab2f6bc8d",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 16,
+  "nodes": [
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451.0058559453123, 189.0019842294924],
+      "size": [400, 200],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 13
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [25.988896564209426, 473.9973077158204],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "slot_index": 0,
+          "links": [11]
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "slot_index": 1,
+          "links": [10]
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "slot_index": 2,
+          "links": [12]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    },
+    {
+      "id": 10,
+      "type": "d14ff4cf-e5cb-4c84-941f-7c2457476424",
+      "pos": [711.776576770508, 420.55569028417983],
+      "size": [400, 293],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": 10
+        },
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": 11
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 12
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [13]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["7", "text"],
+          ["6", "text"],
+          ["3", "seed"]
+        ]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [10, 4, 1, 10, 0, "CLIP"],
+    [11, 4, 0, 10, 1, "MODEL"],
+    [12, 4, 2, 10, 2, "VAE"],
+    [13, 10, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "d14ff4cf-e5cb-4c84-941f-7c2457476424",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 16,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [233, 404.5, 120, 100]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1494, 424.5, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "85b7a46b-f14c-4297-8b86-3fc73a41da2b",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [14],
+            "localized_name": "clip",
+            "pos": [333, 424.5]
+          },
+          {
+            "id": "b4040cb7-0457-416e-ad6e-14890b871dd2",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [1],
+            "localized_name": "model",
+            "pos": [333, 444.5]
+          },
+          {
+            "id": "e61199fa-9113-4532-a3d9-879095969171",
+            "name": "vae",
+            "type": "VAE",
+            "linkIds": [8],
+            "localized_name": "vae",
+            "pos": [333, 464.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a4705fa5-a5e6-4c4e-83c2-dfb875861466",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [9],
+            "localized_name": "IMAGE",
+            "pos": [1514, 444.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 5,
+            "type": "EmptyLatentImage",
+            "pos": [473.007643669922, 609.0214689174805],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "slot_index": 0,
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [512, 512, 1]
+          },
+          {
+            "id": 3,
+            "type": "KSampler",
+            "pos": [862.990643669922, 185.9853293300783],
+            "size": [400, 317],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": 1
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 16
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": 15
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "slot_index": 0,
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [
+              156680208700286,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              1
+            ]
+          },
+          {
+            "id": 8,
+            "type": "VAEDecode",
+            "pos": [1209.0062878349609, 188.00400724755877],
+            "size": [400, 200],
+            "flags": {},
+            "order": 3,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "samples",
+                "name": "samples",
+                "type": "LATENT",
+                "link": 7
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "slot_index": 0,
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 11,
+            "type": "3b9b7fb9-a8f6-4b4e-ac13-b68156afe8f6",
+            "pos": [485.5190761650391, 283.9247189174806],
+            "size": [400, 237],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 14
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [15]
+              },
+              {
+                "localized_name": "CONDITIONING_1",
+                "name": "CONDITIONING_1",
+                "type": "CONDITIONING",
+                "links": [16]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["7", "text"],
+                ["6", "text"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": 5,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 7,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 8,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 8,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 8,
+            "target_slot": 1,
+            "type": "VAE"
+          },
+          {
+            "id": 9,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 15,
+            "origin_id": 11,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 2,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 16,
+            "origin_id": 11,
+            "origin_slot": 1,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "3b9b7fb9-a8f6-4b4e-ac13-b68156afe8f6",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 16,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [233.01228575000005, 332.7902770140076, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [
+            898.2956109453125, 322.7902770140076, 138.31666564941406, 80
+          ]
+        },
+        "inputs": [
+          {
+            "id": "e5074a9c-3b33-4998-b569-0638817e81e7",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [5, 3],
+            "localized_name": "clip",
+            "pos": [55, 20]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "5fd778da-7ff1-4a0b-9282-d11a2e332e15",
+            "name": "CONDITIONING",
+            "type": "CONDITIONING",
+            "linkIds": [6],
+            "localized_name": "CONDITIONING",
+            "pos": [20, 20]
+          },
+          {
+            "id": "1e02089f-6491-45fa-aa0a-24458100f8ae",
+            "name": "CONDITIONING_1",
+            "type": "CONDITIONING",
+            "linkIds": [4],
+            "localized_name": "CONDITIONING_1",
+            "pos": [20, 40]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 7,
+            "type": "CLIPTextEncode",
+            "pos": [413.01228575000005, 388.98593823266606],
+            "size": [425, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 5
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "slot_index": 0,
+                "links": [6]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": ["text, watermark"]
+          },
+          {
+            "id": 6,
+            "type": "CLIPTextEncode",
+            "pos": [414.99053247091683, 185.9946096918335],
+            "size": [423, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 3
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "slot_index": 0,
+                "links": [4]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [
+              "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+            ]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 5,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 3,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 6,
+            "origin_id": 7,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 4,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.6830134553650709,
+      "offset": [-203.70966200000038, 259.92420099999975]
+    },
+    "frontendVersion": "1.43.2"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/test-values-input-subgraph.json

@@ -0,0 +1,407 @@
+{
+  "id": "0cc04f4c-d744-462d-8638-4e5f5e3947e7",
+  "revision": 0,
+  "last_node_id": 19,
+  "last_link_id": 24,
+  "nodes": [
+    {
+      "id": 14,
+      "type": "CLIPLoader",
+      "pos": [143.16716182216328, 290.16372862874033],
+      "size": [270, 117.3125],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [21]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPLoader"
+      },
+      "widgets_values": [null, "stable_diffusion", "default"]
+    },
+    {
+      "id": 18,
+      "type": "PreviewImage",
+      "pos": [1305.1455526601603, 472.17095792625025],
+      "size": [225, 48],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 24
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 19,
+      "type": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
+      "pos": [794.198171390827, 452.45433419677147],
+      "size": [225, 172],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "label": "renamed_clip",
+          "name": "clip",
+          "type": "CLIP",
+          "link": 21
+        },
+        {
+          "label": "renamed_seed",
+          "name": "seed",
+          "type": "INT",
+          "widget": {
+            "name": "seed"
+          },
+          "link": 22
+        },
+        {
+          "label": "renamed_vae",
+          "name": "vae",
+          "type": "VAE",
+          "link": 23
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [24]
+        }
+      ],
+      "title": "Input Test Subgraph",
+      "properties": {
+        "proxyWidgets": [
+          ["12", "seed"],
+          ["15", "text"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 13,
+      "type": "PrimitiveInt",
+      "pos": [155.04048166054417, 773.3816055422594],
+      "size": [270, 82],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "links": [22]
+        }
+      ],
+      "title": "Seed Int",
+      "properties": {
+        "Node name for S&R": "PrimitiveInt"
+      },
+      "widgets_values": [0, "randomize"]
+    },
+    {
+      "id": 17,
+      "type": "VAELoader",
+      "pos": [163.6043676075426, 543.9624492717659],
+      "size": [270, 82.65625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [23]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAELoader"
+      },
+      "widgets_values": ["pixel_space"]
+    }
+  ],
+  "links": [
+    [21, 14, 0, 19, 0, "CLIP"],
+    [22, 13, 0, 19, 1, "INT"],
+    [23, 17, 0, 19, 2, "VAE"],
+    [24, 19, 0, 18, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "314bbb9f-f1cc-456c-b14f-2ba92bd4a597",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 19,
+          "lastLinkId": 24,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Input Test Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [
+            358.8694807105848, 439.23932667242485, 123.14453125,
+            99.99999999999994
+          ]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1408.5510580294986, 463.2512895126797, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "cfaad2dc-7758-412c-a4ac-dc2e6d37b28c",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [16],
+            "localized_name": "clip",
+            "label": "renamed_clip",
+            "pos": [462.0140119605848, 459.23932667242485]
+          },
+          {
+            "id": "2e4600ea-e1b1-42ca-b43a-e066fd080774",
+            "name": "seed",
+            "type": "INT",
+            "linkIds": [15],
+            "localized_name": "seed",
+            "label": "renamed_seed",
+            "pos": [462.0140119605848, 479.23932667242485]
+          },
+          {
+            "id": "86ed2da7-db02-454a-9362-70a3fa3e91bf",
+            "name": "vae",
+            "type": "VAE",
+            "linkIds": [19],
+            "localized_name": "vae",
+            "label": "renamed_vae",
+            "pos": [462.0140119605848, 499.23932667242485]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "8670d1a7-0d44-4688-b7dd-d4b423f1aee0",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [20],
+            "localized_name": "IMAGE",
+            "pos": [1428.5510580294986, 483.2512895126797]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 12,
+            "type": "KSampler",
+            "pos": [769.2424728654022, 512.726159169824],
+            "size": [270, 262],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 17
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null
+              },
+              {
+                "localized_name": "seed",
+                "name": "seed",
+                "type": "INT",
+                "widget": {
+                  "name": "seed"
+                },
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [18]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 16,
+            "type": "VAEDecode",
+            "pos": [1208.5510580294986, 469.21581253470083],
+            "size": [140, 46],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "samples",
+                "name": "samples",
+                "type": "LATENT",
+                "link": 18
+              },
+              {
+                "localized_name": "vae",
+                "name": "vae",
+                "type": "VAE",
+                "link": 19
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [20]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 15,
+            "type": "CLIPTextEncode",
+            "pos": [681.4596332342014, 243.17567172890932],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 16
+              },
+              {
+                "label": "renamed_from_sidepanel",
+                "localized_name": "text",
+                "name": "text",
+                "type": "STRING",
+                "widget": {
+                  "name": "text"
+                },
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [17]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 17,
+            "origin_id": 15,
+            "origin_slot": 0,
+            "target_id": 12,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 18,
+            "origin_id": 12,
+            "origin_slot": 0,
+            "target_id": 16,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 16,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 15,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 12,
+            "target_slot": 4,
+            "type": "INT"
+          },
+          {
+            "id": 19,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 16,
+            "target_slot": 1,
+            "type": "VAE"
+          },
+          {
+            "id": 20,
+            "origin_id": 16,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.6727925600199565,
+      "offset": [446.69747171876463, 99.95078257277316]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/painter_widget.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Painter",
+      "pos": [50, 50],
+      "size": [450, 550],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Painter"
+      },
+      "widgets_values": ["", 512, 512, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -5,7 +5,7 @@ import type {
   Page
 } from '@playwright/test'
 import { test as base, expect } from '@playwright/test'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
 
 import { TestIds } from './selectors'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
@@ -19,10 +19,12 @@ import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
 import {
+  AssetsSidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
+import { AssetsHelper } from './helpers/AssetsHelper'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { QueueHelper } from './helpers/QueueHelper'
@@ -33,13 +35,14 @@ 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'
 import type { NodeReference } from './utils/litegraphUtils'
 import type { WorkspaceStore } from '../types/globals'
 
-dotenv.config()
+dotenvConfig()
 
 class ComfyPropertiesPanel {
   readonly root: Locator
@@ -54,6 +57,7 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
+  private _assetsTab: AssetsSidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
@@ -77,6 +81,11 @@ class ComfyMenu {
     return this._nodeLibraryTab
   }
 
+  get assetsTab() {
+    this._assetsTab ??= new AssetsSidebarTab(this.page)
+    return this._assetsTab
+  }
+
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab
@@ -176,6 +185,7 @@ 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
@@ -190,6 +200,7 @@ export class ComfyPage {
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
+  public readonly assets: AssetsHelper
   public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
@@ -221,12 +232,13 @@ 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)
+    this.clipboard = new ClipboardHelper(this.keyboard, page)
     this.workflow = new WorkflowHelper(this)
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
@@ -235,6 +247,7 @@ export class ComfyPage {
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
+    this.assets = new AssetsHelper(page)
     this.queue = new QueueHelper(page)
   }
 
@@ -287,9 +300,7 @@ export class ComfyPage {
     clearStorage?: boolean
     mockReleases?: boolean
   } = {}) {
-    await this.goto()
-
-    // Mock release endpoint to prevent changelog popups
+    // Mock release endpoint to prevent changelog popups (before navigation)
     if (mockReleases) {
       await this.page.route('**/releases**', async (route) => {
         const url = route.request().url()
@@ -309,12 +320,16 @@ 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)
@@ -447,12 +462,13 @@ export const comfyPageFixture = base.extend<{
 
     await comfyPage.setup()
 
-    const isPerf = testInfo.tags.includes('@perf')
-    if (isPerf) await comfyPage.perf.init()
+    const needsPerf =
+      testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
+    if (needsPerf) await comfyPage.perf.init()
 
     await use(comfyPage)
 
-    if (isPerf) await comfyPage.perf.dispose()
+    if (needsPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)

browser_tests/fixtures/components/SidebarTab.ts

@@ -168,3 +168,32 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
   }
 }
+
+export class AssetsSidebarTab extends SidebarTab {
+  constructor(public override readonly page: Page) {
+    super(page, 'assets')
+  }
+
+  get generatedTab() {
+    return this.page.getByRole('tab', { name: 'Generated' })
+  }
+
+  get importedTab() {
+    return this.page.getByRole('tab', { name: 'Imported' })
+  }
+
+  get emptyStateMessage() {
+    return this.page.getByText(
+      'Upload files or generate content to see them here'
+    )
+  }
+
+  emptyStateTitle(title: string) {
+    return this.page.getByText(title)
+  }
+
+  override async open() {
+    await super.open()
+    await this.generatedTab.waitFor({ state: 'visible' })
+  }
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -0,0 +1,201 @@
+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/AssetsHelper.ts

@@ -0,0 +1,147 @@
+import type { Page, Route } from '@playwright/test'
+
+import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+
+const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
+const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+
+function parseLimit(url: URL, total: number): number {
+  const value = Number(url.searchParams.get('limit'))
+  if (!Number.isInteger(value) || value <= 0) {
+    return total
+  }
+  return value
+}
+
+function parseOffset(url: URL): number {
+  const value = Number(url.searchParams.get('offset'))
+  if (!Number.isInteger(value) || value < 0) {
+    return 0
+  }
+  return value
+}
+
+function getExecutionDuration(job: RawJobListItem): number {
+  const start = job.execution_start_time ?? 0
+  const end = job.execution_end_time ?? 0
+  return end - start
+}
+
+export class AssetsHelper {
+  private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
+    null
+  private generatedJobs: RawJobListItem[] = []
+  private importedFiles: string[] = []
+
+  constructor(private readonly page: Page) {}
+
+  async mockOutputHistory(jobs: RawJobListItem[]): Promise<void> {
+    this.generatedJobs = [...jobs]
+
+    if (this.jobsRouteHandler) {
+      return
+    }
+
+    this.jobsRouteHandler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const statuses = url.searchParams
+        .get('status')
+        ?.split(',')
+        .map((status) => status.trim())
+        .filter(Boolean)
+      const workflowId = url.searchParams.get('workflow_id')
+      const sortBy = url.searchParams.get('sort_by')
+      const sortOrder = url.searchParams.get('sort_order') === 'asc' ? 1 : -1
+
+      let filteredJobs = [...this.generatedJobs]
+
+      if (statuses?.length) {
+        filteredJobs = filteredJobs.filter((job) =>
+          statuses.includes(job.status)
+        )
+      }
+
+      if (workflowId) {
+        filteredJobs = filteredJobs.filter(
+          (job) => job.workflow_id === workflowId
+        )
+      }
+
+      filteredJobs.sort((left, right) => {
+        const leftValue =
+          sortBy === 'execution_duration'
+            ? getExecutionDuration(left)
+            : left.create_time
+        const rightValue =
+          sortBy === 'execution_duration'
+            ? getExecutionDuration(right)
+            : right.create_time
+
+        return (leftValue - rightValue) * sortOrder
+      })
+
+      const offset = parseOffset(url)
+      const total = filteredJobs.length
+      const limit = parseLimit(url, total)
+      const visibleJobs = filteredJobs.slice(offset, offset + limit)
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          jobs: visibleJobs,
+          pagination: {
+            offset,
+            limit,
+            total,
+            has_more: offset + visibleJobs.length < total
+          }
+        })
+      })
+    }
+
+    await this.page.route(jobsListRoutePattern, this.jobsRouteHandler)
+  }
+
+  async mockInputFiles(files: string[]): Promise<void> {
+    this.importedFiles = [...files]
+
+    if (this.inputFilesRouteHandler) {
+      return
+    }
+
+    this.inputFilesRouteHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(this.importedFiles)
+      })
+    }
+
+    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
+  }
+
+  async mockEmptyState(): Promise<void> {
+    await this.mockOutputHistory([])
+    await this.mockInputFiles([])
+  }
+
+  async clearMocks(): Promise<void> {
+    this.generatedJobs = []
+    this.importedFiles = []
+
+    if (this.jobsRouteHandler) {
+      await this.page.unroute(jobsListRoutePattern, this.jobsRouteHandler)
+      this.jobsRouteHandler = null
+    }
+
+    if (this.inputFilesRouteHandler) {
+      await this.page.unroute(
+        inputFilesRoutePattern,
+        this.inputFilesRouteHandler
+      )
+      this.inputFilesRouteHandler = null
+    }
+  }
+}

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -91,6 +91,12 @@ export class CanvasHelper {
     await this.page.mouse.move(10, 10)
   }
 
+  async isReadOnly(): Promise<boolean> {
+    return this.page.evaluate(() => {
+      return window.app!.canvas.state.readOnly
+    })
+  }
+
   async getScale(): Promise<number> {
     return this.page.evaluate(() => {
       return window.app!.canvas.ds.scale

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -1,9 +1,16 @@
-import type { Locator } from '@playwright/test'
+import { readFileSync } from 'fs'
+import { basename } from 'path'
+
+import type { Locator, Page } from '@playwright/test'
 
 import type { KeyboardHelper } from './KeyboardHelper'
+import { getMimeType } from './mimeTypeUtil'
 
 export class ClipboardHelper {
-  constructor(private readonly keyboard: KeyboardHelper) {}
+  constructor(
+    private readonly keyboard: KeyboardHelper,
+    private readonly page: Page
+  ) {}
 
   async copy(locator?: Locator | null): Promise<void> {
     await this.keyboard.ctrlSend('KeyC', locator ?? null)
@@ -12,4 +19,44 @@ 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,6 +3,7 @@ import { readFileSync } from 'fs'
 import type { Page } from '@playwright/test'
 
 import type { Position } from '../types'
+import { getMimeType } from './mimeTypeUtil'
 
 export class DragDropHelper {
   constructor(
@@ -24,13 +25,15 @@ export class DragDropHelper {
       url?: string
       dropPosition?: Position
       waitForUpload?: boolean
+      preserveNativePropagation?: boolean
     } = {}
   ): Promise<void> {
     const {
       dropPosition = { x: 100, y: 100 },
       fileName,
       url,
-      waitForUpload = false
+      waitForUpload = false,
+      preserveNativePropagation = false
     } = options
 
     if (!fileName && !url)
@@ -42,25 +45,15 @@ export class DragDropHelper {
       fileType?: string
       buffer?: Uint8Array | number[]
       url?: string
-    } = { dropPosition }
+      preserveNativePropagation: boolean
+    } = { dropPosition, preserveNativePropagation }
 
     if (fileName) {
       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 = getFileType(fileName)
+      evaluateParams.fileType = getMimeType(fileName)
       evaluateParams.buffer = [...new Uint8Array(buffer)]
     }
 
@@ -125,15 +118,17 @@ export class DragDropHelper {
         )
       }
 
-      Object.defineProperty(dropEvent, 'preventDefault', {
-        value: () => {},
-        writable: false
-      })
+      if (!params.preserveNativePropagation) {
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
 
-      Object.defineProperty(dropEvent, 'stopPropagation', {
-        value: () => {},
-        writable: false
-      })
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+      }
 
       targetElement.dispatchEvent(dragOverEvent)
       targetElement.dispatchEvent(dropEvent)
@@ -164,7 +159,10 @@ export class DragDropHelper {
 
   async dragAndDropURL(
     url: string,
-    options: { dropPosition?: Position } = {}
+    options: {
+      dropPosition?: Position
+      preserveNativePropagation?: boolean
+    } = {}
   ): Promise<void> {
     return this.dragAndDropExternalResource({ url, ...options })
   }

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,6 +33,7 @@ export class NodeOperationsHelper {
     })
   }
 
+  /** Reads from `window.app.graph` (the root workflow graph). */
   async getNodeCount(): Promise<number> {
     return await this.page.evaluate(() => window.app!.graph.nodes.length)
   }

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -23,6 +23,7 @@ export interface PerfMeasurement {
   layoutDurationMs: number
   taskDurationMs: number
   heapDeltaBytes: number
+  heapUsedBytes: number
   domNodes: number
   jsHeapTotalBytes: number
   scriptDurationMs: number
@@ -190,6 +191,7 @@ export class PerformanceHelper {
       layoutDurationMs: delta('LayoutDuration') * 1000,
       taskDurationMs: delta('TaskDuration') * 1000,
       heapDeltaBytes: delta('JSHeapUsedSize'),
+      heapUsedBytes: after.JSHeapUsedSize,
       domNodes: delta('Nodes'),
       jsHeapTotalBytes: delta('JSHeapTotalSize'),
       scriptDurationMs: delta('ScriptDuration') * 1000,

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 import type {
@@ -6,6 +7,7 @@ import type {
 } from '@/lib/litegraph/src/litegraph'
 
 import type { ComfyPage } from '../ComfyPage'
+import { TestIds } from '../selectors'
 import type { NodeReference } from '../utils/litegraphUtils'
 import { SubgraphSlotReference } from '../utils/litegraphUtils'
 
@@ -322,4 +324,93 @@ export class SubgraphHelper {
     )
     await this.comfyPage.nextFrame()
   }
+
+  async isInSubgraph(): Promise<boolean> {
+    return this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      return !!graph && 'inputNode' in graph
+    })
+  }
+
+  async exitViaBreadcrumb(): Promise<void> {
+    const breadcrumb = this.page.getByTestId(TestIds.breadcrumb.subgraph)
+    const parentLink = breadcrumb.getByRole('link').first()
+    if (await parentLink.isVisible()) {
+      await parentLink.click()
+    } else {
+      await this.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        const graph = canvas.graph
+        if (!graph) return
+        canvas.setGraph(graph.rootGraph)
+      })
+    }
+
+    await this.comfyPage.nextFrame()
+    await expect.poll(async () => this.isInSubgraph()).toBe(false)
+  }
+
+  async countGraphPseudoPreviewEntries(): Promise<number> {
+    return this.page.evaluate(() => {
+      const graph = window.app!.graph!
+      return graph.nodes.reduce((count, node) => {
+        const proxyWidgets = node.properties?.proxyWidgets
+        if (!Array.isArray(proxyWidgets)) return count
+
+        return (
+          count +
+          proxyWidgets.filter(
+            (entry) =>
+              Array.isArray(entry) &&
+              entry.length >= 2 &&
+              typeof entry[1] === 'string' &&
+              entry[1].startsWith('$$')
+          ).length
+        )
+      }, 0)
+    })
+  }
+
+  async getHostPromotedTupleSnapshot(): Promise<
+    { hostNodeId: string; promotedWidgets: [string, string][] }[]
+  > {
+    return this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      return graph._nodes
+        .filter(
+          (node) =>
+            typeof node.isSubgraphNode === 'function' && node.isSubgraphNode()
+        )
+        .map((node) => {
+          const proxyWidgets = Array.isArray(node.properties?.proxyWidgets)
+            ? node.properties.proxyWidgets
+            : []
+          const promotedWidgets = proxyWidgets
+            .filter(
+              (entry): entry is [string, string] =>
+                Array.isArray(entry) &&
+                entry.length >= 2 &&
+                typeof entry[0] === 'string' &&
+                typeof entry[1] === 'string'
+            )
+            .map(
+              ([interiorNodeId, widgetName]) =>
+                [interiorNodeId, widgetName] as [string, string]
+            )
+
+          return {
+            hostNodeId: String(node.id),
+            promotedWidgets
+          }
+        })
+        .sort((a, b) => Number(a.hostNodeId) - Number(b.hostNodeId))
+    })
+  }
+
+  /** Reads from `window.app.canvas.graph` (viewed root or nested subgraph). */
+  async getNodeCount(): Promise<number> {
+    return this.page.evaluate(() => {
+      return window.app!.canvas.graph!.nodes?.length || 0
+    })
+  }
 }

browser_tests/fixtures/helpers/mimeTypeUtil.ts

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

@@ -20,16 +20,33 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
-    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
+    toggleLinkVisibilityButton: 'toggle-link-visibility-button',
+    zoomControlsButton: 'zoom-controls-button',
+    zoomInAction: 'zoom-in-action',
+    zoomOutAction: 'zoom-out-action',
+    zoomToFitAction: 'zoom-to-fit-action',
+    zoomPercentageInput: 'zoom-percentage-input'
   },
   dialogs: {
     settings: 'settings-dialog',
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
+    errorOverlay: 'error-overlay',
+    errorOverlaySeeErrors: 'error-overlay-see-errors',
+    errorOverlayDismiss: 'error-overlay-dismiss',
+    errorOverlayMessages: 'error-overlay-messages',
+    runtimeErrorPanel: 'runtime-error-panel',
+    missingNodeCard: 'missing-node-card',
+    errorCardFindOnGithub: 'error-card-find-on-github',
+    errorCardCopy: 'error-card-copy',
     about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    whatsNewSection: 'whats-new-section',
+    missingNodePacksGroup: 'error-group-missing-node',
+    missingModelsGroup: 'error-group-missing-model'
+  },
+  keybindings: {
+    presetMenu: 'keybinding-preset-menu'
   },
   topbar: {
     queueButton: 'queue-button',
@@ -52,10 +69,19 @@ export const TestIds = {
     colorRed: 'red'
   },
   widgets: {
+    container: 'node-widgets',
+    widget: 'node-widget',
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button'
+    subgraphEnterButton: 'subgraph-enter-button',
+    formDropdownMenu: 'form-dropdown-menu',
+    formDropdownTrigger: 'form-dropdown-trigger'
+  },
+  builder: {
+    ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
+    widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -66,6 +92,10 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
+  },
+  errors: {
+    imageLoadError: 'error-loading-image',
+    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -77,15 +107,18 @@ 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],
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/litegraphUtils.ts

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

browser_tests/globalSetup.ts

@@ -1,11 +1,10 @@
-import type { FullConfig } from '@playwright/test'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'
 
-dotenv.config()
+dotenvConfig()
 
-export default function globalSetup(_config: FullConfig) {
+export default function globalSetup() {
   if (!process.env.CI) {
     if (process.env.TEST_COMFYUI_DIR) {
       backupPath([process.env.TEST_COMFYUI_DIR, 'user'])

browser_tests/globalTeardown.ts

@@ -1,12 +1,11 @@
-import type { FullConfig } from '@playwright/test'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
 
 import { writePerfReport } from './helpers/perfReporter'
 import { restorePath } from './utils/backupUtils'
 
-dotenv.config()
+dotenvConfig()
 
-export default function globalTeardown(_config: FullConfig) {
+export default function globalTeardown() {
   writePerfReport()
 
   if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {

browser_tests/helpers/promotedWidgets.ts

@@ -2,6 +2,11 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 
 export type PromotedWidgetEntry = [string, string]
 
+export interface PromotedWidgetSnapshot {
+  proxyWidgets: PromotedWidgetEntry[]
+  widgetNames: string[]
+}
+
 export function isPromotedWidgetEntry(
   entry: unknown
 ): entry is PromotedWidgetEntry {
@@ -32,6 +37,28 @@ export async function getPromotedWidgets(
   return normalizePromotedWidgets(raw)
 }
 
+export async function getPromotedWidgetSnapshot(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetSnapshot> {
+  const raw = await comfyPage.page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    return {
+      proxyWidgets: node?.properties?.proxyWidgets ?? [],
+      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
+    }
+  }, nodeId)
+
+  return {
+    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
+    widgetNames: Array.isArray(raw.widgetNames)
+      ? raw.widgetNames.filter(
+          (name): name is string => typeof name === 'string'
+        )
+      : []
+  }
+}
+
 export async function getPromotedWidgetNames(
   comfyPage: ComfyPage,
   nodeId: string
@@ -48,6 +75,26 @@ export async function getPromotedWidgetCount(
   return promotedWidgets.length
 }
 
+export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+  return entry[1].startsWith('$$')
+}
+
+export async function getPseudoPreviewWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter(isPseudoPreviewEntry)
+}
+
+export async function getNonPreviewPromotedWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
+}
+
 export async function getPromotedWidgetCountByName(
   comfyPage: ComfyPage,
   nodeId: string,

browser_tests/helpers/subgraphTestUtils.ts

@@ -1,3 +1,5 @@
+import type { Page } from '@playwright/test'
+
 import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
 import { isSubgraph } from '../../src/utils/typeGuardUtil'
 
@@ -14,3 +16,30 @@ export function assertSubgraph(
     )
   }
 }
+
+/**
+ * Returns the widget-input slot Y position and the node title height
+ * for the promoted "text" input on the SubgraphNode.
+ *
+ * The slot Y should be at the widget row, not the header. A value near
+ * zero or negative indicates the slot is positioned at the header (the bug).
+ */
+export function getTextSlotPosition(page: Page, nodeId: string) {
+  return page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    if (!node) return null
+
+    const titleHeight = window.LiteGraph!.NODE_TITLE_HEIGHT
+
+    for (const input of node.inputs) {
+      if (!input.widget || input.type !== 'STRING') continue
+      return {
+        hasPos: !!input.pos,
+        posY: input.pos?.[1] ?? null,
+        widgetName: input.widget.name,
+        titleHeight
+      }
+    }
+    return null
+  }, nodeId)
+}

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -0,0 +1,166 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+/**
+ * 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()
+
+    const menu = comfyPage.page
+      .getByTestId(TestIds.widgets.formDropdownMenu)
+      .first()
+    await expect(menu).toBeVisible({ timeout: 5000 })
+
+    const isInViewport = await menu.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 menu.evaluate(isClippedByAnyAncestor)
+    expect(isClipped).toBe(false)
+  })
+})

browser_tests/tests/appModeWidgetRename.spec.ts

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

@@ -0,0 +1,102 @@
+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/colorPalette.spec.ts

@@ -38,16 +38,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#222222',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',
@@ -102,16 +99,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#000',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',

browser_tests/tests/containAudit.spec.ts

@@ -0,0 +1,276 @@
+import { expect } from '@playwright/test'
+
+import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface ContainCandidate {
+  selector: string
+  testId: string | null
+  tagName: string
+  className: string
+  subtreeSize: number
+  hasFixedWidth: boolean
+  isFlexChild: boolean
+  hasExplicitDimensions: boolean
+  alreadyContained: boolean
+  score: number
+}
+
+interface AuditResult {
+  candidate: ContainCandidate
+  baseline: Pick<PerfMeasurement, 'styleRecalcs' | 'layouts' | 'taskDurationMs'>
+  withContain: Pick<
+    PerfMeasurement,
+    'styleRecalcs' | 'layouts' | 'taskDurationMs'
+  >
+  deltaRecalcsPct: number
+  deltaLayoutsPct: number
+  visuallyBroken: boolean
+}
+
+function formatPctDelta(value: number): string {
+  const sign = value >= 0 ? '+' : ''
+  return `${sign}${value.toFixed(1)}%`
+}
+
+function pctChange(baseline: number, measured: number): number {
+  if (baseline === 0) return 0
+  return ((measured - baseline) / baseline) * 100
+}
+
+const STABILIZATION_FRAMES = 60
+const SETTLE_FRAMES = 10
+
+test.describe('CSS Containment Audit', { tag: ['@audit'] }, () => {
+  test('scan large graph for containment candidates', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+
+    for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    // Walk the DOM and find candidates
+    const candidates = await comfyPage.page.evaluate((): ContainCandidate[] => {
+      const results: ContainCandidate[] = []
+
+      const graphContainer =
+        document.querySelector('.graph-canvas-container') ??
+        document.querySelector('[class*="comfy-vue-node"]')?.parentElement ??
+        document.querySelector('.lg-node')?.parentElement
+
+      const root = graphContainer ?? document.body
+      const allElements = root.querySelectorAll('*')
+
+      allElements.forEach((el) => {
+        if (!(el instanceof HTMLElement)) return
+
+        const subtreeSize = el.querySelectorAll('*').length
+        if (subtreeSize < 5) return
+
+        const computed = getComputedStyle(el)
+
+        const containValue = computed.contain || 'none'
+        const alreadyContained =
+          containValue.includes('layout') || containValue.includes('strict')
+
+        const hasFixedWidth =
+          computed.width !== 'auto' &&
+          !computed.width.includes('%') &&
+          computed.width !== '0px'
+
+        const isFlexChild =
+          el.parentElement !== null &&
+          getComputedStyle(el.parentElement).display.includes('flex') &&
+          (computed.flexGrow !== '0' || computed.flexShrink !== '1')
+
+        const hasExplicitDimensions =
+          hasFixedWidth ||
+          (computed.minWidth !== '0px' && computed.minWidth !== 'auto') ||
+          (computed.maxWidth !== 'none' && computed.maxWidth !== '0px')
+
+        let score = subtreeSize
+        if (hasExplicitDimensions) score *= 2
+        if (isFlexChild) score *= 1.5
+        if (alreadyContained) score = 0
+
+        let selector = el.tagName.toLowerCase()
+        const testId = el.getAttribute('data-testid')
+        if (testId) {
+          selector = `[data-testid="${testId}"]`
+        } else if (el.id) {
+          selector = `#${el.id}`
+        } else if (el.parentElement) {
+          // Use nth-child to disambiguate instead of fragile first-class fallback
+          // (e.g. Tailwind utilities like .flex, .relative are shared across many elements)
+          const children = Array.from(el.parentElement.children)
+          const index = children.indexOf(el) + 1
+          const parentTestId = el.parentElement.getAttribute('data-testid')
+          if (parentTestId) {
+            selector = `[data-testid="${parentTestId}"] > :nth-child(${index})`
+          } else if (el.parentElement.id) {
+            selector = `#${el.parentElement.id} > :nth-child(${index})`
+          } else {
+            const tag = el.tagName.toLowerCase()
+            selector = `${tag}:nth-child(${index})`
+          }
+        }
+
+        results.push({
+          selector,
+          testId,
+          tagName: el.tagName.toLowerCase(),
+          className:
+            typeof el.className === 'string' ? el.className.slice(0, 80) : '',
+          subtreeSize,
+          hasFixedWidth,
+          isFlexChild,
+          hasExplicitDimensions,
+          alreadyContained,
+          score
+        })
+      })
+
+      results.sort((a, b) => b.score - a.score)
+      return results.slice(0, 20)
+    })
+
+    console.log(`\nFound ${candidates.length} containment candidates\n`)
+
+    // Deduplicate candidates by selector (keep highest score)
+    const seen = new Set<string>()
+    const uniqueCandidates = candidates.filter((c) => {
+      if (seen.has(c.selector)) return false
+      seen.add(c.selector)
+      return true
+    })
+
+    // Measure baseline performance (idle)
+    await comfyPage.perf.startMeasuring()
+    for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+      await comfyPage.nextFrame()
+    }
+    const baseline = await comfyPage.perf.stopMeasuring('baseline-idle')
+
+    // Take a baseline screenshot for visual comparison
+    const baselineScreenshot = await comfyPage.page.screenshot()
+
+    // For each candidate, apply contain and measure
+    const results: AuditResult[] = []
+
+    const testCandidates = uniqueCandidates
+      .filter((c) => !c.alreadyContained && c.score > 0)
+      .slice(0, 10)
+
+    for (const candidate of testCandidates) {
+      const applied = await comfyPage.page.evaluate((sel: string) => {
+        const elements = document.querySelectorAll(sel)
+        let count = 0
+        elements.forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.contain = 'layout style'
+            count++
+          }
+        })
+        return count
+      }, candidate.selector)
+
+      if (applied === 0) continue
+
+      for (let i = 0; i < SETTLE_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      // Measure with containment
+      await comfyPage.perf.startMeasuring()
+      for (let i = 0; i < STABILIZATION_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+      const withContain = await comfyPage.perf.stopMeasuring(
+        `contain-${candidate.selector}`
+      )
+
+      // Take screenshot with containment applied to detect visual breakage.
+      // Note: PNG byte comparison can produce false positives from subpixel
+      // rendering and anti-aliasing. Treat "DIFF" as "needs manual review".
+      const containScreenshot = await comfyPage.page.screenshot()
+      const visuallyBroken = !baselineScreenshot.equals(containScreenshot)
+
+      // Remove containment
+      await comfyPage.page.evaluate((sel: string) => {
+        document.querySelectorAll(sel).forEach((el) => {
+          if (el instanceof HTMLElement) {
+            el.style.contain = ''
+          }
+        })
+      }, candidate.selector)
+
+      for (let i = 0; i < SETTLE_FRAMES; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      results.push({
+        candidate,
+        baseline: {
+          styleRecalcs: baseline.styleRecalcs,
+          layouts: baseline.layouts,
+          taskDurationMs: baseline.taskDurationMs
+        },
+        withContain: {
+          styleRecalcs: withContain.styleRecalcs,
+          layouts: withContain.layouts,
+          taskDurationMs: withContain.taskDurationMs
+        },
+        deltaRecalcsPct: pctChange(
+          baseline.styleRecalcs,
+          withContain.styleRecalcs
+        ),
+        deltaLayoutsPct: pctChange(baseline.layouts, withContain.layouts),
+        visuallyBroken
+      })
+    }
+
+    // Print the report
+    const divider = '='.repeat(100)
+    const thinDivider = '-'.repeat(100)
+    console.log('\n')
+    console.log('CSS Containment Audit Results')
+    console.log(divider)
+    console.log(
+      'Rank | Selector                                   | Subtree | Score | DRecalcs   | DLayouts   | Visual'
+    )
+    console.log(thinDivider)
+
+    results
+      .sort((a, b) => a.deltaRecalcsPct - b.deltaRecalcsPct)
+      .forEach((r, i) => {
+        const sel = r.candidate.selector.padEnd(42)
+        const sub = String(r.candidate.subtreeSize).padStart(7)
+        const score = String(Math.round(r.candidate.score)).padStart(5)
+        const dr = formatPctDelta(r.deltaRecalcsPct)
+        const dl = formatPctDelta(r.deltaLayoutsPct)
+        const vis = r.visuallyBroken ? 'DIFF' : 'OK'
+        console.log(
+          `  ${String(i + 1).padStart(2)}  | ${sel} | ${sub} | ${score} | ${dr.padStart(10)} | ${dl.padStart(10)} | ${vis}`
+        )
+      })
+
+    console.log(divider)
+    console.log(
+      `\nBaseline: ${baseline.styleRecalcs} style recalcs, ${baseline.layouts} layouts, ${baseline.taskDurationMs.toFixed(1)}ms task duration\n`
+    )
+
+    const alreadyContained = uniqueCandidates.filter((c) => c.alreadyContained)
+    if (alreadyContained.length > 0) {
+      console.log('Already contained elements:')
+      alreadyContained.forEach((c) => {
+        console.log(`  ${c.selector} (subtree: ${c.subtreeSize})`)
+      })
+    }
+
+    expect(results.length).toBeGreaterThan(0)
+  })
+
+  // Pan interaction perf measurement removed — covered by PR #10001 (performance.spec.ts).
+  // The containment fix itself is tracked in PR #9946.
+})

browser_tests/tests/copyPaste.spec.ts

@@ -129,4 +129,74 @@ 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/defaultKeybindings.spec.ts

@@ -0,0 +1,318 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+async function pressKeyAndExpectRequest(
+  comfyPage: ComfyPage,
+  key: string,
+  urlPattern: string,
+  method: string = 'POST'
+) {
+  const requestPromise = comfyPage.page.waitForRequest(
+    (req) => req.url().includes(urlPattern) && req.method() === method,
+    { timeout: 5000 }
+  )
+  await comfyPage.page.keyboard.press(key)
+  return requestPromise
+}
+
+test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
+  test.describe('Sidebar Toggle Shortcuts', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+    })
+
+    const sidebarTabs = [
+      { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
+      { key: 'KeyN', tabId: 'node-library', label: 'node library' },
+      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
+      { key: 'KeyA', tabId: 'assets', label: 'assets' }
+    ] as const
+
+    for (const { key, tabId, label } of sidebarTabs) {
+      test(`'${key}' toggles ${label} sidebar`, async ({ comfyPage }) => {
+        const selectedButton = comfyPage.page.locator(
+          `.${tabId}-tab-button.side-bar-button-selected`
+        )
+
+        await expect(selectedButton).not.toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).not.toBeVisible()
+      })
+    }
+  })
+
+  test.describe('Canvas View Controls', () => {
+    test("'Alt+=' zooms in", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Equal')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeGreaterThan(initialScale)
+    })
+
+    test("'Alt+-' zooms out", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Minus')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeLessThan(initialScale)
+    })
+
+    test("'.' fits view to nodes", async ({ comfyPage }) => {
+      // Set scale very small so fit-view will zoom back to fit nodes
+      await comfyPage.canvasOps.setScale(0.1)
+      const scaleBefore = await comfyPage.canvasOps.getScale()
+      expect(scaleBefore).toBeCloseTo(0.1, 1)
+
+      // Click canvas to ensure focus is within graph-canvas-container
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+
+      await comfyPage.canvas.press('Period')
+      await comfyPage.nextFrame()
+
+      const scaleAfter = await comfyPage.canvasOps.getScale()
+      expect(scaleAfter).toBeGreaterThan(scaleBefore)
+    })
+
+    test("'h' locks canvas", async ({ comfyPage }) => {
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+    })
+
+    test("'v' unlocks canvas", async ({ comfyPage }) => {
+      // Lock first
+      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+    })
+  })
+
+  test.describe('Node State Toggles', () => {
+    test("'Alt+c' collapses and expands selected nodes", async ({
+      comfyPage
+    }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      expect(await node.isCollapsed()).toBe(false)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(true)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(false)
+    })
+
+    test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      // Normal mode is ALWAYS (0)
+      const getMode = () =>
+        comfyPage.page.evaluate((nodeId) => {
+          return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
+        }, node.id)
+
+      expect(await getMode()).toBe(0)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      // NEVER (2) = muted
+      expect(await getMode()).toBe(2)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      expect(await getMode()).toBe(0)
+    })
+  })
+
+  test.describe('Mode and Panel Toggles', () => {
+    test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      // Set up linearData so app mode has something to show
+      await comfyPage.appMode.enterAppModeWithInputs([])
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+
+      // Toggle off with Alt+m
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
+
+      // Toggle on again
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    })
+
+    test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
+      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+      await comfyPage.workflow.loadWorkflow('default')
+
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).toBeVisible()
+    })
+
+    test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+    })
+  })
+
+  test.describe('Queue and Execution', () => {
+    test("'Ctrl+Enter' queues prompt", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Enter',
+        '/prompt',
+        'POST'
+      )
+      expect(request.url()).toContain('/prompt')
+    })
+
+    test("'Ctrl+Shift+Enter' queues prompt to front", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Shift+Enter',
+        '/prompt',
+        'POST'
+      )
+      const body = request.postDataJSON()
+      expect(body.front).toBe(true)
+    })
+
+    test("'Ctrl+Alt+Enter' interrupts execution", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Alt+Enter',
+        '/interrupt',
+        'POST'
+      )
+      expect(request.url()).toContain('/interrupt')
+    })
+  })
+
+  test.describe('File Operations', () => {
+    test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
+      // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
+      // The dialog appearing proves the keybinding was intercepted by the app.
+      await comfyPage.page.keyboard.press('Control+s')
+      await comfyPage.nextFrame()
+
+      // The Save As dialog should appear (p-dialog overlay)
+      const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
+      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
+
+      // Dismiss the dialog
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+    })
+
+    test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
+      // Ctrl+o calls app.ui.loadFile() which clicks a hidden file input.
+      // Detect the file input click via an event listener.
+      await comfyPage.page.evaluate(() => {
+        window.TestCommand = false
+        const fileInputs =
+          document.querySelectorAll<HTMLInputElement>('input[type="file"]')
+        for (const input of fileInputs) {
+          input.addEventListener('click', () => {
+            window.TestCommand = true
+          })
+        }
+      })
+
+      await comfyPage.page.keyboard.press('Control+o')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    })
+  })
+
+  test.describe('Graph Operations', () => {
+    test("'Ctrl+Shift+e' converts selection to subgraph", async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(initialCount).toBeGreaterThan(1)
+
+      // Select all nodes
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
+      await comfyPage.nextFrame()
+
+      // After conversion, node count should decrease
+      // (multiple nodes replaced by single subgraph node)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
+          timeout: 5000
+        })
+        .toBeLessThan(initialCount)
+    })
+
+    test("'r' refreshes node definitions", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'KeyR',
+        '/object_info',
+        'GET'
+      )
+      expect(request.url()).toContain('/object_info')
+    })
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -9,63 +9,124 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Load workflow warning', { tag: '@ui' }, () => {
-  test('Should display a warning when loading a workflow with missing nodes', async ({
+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 ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).toBeVisible()
+
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/missing.*installed/i)
   })
 
-  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
+  test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).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')
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/missing.*installed/i)
+
+    // Click "See Errors" to open the errors tab and verify subgraph node content
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .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
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .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()
   })
 })
 
-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
+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
   )
-
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-  await expect(missingNodesWarning).toBeVisible()
-  await comfyPage.page.keyboard.press('Escape')
-  await expect(missingNodesWarning).not.toBeVisible()
 
-  // Wait for any async operations to complete after dialog closes
+  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeVisible()
+
+  // Dismiss the error overlay
+  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).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()
   await comfyPage.nextFrame()
 
-  // Make a change to the graph
-  await comfyPage.canvasOps.doubleClick()
-  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-
-  // Undo and redo the change
+  // Undo and redo should not resurface the error overlay
   await comfyPage.keyboard.undo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 
   await comfyPage.keyboard.redo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 })
 
 test.describe('Execution error', () => {
@@ -86,11 +147,51 @@ test.describe('Execution error', () => {
     await comfyPage.nextFrame()
 
     // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     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
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    // Verify Find on GitHub button is present in the error card
+    const findOnGithubButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorCardFindOnGithub
+    )
+    await expect(findOnGithubButton).toBeVisible()
+
+    // Verify Copy button is present in the error card
+    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
+    await expect(copyButton).toBeVisible()
+  })
+})
+
 test.describe('Missing models in Error Tab', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -110,11 +211,16 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/required model.*missing/i)
   })
 
   test('Should show missing models from node properties', async ({
@@ -124,11 +230,16 @@ test.describe('Missing models in Error Tab', () => {
       'missing/missing_models_from_node_properties'
     )
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).toBeVisible()
+    const messages = errorOverlay.getByTestId(
+      TestIds.dialogs.errorOverlayMessages
+    )
+    await expect(messages).toBeVisible()
+    await expect(messages).toHaveText(/required model.*missing/i)
   })
 
   test('Should not show missing models when widget values have changed', async ({
@@ -138,11 +249,12 @@ test.describe('Missing models in Error Tab', () => {
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlayMessages)
+    ).not.toBeVisible()
   })
 
   // Flaky test after parallelization
@@ -152,7 +264,9 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const downloadAllButton = comfyPage.page.getByText('Download all')

browser_tests/tests/errorOverlaySeeErrors.spec.ts

@@ -0,0 +1,93 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+
+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.getByTestId(TestIds.dialogs.errorOverlay)
+    ).toBeVisible()
+  })
+
+  test('Error overlay shows error message', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    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.getByTestId(TestIds.dialogs.errorOverlay)
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+
+    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+  })
+
+  test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+
+    await expect(overlay).not.toBeVisible()
+  })
+
+  test('"Dismiss" closes overlay without opening panel', async ({
+    comfyPage
+  }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).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.getByTestId(TestIds.dialogs.errorOverlay)
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByRole('button', { name: /close/i }).click()
+
+    await expect(overlay).not.toBeVisible()
+  })
+})

browser_tests/tests/errorsTab.spec.ts

@@ -1,148 +0,0 @@
-import type { Page } from '@playwright/test'
-
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-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.describe('Errors tab in right side panel', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-  })
-
-  test('Errors tab appears after execution error', async ({ comfyPage }) => {
-    await triggerExecutionError(comfyPage)
-
-    // Dismiss the error overlay
-    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(overlay).toBeVisible()
-    await overlay.getByRole('button', { name: /Dismiss/i }).click()
-
-    await comfyPage.actionbar.propertiesButton.click()
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.root).toBeVisible()
-    await expect(
-      propertiesPanel.root.getByRole('tab', { name: 'Errors' })
-    ).toBeVisible()
-  })
-
-  test('Error card shows locate button', 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()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const locateButton = propertiesPanel.root.locator(
-      'button .icon-\\[lucide--locate\\]'
-    )
-    await expect(locateButton.first()).toBeVisible()
-  })
-
-  test('Clicking locate button focuses canvas', 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()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const locateButton = propertiesPanel.root
-      .locator('button')
-      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--locate\\]') })
-      .first()
-    await locateButton.click()
-
-    await expect(comfyPage.canvas).toBeVisible()
-  })
-
-  test('Collapse all button collapses error groups', 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()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    const collapseButton = propertiesPanel.root.getByRole('button', {
-      name: 'Collapse all'
-    })
-
-    // The collapse toggle only appears when there are multiple groups.
-    // If only one group exists, this test verifies the button is not shown.
-    const count = await collapseButton.count()
-    if (count > 0) {
-      await collapseButton.click()
-      const expandButton = propertiesPanel.root.getByRole('button', {
-        name: 'Expand all'
-      })
-      await expect(expandButton).toBeVisible()
-    }
-  })
-
-  test('Search filters errors', 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()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    // Search for a term that won't match any error
-    await propertiesPanel.searchBox.fill('zzz_nonexistent_zzz')
-
-    await expect(
-      propertiesPanel.root.locator('.icon-\\[lucide--locate\\]')
-    ).toHaveCount(0)
-
-    // Clear the search to restore results
-    await propertiesPanel.searchBox.fill('')
-
-    await expect(
-      propertiesPanel.root.locator('.icon-\\[lucide--locate\\]').first()
-    ).toBeVisible()
-  })
-
-  test('Errors tab shows error message text', 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()
-
-    const { propertiesPanel } = comfyPage.menu
-    await expect(propertiesPanel.root).toBeVisible()
-
-    // Error cards contain <p> elements with error messages
-    const errorMessage = propertiesPanel.root
-      .locator('.whitespace-pre-wrap')
-      .first()
-    await expect(errorMessage).toBeVisible()
-    await expect(errorMessage).not.toHaveText('')
-  })
-})

browser_tests/tests/execution.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -24,16 +25,14 @@ test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
       await comfyPage.page.keyboard.press('Escape')
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      await expect(
-        comfyPage.page.locator('[data-testid="error-overlay"]')
-      ).toBeVisible()
-      await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .getByRole('button', { name: 'Dismiss' })
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
         .click()
-      await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .waitFor({ state: 'hidden' })
+      await errorOverlay.waitFor({ state: 'hidden' })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/focusMode.spec.ts

@@ -0,0 +1,65 @@
+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,4 +23,85 @@ 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/groupNode.spec.ts

@@ -5,6 +5,7 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeLibrarySidebarTab } from '../fixtures/components/SidebarTab'
+import { TestIds } from '../fixtures/selectors'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
@@ -224,7 +225,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await comfyPage.workflow.loadWorkflow('groupnodes/legacy_group_node')
     expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
   })
 

browser_tests/tests/interaction.spec.ts

@@ -10,6 +10,7 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
 import { TestIds } from '../fixtures/selectors'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { WorkspaceStore } from '../types/globals'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -720,6 +721,19 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
   })
 
+  test('Creates initial workflow tab when persistence is disabled', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.Workflow.Persist', false)
+    await comfyPage.setup()
+
+    const openCount = await comfyPage.page.evaluate(() => {
+      return (window.app!.extensionManager as WorkspaceStore).workflow
+        .openWorkflows.length
+    })
+    expect(openCount).toBeGreaterThanOrEqual(1)
+  })
+
   test('Restore workflow on reload (switch workflow)', async ({
     comfyPage
   }) => {
@@ -764,13 +778,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     )
   })
 
+  const generateUniqueFilename = (extension = '') =>
+    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
   test.describe('Restore all open workflows on reload', () => {
     let workflowA: string
     let workflowB: string
 
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
@@ -829,6 +843,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     })
   })
 
+  test.describe('Restore workflow tabs after browser restart', () => {
+    let workflowA: string
+    let workflowB: string
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage fallback pointers to be written
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
+
+      // Simulate browser restart: clear sessionStorage (lost on close)
+      // but keep localStorage (survives browser restart)
+      await comfyPage.page.evaluate(() => {
+        sessionStorage.clear()
+      })
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      // Wait for both restored tabs to render (localStorage fallback is async)
+      await expect(
+        comfyPage.page.locator('.workflow-tabs .workflow-label', {
+          hasText: workflowA
+        })
+      ).toBeVisible()
+
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowA, workflowB])
+      )
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
+      )
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+  })
+
   test('Auto fit view after loading workflow', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.EnableWorkflowViewRestore',

browser_tests/tests/jobHistoryActions.spec.ts

@@ -0,0 +1,91 @@
+import type { Locator } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Job History Actions', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+
+    // Expand the queue overlay so the JobHistoryActionsMenu is visible
+    await comfyPage.page.getByTestId('queue-overlay-toggle').click()
+  })
+
+  async function openMoreOptionsPopover(comfyPage: {
+    page: { getByLabel(label: string | RegExp): Locator }
+  }) {
+    const moreButton = comfyPage.page.getByLabel(/More options/i).first()
+    await moreButton.click()
+  }
+
+  test('More options popover opens', async ({ comfyPage }) => {
+    await openMoreOptionsPopover(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="docked-job-history-action"]')
+    ).toBeVisible()
+  })
+
+  test('Docked job history action is visible with text', async ({
+    comfyPage
+  }) => {
+    await openMoreOptionsPopover(comfyPage)
+
+    const action = comfyPage.page.locator(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await expect(action).toBeVisible()
+    await expect(action).not.toBeEmpty()
+  })
+
+  test('Show run progress bar action is visible', async ({ comfyPage }) => {
+    await openMoreOptionsPopover(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="show-run-progress-bar-action"]')
+    ).toBeVisible()
+  })
+
+  test('Clear history action is visible', async ({ comfyPage }) => {
+    await openMoreOptionsPopover(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="clear-history-action"]')
+    ).toBeVisible()
+  })
+
+  test('Clicking docked job history closes popover', async ({ comfyPage }) => {
+    await openMoreOptionsPopover(comfyPage)
+
+    const action = comfyPage.page.locator(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await expect(action).toBeVisible()
+    await action.click()
+
+    await expect(action).not.toBeVisible()
+  })
+
+  test('Clicking show run progress bar toggles setting', async ({
+    comfyPage
+  }) => {
+    const settingBefore = await comfyPage.settings.getSetting<boolean>(
+      'Comfy.Queue.ShowRunProgressBar'
+    )
+
+    await openMoreOptionsPopover(comfyPage)
+
+    const action = comfyPage.page.locator(
+      '[data-testid="show-run-progress-bar-action"]'
+    )
+    await action.click()
+
+    const settingAfter = await comfyPage.settings.getSetting<boolean>(
+      'Comfy.Queue.ShowRunProgressBar'
+    )
+    expect(settingAfter).toBe(!settingBefore)
+  })
+})

browser_tests/tests/keybindingPresets.spec.ts

@@ -0,0 +1,257 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+const TEST_PRESET = {
+  name: 'test-preset',
+  newBindings: [
+    {
+      commandId: 'Comfy.Canvas.SelectAll',
+      combo: { key: 'a', ctrl: true, shift: true },
+      targetElementId: 'graph-canvas-container'
+    }
+  ],
+  unsetBindings: [
+    {
+      commandId: 'Comfy.Canvas.SelectAll',
+      combo: { key: 'a', ctrl: true },
+      targetElementId: 'graph-canvas-container'
+    }
+  ]
+}
+
+async function importPreset(page: Page, preset: typeof TEST_PRESET) {
+  const menuButton = page.getByTestId('keybinding-preset-menu')
+  await menuButton.click()
+
+  const fileChooserPromise = page.waitForEvent('filechooser')
+  await page.getByRole('menuitem', { name: /Import preset/i }).click()
+  const fileChooser = await fileChooserPromise
+
+  const presetPath = path.join(os.tmpdir(), 'test-preset.json')
+  fs.writeFileSync(presetPath, JSON.stringify(preset))
+  await fileChooser.setFiles(presetPath)
+}
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.afterEach(async ({ comfyPage }) => {
+  await comfyPage.request.fetch(
+    `${comfyPage.url}/api/userdata/keybindings%2Ftest-preset.json`,
+    { method: 'DELETE' }
+  )
+  await comfyPage.settings.setSetting(
+    'Comfy.Keybinding.CurrentPreset',
+    'default'
+  )
+})
+
+test.describe('Keybinding Presets', { tag: '@keyboard' }, () => {
+  test('Can import a preset, use remapped keybinding, and switch back to default', async ({
+    comfyPage
+  }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+
+    // Verify default Ctrl+A select-all works
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('Delete')
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss, then close settings via Escape
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Load workflow again, use new keybind Ctrl+Shift+A
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.canvas.press('Control+Shift+a')
+    await expect
+      .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+      .toBeGreaterThan(0)
+    await comfyPage.canvas.press('Delete')
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    // Switch back to default preset
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await presetTrigger.click()
+    await page.getByRole('option', { name: /Default Preset/i }).click()
+
+    // Handle unsaved changes dialog if the preset was marked as modified
+    const discardButton = page.getByRole('button', {
+      name: /Discard and Switch/i
+    })
+    if (await discardButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await discardButton.click()
+    }
+
+    await expect(presetTrigger).toContainText('Default Preset')
+
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+  })
+
+  test('Can export a preset and re-import it', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Export via ellipsis menu
+    await menuButton.click()
+    const downloadPromise = page.waitForEvent('download')
+    await page.getByRole('menuitem', { name: /Export preset/i }).click()
+    const download = await downloadPromise
+
+    // Verify filename contains test-preset
+    expect(download.suggestedFilename()).toContain('test-preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Verify the downloaded file is valid JSON with correct structure
+    const downloadPath = await download.path()
+    expect(downloadPath).toBeTruthy()
+    const content = fs.readFileSync(downloadPath!, 'utf-8')
+    const parsed = JSON.parse(content) as {
+      name: string
+      newBindings: unknown[]
+      unsetBindings: unknown[]
+    }
+    expect(parsed).toHaveProperty('name')
+    expect(parsed).toHaveProperty('newBindings')
+    expect(parsed).toHaveProperty('unsetBindings')
+    expect(parsed.name).toBe('test-preset')
+  })
+
+  test('Can delete an imported preset', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Delete via ellipsis menu
+    await menuButton.click()
+    await page.getByRole('menuitem', { name: /Delete preset/i }).click()
+
+    // Confirm deletion in the dialog
+    const confirmDialog = page.getByRole('dialog', {
+      name: /Delete the current preset/i
+    })
+    await confirmDialog.getByRole('button', { name: /Delete/i }).click()
+
+    // Verify preset trigger now shows Default Preset
+    await expect(presetTrigger).toContainText('Default Preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+  })
+
+  test('Can save modifications as a new preset', async ({ comfyPage }) => {
+    test.setTimeout(30000)
+    const { page } = comfyPage
+    const menuButton = page.getByTestId('keybinding-preset-menu')
+
+    // Open keybinding settings panel
+    await comfyPage.settingDialog.open()
+    await comfyPage.settingDialog.category('Keybinding').click()
+
+    await importPreset(page, TEST_PRESET)
+
+    // Verify active preset switched to test-preset
+    const presetTrigger = page
+      .locator('#keybinding-panel-actions')
+      .locator('button[role="combobox"]')
+    await expect(presetTrigger).toContainText('test-preset')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Save as new preset via ellipsis menu
+    await menuButton.click()
+    await page.getByRole('menuitem', { name: /Save as new preset/i }).click()
+
+    // Fill in the preset name in the prompt dialog
+    const promptInput = page.locator('.prompt-dialog-content input')
+    await promptInput.fill('my-custom-preset')
+    await promptInput.press('Enter')
+
+    // Wait for toast to auto-dismiss
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0, {
+      timeout: 5000
+    })
+
+    // Verify preset trigger shows my-custom-preset
+    await expect(presetTrigger).toContainText('my-custom-preset')
+
+    // Close settings
+    await page.keyboard.press('Escape')
+    await comfyPage.settingDialog.waitForHidden()
+
+    // Cleanup: delete the my-custom-preset file
+    await comfyPage.request.fetch(
+      `${comfyPage.url}/api/userdata/keybindings%2Fmy-custom-preset.json`,
+      { method: 'DELETE' }
+    )
+  })
+})

browser_tests/tests/linearMode.spec.ts

@@ -0,0 +1,61 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Linear Mode', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
+  test('Displays linear controls when app mode active', async ({
+    comfyPage
+  }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([])
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Run button visible in linear mode', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([])
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-run-button"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Workflow info section visible', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([])
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-workflow-info"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Returns to graph mode', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([])
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+
+    await comfyPage.appMode.toggleAppMode()
+
+    await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).not.toBeVisible()
+  })
+
+  test('Canvas not visible in app mode', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([])
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(comfyPage.canvas).not.toBeVisible()
+  })
+})

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -67,5 +67,44 @@ test.describe(
         )
       })
     })
+
+    test.fixme('Load workflow from URL dropped onto Vue node', async ({
+      comfyPage
+    }) => {
+      const fakeUrl = 'https://example.com/workflow.png'
+      await comfyPage.page.route(fakeUrl, (route) =>
+        route.fulfill({
+          path: comfyPage.assetPath('workflowInMedia/workflow_itxt.png')
+        })
+      )
+
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+
+      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      const node = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      const box = await node.boundingBox()
+      expect(box).not.toBeNull()
+
+      const dropPosition = {
+        x: box!.x + box!.width / 2,
+        y: box!.y + box!.height / 2
+      }
+
+      await comfyPage.dragDrop.dragAndDropURL(fakeUrl, {
+        dropPosition,
+        preserveNativePropagation: true
+      })
+
+      await comfyPage.page.waitForFunction(
+        (prevCount) => window.app!.graph.nodes.length !== prevCount,
+        initialNodeCount,
+        { timeout: 10000 }
+      )
+
+      const newNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(newNodeCount).not.toBe(initialNodeCount)
+    })
   }
 )

browser_tests/tests/mobileBaseline.spec.ts

@@ -24,6 +24,20 @@ test.describe(
       )
     })
 
+    test('@mobile graph canvas toolbar visible', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+      await comfyPage.nextFrame()
+
+      const minimapButton = comfyPage.page.getByTestId(
+        TestIds.canvas.toggleMinimapButton
+      )
+      await expect(minimapButton).toBeVisible()
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'mobile-graph-canvas-toolbar.png'
+      )
+    })
+
     test('@mobile settings dialog', async ({ comfyPage }) => {
       await comfyPage.settingDialog.open()
       await comfyPage.nextFrame()