📝 CodeRabbit Chat: Implement requested code changes

Replaces inline getByLabel with queuePanel.moreOptionsButton
and openClearHistoryDialog method on the page object.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/10586#discussion_r3005779512
https://github.com/Comfy-Org/ComfyUI_frontend/pull/10586#discussion_r3005779205

.agents/checks/adr-compliance.md

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

@@ -1,94 +0,0 @@
-# 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/adding-deprecation-warnings/SKILL.md

@@ -1,84 +0,0 @@
----
-name: adding-deprecation-warnings
-description: 'Adds deprecation warnings for renamed or removed properties/APIs. Searches custom node ecosystem for usage, applies defineDeprecatedProperty helper, adds JSDoc. Triggers on: deprecate, deprecation warning, rename property, backward compatibility.'
----
-
-# Adding Deprecation Warnings
-
-Adds backward-compatible deprecation warnings for renamed or removed
-properties using the `defineDeprecatedProperty` helper in
-`src/lib/litegraph/src/utils/feedback.ts`.
-
-## When to Use
-
-- A property or API has been renamed and custom nodes still use the old name
-- A property is being removed but needs a grace period
-- Backward compatibility must be preserved while nudging adoption
-
-## Steps
-
-### 1. Search the Custom Node Ecosystem
-
-Before implementing, assess impact by searching for usage of the
-deprecated property across ComfyUI custom nodes:
-
-```text
-Use the comfy_codesearch tool to search for the old property name.
-Search for both `widget.oldProp` and just `oldProp` to catch all patterns.
-```
-
-Document the usage patterns found (property access, truthiness checks,
-caching to local vars, style mutation, etc.) — these all must continue
-working.
-
-### 2. Apply the Deprecation
-
-Use `defineDeprecatedProperty` from `src/lib/litegraph/src/utils/feedback.ts`:
-
-```typescript
-import { defineDeprecatedProperty } from '@/lib/litegraph/src/utils/feedback'
-
-/** @deprecated Use {@link obj.newProp} instead. */
-defineDeprecatedProperty(
-  obj,
-  'oldProp',
-  'newProp',
-  'obj.oldProp is deprecated. Use obj.newProp instead.'
-)
-```
-
-### 3. Checklist
-
-- [ ] Ecosystem search completed — all usage patterns are compatible
-- [ ] `defineDeprecatedProperty` call added after the new property is assigned
-- [ ] JSDoc `@deprecated` tag added above the call for IDE support
-- [ ] Warning message names both old and new property clearly
-- [ ] `pnpm typecheck` passes
-- [ ] `pnpm lint` passes
-
-### 4. PR Comment
-
-Add a PR comment summarizing the ecosystem search results: which repos
-use the deprecated property, what access patterns were found, and
-confirmation that all patterns are compatible with the ODP getter/setter.
-
-## How `defineDeprecatedProperty` Works
-
-- Creates an `Object.defineProperty` getter/setter on the target object
-- Getter returns `this[currentKey]`, setter assigns `this[currentKey]`
-- Both log via `warnDeprecated`, which deduplicates (once per unique
-  message per session via a `Set`)
-- `enumerable: false` keeps the alias out of `Object.keys()` / `for...in`
-  / `JSON.stringify`
-- `configurable: true` allows further redefinition if needed
-
-## Edge Cases
-
-- **Truthiness checks** (`if (widget.oldProp)`) — works, getter fires
-- **Caching to local var** (`const el = widget.oldProp`) — works, warns
-  once then the cached ref is used directly
-- **Style/property mutation** (`widget.oldProp.style.color = 'red'`) —
-  works, getter returns the real object
-- **Serialization** (`JSON.stringify`) — `enumerable: false` excludes it
-- **Heavy access in loops** — `warnDeprecated` deduplicates, only warns
-  once per session regardless of call count

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

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

.coderabbit.yaml

@@ -28,21 +28,3 @@ 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.

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, 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)
+4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
 5. Aim for behavioral coverage of critical and new features
 
 ### Playwright / Browser / E2E Tests
@@ -231,18 +231,6 @@ 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

apps/website/public/icons/social/discord.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"/></svg>

apps/website/public/icons/social/github.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"/></svg>

apps/website/public/icons/social/instagram.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg>

apps/website/public/icons/social/linkedin.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z"/></svg>

apps/website/public/icons/social/reddit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.8 11.33c.02.16.03.33.03.5 0 2.55-2.97 4.63-6.63 4.63-3.65 0-6.62-2.07-6.62-4.63 0-.17.01-.34.03-.5a1.58 1.58 0 0 1-.63-1.27c0-.88.72-1.59 1.6-1.59.44 0 .83.18 1.12.46 1.1-.79 2.62-1.3 4.31-1.37l.73-3.44a.32.32 0 0 1 .39-.24l2.43.52a1.13 1.13 0 0 1 2.15.36 1.13 1.13 0 0 1-1.13 1.12 1.13 1.13 0 0 1-1.08-.82l-2.16-.46-.65 3.07c1.65.09 3.14.59 4.22 1.36.29-.28.69-.46 1.13-.46.88 0 1.6.71 1.6 1.59 0 .52-.25.97-.63 1.27ZM9.5 13.5c0 .63.51 1.13 1.13 1.13s1.12-.5 1.12-1.13-.5-1.12-1.12-1.12-1.13.5-1.13 1.12Zm5.75 2.55c-.69.69-2 .73-3.25.73s-2.56-.04-3.25-.73a.32.32 0 1 1 .45-.45c.44.44 1.37.6 2.8.6 1.43 0 2.37-.16 2.8-.6a.32.32 0 1 1 .45.45Zm-.37-1.42c.62 0 1.13-.5 1.13-1.13 0-.62-.51-1.12-1.13-1.12-.63 0-1.13.5-1.13 1.12 0 .63.5 1.13 1.13 1.13Z"/></svg>

apps/website/public/icons/social/x.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>

apps/website/src/components/SiteFooter.vue

@@ -1,143 +0,0 @@
-<script setup lang="ts">
-const columns = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Comfy Desktop', href: '/download' },
-      { label: 'Comfy Cloud', href: 'https://app.comfy.org' },
-      { label: 'ComfyHub', href: 'https://hub.comfy.org' },
-      { label: 'Pricing', href: '/pricing' }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Documentation', href: 'https://docs.comfy.org' },
-      { label: 'Blog', href: 'https://blog.comfy.org' },
-      { label: 'Gallery', href: '/gallery' },
-      { label: 'GitHub', href: 'https://github.com/comfyanonymous/ComfyUI' }
-    ]
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'About', href: '/about' },
-      { label: 'Careers', href: '/careers' },
-      { label: 'Enterprise', href: '/enterprise' }
-    ]
-  },
-  {
-    title: 'Legal',
-    links: [
-      { label: 'Terms of Service', href: '/terms-of-service' },
-      { label: 'Privacy Policy', href: '/privacy-policy' }
-    ]
-  }
-]
-
-const socials = [
-  {
-    label: 'GitHub',
-    href: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: '/icons/social/github.svg'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/comfyorg',
-    icon: '/icons/social/discord.svg'
-  },
-  {
-    label: 'X',
-    href: 'https://x.com/comaboratory',
-    icon: '/icons/social/x.svg'
-  },
-  {
-    label: 'Reddit',
-    href: 'https://reddit.com/r/comfyui',
-    icon: '/icons/social/reddit.svg'
-  },
-  {
-    label: 'LinkedIn',
-    href: 'https://linkedin.com/company/comfyorg',
-    icon: '/icons/social/linkedin.svg'
-  },
-  {
-    label: 'Instagram',
-    href: 'https://instagram.com/comfyorg',
-    icon: '/icons/social/instagram.svg'
-  }
-]
-</script>
-
-<template>
-  <footer class="border-t border-white/10 bg-black">
-    <div
-      class="mx-auto grid max-w-7xl gap-8 px-6 py-16 sm:grid-cols-2 lg:grid-cols-5"
-    >
-      <!-- Brand -->
-      <div class="lg:col-span-1">
-        <a href="/" class="text-2xl font-bold text-brand-yellow italic">
-          Comfy
-        </a>
-        <p class="mt-4 text-sm text-smoke-700">
-          Professional control of visual AI.
-        </p>
-      </div>
-
-      <!-- Link columns -->
-      <nav
-        v-for="column in columns"
-        :key="column.title"
-        :aria-label="column.title"
-        class="flex flex-col gap-3"
-      >
-        <h3 class="text-sm font-semibold text-white">{{ column.title }}</h3>
-        <a
-          v-for="link in column.links"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm text-smoke-700 transition-colors hover:text-white"
-        >
-          {{ link.label }}
-        </a>
-      </nav>
-    </div>
-
-    <!-- Bottom bar -->
-    <div class="border-t border-white/10">
-      <div
-        class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 p-6 sm:flex-row"
-      >
-        <p class="text-sm text-smoke-700">
-          &copy; {{ new Date().getFullYear() }} Comfy Org. All rights reserved.
-        </p>
-
-        <!-- Social icons -->
-        <div class="flex items-center gap-4">
-          <a
-            v-for="social in socials"
-            :key="social.label"
-            :href="social.href"
-            :aria-label="social.label"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-smoke-700 transition-colors hover:text-white"
-          >
-            <span
-              class="inline-block size-5 bg-current"
-              :style="{
-                maskImage: `url(${social.icon})`,
-                maskSize: 'contain',
-                maskRepeat: 'no-repeat',
-                WebkitMaskImage: `url(${social.icon})`,
-                WebkitMaskSize: 'contain',
-                WebkitMaskRepeat: 'no-repeat'
-              }"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>

apps/website/src/components/SiteNav.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const mobileMenuOpen = ref(false)
-const currentPath = ref('')
-
-const navLinks = [
-  { label: 'ENTERPRISE', href: '/enterprise' },
-  { label: 'GALLERY', href: '/gallery' },
-  { label: 'ABOUT', href: '/about' },
-  { label: 'CAREERS', href: '/careers' }
-]
-
-const ctaLinks = [
-  {
-    label: 'COMFY CLOUD',
-    href: 'https://app.comfy.org',
-    primary: true
-  },
-  {
-    label: 'COMFY HUB',
-    href: 'https://hub.comfy.org',
-    primary: false
-  }
-]
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && mobileMenuOpen.value) {
-    mobileMenuOpen.value = false
-  }
-}
-
-function onAfterSwap() {
-  mobileMenuOpen.value = false
-  currentPath.value = window.location.pathname
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  document.addEventListener('astro:after-swap', onAfterSwap)
-  currentPath.value = window.location.pathname
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-  document.removeEventListener('astro:after-swap', onAfterSwap)
-})
-</script>
-
-<template>
-  <nav
-    class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md"
-    aria-label="Main navigation"
-  >
-    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-      <!-- Logo -->
-      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
-        Comfy
-      </a>
-
-      <!-- Desktop nav links -->
-      <div class="hidden items-center gap-8 md:flex">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex items-center gap-3">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-
-      <!-- Mobile hamburger -->
-      <button
-        class="flex flex-col gap-1.5 md:hidden"
-        aria-label="Toggle menu"
-        aria-controls="site-mobile-menu"
-        :aria-expanded="mobileMenuOpen"
-        @click="mobileMenuOpen = !mobileMenuOpen"
-      >
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && 'translate-y-2 rotate-45'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-opacity"
-          :class="mobileMenuOpen && 'opacity-0'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && '-translate-y-2 -rotate-45'"
-        />
-      </button>
-    </div>
-
-    <!-- Mobile menu -->
-    <div
-      v-show="mobileMenuOpen"
-      id="site-mobile-menu"
-      class="border-t border-white/10 bg-black px-6 pb-6 md:hidden"
-    >
-      <div class="flex flex-col gap-4 pt-4">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-          @click="mobileMenuOpen = false"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex flex-col gap-3 pt-2">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-center text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>

apps/website/src/layouts/BaseLayout.astro

@@ -1,86 +0,0 @@
----
-import { ClientRouter } from 'astro:transitions'
-import Analytics from '@vercel/analytics/astro'
-import '../styles/global.css'
-
-interface Props {
-  title: string
-  description?: string
-  ogImage?: string
-}
-
-const {
-  title,
-  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
-  ogImage = '/og-default.png',
-} = Astro.props
-
-const siteBase = Astro.site ?? 'https://comfy.org'
-const canonicalURL = new URL(Astro.url.pathname, siteBase)
-const ogImageURL = new URL(ogImage, siteBase)
-const locale = Astro.currentLocale ?? 'en'
-const gtmId = 'GTM-NP9JM6K7'
-const gtmEnabled = import.meta.env.PROD
----
-
-<!doctype html>
-<html lang={locale}>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content={description} />
-    <title>{title}</title>
-
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="canonical" href={canonicalURL.href} />
-
-    <!-- Open Graph -->
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={ogImageURL.href} />
-    <meta property="og:url" content={canonicalURL.href} />
-    <meta property="og:locale" content={locale} />
-    <meta property="og:site_name" content="Comfy" />
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={ogImageURL.href} />
-
-    <!-- Google Tag Manager -->
-    {gtmEnabled && (
-      <script is:inline define:vars={{ gtmId }}>
-        ;(function (w, d, s, l, i) {
-          w[l] = w[l] || []
-          w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
-          var f = d.getElementsByTagName(s)[0],
-            j = d.createElement(s),
-            dl = l != 'dataLayer' ? '&l=' + l : ''
-          j.async = true
-          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
-          f.parentNode.insertBefore(j, f)
-        })(window, document, 'script', 'dataLayer', gtmId)
-      </script>
-    )}
-
-    <ClientRouter />
-  </head>
-  <body class="bg-black text-white font-inter antialiased">
-    {gtmEnabled && (
-      <noscript>
-        <iframe
-          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
-          height="0"
-          width="0"
-          style="display:none;visibility:hidden"
-        ></iframe>
-      </noscript>
-    )}
-
-    <slot />
-
-    <Analytics />
-  </body>
-</html>

apps/website/tsconfig.json

@@ -5,5 +5,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*", "astro.config.ts"]
+  "include": ["src/**/*", "astro.config.mjs"]
 }

browser_tests/AGENTS.md

