Add drop on canvas functionality

## Summary

Error states were not getting propagated down to the InputSlots from the
API Repsonse

I created a provider and injected error state. It seemed like a way
better idea than prop drilling or building a composable that only two
nodes (`InputSlot` and `OutputSlot`) would need.

## Changes

The follow are now error code red when an input node has errors:
1. There's a error round border around the dot.
2. The dot is error colored.
3. The input text is error colored.

This treatment was okay after feedback from design.

## Screenshots - Error State

<img width="749" height="616" alt="Screenshot 2025-09-26 at 9 02 58 PM"
src="https://github.com/user-attachments/assets/55c7edc9-081b-4a9d-9753-120465959b5d"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5813-fix-add-InputSlot-and-dot-error-state-27b6d73d36508151a955e485f00a2d05)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

.github/workflows/i18n-custom-nodes.yaml

@@ -32,11 +32,10 @@ jobs:
       with:
         repository: Comfy-Org/ComfyUI_frontend
         path: ComfyUI_frontend
-    - name: Checkout ComfyUI_devtools
-      uses: actions/checkout@v4
-      with:
-        repository: Comfy-Org/ComfyUI_devtools
-        path: ComfyUI/custom_nodes/ComfyUI_devtools
+    - name: Copy ComfyUI_devtools from frontend repo
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
     - name: Checkout custom node repository
       uses: actions/checkout@v4
       with:
@@ -79,7 +78,7 @@ jobs:
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server
@@ -87,7 +86,7 @@ jobs:
       run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Capture base i18n
-      run: npx tsx scripts/diff-i18n capture
+      run: pnpm exec tsx scripts/diff-i18n capture
       working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
@@ -100,7 +99,7 @@ jobs:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
-      run: npx tsx scripts/diff-i18n diff
+      run: pnpm exec tsx scripts/diff-i18n diff
       working-directory: ComfyUI_frontend
     - name: Update i18n in custom node repository
       run: |

.github/workflows/i18n-node-defs.yaml

@@ -15,7 +15,7 @@ jobs:
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server

.github/workflows/i18n.yaml

@@ -33,7 +33,7 @@ jobs:
         restore-keys: |
           playwright-browsers-${{ runner.os }}-
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Start dev server
       # Run electron dev server as it is a superset of the web dev server

.github/workflows/test-browser-exp.yaml

@@ -19,11 +19,11 @@ jobs:
         restore-keys: |
           playwright-browsers-${{ runner.os }}-
     - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
+      run: pnpm exec playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Run Playwright tests and update snapshots
       id: playwright-tests
-      run: npx playwright test --update-snapshots
+      run: pnpm exec playwright test --update-snapshots
       continue-on-error: true
       working-directory: ComfyUI_frontend
     - uses: actions/upload-artifact@v4

.github/workflows/test-ui.yaml

@@ -27,12 +27,10 @@ jobs:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
-      - name: Checkout ComfyUI_devtools
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_devtools'
-          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
+      - name: Copy ComfyUI_devtools from frontend repo
+        run: |
+          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -150,7 +148,7 @@ jobs:
 
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
-        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         working-directory: ComfyUI_frontend
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
@@ -232,7 +230,7 @@ jobs:
         run: |
           # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright test --project=${{ matrix.browser }} \
+          pnpm exec playwright test --project=${{ matrix.browser }} \
             --reporter=list \
             --reporter=html \
             --reporter=json
@@ -283,10 +281,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          npx playwright merge-reports --reporter=html ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright merge-reports --reporter=json ./all-blob-reports
+          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report

.github/workflows/update-manager-types.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: Generate Manager API types
         run: |
           echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
-          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
 
       - name: Validate generated types
         run: |

.github/workflows/update-registry-types.yaml

@@ -68,7 +68,7 @@ jobs:
       - name: Generate API types
         run: |
           echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
-          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
 
       - name: Validate generated types
         run: |

.gitignore

@@ -22,6 +22,8 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files
@@ -44,6 +46,7 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
+coverage/
 
 # Browser tests
 /test-results/

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env bash
 
 pnpm exec lint-staged
-pnpm exec tsx scripts/check-unused-i18n-keys.ts
+pnpm exec tsx scripts/check-unused-i18n-keys.ts

.storybook/main.ts

@@ -45,7 +45,7 @@ const config: StorybookConfig = {
           compiler: 'vue3',
           customCollections: {
             comfy: FileSystemIconLoader(
-              process.cwd() + '/src/assets/icons/custom'
+              process.cwd() + '/packages/design-system/src/icons'
             )
           }
         }),

CODEOWNERS

@@ -1,17 +1,61 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
+# Desktop/Electron
+/src/types/desktop/                               @webfiltered
+/src/constants/desktopDialogs.ts                  @webfiltered
+/src/constants/desktopMaintenanceTasks.ts         @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/src/views/DesktopDialogView.vue                  @webfiltered
+/src/components/install/                          @webfiltered
+/src/components/maintenance/                      @webfiltered
+/vite.electron.config.mts                         @webfiltered
 
-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
+# Common UI Components
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
-# Translations (AIGODLIKE team + shinshin86)
-/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
+# Topbar
+/src/components/topbar/                           @pythongosssss
 
-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+# Thumbnail
+/src/renderer/core/thumbnail/                     @pythongosssss
 
-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @brucew4yn3rp @trsommer @Comfy-Org/comfy_frontend_devs
+# Legacy UI
+/scripts/ui/                                      @pythongosssss
+
+# Link rendering
+/src/renderer/core/canvas/links/                  @benceruleanlu
+
+# Node help system
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
+
+# Selection toolbox
+/src/components/graph/selectionToolbox/           @Myestery
+
+# Minimap
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
+
+# Workflow Templates
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+
+# Mask Editor
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
+
+# 3D
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
+
+# Manager
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+
+# Translations
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer

CONTRIBUTING.md

@@ -265,9 +265,9 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
 
-For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
+For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 
 ## Working with litegraph.js
 

browser_tests/README.md

@@ -16,15 +16,20 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
+ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
+For local development, copy the devtools files to your ComfyUI installation:
+```bash
+cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
+```
+
 ### Node.js & Playwright Prerequisites
 
 Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
 
 ```bash
-npx playwright install chromium --with-deps
+pnpm exec playwright install chromium --with-deps
 ```
 
 ### Environment Configuration
@@ -51,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI
 
 ### Common Setup Issues
 
-**Most tests require the new menu system** - Add to your test:
-
-```typescript
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-})
-```
-
 ### Release API Mocking
 
 By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.
@@ -76,7 +73,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**
 
 ```bash
-npx playwright test --ui
+pnpm exec playwright test --ui
 ```
 
 UI mode features:
