Update locales [skip ci]

.cursorrules

@@ -8,15 +8,6 @@ const vue3CompositionApiBestPractices = [
   "Use watch and watchEffect for side effects",
   "Implement lifecycle hooks with onMounted, onUpdated, etc.",
   "Utilize provide/inject for dependency injection",
-  "Use vue 3.5 style of default prop declaration. Example:
-
-const { nodes, showTotal = true } = defineProps<{
-  nodes: ApiNodeCost[]
-  showTotal?: boolean
-}>()
-
-",
-  "Organize vue component in <template> <script> <style> order",
 ]
 
 // Folder structure
@@ -49,6 +40,4 @@ const additionalInstructions = `
 7. Implement proper error handling
 8. Follow Vue 3 style guide and naming conventions
 9. Use Vite for fast development and building
-10. Use vue-i18n in composition API for any string literals. Place new translation
-entries in src/locales/en/main.json.
 `;

.env_example

@@ -1,5 +1,4 @@
 # Local development playwright target
-# Note: Don't add a trailing / after the port
 PLAYWRIGHT_TEST_URL=http://localhost:5173
 # PLAYWRIGHT_TEST_URL=http://localhost:8188
 

.github/workflows/release.yaml

@@ -29,9 +29,9 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          USE_PROD_CONFIG: 'true'
         run: |
           npm ci
+          npm run fetch-templates
           npm run build
           npm run zipdist
       - name: Upload dist artifact

.github/workflows/test-ui.yaml

@@ -30,7 +30,7 @@ jobs:
         with:
           repository: 'Comfy-Org/ComfyUI_devtools'
           path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: '9d2421fd3208a310e4d0f71fca2ea0c985759c33'
+          ref: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be'
 
       - uses: actions/setup-node@v4
         with:
@@ -39,6 +39,7 @@ jobs:
       - name: Build ComfyUI_frontend
         run: |
           npm ci
+          npm run fetch-templates
           npm run build
         working-directory: ComfyUI_frontend
 

.i18nrc.cjs

@@ -4,13 +4,13 @@
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  modelName: 'gpt-4.1',
+  modelName: 'gpt-4',
   splitToken: 1024,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr', 'es'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
+  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, controlnet, lora.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   `

.vscode/extensions.json

@@ -1,25 +0,0 @@
-{
-  "recommendations": [
-    "austenc.tailwind-docs",
-    "bradlc.vscode-tailwindcss",
-    "davidanson.vscode-markdownlint",
-    "dbaeumer.vscode-eslint",
-    "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "figma.figma-vscode-extension",
-    "github.vscode-github-actions",
-    "github.vscode-pull-request-github",
-    "hbenl.vscode-test-explorer",
-    "lokalise.i18n-ally",
-    "ms-playwright.playwright",
-    "vitest.explorer",
-    "vue.volar",
-    "sonarsource.sonarlint-vscode",
-    "deque-systems.vscode-axe-linter",
-    "kisstkondoros.vscode-codemetrics",
-    "donjayamanne.githistory",
-    "wix.vscode-import-cost",
-    "prograhammer.tslint-vue",
-    "antfu.vite"
-  ]
-}

browser_tests/README.md

@@ -9,26 +9,15 @@ If `TEST_COMFYUI_DIR` in `.env` isn't set to your `(Comfy Path)/ComfyUI` directo
 
 ## Setup
 
-### ComfyUI devtools
-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._
+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.
 
-### Node.js & Playwright Prerequisites
 Ensure you have Node.js v20 or later installed. Then, set up the Chromium test driver:
+
 ```bash
 npx playwright install chromium --with-deps
 ```
 
-### Environment Variables
-Ensure the environment variables in `.env` are set correctly according to your setup. 
-
-The `.env` file will not exist until you create it yourself.
-
-A template with helpful information can be found in `.env_example`.
-
-### Multiple Tests
-If you are running Playwright tests in parallel or running the same test multiple times, the flag `--multi-user` must be added to the main ComfyUI process.
-
 ## Running Tests
 
 There are two ways to run the tests:
@@ -45,6 +34,8 @@ There are two ways to run the tests:
    ```
    This opens a user interface where you can select specific tests to run and inspect the test execution timeline.
 
+   To run the same test multiple times in Playwright's UI mode, you must launch the main ComfyUI process with the `--multi-user` flag.
+
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
 ## Screenshot Expectations

browser_tests/assets/bad_link.json