@@ -30,24 +30,6 @@ browser_tests/
 └── tests/            - Test files (*.spec.ts)
 ```
 
-## Polling Assertions
-
-Prefer `expect.poll()` over `expect(async () => { ... }).toPass()` when the block contains a single async call with a single assertion. `expect.poll()` is more readable and gives better error messages (shows actual vs expected on failure).
-
-```typescript
-// ✅ Correct — single async call + single assertion
-await expect
-  .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
-  .toBe(0)
-
-// ❌ Avoid — nested expect inside toPass
-await expect(async () => {
-  expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-}).toPass({ timeout: 250 })
-```
-
-Reserve `toPass()` for blocks with multiple assertions or complex async logic that can't be expressed as a single polled value.
-
 ## Gotchas
 
 | Symptom                                            | Cause                                       | Fix                                                                                                     |

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

@@ -1,599 +0,0 @@
-{
-  "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/widgets/image_compare_widget.json

@@ -1,42 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "ImageCompare",
-      "pos": [50, 50],
-      "size": [400, 350],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "a_images",
-          "type": "IMAGE",
-          "link": null
-        },
-        {
-          "name": "b_images",
-          "type": "IMAGE",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "ImageCompare"
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/painter_widget.json

@@ -1,48 +0,0 @@
-{
-  "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

@@ -18,13 +18,13 @@ import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
 import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
+import { ConfirmDialog } from './components/ConfirmDialog'
+import { QueuePanel } from './components/QueuePanel'
 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'
@@ -40,7 +40,6 @@ 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'
 
 dotenvConfig()
 
@@ -57,7 +56,6 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
-  private _assetsTab: AssetsSidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
@@ -81,11 +79,6 @@ 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
@@ -119,48 +112,6 @@ class ComfyMenu {
   }
 }
 
-type KeysOfType<T, Match> = {
-  [K in keyof T]: T[K] extends Match ? K : never
-}[keyof T]
-
-class ConfirmDialog {
-  private readonly root: Locator
-  public readonly delete: Locator
-  public readonly overwrite: Locator
-  public readonly reject: Locator
-  public readonly confirm: Locator
-
-  constructor(public readonly page: Page) {
-    this.root = page.getByRole('dialog')
-    this.delete = this.root.getByRole('button', { name: 'Delete' })
-    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
-    this.reject = this.root.getByRole('button', { name: 'Cancel' })
-    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
-  }
-
-  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
-    const loc = this[locator]
-    await loc.waitFor({ state: 'visible' })
-    await loc.click()
-
-    // Wait for the dialog mask to disappear after confirming
-    const mask = this.page.locator('.p-dialog-mask')
-    const count = await mask.count()
-    if (count > 0) {
-      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
-    }
-
-    // Wait for workflow service to finish if it's busy
-    await this.page.waitForFunction(
-      () =>
-        (window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
-          ?.isBusy === false,
-      undefined,
-      { timeout: 3000 }
-    )
-  }
-}
-
 export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
@@ -199,8 +150,8 @@ export class ComfyPage {
   public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
+  public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
-  public readonly assets: AssetsHelper
   public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
@@ -246,8 +197,8 @@ export class ComfyPage {
     this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
+    this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
-    this.assets = new AssetsHelper(page)
     this.queue = new QueueHelper(page)
   }
 
@@ -462,13 +413,12 @@ export const comfyPageFixture = base.extend<{
 
     await comfyPage.setup()
 
-    const needsPerf =
-      testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
-    if (needsPerf) await comfyPage.perf.init()
+    const isPerf = testInfo.tags.includes('@perf')
+    if (isPerf) await comfyPage.perf.init()
 
     await use(comfyPage)
 
-    if (needsPerf) await comfyPage.perf.dispose()
+    if (isPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)
@@ -521,4 +471,4 @@ export const comfyExpect = expect.extend({
       message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
     }
   }
-})
+})

browser_tests/fixtures/components/ConfirmDialog.ts

@@ -0,0 +1,64 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { WorkspaceStore } from '../../types/globals'
+
+type KeysOfType<T, Match> = {
+  [K in keyof T]: T[K] extends Match ? K : never
+}[keyof T]
+
+/**
+ * Page object for the generic confirm dialog shown via `dialogService.confirm()`.
+ *
+ * Accessible on `comfyPage.confirmDialog`.
+ */
+export class ConfirmDialog {
+  readonly root: Locator
+  readonly delete: Locator
+  readonly overwrite: Locator
+  /** Cancel / reject button */
+  readonly reject: Locator
+  /** Primary confirm button */
+  readonly confirm: Locator
+
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+    this.delete = this.root.getByRole('button', { name: 'Delete' })
+    this.overwrite = this.root.getByRole('button', { name: 'Overwrite' })
+    this.reject = this.root.getByRole('button', { name: 'Cancel' })
+    this.confirm = this.root.getByRole('button', { name: 'Confirm' })
+  }
+
+  async isVisible(): Promise<boolean> {
+    return this.root.isVisible()
+  }
+
+  async waitForVisible(): Promise<void> {
+    await this.root.waitFor({ state: 'visible' })
+  }
+
+  async waitForHidden(): Promise<void> {
+    await this.root.waitFor({ state: 'hidden' })
+  }
+
+  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
+    const loc = this[locator]
+    await loc.waitFor({ state: 'visible' })
+    await loc.click()
+
+    // Wait for the dialog mask to disappear after confirming
+    const mask = this.page.locator('.p-dialog-mask')
+    const count = await mask.count()
+    if (count > 0) {
+      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
+    }
+
+    // Wait for workflow service to finish if it's busy
+    await this.page.waitForFunction(
+      () =>
+        (window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
+          ?.isBusy === false,
+      undefined,
+      { timeout: 3000 }
+    )
+  }
+}

browser_tests/fixtures/components/QueuePanel.ts

@@ -0,0 +1,56 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { comfyExpect as expect } from '../ComfyPage'
+import { TestIds } from '../selectors'
+
+/**
+ * Page object for the "Clear queue history?" confirmation dialog that opens
+ * from the queue panel's history actions menu.
+ */
+export class QueueClearHistoryDialog {
+  readonly root: Locator
+  readonly cancelButton: Locator
+  readonly clearButton: Locator
+  readonly closeButton: Locator
+
+  constructor(public readonly page: Page) {
+    this.root = page.getByRole('dialog')
+    this.cancelButton = this.root.getByRole('button', { name: 'Cancel' })
+    this.clearButton = this.root.getByRole('button', { name: 'Clear' })
+    this.closeButton = this.root.getByLabel('Close')
+  }
+
+  async isVisible(): Promise<boolean> {
+    return this.root.isVisible()
+  }
+
+  async waitForVisible(): Promise<void> {
+    await this.root.waitFor({ state: 'visible' })
+  }
+
+  async waitForHidden(): Promise<void> {
+    await this.root.waitFor({ state: 'hidden' })
+  }
+}
+
+export class QueuePanel {
+  readonly overlayToggle: Locator
+  readonly moreOptionsButton: Locator
+  readonly clearHistoryDialog: QueueClearHistoryDialog
+
+  constructor(readonly page: Page) {
+    this.overlayToggle = page.getByTestId(TestIds.queue.overlayToggle)
+    this.moreOptionsButton = page.getByLabel(/More options/i).first()
+    this.clearHistoryDialog = new QueueClearHistoryDialog(page)
+  }
+
+  async openClearHistoryDialog() {
+    await this.moreOptionsButton.click()
+
+    const clearHistoryAction = this.page.getByTestId(
+      TestIds.queue.clearHistoryAction
+    )
+    await expect(clearHistoryAction).toBeVisible()
+    await clearHistoryAction.click()
+  }
+}

browser_tests/fixtures/components/SidebarTab.ts

@@ -168,32 +168,3 @@ 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

@@ -3,28 +3,17 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'
 
-import { BuilderFooterHelper } from './BuilderFooterHelper'
-import { BuilderSaveAsHelper } from './BuilderSaveAsHelper'
-import { BuilderSelectHelper } from './BuilderSelectHelper'
-import { BuilderStepsHelper } from './BuilderStepsHelper'
-
 export class AppModeHelper {
-  readonly steps: BuilderStepsHelper
-  readonly footer: BuilderFooterHelper
-  readonly saveAs: BuilderSaveAsHelper
-  readonly select: BuilderSelectHelper
-
-  constructor(private readonly comfyPage: ComfyPage) {
-    this.steps = new BuilderStepsHelper(comfyPage)
-    this.footer = new BuilderFooterHelper(comfyPage)
-    this.saveAs = new BuilderSaveAsHelper(comfyPage)
-    this.select = new BuilderSelectHelper(comfyPage)
-  }
+  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
@@ -35,6 +24,42 @@ export class AppModeHelper {
     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(() => {
@@ -93,4 +118,84 @@ export class AppModeHelper {
       .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

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

@@ -1,69 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-import { TestIds } from '../selectors'
-
-export class BuilderFooterHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  get nav(): Locator {
-    return this.page.getByTestId(TestIds.builder.footerNav)
-  }
-
-  get exitButton(): Locator {
-    return this.buttonByName('Exit app builder')
-  }
-
-  get nextButton(): Locator {
-    return this.buttonByName('Next')
-  }
-
-  get backButton(): Locator {
-    return this.buttonByName('Back')
-  }
-
-  get saveButton(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveButton)
-  }
-
-  get saveAsButton(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveAsButton)
-  }
-
-  get saveAsChevron(): Locator {
-    return this.page.getByTestId(TestIds.builder.saveAsChevron)
-  }
-
-  get opensAsPopover(): Locator {
-    return this.page.getByTestId(TestIds.builder.opensAs)
-  }
-
-  private buttonByName(name: string): Locator {
-    return this.nav.getByRole('button', { name })
-  }
-
-  async next() {
-    await this.nextButton.click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async back() {
-    await this.backButton.click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async exitBuilder() {
-    await this.exitButton.click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async openSaveAsFromChevron() {
-    await this.saveAsChevron.click()
-    await this.page.getByRole('menuitem', { name: 'Save as' }).click()
-    await this.comfyPage.nextFrame()
-  }
-}

browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts

@@ -1,78 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-export class BuilderSaveAsHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  /** The save-as dialog (scoped by aria-labelledby). */
-  get dialog(): Locator {
-    return this.page.locator('[aria-labelledby="builder-save"]')
-  }
-
-  /** The post-save success dialog (scoped by aria-labelledby). */
-  get successDialog(): Locator {
-    return this.page.locator('[aria-labelledby="builder-save-success"]')
-  }
-
-  get title(): Locator {
-    return this.dialog.getByText('Save as')
-  }
-
-  get radioGroup(): Locator {
-    return this.dialog.getByRole('radiogroup')
-  }
-
-  get nameInput(): Locator {
-    return this.dialog.getByRole('textbox')
-  }
-
-  viewTypeRadio(viewType: 'App' | 'Node graph'): Locator {
-    return this.dialog.getByRole('radio', { name: viewType })
-  }
-
-  get saveButton(): Locator {
-    return this.dialog.getByRole('button', { name: 'Save' })
-  }
-
-  get successMessage(): Locator {
-    return this.successDialog.getByText('Successfully saved')
-  }
-
-  get viewAppButton(): Locator {
-    return this.successDialog.getByRole('button', { name: 'View app' })
-  }
-
-  get closeButton(): Locator {
-    return this.successDialog
-      .getByRole('button', { name: 'Close', exact: true })
-      .filter({ hasText: 'Close' })
-  }
-
-  /** The X button to dismiss the success dialog without any action. */
-  get dismissButton(): Locator {
-    return this.successDialog.locator('button.p-dialog-close-button')
-  }
-
-  get exitBuilderButton(): Locator {
-    return this.successDialog.getByRole('button', { name: 'Exit builder' })
-  }
-
-  get overwriteDialog(): Locator {
-    return this.page.getByRole('dialog', { name: 'Overwrite existing file?' })
-  }
-
-  get overwriteButton(): Locator {
-    return this.overwriteDialog.getByRole('button', { name: 'Overwrite' })
-  }
-
-  async fillAndSave(workflowName: string, viewType: 'App' | 'Node graph') {
-    await this.nameInput.fill(workflowName)
-    await this.viewTypeRadio(viewType).click()
-    await this.saveButton.click()
-  }
-}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -1,139 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-import type { NodeReference } from '../utils/litegraphUtils'
-import { TestIds } from '../selectors'
-
-export class BuilderSelectHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  /**
-   * Get the actions menu trigger for a builder IoItem (input-select sidebar).
-   * @param title The widget title shown in the IoItem.
-   */
-  getInputItemMenu(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
-      .filter({
-        has: this.page
-          .getByTestId(TestIds.builder.ioItemTitle)
-          .getByText(title, { exact: true })
-      })
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the preview/arrange sidebar.
-   * @param ariaLabel The aria-label on the widget row, e.g. "seed — KSampler".
-   */
-  getPreviewWidgetMenu(ariaLabel: string): Locator {
-    return this.page
-      .getByLabel(ariaLabel, { exact: true })
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /** Delete a builder input via its actions menu. */
-  async deleteInput(title: string) {
-    const menu = this.getInputItemMenu(title)
-    await menu.click()
-    await this.page.getByText('Delete', { exact: true }).click()
-    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 renameInputViaMenu(title: string, newName: string) {
-    const menu = this.getInputItemMenu(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 for inline editing.
-   * @param title The current widget title shown in the IoItem.
-   * @param newName The new name to assign.
-   */
-  async renameInput(title: string, newName: string) {
-    const titleEl = this.page
-      .getByTestId(TestIds.builder.ioItemTitle)
-      .getByText(title, { exact: true })
-    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()
-  }
-
-  /**
-   * Rename a widget via its actions popover (works in preview and app mode).
-   * @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()
-  }
-
-  /** Center on a node and click its first widget to select it as input. */
-  async selectInputWidget(node: NodeReference) {
-    await this.comfyPage.canvasOps.setScale(1)
-    await node.centerOnNode()
-
-    const widgetRef = await node.getWidget(0)
-    const widgetPos = await widgetRef.getPosition()
-    const titleHeight = await this.page.evaluate(
-      () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-    )
-    await this.page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
-    await this.comfyPage.nextFrame()
-  }
-
-  /** Click the first SaveImage/PreviewImage node on the canvas. */
-  async selectOutputNode() {
-    const saveImageNodeId = await this.page.evaluate(() => {
-      const node = window.app!.rootGraph.nodes.find(
-        (n: { type?: string }) =>
-          n.type === 'SaveImage' || n.type === 'PreviewImage'
-      )
-      return node ? String(node.id) : null
-    })
-    if (!saveImageNodeId)
-      throw new Error('SaveImage/PreviewImage node not found')
-    const saveImageRef =
-      await this.comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
-    await saveImageRef.centerOnNode()
-
-    const canvasBox = await this.page.locator('#graph-canvas').boundingBox()
-    if (!canvasBox) throw new Error('Canvas not found')
-    await this.page.mouse.click(
-      canvasBox.x + canvasBox.width / 2,
-      canvasBox.y + canvasBox.height / 2
-    )
-    await this.comfyPage.nextFrame()
-  }
-}

browser_tests/fixtures/helpers/BuilderStepsHelper.ts

@@ -1,30 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-export class BuilderStepsHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  get toolbar(): Locator {
-    return this.page.getByRole('navigation', { name: 'App Builder' })
-  }
-
-  async goToInputs() {
-    await this.toolbar.getByRole('button', { name: 'Inputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async goToOutputs() {
-    await this.toolbar.getByRole('button', { name: 'Outputs' }).click()
-    await this.comfyPage.nextFrame()
-  }
-
-  async goToPreview() {
-    await this.toolbar.getByRole('button', { name: 'Preview' }).click()
-    await this.comfyPage.nextFrame()
-  }
-}

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -169,39 +169,6 @@ export class CanvasHelper {
     })
   }
 
-  /**
-   * Pan the canvas back and forth in a sweep pattern using middle-mouse drag.
-   * Each step advances one animation frame, giving per-frame measurement
-   * granularity for performance tests.
-   */
-  async panSweep(options?: {
-    steps?: number
-    dx?: number
-    dy?: number
-  }): Promise<void> {
-    const { steps = 120, dx = 8, dy = 3 } = options ?? {}
-    const box = await this.canvas.boundingBox()
-    if (!box) throw new Error('Canvas bounding box not available')
-
-    const centerX = box.x + box.width / 2
-    const centerY = box.y + box.height / 2
-    await this.page.mouse.move(centerX, centerY)
-    await this.page.mouse.down({ button: 'middle' })
-
-    // Sweep forward
-    for (let i = 0; i < steps; i++) {
-      await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
-      await this.nextFrame()
-    }
-    // Sweep back
-    for (let i = steps; i > 0; i--) {
-      await this.page.mouse.move(centerX + i * dx, centerY + i * dy)
-      await this.nextFrame()
-    }
-
-    await this.page.mouse.up({ button: 'middle' })
-  }
-
   async disconnectEdge(): Promise<void> {
     await this.dragAndDrop(
       DefaultGraphPositions.clipTextEncodeNode1InputSlot,

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test'
-import type { ConsoleMessage, Locator, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
 import type {
   CanvasPointerEvent,
   Subgraph
 } from '@/lib/litegraph/src/litegraph'
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'
@@ -414,138 +413,4 @@ export class SubgraphHelper {
       return window.app!.canvas.graph!.nodes?.length || 0
     })
   }
-
-  async getSlotCount(type: 'input' | 'output'): Promise<number> {
-    return this.page.evaluate((slotType: 'input' | 'output') => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph)) return 0
-      return graph[`${slotType}s`]?.length ?? 0
-    }, type)
-  }
-
-  async getSlotLabel(
-    type: 'input' | 'output',
-    index = 0
-  ): Promise<string | null> {
-    return this.page.evaluate(
-      ([slotType, idx]) => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        const slot = graph[`${slotType}s`]?.[idx]
-        return slot?.label ?? slot?.name ?? null
-      },
-      [type, index] as const
-    )
-  }
-
-  async removeSlot(type: 'input' | 'output', slotName?: string): Promise<void> {
-    if (type === 'input') {
-      await this.rightClickInputSlot(slotName)
-    } else {
-      await this.rightClickOutputSlot(slotName)
-    }
-    await this.comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-    await this.comfyPage.nextFrame()
-  }
-
-  async findSubgraphNodeId(): Promise<string> {
-    const id = await this.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const node = graph.nodes.find(
-        (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-      )
-      return node ? String(node.id) : null
-    })
-    if (!id) throw new Error('No subgraph node found in current graph')
-    return id
-  }
-
-  async serializeAndReload(): Promise<void> {
-    const serialized = await this.page.evaluate(() =>
-      window.app!.graph!.serialize()
-    )
-    await this.page.evaluate(
-      (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
-      serialized as ComfyWorkflowJSON
-    )
-    await this.comfyPage.nextFrame()
-  }
-
-  async convertDefaultKSamplerToSubgraph(): Promise<NodeReference> {
-    await this.comfyPage.workflow.loadWorkflow('default')
-    const ksampler = await this.comfyPage.nodeOps.getNodeRefById('3')
-    await ksampler.click('title')
-    const subgraphNode = await ksampler.convertToSubgraph()
-    await this.comfyPage.nextFrame()
-    return subgraphNode
-  }
-
-  async packAllInteriorNodes(hostNodeId: string): Promise<void> {
-    await this.comfyPage.vueNodes.enterSubgraph(hostNodeId)
-    await this.comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-    await this.comfyPage.nextFrame()
-    await this.comfyPage.canvas.click()
-    await this.comfyPage.canvas.press('Control+a')
-    await this.comfyPage.nextFrame()
-    await this.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      canvas.graph!.convertToSubgraph(canvas.selectedItems)
-    })
-    await this.comfyPage.nextFrame()
-    await this.exitViaBreadcrumb()
-    await this.comfyPage.canvas.click()
-    await this.comfyPage.nextFrame()
-  }
-
-  static 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)
-  }
-
-  static async expectWidgetBelowHeader(
-    nodeLocator: Locator,
-    widgetLocator: Locator
-  ): Promise<void> {
-    const headerBox = await nodeLocator
-      .locator('[data-testid^="node-header-"]')
-      .boundingBox()
-    const widgetBox = await widgetLocator.boundingBox()
-    if (!headerBox || !widgetBox)
-      throw new Error('Header or widget bounding box not found')
-    expect(widgetBox.y).toBeGreaterThan(headerBox.y + headerBox.height)
-  }
-
-  static collectConsoleWarnings(
-    page: Page,
-    patterns: string[] = [
-      'No link found',
-      'Failed to resolve legacy -1',
-      'No inner link found'
-    ]
-  ): { warnings: string[]; dispose: () => void } {
-    const warnings: string[] = []
-    const handler = (msg: ConsoleMessage) => {
-      const text = msg.text()
-      if (patterns.some((p) => text.includes(p))) {
-        warnings.push(text)
-      }
-    }
-    page.on('console', handler)
-    return { warnings, dispose: () => page.off('console', handler) }
-  }
 }

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -1,6 +1,5 @@
 import { readFileSync } from 'fs'
 
-import type { AppMode } from '../../../src/composables/useAppMode'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
@@ -105,40 +104,6 @@ export class WorkflowHelper {
     })
   }
 
-  async getActiveWorkflowPath(): Promise<string | undefined> {
-    return this.comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.path
-    })
-  }
-
-  async getActiveWorkflowActiveAppMode(): Promise<AppMode | null | undefined> {
-    return this.comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.activeMode
-    })
-  }
-
-  async getActiveWorkflowInitialMode(): Promise<AppMode | null | undefined> {
-    return this.comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.initialMode
-    })
-  }
-
-  async getLinearModeFromGraph(): Promise<boolean | undefined> {
-    return this.comfyPage.page.evaluate(() => {
-      return window.app!.rootGraph.extra?.linearMode as boolean | undefined
-    })
-  }
-
-  async getOpenWorkflowCount(): Promise<number> {
-    return this.comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow.workflows
-        .length
-    })
-  }
-
   async isCurrentWorkflowModified(): Promise<boolean | undefined> {
     return this.comfyPage.page.evaluate(() => {
       return (window.app!.extensionManager as WorkspaceStore).workflow

browser_tests/fixtures/selectors.ts

@@ -20,12 +20,7 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-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'
+    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
   },
   dialogs: {
     settings: 'settings-dialog',
@@ -34,8 +29,6 @@ export const TestIds = {
     confirm: 'confirm-dialog',
     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',
@@ -77,14 +70,9 @@ export const TestIds = {
     subgraphEnterButton: 'subgraph-enter-button'
   },
   builder: {
-    footerNav: 'builder-footer-nav',
-    saveButton: 'builder-save-button',
-    saveAsButton: 'builder-save-as-button',
-    saveAsChevron: 'builder-save-as-chevron',
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
-    widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as'
+    widgetActionsMenu: 'widget-actions-menu'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -96,6 +84,10 @@ export const TestIds = {
   user: {
     currentUserIndicator: 'current-user-indicator'
   },
+  queue: {
+    overlayToggle: 'queue-overlay-toggle',
+    clearHistoryAction: 'clear-history-action'
+  },
   errors: {
     imageLoadError: 'error-loading-image',
     videoLoadError: 'error-loading-video'
@@ -124,4 +116,5 @@ export type TestIdValue =
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.queue)[keyof typeof TestIds.queue]
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -392,11 +392,6 @@ export class NodeReference {
     await this.comfyPage.clipboard.copy()
     await this.comfyPage.nextFrame()
   }
-  async delete(): Promise<void> {
-    await this.click('title')
-    await this.comfyPage.page.keyboard.press('Delete')
-    await this.comfyPage.nextFrame()
-  }
   async connectWidget(
     originSlotIndex: number,
     targetNode: NodeReference,

browser_tests/helpers/builderTestUtils.ts

@@ -1,78 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-
-import { fitToViewInstant } from './fitToView'
-import { getPromotedWidgetNames } from './promotedWidgets'
-
-/**
- * Enter builder on the default workflow and select I/O.
- *
- * Loads the default workflow, optionally transforms it (e.g. convert a node
- * to subgraph), then enters builder mode and selects inputs + outputs.
- *
- * @param comfyPage - The page fixture.
- * @param getInputNode - Returns the node to click for input selection.
- *   Receives the KSampler node ref and can transform the graph before
- *   returning the target node. Defaults to using KSampler directly.
- * @returns The node used for input selection.
- */
-export async function setupBuilder(
-  comfyPage: ComfyPage,
-  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
-): Promise<NodeReference> {
-  const { appMode } = comfyPage
-  await comfyPage.workflow.loadWorkflow('default')
-
-  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
-
-  await fitToViewInstant(comfyPage)
-  await appMode.enterBuilder()
-  await appMode.steps.goToInputs()
-  await appMode.select.selectInputWidget(inputNode)
-
-  await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode()
-
-  return inputNode
-}
-
-/**
- * Convert the KSampler to a subgraph, then enter builder with I/O selected.
- *
- * Returns the subgraph node reference for further interaction.
- */
-export async function setupSubgraphBuilder(
-  comfyPage: ComfyPage
-): Promise<NodeReference> {
-  return setupBuilder(comfyPage, async (ksampler) => {
-    await ksampler.click('title')
-    const subgraphNode = await ksampler.convertToSubgraph()
-    await comfyPage.nextFrame()
-
-    const promotedNames = await getPromotedWidgetNames(
-      comfyPage,
-      String(subgraphNode.id)
-    )
-    expect(promotedNames).toContain('seed')
-
-    return subgraphNode
-  })
-}
-
-/** Save the workflow, reopen it, and enter app mode. */
-export 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()
-}

browser_tests/helpers/perfReporter.ts

@@ -12,38 +12,6 @@ export interface PerfReport {
 
 const TEMP_DIR = join('test-results', 'perf-temp')
 
-type MeasurementField = keyof PerfMeasurement
-
-const FIELD_FORMATTERS: Record<string, (m: PerfMeasurement) => string> = {
-  styleRecalcs: (m) => `${m.styleRecalcs} recalcs`,
-  layouts: (m) => `${m.layouts} layouts`,
-  taskDurationMs: (m) => `${m.taskDurationMs.toFixed(1)}ms task`,
-  layoutDurationMs: (m) => `${m.layoutDurationMs.toFixed(1)}ms layout`,
-  frameDurationMs: (m) => `${m.frameDurationMs.toFixed(1)}ms/frame`,
-  totalBlockingTimeMs: (m) => `TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`,
-  durationMs: (m) => `${m.durationMs.toFixed(0)}ms total`,
-  heapDeltaBytes: (m) => `heap Δ${(m.heapDeltaBytes / 1024).toFixed(0)}KB`,
-  domNodes: (m) => `DOM Δ${m.domNodes}`,
-  heapUsedBytes: (m) => `heap ${(m.heapUsedBytes / 1024 / 1024).toFixed(1)}MB`
-}
-
-/**
- * Log a perf measurement to the console in a consistent format.
- * Fields are formatted automatically based on their type.
- */
-export function logMeasurement(
-  label: string,
-  m: PerfMeasurement,
-  fields: MeasurementField[]
-) {
-  const parts = fields.map((f) => {
-    const formatter = FIELD_FORMATTERS[f]
-    if (formatter) return formatter(m)
-    return `${f}=${m[f]}`
-  })
-  console.log(`${label}: ${parts.join(', ')}`)
-}
-
 export function recordMeasurement(m: PerfMeasurement) {
   mkdirSync(TEMP_DIR, { recursive: true })
   const filename = `${m.name}-${Date.now()}.json`

browser_tests/helpers/subgraphTestUtils.ts

@@ -0,0 +1,45 @@
+import type { Page } from '@playwright/test'
+
+import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
+import { isSubgraph } from '../../src/utils/typeGuardUtil'
+
+/**
+ * Assertion helper for tests where being in a subgraph is a precondition.
+ * Throws a clear error if the graph is not a Subgraph.
+ */
+export function assertSubgraph(
+  graph: LGraph | Subgraph | null | undefined
+): asserts graph is Subgraph {
+  if (!isSubgraph(graph)) {
+    throw new Error(
+      'Expected to be in a subgraph context, but graph is not a Subgraph'
+    )
+  }
+}
+
+/**
+ * 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/appModeWidgetRename.spec.ts

@@ -1,11 +1,89 @@
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import {
-  saveAndReopenInAppMode,
-  setupSubgraphBuilder
-} from '../helpers/builderTestUtils'
+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 }) => {
@@ -29,14 +107,14 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await setupSubgraphBuilder(comfyPage)
 
     // Go back to inputs step where IoItems are shown
-    await appMode.steps.goToInputs()
+    await appMode.goToInputs()
 
-    const menu = appMode.select.getInputItemMenu('seed')
+    const menu = appMode.getBuilderInputItemMenu('seed')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.select.renameInputViaMenu('seed', 'Builder Input Seed')
+    await appMode.renameBuilderInputViaMenu('seed', 'Builder Input Seed')
 
     // Verify in app mode after save/reload
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-input-menu`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
@@ -52,11 +130,11 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
-    await appMode.steps.goToInputs()
+    await appMode.goToInputs()
 
