fix: App mode - workaround for alt+m producing alt+μ on mac (#10528)

## Summary

Adds a second keybinding for app mode as on Mac Alt+M produces Alt+μ

## Changes

- **What**: add extra binding entry

## Screenshots (if applicable)

Still shows alt + m in the keybinding panel
<img width="840" height="206" alt="image"
src="https://github.com/user-attachments/assets/f1906bc2-e7c2-4eac-b3ca-5a8a207cc93c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10528-fix-App-mode-workaround-for-alt-m-producing-alt-on-mac-32e6d73d36508176b7d6d918c5bb88f3)
by [Unito](https://www.unito.io)

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

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

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

@@ -19,23 +19,44 @@ done
 # Wait 3 minutes for automation
 sleep 180
 
-# Check which got auto-PRs
+# Check which got auto-PRs (auto-merge is enabled, so clean ones will self-merge after CI)
 gh pr list --base TARGET_BRANCH --state open --limit 50 --json number,title
 ```
 
-## Step 2: Review & Merge Clean Auto-PRs
+> **Note:** The `pr-backport.yaml` workflow now enables `gh pr merge --auto --squash` on automation-created PRs. Clean PRs will auto-merge once CI passes — no manual merge needed for those.
+
+## Step 2: Wait for CI & Merge Clean Auto-PRs
+
+Most automation PRs will auto-merge once CI passes (via `--auto --squash` in the workflow). Monitor and handle failures:
 
 ```bash
-for pr in $AUTO_PRS; do
-  # Check size
-  gh pr view $pr --json title,additions,deletions,changedFiles \
-    --jq '"Files: \(.changedFiles), +\(.additions)/-\(.deletions)"'
-  # Admin merge
-  gh pr merge $pr --squash --admin
-  sleep 3
+# Wait for CI to complete (~45 minutes for full suite)
+sleep 2700
+
+# Check which PRs are still open (CI may have failed, or auto-merge succeeded)
+STILL_OPEN_PRS=$(gh pr list --base TARGET_BRANCH --state open --limit 50 --json number --jq '.[].number')
+RECENTLY_MERGED=$(gh pr list --base TARGET_BRANCH --state merged --limit 50 --json number,title,mergedAt)
+
+# For PRs still open, check CI status
+for pr in $STILL_OPEN_PRS; do
+  CI_FAILED=$(gh pr checks $pr --json name,state --jq '[.[] | select(.state == "FAILURE")] | length')
+  CI_PENDING=$(gh pr checks $pr --json name,state --jq '[.[] | select(.state == "PENDING" or .state == "QUEUED")] | length')
+  if [ "$CI_FAILED" != "0" ]; then
+    # CI failed — collect details for triage
+    echo "PR #$pr — CI FAILED:"
+    gh pr checks $pr --json name,state,link --jq '.[] | select(.state == "FAILURE") | "\(.name): \(.state)"'
+  elif [ "$CI_PENDING" != "0" ]; then
+    echo "PR #$pr — CI still running ($CI_PENDING checks pending)"
+  else
+    # All checks passed but didn't auto-merge (race condition or label issue)
+    gh pr merge $pr --squash --admin
+    sleep 3
+  fi
 done
 ```
 
+**⚠️ If CI fails: DO NOT admin-merge to bypass.** See "CI Failure Triage" below.
+
 ## Step 3: Manual Worktree for Conflicts
 
 ```bash
@@ -63,6 +84,13 @@ for PR in ${CONFLICT_PRS[@]}; do
   NEW_PR=$(gh pr create --base TARGET_BRANCH --head backport-$PR-to-TARGET \
     --title "[backport TARGET] TITLE (#$PR)" \
     --body "Backport of #$PR..." | grep -oP '\d+$')
+
+  # Wait for CI before merging — NEVER admin-merge without CI passing
+  echo "Waiting for CI on PR #$NEW_PR..."
+  gh pr checks $NEW_PR --watch --fail-fast || {
+    echo "⚠️ CI failed on PR #$NEW_PR — skipping merge, needs triage"
+    continue
+  }
   gh pr merge $NEW_PR --squash --admin
   sleep 3
 done
@@ -82,7 +110,7 @@ After completing all PRs in a wave for a target branch:
 git fetch origin TARGET_BRANCH
 git worktree add /tmp/verify-TARGET origin/TARGET_BRANCH
 cd /tmp/verify-TARGET
-source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck
+source ~/.nvm/nvm.sh && nvm use 24 && pnpm install && pnpm typecheck && pnpm test:unit
 git worktree remove /tmp/verify-TARGET --force
 ```
 
@@ -132,7 +160,8 @@ git rebase origin/TARGET_BRANCH
 # Resolve new conflicts
 git push --force origin backport-$PR-to-TARGET
 sleep 20  # Wait for GitHub to recompute merge state
-gh pr merge $PR --squash --admin
+# Wait for CI after rebase before merging
+gh pr checks $PR --watch --fail-fast && gh pr merge $PR --squash --admin
 ```
 
 ## Lessons Learned
@@ -146,5 +175,31 @@ gh pr merge $PR --squash --admin
 7. **appModeStore.ts, painter files, GLSLShader files** don't exist on core/1.40 — `git rm` these
 8. **Always validate JSON** after resolving locale file conflicts
 9. **Dep refresh PRs** — skip on stable branches. Risk of transitive dep regressions outweighs audit cleanup. Cherry-pick individual CVE fixes instead.
-10. **Verify after each wave** — run `pnpm typecheck` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
+10. **Verify after each wave** — run `pnpm typecheck && pnpm test:unit` on the target branch after merging a batch. Catching breakage early prevents compounding errors.
 11. **Cloud-only PRs don't belong on core/\* branches** — app mode, cloud auth, and cloud-specific UI changes are irrelevant to local users. Always check PR scope against branch scope before backporting.
+12. **Never admin-merge without CI** — `--admin` bypasses all branch protections including required status checks. A bulk session of 69 admin-merges shipped 3 test failures. Always wait for CI to pass first, or use `--auto --squash` which waits by design.
+
+## CI Failure Triage
+
+When CI fails on a backport PR, present failures to the user using this template:
+
+```markdown
+### PR #XXXX — CI Failed
+
+- **Failing check:** test / lint / typecheck
+- **Error:** (summary of the failure message)
+- **Likely cause:** test backported without implementation / missing dependency / flaky test / snapshot mismatch
+- **Recommendation:** backport PR #YYYY first / skip this PR / rerun CI after fixing prerequisites
+```
+
+Common failure categories:
+
+| Category                    | Example                                  | Resolution                                |
+| --------------------------- | ---------------------------------------- | ----------------------------------------- |
+| Test without implementation | Test references function not on branch   | Backport the implementation PR first      |
+| Missing dependency          | Import from module not on branch         | Backport the dependency PR first, or skip |
+| Snapshot mismatch           | Screenshot test differs                  | Usually safe — update snapshots on branch |
+| Flaky test                  | Passes on retry                          | Re-run CI, merge if green on retry        |
+| Type error                  | Interface changed on main but not branch | May need manual adaptation                |
+
+**Never assume a failure is safe to skip.** Present all failures to the user with analysis.

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

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

.github/workflows/pr-report.yaml

@@ -180,7 +180,7 @@ jobs:
           if git ls-remote --exit-code origin perf-data >/dev/null 2>&1; then
             git fetch origin perf-data --depth=1
             mkdir -p temp/perf-history
-            for file in $(git ls-tree --name-only origin/perf-data baselines/ 2>/dev/null | sort -r | head -10); do
+            for file in $(git ls-tree --name-only origin/perf-data baselines/ 2>/dev/null | sort -r | head -15); do
               git show "origin/perf-data:${file}" > "temp/perf-history/$(basename "$file")" 2>/dev/null || true
             done
             echo "Loaded $(ls temp/perf-history/*.json 2>/dev/null | wc -l) historical baselines"

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

@@ -30,6 +30,7 @@ concurrency:
 
 jobs:
   bump-version:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     permissions:
       contents: write

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

@@ -18,6 +18,7 @@ concurrency:
 
 jobs:
   docs-check:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
     timeout-minutes: 45
     steps:

CODEOWNERS

@@ -51,6 +51,9 @@
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
+# Model-to-node mappings (cloud team)
+/src/platform/assets/mappings/                    @deepme987
+
 # LLM Instructions (blank on purpose)
 .claude/
 .cursor/

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

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

apps/desktop-ui/vite.config.mts

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

apps/website/.gitignore

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

apps/website/astro.config.ts

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

apps/website/package.json

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

apps/website/src/env.d.ts

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

apps/website/src/styles/global.css

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

apps/website/tsconfig.json

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

browser_tests/assets/links/duplicate_links_slot_drift.json

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

browser_tests/assets/subgraphs/nested-duplicate-widget-names.json

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

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

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

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

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

browser_tests/fixtures/ComfyPage.ts

@@ -5,7 +5,7 @@ import type {
   Page
 } from '@playwright/test'
 import { test as base, expect } from '@playwright/test'
-import dotenv from 'dotenv'
+import { config as dotenvConfig } from 'dotenv'
 
 import { TestIds } from './selectors'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
@@ -33,13 +33,14 @@ import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
 import { SettingsHelper } from './helpers/SettingsHelper'
+import { AppModeHelper } from './helpers/AppModeHelper'
 import { SubgraphHelper } from './helpers/SubgraphHelper'
 import { ToastHelper } from './helpers/ToastHelper'
 import { WorkflowHelper } from './helpers/WorkflowHelper'
 import type { NodeReference } from './utils/litegraphUtils'
 import type { WorkspaceStore } from '../types/globals'
 
-dotenv.config()
+dotenvConfig()
 
 class ComfyPropertiesPanel {
   readonly root: Locator
@@ -176,6 +177,7 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
+  public readonly appMode: AppModeHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -221,12 +223,13 @@ export class ComfyPage {
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
+    this.appMode = new AppModeHelper(this)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)
     this.settings = new SettingsHelper(page)
     this.keyboard = new KeyboardHelper(page, this.canvas)
-    this.clipboard = new ClipboardHelper(this.keyboard)
+    this.clipboard = new ClipboardHelper(this.keyboard, page)
     this.workflow = new WorkflowHelper(this)
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
@@ -287,9 +290,7 @@ export class ComfyPage {
     clearStorage?: boolean
     mockReleases?: boolean
   } = {}) {
-    await this.goto()
-
-    // Mock release endpoint to prevent changelog popups
+    // Mock release endpoint to prevent changelog popups (before navigation)
     if (mockReleases) {
       await this.page.route('**/releases**', async (route) => {
         const url = route.request().url()
@@ -309,12 +310,16 @@ export class ComfyPage {
     }
 
     if (clearStorage) {
+      // Navigate to a lightweight same-origin endpoint to obtain a page
+      // context for clearing storage without loading the full frontend app.
+      await this.page.goto(`${this.url}/api/users`)
       await this.page.evaluate((id) => {
         localStorage.clear()
         sessionStorage.clear()
         localStorage.setItem('Comfy.userId', id)
       }, this.id)
     }
+
     await this.goto()
 
     await this.page.waitForFunction(() => document.fonts.ready)

browser_tests/fixtures/helpers/AppModeHelper.ts

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

browser_tests/fixtures/helpers/CanvasHelper.ts

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

browser_tests/fixtures/helpers/ClipboardHelper.ts

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

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -3,6 +3,7 @@ import { readFileSync } from 'fs'
 import type { Page } from '@playwright/test'
 
 import type { Position } from '../types'
+import { getMimeType } from './mimeTypeUtil'
 
 export class DragDropHelper {
   constructor(
@@ -24,13 +25,15 @@ export class DragDropHelper {
       url?: string
       dropPosition?: Position
       waitForUpload?: boolean
+      preserveNativePropagation?: boolean
     } = {}
   ): Promise<void> {
     const {
       dropPosition = { x: 100, y: 100 },
       fileName,
       url,
-      waitForUpload = false
+      waitForUpload = false,
+      preserveNativePropagation = false
     } = options
 
     if (!fileName && !url)
@@ -42,25 +45,15 @@ export class DragDropHelper {
       fileType?: string
       buffer?: Uint8Array | number[]
       url?: string
-    } = { dropPosition }
+      preserveNativePropagation: boolean
+    } = { dropPosition, preserveNativePropagation }
 
     if (fileName) {
       const filePath = this.assetPath(fileName)
       const buffer = readFileSync(filePath)
 
-      const getFileType = (fileName: string) => {
-        if (fileName.endsWith('.png')) return 'image/png'
-        if (fileName.endsWith('.svg')) return 'image/svg+xml'
-        if (fileName.endsWith('.webp')) return 'image/webp'
-        if (fileName.endsWith('.webm')) return 'video/webm'
-        if (fileName.endsWith('.json')) return 'application/json'
-        if (fileName.endsWith('.glb')) return 'model/gltf-binary'
-        if (fileName.endsWith('.avif')) return 'image/avif'
-        return 'application/octet-stream'
-      }
-
       evaluateParams.fileName = fileName
-      evaluateParams.fileType = getFileType(fileName)
+      evaluateParams.fileType = getMimeType(fileName)
       evaluateParams.buffer = [...new Uint8Array(buffer)]
     }
 
@@ -125,15 +118,17 @@ export class DragDropHelper {
         )
       }
 
-      Object.defineProperty(dropEvent, 'preventDefault', {
-        value: () => {},
-        writable: false
-      })
+      if (!params.preserveNativePropagation) {
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
 
-      Object.defineProperty(dropEvent, 'stopPropagation', {
-        value: () => {},
-        writable: false
-      })
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+      }
 
       targetElement.dispatchEvent(dragOverEvent)
       targetElement.dispatchEvent(dropEvent)
@@ -164,7 +159,10 @@ export class DragDropHelper {
 
   async dragAndDropURL(
     url: string,
-    options: { dropPosition?: Position } = {}
+    options: {
+      dropPosition?: Position
+      preserveNativePropagation?: boolean
+    } = {}
   ): Promise<void> {
     return this.dragAndDropExternalResource({ url, ...options })
   }

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

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

browser_tests/fixtures/helpers/PerformanceHelper.ts

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

browser_tests/fixtures/helpers/SubgraphHelper.ts

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

browser_tests/fixtures/helpers/mimeTypeUtil.ts

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

browser_tests/fixtures/selectors.ts

@@ -28,9 +28,18 @@ export const TestIds = {
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
+    errorOverlaySeeErrors: 'error-overlay-see-errors',
+    runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    errorCardFindOnGithub: 'error-card-find-on-github',
+    errorCardCopy: 'error-card-copy',
     about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    whatsNewSection: 'whats-new-section',
+    missingNodePacksGroup: 'error-group-missing-node',
+    missingModelsGroup: 'error-group-missing-model'
+  },
+  keybindings: {
+    presetMenu: 'keybinding-preset-menu'
   },
   topbar: {
     queueButton: 'queue-button',
@@ -53,11 +62,18 @@ export const TestIds = {
     colorRed: 'red'
   },
   widgets: {
+    container: 'node-widgets',
+    widget: 'node-widget',
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  builder: {
+    ioItem: 'builder-io-item',
+    ioItemTitle: 'builder-io-item-title',
+    widgetActionsMenu: 'widget-actions-menu'
+  },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
   },
@@ -67,6 +83,10 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
+  },
+  errors: {
+    imageLoadError: 'error-loading-image',
+    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -78,15 +98,18 @@ export type TestIdValue =
   | (typeof TestIds.tree)[keyof typeof TestIds.tree]
   | (typeof TestIds.canvas)[keyof typeof TestIds.canvas]
   | (typeof TestIds.dialogs)[keyof typeof TestIds.dialogs]
+  | (typeof TestIds.keybindings)[keyof typeof TestIds.keybindings]
   | (typeof TestIds.topbar)[keyof typeof TestIds.topbar]
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
   | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
+  | (typeof TestIds.builder)[keyof typeof TestIds.builder]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/litegraphUtils.ts

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

browser_tests/fixtures/ws.ts

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

browser_tests/globalSetup.ts

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

browser_tests/globalTeardown.ts

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

browser_tests/helpers/promotedWidgets.ts

@@ -75,6 +75,26 @@ export async function getPromotedWidgetCount(
   return promotedWidgets.length
 }
 
+export function isPseudoPreviewEntry(entry: PromotedWidgetEntry): boolean {
+  return entry[1].startsWith('$$')
+}
+
+export async function getPseudoPreviewWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter(isPseudoPreviewEntry)
+}
+
+export async function getNonPreviewPromotedWidgets(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<PromotedWidgetEntry[]> {
+  const widgets = await getPromotedWidgets(comfyPage, nodeId)
+  return widgets.filter((entry) => !isPseudoPreviewEntry(entry))
+}
+
 export async function getPromotedWidgetCountByName(
   comfyPage: ComfyPage,
   nodeId: string,

browser_tests/helpers/subgraphTestUtils.ts

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

browser_tests/tests/appModeDropdownClipping.spec.ts

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

browser_tests/tests/appModeWidgetRename.spec.ts

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

browser_tests/tests/colorPalette.spec.ts

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

browser_tests/tests/copyPaste.spec.ts

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

browser_tests/tests/defaultKeybindings.spec.ts

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

browser_tests/tests/dialog.spec.ts

@@ -28,7 +28,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
   })
 
@@ -42,11 +42,13 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
 
     // Click "See Errors" to open the errors tab and verify subgraph node content
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     const missingNodeCard = comfyPage.page.getByTestId(
@@ -75,7 +77,9 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     await expect(errorOverlay).toBeVisible()
 
     // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify MissingNodeCard is rendered in the errors tab
@@ -144,6 +148,44 @@ test.describe('Execution error', () => {
   })
 })
 
+test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test('Should show Find on GitHub and Copy buttons in error card after execution error', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('nodes/execution_error')
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+    await comfyPage.nextFrame()
+
+    // Wait for error overlay and click "See Errors"
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    // Verify Find on GitHub button is present in the error card
+    const findOnGithubButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorCardFindOnGithub
+    )
+    await expect(findOnGithubButton).toBeVisible()
+
+    // Verify Copy button is present in the error card
+    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
+    await expect(copyButton).toBeVisible()
+  })
+})
+
 test.describe('Missing models in Error Tab', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -168,7 +210,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -184,7 +226,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -195,13 +237,10 @@ test.describe('Missing models in Error Tab', () => {
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).not.toBeVisible()
+    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
   })
 
   // Flaky test after parallelization

browser_tests/tests/graph.spec.ts

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

browser_tests/tests/interaction.spec.ts

@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     )
   })
 
