[cloud/1.43] Backport #12038: keep Reka overlays above PrimeVue dialogs (#12045)

## Summary

Backport #12038 to `cloud/1.43` so the affected Reka dropdowns/menus
stay above their containing PrimeVue dialogs.

## Changes

- **What**: Cherry-picked squash merge commit `1ab9752af` from #12038
and preserved the parent-scoped FE-569 compatibility patch for the six
confirmed PrimeVue parent + Reka child overlay surfaces.
- **What**: Kept the 1.43-era component paths where they differ from
`main`; notably `UploadModelConfirmation.vue` still imports
`@/components/input/SingleSelect.vue` on `cloud/1.43`.
- **What**: Resolved the `cloud/1.43`-specific conflict in
`UploadModelConfirmation.vue` by preserving the branch-local select
import and adding only the PrimeVue overlay child style helper usage.
- **Breaking**: None. New style props are optional and this remains a
temporary PrimeVue to Reka migration bridge.
- **Dependencies**: None.

## Review Focus

- Manual QA is needed before merge. I verified code-level compatibility,
but did not manually exercise the stable branch UI.
- Please confirm the same six entry points from #12038 on `cloud/1.43`:
Workflow Template filters, Manager dialog header controls, Asset Browser
filter bar, Asset Browser model info panel, Upload Model confirmation
model type select, and Settings > Keybinding controls.
- Please keep this as a narrow backport of #12038; this should not
expand into a broader overlay/z-index refactor.

## Validation

- `pnpm install --frozen-lockfile`
- `pnpm format -- $(git diff --name-only --diff-filter=ACM)`
- `pnpm exec vitest run src/composables/usePopoverSizing.test.ts`
- `pnpm typecheck`
- `pnpm lint` passed with existing unrelated warnings only
- `pnpm knip`
- Commit hook ran normally: lint-staged `stylelint`, `oxfmt`, `oxlint`,
`eslint --fix`, and `pnpm typecheck`
- Push hook ran normally: `pnpm knip`

Backport of #12038.
Linear: FE-569

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12045-cloud-1-43-Backport-12038-keep-Reka-overlays-above-PrimeVue-dialogs-3596d73d36508111bb1ccb411ddfe006)
by [Unito](https://www.unito.io)

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

@@ -64,15 +64,17 @@ jobs:
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
-        uses: actions/download-artifact@v7
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          run-id: ${{ github.event.workflow_run.id }}
-          pattern: playwright-report-*
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: playwright-report-.*
+          name_is_regexp: true
           path: reports
+          if_no_artifact_found: warn
 
       - name: Handle Test Completion
-        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && hashFiles('reports/**') != ''
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

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

@@ -7,7 +7,6 @@ on:
     paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
   workflow_dispatch:
 
 concurrency:
@@ -15,7 +14,26 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+    permissions:
+      pull-requests: read
+    outputs:
+      should_run: ${{ steps.filter.outputs.should_run }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: filter
+        with:
+          filters: |
+            should_run:
+              - '!(**.md)'
+
   setup:
+    needs: changes
+    if: github.event_name != 'pull_request' || needs.changes.outputs.should_run == 'true'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -153,9 +171,9 @@ jobs:
 
   # Merge sharded test reports (no container needed - only runs CLI)
   merge-reports:
-    needs: [playwright-tests-chromium-sharded]
+    needs: [changes, playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() }}
+    if: ${{ !cancelled() && (github.event_name != 'pull_request' || needs.changes.outputs.should_run == 'true') }}
     steps:
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
@@ -190,8 +208,9 @@ jobs:
 
   # Post starting comment for non-forked PRs
   comment-on-pr-start:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && needs.changes.outputs.should_run == 'true'
     permissions:
       pull-requests: write
     steps:
@@ -210,9 +229,9 @@ jobs:
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
-    needs: [playwright-tests, merge-reports]
+    needs: [changes, playwright-tests, merge-reports]
     runs-on: ubuntu-latest
-    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    if: always() && github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && needs.changes.outputs.should_run == 'true'
     permissions:
       pull-requests: write
       contents: read
@@ -237,4 +256,24 @@ jobs:
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
             "completed"
+
+  e2e-status:
+    if: always()
+    needs: [changes, playwright-tests-chromium-sharded, playwright-tests]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Determine e2e outcome
+        run: |
+          if [[ "${{ needs.changes.outputs.should_run }}" != "true" && "${{ github.event_name }}" == "pull_request" ]]; then
+            echo "E2E tests skipped (no relevant changes)"
+            exit 0
+          fi
+          if [[ "${{ needs.playwright-tests-chromium-sharded.result }}" == "success" && "${{ needs.playwright-tests.result }}" == "success" ]]; then
+            echo "All E2E tests passed"
+            exit 0
+          fi
+          echo "E2E tests failed or were cancelled"
+          echo "  chromium-sharded: ${{ needs.playwright-tests-chromium-sharded.result }}"
+          echo "  playwright-tests: ${{ needs.playwright-tests.result }}"
+          exit 1
   #### END Deployment and commenting (non-forked PRs only)

.github/workflows/ci-vercel-website-preview.yaml

@@ -0,0 +1,90 @@
+---
+name: 'CI: Vercel Website Preview'
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'packages/tailwind-utils/**'
+  push:
+    branches: [main]
+    paths:
+      - 'apps/website/**'
+      - 'packages/design-system/**'
+      - 'packages/tailwind-utils/**'
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_WEBSITE_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_WEBSITE_PROJECT_ID }}
+
+jobs:
+  deploy-preview:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel environment information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_WEBSITE_TOKEN }}
+
+      - name: Build project artifacts
+        run: vercel build --token=${{ secrets.VERCEL_WEBSITE_TOKEN }}
+
+      - name: Deploy project artifacts to Vercel
+        id: deploy
+        run: |
+          URL=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_WEBSITE_TOKEN }})
+          echo "url=$URL" >> "$GITHUB_OUTPUT"
+
+      - name: Add deployment URL to summary
+        run: echo "**Preview:** ${{ steps.deploy.outputs.url }}" >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Save PR metadata
+        run: |
+          mkdir -p temp/vercel-preview
+          echo "${{ steps.deploy.outputs.url }}" > temp/vercel-preview/url.txt
+
+      - name: Upload preview metadata
+        uses: actions/upload-artifact@v6
+        with:
+          name: vercel-preview
+          path: temp/vercel-preview
+
+  deploy-production:
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Pull Vercel environment information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_WEBSITE_TOKEN }}
+
+      - name: Build project artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_WEBSITE_TOKEN }}
+
+      - name: Deploy project artifacts to Vercel
+        id: deploy
+        run: |
+          URL=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_WEBSITE_TOKEN }})
+          echo "url=$URL" >> "$GITHUB_OUTPUT"
+
+      - name: Add deployment URL to summary
+        run: echo "**Production:** ${{ steps.deploy.outputs.url }}" >> "$GITHUB_STEP_SUMMARY"

.github/workflows/pr-vercel-website-preview.yaml

@@ -0,0 +1,74 @@
+---
+name: 'PR: Vercel Website Preview'
+
+on:
+  workflow_run:
+    workflows: ['CI: Vercel Website Preview']
+    types:
+      - completed
+
+permissions:
+  contents: read
+  pull-requests: write
+  actions: read
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    if: >
+      github.repository == 'Comfy-Org/ComfyUI_frontend' &&
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Download preview metadata
+        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
+        with:
+          name: vercel-preview
+          run_id: ${{ github.event.workflow_run.id }}
+          path: temp/vercel-preview
+
+      - name: Resolve PR number from workflow_run context
+        id: pr-meta
+        uses: actions/github-script@v8
+        with:
+          script: |
+            let pr = context.payload.workflow_run.pull_requests?.[0];
+            if (!pr) {
+              const { data: prs } = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                commit_sha: context.payload.workflow_run.head_sha,
+              });
+              pr = prs.find(p => p.state === 'open');
+            }
+
+            if (!pr) {
+              core.info('No open PR found for this workflow run — skipping.');
+              core.setOutput('skip', 'true');
+              return;
+            }
+
+            core.setOutput('skip', 'false');
+            core.setOutput('number', String(pr.number));
+
+      - name: Read preview URL
+        if: steps.pr-meta.outputs.skip != 'true'
+        id: meta
+        run: |
+          echo "url=$(cat temp/vercel-preview/url.txt)" >> "$GITHUB_OUTPUT"
+
+      - name: Write report
+        if: steps.pr-meta.outputs.skip != 'true'
+        run: |
+          echo "**Website Preview:** ${{ steps.meta.outputs.url }}" > preview-report.md
+
+      - name: Post PR comment
+        if: steps.pr-meta.outputs.skip != 'true'
+        uses: ./.github/actions/post-pr-report-comment
+        with:
+          pr-number: ${{ steps.pr-meta.outputs.number }}
+          report-file: ./preview-report.md
+          comment-marker: '<!-- VERCEL_WEBSITE_PREVIEW -->'
+          token: ${{ secrets.GITHUB_TOKEN }}

.oxlintrc.json

@@ -64,6 +64,7 @@
         ]
       }
     ],
+    "no-unsafe-optional-chaining": "error",
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
@@ -104,8 +105,7 @@
         "allowInterfaces": "always"
       }
     ],
