fix: address agent review feedback

- Fix memory leak: remove element from deferredElements on unmount
- Add nextFrame() after repositionNodes in Vue mode E2E tests
- Guard against zero-size collapsed measurements
- Wrap getCollapsedSize callback in try-catch for Y.Map resilience
- Improve measure() cache test to verify output values after invalidation
- Add layoutStore collapsed size lifecycle unit tests
- Fix LGraphNode.test.ts for updated useVueElementTracking signature
- Use @e2e/ path alias for E2E test imports

.oxlintrc.json

@@ -150,7 +150,7 @@
         "playwright/no-element-handle": "error",
         "playwright/no-eval": "error",
         "playwright/no-focused-test": "error",
-        "playwright/no-force-option": "error",
+        "playwright/no-force-option": "off",
         "playwright/no-networkidle": "error",
         "playwright/no-page-pause": "error",
         "playwright/no-skipped-test": "error",

browser_tests/assets/missing/missing_media_bypassed.json

@@ -1,34 +0,0 @@
-{
-  "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, 200],
+      "pos": [50, 50],
       "size": [315, 314],
       "flags": {},
       "order": 0,
@@ -31,7 +31,7 @@
     {
       "id": 11,
       "type": "LoadImage",
-      "pos": [450, 200],
+      "pos": [450, 50],
       "size": [315, 314],
       "flags": {},
       "order": 1,

browser_tests/assets/missing/missing_media_single.json

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

browser_tests/assets/missing/missing_models.json

@@ -1,27 +1,7 @@
 {
-  "last_node_id": 1,
+  "last_node_id": 0,
   "last_link_id": 0,
-  "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"]
-    }
-  ],
+  "nodes": [],
   "links": [],
   "groups": [],
   "config": {},
@@ -35,7 +15,7 @@
     {
       "name": "fake_model.safetensors",
       "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "checkpoints"
+      "directory": "text_encoders"
     }
   ],
   "version": 0.4

browser_tests/assets/missing/missing_models_bypassed.json

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

@@ -1,141 +0,0 @@
-{
-  "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": "checkpoints"
+      "directory": "text_encoders"
     }
   ],
   "version": 0.4

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

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

browser_tests/assets/widgets/image_crop_widget.json

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