@@ -1,126 +0,0 @@
-{
-  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
-  "revision": 0,
-  "last_node_id": 5,
-  "last_link_id": 3,
-  "nodes": [
-    {
-      "id": 4,
-      "type": "KSampler",
-      "pos": [
-        867.4669799804688,
-        347.22369384765625
-      ],
-      "size": [
-        315,
-        262
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "steps",
-          "type": "INT",
-          "widget": {
-            "name": "steps"
-          },
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 5,
-      "type": "PrimitiveInt",
-      "pos": [
-        443.0852355957031,
-        441.131591796875
-      ],
-      "size": [
-        315,
-        82
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "INT",
-          "type": "INT",
-          "links": [
-            3
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveInt"
-      },
-      "widgets_values": [
-        0,
-        "randomize"
-      ]
-    }
-  ],
-  "links": [
-    [
-      3,
-      5,
-      0,
-      4,
-      5,
-      "INT"
-    ]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1.9487171000000016,
-      "offset": [
-        -325.57196748514497,
-        -168.13150517966463
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/default_input.json

@@ -1,53 +0,0 @@
-{
-  "id": "9bcb9451-8319-492a-88d4-fb711d8c3d25",
-  "revision": 0,
-  "last_node_id": 6,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 6,
-      "type": "DevToolsNodeWithDefaultInput",
-      "pos": [
-        8.39722728729248,
-        29.727279663085938
-      ],
-      "size": [
-        315,
-        82
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "float_input",
-          "shape": 7,
-          "type": "FLOAT",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "DevToolsNodeWithDefaultInput"
-      },
-      "widgets_values": [
-        0,
-        1,
-        0
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 2.1600300525920346,
-      "offset": [
-        63.071794466403446,
-        75.18055335968394
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/dynamically_added_input.json

@@ -1,82 +0,0 @@
-{
-  "last_node_id": 9,
-  "last_link_id": 13,
-  "nodes": [
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": [
-        0,
-        30
-      ],
-      "size": {
-        "0": 315,
-        "1": 262
-      },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        } ,
-        {
-          "name": "dynamic_input",
-          "type": "FLOAT",
-          "link": null,
-          "_meta": "Dynamically added input via frontend JS logic"
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        156680208700286,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/input_order_swap.json

@@ -1,74 +0,0 @@
-{
-  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CLIPTextEncode",
-      "pos": [904, 466],
-      "size": [400, 200],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "text",
-          "type": "STRING",
-          "widget": {
-            "name": "text"
-          },
-          "link": 1
-        },
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [""]
-    },
-    {
-      "id": 2,
-      "type": "PrimitiveString",
-      "pos": [556.8589477539062, 472.94342041015625],
-      "size": [315, 58],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "STRING",
-          "type": "STRING",
-          "links": [1]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveString"
-      },
-      "widgets_values": ["foo"]
-    }
-  ],
-  "links": [[1, 2, 0, 1, 0, "STRING"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1.7715610000000013,
-      "offset": [-388.521484375, -162.31336975097656]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/missing_nodes_converted_widget.json

@@ -51,10 +51,7 @@
         0.85,
         false,
         false,
-        "",
-        {
-          "foo": "bar"
-        }
+        ""
       ]
     }
   ],

browser_tests/assets/primitive/static_primitive_unconnected.json

@@ -1,104 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "KSampler",
-      "pos": {
-        "0": 304.3653259277344,
-        "1": 42.15586471557617
-      },
-      "size": [
-        315,
-        262
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "model",
-          "type": "MODEL",
-          "link": null
-        },
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "negative",
-          "type": "CONDITIONING",
-          "link": null
-        },
-        {
-          "name": "latent_image",
-          "type": "LATENT",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null,
-          "shape": 3
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 1,
-      "type": "PrimitiveInt",
-      "pos": {
-        "0": 14,
-        "1": 43
-      },
-      "size": [
-        203.1999969482422,
-        40.368401303242536
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "value",
-          "type": "INT",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "Int"
-      },
-      "widgets_values": [10]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/load_animated_webp.json

@@ -1,11 +0,0 @@
-{
-  "8": {
-    "inputs": {
-      "image": "animated_web.webp"
-    },
-    "class_type": "DevToolsLoadAnimatedImageTest",
-    "_meta": {
-      "title": "Load Animated Image"
-    }
-  }
-}

browser_tests/assets/widgets/save_animated_webp.json

@@ -1,60 +0,0 @@
-{
-  "id": "3f1fcbf9-f9de-4935-8fad-401813f61b13",
-  "revision": 0,
-  "last_node_id": 10,
-  "last_link_id": 4,
-  "nodes": [
-    {
-      "id": 9,
-      "type": "SaveAnimatedWEBP",
-      "pos": [336, 104],
-      "size": [210, 368],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 4
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI", 6, true, 80, "default"]
-    },
-    {
-      "id": 10,
-      "type": "DevToolsLoadAnimatedImageTest",
-      "pos": [64, 104],
-      "size": [210, 316],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [4]
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "DevToolsLoadAnimatedImageTest"
-      },
-      "widgets_values": ["animated_web.webp", "image"]
-    }
-  ],
-  "links": [[4, 10, 0, 9, 0, "IMAGE"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "frontendVersion": "1.17.0"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -412,7 +412,7 @@ export class ComfyPage {
   }
 
   async getVisibleToastCount() {
-    return await this.page.locator('.p-toast-message:visible').count()
+    return await this.page.locator('.p-toast:visible').count()
   }
 
   async clickTextEncodeNode1() {
@@ -463,128 +463,87 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async dragAndDropExternalResource(
+  async dragAndDropFile(
+    fileName: string,
     options: {
-      fileName?: string
-      url?: string
       dropPosition?: Position
     } = {}
   ) {
-    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
+    const { dropPosition = { x: 100, y: 100 } } = options
 
-    if (!fileName && !url)
-      throw new Error('Must provide either fileName or url')
+    const filePath = this.assetPath(fileName)
 
-    const evaluateParams: {
-      dropPosition: Position
-      fileName?: string
-      fileType?: string
-      buffer?: Uint8Array | number[]
-      url?: string
-    } = { dropPosition }
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
 
-    // Dropping a file from the filesystem
-    if (fileName) {
-      const filePath = this.assetPath(fileName)
-      const buffer = fs.readFileSync(filePath)
-
-      const getFileType = (fileName: string) => {
-        if (fileName.endsWith('.png')) return 'image/png'
-        if (fileName.endsWith('.webp')) return 'image/webp'
-        if (fileName.endsWith('.webm')) return 'video/webm'
-        if (fileName.endsWith('.json')) return 'application/json'
-        if (fileName.endsWith('.glb')) return 'model/gltf-binary'
-        return 'application/octet-stream'
-      }
-
-      evaluateParams.fileName = fileName
-      evaluateParams.fileType = getFileType(fileName)
-      evaluateParams.buffer = [...new Uint8Array(buffer)]
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.webm')) return 'video/webm'
+      if (fileName.endsWith('.json')) return 'application/json'
+      if (fileName.endsWith('.glb')) return 'model/gltf-binary'
+      return 'application/octet-stream'
     }
 
-    // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
-    if (url) evaluateParams.url = url
+    const fileType = getFileType(fileName)
 
-    // Execute the drag and drop in the browser
-    await this.page.evaluate(async (params) => {
-      const dataTransfer = new DataTransfer()
-
-      // Add file if provided
-      if (params.buffer && params.fileName && params.fileType) {
-        const file = new File(
-          [new Uint8Array(params.buffer)],
-          params.fileName,
-          {
-            type: params.fileType
-          }
-        )
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType, dropPosition }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
         dataTransfer.items.add(file)
-      }
 
-      // Add URL data if provided
-      if (params.url) {
-        dataTransfer.setData('text/uri-list', params.url)
-        dataTransfer.setData('text/x-moz-url', params.url)
-      }
+        const targetElement = document.elementFromPoint(
+          dropPosition.x,
+          dropPosition.y
+        )
 
-      const targetElement = document.elementFromPoint(
-        params.dropPosition.x,
-        params.dropPosition.y
-      )
-
-      if (!targetElement) {
-        console.error('No element found at drop position:', params.dropPosition)
-        return { success: false, error: 'No element at position' }
-      }
-
-      const eventOptions = {
-        bubbles: true,
-        cancelable: true,
-        dataTransfer,
-        clientX: params.dropPosition.x,
-        clientY: params.dropPosition.y
-      }
-
-      const dragOverEvent = new DragEvent('dragover', eventOptions)
-      const dropEvent = new DragEvent('drop', eventOptions)
-
-      Object.defineProperty(dropEvent, 'preventDefault', {
-        value: () => {},
-        writable: false
-      })
-
-      Object.defineProperty(dropEvent, 'stopPropagation', {
-        value: () => {},
-        writable: false
-      })
-
-      targetElement.dispatchEvent(dragOverEvent)
-      targetElement.dispatchEvent(dropEvent)
-
-      return {
-        success: true,
-        targetInfo: {
-          tagName: targetElement.tagName,
-          id: targetElement.id,
-          classList: Array.from(targetElement.classList)
+        if (!targetElement) {
+          console.error('No element found at drop position:', dropPosition)
+          return { success: false, error: 'No element at position' }
         }
-      }
-    }, evaluateParams)
+
+        const eventOptions = {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer,
+          clientX: dropPosition.x,
+          clientY: dropPosition.y
+        }
+
+        const dragOverEvent = new DragEvent('dragover', eventOptions)
+        const dropEvent = new DragEvent('drop', eventOptions)
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        targetElement.dispatchEvent(dragOverEvent)
+        targetElement.dispatchEvent(dropEvent)
+
+        return {
+          success: true,
+          targetInfo: {
+            tagName: targetElement.tagName,
+            id: targetElement.id,
+            classList: Array.from(targetElement.classList)
+          }
+        }
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType, dropPosition }
+    )
 
     await this.nextFrame()
   }
 
-  async dragAndDropFile(
-    fileName: string,
-    options: { dropPosition?: Position } = {}
-  ) {
-    return this.dragAndDropExternalResource({ fileName, ...options })
-  }
-
-  async dragAndDropURL(url: string, options: { dropPosition?: Position } = {}) {
-    return this.dragAndDropExternalResource({ url, ...options })
-  }
-
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()
@@ -630,20 +589,11 @@ export class ComfyPage {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
 
-  async connectEdge(
-    options: {
-      reverse?: boolean
-    } = {}
-  ) {
-    const { reverse = false } = options
-    const start = reverse
-      ? this.clipTextEncodeNode1InputSlot
-      : this.loadCheckpointNodeClipOutputSlot
-    const end = reverse
-      ? this.loadCheckpointNodeClipOutputSlot
-      : this.clipTextEncodeNode1InputSlot
-
-    await this.dragAndDrop(start, end)
+  async connectEdge() {
+    await this.dragAndDrop(
+      this.loadCheckpointNodeClipOutputSlot,
+      this.clipTextEncodeNode1InputSlot
+    )
   }
 
   async adjustWidgetValue() {
@@ -926,7 +876,7 @@ export class ComfyPage {
   async getNodeRefById(id: NodeId) {
     return new NodeReference(id, this)
   }
-  async getNodes(): Promise<LGraphNode[]> {
+  async getNodes() {
     return await this.page.evaluate(() => {
       return window['app'].graph.nodes
     })

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -81,7 +81,7 @@ export class NodeWidgetReference {
         if (!widget) throw new Error(`Widget ${index} not found.`)
 
         const [x, y, w, h] = node.getBounding()
-        return window['app'].canvasPosToClientPos([
+        return window['app'].canvas.ds.convertOffsetToCanvas([
           x + w / 2,
           y + window['LiteGraph']['NODE_TITLE_HEIGHT'] + widget.last_y + 1
         ])
@@ -94,36 +94,6 @@ export class NodeWidgetReference {
     }
   }
 
-  /**
-   * @returns The position of the widget's associated socket
-   */
-  async getSocketPosition(): Promise<Position> {
-    const pos: [number, number] = await this.node.comfyPage.page.evaluate(
-      ([id, index]) => {
-        const node = window['app'].graph.getNodeById(id)
-        if (!node) throw new Error(`Node ${id} not found.`)
-        const widget = node.widgets[index]
-        if (!widget) throw new Error(`Widget ${index} not found.`)
-
-        const slot = node.inputs.find(
-          (slot) => slot.widget?.name === widget.name
-        )
-        if (!slot) throw new Error(`Socket ${widget.name} not found.`)
-
-        const [x, y] = node.getBounding()
-        return window['app'].canvasPosToClientPos([
-          x + slot.pos[0],
-          y + slot.pos[1] + window['LiteGraph']['NODE_TITLE_HEIGHT']
-        ])
-      },
-      [this.node.id, this.index] as const
-    )
-    return {
-      x: pos[0],
-      y: pos[1]
-    }
-  }
-
   async click() {
     await this.node.comfyPage.canvas.click({
       position: await this.getPosition()
@@ -280,7 +250,7 @@ export class NodeReference {
     const targetWidget = await targetNode.getWidget(targetWidgetIndex)
     await this.comfyPage.dragAndDrop(
       await originSlot.getPosition(),
-      await targetWidget.getSocketPosition()
+      await targetWidget.getPosition()
     )
     return originSlot
   }

browser_tests/tests/commands.spec.ts

@@ -32,7 +32,7 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
   })
 
   test('Should handle async command errors', async ({ comfyPage }) => {
@@ -45,6 +45,6 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
   })
 })

browser_tests/tests/dialog.spec.ts

@@ -309,62 +309,3 @@ test.describe('Feedback dialog', () => {
     await expect(feedbackHeader).not.toBeVisible()
   })
 })
-
-test.describe('Error dialog', () => {
-  test('Should display an error dialog when graph configure fails', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.evaluate(() => {
-      const graph = window['graph']
-      graph.configure = () => {
-        throw new Error('Error on configure!')
-      }
-    })
-
-    await comfyPage.loadWorkflow('default')
-
-    const errorDialog = comfyPage.page.locator('.comfy-error-report')
-    await expect(errorDialog).toBeVisible()
-  })
-
-  test('Should display an error dialog when prompt execution fails', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.evaluate(async () => {
-      const app = window['app']
-      app.api.queuePrompt = () => {
-        throw new Error('Error on queuePrompt!')
-      }
-      await app.queuePrompt(0)
-    })
-    const errorDialog = comfyPage.page.locator('.comfy-error-report')
-    await expect(errorDialog).toBeVisible()
-  })
-})
-
-test.describe('Signin dialog', () => {
-  test('Paste content to signin dialog should not paste node on canvas', async ({
-    comfyPage
-  }) => {
-    const nodeNum = (await comfyPage.getNodes()).length
-    await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC()
-
-    const textBox = comfyPage.widgetTextBox
-    await textBox.click()
-    await textBox.fill('test_password')
-    await textBox.press('Control+a')
-    await textBox.press('Control+c')
-
-    await comfyPage.page.evaluate(() => {
-      window['app'].extensionManager.dialog.showSignInDialog()
-    })
-
-    const input = comfyPage.page.locator('#comfy-org-sign-in-password')
-    await input.waitFor({ state: 'visible' })
-    await input.press('Control+v')
-    await expect(input).toHaveValue('test_password')
-
-    expect(await comfyPage.getNodes()).toHaveLength(nodeNum)
-  })
-})

browser_tests/tests/domWidget.spec.ts

@@ -24,11 +24,4 @@ test.describe('DOM Widget', () => {
     await expect(firstMultiline).not.toBeVisible()
     await expect(lastMultiline).not.toBeVisible()
   })
-
-  test('Position update when entering focus mode', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
-  })
 })

browser_tests/tests/execution.spec.ts

@@ -1,20 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Execution', () => {
-  test('Report error on unconnected slot', async ({ comfyPage }) => {
-    await comfyPage.disconnectEdge()
-    await comfyPage.clickEmptySpace()
-
-    await comfyPage.executeCommand('Comfy.QueuePrompt')
-    await expect(comfyPage.page.locator('.comfy-error-report')).toBeVisible()
-    await comfyPage.page.locator('.p-dialog-close-button').click()
-    await comfyPage.page.locator('.comfy-error-report').waitFor({
-      state: 'hidden'
-    })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'execution-error-unconnected-slot.png'
-    )
-  })
-})

browser_tests/tests/graph.spec.ts

@@ -1,21 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-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
-  test('Fix link input slots', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('input_order_swap')
-    expect(
-      await comfyPage.page.evaluate(() => {
-        return window['app'].graph.links.get(1)?.target_slot
-      })
-    ).toBe(1)
-  })
-
-  test('Validate workflow links', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('bad_link')
-    await expect(comfyPage.getVisibleToastCount()).resolves.toBe(2)
-  })
-})