@@ -92,8 +89,8 @@ UI mode features:
 For CI or headless testing:
 
 ```bash
-npx playwright test                    # Run all tests
-npx playwright test widget.spec.ts     # Run specific test file
+pnpm exec playwright test                    # Run all tests
+pnpm exec playwright test widget.spec.ts     # Run specific test file
 ```
 
 ### Local Development Config
@@ -389,7 +386,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:
 
 ```bash
-npx playwright test --update-snapshots
+pnpm exec playwright test --update-snapshots
 ```
 
 ### Creating New Screenshot Baselines

browser_tests/fixtures/ComfyPage.ts

@@ -1643,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
 
     try {
       await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,

browser_tests/fixtures/VueNodeHelpers.ts

@@ -13,6 +13,13 @@ export class VueNodeHelpers {
     return this.page.locator('[data-node-id]')
   }
 
+  /**
+   * Get locator for a Vue node by its NodeId
+   */
+  getNodeLocator(nodeId: string): Locator {
+    return this.page.locator(`[data-node-id="${nodeId}"]`)
+  }
+
   /**
    * Get locator for selected Vue node components (using visual selection indicators)
    */
@@ -22,6 +29,13 @@ export class VueNodeHelpers {
     )
   }
 
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
   /**
    * Get total count of Vue nodes in the DOM
    */

browser_tests/tests/backgroundImageUpload.spec.ts

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

browser_tests/tests/changeTracker.spec.ts

