Merge branch 'main' into feat/app-mode-layouts

Take main's refactored test helpers from #10680. Fix pre-existing oxlint errors in main's perfReporter and GtmTelemetryProvider test. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-20 06:20:11 +00:00 · 2026-03-29 22:06:28 +02:00
parent 78891e406b af0f7cb945
commit 79fb6b7d0a
203 changed files with 20955 additions and 4406 deletions
--- a/.agents/checks/playwright-e2e.md
+++ b/.agents/checks/playwright-e2e.md
@@ -0,0 +1,74 @@
+---
+name: playwright-e2e
+description: Reviews Playwright E2E test code for ComfyUI-specific patterns, flakiness risks, and fixture misuse
+severity-default: medium
+tools: [Read, Grep]
+---
+
+You are reviewing Playwright E2E test code in `browser_tests/`. Focus on issues a **reviewer** would catch that an author might miss — flakiness risks, fixture misuse, test isolation problems, and convention violations.
+
+Reference docs (read if you need full context):
+
+- `browser_tests/README.md` — setup, patterns, screenshot workflow
+- `browser_tests/AGENTS.md` — directory structure, fixture overview
+- `docs/guidance/playwright.md` — type assertion rules, test tags, forbidden patterns
+- `.claude/skills/writing-playwright-tests/SKILL.md` — anti-patterns, retry patterns, Vue Nodes vs LiteGraph decision guide
+
+## Checks
+
+### Flakiness Risks (Major)
+
+1. **`waitForTimeout` usage** — Always wrong. Must use retrying assertions (`toBeVisible`, `toHaveText`), `expect.poll()`, or `expect().toPass()`. See retry patterns in `.claude/skills/writing-playwright-tests/SKILL.md`.
+
+2. **Missing `nextFrame()` after canvas ops** — Any `drag`, `click` on canvas, `resizeNode`, `pan`, `zoom`, or programmatic graph mutation via `page.evaluate` that changes visual state needs `await comfyPage.nextFrame()` before assertions. `loadWorkflow()` does NOT need it. Prefer encapsulating `nextFrame()` calls inside Page Object methods so tests don't manage frame timing directly.
+
+3. **Keyboard actions without prior focus** — `page.keyboard.press()` without a preceding `comfyPage.canvas.click()` or element `.focus()` will silently send keys to nothing.
+
+4. **Coordinate-based interactions where node refs exist** — Raw `{ x, y }` clicks on canvas are fragile. If the test targets a node, use `comfyPage.nodeOps.getNodeRefById()` / `getNodeRefsByTitle()` / `getNodeRefsByType()` instead.
+
+5. **Shared mutable state between tests** — Variables declared outside `test()` blocks, `let` state mutated across tests, or tests depending on execution order. Each test must be independently runnable.
+
+6. **Missing cleanup of server-persisted state** — Settings changed via `comfyPage.settings.setSetting()` persist across tests. Must be reset in `afterEach` or at test start. Same for uploaded files or saved workflows. Prefer moving cleanup into [fixture options](https://playwright.dev/docs/test-fixtures#fixtures-options) so individual tests don't manage reset logic.
+
+7. **Double-click without `{ delay }` option** — `dblclick()` without `{ delay: 5 }` or similar can be too fast for the canvas event handler.
+
+### Fixture & API Misuse (Medium)
+
+8. **Reimplementing existing fixture helpers** — Before flagging, grep `browser_tests/fixtures/` for the functionality. Common missed helpers:
+   - `comfyPage.command.executeCommand()` for menu/command actions
+   - `comfyPage.workflow.loadWorkflow()` for loading test workflows
+   - `comfyPage.canvasOps.resetView()` for view reset
+   - `comfyPage.settings.setSetting()` for settings
+   - Component page objects in `browser_tests/fixtures/components/`
+
+9. **Building workflows programmatically when a JSON asset would work** — Complex `page.evaluate` chains to construct a graph should use a premade JSON workflow in `browser_tests/assets/` loaded via `comfyPage.workflow.loadWorkflow()`.
+
+10. **Selectors not using `TestIds`** — Hard-coded `data-testid` strings should reference `browser_tests/fixtures/selectors.ts` when a matching entry exists. Check `selectors.ts` before flagging.
+
+### Convention Violations (Minor)
+
+11. **Missing test tags** — Every `test.describe` should have `tag` with at least one of: `@smoke`, `@slow`, `@screenshot`, `@canvas`, `@node`, `@widget`, `@mobile`, `@2x`. See `.claude/skills/writing-playwright-tests/SKILL.md` for when to use each.
+
+12. **`as any` type assertions** — Forbidden in E2E tests. Use specific type assertions or test-local type helpers. See `docs/guidance/playwright.md` for acceptable patterns.
+
+13. **Screenshot tests without masking dynamic content** — Timestamps, version numbers, or other non-deterministic content in screenshots will cause flakes. Use `mask` option.
+
+14. **`test.describe` without `afterEach` cleanup when canvas state changes** — Tests that manipulate canvas view (drag, zoom, pan) should include `afterEach` with `comfyPage.canvasOps.resetView()`. Prefer moving canvas reset into the fixture so individual tests don't manage cleanup.
+
+15. **Debug helpers left in committed code** — `debugAddMarker`, `debugAttachScreenshot`, `debugShowCanvasOverlay`, `debugGetCanvasDataURL` are for local debugging only.
+
+### Test Design (Nitpick)
+
+16. **Screenshot-only assertions where functional assertions are possible** — Prefer `expect(await node.isPinned()).toBe(true)` over screenshot comparison when testing non-visual behavior.
+
+17. **Overly large test workflows** — Test should load the minimal workflow needed. If a test only needs one node, don't load the full default graph.
+
+18. **Vue Nodes / LiteGraph mismatch** — If testing Vue-rendered node UI (DOM widgets, CSS states), should use `comfyPage.vueNodes.*`. If testing canvas interactions/connections, should use `comfyPage.nodeOps.*`. Mixing both in one test is a smell.
+
+## Rules
+
+- Only review `.spec.ts` files and supporting code in `browser_tests/`
+- Do NOT flag patterns in fixture/helper code (`browser_tests/fixtures/`) — those are shared infrastructure with different rules
+- "Major" for flakiness risks (items 1-7), "medium" for fixture misuse (8-10), "minor" for convention violations (11-15), "nitpick" for test design (16-18)
+- When flagging missing fixture usage (item 8), confirm the helper exists by checking the fixture code — don't assume
+- Existing tests that predate conventions are acceptable to modify but not required to fix
--- a/.claude/skills/adding-deprecation-warnings/SKILL.md
+++ b/.claude/skills/adding-deprecation-warnings/SKILL.md
@@ -0,0 +1,84 @@
+---
+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
--- a/.github/actions/setup-frontend/action.yaml
+++ b/.github/actions/setup-frontend/action.yaml
@@ -13,8 +13,6 @@ runs:
    # Install pnpm, Node.js, build frontend
    - name: Install pnpm
      uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-      with:
-        version: 10

    - name: Setup Node.js
      uses: actions/setup-node@v6
--- a/.github/workflows/api-update-electron-api-types.yaml
+++ b/.github/workflows/api-update-electron-api-types.yaml
@@ -17,8 +17,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/api-update-manager-api-types.yaml
+++ b/.github/workflows/api-update-manager-api-types.yaml
@@ -22,8 +22,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/api-update-registry-api-types.yaml
+++ b/.github/workflows/api-update-registry-api-types.yaml
@@ -21,8 +21,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/ci-dist-telemetry-scan.yaml
+++ b/.github/workflows/ci-dist-telemetry-scan.yaml
@@ -20,8 +20,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Use Node.js
        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
--- a/.github/workflows/ci-oss-assets-validation.yaml
+++ b/.github/workflows/ci-oss-assets-validation.yaml
@@ -21,8 +21,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Use Node.js
        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
@@ -76,8 +74,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Use Node.js
        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
--- a/.github/workflows/ci-tests-e2e.yaml
+++ b/.github/workflows/ci-tests-e2e.yaml
@@ -33,6 +33,20 @@ jobs:
          path: dist/
          retention-days: 1

+      # Build cloud distribution for @cloud tagged tests
+      # NX_SKIP_NX_CACHE=true is required because `nx build` was already run
+      # for the OSS distribution above. Without skipping cache, Nx returns
+      # the cached OSS build since env vars aren't part of the cache key.
+      - name: Build cloud frontend
+        run: NX_SKIP_NX_CACHE=true pnpm build:cloud
+
+      - name: Upload cloud frontend
+        uses: actions/upload-artifact@v6
+        with:
+          name: frontend-dist-cloud
+          path: dist/
+          retention-days: 1
+
  # Sharded chromium tests
  playwright-tests-chromium-sharded:
    needs: setup
@@ -97,14 +111,14 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome, cloud]
    steps:
      - name: Checkout repository
        uses: actions/checkout@v6
      - name: Download built frontend
        uses: actions/download-artifact@v7
        with:
-          name: frontend-dist
+          name: ${{ matrix.browser == 'cloud' && 'frontend-dist-cloud' || 'frontend-dist' }}
          path: dist/

      - name: Start ComfyUI server
--- a/.github/workflows/pr-claude-review.yaml
+++ b/.github/workflows/pr-claude-review.yaml
@@ -30,8 +30,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/publish-desktop-ui.yaml
+++ b/.github/workflows/publish-desktop-ui.yaml
@@ -85,8 +85,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/release-biweekly-comfyui.yaml
+++ b/.github/workflows/release-biweekly-comfyui.yaml
@@ -76,8 +76,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
@@ -203,8 +201,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - uses: actions/setup-node@v6
        with:
--- a/.github/workflows/release-draft-create.yaml
+++ b/.github/workflows/release-draft-create.yaml
@@ -20,10 +20,10 @@ jobs:
    steps:
      - name: Checkout code
        uses: actions/checkout@v6
+
      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
      - uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'
--- a/.github/workflows/release-npm-types.yaml
+++ b/.github/workflows/release-npm-types.yaml
@@ -76,8 +76,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/release-pypi-dev.yaml
+++ b/.github/workflows/release-pypi-dev.yaml
@@ -16,10 +16,10 @@ jobs:
    steps:
      - name: Checkout code
        uses: actions/checkout@v6
+
      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10
+
      - uses: actions/setup-node@v6
        with:
          node-version-file: '.nvmrc'
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -144,8 +144,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/version-bump-desktop-ui.yaml
+++ b/.github/workflows/version-bump-desktop-ui.yaml
@@ -52,8 +52,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/weekly-docs-check.yaml
+++ b/.github/workflows/weekly-docs-check.yaml
@@ -30,8 +30,6 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
-        with:
-          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -216,6 +216,7 @@ See @docs/testing/\*.md for detailed patterns.
 1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
 2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
 3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
+4. Type all API mock responses in `route.fulfill()` using generated types or schemas from `packages/ingest-types`, `packages/registry-types`, `src/workbench/extensions/manager/types/generatedManagerTypes.ts`, or `src/schemas/` — see `docs/guidance/playwright.md` for the full source-of-truth table

 ## External Resources

--- a/apps/website/public/icons/social/discord.svg
+++ b/apps/website/public/icons/social/discord.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/public/icons/social/github.svg
+++ b/apps/website/public/icons/social/github.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/public/icons/social/instagram.svg
+++ b/apps/website/public/icons/social/instagram.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/public/icons/social/linkedin.svg
+++ b/apps/website/public/icons/social/linkedin.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/public/icons/social/reddit.svg
+++ b/apps/website/public/icons/social/reddit.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/public/icons/social/x.svg
+++ b/apps/website/public/icons/social/x.svg
@@ -0,0 +1 @@
+<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>
--- a/apps/website/src/components/SiteFooter.vue
+++ b/apps/website/src/components/SiteFooter.vue
@@ -0,0 +1,143 @@
+<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>
--- a/apps/website/src/components/SiteNav.vue
+++ b/apps/website/src/components/SiteNav.vue
@@ -0,0 +1,149 @@
+<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 inset-x-0 top-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 text-brand-yellow italic">
+        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 transition-opacity hover:opacity-90'
+                : 'border border-brand-yellow text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black'
+            "
+            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 transition-opacity hover:opacity-90'
+                : 'border border-brand-yellow text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black'
+            "
+            class="rounded-full px-5 py-2 text-center text-sm font-semibold"
+          >
+            {{ cta.label }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -0,0 +1,86 @@
+---
+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>
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -5,5 +5,5 @@
      "@/*": ["./src/*"]
    }
  },
-  "include": ["src/**/*", "astro.config.mjs"]
+  "include": ["src/**/*", "astro.config.ts"]
 }
--- a/browser_tests/AGENTS.md
+++ b/browser_tests/AGENTS.md
@@ -12,12 +12,13 @@ browser_tests/
 │   ├── ComfyMouse.ts     - Mouse interaction helper
 │   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
 │   ├── selectors.ts      - Centralized TestIds
-│   ├── components/       - Page object components
+│   ├── data/             - Static test data (mock API responses, workflow JSONs, node definitions)
+│   ├── components/       - Page object components (locators, user interactions)
 │   │   ├── ContextMenu.ts
 │   │   ├── SettingDialog.ts
 │   │   ├── SidebarTab.ts
 │   │   └── Topbar.ts
-│   ├── helpers/          - Focused helper classes
+│   ├── helpers/          - Focused helper classes (domain-specific actions)
 │   │   ├── CanvasHelper.ts
 │   │   ├── CommandHelper.ts
 │   │   ├── KeyboardHelper.ts
@@ -25,11 +26,36 @@ browser_tests/
 │   │   ├── SettingsHelper.ts
 │   │   ├── WorkflowHelper.ts
 │   │   └── ...