-    "vue/no-import-compiler-macros": "error",
-    "vue/no-dupe-keys": "error"
+    "vue/no-import-compiler-macros": "error"
   },
   "overrides": [
     {

AGENTS.md

@@ -318,6 +318,9 @@ 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
 

apps/desktop-ui/src/assets/css/style.css

@@ -20,15 +20,15 @@
 }
 
 .p-button-danger {
-  background-color: var(--color-coral-red-600);
+  background-color: var(--color-coral-700);
 }
 
 .p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
+  background-color: var(--color-coral-600);
 }
 
 .p-button-danger:active {
-  background-color: var(--color-coral-red-400);
+  background-color: var(--color-coral-500);
 }
 
 .task-div .p-card {

apps/website/vercel.json

@@ -4,6 +4,9 @@
   "outputDirectory": "apps/website/dist",
   "installCommand": "pnpm install --frozen-lockfile",
   "framework": null,
+  "github": {
+    "enabled": false
+  },
   "redirects": [
     {
       "source": "/pricing",

browser_tests/assets/missing/missing_media_bypassed.json

@@ -0,0 +1,34 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 200],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["nonexistent_test_image_12345.png", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/missing_media_multiple.json

@@ -5,7 +5,7 @@
     {
       "id": 10,
       "type": "LoadImage",
-      "pos": [50, 50],
+      "pos": [50, 200],
       "size": [315, 314],
       "flags": {},
       "order": 0,
@@ -31,7 +31,7 @@
     {
       "id": 11,
       "type": "LoadImage",
-      "pos": [450, 50],
+      "pos": [450, 200],
       "size": [315, 314],
       "flags": {},
       "order": 1,

browser_tests/assets/missing/missing_media_single.json

@@ -5,7 +5,7 @@
     {
       "id": 10,
       "type": "LoadImage",
-      "pos": [50, 50],
+      "pos": [50, 200],
       "size": [315, 314],
       "flags": {},
       "order": 0,

browser_tests/assets/missing/missing_models.json

@@ -1,7 +1,27 @@
 {
-  "last_node_id": 0,
+  "last_node_id": 1,
   "last_link_id": 0,
-  "nodes": [],
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [256, 256],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
   "links": [],
   "groups": [],
   "config": {},
@@ -15,7 +35,7 @@
     {
       "name": "fake_model.safetensors",
       "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "text_encoders"
+      "directory": "checkpoints"
     }
   ],
   "version": 0.4

browser_tests/assets/missing/missing_models_bypassed.json

@@ -0,0 +1,42 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [256, 256],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/missing_models_distinct.json

@@ -0,0 +1,66 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model_a.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [500, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["fake_model_b.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model_a.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    },
+    {
+      "name": "fake_model_b.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/missing_models_from_node_properties.json

@@ -34,7 +34,7 @@
           {
             "name": "fake_model.safetensors",
             "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-            "directory": "text_encoders"
+            "directory": "checkpoints"
           }
         ]
       },

browser_tests/assets/missing/missing_models_in_bypassed_subgraph.json

@@ -0,0 +1,141 @@
+{
+  "id": "test-missing-models-in-bypassed-subgraph",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [100, 100],
+      "size": [400, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-with-missing-model",
+      "pos": [450, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 4,
+      "inputs": [{ "name": "model", "type": "MODEL", "link": null }],
+      "outputs": [{ "name": "MODEL", "type": "MODEL", "links": null }],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "input1-id",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "output1-id",
+            "name": "MODEL",
+            "type": "MODEL",
+            "linkIds": [2],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": [2] },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "MODEL"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/missing_models_in_subgraph.json

@@ -0,0 +1,141 @@
+{
+  "id": "test-missing-models-in-subgraph",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [100, 100],
+      "size": [270, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [{ "name": "LATENT", "type": "LATENT", "links": [] }],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-with-missing-model",
+      "pos": [450, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [{ "name": "model", "type": "MODEL", "link": null }],
+      "outputs": [{ "name": "MODEL", "type": "MODEL", "links": null }],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-missing-model",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Missing Model",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "input1-id",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [1],
+            "pos": { "0": 150, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "output1-id",
+            "name": "MODEL",
+            "type": "MODEL",
+            "linkIds": [2],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "CheckpointLoaderSimple",
+            "pos": [250, 180],
+            "size": [315, 98],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              { "name": "MODEL", "type": "MODEL", "links": [2] },
+              { "name": "CLIP", "type": "CLIP", "links": null },
+              { "name": "VAE", "type": "VAE", "links": null }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": ["fake_model.safetensors"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "MODEL"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "fake_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/missing_models_with_nodes.json

@@ -78,7 +78,7 @@
     {
       "name": "fake_model.safetensors",
       "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "text_encoders"
+      "directory": "checkpoints"
     }
   ],
   "version": 0.4

browser_tests/assets/selection/subgraph-with-regular-node.json

@@ -0,0 +1,116 @@
+{
+  "id": "selection-bbox-test",
+  "revision": 0,
+  "last_node_id": 3,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
+      "pos": [300, 200],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [1]
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "EmptyLatentImage",
+      "pos": [800, 200],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "latent",
+          "type": "LATENT",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    }
+  ],
+  "links": [[1, 2, 0, 3, 0, "LATENT"]],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 0,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Test Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [],
+            "pos": { "0": 200, "1": 220 }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [],
+            "pos": { "0": 520, "1": 220 }
+          }
+        ],
+        "widgets": [],
+        "nodes": [],
+        "groups": [],
+        "links": [],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-multi-instance-promoted-text-values.json

@@ -0,0 +1,284 @@
+{
+  "id": "2f54e2f0-6db4-4bdf-84a8-9c3ea3ec0123",
+  "revision": 0,
+  "last_node_id": 13,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [120, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["Alpha\n"]
+    },
+    {
+      "id": 12,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [420, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["Beta\n"]
+    },
+    {
+      "id": 13,
+      "type": "422723e8-4bf6-438c-823f-881ca81acead",
+      "pos": [720, 180],
+      "size": [210, 168],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        { "name": "clip", "type": "CLIP", "link": null },
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["Gamma\n"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "422723e8-4bf6-438c-823f-881ca81acead",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 15,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [481.59912109375, 379.13336181640625, 120, 160]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1121.59912109375, 379.13336181640625, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "0f07c10e-5705-4764-9b24-b69606c6dbcc",
+            "name": "text",
+            "type": "STRING",
+            "linkIds": [10],
+            "pos": { "0": 581.59912109375, "1": 399.13336181640625 }
+          },
+          {
+            "id": "214a5060-24dd-4299-ab78-8027dc5b9c59",
+            "name": "clip",
+            "type": "CLIP",
+            "linkIds": [11],
+            "pos": { "0": 581.59912109375, "1": 419.13336181640625 }
+          },
+          {
+            "id": "8ab94c5d-e7df-433c-9177-482a32340552",
+            "name": "model",
+            "type": "MODEL",
+            "linkIds": [12],
+            "pos": { "0": 581.59912109375, "1": 439.13336181640625 }
+          },
+          {
+            "id": "8a4cd719-8c67-473b-9b44-ac0582d02641",
+            "name": "positive",
+            "type": "CONDITIONING",
+            "linkIds": [13],
+            "pos": { "0": 581.59912109375, "1": 459.13336181640625 }
+          },
+          {
+            "id": "a78d6b3a-ad40-4300-b0a5-2cdbdb8dc135",
+            "name": "negative",
+            "type": "CONDITIONING",
+            "linkIds": [14],
+            "pos": { "0": 581.59912109375, "1": 479.13336181640625 }
+          },
+          {
+            "id": "4c7abe0c-902d-49ef-a5b0-cbf02b50b693",
+            "name": "latent_image",
+            "type": "LATENT",
+            "linkIds": [15],
+            "pos": { "0": 581.59912109375, "1": 499.13336181640625 }
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 10,
+            "type": "CLIPTextEncode",
+            "pos": [661.59912109375, 314.13336181640625],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "clip",
+                "name": "clip",
+                "type": "CLIP",
+                "link": 11
+              },
+              {
+                "localized_name": "text",
+                "name": "text",
+                "type": "STRING",
+                "widget": { "name": "text" },
+                "link": 10
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "CONDITIONING",
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 11,
+            "type": "KSampler",
+            "pos": [674.1234741210938, 570.5839233398438],
+            "size": [270, 262],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "model",
+                "name": "model",
+                "type": "MODEL",
+                "link": 12
+              },
+              {
+                "localized_name": "positive",
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": 13
+              },
+              {
+                "localized_name": "negative",
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": 14
+              },
+              {
+                "localized_name": "latent_image",
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 10,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "CLIP"
+          },
+          {
+            "id": 12,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "MODEL"
+          },
+          {
+            "id": 13,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 11,
+            "target_slot": 1,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 4,
+            "target_id": 11,
+            "target_slot": 2,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 5,
+            "target_id": 11,
+            "target_slot": 3,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.24.1"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-link-and-proxied-primitive.json

@@ -0,0 +1,179 @@
+{
+  "id": "5c4a1450-26b8-4b34-b5ea-e3465273441e",
+  "revision": 0,
+  "last_node_id": 4,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "16aadaf6-aa66-4041-843e-589a6572a3ac",
+      "pos": [602, 409],
+      "size": [225, 144],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          ["1", "value"],
+          ["4", "value"]
+        ]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "16aadaf6-aa66-4041-843e-589a6572a3ac",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 4,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [349, 383, 128, 68]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [867, 383, 128, 48]
+        },
+        "inputs": [
+          {
+            "id": "50fd1af4-4f20-434f-9828-6971210be4e9",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [1],
+            "pos": [453, 407]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "PrimitiveString",
+            "pos": [537, 368],
+            "size": [270, 108],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveString"
+            },
+            "widgets_values": [""]
+          },
+          {
+            "id": 3,
+            "type": "PrimitiveInt",
+            "pos": [534.9899497487436, 515.4924623115581],
+            "size": [270, 104],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "INT",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "INT",
+                "name": "INT",
+                "type": "INT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "PrimitiveInt"
+            },
+            "widgets_values": [0, "randomize"]
+          },
+          {
+            "id": 4,
+            "type": "PrimitiveNode",
+            "pos": [258.4381232333541, 549.1608040200999],
+            "size": [225, 104],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "INT",
+                "type": "INT",
+                "widget": {
+                  "name": "value"
+                },
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Run widget replace on values": false
+            },
+            "widgets_values": [0, "randomize"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "INT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.44.17"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/components/SidebarTab.ts

@@ -154,12 +154,17 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
 }
 
 export class WorkflowsSidebarTab extends SidebarTab {
+  public readonly root: Locator
+  public readonly activeWorkflowLabel: Locator
+  public readonly searchInput: Locator
+
   constructor(public override readonly page: Page) {
     super(page, 'workflows')
-  }
-
-  get root() {
-    return this.page.getByTestId(TestIds.sidebar.workflows)
+    this.root = page.getByTestId(TestIds.sidebar.workflows)
+    this.activeWorkflowLabel = this.root.locator(
+      '.comfyui-workflows-open .p-tree-node-selected .node-label'
+    )
+    this.searchInput = this.root.getByRole('combobox').first()
   }
 
   async getOpenedWorkflowNames() {

browser_tests/fixtures/components/TemplatesDialog.ts

@@ -2,9 +2,13 @@ import type { Locator, Page } from '@playwright/test'
 
 export class TemplatesDialog {
   public readonly root: Locator
+  public readonly modelFilter: Locator
+  public readonly resultsCount: Locator
 
   constructor(public readonly page: Page) {
     this.root = page.getByRole('dialog')
+    this.modelFilter = this.root.getByRole('button', { name: /Model Filter/ })
+    this.resultsCount = this.root.getByText(/Showing.*of.*templates/i)
   }
 
   filterByHeading(name: string): Locator {
@@ -16,4 +20,10 @@ export class TemplatesDialog {
   getCombobox(name: RegExp | string): Locator {
     return this.root.getByRole('combobox', { name })
   }
+
+  async selectModelOption(name: string): Promise<void> {
+    await this.modelFilter.click()
+    await this.page.getByRole('option', { name }).click()
+    await this.page.keyboard.press('Escape')
+  }
 }

browser_tests/fixtures/data/templateFixtures.ts

@@ -0,0 +1,28 @@
+import type {
+  TemplateInfo,
+  WorkflowTemplates
+} from '@/platform/workflow/templates/types/template'
+
+export function makeTemplate(
+  overrides: Partial<TemplateInfo> & Pick<TemplateInfo, 'name'>
+): TemplateInfo {
+  return {
+    description: overrides.name,
+    mediaType: 'image',
+    mediaSubtype: 'webp',
+    ...overrides
+  }
+}
+
+export function mockTemplateIndex(
+  templates: TemplateInfo[]
+): WorkflowTemplates[] {
+  return [
+    {
+      moduleName: 'default',
+      title: 'Test Templates',
+      type: 'image',
+      templates
+    }
+  ]
+}

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -1,7 +1,10 @@
 import type { Locator } from '@playwright/test'
 
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type {
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 import type { Position, Size } from '@e2e/fixtures/types'
@@ -114,6 +117,27 @@ export class NodeOperationsHelper {
     }
   }
 
+  async getSerializedGraph(): Promise<ComfyWorkflowJSON> {
+    return this.page.evaluate(
+      () => window.app!.graph.serialize() as ComfyWorkflowJSON
+    )
+  }
+
+  async loadGraph(data: ComfyWorkflowJSON): Promise<void> {
+    await this.page.evaluate(
+      (d) => window.app!.loadGraphData(d, true, true, null),
+      data
+    )
+  }
+
+  async repositionNodes(
+    positions: Record<string, [number, number]>
+  ): Promise<void> {
+    const data = await this.getSerializedGraph()
+    applyNodePositions(data, positions)
+    await this.loadGraph(data)
+  }
+
   async resizeNode(
     nodePos: Position,
     nodeSize: Size,
@@ -188,3 +212,13 @@ export class NodeOperationsHelper {
     await this.comfyPage.nextFrame()
   }
 }
+
+function applyNodePositions(
+  data: ComfyWorkflowJSON,
+  positions: Record<string, [number, number]>
+): void {
+  for (const node of data.nodes) {
+    const pos = positions[String(node.id)]
+    if (pos) node.pos = pos
+  }
+}

browser_tests/fixtures/helpers/boundsUtils.ts

@@ -0,0 +1,95 @@
+import type { Page } from '@playwright/test'
+
+import { SELECTION_BOUNDS_PADDING } from '@/base/common/selectionBounds'
+import type { CanvasRect } from '@/base/common/selectionBounds'
+
+export type { CanvasRect }
+
+export interface MeasureResult {
+  selectionBounds: CanvasRect | null
+  nodeVisualBounds: Record<string, CanvasRect>
+}
+
+export async function measureSelectionBounds(
+  page: Page,
+  nodeIds: string[]
+): Promise<MeasureResult> {
+  return page.evaluate(
+    ({ ids, padding }) => {
+      const canvas = window.app!.canvas
+      const ds = canvas.ds
+
+      const selectedItems = canvas.selectedItems
+      let minX = Infinity
+      let minY = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const item of selectedItems) {
+        const rect = item.boundingRect
+        minX = Math.min(minX, rect[0])
+        minY = Math.min(minY, rect[1])
+        maxX = Math.max(maxX, rect[0] + rect[2])
+        maxY = Math.max(maxY, rect[1] + rect[3])
+      }
+      const selectionBounds =
+        selectedItems.size > 0
+          ? {
+              x: minX - padding,
+              y: minY - padding,
+              w: maxX - minX + 2 * padding,
+              h: maxY - minY + 2 * padding
+            }
+          : null
+
+      const canvasEl = canvas.canvas as HTMLCanvasElement
+      const canvasRect = canvasEl.getBoundingClientRect()
+      const nodeVisualBounds: Record<
+        string,
+        { x: number; y: number; w: number; h: number }
+      > = {}
+
+      for (const id of ids) {
+        const nodeEl = document.querySelector(
+          `[data-node-id="${id}"]`
+        ) as HTMLElement | null
+        const isLegacyCanvasNodeWithoutVueDom = !nodeEl
+
+        if (isLegacyCanvasNodeWithoutVueDom) {
+          const node = window.app!.graph._nodes.find(
+            (n: { id: number | string }) => String(n.id) === id
+          )
+          if (!node) {
+            throw new Error(`Node ${id} not found in graph`)
+          }
+          const rect = node.boundingRect
+          nodeVisualBounds[id] = {
+            x: rect[0],
+            y: rect[1],
+            w: rect[2],
+            h: rect[3]
+          }
+          continue
+        }
+
+        const domRect = nodeEl.getBoundingClientRect()
+        const footerEls = nodeEl.querySelectorAll(
+          '[data-testid="subgraph-enter-button"], [data-testid="node-footer"]'
+        )
+        let bottom = domRect.bottom
+        for (const footerEl of footerEls) {
+          bottom = Math.max(bottom, footerEl.getBoundingClientRect().bottom)
+        }
+
+        nodeVisualBounds[id] = {
+          x: (domRect.left - canvasRect.left) / ds.scale - ds.offset[0],
+          y: (domRect.top - canvasRect.top) / ds.scale - ds.offset[1],
+          w: domRect.width / ds.scale,
+          h: (bottom - domRect.top) / ds.scale
+        }
+      }
+
+      return { selectionBounds, nodeVisualBounds }
+    },
+    { ids: nodeIds, padding: SELECTION_BOUNDS_PADDING }
+  ) as Promise<MeasureResult>
+}

browser_tests/fixtures/selectors.ts

@@ -55,6 +55,9 @@ export const TestIds = {
     missingModelCopyName: 'missing-model-copy-name',
     missingModelCopyUrl: 'missing-model-copy-url',
     missingModelDownload: 'missing-model-download',
+    missingModelActions: 'missing-model-actions',
+    missingModelDownloadAll: 'missing-model-download-all',
+    missingModelRefresh: 'missing-model-refresh',
     missingModelImportUnsupported: 'missing-model-import-unsupported',
     missingMediaGroup: 'error-group-missing-media',
     missingMediaRow: 'missing-media-row',
@@ -79,7 +82,8 @@ export const TestIds = {
     bookmarksSection: 'node-library-bookmarks-section'
   },
   propertiesPanel: {
-    root: 'properties-panel'
+    root: 'properties-panel',
+    errorsTab: 'panel-tab-errors'
   },
   subgraphEditor: {
     toggle: 'subgraph-editor-toggle',

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -5,6 +5,7 @@ import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSche
 import { ManageGroupNode } from '@e2e/helpers/manageGroupNode'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { Position, Size } from '@e2e/fixtures/types'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 
 export const getMiddlePoint = (pos1: Position, pos2: Position) => {
   return {
@@ -332,6 +333,22 @@ export class NodeReference {
   async isCollapsed() {
     return !!(await this.getFlags()).collapsed
   }
+  /**
+   * Toggle the node's collapsed state by simulating the same user interaction
+   * the runtime uses: DOM collapse button click in Vue mode, canvas icon click
+   * in legacy mode. Mode is detected by the presence of a Vue-rendered DOM
+   * element with `data-node-id`.
+   */
+  async toggleCollapse() {
+    const vueLocator = this.comfyPage.page.locator(
+      `[data-node-id="${this.id}"]`
+    )
+    if ((await vueLocator.count()) > 0) {
+      await new VueNodeFixture(vueLocator).toggleCollapse()
+      return
+    }
+    await this.click('collapse')
+  }
   async isBypassed() {
     return (await this.getProperty<number | null | undefined>('mode')) === 4
   }

browser_tests/tests/cloud-asset-default.spec.ts

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test'
+
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import {
+  STABLE_CHECKPOINT,
+  STABLE_CHECKPOINT_2
+} from '@e2e/fixtures/data/assetFixtures'
+
+function makeAssetsResponse(assets: Asset[]): ListAssetsResponse {
+  return { assets, total: assets.length, has_more: false }
+}
+
+const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT, STABLE_CHECKPOINT_2]
+
+// Stub /api/assets before the app loads. The local ComfyUI backend has no
+// /api/assets endpoint (returns 503), which poisons the assets store on
+// first load. Narrow pattern avoids intercepting static /assets/*.js bundles.
+//
+// TODO: Consider moving this stub into ComfyPage fixture for all @cloud tests.
+const test = comfyPageFixture.extend<{ stubCloudAssets: void }>({
+  stubCloudAssets: [
+    async ({ page }, use) => {
+      const pattern = '**/api/assets?*'
+      await page.route(pattern, (route) =>
+        route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(makeAssetsResponse(CLOUD_ASSETS))
+        })
+      )
+      await use()
+      await page.unroute(pattern)
+    },
+    { auto: true }
+  ]
+})
+
+test.describe('Asset-supported node default value', { tag: '@cloud' }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.nodeOps.clearGraph()
+  })
+
+  test('should use first cloud asset when server default is not in assets', async ({
+    comfyPage
+  }) => {
+    // The default workflow contains a CheckpointLoaderSimple node whose
+    // server default (from object_info) is a local file not in cloud assets.
+    // Wait for the existing node's asset widget to mount, confirming the
+    // assets store has been populated from the stub before adding a new node.
+    await expect
+      .poll(
+        () =>
+          comfyPage.page.evaluate(() => {
+            const node = window.app!.graph.nodes.find(
+              (n: { type: string }) => n.type === 'CheckpointLoaderSimple'
+            )
+            return node?.widgets?.find(
+              (w: { name: string }) => w.name === 'ckpt_name'
+            )?.type
+          }),
+        { timeout: 10_000 }
+      )
+      .toBe('asset')
+
+    // Add a new CheckpointLoaderSimple — should use first cloud asset,
+    // not the server's object_info default.
+    const widgetValue = await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('CheckpointLoaderSimple')
+      window.app!.graph.add(node!)
+      const widget = node!.widgets?.find(
+        (w: { name: string }) => w.name === 'ckpt_name'
+      )
+      return String(widget?.value ?? '')
+    })
+
+    // Production resolves via getAssetFilename (user_metadata.filename →
+    // metadata.filename → asset.name). Test fixtures have no metadata
+    // filename, so asset.name is the resolved value.
+    expect(widgetValue).toBe(CLOUD_ASSETS[0].name)
+  })
+})

browser_tests/tests/dialogs/managerDialog.spec.ts

@@ -0,0 +1,431 @@
+import { expect } from '@playwright/test'
+
+import type { AlgoliaNodePack } from '@/types/algoliaTypes'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import type { components as RegistryComponents } from '@comfyorg/registry-types'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+
+type InstalledPacksResponse =
+  ManagerComponents['schemas']['InstalledPacksResponse']
+type RegistryNodePack = RegistryComponents['schemas']['Node']
+
+interface AlgoliaSearchResult {
+  hits: Partial<AlgoliaNodePack>[]
+  nbHits: number
+  page: number
+  nbPages: number
+  hitsPerPage: number
+}
+
+interface AlgoliaSearchResponse {
+  results: AlgoliaSearchResult[]
+}
+
+const MOCK_PACK_A: RegistryNodePack = {
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  downloads: 5000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '1.0.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-a',
+  tags: ['image', 'processing']
+}
+
+const MOCK_PACK_B: RegistryNodePack = {
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  downloads: 3000,
+  status: 'NodeStatusActive',
+  publisher: { id: 'another-publisher', name: 'Another Publisher' },
+  latest_version: { version: '2.1.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-b',
+  tags: ['video', 'generation']
+}
+
+const MOCK_PACK_C: RegistryNodePack = {
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  downloads: 100,
+  status: 'NodeStatusActive',
+  publisher: { id: 'test-publisher', name: 'Test Publisher' },
+  latest_version: { version: '0.5.0', status: 'NodeVersionStatusActive' },
+  repository: 'https://github.com/test/pack-c'
+}
+
+const MOCK_INSTALLED_PACKS: InstalledPacksResponse = {
+  'test-pack-a': {
+    ver: '1.0.0',
+    cnr_id: 'test-pack-a',
+    enabled: true
+  },
+  'test-pack-c': {
+    ver: '0.5.0',
+    cnr_id: 'test-pack-c',
+    enabled: false
+  }
+}
+
+const MOCK_HIT_A: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-a',
+  id: 'test-pack-a',
+  name: 'Test Pack A',
+  description: 'A test custom node pack',
+  total_install: 5000,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '1.0.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-a',
+  comfy_nodes: ['TestNodeA1', 'TestNodeA2'],
+  create_time: '2024-01-01T00:00:00Z',
+  update_time: '2024-06-01T00:00:00Z',
+  license: 'MIT',
+  tags: ['image', 'processing']
+}
+
+const MOCK_HIT_B: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-b',
+  id: 'test-pack-b',
+  name: 'Test Pack B',
+  description: 'Another test custom node pack for testing search',
+  total_install: 3000,
+  status: 'NodeStatusActive',
+  publisher_id: 'another-publisher',
+  latest_version: '2.1.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-b',
+  comfy_nodes: ['TestNodeB1'],
+  create_time: '2024-02-01T00:00:00Z',
+  update_time: '2024-07-01T00:00:00Z',
+  license: 'Apache-2.0',
+  tags: ['video', 'generation']
+}
+
+const MOCK_HIT_C: Partial<AlgoliaNodePack> = {
+  objectID: 'test-pack-c',
+  id: 'test-pack-c',
+  name: 'Test Pack C',
+  description: 'Third test pack',
+  total_install: 100,
+  status: 'NodeStatusActive',
+  publisher_id: 'test-publisher',
+  latest_version: '0.5.0',
+  latest_version_status: 'NodeVersionStatusActive',
+  repository_url: 'https://github.com/test/pack-c',
+  comfy_nodes: ['TestNodeC1'],
+  create_time: '2024-03-01T00:00:00Z',
+  update_time: '2024-05-01T00:00:00Z',
+  license: 'MIT'
+}
+
+const MOCK_ALGOLIA_RESPONSE: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_A, MOCK_HIT_B, MOCK_HIT_C],
+      nbHits: 3,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_PACK_B_ONLY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [MOCK_HIT_B],
+      nbHits: 1,
+      page: 0,
+      nbPages: 1,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+const MOCK_ALGOLIA_EMPTY: AlgoliaSearchResponse = {
+  results: [
+    {
+      hits: [],
+      nbHits: 0,
+      page: 0,
+      nbPages: 0,
+      hitsPerPage: 20
+    }
+  ]
+}
+
+test.describe('ManagerDialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    const statsWithManager = {
+      ...mockSystemStats,
+      system: {
+        ...mockSystemStats.system,
+        argv: ['main.py', '--enable-manager']
+      }
+    }
+    await comfyPage.page.route('**/system_stats**', async (route) => {
+      await route.fulfill({ json: statsWithManager })
+    })
+
+    await comfyPage.page.route(
+      '**/v2/customnode/installed**',
+      async (route) => {
+        await route.fulfill({ json: MOCK_INSTALLED_PACKS })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/status**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            history: {},
+            running_queue: [],
+            pending_queue: [],
+            installed_packs: {}
+          }
+        })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/manager/queue/history**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_RESPONSE })
+    })
+
+    // Mock Comfy Registry API (fallback when Algolia credentials are unavailable)
+    const registryListResponse = {
+      total: 3,
+      nodes: [MOCK_PACK_A, MOCK_PACK_B, MOCK_PACK_C],
+      page: 1,
+      limit: 64,
+      totalPages: 1
+    }
+
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      (url) => url.hostname === 'api.comfy.org' && url.pathname === '/nodes',
+      async (route) => {
+        await route.fulfill({ json: registryListResponse })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/getmappings**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.page.route(
+      '**/v2/customnode/import_fail_info**',
+      async (route) => {
+        await route.fulfill({ json: {} })
+      }
+    )
+
+    await comfyPage.setup()
+
+    // Seed manager-ready server feature flags AFTER setup so the WebSocket
+    // feature_flags payload can't overwrite them. mockServerFeatures (on
+    // /api/features) does not populate the serverFeatureFlags ref; direct
+    // reactive-ref mutation is the only reliable approach.
+    // See shareWorkflowDialog.spec.ts:34-48 for the canonical pattern.
+    await comfyPage.page.evaluate(() => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        extension: {
+          manager: {
+            supports_v4: true,
+            supports_csrf_post: true
+          }
+        }
+      }
+    })
+  })
+
+  async function openManagerDialog(comfyPage: ComfyPage) {
+    await comfyPage.command.executeCommand('Comfy.OpenManagerDialog')
+  }
+
+  test('Opens the manager dialog via command', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Displays pack cards from search results', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack C')).toBeVisible()
+  })
+
+  test('Search filters displayed packs', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_PACK_B_ONLY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 1,
+            nodes: [MOCK_PACK_B],
+            page: 1,
+            limit: 64,
+            totalPages: 1
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('Test Pack B')
+
+    await expect(dialog.getByText('Test Pack B')).toBeVisible()
+    await expect(dialog.getByText('Test Pack A')).toBeHidden()
+  })
+
+  test('Clicking a pack card opens the info panel', async ({ comfyPage }) => {
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/test-pack-a',
+      async (route) => {
+        await route.fulfill({ json: MOCK_PACK_A })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByText('Test Pack A').first().click()
+
+    await expect(dialog.getByText('Test Publisher').first()).toBeVisible()
+  })
+
+  test('Left side panel navigation tabs exist', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await expect(nav.getByText('All Extensions')).toBeVisible()
+    await expect(nav.getByText('Not Installed')).toBeVisible()
+    await expect(nav.getByText('All Installed')).toBeVisible()
+    await expect(nav.getByText('Updates Available')).toBeVisible()
+  })
+
+  test('Switching tabs changes the content view', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const nav = dialog.locator('nav')
+    await nav.getByText('All Installed').click()
+
+    await expect(dialog.getByText('Test Pack A')).toBeVisible()
+  })
+
+  test('Closes via Escape key', async ({ comfyPage }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog).toBeHidden()
+  })
+
+  test('Empty search shows no results message', async ({ comfyPage }) => {
+    await comfyPage.page.route('**/*.algolia.net/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route('**/*.algolianet.com/**', async (route) => {
+      await route.fulfill({ json: MOCK_ALGOLIA_EMPTY })
+    })
+    await comfyPage.page.route(
+      '**/api.comfy.org/nodes/search**',
+      async (route) => {
+        await route.fulfill({
+          json: {
+            total: 0,
+            nodes: [],
+            page: 1,
+            limit: 64,
+            totalPages: 0
+          }
+        })
+      }
+    )
+
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const searchInput = dialog.getByPlaceholder(/search/i)
+    await searchInput.fill('nonexistent-pack-xyz-999')
+
+    await expect(
+      dialog.getByText(/no results found|try a different search/i).first()
+    ).toBeVisible()
+  })
+
+  test('Search mode can be switched between packs and nodes', async ({
+    comfyPage
+  }) => {
+    await openManagerDialog(comfyPage)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const modeSelector = dialog.getByText('Node Pack').first()
+    await expect(modeSelector).toBeVisible()
+
+    await modeSelector.click()
+    const nodesOption = comfyPage.page.getByRole('option', { name: 'Nodes' })
+    await expect(nodesOption).toBeVisible()
+    await nodesOption.click()
+  })
+})

browser_tests/tests/dialogs/settingsDialog.spec.ts

@@ -131,6 +131,38 @@ test.describe('Settings dialog', { tag: '@ui' }, () => {
     expect(switched).toBe(true)
   })
 
+  test('Boolean setting persists after page reload', async ({ comfyPage }) => {
+    const settingId = 'Comfy.Node.MiddleClickRerouteNode'
+    const initialValue = await comfyPage.settings.getSetting<boolean>(settingId)
+
+    try {
+      await comfyPage.settings.setSetting(settingId, !initialValue)
+
+      await expect
+        .poll(() => comfyPage.settings.getSetting<boolean>(settingId))
+        .toBe(!initialValue)
+
+      await comfyPage.page.reload({ waitUntil: 'domcontentloaded' })
+      await comfyPage.page.waitForFunction(
+        () => window.app && window.app.extensionManager
+      )
+
+      await expect
+        .poll(() => comfyPage.settings.getSetting<boolean>(settingId))
+        .toBe(!initialValue)
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(
+            () => window.LiteGraph!.middle_click_slot_add_default_node
+          )
+        )
+        .toBe(!initialValue)
+    } finally {
+      await comfyPage.settings.setSetting(settingId, initialValue)
+    }
+  })
+
   test('Dropdown setting can be changed and persists', async ({
     comfyPage
   }) => {

browser_tests/tests/errorOverlay.spec.ts

@@ -5,6 +5,7 @@ import {
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { cleanupFakeModel } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 test.describe('Error overlay', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -47,11 +48,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     test('Should display "Show missing models" button for missing model errors', async ({
       comfyPage
     }) => {
-      const cleanupOk = await comfyPage.page.evaluate(async (url: string) => {
-        const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-        return response.ok
-      }, comfyPage.url)
-      expect(cleanupOk).toBeTruthy()
+      await cleanupFakeModel(comfyPage)
 
       await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
@@ -95,7 +92,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await errorOverlay
         .getByTestId(TestIds.dialogs.errorOverlayDismiss)
         .click()
-      await expect(errorOverlay).not.toBeVisible()
+      await expect(errorOverlay).toBeHidden()
 
       await comfyPage.canvas.click()
       await comfyPage.nextFrame()
@@ -107,10 +104,37 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await comfyPage.nextFrame()
 
       await comfyPage.keyboard.undo()
-      await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+      await expect(errorOverlay).toBeHidden()
 
       await comfyPage.keyboard.redo()
-      await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
+      await expect(errorOverlay).toBeHidden()
+    })
+
+    test('Does not resurface error overlay when switching back to workflow with missing nodes', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      const errorOverlay = getOverlay(comfyPage.page)
+      await expect(errorOverlay).toBeVisible()
+
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.menu.workflowsTab.open()
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+
+      await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
+
+      await expect(errorOverlay).toBeHidden()
     })
   })
 
@@ -151,6 +175,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
+      await expect(overlay).toBeHidden()
       await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
     })
 
@@ -162,7 +187,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
 
-      await expect(overlay).not.toBeVisible()
+      await expect(overlay).toBeHidden()
     })
 
     test('"Dismiss" closes overlay without opening panel', async ({
@@ -175,10 +200,8 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
 
-      await expect(overlay).not.toBeVisible()
-      await expect(
-        comfyPage.page.getByTestId('properties-panel')
-      ).not.toBeVisible()
+      await expect(overlay).toBeHidden()
+      await expect(comfyPage.page.getByTestId('properties-panel')).toBeHidden()
     })
 
     test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
@@ -189,7 +212,37 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
 
       await overlay.getByRole('button', { name: /close/i }).click()
 
-      await expect(overlay).not.toBeVisible()
+      await expect(overlay).toBeHidden()
+    })
+  })
+
+  test.describe('Count independence from node selection', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('missing model count stays constant when a node is selected', async ({
+      comfyPage
+    }) => {
+      // Regression: ErrorOverlay previously read the selection-filtered
+      // missingModelGroups from useErrorGroups, so selecting one of two
+      // missing-model nodes would shrink the overlay label from
+      // "2 required models are missing" to "1". The overlay must show
+      // the workflow total regardless of canvas selection.
+      await comfyPage.workflow.loadWorkflow('missing/missing_models_distinct')
+
+      const overlay = getOverlay(comfyPage.page)
+      await expect(overlay).toBeVisible()
+      await expect(overlay).toContainText(/2 required models are missing/i)
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+
+      await expect(overlay).toContainText(/2 required models are missing/i)
     })
   })
 })

