refactor playwright tests based on platform/workbench/renderer

browser_tests/tests/workbench/actionbar.spec.ts

@@ -0,0 +1,126 @@
+import type { Response } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+
+import type { StatusWsMessage } from '../../../src/schemas/apiSchema.js'
+import { comfyPageFixture } from '../../fixtures/ComfyPage.js'
+import { webSocketFixture } from '../../fixtures/ws.js'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+test.describe('Actionbar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  /**
+   * This test ensures that the autoqueue change mode can only queue one change at a time
+   */
+  test('Does not auto-queue multiple changes at a time', async ({
+    comfyPage,
+    ws
+  }) => {
+    // Enable change auto-queue mode
+    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
+    expect(await queueOpts.getMode()).toBe('disabled')
+    await queueOpts.setMode('change')
+    await comfyPage.nextFrame()
+    expect(await queueOpts.getMode()).toBe('change')
+    await comfyPage.actionbar.queueButton.toggleOptions()
+
+    // Intercept the prompt queue endpoint
+    let promptNumber = 0
+    await comfyPage.page.route('**/api/prompt', async (route, req) => {
+      await new Promise((r) => setTimeout(r, 100))
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          prompt_id: promptNumber,
+          number: ++promptNumber,
+          node_errors: {},
+          // Include the request data to validate which prompt was queued so we can validate the width
+          __request: req.postDataJSON()
+        })
+      })
+    })
+
+    // Start watching for a message to prompt
+    const requestPromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+    // Find and set the width on the latent node
+    const triggerChange = async (value: number) => {
+      return await comfyPage.page.evaluate((value) => {
+        const node = window['app'].graph._nodes.find(
+          (n) => n.type === 'EmptyLatentImage'
+        )
+        node.widgets[0].value = value
+        window[
+          'app'
+        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
+      }, value)
+    }
+
+    // Trigger a status websocket message
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
+            }
+          }
+        }
+      } as StatusWsMessage)
+    }
+
+    // Extract the width from the queue response
+    const getQueuedWidth = async (resp: Promise<Response>) => {
+      const obj = await (await resp).json()
+      return obj['__request']['prompt']['5']['inputs']['width']
+    }
+
+    // Trigger a bunch of changes
+    const START = 32
+    const END = 64
+    for (let i = START; i <= END; i += 8) {
+      await triggerChange(i)
+    }
+
+    // Ensure the queued width is the first value
+    expect(
+      await getQueuedWidth(requestPromise),
+      'the first queued prompt should be the first change width'
+    ).toBe(START)
+
+    // Ensure that no other changes are queued
+    await expect(
+      comfyPage.page.waitForResponse('**/api/prompt', { timeout: 250 })
+    ).rejects.toThrow()
+    expect(
+      promptNumber,
+      'only 1 prompt should have been queued even though there were multiple changes'
+    ).toBe(1)
+
+    // Trigger a status update so auto-queue re-runs
+    await triggerStatus(1)
+    await triggerStatus(0)
+
+    // Ensure the queued width is the last queued value
+    expect(
+      await getQueuedWidth(comfyPage.page.waitForResponse('**/api/prompt')),
+      'last queued prompt width should be the last change'
+    ).toBe(END)
+    expect(promptNumber, 'queued prompt count should be 2').toBe(2)
+  })
+
+  test('Can dock actionbar into top menu', async ({ comfyPage }) => {
+    await comfyPage.page.dragAndDrop(
+      '.actionbar .drag-handle',
+      '.comfyui-menu',
+      {
+        targetPosition: { x: 0, y: 0 }
+      }
+    )
+    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+  })
+})

browser_tests/tests/workbench/backgroundImageUpload.spec.ts

@@ -0,0 +1,255 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Background Image Upload', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Reset the background image setting before each test
+    await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', '')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    // Clean up background image setting after each test
+    await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', '')
+  })
+
+  test('should show background image upload component in settings', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    await expect(backgroundImageSetting).toBeVisible()
+
+    // Verify the component has the expected elements using semantic selectors
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    await expect(urlInput).toBeVisible()
+    await expect(urlInput).toHaveAttribute('placeholder')
+
+    const uploadButton = backgroundImageSetting.locator(
+      'button:has(.pi-upload)'
+    )
+    await expect(uploadButton).toBeVisible()
+
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+    await expect(clearButton).toBeVisible()
+    await expect(clearButton).toBeDisabled() // Should be disabled when no image
+  })
+
+  test('should upload image file and set as background', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    // Click the upload button to trigger file input
+    const uploadButton = backgroundImageSetting.locator(
+      'button:has(.pi-upload)'
+    )
+
+    // Set up file upload handler
+    const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+    await uploadButton.click()
+    const fileChooser = await fileChooserPromise
+
+    // Upload the test image
+    await fileChooser.setFiles(comfyPage.assetPath('image32x32.webp'))
+
+    // Wait for upload to complete and verify the setting was updated
+    await comfyPage.page.waitForTimeout(500) // Give time for file reading
+
+    // Verify the URL input now has an API URL
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    const inputValue = await urlInput.inputValue()
+    expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
+
+    // Verify clear button is now enabled
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+    await expect(clearButton).toBeEnabled()
+
+    // Verify the setting value was actually set
+    const settingValue = await comfyPage.getSetting(
+      'Comfy.Canvas.BackgroundImage'
+    )
+    expect(settingValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
+  })
+
+  test('should accept URL input for background image', async ({
+    comfyPage
+  }) => {
+    const testImageUrl = 'https://example.com/test-image.png'
+
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    // Enter URL in the input field
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    await urlInput.fill(testImageUrl)
+
+    // Trigger blur event to ensure the value is set
+    await urlInput.blur()
+
+    // Verify clear button is now enabled
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+    await expect(clearButton).toBeEnabled()
+
+    // Verify the setting value was updated
+    const settingValue = await comfyPage.getSetting(
+      'Comfy.Canvas.BackgroundImage'
+    )
+    expect(settingValue).toBe(testImageUrl)
+  })
+
+  test('should clear background image when clear button is clicked', async ({
+    comfyPage
+  }) => {
+    const testImageUrl = 'https://example.com/test-image.png'
+
+    // First set a background image
+    await comfyPage.setSetting('Comfy.Canvas.BackgroundImage', testImageUrl)
+
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    // Verify the input has the test URL
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    await expect(urlInput).toHaveValue(testImageUrl)
+
+    // Verify clear button is enabled
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+    await expect(clearButton).toBeEnabled()
+
+    // Click the clear button
+    await clearButton.click()
+
+    // Verify the input is now empty
+    await expect(urlInput).toHaveValue('')
+
+    // Verify clear button is now disabled
+    await expect(clearButton).toBeDisabled()
+
+    // Verify the setting value was cleared
+    const settingValue = await comfyPage.getSetting(
+      'Comfy.Canvas.BackgroundImage'
+    )
+    expect(settingValue).toBe('')
+  })
+
+  test('should show tooltip on upload and clear buttons', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    // Hover over upload button and verify tooltip appears
+    const uploadButton = backgroundImageSetting.locator(
+      'button:has(.pi-upload)'
+    )
+    await uploadButton.hover()
+
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
+    const uploadTooltip = comfyPage.page.locator('.p-tooltip:visible')
+    await expect(uploadTooltip).toBeVisible()
+
+    // Move away to hide tooltip
+    await comfyPage.page.locator('body').hover()
+    await comfyPage.page.waitForTimeout(100)
+
+    // Set a background to enable clear button
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    await urlInput.fill('https://example.com/test.png')
+    await urlInput.blur()
+
+    // Hover over clear button and verify tooltip appears
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+    await clearButton.hover()
+
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
+    const clearTooltip = comfyPage.page.locator('.p-tooltip:visible')
+    await expect(clearTooltip).toBeVisible()
+  })
+
+  test('should maintain reactive updates between URL input and clear button state', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+
+    // Navigate to Appearance category
+    const appearanceOption = comfyPage.page.locator('text=Appearance')
+    await appearanceOption.click()
+
+    // Find the background image setting
+    const backgroundImageSetting = comfyPage.page.locator(
+      '#Comfy\\.Canvas\\.BackgroundImage'
+    )
+    const urlInput = backgroundImageSetting.locator('input[type="text"]')
+    const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
+
+    // Initially clear button should be disabled
+    await expect(clearButton).toBeDisabled()
+
+    // Type some text - clear button should become enabled
+    await urlInput.fill('test')
+    await expect(clearButton).toBeEnabled()
+
+    // Clear the text manually - clear button should become disabled again
+    await urlInput.fill('')
+    await expect(clearButton).toBeDisabled()
+
+    // Add text again - clear button should become enabled
+    await urlInput.fill('https://example.com/image.png')
+    await expect(clearButton).toBeEnabled()
+
+    // Use clear button - should clear input and disable itself
+    await clearButton.click()
+    await expect(urlInput).toHaveValue('')
+    await expect(clearButton).toBeDisabled()
+  })
+})

browser_tests/tests/workbench/bottomPanelShortcuts.spec.ts

@@ -0,0 +1,280 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Bottom Panel Shortcuts', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
+    // Initially shortcuts panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+
+    // Click shortcuts toggle button in sidebar
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Shortcuts panel should now be visible
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Click toggle button again to hide
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Panel should be hidden again
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+  })
+
+  test('should display essentials shortcuts tab', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Essentials tab should be visible and active by default
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Should display shortcut categories
+    await expect(
+      comfyPage.page.locator('.subcategory-title').first()
+    ).toBeVisible()
+
+    // Should display some keyboard shortcuts
+    await expect(comfyPage.page.locator('.key-badge').first()).toBeVisible()
+
+    // Should have workflow, node, and queue sections
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Workflow' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Node' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Queue' })
+    ).toBeVisible()
+  })
+
+  test('should display view controls shortcuts tab', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Click view controls tab
+    await comfyPage.page.getByRole('tab', { name: /View Controls/i }).click()
+
+    // View controls tab should be active
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Should display view controls shortcuts
+    await expect(comfyPage.page.locator('.key-badge').first()).toBeVisible()
+
+    // Should have view and panel controls sections
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'View' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Panel Controls' })
+    ).toBeVisible()
+  })
+
+  test('should switch between shortcuts tabs', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Essentials should be active initially
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Click view controls tab
+    await comfyPage.page.getByRole('tab', { name: /View Controls/i }).click()
+
+    // View controls should now be active
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).not.toHaveAttribute('aria-selected', 'true')
+
+    // Switch back to essentials
+    await comfyPage.page.getByRole('tab', { name: /Essential/i }).click()
+
+    // Essentials should be active again
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).not.toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should display formatted keyboard shortcuts', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Wait for shortcuts to load
+    await comfyPage.page.waitForSelector('.key-badge')
+
+    // Check for common formatted keys
+    const keyBadges = comfyPage.page.locator('.key-badge')
+    const count = await keyBadges.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+
+    // Should show formatted modifier keys
+    const badgeText = await keyBadges.allTextContents()
+    const hasModifiers = badgeText.some((text) =>
+      ['Ctrl', 'Cmd', 'Shift', 'Alt'].includes(text)
+    )
+    expect(hasModifiers).toBeTruthy()
+  })
+
+  test('should maintain panel state when switching to terminal', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel first
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Open terminal panel (should switch panels)
+    await comfyPage.page
+      .locator('button[aria-label*="Toggle Bottom Panel"]')
+      .click()
+
+    // Panel should still be visible but showing terminal content
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Switch back to shortcuts
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Should show shortcuts content again
+    await expect(
+      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
+    ).toBeVisible()
+  })
+
+  test('should handle keyboard navigation', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Focus the first tab
+    await comfyPage.page.getByRole('tab', { name: /Essential/i }).focus()
+
+    // Use arrow keys to navigate between tabs
+    await comfyPage.page.keyboard.press('ArrowRight')
+
+    // View controls tab should now have focus
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toBeFocused()
+
+    // Press Enter to activate the tab
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Tab should be selected
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should close panel by clicking shortcuts button again', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Click shortcuts button again to close
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+  })
+
+  test('should display shortcuts in organized columns', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Should have 3-column grid layout
+    await expect(comfyPage.page.locator('.md\\:grid-cols-3')).toBeVisible()
+
+    // Should have multiple subcategory sections
+    const subcategoryTitles = comfyPage.page.locator('.subcategory-title')
+    const titleCount = await subcategoryTitles.count()
+    expect(titleCount).toBeGreaterThanOrEqual(2)
+  })
+
+  test('should open shortcuts panel with Ctrl+Shift+K', async ({
+    comfyPage
+  }) => {
+    // Initially shortcuts panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+
+    // Press Ctrl+Shift+K to open shortcuts panel
+    await comfyPage.page.keyboard.press('Control+Shift+KeyK')
+
+    // Shortcuts panel should now be visible
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Should show essentials tab by default
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should open settings dialog when clicking manage shortcuts button', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Manage shortcuts button should be visible
+    await expect(
+      comfyPage.page.getByRole('button', { name: /Manage Shortcuts/i })
+    ).toBeVisible()
+
+    // Click manage shortcuts button
+    await comfyPage.page
+      .getByRole('button', { name: /Manage Shortcuts/i })
+      .click()
+
+    // Settings dialog should open with keybinding tab
+    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
+
+    // Should show keybinding settings (check for keybinding-related content)
+    await expect(
+      comfyPage.page.getByRole('option', { name: 'Keybinding' })
+    ).toBeVisible()
+  })
+})

browser_tests/tests/workbench/colorPalette.spec.ts

@@ -0,0 +1,286 @@
+import { expect } from '@playwright/test'
+
+import type { Palette } from '../../../src/schemas/colorPaletteSchema'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+const customColorPalettes: Record<string, Palette> = {
+  obsidian: {
+    version: 102,
+    id: 'obsidian',
+    name: 'Obsidian',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=',
+        CLEAR_BACKGROUND_COLOR: '#222222',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        WIDGET_DISABLED_TEXT_COLOR: '#646464',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  },
+  obsidian_dark: {
+    version: 102,
+    id: 'obsidian_dark',
+    name: 'Obsidian Dark',
+    colors: {
+      node_slot: {
+        CLIP: '#FFD500',
+        CLIP_VISION: '#A8DADC',
+        CLIP_VISION_OUTPUT: '#ad7452',
+        CONDITIONING: '#FFA931',
+        CONTROL_NET: '#6EE7B7',
+        IMAGE: '#64B5F6',
+        LATENT: '#FF9CF9',
+        MASK: '#81C784',
+        MODEL: '#B39DDB',
+        STYLE_MODEL: '#C2FFAE',
+        VAE: '#FF6E6E',
+        TAESD: '#DCC274',
+        PIPE_LINE: '#7737AA',
+        PIPE_LINE_SDXL: '#7737AA',
+        INT: '#29699C',
+        XYPLOT: '#74DA5D',
+        X_Y: '#38291f'
+      },
+      litegraph_base: {
+        BACKGROUND_IMAGE:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==',
+        CLEAR_BACKGROUND_COLOR: '#000',
+        NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
+        NODE_SELECTED_TITLE_COLOR: '#FFF',
+        NODE_TEXT_SIZE: 14,
+        NODE_TEXT_COLOR: '#b8b8b8',
+        NODE_SUBTEXT_SIZE: 12,
+        NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
+        NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
+        NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
+        NODE_DEFAULT_SHAPE: 'box',
+        NODE_BOX_OUTLINE_COLOR: '#236692',
+        DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
+        DEFAULT_GROUP_FONT: 24,
+        WIDGET_BGCOLOR: '#242424',
+        WIDGET_OUTLINE_COLOR: '#333',
+        WIDGET_TEXT_COLOR: '#a3a3a8',
+        WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
+        WIDGET_DISABLED_TEXT_COLOR: '#646464',
+        LINK_COLOR: '#9A9',
+        EVENT_LINK_COLOR: '#A86',
+        CONNECTING_LINK_COLOR: '#AFA'
+      },
+      comfy_base: {
+        'fg-color': '#fff',
+        'bg-color': '#242424',
+        'comfy-menu-bg': 'rgba(24,24,24,.9)',
+        'comfy-input-bg': '#262626',
+        'input-text': '#ddd',
+        'descrip-text': '#999',
+        'drag-text': '#ccc',
+        'error-text': '#ff4444',
+        'border-color': '#29292c',
+        'tr-even-bg-color': 'rgba(28,28,28,.9)',
+        'tr-odd-bg-color': 'rgba(19,19,19,.9)'
+      }
+    }
+  },
+  // A custom light theme with fg color red
+  light_red: {
+    id: 'light_red',
+    name: 'Light Red',
+    light_theme: true,
+    colors: {
+      node_slot: {},
+      litegraph_base: {},
+      comfy_base: {
+        'fg-color': '#ff0000'
+      }
+    }
+  }
+}
+
+test.describe('Color Palette', () => {
+  test('Can show custom color palette', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.setup()
+
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark-all-colors.png'
+    )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-light-red.png'
+    )
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
+  })
+
+  test('Can add custom color palette', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate((p) => {
+      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
+    }, customColorPalettes.obsidian_dark)
+    expect(await comfyPage.getToastErrorCount()).toBe(0)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
+    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+  })
+})
+
+test.describe('Node Color Adjustments', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+  })
+
+  test('should adjust opacity via node opacity setting', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.page.waitForTimeout(128)
+
+    // Drag mouse to force canvas to redraw
+    await comfyPage.page.mouse.move(0, 0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
+
+    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.page.waitForTimeout(128)
+
+    await comfyPage.page.mouse.move(8, 8)
+    await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
+  })
+
+  test('should persist color adjustments when changing themes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.2)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'arc')
+    await comfyPage.nextFrame()
+    await comfyPage.page.mouse.move(0, 0)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'node-opacity-0.2-arc-theme.png'
+    )
+  })
+
+  test('should not serialize color adjustments in workflow', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
+    const workflow = await comfyPage.page.evaluate(() => {
+      return localStorage.getItem('workflow')
+    })
+    for (const node of JSON.parse(workflow ?? '{}').nodes) {
+      if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
+      if (node.color) expect(node.color).not.toMatch(/hsla/)
+    }
+  })
+
+  test('should lighten node colors when switching to light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('node-lightened-colors.png')
+  })
+
+  test.describe('Context menu color adjustments', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+      await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
+      const node = await comfyPage.getFirstNodeRef()
+      await node?.clickContextMenuOption('Colors')
+    })
+
+    test('should persist color adjustments when changing custom node colors', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("red")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-changed.png'
+      )
+    })
+
+    test('should persist color adjustments when removing custom node color', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page
+        .locator('.litemenu-entry.submenu span:has-text("No color")')
+        .click()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'node-opacity-0.3-color-removed.png'
+      )
+    })
+  })
+})