+  const generateUniqueFilename = (extension = '') =>
+    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
   test.describe('Restore all open workflows on reload', () => {
     let workflowA: string
     let workflowB: string
 
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
@@ -829,6 +829,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     })
   })
 
+  test.describe('Restore workflow tabs after browser restart', () => {
+    let workflowA: string
+    let workflowB: string
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage fallback pointers to be written
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
+
+      // Simulate browser restart: clear sessionStorage (lost on close)
+      // but keep localStorage (survives browser restart)
+      await comfyPage.page.evaluate(() => {
+        sessionStorage.clear()
+      })
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      // Wait for both restored tabs to render (localStorage fallback is async)
+      await expect(
+        comfyPage.page.locator('.workflow-tabs .workflow-label', {
+          hasText: workflowA
+        })
+      ).toBeVisible()
+
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowA, workflowB])
+      )
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
+      )
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+  })
+
   test('Auto fit view after loading workflow', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.EnableWorkflowViewRestore',

browser_tests/tests/keybindingPresets.spec.ts

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

browser_tests/tests/linearMode.spec.ts

@@ -1,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -11,58 +9,10 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
     await comfyPage.setup()
   })
 
-  async function enterAppMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    // LinearControls requires hasOutputs to be true. Serialize the current
-    // graph, inject linearData with output node IDs, then reload so the
-    // appModeStore picks up the outputs via its activeWorkflow watcher.
-    await comfyPage.page.evaluate(async () => {
-      const graph = window.app!.graph
-      if (!graph) return
-
-      const outputNodeIds = graph.nodes
-        .filter(
-          (n: { type?: string }) =>
-            n.type === 'SaveImage' || n.type === 'PreviewImage'
-        )
-        .map((n: { id: number | string }) => String(n.id))
-
-      // Serialize, inject linearData, and reload to sync stores
-      const workflow = graph.serialize() as unknown as Record<string, unknown>
-      const extra = (workflow.extra ?? {}) as Record<string, unknown>
-      extra.linearData = { inputs: [], outputs: outputNodeIds }
-      workflow.extra = extra
-      await window.app!.loadGraphData(
-        workflow as unknown as Parameters<
-          NonNullable<typeof window.app>['loadGraphData']
-        >[0]
-      )
-    })
-    await comfyPage.nextFrame()
-
-    // Toggle to app mode via the command which sets canvasStore.linearMode
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
-  async function enterGraphMode(comfyPage: {
-    page: Page
-    nextFrame: () => Promise<void>
-  }) {
-    await comfyPage.page.evaluate(() => {
-      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
-    })
-    await comfyPage.nextFrame()
-  }
-
   test('Displays linear controls when app mode active', async ({
     comfyPage
   }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
@@ -70,7 +20,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-run-button"]')
@@ -78,7 +28,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-workflow-info"]')
@@ -86,13 +36,13 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
     ).toBeVisible({ timeout: 5000 })
 
-    await enterGraphMode(comfyPage)
+    await comfyPage.appMode.toggleAppMode()
 
     await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
     await expect(
@@ -101,7 +51,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await enterAppMode(comfyPage)
+    await comfyPage.appMode.enterAppModeWithInputs([])
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')

browser_tests/tests/loadWorkflowInMedia.spec.ts

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

browser_tests/tests/mobileBaseline.spec.ts

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

browser_tests/tests/nodeSearchBox.spec.ts

@@ -79,6 +79,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
     'Can auto link batch moved node',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.AutoPanSpeed', 0)
       await comfyPage.workflow.loadWorkflow('links/batch_move_links')
 
       // Get the CLIP output slot (index 1) from the first CheckpointLoaderSimple node (id: 4)

browser_tests/tests/rightClickMenu.spec.ts

@@ -123,6 +123,7 @@ test.describe('Node Right Click Menu', { tag: ['@screenshot', '@ui'] }, () => {
   })
 
   test('Can pin and unpin', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Graph.AutoPanSpeed', 0)
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick,
       button: 'right'

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

@@ -43,6 +43,31 @@ test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
     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
   }) => {

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

@@ -0,0 +1,86 @@
+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')
+    })
+  }
+)

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

