Fix typo

linear mode wasn't initializing properly since the current workflow
didn't have a standard 'save image' or 'preview image' output

.claude/settings.json

@@ -1,9 +1,86 @@
 {
-  "permissions": {
-    "allow": [
-      "Bash(pnpx vitest run --testPathPattern=\"draftCacheV2.property\")",
-      "Bash(pnpx vitest run \"draftCacheV2.property\")",
-      "Bash(node -e \"const fc = require\\(''fast-check''\\); console.log\\(Object.keys\\(fc\\).filter\\(k => k.includes\\(''string''\\)\\).join\\('', ''\\)\\)\")"
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "if": "Bash(tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(vue-tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpm exec tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx oxlint *)",
+            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx stylelint *)",
+            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
+          }
+        ]
+      }
     ]
   }
 }

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

@@ -1,14 +1,23 @@
-# Automated bi-weekly workflow to bump ComfyUI frontend RC releases
-name: 'Release: Bi-weekly ComfyUI'
+# Release workflow for ComfyUI frontend: version bump → PyPI publish → ComfyUI PR.
+# Runs on a bi-weekly schedule for minor releases, or manually for patch/hotfix releases.
+name: 'Release: ComfyUI'
 
 on:
-  # Schedule for Monday at 12:00 PM PST (20:00 UTC)
+  # Bi-weekly schedule: Monday at 20:00 UTC
   schedule:
     - cron: '0 20 * * 1'
 
-  # Allow manual triggering (bypasses bi-weekly check)
+  # Manual trigger for both on-demand minor and patch/hotfix releases
   workflow_dispatch:
     inputs:
+      release_type:
+        description: 'minor = next minor version (bi-weekly cadence), patch = hotfix for current production version'
+        required: true
+        default: 'minor'
+        type: choice
+        options:
+          - minor
+          - patch
       comfyui_fork:
         description: 'ComfyUI fork to use for PR (e.g., Comfy-Org/ComfyUI)'
         required: false
@@ -41,10 +50,11 @@ jobs:
 
       - name: Summary
         run: |
-          echo "## Bi-weekly Check" >> $GITHUB_STEP_SUMMARY
+          echo "## Release Check" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
           echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Release type: ${{ inputs.release_type || 'minor (scheduled)' }}" >> $GITHUB_STEP_SUMMARY
 
   resolve-version:
     needs: check-release-week
@@ -76,6 +86,8 @@ jobs:
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          package_json_file: frontend/package.json
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
@@ -89,6 +101,8 @@ jobs:
       - name: Resolve release information
         id: resolve
         working-directory: frontend
+        env:
+          RELEASE_TYPE: ${{ inputs.release_type || 'minor' }}
         run: |
           set -euo pipefail
 

browser_tests/assets/linear-basic-app-1.json

