refactor: rename ResultGallery to MediaLightbox and address code review

- Rename ResultGallery to MediaLightbox across all references
  - Replace window keydown listener with @keydown on dialog element
  - Remove redundant toBeVisible check in Playwright test
  - Remove change detector tests (renders close button, prevents default)
  - Dispatch keyboard events on dialog element in unit tests
  - Wire zoom event to lightbox in MediaAssetCard story
  - Add MediaLightbox Storybook story
  - Sort button icon sizes (icon-sm, icon, icon-lg)

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

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

.env_example

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.github/workflows/pr-backport.yaml

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

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

@@ -29,7 +29,9 @@ jobs:
           ref: refs/pull/${{ github.event.pull_request.number }}/head
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

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

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

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

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

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

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

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

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

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

@@ -75,7 +75,9 @@ jobs:
           fetch-depth: 1
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

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

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

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

@@ -142,7 +142,9 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

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

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

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

@@ -28,7 +28,9 @@ jobs:
           ref: main
 
       - name: Install pnpm
-        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

AGENTS.md

@@ -298,9 +298,6 @@ When referencing Comfy-Org repos:
   - Find existing `!important` classes that are interfering with the styling and propose corrections of those instead.
 - NEVER use arbitrary percentage values like `w-[80%]` when a Tailwind fraction utility exists
   - Use `w-4/5` instead of `w-[80%]`, `w-1/2` instead of `w-[50%]`, etc.
-- NEVER use font-size classes (`text-xs`, `text-sm`, etc.) to size `icon-[...]` (iconify) icons
-  - Iconify icons size via `width`/`height: 1.2em`, so font-size produces unpredictable results
-  - Use `size-*` classes for explicit sizing, or set font-size on the **parent** container and let `1.2em` scale naturally
 
 ## Agent-only rules
 

CODEOWNERS

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

browser_tests/AGENTS.md

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

browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json

@@ -1,197 +0,0 @@
-{
-  "id": "00000000-0000-0000-0000-000000000000",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
-      "pos": [627.5973510742188, 423.0972900390625],
-      "size": [144.15234375, 46],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 2,
-          "lastLinkId": 4,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [347.90441582814213, 417.3822440655296, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [892.5973510742188, 416.0972900390625, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [1],
-            "pos": {
-              "0": 447.9044189453125,
-              "1": 437.3822326660156
-            }
-          }
-        ],
-        "outputs": [
-          {
-            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [2],
-            "pos": {
-              "0": 912.5973510742188,
-              "1": 436.0972900390625
-            }
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "KSampler",
-            "pos": [554.8743286132812, 100.95539093017578],
-            "size": [270, 262],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 1
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 2,
-            "type": "VAEEncode",
-            "pos": [685.1265869140625, 439.1734619140625],
-            "size": [140, 46],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "pixels",
-                "name": "pixels",
-                "type": "IMAGE",
-                "link": null
-              },
-              {
-                "localized_name": "vae",
-                "name": "vae",
-                "type": "VAE",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [4]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEEncode"
-            }
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.8894351682943402,
-      "offset": [58.7671207025881, 137.7124650620126]
-    },
-    "frontendVersion": "1.24.1"
-  },
-  "version": 0.4
-}

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

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

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

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

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

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

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

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

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

@@ -25,13 +25,14 @@ import {
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
+import { QueueHelper } from './helpers/QueueHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
+import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
 import { SettingsHelper } from './helpers/SettingsHelper'
-import { AppModeHelper } from './helpers/AppModeHelper'
 import { SubgraphHelper } from './helpers/SubgraphHelper'
 import { ToastHelper } from './helpers/ToastHelper'
 import { WorkflowHelper } from './helpers/WorkflowHelper'
@@ -175,7 +176,6 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
-  public readonly appMode: AppModeHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -186,9 +186,11 @@ export class ComfyPage {
   public readonly contextMenu: ContextMenu
   public readonly toast: ToastHelper
   public readonly dragDrop: DragDropHelper
+  public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
+  public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -219,7 +221,6 @@ 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)
@@ -230,9 +231,11 @@ export class ComfyPage {
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
+    this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
+    this.queue = new QueueHelper(page)
   }
 
   get visibleToasts() {

browser_tests/fixtures/helpers/AppModeHelper.ts

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

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

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

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,7 +33,6 @@ 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/QueueHelper.ts

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

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -1,4 +1,3 @@
-import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 import type {
@@ -7,7 +6,6 @@ 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'
 
@@ -324,93 +322,4 @@ 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/selectors.ts

@@ -27,7 +27,8 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
+    errorOverlay: 'error-overlay',
+    missingNodeCard: 'missing-node-card',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
@@ -42,16 +43,6 @@ export const TestIds = {
   propertiesPanel: {
     root: 'properties-panel'
   },
-  subgraphEditor: {
-    toggle: 'subgraph-editor-toggle',
-    shownSection: 'subgraph-editor-shown-section',
-    hiddenSection: 'subgraph-editor-hidden-section',
-    widgetToggle: 'subgraph-widget-toggle',
-    widgetLabel: 'subgraph-widget-label',
-    iconLink: 'icon-link',
-    iconEye: 'icon-eye',
-    widgetActionsMenuButton: 'widget-actions-menu-button'
-  },
   node: {
     titleInput: 'node-title-input'
   },
@@ -61,21 +52,12 @@ export const TestIds = {
     colorBlue: 'blue',
     colorRed: 'red'
   },
-  menu: {
-    moreMenuContent: 'more-menu-content'
-  },
   widgets: {
-    container: 'node-widgets',
-    widget: 'node-widget',
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
-  builder: {
-    ioItem: 'builder-io-item',
-    widgetActionsMenu: 'widget-actions-menu'
-  },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
   },
@@ -102,12 +84,9 @@ export type TestIdValue =
   | (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.menu)[keyof typeof TestIds.menu]
-  | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]

browser_tests/fixtures/utils/litegraphUtils.ts

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

browser_tests/fixtures/utils/slotBoundsUtil.ts

@@ -1,98 +0,0 @@
-import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
-
-export interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-export interface NodeSlotData {
-  nodeId: string
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Collect slot center offsets relative to the parent node element.
- * Returns `null` when the node element is not found.
- */
-export async function measureNodeSlotOffsets(
-  page: Page,
-  nodeId: string
-): Promise<NodeSlotData | null> {
-  return page.evaluate((id) => {
-    const nodeEl = document.querySelector(`[data-node-id="${id}"]`)
-    if (!nodeEl || !(nodeEl instanceof HTMLElement)) return null
-
-    const nodeRect = nodeEl.getBoundingClientRect()
-    const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-    const slots: SlotMeasurement[] = []
-
-    for (const slotEl of slotEls) {
-      const slotRect = slotEl.getBoundingClientRect()
-      slots.push({
-        key: (slotEl as HTMLElement).dataset.slotKey ?? 'unknown',
-        offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-        offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-      })
-    }
-
-    return {
-      nodeId: id,
-      nodeW: nodeRect.width,
-      nodeH: nodeRect.height,
-      slots
-    }
-  }, nodeId)
-}
-
-/**
- * Assert that every slot falls within the node dimensions (± `margin` px).
- */
-export function expectSlotsWithinBounds(
-  data: NodeSlotData,
-  margin: number,
-  label?: string
-) {
-  const prefix = label ? `${label}: ` : ''
-
-  for (const slot of data.slots) {
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetX,
-      `${prefix}Slot ${slot.key} X=${slot.offsetX} outside width=${data.nodeW}`
-    ).toBeLessThanOrEqual(data.nodeW + margin)
-
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeGreaterThanOrEqual(-margin)
-    expect(
-      slot.offsetY,
-      `${prefix}Slot ${slot.key} Y=${slot.offsetY} outside height=${data.nodeH}`
-    ).toBeLessThanOrEqual(data.nodeH + margin)
-  }
-}
-
-/**
- * Wait for slots, measure, and assert within bounds — single-node convenience.
- */
-export async function assertNodeSlotsWithinBounds(
-  page: Page,
-  nodeId: string,
-  margin: number = 20
-) {
-  await page
-    .locator(`[data-node-id="${nodeId}"] [data-slot-key]`)
-    .first()
-    .waitFor()
-
-  const data = await measureNodeSlotOffsets(page, nodeId)
-  expect(data, `Node ${nodeId} not found in DOM`).not.toBeNull()
-  expectSlotsWithinBounds(data!, margin, `Node ${nodeId}`)
-}

browser_tests/helpers/promotedWidgets.ts

@@ -2,11 +2,6 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 
 export type PromotedWidgetEntry = [string, string]
 
-export interface PromotedWidgetSnapshot {
-  proxyWidgets: PromotedWidgetEntry[]
-  widgetNames: string[]
-}
-
 export function isPromotedWidgetEntry(
   entry: unknown
 ): entry is PromotedWidgetEntry {
@@ -37,28 +32,6 @@ export async function getPromotedWidgets(
   return normalizePromotedWidgets(raw)
 }
 
-export async function getPromotedWidgetSnapshot(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetSnapshot> {
-  const raw = await comfyPage.page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    return {
-      proxyWidgets: node?.properties?.proxyWidgets ?? [],
-      widgetNames: (node?.widgets ?? []).map((widget) => widget.name)
-    }
-  }, nodeId)
-
-  return {
-    proxyWidgets: normalizePromotedWidgets(raw.proxyWidgets),
-    widgetNames: Array.isArray(raw.widgetNames)
-      ? raw.widgetNames.filter(
-          (name): name is string => typeof name === 'string'
-        )
-      : []
-  }
-}
-
 export async function getPromotedWidgetNames(
   comfyPage: ComfyPage,
   nodeId: string
@@ -75,26 +48,6 @@ 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,5 +1,3 @@
-import type { Page } from '@playwright/test'
-
 import type { LGraph, Subgraph } from '../../src/lib/litegraph/src/litegraph'
 import { isSubgraph } from '../../src/utils/typeGuardUtil'
 
@@ -16,30 +14,3 @@ 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

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

browser_tests/tests/appModeWidgetRename.spec.ts

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

@@ -1,68 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { assertNodeSlotsWithinBounds } from '../fixtures/utils/slotBoundsUtil'
-
-const NODE_ID = '3'
-const NODE_TITLE = 'KSampler'
-
-test.describe(
-  'Collapsed node link positions',
-  { tag: ['@canvas', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.canvasOps.resetView()
-    })
-
-    test('link endpoints stay within collapsed node bounds', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links follow collapsed node after drag', async ({ comfyPage }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      const box = await node.boundingBox()
-      expect(box).not.toBeNull()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2,
-        box!.y + box!.height / 2
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        box!.x + box!.width / 2 + 200,
-        box!.y + box!.height / 2 + 100,
-        { steps: 10 }
-      )
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-
-    test('links recover correct positions after expand', async ({
-      comfyPage
-    }) => {
-      const node = await comfyPage.vueNodes.getFixtureByTitle(NODE_TITLE)
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-      await node.toggleCollapse()
-      await comfyPage.nextFrame()
-
-      await assertNodeSlotsWithinBounds(comfyPage.page, NODE_ID)
-    })
-  }
-)

browser_tests/tests/dialog.spec.ts

@@ -9,63 +9,114 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Load workflow warning', { tag: '@ui' }, () => {
-  test('Should display a warning when loading a workflow with missing nodes', async ({
+test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test('Should show error overlay when loading a workflow with missing nodes', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).toBeVisible()
+
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
   })
 
-  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
+  test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).toBeVisible()
 
-    // Verify the missing node text includes subgraph context
-    const warningText = await missingNodesWarning.textContent()
-    expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    expect(warningText).toContain('in subgraph')
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
+
+    // Click "See Errors" to open the errors tab and verify subgraph node content
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard).toBeVisible()
+
+    // Expand the pack group row to reveal node type names
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()
+  })
+
+  test('Should show MissingNodeCard in errors tab when clicking See Errors', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+
+    // Click "See Errors" to open the right side panel errors tab
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    // Verify MissingNodeCard is rendered in the errors tab
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard).toBeVisible()
   })
 })
 
-test('Does not report warning on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
-  const missingNodesWarning = comfyPage.page.getByTestId(
-    TestIds.dialogs.missingNodes
+test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
   )
-
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-  await expect(missingNodesWarning).toBeVisible()
-  await comfyPage.page.keyboard.press('Escape')
-  await expect(missingNodesWarning).not.toBeVisible()
 
-  // Wait for any async operations to complete after dialog closes
+  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeVisible()
+
+  // Dismiss the error overlay
+  await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+  await expect(errorOverlay).not.toBeVisible()
+
+  // Make a change to the graph by moving a node
+  await comfyPage.canvas.click()
+  await comfyPage.nextFrame()
+  await comfyPage.page.keyboard.press('Control+a')
+  await comfyPage.page.mouse.move(400, 300)
+  await comfyPage.page.mouse.down()
+  await comfyPage.page.mouse.move(450, 350, { steps: 5 })
+  await comfyPage.page.mouse.up()
   await comfyPage.nextFrame()
 
-  // Make a change to the graph
-  await comfyPage.canvasOps.doubleClick()
-  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-
-  // Undo and redo the change
+  // Undo and redo should not resurface the error overlay
   await comfyPage.keyboard.undo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 
   await comfyPage.keyboard.redo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 })
 
 test.describe('Execution error', () => {
@@ -86,7 +137,9 @@ test.describe('Execution error', () => {
     await comfyPage.nextFrame()
 
     // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
   })
 })
