1.14.6 (#3253)

.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/test-ui.yaml

@@ -30,7 +30,7 @@ jobs:
         with:
           repository: 'Comfy-Org/ComfyUI_devtools'
           path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: '49c8220be49120dbaff85f32813d854d6dff2d05'
+          ref: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be'
 
       - uses: actions/setup-node@v4
         with:

.i18nrc.cjs

@@ -9,8 +9,8 @@ module.exports = defineConfig({
   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.
+  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/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() {
@@ -589,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() {

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,35 +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()
-  })
-})

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

@@ -192,19 +192,3 @@ test.describe('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)
-  })
-})

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,8 +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
 
 interface Navigator {
   /**

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.17.0",
+  "version": "1.14.6",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -44,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",
@@ -62,8 +60,9 @@
     "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",
+    "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^2.0.0",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
@@ -73,7 +72,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.31",
-    "@comfyorg/litegraph": "^0.13.3",
+    "@comfyorg/litegraph": "^0.10.9",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",
@@ -91,7 +90,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",
@@ -104,7 +102,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"
   }

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/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>

src/components/common/NoResultsPlaceholder.vue

@@ -3,16 +3,14 @@
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
-          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
+          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem"></i>
           <h3>{{ title }}</h3>
-          <p class="whitespace-pre-line text-center">
-            {{ message }}
-          </p>
+          <p class="whitespace-pre-line text-center">{{ message }}</p>
           <Button
             v-if="buttonLabel"
             :label="buttonLabel"
-            class="p-button-text"
             @click="$emit('action')"
+            class="p-button-text"
           />
         </div>
       </template>

src/components/common/RefreshButton.vue

@@ -22,7 +22,7 @@
       class="p-button-icon pi pi-refresh transition-all"
       :class="{ 'opacity-0': active }"
       data-pc-section="icon"
-    />
+    ></span>
     <span class="p-button-label" data-pc-section="label">&nbsp;</span>
     <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
   </Button>
@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import { VueSeverity } from '@/types/primeVueTypes'
 
 const {
   disabled,
@@ -41,7 +41,7 @@ const {
 } = defineProps<{
   disabled?: boolean
   outlined?: boolean
-  severity?: PrimeVueSeverity
+  severity?: VueSeverity
 }>()
 
 // Model

src/components/common/SearchBox.vue

@@ -11,9 +11,9 @@
       />
       <InputText
         class="search-box-input w-full"
-        :model-value="modelValue"
-        :placeholder="placeholder"
         @input="handleInput"
+        :modelValue="modelValue"
+        :placeholder="placeholder"
       />
       <InputIcon v-if="!modelValue" :class="icon" />
       <Button
@@ -26,8 +26,8 @@
       />
     </IconField>
     <div
-      v-if="filters?.length"
       class="search-filters pt-2 flex flex-wrap gap-2"
+      v-if="filters?.length"
     >
       <SearchFilterChip
         v-for="filter in filters"

src/components/common/SystemStatsPanel.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">
-        {{ $t('g.systemInfo') }}
-      </h2>
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.systemInfo') }}</h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
-          <div class="font-medium">
-            {{ col.header }}
-          </div>
+          <div class="font-medium">{{ col.header }}</div>
           <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
         </template>
       </div>
@@ -17,9 +13,7 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">
-        {{ $t('g.devices') }}
-      </h2>
+      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.devices') }}</h2>
       <TabView v-if="props.stats.devices.length > 1">
         <TabPanel
           v-for="device in props.stats.devices"

src/components/common/TreeExplorer.vue

@@ -1,11 +1,11 @@
 <template>
   <Tree
-    v-model:expandedKeys="expandedKeys"
-    v-model:selectionKeys="selectionKeys"
     class="tree-explorer py-0 px-2 2xl:px-4"
     :class="props.class"
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectionKeys="selectionKeys"
     :value="renderedRoot.children"
-    selection-mode="single"
+    selectionMode="single"
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
       nodeContent: ({ context }) => ({
@@ -186,9 +186,9 @@ const menuItems = computed<MenuItem[]>(() =>
     {
       label: t('g.delete'),
       icon: 'pi pi-trash',
-      command: async () => {
+      command: () => {
         if (menuTargetNode.value) {
-          await deleteCommand(menuTargetNode.value)
+          deleteCommand(menuTargetNode.value)
         }
       },
       visible: menuTargetNode.value?.handleDelete !== undefined,

src/components/common/TreeExplorerTreeNode.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    ref="container"
     :class="[
       'tree-node',
       {
@@ -9,16 +8,17 @@
         'tree-leaf': props.node.leaf
       }
     ]"
+    ref="container"
   >
     <div class="node-content">
       <span class="node-label">
-        <slot name="before-label" :node="props.node" />
+        <slot name="before-label" :node="props.node"></slot>
         <EditableText
-          :model-value="node.label"
-          :is-editing="isEditing"
+          :modelValue="node.label"
+          :isEditing="isEditing"
           @edit="handleRename"
         />
-        <slot name="after-label" :node="props.node" />
+        <slot name="after-label" :node="props.node"></slot>
       </span>
       <Badge
         v-if="showNodeBadgeText"
@@ -30,7 +30,7 @@
     <div
       class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
-      <slot name="actions" :node="props.node" />
+      <slot name="actions" :node="props.node"></slot>
     </div>
   </div>
 </template>

src/components/common/VirtualGrid.vue

@@ -3,7 +3,7 @@
     <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
     <div :style="gridStyle">
       <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
-        <slot name="item" :item="item" />
+        <slot name="item" :item="item"> </slot>
       </div>
     </div>
     <div

src/components/common/__tests__/UrlInput.test.ts

@@ -60,7 +60,7 @@ describe('UrlInput', () => {
         })
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    wrapper.setProps({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
@@ -74,7 +74,7 @@ describe('UrlInput', () => {
       validateUrlFn: () => Promise.resolve(true)
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    wrapper.setProps({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
@@ -88,7 +88,7 @@ describe('UrlInput', () => {
       validateUrlFn: () => Promise.resolve(false)
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    wrapper.setProps({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
@@ -141,14 +141,14 @@ describe('UrlInput', () => {
       }
     })
 
-    await wrapper.setProps({ modelValue: 'https://test.com' })
+    wrapper.setProps({ modelValue: 'https://test.com' })
     await nextTick()
     await nextTick()
 
     // Trigger multiple validations in quick succession
-    await wrapper.find('.pi-spinner').trigger('click')
-    await wrapper.find('.pi-spinner').trigger('click')
-    await wrapper.find('.pi-spinner').trigger('click')
+    wrapper.find('.pi-spinner').trigger('click')
+    wrapper.find('.pi-spinner').trigger('click')
+    wrapper.find('.pi-spinner').trigger('click')
 
     await nextTick()
     await nextTick()

src/components/dialog/GlobalDialog.vue

@@ -13,13 +13,11 @@
   >
     <template #header>
       <component
-        :is="item.headerComponent"
         v-if="item.headerComponent"
+        :is="item.headerComponent"
         :id="item.key"
       />
-      <h3 v-else :id="item.key">
-        {{ item.title || ' ' }}
-      </h3>
+      <h3 v-else :id="item.key">{{ item.title || ' ' }}</h3>
     </template>
 
     <component
@@ -28,7 +26,7 @@
       :maximized="item.dialogComponentProps.maximized"
     />
 
-    <template v-if="item.footerComponent" #footer>
+    <template #footer v-if="item.footerComponent">
       <component :is="item.footerComponent" />
     </template>
   </Dialog>

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,43 +0,0 @@
-<!-- Prompt user that the workflow contains API nodes that needs login to run -->
-<template>
-  <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
-    <div class="text-2xl font-medium mb-2">
-      {{ t('apiNodesSignInDialog.title') }}
-    </div>
-
-    <div class="text-base mb-4">
-      {{ t('apiNodesSignInDialog.message') }}
-    </div>
-
-    <ApiNodesCostBreakdown :nodes="apiNodes" :show-total="true" />
-
-    <div class="flex justify-between items-center">
-      <Button :label="t('g.learnMore')" link />
-      <div class="flex gap-2">
-        <Button
-          :label="t('g.cancel')"
-          outlined
-          severity="secondary"
-          @click="onCancel?.()"
-        />
-        <Button :label="t('g.login')" @click="onLogin?.()" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-import ApiNodesCostBreakdown from '@/components/common/ApiNodesCostBreakdown.vue'
-import type { ApiNodeCost } from '@/types/apiNodeTypes'
-
-const { t } = useI18n()
-
-const { apiNodes, onLogin, onCancel } = defineProps<{
-  apiNodes: ApiNodeCost[]
-  onLogin?: () => void
-  onCancel?: () => void
-}>()
-</script>

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -2,9 +2,7 @@
   <section class="prompt-dialog-content flex flex-col gap-6 m-2 mt-4">
     <span>{{ message }}</span>
     <ul v-if="itemList?.length" class="pl-4 m-0 flex flex-col gap-2">
-      <li v-for="item of itemList" :key="item">
-        {{ item }}
-      </li>
+      <li v-for="item of itemList" :key="item">{{ item }}</li>
     </ul>
     <Message
       v-if="hint"
@@ -20,53 +18,53 @@
         :label="$t('g.cancel')"
         icon="pi pi-undo"
         severity="secondary"
-        autofocus
         @click="onCancel"
+        autofocus
       />
       <Button
         v-if="type === 'default'"
         :label="$t('g.confirm')"
         severity="primary"
-        icon="pi pi-check"
         @click="onConfirm"
+        icon="pi pi-check"
       />
       <Button
         v-else-if="type === 'delete'"
         :label="$t('g.delete')"
         severity="danger"
-        icon="pi pi-trash"
         @click="onConfirm"
+        icon="pi pi-trash"
       />
       <Button
         v-else-if="type === 'overwrite'"
         :label="$t('g.overwrite')"
         severity="warn"
-        icon="pi pi-save"
         @click="onConfirm"
+        icon="pi pi-save"
       />
       <template v-else-if="type === 'dirtyClose'">
         <Button
           :label="$t('g.no')"
           severity="secondary"
-          icon="pi pi-times"
           @click="onDeny"
+          icon="pi pi-times"
         />
-        <Button :label="$t('g.save')" icon="pi pi-save" @click="onConfirm" />
+        <Button :label="$t('g.save')" @click="onConfirm" icon="pi pi-save" />
       </template>
       <Button
         v-else-if="type === 'reinstall'"
         :label="$t('desktopMenu.reinstall')"
         severity="warn"
-        icon="pi pi-eraser"
         @click="onConfirm"
+        icon="pi pi-eraser"
       />
       <!-- Invalid - just show a close button. -->
       <Button
         v-else
         :label="$t('g.close')"
         severity="primary"
-        icon="pi pi-times"
         @click="onCancel"
+        icon="pi pi-times"
       />
     </div>
   </section>

src/components/dialog/content/ErrorDialogContent.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="comfy-error-report flex flex-col gap-4">
-    <NoResultsPlaceholder
-      class="pb-0"
-      icon="pi pi-exclamation-circle"
-      :title="title"
-      :message="error.exceptionMessage"
-    />
-    <template v-if="error.extensionFile">
-      <span>{{ t('errorDialog.extensionFileHint') }}:</span>
-      <br />
-      <span class="font-bold">{{ error.extensionFile }}</span>
-    </template>
-
-    <div class="flex gap-2 justify-center">
-      <Button
-        v-show="!reportOpen"
-        text
-        :label="$t('g.showReport')"
-        @click="showReport"
-      />
-      <Button
-        v-show="!sendReportOpen"
-        text
-        :label="$t('issueReport.helpFix')"
-        @click="showSendReport"
-      />
-    </div>
-    <template v-if="reportOpen">
-      <Divider />
-      <ScrollPanel class="w-full h-[400px] max-w-[80vw]">
-        <pre class="whitespace-pre-wrap break-words">{{ reportContent }}</pre>
-      </ScrollPanel>
-      <Divider />
-    </template>
-    <ReportIssuePanel
-      v-if="sendReportOpen"
-      :title="$t('issueReport.submitErrorReport')"
-      :error-type="error.reportType ?? 'unknownError'"
-      :extra-fields="[stackTraceField]"
-      :tags="{
-        exceptionMessage: error.exceptionMessage,
-        nodeType: error.nodeType ?? 'UNKNOWN'
-      }"
-    />
-    <div class="flex gap-4 justify-end">
-      <FindIssueButton
-        :error-message="error.exceptionMessage"
-        :repo-owner="repoOwner"
-        :repo-name="repoName"
-      />
-      <Button
-        v-if="reportOpen"
-        :label="$t('g.copyToClipboard')"
-        icon="pi pi-copy"
-        @click="copyReportToClipboard"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Divider from 'primevue/divider'
-import ScrollPanel from 'primevue/scrollpanel'
-import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import type { ReportField } from '@/types/issueReportTypes'
-import {
-  type ErrorReportData,
-  generateErrorReport
-} from '@/utils/errorReportUtil'
-
-import ReportIssuePanel from './error/ReportIssuePanel.vue'
-
-const { error } = defineProps<{
-  error: Omit<ErrorReportData, 'workflow' | 'systemStats' | 'serverLogs'> & {
-    /**
-     * The type of error report to submit.
-     * @default 'unknownError'
-     */
-    reportType?: string
-    /**
-     * The file name of the extension that caused the error.
-     */
-    extensionFile?: string
-  }
-}>()
-
-const repoOwner = 'comfyanonymous'
-const repoName = 'ComfyUI'
-const reportContent = ref('')
-const reportOpen = ref(false)
-const showReport = () => {
-  reportOpen.value = true
-}
-const sendReportOpen = ref(false)
-const showSendReport = () => {
-  sendReportOpen.value = true
-}
-const toast = useToast()
-const { t } = useI18n()
-const systemStatsStore = useSystemStatsStore()
-
-const title = computed<string>(
-  () => error.nodeType ?? error.exceptionType ?? t('errorDialog.defaultTitle')
-)
-
-const stackTraceField = computed<ReportField>(() => {
-  return {
-    label: t('issueReport.stackTrace'),
-    value: 'StackTrace',
-    optIn: true,
-    getData: () => error.traceback
-  }
-})
-
-onMounted(async () => {
-  if (!systemStatsStore.systemStats) {
-    await systemStatsStore.fetchSystemStats()
-  }
-
-  try {
-    const [logs] = await Promise.all([api.getLogs()])
-
-    reportContent.value = generateErrorReport({
-      systemStats: systemStatsStore.systemStats!,
-      serverLogs: logs,
-      workflow: app.graph.serialize(),
-      exceptionType: error.exceptionType,
-      exceptionMessage: error.exceptionMessage,
-      traceback: error.traceback,
-      nodeId: error.nodeId,
-      nodeType: error.nodeType
-    })
-  } catch (error) {
-    console.error('Error fetching logs:', error)
-    toast.add({
-      severity: 'error',
-      summary: t('g.error'),
-      detail: t('toastMessages.failedToFetchLogs'),
-      life: 5000
-    })
-  }
-})
-
-const { copyToClipboard } = useCopyToClipboard()
-const copyReportToClipboard = async () => {
-  await copyToClipboard(reportContent.value)
-}
-</script>

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -0,0 +1,196 @@
+<template>
+  <NoResultsPlaceholder
+    icon="pi pi-exclamation-circle"
+    :title="props.error.node_type"
+    :message="props.error.exception_message"
+  />
+  <div class="comfy-error-report">
+    <div class="flex gap-2 justify-center">
+      <Button
+        v-show="!reportOpen"
+        text
+        :label="$t('g.showReport')"
+        @click="showReport"
+      />
+      <Button
+        v-show="!sendReportOpen"
+        text
+        :label="$t('issueReport.helpFix')"
+        @click="showSendReport"
+      />
+    </div>
+    <template v-if="reportOpen">
+      <Divider />
+      <ScrollPanel style="width: 100%; height: 400px; max-width: 80vw">
+        <pre class="wrapper-pre">{{ reportContent }}</pre>
+      </ScrollPanel>
+      <Divider />
+    </template>
+    <ReportIssuePanel
+      v-if="sendReportOpen"
+      :title="$t('issueReport.submitErrorReport')"
+      error-type="graphExecutionError"
+      :extra-fields="[stackTraceField]"
+      :tags="{
+        exceptionMessage: props.error.exception_message,
+        nodeType: props.error.node_type
+      }"
+    />
+    <div class="action-container">
+      <FindIssueButton
+        :errorMessage="props.error.exception_message"
+        :repoOwner="repoOwner"
+        :repoName="repoName"
+      />
+      <Button
+        v-if="reportOpen"
+        :label="$t('g.copyToClipboard')"
+        icon="pi pi-copy"
+        @click="copyReportToClipboard"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import ScrollPanel from 'primevue/scrollpanel'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import type { ExecutionErrorWsMessage, SystemStats } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import type { ReportField } from '@/types/issueReportTypes'
+
+import ReportIssuePanel from './error/ReportIssuePanel.vue'
+
+const props = defineProps<{
+  error: ExecutionErrorWsMessage
+}>()
+
+const repoOwner = 'comfyanonymous'
+const repoName = 'ComfyUI'
+const reportContent = ref('')
+const reportOpen = ref(false)
+const showReport = () => {
+  reportOpen.value = true
+}
+const sendReportOpen = ref(false)
+const showSendReport = () => {
+  sendReportOpen.value = true
+}
+const toast = useToast()
+const { t } = useI18n()
+
+const stackTraceField = computed<ReportField>(() => {
+  return {
+    label: t('issueReport.stackTrace'),
+    value: 'StackTrace',
+    optIn: true,
+    getData: () => props.error.traceback?.join('\n')
+  }
+})
+
+onMounted(async () => {
+  try {
+    const [systemStats, logs] = await Promise.all([
+      api.getSystemStats(),
+      api.getLogs()
+    ])
+    generateReport(systemStats, logs)
+  } catch (error) {
+    console.error('Error fetching system stats or logs:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Failed to fetch system information',
+      life: 5000
+    })
+  }
+})
+
+const generateReport = (systemStats: SystemStats, logs: string) => {
+  // The default JSON workflow has about 3000 characters.
+  const MAX_JSON_LENGTH = 20000
+  const workflowJSONString = JSON.stringify(app.graph.serialize())
+  const workflowText =
+    workflowJSONString.length > MAX_JSON_LENGTH
+      ? 'Workflow too large. Please manually upload the workflow from local file system.'
+      : workflowJSONString
+
+  reportContent.value = `
+# ComfyUI Error Report
+## Error Details
+- **Node ID:** ${props.error.node_id}
+- **Node Type:** ${props.error.node_type}
+- **Exception Type:** ${props.error.exception_type}
+- **Exception Message:** ${props.error.exception_message}
+## Stack Trace
+\`\`\`
+${props.error.traceback.join('\n')}
+\`\`\`
+## System Information
+- **ComfyUI Version:** ${systemStats.system.comfyui_version}
+- **Arguments:** ${systemStats.system.argv.join(' ')}
+- **OS:** ${systemStats.system.os}
+- **Python Version:** ${systemStats.system.python_version}
+- **Embedded Python:** ${systemStats.system.embedded_python}
+- **PyTorch Version:** ${systemStats.system.pytorch_version}
+## Devices
+${systemStats.devices
+  .map(
+    (device) => `
+- **Name:** ${device.name}
+  - **Type:** ${device.type}
+  - **VRAM Total:** ${device.vram_total}
+  - **VRAM Free:** ${device.vram_free}
+  - **Torch VRAM Total:** ${device.torch_vram_total}
+  - **Torch VRAM Free:** ${device.torch_vram_free}
+`
+  )
+  .join('\n')}
+## Logs
+\`\`\`
+${logs}
+\`\`\`
+## Attached Workflow
+Please make sure that workflow does not contain any sensitive information such as API keys or passwords.
+\`\`\`
+${workflowText}
+\`\`\`
+
+## Additional Context
+(Please add any additional context or steps to reproduce the error here)
+`
+}
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyReportToClipboard = async () => {
+  await copyToClipboard(reportContent.value)
+}
+</script>
+
+<style scoped>
+.comfy-error-report {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.action-container {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+}
+
+.wrapper-pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

src/components/dialog/content/IssueReportDialogContent.vue

@@ -8,9 +8,7 @@
     >
       <template #header>
         <header class="flex flex-col items-center w-full">
-          <h2 id="issue-report-title" class="text-4xl">
-            {{ title }}
-          </h2>
+          <h2 id="issue-report-title" class="text-4xl">{{ title }}</h2>
           <span v-if="subtitle" class="text-muted mt-0">{{ subtitle }}</span>
         </header>
       </template>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -7,8 +7,8 @@
   />
   <ListBox
     :options="uniqueNodes"
-    option-label="label"
-    scroll-height="100%"
+    optionLabel="label"
+    scrollHeight="100%"
     class="comfy-missing-nodes"
     :pt="{
       list: { class: 'border-none' }
@@ -22,17 +22,14 @@
         }}</span>
         <Button
           v-if="slotProps.option.action"