browser_tests/tests/fileInputReselection.spec.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('File input same-file reselection', () => {
+  test('should allow uploading the same file twice via LoadImage node', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('nodes/load_image_with_ksampler')
+
+    const loadImageNodes =
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    const loadImageNode = loadImageNodes[0]
+    const uploadWidget = await loadImageNode.getWidget(1)
+    const fileWidget = await loadImageNode.getWidget(0)
+
+    // First upload
+    const firstUpload = comfyPage.page.waitForResponse(
+      (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+      { timeout: 10_000 }
+    )
+    const firstChooser = comfyPage.page.waitForEvent('filechooser')
+    await uploadWidget.click()
+    await (
+      await firstChooser
+    ).setFiles(comfyPage.assetPath('test_upload_image.png'))
+    await firstUpload
+
+    await expect
+      .poll(() => fileWidget.getValue(), {
+        message: 'First upload should set widget value'
+      })
+      .toContain('test_upload_image')
+
+    // Second upload of the SAME file — before the fix, the hidden input
+    // retained the previous value and onchange did not fire.
+    const secondUpload = comfyPage.page.waitForResponse(
+      (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+      { timeout: 10_000 }
+    )
+    const secondChooser = comfyPage.page.waitForEvent('filechooser')
+    await uploadWidget.click()
+    await (
+      await secondChooser
+    ).setFiles(comfyPage.assetPath('test_upload_image.png'))
+    await secondUpload
+
+    await expect
+      .poll(() => fileWidget.getValue(), {
+        message: 'Second upload of the same file should still set widget value'
+      })
+      .toContain('test_upload_image')
+  })
+})

browser_tests/tests/focusMode.spec.ts

@@ -62,4 +62,30 @@ test.describe('Focus Mode', { tag: '@ui' }, () => {
     await comfyPage.setFocusMode(true)
     await expect(comfyPage.menu.sideToolbar).not.toBeVisible()
   })
+
+  test('Focus mode toggle preserves properties panel width', async ({
+    comfyPage
+  }) => {
+    // Open the properties panel
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
+
+    // Record the initial panel width
+    const initialBox = await comfyPage.menu.propertiesPanel.root.boundingBox()
+    expect(initialBox).not.toBeNull()
+    const initialWidth = initialBox!.width
+
+    // Toggle focus mode on then off
+    await comfyPage.setFocusMode(true)
+    await comfyPage.setFocusMode(false)
+
+    // Properties panel should be visible again with the same width
+    await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
+    await expect
+      .poll(async () => {
+        const box = await comfyPage.menu.propertiesPanel.root.boundingBox()
+        return box ? Math.abs(box.width - initialWidth) : Infinity
+      })
+      .toBeLessThan(2)
+  })
 })

browser_tests/tests/load3d/load3d.spec.ts

@@ -95,3 +95,33 @@ test.describe('Load3D', () => {
     }
   )
 })
+
+test.describe('Load3D initialization failure', () => {
+  test('Surfaces a toast when the THREE.WebGLRenderer cannot be created', async ({
+    comfyPage
+  }) => {
+    // Force `new THREE.WebGLRenderer(...)` inside Load3d to throw by making
+    // WebGL getContext() calls return null.
+    await comfyPage.page.evaluate(() => {
+      const proto = HTMLCanvasElement.prototype as {
+        getContext: (
+          this: HTMLCanvasElement,
+          type: string,
+          options?: unknown
+        ) => unknown
+      }
+      const original = proto.getContext
+      proto.getContext = function (type, options) {
+        if (type === 'webgl' || type === 'webgl2') return null
+        return original.call(this, type, options)
+      }
+    })
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+
+    await expect(
+      comfyPage.toast.visibleToasts.filter({
+        hasText: 'Failed to initialize 3D Viewer'
+      })
+    ).not.toHaveCount(0)
+  })
+})

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -0,0 +1,105 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Node context menu viewport overflow (#10824)',
+  { tag: '@ui' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // Keep the viewport well below the menu content height so overflow is guaranteed.
+      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+      await comfyPage.nextFrame()
+    })
+
+    async function openMoreOptions(comfyPage: ComfyPage) {
+      const ksamplerNodes =
+        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
+      if (ksamplerNodes.length === 0) {
+        throw new Error('No KSampler nodes found')
+      }
+
+      // Drag the KSampler toward the lower-left so the menu has limited space below it.
+      const nodePos = await ksamplerNodes[0].getPosition()
+      const viewportSize = comfyPage.page.viewportSize()!
+      const centerX = viewportSize.width / 3
+      const centerY = viewportSize.height * 0.75
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: nodePos.x, y: nodePos.y },
+        { x: centerX, y: centerY }
+      )
+      await comfyPage.nextFrame()
+
+      await ksamplerNodes[0].click('title')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
+        timeout: 5000
+      })
+
+      const moreOptionsBtn = comfyPage.page.locator(
+        '[data-testid="more-options-button"]'
+      )
+      await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
+      await moreOptionsBtn.click()
+      await comfyPage.nextFrame()
+
+      const menu = comfyPage.page.locator('.p-contextmenu')
+      await expect(menu).toBeVisible({ timeout: 3000 })
+
+      // Wait for constrainMenuHeight (runs via requestAnimationFrame in onMenuShow)
+      await comfyPage.nextFrame()
+
+      return menu
+    }
+
+    test('last menu item "Remove" is reachable via scroll', async ({
+      comfyPage
+    }) => {
+      const menu = await openMoreOptions(comfyPage)
+      const rootList = menu.locator(':scope > ul')
+
+      await expect
+        .poll(
+          () => rootList.evaluate((el) => el.scrollHeight > el.clientHeight),
+          {
+            message:
+              'Menu should overflow vertically so this test exercises the viewport clamp',
+            timeout: 3000
+          }
+        )
+        .toBe(true)
+
+      // "Remove" is the last item in the More Options menu.
+      // It must become reachable by scrolling the bounded menu list.
+      const removeItem = menu.getByText('Remove', { exact: true })
+      const didScroll = await rootList.evaluate((el) => {
+        const previousScrollTop = el.scrollTop
+        el.scrollTo({ top: el.scrollHeight })
+        return el.scrollTop > previousScrollTop
+      })
+      expect(didScroll).toBe(true)
+      await expect(removeItem).toBeVisible()
+    })
+
+    test('last menu item "Remove" is clickable and removes the node', async ({
+      comfyPage
+    }) => {
+      const menu = await openMoreOptions(comfyPage)
+
+      const removeItem = menu.getByText('Remove', { exact: true })
+      await removeItem.scrollIntoViewIfNeeded()
+      await removeItem.click()
+      await comfyPage.nextFrame()
+
+      // The node should be removed from the graph
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 3000 })
+        .toBe(0)
+    })
+  }
+)

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -1,162 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '@e2e/fixtures/ComfyPage'
-
-type ComfyPage = Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
-
-async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
-  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', enabled)
-  if (enabled) {
-    await comfyPage.vueNodes.waitForNodes()
-  }
-}
-
-async function addGhostAtCenter(comfyPage: ComfyPage) {
-  await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-  await comfyPage.nextFrame()
-
-  const viewport = comfyPage.page.viewportSize()!
-  const centerX = Math.round(viewport.width / 2)
-  const centerY = Math.round(viewport.height / 2)
-
-  await comfyPage.page.mouse.move(centerX, centerY)
-  await comfyPage.nextFrame()
-
-  const nodeId = await comfyPage.page.evaluate(
-    ([clientX, clientY]) => {
-      const node = window.LiteGraph!.createNode('VAEDecode')!
-      const event = new MouseEvent('click', { clientX, clientY })
-      window.app!.graph.add(node, { ghost: true, dragEvent: event })
-      return node.id
-    },
-    [centerX, centerY] as const
-  )
-  await comfyPage.nextFrame()
-
-  return { nodeId, centerX, centerY }
-}
-
-function getNodeById(comfyPage: ComfyPage, nodeId: number | string) {
-  return comfyPage.page.evaluate((id) => {
-    const node = window.app!.graph.getNodeById(id)
-    if (!node) return null
-    return { ghost: !!node.flags.ghost }
-  }, nodeId)
-}
-
-for (const mode of ['litegraph', 'vue'] as const) {
-  test.describe(`Ghost node placement (${mode} mode)`, () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await setVueMode(comfyPage, mode === 'vue')
-    })
-
-    test('positions ghost node at cursor', async ({ comfyPage }) => {
-      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
-      await comfyPage.nextFrame()
-
-      const viewport = comfyPage.page.viewportSize()!
-      const centerX = Math.round(viewport.width / 2)
-      const centerY = Math.round(viewport.height / 2)
-
-      await comfyPage.page.mouse.move(centerX, centerY)
-      await comfyPage.nextFrame()
-
-      const result = await comfyPage.page.evaluate(
-        ([clientX, clientY]) => {
-          const node = window.LiteGraph!.createNode('VAEDecode')!
-          const event = new MouseEvent('click', { clientX, clientY })
-          window.app!.graph.add(node, { ghost: true, dragEvent: event })
-
-          const canvas = window.app!.canvas
-          const rect = canvas.canvas.getBoundingClientRect()
-          const cursorCanvasX =
-            (clientX - rect.left) / canvas.ds.scale - canvas.ds.offset[0]
-          const cursorCanvasY =
-            (clientY - rect.top) / canvas.ds.scale - canvas.ds.offset[1]
-
-          return {
-            diffX: node.pos[0] + node.size[0] / 2 - cursorCanvasX,
-            diffY: node.pos[1] - 10 - cursorCanvasY
-          }
-        },
-        [centerX, centerY] as const
-      )
-      await comfyPage.nextFrame()
-
-      expect(Math.abs(result.diffX)).toBeLessThan(5)
-      expect(Math.abs(result.diffY)).toBeLessThan(5)
-    })
-
-    test('left-click confirms ghost placement', async ({ comfyPage }) => {
-      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
-
-      const before = await getNodeById(comfyPage, nodeId)
-      expect(before).not.toBeNull()
-      expect(before!.ghost).toBe(true)
-
-      await comfyPage.page.mouse.click(centerX, centerY)
-      await comfyPage.nextFrame()
-
-      const after = await getNodeById(comfyPage, nodeId)
-      expect(after).not.toBeNull()
-      expect(after!.ghost).toBe(false)
-    })
-
-    test('Escape cancels ghost placement', async ({ comfyPage }) => {
-      const { nodeId } = await addGhostAtCenter(comfyPage)
-
-      const before = await getNodeById(comfyPage, nodeId)
-      expect(before).not.toBeNull()
-      expect(before!.ghost).toBe(true)
-
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      const after = await getNodeById(comfyPage, nodeId)
-      expect(after).toBeNull()
-    })
-
-    test('Delete cancels ghost placement', async ({ comfyPage }) => {
-      const { nodeId } = await addGhostAtCenter(comfyPage)
-
-      const before = await getNodeById(comfyPage, nodeId)
-      expect(before).not.toBeNull()
-      expect(before!.ghost).toBe(true)
-
-      await comfyPage.page.keyboard.press('Delete')
-      await comfyPage.nextFrame()
-
-      const after = await getNodeById(comfyPage, nodeId)
-      expect(after).toBeNull()
-    })
-
-    test('Backspace cancels ghost placement', async ({ comfyPage }) => {
-      const { nodeId } = await addGhostAtCenter(comfyPage)
-
-      const before = await getNodeById(comfyPage, nodeId)
-      expect(before).not.toBeNull()
-      expect(before!.ghost).toBe(true)
-
-      await comfyPage.page.keyboard.press('Backspace')
-      await comfyPage.nextFrame()
-
-      const after = await getNodeById(comfyPage, nodeId)
-      expect(after).toBeNull()
-    })
-
-    test('right-click cancels ghost placement', async ({ comfyPage }) => {
-      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
-
-      const before = await getNodeById(comfyPage, nodeId)
-      expect(before).not.toBeNull()
-      expect(before!.ghost).toBe(true)
-
-      await comfyPage.page.mouse.click(centerX, centerY, { button: 'right' })
-      await comfyPage.nextFrame()
-
-      const after = await getNodeById(comfyPage, nodeId)
-      expect(after).toBeNull()
-    })
-  })
-}

browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts

@@ -2,8 +2,9 @@ import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
 
-export async function openErrorsTabViaSeeErrors(
+export async function loadWorkflowAndOpenErrorsTab(
   comfyPage: ComfyPage,
   workflow: string
 ) {
@@ -15,3 +16,30 @@ export async function openErrorsTabViaSeeErrors(
   await errorOverlay.getByTestId(TestIds.dialogs.errorOverlaySeeErrors).click()
   await expect(errorOverlay).not.toBeVisible()
 }
+
+export async function openErrorsTab(comfyPage: ComfyPage) {
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+
+  const errorsTab = comfyPage.page.getByTestId(
+    TestIds.propertiesPanel.errorsTab
+  )
+  await expect(errorsTab).toBeVisible()
+  await errorsTab.click()
+}
+
+/**
+ * Remove the fake model file from the backend so it is detected as missing.
+ * Fixture URLs (e.g. http://localhost:8188/...) are not actually downloaded
+ * during tests — they only serve as metadata for the missing model UI.
+ */
+export async function cleanupFakeModel(comfyPage: ComfyPage) {
+  await expect
+    .poll(() =>
+      comfyPage.page.evaluate(async (url: string) => {
+        const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
+        return response.ok
+      }, comfyPage.url)
+    )
+    .toBeTruthy()
+}

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -3,7 +3,7 @@ import { expect } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { openErrorsTabViaSeeErrors } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 async function uploadFileViaDropzone(comfyPage: ComfyPage) {
   const dropzone = comfyPage.page.getByTestId(
@@ -47,7 +47,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
   test.describe('Detection', () => {
     test('Shows missing media group in errors tab', async ({ comfyPage }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
 
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
@@ -57,7 +60,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Shows correct number of missing media rows', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(
+      await loadWorkflowAndOpenErrorsTab(
         comfyPage,
         'missing/missing_media_multiple'
       )
@@ -68,7 +71,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Shows upload dropzone and library select for each missing item', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
 
       await expect(getDropzone(comfyPage)).toBeVisible()
       await expect(
@@ -81,7 +87,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Upload via file picker shows status card then allows confirm', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
       await uploadFileViaDropzone(comfyPage)
 
       await expect(getStatusCard(comfyPage)).toBeVisible()
@@ -95,7 +104,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Selecting from library shows status card then allows confirm', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
 
       const librarySelect = comfyPage.page.getByTestId(
         TestIds.dialogs.missingMediaLibrarySelect
@@ -121,7 +133,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Cancelling pending selection returns to upload/library UI', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
       await uploadFileViaDropzone(comfyPage)
 
       await expect(getStatusCard(comfyPage)).toBeVisible()
@@ -140,7 +155,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Missing Inputs group disappears when all items are resolved', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
       await uploadFileViaDropzone(comfyPage)
       await confirmPendingSelection(comfyPage)
 
@@ -154,7 +172,10 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Locate button navigates canvas to the missing media node', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
 
       const offsetBefore = await comfyPage.page.evaluate(() => {
         const canvas = window['app']?.canvas

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -6,7 +6,10 @@ import {
   interceptClipboardWrite,
   getClipboardText
 } from '@e2e/helpers/clipboardSpy'
-import { openErrorsTabViaSeeErrors } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import {
+  cleanupFakeModel,
+  loadWorkflowAndOpenErrorsTab
+} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -15,17 +18,13 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
       'Comfy.RightSidePanel.ShowErrorsTab',
       true
     )
-    const cleanupOk = await comfyPage.page.evaluate(async (url: string) => {
-      const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-      return response.ok
-    }, comfyPage.url)
-    expect(cleanupOk).toBeTruthy()
+    await cleanupFakeModel(comfyPage)
   })
 
   test('Should show missing models group in errors tab', async ({
     comfyPage
   }) => {
-    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
@@ -35,7 +34,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test('Should display model name with referencing node count', async ({
     comfyPage
   }) => {
-    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
     const modelsGroup = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelsGroup
@@ -46,7 +45,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test('Should expand model row to show referencing nodes', async ({
     comfyPage
   }) => {
-    await openErrorsTabViaSeeErrors(
+    await loadWorkflowAndOpenErrorsTab(
       comfyPage,
       'missing/missing_models_with_nodes'
     )
@@ -54,7 +53,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     const locateButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelLocate
     )
-    await expect(locateButton.first()).not.toBeVisible()
+    await expect(locateButton.first()).toBeHidden()
 
     const expandButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelExpand
@@ -66,14 +65,14 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   })
 
   test('Should copy model name to clipboard', async ({ comfyPage }) => {
-    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
     await interceptClipboardWrite(comfyPage.page)
 
     const copyButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelCopyName
     )
     await expect(copyButton.first()).toBeVisible()
-    await copyButton.first().click()
+    await copyButton.first().dispatchEvent('click')
 
     const copiedText = await getClipboardText(comfyPage.page)
     expect(copiedText).toContain('fake_model.safetensors')
@@ -83,7 +82,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     test('Should show Copy URL button for non-asset models', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
       const copyUrlButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelCopyUrl
@@ -94,12 +93,65 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     test('Should show Download button for downloadable models', async ({
       comfyPage
     }) => {
-      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
       const downloadButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelDownload
       )
       await expect(downloadButton.first()).toBeVisible()
     })
+
+    test('Should render Download all and Refresh actions for one downloadable model', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingModelActions)
+      ).toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingModelDownloadAll)
+      ).toBeVisible()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingModelRefresh)
+      ).toBeVisible()
+    })
+
+    test('Should clear resolved missing model when Refresh is clicked', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+      await comfyPage.page.route(/\/object_info$/, async (route) => {
+        const response = await route.fetch()
+        const objectInfo = await response.json()
+        const ckptName =
+          objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
+        ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
+        await route.fulfill({ response, json: objectInfo })
+      })
+
+      const objectInfoResponse = comfyPage.page.waitForResponse((response) => {
+        const url = new URL(response.url())
+        return url.pathname.endsWith('/object_info') && response.ok()
+      })
+      const modelFoldersResponse = comfyPage.page.waitForResponse(
+        (response) => {
+          const url = new URL(response.url())
+          return url.pathname.endsWith('/experiment/models') && response.ok()
+        }
+      )
+      const refreshButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelRefresh
+      )
+
+      await Promise.all([
+        objectInfoResponse,
+        modelFoldersResponse,
+        refreshButton.click()
+      ])
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
+      ).toBeHidden()
+    })
   })
 })

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { openErrorsTabViaSeeErrors } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -14,7 +14,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   })
 
   test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
-    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_nodes')
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
@@ -22,7 +22,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   })
 
   test('Should show missing node packs group', async ({ comfyPage }) => {
-    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_nodes')
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
@@ -32,7 +32,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test('Should expand pack group to reveal node type names', async ({
     comfyPage
   }) => {
-    await openErrorsTabViaSeeErrors(
+    await loadWorkflowAndOpenErrorsTab(
       comfyPage,
       'missing/missing_nodes_in_subgraph'
     )
@@ -52,7 +52,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   })
 
   test('Should collapse expanded pack group', async ({ comfyPage }) => {
-    await openErrorsTabViaSeeErrors(
+    await loadWorkflowAndOpenErrorsTab(
       comfyPage,
       'missing/missing_nodes_in_subgraph'
     )
@@ -80,7 +80,7 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test('Locate node button is visible for expanded pack nodes', async ({
     comfyPage
   }) => {
-    await openErrorsTabViaSeeErrors(
+    await loadWorkflowAndOpenErrorsTab(
       comfyPage,
       'missing/missing_nodes_in_subgraph'
     )

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -0,0 +1,599 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  cleanupFakeModel,
+  openErrorsTab,
+  loadWorkflowAndOpenErrorsTab
+} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+
+test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test.describe('Missing nodes', () => {
+    test('Deleting a missing node removes its error from the errors tab', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      await expect(missingNodeGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.delete()
+
+      await expect(missingNodeGroup).toBeHidden()
+    })
+
+    test('Undo after bypass restores error without showing overlay', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(missingNodeGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingNodeGroup).toBeHidden()
+
+      await comfyPage.keyboard.undo()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await expect(errorOverlay).toBeHidden()
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      await comfyPage.keyboard.redo()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingNodeGroup).toBeHidden()
+    })
+  })
+
+  test.describe('Missing models', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('Loading a workflow with all nodes bypassed shows no errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_models_bypassed')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Bypassing a node hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Bypass/un-bypass cycle preserves Copy URL button on the restored row', async ({
+      comfyPage
+    }) => {
+      // Regression: on un-bypass, the realtime scan produced a fresh
+      // candidate without url/hash/directory — those fields were only
+      // attached by the full pipeline's enrichWithEmbeddedMetadata. The
+      // row's Copy URL button (v-if gated on representative.url) then
+      // disappeared. Per-node scan now enriches from node.properties.models
+      // which persists across mode toggles. Uses the `_from_node_properties`
+      // fixture because the enrichment source is per-node metadata, not
+      // the workflow-level `models[]` array (which the realtime scan
+      // path does not see).
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_models_from_node_properties'
+      )
+
+      const copyUrlButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelCopyUrl
+      )
+      await expect(copyUrlButton.first()).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(copyUrlButton.first()).toBeVisible()
+    })
+
+    test('Pasting a node with missing model increases referencing node count', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+      await expect(missingModelGroup).toContainText(
+        /fake_model\.safetensors\s*\(1\)/
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+
+      await comfyPage.canvas.click()
+      await expect(missingModelGroup).toContainText(
+        /fake_model\.safetensors\s*\(2\)/
+      )
+    })
+
+    test('Pasting a bypassed node does not add a new error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Deleting a node with missing model removes its error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.delete()
+
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Undo after bypass restores error without showing overlay', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(missingModelGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('1')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+
+      await comfyPage.keyboard.undo()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await expect(errorOverlay).toBeHidden()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+
+      await comfyPage.keyboard.redo()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Selecting a node filters errors tab to only that node', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_models_with_nodes'
+      )
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await expect(missingModelGroup).toContainText(/\(2\)/)
+
+      const node1 = await comfyPage.nodeOps.getNodeRefById('1')
+      await node1.click('title')
+      await expect(missingModelGroup).toContainText(/\(1\)/)
+
+      await comfyPage.canvas.click()
+      await expect(missingModelGroup).toContainText(/\(2\)/)
+    })
+  })
+
+  test.describe('Missing media', () => {
+    test('Loading a workflow with all nodes bypassed shows no errors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_bypassed')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Bypassing a node hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const missingMediaGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaGroup
+      )
+      await expect(missingMediaGroup).toBeVisible()
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingMediaGroup).toBeHidden()
+
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingMediaGroup).toBeVisible()
+    })
+
+    test('Pasting a bypassed node does not add a new error', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(
+        comfyPage,
+        'missing/missing_media_single'
+      )
+
+      const missingMediaGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaGroup
+      )
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => node.isBypassed()).toBeTruthy()
+      await expect(missingMediaGroup).toBeHidden()
+
+      await comfyPage.clipboard.copy()
+      await comfyPage.clipboard.paste()
+
+      await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
+      await expect(missingMediaGroup).toBeHidden()
+    })
+
+    test('Selecting a node filters errors tab to only that node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_media_multiple')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const mediaRows = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingMediaRow
+      )
+
+      await openErrorsTab(comfyPage)
+      await expect(mediaRows).toHaveCount(2)
+
+      const node = await comfyPage.nodeOps.getNodeRefById('10')
+      await node.click('title')
+      await expect(mediaRows).toHaveCount(1)
+
+      await comfyPage.canvas.click({ position: { x: 400, y: 600 } })
+      await expect(mediaRows).toHaveCount(2)
+    })
+  })
+
+  test.describe('Subgraph', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await cleanupFakeModel(comfyPage)
+    })
+
+    test('Bypassing a subgraph hides interior errors, un-bypassing restores them', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => subgraphNode.isBypassed()).toBeTruthy()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await expect.poll(() => subgraphNode.isBypassed()).toBeFalsy()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Deleting a node inside a subgraph removes its missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: before the execId fix, onNodeRemoved fell back to the
+      // interior node's local id (e.g. "1") when node.graph was already
+      // null, so the error keyed under "2:1" was never removed.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Select-all + Delete: interior node IDs may be reassigned during
+      // subgraph configure when they collide with root-graph IDs, so
+      // looking up by static id can fail.
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.page.keyboard.press('Delete')
+
+      await expect(missingModelGroup).toBeHidden()
+    })
+
+    test('Deleting a node inside a subgraph removes its missing node-type error', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      // Select-all + Delete: interior node IDs may be reassigned during
+      // subgraph configure when they collide with root-graph IDs, so
+      // looking up by static id can fail.
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.page.keyboard.press('Delete')
+
+      await expect(missingNodeGroup).toBeHidden()
+    })
+
+    test('Bypassing a node inside a subgraph hides its error, un-bypassing restores it', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingModelGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      await comfyPage.keyboard.selectAll()
+      await comfyPage.keyboard.bypass()
+      await openErrorsTab(comfyPage)
+      await expect(missingModelGroup).toBeVisible()
+    })
+
+    test('Loading a workflow with bypassed subgraph suppresses interior missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: the initial scan pipeline only checked each node's
+      // own mode, so interior nodes of a bypassed subgraph container
+      // surfaced errors even though the container was excluded from
+      // execution. The pipeline now post-filters candidates whose
+      // ancestor path is not fully active.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_bypassed_subgraph'
+      )
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeHidden()
+
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
+      ).toBeHidden()
+    })
+
+    test('Entering a bypassed subgraph does not resurface interior missing model error', async ({
+      comfyPage
+    }) => {
+      // Regression: useGraphNodeManager replays graph.onNodeAdded for
+      // each interior node on subgraph entry; without an ancestor-aware
+      // guard in scanSingleNodeErrors, that re-scan reintroduced the
+      // error that the initial pipeline had correctly suppressed.
+      await comfyPage.workflow.loadWorkflow(
+        'missing/missing_models_in_bypassed_subgraph'
+      )
+
+      const errorsTab = comfyPage.page.getByTestId(
+        TestIds.propertiesPanel.errorsTab
+      )
+      await comfyPage.actionbar.propertiesButton.click()
+      await expect(errorsTab).toBeHidden()
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      await expect(errorsTab).toBeHidden()
+    })
+  })
+
+  test.describe('Workflow switching', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+    })
+
+    test('Restores missing nodes in errors tab when switching back to workflow', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+      const errorOverlay = comfyPage.page.getByTestId(
+        TestIds.dialogs.errorOverlay
+      )
+      await expect(errorOverlay).toBeVisible()
+      await errorOverlay
+        .getByTestId(TestIds.dialogs.errorOverlayDismiss)
+        .click()
+
+      const missingNodeGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingNodePacksGroup
+      )
+
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+
+      await comfyPage.menu.workflowsTab.open()
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await expect(missingNodeGroup).toBeHidden()
+
+      await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
+      await openErrorsTab(comfyPage)
+      await expect(missingNodeGroup).toBeVisible()
+    })
+  })
+})