-    await appMode.select.renameInput('seed', 'Dblclick Seed')
+    await appMode.renameBuilderInput('seed', 'Dblclick Seed')
 
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-input-dblclick`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
@@ -68,14 +146,14 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     const { appMode } = comfyPage
     await setupSubgraphBuilder(comfyPage)
 
-    await appMode.steps.goToPreview()
+    await appMode.goToPreview()
 
-    const menu = appMode.select.getPreviewWidgetMenu('seed — New Subgraph')
+    const menu = appMode.getBuilderPreviewWidgetMenu('seed — New Subgraph')
     await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.select.renameWidget(menu, 'Preview Seed')
+    await appMode.renameWidget(menu, 'Preview Seed')
 
     // Verify in app mode after save/reload
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
     const workflowName = `${new Date().getTime()} builder-preview`
     await saveAndReopenInAppMode(comfyPage, workflowName)
 
@@ -88,13 +166,13 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
     await setupSubgraphBuilder(comfyPage)
 
     // Enter app mode from builder
-    await appMode.footer.exitBuilder()
+    await appMode.exitBuilder()
     await appMode.toggleAppMode()
 
     await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
 
     const menu = appMode.getAppModeWidgetMenu('seed')
-    await appMode.select.renameWidget(menu, 'App Mode Seed')
+    await appMode.renameWidget(menu, 'App Mode Seed')
 
     await expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()
 

browser_tests/tests/browserTabTitle.spec.ts

@@ -19,26 +19,24 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
         .toBe(`*${workflowName} - ComfyUI`)
     })
 
-    test('Can display workflow name with unsaved changes', async ({
+    // Failing on CI
+    // Cannot reproduce locally
+    test.skip('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
-      const workflowName = `test-${Date.now()}`
-      await comfyPage.menu.topbar.saveWorkflow(workflowName)
-      await expect
-        .poll(() => comfyPage.page.title())
-        .toBe(`${workflowName} - ComfyUI`)
-
-      await comfyPage.page.evaluate(async () => {
-        const node = window.app!.graph!.nodes[0]
-        node.pos[0] += 50
-        window.app!.graph!.setDirtyCanvas(true, true)
-        ;(
-          window.app!.extensionManager as WorkspaceStore
-        ).workflow.activeWorkflow?.changeTracker?.checkState()
+      const workflowName = await comfyPage.page.evaluate(async () => {
+        return (window.app!.extensionManager as WorkspaceStore).workflow
+          .activeWorkflow?.filename
       })
-      await expect
-        .poll(() => comfyPage.page.title())
-        .toBe(`*${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+
+      await comfyPage.menu.topbar.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
+
+      const textBox = comfyPage.widgetTextBox
+      await textBox.fill('Hello World')
+      await comfyPage.canvasOps.clickEmptySpace()
+      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {

browser_tests/tests/builderSaveFlow.spec.ts

@@ -1,371 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import { setupBuilder } from '../helpers/builderTestUtils'
-import { fitToViewInstant } from '../helpers/fitToView'
-
-/**
- * Open the save-as dialog, fill name + view type, click save,
- * and wait for the success dialog.
- */
-async function builderSaveAs(
-  appMode: AppModeHelper,
-  workflowName: string,
-  viewType: 'App' | 'Node graph'
-) {
-  await appMode.footer.saveAsButton.click()
-  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-}
-
-/**
- * Load a different workflow, then reopen the named one from the sidebar.
- * Caller must ensure the page is in graph mode (not builder or app mode)
- * before calling.
- */
-async function openWorkflowFromSidebar(comfyPage: ComfyPage, name: string) {
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.nextFrame()
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(name).dblclick()
-  await comfyPage.nextFrame()
-
-  await expect(async () => {
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain(name)
-  }).toPass({ timeout: 5000 })
-}
-
-/**
- * After a first save, open save-as again from the chevron,
- * fill name + view type, and save.
- */
-async function reSaveAs(
-  appMode: AppModeHelper,
-  workflowName: string,
-  viewType: 'App' | 'Node graph'
-) {
-  await appMode.footer.openSaveAsFromChevron()
-  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-}
-
-test.describe('Builder save flow', { 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')
-    await comfyPage.settings.setSetting(
-      'Comfy.AppBuilder.VueNodeSwitchDismissed',
-      true
-    )
-  })
-
-  test('Save as dialog appears for unsaved workflow', async ({ comfyPage }) => {
-    const { saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-    await expect(saveAs.nameInput).toBeVisible()
-    await expect(saveAs.title).toBeVisible()
-    await expect(saveAs.radioGroup).toBeVisible()
-  })
-
-  test('Save as dialog allows entering filename and saving', async ({
-    comfyPage
-  }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} builder-save`, 'App')
-  })
-
-  test('Save as dialog disables save when filename is empty', async ({
-    comfyPage
-  }) => {
-    const { saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-    await saveAs.nameInput.fill('')
-    await expect(saveAs.saveButton).toBeDisabled()
-  })
-
-  test('View type can be toggled in save-as dialog', async ({ comfyPage }) => {
-    const { saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
-
-    const appRadio = saveAs.viewTypeRadio('App')
-    await expect(appRadio).toHaveAttribute('aria-checked', 'true')
-
-    const graphRadio = saveAs.viewTypeRadio('Node graph')
-    await graphRadio.click()
-    await expect(graphRadio).toHaveAttribute('aria-checked', 'true')
-    await expect(appRadio).toHaveAttribute('aria-checked', 'false')
-  })
-
-  test('Builder step navigation works correctly', async ({ comfyPage }) => {
-    const { footer } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await comfyPage.appMode.steps.goToInputs()
-
-    await expect(footer.backButton).toBeDisabled()
-    await expect(footer.nextButton).toBeEnabled()
-
-    await footer.next()
-    await expect(footer.backButton).toBeEnabled()
-
-    await footer.next()
-    await expect(footer.nextButton).toBeDisabled()
-  })
-
-  test('Escape key exits builder mode', async ({ comfyPage }) => {
-    await setupBuilder(comfyPage)
-
-    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  test('Exit builder button exits builder mode', async ({ comfyPage }) => {
-    await setupBuilder(comfyPage)
-
-    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()
-    await comfyPage.appMode.footer.exitBuilder()
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  test('Save button directly saves for previously saved workflow', async ({
-    comfyPage
-  }) => {
-    const { footer, saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} direct-save`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    // Modify the workflow so the save button becomes enabled
-    await comfyPage.appMode.steps.goToInputs()
-    await comfyPage.appMode.select.deleteInput('seed')
-    await expect(footer.saveButton).toBeEnabled({ timeout: 5000 })
-
-    await footer.saveButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(saveAs.dialog).not.toBeVisible({ timeout: 2000 })
-    await expect(footer.saveButton).toBeDisabled()
-  })
-
-  test('Split button chevron opens save-as for saved workflow', async ({
-    comfyPage
-  }) => {
-    const { footer, saveAs } = comfyPage.appMode
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} split-btn`, 'App')
-    await saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    await footer.openSaveAsFromChevron()
-
-    await expect(saveAs.title).toBeVisible({ timeout: 5000 })
-    await expect(saveAs.nameInput).toBeVisible()
-  })
-
-  test('Connect output popover appears when no outputs selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await fitToViewInstant(comfyPage)
-    await comfyPage.appMode.enterBuilder()
-
-    await comfyPage.appMode.footer.saveAsButton.click()
-
-    await expect(
-      comfyPage.page.getByText('Connect an output', { exact: false })
-    ).toBeVisible({ timeout: 5000 })
-  })
-
-  test('save as app produces correct extension and linearMode', async ({
-    comfyPage
-  }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-ext`, 'App')
-
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain('.app.json')
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(true)
-  })
-
-  test('save as node graph produces correct extension and linearMode', async ({
-    comfyPage
-  }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(
-      comfyPage.appMode,
-      `${Date.now()} graph-ext`,
-      'Node graph'
-    )
-
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toMatch(/\.json$/)
-    expect(path).not.toContain('.app.json')
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(false)
-  })
-
-  test('save as app View App button enters app mode', async ({ comfyPage }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-view`, 'App')
-
-    await comfyPage.appMode.saveAs.viewAppButton.click()
-    await comfyPage.nextFrame()
-
-    expect(await comfyPage.workflow.getActiveWorkflowActiveAppMode()).toBe(
-      'app'
-    )
-  })
-
-  test('save as node graph Exit builder exits builder mode', async ({
-    comfyPage
-  }) => {
-    await setupBuilder(comfyPage)
-    await builderSaveAs(
-      comfyPage.appMode,
-      `${Date.now()} graph-exit`,
-      'Node graph'
-    )
-
-    await comfyPage.appMode.saveAs.exitBuilderButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
-  })
-
-  test('save as with different mode does not modify the original workflow', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage)
-
-    const originalName = `${Date.now()} original`
-    await builderSaveAs(appMode, originalName, 'App')
-    const originalPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(originalPath).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    // Re-save as node graph — creates a copy
-    await reSaveAs(appMode, `${Date.now()} copy`, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const newPath = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(newPath).not.toBe(originalPath)
-    expect(newPath).not.toContain('.app.json')
-
-    // Dismiss success dialog, exit app mode, reopen the original
-    await appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await appMode.toggleAppMode()
-    await openWorkflowFromSidebar(comfyPage, originalName)
-
-    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
-    expect(linearMode).toBe(true)
-  })
-
-  test('save as with same name and same mode overwrites in place', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    const name = `${Date.now()} overwrite`
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(appMode, name, 'App')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
-
-    await reSaveAs(appMode, name, 'App')
-
-    await expect(appMode.saveAs.overwriteDialog).toBeVisible({ timeout: 5000 })
-    await appMode.saveAs.overwriteButton.click()
-
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).toBe(pathAfterFirst)
-  })
-
-  test('save as with same name but different mode creates a new file', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    const name = `${Date.now()} mode-change`
-    await setupBuilder(comfyPage)
-
-    await builderSaveAs(appMode, name, 'App')
-    const pathAfterFirst = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterFirst).toContain('.app.json')
-    await appMode.saveAs.closeButton.click()
-    await comfyPage.nextFrame()
-
-    await reSaveAs(appMode, name, 'Node graph')
-    await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
-
-    const pathAfterSecond = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(pathAfterSecond).not.toBe(pathAfterFirst)
-    expect(pathAfterSecond).toMatch(/\.json$/)
-    expect(pathAfterSecond).not.toContain('.app.json')
-  })
-
-  test('save as app workflow reloads in app mode', async ({ comfyPage }) => {
-    const name = `${Date.now()} reload-app`
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, name, 'App')
-    await comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await comfyPage.appMode.footer.exitBuilder()
-
-    await openWorkflowFromSidebar(comfyPage, name)
-
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).toBe('app')
-  })
-
-  test('save as node graph workflow reloads in node graph mode', async ({
-    comfyPage
-  }) => {
-    const name = `${Date.now()} reload-graph`
-    await setupBuilder(comfyPage)
-    await builderSaveAs(comfyPage.appMode, name, 'Node graph')
-    await comfyPage.appMode.saveAs.dismissButton.click()
-    await comfyPage.nextFrame()
-    await comfyPage.appMode.toggleAppMode()
-
-    await openWorkflowFromSidebar(comfyPage, name)
-
-    const mode = await comfyPage.workflow.getActiveWorkflowInitialMode()
-    expect(mode).toBe('graph')
-  })
-})

browser_tests/tests/changeTrackerLoadGuard.spec.ts

@@ -1,66 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-import type { WorkspaceStore } from '../types/globals'
-
-test.describe(
-  'Change Tracker - isLoadingGraph guard',
-  { tag: '@workflow' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.workflow.setupWorkflowsDirectory({})
-    })
-
-    test('Prevents checkState from corrupting workflow state during tab switch', async ({
-      comfyPage
-    }) => {
-      // Tab 0: default workflow (7 nodes)
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
-
-      // Save tab 0 so it has a unique name for tab switching
-      await comfyPage.menu.topbar.saveWorkflow('workflow-a')
-
-      // Register an extension that forces checkState during graph loading.
-      // This simulates the bug scenario where a user clicks during graph loading
-      // which triggers a checkState call on the wrong graph, corrupting the activeState.
-      await comfyPage.page.evaluate(() => {
-        window.app!.registerExtension({
-          name: 'TestCheckStateDuringLoad',
-          afterConfigureGraph() {
-            const workflow = (window.app!.extensionManager as WorkspaceStore)
-              .workflow.activeWorkflow
-            if (!workflow) throw new Error('No workflow found')
-            // Bypass the guard to reproduce the corruption bug:
-            // ; (workflow.changeTracker.constructor as unknown as { isLoadingGraph: boolean }).isLoadingGraph = false
-
-            // Simulate the user clicking during graph loading
-            workflow.changeTracker.checkState()
-          }
-        })
-      })
-
-      // Create tab 1: blank workflow (0 nodes)
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-
-      // Switch back to tab 0 (workflow-a).
-      const tab0 = comfyPage.menu.topbar.getWorkflowTab('workflow-a')
-      await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
-
-      // switch to blank tab and back to verify no corruption
-      const tab1 = comfyPage.menu.topbar.getWorkflowTab('Unsaved Workflow')
-      await tab1.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-
-      // switch again and verify no corruption
-      await tab0.click()
-      await comfyPage.nextFrame()
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(7)
-    })
-  }
-)

browser_tests/tests/confirmDialogTextWrap.spec.ts

@@ -18,15 +18,13 @@ test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
         .catch(() => {})
     }, longFilename)
 
-    const dialog = comfyPage.page.getByRole('dialog')
-    await expect(dialog).toBeVisible()
+    const dialog = comfyPage.confirmDialog
+    await dialog.waitForVisible()
 
-    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
-    await expect(confirmButton).toBeVisible()
-    await expect(confirmButton).toBeInViewport()
+    await expect(dialog.confirm).toBeVisible()
+    await expect(dialog.confirm).toBeInViewport()
 
-    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
-    await expect(cancelButton).toBeVisible()
-    await expect(cancelButton).toBeInViewport()
+    await expect(dialog.reject).toBeVisible()
+    await expect(dialog.reject).toBeInViewport()
   })
-})
+})

browser_tests/tests/containAudit.spec.ts

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

@@ -28,11 +28,8 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/missing.*installed/i)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
   })
 
   test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
@@ -45,11 +42,8 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/missing.*installed/i)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
 
     // Click "See Errors" to open the errors tab and verify subgraph node content
     await errorOverlay
@@ -108,7 +102,7 @@ test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
   await expect(errorOverlay).toBeVisible()
 
   // Dismiss the error overlay
-  await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+  await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
   await expect(errorOverlay).not.toBeVisible()
 
   // Make a change to the graph by moving a node
@@ -216,11 +210,8 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/required model.*missing/i)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
+    await expect(missingModelsTitle).toBeVisible()
   })
 
   test('Should show missing models from node properties', async ({
@@ -235,11 +226,8 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const messages = errorOverlay.getByTestId(
-      TestIds.dialogs.errorOverlayMessages
-    )
-    await expect(messages).toBeVisible()
-    await expect(messages).toHaveText(/required model.*missing/i)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
+    await expect(missingModelsTitle).toBeVisible()
   })
 
   test('Should not show missing models when widget values have changed', async ({
@@ -252,9 +240,28 @@ test.describe('Missing models in Error Tab', () => {
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlayMessages)
-    ).not.toBeVisible()
+    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
+  })
+
+  // Flaky test after parallelization
+  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
+  test.skip('Should download missing model when clicking download button', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('missing/missing_models')
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+
+    const downloadAllButton = comfyPage.page.getByText('Download all')
+    await expect(downloadAllButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await downloadAllButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
 })
 

browser_tests/tests/dialogs/queueClearHistory.spec.ts

@@ -0,0 +1,137 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../../fixtures/ComfyPage'
+
+test.describe('QueueClearHistoryDialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+
+    // Expand the queue overlay so the JobHistoryActionsMenu is visible
+    await comfyPage.queuePanel.overlayToggle.click()
+  })
+
+  test('Dialog opens from queue panel history actions menu', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    await expect(comfyPage.queuePanel.clearHistoryDialog.root).toBeVisible()
+  })
+
+  test('Dialog shows confirmation message with title, description, and assets note', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.queuePanel.clearHistoryDialog
+    await expect(dialog.root).toBeVisible()
+
+    // Verify title
+    await expect(
+      dialog.root.getByText('Clear your job queue history?')
+    ).toBeVisible()
+
+    // Verify description
+    await expect(
+      dialog.root.getByText(
+        'All the finished or failed jobs below will be removed from this Job queue panel.'
+      )
+    ).toBeVisible()
+
+    // Verify assets note (locale uses Unicode RIGHT SINGLE QUOTATION MARK \u2019)
+    await expect(
+      dialog.root.getByText(
+        'Assets generated by these jobs won\u2019t be deleted and can always be viewed from the assets panel.'
+      )
+    ).toBeVisible()
+  })
+
+  test('Cancel button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.queuePanel.clearHistoryDialog
+    await expect(dialog.root).toBeVisible()
+
+    // Intercept the clear API call — it should NOT be called
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.cancelButton.click()
+
+    await expect(dialog.root).not.toBeVisible()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Close (X) button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.queuePanel.clearHistoryDialog
+    await expect(dialog.root).toBeVisible()
+
+    // Intercept the clear API call — it should NOT be called
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.closeButton.click()
+
+    await expect(dialog.root).not.toBeVisible()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Confirm clears queue history and closes dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.queuePanel.clearHistoryDialog
+    await expect(dialog.root).toBeVisible()
+
+    // Intercept the clear API call to verify it is made
+    const clearPromise = comfyPage.page.waitForRequest(
+      (req) => req.url().includes('/api/history') && req.method() === 'POST'
+    )
+
+    await dialog.clearButton.click()
+
+    // Verify the API call was made
+    const request = await clearPromise
+    expect(request.postDataJSON()).toEqual({ clear: true })
+
+    await expect(dialog.root).not.toBeVisible()
+  })
+
+  test('Dialog state resets after close and reopen', async ({ comfyPage }) => {
+    // Open and cancel
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    const dialog = comfyPage.queuePanel.clearHistoryDialog
+    await expect(dialog.root).toBeVisible()
+    await dialog.cancelButton.click()
+    await expect(dialog.root).not.toBeVisible()
+
+    // Reopen — dialog should be fresh (Clear button enabled, not stuck)
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    await expect(dialog.root).toBeVisible()
+
+    await expect(dialog.clearButton).toBeVisible()
+    await expect(dialog.clearButton).toBeEnabled()
+  })
+})

browser_tests/tests/domWidget.spec.ts

@@ -55,4 +55,46 @@ test.describe('DOM Widget', { tag: '@widget' }, () => {
     const finalCount = await comfyPage.getDOMWidgetCount()
     expect(finalCount).toBe(initialCount + 1)
   })
+
+  test('should reposition when layout changes', async ({ comfyPage }) => {
+    test.skip(
+      true,
+      'Only recalculates when the Canvas size changes, need to recheck the logic'
+    )
+    // --- setup ---
+
+    const textareaWidget = comfyPage.page
+      .locator('.comfy-multiline-input')
+      .first()
+    await expect(textareaWidget).toBeVisible()
+
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'small')
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'left')
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.nextFrame()
+
+    let oldPos: [number, number]
+    const checkBboxChange = async () => {
+      const boudningBox = (await textareaWidget.boundingBox())!
+      expect(boudningBox).not.toBeNull()
+      const position: [number, number] = [boudningBox.x, boudningBox.y]
+      expect(position).not.toEqual(oldPos)
+      oldPos = position
+    }
+    await checkBboxChange()
+
+    // --- test ---
+
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Size', 'normal')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+
+    await comfyPage.settings.setSetting('Comfy.Sidebar.Location', 'right')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Bottom')
+    await comfyPage.nextFrame()
+    await checkBboxChange()
+  })
 })

browser_tests/tests/errorOverlaySeeErrors.spec.ts

@@ -4,7 +4,6 @@ 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 }) => {
@@ -30,14 +29,14 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
     await triggerExecutionError(comfyPage)
 
     await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+      comfyPage.page.locator('[data-testid="error-overlay"]')
     ).toBeVisible()
   })
 
   test('Error overlay shows error message', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(overlay).toBeVisible()
     await expect(overlay).toHaveText(/\S/)
   })
@@ -45,10 +44,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('"See Errors" opens right side panel', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(overlay).toBeVisible()
 
-    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+    await overlay.getByRole('button', { name: /See Errors/i }).click()
 
     await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
   })
@@ -56,10 +55,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(overlay).toBeVisible()
 
-    await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
+    await overlay.getByRole('button', { name: /See Errors/i }).click()
 
     await expect(overlay).not.toBeVisible()
   })
@@ -69,10 +68,10 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(overlay).toBeVisible()
 
-    await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+    await overlay.getByRole('button', { name: /Dismiss/i }).click()
 
     await expect(overlay).not.toBeVisible()
     await expect(
@@ -83,7 +82,7 @@ test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
   test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
     await triggerExecutionError(comfyPage)
 
-    const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
     await expect(overlay).toBeVisible()
 
     await overlay.getByRole('button', { name: /close/i }).click()

browser_tests/tests/execution.spec.ts

@@ -1,7 +1,6 @@
 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')
@@ -25,14 +24,16 @@ test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
       await comfyPage.page.keyboard.press('Escape')
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      const errorOverlay = comfyPage.page.getByTestId(
-        TestIds.dialogs.errorOverlay
-      )
-      await expect(errorOverlay).toBeVisible()
-      await errorOverlay
-        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+      await expect(
+        comfyPage.page.locator('[data-testid="error-overlay"]')
+      ).toBeVisible()
+      await comfyPage.page
+        .locator('[data-testid="error-overlay"]')
+        .getByRole('button', { name: 'Dismiss' })
         .click()
-      await errorOverlay.waitFor({ state: 'hidden' })
+      await comfyPage.page
+        .locator('[data-testid="error-overlay"]')
+        .waitFor({ state: 'hidden' })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/groupNode.spec.ts

@@ -94,7 +94,13 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .click()
     })
   })
-  test(
+  // The 500ms fixed delay on the search results is causing flakiness
+  // Potential solution: add a spinner state when the search is in progress,
+  // and observe that state from the test. Blocker: the PrimeVue AutoComplete
+  // does not have a v-model on the query, so we cannot observe the raw
+  // query update, and thus cannot set the spinning state between the raw query
+  // update and the debounced search update.
+  test.skip(
     'Can be added to canvas using search',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
@@ -102,16 +108,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
       await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
       await comfyPage.canvasOps.doubleClick()
       await comfyPage.nextFrame()
-      await comfyPage.searchBox.input.waitFor({ state: 'visible' })
-      await comfyPage.searchBox.input.fill(groupNodeName)
-      await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
-
-      const exactGroupNodeResult = comfyPage.searchBox.dropdown
-        .locator(`li[aria-label="${groupNodeName}"]`)
-        .first()
-      await expect(exactGroupNodeResult).toBeVisible()
-      await exactGroupNodeResult.click()
-
+      await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
       await expect(comfyPage.canvas).toHaveScreenshot(
         'group-node-copy-added-from-search.png'
       )

browser_tests/tests/imageCompare.spec.ts

@@ -1,81 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Image Compare', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  function createTestImageDataUrl(label: string, color: string): string {
-    const svg =
-      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">` +
-      `<rect width="200" height="200" fill="${color}"/>` +
-      `<text x="50%" y="50%" fill="white" font-size="24" ` +
-      `text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`
-    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
-  }
-
-  async function setImageCompareValue(
-    comfyPage: ComfyPage,
-    value: { beforeImages: string[]; afterImages: string[] }
-  ) {
-    await comfyPage.page.evaluate(
-      ({ value }) => {
-        const node = window.app!.graph.getNodeById(1)
-        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
-        if (widget) {
-          widget.value = value
-          widget.callback?.(value)
-        }
-      },
-      { value }
-    )
-    await comfyPage.nextFrame()
-  }
-
-  test(
-    'Shows empty state when no images are set',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      await expect(node).toContainText('No images to compare')
-      await expect(node.locator('img')).toHaveCount(0)
-      await expect(node.locator('[role="presentation"]')).toHaveCount(0)
-    }
-  )
-
-  test(
-    'Slider defaults to 50% with both images set',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const beforeUrl = createTestImageDataUrl('Before', '#c00')
-      const afterUrl = createTestImageDataUrl('After', '#00c')
-      await setImageCompareValue(comfyPage, {
-        beforeImages: [beforeUrl],
-        afterImages: [afterUrl]
-      })
-
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const beforeImg = node.locator('img[alt="Before image"]')
-      const afterImg = node.locator('img[alt="After image"]')
-      await expect(beforeImg).toBeVisible()
-      await expect(afterImg).toBeVisible()
-
-      const handle = node.locator('[role="presentation"]')
-      await expect(handle).toBeVisible()
-
-      expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left)
-      ).toBe('50%')
-      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
-
-      await expect(node).toHaveScreenshot('image-compare-default-50.png')
-    }
-  )
-})