@@ -0,0 +1,154 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [413, 389],
+      "size": [425.27801513671875, 180.6060791015625],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 5 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [6],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["text, watermark"]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [415, 186],
+      "size": [422.84503173828125, 164.31304931640625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 3 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [473, 609],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [2], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [863, 186],
+      "size": [315, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": 1 },
+        { "name": "positive", "type": "CONDITIONING", "link": 4 },
+        { "name": "negative", "type": "CONDITIONING", "link": 6 },
+        { "name": "latent_image", "type": "LATENT", "link": 2 }
+      ],
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [156680208700286, true, 20, 8, "euler", "normal", 1]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [1209, 188],
+      "size": [210, 46],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 7 },
+        { "name": "vae", "type": "VAE", "link": 8 }
+      ],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0 }
+      ],
+      "properties": {}
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451, 189],
+      "size": [210, 26],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 9 }],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [26, 474],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": [1], "slot_index": 0 },
+        { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
+        { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
+      ],
+      "properties": {},
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    }
+  ],
+  "links": [
+    [1, 4, 0, 3, 0, "MODEL"],
+    [2, 5, 0, 3, 3, "LATENT"],
+    [3, 4, 1, 6, 0, "CLIP"],
+    [4, 6, 0, 3, 1, "CONDITIONING"],
+    [5, 4, 1, 7, 0, "CLIP"],
+    [6, 7, 0, 3, 2, "CONDITIONING"],
+    [7, 3, 0, 8, 0, "LATENT"],
+    [8, 4, 2, 8, 1, "VAE"],
+    [9, 8, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
+    "linearData": {
+      "inputs": [
+        ["3", "seed"],
+        ["3", "steps"],
+        ["3", "cfg"]
+      ],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/linear-basic-app-2.json

@@ -0,0 +1,153 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 7,
+      "type": "CLIPTextEncode",
+      "pos": [413, 389],
+      "size": [425.27801513671875, 180.6060791015625],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 5 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [6],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["text, watermark"]
+    },
+    {
+      "id": 6,
+      "type": "CLIPTextEncode",
+      "pos": [415, 186],
+      "size": [422.84503173828125, 164.31304931640625],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [{ "name": "clip", "type": "CLIP", "link": 3 }],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {},
+      "widgets_values": [
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "EmptyLatentImage",
+      "pos": [473, 609],
+      "size": [315, 106],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [2], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [512, 512, 1]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [863, 186],
+      "size": [315, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": 1 },
+        { "name": "positive", "type": "CONDITIONING", "link": 4 },
+        { "name": "negative", "type": "CONDITIONING", "link": 6 },
+        { "name": "latent_image", "type": "LATENT", "link": 2 }
+      ],
+      "outputs": [
+        { "name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0 }
+      ],
+      "properties": {},
+      "widgets_values": [156680208700286, true, 20, 8, "euler", "normal", 1]
+    },
+    {
+      "id": 8,
+      "type": "VAEDecode",
+      "pos": [1209, 188],
+      "size": [210, 46],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        { "name": "samples", "type": "LATENT", "link": 7 },
+        { "name": "vae", "type": "VAE", "link": 8 }
+      ],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0 }
+      ],
+      "properties": {}
+    },
+    {
+      "id": 9,
+      "type": "SaveImage",
+      "pos": [1451, 189],
+      "size": [210, 26],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [{ "name": "images", "type": "IMAGE", "link": 9 }],
+      "properties": {}
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [26, 474],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": [1], "slot_index": 0 },
+        { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
+        { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
+      ],
+      "properties": {},
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    }
+  ],
+  "links": [
+    [1, 4, 0, 3, 0, "MODEL"],
+    [2, 5, 0, 3, 3, "LATENT"],
+    [3, 4, 1, 6, 0, "CLIP"],
+    [4, 6, 0, 3, 1, "CONDITIONING"],
+    [5, 4, 1, 7, 0, "CLIP"],
+    [6, 7, 0, 3, 2, "CONDITIONING"],
+    [7, 3, 0, 8, 0, "LATENT"],
+    [8, 4, 2, 8, 1, "VAE"],
+    [9, 8, 0, 9, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
+    "linearData": {
+      "inputs": [
+        ["3", "seed"],
+        ["3", "steps"]
+      ],
+      "outputs": ["9"]
+    }
+  },
+  "version": 0.4
+}

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_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/widgets/image_crop_widget.json

@@ -0,0 +1,50 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ImageCropV2",
+      "pos": [50, 50],
+      "size": [400, 500],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [
+        {
+          "x": 0,
+          "y": 0,
+          "width": 512,
+          "height": 512
+        }
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/image_crop_with_source.json

@@ -0,0 +1,100 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 2,
+      "type": "ImageCropV2",
+      "pos": [450, 50],
+      "size": [400, 500],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageCropV2"
+      },
+      "widgets_values": [
+        {
+          "x": 10,
+          "y": 10,
+          "width": 100,
+          "height": 100
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "type": "PreviewImage",
+      "pos": [900, 50],
+      "size": [315, 270],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 1, 0, 2, 0, "IMAGE"],
+    [2, 2, 0, 3, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -414,6 +414,8 @@ export const comfyPageFixture = base.extend<{
     const userId = await comfyPage.setupUser(username)
     comfyPage.userIds[parallelIndex] = userId
 
+    const isVueNodes = testInfo.tags.includes('@vue-nodes')
+
     try {
       await comfyPage.setupSettings({
         'Comfy.UseNewMenu': 'Top',
@@ -436,7 +438,8 @@ export const comfyPageFixture = base.extend<{
         'Comfy.VersionCompatibility.DisableWarnings': true,
         // Disable errors tab to prevent missing model detection from
         // rendering error indicators on nodes during unrelated tests.
-        'Comfy.RightSidePanel.ShowErrorsTab': false
+        'Comfy.RightSidePanel.ShowErrorsTab': false,
+        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true })
       })
     } catch (e) {
       console.error(e)
@@ -448,6 +451,10 @@ export const comfyPageFixture = base.extend<{
 
     await comfyPage.setup()
 
+    if (isVueNodes) {
+      await comfyPage.vueNodes.waitForNodes()
+    }
+
     const needsPerf =
       testInfo.tags.includes('@perf') || testInfo.tags.includes('@audit')
     if (needsPerf) await comfyPage.perf.init()

browser_tests/fixtures/components/OutputHistory.ts

@@ -1,6 +1,6 @@
 import type { Locator, Page } from '@playwright/test'
 
-import { TestIds } from '../selectors'
+import { TestIds } from '@e2e/fixtures/selectors'
 
 const ids = TestIds.outputHistory
 

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -9,13 +9,15 @@ import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
 import { BuilderSelectHelper } from '@e2e/fixtures/helpers/BuilderSelectHelper'
 import { BuilderStepsHelper } from '@e2e/fixtures/helpers/BuilderStepsHelper'
+import { MobileAppHelper } from '@e2e/fixtures/helpers/MobileAppHelper'
 
 export class AppModeHelper {
-  readonly steps: BuilderStepsHelper
   readonly footer: BuilderFooterHelper
+  readonly mobile: MobileAppHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
   readonly outputHistory: OutputHistoryComponent
+  readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -41,11 +43,12 @@ export class AppModeHelper {
   public readonly cancelRunButton: Locator
 
   constructor(private readonly comfyPage: ComfyPage) {
-    this.steps = new BuilderStepsHelper(comfyPage)
+    this.mobile = new MobileAppHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
+    this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -146,6 +149,10 @@ export class AppModeHelper {
     await this.toggleAppMode()
   }
 
+  get centerPanel(): Locator {
+    return this.page.getByTestId(TestIds.linear.centerPanel)
+  }
+
   /**
    * Get the actions menu trigger for a widget in the app mode widget list.
    * @param widgetName Text shown in the widget label (e.g. "seed").

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -51,6 +51,10 @@ export class BuilderSelectHelper {
     return this.comfyPage.page
   }
 
+  get selectedItems(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItem)
+  }
+
   /**
    * Get the actions menu trigger for a builder IoItem (input-select sidebar).
    * @param title The widget title shown in the IoItem.

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,8 +1,8 @@
 import type { WebSocketRoute } from '@playwright/test'
 
 import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import type { ComfyPage } from '../ComfyPage'
-import { createMockJob } from './AssetsHelper'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 
 /**
  * Helper for simulating prompt execution in e2e tests.

browser_tests/fixtures/helpers/MobileAppHelper.ts

@@ -0,0 +1,36 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+export class MobileAppHelper {
+  readonly actionmenu: Locator
+  readonly contentPanel: Locator
+  readonly navigation: Locator
+  readonly navigationTabs: Locator
+  readonly view: Locator
+  readonly workflows: Locator
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.view = this.page.getByTestId(TestIds.linear.mobile)
+    this.actionmenu = this.view.getByTestId(TestIds.linear.mobileActionMenu)
+    this.contentPanel = this.page.getByRole('tabpanel')
+    this.navigation = this.page.getByRole('tablist').filter({ hasText: 'Run' })
+    this.navigationTabs = this.navigation.getByRole('tab')
+    this.workflows = this.view.getByTestId(TestIds.linear.mobileWorkflows)
+  }
+
+  async switchWorkflow(workflowName: string) {
+    await this.workflows.click()
+    await this.page.getByRole('menu').getByText(workflowName).click()
+  }
+  async navigateTab(name: 'run' | 'outputs' | 'assets') {
+    await this.navigation.getByRole('tab', { name }).click()
+  }
+  private get page(): Page {
+    return this.comfyPage.page
+  }
+  async tap(locator: Locator, { count = 1 }: { count?: number } = {}) {
+    for (let i = 0; i < count; i++) await locator.tap()
+  }
+}

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -1,5 +1,7 @@
 import { readFileSync } from 'fs'
 
+import { test } from '@playwright/test'
+
 import type { AppMode } from '@/composables/useAppMode'
 import type {
   ComfyApiWorkflow,
@@ -73,6 +75,9 @@ export class WorkflowHelper {
       assetPath(`${workflowName}.json`)
     )
     await this.comfyPage.nextFrame()
+    if (test.info().tags.includes('@vue-nodes')) {
+      await this.comfyPage.vueNodes.waitForNodes()
+    }
   }
 
   async deleteWorkflow(
@@ -175,6 +180,11 @@ export class WorkflowHelper {
     )
   }
 
+  async switchToTab(tabName: string): Promise<void> {
+    await this.comfyPage.menu.topbar.getWorkflowTab(tabName).click()
+    await this.waitForWorkflowIdle()
+  }
+
   async getExportedWorkflow(options: { api: true }): Promise<ComfyApiWorkflow>
   async getExportedWorkflow(options?: {
     api?: false

browser_tests/fixtures/selectors.ts

@@ -21,6 +21,10 @@ export const TestIds = {
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
     closeMinimapButton: 'close-minimap-button',
+    minimapContainer: 'minimap-container',
+    minimapCanvas: 'minimap-canvas',
+    minimapViewport: 'minimap-viewport',
+    minimapInteractionOverlay: 'minimap-interaction-overlay',
     toggleLinkVisibilityButton: 'toggle-link-visibility-button',
     zoomControlsButton: 'zoom-controls-button',
     zoomInAction: 'zoom-in-action',
@@ -79,7 +83,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',
@@ -114,6 +119,15 @@ export const TestIds = {
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  linear: {
+    centerPanel: 'linear-center-panel',
+    mobile: 'linear-mobile',
+    mobileNavigation: 'linear-mobile-navigation',
+    mobileActionMenu: 'linear-mobile-menu',
+    mobileWorkflows: 'linear-mobile-workflows',
+    outputInfo: 'linear-output-info',
+    widgetContainer: 'linear-widgets'
+  },
   builder: {
     footerNav: 'builder-footer-nav',
     saveButton: 'builder-save-button',

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -24,6 +24,10 @@ export class VueNodeFixture {
     this.root = locator
   }
 
+  get widgets(): Locator {
+    return this.locator.locator('.lg-node-widget')
+  }
+
   async getTitle(): Promise<string> {
     return (await this.title.textContent()) ?? ''
   }

browser_tests/helpers/builderTestUtils.ts

@@ -122,21 +122,3 @@ export async function saveAndReopenInAppMode(
 
   await comfyPage.appMode.toggleAppMode()
 }
-
-/**
- * Enter builder, select the given widgets as inputs + SaveImage as output,
- * save as an app, and close the success dialog.
- *
- * Returns on the builder arrange/preview step.
- */
-export async function createAndSaveApp(
-  comfyPage: ComfyPage,
-  appName: string,
-  widgetNames: string[] = ['seed']
-): Promise<void> {
-  await setupBuilder(comfyPage, undefined, widgetNames)
-  await comfyPage.appMode.steps.goToPreview()
-  await builderSaveAs(comfyPage.appMode, appName)
-  await comfyPage.appMode.saveAs.closeButton.click()
-  await comfyPage.nextFrame()
-}

browser_tests/helpers/painter.ts

@@ -0,0 +1,66 @@
+import type { Locator, Page } from '@playwright/test'
+import type { TestGraphAccess } from '@e2e/types/globals'
+
+export async function drawStroke(
+  page: Page,
+  canvas: Locator,
+  opts: { startXPct?: number; endXPct?: number; yPct?: number } = {}
+): Promise<void> {
+  const { startXPct = 0.3, endXPct = 0.7, yPct = 0.5 } = opts
+  const box = await canvas.boundingBox()
+  if (!box) throw new Error('Canvas bounding box not found')
+  await page.mouse.move(
+    box.x + box.width * startXPct,
+    box.y + box.height * yPct
+  )
+  await page.mouse.down()
+  await page.mouse.move(
+    box.x + box.width * endXPct,
+    box.y + box.height * yPct,
+    { steps: 10 }
+  )
+  await page.mouse.up()
+}
+
+export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
+  return canvas.evaluate((el: HTMLCanvasElement) => {
+    const ctx = el.getContext('2d')
+    if (!ctx) return false
+    const { data } = ctx.getImageData(0, 0, el.width, el.height)
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] > 0) return true
+    }
+    return false
+  })
+}
+
+export async function triggerSerialization(page: Page): Promise<void> {
+  await page.evaluate(async () => {
+    const graph = window.graph as TestGraphAccess | undefined
+    if (!graph) {
+      throw new Error(
+        'Global window.graph is absent. Ensure workflow fixture is loaded.'
+      )
+    }
+
+    const node = graph._nodes_by_id?.['1']
+    if (!node) {
+      throw new Error(
+        'Target node with ID "1" not found in graph._nodes_by_id.'
+      )
+    }
+
+    const widget = node.widgets?.find((w) => w.name === 'mask')
+    if (!widget) {
+      throw new Error('Widget "mask" not found on target node 1.')
+    }
+
+    if (typeof widget.serializeValue !== 'function') {
+      throw new Error(
+        'mask widget on node 1 does not have a serializeValue function.'
+      )
+    }
+
+    await widget.serializeValue(node, 0)
+  })
+}

browser_tests/tests/actionbar.spec.ts

@@ -8,10 +8,6 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 test.describe('Actionbar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   /**
    * This test ensures that the autoqueue change mode can only queue one change at a time
    */

browser_tests/tests/appMode.spec.ts

@@ -0,0 +1,112 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('App mode usage', () => {
+  test('Drag and Drop', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const { centerPanel } = comfyPage.appMode
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+    //an app without an image input will load the workflow
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).toBeHidden()
+
+    //prep a load image
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    const loadImage = await comfyPage.vueNodes.getNodeLocator('10')
+    await expect(loadImage).toBeVisible()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['10', 'image']])
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input will upload the image to the input
+    await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
+    await expect(centerPanel).toBeVisible()
+    //an app with an image input can load from a uri-source
+    await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png')
+    await expect(centerPanel).toBeVisible()
+  })
+
+  test('Widget Interaction', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterAppModeWithInputs([
+      ['3', 'seed'],
+      ['3', 'sampler_name'],
+      ['6', 'text']
+    ])
+    const seed = comfyPage.appMode.linearWidgets.getByLabel('seed', {
+      exact: true
+    })
+    const { input, incrementButton, decrementButton } =
+      comfyPage.vueNodes.getInputNumberControls(seed)
+    const initialValue = Number(await input.inputValue())
+
+    await seed.dragTo(incrementButton, { steps: 5 })
+    const intermediateValue = Number(await input.inputValue())
+    expect(intermediateValue).toBeGreaterThan(initialValue)
+
+    await seed.dragTo(decrementButton, { steps: 5 })
+    const endValue = Number(await input.inputValue())
+    expect(endValue).toBeLessThan(intermediateValue)
+
+    const sampler = comfyPage.appMode.linearWidgets.getByLabel('sampler_name', {
+      exact: true
+    })
+    await sampler.click()
+
+    await comfyPage.page.getByRole('searchbox').fill('uni')
+    await comfyPage.page.keyboard.press('ArrowDown')
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(sampler).toHaveText('uni_pc')
+
+    //verify values are consistent with litegraph
+  })
+
+  test.describe('Mobile', { tag: ['@mobile'] }, () => {
+    test('panel navigation', async ({ comfyPage }) => {
+      const { mobile } = comfyPage.appMode
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
+      await expect(mobile.view).toBeVisible()
+      await expect(mobile.navigation).toBeVisible()
+
+      await mobile.navigateTab('assets')
+      await expect(mobile.contentPanel).toHaveAccessibleName('Assets')
+
+      const buttons = await mobile.navigationTabs.all()
+      await buttons[0].dragTo(buttons[2], { steps: 5 })
+      await expect(mobile.contentPanel).toHaveAccessibleName('Outputs')
+
+      await mobile.navigateTab('run')
+      await expect(comfyPage.appMode.linearWidgets).toBeInViewport({ ratio: 1 })
+
+      const steps = comfyPage.page.getByRole('spinbutton')
+      await expect(steps).toHaveValue('20')
+      await mobile.tap(
+        comfyPage.page.getByRole('button', { name: 'increment' }),
+        { count: 5 }
+      )
+      await expect(steps).toHaveValue('25')
+      await mobile.tap(
+        comfyPage.page.getByRole('button', { name: 'decrement' }),
+        { count: 3 }
+      )
+
+      await expect(steps).toHaveValue('22')
+    })
+
+    test('workflow selection', async ({ comfyPage }) => {
+      const widgetNames = ['seed', 'steps', 'denoise', 'cfg']
+      for (const name of widgetNames)
+        await comfyPage.appMode.enterAppModeWithInputs([['3', name]])
+      await expect(comfyPage.appMode.mobile.workflows).toBeVisible()
+
+      const widgets = comfyPage.appMode.linearWidgets
+      await comfyPage.appMode.mobile.navigateTab('run')
+      for (let i = 0; i < widgetNames.length; i++) {
+        await comfyPage.appMode.mobile.switchWorkflow(`(${i + 2})`)
+        await expect(widgets.getByText(widgetNames[i])).toBeVisible()
+      }
+    })
+  })
+})