browser_tests/tests/workbench/commands.spec.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Keybindings', () => {
+  test('Should execute command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      window['foo'] = true
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should execute async command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve) =>
+        setTimeout(() => {
+          window['foo'] = true
+          resolve()
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should handle command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      throw new Error('Test error')
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.getToastErrorCount()).toBe(1)
+  })
+
+  test('Should handle async command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve, reject) =>
+        setTimeout(() => {
+          reject(new Error('Test error'))
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.getToastErrorCount()).toBe(1)
+  })
+})

browser_tests/tests/workbench/customIcons.spec.ts

@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+async function verifyCustomIconSvg(iconElement: Locator) {
+  const svgVariable = await iconElement.evaluate((element) => {
+    const styles = getComputedStyle(element)
+    return styles.getPropertyValue('--svg')
+  })
+
+  expect(svgVariable).toBeTruthy()
+  const dataUrlMatch = svgVariable.match(
+    /url\("data:image\/svg\+xml,([^"]+)"\)/
+  )
+  expect(dataUrlMatch).toBeTruthy()
+
+  const encodedSvg = dataUrlMatch![1]
+  const decodedSvg = decodeURIComponent(encodedSvg)
+
+  // Check for SVG header to confirm it's a valid SVG
+  expect(decodedSvg).toContain("<svg xmlns='http://www.w3.org/2000/svg'")
+}
+
+test.describe('Custom Icons', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('sidebar tab icons use custom SVGs', async ({ comfyPage }) => {
+    // Find the icon in the sidebar
+    const icon = comfyPage.page.locator(
+      '.icon-\\[comfy--ai-model\\].side-bar-button-icon'
+    )
+    await expect(icon).toBeVisible()
+
+    // Verify the custom SVG content
+    await verifyCustomIconSvg(icon)
+  })
+
+  test('Browse Templates menu item uses custom template icon', async ({
+    comfyPage
+  }) => {
+    // Open the topbar menu
+    await comfyPage.menu.topbar.openTopbarMenu()
+    const menuItem = comfyPage.menu.topbar.getMenuItem('Browse Templates')
+
+    // Find the icon as a previous sibling of the menu item label
+    const templateIcon = menuItem
+      .locator('..')
+      .locator('.icon-\\[comfy--template\\]')
+    await expect(templateIcon).toBeVisible()
+
+    // Verify the custom SVG content
+    await verifyCustomIconSvg(templateIcon)
+  })
+})

browser_tests/tests/workbench/dialog.spec.ts

@@ -0,0 +1,373 @@
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { Keybinding } from '../../../src/schemas/keyBindingSchema'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Load workflow warning', () => {
+  test('Should display a warning when loading a workflow with missing nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    await expect(missingNodesWarning).toBeVisible()
+  })
+
+  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing/missing_nodes_in_subgraph')
+
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    await expect(missingNodesWarning).toBeVisible()
+
+    // Verify the missing node text includes subgraph context
+    const warningText = await missingNodesWarning.textContent()
+    expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    expect(warningText).toContain('in subgraph')
+  })
+})
+
+test('Does not report warning on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+  await comfyPage.loadWorkflow('missing/missing_nodes')
+  await comfyPage.closeDialog()
+
+  // Wait for any async operations to complete after dialog closes
+  await comfyPage.nextFrame()
+  await comfyPage.page.waitForTimeout(100)
+
+  // Make a change to the graph
+  await comfyPage.doubleClickCanvas()
+  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+
+  // Undo and redo the change
+  await comfyPage.ctrlZ()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await comfyPage.ctrlY()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+})
+
+test.describe('Execution error', () => {
+  test('Should display an error message when an execution error occurs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('nodes/execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    // Wait for the element with the .comfy-execution-error selector to be visible
+    const executionError = comfyPage.page.locator('.comfy-error-report')
+    await expect(executionError).toBeVisible()
+  })
+})
+
+test.describe('Missing models warning', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', true)
+    await comfyPage.page.evaluate((url: string) => {
+      return fetch(`${url}/api/devtools/cleanup_fake_model`)
+    }, comfyPage.url)
+  })
+
+  test('Should display a warning when missing models are found', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing/missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should display a warning when missing models are found in node properties', async ({
+    comfyPage
+  }) => {
+    // Load workflow that has a node with models metadata at the node level
+    await comfyPage.loadWorkflow('missing/missing_models_from_node_properties')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should not display a warning when no missing models are found', async ({
+    comfyPage
+  }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'text_encoders',
+          folders: ['ComfyUI/models/text_encoders']
+        }
+      ])
+    }
+    await comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    await comfyPage.page.route(
+      '**/api/experiment/models/text_encoders',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.loadWorkflow('missing/missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
+  })
+
+  test('Should not display warning when model metadata exists but widget values have changed', async ({
+    comfyPage
+  }) => {
+    // This tests the scenario where outdated model metadata exists in the workflow
+    // but the actual selected models (widget values) have changed
+    await comfyPage.loadWorkflow('missing/model_metadata_widget_mismatch')
+
+    // The missing models warning should NOT appear
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
+  })
+
+  // Flaky test after parallelization
+  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
+  test.skip('Should download missing model when clicking download button', async ({
+    comfyPage
+  }) => {
+    // The fake_model.safetensors is served by
+    // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
+    await comfyPage.loadWorkflow('missing/missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = comfyPage.page.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await downloadButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
+  })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing/missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
+})
+
+test.describe('Settings', () => {
+  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsContent = comfyPage.page.locator('.settings-content')
+    await expect(settingsContent).toBeVisible()
+    const isUsableHeight = await settingsContent.evaluate(
+      (el) => el.clientHeight > 30
+    )
+    expect(isUsableHeight).toBeTruthy()
+  })
+
+  test('Can open settings with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.press(',')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
+    const settingsLocator = comfyPage.page.locator('.settings-container')
+    await expect(settingsLocator).toBeVisible()
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(settingsLocator).not.toBeVisible()
+  })
+
+  test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
+    const maxSpeed = 2.5
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
+    await test.step('Setting should persist', async () => {
+      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
+    })
+  })
+
+  test('Should persist keybinding setting', async ({ comfyPage }) => {
+    // Open the settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    await comfyPage.page.waitForSelector('.settings-container')
+
+    // Open the keybinding tab
+    await comfyPage.page.getByLabel('Keybinding').click()
+    await comfyPage.page.waitForSelector(
+      '[placeholder="Search Keybindings..."]'
+    )
+
+    // Focus the 'New Blank Workflow' row
+    const newBlankWorkflowRow = comfyPage.page.locator('tr', {
+      has: comfyPage.page.getByRole('cell', { name: 'New Blank Workflow' })
+    })
+    await newBlankWorkflowRow.click()
+
+    // Click edit button
+    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
+    await editKeybindingButton.click()
+
+    // Set new keybinding
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    await input.press('Alt+n')
+
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/api/settings/Comfy.Keybinding.NewBindings'
+    )
+
+    // Save keybinding
+    const saveButton = comfyPage.page
+      .getByLabel('New Blank Workflow')
+      .getByLabel('Save')
+    await saveButton.click()
+
+    const request = await requestPromise
+    const expectedSetting: Keybinding = {
+      commandId: 'Comfy.NewBlankWorkflow',
+      combo: {
+        key: 'n',
+        ctrl: false,
+        alt: true,
+        shift: false
+      }
+    }
+    expect(request.postData()).toContain(JSON.stringify(expectedSetting))
+  })
+})
+
+test.describe('Support', () => {
+  test('Should open external zendesk link', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    const pagePromise = comfyPage.page.context().waitForEvent('page')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
+    const newPage = await pagePromise
+
+    await newPage.waitForLoadState('networkidle')
+    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
+    await newPage.close()
+  })
+})
+
+test.describe('Error dialog', () => {
+  test('Should display an error dialog when graph configure fails', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      const graph = window['graph']
+      graph.configure = () => {
+        throw new Error('Error on configure!')
+      }
+    })
+
+    await comfyPage.loadWorkflow('default')
+
+    const errorDialog = comfyPage.page.locator('.comfy-error-report')
+    await expect(errorDialog).toBeVisible()
+  })
+
+  test('Should display an error dialog when prompt execution fails', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(async () => {
+      const app = window['app']
+      app.api.queuePrompt = () => {
+        throw new Error('Error on queuePrompt!')
+      }
+      await app.queuePrompt(0)
+    })
+    const errorDialog = comfyPage.page.locator('.comfy-error-report')
+    await expect(errorDialog).toBeVisible()
+  })
+})
+
+test.describe('Signin dialog', () => {
+  test('Paste content to signin dialog should not paste node on canvas', async ({
+    comfyPage
+  }) => {
+    const nodeNum = (await comfyPage.getNodes()).length
+    await comfyPage.clickEmptyLatentNode()
+    await comfyPage.ctrlC()
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('test_password')
+    await textBox.press('Control+a')
+    await textBox.press('Control+c')
+
+    await comfyPage.page.evaluate(() => {
+      void window['app'].extensionManager.dialog.showSignInDialog()
+    })
+
+    const input = comfyPage.page.locator('#comfy-org-sign-in-password')
+    await input.waitFor({ state: 'visible' })
+    await input.press('Control+v')
+    await expect(input).toHaveValue('test_password')
+
+    expect(await comfyPage.getNodes()).toHaveLength(nodeNum)
+  })
+})

browser_tests/tests/workbench/extensionAPI.spec.ts

@@ -0,0 +1,342 @@
+import { expect } from '@playwright/test'
+
+import type { SettingParams } from '../../../src/platform/settings/types'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Topbar commands', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'foo',
+            label: 'foo-command',
+            function: () => {
+              window['foo'] = true
+            }
+          }
+        ],
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
+      })
+    })
+
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should not allow register command defined in other extension', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerCommand('foo', () => alert(1))
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
+      })
+    })
+
+    const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
+    expect(await menuItem.count()).toBe(0)
+  })
+
+  test('Should allow registering keybindings', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      app.registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'TestCommand',
+            function: () => {
+              window['TestCommand'] = true
+            }
+          }
+        ],
+        keybindings: [
+          {
+            combo: { key: 'k' },
+            commandId: 'TestCommand'
+          }
+        ]
+      })
+    })
+
+    await comfyPage.page.keyboard.press('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+
+  test.describe('Settings', () => {
+    test('Should allow adding settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'TestSetting',
+              name: 'Test Setting',
+              type: 'text',
+              defaultValue: 'Hello, world!',
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+      // onChange is called when the setting is first added
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, world!')
+
+      await comfyPage.setSetting('TestSetting', 'Hello, universe!')
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, universe!')
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test('Should allow setting boolean settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'Comfy.TestSetting',
+              name: 'Test Setting',
+              type: 'boolean',
+              defaultValue: false,
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(false)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(true)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test.describe('Passing through attrs to setting components', () => {
+      const testCases: Array<{
+        config: Partial<SettingParams>
+        selector: string
+      }> = [
+        {
+          config: {
+            type: 'boolean',
+            defaultValue: true
+          },
+          selector: '.p-toggleswitch.p-component'
+        },
+        {
+          config: {
+            type: 'number',
+            defaultValue: 10
+          },
+          selector: '.p-inputnumber input'
+        },
+        {
+          config: {
+            type: 'slider',
+            defaultValue: 10
+          },
+          selector: '.p-slider.p-component'
+        },
+        {
+          config: {
+            type: 'combo',
+            defaultValue: 'foo',
+            options: ['foo', 'bar', 'baz']
+          },
+          selector: '.p-select.p-component'
+        },
+        {
+          config: {
+            type: 'text',
+            defaultValue: 'Hello'
+          },
+          selector: '.p-inputtext'
+        },
+        {
+          config: {
+            type: 'color',
+            defaultValue: '#000000'
+          },
+          selector: '.p-colorpicker-preview'
+        }
+      ] as const
+
+      for (const { config, selector } of testCases) {
+        test(`${config.type} component should respect disabled attr`, async ({
+          comfyPage
+        }) => {
+          await comfyPage.page.evaluate((config) => {
+            window['app'].registerExtension({
+              name: 'TestExtension1',
+              settings: [
+                {
+                  id: 'Comfy.TestSetting',
+                  name: 'Test',
+                  // The `disabled` attr is common to all settings components
+                  attrs: { disabled: true },
+                  ...config
+                }
+              ]
+            })
+          }, config)
+
+          await comfyPage.settingDialog.open()
+          const component = comfyPage.settingDialog.root
+            .getByText('TestSetting Test')
+            .locator(selector)
+
+          const isDisabled = await component.evaluate((el) =>
+            el.tagName === 'INPUT'
+              ? (el as HTMLInputElement).disabled
+              : el.classList.contains('p-disabled')
+          )
+          expect(isDisabled).toBe(true)
+        })
+      }
+    })
+  })
+
+  test.describe('About panel', () => {
+    test('Should allow adding badges', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          aboutPageBadges: [
+            {
+              label: 'Test Badge',
+              url: 'https://example.com',
+              icon: 'pi pi-box'
+            }
+          ]
+        })
+      })
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.goToAboutPanel()
+      const badge = comfyPage.page.locator('.about-badge').last()
+      expect(badge).toBeDefined()
+      expect(await badge.textContent()).toContain('Test Badge')
+    })
+  })
+
+  test.describe('Dialog', () => {
+    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        void window['app'].extensionManager.dialog
+          .prompt({
+            title: 'Test Prompt',
+            message: 'Test Prompt Message'
+          })
+          .then((value: string) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.fillPromptDialog('Hello, world!')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(
+        'Hello, world!'
+      )
+    })
+
+    test('Should allow showing a confirmation dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        void window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('confirm')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
+    })
+
+    test('Should allow dismissing a dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['value'] = 'foo'
+        void window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('reject')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBeNull()
+    })
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should allow adding commands to selection toolbox', async ({
+      comfyPage
+    }) => {
+      // Register an extension with a selection toolbox command
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          commands: [
+            {
+              id: 'test.selection.command',
+              label: 'Test Command',
+              icon: 'pi pi-star',
+              function: () => {
+                window['selectionCommandExecuted'] = true
+              }
+            }
+          ],
+          getSelectionToolboxCommands: () => ['test.selection.command']
+        })
+      })
+
+      await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+
+      // Click the command button in the selection toolbox
+      const toolboxButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-star)'
+      )
+      await toolboxButton.click()
+
+      // Verify the command was executed
+      expect(
+        await comfyPage.page.evaluate(() => window['selectionCommandExecuted'])
+      ).toBe(true)
+    })
+  })
+})

browser_tests/tests/workbench/featureFlags.spec.ts

