test: stabilize painter eraser assertion

Take main's painter spec (shared helpers, @widget/@vue-nodes tags, graph.clear
in beforeEach, canvas size/serialization tests) as base. Add unique tests from
this branch: eraser removes content, eraser on empty canvas, multi-stroke
accumulation.

browser_tests/assets/widgets/image_crop_widget.json

@@ -6,7 +6,7 @@
       "id": 1,
       "type": "ImageCropV2",
       "pos": [50, 50],
-      "size": [400, 500],
+      "size": [400, 550],
       "flags": {},
       "order": 0,
       "mode": 0,
@@ -27,14 +27,7 @@
       "properties": {
         "Node name for S&R": "ImageCropV2"
       },
-      "widgets_values": [
-        {
-          "x": 0,
-          "y": 0,
-          "width": 512,
-          "height": 512
-        }
-      ]
+      "widgets_values": [{ "x": 0, "y": 0, "width": 512, "height": 512 }]
     }
   ],
   "links": [],

browser_tests/fixtures/ComfyPage.ts

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

browser_tests/helpers/painter.ts

@@ -35,6 +35,13 @@ export async function hasCanvasContent(canvas: Locator): Promise<boolean> {
 }
 
 export async function triggerSerialization(page: Page): Promise<void> {
+  await page.waitForFunction(() => {
+    const graph = window.graph as TestGraphAccess | undefined
+    const node = graph?._nodes_by_id?.['1']
+    const widget = node?.widgets?.find((w) => w.name === 'mask')
+    return typeof widget?.serializeValue === 'function'
+  })
+
   await page.evaluate(async () => {
     const graph = window.graph as TestGraphAccess | undefined
     if (!graph) {
@@ -50,17 +57,22 @@ export async function triggerSerialization(page: Page): Promise<void> {
       )
     }
 
-    const widget = node.widgets?.find((w) => w.name === 'mask')
-    if (!widget) {
+    const widgetIndex = node.widgets?.findIndex((w) => w.name === 'mask') ?? -1
+    if (widgetIndex === -1) {
       throw new Error('Widget "mask" not found on target node 1.')
     }
 
+    const widget = node.widgets?.[widgetIndex]
+    if (!widget) {
+      throw new Error(`Widget index ${widgetIndex} 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)
+    await widget.serializeValue(node, widgetIndex)
   })
 }

browser_tests/tests/actionbar.spec.ts

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

browser_tests/tests/bottomPanelLogs.spec.ts

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

browser_tests/tests/bottomPanelShortcuts.spec.ts

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

browser_tests/tests/collapsedNodeLinks.spec.ts

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

browser_tests/tests/customIcons.spec.ts

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

browser_tests/tests/defaultKeybindings.spec.ts

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

browser_tests/tests/dialog.spec.ts

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

browser_tests/tests/dialogs/signInDialog.spec.ts

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

browser_tests/tests/errorOverlay.spec.ts

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

browser_tests/tests/extensionAPI.spec.ts

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

browser_tests/tests/focusMode.spec.ts

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

@@ -4,9 +4,8 @@ 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' }, () => {
+test.describe('Image Compare', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
     await comfyPage.vueNodes.waitForNodes()
   })

browser_tests/tests/imageCrop.spec.ts

@@ -0,0 +1,130 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('Image Crop', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/image_crop_widget')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test(
+    'Shows empty state when no input image is connected',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('No input image connected')).toBeVisible()
+      await expect(node.locator('img[alt="Crop preview"]')).toHaveCount(0)
+    }
+  )
+
+  test(
+    'Renders bounding box coordinate inputs',
+    { tag: '@smoke' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('X')).toBeVisible()
+      await expect(node.getByText('Y')).toBeVisible()
+      await expect(node.getByText('Width')).toBeVisible()
+      await expect(node.getByText('Height')).toBeVisible()
+    }
+  )
+
+  test(
+    'Renders ratio selector and lock button',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      await expect(node).toBeVisible()
+
+      await expect(node.getByText('Ratio')).toBeVisible()
+      await expect(node.getByRole('button', { name: /lock/i })).toBeVisible()
+    }
+  )
+
+  test(
+    'Lock button toggles aspect ratio lock',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const lockButton = node.getByRole('button', {
+        name: 'Lock aspect ratio'
+      })
+      await expect(lockButton).toBeVisible()
+
+      await lockButton.click()
+      await expect(
+        node.getByRole('button', { name: 'Unlock aspect ratio' })
+      ).toBeVisible()
+
+      await node.getByRole('button', { name: 'Unlock aspect ratio' }).click()
+      await expect(
+        node.getByRole('button', { name: 'Lock aspect ratio' })
+      ).toBeVisible()
+    }
+  )
+
+  test(
+    'Ratio selector offers expected presets',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+
+      const trigger = node.getByRole('combobox')
+      await trigger.click()
+
+      const expectedRatios = ['1:1', '3:4', '4:3', '16:9', '9:16', 'Custom']
+      for (const label of expectedRatios) {
+        await expect(
+          comfyPage.page.getByRole('option', { name: label, exact: true })
+        ).toBeVisible()
+      }
+    }
+  )
+
+  test(
+    'Programmatically setting widget value updates bounding box inputs',
+    { tag: '@ui' },
+    async ({ comfyPage }) => {
+      const newBounds = { x: 50, y: 100, width: 200, height: 300 }
+
+      await comfyPage.page.evaluate(
+        ({ bounds }) => {
+          const node = window.app!.graph.getNodeById(1)
+          const widget = node?.widgets?.find((w) => w.type === 'imagecrop')
+          if (widget) {
+            widget.value = bounds
+            widget.callback?.(bounds)
+          }
+        },
+        { bounds: newBounds }
+      )
+      await comfyPage.nextFrame()
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const inputs = node.locator('input[inputmode="decimal"]')
+
+      await expect
+        .poll(async () => inputs.nth(0).inputValue(), { timeout: 5000 })
+        .toBe('50')
+
+      await expect
+        .poll(async () => inputs.nth(1).inputValue(), { timeout: 5000 })
+        .toBe('100')
+
+      await expect
+        .poll(async () => inputs.nth(2).inputValue(), { timeout: 5000 })
+        .toBe('200')
+
+      await expect
+        .poll(async () => inputs.nth(3).inputValue(), { timeout: 5000 })
+        .toBe('300')
+    }
+  )
+})

browser_tests/tests/interaction.spec.ts

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

browser_tests/tests/jobHistoryActions.spec.ts

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

browser_tests/tests/linearMode.spec.ts

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

@@ -1,13 +1,10 @@
+import type { 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('Mask Editor', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
     await comfyPage.vueNodes.waitForNodes()
@@ -32,6 +29,69 @@ test.describe('Mask Editor', () => {
     }
   }
 
+  async function openMaskEditorDialog(comfyPage: ComfyPage) {
+    const { imagePreview } = await loadImageOnNode(comfyPage)
+
+    await imagePreview.getByRole('region').hover()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    const dialog = comfyPage.page.locator('.mask-editor-dialog')
+    await expect(dialog).toBeVisible()
+    await expect(
+      dialog.getByRole('heading', { name: 'Mask Editor' })
+    ).toBeVisible()
+
+    const canvasContainer = dialog.locator('#maskEditorCanvasContainer')
+    await expect(canvasContainer).toBeVisible()
+    await expect(canvasContainer.locator('canvas')).toHaveCount(4)
+
+    return dialog
+  }
+
+  async function getMaskCanvasPixelData(page: Page) {
+    return page.evaluate(() => {
+      const canvases = document.querySelectorAll(
+        '#maskEditorCanvasContainer canvas'
+      )
+      // The mask canvas is the 3rd canvas (index 2, z-30)
+      const maskCanvas = canvases[2] as HTMLCanvasElement
+      if (!maskCanvas) return null
+      const ctx = maskCanvas.getContext('2d')
+      if (!ctx) return null
+      const data = ctx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+      let nonTransparentPixels = 0
+      for (let i = 3; i < data.data.length; i += 4) {
+        if (data.data[i] > 0) nonTransparentPixels++
+      }
+      return { nonTransparentPixels, totalPixels: data.data.length / 4 }
+    })
+  }
+
+  async function drawStrokeOnPointerZone(
+    page: Page,
+    dialog: ReturnType<typeof page.locator>
+  ) {
+    const pointerZone = dialog.locator(
+      '.maskEditor-ui-container [class*="w-[calc"]'
+    )
+    await expect(pointerZone).toBeVisible()
+
+    const box = await pointerZone.boundingBox()
+    if (!box) throw new Error('Pointer zone bounding box not found')
+
+    const startX = box.x + box.width * 0.3
+    const startY = box.y + box.height * 0.5
+    const endX = box.x + box.width * 0.7
+    const endY = box.y + box.height * 0.5
+
+    await page.mouse.move(startX, startY)
+    await page.mouse.down()
+    await page.mouse.move(endX, endY, { steps: 10 })
+    await page.mouse.up()
+
+    return { startX, startY, endX, endY, box }
+  }
+
   test(
     'opens mask editor from image preview button',
     { tag: ['@smoke', '@screenshot'] },
@@ -89,4 +149,359 @@ test.describe('Mask Editor', () => {
       )
     }
   )
+
+  test('draws a brush stroke on the mask canvas', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    expect(dataBefore!.nonTransparentPixels).toBe(0)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const dataAfter = await getMaskCanvasPixelData(comfyPage.page)
+          return dataAfter?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+  })
+
+  test('undo reverts a brush stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await expect(undoButton).toBeVisible()
+    await undoButton.click()
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBe(0)
+  })
+
+  test('redo restores an undone stroke', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+
+    const undoButton = dialog.locator('button[title="Undo"]')
+    await undoButton.click()
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBe(0)
+
+    const redoButton = dialog.locator('button[title="Redo"]')
+    await expect(redoButton).toBeVisible()
+    await redoButton.click()
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+  })
+
+  test('clear button removes all mask content', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await clearButton.click()
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBe(0)
+  })
+
+  test('cancel closes the dialog without saving', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await cancelButton.click()
+
+    await expect(dialog).toBeHidden()
+  })
+
+  test('invert button inverts the mask', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const dataBefore = await getMaskCanvasPixelData(comfyPage.page)
+    expect(dataBefore).not.toBeNull()
+    const pixelsBefore = dataBefore!.nonTransparentPixels
+
+    const invertButton = dialog.getByRole('button', { name: 'Invert' })
+    await expect(invertButton).toBeVisible()
+    await invertButton.click()
+
+    await expect
+      .poll(
+        async () => {
+          const dataAfter = await getMaskCanvasPixelData(comfyPage.page)
+          return dataAfter?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(pixelsBefore)
+  })
+
+  test('keyboard shortcut Ctrl+Z triggers undo', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBeGreaterThan(0)
+
+    const modifier = process.platform === 'darwin' ? 'Meta+z' : 'Control+z'
+    await comfyPage.page.keyboard.press(modifier)
+
+    await expect
+      .poll(
+        async () => {
+          const data = await getMaskCanvasPixelData(comfyPage.page)
+          return data?.nonTransparentPixels ?? 0
+        },
+        { timeout: 5000 }
+      )
+      .toBe(0)
+  })
+
+  test(
+    'tool panel shows all five tools',
+    { tag: ['@smoke'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      const toolPanel = dialog.locator('.maskEditor-ui-container')
+      await expect(toolPanel).toBeVisible()
+
+      // The tool panel should contain exactly 5 tool entries
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await expect(toolEntries).toHaveCount(5)
+
+      // First tool (MaskPen) should be selected by default
+      const selectedTool = dialog.locator(
+        '.maskEditor_toolPanelContainerSelected'
+      )
+      await expect(selectedTool).toHaveCount(1)
+    }
+  )
+
+  test('switching tools updates the selected indicator', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+    await expect(toolEntries).toHaveCount(5)
+
+    // Click the third tool (Eraser, index 2)
+    await toolEntries.nth(2).click()
+
+    // The third tool should now be selected
+    const selectedTool = dialog.locator(
+      '.maskEditor_toolPanelContainerSelected'
+    )
+    await expect(selectedTool).toHaveCount(1)
+
+    // Verify it's the eraser (3rd entry)
+    await expect(toolEntries.nth(2)).toHaveClass(/Selected/)
+  })
+
+  test('brush settings panel is visible with thickness controls', async ({
+    comfyPage
+  }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // The side panel should show brush settings by default
+    const thicknessLabel = dialog.getByText('Thickness')
+    await expect(thicknessLabel).toBeVisible()
+
+    const opacityLabel = dialog.getByText('Opacity').first()
+    await expect(opacityLabel).toBeVisible()
+
+    const hardnessLabel = dialog.getByText('Hardness')
+    await expect(hardnessLabel).toBeVisible()
+  })
+
+  test('save uploads all layers and closes dialog', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    let maskUploadCount = 0
+    let imageUploadCount = 0
+
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-mask-${maskUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+    await comfyPage.page.route('**/upload/image', (route) => {
+      imageUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-image-${imageUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await expect(saveButton).toBeVisible()
+    await saveButton.click()
+
+    await expect(dialog).toBeHidden()
+
+    // The save pipeline uploads multiple layers (mask + image variants)
+    expect(
+      maskUploadCount + imageUploadCount,
+      'save should trigger upload calls'
+    ).toBeGreaterThan(0)
+  })
+
+  test('save failure keeps dialog open', async ({ comfyPage }) => {
+    const dialog = await openMaskEditorDialog(comfyPage)
+
+    // Fail all upload routes
+    await comfyPage.page.route('**/upload/mask', (route) =>
+      route.fulfill({ status: 500 })
+    )
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill({ status: 500 })
+    )
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.click()
+
+    // Dialog should remain open when save fails
+    await expect(dialog).toBeVisible()
+  })
+
+  test(
+    'eraser tool removes mask content',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage }) => {
+      const dialog = await openMaskEditorDialog(comfyPage)
+
+      // Draw a stroke with the mask pen (default tool)
+      await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+      await expect
+        .poll(
+          async () => {
+            const data = await getMaskCanvasPixelData(comfyPage.page)
+            return data?.nonTransparentPixels ?? 0
+          },
+          { timeout: 5000 }
+        )
+        .toBeGreaterThan(0)
+
+      const pixelsAfterDraw = await getMaskCanvasPixelData(comfyPage.page)
+
+      // Switch to eraser tool (3rd tool, index 2)
+      const toolEntries = dialog.locator('.maskEditor_toolPanelContainer')
+      await toolEntries.nth(2).click()
+
+      // Draw over the same area with the eraser
+      await drawStrokeOnPointerZone(comfyPage.page, dialog)
+
+      await expect
+        .poll(
+          async () => {
+            const data = await getMaskCanvasPixelData(comfyPage.page)
+            return data?.nonTransparentPixels ?? 0
+          },
+          { timeout: 5000 }
+        )
+        .toBeLessThan(pixelsAfterDraw!.nonTransparentPixels)
+    }
+  )
 })

browser_tests/tests/menu.spec.ts

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

browser_tests/tests/minimap.spec.ts

@@ -1,5 +1,5 @@
+import type { Locator } from '@playwright/test'
 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'
@@ -16,26 +16,8 @@ function hasCanvasContent(canvas: Locator): Promise<boolean> {
   })
 }
 
-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')
@@ -43,20 +25,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')
@@ -76,16 +52,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
     )
@@ -93,28 +65,34 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     await expect(minimapContainer).toBeVisible()
 
     await toggleButton.click()
+    await comfyPage.nextFrame()
+
     await expect(minimapContainer).toBeHidden()
 
     await toggleButton.click()
+    await comfyPage.nextFrame()
+
     await expect(minimapContainer).toBeVisible()
   })
 
   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()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
+    await comfyPage.nextFrame()
+
     await expect(minimapContainer).toBeHidden()
 
     await comfyPage.page.keyboard.press('Alt+KeyM')
+    await comfyPage.nextFrame()
+
     await expect(minimapContainer).toBeVisible()
   })
 
   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()
@@ -130,9 +108,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')
@@ -144,20 +120,148 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
         canvas.ds.offset[1] = -600
         canvas.setDirty(true, true)
       })
-      await comfyPage.nextFrame()
       await expect(minimap).toHaveScreenshot('minimap-after-pan.png')
     }
   )
 
-  test('Minimap canvas is non-empty for a workflow with nodes', async ({
+  test(
+    'Viewport rectangle is visible and positioned within minimap',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      const viewport = minimap.locator('.minimap-viewport')
+      await expect(viewport).toBeVisible()
+
+      const minimapBox = await minimap.boundingBox()
+      const viewportBox = await viewport.boundingBox()
+
+      expect(minimapBox).toBeTruthy()
+      expect(viewportBox).toBeTruthy()
+      expect(viewportBox!.width).toBeGreaterThan(0)
+      expect(viewportBox!.height).toBeGreaterThan(0)
+
+      expect(viewportBox!.x + viewportBox!.width).toBeGreaterThan(minimapBox!.x)
+      expect(viewportBox!.y + viewportBox!.height).toBeGreaterThan(
+        minimapBox!.y
+      )
+      expect(viewportBox!.x).toBeLessThan(minimapBox!.x + minimapBox!.width)
+      expect(viewportBox!.y).toBeLessThan(minimapBox!.y + minimapBox!.height)
+
+      await expect(minimap).toHaveScreenshot('minimap-with-viewport.png')
+    }
+  )
+
+  test('Clicking on minimap pans the canvas to that position', async ({
     comfyPage
   }) => {
-    const minimapCanvas = comfyPage.page.getByTestId(
-      TestIds.canvas.minimapCanvas
-    )
-    await expect(minimapCanvas).toBeVisible()
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    await expect(minimap).toBeVisible()
 
-    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(true)
+    const offsetBefore = await comfyPage.page.evaluate(() => {
+      const ds = window.app!.canvas.ds
+      return [ds.offset[0], ds.offset[1]]
+    })
+
+    const minimapBox = await minimap.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    // Click the top-left quadrant — canvas should pan so that region
+    // becomes centered, meaning offset increases (moves right/down)
+    await comfyPage.page.mouse.click(
+      minimapBox!.x + minimapBox!.width * 0.2,
+      minimapBox!.y + minimapBox!.height * 0.2
+    )
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(async () => {
+        const ds = await comfyPage.page.evaluate(() => {
+          const d = window.app!.canvas.ds
+          return [d.offset[0], d.offset[1]]
+        })
+        return ds
+      })
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Dragging on minimap continuously pans the canvas', async ({
+    comfyPage
+  }) => {
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    await expect(minimap).toBeVisible()
+
+    const minimapBox = await minimap.boundingBox()
+    expect(minimapBox).toBeTruthy()
+
+    const startX = minimapBox!.x + minimapBox!.width * 0.3
+    const startY = minimapBox!.y + minimapBox!.height * 0.3
+    const endX = minimapBox!.x + minimapBox!.width * 0.7
+    const endY = minimapBox!.y + minimapBox!.height * 0.7
+
+    const offsetBefore = await comfyPage.page.evaluate(() => {
+      const ds = window.app!.canvas.ds
+      return [ds.offset[0], ds.offset[1]]
+    })
+
+    // Drag from top-left toward bottom-right on the minimap
+    await comfyPage.page.mouse.move(startX, startY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(endX, endY, { steps: 10 })
+
+    // Mid-drag: offset should already differ from initial state
+    const offsetMidDrag = await comfyPage.page.evaluate(() => {
+      const ds = window.app!.canvas.ds
+      return [ds.offset[0], ds.offset[1]]
+    })
+    expect(
+      offsetMidDrag[0] !== offsetBefore[0] ||
+        offsetMidDrag[1] !== offsetBefore[1]
+    ).toBe(true)
+
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    // Final offset should also differ (drag was not discarded on mouseup)
+    await expect
+      .poll(async () => {
+        const ds = await comfyPage.page.evaluate(() => {
+          const d = window.app!.canvas.ds
+          return [d.offset[0], d.offset[1]]
+        })
+        return ds
+      })
+      .not.toEqual(offsetBefore)
+  })
+
+  test('Minimap viewport updates when canvas is zoomed', async ({
+    comfyPage
+  }) => {
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    await expect(minimap).toBeVisible()
+
+    const viewport = minimap.locator('.minimap-viewport')
+    await expect(viewport).toBeVisible()
+
+    const viewportBefore = await viewport.boundingBox()
+    expect(viewportBefore).toBeTruthy()
+
+    // Zoom in significantly
+    await comfyPage.page.evaluate(() => {
+      const canvas = window.app!.canvas
+      canvas.ds.scale = 3
+      canvas.setDirty(true, true)
+    })
+    await comfyPage.nextFrame()
+
+    // Viewport rectangle should shrink when zoomed in
+    await expect
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        return box?.width ?? 0
+      })
+      .toBeLessThan(viewportBefore!.width)
   })
 
   test('Minimap canvas is empty after all nodes are deleted', async ({
@@ -168,132 +272,71 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
     )
     await expect(minimapCanvas).toBeVisible()
 
-    await comfyPage.keyboard.selectAll()
-    await comfyPage.vueNodes.deleteSelected()
+    // Minimap should have content before deletion
+    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(true)
+
+    // Remove all nodes
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.canvas.press('Delete')
+    await comfyPage.nextFrame()
+
     await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
 
-    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(false)
+    // Minimap canvas should be empty — no nodes means nothing to render
+    await expect
+      .poll(() => hasCanvasContent(minimapCanvas), { timeout: 5000 })
+      .toBe(false)
   })
 
-  test('Clicking minimap corner pans the main canvas', async ({
+  test('Minimap re-renders after loading a different workflow', 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
+    const minimapCanvas = comfyPage.page.getByTestId(
+      TestIds.canvas.minimapCanvas
     )
-    await expect(minimap).toBeVisible()
+    await expect(minimapCanvas).toBeVisible()
 
-    const before = await comfyPage.page.evaluate(() => ({
-      x: window.app!.canvas.ds.offset[0],
-      y: window.app!.canvas.ds.offset[1]
-    }))
+    // Default workflow has content
+    await expect.poll(() => hasCanvasContent(minimapCanvas)).toBe(true)
 
-    const transformBefore = await viewport.evaluate(
-      (el: HTMLElement) => el.style.transform
-    )
-
-    await clickMinimapAt(overlay, comfyPage.page, 0.15, 0.85)
+    // Load a very different workflow
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+    await comfyPage.nextFrame()
 
+    // Minimap should still have content (different workflow, still has nodes)
     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)
+      .poll(() => hasCanvasContent(minimapCanvas), { timeout: 5000 })
+      .toBe(true)
   })
 
-  test('Clicking minimap center after FitView causes minimal canvas movement', async ({
+  test('Minimap viewport position reflects canvas pan state', 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)
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
     await expect(minimap).toBeVisible()
 
+    const viewport = minimap.locator('.minimap-viewport')
+    await expect(viewport).toBeVisible()
+
+    const positionBefore = await viewport.boundingBox()
+    expect(positionBefore).toBeTruthy()
+
+    // Pan the canvas by a large amount to the right and down
     await comfyPage.page.evaluate(() => {
       const canvas = window.app!.canvas
-      canvas.ds.offset[0] -= 1000
+      canvas.ds.offset[0] -= 500
+      canvas.ds.offset[1] -= 500
       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 })
-    })
-
+    // The viewport indicator should have moved within the minimap
     await expect
-      .poll(() => viewport.evaluate((el: HTMLElement) => el.style.transform), {
-        timeout: 2000
+      .poll(async () => {
+        const box = await viewport.boundingBox()
+        if (!box || !positionBefore) return false
+        return box.x !== positionBefore.x || box.y !== positionBefore.y
       })
-      .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)
+      .toBe(true)
   })
-
-  test(
-    'Viewport rectangle is visible and positioned within minimap',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      const minimap = comfyPage.page.getByTestId(
-        TestIds.canvas.minimapContainer
-      )
-      await expect(minimap).toBeVisible()
-
-      const viewport = minimap.getByTestId(TestIds.canvas.minimapViewport)
-      await expect(viewport).toBeVisible()
-
-      await expect(async () => {
-        const vb = await viewport.boundingBox()
-        const mb = await minimap.boundingBox()
-        expect(vb).toBeTruthy()
-        expect(mb).toBeTruthy()
-        expect(vb!.width).toBeGreaterThan(0)
-        expect(vb!.height).toBeGreaterThan(0)
-        expect(vb!.x).toBeGreaterThanOrEqual(mb!.x)
-        expect(vb!.y).toBeGreaterThanOrEqual(mb!.y)
-        expect(vb!.x + vb!.width).toBeLessThanOrEqual(mb!.x + mb!.width)
-        expect(vb!.y + vb!.height).toBeLessThanOrEqual(mb!.y + mb!.height)
-      }).toPass({ timeout: 5000 })
-
-      await expect(minimap).toHaveScreenshot('minimap-with-viewport.png')
-    }
-  )
 })

browser_tests/tests/nodeHelp.spec.ts

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

browser_tests/tests/nodeLibraryEssentials.spec.ts

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

browser_tests/tests/outputHistory.spec.ts

@@ -43,7 +43,6 @@ function imageOutput(...filenames: string[]) {
 
 test.describe('Output History', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.appMode.enterAppModeWithInputs([[KSAMPLER_NODE, 'seed']])
     await expect(comfyPage.appMode.linearWidgets).toBeVisible()
     await comfyPage.nextFrame()

browser_tests/tests/painter.spec.ts

@@ -9,10 +9,9 @@ import {
   triggerSerialization
 } from '@e2e/helpers/painter'
 
-test.describe('Painter', { tag: '@widget' }, () => {
+test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   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()
   })
@@ -372,4 +371,64 @@ test.describe('Painter', { tag: '@widget' }, () => {
       await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
     })
   })
+
+  test.describe('Eraser', () => {
+    test('Eraser removes previously drawn content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      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('Eraser on empty canvas adds no content', async ({ comfyPage }) => {
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const painterWidget = node.locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+      await expect(canvas).toBeVisible()
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+      await drawStroke(comfyPage.page, canvas)
+      await comfyPage.nextFrame()
+
+      await expect.poll(() => hasCanvasContent(canvas)).toBe(false)
+    })
+  })
+
+  test('Multiple strokes accumulate on the canvas', async ({ comfyPage }) => {
+    const canvas = comfyPage.vueNodes
+      .getNodeLocator('1')
+      .locator('.widget-expands canvas')
+    await expect(canvas).toBeVisible()
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.3 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.7 })
+    await comfyPage.nextFrame()
+    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+  })
 })

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

browser_tests/tests/propertiesPanel/errorsTab.spec.ts

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

browser_tests/tests/propertiesPanel/errorsTabExecution.spec.ts

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

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -38,7 +38,6 @@ function getDropzone(comfyPage: ComfyPage) {
 
 test.describe('Errors tab - Missing media', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
       true

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -13,7 +13,6 @@ import {
 
 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

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -6,7 +6,6 @@ import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsT
 
 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

browser_tests/tests/propertiesPanel/nodeSettings.spec.ts

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

browser_tests/tests/releaseNotifications.spec.ts

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

browser_tests/tests/remoteWidgets.spec.ts

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

browser_tests/tests/resultGallery.spec.ts

@@ -3,10 +3,8 @@ import { expect } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
-test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
+test.describe('MediaLightbox', { tag: ['@slow', '@vue-nodes'] }, () => {
   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,10 +5,6 @@ import {
 import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  })
-
   test('Properties panel opens with workflow overview', async ({
     comfyPage
   }) => {

browser_tests/tests/saveImageAndWebp.spec.ts

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

browser_tests/tests/selectionRectangle.spec.ts

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

browser_tests/tests/selectionToolboxActions.spec.ts

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

browser_tests/tests/sidebar/nodeLibrary.spec.ts

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

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

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

browser_tests/tests/sidebar/sidebarSplitterWidth.spec.ts

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

browser_tests/tests/sidebar/workflows.spec.ts

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

browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts

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

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

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

browser_tests/tests/subgraph/subgraphNavigation.spec.ts

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

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

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

browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts

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

browser_tests/tests/subgraph/subgraphSearch.spec.ts

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

browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts

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

browser_tests/tests/subgraphPromotedWidgetPanel.spec.ts

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

browser_tests/tests/templates.spec.ts

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

browser_tests/tests/toastNotifications.spec.ts

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

browser_tests/tests/versionMismatchWarnings.spec.ts

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

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

@@ -112,11 +112,9 @@ async function getNodeGroupCenteringErrors(
   })
 }
 
-test.describe('Vue Node Groups', { tag: '@screenshot' }, () => {
+test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('Comfy.Minimap.ShowGroups', true)
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow creating groups with hotkey', async ({ comfyPage }) => {

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

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

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

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

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

@@ -5,146 +5,151 @@ import {
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/helpers/fitToView'
 
-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)
-  })
+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)
+    })
 
-  /**
-   * 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 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 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,13 +60,7 @@ async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
   return refs[0]
 }
 
-test.describe('Vue Node Context Menu', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
   test.describe('Single Node Actions', () => {
     test('should rename node via context menu', async ({ comfyPage }) => {
       await openContextMenu(comfyPage, 'KSampler')

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

@@ -7,11 +7,7 @@ import {
   getPromotedWidgetCountByName
 } from '@e2e/helpers/promotedWidgets'
 
-test.describe('Vue Nodes Image Preview', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
     await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
     await comfyPage.vueNodes.waitForNodes()

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

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

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

@@ -6,146 +6,152 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Vue Nodes - Delete Key Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Enable Vue nodes rendering
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.setup()
-  })
+test.describe(
+  'Vue Nodes - Delete Key Interaction',
+  { tag: '@vue-nodes' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      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,14 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Vue Nodes Renaming', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Nodes Renaming', { tag: '@vue-nodes' }, () => {
   test('should display node title', async ({ comfyPage }) => {
     const vueNode = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
     await expect(vueNode.header).toContainText('KSampler')

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

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

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

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

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

@@ -6,13 +6,10 @@ import {
 const BYPASS_HOTKEY = 'Control+b'
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
-test.describe('Vue Node Bypass', () => {
+test.describe('Vue Node Bypass', { tag: '@vue-nodes' }, () => {
   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(

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

@@ -3,13 +3,9 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Node Collapse', () => {
+test.describe('Vue Node Collapse', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.settings.setSetting('Comfy.EnableTooltips', true)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.vueNodes.waitForNodes()
   })
 
   test('should allow collapsing node with collapse icon', async ({

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

@@ -4,55 +4,58 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test('displays color picker button and allows color selection', async ({
-    comfyPage
-  }) => {
-    const loadCheckpointNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'Load Checkpoint'
+test.describe(
+  'Vue Node Custom Colors',
+  { tag: ['@screenshot', '@vue-nodes'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
     })
-    await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerButton = comfyPage.page.getByTestId(
-      TestIds.selectionToolbox.colorPickerButton
-    )
-    await colorPickerButton.click()
+    test('displays color picker button and allows color selection', async ({
+      comfyPage
+    }) => {
+      const loadCheckpointNode = comfyPage.page
+        .locator('[data-node-id]')
+        .filter({
+          hasText: 'Load Checkpoint'
+        })
+      await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
-      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+      const colorPickerButton = comfyPage.page.getByTestId(
+        TestIds.selectionToolbox.colorPickerButton
+      )
+      await colorPickerButton.click()
+
+      const colorPickerGroup = comfyPage.page.getByRole('group').filter({
+        has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
+      })
+      await colorPickerGroup
+        .getByTestId(TestIds.selectionToolbox.colorBlue)
+        .click()
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-color-blue.png'
+      )
     })
-    await colorPickerGroup
-      .getByTestId(TestIds.selectionToolbox.colorBlue)
-      .click()
 
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-color-blue.png'
-    )
-  })
+    test('should load node colors from workflow', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
+      await comfyPage.vueNodes.waitForNodes()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-colors-dark-all-colors.png'
+      )
+    })
 
-  test('should load node colors from workflow', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
-    await comfyPage.vueNodes.waitForNodes()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-colors-dark-all-colors.png'
-    )
-  })
-
-  test('should show brightened node colors on light theme', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
-    await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
-    await comfyPage.vueNodes.waitForNodes()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-node-custom-colors-light-all-colors.png'
-    )
-  })
-})
+    test('should show brightened node colors on light theme', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.workflow.loadWorkflow('nodes/every_node_color')
+      await comfyPage.vueNodes.waitForNodes()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-custom-colors-light-all-colors.png'
+      )
+    })
+  }
+)

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

@@ -5,12 +5,7 @@ import {
 
 const ERROR_CLASS = /ring-destructive-background/
 
-test.describe('Vue Node Error', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
   test('should display error state when node is missing (node from workflow is not installed)', async ({
     comfyPage
   }) => {

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

@@ -6,12 +6,7 @@ import {
 const MUTE_HOTKEY = 'Control+m'
 const MUTE_OPACITY = '0.5'
 
-test.describe('Vue Node Mute', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Mute', { tag: '@vue-nodes' }, () => {
   test(
     'should allow toggling mute on a selected node with hotkey',
     { tag: '@screenshot' },

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

@@ -6,12 +6,7 @@ import {
 const PIN_HOTKEY = 'p'
 const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
 
-test.describe('Vue Node Pin', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
   test('should allow toggling pin on a selected node with hotkey', async ({
     comfyPage
   }) => {

browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts

@@ -3,9 +3,8 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Reroute Node Size', () => {
+test.describe('Vue Reroute Node Size', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
     await comfyPage.workflow.loadWorkflow('links/single_connected_reroute_node')
     await comfyPage.vueNodes.waitForNodes()

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

@@ -3,9 +3,8 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Advanced Widget Visibility', () => {
+test.describe('Advanced Widget Visibility', { tag: '@vue-nodes' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.settings.setSetting(
       'Comfy.Node.AlwaysShowAdvancedWidgets',
       false

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

@@ -1,7 +1,3 @@
-import type { Locator } from '@playwright/test'
-
-import { MIN_CROP_SIZE } from '@/composables/useImageCrop'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
@@ -10,116 +6,7 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 type CropValue = { x: number; y: number; width: number; height: number } | null
 
-const POINTER_OPTS = { bubbles: true, cancelable: true, pointerId: 1 } as const
-
-async function getCropValue(
-  comfyPage: ComfyPage,
-  nodeId: number
-): Promise<CropValue> {
-  return comfyPage.page.evaluate((id) => {
-    const n = window.app!.graph.getNodeById(id)
-    const w = n?.widgets?.find((x) => x.type === 'imagecrop')
-    const v = w?.value
-    if (v && typeof v === 'object' && 'x' in v) {
-      const crop = v as {
-        x: number
-        y: number
-        width: number
-        height: number
-      }
-      return {
-        x: crop.x,
-        y: crop.y,
-        width: crop.width,
-        height: crop.height
-      }
-    }
-    return null
-  }, nodeId)
-}
-
-async function setCropBounds(
-  comfyPage: ComfyPage,
-  nodeId: number,
-  bounds: { x: number; y: number; width: number; height: number }
-) {
-  await comfyPage.page.evaluate(
-    ({ id, b }) => {
-      const n = window.app!.graph.getNodeById(id)
-      const w = n?.widgets?.find((x) => x.type === 'imagecrop')
-      if (w) {
-        w.value = { ...b }
-        w.callback?.(b)
-      }
-    },
-    { id: nodeId, b: bounds }
-  )
-  await comfyPage.nextFrame()
-  await comfyPage.nextFrame()
-}
-
-async function waitForImageNaturalSize(
-  img: Locator,
-  options?: { timeout?: number }
-) {
-  await expect
-    .poll(
-      () =>
-        img.evaluate(
-          (el: HTMLImageElement) => el.naturalWidth > 0 && el.naturalHeight > 0
-        ),
-      {
-        message: 'image naturalWidth and naturalHeight should be ready',
-        ...(options?.timeout != null ? { timeout: options.timeout } : {})
-      }
-    )
-    .toBe(true)
-}
-
-async function dragOnLocator(
-  comfyPage: ComfyPage,
-  target: Locator,
-  deltaClientX: number,
-  deltaClientY: number
-) {
-  await expect
-    .poll(
-      async () => {
-        const b = await target.boundingBox()
-        return b !== null && b.width > 0 && b.height > 0
-      },
-      { message: 'drag target should have a laid-out bounding box' }
-    )
-    .toBe(true)
-  const box = await target.boundingBox()
-  if (!box) throw new Error('drag target has no bounding box')
-  const x0 = box.x + box.width / 2
-  const y0 = box.y + box.height / 2
-  await target.dispatchEvent('pointerdown', {
-    ...POINTER_OPTS,
-    clientX: x0,
-    clientY: y0
-  })
-  await comfyPage.nextFrame()
-  await target.dispatchEvent('pointermove', {
-    ...POINTER_OPTS,
-    clientX: x0 + deltaClientX,
-    clientY: y0 + deltaClientY
-  })
-  await comfyPage.nextFrame()
-  await target.dispatchEvent('pointerup', {
-    ...POINTER_OPTS,
-    clientX: x0 + deltaClientX,
-    clientY: y0 + deltaClientY
-  })
-  await comfyPage.nextFrame()
-}
-
-test.describe('Image Crop', { tag: '@widget' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-  })
-
+test.describe('Image Crop', { tag: ['@widget', '@vue-nodes'] }, () => {
   test.describe('without source image', () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('widgets/image_crop_widget')
@@ -131,21 +18,12 @@ test.describe('Image Crop', { tag: '@widget' }, () => {
       { tag: '@smoke' },
       async ({ comfyPage }) => {
         const node = comfyPage.vueNodes.getNodeLocator('1')
-        await expect(node, 'image crop node should render').toBeVisible()
+        await expect(node).toBeVisible()
 
-        await expect
-          .soft(node.getByTestId('crop-empty-icon'), 'empty state icon')
-          .toBeVisible()
-        await expect
-          .soft(node, 'empty state copy')
-          .toContainText('No input image connected')
-        await expect
-          .soft(node.getByTestId('crop-overlay'), 'no overlay without image')
-          .toHaveCount(0)
-        await expect.soft(node.locator('img'), 'no preview img').toHaveCount(0)
-        await expect
-          .soft(node.getByTestId('crop-resize-right'), 'no resize handles')
-          .toBeHidden()
+        await expect.soft(node.getByTestId('crop-empty-icon')).toBeVisible()
+        await expect.soft(node).toContainText('No input image connected')
+        await expect.soft(node.getByTestId('crop-overlay')).toHaveCount(0)
+        await expect.soft(node.locator('img')).toHaveCount(0)
       }
     )
 
@@ -154,63 +32,50 @@ test.describe('Image Crop', { tag: '@widget' }, () => {
       { tag: '@smoke' },
       async ({ comfyPage }) => {
         const node = comfyPage.vueNodes.getNodeLocator('1')
-        await expect(node, 'image crop node should render').toBeVisible()
+        await expect(node).toBeVisible()
 
-        await expect(node.getByText('Ratio'), 'ratio label').toBeVisible()
+        await expect(node.getByText('Ratio')).toBeVisible()
         await expect(
-          node.locator('button:has(.icon-\\[lucide--lock-open\\])'),
-          'ratio unlock button'
+          node.locator('button:has(.icon-\\[lucide--lock-open\\])')
         ).toBeVisible()
-        await expect(
-          node.locator('input'),
-          'bounding box numeric inputs'
-        ).toHaveCount(4)
+        await expect(node.locator('input')).toHaveCount(4)
       }
     )
-
-    test(
-      'Empty state matches screenshot baseline',
-      { tag: '@screenshot' },
-      async ({ comfyPage }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('1')
-        await expect(node, 'image crop node should render').toBeVisible()
-        await comfyPage.nextFrame()
-        await comfyPage.nextFrame()
-        await expect(node).toHaveScreenshot('image-crop-empty-state.png', {
-          maxDiffPixelRatio: 0.05
-        })
-      }
-    )
-
-    test('Pointer drag on empty state does not change crop widget value', async ({
-      comfyPage
-    }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const before = await getCropValue(comfyPage, 1)
-      expect(before, 'Fixture should define imagecrop bounds').not.toBeNull()
-
-      const empty = node.getByTestId('crop-empty-state')
-      await dragOnLocator(comfyPage, empty, 40, 30)
-
-      await expect
-        .poll(() => getCropValue(comfyPage, 1), {
-          message: 'empty-state drag should not mutate crop value'
-        })
-        .toStrictEqual(before)
-    })
   })
 
   test.describe(
     'with source image after execution',
     { tag: ['@widget', '@slow'] },
     () => {
+      async function getCropValue(comfyPage: ComfyPage): Promise<CropValue> {
+        return comfyPage.page.evaluate(() => {
+          const n = window.app!.graph.getNodeById(2)
+          const w = n?.widgets?.find((w) => w.type === 'imagecrop')
+          const v = w?.value
+          if (v && typeof v === 'object' && 'x' in v) {
+            const crop = v as {
+              x: number
+              y: number
+              width: number
+              height: number
+            }
+            return {
+              x: crop.x,
+              y: crop.y,
+              width: crop.width,
+              height: crop.height
+            }
+          }
+          return null
+        })
+      }
+
       test.beforeEach(async ({ comfyPage }) => {
         await comfyPage.workflow.loadWorkflow('widgets/image_crop_with_source')
         await comfyPage.vueNodes.waitForNodes()
         await comfyPage.runButton.click()
         await expect(
-          comfyPage.vueNodes.getNodeLocator('2').locator('img'),
-          'source image preview should appear after run'
+          comfyPage.vueNodes.getNodeLocator('2').locator('img')
         ).toBeVisible({ timeout: 30_000 })
       })
 
@@ -221,19 +86,11 @@ test.describe('Image Crop', { tag: '@widget' }, () => {
           const node = comfyPage.vueNodes.getNodeLocator('2')
           const img = node.locator('img')
 
-          await waitForImageNaturalSize(img)
-
-          await expect(
-            node.getByTestId('crop-overlay'),
-            'crop overlay should show when image is ready'
-          ).toBeVisible()
-          await expect(
-            node
-              .locator('[data-testid^="crop-resize-"]')
-              .filter({ visible: true }),
-            'unlocked ratio should expose eight handles'
-          ).toHaveCount(8)
+          await expect
+            .poll(() => img.evaluate((el: HTMLImageElement) => el.naturalWidth))
+            .toBeGreaterThan(0)
 
+          await expect(node.getByTestId('crop-overlay')).toBeVisible()
           await comfyPage.nextFrame()
           await comfyPage.nextFrame()
           await expect(node).toHaveScreenshot('image-crop-with-source.png', {
@@ -248,623 +105,54 @@ test.describe('Image Crop', { tag: '@widget' }, () => {
         async ({ comfyPage }) => {
           const node = comfyPage.vueNodes.getNodeLocator('2')
           const cropBox = node.getByTestId('crop-overlay')
-          await expect
-            .poll(
-              async () => {
-                const b = await cropBox.boundingBox()
-                return b !== null && b.width > 0 && b.height > 0 ? b : null
-              },
-              { message: 'crop overlay should have a stable bounding box' }
-            )
-            .not.toBeNull()
           const box = await cropBox.boundingBox()
           if (!box) throw new Error('Crop box not found')
 
-          const valueBefore = await getCropValue(comfyPage, 2)
+          const valueBefore = await getCropValue(comfyPage)
           if (!valueBefore)
             throw new Error('Widget value missing — check fixture setup')
 
           const startX = box.x + box.width / 2
           const startY = box.y + box.height / 2
 
+          const pointerOpts = { bubbles: true, cancelable: true, pointerId: 1 }
           await cropBox.dispatchEvent('pointerdown', {
-            ...POINTER_OPTS,
+            ...pointerOpts,
             clientX: startX,
             clientY: startY
           })
           await comfyPage.nextFrame()
           await cropBox.dispatchEvent('pointermove', {
-            ...POINTER_OPTS,
+            ...pointerOpts,
             clientX: startX + 15,
             clientY: startY + 10
           })
           await comfyPage.nextFrame()
           await cropBox.dispatchEvent('pointermove', {
-            ...POINTER_OPTS,
+            ...pointerOpts,
             clientX: startX + 30,
             clientY: startY + 20
           })
           await cropBox.dispatchEvent('pointerup', {
-            ...POINTER_OPTS,
+            ...pointerOpts,
             clientX: startX + 30,
             clientY: startY + 20
           })
           await comfyPage.nextFrame()
 
-          await expect
-            .poll(
-              async () => {
-                const v = await getCropValue(comfyPage, 2)
-                if (
-                  !v ||
-                  v.x <= valueBefore.x ||
-                  v.y <= valueBefore.y ||
-                  v.width !== valueBefore.width ||
-                  v.height !== valueBefore.height
-                ) {
-                  return null
-                }
-                return v
-              },
-              {
-                timeout: 5000,
-                message: 'crop drag should increase x/y without changing size'
-              }
-            )
-            .not.toBeNull()
+          await expect(async () => {
+            const valueAfter = await getCropValue(comfyPage)
+            expect(valueAfter?.x).toBeGreaterThan(valueBefore.x)
+            expect(valueAfter?.y).toBeGreaterThan(valueBefore.y)
+            expect(valueAfter?.width).toBe(valueBefore.width)
+            expect(valueAfter?.height).toBe(valueBefore.height)
+          }).toPass({ timeout: 5000 })
 
           await expect(node).toHaveScreenshot('image-crop-after-drag.png', {
             maxDiffPixelRatio: 0.05
           })
         }
       )
-
-      test('Drag clamps crop box to the right and bottom image edge', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        const img = node.locator('img')
-        await waitForImageNaturalSize(img)
-        const { nw, nh } = await img.evaluate((el: HTMLImageElement) => ({
-          nw: el.naturalWidth,
-          nh: el.naturalHeight
-        }))
-
-        await setCropBounds(comfyPage, 2, {
-          x: nw - 100,
-          y: nh - 90,
-          width: 70,
-          height: 70
-        })
-
-        const cropBox = node.getByTestId('crop-overlay')
-        await dragOnLocator(comfyPage, cropBox, 400, 200)
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              return v ? v.x + v.width : 0
-            },
-            { message: 'crop drag should clamp to image right edge' }
-          )
-          .toBeLessThanOrEqual(nw)
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              return v ? v.y + v.height : 0
-            },
-            { message: 'crop drag should clamp to image bottom edge' }
-          )
-          .toBeLessThanOrEqual(nh)
-      })
-
-      test('Drag clamps crop box to the top-left image corner', async ({
-        comfyPage
-      }) => {
-        await setCropBounds(comfyPage, 2, {
-          x: 8,
-          y: 8,
-          width: 120,
-          height: 100
-        })
-
-        const cropBox = comfyPage.vueNodes
-          .getNodeLocator('2')
-          .getByTestId('crop-overlay')
-        await dragOnLocator(comfyPage, cropBox, -400, -350)
-
-        await expect
-          .poll(async () => (await getCropValue(comfyPage, 2))?.x ?? -1, {
-            message: 'crop drag should clamp x to the image'
-          })
-          .toBeGreaterThanOrEqual(0)
-        await expect
-          .poll(async () => (await getCropValue(comfyPage, 2))?.y ?? -1, {
-            message: 'crop drag should clamp y to the image'
-          })
-          .toBeGreaterThanOrEqual(0)
-      })
-
-      test('Resize from right edge increases width only', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 40,
-          y: 40,
-          width: 160,
-          height: 120
-        })
-
-        const before = await getCropValue(comfyPage, 2)
-        if (!before) throw new Error('missing crop')
-
-        const handle = node.getByTestId('crop-resize-right')
-        await dragOnLocator(comfyPage, handle, 55, 0)
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              if (!v) return false
-              return (
-                v.width > before.width &&
-                v.x === before.x &&
-                v.y === before.y &&
-                v.height === before.height
-              )
-            },
-            { message: 'right-edge resize should grow width only' }
-          )
-          .toBe(true)
-      })
-
-      test('Resize from left edge decreases x and increases width', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 200,
-          y: 100,
-          width: 300,
-          height: 200
-        })
-
-        const before = await getCropValue(comfyPage, 2)
-        if (!before) throw new Error('missing crop')
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-left'),
-          -50,
-          0
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              if (!v) return false
-              return (
-                v.x < before.x &&
-                v.width > before.width &&
-                v.y === before.y &&
-                v.height === before.height
-              )
-            },
-            { message: 'left-edge resize should move x and grow width only' }
-          )
-          .toBe(true)
-      })
-
-      test('Resize from bottom edge increases height only', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 50,
-          y: 50,
-          width: 140,
-          height: 110
-        })
-
-        const before = await getCropValue(comfyPage, 2)
-        if (!before) throw new Error('missing crop')
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-bottom'),
-          0,
-          50
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              if (!v) return false
-              return (
-                v.height > before.height &&
-                v.x === before.x &&
-                v.y === before.y &&
-                v.width === before.width
-              )
-            },
-            { message: 'bottom-edge resize should grow height only' }
-          )
-          .toBe(true)
-      })
-
-      test('Resize from top edge decreases y and increases height', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 60,
-          y: 120,
-          width: 160,
-          height: 140
-        })
-
-        const before = await getCropValue(comfyPage, 2)
-        if (!before) throw new Error('missing crop')
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-top'),
-          0,
-          -45
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              if (!v) return false
-              return (
-                v.y < before.y &&
-                v.height > before.height &&
-                v.x === before.x &&
-                v.width === before.width
-              )
-            },
-            { message: 'top-edge resize should move y and grow height only' }
-          )
-          .toBe(true)
-      })
-
-      test(
-        'Resize from SE corner increases width and height',
-        { tag: '@screenshot' },
-        async ({ comfyPage }) => {
-          const node = comfyPage.vueNodes.getNodeLocator('2')
-          await setCropBounds(comfyPage, 2, {
-            x: 70,
-            y: 80,
-            width: 130,
-            height: 110
-          })
-
-          const before = await getCropValue(comfyPage, 2)
-          if (!before) throw new Error('missing crop')
-
-          await dragOnLocator(
-            comfyPage,
-            node.getByTestId('crop-resize-se'),
-            40,
-            35
-          )
-
-          await expect
-            .poll(
-              async () => {
-                const v = await getCropValue(comfyPage, 2)
-                if (!v) return false
-                return (
-                  v.width > before.width &&
-                  v.height > before.height &&
-                  v.x === before.x &&
-                  v.y === before.y
-                )
-              },
-              { message: 'SE corner resize should grow width and height' }
-            )
-            .toBe(true)
-
-          await comfyPage.nextFrame()
-          await comfyPage.nextFrame()
-          await expect(node).toHaveScreenshot('image-crop-resize-se.png', {
-            maxDiffPixelRatio: 0.05
-          })
-        }
-      )
-
-      test(
-        'Resize from NW corner moves top-left and grows box',
-        { tag: '@screenshot' },
-        async ({ comfyPage }) => {
-          const node = comfyPage.vueNodes.getNodeLocator('2')
-          await setCropBounds(comfyPage, 2, {
-            x: 140,
-            y: 130,
-            width: 160,
-            height: 140
-          })
-
-          const before = await getCropValue(comfyPage, 2)
-          if (!before) throw new Error('missing crop')
-
-          await dragOnLocator(
-            comfyPage,
-            node.getByTestId('crop-resize-nw'),
-            -45,
-            -40
-          )
-
-          await expect
-            .poll(
-              async () => {
-                const v = await getCropValue(comfyPage, 2)
-                if (!v) return false
-                return (
-                  v.x < before.x &&
-                  v.y < before.y &&
-                  v.width > before.width &&
-                  v.height > before.height
-                )
-              },
-              { message: 'NW corner resize should move origin and grow box' }
-            )
-            .toBe(true)
-
-          await comfyPage.nextFrame()
-          await comfyPage.nextFrame()
-          await expect(node).toHaveScreenshot('image-crop-resize-nw.png', {
-            maxDiffPixelRatio: 0.05
-          })
-        }
-      )
-
-      test('Resize enforces minimum crop dimensions', async ({ comfyPage }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 80,
-          y: 80,
-          width: 50,
-          height: 50
-        })
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-right'),
-          -200,
-          0
-        )
-
-        await expect
-          .poll(async () => (await getCropValue(comfyPage, 2))?.width ?? 0, {
-            message: 'crop width should respect minimum size'
-          })
-          .toBeGreaterThanOrEqual(MIN_CROP_SIZE)
-        await expect
-          .poll(async () => (await getCropValue(comfyPage, 2))?.height ?? 0, {
-            message: 'crop height should respect minimum size'
-          })
-          .toBeGreaterThanOrEqual(MIN_CROP_SIZE)
-      })
-
-      test('Resize clamps to image boundaries on the right and bottom edges', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        const img = node.locator('img')
-        await waitForImageNaturalSize(img)
-        const { nw, nh } = await img.evaluate((el: HTMLImageElement) => ({
-          nw: el.naturalWidth,
-          nh: el.naturalHeight
-        }))
-
-        await setCropBounds(comfyPage, 2, {
-          x: nw - 120,
-          y: 40,
-          width: 80,
-          height: 90
-        })
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-right'),
-          400,
-          0
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              return v ? v.x + v.width : 0
-            },
-            { message: 'right-edge resize should not extend past image width' }
-          )
-          .toBeLessThanOrEqual(nw)
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-bottom'),
-          0,
-          400
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              return v ? v.y + v.height : 0
-            },
-            {
-              message: 'bottom-edge resize should not extend past image height'
-            }
-          )
-          .toBeLessThanOrEqual(nh)
-      })
-
-      test(
-        'Eight resize handles are visible when ratio is unlocked',
-        { tag: '@screenshot' },
-        async ({ comfyPage }) => {
-          const node = comfyPage.vueNodes.getNodeLocator('2')
-          await expect(
-            node
-              .locator('[data-testid^="crop-resize-"]')
-              .filter({ visible: true }),
-            'unlocked ratio should expose edge and corner handles'
-          ).toHaveCount(8)
-
-          await comfyPage.nextFrame()
-          await comfyPage.nextFrame()
-          await expect(node).toHaveScreenshot('image-crop-eight-handles.png', {
-            maxDiffPixelRatio: 0.05
-          })
-        }
-      )
-
-      test('Four corner resize handles are visible when aspect ratio is locked', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await node.getByRole('button', { name: 'Lock aspect ratio' }).click()
-        await expect(
-          node
-            .locator('[data-testid^="crop-resize-"]')
-            .filter({ visible: true }),
-          'locked ratio should only show corner handles'
-        ).toHaveCount(4)
-      })
-
-      test('Resize with locked aspect ratio keeps width and height proportional', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        await setCropBounds(comfyPage, 2, {
-          x: 70,
-          y: 80,
-          width: 160,
-          height: 120
-        })
-        await node.getByRole('button', { name: 'Lock aspect ratio' }).click()
-
-        const before = await getCropValue(comfyPage, 2)
-        if (!before) throw new Error('missing crop')
-
-        const ratio = before.width / before.height
-
-        await dragOnLocator(
-          comfyPage,
-          node.getByTestId('crop-resize-se'),
-          48,
-          36
-        )
-
-        await expect
-          .poll(
-            async () => {
-              const v = await getCropValue(comfyPage, 2)
-              if (!v || v.width <= before.width || v.height <= before.height) {
-                return null
-              }
-              const r = v.width / v.height
-              if (Math.abs(r - ratio) > 0.06) return null
-              return v
-            },
-            { message: 'locked ratio resize should preserve aspect ratio' }
-          )
-          .not.toBeNull()
-      })
-
-      test('Broken image URL resets widget to empty state', async ({
-        comfyPage
-      }) => {
-        const node = comfyPage.vueNodes.getNodeLocator('2')
-        const img = node.locator('img')
-        await waitForImageNaturalSize(img)
-
-        let failExamplePng = false
-        await comfyPage.page.route('**/api/view**', async (route) => {
-          const u = route.request().url()
-          if (failExamplePng && u.includes('example.png')) {
-            await route.abort('failed')
-            return
-          }
-          await route.continue()
-        })
-        try {
-          failExamplePng = true
-          const runDone = comfyPage.runButton.click()
-          await expect(
-            node.getByTestId('crop-empty-state'),
-            'failed view fetch should show empty state'
-          ).toBeVisible({ timeout: 15_000 })
-          await expect(
-            node.getByTestId('crop-overlay'),
-            'crop overlay should hide when image fails'
-          ).toHaveCount(0)
-          await runDone
-        } finally {
-          await comfyPage.page.unroute('**/api/view**')
-        }
-      })
-    }
-  )
-
-  test.describe(
-    'with source image (slow view)',
-    { tag: ['@widget', '@slow'] },
-    () => {
-      test('Shows loading text while the view image is delayed', async ({
-        comfyPage
-      }) => {
-        // Slow only example.png view fetches — simulates network latency for the
-        // loading overlay. Delay lives in the route handler (not
-        // page.waitForTimeout in the test body).
-        await comfyPage.page.route('**/api/view**', async (route) => {
-          const url = route.request().url()
-          if (!url.includes('example.png')) {
-            await route.continue()
-            return
-          }
-          await new Promise<void>((resolve) => {
-            setTimeout(resolve, 500)
-          })
-          await route.continue()
-        })
-
-        try {
-          await comfyPage.workflow.loadWorkflow(
-            'widgets/image_crop_with_source'
-          )
-          await comfyPage.vueNodes.waitForNodes()
-          const node = comfyPage.vueNodes.getNodeLocator('2')
-          const runDone = comfyPage.runButton.click()
-          await expect(
-            node.getByText('Loading...'),
-            'delayed view should show loading overlay'
-          ).toBeVisible({ timeout: 10_000 })
-          await runDone
-
-          const img = node.locator('img')
-          await waitForImageNaturalSize(img, { timeout: 30_000 })
-
-          await expect(
-            node.getByText('Loading...'),
-            'loading overlay should hide after delayed image loads'
-          ).toBeHidden()
-        } finally {
-          await comfyPage.page.unroute('**/api/view**')
-        }
-      })
     }
   )
 })

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -3,12 +3,7 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Integer Widget', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-  })
-
+test.describe('Vue Integer Widget', { tag: '@vue-nodes' }, () => {
   test('should be disabled and not allow changing value when link connected to slot', async ({
     comfyPage
   }) => {

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

@@ -4,12 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-test.describe('Vue Upload Widgets', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Upload Widgets', { tag: '@vue-nodes' }, () => {
   test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
     await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')

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

@@ -4,12 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Vue Multiline String Widget', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Multiline String Widget', { tag: '@vue-nodes' }, () => {
   const getFirstClipNode = (comfyPage: ComfyPage) =>
     comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
 

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

@@ -4,12 +4,7 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { TestGraphAccess } from '@e2e/types/globals'
 
-test.describe('Vue Widget Reactivity', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
+test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
   test('Should display added widgets', async ({ comfyPage }) => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-4"] > .lg-node-widgets > div'

browser_tests/tests/widgetCopyButton.spec.ts

@@ -3,12 +3,8 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 
-test.describe('Widget copy button', { tag: '@ui' }, () => {
+test.describe('Widget copy button', { tag: ['@ui', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-
     // Add a PreviewAny node which has a read-only textarea with a copy button
     await comfyPage.page.evaluate(() => {
       const node = window.LiteGraph!.createNode('PreviewAny')

browser_tests/tests/workflowTabThumbnail.spec.ts

@@ -5,7 +5,6 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Workflow Tab Thumbnails', { tag: '@workflow' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.Workflow.WorkflowTabsPosition',
       'Topbar'

src/components/imagecrop/WidgetImageCrop.vue

@@ -10,8 +10,12 @@
       ref="containerEl"
       class="relative min-h-0 flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
     >
+      <div v-if="isLoading" class="flex size-full items-center justify-center">
+        <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
+      </div>
+
       <div
-        v-if="!imageUrl"
+        v-else-if="!imageUrl"
         class="flex size-full flex-col items-center justify-center text-center"
         data-testid="crop-empty-state"
       >
@@ -22,58 +26,48 @@
         <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
       </div>
 
-      <template v-else>
-        <img
-          ref="imageEl"
-          :src="imageUrl"
-          :alt="$t('imageCrop.cropPreviewAlt')"
-          draggable="false"
-          class="block size-full object-contain select-none"
-          @load="handleImageLoad"
-          @error="handleImageError"
-          @dragstart.prevent
-        />
+      <img
+        v-else
+        ref="imageEl"
+        :src="imageUrl"
+        :alt="$t('imageCrop.cropPreviewAlt')"
+        draggable="false"
+        class="block size-full object-contain select-none"
+        @load="handleImageLoad"
+        @error="handleImageError"
+        @dragstart.prevent
+      />
 
-        <div
-          v-if="isLoading"
-          aria-live="polite"
-          class="absolute inset-0 z-10 flex size-full items-center justify-center bg-node-component-surface/90"
-        >
-          <span class="text-sm">{{ $t('imageCrop.loading') }}</span>
-        </div>
+      <div
+        v-if="imageUrl && !isLoading"
+        :class="
+          cn(
+            'absolute box-content cursor-move border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]',
+            isDisabled && 'pointer-events-none opacity-60'
+          )
+        "
+        :style="cropBoxStyle"
+        data-testid="crop-overlay"
+        @pointerdown="handleDragStart"
+        @pointermove="handleDragMove"
+        @pointerup="handleDragEnd"
+      />
 
+      <template v-for="handle in resizeHandles" :key="handle.direction">
         <div
-          v-if="!isLoading"
+          v-show="imageUrl && !isLoading"
           :class="
             cn(
-              'absolute box-content cursor-move border-2 border-white shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]',
+              'absolute',
+              handle.class,
               isDisabled && 'pointer-events-none opacity-60'
             )
           "
-          :style="cropBoxStyle"
-          data-testid="crop-overlay"
-          @pointerdown="handleDragStart"
-          @pointermove="handleDragMove"
-          @pointerup="handleDragEnd"
+          :style="handle.style"
+          @pointerdown="(e) => handleResizeStart(e, handle.direction)"
+          @pointermove="handleResizeMove"
+          @pointerup="handleResizeEnd"
         />
-
-        <template v-for="handle in resizeHandles" :key="handle.direction">
-          <div
-            v-show="!isLoading"
-            :data-testid="`crop-resize-${handle.direction}`"
-            :class="
-              cn(
-                'absolute',
-                handle.class,
-                isDisabled && 'pointer-events-none opacity-60'
-              )
-            "
-            :style="handle.style"
-            @pointerdown="(e) => handleResizeStart(e, handle.direction)"
-            @pointermove="handleResizeMove"
-            @pointerup="handleResizeEnd"
-          />
-        </template>
       </template>
     </div>
 

src/composables/useImageCrop.test.ts

@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { imageCropLoadingAfterUrlChange } from '@/composables/useImageCrop'
-
-describe('imageCropLoadingAfterUrlChange', () => {
-  it('clears loading when url becomes null', () => {
-    expect(imageCropLoadingAfterUrlChange(null, 'https://a/b.png')).toBe(false)
-  })
-
-  it('keeps loading off when url stays null', () => {
-    expect(imageCropLoadingAfterUrlChange(null, null)).toBe(false)
-  })
-
-  it('starts loading when url changes to a new string', () => {
-    expect(imageCropLoadingAfterUrlChange('https://b', 'https://a')).toBe(true)
-  })
-
-  it('starts loading when first url is set', () => {
-    expect(imageCropLoadingAfterUrlChange('https://a', undefined)).toBe(true)
-  })
-
-  it('returns null when url is unchanged so caller can skip updating', () => {
-    expect(imageCropLoadingAfterUrlChange('https://a', 'https://a')).toBe(null)
-  })
-})

src/composables/useImageCrop.ts

@@ -19,23 +19,9 @@ type ResizeDirection =
 
 const HANDLE_SIZE = 8
 const CORNER_SIZE = 10
-/** Minimum crop width/height in source image pixel space. */
-export const MIN_CROP_SIZE = 16
+const MIN_CROP_SIZE = 16
 const CROP_BOX_BORDER = 2
 
-/**
- * Next `isLoading` when `imageUrl` transitions. `null` means do not change
- * `isLoading` (e.g. same URL).
- */
-export function imageCropLoadingAfterUrlChange(
-  url: string | null,
-  previous: string | null | undefined
-): boolean | null {
-  if (url == null) return false
-  if (url !== previous) return true
-  return null
-}
-
 export const ASPECT_RATIOS = {
   '1:1': 1,
   '3:4': 3 / 4,
@@ -193,13 +179,6 @@ export function useImageCrop(nodeId: NodeId, options: UseImageCropOptions) {
     imageUrl.value = getInputImageUrl()
   }
 
-  watch(imageUrl, (url, previous) => {
-    const next = imageCropLoadingAfterUrlChange(url, previous)
-    if (next !== null) {
-      isLoading.value = next
-    }
-  })
-
   const updateDisplayedDimensions = () => {
     if (!imageEl.value || !containerEl.value) return
 

src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue

@@ -102,6 +102,7 @@ import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { getComfyPlatformBaseUrl } from '@/config/comfyApi'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+import { useTelemetry } from '@/platform/telemetry'
 import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import type { PreviewSubscribeResponse } from '@/platform/workspace/api/workspaceApi'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
@@ -128,6 +129,7 @@ const { t } = useI18n()
 const toast = useToast()
 const { subscribe, previewSubscribe, plans, fetchStatus, fetchBalance } =
   useBillingContext()
+const telemetry = useTelemetry()
 const billingOperationStore = useBillingOperationStore()
 const isPolling = computed(() => billingOperationStore.hasPendingOperations)
 
@@ -226,6 +228,7 @@ async function handleAddCreditCard() {
     if (!response) return
 
     if (response.status === 'subscribed') {
+      telemetry?.trackMonthlySubscriptionSucceeded()
       toast.add({
         severity: 'success',
         summary: t('subscription.required.pollingSuccess'),
@@ -280,6 +283,7 @@ async function handleConfirmTransition() {
     if (!response) return
 
     if (response.status === 'subscribed') {
+      telemetry?.trackMonthlySubscriptionSucceeded()
       toast.add({
         severity: 'success',
         summary: t('subscription.required.pollingSuccess'),