browser_tests/tests/appModeBuilder.spec.ts

@@ -0,0 +1,120 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test.describe('App mode builder selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.appMode.enableLinearMode()
+  })
+
+  test('Can independently select inputs of same name', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const items = comfyPage.appMode.select.selectedItems
+
+    await comfyPage.vueNodes.selectNodes(['6', '7'])
+    await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
+
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    const prompts = comfyPage.vueNodes
+      .getNodeByTitle('New Subgraph')
+      .locator('.lg-node-widget')
+    const count = await prompts.count()
+    for (let i = 0; i < count; i++) {
+      await expect(prompts.nth(i)).toBeVisible()
+      await prompts.nth(i).click()
+      await expect(items).toHaveCount(i + 1)
+    }
+  })
+
+  test('Can drag and drop inputs', async ({ comfyPage }) => {
+    const items = comfyPage.appMode.select.selectedItems
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    const ksampler = await comfyPage.vueNodes.getNodeLocator('3')
+    for (const widget of await ksampler.locator('.lg-node-widget').all())
+      await widget.click()
+
+    await items.first().dragTo(items.last(), { steps: 5 })
+    await expect(items.first()).toContainText('steps')
+    await items.last().dragTo(items.first(), { steps: 5 })
+    //dragTo doesn't cross the center point, so denoise is moved to position 2
+    await expect(items.nth(1)).toContainText('denoise')
+  })
+
+  test('Can select outputs', async ({ comfyPage }) => {
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToOutputs()
+
+    await comfyPage.nodeOps
+      .getNodeRefById('9')
+      .then((ref) => ref.centerOnNode())
+    const saveImage = await comfyPage.vueNodes.getNodeLocator('9')
+    await saveImage.click()
+
+    const items = comfyPage.appMode.select.selectedItems
+    await expect(items).toHaveCount(1)
+  })
+
+  test('Can not select nodes with errors or notes', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    const items = comfyPage.appMode.select.selectedItems
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    await comfyPage.appMode.select.selectInputWidget(
+      'Load Checkpoint',
+      'ckpt_name'
+    )
+    //await expect.soft(items).toHaveCount(0)
+
+    await comfyPage.workflow.loadWorkflow('nodes/note_nodes')
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+    await expect(items).toHaveCount(0)
+
+    await comfyPage.appMode.select.selectInputWidget('Note', 'text')
+    await comfyPage.appMode.select.selectInputWidget('Markdown Note', 'text')
+
+    await expect(items).toHaveCount(0)
+  })
+
+  test('Marks canvas readOnly', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+    await comfyPage.page.keyboard.press('Escape')
+
+    await comfyPage.appMode.enterBuilder()
+    await comfyPage.appMode.steps.goToInputs()
+
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+
+    //space toggles panning mode, canvas should remain readOnly after pressing
+    await comfyPage.page.keyboard.press('Space')
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
+    await ksampler.header.dblclick({ force: true })
+    await expect(ksampler.titleInput).toBeHidden()
+
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+  })
+})

browser_tests/tests/appModePruning.spec.ts

@@ -1,10 +1,10 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
   comfyPageFixture as test,
   comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import { setupBuilder } from '../helpers/builderTestUtils'
-import { fitToViewInstant } from '../helpers/fitToView'
+} from '@e2e/fixtures/ComfyPage'
+import { setupBuilder } from '@e2e/helpers/builderTestUtils'
+import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
 const RESIZE_NODE_TITLE = 'Resize Image/Mask'
 const RESIZE_NODE_ID = '1'

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -4,10 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Bottom Panel Logs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should open bottom panel via toggle button', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -3,10 +3,6 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Bottom Panel Shortcuts', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
     const { bottomPanel } = comfyPage
 

browser_tests/tests/browserTabTitle.spec.ts

@@ -5,10 +5,6 @@ import type { WorkspaceStore } from '@e2e/types/globals'
 
 test.describe('Browser tab title', { tag: '@smoke' }, () => {
   test.describe('Beta Menu', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
         return (window.app!.extensionManager as WorkspaceStore).workflow

browser_tests/tests/builderReorder.spec.ts

@@ -2,11 +2,10 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
   builderSaveAs,
-  createAndSaveApp,
   openWorkflowFromSidebar,
   setupBuilder
 } from '@e2e/helpers/builderTestUtils'
@@ -160,46 +159,38 @@ test.describe('Builder input reordering', { tag: '@ui' }, () => {
     comfyPage
   }) => {
     const { appMode } = comfyPage
-    const suffix = String(Date.now())
-    const app1Name = `app1-${suffix}`
-    const app2Name = `app2-${suffix}`
     const app2Widgets = ['seed', 'steps']
+    const app1Reordered = ['steps', 'cfg', 'seed']
 
-    // Create and save app1 with [seed, steps, cfg]
-    await createAndSaveApp(comfyPage, app1Name, WIDGETS)
-    await appMode.footer.exitBuilder()
+    await test.step('Load both apps', async () => {
+      await comfyPage.workflow.loadWorkflow('linear-basic-app-1')
+      await comfyPage.workflow.loadWorkflow('linear-basic-app-2')
+    })
 
-    // Create app2 in a new tab so both apps are open simultaneously
-    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
-    await createAndSaveApp(comfyPage, app2Name, app2Widgets)
-    await appMode.footer.exitBuilder()
-
-    // Switch to app1 tab and enter builder
-    await comfyPage.menu.topbar.getWorkflowTab(app1Name).click()
+    await test.step('Reorder app1 inputs', async () => {
+      await comfyPage.workflow.switchToTab('linear-basic-app-1')
       await appMode.enterBuilder()
       await appMode.steps.goToInputs()
       await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
 
-    // Reorder app1 inputs: drag 'seed' from first to last
       await appMode.select.dragInputItem(0, 2)
-    const app1Reordered = ['steps', 'cfg', 'seed']
-    await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
-
-    // Switch to app2 tab and enter builder
-    await appMode.footer.exitBuilder()
-    await comfyPage.menu.topbar.getWorkflowTab(app2Name).click()
-    await appMode.enterBuilder()
-    await appMode.steps.goToInputs()
-
-    // Verify app2 inputs are not corrupted — still [seed, steps]
-    await expect(appMode.select.inputItemTitles).toHaveText(app2Widgets)
-
-    // Switch back to app1 and verify reorder persisted
-    await appMode.footer.exitBuilder()
-    await comfyPage.menu.topbar.getWorkflowTab(app1Name).click()
-    await appMode.enterBuilder()
-    await appMode.steps.goToInputs()
-
       await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
     })
+
+    await test.step('Verify app2 inputs are not corrupted', async () => {
+      await appMode.footer.exitBuilder()
+      await comfyPage.workflow.switchToTab('linear-basic-app-2')
+      await appMode.enterBuilder()
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(app2Widgets)
+    })
+
+    await test.step('Verify app1 reorder persisted', async () => {
+      await appMode.footer.exitBuilder()
+      await comfyPage.workflow.switchToTab('linear-basic-app-1')
+      await appMode.enterBuilder()
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(app1Reordered)
+    })
+  })
 })

browser_tests/tests/cloud.spec.ts