@@ -0,0 +1,57 @@
+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)
+    })
+  }
+)

browser_tests/tests/subgraph.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 // Constants
 const RENAMED_INPUT_NAME = 'renamed_input'
@@ -654,6 +655,28 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@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', () => {
@@ -767,11 +790,9 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       })
 
       // Click breadcrumb to navigate back to parent graph
-      const homeBreadcrumb = comfyPage.page.getByRole('link', {
-        // In the subgraph navigation breadcrumbs, the home/top level
-        // breadcrumb is just the workflow name without the folder path
-        name: 'subgraph-with-promoted-text-widget'
-      })
+      const homeBreadcrumb = comfyPage.page.locator(
+        '.p-breadcrumb-list > :first-child'
+      )
       await homeBreadcrumb.waitFor({ state: 'visible' })
       await homeBreadcrumb.click()
       await comfyPage.nextFrame()

browser_tests/tests/subgraphInputSlotRename.spec.ts

@@ -0,0 +1,117 @@
+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
+      )
+    })
+  }
+)

browser_tests/tests/subgraphLifecycle.spec.ts

@@ -1,160 +1,347 @@
 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 {
-  getPromotedWidgetSnapshot,
-  getPromotedWidgets
+  getPromotedWidgets,
+  getPseudoPreviewWidgets,
+  getNonPreviewPromotedWidgets
 } from '../helpers/promotedWidgets'
 
-test.describe('Subgraph Lifecycle', { tag: ['@subgraph', '@widget'] }, () => {
-  test('hydrates legacy proxyWidgets deterministically across reload', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-nested-duplicate-ids'
-    )
-    await comfyPage.nextFrame()
+const domPreviewSelector = '.image-preview'
 
-    const firstSnapshot = await getPromotedWidgetSnapshot(comfyPage, '5')
-    expect(firstSnapshot.proxyWidgets.length).toBeGreaterThan(0)
-    expect(
-      firstSnapshot.proxyWidgets.every(([nodeId]) => nodeId !== '-1')
-    ).toBe(true)
-
-    await comfyPage.page.reload()
-    await comfyPage.setup()
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-nested-duplicate-ids'
-    )
-    await comfyPage.nextFrame()
-
-    const secondSnapshot = await getPromotedWidgetSnapshot(comfyPage, '5')
-    expect(secondSnapshot.proxyWidgets).toEqual(firstSnapshot.proxyWidgets)
-    expect(secondSnapshot.widgetNames).toEqual(firstSnapshot.widgetNames)
-  })
-
-  test('promoted view falls back to disconnected placeholder after source widget removal', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-promoted-text-widget'
-    )
-    await comfyPage.nextFrame()
-
-    const projection = await comfyPage.page.evaluate(() => {
+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('11')
-      if (
-        !hostNode ||
-        typeof hostNode.isSubgraphNode !== 'function' ||
-        !hostNode.isSubgraphNode()
-      )
-        throw new Error('Expected host subgraph node 11')
+      const hostNode = graph.getNodeById(Number(hostId))
+      if (!hostNode?.isSubgraphNode()) return ids.map(() => false)
 
-      const beforeType = hostNode.widgets?.[0]?.type
-      const proxyWidgets = Array.isArray(hostNode.properties?.proxyWidgets)
-        ? hostNode.properties.proxyWidgets.filter(
-            (entry): entry is [string, string] =>
-              Array.isArray(entry) &&
-              entry.length === 2 &&
-              typeof entry[0] === 'string' &&
-              typeof entry[1] === 'string'
-          )
-        : []
-      const firstPromotion = proxyWidgets[0]
-      if (!firstPromotion)
-        throw new Error('Expected at least one promoted widget entry')
+      return ids.map((id) => {
+        const interiorNode = hostNode.subgraph.getNodeById(Number(id))
+        return interiorNode !== null && interiorNode !== undefined
+      })
+    },
+    [hostSubgraphNodeId, interiorNodeIds] as const
+  )
 