browser_tests/tests/interaction.spec.ts

@@ -91,20 +91,15 @@ test.describe('Node Interaction', () => {
       await comfyPage.setSetting('Comfy.LinkRelease.ActionShift', 'no action')
     })
 
-    // Test both directions of edge connection.
-    ;[{ reverse: false }, { reverse: true }].forEach(({ reverse }) => {
-      test(`Can disconnect/connect edge ${reverse ? 'reverse' : 'normal'}`, async ({
-        comfyPage
-      }) => {
-        await comfyPage.disconnectEdge()
-        await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
-        await comfyPage.connectEdge({ reverse })
-        // Move mouse to empty area to avoid slot highlight.
-        await comfyPage.moveMouseToEmptyArea()
-        // Litegraph renders edge with a slight offset.
-        await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
-          maxDiffPixels: 50
-        })
+    test('Can disconnect/connect edge', async ({ comfyPage }) => {
+      await comfyPage.disconnectEdge()
+      await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge.png')
+      await comfyPage.connectEdge()
+      // Move mouse to empty area to avoid slot highlight.
+      await comfyPage.moveMouseToEmptyArea()
+      // Litegraph renders edge with a slight offset.
+      await expect(comfyPage.canvas).toHaveScreenshot('default.png', {
+        maxDiffPixels: 50
       })
     })
 

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -3,35 +3,17 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Load Workflow in Media', () => {
-  const fileNames = [
+  ;[
     'workflow.webp',
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
     'workflow.webm',
     'workflow.glb'
-  ]
-  fileNames.forEach(async (fileName) => {
-    test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
-      comfyPage
-    }) => {
+  ].forEach(async (fileName) => {
+    test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
       await comfyPage.dragAndDropFile(fileName)
       await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
     })
   })
-
-  const urls = [
-    'https://comfyanonymous.github.io/ComfyUI_examples/hidream/hidream_dev_example.png'
-  ]
-  urls.forEach(async (url) => {
-    test(`Load workflow from URL${url} (drop from different browser tabs)`, async ({
-      comfyPage
-    }) => {
-      await comfyPage.dragAndDropURL(url)
-      const readableName = url.split('/').pop()
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        `dropped_workflow_url_${readableName}.png`
-      )
-    })
-  })
 })

browser_tests/tests/nodeBadge.spec.ts

@@ -92,20 +92,4 @@ test.describe('Node badge color', () => {
       'node-badge-unknown-color-palette.png'
     )
   })
-
-  test('Can show node badge with light color palette', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting(
-      'Comfy.NodeBadge.NodeIdBadgeMode',
-      NodeBadgeMode.ShowAll
-    )
-    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
-    await comfyPage.nextFrame()
-    // Click empty space to trigger canvas re-render.
-    await comfyPage.clickEmptySpace()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'node-badge-light-color-palette.png'
-    )
-  })
 })

browser_tests/tests/nodeDisplay.spec.ts

@@ -25,11 +25,6 @@ test.describe('Optional input', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('force_input.png')
   })
 
-  test('Default input', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('default_input')
-    await expect(comfyPage.canvas).toHaveScreenshot('default_input.png')
-  })
-
   test('Only optional inputs', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('only_optional_inputs')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
@@ -72,10 +67,4 @@ test.describe('Optional input', () => {
       'missing_nodes_converted_widget.png'
     )
   })
-  test('dynamically added input', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('dynamically_added_input')
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'dynamically_added_input.png'
-    )
-  })
 })

browser_tests/tests/primitiveNode.spec.ts

@@ -5,14 +5,14 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive/primitive_node')
+    await comfyPage.loadWorkflow('primitive_node')
     await expect(comfyPage.canvas).toHaveScreenshot('primitive_node.png')
   })
 
   // When link is dropped on widget, it should automatically convert the widget
   // to input.
   test('Can connect to widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive/primitive_node_unconnected')
+    await comfyPage.loadWorkflow('primitive_node_unconnected')
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
     // Connect the output of the primitive node to the input of first widget of the ksampler node
@@ -23,9 +23,7 @@ test.describe('Primitive Node', () => {
   })
 
   test('Can connect to dom widget', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow(
-      'primitive/primitive_node_unconnected_dom_widget'
-    )
+    await comfyPage.loadWorkflow('primitive_node_unconnected_dom_widget')
     const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
     const clipEncoderNode: NodeReference = await comfyPage.getNodeRefById(2)
     await primitiveNode.connectWidget(0, clipEncoderNode, 0)
@@ -33,25 +31,4 @@ test.describe('Primitive Node', () => {
       'primitive_node_connected_dom_widget.png'
     )
   })
-
-  test('Can connect to static primitive node', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('primitive/static_primitive_unconnected')
-    const primitiveNode: NodeReference = await comfyPage.getNodeRefById(1)
-    const ksamplerNode: NodeReference = await comfyPage.getNodeRefById(2)
-    await primitiveNode.connectWidget(0, ksamplerNode, 0)
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'static_primitive_connected.png'
-    )
-  })
-
-  test('Report missing nodes when connect to missing node', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow(
-      'primitive/primitive_node_connect_missing_node'
-    )
-    // Wait for the element with the .comfy-missing-nodes selector to be visible
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
-    await expect(missingNodesWarning).toBeVisible()
-  })
 })

browser_tests/tests/rerouteNode.spec.ts

@@ -39,10 +39,6 @@ test.describe('Reroute Node', () => {
 })
 
 test.describe('LiteGraph Native Reroute Node', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
-  })
-
   test('loads from workflow', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('reroute/native_reroute')
     await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png')

browser_tests/tests/rightClickMenu.spec.ts

@@ -88,6 +88,63 @@ test.describe('Node Right Click Menu', () => {
     )
   })
 