browser_tests/tests/interaction.spec.ts

@@ -175,9 +175,7 @@ test.describe('Node Interaction', () => {
     // Move mouse away to avoid hover highlight on the node at the drop position.
     await comfyPage.canvasOps.moveMouseToEmptyArea()
     await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png', {
-      maxDiffPixels: 50
-    })
+    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
   })
 
   test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
@@ -222,7 +220,10 @@ test.describe('Node Interaction', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
     })
 
-    test('Can copy link by shift-drag existing link', async ({ comfyPage }) => {
+    // Shift drag copy link regressed. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/2941
+    test.skip('Can copy link by shift-drag existing link', async ({
+      comfyPage
+    }) => {
       await comfyPage.canvasOps.dragAndDrop(
         DefaultGraphPositions.clipTextEncodeNode1InputSlot,
         DefaultGraphPositions.emptySpace
@@ -814,15 +815,11 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
         'Comfy.Workflow.WorkflowTabsPosition',
         'Topbar'
       )
-
-      await expect
-        .poll(() => comfyPage.menu.topbar.getTabNames(), { timeout: 5000 })
-        .toEqual(expect.arrayContaining([workflowA, workflowB]))
-
       const tabs = await comfyPage.menu.topbar.getTabNames()
-      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
-
       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)
     })
 

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -68,7 +68,7 @@ test.describe(
       })
     })
 
