code improve

.claude/commands/comprehensive-pr-review.md

@@ -67,9 +67,9 @@ This is critical for better file inspection:
 
 Use git locally for much faster analysis:
 
-1. Get list of changed files: `git diff --name-only "$BASE_SHA" > changed_files.txt`
-2. Get the full diff: `git diff "$BASE_SHA" > pr_diff.txt`
-3. Get detailed file changes with status: `git diff --name-status "$BASE_SHA" > file_changes.txt`
+1. Get list of changed files: `git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt`
+2. Get the full diff: `git diff "origin/$BASE_BRANCH" > pr_diff.txt`
+3. Get detailed file changes with status: `git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt`
 
 ### Step 1.5: Create Analysis Cache
 

.gitattributes

@@ -13,4 +13,4 @@
 
 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true
-src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true
+src/types/generatedManagerTypes.ts linguist-generated=true

.github/workflows/backport.yaml

@@ -4,25 +4,10 @@ on:
   pull_request_target:
     types: [closed, labeled]
     branches: [main]
-  workflow_dispatch:
-    inputs:
-      pr_number:
-        description: 'PR number to backport'
-        required: true
-        type: string
-      force_rerun:
-        description: 'Force rerun even if backports exist'
-        required: false
-        type: boolean
-        default: false
 
 jobs:
   backport:
-    if: >
-      (github.event_name == 'pull_request_target' && 
-       github.event.pull_request.merged == true && 
-       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
-      github.event_name == 'workflow_dispatch'
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -30,35 +15,6 @@ jobs:
       issues: write
 
     steps:
-      - name: Validate inputs for manual triggers
-        if: github.event_name == 'workflow_dispatch'
-        run: |
-          # Validate PR number format
-          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
-            echo "::error::Invalid PR number format. Must be a positive integer."
-            exit 1
-          fi
-          
-          # Validate PR exists and is merged
-          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
-            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
-            exit 1
-          fi
-          
-          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
-          if [ "$MERGED" != "true" ]; then
-            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
-            exit 1
-          fi
-          
-          # Validate PR has needs-backport label
-          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
-            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
-            exit 1
-          fi
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -73,7 +29,7 @@ jobs:
         id: check-existing
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
         run: |
           # Check for existing backport PRs for this PR number
           EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
@@ -83,13 +39,6 @@ jobs:
             exit 0
           fi
           
-          # For manual triggers with force_rerun, proceed anyway
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ "${{ inputs.force_rerun }}" = "true" ]; then
-            echo "skip=false" >> $GITHUB_OUTPUT
-            echo "::warning::Force rerun requested - existing backports will be updated"
-            exit 0
-          fi
-          
           echo "Found existing backport PRs:"
           echo "$EXISTING_BACKPORTS"
           echo "skip=true" >> $GITHUB_OUTPUT
@@ -101,17 +50,8 @@ jobs:
         run: |
           # Extract version labels (e.g., "1.24", "1.22")
           VERSIONS=""
-          
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            # For manual triggers, get labels from the PR
-            LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
-          else
-            # For automatic triggers, extract from PR event
-            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-            LABELS=$(echo "$LABELS" | jq -r '.[].name')
-          fi
-          
-          for label in $LABELS; do
+          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+          for label in $(echo "$LABELS" | jq -r '.[].name'); do
             # Match version labels like "1.24" (major.minor only)
             if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
               # Validate the branch exists before adding to list
@@ -135,20 +75,12 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true'
         id: backport
         env:
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
         run: |
           FAILED=""
           SUCCESS=""
-          
-          # Get PR data for manual triggers
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
-            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
-            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
-          else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
-          fi
 
           for version in ${{ steps.versions.outputs.versions }}; do
             echo "::group::Backporting to core/${version}"
@@ -201,18 +133,10 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
         run: |
-          # Get PR data for manual triggers
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
-            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
-            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
-          else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          fi
-          
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r version branch <<< "${backport}"
 
@@ -241,16 +165,9 @@ jobs:
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
-          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
-            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
-            PR_NUMBER="${{ inputs.pr_number }}"
-            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
-            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
-          else
-            PR_NUMBER="${{ github.event.pull_request.number }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
-          fi
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
 
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r version reason conflicts <<< "${failure}"

.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:

.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

.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/
@@ -81,8 +78,8 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static
 
