Fix Rectangle/Rect type compatibility and unify type system

This commit addresses PR review comments by fixing the fundamental
type incompatibility between Rectangle (Array<number>) and strict
tuple types (Rect = [x, y, width, height]).

Key changes:
- Updated Rectangle class methods to accept both Rect and Rectangle unions
- Fixed all measure functions (containsRect, overlapBounding, etc.) to accept Rectangle
- Updated boundingRect interfaces to consistently use Rectangle instead of Rect
- Fixed all tests and Vue components to use Rectangle instead of array literals
- Resolved Point type conflicts between litegraph and pathRenderer modules
- Removed ReadOnlyPoint types and unified with Point arrays

The type system is now consistent: boundingRect properties return Rectangle
objects with full functionality, while Rect remains as a simple tuple type
for data interchange.

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

@@ -32,10 +32,11 @@ jobs:
       with:
         repository: Comfy-Org/ComfyUI_frontend
         path: ComfyUI_frontend
-    - 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 ComfyUI_devtools
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_devtools
+        path: ComfyUI/custom_nodes/ComfyUI_devtools
     - name: Checkout custom node repository
       uses: actions/checkout@v4
       with:
@@ -78,7 +79,7 @@ jobs:
         wait-for-it --service 127.0.0.1:8188 -t 600
       working-directory: ComfyUI
     - name: Install Playwright Browsers
-      run: pnpm exec playwright install chromium --with-deps
+      run: npx 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
@@ -86,7 +87,7 @@ jobs:
       run: pnpm dev:electron &
       working-directory: ComfyUI_frontend
     - name: Capture base i18n
-      run: pnpm exec tsx scripts/diff-i18n capture
+      run: npx tsx scripts/diff-i18n capture
       working-directory: ComfyUI_frontend
     - name: Update en.json
       run: pnpm collect-i18n
@@ -99,7 +100,7 @@ jobs:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend
     - name: Diff base vs updated i18n
-      run: pnpm exec tsx scripts/diff-i18n diff
+      run: npx 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: pnpm exec playwright install chromium --with-deps
+      run: npx 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: pnpm exec playwright install chromium --with-deps
+      run: npx 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: pnpm exec playwright install chromium --with-deps
+      run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend
     - name: Run Playwright tests and update snapshots
       id: playwright-tests
-      run: pnpm exec playwright test --update-snapshots
+      run: npx playwright test --update-snapshots
       continue-on-error: true
       working-directory: ComfyUI_frontend
     - uses: actions/upload-artifact@v4

.github/workflows/test-ui.yaml

@@ -27,10 +27,12 @@ jobs:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
-      - 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 ComfyUI_devtools
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_devtools'
+          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
+          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -148,7 +150,7 @@ jobs:
 
       - name: Run Playwright tests (Shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
         id: playwright
-        run: pnpm exec playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
+        run: npx playwright test --project=chromium --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --reporter=blob
         working-directory: ComfyUI_frontend
         env:
           PLAYWRIGHT_BLOB_OUTPUT_DIR: ../blob-report
@@ -230,7 +232,7 @@ jobs:
         run: |
           # Run tests with both HTML and JSON reporters
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright test --project=${{ matrix.browser }} \
+          npx playwright test --project=${{ matrix.browser }} \
             --reporter=list \
             --reporter=html \
             --reporter=json
@@ -281,10 +283,10 @@ jobs:
       - name: Merge into HTML Report
         run: |
           # Generate HTML report
-          pnpm exec playwright merge-reports --reporter=html ./all-blob-reports
+          npx playwright merge-reports --reporter=html ./all-blob-reports
           # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright merge-reports --reporter=json ./all-blob-reports
+          npx 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 }}..."
-          pnpm dlx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+          npx 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 }}..."
-          pnpm dlx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
 
       - name: Validate generated types
         run: |

.gitignore