-    test('Load workflow from URL dropped onto Vue node', async ({
+    test.fixme('Load workflow from URL dropped onto Vue node', async ({
       comfyPage
     }) => {
       const fakeUrl = 'https://example.com/workflow.png'

browser_tests/tests/maskEditor.spec.ts

@@ -1,92 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Mask Editor', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
-  async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
-    const { x, y } = await loadImageNode.getPosition()
-
-    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
-      dropPosition: { x, y }
-    })
-
-    const imagePreview = comfyPage.page.locator('.image-preview')
-    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible()
-    await expect(imagePreview).toContainText('x')
-
-    return {
-      imagePreview,
-      nodeId: String(loadImageNode.id)
-    }
-  }
-
-  test(
-    'opens mask editor from image preview button',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { imagePreview } = await loadImageOnNode(comfyPage)
-
-      // Hover over the image panel to reveal action buttons
-      await imagePreview.getByRole('region').hover()
-      await comfyPage.page.getByLabel('Edit or mask image').click()
-
-      const dialog = comfyPage.page.locator('.mask-editor-dialog')
-      await expect(dialog).toBeVisible()
-
-      await expect(
-        dialog.getByRole('heading', { name: 'Mask Editor' })
-      ).toBeVisible()
-
-      const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
-      await expect(canvasContainer).toBeVisible()
-      await expect(canvasContainer.locator('canvas')).toHaveCount(4)
-
-      await expect(dialog.locator('.maskEditor-ui-container')).toBeVisible()
-      await expect(dialog.getByText('Save')).toBeVisible()
-      await expect(dialog.getByText('Cancel')).toBeVisible()
-
-      await expect(dialog).toHaveScreenshot('mask-editor-dialog-open.png')
-    }
-  )
-
-  test(
-    'opens mask editor from context menu',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const { nodeId } = await loadImageOnNode(comfyPage)
-
-      const nodeHeader = comfyPage.vueNodes
-        .getNodeLocator(nodeId)
-        .locator('.lg-node-header')
-      await nodeHeader.click()
-      await nodeHeader.click({ button: 'right' })
-
-      const contextMenu = comfyPage.page.locator('.p-contextmenu')
-      await expect(contextMenu).toBeVisible()
-
-      await contextMenu.getByText('Open in Mask Editor').click()
-
-      const dialog = comfyPage.page.locator('.mask-editor-dialog')
-      await expect(dialog).toBeVisible()
-      await expect(
-        dialog.getByRole('heading', { name: 'Mask Editor' })
-      ).toBeVisible()
-
-      await expect(dialog).toHaveScreenshot(
-        'mask-editor-dialog-from-context-menu.png'
-      )
-    }
-  )
-})