@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
   })
 }
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Change Tracker', () => {
   test.describe('Undo/Redo', () => {
     test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/chatHistory.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 interface ChatHistoryEntry {
   prompt: string
   response: string

browser_tests/tests/colorPalette.spec.ts

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

browser_tests/tests/commands.spec.ts

@@ -2,6 +2,10 @@ 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', () => {

browser_tests/tests/copyPaste.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
     await comfyPage.clickEmptyLatentNode()

browser_tests/tests/dialog.spec.ts

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

browser_tests/tests/domWidget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('DOM Widget', () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/collapsed_multiline')

browser_tests/tests/execution.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Execution', () => {
   test('Report error on unconnected slot', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()

browser_tests/tests/featureFlags.spec.ts

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

browser_tests/tests/graph.spec.ts

@@ -2,6 +2,10 @@ 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', () => {
   // Should be able to fix link input slot index after swap the input order
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348

browser_tests/tests/graphCanvasMenu.spec.ts

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

browser_tests/tests/groupNode.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Group Node', () => {
   test.describe('Node library sidebar', () => {
     const groupNodeName = 'DefautWorkflowGroupNode'

browser_tests/tests/interaction.spec.ts

@@ -9,6 +9,10 @@ import {
 } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('groups/mixed_graph_items')

browser_tests/tests/keybindings.spec.ts

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

browser_tests/tests/litegraphEvent.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 function listenForEvent(): Promise<Event> {
   return new Promise<Event>((resolve) => {
     document.addEventListener('litegraph:canvas', (e) => resolve(e), {

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load Workflow in Media', () => {
   const fileNames = [
     'workflow.webp',

browser_tests/tests/lodThreshold.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('LOD Threshold', () => {
   test('Should switch to low quality mode at correct zoom threshold', async ({
     comfyPage

browser_tests/tests/nodeBadge.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyApp } from '../../src/scripts/app'
 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('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {

browser_tests/tests/nodeDisplay.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 // If an input is optional by node definition, it should be shown as
 // a hollow circle no matter what shape it was defined in the workflow JSON.
 test.describe('Optional input', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -3,6 +3,10 @@ import {
   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')

browser_tests/tests/noteNode.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Note Node', () => {
   test('Can load node nodes', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('nodes/note_nodes')

browser_tests/tests/primitiveNode.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('primitive/primitive_node')

browser_tests/tests/rerouteNode.spec.ts

@@ -40,6 +40,7 @@ test.describe('Reroute Node', () => {
 
 test.describe('LiteGraph Native Reroute Node', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
   })
 

browser_tests/tests/rightClickMenu.spec.ts

@@ -3,6 +3,10 @@ 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()

browser_tests/tests/selectionToolbox.spec.ts

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

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -2,6 +2,10 @@ 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)

browser_tests/tests/templates.spec.ts

@@ -80,6 +80,12 @@ test.describe('Templates', () => {
     // 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()
 
@@ -102,48 +108,72 @@ test.describe('Templates', () => {
     expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
 
-  test('Uses title field as fallback when the key is not found in locales', async ({
+  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
   }) => {
-    // Capture request for the index.json
-    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
-      // Add a new template that won't have a translation pre-generated
-      const response = [
-        {
-          moduleName: 'default',
-          title: 'FALLBACK CATEGORY',
-          type: 'image',
-          templates: [
-            {
-              name: 'unknown_key_has_no_translation_available',
-              title: 'FALLBACK TEMPLATE NAME',
-              mediaType: 'image',
-              mediaSubtype: 'webp',
-              description: 'No translations found'
-            }
-          ]
-        }
-      ]
+    // 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: 200,
-        body: JSON.stringify(response),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
+        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()
 
-    // Expect the title to be used as fallback for template cards
+    // 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.getByText('FALLBACK TEMPLATE NAME')
+      comfyPage.templates.content.getByRole('heading', {
+        name: 'Image Generation'
+      })
     ).toBeVisible()
-
-    // Expect the title to be used as fallback for the template categories
-    await expect(comfyPage.page.getByLabel('FALLBACK CATEGORY')).toBeVisible()
   })
 
   test('template cards are dynamically sized and responsive', async ({
@@ -151,46 +181,33 @@ test.describe('Templates', () => {
   }) => {
     // Open templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
+    await comfyPage.templates.content.waitFor({ state: 'visible' })
 
-    // Wait for at least one template card to appear
-    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
-      timeout: 5000
-    })
+    const templateGrid = comfyPage.page.locator(
+      '[data-testid="template-workflows-content"]'
+    )
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
 
-    // Take snapshot of the template grid
-    const templateGrid = comfyPage.templates.content.locator('.grid').first()
+    const cardCount = await comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .count()
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
+    await expect(nav).toBeVisible() // Nav should be visible at desktop size
 
-    // Check cards at mobile viewport size
-    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
+    const mobileSize = { width: 640, height: 800 }
+    await comfyPage.page.setViewportSize(mobileSize)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
-    // Check cards at tablet size
-    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
+    const tabletSize = { width: 1024, height: 800 }
+    await comfyPage.page.setViewportSize(tabletSize)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    await expect(templateGrid).toHaveScreenshot('template-grid-tablet.png')
-  })
-
-  test('hover effects work on template cards', async ({ comfyPage }) => {
-    // Open templates dialog
-    await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
-
-    // Get a template card
-    const firstCard = comfyPage.page.locator('.template-card').first()
-    await expect(firstCard).toBeVisible({ timeout: 5000 })
-
-    // Take snapshot before hover
-    await expect(firstCard).toHaveScreenshot('template-card-before-hover.png')
-
-    // Hover over the card
-    await firstCard.hover()
-
-    // Take snapshot after hover to verify hover effect
-    await expect(firstCard).toHaveScreenshot('template-card-after-hover.png')
+    await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
   test('template cards descriptions adjust height dynamically', async ({
@@ -257,21 +274,42 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Verify cards are visible with varying content lengths
+    // Wait for cards to load
     await expect(
-      comfyPage.page.getByText('This is a short description.')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByText('This is a medium length description')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByText('This is a much longer description')
+      comfyPage.page.locator(
+        '[data-testid="template-workflow-short-description"]'
+      )
     ).toBeVisible({ timeout: 5000 })
 
-    // Take snapshot of a grid with specific cards
-    const templateGrid = comfyPage.templates.content
-      .locator('.grid:has-text("Short Description")')
-      .first()
+    // 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/useSettingSearch.spec.ts

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

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -85,6 +85,7 @@ test.describe('Version Mismatch Warnings', () => {
   test('should persist dismissed state across sessions', async ({
     comfyPage
   }) => {
+    test.setTimeout(30_000)
     // Mock system_stats route to indicate that the installed version is always ahead of the required version
     await comfyPage.page.route('**/system_stats**', async (route) => {
       await route.fulfill({
@@ -106,6 +107,11 @@ test.describe('Version Mismatch Warnings', () => {
     const dismissButton = warningToast.getByRole('button', { name: 'Close' })
     await dismissButton.click()
 
+    // Wait for the dismissed state to be persisted
+    await comfyPage.page.waitForFunction(
+      () => !!localStorage.getItem('comfy.versionMismatch.dismissals')
+    )
+
     // Reload the page, keeping local storage
     await comfyPage.setup({ clearStorage: false })
 

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

@@ -0,0 +1,33 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Nodes Zoom', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should not capture drag while zooming with ctrl+shift+drag', async ({
+    comfyPage
+  }) => {
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const nodeBoundingBox = await checkpointNode.boundingBox()
+    if (!nodeBoundingBox) throw new Error('Node bounding box not available')
+
+    const nodeMidpointX = nodeBoundingBox.x + nodeBoundingBox.width / 2
+    const nodeMidpointY = nodeBoundingBox.y + nodeBoundingBox.height / 2
+
+    // Start the Ctrl+Shift drag-to-zoom on the canvas and continue dragging over
+    // the node. The node should not capture the drag while drag-zooming.
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('Shift')
+    await comfyPage.dragAndDrop(
+      { x: 200, y: 300 },
+      { x: nodeMidpointX, y: nodeMidpointY }
+    )
+
+    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in-ctrl-shift.png')
+  })
+})

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

@@ -0,0 +1,791 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeId } from '../../../../../src/platform/workflow/validation/schemas/workflowSchema'
+import { getSlotKey } from '../../../../../src/renderer/core/layout/slots/slotIdentifier'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { getMiddlePoint } from '../../../../fixtures/utils/litegraphUtils'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
+
+async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
+  const box = await locator.boundingBox()
+  if (!box) throw new Error('Slot bounding box not available')
+  return {
+    x: box.x + box.width / 2,
+    y: box.y + box.height / 2
+  }
+}
+
+async function getInputLinkDetails(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number
+) {
+  return await page.evaluate(
+    ([targetNodeId, targetSlot]) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return null
+
+      const node = graph.getNodeById(targetNodeId)
+      if (!node) return null
+
+      const input = node.inputs?.[targetSlot]
+      if (!input) return null
+
+      const linkId = input.link
+      if (linkId == null) return null
+
+      const link = graph.getLink?.(linkId)
+      if (!link) return null
+
+      return {
+        id: link.id,
+        originId: link.origin_id,
+        originSlot:
+          typeof link.origin_slot === 'string'
+            ? Number.parseInt(link.origin_slot, 10)
+            : link.origin_slot,
+        targetId: link.target_id,
+        targetSlot:
+          typeof link.target_slot === 'string'
+            ? Number.parseInt(link.target_slot, 10)
+            : link.target_slot,
+        parentId: link.parentId ?? null
+      }
+    },
+    [nodeId, slotIndex] as const
+  )
+}
+
+// Test helpers to reduce repetition across cases
+function slotLocator(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number,
+  isInput: boolean
+) {
+  const key = getSlotKey(String(nodeId), slotIndex, isInput)
+  return page.locator(`[data-slot-key="${key}"]`)
+}
+
+async function expectVisibleAll(...locators: Locator[]) {
+  await Promise.all(locators.map((l) => expect(l).toBeVisible()))
+}
+
+async function getSlotCenter(
+  page: Page,
+  nodeId: NodeId,
+  slotIndex: number,
+  isInput: boolean
+) {
+  const locator = slotLocator(page, nodeId, slotIndex, isInput)
+  await expect(locator).toBeVisible()
+  return await getCenter(locator)
+}
+
+async function connectSlots(
+  page: Page,
+  from: { nodeId: NodeId; index: number },
+  to: { nodeId: NodeId; index: number },
+  nextFrame: () => Promise<void>
+) {
+  const fromLoc = slotLocator(page, from.nodeId, from.index, false)
+  const toLoc = slotLocator(page, to.nodeId, to.index, true)
+  await expectVisibleAll(fromLoc, toLoc)
+  await fromLoc.dragTo(toLoc)
+  await nextFrame()
+}
+
+test.describe('Vue Node Link Interaction', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('vueNodes/simple-triple')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('should show a link dragging out from a slot when dragging on a slot', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(samplerNode).toBeTruthy()
+
+    const slot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    await expect(slot).toBeVisible()
+
+    const start = await getCenter(slot)
+
+    // Arbitrary value
+    const dragTarget = {
+      x: start.x + 180,
+      y: start.y - 140
+    }
+
+    await comfyMouse.move(start)
+    await comfyMouse.drag(dragTarget)
+    await comfyPage.nextFrame()
+
+    try {
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-dragging-link.png'
+      )
+    } finally {
+      await comfyMouse.drop()
+    }
+  })
+
+  test('should create a link when dropping on a compatible slot', async ({
+    comfyPage
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails).toMatchObject({
+      originId: samplerNode.id,
+      originSlot: 0,
+      targetId: vaeNode.id,
+      targetSlot: 0
+    })
+  })
+
+  test('should not create a link when slot types are incompatible', async ({
+    comfyPage
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    expect(samplerNode && clipNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const clipInput = await clipNode.getInput(0)
+
+    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    const inputSlot = slotLocator(comfyPage.page, clipNode.id, 0, true)
+    await expectVisibleAll(outputSlot, inputSlot)
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await clipInput.getLinkCount()).toBe(0)
+
+    const graphLinkDetails = await getInputLinkDetails(
+      comfyPage.page,
+      clipNode.id,
+      0
+    )
+    expect(graphLinkDetails).toBeNull()
+  })
+
+  test('should not create a link when dropping onto a slot on the same node', async ({
+    comfyPage
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(samplerNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const samplerInput = await samplerNode.getInput(3)
+
+    const outputSlot = slotLocator(comfyPage.page, samplerNode.id, 0, false)
+    const inputSlot = slotLocator(comfyPage.page, samplerNode.id, 3, true)
+    await expectVisibleAll(outputSlot, inputSlot)
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await samplerInput.getLinkCount()).toBe(0)
+  })
+
+  test('should reuse the existing origin when dragging an input link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    await comfyMouse.drag(vaeInputCenter)
+    await comfyMouse.drop()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 160,
+      y: vaeInputCenter.y - 100
+    }
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drag(dragTarget)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-input-drag-reuses-origin.png'
+    )
+    await comfyMouse.drop()
+  })
+
+  test('ctrl+alt drag from an input starts a fresh link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    await comfyMouse.drag(vaeInputCenter)
+    await comfyMouse.drop()
+
+    await comfyPage.nextFrame()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 140,
+      y: vaeInputCenter.y - 110
+    }
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('Alt')
+
+    try {
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-input-drag-ctrl-alt.png'
+      )
+    } finally {
+      await comfyMouse.drop().catch(() => {})
+      await comfyPage.page.keyboard.up('Alt').catch(() => {})
+      await comfyPage.page.keyboard.up('Control').catch(() => {})
+    }
+
+    await comfyPage.nextFrame()
+
+    // Tcehnically intended to disconnect existing as well
+    expect(await vaeInput.getLinkCount()).toBe(0)
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+  })
+
+  test('dropping an input link back on its slot restores the original connection', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const samplerOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+
+    await comfyMouse.move(samplerOutputCenter)
+    try {
+      await comfyMouse.drag(vaeInputCenter)
+    } finally {
+      await comfyMouse.drop()
+    }
+
+    await comfyPage.nextFrame()
+
+    const originalLink = await getInputLinkDetails(
+      comfyPage.page,
+      vaeNode.id,
+      0
+    )
+    expect(originalLink).not.toBeNull()
+
+    const dragTarget = {
+      x: vaeInputCenter.x + 150,
+      y: vaeInputCenter.y - 100
+    }
+
+    // To prevent needing a screenshot expectation for whether the link's off
+    const vaeInputLocator = slotLocator(comfyPage.page, vaeNode.id, 0, true)
+    const inputBox = await vaeInputLocator.boundingBox()
+    if (!inputBox) throw new Error('Input slot bounding box not available')
+    const isOutsideX =
+      dragTarget.x < inputBox.x || dragTarget.x > inputBox.x + inputBox.width
+    const isOutsideY =
+      dragTarget.y < inputBox.y || dragTarget.y > inputBox.y + inputBox.height
+    expect(isOutsideX || isOutsideY).toBe(true)
+
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drag(dragTarget)
+    await comfyMouse.move(vaeInputCenter)
+    await comfyMouse.drop()
+
+    await comfyPage.nextFrame()
+
+    const restoredLink = await getInputLinkDetails(
+      comfyPage.page,
+      vaeNode.id,
+      0
+    )
+
+    expect(restoredLink).not.toBeNull()
+    if (!restoredLink || !originalLink) {
+      throw new Error('Expected both original and restored links to exist')
+    }
+    expect(restoredLink).toMatchObject({
+      originId: originalLink.originId,
+      originSlot: originalLink.originSlot,
+      targetId: originalLink.targetId,
+      targetSlot: originalLink.targetSlot,
+      parentId: originalLink.parentId
+    })
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+  })
+
+  test('rerouted input drag preview remains anchored to reroute', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    const outputPosition = await samplerOutput.getPosition()
+    const inputPosition = await vaeInput.getPosition()
+    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
+
+    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+    // This avoids relying on an exact path hit-test position.
+    await comfyPage.page.evaluate(
+      ([targetNodeId, targetSlot, clientPoint]) => {
+        const app = (window as any)['app']
+        const graph = app?.canvas?.graph ?? app?.graph
+        if (!graph) throw new Error('Graph not available')
+        const node = graph.getNodeById(targetNodeId)
+        if (!node) throw new Error('Target node not found')
+        const input = node.inputs?.[targetSlot]
+        if (!input) throw new Error('Target input slot not found')
+
+        const linkId = input.link
+        if (linkId == null) throw new Error('Expected existing link on input')
+        const link = graph.getLink(linkId)
+        if (!link) throw new Error('Link not found')
+
+        // Convert the client/canvas pixel coordinates to graph space
+        const pos = app.canvas.ds.convertCanvasToOffset([
+          clientPoint.x,
+          clientPoint.y
+        ])
+        graph.createReroute(pos, link)
+      },
+      [vaeNode.id, 0, reroutePoint] as const
+    )
+
+    await comfyPage.nextFrame()
+
+    const vaeInputCenter = await getSlotCenter(
+      comfyPage.page,
+      vaeNode.id,
+      0,
+      true
+    )
+    const dragTarget = {
+      x: vaeInputCenter.x + 160,
+      y: vaeInputCenter.y - 120
+    }
+
+    let dropped = false
+    try {
+      await comfyMouse.move(vaeInputCenter)
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-reroute-input-drag.png'
+      )
+      await comfyMouse.move(vaeInputCenter)
+      await comfyMouse.drop()
+      dropped = true
+    } finally {
+      if (!dropped) {
+        await comfyMouse.drop().catch(() => {})
+      }
+    }
+
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails?.originId).toBe(samplerNode.id)
+    expect(linkDetails?.parentId).not.toBeNull()
+  })
+
+  test('rerouted output shift-drag preview remains anchored to reroute', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    const vaeNode = (await comfyPage.getNodeRefsByType('VAEDecode'))[0]
+    expect(samplerNode && vaeNode).toBeTruthy()
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: samplerNode.id, index: 0 },
+      { nodeId: vaeNode.id, index: 0 },
+      () => comfyPage.nextFrame()
+    )
+
+    const outputPosition = await samplerOutput.getPosition()
+    const inputPosition = await vaeInput.getPosition()
+    const reroutePoint = getMiddlePoint(outputPosition, inputPosition)
+
+    // Insert a reroute programmatically on the existing link between sampler output[0] and VAE input[0].
+    // This avoids relying on an exact path hit-test position.
+    await comfyPage.page.evaluate(
+      ([targetNodeId, targetSlot, clientPoint]) => {
+        const app = (window as any)['app']
+        const graph = app?.canvas?.graph ?? app?.graph
+        if (!graph) throw new Error('Graph not available')
+        const node = graph.getNodeById(targetNodeId)
+        if (!node) throw new Error('Target node not found')
+        const input = node.inputs?.[targetSlot]
+        if (!input) throw new Error('Target input slot not found')
+
+        const linkId = input.link
+        if (linkId == null) throw new Error('Expected existing link on input')
+        const link = graph.getLink(linkId)
+        if (!link) throw new Error('Link not found')
+
+        // Convert the client/canvas pixel coordinates to graph space
+        const pos = app.canvas.ds.convertCanvasToOffset([
+          clientPoint.x,
+          clientPoint.y
+        ])
+        graph.createReroute(pos, link)
+      },
+      [vaeNode.id, 0, reroutePoint] as const
+    )
+
+    await comfyPage.nextFrame()
+
+    const outputCenter = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      0,
+      false
+    )
+    const dragTarget = {
+      x: outputCenter.x + 150,
+      y: outputCenter.y - 140
+    }
+
+    let dropPending = false
+    let shiftHeld = false
+    try {
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      shiftHeld = true
+      dropPending = true
+      await comfyMouse.drag(dragTarget)
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-reroute-output-shift-drag.png'
+      )
+      await comfyMouse.move(outputCenter)
+      await comfyMouse.drop()
+      dropPending = false
+    } finally {
+      if (dropPending) await comfyMouse.drop().catch(() => {})
+      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+    }
+
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(comfyPage.page, vaeNode.id, 0)
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails?.originId).toBe(samplerNode.id)
+    expect(linkDetails?.parentId).not.toBeNull()
+  })
+
+  test('dragging input to input drags existing link', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Step 1: Connect CLIP's only output (index 0) to KSampler's second input (index 1)
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+
+    // Verify initial link exists between CLIP -> KSampler input[1]
+    const initialLink = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    expect(initialLink).not.toBeNull()
+    expect(initialLink).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 1
+    })
+
+    // Step 2: Drag from KSampler's second input to its third input (index 2)
+    const input2Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      1,
+      true
+    )
+    const input3Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      2,
+      true
+    )
+
+    await comfyMouse.move(input2Center)
+    await comfyMouse.drag(input3Center)
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    // Expect old link removed from input[1]
+    const afterSecondInput = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    expect(afterSecondInput).toBeNull()
+
+    // Expect new link exists at input[2] from CLIP
+    const afterThirdInput = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+    expect(afterThirdInput).not.toBeNull()
+    expect(afterThirdInput).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 2
+    })
+  })
+
+  test('shift-dragging an output with multiple links should drag all links', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    const clipOutput = await clipNode.getOutput(0)
+
+    // Connect output[0] -> inputs[1] and [2]
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 1 },
+      () => comfyPage.nextFrame()
+    )
+    await connectSlots(
+      comfyPage.page,
+      { nodeId: clipNode.id, index: 0 },
+      { nodeId: samplerNode.id, index: 2 },
+      () => comfyPage.nextFrame()
+    )
+
+    expect(await clipOutput.getLinkCount()).toBe(2)
+
+    const outputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+    const dragTarget = {
+      x: outputCenter.x + 40,
+      y: outputCenter.y - 140
+    }
+
+    let dropPending = false
+    let shiftHeld = false
+    try {
+      await comfyMouse.move(outputCenter)
+      await comfyPage.page.keyboard.down('Shift')
+      shiftHeld = true
+      await comfyMouse.drag(dragTarget)
+      dropPending = true
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-shift-output-multi-link.png'
+      )
+    } finally {
+      if (dropPending) await comfyMouse.drop().catch(() => {})
+      if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
+    }
+  })
+
+  test('should snap to node center while dragging and link on drop', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Start drag from CLIP output[0]
+    const clipOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+
+    // Drag to the visual center of the KSampler Vue node (not a slot)
+    const samplerVue = comfyPage.vueNodes.getNodeLocator(String(samplerNode.id))
+    await expect(samplerVue).toBeVisible()
+    const samplerCenter = await getCenter(samplerVue)
+
+    await comfyMouse.move(clipOutputCenter)
+    await comfyMouse.drag(samplerCenter)
+
+    // During drag, the preview should snap/highlight a compatible input on KSampler
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-node.png')
+
+    // Drop to create the link
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    // Validate a link was created to one of KSampler's compatible inputs (1 or 2)
+    const linkOnInput1 = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      1
+    )
+    const linkOnInput2 = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+
+    const linked = linkOnInput1 ?? linkOnInput2
+    expect(linked).not.toBeNull()
+    expect(linked?.originId).toBe(clipNode.id)
+    expect(linked?.targetId).toBe(samplerNode.id)
+  })
+
+  test('should snap to a specific compatible slot when targeting it', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const clipNode = (await comfyPage.getNodeRefsByType('CLIPTextEncode'))[0]
+    const samplerNode = (await comfyPage.getNodeRefsByType('KSampler'))[0]
+    expect(clipNode && samplerNode).toBeTruthy()
+
+    // Drag from CLIP output[0] to KSampler input[2] (third slot) which is the
+    // second compatible input for CLIP
+    const clipOutputCenter = await getSlotCenter(
+      comfyPage.page,
+      clipNode.id,
+      0,
+      false
+    )
+    const samplerInput3Center = await getSlotCenter(
+      comfyPage.page,
+      samplerNode.id,
+      2,
+      true
+    )
+
+    await comfyMouse.move(clipOutputCenter)
+    await comfyMouse.drag(samplerInput3Center)
+
+    // Expect the preview to show snapping to the targeted slot
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-node-snap-to-slot.png')
+
+    // Finish the connection
+    await comfyMouse.drop()
+    await comfyPage.nextFrame()
+
+    const linkDetails = await getInputLinkDetails(
+      comfyPage.page,
+      samplerNode.id,
+      2
+    )
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails).toMatchObject({
+      originId: clipNode.id,
+      targetId: samplerNode.id,
+      targetSlot: 2
+    })
+  })
+})

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

@@ -1,6 +1,10 @@
 import { expect } from '@playwright/test'
 
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
 
 test.describe('Vue Nodes - Delete Key Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {

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

@@ -0,0 +1,76 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../../fixtures/utils/vueNodeFixtures'
+
+test.describe('Vue Nodes Renaming', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  test('should display node title', async ({ comfyPage }) => {
+    // Get the KSampler node from the default workflow
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('KSampler')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('KSampler')
+  })
+
+  test('should allow title renaming by double clicking on the node header', async ({
+    comfyPage
+  }) => {
+    const nodes = await comfyPage.getNodeRefsByType('KSampler')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('Double click node body does not trigger edit', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode =
+      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const nodeBbox = await loadCheckpointNode.boundingBox()
+    if (!nodeBbox) throw new Error('Node not found')
+    await loadCheckpointNode.dblclick()
+
+    const editingTitleInput = comfyPage.page.getByTestId('node-title-input')
+    await expect(editingTitleInput).not.toBeVisible()
+  })
+})

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

@@ -0,0 +1,52 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Node Selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const modifiers = [
+    { key: 'Control', name: 'ctrl' },
+    { key: 'Shift', name: 'shift' },
+    { key: 'Meta', name: 'meta' }
+  ] as const
+
+  for (const { key: modifier, name } of modifiers) {
+    test(`should allow selecting multiple nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Empty Latent Image').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+
+      await comfyPage.page.getByText('KSampler').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(3)
+    })
+
+    test(`should allow de-selecting nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Load Checkpoint').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+    })
+  }
+})

browser_tests/tests/vueNodes/linkInteraction.spec.ts

@@ -1,221 +0,0 @@
-import type { Locator } from '@playwright/test'
-
-import { getSlotKey } from '../../../src/renderer/core/layout/slots/slotIdentifier'
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import { fitToViewInstant } from '../../helpers/fitToView'
-
-async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
-  const box = await locator.boundingBox()
-  if (!box) throw new Error('Slot bounding box not available')
-  return {
-    x: box.x + box.width / 2,
-    y: box.y + box.height / 2
-  }
-}
-
-test.describe('Vue Node Link Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.loadWorkflow('vueNodes/simple-triple')
-    await comfyPage.vueNodes.waitForNodes()
-    await fitToViewInstant(comfyPage)
-  })
-
-  test('should show a link dragging out from a slot when dragging on a slot', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(samplerNodes.length).toBeGreaterThan(0)
-
-    const samplerNode = samplerNodes[0]
-    const outputSlot = await samplerNode.getOutput(0)
-    await outputSlot.removeLinks()
-    await comfyPage.nextFrame()
-
-    const slotKey = getSlotKey(String(samplerNode.id), 0, false)
-    const slotLocator = comfyPage.page.locator(`[data-slot-key="${slotKey}"]`)
-    await expect(slotLocator).toBeVisible()
-
-    const start = await getCenter(slotLocator)
-    const canvasBox = await comfyPage.canvas.boundingBox()
-    if (!canvasBox) throw new Error('Canvas bounding box not available')
-
-    // Arbitrary value
-    const dragTarget = {
-      x: start.x + 180,
-      y: start.y - 140
-    }
-
-    await comfyMouse.move(start)
-    await comfyMouse.drag(dragTarget)
-    await comfyPage.nextFrame()
-
-    try {
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-dragging-link.png'
-      )
-    } finally {
-      await comfyMouse.drop()
-    }
-  })
-
-  test('should create a link when dropping on a compatible slot', async ({
-    comfyPage
-  }) => {
-    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(samplerNodes.length).toBeGreaterThan(0)
-    const samplerNode = samplerNodes[0]
-
-    const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
-    expect(vaeNodes.length).toBeGreaterThan(0)
-    const vaeNode = vaeNodes[0]
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const vaeInput = await vaeNode.getInput(0)
-
-    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
-    const inputSlotKey = getSlotKey(String(vaeNode.id), 0, true)
-
-    const outputSlot = comfyPage.page.locator(
-      `[data-slot-key="${outputSlotKey}"]`
-    )
-    const inputSlot = comfyPage.page.locator(
-      `[data-slot-key="${inputSlotKey}"]`
-    )
-
-    await expect(outputSlot).toBeVisible()
-    await expect(inputSlot).toBeVisible()
-
-    await outputSlot.dragTo(inputSlot)
-    await comfyPage.nextFrame()
-
-    expect(await samplerOutput.getLinkCount()).toBe(1)
-    expect(await vaeInput.getLinkCount()).toBe(1)
-
-    const linkDetails = await comfyPage.page.evaluate((sourceId) => {
-      const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
-      if (!graph) return null
-
-      const source = graph.getNodeById(sourceId)
-      if (!source) return null
-
-      const linkId = source.outputs[0]?.links?.[0]
-      if (linkId == null) return null
-
-      const link = graph.links[linkId]
-      if (!link) return null
-
-      return {
-        originId: link.origin_id,
-        originSlot: link.origin_slot,
-        targetId: link.target_id,
-        targetSlot: link.target_slot
-      }
-    }, samplerNode.id)
-
-    expect(linkDetails).not.toBeNull()
-    expect(linkDetails).toMatchObject({
-      originId: samplerNode.id,
-      originSlot: 0,
-      targetId: vaeNode.id,
-      targetSlot: 0
-    })
-  })
-
-  test('should not create a link when slot types are incompatible', async ({
-    comfyPage
-  }) => {
-    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(samplerNodes.length).toBeGreaterThan(0)
-    const samplerNode = samplerNodes[0]
-
-    const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
-    expect(clipNodes.length).toBeGreaterThan(0)
-    const clipNode = clipNodes[0]
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const clipInput = await clipNode.getInput(0)
-
-    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
-    const inputSlotKey = getSlotKey(String(clipNode.id), 0, true)
-
-    const outputSlot = comfyPage.page.locator(
-      `[data-slot-key="${outputSlotKey}"]`
-    )
-    const inputSlot = comfyPage.page.locator(
-      `[data-slot-key="${inputSlotKey}"]`
-    )
-
-    await expect(outputSlot).toBeVisible()
-    await expect(inputSlot).toBeVisible()
-
-    await outputSlot.dragTo(inputSlot)
-    await comfyPage.nextFrame()
-
-    expect(await samplerOutput.getLinkCount()).toBe(0)
-    expect(await clipInput.getLinkCount()).toBe(0)
-
-    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
-      const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
-      if (!graph) return 0
-
-      const source = graph.getNodeById(sourceId)
-      if (!source) return 0
-
-      return source.outputs[0]?.links?.length ?? 0
-    }, samplerNode.id)
-
-    expect(graphLinkCount).toBe(0)
-  })
-
-  test('should not create a link when dropping onto a slot on the same node', async ({
-    comfyPage
-  }) => {
-    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(samplerNodes.length).toBeGreaterThan(0)
-    const samplerNode = samplerNodes[0]
-
-    const samplerOutput = await samplerNode.getOutput(0)
-    const samplerInput = await samplerNode.getInput(3)
-
-    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
-    const inputSlotKey = getSlotKey(String(samplerNode.id), 3, true)
-
-    const outputSlot = comfyPage.page.locator(
-      `[data-slot-key="${outputSlotKey}"]`
-    )
-    const inputSlot = comfyPage.page.locator(
-      `[data-slot-key="${inputSlotKey}"]`
-    )
-
-    await expect(outputSlot).toBeVisible()
-    await expect(inputSlot).toBeVisible()
-
-    await outputSlot.dragTo(inputSlot)
-    await comfyPage.nextFrame()
-
-    expect(await samplerOutput.getLinkCount()).toBe(0)
-    expect(await samplerInput.getLinkCount()).toBe(0)
-
-    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
-      const app = window['app']
-      const graph = app?.canvas?.graph ?? app?.graph
-      if (!graph) return 0
-
-      const source = graph.getNodeById(sourceId)
-      if (!source) return 0
-
-      return source.outputs[0]?.links?.length ?? 0
-    }, samplerNode.id)
-
-    expect(graphLinkCount).toBe(0)
-  })
-})

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

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const BYPASS_HOTKEY = 'Control+b'
+const BYPASS_CLASS = /before:bg-bypass\/60/
+
+test.describe('Vue Node Bypass', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling bypass on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+  })
+
+  test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(BYPASS_CLASS)
+  })
+})

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