@@ -1,100 +0,0 @@
-{
-  "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,8 +414,6 @@ 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',
@@ -438,8 +436,7 @@ 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,
-        ...(isVueNodes && { 'Comfy.VueNodes.Enabled': true })
+        'Comfy.RightSidePanel.ShowErrorsTab': false
       })
     } catch (e) {
       console.error(e)
@@ -451,10 +448,6 @@ 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 '@e2e/fixtures/selectors'
+import { TestIds } from '../selectors'
 
 const ids = TestIds.outputHistory
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -351,7 +351,7 @@ export class AssetsSidebarTab extends SidebarTab {
   async dismissToasts() {
     const closeButtons = this.page.locator('.p-toast-close-button')
     for (const btn of await closeButtons.all()) {
-      await btn.click().catch(() => {})
+      await btn.click({ force: true }).catch(() => {})
     }
     // Wait for all toast elements to fully animate out and detach from DOM
     await expect(this.page.locator('.p-toast-message'))

browser_tests/fixtures/components/Topbar.ts

@@ -71,7 +71,7 @@ export class Topbar {
   async closeWorkflowTab(tabName: string) {
     const tab = this.getWorkflowTab(tabName)
     await tab.hover()
-    await tab.locator('.close-button').click()
+    await tab.locator('.close-button').click({ force: true })
   }
 
   getSaveDialog(): Locator {

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -151,7 +151,6 @@ export class BuilderSelectHelper {
     const widgetLocator = this.comfyPage.vueNodes
       .getNodeLocator(String(nodeRef.id))
       .getByLabel(widgetName, { exact: true })
-    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
     await widgetLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }
@@ -200,7 +199,6 @@ export class BuilderSelectHelper {
     const nodeLocator = this.comfyPage.vueNodes.getNodeLocator(
       String(nodeRef.id)
     )
-    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
     await nodeLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -74,51 +74,6 @@ export class CanvasHelper {
     await this.nextFrame()
   }
 
-  /**
-   * Convert a canvas-element-relative position to absolute page coordinates.
-   * Use with `page.mouse` APIs when Vue DOM overlays above the canvas would
-   * cause Playwright's actionability check to fail on the canvas locator.
-   */
-  private async toAbsolute(position: Position): Promise<Position> {
-    const box = await this.canvas.boundingBox()
-    if (!box) throw new Error('Canvas bounding box not available')
-    return { x: box.x + position.x, y: box.y + position.y }
-  }
-
-  /**
-   * Click at canvas-element-relative coordinates using `page.mouse.click()`.
-   * Bypasses Playwright's actionability checks on the canvas locator, which
-   * can fail when Vue-rendered DOM nodes overlay the `<canvas>` element.
-   */
-  async mouseClickAt(
-    position: Position,
-    options?: {
-      button?: 'left' | 'right' | 'middle'
-      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
-    }
-  ): Promise<void> {
-    const abs = await this.toAbsolute(position)
-    const modifiers = options?.modifiers ?? []
-    for (const mod of modifiers) await this.page.keyboard.down(mod)
-    try {
-      await this.page.mouse.click(abs.x, abs.y, {
-        button: options?.button
-      })
-    } finally {
-      for (const mod of modifiers) await this.page.keyboard.up(mod)
-    }
-    await this.nextFrame()
-  }
-
-  /**
-   * Double-click at canvas-element-relative coordinates using `page.mouse`.
-   */
-  async mouseDblclickAt(position: Position): Promise<void> {
-    const abs = await this.toAbsolute(position)
-    await this.page.mouse.dblclick(abs.x, abs.y)
-    await this.nextFrame()
-  }
-
   async clickEmptySpace(): Promise<void> {
     await this.canvas.click({ position: DefaultGraphPositions.emptySpaceClick })
     await this.nextFrame()

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 '@e2e/fixtures/ComfyPage'
-import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
+import type { ComfyPage } from '../ComfyPage'
+import { createMockJob } from './AssetsHelper'
 
 /**
  * Helper for simulating prompt execution in e2e tests.

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

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

browser_tests/fixtures/helpers/boundsUtils.ts

@@ -0,0 +1,112 @@
+import type { Page } from '@playwright/test'
+
+export interface CanvasRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface MeasureResult {
+  selectionBounds: CanvasRect | null
+  nodeVisualBounds: Record<string, CanvasRect>
+}
+
+// Must match createBounds(selectedItems, 10) in src/extensions/core/selectionBorder.ts:19
+const SELECTION_PADDING = 10
+
+export async function measureSelectionBounds(
+  page: Page,
+  nodeIds: string[]
+): Promise<MeasureResult> {
+  return page.evaluate(
+    ({ ids, padding }) => {
+      const canvas = window.app!.canvas
+      const ds = canvas.ds
+
+      const selectedItems = canvas.selectedItems
+      let minX = Infinity
+      let minY = Infinity
+      let maxX = -Infinity
+      let maxY = -Infinity
+      for (const item of selectedItems) {
+        const rect = item.boundingRect
+        // For collapsed nodes, use DOM element size (matches selectionBorder.ts
+        // which reads layoutStore.collapsedSize in Vue mode)
+        const id = 'id' in item ? String(item.id) : null
+        const isCollapsed =
+          'flags' in item &&
+          !!(item as { flags?: { collapsed?: boolean } }).flags?.collapsed
+        const el =
+          id && isCollapsed
+            ? document.querySelector(`[data-node-id="${id}"]`)
+            : null
+        const w = el instanceof HTMLElement ? el.offsetWidth : rect[2]
+        const h = el instanceof HTMLElement ? el.offsetHeight : rect[3]
+
+        minX = Math.min(minX, rect[0])
+        minY = Math.min(minY, rect[1])
+        maxX = Math.max(maxX, rect[0] + w)
+        maxY = Math.max(maxY, rect[1] + h)
+      }
+      const selectionBounds =
+        selectedItems.size > 0
+          ? {
+              x: minX - padding,
+              y: minY - padding,
+              w: maxX - minX + 2 * padding,
+              h: maxY - minY + 2 * padding
+            }
+          : null
+
+      const canvasEl = canvas.canvas as HTMLCanvasElement
+      const canvasRect = canvasEl.getBoundingClientRect()
+      const nodeVisualBounds: Record<
+        string,
+        { x: number; y: number; w: number; h: number }
+      > = {}
+
+      for (const id of ids) {
+        const nodeEl = document.querySelector(
+          `[data-node-id="${id}"]`
+        ) as HTMLElement | null
+
+        // Legacy mode: no Vue DOM element, use boundingRect directly
+        if (!nodeEl) {
+          const node = window.app!.graph._nodes.find(
+            (n: { id: number | string }) => String(n.id) === id
+          )
+          if (node) {
+            const rect = node.boundingRect
+            nodeVisualBounds[id] = {
+              x: rect[0],
+              y: rect[1],
+              w: rect[2],
+              h: rect[3]
+            }
+          }
+          continue
+        }
+
+        const domRect = nodeEl.getBoundingClientRect()
+        const footerEls = nodeEl.querySelectorAll(
+          '[data-testid="subgraph-enter-button"], [data-testid="node-footer"]'
+        )
+        let bottom = domRect.bottom
+        for (const footerEl of footerEls) {
+          bottom = Math.max(bottom, footerEl.getBoundingClientRect().bottom)
+        }
+
+        nodeVisualBounds[id] = {
+          x: (domRect.left - canvasRect.left) / ds.scale - ds.offset[0],
+          y: (domRect.top - canvasRect.top) / ds.scale - ds.offset[1],
+          w: domRect.width / ds.scale,
+          h: (bottom - domRect.top) / ds.scale
+        }
+      }
+
+      return { selectionBounds, nodeVisualBounds }
+    },
+    { ids: nodeIds, padding: SELECTION_PADDING }
+  ) as Promise<MeasureResult>
+}

browser_tests/fixtures/selectors.ts

@@ -21,10 +21,6 @@ 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',
@@ -83,8 +79,7 @@ export const TestIds = {
     bookmarksSection: 'node-library-bookmarks-section'
   },
   propertiesPanel: {
-    root: 'properties-panel',
-    errorsTab: 'panel-tab-errors'
+    root: 'properties-panel'
   },
   subgraphEditor: {
     toggle: 'subgraph-editor-toggle',

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { ManageGroupNode } from '@e2e/helpers/manageGroupNode'
@@ -331,6 +332,18 @@ export class NodeReference {
   async isCollapsed() {
     return !!(await this.getFlags()).collapsed
   }
+  /** Deterministic setter using node.collapse() API (not a toggle). */
+  async setCollapsed(collapsed: boolean) {
+    await this.comfyPage.page.evaluate(
+      ([id, collapsed]) => {
+        const node = window.app!.canvas.graph!.getNodeById(id)
+        if (!node) throw new Error('Node not found')
+        if (node.collapsed !== collapsed) node.collapse(true)
+      },
+      [this.id, collapsed] as const
+    )
+    await this.comfyPage.nextFrame()
+  }
   async isBypassed() {
     return (await this.getProperty<number | null | undefined>('mode')) === 4
   }
@@ -355,11 +368,7 @@ export class NodeReference {
   }
   async click(
     position: 'title' | 'collapse',
-    options?: {
-      button?: 'left' | 'right' | 'middle'
-      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
-      moveMouseToEmptyArea?: boolean
-    }
+    options?: Parameters<Page['click']>[1] & { moveMouseToEmptyArea?: boolean }
   ) {
     let clickPos: Position
     switch (position) {
@@ -380,7 +389,12 @@ export class NodeReference {
       delete options.moveMouseToEmptyArea
     }
 
-    await this.comfyPage.canvasOps.mouseClickAt(clickPos, options)
+    await this.comfyPage.canvas.click({
+      ...options,
+      position: clickPos,
+      force: true
+    })
+    await this.comfyPage.nextFrame()
     if (moveMouseToEmptyArea) {
       await this.comfyPage.canvasOps.moveMouseToEmptyArea()
     }
@@ -497,18 +511,31 @@ export class NodeReference {
 
     await expect(async () => {
       // Try just clicking the enter button first
-      await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
+      await this.comfyPage.canvas.click({
+        position: { x: 250, y: 250 },
+        force: true
+      })
+      await this.comfyPage.nextFrame()
 
-      await this.comfyPage.canvasOps.mouseClickAt(subgraphButtonPos)
+      await this.comfyPage.canvas.click({
+        position: subgraphButtonPos,
+        force: true
+      })
+      await this.comfyPage.nextFrame()
 
       if (await checkIsInSubgraph()) return
 
       for (const position of clickPositions) {
         // Clear any selection first
-        await this.comfyPage.canvasOps.mouseClickAt({ x: 250, y: 250 })
+        await this.comfyPage.canvas.click({
+          position: { x: 250, y: 250 },
+          force: true
+        })
+        await this.comfyPage.nextFrame()
 
         // Double-click to enter subgraph
-        await this.comfyPage.canvasOps.mouseDblclickAt(position)
+        await this.comfyPage.canvas.dblclick({ position, force: true })
+        await this.comfyPage.nextFrame()
 
         if (await checkIsInSubgraph()) return
       }

browser_tests/helpers/painter.ts

@@ -1,66 +0,0 @@
-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,6 +8,10 @@ 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/appModePruning.spec.ts

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

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -4,6 +4,10 @@ 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,6 +3,10 @@ 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/cloud.spec.ts

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

browser_tests/tests/collapsedNodeLinks.spec.ts

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

browser_tests/tests/customIcons.spec.ts

@@ -20,6 +20,10 @@ 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,6 +20,7 @@ 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()
     })
@@ -163,6 +164,8 @@ 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()
@@ -177,6 +180,7 @@ 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')
@@ -192,6 +196,8 @@ 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,6 +103,7 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
     // Prevent loading the external page
     await comfyPage.page
       .context()

browser_tests/tests/dialogs/signInDialog.spec.ts

@@ -7,6 +7,7 @@ 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,7 +47,16 @@ test.describe('Error overlay', { tag: '@ui' }, () => {
     test('Should display "Show missing models" button for missing model errors', async ({
       comfyPage
     }) => {
-      await cleanupFakeModel(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 comfyPage.workflow.loadWorkflow('missing/missing_models')
 
@@ -108,33 +117,6 @@ 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,6 +13,10 @@ 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

@@ -5,6 +5,7 @@ import {
 
 test.describe('Focus Mode', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setup()
   })
 

browser_tests/tests/imageCompare.spec.ts

@@ -1,11 +1,11 @@
-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', { tag: ['@widget', '@vue-nodes'] }, () => {
+test.describe('Image Compare', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
     await comfyPage.vueNodes.waitForNodes()
   })
@@ -21,12 +21,7 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
 
   async function setImageCompareValue(
     comfyPage: ComfyPage,
-    value: {
-      beforeImages: string[]
-      afterImages: string[]
-      beforeAlt?: string
-      afterAlt?: string
-    }
+    value: { beforeImages: string[]; afterImages: string[] }
   ) {
     await comfyPage.page.evaluate(
       ({ value }) => {
@@ -42,48 +37,6 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     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' },
@@ -97,10 +50,6 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
     }
   )
 
-  // ---------------------------------------------------------------------------
-  // Slider defaults
-  // ---------------------------------------------------------------------------
-
   test(
     'Slider defaults to 50% with both images set',
     { tag: ['@smoke', '@screenshot'] },
@@ -122,440 +71,11 @@ test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
       await expect(handle).toBeVisible()
 
       expect(
-        await handle.evaluate((el) => (el as HTMLElement).style.left),
-        'Slider should default to 50% before screenshot'
+        await handle.evaluate((el) => (el as HTMLElement).style.left)
       ).toBe('50%')
-      await expect
-        .poll(() => getClipPathInsetRightPercent(beforeImg))
-        .toBeCloseTo(50, 0)
+      await expect(beforeImg).toHaveCSS('clip-path', /50%/)
 
-      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,6 +895,7 @@ 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()
@@ -969,6 +970,7 @@ 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()
@@ -1058,10 +1060,13 @@ 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,6 +7,7 @@ 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

browser_tests/tests/linearMode.spec.ts

@@ -5,6 +5,7 @@ import {
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setup()
   })
 

browser_tests/tests/maskEditor.spec.ts

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

browser_tests/tests/menu.spec.ts

@@ -3,6 +3,10 @@ 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,40 +1,11 @@
 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')
@@ -42,20 +13,14 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap is visible by default', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
 
     await expect(minimapContainer).toBeVisible()
 
-    const minimapCanvas = minimapContainer.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
+    const minimapCanvas = minimapContainer.locator('.minimap-canvas')
     await expect(minimapCanvas).toBeVisible()
 
-    const minimapViewport = minimapContainer.getByTestId(
-      TestIds.canvas.minimapViewport
-    )
+    const minimapViewport = minimapContainer.locator('.minimap-viewport')
     await expect(minimapViewport).toBeVisible()
 
     await expect(minimapContainer).toHaveCSS('position', 'relative')
@@ -75,16 +40,12 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
 
     await expect(toggleButton).toBeVisible()
 
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
     await expect(minimapContainer).toBeVisible()
   })
 
   test('Validate minimap can be toggled off and on', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
     const toggleButton = comfyPage.page.getByTestId(
       TestIds.canvas.toggleMinimapButton
     )
@@ -99,9 +60,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
-    const minimapContainer = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapContainer
-    )
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
 
     await expect(minimapContainer).toBeVisible()
 
@@ -113,7 +72,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
   })
 
   test('Close button hides minimap', async ({ comfyPage }) => {
-    const minimap = comfyPage.page.getByTestId(TestIds.canvas.minimapContainer)
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
     await expect(minimap).toBeVisible()
 
     await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
@@ -129,9 +88,7 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     'Panning canvas moves minimap viewport',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
-      const minimap = comfyPage.page.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
       await expect(minimap).toBeVisible()
 
       await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
@@ -148,135 +105,14 @@ 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.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
       await expect(minimap).toBeVisible()
 
-      const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
+      const viewport = minimap.locator('.minimap-viewport')
       await expect(viewport).toBeVisible()
 
       await expect(async () => {

browser_tests/tests/nodeHelp.spec.ts

@@ -29,7 +29,7 @@ async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
 
   const helpButton = comfyPage.selectionToolbox.getByTestId('info-button')
   await expect(helpButton).toBeVisible()
-  await helpButton.click()
+  await helpButton.click({ force: true })
   await comfyPage.nextFrame()
 
   return comfyPage.page.getByTestId('properties-panel')
@@ -88,6 +88,7 @@ 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,6 +5,8 @@ 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,13 +2,10 @@ 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 '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+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'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -43,6 +40,7 @@ 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,17 +1,10 @@
-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', { tag: ['@widget', '@vue-nodes'] }, () => {
+test.describe('Painter', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.page.evaluate(() => window.app?.graph?.clear())
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
     await comfyPage.vueNodes.waitForNodes()
   })
@@ -27,15 +20,9 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       await expect(painterWidget).toBeVisible()
 
       await expect(painterWidget.locator('canvas')).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.getByText('Brush')).toBeVisible()
+      await expect(painterWidget.getByText('Eraser')).toBeVisible()
+      await expect(painterWidget.getByText('Clear')).toBeVisible()
       await expect(
         painterWidget.locator('input[type="color"]').first()
       ).toBeVisible()
@@ -52,66 +39,22 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
       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(() => hasCanvasContent(canvas), {
-          message: 'canvas should have content after stroke'
-        })
+        .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))
+          })
+        )
         .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')
 
@@ -125,250 +68,29 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
         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(() => hasCanvasContent(canvas), {
-          message:
-            'canvas should have content after stroke with pointer up outside'
-        })
+        .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
+          })
+        )
         .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 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()
-    })
-  })
+      await expect(node).toHaveScreenshot('painter-after-stroke.png')
+    }
+  )
 })