browser_tests/tests/nodeHelp.spec.ts

@@ -481,7 +481,6 @@ This is English documentation.
       const helpButton = comfyPage.page.locator(
         '.selection-toolbox button[data-testid="info-button"]'
       )
-      await helpButton.waitFor({ state: 'visible', timeout: 10_000 })
       await helpButton.click()
 
       const helpPage = comfyPage.page.locator(

browser_tests/tests/nodeSearchBox.spec.ts

@@ -176,13 +176,40 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL'])
     })
 
-    test('Outer click dismisses filter panel but keeps search box visible', async ({
+    // Flaky test.
+    // Sample test failure:
+    // https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/12696912248/job/35391990861?pr=2210
+    /*
+    1) [chromium-2x] › nodeSearchBox.spec.ts:135:5 › Node search box › Filtering › Outer click dismisses filter panel but keeps search box visible
+
+    Error: expect(locator).not.toBeVisible()
+
+    Locator: getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+    Expected: not visible
+    Received: visible
+    Call log:
+      - expect.not.toBeVisible with timeout 5000ms
+      - waiting for getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+
+
+      143 |
+      144 |       // Verify the filter selection panel is hidden
+    > 145 |       expect(panel.header).not.toBeVisible()
+          |                                ^
+      146 |
+      147 |       // Verify the node search dialog is still visible
+      148 |       expect(comfyPage.searchBox.input).toBeVisible()
+
+        at /home/runner/work/ComfyUI_frontend/ComfyUI_frontend/ComfyUI_frontend/browser_tests/nodeSearchBox.spec.ts:145:32
+     */
+    test.skip('Outer click dismisses filter panel but keeps search box visible', async ({
       comfyPage
     }) => {
       await comfyPage.searchBox.filterButton.click()
       const panel = comfyPage.searchBox.filterSelectionPanel
       await panel.header.waitFor({ state: 'visible' })
-      await comfyPage.page.keyboard.press('Escape')
+      const panelBounds = await panel.header.boundingBox()
+      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
 
       // Verify the filter selection panel is hidden
       await expect(panel.header).not.toBeVisible()

browser_tests/tests/painter.spec.ts

@@ -1,92 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Painter', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test(
-    'Renders canvas and controls',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      const painterWidget = node.locator('.widget-expands')
-      await expect(painterWidget).toBeVisible()
-
-      await expect(painterWidget.locator('canvas')).toBeVisible()
-      await expect(painterWidget.getByText('Brush')).toBeVisible()
-      await expect(painterWidget.getByText('Eraser')).toBeVisible()
-      await expect(painterWidget.getByText('Clear')).toBeVisible()
-      await expect(
-        painterWidget.locator('input[type="color"]').first()
-      ).toBeVisible()
-
-      await expect(node).toHaveScreenshot('painter-default-state.png')
-    }
-  )
-
-  test(
-    'Drawing a stroke changes the canvas',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const canvas = node.locator('.widget-expands canvas')
-      await expect(canvas).toBeVisible()
-
-      const isEmptyBefore = await canvas.evaluate((el) => {
-        const ctx = (el as HTMLCanvasElement).getContext('2d')
-        if (!ctx) return true
-        const data = ctx.getImageData(
-          0,
-          0,
-          (el as HTMLCanvasElement).width,
-          (el as HTMLCanvasElement).height
-        )
-        return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
-      })
-      expect(isEmptyBefore).toBe(true)
-
-      const box = await canvas.boundingBox()
-      if (!box) throw new Error('Canvas bounding box not found')
-
-      await comfyPage.page.mouse.move(
-        box.x + box.width * 0.3,
-        box.y + box.height * 0.5
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        box.x + box.width * 0.7,
-        box.y + box.height * 0.5,
-        { steps: 10 }
-      )
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-
-      await expect(async () => {
-        const hasContent = await canvas.evaluate((el) => {
-          const ctx = (el as HTMLCanvasElement).getContext('2d')
-          if (!ctx) return false
-          const data = ctx.getImageData(
-            0,
-            0,
-            (el as HTMLCanvasElement).width,
-            (el as HTMLCanvasElement).height
-          )
-          for (let i = 3; i < data.data.length; i += 4) {
-            if (data.data[i] > 0) return true
-          }
-          return false
-        })
-        expect(hasContent).toBe(true)
-      }).toPass()
-
-      await expect(node).toHaveScreenshot('painter-after-stroke.png')
-    }
-  )
-})

browser_tests/tests/performance.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { logMeasurement, recordMeasurement } from '../helpers/perfReporter'
+import { recordMeasurement } from '../helpers/perfReporter'
 
 test.describe('Performance', { tag: ['@perf'] }, () => {
   test('canvas idle style recalculations', async ({ comfyPage }) => {
@@ -186,22 +186,6 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     )
   })
 
-  test('large graph viewport pan sweep', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
-
-    await comfyPage.perf.startMeasuring()
-    await comfyPage.canvasOps.panSweep()
-
-    const measurement = await comfyPage.perf.stopMeasuring('viewport-pan-sweep')
-    recordMeasurement(measurement)
-    logMeasurement('Viewport pan sweep', measurement, [
-      'styleRecalcs',
-      'layouts',
-      'taskDurationMs',
-      'heapDeltaBytes',
-      'domNodes'
-    ])
-  })
   test('subgraph DOM widget clipping during node selection', async ({
     comfyPage
   }) => {

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,30 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Assets sidebar', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockEmptyState()
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Shows empty-state copy for generated and imported tabs', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-
-    await tab.open()
-
-    await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
-    await expect(tab.emptyStateMessage).toBeVisible()
-
-    await tab.importedTab.click()
-
-    await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
-    await expect(tab.emptyStateMessage).toBeVisible()
-  })
-})

browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts

@@ -1,122 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '../../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Sidebar splitter width independence', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Sidebar.UnifiedWidth', true)
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
-  })
-
-  async function dismissToasts(comfyPage: ComfyPage) {
-    const buttons = await comfyPage.page.locator('.p-toast-close-button').all()
-    for (const btn of buttons) {
-      await btn.click({ timeout: 2000 }).catch(() => {})
-    }
-    // Brief wait for animations
-    await comfyPage.nextFrame()
-  }
-
-  async function dragGutter(comfyPage: ComfyPage, deltaX: number) {
-    const gutter = comfyPage.page
-      .locator('.p-splitter-gutter:not(.hidden)')
-      .first()
-    await expect(gutter).toBeVisible()
-    const box = await gutter.boundingBox()
-    expect(box).not.toBeNull()
-    const centerX = box!.x + box!.width / 2
-    const centerY = box!.y + box!.height / 2
-    await comfyPage.page.mouse.move(centerX, centerY)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(centerX + deltaX, centerY, { steps: 10 })
-    await comfyPage.page.mouse.up()
-    await comfyPage.nextFrame()
-  }
-
-  async function openSidebarAt(
-    comfyPage: ComfyPage,
-    location: 'left' | 'right'
-  ) {
-    await comfyPage.settings.setSetting('Comfy.Sidebar.Location', location)
-    await comfyPage.nextFrame()
-    await dismissToasts(comfyPage)
-    await comfyPage.menu.nodeLibraryTab.open()
-  }
-
-  test('left and right sidebars use separate localStorage keys', async ({
-    comfyPage
-  }) => {
-    // Open sidebar on the left and resize it
-    await openSidebarAt(comfyPage, 'left')
-    await dragGutter(comfyPage, 100)
-
-    // Read the sidebar panel width after resize
-    const leftSidebar = comfyPage.page.locator('.side-bar-panel').first()
-    const leftWidth = (await leftSidebar.boundingBox())!.width
-
-    // Close sidebar, switch to right, open again
-    await comfyPage.menu.nodeLibraryTab.close()
-    await openSidebarAt(comfyPage, 'right')
-
-    // Right sidebar should use its default width, not the left's resized width
-    const rightSidebar = comfyPage.page.locator('.side-bar-panel').first()
-    await expect(rightSidebar).toBeVisible()
-    const rightWidth = (await rightSidebar.boundingBox())!.width
-
-    // The right sidebar should NOT match the left's resized width.
-    // We dragged the left sidebar 100px wider, so there should be a noticeable
-    // difference between the left (resized) and right (default) widths.
-    expect(Math.abs(rightWidth - leftWidth)).toBeGreaterThan(50)
-  })
-
-  test('localStorage keys include sidebar location', async ({ comfyPage }) => {
-    // Open sidebar on the left and resize
-    await openSidebarAt(comfyPage, 'left')
-    await dragGutter(comfyPage, 50)
-
-    // Left-only sidebar should use the legacy key (no location suffix)
-    const leftKey = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar')
-    )
-    expect(leftKey).not.toBeNull()
-
-    // Switch to right and resize
-    await comfyPage.menu.nodeLibraryTab.close()
-    await openSidebarAt(comfyPage, 'right')
-    await dragGutter(comfyPage, -50)
-
-    // Right sidebar should use a different key with location suffix
-    const rightKey = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar-right')
-    )
-    expect(rightKey).not.toBeNull()
-
-    // Both keys should exist independently
-    const leftKeyStillExists = await comfyPage.page.evaluate(() =>
-      localStorage.getItem('unified-sidebar')
-    )
-    expect(leftKeyStillExists).not.toBeNull()
-  })
-
-  test('normalized panel sizes sum to approximately 100%', async ({
-    comfyPage
-  }) => {
-    await openSidebarAt(comfyPage, 'left')
-    await dragGutter(comfyPage, 80)
-
-    // Check that saved sizes sum to ~100%
-    const sizes = await comfyPage.page.evaluate(() => {
-      const raw = localStorage.getItem('unified-sidebar')
-      return raw ? JSON.parse(raw) : null
-    })
-
-    expect(sizes).not.toBeNull()
-    expect(Array.isArray(sizes)).toBe(true)
-
-    const sum = (sizes as number[]).reduce((a, b) => a + b, 0)
-    expect(sum).toBeGreaterThan(99)
-    expect(sum).toBeLessThanOrEqual(101)
-  })
-})

browser_tests/tests/sidebar/workflows.spec.ts

@@ -247,7 +247,7 @@ test.describe('Workflows sidebar', () => {
     await expect(errorOverlay).toBeVisible()
 
     // Dismiss the error overlay
-    await errorOverlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+    await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Load blank workflow
@@ -271,11 +271,9 @@ test.describe('Workflows sidebar', () => {
       '.comfyui-workflows-open .close-workflow-button'
     )
     await closeButton.click()
-    await expect
-      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames(), {
-        timeout: 5000
-      })
-      .toEqual(['*Unsaved Workflow'])
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow'
+    ])
   })
 
   test('Can close saved workflow with command', async ({ comfyPage }) => {

browser_tests/tests/subgraph-duplicate-ids.spec.ts

@@ -110,11 +110,16 @@ test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
     const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
     await subgraphNode.navigateIntoSubgraph()
 
-    expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+    const isInSubgraph = () =>
+      comfyPage.page.evaluate(
+        () => window.app!.canvas.graph?.isRootGraph === false
+      )
+
+    expect(await isInSubgraph()).toBe(true)
 
     await comfyPage.page.keyboard.press('Escape')
     await comfyPage.nextFrame()
 
-    expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+    expect(await isInSubgraph()).toBe(false)
   })
 })

browser_tests/tests/subgraph-promoted-slot-position.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
+import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
 
 test.describe(
   'Subgraph promoted widget-input slot position',
@@ -18,10 +18,7 @@ test.describe(
       await comfyPage.nextFrame()
       await comfyPage.nextFrame()
 
-      const result = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const result = await getTextSlotPosition(comfyPage.page, '11')
       expect(result).not.toBeNull()
       expect(result!.hasPos).toBe(true)
 
@@ -40,10 +37,7 @@ test.describe(
       await comfyPage.nextFrame()
 
       // Verify initial position is correct
-      const before = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const before = await getTextSlotPosition(comfyPage.page, '11')
       expect(before).not.toBeNull()
       expect(before!.hasPos).toBe(true)
       expect(before!.posY).toBeGreaterThan(before!.titleHeight)
@@ -79,10 +73,7 @@ test.describe(
       await comfyPage.subgraph.exitViaBreadcrumb()
 
       // Verify slot position is still at the widget row after rename
-      const after = await SubgraphHelper.getTextSlotPosition(
-        comfyPage.page,
-        '11'
-      )
+      const after = await getTextSlotPosition(comfyPage.page, '11')
       expect(after).not.toBeNull()
       expect(after!.hasPos).toBe(true)
       expect(after!.posY).toBeGreaterThan(after!.titleHeight)

browser_tests/tests/subgraph-promoted-widget-dom.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
 import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
 
 test.describe(
@@ -15,8 +14,13 @@ test.describe(
     test('Promoted seed widget renders in node body, not header', async ({
       comfyPage
     }) => {
-      const subgraphNode =
-        await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+      await comfyPage.workflow.loadWorkflow('default')
+
+      // Convert KSampler (id 3) to subgraph — seed is auto-promoted.
+      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+      await ksampler.click('title')
+      const subgraphNode = await ksampler.convertToSubgraph()
+      await comfyPage.nextFrame()
 
       // Enable Vue nodes now that the subgraph has been created
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
@@ -39,7 +43,15 @@ test.describe(
       await expect(seedWidget).toBeVisible()
 
       // Verify widget is inside the node body, not the header
-      await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+      const headerBox = await nodeLocator
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetBox = await seedWidget.boundingBox()
+      expect(headerBox).not.toBeNull()
+      expect(widgetBox).not.toBeNull()
+
+      // Widget top should be below the header bottom
+      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
     })
   }
 )

browser_tests/tests/subgraph-rename-dialog.spec.ts

@@ -25,7 +25,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
     await subgraphNode.navigateIntoSubgraph()
 
     // Get initial slot label
-    const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+    const initialInputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      if (!graph || !('inputNode' in graph)) return null
+      return graph.inputs?.[0]?.label || graph.inputs?.[0]?.name || null
+    })
 
     if (initialInputLabel === null) {
       throw new Error(
@@ -102,7 +106,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
     await comfyPage.nextFrame()
 
     // Verify the second rename worked
-    const afterSecondRename = await comfyPage.subgraph.getSlotLabel('input')
+    const afterSecondRename = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      if (!graph || !('inputNode' in graph)) return null
+      return graph.inputs?.[0]?.label || null
+    })
     expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
   })
 
@@ -115,7 +123,11 @@ test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
     await subgraphNode.navigateIntoSubgraph()
 
     // Get initial output slot label
-    const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+    const initialOutputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      if (!graph || !('inputNode' in graph)) return null
+      return graph.outputs?.[0]?.label || graph.outputs?.[0]?.name || null
+    })
 
     if (initialOutputLabel === null) {
       throw new Error(

browser_tests/tests/subgraph.spec.ts

@@ -26,6 +26,38 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
     )
   })
 