@@ -1,4 +1,5 @@
-import { expect, test } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 /**
  * Cloud distribution E2E tests.

browser_tests/tests/collapsedNodeLinks.spec.ts

@@ -8,12 +8,10 @@ const NODE_TITLE = 'KSampler'
 
 test.describe(
   'Collapsed node link positions',
-  { tag: ['@canvas', '@node'] },
+  { tag: ['@canvas', '@node', '@vue-nodes'] },
   () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
       await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.vueNodes.waitForNodes()
     })
 
     test.afterEach(async ({ comfyPage }) => {

browser_tests/tests/customIcons.spec.ts

@@ -20,10 +20,6 @@ async function verifyCustomIconSvg(iconElement: Locator) {
 }
 
 test.describe('Custom Icons', { tag: '@settings' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('sidebar tab icons use custom SVGs', async ({ comfyPage }) => {
     // Find the icon in the sidebar
     const icon = comfyPage.page.locator(

browser_tests/tests/defaultKeybindings.spec.ts

@@ -20,7 +20,6 @@ async function pressKeyAndExpectRequest(
 test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
   test.describe('Sidebar Toggle Shortcuts', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
       await comfyPage.nextFrame()
     })
@@ -164,8 +163,6 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
 
   test.describe('Mode and Panel Toggles', () => {
     test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       // Set up linearData so app mode has something to show
       await comfyPage.appMode.enterAppModeWithInputs([])
       await expect(comfyPage.appMode.linearWidgets).toBeVisible()
@@ -180,7 +177,6 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     })
 
     test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
       await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
       await comfyPage.workflow.loadWorkflow('default')
@@ -196,8 +192,6 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     })
 
     test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       await expect(comfyPage.bottomPanel.root).toBeHidden()
 
       await comfyPage.page.keyboard.press('Control+Backquote')

browser_tests/tests/dialog.spec.ts

@@ -103,7 +103,6 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
     // Prevent loading the external page
     await comfyPage.page
       .context()

browser_tests/tests/dialogs/queueClearHistory.spec.ts

@@ -5,7 +5,6 @@ import {
 
 test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setup()
     await comfyPage.queuePanel.overlayToggle.click()
   })
 

browser_tests/tests/dialogs/signInDialog.spec.ts

@@ -7,7 +7,6 @@ test.describe('Sign In dialog', { tag: '@ui' }, () => {
   let dialog: SignInDialog
 
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     dialog = new SignInDialog(comfyPage.page)
     await dialog.open()
   })

browser_tests/tests/errorOverlay.spec.ts

@@ -5,10 +5,10 @@ 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 }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true
@@ -47,16 +47,7 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     test('Should display "Show missing models" button for missing model errors', async ({
       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()
+      await cleanupFakeModel(comfyPage)
 
       await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
@@ -117,6 +108,33 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
       await comfyPage.keyboard.redo()
       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()
+    })
   })
 
   test.describe('See Errors flow', () => {

browser_tests/tests/extensionAPI.spec.ts

@@ -13,10 +13,6 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 type TestSettingId = keyof Settings
 
 test.describe('Topbar commands', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Should allow registering topbar commands', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
       window.app!.registerExtension({

browser_tests/tests/focusMode.spec.ts

@@ -4,11 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Focus Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test('Focus mode hides UI chrome', async ({ comfyPage }) => {
     await expect(comfyPage.menu.sideToolbar).toBeVisible()
 

browser_tests/tests/imageCompare.spec.ts

@@ -1,13 +1,12 @@
+import type { Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Image Compare', () => {
+test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   function createTestImageDataUrl(label: string, color: string): string {
@@ -21,7 +20,12 @@ test.describe('Image Compare', () => {
 
   async function setImageCompareValue(
     comfyPage: ComfyPage,
-    value: { beforeImages: string[]; afterImages: string[] }
+    value: {
+      beforeImages: string[]
+      afterImages: string[]
+      beforeAlt?: string
+      afterAlt?: string
+    }
   ) {
     await comfyPage.page.evaluate(
       ({ value }) => {
@@ -37,6 +41,48 @@ test.describe('Image Compare', () => {
     await comfyPage.nextFrame()
   }
 
+  async function moveToPercentage(
+    page: Page,
+    containerLocator: Locator,
+    percentage: number
+  ) {
+    const box = await containerLocator.boundingBox()
+    if (!box) throw new Error('Container not found')
+    await page.mouse.move(
+      box.x + box.width * (percentage / 100),
+      box.y + box.height / 2
+    )
+  }
+
+  async function waitForImagesLoaded(node: Locator) {
+    await expect
+      .poll(() =>
+        node.evaluate((el) => {
+          const imgs = el.querySelectorAll('img')
+          return (
+            imgs.length > 0 &&
+            Array.from(imgs).every(
+              (img) => img.complete && img.naturalWidth > 0
+            )
+          )
+        })
+      )
+      .toBe(true)
+  }
+
+  async function getClipPathInsetRightPercent(imgLocator: Locator) {
+    return imgLocator.evaluate((el) => {
+      // Accessing raw style avoids cross-browser getComputedStyle normalization issues
+      // Format is uniformly "inset(0 60% 0 0)" per Vue runtime inline style bindings
+      const parts = (el as HTMLElement).style.clipPath.split(' ')
+      return parts.length > 1 ? parseFloat(parts[1]) : -1
+    })
+  }
+
+  // ---------------------------------------------------------------------------
+  // Rendering
+  // ---------------------------------------------------------------------------
+
   test(
     'Shows empty state when no images are set',
     { tag: '@smoke' },
@@ -50,6 +96,10 @@ test.describe('Image Compare', () => {
     }
   )
 
+  // ---------------------------------------------------------------------------
+  // Slider defaults
+  // ---------------------------------------------------------------------------
+
   test(
     'Slider defaults to 50% with both images set',
     { tag: ['@smoke', '@screenshot'] },
@@ -71,11 +121,440 @@ test.describe('Image Compare', () => {
       await expect(handle).toBeVisible()
 
       expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left)
+        await handle.evaluate((el) => (el as HTMLElement).style.left),
+        'Slider should default to 50% before screenshot'
       ).toBe('50%')
-      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeCloseTo(50, 0)
 
+      await waitForImagesLoaded(node)
+      await comfyPage.page.mouse.move(0, 0)
       await expect(node).toHaveScreenshot('image-compare-default-50.png')
     }
   )
+
+  // ---------------------------------------------------------------------------
+  // Slider interaction
+  // ---------------------------------------------------------------------------
+
+  test(
+    'Mouse hover moves slider position',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const beforeUrl = createTestImageDataUrl('Before', '#c00')
+      const afterUrl = createTestImageDataUrl('After', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [beforeUrl],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const handle = node.getByRole('presentation')
+      const beforeImg = node.locator('img[alt="Before image"]')
+      const afterImg = node.locator('img[alt="After image"]')
+      await expect(afterImg).toBeVisible()
+
+      // Left edge: sliderPosition ≈ 5 → clip-path inset right ≈ 95%
+      await moveToPercentage(comfyPage.page, afterImg, 5)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeGreaterThan(90)
+      await expect
+        .poll(() =>
+          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+        )
+        .toBeLessThan(10)
+
+      // Right edge: sliderPosition ≈ 95 → clip-path inset right ≈ 5%
+      await moveToPercentage(comfyPage.page, afterImg, 95)
+      await expect
+        .poll(() => getClipPathInsetRightPercent(beforeImg))
+        .toBeLessThan(10)
+      await expect
+        .poll(() =>
+          handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+        )
+        .toBeGreaterThan(90)
+    }
+  )
+
+  test('Slider preserves last position when mouse leaves widget', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const handle = node.getByRole('presentation')
+    const afterImg = node.locator('img[alt="After image"]')
+    await expect(afterImg).toBeVisible()
+
+    await moveToPercentage(comfyPage.page, afterImg, 30)
+    // Wait for Vue to commit the slider update
+    await expect
+      .poll(() =>
+        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+      )
+      .toBeCloseTo(30, 0)
+    const positionWhileInside = parseFloat(
+      await handle.evaluate((el) => (el as HTMLElement).style.left)
+    )
+
+    await comfyPage.page.mouse.move(0, 0)
+
+    // Position must not reset to default 50%
+    await expect
+      .poll(() =>
+        handle.evaluate((el) => parseFloat((el as HTMLElement).style.left))
+      )
+      .toBeCloseTo(positionWhileInside, 0)
+  })
+
+  test('Slider clamps to 0% at left edge of container', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const handle = node.getByRole('presentation')
+    const afterImg = node.locator('img[alt="After image"]')
+    await expect(afterImg).toBeVisible()
+
+    const box = await afterImg.boundingBox()
+    if (!box) throw new Error('Container not found')
+
+    // Move to the leftmost pixel (elementX = 0 → sliderPosition = 0)
+    await comfyPage.page.mouse.move(box.x, box.y + box.height / 2)
+    await expect
+      .poll(() => handle.evaluate((el) => (el as HTMLElement).style.left))
+      .toBe('0%')
+  })
+
+  // ---------------------------------------------------------------------------
+  // Single image modes
+  // ---------------------------------------------------------------------------
+
+  test('Only before image shows without slider when afterImages is empty', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Before', '#c00')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url],
+      afterImages: []
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  test('Only after image shows without slider when beforeImages is empty', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [],
+      afterImages: [url]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  // ---------------------------------------------------------------------------
+  // Batch navigation
+  // ---------------------------------------------------------------------------
+
+  test(
+    'Batch navigation appears when before side has multiple images',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const url1 = createTestImageDataUrl('A1', '#c00')
+      const url2 = createTestImageDataUrl('A2', '#0c0')
+      const url3 = createTestImageDataUrl('A3', '#00c')
+      const afterUrl = createTestImageDataUrl('B1', '#888')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [url1, url2, url3],
+        afterImages: [afterUrl]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeBatch = node.getByTestId('before-batch')
+
+      await expect(node.getByTestId('batch-nav')).toBeVisible()
+      await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('1 / 3')
+      // after-batch renders only when afterBatchCount > 1
+      await expect(node.getByTestId('after-batch')).toBeHidden()
+      await expect(beforeBatch.getByTestId('batch-prev')).toBeDisabled()
+    }
+  )
+
+  test('Batch navigation is hidden when both sides have single images', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Image', '#c00')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url],
+      afterImages: [url]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.getByTestId('batch-nav')).toBeHidden()
+  })
+
+  test(
+    'Navigate forward through before images',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const url1 = createTestImageDataUrl('A1', '#c00')
+      const url2 = createTestImageDataUrl('A2', '#0c0')
+      const url3 = createTestImageDataUrl('A3', '#00c')
+      await setImageCompareValue(comfyPage, {
+        beforeImages: [url1, url2, url3],
+        afterImages: [createTestImageDataUrl('B1', '#888')]
+      })
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const beforeBatch = node.getByTestId('before-batch')
+      const counter = beforeBatch.getByTestId('batch-counter')
+      const nextBtn = beforeBatch.getByTestId('batch-next')
+      const prevBtn = beforeBatch.getByTestId('batch-prev')
+
+      await nextBtn.click()
+      await expect(counter).toHaveText('2 / 3')
+      await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+        'src',
+        url2
+      )
+      await expect(prevBtn).toBeEnabled()
+
+      await nextBtn.click()
+      await expect(counter).toHaveText('3 / 3')
+      await expect(nextBtn).toBeDisabled()
+    }
+  )
+
+  test('Navigate backward through before images', async ({ comfyPage }) => {
+    const url1 = createTestImageDataUrl('A1', '#c00')
+    const url2 = createTestImageDataUrl('A2', '#0c0')
+    const url3 = createTestImageDataUrl('A3', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url1, url2, url3],
+      afterImages: [createTestImageDataUrl('B1', '#888')]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const beforeBatch = node.getByTestId('before-batch')
+    const counter = beforeBatch.getByTestId('batch-counter')
+    const nextBtn = beforeBatch.getByTestId('batch-next')
+    const prevBtn = beforeBatch.getByTestId('batch-prev')
+
+    await nextBtn.click()
+    await nextBtn.click()
+    await expect(counter).toHaveText('3 / 3')
+
+    await prevBtn.click()
+    await expect(counter).toHaveText('2 / 3')
+    await expect(prevBtn).toBeEnabled()
+    await expect(nextBtn).toBeEnabled()
+  })
+
+  test('Before and after batch navigation are independent', async ({
+    comfyPage
+  }) => {
+    const url1 = createTestImageDataUrl('A1', '#c00')
+    const url2 = createTestImageDataUrl('A2', '#0c0')
+    const url3 = createTestImageDataUrl('A3', '#00c')
+    const urlA = createTestImageDataUrl('B1', '#880')
+    const urlB = createTestImageDataUrl('B2', '#008')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [url1, url2, url3],
+      afterImages: [urlA, urlB]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    const beforeBatch = node.getByTestId('before-batch')
+    const afterBatch = node.getByTestId('after-batch')
+
+    await beforeBatch.getByTestId('batch-next').click()
+    await afterBatch.getByTestId('batch-next').click()
+
+    await expect(beforeBatch.getByTestId('batch-counter')).toHaveText('2 / 3')
+    await expect(afterBatch.getByTestId('batch-counter')).toHaveText('2 / 2')
+    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+      'src',
+      url2
+    )
+    await expect(node.locator('img[alt="After image"]')).toHaveAttribute(
+      'src',
+      urlB
+    )
+  })
+
+  // ---------------------------------------------------------------------------
+  // Visual regression screenshots
+  // ---------------------------------------------------------------------------
+
+  for (const { pct, expectedClipMin, expectedClipMax } of [
+    { pct: 25, expectedClipMin: 70, expectedClipMax: 80 },
+    { pct: 75, expectedClipMin: 20, expectedClipMax: 30 }
+  ]) {
+    test(
+      `Screenshot at ${pct}% slider position`,
+      { tag: '@screenshot' },
+      async ({ comfyPage }) => {
+        const beforeUrl = createTestImageDataUrl('Before', '#c00')
+        const afterUrl = createTestImageDataUrl('After', '#00c')
+        await setImageCompareValue(comfyPage, {
+          beforeImages: [beforeUrl],
+          afterImages: [afterUrl]
+        })
+
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const beforeImg = node.locator('img[alt="Before image"]')
+        const afterImg = node.locator('img[alt="After image"]')
+        await waitForImagesLoaded(node)
+        await moveToPercentage(comfyPage.page, afterImg, pct)
+        await expect
+          .poll(() => getClipPathInsetRightPercent(beforeImg))
+          .toBeGreaterThan(expectedClipMin)
+        await expect
+          .poll(() => getClipPathInsetRightPercent(beforeImg))
+          .toBeLessThan(expectedClipMax)
+
+        await expect(node).toHaveScreenshot(`image-compare-slider-${pct}.png`)
+      }
+    )
+  }
+
+  // ---------------------------------------------------------------------------
+  // Edge cases
+  // ---------------------------------------------------------------------------
+
+  test('Widget remains stable with broken image URLs', async ({
+    comfyPage
+  }) => {
+    await setImageCompareValue(comfyPage, {
+      beforeImages: ['https://example.invalid/broken.png'],
+      afterImages: ['https://example.invalid/broken2.png']
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(2)
+    await expect(node.getByRole('presentation')).toBeVisible()
+
+    await expect
+      .poll(() =>
+        node.evaluate((el) => {
+          const imgs = el.querySelectorAll('img')
+          let errors = 0
+          imgs.forEach((img) => {
+            if (img.complete && img.naturalWidth === 0 && img.src) errors++
+          })
+          return errors
+        })
+      )
+      .toBe(2)
+  })
+
+  test('Rapid value updates show latest images and reset batch index', async ({
+    comfyPage
+  }) => {
+    const redUrl = createTestImageDataUrl('Red', '#c00')
+    const green1Url = createTestImageDataUrl('G1', '#0c0')
+    const green2Url = createTestImageDataUrl('G2', '#090')
+    const blueUrl = createTestImageDataUrl('Blue', '#00c')
+
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [redUrl, green1Url],
+      afterImages: [blueUrl]
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await node.getByTestId('before-batch').getByTestId('batch-next').click()
+    await expect(
+      node.getByTestId('before-batch').getByTestId('batch-counter')
+    ).toHaveText('2 / 2')
+
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [green1Url, green2Url],
+      afterImages: [blueUrl]
+    })
+
+    await expect(node.locator('img[alt="Before image"]')).toHaveAttribute(
+      'src',
+      green1Url
+    )
+    await expect(
+      node.getByTestId('before-batch').getByTestId('batch-counter')
+    ).toHaveText('1 / 2')
+  })
+
+  test('Legacy string value shows single image without slider', async ({
+    comfyPage
+  }) => {
+    const url = createTestImageDataUrl('Legacy', '#c00')
+    await comfyPage.page.evaluate(
+      ({ url }) => {
+        const node = window.app!.graph.getNodeById(1)
+        const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
+        if (widget) {
+          widget.value = url
+          widget.callback?.(url)
+        }
+      },
+      { url }
+    )
+    await comfyPage.nextFrame()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img')).toHaveCount(1)
+    await expect(node.getByRole('presentation')).toBeHidden()
+  })
+
+  test('Custom beforeAlt and afterAlt are used as img alt text', async ({
+    comfyPage
+  }) => {
+    const beforeUrl = createTestImageDataUrl('Before', '#c00')
+    const afterUrl = createTestImageDataUrl('After', '#00c')
+    await setImageCompareValue(comfyPage, {
+      beforeImages: [beforeUrl],
+      afterImages: [afterUrl],
+      beforeAlt: 'Custom before',
+      afterAlt: 'Custom after'
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(node.locator('img[alt="Custom before"]')).toBeVisible()
+    await expect(node.locator('img[alt="Custom after"]')).toBeVisible()
+  })
+
+  test('Large batch sizes show correct counter', async ({ comfyPage }) => {
+    const images = Array.from({ length: 20 }, (_, i) =>
+      createTestImageDataUrl(String(i + 1), '#c00')
+    )
+    await setImageCompareValue(comfyPage, {
+      beforeImages: images,
+      afterImages: images
+    })
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    await expect(
+      node.getByTestId('before-batch').getByTestId('batch-counter')
+    ).toHaveText('1 / 20')
+    await expect(
+      node.getByTestId('after-batch').getByTestId('batch-counter')
+    ).toHaveText('1 / 20')
+  })
 })

browser_tests/tests/interaction.spec.ts

@@ -895,7 +895,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       workflowA = generateUniqueFilename()
       await comfyPage.menu.topbar.saveWorkflow(workflowA)
       workflowB = generateUniqueFilename()
@@ -970,7 +969,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       workflowA = generateUniqueFilename()
       await comfyPage.menu.topbar.saveWorkflow(workflowA)
       workflowB = generateUniqueFilename()
@@ -1060,13 +1058,10 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
 })
 
 test.describe('Load duplicate workflow', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('A workflow can be loaded multiple times in a row', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')

browser_tests/tests/jobHistoryActions.spec.ts

@@ -7,9 +7,6 @@ import {
 
 test.describe('Job History Actions', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-
     // Expand the queue overlay so the JobHistoryActionsMenu is visible
     await comfyPage.page.getByTestId('queue-overlay-toggle').click()
   })

browser_tests/tests/linearMode.spec.ts

@@ -4,11 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test('Displays linear controls when app mode active', async ({
     comfyPage
   }) => {

browser_tests/tests/maskEditor.spec.ts

@@ -3,14 +3,9 @@ import { expect } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Mask Editor', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')

browser_tests/tests/menu.spec.ts

@@ -3,10 +3,6 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Menu', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Can register sidebar tab', async ({ comfyPage }) => {
     const initialChildrenCount = await comfyPage.menu.buttons.count()
 

browser_tests/tests/minimap.spec.ts

@@ -1,11 +1,40 @@
 import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+function hasCanvasContent(canvas: Locator): Promise<boolean> {
+  return canvas.evaluate((el: HTMLCanvasElement) => {
+    const ctx = el.getContext('2d')
+    if (!ctx) return false
+    const { data } = ctx.getImageData(0, 0, el.width, el.height)
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] > 0) return true
+    }
+    return false
+  })
+}
+
+async function clickMinimapAt(
+  overlay: Locator,
+  page: Page,
+  relX: number,
+  relY: number
+) {
+  const box = await overlay.boundingBox()
+  expect(box, 'Minimap interaction overlay not found').toBeTruthy()
+
+  // Click area — avoiding the settings button (top-left, 32×32px)
+  // and close button (top-right, 32×32px)
+  await page.mouse.click(
+    box!.x + box!.width * relX,
+    box!.y + box!.height * relY
+  )
+}
+
 test.describe('Minimap', { tag: '@canvas' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
     await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
     await comfyPage.workflow.loadWorkflow('default')
@@ -13,14 +42,20 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap is visible by default', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const minimapContainer = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapContainer
+    )
 
     await expect(minimapContainer).toBeVisible()
 
-    const minimapCanvas = minimapContainer.locator('.minimap-canvas')
+    const minimapCanvas = minimapContainer.getByTestId(
+      TestIds.canvas.minimapCanvas
+    )
     await expect(minimapCanvas).toBeVisible()
 
-    const minimapViewport = minimapContainer.locator('.minimap-viewport')
+    const minimapViewport = minimapContainer.getByTestId(
+      TestIds.canvas.minimapViewport
+    )
     await expect(minimapViewport).toBeVisible()
 
     await expect(minimapContainer).toHaveCSS('position', 'relative')
@@ -40,12 +75,16 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
 
     await expect(toggleButton).toBeVisible()
 
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const minimapContainer = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapContainer
+    )
     await expect(minimapContainer).toBeVisible()
   })
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const minimapContainer = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapContainer
+    )
     const toggleButton = comfyPage.page.getByTestId(
       TestIds.canvas.toggleMinimapButton
     )
@@ -60,7 +99,9 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+    const minimapContainer = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapContainer
+    )
 
     await expect(minimapContainer).toBeVisible()
 
@@ -72,7 +113,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Close button hides minimap', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
     await expect(minimap).toBeVisible()
 
     await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
@@ -88,7 +129,9 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     'Panning canvas moves minimap viewport',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      const minimap = comfyPage.page.getByTestId(
+        TestIds.canvas.minimapContainer
+      )
       await expect(minimap).toBeVisible()
 
       await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
@@ -105,14 +148,135 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     }
   )
 
+  test('Minimap canvas is non-empty for a workflow with nodes', async ({
+    comfyPage
+  }) => {
+    const minimapCanvas = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapCanvas
+    )
+    await expect(minimapCanvas).toBeVisible()
+
+    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(true)
+  })
+
+  test('Minimap canvas is empty after all nodes are deleted', async ({
+    comfyPage
+  }) => {
+    const minimapCanvas = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapCanvas
+    )
+    await expect(minimapCanvas).toBeVisible()
+
+    await comfyPage.keyboard.selectAll()
+    await comfyPage.vueNodes.deleteSelected()
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(false)
+  })
+
+  test('Clicking minimap corner pans the main canvas', async ({
+    comfyPage
+  }) => {
+    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+    const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
+    const overlay = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapInteractionOverlay
+    )
+    await expect(minimap).toBeVisible()
+
+    const before = await comfyPage.page.evaluate(() => ({
+      x: window.app!.canvas.ds.offset[0],
+      y: window.app!.canvas.ds.offset[1]
+    }))
+
+    const transformBefore = await viewport.evaluate(
+      (el: HTMLElement) => el.style.transform
+    )
+
+    await clickMinimapAt(overlay, comfyPage.page, 0.15, 0.85)
+
+    await expect
+      .poll(() =>
+        comfyPage.page.evaluate(() => ({
+          x: window.app!.canvas.ds.offset[0],
+          y: window.app!.canvas.ds.offset[1]
+        }))
+      )
+      .not.toStrictEqual(before)
+
+    await expect
+      .poll(() => viewport.evaluate((el: HTMLElement) => el.style.transform))
+      .not.toBe(transformBefore)
+  })
+
+  test('Clicking minimap center after FitView causes minimal canvas movement', async ({
+    comfyPage
+  }) => {
+    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+    const overlay = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapInteractionOverlay
+    )
+    const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
+    await expect(minimap).toBeVisible()
+
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.offset[0] -= 1000
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    const transformBefore = await viewport.evaluate(
+      (el: HTMLElement) => el.style.transform
+    )
+
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.fitViewToSelectionAnimated({ duration: 1 })
+    })
+
+    await expect
+      .poll(() => viewport.evaluate((el: HTMLElement) => el.style.transform), {
+        timeout: 2000
+      })
+      .not.toBe(transformBefore)
+
+    await comfyPage.nextFrame()
+
+    const before = await comfyPage.page.evaluate(() => ({
+      x: window.app!.canvas.ds.offset[0],
+      y: window.app!.canvas.ds.offset[1]
+    }))
+
+    await clickMinimapAt(overlay, comfyPage.page, 0.5, 0.5)
+    await comfyPage.nextFrame()
+
+    const after = await comfyPage.page.evaluate(() => ({
+      x: window.app!.canvas.ds.offset[0],
+      y: window.app!.canvas.ds.offset[1]
+    }))
+
+    // ~3px overlay error × ~15 canvas/minimap scale ≈ 45, rounded up
+    const TOLERANCE = 50
+    expect(
+      Math.abs(after.x - before.x),
+      `offset.x changed by more than ${TOLERANCE} after clicking minimap center post-FitView`
+    ).toBeLessThan(TOLERANCE)
+    expect(
+      Math.abs(after.y - before.y),
+      `offset.y changed by more than ${TOLERANCE} after clicking minimap center post-FitView`
+    ).toBeLessThan(TOLERANCE)
+  })
+
   test(
     'Viewport rectangle is visible and positioned within minimap',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      const minimap = comfyPage.page.getByTestId(
+        TestIds.canvas.minimapContainer
+      )
       await expect(minimap).toBeVisible()
 
-      const viewport = minimap.locator('.minimap-viewport')
+      const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
       await expect(viewport).toBeVisible()
 
       await expect(async () => {

browser_tests/tests/nodeHelp.spec.ts

@@ -87,8 +87,6 @@ async function setLocaleAndWaitForWorkflowReload(
 
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setup()
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 

browser_tests/tests/nodeLibraryEssentials.spec.ts

@@ -5,8 +5,6 @@ import {
 
 test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
     // Enable the essentials feature flag via the reactive serverFeatureFlags ref.
     // In production, this flag comes via WebSocket or remoteConfig (cloud only).
     // The localhost test server has neither, so we set it directly.

browser_tests/tests/outputHistory.spec.ts

@@ -2,10 +2,13 @@ import type { WebSocketRoute } from '@playwright/test'
 import { mergeTests } from '@playwright/test'
 
 import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import { comfyPageFixture, comfyExpect as expect } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
-import { ExecutionHelper } from '../fixtures/helpers/ExecutionHelper'
+import {
+  comfyPageFixture,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -40,7 +43,6 @@ function imageOutput(...filenames: string[]) {
 
 test.describe('Output History', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.appMode.enterAppModeWithInputs([[KSAMPLER_NODE, 'seed']])
     await expect(comfyPage.appMode.linearWidgets).toBeVisible()
     await comfyPage.nextFrame()

browser_tests/tests/painter.spec.ts

@@ -1,12 +1,18 @@
+import type { UploadImageResponse } from '@comfyorg/ingest-types'
+
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import {
+  drawStroke,
+  hasCanvasContent,
+  triggerSerialization
+} from '@e2e/helpers/painter'
 
-test.describe('Painter', () => {
+test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.page.evaluate(() => window.app?.graph?.clear())
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(
@@ -20,9 +26,15 @@ test.describe('Painter', () => {
       await expect(painterWidget).toBeVisible()
 
       await expect(painterWidget.locator('canvas')).toBeVisible()
-      await expect(painterWidget.getByText('Brush')).toBeVisible()
-      await expect(painterWidget.getByText('Eraser')).toBeVisible()
-      await expect(painterWidget.getByText('Clear')).toBeVisible()
+      await expect(
+        painterWidget.getByRole('button', { name: 'Brush' })
+      ).toBeVisible()
+      await expect(
+        painterWidget.getByRole('button', { name: 'Eraser' })
+      ).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-clear-button')
+      ).toBeVisible()
       await expect(
         painterWidget.locator('input[type="color"]').first()
       ).toBeVisible()
@@ -39,22 +51,66 @@ test.describe('Painter', () => {
       const canvas = node.locator('.widget-expands canvas')
       await expect(canvas).toBeVisible()
 
+      expect(await hasCanvasContent(canvas), 'canvas should start empty').toBe(
+        false
+      )
+
+      await drawStroke(comfyPage.page, canvas)
+
       await expect
-        .poll(async () =>
-          canvas.evaluate((el) => {
-            const ctx = (el as HTMLCanvasElement).getContext('2d')
-            if (!ctx) return true
-            const data = ctx.getImageData(
-              0,
-              0,
-              (el as HTMLCanvasElement).width,
-              (el as HTMLCanvasElement).height
-            )
-            return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
+        .poll(() => hasCanvasContent(canvas), {
+          message: 'canvas should have content after stroke'
         })
-        )
         .toBe(true)
 
+      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+    }
+  )
+
+  test.describe('Drawing', () => {
+    test(
+      'Eraser removes drawn content',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const painterWidget = node.locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+
+        await drawStroke(comfyPage.page, canvas)
+
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before erasing'
+          })
+          .toBe(true)
+
+        await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+        await drawStroke(comfyPage.page, canvas)
+
+        await expect
+          .poll(
+            () =>
+              canvas.evaluate((el: HTMLCanvasElement) => {
+                const ctx = el.getContext('2d')
+                if (!ctx) return false
+                const cx = Math.floor(el.width / 2)
+                const cy = Math.floor(el.height / 2)
+                const { data } = ctx.getImageData(cx - 5, cy - 5, 10, 10)
+                return data.every((v, i) => i % 4 !== 3 || v === 0)
+              }),
+            { message: 'erased area should be transparent' }
+          )
+          .toBe(true)
+      }
+    )
+
+    test('Stroke ends cleanly when pointer up fires outside canvas', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
       const box = await canvas.boundingBox()
       if (!box) throw new Error('Canvas bounding box not found')
 
@@ -68,29 +124,250 @@ test.describe('Painter', () => {
         box.y + box.height * 0.5,
         { steps: 10 }
       )
+      await comfyPage.page.mouse.move(box.x - 20, box.y + box.height * 0.5)
       await comfyPage.page.mouse.up()
+
       await comfyPage.nextFrame()
 
       await expect
-        .poll(async () =>
-          canvas.evaluate((el) => {
-            const ctx = (el as HTMLCanvasElement).getContext('2d')
-            if (!ctx) return false
-            const data = ctx.getImageData(
-              0,
-              0,
-              (el as HTMLCanvasElement).width,
-              (el as HTMLCanvasElement).height
-            )
-            for (let i = 3; i < data.data.length; i += 4) {
-              if (data.data[i] > 0) return true
-            }
-            return false
+        .poll(() => hasCanvasContent(canvas), {
+          message:
+            'canvas should have content after stroke with pointer up outside'
         })
+        .toBe(true)
+    })
+  })
+
+  test.describe('Tool selection', () => {
+    test('Tool switching toggles brush-only controls', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeVisible()
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+
+      await expect(
+        painterWidget.getByTestId('painter-color-row'),
+        'color row should be hidden in eraser mode'
+      ).toBeHidden()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeHidden()
+
+      await painterWidget.getByRole('button', { name: 'Brush' }).click()
+
+      await expect(painterWidget.getByTestId('painter-color-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-hardness-row')
+      ).toBeVisible()
+    })
+  })
+
+  test.describe('Brush settings', () => {
+    test('Size slider updates the displayed value', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const sizeRow = painterWidget.getByTestId('painter-size-row')
+      const sizeSlider = sizeRow.getByRole('slider')
+      const sizeDisplay = sizeRow.getByTestId('painter-size-value')
+
+      await expect(sizeDisplay).toHaveText('20')
+
+      await sizeSlider.focus()
+      for (let i = 0; i < 10; i++) {
+        await sizeSlider.press('ArrowRight')
+      }
+
+      await expect(sizeDisplay).toHaveText('30')
+    })
+
+    test('Opacity input clamps out-of-range values', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const opacityInput = painterWidget
+        .getByTestId('painter-color-row')
+        .locator('input[type="number"]')
+
+      await opacityInput.fill('150')
+      await opacityInput.press('Tab')
+      await expect(opacityInput).toHaveValue('100')
+
+      await opacityInput.fill('-10')
+      await opacityInput.press('Tab')
+      await expect(opacityInput).toHaveValue('0')
+    })
+  })
+
+  test.describe('Canvas size controls', () => {
+    test('Width and height sliders visible without connected input', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await expect(painterWidget.getByTestId('painter-width-row')).toBeVisible()
+      await expect(
+        painterWidget.getByTestId('painter-height-row')
+      ).toBeVisible()
+
+      await expect(
+        painterWidget.getByTestId('painter-dimension-text')
+      ).toBeHidden()
+    })
+
+    test('Width slider resizes the canvas element', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      const widthSlider = painterWidget
+        .getByTestId('painter-width-row')
+        .getByRole('slider')
+
+      const initialWidth = await canvas.evaluate(
+        (el: HTMLCanvasElement) => el.width
       )
+      expect(initialWidth, 'canvas should start at default width').toBe(512)
+
+      await widthSlider.focus()
+      await widthSlider.press('ArrowRight')
+
+      await expect
+        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
+        .toBe(576)
+    })
+
+    test(
+      'Resize preserves existing drawing',
+      { tag: ['@smoke', '@screenshot'] },
+      async ({ comfyPage }) => {
+        const node = comfyPage.vueNodes.getNodeLocator('1')
+        const painterWidget = node.locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+        const widthSlider = painterWidget
+          .getByTestId('painter-width-row')
+          .getByRole('slider')
+
+        await drawStroke(comfyPage.page, canvas)
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before resize'
+          })
           .toBe(true)
 
-      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+        await widthSlider.focus()
+        await widthSlider.press('ArrowRight')
+
+        await expect
+          .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
+          .toBe(576)
+
+        await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+        await expect(node).toHaveScreenshot('painter-after-resize.png')
       }
     )
+  })
+
+  test.describe('Clear', () => {
+    test(
+      'Clear removes all drawn content',
+      { tag: '@smoke' },
+      async ({ comfyPage }) => {
+        const painterWidget = comfyPage.vueNodes
+          .getNodeLocator('1')
+          .locator('.widget-expands')
+        const canvas = painterWidget.locator('canvas')
+
+        await drawStroke(comfyPage.page, canvas)
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas must have content before clear'
+          })
+          .toBe(true)
+
+        const clearButton = painterWidget.getByTestId('painter-clear-button')
+        await clearButton.dispatchEvent('click')
+
+        await expect
+          .poll(() => hasCanvasContent(canvas), {
+            message: 'canvas should be clear after click'
+          })
+          .toBe(false)
+      }
+    )
+  })
+
+  test.describe('Serialization', () => {
+    test('Drawing triggers upload on serialization', async ({ comfyPage }) => {
+      const mockUploadResponse: UploadImageResponse = {
+        name: 'painter-test.png'
+      }
+      let uploadCount = 0
+
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        uploadCount++
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(mockUploadResponse)
+        })
+      })
+
+      const canvas = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands canvas')
+
+      await drawStroke(comfyPage.page, canvas)
+
+      await triggerSerialization(comfyPage.page)
+
+      expect(uploadCount, 'should upload exactly once').toBe(1)
+    })
+
+    test('Empty canvas does not upload on serialization', async ({
+      comfyPage
+    }) => {
+      let uploadCount = 0
+
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        uploadCount++
+        const mockResponse: UploadImageResponse = { name: 'painter-test.png' }
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(mockResponse)
+        })
+      })
+
+      await triggerSerialization(comfyPage.page)
+
+      expect(uploadCount, 'empty canvas should not upload').toBe(0)
+    })
+
+    test('Upload failure shows error toast', async ({ comfyPage }) => {
+      await comfyPage.page.route('**/upload/image', async (route) => {
+        await route.fulfill({ status: 500 })
+      })
+
+      const canvas = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands canvas')
+
+      await drawStroke(comfyPage.page, canvas)
+
+      await expect(triggerSerialization(comfyPage.page)).rejects.toThrow()
+
+      await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+    })
+  })
 })