@@ -110,7 +163,9 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
@@ -124,7 +179,9 @@ test.describe('Missing models in Error Tab', () => {
       'missing/missing_models_from_node_properties'
     )
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
@@ -141,7 +198,9 @@ test.describe('Missing models in Error Tab', () => {
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
     await expect(missingModelsTitle).not.toBeVisible()
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).not.toBeVisible()
   })
 
@@ -152,7 +211,9 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const downloadAllButton = comfyPage.page.getByText('Download all')

browser_tests/tests/errorOverlaySeeErrors.spec.ts

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

browser_tests/tests/graphCanvasMenu.spec.ts

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

browser_tests/tests/groupNode.spec.ts

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

browser_tests/tests/interaction.spec.ts

@@ -10,7 +10,6 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
 import { TestIds } from '../fixtures/selectors'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-import type { WorkspaceStore } from '../types/globals'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -721,19 +720,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot('string_input.png')
   })
 
-  test('Creates initial workflow tab when persistence is disabled', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.Workflow.Persist', false)
-    await comfyPage.setup()
-
-    const openCount = await comfyPage.page.evaluate(() => {
-      return (window.app!.extensionManager as WorkspaceStore).workflow
-        .openWorkflows.length
-    })
-    expect(openCount).toBeGreaterThanOrEqual(1)
-  })
-
   test('Restore workflow on reload (switch workflow)', async ({
     comfyPage
   }) => {
@@ -778,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')
 
@@ -843,82 +829,6 @@ 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/linearMode.spec.ts

@@ -1,3 +1,5 @@
+import type { Page } from '@playwright/test'
+
 import {
   comfyPageFixture as test,
   comfyExpect as expect
@@ -9,10 +11,58 @@ 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 comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
@@ -20,7 +70,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Run button visible in linear mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-run-button"]')
@@ -28,7 +78,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-workflow-info"]')
@@ -36,13 +86,13 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Returns to graph mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')
     ).toBeVisible({ timeout: 5000 })
 
-    await comfyPage.appMode.toggleAppMode()
+    await enterGraphMode(comfyPage)
 
     await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
     await expect(
@@ -51,7 +101,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   })
 
   test('Canvas not visible in app mode', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([])
+    await enterAppMode(comfyPage)
 
     await expect(
       comfyPage.page.locator('[data-testid="linear-widgets"]')

browser_tests/tests/mobileBaseline.spec.ts

@@ -24,20 +24,6 @@ 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/nodeDisplay.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -38,7 +39,7 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     await comfyPage.workflow.loadWorkflow('inputs/only_optional_inputs')
     expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
 
     // If the node's multiline text widget is visible, then it was loaded successfully
@@ -73,10 +74,6 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
   })
   test('unknown converted widget', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.Workflow.ShowMissingNodesWarning',
-      false
-    )
     await comfyPage.workflow.loadWorkflow(
       'missing/missing_nodes_converted_widget'
     )

browser_tests/tests/nodeLibraryEssentials.spec.ts

@@ -0,0 +1,110 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+    // Enable the essentials feature flag via the reactive serverFeatureFlags ref.
+    // In production, this flag comes via WebSocket or remoteConfig (cloud only).
+    // The localhost test server has neither, so we set it directly.
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        node_library_essentials_enabled: true
+      }
+    })
+
+    // Register a mock essential node so the essentials tab has content.
+    await comfyPage.page.evaluate(() => {
+      return window.app!.registerNodeDef('TestEssentialNode', {
+        name: 'TestEssentialNode',
+        display_name: 'Test Essential Node',
+        category: 'essentials_test',
+        input: { required: {}, optional: {} },
+        output: ['IMAGE'],
+        output_name: ['image'],
+        output_is_list: [false],
+        output_node: false,
+        python_module: 'comfy_essentials.nodes',
+        description: 'Mock essential node for testing',
+        essentials_category: 'Image Generation'
+      })
+    })
+  })
+
+  test('Node library opens via sidebar', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const sidebarContent = comfyPage.page.locator(
+      '.comfy-vue-side-bar-container'
+    )
+    await expect(sidebarContent).toBeVisible()
+  })
+
+  test('Essentials tab is visible in node library', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await expect(essentialsTab).toBeVisible()
+  })
+
+  test('Clicking essentials tab shows essential node cards', async ({
+    comfyPage
+  }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await essentialsTab.click()
+
+    const essentialCards = comfyPage.page.locator('[data-node-name]')
+    await expect(essentialCards.first()).toBeVisible()
+  })
+
+  test('Essential node cards have node names', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await essentialsTab.click()
+
+    const firstCard = comfyPage.page.locator('[data-node-name]').first()
+    await expect(firstCard).toBeVisible()
+
+    const nodeName = await firstCard.getAttribute('data-node-name')
+    expect(nodeName).toBeTruthy()
+    expect(nodeName!.length).toBeGreaterThan(0)
+  })
+
+  test('Node library can switch between all and essentials tabs', async ({
+    comfyPage
+  }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    const allNodesTab = comfyPage.page.getByRole('tab', { name: /^all$/i })
+
+    await essentialsTab.click()
+    await expect(essentialsTab).toHaveAttribute('aria-selected', 'true')
+    const essentialCards = comfyPage.page.locator('[data-node-name]')
+    await expect(essentialCards.first()).toBeVisible()
+
+    await allNodesTab.click()
+    await expect(allNodesTab).toHaveAttribute('aria-selected', 'true')
+    await expect(essentialsTab).toHaveAttribute('aria-selected', 'false')
+  })
+})

browser_tests/tests/pasteImageContextMenu.spec.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Paste Image context menu option', { tag: ['@node'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  test('shows Paste Image in LoadImage node context menu', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+
+    const nodeEl = comfyPage.page.locator(
+      `[data-node-id="${loadImageNode.id}"]`
+    )
+    await nodeEl.click({ button: 'right' })
+    const menu = comfyPage.page.locator('.p-contextmenu')
+    await menu.waitFor({ state: 'visible' })
+    const menuLabels = await menu
+      .locator('[role="menuitem"] span.flex-1')
+      .allInnerTexts()
+
+    expect(menuLabels).toContain('Paste Image')
+  })
+
+  test('does not show Paste Image on output-only image nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('nodes/single_save_image_node')
+
+    const saveImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('SaveImage')
+    )[0]
+
+    const nodeEl = comfyPage.page.locator(
+      `[data-node-id="${saveImageNode.id}"]`
+    )
+    await nodeEl.click({ button: 'right' })
+    const menu = comfyPage.page.locator('.p-contextmenu')
+    await menu.waitFor({ state: 'visible' })
+    const menuLabels = await menu
+      .locator('[role="menuitem"] span.flex-1')
+      .allInnerTexts()
+
+    expect(menuLabels).not.toContain('Paste Image')
+    expect(menuLabels).not.toContain('Open Image')
+  })
+})

browser_tests/tests/primitiveNode.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -61,11 +62,17 @@ test.describe('Primitive Node', { tag: ['@screenshot', '@node'] }, () => {
   test('Report missing nodes when connect to missing node', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
     await comfyPage.workflow.loadWorkflow(
       'primitive/primitive_node_connect_missing_node'
     )
-    // Wait for the element with the .comfy-missing-nodes selector to be visible
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
-    await expect(missingNodesWarning).toBeVisible()
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
   })
 })

browser_tests/tests/resultGallery.spec.ts

@@ -0,0 +1,70 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  async function runAndOpenGallery(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow(
+      'widgets/save_image_and_animated_webp'
+    )
+    await comfyPage.vueNodes.waitForNodes()
+    await comfyPage.runButton.click()
+
+    // Wait for SaveImage node to produce output
+    const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+    await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+      timeout: 30_000
+    })
+
+    // Open Assets sidebar tab and wait for it to load
+    await comfyPage.page.locator('.assets-tab-button').click()
+    await comfyPage.page
+      .locator('.sidebar-content-container')
+      .waitFor({ state: 'visible' })
+
+    // Wait for any asset card to appear (may contain img or video)
+    const assetCard = comfyPage.page
+      .locator('[role="button"]')
+      .filter({ has: comfyPage.page.locator('img, video') })
+      .first()
+
+    await expect(assetCard).toBeVisible({ timeout: 30_000 })
+
+    // Hover to reveal zoom button, then click it
+    await assetCard.hover()
+    await assetCard.getByLabel('Zoom in').click()
+
+    const gallery = comfyPage.page.getByRole('dialog')
+    await expect(gallery).toBeVisible()
+
+    return { gallery }
+  }
+
+  test('opens gallery and shows dialog with close button', async ({
+    comfyPage
+  }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+    await expect(gallery.getByLabel('Close')).toBeVisible()
+  })
+
+  test('closes gallery on Escape key', async ({ comfyPage }) => {
+    await runAndOpenGallery(comfyPage)
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+
+  test('closes gallery when clicking close button', async ({ comfyPage }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+
+    await gallery.getByLabel('Close').click()
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+})

browser_tests/tests/selectionRectangle.spec.ts

@@ -0,0 +1,85 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('@canvas Selection Rectangle', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('Ctrl+A selects all nodes', async ({ comfyPage }) => {
+    const totalCount = await comfyPage.vueNodes.getNodeCount()
+    expect(totalCount).toBeGreaterThan(0)
+
+    // Use canvas press for keyboard shortcuts (doesn't need click target)
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
+  })
+
+  test('Click empty space deselects all', async ({ comfyPage }) => {
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBeGreaterThan(0)
+
+    // Deselect by Ctrl+clicking the already-selected node (reliable cross-env)
+    await comfyPage.page
+      .getByText('Load Checkpoint')
+      .click({ modifiers: ['Control'] })
+    // Then deselect remaining via Escape or programmatic clear
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.deselectAll()
+    })
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+  })
+
+  test('Single click selects one node', async ({ comfyPage }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+    await comfyPage.page.getByText('Empty Latent Image').click({
+      modifiers: ['Control']
+    })
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+  })
+
+  test('Selected nodes have visual indicator', async ({ comfyPage }) => {
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+
+    await expect(checkpointNode).toHaveClass(/outline-node-component-outline/)
+  })
+
+  test('Drag-select rectangle selects multiple nodes', async ({
+    comfyPage
+  }) => {
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+
+    // Use Ctrl+A to select all, which is functionally equivalent to
+    // drag-selecting the entire canvas and more reliable in CI
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+
+    const totalCount = await comfyPage.vueNodes.getNodeCount()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
+    expect(totalCount).toBeGreaterThan(1)
+  })
+})

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -0,0 +1,101 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
+  const nodePos = await nodeRef.getPosition()
+  await comfyPage.page.evaluate((pos) => {
+    const canvas = window.app!.canvas
+    canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+    canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+    canvas.setDirty(true, true)
+  }, nodePos)
+  await comfyPage.nextFrame()
+  await nodeRef.click('title')
+}
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+})
+
+test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
+  })
+
+  test('delete button removes selected node', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const initialCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    await expect(deleteButton).toBeVisible()
+    await deleteButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    const newCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+    expect(newCount).toBe(initialCount - 1)
+  })
+
+  test('info button opens properties panel', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
+    await expect(infoButton).toBeVisible()
+    await infoButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    await expect(
+      comfyPage.page.locator('[data-testid="properties-panel"]')
+    ).toBeVisible()
+  })
+
+  test('convert-to-subgraph button visible with multi-select', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    await expect(
+      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
+    ).toBeVisible()
+  })
+
+  test('delete button removes multiple selected nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    const initialCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    await expect(deleteButton).toBeVisible()
+    await deleteButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    const newCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+    expect(newCount).toBe(initialCount - 2)
+  })
+})