@@ -1,67 +1,20 @@
 import {
   comfyExpect as expect,
   comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+} from '../../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../../fixtures/utils/vueNodeFixtures'
 
-test.describe('NodeHeader', () => {
+test.describe('Vue Node Collapse', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
     await comfyPage.setup()
   })
 
-  test('displays node title', async ({ comfyPage }) => {
-    // Get the KSampler node from the default workflow
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    expect(nodes.length).toBeGreaterThanOrEqual(1)
-
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    const title = await vueNode.getTitle()
-    expect(title).toBe('KSampler')
-
-    // Verify title is visible in the header
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('KSampler')
-  })
-
-  test('allows title renaming', async ({ comfyPage }) => {
-    const nodes = await comfyPage.getNodeRefsByType('KSampler')
-    const node = nodes[0]
-    const vueNode = new VueNodeFixture(node, comfyPage.page)
-
-    // Test renaming with Enter
-    await vueNode.setTitle('My Custom Sampler')
-    const newTitle = await vueNode.getTitle()
-    expect(newTitle).toBe('My Custom Sampler')
-
-    // Verify the title is displayed
-    const header = await vueNode.getHeader()
-    await expect(header).toContainText('My Custom Sampler')
-
-    // Test cancel with Escape
-    const titleElement = await vueNode.getTitleElement()
-    await titleElement.dblclick()
-    await comfyPage.nextFrame()
-
-    // Type a different value but cancel
-    const input = (await vueNode.getHeader()).locator(
-      '[data-testid="node-title-input"]'
-    )
-    await input.fill('This Should Be Cancelled')
-    await input.press('Escape')
-    await comfyPage.nextFrame()
-
-    // Title should remain as the previously saved value
-    const titleAfterCancel = await vueNode.getTitle()
-    expect(titleAfterCancel).toBe('My Custom Sampler')
-  })
-
-  test('handles node collapsing', async ({ comfyPage }) => {
+  test('should allow collapsing node with collapse icon', async ({
+    comfyPage
+  }) => {
     // Get the KSampler node from the default workflow
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
@@ -90,7 +43,7 @@ test.describe('NodeHeader', () => {
     expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
   })
 
-  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+  test('should show collapse/expand icon state', async ({ comfyPage }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)
@@ -110,7 +63,9 @@ test.describe('NodeHeader', () => {
     expect(iconClass).toContain('pi-chevron-down')
   })
 
-  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+  test('should preserve title when collapsing/expanding', async ({
+    comfyPage
+  }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)

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

@@ -0,0 +1,49 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Custom Colors', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('displays color picker button and allows color selection', async ({
+    comfyPage
+  }) => {
+    const loadCheckpointNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'Load Checkpoint'
+    })
+    await loadCheckpointNode.getByText('Load Checkpoint').click()
+
+    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+    await comfyPage.page
+      .locator('.color-picker-container')
+      .locator('i[data-testid="blue"]')
+      .click()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-color-blue.png'
+    )
+  })
+
+  test('should load node colors from workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-dark-all-colors.png'
+    )
+  })
+
+  test('should show brightened node colors on light theme', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
+    await comfyPage.loadWorkflow('nodes/every_node_color')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-node-custom-colors-light-all-colors.png'
+    )
+  })
+})

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