-│   └── utils/            - Utility functions
+│   └── utils/            - Pure utility functions (no page dependency)
 ├── helpers/          - Test-specific utilities
 └── tests/            - Test files (*.spec.ts)
 ```

+### Architectural Separation
+
+- **`fixtures/data/`** — Static test data only. Mock API responses, workflow JSONs, node definitions. No code, no imports from Playwright.
+- **`fixtures/components/`** — Page object components. Encapsulate locators and user interactions for a specific UI area.
+- **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
+- **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.
+
+## 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                                                                                                     |
--- a/browser_tests/assets/widgets/image_compare_widget.json
+++ b/browser_tests/assets/widgets/image_compare_widget.json
@@ -0,0 +1,42 @@
+{
+  "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
+}
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -40,6 +40,7 @@ import { SubgraphHelper } from './helpers/SubgraphHelper'
 import { ToastHelper } from './helpers/ToastHelper'
 import { WorkflowHelper } from './helpers/WorkflowHelper'
 import type { NodeReference } from './utils/litegraphUtils'
+import { assetPath } from './utils/paths'
 import type { WorkspaceStore } from '../types/globals'

 dotenvConfig()
@@ -242,7 +243,7 @@ export class ComfyPage {
    this.workflow = new WorkflowHelper(this)
    this.contextMenu = new ContextMenu(page)
    this.toast = new ToastHelper(page)
-    this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
+    this.dragDrop = new DragDropHelper(page)
    this.featureFlags = new FeatureFlagHelper(page)
    this.command = new CommandHelper(page)
    this.bottomPanel = new BottomPanel(page)
@@ -343,8 +344,9 @@ export class ComfyPage {
    await this.nextFrame()
  }

+  /** @deprecated Use standalone `assetPath` from `browser_tests/fixtures/utils/assetPath` directly. */
  public assetPath(fileName: string) {
-    return `./browser_tests/assets/${fileName}`
+    return assetPath(fileName)
  }

  async goto() {
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -31,10 +31,14 @@ export class VueNodeHelpers {
  }

  /**
-   * Get locator for a Vue node by the node's title (displayed name in the header)
+   * Get locator for Vue nodes by the node's title (displayed name in the header).
+   * Matches against the actual title element, not the full node body.
+   * Use `.first()` for unique titles, `.nth(n)` for duplicates.
   */
  getNodeByTitle(title: string): Locator {
-    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+    return this.page.locator('[data-node-id]').filter({
+      has: this.page.locator('[data-testid="node-title"]', { hasText: title })
+    })
  }

  /**
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -1,3 +1,4 @@
+import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'

 export class ContextMenu {
@@ -33,6 +34,20 @@ export class ContextMenu {
    return primeVueVisible || litegraphVisible
  }

+  async assertHasItems(items: string[]): Promise<void> {
+    for (const item of items) {
+      await expect
+        .soft(this.page.getByRole('menuitem', { name: item }))
+        .toBeVisible()
+    }
+  }
+
+  async openFor(locator: Locator): Promise<this> {
+    await locator.click({ button: 'right' })
+    await expect.poll(() => this.isVisible()).toBe(true)
+    return this
+  }
+
  async waitForHidden(): Promise<void> {
    const waitIfExists = async (locator: Locator, menuName: string) => {
      const count = await locator.count()
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeHelper.ts
@@ -3,17 +3,28 @@ 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 {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  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)
+  }

  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
@@ -24,42 +35,6 @@ 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(() => {
@@ -68,7 +43,15 @@ export class AppModeHelper {
    await this.comfyPage.nextFrame()
  }

-  /** Set up inputs/outputs on the graph and enter app mode. */
+  /**
+   * Inject linearData into the current graph and enter app mode.
+   *
+   * Serializes the graph, injects linearData with the given inputs and
+   * auto-detected output node IDs, then reloads so the appModeStore
+   * picks up the data via its activeWorkflow watcher.
+   *
+   * @param inputs - Widget selections as [nodeId, widgetName] tuples
+   */
  async enterAppModeWithInputs(inputs: [string, string][]) {
    await this.page.evaluate(async (inputTuples) => {
      const graph = window.app!.graph
@@ -105,87 +88,9 @@ export class AppModeHelper {
   * @param widgetName Text shown in the widget label (e.g. "seed").
   */
  getAppModeWidgetMenu(widgetName: string): Locator {
-    // In the zone-based layout, widgets render inside NodeWidgets within zones.
-    // Fall back to searching the entire linear-widgets container by text.
    return this.linearWidgets
-      .locator(`[aria-label*="${widgetName}"]`)
+      .locator(`div:has(> div > span:text-is("${widgetName}"))`)
      .getByTestId(TestIds.builder.widgetActionsMenu)
      .first()
-      .or(
-        this.linearWidgets
-          .locator(`div:has(> div > span:text-is("${widgetName}"))`)
-          .getByTestId(TestIds.builder.widgetActionsMenu)
-          .first()
-      )
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder input-select
-   * sidebar (IoItem).
-   * @param title The widget title shown in the IoItem.
-   */
-  getBuilderInputItemMenu(title: string): Locator {
-    return this.page
-      .getByTestId(TestIds.builder.ioItem)
-      .filter({ hasText: title })
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /**
-   * Get the actions menu trigger for a widget in the builder preview/arrange
-   * sidebar (AppModeWidgetList with builderMode).
-   * @param ariaLabel The aria-label on the widget row, e.g. "seed — KSampler".
-   */
-  getBuilderPreviewWidgetMenu(ariaLabel: string): Locator {
-    return this.page
-      .locator(`[aria-label="${ariaLabel}"]`)
-      .getByTestId(TestIds.builder.widgetActionsMenu)
-  }
-
-  /** The builder footer nav containing save/navigation buttons. */
-  private get builderFooterNav(): Locator {
-    return this.page
-      .getByRole('button', { name: 'Exit app builder' })
-      .locator('..')
-  }
-
-  /** Get a button in the builder footer by its accessible name. */
-  getFooterButton(name: string | RegExp): Locator {
-    return this.builderFooterNav.getByRole('button', { name })
-  }
-
-  /** Click the save/save-as button in the builder footer. */
-  async clickSave() {
-    await this.getFooterButton(/^Save/).first().click()
-    await this.comfyPage.nextFrame()
-  }
-
-  /** The "Opens as" popover tab above the builder footer. */
-  get opensAsPopover(): Locator {
-    return this.page.getByTestId(TestIds.builder.opensAs)
-  }
-
-  /**
-   * Rename a widget by clicking its popover trigger, selecting "Rename",
-   * and filling in the inline input that appears.
-   * @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()
-
-    // The rename input appears inline — either as an EditableText input
-    // (PrimeVue InputText) inside an IoItem, or as a plain <input> inside
-    // the builder zone in SidebarAppLayout.
-    const renameInput = this.page
-      .locator(
-        '[data-testid="builder-io-item"] .editable-text input, [data-testid="linear-widgets"] input[type="text"]'
-      )
-      .first()
-    await renameInput.fill(newName)
-    await this.page.keyboard.press('Enter')
-    await renameInput.waitFor({ state: 'hidden' })
-    await this.comfyPage.nextFrame()
  }
 }
--- a/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderFooterHelper.ts
@@ -0,0 +1,69 @@
+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()
+  }
+}
--- a/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSaveAsHelper.ts
@@ -0,0 +1,78 @@
+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()
+  }
+}
--- a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -0,0 +1,139 @@
+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()
+  }
+}
--- a/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderStepsHelper.ts
@@ -0,0 +1,30 @@
+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()
+  }
+}
--- a/browser_tests/fixtures/helpers/CanvasHelper.ts
+++ b/browser_tests/fixtures/helpers/CanvasHelper.ts
@@ -169,6 +169,39 @@ 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,
--- a/browser_tests/fixtures/helpers/DragDropHelper.ts
+++ b/browser_tests/fixtures/helpers/DragDropHelper.ts
@@ -4,12 +4,10 @@ import type { Page } from '@playwright/test'

 import type { Position } from '../types'
 import { getMimeType } from './mimeTypeUtil'
+import { assetPath } from '../utils/paths'

 export class DragDropHelper {
-  constructor(
-    private readonly page: Page,
-    private readonly assetPath: (fileName: string) => string
-  ) {}
+  constructor(private readonly page: Page) {}

  private async nextFrame(): Promise<void> {
    await this.page.evaluate(() => {
@@ -49,7 +47,7 @@ export class DragDropHelper {
    } = { dropPosition, preserveNativePropagation }

    if (fileName) {
-      const filePath = this.assetPath(fileName)
+      const filePath = assetPath(fileName)
      const buffer = readFileSync(filePath)

      evaluateParams.fileName = fileName
--- a/browser_tests/fixtures/helpers/PerformanceHelper.ts
+++ b/browser_tests/fixtures/helpers/PerformanceHelper.ts
@@ -30,6 +30,8 @@ export interface PerfMeasurement {
  eventListeners: number
  totalBlockingTimeMs: number
  frameDurationMs: number
+  p95FrameDurationMs: number
+  allFrameDurationsMs: number[]
 }

 export class PerformanceHelper {
@@ -101,13 +103,13 @@ export class PerformanceHelper {
  }

  /**
-   * Measure average frame duration via rAF timing over a sample window.
-   * Returns average ms per frame (lower = better, 16.67 = 60fps).
+   * Measure individual frame durations via rAF timing over a sample window.
+   * Returns all per-frame durations so callers can compute avg, p95, etc.
   */
-  private async measureFrameDuration(sampleFrames = 10): Promise<number> {
+  private async measureFrameDurations(sampleFrames = 30): Promise<number[]> {
    return this.page.evaluate((frames) => {
-      return new Promise<number>((resolve) => {
-        const timeout = setTimeout(() => resolve(0), 5000)
+      return new Promise<number[]>((resolve) => {
+        const timeout = setTimeout(() => resolve([]), 5000)
        const timestamps: number[] = []
        let count = 0
        function tick(ts: number) {
@@ -118,11 +120,14 @@ export class PerformanceHelper {
          } else {
            clearTimeout(timeout)
            if (timestamps.length < 2) {
-              resolve(0)
+              resolve([])
              return
            }
-            const total = timestamps[timestamps.length - 1] - timestamps[0]
-            resolve(total / (timestamps.length - 1))
+            const durations: number[] = []
+            for (let i = 1; i < timestamps.length; i++) {
+              durations.push(timestamps[i] - timestamps[i - 1])
+            }
+            resolve(durations)
          }
        }
        requestAnimationFrame(tick)
@@ -177,11 +182,21 @@ export class PerformanceHelper {
      return after[key] - before[key]
    }

-    const [totalBlockingTimeMs, frameDurationMs] = await Promise.all([
+    const [totalBlockingTimeMs, allFrameDurationsMs] = await Promise.all([
      this.collectTBT(),
-      this.measureFrameDuration()
+      this.measureFrameDurations()
    ])

+    const frameDurationMs =
+      allFrameDurationsMs.length > 0
+        ? allFrameDurationsMs.reduce((a, b) => a + b, 0) /
+          allFrameDurationsMs.length
+        : 0
+
+    const sorted = [...allFrameDurationsMs].sort((a, b) => a - b)
+    const p95FrameDurationMs =
+      sorted.length > 0 ? sorted[Math.ceil(sorted.length * 0.95) - 1] : 0
+
    return {
      name,
      durationMs: delta('Timestamp') * 1000,
@@ -197,7 +212,9 @@ export class PerformanceHelper {
      scriptDurationMs: delta('ScriptDuration') * 1000,
      eventListeners: delta('JSEventListeners'),
      totalBlockingTimeMs,
-      frameDurationMs
+      frameDurationMs,
+      p95FrameDurationMs,
+      allFrameDurationsMs
    }
  }
 }
--- a/browser_tests/fixtures/helpers/SubgraphHelper.ts
+++ b/browser_tests/fixtures/helpers/SubgraphHelper.ts
@@ -1,10 +1,11 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
+import type { ConsoleMessage, Locator, 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'
@@ -413,4 +414,138 @@ 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) }
+  }
 }
--- a/browser_tests/fixtures/helpers/WorkflowHelper.ts
+++ b/browser_tests/fixtures/helpers/WorkflowHelper.ts
@@ -1,11 +1,13 @@
 import { readFileSync } from 'fs'

+import type { AppMode } from '../../../src/composables/useAppMode'
 import type {
  ComfyApiWorkflow,
  ComfyWorkflowJSON
 } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { WorkspaceStore } from '../../types/globals'
 import type { ComfyPage } from '../ComfyPage'
+import { assetPath } from '../utils/paths'

 type FolderStructure = {
  [key: string]: FolderStructure | string
@@ -19,7 +21,7 @@ export class WorkflowHelper {

    for (const [key, value] of Object.entries(structure)) {
      if (typeof value === 'string') {
-        const filePath = this.comfyPage.assetPath(value)
+        const filePath = assetPath(value)
        result[key] = readFileSync(filePath, 'utf-8')
      } else {
        result[key] = this.convertLeafToContent(value)
@@ -58,7 +60,7 @@ export class WorkflowHelper {

  async loadWorkflow(workflowName: string) {
    await this.comfyPage.workflowUploadInput.setInputFiles(
-      this.comfyPage.assetPath(`${workflowName}.json`)
+      assetPath(`${workflowName}.json`)
    )
    await this.comfyPage.nextFrame()
  }
@@ -104,6 +106,40 @@ 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
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -20,6 +20,7 @@ export const TestIds = {
    main: 'graph-canvas',
    contextMenu: 'canvas-context-menu',
    toggleMinimapButton: 'toggle-minimap-button',
+    closeMinimapButton: 'close-minimap-button',
    toggleLinkVisibilityButton: 'toggle-link-visibility-button',
    zoomControlsButton: 'zoom-controls-button',
    zoomInAction: 'zoom-in-action',
@@ -51,7 +52,8 @@ export const TestIds = {
  topbar: {
    queueButton: 'queue-button',
    queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    saveButton: 'save-workflow-button',
+    subscribeButton: 'topbar-subscribe-button'
  },
  nodeLibrary: {
    bookmarksSection: 'node-library-bookmarks-section'
@@ -77,6 +79,10 @@ 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',
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -392,6 +392,11 @@ 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,
--- a/browser_tests/fixtures/utils/paths.ts
+++ b/browser_tests/fixtures/utils/paths.ts
@@ -0,0 +1,3 @@
+export function assetPath(fileName: string): string {
+  return `./browser_tests/assets/${fileName}`
+}
--- a/browser_tests/helpers/builderTestUtils.ts
+++ b/browser_tests/helpers/builderTestUtils.ts
@@ -6,46 +6,6 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 import { fitToViewInstant } from './fitToView'
 import { getPromotedWidgetNames } from './promotedWidgets'

-/** Click the first SaveImage/PreviewImage node on the canvas. */
-async function selectOutputNode(comfyPage: ComfyPage) {
-  const { page } = comfyPage
-
-  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()
-
-  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()
-}
-
-/** Center on a node and click its first widget to select it as input. */
-async function selectInputWidget(comfyPage: ComfyPage, node: NodeReference) {
-  const { page } = comfyPage
-
-  await comfyPage.canvasOps.setScale(1)
-  await node.centerOnNode()
-
-  const widgetRef = await node.getWidget(0)
-  const widgetPos = await widgetRef.getPosition()
-  const titleHeight = await page.evaluate(
-    () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
-  )
-  await page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
-  await comfyPage.nextFrame()
-}
-
 /**
 * Enter builder on the default workflow and select I/O.
 *
@@ -70,11 +30,11 @@ export async function setupBuilder(

  await fitToViewInstant(comfyPage)
  await appMode.enterBuilder()
-  await appMode.goToInputs()
-  await selectInputWidget(comfyPage, inputNode)
+  await appMode.steps.goToInputs()
+  await appMode.select.selectInputWidget(inputNode)

-  await appMode.goToOutputs()
-  await selectOutputNode(comfyPage)
+  await appMode.steps.goToOutputs()
+  await appMode.select.selectOutputNode()

  return inputNode
 }
--- a/browser_tests/helpers/perfReporter.ts
+++ b/browser_tests/helpers/perfReporter.ts
@@ -12,10 +12,44 @@ 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`
-  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(m))
+  const { allFrameDurationsMs: _, ...serializable } = m
+  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(serializable))
 }

 export function writePerfReport(
--- a/browser_tests/helpers/subgraphTestUtils.ts
+++ b/browser_tests/helpers/subgraphTestUtils.ts
@@ -1,45 +0,0 @@
-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)
-}
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -22,20 +22,22 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    )
  })