browser_tests/tests/sidebar/workflows.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -234,23 +235,29 @@ test.describe('Workflows sidebar', () => {
   test('Does not report warning when switching between opened workflows', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-    await comfyPage.page
-      .locator('.p-dialog')
-      .getByRole('button', { name: 'Close' })
-      .click({ force: true })
-    await comfyPage.page.locator('.p-dialog').waitFor({ state: 'hidden' })
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+
+    // Dismiss the error overlay
+    await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+    await expect(errorOverlay).not.toBeVisible()
 
     // Load blank workflow
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
 
-    // Switch back to the missing_nodes workflow
+    // Switch back to the missing_nodes workflow — overlay should not reappear
     await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
 
-    await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
-    ).not.toBeVisible()
+    await expect(errorOverlay).not.toBeVisible()
   })
 
   test('Can close saved-workflows from the open workflows section', async ({

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

@@ -43,31 +43,6 @@ 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

@@ -1,86 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getTextSlotPosition } from '../helpers/subgraphTestUtils'
-
-test.describe(
-  'Subgraph promoted widget-input slot position',
-  { tag: '@subgraph' },
-  () => {
-    test('Promoted text widget slot is positioned at widget row, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      // Render a few frames so arrange() runs
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      const result = await getTextSlotPosition(comfyPage.page, '11')
-      expect(result).not.toBeNull()
-      expect(result!.hasPos).toBe(true)
-
-      // The slot Y position should be well below the title area.
-      // If it's near 0 or negative, the slot is stuck at the header (the bug).
-      expect(result!.posY).toBeGreaterThan(result!.titleHeight)
-    })
-
-    test('Slot position remains correct after renaming subgraph input label', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      await comfyPage.nextFrame()
-      await comfyPage.nextFrame()
-
-      // Verify initial position is correct
-      const before = await getTextSlotPosition(comfyPage.page, '11')
-      expect(before).not.toBeNull()
-      expect(before!.hasPos).toBe(true)
-      expect(before!.posY).toBeGreaterThan(before!.titleHeight)
-
-      // Navigate into subgraph and rename the text input
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialLabel = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph || !('inputNode' in graph)) return null
-        const textInput = graph.inputs?.find(
-          (i: { type: string }) => i.type === 'STRING'
-        )
-        return textInput?.label || textInput?.name || null
-      })
-
-      if (!initialLabel)
-        throw new Error('Could not find STRING input in subgraph')
-
-      await comfyPage.subgraph.rightClickInputSlot(initialLabel)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await comfyPage.page.waitForSelector(dialog, { state: 'visible' })
-      await comfyPage.page.fill(dialog, '')
-      await comfyPage.page.fill(dialog, 'my_custom_prompt')
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.page.waitForSelector(dialog, { state: 'hidden' })
-
-      // Navigate back to parent graph
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Verify slot position is still at the widget row after rename
-      const after = await getTextSlotPosition(comfyPage.page, '11')
-      expect(after).not.toBeNull()
-      expect(after!.hasPos).toBe(true)
-      expect(after!.posY).toBeGreaterThan(after!.titleHeight)
-
-      // widget.name is the stable identity key — it does NOT change on rename.
-      // The display label is on input.label, read via PromotedWidgetView.label.
-      expect(after!.widgetName).not.toBe('my_custom_prompt')
-    })
-  }
-)

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

@@ -1,57 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { getPromotedWidgetNames } from '../helpers/promotedWidgets'
-
-test.describe(
-  'Subgraph promoted widget DOM position',
-  { tag: '@subgraph' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Promoted seed widget renders in node body, not header', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('default')
-
-      // Convert KSampler (id 3) to subgraph — seed is auto-promoted.
-      const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-      await ksampler.click('title')
-      const subgraphNode = await ksampler.convertToSubgraph()
-      await comfyPage.nextFrame()
-
-      // Enable Vue nodes now that the subgraph has been created
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const subgraphNodeId = String(subgraphNode.id)
-      const promotedNames = await getPromotedWidgetNames(
-        comfyPage,
-        subgraphNodeId
-      )
-      expect(promotedNames).toContain('seed')
-
-      // Wait for Vue nodes to render
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      await expect(nodeLocator).toBeVisible()
-
-      // The seed widget should be visible inside the node body
-      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is inside the node body, not the header
-      const headerBox = await nodeLocator
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-
-      // Widget top should be below the header bottom
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-    })
-  }
-)

browser_tests/tests/subgraph.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
 
 // Constants
 const RENAMED_INPUT_NAME = 'renamed_input'
@@ -632,51 +631,6 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       expect(updatedBreadcrumbText).toContain(UPDATED_SUBGRAPH_TITLE)
       expect(updatedBreadcrumbText).not.toBe(initialBreadcrumbText)
     })
-
-    test('Switching workflows while inside subgraph returns to root graph context', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-      await expect(comfyPage.page.locator(SELECTORS.breadcrumb)).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Breadcrumb disappears after switching workflows while inside subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const breadcrumb = comfyPage.page
-        .getByTestId(TestIds.breadcrumb.subgraph)
-        .locator('.p-breadcrumb')
-
-      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeVisible()
-
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.nextFrame()
-
-      await expect(breadcrumb).toBeHidden()
-    })
   })
 
   test.describe('DOM Widget Promotion', () => {

browser_tests/tests/subgraphInputSlotRename.spec.ts

@@ -1,117 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-const WORKFLOW = 'subgraphs/test-values-input-subgraph'
-const RENAMED_LABEL = 'my_seed'
-
-/**
- * Regression test for subgraph input slot rename propagation.
- *
- * Renaming a SubgraphInput slot (e.g. "seed") inside the subgraph must
- * update the promoted widget label shown on the parent SubgraphNode and
- * keep the widget positioned in the node body (not the header).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10195
- */
-test.describe(
-  'Subgraph input slot rename propagation',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Renaming a subgraph input slot updates the widget label on the parent node', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      // 1. Load workflow with subgraph containing a promoted seed widget input
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const sgNode = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNode).toBeVisible()
-
-      // 2. Verify the seed widget is visible on the parent node
-      const seedWidget = sgNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-
-      // Verify widget is in the node body, not the header
-      const headerBox = await sgNode
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetBox = await seedWidget.boundingBox()
-      expect(headerBox).not.toBeNull()
-      expect(widgetBox).not.toBeNull()
-      expect(widgetBox!.y).toBeGreaterThan(headerBox!.y + headerBox!.height)
-
-      // 3. Enter the subgraph and rename the seed slot.
-      //    The subgraph IO rename uses canvas.prompt() which requires the
-      //    litegraph context menu, so temporarily disable Vue nodes.
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      const sgNodeRef = await comfyPage.nodeOps.getNodeRefById('19')
-      await sgNodeRef.navigateIntoSubgraph()
-
-      // Find the seed SubgraphInput slot
-      const seedSlotName = await page.evaluate(() => {
-        const graph = window.app!.canvas.graph
-        if (!graph) return null
-        const inputs = (
-          graph as { inputs?: Array<{ name: string; type: string }> }
-        ).inputs
-        return inputs?.find((i) => i.name.includes('seed'))?.name ?? null
-      })
-      expect(seedSlotName).not.toBeNull()
-
-      // 4. Right-click the seed input slot and rename it
-      await comfyPage.subgraph.rightClickInputSlot(seedSlotName!)
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Rename Slot')
-      await comfyPage.nextFrame()
-
-      const dialog = '.graphdialog input'
-      await page.waitForSelector(dialog, { state: 'visible' })
-      await page.fill(dialog, '')
-      await page.fill(dialog, RENAMED_LABEL)
-      await page.keyboard.press('Enter')
-      await page.waitForSelector(dialog, { state: 'hidden' })
-
-      // 5. Navigate back to parent graph and re-enable Vue nodes
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // 6. Verify the widget label updated to the renamed value
-      const sgNodeAfter = comfyPage.vueNodes.getNodeLocator('19')
-      await expect(sgNodeAfter).toBeVisible()
-
-      const updatedLabel = await page.evaluate(() => {
-        const node = window.app!.canvas.graph!.getNodeById('19')
-        if (!node) return null
-        const w = node.widgets?.find((w: { name: string }) =>
-          w.name.includes('seed')
-        )
-        return w?.label || w?.name || null
-      })
-      expect(updatedLabel).toBe(RENAMED_LABEL)
-
-      // 7. Verify the widget is still in the body, not the header
-      const seedWidgetAfter = sgNodeAfter.getByLabel('seed', { exact: true })
-      await expect(seedWidgetAfter).toBeVisible()
-
-      const headerAfter = await sgNodeAfter
-        .locator('[data-testid^="node-header-"]')
-        .boundingBox()
-      const widgetAfter = await seedWidgetAfter.boundingBox()
-      expect(headerAfter).not.toBeNull()
-      expect(widgetAfter).not.toBeNull()
-      expect(widgetAfter!.y).toBeGreaterThan(
-        headerAfter!.y + headerAfter!.height
-      )
-    })
-  }
-)

browser_tests/tests/subgraphLegacyPrefixedProxyWidgets.spec.ts

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

browser_tests/tests/subgraphLifecycle.spec.ts

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

@@ -1,110 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Nested subgraph configure order', { tag: ['@subgraph'] }, () => {
-  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
-
-  test('Loads without "No link found" or "Failed to resolve legacy -1" console warnings', async ({
-    comfyPage
-  }) => {
-    const warnings: string[] = []
-    comfyPage.page.on('console', (msg) => {
-      const text = msg.text()
-      if (
-        text.includes('No link found') ||
-        text.includes('Failed to resolve legacy -1') ||
-        text.includes('No inner link found')
-      ) {
-        warnings.push(text)
-      }
-    })
-
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-
-    expect(warnings).toEqual([])
-  })
-
-  test('All three subgraph levels resolve promoted widgets', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const results = await comfyPage.page.evaluate(() => {
-      const graph = window.app!.canvas.graph!
-      const allGraphs = [graph, ...graph.subgraphs.values()]
-
-      return allGraphs.flatMap((g) =>
-        g._nodes
-          .filter(
-            (n) => typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-          )
-          .map((hostNode) => {
-            const proxyWidgets = Array.isArray(
-              hostNode.properties?.proxyWidgets
-            )
-              ? hostNode.properties.proxyWidgets
-              : []
-
-            const widgetEntries = proxyWidgets
-              .filter(
-                (e: unknown): e is [string, string] =>
-                  Array.isArray(e) &&
-                  e.length >= 2 &&
-                  typeof e[0] === 'string' &&
-                  typeof e[1] === 'string'
-              )
-              .map(([interiorNodeId, widgetName]: [string, string]) => {
-                const sg = hostNode.isSubgraphNode() ? hostNode.subgraph : null
-                const interiorNode = sg?.getNodeById(Number(interiorNodeId))
-                return {
-                  interiorNodeId,
-                  widgetName,
-                  resolved: interiorNode !== null && interiorNode !== undefined
-                }
-              })
-
-            return {
-              hostNodeId: String(hostNode.id),
-              widgetEntries
-            }
-          })
-      )
-    })
-
-    expect(
-      results.length,
-      'Should have subgraph host nodes at multiple nesting levels'
-    ).toBeGreaterThanOrEqual(2)
-
-    for (const { hostNodeId, widgetEntries } of results) {
-      expect(
-        widgetEntries.length,
-        `Host node ${hostNodeId} should have promoted widgets`
-      ).toBeGreaterThan(0)
-
-      for (const { interiorNodeId, widgetName, resolved } of widgetEntries) {
-        expect(interiorNodeId).not.toBe('-1')
-        expect(Number(interiorNodeId)).toBeGreaterThan(0)
-        expect(widgetName).toBeTruthy()
-        expect(
-          resolved,
-          `Widget "${widgetName}" (interior node ${interiorNodeId}) on host ${hostNodeId} should resolve`
-        ).toBe(true)
-      }
-    }
-  })
-
-  test('Prompt execution succeeds without 400 error', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow(WORKFLOW)
-    await comfyPage.nextFrame()
-
-    const responsePromise = comfyPage.page.waitForResponse('**/api/prompt')
-
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-
-    const response = await responsePromise
-    expect(response.status()).not.toBe(400)
-  })
-})

browser_tests/tests/subgraphNestedDuplicateWidgetNames.spec.ts