@@ -22,8 +22,6 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
-.claude/*.local.md
-.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files
@@ -46,7 +44,6 @@ 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() + '/packages/design-system/src/icons'
+              process.cwd() + '/src/assets/icons/custom'
             )
           }
         }),

CODEOWNERS

@@ -1,61 +1,17 @@
-# 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
+# Admins
+* @Comfy-Org/comfy_frontend_devs
 
-# Common UI Components
-/src/components/chip/                             @viva-jinyi
-/src/components/card/                             @viva-jinyi
-/src/components/button/                           @viva-jinyi
-/src/components/input/                            @viva-jinyi
+# Maintainers
+*.md @Comfy-Org/comfy_maintainer
+/tests-ui/ @Comfy-Org/comfy_maintainer
+/browser_tests/ @Comfy-Org/comfy_maintainer
+/.env_example @Comfy-Org/comfy_maintainer
 
-# Topbar
-/src/components/topbar/                           @pythongosssss
+# Translations (AIGODLIKE team + shinshin86)
+/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
 
-# Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss
+# Load 3D extension
+/src/extensions/core/load3d.ts @jtydhr88 @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
+# Mask Editor extension
+/src/extensions/core/maskeditor.ts @brucew4yn3rp @trsommer @Comfy-Org/comfy_frontend_devs

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 `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.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 `src/assets/icons/custom/` and processed by `build/customIconCollection.ts` with automatic validation.
 
-For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
+For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
 
 ## Working with litegraph.js
 

browser_tests/README.md

@@ -16,20 +16,15 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
+Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `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
-pnpm exec playwright install chromium --with-deps
+npx playwright install chromium --with-deps
 ```
 
 ### Environment Configuration
@@ -56,6 +51,14 @@ 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.
@@ -73,7 +76,7 @@ For tests that specifically need to test release functionality, see the example
 **Always use UI mode for development:**
 
 ```bash
-pnpm exec playwright test --ui
+npx playwright test --ui
 ```
 
 UI mode features:
@@ -89,8 +92,8 @@ UI mode features:
 For CI or headless testing:
 
 ```bash
-pnpm exec playwright test                    # Run all tests
-pnpm exec playwright test widget.spec.ts     # Run specific test file
+npx playwright test                    # Run all tests
+npx playwright test widget.spec.ts     # Run specific test file
 ```
 
 ### Local Development Config
@@ -386,7 +389,7 @@ export default defineConfig({
 Option 2 - Generate local baselines for comparison:
 
 ```bash
-pnpm exec playwright test --update-snapshots
+npx 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': 'Top',
+        'Comfy.UseNewMenu': 'Disabled',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,

browser_tests/fixtures/VueNodeHelpers.ts

@@ -13,13 +13,6 @@ 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)
    */
@@ -29,13 +22,6 @@ 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,10 +2,6 @@ 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,10 +15,6 @@ 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,10 +3,6 @@ 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,10 +3,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +4,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +4,6 @@ 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,10 +9,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +2,6 @@ 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,10 +4,6 @@ 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,10 +2,6 @@ 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,10 +3,6 @@ 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,10 +2,6 @@ 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,10 +3,6 @@ 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,7 +40,6 @@ 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,10 +3,6 @@ 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,9 +4,6 @@ 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,10 +2,6 @@ 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,12 +80,6 @@ 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()
 