browser_tests/tests/pasteImageContextMenu.spec.ts

@@ -2,11 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Paste Image context menu option', { tag: ['@node'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe(
+  'Paste Image context menu option',
+  { tag: ['@node', '@vue-nodes'] },
+  () => {
     test('shows Paste Image in LoadImage node context menu', async ({
       comfyPage
     }) => {
@@ -51,4 +50,5 @@ test.describe('Paste Image context menu option', { tag: ['@node'] }, () => {
       expect(menuLabels).not.toContain('Paste Image')
       expect(menuLabels).not.toContain('Open Image')
     })
-})
+  }
+)

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).toBeHidden()
 }
+
+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/errorsTab.spec.ts

@@ -6,7 +6,6 @@ import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPane
 
 test.describe('Errors tab - common', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true

browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts

@@ -7,7 +7,6 @@ import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Errors tab - Execution errors', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true

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(
@@ -38,7 +38,6 @@ function getDropzone(comfyPage: ComfyPage) {
 
 test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true
@@ -47,7 +46,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 +59,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 +70,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 +86,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 +103,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
@@ -122,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()
@@ -141,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)
 
@@ -155,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,29 +6,24 @@ 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 }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true
     )
-    await expect
-      .poll(async () => {
-        return await comfyPage.page.evaluate(async (url: string) => {
-          const response = await fetch(`${url}/api/devtools/cleanup_fake_model`)
-          return response.ok
-        }, comfyPage.url)
-      })
-      .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)
@@ -38,7 +33,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
@@ -49,7 +44,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'
     )