@@ -1,141 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
-const PROMOTED_BORDER_CLASS = 'ring-component-node-widget-promoted'
-
-/**
- * Regression tests for nested subgraph promotion where multiple interior
- * nodes share the same widget name (e.g. two CLIPTextEncode nodes both
- * with a "text" widget).
- *
- * The inner subgraph (node 3) promotes both ["1","text"] and ["2","text"].
- * The outer subgraph (node 4) promotes through node 3 using identity
- * disambiguation (optional sourceNodeId in the promotion entry).
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10123#discussion_r2956230977
- */
-test.describe(
-  'Nested subgraph duplicate widget names',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    })
-
-    test('Inner subgraph node has both text widgets promoted', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const nonPreview = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return ((innerSubgraphNode.properties?.proxyWidgets ?? []) as unknown[])
-          .filter(
-            (entry): entry is [string, string] =>
-              Array.isArray(entry) &&
-              entry.length >= 2 &&
-              typeof entry[0] === 'string' &&
-              typeof entry[1] === 'string' &&
-              !entry[1].startsWith('$$')
-          )
-          .map(
-            ([nodeId, widgetName]) => [nodeId, widgetName] as [string, string]
-          )
-      })
-
-      expect(nonPreview).toEqual([
-        ['1', 'text'],
-        ['2', 'text']
-      ])
-    })
-
-    test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.nextFrame()
-
-      const widgetValues = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.canvas.graph!
-        const outerNode = graph.getNodeById('4')
-        if (
-          !outerNode ||
-          typeof outerNode.isSubgraphNode !== 'function' ||
-          !outerNode.isSubgraphNode()
-        ) {
-          return []
-        }
-
-        const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
-        if (!innerSubgraphNode) return []
-
-        return (innerSubgraphNode.widgets ?? []).map((w) => ({
-          name: w.name,
-          value: w.value
-        }))
-      })
-
-      const textWidgets = widgetValues.filter((w) => w.name.startsWith('text'))
-      expect(textWidgets).toHaveLength(2)
-
-      const values = textWidgets.map((w) => w.value)
-      expect(values).toContain('11111111111')
-      expect(values).toContain('22222222222')
-    })
-
-    test.describe('Promoted border styling in Vue mode', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Intermediate subgraph widgets get promoted border, outermost does not', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(WORKFLOW)
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 4 is the outer SubgraphNode at root level.
-        // Its widgets are not promoted further (no parent subgraph),
-        // so none of its widget wrappers should carry the promoted ring.
-        const outerNode = comfyPage.vueNodes.getNodeLocator('4')
-        await expect(outerNode).toBeVisible()
-
-        const outerPromotedRings = outerNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(outerPromotedRings).toHaveCount(0)
-
-        // Navigate into the outer subgraph (node 4) to reach node 3
-        await comfyPage.vueNodes.enterSubgraph('4')
-        await comfyPage.nextFrame()
-        await comfyPage.vueNodes.waitForNodes()
-
-        // Node 3 is the intermediate SubgraphNode whose "text" widgets
-        // are promoted up to the outer subgraph (node 4).
-        // Its widget wrappers should carry the promoted border ring.
-        const intermediateNode = comfyPage.vueNodes.getNodeLocator('3')
-        await expect(intermediateNode).toBeVisible()
-
-        const intermediatePromotedRings = intermediateNode.locator(
-          `.${PROMOTED_BORDER_CLASS}`
-        )
-        await expect(intermediatePromotedRings).toHaveCount(1)
-      })
-    })
-  }
-)

browser_tests/tests/subgraphNestedPackValues.spec.ts

@@ -1,195 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-/**
- * Regression test for PR #10532:
- * Packing all nodes inside a subgraph into a nested subgraph was causing
- * the parent subgraph node's promoted widget values to go blank.
- *
- * Root cause: SubgraphNode had two sets of PromotedWidgetView references —
- * node.widgets (rebuilt from the promotion store) vs input._widget (cached
- * at promotion time). After repointing, input._widget still pointed to
- * removed node IDs, causing missing-node failures and blank values on the
- * next checkState cycle.
- */
-test.describe(
-  'Nested subgraph pack preserves promoted widget values',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    const WORKFLOW = 'subgraphs/nested-pack-promoted-values'
-    const HOST_NODE_ID = '57'
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Promoted widget values persist after packing interior nodes into nested subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // 1. Verify initial promoted widget values via Vue node DOM
-      const widthWidget = nodeLocator
-        .getByLabel('width', { exact: true })
-        .first()
-      const heightWidget = nodeLocator
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsWidget = nodeLocator
-        .getByLabel('steps', { exact: true })
-        .first()
-      const textWidget = nodeLocator.getByRole('textbox', { name: 'prompt' })
-
-      const widthControls =
-        comfyPage.vueNodes.getInputNumberControls(widthWidget)
-      const heightControls =
-        comfyPage.vueNodes.getInputNumberControls(heightWidget)
-      const stepsControls =
-        comfyPage.vueNodes.getInputNumberControls(stepsWidget)
-
-      await expect(async () => {
-        await expect(widthControls.input).toHaveValue('1024')
-        await expect(heightControls.input).toHaveValue('1024')
-        await expect(stepsControls.input).toHaveValue('8')
-        await expect(textWidget).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-
-      // 2. Enter the subgraph via Vue node button
-      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
-      expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
-
-      // 3. Disable Vue nodes for canvas operations (select all + convert)
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      // 4. Select all interior nodes and convert to nested subgraph
-      await comfyPage.canvas.click()
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        canvas.graph!.convertToSubgraph(canvas.selectedItems)
-      })
-      await comfyPage.nextFrame()
-
-      // 5. Navigate back to root graph and trigger a checkState cycle
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.canvas.click()
-      await comfyPage.nextFrame()
-
-      // 6. Re-enable Vue nodes and verify values are preserved
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeAfter).toBeVisible()
-
-      const widthAfter = nodeAfter.getByLabel('width', { exact: true }).first()
-      const heightAfter = nodeAfter
-        .getByLabel('height', { exact: true })
-        .first()
-      const stepsAfter = nodeAfter.getByLabel('steps', { exact: true }).first()
-      const textAfter = nodeAfter.getByRole('textbox', { name: 'prompt' })
-
-      const widthControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(widthAfter)
-      const heightControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(heightAfter)
-      const stepsControlsAfter =
-        comfyPage.vueNodes.getInputNumberControls(stepsAfter)
-
-      await expect(async () => {
-        await expect(widthControlsAfter.input).toHaveValue('1024')
-        await expect(heightControlsAfter.input).toHaveValue('1024')
-        await expect(stepsControlsAfter.input).toHaveValue('8')
-        await expect(textAfter).toHaveValue(/Latina female/)
-      }).toPass({ timeout: 5000 })
-    })
-
-    test('proxyWidgets entries resolve to valid interior nodes after packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      // Verify the host node is visible
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
-      await expect(nodeLocator).toBeVisible()
-
-      // Enter the subgraph via Vue node button, then disable for canvas ops
-      await comfyPage.vueNodes.enterSubgraph(HOST_NODE_ID)
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-      await comfyPage.nextFrame()
-
-      await comfyPage.canvas.click()
-      await comfyPage.canvas.press('Control+a')
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.evaluate(() => {
-        const canvas = window.app!.canvas
-        canvas.graph!.convertToSubgraph(canvas.selectedItems)
-      })
-      await comfyPage.nextFrame()
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.canvas.click()
-      await comfyPage.nextFrame()
-
-      // Verify all proxyWidgets entries resolve
-      await expect(async () => {
-        const result = await comfyPage.page.evaluate((hostId) => {
-          const graph = window.app!.graph!
-          const hostNode = graph.getNodeById(hostId)
-          if (
-            !hostNode ||
-            typeof hostNode.isSubgraphNode !== 'function' ||
-            !hostNode.isSubgraphNode()
-          ) {
-            return { error: 'Host node not found or not a subgraph node' }
-          }
-
-          const proxyWidgets = hostNode.properties?.proxyWidgets ?? []
-          const entries = (proxyWidgets as unknown[])
-            .filter(
-              (e): e is [string, string] =>
-                Array.isArray(e) &&
-                e.length >= 2 &&
-                typeof e[0] === 'string' &&
-                typeof e[1] === 'string' &&
-                !e[1].startsWith('$$')
-            )
-            .map(([nodeId, widgetName]) => {
-              const interiorNode = hostNode.subgraph.getNodeById(Number(nodeId))
-              return {
-                nodeId,
-                widgetName,
-                resolved: interiorNode !== null && interiorNode !== undefined
-              }
-            })
-
-          return { entries, count: entries.length }
-        }, HOST_NODE_ID)
-
-        expect(result).not.toHaveProperty('error')
-        const { entries, count } = result as {
-          entries: { nodeId: string; widgetName: string; resolved: boolean }[]
-          count: number
-        }
-        expect(count).toBeGreaterThan(0)
-        for (const entry of entries) {
-          expect(
-            entry.resolved,
-            `Widget "${entry.widgetName}" (node ${entry.nodeId}) should resolve`
-          ).toBe(true)
-        }
-      }).toPass({ timeout: 5000 })
-    })
-  }
-)

browser_tests/tests/subgraphNestedStaleProxyWidgets.spec.ts

@@ -1,51 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-const WORKFLOW = 'subgraphs/nested-subgraph-stale-proxy-widgets'
-
-/**
- * Regression test for nested subgraph packing leaving stale proxyWidgets
- * on the outer SubgraphNode.
- *
- * When two CLIPTextEncode nodes (ids 6, 7) inside the outer subgraph are
- * packed into a nested subgraph (node 11), the outer SubgraphNode (id 10)
- * must drop the now-stale ["7","text"] and ["6","text"] proxy entries.
- * Only ["3","seed"] (KSampler) should remain.
- *
- * Stale entries render as "Disconnected" placeholder widgets (type "button").
- *
- * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10390
- */
-test.describe(
-  'Nested subgraph stale proxyWidgets',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    })
-
-    test('Outer subgraph node has no stale proxyWidgets after nested packing', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(WORKFLOW)
-      await comfyPage.vueNodes.waitForNodes()
-
-      const outerNode = comfyPage.vueNodes.getNodeLocator('10')
-      await expect(outerNode).toBeVisible()
-
-      const widgets = outerNode.getByTestId(TestIds.widgets.widget)
-
-      // Only the KSampler seed widget should be present — no stale
-      // "Disconnected" placeholders from the packed CLIPTextEncode nodes.
-      await expect(widgets).toHaveCount(1)
-      await expect(widgets.first()).toBeVisible()
-
-      // Verify the seed widget is present via its label
-      const seedWidget = outerNode.getByLabel('seed', { exact: true })
-      await expect(seedWidget).toBeVisible()
-    })
-  }
-)

browser_tests/tests/subgraphProgressClear.spec.ts

@@ -73,59 +73,5 @@ 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/subgraphPromotedWidgetPanel.spec.ts

@@ -1,148 +0,0 @@
-import type { Locator } from '@playwright/test'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-async function ensurePropertiesPanel(comfyPage: ComfyPage) {
-  const panel = comfyPage.menu.propertiesPanel.root
-  if (!(await panel.isVisible())) {
-    await comfyPage.actionbar.propertiesButton.click()
-  }
-  await expect(panel).toBeVisible()
-  return panel
-}
-
-async function selectSubgraphAndOpenEditor(
-  comfyPage: ComfyPage,
-  nodeTitle: string
-) {
-  const subgraphNodes = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
-  expect(subgraphNodes.length).toBeGreaterThan(0)
-  await subgraphNodes[0].click('title')
-
-  await ensurePropertiesPanel(comfyPage)
-
-  const editorToggle = comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle)
-  await expect(editorToggle).toBeVisible()
-  await editorToggle.click()
-
-  const shownSection = comfyPage.page.getByTestId(
-    TestIds.subgraphEditor.shownSection
-  )
-  await expect(shownSection).toBeVisible()
-  return shownSection
-}
-
-async function collectWidgetLabels(shownSection: Locator) {
-  const labels = shownSection.getByTestId(TestIds.subgraphEditor.widgetLabel)
-  const texts = await labels.allTextContents()
-  return texts.map((t) => t.trim())
-}
-
-test.describe(
-  'Subgraph promoted widget panel',
-  { tag: ['@node', '@widget'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test.describe('SubgraphEditor (Settings panel)', () => {
-      test('linked promoted widgets have hide toggle disabled', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Sub 0'
-        )
-
-        const toggleButtons = shownSection.getByTestId(
-          TestIds.subgraphEditor.widgetToggle
-        )
-        await expect(toggleButtons.first()).toBeVisible()
-
-        const count = await toggleButtons.count()
-        for (let i = 0; i < count; i++) {
-          await expect(toggleButtons.nth(i)).toBeDisabled()
-        }
-      })
-
-      test('linked promoted widgets show link icon instead of eye icon', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Sub 0'
-        )
-
-        const linkIcons = shownSection.getByTestId(
-          TestIds.subgraphEditor.iconLink
-        )
-        await expect(linkIcons.first()).toBeVisible()
-
-        const eyeIcons = shownSection.getByTestId(
-          TestIds.subgraphEditor.iconEye
-        )
-        await expect(eyeIcons).toHaveCount(0)
-      })
-
-      test('widget labels display renamed values instead of raw names', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/test-values-input-subgraph'
-        )
-        const shownSection = await selectSubgraphAndOpenEditor(
-          comfyPage,
-          'Input Test Subgraph'
-        )
-
-        const allTexts = await collectWidgetLabels(shownSection)
-        expect(allTexts.length).toBeGreaterThan(0)
-
-        // The fixture has a widget with name="text" but
-        // label="renamed_from_sidepanel". The panel should show the
-        // renamed label, not the raw widget name.
-        expect(allTexts).toContain('renamed_from_sidepanel')
-        expect(allTexts).not.toContain('text')
-      })
-    })
-
-    test.describe('Parameters tab (WidgetActions menu)', () => {
-      test('linked promoted widget menu should not show Hide/Show input', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-nested-promotion'
-        )
-        const subgraphNodes =
-          await comfyPage.nodeOps.getNodeRefsByTitle('Sub 0')
-        expect(subgraphNodes.length).toBeGreaterThan(0)
-        await subgraphNodes[0].click('title')
-
-        const panel = await ensurePropertiesPanel(comfyPage)
-
-        const moreButtons = panel.getByTestId(
-          TestIds.subgraphEditor.widgetActionsMenuButton
-        )
-        await expect(moreButtons.first()).toBeVisible()
-        await moreButtons.first().click()
-
-        const menu = comfyPage.page.getByTestId(TestIds.menu.moreMenuContent)
-        await expect(menu).toBeVisible()
-        await expect(menu.getByText('Hide input')).toHaveCount(0)
-        await expect(menu.getByText('Show input')).toHaveCount(0)
-        await expect(menu.getByText('Rename')).toBeVisible()
-      })
-    })
-  }
-)