-      const [sourceNodeId, sourceWidgetName] = firstPromotion
-      const subgraph = graph.subgraphs.get(hostNode.type)
-      const sourceNode = subgraph?.getNodeById(Number(sourceNodeId))
-      if (!sourceNode?.widgets)
-        throw new Error('Expected promoted source node widget list')
+  for (const exists of results) {
+    expect(exists).toBe(true)
+  }
+}
 
-      sourceNode.widgets = sourceNode.widgets.filter(
-        (widget) => widget.name !== sourceWidgetName
-      )
+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()
 
-      return {
-        beforeType,
-        afterType: hostNode.widgets?.[0]?.type
-      }
-    })
+        const widgets = await getPromotedWidgets(comfyPage, '11')
+        expect(widgets.length).toBeGreaterThan(0)
 
-    expect(projection.beforeType).toBe('customtext')
-    expect(projection.afterType).toBe('button')
-  })
-
-  test('unpacking one preview host keeps remaining pseudo-preview promotions resolvable', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'subgraphs/subgraph-with-multiple-promoted-previews'
-    )
-    await comfyPage.nextFrame()
-
-    const beforeNode8 = await getPromotedWidgets(comfyPage, '8')
-    expect(beforeNode8).toEqual([['6', '$$canvas-image-preview']])
-
-    const cleanupResult = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.graph!
-      const invalidPseudoEntries = () => {
-        const invalid: string[] = []
-        for (const node of graph.nodes) {
-          if (
-            typeof node.isSubgraphNode !== 'function' ||
-            !node.isSubgraphNode()
-          )
-            continue
-
-          const subgraph = graph.subgraphs.get(node.type)
-          const proxyWidgets = Array.isArray(node.properties?.proxyWidgets)
-            ? node.properties.proxyWidgets.filter(
-                (entry): entry is [string, string] =>
-                  Array.isArray(entry) &&
-                  entry.length === 2 &&
-                  typeof entry[0] === 'string' &&
-                  typeof entry[1] === 'string'
-              )
-            : []
-          for (const entry of proxyWidgets) {
-            if (entry[1] !== '$$canvas-image-preview') continue
-
-            const sourceNodeId = Number(entry[0])
-            const sourceNode = subgraph?.getNodeById(sourceNodeId)
-            if (!sourceNode) invalid.push(`${node.id}:${entry[0]}`)
-          }
+        for (const [interiorNodeId] of widgets) {
+          expect(Number(interiorNodeId)).toBeGreaterThan(0)
         }
-        return invalid
-      }
 
-      const before = invalidPseudoEntries()
-      const hostNode = graph.getNodeById('7')
-      if (
-        !hostNode ||
-        typeof hostNode.isSubgraphNode !== 'function' ||
-        !hostNode.isSubgraphNode()
-      )
-        throw new Error('Expected preview host subgraph node 7')
+        await expectPromotedWidgetsToResolveToInteriorNodes(
+          comfyPage,
+          '11',
+          widgets
+        )
+      })
 
-      ;(
-        graph as unknown as { unpackSubgraph: (node: unknown) => void }
-      ).unpackSubgraph(hostNode)
+      test('proxyWidgets entries survive double round-trip without drift', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+        await comfyPage.nextFrame()
 
-      return {
-        before,
-        after: invalidPseudoEntries(),
-        hasNode7: Boolean(graph.getNodeById('7')),
-        hasNode8: Boolean(graph.getNodeById('8'))
-      }
+        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
+        )
+      })
     })
 
-    expect(cleanupResult.before).toEqual([])
-    expect(cleanupResult.after).toEqual([])
-    expect(cleanupResult.hasNode7).toBe(false)
-    expect(cleanupResult.hasNode8).toBe(true)
+    test.describe('Placeholder Behavior After Promoted Source Removal', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      })
 
-    const afterNode8 = await getPromotedWidgets(comfyPage, '8')
-    expect(afterNode8).toEqual([['6', '$$canvas-image-preview']])
-  })
-})
+      test('Removing promoted source node inside subgraph falls back to disconnected placeholder on exterior', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const initialWidgets = await getPromotedWidgets(comfyPage, '11')
+        expect(initialWidgets.length).toBeGreaterThan(0)
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await expect
+          .poll(async () => {
+            return await comfyPage.page.evaluate(() => {
+              const hostNode = window.app!.canvas.graph!.getNodeById('11')
+              const proxyWidgets = hostNode?.properties?.proxyWidgets
+              return {
+                proxyWidgetCount: Array.isArray(proxyWidgets)
+                  ? proxyWidgets.length
+                  : 0,
+                firstWidgetType: hostNode?.widgets?.[0]?.type
+              }
+            })
+          })
+          .toEqual({
+            proxyWidgetCount: initialWidgets.length,
+            firstWidgetType: 'button'
+          })
+      })
+
+      test('Promoted widget disappears from DOM after interior node deletion', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textarea).toBeVisible()
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+        await clipNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        await expect(
+          comfyPage.page.getByTestId(TestIds.widgets.domWidgetTextarea)
+        ).toHaveCount(0)
+      })
+    })
+
+    test.describe('Unpack/Remove Cleanup for Pseudo-Preview Targets', () => {
+      test('Pseudo-preview entries exist in proxyWidgets for preview subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(pseudoWidgets.length).toBeGreaterThan(0)
+        expect(
+          pseudoWidgets.some(([, name]) => name === '$$canvas-image-preview')
+        ).toBe(true)
+      })
+
+      test('Non-preview widgets coexist with pseudo-preview entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const pseudoWidgets = await getPseudoPreviewWidgets(comfyPage, '5')
+        const nonPreviewWidgets = await getNonPreviewPromotedWidgets(
+          comfyPage,
+          '5'
+        )
+
+        expect(pseudoWidgets.length).toBeGreaterThan(0)
+        expect(nonPreviewWidgets.length).toBeGreaterThan(0)
+        expect(
+          nonPreviewWidgets.some(([, name]) => name === 'filename_prefix')
+        ).toBe(true)
+      })
+
+      test('Unpacking subgraph clears pseudo-preview entries from graph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(beforePseudo.length).toBeGreaterThan(0)
+
+        await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
+          graph.unpackSubgraph(subgraphNode)
+        })
+        await comfyPage.nextFrame()
+
+        const subgraphNodeCount = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          return graph.nodes.filter((n) => n.isSubgraphNode()).length
+        })
+        expect(subgraphNodeCount).toBe(0)
+
+        await expect
+          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+          .toBe(0)
+      })
+
+      test('Removing subgraph node clears pseudo-preview DOM elements', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        const beforePseudo = await getPseudoPreviewWidgets(comfyPage, '5')
+        expect(beforePseudo.length).toBeGreaterThan(0)
+
+        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()
+
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('5')
+        })
+        expect(nodeExists).toBe(false)
+
+        await expect
+          .poll(async () => comfyPage.subgraph.countGraphPseudoPreviewEntries())
+          .toBe(0)
+        await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
+      })
+
+      test('Unpacking one subgraph does not clear sibling pseudo-preview entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-previews'
+        )
+        await comfyPage.nextFrame()
+
+        const firstNodeBefore = await getPseudoPreviewWidgets(comfyPage, '7')
+        const secondNodeBefore = await getPseudoPreviewWidgets(comfyPage, '8')
+
+        expect(firstNodeBefore.length).toBeGreaterThan(0)
+        expect(secondNodeBefore.length).toBeGreaterThan(0)
+
+        await comfyPage.page.evaluate(() => {
+          const graph = window.app!.graph!
+          const subgraphNode = graph.getNodeById('7')
+          if (!subgraphNode || !subgraphNode.isSubgraphNode()) return
+          graph.unpackSubgraph(subgraphNode)
+        })
+        await comfyPage.nextFrame()
+
+        const firstNodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.graph!.getNodeById('7')
+        })
+        expect(firstNodeExists).toBe(false)
+
+        const secondNodeAfter = await getPseudoPreviewWidgets(comfyPage, '8')
+        expect(secondNodeAfter).toEqual(secondNodeBefore)
+      })
+    })
+  }
+)

browser_tests/tests/subgraphNestedConfigureOrder.spec.ts

@@ -0,0 +1,110 @@
+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)
+  })
+})

browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts

@@ -0,0 +1,141 @@
+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)
+      })
+    })
+  }
+)

browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts

@@ -0,0 +1,51 @@
+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()
+    })
+  }
+)

browser_tests/tests/subgraphProgressClear.spec.ts

@@ -73,5 +73,59 @@ test.describe(
         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 })
+    })
   }
 )

browser_tests/tests/subgraphPromotion.spec.ts

@@ -2,7 +2,6 @@ import { expect } from '@playwright/test'
 
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'
 import { fitToViewInstant } from '../helpers/fitToView'
@@ -12,25 +11,6 @@ import {
   getPromotedWidgets
 } from '../helpers/promotedWidgets'
 
-/**
- * Check whether we're currently in a subgraph.
- */
-async function isInSubgraph(comfyPage: ComfyPage): Promise<boolean> {
-  return comfyPage.page.evaluate(() => {
-    const graph = window.app!.canvas.graph
-    return !!graph && 'inputNode' in graph
-  })
-}
-
-async function exitSubgraphToParent(comfyPage: ComfyPage): Promise<void> {
-  await comfyPage.page.evaluate(() => {
-    const canvas = window.app!.canvas
-    if (!canvas.graph) return
-    canvas.setGraph(canvas.graph.rootGraph)
-  })
-  await comfyPage.nextFrame()
-}
-
 test.describe(
   'Subgraph Widget Promotion',
   { tag: ['@subgraph', '@widget'] },
@@ -190,7 +170,7 @@ test.describe(
         await comfyPage.vueNodes.enterSubgraph('11')
         await comfyPage.nextFrame()
 
-        expect(await isInSubgraph(comfyPage)).toBe(true)
+        expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
       })
 
       test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
@@ -262,7 +242,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent graph
-        await exitSubgraphToParent(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // Promoted textarea on SubgraphNode should have the same value
         const promotedTextarea = comfyPage.page.getByTestId(
@@ -296,7 +276,7 @@ test.describe(
           )
           await expect(interiorTextarea).toHaveValue(testContent)
 
-          await exitSubgraphToParent(comfyPage)
+          await comfyPage.subgraph.exitViaBreadcrumb()
 
           const promotedTextarea = comfyPage.page.getByTestId(
             TestIds.widgets.domWidgetTextarea
@@ -342,7 +322,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphToParent(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // SubgraphNode should now have the promoted widget
         const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -377,7 +357,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back and verify promotion took effect
-        await exitSubgraphToParent(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
         await fitToViewInstant(comfyPage)
         await comfyPage.nextFrame()
 
@@ -408,7 +388,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphToParent(comfyPage)
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // SubgraphNode should have fewer widgets
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -564,6 +544,30 @@ test.describe(
         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
       }) => {
@@ -721,6 +725,44 @@ test.describe(
         expect(nodeExists).toBe(false)
       })
 
+      test('Nested promoted widget entries reflect interior changes after slot removal', async ({
+        comfyPage
+      }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        const initialNames = await getPromotedWidgetNames(comfyPage, '5')
+        expect(initialNames.length).toBeGreaterThan(0)
+
+        const outerSubgraph = await comfyPage.nodeOps.getNodeRefById('5')
+        await outerSubgraph.navigateIntoSubgraph()
+
+        const removedSlotName = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph
+          if (!graph || !('inputNode' in graph)) return null
+          return graph.inputs?.[0]?.name ?? null
+        })
+        expect(removedSlotName).not.toBeNull()
+
+        await comfyPage.subgraph.rightClickInputSlot()
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        const finalNames = await getPromotedWidgetNames(comfyPage, '5')
+        const expectedNames = [...initialNames]
+        const removedIndex = expectedNames.indexOf(removedSlotName!)
+        expect(removedIndex).toBeGreaterThanOrEqual(0)
+        expectedNames.splice(removedIndex, 1)
+
+        expect(finalNames).toEqual(expectedNames)
+      })
+
       test('Removing I/O slot removes associated promoted widget', async ({
         comfyPage
       }) => {
@@ -743,15 +785,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back via breadcrumb
-        await comfyPage.page
-          .getByTestId(TestIds.breadcrumb.subgraph)
-          .waitFor({ state: 'visible', timeout: 5000 })
-        const homeBreadcrumb = comfyPage.page.getByRole('link', {
-          name: 'subgraph-with-promoted-text-widget'
-        })
-        await homeBreadcrumb.waitFor({ state: 'visible' })
-        await homeBreadcrumb.click()
-        await comfyPage.nextFrame()
+        await comfyPage.subgraph.exitViaBreadcrumb()
 
         // Widget count should be reduced
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')

browser_tests/tests/subgraphSlotAlignment.spec.ts

@@ -0,0 +1,132 @@
+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)
+        }
+      }
+    })
+  }
+)

browser_tests/tests/templates.spec.ts

@@ -206,6 +206,31 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
+  test(
+    'select components in filter bar render correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      // Wait for filter bar select components to render
+      const dialog = comfyPage.page.getByRole('dialog')
+      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      await expect(sortBySelect).toBeVisible()
+
+      // Screenshot the filter bar containing MultiSelect and SingleSelect
+      const filterBar = sortBySelect.locator(
+        'xpath=ancestor::div[contains(@class, "justify-between")]'
+      )
+      await expect(filterBar).toHaveScreenshot(
+        'template-filter-bar-select-components.png',
+        {
+          mask: [comfyPage.page.locator('.p-toast')]
+        }
+      )
+    }
+  )
+
   test(
     'template cards descriptions adjust height dynamically',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -2,9 +2,116 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../fixtures/ComfyPage'
 
 const CREATE_GROUP_HOTKEY = 'Control+g'
 
+type NodeGroupCenteringError = {
+  horizontal: number
+  vertical: number
+}
+
+type NodeGroupCenteringErrors = {
+  innerGroup: NodeGroupCenteringError
+  outerGroup: NodeGroupCenteringError
+}
+
+const LEGACY_VUE_CENTERING_BASELINE: NodeGroupCenteringErrors = {
+  innerGroup: {
+    horizontal: 16.308832840862777,
+    vertical: 17.390899314547084
+  },
+  outerGroup: {
+    horizontal: 20.30164329441476,
+    vertical: 42.196324096481476
+  }
+} as const
+
+const CENTERING_TOLERANCE = {
+  innerGroup: 6,
+  outerGroup: 12
+} as const
+
+function expectWithinBaseline(
+  actual: number,
+  baseline: number,
+  tolerance: number
+) {
+  expect(Math.abs(actual - baseline)).toBeLessThan(tolerance)
+}
+
+async function getNodeGroupCenteringErrors(
+  comfyPage: ComfyPage
+): Promise<NodeGroupCenteringErrors> {
+  return comfyPage.page.evaluate(() => {
+    type GraphNode = {
+      id: number | string
+      pos: ReadonlyArray<number>
+    }
+    type GraphGroup = {
+      title: string
+      pos: ReadonlyArray<number>
+      size: ReadonlyArray<number>
+    }
+
+    const app = window.app!
+    const node = app.graph.nodes[0] as GraphNode | undefined
+
+    if (!node) {
+      throw new Error('Expected a node in the loaded workflow')
+    }
+
+    const nodeElement = document.querySelector<HTMLElement>(
+      `[data-node-id="${node.id}"]`
+    )
+
+    if (!nodeElement) {
+      throw new Error(`Vue node element not found for node ${node.id}`)
+    }
+
+    const groups = app.graph.groups as GraphGroup[]
+    const innerGroup = groups.find((group) => group.title === 'Inner Group')
+    const outerGroup = groups.find((group) => group.title === 'Outer Group')
+
+    if (!innerGroup || !outerGroup) {
+      throw new Error('Expected both Inner Group and Outer Group in graph')
+    }
+
+    const nodeRect = nodeElement.getBoundingClientRect()
+
+    const getCenteringError = (group: GraphGroup): NodeGroupCenteringError => {
+      const [groupStartX, groupStartY] = app.canvasPosToClientPos([
+        group.pos[0],
+        group.pos[1]
+      ])
+      const [groupEndX, groupEndY] = app.canvasPosToClientPos([
+        group.pos[0] + group.size[0],
+        group.pos[1] + group.size[1]
+      ])
+
+      const groupLeft = Math.min(groupStartX, groupEndX)
+      const groupRight = Math.max(groupStartX, groupEndX)
+      const groupTop = Math.min(groupStartY, groupEndY)
+      const groupBottom = Math.max(groupStartY, groupEndY)
+
+      const leftGap = nodeRect.left - groupLeft
+      const rightGap = groupRight - nodeRect.right
+      const topGap = nodeRect.top - groupTop
+      const bottomGap = groupBottom - nodeRect.bottom
+
+      return {
+        horizontal: Math.abs(leftGap - rightGap),
+        vertical: Math.abs(topGap - bottomGap)
+      }
+    }
+
+    return {
+      innerGroup: getCenteringError(innerGroup),
+      outerGroup: getCenteringError(outerGroup)
+    }
+  })
+}
+
 test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
@@ -74,4 +181,45 @@ test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
       expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
     }).toPass({ timeout: 5000 })
   })