+  // Helper to get subgraph slot count
+  async function getSubgraphSlotCount(
+    comfyPage: typeof test.prototype.comfyPage,
+    type: 'inputs' | 'outputs'
+  ): Promise<number> {
+    return await comfyPage.page.evaluate((slotType: 'inputs' | 'outputs') => {
+      const graph = window.app!.canvas.graph
+      // isSubgraph check: subgraphs have isRootGraph === false
+      if (!graph || !('inputNode' in graph)) return 0
+      return graph[slotType]?.length || 0
+    }, type)
+  }
+
+  // Helper to get current graph node count
+  async function getGraphNodeCount(
+    comfyPage: typeof test.prototype.comfyPage
+  ): Promise<number> {
+    return await comfyPage.page.evaluate(() => {
+      return window.app!.canvas.graph!.nodes?.length || 0
+    })
+  }
+
+  // Helper to verify we're in a subgraph
+  async function isInSubgraph(
+    comfyPage: typeof test.prototype.comfyPage
+  ): Promise<boolean> {
+    return await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph
+      return !!graph && 'inputNode' in graph
+    })
+  }
+
   test.describe('I/O Slot Management', () => {
     test('Can add input slots to subgraph', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
@@ -33,7 +65,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
       const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
         'VAEEncode',
         true
@@ -42,7 +74,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
 
-      const finalCount = await comfyPage.subgraph.getSlotCount('input')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
       expect(finalCount).toBe(initialCount + 1)
     })
 
@@ -52,7 +84,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
       const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
         'VAEEncode',
         true
@@ -61,7 +93,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
 
-      const finalCount = await comfyPage.subgraph.getSlotCount('output')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
       expect(finalCount).toBe(initialCount + 1)
     })
 
@@ -71,16 +103,18 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
       expect(initialCount).toBeGreaterThan(0)
 
-      await comfyPage.subgraph.removeSlot('input')
+      await comfyPage.subgraph.rightClickInputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+      await comfyPage.nextFrame()
 
       // Force re-render
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const finalCount = await comfyPage.subgraph.getSlotCount('input')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
       expect(finalCount).toBe(initialCount - 1)
     })
 
@@ -90,16 +124,18 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
       expect(initialCount).toBeGreaterThan(0)
 
-      await comfyPage.subgraph.removeSlot('output')
+      await comfyPage.subgraph.rightClickOutputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+      await comfyPage.nextFrame()
 
       // Force re-render
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const finalCount = await comfyPage.subgraph.getSlotCount('output')
+      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
       expect(finalCount).toBe(initialCount - 1)
     })
 
@@ -109,7 +145,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
       await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
@@ -125,7 +165,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       expect(newInputName).toBe(RENAMED_INPUT_NAME)
       expect(newInputName).not.toBe(initialInputLabel)
@@ -137,7 +181,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       await comfyPage.subgraph.doubleClickInputSlot(initialInputLabel!)
 
@@ -151,7 +199,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       expect(newInputName).toBe(RENAMED_INPUT_NAME)
       expect(newInputName).not.toBe(initialInputLabel)
@@ -163,7 +215,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+      const initialOutputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.outputs?.[0]?.label || null
+      })
 
       await comfyPage.subgraph.doubleClickOutputSlot(initialOutputLabel!)
 
@@ -178,7 +234,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const newOutputName = await comfyPage.subgraph.getSlotLabel('output')
+      const newOutputName = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.outputs?.[0]?.label || null
+      })
 
       expect(newOutputName).toBe(renamedOutputName)
       expect(newOutputName).not.toBe(initialOutputLabel)
@@ -192,7 +252,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       // Test that right-click still works for renaming
       await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
@@ -210,7 +274,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       expect(newInputName).toBe(rightClickRenamedName)
       expect(newInputName).not.toBe(initialInputLabel)
@@ -224,7 +292,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       // Use direct pointer event approach to double-click on label
       await comfyPage.page.evaluate(() => {
@@ -282,7 +354,11 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
       await comfyPage.nextFrame()
 
-      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        return graph.inputs?.[0]?.label || null
+      })
 
       expect(newInputName).toBe(labelClickRenamedName)
       expect(newInputName).not.toBe(initialInputLabel)
@@ -354,7 +430,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
         await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
       expect(subgraphNodes.length).toBe(1)
 
-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
       expect(finalNodeCount).toBe(1)
     })
 
@@ -364,11 +440,13 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       expect(await subgraphNode.exists()).toBe(true)
 
-      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+      const initialNodeCount = await getGraphNodeCount(comfyPage)
 
-      await subgraphNode.delete()
+      await subgraphNode.click('title')
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()
 
-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
       expect(finalNodeCount).toBe(initialNodeCount - 1)
 
       const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
@@ -445,7 +523,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
       await subgraphNode.navigateIntoSubgraph()
 
-      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+      const initialNodeCount = await getGraphNodeCount(comfyPage)
 
       const nodesInSubgraph = await comfyPage.page.evaluate(() => {
         const nodes = window.app!.canvas.graph!.nodes
@@ -466,7 +544,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.page.keyboard.press('Control+v')
       await comfyPage.nextFrame()
 
-      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      const finalNodeCount = await getGraphNodeCount(comfyPage)
       expect(finalNodeCount).toBe(initialNodeCount + 1)
     })
 
@@ -482,20 +560,20 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.nextFrame()
 
       // Get initial node count
-      const initialCount = await comfyPage.subgraph.getNodeCount()
+      const initialCount = await getGraphNodeCount(comfyPage)
 
       // Undo
       await comfyPage.keyboard.undo()
       await comfyPage.nextFrame()
 
-      const afterUndoCount = await comfyPage.subgraph.getNodeCount()
+      const afterUndoCount = await getGraphNodeCount(comfyPage)
       expect(afterUndoCount).toBe(initialCount - 1)
 
       // Redo
       await comfyPage.keyboard.redo()
       await comfyPage.nextFrame()
 
-      const afterRedoCount = await comfyPage.subgraph.getNodeCount()
+      const afterRedoCount = await getGraphNodeCount(comfyPage)
       expect(afterRedoCount).toBe(initialCount)
     })
   })
@@ -565,17 +643,17 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
       await comfyPage.nextFrame()
 
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)
       await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()
 
       await comfyPage.workflow.loadWorkflow('default')
       await comfyPage.nextFrame()
 
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
 
       await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
       await comfyPage.nextFrame()
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
     })
 
     test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
@@ -672,7 +750,9 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
 
-      await subgraphNode.delete()
+      await subgraphNode.click('title')
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()
 
       const finalCount = await comfyPage.page
         .locator(SELECTORS.domWidget)
@@ -699,7 +779,9 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       // Navigate into subgraph (method now handles retries internally)
       await subgraphNode.navigateIntoSubgraph()
 
-      await comfyPage.subgraph.removeSlot('input', 'text')
+      await comfyPage.subgraph.rightClickInputSlot('text')
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+      await comfyPage.nextFrame()
 
       // Wait for breadcrumb to be visible
       await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
@@ -799,19 +881,19 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
 
       // Verify we're in a subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)
 
       // Test that Escape no longer exits subgraph
       await comfyPage.page.keyboard.press('Escape')
       await comfyPage.nextFrame()
-      if (!(await comfyPage.subgraph.isInSubgraph())) {
+      if (!(await isInSubgraph(comfyPage))) {
         throw new Error('Not in subgraph')
       }
 
       // Test that Alt+Q now exits subgraph
       await comfyPage.page.keyboard.press('Alt+q')
       await comfyPage.nextFrame()
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
     })
 
     test('Escape prioritizes closing dialogs over exiting subgraph', async ({
@@ -825,7 +907,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
 
       // Verify we're in a subgraph
-      if (!(await comfyPage.subgraph.isInSubgraph())) {
+      if (!(await isInSubgraph(comfyPage))) {
         throw new Error('Not in subgraph')
       }
 
@@ -845,12 +927,12 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       ).not.toBeVisible()
 
       // Should still be in subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      expect(await isInSubgraph(comfyPage)).toBe(true)
 
       // Press Escape again - now should exit subgraph
       await comfyPage.page.keyboard.press('Escape')
       await comfyPage.nextFrame()
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+      expect(await isInSubgraph(comfyPage)).toBe(false)
     })
   })
 })

browser_tests/tests/subgraphInputSlotRename.spec.ts

@@ -2,7 +2,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
 
 const WORKFLOW = 'subgraphs/test-values-input-subgraph'
 const RENAMED_LABEL = 'my_seed'
@@ -41,7 +40,13 @@ test.describe(
       await expect(seedWidget).toBeVisible()
 
       // Verify widget is in the node body, not the header
-      await SubgraphHelper.expectWidgetBelowHeader(sgNode, seedWidget)
+      const headerBox = await sgNode
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetBox = await seedWidget.boundingBox()
+      expect(headerBox).not.toBeNull()
+      expect(widgetBox).not.toBeNull()
+      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
 
       // 3. Enter the subgraph and rename the seed slot.
       //    The subgraph IO rename uses canvas.prompt() which requires the
@@ -98,7 +103,15 @@ test.describe(
       const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
       await expect(seedWidgetAfter).toBeVisible()
 
-      await SubgraphHelper.expectWidgetBelowHeader(sgNodeAfter, seedWidgetAfter)
+      const headerAfter = await sgNodeAfter
+        .locator('[data-testid^="node-header-"]')
+        .boundingBox()
+      const widgetAfter = await seedWidgetAfter.boundingBox()
+      expect(headerAfter).not.toBeNull()
+      expect(widgetAfter).not.toBeNull()
+      expect(widgetAfter!.y).toBeGreaterThan(
+        headerAfter!.y + headerAfter!.height
+      )
     })
   }
 )

browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts

@@ -1,90 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
-import { TestIds } from '../fixtures/selectors'
-
-/**
- * Regression test for legacy-prefixed proxyWidget normalization.
- *
- * Older serialized workflows stored proxyWidget entries with prefixed widget
- * names like "6: 3: string_a" instead of plain "string_a". This caused
- * resolution failures during configure, resulting in missing promoted widgets.
- *
- * The fixture contains an outer SubgraphNode (id 5) whose proxyWidgets array
- * has a legacy-prefixed entry: ["6", "6: 3: string_a"]. After normalization
- * the promoted widget should render with the clean name "string_a".
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10573
- */
-test.describe(
-  'Legacy prefixed proxyWidget normalization',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    const WORKFLOW = 'subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Loads without console warnings about failed widget resolution', async ({
-      comfyPage
-    }) => {
-      const { warnings } = SubgraphHelper.collectConsoleWarnings(comfyPage.page)
-
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-      expect(warnings).toEqual([])
-    })
-
-    test('Promoted widget renders with normalized name, not legacy prefix', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      await expect(outerNode).toBeVisible()
-
-      // The promoted widget should render with the clean name "string_a",
-      // not the legacy-prefixed "6: 3: string_a".
-      const promotedWidget = outerNode
-        .getByLabel('string_a', { exact: true })
-        .first()
-      await expect(promotedWidget).toBeVisible()
-    })
-
-    test('No legacy-prefixed or disconnected widgets remain on the node', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      await expect(outerNode).toBeVisible()
-
-      // Both widget rows should be valid "string_a" widgets — no stale
-      // "Disconnected" placeholders from unresolved legacy entries.
-      const widgetRows = outerNode.getByTestId(TestIds.widgets.widget)
-      await expect(widgetRows).toHaveCount(2)
-
-      for (const row of await widgetRows.all()) {
-        await expect(row.getByLabel('string_a', { exact: true })).toBeVisible()
-      }
-    })
-
-    test('Promoted widget value is editable as a text input', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('5')
-      const textarea = outerNode
-        .getByRole('textbox', { name: 'string_a' })
-        .first()
-      await expect(textarea).toBeVisible()
-    })
-  }
-)

browser_tests/tests/subgraphLifecycle.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { PromotedWidgetEntry } from '../helpers/promotedWidgets'
 
@@ -81,7 +82,14 @@ test.describe(
           initialWidgets
         )
 
-        await comfyPage.subgraph.serializeAndReload()
+        const serialized1 = await comfyPage.page.evaluate(() =>
+          window.app!.graph!.serialize()
+        )
+        await comfyPage.page.evaluate(
+          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
+          serialized1 as ComfyWorkflowJSON
+        )
+        await comfyPage.nextFrame()
 
         const afterFirst = await getPromotedWidgets(comfyPage, '11')
         await expectPromotedWidgetsToResolveToInteriorNodes(
@@ -90,7 +98,14 @@ test.describe(
           afterFirst
         )
 
-        await comfyPage.subgraph.serializeAndReload()
+        const serialized2 = await comfyPage.page.evaluate(() =>
+          window.app!.graph!.serialize()
+        )
+        await comfyPage.page.evaluate(
+          (workflow: ComfyWorkflowJSON) => window.app!.loadGraphData(workflow),
+          serialized2 as ComfyWorkflowJSON
+        )
+        await comfyPage.nextFrame()
 
         const afterSecond = await getPromotedWidgets(comfyPage, '11')
         await expectPromotedWidgetsToResolveToInteriorNodes(
@@ -147,7 +162,9 @@ test.describe(
         await subgraphNode.navigateIntoSubgraph()
 
         const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.delete()
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
 
         await comfyPage.subgraph.exitViaBreadcrumb()
 
@@ -187,7 +204,9 @@ test.describe(
         await subgraphNode.navigateIntoSubgraph()
 
         const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.delete()
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
 
         await comfyPage.subgraph.exitViaBreadcrumb()
 
@@ -278,9 +297,14 @@ test.describe(
         const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
         expect(await subgraphNode.exists()).toBe(true)
 
-        await subgraphNode.delete()
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
 
-        expect(await subgraphNode.exists()).toBe(false)
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('5')
+        })
+        expect(nodeExists).toBe(false)
 
         await expect
           .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())

browser_tests/tests/subgraphNestedConfigureOrder.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { SubgraphHelper } from '../fixtures/helpers/SubgraphHelper'
 
 test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
   const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
@@ -9,10 +8,17 @@ test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
   test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
     comfyPage
   }) => {
-    const { warnings } = SubgraphHelper.collectConsoleWarnings(comfyPage.page, [
-      'No link found',
-      'Failed to resolve legacy -1'
-    ])
+    const warnings: string[] = []
+    comfyPage.page.on('console', (msg) => {
+      const text = msg.text()
+      if (
+        text.includes('No link found') ||
+        text.includes('Failed to resolve legacy -1') ||
+        text.includes('No inner link found')
+      ) {
+        warnings.push(text)
+      }
+    })
 
     await comfyPage.workflow.loadWorkflow(WORKFLOW)
 

browser_tests/tests/subgraphNestedPackValues.spec.ts

@@ -60,8 +60,29 @@ test.describe(
         await expect(textWidget).toHaveValue(/Latina female/)
       }).toPass({ timeout: 5000 })
 