browser_tests/tests/subgraphPromotion.spec.ts

@@ -2,6 +2,7 @@ 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'
@@ -11,10 +12,33 @@ 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'] },
   () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
     test.describe('Auto-promotion on Convert to Subgraph', () => {
       test('Recommended widgets are auto-promoted when creating a subgraph', async ({
         comfyPage
@@ -65,10 +89,18 @@ test.describe(
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
 
-        // Select the SaveImage node (id 9 in default workflow)
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
+
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()
@@ -158,7 +190,7 @@ test.describe(
         await comfyPage.vueNodes.enterSubgraph('11')
         await comfyPage.nextFrame()
 
-        expect(await comfyPage.subgraph.isInSubgraph()).toBe(true)
+        expect(await isInSubgraph(comfyPage)).toBe(true)
       })
 
       test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
@@ -230,7 +262,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent graph
-        await comfyPage.subgraph.exitViaBreadcrumb()
+        await exitSubgraphToParent(comfyPage)
 
         // Promoted textarea on SubgraphNode should have the same value
         const promotedTextarea = comfyPage.page.getByTestId(
@@ -264,7 +296,7 @@ test.describe(
           )
           await expect(interiorTextarea).toHaveValue(testContent)
 
-          await comfyPage.subgraph.exitViaBreadcrumb()
+          await exitSubgraphToParent(comfyPage)
 
           const promotedTextarea = comfyPage.page.getByTestId(
             TestIds.widgets.domWidgetTextarea
@@ -310,7 +342,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await comfyPage.subgraph.exitViaBreadcrumb()
+        await exitSubgraphToParent(comfyPage)
 
         // SubgraphNode should now have the promoted widget
         const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -345,7 +377,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back and verify promotion took effect
-        await comfyPage.subgraph.exitViaBreadcrumb()
+        await exitSubgraphToParent(comfyPage)
         await fitToViewInstant(comfyPage)
         await comfyPage.nextFrame()
 
@@ -376,7 +408,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await comfyPage.subgraph.exitViaBreadcrumb()
+        await exitSubgraphToParent(comfyPage)
 
         // SubgraphNode should have fewer widgets
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -457,10 +489,18 @@ test.describe(
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
 
-        // Select SaveImage (id 9)
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
+
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()
@@ -524,30 +564,6 @@ 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
       }) => {
@@ -705,44 +721,6 @@ 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
       }) => {
@@ -765,7 +743,15 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back via breadcrumb
-        await comfyPage.subgraph.exitViaBreadcrumb()
+        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()
 
         // Widget count should be reduced
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')

browser_tests/tests/subgraphSlotAlignment.spec.ts

@@ -1,132 +0,0 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-interface SlotMeasurement {
-  key: string
-  offsetX: number
-  offsetY: number
-}
-
-interface NodeSlotData {
-  nodeId: string
-  isSubgraph: boolean
-  nodeW: number
-  nodeH: number
-  slots: SlotMeasurement[]
-}
-
-/**
- * Regression test for link misalignment on SubgraphNodes when loading
- * workflows with workflowRendererVersion: "LG".
- *
- * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
- * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
- * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
- * slot offsets. The fix uses DOM-relative measurement instead.
- */
-test.describe(
-  'Subgraph slot alignment after LG layout scale',
-  { tag: ['@subgraph', '@canvas'] },
-  () => {
-    test('slot positions stay within node bounds after loading LG workflow', async ({
-      comfyPage
-    }) => {
-      const SLOT_BOUNDS_MARGIN = 20
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-      const workflowPath = resolve(
-        import.meta.dirname,
-        '../assets/subgraphs/basic-subgraph.json'
-      )
-      const workflow = JSON.parse(
-        readFileSync(workflowPath, 'utf-8')
-      ) as ComfyWorkflowJSON
-      workflow.extra = {
-        ...workflow.extra,
-        workflowRendererVersion: 'LG'
-      }
-
-      await comfyPage.page.evaluate(
-        (wf) =>
-          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
-            openSource: 'template'
-          }),
-        workflow
-      )
-      await comfyPage.nextFrame()
-
-      // Wait for slot elements to appear in DOM
-      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
-
-      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
-        const nodes = window.app!.graph._nodes
-        const slotData: NodeSlotData[] = []
-
-        for (const node of nodes) {
-          const nodeId = String(node.id)
-          const nodeEl = document.querySelector(
-            `[data-node-id="${nodeId}"]`
-          ) as HTMLElement | null
-          if (!nodeEl) continue
-
-          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
-          if (slotEls.length === 0) continue
-
-          const slots: SlotMeasurement[] = []
-
-          const nodeRect = nodeEl.getBoundingClientRect()
-          for (const slotEl of slotEls) {
-            const slotRect = slotEl.getBoundingClientRect()
-            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
-            slots.push({
-              key: slotKey,
-              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
-              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
-            })
-          }
-
-          slotData.push({
-            nodeId,
-            isSubgraph: !!node.isSubgraphNode?.(),
-            nodeW: nodeRect.width,
-            nodeH: nodeRect.height,
-            slots
-          })
-        }
-
-        return slotData
-      })
-
-      const subgraphNodes = result.filter((n) => n.isSubgraph)
-      expect(subgraphNodes.length).toBeGreaterThan(0)
-
-      for (const node of subgraphNodes) {
-        for (const slot of node.slots) {
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetX,
-            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
-          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
-
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
-          expect(
-            slot.offsetY,
-            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
-          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
-        }
-      }
-    })
-  }
-)

browser_tests/tests/subgraphZeroUuid.spec.ts

@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe(
-  'Zero UUID workflow: subgraph undo rendering',
-  { tag: ['@workflow', '@subgraph'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      test.setTimeout(30000) // Extend timeout as we need to reload the page an additional time
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.page.reload() // Reload page as we need to enter in Vue mode
-      await comfyPage.page.waitForFunction(() => !!window.app?.graph)
-    })
-
-    test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/basic-subgraph-zero-uuid'
-      )
-      await comfyPage.vueNodes.waitForNodes()
-
-      const assertInSubgraph = async (inSubgraph: boolean) => {
-        await expect
-          .poll(() => comfyPage.subgraph.isInSubgraph())
-          .toBe(inSubgraph)
-      }
-
-      // Root graph has 1 subgraph node, rendered in the DOM
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-
-      await comfyPage.vueNodes.enterSubgraph()
-      await assertInSubgraph(true)
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await assertInSubgraph(false)
-
-      await comfyPage.canvas.focus()
-      await comfyPage.keyboard.undo()
-      await comfyPage.nextFrame()
-
-      // After undo, the subgraph node is still visible and rendered
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-    })
-  }
-)

browser_tests/tests/toastNotifications.spec.ts

@@ -0,0 +1,73 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Toast Notifications', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
+  async function triggerErrorToast(comfyPage: {
+    page: { evaluate: (fn: () => void) => Promise<void> }
+    nextFrame: () => Promise<void>
+  }) {
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Test execution error',
+        life: 30000
+      })
+    })
+    await comfyPage.nextFrame()
+  }
+
+  test('Error toast appears when triggered', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+  })
+
+  test('Toast shows correct error severity class', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    const errorToast = comfyPage.page.locator(
+      '.p-toast-message.p-toast-message-error'
+    )
+    await expect(errorToast.first()).toBeVisible()
+  })
+
+  test('Toast can be dismissed via close button', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+
+    const closeButton = comfyPage.page.locator('.p-toast-close-button').first()
+    await closeButton.click()
+
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
+  })
+
+  test('All toasts cleared via closeToasts helper', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+
+    await comfyPage.toast.closeToasts()
+
+    expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
+  })
+
+  test('Toast error count is accurate', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('.p-toast-message.p-toast-message-error').first()
+    ).toBeVisible()
+
+    const errorCount = await comfyPage.toast.getToastErrorCount()
+    expect(errorCount).toBeGreaterThanOrEqual(1)
+  })
+})

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

@@ -2,116 +2,9 @@ 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)
@@ -181,45 +74,4 @@ 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/widgetCopyButton.spec.ts

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Widget copy button', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+
+    // Add a PreviewAny node which has a read-only textarea with a copy button
+    await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('PreviewAny')
+      window.app!.graph.add(node)
+    })
+
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('Copy button has correct aria-label', async ({ comfyPage }) => {
+    const copyButton = comfyPage.page
+      .locator('[data-node-id] button[aria-label]')
+      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--copy\\]') })
+      .first()
+    await expect(copyButton).toBeAttached()
+    await expect(copyButton).toHaveAttribute('aria-label', /copy/i)
+  })
+
+  test('Copy button exists within textarea widget group container', async ({
+    comfyPage
+  }) => {
+    const container = comfyPage.page
+      .locator('[data-node-id] div.group:has(textarea[readonly])')
+      .first()
+    await expect(container).toBeVisible()
+    await container.hover()
+    await comfyPage.nextFrame()
+
+    const copyButton = container.locator('button').filter({
+      has: comfyPage.page.locator('.icon-\\[lucide--copy\\]')
+    })
+    await expect(copyButton.first()).toBeAttached()
+  })
+})

docs/SETTINGS.md

@@ -6,13 +6,13 @@ ComfyUI frontend uses a comprehensive settings system for user preferences with
 
 ### Settings Architecture
 
-- Settings are defined as `SettingParams` in `src/constants/coreSettings.ts`
+- Settings are defined as `SettingParams` in `src/platform/settings/constants/coreSettings.ts`
 - Registered at app startup, loaded/saved via `useSettingStore` (Pinia)
 - Persisted per user via backend `/settings` endpoint
 - If a value hasn't been set by the user, the store returns the computed default
 
 ```typescript
-// From src/stores/settingStore.ts:105-122
+// From src/platform/settings/settingStore.ts:105-122
 function getDefaultValue<K extends keyof Settings>(
   key: K
 ): Settings[K] | undefined {
@@ -50,7 +50,7 @@ await newUserService().initializeIfNewUser(settingStore)
 You can compute defaults dynamically using function defaults that access runtime context:
 
 ```typescript