+
+  test('should keep groups aligned after loading legacy Vue workflows', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('groups/nested-groups-1-inner-node')
+    await comfyPage.vueNodes.waitForNodes(1)
+
+    const workflowRendererVersion = await comfyPage.page.evaluate(() => {
+      const extra = window.app!.graph.extra as
+        | { workflowRendererVersion?: string }
+        | undefined
+      return extra?.workflowRendererVersion
+    })
+
+    expect(workflowRendererVersion).toMatch(/^Vue/)
+
+    await expect(async () => {
+      const centeringErrors = await getNodeGroupCenteringErrors(comfyPage)
+
+      expectWithinBaseline(
+        centeringErrors.innerGroup.horizontal,
+        LEGACY_VUE_CENTERING_BASELINE.innerGroup.horizontal,
+        CENTERING_TOLERANCE.innerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.innerGroup.vertical,
+        LEGACY_VUE_CENTERING_BASELINE.innerGroup.vertical,
+        CENTERING_TOLERANCE.innerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.outerGroup.horizontal,
+        LEGACY_VUE_CENTERING_BASELINE.outerGroup.horizontal,
+        CENTERING_TOLERANCE.outerGroup
+      )
+      expectWithinBaseline(
+        centeringErrors.outerGroup.vertical,
+        LEGACY_VUE_CENTERING_BASELINE.outerGroup.vertical,
+        CENTERING_TOLERANCE.outerGroup
+      )
+    }).toPass({ timeout: 5000 })
+  })
 })

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

@@ -47,6 +47,46 @@ test.describe('Vue Node Moving', () => {
     }
   )
 
+  test('should not move node when pointer moves less than drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
+    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
+
+    // The small movement should have selected the node, not dragged it
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('should move node when pointer moves beyond drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move 50px — well beyond the 3px drag threshold
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
+      steps: 20
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(headerPos, afterPos)
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
 
 test.describe('Vue Upload Widgets', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,14 @@ test.describe('Vue Upload Widgets', () => {
     ).not.toBeVisible()
 
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading image').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.imageLoadError).count()
+      )
       .toBeGreaterThan(0)
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading video').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.videoLoadError).count()
+      )
       .toBeGreaterThan(0)
   })
 })

browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts

@@ -46,4 +46,16 @@ test.describe('Vue Multiline String Widget', () => {
 
     await expect(textarea).toHaveValue('Keep me around')
   })
+  test('should use native context menu when focused', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+    const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
+
+    await textarea.focus()
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).not.toBeVisible()
+    await textarea.blur()
+
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).toBeVisible()
+  })
 })

eslint.config.ts

@@ -5,6 +5,7 @@ import betterTailwindcss from 'eslint-plugin-better-tailwindcss'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
 import oxlint from 'eslint-plugin-oxlint'
+import testingLibrary from 'eslint-plugin-testing-library'
 // eslint-config-prettier disables ESLint rules that conflict with formatters (oxfmt)
 import eslintConfigPrettier from 'eslint-config-prettier'
 import { configs as storybookConfigs } from 'eslint-plugin-storybook'
@@ -271,6 +272,20 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.test.ts'],
+    plugins: { 'testing-library': testingLibrary },
+    rules: {
+      'testing-library/prefer-screen-queries': 'error',
+      'testing-library/no-container': 'error',
+      'testing-library/no-node-access': 'error',
+      'testing-library/no-wait-for-multiple-assertions': 'error',
+      'testing-library/prefer-find-by': 'error',
+      'testing-library/prefer-presence-queries': 'error',
+      'testing-library/prefer-user-event': 'error',
+      'testing-library/no-debugging-utils': 'error'
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {

knip.config.ts

@@ -6,7 +6,6 @@ const config: KnipConfig = {
       entry: [
         '{build,scripts}/**/*.{js,ts}',
         'src/assets/css/style.css',
-        'src/main.ts',
         'src/scripts/ui/menu/index.ts',
         'src/types/index.ts',
         'src/storybook/mocks/**/*.ts'
@@ -14,25 +13,34 @@ const config: KnipConfig = {
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}', '!.claude/**']
     },
     'apps/desktop-ui': {
-      entry: ['src/main.ts', 'src/i18n.ts'],
+      entry: ['src/i18n.ts'],
       project: ['src/**/*.{js,ts,vue}']
     },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/shared-frontend-utils': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/formatUtil.ts', 'src/networkUtil.ts']
+      project: ['src/**/*.{js,ts}']
     },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     },
     'packages/ingest-types': {
-      project: ['src/**/*.{js,ts}'],
-      entry: ['src/index.ts']
+      project: ['src/**/*.{js,ts}']
+    },
+    'apps/website': {
+      entry: [
+        'src/pages/**/*.astro',
+        'src/layouts/**/*.astro',
+        'src/components/**/*.vue',
+        'src/styles/global.css',
+        'astro.config.ts'
+      ],
+      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
+      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
     }
   },
-  ignoreBinaries: ['python3', 'gh', 'generate'],
+  ignoreBinaries: ['python3'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify-json/lucide',
@@ -40,19 +48,12 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Used by lucideStrokePlugin.js (CSS @plugin)
-    '@iconify/utils'
+    '@primevue/icons'
   ],
   ignore: [
     // Auto generated API types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
-    'packages/registry-types/src/comfyRegistryTypes.ts',
-    'packages/ingest-types/src/types.gen.ts',
     'packages/ingest-types/src/zod.gen.ts',
-    'packages/ingest-types/openapi-ts.config.ts',
-    // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
     // Used by stacked PR (feat/glsl-live-preview)
     'src/renderer/glsl/useGLSLRenderer.ts',
     // Workflow files contain license names that knip misinterprets as binaries
@@ -60,17 +61,8 @@ const config: KnipConfig = {
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
     // Agent review check config, not part of the build
-    '.agents/checks/eslint.strict.config.js',
-    // Loaded via @plugin directive in CSS, not detected by knip
-    'packages/design-system/src/css/lucideStrokePlugin.js'
+    '.agents/checks/eslint.strict.config.js'
   ],
-  compilers: {
-    // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
-    css: (text: string) =>
-      [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
-        .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
-        .join('\n')
-  },
   vite: {
     config: ['vite?(.*).config.mts']
   },

lint-staged.config.ts

@@ -11,7 +11,7 @@ export default {
 
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
+  './**/*.{ts,tsx,vue,mts,json,yaml}': (stagedFiles: string[]) => {
     const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
 
     const hasBrowserTestsChanges = stagedFiles

nx.json

@@ -36,5 +36,6 @@
         "targetName": "e2e"
       }
     }
-  ]
+  ],
+  "analytics": false
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.2",
+  "version": "1.43.5",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -81,6 +81,7 @@
     "@tiptap/starter-kit": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "@vueuse/router": "^14.2.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
@@ -134,6 +135,9 @@
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@testing-library/vue": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -152,6 +156,7 @@
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
     "eslint-plugin-storybook": "catalog:",
+    "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
     "fast-check": "catalog:",
@@ -176,9 +181,7 @@
     "storybook": "catalog:",
     "stylelint": "catalog:",
     "tailwindcss": "catalog:",
-    "tailwindcss-primeui": "catalog:",
     "tsx": "catalog:",
-    "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",

packages/design-system/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
     "@iconify/tailwind4": "catalog:",
-    "@iconify/utils": "catalog:"
+    "@iconify/utils": "catalog:",
+    "tailwindcss-primeui": "catalog:",
+    "tw-animate-css": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

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

@@ -0,0 +1,46 @@
+/*
+ * Design System Base — Brand tokens + fonts only.
+ * For marketing sites that don't use PrimeVue or the node editor.
+ * Import the full style.css instead for the desktop app.
+ */
+
+@import './fonts.css';
+
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}

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

@@ -15,7 +15,7 @@
 @plugin "./lucideStrokePlugin.js";
 
 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
 @source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");
@@ -1901,3 +1901,37 @@ audio.comfy-audio.empty-audio-widget {
     background-position: 0 0;
   }
 }