+  test.describe('Widget conversion', () => {
+    const convertibleWidgetTypes = ['text', 'string', 'number', 'toggle']
+
+    test('Can convert widget to input', async ({ comfyPage }) => {
+      await comfyPage.rightClickEmptyLatentNode()
+      await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+      await comfyPage.page.getByText('Convert Widget to Input').click()
+      await comfyPage.nextFrame()
+      // The submenu has an identical entry as the base menu - use last
+      await comfyPage.page.getByText('Convert width to input').last().click()
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'right-click-node-widget-converted.png'
+      )
+    })
+
+    test('Can convert widget without submenu', async ({ comfyPage }) => {
+      // Right-click the width widget
+      await comfyPage.rightClickEmptyLatentNode()
+      await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
+      await comfyPage.page.getByText('Convert width to input').click()
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'right-click-node-widget-converted.png'
+      )
+    })
+
+    convertibleWidgetTypes.forEach((widgetType) => {
+      test(`Can convert ${widgetType} widget to input`, async ({
+        comfyPage
+      }) => {
+        const nodeType = 'KSampler'
+
+        // To avoid needing multiple clicks, disable nesting of conversion options
+        await comfyPage.setSetting('Comfy.NodeInputConversionSubmenus', false)
+
+        // Add the widget using the node's `addWidget` method
+        await comfyPage.page.evaluate(
+          ([nodeType, widgetType]) => {
+            const node = window['app'].graph.nodes.find(
+              (n) => n.type === nodeType
+            )
+            node.addWidget(widgetType, widgetType, 'defaultValue', () => {}, {})
+          },
+          [nodeType, widgetType]
+        )
+
+        // Verify the context menu includes the conversion option
+        const node = (await comfyPage.getNodeRefsByType(nodeType))[0]
+        const menuOptions = await node.getContextMenuOptionNames()
+        expect(menuOptions.includes(`Convert ${widgetType} to input`)).toBe(
+          true
+        )
+      })
+    })
+  })
+
   test('Can pin and unpin', async ({ comfyPage }) => {
     await comfyPage.rightClickEmptyLatentNode()
     await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')

browser_tests/tests/selectionToolbox.spec.ts

@@ -30,46 +30,6 @@ test.describe('Selection Toolbox', () => {
     ).toBeVisible()
   })
 
-  test('shows at correct position when node is pasted', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    await comfyPage.selectNodes(['KSampler'])
-    await comfyPage.ctrlC()
-    await comfyPage.page.mouse.move(100, 100)
-    await comfyPage.ctrlV()
-
-    const overlayContainer = comfyPage.page.locator(
-      '.selection-overlay-container'
-    )
-    await expect(overlayContainer).toBeVisible()
-
-    // Verify the absolute position
-    const boundingBox = await overlayContainer.boundingBox()
-    expect(boundingBox).not.toBeNull()
-    // 10px offset for the pasted node
-    expect(Math.round(boundingBox!.x)).toBeCloseTo(90, -1) // Allow ~10px tolerance
-    // 30px offset of node title height
-    expect(Math.round(boundingBox!.y)).toBeCloseTo(60, -1)
-  })
-
-  test('hide when select and drag happen at the same time', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('single_ksampler')
-    const node = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const nodePos = await node.getPosition()
-
-    // Drag on the title of the node
-    await comfyPage.page.mouse.move(nodePos.x + 100, nodePos.y - 15)
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(nodePos.x + 200, nodePos.y + 200)
-    await comfyPage.nextFrame()
-    await expect(
-      comfyPage.page.locator('.selection-overlay-container')
-    ).not.toBeVisible()
-  })
-
   test('shows border only with multiple selections', async ({ comfyPage }) => {
     // Select single node
     await comfyPage.selectNodes(['KSampler'])
@@ -246,24 +206,5 @@ test.describe('Selection Toolbox', () => {
       )
       await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
     })
-
-    test('colorization via color picker can be undone', async ({
-      comfyPage
-    }) => {
-      // Select a node and color it
-      await comfyPage.selectNodes(['KSampler'])
-      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
-      await comfyPage.page
-        .locator('.color-picker-container i[data-testid="blue"]')
-        .click()
-
-      // Undo the colorization
-      await comfyPage.page.keyboard.press('Control+Z')
-      await comfyPage.nextFrame()
-
-      // Node should be uncolored again
-      const selectedNode = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-      expect(await selectedNode.getProperty('color')).toBeUndefined()
-    })
   })
 })

browser_tests/tests/templates.spec.ts

@@ -1,17 +1,8 @@
-import { Page, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
+import fs from 'fs'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
-async function checkTemplateFileExists(
-  page: Page,
-  filename: string
-): Promise<boolean> {
-  const response = await page.request.head(
-    new URL(`/templates/${filename}`, page.url()).toString()
-  )
-  return response.ok()
-}
-
 test.describe('Templates', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
@@ -21,32 +12,32 @@ test.describe('Templates', () => {
   test('should have a JSON workflow file for each template', async ({
     comfyPage
   }) => {
-    test.slow()
     const templates = await comfyPage.templates.getAllTemplates()
     for (const template of templates) {
-      const exists = await checkTemplateFileExists(
-        comfyPage.page,
+      const workflowPath = comfyPage.templates.getTemplatePath(
         `${template.name}.json`
       )
-      expect(exists, `Missing workflow: ${template.name}`).toBe(true)
+      expect(
+        fs.existsSync(workflowPath),
+        `Missing workflow: ${template.name}`
+      ).toBe(true)
     }
   })
 
   test('should have all required thumbnail media for each template', async ({
     comfyPage
   }) => {
-    test.slow()
     const templates = await comfyPage.templates.getAllTemplates()
     for (const template of templates) {
       const { name, mediaSubtype, thumbnailVariant } = template
       const baseMedia = `${name}-1.${mediaSubtype}`
+      const basePath = comfyPage.templates.getTemplatePath(baseMedia)
 
       // Check base thumbnail
-      const baseExists = await checkTemplateFileExists(
-        comfyPage.page,
-        baseMedia
-      )
-      expect(baseExists, `Missing base thumbnail: ${baseMedia}`).toBe(true)
+      expect(
+        fs.existsSync(basePath),
+        `Missing base thumbnail: ${baseMedia}`
+      ).toBe(true)
 
       // Check second thumbnail for variants that need it
       if (
@@ -54,12 +45,9 @@ test.describe('Templates', () => {
         thumbnailVariant === 'hoverDissolve'
       ) {
         const secondMedia = `${name}-2.${mediaSubtype}`
-        const secondExists = await checkTemplateFileExists(
-          comfyPage.page,
-          secondMedia
-        )
+        const secondPath = comfyPage.templates.getTemplatePath(secondMedia)
         expect(
-          secondExists,
+          fs.existsSync(secondPath),
           `Missing second thumbnail: ${secondMedia} required for ${thumbnailVariant}`
         ).toBe(true)
       }
@@ -98,48 +86,4 @@ test.describe('Templates', () => {
     // Expect the templates dialog to be shown
     expect(await comfyPage.templates.content.isVisible()).toBe(true)
   })
-
-  test('Uses title field as fallback when the key is not found in locales', async ({
-    comfyPage
-  }) => {
-    // Capture request for the index.json
-    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
-      // Add a new template that won't have a translation pre-generated
-      const response = [
-        {
-          moduleName: 'default',
-          title: 'FALLBACK CATEGORY',
-          type: 'image',
-          templates: [
-            {
-              name: 'unknown_key_has_no_translation_available',
-              title: 'FALLBACK TEMPLATE NAME',
-              mediaType: 'image',
-              mediaSubtype: 'webp',
-              description: 'No translations found'
-            }
-          ]
-        }
-      ]
-      await route.fulfill({
-        status: 200,
-        body: JSON.stringify(response),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
-      })
-    })
-
-    // Load the templates dialog
-    await comfyPage.executeCommand('Comfy.BrowseTemplates')
-
-    // Expect the title to be used as fallback for template cards
-    await expect(
-      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()
-  })
 })

browser_tests/tests/widget.spec.ts

@@ -186,124 +186,9 @@ test.describe('Image widget', () => {
   })
 })
 
-test.describe('Animated image widget', () => {
-  test('Shows preview of uploaded animated image', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('widgets/load_animated_webp')
-
-    // Get position of the load animated webp node
-    const nodes = await comfyPage.getNodeRefsByType(
-      'DevToolsLoadAnimatedImageTest'
-    )
-    const loadAnimatedWebpNode = nodes[0]
-    const { x, y } = await loadAnimatedWebpNode.getPosition()
-
-    // Drag and drop image file onto the load animated webp node
-    await comfyPage.dragAndDropFile('animated_webp.webp', {
-      dropPosition: { x, y }
-    })
-
-    // Expect the image preview to change automatically
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'animated_image_preview_drag_and_dropped.png'
-    )
-
-    // Wait for animation to go to next frame
-    await comfyPage.page.waitForTimeout(512)
-
-    // Move mouse and click on canvas to trigger render
-    await comfyPage.page.mouse.click(64, 64)
-
-    // Expect the image preview to change to the next frame of the animation
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'animated_image_preview_drag_and_dropped_next_frame.png'
-    )
-  })
-
-  test('Can drag-and-drop animated webp image', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('widgets/load_animated_webp')
-
-    // Get position of the load animated webp node
-    const nodes = await comfyPage.getNodeRefsByType(
-      'DevToolsLoadAnimatedImageTest'
-    )
-    const loadAnimatedWebpNode = nodes[0]
-    const { x, y } = await loadAnimatedWebpNode.getPosition()
-
-    // Drag and drop image file onto the load animated webp node
-    await comfyPage.dragAndDropFile('animated_webp.webp', {
-      dropPosition: { x, y }
-    })
-
-    // Expect the filename combo value to be updated
-    const fileComboWidget = await loadAnimatedWebpNode.getWidget(0)
-    const filename = await fileComboWidget.getValue()
-    expect(filename).toContain('animated_webp.webp')
-  })
-
-  test('Can preview saved animated webp image', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('widgets/save_animated_webp')
-
-    // Get position of the load animated webp node
-    const loadNodes = await comfyPage.getNodeRefsByType(
-      'DevToolsLoadAnimatedImageTest'
-    )
-    const loadAnimatedWebpNode = loadNodes[0]
-    const { x, y } = await loadAnimatedWebpNode.getPosition()
-
-    // Drag and drop image file onto the load animated webp node
-    await comfyPage.dragAndDropFile('animated_webp.webp', {
-      dropPosition: { x, y }
-    })
-    await comfyPage.nextFrame()
-
-    // Get the SaveAnimatedWEBP node
-    const saveNodes = await comfyPage.getNodeRefsByType('SaveAnimatedWEBP')
-    const saveAnimatedWebpNode = saveNodes[0]
-    if (!saveAnimatedWebpNode)
-      throw new Error('SaveAnimatedWEBP node not found')
-
-    // Simulate the graph executing
-    await comfyPage.page.evaluate(
-      ([loadId, saveId]) => {
-        // Set the output of the SaveAnimatedWEBP node to equal the loader node's image
-        window['app'].nodeOutputs[saveId] = window['app'].nodeOutputs[loadId]
-      },
-      [loadAnimatedWebpNode.id, saveAnimatedWebpNode.id]
-    )
-    await comfyPage.nextFrame()
-
-    // Wait for animation to go to next frame
-    await comfyPage.page.waitForTimeout(512)
-
-    // Move mouse and click on canvas to trigger render
-    await comfyPage.page.mouse.click(64, 64)
-
-    // Expect the SaveAnimatedWEBP node to have an output preview
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'animated_image_preview_saved_webp.png'
-    )
-  })
-})
-
 test.describe('Load audio widget', () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/load_audio_widget')
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })
-
-test.describe('Unserialized widgets', () => {
-  test('Unserialized widgets values do not mark graph as modified', async ({
-    comfyPage
-  }) => {
-    // Add workflow w/ LoadImage node, which contains file upload and image preview widgets (not serialized)
-    await comfyPage.loadWorkflow('widgets/load_image_widget')
-
-    // Move mouse and click to trigger the `graphEqual` check in `changeTracker.ts`
-    await comfyPage.page.mouse.move(10, 10)
-    await comfyPage.page.mouse.click(10, 10)
-
-    // Expect the graph to not be modified
-    expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-  })
-})