-  test('Rename from builder input-select sidebar', async ({ comfyPage }) => {
+  test('Rename from builder input-select sidebar via menu', async ({
+    comfyPage
+  }) => {
    const { appMode } = comfyPage
    await setupSubgraphBuilder(comfyPage)

    // Go back to inputs step where IoItems are shown
-    await appMode.goToInputs()
+    await appMode.steps.goToInputs()

-    const menu = appMode.getBuilderInputItemMenu('seed')
+    const menu = appMode.select.getInputItemMenu('seed')
    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Builder Input Seed')
+    await appMode.select.renameInputViaMenu('seed', 'Builder Input Seed')

    // Verify in app mode after save/reload
-    await appMode.exitBuilder()
-    const workflowName = `${new Date().getTime()} builder-input`
+    await appMode.footer.exitBuilder()
+    const workflowName = `${new Date().getTime()} builder-input-menu`
    await saveAndReopenInAppMode(comfyPage, workflowName)

    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
@@ -44,19 +46,36 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    ).toBeVisible()
  })

-  test('Rename from builder preview step', async ({ comfyPage }) => {
+  test('Rename from builder input-select sidebar via double-click', async ({
+    comfyPage
+  }) => {
    const { appMode } = comfyPage
    await setupSubgraphBuilder(comfyPage)

-    // In the new zone layout, rename is done from the inputs step
-    await appMode.goToInputs()
+    await appMode.steps.goToInputs()

-    const menu = appMode.getBuilderInputItemMenu('seed')
+    await appMode.select.renameInput('seed', 'Dblclick Seed')
+
+    await appMode.footer.exitBuilder()
+    const workflowName = `${new Date().getTime()} builder-input-dblclick`
+    await saveAndReopenInAppMode(comfyPage, workflowName)
+
+    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
+    await expect(appMode.linearWidgets.getByText('Dblclick Seed')).toBeVisible()
+  })
+
+  test('Rename from builder preview sidebar', async ({ comfyPage }) => {
+    const { appMode } = comfyPage
+    await setupSubgraphBuilder(comfyPage)
+
+    await appMode.steps.goToPreview()
+
+    const menu = appMode.select.getPreviewWidgetMenu('seed — New Subgraph')
    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'Preview Seed')
+    await appMode.select.renameWidget(menu, 'Preview Seed')

    // Verify in app mode after save/reload
-    await appMode.exitBuilder()
+    await appMode.footer.exitBuilder()
    const workflowName = `${new Date().getTime()} builder-preview`
    await saveAndReopenInAppMode(comfyPage, workflowName)

@@ -64,21 +83,19 @@ test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
    await expect(appMode.linearWidgets.getByText('Preview Seed')).toBeVisible()
  })

-  test('Rename persists across app mode toggle', async ({ comfyPage }) => {
+  test('Rename from app mode', async ({ comfyPage }) => {
    const { appMode } = comfyPage
    await setupSubgraphBuilder(comfyPage)

-    // Rename via builder inputs step (app mode no longer has inline rename)
-    await appMode.goToInputs()
-    const menu = appMode.getBuilderInputItemMenu('seed')
-    await expect(menu).toBeVisible({ timeout: 5000 })
-    await appMode.renameWidget(menu, 'App Mode Seed')
-
-    // Exit builder and enter app mode
-    await appMode.exitBuilder()
+    // Enter app mode from builder
+    await appMode.footer.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 expect(appMode.linearWidgets.getByText('App Mode Seed')).toBeVisible()

    // Verify persistence after save/reload
--- a/browser_tests/tests/browserTabTitle.spec.ts
+++ b/browser_tests/tests/browserTabTitle.spec.ts
@@ -19,24 +19,26 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
        .toBe(`*${workflowName} - ComfyUI`)
    })

-    // Failing on CI
-    // Cannot reproduce locally
-    test.skip('Can display workflow name with unsaved changes', async ({
+    test('Can display workflow name with unsaved changes', async ({
      comfyPage
    }) => {
-      const workflowName = await comfyPage.page.evaluate(async () => {
-        return (window.app!.extensionManager as WorkspaceStore).workflow
-          .activeWorkflow?.filename
+      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()
      })
-      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`)
+      await expect
+        .poll(() => comfyPage.page.title())
+        .toBe(`*${workflowName} - ComfyUI`)

      // Delete the saved workflow for cleanup.
      await comfyPage.page.evaluate(async () => {
--- a/browser_tests/tests/builderSaveFlow.spec.ts
+++ b/browser_tests/tests/builderSaveFlow.spec.ts
@@ -2,10 +2,60 @@ import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { setupSubgraphBuilder } from '../helpers/builderTestUtils'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
+import { setupBuilder } from '../helpers/builderTestUtils'
 import { fitToViewInstant } from '../helpers/fitToView'

-test.describe('Builder save flow', { tag: ['@ui', '@subgraph'] }, () => {
+/**
+ * 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 = {
@@ -21,231 +71,301 @@ test.describe('Builder save flow', { tag: ['@ui', '@subgraph'] }, () => {
  })

  test('Save as dialog appears for unsaved workflow', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+    const { saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
+    await comfyPage.appMode.footer.saveAsButton.click()

-    // The save-as dialog should appear with filename input and view type selection
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
-    await expect(dialog.getByRole('textbox')).toBeVisible()
-    await expect(dialog.getByText('Save as')).toBeVisible()
-
-    // View type radio group should be present
-    const radioGroup = dialog.getByRole('radiogroup')
-    await expect(radioGroup).toBeVisible()
+    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
  }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
-
-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
-
-    const workflowName = `${Date.now()} builder-save-test`
-    const input = dialog.getByRole('textbox')
-    await input.fill(workflowName)
-
-    // Save button should be enabled now
-    const saveButton = dialog.getByRole('button', { name: 'Save' })
-    await expect(saveButton).toBeEnabled()
-    await saveButton.click()
-
-    // Success dialog should appear
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
+    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 { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+    const { saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)
+    await comfyPage.appMode.footer.saveAsButton.click()

-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.dialog).toBeVisible({ timeout: 5000 })
+    await saveAs.nameInput.fill('')
+    await expect(saveAs.saveButton).toBeDisabled()
+  })

-    // Clear the filename input
-    const input = dialog.getByRole('textbox')
-    await input.fill('')
+  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()

-    // Save button should be disabled
-    const saveButton = dialog.getByRole('button', { name: 'Save' })
-    await expect(saveButton).toBeDisabled()
+    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 { appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    const { footer } = comfyPage.appMode
+    await setupBuilder(comfyPage)

-    // Should start at outputs (we ended there in setup)
-    // Navigate to inputs
-    await appMode.goToInputs()
+    await comfyPage.appMode.steps.goToInputs()

-    // Back button should be disabled on first step
-    const backButton = appMode.getFooterButton('Back')
-    await expect(backButton).toBeDisabled()
+    await expect(footer.backButton).toBeDisabled()
+    await expect(footer.nextButton).toBeEnabled()

-    // Next button should be enabled
-    const nextButton = appMode.getFooterButton('Next')
-    await expect(nextButton).toBeEnabled()
+    await footer.next()
+    await expect(footer.backButton).toBeEnabled()

-    // Navigate forward
-    await appMode.next()
-
-    // Back button should now be enabled
-    await expect(backButton).toBeEnabled()
-
-    // Navigate to preview (last step)
-    await appMode.next()
-
-    // Next button should be disabled on last step
-    await expect(nextButton).toBeDisabled()
+    await footer.next()
+    await expect(footer.nextButton).toBeDisabled()
  })

  test('Escape key exits builder mode', async ({ comfyPage }) => {
-    const { page } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    await setupBuilder(comfyPage)

-    // Verify builder toolbar is visible
-    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
-    await expect(toolbar).toBeVisible()
+    await expect(comfyPage.appMode.steps.toolbar).toBeVisible()

-    // Press Escape
-    await page.keyboard.press('Escape')
+    await comfyPage.page.keyboard.press('Escape')
    await comfyPage.nextFrame()

-    // Builder toolbar should be gone
-    await expect(toolbar).not.toBeVisible()
+    await expect(comfyPage.appMode.steps.toolbar).not.toBeVisible()
  })

  test('Exit builder button exits builder mode', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
+    await setupBuilder(comfyPage)

-    const toolbar = page.getByRole('navigation', { name: 'App Builder' })
-    await expect(toolbar).toBeVisible()
-
-    await appMode.exitBuilder()
-
-    await expect(toolbar).not.toBeVisible()
+    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 { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
+    const { footer, saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)

-    // First save via builder save-as to make it non-temporary
-    await appMode.clickSave()
-    const saveAsDialog = page.getByRole('dialog')
-    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
-    const workflowName = `${Date.now()} builder-direct-save`
-    await saveAsDialog.getByRole('textbox').fill(workflowName)
-    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
-
-    // Dismiss the success dialog
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
-    await successDialog.getByText('Close', { exact: true }).click()
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} direct-save`, 'App')
+    await saveAs.closeButton.click()
    await comfyPage.nextFrame()

-    // Now click save again — should save directly
-    await appMode.clickSave()
+    // 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 expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 2000 })
-    await expect(appMode.getFooterButton(/^Save$/)).toBeDisabled()
+    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 { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
+    const { footer, saveAs } = comfyPage.appMode
+    await setupBuilder(comfyPage)

-    // First save via builder save-as to make it non-temporary
-    await appMode.clickSave()
-    const saveAsDialog = page.getByRole('dialog')
-    await expect(saveAsDialog).toBeVisible({ timeout: 5000 })
-    const workflowName = `${Date.now()} builder-split-btn`
-    await saveAsDialog.getByRole('textbox').fill(workflowName)
-    await saveAsDialog.getByRole('button', { name: 'Save' }).click()
-
-    // Dismiss the success dialog
-    const successDialog = page.getByRole('dialog')
-    await expect(successDialog.getByText('Successfully saved')).toBeVisible({
-      timeout: 5000
-    })
-    await successDialog.getByText('Close', { exact: true }).click()
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} split-btn`, 'App')
+    await saveAs.closeButton.click()
    await comfyPage.nextFrame()

-    // Click the chevron dropdown trigger
-    const chevronButton = appMode.getFooterButton('Save as')
-    await chevronButton.click()
+    await footer.openSaveAsFromChevron()

-    // "Save as" menu item should appear
-    const menuItem = page.getByRole('menuitem', { name: 'Save as' })
-    await expect(menuItem).toBeVisible({ timeout: 5000 })
-    await menuItem.click()
-
-    // Save-as dialog should appear
-    const newSaveAsDialog = page.getByRole('dialog')
-    await expect(newSaveAsDialog.getByText('Save as')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(newSaveAsDialog.getByRole('textbox')).toBeVisible()
+    await expect(saveAs.title).toBeVisible({ timeout: 5000 })
+    await expect(saveAs.nameInput).toBeVisible()
  })

  test('Connect output popover appears when no outputs selected', async ({
    comfyPage
  }) => {
-    const { page, appMode } = comfyPage
    await comfyPage.workflow.loadWorkflow('default')
    await fitToViewInstant(comfyPage)
-    await appMode.enterBuilder()
+    await comfyPage.appMode.enterBuilder()

-    // Without selecting any outputs, click the save button
-    // It should trigger the connect-output popover
-    await appMode.clickSave()
+    await comfyPage.appMode.footer.saveAsButton.click()

-    // The popover should show a message about connecting outputs
    await expect(
-      page.getByText('Connect an output', { exact: false })
+      comfyPage.page.getByText('Connect an output', { exact: false })
    ).toBeVisible({ timeout: 5000 })
  })

-  test('View type can be toggled in save-as dialog', async ({ comfyPage }) => {
-    const { page, appMode } = comfyPage
-    await setupSubgraphBuilder(comfyPage)
-    await appMode.goToPreview()
-    await appMode.clickSave()
+  test('save as app produces correct extension and linearMode', async ({
+    comfyPage
+  }) => {
+    await setupBuilder(comfyPage)
+    await builderSaveAs(comfyPage.appMode, `${Date.now()} app-ext`, 'App')

-    const dialog = page.getByRole('dialog')
-    await expect(dialog).toBeVisible({ timeout: 5000 })
+    const path = await comfyPage.workflow.getActiveWorkflowPath()
+    expect(path).toContain('.app.json')

-    // App should be selected by default
-    const appRadio = dialog.getByRole('radio', { name: /App/ })
-    await expect(appRadio).toHaveAttribute('aria-checked', 'true')
+    const linearMode = await comfyPage.workflow.getLinearModeFromGraph()
+    expect(linearMode).toBe(true)
+  })

-    // Click Node graph option
-    const graphRadio = dialog.getByRole('radio', { name: /Node graph/ })
-    await graphRadio.click()
-    await expect(graphRadio).toHaveAttribute('aria-checked', 'true')
-    await expect(appRadio).toHaveAttribute('aria-checked', 'false')
+  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')
  })
 })
--- a/browser_tests/tests/cloud.spec.ts
+++ b/browser_tests/tests/cloud.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Cloud distribution E2E tests.
+ *
+ * These tests run against the cloud build (DISTRIBUTION=cloud) and verify
+ * that cloud-specific behavior is present. In CI, no Firebase auth is
+ * configured, so the auth guard redirects to /cloud/login. The tests
+ * verify the cloud build loaded correctly by checking for cloud-only
+ * routes and elements.
+ */
+test.describe('Cloud distribution UI', { tag: '@cloud' }, () => {
+  test('cloud build redirects unauthenticated users to login', async ({
+    page
+  }) => {
+    await page.goto('http://localhost:8188')
+    // Cloud build has an auth guard that redirects to /cloud/login.
+    // This route only exists in the cloud distribution — it's tree-shaken
+    // in the OSS build. Its presence confirms the cloud build is active.
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+  })
+
+  test('cloud login page renders sign-in options', async ({ page }) => {
+    await page.goto('http://localhost:8188')
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+    // Verify cloud-specific login UI is rendered
+    await expect(page.getByRole('button', { name: /google/i })).toBeVisible()
+  })
+})
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -256,27 +256,6 @@ test.describe('Missing models in Error Tab', () => {
      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlayMessages)
    ).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')
-  })
 })

 test.describe('Settings', () => {
--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -55,46 +55,4 @@ 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()
-  })
 })
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -94,13 +94,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
        .click()
    })
  })
-  // 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(
+  test(
    'Can be added to canvas using search',
    { tag: '@screenshot' },
    async ({ comfyPage }) => {
@@ -108,7 +102,16 @@ test.describe('Group Node', { tag: '@node' }, () => {
      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
      await comfyPage.canvasOps.doubleClick()
      await comfyPage.nextFrame()
-      await comfyPage.searchBox.fillAndSelectFirstNode(groupNodeName)
+      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 expect(comfyPage.canvas).toHaveScreenshot(
        'group-node-copy-added-from-search.png'
      )
--- a/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png
+++ b/browser_tests/tests/groupNode.spec.ts-snapshots/group-node-copy-added-from-search-chromium-linux.png
--- a/browser_tests/tests/imageCompare.spec.ts
+++ b/browser_tests/tests/imageCompare.spec.ts
@@ -0,0 +1,81 @@
+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')
+    }
+  )
+})
--- a/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png
+++ b/browser_tests/tests/imageCompare.spec.ts-snapshots/image-compare-default-50-chromium-linux.png
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -175,7 +175,9 @@ 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')
+    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png', {
+      maxDiffPixels: 50
+    })
  })

  test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
@@ -220,10 +222,7 @@ test.describe('Node Interaction', () => {
      await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
    })

-    // 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
-    }) => {
+    test('Can copy link by shift-drag existing link', async ({ comfyPage }) => {
      await comfyPage.canvasOps.dragAndDrop(
        DefaultGraphPositions.clipTextEncodeNode1InputSlot,
        DefaultGraphPositions.emptySpace
@@ -815,11 +814,15 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
        'Comfy.Workflow.WorkflowTabsPosition',
        'Topbar'
      )
-      const tabs = await comfyPage.menu.topbar.getTabNames()
-      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()

-      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      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(activeWorkflowName).toEqual(workflowB)
    })

--- a/browser_tests/tests/interaction.spec.ts-snapshots/copied-link-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/copied-link-chromium-linux.png
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts
@@ -68,7 +68,7 @@ test.describe(
      })
    })

-    test.fixme('Load workflow from URL dropped onto Vue node', async ({
+    test('Load workflow from URL dropped onto Vue node', async ({
      comfyPage
    }) => {
      const fakeUrl = 'https://example.com/workflow.png'
--- a/browser_tests/tests/minimap.spec.ts
+++ b/browser_tests/tests/minimap.spec.ts
@@ -78,4 +78,66 @@ test.describe('Minimap', { tag: '@canvas' }, () => {

    await expect(minimapContainer).toBeVisible()
  })
+
+  test('Close button hides minimap', async ({ comfyPage }) => {
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    await expect(minimap).toBeVisible()
+
+    await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
+    await expect(minimap).not.toBeVisible()
+
+    const toggleButton = comfyPage.page.getByTestId(
+      TestIds.canvas.toggleMinimapButton
+    )
+    await expect(toggleButton).toBeVisible()
+  })
+
+  test(
+    'Panning canvas moves minimap viewport',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
+
+      await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        canvas.ds.scale = 3
+        canvas.ds.offset[0] = -800
+        canvas.ds.offset[1] = -600
+        canvas.setDirty(true, true)
+      })
+      await expect(minimap).toHaveScreenshot('minimap-after-pan.png')
+    }
+  )
+
+  test(
+    'Viewport rectangle is visible and positioned within minimap',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      const viewport = minimap.locator('.minimap-viewport')
+      await expect(viewport).toBeVisible()
+
+      const minimapBox = await minimap.boundingBox()
+      const viewportBox = await viewport.boundingBox()
+
+      expect(minimapBox).toBeTruthy()
+      expect(viewportBox).toBeTruthy()
+      expect(viewportBox!.width).toBeGreaterThan(0)
+      expect(viewportBox!.height).toBeGreaterThan(0)
+
+      expect(viewportBox!.x + viewportBox!.width).toBeGreaterThan(minimapBox!.x)
+      expect(viewportBox!.y + viewportBox!.height).toBeGreaterThan(
+        minimapBox!.y
+      )
+      expect(viewportBox!.x).toBeLessThan(minimapBox!.x + minimapBox!.width)
+      expect(viewportBox!.y).toBeLessThan(minimapBox!.y + minimapBox!.height)
+
+      await expect(minimap).toHaveScreenshot('minimap-with-viewport.png')
+    }
+  )
 })
--- a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-after-pan-chromium-linux.png
+++ b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-after-pan-chromium-linux.png
--- a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-before-pan-chromium-linux.png
+++ b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-before-pan-chromium-linux.png
--- a/browser_tests/tests/minimap.spec.ts-snapshots/minimap-with-viewport-chromium-linux.png
+++ b/browser_tests/tests/minimap.spec.ts-snapshots/minimap-with-viewport-chromium-linux.png
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -481,6 +481,7 @@ 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(
--- a/browser_tests/tests/nodeSearchBox.spec.ts
+++ b/browser_tests/tests/nodeSearchBox.spec.ts
@@ -176,40 +176,13 @@ test.describe('Node search box', { tag: '@node' }, () => {
      await expectFilterChips(comfyPage, ['MODEL'])
    })

-    // 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 ({
+    test('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' })
-      const panelBounds = await panel.header.boundingBox()
-      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
+      await comfyPage.page.keyboard.press('Escape')

      // Verify the filter selection panel is hidden
      await expect(panel.header).not.toBeVisible()
--- a/browser_tests/tests/performance.spec.ts
+++ b/browser_tests/tests/performance.spec.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { recordMeasurement } from '../helpers/perfReporter'
+import { logMeasurement, recordMeasurement } from '../helpers/perfReporter'

 test.describe('Performance', { tag: ['@perf'] }, () => {
  test('canvas idle style recalculations', async ({ comfyPage }) => {
@@ -186,6 +186,22 @@ 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
  }) => {
--- a/browser_tests/tests/releaseNotifications.spec.ts
+++ b/browser_tests/tests/releaseNotifications.spec.ts
@@ -1,8 +1,23 @@
 import { expect } from '@playwright/test'

+import type { components } from '@comfyorg/registry-types'
+
+type ReleaseNote = components['schemas']['ReleaseNote']
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'

+function createMockRelease(overrides?: Partial<ReleaseNote>): ReleaseNote {
+  return {
+    id: 1,
+    project: 'comfyui',
+    version: 'v0.3.44',
+    attention: 'medium',
+    content: '## New Features\n\n- Added awesome feature',
+    published_at: new Date().toISOString(),
+    ...overrides
+  }
+}
+
 test.describe('Release Notifications', () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -22,15 +37,10 @@ test.describe('Release Notifications', () => {
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
+            createMockRelease({
              content:
-                '## New Features\n\n- Added awesome feature\n- Fixed important bug',
-              published_at: new Date().toISOString()
-            }
+                '## New Features\n\n- Added awesome feature\n- Fixed important bug'
+            })
          ])
        })
      } else {
@@ -157,16 +167,7 @@ test.describe('Release Notifications', () => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'high',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease({ attention: 'high' })])
        })
      } else {
        await route.continue()
@@ -250,16 +251,7 @@ test.describe('Release Notifications', () => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease()])
        })
      } else {
        await route.continue()
@@ -303,14 +295,10 @@ test.describe('Release Notifications', () => {
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
+            createMockRelease({
              attention: 'low',
-              content: '## Bug Fixes\n\n- Fixed minor issue',
-              published_at: new Date().toISOString()
-            }
+              content: '## Bug Fixes\n\n- Fixed minor issue'
+            })
          ])
        })
      } else {
--- a/browser_tests/tests/sidebar/workflows.spec.ts
+++ b/browser_tests/tests/sidebar/workflows.spec.ts
@@ -271,9 +271,11 @@ test.describe('Workflows sidebar', () => {
      '.comfyui-workflows-open .close-workflow-button'
    )
    await closeButton.click()
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames(), {
+        timeout: 5000
+      })
+      .toEqual(['*Unsaved Workflow'])
  })

  test('Can close saved workflow with command', async ({ comfyPage }) => {
--- a/browser_tests/tests/subgraph-duplicate-ids.spec.ts
+++ b/browser_tests/tests/subgraph-duplicate-ids.spec.ts
@@ -1,125 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('All node IDs are globally unique after loading', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const result = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
-      // TODO: Extract allNodeIds accessor into LGraph
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-      const allIds = allGraphs
-        .flatMap((g) => g._nodes)
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-
-      return { allIds, uniqueCount: new Set(allIds).size }
-    })
-
-    expect(result.uniqueCount).toBe(result.allIds.length)
-    expect(result.allIds.length).toBeGreaterThanOrEqual(10)
-  })
-
-  test('Root graph node IDs are preserved as canonical', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const rootIds = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      return graph._nodes
-        .map((n) => n.id)
-        .filter((id): id is number => typeof id === 'number')
-        .sort((a, b) => a - b)
-    })
-
-    expect(rootIds).toEqual([1, 2, 5])
-  })
-
-  test('Promoted widget tuples are stable after full page reload boot path', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const beforeSnapshot =
-      await comfyPage.subgraph.getHostPromotedTupleSnapshot()
-    expect(beforeSnapshot.length).toBeGreaterThan(0)
-    expect(
-      beforeSnapshot.some(({ promotedWidgets }) => promotedWidgets.length > 0)
-    ).toBe(true)
-
-    await comfyPage.page.reload()
-    await comfyPage.page.waitForFunction(() => !!window.app)
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    await expect(async () => {
-      const afterSnapshot =
-        await comfyPage.subgraph.getHostPromotedTupleSnapshot()
-      expect(afterSnapshot).toEqual(beforeSnapshot)
-    }).toPass({ timeout: 5_000 })
-  })
-
-  test('All links reference valid nodes in their graph', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const invalidLinks = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const labeledGraphs: [string, typeof graph][] = [
-        ['root', graph],
-        ...[...graph.subgraphs.entries()].map(
-          ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
-        )
-      ]
-
-      const isNonNegative = (id: number | string) =>
-        typeof id === 'number' && id >= 0
-
-      return labeledGraphs.flatMap(([label, g]) =>
-        [...g._links.values()].flatMap((link) =>
-          [
-            isNonNegative(link.origin_id) &&
-              !g._nodes_by_id[link.origin_id] &&
-              `${label}: origin_id ${link.origin_id} not found`,
-            isNonNegative(link.target_id) &&
-              !g._nodes_by_id[link.target_id] &&
-              `${label}: target_id ${link.target_id} not found`
-          ].filter(Boolean)
-        )
-      )
-    })
-
-    expect(invalidLinks).toEqual([])
-  })
-
-  test('Subgraph navigation works after ID remapping', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
-    await subgraphNode.navigateIntoSubgraph()
-
-    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 isInSubgraph()).toBe(false)
-  })
-})
--- a/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-slot-position.spec.ts
@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
-
-test.describe(
-  'Subgraph promoted widget-input slot position',
-  { tag: '@subgraph' },
-  () => {
-    test('Promoted text widget slot is positioned at widget row, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      // Render a few frames so arrange() runs
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      const result = await getTextSlotPosition(comfyPage.page, '11')
-      expect(result).not.toBeNull()
-      expect(result!.hasPos).toBe(true)
-
-      // The slot Y position should be well below the title area.
-      // If it's near 0 or negative, the slot is stuck at the header (the bug).
-      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
-    })
-
-    test('Slot position remains correct after renaming subgraph input label', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      // Verify initial position is correct
-      const before = await getTextSlotPosition(comfyPage.page, '11')
-      expect(before).not.toBeNull()
-      expect(before!.hasPos).toBe(true)
-      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
-
-      // Navigate into subgraph and rename the text input
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        const textInput = graph.inputs?.find(
-          (i: { type: string }) => i.type === 'STRING'
-        )
-        return textInput?.label || textInput?.name || null
-      })
-
-      if (!initialLabel)
-        throw new Error('Could not find STRING input in subgraph')
-
-      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
-      await comfyPage.page.fill(dialog, '')
-      await comfyPage.page.fill(dialog, 'my_custom_prompt')
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
-
-      // Navigate back to parent graph
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Verify slot position is still at the widget row after rename
-      const after = await getTextSlotPosition(comfyPage.page, '11')
-      expect(after).not.toBeNull()
-      expect(after!.hasPos).toBe(true)
-      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
-
-      // widget.name is the stable identity key — it does NOT change on rename.
-      // The display label is on input.label, read via PromotedWidgetView.label.
-      expect(after!.widgetName).not.toBe('my_custom_prompt')
-    })
-  }
-)
--- a/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
+++ b/browser_tests/tests/subgraph-promoted-widget-dom.spec.ts
@@ -1,57 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-test.describe(
-  'Subgraph promoted widget DOM position',
-  { tag: '@subgraph' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Promoted seed widget renders in node body, not header', async ({
-      comfyPage
-    }) => {
-      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)
-
-      const subgraphNodeId = String(subgraphNode.id)
-      const promotedNames = await getPromotedWidgetNames(
-        comfyPage,
-        subgraphNodeId
-      )
-      expect(promotedNames).toContain('seed')
-
-      // Wait for Vue nodes to render
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      await expect(nodeLocator).toBeVisible()
-
-      // The seed widget should be visible inside the node body
-      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is inside the node body, not the header
-      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)
-    })
-  }
-)
--- a/browser_tests/tests/subgraph-rename-dialog.spec.ts
+++ b/browser_tests/tests/subgraph-rename-dialog.spec.ts
@@ -1,177 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-// Constants
-const RENAMED_NAME = 'renamed_slot_name'
-const SECOND_RENAMED_NAME = 'second_renamed_name'
-
-// Common selectors
-const SELECTORS = {
-  promptDialog: '.graphdialog input'
-} as const
-
-test.describe('Subgraph Slot Rename Dialog', { tag: '@subgraph' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  })
-
-  test('Shows current slot label (not stale) in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial slot label
-    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(
-        'Expected subgraph to have an input slot label for rightClickInputSlot'
-      )
-    }
-
-    // First rename
-    await comfyPage.subgraph.rightClickInputSlot(initialInputLabel)
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the rename worked
-    const afterFirstRename = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph
-      if (!graph || !('inputNode' in graph))
-        return { label: null, name: null, displayName: null }
-      const slot = graph.inputs?.[0]
-      return {
-        label: slot?.label || null,
-        name: slot?.name || null,
-        displayName: slot?.displayName || slot?.label || slot?.name || null
-      }
-    })
-    expect(afterFirstRename.label).toBe(RENAMED_NAME)
-
-    // Now rename again - this is where the bug would show
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.subgraph.rightClickInputSlot()
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
-
-    // Complete the second rename to ensure everything still works
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Verify the second rename worked
-    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)
-  })
-
-  test('Shows current output slot label in rename dialog', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-    await subgraphNode.navigateIntoSubgraph()
-
-    // Get initial output slot label
-    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(
-        'Expected subgraph to have an output slot label for rightClickOutputSlot'
-      )
-    }
-
-    // First rename
-    await comfyPage.subgraph.rightClickOutputSlot(initialOutputLabel)
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Clear and enter new name
-    await comfyPage.page.fill(SELECTORS.promptDialog, '')
-    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
-    await comfyPage.page.keyboard.press('Enter')
-
-    // Wait for dialog to close
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'hidden'
-    })
-
-    // Force re-render
-    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-    await comfyPage.nextFrame()
-
-    // Now rename again to check for stale content
-    // We need to use the index-based approach since the method looks for slot.name
-    await comfyPage.subgraph.rightClickOutputSlot()
-    await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-    await comfyPage.nextFrame()
-
-    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-      state: 'visible'
-    })
-
-    // Get the current value in the prompt dialog
-    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
-
-    // This should show the current label (RENAMED_NAME), not the original name
-    expect(dialogValue).toBe(RENAMED_NAME)
-  })
-})
--- a/browser_tests/tests/subgraph.spec.ts
+++ b/browser_tests/tests/subgraph.spec.ts
@@ -1,938 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-// Constants
-const RENAMED_INPUT_NAME = 'renamed_input'
-const NEW_SUBGRAPH_TITLE = 'New Subgraph'
-const UPDATED_SUBGRAPH_TITLE = 'Updated Subgraph Title'
-const TEST_WIDGET_CONTENT = 'Test content that should persist'
-
-// Common selectors
-const SELECTORS = {
-  breadcrumb: '.subgraph-breadcrumb',
-  promptDialog: '.graphdialog input',
-  nodeSearchContainer: '.node-search-container',
-  domWidget: '.comfy-multiline-input'
-} as const
-
-test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-  })
-
-  // 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')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
-
-      await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(finalCount).toBe(initialCount + 1)
-    })
-
-    test('Can add output slots to subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
-
-      await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
-      await comfyPage.nextFrame()
-
-      const finalCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(finalCount).toBe(initialCount + 1)
-    })
-
-    test('Can remove input slots from subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(initialCount).toBeGreaterThan(0)
-
-      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 getSubgraphSlotCount(comfyPage, 'inputs')
-      expect(finalCount).toBe(initialCount - 1)
-    })
-
-    test('Can remove output slots from subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(initialCount).toBeGreaterThan(0)
-
-      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 getSubgraphSlotCount(comfyPage, 'outputs')
-      expect(finalCount).toBe(initialCount - 1)
-    })
-
-    test('Can rename I/O slots', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      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')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      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)
-    })
-
-    test('Can rename input slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      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!)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      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)
-    })
-
-    test('Can rename output slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      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!)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const renamedOutputName = 'renamed_output'
-      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      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)
-    })
-
-    test('Right-click context menu still works alongside double-click', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      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!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const rightClickRenamedName = 'right_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      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)
-    })
-
-    test('Can double-click on slot label text to rename', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      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(() => {
-        const app = window.app!
-
-        const graph = app.canvas.graph
-        if (!graph || !('inputNode' in graph)) {
-          throw new Error('Expected to be in subgraph')
-        }
-        const input = graph.inputs?.[0]
-
-        if (!input?.labelPos) {
-          throw new Error('Could not get label position for testing')
-        }
-
-        // Use labelPos for more precise clicking on the text
-        const testX = input.labelPos[0]
-        const testY = input.labelPos[1]
-
-        // Create a minimal mock event with required properties
-        // Full PointerEvent creation is unnecessary for this test
-        const leftClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 0,
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        } as Parameters<typeof graph.inputNode.onPointerDown>[0]
-
-        const inputNode = graph.inputNode
-        if (inputNode?.onPointerDown) {
-          inputNode.onPointerDown(
-            leftClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-
-          // Trigger double-click if pointer has the handler
-          if (app.canvas.pointer.onDoubleClick) {
-            app.canvas.pointer.onDoubleClick(leftClickEvent)
-          }
-        }
-      })
-
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const labelClickRenamedName = 'label_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      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)
-    })
-    test('Can create widget from link with compressed target_slot', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-compressed-target-slot'
-      )
-      const step = await comfyPage.page.evaluate(() => {
-        return window.app!.graph!.nodes[0].widgets![0].options.step
-      })
-      expect(step).toBe(10)
-    })
-  })
-
-  test.describe('Subgraph Unpacking', () => {
-    test('Unpacking subgraph with duplicate links does not create extra links', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-duplicate-links'
-      )
-
-      const result = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
-        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
-          return { error: 'No subgraph node found' }
-        }
-
-        graph.unpackSubgraph(subgraphNode)
-
-        const linkCount = graph.links.size
-        const nodes = graph.nodes
-        const ksampler = nodes.find((n) => n.type === 'KSampler')
-        if (!ksampler) return { error: 'No KSampler found after unpack' }
-
-        const linkedInputCount = ksampler.inputs.filter(
-          (i) => i.link != null
-        ).length
-
-        return { linkCount, linkedInputCount, nodeCount: nodes.length }
-      })
-
-      expect(result).not.toHaveProperty('error')
-      // Should have exactly 1 link (EmptyLatentImage→KSampler)
-      // not 4 (with 3 duplicates). The KSampler→output link is dropped
-      // because the subgraph output has no downstream connection.
-      expect(result.linkCount).toBe(1)
-      // KSampler should have exactly 1 linked input (latent_image)
-      expect(result.linkedInputCount).toBe(1)
-    })
-  })
-
-  test.describe('Subgraph Creation and Deletion', () => {
-    test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      await comfyPage.keyboard.selectAll()
-      await comfyPage.nextFrame()
-
-      const node = await comfyPage.nodeOps.getNodeRefById('5')
-      await node.convertToSubgraph()
-      await comfyPage.nextFrame()
-
-      const subgraphNodes =
-        await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-      expect(subgraphNodes.length).toBe(1)
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(1)
-    })
-
-    test('Can delete subgraph node', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      expect(await subgraphNode.exists()).toBe(true)
-
-      const initialNodeCount = await getGraphNodeCount(comfyPage)
-
-      await subgraphNode.click('title')
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(initialNodeCount - 1)
-
-      const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
-      expect(await deletedNode.exists()).toBe(false)
-    })
-
-    test.describe('Subgraph copy and paste', () => {
-      test('Can copy subgraph node by dragging + alt', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect a second subgraph node to be created (2 total)
-        expect(subgraphNodes.length).toBe(2)
-      })
-
-      test('Copying subgraph node by dragging + alt creates a new subgraph node with unique type', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes and expect all unique IDs
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect the second subgraph node to have a unique type
-        const nodeType1 = await subgraphNodes[0].getType()
-        const nodeType2 = await subgraphNodes[1].getType()
-        expect(nodeType1).not.toBe(nodeType2)
-      })
-    })
-  })
-
-  test.describe('Operations Inside Subgraphs', () => {
-    test('Can copy and paste nodes in subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialNodeCount = await getGraphNodeCount(comfyPage)
-
-      const nodesInSubgraph = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.canvas.graph!.nodes
-        return nodes?.[0]?.id || null
-      })
-
-      expect(nodesInSubgraph).not.toBeNull()
-
-      const nodeToClone = await comfyPage.nodeOps.getNodeRefById(
-        String(nodesInSubgraph)
-      )
-      await nodeToClone.click('title')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.keyboard.press('Control+c')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.keyboard.press('Control+v')
-      await comfyPage.nextFrame()
-
-      const finalNodeCount = await getGraphNodeCount(comfyPage)
-      expect(finalNodeCount).toBe(initialNodeCount + 1)
-    })
-
-    test('Can undo and redo operations in subgraph', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Add a node
-      await comfyPage.canvasOps.doubleClick()
-      await comfyPage.searchBox.fillAndSelectFirstNode('Note')
-      await comfyPage.nextFrame()
-
-      // Get initial node count
-      const initialCount = await getGraphNodeCount(comfyPage)
-
-      // Undo
-      await comfyPage.keyboard.undo()
-      await comfyPage.nextFrame()
-
-      const afterUndoCount = await getGraphNodeCount(comfyPage)
-      expect(afterUndoCount).toBe(initialCount - 1)
-
-      // Redo
-      await comfyPage.keyboard.redo()
-      await comfyPage.nextFrame()
-
-      const afterRedoCount = await getGraphNodeCount(comfyPage)
-      expect(afterRedoCount).toBe(initialCount)
-    })
-  })
-
-  test.describe('Subgraph Navigation and UI', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Breadcrumb updates when subgraph node title is changed', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('10')
-      const nodePos = await subgraphNode.getPosition()
-      const nodeSize = await subgraphNode.getSize()
-
-      // Navigate into subgraph
-      await subgraphNode.navigateIntoSubgraph()
-
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
-        state: 'visible',
-        timeout: 20000
-      })
-
-      const breadcrumb = comfyPage.page.locator(SELECTORS.breadcrumb)
-      const initialBreadcrumbText = await breadcrumb.textContent()
-
-      // Go back and edit title
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      await comfyPage.canvas.dblclick({
-        position: {
-          x: nodePos.x + nodeSize.width / 2,
-          y: nodePos.y - 10
-        },
-        delay: 5
-      })
-
-      await expect(comfyPage.page.locator('.node-title-editor')).toBeVisible()
-
-      await comfyPage.page.keyboard.press('Control+a')
-      await comfyPage.page.keyboard.type(UPDATED_SUBGRAPH_TITLE)
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.nextFrame()
-
-      // Navigate back into subgraph
-      await subgraphNode.navigateIntoSubgraph()
-
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      const updatedBreadcrumbText = await breadcrumb.textContent()
-      expect(updatedBreadcrumbText).toContain(UPDATED_SUBGRAPH_TITLE)
-      expect(updatedBreadcrumbText).not.toBe(initialBreadcrumbText)
-    })
-
-    test('Switching workflows while inside subgraph returns to root graph context', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-      await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const breadcrumb = comfyPage.page
-        .getByTestId(TestIds.breadcrumb.subgraph)
-        .locator('.p-breadcrumb')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeHidden()
-    })
-  })
-
-  test.describe('DOM Widget Promotion', () => {
-    test('DOM widget visibility persists through subgraph navigation', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-
-      // Verify promoted widget is visible in parent graph
-      const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(parentTextarea).toBeVisible()
-      await expect(parentTextarea).toHaveCount(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      expect(await subgraphNode.exists()).toBe(true)
-
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Verify widget is visible in subgraph
-      const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(subgraphTextarea).toBeVisible()
-      await expect(subgraphTextarea).toHaveCount(1)
-
-      // Navigate back
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Verify widget is still visible
-      const backToParentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(backToParentTextarea).toBeVisible()
-      await expect(backToParentTextarea).toHaveCount(1)
-    })
-
-    test('DOM widget content is preserved through navigation', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      const textarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await textarea.fill(TEST_WIDGET_CONTENT)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(subgraphTextarea).toHaveValue(TEST_WIDGET_CONTENT)
-
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
-      await expect(parentTextarea).toHaveValue(TEST_WIDGET_CONTENT)
-    })
-
-    test('DOM elements are cleaned up when subgraph node is removed', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      const initialCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(initialCount).toBe(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-
-      await subgraphNode.click('title')
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
-
-      const finalCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(finalCount).toBe(0)
-    })
-
-    test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
-      comfyPage
-    }) => {
-      // Enable new menu for breadcrumb navigation
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-      const workflowName = 'subgraphs/subgraph-with-promoted-text-widget'
-      await comfyPage.workflow.loadWorkflow(workflowName)
-
-      const textareaCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(textareaCount).toBe(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-
-      // Navigate into subgraph (method now handles retries internally)
-      await subgraphNode.navigateIntoSubgraph()
-
-      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, {
-        state: 'visible',
-        timeout: 5000
-      })
-
-      // Click breadcrumb to navigate back to parent graph
-      const homeBreadcrumb = comfyPage.page.locator(
-        '.p-breadcrumb-list > :first-child'
-      )
-      await homeBreadcrumb.waitFor({ state: 'visible' })
-      await homeBreadcrumb.click()
-      await comfyPage.nextFrame()
-
-      // Check that the subgraph node has no widgets after removing the text slot
-      const widgetCount = await comfyPage.page.evaluate(() => {
-        return window.app!.canvas.graph!.nodes[0].widgets?.length || 0
-      })
-
-      expect(widgetCount).toBe(0)
-    })
-
-    test('Multiple promoted widgets are handled correctly', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-multiple-promoted-widgets'
-      )
-
-      const parentCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(parentCount).toBeGreaterThan(1)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const subgraphCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(subgraphCount).toBe(parentCount)
-
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      const finalCount = await comfyPage.page
-        .locator(SELECTORS.domWidget)
-        .count()
-      expect(finalCount).toBe(parentCount)
-    })
-  })
-
-  test.describe('Navigation Hotkeys', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Change the Exit Subgraph keybinding from Escape to Alt+Q
-      await comfyPage.settings.setSetting('Comfy.Keybinding.NewBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'q',
-            ctrl: false,
-            alt: true,
-            shift: false
-          }
-        }
-      ])
-
-      await comfyPage.settings.setSetting('Comfy.Keybinding.UnsetBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'Escape',
-            ctrl: false,
-            alt: false,
-            shift: false
-          }
-        }
-      ])
-
-      // Reload the page
-      await comfyPage.page.reload()
-      await comfyPage.setup()
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Navigate into subgraph
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Test that Escape no longer exits subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      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 isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Open settings dialog using hotkey
-      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
-        state: 'visible'
-      })
-
-      // Press Escape - should close dialog, not exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Dialog should be closed
-      await expect(
-        comfyPage.page.locator('[data-testid="settings-dialog"]')
-      ).not.toBeVisible()
-
-      // Should still be in subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Press Escape again - now should exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-  })
-})
--- a/browser_tests/tests/subgraph/subgraphCrud.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphCrud.spec.ts
@@ -0,0 +1,154 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+// Constants
+const NEW_SUBGRAPH_TITLE = 'New Subgraph'
+
+test.describe('Subgraph CRUD', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+  })
+
+  test.describe('Subgraph Unpacking', () => {
+    test('Unpacking subgraph with duplicate links does not create extra links', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-duplicate-links'
+      )
+
+      const result = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
+          return { error: 'No subgraph node found' }
+        }
+
+        graph.unpackSubgraph(subgraphNode)
+
+        const linkCount = graph.links.size
+        const nodes = graph.nodes
+        const ksampler = nodes.find((n) => n.type === 'KSampler')
+        if (!ksampler) return { error: 'No KSampler found after unpack' }
+
+        const linkedInputCount = ksampler.inputs.filter(
+          (i) => i.link != null
+        ).length
+
+        return { linkCount, linkedInputCount, nodeCount: nodes.length }
+      })
+
+      expect(result).not.toHaveProperty('error')
+      // Should have exactly 1 link (EmptyLatentImage→KSampler)
+      // not 4 (with 3 duplicates). The KSampler→output link is dropped
+      // because the subgraph output has no downstream connection.
+      expect(result.linkCount).toBe(1)
+      // KSampler should have exactly 1 linked input (latent_image)
+      expect(result.linkedInputCount).toBe(1)
+    })
+  })
+
+  test.describe('Subgraph Creation and Deletion', () => {
+    test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('default')
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.nextFrame()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('5')
+      await node.convertToSubgraph()
+      await comfyPage.nextFrame()
+
+      const subgraphNodes =
+        await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+      expect(subgraphNodes.length).toBe(1)
+
+      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      expect(finalNodeCount).toBe(1)
+    })
+
+    test('Can delete subgraph node', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      expect(await subgraphNode.exists()).toBe(true)
+
+      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+
+      await subgraphNode.delete()
+
+      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      expect(finalNodeCount).toBe(initialNodeCount - 1)
+
+      const deletedNode = await comfyPage.nodeOps.getNodeRefById('2')
+      expect(await deletedNode.exists()).toBe(false)
+    })
+
+    test.describe('Subgraph copy and paste', () => {
+      test('Can copy subgraph node by dragging + alt', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+
+        // Get position of subgraph node
+        const subgraphPos = await subgraphNode.getPosition()
+
+        // Alt + Click on the subgraph node
+        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
+        await comfyPage.page.keyboard.down('Alt')
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+
+        // Drag slightly to trigger the copy
+        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
+        await comfyPage.page.mouse.up()
+        await comfyPage.page.keyboard.up('Alt')
+
+        // Find all subgraph nodes
+        const subgraphNodes =
+          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+
+        // Expect a second subgraph node to be created (2 total)
+        expect(subgraphNodes.length).toBe(2)
+      })
+
+      test('Copying subgraph node by dragging + alt creates a new subgraph node with unique type', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+
+        // Get position of subgraph node
+        const subgraphPos = await subgraphNode.getPosition()
+
+        // Alt + Click on the subgraph node
+        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
+        await comfyPage.page.keyboard.down('Alt')
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+
+        // Drag slightly to trigger the copy
+        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
+        await comfyPage.page.mouse.up()
+        await comfyPage.page.keyboard.up('Alt')
+
+        // Find all subgraph nodes and expect all unique IDs
+        const subgraphNodes =
+          await comfyPage.nodeOps.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+
+        // Expect the second subgraph node to have a unique type
+        const nodeType1 = await subgraphNodes[0].getType()
+        const nodeType2 = await subgraphNodes[1].getType()
+        expect(nodeType1).not.toBe(nodeType2)
+      })
+    })
+  })
+})
--- a/browser_tests/tests/subgraph/subgraphLifecycle.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphLifecycle.spec.ts
@@ -1,147 +1,19 @@
 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'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { TestIds } from '../../fixtures/selectors'
 import {
  getPromotedWidgets,
  getPseudoPreviewWidgets,
  getNonPreviewPromotedWidgets
-} from '../helpers/promotedWidgets'
+} from '../../helpers/promotedWidgets'

 const domPreviewSelector = '.image-preview'

-const expectPromotedWidgetsToResolveToInteriorNodes = async (
-  comfyPage: ComfyPage,
-  hostSubgraphNodeId: string,
-  widgets: PromotedWidgetEntry[]
-) => {
-  const interiorNodeIds = widgets.map(([id]) => id)
-  const results = await comfyPage.page.evaluate(
-    ([hostId, ids]) => {
-      const graph = window.app!.graph!
-      const hostNode = graph.getNodeById(Number(hostId))
-      if (!hostNode?.isSubgraphNode()) return ids.map(() => false)
-
-      return ids.map((id) => {
-        const interiorNode = hostNode.subgraph.getNodeById(Number(id))
-        return interiorNode !== null && interiorNode !== undefined
-      })
-    },
-    [hostSubgraphNodeId, interiorNodeIds] as const
-  )
-
-  for (const exists of results) {
-    expect(exists).toBe(true)
-  }
-}
-
 test.describe(
  'Subgraph Lifecycle Edge Behaviors',
  { tag: ['@subgraph'] },
  () => {
-    test.describe('Deterministic Hydrate from Serialized proxyWidgets', () => {
-      test('proxyWidgets entries map to real interior node IDs after load', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const widgets = await getPromotedWidgets(comfyPage, '11')
-        expect(widgets.length).toBeGreaterThan(0)
-
-        for (const [interiorNodeId] of widgets) {
-          expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        }
-
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          widgets
-        )
-      })
-
-      test('proxyWidgets entries survive double round-trip without drift', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
-        expect(initialWidgets.length).toBeGreaterThan(0)
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '11',
-          initialWidgets
-        )
-
-        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(
-          comfyPage,
-          '11',
-          afterFirst
-        )
-
-        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(
-          comfyPage,
-          '11',
-          afterSecond
-        )
-
-        expect(afterFirst).toEqual(initialWidgets)
-        expect(afterSecond).toEqual(initialWidgets)
-      })
-
-      test('Compressed target_slot (-1) entries are hydrated to real IDs', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-compressed-target-slot'
-        )
-        await comfyPage.nextFrame()
-
-        const widgets = await getPromotedWidgets(comfyPage, '2')
-        expect(widgets.length).toBeGreaterThan(0)
-
-        for (const [interiorNodeId] of widgets) {
-          expect(interiorNodeId).not.toBe('-1')
-          expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        }
-
-        await expectPromotedWidgetsToResolveToInteriorNodes(
-          comfyPage,
-          '2',
-          widgets
-        )
-      })
-    })
-
    test.describe('Cleanup Behavior After Promoted Source Removal', () => {
      test.beforeEach(async ({ comfyPage }) => {
        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -162,9 +34,7 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
+        await clipNode.delete()

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -204,9 +74,7 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
+        await clipNode.delete()

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -297,14 +165,9 @@ test.describe(
        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
        expect(await subgraphNode.exists()).toBe(true)

-        await subgraphNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
+        await subgraphNode.delete()

-        const nodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.canvas.graph!.getNodeById('5')
-        })
-        expect(nodeExists).toBe(false)
+        expect(await subgraphNode.exists()).toBe(false)

        await expect
          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
--- a/browser_tests/tests/subgraph/subgraphNavigation.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphNavigation.spec.ts
@@ -0,0 +1,438 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { TestIds } from '../../fixtures/selectors'
+
+// Constants
+const UPDATED_SUBGRAPH_TITLE = 'Updated Subgraph Title'
+
+// Common selectors
+const SELECTORS = {
+  breadcrumb: '.subgraph-breadcrumb',
+  nodeSearchContainer: '.node-search-container'
+} as const
+
+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 Navigation', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+  })
+
+  test.describe('Breadcrumb and Workflow Context', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Breadcrumb updates when subgraph node title is changed', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/nested-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('10')
+      const nodePos = await subgraphNode.getPosition()
+      const nodeSize = await subgraphNode.getSize()
+
+      // Navigate into subgraph
+      await subgraphNode.navigateIntoSubgraph()
+
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
+        state: 'visible',
+        timeout: 20000
+      })
+
+      const breadcrumb = comfyPage.page.locator(SELECTORS.breadcrumb)
+      const initialBreadcrumbText = await breadcrumb.textContent()
+
+      // Go back and edit title
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      await comfyPage.canvas.dblclick({
+        position: {
+          x: nodePos.x + nodeSize.width / 2,
+          y: nodePos.y - 10
+        },
+        delay: 5
+      })
+
+      await expect(comfyPage.page.locator('.node-title-editor')).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+a')
+      await comfyPage.page.keyboard.type(UPDATED_SUBGRAPH_TITLE)
+      await comfyPage.page.keyboard.press('Enter')
+      await comfyPage.nextFrame()
+
+      // Navigate back into subgraph
+      await subgraphNode.navigateIntoSubgraph()
+
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
+
+      const updatedBreadcrumbText = await breadcrumb.textContent()
+      expect(updatedBreadcrumbText).toContain(UPDATED_SUBGRAPH_TITLE)
+      expect(updatedBreadcrumbText).not.toBe(initialBreadcrumbText)
+    })
+
+    test('Switching workflows while inside subgraph returns to root graph context', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.subgraph.isInSubgraph()).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)
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+    })
+
+    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const breadcrumb = comfyPage.page
+        .getByTestId(TestIds.breadcrumb.subgraph)
+        .locator('.p-breadcrumb')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.nextFrame()
+
+      await expect(breadcrumb).toBeVisible()
+
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+
+      await expect(breadcrumb).toBeHidden()
+    })
+  })
+
+  test.describe('Navigation Hotkeys', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    })
+
+    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      // Change the Exit Subgraph keybinding from Escape to Alt+Q
+      await comfyPage.settings.setSetting('Comfy.Keybinding.NewBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'q',
+            ctrl: false,
+            alt: true,
+            shift: false
+          }
+        }
+      ])
+
+      await comfyPage.settings.setSetting('Comfy.Keybinding.UnsetBindings', [
+        {
+          commandId: 'Comfy.Graph.ExitSubgraph',
+          combo: {
+            key: 'Escape',
+            ctrl: false,
+            alt: false,
+            shift: false
+          }
+        }
+      ])
+
+      // Reload the page
+      await comfyPage.page.reload()
+      await comfyPage.setup()
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      // Navigate into subgraph
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
+
+      // Verify we're in a subgraph
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      // Test that Escape no longer exits subgraph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+      if (!(await comfyPage.subgraph.isInSubgraph())) {
+        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)
+    })
+
+    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
+
+      // Verify we're in a subgraph
+      if (!(await comfyPage.subgraph.isInSubgraph())) {
+        throw new Error('Not in subgraph')
+      }
+
+      // Open settings dialog using hotkey
+      await comfyPage.page.keyboard.press('Control+,')
+      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
+        state: 'visible'
+      })
+
+      // Press Escape - should close dialog, not exit subgraph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      // Dialog should be closed
+      await expect(
+        comfyPage.page.locator('[data-testid="settings-dialog"]')
+      ).not.toBeVisible()
+
+      // Should still be in subgraph
+      expect(await comfyPage.subgraph.isInSubgraph()).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)
+    })
+  })
+
+  test.describe('Viewport', () => {
+    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)
+          ]
+        })
+    })
+  })
+
+  test.describe('Progress State', () => {
+    test('Stale progress is cleared on subgraph node after navigating back', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      // Find the subgraph node
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      // Simulate a stale progress value on the subgraph node.
+      // This happens when:
+      //   1. User views root graph during execution
+      //   2. Progress watcher sets node.progress = 0.5
+      //   3. User enters subgraph
+      //   4. Execution completes (nodeProgressStates becomes {})
+      //   5. Watcher fires, clears subgraph-internal nodes, but root-level
+      //      SubgraphNode isn't visible so it keeps stale progress
+      //   6. User navigates back — watcher should fire and clear it
+      await comfyPage.page.evaluate((nodeId) => {
+        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
+        node.progress = 0.5
+      }, subgraphNodeId)
+
+      // Verify progress is set
+      const progressBefore = await comfyPage.page.evaluate((nodeId) => {
+        return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
+      }, subgraphNodeId)
+      expect(progressBefore).toBe(0.5)
+
+      // Navigate into the subgraph
+      const subgraphNode =
+        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Verify we're inside the subgraph
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      // Navigate back to the root graph
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      // The progress watcher should fire when graph changes (because
+      // nodeLocationProgressStates is empty {} and the watcher should
+      // iterate canvas.graph.nodes to clear stale node.progress values).
+      //
+      // BUG: Without watching canvasStore.currentGraph, the watcher doesn't
+      // fire on subgraph->root navigation when progress is already empty,
+      // leaving stale node.progress = 0.5 on the SubgraphNode.
+      await expect(async () => {
+        const progressAfter = await comfyPage.page.evaluate((nodeId) => {
+          return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
+        }, subgraphNodeId!)
+        expect(progressAfter).toBeUndefined()
+      }).toPass({ timeout: 2_000 })
+    })
+
+    test('Stale progress is cleared when switching workflows while inside subgraph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      await comfyPage.page.evaluate((nodeId) => {
+        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
+        node.progress = 0.7
+      }, subgraphNodeId)
+
+      const subgraphNode =
+        await comfyPage.nodeOps.getNodeRefById(subgraphNodeId)
+      await subgraphNode.navigateIntoSubgraph()
+
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.workflow.loadWorkflow('default')
+      await comfyPage.nextFrame()
+
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      await comfyPage.nextFrame()
+
+      await expect(async () => {
+        const subgraphProgressState = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          const subgraphNode = graph.nodes.find(
+            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+          )
+          if (!subgraphNode) {
+            return { exists: false, progress: null }
+          }
+
+          return { exists: true, progress: subgraphNode.progress }
+        })
+        expect(subgraphProgressState.exists).toBe(true)
+        expect(subgraphProgressState.progress).toBeUndefined()
+      }).toPass({ timeout: 5_000 })
+    })
+  })
+})
--- a/browser_tests/tests/subgraph/subgraphNested.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphNested.spec.ts
@@ -0,0 +1,461 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test, comfyExpect } from '../../fixtures/ComfyPage'
+import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
+import { TestIds } from '../../fixtures/selectors'
+
+test.describe('Subgraph Nested Scenarios', { tag: ['@subgraph'] }, () => {
+  test.describe('Nested subgraph configure order', () => {
+    const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+    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']
+      )
+
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      expect(warnings).toEqual([])
+    })
+
+    test('All three subgraph levels resolve promoted widgets', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      const results = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const allGraphs = [graph, ...graph.subgraphs.values()]
+
+        return allGraphs.flatMap((g) =>
+          g._nodes
+            .filter(
+              (n) =>
+                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+            )
+            .map((hostNode) => {
+              const proxyWidgets = Array.isArray(
+                hostNode.properties?.proxyWidgets
+              )
+                ? hostNode.properties.proxyWidgets
+                : []
+
+              const widgetEntries = proxyWidgets
+                .filter(
+                  (e: unknown): e is [string, string] =>
+                    Array.isArray(e) &&
+                    e.length >= 2 &&
+                    typeof e[0] === 'string' &&
+                    typeof e[1] === 'string'
+                )
+                .map(([interiorNodeId, widgetName]: [string, string]) => {
+                  const sg = hostNode.isSubgraphNode()
+                    ? hostNode.subgraph
+                    : null
+                  const interiorNode = sg?.getNodeById(Number(interiorNodeId))
+                  return {
+                    interiorNodeId,
+                    widgetName,
+                    resolved:
+                      interiorNode !== null && interiorNode !== undefined
+                  }
+                })
+
+              return {
+                hostNodeId: String(hostNode.id),
+                widgetEntries
+              }
+            })
+        )
+      })
+
+      expect(
+        results.length,
+        'Should have subgraph host nodes at multiple nesting levels'
+      ).toBeGreaterThanOrEqual(2)
+
+      for (const { hostNodeId, widgetEntries } of results) {
+        expect(
+          widgetEntries.length,
+          `Host node ${hostNodeId} should have promoted widgets`
+        ).toBeGreaterThan(0)
+
+        for (const { interiorNodeId, widgetName, resolved } of widgetEntries) {
+          expect(interiorNodeId).not.toBe('-1')
+          expect(Number(interiorNodeId)).toBeGreaterThan(0)
+          expect(widgetName).toBeTruthy()
+          expect(
+            resolved,
+            `Widget "${widgetName}" (interior node ${interiorNodeId}) on host ${hostNodeId} should resolve`
+          ).toBe(true)
+        }
+      }
+    })
+
+    test('Prompt execution succeeds without 400 error', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+      await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+      const response = await responsePromise
+      expect(response.status()).not.toBe(400)
+    })
+  })
+
+  /**
+   * Regression tests for nested subgraph promotion where multiple interior
+   * nodes share the same widget name (e.g. two CLIPTextEncode nodes both
+   * with a "text" widget).
+   *
+   * The inner subgraph (node 3) promotes both ["1","text"] and ["2","text"].
+   * The outer subgraph (node 4) promotes through node 3 using identity
+   * disambiguation (optional sourceNodeId in the promotion entry).
+   *
+   * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10123#discussion_r2956230977
+   */
+  test.describe(
+    'Nested subgraph duplicate widget names',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
+      const PROMOTED_BORDER_CLASS = 'ring-component-node-widget-promoted'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      })
+
+      test('Inner subgraph node has both text widgets promoted', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.nextFrame()
+
+        const nonPreview = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          const outerNode = graph.getNodeById('4')
+          if (
+            !outerNode ||
+            typeof outerNode.isSubgraphNode !== 'function' ||
+            !outerNode.isSubgraphNode()
+          ) {
+            return []
+          }
+
+          const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+          if (!innerSubgraphNode) return []
+
+          return (
+            (innerSubgraphNode.properties?.proxyWidgets ?? []) as unknown[]
+          )
+            .filter(
+              (entry): entry is [string, string] =>
+                Array.isArray(entry) &&
+                entry.length >= 2 &&
+                typeof entry[0] === 'string' &&
+                typeof entry[1] === 'string' &&
+                !entry[1].startsWith('$$')
+            )
+            .map(
+              ([nodeId, widgetName]) => [nodeId, widgetName] as [string, string]
+            )
+        })
+
+        comfyExpect(nonPreview).toEqual([
+          ['1', 'text'],
+          ['2', 'text']
+        ])
+      })
+
+      test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.nextFrame()
+
+        const widgetValues = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          const outerNode = graph.getNodeById('4')
+          if (
+            !outerNode ||
+            typeof outerNode.isSubgraphNode !== 'function' ||
+            !outerNode.isSubgraphNode()
+          ) {
+            return []
+          }
+
+          const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+          if (!innerSubgraphNode) return []
+
+          return (innerSubgraphNode.widgets ?? []).map((w) => ({
+            name: w.name,
+            value: w.value
+          }))
+        })
+
+        const textWidgets = widgetValues.filter((w) =>
+          w.name.startsWith('text')
+        )
+        comfyExpect(textWidgets).toHaveLength(2)
+
+        const values = textWidgets.map((w) => w.value)
+        comfyExpect(values).toContain('11111111111')
+        comfyExpect(values).toContain('22222222222')
+      })
+
+      test.describe('Promoted border styling in Vue mode', () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        })
+
+        test('Intermediate subgraph widgets get promoted border, outermost does not', async ({
+          comfyPage
+        }) => {
+          await comfyPage.workflow.loadWorkflow(WORKFLOW)
+          await comfyPage.vueNodes.waitForNodes()
+
+          // Node 4 is the outer SubgraphNode at root level.
+          // Its widgets are not promoted further (no parent subgraph),
+          // so none of its widget wrappers should carry the promoted ring.
+          const outerNode = comfyPage.vueNodes.getNodeLocator('4')
+          await comfyExpect(outerNode).toBeVisible()
+
+          const outerPromotedRings = outerNode.locator(
+            `.${PROMOTED_BORDER_CLASS}`
+          )
+          await comfyExpect(outerPromotedRings).toHaveCount(0)
+
+          // Navigate into the outer subgraph (node 4) to reach node 3
+          await comfyPage.vueNodes.enterSubgraph('4')
+          await comfyPage.nextFrame()
+          await comfyPage.vueNodes.waitForNodes()
+
+          // Node 3 is the intermediate SubgraphNode whose "text" widgets
+          // are promoted up to the outer subgraph (node 4).
+          // Its widget wrappers should carry the promoted border ring.
+          const intermediateNode = comfyPage.vueNodes.getNodeLocator('3')
+          await comfyExpect(intermediateNode).toBeVisible()
+
+          const intermediatePromotedRings = intermediateNode.locator(
+            `.${PROMOTED_BORDER_CLASS}`
+          )
+          await comfyExpect(intermediatePromotedRings).toHaveCount(1)
+        })
+      })
+    }
+  )
+
+  /**
+   * Regression test for PR #10532:
+   * Packing all nodes inside a subgraph into a nested subgraph was causing
+   * the parent subgraph node's promoted widget values to go blank.
+   *
+   * Root cause: SubgraphNode had two sets of PromotedWidgetView references —
+   * node.widgets (rebuilt from the promotion store) vs input._widget (cached
+   * at promotion time). After repointing, input._widget still pointed to
+   * removed node IDs, causing missing-node failures and blank values on the
+   * next checkState cycle.
+   */
+  test.describe(
+    'Nested subgraph pack preserves promoted widget values',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-pack-promoted-values'
+      const HOST_NODE_ID = '57'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Promoted widget values persist after packing interior nodes into nested subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
+        await comfyExpect(nodeLocator).toBeVisible()
+
+        // 1. Verify initial promoted widget values via Vue node DOM
+        const widthWidget = nodeLocator
+          .getByLabel('width', { exact: true })
+          .first()
+        const heightWidget = nodeLocator
+          .getByLabel('height', { exact: true })
+          .first()
+        const stepsWidget = nodeLocator
+          .getByLabel('steps', { exact: true })
+          .first()
+        const textWidget = nodeLocator.getByRole('textbox', { name: 'prompt' })
+
+        const widthControls =
+          comfyPage.vueNodes.getInputNumberControls(widthWidget)
+        const heightControls =
+          comfyPage.vueNodes.getInputNumberControls(heightWidget)
+        const stepsControls =
+          comfyPage.vueNodes.getInputNumberControls(stepsWidget)
+
+        await comfyExpect(async () => {
+          await comfyExpect(widthControls.input).toHaveValue('1024')
+          await comfyExpect(heightControls.input).toHaveValue('1024')
+          await comfyExpect(stepsControls.input).toHaveValue('8')
+          await comfyExpect(textWidget).toHaveValue(/Latina female/)
+        }).toPass({ timeout: 5000 })
+
+        // 2. Pack all interior nodes into a nested subgraph
+        await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+
+        // 6. Re-enable Vue nodes and verify values are preserved
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
+        await comfyExpect(nodeAfter).toBeVisible()
+
+        const widthAfter = nodeAfter
+          .getByLabel('width', { exact: true })
+          .first()
+        const heightAfter = nodeAfter
+          .getByLabel('height', { exact: true })
+          .first()
+        const stepsAfter = nodeAfter
+          .getByLabel('steps', { exact: true })
+          .first()
+        const textAfter = nodeAfter.getByRole('textbox', { name: 'prompt' })
+
+        const widthControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(widthAfter)
+        const heightControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(heightAfter)
+        const stepsControlsAfter =
+          comfyPage.vueNodes.getInputNumberControls(stepsAfter)
+
+        await comfyExpect(async () => {
+          await comfyExpect(widthControlsAfter.input).toHaveValue('1024')
+          await comfyExpect(heightControlsAfter.input).toHaveValue('1024')
+          await comfyExpect(stepsControlsAfter.input).toHaveValue('8')
+          await comfyExpect(textAfter).toHaveValue(/Latina female/)
+        }).toPass({ timeout: 5000 })
+      })
+
+      test('proxyWidgets entries resolve to valid interior nodes after packing', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        // Verify the host node is visible
+        const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
+        await comfyExpect(nodeLocator).toBeVisible()
+
+        // Pack all interior nodes into a nested subgraph
+        await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
+
+        // Verify all proxyWidgets entries resolve
+        await comfyExpect(async () => {
+          const result = await comfyPage.page.evaluate((hostId) => {
+            const graph = window.app!.graph!
+            const hostNode = graph.getNodeById(hostId)
+            if (
+              !hostNode ||
+              typeof hostNode.isSubgraphNode !== 'function' ||
+              !hostNode.isSubgraphNode()
+            ) {
+              return { error: 'Host node not found or not a subgraph node' }
+            }
+
+            const proxyWidgets = hostNode.properties?.proxyWidgets ?? []
+            const entries = (proxyWidgets as unknown[])
+              .filter(
+                (e): e is [string, string] =>
+                  Array.isArray(e) &&
+                  e.length >= 2 &&
+                  typeof e[0] === 'string' &&
+                  typeof e[1] === 'string' &&
+                  !e[1].startsWith('$$')
+              )
+              .map(([nodeId, widgetName]) => {
+                const interiorNode = hostNode.subgraph.getNodeById(
+                  Number(nodeId)
+                )
+                return {
+                  nodeId,
+                  widgetName,
+                  resolved: interiorNode !== null && interiorNode !== undefined
+                }
+              })
+
+            return { entries, count: entries.length }
+          }, HOST_NODE_ID)
+
+          expect(result).not.toHaveProperty('error')
+          const { entries, count } = result as {
+            entries: { nodeId: string; widgetName: string; resolved: boolean }[]
+            count: number
+          }
+          expect(count).toBeGreaterThan(0)
+          for (const entry of entries) {
+            expect(
+              entry.resolved,
+              `Widget "${entry.widgetName}" (node ${entry.nodeId}) should resolve`
+            ).toBe(true)
+          }
+        }).toPass({ timeout: 5000 })
+      })
+    }
+  )
+
+  /**
+   * Regression test for nested subgraph packing leaving stale proxyWidgets
+   * on the outer SubgraphNode.
+   *
+   * When two CLIPTextEncode nodes (ids 6, 7) inside the outer subgraph are
+   * packed into a nested subgraph (node 11), the outer SubgraphNode (id 10)
+   * must drop the now-stale ["7","text"] and ["6","text"] proxy entries.
+   * Only ["3","seed"] (KSampler) should remain.
+   *
+   * Stale entries render as "Disconnected" placeholder widgets (type "button").
+   *
+   * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10390
+   */
+  test.describe(
+    'Nested subgraph stale proxyWidgets',
+    { tag: ['@widget'] },
+    () => {
+      const WORKFLOW = 'subgraphs/nested-subgraph-stale-proxy-widgets'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Outer subgraph node has no stale proxyWidgets after nested packing', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
+
+        const outerNode = comfyPage.vueNodes.getNodeLocator('10')
+        await comfyExpect(outerNode).toBeVisible()
+
+        const widgets = outerNode.getByTestId(TestIds.widgets.widget)
+
+        // Only the KSampler seed widget should be present — no stale
+        // "Disconnected" placeholders from the packed CLIPTextEncode nodes.
+        await comfyExpect(widgets).toHaveCount(1)
+        await comfyExpect(widgets.first()).toBeVisible()
+
+        // Verify the seed widget is present via its label
+        const seedWidget = outerNode.getByLabel('seed', { exact: true })
+        await comfyExpect(seedWidget).toBeVisible()
+      })
+    }
+  )
+})
--- a/browser_tests/tests/subgraph/subgraphOperations.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphOperations.spec.ts
@@ -0,0 +1,77 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe(
+  'Subgraph Internal Operations',
+  { tag: ['@slow', '@subgraph'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
+    })
+
+    test('Can copy and paste nodes in subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+
+      const nodesInSubgraph = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.canvas.graph!.nodes
+        return nodes?.[0]?.id || null
+      })
+
+      expect(nodesInSubgraph).not.toBeNull()
+
+      const nodeToClone = await comfyPage.nodeOps.getNodeRefById(
+        String(nodesInSubgraph)
+      )
+      await nodeToClone.click('title')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.keyboard.press('Control+c')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.keyboard.press('Control+v')
+      await comfyPage.nextFrame()
+
+      const finalNodeCount = await comfyPage.subgraph.getNodeCount()
+      expect(finalNodeCount).toBe(initialNodeCount + 1)
+    })
+
+    test('Can undo and redo operations in subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Add a node
+      await comfyPage.canvasOps.doubleClick()
+      await comfyPage.searchBox.fillAndSelectFirstNode('Note')
+      await comfyPage.nextFrame()
+
+      // Get initial node count
+      const initialCount = await comfyPage.subgraph.getNodeCount()
+
+      // Undo
+      await comfyPage.keyboard.undo()
+      await comfyPage.nextFrame()
+
+      const afterUndoCount = await comfyPage.subgraph.getNodeCount()
+      expect(afterUndoCount).toBe(initialCount - 1)
+
+      // Redo
+      await comfyPage.keyboard.redo()
+      await comfyPage.nextFrame()
+
+      const afterRedoCount = await comfyPage.subgraph.getNodeCount()
+      expect(afterRedoCount).toBe(initialCount)
+    })
+  }
+)
--- a/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
@@ -1,15 +1,12 @@
 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'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { TestIds } from '../../fixtures/selectors'
+import { fitToViewInstant } from '../../helpers/fitToView'
 import {
  getPromotedWidgetNames,
-  getPromotedWidgetCount,
-  getPromotedWidgets
-} from '../helpers/promotedWidgets'
+  getPromotedWidgetCount
+} from '../../helpers/promotedWidgets'

 test.describe(
  'Subgraph Widget Promotion',
@@ -72,14 +69,7 @@ test.describe(

        // Pan to SaveImage node (rightmost, may be off-screen in CI)
        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        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.centerOnNode()

        await saveNode.click('title')
        const subgraphNode = await saveNode.convertToSubgraph()
@@ -360,6 +350,7 @@ 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)
@@ -472,14 +463,7 @@ test.describe(

        // Pan to SaveImage node (rightmost, may be off-screen in CI)
        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        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.centerOnNode()

        await saveNode.click('title')
        const subgraphNode = await saveNode.convertToSubgraph()
@@ -495,120 +479,6 @@ test.describe(
      })
    })

-    test.describe('Legacy And Round-Trip Coverage', () => {
-      test('Legacy -1 proxyWidgets entries are hydrated to concrete interior node IDs', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-compressed-target-slot'
-        )
-        await comfyPage.nextFrame()
-
-        const promotedWidgets = await getPromotedWidgets(comfyPage, '2')
-        expect(promotedWidgets.length).toBeGreaterThan(0)
-        expect(
-          promotedWidgets.some(([interiorNodeId]) => interiorNodeId === '-1')
-        ).toBe(false)
-        expect(
-          promotedWidgets.some(
-            ([interiorNodeId, widgetName]) =>
-              interiorNodeId !== '-1' && widgetName === 'batch_size'
-          )
-        ).toBe(true)
-      })
-
-      test('Promoted widgets survive serialize -> loadGraphData round-trip', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
-        expect(beforePromoted).toContain('text')
-
-        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')
-
-        const widgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('Multi-link input representative stays stable through save/reload', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
-        expect(beforeSnapshot.length).toBeGreaterThan(0)
-
-        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)
-      })
-
-      test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
-        const originalPos = await originalNode.getPosition()
-
-        await comfyPage.page.mouse.move(originalPos.x + 16, originalPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-        await comfyPage.page.mouse.move(originalPos.x + 72, originalPos.y + 72)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-        await comfyPage.nextFrame()
-
-        const subgraphNodeIds = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph!
-          return graph.nodes
-            .filter(
-              (n) =>
-                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-            )
-            .map((n) => String(n.id))
-        })
-
-        expect(subgraphNodeIds.length).toBeGreaterThan(1)
-        for (const nodeId of subgraphNodeIds) {
-          const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-          expect(promotedWidgets.length).toBeGreaterThan(0)
-          expect(
-            promotedWidgets.some(([, widgetName]) => widgetName === 'text')
-          ).toBe(true)
-        }
-      })
-    })
-
    test.describe('Vue Mode - Promoted Preview Content', () => {
      test.beforeEach(async ({ comfyPage }) => {
        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
@@ -714,15 +584,10 @@ test.describe(

        // Delete the subgraph node
        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
+        await subgraphNode.delete()

        // Node no longer exists, so promoted widgets should be gone
-        const nodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.canvas.graph!.getNodeById('11')
-        })
-        expect(nodeExists).toBe(false)
+        expect(await subgraphNode.exists()).toBe(false)
      })

      test('Nested promoted widget entries reflect interior changes after slot removal', async ({
@@ -748,9 +613,7 @@ test.describe(
        })
        expect(removedSlotName).not.toBeNull()

-        await comfyPage.subgraph.rightClickInputSlot()
-        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-        await comfyPage.nextFrame()
+        await comfyPage.subgraph.removeSlot('input')

        await comfyPage.subgraph.exitViaBreadcrumb()

@@ -780,9 +643,7 @@ test.describe(
        await subgraphNode.navigateIntoSubgraph()

        // Remove the text input slot
-        await comfyPage.subgraph.rightClickInputSlot('text')
-        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-        await comfyPage.nextFrame()
+        await comfyPage.subgraph.removeSlot('input', 'text')

        // Navigate back via breadcrumb
        await comfyPage.subgraph.exitViaBreadcrumb()
--- a/browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts
@@ -0,0 +1,216 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
+import { getPromotedWidgetNames } from '../../helpers/promotedWidgets'
+
+// Constants
+const TEST_WIDGET_CONTENT = 'Test content that should persist'
+
+// Common selectors
+const SELECTORS = {
+  breadcrumb: '.subgraph-breadcrumb',
+  domWidget: '.comfy-multiline-input'
+} as const
+
+test.describe(
+  'Subgraph Promoted Widget DOM',
+  { tag: ['@slow', '@subgraph'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
+    })
+
+    test.describe('DOM Widget Navigation and Persistence', () => {
+      test('DOM widget visibility persists through subgraph navigation', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        // Verify promoted widget is visible in parent graph
+        const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await expect(parentTextarea).toBeVisible()
+        await expect(parentTextarea).toHaveCount(1)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        expect(await subgraphNode.exists()).toBe(true)
+
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Verify widget is visible in subgraph
+        const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await expect(subgraphTextarea).toBeVisible()
+        await expect(subgraphTextarea).toHaveCount(1)
+
+        // Navigate back
+        await comfyPage.page.keyboard.press('Escape')
+        await comfyPage.nextFrame()
+
+        // Verify widget is still visible
+        const backToParentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await expect(backToParentTextarea).toBeVisible()
+        await expect(backToParentTextarea).toHaveCount(1)
+      })
+
+      test('DOM widget content is preserved through navigation', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        const textarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await textarea.fill(TEST_WIDGET_CONTENT)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const subgraphTextarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await expect(subgraphTextarea).toHaveValue(TEST_WIDGET_CONTENT)
+
+        await comfyPage.page.keyboard.press('Escape')
+        await comfyPage.nextFrame()
+
+        const parentTextarea = comfyPage.page.locator(SELECTORS.domWidget)
+        await expect(parentTextarea).toHaveValue(TEST_WIDGET_CONTENT)
+      })
+
+      test('Multiple promoted widgets are handled correctly', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+
+        const parentCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(parentCount).toBeGreaterThan(1)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const subgraphCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(subgraphCount).toBe(parentCount)
+
+        await comfyPage.page.keyboard.press('Escape')
+        await comfyPage.nextFrame()
+
+        const finalCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(finalCount).toBe(parentCount)
+      })
+    })
+
+    test.describe('DOM Cleanup', () => {
+      test('DOM elements are cleaned up when subgraph node is removed', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        const initialCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(initialCount).toBe(1)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+
+        await subgraphNode.delete()
+
+        const finalCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(finalCount).toBe(0)
+      })
+
+      test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
+        comfyPage
+      }) => {
+        // Enable new menu for breadcrumb navigation
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+        const workflowName = 'subgraphs/subgraph-with-promoted-text-widget'
+        await comfyPage.workflow.loadWorkflow(workflowName)
+
+        const textareaCount = await comfyPage.page
+          .locator(SELECTORS.domWidget)
+          .count()
+        expect(textareaCount).toBe(1)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+
+        // Navigate into subgraph (method now handles retries internally)
+        await subgraphNode.navigateIntoSubgraph()
+
+        await comfyPage.subgraph.removeSlot('input', 'text')
+
+        // Wait for breadcrumb to be visible
+        await comfyPage.page.waitForSelector(SELECTORS.breadcrumb, {
+          state: 'visible',
+          timeout: 5000
+        })
+
+        // Click breadcrumb to navigate back to parent graph
+        const homeBreadcrumb = comfyPage.page.locator(
+          '.p-breadcrumb-list > :first-child'
+        )
+        await homeBreadcrumb.waitFor({ state: 'visible' })
+        await homeBreadcrumb.click()
+        await comfyPage.nextFrame()
+
+        // Check that the subgraph node has no widgets after removing the text slot
+        const widgetCount = await comfyPage.page.evaluate(() => {
+          return window.app!.canvas.graph!.nodes[0].widgets?.length || 0
+        })
+
+        expect(widgetCount).toBe(0)
+      })
+    })
+
+    test.describe('DOM Positioning', () => {
+      test('Promoted seed widget renders in node body, not header', async ({
+        comfyPage
+      }) => {
+        const subgraphNode =
+          await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+
+        // Enable Vue nodes now that the subgraph has been created
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+        const subgraphNodeId = String(subgraphNode.id)
+        const promotedNames = await getPromotedWidgetNames(
+          comfyPage,
+          subgraphNodeId
+        )
+        expect(promotedNames).toContain('seed')
+
+        // Wait for Vue nodes to render
+        await comfyPage.vueNodes.waitForNodes()
+
+        const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+        await expect(nodeLocator).toBeVisible()
+
+        // The seed widget should be visible inside the node body
+        const seedWidget = nodeLocator
+          .getByLabel('seed', { exact: true })
+          .first()
+        await expect(seedWidget).toBeVisible()
+
+        // Verify widget is inside the node body, not the header
+        await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+      })
+    })
+  }
+)
--- a/browser_tests/tests/subgraph/subgraphSearch.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphSearch.spec.ts
@@ -1,22 +1,11 @@
 import { expect } from '@playwright/test'

-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'

 async function createSubgraphAndNavigateInto(comfyPage: ComfyPage) {
-  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]
-
+  const subgraphNode =
+    await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
  await subgraphNode.navigateIntoSubgraph()
  return subgraphNode
 }
--- a/browser_tests/tests/subgraph/subgraphSerialization.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphSerialization.spec.ts
@@ -0,0 +1,433 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../../fixtures/ComfyPage'
+import type { PromotedWidgetEntry } from '../../helpers/promotedWidgets'
+
+import { comfyPageFixture as test, comfyExpect } from '../../fixtures/ComfyPage'
+import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
+import { TestIds } from '../../fixtures/selectors'
+import {
+  getPromotedWidgets,
+  getPromotedWidgetNames,
+  getPromotedWidgetCount
+} from '../../helpers/promotedWidgets'
+
+const expectPromotedWidgetsToResolveToInteriorNodes = async (
+  comfyPage: ComfyPage,
+  hostSubgraphNodeId: string,
+  widgets: PromotedWidgetEntry[]
+) => {
+  const interiorNodeIds = widgets.map(([id]) => id)
+  const results = await comfyPage.page.evaluate(
+    ([hostId, ids]) => {
+      const graph = window.app!.graph!
+      const hostNode = graph.getNodeById(Number(hostId))
+      if (!hostNode?.isSubgraphNode()) return ids.map(() => false)
+
+      return ids.map((id) => {
+        const interiorNode = hostNode.subgraph.getNodeById(Number(id))
+        return interiorNode !== null && interiorNode !== undefined
+      })
+    },
+    [hostSubgraphNodeId, interiorNodeIds] as const
+  )
+
+  for (const exists of results) {
+    expect(exists).toBe(true)
+  }
+}
+
+test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
+  test.describe('Deterministic proxyWidgets Hydrate', () => {
+    test('proxyWidgets entries map to real interior node IDs after load', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.nextFrame()
+
+      const widgets = await getPromotedWidgets(comfyPage, '11')
+      expect(widgets.length).toBeGreaterThan(0)
+
+      for (const [interiorNodeId] of widgets) {
+        expect(Number(interiorNodeId)).toBeGreaterThan(0)
+      }
+
+      await expectPromotedWidgetsToResolveToInteriorNodes(
+        comfyPage,
+        '11',
+        widgets
+      )
+    })
+
+    test('proxyWidgets entries survive double round-trip without drift', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-multiple-promoted-widgets'
+      )
+      await comfyPage.nextFrame()
+
+      const initialWidgets = await getPromotedWidgets(comfyPage, '11')
+      expect(initialWidgets.length).toBeGreaterThan(0)
+      await expectPromotedWidgetsToResolveToInteriorNodes(
+        comfyPage,
+        '11',
+        initialWidgets
+      )
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const afterFirst = await getPromotedWidgets(comfyPage, '11')
+      await expectPromotedWidgetsToResolveToInteriorNodes(
+        comfyPage,
+        '11',
+        afterFirst
+      )
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const afterSecond = await getPromotedWidgets(comfyPage, '11')
+      await expectPromotedWidgetsToResolveToInteriorNodes(
+        comfyPage,
+        '11',
+        afterSecond
+      )
+
+      expect(afterFirst).toEqual(initialWidgets)
+      expect(afterSecond).toEqual(initialWidgets)
+    })
+
+    test('Compressed target_slot (-1) entries are hydrated to real IDs', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-compressed-target-slot'
+      )
+      await comfyPage.nextFrame()
+
+      const widgets = await getPromotedWidgets(comfyPage, '2')
+      expect(widgets.length).toBeGreaterThan(0)
+
+      for (const [interiorNodeId] of widgets) {
+        expect(interiorNodeId).not.toBe('-1')
+        expect(Number(interiorNodeId)).toBeGreaterThan(0)
+      }
+
+      await expectPromotedWidgetsToResolveToInteriorNodes(
+        comfyPage,
+        '2',
+        widgets
+      )
+    })
+  })
+
+  test.describe('Legacy And Round-Trip Coverage', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
+    test('Legacy -1 proxyWidgets entries are hydrated to concrete interior node IDs', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-compressed-target-slot'
+      )
+      await comfyPage.nextFrame()
+
+      const promotedWidgets = await getPromotedWidgets(comfyPage, '2')
+      expect(promotedWidgets.length).toBeGreaterThan(0)
+      expect(
+        promotedWidgets.some(([interiorNodeId]) => interiorNodeId === '-1')
+      ).toBe(false)
+      expect(
+        promotedWidgets.some(
+          ([interiorNodeId, widgetName]) =>
+            interiorNodeId !== '-1' && widgetName === 'batch_size'
+        )
+      ).toBe(true)
+    })
+
+    test('Promoted widgets survive serialize -> loadGraphData round-trip', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.nextFrame()
+
+      const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
+      expect(beforePromoted).toContain('text')
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const afterPromoted = await getPromotedWidgetNames(comfyPage, '11')
+      expect(afterPromoted).toContain('text')
+
+      const widgetCount = await getPromotedWidgetCount(comfyPage, '11')
+      expect(widgetCount).toBeGreaterThan(0)
+    })
+
+    test('Multi-link input representative stays stable through save/reload', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-multiple-promoted-widgets'
+      )
+      await comfyPage.nextFrame()
+
+      const beforeSnapshot = await getPromotedWidgets(comfyPage, '11')
+      expect(beforeSnapshot.length).toBeGreaterThan(0)
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const afterSnapshot = await getPromotedWidgets(comfyPage, '11')
+      expect(afterSnapshot).toEqual(beforeSnapshot)
+    })
+
+    test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.nextFrame()
+
+      const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
+      const originalPos = await originalNode.getPosition()
+
+      await comfyPage.page.mouse.move(originalPos.x + 16, originalPos.y + 16)
+      await comfyPage.page.keyboard.down('Alt')
+      await comfyPage.page.mouse.down()
+      await comfyPage.nextFrame()
+      await comfyPage.page.mouse.move(originalPos.x + 72, originalPos.y + 72)
+      await comfyPage.page.mouse.up()
+      await comfyPage.page.keyboard.up('Alt')
+      await comfyPage.nextFrame()
+
+      const subgraphNodeIds = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        return graph.nodes
+          .filter(
+            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+          )
+          .map((n) => String(n.id))
+      })
+
+      expect(subgraphNodeIds.length).toBeGreaterThan(1)
+      for (const nodeId of subgraphNodeIds) {
+        const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
+        expect(promotedWidgets.length).toBeGreaterThan(0)
+        expect(
+          promotedWidgets.some(([, widgetName]) => widgetName === 'text')
+        ).toBe(true)
+      }
+    })
+  })
+
+  test.describe('Duplicate ID Remapping', { tag: ['@subgraph'] }, () => {
+    const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+    test('All node IDs are globally unique after loading', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      const result = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
+        // TODO: Extract allNodeIds accessor into LGraph
+        const allGraphs = [graph, ...graph.subgraphs.values()]
+        const allIds = allGraphs
+          .flatMap((g) => g._nodes)
+          .map((n) => n.id)
+          .filter((id): id is number => typeof id === 'number')
+
+        return { allIds, uniqueCount: new Set(allIds).size }
+      })
+
+      expect(result.uniqueCount).toBe(result.allIds.length)
+      expect(result.allIds.length).toBeGreaterThanOrEqual(10)
+    })
+
+    test('Root graph node IDs are preserved as canonical', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      const rootIds = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        return graph._nodes
+          .map((n) => n.id)
+          .filter((id): id is number => typeof id === 'number')
+          .sort((a, b) => a - b)
+      })
+
+      expect(rootIds).toEqual([1, 2, 5])
+    })
+
+    test('Promoted widget tuples are stable after full page reload boot path', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      const beforeSnapshot =
+        await comfyPage.subgraph.getHostPromotedTupleSnapshot()
+      expect(beforeSnapshot.length).toBeGreaterThan(0)
+      expect(
+        beforeSnapshot.some(({ promotedWidgets }) => promotedWidgets.length > 0)
+      ).toBe(true)
+
+      await comfyPage.page.reload()
+      await comfyPage.page.waitForFunction(() => !!window.app)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+
+      await expect(async () => {
+        const afterSnapshot =
+          await comfyPage.subgraph.getHostPromotedTupleSnapshot()
+        expect(afterSnapshot).toEqual(beforeSnapshot)
+      }).toPass({ timeout: 5_000 })
+    })
+
+    test('All links reference valid nodes in their graph', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      const invalidLinks = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph!
+        const labeledGraphs: [string, typeof graph][] = [
+          ['root', graph],
+          ...[...graph.subgraphs.entries()].map(
+            ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
+          )
+        ]
+
+        const isNonNegative = (id: number | string) =>
+          typeof id === 'number' && id >= 0
+
+        return labeledGraphs.flatMap(([label, g]) =>
+          [...g._links.values()].flatMap((link) =>
+            [
+              isNonNegative(link.origin_id) &&
+                !g._nodes_by_id[link.origin_id] &&
+                `${label}: origin_id ${link.origin_id} not found`,
+              isNonNegative(link.target_id) &&
+                !g._nodes_by_id[link.target_id] &&
+                `${label}: target_id ${link.target_id} not found`
+            ].filter(Boolean)
+          )
+        )
+      })
+
+      expect(invalidLinks).toEqual([])
+    })
+
+    test('Subgraph navigation works after ID remapping', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+      await subgraphNode.navigateIntoSubgraph()
+
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
+    })
+  })
+
+  /**
+   * 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)
+
+        comfyExpect(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()
+      })
+    }
+  )
+})
--- a/browser_tests/tests/subgraph/subgraphSlots.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphSlots.spec.ts
@@ -0,0 +1,762 @@
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test, comfyExpect } from '../../fixtures/ComfyPage'
+import { SubgraphHelper } from '../../fixtures/helpers/SubgraphHelper'
+
+// Constants
+const RENAMED_INPUT_NAME = 'renamed_input'
+const RENAMED_NAME = 'renamed_slot_name'
+const SECOND_RENAMED_NAME = 'second_renamed_name'
+const RENAMED_LABEL = 'my_seed'
+
+// Common selectors
+const SELECTORS = {
+  promptDialog: '.graphdialog input'
+} as const
+
+interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+interface NodeSlotData {
+  nodeId: string
+  isSubgraph: boolean
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
+test.describe('Subgraph Slots', { tag: ['@slow', '@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+  })
+
+  test.describe('I/O Slot CRUD', () => {
+    test('Can add input slots to subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
+
+      await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
+      await comfyPage.nextFrame()
+
+      const finalCount = await comfyPage.subgraph.getSlotCount('input')
+      expect(finalCount).toBe(initialCount + 1)
+    })
+
+    test('Can add output slots to subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
+
+      await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
+      await comfyPage.nextFrame()
+
+      const finalCount = await comfyPage.subgraph.getSlotCount('output')
+      expect(finalCount).toBe(initialCount + 1)
+    })
+
+    test('Can remove input slots from subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('input')
+      expect(initialCount).toBeGreaterThan(0)
+
+      await comfyPage.subgraph.removeSlot('input')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const finalCount = await comfyPage.subgraph.getSlotCount('input')
+      expect(finalCount).toBe(initialCount - 1)
+    })
+
+    test('Can remove output slots from subgraph', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialCount = await comfyPage.subgraph.getSlotCount('output')
+      expect(initialCount).toBeGreaterThan(0)
+
+      await comfyPage.subgraph.removeSlot('output')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const finalCount = await comfyPage.subgraph.getSlotCount('output')
+      expect(finalCount).toBe(initialCount - 1)
+    })
+  })
+
+  test.describe('Slot Rename', () => {
+    test('Can rename I/O slots via right-click context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+
+      expect(newInputName).toBe(RENAMED_INPUT_NAME)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+
+    test('Can rename input slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      await comfyPage.subgraph.doubleClickInputSlot(initialInputLabel!)
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+
+      expect(newInputName).toBe(RENAMED_INPUT_NAME)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+
+    test('Can rename output slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+
+      await comfyPage.subgraph.doubleClickOutputSlot(initialOutputLabel!)
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const renamedOutputName = 'renamed_output'
+      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newOutputName = await comfyPage.subgraph.getSlotLabel('output')
+
+      expect(newOutputName).toBe(renamedOutputName)
+      expect(newOutputName).not.toBe(initialOutputLabel)
+    })
+
+    test('Right-click context menu still works alongside double-click', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      // Test that right-click still works for renaming
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const rightClickRenamedName = 'right_click_renamed'
+      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+
+      expect(newInputName).toBe(rightClickRenamedName)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+
+    test('Can double-click on slot label text to rename', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      // Use direct pointer event approach to double-click on label
+      await comfyPage.page.evaluate(() => {
+        const app = window.app!
+
+        const graph = app.canvas.graph
+        if (!graph || !('inputNode' in graph)) {
+          throw new Error('Expected to be in subgraph')
+        }
+        const input = graph.inputs?.[0]
+
+        if (!input?.labelPos) {
+          throw new Error('Could not get label position for testing')
+        }
+
+        // Use labelPos for more precise clicking on the text
+        const testX = input.labelPos[0]
+        const testY = input.labelPos[1]
+
+        // Create a minimal mock event with required properties
+        // Full PointerEvent creation is unnecessary for this test
+        const leftClickEvent = {
+          canvasX: testX,
+          canvasY: testY,
+          button: 0,
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        } as Parameters<typeof graph.inputNode.onPointerDown>[0]
+
+        const inputNode = graph.inputNode
+        if (inputNode?.onPointerDown) {
+          inputNode.onPointerDown(
+            leftClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+
+          // Trigger double-click if pointer has the handler
+          if (app.canvas.pointer.onDoubleClick) {
+            app.canvas.pointer.onDoubleClick(leftClickEvent)
+          }
+        }
+      })
+
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const labelClickRenamedName = 'label_click_renamed'
+      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.subgraph.getSlotLabel('input')
+
+      expect(newInputName).toBe(labelClickRenamedName)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+  })
+
+  test.describe('Slot Rename Dialog', () => {
+    test('Shows current slot label (not stale) in rename dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Get initial slot label
+      const initialInputLabel = await comfyPage.subgraph.getSlotLabel('input')
+
+      if (initialInputLabel === null) {
+        throw new Error(
+          'Expected subgraph to have an input slot label for rightClickInputSlot'
+        )
+      }
+
+      // First rename
+      await comfyPage.subgraph.rightClickInputSlot(initialInputLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+
+      // Clear and enter new name
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Wait for dialog to close
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'hidden'
+      })
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      // Verify the rename worked
+      const afterFirstRename = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph))
+          return { label: null, name: null, displayName: null }
+        const slot = graph.inputs?.[0]
+        return {
+          label: slot?.label || null,
+          name: slot?.name || null,
+          displayName: slot?.displayName || slot?.label || slot?.name || null
+        }
+      })
+      expect(afterFirstRename.label).toBe(RENAMED_NAME)
+
+      // Now rename again - this is where the bug would show
+      // We need to use the index-based approach since the method looks for slot.name
+      await comfyPage.subgraph.rightClickInputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+
+      // Get the current value in the prompt dialog
+      const dialogValue = await comfyPage.page.inputValue(
+        SELECTORS.promptDialog
+      )
+
+      // This should show the current label (RENAMED_NAME), not the original name
+      expect(dialogValue).toBe(RENAMED_NAME)
+      expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
+
+      // Complete the second rename to ensure everything still works
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Wait for dialog to close
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'hidden'
+      })
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      // Verify the second rename worked
+      const afterSecondRename = await comfyPage.subgraph.getSlotLabel('input')
+      expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
+    })
+
+    test('Shows current output slot label in rename dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Get initial output slot label
+      const initialOutputLabel = await comfyPage.subgraph.getSlotLabel('output')
+
+      if (initialOutputLabel === null) {
+        throw new Error(
+          'Expected subgraph to have an output slot label for rightClickOutputSlot'
+        )
+      }
+
+      // First rename
+      await comfyPage.subgraph.rightClickOutputSlot(initialOutputLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+
+      // Clear and enter new name
+      await comfyPage.page.fill(SELECTORS.promptDialog, '')
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Wait for dialog to close
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'hidden'
+      })
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      // Now rename again to check for stale content
+      // We need to use the index-based approach since the method looks for slot.name
+      await comfyPage.subgraph.rightClickOutputSlot()
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+
+      // Get the current value in the prompt dialog
+      const dialogValue = await comfyPage.page.inputValue(
+        SELECTORS.promptDialog
+      )
+
+      // This should show the current label (RENAMED_NAME), not the original name
+      expect(dialogValue).toBe(RENAMED_NAME)
+    })
+  })
+
+  test.describe('Slot Rename Propagation', () => {
+    /**
+     * Regression test for subgraph input slot rename propagation.
+     *
+     * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
+     * update the promoted widget label shown on the parent SubgraphNode and
+     * keep the widget positioned in the node body (not the header).
+     *
+     * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
+     */
+    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
+      comfyPage
+    }) => {
+      const { page } = comfyPage
+      const WORKFLOW = 'subgraphs/test-values-input-subgraph'
+
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      // 1. Load workflow with subgraph containing a promoted seed widget input
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+
+      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
+      await comfyExpect(sgNode).toBeVisible()
+
+      // 2. Verify the seed widget is visible on the parent node
+      const seedWidget = sgNode.getByLabel('seed', { exact: true })
+      await comfyExpect(seedWidget).toBeVisible()
+
+      // Verify widget is in the node body, not the header
+      await SubgraphHelper.expectWidgetBelowHeader(sgNode, seedWidget)
+
+      // 3. Enter the subgraph and rename the seed slot.
+      //    The subgraph IO rename uses canvas.prompt() which requires the
+      //    litegraph context menu, so temporarily disable Vue nodes.
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
+
+      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
+      await sgNodeRef.navigateIntoSubgraph()
+
+      // Find the seed SubgraphInput slot
+      const seedSlotName = await page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph) return null
+        const inputs = (
+          graph as { inputs?: Array<{ name: string; type: string }> }
+        ).inputs
+        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
+      })
+      expect(seedSlotName).not.toBeNull()
+
+      // 4. Right-click the seed input slot and rename it
+      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      const dialog = SELECTORS.promptDialog
+      await page.waitForSelector(dialog, { state: 'visible' })
+      await page.fill(dialog, '')
+      await page.fill(dialog, RENAMED_LABEL)
+      await page.keyboard.press('Enter')
+      await page.waitForSelector(dialog, { state: 'hidden' })
+
+      // 5. Navigate back to parent graph and re-enable Vue nodes
+      await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+
+      // 6. Verify the widget label updated to the renamed value
+      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
+      await comfyExpect(sgNodeAfter).toBeVisible()
+
+      const updatedLabel = await page.evaluate(() => {
+        const node = window.app!.canvas.graph!.getNodeById('19')
+        if (!node) return null
+        const w = node.widgets?.find((w: { name: string }) =>
+          w.name.includes('seed')
+        )
+        return w?.label || w?.name || null
+      })
+      expect(updatedLabel).toBe(RENAMED_LABEL)
+
+      // 7. Verify the widget is still in the body, not the header
+      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
+      await comfyExpect(seedWidgetAfter).toBeVisible()
+
+      await SubgraphHelper.expectWidgetBelowHeader(sgNodeAfter, seedWidgetAfter)
+    })
+  })
+
+  test.describe('Compressed target_slot', () => {
+    test('Can create widget from link with compressed target_slot', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-compressed-target-slot'
+      )
+      const step = await comfyPage.page.evaluate(() => {
+        return window.app!.graph!.nodes[0].widgets![0].options.step
+      })
+      expect(step).toBe(10)
+    })
+  })
+
+  test.describe('Slot Alignment', () => {
+    /**
+     * Regression test for link misalignment on SubgraphNodes when loading
+     * workflows with workflowRendererVersion: "LG".
+     *
+     * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
+     * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
+     * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
+     * slot offsets. The fix uses DOM-relative measurement instead.
+     */
+    test('slot positions stay within node bounds after loading LG workflow', async ({
+      comfyPage
+    }) => {
+      const SLOT_BOUNDS_MARGIN = 20
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      const workflowPath = resolve(
+        import.meta.dirname,
+        '../../assets/subgraphs/basic-subgraph.json'
+      )
+      const workflow = JSON.parse(
+        readFileSync(workflowPath, 'utf-8')
+      ) as ComfyWorkflowJSON
+      workflow.extra = {
+        ...workflow.extra,
+        workflowRendererVersion: 'LG'
+      }
+
+      await comfyPage.page.evaluate(
+        (wf) =>
+          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
+            openSource: 'template'
+          }),
+        workflow
+      )
+      await comfyPage.nextFrame()
+
+      // Wait for slot elements to appear in DOM
+      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
+
+      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.graph._nodes
+        const slotData: NodeSlotData[] = []
+
+        for (const node of nodes) {
+          const nodeId = String(node.id)
+          const nodeEl = document.querySelector(
+            `[data-node-id="${nodeId}"]`
+          ) as HTMLElement | null
+          if (!nodeEl) continue
+
+          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+          if (slotEls.length === 0) continue
+
+          const slots: SlotMeasurement[] = []
+
+          const nodeRect = nodeEl.getBoundingClientRect()
+          for (const slotEl of slotEls) {
+            const slotRect = slotEl.getBoundingClientRect()
+            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
+            slots.push({
+              key: slotKey,
+              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+            })
+          }
+
+          slotData.push({
+            nodeId,
+            isSubgraph: !!node.isSubgraphNode?.(),
+            nodeW: nodeRect.width,
+            nodeH: nodeRect.height,
+            slots
+          })
+        }
+
+        return slotData
+      })
+
+      const subgraphNodes = result.filter((n) => n.isSubgraph)
+      expect(subgraphNodes.length).toBeGreaterThan(0)
+
+      for (const node of subgraphNodes) {
+        for (const slot of node.slots) {
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
+
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
+        }
+      }
+    })
+  })
+
+  test.describe('Promoted Slot Position', () => {
+    test('Promoted text widget slot is positioned at widget row, not header', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+
+      // Render a few frames so arrange() runs
+      await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
+
+      const result = await SubgraphHelper.getTextSlotPosition(
+        comfyPage.page,
+        '11'
+      )
+      expect(result).not.toBeNull()
+      expect(result!.hasPos).toBe(true)
+
+      // The slot Y position should be well below the title area.
+      // If it's near 0 or negative, the slot is stuck at the header (the bug).
+      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
+    })
+
+    test('Slot position remains correct after renaming subgraph input label', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
+      await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
+
+      // Verify initial position is correct
+      const before = await SubgraphHelper.getTextSlotPosition(
+        comfyPage.page,
+        '11'
+      )
+      expect(before).not.toBeNull()
+      expect(before!.hasPos).toBe(true)
+      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
+
+      // Navigate into subgraph and rename the text input
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialLabel = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.canvas.graph
+        if (!graph || !('inputNode' in graph)) return null
+        const textInput = graph.inputs?.find(
+          (i: { type: string }) => i.type === 'STRING'
+        )
+        return textInput?.label || textInput?.name || null
+      })
+
+      if (!initialLabel)
+        throw new Error('Could not find STRING input in subgraph')
+
+      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
+      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
+      await comfyPage.nextFrame()
+
+      const dialog = SELECTORS.promptDialog
+      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
+      await comfyPage.page.fill(dialog, '')
+      await comfyPage.page.fill(dialog, 'my_custom_prompt')
+      await comfyPage.page.keyboard.press('Enter')
+      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
+
+      // Navigate back to parent graph
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Verify slot position is still at the widget row after rename
+      const after = await SubgraphHelper.getTextSlotPosition(
+        comfyPage.page,
+        '11'
+      )
+      expect(after).not.toBeNull()
+      expect(after!.hasPos).toBe(true)
+      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
+
+      // widget.name is the stable identity key — it does NOT change on rename.
+      // The display label is on input.label, read via PromotedWidgetView.label.
+      expect(after!.widgetName).not.toBe('my_custom_prompt')
+    })
+  })
+})
--- a/browser_tests/tests/subgraphInputSlotRename.spec.ts
+++ b/browser_tests/tests/subgraphInputSlotRename.spec.ts
@@ -1,117 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-const WORKFLOW = 'subgraphs/test-values-input-subgraph'
-const RENAMED_LABEL = 'my_seed'
-
-/**
- * Regression test for subgraph input slot rename propagation.
- *
- * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
- * update the promoted widget label shown on the parent SubgraphNode and
- * keep the widget positioned in the node body (not the header).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
- */
-test.describe(
-  'Subgraph input slot rename propagation',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      // 1. Load workflow with subgraph containing a promoted seed widget input
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNode).toBeVisible()
-
-      // 2. Verify the seed widget is visible on the parent node
-      const seedWidget = sgNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is in the node body, not the header
-      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
-      //    litegraph context menu, so temporarily disable Vue nodes.
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
-      await sgNodeRef.navigateIntoSubgraph()
-
-      // Find the seed SubgraphInput slot
-      const seedSlotName = await page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph) return null
-        const inputs = (
-          graph as { inputs?: Array<{ name: string; type: string }> }
-        ).inputs
-        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
-      })
-      expect(seedSlotName).not.toBeNull()
-
-      // 4. Right-click the seed input slot and rename it
-      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await page.waitForSelector(dialog, { state: 'visible' })
-      await page.fill(dialog, '')
-      await page.fill(dialog, RENAMED_LABEL)
-      await page.keyboard.press('Enter')
-      await page.waitForSelector(dialog, { state: 'hidden' })
-
-      // 5. Navigate back to parent graph and re-enable Vue nodes
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // 6. Verify the widget label updated to the renamed value
-      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNodeAfter).toBeVisible()
-
-      const updatedLabel = await page.evaluate(() => {
-        const node = window.app!.canvas.graph!.getNodeById('19')
-        if (!node) return null
-        const w = node.widgets?.find((w: { name: string }) =>
-          w.name.includes('seed')
-        )
-        return w?.label || w?.name || null
-      })
-      expect(updatedLabel).toBe(RENAMED_LABEL)
-
-      // 7. Verify the widget is still in the body, not the header
-      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
-      await expect(seedWidgetAfter).toBeVisible()
-
-      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
-      )
-    })
-  }
-)
--- a/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
+++ b/browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts
@@ -1,99 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-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: string[] = []
-      comfyPage.page.on('console', (msg) => {
-        const text = msg.text()
-        if (
-          text.includes('Failed to resolve legacy -1') ||
-          text.includes('No link found') ||
-          text.includes('No inner link found')
-        ) {
-          warnings.push(text)
-        }
-      })
-
-      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()
-    })
-  }
-)
--- a/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
+++ b/browser_tests/tests/subgraphNestedConfigureOrder.spec.ts
@@ -1,110 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
-    comfyPage
-  }) => {
-    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)
-
-    expect(warnings).toEqual([])
-  })
-
-  test('All three subgraph levels resolve promoted widgets', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const results = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-
-      return allGraphs.flatMap((g) =>
-        g._nodes
-          .filter(
-            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-          )
-          .map((hostNode) => {
-            const proxyWidgets = Array.isArray(
-              hostNode.properties?.proxyWidgets
-            )
-              ? hostNode.properties.proxyWidgets
-              : []
-
-            const widgetEntries = proxyWidgets
-              .filter(
-                (e: unknown): e is [string, string] =>
-                  Array.isArray(e) &&
-                  e.length >= 2 &&
-                  typeof e[0] === 'string' &&
-                  typeof e[1] === 'string'
-              )
-              .map(([interiorNodeId, widgetName]: [string, string]) => {
-                const sg = hostNode.isSubgraphNode() ? hostNode.subgraph : null
-                const interiorNode = sg?.getNodeById(Number(interiorNodeId))
-                return {
-                  interiorNodeId,
-                  widgetName,
-                  resolved: interiorNode !== null && interiorNode !== undefined
-                }
-              })
-
-            return {
-              hostNodeId: String(hostNode.id),
-              widgetEntries
-            }
-          })
-      )
-    })
-
-    expect(
-      results.length,
-      'Should have subgraph host nodes at multiple nesting levels'
-    ).toBeGreaterThanOrEqual(2)
-
-    for (const { hostNodeId, widgetEntries } of results) {
-      expect(
-        widgetEntries.length,
-        `Host node ${hostNodeId} should have promoted widgets`
-      ).toBeGreaterThan(0)
-
-      for (const { interiorNodeId, widgetName, resolved } of widgetEntries) {
-        expect(interiorNodeId).not.toBe('-1')
-        expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        expect(widgetName).toBeTruthy()
-        expect(
-          resolved,
-          `Widget "${widgetName}" (interior node ${interiorNodeId}) on host ${hostNodeId} should resolve`
-        ).toBe(true)
-      }
-    }
-  })
-
-  test('Prompt execution succeeds without 400 error', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
-
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-
-    const response = await responsePromise
-    expect(response.status()).not.toBe(400)
-  })
-})
--- a/browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts
+++ b/browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts
@@ -1,141 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
-const PROMOTED_BORDER_CLASS = 'ring-component-node-widget-promoted'
-
-/**
- * Regression tests for nested subgraph promotion where multiple interior
- * nodes share the same widget name (e.g. two CLIPTextEncode nodes both
- * with a "text" widget).
- *
- * The inner subgraph (node 3) promotes both ["1","text"] and ["2","text"].
- * The outer subgraph (node 4) promotes through node 3 using identity
- * disambiguation (optional sourceNodeId in the promotion entry).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10123#discussion_r2956230977
- */
-test.describe(
-  'Nested subgraph duplicate widget names',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Inner subgraph node has both text widgets promoted', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const nonPreview = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return ((innerSubgraphNode.properties?.proxyWidgets ?? []) as unknown[])
-          .filter(
-            (entry): entry is [string, string] =>
-              Array.isArray(entry) &&
-              entry.length >= 2 &&
-              typeof entry[0] === 'string' &&
-              typeof entry[1] === 'string' &&
-              !entry[1].startsWith('$$')
-          )
-          .map(
-            ([nodeId, widgetName]) => [nodeId, widgetName] as [string, string]
-          )
-      })
-
-      expect(nonPreview).toEqual([
-        ['1', 'text'],
-        ['2', 'text']
-      ])
-    })
-
-    test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const widgetValues = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return (innerSubgraphNode.widgets ?? []).map((w) => ({
-          name: w.name,
-          value: w.value
-        }))
-      })
-
-      const textWidgets = widgetValues.filter((w) => w.name.startsWith('text'))
-      expect(textWidgets).toHaveLength(2)
-
-      const values = textWidgets.map((w) => w.value)
-      expect(values).toContain('11111111111')
-      expect(values).toContain('22222222222')
-    })
-
-    test.describe('Promoted border styling in Vue mode', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Intermediate subgraph widgets get promoted border, outermost does not', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(WORKFLOW)
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 4 is the outer SubgraphNode at root level.
-        // Its widgets are not promoted further (no parent subgraph),
-        // so none of its widget wrappers should carry the promoted ring.
-        const outerNode = comfyPage.vueNodes.getNodeLocator('4')
-        await expect(outerNode).toBeVisible()
-
-        const outerPromotedRings = outerNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(outerPromotedRings).toHaveCount(0)
-
-        // Navigate into the outer subgraph (node 4) to reach node 3
-        await comfyPage.vueNodes.enterSubgraph('4')
-        await comfyPage.nextFrame()
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 3 is the intermediate SubgraphNode whose "text" widgets
-        // are promoted up to the outer subgraph (node 4).
-        // Its widget wrappers should carry the promoted border ring.
-        const intermediateNode = comfyPage.vueNodes.getNodeLocator('3')
-        await expect(intermediateNode).toBeVisible()
-
-        const intermediatePromotedRings = intermediateNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(intermediatePromotedRings).toHaveCount(1)
-      })
-    })
-  }
-)
--- a/browser_tests/tests/subgraphNestedPackValues.spec.ts
+++ b/browser_tests/tests/subgraphNestedPackValues.spec.ts
@@ -1,195 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-/**
- * Regression test for PR #10532:
- * Packing all nodes inside a subgraph into a nested subgraph was causing
- * the parent subgraph node's promoted widget values to go blank.
- *
- * Root cause: SubgraphNode had two sets of PromotedWidgetView references —
- * node.widgets (rebuilt from the promotion store) vs input._widget (cached
- * at promotion time). After repointing, input._widget still pointed to
- * removed node IDs, causing missing-node failures and blank values on the
- * next checkState cycle.
- */
-test.describe(
-  'Nested subgraph pack preserves promoted widget values',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    const WORKFLOW = 'subgraphs/nested-pack-promoted-values'
-    const HOST_NODE_ID = '57'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Promoted widget values persist after packing interior nodes into nested subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // 1. Verify initial promoted widget values via Vue node DOM
-      const widthWidget = nodeLocator
-        .getByLabel('width', { exact: true })
-        .first()
-      const heightWidget = nodeLocator
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsWidget = nodeLocator
-        .getByLabel('steps', { exact: true })
-        .first()
-      const textWidget = nodeLocator.getByRole('textbox', { name: 'prompt' })
-
-      const widthControls =
-        comfyPage.vueNodes.getInputNumberControls(widthWidget)
-      const heightControls =
-        comfyPage.vueNodes.getInputNumberControls(heightWidget)
-      const stepsControls =
-        comfyPage.vueNodes.getInputNumberControls(stepsWidget)
-
-      await expect(async () => {
-        await expect(widthControls.input).toHaveValue('1024')
-        await expect(heightControls.input).toHaveValue('1024')
-        await expect(stepsControls.input).toHaveValue('8')
-        await expect(textWidget).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-
-      // 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)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeAfter).toBeVisible()
-
-      const widthAfter = nodeAfter.getByLabel('width', { exact: true }).first()
-      const heightAfter = nodeAfter
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsAfter = nodeAfter.getByLabel('steps', { exact: true }).first()
-      const textAfter = nodeAfter.getByRole('textbox', { name: 'prompt' })
-
-      const widthControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(widthAfter)
-      const heightControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(heightAfter)
-      const stepsControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(stepsAfter)
-
-      await expect(async () => {
-        await expect(widthControlsAfter.input).toHaveValue('1024')
-        await expect(heightControlsAfter.input).toHaveValue('1024')
-        await expect(stepsControlsAfter.input).toHaveValue('8')
-        await expect(textAfter).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-    })
-
-    test('proxyWidgets entries resolve to valid interior nodes after packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // Verify the host node is visible
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // 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 () => {
-        const result = await comfyPage.page.evaluate((hostId) => {
-          const graph = window.app!.graph!
-          const hostNode = graph.getNodeById(hostId)
-          if (
-            !hostNode ||
-            typeof hostNode.isSubgraphNode !== 'function' ||
-            !hostNode.isSubgraphNode()
-          ) {
-            return { error: 'Host node not found or not a subgraph node' }
-          }
-
-          const proxyWidgets = hostNode.properties?.proxyWidgets ?? []
-          const entries = (proxyWidgets as unknown[])
-            .filter(
-              (e): e is [string, string] =>
-                Array.isArray(e) &&
-                e.length >= 2 &&
-                typeof e[0] === 'string' &&
-                typeof e[1] === 'string' &&
-                !e[1].startsWith('$$')
-            )
-            .map(([nodeId, widgetName]) => {
-              const interiorNode = hostNode.subgraph.getNodeById(Number(nodeId))
-              return {
-                nodeId,
-                widgetName,
-                resolved: interiorNode !== null && interiorNode !== undefined
-              }
-            })
-
-          return { entries, count: entries.length }
-        }, HOST_NODE_ID)
-
-        expect(result).not.toHaveProperty('error')
-        const { entries, count } = result as {
-          entries: { nodeId: string; widgetName: string; resolved: boolean }[]
-          count: number
-        }
-        expect(count).toBeGreaterThan(0)
-        for (const entry of entries) {
-          expect(
-            entry.resolved,
-            `Widget "${entry.widgetName}" (node ${entry.nodeId}) should resolve`
-          ).toBe(true)
-        }
-      }).toPass({ timeout: 5000 })
-    })
-  }
-)
--- a/browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts
+++ b/browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts
@@ -1,51 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-const WORKFLOW = 'subgraphs/nested-subgraph-stale-proxy-widgets'
-
-/**
- * Regression test for nested subgraph packing leaving stale proxyWidgets
- * on the outer SubgraphNode.
- *
- * When two CLIPTextEncode nodes (ids 6, 7) inside the outer subgraph are
- * packed into a nested subgraph (node 11), the outer SubgraphNode (id 10)
- * must drop the now-stale ["7","text"] and ["6","text"] proxy entries.
- * Only ["3","seed"] (KSampler) should remain.
- *
- * Stale entries render as "Disconnected" placeholder widgets (type "button").
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10390
- */
-test.describe(
-  'Nested subgraph stale proxyWidgets',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Outer subgraph node has no stale proxyWidgets after nested packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('10')
-      await expect(outerNode).toBeVisible()
-
-      const widgets = outerNode.getByTestId(TestIds.widgets.widget)
-
-      // Only the KSampler seed widget should be present — no stale
-      // "Disconnected" placeholders from the packed CLIPTextEncode nodes.
-      await expect(widgets).toHaveCount(1)
-      await expect(widgets.first()).toBeVisible()
-
-      // Verify the seed widget is present via its label
-      const seedWidget = outerNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-    })
-  }
-)
--- a/browser_tests/tests/subgraphProgressClear.spec.ts
+++ b/browser_tests/tests/subgraphProgressClear.spec.ts
@@ -1,131 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Subgraph progress clear on navigation',
-  { tag: ['@subgraph'] },
-  () => {
-    test('Stale progress is cleared on subgraph node after navigating back', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Find the subgraph node
-      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:
-      //   1. User views root graph during execution
-      //   2. Progress watcher sets node.progress = 0.5
-      //   3. User enters subgraph
-      //   4. Execution completes (nodeProgressStates becomes {})
-      //   5. Watcher fires, clears subgraph-internal nodes, but root-level
-      //      SubgraphNode isn't visible so it keeps stale progress
-      //   6. User navigates back — watcher should fire and clear it
-      await comfyPage.page.evaluate((nodeId) => {
-        const node = window.app!.canvas.graph!.getNodeById(nodeId)!
-        node.progress = 0.5
-      }, subgraphNodeId!)
-
-      // Verify progress is set
-      const progressBefore = await comfyPage.page.evaluate((nodeId) => {
-        return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-      }, subgraphNodeId!)
-      expect(progressBefore).toBe(0.5)
-
-      // Navigate into the subgraph
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
-        subgraphNodeId!
-      )
-      await subgraphNode.navigateIntoSubgraph()
-
-      // Verify we're inside the subgraph
-      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')
-      await comfyPage.nextFrame()
-
-      // The progress watcher should fire when graph changes (because
-      // nodeLocationProgressStates is empty {} and the watcher should
-      // iterate canvas.graph.nodes to clear stale node.progress values).
-      //
-      // BUG: Without watching canvasStore.currentGraph, the watcher doesn't
-      // fire on subgraph->root navigation when progress is already empty,
-      // leaving stale node.progress = 0.5 on the SubgraphNode.
-      await expect(async () => {
-        const progressAfter = await comfyPage.page.evaluate((nodeId) => {
-          return window.app!.canvas.graph!.getNodeById(nodeId)!.progress
-        }, subgraphNodeId!)
-        expect(progressAfter).toBeUndefined()
-      }).toPass({ timeout: 2_000 })
-    })
-
-    test('Stale progress is cleared when switching workflows while inside subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      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!)
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById(
-        subgraphNodeId!
-      )
-      await subgraphNode.navigateIntoSubgraph()
-
-      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()
-
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      await expect(async () => {
-        const subgraphProgressState = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph!
-          const subgraphNode = graph.nodes.find(
-            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-          )
-          if (!subgraphNode) {
-            return { exists: false, progress: null }
-          }
-
-          return { exists: true, progress: subgraphNode.progress }
-        })
-        expect(subgraphProgressState.exists).toBe(true)
-        expect(subgraphProgressState.progress).toBeUndefined()
-      }).toPass({ timeout: 5_000 })
-    })
-  }
-)
--- a/browser_tests/tests/subgraphSlotAlignment.spec.ts
+++ b/browser_tests/tests/subgraphSlotAlignment.spec.ts
@@ -1,132 +0,0 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-interface NodeSlotData {
-  nodeId: string
-  isSubgraph: boolean
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Regression test for link misalignment on SubgraphNodes when loading
- * workflows with workflowRendererVersion: "LG".
- *
- * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
- * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
- * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
- * slot offsets. The fix uses DOM-relative measurement instead.
- */
-test.describe(
-  'Subgraph slot alignment after LG layout scale',
-  { tag: ['@subgraph', '@canvas'] },
-  () => {
-    test('slot positions stay within node bounds after loading LG workflow', async ({
-      comfyPage
-    }) => {
-      const SLOT_BOUNDS_MARGIN = 20
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const workflowPath = resolve(
-        import.meta.dirname,
-        '../assets/subgraphs/basic-subgraph.json'
-      )
-      const workflow = JSON.parse(
-        readFileSync(workflowPath, 'utf-8')
-      ) as ComfyWorkflowJSON
-      workflow.extra = {
-        ...workflow.extra,
-        workflowRendererVersion: 'LG'
-      }
-
-      await comfyPage.page.evaluate(
-        (wf) =>
-          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
-            openSource: 'template'
-          }),
-        workflow
-      )
-      await comfyPage.nextFrame()
-
-      // Wait for slot elements to appear in DOM
-      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
-
-      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.graph._nodes
-        const slotData: NodeSlotData[] = []
-
-        for (const node of nodes) {
-          const nodeId = String(node.id)
-          const nodeEl = document.querySelector(
-            `[data-node-id="${nodeId}"]`
-          ) as HTMLElement | null
-          if (!nodeEl) continue
-
-          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-          if (slotEls.length === 0) continue
-
-          const slots: SlotMeasurement[] = []
-
-          const nodeRect = nodeEl.getBoundingClientRect()
-          for (const slotEl of slotEls) {
-            const slotRect = slotEl.getBoundingClientRect()
-            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
-            slots.push({
-              key: slotKey,
-              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-            })
-          }
-
-          slotData.push({
-            nodeId,
-            isSubgraph: !!node.isSubgraphNode?.(),
-            nodeW: nodeRect.width,
-            nodeH: nodeRect.height,
-            slots
-          })
-        }
-
-        return slotData
-      })
-
-      const subgraphNodes = result.filter((n) => n.isSubgraph)
-      expect(subgraphNodes.length).toBeGreaterThan(0)
-
-      for (const node of subgraphNodes) {
-        for (const slot of node.slots) {
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
-
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
-        }
-      }
-    })
-  }
-)
--- a/browser_tests/tests/subgraphViewport.spec.ts
+++ b/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)
-        ]
-      })
-  })
-})
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -1,7 +1,9 @@
 import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'

+import type { WorkflowTemplates } from '../../src/platform/workflow/templates/types/template'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'

 async function checkTemplateFileExists(
  page: Page,
@@ -32,7 +34,11 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    }
  })

-  // TODO: Re-enable this test once issue resolved
+  // 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).
  // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
  test.skip('should have all required thumbnail media for each template', async ({
    comfyPage
@@ -72,9 +78,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    // Clear the workflow
    await comfyPage.menu.workflowsTab.open()
    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-    await expect(async () => {
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-    }).toPass({ timeout: 250 })
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
+      .toBe(0)

    // Load a template
    await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
@@ -87,9 +93,9 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await expect(comfyPage.templates.content).toBeHidden()

    // Ensure we now have some nodes
-    await expect(async () => {
-      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBeGreaterThan(0)
-    }).toPass({ timeout: 250 })
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 250 })
+      .toBeGreaterThan(0)
  })

  test('dialog should be automatically shown to first-time users', async ({
@@ -102,7 +108,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
    await comfyPage.setup({ clearStorage: true })

    // Expect the templates dialog to be shown
-    expect(await comfyPage.templates.content.isVisible()).toBe(true)
+    await expect(comfyPage.templates.content).toBeVisible({ timeout: 5000 })
  })

  test('Uses proper locale files for templates', async ({ comfyPage }) => {
@@ -239,7 +245,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
      await comfyPage.page.route(
        '**/templates/index.json',
        async (route, _) => {
-          const response = [
+          const response: WorkflowTemplates[] = [
            {
              moduleName: 'default',
              title: 'Test Templates',
@@ -341,4 +347,71 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
      )
    }
  )
+
+  test(
+    'template cards display overlay tags correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        const response = [
+          {
+            moduleName: 'default',
+            title: 'Test Templates',
+            type: 'image',
+            templates: [
+              {
+                name: 'tagged-template',
+                title: 'Tagged Template',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template with tags.',
+                tags: ['Relight', 'Image Edit']
+              },
+              {
+                name: 'no-tags',
+                title: 'No Tags',
+                mediaType: 'image',
+                mediaSubtype: 'webp',
+                description: 'A template without tags.'
+              }
+            ]
+          }
+        ]
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(response),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.page.route('**/templates/**.webp', async (route) => {
+        await route.fulfill({
+          status: 200,
+          path: 'browser_tests/assets/example.webp',
+          headers: {
+            'Content-Type': 'image/webp',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      const taggedCard = comfyPage.page.getByTestId(
+        TestIds.templates.workflowCard('tagged-template')
+      )
+      await expect(taggedCard).toBeVisible({ timeout: 5000 })
+      await expect(taggedCard.getByText('Relight')).toBeVisible()
+      await expect(taggedCard.getByText('Image Edit')).toBeVisible()
+
+      const templateGrid = comfyPage.page.getByTestId(TestIds.templates.content)
+      await expect(templateGrid).toHaveScreenshot(
+        'template-cards-with-overlay-tags.png'
+      )
+    }
+  )
 })
--- a/browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png
+++ b/browser_tests/tests/templates.spec.ts-snapshots/template-cards-with-overlay-tags-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts
@@ -25,37 +25,37 @@ test.describe('Vue Nodes Image Preview', () => {
      dropPosition: { x, y }
    })

-    const imagePreview = comfyPage.page.locator('.image-preview')
+    const nodeId = String(loadImageNode.id)
+    const imagePreview = comfyPage.vueNodes
+      .getNodeLocator(nodeId)
+      .locator('.image-preview')
+
    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible({ timeout: 30_000 })
    await expect(imagePreview).toContainText('x')

    return {
      imagePreview,
-      nodeId: String(loadImageNode.id)
+      nodeId
    }
  }

-  // TODO(#8143): Re-enable after image preview sync is working in CI
-  test.fixme('opens mask editor from image preview button', async ({
-    comfyPage
-  }) => {
+  test('opens mask editor from image preview button', async ({ comfyPage }) => {
    const { imagePreview } = await loadImageOnNode(comfyPage)

-    await imagePreview.locator('[role="img"]').focus()
+    await imagePreview.getByRole('region').hover()
    await comfyPage.page.getByLabel('Edit or mask image').click()

    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
  })

-  // TODO(#8143): Re-enable after image preview sync is working in CI
-  test.fixme('shows image context menu options', async ({ comfyPage }) => {
+  test('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')
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -76,10 +76,9 @@ test.describe('Combo text widget', { tag: ['@screenshot', '@widget'] }, () => {
    await comfyPage.page.keyboard.press('r')

    // Wait for nodes' widgets to be updated
-    await expect(async () => {
-      const refreshedComboValues = await getComboValues()
-      expect(refreshedComboValues).not.toEqual(initialComboValues)
-    }).toPass({ timeout: 5000 })
+    await expect
+      .poll(() => getComboValues(), { timeout: 5000 })
+      .not.toEqual(initialComboValues)
  })

  test('Should refresh combo values of nodes with v2 combo input spec', async ({
@@ -185,7 +184,9 @@ test.describe(
 test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
  test('Can load image', async ({ comfyPage }) => {
    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png')
+    await expect(comfyPage.canvas).toHaveScreenshot('load_image_widget.png', {
+      maxDiffPixels: 50
+    })
  })

  test('Can drag and drop image', async ({ comfyPage }) => {
@@ -227,14 +228,23 @@ test.describe('Image widget', { tag: ['@screenshot', '@widget'] }, () => {
    const comboEntry = comfyPage.page.getByRole('menuitem', {
      name: 'image32x32.webp'
    })
+    const imageLoaded = comfyPage.page.waitForResponse(
+      (resp) =>
+        resp.url().includes('/view') &&
+        resp.url().includes('image32x32.webp') &&
+        resp.request().method() === 'GET' &&
+        resp.status() === 200
+    )
    await comboEntry.click()

-    // Stabilization for the image swap
+    // Wait for the image to load from the server
+    await imageLoaded
    await comfyPage.nextFrame()

    // Expect the image preview to change automatically
    await expect(comfyPage.canvas).toHaveScreenshot(
-      'image_preview_changed_by_combo_value.png'
+      'image_preview_changed_by_combo_value.png',
+      { maxDiffPixels: 50 }
    )

    // Expect the filename combo value to be updated
@@ -273,38 +283,6 @@ test.describe(
  'Animated image widget',
  { tag: ['@screenshot', '@widget'] },
  () => {
-    // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3718
-    test.skip('Shows preview of uploaded animated image', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('widgets/load_animated_webp')
-
-      // Get position of the load animated webp node
-      const nodes = await comfyPage.nodeOps.getNodeRefsByType(
-        'DevToolsLoadAnimatedImageTest'
-      )
-      const loadAnimatedWebpNode = nodes[0]
-      const { x, y } = await loadAnimatedWebpNode.getPosition()
-
-      // Drag and drop image file onto the load animated webp node
-      await comfyPage.dragDrop.dragAndDropFile('animated_webp.webp', {
-        dropPosition: { x, y }
-      })
-
-      // Expect the image preview to change automatically
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'animated_image_preview_drag_and_dropped.png'
-      )
-
-      // Move mouse and click on canvas to trigger render
-      await comfyPage.page.mouse.click(64, 64)
-
-      // Expect the image preview to change to the next frame of the animation
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'animated_image_preview_drag_and_dropped_next_frame.png'
-      )
-    })
-
    test('Can drag-and-drop animated webp image', async ({ comfyPage }) => {
      await comfyPage.workflow.loadWorkflow('widgets/load_animated_webp')

@@ -359,9 +337,11 @@ test.describe(
        },
        [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
      )
+      await comfyPage.nextFrame()
+      await comfyPage.nextFrame()
      await expect(
        comfyPage.page.locator('.dom-widget').locator('img')
-      ).toHaveCount(2)
+      ).toHaveCount(2, { timeout: 10_000 })
    })
  }
 )
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<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>
				`@@ -0,0 +1 @@`
				`<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>`