-# MCP Servers
-.playwright-mcp/*
+
+
 
 .nx/cache
 .nx/workspace-data

.i18nrc.cjs

@@ -9,7 +9,7 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr'],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.

.storybook/main.ts

@@ -15,32 +15,21 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     // Use dynamic import to avoid CJS deprecation warning
     const { mergeConfig } = await import('vite')
-    const { default: tailwindcss } = await import('@tailwindcss/vite')
 
     // Filter out any plugins that might generate import maps
     if (config.plugins) {
-      config.plugins = config.plugins
-        // Type guard: ensure we have valid plugin objects with names
-        .filter(
-          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
-            return (
-              plugin !== null &&
-              plugin !== undefined &&
-              typeof plugin === 'object' &&
-              'name' in plugin &&
-              typeof plugin.name === 'string'
-            )
-          }
-        )
-        // Business logic: filter out import-map plugins
-        .filter((plugin) => !plugin.name.includes('import-map'))
+      config.plugins = config.plugins.filter((plugin: any) => {
+        if (plugin && plugin.name && plugin.name.includes('import-map')) {
+          return false
+        }
+        return true
+      })
     }
 
     return mergeConfig(config, {
       // Replace plugins entirely to avoid inheritance issues
       plugins: [
         // Only include plugins we explicitly need for Storybook
-        tailwindcss(),
         Icons({
           compiler: 'vue3',
           customCollections: {

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
-import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
+import type { Preview } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -9,9 +9,11 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
-import '@/assets/css/style.css'
-import { i18n } from '@/i18n'
-import '@/lib/litegraph/public/css/litegraph.css'
+import '../src/assets/css/style.css'
+import { i18n } from '../src/i18n'
+import '../src/lib/litegraph/public/css/litegraph.css'
+import { useWidgetStore } from '../src/stores/widgetStore'
+import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -23,11 +25,13 @@ const ComfyUIPreset = definePreset(Aura, {
 // Setup Vue app for Storybook
 setup((app) => {
   app.directive('tooltip', Tooltip)
-
-  // Create Pinia instance
   const pinia = createPinia()
-
   app.use(pinia)
+
+  // Initialize stores
+  useColorPaletteStore(pinia)
+  useWidgetStore(pinia)
+
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {
@@ -46,8 +50,8 @@ setup((app) => {
   app.use(ToastService)
 })
 
-// Theme and dialog decorator
-export const withTheme = (Story: StoryFn, context: StoryContext) => {
+// Dark theme decorator
+export const withTheme = (Story: any, context: any) => {
   const theme = context.globals.theme || 'light'
 
   // Apply theme class to document root
@@ -59,7 +63,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
     document.body.classList.remove('dark-theme')
   }
 
-  return Story(context.args, context)
+  return Story()
 }
 
 const preview: Preview = {

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

browser_tests/README.md

@@ -16,14 +16,9 @@ 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:
@@ -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.

browser_tests/assets/vueNodes/simple-triple.json

@@ -1 +0,0 @@
-{"id":"4412323e-2509-4258-8abc-68ddeea8f9e1","revision":0,"last_node_id":39,"last_link_id":29,"nodes":[{"id":37,"type":"KSampler","pos":[3635.923095703125,870.237548828125],"size":[428,437],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"model","name":"model","type":"MODEL","link":null},{"localized_name":"positive","name":"positive","type":"CONDITIONING","link":null},{"localized_name":"negative","name":"negative","type":"CONDITIONING","link":null},{"localized_name":"latent_image","name":"latent_image","type":"LATENT","link":null},{"localized_name":"seed","name":"seed","type":"INT","widget":{"name":"seed"},"link":null},{"localized_name":"steps","name":"steps","type":"INT","widget":{"name":"steps"},"link":null},{"localized_name":"cfg","name":"cfg","type":"FLOAT","widget":{"name":"cfg"},"link":null},{"localized_name":"sampler_name","name":"sampler_name","type":"COMBO","widget":{"name":"sampler_name"},"link":null},{"localized_name":"scheduler","name":"scheduler","type":"COMBO","widget":{"name":"scheduler"},"link":null},{"localized_name":"denoise","name":"denoise","type":"FLOAT","widget":{"name":"denoise"},"link":null}],"outputs":[{"localized_name":"LATENT","name":"LATENT","type":"LATENT","links":null}],"properties":{"Node name for S&R":"KSampler"},"widgets_values":[0,"randomize",20,8,"euler","simple",1]},{"id":38,"type":"VAEDecode","pos":[4164.01611328125,925.5230712890625],"size":[193.25,107],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"samples","name":"samples","type":"LATENT","link":null},{"localized_name":"vae","name":"vae","type":"VAE","link":null}],"outputs":[{"localized_name":"IMAGE","name":"IMAGE","type":"IMAGE","links":null}],"properties":{"Node name for S&R":"VAEDecode"}},{"id":39,"type":"CLIPTextEncode","pos":[3259.289794921875,927.2508544921875],"size":[239.9375,155],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"clip","name":"clip","type":"CLIP","link":null},{"localized_name":"text","name":"text","type":"STRING","widget":{"name":"text"},"link":null}],"outputs":[{"localized_name":"CONDITIONING","name":"CONDITIONING","type":"CONDITIONING","links":null}],"properties":{"Node name for S&R":"CLIPTextEncode"},"widgets_values":[""]}],"links":[],"groups":[],"config":{},"extra":{"ds":{"scale":1.1576250000000001,"offset":[-2808.366467322067,-478.34316506594797]}},"version":0.4}

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/UserSelectPage.ts

@@ -1,5 +1,4 @@
-import type { Page } from '@playwright/test'
-import { test as base } from '@playwright/test'
+import { Page, test as base } from '@playwright/test'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/VueNodeHelpers.ts

@@ -22,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/fixtures/components/ComfyNodeSearchBox.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}

browser_tests/fixtures/components/SettingDialog.ts

@@ -1,6 +1,6 @@
-import type { Page } from '@playwright/test'
+import { Page } from '@playwright/test'
 
-import type { ComfyPage } from '../ComfyPage'
+import { ComfyPage } from '../ComfyPage'
 
 export class SettingDialog {
   constructor(

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 class SidebarTab {
   constructor(

browser_tests/fixtures/components/Topbar.ts

@@ -1,5 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Locator, Page, expect } from '@playwright/test'
 
 export class Topbar {
   private readonly menuLocator: Locator

browser_tests/fixtures/ws.ts

@@ -12,10 +12,9 @@ export const webSocketFixture = base.extend<{
           // so we can look it up to trigger messages
           const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
           window.WebSocket = class extends window.WebSocket {
-            constructor(
-              ...rest: ConstructorParameters<typeof window.WebSocket>
-            ) {
-              super(...rest)
+            constructor() {
+              // @ts-expect-error
+              super(...arguments)
               store[this.url] = this
             }
           }

browser_tests/globalSetup.ts

@@ -1,4 +1,4 @@
-import type { FullConfig } from '@playwright/test'
+import { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'

browser_tests/globalTeardown.ts

@@ -1,4 +1,4 @@
-import type { FullConfig } from '@playwright/test'
+import { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { restorePath } from './utils/backupUtils'

browser_tests/helpers/fitToView.ts

@@ -1,104 +0,0 @@
-import type { ReadOnlyRect } from '../../src/lib/litegraph/src/interfaces'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-
-interface FitToViewOptions {
-  selectionOnly?: boolean
-  zoom?: number
-  padding?: number
-}
-
-/**
- * Instantly fits the canvas view to graph content without waiting for UI animation.
- *
- * Lives outside the shared fixture to keep the default ComfyPage interactions user-oriented.
- */
-export async function fitToViewInstant(
-  comfyPage: ComfyPage,
-  options: FitToViewOptions = {}
-) {
-  const { selectionOnly = false, zoom = 0.75, padding = 10 } = options
-
-  const rectangles = await comfyPage.page.evaluate<
-    ReadOnlyRect[] | null,
-    { selectionOnly: boolean }
-  >(
-    ({ selectionOnly }) => {
-      const app = window['app']
-      if (!app?.canvas) return null
-
-      const canvas = app.canvas
-      const items = (() => {
-        if (selectionOnly && canvas.selectedItems?.size) {
-          return Array.from(canvas.selectedItems)
-        }
-        try {
-          return Array.from(canvas.positionableItems ?? [])
-        } catch {
-          return []
-        }
-      })()
-
-      if (!items.length) return null
-
-      const rects: ReadOnlyRect[] = []
-
-      for (const item of items) {
-        const rect = item?.boundingRect
-        if (!rect) continue
-
-        const x = Number(rect[0])
-        const y = Number(rect[1])
-        const width = Number(rect[2])
-        const height = Number(rect[3])
-
-        rects.push([x, y, width, height] as const)
-      }
-
-      return rects.length ? rects : null
-    },
-    { selectionOnly }
-  )
-
-  if (!rectangles || rectangles.length === 0) return
-
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-
-  for (const [x, y, width, height] of rectangles) {
-    minX = Math.min(minX, Number(x))
-    minY = Math.min(minY, Number(y))
-    maxX = Math.max(maxX, Number(x) + Number(width))
-    maxY = Math.max(maxY, Number(y) + Number(height))
-  }
-
-  const hasFiniteBounds =
-    Number.isFinite(minX) &&
-    Number.isFinite(minY) &&
-    Number.isFinite(maxX) &&
-    Number.isFinite(maxY)
-
-  if (!hasFiniteBounds) return
-
-  const bounds: ReadOnlyRect = [
-    minX - padding,
-    minY - padding,
-    maxX - minX + 2 * padding,
-    maxY - minY + 2 * padding
-  ]
-
-  await comfyPage.page.evaluate(
-    ({ bounds, zoom }) => {
-      const app = window['app']
-      if (!app?.canvas) return
-
-      const canvas = app.canvas
-      canvas.ds.fitToBounds(bounds, { zoom })
-      canvas.setDirty(true, true)
-    },
-    { bounds, zoom }
-  )
-
-  await comfyPage.nextFrame()
-}