build/plugins/addElementVnodeExportPlugin.ts

@@ -1,59 +0,0 @@
-import { Plugin } from 'vite'
-
-/**
- * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
- *
- * This plugin addresses compatibility issues where some components or libraries
- * might be using the older createElementVNode function name instead of createBaseVNode.
- * It modifies the Vue vendor chunk during build to add the alias export.
- *
- * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
- */
-export function addElementVnodeExportPlugin(): Plugin {
-  return {
-    name: 'add-element-vnode-export-plugin',
-
-    renderChunk(code, chunk, _options) {
-      if (chunk.name.startsWith('vendor-vue')) {
-        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
-        const match = code.match(exportRegex)
-
-        if (match) {
-          const existingExports = match[2].trim()
-          const exportsArray = existingExports
-            .split(',')
-            .map((e) => e.trim())
-            .filter(Boolean)
-
-          const hasCreateBaseVNode = exportsArray.some((e) =>
-            e.startsWith('createBaseVNode')
-          )
-          const hasCreateElementVNode = exportsArray.some((e) =>
-            e.includes('createElementVNode')
-          )
-
-          if (hasCreateBaseVNode && !hasCreateElementVNode) {
-            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
-            const newCode = code.replace(exportRegex, newExportStatement)
-
-            console.log(
-              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
-            )
-
-            return { code: newCode, map: null }
-          } else if (!hasCreateBaseVNode) {
-            console.warn(
-              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
-            )
-          }
-        } else {
-          console.warn(
-            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
-          )
-        }
-      }
-
-      return null
-    }
-  }
-}

build/plugins/comfyAPIPlugin.ts

@@ -1,82 +0,0 @@
-import path from 'path'
-import { Plugin } from 'vite'
-
-interface ShimResult {
-  code: string
-  exports: string[]
-}
-
-function isLegacyFile(id: string): boolean {
-  return (
-    id.endsWith('.ts') &&
-    (id.includes('src/extensions/core') || id.includes('src/scripts'))
-  )
-}
-
-function transformExports(code: string, id: string): ShimResult {
-  const moduleName = getModuleName(id)
-  const exports: string[] = []
-  let newCode = code
-
-  // Regex to match different types of exports
-  const regex =
-    /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
-  let match
-
-  while ((match = regex.exec(code)) !== null) {
-    const name = match[2]
-    // All exports should be bind to the window object as new API endpoint.
-    if (exports.length == 0) {
-      newCode += `\nwindow.comfyAPI = window.comfyAPI || {};`
-      newCode += `\nwindow.comfyAPI.${moduleName} = window.comfyAPI.${moduleName} || {};`
-    }
-    newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
-    exports.push(
-      `export const ${name} = window.comfyAPI.${moduleName}.${name};\n`
-    )
-  }
-
-  return {
-    code: newCode,
-    exports
-  }
-}
-
-function getModuleName(id: string): string {
-  // Simple example to derive a module name from the file path
-  const parts = id.split('/')
-  const fileName = parts[parts.length - 1]
-  return fileName.replace(/\.\w+$/, '') // Remove file extension
-}
-
-export function comfyAPIPlugin(isDev: boolean): Plugin {
-  return {
-    name: 'comfy-api-plugin',
-    transform(code: string, id: string) {
-      if (isDev) return null
-
-      if (isLegacyFile(id)) {
-        const result = transformExports(code, id)
-
-        if (result.exports.length > 0) {
-          const projectRoot = process.cwd()
-          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
-          const shimFileName = relativePath.replace(/\.ts$/, '.js')
-
-          const shimComment = `// Shim for ${relativePath}\n`
-
-          this.emitFile({
-            type: 'asset',
-            fileName: shimFileName,
-            source: shimComment + result.exports.join('')
-          })
-        }
-
-        return {
-          code: result.code,
-          map: null // If you're not modifying the source map, return null
-        }
-      }
-    }
-  }
-}

build/plugins/generateImportMapPlugin.ts

@@ -1,103 +0,0 @@
-import type { OutputOptions } from 'rollup'
-import { HtmlTagDescriptor, Plugin } from 'vite'
-
-interface VendorLibrary {
-  name: string
-  pattern: RegExp
-}
-
-/**
- * Vite plugin that generates an import map for vendor chunks.
- *
- * This plugin creates a browser-compatible import map that maps module specifiers
- * (like 'vue' or 'primevue') to their actual file locations in the build output.
- * This improves module loading in modern browsers and enables better caching.
- *
- * The plugin:
- * 1. Tracks vendor chunks during bundle generation
- * 2. Creates mappings between module names and their file paths
- * 3. Injects an import map script tag into the HTML head
- * 4. Configures manual chunk splitting for vendor libraries
- *
- * @param vendorLibraries - An array of vendor libraries to split into separate chunks
- * @returns {Plugin} A Vite plugin that generates and injects an import map
- */
-export function generateImportMapPlugin(
-  vendorLibraries: VendorLibrary[]
-): Plugin {
-  const importMapEntries: Record<string, string> = {}
-
-  return {
-    name: 'generate-import-map-plugin',
-
-    // Configure manual chunks during the build process
-    configResolved(config) {
-      if (config.build) {
-        // Ensure rollupOptions exists
-        if (!config.build.rollupOptions) {
-          config.build.rollupOptions = {}
-        }
-
-        const outputOptions: OutputOptions = {
-          manualChunks: (id: string) => {
-            for (const lib of vendorLibraries) {
-              if (lib.pattern.test(id)) {
-                return `vendor-${lib.name}`
-              }
-            }
-            return null
-          },
-          // Disable minification of internal exports to preserve function names
-          minifyInternalExports: false
-        }
-        config.build.rollupOptions.output = outputOptions
-      }
-    },
-
-    generateBundle(_options, bundle) {
-      for (const fileName in bundle) {
-        const chunk = bundle[fileName]
-        if (chunk.type === 'chunk' && !chunk.isEntry) {
-          // Find matching vendor library by chunk name
-          const vendorLib = vendorLibraries.find(
-            (lib) => chunk.name === `vendor-${lib.name}`
-          )
-
-          if (vendorLib) {
-            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
-            importMapEntries[vendorLib.name] = relativePath
-
-            console.log(
-              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
-            )
-          }
-        }
-      }
-    },
-
-    transformIndexHtml(html) {
-      if (Object.keys(importMapEntries).length === 0) {
-        console.warn(
-          '[ImportMap Plugin] No vendor chunks found to create import map.'
-        )
-        return html
-      }
-
-      const importMap = {
-        imports: importMapEntries
-      }
-
-      const importMapTag: HtmlTagDescriptor = {
-        tag: 'script',
-        attrs: { type: 'importmap' },
-        children: JSON.stringify(importMap, null, 2),
-        injectTo: 'head'
-      }
-
-      return {
-        html,
-        tags: [importMapTag]
-      }
-    }
-  }
-}