@@ -0,0 +1,32 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const ERROR_CLASS = /border-error/
+
+test.describe('Vue Node Error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should display error state when node is missing (node from workflow is not installed)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+
+    // Close missing nodes warning dialog
+    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
+    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
+      state: 'hidden'
+    })
+
+    // Expect error state on missing unknown node
+    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'UNKNOWN NODE'
+    })
+    await expect(unknownNode).toHaveClass(ERROR_CLASS)
+  })
+})

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

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Nodes - LOD', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
+
+    const vueNodesContainer = comfyPage.vueNodes.nodes
+    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
+    const buttonsInNodes = vueNodesContainer.getByRole('button')
+
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+
+    await comfyPage.zoom(120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
+
+    await expect(textboxesInNodes.first()).toBeHidden()
+    await expect(buttonsInNodes.first()).toBeHidden()
+
+    await comfyPage.zoom(-120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-lod-inactive.png'
+    )
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+  })
+})

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

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const MUTE_HOTKEY = 'Control+m'
+const MUTE_CLASS = /opacity-50/
+
+test.describe('Vue Node Mute', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling mute on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+  })
+
+  test('should allow toggling mute on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+  })
+})

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

@@ -0,0 +1,85 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const PIN_HOTKEY = 'p'
+const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
+
+test.describe('Vue Node Pin', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling pin on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const pinIndicator = checkpointNode.locator(PIN_INDICATOR)
+
+    await expect(pinIndicator).toBeVisible()
+
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+    await expect(pinIndicator).not.toBeVisible()
+  })
+
+  test('should allow toggling pin on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+    const pinIndicator1 = checkpointNode.locator(PIN_INDICATOR)
+    await expect(pinIndicator1).toBeVisible()
+    const pinIndicator2 = ksamplerNode.locator(PIN_INDICATOR)
+    await expect(pinIndicator2).toBeVisible()
+
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+    await expect(pinIndicator1).not.toBeVisible()
+    await expect(pinIndicator2).not.toBeVisible()
+  })
+
+  test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
+    const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
+    await checkpointNodeHeader.click()
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+
+    // Try to drag the node
+    const headerPos = await checkpointNodeHeader.boundingBox()
+    if (!headerPos) throw new Error('Failed to get header position')
+    await comfyPage.dragAndDrop(
+      { x: headerPos.x, y: headerPos.y },
+      { x: headerPos.x + 256, y: headerPos.y + 256 }
+    )
+
+    // Verify the node is not dragged (same position before and after click-and-drag)
+    const headerPosAfterDrag = await checkpointNodeHeader.boundingBox()
+    if (!headerPosAfterDrag)
+      throw new Error('Failed to get header position after drag')
+    expect(headerPosAfterDrag).toEqual(headerPos)
+
+    // Unpin the node with the hotkey
+    await checkpointNodeHeader.click()
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+
+    // Try to drag the node again
+    await comfyPage.dragAndDrop(
+      { x: headerPos.x, y: headerPos.y },
+      { x: headerPos.x + 256, y: headerPos.y + 256 }
+    )
+
+    // Verify the node is dragged
+    const headerPosAfterDrag2 = await checkpointNodeHeader.boundingBox()
+    if (!headerPosAfterDrag2)
+      throw new Error('Failed to get header position after drag')
+    expect(headerPosAfterDrag2).not.toEqual(headerPos)
+  })
+})

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