browser_tests/helpers/manageGroupNode.ts

@@ -1,4 +1,4 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 
 export class ManageGroupNode {
   footer: Locator

browser_tests/helpers/templates.ts

@@ -1,7 +1,7 @@
-import type { Locator, Page } from '@playwright/test'
+import { Locator, Page } from '@playwright/test'
 import path from 'path'
 
-import type {
+import {
   TemplateInfo,
   WorkflowTemplates
 } from '../../src/platform/workflow/templates/types/template'

browser_tests/tests/actionbar.spec.ts

@@ -29,9 +29,9 @@ test.describe('Actionbar', () => {
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0
-    await comfyPage.page.route('**/api/prompt', async (route, req) => {
+    comfyPage.page.route('**/api/prompt', async (route, req) => {
       await new Promise((r) => setTimeout(r, 100))
-      await route.fulfill({
+      route.fulfill({
         status: 200,
         body: JSON.stringify({
           prompt_id: promptNumber,

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

@@ -1,5 +1,5 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
+  ComfyPage,
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
@@ -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

@@ -1,12 +1,7 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Page, 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

@@ -1,13 +1,8 @@
-import type { Locator } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Locator, 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/extensionAPI.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { SettingParams } from '../../src/platform/settings/types'
+import { SettingParams } from '../../src/platform/settings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {

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

@@ -1,13 +1,8 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { ComfyPage, 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

@@ -1,17 +1,12 @@
-import type { Locator } from '@playwright/test'
-import { expect } from '@playwright/test'
-import type { Position } from '@vueuse/core'
+import { Locator, expect } from '@playwright/test'
+import { Position } from '@vueuse/core'
 
 import {
   type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
+import { type NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {

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/remoteWidgets.spec.ts

@@ -1,7 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Remote COMBO Widget', () => {
   const mockOptions = ['d', 'c', 'b', 'a']

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/sidebar/queue.spec.ts

@@ -160,9 +160,7 @@ test.describe.skip('Queue sidebar', () => {
       comfyPage
     }) => {
       await comfyPage.nextFrame()
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
     })
 
     test('maintains active gallery item when new tasks are added', async ({
@@ -176,9 +174,7 @@ test.describe.skip('Queue sidebar', () => {
       const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
       await newTask.waitFor({ state: 'visible' })
       // The active gallery item should still be the initial image
-      await expect(
-        comfyPage.menu.queueTab.getGalleryImage(firstImage)
-      ).toBeVisible()
+      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
     })
 
     test.describe('Gallery navigation', () => {
@@ -200,9 +196,7 @@ test.describe.skip('Queue sidebar', () => {
               delay: 256
             })
           await comfyPage.nextFrame()
-          await expect(
-            comfyPage.menu.queueTab.getGalleryImage(end)
-          ).toBeVisible()
+          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
         })
       })
     })

browser_tests/tests/templates.spec.ts

@@ -1,5 +1,4 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
+import { Page, expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 

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

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import type { SystemStats } from '../../src/schemas/apiSchema'
+import { SystemStats } from '../../src/schemas/apiSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Version Mismatch Warnings', () => {
@@ -106,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

@@ -6,7 +6,7 @@ import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
 
 test.describe('NodeHeader', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

browser_tests/tests/vueNodes/deleteKeyInteraction.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('Vue Nodes - Delete Key Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Enable Vue nodes rendering

browser_tests/tests/vueNodes/linkInteraction.spec.ts

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

browser_tests/tests/vueNodes/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/nodeInteractions/selectionState.spec.ts

@@ -1,51 +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' }
-  ] 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/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/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/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/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

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    /* Test files should not be compiled */
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true
-  },
-  "include": [
-    "**/*.ts",
-  ]
-}

build/plugins/comfyAPIPlugin.ts

@@ -1,5 +1,5 @@
 import path from 'path'
-import type { Plugin } from 'vite'
+import { Plugin } from 'vite'
 
 interface ShimResult {
   code: string

build/plugins/generateImportMapPlugin.ts

@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
 import fs from 'fs-extra'
 import { dirname, join } from 'node:path'
-import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
+import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
 
 interface ImportMapSource {
   name: string

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"
-  ]
-}

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
@@ -172,14 +153,5 @@ export default defineConfig([
         }
       ]
     }
-  },
-  {
-    files: ['tests-ui/**/*'],
-    rules: {
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        { disallowTypeAnnotations: false }
-      ]
-    }
   }
 ])

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

@@ -22,12 +22,13 @@ const config: KnipConfig = {
   ],
   ignore: [
     // Auto generated manager types
-    'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
+    'src/types/generatedManagerTypes.ts',
     'src/types/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
     'src/scripts/ui/components/splitButton.ts',
     // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
+    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts',
+    'src/core/graph/operations/types.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.2",
+  "version": "1.27.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,18 +18,15 @@
     "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": "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": "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",
@@ -97,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",
@@ -107,7 +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/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -131,6 +126,7 @@
     "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/tailwind-utils/README.md

@@ -1,31 +0,0 @@
-# @comfyorg/tailwind-utils
-
-Shared Tailwind CSS utility functions for the ComfyUI Frontend monorepo.
-
-## Usage
-
-The `cn` function combines `clsx` and `tailwind-merge` to handle conditional classes and resolve Tailwind conflicts.
-
-```typescript
-import { cn } from '@comfyorg/tailwind-utils'
-
-// Use with conditional classes (object)
-<div :class="cn('transition-opacity', { 'opacity-75': !isHovered })" />
-
-// Use with conditional classes (ternary)
-<button
-  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
-/>
-```
-
-## Installation
-
-This package is part of the ComfyUI Frontend monorepo and is automatically available to all workspace packages.
-
-```json
-{
-  "dependencies": {
-    "@comfyorg/tailwind-utils": "workspace:*"
-  }
-}
-```

packages/tailwind-utils/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "@comfyorg/tailwind-utils",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "Shared Tailwind CSS utilities for ComfyUI Frontend",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
-  "exports": {
-    ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts"
-    }
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:util"
-    ]
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.2.0"
-  },
-  "devDependencies": {
-    "typescript": "^5.4.5"
-  }
-}

packages/tailwind-utils/src/index.ts

@@ -1,8 +0,0 @@
-import clsx, { type ClassArray } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export type { ClassValue } from 'clsx'
-
-export function cn(...inputs: ClassArray) {
-  return twMerge(clsx(inputs))
-}

packages/tailwind-utils/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "outDir": "dist"
-  },
-  "include": ["src/**/*"]
-}

pnpm-lock.yaml

@@ -17,9 +17,6 @@ importers:
       '@comfyorg/comfyui-electron-types':
         specifier: 0.4.73-0
         version: 0.4.73-0
-      '@comfyorg/tailwind-utils':
-        specifier: workspace:*
-        version: link:packages/tailwind-utils
       '@iconify/json':
         specifier: ^2.2.380
         version: 2.2.380
@@ -89,6 +86,9 @@ importers:
       chart.js:
         specifier: ^4.5.0
         version: 4.5.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       dompurify:
         specifier: ^3.2.5
         version: 3.2.5
@@ -140,6 +140,9 @@ importers:
       semver:
         specifier: ^7.7.2
         version: 7.7.2
+      tailwind-merge:
+        specifier: ^3.3.1
+        version: 3.3.1
       three:
         specifier: ^0.170.0
         version: 0.170.0
@@ -336,9 +339,6 @@ importers:
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/debug@4.1.12)(@types/node@20.14.10)(@vitest/ui@3.2.4)(happy-dom@15.11.0)(jsdom@26.1.0)(lightningcss@1.30.1)(terser@5.39.2)
-      vue-component-type-helpers:
-        specifier: ^3.0.7
-        version: 3.0.7
       vue-eslint-parser:
         specifier: ^10.2.0
         version: 10.2.0(eslint@9.35.0(jiti@2.4.2))
@@ -352,19 +352,6 @@ importers:
         specifier: ^3.24.1
         version: 3.24.1(zod@3.24.1)
 
-  packages/tailwind-utils:
-    dependencies:
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      tailwind-merge:
-        specifier: ^2.2.0
-        version: 2.6.0
-    devDependencies:
-      typescript:
-        specifier: ^5.4.5
-        version: 5.9.2
-
 packages:
 
   '@adobe/css-tools@4.4.3':
@@ -5898,8 +5885,8 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+  tailwind-merge@3.3.1:
+    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
 
   tailwindcss-primeui@0.6.1:
     resolution: {integrity: sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==}
@@ -6333,9 +6320,6 @@ packages:
   vue-component-type-helpers@3.0.7:
     resolution: {integrity: sha512-TvyUcFXmjZcXUvU+r1MOyn4/vv4iF+tPwg5Ig33l/FJ3myZkxeQpzzQMLMFWcQAjr6Xs7BRwVy/TwbmNZUA/4w==}
 
-  vue-component-type-helpers@3.0.8:
-    resolution: {integrity: sha512-WyR30Eq15Y/+odrUUMax6FmPbZwAp/HnC7qgR1r3lVFAcqwQ4wUoV79Mbh4SxDy3NiqDa+G4TOKD5xXSgBHo5A==}
-
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -8892,7 +8876,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.0.8
+      vue-component-type-helpers: 3.0.7
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -13088,7 +13072,7 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
-  tailwind-merge@2.6.0: {}
+  tailwind-merge@3.3.1: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
     dependencies:
@@ -13558,8 +13542,6 @@ snapshots:
 
   vue-component-type-helpers@3.0.7: {}
 
-  vue-component-type-helpers@3.0.8: {}
-
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       vue: 3.5.13(typescript@5.9.2)

scripts/collect-i18n-general.ts

@@ -2,7 +2,6 @@ import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
-import { DESKTOP_DIALOGS } from '../src/constants/desktopDialogs'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
@@ -132,23 +131,6 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     ])
   )
 
-  // Desktop Dialogs
-  const allDesktopDialogsLocale = Object.fromEntries(
-    Object.values(DESKTOP_DIALOGS).map((dialog) => [
-      normalizeI18nKey(dialog.id),
-      {
-        title: dialog.title,
-        message: dialog.message,
-        buttons: Object.fromEntries(
-          dialog.buttons.map((button) => [
-            normalizeI18nKey(button.label),
-            button.label
-          ])
-        )
-      }
-    ])
-  )
-
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -162,8 +144,7 @@ test('collect-i18n-general', async ({ comfyPage }) => {
           ...allSettingCategoriesLocale
         },
         serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale,
-        desktopDialogs: allDesktopDialogsLocale
+        serverConfigCategories: allServerConfigCategoriesLocale
       },
       null,
       2

scripts/collect-i18n-node-defs.ts

@@ -9,18 +9,9 @@ import { normalizeI18nKey } from '../src/utils/formatUtil'
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
-interface WidgetInfo {
-  name?: string
-  label?: string
-}
-
-interface WidgetLabels {
-  [key: string]: Record<string, { name: string }>
-}
-
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  await comfyPage.page.route('**/view**', async (route) => {
+  comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })
@@ -29,7 +20,6 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   const nodeDefs: ComfyNodeDefImpl[] = (
     Object.values(
       await comfyPage.page.evaluate(async () => {
-        // @ts-expect-error - app is dynamically added to window
         const api = window['app'].api as ComfyApi
         return await api.getNodeDefs()
       })
@@ -62,7 +52,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   )
 
   async function extractWidgetLabels() {
-    const nodeLabels: WidgetLabels = {}
+    const nodeLabels = {}
 
     for (const nodeDef of nodeDefs) {
       const inputNames = Object.values(nodeDef.inputs).map(
@@ -75,15 +65,12 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         const widgetsMappings = await comfyPage.page.evaluate(
           (args) => {
             const [nodeName, displayName, inputNames] = args
-            // @ts-expect-error - LiteGraph is dynamically added to window
             const node = window['LiteGraph'].createNode(nodeName, displayName)
             if (!node.widgets?.length) return {}
             return Object.fromEntries(
               node.widgets
-                .filter(
-                  (w: WidgetInfo) => w?.name && !inputNames.includes(w.name)
-                )
-                .map((w: WidgetInfo) => [w.name, w.label])
+                .filter((w) => w?.name && !inputNames.includes(w.name))
+                .map((w) => [w.name, w.label])
             )
           },
           [nodeDef.name, nodeDef.display_name, inputNames]

scripts/diff-i18n.ts

@@ -72,7 +72,7 @@ function capture(srcLocaleDir: string, tempBaseDir: string) {
     const relativePath = file.replace(srcLocaleDir, '')
     const targetPath = join(tempBaseDir, relativePath)
     ensureDir(dirname(targetPath))
-    writeFileSync(targetPath, readFileSync(file, 'utf8'))
+    writeFileSync(targetPath, readFileSync(file))
   }
   console.log('Captured current locale files to temp/base/')
 }

scripts/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    /* Script files configuration */
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "resolveJsonModule": true
-  },
-  "include": [
-    "**/*.ts"
-  ]
-}

src/App.vue

@@ -17,8 +17,8 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
+import { useConflictDetection } from './composables/useConflictDetection'
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()

src/assets/css/style.css

@@ -66,8 +66,6 @@
   --color-charcoal-700: #202121;
   --color-charcoal-800: #171718;
 
-  --color-neutral-550: #636363;
-
   --color-stone-100: #444444;
   --color-stone-200: #828282;
   --color-stone-300: #bbbbbb;
@@ -89,8 +87,6 @@
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
-  --color-pure-white: #ffffff;
-
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
@@ -107,10 +103,6 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-coral-red-600: #973a40;
-  --color-coral-red-500: #c53f49;
-  --color-coral-red-400: #dd424e;
-
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
@@ -931,6 +923,48 @@ audio.comfy-audio.empty-audio-widget {
 }
 /* End of [Desktop] Electron window specific styles */
 
+/* Vue Node LOD (Level of Detail) System */
+/* These classes control rendering detail based on zoom level */
+
+/* Minimal LOD (zoom <= 0.4) - Title only for performance */
+.lg-node--lod-minimal {
+  min-height: 32px;
+  transition: min-height 0.2s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+  backdrop-filter: none;
+}
+
+.lg-node--lod-minimal .lg-node-body {
+  display: none !important;
+}
+
+/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
+.lg-node--lod-reduced {
+  transition: opacity 0.1s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+}
+
+.lg-node--lod-reduced .lg-widget-label,
+.lg-node--lod-reduced .lg-slot-label {
+  display: none;
+}
+
+.lg-node--lod-reduced .lg-slot {
+  opacity: 0.6;
+  font-size: 0.75rem;
+}
+
+.lg-node--lod-reduced .lg-widget {
+  margin: 2px 0;
+  font-size: 0.875rem;
+}
+
+/* Full LOD (zoom > 0.8) - Complete detail rendering */
+.lg-node--lod-full {
+  /* Uses default styling - no overrides needed */
+}
 
 .lg-node {
   /* Disable text selection on all nodes */
@@ -956,51 +990,23 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
-/* START LOD specific styles */
-/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
-
-.isLOD .lg-node {
-  box-shadow: none;
-  filter: none;
-  backdrop-filter: none;
-  text-shadow: none;
-  -webkit-mask-image: none;
-  mask-image: none;
-  clip-path: none;
-  background-image: none;
-  text-rendering: optimizeSpeed;
-  border-radius: 0;
-  contain: layout style;
-  transition: none;
+/* Global performance optimizations for LOD */
+.lg-node--lod-minimal,
+.lg-node--lod-reduced {
+  /* Remove ALL expensive paint effects */
+  box-shadow: none !important;
+  filter: none !important;
+  backdrop-filter: none !important;
+  text-shadow: none !important;
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  clip-path: none !important;
 }
 
-.isLOD .lg-node-widgets {
-  pointer-events: none;
+/* Reduce paint complexity for minimal LOD */
+.lg-node--lod-minimal {
+  /* Skip complex borders */
+  border-radius: 0 !important;
+  /* Use solid colors only */
+  background-image: none !important;
 }
-
-.lod-toggle {
-  visibility: visible;
-}
-
-.isLOD .lod-toggle {
-  visibility: hidden;
-}
-
-
-.lod-fallback {
-  display: none;
-}
-
-.isLOD .lod-fallback {
-  display: block;
-}
-
-.isLOD .image-preview img {
-  image-rendering: pixelated;
-}
-
-
-.isLOD .slot-dot {
-  border-radius: 0;
-}
-/* END LOD specific styles */

src/base/common/async.ts

@@ -1,98 +0,0 @@
-/**
- * Cross-browser async utilities for scheduling tasks during browser idle time
- * with proper fallbacks for browsers that don't support requestIdleCallback.
- *
- * Implementation based on:
- * https://github.com/microsoft/vscode/blob/main/src/vs/base/common/async.ts
- */
-
-interface IdleDeadline {
-  didTimeout: boolean
-  timeRemaining(): number
-}
-
-interface IDisposable {
-  dispose(): void
-}
-
-/**
- * Internal implementation function that handles the actual scheduling logic.
- * Uses feature detection to determine whether to use native requestIdleCallback
- * or fall back to setTimeout-based implementation.
- */
-let _runWhenIdle: (
-  targetWindow: any,
-  callback: (idle: IdleDeadline) => void,
-  timeout?: number
-) => IDisposable
-
-/**
- * Execute the callback during the next browser idle period.
- * Falls back to setTimeout-based scheduling in browsers without native support.
- */
-export let runWhenGlobalIdle: (
-    callback: (idle: IdleDeadline) => void,
-    timeout?: number
-  ) => IDisposable
-
-  // Self-invoking function to set up the idle callback implementation
-;(function () {
-  const safeGlobal: any = globalThis
-
-  if (
-    typeof safeGlobal.requestIdleCallback !== 'function' ||
-    typeof safeGlobal.cancelIdleCallback !== 'function'
-  ) {
-    // Fallback implementation for browsers without native support (e.g., Safari)
-    _runWhenIdle = (_targetWindow, runner, _timeout?) => {
-      setTimeout(() => {
-        if (disposed) {
-          return
-        }
-
-        // Simulate IdleDeadline - give 15ms window (one frame at ~64fps)
-        const end = Date.now() + 15
-        const deadline: IdleDeadline = {
-          didTimeout: true,
-          timeRemaining() {
-            return Math.max(0, end - Date.now())
-          }
-        }
-
-        runner(Object.freeze(deadline))
-      })
-
-      let disposed = false
-      return {
-        dispose() {
-          if (disposed) {
-            return
-          }
-          disposed = true
-        }
-      }
-    }
-  } else {
-    // Native requestIdleCallback implementation
-    _runWhenIdle = (targetWindow: typeof safeGlobal, runner, timeout?) => {
-      const handle: number = targetWindow.requestIdleCallback(
-        runner,
-        typeof timeout === 'number' ? { timeout } : undefined
-      )
-
-      let disposed = false
-      return {
-        dispose() {
-          if (disposed) {
-            return
-          }
-          disposed = true
-          targetWindow.cancelIdleCallback(handle)
-        }
-      }
-    }
-  }
-
-  runWhenGlobalIdle = (runner, timeout) =>
-    _runWhenIdle(globalThis, runner, timeout)
-})()

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
+  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
     <div class="p-terminal rounded-none h-full w-full p-2">
       <div ref="terminalEl" class="h-full terminal-host" />
     </div>
@@ -101,13 +98,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow-x: auto;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  background-color: black;
+  overflow-y: hidden;
 }
 </style>

src/components/common/LazyImage.vue

@@ -10,7 +10,7 @@
       class="absolute inset-0"
     />
     <img
-      v-if="cachedSrc"
+      v-show="isImageLoaded"
       ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
@@ -77,8 +77,8 @@ const shouldLoad = computed(() => isIntersecting.value)
 
 watch(
   shouldLoad,
-  async (shouldLoadVal) => {
-    if (shouldLoadVal && src && !cachedSrc.value && !hasError.value) {
+  async (shouldLoad) => {
+    if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
       try {
         const cachedMedia = await getCachedMedia(src)
         if (cachedMedia.error) {
@@ -93,7 +93,7 @@ watch(
         console.warn('Failed to load cached media:', error)
         cachedSrc.value = src
       }
-    } else if (!shouldLoadVal) {
+    } else if (!shouldLoad) {
       if (cachedSrc.value?.startsWith('blob:')) {
         releaseUrl(src)
       }