build/plugins/index.ts

@@ -1,3 +0,0 @@
-export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
-export { comfyAPIPlugin } from './comfyAPIPlugin'
-export { generateImportMapPlugin } from './generateImportMapPlugin'

eslint.config.js

@@ -1,5 +1,4 @@
 import pluginJs from '@eslint/js'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
 import globals from 'globals'
@@ -21,26 +20,21 @@ export default [
       globals: {
         ...globals.browser,
         __COMFYUI_FRONTEND_VERSION__: 'readonly'
-      },
-      parser: tseslint.parser,
-      parserOptions: {
-        project: './tsconfig.json',
-        ecmaVersion: 2020,
-        sourceType: 'module',
-        extraFileExtensions: ['.vue']
       }
     }
   },
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
-  eslintPluginPrettierRecommended,
+  ...pluginVue.configs['flat/essential'],
   {
     files: ['src/**/*.vue'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser
-      }
+    languageOptions: { parserOptions: { parser: tseslint.parser } }
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/prefer-as-const': 'off'
     }
   },
   {
@@ -48,12 +42,10 @@ export default [
       'unused-imports': unusedImports
     },
     rules: {
-      '@typescript-eslint/no-floating-promises': 'error',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
-      'unused-imports/no-unused-imports': 'error',
-      'vue/no-v-html': 'off'
+      'unused-imports/no-unused-imports': 'error'
     }
   }
 ]

global.d.ts