@@ -0,0 +1,49 @@
+import {
+  type ComfyPage,
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Multiline String Widget', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const getFirstClipNode = (comfyPage: ComfyPage) =>
+    comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
+
+  const getFirstMultilineStringWidget = (comfyPage: ComfyPage) =>
+    getFirstClipNode(comfyPage).getByRole('textbox', { name: 'text' })
+
+  test('should allow entering text', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+    await textarea.fill('Hello World')
+    await expect(textarea).toHaveValue('Hello World')
+    await textarea.fill('Hello World 2')
+    await expect(textarea).toHaveValue('Hello World 2')
+  })
+
+  test('should support entering multiline content', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+
+    const multilineValue = ['Line 1', 'Line 2', 'Line 3'].join('\n')
+
+    await textarea.fill(multilineValue)
+    await expect(textarea).toHaveValue(multilineValue)
+  })
+
+  test('should retain value after focus changes', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+
+    await textarea.fill('Keep me around')
+
+    // Click another node
+    const loadCheckpointNode =
+      comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await loadCheckpointNode.click()
+    await getFirstClipNode(comfyPage).click()
+
+    await expect(textarea).toHaveValue('Keep me around')
+  })
+})

browser_tests/tests/widget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Combo text widget', () => {
   test('Truncates text when resized', async ({ comfyPage }) => {
     await comfyPage.resizeLoadCheckpointNode(0.2, 1)
@@ -318,6 +322,9 @@ test.describe('Animated image widget', () => {
 test.describe('Load audio widget', () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/load_audio_widget')
+    // Wait for the audio widget to be rendered in the DOM
+    await comfyPage.page.waitForSelector('.comfy-audio', { state: 'attached' })
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })

browser_tests/tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     /* Test files should not be compiled */
     "noEmit": true,
-    // "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "resolveJsonModule": true

build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Build scripts configuration */
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

docs/extensions/development.md

@@ -110,7 +110,7 @@ pnpm build
 
 For faster iteration during development, use watch mode:
 ```bash
-npx vite build --watch
+pnpm exec vite build --watch
 ```
 
 Note: Watch mode provides faster rebuilds than full builds, but still no hot reload

eslint.config.ts

@@ -33,7 +33,13 @@ export default defineConfig([
       },
       parserOptions: {
         parser: tseslint.parser,
-        projectService: true,
+        projectService: {
+          allowDefaultProject: [
+            'vite.config.mts',
+            'vite.electron.config.mts',
+            'vite.types.config.mts'
+          ]
+        },
         tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
@@ -77,12 +83,25 @@ export default defineConfig([
       '@typescript-eslint/prefer-as-const': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-import-type-side-effects': 'error',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        {
+          allowInterfaces: 'always'
+        }
+      ],
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
+      /* Toggle on to do additional until we can clean up existing violations.
+      'vue/no-unused-emit-declarations': 'error',
+      'vue/no-unused-properties': 'error',
+      'vue/no-unused-refs': 'error',
+      'vue/no-use-v-else-with-v-for': 'error',
+      'vue/no-useless-v-bind': 'error',
+      // */
       'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
       // Restrict deprecated PrimeVue components
@@ -162,5 +181,31 @@ export default defineConfig([
         { disallowTypeAnnotations: false }
       ]
     }
+  },
+  {
+    files: ['**/*.spec.ts'],
+    ignores: ['browser_tests/tests/**/*.spec.ts'],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'Program',
+          message: '.spec.ts files are only allowed under browser_tests/tests/'
+        }
+      ]
+    }
+  },
+  {
+    files: ['browser_tests/tests/**/*.test.ts'],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'Program',
+          message:
+            '.test.ts files are not allowed in browser_tests/tests/; use .spec.ts instead'
+        }
+      ]
+    }
   }
 ])