@@ -0,0 +1,386 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Feature Flags', () => {
+  test('Client and server exchange feature flags on connection', async ({
+    comfyPage
+  }) => {
+    // Navigate to a new page to capture the initial WebSocket connection
+    const newPage = await comfyPage.page.context().newPage()
+
+    // Set up monitoring before navigation
+    await newPage.addInitScript(() => {
+      // This runs before any page scripts
+      window.__capturedMessages = {
+        clientFeatureFlags: null,
+        serverFeatureFlags: null
+      }
+
+      // Capture outgoing client messages
+      const originalSend = WebSocket.prototype.send
+      WebSocket.prototype.send = function (data) {
+        try {
+          const parsed = JSON.parse(data)
+          if (parsed.type === 'feature_flags') {
+            window.__capturedMessages.clientFeatureFlags = parsed
+          }
+        } catch (e) {
+          // Not JSON, ignore
+        }
+        return originalSend.call(this, data)
+      }
+
+      // Monitor for server feature flags
+      const checkInterval = setInterval(() => {
+        if (
+          window['app']?.api?.serverFeatureFlags &&
+          Object.keys(window['app'].api.serverFeatureFlags).length > 0
+        ) {
+          window.__capturedMessages.serverFeatureFlags =
+            window['app'].api.serverFeatureFlags
+          clearInterval(checkInterval)
+        }
+      }, 100)
+
+      // Clear after 10 seconds
+      setTimeout(() => clearInterval(checkInterval), 10000)
+    })
+
+    // Navigate to the app
+    await newPage.goto(comfyPage.url)
+
+    // Wait for both client and server feature flags
+    await newPage.waitForFunction(
+      () =>
+        window.__capturedMessages.clientFeatureFlags !== null &&
+        window.__capturedMessages.serverFeatureFlags !== null,
+      { timeout: 10000 }
+    )
+
+    // Get the captured messages
+    const messages = await newPage.evaluate(() => window.__capturedMessages)
+
+    // Verify client sent feature flags
+    expect(messages.clientFeatureFlags).toBeTruthy()
+    expect(messages.clientFeatureFlags).toHaveProperty('type', 'feature_flags')
+    expect(messages.clientFeatureFlags).toHaveProperty('data')
+    expect(messages.clientFeatureFlags.data).toHaveProperty(
+      'supports_preview_metadata'
+    )
+    expect(
+      typeof messages.clientFeatureFlags.data.supports_preview_metadata
+    ).toBe('boolean')
+
+    // Verify server sent feature flags back
+    expect(messages.serverFeatureFlags).toBeTruthy()
+    expect(messages.serverFeatureFlags).toHaveProperty(
+      'supports_preview_metadata'
+    )
+    expect(typeof messages.serverFeatureFlags.supports_preview_metadata).toBe(
+      'boolean'
+    )
+    expect(messages.serverFeatureFlags).toHaveProperty('max_upload_size')
+    expect(typeof messages.serverFeatureFlags.max_upload_size).toBe('number')
+    expect(Object.keys(messages.serverFeatureFlags).length).toBeGreaterThan(0)
+
+    await newPage.close()
+  })
+
+  test('Server feature flags are received and accessible', async ({
+    comfyPage
+  }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Get the actual server feature flags from the backend
+    const serverFlags = await comfyPage.page.evaluate(() => {
+      return window['app'].api.serverFeatureFlags
+    })
+
+    // Verify we received real feature flags from the backend
+    expect(serverFlags).toBeTruthy()
+    expect(Object.keys(serverFlags).length).toBeGreaterThan(0)
+
+    // The backend should send feature flags
+    expect(serverFlags).toHaveProperty('supports_preview_metadata')
+    expect(typeof serverFlags.supports_preview_metadata).toBe('boolean')
+    expect(serverFlags).toHaveProperty('max_upload_size')
+    expect(typeof serverFlags.max_upload_size).toBe('number')
+  })
+
+  test('serverSupportsFeature method works with real backend flags', async ({
+    comfyPage
+  }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Test serverSupportsFeature with real backend flags
+    const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
+      return window['app'].api.serverSupportsFeature(
+        'supports_preview_metadata'
+      )
+    })
+    // The method should return a boolean based on the backend's value
+    expect(typeof supportsPreviewMetadata).toBe('boolean')
+
+    // Test non-existent feature - should always return false
+    const supportsNonExistent = await comfyPage.page.evaluate(() => {
+      return window['app'].api.serverSupportsFeature('non_existent_feature_xyz')
+    })
+    expect(supportsNonExistent).toBe(false)
+
+    // Test that the method only returns true for boolean true values
+    const testResults = await comfyPage.page.evaluate(() => {
+      // Temporarily modify serverFeatureFlags to test behavior
+      const original = window['app'].api.serverFeatureFlags
+      window['app'].api.serverFeatureFlags = {
+        bool_true: true,
+        bool_false: false,
+        string_value: 'yes',
+        number_value: 1,
+        null_value: null
+      }
+
+      const results = {
+        bool_true: window['app'].api.serverSupportsFeature('bool_true'),
+        bool_false: window['app'].api.serverSupportsFeature('bool_false'),
+        string_value: window['app'].api.serverSupportsFeature('string_value'),
+        number_value: window['app'].api.serverSupportsFeature('number_value'),
+        null_value: window['app'].api.serverSupportsFeature('null_value')
+      }
+
+      // Restore original
+      window['app'].api.serverFeatureFlags = original
+      return results
+    })
+
+    // serverSupportsFeature should only return true for boolean true values
+    expect(testResults.bool_true).toBe(true)
+    expect(testResults.bool_false).toBe(false)
+    expect(testResults.string_value).toBe(false)
+    expect(testResults.number_value).toBe(false)
+    expect(testResults.null_value).toBe(false)
+  })
+
+  test('getServerFeature method works with real backend data', async ({
+    comfyPage
+  }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Test getServerFeature method
+    const previewMetadataValue = await comfyPage.page.evaluate(() => {
+      return window['app'].api.getServerFeature('supports_preview_metadata')
+    })
+    expect(typeof previewMetadataValue).toBe('boolean')
+
+    // Test getting max_upload_size
+    const maxUploadSize = await comfyPage.page.evaluate(() => {
+      return window['app'].api.getServerFeature('max_upload_size')
+    })
+    expect(typeof maxUploadSize).toBe('number')
+    expect(maxUploadSize).toBeGreaterThan(0)
+
+    // Test getServerFeature with default value for non-existent feature
+    const defaultValue = await comfyPage.page.evaluate(() => {
+      return window['app'].api.getServerFeature(
+        'non_existent_feature_xyz',
+        'default'
+      )
+    })
+    expect(defaultValue).toBe('default')
+  })
+
+  test('getServerFeatures returns all backend feature flags', async ({
+    comfyPage
+  }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
+    // Test getServerFeatures returns all flags
+    const allFeatures = await comfyPage.page.evaluate(() => {
+      return window['app'].api.getServerFeatures()
+    })
+
+    expect(allFeatures).toBeTruthy()
+    expect(allFeatures).toHaveProperty('supports_preview_metadata')
+    expect(typeof allFeatures.supports_preview_metadata).toBe('boolean')
+    expect(allFeatures).toHaveProperty('max_upload_size')
+    expect(Object.keys(allFeatures).length).toBeGreaterThan(0)
+  })
+
+  test('Client feature flags are immutable', async ({ comfyPage }) => {
+    // Test that getClientFeatureFlags returns a copy
+    const immutabilityTest = await comfyPage.page.evaluate(() => {
+      const flags1 = window['app'].api.getClientFeatureFlags()
+      const flags2 = window['app'].api.getClientFeatureFlags()
+
+      // Modify the first object
+      flags1.test_modification = true
+
+      // Get flags again to check if original was modified
+      const flags3 = window['app'].api.getClientFeatureFlags()
+
+      return {
+        areEqual: flags1 === flags2,
+        hasModification: flags3.test_modification !== undefined,
+        hasSupportsPreview: flags1.supports_preview_metadata !== undefined,
+        supportsPreviewValue: flags1.supports_preview_metadata
+      }
+    })
+
+    // Verify they are different objects (not the same reference)
+    expect(immutabilityTest.areEqual).toBe(false)
+
+    // Verify modification didn't affect the original
+    expect(immutabilityTest.hasModification).toBe(false)
+
+    // Verify the flags contain expected properties
+    expect(immutabilityTest.hasSupportsPreview).toBe(true)
+    expect(typeof immutabilityTest.supportsPreviewValue).toBe('boolean') // From clientFeatureFlags.json
+  })
+
+  test('Server features are immutable when accessed via getServerFeatures', async ({
+    comfyPage
+  }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
+    const immutabilityTest = await comfyPage.page.evaluate(() => {
+      // Get a copy of server features
+      const features1 = window['app'].api.getServerFeatures()
+
+      // Try to modify it
+      features1.supports_preview_metadata = false
+      features1.new_feature = 'added'
+
+      // Get another copy
+      const features2 = window['app'].api.getServerFeatures()
+
+      return {
+        modifiedValue: features1.supports_preview_metadata,
+        originalValue: features2.supports_preview_metadata,
+        hasNewFeature: features2.new_feature !== undefined,
+        hasSupportsPreview: features2.supports_preview_metadata !== undefined
+      }
+    })
+
+    // The modification should only affect the copy
+    expect(immutabilityTest.modifiedValue).toBe(false)
+    expect(typeof immutabilityTest.originalValue).toBe('boolean') // Backend sends boolean for supports_preview_metadata
+    expect(immutabilityTest.hasNewFeature).toBe(false)
+    expect(immutabilityTest.hasSupportsPreview).toBe(true)
+  })
+
+  test('Feature flags are negotiated early in connection lifecycle', async ({
+    comfyPage
+  }) => {
+    // This test verifies that feature flags are available early in the app lifecycle
+    // which is important for protocol negotiation
+
+    // Create a new page to ensure clean state
+    const newPage = await comfyPage.page.context().newPage()
+
+    // Set up monitoring before navigation
+    await newPage.addInitScript(() => {
+      // Track when various app components are ready
+      ;(window as any).__appReadiness = {
+        featureFlagsReceived: false,
+        apiInitialized: false,
+        appInitialized: false
+      }
+
+      // Monitor when feature flags arrive by checking periodically
+      const checkFeatureFlags = setInterval(() => {
+        if (
+          window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
+          undefined
+        ) {
+          ;(window as any).__appReadiness.featureFlagsReceived = true
+          clearInterval(checkFeatureFlags)
+        }
+      }, 10)
+
+      // Monitor API initialization
+      const checkApi = setInterval(() => {
+        if (window['app']?.api) {
+          ;(window as any).__appReadiness.apiInitialized = true
+          clearInterval(checkApi)
+        }
+      }, 10)
+
+      // Monitor app initialization
+      const checkApp = setInterval(() => {
+        if (window['app']?.graph) {
+          ;(window as any).__appReadiness.appInitialized = true
+          clearInterval(checkApp)
+        }
+      }, 10)
+
+      // Clean up after 10 seconds
+      setTimeout(() => {
+        clearInterval(checkFeatureFlags)
+        clearInterval(checkApi)
+        clearInterval(checkApp)
+      }, 10000)
+    })
+
+    // Navigate to the app
+    await newPage.goto(comfyPage.url)
+
+    // Wait for feature flags to be received
+    await newPage.waitForFunction(
+      () =>
+        window['app']?.api?.serverFeatureFlags?.supports_preview_metadata !==
+        undefined,
+      {
+        timeout: 10000
+      }
+    )
+
+    // Get readiness state
+    const readiness = await newPage.evaluate(() => {
+      return {
+        ...(window as any).__appReadiness,
+        currentFlags: window['app'].api.serverFeatureFlags
+      }
+    })
+
+    // Verify feature flags are available
+    expect(readiness.currentFlags).toHaveProperty('supports_preview_metadata')
+    expect(typeof readiness.currentFlags.supports_preview_metadata).toBe(
+      'boolean'
+    )
+    expect(readiness.currentFlags).toHaveProperty('max_upload_size')
+
+    // Verify feature flags were received (we detected them via polling)
+    expect(readiness.featureFlagsReceived).toBe(true)
+
+    // Verify API was initialized (feature flags require API)
+    expect(readiness.apiInitialized).toBe(true)
+
+    await newPage.close()
+  })
+
+  test('Backend /features endpoint returns feature flags', async ({
+    comfyPage
+  }) => {
+    // Test the HTTP endpoint directly
+    const response = await comfyPage.page.request.get(
+      `${comfyPage.url}/api/features`
+    )
+    expect(response.ok()).toBe(true)
+
+    const features = await response.json()
+    expect(features).toBeTruthy()
+    expect(features).toHaveProperty('supports_preview_metadata')
+    expect(typeof features.supports_preview_metadata).toBe('boolean')
+    expect(features).toHaveProperty('max_upload_size')
+    expect(Object.keys(features).length).toBeGreaterThan(0)
+  })
+})

browser_tests/tests/workbench/graphCanvasMenu.spec.ts

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Graph Canvas Menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Set link render mode to spline to make sure it's not affected by other tests'
+    // side effects.
+    await comfyPage.setSetting('Comfy.LinkRenderMode', 2)
+    // Enable canvas menu for all tests
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
+  })
+
+  test('Can toggle link visibility', async ({ comfyPage }) => {
+    const button = comfyPage.page.getByTestId('toggle-link-visibility-button')
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-hidden-links.png'
+    )
+    const hiddenLinkRenderMode = await comfyPage.page.evaluate(() => {
+      return window['LiteGraph'].HIDDEN_LINK
+    })
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).toBe(
+      hiddenLinkRenderMode
+    )
+
+    await button.click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'canvas-with-visible-links.png'
+    )
+    expect(await comfyPage.getSetting('Comfy.LinkRenderMode')).not.toBe(
+      hiddenLinkRenderMode
+    )
+  })
+
+  test('Focus mode button is clickable and has correct test id', async ({
+    comfyPage
+  }) => {
+    const focusButton = comfyPage.page.getByTestId('focus-mode-button')
+    await expect(focusButton).toBeVisible()
+    await expect(focusButton).toBeEnabled()
+
+    // Test that the button can be clicked without error
+    await focusButton.click()
+    await comfyPage.nextFrame()
+  })
+
+  test('Zoom controls popup opens and closes', async ({ comfyPage }) => {
+    // Find the zoom button by its percentage text content
+    const zoomButton = comfyPage.page.locator('button').filter({
+      hasText: '%'
+    })
+    await expect(zoomButton).toBeVisible()
+
+    // Click to open zoom controls
+    await zoomButton.click()
+    await comfyPage.nextFrame()
+
+    // Zoom controls modal should be visible
+    const zoomModal = comfyPage.page
+      .locator('div')
+      .filter({
+        hasText: 'Zoom To Fit'
+      })
+      .first()
+    await expect(zoomModal).toBeVisible()
+
+    // Click backdrop to close
+    const backdrop = comfyPage.page.locator('.fixed.inset-0').first()
+    await backdrop.click()
+    await comfyPage.nextFrame()
+
+    // Modal should be hidden
+    await expect(zoomModal).not.toBeVisible()
+  })
+})

browser_tests/tests/workbench/keybindings.spec.ts

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Keybindings', () => {
+  test('Should not trigger non-modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k' }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('k')
+    await expect(textBox).toHaveValue('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      undefined
+    )
+  })
+
+  test('Should not trigger modifier keybinding when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'k', ctrl: true }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.fill('q')
+    await textBox.press('Control+k')
+    await expect(textBox).toHaveValue('q')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+
+  test('Should not trigger keybinding reserved by text input when typing in input fields', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerKeybinding({ key: 'Ctrl+v' }, () => {
+      window['TestCommand'] = true
+    })
+
+    const textBox = comfyPage.widgetTextBox
+    await textBox.click()
+    await textBox.press('Control+v')
+    await expect(textBox).toBeFocused()
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      undefined
+    )
+  })
+})

browser_tests/tests/workbench/menu.spec.ts