@@ -108,72 +102,48 @@ test.describe('Templates', () => {
     expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
 
-  test('Uses proper locale files for templates', async ({ comfyPage }) => {
-    // Set locale to French before opening templates
-    await comfyPage.setSetting('Comfy.Locale', 'fr')
-
-    // Load the templates dialog and wait for the French index file request
-    const requestPromise = comfyPage.page.waitForRequest(
-      '**/templates/index.fr.json'
-    )
-
-    await comfyPage.executeCommand('Comfy.BrowseTemplates')
-
-    const request = await requestPromise
-
-    // Verify French index was requested
-    expect(request.url()).toContain('templates/index.fr.json')
-
-    await expect(comfyPage.templates.content).toBeVisible()
-  })
-
-  test('Falls back to English templates when locale file not found', async ({
+  test('Uses title field as fallback when the key is not found in locales', async ({
     comfyPage
   }) => {
-    // Set locale to a language that doesn't have a template file
-    await comfyPage.setSetting('Comfy.Locale', 'de') // German - no index.de.json exists
-
-    // Wait for the German request (expected to 404)
-    const germanRequestPromise = comfyPage.page.waitForRequest(
-      '**/templates/index.de.json'
-    )
-
-    // Wait for the fallback English request
-    const englishRequestPromise = comfyPage.page.waitForRequest(
-      '**/templates/index.json'
-    )
-
-    // Intercept the German file to simulate a 404
-    await comfyPage.page.route('**/templates/index.de.json', async (route) => {
+    // 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'
+            }
+          ]
+        }
+      ]
       await route.fulfill({
-        status: 404,
-        headers: { 'Content-Type': 'text/plain' },
-        body: 'Not Found'
+        status: 200,
+        body: JSON.stringify(response),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
       })
     })
 
-    // Allow the English index to load normally
-    await comfyPage.page.route('**/templates/index.json', (route) =>
-      route.continue()
-    )
-
     // Load the templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
 
-    // Verify German was requested first, then English as fallback
-    const germanRequest = await germanRequestPromise
-    const englishRequest = await englishRequestPromise
-
-    expect(germanRequest.url()).toContain('templates/index.de.json')
-    expect(englishRequest.url()).toContain('templates/index.json')
-
-    // Verify English titles are shown as fallback
+    // Expect the title to be used as fallback for template cards
     await expect(
-      comfyPage.templates.content.getByRole('heading', {
-        name: 'Image Generation'
-      })
+      comfyPage.templates.content.getByText('FALLBACK TEMPLATE NAME')
     ).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 ({
@@ -181,33 +151,46 @@ test.describe('Templates', () => {
   }) => {
     // Open templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await comfyPage.templates.content.waitFor({ state: 'visible' })
+    await expect(comfyPage.templates.content).toBeVisible()
 
-    const templateGrid = comfyPage.page.locator(
-      '[data-testid="template-workflows-content"]'
-    )
-    const nav = comfyPage.page
-      .locator('header')
-      .filter({ hasText: 'Templates' })
+    // Wait for at least one template card to appear
+    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
+      timeout: 5000
+    })
 
-    const cardCount = await comfyPage.page
-      .locator('[data-testid^="template-workflow-"]')
-      .count()
-    expect(cardCount).toBeGreaterThan(0)
+    // Take snapshot of the template grid
+    const templateGrid = comfyPage.templates.content.locator('.grid').first()
     await expect(templateGrid).toBeVisible()
-    await expect(nav).toBeVisible() // Nav should be visible at desktop size
+    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
 
-    const mobileSize = { width: 640, height: 800 }
-    await comfyPage.page.setViewportSize(mobileSize)
-    expect(cardCount).toBeGreaterThan(0)
+    // Check cards at mobile viewport size
+    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
     await expect(templateGrid).toBeVisible()
-    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
 
-    const tabletSize = { width: 1024, height: 800 }
-    await comfyPage.page.setViewportSize(tabletSize)
-    expect(cardCount).toBeGreaterThan(0)
+    // Check cards at tablet size
+    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
     await expect(templateGrid).toBeVisible()
-    await expect(nav).toBeVisible() // Nav should be visible at tablet size
+    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')
   })
 
   test('template cards descriptions adjust height dynamically', async ({
@@ -274,42 +257,21 @@ test.describe('Templates', () => {
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
     await expect(comfyPage.templates.content).toBeVisible()
 
-    // Wait for cards to load
+    // Verify cards are visible with varying content lengths
     await expect(
-      comfyPage.page.locator(
-        '[data-testid="template-workflow-short-description"]'
-      )
+      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')
     ).toBeVisible({ timeout: 5000 })
 
-    // Verify all three cards with different descriptions are visible
-    const shortDescCard = comfyPage.page.locator(
-      '[data-testid="template-workflow-short-description"]'
-    )
-    const mediumDescCard = comfyPage.page.locator(
-      '[data-testid="template-workflow-medium-description"]'
-    )
-    const longDescCard = comfyPage.page.locator(
-      '[data-testid="template-workflow-long-description"]'
-    )
-
-    await expect(shortDescCard).toBeVisible()
-    await expect(mediumDescCard).toBeVisible()
-    await expect(longDescCard).toBeVisible()
-
-    // Verify descriptions are visible and have line-clamp class
-    // The description is in a p tag with text-muted class
-    const shortDesc = shortDescCard.locator('p.text-muted.line-clamp-2')
-    const mediumDesc = mediumDescCard.locator('p.text-muted.line-clamp-2')
-    const longDesc = longDescCard.locator('p.text-muted.line-clamp-2')
-
-    await expect(shortDesc).toContainText('short description')
-    await expect(mediumDesc).toContainText('medium length description')
-    await expect(longDesc).toContainText('much longer description')
-
-    // Verify grid layout maintains consistency
-    const templateGrid = comfyPage.page.locator(
-      '[data-testid="template-workflows-content"]'
-    )
+    // Take snapshot of a grid with specific cards
+    const templateGrid = comfyPage.templates.content
+      .locator('.grid:has-text("Short Description")')
+      .first()
     await expect(templateGrid).toBeVisible()
     await expect(templateGrid).toHaveScreenshot(
       'template-grid-varying-content.png'

browser_tests/tests/useSettingSearch.spec.ts

@@ -2,10 +2,6 @@ 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,7 +85,6 @@ 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({
@@ -107,11 +106,6 @@ 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/NodeHeader.spec.ts

@@ -1,20 +1,67 @@
 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('Vue Node Collapse', () => {
+test.describe('NodeHeader', () => {
   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('should allow collapsing node with collapse icon', async ({
-    comfyPage
-  }) => {
+  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 }) => {
     // Get the KSampler node from the default workflow
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
@@ -43,7 +90,7 @@ test.describe('Vue Node Collapse', () => {
     expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
   })
 
-  test('should show collapse/expand icon state', async ({ comfyPage }) => {
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
     const nodes = await comfyPage.getNodeRefsByType('KSampler')
     const node = nodes[0]
     const vueNode = new VueNodeFixture(node, comfyPage.page)
@@ -63,9 +110,7 @@ test.describe('Vue Node Collapse', () => {
     expect(iconClass).toContain('pi-chevron-down')
   })
 
-  test('should preserve title when collapsing/expanding', async ({
-    comfyPage
-  }) => {
+  test('preserves 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/deleteKeyInteraction.spec.ts

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,791 +0,0 @@
-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/rename.spec.ts

@@ -1,76 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -0,0 +1,221 @@
+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

@@ -1,45 +0,0 @@
-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/colors.spec.ts

@@ -1,49 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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,10 +2,6 @@ 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)
@@ -322,9 +318,6 @@ 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,6 +3,7 @@
   "compilerOptions": {
     /* Test files should not be compiled */
     "noEmit": true,
+    // "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "resolveJsonModule": true

build/customIconCollection.ts

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'
 
 const fileName = fileURLToPath(import.meta.url)
 const dirName = dirname(fileName)
-const customIconsPath = join(dirName, 'icons')
+const customIconsPath = join(dirName, '..', 'src', 'assets', 'icons', 'custom')
 
 // Iconify collection structure
 interface IconifyIcon {

build/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "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
-pnpm exec vite build --watch
+npx vite build --watch
 ```
 
 Note: Watch mode provides faster rebuilds than full builds, but still no hot reload

eslint.config.ts

@@ -33,13 +33,7 @@ export default defineConfig([
       },
       parserOptions: {
         parser: tseslint.parser,
-        projectService: {
-          allowDefaultProject: [
-            'vite.config.mts',
-            'vite.electron.config.mts',
-            'vite.types.config.mts'
-          ]
-        },
+        projectService: true,
         tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
@@ -83,25 +77,12 @@ 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
@@ -181,31 +162,5 @@ 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 mobile browsers -->
-    <meta name="mobile-web-app-capable" content="yes">
+    <!-- Fullscreen mode on iOS -->
+    <meta name="apple-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,25 +1,15 @@
 import type { KnipConfig } from 'knip'
 
 const config: KnipConfig = {
-  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}']
-    }
-  },
+  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'],
   ignoreDependencies: [
     // Weird importmap things
     '@iconify/json',
@@ -35,7 +25,9 @@ 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'
+    'src/scripts/ui/components/splitButton.ts',
+    // Staged for for use with subgraph widget promotion
+    'src/lib/litegraph/src/widgets/DisconnectedWidget.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.3",
+  "version": "1.28.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,30 +18,29 @@
     "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:all": "nx run test",
-    "test:browser": "pnpm exec nx e2e",
+    "test:browser": "npx nx e2e",
+    "test:unit": "nx run test tests-ui/tests",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
-    "test:unit": "nx run test tests-ui/tests",
-    "preinstall": "pnpm dlx only-allow pnpm",
+    "preinstall": "npx 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": "pnpm exec playwright test --config=playwright.i18n.config.ts",
+    "collect-i18n": "npx 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",
@@ -95,7 +94,6 @@
     "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",
@@ -105,8 +103,6 @@
     "@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",
@@ -124,13 +120,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",
@@ -148,6 +144,7 @@
     "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

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