-      // 2. Pack all interior nodes into a nested subgraph
-      await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+      // 2. Enter the subgraph via Vue node button
+      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      // 3. Disable Vue nodes for canvas operations (select all + convert)
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
+
+      // 4. Select all interior nodes and convert to nested subgraph
+      await comfyPage.canvas.click()
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        canvas.graph!.convertToSubgraph(canvas.selectedItems)
+      })
+      await comfyPage.nextFrame()
+
+      // 5. Navigate back to root graph and trigger a checkState cycle
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.canvas.click()
+      await comfyPage.nextFrame()
 
       // 6. Re-enable Vue nodes and verify values are preserved
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
@@ -102,8 +123,24 @@ test.describe(
       const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
       await expect(nodeLocator).toBeVisible()
 
-      // Pack all interior nodes into a nested subgraph
-      await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+      // Enter the subgraph via Vue node button, then disable for canvas ops
+      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
+
+      await comfyPage.canvas.click()
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        canvas.graph!.convertToSubgraph(canvas.selectedItems)
+      })
+      await comfyPage.nextFrame()
+
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.canvas.click()
+      await comfyPage.nextFrame()
 
       // Verify all proxyWidgets entries resolve
       await expect(async () => {

browser_tests/tests/subgraphProgressClear.spec.ts

@@ -13,7 +13,14 @@ test.describe(
       await comfyPage.nextFrame()
 
       // Find the subgraph node
-      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+      const subgraphNodeId = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const subgraphNode = graph.nodes.find(
+          (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+        )
+        return subgraphNode ? String(subgraphNode.id) : null
+      })
+      expect(subgraphNodeId).not.toBeNull()
 
       // Simulate a stale progress value on the subgraph node.
       // This happens when:
@@ -27,21 +34,26 @@ test.describe(
       await comfyPage.page.evaluate((nodeId) => {
         const node = window.app!.canvas.graph!.getNodeById(nodeId)!
         node.progress = 0.5
-      }, subgraphNodeId)
+      }, subgraphNodeId!)
 
       // Verify progress is set
       const progressBefore = await comfyPage.page.evaluate((nodeId) => {
         return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-      }, subgraphNodeId)
+      }, subgraphNodeId!)
       expect(progressBefore).toBe(0.5)
 
       // Navigate into the subgraph
-      const subgraphNode =
-        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
+        subgraphNodeId!
+      )
       await subgraphNode.navigateIntoSubgraph()
 
       // Verify we're inside the subgraph
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      const inSubgraph = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        return !!graph && 'inputNode' in graph
+      })
+      expect(inSubgraph).toBe(true)
 
       // Navigate back to the root graph
       await comfyPage.page.keyboard.press('Escape')
@@ -68,18 +80,30 @@ test.describe(
       await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
       await comfyPage.nextFrame()
 
-      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+      const subgraphNodeId = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const subgraphNode = graph.nodes.find(
+          (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+        )
+        return subgraphNode ? String(subgraphNode.id) : null
+      })
+      expect(subgraphNodeId).not.toBeNull()
 
       await comfyPage.page.evaluate((nodeId) => {
         const node = window.app!.canvas.graph!.getNodeById(nodeId)!
         node.progress = 0.7
-      }, subgraphNodeId)
+      }, subgraphNodeId!)
 
-      const subgraphNode =
-        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
+        subgraphNodeId!
+      )
       await subgraphNode.navigateIntoSubgraph()
 
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+      const inSubgraph = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        return !!graph && 'inputNode' in graph
+      })
+      expect(inSubgraph).toBe(true)
 
       await comfyPage.workflow.loadWorkflow('default')
       await comfyPage.nextFrame()

browser_tests/tests/subgraphPromotion.spec.ts

@@ -1,5 +1,7 @@
 import { expect } from '@playwright/test'
 
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'
 import { fitToViewInstant } from '../helpers/fitToView'
@@ -70,7 +72,14 @@ test.describe(
 
         // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.centerOnNode()
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
 
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
@@ -351,7 +360,6 @@ test.describe(
         await comfyPage.subgraph.exitViaBreadcrumb()
         await fitToViewInstant(comfyPage)
         await comfyPage.nextFrame()
-        await comfyPage.nextFrame()
 
         const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
         expect(initialWidgetCount).toBeGreaterThan(0)
@@ -464,7 +472,14 @@ test.describe(
 
         // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.centerOnNode()
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
 
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
@@ -513,7 +528,14 @@ test.describe(
         const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
         expect(beforePromoted).toContain('text')
 
-        await comfyPage.subgraph.serializeAndReload()
+        const serialized = await comfyPage.page.evaluate(() => {
+          return window.app!.graph!.serialize()
+        })
+
+        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
+          return window.app!.loadGraphData(workflow)
+        }, serialized as ComfyWorkflowJSON)
+        await comfyPage.nextFrame()
 
         const afterPromoted = await getPromotedWidgetNames(comfyPage, '11')
         expect(afterPromoted).toContain('text')
@@ -533,7 +555,14 @@ test.describe(
         const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
         expect(beforeSnapshot.length).toBeGreaterThan(0)
 
-        await comfyPage.subgraph.serializeAndReload()
+        const serialized = await comfyPage.page.evaluate(() => {
+          return window.app!.graph!.serialize()
+        })
+
+        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
+          return window.app!.loadGraphData(workflow)
+        }, serialized as ComfyWorkflowJSON)
+        await comfyPage.nextFrame()
 
         const afterSnapshot = await getPromotedWidgets(comfyPage, '11')
         expect(afterSnapshot).toEqual(beforeSnapshot)
@@ -685,10 +714,15 @@ test.describe(
 
         // Delete the subgraph node
         const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.delete()
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
 
         // Node no longer exists, so promoted widgets should be gone
-        expect(await subgraphNode.exists()).toBe(false)
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('11')
+        })
+        expect(nodeExists).toBe(false)
       })
 
       test('Nested promoted widget entries reflect interior changes after slot removal', async ({
@@ -714,7 +748,9 @@ test.describe(
         })
         expect(removedSlotName).not.toBeNull()
 
-        await comfyPage.subgraph.removeSlot('input')
+        await comfyPage.subgraph.rightClickInputSlot()
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()
 
         await comfyPage.subgraph.exitViaBreadcrumb()
 
@@ -744,7 +780,9 @@ test.describe(
         await subgraphNode.navigateIntoSubgraph()
 
         // Remove the text input slot
-        await comfyPage.subgraph.removeSlot('input', 'text')
+        await comfyPage.subgraph.rightClickInputSlot('text')
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()
 
         // Navigate back via breadcrumb
         await comfyPage.subgraph.exitViaBreadcrumb()

browser_tests/tests/subgraphSearchAliases.spec.ts

@@ -4,8 +4,19 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 async function createSubgraphAndNavigateInto(comfyPage: ComfyPage) {
-  const subgraphNode =
-    await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+  await comfyPage.workflow.loadWorkflow('default')
+  await comfyPage.nextFrame()
+
+  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+  await ksampler.click('title')
+  await ksampler.convertToSubgraph()
+  await comfyPage.nextFrame()
+
+  const subgraphNodes =
+    await comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph')
+  expect(subgraphNodes.length).toBe(1)
+  const subgraphNode = subgraphNodes[0]
+
   await subgraphNode.navigateIntoSubgraph()
   return subgraphNode
 }

browser_tests/tests/subgraphViewport.spec.ts

@@ -1,114 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-function hasVisibleNodeInViewport() {
-  const canvas = window.app!.canvas
-  if (!canvas?.graph?._nodes?.length) return false
-
-  const ds = canvas.ds
-  const cw = canvas.canvas.width / window.devicePixelRatio
-  const ch = canvas.canvas.height / window.devicePixelRatio
-  const visLeft = -ds.offset[0]
-  const visTop = -ds.offset[1]
-  const visRight = visLeft + cw / ds.scale
-  const visBottom = visTop + ch / ds.scale
-
-  for (const node of canvas.graph._nodes) {
-    const [nx, ny] = node.pos
-    const [nw, nh] = node.size
-    if (
-      nx + nw > visLeft &&
-      nx < visRight &&
-      ny + nh > visTop &&
-      ny < visBottom
-    )
-      return true
-  }
-  return false
-}
-
-test.describe('Subgraph viewport restoration', { tag: '@subgraph' }, () => {
-  test('first visit fits viewport to subgraph nodes (LG)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.evaluate(() => {
-      const canvas = window.app!.canvas
-      const graph = canvas.graph!
-      const sgNode = graph._nodes.find((n) =>
-        'isSubgraphNode' in n
-          ? (n as unknown as { isSubgraphNode: () => boolean }).isSubgraphNode()
-          : false
-      ) as unknown as { subgraph?: typeof graph } | undefined
-      if (!sgNode?.subgraph) throw new Error('No subgraph node')
-
-      canvas.setGraph(sgNode.subgraph)
-    })
-
-    await expect
-      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
-        timeout: 2000
-      })
-      .toBe(true)
-  })
-
-  test('first visit fits viewport to subgraph nodes (Vue)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.vueNodes.waitForNodes()
-
-    await comfyPage.vueNodes.enterSubgraph('11')
-
-    await expect
-      .poll(() => comfyPage.page.evaluate(hasVisibleNodeInViewport), {
-        timeout: 2000
-      })
-      .toBe(true)
-  })
-
-  test('viewport is restored when returning to root (Vue)', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.vueNodes.waitForNodes()
-
-    const rootViewport = await comfyPage.page.evaluate(() => {
-      const ds = window.app!.canvas.ds
-      return { scale: ds.scale, offset: [...ds.offset] }
-    })
-
-    await comfyPage.vueNodes.enterSubgraph('11')
-    await comfyPage.nextFrame()
-
-    await comfyPage.subgraph.exitViaBreadcrumb()
-
-    await expect
-      .poll(
-        () =>
-          comfyPage.page.evaluate(() => {
-            const ds = window.app!.canvas.ds
-            return { scale: ds.scale, offset: [...ds.offset] }
-          }),
-        { timeout: 2000 }
-      )
-      .toEqual({
-        scale: expect.closeTo(rootViewport.scale, 2),
-        offset: [
-          expect.closeTo(rootViewport.offset[0], 0),
-          expect.closeTo(rootViewport.offset[1], 0)
-        ]
-      })
-  })
-})

browser_tests/tests/templates.spec.ts

@@ -32,11 +32,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     }
   })
 
-  // Flaky: /templates is proxied to an external server, so thumbnail
-  // availability varies across CI runs.
-  // FIX: Make hermetic — fixture index.json and thumbnail responses via
-  // page.route(), and change checkTemplateFileExists to use browser-context
-  // fetch (page.request.head bypasses Playwright routing).
+  // TODO: Re-enable this test once issue resolved
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
   test.skip('should have all required thumbnail media for each template', async ({
     comfyPage
@@ -76,9 +72,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     // Clear the workflow
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
-      .toBe(0)
+    await expect(async () => {
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 250 })
 
     // Load a template
     await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
@@ -91,9 +87,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(comfyPage.templates.content).toBeHidden()
 
     // Ensure we now have some nodes
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
-      .toBeGreaterThan(0)
+    await expect(async () => {
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBeGreaterThan(0)
+    }).toPass({ timeout: 250 })
   })
 
   test('dialog should be automatically shown to first-time users', async ({
@@ -106,7 +102,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await comfyPage.setup({ clearStorage: true })
 
     // Expect the templates dialog to be shown
-    await expect(comfyPage.templates.content).toBeVisible({ timeout: 5000 })
+    expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
 
   test('Uses proper locale files for templates', async ({ comfyPage }) => {

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

@@ -25,37 +25,37 @@ test.describe('Vue Nodes Image Preview', () => {
       dropPosition: { x, y }
     })
 
-    const nodeId = String(loadImageNode.id)
-    const imagePreview = comfyPage.vueNodes
-      .getNodeLocator(nodeId)
-      .locator('.image-preview')
-
+    const imagePreview = comfyPage.page.locator('.image-preview')
     await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible({ timeout: 30_000 })
+    await expect(imagePreview.locator('img')).toBeVisible()
     await expect(imagePreview).toContainText('x')
 
     return {
       imagePreview,
-      nodeId
+      nodeId: String(loadImageNode.id)
     }
   }
 
-  test('opens mask editor from image preview button', async ({ comfyPage }) => {
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('opens mask editor from image preview button', async ({
+    comfyPage
+  }) => {
     const { imagePreview } = await loadImageOnNode(comfyPage)
 
-    await imagePreview.getByRole('region').hover()
+    await imagePreview.locator('[role="img"]').focus()
     await comfyPage.page.getByLabel('Edit or mask image').click()
 
     await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
   })
 
-  test('shows image context menu options', async ({ comfyPage }) => {
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('shows image context menu options', async ({ comfyPage }) => {
     const { nodeId } = await loadImageOnNode(comfyPage)
 
-    await comfyPage.vueNodes.selectNode(nodeId)
     const nodeHeader = comfyPage.vueNodes
       .getNodeLocator(nodeId)
       .locator('.lg-node-header')
+    await nodeHeader.click()
     await nodeHeader.click({ button: 'right' })
 
     const contextMenu = comfyPage.page.locator('.p-contextmenu')