browser_tests/tests/selectionBoundingBox.spec.ts

@@ -0,0 +1,235 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { measureSelectionBounds } from '@e2e/fixtures/helpers/boundsUtils'
+import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+
+const SUBGRAPH_ID = '2'
+const REGULAR_ID = '3'
+const WORKFLOW = 'selection/subgraph-with-regular-node'
+
+type Layout = { ref: [number, number]; target: [number, number] }
+const LAYOUTS: Record<string, Layout> = {
+  'bottom-left': { ref: [200, 100], target: [150, 500] },
+  'bottom-right': { ref: [100, 100], target: [600, 500] }
+}
+
+type NodeType = 'subgraph' | 'regular'
+type NodeState = 'expanded' | 'collapsed'
+type Position = 'bottom-left' | 'bottom-right'
+
+function getTargetId(type: NodeType): string {
+  return type === 'subgraph' ? SUBGRAPH_ID : REGULAR_ID
+}
+
+function getRefId(type: NodeType): string {
+  return type === 'subgraph' ? REGULAR_ID : SUBGRAPH_ID
+}
+
+async function toggleBypass(comfyPage: ComfyPage, nodeRef: NodeReference) {
+  await nodeRef.click('title')
+  await comfyPage.keyboard.bypass()
+}
+
+async function assertSelectionEncompassesNodes(
+  page: Page,
+  comfyPage: ComfyPage,
+  nodeIds: string[]
+) {
+  await comfyPage.canvas.press('Control+a')
+  await expect
+    .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+    .toBe(2)
+  await comfyPage.nextFrame()
+
+  const result = await measureSelectionBounds(page, nodeIds)
+  expect(result.selectionBounds).not.toBeNull()
+
+  const sel = result.selectionBounds!
+  const selRight = sel.x + sel.w
+  const selBottom = sel.y + sel.h
+
+  for (const nodeId of nodeIds) {
+    const vis = result.nodeVisualBounds[nodeId]
+    expect(vis).toBeDefined()
+
+    expect(sel.x).toBeLessThanOrEqual(vis.x)
+    expect(selRight).toBeGreaterThanOrEqual(vis.x + vis.w)
+    expect(sel.y).toBeLessThanOrEqual(vis.y)
+    expect(selBottom).toBeGreaterThanOrEqual(vis.y + vis.h)
+  }
+}
+
+test.describe(
+  'Selection bounding box (Vue mode)',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    const vueCases: ReadonlyArray<{
+      type: NodeType
+      state: NodeState
+      pos: Position
+    }> = [
+      { type: 'subgraph', state: 'expanded', pos: 'bottom-left' },
+      { type: 'subgraph', state: 'expanded', pos: 'bottom-right' },
+      { type: 'subgraph', state: 'collapsed', pos: 'bottom-left' },
+      { type: 'subgraph', state: 'collapsed', pos: 'bottom-right' },
+      { type: 'regular', state: 'expanded', pos: 'bottom-left' },
+      { type: 'regular', state: 'expanded', pos: 'bottom-right' },
+      { type: 'regular', state: 'collapsed', pos: 'bottom-left' },
+      { type: 'regular', state: 'collapsed', pos: 'bottom-right' }
+    ]
+
+    for (const { type, state, pos } of vueCases) {
+      test(`${type} node (${state}) at ${pos}: selection bounds encompass node`, async ({
+        comfyPage
+      }) => {
+        const targetId = getTargetId(type)
+        const refId = getRefId(type)
+
+        await comfyPage.nodeOps.repositionNodes({
+          [refId]: LAYOUTS[pos].ref,
+          [targetId]: LAYOUTS[pos].target
+        })
+        await comfyPage.nextFrame()
+        await comfyPage.vueNodes.waitForNodes()
+        await comfyPage.vueNodes.getNodeLocator(targetId).waitFor()
+        await comfyPage.vueNodes.getNodeLocator(refId).waitFor()
+
+        if (state === 'collapsed') {
+          const nodeRef = await comfyPage.nodeOps.getNodeRefById(targetId)
+          await nodeRef.toggleCollapse()
+          await expect.poll(() => nodeRef.isCollapsed()).toBe(true)
+        }
+
+        await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+          refId,
+          targetId
+        ])
+      })
+    }
+  }
+)
+
+test.describe(
+  'Selection bounding box (Vue mode) — collapsed node bypass toggle',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    test('collapsed node narrows bounding box when bypass is removed', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.repositionNodes({
+        [SUBGRAPH_ID]: LAYOUTS['bottom-right'].ref,
+        [REGULAR_ID]: LAYOUTS['bottom-right'].target
+      })
+      await comfyPage.nextFrame()
+      await comfyPage.vueNodes.waitForNodes()
+
+      const nodeRef = await comfyPage.nodeOps.getNodeRefById(REGULAR_ID)
+      await toggleBypass(comfyPage, nodeRef)
+      await expect.poll(() => nodeRef.isBypassed()).toBe(true)
+      await nodeRef.toggleCollapse()
+      await expect.poll(() => nodeRef.isCollapsed()).toBe(true)
+
+      await toggleBypass(comfyPage, nodeRef)
+      await expect.poll(() => nodeRef.isBypassed()).toBe(false)
+      await comfyPage.nextFrame()
+
+      await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+        SUBGRAPH_ID,
+        REGULAR_ID
+      ])
+    })
+
+    test('collapsed node widens bounding box when bypass is added', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.repositionNodes({
+        [SUBGRAPH_ID]: LAYOUTS['bottom-right'].ref,
+        [REGULAR_ID]: LAYOUTS['bottom-right'].target
+      })
+      await comfyPage.nextFrame()
+      await comfyPage.vueNodes.waitForNodes()
+
+      const nodeRef = await comfyPage.nodeOps.getNodeRefById(REGULAR_ID)
+      await nodeRef.toggleCollapse()
+      await expect.poll(() => nodeRef.isCollapsed()).toBe(true)
+
+      await toggleBypass(comfyPage, nodeRef)
+      await expect.poll(() => nodeRef.isBypassed()).toBe(true)
+      await comfyPage.nextFrame()
+
+      await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+        SUBGRAPH_ID,
+        REGULAR_ID
+      ])
+    })
+  }
+)
+
+test.describe(
+  'Selection bounding box (legacy mode)',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    const legacyCases: ReadonlyArray<{ state: NodeState; pos: Position }> = [
+      { state: 'expanded', pos: 'bottom-left' },
+      { state: 'expanded', pos: 'bottom-right' },
+      { state: 'collapsed', pos: 'bottom-left' },
+      { state: 'collapsed', pos: 'bottom-right' }
+    ]
+
+    for (const { state, pos } of legacyCases) {
+      test(`legacy node (${state}) at ${pos}: selection bounds encompass node`, async ({
+        comfyPage
+      }) => {
+        await comfyPage.nodeOps.repositionNodes({
+          [SUBGRAPH_ID]: LAYOUTS[pos].ref,
+          [REGULAR_ID]: LAYOUTS[pos].target
+        })
+        await comfyPage.nextFrame()
+
+        if (state === 'collapsed') {
+          const nodeRef = await comfyPage.nodeOps.getNodeRefById(REGULAR_ID)
+          await nodeRef.toggleCollapse()
+          await expect.poll(() => nodeRef.isCollapsed()).toBe(true)
+        }
+
+        await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+          SUBGRAPH_ID,
+          REGULAR_ID
+        ])
+      })
+    }
+  }
+)

browser_tests/tests/sidebar/workflowSearch.spec.ts

@@ -17,14 +17,13 @@ test.describe('Workflow sidebar - search', () => {
       'alpha-workflow.json': 'default.json',
       'beta-workflow.json': 'default.json'
     })
+    await comfyPage.menu.workflowsTab.open()
   })
 
   test('Search filters saved workflows by name', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await tab.open()
 
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('alpha')
+    await tab.searchInput.fill('alpha')
 
     await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
     await expect(
@@ -34,15 +33,11 @@ test.describe('Workflow sidebar - search', () => {
 
   test('Clearing search restores all workflows', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await tab.open()
 
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('alpha')
-    await expect(
-      findWorkflow(comfyPage.page, 'beta-workflow')
-    ).not.toBeVisible()
+    await tab.searchInput.fill('alpha')
+    await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeHidden()
 
-    await searchInput.fill('')
+    await tab.searchInput.fill('')
 
     await expect(tab.getPersistedItem('alpha-workflow')).toBeVisible()
     await expect(tab.getPersistedItem('beta-workflow')).toBeVisible()
@@ -50,10 +45,8 @@ test.describe('Workflow sidebar - search', () => {
 
   test('Search with no matches shows empty results', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
-    await tab.open()
 
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('nonexistent_xyz')
+    await tab.searchInput.fill('nonexistent_xyz')
 
     await expect(
       findWorkflow(comfyPage.page, 'alpha-workflow')
@@ -62,4 +55,72 @@ test.describe('Workflow sidebar - search', () => {
       findWorkflow(comfyPage.page, 'beta-workflow')
     ).not.toBeVisible()
   })
+
+  test.describe('deletion', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.setupWorkflowsDirectory({
+        'alpha-workflow.json': 'default.json',
+        'beta-workflow.json': 'default.json',
+        'gamma-workflow.json': 'default.json'
+      })
+      await comfyPage.settings.setSetting('Comfy.Workflow.ConfirmDelete', false)
+      await comfyPage.menu.workflowsTab.open()
+    })
+
+    test('Deleting a workflow while search is active removes it from results', async ({
+      comfyPage
+    }) => {
+      const tab = comfyPage.menu.workflowsTab
+
+      await tab.searchInput.fill('alpha')
+      await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
+
+      await findWorkflow(comfyPage.page, 'alpha-workflow').click({
+        button: 'right'
+      })
+      await comfyPage.contextMenu.clickMenuItem('Delete')
+
+      await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeHidden()
+    })
+
+    test('Deleting during search does not affect other matched results', async ({
+      comfyPage
+    }) => {
+      const tab = comfyPage.menu.workflowsTab
+
+      await tab.searchInput.fill('workflow')
+
+      await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
+      await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeVisible()
+      await expect(findWorkflow(comfyPage.page, 'gamma-workflow')).toBeVisible()
+
+      await findWorkflow(comfyPage.page, 'alpha-workflow').click({
+        button: 'right'
+      })
+      await comfyPage.contextMenu.clickMenuItem('Delete')
+
+      await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeHidden()
+      await expect(findWorkflow(comfyPage.page, 'beta-workflow')).toBeVisible()
+      await expect(findWorkflow(comfyPage.page, 'gamma-workflow')).toBeVisible()
+    })
+
+    test('Clearing search after deleting during search shows correct workflows', async ({
+      comfyPage
+    }) => {
+      const tab = comfyPage.menu.workflowsTab
+
+      await tab.searchInput.fill('alpha')
+      await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible()
+
+      await findWorkflow(comfyPage.page, 'alpha-workflow').click({
+        button: 'right'
+      })
+      await comfyPage.contextMenu.clickMenuItem('Delete')
+
+      await tab.searchInput.fill('')
+      await expect(tab.getPersistedItem('beta-workflow')).toBeVisible()
+      await expect(tab.getPersistedItem('gamma-workflow')).toBeVisible()
+      await expect(tab.getPersistedItem('alpha-workflow')).toBeHidden()
+    })
+  })
 })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { openErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -232,7 +233,7 @@ test.describe('Workflows sidebar', () => {
       .toEqual('workflow1')
   })
 
-  test('Reports missing nodes warning again when switching back to workflow', async ({
+  test('Restores missing nodes errors silently when switching back to workflow', async ({
     comfyPage
   }) => {
     await comfyPage.settings.setSetting(
@@ -254,11 +255,17 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
 
-    // Switch back to the missing_nodes workflow — overlay should reappear
-    // so users can install missing node packs without a page reload
+    // Switch back to the missing_nodes workflow — overlay should NOT
+    // reappear (silent restore), but errors tab should have content
     await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
 
-    await expect(errorOverlay).toBeVisible()
+    await expect(errorOverlay).toBeHidden()
+
+    // Errors tab should still show missing nodes after silent restore
+    await openErrorsTab(comfyPage)
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodePacksGroup)
+    ).toBeVisible()
   })
 
   test('Can close saved-workflows from the open workflows section', async ({

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -560,6 +560,28 @@ test.describe(
           })
           .toBeLessThan(initialWidgetCount)
       })
+
+      test('Does not cleanup unconfigured Primitive', async ({ comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-link-and-proxied-primitive'
+        )
+        await expect
+          .poll(
+            () => getPromotedWidgetCount(comfyPage, '2'),
+            'Primitive widget is restored on load'
+          )
+          .toBe(2)
+
+        await comfyPage.page.evaluate(() => app!.canvas.setDirty(true))
+        const subgraphNode = await comfyPage.nodeOps.getFirstNodeRef()
+        const promotedPrimitive = await subgraphNode!.getWidget(1)
+        await expect
+          .poll(
+            () => promotedPrimitive.getValue(),
+            'Primitive widget is not in a disconnected state'
+          )
+          .toBe(0)
+      })
     })
   }
 )

browser_tests/tests/subgraph/subgraphSerialization.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { getPromotedWidgets } from '@e2e/helpers/promotedWidgets'
 
@@ -8,6 +9,31 @@ const LEGACY_PREFIXED_WORKFLOW =
   'subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets'
 
 test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
+  const getPromotedHostWidgetValues = async (
+    comfyPage: ComfyPage,
+    nodeIds: string[]
+  ) => {
+    return comfyPage.page.evaluate((ids) => {
+      const graph = window.app!.canvas.graph!
+
+      return ids.map((id) => {
+        const node = graph.getNodeById(id)
+        if (
+          !node ||
+          typeof node.isSubgraphNode !== 'function' ||
+          !node.isSubgraphNode()
+        ) {
+          return { id, values: [] as unknown[] }
+        }
+
+        return {
+          id,
+          values: (node.widgets ?? []).map((widget) => widget.value)
+        }
+      })
+    }, nodeIds)
+  }
+
   test('Promoted widget remains usable after serialize and reload', async ({
     comfyPage
   }) => {
@@ -83,5 +109,35 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
       await expect(textarea).toBeVisible()
       await expect(textarea).toBeDisabled()
     })
+
+    test('Multiple instances of the same subgraph keep distinct promoted widget values after load and reload', async ({
+      comfyPage
+    }) => {
+      const workflowName =
+        'subgraphs/subgraph-multi-instance-promoted-text-values'
+      const hostNodeIds = ['11', '12', '13']
+      const expectedValues = ['Alpha\n', 'Beta\n', 'Gamma\n']
+
+      await comfyPage.workflow.loadWorkflow(workflowName)
+      await comfyPage.nextFrame()
+
+      const initialValues = await getPromotedHostWidgetValues(
+        comfyPage,
+        hostNodeIds
+      )
+      expect(initialValues.map(({ values }) => values[0])).toEqual(
+        expectedValues
+      )
+
+      await comfyPage.subgraph.serializeAndReload()
+
+      const reloadedValues = await getPromotedHostWidgetValues(
+        comfyPage,
+        hostNodeIds
+      )
+      expect(reloadedValues.map(({ values }) => values[0])).toEqual(
+        expectedValues
+      )
+    })
   })
 })

browser_tests/tests/templateFilteringCount.spec.ts

@@ -0,0 +1,290 @@
+import { expect } from '@playwright/test'
+
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  makeTemplate,
+  mockTemplateIndex
+} from '@e2e/fixtures/data/templateFixtures'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const Cloud = TemplateIncludeOnDistributionEnum.Cloud
+const Desktop = TemplateIncludeOnDistributionEnum.Desktop
+const Local = TemplateIncludeOnDistributionEnum.Local
+
+test.describe(
+  'Template distribution filtering count',
+  { tag: '@cloud' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Templates.SelectedModels', [])
+      await comfyPage.settings.setSetting(
+        'Comfy.Templates.SelectedUseCases',
+        []
+      )
+      await comfyPage.settings.setSetting('Comfy.Templates.SelectedRunsOn', [])
+      await comfyPage.settings.setSetting('Comfy.Templates.SortBy', 'default')
+
+      await comfyPage.page.route('**/templates/**.webp', async (route) => {
+        await route.fulfill({
+          status: 200,
+          path: 'browser_tests/assets/example.webp',
+          headers: {
+            'Content-Type': 'image/webp',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+    })
+
+    test('displayed count matches visible cards when distribution filter excludes templates', async ({
+      comfyPage
+    }) => {
+      const templates: TemplateInfo[] = [
+        makeTemplate({
+          name: 'cloud-1',
+          title: 'Cloud One',
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'cloud-2',
+          title: 'Cloud Two',
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'desktop-hidden',
+          title: 'Desktop Hidden',
+          includeOnDistributions: [Desktop]
+        }),
+        makeTemplate({
+          name: 'universal',
+          title: 'Universal'
+        })
+      ]
+
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(mockTemplateIndex(templates)),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(3)
+
+      const desktopCard = comfyPage.templatesDialog.root.getByTestId(
+        TestIds.templates.workflowCard('desktop-hidden')
+      )
+      await expect(desktopCard).toHaveCount(0)
+    })
+
+    test('filtered count reflects distribution + model filter together', async ({
+      comfyPage
+    }) => {
+      const templates: TemplateInfo[] = [
+        makeTemplate({
+          name: 'wan-cloud-1',
+          title: 'Wan Cloud 1',
+          models: ['Wan 2.2'],
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'wan-cloud-2',
+          title: 'Wan Cloud 2',
+          models: ['Wan 2.2'],
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'wan-desktop',
+          title: 'Wan Desktop',
+          models: ['Wan 2.2'],
+          includeOnDistributions: [Desktop]
+        }),
+        makeTemplate({
+          name: 'flux-cloud',
+          title: 'Flux Cloud',
+          models: ['Flux'],
+          includeOnDistributions: [Cloud]
+        })
+      ]
+
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(mockTemplateIndex(templates)),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      await comfyPage.templatesDialog.selectModelOption('Wan 2.2')
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(2)
+
+      const wanDesktopCard = comfyPage.templatesDialog.root.getByTestId(
+        TestIds.templates.workflowCard('wan-desktop')
+      )
+      await expect(wanDesktopCard).toHaveCount(0)
+
+      await expect(comfyPage.templatesDialog.resultsCount).toHaveText(
+        /Showing 2 of 3 templates/i
+      )
+    })
+
+    test('desktop-only templates never leak into DOM on cloud distribution', async ({
+      comfyPage
+    }) => {
+      const templates: TemplateInfo[] = [
+        makeTemplate({
+          name: 'cloud-visible',
+          title: 'Cloud Visible',
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'desktop-leak-check',
+          title: 'Desktop Leak Check',
+          includeOnDistributions: [Desktop]
+        }),
+        makeTemplate({
+          name: 'local-leak-check',
+          title: 'Local Leak Check',
+          includeOnDistributions: [Local]
+        })
+      ]
+
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(mockTemplateIndex(templates)),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(1)
+
+      await expect(
+        comfyPage.templatesDialog.root.getByTestId(
+          TestIds.templates.workflowCard('cloud-visible')
+        )
+      ).toBeVisible()
+
+      await expect(
+        comfyPage.templatesDialog.root.getByTestId(
+          TestIds.templates.workflowCard('desktop-leak-check')
+        )
+      ).toHaveCount(0)
+
+      await expect(
+        comfyPage.templatesDialog.root.getByTestId(
+          TestIds.templates.workflowCard('local-leak-check')
+        )
+      ).toHaveCount(0)
+    })
+
+    test('templates without includeOnDistributions are visible on cloud', async ({
+      comfyPage
+    }) => {
+      const templates: TemplateInfo[] = [
+        makeTemplate({ name: 'unrestricted-1', title: 'Unrestricted 1' }),
+        makeTemplate({ name: 'unrestricted-2', title: 'Unrestricted 2' }),
+        makeTemplate({
+          name: 'cloud-only',
+          title: 'Cloud Only',
+          includeOnDistributions: [Cloud]
+        })
+      ]
+
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(mockTemplateIndex(templates)),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(3)
+
+      await expect(comfyPage.templatesDialog.resultsCount).toHaveText(
+        /Showing 3 of 3 templates/i
+      )
+    })
+
+    test('clear filters button resets to correct distribution-filtered total', async ({
+      comfyPage
+    }) => {
+      const templates: TemplateInfo[] = [
+        makeTemplate({
+          name: 'wan-cloud',
+          title: 'Wan Cloud',
+          models: ['Wan 2.2'],
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'flux-cloud',
+          title: 'Flux Cloud',
+          models: ['Flux'],
+          includeOnDistributions: [Cloud]
+        }),
+        makeTemplate({
+          name: 'wan-desktop',
+          title: 'Wan Desktop',
+          models: ['Wan 2.2'],
+          includeOnDistributions: [Desktop]
+        })
+      ]
+
+      await comfyPage.page.route('**/templates/index.json', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: JSON.stringify(mockTemplateIndex(templates)),
+          headers: {
+            'Content-Type': 'application/json',
+            'Cache-Control': 'no-store'
+          }
+        })
+      })
+
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      await comfyPage.templatesDialog.selectModelOption('Wan 2.2')
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(1)
+
+      const clearButton = comfyPage.templatesDialog.root.getByRole('button', {
+        name: /Clear Filters/i
+      })
+      await clearButton.click()
+
+      await expect(comfyPage.templates.allTemplateCards).toHaveCount(2)
+
+      await expect(comfyPage.templatesDialog.resultsCount).toHaveText(
+        /Showing 2 of 2 templates/i
+      )
+    })
+  }
+)