+
+@utility scroll-shadows-* {
+  overflow: auto;
+
+  background:
+    /* Shadow Cover TOP */
+    linear-gradient(--value(--color-*) 30%, transparent) center top,
+    /* Shadow Cover BOTTOM */
+      linear-gradient(transparent, --value(--color-*) 70%) center bottom,
+    /* Shadow TOP */
+      radial-gradient(
+        farthest-side at 50% 0,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center top,
+    /* Shadow BOTTOM */
+      radial-gradient(
+        farthest-side at 50% 100%,
+        color-mix(in oklab, --value(--color-*), #777777 35%),
+        60%,
+        transparent
+      )
+      center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    300% 40px,
+    300% 40px,
+    300% 14px,
+    300% 14px;
+  background-attachment: local, local, scroll, scroll;
+}

packages/design-system/src/icons/quiver-ai.svg

@@ -0,0 +1,3 @@
+<svg width="281" height="281" viewBox="0 0 281 281" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140.069 0C217.427 0.000220786 280.138 62.7116 280.138 140.069V280.138H140.069C62.7116 280.138 0.000220844 217.427 0 140.069C0 62.7114 62.7114 0 140.069 0ZM74.961 66.6054C69.8263 64.8847 64.9385 69.7815 66.6687 74.913L123.558 243.619C125.929 250.65 136.321 248.945 136.321 241.524V135.823H241.329C248.756 135.823 250.453 125.416 243.41 123.056L74.961 66.6054Z" fill="#F8F8F8"/>
+</svg>

packages/shared-frontend-utils/src/formatUtil.ts

@@ -631,3 +631,10 @@ export function isPreviewableMediaType(mediaType: MediaType): boolean {
     mediaType === '3D'
   )
 }
+
+export function formatTime(seconds: number): string {
+  if (isNaN(seconds) || seconds === 0) return '0:00'
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}

pnpm-workspace.yaml

@@ -4,6 +4,7 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
+  '@astrojs/vue': ^5.0.0
   '@comfyorg/comfyui-electron-types': 0.6.2
   '@eslint/js': ^9.39.1
   '@formkit/auto-animate': ^0.9.0
@@ -13,10 +14,10 @@ catalog:
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.5.2
-  '@nx/playwright': 22.5.2
-  '@nx/storybook': 22.5.2
-  '@nx/vite': 22.5.2
+  '@nx/eslint': 22.6.1
+  '@nx/playwright': 22.6.1
+  '@nx/storybook': 22.6.1
+  '@nx/vite': 22.6.1
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -34,6 +35,9 @@ catalog:
   '@storybook/vue3': ^10.2.10
   '@storybook/vue3-vite': ^10.2.10
   '@tailwindcss/vite': ^4.2.0
+  '@testing-library/jest-dom': ^6.9.1
+  '@testing-library/user-event': ^14.6.1
+  '@testing-library/vue': ^8.1.0
   '@tiptap/core': ^2.27.2
   '@tiptap/extension-link': ^2.27.2
   '@tiptap/extension-table': ^2.27.2
@@ -47,6 +51,7 @@ catalog:
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
+  '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
@@ -55,6 +60,7 @@ catalog:
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
+  astro: ^5.10.0
   axios: ^1.13.5
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
@@ -67,6 +73,7 @@ catalog:
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.55.0
   eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   fast-check: ^4.5.3
@@ -79,11 +86,11 @@ catalog:
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^5.75.1
+  knip: ^6.0.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.5.2
+  nx: 22.6.1
   oxfmt: ^0.40.0
   oxlint: ^1.55.0
   oxlint-tsgolint: ^0.17.0

scripts/perf-report.ts

@@ -22,6 +22,7 @@ interface PerfMeasurement {
   layoutDurationMs: number
   taskDurationMs: number
   heapDeltaBytes: number
+  heapUsedBytes: number
   domNodes: number
   jsHeapTotalBytes: number
   scriptDurationMs: number
@@ -43,22 +44,46 @@ const HISTORY_DIR = 'temp/perf-history'
 
 type MetricKey =
   | 'styleRecalcs'
+  | 'styleRecalcDurationMs'
   | 'layouts'
+  | 'layoutDurationMs'
   | 'taskDurationMs'
   | 'domNodes'
   | 'scriptDurationMs'
   | 'eventListeners'
   | 'totalBlockingTimeMs'
   | 'frameDurationMs'
-const REPORTED_METRICS: { key: MetricKey; label: string; unit: string }[] = [
-  { key: 'styleRecalcs', label: 'style recalcs', unit: '' },
-  { key: 'layouts', label: 'layouts', unit: '' },
+  | 'heapUsedBytes'
+
+interface MetricDef {
+  key: MetricKey
+  label: string
+  unit: string
+  /** Minimum absolute delta to consider meaningful (effect size gate) */
+  minAbsDelta?: number
+}
+
+const REPORTED_METRICS: MetricDef[] = [
+  { key: 'layoutDurationMs', label: 'layout duration', unit: 'ms' },
+  {
+    key: 'styleRecalcDurationMs',
+    label: 'style recalc duration',
+    unit: 'ms'
+  },
+  { key: 'layouts', label: 'layout count', unit: '', minAbsDelta: 5 },
+  {
+    key: 'styleRecalcs',
+    label: 'style recalc count',
+    unit: '',
+    minAbsDelta: 5
+  },
   { key: 'taskDurationMs', label: 'task duration', unit: 'ms' },
-  { key: 'domNodes', label: 'DOM nodes', unit: '' },
   { key: 'scriptDurationMs', label: 'script duration', unit: 'ms' },
-  { key: 'eventListeners', label: 'event listeners', unit: '' },
   { key: 'totalBlockingTimeMs', label: 'TBT', unit: 'ms' },
-  { key: 'frameDurationMs', label: 'frame duration', unit: 'ms' }
+  { key: 'frameDurationMs', label: 'frame duration', unit: 'ms' },
+  { key: 'heapUsedBytes', label: 'heap used', unit: 'bytes' },
+  { key: 'domNodes', label: 'DOM nodes', unit: '', minAbsDelta: 5 },
+  { key: 'eventListeners', label: 'event listeners', unit: '', minAbsDelta: 5 }
 ]
 
 function groupByName(
@@ -134,7 +159,9 @@ function computeCV(stats: MetricStats): number {
 }
 
 function formatValue(value: number, unit: string): string {
-  return unit === 'ms' ? `${value.toFixed(0)}ms` : `${value.toFixed(0)}`
+  if (unit === 'ms') return `${value.toFixed(0)}ms`
+  if (unit === 'bytes') return formatBytes(value)
+  return `${value.toFixed(0)}`
 }
 
 function formatDelta(pct: number | null): string {
@@ -159,6 +186,21 @@ function meanMetric(samples: PerfMeasurement[], key: MetricKey): number | null {
   return values.reduce((sum, v) => sum + v, 0) / values.length
 }
 
+function medianMetric(
+  samples: PerfMeasurement[],
+  key: MetricKey
+): number | null {
+  const values = samples
+    .map((s) => getMetricValue(s, key))
+    .filter((v): v is number => v !== null)
+    .sort((a, b) => a - b)
+  if (values.length === 0) return null
+  const mid = Math.floor(values.length / 2)
+  return values.length % 2 === 0
+    ? (values[mid - 1] + values[mid]) / 2
+    : values[mid]
+}
+
 function formatBytes(bytes: number): string {
   if (Math.abs(bytes) < 1024) return `${bytes} B`
   if (Math.abs(bytes) < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
@@ -173,7 +215,7 @@ function renderFullReport(
   const lines: string[] = []
   const baselineGroups = groupByName(baseline.measurements)
   const tableHeader = [
-    '| Metric | Baseline | PR (n=3) | Δ | Sig |',
+    '| Metric | Baseline | PR (median) | Δ | Sig |',
     '|--------|----------|----------|---|-----|'
   ]
 
@@ -183,36 +225,38 @@ function renderFullReport(
   for (const [testName, prSamples] of prGroups) {
     const baseSamples = baselineGroups.get(testName)
 
-    for (const { key, label, unit } of REPORTED_METRICS) {
-      const prMean = meanMetric(prSamples, key)
-      if (prMean === null) continue
+    for (const { key, label, unit, minAbsDelta } of REPORTED_METRICS) {
+      // Use median for PR values — robust to outlier runs in CI
+      const prVal = medianMetric(prSamples, key)
+      if (prVal === null) continue
       const histStats = getHistoricalStats(historical, testName, key)
       const cv = computeCV(histStats)
 
       if (!baseSamples?.length) {
         allRows.push(
-          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new | — |`
+          `| ${testName}: ${label} | — | ${formatValue(prVal, unit)} | new | — |`
         )
         continue
       }
 
-      const baseVal = meanMetric(baseSamples, key)
+      const baseVal = medianMetric(baseSamples, key)
       if (baseVal === null) {
         allRows.push(
-          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new | — |`
+          `| ${testName}: ${label} | — | ${formatValue(prVal, unit)} | new | — |`
         )
         continue
       }
+      const absDelta = prVal - baseVal
       const deltaPct =
         baseVal === 0
-          ? prMean === 0
+          ? prVal === 0
             ? 0
             : null
-          : ((prMean - baseVal) / baseVal) * 100
-      const z = zScore(prMean, histStats)
-      const sig = classifyChange(z, cv)
+          : ((prVal - baseVal) / baseVal) * 100
+      const z = zScore(prVal, histStats)
+      const sig = classifyChange(z, cv, absDelta, minAbsDelta)
 
-      const row = `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prMean, unit)} | ${formatDelta(deltaPct)} | ${formatSignificance(sig, z)} |`
+      const row = `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prVal, unit)} | ${formatDelta(deltaPct)} | ${formatSignificance(sig, z)} |`
       allRows.push(row)
       if (isNoteworthy(sig)) {
         flaggedRows.push(row)
@@ -299,7 +343,7 @@ function renderColdStartReport(
   const lines: string[] = []
   const baselineGroups = groupByName(baseline.measurements)
   lines.push(
-    `> ℹ️ Collecting baseline variance data (${historicalCount}/5 runs). Significance will appear after 2 main branch runs.`,
+    `> ℹ️ Collecting baseline variance data (${historicalCount}/15 runs). Significance will appear after 2 main branch runs.`,
     '',
     '| Metric | Baseline | PR | Δ |',
     '|--------|----------|-----|---|'
@@ -309,31 +353,31 @@ function renderColdStartReport(
     const baseSamples = baselineGroups.get(testName)
 
     for (const { key, label, unit } of REPORTED_METRICS) {
-      const prMean = meanMetric(prSamples, key)
-      if (prMean === null) continue
+      const prVal = medianMetric(prSamples, key)
+      if (prVal === null) continue
 
       if (!baseSamples?.length) {
         lines.push(
-          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new |`
+          `| ${testName}: ${label} | — | ${formatValue(prVal, unit)} | new |`
         )
         continue
       }
 
-      const baseVal = meanMetric(baseSamples, key)
+      const baseVal = medianMetric(baseSamples, key)
       if (baseVal === null) {
         lines.push(
-          `| ${testName}: ${label} | — | ${formatValue(prMean, unit)} | new |`
+          `| ${testName}: ${label} | — | ${formatValue(prVal, unit)} | new |`
         )
         continue
       }
       const deltaPct =
         baseVal === 0
-          ? prMean === 0
+          ? prVal === 0
             ? 0
             : null
-          : ((prMean - baseVal) / baseVal) * 100
+          : ((prVal - baseVal) / baseVal) * 100
       lines.push(
-        `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prMean, unit)} | ${formatDelta(deltaPct)} |`
+        `| ${testName}: ${label} | ${formatValue(baseVal, unit)} | ${formatValue(prVal, unit)} | ${formatDelta(deltaPct)} |`
       )
     }
   }
@@ -352,14 +396,10 @@ function renderNoBaselineReport(
   )
   for (const [testName, prSamples] of prGroups) {
     for (const { key, label, unit } of REPORTED_METRICS) {
-      const prMean = meanMetric(prSamples, key)
-      if (prMean === null) continue
-      lines.push(`| ${testName}: ${label} | ${formatValue(prMean, unit)} |`)
+      const prVal = medianMetric(prSamples, key)
+      if (prVal === null) continue
+      lines.push(`| ${testName}: ${label} | ${formatValue(prVal, unit)} |`)
     }
-    const heapMean =
-      prSamples.reduce((sum, s) => sum + (s.heapDeltaBytes ?? 0), 0) /
-      prSamples.length
-    lines.push(`| ${testName}: heap delta | ${formatBytes(heapMean)} |`)
   }
   return lines
 }

scripts/perf-stats.test.ts

@@ -99,6 +99,21 @@ describe('classifyChange', () => {
     expect(classifyChange(2, 10)).toBe('neutral')
     expect(classifyChange(-2, 10)).toBe('neutral')
   })
+
+  it('returns neutral when absDelta below minAbsDelta despite high z', () => {
+    // z=7.2 but only 1 unit change with minAbsDelta=5
+    expect(classifyChange(7.2, 10, 1, 5)).toBe('neutral')
+    expect(classifyChange(-7.2, 10, -1, 5)).toBe('neutral')
+  })
+
+  it('returns regression when absDelta meets minAbsDelta', () => {
+    expect(classifyChange(3, 10, 10, 5)).toBe('regression')
+  })
+
+  it('ignores effect size gate when minAbsDelta not provided', () => {
+    expect(classifyChange(3, 10)).toBe('regression')
+    expect(classifyChange(3, 10, 1)).toBe('regression')
+  })
 })
 
 describe('formatSignificance', () => {

scripts/perf-stats.ts

@@ -31,12 +31,28 @@ export function zScore(value: number, stats: MetricStats): number | null {
 
 export type Significance = 'regression' | 'improvement' | 'neutral' | 'noisy'
 
+/**
+ * Classify a metric change as regression/improvement/neutral/noisy.
+ *
+ * Uses both statistical significance (z-score) and practical significance
+ * (effect size gate via minAbsDelta) to reduce false positives from
+ * integer-quantized metrics with near-zero variance.
+ */
 export function classifyChange(
   z: number | null,
-  historicalCV: number
+  historicalCV: number,
+  absDelta?: number,
+  minAbsDelta?: number
 ): Significance {
   if (historicalCV > 50) return 'noisy'
   if (z === null) return 'neutral'
+
+  // Effect size gate: require minimum absolute change for count metrics
+  // to avoid flagging e.g. 11→12 style recalcs as z=7.2 regression.
+  if (minAbsDelta !== undefined && absDelta !== undefined) {
+    if (Math.abs(absDelta) < minAbsDelta) return 'neutral'
+  }
+
   if (z > 2) return 'regression'
   if (z < -2) return 'improvement'
   return 'neutral'

src/App.vue

@@ -9,13 +9,10 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted, onUnmounted, watch } from 'vue'
 
-import { useI18n } from 'vue-i18n'
-
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
@@ -23,7 +20,6 @@ import { parsePreloadError } from '@/utils/preloadErrorUtil'
 import { useDialogService } from '@/services/dialogService'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
 
@@ -98,12 +94,17 @@ onMounted(() => {
         }
       })
     }
-    useToastStore().add({
-      severity: 'error',
-      summary: t('g.preloadErrorTitle'),
-      detail: t('g.preloadError'),
-      life: 10000
-    })
+    // Disabled: Third-party custom node extensions frequently trigger this toast
+    // (e.g., bare "vue" imports, wrong relative paths to scripts/app.js, missing
+    // core dependencies). These are plugin bugs, not ComfyUI core failures, but
+    // the generic error message alarms users and offers no actionable guidance.
+    // The console.error above still logs the details for developers to debug.
+    // useToastStore().add({
+    //   severity: 'error',
+    //   summary: t('g.preloadErrorTitle'),
+    //   detail: t('g.preloadError'),
+    //   life: 10000
+    // })
   })
 
   // Capture resource load failures (CSS, scripts) in non-localhost distributions

src/assets/palettes/arc.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#2b2f38",
       "NODE_TITLE_COLOR": "#b2b7bd",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#2b2f38",
       "NODE_DEFAULT_BGCOLOR": "#242730",
       "NODE_DEFAULT_BOXCOLOR": "#6e7581",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 22,
       "WIDGET_BGCOLOR": "#2b2f38",
       "WIDGET_OUTLINE_COLOR": "#6e7581",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/dark.json

@@ -25,10 +25,8 @@
       "CLEAR_BACKGROUND_COLOR": "#141414",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#333",
       "NODE_DEFAULT_BGCOLOR": "#353535",
       "NODE_DEFAULT_BOXCOLOR": "#666",
@@ -37,7 +35,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#222",
       "WIDGET_OUTLINE_COLOR": "#666",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/github.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#040506",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#bcc2c8",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#161b22",
       "NODE_DEFAULT_BGCOLOR": "#13171d",
       "NODE_DEFAULT_BOXCOLOR": "#30363d",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#161b22",
       "WIDGET_OUTLINE_COLOR": "#30363d",
       "WIDGET_TEXT_COLOR": "#bcc2c8",

src/assets/palettes/light.json

@@ -26,10 +26,8 @@
       "CLEAR_BACKGROUND_COLOR": "lightgray",
       "NODE_TITLE_COLOR": "#222",
       "NODE_SELECTED_TITLE_COLOR": "#000",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#444",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#F7F7F7",
       "NODE_DEFAULT_BGCOLOR": "#F5F5F5",
       "NODE_DEFAULT_BOXCOLOR": "#CCC",
@@ -38,7 +36,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#D4D4D4",
       "WIDGET_OUTLINE_COLOR": "#999",
       "WIDGET_TEXT_COLOR": "#222",