@@ -1,9 +1,6 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
-declare const __ALGOLIA_APP_ID__: string
-declare const __ALGOLIA_API_KEY__: string
-declare const __USE_PROD_CONFIG__: boolean
 
 interface Navigator {
   /**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.17.9",
+  "version": "1.15.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -25,7 +25,8 @@
     "lint:fix": "eslint src --fix",
     "locale": "lobe-i18n locale",
     "collect-i18n": "playwright test --config=playwright.i18n.config.ts",
-    "json-schema": "tsx scripts/generate-json-schema.ts"
+    "json-schema": "tsx scripts/generate-json-schema.ts",
+    "fetch-templates": "tsx scripts/fetch-templates.ts"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
@@ -43,8 +44,6 @@
     "autoprefixer": "^10.4.19",
     "chalk": "^5.3.0",
     "eslint": "^9.12.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.27.0",
     "fs-extra": "^11.2.0",
@@ -61,7 +60,7 @@
     "typescript-eslint": "^8.0.0",
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.18",
+    "vite": "^5.4.14",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.0.0",
     "vue-tsc": "^2.1.10",
@@ -71,8 +70,8 @@
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.39",
-    "@comfyorg/litegraph": "^0.13.8",
+    "@comfyorg/comfyui-electron-types": "^0.4.31",
+    "@comfyorg/litegraph": "^0.11.1",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
@@ -90,7 +89,6 @@
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "dotenv": "^16.4.5",
-    "firebase": "^11.6.0",
     "fuse.js": "^7.0.0",
     "jsondiffpatch": "^0.6.0",
     "lodash": "^4.17.21",
@@ -103,7 +101,6 @@
     "vue": "^3.5.13",
     "vue-i18n": "^9.14.3",
     "vue-router": "^4.4.3",
-    "vuefire": "^3.2.1",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.0"
   }

scripts/fetch-templates.ts

@@ -0,0 +1,24 @@
+import fs from 'fs-extra'
+import { execSync } from 'node:child_process'
+import path from 'node:path'
+
+const workflowTemplatesRepo = 'https://github.com/Comfy-Org/workflow_templates'
+const tempRepoDir = './templates_repo'
+
+// Clone the repository
+execSync(`git clone ${workflowTemplatesRepo} --depth 1 ${tempRepoDir}`)
+
+// Create public/templates directory if it doesn't exist
+fs.ensureDirSync('public/templates')
+
+// Copy templates from repo to public/templates
+const sourceDir = path.join(tempRepoDir, 'templates')
+const targetDir = 'public/templates'
+
+// Copy entire directory at once
+fs.copySync(sourceDir, targetDir)
+
+// Remove the temporary repository directory
+fs.removeSync(tempRepoDir)
+
+console.log('Templates fetched successfully')

src/assets/css/style.css

@@ -398,7 +398,6 @@ button.comfy-queue-btn {
 .graphdialog {
   min-height: 1em;
   background-color: var(--comfy-menu-bg);
-  z-index: 41; /* z-index is set to 41 here in order to appear over selection-overlay-container which should have a z-index of 40 */
 }
 
 .graphdialog .name {

src/components/BrowserTabTitle.vue

@@ -17,9 +17,7 @@ const TITLE_SUFFIX = ' - ComfyUI'
 
 const executionStore = useExecutionStore()
 const executionText = computed(() =>
-  executionStore.isIdle
-    ? ''
-    : `[${Math.round(executionStore.executionProgress * 100)}%]`
+  executionStore.isIdle ? '' : `[${executionStore.executionProgress}%]`
 )
 
 const settingStore = useSettingStore()
@@ -43,7 +41,7 @@ const workflowNameText = computed(() => {
 
 const nodeExecutionTitle = computed(() =>
   executionStore.executingNode && executionStore.executingNodeProgress
-    ? `${executionText.value}[${Math.round(executionStore.executingNodeProgress * 100)}%] ${executionStore.executingNode.type}`
+    ? `${executionText.value}[${executionStore.executingNodeProgress}%] ${executionStore.executingNode.type}`
     : ''
 )
 

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -1,19 +1,19 @@
 <template>
   <Splitter
-    :key="activeSidebarTabId ?? undefined"
     class="splitter-overlay-root splitter-overlay"
     :pt:gutter="sidebarPanelVisible ? '' : 'hidden'"
-    :state-key="activeSidebarTabId ?? undefined"
-    state-storage="local"
+    :key="activeSidebarTabId ?? undefined"
+    :stateKey="activeSidebarTabId ?? undefined"
+    stateStorage="local"
   >
     <SplitterPanel
+      class="side-bar-panel"
+      :minSize="10"
+      :size="20"
       v-show="sidebarPanelVisible"
       v-if="sidebarLocation === 'left'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
     >
-      <slot name="side-bar-panel" />
+      <slot name="side-bar-panel"></slot>
     </SplitterPanel>
 
     <SplitterPanel :size="100">
@@ -21,26 +21,26 @@
         class="splitter-overlay max-w-full"
         layout="vertical"
         :pt:gutter="bottomPanelVisible ? '' : 'hidden'"
-        state-key="bottom-panel-splitter"
-        state-storage="local"
+        stateKey="bottom-panel-splitter"
+        stateStorage="local"
       >
         <SplitterPanel class="graph-canvas-panel relative">
-          <slot name="graph-canvas-panel" />
+          <slot name="graph-canvas-panel"></slot>
         </SplitterPanel>
-        <SplitterPanel v-show="bottomPanelVisible" class="bottom-panel">
-          <slot name="bottom-panel" />
+        <SplitterPanel class="bottom-panel" v-show="bottomPanelVisible">
+          <slot name="bottom-panel"></slot>
         </SplitterPanel>
       </Splitter>
     </SplitterPanel>
 
     <SplitterPanel
+      class="side-bar-panel"
+      :minSize="10"
+      :size="20"
       v-show="sidebarPanelVisible"
       v-if="sidebarLocation === 'right'"
-      class="side-bar-panel"
-      :min-size="10"
-      :size="20"
     >
-      <slot name="side-bar-panel" />
+      <slot name="side-bar-panel"></slot>
     </SplitterPanel>
   </Splitter>
 </template>

src/components/MenuHamburger.vue

@@ -5,11 +5,11 @@
     :style="positionCSS"
   >
     <Button
-      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
       icon="pi pi-bars"
       severity="secondary"
       text
       size="large"
+      v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
       :aria-label="$t('menu.showMenu')"
       aria-live="assertive"
       @click="exitFocusMode"

src/components/actionbar/BatchCountEdit.vue

@@ -1,19 +1,19 @@
 <template>
   <div
+    class="batch-count"
     v-tooltip.bottom="{
       value: $t('menu.batchCount'),
       showDelay: 600
     }"
-    class="batch-count"
     :aria-label="$t('menu.batchCount')"
   >
     <InputNumber
-      v-model="batchCount"
       class="w-14"
+      v-model="batchCount"
       :min="minQueueCount"
       :max="maxQueueCount"
       fluid
-      show-buttons
+      showButtons
       :pt="{
         incrementButton: {
           class: 'w-6',

src/components/actionbar/ComfyActionbar.vue

@@ -4,8 +4,9 @@
     :style="style"
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
   >
-    <div ref="panelRef" class="actionbar-content flex items-center select-none">
-      <span ref="dragHandleRef" class="drag-handle cursor-move mr-2 p-0!" />
+    <div class="actionbar-content flex items-center select-none" ref="panelRef">
+      <span class="drag-handle cursor-move mr-2 p-0!" ref="dragHandleRef">
+      </span>
       <ComfyQueueButton />
     </div>
   </Panel>
@@ -88,9 +89,9 @@ const setInitialPosition = () => {
   }
 }
 onMounted(setInitialPosition)
-watch(visible, async (newVisible) => {
+watch(visible, (newVisible) => {
   if (newVisible) {
-    await nextTick(setInitialPosition)
+    nextTick(setInitialPosition)
   }
 })
 

src/components/actionbar/ComfyQueueButton.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="queue-button-group flex">
     <SplitButton
+      class="comfyui-queue-button"
+      :label="activeQueueModeMenuItem.label"
+      severity="primary"
+      size="small"
+      @click="queuePrompt"
+      :model="queueModeMenuItems"
+      data-testid="queue-button"
       v-tooltip.bottom="{
         value: workspaceStore.shiftDown
           ? $t('menu.runWorkflowFront')
           : $t('menu.runWorkflow'),
         showDelay: 600
       }"
-      class="comfyui-queue-button"
-      :label="activeQueueModeMenuItem.label"
-      severity="primary"
-      size="small"
-      :model="queueModeMenuItems"
-      data-testid="queue-button"
-      @click="queuePrompt"
     >
       <template #icon>
         <i-lucide:list-start v-if="workspaceStore.shiftDown" />
@@ -23,15 +23,15 @@
       </template>
       <template #item="{ item }">
         <Button
-          v-tooltip="{
-            value: item.tooltip,
-            showDelay: 600
-          }"
           :label="String(item.label)"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"
           text
+          v-tooltip="{
+            value: item.tooltip,
+            showDelay: 600
+          }"
         />
       </template>
     </SplitButton>
@@ -48,7 +48,8 @@
         text
         :aria-label="$t('menu.interrupt')"
         @click="() => commandStore.execute('Comfy.Interrupt')"
-      />
+      >
+      </Button>
       <Button
         v-tooltip.bottom="{
           value: $t('sideToolbar.queueTab.clearPendingTasks'),
@@ -134,12 +135,12 @@ const hasPendingTasks = computed(
 )
 
 const commandStore = useCommandStore()
-const queuePrompt = async (e: Event) => {
+const queuePrompt = (e: Event) => {
   const commandId =
     'shiftKey' in e && e.shiftKey
       ? 'Comfy.QueuePromptFront'
       : 'Comfy.QueuePrompt'
-  await commandStore.execute(commandId)
+  commandStore.execute(commandId)
 }
 </script>
 

src/components/bottomPanel/BottomPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-full">
     <Tabs v-model:value="bottomPanelStore.activeBottomPanelTabId">
-      <TabList pt:tab-list="border-none">
+      <TabList pt:tabList="border-none">
         <div class="w-full flex justify-between">
           <div class="tabs-container">
             <Tab

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

@@ -1,7 +1,7 @@
 <template>
-  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
+  <div class="relative overflow-hidden h-full w-full bg-black" ref="rootEl">
     <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+      <div class="h-full terminal-host" ref="terminalEl"></div>
     </div>
   </div>
 </template>

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

@@ -24,17 +24,17 @@ const terminalCreated = (
     root,
     autoRows: true,
     autoCols: true,
-    onResize: async () => {
+    onResize: () => {
       // If we aren't visible, don't resize
       if (!terminal.element?.offsetParent) return
 
-      await terminalApi.resize(terminal.cols, terminal.rows)
+      terminalApi.resize(terminal.cols, terminal.rows)
     }
   })
 
   onMounted(async () => {
     offData = terminal.onData(async (message: string) => {
-      await terminalApi.write(message)
+      terminalApi.write(message)
     })
 
     offOutput = terminalApi.onOutput((message) => {

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

@@ -1,8 +1,6 @@
 <template>
   <div class="bg-black h-full w-full">
-    <p v-if="errorMessage" class="p-4 text-center">
-      {{ errorMessage }}
-    </p>
+    <p v-if="errorMessage" class="p-4 text-center">{{ errorMessage }}</p>
     <ProgressSpinner
       v-else-if="loading"
       class="relative inset-0 flex justify-center items-center h-full z-10"
@@ -59,7 +57,7 @@ const terminalCreated = (
     if (!clientId.value) {
       await until(clientId).not.toBeNull()
     }
-    await api.subscribeLogs(true)
+    api.subscribeLogs(true)
     api.addEventListener('logs', logReceived)
   }
 
@@ -78,9 +76,9 @@ const terminalCreated = (
     loading.value = false
   })
 
-  onUnmounted(async () => {
+  onUnmounted(() => {
     if (api.clientId) {
-      await api.subscribeLogs(false)
+      api.subscribeLogs(false)
     }
     api.removeEventListener('logs', logReceived)
   })

src/components/common/ApiNodesCostBreakdown.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 h-full">
-    <div class="flex justify-between text-xs">
-      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
-      <div>{{ t('apiNodesCostBreakdown.costPerRun') }}</div>
-    </div>
-    <ScrollPanel class="flex-grow h-0">
-      <div class="flex flex-col gap-2">
-        <div
-          v-for="node in nodes"
-          :key="node.name"
-          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
-        >
-          <div class="flex items-center gap-2">
-            <span class="text-base font-medium leading-tight">{{
-              node.name
-            }}</span>
-          </div>
-          <div class="flex items-center gap-1">
-            <Tag
-              severity="secondary"
-              icon="pi pi-dollar"
-              rounded
-              class="text-amber-400 p-1"
-            />
-            <span class="text-base font-medium leading-tight">
-              {{ node.cost.toFixed(costPrecision) }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </ScrollPanel>
-    <template v-if="showTotal && nodes.length > 1">
-      <Divider class="my-2" />
-      <div class="flex justify-between items-center border-t px-3">
-        <span class="text-sm">{{ t('apiNodesCostBreakdown.totalCost') }}</span>
-        <div class="flex items-center gap-1">
-          <Tag
-            severity="secondary"
-            icon="pi pi-dollar"
-            rounded
-            class="text-yellow-500 p-1"
-          />
-          <span>{{ totalCost.toFixed(costPrecision) }}</span>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Divider from 'primevue/divider'
-import ScrollPanel from 'primevue/scrollpanel'
-import Tag from 'primevue/tag'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { ApiNodeCost } from '@/types/apiNodeTypes'
-
-const { t } = useI18n()
-
-const {
-  nodes,
-  showTotal = true,
-  costPrecision = 3
-} = defineProps<{
-  nodes: ApiNodeCost[]
-  showTotal?: boolean
-  costPrecision?: number
-}>()
-
-const totalCost = computed(() =>
-  nodes.reduce((sum, node) => sum + node.cost, 0)
-)
-</script>

src/components/common/ApiNodesList.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3 h-full">
-    <div class="flex text-xs">
-      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
-    </div>
-    <ScrollPanel class="flex-grow h-0">
-      <div class="flex flex-col gap-2">
-        <div
-          v-for="nodeName in nodeNames"
-          :key="nodeName"
-          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
-        >
-          <div class="flex items-center gap-2">
-            <span class="text-base font-medium leading-tight">{{
-              nodeName
-            }}</span>
-          </div>
-        </div>
-      </div>
-    </ScrollPanel>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const { nodeNames } = defineProps<{ nodeNames: string[] }>()
-</script>

src/components/common/ColorCustomizationSelector.vue

@@ -5,8 +5,8 @@
     <SelectButton
       v-model="selectedColorOption"
       :options="colorOptionsWithCustom"
-      option-label="name"
-      data-key="value"
+      optionLabel="name"
+      dataKey="value"
       :allow-empty="false"
     >
       <template #option="slotProps">
@@ -18,8 +18,8 @@
             backgroundColor: slotProps.option.value,
             borderRadius: '50%'
           }"
-        />
-        <i v-else class="pi pi-palette text-lg" />
+        ></div>
+        <i v-else class="pi pi-palette text-lg"></i>
       </template>
     </SelectButton>
     <ColorPicker

src/components/common/ComfyImage.vue

@@ -8,22 +8,22 @@
     <img
       v-if="contain"
       :src="src"
+      @error="handleImageError"
       :data-test="src"
       class="comfy-image-blur"
       :style="{ 'background-image': `url(${src})` }"
       :alt="alt"
-      @error="handleImageError"
     />
     <img
       :src="src"
+      @error="handleImageError"
       class="comfy-image-main"
       :class="classProp"
       :alt="alt"
-      @error="handleImageError"
     />
   </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
-    <i class="pi pi-image" />
+    <i class="pi pi-image"></i>
     <span>{{ $t('g.imageFailedToLoad') }}</span>
   </div>
 </template>

src/components/common/CustomFormValue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" />
+  <div ref="container"></div>
 </template>
 
 <script setup lang="ts">

src/components/common/CustomizationDialog.vue

@@ -6,14 +6,14 @@
         <SelectButton
           v-model="selectedIcon"
           :options="iconOptions"
-          option-label="name"
-          data-key="value"
+          optionLabel="name"
+          dataKey="value"
         >
           <template #option="slotProps">
             <i
               :class="['pi', slotProps.option.value, 'mr-2']"
               :style="{ color: finalColor }"
-            />
+            ></i>
           </template>
         </SelectButton>
       </div>
@@ -30,14 +30,14 @@
       <Button
         :label="$t('g.reset')"
         icon="pi pi-refresh"
-        class="p-button-text"
         @click="resetCustomization"
+        class="p-button-text"
       />
       <Button
         :label="$t('g.confirm')"
         icon="pi pi-check"
-        autofocus
         @click="confirmCustomization"
+        autofocus
       />
     </template>
   </Dialog>

src/components/common/DeviceInfo.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="grid grid-cols-2 gap-2">
     <template v-for="col in deviceColumns" :key="col.field">
-      <div class="font-medium">
-        {{ col.header }}
-      </div>
+      <div class="font-medium">{{ col.header }}</div>
       <div>
         {{ formatValue(props.device[col.field], col.field) }}
       </div>

src/components/common/EditableText.vue

@@ -6,19 +6,19 @@
     <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
-      ref="inputRef"
-      v-model:modelValue="inputValue"
-      v-focus
       type="text"
       size="small"
       fluid
+      v-model:modelValue="inputValue"
+      ref="inputRef"
+      @keyup.enter="blurInputElement"
+      @click.stop
       :pt="{
         root: {
           onBlur: finishEditing
         }
       }"
-      @keyup.enter="blurInputElement"
-      @click.stop
+      v-focus
     />
   </div>
 </template>
@@ -45,10 +45,10 @@ const finishEditing = () => {
 }
 watch(
   () => isEditing,
-  async (newVal) => {
+  (newVal) => {
     if (newVal) {
       inputValue.value = modelValue
-      await nextTick(() => {
+      nextTick(() => {
         if (!inputRef.value) return
         const fileName = inputValue.value.includes('.')
           ? inputValue.value.split('.').slice(0, -1).join('.')

src/components/common/ElectronFileDownload.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="flex flex-col">
     <div class="flex flex-row items-center gap-2">
-      <i v-if="status === 'completed'" class="pi pi-check text-green-500" />
+      <i class="pi pi-check text-green-500" v-if="status === 'completed'" />
       <div class="file-info">
         <div class="file-details">
           <span class="file-type" :title="hint">{{ label }}</span>
@@ -14,20 +14,20 @@
 
       <div class="file-action">
         <Button
-          v-if="status === null || status === 'error'"
           class="file-action-button"
           :label="$t('g.download') + ' (' + fileSize + ')'"
           size="small"
           outlined
           :disabled="!!props.error"
-          icon="pi pi-download"
           @click="triggerDownload"
+          v-if="status === null || status === 'error'"
+          icon="pi pi-download"
         />
       </div>
     </div>
     <div
-      v-if="status === 'in_progress' || status === 'paused'"
       class="flex flex-row items-center gap-2"
+      v-if="status === 'in_progress' || status === 'paused'"
     >
       <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
            https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
@@ -39,36 +39,36 @@
       />
 
       <Button
-        v-if="status === 'in_progress'"
-        v-tooltip.top="t('electronFileDownload.pause')"
         class="file-action-button"
         size="small"
         outlined
         :disabled="!!props.error"
-        icon="pi pi-pause-circle"
         @click="triggerPauseDownload"
+        v-if="status === 'in_progress'"
+        icon="pi pi-pause-circle"
+        v-tooltip.top="t('electronFileDownload.pause')"
       />
 
       <Button
-        v-if="status === 'paused'"
-        v-tooltip.top="t('electronFileDownload.resume')"
         class="file-action-button"
         size="small"
         outlined
         :disabled="!!props.error"
-        icon="pi pi-play-circle"
         @click="triggerResumeDownload"
+        v-if="status === 'paused'"
+        icon="pi pi-play-circle"
+        v-tooltip.top="t('electronFileDownload.resume')"
       />
 
       <Button
-        v-tooltip.top="t('electronFileDownload.cancel')"
         class="file-action-button"
         size="small"
         outlined
         :disabled="!!props.error"
+        @click="triggerCancelDownload"
         icon="pi pi-times-circle"
         severity="danger"
-        @click="triggerCancelDownload"
+        v-tooltip.top="t('electronFileDownload.cancel')"
       />
     </div>
   </div>

src/components/common/ExtensionSlot.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="extension.component" v-if="extension.type === 'vue'" />
+  <component v-if="extension.type === 'vue'" :is="extension.component" />
   <div
     v-else
     :ref="
@@ -11,7 +11,7 @@
           )
       }
     "
-  />
+  ></div>
 </template>
 
 <script setup lang="ts">

src/components/common/FormImageUpload.vue

@@ -10,7 +10,7 @@
           :src="modelValue"
           class="max-w-full max-h-full object-contain"
         />
-        <i v-else class="pi pi-image text-gray-400 text-xl" />
+        <i v-else class="pi pi-image text-gray-400 text-xl"></i>
       </div>
 
       <div class="flex flex-col gap-2">

src/components/common/FormItem.vue

@@ -3,26 +3,26 @@
   <div class="flex flex-row items-center gap-2">
     <div class="form-label flex flex-grow items-center">
       <span
-        :id="`${props.id}-label`"
         class="text-muted"
         :class="props.labelClass"
+        :id="`${props.id}-label`"
       >
-        <slot name="name-prefix" />
+        <slot name="name-prefix"></slot>
         {{ props.item.name }}
         <i
           v-if="props.item.tooltip"
-          v-tooltip="props.item.tooltip"
           class="pi pi-info-circle bg-transparent"
+          v-tooltip="props.item.tooltip"
         />
-        <slot name="name-suffix" />
+        <slot name="name-suffix"></slot>
       </span>
     </div>
     <div class="form-input flex justify-end">
       <component
         :is="markRaw(getFormComponent(props.item))"
         :id="props.id"
-        v-model:modelValue="formValue"
         :aria-labelledby="`${props.id}-label`"
+        v-model:modelValue="formValue"
         v-bind="getFormAttrs(props.item)"
       />
     </div>

src/components/common/InputKnob.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="input-knob flex flex-row items-center gap-2">
     <Knob
-      :model-value="modelValue"
-      :value-template="displayValue"
+      :modelValue="modelValue"
+      @update:modelValue="updateValue"
+      :valueTemplate="displayValue"
       class="knob-part"
       :class="knobClass"
       :min="min"
       :max="max"
       :step="step"
       v-bind="$attrs"
-      @update:model-value="updateValue"
     />
     <InputNumber
-      :model-value="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="updateValue"
       class="input-part"
       :max-fraction-digits="3"
       :class="inputClass"
       :min="min"
       :max="max"
       :step="step"
-      :allow-empty="false"
-      @update:model-value="updateValue"
+      :allowEmpty="false"
     />
   </div>
 </template>

src/components/common/InputSlider.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="input-slider flex flex-row items-center gap-2">
     <Slider
-      :model-value="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="(value) => updateValue(value as number)"
       class="slider-part"
       :class="sliderClass"
       :min="min"
       :max="max"
       :step="step"
       v-bind="$attrs"
-      @update:model-value="(value) => updateValue(value as number)"
     />
     <InputNumber
-      :model-value="modelValue"
+      :modelValue="modelValue"
+      @update:modelValue="updateValue"
       class="input-part"
       :max-fraction-digits="3"
       :class="inputClass"
       :min="min"
       :max="max"
       :step="step"
-      :allow-empty="false"
-      @update:model-value="updateValue"
+      :allowEmpty="false"
     />
   </div>
 </template>