@@ -0,0 +1,267 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Can register sidebar tab', async ({ comfyPage }) => {
+    const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
+      (el) => el.children.length
+    )
+
+    await comfyPage.page.evaluate(async () => {
+      window['app'].extensionManager.registerSidebarTab({
+        id: 'search',
+        icon: 'pi pi-search',
+        title: 'search',
+        tooltip: 'search',
+        type: 'custom',
+        render: (el) => {
+          el.innerHTML = '<div>Custom search tab</div>'
+        }
+      })
+    })
+    await comfyPage.nextFrame()
+
+    const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
+      (el) => el.children.length
+    )
+    expect(newChildrenCount).toBe(initialChildrenCount + 1)
+  })
+
+  test.describe('Workflows topbar tabs', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      await comfyPage.setupWorkflowsDirectory({})
+    })
+
+    test('Can show opened workflows', async ({ comfyPage }) => {
+      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
+        'Unsaved Workflow'
+      ])
+    })
+
+    test('Can close saved-workflow tabs', async ({ comfyPage }) => {
+      const workflowName = `tempWorkflow-${test.info().title}`
+      await comfyPage.menu.topbar.saveWorkflow(workflowName)
+      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([workflowName])
+      await comfyPage.menu.topbar.closeWorkflowTab(workflowName)
+      await comfyPage.nextFrame()
+      expect(await comfyPage.menu.topbar.getTabNames()).toEqual([
+        'Unsaved Workflow'
+      ])
+    })
+  })
+
+  test.describe('Topbar submmenus', () => {
+    test('@mobile Items fully visible on mobile screen width', async ({
+      comfyPage
+    }) => {
+      await comfyPage.menu.topbar.openTopbarMenu()
+      const topLevelMenuItem = comfyPage.page
+        .locator('a.p-menubar-item-link')
+        .first()
+      const isTextCutoff = await topLevelMenuItem.evaluate((el) => {
+        return el.scrollWidth > el.clientWidth
+      })
+      expect(isTextCutoff).toBe(false)
+    })
+
+    test('Clicking on active state items does not close menu', async ({
+      comfyPage
+    }) => {
+      // Open the menu
+      await comfyPage.menu.topbar.openTopbarMenu()
+      const menu = comfyPage.page.locator('.comfy-command-menu')
+
+      // Navigate to View menu
+      const viewMenuItem = comfyPage.page.locator(
+        '.p-menubar-item-label:text-is("View")'
+      )
+      await viewMenuItem.hover()
+
+      // Wait for submenu to appear
+      const viewSubmenu = comfyPage.page
+        .locator('.p-tieredmenu-submenu:visible')
+        .first()
+      await viewSubmenu.waitFor({ state: 'visible' })
+
+      // Find Bottom Panel menu item
+      const bottomPanelMenuItem = viewSubmenu
+        .locator('.p-tieredmenu-item:has-text("Bottom Panel")')
+        .first()
+      const bottomPanelItem = bottomPanelMenuItem.locator(
+        '.p-menubar-item-label:text-is("Bottom Panel")'
+      )
+      await bottomPanelItem.waitFor({ state: 'visible' })
+
+      // Get checkmark icon element
+      const checkmark = bottomPanelMenuItem.locator('.pi-check')
+
+      // Check initial state of bottom panel (it's initially hidden)
+      const bottomPanel = comfyPage.page.locator('.bottom-panel')
+      await expect(bottomPanel).not.toBeVisible()
+
+      // Checkmark should be invisible initially (panel is hidden)
+      await expect(checkmark).toHaveClass(/invisible/)
+
+      // Click Bottom Panel to toggle it on
+      await bottomPanelItem.click()
+
+      // Verify menu is still visible after clicking
+      await expect(menu).toBeVisible()
+      await expect(viewSubmenu).toBeVisible()
+
+      // Verify bottom panel is now visible
+      await expect(bottomPanel).toBeVisible()
+
+      // Checkmark should now be visible (panel is shown)
+      await expect(checkmark).not.toHaveClass(/invisible/)
+
+      // Click Bottom Panel again to toggle it off
+      await bottomPanelItem.click()
+
+      // Verify menu is still visible after second click
+      await expect(menu).toBeVisible()
+      await expect(viewSubmenu).toBeVisible()
+
+      // Verify bottom panel is hidden again
+      await expect(bottomPanel).not.toBeVisible()
+
+      // Checkmark should be invisible again (panel is hidden)
+      await expect(checkmark).toHaveClass(/invisible/)
+
+      // Click outside to close menu
+      await comfyPage.page.locator('body').click({ position: { x: 10, y: 10 } })
+
+      // Verify menu is now closed
+      await expect(menu).not.toBeVisible()
+    })
+
+    test('Displays keybinding next to item', async ({ comfyPage }) => {
+      await comfyPage.menu.topbar.openTopbarMenu()
+      const workflowMenuItem = comfyPage.menu.topbar.getMenuItem('File')
+      await workflowMenuItem.hover()
+      const exportTag = comfyPage.page.locator('.keybinding-tag', {
+        hasText: 'Ctrl + s'
+      })
+      expect(await exportTag.count()).toBe(1)
+    })
+
+    test('Can catch error when executing command', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          commands: [
+            {
+              id: 'foo',
+              label: 'foo-command',
+              function: () => {
+                throw new Error('foo!')
+              }
+            }
+          ],
+          menuCommands: [
+            {
+              path: ['ext'],
+              commands: ['foo']
+            }
+          ]
+        })
+      })
+      await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+      expect(await comfyPage.getVisibleToastCount()).toBe(1)
+    })
+
+    test('Can navigate Theme menu and switch between Dark and Light themes', async ({
+      comfyPage
+    }) => {
+      const { topbar } = comfyPage.menu
+
+      // Take initial screenshot with default theme
+      await comfyPage.attachScreenshot('theme-initial')
+
+      // Open the topbar menu
+      const menu = await topbar.openTopbarMenu()
+      await expect(menu).toBeVisible()
+
+      // Get theme menu items
+      const {
+        submenu: themeSubmenu,
+        darkTheme: darkThemeItem,
+        lightTheme: lightThemeItem
+      } = await topbar.getThemeMenuItems()
+
+      await expect(darkThemeItem).toBeVisible()
+      await expect(lightThemeItem).toBeVisible()
+
+      // Switch to Light theme
+      await topbar.switchTheme('light')
+
+      // Verify menu stays open and Light theme shows as active
+      await expect(menu).toBeVisible()
+      await expect(themeSubmenu).toBeVisible()
+
+      // Check that Light theme is active
+      expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
+
+      // Screenshot with light theme active
+      await comfyPage.attachScreenshot('theme-menu-light-active')
+
+      // Verify ColorPalette setting is set to "light"
+      expect(await comfyPage.getSetting('Comfy.ColorPalette')).toBe('light')
+
+      // Close menu to see theme change
+      await topbar.closeTopbarMenu()
+
+      // Re-open menu and get theme items again
+      await topbar.openTopbarMenu()
+      const themeItems2 = await topbar.getThemeMenuItems()
+
+      // Switch back to Dark theme
+      await topbar.switchTheme('dark')
+
+      // Verify menu stays open and Dark theme shows as active
+      await expect(menu).toBeVisible()
+      await expect(themeItems2.submenu).toBeVisible()
+
+      // Check that Dark theme is active and Light theme is not
+      expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
+      expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(false)
+
+      // Screenshot with dark theme active
+      await comfyPage.attachScreenshot('theme-menu-dark-active')
+
+      // Verify ColorPalette setting is set to "dark"
+      expect(await comfyPage.getSetting('Comfy.ColorPalette')).toBe('dark')
+
+      // Close menu
+      await topbar.closeTopbarMenu()
+    })
+  })
+
+  // Only test 'Top' to reduce test time.
+  // ['Bottom', 'Top']
+  ;['Top'].forEach(async (position) => {
+    test(`Can migrate deprecated menu positions (${position})`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', position)
+      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
+    })
+
+    test(`Can migrate deprecated menu positions on initial load (${position})`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', position)
+      await comfyPage.setup()
+      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
+    })
+  })
+})

browser_tests/tests/workbench/minimap.spec.ts

@@ -0,0 +1,93 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.describe('Minimap', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Minimap.Visible', true)
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
+    await comfyPage.loadWorkflow('default')
+    await comfyPage.page.waitForFunction(
+      () => window['app'] && window['app'].canvas
+    )
+  })
+
+  test('Validate minimap is visible by default', async ({ comfyPage }) => {
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+
+    await expect(minimapContainer).toBeVisible()
+
+    const minimapCanvas = minimapContainer.locator('.minimap-canvas')
+    await expect(minimapCanvas).toBeVisible()
+
+    const minimapViewport = minimapContainer.locator('.minimap-viewport')
+    await expect(minimapViewport).toBeVisible()
+
+    await expect(minimapContainer).toHaveCSS('position', 'relative')
+
+    // position and z-index validation moved to the parent container of the minimap
+    const minimapMainContainer = comfyPage.page.locator(
+      '.minimap-main-container'
+    )
+    await expect(minimapMainContainer).toHaveCSS('position', 'absolute')
+    await expect(minimapMainContainer).toHaveCSS('z-index', '1000')
+  })
+
+  test('Validate minimap toggle button state', async ({ comfyPage }) => {
+    // Open zoom controls dropdown first
+    const zoomControlsButton = comfyPage.page.getByTestId(
+      'zoom-controls-button'
+    )
+    await zoomControlsButton.click()
+
+    const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
+
+    await expect(toggleButton).toBeVisible()
+
+    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.locator('.litegraph-minimap')
+
+    // Open zoom controls dropdown first
+    const zoomControlsButton = comfyPage.page.getByTestId(
+      'zoom-controls-button'
+    )
+    await zoomControlsButton.click()
+
+    const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
+
+    await expect(minimapContainer).toBeVisible()
+
+    await toggleButton.click()
+    await comfyPage.nextFrame()
+
+    await expect(minimapContainer).not.toBeVisible()
+    await expect(toggleButton).toContainText('Show Minimap')
+
+    await toggleButton.click()
+    await comfyPage.nextFrame()
+
+    await expect(minimapContainer).toBeVisible()
+    await expect(toggleButton).toContainText('Hide Minimap')
+  })
+
+  test('Validate minimap keyboard shortcut Alt+M', async ({ comfyPage }) => {
+    const minimapContainer = comfyPage.page.locator('.litegraph-minimap')
+
+    await expect(minimapContainer).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Alt+KeyM')
+    await comfyPage.nextFrame()
+
+    await expect(minimapContainer).not.toBeVisible()
+
+    await comfyPage.page.keyboard.press('Alt+KeyM')
+    await comfyPage.nextFrame()
+
+    await expect(minimapContainer).toBeVisible()
+  })
+})

browser_tests/tests/workbench/nodeHelp.spec.ts