browser_tests/tests/vueNodes/widgets/advancedWidgets.spec.ts

@@ -2,6 +2,10 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+const SHOW_ADVANCED_INPUTS = 'Show advanced inputs'
+const HIDE_ADVANCED_INPUTS = 'Hide advanced inputs'
 
 test.describe('Advanced Widget Visibility', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -21,15 +25,11 @@ test.describe('Advanced Widget Visibility', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  function getNode(
-    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
-  ) {
+  function getNode(comfyPage: ComfyPage) {
     return comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
   }
 
-  function getWidgets(
-    comfyPage: Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
-  ) {
+  function getWidgets(comfyPage: ComfyPage) {
     return getNode(comfyPage).locator('.lg-node-widget')
   }
 
@@ -51,7 +51,7 @@ test.describe('Advanced Widget Visibility', () => {
     ).not.toBeVisible()
 
     // "Show advanced inputs" button should be present
-    await expect(node.getByText('Show advanced inputs')).toBeVisible()
+    await expect(node.getByText(SHOW_ADVANCED_INPUTS)).toBeVisible()
   })
 
   test('should show advanced widgets when per-node toggle is clicked', async ({
@@ -63,20 +63,41 @@ test.describe('Advanced Widget Visibility', () => {
     await expect(widgets).toHaveCount(2)
 
     // Click the toggle button to show advanced widgets
-    await node.getByText('Show advanced inputs').click()
+    await node.getByText(SHOW_ADVANCED_INPUTS).click()
 
     await expect(widgets).toHaveCount(4)
     await expect(node.getByLabel('max_shift', { exact: true })).toBeVisible()
     await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
 
     // Button text should change to "Hide advanced inputs"
-    await expect(node.getByText('Hide advanced inputs')).toBeVisible()
+    await expect(node.getByText(HIDE_ADVANCED_INPUTS)).toBeVisible()
 
     // Click again to hide
-    await node.getByText('Hide advanced inputs').click()
+    await node.getByText(HIDE_ADVANCED_INPUTS).click()
     await expect(widgets).toHaveCount(2)
   })
 
+  test('should hide advanced footer button while collapsed', async ({
+    comfyPage
+  }) => {
+    const node = getNode(comfyPage)
+    const showAdvancedButton = node.getByText(SHOW_ADVANCED_INPUTS)
+    const vueNode =
+      await comfyPage.vueNodes.getFixtureByTitle('ModelSamplingFlux')
+
+    await expect(showAdvancedButton).toBeVisible()
+
+    await vueNode.toggleCollapse()
+    await comfyPage.nextFrame()
+
+    await expect(showAdvancedButton).toBeHidden()
+
+    await vueNode.toggleCollapse()
+    await comfyPage.nextFrame()
+
+    await expect(showAdvancedButton).toBeVisible()
+  })
+
   test('should show advanced widgets when global setting is enabled', async ({
     comfyPage
   }) => {
@@ -97,6 +118,6 @@ test.describe('Advanced Widget Visibility', () => {
     await expect(node.getByLabel('base_shift', { exact: true })).toBeVisible()
 
     // The toggle button should not be shown when global setting is active
-    await expect(node.getByText('Show advanced inputs')).not.toBeVisible()
+    await expect(node.getByText(SHOW_ADVANCED_INPUTS)).toBeHidden()
   })
 })

knip.config.ts

@@ -1,6 +1,7 @@
 import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
+  treatConfigHintsAsErrors: true,
   workspaces: {
     '.': {
       entry: [
@@ -33,11 +34,9 @@ const config: KnipConfig = {
         'src/pages/**/*.astro',
         'src/layouts/**/*.astro',
         'src/components/**/*.vue',
-        'src/styles/global.css',
-        'astro.config.ts'
+        'src/styles/global.css'
       ],
-      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
-      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
+      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}']
     }
   },
   ignoreBinaries: ['python3'],
@@ -54,8 +53,6 @@ const config: KnipConfig = {
     // Auto generated API types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/ingest-types/src/zod.gen.ts',
-    // Used by stacked PR (feat/glsl-live-preview)
-    'src/renderer/glsl/useGLSLRenderer.ts',
     // Workflow files contain license names that knip misinterprets as binaries
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.15",
+  "version": "1.43.16",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -81,6 +81,7 @@
     "@tiptap/extension-table-row": "catalog:",
     "@tiptap/pm": "catalog:",
     "@tiptap/starter-kit": "catalog:",
+    "@vee-validate/zod": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@vueuse/router": "^14.2.0",
@@ -112,6 +113,7 @@
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "typegpu": "catalog:",
+    "vee-validate": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",

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

@@ -73,10 +73,6 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-coral-red-600: #973a40;
-  --color-coral-red-500: #c53f49;
-  --color-coral-red-400: #dd424e;
-
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 

pnpm-workspace.yaml

@@ -54,6 +54,7 @@ catalog:
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
+  '@vee-validate/zod': ^4.15.1
   '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
@@ -74,7 +75,7 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.1
-  eslint-plugin-oxlint: 1.55.0
+  eslint-plugin-oxlint: 1.59.0
   eslint-plugin-storybook: ^10.2.10
   eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.3.0
@@ -89,14 +90,14 @@ catalog:
   jsdom: ^27.4.0
   jsonata: ^2.1.0
   jsondiffpatch: ^0.7.3
-  knip: ^6.0.1
+  knip: ^6.3.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.6.1
-  oxfmt: ^0.40.0
-  oxlint: ^1.55.0
-  oxlint-tsgolint: ^0.17.0
+  oxfmt: ^0.44.0
+  oxlint: ^1.59.0
+  oxlint-tsgolint: ^0.20.0
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
@@ -118,6 +119,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
+  vee-validate: ^4.15.1
   vite: ^8.0.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2

scripts/coverage-slack-notify.ts

@@ -0,0 +1,233 @@
+import { existsSync, readFileSync } from 'node:fs'
+
+const TARGET = 80
+const MILESTONE_STEP = 5
+const MIN_DELTA = 0.05
+const BAR_WIDTH = 20
+
+interface CoverageData {
+  percentage: number
+  totalLines: number
+  coveredLines: number
+}
+
+interface SlackBlock {
+  type: 'section'
+  text: {
+    type: 'mrkdwn'
+    text: string
+  }
+}
+
+function parseLcovContent(content: string): CoverageData | null {
+  const perFile = new Map<string, { lf: number; lh: number }>()
+  let currentFile = ''
+
+  for (const line of content.split('\n')) {
+    if (line.startsWith('SF:')) {
+      currentFile = line.slice(3)
+    } else if (line.startsWith('LF:')) {
+      const n = parseInt(line.slice(3), 10) || 0
+      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
+      entry.lf = n
+      perFile.set(currentFile, entry)
+    } else if (line.startsWith('LH:')) {
+      const n = parseInt(line.slice(3), 10) || 0
+      const entry = perFile.get(currentFile) ?? { lf: 0, lh: 0 }
+      entry.lh = n
+      perFile.set(currentFile, entry)
+    }
+  }
+
+  let totalLines = 0
+  let coveredLines = 0
+  for (const { lf, lh } of perFile.values()) {
+    totalLines += lf
+    coveredLines += lh
+  }
+
+  if (totalLines === 0) return null
+
+  return {
+    percentage: (coveredLines / totalLines) * 100,
+    totalLines,
+    coveredLines
+  }
+}
+
+function parseLcov(filePath: string): CoverageData | null {
+  if (!existsSync(filePath)) return null
+  return parseLcovContent(readFileSync(filePath, 'utf-8'))
+}
+
+function progressBar(percentage: number): string {
+  const clamped = Math.max(0, Math.min(100, percentage))
+  const filled = Math.round((clamped / 100) * BAR_WIDTH)
+  const empty = BAR_WIDTH - filled
+  return '█'.repeat(filled) + '░'.repeat(empty)
+}
+
+function formatPct(value: number): string {
+  return value.toFixed(1) + '%'
+}
+
+function formatDelta(delta: number): string {
+  const rounded = Math.abs(delta) < MIN_DELTA ? 0 : delta
+  const sign = rounded >= 0 ? '+' : ''
+  return sign + rounded.toFixed(1) + '%'
+}
+
+function crossedMilestone(prev: number, curr: number): number | null {
+  const prevBucket = Math.floor(prev / MILESTONE_STEP)
+  const currBucket = Math.floor(curr / MILESTONE_STEP)
+
+  if (currBucket > prevBucket) {
+    return currBucket * MILESTONE_STEP
+  }
+  return null
+}
+
+function buildMilestoneBlock(label: string, milestone: number): SlackBlock {
+  if (milestone >= TARGET) {
+    return {
+      type: 'section',
+      text: {
+        type: 'mrkdwn',
+        text: [
+          `🏆 *GOAL REACHED: ${label} coverage hit ${milestone}%!* 🏆`,
+          `\`${progressBar(milestone)}\` ${milestone}% ✅`,
+          'The team did it! 🎊🥳🎉'
+        ].join('\n')
+      }
+    }
+  }
+
+  const remaining = TARGET - milestone
+  return {
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: [
+        `🎉🎉🎉 *MILESTONE: ${label} coverage hit ${milestone}%!*`,
+        `\`${progressBar(milestone)}\` ${milestone}% → ${TARGET}% target`,
+        `${remaining} percentage point${remaining !== 1 ? 's' : ''} to go!`
+      ].join('\n')
+    }
+  }
+}
+
+function parseArgs(argv: string[]): {
+  prUrl: string
+  prNumber: string
+  author: string
+} {
+  let prUrl = ''
+  let prNumber = ''
+  let author = ''
+
+  for (const arg of argv) {
+    if (arg.startsWith('--pr-url=')) prUrl = arg.slice('--pr-url='.length)
+    else if (arg.startsWith('--pr-number='))
+      prNumber = arg.slice('--pr-number='.length)
+    else if (arg.startsWith('--author=')) author = arg.slice('--author='.length)
+  }
+
+  return { prUrl, prNumber, author }
+}
+
+function formatCoverageRow(
+  label: string,
+  current: CoverageData,
+  baseline: CoverageData
+): string {
+  const delta = current.percentage - baseline.percentage
+  return `*${label}:*  ${formatPct(baseline.percentage)} → ${formatPct(current.percentage)}  (${formatDelta(delta)})`
+}
+
+function main() {
+  const { prUrl, prNumber, author } = parseArgs(process.argv.slice(2))
+
+  const unitCurrent = parseLcov('coverage/lcov.info')
+  const unitBaseline = parseLcov('temp/coverage-baseline/lcov.info')
+  const e2eCurrent = parseLcov('temp/e2e-coverage/coverage.lcov')
+  const e2eBaseline = parseLcov('temp/e2e-coverage-baseline/coverage.lcov')
+
+  const unitDelta =
+    unitCurrent !== null && unitBaseline !== null
+      ? unitCurrent.percentage - unitBaseline.percentage
+      : 0
+
+  const e2eDelta =
+    e2eCurrent !== null && e2eBaseline !== null
+      ? e2eCurrent.percentage - e2eBaseline.percentage
+      : 0
+
+  const unitImproved = unitDelta >= MIN_DELTA
+  const e2eImproved = e2eDelta >= MIN_DELTA
+
+  if (!unitImproved && !e2eImproved) {
+    process.exit(0)
+  }
+
+  const blocks: SlackBlock[] = []
+
+  const summaryLines: string[] = []
+  summaryLines.push(
+    `✅ *Coverage improved!* — <${prUrl}|PR #${prNumber}> by <https://github.com/${author}|${author}>`
+  )
+  summaryLines.push('')
+
+  if (unitImproved) {
+    summaryLines.push(formatCoverageRow('Unit', unitCurrent!, unitBaseline!))
+  }
+
+  if (e2eImproved) {
+    summaryLines.push(formatCoverageRow('E2E', e2eCurrent!, e2eBaseline!))
+  }
+
+  summaryLines.push('')
+
+  if (unitCurrent) {
+    summaryLines.push(
+      `\`${progressBar(unitCurrent.percentage)}\` ${formatPct(unitCurrent.percentage)} unit → ${TARGET}% target`
+    )
+  }
+  if (e2eCurrent) {
+    summaryLines.push(
+      `\`${progressBar(e2eCurrent.percentage)}\` ${formatPct(e2eCurrent.percentage)} e2e → ${TARGET}% target`
+    )
+  }
+
+  blocks.push({
+    type: 'section',
+    text: {
+      type: 'mrkdwn',
+      text: summaryLines.join('\n')
+    }
+  })
+
+  if (unitCurrent && unitBaseline) {
+    const milestone = crossedMilestone(
+      unitBaseline.percentage,
+      unitCurrent.percentage
+    )
+    if (milestone !== null) {
+      blocks.push(buildMilestoneBlock('Unit test', milestone))
+    }
+  }
+
+  if (e2eCurrent && e2eBaseline) {
+    const milestone = crossedMilestone(
+      e2eBaseline.percentage,
+      e2eCurrent.percentage
+    )
+    if (milestone !== null) {
+      blocks.push(buildMilestoneBlock('E2E test', milestone))
+    }
+  }
+
+  const payload = { text: 'Coverage improved!', blocks }
+  process.stdout.write(JSON.stringify(payload))
+}
+
+main()

src/base/common/selectionBounds.ts

@@ -0,0 +1,10 @@
+/** Padding applied around the selection bounding rect (both screen + canvas). */
+export const SELECTION_BOUNDS_PADDING = 10
+
+/** Rectangle expressed in canvas-world coordinates. */
+export interface CanvasRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -171,14 +171,10 @@ const sidebarPanelVisible = computed(
 )
 
 const firstPanelVisible = computed(
-  () =>
-    !focusMode.value &&
-    (sidebarLocation.value === 'left' || showOffsideSplitter.value)
+  () => sidebarLocation.value === 'left' || showOffsideSplitter.value
 )
 const lastPanelVisible = computed(
-  () =>
-    !focusMode.value &&
-    (sidebarLocation.value === 'right' || showOffsideSplitter.value)
+  () => sidebarLocation.value === 'right' || showOffsideSplitter.value
 )
 
 /**
@@ -268,6 +264,7 @@ const splitterRefreshKey = computed(() => {
 })
 
 const firstPanelStyle = computed(() => {
+  if (focusMode.value) return { display: 'none' }
   if (sidebarLocation.value === 'left') {
     return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
   }
@@ -275,6 +272,7 @@ const firstPanelStyle = computed(() => {
 })
 
 const lastPanelStyle = computed(() => {
+  if (focusMode.value) return { display: 'none' }
   if (sidebarLocation.value === 'right') {
     return { display: sidebarPanelVisible.value ? 'flex' : 'none' }
   }
@@ -293,9 +291,13 @@ const lastPanelStyle = computed(() => {
   background-color: var(--p-primary-color);
 }
 
-/* Hide sidebar gutter when sidebar is not visible */
-:deep(.side-bar-panel[style*='display: none'] + .p-splitter-gutter),
-:deep(.p-splitter-gutter + .side-bar-panel[style*='display: none']) {
+/* Hide gutter when adjacent panel is not visible */
+:deep(
+  [data-pc-name='splitterpanel'][style*='display: none'] + .p-splitter-gutter
+),
+:deep(
+  .p-splitter-gutter + [data-pc-name='splitterpanel'][style*='display: none']
+) {
   display: none;
 }
 

src/components/TopMenuSection.test.ts

@@ -1,5 +1,8 @@
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import type { MenuItem } from 'primevue/menuitem'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, defineComponent, h, nextTick, onMounted, ref } from 'vue'
@@ -8,8 +11,6 @@ import { createI18n } from 'vue-i18n'
 
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
-import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
-import LoginButton from '@/components/topbar/LoginButton.vue'
 import type {
   JobListItem,
   JobStatus
@@ -114,8 +115,9 @@ function createWrapper({
     }
   })
 
-  return mount(TopMenuSection, {
-    attachTo,
+  const user = userEvent.setup()
+
+  const renderOptions: Record<string, unknown> = {
     global: {
       plugins: [pinia, i18n],
       stubs: {
@@ -128,7 +130,8 @@ function createWrapper({
         ContextMenu: {
           name: 'ContextMenu',
           props: ['model'],
-          template: '<div />'
+          template:
+            '<div data-testid="context-menu" :data-model="JSON.stringify(model)" />'
         },
         ...stubs
       },
@@ -136,15 +139,23 @@ function createWrapper({
         tooltip: () => {}
       }
     }
-  })
+  }
+
+  if (attachTo) {
+    renderOptions.container = attachTo.appendChild(
+      document.createElement('div')
+    )
+  }
+
+  const { container, unmount } = render(TopMenuSection, renderOptions)
+
+  return { container, unmount, user }
 }
 
-function getLegacyCommandsContainer(
-  wrapper: ReturnType<typeof createWrapper>
-): HTMLElement {
-  const legacyContainer = wrapper.find(
+function getLegacyCommandsContainer(container: Element): HTMLElement {
+  const legacyContainer = container.querySelector(
     '[data-testid="legacy-topbar-container"]'
-  ).element
+  )
   if (!(legacyContainer instanceof HTMLElement)) {
     throw new Error('Expected legacy commands container to be present')
   }
@@ -201,9 +212,11 @@ describe('TopMenuSection', () => {
       })
 
       it('should display CurrentUserButton and not display LoginButton', () => {
-        const wrapper = createLegacyTabBarWrapper()
-        expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(true)
-        expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+        const { container } = createLegacyTabBarWrapper()
+        expect(
+          container.querySelector('current-user-button-stub')
+        ).not.toBeNull()
+        expect(container.querySelector('login-button-stub')).toBeNull()
       })
     })
 
@@ -215,24 +228,24 @@ describe('TopMenuSection', () => {
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
           mockData.isDesktop = true
-          const wrapper = createLegacyTabBarWrapper()
-          expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
-          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
+          const { container } = createLegacyTabBarWrapper()
+          expect(container.querySelector('login-button-stub')).not.toBeNull()
+          expect(container.querySelector('current-user-button-stub')).toBeNull()
         })
       })
 
       describe('on web platform', () => {
         it('should not display CurrentUserButton and not display LoginButton', () => {
-          const wrapper = createLegacyTabBarWrapper()
-          expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
-          expect(wrapper.findComponent(LoginButton).exists()).toBe(false)
+          const { container } = createLegacyTabBarWrapper()
+          expect(container.querySelector('current-user-button-stub')).toBeNull()
+          expect(container.querySelector('login-button-stub')).toBeNull()
         })
       })
     })
   })
 
   it('shows the active jobs label with the current count', async () => {
-    const wrapper = createWrapper()
+    createWrapper()
     const queueStore = useQueueStore()
     queueStore.pendingTasks = [createTask('pending-1', 'pending')]
     queueStore.runningTasks = [
@@ -242,19 +255,15 @@ describe('TopMenuSection', () => {
 
     await nextTick()
 
-    const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
-    expect(queueButton.text()).toContain('3 active')
-    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
-      true
-    )
+    const queueButton = screen.getByTestId('queue-overlay-toggle')
+    expect(queueButton.textContent).toContain('3 active')
+    expect(screen.getByTestId('active-jobs-indicator')).toBeTruthy()
   })
 
   it('hides the active jobs indicator when no jobs are active', () => {
-    const wrapper = createWrapper()
+    createWrapper()
 
-    expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
-      false
-    )
+    expect(screen.queryByTestId('active-jobs-indicator')).toBeNull()
   })
 
   it('hides queue progress overlay when QPO V2 is enabled', async () => {
@@ -263,16 +272,12 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { container } = createWrapper({ pinia })
 
     await nextTick()
 
-    expect(wrapper.find('[data-testid="queue-overlay-toggle"]').exists()).toBe(
-      true
-    )
-    expect(
-      wrapper.findComponent({ name: 'QueueProgressOverlay' }).exists()
-    ).toBe(false)
+    expect(screen.getByTestId('queue-overlay-toggle')).toBeTruthy()
+    expect(container.querySelector('queue-progress-overlay-stub')).toBeNull()
   })
 
   it('toggles the queue progress overlay when QPO V2 is disabled', async () => {
@@ -281,10 +286,10 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? false : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const commandStore = useCommandStore(pinia)
 
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+    await user.click(screen.getByTestId('queue-overlay-toggle'))
 
     expect(commandStore.execute).toHaveBeenCalledWith(
       'Comfy.Queue.ToggleOverlay'
@@ -297,10 +302,10 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
 
-    await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
+    await user.click(screen.getByTestId('queue-overlay-toggle'))
 
     expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
   })
@@ -311,14 +316,14 @@ describe('TopMenuSection', () => {
     vi.mocked(settingStore.get).mockImplementation((key) =>
       key === 'Comfy.Queue.QPOV2' ? true : undefined
     )
-    const wrapper = createWrapper({ pinia })
+    const { user } = createWrapper({ pinia })
     const sidebarTabStore = useSidebarTabStore(pinia)
-    const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
+    const toggleButton = screen.getByTestId('queue-overlay-toggle')
 
-    await toggleButton.trigger('click')
+    await user.click(toggleButton)
     expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
 
-    await toggleButton.trigger('click')
+    await user.click(toggleButton)
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)
   })
 
@@ -341,39 +346,39 @@ describe('TopMenuSection', () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).not.toBeNull()
     })
 
     it('does not render inline progress summary when QPO V2 is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(false)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).toBeNull()
     })
 
     it('does not render inline progress summary when run progress bar is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
-      ).toBe(false)
+        container.querySelector('queue-inline-progress-summary-stub')
+      ).toBeNull()
     })
 
     it('teleports inline progress summary when actionbar is floating', async () => {
@@ -387,7 +392,7 @@ describe('TopMenuSection', () => {
 
       const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
 
-      const wrapper = createWrapper({
+      const { unmount } = createWrapper({
         pinia,
         attachTo: document.body,
         stubs: {
@@ -401,7 +406,7 @@ describe('TopMenuSection', () => {
 
         expect(actionbarTarget.querySelector('[role="status"]')).not.toBeNull()
       } finally {
-        wrapper.unmount()
+        unmount()
         actionbarTarget.remove()
       }
     })
@@ -424,36 +429,36 @@ describe('TopMenuSection', () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-notification-banner-host-stub')
+      ).not.toBeNull()
     })
 
     it('renders queue notification banners when QPO V2 is disabled', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, false)
 
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
       expect(
-        wrapper.findComponent({ name: 'QueueNotificationBannerHost' }).exists()
-      ).toBe(true)
+        container.querySelector('queue-notification-banner-host-stub')
+      ).not.toBeNull()
     })
 
     it('renders inline summary above banners when both are visible', async () => {
       const pinia = createTestingPinia({ createSpy: vi.fn })
       configureSettings(pinia, true)
-      const wrapper = createWrapper({ pinia })
+      const { container } = createWrapper({ pinia })
 
       await nextTick()
 
-      const html = wrapper.html()
+      const html = container.innerHTML
       const inlineSummaryIndex = html.indexOf(
         'queue-inline-progress-summary-stub'
       )
@@ -477,7 +482,7 @@ describe('TopMenuSection', () => {
 
       const ComfyActionbarStub = createComfyActionbarStub(actionbarTarget)
 
-      const wrapper = createWrapper({
+      const { container, unmount } = createWrapper({
         pinia,
         attachTo: document.body,
         stubs: {
@@ -493,47 +498,49 @@ describe('TopMenuSection', () => {
           actionbarTarget.querySelector('queue-notification-banner-host-stub')
         ).toBeNull()
         expect(
-          wrapper
-            .findComponent({ name: 'QueueNotificationBannerHost' })
-            .exists()
-        ).toBe(true)
+          container.querySelector('queue-notification-banner-host-stub')
+        ).not.toBeNull()
       } finally {
-        wrapper.unmount()
+        unmount()
         actionbarTarget.remove()
       }
     })
   })
 
   it('disables the clear queue context menu item when no queued jobs exist', () => {
-    const wrapper = createWrapper()
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
+    const { container } = createWrapper()
+    const menuEl = container.querySelector('[data-testid="context-menu"]')
+    const model = JSON.parse(
+      menuEl?.getAttribute('data-model') ?? '[]'
+    ) as MenuItem[]
     expect(model[0]?.label).toBe('Clear queue')
     expect(model[0]?.disabled).toBe(true)
   })
 
   it('enables the clear queue context menu item when queued jobs exist', async () => {
-    const wrapper = createWrapper()
+    const { container } = createWrapper()
     const queueStore = useQueueStore()
     queueStore.pendingTasks = [createTask('pending-1', 'pending')]
 
     await nextTick()
 
-    const menu = wrapper.findComponent({ name: 'ContextMenu' })
-    const model = menu.props('model') as MenuItem[]
+    const menuEl = container.querySelector('[data-testid="context-menu"]')
+    const model = JSON.parse(
+      menuEl?.getAttribute('data-model') ?? '[]'
+    ) as MenuItem[]
     expect(model[0]?.disabled).toBe(false)
   })
 
   it('shows manager red dot only for manager conflicts', async () => {
-    const wrapper = createWrapper()
+    const { container } = createWrapper()
 
     // Release red dot is mocked as true globally for this test file.
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(false)
+    expect(container.querySelector('span.bg-red-500')).toBeNull()
 
     mockData.setShowConflictRedDot(true)
     await nextTick()
 
-    expect(wrapper.find('span.bg-red-500').exists()).toBe(true)
+    expect(container.querySelector('span.bg-red-500')).not.toBeNull()
   })
 
   it('coalesces legacy topbar mutation scans to one check per frame', async () => {
@@ -555,15 +562,19 @@ describe('TopMenuSection', () => {
       return undefined
     })
 
-    const wrapper = createWrapper({ pinia, attachTo: document.body })
+    const { container, unmount } = createWrapper({
+      pinia,
+      attachTo: document.body
+    })
 
     try {
       await nextTick()
 
-      const actionbarContainer = wrapper.find('.actionbar-container')
-      expect(actionbarContainer.classes()).toContain('w-0')
+      const actionbarContainer = container.querySelector('.actionbar-container')
+      expect(actionbarContainer).not.toBeNull()
+      expect(actionbarContainer!.classList).toContain('w-0')
 
-      const legacyContainer = getLegacyCommandsContainer(wrapper)
+      const legacyContainer = getLegacyCommandsContainer(container)
       const querySpy = vi.spyOn(legacyContainer, 'querySelector')
 
       if (rafCallbacks.length > 0) {
@@ -594,9 +605,9 @@ describe('TopMenuSection', () => {
       await nextTick()
 
       expect(querySpy).toHaveBeenCalledTimes(1)
-      expect(actionbarContainer.classes()).toContain('px-2')
+      expect(actionbarContainer!.classList).toContain('px-2')
     } finally {
-      wrapper.unmount()
+      unmount()
       vi.unstubAllGlobals()
     }
   })

src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts

@@ -1,9 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
-import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
 
 // Mock ShortcutsList component
@@ -12,7 +10,7 @@ vi.mock('@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue', () => ({
     name: 'ShortcutsList',
     props: ['commands', 'subcategories', 'columns'],
     template:
-      '<div class="shortcuts-list-mock">{{ commands.length }} commands</div>'
+      '<div data-testid="shortcuts-list">{{ JSON.stringify(subcategories) }}</div>'
   }
 }))
 
@@ -56,25 +54,34 @@ describe('EssentialsPanel', () => {
     setActivePinia(createPinia())
   })
 
-  it('should render ShortcutsList with essentials commands', () => {
-    const wrapper = mount(EssentialsPanel)
+  it('should render ShortcutsList with essentials commands', async () => {
+    const { default: EssentialsPanel } =
+      await import('@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue')
+    render(EssentialsPanel)
 
-    const shortcutsList = wrapper.findComponent(ShortcutsList)
-    expect(shortcutsList.exists()).toBe(true)
+    expect(screen.getByTestId('shortcuts-list')).toBeTruthy()
   })
 
-  it('should categorize commands into subcategories', () => {
-    const wrapper = mount(EssentialsPanel)
+  it('should categorize commands into subcategories', async () => {
+    const { default: EssentialsPanel } =
+      await import('@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue')
+    render(EssentialsPanel)
 
-    const shortcutsList = wrapper.findComponent(ShortcutsList)
-    const subcategories = shortcutsList.props('subcategories')
+    const el = screen.getByTestId('shortcuts-list')
+    const subcategories = JSON.parse(el.textContent ?? '{}')
 
     expect(subcategories).toHaveProperty('workflow')
     expect(subcategories).toHaveProperty('node')
     expect(subcategories).toHaveProperty('queue')
 
-    expect(subcategories.workflow).toContain(mockCommands[0])
-    expect(subcategories.node).toContain(mockCommands[1])
-    expect(subcategories.queue).toContain(mockCommands[2])
+    expect(subcategories.workflow).toContainEqual(
+      expect.objectContaining({ id: 'Workflow.New' })
+    )
+    expect(subcategories.node).toContainEqual(
+      expect.objectContaining({ id: 'Node.Add' })
+    )
+    expect(subcategories.queue).toContainEqual(
+      expect.objectContaining({ id: 'Queue.Clear' })
+    )
   })
 })

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts

@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
 import type { ComfyCommandImpl } from '@/stores/commandStore'
 
@@ -64,36 +65,31 @@ describe('ShortcutsList', () => {
   }
 
   it('should render shortcuts organized by subcategories', () => {
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: mockSubcategories
       }
     })
 
-    // Check that subcategories are rendered
-    expect(wrapper.text()).toContain('Workflow')
-    expect(wrapper.text()).toContain('Node')
-    expect(wrapper.text()).toContain('Queue')
-
-    // Check that commands are rendered
-    expect(wrapper.text()).toContain('New Blank Workflow')
+    expect(screen.getByText('Workflow')).toBeInTheDocument()
+    expect(screen.getByText('Node')).toBeInTheDocument()
+    expect(screen.getByText('Queue')).toBeInTheDocument()
+    expect(screen.getByText('New Blank Workflow')).toBeInTheDocument()
   })
 
   it('should format keyboard shortcuts correctly', () => {
-    const wrapper = mount(ShortcutsList, {
+    const { container } = render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: mockSubcategories
       }
     })
 
-    // Check for formatted keys
-    expect(wrapper.text()).toContain('Ctrl')
-    expect(wrapper.text()).toContain('n')
-    expect(wrapper.text()).toContain('Shift')
-    expect(wrapper.text()).toContain('a')
-    expect(wrapper.text()).toContain('c')
+    const text = container.textContent!
+    expect(text).toContain('Ctrl')
+    expect(text).toContain('n')
+    expect(text).toContain('Shift')
+    expect(text).toContain('a')
+    expect(text).toContain('c')
   })
 
   it('should filter out commands without keybindings', () => {
@@ -107,9 +103,8 @@ describe('ShortcutsList', () => {
       } as ComfyCommandImpl
     ]
 
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: commandsWithoutKeybinding,
         subcategories: {
           ...mockSubcategories,
           other: [commandsWithoutKeybinding[3]]
@@ -117,7 +112,7 @@ describe('ShortcutsList', () => {
       }
     })
 
-    expect(wrapper.text()).not.toContain('No Keybinding')
+    expect(screen.queryByText('No Keybinding')).not.toBeInTheDocument()
   })
 
   it('should handle special key formatting', () => {
@@ -132,16 +127,15 @@ describe('ShortcutsList', () => {
       }
     } as ComfyCommandImpl
 
-    const wrapper = mount(ShortcutsList, {
+    const { container } = render(ShortcutsList, {
       props: {
-        commands: [specialKeyCommand],
         subcategories: {
           special: [specialKeyCommand]
         }
       }
     })
 
-    const text = wrapper.text()
+    const text = container.textContent!
     expect(text).toContain('Cmd') // Meta -> Cmd
     expect(text).toContain('↑') // ArrowUp -> ↑
     expect(text).toContain('↵') // Enter -> ↵
@@ -150,15 +144,14 @@ describe('ShortcutsList', () => {
   })
 
   it('should use fallback subcategory titles', () => {
-    const wrapper = mount(ShortcutsList, {
+    render(ShortcutsList, {
       props: {
-        commands: mockCommands,
         subcategories: {
           unknown: [mockCommands[0]]
         }
       }
     })
 
-    expect(wrapper.text()).toContain('unknown')
+    expect(screen.getByText('unknown')).toBeInTheDocument()
   })
 })

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -1,8 +1,9 @@
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable testing-library/prefer-user-event */
 import { createTestingPinia } from '@pinia/testing'
-import type { VueWrapper } from '@vue/test-utils'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import type { Mock } from 'vitest'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -67,9 +68,10 @@ vi.mock('@/platform/distribution/types', () => ({
 }))
 
 // Mock clipboard API
+const mockWriteText = vi.fn().mockResolvedValue(undefined)
 Object.defineProperty(navigator, 'clipboard', {
   value: {
-    writeText: vi.fn().mockResolvedValue(undefined)
+    writeText: mockWriteText
   },
   configurable: true
 })
@@ -87,8 +89,9 @@ const i18n = createI18n({
   }
 })
 
-const mountBaseTerminal = () => {
-  return mount(BaseTerminal, {
+function renderBaseTerminal(props: Record<string, unknown> = {}) {
+  return render(BaseTerminal, {
+    props,
     global: {
       plugins: [
         createTestingPinia({
@@ -107,68 +110,60 @@ const mountBaseTerminal = () => {
 }
 
 describe('BaseTerminal', () => {
-  let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
-
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  afterEach(() => {
-    wrapper?.unmount()
-  })
-
   it('emits created event on mount', () => {
-    wrapper = mountBaseTerminal()
+    const onCreated = vi.fn()
+    renderBaseTerminal({ onCreated })
 
-    expect(wrapper.emitted('created')).toBeTruthy()
-    expect(wrapper.emitted('created')![0]).toHaveLength(2)
+    expect(onCreated).toHaveBeenCalled()
+    expect(onCreated.mock.calls[0]).toHaveLength(2)
   })
 
   it('emits unmounted event on unmount', () => {
-    wrapper = mountBaseTerminal()
-    wrapper.unmount()
+    const onUnmounted = vi.fn()
+    const { unmount } = renderBaseTerminal({ onUnmounted })
+    unmount()
 
-    expect(wrapper.emitted('unmounted')).toBeTruthy()
+    expect(onUnmounted).toHaveBeenCalled()
   })
 
-  it('button exists and has correct initial state', async () => {
-    wrapper = mountBaseTerminal()
+  it('button exists and has correct initial state', () => {
+    renderBaseTerminal()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.exists()).toBe(true)
-
-    expect(button.classes()).toContain('opacity-0')
-    expect(button.classes()).toContain('pointer-events-none')
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('opacity-0', 'pointer-events-none')
   })
 
   it('shows correct tooltip when no selection', async () => {
     mockTerminal.hasSelection.mockReturnValue(false)
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.attributes('aria-label')).toBe('Copy all')
+    const button = screen.getByRole('button')
+    expect(button).toHaveAttribute('aria-label', 'Copy all')
   })
 
   it('shows correct tooltip when selection exists', async () => {
     mockTerminal.hasSelection.mockReturnValue(true)
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
     // Trigger the selection change callback that was registered during mount
     expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
-    // Access the mock calls - TypeScript can't infer the mock structure dynamically
     const mockCalls = (mockTerminal.onSelectionChange as Mock).mock.calls
     const selectionCallback = mockCalls[0][0] as () => void
     selectionCallback()
     await nextTick()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    expect(button.attributes('aria-label')).toBe('Copy selection')
+    const button = screen.getByRole('button')
+    expect(button).toHaveAttribute('aria-label', 'Copy selection')
   })
 
   it('copies selected text when selection exists', async () => {
@@ -176,16 +171,17 @@ describe('BaseTerminal', () => {
     mockTerminal.hasSelection.mockReturnValue(true)
     mockTerminal.getSelection.mockReturnValue(selectedText)
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).not.toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(selectedText)
+    expect(mockWriteText).toHaveBeenCalledWith(selectedText)
     expect(mockTerminal.clearSelection).not.toHaveBeenCalled()
   })
 
@@ -196,16 +192,17 @@ describe('BaseTerminal', () => {
       .mockReturnValueOnce('') // First call returns empty (no selection)
       .mockReturnValueOnce(allText) // Second call after selectAll returns all text
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(allText)
+    expect(mockWriteText).toHaveBeenCalledWith(allText)
     expect(mockTerminal.clearSelection).toHaveBeenCalled()
   })
 
@@ -213,15 +210,16 @@ describe('BaseTerminal', () => {
     mockTerminal.hasSelection.mockReturnValue(false)
     mockTerminal.getSelection.mockReturnValue('')
 
-    wrapper = mountBaseTerminal()
+    const { container } = renderBaseTerminal()
 
-    await wrapper.trigger('mouseenter')
+    await fireEvent.mouseEnter(container.firstElementChild!)
     await nextTick()
 
-    const button = wrapper.find('button[aria-label]')
-    await button.trigger('click')
+    const button = screen.getByRole('button')
+    await fireEvent.click(button)
+    await nextTick()
 
     expect(mockTerminal.selectAll).toHaveBeenCalled()
-    expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+    expect(mockWriteText).not.toHaveBeenCalled()
   })
 })

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -20,7 +20,12 @@
       class="icon-[lucide--triangle-alert] text-warning-background"
     />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
-    <Tag v-if="item.isBlueprint" value="Blueprint" severity="primary" />
+    <Tag
+      v-if="item.isBlueprint"
+      data-testid="subgraph-breadcrumb-blueprint-tag"
+      :value="t('breadcrumbsMenu.blueprint')"
+      severity="primary"
+    />
     <i v-if="isActive" class="pi pi-angle-down text-2xs"></i>
   </div>
   <Menu

src/components/common/Badge.test.ts

@@ -1,44 +1,44 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import Badge from './Badge.vue'
 import { badgeVariants } from './badge.variants'
 
 describe('Badge', () => {
   it('renders label text', () => {
-    const wrapper = mount(Badge, { props: { label: 'NEW' } })
-    expect(wrapper.text()).toBe('NEW')
+    render(Badge, { props: { label: 'NEW' } })
+    expect(screen.getByText('NEW')).toBeInTheDocument()
   })
 
   it('renders numeric label', () => {
-    const wrapper = mount(Badge, { props: { label: 5 } })
-    expect(wrapper.text()).toBe('5')
+    render(Badge, { props: { label: 5 } })
+    expect(screen.getByText('5')).toBeInTheDocument()
   })
 
   it('defaults to dot variant when no label is provided', () => {
-    const wrapper = mount(Badge)
-    expect(wrapper.classes()).toContain('size-2')
+    const { container } = render(Badge)
+    // eslint-disable-next-line testing-library/no-node-access -- dot badge has no text/role to query
+    expect(container.firstElementChild).toHaveClass('size-2')
   })
 
   it('defaults to label variant when label is provided', () => {
-    const wrapper = mount(Badge, { props: { label: 'NEW' } })
-    expect(wrapper.classes()).toContain('font-semibold')
-    expect(wrapper.classes()).toContain('uppercase')
+    render(Badge, { props: { label: 'NEW' } })
+    const el = screen.getByText('NEW')
+    expect(el).toHaveClass('font-semibold')
+    expect(el).toHaveClass('uppercase')
   })
 
   it('applies circle variant', () => {
-    const wrapper = mount(Badge, {
-      props: { label: '3', variant: 'circle' }
-    })
-    expect(wrapper.classes()).toContain('size-3.5')
+    render(Badge, { props: { label: '3', variant: 'circle' } })
+    expect(screen.getByText('3')).toHaveClass('size-3.5')
   })
 
   it('merges custom class via cn()', () => {
-    const wrapper = mount(Badge, {
-      props: { label: 'Test', class: 'ml-2' }
-    })
-    expect(wrapper.classes()).toContain('ml-2')
-    expect(wrapper.classes()).toContain('rounded-full')
+    render(Badge, { props: { label: 'Test', class: 'ml-2' } })
+    const el = screen.getByText('Test')
+    expect(el).toHaveClass('ml-2')
+    expect(el).toHaveClass('rounded-full')
   })
 
   describe('twMerge preserves color alongside text-3xs font size', () => {
@@ -58,12 +58,10 @@ describe('Badge', () => {
     )
 
     it('cn() does not clobber text-white when merging with text-3xs', () => {
-      const wrapper = mount(Badge, {
-        props: { label: 'Test', severity: 'danger' }
-      })
-      const classList = wrapper.classes()
-      expect(classList).toContain('text-white')
-      expect(classList).toContain('text-3xs')
+      render(Badge, { props: { label: 'Test', severity: 'danger' } })
+      const el = screen.getByText('Test')
+      expect(el).toHaveClass('text-white')
+      expect(el).toHaveClass('text-3xs')
     })
   })
 })

src/components/common/MarqueeLine.test.ts

@@ -1,22 +1,22 @@
-import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
+import { render, screen } from '@testing-library/vue'
+
 import MarqueeLine from './MarqueeLine.vue'
 
 describe(MarqueeLine, () => {
   it('renders slot content', () => {
-    const wrapper = mount(MarqueeLine, {
+    render(MarqueeLine, {
       slots: { default: 'Hello World' }
     })
-    expect(wrapper.text()).toBe('Hello World')
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
   })
 
   it('renders content inside a span within the container', () => {
-    const wrapper = mount(MarqueeLine, {
+    render(MarqueeLine, {
       slots: { default: 'Test Text' }
     })
-    const span = wrapper.find('span')
-    expect(span.exists()).toBe(true)
-    expect(span.text()).toBe('Test Text')
+    const el = screen.getByText('Test Text')
+    expect(el.tagName).toBe('SPAN')
   })
 })

src/components/common/NotificationPopup.test.ts

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import NotificationPopup from './NotificationPopup.vue'
@@ -13,13 +13,11 @@ const i18n = createI18n({
   }
 })
 
-function mountPopup(
-  props: ComponentProps<typeof NotificationPopup> = {
-    title: 'Test'
-  },
+function renderPopup(
+  props: { title: string; [key: string]: unknown } = { title: 'Test' },
   slots: Record<string, string> = {}
 ) {
-  return mount(NotificationPopup, {
+  return render(NotificationPopup, {
     global: { plugins: [i18n] },
     props,
     slots
@@ -28,51 +26,58 @@ function mountPopup(
 
 describe('NotificationPopup', () => {
   it('renders title', () => {
-    const wrapper = mountPopup({ title: 'Hello World' })
-    expect(wrapper.text()).toContain('Hello World')
+    renderPopup({ title: 'Hello World' })
+    expect(screen.getByRole('status')).toHaveTextContent('Hello World')
   })
 
   it('has role="status" for accessibility', () => {
-    const wrapper = mountPopup()
-    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+    renderPopup()
+    expect(screen.getByRole('status')).toBeInTheDocument()
   })
 
   it('renders subtitle when provided', () => {
-    const wrapper = mountPopup({ title: 'T', subtitle: 'v1.2.3' })
-    expect(wrapper.text()).toContain('v1.2.3')
+    renderPopup({ title: 'T', subtitle: 'v1.2.3' })
+    expect(screen.getByRole('status')).toHaveTextContent('v1.2.3')
   })
 
   it('renders icon when provided', () => {
-    const wrapper = mountPopup({
+    const { container } = renderPopup({
       title: 'T',
       icon: 'icon-[lucide--rocket]'
     })
-    expect(wrapper.find('i.icon-\\[lucide--rocket\\]').exists()).toBe(true)
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const icon = container.querySelector('i.icon-\\[lucide--rocket\\]')
+    expect(icon).toBeInTheDocument()
   })
 
   it('emits close when close button clicked', async () => {
-    const wrapper = mountPopup({ title: 'T', showClose: true })
-    await wrapper.find('[aria-label="Close"]').trigger('click')
-    expect(wrapper.emitted('close')).toHaveLength(1)
+    const user = userEvent.setup()
+    const closeSpy = vi.fn()
+    renderPopup({ title: 'T', showClose: true, onClose: closeSpy })
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(closeSpy).toHaveBeenCalledOnce()
   })
 
   it('renders default slot content', () => {
-    const wrapper = mountPopup({ title: 'T' }, { default: 'Body text here' })
-    expect(wrapper.text()).toContain('Body text here')
+    renderPopup({ title: 'T' }, { default: 'Body text here' })
+    expect(screen.getByRole('status')).toHaveTextContent('Body text here')
   })
 
   it('renders footer slots', () => {
-    const wrapper = mountPopup(
+    renderPopup(
       { title: 'T' },
       { 'footer-start': 'Left side', 'footer-end': 'Right side' }
     )
-    expect(wrapper.text()).toContain('Left side')
-    expect(wrapper.text()).toContain('Right side')
+    const status = screen.getByRole('status')
+    expect(status).toHaveTextContent('Left side')
+    expect(status).toHaveTextContent('Right side')
   })
 
   it('positions bottom-right when specified', () => {
-    const wrapper = mountPopup({ title: 'T', position: 'bottom-right' })
-    const root = wrapper.find('[role="status"]')
-    expect(root.attributes('data-position')).toBe('bottom-right')
+    renderPopup({ title: 'T', position: 'bottom-right' })
+    expect(screen.getByRole('status')).toHaveAttribute(
+      'data-position',
+      'bottom-right'
+    )
   })
 })

src/components/common/TextTicker.test.ts

@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { nextTick } from 'vue'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -13,7 +14,8 @@ function mockScrollWidth(el: HTMLElement, scrollWidth: number) {
 
 describe(TextTicker, () => {
   let rafCallbacks: ((time: number) => void)[]
-  let wrapper: ReturnType<typeof mount>
+  let user: ReturnType<typeof userEvent.setup>
+  let cleanup: (() => void) | undefined
 
   beforeEach(() => {
     vi.useFakeTimers()
@@ -23,32 +25,35 @@ describe(TextTicker, () => {
       return rafCallbacks.length
     })
     vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {})
+    user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
   })
 
   afterEach(() => {
-    wrapper?.unmount()
+    cleanup?.()
     vi.useRealTimers()
     vi.restoreAllMocks()
   })
 
   it('renders slot content', () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Hello World' }
     })
-    expect(wrapper.text()).toBe('Hello World')
+    cleanup = unmount
+    expect(screen.getByText('Hello World')).toBeInTheDocument()
   })
 
   it('scrolls on hover after delay', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    const el = wrapper.element as HTMLElement
+    const el = screen.getByText('Very long text that overflows')
     mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
 
     expect(rafCallbacks.length).toBe(0)
@@ -62,19 +67,21 @@ describe(TextTicker, () => {
   })
 
   it('cancels delayed scroll on mouse leave before delay elapses', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    mockScrollWidth(wrapper.element as HTMLElement, 300)
+    const el = screen.getByText('Very long text that overflows')
+    mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
 
     vi.advanceTimersByTime(200)
-    await wrapper.trigger('mouseleave')
+    await user.unhover(el)
     await nextTick()
 
     vi.advanceTimersByTime(350)
@@ -83,16 +90,17 @@ describe(TextTicker, () => {
   })
 
   it('resets scroll position on mouse leave', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Very long text that overflows' },
       props: { speed: 100 }
     })
+    cleanup = unmount
 
-    const el = wrapper.element as HTMLElement
+    const el = screen.getByText('Very long text that overflows')
     mockScrollWidth(el, 300)
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
     vi.advanceTimersByTime(350)
     await nextTick()
@@ -100,19 +108,22 @@ describe(TextTicker, () => {
     rafCallbacks[0](performance.now() + 500)
     expect(el.scrollLeft).toBeGreaterThan(0)
 
-    await wrapper.trigger('mouseleave')
+    await user.unhover(el)
     await nextTick()
 
     expect(el.scrollLeft).toBe(0)
   })
 
   it('does not scroll when content fits', async () => {
-    wrapper = mount(TextTicker, {
+    const { unmount } = render(TextTicker, {
       slots: { default: 'Short' }
     })
+    cleanup = unmount
+
+    const el = screen.getByText('Short')
 
     await nextTick()
-    await wrapper.trigger('mouseenter')
+    await user.hover(el)
     await nextTick()
     vi.advanceTimersByTime(350)
     await nextTick()

src/components/common/TextTickerMultiLine.test.ts

@@ -1,8 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { nextTick } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-import MarqueeLine from './MarqueeLine.vue'
 import TextTickerMultiLine from './TextTickerMultiLine.vue'
 
 type Callback = () => void
@@ -41,23 +40,38 @@ function mockElementSize(
 }
 
 describe(TextTickerMultiLine, () => {
-  let wrapper: ReturnType<typeof mount>
+  let unmountFn: () => void
 
   afterEach(() => {
-    wrapper?.unmount()
+    unmountFn?.()
     resizeCallbacks.length = 0
     mutationCallbacks.length = 0
   })
 
-  function mountComponent(text: string) {
-    wrapper = mount(TextTickerMultiLine, {
+  function renderComponent(text: string) {
+    const result = render(TextTickerMultiLine, {
       slots: { default: text }
     })
-    return wrapper
+    unmountFn = result.unmount
+    return {
+      ...result,
+      container: result.container as HTMLElement
+    }
   }
 
-  function getMeasureEl(): HTMLElement {
-    return wrapper.find('[aria-hidden="true"]').element as HTMLElement
+  function getMeasureEl(container: HTMLElement): HTMLElement {
+    // eslint-disable-next-line testing-library/no-node-access
+    return container.querySelector('[aria-hidden="true"]') as HTMLElement
+  }
+
+  function getVisibleLines(container: HTMLElement): HTMLElement[] {
+    /* eslint-disable testing-library/no-node-access */
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        'div.overflow-hidden:not([aria-hidden])'
+      )
+    )
+    /* eslint-enable testing-library/no-node-access */
   }
 
   async function triggerSplitLines() {
@@ -66,40 +80,42 @@ describe(TextTickerMultiLine, () => {
   }
 
   it('renders slot content', () => {
-    mountComponent('Load Checkpoint')
-    expect(wrapper.text()).toContain('Load Checkpoint')
+    renderComponent('Load Checkpoint')
+    expect(
+      screen.getAllByText('Load Checkpoint').length
+    ).toBeGreaterThanOrEqual(1)
   })
 
-  it('renders a single MarqueeLine when text fits', async () => {
-    mountComponent('Short')
-    mockElementSize(getMeasureEl(), 200, 100)
+  it('renders a single line when text fits', async () => {
+    const { container } = renderComponent('Short')
+    mockElementSize(getMeasureEl(container), 200, 100)
     await triggerSplitLines()
 
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(1)
+    expect(getVisibleLines(container)).toHaveLength(1)
   })
 
-  it('renders two MarqueeLines when text overflows', async () => {
-    mountComponent('Load Checkpoint Loader Simple')
-    mockElementSize(getMeasureEl(), 100, 300)
+  it('renders two lines when text overflows', async () => {
+    const { container } = renderComponent('Load Checkpoint Loader Simple')
+    mockElementSize(getMeasureEl(container), 100, 300)
     await triggerSplitLines()
 
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(2)
+    expect(getVisibleLines(container)).toHaveLength(2)
   })
 
   it('splits text at word boundary when overflowing', async () => {
-    mountComponent('Load Checkpoint Loader')
-    mockElementSize(getMeasureEl(), 100, 200)
+    const { container } = renderComponent('Load Checkpoint Loader')
+    mockElementSize(getMeasureEl(container), 100, 200)
     await triggerSplitLines()
 
-    const lines = wrapper.findAllComponents(MarqueeLine)
-    expect(lines[0].text()).toBe('Load')
-    expect(lines[1].text()).toBe('Checkpoint Loader')
+    const lines = getVisibleLines(container)
+    expect(lines[0].textContent).toBe('Load')
+    expect(lines[1].textContent).toBe('Checkpoint Loader')
   })
 
   it('has hidden measurement element with aria-hidden', () => {
-    mountComponent('Test')
-    const measureEl = wrapper.find('[aria-hidden="true"]')
-    expect(measureEl.exists()).toBe(true)
-    expect(measureEl.classes()).toContain('invisible')
+    const { container } = renderComponent('Test')
+    const measureEl = getMeasureEl(container)
+    expect(measureEl).toBeInTheDocument()
+    expect(measureEl).toHaveClass('invisible')
   })
 })

src/components/common/TreeExplorerV2Node.test.ts

@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import type { FlattenedItem } from 'reka-ui'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -92,7 +93,7 @@ describe('TreeExplorerV2Node', () => {
     }
   }
 
-  function mountComponent(
+  function renderComponent(
     props: Record<string, unknown> = {},
     options: {
       provide?: Record<string, unknown>
@@ -100,68 +101,76 @@ describe('TreeExplorerV2Node', () => {
     } = {}
   ) {
     const treeItemStub = options.treeItemStub ?? createTreeItemStub()
-    return {
-      wrapper: mount(TreeExplorerV2Node, {
-        global: {
-          plugins: [i18n],
-          stubs: {
-            TreeItem: treeItemStub.stub,
-            Teleport: { template: '<div />' }
-          },
-          provide: {
-            ...options.provide
-          }
+    const onNodeClick = vi.fn()
+    const { container } = render(TreeExplorerV2Node, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          TreeItem: treeItemStub.stub,
+          Teleport: { template: '<div />' }
         },
-        props: {
-          item: createMockItem('node'),
-          ...props
+        provide: {
+          ...options.provide
         }
-      }),
-      treeItemStub
-    }
+      },
+      props: {
+        item: createMockItem('node'),
+        onNodeClick,
+        ...props
+      }
+    })
+    return { container, treeItemStub, onNodeClick }
+  }
+
+  function getTreeNode(container: Element) {
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    return container.querySelector('div.group\\/tree-node')! as HTMLElement
   }
 
   describe('handleClick', () => {
     it('emits nodeClick event when clicked', async () => {
-      const { wrapper } = mountComponent({
+      const user = userEvent.setup()
+      const { container, onNodeClick } = renderComponent({
         item: createMockItem('node')
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('click')
+      const nodeDiv = getTreeNode(container)
+      await user.click(nodeDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
-      expect(wrapper.emitted('nodeClick')?.[0]?.[0]).toMatchObject({
+      expect(onNodeClick).toHaveBeenCalled()
+      expect(onNodeClick.mock.calls[0][0]).toMatchObject({
         type: 'node',
         label: 'Test Label'
       })
     })
 
     it('calls handleToggle for folder items', async () => {
+      const user = userEvent.setup()
       const treeItemStub = createTreeItemStub()
-      const { wrapper } = mountComponent(
+      const { container, onNodeClick } = renderComponent(
         { item: createMockItem('folder') },
         { treeItemStub }
       )
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('click')
+      const folderDiv = getTreeNode(container)
+      await user.click(folderDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(onNodeClick).toHaveBeenCalled()
       expect(treeItemStub.handleToggle).toHaveBeenCalled()
     })
 
     it('does not call handleToggle for node items', async () => {
+      const user = userEvent.setup()
       const treeItemStub = createTreeItemStub()
-      const { wrapper } = mountComponent(
+      const { container, onNodeClick } = renderComponent(
         { item: createMockItem('node') },
         { treeItemStub }
       )
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('click')
+      const nodeDiv = getTreeNode(container)
+      await user.click(nodeDiv)
 
-      expect(wrapper.emitted('nodeClick')).toBeTruthy()
+      expect(onNodeClick).toHaveBeenCalled()
       expect(treeItemStub.handleToggle).not.toHaveBeenCalled()
     })
   })
@@ -171,7 +180,7 @@ describe('TreeExplorerV2Node', () => {
       const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
       const nodeItem = createMockItem('node')
 
-      const { wrapper } = mountComponent(
+      const { container } = renderComponent(
         { item: nodeItem },
         {
           provide: {
@@ -180,8 +189,8 @@ describe('TreeExplorerV2Node', () => {
         }
       )
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('contextmenu')
+      const nodeDiv = getTreeNode(container)
+      await fireEvent.contextMenu(nodeDiv)
 
       expect(contextMenuNode.value).toEqual(nodeItem.value)
     })
@@ -193,7 +202,7 @@ describe('TreeExplorerV2Node', () => {
         label: 'Stale'
       } as RenderedTreeExplorerNode)
 
-      const { wrapper } = mountComponent(
+      const { container } = renderComponent(
         { item: createMockItem('folder') },
         {
           provide: {
@@ -202,8 +211,8 @@ describe('TreeExplorerV2Node', () => {
         }
       )
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('contextmenu')
+      const folderDiv = getTreeNode(container)
+      await fireEvent.contextMenu(folderDiv)
 
       expect(contextMenuNode.value).toBeNull()
     })
@@ -216,47 +225,53 @@ describe('TreeExplorerV2Node', () => {
 
     it('shows delete button for user blueprints', () => {
       mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', {
           data: { name: 'SubgraphBlueprint.test' }
         })
       })
 
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(true)
+      expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument()
     })
 
     it('hides delete button for non-blueprint nodes', () => {
       mockIsUserBlueprint.mockReturnValue(false)
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', {
           data: { name: 'KSampler' }
         })
       })
 
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(false)
+      expect(
+        screen.queryByRole('button', { name: 'Delete' })
+      ).not.toBeInTheDocument()
     })
 
     it('always shows bookmark button', () => {
       mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', {
           data: { name: 'SubgraphBlueprint.test' }
         })
       })
 
-      expect(wrapper.find('[aria-label="icon.bookmark"]').exists()).toBe(true)
+      expect(
+        screen.getByRole('button', { name: 'icon.bookmark' })
+      ).toBeInTheDocument()
     })
 
     it('calls deleteBlueprint when delete button is clicked', async () => {
+      const user = userEvent.setup()
       mockIsUserBlueprint.mockReturnValue(true)
       const nodeName = 'SubgraphBlueprint.test'
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', {
           data: { name: nodeName }
         })
       })
 
-      await wrapper.find('[aria-label="Delete"]').trigger('click')
+      const deleteButton = screen.getByRole('button', { name: 'Delete' })
+      await user.click(deleteButton)
 
       expect(mockDeleteBlueprint).toHaveBeenCalledWith(nodeName)
     })
@@ -264,40 +279,47 @@ describe('TreeExplorerV2Node', () => {
 
   describe('rendering', () => {
     it('renders node icon for node type', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node')
       })
 
-      expect(wrapper.find('i.icon-\\[comfy--node\\]').exists()).toBe(true)
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector('i.icon-\\[comfy--node\\]')).toBeTruthy()
     })
 
     it('renders folder icon for folder type', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder', { icon: 'icon-[lucide--folder]' })
       })
 
-      expect(wrapper.find('i.icon-\\[lucide--folder\\]').exists()).toBe(true)
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      expect(
+        container.querySelector('i.icon-\\[lucide--folder\\]')
+      ).toBeTruthy()
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
     })
 
     it('renders label text', () => {
-      const { wrapper } = mountComponent({
+      renderComponent({
         item: createMockItem('node', { label: 'My Node' })
       })
 
-      expect(wrapper.text()).toContain('My Node')
+      expect(screen.getByText('My Node')).toBeInTheDocument()
     })
 
     it('renders chevron for folder with children', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: {
           ...createMockItem('folder'),
           hasChildren: true
         }
       })
 
-      expect(wrapper.find('i.icon-\\[lucide--chevron-down\\]').exists()).toBe(
-        true
-      )
+      /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+      expect(
+        container.querySelector('i.icon-\\[lucide--chevron-down\\]')
+      ).toBeTruthy()
+      /* eslint-enable testing-library/no-container, testing-library/no-node-access */
     })
   })
 
@@ -307,75 +329,75 @@ describe('TreeExplorerV2Node', () => {
     })
 
     it('sets draggable attribute on node items', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node')
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      expect(nodeDiv.attributes('draggable')).toBe('true')
+      const nodeDiv = getTreeNode(container)
+      expect(nodeDiv.getAttribute('draggable')).toBe('true')
     })
 
     it('does not set draggable on folder items', () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder')
       })
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      expect(folderDiv.attributes('draggable')).toBeUndefined()
+      const folderDiv = getTreeNode(container)
+      expect(folderDiv.getAttribute('draggable')).toBeNull()
     })
 
     it('calls startDrag with native mode on dragstart', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
-      await nodeDiv.trigger('dragstart')
+      const nodeDiv = getTreeNode(container)
+      await fireEvent.dragStart(nodeDiv)
 
       expect(mockStartDrag).toHaveBeenCalledWith(mockData, 'native')
     })
 
     it('does not call startDrag for folder items on dragstart', async () => {
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('folder')
       })
 
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('dragstart')
+      const folderDiv = getTreeNode(container)
+      await fireEvent.dragStart(folderDiv)
 
       expect(mockStartDrag).not.toHaveBeenCalled()
     })
 
     it('calls handleNativeDrop on dragend with drop coordinates', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      const nodeDiv = getTreeNode(container)
 
-      await nodeDiv.trigger('dragstart')
+      await fireEvent.dragStart(nodeDiv)
 
       const dragEndEvent = new DragEvent('dragend', { bubbles: true })
       Object.defineProperty(dragEndEvent, 'clientX', { value: 100 })
       Object.defineProperty(dragEndEvent, 'clientY', { value: 200 })
 
-      await nodeDiv.element.dispatchEvent(dragEndEvent)
-      await wrapper.vm.$nextTick()
+      nodeDiv.dispatchEvent(dragEndEvent)
+      await nextTick()
 
       expect(mockHandleNativeDrop).toHaveBeenCalledWith(100, 200)
     })
 
     it('calls handleNativeDrop regardless of dropEffect', async () => {
       const mockData = { name: 'TestNode' }
-      const { wrapper } = mountComponent({
+      const { container } = renderComponent({
         item: createMockItem('node', { data: mockData })
       })
 
-      const nodeDiv = wrapper.find('div.group\\/tree-node')
+      const nodeDiv = getTreeNode(container)
 
-      await nodeDiv.trigger('dragstart')
+      await fireEvent.dragStart(nodeDiv)
       mockHandleNativeDrop.mockClear()
 
       const dragEndEvent = new DragEvent('dragend', { bubbles: true })
@@ -385,8 +407,8 @@ describe('TreeExplorerV2Node', () => {
         value: { dropEffect: 'none' }
       })
 
-      await nodeDiv.element.dispatchEvent(dragEndEvent)
-      await wrapper.vm.$nextTick()
+      nodeDiv.dispatchEvent(dragEndEvent)
+      await nextTick()
 
       expect(mockHandleNativeDrop).toHaveBeenCalledWith(300, 400)
     })

src/components/common/TreeExplorerV2Node.vue

@@ -26,28 +26,35 @@
         </slot>
       </span>
       <div class="flex shrink-0 items-center gap-0.5">
-        <button
+        <Button
           v-if="isUserBlueprint"
-          :class="cn(ACTION_BTN_CLASS, 'text-destructive')"
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
           :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
-          <i class="icon-[lucide--trash-2] text-xs" />
-        </button>
-        <button
-          :class="cn(ACTION_BTN_CLASS, 'text-muted-foreground')"
+          <i class="icon-[lucide--trash-2] bg-destructive-background" />
+        </Button>
+        <Button
+          v-if="isUserBlueprint"
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
+          :aria-label="$t('g.edit')"
+          @click.stop="editBlueprint"
+        >
+          <i class="icon-[lucide--square-pen]" />
+        </Button>
+        <Button
+          variant="muted-textonly"
+          size="icon-sm"
+          class="opacity-0 group-hover/tree-node:opacity-100"
           :aria-label="$t('icon.bookmark')"
           @click.stop="toggleBookmark"
         >
-          <i
-            :class="
-              cn(
-                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
-                'text-xs'
-              )
-            "
-          />
-        </button>
+          <i :class="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'" />
+        </Button>
       </div>
     </div>
 
@@ -100,6 +107,7 @@ import { computed, inject } from 'vue'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import Button from '@/components/ui/button/Button.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
@@ -114,9 +122,6 @@ defineOptions({
 const ROW_CLASS =
   'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input rounded'
 
-const ACTION_BTN_CLASS =
-  'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent opacity-0 group-hover/tree-node:opacity-100 hover:text-foreground'
-
 const { item } = defineProps<{
   item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
 }>()
@@ -154,6 +159,13 @@ function deleteBlueprint() {
     void subgraphStore.deleteBlueprint(nodeDef.value.name)
   }
 }
+const editBlueprint = async () => {
+  if (!nodeDef.value)
+    throw new Error(
+      'Failed to edit subgraph blueprint lacking backing node data'
+    )
+  await useSubgraphStore().editBlueprint(nodeDef.value.name)
+}
 
 const {
   previewRef,

src/components/common/VirtualGrid.test.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { Ref } from 'vue'
 import { nextTick, ref } from 'vue'
@@ -46,7 +46,7 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -60,16 +60,14 @@ describe('VirtualGrid', () => {
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.getAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBeGreaterThan(0)
     expect(renderedItems.length).toBeLessThan(items.length)
-
-    wrapper.unmount()
   })
 
   it('provides correct index in slot props', async () => {
@@ -79,7 +77,7 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -94,7 +92,7 @@ describe('VirtualGrid', () => {
           return null
         }
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
@@ -104,8 +102,6 @@ describe('VirtualGrid', () => {
     for (let i = 1; i < receivedIndices.length; i++) {
       expect(receivedIndices[i]).toBe(receivedIndices[i - 1] + 1)
     }
-
-    wrapper.unmount()
   })
 
   it('respects maxColumns prop', async () => {
@@ -114,28 +110,29 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 200
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const { container } = render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
         maxColumns: 2
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const gridElement = wrapper.find('[style*="display: grid"]')
-    expect(gridElement.exists()).toBe(true)
-
-    const gridEl = gridElement.element as HTMLElement
-    expect(gridEl.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
-
-    wrapper.unmount()
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const gridElement = container.querySelector(
+      '[style*="display: grid"]'
+    ) as HTMLElement
+    expect(gridElement).not.toBeNull()
+    expect(gridElement.style.gridTemplateColumns).toBe(
+      'repeat(2, minmax(0, 1fr))'
+    )
   })
 
   it('renders empty when no items provided', async () => {
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items: [],
         gridStyle: defaultGridStyle
@@ -149,10 +146,8 @@ describe('VirtualGrid', () => {
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.queryAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBe(0)
-
-    wrapper.unmount()
   })
 
   it('emits approach-end for single-column list when scrolled near bottom', async () => {
@@ -161,7 +156,9 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 600
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const onApproachEnd = vi.fn()
+
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: {
@@ -171,19 +168,20 @@ describe('VirtualGrid', () => {
         defaultItemHeight: 48,
         defaultItemWidth: 200,
         maxColumns: 1,
-        bufferRows: 1
+        bufferRows: 1,
+        onApproachEnd
       },
       slots: {
         item: `<template #item="{ item }">
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
+    expect(onApproachEnd).not.toHaveBeenCalled()
 
     // Scroll near the end: 50 items * 48px = 2400px total
     // viewRows = ceil(600/48) = 13, buffer = 1
@@ -195,9 +193,7 @@ describe('VirtualGrid', () => {
     mockedScrollY.value = 1680
     await nextTick()
 
-    expect(wrapper.emitted('approach-end')).toBeDefined()
-
-    wrapper.unmount()
+    expect(onApproachEnd).toHaveBeenCalled()
   })
 
   it('does not emit approach-end without maxColumns in single-column layout', async () => {
@@ -208,7 +204,9 @@ describe('VirtualGrid', () => {
     mockedHeight.value = 600
     mockedScrollY.value = 0
 
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    const onApproachEnd = vi.fn()
+
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: {
@@ -218,14 +216,15 @@ describe('VirtualGrid', () => {
         defaultItemHeight: 48,
         defaultItemWidth: 200,
         // No maxColumns — cols will be floor(400/200) = 2
-        bufferRows: 1
+        bufferRows: 1,
+        onApproachEnd
       },
       slots: {
         item: `<template #item="{ item }">
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
@@ -237,9 +236,7 @@ describe('VirtualGrid', () => {
     // With cols=2, toCol = (35+1+13)*2 = 98, which exceeds items.length (50)
     // remainingCol = 50-98 = -48, hasMoreToRender = false → isNearEnd = false
     // The approach-end never fires at the correct scroll position
-    expect(wrapper.emitted('approach-end')).toBeUndefined()
-
-    wrapper.unmount()
+    expect(onApproachEnd).not.toHaveBeenCalled()
   })
 
   it('forces cols to maxColumns when maxColumns is finite', async () => {
@@ -248,7 +245,7 @@ describe('VirtualGrid', () => {
     mockedScrollY.value = 0
 
     const items = createItems(20)
-    const wrapper = mount(VirtualGrid<TestItem>, {
+    render(VirtualGrid, {
       props: {
         items,
         gridStyle: defaultGridStyle,
@@ -262,15 +259,13 @@ describe('VirtualGrid', () => {
           <div class="test-item">{{ item.name }}</div>
         </template>`
       },
-      attachTo: document.body
+      container: document.body.appendChild(document.createElement('div'))
     })
 
     await nextTick()
 
-    const renderedItems = wrapper.findAll('.test-item')
+    const renderedItems = screen.getAllByText(/^Item \d+$/)
     expect(renderedItems.length).toBeGreaterThan(0)
     expect(renderedItems.length % 4).toBe(0)
-
-    wrapper.unmount()
   })
 })

src/components/common/WorkflowActionsList.test.ts

@@ -1,4 +1,5 @@
-import { shallowMount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
 import WorkflowActionsList from '@/components/common/WorkflowActionsList.vue'
@@ -7,10 +8,23 @@ import type {
   WorkflowMenuItem
 } from '@/types/workflowMenuItem'
 
-function createWrapper(items: WorkflowMenuItem[]) {
-  return shallowMount(WorkflowActionsList, {
-    props: { items },
-    global: { renderStubDefaultSlot: true }
+const MenuItemStub = {
+  template:
+    '<div data-testid="menu-item" @click="$emit(\'select\')"><slot /></div>',
+  emits: ['select']
+}
+
+const SeparatorStub = {
+  template: '<hr data-testid="menu-separator" />'
+}
+
+function renderList(items: WorkflowMenuItem[]) {
+  return render(WorkflowActionsList, {
+    props: {
+      items,
+      itemComponent: MenuItemStub,
+      separatorComponent: SeparatorStub
+    }
   })
 }
 
@@ -20,10 +34,9 @@ describe('WorkflowActionsList', () => {
       { id: 'save', label: 'Save', icon: 'pi pi-save', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).toContain('Save')
-    expect(wrapper.find('.pi-save').exists()).toBe(true)
+    expect(screen.getByText('Save')).toBeInTheDocument()
   })
 
   it('renders separator items', () => {
@@ -33,24 +46,23 @@ describe('WorkflowActionsList', () => {
       { id: 'after', label: 'After', icon: 'pi pi-b', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
-    const html = wrapper.html()
+    renderList(items)
 
-    expect(html).toContain('dropdown-menu-separator-stub')
-    expect(wrapper.text()).toContain('Before')
-    expect(wrapper.text()).toContain('After')
+    screen.getByTestId('menu-separator')
+    screen.getByText('Before')
+    screen.getByText('After')
   })
 
   it('dispatches command on select', async () => {
+    const user = userEvent.setup()
     const command = vi.fn()
     const items: WorkflowMenuItem[] = [
       { id: 'action', label: 'Action', icon: 'pi pi-play', command }
     ]
 
-    const wrapper = createWrapper(items)
-    const item = wrapper.findComponent({ name: 'DropdownMenuItem' })
-    await item.vm.$emit('select')
+    renderList(items)
 
+    await user.click(screen.getByTestId('menu-item'))
     expect(command).toHaveBeenCalledOnce()
   })
 
@@ -65,9 +77,9 @@ describe('WorkflowActionsList', () => {
       }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).toContain('NEW')
+    screen.getByText('NEW')
   })
 
   it('does not render items with visible set to false', () => {
@@ -82,10 +94,10 @@ describe('WorkflowActionsList', () => {
       { id: 'shown', label: 'Shown Item', icon: 'pi pi-eye', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).not.toContain('Hidden Item')
-    expect(wrapper.text()).toContain('Shown Item')
+    expect(screen.queryByText('Hidden Item')).toBeNull()
+    screen.getByText('Shown Item')
   })
 
   it('does not render badge when absent', () => {
@@ -93,8 +105,8 @@ describe('WorkflowActionsList', () => {
       { id: 'plain', label: 'Plain', icon: 'pi pi-check', command: vi.fn() }
     ]
 
-    const wrapper = createWrapper(items)
+    renderList(items)
 
-    expect(wrapper.text()).not.toContain('NEW')
+    expect(screen.queryByText('NEW')).toBeNull()
   })
 })

src/components/curve/CurveEditor.test.ts

@@ -1,86 +1,91 @@
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 
 import type { CurvePoint } from './types'
 
 import CurveEditor from './CurveEditor.vue'
 
-function mountEditor(points: CurvePoint[], extraProps = {}) {
-  return mount(CurveEditor, {
+function renderEditor(points: CurvePoint[], extraProps = {}) {
+  const { container } = render(CurveEditor, {
     props: { modelValue: points, ...extraProps }
   })
+  return { container }
 }
 
-function getCurvePath(wrapper: ReturnType<typeof mount>) {
-  return wrapper.find('[data-testid="curve-path"]')
+function getCurvePath() {
+  return screen.getByTestId('curve-path')
 }
 
 describe('CurveEditor', () => {
   it('renders SVG with curve path', () => {
-    const wrapper = mountEditor([
+    const { container } = renderEditor([
       [0, 0],
       [1, 1]
     ])
-    expect(wrapper.find('svg').exists()).toBe(true)
-    const curvePath = getCurvePath(wrapper)
-    expect(curvePath.exists()).toBe(true)
-    expect(curvePath.attributes('d')).toBeTruthy()
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelector('svg')).toBeInTheDocument()
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
+    const curvePath = getCurvePath()
+    expect(curvePath).toBeInTheDocument()
+    expect(curvePath.getAttribute('d')).toBeTruthy()
   })
 
   it('renders a circle for each control point', () => {
-    const wrapper = mountEditor([
+    const { container } = renderEditor([
       [0, 0],
       [0.5, 0.7],
       [1, 1]
     ])
-    expect(wrapper.findAll('circle')).toHaveLength(3)
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+    expect(container.querySelectorAll('circle')).toHaveLength(3)
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 
   it('renders histogram path when provided', () => {
     const histogram = new Uint32Array(256)
     for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const wrapper = mountEditor(
+    renderEditor(
       [
         [0, 0],
         [1, 1]
       ],
       { histogram }
     )
-    const histogramPath = wrapper.find('[data-testid="histogram-path"]')
-    expect(histogramPath.exists()).toBe(true)
-    expect(histogramPath.attributes('d')).toContain('M0,1')
+    const histogramPath = screen.getByTestId('histogram-path')
+    expect(histogramPath).toBeInTheDocument()
+    expect(histogramPath.getAttribute('d')).toContain('M0,1')
   })
 
   it('does not render histogram path when not provided', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0, 0],
       [1, 1]
     ])
-    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(false)
+    expect(screen.queryByTestId('histogram-path')).not.toBeInTheDocument()
   })
 
   it('returns empty path with fewer than 2 points', () => {
-    const wrapper = mountEditor([[0.5, 0.5]])
-    expect(getCurvePath(wrapper).attributes('d')).toBe('')
+    renderEditor([[0.5, 0.5]])
+    expect(getCurvePath().getAttribute('d')).toBe('')
   })
 
   it('generates path starting with M and containing L segments', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0, 0],
       [0.5, 0.8],
       [1, 1]
     ])
-    const d = getCurvePath(wrapper).attributes('d')!
+    const d = getCurvePath().getAttribute('d')!
     expect(d).toMatch(/^M/)
     expect(d).toContain('L')
   })
 
   it('curve path only spans the x-range of control points', () => {
-    const wrapper = mountEditor([
+    renderEditor([
       [0.2, 0.3],
       [0.8, 0.9]
     ])
-    const d = getCurvePath(wrapper).attributes('d')!
+    const d = getCurvePath().getAttribute('d')!
     const xValues = d
       .split(/[ML]/)
       .filter(Boolean)
@@ -95,19 +100,22 @@ describe('CurveEditor', () => {
       [0.5, 0.5],
       [1, 1]
     ]
-    const wrapper = mountEditor(points)
-    expect(wrapper.findAll('circle')).toHaveLength(3)
+    const { container } = renderEditor(points)
 
-    await wrapper.findAll('circle')[1].trigger('pointerdown', {
+    /* eslint-disable testing-library/no-container, testing-library/no-node-access, testing-library/prefer-user-event */
+    expect(container.querySelectorAll('circle')).toHaveLength(3)
+
+    await fireEvent.pointerDown(container.querySelectorAll('circle')[1], {
       button: 2,
       pointerId: 1
     })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
+    expect(container.querySelectorAll('circle')).toHaveLength(2)
 
-    await wrapper.findAll('circle')[0].trigger('pointerdown', {
+    await fireEvent.pointerDown(container.querySelectorAll('circle')[0], {
       button: 2,
       pointerId: 1
     })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
+    expect(container.querySelectorAll('circle')).toHaveLength(2)
+    /* eslint-enable testing-library/no-container, testing-library/no-node-access */
   })
 })

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -40,7 +40,10 @@
 
     <template #contentFilter>
       <div class="relative flex flex-wrap justify-between gap-2 px-6 pb-4">
-        <div class="flex flex-wrap gap-2">
+        <div
+          :ref="primeVueOverlay.overlayScopeRef"
+          class="flex flex-wrap gap-2"
+        >
           <!-- Model Filter -->
           <MultiSelect
             v-model="selectedModelObjects"
@@ -48,6 +51,7 @@
             class="w-[250px]"
             :label="modelFilterLabel"
             :options="modelOptions"
+            :content-style="selectContentStyle"
             :show-search-box="true"
             :show-selected-count="true"
             :show-clear-button="true"
@@ -62,6 +66,7 @@
             v-model="selectedUseCaseObjects"
             :label="useCaseFilterLabel"
             :options="useCaseOptions"
+            :content-style="selectContentStyle"
             :show-search-box="true"
             :show-selected-count="true"
             :show-clear-button="true"
@@ -76,6 +81,7 @@
             v-model="selectedRunsOnObjects"
             :label="runsOnFilterLabel"
             :options="runsOnOptions"
+            :content-style="selectContentStyle"
             :show-search-box="true"
             :show-selected-count="true"
             :show-clear-button="true"
@@ -92,6 +98,7 @@
             v-model="sortBy"
             :label="$t('templateWorkflows.sorting', 'Sort by')"
             :options="sortOptions"
+            :content-style="selectContentStyle"
             class="w-62.5"
           >
             <template #icon>
@@ -175,7 +182,6 @@
           <!-- Actual Template Cards -->
           <CardContainer
             v-for="template in isLoading ? [] : displayTemplates"
-            v-show="isTemplateVisibleOnDistribution(template)"
             :key="template.name"
             ref="cardRefs"
             size="tall"
@@ -417,14 +423,13 @@ import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
+import { usePrimeVueOverlayChildStyle } from '@/composables/usePopoverSizing'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
-import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
@@ -444,29 +449,6 @@ onMounted(() => {
   sessionStartTime.value = Date.now()
 })
 
-const systemStatsStore = useSystemStatsStore()
-
-const distributions = computed(() => {
-  switch (__DISTRIBUTION__) {
-    case 'cloud':
-      return [TemplateIncludeOnDistributionEnum.Cloud]
-    case 'localhost':
-      return [TemplateIncludeOnDistributionEnum.Local]
-    case 'desktop':
-    default:
-      if (systemStatsStore.systemStats?.system.os === 'darwin') {
-        return [
-          TemplateIncludeOnDistributionEnum.Desktop,
-          TemplateIncludeOnDistributionEnum.Mac
-        ]
-      }
-      return [
-        TemplateIncludeOnDistributionEnum.Desktop,
-        TemplateIncludeOnDistributionEnum.Windows
-      ]
-  }
-})
-
 // Wrap onClose to track session end
 const onClose = () => {
   if (isCloud) {
@@ -586,7 +568,7 @@ const {
   totalCount,
   resetFilters,
   loadFuseOptions
-} = useTemplateFiltering(navigationFilteredTemplates, selectedNavItem)
+} = useTemplateFiltering(navigationFilteredTemplates)
 
 /**
  * Coordinates state between the selected navigation item and the sort order to
@@ -658,6 +640,8 @@ const selectedRunsOnObjects = computed({
 const loadingTemplate = ref<string | null>(null)
 const hoveredTemplate = ref<string | null>(null)
 const cardRefs = ref<HTMLElement[]>([])
+const primeVueOverlay = usePrimeVueOverlayChildStyle()
+const selectContentStyle = primeVueOverlay.contentStyle
 
 // Force re-render key for templates when sorting changes
 const templateListKey = ref(0)
@@ -852,14 +836,6 @@ const { isLoading } = useAsyncState(
   }
 )
 
-const isTemplateVisibleOnDistribution = (template: TemplateInfo) => {
-  return (template.includeOnDistributions?.length ?? 0) > 0
-    ? distributions.value.some((d) =>
-        template.includeOnDistributions?.includes(d)
-      )
-    : true
-}
-
 onBeforeUnmount(() => {
   cardRefs.value = [] // Release DOM refs
 })

src/components/dialog/content/credit/CreditTopUpOption.test.ts

@@ -1,6 +1,7 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { createI18n } from 'vue-i18n'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import CreditTopUpOption from '@/components/dialog/content/credit/CreditTopUpOption.vue'
 
@@ -10,10 +11,16 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-const mountOption = (
-  props?: Partial<{ credits: number; description: string; selected: boolean }>
-) =>
-  mount(CreditTopUpOption, {
+function renderOption(
+  props?: Partial<{
+    credits: number
+    description: string
+    selected: boolean
+    onSelect: () => void
+  }>
+) {
+  const user = userEvent.setup()
+  const result = render(CreditTopUpOption, {
     props: {
       credits: 1000,
       description: '~100 videos*',
@@ -24,25 +31,30 @@ const mountOption = (
       plugins: [i18n]
     }
   })
+  return { user, ...result }
+}
 
 describe('CreditTopUpOption', () => {
   it('renders credit amount and description', () => {
-    const wrapper = mountOption({ credits: 5000, description: '~500 videos*' })
-    expect(wrapper.text()).toContain('5,000')
-    expect(wrapper.text()).toContain('~500 videos*')
+    renderOption({ credits: 5000, description: '~500 videos*' })
+    expect(screen.getByText('5,000')).toBeInTheDocument()
+    expect(screen.getByText('~500 videos*')).toBeInTheDocument()
   })
 
   it('applies unselected styling when not selected', () => {
-    const wrapper = mountOption({ selected: false })
-    expect(wrapper.find('div').classes()).toContain(
-      'bg-component-node-disabled'
+    const { container } = renderOption({ selected: false })
+    // eslint-disable-next-line testing-library/no-node-access
+    const rootDiv = container.firstElementChild as HTMLElement
+    expect(rootDiv).toHaveClass(
+      'bg-component-node-disabled',
+      'border-transparent'
     )
-    expect(wrapper.find('div').classes()).toContain('border-transparent')
   })
 
   it('emits select event when clicked', async () => {
-    const wrapper = mountOption()
-    await wrapper.find('div').trigger('click')
-    expect(wrapper.emitted('select')).toHaveLength(1)
+    const selectSpy = vi.fn()
+    const { user } = renderOption({ onSelect: selectSpy })
+    await user.click(screen.getByText('1,000'))
+    expect(selectSpy).toHaveBeenCalledOnce()
   })
 })

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="keybinding-panel flex flex-col gap-2">
+  <div
+    :ref="primeVueOverlay.overlayScopeRef"
+    class="keybinding-panel flex flex-col gap-2"
+  >
     <Teleport defer to="#keybinding-panel-header">
       <SearchInput
         v-model="filters['global'].value"
@@ -15,10 +18,12 @@
       <div class="flex items-center gap-2">
         <KeybindingPresetToolbar
           :preset-names="presetNames"
+          :content-style="keybindingOverlayContentStyle"
           @presets-changed="refreshPresetList"
         />
         <DropdownMenu
           :entries="menuEntries"
+          :style="keybindingOverlayContentStyle"
           icon="icon-[lucide--ellipsis]"
           item-class="text-sm gap-2"
           button-size="unset"
@@ -235,6 +240,7 @@
       </ContextMenuTrigger>
       <ContextMenuPortal>
         <ContextMenuContent
+          :style="keybindingOverlayContentStyle"
           class="z-1200 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
         >
           <ContextMenuItem
@@ -311,6 +317,7 @@ import { showConfirmDialog } from '@/components/dialog/confirm/confirmDialog'
 import Button from '@/components/ui/button/Button.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import { useEditKeybindingDialog } from '@/composables/useEditKeybindingDialog'
+import { usePrimeVueOverlayChildStyle } from '@/composables/usePopoverSizing'
 import type { KeybindingImpl } from '@/platform/keybindings/keybinding'
 import { useKeybindingService } from '@/platform/keybindings/keybindingService'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
@@ -334,6 +341,8 @@ const settingStore = useSettingStore()
 const commandStore = useCommandStore()
 const dialogStore = useDialogStore()
 const { t } = useI18n()
+const primeVueOverlay = usePrimeVueOverlayChildStyle()
+const keybindingOverlayContentStyle = primeVueOverlay.contentStyle
 
 const presetNames = ref<string[]>([])
 

src/components/dialog/content/setting/SettingItem.test.ts

@@ -1,12 +1,15 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tag from 'primevue/tag'
 import Tooltip from 'primevue/tooltip'
+import { defineComponent, h } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import type { SettingParams } from '@/platform/settings/types'
 
 const i18n = createI18n({
   legacy: false,
@@ -17,60 +20,72 @@ vi.mock('@/utils/formatUtil', () => ({
   normalizeI18nKey: vi.fn()
 }))
 
+const FormItemStub = defineComponent({
+  name: 'FormItem',
+  props: {
+    item: { type: Object, default: () => ({}) },
+    id: { type: String, default: undefined },
+    formValue: { type: null, default: undefined }
+  },
+  setup(props) {
+    return () =>
+      h('div', { 'data-testid': 'form-item-data' }, JSON.stringify(props.item))
+  }
+})
+
 describe('SettingItem', () => {
-  const mountComponent = (props: Record<string, unknown>, options = {}) => {
-    return mount(SettingItem, {
+  function renderComponent(setting: SettingParams) {
+    return render(SettingItem, {
       global: {
         plugins: [PrimeVue, i18n, createPinia()],
-        components: {
-          Tag
-        },
-        directives: {
-          tooltip: Tooltip
-        },
+        components: { Tag },
         stubs: {
+          FormItem: FormItemStub,
           'i-material-symbols:experiment-outline': true
-        }
+        },
+        directives: { tooltip: Tooltip }
       },
-      // @ts-expect-error - Test utility accepts flexible props for testing edge cases
-      props,
-      ...options
+      props: { setting }
     })
   }
 
+  function getFormItemData(container: Element) {
+    // eslint-disable-next-line testing-library/no-node-access
+    const el = container.querySelector('[data-testid="form-item-data"]')
+    return JSON.parse(el!.textContent!)
+  }
+
   it('translates options that use legacy type', () => {
-    const wrapper = mountComponent({
-      setting: {
+    const { container } = renderComponent(
+      fromAny({
         id: 'Comfy.NodeInputConversionSubmenus',
         name: 'Node Input Conversion Submenus',
         type: 'combo',
-        value: 'Top',
+        defaultValue: 'Top',
         options: () => ['Correctly Translated']
-      }
-    })
+      })
+    )
 
-    // Check the FormItem component's item prop for the options
-    const formItem = wrapper.findComponent({ name: 'FormItem' })
-    const options = formItem.props('item').options
-    expect(options).toEqual([
+    const data = getFormItemData(container)
+    expect(data.options).toEqual([
       { text: 'Correctly Translated', value: 'Correctly Translated' }
     ])
   })
 
   it('handles tooltips with @ symbols without errors', () => {
-    const wrapper = mountComponent({
-      setting: {
-        id: 'TestSetting',
+    const { container } = renderComponent(
+      fromAny({
+        id: 'Comfy.NodeInputConversionSubmenus',
         name: 'Test Setting',
         type: 'boolean',
+        defaultValue: false,
         tooltip:
           'This will load a larger version of @mtb/markdown-parser that bundles shiki'
-      }
-    })
+      })
+    )
 
-    // Should not throw an error and tooltip should be preserved as-is
-    const formItem = wrapper.findComponent({ name: 'FormItem' })
-    expect(formItem.props('item').tooltip).toBe(
+    const data = getFormItemData(container)
+    expect(data.tooltip).toBe(
       'This will load a larger version of @mtb/markdown-parser that bundles shiki'
     )
   })