+          @click="slotProps.option.action.callback"
           :label="slotProps.option.action.text"
           size="small"
           outlined
-          @click="slotProps.option.action.callback"
         />
       </div>
     </template>
   </ListBox>
-  <div class="flex justify-end py-3">
-    <Button label="Open Manager" size="small" outlined @click="openManager" />
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -41,9 +38,7 @@ import ListBox from 'primevue/listbox'
 import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useDialogService } from '@/services/dialogService'
 import type { MissingNodeType } from '@/types/comfy'
-import { ManagerTab } from '@/types/comfyManagerTypes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
@@ -69,12 +64,6 @@ const uniqueNodes = computed(() => {
       return { label: node }
     })
 })
-
-const openManager = () => {
-  useDialogService().showManagerDialog({
-    initialTab: ManagerTab.Missing
-  })
-}
 </script>
 
 <style scoped>

src/components/dialog/content/MissingModelsWarning.vue

@@ -129,12 +129,9 @@ const missingModels = computed(() => {
   })
 })
 
-onBeforeUnmount(async () => {
+onBeforeUnmount(() => {
   if (doNotAskAgain.value) {
-    await useSettingStore().set(
-      'Comfy.Workflow.ShowMissingModelsWarning',
-      false
-    )
+    useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', false)
   }
 })
 </script>

src/components/dialog/content/PromptDialogContent.vue

@@ -4,15 +4,13 @@
       <InputText
         ref="inputRef"
         v-model="inputValue"
-        autofocus
         @keyup.enter="onConfirm"
         @focus="selectAllText"
+        autofocus
       />
       <label>{{ message }}</label>
     </FloatLabel>
-    <Button @click="onConfirm">
-      {{ $t('g.confirm') }}
-    </Button>
+    <Button @click="onConfirm">{{ $t('g.confirm') }}</Button>
   </div>
 </template>