@@ -69,14 +64,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')
@@ -86,7 +81,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
@@ -97,7 +92,7 @@ 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

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -2,11 +2,10 @@ 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 }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true
@@ -14,7 +13,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 +21,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 +31,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 +51,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 +79,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,519 @@
+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('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.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/propertiesPanel/nodeSettings.spec.ts

@@ -3,13 +3,11 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
 
-test.describe('Properties panel - Node settings', () => {
+test.describe('Properties panel - Node settings', { tag: '@vue-nodes' }, () => {
   let panel: PropertiesPanelHelper
 
   test.beforeEach(async ({ comfyPage }) => {
     panel = new PropertiesPanelHelper(comfyPage.page)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
     await comfyPage.actionbar.propertiesButton.click()
     await comfyPage.nodeOps.selectNodes(['KSampler'])
     await panel.switchToTab('Settings')

browser_tests/tests/releaseNotifications.spec.ts

@@ -19,10 +19,6 @@ function createMockRelease(overrides?: Partial<ReleaseNote>): ReleaseNote {
 }
 
 test.describe('Release Notifications', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should show help center with release information', async ({
     comfyPage
   }) => {

browser_tests/tests/remoteWidgets.spec.ts

@@ -47,7 +47,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
   }
 
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting(
       'Comfy.NodeSearchBoxImpl',
@@ -57,7 +56,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.describe('Loading options', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.page.route(
         '**/api/models/checkpoints**',
         async (route, request) => {

browser_tests/tests/rerouteNode.spec.ts

@@ -4,10 +4,6 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { getMiddlePoint } from '@e2e/fixtures/utils/litegraphUtils'
 
 test.describe('Reroute Node', { tag: ['@screenshot', '@node'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test.afterEach(async ({ comfyPage }) => {
     await comfyPage.workflow.setupWorkflowsDirectory({})
   })

browser_tests/tests/resultGallery.spec.ts

@@ -3,18 +3,11 @@ import { expect } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-  })
-
+test.describe('MediaLightbox', { tag: ['@slow', '@vue-nodes'] }, () => {
   async function runAndOpenGallery(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow(
       'widgets/save_image_and_animated_webp'
     )
-    await comfyPage.vueNodes.waitForNodes()
     await comfyPage.runButton.click()
 
     // Wait for SaveImage node to produce output

browser_tests/tests/rightSidePanelTabs.spec.ts

@@ -5,10 +5,6 @@ import {
 import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Properties panel opens with workflow overview', async ({
     comfyPage
   }) => {

browser_tests/tests/saveImageAndWebp.spec.ts

@@ -4,20 +4,14 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Save Image and WEBM preview',
-  { tag: ['@screenshot', '@widget'] },
+  { tag: ['@screenshot', '@widget', '@vue-nodes'] },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
     test('Can preview both SaveImage and SaveWEBM outputs', async ({
       comfyPage
     }) => {
       await comfyPage.workflow.loadWorkflow(
         'widgets/save_image_and_animated_webp'
       )
-      await comfyPage.vueNodes.waitForNodes()
 
       await comfyPage.runButton.click()
 

browser_tests/tests/selectionRectangle.spec.ts

@@ -3,14 +3,7 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('@canvas Selection Rectangle', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('@canvas Selection Rectangle', { tag: '@vue-nodes' }, () => {
   test('Ctrl+A selects all nodes', async ({ comfyPage }) => {
     await expect
       .poll(() => comfyPage.vueNodes.getNodeCount())

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -28,10 +28,6 @@ async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   await nodeRef.click('title')
 }
 
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-})
-
 test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -43,7 +43,6 @@ async function renameInlineFolder(comfyPage: ComfyPage, newName: string) {
 
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting(bookmarksSettingId, [])
     await comfyPage.settings.setSetting(bookmarksCustomizationSettingId, {})

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -4,7 +4,6 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Node library sidebar V2', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
 
     const tab = comfyPage.menu.nodeLibraryTabV2

browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts

@@ -5,7 +5,6 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Sidebar splitter width independence', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Sidebar.UnifiedWidth', true)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -2,10 +2,10 @@ 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 }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.WorkflowTabsPosition',
       'Sidebar'
@@ -249,7 +249,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(
@@ -271,11 +271,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/subgraphDuplicateIndependentValues.spec.ts

@@ -11,14 +11,8 @@ async function openVueNodeContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
 
 test.describe(
   'Subgraph Duplicate Independent Values',
-  { tag: ['@slow', '@subgraph'] },
+  { tag: ['@slow', '@subgraph', '@vue-nodes'] },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
     test('Duplicated subgraphs maintain independent widget values', async ({
       comfyPage
     }) => {

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

@@ -8,10 +8,6 @@ const domPreviewSelector = '.image-preview'
 
 test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
   test.describe('Cleanup Behavior After Promoted Source Removal', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test('Deleting the promoted source removes the exterior DOM widget', async ({
       comfyPage
     }) => {

browser_tests/tests/subgraph/subgraphNavigation.spec.ts

@@ -33,10 +33,6 @@ function hasVisibleNodeInViewport() {
 
 test.describe('Subgraph Navigation', { tag: ['@slow', '@subgraph'] }, () => {
   test.describe('Subgraph Navigation and UI', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test('Breadcrumb updates when subgraph node title is changed', async ({
       comfyPage
     }) => {
@@ -108,10 +104,6 @@ test.describe('Subgraph Navigation', { tag: ['@slow', '@subgraph'] }, () => {
   })
 
   test.describe('Navigation Hotkeys', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test('Navigation hotkey can be customized', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
       await comfyPage.nextFrame()

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -182,10 +182,6 @@ test.describe(
     })
 
     test.describe('Manual Promote/Demote via Context Menu', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      })
-
       test('Can promote and un-promote a widget from inside a subgraph', async ({
         comfyPage
       }) => {
@@ -477,8 +473,6 @@ test.describe(
       test('Nested promoted widget entries reflect interior changes after slot removal', async ({
         comfyPage
       }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
         await comfyPage.workflow.loadWorkflow(
           'subgraphs/subgraph-nested-promotion'
         )
@@ -522,8 +516,6 @@ test.describe(
       test('Removing I/O slot removes associated promoted widget', async ({
         comfyPage
       }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
         await comfyPage.workflow.loadWorkflow(
           'subgraphs/subgraph-with-promoted-text-widget'
         )

browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts

@@ -115,8 +115,6 @@ test.describe('Subgraph Promotion DOM', { tag: ['@subgraph'] }, () => {
     test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
       comfyPage
     }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
       await comfyPage.workflow.loadWorkflow(
         'subgraphs/subgraph-with-promoted-text-widget'
       )

browser_tests/tests/subgraph/subgraphSearch.spec.ts

@@ -42,7 +42,6 @@ async function searchAndExpectResult(
 
 test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.NodeSearchBoxImpl',
       'v1 (legacy)'

browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts

@@ -4,15 +4,8 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Zero UUID workflow: subgraph undo rendering',
-  { tag: ['@workflow', '@subgraph'] },
+  { tag: ['@workflow', '@subgraph', '@vue-nodes'] },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      test.setTimeout(30000) // Extend timeout as we need to reload the page an additional time
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.page.reload() // Reload page as we need to enter in Vue mode
-      await comfyPage.page.waitForFunction(() => !!window.app?.graph)
-    })
-
     test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
       comfyPage
     }) => {

browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts

@@ -46,10 +46,6 @@ test.describe(
   'Subgraph promoted widget panel',
   { tag: ['@node', '@widget'] },
   () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
     test.describe('SubgraphEditor (Settings panel)', () => {
       test('linked promoted widgets have hide toggle disabled', async ({
         comfyPage

browser_tests/tests/templates.spec.ts

@@ -16,10 +16,6 @@ async function checkTemplateFileExists(
 }
 
 test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('should have a JSON workflow file for each template', async ({
     comfyPage
   }) => {

browser_tests/tests/toastNotifications.spec.ts

@@ -4,11 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Toast Notifications', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   async function triggerErrorToast(comfyPage: {
     page: { evaluate: (fn: () => void) => Promise<void> }
     nextFrame: () => Promise<void>

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -4,7 +4,6 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Workflow tabs', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.WorkflowTabsPosition',
       'Topbar'

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -37,7 +37,6 @@ test.describe('Version Mismatch Warnings', { tag: '@slow' }, () => {
   }
 
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.VersionCompatibility.DisableWarnings',
       false

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

@@ -112,11 +112,9 @@ async function getNodeGroupCenteringErrors(
   })
 }
 
-test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
+test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('Comfy.Minimap.ShowGroups', true)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow creating groups with hotkey', async ({ comfyPage }) => {
@@ -130,7 +128,6 @@ test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
   })
 
   test('should allow fitting group to contents', async ({ comfyPage }) => {
-    await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('groups/oversized_group')
     await comfyPage.keyboard.selectAll()
     await comfyPage.command.executeCommand('Comfy.Graph.FitGroupToContents')

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts

@@ -3,12 +3,7 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Nodes Canvas Pan', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Nodes Canvas Pan', { tag: '@vue-nodes' }, () => {
   test(
     '@mobile Can pan with touch',
     { tag: '@screenshot' },

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -3,11 +3,9 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Nodes Zoom', () => {
+test.describe('Vue Nodes Zoom', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -99,14 +99,13 @@ async function connectSlots(
   await nextFrame()
 }
 
-test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
+test.describe(
+  'Vue Node Link Interaction',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
     test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
       await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    // await comfyPage.setup()
       await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
-    await comfyPage.vueNodes.waitForNodes()
       await fitToViewInstant(comfyPage)
     })
 
@@ -149,7 +148,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
       expect(samplerNode && vaeNode).toBeTruthy()
 
       const samplerOutput = await samplerNode.getOutput(0)
@@ -235,7 +236,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
       expect(samplerNode && vaeNode).toBeTruthy()
       const samplerOutputCenter = await getSlotCenter(
         comfyPage.page,
@@ -274,7 +277,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
       expect(samplerNode && vaeNode).toBeTruthy()
 
       const samplerOutput = await samplerNode.getOutput(0)
@@ -333,7 +338,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
       expect(samplerNode && vaeNode).toBeTruthy()
 
       const samplerOutput = await samplerNode.getOutput(0)
@@ -415,7 +422,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
 
       const samplerOutput = await samplerNode.getOutput(0)
       const vaeInput = await vaeNode.getInput(0)
@@ -507,7 +516,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
       )[0]
-    const vaeNode = (await comfyPage.nodeOps.getNodeRefsByType('VAEDecode'))[0]
+      const vaeNode = (
+        await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      )[0]
       expect(samplerNode && vaeNode).toBeTruthy()
 
       const samplerOutput = await samplerNode.getOutput(0)
@@ -738,7 +749,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       )
 
       // Drag to the visual center of the KSampler Vue node (not a slot)
-    const samplerVue = comfyPage.vueNodes.getNodeLocator(String(samplerNode.id))
+      const samplerVue = comfyPage.vueNodes.getNodeLocator(
+        String(samplerNode.id)
+      )
       await expect(samplerVue).toBeVisible()
       const samplerCenter = await getCenter(samplerVue)
 
@@ -746,7 +759,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       await comfyMouse.drag(samplerCenter)
 
       // During drag, the preview should snap/highlight a compatible input on KSampler
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-node.png')
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-snap-to-node.png'
+      )
 
       // Drop to create the link
       await comfyMouse.drop()
@@ -803,7 +818,9 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       await comfyMouse.drag(samplerInput3Center)
 
       // Expect the preview to show snapping to the targeted slot
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-slot.png')
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-snap-to-slot.png'
+      )
 
       // Finish the connection
       await comfyMouse.drop()
@@ -900,7 +917,8 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         await expect
           .poll(() =>
             comfyPage.page.evaluate(() => {
-            const snap = window.app?.canvas?.linkConnector?.state?.snapLinksPos
+              const snap =
+                window.app?.canvas?.linkConnector?.state?.snapLinksPos
               return Array.isArray(snap) ? [snap[0], snap[1]] : null
             })
           )
@@ -916,7 +934,8 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         await expect
           .poll(() =>
             comfyPage.page.evaluate(() => {
-            const snap = window.app?.canvas?.linkConnector?.state?.snapLinksPos
+              const snap =
+                window.app?.canvas?.linkConnector?.state?.snapLinksPos
               return Array.isArray(snap) ? [snap[0], snap[1]] : null
             })
           )
@@ -982,7 +1001,11 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
             const vaeNodes =
               await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
             for (const vae of vaeNodes) {
-            const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+              const details = await getInputLinkDetails(
+                comfyPage.page,
+                vae.id,
+                0
+              )
               if (details) return details.originId
             }
             return null
@@ -1042,7 +1065,11 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
             const vaeNodes =
               await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
             for (const vae of vaeNodes) {
-            const details = await getInputLinkDetails(comfyPage.page, vae.id, 0)
+              const details = await getInputLinkDetails(
+                comfyPage.page,
+                vae.id,
+                0
+              )
               if (details) return details.originId
             }
             return null
@@ -1104,4 +1131,5 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
       await expect.poll(() => positiveInput.getLinkCount()).toBe(1)
       await expect.poll(() => negativeInput.getLinkCount()).toBe(0)
     })
-})
+  }
+)

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

@@ -5,12 +5,13 @@ import {
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
+test.describe(
+  'Vue Node Bring to Front',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
       await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
-    await comfyPage.vueNodes.waitForNodes()
       await fitToViewInstant(comfyPage)
     })
 
@@ -103,7 +104,9 @@ test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
       const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
 
       // Get VAE Decode position and drag it on top of CLIP
-    const vaeHeader = await comfyPage.page.getByText('VAE Decode').boundingBox()
+      const vaeHeader = await comfyPage.page
+        .getByText('VAE Decode')
+        .boundingBox()
       if (!vaeHeader) throw new Error('VAE Decode header not found')
 
       await comfyPage.canvasOps.dragAndDrop(
@@ -147,4 +150,5 @@ test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
         'bring-to-front-widget-overlapped-after.png'
       )
     })
-})
+  }
+)

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

@@ -60,13 +60,7 @@ async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
   return refs[0]
 }
 
-test.describe('Vue Node Context Menu', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
   test.describe('Single Node Actions', () => {
     test('should rename node via context menu', async ({ comfyPage }) => {
       await openContextMenu(comfyPage, 'KSampler')

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

@@ -7,14 +7,9 @@ import {
   getPromotedWidgetCountByName
 } from '@e2e/helpers/promotedWidgets'
 
-test.describe('Vue Nodes Image Preview', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
@@ -73,7 +68,6 @@ test.describe('Vue Nodes Image Preview', () => {
       await comfyPage.workflow.loadWorkflow(
         'subgraphs/subgraph-with-multiple-promoted-previews'
       )
-      await comfyPage.vueNodes.waitForNodes()
 
       const firstSubgraphNode = comfyPage.vueNodes.getNodeLocator('7')
       const secondSubgraphNode = comfyPage.vueNodes.getNodeLocator('8')

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

@@ -5,12 +5,7 @@ import {
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { Position } from '@e2e/fixtures/types'
 
-test.describe('Vue Node Moving', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
   const getHeaderPos = async (
     comfyPage: ComfyPage,
     title: string

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

@@ -2,23 +2,13 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-test.describe('Vue Nodes - Delete Key Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Enable Vue nodes rendering
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.setup()
-  })
-
+test.describe(
+  'Vue Nodes - Delete Key Interaction',
+  { tag: '@vue-nodes' },
+  () => {
     test('Can select all and delete Vue nodes with Delete key', async ({
       comfyPage
     }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
       // Get initial Vue node count
       await expect
         .poll(() => comfyPage.vueNodes.getNodeCount())
@@ -29,7 +19,9 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
       await comfyPage.keyboard.selectAll()
 
       // Verify all Vue nodes are selected
-    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(initialNodeCount)
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
+        initialNodeCount
+      )
 
       // Delete with Delete key
       await comfyPage.vueNodes.deleteSelected()
@@ -38,9 +30,9 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
       await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(0)
     })
 
-  test('Can select specific Vue node and delete it', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
+    test('Can select specific Vue node and delete it', async ({
+      comfyPage
+    }) => {
       // Get initial Vue node count
       await expect
         .poll(() => comfyPage.vueNodes.getNodeCount())
@@ -66,8 +58,6 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
     test('Can select and delete Vue node with Backspace key', async ({
       comfyPage
     }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
       const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
       // Select first Vue node
@@ -109,8 +99,6 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
     test('Delete key does not delete node when nothing is selected', async ({
       comfyPage
     }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
       // Ensure no Vue nodes are selected
       await comfyPage.vueNodes.clearSelection()
       await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
@@ -127,7 +115,6 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
     test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
       comfyPage
     }) => {
-    await comfyPage.vueNodes.waitForNodes()
       const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
       // Multi-select first two Vue nodes using Ctrl+click
@@ -148,4 +135,5 @@ test.describe('Vue Nodes - Delete Key Interaction', () => {
         .poll(() => comfyPage.vueNodes.getNodeCount())
         .toBe(initialNodeCount - nodesToSelect.length)
     })
-})
+  }
+)

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

@@ -4,14 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Vue Nodes Renaming', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Nodes Renaming', { tag: '@vue-nodes' }, () => {
   test('should display node title', async ({ comfyPage }) => {
     const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     await expect(vueNode.header).toContainText('KSampler')

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

@@ -3,12 +3,7 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Node Resizing', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Resizing', { tag: '@vue-nodes' }, () => {
   test('should resize node without position drift after selecting', async ({
     comfyPage
   }) => {