browser_tests/tests/pasteImageContextMenu.spec.ts

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

browser_tests/tests/propertiesPanel/ErrorsTabHelper.ts

@@ -2,9 +2,8 @@ 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 loadWorkflowAndOpenErrorsTab(
+export async function openErrorsTabViaSeeErrors(
   comfyPage: ComfyPage,
   workflow: string
 ) {
@@ -16,30 +15,3 @@ export async function loadWorkflowAndOpenErrorsTab(
   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,6 +6,7 @@ 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,6 +7,7 @@ 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 { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { openErrorsTabViaSeeErrors } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
 
 async function uploadFileViaDropzone(comfyPage: ComfyPage) {
   const dropzone = comfyPage.page.getByTestId(
@@ -38,6 +38,7 @@ 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
@@ -46,10 +47,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
 
   test.describe('Detection', () => {
     test('Shows missing media group in errors tab', async ({ comfyPage }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
 
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingMediaGroup)
@@ -59,7 +57,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Shows correct number of missing media rows', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
+      await openErrorsTabViaSeeErrors(
         comfyPage,
         'missing/missing_media_multiple'
       )
@@ -70,10 +68,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Shows upload dropzone and library select for each missing item', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
 
       await expect(getDropzone(comfyPage)).toBeVisible()
       await expect(
@@ -86,10 +81,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Upload via file picker shows status card then allows confirm', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
       await uploadFileViaDropzone(comfyPage)
 
       await expect(getStatusCard(comfyPage)).toBeVisible()
@@ -103,10 +95,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Selecting from library shows status card then allows confirm', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
 
       const librarySelect = comfyPage.page.getByTestId(
         TestIds.dialogs.missingMediaLibrarySelect
@@ -133,10 +122,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Cancelling pending selection returns to upload/library UI', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
       await uploadFileViaDropzone(comfyPage)
 
       await expect(getStatusCard(comfyPage)).toBeVisible()
@@ -155,10 +141,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Missing Inputs group disappears when all items are resolved', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
       await uploadFileViaDropzone(comfyPage)
       await confirmPendingSelection(comfyPage)
 
@@ -172,10 +155,7 @@ test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
     test('Locate button navigates canvas to the missing media node', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(
-        comfyPage,
-        'missing/missing_media_single'
-      )
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_media_single')
 
       const offsetBefore = await comfyPage.page.evaluate(() => {
         const canvas = window['app']?.canvas

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -6,24 +6,29 @@ import {
   interceptClipboardWrite,
   getClipboardText
 } from '@e2e/helpers/clipboardSpy'
-import {
-  cleanupFakeModel,
-  loadWorkflowAndOpenErrorsTab
-} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { openErrorsTabViaSeeErrors } 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 cleanupFakeModel(comfyPage)
+    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()
   })
 
   test('Should show missing models group in errors tab', async ({
     comfyPage
   }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
 
     await expect(
       comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
@@ -33,7 +38,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test('Should display model name with referencing node count', async ({
     comfyPage
   }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
 
     const modelsGroup = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelsGroup
@@ -44,7 +49,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test('Should expand model row to show referencing nodes', async ({
     comfyPage
   }) => {
-    await loadWorkflowAndOpenErrorsTab(
+    await openErrorsTabViaSeeErrors(
       comfyPage,
       'missing/missing_models_with_nodes'
     )
@@ -64,14 +69,14 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   })
 
   test('Should copy model name to clipboard', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+    await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
     await interceptClipboardWrite(comfyPage.page)
 
     const copyButton = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelCopyName
     )
     await expect(copyButton.first()).toBeVisible()
-    await copyButton.first().dispatchEvent('click')
+    await copyButton.first().click()
 
     const copiedText = await getClipboardText(comfyPage.page)
     expect(copiedText).toContain('fake_model.safetensors')
@@ -81,7 +86,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     test('Should show Copy URL button for non-asset models', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
 
       const copyUrlButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelCopyUrl
@@ -92,7 +97,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     test('Should show Download button for downloadable models', async ({
       comfyPage
     }) => {
-      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+      await openErrorsTabViaSeeErrors(comfyPage, 'missing/missing_models')
 
       const downloadButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelDownload

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

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

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -1,519 +0,0 @@
-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,11 +3,13 @@ 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', { tag: '@vue-nodes' }, () => {
+test.describe('Properties panel - Node settings', () => {
   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,6 +19,10 @@ 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,6 +47,7 @@ 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',
@@ -56,6 +57,7 @@ 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/resultGallery.spec.ts

@@ -3,8 +3,10 @@ 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', '@vue-nodes'] }, () => {
+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()
   })
 

browser_tests/tests/rightSidePanelTabs.spec.ts

@@ -5,6 +5,10 @@ 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,8 +4,13 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Save Image and WEBM preview',
-  { tag: ['@screenshot', '@widget', '@vue-nodes'] },
+  { tag: ['@screenshot', '@widget'] },
   () => {
+    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
     }) => {

browser_tests/tests/selectionBoundingBox.spec.ts

@@ -0,0 +1,152 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { measureSelectionBounds } from '@e2e/fixtures/helpers/boundsUtils'
+
+const SUBGRAPH_ID = '2'
+const REGULAR_ID = '3'
+const WORKFLOW = 'selection/subgraph-with-regular-node'
+
+const REF_POS: [number, number] = [100, 100]
+const TARGET_POSITIONS: Record<string, [number, number]> = {
+  'bottom-left': [50, 500],
+  'bottom-right': [600, 500]
+}
+
+type NodeType = 'subgraph' | 'regular'
+type NodeState = 'expanded' | 'collapsed'
+type Position = 'bottom-left' | 'bottom-right'
+
+function getTargetId(type: NodeType): string {
+  return type === 'subgraph' ? SUBGRAPH_ID : REGULAR_ID
+}
+
+function getRefId(type: NodeType): string {
+  return type === 'subgraph' ? REGULAR_ID : SUBGRAPH_ID
+}
+
+async function assertSelectionEncompassesNodes(
+  page: Page,
+  comfyPage: ComfyPage,
+  nodeIds: string[]
+) {
+  await comfyPage.canvas.press('Control+a')
+  await expect
+    .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+    .toBe(2)
+  await comfyPage.nextFrame()
+
+  const result = await measureSelectionBounds(page, nodeIds)
+  expect(result.selectionBounds).not.toBeNull()
+
+  const sel = result.selectionBounds!
+  const selRight = sel.x + sel.w
+  const selBottom = sel.y + sel.h
+
+  for (const nodeId of nodeIds) {
+    const vis = result.nodeVisualBounds[nodeId]
+    expect(vis).toBeDefined()
+
+    expect(sel.x).toBeLessThanOrEqual(vis.x)
+    expect(selRight).toBeGreaterThanOrEqual(vis.x + vis.w)
+    expect(sel.y).toBeLessThanOrEqual(vis.y)
+    expect(selBottom).toBeGreaterThanOrEqual(vis.y + vis.h)
+  }
+}
+
+test.describe(
+  'Selection bounding box (Vue mode)',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    const nodeTypes: NodeType[] = ['subgraph', 'regular']
+    const nodeStates: NodeState[] = ['expanded', 'collapsed']
+    const positions: Position[] = ['bottom-left', 'bottom-right']
+
+    for (const type of nodeTypes) {
+      for (const state of nodeStates) {
+        for (const pos of positions) {
+          test(`${type} node (${state}) at ${pos}: selection bounds encompass node`, async ({
+            comfyPage
+          }) => {
+            const targetId = getTargetId(type)
+            const refId = getRefId(type)
+
+            await comfyPage.nodeOps.repositionNodes({
+              [refId]: REF_POS,
+              [targetId]: TARGET_POSITIONS[pos]
+            })
+            await comfyPage.nextFrame()
+            await comfyPage.vueNodes.waitForNodes()
+            await comfyPage.vueNodes.getNodeLocator(targetId).waitFor()
+            await comfyPage.vueNodes.getNodeLocator(refId).waitFor()
+
+            if (state === 'collapsed') {
+              const nodeRef = await comfyPage.nodeOps.getNodeRefById(targetId)
+              await nodeRef.setCollapsed(true)
+            }
+
+            await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+              refId,
+              targetId
+            ])
+          })
+        }
+      }
+    }
+  }
+)
+
+test.describe(
+  'Selection bounding box (legacy mode)',
+  { tag: ['@canvas', '@node'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW)
+      await comfyPage.nextFrame()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.canvasOps.resetView()
+    })
+
+    const nodeStates: NodeState[] = ['expanded', 'collapsed']
+    const positions: Position[] = ['bottom-left', 'bottom-right']
+
+    for (const state of nodeStates) {
+      for (const pos of positions) {
+        test(`legacy node (${state}) at ${pos}: selection bounds encompass node`, async ({
+          comfyPage
+        }) => {
+          await comfyPage.nodeOps.repositionNodes({
+            [SUBGRAPH_ID]: REF_POS,
+            [REGULAR_ID]: TARGET_POSITIONS[pos]
+          })
+          await comfyPage.nextFrame()
+
+          if (state === 'collapsed') {
+            const nodeRef = await comfyPage.nodeOps.getNodeRefById(REGULAR_ID)
+            await nodeRef.setCollapsed(true)
+          }
+
+          await assertSelectionEncompassesNodes(comfyPage.page, comfyPage, [
+            SUBGRAPH_ID,
+            REGULAR_ID
+          ])
+        })
+      }
+    }
+  }
+)

browser_tests/tests/selectionRectangle.spec.ts

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

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -28,6 +28,10 @@ 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)
@@ -45,7 +49,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
 
     const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
-    await deleteButton.click()
+    await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect
@@ -61,7 +65,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
 
     const infoButton = comfyPage.page.getByTestId('info-button')
     await expect(infoButton).toBeVisible()
-    await infoButton.click()
+    await infoButton.click({ force: true })
     await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
   })
 
@@ -94,7 +98,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
 
     const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
-    await deleteButton.click()
+    await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect
@@ -116,7 +120,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
 
     const bypassButton = comfyPage.page.getByTestId('bypass-button')
     await expect(bypassButton).toBeVisible()
-    await bypassButton.click()
+    await bypassButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect.poll(() => nodeRef.isBypassed()).toBe(true)
@@ -124,7 +128,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       BYPASS_CLASS
     )
 
-    await bypassButton.click()
+    await bypassButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect.poll(() => nodeRef.isBypassed()).toBe(false)
@@ -143,7 +147,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       'convert-to-subgraph-button'
     )
     await expect(convertButton).toBeVisible()
-    await convertButton.click()
+    await convertButton.click({ force: true })
     await comfyPage.nextFrame()
 
     // KSampler should be gone, replaced by a subgraph node
@@ -171,7 +175,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       'convert-to-subgraph-button'
     )
     await expect(convertButton).toBeVisible()
-    await convertButton.click()
+    await convertButton.click({ force: true })
     await comfyPage.nextFrame()
 
     await expect
@@ -196,14 +200,13 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
     await comfyPage.nextFrame()
 
-    await expect(
-      comfyPage.selectionToolbox.getByRole('button', {
-        name: /Frame Nodes/i
-      })
-    ).toBeVisible()
-    await comfyPage.selectionToolbox
+    const frameButton = comfyPage.page.getByRole('button', {
+      name: /Frame Nodes/i
+    })
+    await expect(frameButton).toBeVisible()
+    await comfyPage.page
       .getByRole('button', { name: /Frame Nodes/i })
-      .click()
+      .click({ force: true })
     await comfyPage.nextFrame()
 
     await expect

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -62,7 +62,7 @@ test.describe(
         return
       }
 
-      await moreOptionsBtn.click()
+      await moreOptionsBtn.click({ force: true })
       await comfyPage.nextFrame()
 
       const menuOptionsVisibleAfterClick = await comfyPage.page
@@ -126,7 +126,9 @@ test.describe(
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
       )[0]
       await openMoreOptions(comfyPage)
-      await comfyPage.page.getByText('Rename', { exact: true }).click()
+      await comfyPage.page
+        .getByText('Rename', { exact: true })
+        .click({ force: true })
       const input = comfyPage.page.locator(
         '.group-title-editor.node-title-editor .editable-text input'
       )
@@ -151,7 +153,11 @@ test.describe(
         await comfyPage.nextFrame()
       }
 
-      await comfyPage.canvasOps.mouseClickAt({ x: 0, y: 50 })
+      await comfyPage.page
+        .locator('#graph-canvas')
+        .click({ position: { x: 0, y: 50 }, force: true })
+
+      await comfyPage.nextFrame()
       await expect(
         comfyPage.page.getByText('Rename', { exact: true })
       ).toBeHidden()

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -43,6 +43,7 @@ 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,6 +4,7 @@ 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,6 +5,7 @@ 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('Restores missing nodes errors silently when switching back to workflow', async ({
+  test('Reports missing nodes warning again when switching back to workflow', async ({
     comfyPage
   }) => {
     await comfyPage.settings.setSetting(
@@ -271,17 +271,11 @@ test.describe('Workflows sidebar', () => {
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
 
-    // Switch back to the missing_nodes workflow — overlay should NOT
-    // reappear (silent restore), but errors tab should have content
+    // Switch back to the missing_nodes workflow — overlay should reappear
+    // so users can install missing node packs without a page reload
     await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
 
-    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()
+    await expect(errorOverlay).toBeVisible()
   })
 
   test('Can close saved-workflows from the open workflows section', async ({

browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts

@@ -11,8 +11,14 @@ async function openVueNodeContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
 
 test.describe(
   'Subgraph Duplicate Independent Values',
-  { tag: ['@slow', '@subgraph', '@vue-nodes'] },
+  { tag: ['@slow', '@subgraph'] },
   () => {
+    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,6 +8,10 @@ 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,6 +33,10 @@ 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
     }) => {
@@ -104,6 +108,10 @@ 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,6 +182,10 @@ 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
       }) => {
@@ -195,7 +199,12 @@ test.describe(
 
         const stepsWidget = await ksampler.getWidget(2)
         const widgetPos = await stepsWidget.getPosition()
-        await comfyPage.canvasOps.mouseClickAt(widgetPos, { button: 'right' })
+        await comfyPage.canvas.click({
+          position: widgetPos,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
 
         // Look for the Promote Widget menu entry
         const promoteEntry = comfyPage.page
@@ -226,7 +235,12 @@ test.describe(
         const stepsWidget = await ksampler.getWidget(2)
         const widgetPos = await stepsWidget.getPosition()
 
-        await comfyPage.canvasOps.mouseClickAt(widgetPos, { button: 'right' })
+        await comfyPage.canvas.click({
+          position: widgetPos,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
 
         const promoteEntry = comfyPage.page
           .locator('.litemenu-entry')
@@ -252,7 +266,12 @@ test.describe(
         const stepsWidget2 = await ksampler2.getWidget(2)
         const widgetPos2 = await stepsWidget2.getPosition()
 
-        await comfyPage.canvasOps.mouseClickAt(widgetPos2, { button: 'right' })
+        await comfyPage.canvas.click({
+          position: widgetPos2,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
 
         const unpromoteEntry = comfyPage.page
           .locator('.litemenu-entry')
@@ -473,6 +492,8 @@ 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'
         )
@@ -516,6 +537,8 @@ 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,6 +115,8 @@ 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,6 +42,7 @@ 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,8 +4,15 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe(
   'Zero UUID workflow: subgraph undo rendering',
-  { tag: ['@workflow', '@subgraph', '@vue-nodes'] },
+  { tag: ['@workflow', '@subgraph'] },
   () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      test.setTimeout(30000) // Extend timeout as we need to reload the page an additional time
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.page.reload() // Reload page as we need to enter in Vue mode
+      await comfyPage.page.waitForFunction(() => !!window.app?.graph)
+    })
+
     test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
       comfyPage
     }) => {

browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts

@@ -46,6 +46,10 @@ 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,6 +16,10 @@ 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

@@ -5,6 +5,7 @@ import {
 
 test.describe('Toast Notifications', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setup()
   })
 

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -4,6 +4,7 @@ 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,6 +37,7 @@ 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,9 +112,11 @@ async function getNodeGroupCenteringErrors(
   })
 }
 
-test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
+test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
   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 }) => {

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

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

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

@@ -3,9 +3,11 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Nodes Zoom', { tag: '@vue-nodes' }, () => {
+test.describe('Vue Nodes Zoom', () => {
   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/node/bringToFront.spec.ts

@@ -5,151 +5,146 @@ import {
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-test.describe(
-  'Vue Node Bring to Front',
-  { tag: ['@screenshot', '@vue-nodes'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-      await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
-      await comfyPage.vueNodes.waitForNodes()
-      await fitToViewInstant(comfyPage)
-    })
+test.describe('Vue Node Bring to Front', { tag: '@screenshot' }, () => {
+  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)
+  })
 
-    /**
-     * Helper to get the z-index of a node by its title
-     */
-    async function getNodeZIndex(
-      comfyPage: ComfyPage,
-      title: string
-    ): Promise<number> {
-      const node = comfyPage.vueNodes.getNodeByTitle(title)
-      const style = await node.getAttribute('style')
-      const match = style?.match(/z-index:\s*(\d+)/)
-      return match ? parseInt(match[1], 10) : Number.NaN
-    }
-
-    /**
-     * Helper to get the bounding box center of a node
-     */
-    async function getNodeCenter(
-      comfyPage: ComfyPage,
-      title: string
-    ): Promise<{ x: number; y: number }> {
-      const node = comfyPage.vueNodes.getNodeByTitle(title)
-      const box = await node.boundingBox()
-      if (!box) throw new Error(`Node "${title}" not found`)
-      return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
-    }
-
-    test('should bring overlapped node to front when clicking on it', async ({
-      comfyPage
-    }) => {
-      // Get initial positions
-      const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
-      const ksamplerHeader = await comfyPage.page
-        .getByText('KSampler')
-        .boundingBox()
-      if (!ksamplerHeader) throw new Error('KSampler header not found')
-
-      // Drag KSampler on top of CLIP Text Encode
-      await comfyPage.canvasOps.dragAndDrop(
-        { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
-        clipCenter
-      )
-      await comfyPage.nextFrame()
-
-      // Screenshot showing KSampler on top of CLIP
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'bring-to-front-overlapped-before.png'
-      )
-
-      // KSampler should be on top (higher z-index) after being dragged
-      await expect
-        .poll(async () => {
-          const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
-          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-          return ksamplerZ - clipZ
-        })
-        .toBeGreaterThan(0)
-
-      // Click on CLIP Text Encode (underneath) - need to click on a visible part
-      // Since KSampler is on top, we click on the edge of CLIP that should still be visible
-      const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
-      const clipBox = await clipNode.boundingBox()
-      if (!clipBox) throw new Error('CLIP node not found')
-
-      // Click on a visible edge of CLIP
-      await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
-      await comfyPage.nextFrame()
-
-      // CLIP should now be on top - compare post-action z-indices
-      await expect
-        .poll(async () => {
-          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-          const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
-          return clipZ - ksamplerZ
-        })
-        .toBeGreaterThan(0)
-
-      // Screenshot showing CLIP now on top
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'bring-to-front-overlapped-after.png'
-      )
-    })
-
-    test('should bring overlapped node to front when clicking on its widget', async ({
-      comfyPage
-    }) => {
-      // Get CLIP Text Encode position (it has a text widget)
-      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()
-      if (!vaeHeader) throw new Error('VAE Decode header not found')
-
-      await comfyPage.canvasOps.dragAndDrop(
-        { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
-        { x: clipCenter.x - 50, y: clipCenter.y }
-      )
-      await comfyPage.nextFrame()
-
-      // VAE should be on top after drag
-      await expect
-        .poll(async () => {
-          const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
-          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-          return vaeZ - clipZ
-        })
-        .toBeGreaterThan(0)
-
-      // Screenshot showing VAE on top
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'bring-to-front-widget-overlapped-before.png'
-      )
-
-      // Click on the text widget of CLIP Text Encode
-      const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
-      const clipBox = await clipNode.boundingBox()
-      if (!clipBox) throw new Error('CLIP node not found')
-      await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
-      await comfyPage.nextFrame()
-
-      // CLIP should now be on top - compare post-action z-indices
-      await expect
-        .poll(async () => {
-          const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
-          const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
-          return clipZ - vaeZ
-        })
-        .toBeGreaterThan(0)
-
-      // Screenshot showing CLIP now on top after widget click
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'bring-to-front-widget-overlapped-after.png'
-      )
-    })
+  /**
+   * Helper to get the z-index of a node by its title
+   */
+  async function getNodeZIndex(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<number> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const style = await node.getAttribute('style')
+    const match = style?.match(/z-index:\s*(\d+)/)
+    return match ? parseInt(match[1], 10) : Number.NaN
   }
-)
+
+  /**
+   * Helper to get the bounding box center of a node
+   */
+  async function getNodeCenter(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<{ x: number; y: number }> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const box = await node.boundingBox()
+    if (!box) throw new Error(`Node "${title}" not found`)
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+  }
+
+  test('should bring overlapped node to front when clicking on it', async ({
+    comfyPage
+  }) => {
+    // Get initial positions
+    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+    const ksamplerHeader = await comfyPage.page
+      .getByText('KSampler')
+      .boundingBox()
+    if (!ksamplerHeader) throw new Error('KSampler header not found')
+
+    // Drag KSampler on top of CLIP Text Encode
+    await comfyPage.canvasOps.dragAndDrop(
+      { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
+      clipCenter
+    )
+    await comfyPage.nextFrame()
+
+    // Screenshot showing KSampler on top of CLIP
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-before.png'
+    )
+
+    // KSampler should be on top (higher z-index) after being dragged
+    await expect
+      .poll(async () => {
+        const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
+        const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+        return ksamplerZ - clipZ
+      })
+      .toBeGreaterThan(0)
+
+    // Click on CLIP Text Encode (underneath) - need to click on a visible part
+    // Since KSampler is on top, we click on the edge of CLIP that should still be visible
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+
+    // Click on a visible edge of CLIP
+    await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    await expect
+      .poll(async () => {
+        const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+        const ksamplerZ = await getNodeZIndex(comfyPage, 'KSampler')
+        return clipZ - ksamplerZ
+      })
+      .toBeGreaterThan(0)
+
+    // Screenshot showing CLIP now on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-after.png'
+    )
+  })
+
+  test('should bring overlapped node to front when clicking on its widget', async ({
+    comfyPage
+  }) => {
+    // Get CLIP Text Encode position (it has a text widget)
+    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()
+    if (!vaeHeader) throw new Error('VAE Decode header not found')
+
+    await comfyPage.canvasOps.dragAndDrop(
+      { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
+      { x: clipCenter.x - 50, y: clipCenter.y }
+    )
+    await comfyPage.nextFrame()
+
+    // VAE should be on top after drag
+    await expect
+      .poll(async () => {
+        const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
+        const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+        return vaeZ - clipZ
+      })
+      .toBeGreaterThan(0)
+
+    // Screenshot showing VAE on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-before.png'
+    )
+
+    // Click on the text widget of CLIP Text Encode
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+    await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    await expect
+      .poll(async () => {
+        const clipZ = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+        const vaeZ = await getNodeZIndex(comfyPage, 'VAE Decode')
+        return clipZ - vaeZ
+      })
+      .toBeGreaterThan(0)
+
+    // Screenshot showing CLIP now on top after widget click
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-after.png'
+    )
+  })
+})

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

@@ -60,7 +60,13 @@ async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
   return refs[0]
 }
 
-test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
+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('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,7 +7,11 @@ import {
   getPromotedWidgetCountByName
 } from '@e2e/helpers/promotedWidgets'
 
-test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
+test.describe('Vue Nodes Image Preview', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
     await comfyPage.vueNodes.waitForNodes()

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

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

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

@@ -6,152 +6,146 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe(
-  'Vue Nodes - Delete Key Interaction',
-  { tag: '@vue-nodes' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-      await comfyPage.setup()
-    })
+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('Can select all and delete Vue nodes with Delete key', async ({
-      comfyPage
-    }) => {
-      await comfyPage.vueNodes.waitForNodes()
+  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())
-        .toBeGreaterThan(0)
-      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    // Get initial Vue node count
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(0)
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-      // Select all Vue nodes
-      await comfyPage.keyboard.selectAll()
+    // Select all Vue nodes
+    await comfyPage.keyboard.selectAll()
 
-      // Verify all Vue nodes are selected
-      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
-        initialNodeCount
-      )
+    // Verify all Vue nodes are selected
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(initialNodeCount)
 
-      // Delete with Delete key
-      await comfyPage.vueNodes.deleteSelected()
+    // Delete with Delete key
+    await comfyPage.vueNodes.deleteSelected()
 
-      // Verify all Vue nodes were deleted
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(0)
-    })
+    // Verify all Vue nodes were deleted
+    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 }) => {
+    await comfyPage.vueNodes.waitForNodes()
 
-      // Get initial Vue node count
-      await expect
-        .poll(() => comfyPage.vueNodes.getNodeCount())
-        .toBeGreaterThan(0)
-      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    // Get initial Vue node count
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(0)
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-      // Get first Vue node ID and select it
-      const nodeIds = await comfyPage.vueNodes.getNodeIds()
-      await comfyPage.vueNodes.selectNode(nodeIds[0])
+    // Get first Vue node ID and select it
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    await comfyPage.vueNodes.selectNode(nodeIds[0])
 
-      // Verify selection
-      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
+    // Verify selection
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(1)
 
-      // Delete with Delete key
-      await comfyPage.vueNodes.deleteSelected()
+    // Delete with Delete key
+    await comfyPage.vueNodes.deleteSelected()
 
-      // Verify one Vue node was deleted
-      await expect
-        .poll(() => comfyPage.vueNodes.getNodeCount())
-        .toBe(initialNodeCount - 1)
-    })
+    // Verify one Vue node was deleted
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBe(initialNodeCount - 1)
+  })
 
-    test('Can select and delete Vue node with Backspace key', async ({
-      comfyPage
-    }) => {
-      await comfyPage.vueNodes.waitForNodes()
+  test('Can select and delete Vue node with Backspace key', async ({
+    comfyPage
+  }) => {
+    await comfyPage.vueNodes.waitForNodes()
 
-      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
 
-      // Select first Vue node
-      const nodeIds = await comfyPage.vueNodes.getNodeIds()
-      await comfyPage.vueNodes.selectNode(nodeIds[0])
+    // Select first Vue node
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    await comfyPage.vueNodes.selectNode(nodeIds[0])
 
-      // Delete with Backspace key instead of Delete
-      await comfyPage.vueNodes.deleteSelectedWithBackspace()
+    // Delete with Backspace key instead of Delete
+    await comfyPage.vueNodes.deleteSelectedWithBackspace()
 
-      // Verify Vue node was deleted
-      await expect
-        .poll(() => comfyPage.vueNodes.getNodeCount())
-        .toBe(initialNodeCount - 1)
-    })
+    // Verify Vue node was deleted
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBe(initialNodeCount - 1)
+  })
 
-    test('Delete key does not delete node when typing in Vue node widgets', async ({
-      comfyPage
-    }) => {
-      const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
+  test('Delete key does not delete node when typing in Vue node widgets', async ({
+    comfyPage
+  }) => {
+    const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      // Find a text input widget in a Vue node
-      const textWidget = comfyPage.page
-        .locator('input[type="text"], textarea')
-        .first()
+    // Find a text input widget in a Vue node
+    const textWidget = comfyPage.page
+      .locator('input[type="text"], textarea')
+      .first()
 
-      // Click on text widget to focus it
-      await textWidget.click()
-      await textWidget.fill('test text')
+    // Click on text widget to focus it
+    await textWidget.click()
+    await textWidget.fill('test text')
 
-      // Press Delete while focused on widget - should delete text, not node
-      await textWidget.press('Delete')
+    // Press Delete while focused on widget - should delete text, not node
+    await textWidget.press('Delete')
 
-      // Node count should remain the same
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-        .toBe(initialNodeCount)
-    })
+    // Node count should remain the same
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialNodeCount)
+  })
 
-    test('Delete key does not delete node when nothing is selected', async ({
-      comfyPage
-    }) => {
-      await comfyPage.vueNodes.waitForNodes()
+  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)
+    // Ensure no Vue nodes are selected
+    await comfyPage.vueNodes.clearSelection()
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(0)
 
-      // Press Delete key - should not crash and should handle gracefully
-      await comfyPage.page.keyboard.press('Delete')
+    // Press Delete key - should not crash and should handle gracefully
+    await comfyPage.page.keyboard.press('Delete')
 
-      // Vue node count should remain the same
-      await expect
-        .poll(() => comfyPage.vueNodes.getNodeCount())
-        .toBeGreaterThan(0)
-    })
+    // Vue node count should remain the same
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBeGreaterThan(0)
+  })
 
-    test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
-      comfyPage
-    }) => {
-      await comfyPage.vueNodes.waitForNodes()
-      const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+  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
-      const nodeIds = await comfyPage.vueNodes.getNodeIds()
-      const nodesToSelect = nodeIds.slice(0, 2)
-      await comfyPage.vueNodes.selectNodes(nodesToSelect)
+    // Multi-select first two Vue nodes using Ctrl+click
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    const nodesToSelect = nodeIds.slice(0, 2)
+    await comfyPage.vueNodes.selectNodes(nodesToSelect)
 
-      // Verify expected nodes are selected
-      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
-        nodesToSelect.length
-      )
+    // Verify expected nodes are selected
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(
+      nodesToSelect.length
+    )
 
-      // Delete selected Vue nodes
-      await comfyPage.vueNodes.deleteSelected()
+    // Delete selected Vue nodes
+    await comfyPage.vueNodes.deleteSelected()
 
-      // Verify expected nodes were deleted
-      await expect
-        .poll(() => comfyPage.vueNodes.getNodeCount())
-        .toBe(initialNodeCount - nodesToSelect.length)
-    })
-  }
-)
+    // Verify expected nodes were deleted
+    await expect
+      .poll(() => comfyPage.vueNodes.getNodeCount())
+      .toBe(initialNodeCount - nodesToSelect.length)
+  })
+})

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

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

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

@@ -7,7 +7,12 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Vue Node Selection', { tag: '@vue-nodes' }, () => {
+test.describe('Vue Node Selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
   const modifiers = [
     { key: 'Control', name: 'ctrl' },
     { key: 'Shift', name: 'shift' },

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -6,10 +6,13 @@ import {
 const BYPASS_HOTKEY = 'Control+b'
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
-test.describe('Vue Node Bypass', { tag: '@vue-nodes' }, () => {
+test.describe('Vue Node Bypass', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
     await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+    await comfyPage.vueNodes.waitForNodes()
   })
 
   test(