index.html

@@ -8,8 +8,8 @@
     <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
-    <!-- Fullscreen mode on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- Fullscreen mode on mobile browsers -->
+    <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     

knip.config.ts

@@ -1,15 +1,25 @@
 import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
-  entry: [
-    '{build,scripts}/**/*.{js,ts}',
-    'src/assets/css/style.css',
-    'src/main.ts',
-    'src/scripts/ui/menu/index.ts',
-    'src/types/index.ts'
-  ],
-  project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}'],
-  ignoreBinaries: ['only-allow', 'openapi-typescript'],
+  workspaces: {
+    '.': {
+      entry: [
+        '{build,scripts}/**/*.{js,ts}',
+        'src/assets/css/style.css',
+        'src/main.ts',
+        'src/scripts/ui/menu/index.ts',
+        'src/types/index.ts'
+      ],
+      project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
+    },
+    'packages/tailwind-utils': {
+      project: ['src/**/*.{js,ts}']
+    },
+    'packages/design-system': {
+      entry: ['src/**/*.ts'],
+      project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
+    }
+  },
   ignoreDependencies: [
     // Weird importmap things
     '@iconify/json',
@@ -25,9 +35,7 @@ const config: KnipConfig = {
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'src/types/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.0",
+  "version": "1.28.3",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,29 +18,30 @@
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
-    "test:browser": "npx nx e2e",
-    "test:unit": "nx run test tests-ui/tests",
+    "test:all": "nx run test",
+    "test:browser": "pnpm exec nx e2e",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
-    "preinstall": "npx only-allow pnpm",
+    "test:unit": "nx run test tests-ui/tests",
+    "preinstall": "pnpm dlx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "lint": "eslint src --cache",
     "lint:fix": "eslint src --cache --fix",
+    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
+    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:no-cache": "eslint src",
     "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
-    "collect-i18n": "npx playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
-    "@iconify-json/lucide": "^1.2.66",
-    "@iconify/tailwind": "^1.2.0",
     "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "@lobehub/i18n-cli": "^1.25.1",
     "@nx/eslint": "21.4.1",
@@ -94,6 +95,7 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
+    "vue-component-type-helpers": "^3.0.7",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
@@ -103,6 +105,8 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -120,13 +124,13 @@
     "@tiptap/extension-table-row": "^2.10.4",
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
+    "@vueuse/integrations": "^13.9.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "chart.js": "^4.5.0",
-    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -144,7 +148,6 @@
     "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
-    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",

packages/design-system/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@comfyorg/design-system",
+  "version": "1.0.0",
+  "description": "Shared design system for ComfyUI Frontend",
+  "type": "module",
+  "exports": {
+    "./tailwind-config": {
+      "import": "./tailwind.config.ts",
+      "types": "./tailwind.config.ts"
+    },
+    "./css/*": "./src/css/*"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:design"
+    ]
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.1.178",
+    "@iconify/tailwind": "^1.1.3"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.4.5"
+  },
+  "packageManager": "pnpm@10.17.1"
+}