@@ -0,0 +1,553 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+
+// TODO: there might be a better solution for this
+// Helper function to pan canvas and select node
+async function selectNodeWithPan(comfyPage: any, nodeRef: any) {
+  const nodePos = await nodeRef.getPosition()
+
+  await comfyPage.page.evaluate((pos) => {
+    const app = window['app']
+    const canvas = app.canvas
+    canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+    canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+    canvas.setDirty(true, true)
+  }, nodePos)
+
+  await comfyPage.nextFrame()
+  await nodeRef.click('title')
+}
+
+test.describe('Node Help', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test('Should open help menu for selected node', async ({ comfyPage }) => {
+      // Load a workflow with a node
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+      await comfyPage.loadWorkflow('default')
+
+      // Select a single node (KSampler) using node references
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      if (ksamplerNodes.length === 0) {
+        throw new Error('No KSampler nodes found in the workflow')
+      }
+
+      // Select the node with panning to ensure toolbox is visible
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Wait for selection toolbox to appear
+      await expect(comfyPage.selectionToolbox).toBeVisible()
+
+      // Click the help button in the selection toolbox
+      const helpButton = comfyPage.selectionToolbox.locator(
+        'button[data-testid="info-button"]'
+      )
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the node library sidebar is opened
+      await expect(
+        comfyPage.menu.nodeLibraryTab.selectedTabButton
+      ).toBeVisible()
+
+      // Verify that the help page is shown for the correct node
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+  })
+
+  test.describe('Node Library Sidebar', () => {
+    test('Should open help menu from node library', async ({ comfyPage }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler to make it easier to find
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find the KSampler node in search results
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await expect(ksamplerNode).toBeVisible()
+
+      // Hover over the node to show action buttons
+      await ksamplerNode.hover()
+
+      // Click the help button
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await expect(helpButton).toBeVisible()
+      await helpButton.click()
+
+      // Verify that the help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+      await expect(helpPage.locator('.node-help-content')).toBeVisible()
+    })
+
+    test('Should show node library tab when clicking back from help page', async ({
+      comfyPage
+    }) => {
+      // Open the node library sidebar
+      await comfyPage.menu.nodeLibraryTab.open()
+
+      // Wait for node library to load
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+
+      // Search for KSampler
+      await comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput.fill(
+        'KSampler'
+      )
+
+      // Find and interact with the node
+      const ksamplerNode = comfyPage.page
+        .locator('.tree-explorer-node-label')
+        .filter({ hasText: 'KSampler' })
+        .first()
+      await ksamplerNode.hover()
+      const helpButton = ksamplerNode.locator('button:has(.pi-question)')
+      await helpButton.click()
+
+      // Verify help page is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler')
+
+      // Click the back button - use a more specific selector
+      const backButton = comfyPage.page.locator('button:has(.pi-arrow-left)')
+      await expect(backButton).toBeVisible()
+      await backButton.click()
+
+      // Verify that we're back to the node library view
+      await expect(comfyPage.menu.nodeLibraryTab.nodeLibraryTree).toBeVisible()
+      await expect(
+        comfyPage.menu.nodeLibraryTab.nodeLibrarySearchBoxInput
+      ).toBeVisible()
+
+      // Verify help page is no longer visible
+      await expect(helpPage.locator('.node-help-content')).not.toBeVisible()
+    })
+  })
+
+  test.describe('Help Content', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should display loading state while fetching help', async ({
+      comfyPage
+    }) => {
+      // Mock slow network response
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        await route.fulfill({
+          status: 200,
+          body: '# Test Help Content\nThis is test help content.'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      // Verify loading spinner is shown
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage.locator('.p-progressspinner')).toBeVisible()
+
+      // Wait for content to load
+      await expect(helpPage).toContainText('Test Help Content')
+    })
+
+    test('Should display fallback content when help file not found', async ({
+      comfyPage
+    }) => {
+      // Mock 404 response for help files
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.fulfill({
+          status: 404,
+          body: 'Not Found'
+        })
+      })
+
+      // Load workflow and select a node
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      // Click help button
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      // Verify fallback content is shown (description, inputs, outputs)
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('Description')
+      await expect(helpPage).toContainText('Inputs')
+      await expect(helpPage).toContainText('Outputs')
+    })
+
+    test('Should render markdown with images correctly', async ({
+      comfyPage
+    }) => {
+      // Mock response with markdown containing images
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Documentation
+
+![Example Image](example.jpg)
+![External Image](https://example.com/image.png)
+
+## Parameters
+- **steps**: Number of steps
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Documentation')
+
+      // Check that relative image paths are prefixed correctly
+      const relativeImage = helpPage.locator('img[alt="Example Image"]')
+      await expect(relativeImage).toBeVisible()
+      await expect(relativeImage).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/example\.jpg/
+      )
+
+      // Check that absolute URLs are not modified
+      const externalImage = helpPage.locator('img[alt="External Image"]')
+      await expect(externalImage).toHaveAttribute(
+        'src',
+        'https://example.com/image.png'
+      )
+    })
+
+    test('Should render video elements with source tags in markdown', async ({
+      comfyPage
+    }) => {
+      // Mock response with video elements
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Demo
+
+<video src="demo.mp4" controls autoplay></video>
+<video src="/absolute/video.mp4" controls></video>
+
+<video controls>
+  <source src="video.mp4" type="video/mp4">
+  <source src="https://example.com/video.webm" type="video/webm">
+</video>
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Check relative video paths are prefixed
+      const relativeVideo = helpPage.locator('video[src*="demo.mp4"]')
+      await expect(relativeVideo).toBeVisible()
+      await expect(relativeVideo).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/demo\.mp4/
+      )
+      await expect(relativeVideo).toHaveAttribute('controls', '')
+      await expect(relativeVideo).toHaveAttribute('autoplay', '')
+
+      // Check absolute paths are not modified
+      const absoluteVideo = helpPage.locator('video[src="/absolute/video.mp4"]')
+      await expect(absoluteVideo).toHaveAttribute('src', '/absolute/video.mp4')
+
+      // Check video source elements
+      const relativeVideoSource = helpPage.locator('source[src*="video.mp4"]')
+      await expect(relativeVideoSource).toHaveAttribute(
+        'src',
+        /.*\/docs\/KSampler\/video\.mp4/
+      )
+
+      const externalVideoSource = helpPage.locator(
+        'source[src="https://example.com/video.webm"]'
+      )
+      await expect(externalVideoSource).toHaveAttribute(
+        'src',
+        'https://example.com/video.webm'
+      )
+    })
+
+    test('Should handle custom node documentation paths', async ({
+      comfyPage
+    }) => {
+      // First load workflow with custom node
+      await comfyPage.loadWorkflow('groupnodes/group_node_v1.3.3')
+
+      // Mock custom node documentation with fallback
+      await comfyPage.page.route(
+        '**/extensions/*/docs/*/en.md',
+        async (route) => {
+          await route.fulfill({ status: 404 })
+        }
+      )
+
+      await comfyPage.page.route('**/extensions/*/docs/*.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Custom Node Documentation
+
+This is documentation for a custom node.
+
+![Custom Image](assets/custom.png)
+`
+        })
+      })
+
+      // Find and select a custom/group node
+      const nodeRefs = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.nodes.map((n: any) => n.id)
+      })
+      if (nodeRefs.length > 0) {
+        const firstNode = await comfyPage.getNodeRefById(nodeRefs[0])
+        await selectNodeWithPan(comfyPage, firstNode)
+      }
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      if (await helpButton.isVisible()) {
+        await helpButton.click()
+
+        const helpPage = comfyPage.page.locator('.sidebar-content-container')
+        await expect(helpPage).toContainText('Custom Node Documentation')
+
+        // Check image path for custom nodes
+        const image = helpPage.locator('img[alt="Custom Image"]')
+        await expect(image).toHaveAttribute(
+          'src',
+          /.*\/extensions\/.*\/docs\/assets\/custom\.png/
+        )
+      }
+    })
+
+    test('Should sanitize dangerous HTML content', async ({ comfyPage }) => {
+      // Mock response with potentially dangerous content
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# Safe Content
+
+<script>alert('XSS')</script>
+<img src="x" onerror="alert('XSS')">
+<a href="javascript:alert('XSS')">Dangerous Link</a>
+<iframe src="evil.com"></iframe>
+
+<!-- Safe content -->
+<video src="safe.mp4" controls></video>
+<img src="safe.jpg" alt="Safe Image">
+`
+        })
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Dangerous elements should be removed
+      await expect(helpPage.locator('script')).toHaveCount(0)
+      await expect(helpPage.locator('iframe')).toHaveCount(0)
+
+      // Check that onerror attribute is removed
+      const images = helpPage.locator('img')
+      const imageCount = await images.count()
+      for (let i = 0; i < imageCount; i++) {
+        const img = images.nth(i)
+        const onError = await img.getAttribute('onerror')
+        expect(onError).toBeNull()
+      }
+
+      // Check that javascript: links are sanitized
+      const links = helpPage.locator('a')
+      const linkCount = await links.count()
+      for (let i = 0; i < linkCount; i++) {
+        const link = links.nth(i)
+        const href = await link.getAttribute('href')
+        if (href !== null) {
+          expect(href).not.toContain('javascript:')
+        }
+      }
+
+      // Safe content should remain
+      await expect(helpPage.locator('video[src*="safe.mp4"]')).toBeVisible()
+      await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
+    })
+
+    test('Should handle locale-specific documentation', async ({
+      comfyPage
+    }) => {
+      // Mock different responses for different locales
+      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSamplerノード
+
+これは日本語のドキュメントです。
+`
+        })
+      })
+
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: `# KSampler Node
+
+This is English documentation.
+`
+        })
+      })
+
+      // Set locale to Japanese
+      await comfyPage.setSetting('Comfy.Locale', 'ja')
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSamplerノード')
+      await expect(helpPage).toContainText('これは日本語のドキュメントです')
+
+      // Reset locale
+      await comfyPage.setSetting('Comfy.Locale', 'en')
+    })
+
+    test('Should handle network errors gracefully', async ({ comfyPage }) => {
+      // Mock network error
+      await comfyPage.page.route('**/docs/**/*.md', async (route) => {
+        await route.abort('failed')
+      })
+
+      await comfyPage.loadWorkflow('default')
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+
+      // Should show fallback content (node description)
+      await expect(helpPage).toBeVisible()
+      await expect(helpPage.locator('.p-progressspinner')).not.toBeVisible()
+
+      // Should show some content even on error
+      const content = await helpPage.textContent()
+      expect(content).toBeTruthy()
+    })
+
+    test('Should update help content when switching between nodes', async ({
+      comfyPage
+    }) => {
+      // Mock different help content for different nodes
+      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+        await route.fulfill({
+          status: 200,
+          body: '# KSampler Help\n\nThis is KSampler documentation.'
+        })
+      })
+
+      await comfyPage.page.route(
+        '**/docs/CheckpointLoaderSimple/en.md',
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: '# Checkpoint Loader Help\n\nThis is Checkpoint Loader documentation.'
+          })
+        }
+      )
+
+      await comfyPage.loadWorkflow('default')
+
+      // Select KSampler first
+      const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+      await selectNodeWithPan(comfyPage, ksamplerNodes[0])
+
+      const helpButton = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton.click()
+
+      const helpPage = comfyPage.page.locator('.sidebar-content-container')
+      await expect(helpPage).toContainText('KSampler Help')
+      await expect(helpPage).toContainText('This is KSampler documentation')
+
+      // Now select Checkpoint Loader
+      const checkpointNodes = await comfyPage.getNodeRefsByType(
+        'CheckpointLoaderSimple'
+      )
+      await selectNodeWithPan(comfyPage, checkpointNodes[0])
+
+      // Click help button again
+      const helpButton2 = comfyPage.page.locator(
+        '.selection-toolbox button[data-testid="info-button"]'
+      )
+      await helpButton2.click()
+
+      // Content should update
+      await expect(helpPage).toContainText('Checkpoint Loader Help')
+      await expect(helpPage).toContainText(
+        'This is Checkpoint Loader documentation'
+      )
+      await expect(helpPage).not.toContainText('KSampler documentation')
+    })
+  })
+})

browser_tests/tests/workbench/nodeSearchBox.spec.ts

@@ -0,0 +1,320 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Node search box', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box')
+    await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box')
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  })
+
+  test(`Can trigger on empty canvas double click`, async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+  })
+
+  test(`Can trigger on group body double click`, async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('groups/single_group_only')
+    await comfyPage.page.mouse.dblclick(50, 50, { delay: 5 })
+    await comfyPage.nextFrame()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+  })
+
+  test('Can trigger on link release', async ({ comfyPage }) => {
+    await comfyPage.disconnectEdge()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+  })
+
+  test('New user (1.24.1+) gets search box by default on link release', async ({
+    comfyPage
+  }) => {
+    // Start fresh to test new user behavior
+    await comfyPage.setup({ clearStorage: true })
+    // Simulate new user with 1.24.1+ installed version
+    await comfyPage.setSetting('Comfy.InstalledVersion', '1.24.1')
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    // Don't set LinkRelease settings explicitly to test versioned defaults
+
+    await comfyPage.disconnectEdge()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+    await expect(comfyPage.searchBox.input).toBeVisible()
+  })
+
+  test('Can add node', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+    await expect(comfyPage.canvas).toHaveScreenshot('added-node.png')
+  })
+
+  test('Can auto link node', async ({ comfyPage }) => {
+    await comfyPage.disconnectEdge()
+    // Select the second item as the first item is always reroute
+    await comfyPage.searchBox.fillAndSelectFirstNode('CLIPTextEncode', {
+      suggestionIndex: 0
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot('auto-linked-node.png')
+  })
+
+  test('Can auto link batch moved node', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('links/batch_move_links')
+
+    const outputSlot1Pos = {
+      x: 304,
+      y: 127
+    }
+    const emptySpacePos = {
+      x: 5,
+      y: 5
+    }
+    await comfyPage.page.keyboard.down('Shift')
+    await comfyPage.dragAndDrop(outputSlot1Pos, emptySpacePos)
+    await comfyPage.page.keyboard.up('Shift')
+
+    // Select the second item as the first item is always reroute
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Checkpoint', {
+      suggestionIndex: 0
+    })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'auto-linked-node-batch.png'
+    )
+  })
+
+  test('Link release connecting to node with no slots', async ({
+    comfyPage
+  }) => {
+    await comfyPage.disconnectEdge()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+    await comfyPage.page.locator('.p-chip-remove-icon').click()
+    await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'added-node-no-connection.png'
+    )
+  })
+
+  test('Has correct aria-labels on search results', async ({ comfyPage }) => {
+    const node = 'Load Checkpoint'
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+    await comfyPage.searchBox.input.fill(node)
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await comfyPage.page.waitForTimeout(500)
+
+    const firstResult = comfyPage.searchBox.dropdown.locator('li').first()
+    await expect(firstResult).toHaveAttribute('aria-label', node)
+  })
+
+  test('@mobile Can trigger on empty canvas tap', async ({ comfyPage }) => {
+    await comfyPage.closeMenu()
+    await comfyPage.loadWorkflow('nodes/single_ksampler')
+    const screenCenter = {
+      x: 200,
+      y: 400
+    }
+    await comfyPage.canvas.tap({
+      position: screenCenter
+    })
+    await comfyPage.canvas.tap({
+      position: screenCenter
+    })
+    await comfyPage.page.waitForTimeout(256)
+    await expect(comfyPage.searchBox.input).not.toHaveCount(0)
+  })
+
+  test.describe('Filtering', () => {
+    const expectFilterChips = async (comfyPage, expectedTexts: string[]) => {
+      const chips = comfyPage.searchBox.filterChips
+
+      // Check that the number of chips matches the expected count
+      await expect(chips).toHaveCount(expectedTexts.length)
+
+      // Verify the text and visibility of each filter chip
+      await Promise.all(
+        expectedTexts.map(async (text, index) => {
+          const chip = chips.nth(index)
+          await expect(chip).toContainText(text)
+          await expect(chip).toBeVisible()
+        })
+      )
+    }
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('Can add filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expectFilterChips(comfyPage, ['MODEL'])
+    })
+
+    // Flaky test.
+    // Sample test failure:
+    // https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/12696912248/job/35391990861?pr=2210
+    /*
+    1) [chromium-2x] › nodeSearchBox.spec.ts:135:5 › Node search box › Filtering › Outer click dismisses filter panel but keeps search box visible
+
+    Error: expect(locator).not.toBeVisible()
+
+    Locator: getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+    Expected: not visible
+    Received: visible
+    Call log:
+      - expect.not.toBeVisible with timeout 5000ms
+      - waiting for getByRole('dialog').locator('div').filter({ hasText: 'Add node filter condition' })
+
+
+      143 |
+      144 |       // Verify the filter selection panel is hidden
+    > 145 |       expect(panel.header).not.toBeVisible()
+          |                                ^
+      146 |
+      147 |       // Verify the node search dialog is still visible
+      148 |       expect(comfyPage.searchBox.input).toBeVisible()
+
+        at /home/runner/work/ComfyUI_frontend/ComfyUI_frontend/ComfyUI_frontend/browser_tests/nodeSearchBox.spec.ts:145:32
+     */
+    test.skip('Outer click dismisses filter panel but keeps search box visible', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.filterButton.click()
+      const panel = comfyPage.searchBox.filterSelectionPanel
+      await panel.header.waitFor({ state: 'visible' })
+      const panelBounds = await panel.header.boundingBox()
+      await comfyPage.page.mouse.click(panelBounds!.x - 10, panelBounds!.y - 10)
+
+      // Verify the filter selection panel is hidden
+      await expect(panel.header).not.toBeVisible()
+
+      // Verify the node search dialog is still visible
+      await expect(comfyPage.searchBox.input).toBeVisible()
+    })
+
+    test('Can add multiple filters', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+      await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
+    })
+
+    test('Can remove filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expectFilterChips(comfyPage, [])
+    })
+
+    test.describe('Removing from multiple filters', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+        await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
+        await comfyPage.searchBox.addFilter('utils', 'Category')
+      })
+
+      test('Can remove first filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['CLIP', 'utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, ['utils'])
+        await comfyPage.searchBox.removeFilter(0)
+        await expectFilterChips(comfyPage, [])
+      })
+
+      test('Can remove middle filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(1)
+        await expectFilterChips(comfyPage, ['MODEL', 'utils'])
+      })
+
+      test('Can remove last filter', async ({ comfyPage }) => {
+        await comfyPage.searchBox.removeFilter(2)
+        await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
+      })
+    })
+  })
+
+  test.describe('Input focus behavior', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.doubleClickCanvas()
+    })
+
+    test('focuses input after adding a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+
+    test('focuses input after removing a filter', async ({ comfyPage }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.removeFilter(0)
+      await expect(comfyPage.searchBox.input).toHaveFocus()
+    })
+  })
+})
+
+test.describe('Release context menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.LinkRelease.Action', 'context menu')
+    await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'search box')
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  })
+
+  test('Can trigger on link release', async ({ comfyPage }) => {
+    await comfyPage.disconnectEdge()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'link-release-context-menu.png'
+    )
+  })
+
+  test('Can search and add node from context menu', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    await comfyPage.disconnectEdge()
+    await comfyMouse.move({ x: 10, y: 10 })
+    await comfyPage.clickContextMenuItem('Search')
+    await comfyPage.searchBox.fillAndSelectFirstNode('CLIP Prompt')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'link-context-menu-search.png'
+    )
+  })
+
+  test('Existing user (pre-1.24.1) gets context menu by default on link release', async ({
+    comfyPage
+  }) => {
+    // Start fresh to test existing user behavior
+    await comfyPage.setup({ clearStorage: true })
+    // Simulate existing user with pre-1.24.1 version
+    await comfyPage.setSetting('Comfy.InstalledVersion', '1.23.0')
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    // Don't set LinkRelease settings explicitly to test versioned defaults
+
+    await comfyPage.disconnectEdge()
+    // Context menu should appear, search box should not
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+    const contextMenu = comfyPage.page.locator('.litecontextmenu')
+    await expect(contextMenu).toBeVisible()
+  })
+
+  test('Explicit setting overrides versioned defaults', async ({
+    comfyPage
+  }) => {
+    // Start fresh and simulate new user who should get search box by default
+    await comfyPage.setup({ clearStorage: true })
+    await comfyPage.setSetting('Comfy.InstalledVersion', '1.24.1')
+    // But explicitly set to context menu (overriding versioned default)
+    await comfyPage.setSetting('Comfy.LinkRelease.Action', 'context menu')
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+    await comfyPage.disconnectEdge()
+    // Context menu should appear due to explicit setting, not search box
+    await expect(comfyPage.searchBox.input).toHaveCount(0)
+    const contextMenu = comfyPage.page.locator('.litecontextmenu')
+    await expect(contextMenu).toBeVisible()
+  })
+})

browser_tests/tests/workbench/rightClickMenu.spec.ts

@@ -0,0 +1,161 @@
+import { expect } from '@playwright/test'
+
+import { NodeBadgeMode } from '../../../src/types/nodeSource'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Canvas Right Click Menu', () => {
+  test('Can add node', async ({ comfyPage }) => {
+    await comfyPage.rightClickCanvas()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
+    await comfyPage.page.getByText('Add Node').click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText('loaders').click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText('Load VAE').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('add-node-node-added.png')
+  })
+
+  test('Can add group', async ({ comfyPage }) => {
+    await comfyPage.rightClickCanvas()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png')
+    await comfyPage.page.getByText('Add Group', { exact: true }).click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png')
+  })
+
+  test('Can convert to group node', async ({ comfyPage }) => {
+    await comfyPage.select2Nodes()
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
+    await comfyPage.rightClickCanvas()
+    await comfyPage.clickContextMenuItem('Convert to Group Node (Deprecated)')
+    await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-group-node.png'
+    )
+  })
+})
+
+test.describe('Node Right Click Menu', () => {
+  test('Can open properties panel', async ({ comfyPage }) => {
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.page.getByText('Properties Panel').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-properties-panel.png'
+    )
+  })
+
+  test('Can collapse', async ({ comfyPage }) => {
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.page.getByText('Collapse').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-collapsed.png'
+    )
+  })
+
+  test('Can collapse (Node Badge)', async ({ comfyPage }) => {
+    await comfyPage.setSetting(
+      'Comfy.NodeBadge.NodeIdBadgeMode',
+      NodeBadgeMode.ShowAll
+    )
+    await comfyPage.setSetting(
+      'Comfy.NodeBadge.NodeSourceBadgeMode',
+      NodeBadgeMode.ShowAll
+    )
+
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.getByText('Collapse').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-collapsed-badge.png'
+    )
+  })
+
+  test('Can bypass', async ({ comfyPage }) => {
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.page.getByText('Bypass').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-bypassed.png'
+    )
+  })
+
+  test('Can pin and unpin', async ({ comfyPage }) => {
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
+    await comfyPage.nextFrame()
+    await comfyPage.dragAndDrop({ x: 621, y: 617 }, { x: 16, y: 16 })
+    await expect(comfyPage.canvas).toHaveScreenshot('node-pinned.png')
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-pinned-node.png'
+    )
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
+    await comfyPage.nextFrame()
+    await comfyPage.rightClickEmptyLatentNode()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-unpinned-node.png'
+    )
+  })
+
+  test('Can move after unpin', async ({ comfyPage }) => {
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
+    await comfyPage.nextFrame()
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(256)
+    await comfyPage.dragAndDrop({ x: 496, y: 618 }, { x: 200, y: 590 })
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-unpinned-node-moved.png'
+    )
+  })
+
+  test('Can pin/unpin selected nodes', async ({ comfyPage }) => {
+    await comfyPage.select2Nodes()
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.click('.litemenu-entry:has-text("Pin")')
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('selected-nodes-pinned.png')
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.click('.litemenu-entry:has-text("Unpin")')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'selected-nodes-unpinned.png'
+    )
+  })
+
+  test('Can clone pinned nodes', async ({ comfyPage }) => {
+    const nodeCount = await comfyPage.getGraphNodesCount()
+    const node = (await comfyPage.getFirstNodeRef())!
+    await node.clickContextMenuOption('Pin')
+    await comfyPage.nextFrame()
+    await node.click('title', { button: 'right' })
+    await expect(
+      comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
+    ).toBeAttached()
+    const cloneItem = comfyPage.page.locator(
+      '.litemenu-entry:has-text("Clone")'
+    )
+    await cloneItem.click()
+    await expect(cloneItem).toHaveCount(0)
+    await comfyPage.nextFrame()
+    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount + 1)
+  })
+})

browser_tests/tests/workbench/selectionToolbox.spec.ts

@@ -0,0 +1,252 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture } from '../../fixtures/ComfyPage'
+
+const test = comfyPageFixture
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+const BLUE_COLOR = 'rgb(51, 51, 85)'
+const RED_COLOR = 'rgb(85, 51, 51)'
+
+test.describe('Selection Toolbox', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+  })
+
+  test('shows selection toolbox', async ({ comfyPage }) => {
+    // By default, selection toolbox should be enabled
+    await expect(comfyPage.selectionToolbox).not.toBeVisible()
+
+    // Select multiple nodes
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    // Selection toolbox should be visible with multiple nodes selected
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    // Border is now drawn on canvas, check via screenshot
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'selection-toolbox-multiple-nodes-border.png'
+    )
+  })
+
+  test('shows at correct position when node is pasted', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.selectNodes(['KSampler'])
+    await comfyPage.ctrlC()
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.ctrlV()
+
+    const toolboxContainer = comfyPage.selectionToolbox
+    await expect(toolboxContainer).toBeVisible()
+
+    // Verify toolbox is positioned (canvas-based positioning has different coordinates)
+    const boundingBox = await toolboxContainer.boundingBox()
+    expect(boundingBox).not.toBeNull()
+    // Canvas-based positioning can vary, just verify toolbox appears in reasonable bounds
+    expect(boundingBox!.x).toBeGreaterThan(-200) // Not too far off-screen left
+    expect(boundingBox!.x).toBeLessThan(1000) // Not too far off-screen right
+    expect(boundingBox!.y).toBeGreaterThan(-100) // Not too far off-screen top
+  })
+
+  test('hide when select and drag happen at the same time', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('nodes/single_ksampler')
+    const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const nodePos = await node.getPosition()
+
+    // Drag on the title of the node
+    await comfyPage.page.mouse.move(nodePos.x + 100, nodePos.y - 15)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
+    await comfyPage.nextFrame()
+    await expect(comfyPage.selectionToolbox).not.toBeVisible()
+  })
+
+  test('shows border only with multiple selections', async ({ comfyPage }) => {
+    // Select single node
+    await comfyPage.selectNodes(['KSampler'])
+
+    // Selection toolbox should be visible but without border
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    // Border is now drawn on canvas, check via screenshot
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'selection-toolbox-single-node-no-border.png'
+    )
+
+    // Select multiple nodes
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    // Selection border should show with multiple selections (canvas-based)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'selection-toolbox-multiple-selections-border.png'
+    )
+
+    // Deselect to single node
+    await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+
+    // Border should be hidden again (canvas-based)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'selection-toolbox-single-selection-no-border.png'
+    )
+  })
+
+  test('displays bypass button in toolbox when nodes are selected', async ({
+    comfyPage
+  }) => {
+    // A group + a KSampler node
+    await comfyPage.loadWorkflow('groups/single_group')
+
+    // Select group + node should show bypass button
+    await comfyPage.page.focus('canvas')
+    await comfyPage.page.keyboard.press('Control+A')
+    await expect(
+      comfyPage.page.locator(
+        '.selection-toolbox *[data-testid="bypass-button"]'
+      )
+    ).toBeVisible()
+
+    // Deselect node (Only group is selected) should hide bypass button
+    await comfyPage.selectNodes(['KSampler'])
+    await expect(
+      comfyPage.page.locator(
+        '.selection-toolbox *[data-testid="bypass-button"]'
+      )
+    ).not.toBeVisible()
+  })
+
+  test.describe('Color Picker', () => {
+    test('displays color picker button and allows color selection', async ({
+      comfyPage
+    }) => {
+      // Select a node
+      await comfyPage.selectNodes(['KSampler'])
+
+      // Color picker button should be visible
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+      await expect(colorPickerButton).toBeVisible()
+
+      // Click color picker button
+      await colorPickerButton.click()
+
+      // Color picker dropdown should be visible
+      const colorPickerDropdown = comfyPage.page.locator(
+        '.color-picker-container'
+      )
+      await expect(colorPickerDropdown).toBeVisible()
+
+      // Select a color (e.g., blue)
+      const blueColorOption = colorPickerDropdown.locator(
+        'i[data-testid="blue"]'
+      )
+      await blueColorOption.click()
+
+      // Dropdown should close after selection
+      await expect(colorPickerDropdown).not.toBeVisible()
+
+      // Node should have the selected color class/style
+      // Note: Exact verification method depends on how color is applied to nodes
+      const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+      expect(await selectedNode.getProperty('color')).not.toBeNull()
+    })
+
+    test('color picker shows current color of selected nodes', async ({
+      comfyPage
+    }) => {
+      // Select multiple nodes
+      await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+
+      // Initially should show default color
+      await expect(colorPickerButton).not.toHaveAttribute('color')
+
+      // Click color picker and select a color
+      await colorPickerButton.click()
+      const redColorOption = comfyPage.page.locator(
+        '.color-picker-container i[data-testid="red"]'
+      )
+      await redColorOption.click()
+
+      // Button should now show the selected color
+      await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
+    })
+
+    test('color picker shows mixed state for differently colored selections', async ({
+      comfyPage
+    }) => {
+      // Select first node and color it
+      await comfyPage.selectNodes(['KSampler'])
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
+        .click()
+      await comfyPage.selectNodes(['KSampler'])
+
+      // Select second node and color it differently
+      await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="red"]')
+        .click()
+
+      // Select both nodes
+      await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+      // Color picker should show null/mixed state
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+      await expect(colorPickerButton).not.toHaveAttribute('color')
+    })
+
+    test('color picker shows correct color when selecting pre-colored node', async ({
+      comfyPage
+    }) => {
+      // First color a node
+      await comfyPage.selectNodes(['KSampler'])
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
+        .click()
+
+      // Clear selection
+      await comfyPage.selectNodes(['KSampler'])
+
+      // Re-select the node
+      await comfyPage.selectNodes(['KSampler'])
+
+      // Color picker button should show the correct color
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+      await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
+    })
+
+    test('colorization via color picker can be undone', async ({
+      comfyPage
+    }) => {
+      // Select a node and color it
+      await comfyPage.selectNodes(['KSampler'])
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
+        .click()
+
+      // Undo the colorization
+      await comfyPage.page.keyboard.press('Control+Z')
+      await comfyPage.nextFrame()
+
+      // Node should be uncolored again
+      const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+      expect(await selectedNode.getProperty('color')).toBeUndefined()
+    })
+  })
+})

browser_tests/tests/workbench/selectionToolboxSubmenus.spec.ts

@@ -0,0 +1,181 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Selection Toolbox - More Options Submenus', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
+    await comfyPage.selectNodes(['KSampler'])
+    await comfyPage.nextFrame()
+  })
+
+  const openMoreOptions = async (comfyPage: any) => {
+    const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
+    if (ksamplerNodes.length === 0) {
+      throw new Error('No KSampler nodes found')
+    }
+
+    // Drag the KSampler to the center of the screen
+    const nodePos = await ksamplerNodes[0].getPosition()
+    const viewportSize = comfyPage.page.viewportSize()
+    const centerX = viewportSize.width / 3
+    const centerY = viewportSize.height / 2
+    await comfyPage.dragAndDrop(
+      { x: nodePos.x, y: nodePos.y },
+      { x: centerX, y: centerY }
+    )
+    await comfyPage.nextFrame()
+
+    await ksamplerNodes[0].click('title')
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(500)
+
+    await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
+      timeout: 5000
+    })
+
+    const moreOptionsBtn = comfyPage.page.locator(
+      '[data-testid="more-options-button"]'
+    )
+    await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
+
+    await comfyPage.page.click('[data-testid="more-options-button"]')
+
+    await comfyPage.nextFrame()
+
+    const menuOptionsVisible = await comfyPage.page
+      .getByText('Rename')
+      .isVisible({ timeout: 2000 })
+      .catch(() => false)
+    if (menuOptionsVisible) {
+      return
+    }
+
+    await moreOptionsBtn.click({ force: true })
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(2000)
+
+    const menuOptionsVisibleAfterClick = await comfyPage.page
+      .getByText('Rename')
+      .isVisible({ timeout: 2000 })
+      .catch(() => false)
+    if (menuOptionsVisibleAfterClick) {
+      return
+    }
+
+    throw new Error('Could not open More Options menu - popover not showing')
+  }
+
+  test('opens Node Info from More Options menu', async ({ comfyPage }) => {
+    await openMoreOptions(comfyPage)
+    const nodeInfoButton = comfyPage.page.getByText('Node Info', {
+      exact: true
+    })
+    await expect(nodeInfoButton).toBeVisible()
+    await nodeInfoButton.click()
+    await comfyPage.nextFrame()
+  })
+
+  test('changes node shape via Shape submenu', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const initialShape = await nodeRef.getProperty<number>('shape')
+
+    await openMoreOptions(comfyPage)
+    await comfyPage.page.getByText('Shape', { exact: true }).click()
+    await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
+      timeout: 5000
+    })
+    await comfyPage.page.getByText('Box', { exact: true }).click()
+    await comfyPage.nextFrame()
+
+    const newShape = await nodeRef.getProperty<number>('shape')
+    expect(newShape).not.toBe(initialShape)
+    expect(newShape).toBe(1)
+  })
+
+  test('changes node color via Color submenu swatch', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const initialColor = await nodeRef.getProperty<string | undefined>('color')
+
+    await openMoreOptions(comfyPage)
+    await comfyPage.page.getByText('Color', { exact: true }).click()
+    const blueSwatch = comfyPage.page.locator('[title="Blue"]')
+    await expect(blueSwatch.first()).toBeVisible({ timeout: 5000 })
+    await blueSwatch.first().click()
+    await comfyPage.nextFrame()
+
+    const newColor = await nodeRef.getProperty<string | undefined>('color')
+    expect(newColor).toBe('#223')
+    if (initialColor) {
+      expect(newColor).not.toBe(initialColor)
+    }
+  })
+
+  test('renames a node using Rename action', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    await openMoreOptions(comfyPage)
+    await comfyPage.page
+      .getByText('Rename', { exact: true })
+      .click({ force: true })
+    const input = comfyPage.page.locator(
+      '.group-title-editor.node-title-editor .editable-text input'
+    )
+    await expect(input).toBeVisible()
+    await input.fill('RenamedNode')
+    await input.press('Enter')
+    await comfyPage.nextFrame()
+    const newTitle = await nodeRef.getProperty<string>('title')
+    expect(newTitle).toBe('RenamedNode')
+  })
+
+  test('closes More Options menu when clicking outside', async ({
+    comfyPage
+  }) => {
+    await openMoreOptions(comfyPage)
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).toBeVisible({ timeout: 5000 })
+
+    await comfyPage.page
+      .locator('#graph-canvas')
+      .click({ position: { x: 0, y: 50 }, force: true })
+    await comfyPage.nextFrame()
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).not.toBeVisible()
+  })
+
+  test('closes More Options menu when clicking the button again (toggle)', async ({
+    comfyPage
+  }) => {
+    await openMoreOptions(comfyPage)
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).toBeVisible({ timeout: 5000 })
+
+    await comfyPage.page.evaluate(() => {
+      const btn = document.querySelector('[data-testid="more-options-button"]')
+      if (btn) {
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          detail: 1
+        })
+        btn.dispatchEvent(event)
+      }
+    })
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(500)
+
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).not.toBeVisible()
+  })
+})

browser_tests/tests/workbench/sidebar/nodeLibrary.spec.ts

@@ -0,0 +1,339 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
+
+test.describe('Node library sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
+    await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {})
+    // Open the sidebar
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.open()
+  })
+
+  test('Node preview and drag to canvas', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('sampling').click()
+
+    // Hover over a node to display the preview
+    const nodeSelector = '.p-tree-node-leaf'
+    await comfyPage.page.hover(nodeSelector)
+
+    // Verify the preview is displayed
+    const previewVisible = await comfyPage.page.isVisible(
+      '.node-lib-node-preview'
+    )
+    expect(previewVisible).toBe(true)
+
+    const count = await comfyPage.getGraphNodesCount()
+    // Drag the node onto the canvas
+    const canvasSelector = '#graph-canvas'
+
+    // Get the bounding box of the canvas element
+    const canvasBoundingBox = (await comfyPage.page
+      .locator(canvasSelector)
+      .boundingBox())!
+
+    // Calculate the center position of the canvas
+    const targetPosition = {
+      x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+      y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+    }
+
+    await comfyPage.page.dragAndDrop(nodeSelector, canvasSelector, {
+      targetPosition
+    })
+
+    // Verify the node is added to the canvas
+    expect(await comfyPage.getGraphNodesCount()).toBe(count + 1)
+  })
+
+  test('Bookmark node', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('sampling').click()
+
+    // Bookmark the node
+    await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
+
+    // Verify the bookmark is added to the bookmarks tab
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['KSamplerAdvanced'])
+    // Verify the bookmark node with the same name is added to the tree.
+    expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
+
+    // Hover on the bookmark node to display the preview
+    await comfyPage.page.hover('.node-lib-bookmark-tree-explorer .tree-leaf')
+    expect(await comfyPage.page.isVisible('.node-lib-node-preview')).toBe(true)
+  })
+
+  test('Ignores unrecognized node', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo'])
+
+    const tab = comfyPage.menu.nodeLibraryTab
+    expect(await tab.getFolder('sampling').count()).toBe(1)
+    expect(await tab.getNode('foo').count()).toBe(0)
+  })
+
+  test('Displays empty bookmarks folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+    expect(await tab.getFolder('foo').count()).toBe(1)
+  })
+
+  test('Can add new bookmark folder', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.newFolderButton.click()
+    const textInput = comfyPage.page.locator('.editable-text input')
+    await textInput.waitFor({ state: 'visible' })
+    await textInput.fill('New Folder')
+    await textInput.press('Enter')
+    expect(await tab.getFolder('New Folder').count()).toBe(1)
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['New Folder/'])
+  })
+
+  test('Can add nested bookmark folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('New Folder').click()
+    const textInput = comfyPage.page.locator('.editable-text input')
+    await textInput.waitFor({ state: 'visible' })
+    await textInput.fill('bar')
+    await textInput.press('Enter')
+
+    expect(await tab.getFolder('bar').count()).toBe(1)
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['foo/', 'foo/bar/'])
+  })
+
+  test('Can delete bookmark folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('Delete').click()
+
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual([])
+  })
+
+  test('Can rename bookmark folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu-item-label:has-text("Rename")')
+      .click()
+    await comfyPage.page.keyboard.insertText('bar')
+    await comfyPage.page.keyboard.press('Enter')
+
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['bar/'])
+  })
+
+  test('Can add bookmark by dragging node to bookmark folder', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('sampling').click()
+    await comfyPage.page.dragAndDrop(
+      tab.nodeSelector('KSampler (Advanced)'),
+      tab.folderSelector('foo')
+    )
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['foo/', 'foo/KSamplerAdvanced'])
+  })
+
+  test('Can add bookmark by clicking bookmark button', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('sampling').click()
+    await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['KSamplerAdvanced'])
+  })
+
+  test('Can unbookmark node (Top level bookmark)', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+      'KSamplerAdvanced'
+    ])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getNode('KSampler (Advanced)').locator('.bookmark-button').click()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual([])
+  })
+
+  test('Can unbookmark node (Library node bookmark)', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+      'KSamplerAdvanced'
+    ])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('sampling').click()
+    await comfyPage.page
+      .locator(tab.nodeSelector('KSampler (Advanced)'))
+      .nth(1)
+      .locator('.bookmark-button')
+      .click()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual([])
+  })
+  test('Can customize icon', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('Customize').click()
+    await comfyPage.page
+      .locator('.icon-field .p-selectbutton > *:nth-child(2)')
+      .click()
+    await comfyPage.page
+      .locator('.color-field .p-selectbutton > *:nth-child(2)')
+      .click()
+    await comfyPage.page.getByLabel('Confirm').click()
+    await comfyPage.nextFrame()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+    ).toEqual({
+      'foo/': {
+        icon: 'pi-folder',
+        color: '#007bff'
+      }
+    })
+  })
+  // If color is left as default, it should not be saved
+  test('Can customize icon (default field)', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('Customize').click()
+    await comfyPage.page
+      .locator('.icon-field .p-selectbutton > *:nth-child(2)')
+      .click()
+    await comfyPage.page.getByLabel('Confirm').click()
+    await comfyPage.nextFrame()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+    ).toEqual({
+      'foo/': {
+        icon: 'pi-folder'
+      }
+    })
+  })
+
+  test('Can customize bookmark color after interacting with color options', async ({
+    comfyPage
+  }) => {
+    // Open customization dialog
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('Customize').click()
+
+    // Click a color option multiple times
+    const customColorOption = comfyPage.page.locator(
+      '.p-togglebutton-content > .pi-palette'
+    )
+    await customColorOption.click()
+    await customColorOption.click()
+
+    // Use the color picker
+    await comfyPage.page
+      .getByLabel('Customize Folder')
+      .getByRole('textbox')
+      .click()
+    await comfyPage.page.locator('.p-colorpicker-color-background').click()
+
+    // Finalize the customization
+    await comfyPage.page
+      .locator('.icon-field .p-selectbutton > *:nth-child(2)')
+      .click()
+    await comfyPage.page.getByLabel('Confirm').click()
+    await comfyPage.nextFrame()
+
+    // Verify the color selection is saved
+    const setting = await comfyPage.getSetting(
+      'Comfy.NodeLibrary.BookmarksCustomization'
+    )
+    await expect(setting).toHaveProperty(['foo/', 'color'])
+    await expect(setting['foo/'].color).not.toBeNull()
+    await expect(setting['foo/'].color).not.toBeUndefined()
+    await expect(setting['foo/'].color).not.toBe('')
+  })
+
+  test('Can rename customized bookmark folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
+      'foo/': {
+        icon: 'pi-folder',
+        color: '#007bff'
+      }
+    })
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu-item-label:has-text("Rename")')
+      .click()
+    await comfyPage.page.keyboard.insertText('bar')
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.nextFrame()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['bar/'])
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+    ).toEqual({
+      'bar/': {
+        icon: 'pi-folder',
+        color: '#007bff'
+      }
+    })
+  })
+
+  test('Can delete customized bookmark folder', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+    await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
+      'foo/': {
+        icon: 'pi-folder',
+        color: '#007bff'
+      }
+    })
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.getFolder('foo').click({ button: 'right' })
+    await comfyPage.page.getByLabel('Delete').click()
+    await comfyPage.nextFrame()
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual([])
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+    ).toEqual({})
+  })
+
+  test('Can filter nodes in both trees', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+      'foo/',
+      'foo/KSamplerAdvanced',
+      'KSampler'
+    ])
+
+    const tab = comfyPage.menu.nodeLibraryTab
+    await tab.nodeLibrarySearchBoxInput.fill('KSampler')
+    // Node search box is debounced and may take some time to update.
+    await comfyPage.page.waitForTimeout(1000)
+    expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
+  })
+})

browser_tests/tests/workbench/sidebar/queue.spec.ts

@@ -0,0 +1,210 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
+
+test.describe.skip('Queue sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('can display tasks', async ({ comfyPage }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test('can display tasks after closing then opening', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.close()
+    await comfyPage.menu.queueTab.open()
+    await comfyPage.menu.queueTab.waitForTasks()
+    expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+  })
+
+  test.describe('Virtual scroll', () => {
+    const layouts = [
+      { description: 'Five columns layout', width: 95, rows: 3, cols: 5 },
+      { description: 'Three columns layout', width: 55, rows: 3, cols: 3 },
+      { description: 'Two columns layout', width: 40, rows: 3, cols: 2 }
+    ]
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(50)
+        .setupRoutes()
+    })
+
+    layouts.forEach(({ description, width, rows, cols }) => {
+      const preRenderedRows = 1
+      const preRenderedTasks = preRenderedRows * cols * 2
+      const visibleTasks = rows * cols
+      const expectRenderLimit = visibleTasks + preRenderedTasks
+
+      test.describe(description, () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.menu.queueTab.setTabWidth(width)
+          await comfyPage.menu.queueTab.open()
+          await comfyPage.menu.queueTab.waitForTasks()
+        })
+
+        test('should not render items outside of view', async ({
+          comfyPage
+        }) => {
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should teardown items after scrolling away', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+
+        test('should re-render items after scrolling away then back', async ({
+          comfyPage
+        }) => {
+          await comfyPage.menu.queueTab.scrollTasks('down')
+          await comfyPage.menu.queueTab.scrollTasks('up')
+          const renderedCount =
+            await comfyPage.menu.queueTab.visibleTasks.count()
+          expect(renderedCount).toBeLessThanOrEqual(expectRenderLimit)
+        })
+      })
+    })
+  })
+
+  test.describe('Expand tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // 2-item batch and 3-item batch -> 3 additional items when expanded
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp', 'example.webp', 'example.webp'])
+        .withTask(['example.webp', 'example.webp'])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+    })
+
+    test('can expand tasks with multiple outputs', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount + 3
+      )
+    })
+
+    test('can collapse flat tasks', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.menu.queueTab.visibleTasks.count()
+      await comfyPage.menu.queueTab.expandTasks()
+      await comfyPage.menu.queueTab.collapseTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(
+        initialCount
+      )
+    })
+  })
+
+  test.describe('Clear tasks', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask(['example.webp'])
+        .repeat(6)
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+    })
+
+    test('can clear all tasks', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(0)
+      expect(
+        await comfyPage.menu.queueTab.noResultsPlaceholder.isVisible()
+      ).toBe(true)
+    })
+
+    test('can load new tasks after clearing all', async ({ comfyPage }) => {
+      await comfyPage.menu.queueTab.clearTasks()
+      await comfyPage.menu.queueTab.close()
+      await comfyPage.setupHistory().withTask(['example.webp']).setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      expect(await comfyPage.menu.queueTab.visibleTasks.count()).toBe(1)
+    })
+  })
+
+  test.describe('Gallery', () => {
+    const firstImage = 'example.webp'
+    const secondImage = 'image32x32.webp'
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage
+        .setupHistory()
+        .withTask([secondImage])
+        .withTask([firstImage])
+        .setupRoutes()
+      await comfyPage.menu.queueTab.open()
+      await comfyPage.menu.queueTab.waitForTasks()
+      await comfyPage.menu.queueTab.openTaskPreview(0)
+    })
+
+    test('displays gallery image after opening task preview', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nextFrame()
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
+    })
+
+    test('maintains active gallery item when new tasks are added', async ({
+      comfyPage
+    }) => {
+      // Add a new task while the gallery is still open
+      const newImage = 'image64x64.webp'
+      comfyPage.setupHistory().withTask([newImage])
+      await comfyPage.menu.queueTab.triggerTasksUpdate()
+      await comfyPage.page.waitForTimeout(500)
+      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
+      await newTask.waitFor({ state: 'visible' })
+      // The active gallery item should still be the initial image
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
+    })
+
+    test.describe('Gallery navigation', () => {
+      const paths: {
+        description: string
+        path: ('Right' | 'Left')[]
+        end: string
+      }[] = [
+        { description: 'Right', path: ['Right'], end: secondImage },
+        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
+        { description: 'Left wrap', path: ['Left'], end: secondImage },
+        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
+      ]
+
+      paths.forEach(({ description, path, end }) => {
+        test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
+          for (const direction of path)
+            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
+              delay: 256
+            })
+          await comfyPage.nextFrame()
+          await expect(
+            comfyPage.menu.queueTab.getGalleryImage(end)
+          ).toBeVisible()
+        })
+      })
+    })
+  })
+})

browser_tests/tests/workbench/sidebar/workflows.spec.ts

@@ -0,0 +1,369 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
+
+test.describe('Workflows sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Workflow.WorkflowTabsPosition', 'Sidebar')
+
+    // Open the sidebar
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({})
+  })
+
+  test('Can create new blank workflow', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
+
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      '*Unsaved Workflow (2).json'
+    ])
+  })
+
+  test('Can show top level saved workflows', async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({
+      'workflow1.json': 'default.json',
+      'workflow2.json': 'default.json'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+    expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
+      expect.arrayContaining(['workflow1.json', 'workflow2.json'])
+    )
+  })
+
+  test('Can duplicate workflow', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+
+    expect(await tab.getTopLevelSavedWorkflowNames()).toEqual(
+      expect.arrayContaining(['workflow1.json'])
+    )
+
+    await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      'workflow1.json',
+      '*workflow1 (Copy).json'
+    ])
+
+    await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json'
+    ])
+
+    await comfyPage.executeCommand('Comfy.DuplicateWorkflow')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      'workflow1.json',
+      '*workflow1 (Copy).json',
+      '*workflow1 (Copy) (2).json',
+      '*workflow1 (Copy) (3).json'
+    ])
+  })
+
+  test('Can open workflow after insert', async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({
+      'workflow1.json': 'nodes/single_ksampler.json'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+    await comfyPage.executeCommand('Comfy.LoadDefaultWorkflow')
+    const originalNodeCount = (await comfyPage.getNodes()).length
+
+    await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
+    await comfyPage.nextFrame()
+    expect((await comfyPage.getNodes()).length).toEqual(originalNodeCount + 1)
+
+    await tab.getPersistedItem('workflow1.json').click()
+    await comfyPage.nextFrame()
+    expect((await comfyPage.getNodes()).length).toEqual(1)
+  })
+
+  test('Can rename nested workflow from opened workflow item', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setupWorkflowsDirectory({
+      foo: {
+        'bar.json': 'default.json'
+      }
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+    // Switch to the parent folder
+    await tab.getPersistedItem('foo').click()
+    await comfyPage.page.waitForTimeout(300)
+    // Switch to the nested workflow
+    await tab.getPersistedItem('bar').click()
+    await comfyPage.page.waitForTimeout(300)
+
+    const openedWorkflow = tab.getOpenedItem('foo/bar')
+    await tab.renameWorkflow(openedWorkflow, 'foo/baz')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      'foo/baz.json'
+    ])
+  })
+
+  test('Can save workflow as', async ({ comfyPage }) => {
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      'workflow3.json'
+    ])
+
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      'workflow3.json',
+      'workflow4.json'
+    ])
+  })
+
+  test('Exported workflow does not contain localized slot names', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('default')
+    const exportedWorkflow = await comfyPage.getExportedWorkflow({
+      api: false
+    })
+    expect(exportedWorkflow).toBeDefined()
+    for (const node of exportedWorkflow.nodes) {
+      for (const slot of node.inputs) {
+        expect(slot.localized_name).toBeUndefined()
+        expect(slot.label).toBeUndefined()
+      }
+      for (const slot of node.outputs) {
+        expect(slot.localized_name).toBeUndefined()
+        expect(slot.label).toBeUndefined()
+      }
+    }
+  })
+
+  test('Can export same workflow with different locales', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('default')
+
+    // Setup download listener before triggering the export
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await comfyPage.menu.topbar.exportWorkflow('exported_default.json')
+
+    // Wait for the download and get the file content
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('exported_default.json')
+
+    // Get the exported workflow content
+    const downloadedContent = await comfyPage.getExportedWorkflow({
+      api: false
+    })
+
+    await comfyPage.setSetting('Comfy.Locale', 'zh')
+    await comfyPage.setup()
+
+    const downloadedContentZh = await comfyPage.getExportedWorkflow({
+      api: false
+    })
+
+    // Compare the exported workflow with the original
+    delete downloadedContent.id
+    delete downloadedContentZh.id
+    expect(downloadedContent).toBeDefined()
+    expect(downloadedContent).toEqual(downloadedContentZh)
+  })
+
+  test('Can save workflow as with same name', async ({ comfyPage }) => {
+    await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow5.json'
+    ])
+
+    await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
+    await comfyPage.confirmDialog.click('overwrite')
+    await comfyPage.page.waitForTimeout(200)
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow5.json'
+    ])
+  })
+
+  test('Can save temporary workflow with unmodified name', async ({
+    comfyPage
+  }) => {
+    expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+
+    await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
+    // Should not trigger the overwrite dialog
+    expect(
+      await comfyPage.page.locator('.comfy-modal-content:visible').count()
+    ).toBe(0)
+
+    expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+  })
+
+  test('Can overwrite other workflows with save as', async ({ comfyPage }) => {
+    const topbar = comfyPage.menu.topbar
+    await topbar.saveWorkflow('workflow1.json')
+    await topbar.saveWorkflowAs('workflow2.json')
+    await comfyPage.nextFrame()
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow1.json',
+      'workflow2.json'
+    ])
+    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+      'workflow2.json'
+    )
+
+    await topbar.saveWorkflowAs('workflow1.json')
+    await comfyPage.confirmDialog.click('overwrite')
+    await comfyPage.page.waitForTimeout(200)
+    // The old workflow1.json should be deleted and the new one should be saved.
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      'workflow2.json',
+      'workflow1.json'
+    ])
+    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
+      'workflow1.json'
+    )
+  })
+
+  test('Does not report warning when switching between opened workflows', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+    await comfyPage.closeDialog()
+
+    // Load blank workflow
+    await comfyPage.menu.workflowsTab.open()
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+
+    // Switch back to the missing_nodes workflow
+    await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
+
+    await expect(
+      comfyPage.page.locator('.comfy-missing-nodes')
+    ).not.toBeVisible()
+  })
+
+  test('Can close saved-workflows from the open workflows section', async ({
+    comfyPage
+  }) => {
+    await comfyPage.menu.topbar.saveWorkflow(
+      `tempWorkflow-${test.info().title}`
+    )
+    const closeButton = comfyPage.page.locator(
+      '.comfyui-workflows-open .close-workflow-button'
+    )
+    await closeButton.click()
+    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
+  })
+
+  test('Can close saved workflow with command', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.workflowsTab
+    await comfyPage.menu.topbar.saveWorkflow('workflow1.json')
+    await comfyPage.executeCommand('Workspace.CloseWorkflow')
+    expect(await tab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
+  })
+
+  test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Workflow.ConfirmDelete', false)
+
+    const { topbar, workflowsTab } = comfyPage.menu
+
+    const filename = 'workflow18.json'
+    await topbar.saveWorkflow(filename)
+    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+
+    await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
+    await comfyPage.nextFrame()
+    await comfyPage.clickContextMenuItem('Delete')
+
+    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
+    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
+  })
+
+  test('Can delete workflows', async ({ comfyPage }) => {
+    const { topbar, workflowsTab } = comfyPage.menu
+
+    const filename = 'workflow18.json'
+    await topbar.saveWorkflow(filename)
+    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
+
+    await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
+    await comfyPage.clickContextMenuItem('Delete')
+
+    await comfyPage.confirmDialog.click('delete')
+
+    await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
+    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json'
+    ])
+  })
+
+  test('Can duplicate workflow from context menu', async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({
+      'workflow1.json': 'default.json'
+    })
+
+    const { workflowsTab } = comfyPage.menu
+    await workflowsTab.open()
+
+    await workflowsTab
+      .getPersistedItem('workflow1.json')
+      .click({ button: 'right' })
+    await comfyPage.clickContextMenuItem('Duplicate')
+
+    expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
+      '*Unsaved Workflow.json',
+      '*workflow1 (Copy).json'
+    ])
+  })
+
+  test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
+    await comfyPage.setupWorkflowsDirectory({
+      'workflow1.json': 'default.json'
+    })
+
+    await comfyPage.menu.workflowsTab.open()
+
+    const nodeCount = await comfyPage.getGraphNodesCount()
+
+    // Get the bounding box of the canvas element
+    const canvasBoundingBox = (await comfyPage.page
+      .locator('#graph-canvas')
+      .boundingBox())!
+
+    // Calculate the center position of the canvas
+    const targetPosition = {
+      x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+      y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+    }
+
+    await comfyPage.page.dragAndDrop(
+      '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
+      '#graph-canvas',
+      { targetPosition }
+    )
+    // Wait for the workflow to be inserted
+    await comfyPage.page.waitForTimeout(200)
+    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
+  })
+})

browser_tests/tests/workbench/subgraph-rename-dialog.spec.ts

@@ -0,0 +1,157 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+// Constants
+const INITIAL_NAME = 'initial_slot_name'
+const RENAMED_NAME = 'renamed_slot_name'
+const SECOND_RENAMED_NAME = 'second_renamed_name'
+
+// Common selectors
+const SELECTORS = {
+  promptDialog: '.graphdialog input'
+} as const
+
+test.describe('Subgraph Slot Rename Dialog', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  test('Shows current slot label (not stale) in rename dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('subgraphs/basic-subgraph')
+
+    const subgraphNode = await comfyPage.getNodeRefById('2')
+    await subgraphNode.navigateIntoSubgraph()
+
+    // Get initial slot label
+    const initialInputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.inputs?.[0]?.label || graph.inputs?.[0]?.name || null
+    })
+
+    // First rename
+    await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Clear and enter new name
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Verify the rename worked
+    const afterFirstRename = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      const slot = graph.inputs?.[0]
+      return {
+        label: slot?.label || null,
+        name: slot?.name || null,
+        displayName: slot?.displayName || slot?.label || slot?.name || null
+      }
+    })
+    expect(afterFirstRename.label).toBe(RENAMED_NAME)
+
+    // Now rename again - this is where the bug would show
+    // We need to use the index-based approach since the method looks for slot.name
+    await comfyPage.rightClickSubgraphInputSlot()
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Get the current value in the prompt dialog
+    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
+
+    // This should show the current label (RENAMED_NAME), not the original name
+    expect(dialogValue).toBe(RENAMED_NAME)
+    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
+
+    // Complete the second rename to ensure everything still works
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Verify the second rename worked
+    const afterSecondRename = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.inputs?.[0]?.label || null
+    })
+    expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
+  })
+
+  test('Shows current output slot label in rename dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('subgraphs/basic-subgraph')
+
+    const subgraphNode = await comfyPage.getNodeRefById('2')
+    await subgraphNode.navigateIntoSubgraph()
+
+    // Get initial output slot label
+    const initialOutputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.outputs?.[0]?.label || graph.outputs?.[0]?.name || null
+    })
+
+    // First rename
+    await comfyPage.rightClickSubgraphOutputSlot(initialOutputLabel)
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Clear and enter new name
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Now rename again to check for stale content
+    // We need to use the index-based approach since the method looks for slot.name
+    await comfyPage.rightClickSubgraphOutputSlot()
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Get the current value in the prompt dialog
+    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
+
+    // This should show the current label (RENAMED_NAME), not the original name
+    expect(dialogValue).toBe(RENAMED_NAME)
+  })
+})

browser_tests/tests/workbench/templates.spec.ts

@@ -0,0 +1,318 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+async function checkTemplateFileExists(
+  page: Page,
+  filename: string
+): Promise<boolean> {
+  const response = await page.request.head(
+    new URL(`/templates/${filename}`, page.url()).toString()
+  )
+  return response.ok()
+}
+
+test.describe('Templates', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', false)
+  })
+
+  test('should have a JSON workflow file for each template', async ({
+    comfyPage
+  }) => {
+    test.slow()
+    const templates = await comfyPage.templates.getAllTemplates()
+    for (const template of templates) {
+      const exists = await checkTemplateFileExists(
+        comfyPage.page,
+        `${template.name}.json`
+      )
+      expect(exists, `Missing workflow: ${template.name}`).toBe(true)
+    }
+  })
+
+  // TODO: Re-enable this test once issue resolved
+  // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3992
+  test.skip('should have all required thumbnail media for each template', async ({
+    comfyPage
+  }) => {
+    test.slow()
+    const templates = await comfyPage.templates.getAllTemplates()
+    for (const template of templates) {
+      const { name, mediaSubtype, thumbnailVariant } = template
+      const baseMedia = `${name}-1.${mediaSubtype}`
+
+      // Check base thumbnail
+      const baseExists = await checkTemplateFileExists(
+        comfyPage.page,
+        baseMedia
+      )
+      expect(baseExists, `Missing base thumbnail: ${baseMedia}`).toBe(true)
+
+      // Check second thumbnail for variants that need it
+      if (
+        thumbnailVariant === 'compareSlider' ||
+        thumbnailVariant === 'hoverDissolve'
+      ) {
+        const secondMedia = `${name}-2.${mediaSubtype}`
+        const secondExists = await checkTemplateFileExists(
+          comfyPage.page,
+          secondMedia
+        )
+        expect(
+          secondExists,
+          `Missing second thumbnail: ${secondMedia} required for ${thumbnailVariant}`
+        ).toBe(true)
+      }
+    }
+  })
+
+  test('Can load template workflows', async ({ comfyPage }) => {
+    // Clear the workflow
+    await comfyPage.menu.workflowsTab.open()
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 250 })
+
+    // Load a template
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    await comfyPage.page
+      .locator(
+        'nav > div:nth-child(2) > div > span:has-text("Getting Started")'
+      )
+      .click()
+    await comfyPage.templates.loadTemplate('default')
+    await expect(comfyPage.templates.content).toBeHidden()
+
+    // Ensure we now have some nodes
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBeGreaterThan(0)
+    }).toPass({ timeout: 250 })
+  })
+
+  test('dialog should be automatically shown to first-time users', async ({
+    comfyPage
+  }) => {
+    // Set the tutorial as not completed to mark the user as a first-time user
+    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
+
+    // Load the page
+    await comfyPage.setup({ clearStorage: true })
+
+    // Expect the templates dialog to be shown
+    expect(await comfyPage.templates.content.isVisible()).toBe(true)
+  })
+
+  test('Uses proper locale files for templates', async ({ comfyPage }) => {
+    // Set locale to French before opening templates
+    await comfyPage.setSetting('Comfy.Locale', 'fr')
+
+    // Load the templates dialog and wait for the French index file request
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.fr.json'
+    )
+
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+
+    const request = await requestPromise
+
+    // Verify French index was requested
+    expect(request.url()).toContain('templates/index.fr.json')
+
+    await expect(comfyPage.templates.content).toBeVisible()
+  })
+
+  test('Falls back to English templates when locale file not found', async ({
+    comfyPage
+  }) => {
+    // Set locale to a language that doesn't have a template file
+    await comfyPage.setSetting('Comfy.Locale', 'de') // German - no index.de.json exists
+
+    // Wait for the German request (expected to 404)
+    const germanRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.de.json'
+    )
+
+    // Wait for the fallback English request
+    const englishRequestPromise = comfyPage.page.waitForRequest(
+      '**/templates/index.json'
+    )
+
+    // Intercept the German file to simulate a 404
+    await comfyPage.page.route('**/templates/index.de.json', async (route) => {
+      await route.fulfill({
+        status: 404,
+        headers: { 'Content-Type': 'text/plain' },
+        body: 'Not Found'
+      })
+    })
+
+    // Allow the English index to load normally
+    await comfyPage.page.route('**/templates/index.json', (route) =>
+      route.continue()
+    )
+
+    // Load the templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Verify German was requested first, then English as fallback
+    const germanRequest = await germanRequestPromise
+    const englishRequest = await englishRequestPromise
+
+    expect(germanRequest.url()).toContain('templates/index.de.json')
+    expect(englishRequest.url()).toContain('templates/index.json')
+
+    // Verify English titles are shown as fallback
+    await expect(
+      comfyPage.templates.content.getByRole('heading', {
+        name: 'Image Generation'
+      })
+    ).toBeVisible()
+  })
+
+  test('template cards are dynamically sized and responsive', async ({
+    comfyPage
+  }) => {
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await comfyPage.templates.content.waitFor({ state: 'visible' })
+
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
+
+    const cardCount = await comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .count()
+    expect(cardCount).toBeGreaterThan(0)
+    await expect(templateGrid).toBeVisible()
+    await expect(nav).toBeVisible() // Nav should be visible at desktop size
+
+    const mobileSize = { width: 640, height: 800 }
+    await comfyPage.page.setViewportSize(mobileSize)
+    expect(cardCount).toBeGreaterThan(0)
+    await expect(templateGrid).toBeVisible()
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+
+    const tabletSize = { width: 1024, height: 800 }
+    await comfyPage.page.setViewportSize(tabletSize)
+    expect(cardCount).toBeGreaterThan(0)
+    await expect(templateGrid).toBeVisible()
+    await expect(nav).toBeVisible() // Nav should be visible at tablet size
+  })
+
+  test('template cards descriptions adjust height dynamically', async ({
+    comfyPage
+  }) => {
+    // Setup test by intercepting templates response to inject cards with varying description lengths
+    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
+      const response = [
+        {
+          moduleName: 'default',
+          title: 'Test Templates',
+          type: 'image',
+          templates: [
+            {
+              name: 'short-description',
+              title: 'Short Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description: 'This is a short description.'
+            },
+            {
+              name: 'medium-description',
+              title: 'Medium Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a medium length description that should take up two lines on most displays.'
+            },
+            {
+              name: 'long-description',
+              title: 'Long Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a much longer description that should definitely wrap to multiple lines. It contains enough text to demonstrate how the cards handle varying amounts of content while maintaining a consistent layout grid.'
+            }
+          ]
+        }
+      ]
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(response),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    })
+
+    // Mock the thumbnail images to avoid 404s
+    await comfyPage.page.route('**/templates/**.webp', async (route) => {
+      const headers = {
+        'Content-Type': 'image/webp',
+        'Cache-Control': 'no-store'
+      }
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers
+      })
+    })
+
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Wait for cards to load
+    await expect(
+      comfyPage.page.locator(
+        '[data-testid="template-workflow-short-description"]'
+      )
+    ).toBeVisible({ timeout: 5000 })
+
+    // Verify all three cards with different descriptions are visible
+    const shortDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-short-description"]'
+    )
+    const mediumDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-medium-description"]'
+    )
+    const longDescCard = comfyPage.page.locator(
+      '[data-testid="template-workflow-long-description"]'
+    )
+
+    await expect(shortDescCard).toBeVisible()
+    await expect(mediumDescCard).toBeVisible()
+    await expect(longDescCard).toBeVisible()
+
+    // Verify descriptions are visible and have line-clamp class
+    // The description is in a p tag with text-muted class
+    const shortDesc = shortDescCard.locator('p.text-muted.line-clamp-2')
+    const mediumDesc = mediumDescCard.locator('p.text-muted.line-clamp-2')
+    const longDesc = longDescCard.locator('p.text-muted.line-clamp-2')
+
+    await expect(shortDesc).toContainText('short description')
+    await expect(mediumDesc).toContainText('medium length description')
+    await expect(longDesc).toContainText('much longer description')
+
+    // Verify grid layout maintains consistency
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot(
+      'template-grid-varying-content.png'
+    )
+  })
+})

browser_tests/tests/workbench/useSettingSearch.spec.ts

@@ -0,0 +1,293 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Settings Search functionality', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    // Register test settings to verify hidden/deprecated filtering
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestSettingsExtension',
+        settings: [
+          {
+            id: 'TestHiddenSetting',
+            name: 'Test Hidden Setting',
+            type: 'hidden',
+            defaultValue: 'hidden_value',
+            category: ['Test', 'Hidden']
+          },
+          {
+            id: 'TestDeprecatedSetting',
+            name: 'Test Deprecated Setting',
+            type: 'text',
+            defaultValue: 'deprecated_value',
+            deprecated: true,
+            category: ['Test', 'Deprecated']
+          },
+          {
+            id: 'TestVisibleSetting',
+            name: 'Test Visible Setting',
+            type: 'text',
+            defaultValue: 'visible_value',
+            category: ['Test', 'Visible']
+          }
+        ]
+      })
+    })
+  })
+
+  test('can open settings dialog and use search box', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await expect(searchBox).toBeVisible()
+
+    // Verify search box has the correct placeholder
+    await expect(searchBox).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Search')
+    )
+  })
+
+  test('search box is functional and accepts input', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Comfy')
+
+    // Verify the input was accepted
+    await expect(searchBox).toHaveValue('Comfy')
+  })
+
+  test('search box clears properly', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find and interact with the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('test')
+    await expect(searchBox).toHaveValue('test')
+
+    // Clear the search box
+    await searchBox.clear()
+    await expect(searchBox).toHaveValue('')
+  })
+
+  test('settings categories are visible in sidebar', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Check that the sidebar has categories
+    const categories = comfyPage.page.locator(
+      '.settings-sidebar .p-listbox-option'
+    )
+    expect(await categories.count()).toBeGreaterThan(0)
+
+    // Check that at least one category is visible
+    await expect(categories.first()).toBeVisible()
+  })
+
+  test('can select different categories in sidebar', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Get categories and click on different ones
+    const categories = comfyPage.page.locator(
+      '.settings-sidebar .p-listbox-option'
+    )
+    const categoryCount = await categories.count()
+
+    if (categoryCount > 1) {
+      // Click on the second category
+      await categories.nth(1).click()
+
+      // Verify the category is selected
+      await expect(categories.nth(1)).toHaveClass(/p-listbox-option-selected/)
+    }
+  })
+
+  test('settings content area is visible', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Check that the content area is visible
+    const contentArea = comfyPage.page.locator('.settings-content')
+    await expect(contentArea).toBeVisible()
+
+    // Check that tab panels are visible
+    const tabPanels = comfyPage.page.locator('.settings-tab-panels')
+    await expect(tabPanels).toBeVisible()
+  })
+
+  test('search functionality affects UI state', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Find the search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+
+    // Type in search box
+    await searchBox.fill('graph')
+    await comfyPage.page.waitForTimeout(200) // Wait for debounce
+
+    // Verify that the search input is handled
+    await expect(searchBox).toHaveValue('graph')
+  })
+
+  test('settings dialog can be closed', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Close with escape key
+    await comfyPage.page.keyboard.press('Escape')
+
+    // Verify dialog is closed
+    await expect(settingsDialog).not.toBeVisible()
+  })
+
+  test('search box has proper debouncing behavior', async ({ comfyPage }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Type rapidly in search box
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('a')
+    await searchBox.fill('ab')
+    await searchBox.fill('abc')
+    await searchBox.fill('abcd')
+
+    // Wait for debounce
+    await comfyPage.page.waitForTimeout(200)
+
+    // Verify final value
+    await expect(searchBox).toHaveValue('abcd')
+  })
+
+  test('search excludes hidden settings from results', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not hidden setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+  })
+
+  test('search excludes deprecated settings from results', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should show visible setting but not deprecated setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+  })
+
+  test('search shows visible settings but excludes hidden and deprecated', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    // Search for our test settings
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    await searchBox.fill('Test')
+    await comfyPage.page.waitForTimeout(300) // Wait for debounce
+
+    // Get all settings content
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Should only show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+
+    // Should not show hidden or deprecated settings
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+  })
+
+  test('search by setting name excludes hidden and deprecated', async ({
+    comfyPage
+  }) => {
+    // Open settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsDialog = comfyPage.page.locator('.settings-container')
+    await expect(settingsDialog).toBeVisible()
+
+    const searchBox = comfyPage.page.locator('.settings-search-box input')
+    const settingsContent = comfyPage.page.locator('.settings-tab-panels')
+
+    // Search specifically for hidden setting by name
+    await searchBox.clear()
+    await searchBox.fill('Hidden')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should not show the hidden setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Hidden Setting')
+
+    // Search specifically for deprecated setting by name
+    await searchBox.clear()
+    await searchBox.fill('Deprecated')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should not show the deprecated setting even when searching by name
+    await expect(settingsContent).not.toContainText('Test Deprecated Setting')
+
+    // Search for visible setting by name - should work
+    await searchBox.clear()
+    await searchBox.fill('Visible')
+    await comfyPage.page.waitForTimeout(300)
+
+    // Should show the visible setting
+    await expect(settingsContent).toContainText('Test Visible Setting')
+  })
+})

browser_tests/tests/workbench/workflowTabThumbnail.spec.ts

@@ -0,0 +1,158 @@
+import { expect } from '@playwright/test'
+
+import {
+  type ComfyPage,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+
+test.describe('Workflow Tab Thumbnails', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Workflow.WorkflowTabsPosition', 'Topbar')
+    await comfyPage.setup()
+  })
+
+  async function getTab(comfyPage: ComfyPage, index: number) {
+    const tab = comfyPage.page
+      .locator(`.workflow-tabs .p-togglebutton`)
+      .nth(index)
+    return tab
+  }
+
+  async function getTabPopover(
+    comfyPage: ComfyPage,
+    index: number,
+    name?: string
+  ) {
+    const tab = await getTab(comfyPage, index)
+    await tab.hover()
+
+    const popover = comfyPage.page.locator('.workflow-popover-fade')
+    await expect(popover).toHaveCount(1)
+    await expect(popover).toBeVisible({ timeout: 500 })
+    if (name) {
+      await expect(popover).toContainText(name)
+    }
+    return popover
+  }
+
+  async function getTabThumbnailImage(
+    comfyPage: ComfyPage,
+    index: number,
+    name?: string
+  ) {
+    const popover = await getTabPopover(comfyPage, index, name)
+    const thumbnailImg = popover.locator('.workflow-preview-thumbnail img')
+    return thumbnailImg
+  }
+
+  async function getNodeThumbnailBase64(comfyPage: ComfyPage, index: number) {
+    const thumbnailImg = await getTabThumbnailImage(comfyPage, index)
+    const src = (await thumbnailImg.getAttribute('src'))!
+
+    // Convert blob to base64, need to execute a script to get the base64
+    const base64 = await comfyPage.page.evaluate(async (src: string) => {
+      const blob = await fetch(src).then((res) => res.blob())
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+    }, src)
+    return base64
+  }
+
+  test('Should show thumbnail when hovering over a non-active tab', async ({
+    comfyPage
+  }) => {
+    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+    const thumbnailImg = await getTabThumbnailImage(
+      comfyPage,
+      0,
+      'Unsaved Workflow'
+    )
+    await expect(thumbnailImg).toBeVisible()
+  })
+
+  test('Should not show thumbnail for active tab', async ({ comfyPage }) => {
+    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+    const thumbnailImg = await getTabThumbnailImage(
+      comfyPage,
+      1,
+      'Unsaved Workflow (2)'
+    )
+    await expect(thumbnailImg).not.toBeVisible()
+  })
+
+  async function addNode(comfyPage: ComfyPage, category: string, node: string) {
+    const canvasArea = await comfyPage.canvas.boundingBox()
+
+    await comfyPage.page.mouse.move(
+      canvasArea!.x + canvasArea!.width - 100,
+      100
+    )
+    await comfyPage.delay(300) // Wait for the popover to hide
+
+    await comfyPage.rightClickCanvas(200, 200)
+    await comfyPage.page.getByText('Add Node').click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText(category).click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText(node).click()
+    await comfyPage.nextFrame()
+  }
+
+  test('Thumbnail should update when switching tabs', async ({ comfyPage }) => {
+    // Wait for initial workflow to load
+    await comfyPage.nextFrame()
+
+    // Create a new workflow (tab 1) which will be empty
+    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+    await comfyPage.nextFrame()
+
+    // Now we have two tabs: tab 0 (default workflow with nodes) and tab 1 (empty)
+    // Tab 1 is currently active, so we can only get thumbnail for tab 0
+
+    // Step 1: Different tabs should show different previews
+    const tab0ThumbnailWithNodes = await getNodeThumbnailBase64(comfyPage, 0)
+
+    // Add a node to tab 1 (current active tab)
+    await addNode(comfyPage, 'loaders', 'Load Checkpoint')
+    await comfyPage.nextFrame()
+
+    // Switch to tab 0 so we can get tab 1's thumbnail
+    await (await getTab(comfyPage, 0)).click()
+    await comfyPage.nextFrame()
+
+    const tab1ThumbnailWithNode = await getNodeThumbnailBase64(comfyPage, 1)
+
+    // The thumbnails should be different
+    expect(tab0ThumbnailWithNodes).not.toBe(tab1ThumbnailWithNode)
+
+    // Step 2: Switching without changes shouldn't update thumbnail
+    const tab1ThumbnailBefore = await getNodeThumbnailBase64(comfyPage, 1)
+
+    // Switch to tab 1 and back to tab 0 without making changes
+    await (await getTab(comfyPage, 1)).click()
+    await comfyPage.nextFrame()
+    await (await getTab(comfyPage, 0)).click()
+    await comfyPage.nextFrame()
+
+    const tab1ThumbnailAfter = await getNodeThumbnailBase64(comfyPage, 1)
+    expect(tab1ThumbnailBefore).toBe(tab1ThumbnailAfter)
+
+    // Step 3: Adding another node should cause thumbnail to change
+    // We're on tab 0, add a node
+    await addNode(comfyPage, 'loaders', 'Load VAE')
+    await comfyPage.nextFrame()
+
+    // Switch to tab 1 and back to update tab 0's thumbnail
+    await (await getTab(comfyPage, 1)).click()
+
+    const tab0ThumbnailAfterNewNode = await getNodeThumbnailBase64(comfyPage, 0)
+
+    // The thumbnail should have changed after adding a node
+    expect(tab0ThumbnailWithNodes).not.toBe(tab0ThumbnailAfterNewNode)
+  })
+})