-// From src/constants/coreSettings.ts:94-101
+// From src/platform/settings/constants/coreSettings.ts:94-101
 {
   id: 'Comfy.Sidebar.Size',
   // Default to small if the window is less than 1536px(2xl) wide
@@ -59,7 +59,7 @@ You can compute defaults dynamically using function defaults that access runtime
 ```
 
 ```typescript
-// From src/constants/coreSettings.ts:306
+// From src/platform/settings/constants/coreSettings.ts:306
 {
   id: 'Comfy.Locale',
   defaultValue: () => navigator.language.split('-')[0] || 'en'
@@ -71,7 +71,7 @@ You can compute defaults dynamically using function defaults that access runtime
 You can vary defaults by installed frontend version using `defaultsByInstallVersion`:
 
 ```typescript
-// From src/stores/settingStore.ts:129-150
+// From src/platform/settings/settingStore.ts:129-150
 function getVersionedDefaultValue<
   K extends keyof Settings,
   TValue = Settings[K]
@@ -101,7 +101,7 @@ function getVersionedDefaultValue<
 Example versioned defaults from codebase:
 
 ```typescript
-// From src/constants/coreSettings.ts:38-40
+// From src/platform/settings/constants/coreSettings.ts:38-40
 {
   id: 'Comfy.Graph.LinkReleaseAction',
   defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
@@ -168,7 +168,7 @@ Here are actual settings showing different patterns:
 The initial installed version is captured for new users to ensure versioned defaults remain stable:
 
 ```typescript
-// From src/services/newUserService.ts:49-53
+// From src/services/useNewUserService.ts
 await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 ```
 
@@ -220,7 +220,7 @@ await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 Values are stored per user via the backend. The store writes through API and falls back to defaults when not set:
 
 ```typescript
-// From src/stores/settingStore.ts:73-75
+// From src/platform/settings/settingStore.ts:73-75
 onChange(settingsById.value[key], newValue, oldValue)
 settingValues.value[key] = newValue
 await api.storeSetting(key, newValue)
@@ -245,7 +245,7 @@ await settingStore.set('Comfy.SomeSetting', newValue)
 Settings support migration from deprecated values:
 
 ```typescript
-// From src/stores/settingStore.ts:68-69, 172-175
+// From src/platform/settings/settingStore.ts:68-69, 172-175
 const newValue = tryMigrateDeprecatedValue(settingsById.value[key], clonedValue)
 
 // Migration happens during addSetting for existing values:
@@ -262,7 +262,7 @@ if (settingValues.value[setting.id] !== undefined) {
 Settings can define onChange callbacks that receive the setting definition, new value, and old value:
 
 ```typescript
-// From src/stores/settingStore.ts:73, 177
+// From src/platform/settings/settingStore.ts:73, 177
 onChange(settingsById.value[key], newValue, oldValue) // During set()
 onChange(setting, get(setting.id), undefined) // During addSetting()
 ```

docs/testing/unit-testing.md

@@ -95,7 +95,7 @@ Testing with ComfyUI workflow files:
 ```typescript
 // Example from: tests-ui/tests/comfyWorkflow.test.ts
 import { describe, expect, it } from 'vitest'
-import { validateComfyWorkflow } from '@/domains/workflow/validation/schemas/workflowSchema'
+import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
 
 describe('workflow validation', () => {

knip.config.ts

@@ -32,7 +32,7 @@ const config: KnipConfig = {
       entry: ['src/index.ts']
     }
   },
-  ignoreBinaries: ['python3', 'gh'],
+  ignoreBinaries: ['python3', 'gh', 'generate'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify-json/lucide',
@@ -40,7 +40,9 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Used by lucideStrokePlugin.js (CSS @plugin)
+    '@iconify/utils'
   ],
   ignore: [
     // Auto generated API types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.12",
+  "version": "1.43.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -44,7 +44,7 @@
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
-    "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
+    "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 pnpm test:browser",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",
@@ -199,7 +199,6 @@
   "engines": {
     "node": "24.x"
   },
-  "packageManager": "pnpm@10.33.0",
   "pnpm": {
     "overrides": {
       "vite": "catalog:"

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,quiver}]");
+@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}]");
 
 /* 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}]");

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

@@ -1,3 +0,0 @@
-<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.test.ts

@@ -62,8 +62,7 @@ describe('formatUtil', () => {
         { filename: 'animation.gif', expected: 'image' },
         { filename: 'web.webp', expected: 'image' },
         { filename: 'bitmap.bmp', expected: 'image' },
-        { filename: 'modern.avif', expected: 'image' },
-        { filename: 'logo.svg', expected: 'image' }
+        { filename: 'modern.avif', expected: 'image' }
       ]
 
       it.for(imageTestCases)(

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

@@ -542,8 +542,7 @@ const IMAGE_EXTENSIONS = [
   'bmp',
   'avif',
   'tif',
-  'tiff',
-  'svg'
+  'tiff'
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const

src/App.vue

@@ -9,15 +9,19 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted, 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 { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
 import { parsePreloadError } from '@/utils/preloadErrorUtil'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
+const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
 
@@ -92,17 +96,12 @@ onMounted(() => {
         }
       })
     }
-    // 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
-    // })
+    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/components/LiteGraphCanvasSplitterOverlay.test.ts

@@ -1,28 +0,0 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-import { describe, expect, it } from 'vitest'
-
-/**
- * Regression test: the graph-canvas-panel SplitterPanel must not clip
- * absolutely-positioned children (like GraphCanvasMenu).
- *
- * PrimeVue applies `overflow: hidden` to all SplitterPanels by default.
- * Without an explicit `overflow-visible` override, the bottom-right canvas
- * toolbar becomes invisible on mobile viewports where the panel's bounding
- * box is smaller than the full canvas area.
- *
- * @see https://www.notion.so/Bug-Graph-canvas-toolbar-not-visible-on-mobile-3246d73d36508144ae00f10065c42fac
- */
-describe('LiteGraphCanvasSplitterOverlay', () => {
-  it('graph-canvas-panel has overflow-visible to prevent clipping toolbar on mobile', () => {
-    const filePath = resolve(__dirname, 'LiteGraphCanvasSplitterOverlay.vue')
-    const source = readFileSync(filePath, 'utf-8')
-
-    // The SplitterPanel wrapping graph-canvas-panel must include overflow-visible
-    // to override PrimeVue's default overflow:hidden on .p-splitterpanel.
-    // Without this, GraphCanvasMenu (absolute right-0 bottom-0) gets clipped on mobile.
-    expect(source).toMatch(
-      /class="[^"]*graph-canvas-panel[^"]*overflow-visible/
-    )
-  })
-})

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -72,7 +72,7 @@
             state-storage="local"
             @resizestart="onResizestart"
           >
-            <SplitterPanel class="graph-canvas-panel relative overflow-visible">
+            <SplitterPanel class="graph-canvas-panel relative">
               <slot name="graph-canvas-panel" />
             </SplitterPanel>
             <SplitterPanel

src/components/builder/AppModeWidgetList.vue

@@ -1,20 +1,15 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, provide, shallowRef } from 'vue'
-
-import { useAppModeWidgetResizing } from '@/components/builder/useAppModeWidgetResizing'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
-import { extractWidgetStringValue } from '@/composables/maskeditor/useMaskEditorLoader'
 import { appendCloudResParam } from '@/platform/distribution/cloudPreviewUtil'
 import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
@@ -22,7 +17,6 @@ import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useAppModeStore } from '@/stores/appModeStore'
-import { parseImageWidgetValue } from '@/utils/imageUtil'
 import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@/utils/tailwindUtil'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
@@ -30,9 +24,6 @@ import { promptRenameWidget } from '@/utils/widgetUtil'
 
 interface WidgetEntry {
   key: string
-  nodeId: NodeId
-  widgetName: string
-  persistedHeight: number | undefined
   nodeData: ReturnType<typeof nodeToNodeData> & {
     widgets: NonNullable<ReturnType<typeof nodeToNodeData>['widgets']>
   }
@@ -47,15 +38,8 @@ const { mobile = false, builderMode = false } = defineProps<{
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
 const appModeStore = useAppModeStore()
-const maskEditor = useMaskEditor()
-
-const { onPointerDown } = useAppModeWidgetResizing(
-  (nodeId, widgetName, config) =>
-    appModeStore.updateInputConfig(nodeId, widgetName, config)
-)
 
 provide(HideLayoutFieldKey, true)
-provide(OverlayAppendToKey, 'body')
 
 const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
 useEventListener(
@@ -71,7 +55,7 @@ const mappedSelections = computed((): WidgetEntry[] => {
     ReturnType<typeof nodeToNodeData>
   >()
 
-  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName, config]) => {
+  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName]) => {
     const [node, widget] = resolveNodeWidget(nodeId, widgetName)
     if (!widget || !node || node.mode !== LGraphEventMode.ALWAYS) return []
 
@@ -100,9 +84,6 @@ const mappedSelections = computed((): WidgetEntry[] => {
     return [
       {
         key: `${nodeId}:${widgetName}`,
-        nodeId,
-        widgetName,
-        persistedHeight: config?.height,
         nodeData: {
           ...fullNodeData,
           widgets: [matchingWidget]
@@ -116,27 +97,21 @@ const mappedSelections = computed((): WidgetEntry[] => {
 function getDropIndicator(node: LGraphNode) {
   if (node.type !== 'LoadImage') return undefined
 
-  const stringValue = extractWidgetStringValue(node.widgets?.[0]?.value)
-
-  const { filename, subfolder, type } = stringValue
-    ? parseImageWidgetValue(stringValue)
-    : { filename: '', subfolder: '', type: 'input' }
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
 
   const buildImageUrl = () => {
     if (!filename) return undefined
-    const params = new URLSearchParams({ filename, subfolder, type })
-    appendCloudResParam(params, filename)
+    const params = new URLSearchParams(resultItem)
+    appendCloudResParam(params, resultItem.filename)
     return api.apiURL(`/view?${params}${app.getPreviewFormatParam()}`)
   }
 
-  const imageUrl = buildImageUrl()
-
   return {
     iconClass: 'icon-[lucide--image]',
-    imageUrl,
+    imageUrl: buildImageUrl(),
     label: mobile ? undefined : t('linearMode.dragAndDropImage'),
-    onClick: () => node.widgets?.[1]?.callback?.(undefined),
-    onMaskEdit: imageUrl ? () => maskEditor.openMaskEditor(node) : undefined
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
   }
 }
 
@@ -155,14 +130,7 @@ function nodeToNodeData(node: LGraphNode) {
 </script>
 <template>
   <div
-    v-for="{
-      key,
-      nodeId,
-      widgetName,
-      persistedHeight,
-      nodeData,
-      action
-    } in mappedSelections"
+    v-for="{ key, nodeData, action } in mappedSelections"
     :key
     :class="
       cn(
@@ -213,31 +181,15 @@ function nodeToNodeData(node: LGraphNode) {
         ]"
       >
         <template #button>
-          <Button
-            variant="textonly"
-            size="icon"
-            data-testid="widget-actions-menu"
-          >
+          <Button variant="textonly" size="icon">
             <i class="icon-[lucide--ellipsis]" />
           </Button>
         </template>
       </Popover>
     </div>
     <div
-      :style="
-        persistedHeight
-          ? { '--persisted-height': `${persistedHeight}px` }
-          : undefined
-      "
-      :class="
-        cn(
-          builderMode && 'pointer-events-none',
-          persistedHeight &&
-            '**:data-[slot=drop-zone-indicator]:h-(--persisted-height) [&_textarea]:h-(--persisted-height)'
-        )
-      "
+      :class="builderMode && 'pointer-events-none'"
       :inert="builderMode || undefined"
-      @pointerdown.capture="(e) => onPointerDown(nodeId, widgetName, e)"
     >
       <DropZone
         :on-drag-over="nodeData.onDragOver"

src/components/builder/BuilderSaveDialogContent.vue

@@ -1,71 +0,0 @@
-<template>
-  <BuilderDialog @close="emit('close')">
-    <template #title>
-      {{ $t('builderToolbar.saveAs') }}
-    </template>
-
-    <div class="flex flex-col gap-2">
-      <label :for="inputId" class="text-sm text-muted-foreground">
-        {{ $t('builderToolbar.filename') }}
-      </label>
-      <input
-        :id="inputId"
-        v-model="filename"
-        autofocus
-        type="text"
-        class="focus-visible:ring-ring flex h-10 min-h-8 items-center self-stretch rounded-lg border-none bg-secondary-background pl-4 text-sm text-base-foreground"
-        @keydown.enter="
-          filename.trim() && emit('save', filename.trim(), openAsApp)
-        "
-      />
-    </div>
-
-    <div class="flex flex-col gap-2">
-      <label :id="radioGroupLabelId" class="text-sm text-muted-foreground">
-        {{ $t('builderToolbar.defaultViewLabel') }}
-      </label>
-      <ViewTypeRadioGroup
-        v-model="openAsApp"
-        :aria-labelledby="radioGroupLabelId"
-      />
-    </div>
-
-    <template #footer>
-      <Button variant="muted-textonly" size="lg" @click="emit('close')">
-        {{ $t('g.cancel') }}
-      </Button>
-      <Button
-        variant="secondary"
-        size="lg"
-        :disabled="!filename.trim()"
-        @click="emit('save', filename.trim(), openAsApp)"
-      >
-        {{ $t('g.save') }}
-      </Button>
-    </template>
-  </BuilderDialog>
-</template>
-
-<script setup lang="ts">
-import { ref, useId } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-
-import BuilderDialog from './BuilderDialog.vue'
-import ViewTypeRadioGroup from './ViewTypeRadioGroup.vue'
-
-const { defaultFilename, defaultOpenAsApp = true } = defineProps<{
-  defaultFilename: string
-  defaultOpenAsApp?: boolean
-}>()
-
-const emit = defineEmits<{
-  save: [filename: string, openAsApp: boolean]
-  close: []
-}>()
-
-const inputId = useId()
-const radioGroupLabelId = useId()
-const filename = ref(defaultFilename)
-const openAsApp = ref(defaultOpenAsApp)
-</script>

src/components/builder/IoItem.vue

@@ -63,7 +63,7 @@ const entries = computed(() => {
     </div>
     <Popover :entries>
       <template #button>
-        <Button variant="muted-textonly" data-testid="widget-actions-menu">
+        <Button variant="muted-textonly">
           <i class="icon-[lucide--ellipsis]" />
         </Button>
       </template>

src/components/builder/ViewTypeRadioGroup.vue

@@ -1,74 +0,0 @@
-<template>
-  <div role="radiogroup" v-bind="$attrs" :class="cn('flex flex-col', gapClass)">
-    <Button
-      v-for="option in viewTypeOptions"
-      :key="option.value.toString()"
-      role="radio"
-      :aria-checked="modelValue === option.value"
-      :class="
-        cn(
-          'flex cursor-pointer items-center gap-2 self-stretch rounded-lg border-none bg-transparent py-2 pr-4 pl-2 text-base-foreground transition-colors hover:bg-secondary-background',
-          heightClass,
-          modelValue === option.value && 'bg-secondary-background'
-        )
-      "
-      variant="textonly"
-      @click="
-        modelValue !== option.value && emit('update:modelValue', option.value)
-      "
-    >
-      <div
-        class="flex size-8 min-h-8 items-center justify-center rounded-lg bg-secondary-background-hover"
-      >
-        <i :class="cn(option.icon, 'size-4')" aria-hidden="true" />
-      </div>
-      <div class="mx-2 flex flex-1 flex-col items-start">
-        <span class="text-sm font-medium text-base-foreground">
-          {{ option.title }}
-        </span>
-        <span class="text-xs text-muted-foreground">
-          {{ option.subtitle }}
-        </span>
-      </div>
-      <i
-        v-if="modelValue === option.value"
-        class="icon-[lucide--check] size-4 text-base-foreground"
-        aria-hidden="true"
-      />
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import { cn } from '@/utils/tailwindUtil'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const { size = 'md' } = defineProps<{
-  modelValue: boolean
-  size?: 'sm' | 'md'
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-}>()
-
-const viewTypeOptions = [
-  {
-    value: true,
-    icon: 'icon-[lucide--app-window]',
-    title: t('builderToolbar.app'),
-    subtitle: t('builderToolbar.appDescription')
-  },
-  {
-    value: false,
-    icon: 'icon-[comfy--workflow]',
-    title: t('builderToolbar.nodeGraph'),
-    subtitle: t('builderToolbar.nodeGraphDescription')
-  }
-]
-const heightClass = size === 'sm' ? 'h-12' : 'h-14'
-const gapClass = size === 'sm' ? 'gap-1' : 'gap-2'
-</script>

src/components/builder/VueNodeSwitchPopup.vue

@@ -1,55 +0,0 @@
-<template>
-  <NotificationPopup
-    v-if="appModeStore.showVueNodeSwitchPopup"
-    :title="$t('appBuilder.vueNodeSwitch.title')"
-    show-close
-    position="bottom-left"
-    @close="dismiss"
-  >
-    {{ $t('appBuilder.vueNodeSwitch.content') }}
-
-    <template #footer-start>
-      <label
-        class="flex cursor-pointer items-center gap-2 text-sm text-muted-foreground"
-      >
-        <input
-          v-model="dontShowAgain"
-          type="checkbox"
-          class="accent-primary-background"
-        />
-        {{ $t('appBuilder.vueNodeSwitch.dontShowAgain') }}
-      </label>
-    </template>
-
-    <template #footer-end>
-      <Button
-        variant="secondary"
-        size="lg"
-        class="font-normal"
-        @click="dismiss"
-      >
-        {{ $t('appBuilder.vueNodeSwitch.dismiss') }}
-      </Button>
-    </template>
-  </NotificationPopup>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import NotificationPopup from '@/components/common/NotificationPopup.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useAppModeStore } from '@/stores/appModeStore'
-
-const appModeStore = useAppModeStore()
-const settingStore = useSettingStore()
-const dontShowAgain = ref(false)
-
-function dismiss() {
-  if (dontShowAgain.value) {
-    void settingStore.set('Comfy.AppBuilder.VueNodeSwitchDismissed', true)
-  }
-  appModeStore.showVueNodeSwitchPopup = false
-}
-</script>

src/components/builder/useAppModeWidgetResizing.test.ts

@@ -1,210 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { effectScope } from 'vue'
-
-import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
-
-import { useAppModeWidgetResizing } from './useAppModeWidgetResizing'
-
-function setHeight(el: HTMLElement, height: number) {
-  Object.defineProperty(el, 'offsetHeight', {
-    value: height,
-    configurable: true
-  })
-}
-
-function wrapWithTextarea(initialHeight = 100): {
-  wrapper: HTMLDivElement
-  textarea: HTMLTextAreaElement
-} {
-  const wrapper = document.createElement('div')
-  const textarea = document.createElement('textarea')
-  wrapper.appendChild(textarea)
-  document.body.appendChild(wrapper)
-  setHeight(textarea, initialHeight)
-  return { wrapper, textarea }
-}
-
-describe('useAppModeWidgetResizing', () => {
-  function setup() {
-    const onResize =
-      vi.fn<
-        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
-      >()
-    const { onPointerDown } = useAppModeWidgetResizing(onResize)
-
-    function bind(wrapper: HTMLElement, nodeId: NodeId, widgetName: string) {
-      wrapper.addEventListener(
-        'pointerdown',
-        (e) => onPointerDown(nodeId, widgetName, e as PointerEvent),
-        { capture: true }
-      )
-    }
-
-    return { onResize, bind }
-  }
-
-  it('persists height when textarea is resized via drag', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('does not persist when no height change occurs (e.g. a click)', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('persists once per drag gesture; stray pointerup is a no-op', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-  })
-
-  it('ignores pointerdown on non-resizable targets (label, button, popover)', () => {
-    const { bind, onResize } = setup()
-    const wrapper = document.createElement('div')
-    const button = document.createElement('button')
-    wrapper.appendChild(button)
-    document.body.appendChild(wrapper)
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('persists when target is a descendant of the drop-zone-indicator', () => {
-    const { bind, onResize } = setup()
-    const wrapper = document.createElement('div')
-    const indicator = document.createElement('div')
-    indicator.setAttribute('data-slot', 'drop-zone-indicator')
-    const inner = document.createElement('span')
-    indicator.appendChild(inner)
-    wrapper.appendChild(indicator)
-    document.body.appendChild(wrapper)
-    setHeight(indicator, 100)
-    bind(wrapper, 1 as NodeId, 'image')
-
-    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(indicator, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'image', { height: 250 })
-  })
-
-  it('drops a stale gesture when a new pointerdown starts before pointerup arrives', () => {
-    const { bind, onResize } = setup()
-    const first = wrapWithTextarea()
-    const second = wrapWithTextarea()
-    bind(first.wrapper, 1 as NodeId, 'prompt')
-    bind(second.wrapper, 2 as NodeId, 'other')
-
-    first.textarea.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true })
-    )
-    setHeight(first.textarea, 250)
-
-    second.textarea.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true })
-    )
-    setHeight(second.textarea, 300)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(2, 'other', { height: 300 })
-  })
-
-  it('treats pointercancel as the end of a gesture and persists the new height', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('after pointercancel, a subsequent stray pointerup is a no-op', () => {
-    const { bind, onResize } = setup()
-    const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-    setHeight(textarea, 400)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
-  })
-
-  it('removes global listeners when the owning scope is disposed mid-gesture', () => {
-    const onResize =
-      vi.fn<
-        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
-      >()
-    const scope = effectScope()
-    const { onPointerDown } = scope.run(() =>
-      useAppModeWidgetResizing(onResize)
-    )!
-    const { wrapper, textarea } = wrapWithTextarea()
-    wrapper.addEventListener(
-      'pointerdown',
-      (e) => onPointerDown(1 as NodeId, 'prompt', e as PointerEvent),
-      { capture: true }
-    )
-
-    textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(textarea, 250)
-    scope.stop()
-    window.dispatchEvent(new PointerEvent('pointerup'))
-    window.dispatchEvent(new PointerEvent('pointercancel'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-
-  it('does not match a resizable that is an ancestor of the wrapper', () => {
-    const { bind, onResize } = setup()
-    // An unrelated drop-zone-indicator outside the wrapper would otherwise be
-    // returned by target.closest(...) walking up the tree.
-    const outerIndicator = document.createElement('div')
-    outerIndicator.setAttribute('data-slot', 'drop-zone-indicator')
-    const wrapper = document.createElement('div')
-    const inner = document.createElement('span')
-    wrapper.appendChild(inner)
-    outerIndicator.appendChild(wrapper)
-    document.body.appendChild(outerIndicator)
-    setHeight(outerIndicator, 100)
-    bind(wrapper, 1 as NodeId, 'prompt')
-
-    inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    setHeight(outerIndicator, 250)
-    window.dispatchEvent(new PointerEvent('pointerup'))
-
-    expect(onResize).not.toHaveBeenCalled()
-  })
-})

src/components/builder/useAppModeWidgetResizing.ts

@@ -1,55 +0,0 @@
-import { onScopeDispose } from 'vue'
-
-import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
-
-const RESIZABLE_SELECTOR = 'textarea, [data-slot="drop-zone-indicator"]'
-
-export function useAppModeWidgetResizing(
-  onResize: (
-    nodeId: NodeId,
-    widgetName: string,
-    config: InputWidgetConfig
-  ) => void
-) {
-  let pendingHandler: (() => void) | null = null
-
-  function clearPendingHandler() {
-    if (!pendingHandler) return
-    window.removeEventListener('pointerup', pendingHandler)
-    window.removeEventListener('pointercancel', pendingHandler)
-    pendingHandler = null
-  }
-
-  onScopeDispose(clearPendingHandler)
-
-  function onPointerDown(
-    nodeId: NodeId,
-    widgetName: string,
-    event: PointerEvent
-  ) {
-    const wrapper = event.currentTarget
-    const target = event.target
-    if (!(wrapper instanceof HTMLElement) || !(target instanceof HTMLElement))
-      return
-    const resizable = target.closest<HTMLElement>(RESIZABLE_SELECTOR)
-    if (!resizable || !wrapper.contains(resizable)) return
-
-    clearPendingHandler()
-
-    const startHeight = resizable.offsetHeight
-    const handler = () => {
-      window.removeEventListener('pointerup', handler)
-      window.removeEventListener('pointercancel', handler)
-      pendingHandler = null
-      const height = resizable.offsetHeight
-      if (height === startHeight) return
-      onResize(nodeId, widgetName, { height })
-    }
-    pendingHandler = handler
-    window.addEventListener('pointerup', handler)
-    window.addEventListener('pointercancel', handler)
-  }
-
-  return { onPointerDown }
-}

src/components/builder/useBuilderSave.test.ts

@@ -1,341 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import { useBuilderSave } from './useBuilderSave'
-
-const mockSetMode = vi.hoisted(() => vi.fn())
-const mockToastErrorHandler = vi.hoisted(() => vi.fn())
-const mockTrackEnterLinear = vi.hoisted(() => vi.fn())
-const mockTrackDefaultViewSet = vi.hoisted(() => vi.fn())
-const mockSaveWorkflow = vi.hoisted(() => vi.fn<() => Promise<void>>())
-const mockSaveWorkflowAs = vi.hoisted(() =>
-  vi.fn<() => Promise<boolean | null>>()
-)
-const mockShowLayoutDialog = vi.hoisted(() => vi.fn())
-const mockShowConfirmDialog = vi.hoisted(() => vi.fn())
-const mockCloseDialog = vi.hoisted(() => vi.fn())
-const mockExitBuilder = vi.hoisted(() => vi.fn())
-
-const mockActiveWorkflow = ref<{
-  filename: string
-  initialMode?: string | null
-} | null>(null)
-
-vi.mock('@/composables/useAppMode', () => ({
-  useAppMode: () => ({ setMode: mockSetMode })
-}))
-
-vi.mock('@/composables/useErrorHandling', () => ({
-  useErrorHandling: () => ({ toastErrorHandler: mockToastErrorHandler })
-}))
-
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({
-    trackEnterLinear: mockTrackEnterLinear,
-    trackDefaultViewSet: mockTrackDefaultViewSet
-  })
-}))
-
-vi.mock('@/platform/workflow/core/services/workflowService', () => ({
-  useWorkflowService: () => ({
-    saveWorkflow: mockSaveWorkflow,
-    saveWorkflowAs: mockSaveWorkflowAs
-  })
-}))
-
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => ({
-    get activeWorkflow() {
-      return mockActiveWorkflow.value
-    }
-  })
-}))
-
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({ showLayoutDialog: mockShowLayoutDialog })
-}))
-
-vi.mock('@/stores/appModeStore', () => ({
-  useAppModeStore: () => ({ exitBuilder: mockExitBuilder })
-}))
-
-vi.mock('@/stores/dialogStore', () => ({
-  useDialogStore: () => ({ closeDialog: mockCloseDialog })
-}))
-
-vi.mock('@/components/dialog/confirm/confirmDialog', () => ({
-  showConfirmDialog: mockShowConfirmDialog
-}))
-
-vi.mock('@/i18n', () => ({
-  t: (key: string, params?: Record<string, string>) => {
-    if (params) return `${key}:${JSON.stringify(params)}`
-    return key
-  }
-}))
-
-vi.mock('./BuilderSaveDialogContent.vue', () => ({
-  default: { template: '<div />' }
-}))
-
-const SAVE_DIALOG_KEY = 'builder-save'
-const SUCCESS_DIALOG_KEY = 'builder-save-success'
-
-describe('useBuilderSave', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockActiveWorkflow.value = null
-  })
-
-  describe('save()', () => {
-    it('does nothing when there is no active workflow', async () => {
-      const { save } = useBuilderSave()
-
-      await save()
-
-      expect(mockSaveWorkflow).not.toHaveBeenCalled()
-    })
-
-    it('saves workflow directly without showing a dialog', async () => {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      mockSaveWorkflow.mockResolvedValueOnce(undefined)
-      const { save } = useBuilderSave()
-
-      await save()
-
-      expect(mockSaveWorkflow).toHaveBeenCalledOnce()
-      expect(mockShowConfirmDialog).not.toHaveBeenCalled()
-    })
-
-    it('toasts error on failure', async () => {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      const error = new Error('save failed')
-      mockSaveWorkflow.mockRejectedValueOnce(error)
-      const { save } = useBuilderSave()
-
-      await save()
-
-      expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
-      expect(mockShowConfirmDialog).not.toHaveBeenCalled()
-    })
-
-    it('prevents concurrent saves', async () => {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      let resolveSave!: () => void
-      mockSaveWorkflow.mockReturnValueOnce(
-        new Promise<void>((r) => {
-          resolveSave = r
-        })
-      )
-      const { save, isSaving } = useBuilderSave()
-
-      const firstSave = save()
-      expect(isSaving.value).toBe(true)
-
-      await save()
-      expect(mockSaveWorkflow).toHaveBeenCalledOnce()
-
-      resolveSave()
-      await firstSave
-      expect(isSaving.value).toBe(false)
-    })
-  })
-
-  describe('saveAs()', () => {
-    it('does nothing when there is no active workflow', () => {
-      mockActiveWorkflow.value = null
-      const { saveAs } = useBuilderSave()
-
-      saveAs()
-
-      expect(mockShowLayoutDialog).not.toHaveBeenCalled()
-    })
-
-    it('opens save dialog with correct defaultFilename and defaultOpenAsApp', () => {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      const { saveAs } = useBuilderSave()
-
-      saveAs()
-
-      expect(mockShowLayoutDialog).toHaveBeenCalledOnce()
-      const { key, props } = mockShowLayoutDialog.mock.calls[0][0]
-      expect(key).toBe(SAVE_DIALOG_KEY)
-      expect(props.defaultFilename).toBe('my-workflow')
-      expect(props.defaultOpenAsApp).toBe(true)
-    })
-
-    it('passes defaultOpenAsApp: false when initialMode is graph', () => {
-      mockActiveWorkflow.value = {
-        filename: 'my-workflow',
-        initialMode: 'graph'
-      }
-      const { saveAs } = useBuilderSave()
-
-      saveAs()
-
-      const { props } = mockShowLayoutDialog.mock.calls[0][0]
-      expect(props.defaultOpenAsApp).toBe(false)
-    })
-  })
-
-  describe('save dialog callbacks', () => {
-    function getSaveDialogProps() {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      const { saveAs } = useBuilderSave()
-      saveAs()
-      return mockShowLayoutDialog.mock.calls[0][0].props as {
-        onSave: (filename: string, openAsApp: boolean) => Promise<void>
-        onClose: () => void
-      }
-    }
-
-    it('onSave calls saveWorkflowAs with isApp and tracks telemetry', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', true)
-
-      expect(mockSaveWorkflowAs).toHaveBeenCalledWith(
-        mockActiveWorkflow.value,
-        {
-          filename: 'new-name',
-          isApp: true
-        }
-      )
-      expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
-        default_view: 'app'
-      })
-    })
-
-    it('onSave passes isApp: false when saving as graph', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', false)
-
-      expect(mockSaveWorkflowAs).toHaveBeenCalledWith(
-        mockActiveWorkflow.value,
-        {
-          filename: 'new-name',
-          isApp: false
-        }
-      )
-      expect(mockTrackDefaultViewSet).toHaveBeenCalledWith({
-        default_view: 'graph'
-      })
-    })
-
-    it('onSave does not track or close when saveWorkflowAs returns falsy', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(null)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', false)
-
-      expect(mockTrackDefaultViewSet).not.toHaveBeenCalled()
-      expect(mockCloseDialog).not.toHaveBeenCalled()
-    })
-
-    it('onSave closes dialog and shows success dialog after successful save', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', true)
-
-      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SAVE_DIALOG_KEY })
-      expect(mockShowConfirmDialog).toHaveBeenCalledOnce()
-      const successCall = mockShowConfirmDialog.mock.calls[0][0]
-      expect(successCall.key).toBe(SUCCESS_DIALOG_KEY)
-    })
-
-    it('shows app success message when openAsApp is true', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', true)
-
-      const successCall = mockShowConfirmDialog.mock.calls[0][0]
-      expect(successCall.props.promptText).toBe('builderSave.successBodyApp')
-    })
-
-    it('shows graph success message with exit builder button when openAsApp is false', async () => {
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', false)
-
-      const successCall = mockShowConfirmDialog.mock.calls[0][0]
-      expect(successCall.props.promptText).toBe('builderSave.successBodyGraph')
-      expect(successCall.footerProps.confirmText).toBe(
-        'linearMode.builder.exit'
-      )
-      expect(successCall.footerProps.cancelText).toBe('builderToolbar.viewApp')
-    })
-
-    it('onSave toasts error and closes dialog on failure', async () => {
-      const error = new Error('save-as failed')
-      mockSaveWorkflowAs.mockRejectedValueOnce(error)
-      const { onSave } = getSaveDialogProps()
-
-      await onSave('new-name', false)
-
-      expect(mockToastErrorHandler).toHaveBeenCalledWith(error)
-      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SAVE_DIALOG_KEY })
-    })
-
-    it('prevents concurrent handleSaveAs calls', async () => {
-      let resolveSaveAs!: (v: boolean) => void
-      mockSaveWorkflowAs.mockReturnValueOnce(
-        new Promise<boolean>((r) => {
-          resolveSaveAs = r
-        })
-      )
-      const { onSave } = getSaveDialogProps()
-
-      const firstSave = onSave('new-name', true)
-
-      await onSave('other-name', true)
-      expect(mockSaveWorkflowAs).toHaveBeenCalledOnce()
-
-      resolveSaveAs(true)
-      await firstSave
-    })
-  })
-
-  describe('graph success dialog callbacks', () => {
-    async function getGraphSuccessDialogProps() {
-      mockActiveWorkflow.value = { filename: 'my-workflow', initialMode: 'app' }
-      mockSaveWorkflowAs.mockResolvedValueOnce(true)
-      const { saveAs } = useBuilderSave()
-      saveAs()
-      const { onSave } = mockShowLayoutDialog.mock.calls[0][0].props as {
-        onSave: (filename: string, openAsApp: boolean) => Promise<void>
-      }
-      await onSave('new-name', false)
-      return mockShowConfirmDialog.mock.calls[0][0].footerProps as {
-        onConfirm: () => void
-        onCancel: () => void
-      }
-    }
-
-    it('onConfirm closes dialog and exits builder', async () => {
-      const { onConfirm } = await getGraphSuccessDialogProps()
-
-      onConfirm()
-
-      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SUCCESS_DIALOG_KEY })
-      expect(mockExitBuilder).toHaveBeenCalledOnce()
-    })
-
-    it('onCancel closes dialog and switches to app mode', async () => {
-      const { onCancel } = await getGraphSuccessDialogProps()
-
-      onCancel()
-
-      expect(mockCloseDialog).toHaveBeenCalledWith({ key: SUCCESS_DIALOG_KEY })
-      expect(mockTrackEnterLinear).toHaveBeenCalledWith({
-        source: 'app_builder'
-      })
-      expect(mockSetMode).toHaveBeenCalledWith('app')
-    })
-  })
-})

src/components/builder/useBuilderSave.ts

@@ -1,135 +0,0 @@
-import { useAppMode } from '@/composables/useAppMode'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
-import { t } from '@/i18n'
-import { useTelemetry } from '@/platform/telemetry'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useDialogService } from '@/services/dialogService'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import { ref } from 'vue'
-
-import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
-
-const SAVE_DIALOG_KEY = 'builder-save'
-const SUCCESS_DIALOG_KEY = 'builder-save-success'
-
-const isSaving = ref(false)
-
-export function useBuilderSave() {
-  const { toastErrorHandler } = useErrorHandling()
-  const { setMode } = useAppMode()
-  const workflowStore = useWorkflowStore()
-  const workflowService = useWorkflowService()
-  const dialogService = useDialogService()
-  const appModeStore = useAppModeStore()
-  const dialogStore = useDialogStore()
-
-  function closeDialog(key: string) {
-    dialogStore.closeDialog({ key })
-  }
-
-  async function save() {
-    if (isSaving.value) return
-    const workflow = workflowStore.activeWorkflow
-    if (!workflow) return
-
-    isSaving.value = true
-    try {
-      await workflowService.saveWorkflow(workflow)
-    } catch (e) {
-      toastErrorHandler(e)
-    } finally {
-      isSaving.value = false
-    }
-  }
-
-  function saveAs() {
-    if (isSaving.value) return
-    const workflow = workflowStore.activeWorkflow
-    if (!workflow) return
-
-    dialogService.showLayoutDialog({
-      key: SAVE_DIALOG_KEY,
-      component: BuilderSaveDialogContent,
-      props: {
-        defaultFilename: workflow.filename,
-        defaultOpenAsApp: workflow.initialMode !== 'graph',
-        onSave: handleSaveAs,
-        onClose: () => closeDialog(SAVE_DIALOG_KEY)
-      }
-    })
-  }
-
-  async function handleSaveAs(filename: string, openAsApp: boolean) {
-    if (isSaving.value) return
-    isSaving.value = true
-    try {
-      const workflow = workflowStore.activeWorkflow
-      if (!workflow) return
-
-      const saved = await workflowService.saveWorkflowAs(workflow, {
-        filename,
-        isApp: openAsApp
-      })
-
-      if (!saved) return
-      useTelemetry()?.trackDefaultViewSet({
-        default_view: openAsApp ? 'app' : 'graph'
-      })
-      closeDialog(SAVE_DIALOG_KEY)
-      showSuccessDialog(openAsApp ? 'app' : 'graph')
-    } catch (e) {
-      toastErrorHandler(e)
-      closeDialog(SAVE_DIALOG_KEY)
-    } finally {
-      isSaving.value = false
-    }
-  }
-
-  function showSuccessDialog(viewType: 'app' | 'graph') {
-    const promptText =
-      viewType === 'app'
-        ? t('builderSave.successBodyApp')
-        : t('builderSave.successBodyGraph')
-
-    showConfirmDialog({
-      key: SUCCESS_DIALOG_KEY,
-      headerProps: {
-        title: t('builderSave.successTitle'),
-        icon: 'icon-[lucide--circle-check-big] text-green-500'
-      },
-      props: { promptText, preserveNewlines: true },
-      footerProps:
-        viewType === 'graph'
-          ? {
-              cancelText: t('builderToolbar.viewApp'),
-              confirmText: t('linearMode.builder.exit'),
-              confirmVariant: 'secondary' as const,
-              onCancel: () => {
-                closeDialog(SUCCESS_DIALOG_KEY)
-                useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
-                setMode('app')
-              },
-              onConfirm: () => {
-                closeDialog(SUCCESS_DIALOG_KEY)
-                appModeStore.exitBuilder()
-              }
-            }
-          : {
-              cancelText: t('g.close'),
-              confirmText: t('builderToolbar.viewApp'),
-              confirmVariant: 'secondary' as const,
-              onCancel: () => closeDialog(SUCCESS_DIALOG_KEY),
-              onConfirm: () => {
-                closeDialog(SUCCESS_DIALOG_KEY)
-                useTelemetry()?.trackEnterLinear({ source: 'app_builder' })
-                setMode('app')
-              }
-            }
-    })
-  }
-
-  return { save, saveAs, isSaving }
-}

src/components/button/MoreButton.vue

@@ -51,10 +51,7 @@
         }
       "
     >
-      <div
-        class="flex min-w-40 flex-col gap-2 p-2"
-        data-testid="more-menu-content"
-      >
+      <div class="flex min-w-40 flex-col gap-2 p-2">
         <slot :close="hide" />
       </div>
     </Popover>